/* ---------------------------------------------------------------------- Cookie consent sheet Plain CSS on purpose. This file is linked by common/consent.ejs, which every template renders through, so the sheet looks the same on every site whether or not the template compiles the shared component layer (the five legacy templates do not). No Tailwind, no @apply, no @layer: it is loaded unlayered, so it also outranks a template's layered utilities for the classes it owns. Built on the same vocabulary as the sticky mobile booking CTA in components.css: translucent surface, backdrop blur, safe-area padding, slide-up on an ease-out curve. That component is the house pattern for "a thing docked to the bottom of a phone". The bars that must clear this sheet do so through --cs-consent-height, which consent.js publishes. Those rules stay in components.css beside the bars. ---------------------------------------------------------------------- */ .cs-consent { position: fixed; z-index: 10000; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; /* The sheet is legal chrome: it should read identically on every site rather than inheriting a brand's display face. */ font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* Slide-up. `visibility` rides the transition so the hidden sheet is not reachable by keyboard while it is off-screen. */ transform: translateY(100%); visibility: hidden; transition: transform 0.28s ease-out, visibility 0s linear 0.28s; } .cs-consent.is-open { transform: translateY(0); visibility: visible; transition: transform 0.28s ease-out, visibility 0s; } /* A visitor who has asked their OS to reduce motion gets the sheet without the slide. */ @media (prefers-reduced-motion: reduce) { .cs-consent { transition: none; } } .cs-consent-sheet { /* Full-bleed surface below md. The max-width lives on the LAYERS instead, so the readable measure is preserved without the surface shrinking: a narrower surface under a full-width docked SEARCH bar leaves page content showing either side of it, which reads as a gap. */ width: 100%; box-sizing: border-box; padding: 20px; /* Clears the iPhone home indicator, which the old banner sat underneath. Same expression the booking CTA uses. */ padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); /* Rounded top corners and a hairline: a sheet, not a slab. On a phone it spans the width; above md it detaches into a floating card. */ border-top-left-radius: 16px; border-top-right-radius: 16px; /* The fallback MUST be comma-separated. Legacy templates never put the colour-scheme class on , so the -rgb token is absent there and the fallback is what renders. `rgba(255 255 255, 0.97)` mixes the modern space syntax with a legacy comma alpha, which is invalid, and an invalid background computes to transparent: the sheet shipped see-through on every legacy site (cestbonrentals.com, 2026-09-08). */ background: rgba(var(--surface-background-color-rgb, 255, 255, 255), 0.97); color: var(--surface-text-color, #111); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18); } /* Holds the readable measure while the surface spans the viewport. */ .cs-consent-layer { max-width: 34rem; margin-inline: auto; } /* 768px, not 640: the mobile bars this sheet has to coexist with are `md:hidden`, so they exist below 768. Detaching into a centred card while a full-width SEARCH bar is still docked above leaves page content showing beside and below the card: the bar spans the viewport, the card does not. The sheet stays full-bleed for exactly as long as those bars exist, then becomes a floating card once it has the bottom edge to itself. */ @media (min-width: 768px) { .cs-consent-sheet { max-width: 34rem; margin: 0 16px 16px; border-radius: 16px; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); } } .cs-consent-title { /* An

picks up the template's heading role (refined22 rendered this in its serif display face), so the sheet stops reading as chrome and starts reading as the site's own voice. It is legal furniture: it should look the same everywhere. / font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: normal; text-transform: none; line-height: 1.3; margin: 0 0 6px; color: inherit; } .cs-consent-text { font-size: 14px; line-height: 1.45; margin: 0 0 16px; color: inherit; opacity: 0.85; } .cs-consent-actions { display: flex; gap: 10px; } / The Global Privacy Control notice. Same voice as the body text, set apart only by a hairline so it reads as a status line, not as a third option. / .cs-consent-note { font-size: 13px; line-height: 1.45; margin: 0 0 12px; padding: 8px 10px; border-left: 2px solid currentColor; opacity: 0.85; } / Locked under GPC: the boxes show the state that is in force and cannot be flipped. Dimmed rather than hidden, so the visitor sees what is off. / .cs-consent-check:disabled { cursor: not-allowed; opacity: 0.5; } / Both choices are the same element with the same metrics. Only the accent differs: equal prominence between accept and decline is required in the EU, and unequal styling is what regulators have actually fined over. / .cs-consent-btn { flex: 1 1 0%; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2; / 48px total: the comfortable-touch-target floor. / padding: 14px 16px; min-height: 48px; border-radius: 10px; border: 1px solid transparent; text-align: center; transition: opacity 0.15s ease-out; } .cs-consent-btn:hover { opacity: 0.88; } .cs-consent-btn--primary { / The site's own button tokens, so Accept reads as this brand's button rather than generic chrome. Fallbacks keep it legible on a template that has not set them. / background: var(--primary-button-background-color, #111); color: var(--primary-button-text-color, #fff); } .cs-consent-btn--secondary { background: transparent; color: inherit; / currentColor at low alpha reads as a border on a light or a dark surface without knowing which one this template uses. / border-color: color-mix(in srgb, currentColor 28%, transparent); } .cs-consent-manage { width: 100%; cursor: pointer; font: inherit; font-size: 13px; background: transparent; border: 0; color: inherit; opacity: 0.72; padding: 12px 0 0; min-height: 44px; text-align: center; text-decoration: underline; text-underline-offset: 0.25em; } .cs-consent-manage:hover { opacity: 1; } .cs-consent-option { display: flex; align-items: center; justify-content: space-between; cursor: pointer; gap: 16px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); } / The last row's rule would otherwise draw a line immediately above the buttons, reading as a divider that belongs to them. / .cs-consent-option:last-of-type { border-bottom: 0; } .cs-consent-option-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cs-consent-option-name { font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; } .cs-consent-option-note { font-size: 12px; line-height: 1.35; opacity: 0.7; } .cs-consent-always-on { font-size: 12px; font-weight: 600; opacity: 0.55; white-space: nowrap; } .cs-consent-check { cursor: pointer; flex-shrink: 0; / Native checkbox, scaled to a comfortable size. accent-color paints it in the site's own colour with no custom control to reimplement. */ width: 20px; height: 20px; accent-color: var(--primary-button-background-color, #111); } .cs-consent .cs-consent-actions:not(:first-child) { margin-top: 16px; }