/* Media Mindfulness ยท type corrections ------------------------------------------------------------------------ Loads last, after site.css and readability.css. It does NOT re-litigate anything site.css already settles well (.eyebrow, .cta, .btn, .lang-toggle, .nav-bottom, .pull cite, .moves .step, .wrap h1). It covers two things site.css does not reach: 1. The component labels on infosec / poll / virtue / resources, and every label on the six printable exercise sheets. Those sheets never link site.css at all. 2. The pages that carry a bare .nav-bottom instead of index.html's .site-footer. Why any of it needs correcting: Cinzel is an inscriptional titling face. No true lowercase, very high stroke contrast, wide capitals. It was set at 9px to 15px with 1.2px to 3px of tracking in about 120 places. At 9px, 2px of tracking is a quarter of an em; word shape dissolves and the hairlines fall under one device pixel on a 1x screen. Cinzel above 22px, where it is beautiful. Newsreader 600 below that, where reading happens. Newsreader is already loaded as a 400-600 variable face, so this costs no new download. */ /* The six exercise sheets never link site.css, so site.css's variables do not exist there. Declaring the small-text gold here means one value covers both the cool paper (#f3f4f7) and the sheets' warm parchment (#fafaf7). site.css sets the identical value; this only guarantees it is always defined. */ :root{ --gold-ink:#7a5f1f; } /* The sheets' muted ink was #9a8a78: 3.20:1 on the page and 2.94:1 on the cream panels. It carried the hint lines under every move, the quarter labels and the verdict rows: 18 failures from one variable. #736656 is 5.34:1 and 4.91:1. Scoped by .topbar, which only the six sheets have, so site.css's own cool --ink3 on the main pages is untouched. The seven borders that also use it simply gain a little definition in print. */ :root:has(.topbar){ --ink3:#736656; } /* ---- Spanish was blank on every page -------------------------------- The language toggle hides the other language with a bare attribute selector, `[lang="es"]{display:none}`. Nine pages also run `document.documentElement.lang = lang`, which is the right thing to do for screen readers and for the browser's own hyphenation. Together they set display:none on itself, so the entire Spanish document rendered as an empty white page: 0px tall, every page, both the site and the sheets. English was unaffected, because nothing hides [lang="en"] at the top level. Guarded here rather than by rewriting the selector in site.css and five inline blocks: html[lang] is (0,1,1) against the offender's (0,1,0), and this file loads last. The element is never the thing being toggled. */ html[lang]{ display:block; } /* ---- The invisible footer ------------------------------------------- Only index.html has .site-footer. The other eight pages close with a bare .nav-bottom inside .wrap, and site.css paints .nav-bottom links rgba(251,251,253,.62) because it expects the navy footer behind them. On a light page that composites to #f8f8fb on #f3f4f7: 1.04:1. The whole bottom navigation is invisible. .footer-saint lands at 1.28:1 the same way. */ .wrap .nav-bottom{ border-top:1px solid var(--rule); } .wrap .nav-bottom a{ color:var(--ink2); } .wrap .nav-bottom a:hover{ color:var(--crimson); } .wrap .footer-saint{ color:var(--ink2); } .wrap .footer-saint strong{ color:var(--gold-ink); } .wrap .footer-saint a{ color:var(--ink2); text-decoration-color:rgba(122,95,31,.45); } .wrap .footer-saint a:hover{ color:var(--crimson); } /* ---- Headings inside .wrap ------------------------------------------ h2 was 15px red capitals: smaller than the 17.5px paragraph it introduced. A heading smaller than its own body text is not a heading. */ body .wrap h2{ font-family:'Cinzel',Georgia,serif; font-size:25px; line-height:1.2; letter-spacing:0.02em; text-transform:none; color:var(--navy); margin:48px 0 18px; } body .wrap h3{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:19px; line-height:1.3; letter-spacing:0.01em; } body .wrap h4{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:16px; letter-spacing:0.03em; } /* ---- infosec: the three layers -------------------------------------- */ body .layer .ln{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:13px; letter-spacing:0.1em; } body .layer .vis{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:12px; letter-spacing:0.09em; } /* Warm parchment tints against the cool paper read as a different site. Re-cut on the navy/gold axis, each label checked against its own tint. */ body .l1{ background:#eef1f6; } body .l1 .ln,body .l1 .vis{ color:#2f4a6d; } body .l1 .vis{ background:#dde4ee; } body .l2{ background:#f6efdd; } body .l2 .ln,body .l2 .vis{ color:#6b5316; } body .l2 .vis{ background:#ece0c2; } body .l3{ background:#f7eaec; } body .l3 .ln,body .l3 .vis{ color:#7d1c2a; } body .l3 .vis{ background:#efd8dc; } body .layer{ border-color:var(--rule); } body .layer .lt{ color:var(--ink); } body .layer .lt span{ color:var(--ink2); } /* ---- infosec: the triad cards --------------------------------------- */ body .tri{ background:var(--white); border-color:var(--rule); } body .tri h3{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:20px; letter-spacing:0.01em; text-transform:none; color:var(--crimson); } body .tri .when{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:12.5px; letter-spacing:0.1em; color:var(--gold-ink); } body .tri p{ color:var(--ink2); } /* ---- resources / exercises index / poll / virtue --------------------- */ body .reslist a, body .reslist .plain{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:19px; letter-spacing:0.01em; } body .ex-card .num{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:13px; letter-spacing:0.1em; } body .ex-card h2{ font-size:22px; letter-spacing:0.02em; } /* The poll's question headings were 10px Cinzel capitals with 2.5px of tracking, on the page a room full of people reads off a projector. */ body .q h2{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:19px; letter-spacing:0.01em; text-transform:none; color:var(--navy); text-align:left; } body .q .count{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:12.5px; letter-spacing:0.08em; } body .opt .pct{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:15px; letter-spacing:0; } body .share h2{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:15px; letter-spacing:0.1em; } /* virtue.html is a 60KB report whose h3 was 13px under a 16px h2: the hierarchy read backwards. */ body th{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:13px; letter-spacing:0.08em; } /* ---- The six printable exercise sheets ------------------------------ These never link site.css. They keep their own worksheet identity; only the type is corrected. Nothing that carries meaning stays below 12px, and tracking moves to em so it scales with the type instead of shredding it. */ body .topbar .brand, body .topbar .actions, body .topbar .actions a, body .header .meta, body .move-num, body .move-title, body .move-time, body .move-notes label, body .step-num, body .step-title, body .step-time, body .card-num, body .card-title, body .card-time, body .notes label, body .tool-field label, body .decision-notes label, body .decision h3, body .decision-opt label, body .closing .attribution, body .closing .attrib, body .closing .scripture-ref, body .saved-msg, body .send-h, body .send-status, body .amen .amen-h, body .gotchas h4, body .gotcha .g-name, body .followup h4, body .followup .ask, body .receipt .r-src, body .result-note b, body .habit-card h3, body .schedule-item .q, body .rule-block strong, body .audit-tbl th, body .perm-tbl th, body .journal th, body .audit-tbl td:first-child, body .journal td:first-child, body .test-list li::before{ font-family:'Newsreader',Georgia,'Times New Roman',serif; font-weight:600; } body .header h1{ font-family:'Cinzel',Georgia,serif; font-size:30px; letter-spacing:0.02em; line-height:1.15; } body .topbar .brand{ font-size:13px; letter-spacing:0.12em; } body .topbar .actions, body .topbar .actions a{ font-size:13px; letter-spacing:0.07em; } body .header .meta{ font-size:13px; letter-spacing:0.1em; } body .move-num, body .step-num, body .card-num{ font-size:17px; letter-spacing:0; } body .move-title, body .step-title, body .card-title{ font-size:18px; letter-spacing:0.02em; } body .move-time, body .step-time, body .card-time{ font-size:12.5px; letter-spacing:0.1em; } body .notes label, body .tool-field label, body .move-notes label, body .decision-notes label{ font-size:12.5px; letter-spacing:0.1em; } body .decision h3{ font-size:15px; letter-spacing:0.1em; } body .decision-opt label{ font-size:14px; letter-spacing:0.03em; } body .closing .attribution, body .closing .attrib{ font-size:13px; letter-spacing:0.1em; } body .closing .scripture-ref{ font-size:12.5px; letter-spacing:0.1em; } body .saved-msg, body .send-status{ font-size:12.5px; letter-spacing:0.08em; } body .send-h, body .gotchas h4, body .followup h4, body .amen .amen-h{ font-size:14px; letter-spacing:0.1em; } body .gotcha .g-name, body .result-note b{ font-size:14px; letter-spacing:0.03em; } body .followup .ask{ font-size:17px; letter-spacing:0.01em; } body .receipt .r-src{ font-size:12.5px; letter-spacing:0.08em; } body .habit-card h3{ font-size:16px; letter-spacing:0.08em; } body .schedule-item .q, body .rule-block strong{ font-size:13px; letter-spacing:0.08em; } body .audit-tbl th, body .perm-tbl th, body .journal th{ font-size:13px; letter-spacing:0.08em; } body .audit-tbl td:first-child, body .journal td:first-child{ font-size:14px; letter-spacing:0; } /* The action buttons on the sheets stayed 11px Cinzel: site.css restyles .btn but the sheets never load it, so they were missed by both passes. */ body .btn, body .btn-save, body .btn-primary, body .btn-secondary{ font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:14px; letter-spacing:0.06em; } /* ---- Small gold text ------------------------------------------------- #c9a84c measures 2.08:1 on light and #a08030 measures 3.57:1. Both fail AA for small text, and between them they were carrying every table header in the 60KB report (47 instances at 2.01:1), the cadence lines on the sheets, and the duration labels on the exercise index. --gold-ink is 5.48:1. The gold stays gold where it is decoration or sits on navy. */ body th, body .audit-tbl th, body .perm-tbl th, body .journal th, body .audit-tbl td:first-child, body .journal td:first-child, body .header .meta, body .topbar .brand, body .move-time, body .step-time, body .card-time, body .ex-card .num, body .closing .scripture-ref, body .receipt .r-src, body .notes label, body .tool-field label, body .move-notes label, body .decision-notes label{ color:var(--gold-ink); } /* Step one's badge was the only pale one in its row: white on #a08030 is 3.73:1, while its five siblings are already dark greens, blues and reds. Bronze puts it in the same family and clears AA. */ body .s1 .step-num, body .move-1 .move-num{ background:var(--gold-ink); } body .btn-save{ background:var(--gold-ink); } body .closing .attribution, body .closing .attrib{ color:var(--gold-ink); } /* ---- Mobile --------------------------------------------------------- The badge is a 999px pill. When .layer collapses to one column it stretched the full width of the card and read as a broken button. */ @media (max-width:600px){ body .layer .vis{ justify-self:start; } body .wrap h2{ font-size:22px; } body .header h1{ font-size:26px; } body .ex-card h2{ font-size:20px; } } /* The print sheets are paginated to the millimetre and must not move. */ @media print{ body .wrap h2, body .header h1, body .move-title, body .step-title, body .card-title{ font-size:revert; letter-spacing:revert; } }