/* GM Accessibility Toolbar — v1.0.0 All sizing in rem so the A+/A- control can scale it. */ /* ---- the strip cluster (rendered by [gm_accessibility_bar]) ---- */ .a11y{display:flex;align-items:center;gap:.1875rem} .a11y button{background:none;border:0;cursor:pointer;color:rgba(255,255,255,.66); font-size:.75rem;font-weight:600;padding:.3125rem .5625rem;border-radius:.375rem;line-height:1} .a11y button:hover{background:rgba(255,255,255,.12);color:#fff} .a11y button[aria-pressed="true"]{background:#D9A02B;color:#0A1B33} .a11y .sep{width:1px;height:.8125rem;background:rgba(255,255,255,.18);margin:0 .4375rem} /* ---- text-size steps: A+/A- toggle data-gm-fs on ---- Range matches the reference: down 2 (-2, -1), default (0), up 4 (1..4). */ html[data-gm-fs="-2"]{font-size:87.5%} html[data-gm-fs="-1"]{font-size:93.75%} html[data-gm-fs="1"]{font-size:106.25%} html[data-gm-fs="2"]{font-size:112.5%} html[data-gm-fs="3"]{font-size:125%} html[data-gm-fs="4"]{font-size:137.5%} /* ---- global filters (on so restore snippet can pre-apply) ---- */ html.gm-a11y-grey{filter:grayscale(1)} html.gm-a11y-invert{filter:invert(1) hue-rotate(180deg)} /* ---- body toggles ---- */ /* ---- CONTRAST MODE ----------------------------------------------------- Surface-aware. The site's defaults already pass WCAG AAA (white-on-navy is 17.3:1, navy-on-gold 7.4:1), so this SHARPENS contrast within each surface rather than flattening the design to white. Why not `body.gm-a11y-contrast *`: a blanket selector forced #0000EE links onto the navy header (~2.3:1) — worse than the default. Never style by wildcard when the page has both light and dark surfaces. Scoped with :not(#wpadminbar *) equivalents so the WP admin bar is spared. ------------------------------------------------------------------------ */ /* --- LIGHT SURFACES: force dark-on-light --- */ body.gm-a11y-contrast{background:#fff!important} body.gm-a11y-contrast p, body.gm-a11y-contrast li, body.gm-a11y-contrast span, body.gm-a11y-contrast td, body.gm-a11y-contrast th, body.gm-a11y-contrast dd, body.gm-a11y-contrast dt, body.gm-a11y-contrast figcaption, body.gm-a11y-contrast label, body.gm-a11y-contrast h1, body.gm-a11y-contrast h2, body.gm-a11y-contrast h3, body.gm-a11y-contrast h4, body.gm-a11y-contrast h5, body.gm-a11y-contrast h6{color:#000!important} body.gm-a11y-contrast a:not(.btn){color:#0000EE!important;text-decoration:underline!important} body.gm-a11y-contrast a:visited:not(.btn){color:#551A8B!important} /* Borders and dividers get definition */ body.gm-a11y-contrast .gm-card, body.gm-a11y-contrast .step, body.gm-a11y-contrast input, body.gm-a11y-contrast select, body.gm-a11y-contrast textarea{border-color:#000!important} /* --- DARK SURFACES: keep them dark, force light-on-dark --- These wrappers stay navy; text inside goes to pure white and links to bright gold. Add .gm-on-dark to any additional dark container you build. */ body.gm-a11y-contrast .statbar, body.gm-a11y-contrast .nav, body.gm-a11y-contrast .hero, body.gm-a11y-contrast .foot, body.gm-a11y-contrast .sec--navy, body.gm-a11y-contrast .gm-legal__escalation, body.gm-a11y-contrast .gm-on-dark{background:#0A1B33!important} body.gm-a11y-contrast.gm-a11y-contrast .statbar :is(p,span,li,b,strong,h1,h2,h3,h4,button), body.gm-a11y-contrast.gm-a11y-contrast .nav :is(p,span,li,b,strong,h1,h2,h3,h4), body.gm-a11y-contrast.gm-a11y-contrast .hero :is(p,span,li,b,strong,h1,h2,h3,h4), body.gm-a11y-contrast.gm-a11y-contrast .foot :is(p,span,li,b,strong,h1,h2,h3,h4), body.gm-a11y-contrast.gm-a11y-contrast .sec--navy :is(p,span,li,b,strong,h1,h2,h3,h4), body.gm-a11y-contrast.gm-a11y-contrast .gm-legal__escalation :is(p,span,li,b,strong,h1,h2,h3,h4), body.gm-a11y-contrast.gm-a11y-contrast .gm-on-dark :is(p,span,li,b,strong,h1,h2,h3,h4){ color:#fff!important; } /* Links on dark surfaces: bright gold, 9.0:1 on navy. NOT #0000EE. */ body.gm-a11y-contrast.gm-a11y-contrast .statbar a:not(.btn), body.gm-a11y-contrast.gm-a11y-contrast .nav a:not(.btn), body.gm-a11y-contrast.gm-a11y-contrast .hero a:not(.btn), body.gm-a11y-contrast.gm-a11y-contrast .foot a:not(.btn), body.gm-a11y-contrast.gm-a11y-contrast .sec--navy a:not(.btn), body.gm-a11y-contrast.gm-a11y-contrast .gm-legal__escalation a:not(.btn), body.gm-a11y-contrast.gm-a11y-contrast .gm-on-dark a:not(.btn){ color:#E8B33C!important;text-decoration:underline!important; } /* Dark-surface borders */ body.gm-a11y-contrast .statbar, body.gm-a11y-contrast .nav{border-color:#fff!important} /* --- BUTTONS: already 7.4:1 navy-on-gold. Leave them alone, just define the edge so they read as controls. --- */ body.gm-a11y-contrast.gm-a11y-contrast .btn--gold, body.gm-a11y-contrast.gm-a11y-contrast a.btn--gold{ color:#0A1B33!important; border:2px solid #0A1B33!important; } body.gm-a11y-contrast.gm-a11y-contrast .btn--navy, body.gm-a11y-contrast.gm-a11y-contrast a.btn--navy, body.gm-a11y-contrast.gm-a11y-contrast .btn--ghost{ color:#fff!important; border:2px solid #fff!important; } /* --- NEVER touch the WordPress admin bar --- Placed LAST and given a doubled state class so it wins the cascade. #wpadminbar is an ID (0,1,0,0) so these easily out-specify the rules above. --- */ body.gm-a11y-contrast #wpadminbar, body.gm-a11y-contrast #wpadminbar *{ color:#f0f0f1!important; text-decoration:none!important; } body.gm-a11y-contrast #wpadminbar a, body.gm-a11y-contrast #wpadminbar a *{ color:#f0f0f1!important; } /* --- Respect the OS-level setting automatically --- Users who have set "increase contrast" in their OS get the same treatment without touching the toggle. This is the direction the platform is going. */ @media (prefers-contrast: more){ a{text-decoration:underline} .gm-card,.step{border-color:#5A6B80} } body.gm-a11y-links a{outline:2px solid #000;background:#ff0;color:#000!important} body.gm-a11y-font *{font-family:Verdana,Tahoma,sans-serif!important;letter-spacing:.02em!important} body.gm-a11y-cursor,body.gm-a11y-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2 4 7-3 2-4-7-6 5z' fill='%230A1B33' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") 4 4,auto!important} body.gm-a11y-focus :focus{outline:4px solid #ff0!important;outline-offset:2px!important} /* ---- reading guide ---- */ .gm-reading-guide{position:fixed;left:0;right:0;height:2.5rem;z-index:99998; background:rgba(217,160,43,.16);border-top:2px solid #D9A02B;border-bottom:2px solid #D9A02B; pointer-events:none;display:none} body.gm-a11y-guide .gm-reading-guide{display:block} /* ---- slide-out panel ---- */ .gm-a11y-panel{position:fixed;top:0;right:0;bottom:0;width:20rem;max-width:90vw; background:#fff;z-index:99999;box-shadow:-.5rem 0 2rem rgba(0,0,0,.2); padding:1.5rem;overflow-y:auto;transform:translateX(100%);transition:transform 250ms ease} .gm-a11y-panel.is-open{transform:translateX(0)} .gm-a11y-panel[hidden]{display:none} .gm-a11y-panel__title{margin:0 0 .25rem;font-size:1.1rem;color:#0A1B33} .gm-a11y-panel__sub{font-size:.8rem;color:#63738A;margin:0 0 1.25rem} .gm-a11y-panel__close{position:absolute;top:1rem;right:1rem;background:none;border:0; cursor:pointer;font-size:1.5rem;line-height:1;color:#0A1B33} .gm-fs-row{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem; border:1px solid #E1E7EE;border-radius:.625rem;padding:.5rem} .gm-fs-row span{flex:1;font-size:.8rem;font-weight:600;color:#16202E} .gm-fs-row button{width:2.25rem;height:2.25rem;border:1px solid #E1E7EE;border-radius:.5rem; background:#fff;cursor:pointer;font-weight:700;color:#0A1B33} .gm-fs-row button:hover{border-color:#D9A02B} .gm-grid{display:grid;grid-template-columns:1fr 1fr;gap:.625rem} .gm-grid button{display:flex;flex-direction:column;align-items:center;gap:.375rem; padding:.875rem .5rem;border:1px solid #E1E7EE;border-radius:.625rem;background:#fff; cursor:pointer;font-size:.75rem;font-weight:600;color:#16202E;text-align:center;transition:all .2s} .gm-grid button:hover{border-color:#D9A02B} .gm-grid button[aria-pressed="true"]{border-color:#D9A02B;background:rgba(217,160,43,.1)} .gm-grid button svg{width:1.375rem;height:1.375rem;color:#0A1B33} .gm-reset{width:100%;margin-top:1rem;padding:.75rem;border:1px solid #0A1B33;border-radius:.625rem; background:#0A1B33;color:#fff;cursor:pointer;font-weight:700;font-size:.85rem} .gm-overlay{position:fixed;inset:0;background:rgba(10,27,51,.4);z-index:99997; opacity:0;pointer-events:none;transition:opacity .25s} .gm-overlay.is-open{opacity:1;pointer-events:auto} .gm-a11y-panel :focus-visible,.a11y :focus-visible{outline:3px solid #D9A02B;outline-offset:2px}