/* THC Core — Display & reading settings. 1. The header button and the panel (same 44px round style as the other header icons). 2. The effect rules: every choice is a data-thc-* attribute on , set before first paint. Colours use the theme's tokens (--thc-*, --wp--preset--color--*) with literal fallbacks. */ /* ---------- typefaces (self-hosted, SIL Open Font License; see assets/fonts/) ---------- */ @font-face { font-family: "THC Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "THC Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "THC Hyperlegible"; src: url("fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "THC OpenDyslexic"; src: url("fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "THC OpenDyslexic"; src: url("fonts/OpenDyslexic-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "THC OpenDyslexic"; src: url("fonts/OpenDyslexic-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* ---------- 1. button and panel ---------- */ :root { --thc-d-raised: var(--thc-surface-raised, var(--wp--preset--color--accent-5, #fcf8ef)); --thc-d-muted: var(--thc-surface-muted, var(--wp--preset--color--accent-4, #ece4d9)); --thc-d-border: var(--thc-border, var(--wp--preset--color--accent-6, #d9d0bc)); --thc-d-text: var(--thc-text, var(--wp--preset--color--contrast, #332d25)); --thc-d-leaf: var(--thc-leaf, var(--wp--preset--color--accent-1, #5e7d53)); --thc-d-deep: var(--thc-leaf-deep, var(--wp--preset--color--accent-3, #3f5c3b)); --thc-d-canvas: var(--thc-canvas, var(--wp--preset--color--base, #f7f1e4)); --thc-d-radius: 12px; } .thc-display__button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; flex: none; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; font: inherit; line-height: 0; } .thc-display__button:hover, .thc-display__button:focus-visible, .thc-display__button[aria-expanded="true"] { background: var(--thc-d-muted); } .thc-display__button:focus-visible { outline: 2px solid var(--thc-d-deep); outline-offset: 2px; } .thc-display__button .thc-display__svg { width: 22px; height: 22px; } .thc-display__button.is-custom::after { /* a small dot when settings differ from the defaults */ content: ""; position: absolute; right: 9px; bottom: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--thc-d-leaf); box-shadow: 0 0 0 2px var(--thc-d-canvas); } /* Phones: the round header button steps aside and a "Display & reading" entry appears in the hamburger menu. */ .thc-display__nav-item { display: none; } .thc-display__nav-link { display: inline-flex; align-items: center; gap: .5rem; background: transparent; border: 0; padding: .55rem .05rem; margin: 0; cursor: pointer; font: inherit; font-weight: 600; color: inherit; line-height: 1.25; min-height: 44px; } .thc-display__nav-link .thc-display__svg { width: 20px; height: 20px; flex: none; } .thc-display__nav-link:focus-visible { outline: 2px solid var(--thc-d-deep); outline-offset: 2px; } @media not all and (min-width: 600px) { .thc-site-header .thc-display__button--header { display: none; } .thc-display__nav-item { display: block; } } /* Inside Tutor's own bars (lesson player, student dashboard). */ .tutor-learning-header-inner .thc-display__button, .tutor-dashboard-header-right .thc-display__button { width: 40px; height: 40px; color: var(--tutor-icon-primary, var(--tutor-text-primary, inherit)); margin-inline-start: auto; } .tutor-learning-header-inner .thc-display__button:hover, .tutor-learning-header-inner .thc-display__button:focus-visible, .tutor-learning-header-inner .thc-display__button[aria-expanded="true"], .tutor-dashboard-header-right .thc-display__button:hover, .tutor-dashboard-header-right .thc-display__button:focus-visible, .tutor-dashboard-header-right .thc-display__button[aria-expanded="true"] { background: var(--tutor-surface-l2, rgba(127,127,127,.15)); } .tutor-learning-header-inner .thc-display__button + .tutor-learning-header-toggle-mobile { margin-inline-start: 0; } .tutor-dashboard-header-right .thc-display__button { margin-inline-start: 0; } .thc-display__panel { position: fixed; z-index: 100000; /* above Tutor's sticky bars (z 10–21) and the theme header (100) */ top: var(--thc-display-top, 84px); right: var(--thc-display-right, 1rem); width: min(23rem, calc(100vw - 2rem)); max-height: calc(100vh - var(--thc-display-top, 84px) - 1rem); overflow: auto; box-sizing: border-box; padding: .85rem 1rem .7rem; border-radius: var(--thc-d-radius); border: 1px solid var(--thc-d-border); background: var(--thc-d-raised); color: var(--thc-d-text); box-shadow: 0 10px 30px rgba(0,0,0,.14); font-family: var(--wp--preset--font-family--fira-sans, "Segoe UI", Arial, sans-serif); font-size: 0.95rem; line-height: 1.4; text-align: start; } .thc-display__panel[hidden] { display: none; } .thc-display__panel *, .thc-display__panel *::before, .thc-display__panel *::after { box-sizing: border-box; } .thc-display__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; } .thc-display__title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.2; font-family: inherit; color: inherit; } .thc-display__close { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; padding: 0; line-height: 0; } .thc-display__close:hover, .thc-display__close:focus-visible { background: var(--thc-d-muted); } .thc-display__close:focus-visible { outline: 2px solid var(--thc-d-deep); outline-offset: 2px; } .thc-display__form { margin: 0; } .thc-display__group { margin: 0 0 .55rem; padding: 0; border: 0; min-width: 0; } .thc-display__legend { padding: 0; margin: 0 0 .3rem; font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; opacity: .85; } .thc-display__seg { display: flex; flex-wrap: wrap; gap: .35rem; } .thc-display__radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .thc-display__opt { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: .35rem .8rem; border: 1px solid var(--thc-d-border); border-radius: 999px; background: var(--thc-d-canvas); color: inherit; cursor: pointer; font-weight: 600; font-size: .9rem; line-height: 1.2; user-select: none; } .thc-display__opt:hover { background: var(--thc-d-muted); } .thc-display__radio:checked + .thc-display__opt { background: var(--thc-d-deep); border-color: var(--thc-d-deep); color: #fff; } .thc-display__radio:focus-visible + .thc-display__opt { outline: 2px solid var(--thc-d-deep); outline-offset: 2px; } .thc-display__seg--text .thc-display__opt { padding-inline: .7rem; } .thc-display__opt--t90 { font-size: .8rem; } .thc-display__opt--t120 { font-size: 1rem; } .thc-display__opt--t140 { font-size: 1.12rem; } .thc-display__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin-top: .25rem; padding-top: .6rem; border-top: 1px solid var(--thc-d-border); } .thc-display__reset { min-height: 40px; padding: .35rem .9rem; border: 1px solid var(--thc-d-border); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; } .thc-display__reset:hover, .thc-display__reset:focus-visible { background: var(--thc-d-muted); } .thc-display__reset:focus-visible { outline: 2px solid var(--thc-d-deep); outline-offset: 2px; } .thc-display__note { margin: 0; font-size: .82rem; opacity: .8; } .thc-display__more { margin: .5rem 0 0; font-size: .88rem; } .thc-display__more a { color: var(--thc-d-deep); font-weight: 600; } @media (max-width: 600px) { .thc-display__panel { left: .75rem; right: .75rem; width: auto; top: .75rem; max-height: calc(100vh - 1.5rem); } } @media (prefers-reduced-motion: no-preference) { .thc-display__button, .thc-display__opt, .thc-display__reset, .thc-display__close { transition: background-color .15s ease; } } /* ---------- 2. effects ---------- */ /* Text size is set as an inline font-size on by the script (so it also wins over Tutor's own font-scale style). Nothing here. */ /* Spacing */ html[data-thc-spacing="relaxed"] :where(body) { line-height: 1.7; letter-spacing: .02em; word-spacing: .08em; } html[data-thc-spacing="relaxed"] :where(p, li, dd, td, th, blockquote, .tutor-learning-area-content) { line-height: 1.75; } html[data-thc-spacing="wide"] :where(body) { line-height: 1.9; letter-spacing: .06em; word-spacing: .16em; } html[data-thc-spacing="wide"] :where(p, li, dd, td, th, blockquote, .tutor-learning-area-content) { line-height: 2; margin-block-end: 1.4em; } /* Typeface: everything except icon fonts and code. !important so theme, Tutor and Woo rules all yield. */ html[data-thc-font="legible"] :where(body, body *:not([class*="icon"]):not(i):not(code):not(pre):not(kbd):not(samp)) { font-family: "THC Hyperlegible", "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif !important; } html[data-thc-font="dyslexic"] :where(body, body *:not([class*="icon"]):not(i):not(code):not(pre):not(kbd):not(samp)) { font-family: "THC OpenDyslexic", "OpenDyslexic", "Comic Sans MS", Verdana, sans-serif !important; } html[data-thc-font="dyslexic"] :where(body) { line-height: 1.65; } html[data-thc-font="dyslexic"] :where(h1, h2, h3, h4, h5, h6, .wp-block-heading) { line-height: 1.3; letter-spacing: 0; } /* High contrast: near-black on white, darker greens, solid borders, links underlined, stronger focus. */ html[data-thc-contrast="high"] { --thc-canvas: #ffffff; --thc-surface-raised: #ffffff; --thc-surface-muted: #efefef; --thc-border: #1a1a1a; --thc-text: #000000; --thc-leaf: #1f4a1b; --thc-leaf-deep: #12300f; --thc-sage: #cfe3c8; --thc-control-stroke: #000000; --thc-error: #8a0000; --wp--preset--color--base: #ffffff; --wp--preset--color--contrast: #000000; --wp--preset--color--accent-1: #1f4a1b; --wp--preset--color--accent-2: #cfe3c8; --wp--preset--color--accent-3: #12300f; --wp--preset--color--accent-4: #efefef; --wp--preset--color--accent-5: #ffffff; --wp--preset--color--accent-6: #1a1a1a; --wp--preset--color--canvas: #ffffff; --wp--preset--color--raised-surface: #ffffff; --wp--preset--color--muted-surface: #efefef; --wp--preset--color--border-divider: #1a1a1a; --wp--preset--color--primary-text: #000000; --wp--preset--color--leaf-accent: #1f4a1b; --wp--preset--color--deep-leaf-accent: #12300f; --wp--preset--color--soft-sage-accent: #cfe3c8; --wp--preset--color--control-stroke: #000000; --thc-shadow-subtle: none; --thc-shadow-lifted: none; } html[data-thc-contrast="high"] :where(body) { background: #fff; color: #000; } html[data-thc-contrast="high"] .thc-site-header { background: #fff; border-bottom: 2px solid #000; } html[data-thc-contrast="high"] :where(main, article, .entry-content, .wp-block-post-content, .tutor-learning-area-content, .thc-page, .thc-home) a:not(.wp-block-button__link):not(.thc-button-primary):not(.thc-button-secondary):not(.tutor-btn) { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: .08em; } html[data-thc-contrast="high"] :focus-visible { outline: 3px solid #000 !important; outline-offset: 2px; } html[data-thc-contrast="high"] :where(img, video, iframe) { filter: contrast(1.1); } /* Dark: the theme's tokens flipped to a warm dark palette. The theme header has a literal background, so it is restated; the logo (dark green on transparent) sits on a light pill so it stays readable. Tutor's own pages follow their data-tutor-theme attribute, which the script mirrors. */ html[data-thc-theme="dark"] { color-scheme: dark; --thc-canvas: #1b1915; --thc-surface-raised: #25221d; --thc-surface-muted: #302c26; --thc-border: #4a443a; --thc-text: #efe8da; --thc-leaf: #93b587; --thc-leaf-deep: #b4cfa8; --thc-sage: #5d6d55; --thc-control-stroke: #a79d88; --thc-error: #f0a49d; --wp--preset--color--base: #1b1915; --wp--preset--color--contrast: #efe8da; --wp--preset--color--accent-1: #93b587; --wp--preset--color--accent-2: #5d6d55; --wp--preset--color--accent-3: #b4cfa8; --wp--preset--color--accent-4: #302c26; --wp--preset--color--accent-5: #25221d; --wp--preset--color--accent-6: #4a443a; --wp--preset--color--canvas: #1b1915; --wp--preset--color--raised-surface: #25221d; --wp--preset--color--muted-surface: #302c26; --wp--preset--color--border-divider: #4a443a; --wp--preset--color--primary-text: #efe8da; --wp--preset--color--leaf-accent: #93b587; --wp--preset--color--deep-leaf-accent: #b4cfa8; --wp--preset--color--soft-sage-accent: #5d6d55; --wp--preset--color--control-stroke: #a79d88; --thc-shadow-subtle: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); --thc-shadow-lifted: 0 2px 6px rgba(0,0,0,.45), 0 14px 34px rgba(0,0,0,.4); } html[data-thc-theme="dark"], html[data-thc-theme="dark"] :where(body, .wp-site-blocks) { background: #1b1915; color: #efe8da; } html[data-thc-theme="dark"] .thc-site-header { background: rgba(37, 34, 29, .98); } html[data-thc-theme="dark"] .thc-site-brand .custom-logo { background: #f7f1e4; border-radius: 8px; padding: 3px 6px; box-sizing: border-box; } html[data-thc-theme="dark"] :where(.thc-site-footer, footer.wp-block-template-part) { background: #15130f; } html[data-thc-theme="dark"] :where(.wp-block-button__link, .thc-button-primary, .tutor-btn-primary) { color: #15130f; } html[data-thc-theme="dark"] :where(img):not(.custom-logo) { filter: brightness(.9); } html[data-thc-theme="dark"] .thc-display__radio:checked + .thc-display__opt { color: #15130f; } html[data-thc-theme="dark"] .thc-display__button.is-custom::after { box-shadow: 0 0 0 2px #25221d; } html[data-thc-theme="dark"] :where(input, textarea, select):not([type="checkbox"]):not([type="radio"]) { background: #25221d; color: #efe8da; border-color: #4a443a; } html[data-thc-theme="light"] { color-scheme: light; } /* Reduce motion: stop animations and smooth scrolling (also honoured via data-tutor-motion on Tutor pages). */ html[data-thc-motion="reduce"] *, html[data-thc-motion="reduce"] *::before, html[data-thc-motion="reduce"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } html[data-thc-motion="reduce"] :where(video[autoplay]) { display: none; } /* Links always underlined (in content areas; navigation and buttons are left alone). */ html[data-thc-links="underline"] :where(main, article, .entry-content, .wp-block-post-content, .tutor-learning-area-content, .thc-page, .thc-home, footer) a:not(.wp-block-button__link):not(.thc-button-primary):not(.thc-button-secondary):not(.tutor-btn):not(.thc-share__btn):not(.thc-header-icon):not(.thc-account-link) { text-decoration: underline !important; text-underline-offset: .15em; }