/* ====================================================================== WILLIAM MORRIS TILE — kelmscott_transitional.css PURPOSE: Transitional stylesheet for pages being converted to the Kelmscott design system. Same class names and structure as kelmscott.css, but uses white backgrounds and Georgia fallback fonts so a converted page does not look jarring next to un-converted pages on the live site. TO UPGRADE A PAGE TO FULL KELMSCOTT: Change one line in the : kelmscott_transitional.css -> kelmscott.css That's it. Everything else stays the same. HOW IT DIFFERS FROM kelmscott.css: - No Adobe Fonts (P22 Morris Golden, Troy, Ornaments do not load) - Headings fall back to Georgia — no visual shock for existing visitors - Backgrounds are white/light grey, not cream parchment - Fleuron separators render as plain hairlines (no ornament glyph) - Drop caps are suppressed - Self-hosted TeX Gyre fonts (Pagella body, Schola nav) still load - All layout classes are identical to kelmscott.css ====================================================================== */ /* ====================================================================== SECTION 1: DESIGN TOKENS Everything visual on the site traces back to these variables. Change a color here and it changes everywhere it is used. The font stacks define fallback order if a font does not load. --measure controls the maximum width of body text paragraphs. ====================================================================== */ :root { /* Color palette, drawn from the tiles themselves */ --cream: #FBFBEF; /* WMT signature cream — held for full Kelmscott */ --parchment: #FFFFFF; /* transitional: white, matches existing site */ --parchment-deep: #F5F5F3; /* transitional: light grey for panels and blocks */ --rose: #B17483; /* footer hairlines */ --ink: #2A2118; /* letterpress brown-black for body text */ --indigo: #1F3A5C; /* Morris indigo — headings and links */ --lustre: #7E2A1A; /* De Morgan red lustre — accents, focus rings */ --turquoise: #2E7F7A; /* De Morgan turquoise — tile hover only, use sparingly */ --rule: #B8A88F; /* hairline rules and dotted leaders */ /* Font stacks Adobe Fonts (P22 Morris Golden etc.) are NOT loaded in transitional mode. Headings fall back to Goudy Bookletter 1911 or Georgia. Body and nav use self-hosted TeX Gyre fonts (loaded in Section 13). */ --display: 'Goudy Bookletter 1911', Georgia, serif; --troy: Georgia, serif; --body: 'TeX Gyre Pagella', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; --ornaments: Georgia, serif; --nav: 'TeX Gyre Schola', 'Century Schoolbook', 'New Century Schoolbook', Georgia, serif; /* Maximum comfortable line length for body text */ --measure: 65ch; } /* ====================================================================== SECTION 2: RESET AND BASE Box-sizing, page background, body defaults, and the outer .page wrapper that centers and constrains all content to 72rem wide. .prose caps paragraph line length at --measure for readability. ====================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--parchment); scroll-behavior: smooth; } body { margin: 0; color: var(--ink); font-family: var(--body); font-size: 1.125rem; line-height: 1.65; } .page { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; } .prose { max-width: var(--measure); } img { max-width: 100%; height: auto; } /* ====================================================================== SECTION 3: TYPOGRAPHY AND LINKS All headings use the display font at 400 weight (not bold). h3 uses ink color to distinguish it from h1/h2 which use indigo. Links never change color on :visited — consistent indigo throughout. Bold weight on :hover is a classic typographic shift; no color change. ====================================================================== */ h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--indigo); line-height: 1.2; } h1 { font-size: 2.4rem; margin: .4em 0 .2em; } h2 { font-size: 1.7rem; margin: 1.6em 0 .5em; } h3 { font-size: 1.25rem; margin: 1.2em 0 .4em; color: var(--ink); } a { color: var(--indigo); text-decoration: none; } a:visited { color: var(--indigo); font-weight: inherit; } a:hover { font-weight: 700; color: var(--indigo); } a:focus-visible { outline: 2px solid var(--lustre); outline-offset: 2px; } /* ====================================================================== SECTION 4: PAGE HEADER AND NAVIGATION header.site wraps the entire top of the page. #header holds the logo and h1.main. h1.main is INTENTIONALLY plain body text. It carries keyword phrases for search engines but is invisible to casual visitors. Never enlarge or decorate it. (Standing rule, est. 1998.) .pagetitle is the human-facing display headline visitors actually read. nav.rows renders two centered rows of links. Put section links (Morris, De Morgan, etc.) in the first