/* // © Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of // this document may be reproduced, modified or stored in a retrieval system, // or transmitted in any form or by any means, electronic, mechanical, // photocopying, recording or otherwise, without the prior written permission // of Toptronic Limited. For copyright inquiries: jacques@toptronic.com */ /* * PLWS :: Plazdiez Website - Session 0105 layer (glossary page presentation v3) * Project: Paul Lambourn Web Site (PLWS) - www.plazdiez.co.za * Generated/Updated on: 2026-09-17T16:10:25+10:00 * Audience: Jacques (hardware/C bg), Ryan (14), Ava (9), Students (15-23), * and the Master's-level reader who wants the "why". * * WHAT THIS FILE IS: the THIRD presentation layer of the Glossary page and * nothing else. It is linked on glossary.html AFTER css/styles_011.css, with * ?v=0105. It adds a new capability, so it is a NEW numbered file: /css/* is * served "immutable" for a year and a returning visitor keeps the old bytes. * * WHAT IS NEW IN 0105: an answer block above the table (.gl-about), an A-Z * jump strip (.gl-index), a second and lighter filter for the Customers Talks * table (.gl-talk-tools), the row that filter hides (.gl-talk-row-hidden), * its empty state (.gl-no-hits), the "Link copied" toast (.gl-toast), a * quieter pill for the two new categories, and three pieces of table polish. * * COLOURS: a colour is only valid for the surface it was chosen for. * --clr-steel (#8a94a6) is for DARK surfaces (3.06:1 on white fails AA); * --gl-muted (#5f6774, 5.71:1 on white) is for LIGHT surfaces; * --clr-brand (#e8a020) is 2.22:1 on white, so it may never carry text on a * light surface - on ink it is 8.18:1 and is used freely. * --clr-brand-deep (#8f5d00) is the light-surface brass: 5.62:1 on white. * Every pair below is checked against the surface it is painted on and the * ratio is written beside the rule. * -- Jacques: choose the colour for the surface, like a material spec. * -- Ava: dark words on light paper, light words on dark ink. * -- Ryan: contrast ratio = how far apart two colours are in brightness; * 4.5:1 is the minimum for ordinary text. * * HOUSE RULES OBEYED HERE: no @import, no external URL, no !important * outside the print block, every selector starts with .gl- (or is the * data-cat pill pair the contract names), no v2 rule re-declared without a * reason written next to it, and the file stays under 470 lines. */ /* ============ SECTION 0: TWO NEW LOCAL VALUES ============ styles_010.css owns --gl-muted and --gl-rule; styles_011.css added five more. This layer adds only what it truly needs. --gl-head-shade is declared here AND registered with @property in SECTION 6: the plain declaration is what keeps the sticky header's box-shadow valid in an engine that ignores @property (an unknown var() with no fallback would drop the whole declaration, amber underline included). */ :root { --gl-tint-quiet: rgba(20, 22, 26, 0.04); /* disabled letter face: ink on it 16.76:1 */ --gl-head-shade: rgba(20, 22, 26, 0); /* starts invisible: no shadow at rest */ } /* ============ SECTION 1: THE ANSWER BLOCK (section.gl-about) ============ The short plain answer to "what is this page?" sits above the table, where a reader - and a machine that extracts answers - looks first. It is a quiet white card with ONE amber rule down its left side, the same signature the .gl-nojs box already uses, so it reads as a note beside the glossary and never as a second hero. Contrast on white: the heading is --clr-ink (#14161a) 18.11:1, the text is --gl-ink-soft (#2b2f36) 13.44:1, and the caption grey is --gl-muted (#5f6774) 5.71:1. The 4px left rule is amber on white - 2.22:1, which is fine for this because it is a decorative edge and carries no information of its own: the heading beside it says what the block is (WCAG 1.4.11 covers graphics that convey meaning; this one does not). -- Ava: a small white card that answers one question in one paragraph. */ .gl-about { max-width: var(--max-width, 1200px); margin: 0 auto var(--sp-lg); padding: var(--sp-md) var(--sp-lg); background: #fff; border: 1px solid var(--gl-rule); border-left: 4px solid var(--clr-brand); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } /* The heading is deliberately small. An h2 the size of the hero title would make the page look twice-launched, which is exactly what the brief forbids. 1.05rem is a single step above the body copy and no more. */ .gl-about h2 { margin: 0 0 var(--sp-xs); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em; color: var(--clr-ink); /* 18.11:1 on white */ } /* 70ch is the widest a comfortable line may run (the brief allows <= 70ch), so the block can never turn into a wall of text; 1.02rem makes this the lead line of the whole page's prose - slightly larger than the 1rem body copy around it, slightly smaller than the hero lead. */ .gl-about-text { max-width: 70ch; margin: 0; font-size: 1.02rem; line-height: 1.6; color: var(--gl-ink-soft); /* 13.44:1 on white */ } /* ============ SECTION 2: THE A-Z JUMP STRIP (div.gl-index) ============ A row of small round letter buttons that jump to the first term beginning with that letter. It is deliberately NOT sticky: the terms toolbar already pins itself on a wide screen (styles_011.css SECTION 2), and a second pinned bar would eat the reader's viewport for no gain. -- Jacques: an index tab on the edge of the file, like a card index. -- Ryan: one round button per letter. A letter with nothing behind it is greyed out and cannot be pressed. MARKUP CONTRACT: js/glossary_004.js builds the buttons as