.noscript-notice-toggle { position: absolute; opacity: 0; pointer-events: none; } .noscript-notice { position: fixed; inset-block-end: 1rem; inset-inline-end: 1rem; z-index: 1000; width: min(24rem, calc(100% - 2rem)); display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border-radius: 5px; background: #454857; color: white; font-family: var(--sofia-pro), Helvetica, Arial, sans-serif; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .noscript-notice svg { flex-shrink: 0; width: 1.25rem; height: 1.25rem; } .noscript-notice-content { flex: 1; } .noscript-notice-title { font-size: 1rem; font-weight: 600; line-height: 1.25; } .noscript-notice-description { margin-block-start: 0.5rem; font-size: 0.875rem; line-height: 1.5; opacity: 0.85; } .noscript-notice label { flex-shrink: 0; display: flex; margin: -0.25rem; padding: 0.25rem; border-radius: 3px; cursor: pointer; opacity: 0.85; } .noscript-notice label:hover { opacity: 1; } .noscript-notice-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .noscript-notice-toggle:focus-visible + .noscript-notice label { outline: 2px solid white; outline-offset: 2px; } .noscript-notice-toggle:checked + .noscript-notice { display: none; }