/* Legacy Patents accessibility widget — UI styles for the launcher
* button + slide-up panel, plus the global feature classes the JS toggles
* on when a user enables a setting. */
#a11y-root {
position: fixed;
z-index: 9999;
pointer-events: none;
}
#a11y-root > * { pointer-events: auto; }
.a11y-launcher {
position: fixed;
right: 20px;
bottom: 20px;
width: 56px;
height: 56px;
border-radius: 50%;
background: #A67B73;
color: #FFFFFF;
border: 2px solid #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.30),
0 0 0 4px rgba(166, 123, 115, 0.18);
transition: transform 0.18s ease, box-shadow 0.22s ease;
z-index: 10000;
}
.a11y-launcher:hover,
.a11y-launcher:focus-visible {
transform: translateY(-2px) scale(1.04);
box-shadow:
0 14px 32px rgba(0, 0, 0, 0.40),
0 0 0 5px rgba(166, 123, 115, 0.28);
outline: none;
}
.a11y-launcher svg {
width: 28px;
height: 28px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
}
.a11y-launcher svg circle { fill: currentColor; stroke: none; }
.a11y-backdrop {
position: fixed;
inset: 0;
background: rgba(20, 20, 22, 0.45);
opacity: 0;
transition: opacity 0.22s ease;
z-index: 9998;
}
.a11y-backdrop.is-open { opacity: 1; }
.a11y-panel {
position: fixed;
right: 20px;
bottom: 88px;
width: 320px;
max-width: calc(100vw - 40px);
max-height: calc(100vh - 120px);
overflow: auto;
background: #FFFFFF;
color: #2B2B2D;
border-radius: 12px;
border: 1px solid rgba(43, 43, 45, 0.10);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.30);
font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.95rem;
z-index: 9999;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.22s ease, transform 0.22s ease;
}
.a11y-panel.is-open {
opacity: 1;
transform: translateY(0);
}
.a11y-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 18px;
border-bottom: 1px solid rgba(43, 43, 45, 0.08);
}
.a11y-panel-title {
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.15rem;
font-weight: 600;
margin: 0;
color: #2B2B2D;
}
.a11y-panel-close {
width: 32px;
height: 32px;
border-radius: 6px;
border: none;
background: transparent;
cursor: pointer;
color: #5B5B60;
display: flex;
align-items: center;
justify-content: center;
}
.a11y-panel-close:hover,
.a11y-panel-close:focus-visible {
background: rgba(43, 43, 45, 0.06);
color: #2B2B2D;
outline: none;
}
.a11y-panel-close svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.a11y-panel-body {
padding: 14px 18px 4px;
display: flex;
flex-direction: column;
gap: 10px;
}
.a11y-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border: 1px solid rgba(43, 43, 45, 0.10);
border-radius: 8px;
background: #FAF8F7;
}
.a11y-row-label {
font-weight: 600;
font-size: 0.92rem;
color: #2B2B2D;
}
.a11y-row-controls {
display: flex;
align-items: center;
gap: 8px;
}
.a11y-step-btn {
width: 32px;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(43, 43, 45, 0.18);
background: #FFFFFF;
cursor: pointer;
color: #2B2B2D;
display: flex;
align-items: center;
justify-content: center;
}
.a11y-step-btn:hover,
.a11y-step-btn:focus-visible {
border-color: #A67B73;
color: #A67B73;
outline: none;
}
.a11y-step-btn svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.a11y-step-readout {
font-variant-numeric: tabular-nums;
font-weight: 600;
font-size: 0.85rem;
min-width: 42px;
text-align: center;
color: #5B5B60;
}
.a11y-toggle {
display: grid;
grid-template-columns: 28px 1fr auto;
align-items: center;
gap: 12px;
padding: 10px 12px;
border: 1px solid rgba(43, 43, 45, 0.10);
border-radius: 8px;
background: #FFFFFF;
cursor: pointer;
text-align: left;
font: inherit;
color: #2B2B2D;
transition: border-color 0.15s ease, background 0.15s ease;
}
.a11y-toggle:hover,
.a11y-toggle:focus-visible {
border-color: #A67B73;
outline: none;
}
.a11y-toggle.is-on {
background: rgba(166, 123, 115, 0.10);
border-color: #A67B73;
}
.a11y-toggle-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
color: #A67B73;
}
.a11y-toggle-icon svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.a11y-toggle.is-on .a11y-toggle-icon svg path[fill="currentColor"] { fill: currentColor; }
.a11y-toggle-label {
font-weight: 600;
font-size: 0.93rem;
}
.a11y-toggle-state {
font-size: 0.78rem;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 999px;
background: rgba(43, 43, 45, 0.08);
color: #5B5B60;
}
.a11y-toggle.is-on .a11y-toggle-state {
background: #A67B73;
color: #FFFFFF;
}
.a11y-reset {
margin-top: 4px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
background: transparent;
border: 1px dashed rgba(43, 43, 45, 0.18);
border-radius: 8px;
cursor: pointer;
font: inherit;
font-size: 0.88rem;
font-weight: 600;
letter-spacing: 0.04em;
color: #5B5B60;
}
.a11y-reset:hover,
.a11y-reset:focus-visible {
border-color: #A67B73;
color: #A67B73;
outline: none;
}
.a11y-reset svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.a11y-panel-footer {
font-size: 0.75rem;
color: #8C8680;
padding: 10px 18px 16px;
margin: 0;
}
/* ─── FEATURE CLASSES applied to by the script ───
* These override the site's normal styles when a user opts in. !important
* is used liberally on purpose so they win against page-specific rules. */
html.a11y-no-animations *,
html.a11y-no-animations *::before,
html.a11y-no-animations *::after {
animation-duration: 0s !important;
animation-delay: 0s !important;
animation-iteration-count: 1 !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
scroll-behavior: auto !important;
}
html.a11y-underline-links a {
text-decoration: underline !important;
text-decoration-thickness: 2px !important;
text-underline-offset: 3px !important;
text-decoration-color: #A67B73 !important;
}
html.a11y-underline-links.a11y-high-contrast a {
text-decoration-color: #FFEB3B !important;
}
html.a11y-readable-font,
html.a11y-readable-font * {
font-family: 'Atkinson Hyperlegible', 'Verdana', 'Tahoma', Arial, sans-serif !important;
letter-spacing: 0.01em !important;
}
html.a11y-big-cursor,
html.a11y-big-cursor *,
html.a11y-big-cursor a,
html.a11y-big-cursor button,
html.a11y-big-cursor input,
html.a11y-big-cursor textarea,
html.a11y-big-cursor select {
cursor: url("data:image/svg+xml;utf8,") 4 4, auto !important;
}
html.a11y-big-cursor a,
html.a11y-big-cursor button,
html.a11y-big-cursor [role="button"],
html.a11y-big-cursor input[type="submit"],
html.a11y-big-cursor input[type="button"] {
cursor: url("data:image/svg+xml;utf8,") 8 4, pointer !important;
}
/* High-contrast mode — black background, white text, yellow links.
* Images get a subtle filter so they don't disappear or wash out. */
html.a11y-high-contrast,
html.a11y-high-contrast body {
background: #000000 !important;
color: #FFFFFF !important;
}
html.a11y-high-contrast *:not(.a11y-launcher):not(.a11y-launcher *):not(.a11y-panel):not(.a11y-panel *):not(.a11y-backdrop) {
background-color: transparent !important;
background-image: none !important;
color: #FFFFFF !important;
border-color: #FFFFFF !important;
box-shadow: none !important;
text-shadow: none !important;
}
html.a11y-high-contrast a:not(.a11y-launcher):not(.a11y-panel a) {
color: #FFEB3B !important;
text-decoration: underline !important;
}
html.a11y-high-contrast a:visited:not(.a11y-launcher):not(.a11y-panel a) {
color: #B388FF !important;
}
html.a11y-high-contrast button:not(.a11y-launcher):not(.a11y-panel *) {
background: #FFFFFF !important;
color: #000000 !important;
border: 2px solid #FFFFFF !important;
}
html.a11y-high-contrast input,
html.a11y-high-contrast textarea,
html.a11y-high-contrast select {
background: #000000 !important;
color: #FFFFFF !important;
border: 2px solid #FFFFFF !important;
}
html.a11y-high-contrast img,
html.a11y-high-contrast video {
filter: contrast(1.15) brightness(0.95) !important;
}
/* SVG icons in high contrast: force stroke/fill to white where they
* currently inherit. Patent agent site uses lots of inline outline SVGs. */
html.a11y-high-contrast svg:not(.a11y-launcher svg):not(.a11y-panel svg) {
stroke: #FFFFFF !important;
}
/* Keep the widget itself readable regardless of mode — re-assert its
* own colors so high-contrast doesn't blow it up. */
html.a11y-high-contrast .a11y-launcher {
background: #FFEB3B !important;
color: #000000 !important;
border-color: #000000 !important;
}
html.a11y-high-contrast .a11y-panel {
background: #000000 !important;
color: #FFFFFF !important;
border: 2px solid #FFFFFF !important;
}
html.a11y-high-contrast .a11y-panel * {
background: transparent !important;
color: #FFFFFF !important;
border-color: #FFFFFF !important;
}
html.a11y-high-contrast .a11y-toggle.is-on {
background: #FFEB3B !important;
color: #000000 !important;
}
html.a11y-high-contrast .a11y-toggle.is-on * {
color: #000000 !important;
}
/* Respect users who already prefer reduced motion in their OS — auto-on
* for no-animations, even without opening the widget. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* Mobile: panel takes more of the screen, launcher stays in corner. */
@media (max-width: 520px) {
.a11y-panel {
right: 12px;
left: 12px;
bottom: 84px;
width: auto;
}
.a11y-launcher {
right: 14px;
bottom: 14px;
width: 52px;
height: 52px;
}
}