/* ───────────────────────────────────────────────────────────────────────── resal-consent.css — Resal brand override for vanilla-cookieconsent v3.1.0 Load this AFTER vendor/cookieconsent.css. vanilla-cookieconsent ships neutral grey defaults. We map its CSS vars to Resal's core brand: brand-blue #0E43F1 primary, navy ink, off-white secondary. NOT loyalty purple — purple is reserved for the Loyalty accent. ───────────────────────────────────────────────────────────────────────── */ #cc-main { --cc-font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --cc-bg: #ffffff; --cc-primary-color: #0a0a2e; /* navy / text-primary */ --cc-secondary-color: #4a4a6a; /* text-secondary */ /* Primary CTA — Resal brand-blue */ --cc-btn-primary-bg: #0e43f1; --cc-btn-primary-color: #ffffff; --cc-btn-primary-border-color: #0e43f1; --cc-btn-primary-hover-bg: #0b35c1; --cc-btn-primary-hover-color: #ffffff; --cc-btn-primary-hover-border-color: #0b35c1; /* Secondary CTA — soft off-white */ --cc-btn-secondary-bg: #f5f5f7; --cc-btn-secondary-color: #0a0a2e; --cc-btn-secondary-border-color: #e0e0e8; --cc-btn-secondary-hover-bg: #ebebef; --cc-btn-secondary-hover-color: #0a0a2e; --cc-btn-secondary-hover-border-color: #d4d4dc; /* Toggle (analytics switch) */ --cc-toggle-bg-off: #d4d4dc; --cc-toggle-bg-on: #0e43f1; --cc-toggle-bg-readonly: #b8b8c4; --cc-toggle-knob-bg: #ffffff; --cc-toggle-knob-icon-color: #ffffff; /* Surfaces */ --cc-cookie-category-block-bg: #f5f5f7; --cc-cookie-category-block-bg-hover: #ebebef; --cc-cookie-category-block-border: #e0e0e8; --cc-cookie-category-expanded-block-bg: #ffffff; --cc-cookie-category-expanded-block-hover-bg: #f5f5f7; --cc-section-border: #e0e0e8; --cc-overlay-bg: rgba(10, 10, 46, 0.55); --cc-link-color: #0e43f1; /* Geometry — matches site's rounded-xl */ --cc-modal-border-radius: 0.75rem; --cc-btn-border-radius: 0.5rem; --cc-pm-section-border-radius: 0.5rem; } /* Slight elevation on the consent box itself */ #cc-main .cm, #cc-main .pm { box-shadow: 0 12px 32px -8px rgba(10, 10, 46, 0.18), 0 4px 12px -4px rgba(10, 10, 46, 0.1); } /* Force breathing room between equal-weight buttons. Vanilla-cookieconsent v3 lays them out in a CSS grid with no `gap`, so adjacent buttons touch edge-to-edge — most visible in RTL where the primary + secondary land next to each other. */ #cc-main .cm__btn-group, #cc-main .pm__btn-group { gap: 0.5rem; } /* Focus rings — brand-blue, accessible */ #cc-main button:focus-visible, #cc-main a:focus-visible, #cc-main input:focus-visible { outline: 2px solid #0e43f1; outline-offset: 2px; } /* RTL polish — vanilla-cookieconsent reads `dir` from , this just refines spacing for Arabic body copy. */ html[dir="rtl"] #cc-main { text-align: right; } /* ── Floating "Cookie preferences" pill ────────────────────────────── Bottom-corner re-open trigger, shown only after the initial consent decision. Always rendered on the side opposite the consent banner so they never visually collide on first paint. */ #cc-float { position: fixed; bottom: 1rem; /* inset-inline-start: 1rem; */ inset-inline-end: 1rem; z-index: 2147483646; /* one below vanilla-cookieconsent's modal */ display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(10, 10, 46, 0.08); border-radius: 9999px; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #0a0a2e; box-shadow: 0 6px 18px -4px rgba(10, 10, 46, 0.18), 0 2px 6px -2px rgba(10, 10, 46, 0.1); cursor: pointer; transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background-color 180ms ease, color 180ms ease, box-shadow 180ms ease; } #cc-float:hover { background: #0e43f1; color: #ffffff; transform: translateY(-2px); box-shadow: 0 10px 24px -6px rgba(14, 67, 241, 0.45), 0 4px 10px -2px rgba(14, 67, 241, 0.25); } #cc-float:focus-visible { outline: 2px solid #0e43f1; outline-offset: 3px; } #cc-float[hidden] { display: none; } @media (prefers-reduced-motion: reduce) { #cc-float { transition: none; } #cc-float:hover { transform: none; } } /* Fix position */ html[dir="rtl"] #cc-main .cm--right { right: unset; inset-inline-end: var(--cc-modal-margin); }