/* ==== SafeJob accessibility toolbar ==== */ /* Original btn/panel definitions superseded by 1.29.0 side-placement block below. */ #sj-a11y-panel h2 { margin: 0 0 10px; font-size: 1.05em; color: #002147; } #sj-a11y-panel ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; } #sj-a11y-panel button { width: 100%; text-align: start; padding: 8px 10px; border-radius: 8px; cursor: pointer; border: 1px solid #c9d2de; background: #f6f8fb; font-size: .95em; } #sj-a11y-panel button[aria-pressed="true"] { background: #002147; color: #fff; border-color: #002147; } #sj-a11y-panel button:focus-visible { outline: 3px solid #D59F0F; outline-offset: 1px; } #sj-a11y-panel #sj-a11y-reset, #sj-a11y-panel #sj-a11y-close { width: auto; display: inline-block; } /* Feature classes applied to */ .sj-a11y-font-lg body { font-size: 112%; } .sj-a11y-font-xl body { font-size: 125%; } .sj-a11y-contrast body { background: #000 !important; color: #fff !important; } .sj-a11y-contrast body a { color: #ffd54d !important; } .sj-a11y-contrast .sj-card, .sj-a11y-contrast .sj-panel, .sj-a11y-contrast .site-header, .sj-a11y-contrast .site-footer { background: #111 !important; color: #fff !important; border-color: #666 !important; } .sj-a11y-links a { text-decoration: underline !important; outline: 1px dashed currentColor; outline-offset: 2px; } .sj-a11y-readable body { font-family: Arial, "Segoe UI", sans-serif !important; letter-spacing: .02em; } .sj-a11y-no-motion *, .sj-a11y-no-motion *::before, .sj-a11y-no-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* ==== Emergency quick access ==== */ .sj-emergency-btn { position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 9998; background: #b00020; color: #fff; border: 0; border-radius: 30px; padding: 12px 20px; font-weight: 700; font-size: 1em; cursor: pointer; box-shadow: 0 4px 14px rgba(176,0,32,.45); } .sj-emergency-btn:hover, .sj-emergency-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .sj-emergency-panel { position: fixed; inset: 0; z-index: 10001; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; } .sj-emergency-panel[hidden] { display: none; } .sj-emergency-inner { background: #fff; border-top: 6px solid #b00020; border-radius: 14px; padding: 24px; max-width: 480px; width: 100%; max-height: 80vh; overflow-y: auto; } .sj-emergency-inner h3 { margin-top: 0; color: #b00020; } .sj-emergency-inner ul { list-style: none; padding: 0; display: grid; gap: 12px; } .sj-emergency-call { font-weight: 700; font-size: 1.1em; } /* ==== New tab components ==== */ .sj-glossary dt { font-weight: 700; color: #002147; margin-top: 10px; } .sj-glossary dd { margin: 2px 0 0 0; padding-inline-start: 14px; border-inline-start: 3px solid #E9B437; } .sj-contact-emerg th, .sj-contact-emerg td { background: #fdeaea; } .sj-links-list { list-style: none; padding: 0; display: grid; gap: 8px; } .sj-subhead { margin: 18px 0 6px; color: #002147; } .sj-badge-ok { background: #e2f4e5; color: #1b5e20; } .sj-btn-secondary { background: #eef1f6; color: #002147; border: 1px solid #c9d2de; } /* Secondary hover: MUST override the generic .sj-btn:hover (which paints a dark-navy background) — otherwise navy text lands on a navy background and disappears. */ .sj-btn-secondary:hover, .sj-btn-secondary:focus-visible { background: #dbe3ee; color: #002147; border-color: #aebccf; } #sj-a11y-btn { position: fixed; inset-inline-start: 0; top: 50vh; transform: translateY(-50%); z-index: 400; display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #D59F0F, #b8890c); color: #06213f; border: 0; border-start-end-radius: 12px; border-end-end-radius: 12px; padding: 12px 10px; font-size: 20px; font-weight: 800; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); writing-mode: initial; } #sj-a11y-btn .sj-a11y-btn-label { font-size: 13px; max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width 0.25s ease; } #sj-a11y-btn:hover .sj-a11y-btn-label, #sj-a11y-btn:focus-visible .sj-a11y-btn-label { max-width: 70px; } #sj-a11y-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } #sj-a11y-panel { position: fixed; inset-inline-start: 12px; top: 50vh; transform: translateY(-50%); z-index: 401; background: #fff; color: #1d2327; border-radius: 14px; box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4); padding: 18px; width: min(300px, calc(100vw - 24px)); max-height: 80vh; overflow-y: auto; }