/* Southeastern Services & More LLC — Accessibility Widget A floating button (bottom-left, opposite the bottom-right chat launcher) that opens a panel of reader controls. All page-level effects are applied as classes / inline styles on the element and persist via localStorage (key: sese_a11y_v1). Brand: Navy #131760 / #1B2080 · Amber #CF4520 */ .ses-a11y-fab, .ses-a11y-panel { font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; box-sizing: border-box; } .ses-a11y-panel *, .ses-a11y-panel *::before, .ses-a11y-panel *::after { box-sizing: border-box; } /* ── Floating launch button ── */ .ses-a11y-fab { position: fixed; left: 20px; bottom: 20px; z-index: 2147483600; width: 52px; height: 52px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center; background: #1B2080; color: #ffffff; cursor: pointer; box-shadow: 0 8px 24px rgba(7, 10, 40, 0.34); transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease; } .ses-a11y-fab:hover { background: #131760; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(7, 10, 40, 0.42); } .ses-a11y-fab:focus-visible { outline: 3px solid rgba(224, 96, 64, 0.65); outline-offset: 3px; } .ses-a11y-fab svg { width: 28px; height: 28px; display: block; } /* ── Panel ── */ .ses-a11y-panel { position: fixed; left: 20px; bottom: 84px; z-index: 2147483601; width: min(92vw, 340px); max-height: calc(100vh - 120px); overflow-y: auto; background: #ffffff; color: #111827; border: 1px solid rgba(17, 24, 39, 0.10); border-radius: 18px; box-shadow: 0 24px 70px rgba(7, 10, 40, 0.34); padding: 18px; display: none; transform-origin: bottom left; } .ses-a11y-panel.is-open { display: block; animation: ses-a11y-pop 0.16s ease-out; } @keyframes ses-a11y-pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Panel header ── */ .ses-a11y-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(17, 24, 39, 0.10); } .ses-a11y-panel-head h2 { margin: 0; font-family: 'Merriweather', Georgia, serif; font-size: 1.05rem; font-weight: 700; color: #131760; letter-spacing: -0.01em; } .ses-a11y-panel-head p { margin: 2px 0 0; font-size: 0.72rem; color: #6B7280; line-height: 1.4; } .ses-a11y-close { flex-shrink: 0; border: 0; width: 30px; height: 30px; border-radius: 999px; background: rgba(19, 23, 96, 0.08); color: #131760; cursor: pointer; font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease; } .ses-a11y-close:hover { background: rgba(19, 23, 96, 0.16); } /* ── Text size stepper ── */ .ses-a11y-textsize { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 14px 0 8px; padding: 10px 12px; border: 1px solid rgba(17, 24, 39, 0.12); border-radius: 12px; background: rgba(236, 237, 248, 0.45); } .ses-a11y-textsize-label { font-size: 0.82rem; font-weight: 700; color: #111827; } .ses-a11y-textsize-controls { display: flex; align-items: center; gap: 8px; } .ses-a11y-step { border: 1px solid rgba(19, 23, 96, 0.22); background: #ffffff; color: #131760; width: 34px; height: 34px; border-radius: 9px; font-size: 1rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s ease, border-color 0.15s ease; } .ses-a11y-step:hover { background: #ECEDF8; border-color: #1B2080; } .ses-a11y-step:disabled { opacity: 0.4; cursor: default; } .ses-a11y-step-value { min-width: 44px; text-align: center; font-size: 0.82rem; font-weight: 700; color: #131760; } /* ── Toggle option rows ── */ .ses-a11y-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .ses-a11y-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 11px 12px; border: 1px solid rgba(17, 24, 39, 0.12); border-radius: 12px; background: #ffffff; color: #111827; font: inherit; font-size: 0.78rem; font-weight: 600; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .ses-a11y-opt svg { width: 20px; height: 20px; color: #1B2080; } .ses-a11y-opt:hover { border-color: #1B2080; background: #ECEDF8; } .ses-a11y-opt[aria-pressed="true"] { border-color: #1B2080; background: #131760; color: #ffffff; box-shadow: 0 4px 14px rgba(19, 23, 96, 0.30); } .ses-a11y-opt[aria-pressed="true"] svg { color: #ffffff; } .ses-a11y-opt-state { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.65; } /* ── Reset ── */ .ses-a11y-reset { width: 100%; margin-top: 12px; padding: 10px; border: 1px solid rgba(207, 69, 32, 0.30); border-radius: 10px; background: rgba(207, 69, 32, 0.06); color: #B03518; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: background 0.15s ease; } .ses-a11y-reset:hover { background: rgba(207, 69, 32, 0.12); } .ses-a11y-foot { margin: 12px 0 0; text-align: center; font-size: 0.68rem; line-height: 1.4; color: #6B7280; } .ses-a11y-foot a { color: #1B2080; text-decoration: underline; text-underline-offset: 2px; } /* ═══════════════════════════════════════════ Global page effects (applied to ) ═══════════════════════════════════════════ */ /* High contrast — boost contrast of the whole canvas. Applied to the root element so fixed widgets keep working. */ html.ses-a11y-contrast { filter: contrast(1.42) saturate(1.12); } /* Highlight links — make every link unmistakable */ html.ses-a11y-links a { text-decoration: underline !important; text-underline-offset: 2px !important; outline: 2px solid #CF4520 !important; outline-offset: 2px !important; border-radius: 2px; } /* keep our own panel links calm */ html.ses-a11y-links .ses-a11y-panel a, html.ses-a11y-links .ses-privacy-banner a, html.ses-a11y-links .ses-privacy-modal a { outline: 0 !important; } /* Readable font — swap to a high-legibility sans everywhere */ html.ses-a11y-readable, html.ses-a11y-readable body, html.ses-a11y-readable :not(.ses-a11y-panel):not(.ses-a11y-panel *):not(.ses-a11y-fab) { font-family: Verdana, Tahoma, 'Segoe UI', Arial, sans-serif !important; letter-spacing: 0.01em; } /* Reduce motion — neutralize animations and transitions */ html.ses-a11y-motion *, html.ses-a11y-motion *::before, html.ses-a11y-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* ── Mobile: keep clear of the chat launcher (which sits bottom-right) ── */ @media (max-width: 860px) { .ses-a11y-fab { left: 16px; bottom: 16px; width: 48px; height: 48px; } .ses-a11y-fab svg { width: 26px; height: 26px; } .ses-a11y-panel { left: 12px; right: 12px; width: auto; bottom: 76px; } .ses-a11y-options { grid-template-columns: 1fr 1fr; } }