1/** 2 * v20260317 3 * Navigator Theme — Font System & Design Tokens 4 * ------------------------------------------------------------ 5 * Author: Tony de Araujo 6 * License: MIT (see LICENSE.txt in the Navigator theme) 7 * Since: 2026-02-01 8 * 9 * This file loads all font resources used by the theme and 10 * defines the global typography variables shared across the 11 * Navigator CSS architecture. 12 * 13 * Purpose 14 * ------- 15 * 1. Provide a single, predictable place where fonts are declared. 16 * 2. Expose core typography tokens (:root variables) that control 17 * the reading experience without affecting UI components. 18 * 3. Ensure fonts and variables load before any layout rules 19 * (styles_navigator.css, topbar_navigator.css, extras_navigator.css). 20 * 21 * Structure 22 * --------- 23 * • @font-face blocks load Atkinson Hyperlegible locally from /fonts. 24 * These declarations must remain at the top level and should not 25 * be renamed or moved into selectors. 26 * 27 * • :root contains the theme’s typography tokens: 28 * --font-reading → global font-family for the entire site 29 * --line-reading → baseline line-height (vertical rhythm) 30 * --font-size-reading → reading-panel scale (content only) 31 * 32 * These variables are referenced throughout the theme and can be 33 * safely adjusted to tune readability without breaking layout. 34 * 35 * Relationship to Other Files 36 * --------------------------- 37 * • styles_navigator.css → applies global font-family and line-height, 38 * and sets the reading-panel font size. 39 * 40 * • topbar_navigator.css → navigation system; inherits global font 41 * but does not override reading scale. 42 * 43 * • extras_navigator.css → optional components and refinements. 44 * 45 * • footer_navigator.css → (future) footer styling; will inherit 46 * global typography unless overridden. 47 * 48 * Editing Guidelines 49 * ------------------ 50 * • Adjust the values in :root to customize reading comfort. 51 * • Do not rename the variables; other files depend on them. 52 * • Do not modify @font-face unless updating the font files. 53 * • Keep this file loaded first in style.ini to preserve cascade order. 54 * 55 * • For color variables, site width, and sidebar width, visit style.ini 56 * located in the main theme folder. 57 * These values can be quickly adjusted or reset through the 58 * Admin Template Style Settings panel. 59 * 60 * This file is the foundation of Navigator's typographic identity. 61 * Treat it as the entry point to the theme’s design system. 62 */ 63 64 65/* Load style variables */ 66 67:root { 68 --font-reading: "Atkinson Hyperlegible", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 69 70 /* Typography rhythm token */ 71 --line-reading: 1.65; /* line-height for the entire theme */ 72 73 /* Reading panel scale token */ 74 75 --font-size-reading: 1.16rem; /* adjust content font-size while preserving UI proportions. */ 76 /*1.19rem;*/ 77 78 /* Note: visit styles.ini for color variables and site plus sidebar widths. 79 However, all those can be quickly adjusted or reset in the Admin Template Style Settings*/ 80 81 /* Monospace accent font for UI controls and technical glyphs */ 82 --navigator-mono: "JetBrains Mono", monospace; 83 84} 85 86 87/** Load the current theme fonts as declared above. 88 * The active font declaration resides in the styles_navigator.css file, 89 * which is the next file in hierarchy for the Navigator theme 90 */ 91 92/* ------------------------------------------------------------- 93 Typography: readable, humane, and accessible 94 ------------------------------------------------------------- 95 Atkinson Hyperlegible provides strong clarity for all readers, 96 including those with low vision. The base size (21px) and 97 line-height (1.55) create a comfortable reading rhythm. 98 ------------------------------------------------------------- */ 99 100/* Atkinson Hyperlegible — Regular */ 101@font-face { 102 font-family: "Atkinson Hyperlegible"; 103 src: url("../fonts/Atkinson-Hyperlegible-Regular-102a.woff2") format("woff2"); 104 font-weight: 400; 105 font-style: normal; 106 font-display: swap; 107} 108 109/* Bold */ 110@font-face { 111 font-family: "Atkinson Hyperlegible"; 112 src: url("../fonts/Atkinson-Hyperlegible-Bold-102a.woff2") format("woff2"); 113 font-weight: 700; 114 font-style: normal; 115 font-display: swap; 116} 117 118/* Italic */ 119@font-face { 120 font-family: "Atkinson Hyperlegible"; 121 src: url("../fonts/Atkinson-Hyperlegible-Italic-102a.woff2") format("woff2"); 122 font-weight: 400; 123 font-style: italic; 124 font-display: swap; 125} 126 127/* Bold Italic */ 128@font-face { 129 font-family: "Atkinson Hyperlegible"; 130 src: url("../fonts/Atkinson-Hyperlegible-BoldItalic-102a.woff2") format("woff2"); 131 font-weight: 700; 132 font-style: italic; 133 font-display: swap; 134} 135