…
that is a DIRECT child of a vertically-centered flex/grid row must not carry the base 1em bottom margin: flexbox centers the MARGIN box, so the stray bottom margin shifts the visible text up by half the margin and breaks icon↔label centering (e.g. the trainer "Credentials" rows — check sits centered, label floats high). Zero the block margin only in that centered-row context; normal paragraph rhythm elsewhere is untouched. v2.26. */ .fenix-page-body .flex.items-center > p, .fenix-page-body .grid.items-center > p, #canvas .flex.items-center > p, #canvas .grid.items-center > p { margin-block: 0; } /* Heading rhythm — Tailwind preflight zeros all heading margins. Reinstate so numbered policy headings (3. Purposes…), feature-block headings, FAQ titles etc. get proper top spacing above and below them. Use top margin so the heading "owns" the gap before it (collapses with previous block's bottom). */ /* :not(...) guards let explicit Tailwind margin utilities win without !important. Word-boundary aware so `mb-6` doesn't accidentally defeat the top-margin rule (and vice versa). v1.91. */ .fenix-page .fenix-page-body h1:not([class*=" mt-"]):not([class^="mt-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]) { margin-top: 1.5em; } /* 2026-05-21 (v2.14) — Hero sections control their own spacing precisely via template padding. The 1.5em default rhythm above (intended for content-style H1s — policy pages, FAQ blocks, etc.) was silently being applied to every hero template's H1, leaving a ~80px gap between the badge/eyebrow and the headline that the template author didn't ask for. Reset to 0 for any H1 that descends from a section whose class starts with `hero-`. Content-style H1s outside hero sections still get the full rhythm. IMPORTANT: the rule above uses six :not() pseudo-classes, each adding to specificity (~0,0,2,1 with six :not bumps). A bare `.fenix-page-body [class^="hero-"] h1` would lose the cascade. Use !important here — this IS the explicit override, and the rule it's overriding is itself a deliberate default. v2.14. */ .fenix-page .fenix-page-body [class^="hero-"] h1, .fenix-page .fenix-page-body [class*=" hero-"] h1 { margin-top: 0 !important; } /* 2026-05-21 (v2.18) — Structural hero-pattern catch. Any h1 immediately preceded by a sibling div is a hero composition (badge/pill div → headline), not a content rhythm break. The 1.5em default above is meant for content h1s that follow body text (which always ends in
, not
). A codebase
audit showed 11 div+h1 pairs (all hero badges) vs 1 p+h1 pair (genuine
rhythm case). This rule catches every hero where the author forgot to
prefix the with `hero-` (e.g. "Gradient Welcome" template).
!important required for the same reason as the [class^="hero-"] override
above — the 1.5em rule's six :not() chain has higher specificity (0,8,1)
than this sibling combinator (0,2,2). */
/* Kicker pill (div.mb-*) → headline (h1/h2/h3) — FAQ, hero, section headers.
Without this, fenix-page.css heading rhythm (1.4em on h2) stacks on the pill's
mb-* on live render while the builder canvas skips rhythm (no .fenix-page ancestor). */
.fenix-page .fenix-page-body div + h1,
.fenix-page .fenix-page-body div + h2,
.fenix-page .fenix-page-body div + h3 { margin-top: 0 !important; }
/* Builder canvas parity — same pill → headline pattern inside .builder-section.
2026-09-14: was `#canvas .builder-section div + h2` — the ID out-ranked the live rule (0,2,2),
so a brand kit's `.fenix-page-host .fenix-page-body .va-article h2 { margin-top:14px !important }`
won on /page/{slug} but lost on the canvas. `.fenix-page-body .builder-section` = same (0,2,2). */
.builder-section div + h1,
.builder-section div + h2,
.builder-section div + h3,
.fenix-page-body .builder-section div + h1,
.fenix-page-body .builder-section div + h2,
.fenix-page-body .builder-section div + h3 { margin-top: 0 !important; }
.fenix-page .fenix-page-body h2:not([class*=" mt-"]):not([class^="mt-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]) { margin-top: 1.4em; }
.fenix-page .fenix-page-body h3:not([class*=" mt-"]):not([class^="mt-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]) { margin-top: 1.2em; }
.fenix-page .fenix-page-body h4:not([class*=" mt-"]):not([class^="mt-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]),
.fenix-page .fenix-page-body h5:not([class*=" mt-"]):not([class^="mt-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]),
.fenix-page .fenix-page-body h6:not([class*=" mt-"]):not([class^="mt-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]) { margin-top: 1em; }
.fenix-page .fenix-page-body h1:not([class*=" mb-"]):not([class^="mb-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]) { margin-bottom: 0.6em; }
.fenix-page .fenix-page-body h2:not([class*=" mb-"]):not([class^="mb-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]) { margin-bottom: 0.6em; }
.fenix-page .fenix-page-body h3:not([class*=" mb-"]):not([class^="mb-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]) { margin-bottom: 0.5em; }
.fenix-page .fenix-page-body h4:not([class*=" mb-"]):not([class^="mb-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]),
.fenix-page .fenix-page-body h5:not([class*=" mb-"]):not([class^="mb-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]),
.fenix-page .fenix-page-body h6:not([class*=" mb-"]):not([class^="mb-"]):not([class*=" my-"]):not([class^="my-"]):not([class*=" m-"]):not([class^="m-"]) { margin-bottom: 0.4em; }
/* First heading in a section shouldn't push down extra — the section's own padding handles that. */
.fenix-page .fenix-page-body section > h1:first-child,
.fenix-page .fenix-page-body section > h2:first-child,
.fenix-page .fenix-page-body section > h3:first-child,
.fenix-page .fenix-page-body section > div > h1:first-child,
.fenix-page .fenix-page-body section > div > h2:first-child,
.fenix-page .fenix-page-body section > div > h3:first-child { margin-top: 0; }
/* Hero pattern — heading directly after a label/pill span/small as the
section's first child should NOT pick up the 1.5em rhythm. */
.fenix-page .fenix-page-body section > span:first-child + h1,
.fenix-page .fenix-page-body section > span:first-child + h2,
.fenix-page .fenix-page-body section > span:first-child + h3,
.fenix-page .fenix-page-body section > div > span:first-child + h1,
.fenix-page .fenix-page-body section > div > span:first-child + h2,
.fenix-page .fenix-page-body section > div > span:first-child + h3,
.fenix-page .fenix-page-body section > small:first-child + h1,
.fenix-page .fenix-page-body section > small:first-child + h2,
.fenix-page .fenix-page-body section > div > small:first-child + h1,
.fenix-page .fenix-page-body section > div > small:first-child + h2 { margin-top: 0; }
/* List rendering — defeats GVTheme/output.css's Tailwind preflight `ol,ul{list-style:none}`.
Without these, mockup pages with
- /
- ` layout because list-item beats flex.
Selector note: live pages wrap content in
. There's NO `.fenix-page` ancestor — only `-host` and `-body`. Earlier rules in this file using `.fenix-page .fenix-page-body` work because `.fenix-page` is also a literal substring of the body class name, but to override the same-specificity `.builder-section` rule from dist/theme.css:5374 we need to be explicit about list-none here. Ordering: this block is AFTER the disc-forcing block above, so equal- specificity + later-in-cascade lets it win. Both branches use !important. */ /* First-heading inside a padded card: cancel the heading-rhythm margin-top. GVTheme's .builder-section h1/h2/h3 { margin-top: 1.4em } adds vertical breathing between sequential blocks but visibly stacks on top of the card's `p-8` (2rem) padding when the heading is the FIRST child — producing ~5rem of dead space at the top, vs the 2rem at the bottom. Reset margin-top to 0 for first-of-type headings. The next sibling spacing is preserved by the heading's own mb-* class. */ .fenix-page-body .builder-section [class*="rounded-"] > h1:first-child, .fenix-page-body .builder-section [class*="rounded-"] > h2:first-child, .fenix-page-body .builder-section [class*="rounded-"] > h3:first-child, .builder-section [class*="rounded-"] > h1:first-child, .builder-section [class*="rounded-"] > h2:first-child, .builder-section [class*="rounded-"] > h3:first-child, .fenix-page-body [class*="p-8"] > h1:first-child, .fenix-page-body [class*="p-8"] > h2:first-child, .fenix-page-body [class*="p-8"] > h3:first-child { margin-top: 0 !important; } /* Note 2026-05-09: drop the .fenix-page-body ancestor so the rules also apply inside the Page Builder iframe canvas (page-builder.html) which doesn't wrap content in .fenix-page-body. Plain `ul.list-none` selector is enough — same specificity as `.builder-section ul li` from theme.css but appears later in cascade so wins. */ ul.list-none, .fenix-page-body ul.list-none, .builder-section ul.list-none { list-style: none !important; list-style-type: none !important; padding-left: 0 !important; } ul.list-none > li, .fenix-page-body ul.list-none > li, .builder-section ul.list-none > li { list-style-type: none !important; /* Don't force display:list-item — let the markup's own class (flex / grid / block) win. Re-assert flex / grid / block on the next selectors below so they out- specificity any default `display:list-item` rule. */ display: revert !important; } ul.list-none > li.flex, .fenix-page-body ul.list-none > li.flex, .builder-section ul.list-none > li.flex { display: flex !important; } ul.list-none > li.grid, .fenix-page-body ul.list-none > li.grid, .builder-section ul.list-none > li.grid { display: grid !important; } ul.list-none > li.block, .fenix-page-body ul.list-none > li.block, .builder-section ul.list-none > li.block { display: block !important; } /* 2026-05-16 — Icon-row list items must NOT show a bullet. The disc-forcing block above (`.fenix-page-body ul li { list-style:disc; display:list-item }`) is correct for plain prose lists, but the checklist templates (checklist-gvt-*, checklist-indigo-*, Vplus hero feature lists, features-checklist) use ` - ` / `
- ` as a
LAYOUT ROW — an editable check-icon span + text — inside a `
- ` whose
class is `space-y-3` / `grid …`, NOT `list-none`. So the escape hatch above
never fired and every row showed a default `•` next to the check-icon, and
`display:list-item` fought the flex layout.
Fix: a list item whose OWN class makes it flex/grid is, by definition, not a
bulleted item — kill the marker and honour its layout display, regardless of
the parent
- ` (no layout class) is untouched,
so genuine bulleted lists still get their disc. */
/* Specificity note: the disc-forcing rule above is `.fenix-page
.fenix-page-body ul li` = (0,3,1). To beat it we must match or exceed that.
`.fenix-page .fenix-page-body ul li.flex` = (0,3,2) — wins cleanly. The
builder iframe has no `.fenix-page` ancestor, so `.builder-section ul li.flex`
(0,2,1) is enough there (the theme.css rule it competes with is also lower). */
.fenix-page .fenix-page-body ul li.flex,
.fenix-page .fenix-page-body ul li.inline-flex,
.fenix-page .fenix-page-body ol li.flex,
.fenix-page .fenix-page-body ol li.inline-flex,
.fenix-page-body ul li.flex,
.fenix-page-body ul li.inline-flex,
.fenix-page-body ol li.flex,
.fenix-page-body ol li.inline-flex,
.builder-section ul li.flex,
.builder-section ul li.inline-flex,
.builder-section ol li.flex,
.builder-section ol li.inline-flex,
ul li.flex,
ul li.inline-flex,
ol li.flex,
ol li.inline-flex {
list-style: none !important;
list-style-type: none !important;
display: flex !important;
}
.fenix-page .fenix-page-body ul li.grid,
.fenix-page .fenix-page-body ol li.grid,
.fenix-page-body ul li.grid,
.fenix-page-body ol li.grid,
.builder-section ul li.grid,
.builder-section ol li.grid,
ul li.grid,
ol li.grid {
list-style: none !important;
list-style-type: none !important;
display: grid !important;
}
/* A
- /
- (.flex / .grid). The Page
Wizard generator instead emits icon-row lists with INLINE styles and NO class:
- …icon + text… The disc-forcing rule `.fenix-page-body ul li { list-style:disc; display:list-item !important }` therefore beats the
- 's inline `display:flex`,
so every essentials row showed a • bullet and the icon/label stack broke out of
its flex row. CSS can't read the inline `display` value, but it CAN match the
wizard's signature via attribute selectors: a list-none
- + a flex/grid
- . Kill the marker and honour the inline display for exactly that shape. Plain prose
- (no inline display) is untouched, so genuine bulleted lists still get discs. */ .fenix-page-body ul[style*="list-style:none"], .fenix-page-body ul[style*="list-style: none"], .builder-section ul[style*="list-style:none"], .builder-section ul[style*="list-style: none"], ul[style*="list-style:none"], ul[style*="list-style: none"] { list-style: none !important; padding-left: 0 !important; } .fenix-page-body ul[style*="list-style:none"] > li[style*="display:flex"], .fenix-page-body ul[style*="list-style: none"] > li[style*="display:flex"], .builder-section ul[style*="list-style:none"] > li[style*="display:flex"], .builder-section ul[style*="list-style: none"] > li[style*="display:flex"], ul[style*="list-style:none"] > li[style*="display:flex"], ul[style*="list-style: none"] > li[style*="display:flex"] { list-style: none !important; list-style-type: none !important; display: flex !important; } .fenix-page-body ul[style*="list-style:none"] > li[style*="display:grid"], .fenix-page-body ul[style*="list-style: none"] > li[style*="display:grid"], .builder-section ul[style*="list-style:none"] > li[style*="display:grid"], .builder-section ul[style*="list-style: none"] > li[style*="display:grid"], ul[style*="list-style:none"] > li[style*="display:grid"], ul[style*="list-style: none"] > li[style*="display:grid"] { list-style: none !important; list-style-type: none !important; display: grid !important; } /* 2026-06-03 — HERO meta-pill legibility (white-on-white fix). Hero / scrim sections override --fenix-color-text to #ffffff so the headline reads on the dark photo. But the Page Wizard styles the hero meta badges with an inline `background:#ffffff` + `color:var(--fenix-color-text)` → white text on a white pill = invisible (the "white blobs" in the hero). The generator backstop (FenixWorkshop234Conformance step 9) prevents this on NEW pages, but ALREADY- PUBLISHED snapshots keep the bad inline fill, so heal them at render time too: inside .fenix-hero-scrim, any inline-white pill gets a translucent dark surface + explicit white text so it reads on the photo. Scoped to .fenix-hero-scrim only, so white CONTENT cards in light sections are untouched. !important beats the inline background:#ffffff. */ .fenix-hero-scrim span[style*="background:#ffffff"], .fenix-hero-scrim span[style*="background:#fff;"], .fenix-hero-scrim span[style*="background: #ffffff"] { background: rgba(0, 0, 0, 0.28) !important; border-color: rgba(255, 255, 255, 0.45) !important; color: #ffffff !important; } /* 2026-05-16 — Neutralise Tailwind's `@container` on INLINE elements. Many atomic templates (cta-button-pill, cta-button-outline, cta-spots-left, cta-mini-card, badges) carry `class="@container inline-flex …"`. Tailwind's `@container` utility sets `container-type: inline-size`, which on an inline-flex / inline-block element collapses it to min-content width — the button text wraps one word per line and the pill crushes to ~48px. `@container` only makes sense on a block-level layout wrapper, and only when container-query (`@sm:` / `@md:`) CSS is compiled — which the public render does NOT do. So: wherever `@container` lands on an inline-display element, force `container-type: normal`. Block-level `@container` wrappers are left alone (harmless). Targets the literal class — Tailwind escapes `@` so the class attribute value is literally `@container`. */ [class~="@container"].inline-flex, [class~="@container"].inline-block, [class~="@container"].inline, .fenix-page-body [class~="@container"].inline-flex, .fenix-page-body [class~="@container"].inline-block, .builder-section [class~="@container"].inline-flex, .builder-section [class~="@container"].inline-block { container-type: normal !important; } /* 2026-05-16 — Equalise pill-badge heights in hero/title template rows. Workshop templates (e.g. Elegant Hero) render a `flex flex-wrap` row of `inline-flex` pill badges. The row has no `items-*` class, so it defaults to `align-items: stretch` — every badge is stretched to the row's tallest child. One badge ends up genuinely tall (its Lucide SVG is authored with `width="24" height="24"` ATTRIBUTES; when the `w-3 h-3` utility loses the cascade on the public render the SVG falls back to 24px), the row grows to match, and stretch then inflates the SHORT badges too — text floats in a tall pill. The builder render keeps `w-3 h-3` winning, so it looks fine there. Two-part fix: 1. Pin Lucide SVGs inside badges to a real 1em box so they never report their 24px attribute size — this stops any badge being genuinely tall. 2. Stop the badge row stretching its children, so a tall sibling can't inflate the rest. Each badge then sizes purely to its own content. */ .fenix-page-body .flex > .inline-flex, .fenix-page-body .inline-flex > .inline-flex, .builder-section .flex > .inline-flex, .builder-section .inline-flex > .inline-flex { white-space: nowrap; align-self: center; } .fenix-page-body .inline-flex > svg[data-lucide], .fenix-page-body :not(li).flex > svg[data-lucide], .fenix-page-body .flex > .inline-flex > svg[data-lucide], .builder-section .inline-flex > svg[data-lucide], .builder-section :not(li).flex > svg[data-lucide], .builder-section .flex > .inline-flex > svg[data-lucide] { flex: 0 0 auto; width: 1em; height: 1em; vertical-align: middle; } /* Trainer / checklist icon rows (
- + Lucide checkmark).
The 1em pin above is for badge/chip Lucide icons only — on checklist rows it
shrank w-5 icons and threw off vertical alignment with the label text. */
.fenix-page-body ul li.flex,
.fenix-page-body ol li.flex,
.builder-section ul li.flex,
.builder-section ol li.flex,
#canvas ul li.flex,
#canvas ol li.flex {
line-height: 1.5;
}
.fenix-page-body li.flex > svg[data-lucide],
.fenix-page-body li.flex > i[data-lucide],
.builder-section li.flex > svg[data-lucide],
.builder-section li.flex > i[data-lucide],
#canvas li.flex > svg[data-lucide],
#canvas li.flex > i[data-lucide] {
flex-shrink: 0;
align-self: flex-start;
margin-top: 0.125rem;
}
.fenix-page-body ul li.flex > span[data-field],
.fenix-page-body ul li.flex > span[data-editable],
.builder-section ul li.flex > span[data-field],
.builder-section ul li.flex > span[data-editable],
#canvas ul li.flex > span[data-field],
#canvas ul li.flex > span[data-editable] {
flex: 1 1 0%;
min-width: 0;
line-height: 1.5;
}
/* Default
behaviour: shrink-to-fit with intrinsic aspect ratio. The :not(...) escape lets ported pages override via class="h-full", class="h-[500px]", class="h-screen", or `style="height:..."`, which would otherwise lose the cascade fight to this rule's higher specificity (.fenix-page .fenix-page-body img is 0,2,1 vs .fenix-page .h-full at 0,2,0). Without the escape, photos in `
` cards (e.g. trainer photos in pov-miniseries) shrink to intrinsic size instead of filling their fixed-height container. */ .fenix-page .fenix-page-body img:not(.h-full):not([class*="h-["]):not([class*="h-screen"]):not([style*="height"]) { max-width: 100%; height: auto; } /* ─── Container alignment ────────────────────────────────────────────── Lock page-body content to the SAME container shape as header + breadcrumb (max-width: 1152px / max-w-6xl, centered, 32px side padding / px-8). The TranslucentHero header inner is 1152px + 32px padding (see _FenixHeader.TranslucentHero.cshtml). The breadcrumb partial is also max-w-6xl px-8 (see _FenixBreadcrumb.StripBelow.cshtml). Body MUST match or the page renders with three different left edges (logo / breadcrumb at one column, content slightly further left at narrow viewports). 2026-05-06 fix — pre-v1.69 we drifted to 1280px / 1.5rem here, which broke the alignment promise documented in the header partial. Restored to 1152px / 2rem so logo, breadcrumb, and body content share one rail. */ .fenix-page .fenix-page-body .fenix-section-inner { max-width: 1152px !important; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; box-sizing: border-box; } /* ─── Gear background preset: dark pattern (2026-06-06) ─────────────────────── BACKGROUND_STYLES['dark-pattern'] emits pb-bg-dark-pattern on fenix-section / builder-section. Was builder-only inline CSS in page-builder.html — live pages never loaded it. Scoped to section gear wrappers only. */ .fenix-page .fenix-section.pb-bg-dark-pattern, .fenix-page .builder-section.pb-bg-dark-pattern { position: relative; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); } .fenix-page .fenix-section.pb-bg-dark-pattern::before, .fenix-page .builder-section.pb-bg-dark-pattern::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); pointer-events: none; } /* ─── Ported-page section gutter (2026-05-06) ──────────────────────────── Mockups ported through fenix-page-port often render as:
` renders at the intrinsic image size and floats inside its container instead of filling. Tailwind's `w-full / h-full` are NOT in fenix-page.css's vocabulary by default, so ported pages with photo cards (e.g. the Meet Our Trainers section in pov-miniseries) shrink to thumbnail size. */ .fenix-page .w-full { width: 100%; } .fenix-page .h-full { height: 100%; } .fenix-page .w-40, .fenix-page-body .w-40 { width: 10rem; } .fenix-page .h-40, .fenix-page-body .h-40 { height: 10rem; } @media (min-width: 768px) { .fenix-page .md\:w-48, .fenix-page-body .md\:w-48 { width: 12rem; } .fenix-page .md\:h-48, .fenix-page-body .md\:h-48 { height: 12rem; } } /* Shadows — soft + lifted card variants. */ .fenix-page .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); } .fenix-page .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -2px rgba(0,0,0,0.10); } .fenix-page .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10); } .fenix-page .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.10); } .fenix-page .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } /* Card photo rotations — used by ported "polaroid" / tilted photo cards. Negative + positive 1°-6° degree variants. */ .fenix-page .-rotate-\[3deg\] { transform: rotate(-3deg); } .fenix-page .rotate-\[3deg\] { transform: rotate(3deg); } .fenix-page .-rotate-3 { transform: rotate(-3deg); } .fenix-page .rotate-3 { transform: rotate(3deg); } .fenix-page .-rotate-6 { transform: rotate(-6deg); } .fenix-page .rotate-6 { transform: rotate(6deg); } /* ─── Decorative blob support ──────────────────────────────────────── Many ported mockups use `
` as soft pink/amber decoration in the page corners. These classes (arbitrary sizes + filter + mix-blend + blur-3xl) are NOT in fenix-page.css's vocabulary and Tailwind purge skips them because the plugin output.css is built without the saved page contentJson in scope. Provide them as static utilities so any Fenix page can use the pattern without re-compiling Tailwind. */ .fenix-page .fixed { position: fixed; } .fenix-page .pointer-events-none { pointer-events: none; } .fenix-page .rounded-full { border-radius: 9999px; } /* Omit a bare `.filter` override — Tailwind's `.filter` enables the var(--tw-blur) stack for sibling utilities like `blur-3xl`. A `.fenix-page .filter { filter:none }` rule was winning over output.css in the code-editor preview and killing blob blur. */ .fenix-page .blur-3xl, .fenix-page-body .blur-3xl { filter: blur(64px); } .fenix-page .bg-pink-200, .fenix-page-body .bg-pink-200 { background-color: #fbcfe8; } .fenix-page .bg-rose-200, .fenix-page-body .bg-rose-200 { background-color: #fecdd3; } @keyframes fenix-blob { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(20px, -50px) scale(1.1); } 50% { transform: translate(-20px, 20px) scale(0.9); } 75% { transform: translate(50px, 50px) scale(1.05); } } .fenix-page .animate-blob, .fenix-page-body .animate-blob { animation: fenix-blob 7s infinite; } .fenix-page .animation-delay-2000, .fenix-page-body .animation-delay-2000 { animation-delay: 2s; } .fenix-page .animation-delay-4000, .fenix-page-body .animation-delay-4000 { animation-delay: 4s; } .fenix-page .mix-blend-multiply { mix-blend-mode: multiply; } .fenix-page .opacity-50 { opacity: 0.5; } .fenix-page .opacity-30 { opacity: 0.3; } .fenix-page .opacity-20 { opacity: 0.2; } /* Arbitrary width/height literals for decorative blobs. Common sizes used across ported mockups (100day-program, r2o, etc.). */ .fenix-page .w-\[800px\] { width: 800px; } .fenix-page .h-\[800px\] { height: 800px; } .fenix-page .w-\[600px\] { width: 600px; } .fenix-page .h-\[600px\] { height: 600px; } .fenix-page .w-\[500px\] { width: 500px; } .fenix-page .h-\[500px\] { height: 500px; } /* Static positioning helpers used by decorative blobs */ .fenix-page .top-1\/2 { top: 50%; } .fenix-page .right-1\/4 { right: 25%; } .fenix-page .-left-40 { left: -10rem; } /* Static blob helper — replaces GVTheme's :hover-only `t-bg-light-hover`. Applies a soft Tailwind pink-100 wash so legacy in-template blob divs still render something. The MAIN decoration system is now `.fenix-page-deco` below (page-level, brand-aware, configurable). Don't add `bg-pink-100` / `bg-rose-100` overrides here — those are in-template utility classes used by badges, icon tiles, etc., and globally re-colouring them broke pill backgrounds. */ .fenix-page .t-bg-light-static { background-color: #fce7f3; } /* ─── Theme-token utility classes (2026-05-29) ────────────────────────────────── Brand-tied colour classes used by EXTRACTED / authored section templates so a page's theme profile recolours every section as a unit. Previously these were defined ONLY in wizard/dist/theme.css, which loads in the builder iframe + admin preview but NOT on the public page — so on a published page a `t-text` span had NO rule and rendered colourless. Defining them here (fenix-page.css always loads on public pages) closes that gap. They read the legacy --color-primary* family, which FenixThemeStyle/Default.cshtml now re-emits from the ACTIVE theme profile (the bridge added the same day). The fallback hexes below are the Rose preset (GVT default) values and only fire if a page somehow renders without the theme-vars block — so the fallback matches the real brand pink (#c9437f) rather than a different shade. Scope: brand-tied tokens ONLY — do NOT add bg-pink-*/bg-rose-* here (per the note above, globally recolouring those broke pill backgrounds). */ .fenix-page .t-text { color: var(--color-primary, #c9437f); } .fenix-page .t-text-hover:hover { color: var(--color-primary-hover, #a82e6c); } .fenix-page .t-text-muted { color: var(--color-primary-dark, #7a2752); } .fenix-page .t-bg { background-color: var(--color-primary, #c9437f); } .fenix-page .t-bg-light { background-color: var(--color-primary-light, #f4d6e3); } .fenix-page .t-bg-light-hover:hover { background-color: var(--color-primary-light, #f4d6e3); } .fenix-page .t-border { border-color: var(--color-primary, #c9437f); } .fenix-page .t-border-light { border-color: var(--color-primary-light-hover, #f4d6e3); } /* ─── Workshop wizard chips + CTAs (v2.29) ───────────────────────────────────── Hallmark/Claude generations use .chip-pill / .btn-primary / .btn-ghost / .fenix-whatsapp-cta but those classes were not in this bundle — chips rendered as raw icon+text on the hero scrim. */ .fenix-page .fenix-page-body .chip-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 9999px; background: var(--fenix-color-surface, rgba(255, 255, 255, 0.14)); border: 1px solid var(--fenix-color-border, rgba(255, 255, 255, 0.28)); color: var(--fenix-color-text-muted, #64748b); font-size: 13px; line-height: 1.3; white-space: nowrap; } .fenix-page .fenix-page-body .chip-pill span[data-editable] { color: inherit; } /* Workshop Standard hero — dark text on light wash (not fenix-hero-scrim white-on-photo). */ .fenix-page .fenix-page-body .fenix-hero-light .chip-pill { background: var(--fenix-color-surface, #ffffff); border-color: var(--fenix-color-border, #e2e8f0); color: var(--fenix-color-text-muted, #475569); } .fenix-page .fenix-page-body .fenix-hero-light button.btn-ghost, .fenix-page .fenix-page-body .fenix-hero-light [data-share-button].btn-ghost { background: #ffffff; border: 1px solid var(--fenix-color-border, #e2e8f0); color: var(--fenix-color-text-muted, #475569); } /* ─── Theme-bound CTA vocabulary (Fix Editability Tier B — 2026-06-06) ───────── Register → fenix-cta-primary (filled). Share → fenix-cta-secondary (surface fill + outline). Colour + radius come from the page's FenixThemeProfile via fenix-theme-vars (--fenix-color-primary, --fenix-radius-btn). Do NOT hardcode pill shape here — profile 1 Rose uses radiusButton 8px; Sage uses 999px. */ .fenix-page .fenix-page-body a.fenix-cta-primary, .fenix-page .fenix-page-body button.fenix-cta-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; min-height: 48px; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; color: #ffffff !important; background-color: var(--fenix-color-primary, var(--color-primary, #c9437f)) !important; border: none; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35); border-radius: var(--fenix-radius-btn, var(--radius-btn, 0.75rem)) !important; } .fenix-page .fenix-page-body a.fenix-cta-secondary, .fenix-page .fenix-page-body button.fenix-cta-secondary, .fenix-page .fenix-page-body button.fenix-cta-share.fenix-cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; min-height: 48px; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; color: var(--fenix-color-primary, var(--color-primary, #c9437f)) !important; background-color: var(--fenix-color-surface, var(--color-surface, #ffffff)) !important; border: 2px solid var(--fenix-color-primary, var(--color-primary, #c9437f)) !important; box-shadow: none; border-radius: var(--fenix-radius-btn, var(--radius-btn, 0.75rem)) !important; } .fenix-page .fenix-page-body a.fenix-cta-secondary:hover, .fenix-page .fenix-page-body button.fenix-cta-secondary:hover { background-color: var(--fenix-color-primary-light, var(--color-primary-light, #f4d6e3)) !important; } /* Page-builder canvas — sections render inside .builder-section, not .fenix-page-body. */ .builder-section a.fenix-cta-primary, .builder-section button.fenix-cta-primary, .builder-section a.fenix-cta-secondary, .builder-section button.fenix-cta-secondary, .builder-section button.fenix-cta-share.fenix-cta-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; min-height: 48px; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; border-radius: var(--fenix-radius-btn, var(--radius-btn, 0.75rem)) !important; } .builder-section a.fenix-cta-primary, .builder-section button.fenix-cta-primary { color: #ffffff !important; background-color: var(--fenix-color-primary, var(--color-primary, #c9437f)) !important; border: none; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35); } .builder-section a.fenix-cta-secondary, .builder-section button.fenix-cta-secondary, .builder-section button.fenix-cta-share.fenix-cta-secondary { color: var(--fenix-color-primary, var(--color-primary, #c9437f)) !important; background-color: var(--fenix-color-surface, var(--color-surface, #ffffff)) !important; border: 2px solid var(--fenix-color-primary, var(--color-primary, #c9437f)) !important; box-shadow: none; } /* Workshop Standard CTAs — OPT-IN via .btn-primary / [data-field="ctaRegister"] ONLY. Do NOT style by href*="/workshops/register/" — that fought template utility classes (rounded-full, px-8 py-4) and made register/WhatsApp siblings diverge in builder and on the live page. Artistic templates own CTA chrome in HTML; page-234 style templates add .btn-primary explicitly. */ .fenix-page .fenix-page-body a.btn-primary, .fenix-page .fenix-page-body a.t-bg.btn-primary, .fenix-page .fenix-page-body a[data-field="ctaRegister"] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; min-height: 48px; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; color: #ffffff !important; background-color: var(--fenix-color-primary, var(--color-primary, #c9437f)) !important; border: none; box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.35); border-radius: var(--fenix-radius-btn, var(--radius-btn, 0.75rem)) !important; } /* Share with fenix-cta-primary wins over legacy btn-dark (repair strips btn-dark). */ .fenix-page .fenix-page-body [data-share-button].btn-dark:not(.fenix-cta-primary) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; min-height: 48px; border-radius: var(--fenix-radius-btn, var(--radius-btn, 0.75rem)) !important; font-size: 16px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; color: #ffffff !important; background-color: var(--color-dark, #1e293b) !important; border: none; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2); } .fenix-page .fenix-page-body button.btn-ghost, .fenix-page .fenix-page-body [data-share-button].btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; min-height: 48px; border-radius: 12px; font-size: 15px; font-weight: 500; cursor: pointer; background: rgba(255, 255, 255, 0.12); border: 1px solid var(--fenix-color-border, rgba(255, 255, 255, 0.35)); color: var(--fenix-color-text-muted, rgba(255, 255, 255, 0.82)); } .fenix-page .fenix-page-body a.btn-secondary, .fenix-page .fenix-page-body a.btn-secondary.t-border, .fenix-page .fenix-page-body a.fenix-whatsapp-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 28px; min-height: 48px; margin-top: 0; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.2; text-decoration: none; color: var(--fenix-color-primary, var(--color-primary, #c9437f)) !important; background-color: var(--fenix-color-surface, var(--color-surface, #ffffff)); border: 2px solid var(--fenix-color-primary, var(--color-primary, #c9437f)); box-shadow: none; } .fenix-page .fenix-page-body a.btn-secondary:hover, .fenix-page .fenix-page-body a.fenix-whatsapp-cta:hover { background-color: var(--fenix-color-primary-light, var(--color-primary-light, #f4d6e3)); } .fenix-page .fenix-page-body .flex.flex-wrap.items-center a.btn-primary + a.fenix-whatsapp-cta, .fenix-page .fenix-page-body .flex.flex-wrap.items-center a.fenix-whatsapp-cta + a.btn-primary, .fenix-page .fenix-page-body .flex.flex-wrap.items-center a.btn-primary + a.btn-secondary, .fenix-page .fenix-page-body .flex.flex-wrap.items-center a.btn-secondary + a.btn-primary { margin-top: 0; } /* Explicit rounded-full on CTAs beats btn-* fixed radius (hero split-right WhatsApp pill) */ .fenix-page .fenix-page-body a.rounded-full, .fenix-page .fenix-page-body a.btn-secondary.rounded-full, .fenix-page .fenix-page-body a.btn-primary.rounded-full, .builder-section a.rounded-full, .builder-section a.btn-secondary.rounded-full, .builder-section a.btn-primary.rounded-full { border-radius: 9999px !important; } /* ─── Page-level decoration layer (v1.69, 2026-05-06) ─────────────────────────── Body-level fixed background with three blurred blobs, sitting BEHIND every section regardless of section bg-* utilities. Activated by setting FenixPage.BackgroundDecorationKey on a per-page basis. Render.cshtml emitswith three .blob children. Why this design: • z-index: -1 (not -10) so the layer outranks the page's white root but stays beneath all content. Sections without their own bg paint show the decoration; sections with explicit bg-white obscure it (intentional — content sections stay clean). • mix-blend-multiply + blur(64px) + low opacity matches the GVTheme home-3.html mockup recipe so it reads as a tinted wash, not a flat circle. • Each preset overrides only colour vars on the parent — children inherit. */ .fenix-page-deco { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; } .fenix-page-deco__blob { position: absolute; border-radius: 9999px; mix-blend-mode: multiply; filter: blur(64px); opacity: 0.55; } .fenix-page-deco__blob--a { top: 0; right: 0; width: 800px; height: 800px; background-color: var(--fenix-deco-color-a, rgba(236, 72, 153, 0.3)); } .fenix-page-deco__blob--b { top: 50%; left: -10rem; width: 600px; height: 600px; background-color: var(--fenix-deco-color-b, rgba(236, 72, 153, 0.25)); } .fenix-page-deco__blob--c { bottom: 0; right: 25%; width: 500px; height: 500px; background-color: var(--fenix-deco-color-c, rgba(253, 230, 138, 0.5)); } /* AI-generated decorative blob (class `.fenix-blob`, optionally `.fenix-blob-in`). Wizard / Stitch generations sometimes emit per-SECTION floating blobs as— meant to be soft brand-tinted circles floating BEHIND the section content. They carry their own size/position inline, and assume `position:absolute`. Without a rule for the class the elements default to `position:static; display:block`, so each one occupies 420–680px of REAL vertical space at the top of its section and shoves all content down (the "unusually large top padding on every section" bug). Pin them so they float behind content and contribute ZERO layout height. The parentis position:relative via the renderSection wrapper, so absolute here resolves against the section. */ section { position: relative; } /* 2026-06-04 — Decorative per-section blobs DISABLED globally (user: "not nice anyway, totally disable it"). The deterministic strip pass (FenixSectionEditabilityRepairer.StripDecorativeBlobs) removes .fenix-blob from NEW generations/redesigns/publishes; this display:none also hides any blob already BAKED into an existing page's snapshot, so old pages go clean with NO re-publish. To re-enable, restore the original .fenix-blob radial-gradient rule. */ .fenix-blob, .fenix-blob-in { display: none !important; } /* Pink — uses the active brand's --rgb-primary so each preset (GVT, Indigo, Vplus, etc.) gets its own primary blob hue automatically. Alphas halved from initial v1.69 tuning — the original 0.30/0.25/0.40 read as a strong pink wash on white pages; 0.15/0.12/0.20 keeps the same palette but lets it sit behind content as soft decoration rather than a dominant tint. */ .fenix-page-deco--pink { --fenix-deco-color-a: rgba(var(--rgb-primary, 236, 72, 153), 0.15); --fenix-deco-color-b: rgba(var(--rgb-primary, 236, 72, 153), 0.12); --fenix-deco-color-c: rgba(253, 224, 71, 0.20); /* amber-300 warm accent */ } .fenix-page-deco--mint { --fenix-deco-color-a: rgba(110, 231, 183, 0.45); /* emerald-300 */ --fenix-deco-color-b: rgba(94, 234, 212, 0.40); /* teal-300 */ --fenix-deco-color-c: rgba(165, 243, 252, 0.50); /* cyan-200 */ } .fenix-page-deco--lavender { --fenix-deco-color-a: rgba(196, 181, 253, 0.45); /* violet-300 */ --fenix-deco-color-b: rgba(216, 180, 254, 0.40); /* purple-300 */ --fenix-deco-color-c: rgba(191, 219, 254, 0.45); /* blue-200 */ } .fenix-page-deco--peach { --fenix-deco-color-a: rgba(253, 186, 116, 0.45); /* orange-300 */ --fenix-deco-color-b: rgba(252, 165, 165, 0.40); /* red-300 */ --fenix-deco-color-c: rgba(253, 224, 71, 0.40); /* amber-300 */ } .fenix-page-deco--sky { --fenix-deco-color-a: rgba(125, 211, 252, 0.50); /* sky-300 */ --fenix-deco-color-b: rgba(147, 197, 253, 0.45); /* blue-300 */ --fenix-deco-color-c: rgba(165, 243, 252, 0.45); /* cyan-200 */ } .fenix-page-deco--grey { --fenix-deco-color-a: rgba(148, 163, 184, 0.45); /* slate-400 */ --fenix-deco-color-b: rgba(100, 116, 139, 0.40); /* slate-500 */ --fenix-deco-color-c: rgba(203, 213, 225, 0.45); /* slate-300 */ } .fenix-page-deco--red { --fenix-deco-color-a: rgba(252, 165, 165, 0.45); /* red-300 */ --fenix-deco-color-b: rgba(248, 113, 113, 0.40); /* red-400 */ --fenix-deco-color-c: rgba(253, 224, 71, 0.40); /* amber-300 warm accent */ } /* Per-page opacity multiplier (v1.70.6) — Render.cshtml emits `style="--fenix-deco-alpha:0.6"` on the `.fenix-page-deco` wrapper when the saved key carries a `:0.6` suffix. The opacity rule below multiplies the blob layer's intrinsic opacity by that factor, giving editors a brightness/dimness dial without re-tuning every preset's RGBA. Default = 1.0 keeps original tuning. */ .fenix-page-deco { opacity: calc(var(--fenix-deco-alpha, 1) * 1); } /* When deco is active, neutralise the default bg-white that the page-builder bakes into every .builder-section wrapper — otherwise each section paints an opaque white slab over the deco layer and you only see the wash in the gaps (e.g. behind the breadcrumb). • Only targets .builder-section bg-white (the outer wrapper). Inner tags with bg-* utilities (dark CTA, coloured cards) keep theirs. • Use background:transparent (not "remove the class") so the original Tailwind remains intact for any non-deco pages and for the page-builder canvas iframe. • Scoped to .fenix-page .fenix-page-deco ~ * so it only applies on pages that actually rendered a deco layer. */ .fenix-page:has(.fenix-page-deco) .builder-section.bg-white { background-color: transparent; } /* Component wrappers also paint a white background in some renderer paths. */ .fenix-page:has(.fenix-page-deco) .component-wrapper { background-color: transparent; } /* Hero progress card — keep the card surface above its sibling decorative blobs so the blobs ring the card from outside instead of bleeding onto its rounded top-right / bottom-left corners. The mockup placed amber `-top-4 -right-4` and pink `-bottom-8 -left-8` blur-xl blobs as siblings of the card; without z-index ordering they paint over the card and look like the card has notches cut out of it. Targeting the specific class combo so this rule only touches the hero card. */ .fenix-page .relative.bg-white.rounded-\[3rem\].p-8.shadow-xl { z-index: 1; } /* Hero video background — keep the dark gradient overlay above the
- 's inline `list-style:none` (stylesheet
!important > inline non-important) AND overrides the
- made of icon-rows shouldn't reserve the marker gutter either. */
.fenix-page .fenix-page-body ul:has(> li.flex),
.fenix-page .fenix-page-body ul:has(> li.grid),
.fenix-page .fenix-page-body ul:has(> li.inline-flex),
.fenix-page .fenix-page-body ol:has(> li.flex),
.fenix-page .fenix-page-body ol:has(> li.grid),
.fenix-page .fenix-page-body ol:has(> li.inline-flex),
.fenix-page-body ul:has(> li.flex),
.fenix-page-body ul:has(> li.grid),
.fenix-page-body ul:has(> li.inline-flex),
.fenix-page-body ol:has(> li.flex),
.fenix-page-body ol:has(> li.grid),
.fenix-page-body ol:has(> li.inline-flex),
.builder-section ul:has(> li.flex),
.builder-section ul:has(> li.grid),
.builder-section ul:has(> li.inline-flex),
.builder-section ol:has(> li.flex),
.builder-section ol:has(> li.grid),
.builder-section ol:has(> li.inline-flex),
ul:has(> li.flex),
ul:has(> li.grid),
ul:has(> li.inline-flex),
ol:has(> li.flex),
ol:has(> li.grid),
ol:has(> li.inline-flex) {
list-style: none !important;
padding-left: 0 !important;
}
/* 2026-06-03 — INLINE-STYLE escape hatch (Page Wizard markup).
The escape hatches above key off a CLASS on the
- (.flex / .grid). The Page
Wizard generator instead emits icon-row lists with INLINE styles and NO class:
- 's class. Plain prose `
- ` (no layout class) is untouched,
so genuine bulleted lists still get their disc. */
/* Specificity note: the disc-forcing rule above is `.fenix-page
.fenix-page-body ul li` = (0,3,1). To beat it we must match or exceed that.
`.fenix-page .fenix-page-body ul li.flex` = (0,3,2) — wins cleanly. The
builder iframe has no `.fenix-page` ancestor, so `.builder-section ul li.flex`
(0,2,1) is enough there (the theme.css rule it competes with is also lower). */
.fenix-page .fenix-page-body ul li.flex,
.fenix-page .fenix-page-body ul li.inline-flex,
.fenix-page .fenix-page-body ol li.flex,
.fenix-page .fenix-page-body ol li.inline-flex,
.fenix-page-body ul li.flex,
.fenix-page-body ul li.inline-flex,
.fenix-page-body ol li.flex,
.fenix-page-body ol li.inline-flex,
.builder-section ul li.flex,
.builder-section ul li.inline-flex,
.builder-section ol li.flex,
.builder-section ol li.inline-flex,
ul li.flex,
ul li.inline-flex,
ol li.flex,
ol li.inline-flex {
list-style: none !important;
list-style-type: none !important;
display: flex !important;
}
.fenix-page .fenix-page-body ul li.grid,
.fenix-page .fenix-page-body ol li.grid,
.fenix-page-body ul li.grid,
.fenix-page-body ol li.grid,
.builder-section ul li.grid,
.builder-section ol li.grid,
ul li.grid,
ol li.grid {
list-style: none !important;
list-style-type: none !important;
display: grid !important;
}
/* A
- in policy text or feature lists render as
bullet-less plain lines (FAQ items, compliance lists, etc.). Mirror of builder iframe
rules in dist/theme.css:5314+ so PUBLIC matches BUILDER preview. 2026-05-07. */
.fenix-page .fenix-page-body ul,
.fenix-page .fenix-page-body ol {
margin-bottom: 1em;
padding-left: 1.5em !important;
}
.fenix-page .fenix-page-body ul { list-style: disc outside !important; list-style-type: disc !important; }
.fenix-page .fenix-page-body ol { list-style: decimal outside !important; list-style-type: decimal !important; }
.fenix-page .fenix-page-body ul li { list-style-type: disc !important; display: list-item !important; line-height: 1.7; }
.fenix-page .fenix-page-body ol li { list-style-type: decimal !important; display: list-item !important; line-height: 1.7; }
.fenix-page .fenix-page-body li { margin-bottom: 0.5em; }
.fenix-page .fenix-page-body ul ul,
.fenix-page .fenix-page-body ol ol,
.fenix-page .fenix-page-body ul ol,
.fenix-page .fenix-page-body ol ul { margin-bottom: 0; padding-left: 1.5em !important; }
/* Escape hatch: `
- ` is the Tailwind / mockup convention for
icon-checkmark lists (see WorkshopHeroRenderer bullets, FeaturesChecklistRenderer,
r2o triangle nodes). The disc override above forces them back to default-bullet
+ list-item display, which (a) shows two markers per line (• + checkmark) and
(b) breaks the `