/** * Event-microsite frame & body-pattern presets. * * Served from the wactivity public dir; linked by the event renderer. * Every visual parameter is a CSS custom property with a sensible default, * so a microsite's theme JSON can override any knob without editing this * file or the renderer. * * Token contract (consumed by selectors below, emitted by event-renderer.ts): * * Palette (from theme.palette) * --brand, --brand-dark, --brand-light * --accent, --accent-light * --surface, --surface-alt * --ink, --ink-muted * --body-bg * * Typography (from theme.typography — font stacks, not URLs) * --font-display, --font-heading, --font-body, --font-accent * * Radius / shadow scales * --radius, --shadow * * Frame geometry (from theme.frameConfig — all optional) * --frame-max-width (default: 920px) * --frame-top-margin (default: 75px) * --frame-padding-block (default: 40px) * --frame-padding-inline (default: 32px) * --frame-inset (default: 20px) double-border inset * --frame-inset-inner (default: 4px) inner of the double * --frame-border-color (default: var(--accent)) * --frame-border-outer-opacity (default: 0.4) * --frame-border-inner-opacity (default: 0.2) * --frame-border-shadow-rgb (default: 74,20,25) stacked shadow tint * * Section defaults (consumed by block CSS inside the frame) * --section-padding-block (default: 4rem) * --section-max-inner-width (default: 850px) * * Block-level CSS (headings, descriptions, buttons) reads the vars above; * none of the block styles live in this file. This file only defines what * "frame X" and "pattern Y" mean. * * Changing a frame preset here updates every microsite using it on the next * page load — cache headers below make the impact predictable. */ /* ---------- Baseline inside the frame ---------- */ .pb-themed { color: var(--ink, #1a1a1a); background: var(--surface, transparent); font-family: var(--font-body, Georgia, serif); line-height: 1.7; -webkit-font-smoothing: antialiased; /* Generous bottom padding so the cream/page bg keeps going AFTER the paper's margin-bottom and BEFORE the shell footer (.wac-footer) starts. Without this the cream ends abruptly and the shell's burgundy footer-bg meets the paper-edge with no transition. */ padding-bottom: clamp(60px, 8vh, 140px); /* Defence-in-depth against iOS-Safari sideways drift: if any descendant (full-bleed band, hero with letter-spacing, a stray 100vw element) tries to push the layout past the frame, clip it here too. The shell already clips at /, but this scopes the same protection to event content rendered without the shell (preview iframes, the member-gate fallback chrome). */ overflow-x: clip; /* Always cover the viewport so the page-as-paper bg meets the bottom of the screen — without this, when the content is short the body's burgundy/dark bg shows through under the paper and breaks the "page on a desk" metaphor. dvh handles iOS Safari URL bar resize. */ min-height: 100vh; min-height: 100dvh; } .pb-themed .pb-page { /* Undo the generic .pb-page defaults — we want the frame to drive size and padding, not the page-builder generic wrapper. */ background: transparent; color: inherit; font-family: inherit; padding: 0; max-width: none; } .pb-themed h2, .pb-themed h3 { font-family: var(--font-heading, Georgia, serif); color: var(--brand-dark, var(--brand, inherit)); line-height: 1.3; } /* H1 inside an event frame is hero-level display (couple names, event title). Uses --hero-font with a sensible fallback chain so a theme without a display font still looks correct. Microsites that prefer H1 = regular heading can set `--hero-font: var(--font-heading)` in theme.frameConfig. */ .pb-themed h1, .pb-themed .pb-heading-display { font-family: var(--hero-font, var(--font-display, var(--font-heading, Georgia, serif))); /* Display-sized by default so H1 actually reads as a hero title — without this, a stand-alone heading block on a CMS page (no cover above) falls back to the browser's `2em`, which looks tiny next to the body type. Themes can dial via `--hero-size` per event. */ font-size: var(--hero-size, clamp(2.4rem, 5.5vw, 3.8rem)); color: var(--brand-dark, var(--brand, inherit)); line-height: 1.15; font-weight: 400; } .pb-themed .pb-heading { font-family: var(--font-heading, Georgia, serif); color: var(--brand-dark, var(--brand, inherit)); } /* H1-tagged .pb-heading gets the display treatment explicitly (the heading block renders `

…

` — the element selector above applies, but we repeat it here for specificity when custom CSS tries to override). */ .pb-themed h1.pb-heading { font-family: var(--hero-font, var(--font-display, var(--font-heading, Georgia, serif))); } /* Business pages (spaces / venues / catalogs CMS) use `pb-themed pb-page` * wrapper. They are NOT event microsites — the operator wants a sober H1, * not a wedding-style hero. Theme can still override via `--hero-size`. */ .pb-themed.pb-page h1, .pb-themed.pb-page h1.pb-heading { font-size: var(--hero-size, clamp(1.75rem, 3vw, 2.5rem)); } /* Anchor styling policy (per Pedro 2026-05-07): anchors inside a themed * page inherit the surrounding text color, never look like a separate * "link blue" or theme color by default. Specificity uses :link/:visited * to defeat the UA stylesheet without bumping !important. * * Hint affordances are reserved for *inline* anchors inside body text * (description / text / html blocks): subtle underline + a brand-tinted * hover. Structural anchors (cards, gallery tiles, nav chrome) get * neither — their container shape already communicates clickability. */ .pb-themed a:link, .pb-themed a:visited { color: inherit; text-decoration: none; } /* Inline anchors in body text: underline as the *only* default cue; * hover/focus tints to the theme accent for a richer affordance. */ .pb-themed .pb-description a, .pb-themed .pb-text a, .pb-themed .pb-html a { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } .pb-themed .pb-description a:hover, .pb-themed .pb-text a:hover, .pb-themed .pb-html a:hover, .pb-themed .pb-description a:focus-visible, .pb-themed .pb-text a:focus-visible, .pb-themed .pb-html a:focus-visible { color: var(--link-hover-color, var(--brand-dark, var(--brand, var(--primary-color, currentColor)))); text-decoration-thickness: 2px; } .pb-themed .pb-description { color: var(--ink, inherit); line-height: 1.9; /* Sensible reading width for un-variant descriptions — keeps the line length comfortable on wide papers instead of stretching edge-to-edge. Each variant below overrides via its own `--description-max-width`; this is the universal default. */ max-width: var(--description-max-width, 720px); margin: var(--description-margin, 1rem auto); text-align: var(--description-align, center); } /* Story variant — marcoysonia long-form narrative look. Every value is a CSS var so individual events can dial it in via `description.settings.style.` (the block emits --description-). */ .pb-themed .pb-description--story { font-family: var(--description-family, var(--font-heading, Georgia, serif)); /* Was 1.35rem — too dominant against the body type at standard reading widths; the story variant should still read as prose, not as a pull-quote. Slight bump over body (1rem) is enough to register the "narrative" intent. Per-event override stays available via `description.settings.style.size`. */ font-size: var(--description-size, 1.1rem); /* Default `normal` — italics on long narrative bodies hurt readability and confused operators (the rich-editor's italic toggle wasn't doing anything because the variant style was forcing it on). Themes that actually want italic can set `--description-italic: italic` per event. */ font-style: var(--description-italic, normal); font-weight: var(--description-weight, 300); line-height: var(--description-line-height, 2.2); text-align: var(--description-align, center); max-width: var(--description-max-width, 700px); /* Top margin = 0 by default. The story variant almost always sits under a section-header (which already contributes 2rem of bottom-margin), so 2rem here stacked against that read as a ~64px void between the heading and the prose. Bottom margin stays generous so the next section breathes. Per-event override still available via `description.settings.style.margin`. */ margin: var(--description-margin, 0 auto 2rem); color: var(--ink, inherit); } .pb-themed .pb-description--story p { margin: 0 0 var(--description-paragraph-gap, 2rem); } .pb-themed .pb-description--story p:last-child { margin-bottom: 0; } /* Tip variant — short centered heads-up with a brand-colored left border. Visual cousin of quote but with semantic intent "call attention, short". All values variable so themes can swap colors/borders without forking. */ .pb-themed .pb-description--tip { font-style: var(--description-italic, normal); font-size: var(--description-size, 0.85rem); line-height: var(--description-line-height, 1.8); color: var(--description-color, var(--ink-muted, var(--ink, inherit))); border-left: var(--description-tip-border, 2px solid var(--brand, currentColor)); padding: var(--description-tip-padding, 0.5rem 0 0.5rem 1rem); margin: var(--description-margin, 1.25rem auto); max-width: var(--description-max-width, 620px); text-align: var(--description-align, center); } .pb-themed .pb-description--tip p { margin: 0 0 0.5rem; } .pb-themed .pb-description--tip p:last-child { margin-bottom: 0; } .pb-themed .pb-description--tip strong { font-style: normal; color: var(--description-tip-label-color, var(--brand, inherit)); text-transform: var(--description-tip-label-transform, none); font-size: var(--description-tip-label-size, 1em); } /* Quote variant — a short highlighted note. Border-left accent in gold, italic body, muted color — typical sidenote usage ("see timetables…"). */ .pb-themed .pb-description--quote { font-style: var(--description-italic, normal); font-size: var(--description-size, 0.9rem); line-height: var(--description-line-height, 1.9); color: var(--description-color, var(--ink-muted, var(--ink, inherit))); border-left: var(--description-quote-border, 2px solid var(--accent, currentColor)); padding: var(--description-quote-padding, 0.5rem 0 0.5rem 1rem); /* auto side-margins center the quote box inside a centered section; the text INSIDE remains left-aligned so the border-left feels natural. */ margin: var(--description-margin, 1rem auto); max-width: var(--description-max-width, 600px); text-align: var(--description-align, left); } .pb-themed .pb-description--quote p { margin: 0 0 0.6rem; } .pb-themed .pb-description--quote p:last-child { margin-bottom: 0; } /* Lead variant — short prose under a section header. Defaults match the legacy "section intro" pattern: body font (Lora), small (~17px), italic, weight 300, muted color, generous line-height — readable but visually subordinate to the heading above. Heavier "callout intros" (the bigger Playfair text in iban / whatsapp blocks) are NOT this variant; they live as block-specific tokens (--iban-intro-*, etc.). */ .pb-themed .pb-description--lead { font-family: var(--description-family, var(--font-body, Georgia, serif)); font-size: var(--description-size, 1.05rem); font-style: var(--description-italic, normal); font-weight: var(--description-weight, 300); line-height: var(--description-line-height, 1.7); text-align: var(--description-align, center); max-width: var(--description-max-width, 650px); margin: var(--description-margin, 1.5rem auto); color: var(--description-color, var(--ink-muted, var(--ink, inherit))); } /* ---------- Frame: none ---------- */ /* No visible frame — content flows at full width of the shell content area. */ .pb-themed-frame-none { width: 100%; } /* ---------- Frame: minimal ---------- */ /* Centered column, no decorative borders. Good for modern / corporate. */ .pb-themed-frame-minimal { max-width: var(--frame-max-width, 920px); margin: var(--frame-top-margin, 0) auto; padding: var(--frame-padding-block, 3rem) var(--frame-padding-inline, 2rem); background: var(--surface, transparent); border-radius: var(--radius, 0); box-shadow: var(--shadow, none); } /* ---------- Frame: paper ---------- */ /* Centered card with double gold-line border + stacked shadow. All geometry driven by CSS vars — the ":paper" preset just picks the defaults that make this look "invitation-like". */ .pb-themed-frame-paper { position: relative; max-width: var(--frame-max-width, 920px); /* Same trick as restaurapro's .rp-menu: ensure the paper always covers at least the viewport so the last block has cream/page bg beneath it, simulating a full sheet of paper. Without this, when the content is short, the body's burgundy/dark bg shows under the paper edge and breaks the metaphor. */ min-height: 100vh; min-height: 100dvh; /* Top margin = reserved nav slot + any extra gap the theme wants. Default gap preserves Phase-1 look when no nav is configured. When a nav does exist (Phase 2), set --frame-top-margin: 0 in the theme and the paper will sit flush below the fixed nav. Bottom margin matches frame-top-margin so the paper "floats" with symmetric breathing room above/below — the page-as-paper metaphor reads as a finished sheet, not a slab cut at the bottom. Override via --frame-bottom-margin in the theme if needed. */ margin: calc(var(--shell-nav-height, 0px) + var(--frame-top-margin, 0px)) auto var(--frame-bottom-margin, var(--frame-top-margin, 75px)); /* Paper padding: top is the configured frame-padding-block; bottom is intentionally generous so the last block has substantial breathing room before the paper edge — same "tail of the page" feel that restaurapro's .rp-menu has via its 100vh min-height + small bottom padding. Reads as "page closing gracefully", not "content cut off". */ padding: var(--frame-padding-block, 40px) var(--frame-padding-inline, 32px) clamp(120px, 18vh, 280px); background-color: var(--surface, #F8F4ED); /* Three concentric rings around the paper — each independently tintable so a theme can go subtle (marcoysonia default) or bold. `--frame-border-*` tokens drive the ::before/::after inset borders (see below); these ring tokens drive the stacked box-shadow, which is a separate visual system. */ box-shadow: 0 0 0 1px var(--frame-shadow-outer-ring-color, rgba(196,162,101,0.3)), 0 0 0 6px rgba(var(--frame-border-shadow-rgb, 74,20,25), var(--frame-shadow-mid-ring-alpha, 0.15)), 0 0 0 7px var(--frame-shadow-inner-ring-color, rgba(196,162,101,0.2)), var(--shadow, 0 25px 80px rgba(0,0,0,0.5)); } /* Double inner border (the "gold frame"). Purely decorative. */ .pb-themed-frame-paper::before { content: ''; position: absolute; inset: var(--frame-inset, 20px); border: 1px solid var(--frame-border-color, var(--accent, currentColor)); opacity: var(--frame-border-outer-opacity, 0.4); pointer-events: none; } .pb-themed-frame-paper::after { content: ''; position: absolute; inset: calc(var(--frame-inset, 20px) + var(--frame-inset-inner, 4px)); border: 1px solid var(--frame-border-color, var(--accent, currentColor)); opacity: var(--frame-border-inner-opacity, 0.2); pointer-events: none; } /* Mobile: when the viewport is at or below the paper's max-width, the "floating sheet" metaphor breaks down — the paper already spans 100% of the screen, so the vertical breathing room above/below stops reading as elegant separation and just looks like an awkward gap between the cream paper and the burgundy bands. Collapse the outer margins so the paper meets the surrounding bands flush. The gold inset frame (::before/::after) and the ring-shadow stay — that's the actual decoration of the card, not the spacing around it. */ @media (max-width: 920px) { .pb-themed-frame-paper { margin-top: 0; margin-bottom: 0; } /* Same logic as the side-margin: at full-bleed widths the cream "tail" between the paper edge and the next surrounding band stops reading as elegant negative space — it just looks like a gap. Override the desktop default (clamp 60-140px) to 0. Themes can reintroduce via --themed-mobile-padding-bottom if needed. */ .pb-themed { padding-bottom: var(--themed-mobile-padding-bottom, 0); } } /* ---------- Frame: edge-to-edge ---------- */ /* Full-viewport width, no side padding. For immersive photo-first sites. */ .pb-themed-frame-edge-to-edge { width: 100%; max-width: none; margin: 0; padding: 0; background: var(--surface, transparent); } /* ---------- Body patterns ---------- */ /* Applied to .pb-themed; stacks on top of --surface. */ .pb-themed-pattern-none { /* no-op */ } .pb-themed-pattern-subtle-noise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 8%, transparent 92%, rgba(0,0,0,0.02) 100%); } .pb-themed-pattern-paper-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.08'/%3E%3C/svg%3E"); } /* `pb-themed-hero` removed 2026-04-30 — subsumed by `.pb-cover-with-text` at the bottom of this file. The `--pb-themed-hero-offset` variable is no longer used by anything but kept here as a token in case other blocks want to reference how-much-room-the-frame-takes. */ .pb-themed { --pb-themed-hero-offset: calc(var(--shell-nav-height, 0px) + var(--frame-top-margin, 75px) + 2 * var(--frame-padding-block, 40px)); } /* ---------- Heading variants (sub-section titles) ---------- Styled here so the heading block stays generic. Vars let themes tweak sizes/colors per-microsite. */ .pb-themed .pb-heading--minor-title { font-family: var(--heading-family, var(--font-heading, Georgia, serif)); font-size: var(--heading-size, 1.6rem); font-weight: var(--heading-weight, 400); color: var(--heading-color, var(--brand-dark, var(--brand, inherit))); text-align: var(--heading-align, center); margin: var(--heading-margin, 3rem 0 0); line-height: var(--heading-line-height, 1.3); } .pb-themed .pb-heading--minor-subtitle { font-family: var(--heading-family, var(--font-heading, Georgia, serif)); font-size: var(--heading-size, 1.1rem); /* Italic only when explicitly opted-in via the rich editor — variants no longer force a font-style. Per-event override still possible with `--heading-italic: italic`. */ font-style: var(--heading-italic, normal); font-weight: var(--heading-weight, 400); color: var(--heading-color, var(--brand, inherit)); text-align: var(--heading-align, center); letter-spacing: var(--heading-tracking, 0.05em); margin: var(--heading-margin, 2rem 0 0.8rem); line-height: var(--heading-line-height, 1.4); } /* ---------- Icon list (directions-style rows) ---------- A