/*
* Norah v6 design-system skin for /h3, version 1.0.0.
*
* Scoped to body.page-h3. The cloned Bricks graph, copy, media, links, and
* section order are unchanged; this file re-expresses every existing
* component in the v6 system from assets/design-systems/norah-ds-v6:
* tokens.css (color, type, space, radius, shadow, gradient) and the
* component anatomy of Button, Card, Badge, List, Divider, Ornament,
* Pattern, and Glass from components/bundle.css.
*
* Non-negotiables applied (README.md, HANDOFF.md):
* - Light only. Marine writes, ice blue is the surface, turquoise is
* interaction. Soft brand tones are surfaces, never text colors.
* - Square: radius-none for surfaces, radius-sm (2px) for controls.
* No pills, no round cards, no orbs. The only round shapes in the
* system are Radio and Ornament circle, neither of which occurs here.
* - Rhombus = marker, star = list bullet. No chevron, no check, no gem.
* - Pattern below, glass above. Body copy never sits directly on pattern.
* - One pattern (hero), one ornament (footer band), one marine surface
* (offer card) per view.
* - One family: TT Firs Neue, with the documented Manrope fallback
* (self-hosted here instead of Google Fonts) in 400/500/600 only.
*
* Bricks uses a 10px root, so DS pixel sizes are written as px.
*/
/* Plus Jakarta Sans (OFL): the closest free match to TT Firs Neue's squared
* geometric grotesque. Latin and Latin Extended subsets, upright and italic. */
@font-face {
font-family: "Norah H3 Jakarta";
src: url("assets/fonts/PlusJakartaSans-Variable-latin.woff2") format("woff2");
font-style: normal;
font-weight: 200 800;
font-display: swap;
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: "Norah H3 Jakarta";
src: url("assets/fonts/PlusJakartaSans-Variable-latin-ext.woff2") format("woff2");
font-style: normal;
font-weight: 200 800;
font-display: swap;
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: "Norah H3 Jakarta";
src: url("assets/fonts/PlusJakartaSans-Variable-Italic-latin.woff2") format("woff2");
font-style: italic;
font-weight: 200 800;
font-display: swap;
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: "Norah H3 Jakarta";
src: url("assets/fonts/PlusJakartaSans-Variable-Italic-latin-ext.woff2") format("woff2");
font-style: italic;
font-weight: 200 800;
font-display: swap;
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: "Norah H3 Manrope";
src: url("assets/fonts/Manrope-Variable.woff2") format("woff2");
font-style: normal;
font-weight: 200 800;
font-display: swap;
}
/* ---------- Tokens (tokens.css, v6) ---------- */
body.page-h3 {
--surface: #ffffff;
--surface-raised: #f5f8fb;
--surface-brand: #c2daef;
--surface-selected: #e9f1f8;
--ink: #29435b;
--ink-muted: #4a6b8a;
--ink-on-brand: #ffffff;
--border: #e1e1e1;
--border-strong: #6b8ba8;
--brand-navy: #29435b;
--brand-blue: #98b5d1;
--brand-sky: #c2daef;
--brand-mint: #a1c9cd;
--brand-grey: #e1e1e1;
--signet-blue: #9bc7dd;
--signet-teal: #07a3a4;
--primary: var(--brand-navy);
--primary-hover: #1f3549;
--accent: #0b7d7e;
--accent-hover: #087071;
--focus: var(--accent);
--glass-fill: #ffffff47; /* 28 %: operator asked twice for more see-through glass (24 Sept) */
--glass-edge: #ffffffe6;
--glass-edge-outer: #98b5d166;
--shadow-sm: 0 1px 2px rgba(41, 67, 91, 0.08);
--shadow-md: 0 6px 20px rgba(41, 67, 91, 0.12);
--shadow-glass: 0 8px 24px rgba(41, 67, 91, 0.1);
--gradient-sky: linear-gradient(160deg, #f4f8fc 0%, #c2daef 100%);
--gradient-sky-vertical: linear-gradient(180deg, #ffffff 0%, #c2daef 100%);
--gradient-mint: linear-gradient(160deg, #f4f8fc 0%, #a1c9cd 100%);
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-16: 64px;
--radius-none: 0;
--radius-sm: 2px;
--radius-md: 4px;
--font-sans: "TT Firs Neue", "Norah H3 Jakarta", "Norah H3 Manrope", system-ui, sans-serif;
--nh-star: url("data:image/svg+xml;utf8,");
--nh-signet: url("assets/brand/norah-ds-v6/norah-hammerer-signet.svg");
--nh-motion: 120ms;
/* Map the legacy Bricks interface onto the v6 tokens so any rule this
* file does not touch still resolves to system colors and type. */
--norah-cream: var(--surface);
--norah-ivory: var(--surface-raised);
--norah-sky: var(--brand-sky);
--norah-sky-deep: var(--brand-blue);
--norah-stone: var(--ink-muted);
--norah-ink: var(--ink);
--norah-white: var(--surface);
--norah-line: var(--border);
--norah-color-page: var(--surface);
--norah-color-surface: var(--surface-raised);
--norah-color-surface-strong: var(--surface);
--norah-color-accent: var(--brand-sky);
--norah-color-accent-strong: var(--brand-blue);
--norah-color-text: var(--ink);
--norah-color-text-muted: var(--ink-muted);
--norah-color-on-accent: var(--ink);
--norah-color-on-dark: var(--ink-on-brand);
--norah-color-border: var(--border);
--norah-color-border-on-accent: var(--border-strong);
--norah-system-font-display: var(--font-sans);
--norah-system-font-body: var(--font-sans);
--norah-system-font-brand: var(--font-sans);
--norah-system-font-signature: var(--font-sans);
--norah-yoga-font-display: var(--font-sans);
--norah-yoga-font-body: var(--font-sans);
--norah-yoga-font-brand: var(--font-sans);
--norah-yoga-font-signature: var(--font-sans);
--norah-font-display: var(--font-sans);
--norah-font-body: var(--font-sans);
--norah-font-brand: var(--font-sans);
--norah-font-signature: var(--font-sans);
--norah-hv-control-radius: var(--radius-sm);
--norah-hv-card-radius: var(--radius-none);
--norah-hv-panel-radius: var(--radius-none);
background: var(--surface);
color: var(--ink);
font-family: var(--font-sans);
}
/* ---------- Base: one voice ---------- */
body.page-h3 .norah-home,
body.page-h3 .norah-home :is(h1, h2, h3, h4, h5, h6, p, a, li, span, button, figcaption, blockquote, cite) {
font-family: var(--font-sans);
}
body.page-h3 .norah-home {
color: var(--ink);
font-size: 15px;
line-height: 22px;
font-weight: 400;
}
body.page-h3 .norah-home :is(h1, h2, h3, h4) {
color: var(--ink);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
text-wrap: balance;
}
body.page-h3 .norah-home h1 {
font-size: 40px;
line-height: 46px;
letter-spacing: -0.01em;
margin-bottom: var(--space-4);
}
body.page-h3 .norah-home h2 {
font-size: 28px;
line-height: 34px;
margin-bottom: var(--space-4);
}
body.page-h3 .norah-home h3 {
font-size: 22px;
line-height: 28px;
margin-bottom: var(--space-2);
}
body.page-h3 .norah-home h4 {
font-size: 17px;
line-height: 24px;
font-weight: 600;
margin-bottom: var(--space-2);
}
body.page-h3 .norah-home :is(p, li, span, figcaption) {
font-size: 15px;
line-height: 22px;
}
body.page-h3 .norah-home p {
color: var(--ink);
margin-bottom: var(--space-3);
}
body.page-h3 .norah-home a {
color: var(--accent);
transition: color var(--nh-motion), background-color var(--nh-motion), border-color var(--nh-motion);
}
body.page-h3 .norah-home a:hover {
color: var(--accent-hover);
}
body.page-h3 .norah-home :focus-visible,
body.page-h3 #brx-footer a:focus-visible {
outline: 2px solid var(--focus);
outline-offset: 2px;
box-shadow: none;
}
/* Lucide: outline, 1.5px stroke, 20px in controls (README "Iconografie"). */
body.page-h3 svg.norah-icon {
width: 20px;
height: 20px;
stroke-width: 1.5;
}
/* No rings, arcs, or generated circle decorations anywhere in the system. */
body.page-h3 .norah-home .norah-circle-decoration,
body.page-h3 .norah-home .norah-hero__orb,
body.page-h3 .norah-home .norah-about__visual::before,
body.page-h3 .norah-home .norah-process::after,
body.page-h3 .norah-home :is(.norah-belief, .norah-process, .norah-entry, .norah-offer__card, .norah-contact, .norah-blue-surface)::before,
body.page-h3 .norah-home :is(.norah-belief, .norah-process, .norah-entry, .norah-offer__card, .norah-contact, .norah-blue-surface)::after {
content: none;
display: none;
}
/* ---------- Eyebrow = Divider (align start, label, rhombus, hairline) ---------- */
body.page-h3 .norah-home .norah-eyebrow,
body.page-h3 .norah-home #brxe-norah-meditation-start-title {
display: flex;
align-items: center;
gap: var(--space-3);
margin: 0 0 var(--space-4);
color: var(--ink-muted);
font-family: var(--font-sans);
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
max-width: none;
}
body.page-h3 .norah-home .norah-eyebrow::before,
body.page-h3 .norah-home #brxe-norah-meditation-start-title::before {
content: "";
flex: none;
width: 7px;
height: 7px;
background: var(--signet-teal);
opacity: 0.8;
transform: rotate(45deg);
}
body.page-h3 .norah-home .norah-eyebrow::after,
body.page-h3 .norah-home #brxe-norah-meditation-start-title::after {
content: "";
flex: 1 1 auto;
max-width: 160px;
height: 1px;
background: var(--border);
}
/* ---------- Button (nh-btn) ----------
* The :is() lists carry an ID so these rules outrank the shared light-button
* contract in norah-responsive.css, which also uses !important. */
body.page-h3 .norah-home :is(.norah-button, .norah-button--light, .norah-nav .norah-button, .norah-actions .norah-button, #brxe-norah-contact-email, #brxe-norah-meditation-cta),
body.page-h3 .norah-home .norah-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
width: auto;
min-height: 40px;
padding: 0 var(--space-4);
border: 1px solid transparent;
border-radius: var(--radius-none);
background: var(--primary) !important;
background-image: none !important;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.28);
color: var(--ink-on-brand) !important;
-webkit-text-fill-color: currentColor !important;
font: 500 15px/22px var(--font-sans);
letter-spacing: 0;
text-decoration: none;
text-transform: none;
white-space: nowrap;
-webkit-backdrop-filter: none;
backdrop-filter: none;
transform: none !important;
transition: background-color var(--nh-motion), border-color var(--nh-motion), color var(--nh-motion) !important;
}
body.page-h3 .norah-home :is(.norah-button, .norah-button--light, .norah-nav .norah-button, .norah-actions .norah-button, #brxe-norah-meditation-cta):hover {
background: var(--primary-hover) !important;
background-image: none !important;
border-color: transparent;
color: var(--ink-on-brand) !important;
transform: none !important;
}
body.page-h3 .norah-home :is(.norah-button, #brxe-norah-contact-email, #brxe-norah-meditation-cta):active {
transform: none !important;
}
/* Small size (header call to action). */
body.page-h3 .norah-home :is(.norah-button--small, .norah-nav .norah-button, #brxe-norah-nav-contact) {
min-height: 32px;
min-block-size: 32px;
padding: 0 var(--space-3);
font-size: 13px;
line-height: 18px;
}
body.page-h3 .norah-home .norah-button--small svg.norah-icon,
body.page-h3 .norah-home .norah-nav .norah-button svg.norah-icon {
width: 16px;
height: 16px;
}
/* Secondary: border-strong, accent text (contact e-mail, menu toggle). */
body.page-h3 .norah-home :is(#brxe-norah-contact-email, .norah-menu-toggle) {
background: transparent !important;
border-radius: var(--radius-none);
border-color: var(--border-strong);
box-shadow: none;
color: var(--accent) !important;
}
body.page-h3 .norah-home :is(#brxe-norah-contact-email, .norah-menu-toggle):hover {
background: var(--surface-selected) !important;
border-color: var(--accent);
color: var(--accent-hover) !important;
}
/* The toggle exists only in the small-screen navigation state. */
body.page-h3 .norah-home .norah-menu-toggle {
display: none;
}
@media (max-width: 63.999rem) {
body.page-h3 .norah-home .norah-nav-ready .norah-menu-toggle {
display: inline-flex;
}
}
/* Text link (hero "So läuft es ab"): accent, 500, no decoration. */
body.page-h3 .norah-home .norah-text-link {
min-height: 40px;
padding: 0;
gap: var(--space-2);
color: var(--accent);
font: 500 15px/22px var(--font-sans);
letter-spacing: 0;
text-transform: none;
text-decoration: none;
}
body.page-h3 .norah-home .norah-text-link:hover {
color: var(--accent-hover);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 4px;
}
body.page-h3 .norah-home .norah-actions {
gap: var(--space-4);
}
/* ---------- Header ---------- */
body.page-h3 .norah-home .norah-header {
background: var(--surface) !important;
background-image: none !important;
border-bottom: 1px solid var(--border);
box-shadow: none;
transition: background-color var(--nh-motion), border-color var(--nh-motion);
}
body.page-h3.norah-header-scrolled .norah-home .norah-header {
background: var(--glass-fill) !important;
border-bottom-color: var(--glass-edge-outer);
box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-glass);
-webkit-backdrop-filter: blur(4px) saturate(1.05);
backdrop-filter: blur(4px) saturate(1.05);
}
body.page-h3 .norah-home .norah-header__inner {
min-height: 72px;
gap: var(--space-6);
}
/* The September image is the mark; the legacy inline lockup stays hidden. */
body.page-h3 .norah-home .norah-header-lockup {
display: none !important;
}
body.page-h3 .norah-home .norah-header .norah-brand > img {
opacity: 1 !important;
}
body.page-h3 .norah-brand__logo {
object-fit: contain;
object-position: left center;
}
body.page-h3 .norah-home .norah-brand:hover {
opacity: 1;
}
body.page-h3 .norah-home .norah-nav {
gap: var(--space-6);
}
body.page-h3 .norah-home .norah-nav__link,
body.page-h3 .norah-home .norah-footer__link {
min-height: 40px;
color: var(--ink-muted);
font: 600 12px/16px var(--font-sans);
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
}
body.page-h3 .norah-home .norah-nav__link:hover,
body.page-h3 .norah-home .norah-footer__link:hover {
color: var(--accent);
text-decoration: none;
}
body.page-h3 .norah-home .norah-nav__link[aria-current],
body.page-h3 .norah-home .norah-nav__link.is-active {
color: var(--ink);
}
/* Small-screen navigation panel: a raised surface with a hairline. */
body.page-h3 .norah-home .norah-menu-toggle {
min-height: 32px;
padding: 0 var(--space-3);
font: 600 12px/16px var(--font-sans);
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (max-width: 63.999rem) {
body.page-h3 .norah-home .norah-nav-ready .norah-nav {
background: var(--surface-raised);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-md);
border-radius: var(--radius-none);
}
}
/* ---------- Hero: Pattern below, Glass above ---------- */
body.page-h3 .norah-home .norah-hero {
position: relative;
isolation: isolate;
overflow: clip;
background: var(--gradient-sky);
padding-block: clamp(48px, 6vw, 96px);
}
/* Pattern focus "arc": the vector signet at 6.2x, so only arcs and light remain. */
body.page-h3 .norah-home .norah-hero::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
width: auto;
height: auto;
border: 0;
border-radius: 0;
background-image: var(--nh-signet);
background-repeat: no-repeat;
background-size: 620% auto;
background-position: 50% 12%;
opacity: 0.9;
pointer-events: none;
}
/* The white wash (25 %) that pulls the pattern back into texture. */
body.page-h3 .norah-home .norah-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: #ffffff;
opacity: 0.25;
pointer-events: none;
}
body.page-h3 .norah-home .norah-hero__grid {
align-items: center;
}
/* Glass: square, fill 60 %, inner light edge, outer brand-blue hairline, 4px blur. */
body.page-h3 .norah-home .norah-hero__copy {
position: relative;
max-width: 640px;
padding: var(--space-8);
background: var(--glass-fill);
border: 1px solid var(--glass-edge-outer);
border-radius: var(--radius-none);
box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-glass);
-webkit-backdrop-filter: blur(4px) saturate(1.05);
backdrop-filter: blur(4px) saturate(1.05);
}
body.page-h3 .norah-home .norah-hero h1,
body.page-h3 .norah-home #brxe-norah-hero-title {
max-width: 18ch;
margin-bottom: var(--space-4);
color: var(--brand-navy);
font-size: clamp(32px, 3.4vw, 40px);
line-height: 1.15;
}
body.page-h3 .norah-home .norah-hero__intro {
max-width: 62ch;
margin-bottom: var(--space-6);
color: var(--ink);
font-size: 15px;
line-height: 22px;
}
body.page-h3 .norah-home .norah-microcopy {
margin-top: var(--space-4) !important;
color: var(--ink-muted);
font-size: 13px;
line-height: 18px;
font-weight: 400;
letter-spacing: 0;
}
/* Portrait: a straight-edged brand-sky frame. The photo keeps its size,
* position, and focal point; only the crown becomes square. */
body.page-h3 .norah-home .norah-hero__art {
aspect-ratio: 0.84;
}
body.page-h3 .norah-home .norah-hero__arch {
border-radius: var(--radius-none) !important;
background: var(--brand-sky);
box-shadow: none;
outline: 1px solid var(--glass-edge-outer);
outline-offset: -1px;
}
body.page-h3 .norah-home .norah-hero__arch::before,
body.page-h3 .norah-home .norah-hero__arch::after {
content: none;
display: none;
}
body.page-h3 .norah-home .norah-hero__image {
border-radius: var(--radius-none);
}
/* The portrait note is a glass strip with the turquoise edge (Glass "edge"). */
body.page-h3 .norah-home .norah-hero__note {
left: 0;
bottom: 8%;
width: min(240px, 72%);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-none);
border-left: 3px solid var(--signet-teal);
color: var(--brand-navy);
font-size: 13px;
line-height: 18px;
font-weight: 500;
overflow: visible;
}
/* ---------- Belief: surface-brand band ---------- */
body.page-h3 .norah-home .norah-belief {
width: 100%;
margin: 0;
padding-block: clamp(48px, 6vw, 96px);
border-radius: var(--radius-none);
background: var(--surface-brand);
color: var(--ink);
box-shadow: none;
overflow: clip;
}
body.page-h3 .norah-home .norah-belief__grid {
align-items: start;
}
body.page-h3 .norah-home .norah-belief h2,
body.page-h3 .norah-home #brxe-norah-belief-title {
max-width: 16ch;
margin: 0;
color: var(--brand-navy);
font-size: clamp(32px, 3.4vw, 40px);
line-height: 1.15;
font-weight: 500;
letter-spacing: -0.01em;
}
body.page-h3 .norah-home .norah-belief__quote {
margin: 0;
padding: 0 0 0 var(--space-6);
border-left: 1px solid var(--border-strong);
}
body.page-h3 .norah-home .norah-belief__quote-text {
margin: 0;
color: var(--ink);
font-size: 22px;
line-height: 28px;
font-style: normal;
font-weight: 400;
letter-spacing: 0;
}
/* ---------- Editorial sections on white ---------- */
body.page-h3 .norah-home :is(.norah-why, .norah-about, .norah-meditation, .norah-crystal-review) {
background: var(--surface);
color: var(--ink);
}
body.page-h3 .norah-home .norah-section--standard {
padding-block: clamp(48px, 6vw, 96px);
}
body.page-h3 .norah-home .norah-section-heading h2,
body.page-h3 .norah-home #brxe-norah-why-title,
body.page-h3 .norah-home #brxe-norah-meditation-title,
body.page-h3 .norah-home #brxe-norah-about-title,
body.page-h3 .norah-home #brxe-norah-process-title,
body.page-h3 .norah-home #brxe-norah-contact-title {
max-width: 22ch;
color: var(--ink);
font-size: 28px;
line-height: 34px;
font-weight: 500;
white-space: normal;
}
body.page-h3 .norah-home .norah-why__lead,
body.page-h3 .norah-home #brxe-norah-why-lead {
max-width: 62ch;
color: var(--ink);
font-size: 15px;
line-height: 22px;
}
/* Why image: cool photo inside a brand-sky frame, straight edges. */
body.page-h3 .norah-home #brxe-norah-why-points.norah-why__visual {
gap: var(--space-3);
}
body.page-h3 .norah-home #brxe-norah-why-image {
border-radius: var(--radius-none);
border: var(--space-3) solid var(--brand-sky);
box-shadow: none;
}
body.page-h3 .norah-home #brxe-norah-why-caption {
color: var(--ink-muted);
font-size: 12px;
line-height: 16px;
}
/* ---------- Process: surface-raised panel, steps as bordered rows ---------- */
body.page-h3 .norah-home .norah-process {
background: var(--surface-raised);
color: var(--ink);
border: 1px solid var(--border);
border-radius: var(--radius-none) !important;
box-shadow: none;
padding: clamp(24px, 4vw, 48px);
}
body.page-h3 .norah-home .norah-process__intro :is(h2, p),
body.page-h3 .norah-home .norah-process__step :is(h3, p) {
color: var(--ink);
}
body.page-h3 .norah-home .norah-process__intro .norah-eyebrow {
color: var(--ink-muted);
}
body.page-h3 .norah-home .norah-process__intro > p:not(.norah-eyebrow) {
max-width: 52ch;
}
body.page-h3 .norah-home .norah-process__step {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
column-gap: var(--space-4);
align-items: start;
padding: var(--space-4) 0;
border-top: 1px solid var(--border);
}
body.page-h3 .norah-home .norah-process__step:last-child {
border-bottom: 1px solid var(--border);
}
/* Step numbers are labels, not circles. */
body.page-h3 .norah-home .norah-process__step::before {
content: counter(norah-yoga-step, decimal-leading-zero);
position: static;
grid-area: 1 / 1;
display: block;
width: auto;
height: auto;
padding-top: 4px;
border: 0;
border-radius: 0;
color: var(--ink-muted);
font: 600 12px/16px var(--font-sans);
letter-spacing: 0.08em;
}
body.page-h3 .norah-home .norah-process__step h3 {
grid-area: 1 / 2;
margin-bottom: var(--space-1) !important;
font-size: 17px;
line-height: 24px;
font-weight: 600;
}
body.page-h3 .norah-home .norah-process__step p {
grid-area: 2 / 2;
margin: 0 !important;
max-width: 62ch;
color: var(--ink);
}
/* ---------- Offer: photo tile with glass title, one marine card ---------- */
body.page-h3 .norah-home .norah-process__offer {
margin-top: clamp(24px, 4vw, 48px);
}
body.page-h3 .norah-home .norah-offer__intro,
body.page-h3 .norah-home #brxe-norah-offer-intro {
border: 1px solid var(--glass-edge-outer);
border-radius: var(--radius-none);
box-shadow: none;
padding: var(--space-6);
background-color: var(--surface-brand);
}
body.page-h3 .norah-home .norah-offer__intro > * {
color: var(--brand-navy);
text-shadow: none;
}
body.page-h3 .norah-home #brxe-norah-offer-title {
max-width: none;
margin: 0;
padding: var(--space-4) var(--space-6);
font-size: 22px;
line-height: 28px;
font-weight: 500;
text-align: left;
background: var(--glass-fill);
border: 1px solid var(--glass-edge-outer);
box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-glass);
-webkit-backdrop-filter: blur(4px) saturate(1.05);
backdrop-filter: blur(4px) saturate(1.05);
}
body.page-h3 .norah-home #brxe-norah-offer-title::before {
content: none;
display: none;
}
body.page-h3 .norah-home .norah-offer__card {
padding: var(--space-6);
border: 0;
border-radius: var(--radius-none) !important;
background: var(--brand-navy);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
color: var(--ink-on-brand);
}
body.page-h3 .norah-home .norah-offer__card h3 {
padding-bottom: var(--space-3);
margin-bottom: var(--space-3);
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
color: var(--ink-on-brand);
font-size: 22px;
line-height: 28px;
font-weight: 500;
}
body.page-h3 .norah-home .norah-offer__card :is(p, li, span):not(.norah-button__label) {
color: var(--ink-on-brand);
font-size: 15px;
line-height: 22px;
}
body.page-h3 .norah-home .norah-offer__card .norah-button__label {
color: inherit;
}
/* List: the four-point star from the signet as the bullet. */
body.page-h3 .norah-home .norah-offer__list {
margin: var(--space-4) 0;
padding: var(--space-4) 0 var(--space-4) 0;
border-top: 1px solid rgba(255, 255, 255, 0.24);
border-bottom: 1px solid rgba(255, 255, 255, 0.24);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
body.page-h3 .norah-home .norah-offer__list li {
display: grid;
grid-template-columns: 20px minmax(0, 1fr);
gap: 0;
padding: 0;
}
body.page-h3 .norah-home .norah-offer__list li::before {
content: "";
display: block;
width: 12px;
height: 12px;
margin: 5px 0 0;
justify-self: start;
border: 0;
border-radius: 0;
background: var(--brand-sky);
-webkit-mask: var(--nh-star) center / contain no-repeat;
mask: var(--nh-star) center / contain no-repeat;
transform: none;
}
/* Badge "brand": hairline, rhombus, versal text on the marine card. */
body.page-h3 .norah-home .norah-offer__note {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-4);
padding: 3px var(--space-2) 3px 7px;
border: 1px solid var(--brand-sky);
border-radius: var(--radius-none);
color: var(--brand-sky);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: normal;
}
/* The diamond bullet before the price was removed on operator request (24 Sept). */
body.page-h3 .norah-home .norah-offer__note::before {
content: none;
display: none;
}
/* Buttons on the marine card invert: surface fill, marine text. */
body.page-h3 .norah-home .norah-offer__card :is(#brxe-norah-offer-direct-cta, #brxe-norah-offer-cta),
body.page-h3 .norah-home .norah-offer__card :is(#brxe-norah-offer-direct-cta, #brxe-norah-offer-cta):hover {
background: var(--surface) !important;
border-color: var(--surface);
box-shadow: none;
color: var(--brand-navy) !important;
}
body.page-h3 .norah-home .norah-offer__card :is(#brxe-norah-offer-direct-cta, #brxe-norah-offer-cta):hover {
background: var(--surface-selected) !important;
border-color: var(--surface-selected);
}
body.page-h3 .norah-home #brxe-norah-offer-card > #brxe-norah-offer-direct-cta {
margin-right: var(--space-2);
}
body.page-h3 .norah-home #brxe-norah-offer-card > #brxe-norah-offer-direct-cta + #brxe-norah-offer-cta {
margin-top: var(--space-2);
}
/* ---------- Reviews and meditation cards = Card ---------- */
body.page-h3 .norah-home #brxe-norah-meditation-reviews-title,
body.page-h3 .norah-home #brxe-norah-crystal-review-title {
text-align: left;
justify-self: start;
font-size: 28px;
line-height: 34px;
margin-bottom: var(--space-6);
}
body.page-h3 .norah-home #brxe-norah-meditation-reviews,
body.page-h3 .norah-home #brxe-norah-crystal-reviews,
body.page-h3 .norah-home .norah-crystal-review__reviews {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-4);
width: 100%;
justify-self: stretch;
margin-top: 0;
align-items: stretch;
}
body.page-h3 .norah-home #brxe-norah-meditation-reviews > .norah-meditation__review,
body.page-h3 .norah-home .norah-crystal-review__card {
float: none;
clear: none;
width: auto;
display: flex;
flex-direction: column;
gap: var(--space-2);
margin: 0 !important;
padding: var(--space-6);
background: var(--surface-raised);
border: 1px solid var(--border);
border-radius: var(--radius-none);
box-shadow: none;
}
body.page-h3 .norah-home #brxe-norah-crystal-review-card-judith {
margin-top: 0 !important;
}
body.page-h3 .norah-home .norah-meditation__review::before,
body.page-h3 .norah-home .norah-meditation__review::after,
body.page-h3 .norah-home .norah-crystal-review__card::before,
body.page-h3 .norah-home .norah-crystal-review__card::after {
content: none;
display: none;
}
/* Reviewer name = card title (h2 role); prose = body, no italics. */
body.page-h3 .norah-home .norah-meditation__cite,
body.page-h3 .norah-home .norah-crystal-review__cite {
order: -1;
margin: 0 0 var(--space-2);
color: var(--ink);
font-size: 22px;
line-height: 28px;
font-weight: 500;
}
body.page-h3 .norah-home .norah-meditation__review-text,
body.page-h3 .norah-home .norah-crystal-review__card > p:not(.norah-crystal-review__cite) {
margin: 0;
color: var(--ink);
font-size: 15px;
line-height: 22px;
font-style: normal;
font-weight: 400;
}
body.page-h3 .norah-home .norah-crystal-review__card > p + p {
margin-top: var(--space-2);
}
body.page-h3 .norah-home .norah-meditation__card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-6);
border: 1px solid var(--border) !important;
border-radius: var(--radius-none);
background: var(--surface) !important;
background-image: none !important;
box-shadow: var(--shadow-sm) !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
body.page-h3 .norah-home .norah-meditation__card h4 {
color: var(--ink);
font-size: 22px;
line-height: 28px;
font-weight: 500;
}
body.page-h3 .norah-home .norah-meditation__card p {
color: var(--ink);
max-width: none;
}
body.page-h3 .norah-home :is(#brxe-norah-meditation-lead, #brxe-norah-meditation-fit, #brxe-norah-meditation-start-text) {
color: var(--ink);
}
/* ---------- Entry band: surface-brand, one primary action ---------- */
body.page-h3 .norah-home #meditation-einstieg {
background: var(--surface-brand);
color: var(--ink);
border-radius: var(--radius-none);
}
body.page-h3 .norah-home .norah-entry #brxe-norah-meditation-start-title {
color: var(--ink-muted);
font: 600 12px/16px var(--font-sans);
letter-spacing: 0.08em;
}
body.page-h3 .norah-home .norah-entry #brxe-norah-meditation-start-text {
color: var(--brand-navy);
font: 500 22px/28px var(--font-sans);
max-width: 40ch;
}
/* ---------- About: mint frame, one voice for the signature ---------- */
body.page-h3 .norah-home .norah-about__visual {
background: transparent;
border-radius: var(--radius-none);
}
body.page-h3 .norah-home .norah-about__image {
border: var(--space-3) solid var(--brand-mint);
border-radius: var(--radius-none) !important;
box-shadow: none;
}
body.page-h3 .norah-home .norah-about__image img {
border-radius: 0;
}
body.page-h3 .norah-home .norah-about__copy > p:not(.norah-eyebrow, .norah-signature) {
color: var(--ink);
}
body.page-h3 .norah-home .norah-signature {
margin-top: var(--space-4);
color: var(--ink);
font-family: var(--font-sans);
font-size: 22px;
line-height: 28px;
font-weight: 500;
}
/* ---------- Contact: raised surface, secondary e-mail action ---------- */
body.page-h3 .norah-home #kontakt {
background: var(--surface-raised);
color: var(--ink);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
border-radius: var(--radius-none);
}
body.page-h3 .norah-home :is(#brxe-norah-contact-title, #brxe-norah-contact-text) {
color: var(--ink);
}
body.page-h3 .norah-home #brxe-norah-contact-text {
max-width: 55ch;
color: var(--ink);
}
body.page-h3 .norah-home #brxe-norah-contact-email {
font-weight: 500;
text-transform: none;
letter-spacing: 0;
font-size: 15px;
line-height: 22px;
}
/* ---------- Footer: ornament band, then a plain surface ---------- */
body.page-h3 #brx-footer {
background: var(--surface);
}
/* Ornament "band": the signet cropped by a straight frame on gradient-sky. */
body.page-h3 #brx-footer::before {
content: "";
display: block;
width: 100%;
height: 64px;
background-color: var(--brand-sky);
background-image: var(--nh-signet), var(--gradient-sky);
background-repeat: no-repeat;
background-size: 110% auto, 100% 100%;
background-position: 50% 50%, 0 0;
}
body.page-h3 #brx-footer #brxe-norah-footer {
padding: var(--space-8) 0 var(--space-12);
border: 0;
border-radius: var(--radius-none);
background: var(--surface);
color: var(--ink);
font-family: var(--font-sans);
}
body.page-h3 #brx-footer #brxe-norah-footer .norah-footer__link,
body.page-h3 #brx-footer #brxe-norah-footer-copyright,
body.page-h3 #brx-footer #brxe-norah-boundary,
body.page-h3 #brx-footer #brxe-norah-boundary p {
color: var(--ink-muted);
font: 400 12px/16px var(--font-sans);
}
body.page-h3 #brx-footer #brxe-norah-footer .norah-footer__link {
min-height: 40px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.page-h3 #brx-footer #brxe-norah-footer .norah-footer__link:hover {
color: var(--accent);
text-decoration: none;
}
/* Positive horizontal wordmark on the light surface (Logos README). */
body.page-h3 #brx-footer #brxe-norah-footer-logo {
content: url("assets/brand/september-2026/Logo_Norah_nebeneinander.png");
width: 240px;
max-width: 100%;
height: auto;
filter: none;
object-fit: contain;
translate: 0 0;
transform: none;
}
body.page-h3 #brx-footer #brxe-norah-footer-brand-link {
justify-self: start;
align-self: center;
}
/* ---------- Layered overrides ----------
* Earlier layers set these with !important inside @layer bricks; a later
* declaration in the same layer with equal or higher specificity wins. */
@layer bricks {
body.page-h3 .norah-home .norah-header {
background-image: none !important;
}
body.page-h3.norah-geometry-v1 .norah-home .norah-hero__note {
border: 1px solid var(--glass-edge-outer) !important;
border-left: 3px solid var(--signet-teal) !important;
background-color: var(--glass-fill) !important;
background-image: none !important;
box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-glass) !important;
-webkit-backdrop-filter: blur(4px) saturate(1.05) !important;
backdrop-filter: blur(4px) saturate(1.05) !important;
}
body.page-h3.norah-geometry-v1 .norah-home .norah-hero__orb,
body.page-h3.norah-geometry-v1 .norah-home .norah-about__visual::before {
display: none !important;
content: none !important;
}
}
/* ---------- Responsive ---------- */
@media (max-width: 63.999rem) {
body.page-h3 .norah-home .norah-hero__copy {
max-width: none;
padding: var(--space-6);
}
body.page-h3 .norah-home .norah-belief__quote {
padding-left: var(--space-4);
}
}
@media (max-width: 37.5rem) {
body.page-h3 .norah-home .norah-hero__copy {
padding: var(--space-4);
}
body.page-h3 .norah-home .norah-hero h1,
body.page-h3 .norah-home #brxe-norah-hero-title,
body.page-h3 .norah-home #brxe-norah-belief-title {
font-size: 28px;
line-height: 34px;
}
body.page-h3 .norah-home h2 {
font-size: 24px;
line-height: 30px;
}
body.page-h3 .norah-home .norah-process {
padding: var(--space-4);
}
body.page-h3 .norah-home .norah-process__step {
grid-template-columns: 32px minmax(0, 1fr);
}
body.page-h3 .norah-home .norah-process__step::before {
position: static;
width: auto;
height: auto;
}
body.page-h3 .norah-home .norah-offer__card,
body.page-h3 .norah-home #brxe-norah-offer-intro {
padding: var(--space-4);
}
body.page-h3 .norah-home .norah-eyebrow::after,
body.page-h3 .norah-home #brxe-norah-meditation-start-title::after {
max-width: 80px;
}
}
@media (prefers-reduced-motion: reduce) {
body.page-h3 .norah-home *,
body.page-h3 .norah-home *::before,
body.page-h3 .norah-home *::after {
transition-duration: 0.01ms !important;
}
}
/* ---------- Round 2: client review of 24 September 2026 ----------
* See zoom-meeting/summary-2026-09-24.md. Later unlayered rules win over
* the round-1 rules above at equal specificity; !important is used only
* where round 1 already used it. */
/* Hero pattern: kept, but smaller and much softer behind the glass. */
body.page-h3 .norah-home .norah-hero::before {
background-size: 420% auto;
background-position: 50% 32%;
opacity: 0.45;
}
body.page-h3 .norah-home .norah-hero::after {
opacity: 0.5;
}
/* No colored frames around any image. */
body.page-h3 .norah-home #brxe-norah-why-image,
body.page-h3 .norah-home .norah-about__image {
border: 0 !important;
}
body.page-h3 .norah-home .norah-hero__arch {
outline: 0;
background: transparent;
}
/* Golden Meditation Circle starts on its own tinted surface. */
body.page-h3 .norah-home .norah-meditation {
background: var(--surface-selected);
border-top: 1px solid var(--border);
}
body.page-h3 .norah-home .norah-meditation__card,
body.page-h3 .norah-home #brxe-norah-meditation-reviews > .norah-meditation__review {
background: var(--surface) !important;
}
/* The signature returns to the handwritten script the client likes. */
body.page-h3 .norah-home .norah-signature {
font-family: "Caveat", cursive;
font-size: 40px;
line-height: 1;
font-weight: 500;
}
/* Footer: no ornament band; the darker navy, matching the business cards. */
body.page-h3 #brx-footer::before {
content: none;
display: none;
}
body.page-h3 #brx-footer,
body.page-h3 #brx-footer #brxe-norah-footer {
background: var(--brand-navy);
color: var(--ink-on-brand);
}
body.page-h3 #brx-footer #brxe-norah-footer .norah-footer__link,
body.page-h3 #brx-footer #brxe-norah-footer-copyright,
body.page-h3 #brx-footer #brxe-norah-boundary,
body.page-h3 #brx-footer #brxe-norah-boundary p {
color: var(--brand-sky);
}
body.page-h3 #brx-footer #brxe-norah-footer .norah-footer__link:hover {
color: var(--ink-on-brand);
}
body.page-h3 #brx-footer a:focus-visible {
outline-color: var(--ink-on-brand);
}
body.page-h3 #brx-footer #brxe-norah-footer-logo {
content: url("assets/brand/september-2026/Logo_Norah_nebeneinander-white.png");
}
/* ---------- Round 3: marine call-to-action bands (24 September 2026) ----------
* The belief band and the Meditation Circle entry band become plain marine
* surfaces with light type. A dark pattern variant was tried and reverted
* on operator review the same day: the marine surface stays flat. */
body.page-h3 .norah-home .norah-belief,
body.page-h3 .norah-home #meditation-einstieg {
position: relative;
isolation: isolate;
overflow: clip;
background: var(--brand-navy);
color: var(--ink-on-brand);
}
body.page-h3 .norah-home .norah-belief h2,
body.page-h3 .norah-home #brxe-norah-belief-title,
body.page-h3 .norah-home .norah-belief__quote-text,
body.page-h3 .norah-home .norah-entry #brxe-norah-meditation-start-text {
color: var(--ink-on-brand);
}
body.page-h3 .norah-home .norah-belief__quote {
border-left-color: var(--brand-blue);
}
body.page-h3 .norah-home .norah-entry #brxe-norah-meditation-start-title {
color: var(--brand-sky);
}
body.page-h3 .norah-home .norah-entry #brxe-norah-meditation-start-title::after {
background: rgba(194, 218, 239, 0.35);
}
/* On marine the primary action inverts: surface fill, marine text. */
body.page-h3 .norah-home #meditation-einstieg :is(#brxe-norah-meditation-cta) {
background: var(--surface) !important;
border-color: var(--surface);
box-shadow: none;
color: var(--brand-navy) !important;
}
body.page-h3 .norah-home #meditation-einstieg :is(#brxe-norah-meditation-cta):hover {
background: var(--surface-selected) !important;
border-color: var(--surface-selected);
color: var(--brand-navy) !important;
}
body.page-h3 .norah-home #meditation-einstieg :is(#brxe-norah-meditation-cta):focus-visible {
outline-color: var(--ink-on-brand);
}
/* ---------- Round 3: offer tile photo (24 September 2026) ----------
* The tile now carries a portrait photo (crystal in hands). It fills the
* tile with cover and the attachment's focal point instead of the earlier
* contain-plus-zoom treatment made for the cut-out crystal. */
body.page-h3 .norah-home #brxe-norah-offer-intro {
background-size: cover;
background-color: var(--surface-brand);
min-height: 32rem;
}
body.page-h3 .norah-home .norah-offer__intro::before {
content: none;
display: none;
}
/* ---------- Round 3: Meditation Circle on pattern, boxes as glass ----------
* Same box count and layout; only the ground changes. Pattern below (lens
* focus, soft), glass above: the three detail cards and the four review
* cards become crystal panes per the Glass component. */
body.page-h3 .norah-home .norah-meditation {
position: relative;
isolation: isolate;
overflow: clip;
background: var(--gradient-sky);
border-top: 0;
}
body.page-h3 .norah-home .norah-meditation::before {
content: "";
position: absolute;
inset: 0;
z-index: -2;
background-image: var(--nh-signet);
background-repeat: no-repeat;
background-size: 260% auto;
background-position: 30% 40%;
opacity: 0.28;
pointer-events: none;
}
body.page-h3 .norah-home .norah-meditation::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: #ffffff;
opacity: 0.4;
pointer-events: none;
}
body.page-h3 .norah-home .norah-meditation > * {
position: relative;
z-index: 1;
}
body.page-h3 .norah-home .norah-meditation__card,
body.page-h3 .norah-home #brxe-norah-meditation-reviews > .norah-meditation__review {
background: var(--glass-fill) !important;
background-image: none !important;
border: 1px solid var(--glass-edge-outer) !important;
box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-glass) !important;
-webkit-backdrop-filter: blur(4px) saturate(1.05);
backdrop-filter: blur(4px) saturate(1.05);
}
/* ---------- Round 3: sticky header, frost glass, compact on scroll ----------
* The header stays sticky (shared layer). Once the page scrolls, the state
* class norah-header-scrolled (toggled by norah-demo-header-sticky.js)
* switches to the frost glass step of the Glass component (80 % fill, 6px
* blur) and the bar, logo, and action shrink. */
/* norah-scroll-header.css is not enqueued on /h3, so the slot that
* norah-demo-header-sticky.js wraps around the header gets its sticky
* behaviour here. The slot keeps the rest height so the page does not jump
* when the bar shrinks. */
body.page-h3 .norah-header-slot {
position: sticky;
top: 0;
z-index: 60;
height: 72px;
width: 100%;
}
body.page-h3 .norah-home .norah-header-slot > .norah-header {
position: relative;
top: 0;
}
body.page-h3 .norah-home .norah-header {
position: sticky;
top: 0;
z-index: 60;
transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
body.page-h3 .norah-home .norah-header__inner,
body.page-h3 .norah-home .norah-brand,
body.page-h3 .norah-home .norah-brand__logo,
body.page-h3 .norah-home .norah-nav .norah-button {
transition: min-height 240ms cubic-bezier(0.22, 1, 0.36, 1), width 240ms cubic-bezier(0.22, 1, 0.36, 1), padding 240ms cubic-bezier(0.22, 1, 0.36, 1), background-color var(--nh-motion), border-color var(--nh-motion), color var(--nh-motion);
}
body.page-h3.norah-header-scrolled .norah-home .norah-header {
background: #ffffffcc !important;
background-image: none !important;
border-bottom-color: var(--glass-edge-outer);
box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-glass);
-webkit-backdrop-filter: blur(6px) saturate(1.05);
backdrop-filter: blur(6px) saturate(1.05);
}
body.page-h3.norah-header-scrolled .norah-home .norah-header__inner {
min-height: 52px;
min-block-size: 52px;
padding-block: 0;
}
body.page-h3.norah-header-scrolled .norah-home .norah-brand {
width: clamp(15rem, 14vw, 17rem);
min-height: 40px;
}
body.page-h3.norah-header-scrolled .norah-home .norah-nav .norah-button {
min-height: 28px;
min-block-size: 28px;
padding: 0 var(--space-2);
}
@media (prefers-reduced-motion: reduce) {
body.page-h3 .norah-home .norah-header,
body.page-h3 .norah-home .norah-header__inner,
body.page-h3 .norah-home .norah-brand,
body.page-h3 .norah-home .norah-brand__logo,
body.page-h3 .norah-home .norah-nav .norah-button {
transition: none;
}
}
/* ---------- 24 Sept, evening: belief quote, square tile, equal hero columns ---------- */
/* Belief quote: larger, italic (operator request). */
body.page-h3 .norah-home .norah-belief__quote-text {
font-size: 26px;
line-height: 36px;
font-style: italic;
}
/* Hero: the glass copy card and the portrait share one row height. The art
* column no longer imposes its own aspect ratio; the row is the taller of the
* two, and the shorter one stretches. Content in the card is spaced more
* generously and centred vertically. */
body.page-h3 .norah-home .norah-hero__grid {
align-items: stretch;
}
body.page-h3 .norah-home .norah-hero__art {
aspect-ratio: auto;
align-items: stretch;
}
body.page-h3 .norah-home .norah-hero__arch {
height: auto;
min-height: 100%;
}
body.page-h3 .norah-home .norah-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
}
body.page-h3 .norah-home .norah-hero__copy {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: var(--space-12) 40px;
}
/* Base rhythm inside the card; the row slack is distributed between the
* five blocks by space-between so the card fills the portrait height. */
body.page-h3 .norah-home .norah-hero h1,
body.page-h3 .norah-home #brxe-norah-hero-title {
margin-bottom: var(--space-4);
}
body.page-h3 .norah-home .norah-hero__intro {
margin-bottom: var(--space-6);
}
body.page-h3 .norah-home .norah-hero .norah-microcopy {
margin-top: var(--space-4) !important;
}
@media (max-width: 63.999rem) {
body.page-h3 .norah-home .norah-hero__copy {
padding: var(--space-6);
}
body.page-h3 .norah-home .norah-belief__quote-text {
font-size: 22px;
line-height: 30px;
}
}
/* Footer logo: the white PNG carries 8.8 % transparent padding on the left.
* Shift the image by that amount so the signet sits on the copyright line. */
body.page-h3 #brx-footer #brxe-norah-footer-logo {
translate: -8.8% 0;
}
/* ---------- 24 Sept, late: pane opacity, process rhythm, calmer button ---------- */
/* Offer title pane over the photo: the page-wide 28 % glass is too thin
* here. Own fill and stronger blur so the line stays legible. */
body.page-h3 .norah-home #brxe-norah-offer-title {
background: #ffffffb8;
-webkit-backdrop-filter: blur(10px) saturate(1.05);
backdrop-filter: blur(10px) saturate(1.05);
}
/* Process section: the step list and the offer block sat 171px apart
* (shell row gap plus the offer margin). Now 64px. */
body.page-h3 .norah-home #brxe-norah-process-shell {
row-gap: var(--space-12);
}
body.page-h3 .norah-home .norah-process__offer {
margin-top: var(--space-4);
}
/* Primary button: one flat marine square, no inner highlight lines.
* Slightly taller with a touch more air around the label. */
body.page-h3 .norah-home :is(.norah-button, .norah-button--light, .norah-nav .norah-button, .norah-actions .norah-button, #brxe-norah-contact-email, #brxe-norah-meditation-cta),
body.page-h3 .norah-home .norah-menu-toggle {
box-shadow: none;
min-height: 44px;
padding: 0 20px;
letter-spacing: 0.01em;
}
body.page-h3.norah-header-scrolled .norah-home .norah-nav .norah-button {
min-height: 30px;
min-block-size: 30px;
}
/* The offer card loses its inner line for the same reason. */
body.page-h3 .norah-home .norah-offer__card {
box-shadow: none;
}
/* Process: the shared rule pins the offer margin with an ID pair; match it. */
body.page-h3 .norah-home #brxe-norah-process-shell > #brxe-norah-offer-shell.norah-process__offer {
margin-top: var(--space-4);
}
/* About: the portrait keeps its original size (72 % of its column, column
* capped at 544px). The copy column narrows to exactly that measure. */
body.page-h3 .norah-home .norah-about__copy {
max-width: calc(min(100%, 544px) * 0.72);
}
/* Scrolled header: the compact button must outrank the ID-boosted flat
* button rule above, so it carries an ID in its :is() list as well. */
body.page-h3.norah-header-scrolled .norah-home .norah-nav :is(.norah-button, #brxe-norah-contact-email) {
min-height: 30px;
min-block-size: 30px;
padding: 0 var(--space-3);
font-size: 13px;
line-height: 18px;
}
@media (max-width: 63.999rem) {
body.page-h3 .norah-home .norah-about__copy {
max-width: none;
}
}
/* Front page (since 24 Sept 2026): norah-scroll-header.css is enqueued on
* the front page and pins the scrolled bar at 56px with a selector of equal
* weight. Carry the slot in the selector so the approved 52px wins. */
body.page-h3.norah-header-scrolled .norah-home .norah-header-slot .norah-header__inner {
min-height: 52px;
min-block-size: 52px;
padding-block: 0;
}
/* ---------- Mobile header (24 Sept 2026, operator) ----------
* Below 64rem: no hamburger. The stacked logo sits centred, the section
* links sit in a row beneath it, the Termin button wraps below the links.
* Scrolled: the bar collapses to the small centred logo. */
@media (max-width: 63.999rem) {
body.page-h3 .norah-home .norah-menu-toggle {
display: none !important;
}
body.page-h3 .norah-home .norah-header__inner {
flex-direction: column;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: 0;
padding-block: var(--space-3) var(--space-3);
}
body.page-h3 .norah-home .norah-brand {
width: 200px;
min-height: 0;
justify-content: center;
}
body.page-h3 .norah-home .norah-brand > img.norah-brand__logo {
content: url("assets/brand/september-2026/Logo_Web_2.png");
width: 100%;
height: auto;
object-position: center;
translate: 0 0;
}
body.page-h3 .norah-home .norah-nav-ready .norah-nav,
body.page-h3 .norah-home .norah-nav {
display: grid !important;
grid-auto-flow: column;
grid-auto-columns: max-content;
grid-template-rows: auto;
justify-content: center;
align-items: center;
position: static;
width: 100%;
max-height: none;
overflow: visible;
gap: var(--space-1) var(--space-4);
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
body.page-h3 .norah-home .norah-nav__link {
min-height: 36px;
}
/* Small icon-only booking button pinned to the top-right corner
* (operator, 24 Sept, second pass). The ID keeps this above the
* flat-button rule. */
body.page-h3 .norah-home .norah-header__inner {
position: relative;
}
body.page-h3 .norah-home .norah-nav :is(.norah-button, #brxe-norah-nav-contact) {
display: none !important;
}
body.page-h3 .norah-home .norah-nav .norah-button .norah-button__label {
display: none;
}
body.page-h3 .norah-home .norah-nav .norah-button svg.norah-icon {
width: 18px;
height: 18px;
margin: 0;
}
/* Scrolled: a text-only "Termin" button (operator, 24 Sept). The graph
* label reads "Termin anfragen"; it is hidden and the short word comes
* from a pseudo-element. */
body.page-h3.norah-header-scrolled .norah-home .norah-nav :is(.norah-button, #brxe-norah-nav-contact) {
display: inline-flex !important;
position: static;
width: auto;
height: 32px;
min-height: 32px;
min-block-size: 32px;
padding: 0 var(--space-3);
margin: 0 0 0 var(--space-2);
align-self: center;
font-size: 13px;
line-height: 18px;
}
body.page-h3.norah-header-scrolled .norah-home .norah-nav .norah-button svg.norah-icon {
display: none;
}
body.page-h3.norah-header-scrolled .norah-home .norah-nav .norah-button::after {
content: "Termin";
display: block;
line-height: 32px;
text-align: center;
}
/* Grid centring is independent of hidden siblings and flex gaps. */
body.page-h3.norah-header-scrolled .norah-home .norah-nav :is(.norah-button, #brxe-norah-nav-contact) {
display: inline-grid !important;
place-items: center;
gap: 0;
}
/* Sticky slot follows the measured rest height so the page does not jump. */
body.page-h3 .norah-header-slot {
height: var(--norah-header-rest-height, auto);
}
/* Scrolled: one row, the signet alone on the left, links on the right. */
body.page-h3.norah-header-scrolled .norah-home .norah-header-slot .norah-header__inner {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
min-height: 0;
padding-block: var(--space-2);
}
body.page-h3.norah-header-scrolled .norah-home .norah-brand {
width: 40px;
min-height: 0;
flex: 0 0 auto;
}
body.page-h3.norah-header-scrolled .norah-home .norah-brand > img.norah-brand__logo {
content: url("assets/brand/september-2026/Logo_Norah_Symbol.png");
width: 40px;
height: 40px;
object-fit: contain;
}
body.page-h3.norah-header-scrolled .norah-home .norah-nav {
width: auto;
flex: 1 1 auto;
justify-content: end;
gap: var(--space-1) var(--space-3);
}
body.page-h3.norah-header-scrolled .norah-home .norah-nav__link {
min-height: 36px;
align-self: center;
}
body.page-h3.norah-header-scrolled .norah-home .norah-brand {
height: 36px;
align-self: center;
}
body.page-h3.norah-header-scrolled .norah-home .norah-brand > img.norah-brand__logo {
width: 36px;
height: 36px;
}
}
/* Phones: the logo already links home, so the Startseite item is dropped
* and the three section links share one row. */
@media (max-width: 37.5rem) {
body.page-h3 .norah-home #brxe-norah-nav-home {
display: none;
}
body.page-h3 .norah-home .norah-nav {
gap: var(--space-1) var(--space-3);
}
}
/* ---------- Hero on tablets and phones (24 Sept 2026, operator) ----------
* Tablets keep the two columns, slimmer: the portrait fills its column and
* the glass card sits beside it. Stacking starts below 40rem. On phones the
* portrait spans the column so the note chip sits fully over the photo. */
@media (min-width: 40rem) and (max-width: 63.999rem) {
body.page-h3 .norah-home .norah-hero__grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
column-gap: var(--space-6);
row-gap: 0;
align-items: stretch;
}
body.page-h3 .norah-home .norah-hero__copy {
max-width: none;
padding: var(--space-6);
}
body.page-h3 .norah-home .norah-hero__art {
max-width: none;
margin-inline: 0;
}
body.page-h3 .norah-home .norah-hero__arch {
width: 100%;
inline-size: 100%;
}
body.page-h3 .norah-home .norah-hero h1,
body.page-h3 .norah-home #brxe-norah-hero-title {
font-size: 30px;
line-height: 36px;
}
body.page-h3 .norah-home .norah-hero__note {
left: var(--space-3);
bottom: var(--space-3);
width: min(240px, calc(100% - 2 * var(--space-3)));
}
}
@media (max-width: 39.999rem) {
body.page-h3 .norah-home .norah-hero__art {
max-width: 480px;
margin-inline: auto;
}
body.page-h3 .norah-home .norah-hero__arch {
width: 100%;
inline-size: 100%;
}
body.page-h3 .norah-home .norah-hero__note {
left: var(--space-3);
bottom: var(--space-3);
width: min(240px, calc(100% - 2 * var(--space-3)));
}
}
/* ---------- Tablets keep two columns (24 Sept 2026, operator) ----------
* Process (intro | steps), the offer pair (photo | card) and About
* (portrait | copy) stack only below 40rem, like the hero. */
@media (min-width: 40rem) and (max-width: 63.999rem) {
body.page-h3 .norah-home #brxe-norah-process-shell {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
column-gap: var(--space-8);
}
body.page-h3 .norah-home #brxe-norah-process-shell > #brxe-norah-offer-shell.norah-process__offer {
grid-column: 1 / -1;
width: 100%;
inline-size: 100%;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--space-6);
row-gap: 0;
}
body.page-h3 .norah-home .norah-about__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
column-gap: var(--space-8);
align-items: center;
}
/* On tablets the portrait fills its column and the copy matches it. */
body.page-h3 .norah-home .norah-about__visual {
max-width: none;
}
body.page-h3 .norah-home .norah-about__image {
width: 100%;
}
body.page-h3 .norah-home .norah-about__copy {
max-width: none;
}
}
/* Stacked offer tile: a taller photo reads better than a squat strip. */
@media (max-width: 39.999rem) {
body.page-h3 .norah-home .norah-offer__intro,
body.page-h3 .norah-home #brxe-norah-offer-intro {
min-height: 440px;
min-block-size: 440px;
}
}
/* ---------- Offer card below 64rem (24 Sept 2026, operator) ----------
* The card is narrow on tablets and phones, so the note chip and both
* buttons share the full card width and one left edge. The note wraps
* after the price: the dash is hidden and the detail span takes its own
* line (markup: "45 € – …"). */
@media (max-width: 63.999rem) {
/* Note chip and both buttons keep their natural width and are centred
* as a column (operator, 24 Sept, third pass). */
body.page-h3 .norah-home #brxe-norah-offer-card {
display: flex;
flex-direction: column;
align-items: center;
}
body.page-h3 .norah-home #brxe-norah-offer-card > * {
align-self: stretch;
}
body.page-h3 .norah-home #brxe-norah-offer-card > :is(.norah-offer__note, #brxe-norah-offer-direct-cta, #brxe-norah-offer-cta) {
align-self: center;
width: auto;
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
body.page-h3 .norah-home .norah-offer__note {
display: grid;
justify-items: center;
width: max-content;
max-width: 100%;
row-gap: 0;
text-align: center;
}
body.page-h3 .norah-home .norah-offer__note-sep {
display: none;
}
/* Sentence case on the second line so it fits 320px without a third line. */
body.page-h3 .norah-home .norah-offer__note-detail {
font-size: 12px;
letter-spacing: 0.02em;
text-transform: none;
}
body.page-h3 .norah-home #brxe-norah-offer-card > :is(#brxe-norah-offer-direct-cta, #brxe-norah-offer-cta) {
display: inline-flex;
justify-content: center;
}
}
/* ---------- Batch, 24 September 2026 (operator mobile review) ---------- */
/* Eyebrow line runs to the right edge of its container. */
body.page-h3 .norah-home .norah-eyebrow,
body.page-h3 .norah-home #brxe-norah-meditation-start-title {
width: 100%;
}
body.page-h3 .norah-home .norah-eyebrow::after,
body.page-h3 .norah-home #brxe-norah-meditation-start-title::after {
max-width: none;
}
@media (max-width: 63.999rem) {
body.page-h3 .norah-home .norah-eyebrow::after,
body.page-h3 .norah-home #brxe-norah-meditation-start-title::after {
max-width: none;
}
}
/* Why section keeps two columns on tablets (the shared sheet stacks it
* below 73.75rem); the lead stays left, the photo right. */
@media (min-width: 40rem) and (max-width: 73.75rem) {
body.page-h3 .norah-home #brxe-norah-why-shell {
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
column-gap: var(--space-8);
}
body.page-h3 .norah-home #brxe-norah-why-points {
grid-area: 1 / 2 / 4 / 3;
grid-template-columns: minmax(0, 1fr);
margin-top: 0;
}
}
/* About: the portrait is never shorter than the copy beside it. */
@media (min-width: 40rem) {
body.page-h3 .norah-home .norah-about__grid {
align-items: stretch;
}
/* The visual is a stretched grid cell; the image stretches inside it, so
* the row height is max(copy height, portrait height at 0.8). */
body.page-h3 .norah-home #brxe-norah-about-shell.norah-about__grid {
align-items: stretch;
}
body.page-h3 .norah-home #brxe-norah-about-visual.norah-about__visual {
display: grid;
align-items: stretch;
align-self: stretch;
height: auto;
min-height: 0;
margin: 0;
}
body.page-h3 .norah-home .norah-about__image {
align-self: stretch;
height: 100%;
min-height: 0;
aspect-ratio: 0.8;
object-fit: cover;
object-position: 50% 28%;
}
}
/* About on phones: full-width portrait, cropped from the bottom. */
@media (max-width: 39.999rem) {
body.page-h3 .norah-home .norah-about__visual {
max-width: none;
}
body.page-h3 .norah-home .norah-about__image {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
object-position: 50% 0;
}
}
/* Footer on phones and tablets: links centred on top, then logo left and
* copyright right on one line. */
@media (max-width: 63.999rem) {
body.page-h3 #brx-footer #brxe-norah-footer-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "nav nav" "brand copy";
align-items: center;
row-gap: var(--space-6);
column-gap: var(--space-4);
}
body.page-h3 #brx-footer #brxe-norah-footer-nav {
grid-area: nav;
justify-self: center;
justify-content: center;
width: auto;
flex-wrap: wrap;
gap: var(--space-2) var(--space-6);
}
body.page-h3 #brx-footer #brxe-norah-footer-brand-link {
grid-area: brand;
justify-self: start;
width: 180px;
}
body.page-h3 #brx-footer #brxe-norah-footer-copyright {
grid-area: copy;
justify-self: end;
text-align: right;
margin: 0;
}
}
/* Narrow tablets (640 to 767px): the offer card would be ~210px wide beside
* the photo, so the pair stacks here (photo tile above the card). */
@media (min-width: 40rem) and (max-width: 47.999rem) {
body.page-h3 .norah-home #brxe-norah-process-shell > #brxe-norah-offer-shell.norah-process__offer {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--space-4);
}
body.page-h3 .norah-home .norah-offer__intro,
body.page-h3 .norah-home #brxe-norah-offer-intro {
min-height: 440px;
min-block-size: 440px;
}
}
/* ---------- Top-alignment rule (24 Sept 2026, operator) ----------
* In every two-column section the right column starts on the eyebrow line
* of the left column: no offsets, no first-item padding, no borders above
* the first item. Boxes (hero card, offer tile, About portrait) align their
* outer edge to the same line. */
@media (min-width: 40rem) {
/* Why: the photo column spans from the eyebrow row. The last spanned row
* is flexible so the span's height lands there, not in the eyebrow and
* title rows (a spanning item inflates auto rows equally). */
body.page-h3 .norah-home #brxe-norah-why-shell {
grid-template-rows: max-content max-content minmax(0, 1fr);
}
body.page-h3 .norah-home #brxe-norah-why-points {
grid-area: 1 / 2 / 4 / 3;
margin-top: 0;
}
}
/* Meditation Circle is two-column only above 70rem (shared sheet). There
* the eyebrow stays in column one and the cards start on its row; the
* fourth (fit) row is flexible and absorbs the card stack height. */
@media (min-width: 70.001rem) {
body.page-h3 .norah-home #brxe-norah-meditation-shell {
grid-template-rows: max-content max-content max-content minmax(0, 1fr);
}
body.page-h3 .norah-home #brxe-norah-meditation-eyebrow {
grid-area: 1 / 1;
}
body.page-h3 .norah-home #brxe-norah-meditation-cards {
grid-area: 1 / 2 / 5;
margin-top: 0;
align-self: start;
}
}
/* Single column below 70rem: everything flows in source order in column one. */
@media (max-width: 70rem) {
body.page-h3 .norah-home #brxe-norah-meditation-shell > * {
grid-area: auto;
grid-column: 1;
}
}
/* Process: the first step has no top padding or rule, so its number sits on
* the intro eyebrow line. */
body.page-h3 .norah-home #brxe-norah-process-steps > .norah-process__step:first-child {
padding-top: 0;
border-top: 0;
}
@media (max-width: 63.999rem) {
body.page-h3 .norah-home #brxe-norah-process-steps > .norah-process__step:first-child {
padding-top: 0;
border-top: 0;
}
}
/* Scrolled bar on small phones: the menu gives way before the button.
* Under 420px "Über mich" is dropped, under 340px "Begleitung" too; the
* logo still links home and every section stays a scroll away. */
@media (max-width: 26.249rem) {
body.page-h3.norah-header-scrolled .norah-home #brxe-norah-nav-about {
display: none;
}
body.page-h3.norah-header-scrolled .norah-home .norah-nav {
gap: var(--space-1) var(--space-2);
}
}
@media (max-width: 21.249rem) {
body.page-h3.norah-header-scrolled .norah-home #brxe-norah-nav-guidance {
display: none;
}
}
/* ---------- Calendly page on the v6 system (24 Sept 2026) ----------
* The page shares the header graph; the booking stage sits on the white
* surface with the shell rhythm. norah-calendly-page.css keeps the iframe
* sizing. */
body.page-h3.page-calendly,
body.page-h3.page-calendly .norah-home {
background: var(--surface);
}
body.page-h3.page-calendly .norah-calendly-stage {
padding-block: var(--space-8) var(--space-12);
}
body.page-h3.page-calendly .norah-calendly__embed iframe {
border: 0;
}
/* ---------- Footer: one row from 64rem up (24 Sept 2026, operator) ----------
* Logo left, menu centred, copyright right. Below 64rem the stacked order
* (menu on top, logo left, copyright right) so the logo never shrinks. */
@media (min-width: 64rem) {
body.page-h3 #brx-footer #brxe-norah-footer-shell {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
grid-template-areas: "brand nav copy";
align-items: center;
column-gap: var(--space-6);
row-gap: 0;
}
body.page-h3 #brx-footer #brxe-norah-footer-brand-link {
grid-area: brand;
justify-self: start;
width: 240px;
min-width: 240px;
}
body.page-h3 #brx-footer #brxe-norah-footer-nav {
grid-area: nav;
justify-self: center;
justify-content: center;
width: auto;
flex-wrap: nowrap;
gap: var(--space-6);
}
body.page-h3 #brx-footer #brxe-norah-footer-copyright {
grid-area: copy;
justify-self: end;
text-align: right;
margin: 0;
}
}
/* ---------- Why photo fills its column (24 Sept 2026, operator) ----------
* Tablets (two columns): the figure stretches to the text column height and
* the photo grows past 4:3 as needed, cropped with cover. Phones unchanged. */
@media (min-width: 40rem) and (max-width: 73.75rem) {
body.page-h3 .norah-home #brxe-norah-why-points.norah-why__visual {
align-self: stretch;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
align-content: stretch;
align-items: stretch;
}
body.page-h3 .norah-home #brxe-norah-why-image {
width: 100%;
height: auto;
min-height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
object-position: 50% 50%;
}
}
/* ---------- Motion pass (24 Sept 2026, operator: "a bit of smoothness") ----------
* Slightly longer, eased transitions on interactive surfaces, a soft lift on
* hover, and smooth anchor scrolling that stops below the sticky header.
* Reduced-motion users keep the instant behaviour from the block above. */
body.page-h3 {
--nh-motion: 220ms;
--nh-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
html {
scroll-padding-top: 72px;
}
body.page-h3 .norah-home :is(.norah-button, .norah-button--light, .norah-nav .norah-button, .norah-actions .norah-button, #brxe-norah-contact-email, #brxe-norah-meditation-cta) {
transition: background-color var(--nh-motion) var(--nh-ease), border-color var(--nh-motion) var(--nh-ease), color var(--nh-motion) var(--nh-ease), box-shadow var(--nh-motion) var(--nh-ease), translate var(--nh-motion) var(--nh-ease) !important;
}
body.page-h3 .norah-home :is(.norah-button, .norah-button--light, .norah-nav .norah-button, .norah-actions .norah-button, #brxe-norah-contact-email, #brxe-norah-meditation-cta):hover {
box-shadow: 0 6px 16px rgba(41, 67, 91, 0.18);
translate: 0 -1px;
}
body.page-h3 .norah-home :is(.norah-button, .norah-button--light, .norah-nav .norah-button, .norah-actions .norah-button, #brxe-norah-contact-email, #brxe-norah-meditation-cta):active {
box-shadow: 0 2px 6px rgba(41, 67, 91, 0.16);
translate: 0 0;
transition-duration: 80ms !important;
}
body.page-h3 .norah-home :is(.norah-button, .norah-button--light, .norah-nav .norah-button, #brxe-norah-contact-email, #brxe-norah-meditation-cta):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* Text links: colour and underline ease in. */
body.page-h3 .norah-home :is(.norah-nav__link, .norah-footer__link, .norah-hero__process-link, #brxe-norah-hero-process-link, .norah-offer__card a:not(.norah-button), .norah-contact a:not(.norah-button)) {
transition: color var(--nh-motion) var(--nh-ease), text-decoration-color var(--nh-motion) var(--nh-ease), translate var(--nh-motion) var(--nh-ease);
}
body.page-h3 .norah-home :is(.norah-hero__process-link, #brxe-norah-hero-process-link):hover svg {
translate: 0 2px;
}
body.page-h3 .norah-home :is(.norah-hero__process-link, #brxe-norah-hero-process-link) svg {
transition: translate var(--nh-motion) var(--nh-ease);
}
/* Cards and glass panes lift softly. */
body.page-h3 .norah-home :is(.norah-meditation__card, .norah-meditation__review, .norah-crystal-review__card, .norah-point, .norah-process__step, .norah-offer__card) {
transition: box-shadow var(--nh-motion) var(--nh-ease), translate var(--nh-motion) var(--nh-ease), border-color var(--nh-motion) var(--nh-ease);
}
body.page-h3 .norah-home :is(.norah-meditation__card, .norah-meditation__review, .norah-crystal-review__card):hover {
translate: 0 -2px;
box-shadow: inset 0 0 0 1px var(--glass-edge), 0 12px 28px rgba(41, 67, 91, 0.14) !important;
}
/* Header state changes ease with the same curve. */
body.page-h3 .norah-home .norah-header,
body.page-h3 .norah-home .norah-header__inner,
body.page-h3 .norah-home .norah-brand,
body.page-h3 .norah-home .norah-brand__logo {
transition-timing-function: var(--nh-ease);
transition-duration: 260ms;
}
/* Images settle in gently once decoded (Bricks lazy-load toggles this class). */
body.page-h3 .norah-home img.bricks-lazy-hidden {
opacity: 0;
}
body.page-h3 .norah-home img:not(.bricks-lazy-hidden) {
opacity: 1;
transition: opacity 320ms var(--nh-ease);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
body.page-h3 .norah-home :is(.norah-button, .norah-nav .norah-button, .norah-meditation__card, .norah-meditation__review, .norah-crystal-review__card):hover {
translate: 0 0;
}
}
/* ---------- Motion pass, second round (operator: "buttons still jaggy") ----------
* No translate on hover: fractional-pixel movement shimmers text on glass.
* Hover is background plus a soft shadow only. The header button animates
* its size together with the bar instead of snapping. */
body.page-h3 .norah-home :is(.norah-button, .norah-button--light, .norah-nav .norah-button, .norah-actions .norah-button, #brxe-norah-contact-email, #brxe-norah-meditation-cta):hover,
body.page-h3 .norah-home :is(.norah-button, .norah-button--light, .norah-nav .norah-button, .norah-actions .norah-button, #brxe-norah-contact-email, #brxe-norah-meditation-cta):active {
translate: 0 0;
}
body.page-h3 .norah-home :is(.norah-button, .norah-button--light, .norah-actions .norah-button, #brxe-norah-meditation-cta):hover {
box-shadow: 0 4px 14px rgba(41, 67, 91, 0.16);
}
body.page-h3 .norah-home :is(.norah-meditation__card, .norah-meditation__review, .norah-crystal-review__card):hover {
translate: 0 0;
box-shadow: inset 0 0 0 1px var(--glass-edge), 0 10px 24px rgba(41, 67, 91, 0.12) !important;
}
/* Header button: rest 40px with a 14px label, compact 32px with 13px. Size,
* padding and type interpolate on the same curve as the bar (260ms). */
body.page-h3 .norah-home .norah-nav :is(.norah-button, #brxe-norah-nav-contact) {
min-height: 40px;
min-block-size: 40px;
padding: 0 16px;
font-size: 14px;
line-height: 20px;
gap: 8px;
transition: background-color var(--nh-motion) var(--nh-ease), color var(--nh-motion) var(--nh-ease), box-shadow var(--nh-motion) var(--nh-ease), min-height 260ms var(--nh-ease), min-block-size 260ms var(--nh-ease), padding 260ms var(--nh-ease), font-size 260ms var(--nh-ease), line-height 260ms var(--nh-ease) !important;
}
body.page-h3 .norah-home .norah-nav .norah-button svg.norah-icon {
width: 16px;
height: 16px;
transition: width 260ms var(--nh-ease), height 260ms var(--nh-ease);
}
body.page-h3 .norah-home .norah-nav :is(.norah-button, #brxe-norah-nav-contact):hover {
box-shadow: 0 3px 10px rgba(41, 67, 91, 0.16);
}
@media (min-width: 64rem) {
body.page-h3.norah-header-scrolled .norah-home .norah-nav :is(.norah-button, #brxe-norah-nav-contact) {
min-height: 32px;
min-block-size: 32px;
padding: 0 12px;
font-size: 13px;
line-height: 18px;
}
body.page-h3.norah-header-scrolled .norah-home .norah-nav .norah-button svg.norah-icon {
width: 14px;
height: 14px;
}
}
/* ---------- Footer Instagram icon (7 Oct 2026) ----------
* Element norah-footer-instagram in the shared footer, after the links.
* Hidden through its Bricks Display setting until the client unhides it;
* these rules give it the final look the moment it appears. */
/* No display here: Bricks' "#brxe-norah-footer-instagram {display:none}"
* must keep winning until the client clears the Display setting. */
body.page-h3 #brx-footer .norah-footer__social {
align-items: center;
gap: var(--space-2);
margin: 0;
padding: 0;
}
body.page-h3 #brx-footer .norah-footer__social ul,
body.page-h3 #brx-footer .norah-footer__social li {
margin: 0;
padding: 0;
list-style: none;
display: inline-flex;
}
body.page-h3 #brx-footer .norah-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
min-height: 40px;
border: 0;
border-radius: var(--radius-none);
background: transparent;
color: var(--brand-sky);
font-size: 22px;
line-height: 1;
transition: color var(--nh-motion) var(--nh-ease), opacity var(--nh-motion) var(--nh-ease);
}
body.page-h3 #brx-footer .norah-footer__social i,
body.page-h3 #brx-footer .norah-footer__social svg {
color: inherit;
font-size: 22px;
width: 22px;
height: 22px;
transition: inherit;
}
body.page-h3 #brx-footer .norah-footer__social a:focus-visible {
outline: 2px solid var(--brand-sky);
outline-offset: 3px;
}
/* Hover: the network's own colour, no movement. Instagram gets its gradient
* through background-clip on the glyph. */
body.page-h3 #brx-footer .norah-footer__social a[href*="facebook.com"]:hover { color: #1877f2; }
body.page-h3 #brx-footer .norah-footer__social a[href*="youtube.com"]:hover { color: #ff0033; }
body.page-h3 #brx-footer .norah-footer__social a[href*="linkedin.com"]:hover { color: #0a66c2; }
body.page-h3 #brx-footer .norah-footer__social a[href*="tiktok.com"]:hover { color: #69c9d0; }
body.page-h3 #brx-footer .norah-footer__social a[href*="pinterest."]:hover { color: #e60023; }
body.page-h3 #brx-footer .norah-footer__social a[href*="wa.me"]:hover,
body.page-h3 #brx-footer .norah-footer__social a[href*="whatsapp.com"]:hover { color: #25d366; }
body.page-h3 #brx-footer .norah-footer__social a[href*="instagram.com"]:hover i,
body.page-h3 #brx-footer .norah-footer__social a[href*="instagram.com"]:hover svg {
color: #e1306c;
}
body.page-h3 #brx-footer .norah-footer__social a[href*="instagram.com"]:hover i::before {
background: linear-gradient(45deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* Bricks prints "#brxe-norah-footer-instagram {display: none}" from the
* element's Display setting; our class rule above is weaker on purpose, so
* the icon appears as soon as the client clears that setting. */
/* ---------- Blog single (7 Oct 2026) ----------
* Bricks content template norah-post-single. Reading column 68ch, article
* type one step larger than the UI body for long reading. */
body.page-h3.single-post .norah-post {
background: var(--surface);
}
body.page-h3.single-post .norah-post__hero {
padding-block: var(--space-12) 0;
}
body.page-h3.single-post .norah-post__body {
padding-block: var(--space-8) var(--space-16);
}
body.page-h3.single-post .norah-post__shell {
max-width: 760px;
margin-inline: auto;
}
body.page-h3.single-post .norah-post__eyebrow {
margin-bottom: var(--space-6);
}
body.page-h3.single-post .norah-post__title {
margin: 0 0 var(--space-6);
color: var(--brand-navy);
font-size: clamp(32px, 4vw, 44px);
line-height: 1.15;
font-weight: 500;
letter-spacing: -0.01em;
}
body.page-h3.single-post .norah-post__lead {
margin: 0 0 var(--space-8);
color: var(--ink-muted);
font-size: 19px;
line-height: 30px;
}
body.page-h3.single-post .norah-post__cover {
display: block;
width: 100%;
margin: 0 0 var(--space-4);
}
body.page-h3.single-post img.norah-post__cover,
body.page-h3.single-post .norah-post__cover img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border: 1px solid var(--glass-edge-outer);
border-radius: var(--radius-none);
}
body.page-h3.single-post .norah-post__cover figcaption {
margin-top: var(--space-2);
color: var(--ink-muted);
font-size: 12px;
line-height: 16px;
}
/* Prose */
body.page-h3.single-post .norah-prose {
color: var(--ink);
font-size: 17px;
line-height: 28px;
}
body.page-h3.single-post .norah-prose > * + * {
margin-top: var(--space-4);
}
body.page-h3.single-post .norah-prose :is(h2, h3, h4) {
color: var(--brand-navy);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
}
body.page-h3.single-post .norah-prose h2 {
margin-top: var(--space-12);
font-size: 28px;
line-height: 34px;
}
body.page-h3.single-post .norah-prose h3 {
margin-top: var(--space-8);
font-size: 22px;
line-height: 28px;
}
body.page-h3.single-post .norah-prose h4 {
margin-top: var(--space-6);
font-size: 17px;
line-height: 24px;
font-weight: 600;
}
body.page-h3.single-post .norah-prose a {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.2em;
}
body.page-h3.single-post .norah-prose a:hover {
color: var(--accent-hover);
}
body.page-h3.single-post .norah-prose :is(ul, ol) {
padding-left: 1.4em;
}
body.page-h3.single-post .norah-prose li + li {
margin-top: var(--space-2);
}
body.page-h3.single-post .norah-prose blockquote {
margin: var(--space-8) 0;
padding: 0 0 0 var(--space-6);
border-left: 2px solid var(--brand-blue);
color: var(--ink);
font-size: 22px;
line-height: 32px;
font-style: italic;
}
body.page-h3.single-post .norah-prose blockquote p {
margin: 0;
}
body.page-h3.single-post .norah-prose :is(img, figure) {
max-width: 100%;
height: auto;
border-radius: var(--radius-none);
}
body.page-h3.single-post .norah-prose figure {
margin: var(--space-8) 0;
}
body.page-h3.single-post .norah-prose figcaption {
margin-top: var(--space-2);
color: var(--ink-muted);
font-size: 12px;
line-height: 16px;
}
body.page-h3.single-post .norah-prose hr {
margin: var(--space-12) 0;
border: 0;
border-top: 1px solid var(--border);
}
/* Prev / next */
body.page-h3.single-post .norah-post__nav {
margin-top: var(--space-16);
padding-top: var(--space-6);
border-top: 1px solid var(--border);
}
body.page-h3.single-post .norah-post__nav a {
color: var(--brand-navy);
text-decoration: none;
}
body.page-h3.single-post .norah-post__nav .label {
display: block;
color: var(--ink-muted);
font-size: 12px;
line-height: 16px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
body.page-h3.single-post .norah-post__nav .title,
body.page-h3.single-post .norah-post__nav p {
margin: var(--space-1) 0 0;
font-size: 15px;
line-height: 22px;
font-weight: 500;
}
body.page-h3.single-post .norah-post__nav a:hover .title,
body.page-h3.single-post .norah-post__nav a:hover p {
color: var(--accent);
}
@media (max-width: 39.999rem) {
body.page-h3.single-post .norah-post__hero {
padding-block: var(--space-8) 0;
}
body.page-h3.single-post .norah-post__title {
font-size: 28px;
line-height: 34px;
}
body.page-h3.single-post .norah-post__lead {
font-size: 17px;
line-height: 26px;
}
body.page-h3.single-post .norah-prose {
font-size: 16px;
line-height: 26px;
}
body.page-h3.single-post .norah-prose h2 {
font-size: 24px;
line-height: 30px;
}
}