.mo-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000; transform: translateY(100%); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; padding: 12px 20px; background: #ffffff; color: #1f2937; border-top: 1px solid #f1d6e1; box-shadow: 0 -6px 24px rgba(31, 41, 55, 0.12); font-family: "Open Sans", system-ui, -apple-system, sans-serif; } .mo-consent-visible { transform: translateY(0); opacity: 1; } .mo-consent-hidden { transform: translateY(100%); opacity: 0; } .mo-consent-text { margin: 0; /* The banner is injected into the page, so reset inherited site padding. */ padding: 0; flex: 0 1 auto; max-width: 760px; font-size: 13.5px; line-height: 1.4; } .mo-consent-link { color: #c01152; font-weight: 600; text-decoration: underline; white-space: nowrap; } .mo-consent-link:hover { color: #b3124f; } .mo-consent-actions { display: flex; gap: 10px; flex: 0 0 auto; } .mo-consent-btn { cursor: pointer; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .mo-consent-accept { background: #c8155a; color: #ffffff; } .mo-consent-accept:hover { background: #b3124f; } .mo-consent-decline { background: transparent; color: #1f2937; border-color: #d6dae0; } .mo-consent-decline:hover { border-color: #1f2937; } .mo-consent-btn:focus-visible { outline: 2px solid #f83f7f; outline-offset: 2px; } /* Mobile: text on its own line, buttons full-width below — still a slim bar. */ @media (max-width: 600px) { .mo-consent { gap: 8px 12px; padding: 10px 14px; justify-content: stretch; } .mo-consent-text { flex: 1 1 100%; max-width: none; } .mo-consent-actions { width: 100%; } /* Full-width pills at 8px padding came out ~33px tall — under the 44px touch minimum for the two decisions on the page a visitor must make before anything else. The link inside the copy gets a taller hit box the same way, without changing the line it sits on. */ .mo-consent-btn { flex: 1 1 auto; min-height: 44px; } .mo-consent-link { display: inline-block; padding: 4px 0; } } @media (prefers-reduced-motion: reduce) { .mo-consent { transition: none; } } /* Dark theme: the banner ships hard-coded light surfaces, so it reads as a glaring white bar on the dark ground. Remap surface/text/borders to the same warm-ink tokens brand.css uses (the toggle sets data-theme on ). */ html[data-theme="dark"] .mo-consent { background: #201e18; color: #e9e3d8; border-top: 1px solid rgba(233, 227, 216, 0.14); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .mo-consent-link { color: #f0619a; } html[data-theme="dark"] .mo-consent-link:hover { color: #f486ac; } html[data-theme="dark"] .mo-consent-decline { color: #e9e3d8; border-color: rgba(233, 227, 216, 0.28); } html[data-theme="dark"] .mo-consent-decline:hover { border-color: rgba(233, 227, 216, 0.6); }