/* ==========================================================================
oam-pages.css — the OAM component + chrome layer. Uploaded to /files and
@import-ed by the Website Theme (theme.css). Assembled from the v3a mockup's
oammethod.css + chrome.css (ritual.css stays page-local to home).
LAYERING (see theme.css header):
· Sections A–C are GLOBAL and use ONLY namespaced classes (.oam-* / .hdr2 /
.navband / .acct-*) — safe beside the webshop's Bootstrap DOM.
· Section D (reset + bare-element typography) is the only webshop-hostile part,
so it is scoped under `.oam-site`. Every marketing page wraps its body in
…
. Site chrome (navbar/footer
templates) renders OUTSIDE .oam-site, so the footer is made self-sufficient.
========================================================================== */
/* ============================ A. COMPONENTS ============================== */
/* Layout helpers */
.oam-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.oam-section { padding-block: var(--section-gap); scroll-margin-top: 5.5rem; }
.oam-section--alt { background: var(--oam-bg-alt); }
.oam-section--warm { background: var(--oam-bg-warm); }
/* --- Section shape (2026 mockup) ------------------------------------------------
A section is either a full-width colour band (default, as today) or an inset panel
with rounded corners. The panel keeps its colour on an inner wrapper so the page
background shows around it — which is what produces the mockup's card look.
Radius comes from one token, so changing it changes every panel on the site. */
.oam-section--panel { background: none; padding-block: calc(var(--section-gap) / 2); }
.oam-section--panel > .oam-container { max-width: calc(var(--maxw) + var(--gutter) * 2); }
.oam-section--panel .oam-panel {
border-radius: var(--oam-panel-radius);
padding: var(--oam-panel-inset);
background: var(--oam-panel-bg, var(--oam-bg-alt));
}
@media (max-width: 640px) {
/* Tighter rounding on phones — a large radius on a narrow panel reads as a blob. */
.oam-section--panel .oam-panel { border-radius: calc(var(--oam-panel-radius) * .6); }
}
/* --- Section background, chosen from the brand palette --------------------------
Sets a custom property rather than `background` directly, so the same choice works
for a full-width band and for an inset panel. */
.oam-bg--burgundy { --oam-panel-bg: var(--oam-burgundy); background: var(--oam-burgundy); color: #fff; }
.oam-bg--burgundy-mid { --oam-panel-bg: var(--oam-burgundy-mid); background: var(--oam-burgundy-mid); }
.oam-bg--burgundy-pale { --oam-panel-bg: var(--oam-burgundy-pale); background: var(--oam-burgundy-pale); }
.oam-bg--rose { --oam-panel-bg: var(--oam-rose); background: var(--oam-rose); color: #fff; }
.oam-bg--rose-mid { --oam-panel-bg: var(--oam-rose-mid); background: var(--oam-rose-mid); }
.oam-bg--rose-pale { --oam-panel-bg: var(--oam-rose-pale); background: var(--oam-rose-pale); }
.oam-bg--green { --oam-panel-bg: var(--oam-green); background: var(--oam-green); color: #fff; }
.oam-bg--green-mid { --oam-panel-bg: var(--oam-green-mid); background: var(--oam-green-mid); }
.oam-bg--green-pale { --oam-panel-bg: var(--oam-green-pale); background: var(--oam-green-pale); }
.oam-bg--teal { --oam-panel-bg: var(--oam-teal); background: var(--oam-teal); color: #fff; }
.oam-bg--teal-mid { --oam-panel-bg: var(--oam-teal-mid); background: var(--oam-teal-mid); }
.oam-bg--teal-pale { --oam-panel-bg: var(--oam-teal-pale); background: var(--oam-teal-pale); }
.oam-bg--navy { --oam-panel-bg: var(--oam-navy); background: var(--oam-navy); color: #fff; }
.oam-bg--navy-mid { --oam-panel-bg: var(--oam-navy-mid); background: var(--oam-navy-mid); }
.oam-bg--navy-pale { --oam-panel-bg: var(--oam-navy-pale); background: var(--oam-navy-pale); }
/* A panel never paints the full-width band as well. */
.oam-section--panel.oam-bg--burgundy, .oam-section--panel.oam-bg--burgundy-mid,
.oam-section--panel.oam-bg--burgundy-pale, .oam-section--panel.oam-bg--rose,
.oam-section--panel.oam-bg--rose-mid, .oam-section--panel.oam-bg--rose-pale,
.oam-section--panel.oam-bg--green, .oam-section--panel.oam-bg--green-mid,
.oam-section--panel.oam-bg--green-pale, .oam-section--panel.oam-bg--teal,
.oam-section--panel.oam-bg--teal-mid, .oam-section--panel.oam-bg--teal-pale,
.oam-section--panel.oam-bg--navy, .oam-section--panel.oam-bg--navy-mid,
.oam-section--panel.oam-bg--navy-pale { background: none; }
.oam-narrow { max-width: 760px; margin-inline: auto; }
.oam-stack > * + * { margin-top: var(--para-gap); }
.oam-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.text-center { text-align: center; }
/* Prose helpers (class-based) */
.oam-lead { font-family: var(--font-body); font-size: var(--fs-body-lg); color: var(--oam-ink-soft); max-width: 60ch; }
.oam-caption { font-size: var(--fs-caption); color: var(--oam-muted); }
.oam-accent-script { font-family: var(--font-accent); color: var(--oam-brand); line-height: 1; }
.oam-eyebrow { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-caption); letter-spacing: .16em; text-transform: uppercase; color: var(--oam-accent); }
/* Buttons */
.oam-btn {
--_bg: var(--oam-brand); --_fg: #fff;
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small); line-height: 1;
padding: .95rem 1.6rem; color: var(--_fg); background: var(--_bg);
border: 1px solid transparent; border-radius: 14px; cursor: pointer;
transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
}
.oam-btn:hover { background: #9a2d6d; color:#fff; transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.oam-btn--lg { padding: 1.1rem 2rem; font-size: var(--fs-body); }
.oam-btn--ghost { --_bg: transparent; --_fg: var(--oam-brand); border-color: var(--oam-brand); }
.oam-btn--ghost:hover { background: var(--oam-brand-100); color: var(--oam-brand-700); }
.oam-btn--quiet { --_bg: transparent; --_fg: var(--oam-ink-soft); border-color: var(--oam-line); }
.oam-btn--quiet:hover { background: var(--oam-bg-alt); color: var(--oam-ink); }
/* Hero */
.oam-hero { padding-block: clamp(3.5rem, 8vw, 6.5rem); background:
radial-gradient(900px 420px at 88% -12%, var(--oam-brand-100), transparent 62%),
linear-gradient(180deg, #fff 0%, var(--oam-bg-alt) 100%); }
.oam-hero__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1.05fr .95fr; align-items: center; }
.oam-hero__img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: contain; background: var(--oam-bg-warm); border-radius: 22px; box-shadow: var(--shadow); }
.oam-hero h1 { font-size: var(--fs-hero); }
.oam-hero h1 em { font-style: normal; color: var(--oam-brand); }
/* Cards */
.oam-card { display: flex; flex-direction: column; background: var(--oam-bg);
border: 1px solid var(--oam-line); border-radius: var(--radius); overflow: hidden;
transition: box-shadow var(--transition), transform var(--transition); }
.oam-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.oam-card__body { padding: clamp(1.25rem, 2vw, 1.75rem); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.oam-card__ico { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center;
background: var(--oam-brand-100); color: var(--oam-brand); font-size: 1.4rem; }
.oam-card__title { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); color: var(--oam-ink); }
/* Forms / opt-in */
.oam-inline-form { display: flex; gap: .6rem; flex-wrap: wrap; max-width: 460px; }
.oam-input { flex: 1 1 220px; font: inherit; padding: .9rem 1.1rem; color: var(--oam-ink);
background: #fff; border: 1px solid var(--oam-line); border-radius: 12px; transition: border-color var(--transition), box-shadow var(--transition); }
.oam-input:focus { outline: none; border-color: var(--oam-brand); box-shadow: 0 0 0 3px var(--oam-brand-100); }
/* Product offer */
.oam-offer { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
background: #fff; border: 1px solid var(--oam-line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.oam-offer__media { aspect-ratio: 1/1; background: var(--oam-bg-warm); display:grid; place-items:center; }
.oam-offer__body { padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem,3vw,2.5rem) 0; }
.oam-price { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h3); color: var(--oam-ink); }
.oam-offer__img { width: 100%; height: 100%; object-fit: contain; }
/* Standardised product-image frame (never crops; letterboxes on warm bg) */
.oam-pframe { position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
background: var(--oam-bg-warm); border: 1px solid var(--oam-line); box-shadow: var(--shadow); }
.oam-pframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.oam-pframe--sq { aspect-ratio: 1 / 1; }
/* Deck / pull-a-card (resting state) */
.oam-deck { display: grid; place-items: center; gap: 1.5rem; }
.oam-card-face { width: 240px; aspect-ratio: 5/7; border-radius: 18px; box-shadow: var(--shadow);
background: linear-gradient(160deg, #fff, var(--oam-bg-alt)); border: 1px solid var(--oam-line);
display: grid; place-content: center; gap: .75rem; padding: 1.5rem; text-align: center; }
.oam-card-back { background: radial-gradient(circle at 50% 38%, var(--oam-pink), var(--oam-brand) 70%); border: none; color: #fff; }
.oam-card-back .eye { font-size: 2.5rem; }
.oam-card-title { font-family: var(--font-accent); font-size: 2rem; color: var(--oam-brand); line-height: 1; }
.oam-card-text { font-size: var(--fs-small); color: var(--oam-ink-soft); }
.oam-deck__hint { font-size: var(--fs-caption); color: var(--oam-muted); }
.oam-deck-img { width: 260px; max-width: 100%; height: auto; border-radius: 18px; box-shadow: var(--shadow); }
/* Footer (renders OUTSIDE .oam-site — self-sufficient, no reliance on base rules).
It gets the brand body font on the container so every child (caption links,
tagline, copyright) inherits Manrope instead of the browser default serif —
the base `body { font-family }` lives under .oam-site, which the footer is not in. */
.oam-footer { font-family: var(--font-body); line-height: var(--lh-body);
background: var(--oam-ink); color: #cdd6de; padding-block: var(--section-gap); }
.oam-footer a { color: #e7edf2; text-decoration: none; transition: color var(--transition); }
.oam-footer a:hover { color: #fff; }
.oam-footer img { display: block; height: 38px; max-width: 100%; }
.oam-footer p { margin: 0; }
.oam-footer .oam-p { margin: 0; } /* +oam-p */
.oam-footer__cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.oam-footer h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; color: #fff; margin: 0 0 var(--head-gap); }
.oam-divider { height: 1px; background: rgba(255,255,255,.14); border: 0; margin-block: 2rem; }
/* Responsive (component-level) */
@media (max-width: 860px) {
.oam-hero__grid { grid-template-columns: 1fr; }
.oam-hero__media { order: -1; }
.oam-offer { grid-template-columns: 1fr; }
.oam-offer__media { aspect-ratio: 16/10; }
.oam-offer__body { padding: 0 1.5rem 1.75rem; }
}
@media print { .hdr2, .oam-footer, .oam-btn { display: none !important; } }
/* ============================ B. CHROME (navband header) ================= */
/* Sticky header containing-block fix (framework#91).
Frappe's website.bundle.css sets `html, body { height: 100% }`. A `position: sticky` element
sticks only within its PARENT'S box, so with body constrained to one viewport the header unpins
the moment you scroll past 100vh — it looked like a scroll-hiding bug but the header never had a
tall enough container to stick in. Scoped to .oam-site so desk and non-OAM pages are untouched. */
body.oam-site { height: auto; min-height: 100%; }
.hdr2 { position: sticky; top: 0; z-index: 500; background: var(--oam-bg);
border-bottom: 1px solid var(--oam-line); --navband-radius: 12px; }
.anno { background: var(--oam-accent); color: #fff; text-align: center;
font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600;
letter-spacing: .015em; line-height: 1.3; overflow: hidden; max-height: 2.6rem;
padding: .5rem 1rem; transition: max-height .3s ease, padding .3s ease, opacity .25s ease; }
.anno a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
body.anno-hidden .anno { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }
.nav2 { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter);
min-height: 74px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.nav2__left { display: flex; align-items: center; gap: clamp(.7rem, 1.5vw, 1.5rem); }
.nav2__logo { justify-self: center; display: inline-flex; }
.nav2__logo img { height: 46px; display: block; }
.nav2__right { display: flex; align-items: center; justify-content: space-between; gap: clamp(.7rem, 1.5vw, 1.5rem); }
.nav2__icons { display: flex; align-items: center; gap: .4rem; }
.navlink { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
color: var(--oam-ink); letter-spacing: .01em; display: inline-flex; align-items: center;
gap: .3rem; padding: .5rem 0; cursor: pointer; background: none; border: 0; white-space: nowrap; text-decoration: none; }
.navlink:hover { color: var(--oam-brand); }
.navlink__caret { flex: 0 0 auto; width: 14px; height: 14px; opacity: 0; transition: opacity var(--transition); }
.hasmenu.is-open > .navlink .navlink__caret { opacity: 1; }
.nav2__icon { color: var(--oam-ink); display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 10px; transition: color var(--transition), background var(--transition); }
.nav2__icon:hover { color: var(--oam-brand); background: var(--oam-bg-alt); }
.nav2__icon svg { width: 22px; height: 22px; display: block; }
.hasmenu { position: static; display: inline-flex; align-items: center; }
.navband { position: absolute; top: 100%; left: 1rem;
width: max-content; max-width: calc(100vw - 16px);
background: #ecf6f3; border: 1px solid rgba(45,75,101,.08); border-top: 2px solid var(--oam-accent);
border-radius: var(--navband-radius); box-shadow: var(--shadow); z-index: 20;
opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
transition: opacity .18s ease, transform .18s ease, visibility .18s ease; }
.hasmenu.is-open > .navband { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.navband__inner { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, max-content); padding: 1.5rem 1.7rem 1.7rem; }
.navband__col { padding-inline: 1.4rem; border-left: 1px solid rgba(45,75,101,.14); min-width: 0; }
.navband__col:first-child { border-left: 0; padding-left: 0; }
.navband__h { font-family: var(--font-body); font-weight: 700; font-size: .8rem;
letter-spacing: .12em; text-transform: uppercase; color: var(--oam-ink); margin: 0 0 1rem; }
.navband__links { display: flex; flex-direction: column; gap: .55rem; }
.navband__links a { font-family: var(--font-body); font-size: var(--fs-small); color: var(--oam-ink);
width: fit-content; padding: .1rem 0; line-height: 1.35; text-decoration: none; }
.navband__links a:hover { color: var(--oam-brand); text-decoration: underline;
text-decoration-color: var(--oam-accent); text-underline-offset: 4px; }
/* ---- Mobile navigation (framework#88) ----------------------------------------
Below 860px the hover-driven navbands are unusable (touch has no hover), so the
desktop links are hidden and the hamburger + inline accordion take over. The panel
is built at runtime by cloning the desktop nav — see the OAM Navbar template. */
.mnav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
border: 0; background: none; cursor: pointer; color: var(--oam-ink); border-radius: 10px; }
.mnav-toggle:hover { background: var(--oam-bg-alt); }
.mnav-toggle svg { width: 24px; height: 24px; }
/* hamburger morphs to a cross when open */
.mnav-toggle .bar { transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
.mnav-toggle[aria-expanded="true"] .bar-top { transform: translateY(6px) rotate(45deg); }
.mnav-toggle[aria-expanded="true"] .bar-mid { opacity: 0; }
.mnav-toggle[aria-expanded="true"] .bar-bot { transform: translateY(-6px) rotate(-45deg); }
/* Option B — inline accordion: pushes the page down rather than covering it, so no
overlay, no scroll-lock and no focus trap (chosen by Alex 2026-07-29). */
.mnav { display: none; background: var(--oam-bg); border-top: 1px solid var(--oam-line);
padding: .25rem 1.25rem 1.5rem; max-height: calc(100vh - 74px); overflow-y: auto; }
.mnav-group + .mnav-group { border-top: 1px solid var(--oam-line); }
.mnav-direct { display: block; font-family: var(--font-body); font-weight: 600; color: var(--oam-ink);
padding: 1rem 0; border-top: 1px solid var(--oam-line); }
.mnav-direct:first-child { border-top: 0; }
.mnav-group__btn { width: 100%; display: flex; align-items: center; justify-content: space-between;
gap: 1rem; font: inherit; font-family: var(--font-body); font-weight: 600;
background: none; border: 0; cursor: pointer; color: var(--oam-ink);
padding: 1rem 0; text-align: left; }
.mnav-group__btn .chev { width: 18px; height: 18px; flex: 0 0 auto; transition: transform .25s ease; }
.mnav-group__btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.mnav-panel { display: none; padding-bottom: .9rem; }
.mnav-group__btn[aria-expanded="true"] + .mnav-panel { display: block; }
.mnav-panel__lead { display: block; font-weight: 600; color: var(--oam-brand); padding: .2rem 0 .6rem; }
.mnav-sub { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .12em;
text-transform: uppercase; color: var(--oam-accent); margin: .9rem 0 .5rem; }
.mnav-panel a { display: block; padding: .55rem 0; color: var(--oam-ink); font-size: 1rem; line-height: 1.35; }
.mnav-panel a:hover { color: var(--oam-brand); }
@media (max-width: 860px) {
.nav2 { grid-template-columns: auto 1fr auto; }
.nav2__left { display: none; } /* replaced by .mnav below */
/* Journal is a direct child of .nav2__right; below 860px the header would otherwise be
logo + Journal + 3 icons + hamburger. It is cloned into the accordion (the clone reads
the DOM, not CSS visibility), so hiding it here loses nothing. */
.nav2__right > .hasmenu { display: none; }
.mnav-toggle { display: inline-flex; }
body.mnav-open .mnav { display: block; }
/* the announcement bar's hide-on-scroll must not fight an open menu */
body.mnav-open .anno { max-height: 2.6rem; opacity: 1; }
.navband__inner { display: flex; flex-direction: column; gap: 1.4rem; }
.navband__col { border-left: 0; padding-left: 0; padding-inline: 0; }
}
/* ============================ C. LANDING / ACCOUNT / OA COMPONENTS ======= */
.oam-verse { max-width: 48ch; margin: var(--head-gap) auto 0; }
.oam-verse p { color: var(--oam-ink-soft); max-width: none; }
.oam-verse .oam-p { color: var(--oam-ink-soft); max-width: none; } /* +oam-p */
.oam-verse p + p { margin-top: var(--para-gap); }
.oam-verse .oam-p + .oam-p { margin-top: var(--para-gap); } /* +oam-p */
.oam-verse .soft { color: var(--oam-muted); }
.oam-verse em { font-style: italic; color: var(--oam-ink); }
.oam-verse ul { list-style: none; margin: .4rem 0 0; padding: 0; }
.oam-verse ul li { color: var(--oam-ink-soft); }
.oam-verse ul li + li { margin-top: .25rem; }
.oam-subhead { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h3); color: var(--oam-ink); margin-top: 2.5rem; }
.oam-blocks { display: grid; gap: 1rem; margin-top: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.oam-block { background: color-mix(in srgb, var(--oam-mint) 12%, #fff);
border: 1px solid color-mix(in srgb, var(--oam-mint) 26%, #fff);
border-radius: var(--radius); padding: 1.4rem 1.3rem;
display: flex; flex-direction: column; gap: .5rem; text-align: left; }
.oam-block__t { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4); color: var(--oam-ink); line-height: 1.2; }
.oam-block p { color: var(--oam-ink-soft); font-size: var(--fs-small); max-width: none; margin: 0; }
.oam-block .oam-p { color: var(--oam-ink-soft); font-size: var(--fs-small); max-width: none; margin: 0; } /* +oam-p */
.oam-testi-table { max-width: 720px; margin: 2.5rem auto 0; background: var(--oam-bg);
border: 1px solid var(--oam-line); border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow-sm); text-align: left; }
.oam-testi-row { padding: 1.4rem 1.7rem; }
.oam-testi-row + .oam-testi-row { border-top: 1px solid var(--oam-line); }
.oam-testi-row p { margin: 0; max-width: none; font-family: var(--font-body); font-size: var(--fs-body-lg); font-weight: 400; color: var(--oam-ink); }
.oam-testi-row .oam-p { margin: 0; max-width: none; font-family: var(--font-body); font-size: var(--fs-body-lg); font-weight: 400; color: var(--oam-ink); } /* +oam-p */
.oam-testi-row cite { display: block; margin-top: .5rem; font-style: normal; font-family: var(--font-body);
font-weight: 600; font-size: var(--fs-caption); letter-spacing: .05em; color: var(--oam-accent); }
/* key.jpeg type + colour system — mint anchor / pink H1 / teal H2. Applied to the
landing-type pages via the `.oam-lp` wrapper marker (home, open-acceptance, journal,
retreats, reminder-deck). Content pages (about/contact/shop/testimonials) omit it and
keep the default navy headings. `.oam-anchor` is a standalone class, used on any page. */
.oam-anchor { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.3; color: var(--oam-mint); margin-bottom: 1.1rem; }
.oam-lp h1 { color: var(--oam-pink); line-height: 1.18; }
.oam-lp h1 em { font-style: normal; color: var(--oam-brand); }
.oam-lp h2 { color: var(--oam-accent); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
.oam-lp h2 em { font-style: normal; color: var(--oam-pink); }
.page-home__sub { font-family: var(--font-body); font-weight: 500; max-width: 34ch;
font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.25; color: var(--oam-accent); margin-top: var(--head-gap); }
.page-home__cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.page-home__deck { display: grid; place-items: center; gap: 1rem; }
.oam-btn.btn-cta { background: #fff; color: var(--oam-brand); border-color: var(--oam-brand); border-width: 1.5px; }
.oam-btn.btn-cta:hover { background: var(--oam-brand); color: #fff; border-color: var(--oam-brand); }
.oam-btn.btn-sec { background: #fff; color: var(--oam-accent); border-color: var(--oam-accent); border-width: 1.5px; }
.oam-btn.btn-sec:hover { background: var(--oam-accent); color: #fff; border-color: var(--oam-accent); }
/* Open-acceptance flow pathway */
.oam-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; margin-top: 2.5rem; }
.oam-flow__step { background: color-mix(in srgb, var(--oam-mint) 12%, #fff);
border: 1px solid color-mix(in srgb, var(--oam-mint) 26%, #fff); border-radius: var(--radius);
padding: .8rem 1.15rem; font-family: var(--font-body); font-weight: 700; color: var(--oam-ink); }
.oam-flow__arr { color: var(--oam-accent); font-weight: 700; }
.oam-block--link { text-decoration: none; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.oam-block--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--oam-accent); }
.oam-block .oam-btn { align-self: flex-start; margin-top: .4rem; }
.oam-block__best { color: var(--oam-ink-soft); font-size: var(--fs-small); max-width: none; margin: 0; }
/* Account (members) area — kept for when the portal lands (out of scope this apply) */
.acct-bar { background: var(--oam-bg-alt); border-bottom: 1px solid var(--oam-line); }
.acct-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: .6rem; font-size: var(--fs-small); color: var(--oam-ink-soft); }
.acct-bar strong { color: var(--oam-ink); }
.acct-logout { font: inherit; font-weight: 600; color: var(--oam-brand); background: none; border: 0; cursor: pointer; padding: .3rem .2rem; }
.acct-logout:hover { color: var(--oam-brand-700); text-decoration: underline; }
.acct-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2.5rem,5vw,4rem); align-items: start; }
.acct-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: .1rem; }
.acct-side__group { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--oam-accent); margin: 1.1rem 0 .35rem; }
.acct-side a { font-family: var(--font-body); font-size: var(--fs-small); color: var(--oam-ink-soft); padding: .45rem .7rem; border-radius: 8px; text-decoration: none; }
.acct-side a:hover { background: var(--oam-bg-alt); color: var(--oam-ink); }
.acct-side a[aria-current="page"] { background: var(--oam-brand-100); color: var(--oam-brand); font-weight: 600; }
.acct-content > p { max-width: var(--measure); }
.acct-content > .oam-p { max-width: var(--measure); } /* +oam-p */
.acct-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); margin-top: 1.75rem; }
.acct-card { display: block; text-decoration: none; background: var(--oam-bg); border: 1px solid var(--oam-line); border-radius: var(--radius); padding: 1.3rem; transition: box-shadow var(--transition), transform var(--transition); }
.acct-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-2px); border-color: var(--oam-accent); }
.acct-card__t { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-h4); color: var(--oam-ink); }
.acct-card p { margin: .3rem 0 0; color: var(--oam-ink-soft); font-size: var(--fs-small); max-width: none; }
.acct-card .oam-p { margin: .3rem 0 0; color: var(--oam-ink-soft); font-size: var(--fs-small); max-width: none; } /* +oam-p */
@media (max-width: 860px) { .acct-layout { grid-template-columns: 1fr; } .acct-side { position: static; flex-flow: row wrap; gap: .3rem .5rem; margin-bottom: 1rem; } }
/* ============================ D. SCOPED RESET + BASE ==================== */
/* The only webshop-hostile rules — confined to the page wrapper. Selectors are
wrapped in :where(.oam-site) so they add ZERO specificity: element rules stay
at their natural low weight (like the mockup's bare `h3`/`p`/`*`), so the
design-system component classes (.oam-card__title, .page-home h1, …) keep
winning the cascade — while the :where(.oam-site) prefix still confines every
rule to the page wrapper, so nothing leaks onto the webshop's Bootstrap DOM. */
:where(.oam-site), :where(.oam-site) *, :where(.oam-site) *::before, :where(.oam-site) *::after { box-sizing: border-box; }
:where(.oam-site) * { margin: 0; }
.oam-site {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--oam-ink);
-webkit-font-smoothing: antialiased;
}
:where(.oam-site) img, :where(.oam-site) svg, :where(.oam-site) video { display: block; max-width: 100%; height: auto; }
:where(.oam-site) a { color: var(--oam-brand); text-decoration: none; transition: color var(--transition); }
:where(.oam-site) a:hover { color: var(--oam-brand-700); }
:where(.oam-site) :focus-visible { outline: 3px solid var(--oam-brand); outline-offset: 3px; border-radius: 4px; }
:where(.oam-site) ::selection { background: var(--oam-brand-100); color: var(--oam-ink); }
:where(.oam-site) h1, :where(.oam-site) h2, :where(.oam-site) h3 {
font-family: var(--font-head); font-weight: 700; line-height: var(--lh-head);
letter-spacing: -0.01em; color: var(--oam-ink); text-wrap: balance; margin-bottom: var(--head-gap);
}
:where(.oam-site) h1 { font-size: var(--fs-h1); }
:where(.oam-site) h2 { font-size: var(--fs-h2); }
:where(.oam-site) h3 { font-size: var(--fs-h3); }
:where(.oam-site) h4 { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h4); line-height: 1.3; margin-bottom: var(--head-gap); }
:where(.oam-site) p { color: var(--oam-ink-soft); max-width: var(--measure); }
:where(.oam-site) .oam-p { color: var(--oam-ink-soft); max-width: var(--measure); } /* +oam-p */
:where(.oam-site) p + p { margin-top: var(--para-gap); }
:where(.oam-site) .oam-p + .oam-p { margin-top: var(--para-gap); } /* +oam-p */
:where(.oam-site) small { font-size: var(--fs-caption); color: var(--oam-muted); }
:where(.oam-site) ul, :where(.oam-site) ol { padding-left: 1.25rem; }
@media (prefers-reduced-motion: reduce) { :where(.oam-site) * { animation: none !important; transition: none !important; } }
/* ============================================================================
Page-specific: OAM Stories block (testimonials wall) + Contact Details block.
BEM classes, globally unique — no wrapper scoping needed. Added for the
marketing-page block library (framework#79). */
.page-testimonials__list { display: grid; gap: clamp(3rem, 6vw, 4.75rem); max-width: 1000px; margin-inline: auto; }
.page-testimonials__story { display: grid; gap: clamp(1.1rem, 3vw, 2.5rem); grid-template-columns: 1fr; }
@media (min-width: 840px) { .page-testimonials__story { grid-template-columns: 0.82fr 1.18fr; align-items: start; } }
.page-testimonials__story + .page-testimonials__story { border-top: 1px solid var(--oam-line); padding-top: clamp(3rem, 6vw, 4.75rem); }
.page-testimonials__pull { position: relative; }
/* background:none + padding:0 override Bootstrap's `.mark` highlight (webshop loads
Bootstrap, which paints `.mark`/ with a yellow highlight background). */
.page-testimonials__pull .mark { display: block; background: none; padding: 0; font-family: var(--font-head); font-weight: 700; font-size: 4.5rem; line-height: .4; color: var(--oam-pink); opacity: .55; margin-bottom: 1rem; }
.page-testimonials__quote { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.28; color: var(--oam-brand); letter-spacing: -0.01em; text-wrap: balance; }
.page-testimonials__by { margin-top: 1.1rem; font-weight: 600; font-size: var(--fs-small); color: var(--oam-ink); letter-spacing: .02em; }
.page-testimonials__by::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--oam-mint); vertical-align: middle; margin-right: .6rem; }
.page-testimonials__body p { color: var(--oam-ink-soft); }
.page-testimonials__body .oam-p { color: var(--oam-ink-soft); } /* +oam-p */
.page-testimonials__body p + p { margin-top: var(--para-gap); }
.page-testimonials__body .oam-p + .oam-p { margin-top: var(--para-gap); } /* +oam-p */
/* Two-column contact section (v3a contact.html): message form | reach-us-directly.
Collapses to a single column below 860px, matching the mockup's breakpoint. */
.page-contact__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (max-width: 860px) { .page-contact__grid { grid-template-columns: 1fr; } }
.page-contact__form { display: grid; gap: 1.1rem; max-width: 520px; margin-top: 1.75rem; }
/* `.page-contact__field` is the itself — the input is nested inside it, so the
block can appear twice on a page without duplicate for/id pairs colliding. */
.page-contact__field { display: grid; gap: .4rem; }
.page-contact__flabel { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-caption); color: var(--oam-ink); }
/* override the base .oam-input flex sizing — inside the form it is a full-width grid item */
.page-contact__form .oam-input { flex: none; width: 100%; }
.page-contact__form textarea.oam-input { min-height: 148px; resize: vertical; line-height: 1.6; }
.page-contact__form .oam-btn[disabled] { opacity: .6; cursor: default; }
/* honeypot — removed from view and from the a11y tree, but still fillable by a bot */
.page-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.page-contact__status:empty { display: none; }
.page-contact__status { font-size: var(--fs-small); color: var(--oam-ink-soft); }
.page-contact__status.is-error { color: var(--oam-brand); font-weight: 600; }
.page-contact__status.is-done { margin-top: 1.75rem; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h4); color: var(--oam-accent); }
/* Social row — sits under the reach-us details, matching the header icon buttons
(.nav2__icon in the v3a chrome) so the page has one icon language. */
.page-contact__socials { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .1rem; }
.page-contact__social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: var(--oam-ink); transition: color var(--transition), background var(--transition); }
.page-contact__social-link:hover { color: var(--oam-brand); background: var(--oam-bg-alt); }
.page-contact__social-link svg { width: 21px; height: 21px; display: block; }
.page-contact__detail { margin-bottom: 1.75rem; }
.page-contact__detail:last-child { margin-bottom: 0; }
.page-contact__label { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-caption); letter-spacing: .06em; color: var(--oam-accent); text-transform: uppercase; margin-bottom: .35rem; }
.page-contact__detail p { color: var(--oam-ink-soft); line-height: 1.7; }
.page-contact__detail .oam-p { color: var(--oam-ink-soft); line-height: 1.7; } /* +oam-p */
.page-contact__detail a { color: var(--oam-ink); }
.page-contact__detail a:hover { color: var(--oam-brand); }
/* =====================================================================
2026 mockup additions (framework#115)
Ported from docs/shop/mockups/v3a/oammethod.css. Element rules keep the
:where(.oam-site) prefix so they stay confined to OAM pages and add zero
specificity — they win over the rules above by position, not by weight,
which is what lets a client's own Builder edit still override them.
===================================================================== */
/* H3 is the section *subtitle* — Manrope Medium 28/1.2, not a Roca heading.
Overrides the shared h1/h2/h3 rule above; same specificity, later position. */
:where(.oam-site) h3 {
font-family: var(--font-body); font-weight: 500; line-height: 1.2; letter-spacing: 0;
}
.oam-h3--bold { font-weight: 700; }
/* H6 is the small burgundy label above a major heading — it opens a "section"
in the sense the 2026 mockup uses the word. */
:where(.oam-site) h6 {
font-family: var(--font-body); font-weight: 600; font-size: var(--fs-h6);
line-height: 1.3; color: var(--oam-brand); margin-bottom: var(--head-gap);
}
/* The five-colour steps row: Recognise / Meet / Become Aware / Choose / Practise.
Wraps to two columns below 860px rather than shrinking cards past legibility. */
.oam-steps { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(5, 1fr); }
.oam-step {
border-radius: var(--radius); padding: clamp(1rem, 2vw, 1.5rem); color: #fff;
min-height: 150px; display: flex; flex-direction: column; gap: .5rem;
}
/* Beats :where(.oam-site) p on specificity, so the card's own colour holds. */
.oam-step p { color: inherit; font-size: var(--fs-small); max-width: none; }
.oam-step .oam-p { color: inherit; font-size: var(--fs-small); max-width: none; } /* +oam-p */
.oam-step__title { font-family: var(--font-accent); font-size: 1.75rem; line-height: 1.1; color: inherit; }
.oam-step:nth-child(1) { background: var(--oam-burgundy); }
.oam-step:nth-child(2) { background: var(--oam-rose); }
.oam-step:nth-child(3) { background: var(--oam-green); }
.oam-step:nth-child(4) { background: var(--oam-teal); }
.oam-step:nth-child(5) { background: var(--oam-navy); }
@media (max-width: 860px) {
.oam-steps { grid-template-columns: repeat(2, 1fr); }
}
/* Rounded imagery, matching the panel radius. */
.oam-img--round { border-radius: var(--oam-panel-radius); overflow: hidden; }
/* =====================================================================
2026 STYLE LAYER — docs/shop/mockups/2026-style-spec.md
Mirrors the layer appended to v3b/oammethod.css, so the mockup and the
deployed site are one design rather than two that drift. Style only:
the mockup does not govern copy or section order.
===================================================================== */
/* --- type colour ------------------------------------------------------
Sampled from the mockup (spec §3) — its annotations give size and weight
but never colour. H1 carries TWO colours: rose with the emphasised word
burgundy, which the existing already marks, so no markup changes.
Element selectors stay at (0,0,1) under :where(.oam-site) so a client's
per-block Builder edit still outranks them. */
/* An explicit page background. Never needed in the mockups — a plain HTML page defaults to
white — but a Builder page declares `color-scheme: light dark`, so with no background of our
own the browser painted the canvas black in dark mode and the design sat on it. Belt and
braces alongside disable_auto_dark_mode in builder_setup. */
:where(.oam-site) { background: var(--oam-bg); color: var(--oam-ink); }
:where(.oam-site) h1 { color: var(--oam-rose); }
:where(.oam-site) h2 { color: var(--oam-rose); }
:where(.oam-site) h3 { color: var(--oam-accent); } /* teal — section subtitle */
:where(.oam-site) h6 { color: var(--oam-brand); } /* burgundy — section opener */
:where(.oam-site) h1 em,
:where(.oam-site) h2 em { font-style: normal; color: var(--oam-brand); }
.oam-accent-script { color: var(--oam-rose); font-size: 3rem; line-height: 1.3; }
/* --- buttons ----------------------------------------------------------
Spec §5: outlined at rest, filling on hover — the inverse of the old
solid-at-rest button. The mockup shows both pairs side by side, rest left
and hover right. */
.oam-btn, .btn-cta {
background: #fff;
color: var(--oam-brand);
border: 2px solid var(--oam-brand);
font-weight: 600;
border-radius: var(--radius-sm);
box-shadow: none;
}
.oam-btn:hover, .btn-cta:hover {
background: var(--oam-brand);
color: #fff;
border-color: var(--oam-brand);
transform: none;
}
.oam-btn--secondary { background: #fff; color: var(--oam-accent); border-color: var(--oam-accent); }
.oam-btn--secondary:hover { background: var(--oam-accent); color: #fff; border-color: var(--oam-accent); }
/* --- section rhythm ---------------------------------------------------
Spec §4: white sections alternate with inset rounded panels in
burgundy-pale, the panel wrapping the CONTAINER so the page stays white
around it. The alternation is the spec; the mockup's particular sequence
of sections is not.
Structural part wrapped in :where() to hold the whole selector at (0,1,0):
high enough to beat the base container rule, low enough that a per-block
edit still wins on an ordinary Web Page. (On a Builder page the point is
moot — per-block styles are unlayered and beat every layer.) */
:where(.oam-site) .oam-section--alt,
:where(.oam-site) .oam-section--warm { background: none; }
:where(.oam-site main > section:nth-of-type(even)) > .oam-container {
background: var(--oam-burgundy-pale);
border-radius: var(--oam-panel-radius);
padding: var(--oam-panel-inset);
/* NOT widened. Adding the inset to --maxw made the panel 1276px inside a 1280px viewport,
so it ran edge to edge and read as a full-width band with slightly rounded ends rather
than the inset block the mockup shows. The container's own max-width already leaves the
margin that makes it read as a card. */
}
:where(.oam-site) .oam-section--panel > .oam-container {
background: var(--oam-panel-bg, var(--oam-burgundy-pale));
}
/* Step cards take the panel radius rather than the smaller --radius used by generic blocks. */
.oam-step { border-radius: var(--oam-panel-radius); }