/* ============================================================ Becoming Beautifully · production styles (one shared stylesheet) The NEW "Blend" design system, ported from the finished home-page preview: a letterpress letterhead world on a gold-warmed living ombre with a static cotton-paper grain, a 1px rose-mid inset frame with a faint inner keyline + gold corner brackets, a minimal centered nav, engraved keyline buttons, gold diamond rules, and a 12-photo gathering gallery. Motion is progressively enhanced and fully gated (no-JS / reduced-motion safe; nothing ever stranded hidden). Layout of this file: fonts - self-hosted Lora 400/400i, Poppins 300/500 :root - NEW design tokens + a "carry-forward support" block that re-declares the structural scale tokens the standalone-page styles need and re-maps the old semantic roles onto the NEW palette reset living ombre + paper grain (.bb-bg) inset frame (.bb-frame) skip link / focus shared type / dots / rules buttons nav (minimal, centered) hero (letterhead lockup + framed photo) section scaffold / panels about / photo+type band / experiences / bundle / teaser gallery / quote band / signup / footer modal (reserve) [shared, home + experiences] standalone pages (.bb-page / .bb-catalog / .bb-xp / .bb-card / .bb-faq / .bb-prose / .bb-404 / .bb-poem) [restyled to new tokens] responsive motion (gated) + reduced-motion + print Rule: gold is the jewelry - ornament on light, text only on dark. Never gold text on a light surface. Rose mark lives in footer + favicon only. Zero em dashes anywhere. */ /* ---- Fonts (self-hosted, latin subset) ---- No external request, no third-party tracking. Files live in /assets/fonts/ and inherit the /assets/* 1yr-immutable cache rule. Above-the-fold faces are preloaded in each . */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/lora-400.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/lora-400italic.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('/assets/fonts/poppins-300.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/poppins-500.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ---- Tokens (NEW design system) ---- */ :root { --linen: #F5F0E8; --soft-rose: #F0E6E2; --rose-mid: #D4A898; /* structural hairline color */ --becoming-brown: #5C4A2A; --blush-brown: #7A4F42; --sage-web: #44603C; /* AA-safe sage for small labels (clears 4.5:1 on the deepest ombre point + all panels) */ --gold: #C9A96E; /* the jewelry; ornament on light, text only on dark */ --gold-soft: rgba(201, 169, 110, 0.55); /* Gold-foil + shimmer was tried and rejected (read cheap/chintzy), so these collapse to FLAT gold: every ornament that referenced the foil renders as a clean solid-gold hairline. Clean flat-gold letterpress restored. */ --gold-foil: linear-gradient(var(--gold), var(--gold)); --gold-foil-x: linear-gradient(var(--gold), var(--gold)); --deep-dark: #2C2420; --cream: #FBF7F1; --font-serif: 'Lora', Georgia, 'Times New Roman', serif; --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system, sans-serif; --tr-caps: 0.20em; --tr-label: 0.18em; --tr-link: 0.16em; /* inline caps link-labels */ --tr-word: 0.30em; --gold-rule-w: 44px; /* canonical width for centered gold ornament rules */ --maxw: 1100px; --frame-inset: 24px; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur: 320ms; /* ---- Carry-forward support ---- The standalone-page styles (.bb-page / .bb-xp / .bb-faq / .bb-prose / .bb-404 / .bb-poem), the shared .bb-modal, and the .bb-rule--short helper were written against the OLD token set. Rather than rewrite every declaration, we re-declare the structural scale tokens here and re-map the old SEMANTIC roles onto the NEW palette, so those rules harmonize with the new aesthetic with no orphaned var() lookups. */ /* semantic roles, remapped onto the new palette */ --fg: var(--becoming-brown); /* headings, wordmark */ --fg-body: var(--deep-dark); /* body copy */ --fg-muted: var(--blush-brown); /* subtext, captions, quotes */ --label: var(--sage-web); /* section / eyebrow labels (AA) */ --panel: rgba(251, 247, 241, 0.62); /* faint card lift over the ombre */ /* type scale (used by the standalone pages + modal) */ --fs-h1: clamp(28px, 4.4vw, 40px); --fs-h2: clamp(24px, 3.5vw, 28px); --fs-h3: clamp(20px, 2.5vw, 24px); --fs-band: clamp(24px, 3.4vw, 30px); /* photo-band head + bundle title */ --fs-quote: clamp(22px, 3vw, 28px); --fs-lead: 18px; --fs-body: 16px; --fs-sm: 15px; --fs-meta: 14px; --fs-label: 12px; --fs-label-sm:11px; --fs-btn-sm: 12px; /* line heights */ --lh-tight: 1.12; --lh-snug: 1.3; --lh-body: 1.7; /* spacing (8pt scale) */ --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* corner radii */ --radius-md: 14px; --radius-pill: 999px; /* motion (legacy aliases) */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 160ms; } /* ---- Reset ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; font-family: var(--font-serif); font-size: 16px; line-height: 1.7; color: var(--deep-dark); /* Solid linen paint fallback only. The gold-warmed ombre lives on the already-fixed .bb-bg layer (below) so it composites once instead of re-rasterizing against the viewport on every scroll frame. This base color covers the brief moment before .bb-bg paints and any z-index edge. */ background: var(--linen); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Living ombre: fixed base gradient + drifting blob layer ---- */ .bb-bg { position: fixed; inset: 0; z-index: -1; /* above body background, below all content + frame */ pointer-events: none; overflow: hidden; /* a scaled blob can never push page width / cause h-scroll */ /* The gold-warmed ombre base lives HERE (a single fixed compositor layer) so it stays pinned to the viewport but paints once instead of every scroll frame. Reduced-motion / no-JS users see this identical static ombre; the drifting blobs add slow life on top. Gold sits at very low alpha so it reads as warmth, never a visible blob, and body text contrast is untouched. */ background: radial-gradient(120% 80% at 82% 8%, rgba(201, 169, 110, 0.11) 0%, rgba(201, 169, 110, 0) 52%), radial-gradient(110% 70% at 12% 96%, rgba(201, 169, 110, 0.09) 0%, rgba(201, 169, 110, 0) 50%), linear-gradient(180deg, #F5F0E8 0%, #ECDCD5 28%, #E7D2CA 50%, #ECDCD5 72%, #F5F0E8 100%); } /* Fine cotton-paper grain: a STATIC, whisper-faint fractal-noise tile painted on a pseudo-element of the ombre layer. Because it lives at .bb-bg's z-index:-1 it sits ABOVE the ombre/blobs but strictly BELOW all content + the z-index:5 frame, so it can never reduce text contrast (text renders over it). data-URI is CSP-safe under img-src 'self' data:. # is encoded %23; the SVG uses single quotes so the URI parses. opacity 0.03 = letterpress stock texture, never visible noise. */ .bb-bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"); background-size: 180px 180px; } .bb-bg__blob { position: absolute; border-radius: 50%; /* Softness comes from the radial alpha falloff, NOT filter:blur (which would jank when animated over a large area). Transform-only animation = GPU cheap. will-change is added ONLY while the drift actually runs (in the no-preference block) so reduced-motion / no-JS users pay no layer-promotion cost. */ } .bb-bg__blob--1 { width: 62vw; height: 62vw; top: -14vw; left: -10vw; background: radial-gradient(circle at 50% 50%, rgba(216, 176, 160, 0.28) 0%, rgba(216, 176, 160, 0) 66%); } .bb-bg__blob--2 { width: 54vw; height: 54vw; bottom: -16vw; right: -12vw; background: radial-gradient(circle at 50% 50%, rgba(216, 176, 160, 0.22) 0%, rgba(216, 176, 160, 0) 64%); } .bb-bg__blob--3 { width: 48vw; height: 48vw; top: 36%; left: 30%; background: radial-gradient(circle at 50% 50%, rgba(201, 169, 110, 0.06) 0%, rgba(201, 169, 110, 0) 62%); } img { display: block; max-width: 100%; } a { color: inherit; } h1, h2, h3, p, blockquote, figure { margin: 0; } /* Branded text selection */ ::selection { background: var(--rose-mid); color: var(--deep-dark); } /* ---- Signature inset frame (rose-mid does the structural work) ---- */ .bb-frame { position: fixed; inset: var(--frame-inset); border: 1px solid var(--rose-mid); pointer-events: none; z-index: 5; /* Letterpress-card double rule: a whisper-faint second hairline 4px inside the rose-mid edge, drawn as an inset outline so it needs no extra element and can never push page width. Very low alpha so it reads as a fine engraved inner keyline, not a second visible border. Both ::before/::after are taken by the gold corner brackets, so the outline route keeps them free. */ outline: 1px solid rgba(212, 168, 152, 0.28); outline-offset: -5px; } /* Restrained gold corner brackets overlaid on the rose-mid frame (ornament only). Two ~22px L-ticks per pseudo-element, drawn with corner-anchored gradients that sit just inside the frame edge so they never exceed the viewport at any inset. */ .bb-frame::before, .bb-frame::after { content: ""; position: absolute; inset: -1px; pointer-events: none; background-repeat: no-repeat; } .bb-frame::before { /* top-left + top-right brackets (horizontal arm + vertical arm each). Static brushed foil: one 135deg gradient carries both a light-catch and a shadowed edge, so the L-ticks read as stamped metal. Ungated, so identical under reduced-motion / no-JS. */ background-image: var(--gold-foil), var(--gold-foil), var(--gold-foil), var(--gold-foil); background-size: 22px 1px, 1px 22px, 22px 1px, 1px 22px; background-position: top left, top left, top right, top right; } .bb-frame::after { /* bottom-left + bottom-right brackets */ background-image: var(--gold-foil), var(--gold-foil), var(--gold-foil), var(--gold-foil); background-size: 22px 1px, 1px 22px, 22px 1px, 1px 22px; background-position: bottom left, bottom left, bottom right, bottom right; } /* ---- Skip link ---- */ .bb-skip { position: fixed; top: -60px; left: 16px; background: var(--becoming-brown); color: var(--linen); padding: 12px 20px; border-radius: 999px; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; z-index: 200; transition: top var(--dur) var(--ease-out); } .bb-skip:focus-visible { top: 16px; outline: 2px solid var(--cream); outline-offset: 2px; } /* ---- Focus visibility ---- */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--becoming-brown); outline-offset: 3px; } /* ---- Shared type ---- */ .bb-label { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--sage-web); margin: 0; } .bb-h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.25; color: var(--becoming-brown); text-wrap: balance; /* even ragged lines on naturally wrapping headings */ } /* Display-scale H2 modifier (Experiences feature heading). */ .bb-h2--lg { font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -0.01em; } .bb-body { font-family: var(--font-serif); font-size: 16px; line-height: 1.7; color: var(--deep-dark); max-width: 62ch; margin-inline: auto; /* tighten centered measure to ~62ch */ text-wrap: pretty; /* widow / orphan control */ } /* Per-word reveal wrapper. Resting state is plain inline text with real spaces between words, so no-JS / reduced-motion read normally and wrap naturally. The animated (inline-block + blur) state lives only inside the gated rule. */ .bb-word { display: inline; } /* Recurring gold dot motif (ornament only, never text meaning) */ .bb-dots { font-family: var(--font-serif); color: var(--gold); letter-spacing: 0.5em; font-size: 18px; line-height: 1; display: inline-block; } /* Inline label separator: a tiny engraved gold diamond (the hero-flourish motif). A solid shape stays visible at label size where a serif middot dissolves, and explicit margins keep the gap even despite the label's letter-spacing. */ .bb-label__sep { display: inline-block; width: 5px; height: 5px; background: var(--gold); transform: rotate(45deg); vertical-align: middle; margin: 0 12px 2px; } /* Structural hairline (rose-mid) - used for in-card rules + section rule base */ .bb-rule { width: 54px; height: 0; border: none; border-top: 1px solid var(--rose-mid); margin: 0; } /* Centered short rule used in section/page heads + cards (carry-forward helper). */ .bb-rule--short { width: 44px; margin: 18px auto; } /* Gold flourish under section wordmarks (ornament, not structural). A 1px brushed-foil hairline: a soft light-band (parked off the rule at rest) stacked over the static foil. The band only sweeps once, the moment the section reveals (gated block); the rule also "draws" from its center there. Resting / reduced-motion / no-JS state = full-width static foil. */ .bb-rule--gold { width: var(--gold-rule-w); height: 1px; border: none; background-image: var(--gold-foil-x); background-size: 100% 100%; background-repeat: no-repeat; background-position: 0 0; } /* Dashed rose-mid soft-rule for gentle mid-section breaks. */ .bb-rule--dashed { width: min(420px, 70%); height: 0; border: 0; border-top: 2px dashed var(--rose-mid); opacity: 0.85; margin: 0 auto; } /* ---- Buttons ---- */ .bb-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 28px; border-radius: 999px; font-family: var(--font-sans); font-weight: 500; font-size: 13px; letter-spacing: var(--tr-caps); text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } /* Engraved-invitation primary: becoming-brown fill + linen label (AA), with generous horizontal padding and a finer, wider-tracked label so it reads as a foil-stamped card, not a web pill. min-height stays 44px (target). A delicate 1px gold inner keyline inset ~4px from the edge (::before) is the foil-stamped detail; gold sits at a tasteful alpha as ornament, never text, so AA on the linen label is untouched. */ .bb-btn--primary { position: relative; background: var(--becoming-brown); color: var(--linen); border-color: var(--becoming-brown); padding: 0 40px; font-weight: 400; font-size: 12px; letter-spacing: 0.24em; } .bb-btn--primary::before { content: ""; position: absolute; inset: 4px; border-radius: 999px; pointer-events: none; /* Foil keyline. A 1px brushed-foil ring via the mask trick (a gradient border would square the pill's rounded corners). The foil fill is clipped to a 1px band by masking out the inner content-box, so only the ring shows. Static / ungated -> identical under reduced-motion + no-JS. */ background: var(--gold-foil) border-box; padding: 1px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .bb-btn--primary:hover { background: var(--blush-brown); border-color: var(--blush-brown); } .bb-btn--secondary { background: transparent; color: var(--becoming-brown); border-color: var(--becoming-brown); } .bb-btn--secondary:hover { background: rgba(240, 230, 226, 0.6); } .bb-btn--sm { min-height: 40px; padding: 0 22px; font-size: 12px; } .bb-btn:disabled { opacity: 0.6; cursor: wait; } /* ============================================================ NAV · minimal, centered, non-sticky, over the living ombre Stationery treatment: links in becoming-brown on the linen ombre, gold hover/focus underlines, brown "THE LETTER" pill. No repeated wordmark (the hero carries it), no menu button. ============================================================ */ .bb-nav { position: relative; z-index: 12; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; max-width: calc(var(--maxw) + 128px); margin: 0 auto; padding: 40px clamp(24px, 5vw, 64px) 0; } /* Small letterhead wordmark over the links: the conventional identity-goes-home affordance, present only where the hero is not (subpages). One line, the same thin tracked treatment as the hero/footer lockups; trailing tracking is re-centred by an equal padding-left. */ .bb-nav__brand { font-family: var(--font-sans); font-weight: 300; font-size: 13px; letter-spacing: 0.32em; padding-left: 0.32em; text-transform: uppercase; white-space: nowrap; color: var(--becoming-brown); text-decoration: none; transition: color var(--dur-fast) var(--ease); } .bb-nav__brand:hover, .bb-nav__brand:focus-visible { color: var(--blush-brown); } /* The homepage hero carries the full wordmark lockup; never double it. */ .bb-is-home .bb-nav__brand { display: none; } .bb-nav__list { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2.4vw, 38px); list-style: none; margin: 0; padding: 0; } .bb-nav__link { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--becoming-brown); text-decoration: none; padding: 6px 0; position: relative; } /* Gold reveal underline (ornament on light): ONE recipe, shared by the nav links and the footer meta/nav links. */ .bb-nav__link::after, .bb-footer__meta a::after, .bb-footer__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .bb-nav__link:hover::after, .bb-nav__link:focus-visible::after, .bb-nav__link[aria-current="page"]::after, .bb-footer__meta a:hover::after, .bb-footer__meta a:focus-visible::after, .bb-footer__links a:hover::after, .bb-footer__links a:focus-visible::after { transform: scaleX(1); } /* ============================================================ HERO · stationery invitation-card lockup on the living ombre A centered card lockup (clean letterhead wordmark, rust tagline, hairline, italic h1, CTAs) sits above a large framed photo inset. ============================================================ */ .bb-hero { position: relative; padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px) clamp(48px, 7vw, 88px); text-align: center; } .bb-hero__inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 30px; } /* Wordmark: clean SANS-SERIF letterhead logotype on the LIGHT ombre. "BECOMING" / "BEAUTIFULLY" stacked, thin Poppins 300, widely tracked caps, solid warm becoming-brown. The trailing 0.32em tracking is re-centred by an equal padding-left so each stacked line centres truly. */ /* Stacked "BECOMING" / "BEAUTIFULLY", thin Poppins 300, widely tracked caps. Uniform tracking, so each line's width follows its letter count (BECOMING is naturally narrower than BEAUTIFULLY). The trailing letter-spacing is re-centred by an equal padding-left so each line centres true. */ .bb-hero__wordmark { font-family: var(--font-sans); font-weight: 300; text-transform: uppercase; letter-spacing: 0.55em; padding-left: 0.55em; font-size: clamp(22px, 4.2vw, 40px); line-height: 1.28; color: var(--becoming-brown); margin: 0; } /* Engraved hero flourish: a fine centered gold hairline with a tiny gold diamond set at its center, so the rule reads like an engraved letterpress ornament. The diamond is a rotated ::after square (ornament only, never text). */ .bb-hero__flourish { position: relative; width: calc(var(--gold-rule-w) + 24px); height: 1px; border: 0; margin: 0; overflow: visible; background-image: var(--gold-foil-x); background-size: 100% 100%; background-repeat: no-repeat; background-position: 0 0; } .bb-hero__flourish::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--gold); transform: rotate(45deg); } /* The one

: italic Lora invitation line */ .bb-hero__h1 { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 2.8vw, 26px); line-height: 1.45; color: var(--blush-brown); max-width: 30ch; margin: 0; text-wrap: balance; } /* GATHER. GROW. BECOME. in tracked Poppins caps. Rust (blush-brown, 6.1:1 on linen). Periods, not interpunct dots. */ .bb-hero__tagline { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--blush-brown); margin: 0; } .bb-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; margin-top: 2px; } .bb-hero__ghost { font-family: var(--font-sans); font-weight: 500; font-size: 12.5px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--becoming-brown); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; /* comfortable hit area */ position: relative; padding-bottom: 4px; } /* Gold hover underline on the ghost CTA */ .bb-hero__ghost::after { content: ""; position: absolute; left: 0; right: 22px; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease-out); } .bb-hero__ghost:hover::after, .bb-hero__ghost:focus-visible::after { transform: scaleX(1); } .bb-hero__ghost-arrow { display: inline-block; margin-left: 8px; transition: transform var(--dur) var(--ease-out); } .bb-hero__ghost:hover .bb-hero__ghost-arrow, .bb-hero__ghost:focus-visible .bb-hero__ghost-arrow { transform: translateX(5px); } /* ---- Framed photo inset below the lockup ---- */ .bb-hero__figure { max-width: 1000px; margin: clamp(40px, 6vw, 72px) auto 0; } /* Matted, framed print: rose hairline frame -> warm linen mat -> gold hairline -> photo. Two-layer shadow (crisp contact + soft ambient) lifts it off the page like a framed photograph on stationery. */ .bb-hero__frame { border: 1px solid var(--rose-mid); border-radius: 16px; padding: clamp(10px, 1.5vw, 18px); /* the mat */ background: linear-gradient(180deg, #FBF7F1 0%, #F5ECE3 100%); box-shadow: 0 1px 2px rgba(92, 74, 42, 0.12), 0 28px 64px -28px rgba(92, 74, 42, 0.38); } .bb-hero__mat { position: relative; border-radius: 8px; overflow: hidden; /* clips the gentle Ken-Burns inside */ background: var(--soft-rose); } /* Engraved gold hairline set directly around the photo (over it, so the Ken-Burns zoom never slides out from under the line). */ .bb-hero__mat::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(201, 169, 110, 0.55); border-radius: inherit; pointer-events: none; } .bb-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 1188 / 738; object-fit: cover; object-position: center 40%; transform: scale(1.0); transform-origin: center 42%; } .bb-hero__caption { font-family: var(--font-serif); font-style: normal; font-size: 14px; color: var(--blush-brown); text-align: center; margin: 16px 0 0; } .bb-hero__caption .bb-dots { color: var(--gold); letter-spacing: 0; margin: 0 0.3em; font-size: inherit; } /* ============================================================ GENERIC SECTION SCAFFOLD ============================================================ */ .bb-section { padding: clamp(72px, 10vw, 120px) clamp(20px, 5vw, 64px); } .bb-section__head, .bb-about__inner { max-width: 680px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; } /* Stationery panel: soft-rose ~55% wash with rose-mid hairline edges. */ .bb-panel { background: linear-gradient(0deg, rgba(240, 230, 226, 0.55), rgba(240, 230, 226, 0.55)); border-top: 1px solid rgba(212, 168, 152, 0.5); border-bottom: 1px solid rgba(212, 168, 152, 0.5); } .bb-break { display: flex; justify-content: center; padding: 0 clamp(20px, 5vw, 64px); } /* ============================================================ ABOUT · centered .bb-about__inner shares the centered head lockup with .bb-section__head (grouped above). ============================================================ */ .bb-about__signoff { font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.6; color: var(--blush-brown); margin-top: 6px; } /* Quiet manifesto invitation under the sign-off (borrows the back-link voice). */ .bb-about__more { margin-top: 4px; } /* ============================================================ PHOTO + TYPE BAND ============================================================ */ .bb-band { background: linear-gradient(0deg, rgba(212, 168, 152, 0.10), rgba(212, 168, 152, 0.10)), var(--soft-rose); border-top: 1px solid rgba(212, 168, 152, 0.5); border-bottom: 1px solid rgba(212, 168, 152, 0.5); } /* When the band directly follows the About panel, the panel's border-bottom and the band's border-top stack into the page's only 2px hairline. Keep the seam at the system's 1px. */ .bb-panel + .bb-band { border-top: 0; } .bb-band__grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; align-items: stretch; gap: 0; } .bb-band__media { position: relative; min-height: 360px; overflow: hidden; /* Brand-toned placeholder while the lazy image streams in. */ background: linear-gradient(160deg, #F4E7E2 0%, var(--soft-rose) 100%); } .bb-band__img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; } .bb-band__text { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: clamp(40px, 6vw, 72px); } .bb-band__head { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-band); line-height: 1.22; color: var(--becoming-brown); max-width: 16ch; text-wrap: balance; } .bb-band__copy { font-family: var(--font-serif); font-size: 16px; line-height: 1.75; color: var(--deep-dark); max-width: 42ch; text-wrap: pretty; } .bb-band__sig { font-family: var(--font-serif); font-style: normal; font-size: 15px; color: var(--blush-brown); } /* ============================================================ EXPERIENCES · elevated cards ============================================================ */ .bb-experiences__grid { max-width: var(--maxw); margin: clamp(40px, 6vw, 60px) auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .bb-offering { background: linear-gradient(180deg, #FBF7F1 0%, #F4EBE4 100%); border: 1px solid rgba(212, 168, 152, 0.55); border-radius: var(--radius-md); padding: clamp(28px, 3.4vw, 38px); display: flex; flex-direction: column; align-items: flex-start; gap: 14px; /* Two-layer depth: crisp 1px contact shadow + soft ambient falloff. */ box-shadow: 0 1px 2px rgba(92, 74, 42, 0.10), 0 12px 30px -24px rgba(92, 74, 42, 0.45); transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); } .bb-offering:hover, .bb-offering:focus-within { transform: translateY(-5px); /* Gold-on-hover vocabulary shared with .bb-tile:hover so the cards and the gallery read as one component kit. Gold stays ornament (border + inset hairline), never text, so AA is untouched. */ box-shadow: 0 1px 2px rgba(92, 74, 42, 0.10), 0 24px 44px -26px rgba(92, 74, 42, 0.5), inset 0 0 0 1px rgba(201, 169, 110, 0.45); border-color: var(--gold); } .bb-offering__label { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--sage-web); margin: 0; } .bb-offering__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.25; color: var(--becoming-brown); text-wrap: balance; } .bb-offering__desc { font-family: var(--font-serif); font-size: 15.5px; line-height: 1.65; color: var(--deep-dark); flex: 1; text-wrap: pretty; } .bb-offering__meta { font-family: var(--font-serif); font-size: 18px; color: var(--blush-brown); font-variant-numeric: oldstyle-nums; /* letterpress text figures (no-op fallback) */ } .bb-offering .bb-btn { margin-top: 4px; } /* Bundle band · soft-rose panel. Its premium rose+gold double-frame surface (gradient + keyline + shadows) lives in the shared rule grouped with .bb-xp--bundle and .bb-card--highlight, further down. */ .bb-bundle { max-width: var(--maxw); margin: clamp(40px, 5vw, 60px) auto 0; border: 1px solid var(--rose-mid); border-radius: var(--radius-md); padding: clamp(36px, 5vw, 56px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .bb-bundle__label { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--sage-web); margin: 0; } .bb-bundle__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-band); color: var(--becoming-brown); } .bb-bundle__price { font-family: var(--font-serif); font-style: normal; font-size: 18px; color: var(--blush-brown); display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font-variant-numeric: oldstyle-nums; /* letterpress text figures (no-op fallback) */ } .bb-bundle__price .bb-dots { color: var(--gold); letter-spacing: 0; margin: 0 0.25em; } .bb-bundle__desc { font-family: var(--font-serif); font-size: 16px; line-height: 1.7; color: var(--deep-dark); max-width: 52ch; text-wrap: pretty; } /* Teaser */ .bb-teaser { max-width: var(--maxw); margin: clamp(28px, 4vw, 44px) auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; } .bb-teaser__note { font-family: var(--font-serif); font-style: normal; font-size: 17px; line-height: 1.6; color: var(--blush-brown); max-width: 46ch; text-wrap: pretty; } .bb-teaser__link { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: var(--tr-link); text-transform: uppercase; color: var(--becoming-brown); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; position: relative; padding-bottom: 4px; } /* Persistent rose-mid underline at rest (a11y 1.4.1: prose-link affordance not conveyed by color alone), brightening to gold on hover/focus, with the arrow nudge. ONE recipe, shared by the teaser link and the gallery follow link. */ .bb-teaser__link::after, .bb-gallery__follow::after { content: ""; position: absolute; left: 0; right: 22px; bottom: 0; height: 1px; background: var(--rose-mid); transform: scaleX(1); transform-origin: left; transition: background-color var(--dur) var(--ease-out); } .bb-teaser__link:hover::after, .bb-teaser__link:focus-visible::after, .bb-gallery__follow:hover::after, .bb-gallery__follow:focus-visible::after { background: var(--gold); } .bb-teaser__link .arrow, .bb-gallery__follow .arrow { transition: transform var(--dur) var(--ease-out); } .bb-teaser__link:hover .arrow, .bb-teaser__link:focus-visible .arrow, .bb-gallery__follow:hover .arrow, .bb-gallery__follow:focus-visible .arrow { transform: translateX(4px); } /* ============================================================ GATHERINGS GALLERY · curated + self-hosted (no embed/widget) ============================================================ */ .bb-gallery__intro { font-family: var(--font-serif); font-size: clamp(16px, 2vw, 18px); line-height: 1.7; color: var(--blush-brown); max-width: 46ch; text-wrap: pretty; } .bb-gallery__grid { max-width: var(--maxw); margin: clamp(40px, 6vw, 60px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .bb-tile { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--rose-mid); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(92, 74, 42, 0.10), 0 12px 30px -24px rgba(92, 74, 42, 0.45); background: linear-gradient(160deg, #F4E7E2 0%, var(--soft-rose) 100%); transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .bb-tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s var(--ease-out); } /* For full-length portraits the centered 4:5 crop lands on torsos and cuts faces; bias the crop toward the top of the frame where the faces are. */ .bb-tile__img--top { object-position: 50% 15%; } /* Gentle hover zoom + faint gold border and inner glow (works on every pointer, never animates layout). Tilt is added separately, gated to fine pointers. Scale matches the fine-pointer recipe so both pointers share one end-state. */ .bb-tile:hover .bb-tile__img { transform: scale(1.045); } .bb-tile:hover { border-color: var(--gold); box-shadow: 0 1px 2px rgba(92, 74, 42, 0.10), 0 18px 40px -26px rgba(92, 74, 42, 0.5), inset 0 0 0 1px rgba(201, 169, 110, 0.45); } .bb-gallery__follow { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 6px; text-align: center; max-width: 100%; margin: clamp(36px, 5vw, 52px) auto 0; font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: var(--tr-link); text-transform: uppercase; color: var(--becoming-brown); text-decoration: none; position: relative; padding-bottom: 4px; } .bb-gallery__follow .bb-dots { color: var(--gold); letter-spacing: 0; margin: 0 0.25em; } /* Underline + arrow live in the shared rule grouped with .bb-teaser__link. */ /* ============================================================ QUOTE BAND · text-only with gold detail ============================================================ */ .bb-quoteband { background: linear-gradient(180deg, rgba(212, 168, 152, 0.14), rgba(212, 168, 152, 0.06)), var(--linen); border-top: 1px solid rgba(212, 168, 152, 0.5); border-bottom: 1px solid rgba(212, 168, 152, 0.5); padding: clamp(72px, 10vw, 120px) clamp(20px, 5vw, 64px); } .bb-quoteband__inner { max-width: 680px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; } /* Gold flourish in the quote band (ornament): same engraved center-diamond mark as the hero flourish so the two ornamented rules read as a pair. */ .bb-quoteband__flourish { position: relative; width: calc(var(--gold-rule-w) + 24px); height: 1px; border: 0; margin: 0; overflow: visible; /* Static brushed foil (twin of the hero flourish). It "draws" from the center on section reveal; that scaleX lives in the gated block, so the resting / reduced-motion / no-JS state is full-width foil. */ background: var(--gold-foil-x); } .bb-quoteband__flourish::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--gold); transform: rotate(45deg); } .bb-quoteband__quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(26px, 3.8vw, 34px); line-height: 1.32; color: var(--becoming-brown); } .bb-quoteband__attr { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blush-brown); } /* ============================================================ SIGNUP ============================================================ */ .bb-signup__inner { max-width: 600px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; } .bb-signup__body { margin: 0 auto; } .bb-signup__form { display: flex; gap: 12px; width: 100%; max-width: 480px; margin-top: 6px; flex-wrap: wrap; justify-content: center; } .bb-input { flex: 1; min-width: 200px; min-height: 44px; padding: 0 18px; border-radius: 999px; /* Control boundary must clear 3:1 (SC 1.4.11 Non-text Contrast). becoming-brown gives ~7.5:1 on the linen/soft-rose bg and matches the secondary-button edge treatment. rose-mid stays the decorative-hairline color, not a control edge. */ border: 1.5px solid var(--becoming-brown); background: rgba(255, 255, 255, 0.55); font-family: var(--font-serif); font-size: 15px; color: var(--deep-dark); } .bb-input::placeholder { color: var(--blush-brown); opacity: 0.85; } .bb-input:focus-visible { outline: 2px solid var(--becoming-brown); outline-offset: 2px; border-color: var(--becoming-brown); } /* Signup thank-you card (JS swaps the form for this on submit). */ .bb-signup__thanks-card { max-width: 480px; margin: 0 auto; padding: 4px 0; } .bb-signup__thanks-card .bb-rule { margin: 14px auto; } /* AA-safe green - this 18px text is "normal" size, so the deepened --sage-web is used. */ .bb-signup__thanks { font-family: var(--font-serif); font-size: 18px; color: var(--sage-web); margin: 10px 0; } .bb-signup__thanks-sig { font-family: var(--font-serif); font-size: 16px; color: var(--blush-brown); line-height: 1.55; margin: 10px 0 4px; } /* ============================================================ FOOTER · the one rose mark lives here ============================================================ */ .bb-footer { border-top: 1px solid var(--rose-mid); padding: clamp(56px, 8vw, 84px) clamp(20px, 5vw, 64px) clamp(48px, 6vw, 64px); text-align: center; } .bb-footer__inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; } .bb-footer__mark { width: 36px; height: auto; opacity: 0.9; margin-bottom: 2px; } /* Footer wordmark: the SAME clean letterhead treatment as the hero, kept small for cohesion - thin Poppins 300, widely tracked caps, solid becoming-brown. The trailing 0.30em tracking is re-centred by an equal padding-left. */ .bb-footer__word { font-family: var(--font-sans); font-weight: 300; font-size: 22px; letter-spacing: var(--tr-word); padding-left: var(--tr-word); text-transform: uppercase; color: var(--becoming-brown); /* Full stacked letterhead, linked home (the nav intentionally carries no wordmark, so this is the site's one always-present route back). Stack tightness mirrors the hero lockup (1.28) with a touch more air at 22px. */ text-decoration: none; line-height: 1.35; transition: color var(--dur-fast) var(--ease); } .bb-footer__word:hover, .bb-footer__word:focus-visible { color: var(--blush-brown); } .bb-footer__tag { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--sage-web); } .bb-footer__tag .bb-dots { color: var(--gold); letter-spacing: 0.30em; margin: 0 0.3em; font-size: inherit; } .bb-footer__email { font-family: var(--font-serif); font-size: 18px; color: var(--becoming-brown); text-decoration: none; border-bottom: 1px solid var(--rose-mid); padding-bottom: 2px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .bb-footer__email:hover, .bb-footer__email:focus-visible { color: var(--blush-brown); border-color: var(--gold); } .bb-footer__meta, .bb-footer__links { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--deep-dark); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .bb-footer__meta a, .bb-footer__links a { color: inherit; text-decoration: none; position: relative; padding-bottom: 2px; } /* Gold reveal underline lives in the shared rule grouped with .bb-nav__link. */ .bb-footer__sep { color: var(--rose-mid); } /* ============================================================ MODAL (reserve) · shared by home + experiences z-index 100 sits above the nav (12) and frame (5), below the skip link (200). Tokens resolve via the carry-forward block above. ============================================================ */ .bb-modal { position: fixed; inset: 0; background: rgba(44, 36, 32, 0.42); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100; animation: bb-fade .3s ease; } .bb-modal[hidden] { display: none; } .bb-modal__card { background: var(--linen); border: 1px solid var(--rose-mid); border-radius: var(--radius-md); padding: 44px 40px 40px; max-width: 480px; width: 100%; box-shadow: 0 1px 2px rgba(92, 74, 42, 0.12), 0 28px 64px -28px rgba(92, 74, 42, 0.45); text-align: center; position: relative; animation: bb-rise .4s var(--ease-out); } .bb-modal__close { position: absolute; top: 8px; right: 8px; background: none; border: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--fg-muted); cursor: pointer; line-height: 1; border-radius: var(--radius-pill); transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease); } .bb-modal__close:hover { color: var(--fg); background: var(--soft-rose); } .bb-modal__label { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-label-sm); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label); margin: 0 0 10px; } .bb-modal__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); color: var(--fg); margin: 0 0 8px; } .bb-modal__body { font-family: var(--font-serif); font-size: var(--fs-body); line-height: 1.65; color: var(--fg-body); margin: 18px auto 24px; max-width: 36ch; } .bb-modal__sig { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-meta); color: var(--blush-brown); margin: 22px 0 0; } @keyframes bb-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes bb-rise { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } } /* ============================================================ STANDALONE PAGES (/experiences, /faq, /privacy, /404) Restyled to the new tokens/aesthetic: same ombre/frame/letterhead world, rose-mid structure, gold reserved for ornament only. The old hero-mark / rose-ornament treatments are dropped (rose only in footer + favicon), so the page heads lead with the .bb-label + a short rule rather than a repeated logo mark. ============================================================ */ .bb-page { padding: var(--sp-10) var(--sp-5) var(--sp-9); max-width: 720px; margin: 0 auto; } .bb-page--narrow { max-width: 680px; } .bb-page--wide { max-width: 940px; } .bb-page__head { text-align: center; margin-bottom: var(--sp-8); /* Even 18px rhythm, matching the home section heads (.bb-section__head). */ display: flex; flex-direction: column; align-items: center; gap: 18px; } /* Inside flex heads the short rule already gets the flex gap; its own block margin would double-space it (30px spikes in a 18px rhythm). Scoped so the modal's non-flex rule keeps relying on the margin. */ .bb-page__head .bb-rule--short, .bb-404__inner .bb-rule--short { margin-block: 0; } .bb-page__h { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--fg); margin: 0; text-wrap: balance; letter-spacing: -0.01em; /* optical tracking at display size */ } .bb-page__intro { font-family: var(--font-serif); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-muted); margin: 0 auto; max-width: 50ch; text-wrap: pretty; } /* Motto sub-line under a page H1 (e.g. /experiences). */ .bb-page__motto { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); color: var(--blush-brown); margin: 0 auto; max-width: 50ch; } .bb-page__back-wrap { text-align: center; margin-top: var(--sp-7); } .bb-page__back { display: inline-block; font-family: var(--font-serif); font-style: italic; color: var(--fg-muted); border-bottom: 1px solid var(--rose-mid); padding-bottom: 2px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .bb-page__back:hover, .bb-page__back:focus-visible { color: var(--fg); border-bottom-color: var(--gold); } /* ---- Experiences catalog (/experiences) ---- */ .bb-catalog { display: grid; gap: var(--sp-9); } .bb-cat { display: grid; gap: var(--sp-6); } .bb-cat + .bb-cat { padding-top: var(--sp-9); border-top: 1px solid var(--rose-mid); } .bb-cat__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-7) var(--sp-6); } .bb-cat__grid--single { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } /* A single experience entry in the catalog. Header centered, body left-aligned. */ .bb-xp { display: flex; flex-direction: column; } .bb-xp__label { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-label-sm); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--label); margin: 0 0 8px; } .bb-xp__title { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); color: var(--fg); margin: 0; line-height: var(--lh-snug); } .bb-xp__tagline { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-sm); color: var(--blush-brown); margin: 6px 0 0; } .bb-xp__price { font-family: var(--font-serif); font-size: var(--fs-lead); color: var(--blush-brown); margin: 6px 0 0; font-variant-numeric: oldstyle-nums; /* letterpress text figures (no-op fallback) */ } .bb-xp__price--soon { font-style: italic; } .bb-xp__note { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-meta); color: var(--fg-muted); margin: 6px 0 0; } .bb-xp__rule { border: 0; border-top: 1px solid var(--rose-mid); margin: var(--sp-4) 0; } .bb-xp__desc { /* Same setting as .bb-offering__desc - the catalog and the home cards typeset the same experiences, so they share one voice. */ font-family: var(--font-serif); font-size: 15.5px; line-height: 1.65; color: var(--fg-body); margin: 0; text-align: left; text-wrap: pretty; } /* margin-top:auto bottom-aligns the CTA across the catalog grid (grid items stretch to the row height, so short descriptions no longer leave the button floating mid-card); the padding keeps the gap on single-column entries. */ .bb-xp__cta { margin-top: auto; padding-top: var(--sp-5); } /* Bundle entry, emphasized within the catalog. Premium surface comes from the shared rose+gold rule grouped with .bb-card--highlight, further down. */ .bb-xp--bundle { border: 1px solid var(--rose-mid); border-radius: var(--radius-md); padding: var(--sp-6) 30px; } /* Flower poem pull-quote near the Creative group. */ .bb-poem { text-align: center; max-width: 560px; margin: 0 auto; padding: var(--sp-4) 0; } .bb-poem__verse { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-quote); line-height: 1.5; color: var(--becoming-brown); margin: 0 0 14px; text-wrap: balance; } .bb-poem__attr { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-label); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--blush-brown); margin: 0 0 16px; } .bb-poem__lines { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.6; margin: 0; } /* ---- Card (empty states, FAQ items) ---- */ .bb-card { background: var(--panel); border: 1px solid var(--rose-mid); border-radius: var(--radius-md); padding: var(--sp-6) 30px; /* Same two-layer contact+ambient pair as .bb-offering / .bb-tile. */ box-shadow: 0 1px 2px rgba(92, 74, 42, 0.10), 0 12px 30px -24px rgba(92, 74, 42, 0.45); } /* THE premium rose+gold double-frame surface: one recipe shared by the home bundle band, the catalog bundle entry, and the FAQ highlight card (gradient wash + inset gold keyline + contact/ambient shadow pair). Echoes the .bb-tile:hover inset gold glow so it reads as system cohesion. Must stay after .bb-card, whose base surface .bb-card--highlight overrides. */ .bb-bundle, .bb-xp--bundle, .bb-card--highlight { background: linear-gradient(180deg, #F2E4DE 0%, #EFDDD6 100%); box-shadow: inset 0 0 0 1px var(--gold-soft), 0 1px 2px rgba(92, 74, 42, 0.08), 0 20px 48px -32px rgba(92, 74, 42, 0.4); } /* ---- FAQ ---- */ .bb-faq { display: grid; gap: var(--sp-6); } .bb-faq__q { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-lead); line-height: var(--lh-snug); color: var(--fg); margin: 0 0 var(--sp-3); } .bb-faq__a { font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-body); margin: 0; text-wrap: pretty; } .bb-faq__a em { color: var(--fg-muted); } .bb-faq__a a { color: var(--fg-muted); border-bottom: 1px solid var(--rose-mid); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .bb-faq__a a:hover, .bb-faq__a a:focus-visible { color: var(--fg); border-bottom-color: var(--gold); } /* ---- Long-form prose (privacy) ---- */ .bb-prose h2 { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--fg); margin: var(--sp-7) 0 var(--sp-3); } .bb-prose p, .bb-prose li { font-family: var(--font-serif); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-body); max-width: 62ch; /* the site-wide body measure (.bb-body) */ text-wrap: pretty; } /* No bold Lora face is shipped; a synthesized bold would betray the letterpress setting. Lead-ins emphasize with heading ink instead of faux weight. */ .bb-prose strong { font-weight: 400; color: var(--becoming-brown); } .bb-prose ul { padding-left: 22px; margin: 0 0 var(--sp-4); } .bb-prose li { margin-bottom: var(--sp-2); } .bb-prose a { color: var(--fg-muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease); } .bb-prose a:hover, .bb-prose a:focus-visible { color: var(--fg); } .bb-prose__meta { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-meta); color: var(--fg-muted); margin-top: var(--sp-7); text-align: center; } /* ---- Manifesto (/manifesto) ---- */ /* A letter, not an article: centered Lora italic beliefs, each line its own breath, closing in rust with the one-word serif sign-off. */ .bb-manifesto { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; } .bb-manifesto__line { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-body); margin: 0; max-width: 52ch; text-wrap: pretty; } .bb-manifesto__rule { margin-block: 14px; } .bb-manifesto__close { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-lead); line-height: 1.6; color: var(--blush-brown); margin: 0; } .bb-manifesto__sig { font-family: var(--font-serif); font-style: normal; font-size: var(--fs-h3); color: var(--becoming-brown); margin: 0; } /* ---- 404 page ---- */ .bb-404 { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: var(--sp-9) var(--sp-5); text-align: center; } .bb-404__inner { max-width: 520px; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); } /* Letterhead wordmark treatment, matching hero/footer. */ .bb-404__word { font-family: var(--font-sans); font-weight: 300; font-size: 22px; letter-spacing: var(--tr-word); padding-left: var(--tr-word); text-transform: uppercase; color: var(--fg); margin: 0; } .bb-404__num { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-btn-sm); letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--label); margin: 0; } .bb-404__h { font-family: var(--font-serif); font-weight: 400; font-size: var(--fs-h2); line-height: var(--lh-snug); color: var(--fg); margin: 0; } .bb-404__body { font-family: var(--font-serif); font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--fg-muted); margin: 0 auto; max-width: 40ch; text-wrap: pretty; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .bb-cat__grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { .bb-band__grid { grid-template-columns: 1fr; } .bb-band__media { min-height: 300px; order: -1; } /* Card grid is already 2-up here; bring the gallery to 2-up too so sibling sections agree on column count in the 761-900px range. */ .bb-gallery__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { :root { --frame-inset: 12px; } .bb-nav { padding: 24px 18px 0; } /* The single centered nav row simply wraps on small screens; links stay becoming-brown on the light ombre (AA ~7.5:1). No dropdown, no menu button. */ /* Shrink the nav type on phones so all five links sit on ONE tidy row at 375px instead of wrapping (5 links ~= 331px at 10px/0.07em + 12px gaps < ~339px). */ .bb-nav__list { gap: 8px 12px; } .bb-nav__link { font-size: 10px; letter-spacing: 0.07em; } .bb-experiences__grid { grid-template-columns: 1fr; } .bb-gallery__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .bb-signup__form { flex-direction: column; } .bb-signup__form .bb-btn { width: 100%; } .bb-input { flex-basis: auto; width: 100%; min-width: 0; } .bb-page { padding: var(--sp-8) var(--sp-5) var(--sp-7); } } @media (max-width: 420px) { /* Stack the hero CTAs, kept centered to preserve the stationery lockup. */ .bb-hero__ctas { flex-direction: column; align-items: center; gap: 16px; } } @media (max-width: 380px) { /* Only the hero needs this: its side-padding clamp floors at 24px, while every other section's clamp already floors at 20px. */ .bb-hero { padding-left: 20px; padding-right: 20px; } } /* ============================================================ MOTION · progressively enhanced, fully gated Default (no-JS, reduced-motion): everything visible, no transforms. The pre-reveal hidden state exists ONLY when BOTH: (a) JS has added .js-anim to , AND (b) the user has NOT requested reduced motion. ============================================================ */ @media (prefers-reduced-motion: no-preference) { /* Pre-reveal state - gated behind .js-anim so no-JS users never see it */ .js-anim .reveal { opacity: 0; transform: translateY(14px); transition: opacity 460ms var(--ease-out), transform 460ms var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } .js-anim .reveal.is-visible { opacity: 1; transform: none; } /* Hero load stagger - gated the same way */ .js-anim .bb-hero__animate { opacity: 0; transform: translateY(18px); } .js-anim .bb-hero.is-loaded .bb-hero__animate { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: var(--hero-delay, 0ms); } /* Slow, barely-perceptible Ken-Burns on the photo INSIDE the framed inset. The .bb-hero__frame parent has overflow:hidden so the scale stays clipped to the rounded frame; reduced-motion / no-JS rest at scale(1.0). */ .js-anim .bb-hero.is-loaded .bb-hero__img { animation: bb-kenburns 28s linear forwards; } @keyframes bb-kenburns { from { transform: scale(1.0); } to { transform: scale(1.05); } } /* ---- Living ombre: extremely slow blob drift, transform only ---- */ /* will-change lives here (not on the base rule) so the GPU layer hint is given only while the drift is actually running. */ .bb-bg__blob--1, .bb-bg__blob--2, .bb-bg__blob--3 { will-change: transform; } .bb-bg__blob--1 { animation: bb-drift-1 78s ease-in-out infinite alternate; } .bb-bg__blob--2 { animation: bb-drift-2 96s ease-in-out infinite alternate; } .bb-bg__blob--3 { animation: bb-drift-3 112s ease-in-out infinite alternate; } @keyframes bb-drift-1 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 4vw, 0) scale(1.12); } } @keyframes bb-drift-2 { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-5vw, -3vw, 0) scale(1); } } @keyframes bb-drift-3 { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4vw, 5vw, 0) scale(1.18); } } /* ---- Per-word heading reveal: blur + rise only (NEVER opacity, so the ancestor .reveal group-opacity can't mask or double-fade it). Words go inline-block ONLY here, and un-blur when the section's reveal fires. ---- */ .js-anim .reveal .bb-word { display: inline-block; filter: blur(3.5px); transform: translateY(4px); transition: filter 450ms var(--ease-out), transform 450ms var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms); } .js-anim .reveal.is-visible .bb-word { filter: blur(0); transform: none; } /* ---- Gallery tile: a slow, subtle zoom on hover (fine pointers only). ---- */ @media (hover: hover) and (pointer: fine) { .bb-tile__img { transition: transform 1.1s var(--ease-out); } .bb-tile:hover .bb-tile__img { transform: scale(1.045); } } } /* Reduced motion: neutralize any animation/transition that slipped through, and (critically) the no-preference block above never applies, so no element is ever left at opacity:0. Belt-and-suspenders. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .bb-modal, .bb-modal__card { animation: none !important; } .bb-offering:hover, .bb-offering:focus-within { transform: none; } .bb-tile:hover .bb-tile__img { transform: none; } } /* ---- Print: drop the fixed frame + ombre so saved/printed pages are clean ---- */ @media print { body { background: #fff; } .bb-bg, .bb-frame, .bb-nav, .bb-skip { display: none; } }