/* ==========================================================================
Dusk & Dawn — transcendental-comfort loungewear & sleepwear.
Ported from the Stitch "Dusk & Dawn | Transcendental Comfort Loungewear"
design (docs/templates/pending/stitch_47_dusk_dawn_e_commerce_store/
.../dusk_dawn/DESIGN.md): a warm "Cloud" cream canvas, deep Twilight-Mauve
actions and headings, a Warm-Apricot accent used SPARINGLY for chips /
highlights, Lora serif headlines (the DESIGN.md's Literata, substituted to the
allowlist) over Source Sans 3 for all body/UI/prices, pill buttons and soft
16px cards / 8px inputs (DESIGN.md "Shapes").
This theme OWNS the hero / featured / sleep-ritual / new-arrivals /
categories / newsletter home sections (dd-* markup) and INHERITS Modern
Retail's header (the export's header IS logo-left single-row), footer, trust
strip, promo tiles, journal, product card and every functional page. This
stylesheet therefore has two jobs:
(a) style the NEW `dd-*` markup into the Stitch design; and
(b) restyle the INHERITED `mr-*` surfaces — chiefly by re-pointing the base
neutral tokens at the cream/mauve palette, and drawing the plum footer +
plum announcement band the export renders (both reuse the primary token
rather than an uncustomizable 3rd literal, so the 5-token customizer
stays in full control).
Everything is scoped under `body.dd-theme` and reads the 5 customizer tokens
(--bs-primary, --bs-primary-rgb, --ll-accent, --ll-font-headings,
--ll-font-body, --bs-border-radius) with theme.json-default fallbacks.
------------------------------------------------------------------------
TOKEN SOURCING NOTE. DESIGN.md's PROSE calls Twilight Mauve #7D6B8F the
"primary accent", but the RENDERED export's `primary` token is #645375 and
the rendered button colour wins (theme-factory decision framework 5): every
CTA, the wind-down band and (per the brief's fixed decision + the screenshot)
the footer are `bg-primary` = #645375, and every heading is `text-primary`
= #645375. #7d6b8f is only the CTA hover / primary-container and is kept below
as --dd-plum-soft. The darker #645375 is also the safer choice: it feeds
--bs-primary AND --bs-link-color, and measures ~6.5:1 as text on the cream
canvas where #7d6b8f would be ~4.0:1 (references/gotchas.md: keep primary
DARK). accent_color is Warm Apricot #E8A87C.
------------------------------------------------------------------------
CONTRAST AUDIT (canvas is the export's Cloud #fcf9f5):
- primary #645375 as TEXT on canvas / white: 6.51 / 6.91 PASS (>=4.5)
- white text on primary FILL #645375 (CTA, band, footer): 6.91:1 PASS
=> primary is safe as text AND as a white-text fill; no -ink sibling.
- accent Warm Apricot #e8a87c is a LIGHT colour (~2.0:1 as text) and is used
ONLY as a FILL / decorative wash (hero pill wash, category hover ring,
SALE chip fill with a DARK-brown label, focus outline on the plum bands).
Text roles that the export tints apricot are re-routed to the design's
darker "secondary" caramel #85532e (--dd-label), which is text-safe:
caramel #85532e as TEXT on canvas / band / white: 6.06 / 5.90 / 6.43
white on the cart-count caramel fill (the export's bg-secondary bubble): 6.43
dark-brown #5a3410 on the apricot SALE chip: 5.35:1 PASS
- re-pointed neutrals, worst case across canvas/white/band/band-alt:
--dd-ink #1c1c1a: >=15:1 PASS
--dd-muted #4a454d: >=8.6:1 PASS
--dd-soft #6a6570: 5.34 canvas PASS (tuned darker than the export's
raw "outline" #7b757d = 4.21:1, under 4.5)
--dd-gold #8a6d1f: 4.67 canvas PASS (base #c0a04a stars ~2.4:1)
- plum wind-down band + footer (bg = primary #645375):
white heading / brand: 6.91:1 PASS
step text / links rgba(255,255,255,.82): ~5.6:1 PASS
pale-apricot icons/headings #ffdcc6: 5.37:1 PASS (>=3:1 UI/large)
focus-visible re-inked to #ffdcc6 (base outlines with the apricot
accent = 2.0:1 on plum, under the 3:1 WCAG 1.4.11 floor)
- --bs-link-color-rgb is aliased to --bs-primary-rgb so bare tags track
the customizer instead of Bootstrap-blue. There is deliberately NO bare
`body.dd-theme a { color: … }` rule — it would out-specify
.mr-btn--primary's white label and paint the hero CTA as a label-less plum
block (references/gotchas.md). .mr-btn--primary's white label is re-asserted
below anyway, and --bs-btn-color is set on .btn-primary.
========================================================================== */
body.dd-theme {
/* Customizer-driven brand tokens (fallbacks match theme.json defaults) */
--dd-primary: var(--bs-primary, #645375);
--dd-primary-rgb: var(--bs-primary-rgb, 100, 83, 117);
--dd-accent: var(--ll-accent, #e8a87c);
--dd-accent-rgb: var(--bs-warning-rgb, 232, 168, 124);
--dd-font-head: var(--ll-font-headings, "Lora"), Georgia, "Times New Roman", serif;
--dd-font-body: var(--ll-font-body, "Source Sans 3"), system-ui, -apple-system, sans-serif;
/* Cloud / twilight palette (DESIGN.md M3 roles, rendered values) */
--dd-canvas: #fcf9f5; /* surface / background: the Cloud canvas */
--dd-surface: #ffffff; /* surface-container-lowest: cards, panels */
--dd-band: #f6f3ef; /* surface-container-low: trust strip, cats band */
--dd-band-alt: #f0ede9; /* surface-container: quiet wells */
--dd-fill: #eae8e4; /* surface-container-high: newsletter input */
--dd-variant: #e5e2de; /* surface-variant / -highest: placeholders */
--dd-border: #ccc4cd; /* outline-variant: hairlines */
--dd-border-strong: #7b757d; /* outline: emphasised lines */
--dd-ink: #1c1c1a; /* on-surface */
--dd-muted: #4a454d; /* on-surface-variant */
--dd-soft: #6a6570; /* tuned darker than the raw outline — see audit */
--dd-gold: #8a6d1f; /* star ratings — contrast-tuned */
--dd-label: #85532e; /* the export's "secondary": text-safe apricot */
--dd-plum-soft: #7d6b8f; /* primary-container: CTA hover / decorative glow */
--dd-peach: #e8a87c; /* literal apricot for FILL roles */
--dd-peach-pale: #ffdcc6; /* secondary-fixed: footer headings, plum focus */
--dd-chip-ink: #5a3410; /* dark-brown label on the apricot SALE chip */
/* Radius system — DESIGN.md "Shapes": buttons are pills (the button_radius
token = 2rem drives --bs-border-radius, so .mr-btn is already a pill),
product cards / media / panels take 16px, inputs take 8px. --mr-radius is
re-pointed to the CARD radius so every inherited card/media/panel surface
(shop/PDP/cart/checkout/account/blog) softens consistently WITHOUT
inheriting the 2rem pill. */
--dd-radius-card: 1rem;
--dd-radius-input: 0.5rem;
/* Re-point the inherited base neutrals at the Cloud/twilight palette. */
--mr-ink: var(--dd-ink);
--mr-muted: var(--dd-muted);
--mr-soft: var(--dd-soft);
--mr-surface: var(--dd-surface);
--mr-band: var(--dd-band);
--mr-band-alt: var(--dd-band-alt);
--mr-fill: var(--dd-fill);
--mr-border: var(--dd-border);
--mr-border-strong: var(--dd-border-strong);
--mr-radius: var(--dd-radius-card);
--mr-gold: var(--dd-gold);
--mr-shadow: 0 4px 30px rgba(var(--dd-primary-rgb), 0.06);
/* Bootstrap paints bare via rgba(var(--bs-link-color-rgb),1) — alias it
to --bs-primary-rgb so anchors track the customizer without a
CTA-clobbering bare-`a` rule. */
--bs-link-color-rgb: var(--bs-primary-rgb);
background-color: var(--dd-canvas);
color: var(--dd-ink);
font-family: var(--dd-font-body);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* --------------------------------------------------------------------------
Shape — cards/media/panels/imagery at 16px; inputs at 8px. No flatten block
(this is a soft, rounded design), so the round overlay controls keep their
pill naturally.
-------------------------------------------------------------------------- */
body.dd-theme .mr-card__media,
body.dd-theme .mr-promo,
body.dd-theme .mr-promo__img,
body.dd-theme .mr-tile,
body.dd-theme .mr-article__media,
body.dd-theme .mr-article__media img,
body.dd-theme .mr-panel,
body.dd-theme .mr-summary,
body.dd-theme .mr-acct-nav,
body.dd-theme .mr-gallery__main,
body.dd-theme .dropdown-menu,
body.dd-theme .modal-content {
border-radius: var(--dd-radius-card);
}
/* Inputs/chips get the softer 8px corners (the 2rem token would over-round a
text field). NEVER a padding shorthand on .form-select — restore Bootstrap's
2.25rem caret gutter (references/gotchas.md). */
body.dd-theme .form-control,
body.dd-theme .form-select,
body.dd-theme .mr-search input,
body.dd-theme .mr-chip {
border-radius: var(--dd-radius-input);
}
body.dd-theme .form-control,
body.dd-theme .form-select {
background-color: var(--dd-surface);
border-color: rgba(var(--dd-primary-rgb), 0.18);
color: var(--dd-ink);
}
body.dd-theme .form-select {
padding-inline-end: 2.25rem;
}
body.dd-theme .form-control:focus,
body.dd-theme .form-select:focus {
background-color: var(--dd-surface);
border-color: var(--dd-peach);
box-shadow: 0 0 0 3px rgba(var(--dd-accent-rgb), 0.28);
}
body.dd-theme .form-control::placeholder { color: var(--dd-soft); }
/* --------------------------------------------------------------------------
Typography — Lora for every heading at 400 (no Lora 500 face ships, and the
design's headline roles are 400/500; -0.02em display tracking per DESIGN.md
"slight negative letter-spacing"); Source Sans 3 for body, UI and prices.
-------------------------------------------------------------------------- */
body.dd-theme h1, body.dd-theme h2, body.dd-theme h3,
body.dd-theme h4, body.dd-theme h5, body.dd-theme h6,
body.dd-theme .mr-display {
font-family: var(--dd-font-head);
color: var(--dd-primary);
font-weight: 400;
letter-spacing: -0.01em;
}
body.dd-theme .mr-display {
font-size: clamp(1.9rem, 3.4vw, 2.25rem);
line-height: 1.25;
letter-spacing: -0.02em;
}
body.dd-theme .mr-headline { font-weight: 400; }
/* Labels/eyebrows — Source Sans 3 semi-bold, uppercase, wide tracking
(DESIGN.md "Labels"), in the text-safe caramel apricot. */
body.dd-theme .mr-eyebrow,
body.dd-theme .dd-eyebrow {
font-family: var(--dd-font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--dd-label);
}
/* The hero's apricot chip eyebrow — caramel text on a soft apricot wash, pill
shape (DESIGN.md "Chips: Warm Apricot at 15% opacity"). */
body.dd-theme .dd-pill {
display: inline-block;
font-family: var(--dd-font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--dd-label);
background: rgba(var(--dd-accent-rgb), 0.18);
border-radius: 9999px;
padding: 0.4rem 0.9rem;
margin-bottom: 1.5rem;
}
/* --------------------------------------------------------------------------
Buttons + links — solid Twilight Mauve pill with white text, or a
mauve-outline pill; both Source Sans 3 semi-bold, sentence case (the export
never uppercases a button label, unlike the base).
-------------------------------------------------------------------------- */
body.dd-theme .mr-btn {
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
}
/* Belt-and-braces: keep the primary CTA's label white no matter what later
anchor colour rules a merchant's custom CSS introduces. */
body.dd-theme .mr-btn--primary,
body.dd-theme .mr-btn--primary:hover {
color: #fff;
}
/* The export's hover is bg-primary-container (#7d6b8f, a lighter mauve). */
body.dd-theme .mr-btn--primary:hover { background-color: var(--dd-plum-soft); filter: none; }
body.dd-theme .mr-btn--outline {
border-color: var(--dd-primary);
color: var(--dd-primary);
}
body.dd-theme .mr-btn--outline:hover {
background-color: rgba(var(--dd-primary-rgb), 0.07);
color: var(--dd-primary);
}
/* Bootstrap's own .btn-primary (e.g. the shared review-form submit button) —
theme-vars sets --bs-btn-bg but not --bs-btn-color. */
body.dd-theme .btn-primary {
--bs-btn-color: #fff;
}
/* See-all keyline link (featured "View All"): muted with a soft underline,
warming to plum on hover — the export's border-b muted link. */
body.dd-theme .dd-keyline-link {
display: inline-block;
font-family: var(--dd-font-body);
font-size: 0.9rem;
font-weight: 600;
color: var(--dd-muted);
text-decoration: none;
border-bottom: 1px solid var(--dd-border-strong);
padding-bottom: 0.2rem;
transition: color 0.2s ease, border-color 0.2s ease;
}
body.dd-theme .dd-keyline-link:hover {
color: var(--dd-primary);
border-color: var(--dd-primary);
}
body.dd-theme .mr-ulink:hover { color: var(--dd-label); border-color: var(--dd-label); }
body.dd-theme .mr-crumbs a:hover { color: var(--dd-label); }
/* --------------------------------------------------------------------------
Announcement + header — plum announcement band (reuses the primary token);
the sticky header sits on the Cloud canvas over a soft mauve/10 hairline
with a Lora wordmark. Nav hover reads plum (the export's own hover:text-primary).
-------------------------------------------------------------------------- */
body.dd-theme .mr-announce {
background-color: var(--dd-primary);
color: #fff;
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.18em;
}
body.dd-theme .mr-header {
background-color: rgba(252, 249, 245, 0.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(var(--dd-primary-rgb), 0.1);
}
body.dd-theme .mr-logo {
font-family: var(--dd-font-head);
font-weight: 400;
color: var(--dd-primary);
}
body.dd-theme .mr-nav-link { color: var(--dd-muted); }
body.dd-theme .mr-nav-link:hover { color: var(--dd-primary); }
body.dd-theme .mr-nav-link.is-active {
color: var(--dd-primary);
border-bottom-color: var(--dd-primary);
font-weight: 600;
}
body.dd-theme .mr-icon-btn { color: var(--dd-primary); }
body.dd-theme .mr-icon-btn:hover { color: var(--dd-label); }
/* Cart count pill — the export's caramel (bg-secondary) bubble, white label. */
body.dd-theme .mr-badge { background-color: var(--dd-label); color: #fff; }
body.dd-theme .mr-search input {
background: var(--dd-band);
border-color: rgba(var(--dd-primary-rgb), 0.12);
}
body.dd-theme .mr-search input:focus {
background: var(--dd-surface);
border-color: var(--dd-peach);
box-shadow: 0 0 0 3px rgba(var(--dd-accent-rgb), 0.28);
}
/* --------------------------------------------------------------------------
Hero (dd-hero) — the Stitch SPLIT hero: a rounded 4:5 model photo on the left
and the copy panel on the right, both on the page's own Cloud canvas (no
scrim — the copy never sits on top of the photo).
-------------------------------------------------------------------------- */
body.dd-theme .dd-hero {
background-color: var(--dd-canvas);
padding-block: clamp(2.5rem, 6vw, 5rem);
}
body.dd-theme .dd-hero__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 3rem);
align-items: center;
}
body.dd-theme .dd-hero__figure {
position: relative;
aspect-ratio: 4 / 5;
overflow: hidden;
border-radius: var(--dd-radius-card);
background: var(--dd-band);
box-shadow: var(--mr-shadow);
}
body.dd-theme .dd-hero__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.7s ease;
}
body.dd-theme .dd-hero__figure:hover .dd-hero__img { transform: scale(1.05); }
body.dd-theme .dd-hero__copy {
display: flex;
align-items: center;
padding-inline-start: clamp(0px, 3vw, 3rem);
}
body.dd-theme .dd-hero__copy-inner { max-width: 30rem; }
body.dd-theme .dd-hero__title {
font-size: clamp(2.25rem, 4.6vw, 3rem);
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 1.25rem;
}
body.dd-theme .dd-hero__lead {
color: var(--dd-muted);
max-width: 42ch;
margin-bottom: 1.75rem;
font-size: 1.125rem;
line-height: 1.6;
}
body.dd-theme .dd-hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; }
body.dd-theme .dd-btn-hero { padding: 0.9rem 2rem; }
/* --------------------------------------------------------------------------
Trust strip (inherited .mr-trust) — the export stacks a plum icon ABOVE a
sentence-case charcoal label, centred, on the quiet Cloud band.
-------------------------------------------------------------------------- */
body.dd-theme .mr-band--alt { background-color: var(--dd-band); }
body.dd-theme .mr-trust {
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.6rem;
}
body.dd-theme .mr-trust svg { color: var(--dd-primary); width: 26px; height: 26px; }
body.dd-theme .mr-trust strong {
color: var(--dd-ink);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
body.dd-theme .mr-trust span { color: var(--dd-muted); font-size: 0.85rem; }
/* --------------------------------------------------------------------------
Product cards (inherited .mr-card) — DESIGN.md "Product Cards: image-centric,
left-aligned text under, NO borders, 16px radius on the IMAGE". So the card
is borderless (base flush title/price stays correct — no text insetting) and
only the media well is rounded/tinted. Title is Source Sans 3 (the export's
font-body-md), price is the plum price-display.
-------------------------------------------------------------------------- */
body.dd-theme .mr-card { background: transparent; }
body.dd-theme .mr-card__media { background-color: var(--dd-band); }
body.dd-theme .mr-card__eyebrow { color: var(--dd-label); }
body.dd-theme .mr-card__title,
body.dd-theme .mr-card__title a {
font-family: var(--dd-font-body);
font-size: 1rem;
font-weight: 500;
color: var(--dd-ink);
}
body.dd-theme .mr-card__title a:hover { color: var(--dd-primary); }
body.dd-theme .mr-card__price {
color: var(--dd-primary);
font-weight: 600;
letter-spacing: 0.01em;
}
body.dd-theme .mr-card__price del { color: var(--dd-soft); font-weight: 400; }
/* .mr-card__wish (heart) + .mr-card__quickview (eye) restyled TOGETHER per the
recurring product-card gotcha. The base already inks both safely from
--mr-surface / --mr-ink (both re-pointed above: charcoal ink on white =
>=15:1 normal AND hover), so only the pill shape is re-asserted defensively
and the is-active heart takes the apricot fill. */
body.dd-theme .mr-card__wish,
body.dd-theme .mr-card__quickview {
border-radius: 9999px;
}
body.dd-theme .mr-card__wish.is-active { color: var(--dd-peach); }
/* The slide-up Add-to-Cart bar (.mr-card__quick — a THIRD control, not an
overlay icon): plum fill, white label, sentence case. */
body.dd-theme .mr-card__quick {
background-color: var(--dd-primary);
color: #fff;
font-size: 0.78rem;
letter-spacing: 0.04em;
text-transform: none;
}
/* SALE chip (.mr-card__badge — the base styles .mr-card__sale but the markup
uses .mr-card__badge, so position + colour it here): apricot pill with the
dark-brown on-secondary-container label (5.35:1). The demo badge keeps its
own inline grey. */
body.dd-theme .mr-card__badge {
position: absolute;
top: 0.9rem;
left: 0.9rem;
z-index: 3;
background: var(--dd-peach);
color: var(--dd-chip-ink);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.3rem 0.7rem;
border-radius: 9999px;
}
/* --------------------------------------------------------------------------
Promo tiles (inherited .mr-promo) — the export's tall tiles with a bottom
black/40 gradient, a white Lora title and a white/90 underlined caption.
The base's accent-recolour hover is replaced with the export's own behaviour
(stay white, deepen the scrim) — apricot on that wash would be ~1.4:1. The
base's `.mr-promo:hover .mr-promo__cta` is (0,0,3,0), so the hover override
must also be a descendant selector or it loses on specificity.
-------------------------------------------------------------------------- */
body.dd-theme .mr-promo { background-color: var(--dd-band-alt); }
body.dd-theme .mr-promo__scrim {
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.5) 100%);
}
body.dd-theme .mr-promo:hover .mr-promo__scrim {
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.6) 100%);
}
body.dd-theme .mr-promo__title { font-family: var(--dd-font-head); font-weight: 400; }
body.dd-theme .mr-promo__cta {
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: none;
color: rgba(255, 255, 255, 0.9);
}
body.dd-theme .mr-promo:hover .mr-promo__cta {
color: #fff;
border-color: #fff;
}
/* --------------------------------------------------------------------------
Wind-down ritual band (dd-ritual) — the export's full-width Twilight-Mauve
surface with a decorative apricot glow: a Lora heading over up to 3 columns,
each a ringed apricot icon medallion above a white title and a muted-white
line.
-------------------------------------------------------------------------- */
body.dd-theme .dd-ritual {
position: relative;
overflow: hidden;
background-color: var(--dd-primary);
padding-block: clamp(3.5rem, 8vw, 6rem);
margin-block: clamp(2.5rem, 5vw, 4rem);
}
/* The export's ultra-diffused ambient glow (DESIGN.md "Ambient Glows"). */
body.dd-theme .dd-ritual__glow {
position: absolute;
top: -12rem;
right: -12rem;
width: 24rem;
height: 24rem;
border-radius: 9999px;
background: rgba(var(--dd-accent-rgb), 0.16);
filter: blur(100px);
pointer-events: none;
}
body.dd-theme .dd-ritual__heading {
position: relative;
z-index: 1;
font-family: var(--dd-font-head);
font-weight: 400;
font-size: clamp(1.9rem, 3.4vw, 2.75rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: #fff;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
body.dd-theme .dd-ritual__grid {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: clamp(2rem, 4vw, 4rem);
}
body.dd-theme .dd-ritual__step { padding-inline: clamp(0.5rem, 2vw, 1.5rem); }
body.dd-theme .dd-ritual__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 1.25rem;
border: 1px solid rgba(255, 220, 198, 0.35);
border-radius: 9999px;
color: var(--dd-peach-pale);
transition: background-color 0.3s ease;
}
body.dd-theme .dd-ritual__step:hover .dd-ritual__icon { background-color: rgba(255, 220, 198, 0.1); }
body.dd-theme .dd-ritual__icon svg { width: 30px; height: 30px; }
body.dd-theme .dd-ritual__step-title {
font-family: var(--dd-font-head);
font-weight: 400;
font-size: 1.4rem;
color: #fff;
margin-bottom: 0.85rem;
}
body.dd-theme .dd-ritual__step-text {
color: rgba(255, 255, 255, 0.82);
font-size: 0.98rem;
max-width: 26ch;
margin-inline: auto;
}
/* Re-ink the base's apricot focus outline where it lands on the plum band. */
body.dd-theme .dd-ritual *:focus-visible { outline-color: var(--dd-peach-pale); }
/* --------------------------------------------------------------------------
Category circles (dd-cat) — the export's "Shop by Category": a CIRCULAR photo
tile (framed by a transparent ring that warms to apricot on hover) with the
category name in an uppercase label BELOW it. Imagery is a representative
product photo per category (Category has no image field), so a category with
no products degrades to a tinted placeholder circle.
-------------------------------------------------------------------------- */
body.dd-theme .dd-cat {
display: block;
text-align: center;
text-decoration: none;
}
body.dd-theme .dd-cat__ring {
display: block;
position: relative;
aspect-ratio: 1;
padding: 4px;
margin-bottom: 1rem;
border: 2px solid transparent;
border-radius: 9999px;
transition: border-color 0.3s ease;
}
body.dd-theme .dd-cat:hover .dd-cat__ring { border-color: var(--dd-peach); }
/* inset: 0 resolves against the ring's PADDING box, so the ring's own 4px
padding is what separates the photo from the hover ring — no double gap. */
body.dd-theme .dd-cat__media,
body.dd-theme .dd-cat__placeholder {
display: block;
position: absolute;
inset: 0;
overflow: hidden;
border-radius: 9999px;
background: var(--dd-variant);
}
body.dd-theme .dd-cat__media img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 9999px;
transition: transform 0.7s ease;
}
body.dd-theme .dd-cat:hover .dd-cat__media img { transform: scale(1.07); }
body.dd-theme .dd-cat__placeholder {
background: linear-gradient(135deg, var(--dd-band-alt), var(--dd-fill));
}
body.dd-theme .dd-cat__cap {
display: block;
font-family: var(--dd-font-body);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--dd-muted);
transition: color 0.2s ease;
}
body.dd-theme .dd-cat:hover .dd-cat__cap { color: var(--dd-primary); }
/* --------------------------------------------------------------------------
Journal (inherited base partial) — apricot category eyebrows, Lora titles
whose hover reads plum.
-------------------------------------------------------------------------- */
body.dd-theme .mr-article__title {
font-family: var(--dd-font-head);
font-weight: 400;
font-size: 1.4rem;
}
body.dd-theme .mr-article__title a { color: var(--dd-primary); }
body.dd-theme .mr-article__title a:hover { color: var(--dd-label); }
/* --------------------------------------------------------------------------
Newsletter (dd-cta) — "Lights Low": a centred single-column block with a
large Lora display heading, one muted line and an inline email + Subscribe
row. Not the base's full-bleed dark 2-col band.
-------------------------------------------------------------------------- */
body.dd-theme .dd-cta__inner { max-width: 800px; }
body.dd-theme .dd-cta__title {
font-family: var(--dd-font-head);
font-weight: 400;
font-size: clamp(2.25rem, 4.6vw, 3rem);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--dd-primary);
}
body.dd-theme .dd-cta__body {
color: var(--dd-muted);
max-width: 52ch;
font-size: 1.125rem;
}
body.dd-theme .dd-cta__form {
display: flex;
gap: 1rem;
max-width: 34rem;
align-items: center;
}
body.dd-theme .dd-cta__form input {
flex: 1;
min-width: 0;
border: 1px solid rgba(var(--dd-primary-rgb), 0.12);
border-radius: 9999px;
background: var(--dd-fill);
padding: 0.9rem 1.5rem;
font-size: 0.95rem;
color: var(--dd-ink);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.dd-theme .dd-cta__form input::placeholder { color: var(--dd-soft); }
body.dd-theme .dd-cta__form input:focus {
outline: none;
border-color: var(--dd-peach);
box-shadow: 0 0 0 3px rgba(var(--dd-accent-rgb), 0.28);
}
body.dd-theme .dd-cta__btn { padding: 0.9rem 2.5rem; white-space: nowrap; }
body.dd-theme .dd-cta__note {
color: var(--dd-soft);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* --------------------------------------------------------------------------
Footer (inherited .mr-footer) — the plum block the brief fixes (and the
screenshot shows): white brand + links, pale-apricot column headings, soft
white/10 social circles.
-------------------------------------------------------------------------- */
body.dd-theme .mr-footer {
background-color: var(--dd-primary);
border-top: 0;
}
body.dd-theme .mr-footer h4 {
color: var(--dd-peach-pale);
font-family: var(--dd-font-body);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
body.dd-theme .mr-footer a { color: rgba(255, 255, 255, 0.82); }
body.dd-theme .mr-footer a:hover { color: #fff; }
/* The base outlines focus with the apricot accent — 2.0:1 on the plum footer,
under the 3:1 WCAG 1.4.11 floor. Re-ink with pale apricot (5.37:1). */
body.dd-theme .mr-footer *:focus-visible { outline-color: var(--dd-peach-pale); }
body.dd-theme .mr-footer__brand {
color: #fff;
font-family: var(--dd-font-head);
font-weight: 400;
}
body.dd-theme .mr-footer .mr-muted,
body.dd-theme .mr-footer .mr-soft { color: rgba(255, 255, 255, 0.82); }
body.dd-theme .mr-footer .form-control {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
color: #fff;
}
body.dd-theme .mr-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.6); }
body.dd-theme .mr-footer .mr-social {
background: rgba(255, 255, 255, 0.1);
border-color: transparent;
color: #fff;
}
body.dd-theme .mr-footer .mr-social:hover {
background: rgba(255, 255, 255, 0.2);
border-color: transparent;
color: #fff;
}
body.dd-theme .mr-footer .mr-divider { background-color: rgba(255, 255, 255, 0.15); opacity: 1; }
/* The footer newsletter "Join" button would otherwise blend into the plum
footer (its own fill IS the primary token) — invert it to a Cloud pill
(plum text on Cloud: 6.51:1). */
body.dd-theme .mr-footer .mr-btn--primary { background-color: var(--dd-canvas); color: var(--dd-primary); }
body.dd-theme .mr-footer .mr-btn--primary:hover { background-color: var(--dd-peach); color: var(--dd-chip-ink); filter: none; }
/* --------------------------------------------------------------------------
Global focus — the base outlines with the apricot accent (2.0:1 on the Cloud
canvas, under the 3:1 focus-indicator floor). Re-ink with plum (6.51:1) on
the light page; the plum bands re-ink to pale apricot above.
-------------------------------------------------------------------------- */
body.dd-theme a:focus-visible,
body.dd-theme button:focus-visible,
body.dd-theme input:focus-visible,
body.dd-theme select:focus-visible,
body.dd-theme textarea:focus-visible {
outline-color: var(--dd-primary);
}
/* --------------------------------------------------------------------------
Reduced motion — DESIGN.md asks for slow, fluid transitions; here we kill the
decorative transitions AND every hover transform (tile/image zooms, the hero
photo lift).
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body.dd-theme .mr-btn,
body.dd-theme .dd-keyline-link,
body.dd-theme .dd-cat__ring,
body.dd-theme .dd-cat__cap,
body.dd-theme .dd-hero__img,
body.dd-theme .dd-cat__media img,
body.dd-theme .mr-card__media,
body.dd-theme .mr-card__media img,
body.dd-theme .mr-promo__img,
body.dd-theme .mr-article__media img {
transition: none;
}
body.dd-theme .dd-hero__figure:hover .dd-hero__img,
body.dd-theme .dd-cat:hover .dd-cat__media img,
body.dd-theme .mr-card:hover .mr-card__media img,
body.dd-theme .mr-promo:hover .mr-promo__img,
body.dd-theme .mr-article__media:hover img {
transform: none;
}
}
/* --------------------------------------------------------------------------
Mobile — from the export's own responsive classes (grid-cols-1 →
md:grid-cols-2 on the hero, md:grid-cols-3 on the ritual band) and its
mobile frame: the split hero stacks photo-over-copy, the ritual steps become
a single centred column, and the narrowest phones take the design's 20px
side margins.
-------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
body.dd-theme .dd-hero__grid { grid-template-columns: 1fr; }
body.dd-theme .dd-hero__copy { padding-inline-start: 0; }
body.dd-theme .dd-hero__copy-inner { max-width: none; }
body.dd-theme .dd-hero__figure { aspect-ratio: 4 / 3; }
body.dd-theme .dd-ritual__grid { grid-template-columns: 1fr; gap: 2.5rem; }
body.dd-theme .dd-ritual__step { padding-inline: 0; }
}
@media (max-width: 575.98px) {
body.dd-theme .mr-shell { padding-inline: 20px; }
body.dd-theme .dd-cta__form { flex-direction: column; align-items: stretch; }
body.dd-theme .dd-cta__btn { width: 100%; }
}