/* ============================================================================ iSimangaliso Wetland Park — sitewide typography & alignment overrides ---------------------------------------------------------------------------- Backlog rows implemented here: ISI-ACT-0028 Standardize colours, fonts, and typography sitewide ISI-ACT-0031 Increase font size / readable sizing + justify text ISI-ACT-0057 Standardize article fonts, colour, size, justification ISI-ACT-0068 Text/image alignment fixes (systematic portion) ISI-ACT-0072 Standardize newsflash fonts ---------------------------------------------------------------------------- Why this file exists: the shared theme CSS is hosted on R2 and cannot be edited. This stylesheet is loaded LAST on every page (one before ) so it can normalise typography without touching theme assets. Removing the tags restores the previous state (fully reversible). Measured baseline (staging, 2026-07-02, 1366px): - Site body copy: 18px "Serenity", colour #105249, line-height ~1.08 (font "normal" metric — visibly cramped). - Article bodies (.summernote-content) fell back to the OS system font stack and are full of pasted inline styles: 1,163x font-size:13px, 191x 12px, 1,241x 'Open Sans', 336x Arial, 1,214x grey #444444, 237x lime #97CC02, mixed text-align (128 articles justified, 51 mixed, 32 none), 182 images with fixed pixel widths and max-width:none, 883 pasted divs with fixed widths (e.g. 790px). `!important` is used ONLY inside .summernote-content, where it is the only way to neutralise those pasted inline styles. ========================================================================== */ /* --------------------------------------------------------------------------- 0. Design tokens (single source of truth for this override layer) ------------------------------------------------------------------------- */ :root { --isi-font-body: "Serenity", sans-serif; /* brand text face (theme-loaded) */ --isi-text-color: #105249; /* brand deep green, matches body */ --isi-body-size: 18px; /* site-wide body copy size */ --isi-body-lh: 1.65; /* readable body line-height */ --isi-content-lh: 1.7; /* long-form article line-height */ } /* --------------------------------------------------------------------------- 1. ISI-ACT-0031 — sitewide readable body copy The theme leaves paragraph line-height at the Serenity font's "normal" metric (~1.08), which renders cramped multi-line copy. Element-level selector only: nav links, buttons, headings and class-based utilities (.lh-*) keep their own values because classes outrank an element selector. Font size is already 18px sitewide, so only rhythm needs the global fix; undersized text exists inside article bodies and is raised in section 2. ------------------------------------------------------------------------- */ p { line-height: var(--isi-body-lh); } /* Theme class rules (.serenity-light / .title-description) pin paragraph line-height back to ~1.09 on places/landing copy; p. outranks the theme's bare class selectors while still touching paragraphs only. */ p.serenity-light, p.title-description, p.activity-stays-v2__description, p.activity-card-v2__text { line-height: var(--isi-body-lh); } /* --------------------------------------------------------------------------- 2. ISI-ACT-0057 / ISI-ACT-0072 / ISI-ACT-0031 — article & newsflash bodies All 212 live articles (news + newsflash share the same blog-details generation) wrap their copy in .blog-article__content > .summernote-content. Flatten pasted Word/web inline styles to the brand type ramp. ------------------------------------------------------------------------- */ .summernote-content, .summernote-content p, .summernote-content div, .summernote-content span, .summernote-content font, .summernote-content li, .summernote-content td, .summernote-content th { font-family: var(--isi-font-body) !important; font-size: var(--isi-body-size) !important; /* raises pasted 12/13px copy */ color: var(--isi-text-color) !important; /* replaces #444/#626262/lime */ line-height: var(--isi-content-lh) !important; background-color: transparent !important; /* strips paste-artifact greys */ } /* Links inside article bodies: brand colour, always underlined so they stay distinguishable from the (same-colour) body text. */ .summernote-content a, .summernote-content a span { color: var(--isi-text-color) !important; text-decoration: underline !important; } /* Content heading scale (0028/0057): pasted articles contain h1–h6 at random sizes/faces. Normalise to a single ramp under the 48px page title. */ .summernote-content h1, .summernote-content h2 { font-size: 28px !important; } .summernote-content h3 { font-size: 24px !important; } .summernote-content h4 { font-size: 20px !important; } .summernote-content h5, .summernote-content h6 { font-size: 18px !important; font-weight: 700 !important; } .summernote-content h1, .summernote-content h2, .summernote-content h3, .summernote-content h4, .summernote-content h5, .summernote-content h6 { font-family: var(--isi-font-body) !important; color: var(--isi-text-color) !important; line-height: 1.25 !important; text-align: left !important; background-color: transparent !important; } /* Spans/fonts pasted inside headings must follow the heading, not the 18px body flatten above (higher specificity, declared later — always wins). */ .summernote-content h1 span, .summernote-content h1 font, .summernote-content h2 span, .summernote-content h2 font, .summernote-content h3 span, .summernote-content h3 font, .summernote-content h4 span, .summernote-content h4 font, .summernote-content h5 span, .summernote-content h5 font, .summernote-content h6 span, .summernote-content h6 font { font-size: inherit !important; font-family: inherit !important; color: inherit !important; line-height: inherit !important; } /* --------------------------------------------------------------------------- 3. ISI-ACT-0031 / ISI-ACT-0057 — justification Client asked for justified article copy. 128 of 212 articles already carry pasted justify; this makes it uniform. Applied from 576px up; on phones narrow justified columns produce rivers, so copy falls back to clean left alignment (judgment call — flagged for client sign-off). NOT applied to nav, buttons, cards, hero or headings. ------------------------------------------------------------------------- */ @media (min-width: 576px) { .summernote-content p, .summernote-content li, .summernote-content div { text-align: justify !important; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; } /* Long-form About/richtext copy (no inline styles there, no !important). */ .tsix-richtext p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; } } @media (max-width: 575.98px) { .summernote-content p, .summernote-content li, .summernote-content div { text-align: left !important; } } /* --------------------------------------------------------------------------- 4. ISI-ACT-0068 — text/image alignment (systematic fixes) 182 article images carry fixed pixel widths with max-width:none and render inline against wrapped text; pasted divs/cells carry fixed widths that overflow narrow viewports. Cap everything to its container and present article images as centred block figures. ------------------------------------------------------------------------- */ .summernote-content img { max-width: 100% !important; /* fixed inline widths can no longer overflow */ height: auto !important; /* keep aspect ratio when capped */ display: block; /* stop text wrapping awkwardly around imgs */ margin: 1.25rem auto; /* centred, with breathing room */ } .summernote-content div[style*="width"], .summernote-content table, .summernote-content td[style*="width"], .summernote-content th[style*="width"] { max-width: 100% !important; } .summernote-content iframe { max-width: 100%; } /* ---------------------------------------------------------------- */ /* About page media (ISI-ACT-0067): below the lg breakpoint the two */ /* about columns stack, so the portrait photo would otherwise render */ /* at natural height (~1000px+) and overflow the fold. */ @media (max-width: 991.98px) { .tsix-about-section__media { max-height: 440px; } .tsix-about-section__media img { max-height: 440px; object-fit: cover; object-position: center; } }