/* ═══════════════════════════════════════════════════════════════
MAISON MARGUERITE — Refined Interior Textiles
═══════════════════════════════════════════════════════════════ */
/* ── Cormorant Garamond, self-hosted ─────────────────────────────
Was: @import from fonts.googleapis.com (Google CDN). Switched to
local hosting after the LG München I 2022 ruling on Google Fonts +
visitor IP exposure. The four files below are the latin + latin-ext
subsets of v21; weight axis is variable, so one woff2 per style
covers 300/400/500/600 — declared as a range in font-weight. */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300 600;
font-display: swap;
src: url("../fonts/cormorant-garamond/cormorant-garamond-normal-latin-1nPjtOG.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300 600;
font-display: swap;
src: url("../fonts/cormorant-garamond/cormorant-garamond-normal-latin-ext-yjdli-z.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300 400;
font-display: swap;
src: url("../fonts/cormorant-garamond/cormorant-garamond-italic-latin-Z98TJlT.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 300 400;
font-display: swap;
src: url("../fonts/cormorant-garamond/cormorant-garamond-italic-latin-ext-ey1rlQ5.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--mm-cream: #fbf9f7;
--mm-sage: #16213e;
--mm-charcoal: #2C2C2C;
--mm-gold: #B8975C;
--mm-linen: #f2f1ee;
--mm-white: #fbf9f7;
--mm-light-grey: #faf9f7;
--mm-border: #E8E4DD;
--mm-text: #4A4A4A;
/* Headings set straight across the shop, after Sophie: Cormorant
Garamond read too ornate ("schnörkelig"). Its files are still
declared above for the admin's previews; the shop no longer asks
for them. */
--mm-heading: var(--mm-title);
--mm-body: 'Georgia', 'Times New Roman', serif;
/* The straight title face of the trade page. */
--mm-title: 'Times New Roman', Times, Georgia, serif;
}
* { box-sizing: border-box; }
html, body {
overflow-x: clip;
}
body {
font-family: var(--mm-body);
color: var(--mm-text);
background-color: var(--mm-white);
line-height: 1.8;
font-size: 15px;
-webkit-font-smoothing: antialiased;
letter-spacing: 0.01em;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--mm-heading);
font-weight: 400;
letter-spacing: 0.01em;
color: var(--mm-charcoal);
line-height: 1.3;
}
h1 em, h2 em, h3 em, h4 em { font-style: normal; }
h1 { font-size: 1.9rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
h2 { font-size: 1.5rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
h3 { font-size: 1.6rem; }
a {
color: var(--mm-charcoal);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--mm-gold);
}
::selection {
background: var(--mm-linen);
color: var(--mm-charcoal);
}
/* ── Announcement Bar ── */
.mm-announcement {
background-color: #16213e;
color: #fff;
text-align: center;
padding: 0.5rem 1rem;
font-family: var(--mm-body);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
}
.mm-announcement__inner {
max-width: 1200px;
margin: 0 auto;
}
/* ── Navigation: Two-Tier ── */
.mm-nav {
background-color: var(--mm-white);
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
position: sticky;
top: 0;
/* Above page-level sticky elements (e.g. the MTM configurator steps
bar at z-index:50) so its dropdown panels can never be obscured. */
z-index: 1000;
}
/* Row 1, left side: a short curated list of links, inline with the brand —
not a tier of its own any more. See _navigation.html.twig; the wrapper
keeps the name "mm-nav-top" because the hover-dropdown script and the
dropdown-menu rules below still key off it.
flex-shrink: 0 — belt and braces: this column's only other occupant at
desktop width is the (hidden) mobile toggler, so there's normally
nothing to compete with for space, but a grid track's automatic minimum
is computed by seeing through .mm-nav-top__links' own flex-wrap: wrap to
its narrowest possible line — its widest single word, not its full
unwrapped width — so without an explicit floor here a grid recalculation
elsewhere could hand this column less room than the links actually need
and only find out via a wrap. */
.mm-nav-top {
align-items: center;
flex-shrink: 0;
}
.mm-nav-top__links {
display: flex;
align-items: center;
gap: 0.1rem;
list-style: none;
margin: 0;
padding: 0;
/* The release valve flex-shrink:0 above declines to be: if a future
label makes the list wider than expected, wrap to a second line
rather than spill sideways out of the container. */
flex-wrap: wrap;
}
/* Direct children only, for the same reason as the category row below:
a mega panel is a descendant of one of these s, and an unscoped
selector styles everything inside it. */
.mm-nav-top__links > li > a {
font-family: var(--mm-body);
font-size: 0.66rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-text);
padding: 0.3rem 0.7rem;
transition: color 0.3s;
text-decoration: none;
white-space: nowrap;
}
/* Hover marks the entry with an underline as well as the colour shift. The
offset clears the descenders on the mixed-case panel links; on the
uppercase nav rows it just reads as a little breathing room. The CTA is
excluded here and below — an underline through a filled button looks like
a rendering fault, not a state. */
.mm-nav-top__links > li > a:not(.mm-nav-highlight):hover {
color: var(--mm-gold);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.35em;
}
/* Highlighted nav entry — quietly promotes a single item to a CTA */
.mm-nav-top__links > li > a.mm-nav-highlight,
.mm-nav-top__links > li.dropdown > a.dropdown-toggle.mm-nav-highlight {
color: #fff;
background: var(--mm-highlight, #1D4ED8);
border-radius: 2px;
padding: 0.4rem 0.95rem;
font-weight: 500;
white-space: nowrap;
transition: background-color 0.25s ease, color 0.25s ease;
}
.mm-nav-top__links > li > a.mm-nav-highlight:hover {
color: #fff;
background: color-mix(in srgb, var(--mm-highlight, #1D4ED8) 88%, #000 12%);
}
/* Mobile drawer: highlighted top-level link */
.mm-nav-mobile__link.mm-nav-highlight,
.mm-nav-mobile__heading.mm-nav-highlight {
color: #fff !important;
background: var(--mm-highlight, #1D4ED8);
border-radius: 2px;
padding: 0.5rem 0.95rem;
font-weight: 500;
letter-spacing: 0.04em;
display: inline-block;
}
.mm-nav-top .dropdown-menu {
border: 1px solid var(--mm-border);
border-radius: 0;
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
padding: 0.5rem 0;
}
.mm-nav-top .dropdown-item {
font-size: 0.82rem;
padding: 0.4rem 1.2rem;
color: var(--mm-text);
letter-spacing: 0.02em;
}
.mm-nav-top .dropdown-item:hover {
background: var(--mm-cream);
color: var(--mm-gold);
}
/* Brand row: curated links (desktop) + brand + search/account icons, one line */
.mm-nav-main {
padding: 0.85rem 0;
border-bottom: 1px solid var(--mm-border);
}
/* Four earlier attempts, four different failure modes:
1. size-to-content (`flex: 0 1 auto` + `space-between`) can't overlap the
wordmark, but with fewer links than the row has room for, the leftover
space lands as two big gaps flanking the brand — detached rather than
centred.
2. `1fr auto 1fr` fixed that: it sizes to the ROW, not the content, so
the two side columns are always equal width and the brand is always
truly centred. (What made an earlier grid attempt dangerous was
pairing it with `min-width: 0`, which lets a column resolve narrower
than its own contents and nowrap text then paints outside it —
without that override a grid track's minimum is its content's
min-content width, the same floor `flex: 0 1 auto` had.)
3. Pulling each column's content in against the brand
(`justify-content: flex-end` / `flex-start`) closed those gaps — but
the search box also had `flex-grow: 1` (below), so it alone absorbed
the left column's slack while nothing on the right grows to match.
Result: the row's outer margins went wildly uneven — search hugging
the wordmark with almost no margin on the far left, everything left
over stacked past the icons on the far right.
So: each column hugs its OWN outer edge instead (default flex-start on
the left, flex-end on the right — the same pairing the pre-redesign
header used), and the search box no longer grows to fill spare column
width. Slack now lands as a gap between content and the brand on
whichever side is lighter, which reads as normal letter-spacing around a
centred logo rather than a lopsided row.
4. That still left the left column carrying both the link list AND the
search box — far heavier than the account icons on the right — so
keeping the two 1fr tracks equal-width (needed for a centred brand)
meant sizing BOTH to whatever the heavy left side required. Search has
since moved to the right column (see _navigation.html.twig), which is
what actually closed the gap between the two sides' natural widths;
this grid is what makes a centred brand possible once they're close,
not what closes the gap itself. The link list's own `flex-wrap: wrap`
(above) is still the release valve if a column's content can't fit
even at minimum. */
.mm-nav-main__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 1rem;
}
.mm-nav-main__left,
.mm-nav-main__right {
display: flex;
align-items: center;
gap: 1rem;
}
.mm-nav-main__right {
justify-content: flex-end;
}
.mm-nav-main__brand {
font-family: var(--mm-heading);
font-size: 1.8rem;
font-weight: 300;
letter-spacing: 0.15em;
color: var(--mm-charcoal);
text-decoration: none;
white-space: nowrap;
}
.mm-nav-main__brand:hover {
color: var(--mm-charcoal);
}
.mm-nav-main__brand-img {
display: block;
height: 32px;
width: auto;
max-width: 280px;
opacity: 0.9;
transition: opacity 0.2s;
}
.mm-nav-main__brand:hover .mm-nav-main__brand-img {
opacity: 1;
}
/* Row 2: every active category, flat, plus the trade CTA — replaces the old
"Shop ▾" dropdown so the categories are one click instead of two. Light
cream, not the announcement bar's navy, to read as part of the page rather
than a banner. */
.mm-nav-row2 {
background: var(--mm-linen);
}
.mm-nav-row2__links {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
gap: 0.1rem;
list-style: none;
margin: 0;
padding: 0.55rem 0;
}
/* Deliberately NOT position:relative: a category's panel is full-width and
takes its position from .mm-nav (the nearest positioned ancestor, via its
own position:sticky), the same way the top row's mega panel does. Making
these items a containing block would pin each panel under its own label
instead. See the note by .mm-nav-top .mm-mega__panel. */
.mm-nav-row2__item {
position: static;
}
/* The open category reads as selected while its panel is down — without it
the panel looks detached from the row, since the pointer has usually
already left the label by the time it's being read. */
.mm-nav-row2__item--open > .mm-nav-row2__link {
color: var(--mm-gold);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.35em;
}
/* The notch tying an open panel to the entry that opened it. A square
rotated 45° and straddling the panel's top edge, not a drawn triangle:
its own two borders continue the panel's outline, and its opaque face
covers the length of top border it stands on — so the panel reads as
having a corner pulled up toward the entry rather than a separate arrow
parked above it. --mm-caret-x is measured per open (see the script in
_navigation.html.twig); the 50% fallback keeps it centred if it's ever
rendered without one. Row 1's panels don't get it: this is scoped to a
category item, and Bootstrap positions those with Popper. */
.mm-nav-row2__item .mm-mega__panel::before {
content: '';
position: absolute;
top: -5.5px;
left: var(--mm-caret-x, 50%);
width: 11px;
height: 11px;
margin-left: -5.5px;
background: var(--mm-white);
/* Gold rather than --mm-border: the panel and the row it sits under are
four percent apart in every channel (#fbf9f7 on #f3efe8), so a notch
drawn in the panel's own outline colour is invisible at the one place
it has to be seen. Gold is already the open entry's colour, so the
underline above and the notch below read as one mark. */
border-left: 1px solid var(--mm-gold);
border-top: 1px solid var(--mm-gold);
transform: rotate(45deg);
}
/* Scoped to the row's own entries, not every anchor beneath them. The
panel lives inside one of these s, so an unscoped `.mm-nav-row2__links a`
also styled its columns and tiles — and it carries `white-space: nowrap`,
which is why a long product name under a tile ran straight through its
neighbour and out of the sheet. It was overriding the panel's own type
rules on specificity too, so the columns rendered in the row's small
uppercase rather than the size they were written at. */
.mm-nav-row2__links > li > a {
font-family: var(--mm-body);
font-size: 0.64rem;
letter-spacing: 0.11em;
text-transform: uppercase;
color: var(--mm-text);
padding: 0.3rem 0.65rem;
white-space: nowrap;
text-decoration: none;
transition: color 0.3s;
}
.mm-nav-row2__links > li > a:not(.mm-nav-highlight):hover {
color: var(--mm-gold);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.35em;
}
.mm-nav-row2__links > li > a.mm-nav-highlight {
color: #fff;
background: var(--mm-highlight, #1D4ED8);
border-radius: 2px;
padding: 0.35rem 0.85rem;
margin-left: 0.5rem;
font-weight: 500;
}
.mm-nav-row2__links > li > a.mm-nav-highlight:hover {
color: #fff;
background: color-mix(in srgb, var(--mm-highlight, #1D4ED8) 88%, #000 12%);
}
.mm-nav-main__icon {
color: var(--mm-charcoal);
position: relative;
display: flex;
align-items: center;
}
.mm-nav-main__icon--text {
font-family: var(--mm-body);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mm-nav-main__icon:hover {
color: var(--mm-gold);
}
/* ── Locale switcher pill (multi-locale tenants only) ───────────────── */
.mm-locale-switcher {
display: inline-flex;
align-items: center;
gap: 0;
border: 1px solid var(--mm-border, #e2e2dc);
border-radius: 999px;
padding: 2px;
margin-right: 0.5rem;
}
.mm-locale-switcher__link {
font-family: var(--mm-body);
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mm-charcoal);
text-decoration: none;
padding: 4px 9px;
border-radius: 999px;
line-height: 1;
transition: background-color 120ms ease, color 120ms ease;
}
.mm-locale-switcher__link:hover {
color: var(--mm-gold);
}
.mm-locale-switcher__link--active {
background: var(--mm-charcoal);
color: var(--mm-white);
}
.mm-locale-switcher__link--active:hover {
color: var(--mm-white);
}
/* ── Footer selectors ──────────────────────────────────────────────
Language and currency, in the footer where people look for them. Sized
and spaced to sit under the brand blurb without competing with it. */
.mm-footer-selectors {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
margin-top: 2rem;
}
.mm-footer-selectors__group {
display: flex;
flex-direction: column;
gap: 0.45rem;
min-width: 9rem;
}
.mm-footer-selectors__label {
font-family: var(--mm-body);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.65;
}
.mm-footer-selectors__toggle {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
background: none;
border: 0;
border-bottom: 1px solid currentColor;
border-radius: 0;
padding: 0.3rem 0 0.4rem;
font-family: var(--mm-body);
font-size: 0.92rem;
color: inherit;
line-height: 1.3;
text-align: left;
cursor: pointer;
transition: opacity 120ms ease;
}
.mm-footer-selectors__toggle:hover { opacity: 0.7; }
.mm-footer-selectors__caret { font-size: 0.7rem; opacity: 0.7; }
.mm-footer-selectors .dropdown-menu {
font-size: 0.85rem;
min-width: 15rem;
}
/* The current entry, in the house charcoal rather than Bootstrap's blue —
the one colour that appears nowhere else on this site. */
.mm-footer-selectors .dropdown-item.active,
.mm-footer-selectors .dropdown-item:active {
background: var(--mm-charcoal);
color: var(--mm-white);
}
.mm-footer-selectors__company {
display: block;
font-size: 0.75rem;
opacity: 0.6;
}
.mm-footer-selectors .dropdown-item.active .mm-footer-selectors__company { opacity: 0.75; }
.mm-nav-main__badge {
position: absolute;
top: -6px;
right: -8px;
background: var(--mm-charcoal);
color: var(--mm-white);
font-size: 0.55rem;
font-family: sans-serif;
font-weight: 600;
width: 16px;
height: 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
/* Mobile nav */
.mm-nav-mobile {
background: var(--mm-cream);
border-bottom: 1px solid var(--mm-border);
padding: 1.5rem 1.25rem 1rem;
max-height: calc(100dvh - var(--mm-nav-main-height, 64px));
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* Highlighted top-level links rendered as full-width CTAs at the top of
the mobile drawer. The DB-driven label keeps its custom highlight colour
via --mm-highlight (set inline). Stacks vertically if there are several. */
.mm-nav-mobile__ctas {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0 0 1.25rem;
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--mm-border);
}
.mm-nav-mobile__cta {
display: block;
background: var(--mm-highlight, var(--mm-gold));
color: #fff;
text-align: center;
text-decoration: none;
padding: 0.85rem 1rem;
border-radius: 4px;
font-family: var(--mm-heading);
font-size: 0.85rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
transition: filter 0.15s, transform 0.1s;
}
.mm-nav-mobile__cta:hover,
.mm-nav-mobile__cta:focus {
filter: brightness(1.08);
color: #fff;
text-decoration: none;
}
.mm-nav-mobile__cta:active { transform: translateY(1px); }
.mm-nav-mobile__section {
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid var(--mm-border);
}
.mm-nav-mobile__section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0.5rem;
}
.mm-nav-mobile__heading {
display: block;
font-family: var(--mm-heading);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--mm-gold);
margin-bottom: 0.6rem;
}
.mm-nav-mobile__link {
display: block;
font-family: var(--mm-body);
font-size: 0.88rem;
color: var(--mm-text);
text-decoration: none;
padding: 0.45rem 0 0.45rem 0.5rem;
transition: color 0.2s, padding-left 0.2s;
}
.mm-nav-mobile__link:hover {
color: var(--mm-gold);
padding-left: 0.8rem;
}
.mm-nav-mobile__link--all {
font-size: 0.78rem;
font-style: italic;
color: var(--mm-gold);
margin-top: 0.2rem;
}
/* A curated category panel's links, carried into the drawer under their
category. Indented and set smaller so a category with a panel still
scans as one entry in the list rather than a dozen. */
.mm-nav-mobile__link--sub {
padding-left: 1.5rem;
font-size: 0.8rem;
opacity: 0.85;
}
.mm-nav-mobile__link--sub:hover {
padding-left: 1.8rem;
}
.mm-nav-mobile__section--plain .mm-nav-mobile__link {
padding-left: 0;
font-size: 0.92rem;
font-family: var(--mm-heading);
letter-spacing: 0.03em;
}
.mm-nav-mobile__section--plain .mm-nav-mobile__link:hover {
padding-left: 0.3rem;
}
.navbar-toggler {
border: none;
padding: 0;
color: var(--mm-charcoal);
}
.navbar-toggler:focus {
box-shadow: none;
}
/* ── Hero (full-bleed image) ── */
.mm-hero {
position: relative;
width: 100%;
height: 80vh;
min-height: 500px;
max-height: 800px;
overflow: hidden;
}
/* Text-only hero for service pages (no background image) */
.mm-hero--text {
height: auto;
min-height: 0;
max-height: none;
padding: 5rem 0 3rem;
display: flex;
align-items: center;
justify-content: center;
}
.mm-hero__bg {
position: absolute;
inset: 0;
background-color: #d5cfc6;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.mm-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(44,44,44,0.45) 0%, rgba(44,44,44,0.1) 50%, transparent 100%);
display: flex;
align-items: flex-end;
padding-bottom: 5rem;
}
.mm-hero__title {
font-family: var(--mm-heading);
/* Fluid clamp: scales between 2rem (small viewports) and 2.6rem
(wide desktop) so multi-line hero copy doesn't break into ragged
single-word lines like the Lucy Cushion banner did at the
previous fixed 3.2rem. Headlines still read prominently without
feeling shouted. */
font-size: clamp(1.36rem, 2.18vw, 1.77rem);
font-weight: 400;
color: #fff;
line-height: 1.25;
max-width: 720px;
margin-bottom: 0.5rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mm-hero__title em {
font-style: normal;
}
.mm-hero__subtitle {
font-family: var(--mm-body);
font-size: 0.95rem;
color: rgba(255,255,255,0.75);
max-width: 500px;
line-height: 1.6;
margin-bottom: 0;
}
/* ── Arrow CTA (reusable) ── */
.mm-arrow-cta {
display: inline-flex;
align-items: center;
gap: 0.8rem;
font-family: var(--mm-body);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
text-decoration: none;
margin-top: 1.5rem;
transition: gap 0.3s;
}
.mm-arrow-cta__line {
display: inline-block;
width: 40px;
height: 1px;
background: currentColor;
position: relative;
transition: width 0.3s;
}
.mm-arrow-cta__line::after {
content: '';
position: absolute;
right: -1px;
top: -3px;
border: solid currentColor;
border-width: 0 1px 1px 0;
padding: 3px;
transform: rotate(-45deg);
}
.mm-arrow-cta:hover {
color: #fff;
gap: 1.2rem;
}
.mm-arrow-cta:hover .mm-arrow-cta__line {
width: 56px;
}
.mm-arrow-cta--dark {
color: var(--mm-charcoal);
}
.mm-arrow-cta--dark:hover {
color: var(--mm-gold);
}
@media (max-width: 768px) {
.mm-hero { height: 60vh; min-height: 400px; }
.mm-hero__title { font-size: 1.36rem; }
.mm-hero__overlay { padding-bottom: 3rem; }
}
/* ── Product Cards ── */
.mm-product-card {
border: none;
border-radius: 0;
transition: transform 0.4s ease;
overflow: hidden;
background: transparent;
}
.mm-product-card:hover {
transform: translateY(-3px);
}
.mm-product-card__image-wrap {
position: relative;
overflow: hidden;
}
.mm-product-card .card-img-top {
aspect-ratio: 4 / 5;
object-fit: cover;
background-color: var(--mm-light-grey);
transition: opacity 0.4s ease;
}
/* Cushions are roughly square (or rectangular lumbars), so a 4:5 portrait
crop wastes space and forces inconsistent framing. 1:1 + auto-trim of
the source whitespace (in ThumbnailService) makes the grid read as a
coherent set even though the originals were shot at different distances. */
.mm-product-card--cushion .card-img-top {
aspect-ratio: 1 / 1;
background-color: #fff;
}
/* Trimmings (cord tiebacks, tassels, fringe …) are small objects shot
on white. The thumbnail goes through auto-trim mode (4:5 frame,
crop to product bbox + 11% pad) — the transparent surround needs a
white card background so it blends in. Aspect stays 4:5 so trimming
tiles line up with fabric and paint tiles on the shop grid. */
.mm-product-card--trimming .card-img-top {
background-color: #fff;
}
.mm-product-card:hover .card-img-top {
opacity: 0.92;
}
/* Gallery hover-swap: the secondary image lays on top of the main
one, hidden by default. Card hover fades it in over the primary.
Both images share the same aspect-ratio rule above so there's no
layout shift during the swap. */
.mm-product-card__image--hover {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.mm-product-card:hover .mm-product-card__image--hover {
opacity: 1;
}
.mm-product-card__badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
font-family: var(--mm-body);
font-size: 0.58rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mm-charcoal);
border: 1px solid var(--mm-charcoal);
padding: 0.2rem 0.55rem;
background: rgba(255,255,255,0.9);
line-height: 1;
}
.mm-product-card .card-body {
padding: 0.85rem 0.1rem;
background: transparent;
text-align: left;
/* Bootstrap's .card is flex-column; pushing card-body to the bottom
guarantees price+title baselines align when sibling cards have
different image heights (mixed cushion/fabric/paint in one row). */
margin-top: auto;
}
/* min-heights reserve room for a 2-line title and the price line, so a
missing translation, a short name, or a price-less product can't pull
neighbouring cards' baselines out of alignment. */
.mm-product-card .card-title {
min-height: 2.5em;
}
.mm-product-card .card-text {
min-height: 1.4em;
}
.mm-product-card .card-title {
font-family: var(--mm-heading);
font-size: 0.95rem;
font-weight: 400;
letter-spacing: 0.01em;
margin-bottom: 0.15rem;
}
.mm-product-card__from {
font-size: 0.72rem;
color: var(--mm-sage);
letter-spacing: 0.03em;
}
.mm-product-card .card-title a {
color: var(--mm-charcoal);
}
.mm-product-card .card-title a:hover {
color: var(--mm-gold);
}
.mm-product-card .card-text {
font-size: 0.85rem;
color: var(--mm-text);
font-weight: 400;
letter-spacing: 0.03em;
}
/* ──────────────────────────────────────────────────────────────
Paint-card variant — applied when category.slug == 'paint'.
Goal: turn a flat coloured JPEG into something that reads as
a paint chip. We do this with two stacked overlays and one
floating label, all CSS-only (no second image needed).
::before — paper-grain texture (SVG fractal noise inline)
mix-blend-mode multiply so grain darkens the
colour slightly without tinting it.
::after — thin inset frame, ~12px from edge, 1px white
line. Mimics the mat around a real paint card.
.mm-paint-swatch__label — frosted-white pill bottom-left.
Backdrop-filter degrades gracefully on Safari
<16: falls back to solid 92% white, still legible
on every chalk-paint colour we ship.
────────────────────────────────────────────────────────── */
.mm-product-card--paint .mm-product-card__image-wrap {
/* contains absolutely-positioned ::before / ::after / label */
position: relative;
}
.mm-product-card--paint .mm-product-card__image-wrap::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
background-image: url("data:image/svg+xml;utf8, capture clicks */
}
.mm-paint-swatch__brand {
font-family: var(--mm-body);
font-size: 0.55rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-sage);
}
.mm-paint-swatch__color {
font-family: var(--mm-heading);
font-size: 0.92rem;
color: var(--mm-charcoal);
letter-spacing: 0.01em;
}
/* Title below the swatch stays visible for grid consistency
with fabric / cushion products — the chip is a visual accent,
not a replacement for the meta line. */
/* ── Horizontal Scroll Section (Amber-style product row) ── */
.mm-hscroll-section {
position: relative;
}
.mm-hscroll-section__head {
margin-bottom: 2rem;
}
.mm-hscroll-section__title {
font-family: var(--mm-heading);
font-size: 1.29rem;
font-weight: 400;
letter-spacing: 0.1em;
color: var(--mm-charcoal);
margin: 0;
text-transform: uppercase;
}
.mm-hscroll {
position: relative;
}
.mm-hscroll__track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
padding: 0 clamp(1rem, 5vw, 3rem) 0.5rem;
scroll-padding-left: clamp(1rem, 5vw, 3rem);
}
.mm-hscroll__track::-webkit-scrollbar {
display: none;
}
.mm-hscroll__item {
flex: 0 0 calc((100% - clamp(1rem, 5vw, 3rem) * 2 - 1.5rem * 3) / 4);
scroll-snap-align: start;
min-width: 0;
}
.mm-hscroll__nav {
position: absolute;
top: 40%;
transform: translateY(-50%);
z-index: 5;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--mm-border);
background: var(--mm-white);
color: var(--mm-charcoal);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s;
}
.mm-hscroll__nav:hover {
background: var(--mm-cream);
transform: translateY(-50%) scale(1.05);
}
.mm-hscroll__nav[hidden] {
display: none;
}
.mm-hscroll__nav--prev {
left: clamp(0.5rem, 2vw, 1.5rem);
}
.mm-hscroll__nav--next {
right: clamp(0.5rem, 2vw, 1.5rem);
}
@media (max-width: 992px) {
.mm-hscroll-section__title {
font-size: 1.2rem;
}
.mm-hscroll__item {
flex: 0 0 calc((100% - clamp(1rem, 5vw, 3rem) * 2 - 1.5rem * 2) / 3);
}
.mm-hscroll__nav {
display: none;
}
}
@media (max-width: 640px) {
.mm-hscroll__item {
flex: 0 0 calc((100% - clamp(1rem, 5vw, 3rem) * 2 - 1rem) / 2);
}
.mm-hscroll__track {
gap: 1rem;
}
}
/* ── Product Placeholder ── */
.mm-product-placeholder {
aspect-ratio: 4 / 5;
background-color: var(--mm-light-grey);
display: flex;
align-items: center;
justify-content: center;
color: var(--mm-border);
font-family: var(--mm-heading);
font-size: 3rem;
font-weight: 300;
}
/* ── Buttons ── */
.btn-mm {
background-color: var(--mm-charcoal);
color: var(--mm-white);
border: 1px solid var(--mm-charcoal);
border-radius: 0;
padding: 0.75rem 2.5rem;
font-family: var(--mm-body);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: all 0.3s ease;
}
.btn-mm:hover {
background-color: var(--mm-gold);
border-color: var(--mm-gold);
color: var(--mm-white);
}
.btn-mm-outline {
background-color: transparent;
color: var(--mm-charcoal);
border: 1px solid var(--mm-charcoal);
border-radius: 0;
padding: 0.75rem 2.5rem;
font-family: var(--mm-body);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
transition: all 0.3s ease;
}
.btn-mm-outline:hover {
background-color: var(--mm-charcoal);
color: var(--mm-white);
}
/* ── Shop Title ── */
.mm-shop-title {
text-align: center;
font-family: var(--mm-heading);
font-size: 1.9rem;
font-weight: 400;
margin-bottom: 2rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ── Colour chips (fabrics filter row) ── */
/* ── The colour palette above the shop grid (shop/index.html.twig,
color_chips_controller.js). Chips carry their colour as --c; chosen
colours wash the strip behind them (--wash), a hovered one tints it
(--peek), and each chip fans out a few of its pieces on hover. ── */
.mm-palette {
--peek: transparent;
position: relative;
margin: 0 0 1.75rem;
padding: 1rem 1.1rem 1.05rem;
border: 1px solid var(--mm-border, #e8e4db);
border-radius: 6px;
background: #faf9f7;
isolation: isolate;
overflow: visible;
}
.mm-palette::before,
.mm-palette::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: -1;
}
/* The chosen colours, laid behind the chips like a wash of dye. */
.mm-palette::before {
background: var(--wash);
opacity: 0;
transition: opacity 0.6s ease;
}
.mm-palette.has-selection::before { opacity: 0.16; }
/* The colour under the pointer, a breath of it. */
.mm-palette::after {
background: radial-gradient(120% 140% at var(--px, 50%) 120%, var(--peek), transparent 65%);
opacity: 0;
transition: opacity 0.45s ease, background 0.45s ease;
}
.mm-palette.is-peeking::after { opacity: 0.35; }
.mm-palette__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem 0.9rem;
margin: 0 0 0.75rem 0.15rem;
}
.mm-palette__title {
font-family: var(--mm-body);
font-size: 0.66rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: #9a7a45;
}
.mm-palette__hint { font-size: 0.78rem; color: #8f897f; }
.mm-palette__chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.mm-chip {
--c: #ccc;
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.38rem 0.45rem 0.38rem 0.42rem;
background: #fff;
border: 1px solid var(--mm-border, #e8e4db);
border-radius: 999px;
font-family: var(--mm-body);
font-size: 0.8rem;
letter-spacing: 0.04em;
line-height: 1;
color: var(--mm-charcoal);
text-decoration: none;
cursor: pointer;
transition: border-color 0.25s, background-color 0.3s, box-shadow 0.3s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}
.mm-chip:hover {
color: var(--mm-charcoal);
border-color: color-mix(in srgb, var(--c) 70%, #8f897f);
box-shadow: 0 8px 20px -12px color-mix(in srgb, var(--c) 80%, #000);
transform: translateY(-2px);
}
.mm-chip:active { transform: translateY(0) scale(0.97); }
.mm-chip:focus-visible { outline: 2px solid var(--mm-sage); outline-offset: 2px; }
.mm-chip__swatch {
position: relative;
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: 50%;
background:
radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 55%),
var(--c);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
color: #2c2a26;
flex-shrink: 0;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mm-chip:hover .mm-chip__swatch { transform: scale(1.12); }
.mm-chip__swatch svg { opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mm-chip__label { padding-right: 0.1rem; }
.mm-chip__count {
min-width: 1.6rem;
padding: 0.28rem 0.42rem;
border-radius: 999px;
background: #f3efe8;
color: #8f897f;
font-size: 0.68rem;
letter-spacing: 0.02em;
text-align: center;
font-variant-numeric: tabular-nums;
transition: background-color 0.3s, color 0.3s;
}
/* Chosen: the chip takes on its colour, with a tick in the swatch. */
.mm-chip.is-active {
background: color-mix(in srgb, var(--c) 26%, #fff);
border-color: color-mix(in srgb, var(--c) 75%, #2c2a26);
box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 75%, #2c2a26), 0 10px 24px -14px color-mix(in srgb, var(--c) 90%, #000);
}
.mm-chip.is-active .mm-chip__swatch svg { opacity: 1; transform: none; }
.mm-chip.is-active .mm-chip__count { background: rgba(255, 255, 255, 0.75); color: var(--mm-charcoal); }
/* "All colours": a little colour wheel; chosen it is plain charcoal. */
.mm-chip--all .mm-chip__swatch { background: var(--wheel); }
.mm-chip--all .mm-chip__swatch::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.mm-chip--all.is-active {
background: var(--mm-charcoal);
border-color: var(--mm-charcoal);
box-shadow: none;
color: #fff;
}
.mm-chip--all.is-active .mm-chip__count { background: rgba(255, 255, 255, 0.16); color: #fff; }
.mm-chip--all:hover .mm-chip__swatch { transform: scale(1.12) rotate(90deg); }
/* No colour assigned: hatched, so it reads as "unsorted", not grey. */
.mm-chip--other .mm-chip__swatch {
background: repeating-linear-gradient(45deg, #d6d2c8 0, #d6d2c8 3px, #f4f0e6 3px, #f4f0e6 6px);
}
.mm-chip--other { --c: #c9c3b8; }
/* Nothing in this colour here. */
.mm-chip.is-empty {
cursor: default;
opacity: 0.42;
background: transparent;
border-style: dashed;
}
.mm-chip.is-empty:hover { transform: none; box-shadow: none; border-color: var(--mm-border, #e8e4db); }
.mm-chip.is-empty .mm-chip__swatch { filter: grayscale(0.6); }
/* The fan of pieces in this colour, above the chip. */
.mm-chip__peek {
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
width: 0;
height: 72px;
pointer-events: none;
z-index: 30;
}
.mm-chip__peek img {
position: absolute;
bottom: 0;
left: -32px;
width: 64px;
height: 64px;
object-fit: cover;
border-radius: 4px;
border: 3px solid #fff;
background: #f3efe8;
box-shadow: 0 12px 24px -10px rgba(44, 42, 38, 0.45);
opacity: 0;
transform: translateY(14px) rotate(0deg) scale(0.6);
transform-origin: 50% 120%;
transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
transition-delay: calc(var(--n) * 40ms);
}
.mm-chip.is-peeking .mm-chip__peek img {
opacity: 1;
transform: translateX(calc((var(--n) - (var(--of) - 1) / 2) * 46px)) rotate(calc((var(--n) - (var(--of) - 1) / 2) * 11deg));
}
.mm-chip.is-peeking { z-index: 31; }
/* Pills under the strip for the chosen colours carry their dot too. */
.mm-filter-pill--colour i {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 0.45rem;
border-radius: 50%;
background: var(--c, #ccc);
box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.5);
vertical-align: -1px;
}
/* While the grid below is being fetched. */
.mm-shop-swapping .mm-palette { cursor: progress; }
.mm-shop-swapping .mm-chip.is-pending { animation: mm-chip-pulse 0.9s ease-in-out infinite; }
@keyframes mm-chip-pulse {
50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 30%, transparent); }
}
@media (max-width: 767.98px) {
.mm-palette { padding: 0.85rem 0 0.9rem; border-left: 0; border-right: 0; border-radius: 0; margin-left: -12px; margin-right: -12px; }
.mm-palette__head { margin-left: 12px; }
.mm-palette__hint { display: none; }
.mm-palette__chips {
flex-wrap: nowrap;
overflow-x: auto;
padding: 0 12px 2px;
scroll-snap-type: x proximity;
scroll-padding-inline: 12px;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
mask-image: linear-gradient(90deg, #000 88%, transparent);
}
.mm-palette__chips::-webkit-scrollbar { display: none; }
.mm-chip { flex: none; scroll-snap-align: start; }
}
@media (hover: none) {
.mm-chip__peek { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.mm-chip, .mm-chip__swatch, .mm-chip__peek img, .mm-palette::before, .mm-palette::after { transition: none; }
}
/* Cards moving to their new places when the grid is filtered — see
shop_results_controller.js (View Transitions). */
::view-transition-group(*.mm-card) { animation-duration: 0.55s; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }
::view-transition-new(*.mm-card):only-child { animation: mm-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
::view-transition-old(*.mm-card):only-child { animation: mm-card-out 0.3s ease both; }
@keyframes mm-card-in { from { opacity: 0; transform: translateY(18px) scale(0.96); } }
@keyframes mm-card-out { to { opacity: 0; transform: scale(0.94); } }
/* ── The shop's heading and the kinds of product in a category
(shop/index.html.twig). A kind is a picture card — the piece cropped to
itself on linen — with its name and how many pieces it holds; the one
being browsed lifts and gets a gold line. ── */
.mm-shop-head { text-align: center; margin-bottom: 2rem; }
.mm-shop-head .mm-shop-title { margin-bottom: 0; }
.mm-shop-head__crumbs {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
font-size: 0.68rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #9a948a;
}
.mm-shop-head__crumbs a { color: #9a7a45; text-decoration: none; }
.mm-shop-head__crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mm-shop-head__crumbs [aria-current] { color: var(--mm-charcoal); }
.mm-kinds {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: 0.85rem;
margin: 0 0 1.75rem;
}
.mm-kind {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
padding: 0 0 0.85rem;
background: #fff;
border: 1px solid var(--mm-border, #e8e4db);
border-radius: 4px;
color: var(--mm-charcoal);
text-decoration: none;
text-align: center;
overflow: hidden;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s, border-color 0.25s;
}
.mm-kind__pic {
position: relative;
display: grid;
place-items: center;
width: 100%;
aspect-ratio: 1.15;
margin-bottom: 0.35rem;
background: #fff; /* plain, like the showroom: no floor under the pieces */
overflow: hidden;
}
.mm-kind__pic img {
width: 78%;
height: 78%;
object-fit: contain;
mix-blend-mode: multiply;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* "All": up to four kinds at once. */
.mm-kind__pic--mosaic {
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 2px;
padding: 8%;
}
.mm-kind__pic--mosaic img { width: 100%; height: 100%; }
.mm-kind__pic--of2 { grid-template-rows: 1fr; padding: 14% 8%; }
.mm-kind__pic--of3 img:first-child { grid-row: 1 / -1; }
.mm-kind__name {
padding: 0 0.6rem;
font-family: var(--mm-heading);
font-size: 1.12rem;
line-height: 1.15;
}
.mm-kind__count {
font-size: 0.66rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #9a948a;
}
.mm-kind::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 2px;
background: var(--mm-gold);
transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
a.mm-kind:hover {
transform: translateY(-4px);
border-color: #d9c9a4;
box-shadow: 0 22px 36px -26px rgba(44, 42, 38, 0.5);
color: var(--mm-charcoal);
}
a.mm-kind:hover .mm-kind__pic img { transform: scale(1.08); }
a.mm-kind:hover::after { left: 20%; width: 60%; }
.mm-kind.is-active {
border-color: #c9b07f;
box-shadow: 0 0 0 1px #c9b07f, 0 22px 36px -28px rgba(154, 122, 69, 0.6);
}
.mm-kind.is-active::after { left: 0; width: 100%; }
.mm-kind.is-active .mm-kind__count { color: #9a7a45; }
.mm-kind.is-empty { opacity: 0.45; border-style: dashed; }
.mm-kind.is-empty .mm-kind__pic img { filter: grayscale(1); }
@media (max-width: 767.98px) {
.mm-kinds {
display: flex;
overflow-x: auto;
margin-left: -12px;
margin-right: -12px;
padding: 0 12px 4px;
scroll-snap-type: x proximity;
scroll-padding-inline: 12px;
scrollbar-width: none;
}
.mm-kinds::-webkit-scrollbar { display: none; }
.mm-kind { flex: 0 0 118px; scroll-snap-align: start; }
.mm-kind__name { font-size: 1rem; }
}
/* ── Filter Bar ── */
.mm-filter-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1.2rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--mm-border);
}
.mm-filter-bar__left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.mm-filter-bar__count {
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mm-sage);
}
.mm-filter-bar__right {
display: flex;
align-items: center;
gap: 1.2rem;
}
.mm-filter-dropdown {
position: relative;
}
.mm-filter-dropdown__btn {
background: none;
border: none;
font-family: var(--mm-body);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mm-charcoal);
cursor: pointer;
padding: 0.3rem 0;
}
.mm-filter-dropdown__btn:hover {
color: var(--mm-gold);
}
.mm-filter-dropdown__menu {
position: absolute;
top: 100%;
right: 0;
background: var(--mm-white);
border: 1px solid var(--mm-border);
box-shadow: 0 8px 30px rgba(0,0,0,0.08);
padding: 0.5rem 0;
min-width: 180px;
z-index: 100;
display: none;
list-style: none;
margin: 0;
}
.mm-filter-dropdown--open .mm-filter-dropdown__menu {
display: block;
}
.mm-filter-dropdown__menu li a {
display: block;
padding: 0.4rem 1.2rem;
font-size: 0.82rem;
color: var(--mm-text);
}
.mm-filter-dropdown__menu li a:hover,
.mm-filter-dropdown__menu li a.active {
background: var(--mm-cream);
color: var(--mm-gold);
}
@media (max-width: 768px) {
.mm-filter-bar { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.mm-shop-title { font-size: 1.36rem; }
}
/* ── Filter Pills ── */
.mm-filter-pills {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 0.5rem;
}
.mm-filter-pill {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 1rem;
background: var(--mm-charcoal);
color: var(--mm-cream);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s;
}
.mm-filter-pill:hover {
background: var(--mm-gold);
color: var(--mm-white);
}
.mm-filter-pill span {
opacity: 0.5;
font-size: 0.8rem;
}
.mm-filter-clear {
font-size: 0.68rem;
color: var(--mm-sage);
text-decoration: none;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-left: 0.5rem;
}
.mm-filter-clear:hover {
color: var(--mm-gold);
}
/* ── Editorial Collection Blocks ── */
.mm-editorial__heading {
text-align: center;
font-family: var(--mm-heading);
font-size: 1.5rem;
font-weight: 400;
margin-bottom: 3rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mm-editorial__image {
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
margin-bottom: 1.5rem;
transition: opacity 0.4s;
}
.mm-editorial__image--empty {
background-color: var(--mm-linen);
}
.mm-editorial__block:hover .mm-editorial__image {
opacity: 0.92;
}
.mm-editorial__content h3 {
font-family: var(--mm-heading);
font-size: 1.6rem;
font-weight: 300;
margin-bottom: 0.5rem;
}
.mm-editorial__content p {
color: var(--mm-sage);
font-size: 0.9rem;
margin-bottom: 1rem;
max-width: 400px;
line-height: 1.6;
}
/* ── Footer ── */
.mm-footer {
background-color: var(--mm-cream);
color: var(--mm-text);
padding: 4rem 0 2rem;
border-top: 1px solid var(--mm-border);
}
/* All three column headings share this treatment. The markup mixes h5
(brand) and h6 (Quick Links / Contact) for document-outline reasons —
without h6 here those two fell through to the global serif heading
rule and rendered visibly larger and in a different face than the
brand column. */
.mm-footer h5,
.mm-footer h6 {
font-family: var(--mm-body);
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.15em;
margin-bottom: 1.5rem;
color: var(--mm-charcoal);
font-weight: 400;
}
.mm-footer a {
color: var(--mm-text);
font-size: 0.85rem;
transition: color 0.3s;
}
/* Contact column: email + phone are links (0.85rem above) but the address
is plain text, so it inherited the 15px body size and sat noticeably
larger than the two lines above it. Match them.
Scoped to the contact column rather than `.mm-footer p` because the
legal-footer renders operator-editable HTML that sets its own size. */
.mm-footer__contact p {
font-size: 0.85rem;
}
.mm-footer a:hover {
color: var(--mm-gold);
}
.mm-footer .legal-footer {
border-top: 1px solid var(--mm-border);
padding-top: 2rem;
margin-top: 3rem;
font-size: 0.72rem;
color: var(--mm-sage);
}
/* The brand: the round logo over the words, the selectors and the social
marks. */
.mm-footer__logo {
display: block;
width: min(16.5rem, 70%);
height: auto;
margin: 0 0 2.25rem;
}
.mm-footer__tagline { max-width: 30rem; }
.mm-footer__social {
display: flex;
gap: 1.1rem;
list-style: none;
padding: 0;
margin: 2.5rem 0 0;
}
.mm-footer__social a {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
color: #8f8a83;
}
.mm-footer__social svg { width: 1.6rem; height: 1.6rem; }
.mm-footer__social a:hover { color: var(--mm-charcoal); }
/* Four groups of links in two columns, after Sophie's design: headings in
small capitals, the links in a group set in little runs with air
between them. */
.mm-footer__groups {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 3rem;
}
.mm-footer__group + .mm-footer__group { margin-top: 3rem; }
.mm-footer h6.mm-footer__heading {
font-family: var(--mm-title);
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 400;
color: #4a4a4a;
margin-bottom: 1.1rem;
}
.mm-footer__links {
list-style: none;
padding: 0;
margin: 0;
}
.mm-footer__links + .mm-footer__links { margin-top: 1.4rem; }
.mm-footer__links li { margin: 0; }
.mm-footer__links a {
font-family: var(--mm-body);
font-size: 0.92rem;
line-height: 2;
color: var(--mm-text);
text-decoration: none;
}
.mm-footer__links a:hover { color: var(--mm-gold); }
@media (min-width: 992px) {
.mm-footer__top { align-items: flex-start; }
.mm-footer__groups { padding-top: 2.25rem; }
}
@media (max-width: 575.98px) {
.mm-footer__groups { gap: 0 1.5rem; }
.mm-footer__logo { width: 12rem; }
}
/* ── Cart ── */
.mm-cart-item {
display: flex;
gap: 1.2rem;
align-items: flex-start;
padding: 1.5rem;
border-bottom: 1px solid var(--mm-border);
}
.mm-cart-item:first-child {
border-top: 1px solid var(--mm-border);
}
.mm-cart-item__image {
flex-shrink: 0;
width: 110px;
height: 110px;
}
.mm-cart-item__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mm-cart-item__body {
flex-grow: 1;
min-width: 0;
}
.mm-cart-item__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.mm-cart-item__name {
font-family: var(--mm-heading);
font-size: 1.1rem;
font-weight: 400;
margin-bottom: 0.1rem;
}
.mm-cart-item__name a {
color: var(--mm-charcoal);
}
.mm-cart-item__name a:hover {
color: var(--mm-gold);
}
.mm-cart-item__category {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--mm-sage);
}
.mm-cart-item__remove {
border: none;
background: none;
color: var(--mm-border);
cursor: pointer;
padding: 0;
transition: color 0.2s;
}
.mm-cart-item__remove:hover {
color: var(--mm-charcoal);
}
.mm-cart-item__remove-text {
border: none;
background: none;
color: var(--mm-sage);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
padding: 0;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.2s;
}
.mm-cart-item__remove-text:hover {
color: #c44;
}
.mm-cart-item__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1rem;
}
.mm-cart-item__qty {
display: flex;
align-items: center;
}
.mm-qty-btn {
width: 36px;
height: 36px;
border: 1px solid var(--mm-border);
background: var(--mm-white);
color: var(--mm-charcoal);
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
font-family: sans-serif;
line-height: 1;
padding: 0;
}
.mm-qty-btn:hover {
border-color: var(--mm-gold);
color: var(--mm-gold);
}
.mm-qty-field {
width: 44px;
height: 36px;
border: 1px solid var(--mm-border);
border-left: none;
border-right: none;
text-align: center;
font-family: var(--mm-body);
font-size: 0.9rem;
color: var(--mm-charcoal);
-moz-appearance: textfield;
appearance: textfield;
}
.mm-qty-field::-webkit-inner-spin-button,
.mm-qty-field::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.mm-cart-item__price {
text-align: right;
}
.mm-cart-item__total {
font-family: var(--mm-heading);
font-size: 1.3rem;
font-weight: 500;
color: var(--mm-charcoal);
}
.mm-cart-spec {
background: var(--mm-cream);
border-left: 2px solid var(--mm-gold);
padding: 0.75rem 1rem;
margin-top: 0.75rem;
}
.mm-cart-spec__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.35rem 2rem;
}
.mm-cart-spec__item {
display: flex;
flex-direction: column;
}
.mm-cart-spec__label {
font-size: 0.58rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--mm-sage);
line-height: 1;
}
.mm-cart-spec__value {
font-size: 0.82rem;
font-weight: 600;
color: var(--mm-charcoal);
}
.mm-cart-summary {
background: var(--mm-cream);
padding: 1.5rem;
}
.mm-cart-summary__row {
display: flex;
justify-content: space-between;
margin-bottom: 0.5rem;
font-size: 1rem;
}
.mm-cart-summary__note {
font-size: 0.8rem;
color: var(--mm-sage);
margin-bottom: 1.2rem;
}
@media (max-width: 576px) {
.mm-cart-item {
flex-direction: column;
}
.mm-cart-item__image {
width: 100%;
height: 200px;
}
.mm-cart-spec__grid {
grid-template-columns: 1fr;
}
.mm-cart-item__footer {
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
}
}
/* ── Pagination ── */
.pagination {
gap: 0.25rem;
}
.pagination .page-item .page-link {
border: none;
border-radius: 0;
color: var(--mm-text);
font-size: 0.8rem;
letter-spacing: 0.05em;
padding: 0.5rem 0.9rem;
background: transparent;
transition: all 0.2s;
font-family: var(--mm-body);
}
.pagination .page-item .page-link:hover {
background: var(--mm-cream);
color: var(--mm-gold);
}
.pagination .page-item.active .page-link {
background: var(--mm-charcoal);
color: var(--mm-white);
}
.pagination .page-item.disabled .page-link {
color: var(--mm-border);
background: transparent;
}
/* ═══════════════════════════════════════════
Fabric Configurator
═══════════════════════════════════════════ */
.mm-configurator {
border-top: 1px solid var(--mm-border);
padding-top: 1.5rem;
margin-top: 2rem;
}
/* ── Step Wizard Indicator ── */
.mm-configurator__steps {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 0;
padding: 0 0 1.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--mm-border);
}
.mm-configurator__step-dot {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
background: none;
border: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
}
.mm-configurator__step-number {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--mm-heading);
font-size: 1.1rem;
font-weight: 600;
line-height: 1;
font-variant-numeric: lining-nums; /* uniform height numerals */
border: 2px solid var(--mm-border);
color: var(--mm-sage);
background: var(--mm-white);
transition: all 0.3s;
}
.mm-configurator__step-dot:hover .mm-configurator__step-number {
border-color: var(--mm-gold);
color: var(--mm-gold);
}
.mm-configurator__step-name {
font-family: var(--mm-body);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mm-sage);
transition: color 0.3s;
/* Reserve bold width so layout doesn't shift on active */
display: inline-flex;
flex-direction: column;
align-items: center;
}
.mm-configurator__step-name::after {
content: attr(data-label);
font-weight: 600;
height: 0;
overflow: hidden;
visibility: hidden;
pointer-events: none;
}
.mm-configurator__step-line {
flex: 1;
height: 2px;
background: var(--mm-border);
margin: 0 0.3rem;
margin-top: 20px; /* align with larger dot center */
transition: background 0.3s;
}
.mm-configurator__step-dot--active .mm-configurator__step-number {
background: var(--mm-charcoal);
border-color: var(--mm-charcoal);
color: var(--mm-white);
box-shadow: 0 0 0 3px rgba(44, 42, 38, 0.12);
}
.mm-configurator__step-dot--active .mm-configurator__step-name {
color: var(--mm-charcoal);
font-weight: 600;
}
.mm-configurator__step-dot--completed .mm-configurator__step-number {
background: var(--mm-sage);
border-color: var(--mm-sage);
color: var(--mm-white);
}
.mm-configurator__step-dot--completed .mm-configurator__step-name {
color: var(--mm-sage);
}
.mm-configurator__step-line--completed {
background: var(--mm-sage);
}
/* ── Step Navigation Buttons ── */
/* Step panels use flex to push nav to bottom of a uniform height */
[data-configurator-target="stepPanel"] {
display: flex;
flex-direction: column;
min-height: 500px;
}
.mm-configurator__step-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 0 0.5rem;
margin-top: auto; /* push to bottom of flex container */
border-top: 1px solid var(--mm-border);
}
.mm-configurator__step-continue {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.75rem 2rem;
background: var(--mm-charcoal);
color: var(--mm-white);
border: 1px solid var(--mm-charcoal);
font-family: var(--mm-body);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s;
margin-left: auto;
}
.mm-configurator__step-continue:hover {
background: var(--mm-gold);
border-color: var(--mm-gold);
}
.mm-configurator__step-back {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: none;
border: none;
color: var(--mm-sage);
font-family: var(--mm-body);
font-size: 0.72rem;
letter-spacing: 0.08em;
cursor: pointer;
padding: 0.75rem 0;
transition: color 0.3s;
}
.mm-configurator__step-back:hover {
color: var(--mm-charcoal);
}
/* ── Mobile Preview (moved into right column on small screens) ── */
.mm-configurator__mobile-preview {
display: none;
}
@media (max-width: 768px) {
.mm-configurator__mobile-preview {
display: block;
position: sticky;
top: 55px;
z-index: 10;
background: var(--mm-light-grey);
padding: 0.5rem;
margin: 0 -0.75rem 1rem;
border-bottom: 1px solid var(--mm-border);
}
.mm-configurator__mobile-preview .mm-configurator__preview--sidebar {
position: static;
margin-top: 0;
padding: 0.5rem;
}
.mm-configurator__mobile-preview svg {
max-height: 140px;
width: 100%;
}
.mm-configurator__step-name {
font-size: 0.5rem;
}
}
@media (max-width: 480px) {
.mm-configurator__step-name {
display: none;
}
.mm-configurator__step-number {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
.mm-configurator__step-line {
margin-top: 16px;
}
}
.mm-configurator__section {
margin-bottom: 0;
padding: 1rem 0;
border-bottom: 1px solid var(--mm-border);
}
/* Collapsible sections */
.mm-configurator__collapsible {
margin-bottom: 1rem;
}
.mm-configurator__collapse-header {
display: flex;
align-items: center;
width: 100%;
padding: 0.7rem 0;
border: none;
border-bottom: 1px solid var(--mm-border);
background: none;
cursor: pointer;
gap: 0.5rem;
text-align: left;
outline: none;
}
.mm-configurator__collapse-header:focus-visible {
border-bottom-color: var(--mm-gold);
}
.mm-configurator__collapse-header .mm-configurator__label {
margin: 0;
flex-shrink: 0;
}
.mm-configurator__collapse-summary {
flex: 1;
font-size: 0.85rem;
color: var(--mm-charcoal);
font-weight: 500;
text-align: right;
padding-right: 0.25rem;
}
/* Peek strip — mini icons showing available options */
.mm-configurator__collapse-peek {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
justify-content: flex-end;
padding-right: 0.5rem;
}
.mm-configurator__peek-icon {
width: 32px;
height: 16px;
opacity: 0.3;
transition: opacity 0.2s;
flex-shrink: 0;
}
.mm-configurator__peek-icon svg {
width: 100%;
height: 100%;
display: block;
}
.mm-configurator__peek-icon--active {
opacity: 1;
}
.mm-configurator__collapse-header:hover .mm-configurator__peek-icon {
opacity: 0.55;
}
.mm-configurator__collapse-header:hover .mm-configurator__peek-icon--active {
opacity: 1;
}
.mm-configurator__collapse-chevron {
flex-shrink: 0;
color: var(--mm-sage);
transition: transform 0.25s ease;
}
.mm-configurator__collapse-header[aria-expanded="true"] .mm-configurator__collapse-chevron {
transform: rotate(180deg);
}
.mm-configurator__collapse-body {
padding: 0.75rem 0 0;
}
.mm-configurator__collapse-body .mm-configurator__options {
margin-top: 0;
}
/* Unit toggle */
.mm-configurator__unit-row {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.mm-configurator__unit-row .mm-configurator__label {
margin: 0;
}
.mm-configurator__unit-toggle {
display: flex;
gap: 0;
}
.mm-configurator__unit-btn {
cursor: pointer;
margin: 0;
}
.mm-configurator__unit-btn input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.mm-configurator__unit-btn span {
display: block;
padding: 0.3rem 0.9rem;
border: 1px solid var(--mm-border);
font-size: 0.75rem;
font-family: var(--mm-body);
color: var(--mm-sage);
letter-spacing: 0.05em;
transition: all 0.2s;
}
.mm-configurator__unit-btn:first-child span {
border-right: none;
}
.mm-configurator__unit-btn input:checked + span {
background: var(--mm-charcoal);
border-color: var(--mm-charcoal);
color: var(--mm-white);
}
.mm-configurator__unit-btn:hover span {
border-color: var(--mm-gold);
}
/* Room Presets */
.mm-configurator__presets {
display: flex;
gap: 0.4rem;
flex-wrap: wrap;
}
.mm-configurator__preset-btn {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.55rem 0.8rem;
border: 1px solid var(--mm-border);
background: var(--mm-white);
cursor: pointer;
font-family: var(--mm-body);
font-size: 0.78rem;
color: var(--mm-charcoal);
transition: all 0.3s ease;
flex: 1;
min-width: 0;
text-align: center;
line-height: 1.3;
}
.mm-configurator__preset-btn span {
font-size: 0.65rem;
color: var(--mm-sage);
margin-top: 2px;
}
.mm-configurator__preset-btn svg {
width: 44px;
height: 32px;
margin-bottom: 3px;
color: var(--mm-sage);
transition: color 0.3s ease;
}
.mm-configurator__preset-btn:hover {
border-color: var(--mm-gold);
color: var(--mm-gold);
}
.mm-configurator__preset-btn:hover svg {
color: var(--mm-gold);
}
.mm-configurator__preset-btn:hover span {
color: var(--mm-gold);
}
.mm-configurator__preset-btn--active {
border-color: var(--mm-charcoal);
background-color: var(--mm-cream);
}
.mm-configurator__preset-btn--active svg {
color: var(--mm-gold);
}
.mm-configurator__label {
font-family: var(--mm-body);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--mm-charcoal);
margin-bottom: 0.4rem;
font-weight: 400;
}
.mm-configurator__options {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.mm-configurator__options--compact {
grid-template-columns: repeat(3, 1fr);
}
.mm-configurator__radio {
cursor: pointer;
margin: 0;
position: relative;
}
.mm-configurator__radio input {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
top: 50%;
left: 50%;
}
.mm-configurator__radio input:focus {
outline: none;
}
.mm-configurator__radio-box {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.7rem 0.5rem;
border: 1px solid var(--mm-border);
transition: all 0.3s ease;
text-align: center;
background: transparent;
}
.mm-configurator__radio input:checked + .mm-configurator__radio-box {
border-color: var(--mm-charcoal);
background-color: var(--mm-cream);
}
.mm-configurator__radio:hover .mm-configurator__radio-box {
border-color: var(--mm-gold);
}
.mm-configurator__radio-icon {
display: block;
margin-bottom: 0.4rem;
}
.mm-configurator__radio-icon svg {
width: 56px;
height: 22px;
}
.mm-configurator__radio-title {
font-size: 0.8rem;
font-weight: 500;
color: var(--mm-charcoal);
line-height: 1.2;
}
.mm-configurator__radio-detail {
font-size: 0.68rem;
color: var(--mm-sage);
margin-top: 2px;
}
.mm-configurator__breakdown {
background: var(--mm-light-grey);
padding: 1.2rem 1.5rem;
margin-bottom: 1.5rem;
border: 1px solid var(--mm-border);
}
.mm-configurator__breakdown-table {
width: 100%;
margin-bottom: 1rem;
font-size: 0.85rem;
}
.mm-configurator__breakdown-table td {
padding: 0.35rem 0;
}
.mm-configurator__total {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid var(--mm-charcoal);
padding-top: 1rem;
font-family: var(--mm-heading);
font-size: 1.4rem;
font-weight: 500;
color: var(--mm-charcoal);
}
/* Fullness selector */
.mm-configurator__fullness-presets {
display: flex;
gap: 0.5rem;
}
.mm-configurator__fullness-preset {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 0.6rem 0.5rem;
border: 1px solid var(--mm-border);
background: var(--mm-white);
cursor: pointer;
font-family: var(--mm-heading);
font-size: 1.05rem;
color: var(--mm-charcoal);
transition: all 0.3s ease;
text-align: center;
line-height: 1.2;
}
.mm-configurator__fullness-preset span {
font-family: var(--mm-body);
font-size: 0.68rem;
color: var(--mm-sage);
margin-top: 2px;
letter-spacing: 0.05em;
}
.mm-configurator__fullness-preset:hover {
border-color: var(--mm-gold);
}
.mm-configurator__fullness-preset--active {
border-color: var(--mm-charcoal);
background-color: var(--mm-cream);
}
.mm-configurator__fullness-custom {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.6rem;
}
/* Fullness slider */
.mm-configurator__fullness-slider {
margin-top: 0.75rem;
}
.mm-configurator__range {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 3px;
border-radius: 2px;
outline: none;
cursor: pointer;
background: linear-gradient(to right, var(--mm-gold) 0%, var(--mm-gold) 50%, var(--mm-border) 50%, var(--mm-border) 100%);
}
.mm-configurator__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: var(--mm-gold);
border-radius: 50%;
border: 2px solid var(--mm-white);
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
cursor: pointer;
transition: box-shadow 0.15s;
}
.mm-configurator__range::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 4px rgba(184, 151, 92, 0.15), 0 1px 3px rgba(0,0,0,0.18);
}
.mm-configurator__range::-moz-range-thumb {
width: 16px;
height: 16px;
background: var(--mm-gold);
border-radius: 50%;
border: 2px solid var(--mm-white);
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
cursor: pointer;
}
.mm-configurator__range::-moz-range-progress {
background: var(--mm-gold);
height: 3px;
border-radius: 2px;
}
/* Dimension row: label+value header, full-width slider below */
.mm-configurator__dim-row {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.mm-configurator__dim-row .mm-configurator__range {
width: 100%;
}
.mm-configurator__dim-header {
display: flex;
align-items: baseline;
justify-content: space-between;
}
.mm-configurator__dim-header .mm-configurator__label {
margin-bottom: 0;
}
.mm-configurator__range-labels {
display: flex;
justify-content: space-between;
font-size: 0.62rem;
color: var(--mm-sage);
margin-top: 3px;
letter-spacing: 0.05em;
}
.mm-dimension-input--small {
max-width: 90px;
}
.mm-dimension-input--small input {
padding: 0.4rem 0.5rem;
font-size: 0.9rem;
}
/* Pair mode */
.mm-configurator__options--pair {
grid-template-columns: 1fr 1fr;
}
.mm-configurator__pair-total {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0.5rem;
margin-top: 0.5rem;
border-top: 1px solid var(--mm-gold);
font-family: var(--mm-heading);
font-size: 1.2rem;
font-weight: 500;
color: var(--mm-charcoal);
}
/* Share configuration */
.mm-configurator__share {
text-align: center;
margin-top: 0.75rem;
}
.mm-configurator__share-btn {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: none;
border: none;
color: var(--mm-sage);
font-family: var(--mm-body);
font-size: 0.65rem;
letter-spacing: 0.05em;
cursor: pointer;
padding: 0.2rem 0;
transition: color 0.3s;
}
.mm-configurator__share-btn:hover {
color: var(--mm-gold);
}
/* Cart bar */
.mm-configurator__cart-bar {
display: flex;
align-items: stretch;
gap: 0;
margin-bottom: 1rem;
border: 1px solid var(--mm-charcoal);
}
.mm-configurator__step-nav .mm-configurator__cart-bar {
margin-bottom: 0;
}
.mm-configurator__qty {
display: flex;
align-items: stretch;
border-right: 1px solid var(--mm-charcoal);
}
.mm-configurator__qty-btn {
width: 48px;
background: var(--mm-white);
border: none;
color: var(--mm-charcoal);
font-size: 1.4rem;
font-weight: 300;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s, color 0.2s;
font-family: sans-serif;
line-height: 1;
}
.mm-configurator__qty-btn:hover {
background: var(--mm-cream);
color: var(--mm-gold);
}
.mm-configurator__qty-input {
width: 52px;
border: none;
border-left: 1px solid var(--mm-border);
border-right: 1px solid var(--mm-border);
text-align: center;
font-family: var(--mm-heading);
font-size: 1.4rem;
font-weight: 400;
color: var(--mm-charcoal);
background: var(--mm-white);
-moz-appearance: textfield;
appearance: textfield;
outline: none;
}
.mm-configurator__qty-input::-webkit-inner-spin-button,
.mm-configurator__qty-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.mm-configurator__add-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem; /* match Continue button height */
background: var(--mm-charcoal);
color: var(--mm-white);
border: none;
font-family: var(--mm-body);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s;
}
.mm-configurator__add-btn:hover {
background: var(--mm-gold);
}
.mm-configurator__add-btn svg {
flex-shrink: 0;
opacity: 0.7;
}
.mm-configurator__actions {
margin-bottom: 1rem;
}
.mm-configurator__actions .form-control {
border-radius: 0;
border-color: var(--mm-border);
}
/* Dimension input (width/length) */
.mm-dimension-input {
position: relative;
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.mm-dimension-input input {
width: 3.5em;
padding: 0rem 0;
padding-right: 1.6rem;
font-family: var(--mm-heading);
font-size: 1.4rem;
color: var(--mm-charcoal);
border: none;
border-radius: 0;
text-align: right;
-moz-appearance: textfield;
appearance: textfield;
background: transparent;
}
.mm-dimension-input input::-webkit-inner-spin-button,
.mm-dimension-input input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.mm-dimension-input input:focus {
outline: none;
box-shadow: none;
}
.mm-dimension-input__unit,
.mm-configurator__unit-suffix {
position: absolute;
right: 0;
bottom: 0.1rem;
color: var(--mm-charcoal);
font-size: 0.85rem;
font-family: var(--mm-heading);
letter-spacing: 0.04em;
pointer-events: none;
background: none;
border: none;
padding: 0;
white-space: nowrap;
}
.mm-configurator__hint {
font-size: 0.72rem;
color: var(--mm-sage);
margin-top: 0.4rem;
margin-bottom: 0;
font-style: italic;
}
/* ── Compact actions row (measuring guide / sample / wishlist) ── */
.mm-configurator__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--mm-border);
}
.mm-configurator__action-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--mm-body);
font-size: 0.78rem;
letter-spacing: 0.04em;
color: var(--mm-text);
text-decoration: none;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: color 0.2s;
}
.mm-configurator__action-link:hover {
color: var(--mm-gold);
}
.mm-configurator__action-link svg {
opacity: 0.6;
flex-shrink: 0;
}
.mm-configurator__action-link:hover svg {
opacity: 1;
}
.mm-configurator__action-divider {
width: 1px;
height: 14px;
background: var(--mm-border);
}
.mm-configurator__action-form {
display: inline-flex;
}
@media (max-width: 768px) {
.mm-configurator__options {
grid-template-columns: 1fr 1fr;
}
.mm-configurator__options--compact {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 480px) {
.mm-configurator__options {
grid-template-columns: 1fr;
}
.mm-configurator__options--compact {
grid-template-columns: 1fr 1fr;
}
}
/* ── Page Content ── */
.mm-page-content {
max-width: 720px;
margin: 0 auto;
padding: 4rem 1rem;
}
.mm-page-content h2 {
margin-bottom: 1.5rem;
}
.mm-page-content h3 {
margin-top: 2.5rem;
margin-bottom: 1rem;
color: var(--mm-sage);
font-size: 1.3rem;
}
/* ── Contact Info ── */
.mm-contact-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.mm-contact-info__item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.mm-contact-info__icon {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--mm-cream);
color: var(--mm-sage);
}
.mm-contact-info__item a {
color: var(--mm-text);
text-decoration: none;
}
.mm-contact-info__item a:hover {
color: var(--mm-gold);
}
/* ── Checkout ── */
.mm-checkout-form .mb-3 {
margin-bottom: 1.2rem !important;
}
.mm-checkout-form label {
display: block;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--mm-sage);
margin-bottom: 0.35rem;
font-weight: 400;
}
.mm-checkout-form input[type="text"],
.mm-checkout-form input[type="email"],
.mm-checkout-form input[type="tel"],
.mm-checkout-form select,
.mm-checkout-form textarea {
width: 100%;
padding: 0.7rem 0.9rem;
font-family: var(--mm-body);
font-size: 0.9rem;
color: var(--mm-charcoal);
background: var(--mm-white);
border: 1px solid var(--mm-border);
border-radius: 0;
transition: border-color 0.3s;
}
.mm-checkout-form input:focus,
.mm-checkout-form select:focus,
.mm-checkout-form textarea:focus {
outline: none;
border-color: var(--mm-gold);
box-shadow: 0 0 0 2px rgba(184, 151, 92, 0.1);
}
.mm-checkout-form .form-check {
display: flex;
align-items: center;
gap: 0.6rem;
}
.mm-checkout-form .form-check-input {
width: 18px;
height: 18px;
accent-color: var(--mm-gold);
border-radius: 0;
cursor: pointer;
margin: 0;
}
.mm-checkout-form .form-check-label {
display: inline;
text-transform: none;
letter-spacing: 0;
font-size: 0.85rem;
color: var(--mm-text);
cursor: pointer;
}
.mm-checkout-section {
margin-bottom: 2.5rem;
}
.mm-checkout-section__title {
font-family: var(--mm-heading);
font-size: 1.2rem;
font-weight: 400;
color: var(--mm-charcoal);
margin-bottom: 1.2rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--mm-border);
}
.mm-checkout-billing-toggle {
margin-bottom: 1rem;
}
/* Checkout Summary (sticky sidebar) */
.mm-checkout-summary {
background: var(--mm-cream);
padding: 1.5rem;
position: sticky;
top: 2rem;
}
.mm-checkout-summary__item {
padding: 1rem 0;
border-bottom: 1px solid var(--mm-border);
}
.mm-checkout-summary__item:first-of-type {
padding-top: 0;
}
.mm-checkout-summary__image {
width: 60px;
height: 60px;
object-fit: cover;
flex-shrink: 0;
}
.mm-checkout-summary__name {
font-size: 0.9rem;
font-weight: 600;
color: var(--mm-charcoal);
}
.mm-checkout-summary__spec {
font-size: 0.72rem;
color: var(--mm-sage);
margin-top: 2px;
}
.mm-checkout-summary__qty {
font-size: 0.75rem;
color: var(--mm-sage);
margin-top: 2px;
}
.mm-checkout-summary__price {
font-family: var(--mm-heading);
font-size: 1rem;
white-space: nowrap;
flex-shrink: 0;
}
.mm-checkout-summary__totals {
padding-top: 1rem;
}
.mm-checkout-summary__row {
display: flex;
justify-content: space-between;
padding: 0.3rem 0;
font-size: 0.9rem;
}
.mm-checkout-summary__row--total {
border-top: 1px solid var(--mm-charcoal);
margin-top: 0.5rem;
padding-top: 0.75rem;
font-family: var(--mm-heading);
font-size: 1.3rem;
font-weight: 500;
}
/* ── Stripe payment element ── */
/* ── Soft maintenance page ── */
.mm-maintenance {
min-height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--mm-cream, #fbf9f7);
color: var(--mm-charcoal, #2C2C2C);
font-family: var(--mm-body, Georgia, serif);
padding: 1.5rem;
}
.mm-maintenance__inner {
max-width: 480px;
width: 100%;
text-align: center;
}
.mm-maintenance__brand {
font-family: var(--mm-heading);
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.85rem;
color: var(--mm-gold, #B8975C);
margin-bottom: 2rem;
}
.mm-maintenance__title {
font-family: var(--mm-heading);
font-weight: 400;
font-size: 1.63rem;
margin: 0 0 1rem 0;
line-height: 1.15;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mm-maintenance__lede {
font-size: 1.05rem;
line-height: 1.5;
margin: 0 0 2.5rem 0;
color: #5a5550;
}
.mm-maintenance__form {
text-align: left;
margin-bottom: 1.5rem;
}
.mm-maintenance__label {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 0.5rem;
color: #6a6560;
}
.mm-maintenance__row {
display: flex;
gap: 0.5rem;
}
.mm-maintenance__row input {
flex: 1;
padding: 0.7rem 0.9rem;
border: 1px solid #d6cfc4;
background: #fff;
border-radius: 3px;
font-family: inherit;
font-size: 1rem;
}
.mm-maintenance__row input:focus {
outline: 2px solid var(--mm-gold, #B8975C);
outline-offset: 1px;
border-color: var(--mm-gold, #B8975C);
}
.mm-maintenance__row button {
padding: 0.7rem 1.3rem;
background: var(--mm-sage, #16213e);
color: #fff;
border: 0;
border-radius: 3px;
font-family: var(--mm-heading);
letter-spacing: 0.08em;
text-transform: uppercase;
font-size: 0.85rem;
cursor: pointer;
transition: background 120ms ease;
}
.mm-maintenance__row button:hover:not(:disabled) {
background: #0f1830;
}
.mm-maintenance__row button:disabled {
opacity: 0.55;
cursor: progress;
}
.mm-maintenance__error {
margin: 0.75rem 0 0;
padding: 0.5rem 0.8rem;
background: #fdecea;
color: #8a1f1f;
border-radius: 3px;
font-size: 0.9rem;
}
.mm-maintenance__contact {
font-size: 0.85rem;
color: #6a6560;
}
.mm-maintenance__contact a {
color: var(--mm-sage, #16213e);
}
.mm-stripe-element {
margin: 0.75rem 0 0.25rem;
padding: 0.75rem;
border: 1px solid #e7e2d8;
border-radius: 6px;
background: #fff;
min-height: 220px;
}
/* ── Payment card (Revolut checkout) ────────────────────────────────────
The full payment form on the right side of /checkout/payment/{token}.
Reads as one self-contained white card on the cream page so it carries
visual weight on its own; soft shadow + border so it sits cleanly above
the background without floating away. */
.mm-payment-card {
background: #fff;
border: 1px solid var(--mm-border);
border-radius: 8px;
padding: 1.75rem;
box-shadow:
0 2px 8px rgba(44, 44, 44, 0.04),
0 1px 2px rgba(44, 44, 44, 0.02);
}
.mm-payment-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--mm-border);
}
.mm-payment-card__title {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-family: var(--mm-heading);
font-size: 1.1rem;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--mm-charcoal);
}
.mm-payment-card__title svg {
color: var(--mm-gold);
flex-shrink: 0;
}
/* Accepted-cards row in the header — flat brand SVGs sourced from
aaronfagan/svg-credit-card-payment-icons (MIT). Fixed aspect so the
three pills line up cleanly regardless of which logo is widest. */
.mm-payment-card__brands {
display: inline-flex;
gap: 0.4rem;
align-items: center;
}
.mm-card-brand {
display: block;
height: 24px;
width: auto;
border-radius: 3px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
user-select: none;
}
/* Field group inside the payment card — uppercase mini-label sitting
above each input. Matches how Stripe/Aesop/most premium checkouts
structure their card forms. */
.mm-payment-card__field {
margin-bottom: 1rem;
}
.mm-payment-card__field:last-of-type {
margin-bottom: 1.25rem;
}
.mm-payment-card__label {
display: block;
margin-bottom: 0.4rem;
font: 500 0.7rem/1 system-ui, -apple-system, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--mm-charcoal);
opacity: 0.7;
}
/* Card-field iframe wrapper: the Revolut iframe paints its own background
and inputs inside, we only own the outer chrome. Pad + border like a
regular input so the iframe sits cleanly inside a labelled field group. */
.mm-payment-card__iframe {
padding: 0.85rem 0.9rem;
border: 1px solid var(--mm-border);
border-radius: 5px;
background: #fff;
transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-payment-card__iframe:focus-within {
border-color: var(--mm-gold);
box-shadow: 0 0 0 3px rgba(184, 151, 92, 0.12);
}
.mm-payment-card__input {
display: block;
width: 100%;
padding: 0.85rem 0.9rem;
border: 1px solid var(--mm-border);
border-radius: 5px;
background: #fff;
font-size: 0.95rem;
font-family: inherit;
color: var(--mm-charcoal);
transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-payment-card__input:focus {
outline: none;
border-color: var(--mm-gold);
box-shadow: 0 0 0 3px rgba(184, 151, 92, 0.12);
}
.mm-payment-card__input::placeholder {
color: #b0a99b;
}
.mm-payment-card__error {
margin: 0 0 1rem;
padding: 0.7rem 0.9rem;
background: #fdecea;
border-left: 3px solid #8a1f1f;
color: #8a1f1f;
border-radius: 3px;
font-size: 0.875rem;
line-height: 1.4;
}
.mm-payment-card__submit {
position: relative; /* anchors the absolute-positioned spinner */
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
width: 100%;
padding: 1rem 1.25rem;
border: none;
border-radius: 5px;
background: var(--mm-charcoal);
color: #fff;
/* Drop uppercase + wide tracking — serif at small size with 0.14em
letter-spacing reads slowly on the deciding CTA, and the price
glyphs in particular ("£334.80") get lost. Sentence case, bigger
size, very light tracking keeps the brand serif but lets the
amount land in one glance. */
font-family: var(--mm-heading);
font-size: 1.15rem;
font-weight: 500;
letter-spacing: 0.015em;
cursor: pointer;
transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
box-shadow: 0 1px 2px rgba(44, 44, 44, 0.15);
}
.mm-payment-card__submit:hover:not(:disabled) {
background: #1a1a1a;
box-shadow: 0 2px 6px rgba(44, 44, 44, 0.2);
}
.mm-payment-card__submit:active:not(:disabled) {
transform: translateY(1px);
box-shadow: 0 1px 1px rgba(44, 44, 44, 0.2);
}
.mm-payment-card__submit:disabled {
background: #8a8576;
cursor: not-allowed;
box-shadow: none;
}
.mm-payment-card__submit svg {
flex-shrink: 0;
opacity: 0.85;
}
/* Loading state — hide the lock icon + label without removing them from
the layout (visibility:hidden preserves the button width so the text
doesn't jump when the spinner appears) and overlay a centred spinner. */
.mm-payment-card__submit.is-loading > :not(.mm-payment-card__spinner) {
visibility: hidden;
}
.mm-payment-card__spinner {
display: none;
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin: -9px 0 0 -9px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: mm-payment-card__spin 0.65s linear infinite;
}
.mm-payment-card__submit.is-loading .mm-payment-card__spinner {
display: block;
}
@keyframes mm-payment-card__spin {
to { transform: rotate(360deg); }
}
.mm-payment-card__secure {
display: flex;
align-items: flex-start;
gap: 0.55rem;
margin: 1.25rem 0 0;
padding-top: 1rem;
border-top: 1px solid var(--mm-border);
font-size: 0.78rem;
line-height: 1.45;
color: var(--mm-charcoal);
opacity: 0.75;
}
.mm-payment-card__secure svg {
flex-shrink: 0;
color: var(--mm-gold);
margin-top: 1px;
}
/* Accepted-cards strip below the card field. Text-only because actual
brand SVGs come with licensing baggage and visually clash with the
serif/minimal aesthetic — the middle dots read as a clean spec list. */
.mm-checkout-accepted-cards {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-top: 0.5rem;
font-size: 0.78rem;
color: var(--mm-sage);
}
.mm-checkout-accepted-cards__label {
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.7rem;
opacity: 0.7;
}
.mm-checkout-accepted-cards__brands {
color: var(--mm-charcoal);
opacity: 0.75;
}
/* Order reference shown above the line items so customers can quote
it in support messages without scrolling around. */
.mm-checkout-summary__ref {
font-size: 0.78rem;
color: var(--mm-sage);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--mm-border);
}
.mm-checkout-summary__ref strong {
color: var(--mm-charcoal);
font-weight: 600;
letter-spacing: 0.02em;
}
/* Quantity badge in the top-right corner of a line-item thumbnail —
only rendered when qty > 1, so the badge itself is the only signal. */
.mm-checkout-summary__qty-badge {
position: absolute;
top: -6px;
right: -6px;
min-width: 20px;
height: 20px;
padding: 0 6px;
background: var(--mm-charcoal);
color: #fff;
border-radius: 10px;
font-size: 0.72rem;
line-height: 20px;
text-align: center;
font-weight: 600;
}
.mm-stripe-error {
margin-top: 0.75rem;
padding: 0.65rem 0.85rem;
background: #fdecea;
color: #8a1f1f;
border-radius: 4px;
font-size: 0.9rem;
}
.mm-checkout-payment__note {
font-size: 0.8rem;
letter-spacing: 0.02em;
}
/* ── Payment status pill on confirmation page ── */
.mm-payment-status {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.7rem;
font-size: 0.85rem;
border-radius: 999px;
background: #eef3ef;
color: #2f5d3d;
margin-bottom: 0.5rem;
}
.mm-payment-status--pending,
.mm-payment-status--processing {
background: #fff3d9;
color: #7a5400;
}
.mm-payment-status--failed,
.mm-payment-status--canceled {
background: #fdecea;
color: #8a1f1f;
}
/* ── Confirmation ── */
.mm-confirmation {
max-width: 700px;
margin: 0 auto;
text-align: center;
}
.mm-confirmation__icon {
color: var(--mm-sage);
margin-bottom: 1.5rem;
}
.mm-confirmation__title {
font-family: var(--mm-heading);
font-size: 1.5rem;
font-weight: 400;
margin-bottom: 0.5rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mm-confirmation__reference {
font-family: var(--mm-body);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--mm-gold);
margin-bottom: 1rem;
}
.mm-confirmation__note {
color: var(--mm-sage);
font-size: 0.95rem;
margin-bottom: 2.5rem;
}
.mm-confirmation__details {
text-align: left;
background: var(--mm-cream);
padding: 2rem;
margin-bottom: 2rem;
}
.mm-confirmation__item {
padding: 0.75rem 0;
border-bottom: 1px solid var(--mm-border);
font-size: 0.9rem;
}
.mm-confirmation__item-qty {
color: var(--mm-sage);
font-size: 0.85rem;
}
.mm-confirmation__item-spec {
font-size: 0.72rem;
color: var(--mm-sage);
margin-top: 2px;
}
.mm-confirmation__totals {
padding-top: 1rem;
font-size: 0.9rem;
}
.mm-confirmation__totals > div {
padding: 0.25rem 0;
}
.mm-confirmation__total-line {
border-top: 1px solid var(--mm-charcoal);
margin-top: 0.5rem;
padding-top: 0.5rem;
font-family: var(--mm-heading);
font-size: 1.2rem;
}
.mm-confirmation__address {
font-size: 0.85rem;
color: var(--mm-text);
font-style: normal;
line-height: 1.6;
}
.mm-confirmation__actions {
margin-top: 2rem;
}
/* ── Process Steps ── */
.mm-process-grid {
padding: 3rem 0 5rem;
max-width: 800px;
margin: 0 auto;
}
.mm-process-grid p {
color: var(--mm-sage);
font-size: 0.9rem;
}
.mm-process-icon {
width: 48px;
height: 48px;
border: 1px solid var(--mm-gold);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--mm-heading);
font-size: 1.2rem;
color: var(--mm-gold);
margin-bottom: 1rem;
}
/* ── MM Studio / Atelier ── */
.mm-atelier-hero {
position: relative;
height: 75vh;
min-height: 450px;
max-height: 700px;
overflow: hidden;
}
.mm-atelier-hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center 30%;
filter: grayscale(0.3);
}
.mm-atelier-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(30, 28, 25, 0.7) 0%, rgba(30, 28, 25, 0.2) 50%, rgba(30, 28, 25, 0.05) 100%);
display: flex;
align-items: flex-end;
padding-bottom: 4rem;
}
.mm-atelier-hero__tag {
display: inline-block;
font-family: var(--mm-body);
font-size: 0.65rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--mm-gold);
border: 1px solid rgba(184, 151, 92, 0.5);
padding: 0.3rem 1rem;
margin-bottom: 1.2rem;
}
.mm-atelier-hero__title {
font-family: var(--mm-heading);
font-size: 2.38rem;
font-weight: 400;
color: #fff;
letter-spacing: 0.1em;
margin-bottom: 0.5rem;
text-transform: uppercase;
}
.mm-atelier-hero__subtitle {
font-family: var(--mm-body);
font-size: 1rem;
color: rgba(255, 255, 255, 0.75);
letter-spacing: 0.03em;
}
.mm-atelier-intro {
padding: 5rem 0 4rem;
}
.mm-atelier-intro__content {
font-family: var(--mm-heading);
font-size: 1.35rem;
font-weight: 300;
line-height: 1.9;
color: var(--mm-text);
}
.mm-atelier-intro__content h2,
.mm-atelier-intro__content h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
/* Craftsmanship alternating sections */
.mm-atelier-craft {
padding: 2rem 0 4rem;
}
.mm-atelier-craft__image {
border-radius: 6px;
overflow: hidden;
}
.mm-atelier-craft__image img {
width: 100%;
height: 380px;
object-fit: cover;
display: block;
transition: transform 0.6s ease;
}
.mm-atelier-craft__image:hover img {
transform: scale(1.03);
}
.mm-atelier-craft__text {
padding: 1rem 0;
}
.mm-atelier-craft__num {
display: inline-block;
font-family: var(--mm-heading);
font-size: 2.5rem;
font-weight: 300;
color: var(--mm-gold);
opacity: 0.5;
line-height: 1;
margin-bottom: 0.8rem;
}
.mm-atelier-craft__text h3 {
font-size: 1.5rem;
margin-bottom: 0.8rem;
}
.mm-atelier-craft__text p {
color: var(--mm-text);
line-height: 1.9;
}
/* Detail strip */
.mm-atelier-strip {
padding: 0;
overflow: hidden;
}
.mm-atelier-strip__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4px;
}
.mm-atelier-strip__item {
overflow: hidden;
}
.mm-atelier-strip__item img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
filter: grayscale(0.15);
transition: filter 0.4s, transform 0.6s;
}
.mm-atelier-strip__item:hover img {
filter: grayscale(0);
transform: scale(1.04);
}
/* Services */
.mm-atelier-services {
padding: 5rem 0;
background: var(--mm-linen);
}
.mm-atelier-services h2 {
margin-bottom: 0.5rem;
}
.mm-atelier-services__card {
background: var(--mm-white);
padding: 2.5rem 2rem;
border-radius: 6px;
height: 100%;
text-align: center;
transition: box-shadow 0.3s;
}
.mm-atelier-services__card:hover {
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
}
.mm-atelier-services__icon {
color: var(--mm-gold);
margin-bottom: 1.2rem;
}
.mm-atelier-services__card h4 {
font-size: 1.15rem;
margin-bottom: 0.8rem;
}
.mm-atelier-services__card p {
font-size: 0.9rem;
color: var(--mm-text);
line-height: 1.8;
}
/* Sample wall section */
.mm-atelier-samples {
padding: 5rem 0;
}
.mm-atelier-samples__img {
width: 100%;
border-radius: 6px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.mm-atelier-samples h2 {
margin-bottom: 1rem;
}
.mm-atelier-samples p {
line-height: 1.9;
color: var(--mm-text);
}
@media (max-width: 768px) {
.mm-atelier-hero__title { font-size: 1.5rem; }
.mm-atelier-hero { height: 55vh; min-height: 350px; }
.mm-atelier-craft__image img { height: 260px; }
.mm-atelier-strip__grid { grid-template-columns: 1fr; }
.mm-atelier-strip__item img { height: 240px; }
.mm-atelier-craft__text { padding: 0; }
}
/* ── Admin Bar ── */
.mm-admin-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: var(--mm-charcoal);
color: var(--mm-white);
padding: 0.45rem 1rem;
z-index: 9999;
font-size: 0.75rem;
font-family: sans-serif;
box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.15);
--mm-admin-bar-height: 44px;
}
/* Reserve space at the bottom of the page so fixed-bottom content
(footers, step navs, CTAs) is never covered by the bar.
Other fixed-bottom UI should set bottom: var(--mm-admin-bar-offset, 0)
to lift above the admin bar when an admin is logged in. */
body {
--mm-admin-bar-offset: 0px;
}
body:has(.mm-admin-bar) {
--mm-admin-bar-offset: 44px;
padding-bottom: var(--mm-admin-bar-offset);
}
.mm-admin-bar__brand {
color: var(--mm-gold) !important;
display: flex;
align-items: center;
text-decoration: none;
opacity: 0.8;
transition: opacity 0.2s;
}
.mm-admin-bar__brand:hover {
opacity: 1;
}
.mm-admin-bar__links {
display: flex;
align-items: center;
gap: 0.2rem;
}
.mm-admin-bar__links a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.68rem;
padding: 0.25rem 0.6rem;
border-radius: 3px;
transition: background 0.15s, color 0.15s;
letter-spacing: 0.02em;
}
.mm-admin-bar__links a:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--mm-gold);
}
.mm-admin-bar .btn-edit-mode {
background: transparent;
color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 0.25rem 0.7rem;
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
font-family: sans-serif;
font-weight: 600;
border-radius: 3px;
display: flex;
align-items: center;
gap: 0.35rem;
transition: all 0.2s;
}
.mm-admin-bar .btn-edit-mode:hover {
border-color: var(--mm-gold);
color: var(--mm-gold);
}
.mm-admin-bar .btn-edit-mode--active {
background: var(--mm-gold);
color: var(--mm-charcoal);
border-color: var(--mm-gold);
}
.mm-admin-bar__panel-btn {
color: rgba(255, 255, 255, 0.7) !important;
text-decoration: none !important;
font-size: 0.65rem;
padding: 0.25rem 0.7rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 3px;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 600;
transition: all 0.2s;
}
.mm-admin-bar__panel-btn:hover {
border-color: var(--mm-gold);
color: var(--mm-gold) !important;
}
/* ── Edit Mode ── */
body.edit-mode [data-editable] {
outline: 1px dashed var(--mm-gold);
outline-offset: 4px;
cursor: pointer;
min-height: 20px;
}
body.edit-mode [data-editable]:hover {
outline-style: solid;
background-color: rgba(184, 151, 92, 0.04);
}
body.edit-mode [data-editable-image] {
position: relative;
cursor: pointer;
}
body.edit-mode [data-editable-image]::after {
content: 'Click to replace image';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.65);
color: white;
padding: 0.5rem 1.2rem;
font-size: 0.72rem;
font-family: sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}
body.edit-mode [data-editable-image]:hover::after {
opacity: 1;
}
/* ::after doesn't render on text in its system blue regardless of the
`color` property — it uses `-webkit-text-fill-color`, which defaults to
blue on form controls. Forcing `currentColor` on every configurator
button means each element's text simply paints in its own `color` value,
restoring brand colours (gold price, charcoal name, grey description). */
.mm-mtm button { -webkit-text-fill-color: currentColor; }
.mm-mtm__tile:hover {
border-color: var(--mm-gold);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.mm-mtm__tile.is-active {
border-color: var(--mm-gold);
background: #faf9f7;
box-shadow: 0 0 0 2px var(--mm-gold) inset;
}
.mm-mtm__tile-illus {
/* Consistent illustration frame across all four heading types — the source
images have different aspect ratios (the cropped trio is 1:2 portrait,
eyelet is 3:2 landscape) so we centre + contain. */
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 130px;
margin-bottom: 0.4rem;
}
.mm-mtm__tile-illus img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
/* Default: muted navy stamp on the cream tile. The active tile bumps
opacity *and* saturation so the selected illustration clearly "wakes
up" — a small transform-scale adds a subtle bloom on top. */
mix-blend-mode: multiply;
opacity: 0.55;
filter: saturate(0.85);
transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}
.mm-mtm__tile:hover .mm-mtm__tile-illus img {
opacity: 0.75;
}
.mm-mtm__tile.is-active .mm-mtm__tile-illus img {
opacity: 1;
filter: saturate(1.1);
transform: scale(1.03);
}
.mm-mtm__tile-name {
font-family: var(--mm-display);
font-size: 1.1rem;
}
.mm-mtm__tile-desc {
font-size: 0.8rem;
color: #666;
line-height: 1.5;
flex-grow: 1;
}
.mm-mtm__tile-price {
font-size: 0.75rem;
color: var(--mm-gold);
font-weight: 600;
margin-top: 0.35rem;
}
/* ── Inline variant picker — sits inside the tile-wrap, attached under its tile.
On desktop it floats (absolute) so revealing it doesn't push siblings around;
on mobile it flows inline because tiles already stack. ── */
.mm-mtm__tile-variants {
margin-top: 10px;
padding: 0.85rem 1rem 0.95rem;
background: #faf9f7;
border: 1px solid var(--mm-gold);
border-radius: 5px;
display: flex;
flex-direction: column;
gap: 0.55rem;
position: relative;
}
@media (min-width: 600px) {
.mm-mtm__tile-variants {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-top: 10px;
z-index: 5;
box-shadow: 0 8px 22px rgba(0,0,0,0.06);
}
}
/* Upward-pointing arrow visually connecting the picker to the tile above. */
.mm-mtm__tile-variants::before {
content: '';
position: absolute;
top: -7px;
left: 24px;
width: 12px;
height: 12px;
background: #faf9f7;
border-top: 1px solid var(--mm-gold);
border-left: 1px solid var(--mm-gold);
transform: rotate(45deg);
}
/* When the picker would otherwise overflow below the page (last-row tile),
the controller flips it to the side. The desktop-only @media match at 600px
keeps mobile fully inline. */
@media (min-width: 600px) {
.mm-mtm__tile-variants--side-right,
.mm-mtm__tile-variants--side-left {
top: 0;
bottom: auto;
margin-top: 0;
width: 320px;
max-width: 320px;
}
.mm-mtm__tile-variants--side-right {
left: calc(100% + 14px);
right: auto;
}
.mm-mtm__tile-variants--side-left {
right: calc(100% + 14px);
left: auto;
}
/* Arrows on the side variants point inward (toward the tile). */
.mm-mtm__tile-variants--side-right::before {
top: 24px;
left: -7px;
border-top: 1px solid var(--mm-gold);
border-left: 1px solid var(--mm-gold);
border-right: 0;
border-bottom: 0;
transform: rotate(-45deg);
}
.mm-mtm__tile-variants--side-left::before {
top: 24px;
left: auto;
right: -7px;
border-top: 1px solid var(--mm-gold);
border-left: 0;
border-right: 1px solid var(--mm-gold);
border-bottom: 0;
transform: rotate(45deg);
}
}
.mm-mtm__tile-variants[hidden] {
display: none;
}
.mm-mtm__tile-variants-label {
font-size: 0.65rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-gold);
font-weight: 600;
}
.mm-mtm__tile-variants-hint {
font-size: 0.72rem;
color: #888;
line-height: 1.4;
}
/* Segmented-control look for variant pills — both options equal width
(50/50). Container is the only rounded shape; pills fill their cells
as flat halves so the seam between them is a clean line, not a
curved-corner gap. */
.mm-mtm__tile-variants .mm-mtm__pills {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
background: rgba(196, 163, 90, 0.14);
border-radius: 999px;
padding: 0;
gap: 0;
width: 100%;
overflow: hidden;
}
.mm-mtm__tile-variants .mm-mtm__pill {
background: transparent;
border: 0;
outline: 0;
padding: 0.6rem 0.5rem;
font-size: 0.78rem;
border-radius: 0;
color: #888;
/* Allow wrapping for long localised labels (e.g. DE "6 cm Kräuselband"
which wouldn't fit a 50%-of-container pill on a single line at
0.78rem). Tight line-height keeps a 2-line wrap from looking
sloppy, and text-align: center keeps the wrapped lines visually
balanced. Single-line labels (EN, short DE) stay on one line and
look identical to before. */
white-space: normal;
line-height: 1.15;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 0.35rem;
min-width: 0;
min-height: 2.4em;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: color 0.15s, background 0.15s;
-webkit-tap-highlight-color: transparent;
}
.mm-mtm__tile-variants .mm-mtm__pill * {
cursor: pointer;
user-select: none;
}
.mm-mtm__tile-variants .mm-mtm__pill:hover {
color: var(--mm-charcoal);
background: transparent;
border-color: transparent;
transform: none;
box-shadow: none;
}
.mm-mtm__tile-variants .mm-mtm__pill:focus,
.mm-mtm__tile-variants .mm-mtm__pill:focus-visible,
.mm-mtm__tile-variants .mm-mtm__pill:active {
outline: 0;
box-shadow: none;
}
.mm-mtm__tile-variants .mm-mtm__pill.is-active {
background: var(--mm-charcoal);
color: var(--mm-white);
font-weight: 500;
}
.mm-mtm__tile-variants .mm-mtm__pill-price {
font-size: 0.68rem;
opacity: 0.65;
font-weight: 400;
}
.mm-mtm__tile-variants .mm-mtm__pill.is-active .mm-mtm__pill-price {
opacity: 0.85;
}
/* Tape-depth comparative diagram — sits below the pills, two bars sharing
a baseline at literal 1:2 height ratio so the depth difference reads
instantly without parsing text. */
.mm-mtm__tape-diagram {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2.25rem;
margin: 0.65rem 0 0.25rem;
padding: 0.35rem 0 0.15rem;
}
.mm-mtm__tape-diagram-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
line-height: 1;
/* Now a — strip the browser defaults so it visually reads
as the original diagram item. Click target gets a touch of padding
so the hit area is comfortable on mobile. */
background: transparent;
border: 0;
padding: 0.3rem 0.55rem 0.35rem;
border-radius: 4px;
cursor: pointer;
font: inherit;
color: inherit;
transition: background-color 0.15s ease;
}
.mm-mtm__tape-diagram-item:hover .mm-mtm__tape-bar { opacity: 1; }
.mm-mtm__tape-diagram-item:hover .mm-mtm__tape-cap { color: var(--mm-charcoal); }
.mm-mtm__tape-diagram-item:focus-visible {
outline: 1px solid var(--mm-gold);
outline-offset: 3px;
}
.mm-mtm__tape-diagram-item.is-active .mm-mtm__tape-bar { opacity: 1; }
.mm-mtm__tape-diagram-item.is-active .mm-mtm__tape-cap {
color: var(--mm-charcoal);
font-weight: 600;
}
.mm-mtm__tape-bar {
display: block;
width: 38px;
background: var(--mm-gold);
border-radius: 1.5px 1.5px 0 0;
opacity: 0.85;
}
.mm-mtm__tape-bar--5 { height: 5px; }
.mm-mtm__tape-bar--6 { height: 6px; }
.mm-mtm__tape-bar--10 { height: 10px; }
.mm-mtm__tape-bar--12 { height: 12px; }
.mm-mtm__tape-cap {
font-size: 0.62rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #999;
font-weight: 500;
}
/* Pinch-pleat finger glyph — same layout as the tape diagram so the two
variant pickers feel like the same family. The SVG glyphs visually
communicate two- vs three-finger fold count above the labels. */
.mm-mtm__pleat-diagram {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 2.25rem;
margin: 0.65rem 0 0.25rem;
padding: 0.35rem 0 0.15rem;
}
.mm-mtm__pleat-diagram-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
line-height: 1;
/* Now a — see .mm-mtm__tape-diagram-item for rationale. */
background: transparent;
border: 0;
padding: 0.3rem 0.55rem 0.35rem;
border-radius: 4px;
cursor: pointer;
font: inherit;
color: inherit;
transition: background-color 0.15s ease;
}
.mm-mtm__pleat-diagram-item:hover .mm-mtm__pleat-glyph { opacity: 1; }
.mm-mtm__pleat-diagram-item:hover .mm-mtm__tape-cap { color: var(--mm-charcoal); }
.mm-mtm__pleat-diagram-item:focus-visible {
outline: 1px solid var(--mm-gold);
outline-offset: 3px;
}
.mm-mtm__pleat-diagram-item.is-active .mm-mtm__pleat-glyph { opacity: 1; }
.mm-mtm__pleat-diagram-item.is-active .mm-mtm__tape-cap {
color: var(--mm-charcoal);
font-weight: 600;
}
.mm-mtm__pleat-glyph {
color: var(--mm-gold);
opacity: 0.85;
}
/* Per-heading add-on toggles (e.g. cottage-pleat flop-over frill).
Sit below the depth diagram, one checkbox per row, with an inline
tooltip "?" badge for the descriptive copy. */
.mm-mtm__addons {
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0.6rem 0 0.25rem;
padding-top: 0.6rem;
border-top: 1px dashed rgba(196, 163, 90, 0.25);
}
.mm-mtm__addon {
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.78rem;
color: var(--mm-charcoal);
user-select: none;
margin: 0;
padding: 0.15rem 0;
}
.mm-mtm__addon-input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.mm-mtm__addon-box {
flex: 0 0 16px;
width: 16px;
height: 16px;
border: 1.5px solid #c8c2b5;
border-radius: 3px;
display: inline-flex;
align-items: center;
justify-content: center;
color: transparent;
background: white;
transition: all 0.15s ease;
}
.mm-mtm__addon-input:checked + .mm-mtm__addon-box {
background: var(--mm-gold);
border-color: var(--mm-gold);
color: white;
}
.mm-mtm__addon-input:focus-visible + .mm-mtm__addon-box {
box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.25);
}
.mm-mtm__addon-label {
display: inline-flex;
align-items: center;
gap: 0.4rem;
line-height: 1.3;
}
.mm-mtm__addon-price {
color: var(--mm-gold);
font-weight: 600;
font-size: 0.72rem;
}
/* ── Pills ── */
.mm-mtm__pills {
display: flex;
gap: 0.6rem;
flex-wrap: wrap;
}
.mm-mtm__pills--compact { margin-bottom: 0.6rem; }
.mm-mtm__pill {
background: white;
border: 1px solid #ddd;
border-radius: 999px;
padding: 0.5rem 1rem;
font-size: 0.8rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: inherit;
transition: all 0.15s;
}
.mm-mtm__pill:hover { border-color: var(--mm-charcoal); }
.mm-mtm__pill.is-active {
background: var(--mm-charcoal);
border-color: var(--mm-charcoal);
color: var(--mm-white);
}
.mm-mtm__pill-price {
font-size: 0.7rem;
opacity: 0.8;
}
.mm-mtm__pill.is-active .mm-mtm__pill-price { opacity: 0.9; }
/* ── Step 2: Fabric grid ── */
.mm-mtm__fabric-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 1.25rem;
}
.mm-mtm__fabric-card {
background: white;
border: 1px solid #e8e4db;
border-radius: 6px;
padding: 0;
display: flex;
flex-direction: column;
cursor: pointer;
overflow: hidden;
transition: all 0.2s;
font-family: inherit;
text-align: left;
}
.mm-mtm__fabric-card:hover {
border-color: var(--mm-gold);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.mm-mtm__fabric-card.is-active {
border-color: var(--mm-gold);
box-shadow: 0 0 0 2px var(--mm-gold) inset;
}
.mm-mtm__fabric-image {
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f0ebe0;
}
.mm-mtm__fabric-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mm-mtm__fabric-body {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.9rem 1rem 1rem;
flex: 1; /* fill remaining card height so the price lock-aligns at the bottom */
}
.mm-mtm__fabric-name {
font-family: var(--mm-display);
font-size: 0.95rem;
line-height: 1.3;
}
.mm-mtm__fabric-comp {
font-size: 0.7rem;
color: #888;
letter-spacing: 0.02em;
line-height: 1.45;
}
.mm-mtm__fabric-price {
font-weight: 600;
color: var(--mm-charcoal);
font-size: 0.85rem;
margin-top: auto; /* bottom-align — prices line up across the row regardless of title/composition wrap */
padding-top: 0.5rem;
}
.mm-mtm__fabric-price span {
color: #999;
font-weight: 400;
font-size: 0.75rem;
}
/* ── Step 3: Size fields ── */
.mm-mtm__field {
margin-bottom: 2rem;
}
.mm-mtm__field > label {
display: block;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #666;
margin-bottom: 0.6rem;
font-weight: 600;
}
.mm-mtm__seg {
display: inline-flex;
background: #f1ece0;
border-radius: 999px;
padding: 4px;
gap: 2px;
border: 1px solid rgba(196, 163, 90, 0.18);
}
.mm-mtm__seg-btn {
background: transparent;
border: 0;
padding: 0.55rem 1.4rem;
font-size: 0.82rem;
font-family: inherit;
letter-spacing: 0.02em;
cursor: pointer;
border-radius: 999px;
color: #6b6b66;
transition: all 0.18s ease;
}
.mm-mtm__seg-btn:hover:not(.is-active) {
color: var(--mm-charcoal);
}
.mm-mtm__seg-btn.is-active {
background: white;
color: var(--mm-charcoal);
box-shadow: 0 1px 2px rgba(46, 38, 21, 0.06), 0 2px 6px rgba(46, 38, 21, 0.08);
font-weight: 500;
}
.mm-mtm__num-row {
display: inline-flex;
align-items: center;
gap: 0.65rem;
background: white;
border: 1px solid #d8d3c8;
border-radius: 6px;
padding: 0.4rem 0.85rem;
margin-bottom: 0.85rem;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mm-mtm__num-row:focus-within {
border-color: var(--mm-gold);
box-shadow: 0 0 0 3px rgba(196, 163, 90, 0.12);
}
.mm-mtm__num-row input {
border: 0;
outline: 0;
font-size: 1rem;
width: 5rem;
background: transparent;
font-family: inherit;
color: var(--mm-charcoal);
/* Tone down the native spinner — keep it functional but make it less garish. */
appearance: textfield;
-moz-appearance: textfield;
}
.mm-mtm__num-row input::-webkit-outer-spin-button,
.mm-mtm__num-row input::-webkit-inner-spin-button {
-webkit-appearance: inner-spin-button;
opacity: 0.5;
}
.mm-mtm__unit {
font-size: 0.8rem;
color: #888;
user-select: none;
}
/* ── Range slider — gold fill track + white thumb with gold border.
Mirrors .mm-meterware__range so the design language stays consistent.
The JS controller writes a `--mm-range-fill: NN%` custom property whenever
the value changes, which paints the gold fill up to the thumb. ── */
.mm-mtm__range {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
max-width: 480px;
height: 28px;
background: transparent;
margin: 0;
--mm-range-fill: 0%;
cursor: pointer;
}
.mm-mtm__range:focus { outline: none; }
.mm-mtm__range::-webkit-slider-runnable-track {
height: 4px;
border-radius: 2px;
background: linear-gradient(
to right,
var(--mm-gold) 0%,
var(--mm-gold) var(--mm-range-fill),
#e6e0d2 var(--mm-range-fill),
#e6e0d2 100%
);
}
.mm-mtm__range::-moz-range-track {
height: 4px;
border-radius: 2px;
background: #e6e0d2;
}
.mm-mtm__range::-moz-range-progress {
height: 4px;
border-radius: 2px;
background: var(--mm-gold);
}
.mm-mtm__range::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--mm-white);
border: 2px solid var(--mm-gold);
margin-top: -8px; /* centres the 20px thumb on a 4px track */
box-shadow: 0 1px 3px rgba(46, 38, 21, 0.18);
cursor: grab;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mm-mtm__range::-webkit-slider-thumb:hover,
.mm-mtm__range:focus::-webkit-slider-thumb {
transform: scale(1.12);
box-shadow: 0 2px 8px rgba(46, 38, 21, 0.22), 0 0 0 5px rgba(196, 163, 90, 0.12);
}
.mm-mtm__range::-webkit-slider-thumb:active {
cursor: grabbing;
background: var(--mm-gold);
}
.mm-mtm__range::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--mm-white);
border: 2px solid var(--mm-gold);
box-shadow: 0 1px 3px rgba(46, 38, 21, 0.18);
cursor: grab;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mm-mtm__range::-moz-range-thumb:hover,
.mm-mtm__range:focus::-moz-range-thumb {
transform: scale(1.12);
box-shadow: 0 2px 8px rgba(46, 38, 21, 0.22), 0 0 0 5px rgba(196, 163, 90, 0.12);
}
.mm-mtm__range::-moz-range-thumb:active {
cursor: grabbing;
background: var(--mm-gold);
}
/* Legacy fallback for any range inputs that haven't been migrated to the class. */
.mm-mtm__field input[type="range"]:not(.mm-mtm__range) {
display: block;
width: 100%;
max-width: 480px;
}
.mm-mtm__help {
font-size: 0.78rem;
color: #888;
margin: 0.5rem 0 0;
line-height: 1.5;
}
.mm-mtm__help-chip {
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: #faf9f7;
border-left: 2px solid var(--mm-gold);
font-size: 0.8rem;
color: #555;
border-radius: 3px;
}
/* Inline row that puts the Single Width / Custom segmented control next to
the 1.5× / 2× / 2.5× preset pills when Custom is active. The pills are
hidden via [hidden] on the Single Width side. Wraps to a new row on
narrow screens so nothing collides on mobile. */
.mm-mtm__fullness-row {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.85rem;
}
.mm-mtm__fullness-row .mm-mtm__pills--compact {
margin: 0;
}
.mm-mtm__fullness {
margin-top: 0.75rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.mm-mtm__fullness-label {
font-size: 0.8rem;
color: var(--mm-gold);
font-weight: 600;
}
/* ── Eyelet swatch pills ── */
.mm-mtm__swatch-pills { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.mm-mtm__swatch {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: white;
border: 1px solid #ddd;
border-radius: 999px;
padding: 0.45rem 1rem;
font-size: 0.8rem;
font-family: inherit;
cursor: pointer;
transition: all 0.15s;
}
.mm-mtm__swatch:hover { border-color: var(--mm-charcoal); }
.mm-mtm__swatch.is-active {
border-color: var(--mm-gold);
box-shadow: 0 0 0 1px var(--mm-gold);
}
.mm-mtm__swatch-dot {
width: 1.1rem;
height: 1.1rem;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.1);
display: inline-block;
}
.mm-mtm__swatch-dot--black { background: #1a1a1a; }
.mm-mtm__swatch-dot--chrome { background: linear-gradient(135deg, #d4d4d4, #f0f0f0, #b8b8b8); }
.mm-mtm__swatch-dot--satin { background: linear-gradient(135deg, #c5b8a1, #e4d7be); }
.mm-mtm__swatch-dot--white { background: #fff; box-shadow: inset 0 0 0 1px #ddd; }
.mm-mtm__tile-svg { color: var(--mm-charcoal); opacity: 0.55; transition: opacity 0.2s, transform 0.2s; }
.mm-mtm__tile.is-active .mm-mtm__tile-svg { opacity: 1; transform: scale(1.04); }
.mm-mtm__tile:hover:not(.is-active) .mm-mtm__tile-svg { opacity: 0.75; }
/* ── Step 4: Lining cards ── */
.mm-mtm__lining-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
}
.mm-mtm__lining-card {
background: white;
border: 1px solid #e8e4db;
border-radius: 6px;
padding: 1.25rem;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 0.5rem;
font-family: inherit;
text-align: left;
transition: all 0.2s;
}
.mm-mtm__lining-card:hover {
border-color: var(--mm-gold);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.mm-mtm__lining-card.is-active {
border-color: var(--mm-gold);
background: #faf9f7;
box-shadow: 0 0 0 2px var(--mm-gold) inset;
}
.mm-mtm__lining-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
}
.mm-mtm__lining-name {
font-family: var(--mm-display);
font-size: 1.05rem;
}
.mm-mtm__lining-price {
font-size: 0.8rem;
color: var(--mm-gold);
font-weight: 600;
}
.mm-mtm__lining-desc {
font-size: 0.8rem;
color: #666;
line-height: 1.5;
}
/* ── Step 5: Review + dropzone ── */
.mm-mtm__review { margin-bottom: 2rem; }
.mm-mtm__review-card {
background: white;
border: 1px solid #e8e4db;
border-radius: 6px;
padding: 1.5rem;
display: grid;
grid-template-columns: 120px 1fr;
gap: 1.5rem;
}
.mm-mtm__review-fabric img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 4px;
}
.mm-mtm__review-specs {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem 1.5rem;
}
.mm-mtm__review-specs > div { border-bottom: 1px dashed #eee; padding-bottom: 0.4rem; }
.mm-mtm__review-specs dt {
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #888;
margin: 0 0 0.15rem;
}
.mm-mtm__review-specs dd {
margin: 0;
font-size: 0.88rem;
}
.mm-mtm__review-total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-top: 1rem;
padding: 1rem 1.5rem;
background: var(--mm-charcoal);
color: var(--mm-white);
border-radius: 6px;
}
.mm-mtm__review-total strong { font-size: 1.35rem; font-family: var(--mm-display); font-weight: 400; }
.mm-mtm__dropzone {
border: 2px dashed #d7cfbe;
border-radius: 6px;
padding: 2rem 1.5rem;
text-align: center;
cursor: pointer;
transition: all 0.2s;
color: #666;
background: white;
}
.mm-mtm__dropzone:hover, .mm-mtm__dropzone.is-hover {
border-color: var(--mm-gold);
background: #faf9f7;
}
.mm-mtm__dropzone.is-uploading { opacity: 0.6; }
.mm-mtm__dropzone svg { color: #b8aa92; margin-bottom: 0.5rem; }
.mm-mtm__dropzone p { margin: 0; font-size: 0.85rem; line-height: 1.5; }
.mm-mtm__dropzone p span { display: block; font-size: 0.75rem; color: #999; margin-top: 0.2rem; }
.mm-mtm__dropzone-link { color: var(--mm-gold); text-decoration: underline; display: inline !important; }
.mm-mtm__photo-preview {
margin-top: 1rem;
position: relative;
display: inline-block;
}
.mm-mtm__photo-preview img {
max-width: 240px;
max-height: 180px;
border-radius: 4px;
display: block;
}
.mm-mtm__photo-remove {
position: absolute;
top: 6px;
right: 6px;
background: rgba(0,0,0,0.75);
color: white;
border: 0;
border-radius: 3px;
padding: 0.2rem 0.55rem;
font-size: 0.7rem;
cursor: pointer;
font-family: inherit;
}
.mm-mtm__photo-error {
color: #b85050;
font-size: 0.85rem;
margin: 0;
}
/* ── Summary (sticky right column) — sits below the sticky stepper bar ── */
.mm-mtm__summary {
position: sticky;
top: 10rem; /* clears the 145px sticky stepper bar plus a little breathing room */
background: white;
border: 1px solid #e8e4db;
border-radius: 6px;
padding: 1.5rem;
}
.mm-mtm__summary-title {
font-family: var(--mm-display);
font-size: 1rem;
font-weight: 400;
margin: 0 0 1rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid #eee;
letter-spacing: 0.05em;
}
.mm-mtm__summary-list { margin: 0 0 1rem; }
.mm-mtm__summary-list > div {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.45rem 0;
border-bottom: 1px dashed #f0ebe0;
font-size: 0.82rem;
gap: 1rem;
}
.mm-mtm__summary-list dt {
color: #888;
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
margin: 0;
flex-shrink: 0;
}
.mm-mtm__summary-list dd {
margin: 0;
text-align: right;
color: var(--mm-charcoal);
}
.mm-mtm__summary-breakdown {
font-size: 0.78rem;
color: #666;
margin-bottom: 0.75rem;
}
.mm-mtm__summary-breakdown > div {
display: flex;
justify-content: space-between;
padding: 0.25rem 0;
}
.mm-mtm__summary-total {
display: flex;
justify-content: space-between;
align-items: baseline;
padding-top: 0.75rem;
border-top: 1px solid #eee;
}
.mm-mtm__summary-total span {
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #666;
}
.mm-mtm__summary-total strong {
font-family: var(--mm-display);
font-size: 1.35rem;
font-weight: 400;
color: var(--mm-charcoal);
}
/* ── Sticky footer ── */
.mm-mtm__footer {
position: fixed;
bottom: var(--mm-admin-bar-offset, 0);
left: 0;
right: 0;
background: white;
border-top: 1px solid #e8e4db;
/* Side padding scales with viewport so the Back / Total / Next row
sits inside the same 1200px column as the configurator content
above it. Without this, on wide monitors (e.g. 2560px) Back and
Next ended up at the absolute screen edges, miles from where the
user's eyes were tracking the fabric grid. The `max()` keeps the
minimum 1.5rem padding for narrow screens. */
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: max(1.5rem, calc((100vw - 1200px) / 2));
padding-right: max(1.5rem, calc((100vw - 1200px) / 2));
box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
z-index: 80;
}
.mm-mtm__footer-back {
background: transparent;
border: 1px solid #ddd;
color: #666;
padding: 0.6rem 1.25rem;
border-radius: 3px;
cursor: pointer;
font-family: inherit;
font-size: 0.78rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mm-mtm__footer-back:hover { border-color: var(--mm-charcoal); color: var(--mm-charcoal); }
.mm-mtm__footer-total {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.15rem;
flex-grow: 1;
}
.mm-mtm__footer-total span {
font-size: 0.65rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #888;
}
.mm-mtm__footer-total strong {
font-family: var(--mm-display);
font-size: 1.25rem;
font-weight: 400;
}
.mm-mtm__footer-next, .mm-mtm__footer-add {
/* Admin-panel navy when the form is complete and the button is
enabled — distinguishes it from the otherwise charcoal CTA
palette so the "you can proceed" affordance reads more clearly.
Add-to-Cart keeps its gold tint via the override below. */
background: #16213e;
color: var(--mm-white);
border: 0;
padding: 0.75rem 1.75rem;
border-radius: 3px;
cursor: pointer;
font-family: inherit;
font-size: 0.78rem;
letter-spacing: 0.15em;
text-transform: uppercase;
transition: all 0.15s;
}
.mm-mtm__footer-next:hover, .mm-mtm__footer-add:hover {
background: var(--mm-gold);
}
.mm-mtm__footer-next:disabled {
background: #ccc;
cursor: not-allowed;
}
.mm-mtm__footer-add { background: var(--mm-gold); }
.mm-mtm__empty {
padding: 3rem 1rem;
text-align: center;
color: #888;
background: #faf9f7;
border-radius: 6px;
}
.mm-mtm__empty a { color: var(--mm-gold); }
/* ────────────────────────────────────────────────────────────────
Mobile compaction (≤640px)
────────────────────────────────────────────────────────────────
The configurator was sized for desktop; on a 375px iPhone the hero
alone ate ~60% of the viewport before the user saw any tile, and
each tile was ~250px tall (130px illustration + generous padding).
This block tightens hero, stepper, panel head, and tile densities
so a phone user sees actual product content above the fold. Only
sizes change — no layout rules switch direction. Desktop / tablet
are untouched. */
@media (max-width: 640px) {
.mm-mtm {
padding: 1.25rem 1rem 6rem;
}
/* Hero: smaller title + intro, tighter spacing. */
.mm-mtm__hero { margin-bottom: 1.25rem; }
.mm-mtm__title {
font-size: clamp(1.2rem, 4.08vw, 1.53rem);
margin-bottom: 0.4rem;
}
.mm-mtm__intro {
font-size: 0.85rem;
line-height: 1.5;
}
.mm-mtm__type-toggle {
margin-top: 0.85rem;
font-size: 0.7rem;
letter-spacing: 0.14em;
}
.mm-mtm__type-toggle-link { padding: 0.3rem 0.4rem; }
/* Stepper: smaller circles, tighter padding, less margin below. */
.mm-mtm__steps-bar {
padding: 0.75rem 0.5rem;
margin-bottom: 1rem;
}
.mm-mtm__steps { padding: 0 0.25rem; gap: 0; }
.mm-mtm__step { gap: 0.4rem; }
.mm-mtm__step-num {
width: 30px;
height: 30px;
font-size: 0.8rem;
}
.mm-mtm__step-name {
font-size: 0.55rem;
letter-spacing: 0.1em;
}
.mm-mtm__step-line {
margin: 14px 0.3rem 0;
max-width: 40px;
min-width: 8px;
}
/* Panel header: less dominant. */
.mm-mtm__panel-head { margin-bottom: 1.25rem; }
.mm-mtm__panel-head h2 { font-size: 1.2rem; }
.mm-mtm__panel-head p { font-size: 0.825rem; }
/* Tiles: switch to a horizontal layout on phones — illustration on the
left, text on the right. The previous vertical layout left wide
empty space beside the illustration AND made each tile ~240px tall
(so the user only saw one tile + a peek of the next per screen).
Horizontal puts each tile at ~110px and lets 4–5 fit per viewport.
The tile's direct children are: illustration, name, desc, price (no
wrapper element). To stack name/desc/price beside the illustration
we use a 2-column grid: column 1 holds the illustration spanning
all rows, column 2 holds name/desc/price stacking down. */
.mm-mtm__tile {
display: grid;
grid-template-columns: 75px 1fr;
column-gap: 0.85rem;
row-gap: 0.15rem;
align-items: start;
padding: 0.75rem 0.85rem 0.85rem;
align-content: center;
}
.mm-mtm__tile-illus {
grid-column: 1;
grid-row: 1 / span 3;
align-self: center;
width: 75px;
height: 75px;
margin-bottom: 0;
}
.mm-mtm__tile-name {
grid-column: 2;
grid-row: 1;
font-size: 1rem;
line-height: 1.25;
}
.mm-mtm__tile-desc {
grid-column: 2;
grid-row: 2;
font-size: 0.75rem;
line-height: 1.35;
/* Cap at 2 lines so a verbose copy line doesn't grow the tile. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.mm-mtm__tile-price {
grid-column: 2;
grid-row: 3;
font-size: 0.78rem;
margin-top: 0.15rem;
}
/* Variant picker (pinch pleat / pencil pleat / cottage pleat) drops
below the tile in flow on phones — the absolute-positioned desktop
variant only kicks in at min-width: 600px so this is already the
default, but we explicitly tighten the padding here. */
.mm-mtm__tile-variants { margin-top: 6px; padding: 0.65rem 0.85rem; }
/* Fabric grid: 2 columns on phones so customers can compare swatches. */
.mm-mtm__fabric-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
}
.mm-mtm__fabric-body { padding: 0.65rem 0.75rem 0.75rem; gap: 0.25rem; }
.mm-mtm__fabric-name { font-size: 0.85rem; }
.mm-mtm__fabric-comp { font-size: 0.65rem; }
.mm-mtm__fabric-price { font-size: 0.78rem; padding-top: 0.35rem; }
.mm-mtm__fabric-price span { font-size: 0.7rem; }
/* Lining cards: tighten padding slightly. */
.mm-mtm__lining-card { padding: 1rem 1.1rem; }
.mm-mtm__lining-name { font-size: 1.05rem; }
.mm-mtm__lining-price { font-size: 0.8rem; }
.mm-mtm__lining-desc { font-size: 0.8rem; line-height: 1.5; }
/* Review card: stack the fabric thumbnail above the spec grid on
very narrow viewports so each spec block has decent width. */
.mm-mtm__review-card { padding: 1rem; gap: 1rem; }
.mm-mtm__review-fabric img {
width: 100%;
height: 160px;
object-fit: cover;
}
.mm-mtm__review-specs { font-size: 0.85rem; gap: 0.75rem 1rem; }
.mm-mtm__review-specs dt { font-size: 0.65rem; }
.mm-mtm__review-specs dd { font-size: 0.9rem; }
/* Sticky footer: less padding so we don't lose 90px of viewport to it. */
.mm-mtm__footer {
padding: 0.65rem 0.85rem;
gap: 0.5rem;
}
.mm-mtm__footer-back {
padding: 0.5rem 0.75rem;
font-size: 0.7rem;
letter-spacing: 0.08em;
}
.mm-mtm__footer-total span { font-size: 0.6rem; letter-spacing: 0.1em; }
.mm-mtm__footer-total strong { font-size: 1.05rem; }
.mm-mtm__footer-next, .mm-mtm__footer-add {
padding: 0.6rem 1rem;
font-size: 0.72rem;
letter-spacing: 0.1em;
}
/* Summary panel goes static at <900px; tighten it for phones. */
.mm-mtm__summary { padding: 1rem 1.1rem; }
}
/* ════════════════════════════════════════════════════════════════
Turbo page transitions
════════════════════════════════════════════════════════════════
Turbo replaces the document on every internal navigation.
By default that swap is instant — the new content slams in.
These rules add a subtle 120ms fade so the eye reads it as a
smooth replacement rather than a hard reload. The progress bar
(visible only on slow connections, after a 500ms delay) is
re-coloured to match the brand gold instead of the default blue.
════════════════════════════════════════════════════════════════ */
/* Fade out while Turbo fetches the next page; fade back in
once the new body is rendered. Turbo's lifecycle attributes:
data-turbo-visit-direction (forward|back|restore) on
turbo-visit / turbo-restore — events
We use the simple `.turbo-loading` body-class approach; the
transition keys off `body` opacity which CSS animates regardless
of which body element is actually present. */
body {
transition: opacity 0.12s ease-out;
}
.turbo-progress-bar {
background: var(--mm-gold, #C4A35A) !important;
height: 2px !important;
}
/* When a `turbo:before-render` listener (registered in app.js) flips
the body to opacity 0 just before the swap, the new body picks up
`opacity: 0` from inline style and fades back to 1 via this rule. */
/* ════════════════════════════════════════════════════════════════
Changelog
════════════════════════════════════════════════════════════════ */
.mm-changelog {
max-width: 760px;
margin: 0 auto;
padding: 4rem 1.5rem 6rem;
font-family: var(--mm-body);
color: var(--mm-charcoal);
}
.mm-changelog__hero {
text-align: center;
margin-bottom: 3.5rem;
}
.mm-changelog__kicker {
font-size: 0.7rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--mm-gold);
margin: 0 0 0.75rem;
}
.mm-changelog__title {
font-family: var(--mm-display);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 400;
margin: 0 0 0.75rem;
letter-spacing: 0.02em;
}
.mm-changelog__intro {
color: #666;
font-size: 0.95rem;
line-height: 1.65;
margin: 0;
}
.mm-changelog__empty {
text-align: center;
color: #888;
padding: 4rem 0;
}
.mm-changelog__list {
list-style: none;
padding: 0;
margin: 0;
border-left: 1px solid #e8e4db;
}
.mm-changelog__group {
position: relative;
padding: 0 0 2rem 1.75rem;
}
.mm-changelog__group::before {
content: '';
position: absolute;
left: -5px;
top: 8px;
width: 9px;
height: 9px;
background: var(--mm-gold);
border-radius: 50%;
box-shadow: 0 0 0 4px white;
}
.mm-changelog__date {
display: block;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-gold);
font-weight: 600;
margin: 0 0 1rem;
}
.mm-changelog__entries {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.mm-changelog__entry {
background: white;
border: 1px solid #ece8df;
border-radius: 6px;
padding: 1.25rem 1.4rem;
transition: border-color 0.15s, box-shadow 0.15s;
}
.mm-changelog__entry:hover {
border-color: var(--mm-gold);
box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}
.mm-changelog__entry-meta {
display: flex;
gap: 0.85rem;
align-items: center;
margin-bottom: 0.45rem;
font-size: 0.7rem;
color: #888;
}
.mm-changelog__hash {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
background: #f4efe4;
padding: 0.1rem 0.45rem;
border-radius: 3px;
color: #666;
letter-spacing: 0.02em;
}
.mm-changelog__author {
font-style: italic;
}
.mm-changelog__subject {
font-family: var(--mm-display);
font-size: 1.05rem;
font-weight: 400;
margin: 0 0 0.35rem;
color: var(--mm-charcoal);
line-height: 1.4;
}
.mm-changelog__body {
margin: 0.6rem 0 0;
font-size: 0.85rem;
line-height: 1.65;
color: #555;
}
/* ─── Block: newsletter ────────────────────────────────────────────────── */
/* Set like the homepage's classic cards and the footer: the words in small
capitals of the heading face, the fields as lines with their labels
above them, and a square outlined button — all on one line on a wide
screen, stacked on a phone. */
.mm-block-newsletter {
padding: 5.5rem 0;
background: var(--mm-light-grey);
}
.mm-block-newsletter__inner {
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.mm-block-newsletter__title {
font-family: var(--mm-title);
font-size: clamp(1.6rem, 2.4vw, 2.1rem);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #555;
margin-bottom: 0.9rem;
}
.mm-block-newsletter__subtitle {
font-family: var(--mm-body);
font-size: 1.02rem;
line-height: 1.7;
color: #6b6b6b;
max-width: 36rem;
margin: 0 auto 2.75rem;
}
.mm-block-newsletter__form {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
align-items: end;
gap: 1.5rem 2rem;
text-align: left;
}
.mm-block-newsletter__row { display: flex; flex-direction: column; gap: 0.35rem; }
.mm-block-newsletter__label {
font-size: 0.68rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #8f8a83;
}
.mm-block-newsletter__input {
width: 100%;
padding: 0.45rem 0 0.55rem;
border: none;
border-bottom: 1px solid var(--mm-charcoal);
border-radius: 0;
background: transparent;
font-family: var(--mm-body);
font-size: 1rem;
color: var(--mm-charcoal);
}
.mm-block-newsletter__input:focus {
outline: none;
border-bottom-color: var(--mm-gold);
box-shadow: 0 1px 0 var(--mm-gold);
}
.mm-block-newsletter__actions { display: flex; }
.mm-block-newsletter__submit {
min-width: 11rem;
padding: 0.75rem 2rem;
background: transparent;
border: 1px solid var(--mm-charcoal);
border-radius: 0;
color: var(--mm-charcoal);
font-family: var(--mm-body);
font-size: 0.95rem;
letter-spacing: 0.04em;
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
}
.mm-block-newsletter__submit:hover,
.mm-block-newsletter__submit:focus-visible {
background: var(--mm-charcoal);
color: #fff;
}
/* The captcha appears once someone starts typing an address: a line of
its own under the fields. */
.mm-block-newsletter__row--captcha { grid-column: 1 / -1; grid-row: 2; }
.mm-block-newsletter__row--captcha > .mit-captcha { --mit-captcha-font-size: 0.9rem; }
@media (max-width: 767.98px) {
.mm-block-newsletter { padding: 4rem 0; }
.mm-block-newsletter__subtitle { margin-bottom: 2rem; }
.mm-block-newsletter__form { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.mm-block-newsletter__row--captcha { grid-row: auto; }
.mm-block-newsletter__actions { justify-content: center; margin-top: 0.4rem; }
}
.mm-block-newsletter__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.mm-block-newsletter__flash {
margin-bottom: 1.5rem;
padding: 0.8rem 1.2rem;
border-radius: 4px;
text-align: center;
}
.mm-block-newsletter__flash--success {
background: #e8f1ea;
color: #355c41;
}
.mm-block-newsletter__flash--error {
background: #f6e6e6;
color: #8b3a3a;
}
/* ─── Block: feature grid (Pattern Play / Layered Luxury / Work With Us) ── */
/* White, against the page's warm off-white. The homepage is a stack of
full-width sections in one tone, which runs together into a single sheet;
lifting the picture grids out of it gives the eye somewhere to break. */
.mm-block-feature-grid {
padding: 5rem 0;
background: #fff;
}
.mm-block-feature-grid__heading {
font-family: var(--mm-font-display, inherit);
text-transform: uppercase;
letter-spacing: 0.16em;
color: #888;
font-size: 1.1rem;
margin-bottom: 3rem;
}
.mm-block-feature-grid__row {
--feature-divider: 1px solid #e6e2da;
}
.mm-block-feature-grid--2-up .mm-block-feature-grid__col + .mm-block-feature-grid__col {
border-left: var(--feature-divider);
}
@media (max-width: 767px) {
.mm-block-feature-grid--2-up .mm-block-feature-grid__col + .mm-block-feature-grid__col {
border-left: none;
}
}
.mm-block-feature-grid__card {
height: 100%;
display: flex;
flex-direction: column;
}
.mm-block-feature-grid__link {
display: block;
}
.mm-block-feature-grid__image {
aspect-ratio: 1 / 1;
overflow: hidden;
background: #f3f0ea;
margin-bottom: 1.5rem;
}
.mm-block-feature-grid__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 400ms ease;
}
.mm-block-feature-grid__link:hover .mm-block-feature-grid__image img {
transform: scale(1.03);
}
.mm-block-feature-grid--3-up .mm-block-feature-grid__image {
aspect-ratio: 4 / 3;
margin-bottom: 1.25rem;
}
/* Editorial "featured middle" — the centre card in a 3-up grid gets
a taller portrait image and a slight lift above the side cards, so
it reads as the headline while the two flanking it support. Mobile
stacks back to even sizing since the lift doesn't make sense
one-column. */
.mm-block-feature-grid--3-up .mm-block-feature-grid__col:nth-child(2) .mm-block-feature-grid__image {
aspect-ratio: 3 / 4;
}
@media (min-width: 768px) {
/* The centre card's lift is taken out of whatever sits above it, and
what sat above it was the section heading — the middle image rode up
over the text and hid it completely. The heading needs room for the
lift on top of its own gap. 9rem is measured, not derived: the lift
and the row's gutter offset together swallow 6rem of it, leaving the
3rem of air the design asks for. */
.mm-block-feature-grid--3-up .mm-block-feature-grid__heading {
margin-bottom: 9rem;
}
.mm-block-feature-grid--3-up .mm-block-feature-grid__col:nth-child(2) {
margin-top: -3rem;
}
.mm-block-feature-grid--3-up .mm-block-feature-grid__col:nth-child(2) .mm-block-feature-grid__image {
margin-bottom: 1.75rem;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
}
.mm-block-feature-grid__title {
font-family: var(--mm-font-display, inherit);
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.95rem;
color: #555;
margin-bottom: 0.75rem;
font-weight: 400;
}
.mm-block-feature-grid__title a {
color: inherit;
text-decoration: none;
}
.mm-block-feature-grid__title a:hover {
color: #222;
}
.mm-block-feature-grid__description {
color: #777;
font-size: 0.95rem;
line-height: 1.65;
max-width: 420px;
margin: 0 auto;
}
/* ── Horizontal product scroller (block) ──
Used by the product_grid block on the homepage. The block field
"limit" sets visible cards per row (CSS variable --mm-visible) and
the server fetches a larger pool so users can scroll horizontally.
Native scroll-snap drives the snapping; the Stimulus controller
only adds the prev/next button affordance. */
.mm-block-products__scroller-wrap {
position: relative;
/* Room for the negative-offset nav buttons to peek out. */
padding: 0 8px;
}
.mm-block-products__scroller {
display: grid;
grid-auto-flow: column;
/* Width of each card = (container - (N-1) gaps) / N */
grid-auto-columns: calc((100% - (var(--mm-visible, 4) - 1) * 1.5rem) / var(--mm-visible, 4));
gap: 1.5rem;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: thin;
scrollbar-color: #d6cdb8 transparent;
/* Reserve scrollbar space so card heights don't jitter when the
scrollbar appears on hover-snap browsers. */
padding-bottom: 0.75rem;
}
.mm-block-products__scroller::-webkit-scrollbar {
height: 6px;
}
.mm-block-products__scroller::-webkit-scrollbar-thumb {
background: #d6cdb8;
border-radius: 3px;
}
.mm-block-products__item {
scroll-snap-align: start;
min-width: 0; /* allow children with min-content to shrink inside grid track */
}
.mm-block-products__nav {
position: absolute;
top: 35%;
transform: translateY(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 1px solid #e6e2da;
cursor: pointer;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
color: #4a3f1f;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
transition: opacity 0.2s, background 0.2s, transform 0.15s ease;
}
.mm-block-products__nav:hover:not(:disabled) {
background: #fff;
transform: translateY(-50%) scale(1.05);
}
.mm-block-products__nav:disabled {
opacity: 0;
pointer-events: none;
}
.mm-block-products__nav--prev { left: -8px; }
.mm-block-products__nav--next { right: -8px; }
/* Mobile: snap to 2 per row, hide nav (native touch-scroll). */
@media (max-width: 767px) {
.mm-block-products__scroller {
grid-auto-columns: calc((100% - 1rem) / 2);
gap: 1rem;
}
.mm-block-products__nav {
display: none;
}
}
/* Mixed-category carousels (home-page collection blocks) put fabric (4:5),
paint (4:5) and cushion (1:1) cards in a single row. The shorter cushion
crop made its title sit visibly higher than the fabric/paint titles next
to it. Force a uniform 4:5 image wrap here and let cushions render with
object-fit: contain — they're shot on white so the letterbox blends. */
.mm-block-products .mm-product-card--cushion .card-img-top {
aspect-ratio: 4 / 5;
object-fit: contain;
background-color: #fff;
}
/* Product care label — small section under the description on the
product detail page. Quiet styling so it sits comfortably below
the heavier copy blocks above. */
.product-care__heading {
font-family: var(--mm-heading);
font-size: 0.95rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--mm-charcoal, #2c2520);
margin: 0 0 0.4rem;
}
.product-care__body {
font-size: 0.92rem;
line-height: 1.6;
color: #6b5e3f;
white-space: pre-line;
}
/* Shop page — Group-by-colour rendering. Active when ?order=color_group
on a colourable category. Each colour family gets a section header
with a tinted swatch + family label + product count. */
.mm-shop-group {
margin-bottom: 3rem;
}
.mm-shop-group:last-child {
margin-bottom: 0;
}
.mm-shop-group__header {
display: flex;
align-items: center;
gap: 0.75rem;
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #e6e2da;
}
.mm-shop-group__swatch {
display: inline-block;
width: 22px;
height: 22px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}
.mm-shop-group__title {
font-family: var(--mm-heading);
font-size: 1.5rem;
margin: 0;
color: var(--mm-charcoal, #2c2520);
flex: 1;
}
.mm-shop-group__count {
font-size: 0.85rem;
color: #8e8467;
background: #f6f5f2;
padding: 2px 10px;
border-radius: 12px;
letter-spacing: 0.04em;
}
/* ───────────────────────────────────────────────────────────────────
Collection Showcase block — sticky hero image + scrolling product grid
(Birdie-Fortescue-style layout).
The image side has `position: sticky` so it pins to the top of the
viewport while the user scrolls past the products column. The block
uses a CSS grid with `align-items: start` — that's what lets `position:
sticky` actually do its job inside a grid track.
The `--image-left` / `--image-right` modifier flips the column order
via `grid-template-areas`, NOT `flex-direction: row-reverse`, so the
DOM order stays image-first (better for screen readers — image with
caption first, then the gallery).
─────────────────────────────────────────────────────────────────── */
.mm-block-collection-showcase {
padding: clamp(2.5rem, 6vw, 5rem) 0;
}
.mm-block-collection-showcase__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-areas: "hero products";
gap: clamp(1rem, 2.4vw, 2.5rem);
/* IMPORTANT: do NOT set `align-items: start` here. Default `stretch`
lets the hero aside grow to the height of the products column,
which is what gives `position: sticky` somewhere to pin within. */
max-width: 1440px;
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem);
}
.mm-block-collection-showcase--image-right .mm-block-collection-showcase__inner {
grid-template-areas: "products hero";
}
.mm-block-collection-showcase__hero {
grid-area: hero;
/* The aside stretches to the products column's height (default grid
align-items: stretch). Its inner wrapper carries `position: sticky`
so the image pins near the top of the viewport while the products
column scrolls past. */
}
.mm-block-collection-showcase__hero-sticky {
position: sticky;
/* Header is ~80px on desktop; gives the image a little breathing room
below it when pinned. Calculated from the existing nav height
custom property when present (admin bar pushes it down). */
top: calc(var(--mm-stack-top, 5rem) + 1rem);
}
.mm-block-collection-showcase__figure {
position: relative;
margin: 0;
overflow: hidden;
aspect-ratio: 3 / 4;
background: #f5efe3;
}
.mm-block-collection-showcase__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s ease;
}
.mm-block-collection-showcase__hero-sticky:hover .mm-block-collection-showcase__img {
transform: scale(1.015);
}
.mm-block-collection-showcase__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-align: center;
padding: clamp(1rem, 3vw, 2rem);
/* Subtle gradient so light overlay text stays readable even on
lighter images. Skipped on dark-tone variant. */
background: linear-gradient(180deg, rgba(0, 0, 0, 0.0) 35%, rgba(0, 0, 0, 0.25) 100%);
color: #fff;
pointer-events: none;
}
.mm-block-collection-showcase__overlay > * {
pointer-events: auto;
}
.mm-block-collection-showcase__figure--dark .mm-block-collection-showcase__overlay {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.0) 35%, rgba(255, 255, 255, 0.55) 100%);
color: var(--mm-charcoal, #2c2520);
}
.mm-block-collection-showcase__eyebrow {
font-family: var(--mm-sans, 'Inter', sans-serif);
font-size: clamp(0.7rem, 0.9vw, 0.85rem);
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.92;
}
.mm-block-collection-showcase__title {
font-family: var(--mm-heading);
font-size: clamp(1.36rem, 2.72vw, 2.38rem);
font-weight: 400;
line-height: 1.05;
margin: 0;
/* Inherit from the overlay so the title follows the light/dark tone
setting. Without this, the global h2 colour (mm-charcoal) wins and
the title stays dark even on a light-tone overlay. */
color: inherit;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mm-block-collection-showcase__cta {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--mm-sans, 'Inter', sans-serif);
font-size: clamp(0.75rem, 1vw, 0.9rem);
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
color: inherit;
padding: 0.4rem 0;
margin-top: 0.4rem;
position: relative;
}
.mm-block-collection-showcase__cta-line {
display: inline-block;
width: 2.5rem;
height: 1px;
background: currentColor;
transition: width 0.25s ease;
}
.mm-block-collection-showcase__cta:hover .mm-block-collection-showcase__cta-line {
width: 4rem;
}
.mm-block-collection-showcase__cta--placeholder {
opacity: 0.6;
font-style: italic;
}
/* Empty / placeholder figures shown only in admin so editors notice. */
.mm-block-collection-showcase__figure--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: #8e8467;
font-style: italic;
border: 2px dashed #d6cfb9;
}
.mm-block-collection-showcase__products {
grid-area: products;
display: grid;
grid-template-columns: repeat(var(--mm-cs-cols, 2), minmax(0, 1fr));
gap: clamp(0.75rem, 1.8vw, 1.5rem);
}
.mm-block-collection-showcase__product {
min-width: 0;
}
/* Cards inside the showcase block keep their normal proportions but
nudge the body padding slightly tighter — this layout already feels
dense vs the wider product_grid. */
.mm-block-collection-showcase__product .mm-product-card .card-body {
padding: 0.85rem 0.5rem 0.25rem;
}
/* Drop the 2.5em title min-height in showcase context. With aspect
ratios normalised below, both cards in a row have identical image
heights → identical card-body Y → titles naturally align. The
reserved 2nd line was just opening a visible empty gap above the
price for one-line names. */
.mm-block-collection-showcase__product .mm-product-card .card-title {
min-height: 0;
}
/* Force all product images in the showcase block to the SAME aspect
ratio so cushion (default 1:1), paint (4:5) and fabric (4:5) cards
share image height — and therefore body Y position and title
baseline. Cushions get letterboxed onto white (object-fit: contain)
which matches the existing product_grid behaviour exactly. Without
this, .card-body { flex: 1 1 auto } fills different amounts of
remaining space per card and titles end up at different heights. */
.mm-block-collection-showcase__product .mm-product-card .card-img-top {
aspect-ratio: 4 / 5;
object-fit: contain;
background-color: #fff;
}
/* White card background extending under the name+price area. Without
this, the product photo's white background reads as a separate
floating rectangle against the cream page bg, with a hard edge
where the image stops and the text-on-cream begins. White-throughout
makes the card read as one tile and softens that boundary. The base
`.mm-product-card .card-body { background: transparent }` is
overridden here for showcase context only — product_grid keeps its
transparent body so the home page's horizontal scroller still shows
the page bg under each card. */
.mm-block-collection-showcase__product .mm-product-card {
background-color: #fff;
}
.mm-block-collection-showcase__product .mm-product-card .card-body {
background-color: #fff;
}
/* Shop browse pages (/shop and category pages) mix product types in a
single Bootstrap grid — vases (cushion mode, 1:1) next to tablecloths
(default, 4:5), etc. Same misalignment problem as the showcase: cards
are equal height (Bootstrap row stretch + h-100), but card-body fills
different amounts of remaining space, so titles end up at different Y.
Force the same 4:5 frame + contain so image heights match across all
products in a row. Scoped via the wrapper's data-controller so only
the browse pages get this — the product detail page and admin grids
keep their per-product natural ratios. */
[data-controller~="shop-results"] .mm-product-card .card-img-top {
aspect-ratio: 4 / 5;
object-fit: contain;
background-color: #fff;
}
.mm-block-collection-showcase__empty {
grid-column: 1 / -1;
padding: 2rem;
text-align: center;
color: #8e8467;
background: #f6f5f2;
border: 1px dashed #d6cfb9;
border-radius: 4px;
}
/* Tablet — drop the inner product grid to 1 column at this width so the
cards don't get postage-stamp small; the image stays sticky next to
them. The `--mm-cs-cols` custom property is preserved at 2 in inline
style but our @media rule overrides via the grid-template-columns
shorthand below. */
@media (max-width: 991px) {
.mm-block-collection-showcase__products {
grid-template-columns: minmax(0, 1fr);
}
}
/* Mobile — stack vertically. The hero loses its sticky behaviour
because phone viewports are too short for sticky to feel useful
(the user would just stare at a pinned image for half the scroll). */
@media (max-width: 767px) {
.mm-block-collection-showcase__inner {
grid-template-columns: minmax(0, 1fr);
grid-template-areas:
"hero"
"products";
gap: 1.5rem;
}
.mm-block-collection-showcase--image-right .mm-block-collection-showcase__inner {
/* Same as default on mobile — image always on top when stacked. */
grid-template-areas:
"hero"
"products";
}
.mm-block-collection-showcase__hero-sticky {
position: static;
top: auto;
}
.mm-block-collection-showcase__figure {
aspect-ratio: 4 / 5;
}
.mm-block-collection-showcase__products {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ============================================================
Our Story page (templates/page/story_of_linen.html.twig)
============================================================ */
/* — Hero: full-bleed flax-field image with overlay title (mirrors MM Studio) — */
.mm-story-hero {
position: relative;
width: 100%;
margin: 0;
height: 70vh;
min-height: 480px;
background-image: url('/uploads/pages/our-story/hero-flax-field.jpg');
background-size: cover;
background-position: center 65%;
display: flex;
align-items: flex-end;
color: #fff;
}
.mm-story-hero::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(40, 38, 34, 0.05) 0%, rgba(40, 38, 34, 0.35) 100%);
}
.mm-story-hero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 800px;
margin: 0 auto;
padding: 0 1.5rem 3rem;
text-align: center;
}
.mm-story-hero__title {
font-family: 'Times New Roman', Times, serif;
font-size: clamp(1.8rem, 3.2vw, 2.6rem);
font-weight: 400;
letter-spacing: 0.22em;
text-transform: uppercase;
color: #fff;
margin: 0;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.mm-story-hero { height: 56vh; min-height: 380px; }
.mm-story-hero__inner { padding-bottom: 2rem; }
.mm-story-hero__title { font-size: 1.5rem; letter-spacing: 0.18em; }
}
/* — Story narrative: long-form text with floated photos that text wraps around — */
.mm-story-narrative {
padding: 5rem 1.5rem 4rem;
background: var(--mm-cream);
}
.mm-story-narrative__inner {
max-width: 1080px;
margin: 0 auto;
}
.mm-story-narrative__eyebrow {
font-family: var(--mm-heading);
font-size: 1.15rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 400;
color: var(--mm-charcoal);
text-align: center;
margin: 0 0 3rem;
}
.mm-story-narrative__body {
color: var(--mm-charcoal);
font-size: 1rem;
line-height: 1.85;
text-align: justify;
hyphens: auto;
}
.mm-story-narrative__body::after {
content: "";
display: block;
clear: both;
}
.mm-story-narrative__body p {
margin: 0 0 1.25rem;
}
.mm-story-narrative__body p:last-child {
margin-bottom: 0;
}
/* Floated newspaper-style photos — text wraps around them */
.mm-story-narrative__photo {
margin: 0;
}
.mm-story-narrative__photo img {
display: block;
width: 100%;
height: auto;
}
.mm-story-narrative__photo--right {
float: right;
width: 320px;
margin: 0.4rem 0 1.25rem 2rem;
}
.mm-story-narrative__photo--left {
float: left;
width: 320px;
margin: 0.4rem 2rem 1.25rem 0;
}
.mm-story-narrative__photo--feature {
width: 460px;
}
@media (max-width: 900px) {
.mm-story-narrative__photo--right,
.mm-story-narrative__photo--left {
float: none;
width: auto !important;
max-width: 520px;
margin: 2rem auto;
}
.mm-story-narrative__body {
text-align: left;
}
}
/* — Flax process: numbered grid — */
.mm-flax-process {
padding: 5rem 0;
background: var(--mm-cream);
border-top: 1px solid var(--mm-border);
}
.mm-flax-process__eyebrow {
font-family: var(--mm-heading);
font-size: 1.15rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 400;
color: var(--mm-charcoal);
text-align: center;
margin: 0 0 1.5rem;
}
.mm-flax-process__intro {
max-width: 800px;
margin: 0 auto 3.5rem;
text-align: center;
color: var(--mm-charcoal);
font-size: 0.98rem;
line-height: 1.75;
}
.mm-flax-process__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 3rem;
row-gap: 3.5rem;
}
.mm-flax-step {
display: flex;
flex-direction: column;
}
.mm-flax-step__media {
margin: 0 0 1.25rem;
overflow: hidden;
background: var(--mm-linen);
}
.mm-flax-step__media img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.mm-flax-step__body {
padding: 0 0.25rem;
}
.mm-flax-step__heading {
font-family: var(--mm-heading);
font-size: 1.05rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 400;
color: var(--mm-charcoal);
margin: 0 0 0.75rem;
display: flex;
align-items: baseline;
gap: 0.4rem;
}
.mm-flax-step__num {
color: var(--mm-gold);
font-weight: 500;
}
.mm-flax-step__body p {
font-size: 0.92rem;
line-height: 1.7;
color: var(--mm-text);
margin: 0;
}
@media (max-width: 991px) {
.mm-flax-process__grid {
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
row-gap: 3rem;
}
}
@media (max-width: 600px) {
.mm-flax-process {
padding: 3.5rem 0;
}
.mm-flax-process__grid {
grid-template-columns: 1fr;
row-gap: 2.5rem;
}
}
/* — Core materials: 3-column card grid — */
.mm-core-materials {
padding: 5rem 0 6rem;
background: var(--mm-white);
border-top: 1px solid var(--mm-border);
}
.mm-core-materials__eyebrow {
font-family: var(--mm-heading);
font-size: 1.15rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 400;
color: var(--mm-charcoal);
text-align: center;
margin: 0 0 3.5rem;
}
.mm-core-materials__grid {
display: grid;
grid-template-columns: 1fr 1.4fr 1fr;
align-items: end;
column-gap: 3rem;
row-gap: 2.5rem;
}
.mm-material {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.mm-material__media {
width: 100%;
margin: 0 0 1.5rem;
overflow: hidden;
}
.mm-material__media img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
}
.mm-material__label {
font-family: var(--mm-heading);
font-size: 0.95rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 400;
color: var(--mm-charcoal);
margin: 0 0 1rem;
}
.mm-material__text {
font-size: 0.92rem;
line-height: 1.75;
color: var(--mm-text);
max-width: 360px;
margin: 0 auto;
}
@media (max-width: 991px) {
.mm-core-materials__grid {
grid-template-columns: repeat(2, 1fr);
column-gap: 2rem;
align-items: start;
}
}
@media (max-width: 600px) {
.mm-core-materials {
padding: 3.5rem 0 4.5rem;
}
.mm-core-materials__grid {
grid-template-columns: 1fr;
row-gap: 3rem;
}
}
/* ── Location gate ─────────────────────────────────────────────────
The front door, before a shop has been chosen. Split down the middle:
the choice on the left, one photograph on the right, and nothing else
— no navigation, no footer, nothing to click past the decision.
Deliberately its own layout rather than a modal over the shop. A modal
would have to render a shop behind it, and which shop that is, is
precisely the question not yet answered. */
.mm-gate {
margin: 0;
min-height: 100vh;
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
/* The row has to be told to fill the viewport. Left implicit it sizes to
the form and the photograph stops short of the fold with a band of
empty ground beneath it — and `1fr` does not help, because min-height
leaves the container's height indefinite, so the fraction resolves
against max-content instead. A definite minimum on the track itself is
what actually holds, and the auto maximum still lets it grow if the
country list ever makes the pane taller than the screen. */
grid-template-rows: minmax(100vh, auto);
background: var(--mm-cream, #faf9f7);
color: var(--mm-charcoal, #2b2b2b);
}
.mm-gate__pane {
display: flex;
align-items: center;
padding: 3rem clamp(1.5rem, 5vw, 5rem);
}
.mm-gate__inner {
width: 100%;
max-width: 22rem;
}
.mm-gate__brand {
display: block;
width: auto;
height: 1.6rem;
margin-bottom: 4rem;
}
.mm-gate__title {
font-family: var(--mm-body);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 2.25rem;
}
.mm-gate__form { display: block; }
.mm-gate__label {
display: block;
font-family: var(--mm-body);
font-size: 0.66rem;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.6;
margin-bottom: 0.3rem;
}
.mm-gate__field { margin-bottom: 1.75rem; }
.mm-gate__select {
-webkit-appearance: none;
appearance: none;
width: 100%;
background: transparent;
border: 0;
border-bottom: 1px solid currentColor;
border-radius: 0;
padding: 0.35rem 1.5rem 0.5rem 0;
font-family: var(--mm-body);
font-size: 1rem;
color: inherit;
cursor: pointer;
/* Chevron drawn rather than linked, so the gate needs no asset to
render — it is the first thing a visitor ever sees. */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232b2b2b'%3E%3Cpath d='M1.6 5.2 8 11.6l6.4-6.4-.9-.9L8 9.8 2.5 4.3z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.15rem center;
background-size: 0.7rem;
}
.mm-gate__select:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.mm-gate__submit {
width: 100%;
background: transparent;
border: 1px solid currentColor;
padding: 0.85rem 1rem;
font-family: var(--mm-body);
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: inherit;
cursor: pointer;
transition: background-color 140ms ease, color 140ms ease;
}
.mm-gate__submit:hover {
background: var(--mm-charcoal, #2b2b2b);
color: var(--mm-white, #fff);
}
.mm-gate__remember input[type="checkbox"] {
/* The browser's default tick is the same blue as Bootstrap's, and just
as out of place here. accent-color recolours the native control
without rebuilding it, so it keeps its own focus ring and its
behaviour on every platform. */
accent-color: var(--mm-charcoal, #2b2b2b);
width: 0.95rem;
height: 0.95rem;
}
.mm-gate__remember {
display: flex;
align-items: center;
gap: 0.55rem;
margin-top: 1.1rem;
font-size: 0.82rem;
cursor: pointer;
}
.mm-gate__image {
background-image: url('/uploads/hero-kansas-eyelet.webp');
background-size: cover;
background-position: center;
}
@media (max-width: 860px) {
.mm-gate {
grid-template-columns: 1fr;
grid-template-rows: auto;
min-height: 100dvh;
}
/* The photograph is atmosphere, not information. On a phone the choice
should be the whole screen rather than something to scroll past. */
.mm-gate__image { display: none; }
.mm-gate__pane { padding: 2.5rem 1.5rem; align-items: flex-start; }
.mm-gate__brand { margin-bottom: 2.5rem; }
}
/* ─── Block: paint quiz ──────────────────────────────────────────────────
Linen, between the beige showcase above and the white tiles below, so the
quiz reads as its own room on the page. One question at a time, answers
as tiles; the radio inputs stay in the DOM (keyboard, screen readers) but
out of sight, and the lettered disc carries the "selected" state. */
.mm-quiz {
padding: 5.5rem 0;
background: var(--mm-linen);
scroll-margin-top: 90px;
}
.mm-quiz--missing {
padding: 1.5rem 0;
background: #f6e6e6;
color: #8b3a3a;
}
.mm-quiz__inner {
position: relative;
max-width: 980px;
margin: 0 auto;
text-align: center;
}
.mm-quiz__eyebrow {
font-family: var(--mm-heading);
text-transform: uppercase;
letter-spacing: 0.22em;
font-size: 0.8rem;
color: var(--mm-gold);
margin-bottom: 0.9rem;
}
.mm-quiz__title {
font-family: var(--mm-heading);
font-size: clamp(1.22rem, 2.18vw, 1.77rem);
line-height: 1.2;
color: var(--mm-charcoal);
max-width: 680px;
margin: 0 auto 1rem;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 400;
}
.mm-quiz__lead {
color: #6b6b6b;
font-size: 1rem;
line-height: 1.7;
max-width: 560px;
margin: 0 auto 2rem;
}
.mm-quiz__button {
display: inline-block;
padding: 0.75rem 2.2rem;
background: transparent;
border: 1px solid var(--mm-charcoal);
color: var(--mm-charcoal);
font-family: var(--mm-body);
font-size: 0.95rem;
letter-spacing: 0.04em;
text-decoration: none;
cursor: pointer;
transition: background 150ms ease, color 150ms ease;
}
.mm-quiz__button:hover,
.mm-quiz__button:focus-visible {
background: var(--mm-charcoal);
color: #fff;
}
.mm-quiz__button--solid {
background: var(--mm-charcoal);
color: #fff;
}
.mm-quiz__button--solid:hover,
.mm-quiz__button--solid:focus-visible {
background: #000;
}
.mm-quiz__button:disabled {
opacity: 0.6;
cursor: wait;
}
.mm-quiz__link {
background: none;
border: 0;
padding: 0;
color: #6b6b6b;
font-size: 0.9rem;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.mm-quiz__link:hover {
color: var(--mm-charcoal);
}
.mm-quiz__progress {
position: relative;
height: 2px;
max-width: 420px;
margin: 0 auto 0.8rem;
background: rgba(44, 44, 44, 0.1);
transform-origin: left center;
}
.mm-quiz__progress-bar {
position: relative;
display: block;
width: 0;
height: 100%;
background: var(--mm-gold);
transition: width 800ms cubic-bezier(0.65, 0, 0.35, 1);
}
/* A bead at the tip, so the line reads as something moving along, not a
bar filling up. */
.mm-quiz__progress-bar::after {
content: '';
position: absolute;
top: 50%;
right: -4px;
width: 8px;
height: 8px;
margin-top: -4px;
border-radius: 50%;
background: var(--mm-gold);
box-shadow: 0 0 0 4px rgba(184, 151, 92, 0.18);
}
.mm-quiz__counter {
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #8a8378;
margin-bottom: 1.8rem;
}
/* Teaser, form and result are stacked in one grid cell, and so are the
steps inside the form: a cell is as tall as its tallest child, so the quiz
keeps one height from the first question to the email address and the
page under it never moves. The inactive ones are invisible but still
there, holding the space. */
.mm-quiz__stage {
display: grid;
position: relative;
}
.mm-quiz__panel {
grid-area: 1 / 1;
min-width: 0;
}
.mm-quiz__intro {
align-self: center;
}
.mm-quiz__form {
scroll-margin-top: 110px;
}
.mm-quiz__steps {
display: grid;
}
.mm-quiz__step {
grid-area: 1 / 1;
border: 0;
padding: 0;
margin: 0;
min-width: 0;
}
.mm-quiz__panel.is-inactive,
.mm-quiz__step.is-inactive {
visibility: hidden;
/* Opacity as well: a child can switch visibility back on — the captcha
widget does, and sat on top of the result — but not opacity. */
opacity: 0;
}
.mm-quiz .is-leaving {
pointer-events: none;
}
/* Headings are split into words (paint_quiz_controller.js) so each can rise
out of a mask. The padding lets descenders and italics overhang the mask
without being clipped; the negative margin gives the space back. */
.mm-quiz__word {
display: inline-block;
overflow: hidden;
vertical-align: top;
padding: 0 0.05em 0.16em;
margin: 0 -0.05em -0.16em;
}
.mm-quiz__word > span {
display: inline-block;
}
/* The teaser waiting below the fold for its entrance. Only ever set by the
script, so without it the teaser is simply there. */
.mm-quiz__intro.is-waiting .mm-quiz__word > span,
.mm-quiz__intro.is-waiting [data-quiz-stagger] {
opacity: 0;
}
/* Bootstrap floats and sizes it like a form label; the question
is a heading here. */
.mm-quiz__question {
float: none;
width: 100%;
padding: 0;
font-family: var(--mm-heading);
font-size: clamp(1.27rem, 2.21vw, 1.7rem);
line-height: 1.25;
color: var(--mm-charcoal);
margin: 0 auto 1.8rem;
outline: none;
}
/* Answer cards: a drawing over the label, the letter in the corner. One
row on a desktop — --n is the number of answers, set in the template —
three to a row on a tablet, two on a phone, a short last row centred. */
.mm-quiz__answers {
--gap: 0.8rem;
--per-row: var(--n, 3);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--gap);
max-width: 960px;
margin: 0 auto;
}
@media (max-width: 991px) {
.mm-quiz__answers {
--per-row: min(var(--n, 3), 3);
}
}
@media (max-width: 575px) {
.mm-quiz__answers {
--per-row: 2;
--gap: 0.6rem;
}
}
.mm-quiz__answer {
position: relative;
flex: 0 0 calc((100% - (var(--per-row) - 1) * var(--gap)) / var(--per-row));
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.7rem;
padding: 1.6rem 0.8rem 1.25rem;
background: #fff;
border: 1px solid var(--mm-border);
text-align: center;
cursor: pointer;
transition:
border-color 200ms ease,
box-shadow 300ms ease,
transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
opacity 300ms ease;
}
@media (hover: hover) {
.mm-quiz__answer:hover {
border-color: #b9b2a6;
transform: translateY(-2px);
box-shadow: 0 14px 28px -20px rgba(44, 44, 44, 0.45);
}
}
.mm-quiz__answer:active {
transform: scale(0.985);
}
.mm-quiz__answer:has(.mm-quiz__radio:checked) {
border-color: var(--mm-charcoal);
box-shadow: inset 0 0 0 1px var(--mm-charcoal), 0 16px 32px -22px rgba(44, 44, 44, 0.55);
}
/* Once one is picked, the others step back. */
.mm-quiz__answers:has(.mm-quiz__radio:checked) .mm-quiz__answer:not(:has(.mm-quiz__radio:checked)) {
opacity: 0.5;
}
.mm-quiz__radio {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mm-quiz__letter {
position: absolute;
top: 0.6rem;
left: 0.6rem;
isolation: isolate;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
border: 1px solid #cfc8bc;
border-radius: 50%;
font-family: var(--mm-heading);
font-size: 0.82rem;
color: #8a8378;
transition: color 250ms ease 80ms, border-color 250ms ease;
}
/* Picked: the disc fills with ink from its centre, overshooting a touch. */
.mm-quiz__letter::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: 50%;
background: var(--mm-charcoal);
transform: scale(0);
transition: transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mm-quiz__radio:checked ~ .mm-quiz__letter {
border-color: var(--mm-charcoal);
color: #fff;
}
.mm-quiz__radio:checked ~ .mm-quiz__letter::before {
transform: scale(1);
}
.mm-quiz__radio:focus-visible ~ .mm-quiz__letter {
outline: 2px solid var(--mm-gold);
outline-offset: 2px;
}
.mm-quiz__answer-label {
font-size: 0.95rem;
line-height: 1.3;
color: var(--mm-charcoal);
}
/* An answer added in the admin without a drawing: just the words. */
.mm-quiz__answer--plain {
justify-content: center;
min-height: 64px;
padding: 1rem 1rem 1rem 2.6rem;
}
/* The drawings (templates/paint_quiz/_art.html.twig). Every stroke is
dashed exactly once at its own length (pathLength="1"), so moving the
dash offset from 1 to 0 draws it on — the script does that as each
question arrives. */
.mm-quiz__art {
display: block;
width: 100px;
max-width: 100%;
aspect-ratio: 1;
color: var(--mm-charcoal);
transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.mm-quiz__svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
.mm-quiz__svg [pathLength] {
stroke-dasharray: 1;
}
.mm-quiz__svg .is-accent {
stroke: var(--mm-gold);
}
.mm-quiz__art-frame {
stroke: #cfc8bc;
stroke-dasharray: 1.5 3;
opacity: 0.7;
}
.mm-quiz__art-window {
fill: #fff;
}
.mm-quiz__art-beam {
opacity: 0.55;
}
@media (hover: hover) {
.mm-quiz__answer:hover .mm-quiz__art {
transform: translateY(-3px);
}
}
@media (max-width: 575px) {
.mm-quiz__answer {
padding: 1.2rem 0.6rem 0.9rem;
}
.mm-quiz__art {
width: 64px;
}
.mm-quiz__answer-label {
font-size: 0.9rem;
}
}
.mm-quiz__back {
margin-top: 2rem;
padding: 0.3rem 0.5rem;
background: none;
border: 0;
font-size: 0.9rem;
color: #8a8378;
cursor: pointer;
}
.mm-quiz__back:hover {
color: var(--mm-charcoal);
}
/* The address step is the tallest, so it sets the height every question
shares; it is kept a little tighter than the questions. */
.mm-quiz__step--email .mm-quiz__question {
margin-bottom: 0.8rem;
}
.mm-quiz__step--email .mm-quiz__lead {
margin-bottom: 1rem;
}
.mm-quiz__step--email .mm-quiz__email,
.mm-quiz__step--email .mm-quiz__consent {
margin-bottom: 0.75rem;
}
.mm-quiz__step--email .mm-quiz__captcha {
margin-top: 0.75rem;
}
.mm-quiz__email {
display: flex;
max-width: 560px;
margin: 0 auto 1rem;
}
.mm-quiz__input {
width: 100%;
padding: 0.75rem 1rem;
background: #fff;
border: 1px solid #d6d2c8;
border-radius: 0;
font-family: var(--mm-body);
font-size: 0.95rem;
color: var(--mm-charcoal);
}
.mm-quiz__input:focus {
outline: none;
border-color: #888;
}
.mm-quiz__email .mm-quiz__input {
flex: 1;
border-right: 0;
}
.mm-quiz__email .mm-quiz__button {
white-space: nowrap;
}
@media (max-width: 575px) {
.mm-quiz__email {
flex-direction: column;
gap: 0.6rem;
}
.mm-quiz__email .mm-quiz__input {
border-right: 1px solid #d6d2c8;
}
}
.mm-quiz__consent {
display: flex;
align-items: flex-start;
gap: 0.6rem;
max-width: 560px;
margin: 0 auto 1rem;
font-size: 0.85rem;
line-height: 1.5;
color: #6b6b6b;
text-align: left;
cursor: pointer;
}
.mm-quiz__consent input {
flex: none;
margin-top: 0.25rem;
accent-color: var(--mm-charcoal);
}
.mm-quiz__captcha {
max-width: 560px;
min-height: 3.75rem;
margin: 1rem auto 0;
--mit-captcha-font-size: 0.85rem;
}
/* Held before the widget loads (Bootstrap's [hidden] is !important, hence
this one), so its arrival does not make the address step taller. */
.mm-quiz__captcha[hidden] {
display: block !important;
visibility: hidden;
}
.mm-quiz__error {
max-width: 560px;
margin: 1rem auto 0;
padding: 0.7rem 1rem;
background: #f6e6e6;
color: #8b3a3a;
font-size: 0.9rem;
}
.mm-quiz__error--notice {
background: #efe9dd;
color: #6b5d43;
}
.mm-quiz__privacy {
max-width: 560px;
margin: 0 auto;
font-size: 0.8rem;
color: #8a8378;
}
.mm-quiz__privacy a {
color: inherit;
text-decoration: underline;
}
.mm-quiz__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.mm-quiz__products {
display: grid;
/* Four to a row inside the 820px column, so the usual four or eight
colours fill whole rows. */
grid-template-columns: repeat(auto-fit, minmax(150px, 180px));
justify-content: center;
gap: 1.5rem;
margin: 2rem auto 2.5rem;
text-align: left;
}
.mm-quiz__tip {
max-width: 620px;
margin: 0 auto 1.2rem;
padding: 1rem 1.3rem;
background: rgba(255, 255, 255, 0.65);
border-left: 2px solid var(--mm-gold);
font-size: 0.95rem;
line-height: 1.7;
color: #555;
text-align: left;
}
.mm-quiz__tip-label {
margin-right: 0.3rem;
font-size: 0.75rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mm-gold);
}
.mm-quiz__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1.2rem 1.6rem;
margin-top: 2rem;
}
@media (prefers-reduced-motion: reduce) {
.mm-quiz__answer,
.mm-quiz__letter,
.mm-quiz__letter::before,
.mm-quiz__progress-bar {
transition: none;
}
}
/* ─── Block: colour consultation ─────────────────────────────────────────
Two equal halves with a hairline between them, like the picture tiles
below — virtual on the left, in store on the right; stacked on phones.
Shares the quiz's type and buttons, so the two blocks read as one offer. */
.mm-consult {
padding: 5.5rem 0;
background: #fff;
scroll-margin-top: 90px;
}
.mm-consult__header {
max-width: 720px;
margin: 0 auto 3.5rem;
text-align: center;
}
.mm-consult__header .mm-quiz__lead {
margin-bottom: 0;
}
.mm-consult__options {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 1040px;
margin: 0 auto;
}
.mm-consult__option {
padding: 0 3rem;
text-align: center;
}
.mm-consult__option + .mm-consult__option {
border-left: 1px solid #e6e2da;
}
@media (max-width: 767px) {
.mm-consult__options {
grid-template-columns: 1fr;
gap: 3rem;
}
.mm-consult__option {
padding: 0;
}
.mm-consult__option + .mm-consult__option {
border-left: 0;
border-top: 1px solid #e6e2da;
padding-top: 3rem;
}
}
.mm-consult__image img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
margin-bottom: 1.6rem;
}
.mm-consult__option-title {
font-family: var(--mm-heading);
font-size: 1.6rem;
color: var(--mm-charcoal);
margin-bottom: 0.8rem;
}
.mm-consult__option-text {
max-width: 420px;
margin: 0 auto 1rem;
line-height: 1.7;
color: #6b6b6b;
}
.mm-consult__meta {
margin-bottom: 1.5rem;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mm-gold);
}
.mm-consult__field label {
display: block;
margin-bottom: 0.3rem;
font-size: 0.85rem;
color: #6b6b6b;
}
.mm-consult__form {
display: flex;
flex-direction: column;
gap: 0.9rem;
max-width: 440px;
margin: 1.5rem auto 0;
text-align: left;
}
.mm-consult__form .mm-quiz__button {
align-self: flex-start;
}
.mm-consult__form .mm-quiz__error,
.mm-consult__form .mm-quiz__captcha,
.mm-consult__form .mm-quiz__privacy {
max-width: none;
margin: 0;
}
.mm-consult__quiz-note {
margin: 0;
padding: 0.6rem 0.9rem;
background: #efe9dd;
font-size: 0.85rem;
color: #6b5d43;
}
.mm-consult__search {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
align-items: end;
gap: 0.8rem 0.6rem;
max-width: 440px;
margin: 1.5rem auto 0;
text-align: left;
}
/* A select and a text input come out at different heights, which left
the two labels above them out of line. */
.mm-consult__search .mm-quiz__input {
height: 2.9rem;
padding-top: 0;
padding-bottom: 0;
}
/* Under the two fields rather than beside them: the half-width column
left the country names clipped ("United Kingdo"). */
.mm-consult__search .mm-quiz__button {
grid-column: 1 / -1;
justify-self: center;
white-space: nowrap;
}
.mm-consult__results {
max-width: 520px;
margin: 1.5rem auto 0;
text-align: left;
}
.mm-consult__results:empty {
display: none;
}
.mm-consult__stockists {
list-style: none;
margin: 0;
padding: 0;
}
.mm-consult__stockist {
padding: 1rem 0;
border-top: 1px solid #e6e2da;
}
.mm-consult__stockist-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
}
.mm-consult__stockist-name {
font-family: var(--mm-heading);
font-size: 1.2rem;
color: var(--mm-charcoal);
}
.mm-consult__distance {
font-size: 0.8rem;
letter-spacing: 0.06em;
color: var(--mm-gold);
white-space: nowrap;
}
.mm-consult__stockist-address {
font-size: 0.92rem;
line-height: 1.6;
color: #555;
}
.mm-consult__stockist-note {
margin-top: 0.2rem;
font-size: 0.85rem;
font-style: italic;
color: #8a8378;
}
.mm-consult__stockist-links {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.1rem;
margin-top: 0.5rem;
font-size: 0.85rem;
}
.mm-consult__stockist-links a {
color: var(--mm-charcoal);
text-decoration: underline;
text-underline-offset: 2px;
}
.mm-consult__notice {
font-size: 0.92rem;
line-height: 1.6;
color: #555;
}
.mm-consult__notice .mm-quiz__link {
display: inline;
margin-left: 0.3rem;
}
.mm-consult__notice--error {
color: #8b3a3a;
}
.mm-consult__attribution {
margin-top: 0.8rem;
font-size: 0.72rem;
color: #a39d92;
}
.mm-consult__sent {
margin-top: 1rem;
padding: 1.5rem;
background: var(--mm-linen);
text-align: center;
outline: none;
}
.mm-consult__sent-title {
margin-bottom: 0.4rem;
font-family: var(--mm-heading);
font-size: 1.4rem;
color: var(--mm-charcoal);
}
/* Feature-grid card buttons — a card that offers a choice (the colour
consultation: online or in store) instead of one link. Same voice as the
card titles: small capitals, letter-spaced. */
.mm-block-feature-grid__buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
margin-top: 1.25rem;
}
.mm-block-feature-grid__button {
display: inline-block;
min-width: 9rem;
padding: 0.7rem 1.6rem;
border: 1px solid var(--mm-charcoal);
color: var(--mm-charcoal);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
transition: background 150ms ease, color 150ms ease;
}
.mm-block-feature-grid__button:hover,
.mm-block-feature-grid__button:focus-visible {
background: var(--mm-charcoal);
color: #fff;
}
/* The consultation block showing one offer on its own page. */
.mm-consult__options--single {
grid-template-columns: minmax(0, 1fr);
max-width: 560px;
}
.mm-consult__options--single .mm-consult__option {
padding: 0;
}
.mm-consult__options--single .mm-consult__form,
.mm-consult__options--single .mm-consult__search {
margin-top: 0.5rem;
}
/* ==========================================================================
Showroom — the true-to-scale product grid (shop/_grid.html.twig)
Every piece is drawn at one scale: --u centimetres to a grid column, so a
piece --h centimetres tall is --h / --u columns tall on screen, and all of
them stand on the same (unseen) line. --col is one column's width, worked out
from the grid's own width (container query units), so the scale holds at
every screen size.
========================================================================== */
.mm-showroom {
--gap: 1.5rem;
--mm-ease: cubic-bezier(.2, .8, .2, 1);
container: showroom / inline-size;
margin-top: .25rem;
}
.mm-showroom > * {
--cols: 2;
--col: calc((100cqi - (var(--cols) - 1) * var(--gap)) / var(--cols));
}
@container showroom (min-width: 620px) { .mm-showroom > * { --cols: 3; } }
@container showroom (min-width: 940px) { .mm-showroom > * { --cols: var(--cols-wide, 4); } }
@container showroom (max-width: 520px) { .mm-showroom { --gap: .9rem; } }
/* Legend and switch */
.mm-showroom__bar {
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
gap: .75rem 1.5rem; margin: 0 0 1.4rem; padding-bottom: 1rem;
border-bottom: 1px solid var(--mm-border);
}
.mm-showroom__legend { display: flex; align-items: center; gap: .9rem; transition: opacity .5s ease; }
.mm-showroom__legend-text { display: flex; flex-direction: column; line-height: 1.35; }
.mm-showroom__legend-text strong { font-family: var(--mm-heading); font-weight: 500; font-size: 1.05rem; color: var(--mm-charcoal); letter-spacing: .02em; }
.mm-showroom__legend-text span { font-size: .72rem; letter-spacing: .06em; color: #8f8576; }
/* One metre at the grid's scale, drawn like an architect's scale bar. */
.mm-showroom__ruler {
position: relative; display: block; flex-shrink: 0;
width: calc(100 / var(--u) * var(--col)); height: 10px;
border-bottom: 1.5px solid var(--mm-gold);
transition: width .6s var(--mm-ease);
}
.mm-showroom__ruler i { position: absolute; bottom: -1.5px; width: 1.5px; height: 10px; background: var(--mm-gold); }
.mm-showroom__ruler i:nth-child(1) { left: 0; }
.mm-showroom__ruler i:nth-child(2) { left: 50%; height: 6px; }
.mm-showroom__ruler i:nth-child(3) { right: 0; }
.mm-showroom__ruler::before { content: ''; position: absolute; left: 0; bottom: 0; width: 50%; height: 4px; background: var(--mm-gold); opacity: .35; }
.mm-showroom__switch { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--mm-border); border-radius: 999px; background: #fff; }
.mm-showroom__switch button {
display: inline-flex; align-items: center; gap: .45rem; border: 0; background: transparent;
padding: .38rem .9rem; border-radius: 999px; font-family: var(--mm-body); font-size: .74rem;
letter-spacing: .08em; text-transform: uppercase; color: #8f8576; cursor: pointer;
transition: background .25s ease, color .25s ease;
}
.mm-showroom__switch button:hover { color: var(--mm-charcoal); }
.mm-showroom__switch button.is-active { background: var(--mm-charcoal); color: #fff; }
/* The grid */
.mm-showroom__grid {
display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
gap: 2.2rem var(--gap); grid-auto-flow: row dense;
}
.mm-showroom__cell { min-width: 0; }
.mm-showroom__cell.is-wide { grid-column: span 2; }
/* Cards that are not to scale keep their photo, at the same height as
the stages around them so the row's titles line up. */
.mm-showroom .mm-product-card:not(.mm-product-card--scaled) .card-img-top {
aspect-ratio: auto; height: calc(var(--col) * var(--r)); width: 100%;
object-fit: contain; background-color: #fff;
}
/* The stage: plain white, and the piece standing in it — no floor, no
shadow, nothing drawn under it. */
.mm-scale {
position: relative; display: block; overflow: hidden;
height: calc(var(--col) * var(--r));
background: #fff;
}
.mm-scale__object {
position: absolute; left: 50%; bottom: 12%; translate: -50% 0;
/* The studio white of the photo melts into the stage — see
ThumbnailService::getCutout. */
mix-blend-mode: multiply;
height: calc(var(--h) / var(--u) * var(--col));
transition: height .7s var(--mm-ease), transform .5s var(--mm-ease);
}
.mm-scale__object img { display: block; height: 100%; width: auto; max-width: none; position: relative; z-index: 1; }
.mm-product-card--scaled:hover .mm-scale__object { transform: translateY(-5px); }
/* Measurements, drawn on like a plan when the card is hovered. */
.mm-scale__dim { position: absolute; z-index: 2; color: var(--mm-gold); pointer-events: none; }
.mm-scale__dim::before, .mm-scale__dim::after { content: ''; position: absolute; background: currentColor; }
.mm-scale__dim em {
position: absolute; font-style: normal; font-family: var(--mm-body); font-size: .66rem;
letter-spacing: .14em; white-space: nowrap; color: #9a7b46; opacity: 0; transition: opacity .35s ease;
}
.mm-scale__dim--w { left: 0; right: 0; bottom: -15px; height: 1px; background: currentColor; transform: scaleX(0); transition: transform .55s var(--mm-ease); }
.mm-scale__dim--w::before, .mm-scale__dim--w::after { top: -3px; width: 1px; height: 7px; }
.mm-scale__dim--w::before { left: 0; }
.mm-scale__dim--w::after { right: 0; }
.mm-scale__dim--w em { left: 50%; top: 3px; translate: -50% 0; line-height: 1.2; }
.mm-scale__dim--h { top: 0; bottom: 0; right: -14px; width: 1px; background: currentColor; transform: scaleY(0); transition: transform .55s var(--mm-ease) .08s; }
.mm-scale__dim--h::before, .mm-scale__dim--h::after { left: -3px; width: 7px; height: 1px; }
.mm-scale__dim--h::before { top: 0; }
.mm-scale__dim--h::after { bottom: 0; }
.mm-scale__dim--h em { left: 6px; top: 50%; translate: 0 -50%; writing-mode: vertical-rl; rotate: 180deg; }
.mm-product-card--scaled:hover .mm-scale__dim { transform: none; }
.mm-product-card--scaled:hover .mm-scale__dim em { opacity: 1; transition-delay: .3s; }
.mm-product-card__dims { margin: 0 0 .1rem; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #9a8f7c; }
/* Uniform view: every piece fitted to its own tile, as in a plain grid. */
.mm-showroom.is-uniform .mm-showroom__cell.is-wide { grid-column: span 1; }
.mm-showroom.is-uniform .mm-scale__object { height: min(calc(var(--col) * var(--r) * .66), calc(var(--col) * .84 / var(--a))); }
.mm-showroom.is-uniform .mm-showroom__legend { opacity: .3; }
.mm-showroom.is-uniform .mm-scale__dim { display: none; }
/* Arrival: pieces are set down in place as the grid comes into view. */
.mm-showroom.is-armed .is-scaled .mm-scale__object { opacity: 0; transform: translateY(-26px); }
.mm-showroom.is-armed .is-scaled.is-in .mm-scale__object {
opacity: 1; transform: none;
transition: transform 1s var(--mm-ease) calc(var(--d, 0) * 1ms), opacity .7s ease calc(var(--d, 0) * 1ms), height .7s var(--mm-ease);
}
.mm-showroom.is-armed .is-scaled.is-in:hover .mm-scale__object { transform: translateY(-5px); transition: transform .5s var(--mm-ease), height .7s var(--mm-ease); }
/* The switch between the two views, morphed by the View Transitions API. */
::view-transition-group(*) { animation-duration: .65s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
/* While it runs, the header and the footer are layers of their own, so the
moving cards pass under them (showroom_controller.js, morph()). */
html.mm-vt-showroom .mm-nav { view-transition-name: mm-site-nav; }
html.mm-vt-showroom .mm-footer { view-transition-name: mm-site-footer; }
@media (prefers-reduced-motion: reduce) {
.mm-showroom.is-armed .is-scaled .mm-scale__object { opacity: 1; transform: none; transition: none; }
::view-transition-group(*) { animation-duration: 0s; }
}
/* Hover: the second picture (Showroom::secondView) ------------------------ */
/* "turn" — another studio view of the piece: it turns round on the spot,
on its own floor point and still to scale, like a piece on a turntable. */
.mm-scale--turn { perspective: 1500px; }
.mm-scale__alt {
position: absolute; left: 50%; bottom: 12%; translate: -50% 0;
mix-blend-mode: multiply;
height: min(calc(var(--h) / var(--u) * var(--col)), calc((var(--col) * var(--span, 1) + var(--gap) * (var(--span, 1) - 1)) * .9 / var(--a2, 1)));
opacity: 0; transform: rotateY(-78deg); transform-origin: 50% 100%;
transition: transform .5s cubic-bezier(.5, 0, .75, 0), opacity .3s ease;
pointer-events: none;
}
.mm-scale__alt img { display: block; height: 100%; width: auto; max-width: none; position: relative; z-index: 1; }
.mm-scale--turn .mm-scale__object { transform-origin: 50% 100%; }
.mm-product-card--scaled:hover .mm-scale--turn .mm-scale__object,
.mm-showroom.is-armed .is-scaled.is-in:hover .mm-scale--turn .mm-scale__object {
transform: rotateY(78deg); opacity: 0;
transition: transform .45s cubic-bezier(.5, 0, .75, 0), opacity .25s ease .2s, height .7s var(--mm-ease, ease);
}
.mm-product-card--scaled:hover .mm-scale--turn .mm-scale__alt {
transform: none; opacity: 1;
transition: transform .65s cubic-bezier(.2, .8, .2, 1) .38s, opacity .3s ease .38s;
}
.mm-product-card--scaled:hover .mm-scale--turn .mm-scale__dim { transform: scale(0); }
.mm-showroom.is-uniform .mm-scale__alt { height: min(calc(var(--col) * var(--r) * .66), calc(var(--col) * .84 / var(--a2, 1))); }
/* "photo" — a room shot opens over the stage as a circle from where the
pointer came in, settling as it opens; leaving closes it towards the
way out. The measurements ride along in a small tag. */
.mm-scale__photo {
position: absolute; inset: 0; z-index: 3; overflow: hidden; background: #e9e4dc;
clip-path: circle(0% at var(--mx, 50%) var(--my, 50%));
transition: clip-path .75s cubic-bezier(.65, 0, .35, 1);
pointer-events: none;
}
.mm-scale__photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
transform: scale(1.12); filter: saturate(.85) brightness(1.04);
transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), filter 1s ease;
}
.mm-scale__tag {
position: absolute; left: .9rem; bottom: .9rem; padding: .3rem .7rem; border-radius: 999px;
background: rgba(255, 255, 255, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
font-family: var(--mm-body); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mm-charcoal);
opacity: 0; transform: translateY(6px); transition: opacity .4s ease, transform .5s var(--mm-ease, ease);
}
.mm-product-card--scaled:hover .mm-scale--photo .mm-scale__photo { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
.mm-product-card--scaled:hover .mm-scale--photo .mm-scale__photo img { transform: none; filter: none; }
.mm-product-card--scaled:hover .mm-scale--photo .mm-scale__tag { opacity: 1; transform: none; transition-delay: .45s; }
.mm-product-card--scaled:hover .mm-scale--photo .mm-scale__object,
.mm-showroom.is-armed .is-scaled.is-in:hover .mm-scale--photo .mm-scale__object { transform: scale(.94); transition: transform .8s var(--mm-ease, ease); }
.mm-scale--photo .mm-scale__dim { display: none; }
.mm-scale .mm-product-card__badge { z-index: 4; }
@media (prefers-reduced-motion: reduce) {
.mm-scale__alt, .mm-scale__photo, .mm-scale__photo img { transition-duration: .01s !important; }
.mm-scale__alt { transform: none; }
.mm-product-card--scaled:hover .mm-scale--turn .mm-scale__object { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
The door — sign in, open an account, or (for the trade) apply.
templates/security/login.html.twig, account_door_controller.js.
A picture on one side and the forms on the other. Who is signing in
("for your home" / "for the trade") draws the other picture across like
a curtain and turns the swing tag over; the tabs slide the forms.
═══════════════════════════════════════════════════════════════════════ */
.mm-door {
--door-accent: var(--mm-sage);
--door-ease: cubic-bezier(0.65, 0, 0.35, 1);
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
min-height: calc(100vh - 140px);
background: var(--mm-cream);
}
.mm-door[data-audience="trade"] { --door-accent: #9a7a45; }
.mm-door[data-audience="home"] [data-for="trade"],
.mm-door[data-audience="trade"] [data-for="home"] { display: none !important; }
.mm-door.is-live [data-for] { animation: mm-door-fade 0.7s ease both; }
@keyframes mm-door-fade {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
/* ── The picture ─────────────────────────────────────────────────────── */
.mm-door__visual {
position: relative;
overflow: hidden;
min-height: 600px;
background: #24221f;
color: #fff;
isolation: isolate;
}
.mm-door__scene { position: absolute; inset: 0; }
.mm-door__scene img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.08);
animation: mm-door-drift 22s ease-out forwards;
}
.mm-door__scene--trade {
clip-path: inset(0 0 0 100%);
transition: clip-path 1.15s var(--door-ease);
}
.mm-door[data-audience="trade"] .mm-door__scene--trade { clip-path: inset(0 0 0 0); }
.mm-door:not(.is-live)[data-audience="trade"] .mm-door__scene--trade { transition: none; }
@keyframes mm-door-drift {
to { transform: scale(1); }
}
/* Darkens the foot of the picture for the words, and carries the curtain. */
.mm-door__veil {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(20, 18, 15, 0.18) 0%, rgba(20, 18, 15, 0) 30%, rgba(20, 18, 15, 0) 45%, rgba(20, 18, 15, 0.72) 100%);
pointer-events: none;
}
/* A length of pleated linen drawn across the picture as it changes. */
.mm-door__veil::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 34%;
transform: translateX(310%);
background:
linear-gradient(90deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 14%, rgba(0, 0, 0, 0) 86%, rgba(0, 0, 0, 0.18)),
repeating-linear-gradient(90deg,
#efe8dc 0, #f7f2ea 9px, #e4dccd 17px, #f3ede3 26px, #ebe3d6 34px);
box-shadow: -24px 0 40px rgba(0, 0, 0, 0.25), 24px 0 40px rgba(0, 0, 0, 0.18);
opacity: 0;
}
.mm-door.is-switching .mm-door__veil::before { animation: mm-door-curtain 1.15s var(--door-ease) both; }
.mm-door.is-switching[data-audience="home"] .mm-door__veil::before { animation-name: mm-door-curtain-back; }
@keyframes mm-door-curtain {
0% { transform: translateX(310%); opacity: 1; }
100% { transform: translateX(-110%); opacity: 1; }
}
@keyframes mm-door-curtain-back {
0% { transform: translateX(-110%); opacity: 1; }
100% { transform: translateX(310%); opacity: 1; }
}
.mm-door__caption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 3.5rem clamp(1.5rem, 5vw, 4rem);
z-index: 2;
}
.mm-door__eyebrow {
font-size: 0.68rem;
letter-spacing: 0.32em;
text-transform: uppercase;
margin: 0 0 0.9rem;
opacity: 0.85;
}
.mm-door__headline {
color: #fff;
font-size: clamp(2.2rem, 3.6vw, 3.4rem);
font-weight: 300;
line-height: 1.08;
margin: 0 0 1.6rem;
max-width: 15ch;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.25);
}
.mm-door__headline span { display: block; }
.mm-door__perks {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.55rem 1.6rem;
font-size: 0.86rem;
max-width: 34rem;
}
.mm-door__perks li {
position: relative;
padding-left: 1.15rem;
line-height: 1.45;
color: rgba(255, 255, 255, 0.92);
}
.mm-door__perks li::before {
content: '';
position: absolute;
left: 0;
top: 0.5em;
width: 6px;
height: 6px;
background: var(--mm-gold);
transform: rotate(45deg);
}
.mm-door.is-live .mm-door__perks li { animation: mm-door-fade 0.7s ease both; }
.mm-door.is-live .mm-door__perks li:nth-child(2) { animation-delay: 0.08s; }
.mm-door.is-live .mm-door__perks li:nth-child(3) { animation-delay: 0.16s; }
.mm-door.is-live .mm-door__perks li:nth-child(4) { animation-delay: 0.24s; }
/* ── The swing tag ───────────────────────────────────────────────────── */
.mm-tag {
position: absolute;
top: 0;
right: clamp(1.5rem, 9%, 7rem);
width: 190px;
z-index: 3;
transform-origin: 50% 0;
perspective: 900px;
}
.mm-door.is-live:not(.is-in) .mm-tag { opacity: 0; }
.mm-door.is-in .mm-tag { animation: mm-tag-drop 1.5s cubic-bezier(0.22, 1.25, 0.36, 1) 0.25s backwards; }
.mm-door.is-in.is-switching .mm-tag { animation: mm-tag-kick 1.6s ease-out both; }
.mm-tag__swing {
transform-origin: 50% 0;
animation: mm-tag-swing 7s ease-in-out 1.8s infinite;
filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.32)) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.2));
}
.mm-tag__thread {
display: block;
width: 1.5px;
height: 118px;
margin: 0 auto;
background: linear-gradient(180deg, rgba(214, 186, 128, 0.25), #d6ba80 35%, #b8975c);
box-shadow: 0 0 1.5px rgba(0, 0, 0, 0.35);
}
.mm-tag__card {
display: grid;
margin-top: -14px;
transform-style: preserve-3d;
transition: transform 1.1s cubic-bezier(0.5, -0.25, 0.25, 1.25);
}
.mm-door[data-audience="trade"] .mm-tag__card { transform: rotateY(180deg); }
.mm-tag__face {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2.6rem 1.1rem 1.5rem;
color: #2c2a26;
background:
radial-gradient(120% 80% at 30% 10%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 60%),
#f8f3ea;
clip-path: polygon(22% 0, 78% 0, 100% 14%, 100% 100%, 0 100%, 0 14%);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.mm-tag__face--back {
transform: rotateY(180deg);
background:
radial-gradient(120% 80% at 70% 10%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 60%),
#efe4cd;
}
.mm-tag__hole {
position: absolute;
top: 13px;
left: 50%;
width: 12px;
height: 12px;
margin-left: -6px;
border-radius: 50%;
background: #24221f;
box-shadow: 0 0 0 3px #d9c9a4;
}
.mm-tag__eyebrow {
font-size: 0.6rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #9a7a45;
margin-bottom: 0.55rem;
}
.mm-tag__title {
font-family: var(--mm-heading);
font-style: italic;
font-size: 1.7rem;
line-height: 1.05;
margin-bottom: 0.55rem;
}
.mm-tag__note {
font-size: 0.7rem;
line-height: 1.45;
color: #6f695f;
}
.mm-tag__retail {
position: relative;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8b8478;
text-decoration: none;
margin-bottom: 0.2rem;
}
.mm-tag__retail::after {
content: '';
position: absolute;
left: -6px;
right: -6px;
top: 52%;
height: 1.5px;
background: #b8975c;
transform: scaleX(0) rotate(-6deg);
transform-origin: left center;
transition: transform 0.5s ease 0.75s;
}
.mm-door[data-audience="trade"] .mm-tag__retail::after { transform: scaleX(1) rotate(-6deg); }
@keyframes mm-tag-drop {
0% { transform: translateY(-120%) rotate(-8deg); }
60% { transform: translateY(3%) rotate(5deg); }
100% { transform: translateY(0) rotate(0); }
}
@keyframes mm-tag-swing {
0%, 100% { transform: rotate(-2.2deg); }
50% { transform: rotate(2.2deg); }
}
@keyframes mm-tag-kick {
0% { transform: rotate(0); }
18% { transform: rotate(-9deg); }
42% { transform: rotate(6deg); }
64% { transform: rotate(-3deg); }
82% { transform: rotate(1.2deg); }
100% { transform: rotate(0); }
}
/* ── The forms ───────────────────────────────────────────────────────── */
.mm-door__side {
display: flex;
align-items: center;
justify-content: center;
padding: 3rem clamp(1.25rem, 5vw, 4.5rem);
}
.mm-door__inner { width: 100%; max-width: 440px; }
.mm-door__audience {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
padding: 4px;
margin-bottom: 1.4rem;
background: var(--mm-linen);
border-radius: 999px;
}
.mm-door__audience button {
position: relative;
z-index: 1;
border: 0;
background: none;
padding: 0.6rem 0.75rem;
font-family: var(--mm-body);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mm-text);
transition: color 0.4s;
cursor: pointer;
}
.mm-door__audience button[aria-pressed="true"] { color: #fff; }
.mm-door__audience-thumb {
position: absolute;
top: 4px;
bottom: 4px;
left: 4px;
width: calc(50% - 4px);
border-radius: 999px;
background: var(--mm-sage);
box-shadow: 0 4px 14px rgba(22, 33, 62, 0.25);
transition: transform 0.55s var(--door-ease), background-color 0.55s, box-shadow 0.55s;
}
.mm-door[data-audience="trade"] .mm-door__audience-thumb {
transform: translateX(100%);
background: linear-gradient(135deg, #c3a46c, #9a7a45);
box-shadow: 0 4px 14px rgba(154, 122, 69, 0.35);
}
.mm-door__card {
background: #fff;
border: 1px solid var(--mm-border);
border-radius: 3px;
padding: 0.4rem 2rem 1.9rem;
box-shadow: 0 30px 60px -38px rgba(44, 42, 38, 0.35);
}
.mm-door__tabs {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
border-bottom: 1px solid var(--mm-border);
}
.mm-door__tab {
padding: 1rem 0.5rem 0.85rem;
text-align: center;
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #8a857d;
text-decoration: none;
transition: color 0.3s;
}
.mm-door__tab:hover { color: var(--mm-charcoal); }
.mm-door__tab[aria-selected="true"] { color: var(--door-accent); }
.mm-door__tab-line {
position: absolute;
left: 0;
bottom: -1px;
width: 50%;
height: 2px;
background: var(--door-accent);
transition: transform 0.5s var(--door-ease), background-color 0.5s;
}
.mm-door[data-tab="register"] .mm-door__tab-line { transform: translateX(100%); }
.mm-door__viewport { position: relative; overflow: hidden; }
.mm-door__viewport.is-animating { transition: height 0.5s var(--door-ease); }
.mm-door__track {
display: flex;
align-items: flex-start;
width: 200%;
transition: transform 0.6s var(--door-ease);
}
.mm-door[data-tab="register"] .mm-door__track { transform: translateX(-50%); }
.mm-door__pane {
flex: 0 0 50%;
width: 50%;
padding: 1.7rem 0.15rem 0.2rem;
transition: opacity 0.45s ease;
}
.mm-door__pane[inert] { opacity: 0; }
.mm-door__title {
font-size: 1.36rem;
font-weight: 400;
margin: 0 0 0.4rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mm-door__lede {
font-size: 0.88rem;
line-height: 1.6;
color: #77716a;
margin: 0 0 1.3rem;
}
.mm-door__title + .mm-door__form,
.mm-door__title + .mm-door__error,
.mm-door__title + .mm-door__notice { margin-top: 1.2rem; }
.mm-door__error,
.mm-door__notice {
font-size: 0.84rem;
line-height: 1.5;
padding: 0.7rem 0.9rem;
margin-bottom: 1rem;
border-left: 2px solid #b24a3b;
background: #fbf1ef;
color: #7c2e24;
animation: mm-door-shake 0.5s ease;
}
.mm-door__error a { color: inherit; text-decoration: underline; }
.mm-door__notice {
border-left-color: var(--mm-gold);
background: #f8f3e8;
color: #5f4d2b;
animation: none;
}
@keyframes mm-door-shake {
0%, 100% { transform: none; }
20% { transform: translateX(-6px); }
40% { transform: translateX(5px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
.mm-door__form { display: block; }
.mm-door__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
/* Fields with their label inside, rising out of the way on focus. Shared
with the account pages. */
.mm-field {
position: relative;
display: block;
margin-bottom: 0.9rem;
--field-accent: var(--door-accent, var(--mm-sage));
}
.mm-field input,
.mm-field select,
.mm-field textarea {
width: 100%;
border: 1px solid #ddd7cd;
border-radius: 2px;
background: #fff;
padding: 1.4rem 0.95rem 0.5rem;
font-family: var(--mm-body);
font-size: 0.95rem;
color: var(--mm-charcoal);
transition: border-color 0.25s, box-shadow 0.25s;
}
.mm-field input:focus,
.mm-field select:focus,
.mm-field textarea:focus {
outline: 0;
border-color: var(--field-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--field-accent) 14%, transparent);
}
.mm-field > span {
position: absolute;
left: 0.95rem;
top: 0.95rem;
font-size: 0.9rem;
color: #8f897f;
pointer-events: none;
transform-origin: left top;
transition: transform 0.22s ease, color 0.22s ease, letter-spacing 0.22s ease;
}
.mm-field input:focus + span,
.mm-field input:not(:placeholder-shown) + span,
.mm-field input:-webkit-autofill + span,
.mm-field select + span,
.mm-field textarea:focus + span,
.mm-field textarea:not(:placeholder-shown) + span {
transform: translateY(-0.6rem) scale(0.74);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--field-accent);
}
.mm-field--password input { padding-right: 3rem; }
.mm-field__reveal {
position: absolute;
right: 0.4rem;
top: 50%;
transform: translateY(-50%);
width: 2.4rem;
height: 2.4rem;
border: 0;
background: none;
color: #9a948a;
display: grid;
place-items: center;
cursor: pointer;
border-radius: 50%;
}
.mm-field__reveal:hover { color: var(--mm-charcoal); }
.mm-field__reveal.is-on { color: var(--field-accent); }
.mm-field__reveal.is-on svg path { stroke-dasharray: 2 2; }
.mm-strength {
display: grid;
grid-template-columns: repeat(4, 1fr) auto;
align-items: center;
gap: 4px;
margin: -0.35rem 0 1rem;
}
.mm-strength i {
height: 3px;
border-radius: 2px;
background: #ebe6dd;
transition: background-color 0.35s ease;
}
.mm-strength span {
font-size: 0.7rem;
color: #8f897f;
margin-left: 0.5rem;
white-space: nowrap;
}
.mm-strength[data-level="1"] i:nth-child(-n+1),
.mm-strength[data-level="2"] i:nth-child(-n+2),
.mm-strength[data-level="3"] i:nth-child(-n+3),
.mm-strength[data-level="4"] i:nth-child(-n+4) { background: var(--mm-gold); }
.mm-strength[data-level="1"] i:nth-child(1) { background: #c9a86b; }
.mm-check {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-size: 0.84rem;
line-height: 1.5;
color: var(--mm-text);
margin-bottom: 0.7rem;
cursor: pointer;
}
.mm-check input {
flex: none;
width: 16px;
height: 16px;
margin-top: 0.2rem;
accent-color: var(--door-accent, var(--mm-sage));
}
.mm-door__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 0.2rem 0 0.6rem;
}
.mm-door__row .mm-check { margin: 0; }
.mm-door__quiet-link {
font-size: 0.8rem;
color: #77716a;
text-decoration: underline;
text-decoration-color: rgba(119, 113, 106, 0.35);
text-underline-offset: 3px;
white-space: nowrap;
}
.mm-door__quiet-link:hover { color: var(--door-accent); }
.mm-door__captcha { margin: 0.6rem 0 0.4rem; }
.mm-door__submit {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
width: 100%;
margin-top: 1rem;
padding: 1rem 1.5rem;
border: 0;
border-radius: 2px;
background: var(--door-accent);
color: #fff;
font-family: var(--mm-body);
font-size: 0.74rem;
letter-spacing: 0.22em;
text-transform: uppercase;
text-decoration: none;
overflow: hidden;
cursor: pointer;
transition: background-color 0.5s, transform 0.2s, box-shadow 0.3s;
}
.mm-door__submit:hover {
color: #fff;
box-shadow: 0 14px 28px -16px var(--door-accent);
transform: translateY(-1px);
}
.mm-door__submit::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
transform: translateX(-100%);
}
.mm-door__submit:hover::after { transition: transform 0.9s ease; transform: translateX(100%); }
.mm-door__spinner {
display: none;
width: 14px;
height: 14px;
border: 1.5px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: mm-door-spin 0.8s linear infinite;
}
.mm-door__submit.is-busy { pointer-events: none; opacity: 0.85; }
.mm-door__submit.is-busy .mm-door__spinner { display: block; }
@keyframes mm-door-spin { to { transform: rotate(360deg); } }
.mm-door__switch {
margin: 1.3rem 0 0;
font-size: 0.84rem;
color: #77716a;
text-align: center;
}
.mm-door__switch a { color: var(--door-accent); }
.mm-door__fineprint {
margin: 1rem 0 0;
font-size: 0.74rem;
line-height: 1.55;
color: #948e84;
text-align: center;
}
.mm-door__fineprint a { color: inherit; }
.mm-door__steps {
list-style: none;
counter-reset: door-step;
margin: 0 0 0.6rem;
padding: 0;
}
.mm-door__steps li {
counter-increment: door-step;
position: relative;
padding: 0 0 1.1rem 2.6rem;
font-size: 0.86rem;
line-height: 1.5;
}
.mm-door__steps li::before {
content: counter(door-step);
position: absolute;
left: 0;
top: -0.1rem;
width: 1.8rem;
height: 1.8rem;
display: grid;
place-items: center;
border: 1px solid #d9c9a4;
border-radius: 50%;
font-family: var(--mm-heading);
font-size: 1rem;
color: #9a7a45;
}
.mm-door__steps li:not(:last-child)::after {
content: '';
position: absolute;
left: 0.9rem;
top: 1.8rem;
bottom: 0.15rem;
width: 1px;
background: #e8dec8;
}
.mm-door__steps strong { display: block; color: var(--mm-charcoal); font-weight: 400; }
.mm-door__steps span { color: #77716a; }
@media (max-width: 991.98px) {
.mm-door { grid-template-columns: 1fr; min-height: 0; }
.mm-door__visual { min-height: 330px; }
.mm-door__caption { padding: 2rem 1.25rem 1.6rem; }
.mm-door__headline { font-size: 2.1rem; margin-bottom: 0; max-width: 12ch; }
.mm-door__perks { display: none; }
.mm-door__eyebrow { display: none; }
.mm-tag { width: 124px; right: 1rem; }
.mm-tag__thread { height: 34px; }
.mm-tag__face { padding: 2rem 0.75rem 1.1rem; }
.mm-tag__title { font-size: 1.25rem; }
.mm-tag__note { display: none; }
.mm-door__side { padding: 2rem 1rem 3rem; }
.mm-door__card { padding: 0.3rem 1.25rem 1.5rem; }
}
@media (max-width: 420px) {
.mm-door__pair { grid-template-columns: 1fr; }
.mm-door__row { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
.mm-door *,
.mm-door *::before,
.mm-door *::after {
animation: none !important;
transition: none !important;
}
.mm-door .mm-tag { opacity: 1 !important; }
}
/* ═══════════════════════════════════════════════════════════════════════
Trade, as a dealer sees the shop: the ribbon across the top and their
price on every product (CurrencyExtension::tradePriceHtml), re-priced in
front of them the first time after signing in (trade_reveal_controller).
═══════════════════════════════════════════════════════════════════════ */
.mm-trade-ribbon {
position: relative;
overflow: hidden;
background: linear-gradient(90deg, #1c2236 0%, #16213e 45%, #1c2236 100%);
color: #f3ead8;
font-family: var(--mm-body);
font-size: 0.62rem;
letter-spacing: 0.18em;
text-transform: uppercase;
line-height: 1;
}
.mm-trade-ribbon::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 30%, rgba(214, 186, 128, 0.45) 50%, transparent 70%);
transform: translateX(-100%);
pointer-events: none;
}
.mm-trade-ribbon.is-revealing { animation: mm-ribbon-down 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.mm-trade-ribbon.is-revealing::after { animation: mm-ribbon-shine 1.6s ease 0.5s both; }
.mm-trade-ribbon__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.5rem 1rem;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.35rem 1.1rem;
}
.mm-trade-ribbon__mark {
padding: 0.28rem 0.55rem;
border: 1px solid rgba(214, 186, 128, 0.6);
color: #d6ba80;
border-radius: 2px;
}
.mm-trade-ribbon__company { color: #fff; }
.mm-trade-ribbon__terms { color: #d6ba80; }
.mm-trade-ribbon__net { opacity: 0.7; }
.mm-trade-ribbon__link {
color: #fff;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(214, 186, 128, 0.7);
}
.mm-trade-ribbon__link:hover { color: #d6ba80; }
@media (max-width: 575.98px) {
.mm-trade-ribbon__net,
.mm-trade-ribbon__company { display: none; }
}
@keyframes mm-ribbon-down {
from { transform: translateY(-100%); opacity: 0; }
to { transform: none; opacity: 1; }
}
@keyframes mm-ribbon-shine {
to { transform: translateX(100%); }
}
.mm-trade-price {
display: inline-flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0 0.45em;
}
.mm-trade-price__now { color: var(--mm-charcoal); transition: color 0.6s ease, text-shadow 0.6s ease; }
.mm-trade-price__retail {
position: relative;
font-size: 0.82em;
color: #9a948a;
text-decoration: none;
transition: opacity 0.5s ease, transform 0.5s ease;
}
.mm-trade-price__retail::after {
content: '';
position: absolute;
left: -2px;
right: -2px;
top: 55%;
height: 1px;
background: #b8975c;
transform-origin: left center;
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.15s;
}
.mm-trade-price__chip {
display: inline-block;
padding: 0.18em 0.45em 0.12em;
border-radius: 2px;
background: #f3ead8;
color: #8a6b37;
font-family: var(--mm-body);
font-size: 0.6em;
letter-spacing: 0.08em;
line-height: 1.2;
vertical-align: 0.15em;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
/* Waiting to be re-priced: the public figure alone. */
.mm-trade-price.is-repricing .mm-trade-price__retail { opacity: 0; transform: translateX(-0.4em); }
.mm-trade-price.is-repricing .mm-trade-price__retail::after { transform: scaleX(0); }
.mm-trade-price.is-repricing .mm-trade-price__chip { opacity: 0; transform: scale(0.4); }
/* Re-pricing: the count runs down, the public figure settles and is struck. */
.mm-trade-price.is-striking .mm-trade-price__now { color: #9a7a45; text-shadow: 0 0 18px rgba(214, 186, 128, 0.45); }
.mm-trade-price.is-striking .mm-trade-price__retail { opacity: 1; transform: none; }
.mm-trade-price.is-striking .mm-trade-price__retail::after { transform: scaleX(1); }
.mm-trade-price.is-striking .mm-trade-price__chip { opacity: 1; transform: scale(1); transition-delay: 0.9s; }
.mm-trade-price.is-repriced .mm-trade-price__chip { animation: mm-chip-glint 1.2s ease 0.1s; }
@keyframes mm-chip-glint {
0% { box-shadow: 0 0 0 0 rgba(214, 186, 128, 0.7); }
100% { box-shadow: 0 0 0 10px rgba(214, 186, 128, 0); }
}
/* On the product page: what a dealer saves on this one. */
.mm-trade-saving {
display: flex;
align-items: center;
gap: 0.75rem;
margin: -0.9rem 0 1.4rem;
padding: 0.7rem 0.9rem;
border-left: 2px solid var(--mm-gold);
background: linear-gradient(90deg, #f8f2e6, rgba(248, 242, 230, 0));
font-size: 0.82rem;
color: #6f5a33;
}
.mm-trade-saving strong { font-weight: 400; color: #8a6b37; }
/* ═══════════════════════════════════════════════════════════════════════
The account in the navigation: a ring with initials, a small menu.
═══════════════════════════════════════════════════════════════════════ */
.mm-account-menu__trigger { border: 0; background: none; padding: 0; cursor: pointer; }
.mm-account-badge {
display: inline-grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--mm-charcoal);
font-family: var(--mm-body);
font-size: 0.6rem;
letter-spacing: 0.06em;
color: var(--mm-charcoal);
transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.mm-account-menu__trigger:hover .mm-account-badge,
.mm-account-menu__trigger[aria-expanded="true"] .mm-account-badge { background: var(--mm-charcoal); color: #fff; }
.mm-account-badge.is-trade {
border-color: #b8975c;
color: #8a6b37;
background: radial-gradient(circle at 30% 25%, #fbf4e4, #efe1c2);
box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(184, 151, 92, 0.55);
}
.mm-account-menu__trigger:hover .mm-account-badge.is-trade,
.mm-account-menu__trigger[aria-expanded="true"] .mm-account-badge.is-trade { background: #b8975c; color: #fff; }
.mm-account-menu__panel {
min-width: 230px;
margin-top: 0.85rem !important;
padding: 0.5rem 0;
border: 1px solid var(--mm-border);
border-radius: 2px;
box-shadow: 0 24px 50px -24px rgba(44, 42, 38, 0.35);
font-size: 0.86rem;
animation: mm-door-fade 0.25s ease both;
}
.mm-account-menu__panel .dropdown-item { padding: 0.45rem 1.1rem; color: var(--mm-text); }
.mm-account-menu__panel .dropdown-item:hover { background: var(--mm-linen); color: var(--mm-charcoal); }
.mm-account-menu__hello {
margin: 0;
padding: 0.45rem 1.1rem 0.7rem;
font-family: var(--mm-heading);
font-size: 1.15rem;
color: var(--mm-charcoal);
line-height: 1.2;
}
.mm-account-menu__trade {
display: block;
margin-top: 0.3rem;
font-family: var(--mm-body);
font-size: 0.62rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #9a7a45;
}
/* ═══════════════════════════════════════════════════════════════════════
Toasts (components/_account_toast.html.twig).
═══════════════════════════════════════════════════════════════════════ */
.mm-toasts {
position: fixed;
right: max(1rem, env(safe-area-inset-right));
bottom: max(1rem, env(safe-area-inset-bottom));
z-index: 1090;
display: grid;
gap: 0.6rem;
width: min(380px, calc(100vw - 2rem));
pointer-events: none;
}
.mm-toast {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
gap: 0.85rem;
align-items: start;
padding: 1rem 0.9rem 1.1rem 1rem;
background: #fff;
border: 1px solid var(--mm-border);
border-left: 3px solid var(--mm-sage);
border-radius: 2px;
box-shadow: 0 26px 50px -24px rgba(44, 42, 38, 0.45);
overflow: hidden;
pointer-events: auto;
opacity: 0;
transform: translateY(18px) scale(0.98);
transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-toast.is-in { opacity: 1; transform: none; }
.mm-toast.is-out { opacity: 0; transform: translateX(30px); }
.mm-toast.is-trade { border-left-color: var(--mm-gold); background: linear-gradient(120deg, #fffdf8, #fbf5e8); }
.mm-toast__icon { color: var(--mm-sage); padding-top: 0.1rem; }
.mm-toast.is-trade .mm-toast__icon { color: #9a7a45; }
.mm-toast__body { display: grid; gap: 0.2rem; font-size: 0.84rem; line-height: 1.5; color: var(--mm-text); }
.mm-toast__body strong { font-family: var(--mm-heading); font-size: 1.2rem; font-weight: 400; color: var(--mm-charcoal); line-height: 1.2; }
.mm-toast__close {
border: 0;
background: none;
color: #9a948a;
width: 1.6rem;
height: 1.6rem;
display: grid;
place-items: center;
cursor: pointer;
}
.mm-toast__close:hover { color: var(--mm-charcoal); }
.mm-toast__timer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: var(--mm-sage);
opacity: 0.25;
transform-origin: left center;
}
.mm-toast.is-trade .mm-toast__timer { background: var(--mm-gold); opacity: 0.5; }
.mm-toast.is-in .mm-toast__timer { animation: mm-toast-timer var(--stay, 7s) linear forwards; }
.mm-toast.is-paused .mm-toast__timer { animation-play-state: paused; }
@keyframes mm-toast-timer { to { transform: scaleX(0); } }
/* ═══════════════════════════════════════════════════════════════════════
The account pages (templates/account/).
═══════════════════════════════════════════════════════════════════════ */
.mm-account { background: var(--mm-cream); padding-bottom: 5rem; }
.mm-account__head {
padding: 3.2rem 0 2.4rem;
background:
radial-gradient(60% 120% at 85% 0%, rgba(184, 151, 92, 0.12), transparent 60%),
var(--mm-linen);
border-bottom: 1px solid var(--mm-border);
}
.mm-account.is-trade .mm-account__head {
background:
radial-gradient(60% 140% at 90% 0%, rgba(184, 151, 92, 0.28), transparent 60%),
#f2ead9;
}
.mm-account__eyebrow {
margin: 0 0 0.6rem;
font-size: 0.66rem;
letter-spacing: 0.26em;
text-transform: uppercase;
color: #9a7a45;
}
.mm-account__hello { margin: 0; font-size: clamp(2rem, 4vw, 3rem); font-weight: 300; }
.mm-account__wrap {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 3rem;
padding-top: 2.5rem;
}
.mm-account__nav { display: flex; flex-direction: column; gap: 0.1rem; position: sticky; top: 110px; align-self: start; }
.mm-account__link {
padding: 0.55rem 0 0.55rem 0.9rem;
border-left: 1px solid var(--mm-border);
font-size: 0.86rem;
color: var(--mm-text);
text-decoration: none;
transition: color 0.2s, border-color 0.2s;
}
.mm-account__link:hover { color: var(--mm-charcoal); border-left-color: #bdb6aa; }
.mm-account__link.is-active { color: var(--mm-charcoal); border-left: 2px solid var(--mm-gold); padding-left: calc(0.9rem - 1px); }
.mm-account__link--out { margin-top: 1rem; color: #9a948a; }
@media (max-width: 767.98px) {
.mm-account__wrap { grid-template-columns: 1fr; gap: 1.5rem; padding-top: 1.25rem; }
.mm-account__nav {
position: static;
flex-direction: row;
overflow-x: auto;
gap: 0.4rem;
padding-bottom: 0.4rem;
scrollbar-width: none;
}
.mm-account__link { border: 1px solid var(--mm-border); border-radius: 999px; padding: 0.4rem 0.9rem; white-space: nowrap; }
.mm-account__link.is-active { border: 1px solid var(--mm-gold); padding: 0.4rem 0.9rem; }
.mm-account__link--out { margin-top: 0; }
}
.mm-account-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.4rem;
border: 1px solid var(--mm-sage);
border-radius: 2px;
background: var(--mm-sage);
color: #fff;
font-family: var(--mm-body);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background-color 0.25s, color 0.25s, transform 0.2s;
}
.mm-account-btn:hover { color: #fff; background: #0f1830; transform: translateY(-1px); }
.mm-account-btn--ghost { background: transparent; color: var(--mm-sage); }
.mm-account-btn--ghost:hover { background: var(--mm-sage); color: #fff; }
.mm-account-btn--gold { background: #9a7a45; border-color: #9a7a45; }
.mm-account-btn--gold:hover { background: #806337; }
.mm-account-link {
font-size: 0.8rem;
letter-spacing: 0.08em;
color: var(--mm-sage);
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-color: rgba(22, 33, 62, 0.3);
}
.mm-account-muted { color: #8f897f; }
.mm-account-back { display: inline-block; margin-bottom: 1.5rem; font-size: 0.82rem; color: #77716a; text-decoration: none; }
.mm-account-note {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.2rem;
margin-bottom: 1.5rem;
border: 1px solid #e7d9b9;
background: #fbf6ea;
font-size: 0.86rem;
}
.mm-account-note strong { display: block; font-weight: 400; color: var(--mm-charcoal); }
.mm-account-note span { color: #77716a; }
.mm-account-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
}
.mm-account-card {
padding: 1.6rem 1.6rem 1.5rem;
background: #fff;
border: 1px solid var(--mm-border);
border-radius: 2px;
transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.mm-account-card:hover { box-shadow: 0 24px 48px -32px rgba(44, 42, 38, 0.35); }
.mm-account-card--wide { grid-column: 1 / -1; }
.mm-account-card--flush { padding: 0; margin-bottom: 1.25rem; overflow-x: auto; }
.mm-account-card__head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.mm-account-card__head h2,
.mm-account-card > h2 { margin: 0; font-size: 1.55rem; }
.mm-account-card__meta { font-size: 0.8rem; color: #8f897f; white-space: nowrap; }
.mm-account-card__eyebrow { margin: 0 0 0.35rem; font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: #9a7a45; }
.mm-account-card__text { font-size: 0.88rem; line-height: 1.65; margin: 0 0 1rem; }
.mm-account-card__empty { font-size: 0.88rem; color: #8f897f; margin: 0 0 1rem; }
.mm-account-card__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mm-account-card--trade-teaser { background: linear-gradient(140deg, #fffdf8, #f5ecda); border-color: #eadcbc; }
@media (max-width: 767.98px) {
.mm-account-grid { grid-template-columns: 1fr; }
}
.mm-account-thumbs {
list-style: none;
margin: 0 0 1rem;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
gap: 0.6rem;
}
.mm-account-thumbs--small { grid-template-columns: repeat(4, 1fr); }
.mm-account-thumbs li {
position: relative;
aspect-ratio: 1;
background: var(--mm-linen);
border-radius: 2px;
overflow: hidden;
}
.mm-account-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mm-account-thumbs li:hover img { transform: scale(1.06); }
.mm-account-thumbs em {
position: absolute;
right: 0.3rem;
bottom: 0.3rem;
padding: 0.1rem 0.4rem;
background: rgba(255, 255, 255, 0.92);
font-style: normal;
font-size: 0.66rem;
border-radius: 2px;
}
.mm-account-thumbs__blank,
.mm-account-thumbs__more {
display: grid;
place-items: center;
width: 100%;
height: 100%;
font-family: var(--mm-heading);
font-size: 1.4rem;
color: #9a948a;
}
.mm-account-orders { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.mm-account-orders a {
display: grid;
grid-template-columns: minmax(0, 1.2fr) auto auto minmax(5rem, auto);
align-items: center;
gap: 1rem;
padding: 0.85rem 0.25rem;
border-bottom: 1px solid #f0ece5;
color: var(--mm-text);
text-decoration: none;
font-size: 0.86rem;
transition: background-color 0.2s, padding 0.2s;
}
.mm-account-orders a:hover { background: #faf7f2; padding-left: 0.6rem; }
.mm-account-orders__ref { color: var(--mm-charcoal); letter-spacing: 0.04em; }
.mm-account-orders__date { color: #8f897f; }
.mm-account-orders__total { text-align: right; color: var(--mm-charcoal); }
@media (max-width: 575.98px) {
.mm-account-orders a { grid-template-columns: 1fr auto; }
.mm-account-orders__date { display: none; }
}
.mm-status {
display: inline-block;
padding: 0.25rem 0.6rem;
border-radius: 999px;
font-size: 0.62rem;
letter-spacing: 0.12em;
text-transform: uppercase;
background: #f0ece5;
color: #6f695f;
white-space: nowrap;
}
.mm-status--confirmed,
.mm-status--processing { background: #e9edf6; color: #2c3e6b; }
.mm-status--shipped { background: #f5ecda; color: #8a6b37; }
.mm-status--delivered { background: #e5efe6; color: #2f6a3a; }
.mm-status--cancelled { background: #f6e6e3; color: #8a3b2f; }
.mm-status--large { font-size: 0.72rem; margin-bottom: 1.5rem; }
/* The trade terms, on the account page. */
.mm-trade-card {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 1.5rem 2.5rem;
align-items: center;
padding: 2rem 2.2rem;
margin-bottom: 1.5rem;
border-radius: 2px;
color: #f3ead8;
background:
radial-gradient(80% 140% at 100% 0%, rgba(214, 186, 128, 0.35), transparent 60%),
linear-gradient(135deg, #1b2440, #16213e 55%, #121a31);
overflow: hidden;
isolation: isolate;
}
.mm-trade-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(105deg, transparent 40%, rgba(214, 186, 128, 0.18) 50%, transparent 60%);
transform: translateX(-100%);
animation: mm-ribbon-shine 2.4s ease 0.4s both;
z-index: -1;
}
.mm-trade-card__eyebrow { margin: 0 0 0.6rem; font-size: 0.64rem; letter-spacing: 0.26em; text-transform: uppercase; color: #d6ba80; }
.mm-trade-card__rate { display: flex; align-items: baseline; gap: 0.9rem; margin: 0 0 0.4rem; }
.mm-trade-card__figure { font-family: var(--mm-heading); font-size: 4.4rem; line-height: 0.9; color: #fff; font-weight: 300; }
.mm-trade-card__figure small { font-size: 0.5em; margin-left: 0.05em; color: #d6ba80; }
.mm-trade-card__off { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: #d6ba80; }
.mm-trade-card__title { font-family: var(--mm-heading); font-size: 1.22rem; color: #fff; margin: 0 0 0.4rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; }
.mm-trade-card__text { margin: 0; font-size: 0.86rem; line-height: 1.6; color: rgba(243, 234, 216, 0.8); }
.mm-trade-card__facts { margin: 0; display: grid; gap: 0.75rem; font-size: 0.84rem; }
.mm-trade-card__facts dt { font-weight: 400; font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: #d6ba80; }
.mm-trade-card__facts dd { margin: 0.15rem 0 0; color: #fff; }
.mm-trade-card__facts a { color: #fff; }
.mm-trade-card .mm-account-btn { justify-self: start; }
@media (max-width: 767.98px) {
.mm-trade-card { grid-template-columns: 1fr; padding: 1.6rem; }
.mm-trade-card__figure { font-size: 3.4rem; }
}
/* An order's progress. */
.mm-journey {
--done: 0;
position: relative;
list-style: none;
display: grid;
grid-template-columns: repeat(5, 1fr);
margin: 0 0 2rem;
padding: 0;
}
.mm-journey::before,
.mm-journey::after {
content: '';
position: absolute;
top: 7px;
left: 10%;
height: 1px;
background: var(--mm-border);
width: 80%;
}
.mm-journey::after {
background: var(--mm-gold);
width: calc(80% * var(--done) / 4);
animation: mm-journey-draw 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.2s backwards;
}
@keyframes mm-journey-draw { from { width: 0; } }
.mm-journey li {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
text-align: center;
font-size: 0.74rem;
color: #9a948a;
}
.mm-journey li::before {
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #d6d0c5;
background: var(--mm-cream);
}
.mm-journey li.is-done { color: var(--mm-charcoal); }
.mm-journey li.is-done::before { background: var(--mm-gold); border-color: var(--mm-gold); box-shadow: 0 0 0 4px rgba(184, 151, 92, 0.15); }
.mm-journey small { color: #9a948a; font-size: 0.68rem; }
.mm-order-lines { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.mm-order-lines th {
padding: 1rem 1.4rem 0.7rem;
font-weight: 400;
font-size: 0.64rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #9a948a;
border-bottom: 1px solid var(--mm-border);
}
.mm-order-lines td { padding: 0.85rem 1.4rem; border-bottom: 1px solid #f2eee8; }
.mm-order-lines tfoot td { border-bottom: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; color: #77716a; }
.mm-order-lines tfoot tr.is-total td { color: var(--mm-charcoal); font-family: var(--mm-heading); font-size: 1.3rem; padding-bottom: 1.2rem; }
/* Settings. */
.mm-settings-index { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin-bottom: 1.5rem; font-size: 0.8rem; }
.mm-settings-index a { color: #77716a; text-decoration: none; border-bottom: 1px solid transparent; }
.mm-settings-index a:hover { color: var(--mm-charcoal); border-bottom-color: var(--mm-gold); }
.mm-settings {
padding: 1.8rem 1.8rem 1.6rem;
margin-bottom: 1.25rem;
background: #fff;
border: 1px solid var(--mm-border);
border-radius: 2px;
scroll-margin-top: 120px;
}
.mm-settings:target { animation: mm-settings-flash 1.6s ease; }
@keyframes mm-settings-flash {
0% { box-shadow: 0 0 0 0 rgba(184, 151, 92, 0.5); }
100% { box-shadow: 0 0 0 14px rgba(184, 151, 92, 0); }
}
.mm-settings__head h2 { margin: 0 0 0.3rem; font-size: 1.55rem; }
.mm-settings__head p { margin: 0 0 1.2rem; font-size: 0.86rem; color: #77716a; }
.mm-settings__head h2:last-child { margin-bottom: 1.2rem; }
.mm-settings__sub { font-family: var(--mm-body); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: #9a7a45; margin: 0.4rem 0 0.9rem; }
.mm-settings__trio { display: grid; grid-template-columns: 1fr 1.4fr 1.2fr; gap: 0 0.75rem; }
.mm-settings__actions { margin-top: 0.6rem; }
.mm-settings__choice { border: 0; margin: 0 0 1.2rem; padding: 0; }
.mm-settings__choice legend { font-size: 0.92rem; color: var(--mm-charcoal); margin-bottom: 0.15rem; }
.mm-settings__hint { font-size: 0.8rem; color: #8f897f; margin: 0 0 0.8rem; }
.mm-settings__options { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.mm-option input { position: absolute; opacity: 0; pointer-events: none; }
.mm-option__card {
display: grid;
justify-items: center;
gap: 0.5rem;
min-width: 150px;
padding: 1rem 1.2rem 0.85rem;
border: 1px solid var(--mm-border);
border-radius: 2px;
color: #9a948a;
cursor: pointer;
transition: border-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.mm-option__card strong { font-weight: 400; font-size: 0.8rem; color: var(--mm-text); }
.mm-option input:checked + .mm-option__card { border-color: var(--mm-gold); color: #9a7a45; box-shadow: 0 0 0 3px rgba(184, 151, 92, 0.15); }
.mm-option input:focus-visible + .mm-option__card { outline: 2px solid var(--mm-sage); outline-offset: 2px; }
@media (max-width: 575.98px) {
.mm-settings { padding: 1.3rem 1.1rem; }
.mm-settings__trio { grid-template-columns: 1fr; }
}
/* The small pages around signing in (account/_small.html.twig). */
.mm-door-small {
display: grid;
place-items: center;
min-height: calc(100vh - 220px);
padding: 3rem 1rem;
background:
radial-gradient(50% 60% at 50% 0%, rgba(184, 151, 92, 0.1), transparent 70%),
var(--mm-cream);
}
.mm-door-small__card { width: 100%; max-width: 440px; padding: 2.2rem 2rem 2rem; animation: mm-door-fade 0.6s ease both; }
.mm-door-small__icon { color: var(--mm-gold); margin-bottom: 0.8rem; }
.mm-door-small .mm-door__submit--link,
.mm-door__submit--link { color: #fff; }
@media (prefers-reduced-motion: reduce) {
.mm-trade-ribbon,
.mm-trade-ribbon::after,
.mm-trade-card::before,
.mm-journey::after,
.mm-toast,
.mm-toast__timer { animation: none !important; transition: none !important; }
}
/* Deleting the account, at the foot of the settings. */
.mm-settings--danger { border-color: #ecd6d1; }
.mm-settings--danger .mm-settings__head h2 { color: #8a3b2f; }
.mm-settings__confirm > summary { list-style: none; }
.mm-settings__confirm > summary::-webkit-details-marker { display: none; }
.mm-settings__confirm[open] > summary { display: none; }
.mm-settings__confirm[open] .mm-settings__form { animation: mm-door-fade 0.4s ease both; }
.mm-settings__list { margin: 0 0 1.2rem; padding-left: 1.1rem; font-size: 0.86rem; line-height: 1.6; color: var(--mm-text); }
.mm-settings__list li { margin-bottom: 0.3rem; }
.mm-account-btn--danger { background: transparent; border-color: #c9a39b; color: #8a3b2f; }
.mm-account-btn--danger:hover { background: #8a3b2f; border-color: #8a3b2f; color: #fff; }
.mm-account-btn--danger-solid { background: #8a3b2f; border-color: #8a3b2f; }
.mm-account-btn--danger-solid:hover { background: #6f2e24; border-color: #6f2e24; }
.mm-settings--danger .mm-field { --field-accent: #8a3b2f; }
/* ── The paint quiz teaser with its fan of paint cards
(blocks/_paint_quiz.html.twig, paint_fan_controller.js). ── */
.mm-quiz__intro--fan {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
align-items: center;
gap: 2rem 4rem;
text-align: left;
}
.mm-quiz__intro--fan .mm-quiz__title,
.mm-quiz__intro--fan .mm-quiz__lead { margin-left: 0; margin-right: 0; }
.mm-quiz__intro--fan .mm-quiz__title { font-size: clamp(1.36rem, 2.45vw, 2.04rem); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; }
.mm-quiz__facts {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.4rem;
list-style: none;
margin: 0 0 2rem;
padding: 0;
font-size: 0.82rem;
color: #77716a;
}
.mm-quiz__intro:not(.mm-quiz__intro--fan) .mm-quiz__facts { justify-content: center; }
.mm-quiz__facts li { position: relative; padding-left: 1.1rem; }
.mm-quiz__facts li::before {
content: '';
position: absolute;
left: 0;
top: 0.5em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--mm-gold);
}
/* Gold, as the colour chart's "Order now" (Sophie): the brand's gold for
the frame, a deeper one for the words; filled on hover. */
.mm-quiz__button--start {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
min-width: 13rem;
padding: 0.75rem 2rem;
background: transparent;
border-color: var(--mm-gold);
color: #86683a;
letter-spacing: 0.04em;
transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.mm-quiz__button--start svg { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mm-quiz__button--start:hover,
.mm-quiz__button--start:focus-visible {
background: var(--mm-gold);
border-color: var(--mm-gold);
color: #fff;
}
.mm-quiz__button--start:hover svg { transform: translateX(5px); }
/* The fan: colour cards on one pivot near their foot. Closed it is one
stack; open, each turns by its place in the row. */
.mm-fan {
--spread: 9deg;
position: relative;
height: 400px;
animation: mm-fan-sway 7s ease-in-out infinite;
animation-play-state: paused;
}
.mm-fan.is-open { animation-play-state: running; }
.mm-fan:hover { --spread: 12.5deg; animation-play-state: paused; }
.mm-fan__card {
--turn: calc((var(--i) - (var(--n) - 1) / 2) * var(--spread));
position: absolute;
left: 50%;
bottom: 10px;
width: 150px;
height: 290px;
margin-left: -75px;
display: flex;
flex-direction: column;
border-radius: 6px;
background: #fdfbf7;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 18px 30px -16px rgba(44, 42, 38, 0.45), 0 2px 4px rgba(44, 42, 38, 0.08);
transform-origin: 50% 88%;
transform: rotate(calc(var(--i) * 0.6deg - 2deg)) translateY(0);
transition: transform 0.9s cubic-bezier(0.22, 1.25, 0.36, 1);
transition-delay: calc(var(--i) * 70ms);
overflow: hidden;
}
.mm-fan.is-open .mm-fan__card { transform: rotate(var(--turn)); }
.mm-fan:hover .mm-fan__card { transition-delay: 0s; transition-duration: 0.5s; }
.mm-fan.is-open .mm-fan__card:hover { transform: rotate(var(--turn)) translateY(-22px); z-index: 20; }
.mm-fan__colour {
flex: 1;
margin: 8px 8px 0;
border-radius: 3px;
background:
linear-gradient(160deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.05)),
var(--c);
}
.mm-fan__label {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.6rem 0.75rem 0.75rem;
text-align: left;
}
.mm-fan__name { font-family: var(--mm-heading); font-size: 1.08rem; line-height: 1.15; color: var(--mm-charcoal); }
.mm-fan__brand { font-size: 0.52rem; letter-spacing: 0.22em; text-transform: uppercase; color: #a49d91; }
@keyframes mm-fan-sway {
0%, 100% { transform: rotate(-1.2deg); }
50% { transform: rotate(1.2deg); }
}
@media (max-width: 991.98px) {
.mm-quiz__intro--fan { grid-template-columns: 1fr; text-align: center; gap: 0.5rem; }
.mm-quiz__intro--fan .mm-fan { order: -1; height: 250px; --spread: 8deg; }
.mm-quiz__intro--fan .mm-quiz__title,
.mm-quiz__intro--fan .mm-quiz__lead { margin-left: auto; margin-right: auto; }
.mm-quiz__intro--fan .mm-quiz__facts { justify-content: center; }
.mm-fan__card { width: 96px; height: 186px; margin-left: -48px; }
.mm-fan__name { font-size: 0.82rem; }
.mm-fan__brand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.mm-fan, .mm-fan__card { animation: none; transition: none; }
}
/* ── The colour consultation services page (consultation/index.html.twig). ── */
.mm-services { padding: 4rem 0 5rem; }
.mm-services__head { max-width: 860px; margin: 0 auto 3rem; text-align: center; }
.mm-services__eyebrow { font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; color: #9a7a45; margin-bottom: 0.8rem; }
.mm-services__title { font-size: clamp(1.56rem, 2.99vw, 2.45rem); font-weight: 400; margin: 0 0 1.1rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mm-services__intro { font-size: 1.05rem; line-height: 1.75; color: #6b665e; margin: 0 auto; max-width: 680px; }
.mm-services__offers {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2.5rem;
margin-bottom: 4.5rem;
}
.mm-service { display: flex; flex-direction: column; }
.mm-service__image {
position: relative;
display: block;
aspect-ratio: 4 / 3;
border-radius: 12px;
overflow: hidden;
background: var(--mm-linen);
}
.mm-service__image img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.mm-service:hover .mm-service__image img { transform: scale(1.045); }
.mm-service__badge {
position: absolute;
left: 1rem;
top: 1rem;
padding: 0.4rem 0.8rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
font-size: 0.66rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mm-charcoal);
}
.mm-service__body { padding: 1.6rem 0.25rem 0; display: flex; flex-direction: column; flex: 1; }
.mm-service__title { font-size: 1.43rem; font-weight: 400; margin: 0 0 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mm-service__text { font-size: 1rem; line-height: 1.75; color: #5f5a52; margin: 0 0 1rem; }
.mm-service__points { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 0.45rem; font-size: 0.9rem; }
.mm-service__points li { position: relative; padding-left: 1.4rem; }
.mm-service__points li::before {
content: '';
position: absolute;
left: 0;
top: 0.45em;
width: 10px;
height: 6px;
border-left: 1.5px solid var(--mm-gold);
border-bottom: 1.5px solid var(--mm-gold);
transform: rotate(-45deg);
}
.mm-service__button {
align-self: flex-start;
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.95rem 1.7rem;
border-radius: 999px;
background: var(--mm-charcoal);
color: #fff;
font-size: 0.92rem;
letter-spacing: 0.03em;
text-decoration: none;
transition: background-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.mm-service__button svg { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mm-service__button:hover { color: #fff; background: #16213e; transform: translateY(-2px); box-shadow: 0 18px 30px -18px rgba(22, 33, 62, 0.6); }
.mm-service__button:hover svg { transform: translateX(5px); }
.mm-service__button--ghost { background: transparent; color: var(--mm-charcoal); border: 1px solid var(--mm-charcoal); }
.mm-service__button--ghost:hover { background: var(--mm-charcoal); color: #fff; }
.mm-services__how { background: var(--mm-linen); padding: 3.5rem 0; margin-bottom: 4rem; }
.mm-services__subtitle { font-size: 1.36rem; font-weight: 400; margin: 0 0 1.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.mm-services__how .mm-services__subtitle { text-align: center; }
.mm-services__steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.mm-services__steps li { display: flex; flex-direction: column; gap: 0.4rem; text-align: center; align-items: center; font-size: 0.92rem; line-height: 1.65; color: #6b665e; }
.mm-services__steps strong { font-family: var(--mm-heading); font-size: 1.35rem; font-weight: 400; color: var(--mm-charcoal); }
.mm-services__step-no {
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
margin-bottom: 0.4rem;
border-radius: 50%;
border: 1px solid #d9c9a4;
font-family: var(--mm-heading);
font-size: 1.25rem;
color: #9a7a45;
background: #fff;
}
.mm-services__quiz { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; max-width: 980px; }
.mm-services__quiz .mm-services__subtitle { margin-bottom: 0.4rem; }
.mm-services__quiz p { margin: 0; color: #6b665e; max-width: 560px; }
@media (max-width: 767.98px) {
.mm-services { padding-top: 2.5rem; }
.mm-services__offers { grid-template-columns: 1fr; gap: 3rem; }
.mm-services__steps { grid-template-columns: 1fr; }
}
/* ── Feature grid cards (blocks/_feature_grid.html.twig): picture with
rounded corners, words set left beneath it in sentence case, and round
buttons — the homepage pair (a collection, the colour consultation). ── */
.mm-block-feature-grid__image { border-radius: 12px; overflow: hidden; }
.mm-block-feature-grid__image img { transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.mm-block-feature-grid__card:hover .mm-block-feature-grid__image img { transform: scale(1.04); }
.mm-block-feature-grid__body.text-center { text-align: left !important; padding-top: 1.6rem; }
.mm-block-feature-grid__title {
font-family: var(--mm-heading);
font-size: clamp(1.29rem, 1.77vw, 1.7rem);
font-weight: 300;
letter-spacing: 0;
text-transform: lowercase;
color: var(--mm-charcoal);
margin-bottom: 0.8rem;
}
.mm-block-feature-grid__title::first-letter { text-transform: uppercase; }
.mm-block-feature-grid__description { font-size: 1rem; line-height: 1.75; max-width: 34rem; margin-left: 0; }
.mm-block-feature-grid__buttons { justify-content: flex-start; }
.mm-block-feature-grid__button {
border-radius: 999px;
padding: 0.9rem 1.8rem;
letter-spacing: 0.03em;
text-transform: none;
font-size: 0.92rem;
transition: background-color 0.25s, color 0.25s, transform 0.25s;
}
.mm-block-feature-grid__button:hover { transform: translateY(-2px); }
/* The "classic" cards (block style 'classic'; the homepage pair of colour
chart and consultation): a square picture, narrower than its column,
with the words centred beneath it in small capitals and a square outlined
button — after Sophie's design, set in the shop's own type. */
.mm-block-feature-grid--classic .mm-block-feature-grid__col + .mm-block-feature-grid__col { border-left: none; }
.mm-block-feature-grid--classic .mm-block-feature-grid__card { align-items: center; }
.mm-block-feature-grid--classic .mm-block-feature-grid__link,
.mm-block-feature-grid--classic .mm-block-feature-grid__card > .mm-block-feature-grid__image {
width: min(100%, 31rem);
}
.mm-block-feature-grid--classic .mm-block-feature-grid__image { border-radius: 0; aspect-ratio: 1 / 1; margin-bottom: 0; }
.mm-block-feature-grid--classic .mm-block-feature-grid__card:hover .mm-block-feature-grid__image img { transform: scale(1.03); }
.mm-block-feature-grid--classic .mm-block-feature-grid__body.text-center {
text-align: center !important;
padding-top: 1.5rem;
max-width: 31rem;
/* The rest of the card's height, so the buttons sit on one line
whether the text above them takes one line or two. */
flex: 1;
display: flex;
flex-direction: column;
}
.mm-block-feature-grid--classic .mm-block-feature-grid__title {
font-family: var(--mm-title);
font-size: 1.2rem;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.12em;
color: #4a4a4a;
margin-bottom: 0.6rem;
}
.mm-block-feature-grid--classic .mm-block-feature-grid__title::first-letter { text-transform: none; }
.mm-block-feature-grid--classic .mm-block-feature-grid__description {
font-family: var(--mm-body);
font-size: 1rem;
line-height: 1.7;
color: #6b6b6b;
margin: 0 auto;
}
.mm-block-feature-grid--classic .mm-block-feature-grid__buttons { justify-content: center; margin-top: auto; padding-top: 1.25rem; }
/* Gold rather than black (Sophie): the brand's gold for the frame, a
deeper one for the words so they read on white; filled on hover. */
.mm-block-feature-grid--classic .mm-block-feature-grid__button {
min-width: 13rem;
padding: 0.75rem 2rem;
border-radius: 0;
border-color: var(--mm-gold);
color: #86683a;
font-family: var(--mm-body);
font-size: 0.95rem;
letter-spacing: 0.04em;
}
.mm-block-feature-grid--classic .mm-block-feature-grid__button:hover,
.mm-block-feature-grid--classic .mm-block-feature-grid__button:focus-visible {
transform: none;
background: var(--mm-gold);
border-color: var(--mm-gold);
color: #fff;
}
/* The "portrait" cards (block style 'portrait'; the homepage's Blinds,
Sheer, Curtains under the curtain film): tall pictures in a light frame,
the title large on the picture's top, a button at its foot leading into
the configurator. On a phone they sit in a row to swipe through. */
.mm-block-feature-grid--portrait .mm-block-feature-grid__card { position: relative; }
.mm-block-feature-grid--portrait .mm-block-feature-grid__image,
.mm-block-feature-grid--portrait.mm-block-feature-grid--3-up .mm-block-feature-grid__col:nth-child(2) .mm-block-feature-grid__image {
aspect-ratio: 3 / 5;
margin: 0;
border: 8px solid #eeebe6;
border-radius: 0;
box-shadow: none;
}
.mm-block-feature-grid--portrait .mm-block-feature-grid__image img { object-fit: cover; }
.mm-block-feature-grid--portrait .mm-block-feature-grid__body.text-center {
position: absolute;
inset: 8px;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 2.6rem 1rem 2rem;
text-align: center !important;
pointer-events: none;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 64%, rgba(0, 0, 0, 0.3) 100%);
}
/* The title small and wide-spaced, as a label rather than a headline;
the space after the last letter given back on the left so it centres. */
.mm-block-feature-grid--portrait .mm-block-feature-grid__title {
margin: 0;
padding-left: 0.34em;
font-family: var(--mm-title);
font-size: clamp(1.1rem, 1.45vw, 1.35rem);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.34em;
color: #fff;
text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.mm-block-feature-grid--portrait .mm-block-feature-grid__title::first-letter { text-transform: none; }
.mm-block-feature-grid--portrait .mm-block-feature-grid__title a:hover { color: #fff; }
.mm-block-feature-grid--portrait .mm-block-feature-grid__title a { color: inherit; pointer-events: auto; }
.mm-block-feature-grid--portrait .mm-block-feature-grid__description { display: none; }
.mm-block-feature-grid--portrait .mm-block-feature-grid__buttons { margin: 0; justify-content: center; pointer-events: auto; }
/* The gold frame of the colour chart's "Order now", see-through on the
picture (Sophie); the words white, as the gold ones would be lost on a
dark picture. Filled gold on hover. */
.mm-block-feature-grid--portrait .mm-block-feature-grid__button {
min-width: min(13rem, 100%);
padding: 0.75rem 2rem;
border: 1px solid var(--mm-gold);
border-radius: 0;
background: transparent;
color: #fff;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
font-family: var(--mm-body);
font-size: 0.95rem;
letter-spacing: 0.04em;
text-transform: none;
}
.mm-block-feature-grid--portrait .mm-block-feature-grid__button:hover,
.mm-block-feature-grid--portrait .mm-block-feature-grid__button:focus-visible {
background: var(--mm-gold);
border-color: var(--mm-gold);
color: #fff;
text-shadow: none;
transform: none;
}
@media (min-width: 768px) {
/* Level with its neighbours: no lift, just the row's own gutter. */
.mm-block-feature-grid--portrait.mm-block-feature-grid--3-up .mm-block-feature-grid__col:nth-child(2) { margin-top: var(--bs-gutter-y); }
.mm-block-feature-grid--portrait.mm-block-feature-grid--3-up .mm-block-feature-grid__heading { margin-bottom: 3rem; }
}
@media (max-width: 767.98px) {
.mm-block-feature-grid--portrait .mm-block-feature-grid__row {
--bs-gutter-x: 1rem;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: 0.5rem;
}
.mm-block-feature-grid--portrait .mm-block-feature-grid__row::-webkit-scrollbar { display: none; }
.mm-block-feature-grid--portrait .mm-block-feature-grid__col { flex: 0 0 74%; max-width: 74%; scroll-snap-align: center; }
.mm-block-feature-grid--portrait .mm-block-feature-grid__button { padding: 0.7rem 1.2rem; }
}
/* ── Product cards, a closer look (shop/_product_card.html.twig,
product_card_controller.js). Quiet by default; on hover the picture
leans in towards the pointer, a line of facts rises over its foot, and
fabrics offer a free sample. ── */
/* Photographs fill their frame on the browse pages; only cut-outs on white
(cushions, trimmings) sit inside it — the letterbox made every fabric a
square in a white box. */
[data-controller~="shop-results"] .mm-product-card__image-wrap:not(.is-cutout) .card-img-top {
object-fit: cover;
background-color: var(--mm-linen);
}
.mm-product-card:hover .card-img-top { opacity: 1; }
.mm-product-card__image-wrap .card-img-top {
transform-origin: var(--zx, 50%) var(--zy, 50%);
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.mm-product-card:hover .mm-product-card__image-wrap .card-img-top { transform: scale(1.14); }
.mm-product-card:hover .mm-product-card__image-wrap.is-cutout .card-img-top { transform: scale(1.05); }
.mm-product-card--paint:hover .mm-product-card__image-wrap .card-img-top { transform: none; }
.mm-card-facts {
position: absolute;
left: 0.6rem;
right: 0.6rem;
bottom: 0.6rem;
z-index: 3;
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
pointer-events: none;
}
.mm-card-facts span {
padding: 0.32rem 0.6rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: 0.66rem;
letter-spacing: 0.04em;
color: var(--mm-charcoal);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-card-facts span:nth-child(2) { transition-delay: 0.05s; }
.mm-card-facts span:nth-child(3) { transition-delay: 0.1s; }
.mm-product-card:hover .mm-card-facts span { opacity: 1; transform: none; }
.mm-card-sample {
position: absolute;
top: 0.6rem;
right: 0.6rem;
z-index: 4;
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.38rem 0.7rem 0.38rem 0.55rem;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
box-shadow: 0 6px 16px -10px rgba(44, 42, 38, 0.5);
font-family: var(--mm-body);
font-size: 0.66rem;
letter-spacing: 0.06em;
color: var(--mm-charcoal);
cursor: pointer;
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s, color 0.25s;
}
.mm-product-card:hover .mm-card-sample,
.mm-card-sample:focus-visible,
.mm-card-sample.is-done,
.mm-card-sample.is-full { opacity: 1; transform: none; }
.mm-card-sample:hover { background: var(--mm-charcoal); color: #fff; }
.mm-card-sample.is-busy { cursor: progress; opacity: 0.7; }
.mm-card-sample.is-done { background: #2f5d46; color: #fff; }
.mm-card-sample svg { transition: transform 0.3s ease; }
.mm-card-sample.is-full { background: #f3ead8; color: #6f5a33; }
@media (hover: none) {
/* No hover on a phone: the sample button is simply there. */
.mm-card-sample { opacity: 1; transform: none; }
.mm-card-facts { display: none; }
}
.mm-swatch-flight {
position: fixed;
z-index: 2000;
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid #fff;
background-size: cover;
background-position: center;
box-shadow: 0 10px 22px -8px rgba(44, 42, 38, 0.55);
pointer-events: none;
}
/* Cards rise into place as they scroll into view, where the browser can
tie an animation to scrolling; elsewhere they are simply there. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
[data-controller~="shop-results"] .mm-product-card:not(.mm-product-card--scaled) {
animation: mm-card-rise linear both;
animation-timeline: view();
animation-range: entry 0% entry 40%;
}
}
}
@keyframes mm-card-rise {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: none; }
}
/* ==========================================================================
Covers for upholstery (shop/_upholstery_covers.html.twig) and the piece
drawn in the chosen one over its photo (upholstery_cover_controller.js)
========================================================================== */
.mm-cover { border: 0; padding: 0; margin: 0 0 1.5rem; min-width: 0; }
.mm-cover__legend { display: flex; align-items: baseline; gap: .7rem; float: none; width: auto; margin: 0 0 .2rem; font-size: inherit; }
.mm-cover__label { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #8f8576; }
.mm-cover__name { font-family: var(--mm-heading); font-size: 1.25rem; color: var(--mm-charcoal); }
.mm-cover__hint { margin: 0 0 .8rem; font-size: .8rem; color: #9a948a; }
.mm-cover__swatches { display: flex; flex-wrap: wrap; gap: .65rem; }
.mm-cover__group + .mm-cover__group { margin-top: .9rem; }
.mm-cover__group-name { margin: 0 0 .45rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: #9a948a; }
.mm-cover__swatch { position: relative; width: 46px; height: 46px; margin: 0; cursor: pointer; }
/* The radio itself lies over its chip, unseen, so the browser's "choose
one" bubble points at the swatches. */
.mm-cover__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mm-cover__chip {
display: block; width: 100%; height: 100%; border-radius: 50%;
background-size: cover; background-position: center;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease;
}
.mm-cover__swatch:hover .mm-cover__chip { transform: scale(1.07); }
.mm-cover__input:checked + .mm-cover__chip { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 0 0 2px #fff, 0 0 0 3.5px var(--mm-charcoal); }
.mm-cover__input:focus-visible + .mm-cover__chip { outline: 2px solid var(--mm-gold); outline-offset: 5px; }
/* Phones only: the piece in its cover beside the swatches. */
.mm-cover__peek { display: none; }
@media (max-width: 767.98px) {
.mm-cover { position: relative; }
.mm-cover__peek:not([hidden]) {
display: block; position: absolute; top: -.2rem; right: 0; width: 92px; aspect-ratio: 4 / 5;
padding: 0; border: 1px solid var(--mm-border, #e8e4db); border-radius: 6px; background: #fff; overflow: hidden;
}
.mm-cover__peek img { width: 100%; height: 100%; object-fit: contain; }
.mm-cover__swatches, .mm-cover__hint { padding-right: 104px; }
}
.mm-cover__note { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.1rem; margin: .85rem 0 0; font-size: .82rem; color: #8f8576; }
.mm-cover__sample {
display: inline-flex; align-items: center; gap: .35rem; padding: 0; border: 0; background: none;
font-size: .82rem; color: var(--mm-charcoal); cursor: pointer;
text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--mm-gold);
}
.mm-cover__sample svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mm-cover__sample.is-done { color: #5f7f52; text-decoration: none; cursor: default; }
.mm-cover__sample.is-full { color: #a0603a; text-decoration: none; cursor: default; }
/* The stage lies exactly over the photo (the controller measures it); the
wall colour shows through where the piece isn't. */
.mm-cover-stage {
position: absolute; z-index: 2; opacity: 0; pointer-events: none;
transition: opacity .7s ease;
--fv-stage: transparent;
--fv-radius: 0;
}
.mm-cover-stage.is-on { opacity: 1; }
.mm-cover-stage fabric-visualizer { display: block; width: 100%; height: 100%; }
.mm-gallery__main-img[data-upholstery-cover-target] { transition: opacity .7s ease; }
.mm-gallery__main-img.is-covered { opacity: 0; }
.mm-cover-stage__tag {
position: absolute; z-index: 3; left: 12px; bottom: 12px; margin: 0; max-width: calc(100% - 24px);
padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, .88);
font-size: .7rem; letter-spacing: .02em; color: #6f685f; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
.mm-cover-stage, .mm-gallery__main-img { transition: none; }
}
/* ── The stockist atlas: the dealer search on its own page, beside a drawn
map of every stockist (blocks/_colour_consultation.html.twig,
stockist_atlas_controller.js). The search on the left, set like the
newsletter — fields as lines, a square button — with the shops it finds
numbered beneath it; the map on the right, an engraved plate of linen
land on a warm sea that flies to the place searched from. ── */
.mm-consult__options--atlas { max-width: 1240px; }
/* The palette of the trade page's world map: pale blue-grey land on
white, the shop's markets in slate, everything marked in navy. */
.mm-consult__option--atlas {
--atlas-ink: var(--mm-sage);
--atlas-ink-soft: #4f6280;
--atlas-slate: #8aa0b8;
--atlas-land: #e9eff6;
--atlas-market: #cfd9e5;
--atlas-sea: #fcfcfc;
--atlas-line: #dfe5ec;
}
.mm-consult__option--atlas {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: 0 4.5rem;
align-items: start;
text-align: left;
}
.mm-consult__option--atlas .mm-consult__finder { padding-top: 1.5rem; }
.mm-consult__option--atlas .mm-consult__search {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) auto;
gap: 1.25rem 1.5rem;
max-width: none;
margin: 0;
}
.mm-consult__option--atlas .mm-consult__field label {
display: block;
margin-bottom: 0.3rem;
font-size: 0.68rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: #8f8a83;
}
.mm-consult__option--atlas .mm-quiz__input {
height: auto;
padding: 0.45rem 0 0.55rem;
border: none;
border-bottom: 1px solid var(--mm-charcoal);
background-color: transparent;
font-family: var(--mm-body);
font-size: 1.02rem;
color: var(--mm-charcoal);
}
.mm-consult__option--atlas select.mm-quiz__input {
appearance: none;
padding-right: 1.5rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%232c2a26' stroke-width='1.3'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 0.2rem center;
}
.mm-consult__option--atlas .mm-quiz__input:focus { border-bottom-color: var(--atlas-ink); box-shadow: 0 1px 0 var(--atlas-ink); }
.mm-consult__option--atlas .mm-consult__search .mm-quiz__button {
grid-column: auto;
min-width: 10.5rem;
padding: 0.75rem 1.6rem;
font-family: var(--mm-body);
font-size: 0.95rem;
letter-spacing: 0.04em;
}
.mm-consult__locate {
display: inline-flex;
align-items: center;
gap: 0.55rem;
margin-top: 1.25rem;
padding: 0;
border: none;
background: none;
font-family: var(--mm-body);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: #6b6459;
cursor: pointer;
transition: color 0.2s;
}
.mm-consult__locate:hover, .mm-consult__locate:focus-visible { color: var(--atlas-ink); }
.mm-consult__locate.is-busy svg { animation: mm-atlas-spin 1.2s linear infinite; }
@keyframes mm-atlas-spin { to { transform: rotate(360deg); } }
.mm-consult__option--atlas .mm-consult__results { max-width: none; margin: 2.5rem 0 0; }
.mm-consult__option--atlas .mm-consult__stockist {
display: grid;
grid-template-columns: 2.4rem minmax(0, 1fr);
gap: 1.1rem;
padding: 1.5rem 0;
border-top: 1px solid #e6e0d5;
outline: none;
transition: opacity 0.35s ease;
animation: mm-stockist-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--n, 0) * 90ms);
}
.mm-consult__option--atlas .mm-consult__stockist:last-child { border-bottom: 1px solid #e6e0d5; }
@keyframes mm-stockist-in { from { opacity: 0; transform: translateY(16px); } }
.mm-consult__option--atlas.has-lit .mm-consult__stockist:not(.is-lit) { opacity: 0.45; }
.mm-consult__stockist-no {
display: grid;
place-items: center;
width: 2.4rem;
height: 2.4rem;
border: 1px solid var(--atlas-slate);
border-radius: 50%;
font-family: var(--mm-title);
font-size: 1.05rem;
color: var(--atlas-ink);
transition: background 0.3s, color 0.3s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mm-consult__stockist.is-lit .mm-consult__stockist-no { background: var(--atlas-ink); border-color: var(--atlas-ink); color: #fff; transform: scale(1.08); }
.mm-consult__option--atlas .mm-consult__stockist-name { font-family: var(--mm-title); font-size: 1.35rem; font-weight: 400; line-height: 1.25; letter-spacing: 0.02em; }
.mm-consult__option--atlas .mm-consult__distance {
font-family: var(--mm-body);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--atlas-ink-soft);
}
.mm-consult__option--atlas .mm-consult__stockist-address { margin-top: 0.35rem; font-size: 0.95rem; }
.mm-consult__option--atlas .mm-consult__stockist-note { font-size: 0.88rem; }
.mm-consult__option--atlas .mm-consult__stockist-links { align-items: center; margin-top: 0.9rem; gap: 0.5rem 1.25rem; }
.mm-consult__option--atlas .mm-consult__stockist-links a.mm-consult__route {
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.45rem 1rem;
border: 1px solid var(--mm-charcoal);
font-family: var(--mm-body);
font-size: 0.85rem;
letter-spacing: 0.04em;
text-decoration: none;
transition: background 0.2s, color 0.2s;
}
.mm-consult__route svg { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.mm-consult__option--atlas .mm-consult__stockist-links a.mm-consult__route:hover { background: var(--atlas-ink); border-color: var(--atlas-ink); color: #fff; }
.mm-consult__route:hover svg { transform: translateX(4px); }
/* The plate. */
.mm-atlas {
position: sticky;
top: 110px;
aspect-ratio: 4 / 5;
max-height: calc(100vh - 140px);
min-height: 440px;
width: 100%;
overflow: hidden;
background: var(--atlas-sea);
border: 1px solid var(--atlas-line);
isolation: isolate;
}
.mm-atlas__map, .mm-atlas__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-atlas__map { opacity: 0; transition: opacity 1s ease; }
.mm-atlas.is-ready .mm-atlas__map { opacity: 1; }
.mm-atlas__land {
fill: var(--atlas-land);
stroke: #fff;
stroke-width: 0.9;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
.mm-atlas__graticule { display: none; }
/* The markets, as on the trade page's map. */
.mm-atlas__land[data-country="GB"], .mm-atlas__land[data-country="BE"], .mm-atlas__land[data-country="DE"] { fill: var(--atlas-market); }
.mm-atlas__lines { pointer-events: none; overflow: visible; }
.mm-atlas__marks { position: absolute; inset: 0; pointer-events: none; }
.mm-atlas__marks > * { position: absolute; left: 0; top: 0; will-change: transform; }
.mm-atlas__marks > .is-off { visibility: hidden; }
/* Places for bearings. */
.mm-atlas__city {
margin-top: -0.62em;
padding-left: 8px;
font-family: var(--mm-body);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.12em;
line-height: 1.2;
color: rgba(22, 33, 62, 0.55);
white-space: nowrap;
}
.mm-atlas__city::before {
content: '';
position: absolute;
left: -2px;
top: 50%;
width: 4px;
height: 4px;
margin-top: -2px;
border-radius: 50%;
background: rgba(22, 33, 62, 0.4);
}
/* Every stockist, before a search: a navy point that breathes. */
.mm-atlas__dot { width: 0; height: 0; pointer-events: auto; transition: opacity 0.6s; }
.mm-atlas__dot i, .mm-atlas__dot i::before {
position: absolute;
left: -6px;
top: -6px;
width: 12px;
height: 12px;
border-radius: 50%;
}
.mm-atlas__dot i { background: var(--atlas-ink); box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(22, 33, 62, 0.25); }
.mm-atlas__dot i::before {
content: '';
left: 0;
top: 0;
border: 1px solid var(--atlas-ink);
animation: mm-atlas-breathe 3.6s ease-out infinite;
animation-delay: var(--d, 0ms);
}
@keyframes mm-atlas-breathe {
0% { transform: scale(1); opacity: 0.7; }
70%, 100% { transform: scale(3.4); opacity: 0; }
}
.mm-atlas__tip {
position: absolute;
left: 0;
bottom: 14px;
translate: -50% 0;
padding: 0.35rem 0.7rem;
background: #fff;
box-shadow: 0 6px 20px rgba(22, 33, 62, 0.15);
font-family: var(--mm-body);
font-size: 0.82rem;
white-space: nowrap;
color: var(--mm-charcoal);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s, transform 0.2s;
pointer-events: none;
}
.mm-atlas__dot:hover .mm-atlas__tip { opacity: 1; transform: none; }
.mm-atlas.is-found .mm-atlas__dot { opacity: 0.4; }
.mm-atlas.is-found .mm-atlas__dot i::before { animation: none; }
.mm-atlas__dot.is-quiet { display: none; }
/* Where the search was made from. */
.mm-atlas__origin i, .mm-atlas__origin i::before, .mm-atlas__origin i::after {
position: absolute;
left: -7px;
top: -7px;
width: 14px;
height: 14px;
border-radius: 50%;
}
.mm-atlas__origin i { background: var(--atlas-slate); box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--atlas-ink), 0 3px 10px rgba(22, 33, 62, 0.25); }
.mm-atlas__origin i::before, .mm-atlas__origin i::after {
content: '';
left: 0;
top: 0;
border: 1px solid var(--atlas-ink);
opacity: 0;
}
.mm-atlas.is-found .mm-atlas__origin b { opacity: 0; }
.mm-atlas.is-found .mm-atlas__origin i::before { animation: mm-atlas-ripple 2.6s ease-out infinite; }
.mm-atlas.is-found .mm-atlas__origin i::after { animation: mm-atlas-ripple 2.6s ease-out 1.3s infinite; }
@keyframes mm-atlas-ripple {
0% { transform: scale(1); opacity: 0.55; }
100% { transform: scale(4.5); opacity: 0; }
}
/* Its name travels with it on the way in, and steps aside once the pins
have landed (the title says it then). */
.mm-atlas__origin b {
position: absolute;
left: 0;
top: 14px;
translate: -50% 0;
padding: 0.2rem 0.6rem;
background: var(--atlas-ink);
color: #fff;
transition: opacity 0.5s ease 0.4s;
font-family: var(--mm-body);
font-size: 0.75rem;
font-weight: 400;
letter-spacing: 0.08em;
white-space: nowrap;
}
/* The shops found: numbered pins that drop in once the map has arrived. */
.mm-atlas__pin { pointer-events: auto; cursor: pointer; z-index: 2; }
.mm-atlas__pin i {
position: absolute;
left: -15px;
top: -40px;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: 50% 50% 50% 0;
background: var(--atlas-ink);
box-shadow: 0 0 0 2px #fff, 0 8px 18px rgba(22, 33, 62, 0.3);
transform: rotate(-45deg);
opacity: 0;
transition: background 0.3s, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
}
.mm-atlas__pin b {
transform: rotate(45deg);
font-family: var(--mm-title);
font-size: 0.95rem;
font-weight: 400;
color: #fff;
}
.mm-atlas.is-found .mm-atlas__pin i {
opacity: 1;
animation: mm-atlas-drop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
animation-delay: calc(var(--n, 0) * 140ms);
}
@keyframes mm-atlas-drop {
0% { opacity: 0; transform: translateY(-46px) rotate(-45deg) scale(0.6); }
60% { opacity: 1; }
100% { opacity: 1; transform: rotate(-45deg); }
}
.mm-atlas__pin.is-lit { z-index: 4; }
.mm-atlas__pin.is-lit i { background: var(--atlas-ink-soft); transform: rotate(-45deg) scale(1.2); animation: none; }
.mm-consult__option--atlas.has-lit .mm-atlas__pin:not(.is-lit) i { opacity: 0.45; }
/* As the crow flies: an arc out to each shop, drawn after the pins land. */
.mm-atlas__line {
fill: none;
stroke: var(--atlas-ink);
stroke-width: 1.3;
stroke-linecap: round;
stroke-dasharray: var(--len);
stroke-dashoffset: var(--len);
transition: stroke-dashoffset 1s cubic-bezier(0.65, 0, 0.35, 1), stroke 0.3s, stroke-width 0.3s, opacity 0.3s;
transition-delay: calc(var(--n, 0) * 140ms + 300ms), 0s, 0s, 0s;
}
.mm-atlas__line.is-drawn { stroke-dashoffset: 0; }
.mm-atlas__line.is-lit { stroke: var(--atlas-ink); stroke-width: 2.4; }
.mm-consult__option--atlas.has-lit .mm-atlas__line:not(.is-lit) { opacity: 0.25; }
.mm-atlas__km {
translate: -50% -50%;
padding: 0.15rem 0.55rem;
background: rgba(255, 255, 255, 0.92);
font-family: var(--mm-body);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--atlas-ink);
white-space: nowrap;
opacity: 0;
transition: opacity 0.5s ease calc(var(--n, 0) * 140ms + 900ms), background 0.3s, color 0.3s;
}
.mm-atlas__km.is-drawn { opacity: 1; }
.mm-atlas__km.is-lit { background: var(--atlas-ink); color: #fff; z-index: 3; transition-delay: 0s; }
.mm-consult__option--atlas.has-lit .mm-atlas__km:not(.is-lit) { opacity: 0.3; }
/* In hand: dragged, pinched, zoomed. One finger still scrolls the page
up and down; sideways, and with two fingers, it moves the map. */
.mm-atlas { touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.mm-atlas.is-grabbing { cursor: grabbing; }
.mm-atlas.is-grabbing .mm-atlas__tip { opacity: 0; }
/* Stockists too close to tell apart: one ring with their number. */
.mm-atlas__dot.is-grouped { visibility: hidden; }
.mm-atlas__cluster { pointer-events: auto; cursor: pointer; z-index: 2; }
.mm-atlas__cluster i {
position: absolute;
left: -17px;
top: -17px;
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--atlas-ink);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 9px rgba(22, 33, 62, 0.14), 0 6px 16px rgba(22, 33, 62, 0.28);
font-family: var(--mm-title);
font-size: 0.95rem;
font-style: normal;
font-weight: 400;
color: #fff;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mm-atlas__cluster:hover i { transform: scale(1.12); }
.mm-atlas.is-found .mm-atlas__cluster { opacity: 0.45; }
.mm-atlas__dot { cursor: pointer; }
/* Over the caption and the map's buttons while its card is open. */
.mm-atlas__dot.is-open { z-index: 8; }
/* A stockist tapped on the map: its card, in place of its name — what it
keeps, where it is, and the way there (with its website, phone and email
where there are any). */
.mm-atlas__card {
position: absolute;
left: 0;
bottom: 16px;
translate: -50% 0;
display: none;
width: max-content;
max-width: min(17rem, 78vw);
padding: 0.9rem 1rem 0.85rem;
background: #fff;
box-shadow: 0 10px 30px rgba(22, 33, 62, 0.18);
font-family: var(--mm-body);
font-size: 0.82rem;
line-height: 1.45;
color: var(--mm-charcoal);
white-space: normal;
text-align: left;
cursor: auto;
animation: mm-atlas-card 0.25s ease-out;
}
.mm-atlas__dot.is-open .mm-atlas__card { display: block; }
/* No room above the point: the card hangs below it (fitCard). */
.mm-atlas__card.is-below { bottom: auto; top: 16px; }
.mm-atlas__dot.is-open .mm-atlas__tip { display: none; }
@keyframes mm-atlas-card { from { opacity: 0; transform: translateY(4px); } }
.mm-atlas__card-name {
display: block;
font-family: var(--mm-title);
font-size: 1rem;
font-weight: 400;
color: var(--atlas-ink);
}
.mm-atlas__card-note {
display: block;
margin-top: 0.15rem;
font-size: 0.74rem;
letter-spacing: 0.02em;
color: #8a8378;
}
.mm-atlas__card-address { display: block; margin-top: 0.55rem; }
.mm-atlas__card-links {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.2rem;
margin-top: 0.6rem;
}
.mm-atlas__card-links a { color: var(--atlas-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(22, 33, 62, 0.3); word-break: break-word; }
.mm-atlas__card-links a:hover { text-decoration-color: currentColor; }
.mm-atlas__card-links .mm-atlas__card-route {
margin-top: 0.35rem;
text-decoration: none;
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.mm-atlas__controls {
position: absolute;
right: 1.6rem;
bottom: 4.4rem;
z-index: 5;
display: flex;
flex-direction: column;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--atlas-line);
box-shadow: 0 8px 22px -12px rgba(22, 33, 62, 0.3);
}
.mm-atlas__controls button {
display: grid;
place-items: center;
width: 2.4rem;
height: 2.4rem;
padding: 0;
border: none;
background: none;
color: var(--atlas-ink);
cursor: pointer;
transition: background 0.2s, color 0.2s;
}
.mm-atlas__controls button + button { border-top: 1px solid var(--atlas-line); }
.mm-atlas__controls button:hover, .mm-atlas__controls button:focus-visible { background: var(--atlas-ink); color: #fff; }
.mm-atlas__hint {
position: absolute;
left: 50%;
top: 50%;
z-index: 7;
margin: 0;
padding: 0.7rem 1.2rem;
translate: -50% -50%;
background: rgba(22, 33, 62, 0.85);
color: #fff;
font-family: var(--mm-body);
font-size: 0.85rem;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity 0.3s;
}
.mm-atlas__hint.is-shown { opacity: 1; }
@media (hover: none) { .mm-atlas__hint { display: none; } }
@media (min-width: 992px) {
.mm-consult__option--atlas .mm-atlas__controls { bottom: 5.4rem; }
}
/* The plate's furniture: a title, north, a scale, the credit. */
.mm-atlas__caption {
position: absolute;
left: 1.6rem;
top: 1.3rem;
margin: 0;
padding: 0.35rem 0.8rem;
background: rgba(255, 255, 255, 0.92);
font-family: var(--mm-title);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--atlas-ink);
z-index: 4;
}
.mm-atlas__north {
position: absolute;
right: 1.6rem;
top: 1.3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.1rem;
font-family: var(--mm-title);
font-size: 0.75rem;
color: var(--atlas-ink);
z-index: 4;
}
.mm-atlas__scale {
position: absolute;
left: 1.6rem;
bottom: 1.3rem;
display: flex;
align-items: center;
gap: 0.6rem;
z-index: 4;
}
.mm-atlas__scale i {
width: var(--w, 80px);
height: 6px;
border: 1px solid var(--atlas-ink-soft);
border-top: none;
transition: width 0.2s;
}
.mm-atlas__scale em {
font-style: normal;
font-family: var(--mm-body);
font-size: 0.62rem;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--atlas-ink-soft);
}
.mm-atlas__credit {
position: absolute;
right: 1.6rem;
bottom: 1.2rem;
font-size: 0.62rem;
color: #a39d92;
text-decoration: none;
z-index: 4;
}
.mm-atlas__credit:hover { color: var(--atlas-ink); }
/* On a wide screen the map runs the full width and the search floats on
it, top left, as a white card; the shops found are listed in that card,
which scrolls when they are many. No empty column beside a tall map. */
@media (min-width: 992px) {
.mm-consult__option--atlas { display: block; position: relative; }
.mm-consult__option--atlas .mm-atlas {
position: relative;
top: auto;
aspect-ratio: auto;
height: min(80vh, 760px);
min-height: 580px;
max-height: none;
}
.mm-consult__option--atlas .mm-consult__finder {
position: absolute;
z-index: 6;
left: 2.4rem;
top: 2.4rem;
width: min(430px, 40%);
max-height: calc(100% - 4.8rem);
overflow-y: auto;
overscroll-behavior: contain;
padding: 1.9rem 1.9rem 1.6rem;
background: rgba(255, 255, 255, 0.97);
border: 1px solid var(--atlas-line);
box-shadow: 0 28px 60px -28px rgba(22, 33, 62, 0.3);
scrollbar-width: thin;
}
.mm-consult__option--atlas .mm-consult__search { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 1.1rem 1.25rem; }
.mm-consult__option--atlas .mm-consult__search .mm-quiz__button { grid-column: 1 / -1; width: 100%; }
.mm-consult__option--atlas .mm-consult__locate { margin-top: 1rem; }
.mm-consult__option--atlas .mm-consult__results { margin-top: 1.5rem; }
.mm-consult__option--atlas .mm-consult__stockist { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.9rem; padding: 1.15rem 0; }
.mm-consult__option--atlas .mm-consult__stockist-no { width: 2rem; height: 2rem; font-size: 0.95rem; }
.mm-consult__option--atlas .mm-consult__stockist-name { font-size: 1.15rem; }
.mm-consult__option--atlas .mm-consult__stockist-address { font-size: 0.86rem; }
.mm-consult__option--atlas .mm-consult__stockist-note { font-size: 0.84rem; }
.mm-consult__option--atlas .mm-consult__stockist-links { margin-top: 0.7rem; }
/* The title and the scale move to the right: the card has the left. */
.mm-consult__option--atlas .mm-atlas__caption { left: auto; right: 4.2rem; }
.mm-consult__option--atlas .mm-atlas__scale { left: auto; right: 1.6rem; bottom: 2.6rem; flex-direction: row-reverse; }
}
@media (max-width: 991.98px) {
.mm-consult__option--atlas { grid-template-columns: minmax(0, 1fr); }
.mm-atlas { order: -1; position: relative; top: auto; aspect-ratio: 4 / 3; max-height: none; min-height: 0; margin-bottom: 2.5rem; }
.mm-consult__option--atlas .mm-consult__finder { padding-top: 0; }
}
@media (max-width: 575.98px) {
.mm-consult__option--atlas .mm-consult__search { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); }
.mm-consult__option--atlas .mm-consult__search .mm-quiz__button { grid-column: 1 / -1; }
.mm-atlas { aspect-ratio: 1 / 1; }
.mm-atlas__caption { left: 1.1rem; top: 1rem; font-size: 0.75rem; }
.mm-atlas__north { right: 1.1rem; top: 1rem; }
.mm-atlas__scale { left: 1.1rem; bottom: 1rem; }
.mm-atlas__credit { right: 1.1rem; bottom: 0.9rem; }
.mm-atlas__city { font-size: 0.58rem; }
}
@media (prefers-reduced-motion: reduce) {
.mm-atlas__dot i::before, .mm-atlas__origin i::before, .mm-atlas__origin i::after { animation: none; }
.mm-atlas.is-found .mm-atlas__pin i, .mm-consult__option--atlas .mm-consult__stockist { animation: none; }
.mm-atlas__line { transition: none; }
}