/* gaz-reader.css -- The Epic Gazette reading layer. 2026-09-16. * * Three jobs, one file, loaded on every page of the paper: * * 1. READABILITY -- the old-paper look stays; the spots readers squinted at * get darker ink, ruled columns between text blocks, and calmer small * type. Nothing structural moves. * 2. SECTION NAMEPLATES -- each section of the paper gets its own accent * color on rules, kickers and active tabs, the way a real paper gives * Sports its own flag. Set by gaz-reader.js via data-gazsec on . * 3. READING TOOLS -- the accessibility panel: type size, high contrast, * easy-read spacing, reading ruler, magnifier, read-aloud, calm motion. */ /* ---------- section nameplates ------------------------------------------ */ :root { --gaz-sec: #c79a46; --gaz-sec-ink: #171512; } html[data-gazsec="business"] { --gaz-sec: #2e4f6b; } html[data-gazsec="events"] { --gaz-sec: #27517a; } html[data-gazsec="combos"] { --gaz-sec: #a06a00; } html[data-gazsec="deals"] { --gaz-sec: #1c7a3d; } html[data-gazsec="sports-schools"] { --gaz-sec: #7f1d1d; } html[data-gazsec="public-record"] { --gaz-sec: #4a4e57; } html[data-gazsec="classifieds"] { --gaz-sec: #6b4a2a; } html[data-gazsec="articles"] { --gaz-sec: #7f1d1d; } html[data-gazsec="town"] { --gaz-sec: #315a4b; } /* Section accent touches: the hero rule and the active tab take the section's color, like a section flag in a printed paper. */ html[data-gazsec] .cb-hero h1, html[data-gazsec] .dl-hero h1, html[data-gazsec] .bz-hero h1 { border-bottom: 4px solid var(--gaz-sec); display: inline-block; padding-bottom: 6px; } html[data-gazsec] .cb-hero, html[data-gazsec] .dl-hero { border-bottom-color: var(--gaz-sec); } html[data-gazsec] .gzc-tag.active, html[data-gazsec] .dl-tag.active { background: var(--gaz-sec); border-color: var(--gaz-sec); color: #f7efdc; } html[data-gazsec] .dl-board a.current, html[data-gazsec] .cb-board a.current { border-color: var(--gaz-sec); box-shadow: 3px 3px 0 var(--gaz-sec); } html[data-gazsec] .desk { color: var(--gaz-sec); } /* ---------- readability pass -------------------------------------------- */ /* Small gray type was the squint spot -- darken the recurring offenders. */ .dl-src, .cb-note, .dl-note, .cb-event .when + span, .cb-stop .price, .dl-conds, .views, .bz-card .tag, .article-card .meta { color: #5f5748 !important; } /* Inactive pills sat at 40% opacity -- readable on paper white but muddy on the cream stock. 60% keeps them clearly secondary without vanishing. */ .gzc-tag, .dl-tag { opacity: .62; } .gzc-tag:hover, .dl-tag:hover { opacity: .85; } .gzc-tag.active, .dl-tag.active { opacity: 1; } /* Dark board tiles: the note line under town names was paper-cream on near- black at small size -- brighten it a touch. */ .dl-board-note, .cb-board-note { color: #e2d7bd; } /* Ruled columns -- a real paper separates its columns with a hairline rule. Applied to the multi-column grids across the paper's page types. Only the 2nd+ column is ruled, and only when the grid is actually side-by-side. */ @media (min-width: 821px) { .cb-grid > * + *, .dl-grid > * + *, .bz-grid > * + *, .facts > .fact + .fact, .front-teasers > * + *, .dir-grid > * + * { border-left: 1px solid rgba(23, 21, 18, .28); padding-left: 18px; } /* ...but if the child already draws its own card border, skip the rule so columns don't double-stripe. */ .facts > .fact + .fact, .front-teasers > .article-card + .article-card, .dir-grid > * + * { border-left: none; padding-left: 0; } .facts > .fact:nth-child(even) { border-left: 1px solid rgba(23,21,18,.28); } } /* ---------- the "The Paper" folder in the simplified tab row ------------- */ .paper-more { position: relative; display: inline-block; } .paper-more summary { list-style: none; cursor: pointer; font-family: Arial, Helvetica, sans-serif; font-size: .74rem; font-weight: 800; letter-spacing: .03em; border: 1px dashed #171512; padding: 6px 12px; border-radius: 999px; opacity: .8; } .paper-more summary::-webkit-details-marker { display: none; } .paper-more[open] summary { background: #171512; color: #f2ead5; opacity: 1; } .paper-more-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 900; background: #fffdf7; border: 1.5px solid #171512; border-radius: 8px; box-shadow: 5px 5px 0 rgba(0,0,0,.25); padding: 8px; min-width: 170px; display: flex; flex-direction: column; } .paper-more-panel a { padding: 7px 10px; font-size: .82rem; border-radius: 4px; white-space: nowrap; } .paper-more-panel a:hover { background: #f0e9d6; } /* ---------- reading-progress bar ---------------------------------------- */ #gazProgress { position: fixed; top: 0; left: 0; height: 4px; width: 0; background: var(--gaz-sec, #c79a46); z-index: 2147483000; transition: width .08s linear; } /* ---------- the paper menu (footer nav, injected) ------------------------ */ .gaz-papermenu { border-top: 3px double #171512; border-bottom: 1px solid #171512; margin: 26px auto 0; padding: 14px 16px; font-family: Arial, Helvetica, sans-serif; max-width: 1100px; } .gaz-papermenu .pm-k { font-size: .62rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #6b6355; margin: 0 0 6px; } .gaz-papermenu .pm-row { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 10px; } .gaz-papermenu .pm-row:last-child { margin-bottom: 0; } .gaz-papermenu a { color: #241f16; text-decoration: none; font-size: .82rem; font-weight: 600; padding: 2px 10px; border-right: 1px solid #b9ab8e; } .gaz-papermenu a:last-child { border-right: none; } .gaz-papermenu a:hover { text-decoration: underline; } .gaz-papermenu a.cur { color: #7f1d1d; font-weight: 800; } .gaz-papermenu .pm-towns a { font-weight: 400; color: #4c463c; } /* ---------- reading tools widget ---------------------------------------- */ #gazToolsBtn { position: fixed; right: 14px; bottom: 14px; z-index: 2147483001; font: 800 .78rem/1 Arial, Helvetica, sans-serif; letter-spacing: .08em; text-transform: uppercase; background: #171512; color: #f2ead5; border: 2px solid #c79a46; border-radius: 999px; padding: 12px 18px; cursor: pointer; box-shadow: 3px 3px 0 rgba(0,0,0,.3); } #gazToolsBtn:hover, #gazToolsBtn:focus-visible { background: #2a2419; outline: 3px solid #27517a; outline-offset: 2px; } #gazTools { position: fixed; right: 14px; bottom: 62px; z-index: 2147483001; width: min(320px, calc(100vw - 28px)); background: #fffdf7; color: #241f16; border: 2px solid #171512; border-radius: 10px; box-shadow: 6px 6px 0 rgba(0,0,0,.28); padding: 14px; font-family: Arial, Helvetica, sans-serif; } #gazTools[hidden] { display: none; } #gazTools h2 { font: 800 .95rem/1.2 Georgia, serif; margin: 0 0 4px; } #gazTools .gt-sub { font-size: .72rem; color: #5f5748; margin: 0 0 10px; } #gazTools .gt-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; } #gazTools .gt-lab { font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6b6355; width: 100%; } #gazTools button { font: 700 .76rem/1 Arial, sans-serif; padding: 8px 10px; border: 1.5px solid #171512; background: #fff; color: #171512; border-radius: 6px; cursor: pointer; } #gazTools button:hover { background: #f0e9d6; } #gazTools button[aria-pressed="true"] { background: #171512; color: #f2ead5; } #gazTools .gt-note { font-size: .68rem; color: #6b6355; margin-top: 8px; line-height: 1.4; } /* reader state classes -- set on by gaz-reader.js, persisted */ html.gaz-contrast body { background: #fff !important; color: #000 !important; } html.gaz-contrast .dl-card, html.gaz-contrast .cb-panel, html.gaz-contrast .cb-bundle, html.gaz-contrast .fact, html.gaz-contrast .bz-dir-card, html.gaz-contrast .article-card, html.gaz-contrast #gazTools { background: #fff !important; } html.gaz-contrast .dl-src, html.gaz-contrast .cb-note, html.gaz-contrast .dl-note, html.gaz-contrast .dl-conds, html.gaz-contrast .cb-stop .price, html.gaz-contrast .fact p { color: #333 !important; } html.gaz-easy body { letter-spacing: .04em; word-spacing: .12em; } html.gaz-easy p, html.gaz-easy li { font-family: Verdana, Arial, sans-serif; line-height: 1.9; } html.gaz-calm * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* reading ruler -- a soft band that follows the pointer line */ #gazRuler { position: fixed; left: 0; right: 0; height: 2.4em; pointer-events: none; border-top: 1px solid rgba(23,21,18,.5); border-bottom: 1px solid rgba(23,21,18,.5); background: rgba(199, 154, 70, .10); z-index: 2147482999; display: none; } html.gaz-ruler-on #gazRuler { display: block; } /* magnifier lens -- enlarges the TEXT under the pointer, newspaper-loupe style */ #gazLens { position: fixed; width: 240px; min-height: 60px; max-height: 180px; overflow: hidden; border: 3px solid #171512; border-radius: 8px; background: #fffbef; color: #171512; box-shadow: 0 8px 30px rgba(0,0,0,.35); padding: 10px 12px; z-index: 2147483002; font-family: Georgia, serif; font-size: 1.35rem; line-height: 1.5; display: none; pointer-events: none; } #gazLens .lz-tag { font: 800 .58rem/1 Arial, sans-serif; letter-spacing: .14em; color: #7f1d1d; text-transform: uppercase; display: block; margin-bottom: 4px; } html.gaz-lens-on #gazLens { display: block; } /* body text scale steps driven by A-/A+ */ html.gaz-zoom-1 body { font-size: 106%; } html.gaz-zoom-2 body { font-size: 114%; } html.gaz-zoom-3 body { font-size: 124%; } /* read-aloud: the paragraph being read gets a soft underline band */ .gaz-speaking { background: rgba(199,154,70,.16) !important; border-radius: 3px; } @media (max-width: 640px) { #gazToolsBtn { right: 10px; bottom: 10px; padding: 10px 14px; } #gazLens { width: 200px; } } @media print { #gazToolsBtn, #gazTools, #gazRuler, #gazLens, #gazProgress, .gaz-papermenu { display: none !important; } }