/* Brand theme for cookieconsent v3. Loaded AFTER vendor/cookieconsent/cookieconsent.css — that ordering matters: the vendor sheet sets these same custom properties on #cc-main, so at equal specificity whichever loads last wins. Do not fold this into styles.css, which is linked in and would therefore lose. Light surface on a dark site, deliberately: the banner needs to read as a system prompt rather than as page content. Accent and ink come from the Caminobits light-theme tokens so it is on-brand without being teal-on-teal. */ #cc-main { --cc-font-family: 'Inter', system-ui, -apple-system, sans-serif; --cc-modal-border-radius: 14px; --cc-btn-border-radius: 8px; --cc-z-index: 2147483000; --cc-bg: #F6FAFA; --cc-primary-color: #0A1417; --cc-secondary-color: #4A5C5C; --cc-link-color: #0B6E9E; --cc-separator-border-color: #DCE7E7; --cc-overlay-bg: rgba(10, 20, 23, .6); /* Accept: the light-theme teal. #2DD4BF is only 1.7:1 on this background and would be unreadable, so the darkened variant is used. */ --cc-btn-primary-bg: #0B7566; --cc-btn-primary-color: #FFFFFF; --cc-btn-primary-border-color: #0B7566; --cc-btn-primary-hover-bg: #095E52; --cc-btn-primary-hover-color: #FFFFFF; --cc-btn-primary-hover-border-color: #095E52; /* Reject: grey, filled — same size and shape as Accept, different fill. */ --cc-btn-secondary-bg: #E4EBEB; --cc-btn-secondary-color: #0A1417; --cc-btn-secondary-border-color: #D2DDDD; --cc-btn-secondary-hover-bg: #D6E0E0; --cc-btn-secondary-hover-color: #0A1417; --cc-btn-secondary-hover-border-color: #BFCECE; --cc-cookie-category-block-bg: #FFFFFF; --cc-cookie-category-block-border: #DCE7E7; --cc-cookie-category-block-hover-bg: #ECF3F3; --cc-cookie-category-block-hover-border: #BFD0D0; --cc-cookie-category-expanded-block-bg: #FFFFFF; --cc-cookie-category-expanded-block-hover-bg: #ECF3F3; --cc-section-category-border: #DCE7E7; --cc-footer-bg: #ECF3F3; --cc-footer-color: #4A5C5C; --cc-footer-border-color: #DCE7E7; --cc-toggle-on-bg: #0B7566; --cc-toggle-off-bg: #BFCECE; --cc-toggle-on-knob-bg: #FFFFFF; --cc-toggle-off-knob-bg: #FFFFFF; --cc-toggle-readonly-bg: #D2DDDD; --cc-toggle-readonly-knob-bg: #FFFFFF; --cc-toggle-readonly-knob-icon-color: #7C9090; --cc-toggle-enabled-icon-color: #FFFFFF; --cc-toggle-disabled-icon-color: #FFFFFF; --cc-webkit-scrollbar-bg: #BFCECE; --cc-webkit-scrollbar-hover-bg: #7C9090; } /* Compact banner: small and out of the way, bottom right. Only the first-visit banner (.cm) is shrunk; the preferences modal (.pm) keeps its default size because it carries the cookie tables. Padding sits on the inner blocks, never on `.cm` itself. The footer strip is full-bleed with its own background, so padding on the container would inset it and leave its square corners poking past the container radius. The footer gets its own matching bottom radius instead. Do NOT add `overflow: hidden` here to solve that. At high browser zoom the banner can grow taller than the space above the bottom edge, and hiding the overflow silently amputates the Accept/Reject buttons. `max-height` plus `overflow-y: auto` keeps them reachable instead. */ #cc-main .cm { max-width: 21rem; max-height: calc(100vh - 2rem); overflow-y: auto; } #cc-main .cm__body { padding: .9rem 1rem .75rem; } /* The library gives the title its own horizontal padding, which indents it relative to the description. Zeroed so both align to the body padding. */ #cc-main .cm__title { font-size: 1rem; margin-bottom: .35rem; padding: 0; } #cc-main .cm__desc { font-size: .78rem; line-height: 1.5; padding: 0; } #cc-main .cm__texts { padding: 0 0 .75rem; } /* The library draws a divider above the button row; removed so the compact banner reads as one block. */ #cc-main .cm__btns { padding: 0; border-top: 0; } #cc-main .cm__btn { font-size: .78rem; padding: .55rem .8rem; min-height: 0; /* Pinned rather than left to `normal`: the library's own rules give Accept a taller content box than Reject, so the two primary choices render at different heights. Equal prominence is a compliance requirement. */ line-height: 1.2; } /* Accept and Reject share a group, so lay it out as a row and the banner stays short. They keep identical size and position; only the fill differs. */ #cc-main .cm__btn-group { display: flex; flex-direction: row; align-items: stretch; gap: .5rem; } /* `flex: 1` alone leaves Accept taller than Reject: the library puts an auto margin and its own cross-axis alignment on these items, so Reject sits bottom-aligned at its natural height instead of stretching. Neutralising the margin and pinning align-self makes the two choices identical in size. */ #cc-main .cm__btn-group .cm__btn { flex: 1; align-self: stretch; margin: 0; height: auto; } /* Reject all takes the grey fill rather than the accent one. Same geometry as Accept — only the colour differs, so neither choice is made harder to find. */ #cc-main .cm__btn[data-role="necessary"] { background: var(--cc-btn-secondary-bg); color: var(--cc-btn-secondary-color); border-color: var(--cc-btn-secondary-border-color); } #cc-main .cm__btn[data-role="necessary"]:hover { background: var(--cc-btn-secondary-hover-bg); color: var(--cc-btn-secondary-hover-color); border-color: var(--cc-btn-secondary-hover-border-color); } /* Manage preferences reads as a link rather than a third button: it is a secondary route into detail, not one of the two primary choices. */ #cc-main .cm__btn[data-role="show"] { flex: 0 0 auto; align-self: center; background: none; border: 0; padding: .15rem 0; font-size: .72rem; font-weight: 500; color: var(--cc-secondary-color); text-decoration: underline; text-underline-offset: 2px; } #cc-main .cm__btn[data-role="show"]:hover { background: none; color: var(--cc-primary-color); } /* The group holding only that link should centre it, not stretch it. */ #cc-main .cm__btn-group:has([data-role="show"]) { justify-content: center; } #cc-main .cm__footer { font-size: .7rem; padding: .45rem 1rem; /* Matches --cc-modal-border-radius so the full-bleed strip follows the container's corners without needing overflow clipping. */ border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } @media (max-width: 640px) { #cc-main .cm { max-width: none; } } /* Without this, inline links inside the banner and modal copy read as plain bold text, so underline them to make them recognisable as links. */ #cc-main .cm__desc a, #cc-main .pm__section p a { text-decoration: underline; text-underline-offset: 2px; } /* Caminobits uses one family throughout, so the titles stay on Inter rather than switching to a display serif as michagency does. */ #cc-main .cm__title, #cc-main .pm__title { letter-spacing: -0.01em; }