/*
* profi.md theme for vanilla-cookieconsent.
*
* ── Why these files live in static/ ──────────────────────────────────────────
* Next 5 / webpack 3 has no CSS loader, so `import 'x.css'` is impossible here.
* Both stylesheets are therefore served as plain s from pages/_document.js:
*
* static/cookieconsent/cookieconsent.css copied VERBATIM from
* node_modules/vanilla-cookieconsent/
* dist/cookieconsent.css @ 3.1.0.
* Re-copy it wholesale when the pinned
* dependency in package.json is bumped.
* static/cookieconsent/theme.css this file — ours, edit freely.
*
* The link order matters: the library sheet first, this one after.
*
* ── Why it is a global stylesheet ────────────────────────────────────────────
* The library renders its markup outside the React tree with its own, un-hashed
* class names, so styled-components could not target it.
*
* Port of business.999.md's cookieConsent.css with this app's tokens:
* brand colour is profi.md's #0074C0 (src/config/styles.js `colors.accent`),
* radii follow `sizes.borderRadius` (4px), and the font is stated explicitly —
* ProximaNova is applied by a wrapper
(components/common/Typography), not
* by , so `inherit` would land on the browser default here.
*
* SELECTOR DEPTH IS LOAD-BEARING: every rule below carries TWO classes after
* `#cc-main`. Flattening them to one class loses to the library's own
* `#cc-main .pm__section:first-child { padding: 0 }` and similar — keep the
* ancestor class in place when editing.
*/
#cc-main {
/* Typography — matches src/config/styles.js `fonts.primary`. */
--cc-font-family: 'ProximaNova', system-ui, sans-serif;
/* Surfaces & text */
--cc-bg: #fff;
--cc-primary-color: #333;
--cc-secondary-color: #757575;
--cc-link-color: #0074c0;
/* Primary buttons — "Accept all" AND "Accept only necessary" share this
(equalWeightButtons). */
--cc-btn-primary-bg: #0074c0;
--cc-btn-primary-color: #fff;
--cc-btn-primary-border-color: #0074c0;
--cc-btn-primary-hover-bg: #005e9c;
--cc-btn-primary-hover-color: #fff;
--cc-btn-primary-hover-border-color: #005e9c;
/* Secondary button — "Customize". A real, clearly tappable button (no dark
pattern / no faint text link). */
--cc-btn-secondary-bg: #f2f2f6;
--cc-btn-secondary-color: #333;
--cc-btn-secondary-border-color: #f2f2f6;
--cc-btn-secondary-hover-bg: #e3e3e8;
--cc-btn-secondary-hover-color: #333;
--cc-btn-secondary-hover-border-color: #e3e3e8;
/* Toggles. The OFF/read-only track is the light disabled grey (#d1d1d1) —
the knob is white (or #9b9b9b when read-only, see below), so it stays
visible against it. */
--cc-toggle-on-bg: #0074c0;
--cc-toggle-off-bg: #d1d1d1;
--cc-toggle-on-knob-bg: #fff;
--cc-toggle-off-knob-bg: #fff;
--cc-toggle-enabled-icon-color: #0074c0;
--cc-toggle-disabled-icon-color: #d1d1d1;
/* Read-only toggle (the always-on "necessary" category) */
--cc-toggle-readonly-bg: #d1d1d1;
--cc-toggle-readonly-knob-bg: #fff;
--cc-toggle-readonly-knob-icon-color: #d1d1d1;
/* Category blocks & separators */
--cc-cookie-category-block-bg: #fafbfd;
--cc-cookie-category-block-border: #f2f2f6;
--cc-cookie-category-block-hover-bg: #f2f2f6;
--cc-cookie-category-block-hover-border: #e3e3e8;
--cc-cookie-category-expanded-block-bg: #fff;
--cc-cookie-category-expanded-block-hover-bg: #f2f2f6;
--cc-separator-border-color: #f2f2f6;
--cc-section-category-border: #f2f2f6;
/* Footer (preferences modal) */
--cc-footer-bg: #fff;
--cc-footer-color: #757575;
--cc-footer-border-color: #f2f2f6;
/* Shape — `sizes.borderRadius` for the buttons, a softer box for the modal. */
--cc-btn-border-radius: 4px;
--cc-modal-border-radius: 8px;
--cc-pm-toggle-border-radius: 100px;
/* Stack above the topbar and the #__next-error overlay (z-index 30000). */
--cc-z-index: 2147483600;
}
/* --- Consent modal (first layer) ---------------------------------------- */
#cc-main .cm__texts {
padding-top: 20px;
}
#cc-main .cm__texts .cm__title {
font-size: 16px;
font-weight: 700;
line-height: 20px;
}
#cc-main .cm__texts .cm__desc {
font-size: 14px;
font-weight: 400;
line-height: 20px;
margin-top: 12px;
padding: 0 20px 20px;
}
#cc-main .cm__btns {
padding: 16px 20px 20px;
gap: 8px;
}
#cc-main .cm__btns .cm__btn-group {
margin-top: 0;
gap: 8px;
}
#cc-main .cm__btns .cm__btn {
font-size: 14px;
font-weight: 700;
line-height: 20px;
padding: 8px 16px;
margin-top: 0;
}
#cc-main .cm__btns .cm__btn--secondary {
border: 1px solid #e3e3e8;
}
/* --- Preferences modal (second layer) ----------------------------------- */
#cc-main .pm .pm__header {
padding: 20px 20px 16px;
}
#cc-main .pm .pm__title {
font-size: 16px;
font-weight: 700;
line-height: 20px;
}
/* No close (X): the user leaves via one of the buttons, so a choice is always
recorded. */
#cc-main .pm .pm__close-btn {
display: none;
}
#cc-main .pm .pm__body {
padding: 16px 0 0 !important;
}
/* Two classes on purpose — the library's `.pm__section:first-child` zeroes this
padding out at equal specificity, and it is declared first. */
#cc-main .pm .pm__section {
padding: 0 20px;
margin-bottom: 16px;
}
#cc-main .pm .pm__section-title {
font-size: 16px;
font-weight: 700;
line-height: 20px;
}
#cc-main .pm .pm__section-desc {
font-size: 14px;
font-weight: 400;
line-height: 20px;
}
#cc-main .pm .pm__section-toggles .pm__section--toggle {
border-bottom: 1px solid #f2f2f6;
border-radius: 0;
}
#cc-main
.pm
.pm__section-toggles
.pm__section--toggle:first-of-type
.pm__section-title {
border-top: 1px solid #f2f2f6;
}
#cc-main .pm .pm__section-toggles .pm__section-title {
background-color: #fff;
border-radius: 0;
border: none;
}
#cc-main .pm .pm__section-arrow {
background: transparent;
}
#cc-main .pm .section__toggle-wrapper {
right: 20px;
}
/* The library draws a check/cross glyph inside the knob; 999.md hides both and
uses a plain pill, so the knob travel below is hand-tuned to the 40px width. */
#cc-main .pm .toggle__icon-off,
#cc-main .pm .toggle__icon-on {
display: none;
}
#cc-main .pm .pm__section--toggle {
margin: 0;
}
#cc-main
.pm
.section__toggle:checked:disabled
~ .toggle__icon
.toggle__icon-circle {
background-color: #9b9b9b;
}
#cc-main .pm .section__toggle,
#cc-main .pm .section__toggle-wrapper,
#cc-main .pm .toggle__icon,
#cc-main .pm .toggle__label {
width: 40px;
}
#cc-main .pm .section__toggle:checked ~ .toggle__icon .toggle__icon-circle {
transform: translateX(17px);
}
#cc-main .pm .pm__section-desc-wrapper > :not(:last-child) {
border: none;
}
#cc-main .pm .pm__table-head > tr {
border: none;
}
#cc-main .pm .pm__section--toggle .pm__section-desc {
padding: 0 0 16px 13px;
}
#cc-main .pm .pm__section--toggle .pm__section-desc-wrapper {
border: none;
border-radius: 0;
padding-left: 42px;
padding-right: 20px;
padding-bottom: 16px;
}
#cc-main .pm .pm__section-toggles + .pm__section {
margin-top: 0;
margin-bottom: 0;
border: none;
padding: 16px 20px;
}
/* Deviation from 999.md: its `buttonmedium` (16px) + 24px padding makes the
three RU labels wrap onto two lines inside the ~690px box. Sized down and
held on one line so all three fit a single row; released again on narrow
screens, where the library stacks them anyway. */
#cc-main .pm .pm__btn {
font-size: 14px;
font-weight: 700;
line-height: 20px;
padding: 8px 16px;
border-radius: 4px;
white-space: nowrap;
}
#cc-main .pm .pm__btn--secondary {
border: 1px solid #e3e3e8;
}
@media screen and (max-width: 640px) {
#cc-main .pm .pm__btn {
white-space: normal;
}
#cc-main .pm .pm__table-tr {
padding: 16px 0;
}
}