/* Rate Ranger theme for vanilla-cookieconsent. * * The library ships ~47 --cc-* custom properties, so branding it needs no edits * to cookieconsent.css. That file stays vendor-pristine and can be replaced on * upgrade without losing this. Load AFTER it, so these overrides win. * * Reads the palette from /shared/tokens.css, which every page loads first. * System reference: .mikedesign/DESIGN.md * * ONE DELIBERATE RESTRAINT: "Accept all" is NOT the Lantern button. * * Lantern is the only colour in this system that means "act here", and putting * it on Accept while Reject stays quiet would use the brand's loudest colour to * nudge consent. consent.js already sets equalWeightButtons: true, so the two * choices are the same size; making them different colours would undo that on * purpose. On a product whose whole voice is "state the real number, never a * verdict", nudging here would contradict the brand it is meant to express. * * So the accent appears where nothing is being nudged: links, the toggle that * is switched on, and focus rings. * * NOTE: /shared/* is served with no Cache-Control, so editing this file means * bumping the ?v= on every that loads it. */ :root { --cc-font-family: var(--sans); --cc-bg: var(--white); --cc-primary-color: var(--ink); --cc-secondary-color: var(--muted); /* Card and button geometry, matching the system's radius scale. */ --cc-modal-border-radius: 16px; --cc-btn-border-radius: 10px; --cc-pm-toggle-border-radius: 999px; /* Both real choices are midnight-family and the same size. Accept is filled, Reject is outlined, so they are distinguishable without one shouting. */ --cc-btn-primary-bg: var(--midnight); --cc-btn-primary-color: var(--white); --cc-btn-primary-border-color: var(--midnight); --cc-btn-primary-hover-bg: var(--midnight-light); --cc-btn-primary-hover-color: var(--white); --cc-btn-primary-hover-border-color: var(--midnight-light); --cc-btn-secondary-bg: var(--white); --cc-btn-secondary-color: var(--ink); --cc-btn-secondary-border-color: var(--midnight); --cc-btn-secondary-hover-bg: var(--surface-warm); --cc-btn-secondary-hover-color: var(--ink); --cc-btn-secondary-hover-border-color: var(--midnight); /* Amber as text on a light ground: the Text Shade Rule's sibling, 4.7:1. */ --cc-link-color: var(--yellow-text); --cc-separator-border-color: var(--border); /* An enabled toggle is an active state, which is a use the system already allows the accent (alongside the active progress step). */ --cc-toggle-on-bg: var(--yellow); --cc-toggle-on-knob-bg: var(--white); --cc-toggle-off-bg: var(--muted); --cc-toggle-off-knob-bg: var(--white); --cc-toggle-enabled-icon-color: var(--midnight); --cc-toggle-disabled-icon-color: var(--white); --cc-toggle-readonly-bg: var(--border); --cc-toggle-readonly-knob-bg: var(--white); --cc-toggle-readonly-knob-icon-color: var(--muted); --cc-section-category-border: var(--border); --cc-cookie-category-block-bg: var(--surface); --cc-cookie-category-block-border: var(--border); --cc-cookie-category-block-hover-bg: var(--surface-warm); --cc-cookie-category-block-hover-border: var(--border); --cc-cookie-category-expanded-block-bg: transparent; --cc-cookie-category-expanded-block-hover-bg: var(--surface-warm); /* Midnight-tinted rather than neutral black, per the Warm Shadow Rule's reasoning: nothing on a light surface here is a neutral overlay. */ --cc-overlay-bg: rgba(12, 20, 37, 0.62); --cc-webkit-scrollbar-bg: var(--border); --cc-webkit-scrollbar-hover-bg: var(--muted); --cc-footer-bg: var(--surface-warm); --cc-footer-color: var(--muted); --cc-footer-border-color: var(--border); } /* The library's own selectors are id-qualified, so match that specificity. */ /* Two-layer warm elevation, the same shape the site's cards use. */ #cc-main .cm, #cc-main .pm { border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(12, 20, 37, 0.06), 0 18px 48px rgba(28, 38, 57, 0.16); } /* Serif for the headings: the One Serif Rule puts titles in the display face and leaves body, labels and buttons in the sans. */ #cc-main .cm__title, #cc-main .pm__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; font-size: 1.32rem; line-height: 1.25; } /* The hat, so the banner is recognisably Rate Ranger before a word is read. Inline as a data URI: no extra request, and it is the same technique the booking form already uses for its select chevron. */ #cc-main .cm__title::before { content: ""; display: inline-block; width: 1.15em; height: 1.15em; margin-right: 0.42em; vertical-align: -0.18em; background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%201000'%3E%3Cpath%20fill='%23F7BE1E'%20d='M847%20606c19-25%2054-30%2078-11s30%2054%2011%2078c-37%2049-95%2078-157%2078H221c-61%200-120-29-156-78-19-25-14-60%2011-78s60-13%2078%2011c16%2021%2041%2033%2067%2033h560c26%200%2051-12%2067-33zM592%20249c15-3%2031%201%2044%2011%2054%2041%2088%20112%2088%20184v134c0%203-2%205-5%205H282c-3%200-5-2-5-5V444c0-72%2033-143%2088-184%2012-10%2028-14%2044-11%2015%203%2029%2012%2037%2026%207%2011%2028%2022%2054%2022s47-11%2054-22c8-14%2022-23%2038-26z'/%3E%3C/svg%3E"); } #cc-main .cm__desc, #cc-main .pm__section-desc, #cc-main .cm__footer { font-family: var(--sans); line-height: 1.6; } #cc-main .cm__btn, #cc-main .pm__btn { font-family: var(--sans); font-weight: 600; border-width: 1px; border-style: solid; transition: background-color 0.15s ease, color 0.15s ease; } /* equalWeightButtons: true gives Accept AND Reject the same primary class, so without this they render as two identical midnight buttons: equal, but indistinguishable at a glance on a decision about someone's privacy. Reject becomes the outlined variant. Same size, same font weight, same 42px height, so neither is favoured; only the fill differs, which is what makes them readable as two different answers. data-role="all" is Accept, "necessary" is Reject, "show" is Manage. */ /* The consent banner uses .cm__btn and the preferences modal uses .pm__btn, so both need the rule or Reject stays a filled midnight button in the modal. */ #cc-main .cm__btn[data-role="necessary"], #cc-main .pm__btn[data-role="necessary"] { background: var(--white); color: var(--ink); border-color: var(--midnight); } #cc-main .cm__btn[data-role="necessary"]:hover, #cc-main .pm__btn[data-role="necessary"]:hover { background: var(--surface-warm); color: var(--ink); border-color: var(--midnight); } /* "Manage preferences" is not one of the two real choices, so it steps back to a quiet tertiary rather than competing with them. */ #cc-main .cm__btn[data-role="show"] { background: transparent; color: var(--muted); border-color: var(--border); } #cc-main .cm__btn[data-role="show"]:hover { background: var(--surface); color: var(--ink); border-color: var(--muted); } /* Scoped to what a person actually operates. A blanket `#cc-main :focus-visible` also matched the library's focus-trap anchor: a zero-height, full-width div the library puts at the top of the card and focuses when the banner opens. A ring around a zero-height box is a horizontal line, and the card's overflow:hidden clipped it at the corners, so it read as a stray gold border across the top. The banner and modal contain only buttons, links and checkboxes, so these three cover every real control and leave the invisible anchor alone. */ #cc-main button:focus-visible, #cc-main a:focus-visible, #cc-main input:focus-visible { outline: 2px solid var(--yellow-text); outline-offset: 2px; } #cc-main a { color: var(--yellow-text); text-underline-offset: 3px; } #cc-main a:hover { color: var(--yellow-text); text-decoration-color: var(--yellow); } /* 44px minimum tap height at phone widths, matching the button component. */ @media (max-width: 480px) { #cc-main .cm__btn, #cc-main .pm__btn { min-height: 44px; } } @media (prefers-reduced-motion: reduce) { #cc-main .cm__btn, #cc-main .pm__btn { transition: none; } }