/** * @file * Themes the EU Cookie Compliance banner to the CycleIn design (round-12 F-024). * * The client moved cookie consent to the contrib EU Cookie Compliance module; * this restyles its markup (#sliding-popup / .eu-cookie-compliance-*) to the * Figma "Cookies banner": a top-of-page white band with the "Cookies on * CycleIn" heading, three GOV.UK-style paragraphs, two dark-teal solid buttons * (Accept / Reject) and a "View cookies" link. Copy lives in the module config * (editor-editable at /admin/config/system/eu-cookie-compliance), so nothing * editorial is hardcoded here. Uses --be-free C09 tokens. */ #sliding-popup.sliding-popup-top { /* Round-13 checklist r2: the Figma band is the light grey #f0f0f0 (measured), not white, and meets the lime header with no divider. */ background: var(--color-brand-white, #f0f0f0); box-shadow: none; } /* Round-13 checklist r2/r5: EU CC keeps #sliding-popup in the DOM after a consent choice (collapsed, translated off-screen) so it can re-open from the withdraw flow. With fixed_top_position now false the JS retracts it via a negative body margin, but the collapsed element could still flash a 1-2px grey sliver at the very top on reload ("dư line trắng trên góc"). The module adds `eu-cookie-compliance-popup-open` to only while the banner is actually open (and for the thank-you banner), so hiding the popup in every other state removes the residual with no layout shift and leaves the live banner untouched. */ body:not(.eu-cookie-compliance-popup-open) #sliding-popup { display: none; } #sliding-popup .eu-cookie-compliance-content, #sliding-popup .popup-content { align-items: center; background: transparent; box-sizing: border-box; color: var(--color-brand-black, #063335); display: flex; flex-wrap: wrap; gap: var(--space-24, 24px); justify-content: space-between; margin-inline: auto; max-inline-size: var(--layout-max-width, 1200px); padding: var(--space-24, 24px) var(--space-32, 32px); width: 100%; } #sliding-popup #popup-text { color: var(--color-brand-black, #063335); flex: 1 1 30rem; margin: 0; } #sliding-popup #popup-text h2 { color: var(--color-brand-black, #063335); font-family: var(--font-family-display, inherit); font-size: var(--type-h3-size, 25px); font-weight: var(--font-weight-black, 900); line-height: var(--type-h3-line-height, 1.3); margin: 0 0 var(--space-8, 8px); } #sliding-popup #popup-text p { color: var(--color-brand-black, #063335); font-size: var(--type-body-size, 18px); line-height: var(--type-body-line-height, 1.5); margin: 0 0 var(--space-8, 8px); max-inline-size: 62ch; } #sliding-popup #popup-text p:last-child { margin-block-end: 0; } #sliding-popup #popup-buttons { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-16, 16px); margin: 0; } #sliding-popup #popup-buttons button { background: var(--color-brand-black, #063335); border: 2px solid var(--color-brand-black, #063335); border-radius: var(--radius-pill, 1000px); color: var(--color-white, #fff); cursor: pointer; font-family: var(--font-family-base, inherit); font-size: var(--type-button-size, 20px); font-weight: var(--font-weight-bold, 700); line-height: var(--type-button-line-height, 1.2); min-block-size: var(--a11y-min-target, 44px); padding: var(--space-8, 8px) var(--space-24, 24px); text-decoration: none; white-space: normal; } #sliding-popup #popup-buttons button:hover { background: var(--color-brand-black-hover, #052e30); border-color: var(--color-brand-black-hover, #052e30); } /* "View cookies" (find-more) renders as a link, not a filled button. */ #sliding-popup #popup-buttons .eu-cookie-compliance-more-button, #sliding-popup .find-more-button { background: transparent; border: 0; border-radius: 0; color: var(--color-brand-black, #063335); font-weight: var(--font-weight-bold, 700); min-block-size: var(--a11y-min-target, 44px); padding-inline: var(--space-8, 8px); text-decoration: underline; text-underline-offset: 0.18em; } #sliding-popup #popup-buttons .eu-cookie-compliance-more-button:hover, #sliding-popup .find-more-button:hover { background: transparent; color: var(--color-brand-pink, #d41166); } /* The design has no floating "Cookie settings" withdraw tab — /cookies is the preferences surface and "View cookies" links to it. */ #sliding-popup .eu-cookie-withdraw-tab { display: none; } /* F-024b: the module runs in "categories" mode so /cookies can offer a real per-category Yes/No control, but the banner itself keeps the simple Accept/Reject band above — no per-category picker in the small popup. These per-category checkboxes stay in the DOM (hidden, not removed): the "Accept additional cookies" button reads them to decide which categories count as accepted, so deleting the markup would make Accept silently behave like Reject. */ #sliding-popup #eu-cookie-compliance-categories { display: none; } /* Post-consent "agreed" message keeps the same band + heading treatment. */ #sliding-popup.eu-cookie-compliance-status-1 .eu-cookie-compliance-content { justify-content: space-between; } @media (max-width: 767px) { #sliding-popup .eu-cookie-compliance-content, #sliding-popup .popup-content { padding: var(--space-16, 16px) var(--space-16, 16px); } #sliding-popup #popup-buttons { inline-size: 100%; } #sliding-popup #popup-buttons button { flex: 1 1 auto; justify-content: center; text-align: center; } }