/* =========================================================================
TopManager Online Shop - Accessibility: high-contrast mode + text size
-------------------------------------------------------------------------
A FRONT-OFFICE-VISITOR controlled accessibility skin, completely independent
of the shop's BO-selected colour theme (StyleTheme). It is turned on/off by
the visitor via the floating accessibility widget (bottom-left) and persisted
in a per-visitor cookie, so it works for anonymous marketplace clients and
carries no database / tenant state.
Applied on as:
.fo-high-contrast - master switch
.fo-high-contrast-dark - polarity: white text on black
.fo-high-contrast-light - polarity: black text on white
.fo-a11y-font-1 .. .fo-a11y-font-4- optional larger text steps
SAFETY: this file is ALWAYS loaded but INERT until the visitor turns the
mode on. Only the small, namespaced widget chrome (.tm-a11y-*) is always
present; every skin rule is scoped under html.fo-high-contrast, so a shop
whose visitors never switch renders byte-for-byte as before. The file is
linked LAST (after the media-queries bundle and the BO custom CSS) and uses
!important on the enforced properties, because an accessibility skin must
reliably win over themes, inline styles and shop custom CSS - legibility
must never be silently overridden.
========================================================================= */
/* =========================================================================
1. Floating accessibility widget (ALWAYS ON - normal-theme appearance)
========================================================================= */
.tm-a11y-fab {
position: fixed;
left: 18px;
bottom: 18px;
z-index: 13000;
width: 52px;
height: 52px;
padding: 0;
border: 2px solid #ffffff;
border-radius: 50%;
background: #1b1b1b;
color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tm-a11y-fab:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.tm-a11y-fab:focus-visible {
outline: 3px solid #ffbf00;
outline-offset: 3px;
}
.tm-a11y-fab svg {
width: 27px;
height: 27px;
display: block;
fill: currentColor;
}
.tm-a11y-fab.tm-a11y-active {
background: #ffffff;
color: #000000;
border-color: #000000;
}
.tm-a11y-panel {
position: fixed;
left: 18px;
bottom: 82px;
z-index: 13000;
width: 306px;
max-width: calc(100vw - 36px);
max-height: calc(100vh - 110px);
overflow-y: auto;
padding: 16px 18px 18px;
background: #ffffff;
color: #1b1b1b;
border: 2px solid #1b1b1b;
border-radius: 14px;
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
font-family: "Open Sans", Arial, sans-serif;
display: none;
}
.tm-a11y-panel.tm-a11y-open {
display: block;
}
.tm-a11y-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 14px;
}
.tm-a11y-title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: #1b1b1b;
}
.tm-a11y-close {
flex: 0 0 auto;
width: 34px;
height: 34px;
padding: 0;
border: none;
border-radius: 8px;
background: transparent;
color: #1b1b1b;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.tm-a11y-close:hover {
background: #ececec;
}
.tm-a11y-section {
margin-bottom: 16px;
}
.tm-a11y-section:last-child {
margin-bottom: 0;
}
.tm-a11y-section-label {
display: block;
margin-bottom: 8px;
font-size: 13px;
font-weight: 600;
color: #333333;
}
/* Contrast mode - three-state segmented control (Off / Dark / Light) */
.tm-a11y-modes {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
}
.tm-a11y-mode-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 62px;
padding: 8px 4px;
border: 2px solid #1b1b1b;
border-radius: 9px;
background: #ffffff;
color: #1b1b1b;
font-size: 12px;
font-weight: 600;
line-height: 1.15;
text-align: center;
cursor: pointer;
}
.tm-a11y-mode-btn:hover {
background: #f0f0f0;
}
.tm-a11y-swatch {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid #1b1b1b;
box-sizing: border-box;
}
.tm-a11y-mode-off .tm-a11y-swatch {
background: linear-gradient(135deg, #ffffff 0 50%, #000000 50% 100%);
}
.tm-a11y-mode-dark .tm-a11y-swatch {
background: #000000;
}
.tm-a11y-mode-light .tm-a11y-swatch {
background: #ffffff;
}
.tm-a11y-mode-btn[aria-pressed=true] {
background: #1b1b1b;
color: #ffffff;
}
.tm-a11y-mode-btn[aria-pressed=true] .tm-a11y-swatch {
border-color: #ffffff;
box-shadow: 0 0 0 2px #1b1b1b;
}
/* Text size - stepper (shown only while a contrast mode is active) */
.tm-a11y-font-section {
display: none;
}
.tm-a11y-panel.tm-a11y-mode-active .tm-a11y-font-section {
display: block;
}
.tm-a11y-font-row {
display: flex;
align-items: center;
gap: 10px;
}
.tm-a11y-font-btn {
flex: 0 0 auto;
width: 46px;
height: 46px;
padding: 0;
border: 2px solid #1b1b1b;
border-radius: 9px;
background: #ffffff;
color: #1b1b1b;
font-weight: 700;
cursor: pointer;
}
.tm-a11y-font-btn:hover:not(:disabled) {
background: #1b1b1b;
color: #ffffff;
}
.tm-a11y-font-btn:disabled {
opacity: 0.4;
cursor: default;
}
.tm-a11y-font-dec {
font-size: 15px;
}
.tm-a11y-font-inc {
font-size: 21px;
}
.tm-a11y-font-value {
flex: 1 1 auto;
text-align: center;
font-size: 14px;
font-weight: 700;
color: #1b1b1b;
}
.tm-a11y-foot {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid #d5d5d5;
text-align: center;
}
.tm-a11y-reset {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 8px;
border: none;
background: transparent;
color: #0b57d0;
font-size: 13px;
font-weight: 600;
text-decoration: underline;
cursor: pointer;
}
.tm-a11y-reset:hover {
color: #08409c;
}
.tm-a11y-close:focus-visible,
.tm-a11y-mode-btn:focus-visible,
.tm-a11y-font-btn:focus-visible,
.tm-a11y-reset:focus-visible {
outline: 3px solid #ffbf00;
outline-offset: 2px;
}
@media (max-width: 575.98px) {
.tm-a11y-fab {
width: 48px;
height: 48px;
left: 14px;
bottom: 14px;
}
.tm-a11y-panel {
left: 14px;
bottom: 72px;
width: calc(100vw - 28px);
}
}
/* =========================================================================
2. High-contrast palette (per polarity)
========================================================================= */
html.fo-high-contrast-dark {
--a11y-bg: #000000;
--a11y-fg: #ffffff;
--a11y-muted: #e2e2e2;
--a11y-surface: #000000;
--a11y-border: #ffffff;
--a11y-accent: #ffe100;
--a11y-accent-fg: #000000;
--a11y-focus: #ffffff;
}
html.fo-high-contrast-light {
--a11y-bg: #ffffff;
--a11y-fg: #000000;
--a11y-muted: #1a1a1a;
--a11y-surface: #ffffff;
--a11y-border: #000000;
--a11y-accent: #0b3d91;
--a11y-accent-fg: #ffffff;
--a11y-focus: #0b3d91;
}
/* Font-size steps (default = 1; the widget stepper adds a class). */
html.fo-high-contrast {
--a11y-font-scale: 1;
}
html.fo-high-contrast.fo-a11y-font-1 {
--a11y-font-scale: 1.15;
}
html.fo-high-contrast.fo-a11y-font-2 {
--a11y-font-scale: 1.3;
}
html.fo-high-contrast.fo-a11y-font-3 {
--a11y-font-scale: 1.45;
}
html.fo-high-contrast.fo-a11y-font-4 {
--a11y-font-scale: 1.6;
}
/* =========================================================================
3. Map the theme design tokens to the high-contrast palette, so every
token-driven component recolours automatically (same lever the colour
themes use), on top of the explicit reset below.
========================================================================= */
html.fo-high-contrast {
--tm-primary: var(--a11y-accent);
--tm-primary-dark: var(--a11y-accent);
--tm-primary-light: var(--a11y-accent);
--tm-secondary: var(--a11y-accent);
--tm-secondary-dark: var(--a11y-accent);
--tm-secondary-light: var(--a11y-accent);
--tm-accent: var(--a11y-accent);
--tm-accent-dark: var(--a11y-accent);
--tm-accent-light: var(--a11y-accent);
--tm-body-bg: var(--a11y-bg);
--tm-footer-bg: var(--a11y-bg);
--tm-anchor: var(--a11y-accent);
--tm-anchor-hover: var(--a11y-accent);
--tm-surface: var(--a11y-surface);
--tm-surface-alt: var(--a11y-surface);
--tm-text: var(--a11y-fg);
--tm-text-muted: var(--a11y-muted);
--tm-border: var(--a11y-border);
--tm-success: var(--a11y-fg);
--tm-danger: var(--a11y-fg);
--tm-warn: var(--a11y-fg);
--tm-info: var(--a11y-fg);
--tm-gradient-default: none;
--tm-fancy-bg: none;
--tm-submenu-photo-fade: transparent;
--tm-submenu-photo-fade-h: transparent;
}
/* =========================================================================
4. Universal reset - the readability guarantee.
EVERY element is flattened: no coloured/gradient/image background, no
shadows, foreground text forced to the palette colour, borders recoloured.
This is what makes text readable in BOTH polarities: whatever colour a
component hard-coded (a white label, a dark-grey caption, a brand-coloured
chip on a brand-coloured bar) is overridden to a guaranteed-contrast pair.
The invariant (this is the whole point of the theme): wherever text sits,
it must be readable. Text colour is forced to the palette foreground, so the
element's BACKGROUND must be flattened too - otherwise forced-dark text lands
on a surviving coloured background (e.g. a brand gradient, which turns navy
because every brand token maps to the accent). Hence BOTH background-colour
AND background-image are removed here, on every element.
Why it is safe + wins:
- :where(body *) is universal but specificity stays (0,1,1); !important
then beats every NON-important component rule no matter how specific,
so a hard-coded colour/gradient cannot survive.
- PHOTOGRAPHIC CONTENT is delivered as ![]()
//