Cookie banner
Re-skin the consent banner — the --banner-* tokens, the class hooks, and the scoped Custom CSS escape hatch.
The cookie/consent banner is site chrome Tortus renders for you — the legal copy is fixed by compliance, but the look is yours. Three layers of control, from lightest to fullest:
- Panel fields — variant (
glass/minimal/bar), position, button mode, and copy, from the site's Consent settings. - Design tokens — the
--banner-*group re-skins the chrome on-brand. Full table on the Design tokens page. - Custom CSS — the class hooks below, for anything the tokens don't reach.
The class hooks
The banner exposes three stable hooks. Your scoped Custom CSS is auto-confined
under #tortus-cookie-banner-css, so a rule can only touch the banner — nothing
leaks page-wide.
| Hook | Element |
|---|---|
.tortus-cookie-banner | the banner card |
.tortus-cookie-accept | the "Accept all" button |
.tortus-cookie-reject | the "Reject" button |
The `ck-*` classes are just this demo's filler — only `.tortus-cookie-banner`, `.tortus-cookie-accept`, and `.tortus-cookie-reject` are real platform hooks.
Restyling with the hooks
In the Custom CSS field you target the hooks directly — this is exactly what you
paste (it gets scoped to #tortus-cookie-banner-css for you):
Custom CSS is scoped to `#tortus-cookie-banner-css` automatically and can reference the site's `--color-*` design tokens, so it stays on-brand.
Reach for a token first (see Design tokens → Cookie banner); drop to the class hooks only when a token knob doesn't reach. This is the same scoped-Custom-CSS escape hatch that page-builder blocks expose via Convert to custom.
Full param table: Designer Handbook.