@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600;700&display=swap');
/* ============================================================================
THE INCARNATE WORD — site-wide "parchment article" theme
----------------------------------------------------------------------------
This is the SINGLE source of truth for the parchment skin. It takes the
typographic look of the blog reader (Content/blog-reader.css) and applies it
to every page of the Materialize/Bootstrap site.
• STYLING ONLY — no markup, no behaviour, no input TYPES are changed.
• Every form control (text, search, select, checkbox, radio, switch, range,
file, textarea, date…) is kept clearly VISIBLE and usable on parchment.
• To REVERT to the original UI: delete this file and remove the single
controls, or the active dark/sepia/etc reading themes.
============================================================================ */
:root {
--iw-parchment: #f6f0e2;
--iw-parchment-deep: #ede4cf;
--iw-parchment-soft: #faf6ea;
--iw-surface: #fffaf0; /* cards / panels — a touch lighter than the canvas */
--iw-ink: #2a2418;
--iw-ink-soft: #4a3f2c;
--iw-ink-faint: #8a7c5e;
--iw-rule: #c9b994;
--iw-rule-strong: #b3a073;
--iw-saffron: #b8651b;
--iw-saffron-deep: #8a4a13;
--iw-gold: #a17812;
--iw-shadow: rgba(60, 40, 10, 0.08);
--iw-shadow-strong: rgba(60, 40, 10, 0.14);
--iw-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
--iw-display: 'Cormorant Garamond', Georgia, serif;
--iw-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ----------------------------------------------------------------------------
1. PAGE CANVAS
Guarded so an explicitly-chosen reading theme (dark/night/sepia/cream/lgrey)
still drives the background & text colour — the toggle keeps working.
---------------------------------------------------------------------------- */
body:not([data-rd-theme="dark"]):not([data-rd-theme="night"]):not([data-rd-theme="sepia"]):not([data-rd-theme="cream"]):not([data-rd-theme="lgrey"]) {
background: radial-gradient(ellipse at top, #faf3e3 0%, var(--iw-parchment) 55%, var(--iw-parchment-deep) 100%);
background-attachment: fixed;
color: var(--iw-ink);
}
/* Typography applies in every theme — serif body, crisp sans for UI chrome. */
body {
font-family: var(--iw-serif);
font-feature-settings: "liga", "onum", "kern";
-webkit-font-smoothing: antialiased;
}
/* Reading text larger by default (Materialize/site baseline was 16px).
This is the reading-preferences baseline, so a reader's own size still wins. */
:root {
--rd-font-size: 19px;
}
/* ----------------------------------------------------------------------------
1b. CONTENT WIDTH — Materialize caps .container at 70% on wide screens, which
left the reading column narrow. Give the body content a wider, comfortable
measure and let the main column use more of the row.
---------------------------------------------------------------------------- */
.container.body-content {
width: 92%;
max-width: 1400px;
}
@media (min-width: 993px) {
/* pull the (empty) share rail to the far left and widen the content column */
.row-body > .col.js-sharebar {
margin-left: 0 !important;
}
.row-body > .col.removeClass {
width: 83.3333% !important;
}
}
/* ----------------------------------------------------------------------------
2. DISPLAY TYPOGRAPHY — headings
---------------------------------------------------------------------------- */
h1, h2, h3,
.page-header,
.chapter-heading,
.card-title,
.collection-header {
font-family: var(--iw-display);
color: var(--iw-ink);
letter-spacing: -0.005em;
font-weight: 500;
}
h1, .page-header {
line-height: 1.12;
}
h4, h5, h6 {
font-family: var(--iw-sans);
color: var(--iw-ink-soft);
font-weight: 600;
letter-spacing: 0.04em;
}
/* Site.css forces `p { font-family: Baskerville }` (an element rule that beats
the body cascade), leaving much of the site on the old face. Bring every
paragraph and the display bits onto the parchment serif so the type is
consistent throughout. The reading-preferences !important font still wins
when a reader picks their own face for the content area. */
p {
font-family: var(--iw-serif);
}
.landing,
.alphabet {
font-family: var(--iw-display);
}
/* Page hero / jumbotron — the frontispiece treatment from the reference. */
.jumbotron,
.section.z-depth-1.jumbotron {
background: rgba(255, 248, 230, 0.55) !important;
border: 1px solid var(--iw-rule);
border-radius: 3px;
box-shadow: 0 2px 20px var(--iw-shadow) !important;
color: var(--iw-ink);
}
.jumbotron h1 {
font-family: var(--iw-display);
color: var(--iw-ink);
font-weight: 600;
}
.jumbotron .landing {
font-family: var(--iw-display);
font-style: italic;
color: var(--iw-ink-soft);
}
/* ----------------------------------------------------------------------------
3. NAVBAR (top chrome) — parchment band with saffron hovers
The inline reading-theme rules already recolour the navbar for active
dark/sepia/etc themes (with !important), so this default never fights them.
---------------------------------------------------------------------------- */
nav.navbar-default {
background-color: var(--iw-parchment-deep);
border-bottom: 1px solid var(--iw-rule);
box-shadow: 0 1px 8px var(--iw-shadow);
color: var(--iw-ink-soft);
}
nav.navbar-default .brand-logo {
font-family: var(--iw-display);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--iw-ink);
}
nav.navbar-default a,
nav.navbar-default li > a {
color: var(--iw-ink-soft);
transition: color 0.2s ease, background-color 0.2s ease;
}
nav.navbar-default a:hover,
nav.navbar-default li > a:hover {
color: var(--iw-saffron-deep);
background-color: rgba(184, 101, 27, 0.07);
}
/* Dropdown menus from the navbar */
.dropdown-content {
background-color: var(--iw-surface);
border: 1px solid var(--iw-rule);
box-shadow: 0 4px 18px var(--iw-shadow-strong);
}
.dropdown-content li > a,
.dropdown-content li > span {
color: var(--iw-ink-soft);
}
.dropdown-content li > a:hover,
.dropdown-content li.active {
background-color: rgba(184, 101, 27, 0.08);
color: var(--iw-saffron-deep);
}
.dropdown-content li.divider {
background-color: var(--iw-rule);
}
/* Mobile slide-out menu */
.side-nav,
ul.side-nav {
background-color: var(--iw-parchment);
box-shadow: 2px 0 18px var(--iw-shadow-strong);
}
.side-nav li > a {
color: var(--iw-ink-soft);
}
.side-nav li > a:hover,
.side-nav li > a.active {
background-color: rgba(184, 101, 27, 0.08);
color: var(--iw-saffron-deep);
}
/* ----------------------------------------------------------------------------
4. READING / CONTENT SURFACES
---------------------------------------------------------------------------- */
.text-bg-common,
.text-bg,
.js-content,
article,
.markdown-content {
color: var(--iw-ink);
}
/* In-content links — kept BLUE (the site's traditional link colour) with an
underline that deepens on hover. Scoped to content containers so the navbar,
buttons and breadcrumbs are untouched. (.blog-reader keeps its own saffron
links via its more-specific rules.) */
.text-bg a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect),
.text-bg-common a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect),
.js-content a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect),
article a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect),
.markdown-content a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect),
.card-content a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect) {
color: #337ab7;
text-decoration: none;
border-bottom: 1px solid rgba(51, 122, 183, 0.30);
transition: color 0.2s ease, border-color 0.2s ease;
}
.text-bg a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect):hover,
.text-bg-common a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect):hover,
.js-content a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect):hover,
article a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect):hover,
.markdown-content a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect):hover,
.card-content a:not(.btn):not(.btn-flat):not(.btn-floating):not(.waves-effect):hover {
color: #1c5a99;
border-bottom-color: #1c5a99;
}
/* Image links never carry the text underline */
.text-bg a:has(img),
.markdown-content a:has(img),
.card-content a:has(img) {
border-bottom: none;
}
blockquote {
border-left: 2px solid var(--iw-saffron);
background: rgba(201, 185, 148, 0.12);
color: var(--iw-ink-soft);
font-family: var(--iw-display);
font-style: italic;
}
/* Ornamental rule, matching the blog */
.text-bg hr,
.markdown-content hr,
.js-content hr {
border: none;
height: 1px;
background: var(--iw-rule);
margin: 40px auto;
max-width: 70%;
}
/* ----------------------------------------------------------------------------
5. CARDS & PANELS
Colour-utility cards (grey lighten-3, teal lighten-2 …) keep their own
!important background; only the plain surfaces are re-skinned here.
---------------------------------------------------------------------------- */
.card,
.card-panel,
.well,
.panel {
background-color: var(--iw-surface);
color: var(--iw-ink);
border: 1px solid var(--iw-rule);
border-radius: 3px;
box-shadow: 0 2px 14px var(--iw-shadow) !important;
}
.card .card-content,
.card .card-action {
color: var(--iw-ink);
}
.card .card-action {
border-top: 1px solid var(--iw-rule);
}
.card .card-title {
color: var(--iw-ink);
}
.hoverable:hover,
.card.hoverable:hover {
box-shadow: 0 6px 26px var(--iw-shadow-strong) !important;
}
/* A frequently-used light callout */
.card.grey.lighten-3,
.card.grey.lighten-4 {
border-color: var(--iw-rule);
}
/* ----------------------------------------------------------------------------
6. COLLECTIONS / LISTS
---------------------------------------------------------------------------- */
.collection {
border: 1px solid var(--iw-rule);
border-radius: 3px;
overflow: hidden;
}
.collection .collection-item {
background-color: var(--iw-surface);
border-bottom: 1px solid rgba(201, 185, 148, 0.55);
color: var(--iw-ink);
}
.collection a.collection-item {
color: var(--iw-saffron-deep);
}
.collection a.collection-item:hover,
.collection .collection-item.div-hover:hover,
.div-hover:hover {
background-color: rgba(184, 101, 27, 0.06);
}
.collection .collection-item.active,
.collection a.collection-item.active {
background-color: var(--iw-saffron);
color: #fff;
}
.collection .collection-header {
background-color: var(--iw-parchment-deep);
border-bottom: 1px solid var(--iw-rule);
color: var(--iw-ink);
}
.list-group-item {
background-color: var(--iw-surface);
border-color: var(--iw-rule);
color: var(--iw-ink);
}
/* ----------------------------------------------------------------------------
7. COLLAPSIBLES / TABS
---------------------------------------------------------------------------- */
.collapsible {
border-color: var(--iw-rule);
box-shadow: 0 2px 12px var(--iw-shadow);
}
.collapsible-header {
background-color: var(--iw-surface);
border-bottom: 1px solid var(--iw-rule);
color: var(--iw-ink);
transition: background-color 0.2s ease;
}
.collapsible-header:hover {
background-color: rgba(184, 101, 27, 0.06);
}
.collapsible-body {
background-color: var(--iw-parchment-soft, #faf6ea);
border-bottom: 1px solid var(--iw-rule);
color: var(--iw-ink);
}
.tabs {
background-color: transparent;
}
.tabs .tab a {
color: var(--iw-ink-soft);
font-family: var(--iw-sans);
letter-spacing: 0.04em;
transition: color 0.2s ease;
}
.tabs .tab a:hover,
.tabs .tab a.active {
color: var(--iw-saffron-deep);
background-color: rgba(184, 101, 27, 0.05);
}
.tabs .indicator {
background-color: var(--iw-saffron);
}
/* ----------------------------------------------------------------------------
8. BREADCRUMBS / PAGINATION / BADGES / CHIPS
---------------------------------------------------------------------------- */
.breadcrumb,
a.breadcrumb {
font-family: var(--iw-sans);
color: var(--iw-ink-faint);
letter-spacing: 0.02em;
}
a.breadcrumb {
color: var(--iw-saffron-deep);
transition: color 0.2s ease;
}
a.breadcrumb:hover {
color: var(--iw-saffron);
}
.breadcrumb:before,
a.breadcrumb:before {
color: var(--iw-ink-faint);
}
.pagination li a {
color: var(--iw-ink-soft);
}
.pagination li.active {
background-color: var(--iw-saffron);
}
.pagination li.active a {
color: #fff;
}
.pagination li:hover:not(.active) a {
color: var(--iw-saffron-deep);
}
.badge {
color: var(--iw-ink-soft);
}
.chip {
background-color: var(--iw-parchment-deep);
color: var(--iw-ink-soft);
}
/* ----------------------------------------------------------------------------
9. TABLES — printed-essay treatment
---------------------------------------------------------------------------- */
table {
color: var(--iw-ink);
border-color: var(--iw-rule);
}
table thead th,
table.bordered > thead > tr > th {
font-family: var(--iw-sans);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--iw-ink-soft);
background-color: rgba(201, 185, 148, 0.20);
border-bottom: 1px solid var(--iw-rule);
}
table.bordered > tbody > tr,
table.bordered > thead > tr {
border-bottom: 1px solid var(--iw-rule);
}
table.striped > tbody > tr:nth-child(odd) {
background-color: rgba(201, 185, 148, 0.10);
}
table.highlight > tbody > tr:hover {
background-color: rgba(184, 101, 27, 0.06);
}
/* ----------------------------------------------------------------------------
10. BUTTONS — keep semantic colour utilities; harmonise + add hover lift
The default (teal) .btn becomes saffron; .grey/.red/.green/etc utility
buttons keep their colour (those rules carry !important). Every button
gains a consistent hover lift, focus ring and the UI sans face.
---------------------------------------------------------------------------- */
.btn,
.btn-large,
.btn-small,
.btn-flat,
.btn-floating {
font-family: var(--iw-sans);
letter-spacing: 0.03em;
transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease, color 0.2s ease;
}
/* Recolour ONLY the bare default button (Materialize teal) — utility colours win */
.btn,
.btn-large,
.btn-small {
background-color: var(--iw-saffron);
}
.btn:hover,
.btn-large:hover,
.btn-small:hover {
background-color: var(--iw-saffron-deep);
}
/* Universal hover affordance that works regardless of the button's colour */
.btn:hover,
.btn-large:hover,
.btn-small:hover,
.btn-floating:hover {
box-shadow: 0 4px 14px var(--iw-shadow-strong);
transform: translateY(-1px);
}
.btn-flat {
color: var(--iw-saffron-deep);
}
.btn-flat:hover {
background-color: rgba(184, 101, 27, 0.08);
}
.btn:focus-visible,
.btn-large:focus-visible,
.btn-small:focus-visible,
.btn-flat:focus-visible,
.btn-floating:focus-visible {
outline: 2px solid var(--iw-saffron);
outline-offset: 2px;
}
/* Floating action button keeps high visibility on parchment */
.fixed-action-btn .btn-floating {
box-shadow: 0 4px 16px var(--iw-shadow-strong);
}
/* ----------------------------------------------------------------------------
11. FORMS — every input kept clearly VISIBLE and functional on parchment.
No input is hidden, no input TYPE is changed; only colours/borders are set.
---------------------------------------------------------------------------- */
/* Form text faces — crisp sans for legibility in fields & labels */
input:not([type=checkbox]):not([type=radio]):not([type=range]),
textarea,
select,
button,
.select-dropdown {
font-family: var(--iw-sans);
}
/* Materialize underline inputs: visible underline, ink text, saffron focus */
input:not([type]),
input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=tel],
input[type=number],
input[type=search],
input[type=date],
input[type=time],
input[type=datetime-local],
textarea.materialize-textarea {
color: var(--iw-ink);
border-bottom: 1px solid var(--iw-rule-strong);
box-shadow: none;
}
input:not([type]):focus:not([readonly]),
input[type=text]:focus:not([readonly]),
input[type=password]:focus:not([readonly]),
input[type=email]:focus:not([readonly]),
input[type=url]:focus:not([readonly]),
input[type=tel]:focus:not([readonly]),
input[type=number]:focus:not([readonly]),
input[type=search]:focus:not([readonly]),
input[type=date]:focus:not([readonly]),
input[type=time]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid var(--iw-saffron) !important;
box-shadow: 0 1px 0 0 var(--iw-saffron) !important;
}
/* Floating labels — readable on parchment, saffron when active */
.input-field > label,
.input-field label {
color: var(--iw-ink-faint);
}
.input-field input:focus + label,
.input-field textarea:focus + label,
.input-field input.valid + label,
.input-field label.active {
color: var(--iw-saffron-deep) !important;
}
.input-field .prefix.active {
color: var(--iw-saffron);
}
::placeholder {
color: #6f6242; /* darker than ink-faint so hints stay legible on parchment */
opacity: 1;
}
/* Boxed / bordered inputs (browser-default, Bootstrap form-control, file path)
get a full visible frame + light fill so they never melt into the parchment */
select.browser-default,
input.browser-default,
textarea.browser-default,
.form-control,
input.file-path,
.file-path-wrapper .file-path,
input[type=file]:not([class]) {
background-color: #fffdf6;
color: var(--iw-ink);
border: 1px solid var(--iw-rule-strong);
border-radius: 3px;
}
select.browser-default:focus,
input.browser-default:focus,
textarea.browser-default:focus,
.form-control:focus {
border-color: var(--iw-saffron);
box-shadow: 0 0 0 2px rgba(184, 101, 27, 0.15);
outline: none;
}
/* Native dropdown option list */
select.browser-default option,
select option {
background-color: #fffdf6;
color: var(--iw-ink);
}
/* Materialize select (material_select) renders a fake text input + dropdown */
.select-wrapper input.select-dropdown {
color: var(--iw-ink);
border-bottom: 1px solid var(--iw-rule-strong);
}
.select-wrapper .caret {
fill: var(--iw-ink-faint);
}
.select-wrapper .dropdown-content li > span {
color: var(--iw-ink-soft);
}
.select-wrapper .dropdown-content li.selected,
.select-wrapper .dropdown-content li:hover {
background-color: rgba(184, 101, 27, 0.08);
}
/* File field upload button */
.file-field .btn {
background-color: var(--iw-saffron);
}
/* Checkboxes — Materialize draws the box via label::before; recolour CHECKED
state to saffron, keep the unchecked outline dark enough to be seen.
(The native box stays hidden exactly as before — type is unchanged.) */
[type="checkbox"] + label:before,
[type="checkbox"]:not(.filled-in) + label:after {
border-color: var(--iw-ink-soft); /* dark enough to be clearly seen unchecked */
}
[type="checkbox"]:checked + label:before {
border-right: 2px solid var(--iw-saffron);
border-bottom: 2px solid var(--iw-saffron);
}
[type="checkbox"].filled-in:checked + label:after {
border-color: var(--iw-saffron);
background-color: var(--iw-saffron);
}
[type="checkbox"].filled-in:not(:checked) + label:after {
border-color: var(--iw-ink-faint);
}
/* Radio buttons — recolour selected ring/dot to saffron */
[type="radio"]:not(:checked) + label:before,
[type="radio"]:not(:checked) + label:after {
border-color: var(--iw-ink-soft);
}
[type="radio"]:checked + label:before {
border-color: var(--iw-saffron);
}
[type="radio"]:checked + label:after {
border-color: var(--iw-saffron);
background-color: var(--iw-saffron);
}
/* Checkbox / radio label text must stay readable on parchment */
[type="checkbox"] + label,
[type="radio"] + label {
color: var(--iw-ink-soft);
}
/* Materialize switch (lever) — visible track + saffron "on" state */
.switch label .lever {
background-color: var(--iw-rule-strong); /* visible track on parchment */
}
.switch label .lever:after {
background-color: #f3ecdb;
}
.switch label input[type=checkbox]:checked + .lever {
background-color: rgba(184, 101, 27, 0.45);
}
.switch label input[type=checkbox]:checked + .lever:after {
background-color: var(--iw-saffron);
}
.switch label {
color: var(--iw-ink-soft);
}
/* Range sliders — native accent + Materialize thumb recolour */
input[type=range] {
accent-color: var(--iw-saffron);
}
input[type=range] + .thumb {
background-color: var(--iw-saffron);
}
input[type=range]::-webkit-slider-thumb {
background-color: var(--iw-saffron);
}
input[type=range]::-moz-range-thumb {
background-color: var(--iw-saffron);
}
/* Bootstrap form-check + any native checkbox/radio that shows the real box */
.form-check-input,
input.browser-default[type=checkbox],
input.browser-default[type=radio] {
accent-color: var(--iw-saffron);
}
.form-check-label,
.form-label {
color: var(--iw-ink-soft);
}
/* ----------------------------------------------------------------------------
12. MODALS
---------------------------------------------------------------------------- */
.modal {
background-color: var(--iw-surface);
border: 1px solid var(--iw-rule);
border-radius: 3px;
color: var(--iw-ink);
}
.modal .modal-content {
color: var(--iw-ink);
}
.modal .modal-content h1,
.modal .modal-content h2,
.modal .modal-content h3,
.modal .modal-content h4 {
color: var(--iw-ink);
}
.modal-footer {
background-color: var(--iw-surface) !important;
border-top: 1px solid var(--iw-rule);
}
.modal-overlay {
background: rgba(42, 36, 24, 0.5);
}
/* ----------------------------------------------------------------------------
13. SUPPORTING BITS
---------------------------------------------------------------------------- */
/* Preloader spinner — warm it to saffron instead of Material blue */
.spinner-layer.spinner-blue-only,
.spinner-layer.spinner-blue {
border-color: var(--iw-saffron);
}
/* Progress bars (uploads, etc.) */
.progress {
background-color: rgba(201, 185, 148, 0.35);
}
.progress .determinate,
.progress .indeterminate {
background-color: var(--iw-saffron);
}
/* Side TOC / scrollspy panels that use a hard "whitesmoke" inline bg */
#mainNav,
#scrollspy {
color: var(--iw-ink-soft);
}
#scrollspy .nav > li > a.active,
.nav > li > a.active {
color: var(--iw-saffron-deep);
border-left: 2px solid var(--iw-saffron);
font-weight: 600;
}
#scrollspy .nav > li > a:hover {
color: var(--iw-saffron-deep);
}
/* Generic muted/secondary text */
.grey-text,
.text-muted,
small.text-muted {
color: var(--iw-ink-faint) !important;
}
/* Selection highlight — warm tint */
::selection {
background: rgba(184, 101, 27, 0.18);
}
/* Keyboard focus visibility across interactive elements */
a:focus-visible,
.collection-item:focus-visible,
.collapsible-header:focus-visible {
outline: 2px solid var(--iw-saffron);
outline-offset: 2px;
}
/* ----------------------------------------------------------------------------
14. EXPLICIT NON-TARGETS — make sure these keep their own look/behaviour
---------------------------------------------------------------------------- */
/* Material Icons: never inherit the serif/sans body face (inline !important in
_Layout already guards them; this is belt-and-braces). */
.material-icons,
i.material-icons {
font-family: 'Material Icons' !important;
}
/* Code blocks keep a monospace face on a calm surface.
NB: .CodeMirror / SimpleMDE editors are deliberately NOT targeted — they ship
their own monospace font face and we must not interfere with them. */
pre, code, kbd, samp {
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}
pre {
background: var(--iw-parchment-deep);
border: 1px solid var(--iw-rule);
border-radius: 3px;
}
code {
background: rgba(201, 185, 148, 0.32);
color: var(--iw-saffron-deep);
border-radius: 3px;
padding: 1px 5px;
}
pre code {
background: none;
color: var(--iw-ink);
padding: 0;
}
/* ----------------------------------------------------------------------------
15. READING-THEME YIELD — keep night reading usable.
When the user explicitly selects the dark / night reading theme, re-darken
the surfaces this file lightened, so that feature still works as before.
(sepia / cream / lgrey are warm light themes that harmonise with parchment.)
---------------------------------------------------------------------------- */
[data-rd-theme="dark"] nav.navbar-default,
[data-rd-theme="night"] nav.navbar-default {
background-color: #1a1a1a;
border-bottom-color: #333;
}
[data-rd-theme="dark"] .card,
[data-rd-theme="dark"] .card-panel,
[data-rd-theme="dark"] .collection,
[data-rd-theme="dark"] .collection .collection-item,
[data-rd-theme="dark"] .collapsible-header,
[data-rd-theme="dark"] .collapsible-body,
[data-rd-theme="dark"] .modal,
[data-rd-theme="dark"] .modal-footer,
[data-rd-theme="dark"] .dropdown-content,
[data-rd-theme="dark"] .side-nav,
[data-rd-theme="night"] .card,
[data-rd-theme="night"] .card-panel,
[data-rd-theme="night"] .collection,
[data-rd-theme="night"] .collection .collection-item,
[data-rd-theme="night"] .collapsible-header,
[data-rd-theme="night"] .collapsible-body,
[data-rd-theme="night"] .modal,
[data-rd-theme="night"] .modal-footer,
[data-rd-theme="night"] .dropdown-content,
[data-rd-theme="night"] .side-nav {
background-color: #242424 !important;
color: #e0e0e0;
border-color: #3a3a3a;
}
[data-rd-theme="dark"] .jumbotron,
[data-rd-theme="night"] .jumbotron {
background: #222 !important;
border-color: #3a3a3a;
}
[data-rd-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
[data-rd-theme="dark"] textarea,
[data-rd-theme="dark"] .form-control,
[data-rd-theme="dark"] select,
[data-rd-theme="dark"] select.browser-default,
[data-rd-theme="dark"] .select-dropdown,
[data-rd-theme="night"] input:not([type=checkbox]):not([type=radio]):not([type=range]),
[data-rd-theme="night"] textarea,
[data-rd-theme="night"] .form-control,
[data-rd-theme="night"] select,
[data-rd-theme="night"] select.browser-default,
[data-rd-theme="night"] .select-dropdown {
background-color: #2c2c2c;
color: #e0e0e0;
border-color: #4a4a4a;
}
[data-rd-theme="dark"] ::placeholder,
[data-rd-theme="night"] ::placeholder {
color: #9a9a9a;
}
/* Re-darken the remaining surfaces this file lightened, so night reading stays
fully legible (collection headers, tables, and the warmed inline panels).
Higher specificity than the light/section-17 rules, so these win. */
[data-rd-theme="dark"] .collection .collection-header,
[data-rd-theme="night"] .collection .collection-header {
background-color: #1f1f1f !important;
color: #e0e0e0;
border-color: #3a3a3a;
}
[data-rd-theme="dark"] table,
[data-rd-theme="dark"] .table,
[data-rd-theme="night"] table,
[data-rd-theme="night"] .table {
color: #e0e0e0;
}
[data-rd-theme="dark"] table th,
[data-rd-theme="dark"] table td,
[data-rd-theme="dark"] .table th,
[data-rd-theme="dark"] .table td,
[data-rd-theme="dark"] .thead-dark th,
[data-rd-theme="night"] table th,
[data-rd-theme="night"] table td,
[data-rd-theme="night"] .table th,
[data-rd-theme="night"] .table td,
[data-rd-theme="night"] .thead-dark th {
color: #e0e0e0 !important;
border-color: #3a3a3a !important;
background-color: transparent !important;
}
[data-rd-theme="dark"] table thead th,
[data-rd-theme="night"] table thead th {
background-color: #1f1f1f !important;
}
[data-rd-theme="dark"] table.striped > tbody > tr:nth-child(odd),
[data-rd-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd),
[data-rd-theme="night"] table.striped > tbody > tr:nth-child(odd),
[data-rd-theme="night"] .table-striped > tbody > tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.04) !important;
}
[data-rd-theme="dark"] [style*="whitesmoke"],
[data-rd-theme="dark"] [style*="WhiteSmoke"],
[data-rd-theme="dark"] #mainNav,
[data-rd-theme="dark"] .staticHeader,
[data-rd-theme="night"] [style*="whitesmoke"],
[data-rd-theme="night"] [style*="WhiteSmoke"],
[data-rd-theme="night"] #mainNav,
[data-rd-theme="night"] .staticHeader {
background-color: #242424 !important;
}
/* ----------------------------------------------------------------------------
17. VIEW-LEVEL COHESION — warm up the many inline cold-grey backgrounds and
harmonise Bootstrap widgets, WITHOUT editing any view (keeps this a single,
removable file). These are colour-only and use attribute selectors so the
inline style="background-color:whitesmoke/#eeeeee" panels stop clashing.
---------------------------------------------------------------------------- */
[style*="whitesmoke"],
[style*="WhiteSmoke"] {
background-color: var(--iw-parchment) !important;
}
[style*="background-color: #eeeeee"],
[style*="background-color:#eeeeee"],
[style*="background-color: #eee"],
[style*="background-color:#eee"] {
background-color: var(--iw-parchment-deep) !important;
}
/* Fixed side TOC panel (themesread / referenceread / MotherTalksRead) */
#mainNav {
background-color: var(--iw-parchment) !important;
}
/* Darshan / timeline vertical rule */
.timeline:before {
background-color: var(--iw-rule) !important;
}
/* Bootstrap dark table headers + generic Bootstrap tables (DataTables) */
.thead-dark,
.thead-dark th,
.table .thead-dark th,
table.dataTable thead th {
background-color: rgba(201, 185, 148, 0.22) !important;
color: var(--iw-ink-soft) !important;
border-color: var(--iw-rule) !important;
}
.table {
color: var(--iw-ink);
}
.table th,
.table td,
.table-bordered,
.table-bordered th,
.table-bordered td {
border-color: var(--iw-rule) !important;
}
.table-striped > tbody > tr:nth-of-type(odd),
.table.table-striped > tbody > tr:nth-of-type(odd) {
background-color: rgba(201, 185, 148, 0.10);
}
/* Materialize autocomplete dropdown */
.autocomplete-content,
ul.autocomplete-content.dropdown-content {
background-color: var(--iw-surface);
border: 1px solid var(--iw-rule);
}
.autocomplete-content li:hover {
background-color: rgba(184, 101, 27, 0.08);
}
.autocomplete-content li .highlight {
color: var(--iw-saffron);
}
/* Disabled buttons — clearly read as inactive on parchment */
.btn:disabled,
.btn-large:disabled,
.btn-small:disabled,
.btn.disabled,
.btn-large.disabled,
.btn-small.disabled,
.btn[disabled] {
background-color: var(--iw-parchment-deep) !important;
color: var(--iw-ink-faint) !important;
box-shadow: none !important;
transform: none !important;
}
/* AI chat bubbles (Agenda / IncarnateAi / AskAi modals) */
.bot-message {
background-color: rgba(201, 185, 148, 0.18) !important;
color: var(--iw-ink);
}
.user-message {
background-color: rgba(184, 101, 27, 0.10) !important;
color: var(--iw-ink);
}
/* Bootstrap .btn-dark — warm "ink" button instead of cold near-black */
.btn-dark,
a.btn-dark {
background-color: var(--iw-ink) !important;
color: #f6f0e2 !important;
}
.btn-dark:hover,
a.btn-dark:hover {
background-color: var(--iw-ink-soft) !important;
}
/* Sticky white header on Darshan/Timeline reading pages */
div.staticHeader,
.staticHeader {
background-color: var(--iw-parchment) !important;
}
/* Dark date badge → warm saffron pill */
.badge-self {
background-color: var(--iw-saffron) !important;
color: #fff !important;
}
/* Home page book-selection modal — replace the hardcoded purple/grey states */
#bookSelectionModal .collection-item {
color: var(--iw-ink) !important;
}
#bookSelectionModal .collection-item:hover {
background-color: rgba(184, 101, 27, 0.06) !important;
}
#bookSelectionModal .collection-item.active {
background-color: rgba(184, 101, 27, 0.14) !important;
color: var(--iw-saffron-deep) !important;
}
/* ----------------------------------------------------------------------------
16. RESPONSIVE
---------------------------------------------------------------------------- */
@media (max-width: 600px) {
body {
font-size: 17px;
}
}
@media (prefers-reduced-motion: reduce) {
.btn, .btn-large, .btn-small, .btn-floating,
nav.navbar-default a, .collapsible-header,
.tabs .tab a, a.breadcrumb {
transition: none;
}
}
@media print {
body {
background: #fff !important;
}
nav.navbar-default,
.connect-feedback,
.fixed-action-btn {
display: none !important;
}
}
/* ----------------------------------------------------------------------------
18. VOLUME / COMPILATION TABLE OF CONTENTS — the site's core index page.
The dotted-leader rows (.toc-chapter / .newArya / .toc-chapter-title) paint
themselves white so the title masks the leader dots. On parchment that left
stripey white bands. Fix (warm/blog look): recolour the row fills AND the
title mask to a soft parchment, and frame the whole "Contents" block as one
warm index panel — so the dotted leaders + blue links sit on the parchment,
no white. Chapter links stay blue.
---------------------------------------------------------------------------- */
.col.z-depth-1:has(.parts) {
background-color: var(--iw-parchment-soft);
border: 1px solid var(--iw-rule);
border-radius: 4px;
box-shadow: 0 2px 14px var(--iw-shadow);
padding-top: 10px;
padding-bottom: 20px;
}
ul.parts {
background-color: transparent;
}
/* Recolour the white leader fills + the title mask to match the parchment panel
(same colour everywhere → the leader dots blend, no white bands). Keep the
dot.png leader image and the inline masking behaviour intact. */
.toc-chapter,
.newArya {
background-color: var(--iw-parchment-soft);
}
.toc-chapter-title {
background-color: var(--iw-parchment-soft);
}
/* Chapter links: keep them blue (not saffron), with a gentle darker-blue hover */
.col.z-depth-1:has(.parts) a.toc-chapter-title,
ul.parts a:not(.btn):not(.editNotes) {
color: #337ab7;
}
ul.parts a:not(.btn):not(.editNotes):hover {
color: #1c5a99;
text-decoration: underline;
}
/* The Contents heading sits on the white sheet — keep it in the display serif */
.col.z-depth-1:has(.parts) > h1 {
color: var(--iw-ink);
}
/* Dark reading theme: turn the index sheet and its white leader rows dark. */
[data-rd-theme="dark"] .col.z-depth-1:has(.parts),
[data-rd-theme="night"] .col.z-depth-1:has(.parts) {
background-color: #1e1e1e;
border-color: #3a3a3a;
}
[data-rd-theme="dark"] .toc-chapter,
[data-rd-theme="dark"] .toc-chapter-title,
[data-rd-theme="dark"] .newArya,
[data-rd-theme="night"] .toc-chapter,
[data-rd-theme="night"] .toc-chapter-title,
[data-rd-theme="night"] .newArya {
background-color: #1e1e1e !important;
}
[data-rd-theme="dark"] ul.parts a:not(.btn):not(.editNotes),
[data-rd-theme="night"] ul.parts a:not(.btn):not(.editNotes) {
color: #6db3ff;
}
/* ----------------------------------------------------------------------------
19. READING PROSE — bring the blog reader's "parchment article" typography to
the site's reading content (chapters, summaries, rendered HTML). Scoped to
the content holders; .blog-reader keeps its own more-specific rules, and the
reading-preferences font/size controls still win for body paragraphs.
---------------------------------------------------------------------------- */
.text-bg h1, .text-bg h2,
.text-bg-french h1, .text-bg-french h2,
.markdown-content h1, .markdown-content h2 {
font-family: var(--iw-display);
font-weight: 500;
color: var(--iw-ink);
border-bottom: 1px solid var(--iw-rule);
padding-bottom: 8px;
margin: 46px 0 18px;
}
.text-bg h3,
.text-bg-french h3,
.markdown-content h3 {
font-family: var(--iw-display);
font-style: italic;
font-weight: 500;
color: var(--iw-saffron-deep);
border-bottom: 1px dotted var(--iw-rule);
padding-bottom: 5px;
margin: 38px 0 12px;
}
.text-bg h3::before,
.text-bg-french h3::before,
.markdown-content h3::before {
content: "\00A7\00A0"; /* "§ " */
font-style: normal;
font-weight: 400;
color: var(--iw-saffron);
font-size: 0.8em;
vertical-align: 2px;
}
.text-bg h4, .text-bg h5, .text-bg h6,
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
font-family: var(--iw-sans);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--iw-ink-soft);
}
/* Drop cap on the opening paragraph (only fires when content starts with prose) */
.text-bg > p:first-child::first-letter,
.markdown-content > p:first-child::first-letter {
font-family: var(--iw-display);
font-size: 3.4em;
font-weight: 500;
line-height: 0.8;
float: left;
padding: 6px 10px 0 0;
color: var(--iw-saffron-deep);
}
.text-bg em, .markdown-content em { color: var(--iw-ink-soft); }
.text-bg strong, .markdown-content strong { color: var(--iw-ink); font-weight: 600; }
/* Pull-quote blockquotes */
.text-bg blockquote,
.text-bg-french blockquote,
.markdown-content blockquote {
margin: 32px 0;
padding: 4px 0 4px 26px;
border-left: 2px solid var(--iw-saffron);
background: transparent;
font-family: var(--iw-display);
font-size: 1.15em;
font-style: italic;
line-height: 1.5;
color: var(--iw-ink);
}
/* Ornamented list markers */
.text-bg ul li::marker,
.markdown-content ul li::marker {
color: var(--iw-saffron);
}
.text-bg ol li::marker,
.markdown-content ol li::marker {
color: var(--iw-saffron);
font-family: var(--iw-display);
font-style: italic;
}
/* Dark reading theme: keep the saffron subheads legible, soften the rules */
[data-rd-theme="dark"] .text-bg h1, [data-rd-theme="dark"] .text-bg h2,
[data-rd-theme="dark"] .markdown-content h1, [data-rd-theme="dark"] .markdown-content h2,
[data-rd-theme="night"] .text-bg h1, [data-rd-theme="night"] .text-bg h2,
[data-rd-theme="night"] .markdown-content h1, [data-rd-theme="night"] .markdown-content h2 {
color: #ececec;
border-bottom-color: #3a3a3a;
}
/* ============================================================================
20. TYPE SCALE & CONSISTENCY
One readable, predictable scale across the whole site. Raises the many
too-small (11–15px) texts to a comfortable floor, unifies the heading sizes
(Site.css had a lone 52px h1 next to 20–25px utility headings), and gives the
shared components a single size — all CSS-only, no view edits, fully
removable. Reading body text is set via --rd-font-size (19px) above.
============================================================================ */
/* (A) Heading scale — overrides Site.css's 52px h1 and Materialize defaults.
No !important, so .blog-reader's larger display titles and any deliberate
per-page heading still win. */
h1, .page-header { font-size: clamp(30px, 4vw, 40px); }
h2 { font-size: clamp(25px, 3vw, 30px); }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }
.alphabet { font-size: 36px; }
.volume-title a { font-size: 22px; }
/* (B) Raise the small-text floor — Site.css utility classes (these carry
!important in Site.css, so we match it). */
.aboutContent,
.viewToc { font-size: 16px !important; }
.aboutContent i { font-size: 16px !important; }
.toc-item-title { font-size: 17px; }
.navigators a { font-size: 16px; }
.small-span,
.small-summary,
.summary-small { font-size: 16px !important; }
.motto { font-size: 16px; }
#words { font-size: 100%; }
#words li { font-size: 18px; }
/* (C) Raise the many too-small INLINE font sizes that bypass the stylesheets.
Attribute selectors catch style="font-size:11px..15px" wherever they appear
(search-result modals, meta lines, badges) and lift them to a readable floor.
Sizes >= 16px and decorative large sizes are left untouched. */
[style*="font-size: 10px"], [style*="font-size:10px"],
[style*="font-size: 11px"], [style*="font-size:11px"],
[style*="font-size: 12px"], [style*="font-size:12px"] { font-size: 14px !important; }
[style*="font-size: 13px"], [style*="font-size:13px"],
[style*="font-size: 14px"], [style*="font-size:14px"] { font-size: 15px !important; }
[style*="font-size: 15px"], [style*="font-size:15px"] { font-size: 16px !important; }
/* (D) Shared components — one consistent size each, everywhere they appear. */
.breadcrumb,
a.breadcrumb { font-size: 16px; }
.tabs .tab a { font-size: 16px; }
.input-field label,
.input-field > label { font-size: 16px; }
.btn,
.btn-flat { font-size: 15px; }
.collection .collection-item { font-size: 17px; }
.card .card-title { font-size: 22px; }
table.striped,
table.bordered,
table.highlight,
.table { font-size: 17px; }
.dropdown-content li > a,
.dropdown-content li > span { font-size: 16px; }
.chip { font-size: 14px; }
/* (E) Targeted consistency fixes surfaced by the audit. */
.description-para {
font-size: 18px !important;
border: 2px solid var(--iw-rule) !important;
background: rgba(201, 185, 148, 0.08) !important;
}
/* Inline "Edit / Save" text buttons on Talks & Conversations — give them the
same saffron affordance as the rest of the buttons. */
.editThisText,
.saveThisText {
background-color: var(--iw-saffron) !important;
color: #fff !important;
}
.editThisText:hover,
.saveThisText:hover { background-color: var(--iw-saffron-deep) !important; }
/* Timeline / event accent chips → the parchment saffron, not cold grey/blue. */
.timeline__year,
.timeline__date,
.timeline__month {
background-color: var(--iw-saffron) !important;
color: #fff !important;
}
/* Nested scrollspy TOC links were shrinking to ~12px via 0.7em — lift them. */
.nav .nav li > a { font-size: 0.9em; }