/** * XWK Font Scale — structural styles only. * Colors and typography are read from the site's existing CSS custom properties. * * The plugin applies data-xwk-font="1"…"5" on . * Map those steps to your utility classes or custom properties as needed. * * @package XWK_Access_Suite */ /* ── Font step overrides ──────────────────────────────────────────────────── */ :root { --xwk-font-scale: 1; } [data-xwk-font="1"] { --xwk-font-scale: 0.85; } [data-xwk-font="2"] { --xwk-font-scale: 0.925; } /* step 3 = default — attribute removed */ [data-xwk-font="4"] { --xwk-font-scale: 1.1; } [data-xwk-font="5"] { --xwk-font-scale: 1.25; } /* Apply the scale to the document body. Using font-size on :root so that all rem-based sizes pick it up automatically. Adjust this rule if your theme uses px-based sizing instead. */ [data-xwk-font] body { font-size: calc(1rem * var(--xwk-font-scale)); } /* ── Widget layout ───────────────────────────────────────────────────────── */ .xwk-font-scale { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .xwk-font-scale__buttons { display: inline-flex; align-items: center; gap: 0.25rem; } .xwk-font-scale__btn { /* Use site tokens for color; only set structural defaults here. */ display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; padding: 0.25rem 0.5rem; border: 1px solid var(--border-default, currentColor); border-radius: var(--radius-sm, 4px); background: var(--bg-secondary, transparent); color: var(--text-primary, inherit); cursor: pointer; font-family: inherit; line-height: 1; transition: opacity 0.15s; } .xwk-font-scale__btn:hover { background: var(--bg-hover, rgba(0, 0, 0, 0.06)); } .xwk-font-scale__btn:focus-visible { outline: 2px solid var(--focus-ring, Highlight); outline-offset: 2px; } .xwk-font-scale__btn:disabled { opacity: 0.4; cursor: not-allowed; } .xwk-font-scale__btn--reset { font-weight: 600; } .xwk-font-scale__btn--increase sup { font-size: 0.65em; color: var(--fg-positive, green); } .xwk-font-scale__btn--decrease sup { font-size: 0.65em; color: var(--fg-warning, #c00); }