/*
* Our own overrides on top of the vendored, unmodified
* public/vendor/silktide-consent-manager/silktide-consent-manager.css —
* never edit that file directly, add rules here instead so a future
* upgrade (re-downloading the vendored file) can't silently drop a fix.
*
* StickyCta.tsx renders a full-width bar fixed to `bottom-0` below the
* `lg` breakpoint (1024px), so on mobile/tablet it can be on screen at
* the same time as Silktide's cookie icon (also `position: fixed`,
* `bottom: ~10px` by default). The banner itself is centered on all
* sizes (see below), so it doesn't need the same treatment — only the
* icon does.
*
* Gated on `body.sticky-cta-visible` (toggled by StickyCta.tsx itself),
* not a blanket mobile media query. A static push-up used to apply
* whenever the viewport was narrow, regardless of whether the bar was
* actually showing — StickyCta deliberately hides itself once the
* checkForm block scrolls into view (so it never covers the form's own
* submit button), and the icon's push-up didn't know that, so it landed
* squarely on top of that same submit button instead. Tying the two
* together means the icon only moves when there is something at the
* bottom of the screen to clear.
*
* 112px clears StickyCta's tallest state (button row + optional note
* line + padding + safe-area inset) with a small margin — re-check this
* number if StickyCta's own padding/content changes.
*/
@media (max-width: 1023.98px) {
body.sticky-cta-visible #stcm-icon {
bottom: calc(112px + env(safe-area-inset-bottom)) !important;
}
}
/*
* Brand tokens, in place of the library's own dark/yellow default theme.
* `--primaryColor` is the button FILL and `--backgroundColor` doubles as
* both the panel background AND the button label color drawn on top of
* that fill (see .stcm-button in the vendored CSS) — that pairing is
* unusual to read but deliberate on the library's part, so espresso/cream
* here reuses the exact pair already verified at 13.22:1 for
* Footer.tsx's warm theme (`npm run check:contrast`). The accept/reject
* buttons get their own brand-gradient/espresso treatment further down,
* which overrides this base pair on just those two elements.
*
* `!important` on every property: this rule and the vendored file's own
* `#stcm-wrapper` rule have identical specificity (one ID selector), so
* without it, whichever ``/style tag Next.js happens to place later
* in wins — the vendored file is loaded from a plain `` in
* ConsentManager.tsx while this file is bundled through Next's own CSS
* pipeline, and there's no guarantee which one lands second. `!important`
* makes the result independent of that load order.
*/
#stcm-wrapper {
--fontFamily: var(--font-sans) !important;
--primaryColor: var(--color-espresso) !important;
--backgroundColor: var(--color-cream) !important;
--textColor: var(--color-espresso) !important;
--iconColor: var(--color-cream) !important;
--backdropBackgroundColor: rgba(45, 34, 26, 0.38) !important;
--backdropBackgroundBlur: 6px !important;
}
/*
* Centered and a deliberately noticeable size, not a small corner toast —
* Thomas wants a visitor to actually register the prompt and resolve it
* (accept or reject), not tune it out as a corner-of-the-eye widget. The
* warm, blurred backdrop (`--backdropBackgroundColor` above) gives it
* focus without the harsh full-black scrim the library defaults to.
*/
#stcm-banner {
width: 680px !important;
max-width: calc(100% - 32px) !important;
padding: 40px !important;
border-radius: var(--radius-card) !important;
border: 1px solid rgba(45, 34, 26, 0.1) !important;
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}
#stcm-banner .stcm-button,
#stcm-modal .stcm-button {
border-radius: 999px !important;
font-weight: 700 !important;
padding: 14px 28px !important;
}
/*
* Accept and reject in two different brand colors rather than one flat
* duotone — both are still the exact same size, shape, weight, and
* position (inherited from .stcm-button above), so this is a color
* choice, not a prominence one. "Akzeptieren" gets the same 135° warm-
* orange→deep-orange gradient every primary CTA on the page uses
* (ui/Button.tsx `variant="primary"`); "Ablehnen" gets solid espresso —
* both already-verified AA pairs (`npm run check:contrast`: espresso on
* warm-orange 7.56:1, on deep-orange 5.55:1; cream on espresso 13.22:1),
* not new colors invented for this widget.
*/
#stcm-banner .stcm-accept-all,
#stcm-modal .stcm-modal-save {
background: linear-gradient(
135deg,
var(--color-warm-orange),
var(--color-deep-orange)
) !important;
color: var(--color-cta-ink) !important;
border-color: transparent !important;
}
#stcm-banner .stcm-reject-all,
#stcm-modal .stcm-modal-reject-all {
background: var(--color-espresso) !important;
color: var(--color-cream) !important;
border-color: transparent !important;
}
/* The library's own swoosh mark, always rendered into the banner's action
row — replaced by our own logo inside the description slot (see
ConsentManager.tsx), so this one has to go rather than sit alongside
it. The floating reopen icon is also re-branded, from JS rather than
here — see brandCookieIcon() in ConsentManager.tsx; the SVG glyph is
generated inline by the library with no config hook to swap it. */
#stcm-banner a.stcm-logo {
display: none !important;
}
/* Text attribution to Silktide in the preferences panel footer — hiding
it outright rather than passing an empty `creditLinkText` in config:
the library falls back to its English default the moment that string
is falsy, so blanking it in config would make things worse, not
better. MIT's license terms don't require on-page attribution (only
that the copyright notice stay in the source, which it does — see the
vendored files' own headers), so removing it here is not a licensing
problem. */
.stcm-credit-link {
display: none !important;
}
.stcm-brand {
margin-bottom: 16px;
}
.stcm-brand img {
display: block;
height: 24px;
width: auto;
}