/** * @file * Overlay atom (Phase 6.3) — `css/atoms/overlay.css` * * EN: Reusable tinted-shroud atom. Adds a `::before` overlay layer over * any positioned parent. Four variants: flat white, flat black, * white-radial centre vignette, black-radial centre vignette. * * DE: Wiederverwendbares getöntes Overlay-Atom. Fügt einer positionierten * Elternbox eine `::before`-Schicht hinzu. Vier Varianten: flach weiß, * flach schwarz, weißes Radial-Vignette, schwarzes Radial-Vignette. * * Replaces duplicated overlay quartets that previously lived verbatim in: * - css/components/basic-tabs.css (lines 208–261, .basic-tabs-nav) * - css/components/section-navigator.css (lines 213–263, .section-header) * - css/components/section-navigator.css (lines 284–338, .section-navigator-header) * - css/components/section-navigator.css (lines 557–610, .section-navigator-nav) * - plus mobile-responsive overrides at basic-tabs.css:396–414 and * section-navigator.css:1139–1158. * * Modifiers (compose with `.dck-overlay` on the parent): * --white — flat 40% white shroud (uniform). * --black — flat 40% black shroud (uniform). * --white-center — white radial vignette (peak at centre). * --black-center — black radial vignette (peak at centre). * (legacy name `.basic-tabs-overlay-center` is migrated * to `.dck-overlay--black-center` for symmetric * vocabulary with `--white-center`.) * * Position-agnostic contract (mirrors Phase 6.2 round-icon-button rules): * The atom's BASE selector (`.dck-overlay`) declares NO positioning of * ITSELF inside its consumer's layout context — no `position`, `top`, * `right`, `bottom`, `left`, `inset`, `z-index`, layout-margin on the * element that carries the `.dck-overlay` class. Consumers own that * placement (all four legacy parents already set `position: relative`). * * The `::before` pseudo-element IS positioned (`position: absolute; * inset: 0; z-index: 1`) — but that is the atom's INTERNAL visual * contract for painting the overlay layer over the parent, not the * atom positioning itself in its consumer's layout. The two concerns * are distinct: the consumer says "I am a positioned box"; the atom * says "I will paint inside the positioned box you gave me". * * Library wiring: declared as its own `overlay` library in * `upmarkit_theme.libraries.yml` under `css.component:` (NOT `css.theme:` * — see Phase 6.2 regression debrief). Added as a dependency of * `basic_tabs` and `section_navigator` libraries. * * Token-only: every consumed colour / alpha comes from `var(--overlay-*)` * (Schema v6 §12 overlay_tints). The radial ellipse dimensions and the * stop positions are atom-internal layout primitives, defined ONCE on * the atom root and consumed throughout via `var(--ovly-*)`. * * Class binding sites (humans writing classes into Twig templates): *
*
*
* …etc. Combine .dck-overlay base + one variant modifier. */ .dck-overlay { /* Atom-internal layout primitives — radial ellipse dimensions and the 3 stop positions. Desktop values; mobile media query (below) overrides --ovly-ellipse-w / --ovly-ellipse-h / --ovly-stop-mid / --ovly-stop-outer to widen the vignette on narrow viewports. */ --ovly-ellipse-w: 70%; --ovly-ellipse-h: 60%; --ovly-stop-mid: 30%; --ovly-stop-outer: 60%; /* * Position-agnostic by design: the atom does NOT declare position on * its base selector. Every consumer (basic-tabs-nav, section-header, * section-navigator-header, section-navigator-nav …) already owns its * own `position: relative` and supplies the positioning context for * the ::before overlay. See header comment for the contract. */ } /* ============================================================================ OVERLAY ::before — internal visual scaffold (shared across all variants) `position: absolute; inset: 0; z-index: 1` is INTERNAL to the atom — it paints the overlay layer inside whatever positioned parent the consumer provides. It is NOT the atom positioning itself in the consumer's layout context. Consumers may freely set `position: absolute` / `position: relative` on their own selector without conflict; the ::before remains scoped to its own positioning context (the parent it originates from), which CSS guarantees regardless of the parent's `position` value (any non-`static` value establishes the context, and the parent's `position: relative` already supplies one). ============================================================================ */ .dck-overlay::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; } /* ============================================================================ VARIANT MODIFIERS — paint the ::before with the chosen tint shape ============================================================================ */ /* Flat white shroud — uniform 40% white tint. */ .dck-overlay--white::before { background-color: var(--overlay-white-medium); } /* Flat black shroud — uniform 40% black tint. */ .dck-overlay--black::before { background-color: var(--overlay-black-medium); } /* White radial vignette — centre peak at 50% → 40% mid → 20% outer → clear. */ .dck-overlay--white-center::before { background: radial-gradient( ellipse var(--ovly-ellipse-w) var(--ovly-ellipse-h) at center, var(--overlay-white-strong) 0%, var(--overlay-white-medium) var(--ovly-stop-mid), var(--overlay-white-soft) var(--ovly-stop-outer), var(--overlay-clear) 100% ); } /* Black radial vignette — centre peak at 50% → 40% mid → 20% outer → clear. (Legacy class name `.basic-tabs-overlay-center` is migrated to this explicit `--black-center` for vocabulary symmetry with `--white-center`.) */ .dck-overlay--black-center::before { background: radial-gradient( ellipse var(--ovly-ellipse-w) var(--ovly-ellipse-h) at center, var(--overlay-black-strong) 0%, var(--overlay-black-medium) var(--ovly-stop-mid), var(--overlay-black-soft) var(--ovly-stop-outer), var(--overlay-clear) 100% ); } /* ============================================================================ MOBILE RESPONSIVE — widen the radial vignette on narrow viewports. Only the two radial variants change on mobile. The flat-shroud variants (`--white`, `--black`) cover the parent uniformly at any viewport, so no media query is needed for them. The override mutates the atom's internal layout primitives (--ovly-ellipse-* and --ovly-stop-*) on .dck-overlay so the same radial-gradient declaration above just recomputes with the wider ellipse and shifted stops. No duplicate gradient strings. ============================================================================ */ @media (max-width: 768px) { .dck-overlay { --ovly-ellipse-w: 90%; --ovly-ellipse-h: 70%; --ovly-stop-mid: 35%; --ovly-stop-outer: 65%; } } /* ============================================================================ LEGACY ALIASES — backwards-compat for content stored in the Drupal database / configuration that still references the old class names. EN: Real-world pages may carry the old `.basic-tabs-overlay-*` classes authored before Phase 6.3 (WYSIWYG bodies, Paragraphs / Layout Builder config, Twig snippets that haven't been migrated yet). Each alias below replicates the corresponding `.dck-overlay--*` modifier on its own `::before` pseudo-element, sharing the SAME token references so the visual output is byte-identical. DE: Bestehende Inhalte in der Drupal-Datenbank tragen unter Umständen noch die alten Klassennamen. Die folgenden Aliasse spiegeln die jeweiligen `.dck-overlay--*`-Modifier wider, damit Bestandsinhalte nicht brechen. Class mapping (legacy → canonical): .basic-tabs-overlay-white → .dck-overlay--white .basic-tabs-overlay-black → .dck-overlay--black .basic-tabs-overlay-white-center → .dck-overlay--white-center .basic-tabs-overlay-center → .dck-overlay--black-center Position contract — DIFFERENT from the canonical atom: Unlike the canonical `.dck-overlay` base (which is position-agnostic and trusts the consumer to declare `position: relative`), the LEGACY aliases SET `position: relative` themselves. Legacy markup was authored against a previous contract where the overlay class alone was sufficient to render — many legacy host elements have NO positioning declarations of their own, so the alias must establish a positioning context for its own `::before` to render visibly. These aliases are slated for removal in a later phase once content has been migrated to the `.dck-overlay dck-overlay--*` vocabulary. ============================================================================ */ .basic-tabs-overlay-white, .basic-tabs-overlay-black, .basic-tabs-overlay-white-center, .basic-tabs-overlay-center { --ovly-ellipse-w: 70%; --ovly-ellipse-h: 60%; --ovly-stop-mid: 30%; --ovly-stop-outer: 60%; position: relative; } .basic-tabs-overlay-white::before, .basic-tabs-overlay-black::before, .basic-tabs-overlay-white-center::before, .basic-tabs-overlay-center::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; } .basic-tabs-overlay-white::before { background-color: var(--overlay-white-medium); } .basic-tabs-overlay-black::before { background-color: var(--overlay-black-medium); } .basic-tabs-overlay-white-center::before { background: radial-gradient( ellipse var(--ovly-ellipse-w) var(--ovly-ellipse-h) at center, var(--overlay-white-strong) 0%, var(--overlay-white-medium) var(--ovly-stop-mid), var(--overlay-white-soft) var(--ovly-stop-outer), var(--overlay-clear) 100% ); } .basic-tabs-overlay-center::before { background: radial-gradient( ellipse var(--ovly-ellipse-w) var(--ovly-ellipse-h) at center, var(--overlay-black-strong) 0%, var(--overlay-black-medium) var(--ovly-stop-mid), var(--overlay-black-soft) var(--ovly-stop-outer), var(--overlay-clear) 100% ); } /* Mobile responsive — widen the radial ellipse on narrow viewports. Only the two radial-vignette aliases mutate; the flat-shroud aliases cover their host uniformly at any viewport so no override is needed. */ @media (max-width: 768px) { .basic-tabs-overlay-white-center, .basic-tabs-overlay-center { --ovly-ellipse-w: 90%; --ovly-ellipse-h: 70%; --ovly-stop-mid: 35%; --ovly-stop-outer: 65%; } }