:root {
--isi-font-body: "Serenity", sans-serif;
--isi-text-color: #105249;
--isi-body-size: 18px;
--isi-body-lh: 1.65;
--isi-content-lh: 1.7;
}
p {
line-height: var(--isi-body-lh);
}
p.serenity-light,
p.title-description,
p.activity-stays-v2__description,
p.activity-card-v2__text {
line-height: var(--isi-body-lh);
}
.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;
color: var(--isi-text-color) !important;
line-height: var(--isi-content-lh) !important;
background-color: transparent !important;
}
.summernote-content a,
.summernote-content a span {
color: var(--isi-text-color) !important;
text-decoration: underline !important;
}
.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;
}
.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;
}
@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;
}
.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;
}}
.summernote-content img {
max-width: 100% !important;
height: auto !important;
display: block;
margin: 1.25rem auto;
}
.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%;
}
@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;
}}
.footer-section::before,
.footer-section::after {
background-image: none !important;
}
.tsix-about-hero { background-image: url(/images/design/baseline-a018.jpg) !important; background-size: cover; background-position: center; }
.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;
}
@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(1080px - 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: 1920px;
}
.footer-section.theme-six-footer-main {
width: 100%;
max-width: 1920px;
}
.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;
}}
.tsix-about-hero {
position: relative;
background-size: cover;
background-position: center;
min-height: 360px;
display: flex;
align-items: center;
}
.tsix-about-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(6, 42, 58, 0.72), rgba(6, 42, 58, 0.35));
}
.tsix-about-hero__content {
padding: clamp(2rem, 96px, 4rem) 0;
}
.tsix-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 1rem;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
color: var(--color-quinary, #FDFDFD);
}
.tsix-richtext p {
margin-bottom: 1.2rem;
}
.text-white-75 {
color: rgba(255, 255, 255, 0.8) !important;
}
.card img {
border-radius: 16px;
}
.breadcrumb-area::after {
background-color: #FDFDFD !important;
opacity: 0.76 !important;
}
:root {
--color-primary: #00ABC5;
--color-primary-rgb: 0, 171, 197;
--color-secondary: #F7C23D;
--color-secondary-rgb: 247, 194, 61;
--color-tertiary: #105249;
--color-tertiary-rgb: 16, 82, 73;
--color-quinary: #FFDE8A;
--color-quinary-rgb: 255, 222, 138;
--font-default-color: #105249;
--font-default-color-rgb: 16, 82, 73;
--font-highlight-color: #ED1B24;
--font-highlight-color-rgb: 237, 27, 36;
--spacing-section-gap: 6rem;
--spacing-activity-card-gap: 1rem;
--spacing-extra-lg-vertical: 6rem;
--spacing-extra-lg-horizontal: 3rem;
--spacing-lg-vertical: 4.5rem;
--spacing-lg-horizontal: 2.5rem;
--spacing-md-vertical: 3.5rem;
--spacing-md-horizontal: 2rem;
--spacing-vertical: 3rem;
--spacing-horizontal: 1.75rem;
--spacing-sm-vertical: 2rem;
--spacing-sm-horizontal: 1.5rem;
--spacing-xs-vertical: 1rem;
--spacing-xs-horizontal: 1rem;
--button-border-radius: 999px;
--button-padding-y: 0.75rem;
--button-padding-x: 1.75rem;
--form-input-border-radius: 0.75rem;
--form-input-padding-y: 0.75rem;
--form-input-padding-x: 1rem;
--form-input-background: #ffffff;
--form-input-color: #333333;
--form-input-border-color: #ced4da;
body {
color: #105249;
font-family: 'Serenity', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 19.5px;
font-style: normal;
}
--typography-h1_prime-font-family: "Warnock Pro", sans-serif;
--typography-h1_prime-font-weight: 600;
--typography-h1_prime-font-size: 64px;
--typography-h1_prime-line-height: 60px;
--typography-h1_prime-letter-spacing: normal;
--typography-h1_prime-font-style: normal;
--typography-h1_prime-text-transform: none;
--typography-h1_prime-color: var(--font-default-color);
--typography-h1_mega-font-family: "Serenity", sans-serif;
--typography-h1_mega-font-weight: 200;
--typography-h1_mega-font-size: 64px;
--typography-h1_mega-line-height: 60px;
--typography-h1_mega-letter-spacing: 1px;
--typography-h1_mega-font-style: normal;
--typography-h1_mega-text-transform: none;
--typography-h1_mega-color: var(--font-default-color);
--typography-h1_super-font-family: "Warnock Pro", sans-serif;
--typography-h1_super-font-weight: 600;
--typography-h1_super-font-size: 50px;
--typography-h1_super-line-height: 50px;
--typography-h1_super-letter-spacing: -5px;
--typography-h1_super-font-style: italic;
--typography-h1_super-text-transform: none;
--typography-h1_super-color: var(--font-default-color);
--typography-h1-font-family: "Serenity", sans-serif;
--typography-h1-font-weight: 200;
--typography-h1-font-size: 50px;
--typography-h1-line-height: 50px;
--typography-h1-letter-spacing: normal;
--typography-h1-font-style: normal;
--typography-h1-text-transform: none;
--typography-h1-color: var(--font-default-color);
--typography-h2-font-family: "Serenity", sans-serif;
--typography-h2-font-weight: 200;
--typography-h2-font-size: 40px;
--typography-h2-line-height: 37px;
--typography-h2-letter-spacing: normal;
--typography-h2-font-style: normal;
--typography-h2-text-transform: none;
--typography-h2-color: var(--font-default-color);
--typography-h3-font-family: "Warnock Pro", sans-serif;
--typography-h3-font-weight: 700;
--typography-h3-font-size: 40px;
--typography-h3-line-height: 37px;
--typography-h3-letter-spacing: normal;
--typography-h3-font-style: italic;
--typography-h3-text-transform: none;
--typography-h3-color: var(--font-default-color);
--typography-h4-font-family: "Serenity", sans-serif;
--typography-h4-font-weight: 200;
--typography-h4-font-size: 32px;
--typography-h4-line-height: 26px;
--typography-h4-letter-spacing: normal;
--typography-h4-font-style: normal;
--typography-h4-text-transform: none;
--typography-h4-color: var(--font-default-color);
--typography-h5-font-family: "Serenity", sans-serif;
--typography-h5-font-weight: 500;
--typography-h5-font-size: 22px;
--typography-h5-line-height: 1.2rem;
--typography-h5-letter-spacing: normal;
--typography-h5-font-style: italic;
--typography-h5-text-transform: none;
--typography-h5-color: var(--font-default-color);
--typography-h6-font-family: "Serenity", sans-serif;
--typography-h6-font-weight: 700;
--typography-h6-font-size: 18px;
--typography-h6-line-height: 22.5px;
--typography-h6-letter-spacing: normal;
--typography-h6-font-style: normal;
--typography-h6-text-transform: none;
--typography-h6-color: var(--font-default-color);
--typography-text-font-family: "Serenity", sans-serif;
--typography-text-font-weight: 400;
--typography-text-font-size: 18px;
--typography-text-line-height: 19.5px;
--typography-text-letter-spacing: normal;
--typography-text-font-style: normal;
--typography-text-text-transform: none;
--typography-text-color: var(--font-default-color);
--typography-highlight-font-family: "Warnock Pro", sans-serif;
--typography-highlight-font-weight: 700;
--typography-highlight-font-style: italic;
--typography-highlight-text-transform: none;
--typography-highlight-color: inherit;
}
.h1-prime {
font-family: 'Warnock Pro', sans-serif; font-weight: 600; font-size: 64px; line-height: 60px; font-style: normal; text-transform: none; color: var(--font-default-color); }
.h1-mega {
font-family: 'Serenity', sans-serif; font-weight: 200; font-size: 64px; line-height: 60px; letter-spacing: 1px; font-style: normal; text-transform: none; color: var(--font-default-color); }
.h1-super {
font-family: 'Warnock Pro', sans-serif; font-weight: 600; font-size: 50px; line-height: 50px; letter-spacing: -5px; font-style: italic; text-transform: none; color: var(--font-default-color); }
h1, .heading-1 {
font-family: 'Serenity', sans-serif; font-weight: 200; font-size: 50px; line-height: 50px; font-style: normal; text-transform: none; color: var(--font-default-color); }
h2, .heading-2 {
font-family: 'Serenity', sans-serif; font-weight: 200; font-size: 40px; line-height: 37px; font-style: normal; text-transform: none; color: var(--font-default-color); }
h3, .heading-3 {
font-family: 'Warnock Pro', sans-serif; font-weight: 700; font-size: 40px; line-height: 37px; font-style: italic; text-transform: none; color: var(--font-default-color); }
h4, .heading-4 {
font-family: 'Serenity', sans-serif; font-weight: 200; font-size: 32px; line-height: 26px; font-style: normal; text-transform: none; color: var(--font-default-color); }
h5, .heading-5 {
font-family: 'Serenity', sans-serif; font-weight: 500; font-size: 22px; line-height: 1.2rem; font-style: italic; text-transform: none; color: var(--font-default-color); }
h6, .heading-6 {
font-family: 'Serenity', sans-serif; font-weight: 700; font-size: 18px; line-height: 22.5px; font-style: normal; text-transform: none; color: var(--font-default-color); }
body {
font-family: 'Serenity', sans-serif; font-weight: 400; font-size: 18px; line-height: 19.5px; font-style: normal; text-transform: none; color: var(--font-default-color); }
body {
color: #105249;
}
strong,
b,
.font-highlight {
font-family: inherit;
font-weight: inherit;
font-style: inherit;
color: inherit;
font-family: 'Warnock Pro', sans-serif; font-weight: 700; font-style: italic; }
/* legacy menu overrides removed; unified header controls styles */
.newsletter-content, .newsletter-content .h1-mega, .activity-details .h1-prime {
color: white !important;
}
.ss-nav__link {
text-decoration: none;
}
.ss-header .ss-dropdown__link {
transition: all 0.3s ease;
cursor: pointer;
display: flex;
align-items: center;
margin-bottom: 0 !important;
border-radius: 0;
border: 1px solid #fff;
padding: 9px 21px 13px !important;
transform: none !important;
justify-content: center;
white-space: nowrap;
}
.ss-dropdown {
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
}
/* Center desktop dropdowns beneath their parent link */
.ss-nav__item--has-children > .ss-dropdown {
left: 50%;
transform: translate(-50%, 10px);
}
.ss-nav__item--has-children.open > .ss-dropdown {
transform: translate(-50%, 0);
}
/* Keep mobile stacked menus untouched */
@media (max-width: 992px) {
.ss-nav__item--has-children > .ss-dropdown {
left: 0;
transform: none;
}
}
.ss-header__social a {
font-size: 1.35rem !important; /* production icons are ~22px */
line-height: 1;
letter-spacing: 10px;
}
/* Tighten the header height like production */
.ss-header__inner {
padding: 0.45rem 1.5rem !important; /* reduces top/bottom space */
}
.ss-nav__link {
padding-top: 0.75rem !important;
padding-bottom: 0.75rem !important;
}
.ss-theme-six-logo-shell{
max-width: 30%;
background-color: transparent;
z-axis:1003;
position: fixed;
top: -20px;
left:-20px;
padding:0px;
}
.ss-theme-six-logo-bg{
max-width: 270px;
height: 230px;
background-size: auto;
padding-left: 22px;
background-color:#ffffff;
border-radius:0 0 28px 28px;
box-shadow:0 6px 18px rgba(0,0,0,0.10);
}
.ss-theme-six-logo-bg img{
max-width: 220px;
vertical-align: top;
transform: translateY(-30px);
padding-right: 25px;
}
.ss-header__inner{
height: 112px;
margin-left: 240px;
}
/* ISI-ACT-0040: menu banner full length with bigger icons; keeps About Us
dropdown clear of the fixed logo card (ISI-ACT-0003/0029). */
.ss-header__social a {
font-size: 1.75rem !important;
}
@media (min-width: 1279.98px) and (max-width: 1550px) {
.ss-nav__link {
white-space: nowrap;
font-size: 13px !important;
letter-spacing: 0.5px !important;
padding-left: 0.6rem !important;
padding-right: 0.6rem !important;
}
.ss-header__inner {
margin-left: 210px;
}
.ss-header__social a {
font-size: 1.45rem !important;
}
}
@media (min-width: 992.02px) {
.ss-nav > .ss-nav__item--has-children:first-child > .ss-dropdown {
left: 0;
transform: translate(0, 10px);
}
.ss-nav > .ss-nav__item--has-children:first-child.open > .ss-dropdown {
transform: translate(0, 0);
}
}
.ue-section {
background: white;
padding: 20px 0 110px;
position: relative;
}
.ue-section-highlighted {
background: var(--color-secondary, #F7C23D);
padding: 70px 0 70px;
position: relative;
padding-inline: 230px;
}
.ue-title, .ue-title-highlighted {
font-size: 2.5rem;
}
.ue-light, .ue-light-highlighted {
font-weight: 200;
font-size: 64px;
line-height: 37px;
}
.ue-bold, .ue-bold-highlighted {
font-weight: 700;
font-size: 64px;
}
.col-lg-4.text-end, .col-lg-4.text-end-highlighted {
display: flex;
justify-content: flex-end;
}
/* Footer Styling */
.footer-container {
margin-top: 0;
}
/* Upper footer section */
.footer-upper {
background-color: #F7C23D;
padding: 15px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
h1.footer-copyright.mt-5.serenity-light {
font-size: 15px !important;
}
.footer-location {
color: #2d5a3d;
font-size: 0.9rem;
margin: 0 0 5px 0;
font-weight: 500;
}
.footer-location:last-child {
margin-bottom: 0;
}
/* Lower footer section */
.end-footer {
background-color: #FFDE8A;
padding: 20px 0;
color: #2d5a3d;
font-weight: 500;
}
.footer-section {
background: #fff8eb;
padding: 60px 0 30px;
position: relative;
overflow: hidden;
}
.footer-section::before {
content: "";
position: absolute;
top: -80px;
right: -50px;
background: url(./a065.png) no-repeat;
background-size: contain;
width: 250px;
height: 220px;
opacity: 0.15;
}
.footer-section::after {
content: "";
position: absolute;
bottom: -70px;
left: -40px;
background: url(./a040.png) no-repeat;
background-size: contain;
width: 220px;
height: 200px;
opacity: 0.15;
}
.footer-section .container {
position: relative;
z-index: 2;
}
.footer-menu-column {
min-width: 200px;
}
.footer-title {
color: #2d5a3d;
font-weight: 600;
margin-bottom: 15px;
font-size: 1.2rem;
}
.footer-logo {
max-width: 200px;
height: auto;
width: 100%;
}
.footer-icons {
display: flex;
gap: 15px;
}
.footer-icons i {
color: #2d5a3d;
font-size: 1.2rem;
}
.footer-heading {
color: #2d5a3d;
font-weight: 600;
font-style: italic;
margin-bottom: 20px;
font-size: 1.1rem;
}
.footer-list {
list-style: none;
padding: 0;
margin: 0;
}
.footer-list li {
margin-bottom: 8px;
}
.footer-list a {
color: #2d5a3d;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
font-family: 'SS Serenity', sans-serif;
}
.footer-list a:hover {
color: #1f3d29;
}
.footer-buttons {
gap: 10px;
}
.footer-btn {
background: #1f3d29;
border: none;
color: white;
padding: 12px 20px;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 500;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: space-between;
}
.footer-btn:hover {
background: #2d5a3d;
transform: translateY(-2px);
color: white;
}
.footer-btn i {
font-size: 0.8rem;
}
.footer-social {
display: flex;
gap: 15px;
}
.social-icon {
color: #2d5a3d !important;
font-size: 1.2rem;
transition: color 0.3s ease;
}
.social-icon i {
color: #2d5a3d !important;
}
.social-icon:hover {
color: #1f3d29 !important;
}
.social-icon:hover i {
color: #1f3d29 !important;
}
@media (max-width: 768px) {
.footer-copyright,
.footer-powered-by {
text-align: center;
margin-bottom: 10px;
}
.footer-section {
padding: 40px 0 20px;
}
.footer-buttons {
margin-bottom: 20px;
}
}
:root {
--theme-six-footer-background: #F7C23D;
--theme-six-footer-background-rgb: 247, 194, 61;
--theme-six-footer-copyright: #FFDE8A;
--theme-six-footer-copyright-rgb: 255, 222, 138;
}
.theme-six-footer-main {
background: var(--theme-six-footer-background);
}
.theme-six-footer-main::before {
background: linear-gradient(
135deg,
rgba(var(--theme-six-footer-background-rgb), 0.35),
rgba(var(--theme-six-footer-background-rgb), 0.15)
);
}
.theme-six-footer-main::after {
background: linear-gradient(
135deg,
rgba(var(--theme-six-footer-background-rgb), 0.2),
rgba(var(--theme-six-footer-background-rgb), 0.25)
);
}
.theme-six-footer-copyright {
background-color: var(--theme-six-footer-copyright);
}
.theme-six-footer-copyright,
.theme-six-footer-copyright .footer-powered-by,
.theme-six-footer-copyright .footer-copyright {
color: #2d5a3d;
}
/* ============================================================================
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*="a059.jpg"] {
background-image: url(/images/design/baseline-a018.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(1080px - 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: 1920px;
}
.footer-section.theme-six-footer-main {
width: 100%;
max-width: 1920px;
}
.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;
}
}
/* --- fixups --- */
a { color: #0d6efd; text-decoration: underline; }
a:hover { color: #0a58ca; }
/* rule 8 - iSimangaliso design-system pass. One appended block per page so the
whole site reads from the same tokens: #00ABC5 primary, #F7C23D secondary,
#105249 tertiary, Serenity type. Replaces Bootstrap's default blue links and
buttons, unifies the two competing page-header treatments, and removes the
hard-coded 200px hero inset that broke phone and tablet layouts. */
:root {
--isi-primary: #00ABC5;
--isi-secondary: #F7C23D;
--isi-tertiary: #105249;
--isi-hero-pad: clamp(1rem, 4vw, 3rem);
--isi-hero-img: none;
}
a { color: var(--isi-tertiary); text-decoration: none; }
a:hover, a:focus { color: var(--isi-primary); text-decoration: underline; }
.tsix-richtext a, .summernote-content a { text-decoration: underline; text-underline-offset: 2px; }
.btn-primary {
--bs-btn-bg: var(--isi-tertiary);
--bs-btn-border-color: var(--isi-tertiary);
--bs-btn-hover-bg: var(--isi-primary);
--bs-btn-hover-border-color: var(--isi-primary);
--bs-btn-active-bg: var(--isi-primary);
--bs-btn-active-border-color: var(--isi-primary);
--bs-btn-color: #fff;
--bs-btn-hover-color: #fff;
--bs-btn-active-color: #fff;
border-radius: 999px;
font-weight: 600;
}
.btn-outline-primary {
--bs-btn-color: var(--isi-tertiary);
--bs-btn-border-color: var(--isi-tertiary);
--bs-btn-hover-bg: var(--isi-tertiary);
--bs-btn-hover-border-color: var(--isi-tertiary);
--bs-btn-hover-color: #fff;
border-radius: 999px;
}
.btn-sm { padding-inline: 1rem; }
.header-hero-section {
background-image:
linear-gradient(100deg, rgba(16,82,73,.95) 0%, rgba(16,82,73,.74) 48%, rgba(16,82,73,.38) 100%),
var(--isi-hero-img) !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem) !important;
}
.header-hero-section > .container {
padding-left: var(--isi-hero-pad) !important;
padding-right: var(--isi-hero-pad) !important;
}
.header-hero-section > .container > br { display: none; }
@media (min-width: 1200px) {
.header-hero-section > .container { padding-left: 250px !important; }
}
.header-hero-section .header-title {
font-family: "Serenity", sans-serif !important;
font-weight: 200 !important;
color: #fff !important;
font-size: clamp(2rem, 5vw, 3.25rem) !important;
line-height: 1.1 !important;
margin-bottom: 0 !important;
text-wrap: pretty;
}
.header-hero-section .breadcrumb { margin-bottom: 1rem !important; font-size: .9rem; }
.tsix-about-hero {
padding: clamp(3rem, 8vw, 6rem) 0 !important;
background-size: cover !important;
background-position: center !important;
}
.tsix-about-hero__overlay {
background: linear-gradient(100deg, rgba(16,82,73,.94) 0%, rgba(16,82,73,.66) 52%, rgba(16,82,73,.3) 100%) !important;
}
.tsix-about-hero h1 {
font-family: "Serenity", sans-serif !important;
font-weight: 200 !important;
font-size: clamp(2rem, 5vw, 3.25rem) !important;
text-wrap: pretty;
}
.tsix-pill {
display: inline-block;
background: var(--isi-secondary);
color: var(--isi-tertiary);
border-radius: 999px;
padding: .35rem 1rem;
font-size: .78rem;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
.card.border-0.shadow-sm { border-radius: 24px; }
.card-body h2 {
font-family: "Serenity", sans-serif;
font-weight: 200;
color: var(--isi-tertiary);
font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.card-body h3, .card-body h4, .card-body h5 { color: var(--isi-tertiary); }
.table > thead th {
background: rgba(16,82,73,.06);
color: var(--isi-tertiary);
border-bottom-color: rgba(16,82,73,.25);
font-weight: 600;
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(0,171,197,.055); }
img, video, iframe, table { max-width: 100%; }
@media (max-width: 575.98px) {
.container { padding-left: 1rem; padding-right: 1rem; }
}
:root { --isi-hero-img: url("/images/design/photo-forest-cabin.jpg"); }
.tsix-about-hero { background-image: url("/images/design/photo-forest-cabin.jpg") !important; }
/* rule 9 - responsive guards (phone 430, tablet 768, laptop 1280). The captured
pages carried a full-bleed section pinned to 1920px with -960px side margins,
and fixed 675px media heights, both of which forced horizontal scrolling on
anything narrower than a desktop. */
.full-width-image-section {
width: 100% !important;
left: auto !important;
right: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
@media (max-width: 1199.98px) {
.full-width-image, .full-width-image img { height: auto !important; min-height: 300px; }
}
@media (max-width: 991.98px) {
:root { --theme-six-hero-height: 70vh; }
.full-width-image, .full-width-image img { max-height: 55vh !important; min-height: 240px; }
.full-width-image-section [style*="height: 675px"],
.full-width-image-section [style*="height:675px"] { height: auto !important; padding: 2rem !important; }
[style*="min-height: 675px"], [style*="min-height:675px"] { min-height: 340px !important; }
.destination-section .container > br, .contact-map-section .container > br { display: none; }
.destination-title { margin-top: 1rem !important; }
}
@media (max-width: 767.98px) {
:root { --theme-six-hero-height: 62vh; }
.card-body.p-4.p-lg-5 { padding: 1.5rem !important; }
.footer-section.theme-six-footer-main { text-align: left; }
}
@media (max-width: 575.98px) {
.tsix-about-hero, .header-hero-section { padding-top: 2rem !important; }
.resource-cards-grid { grid-template-columns: 1fr !important; }
}
/* rule 10 - un-scope the carousel collapse. The captured theme bundle narrows a
bare `.card` to 12/11/10/9rem with fixed heights inside max-width media
queries; those values were authored for the home-page `.explore-card`
carousel but hit every Bootstrap card on the site, slicing the content cards
on Accommodation, Brand, Governance, Documents, Tenders and the rest into
176px slivers below 1200px. Scope it back to the carousel and clear the
residual horizontal scroll from negative row gutters. */
@media (max-width: 1200px) {
.card:not(.explore-card) {
width: auto !important;
height: auto !important;
min-height: 0 !important;
}
}
html, body { overflow-x: clip; }
/* rule 11 - restore normal flow inside card bodies. The captured theme applies
`.card-body { display:flex; align-items:flex-end; justify-content:center }`
to every Bootstrap card body, not just the home-page carousel it was written
for, which shrink-wrapped headings and lists and pushed them to the bottom
right of every content card. Scope it to the carousel. */
.card:not(.explore-card) > .card-body {
display: block;
align-items: initial;
justify-content: initial;
}
.card:not(.explore-card) > .card-body.d-flex {
display: flex;
align-items: flex-start;
justify-content: flex-start;
}
.card:not(.explore-card) > .card-body.d-flex.flex-column { flex-direction: column; }
.card:not(.explore-card) > .card-body > ul,
.card:not(.explore-card) > .card-body > ol { width: 100%; }
/* rule 12 - restore the one grid utility the purged bundle dropped. The captured
CSS only ships the column classes the original pages happened to use, so
`.col-6` resolves to nothing and any half-width column collapses to full
width. Used by the Brand stat row and the Multimedia gallery. Because this
block sits after the bundle's breakpoint blocks, the paired responsive
classes are re-declared with attribute-boosted specificity so they still win
above their breakpoint. */
.col-6 { flex: 0 0 auto; width: 50%; }
@media (min-width: 576px) { .col-sm-6 { flex: 0 0 auto; width: 50%; } }
@media (min-width: 768px) {
[class].col-md-3 { width: 25%; }
[class].col-md-4 { width: 33.33333333%; }
[class].col-md-6 { width: 50%; }
}
@media (min-width: 992px) {
[class].col-lg-3 { width: 25%; }
[class].col-lg-4 { width: 33.33333333%; }
[class].col-lg-6 { width: 50%; }
}
@media (min-width: 1200px) {
[class].col-xl-3 { width: 25%; }
[class].col-xl-4 { width: 33.33333333%; }
}
/* rule 21 - footer menu columns must fit their links on one line. Each column
is col-sm-6 col-lg-6 col-xl-4 nested inside a col-lg-5 wrapper, so on a wide
screen a column resolves to roughly 14% of the page - not enough for
"Western Shores & Charters Creek", which wrapped onto two lines. There are
only two menu columns, so the wrapper can afford the width: the inner row
becomes an auto-fitting grid whose track is sized to the longest label, and
the links stop wrapping. */
.footer-section .footer-menu-column {
flex: 0 0 auto !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
}
@media (min-width: 768px) {
.footer-section .col-lg-5 > .row {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(15rem, max-content));
gap: 0 clamp(1.5rem, 3vw, 3rem);
margin: 0 !important;
}
.footer-section .col-lg-5 > .row > .footer-menu-column { padding-inline: 0 !important; }
.footer-section .footer-list a,
.footer-section .footer-list li { white-space: nowrap; }
}
@media (min-width: 992px) {
.footer-section > .container > .row > .col-lg-4 { flex: 0 0 auto; width: 30%; }
.footer-section > .container > .row > .col-lg-5 { flex: 1 1 auto; width: auto; max-width: 46%; }
.footer-section > .container > .row > .col-lg-3 { flex: 0 0 auto; width: 24%; }
}
@media (max-width: 767.98px) {
.footer-section .footer-menu-column { width: 100% !important; }
.footer-section .footer-list a { white-space: normal; }
}