# tlig_css The TLIG stylesheet rebuilt on SASS tokens and Vite, as a replacement for `Avada-Child-Theme/css/tlig_en.css` (7,082 lines) and the compiled Avada `style.css` it fights with. This first pass covers the common foundation only: fonts, colour, type scale, links, buttons, form fields and the footer. Page-specific styling (messages, bookstore, menus, the wood and scroll backgrounds) is not here yet. ## Commands npm install npm run dev # demo with live reload, at localhost:5173 npm run preview # demo as a static page, at localhost:4173 npm run build # the deliverable: dist/tlig.css + dist/fonts/ There is no way to open `src/index.html` from disk — it is an ES module that imports `.scss`, so it needs one of the two servers above. `file://` gives a blank page. **`npm run dev`** compiles the SASS in memory and injects the CSS through JavaScript. Fast, hot-reloading, and how you work. One caveat: because the CSS arrives after first paint, anything with a `transition` animates up from its unstyled state, so for a few milliseconds links are browser-blue and buttons are nearly transparent. That is a dev-server artifact, not the stylesheet. **`npm run preview`** builds the demo to `demo-dist/` and serves it. The page there loads the compiled stylesheet through a real `` in ``, so it paints once, exactly as a browser will on the real site. Use this when judging how something actually looks, or when screenshotting. **`npm run build`** emits only the deliverable — `dist/tlig.css` and the fonts, no HTML and no demo markup. The demo is built from `src/index.html` and the deliverable from `src/main.js`, so demo chrome cannot reach `dist`. ## The demo page `npm run dev` serves `src/index.html`: the foundation rendered on the real ground, inside the wood background and the papyrus scroll, with the real footer component at the bottom. It shows the type scale, every link and button variant, the dark-ground mechanism, and a colour grid generated at runtime from the `--tlig-color-*` properties the stylesheet actually emits — so the grid cannot drift from the code. The toolbar has three controls: - **Script** — switches the sample heading between Latin, Hungarian, Cyrillic and Greek. No CSS changes when you do; the browser picks the font file by codepoint. Also addressable as `?script=bg` for linking or screenshotting. Greek is included deliberately: no papyrus cut exists for it, so it shows the fallback face honestly. - **Show boxes** — outlines each component so the structure is visible. - A live viewport width and the active breakpoint. The wood and the scroll are **demo chrome**, in `src/demo/demo.scss`, not in the stylesheet: page layout is still on the to-do list below, and a demo is not the place to quietly ship it. The demo is not a build input, so none of it can reach `dist/tlig.css` — the build is checked for exactly that. The frame is there anyway because a foundation only tells the truth on the ground it has to work on. Brown ink at 86% looks arbitrary on white and obviously right on papyrus. ## Layout src/sass/ abstracts/ compile-time only; emits no CSS _palette.scss every literal colour the live site uses _tokens.scss semantic tokens: what a colour is *for* _functions.scss token accessors _mixins.scss media queries, type, patterns base/ _root.scss emits every token as a CSS custom property _fonts.scss @font-face _reset.scss _typography.scss _links.scss components/ _button.scss _field.scss _footer.scss src/fonts/ papyrus-bold (4 scripts) and Lato, self-hosted src/demo/ demo page chrome and behaviour — never built src/index.html the demo page ## The three rules that replace the jigsaw **One source of truth per value.** No rule writes a hex code. `_palette.scss` holds the literals, `_tokens.scss` names them by role, `base/_root.scss` emits them as `--tlig-*` custom properties, and every rule reads a token. `#482020` appears 74 times in `tlig_en.css`; it appears once here. **Context re-points tokens, it does not restate rules.** The `dark-ground` mixin re-points nine custom properties; `.site-footer` and `.on-dark` both include it and declare no colours of their own. Every link, heading and button inside them is then correct — where the live CSS needs 24 id selectors to say the same thing. The list of what "dark" means exists once, so the two cannot drift: building the demo caught exactly that bug, an `.on-dark` that re-pointed the links but not `--tlig-color-heading`, rendering a heading dark-brown on dark-brown. **Specificity goes one way.** Layer order in `main.scss` is tokens → base → components, and nothing later needs to outrank anything earlier. Every `!important` in the build — four of them — is in the single `prefers-reduced-motion` block, where overriding author animation is the point. There are none anywhere else. `tlig_en.css` has 518. ## What the tokens were taken from Values are the ones the site renders today, not new choices: | Token | Value | Source | |---|---|---| | `--tlig-color-page-ink` | `rgba(72,32,32,0.86)` | Avada `--body_typography-color` | | `--tlig-color-link` | `#810008` | Avada `--link_color` | | `--tlig-color-link-hover` | `#ca4a1f` | `tlig_en.css` global `a:hover` | | `--tlig-color-heading` | `#482020` | Avada `--h1_typography-color` | | `--tlig-color-heading-message` | `#7a0012` | `tlig_en.css` global `h2` | | `--tlig-color-footer-ink` | `#fbefc9` | `tlig_en.css` `#footer-container` | | `--tlig-color-button-bg` | `#8f0b06` | `tlig_en.css` `.btnSubmitNewsletter` | | `--tlig-size-base` | `18px` | Avada `--body_typography-font-size` | Two deliberate departures, both noted in the source: - **h2** is encoded as Trebuchet / `#7a0012` / bold. Avada's own token says Lato / `#333333`, but `tlig_en.css` overrides it globally with four `!important`s, so the second is what actually renders. - **Spacing** is snapped to a 4px scale. The live CSS uses 6px, 23px, 35px and 46px in adjacent rules; those become the nearest step. ## Fonts `papyrus-bold` is declared four times under one family name, split by `unicode-range` across the Latin, Latin-Extended (Hungarian), Cyrillic and Cyrillic-Extended (Bulgarian) files. The browser picks the file by codepoint, so a Bulgarian heading needs no language class and no second stylesheet. All font files are project assets. The live site points `@font-face` at absolute `ww3.tlig.org` URLs, which is why a staging copy renders in the fallback face; here Vite emits them into `dist/fonts/` and the CSS references them relatively, so the bundle resolves at whatever path it is dropped. Lato is self-hosted from the three files already in the child theme, replacing the 33 `@font-face` blocks Avada generates from its Google Fonts cache. ## Not done yet - Page-level layout: header, nav, the wood and papyrus backgrounds, `#main` - Message typography (`.tbody`, `.vassula`, `.jc`, `.god`, the bible-reference asides) - Menus, bookstore, search, testimonies, downloads - Enqueuing the built CSS from the theme, and retiring `tlig_en.css`