/* ============================================================================
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;
}
}
/* Reconciliation: retired SunSeek chrome assets no longer exist in R2. */
.footer-section::before,
.footer-section::after {
background-image: none !important;
}
.tsix-about-hero[style*="d2670381493aebb89afccaf6ff55a3276810a708"] {
background-image: url("https://pub-77dfd32c2b4a41d3a61992ed7048ee22.r2.dev/__assets/www.sunseek.africa/1d/9f/1d9f24e634c52fa00e0dc340c6aa38e11cc0fc0f.jpg") !important;
}
/* ---------------------------------------------------------------------------
5. 2026-08-13 responsive audit - phone containment and readable archives
The public sitemap was checked at 390px and 768px. These rules address the
remaining phone-only overflow without changing the clean tablet layout.
------------------------------------------------------------------------- */
.summernote-content video,
.summernote-content iframe {
width: 100% !important;
height: auto !important;
aspect-ratio: 16 / 9;
}
.summernote-content,
.summernote-content p,
.summernote-content div,
.summernote-content span,
.summernote-content li {
overflow-wrap: anywhere;
word-break: normal;
}
.archive-media-placeholder {
display: grid;
place-items: center;
width: 100%;
min-height: 160px;
margin: 1.25rem 0;
padding: 1.5rem;
border: 1px solid rgba(16, 82, 73, 0.2);
border-radius: 6px;
background: #f4f8f7;
color: var(--isi-text-color);
font-family: var(--isi-font-body);
font-size: 1rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
/* Keep tablet navigation compact through the 1024px class. The source theme
expands its desktop menu at 992px even though the links need about 1280px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
.ss-header__inner {
width: calc(100% - 240px) !important;
max-width: calc(100% - 240px) !important;
}
.ss-header__nav {
display: flex;
flex: 1 1 auto;
justify-content: center;
min-width: 0;
}
.ss-header__toggle {
display: flex !important;
}
.ss-nav {
position: absolute !important;
top: 100% !important;
right: 0 !important;
left: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
max-height: 0 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: var(--ss-header-bg, #fff) !important;
}
.ss-nav.open {
max-height: calc(100vh - 112px) !important;
}
.ss-nav > li,
.ss-nav__link {
width: 100%;
}
.ss-nav__item--has-children > .ss-dropdown {
position: static !important;
display: none !important;
width: 100% !important;
transform: none !important;
}
.ss-nav__item--has-children.open > .ss-dropdown {
display: block !important;
}
}
@media (max-width: 575.98px) {
html,
body {
max-width: 100%;
overflow-x: clip;
}
.container > .row.g-5 {
--bs-gutter-x: 0;
}
.ss-header,
.ss-header__inner,
.ss-header__nav {
min-width: 0;
max-width: 100%;
}
.ss-header__inner {
width: calc(100% - 120px) !important;
margin-left: 120px !important;
padding-inline: 0.75rem !important;
}
.ss-theme-six-logo-shell {
top: 0;
left: 0;
width: 120px;
max-width: 120px;
height: 112px !important;
}
.ss-theme-six-logo-bg {
width: 120px;
max-width: 120px;
height: 112px !important;
min-height: 0 !important;
padding: 0.5rem;
align-items: center;
}
.ss-theme-six-logo-bg img {
width: 100%;
max-width: 104px;
max-height: 96px;
padding: 0;
transform: none;
object-fit: contain;
}
.ss-nav {
max-width: 100vw;
}
.footer-section.theme-six-footer-main {
width: 100%;
max-width: 100vw;
}
.main-description.mx-120.px-120 {
display: block;
width: 100%;
margin-inline: 0 !important;
padding: 3rem 1.25rem !important;
}
.main-description.mx-120.px-120 > .container {
width: 100%;
max-width: 100%;
padding-inline: 0 !important;
}
.main-description .h1-mega {
width: 100%;
max-width: 100%;
margin: 0;
font-size: 2rem !important;
line-height: 1.3;
overflow-wrap: anywhere;
}
#resources-tenders,
#resources-tenders > .p-4,
#resources-tenders .table-responsive {
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
.tender-archive-card,
.tender-archive-card > .card-body {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
#resources-tenders > .p-4 {
padding: 1rem !important;
}
#resources-tenders .table-responsive {
overflow: visible;
}
#resources-tenders table,
#resources-tenders tbody,
#resources-tenders tr,
#resources-tenders td {
display: block;
width: 100%;
}
#resources-tenders thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#resources-tenders tbody tr {
padding: 1rem;
margin-bottom: 0.85rem;
border: 1px solid rgba(16, 82, 73, 0.16);
border-radius: 6px;
background: #fff;
}
#resources-tenders tbody td {
padding: 0.3rem 0;
border: 0;
text-align: left !important;
white-space: normal !important;
overflow-wrap: anywhere;
}
#resources-tenders tbody td:nth-child(1)::before {
content: "Published: ";
font-weight: 700;
}
#resources-tenders tbody td:nth-child(3):not(:empty)::before {
content: "Closing date: ";
font-weight: 700;
}
#resources-tenders tbody td:empty {
display: none;
}
#resources-tenders .d-flex {
justify-content: flex-start !important;
}
}