--- paths: - "css/**" - "inc/lp/css/**" - "inc/lp/**" --- # WI — Shortcode CSS Scope Invariant ## Denkmodell (verbindlich) - **Eine Layout-Invariante pro Shortcode / Touchpoint:** Grid bleibt Grid, Registration bleibt Registration, Footer bleibt Footer, Custom-SC (`gb_sc_custom`) bleibt im `.wi-sc-form-wrap`-Kontext. - **Admin und Inkognito** sind **zwei Prüfmodi derselben Invariante** — kein Default „nur Admin fixen“ über `body.logged-in` o. Ä. - **Admin-only CSS** nur als letzter Ausweg, wenn ein echtes Admin-only-Element die Struktur verändert (z. B. FAB-Spalte). Dann **semantisch scoped**, z. B. `.wi-sc-hosted--admin-fabs` oder `.wi-sc-hosted--wi-grid` — nicht globale Registration-Regeln auf alle `.wi-sc-hosted` ausweiten. Cross-Refs: Participant-Journey / QA-Screenshots `wi-participant-journey.mdc`, `wi-staging-infra.mdc`, Lieferpfad `wi-agent-workflow.mdc`. ## Semantische Host-Klassen (Inventar) Der Wrapper um `[wi_webinar_block]`, `[wi_grid]`, `[webinarignition_footer]` setzt immer `wi-sc-hosted` plus **genau einen** Touchpoint-Modifier (PHP: `wrap_wi_shortcode_with_design_edit_control` in `inc/block-editor-theme-override.php`): | Klasse | Shortcode | Zweck | |--------|-----------|--------| | `wi-sc-hosted` | alle drei | gemeinsamer Host für FSE-Variablen + FAB-Layout | | `wi-sc-hosted--wi-webinar-block` | `[wi_webinar_block]` | immer gesetzt; plus `wi-sc-hosted--wi-stack-{page}` (registration/thankyou/…) für page-aware CSS | | `wi-sc-hosted--wi-grid` | `[wi_grid]` | Webinar-Grid (26rem-Caps im Theme explizit ausnehmen) | | `wi-sc-hosted--wi-footer` | `[webinarignition_footer]` | Footer-Shortcode | | `wi-sc-hosted--admin-fabs` | wenn FABs sichtbar | innerer Wrapper + Spalte für Shortcode-HTML — Layout-Regeln für Inhalt oft auf `> div:nth-child(2)` | **Nicht** über diesen Filter gewrappt: andere Shortcodes, Legacy ohne Wrapper. Dort greifen weiterhin `:has(.wi_grid_container)`-Brücken in CSS, bis Markup überall Modifier trägt. **gb_sc_custom:** Container `.wi-sc-form-wrap` (Inject via `webinarignition_shortcode` / Page-Mode), oft mit `.wi-sc-form-wrap--flat`. Innen kann weiterhin `.wi-sc-hosted` vorkommen (Registration-Block). ## Klassifikation — `webinar-modern.css` (`.wi-sc-hosted` / nahe Host-Regeln) Grobe Kategorien (bei neuen Regeln zuordnen; keine neuen „global alles“-Selektoren ohne Kategorie): | Kategorie | Inhalt / Muster | Beispiel-Zeilen (ca.) | |-----------|------------------|------------------------| | **Registration — CTA** | `#optinBTN` / FSE-Primary unter Host | ~5521–5670 | | **Registration — Live-Datum** | `.eventDate.wi-live-dates-wrap`, Padding-Inset | ~6556–6580, ~7885+ | | **Registration — Evergreen / Form** | `.evergreen-Registration`, `.optinFormArea`, 26rem-Rail | ~7917–7996, ~8232+ | | **Grid vs. Registration** | 26rem-Cap vs. `wi-sc-hosted--wi-grid` / `:has(.wi_grid_container[data-wi-grid-instance])` | ~7951–7983 | | **Admin FAB / Design-Stack** | `:has(.wi-sc-design-stack) > div:nth-child(2)`, `--admin-fabs` | ~8025–8071 | | **Registration — Video-only / Spalten** | `.ctaArea.video`, `#signup`, `wi-register-page-wrapper` | ~8086–8146, ~8331+ | | **Thank-you (GB)** | eher `ty-gutenberg.css` + `body.wi-ty-gb-page .wi-sc-hosted` | siehe `ty-gutenberg.css` | **Regel für neue Selektoren:** Wenn die Regel nur Registration betrifft → bevorzugt `.wi-sc-hosted--wi-webinar-block` (und ggf. `:has(.wi-sc-design-stack)`) statt nacktes `.wi-sc-hosted`, sobald Migration belegt ist. Grid: `.wi-sc-hosted--wi-grid` oder `:has(.wi_grid_container[data-wi-grid-instance])`. Footer: `.wi-sc-hosted--wi-footer`. ## Audit — `vendor/webinarignitiongrid/wi-grid.css` - **Kopplung zu `.wi-sc-hosted`:** bewusst — hebt `webinar-modern`-26rem-Cap für Grid-Host auf (`:has(.wi_grid_container)` + `.wi-sc-hosted--wi-grid`). - **Footer / Template-Parts:** `.wp-block-template-part .wi_grid_container` begrenzt Breakout — Grid soll Footer nicht auf `100vw` aufblasen (Kommentar im File). - **Flex-Zeilen:** `.is-layout-flex > .wi-sc-hosted` teilt sich mit `.wi_grid_container` — nur Layout-Stretch, keine Form-Styles. ## Audit — `inc/lp/css/wi-sc-form.css` - **Scope:** Primär `.wi-sc-form-wrap` — korrekt für `gb_sc_custom`. - **`.wi-sc-hosted` innerhalb:** Overflow sichtbar für FABs; `.wi-sc-form-wrap .wi-sc-hosted` Flex-Spalte spiegelt Hosted-Stack — beabsichtigt; **kein** Grid-Footer aus diesem File. - **Kopplung zu `webinar-modern`:** Kommentare verweisen auf gemeinsame 26rem-/Padding-Semantik — bei Konflikten zuerst Touchpoint trennen, nicht beide Files global absenken. ## Selektor-Größe (verbindlich) **So klein wie möglich, so groß wie nötig.** Vor `working ✓` bei CSS: [wi-css-change-impact.mdc](wi-css-change-impact.mdc) (Wenn-dann, Kollateral, Blocker). ## Patch-Disziplin (Gate) 1. **Kleinstes Selektor-Set**, das den betroffenen Shortcode / Touchpoint eindeutig trifft — kein blindes Entfernen von `26rem` oder `:has()` repo-weit. 2. **Beweis:** Desktop + Mobile; für Shortcode-Hosts **Admin eingeloggt + Inkognito** dieselbe Seite. 3. **Grid:** nach Layout-Änderung kurz warten vor Screenshot (`wi-staging-infra.mdc`); `firstRowColumns >= 2` auf Desktop wo relevant; kein horizontaler Overflow. 4. **Registration:** CTA/Form lesbar; Grid-Fix darf Opt-in-Spalte nicht verengen — Modifier testen. 5. **Kein Default** „nur für Admin“ — Ausnahmen nur mit semantischer Klasse und kurzer Begründung im Kommentar. Bei großen Diffs / Registration-Submit / neuen globalen Hooks zusätzlich `wi-risk-veto.mdc` / `wi-protect-veto-alternatives.mdc` beachten. ## Stack-Modifier (page-aware) — `wi-sc-hosted--wi-stack-*` - **Quelle:** `WebinarIgnition_Theme_Manager::wi_sc_webinar_block_stack_modifier()` setzt für `[wi_webinar_block]` zusätzlich z. B. `wi-sc-hosted--wi-stack-registration` oder `wi-sc-hosted--wi-stack-thankyou` (Bucket `page` aus `webinarignition_get_available_shortcodes()`). - **Zweck:** `webinar-modern.css` kann **26rem-/FAB-Innenwrapper-Regeln** auf **Registration** begrenzen; Thank-you mit FAB bleibt **breit** (`max-width: 100%` auf `> div:nth-child(2)`). - **`[wi_grid]`** bleibt bei `wi-sc-hosted--wi-grid` ohne `wi-stack-*`. ## SC-Custom Karten-Rail — `wi-sc-form-wrap--reg-rail` - **Quelle:** `WebinarignitionPowerupsShortcodes` hängt bei SC-Wrap + `page === 'registration'` und ohne `--flat` die Klasse an. - **CSS:** `inc/lp/css/wi-sc-form.css` — `max-width: min(100%, 560px)` / `margin: 0 auto` nur auf diesem Modifier, nicht auf allen `.wi-sc-form-wrap`. --- # WI — CSS Change Impact (vor `working ✓`) ## Ziel **Änderungen wirken nur am einen beabsichtigten Ort — ohne Kollateralschaden** an Registration, Thank-you, Grid, Footer oder Builder-Spalten. ## Prinzip (Selector-Disziplin) **So klein wie möglich, so groß wie nötig:** - Touchpoint-Modifier (`.wi-sc-hosted--wi-stack-thankyou`, `.wi-sc-hosted--wi-grid`, `.wi-ty-gb__shell`) statt `body` + breites `:has()` ohne Stack. - **Kein** globales Absenken von `26rem`, `max-width: none`, `width: 100% !important` repo-weit. - `!important` nur wenn Legacy/Theme es erzwingt. Siehe [wi-shortcode-css-scope.mdc](wi-shortcode-css-scope.mdc). ## Wann Pflicht Vor **`✅ #Axxx done — waiting for working ✓`** und vor Commit nach `working ✓`, wenn der Task **CSS** geändert hat (Datei oder `wp_add_inline_style`). **Ausnahme:** nur Kommentare/Whitespace ohne Selektor-/Property-Änderung → `css cross-impact: n/a`. ## Pflicht-Block im Chat ``` 🎨 CSS Cross-Impact #Axxx Ziel-Touchpoint: … Geänderte Dateien: … Wenn du es SO machst: - … Diese Änderung zieht mit sich (Kollateral-Check): - Registration: … - Thank-you: … - Grid / Footer: … - WPBakery Spalte / Volllayout: … Selektor-Scope: … Freigabe: self-contained ✓ | BLOCKER — #Axxx css-impact ok nötig ``` **Mindestens:** eine **„Wenn du … so machst“**-Zeile und eine **„zieht mit sich“**-Zeile (oder **„kein Kollateral — Selektor trifft nur …“**). ## BLOCKER (kein `waiting for working ✓`) Ohne explizite User-Freigabe (`#Axxx css-impact ok` / `css cross-impact approved`), wenn: 1. Mehrere Touchpoints in einer Regel ohne Begründung + Regression-URL. 2. `max-width: none`, `100vw`, Breiten-`!important` ohne engen Stack/Shell-Scope. 3. Registration-**26rem** und Thank-you in derselben Änderung vermischt. 4. Kollateral genannt, aber nicht getestet. ## Mindest-Beweis | Touchpoint geändert | Zusätzlich prüfen | |--------------------|-------------------| | thankyou | Registration-LP oder HSC VC 1/6 + 1/1 | | registration / 26rem | Thank-you oder `[wi_grid]` | | grid | Registration opt-in | [wi-agent-workflow.mdc](wi-agent-workflow.mdc) · [wi-staging-infra.mdc](wi-staging-infra.mdc) --- # FSE registration landings — text and links On `.wi-wb-registration-landing` (block themes, e.g. Twenty Twenty-Five), **do not** set `color`, `background`, or link colors with hardcoded values such as `#1a1a1a` on: - `.wi-webinarignition-footer` / footer shortcode output - `.powered_by_text_wrap` - `.wp-block-post-content` / main entry content Users switch **Site Editor → Styles** (style variations); light and dark presets invert foreground/background. Forced dark text breaks dark styles and is wrong on light-on-dark templates. **Do:** layout-only rules (padding, typography size, underline for footer links if needed). **Let** theme `color` / preset CSS variables define text and links like native blocks.