/* Shared styles for cookie consent + accessibility widget */ :root { --brand: #FF385C; } /* Cookie consent */ #cookie-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 9998; background: #222; color: #fff; padding: 14px 18px; display: none; align-items: center; gap: 14px; flex-wrap: wrap; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } #cookie-banner.show { display: flex; } #cookie-banner p { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.5; } #cookie-banner a { color: #ff9db4; } #cookie-banner button { background: var(--brand); color: #fff; border: 0; border-radius: 8px; padding: 10px 18px; font-weight: 600; cursor: pointer; } #cookie-banner .decline { background: transparent; border: 1px solid #777; color: #ddd; } /* Accessibility widget */ #a11y-btn { position: fixed; inset-inline-start: 16px; bottom: 16px; z-index: 9999; width: 56px; height: 56px; border-radius: 50%; border: 0; cursor: pointer; background: #2b2b2b; color: #fff; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.28); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } #a11y-btn:hover { transform: translateY(-2px); background: #000; box-shadow: 0 8px 22px rgba(0,0,0,.35); } #a11y-btn:focus-visible { outline: 3px solid #2b2b2b; outline-offset: 2px; } #a11y-panel { position: fixed; inset-inline-start: 16px; bottom: 84px; z-index: 9999; background: #fff; color: #222; border: 1px solid #ececec; border-radius: 16px; padding: 0; width: 268px; display: none; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,.22); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } #a11y-panel.show { display: block; } .a11y-head { display: flex; align-items: center; justify-content: space-between; background: #2b2b2b; color: #fff; padding: 12px 14px; } .a11y-head h4 { margin: 0; font-size: 15px; font-weight: 700; } .a11y-close { background: rgba(255,255,255,.2); border: 0; color: #fff; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; } .a11y-close:hover { background: rgba(255,255,255,.35); } .a11y-body { padding: 12px; } #a11y-panel .a11y-body button { display: block; width: 100%; text-align: start; margin: 6px 0; background: #f6f6f7; border: 1px solid #ececec; border-radius: 10px; padding: 11px 13px; cursor: pointer; font-size: 14px; color: #222; transition: background .12s ease; } #a11y-panel .a11y-body button:hover { background: #efeff0; } #a11y-panel a { display: inline-block; margin-top: 6px; color: var(--brand); font-size: 13px; text-decoration: none; font-weight: 600; } #a11y-panel a:hover { text-decoration: underline; } /* Accessibility modes applied to */ html.a11y-contrast { filter: contrast(1.35); background: #000; } html.a11y-contrast body { background: #000 !important; color: #fff !important; } html.a11y-links a { text-decoration: underline !important; font-weight: 700 !important; } html.a11y-readable, html.a11y-readable body { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: .3px; }