/* Modals — event details and product details ------------------------------- * * Both were white panels on a grey wash, left over from the light Webflow * design. On a black site they arrive like a floodlight. * * They are restyled where they lie rather than rebuilt: the markup is Webflow's * and the behaviour is driven by scripts we do not own (the event dialog by * eventpopup-1.0.0.js, the product panel by Finsweet attributes). Changing only * the paint keeps both working. * * The scrim uses the same glass as the header — `--site-glass` and * `--site-glass-blur`, declared once in navbar.css. Blurring the page behind a * dialog is not decoration: it is what tells the eye which layer is live, and * it is the same device the header uses to stay readable over anything. * * Scoped with `:root:has([data-mode="frontier"])`, NOT with a plain * `[data-mode="frontier"] …` descendant selector. eventpopup-1.0.0.js moves the * dialog to be a direct child of when the page loads — out of the * wrapper that carries the attribute — so a descendant selector matches it on * no page at all. Measured: the dialog's parent is BODY and its whole ancestor * chain is [.event_modal, BODY]. Asking the root whether the page contains a * frontier wrapper works wherever the script parks the node, and still leaves a * site switched back to verbatim with its original modal. */ /* --- The scrim ------------------------------------------------------------ */ /* `.event_modal` is the full-screen backdrop AND the centring box; the panel inside it is .event_modal__dialog. This is the only one of the two that is a real overlay, so it is the only one where blurring the page behind means anything — see the note above the product panel below. */ :root:has([data-mode="frontier"]) .event_modal { background-color: var(--site-glass, rgba(12, 12, 12, 0.58)); backdrop-filter: var(--site-glass-blur, blur(40px)); -webkit-backdrop-filter: var(--site-glass-blur, blur(40px)); } /* Without a blur the fill alone has to separate the layers, and 58% is not enough for that — the page behind stays legible and competes with the dialog. Same trade as the header's fallback. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { :root:has([data-mode="frontier"]) .event_modal { background-color: rgba(6, 6, 6, 0.9); } } /* --- Event dialog --------------------------------------------------------- */ :root:has([data-mode="frontier"]) .event_modal__dialog { background-color: var(--fr-panel, #151515); color: #ffffff; border-color: rgba(255, 255, 255, 0.14); border-radius: var(--fr-radius, 2px); } /* The title sits behind a vertical rule. It was the light theme's border colour, which on #151515 is invisible. */ :root:has([data-mode="frontier"]) .event_modal__header { border-left-color: rgba(255, 255, 255, 0.24); } :root:has([data-mode="frontier"]) .event_modal__dialog .event_date-wrapper p { color: rgba(255, 255, 255, 0.92); } :root:has([data-mode="frontier"]) .event_modal__dialog .event_description, :root:has([data-mode="frontier"]) .event_modal__dialog .event_description p { color: var(--fr-muted, rgba(255, 255, 255, 0.62)); } /* The deck's emphasis — "ausschließlich an Angehörige der Bundeswehr", "Mindestteilnehmerzahl von 6 Personen" — has to out-weigh the body it sits in, which on a dark ground means lighter, not bolder. */ :root:has([data-mode="frontier"]) .event_modal__dialog .event_description strong { color: #ffffff; font-weight: 500; } :root:has([data-mode="frontier"]) .event_modal__link { color: var(--site-accent, #c4b798); text-decoration-color: rgba(255, 255, 255, 0.3); } /* The five icons — map pin, calendar, clock, info, and the close cross — are flat black SVGs served as , so `currentColor` cannot reach them and they disappeared into the panel. `brightness(0) invert(1)` forces any source colour to white, which `invert(1)` alone would not do for a mark that is not pure black. */ :root:has([data-mode="frontier"]) .event_modal__dialog .event_date-wrapper img, :root:has([data-mode="frontier"]) .event_modal__close img { filter: brightness(0) invert(1); } :root:has([data-mode="frontier"]) .event_modal__close { color: #ffffff; opacity: 0.7; transition: opacity 0.2s ease; } :root:has([data-mode="frontier"]) .event_modal__close:hover, :root:has([data-mode="frontier"]) .event_modal__close:focus-visible { opacity: 1; } /* --- Product panel -------------------------------------------------------- */ /* Not a dialog. Despite the name, `.product-popup_wrapper` is a section that expands in place — Finsweet rolls its grid row from 0fr to 1fr and fades it in; nothing floats and nothing is covered. `.pop-up_overlay` inside it is absolutely positioned against the wrapper, so it backs the panel itself, not the page. Blurring it would therefore blur nothing a visitor can see, which is why the scrim rule above deliberately does not include it. Turning this into a true overlay is a behaviour change, not a paint change; it is worth doing but it is its own piece of work. */ /* The section around the panel, which stayed on the light theme's ground and showed as a pale margin down both sides of the open panel. */ :root:has([data-mode="frontier"]) .section-pop-up { background-color: var(--fr-bg, #0b0b0b); } :root:has([data-mode="frontier"]) .product-popup_inner { background-color: var(--fr-panel, #151515); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--fr-radius, 2px); } /* The panel is built from the same hairlines as the rest of the site; on the light theme they were near-black on near-white. */ :root:has([data-mode="frontier"]) .product-popup_inner .divider-horizontal { background-color: rgba(255, 255, 255, 0.14); } :root:has([data-mode="frontier"]) .product-popup_inner .text-size-tiny { color: var(--fr-muted, rgba(255, 255, 255, 0.62)); } /* The spec labels. Bold on a dark ground reads as shouting; the design system sets labels in the mono at 500 instead. */ :root:has([data-mode="frontier"]) .product-popup_inner .text-size-tiny.text-weight-bold { color: #ffffff; font-weight: 500; } :root:has([data-mode="frontier"]) .product-popup_inner .text-rich-text, :root:has([data-mode="frontier"]) .product-popup_inner .text-rich-text p { color: var(--fr-muted, rgba(255, 255, 255, 0.62)); } :root:has([data-mode="frontier"]) .product-popup_inner .text-rich-text strong { color: #ffffff; font-weight: 500; } /* The tab row across the panel — same treatment the rest of the site gives a row of choices: a hairline underneath, the live one marked in the accent. */ :root:has([data-mode="frontier"]) .product-popup_inner .tab-link { background-color: transparent; color: var(--fr-muted, rgba(255, 255, 255, 0.62)); border-bottom: 1px solid transparent; } :root:has([data-mode="frontier"]) .product-popup_inner .tab-link.w--current { background-color: transparent; color: #ffffff; border-bottom-color: var(--site-accent, #c4b798); }