/* * Consent banner. Accept and Decline are deliberately given equal visual * weight and equal step count, which CPRA symmetry-of-choice requires. * Color pairs are checked against WCAG AA: #9E492D on #F9F1EC is 5.46:1. */ .sll-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; background: #F9F1EC; color: #9E492D; font-family: 'Inter', system-ui, -apple-system, sans-serif; box-shadow: 0 -2px 18px rgba(0, 0, 0, 0.28); border-top: 1px solid rgba(158, 73, 45, 0.35); } .sll-consent[hidden] { display: none; } .sll-consent-inner { max-width: 60rem; margin: 0 auto; padding: 1.15rem 1.4rem; display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; flex-wrap: wrap; } .sll-consent-copy { flex: 1 1 22rem; min-width: 0; } .sll-consent h2 { margin: 0 0 0.35rem; font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: #9E492D; } .sll-consent p { margin: 0; font-size: 0.82rem; line-height: 1.5; color: #9E492D; } .sll-consent a { color: #9E492D; text-decoration: underline; } .sll-consent a:hover { text-decoration: none; } .sll-consent-actions { display: flex; gap: 0.6rem; flex: 0 0 auto; } .sll-consent-btn { font-family: inherit; font-size: 0.85rem; font-weight: 500; line-height: 1.2; padding: 0.65rem 1.5rem; border-radius: 6px; cursor: pointer; min-width: 8rem; min-height: 44px; transition: background-color 0.2s ease, color 0.2s ease; } .sll-consent-accept { background: #9E492D; color: #F9F1EC; border: 1px solid #9E492D; } .sll-consent-accept:hover { background: #83381F; border-color: #83381F; } .sll-consent-decline { background: transparent; color: #9E492D; border: 1px solid #9E492D; } .sll-consent-decline:hover { background: rgba(158, 73, 45, 0.1); } .sll-consent :focus-visible { outline: 3px solid #9E492D; outline-offset: 2px; } @media (max-width: 640px) { .sll-consent-inner { flex-direction: column; align-items: stretch; gap: 0.75rem; padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom)); } /* * Must reset the flex shorthand here. The base rule sets flex-basis to * 22rem, which is a WIDTH while the container is a row but becomes a * HEIGHT once this query switches it to a column, forcing a 352px-tall * block and a huge empty gap above the buttons. */ .sll-consent-copy { flex: 0 0 auto; } .sll-consent h2 { font-size: 0.88rem; margin-bottom: 0.25rem; } .sll-consent p { font-size: 0.76rem; line-height: 1.45; } .sll-consent-actions { width: 100%; gap: 0.5rem; } .sll-consent-btn { flex: 1 1 0; min-width: 0; padding: 0.55rem 0.75rem; font-size: 0.82rem; } } @media (prefers-reduced-motion: reduce) { .sll-consent-btn { transition: none; } } /* * Keep page content clear of the fixed banner while it is showing, so nothing * is obscured. The banner is inserted as the first child of , so it is a * preceding sibling of the page content and this needs no JavaScript. */ .sll-consent:not([hidden]) ~ .site-wrapper { padding-bottom: 11rem; } .sll-consent:not([hidden]) ~ .legal-wrap { padding-bottom: 12rem; } @media (min-width: 641px) { .sll-consent:not([hidden]) ~ .site-wrapper { padding-bottom: 8rem; } .sll-consent:not([hidden]) ~ .legal-wrap { padding-bottom: 9rem; } } /* Shared utility: content for screen readers only. */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }