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; }
}
/* 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 15 - About Us section design language. The About pages were single
centred prose cards on a white field - accurate but flat. These components
give the section a shared editorial system: full-bleed photographic heroes,
impact bands, alternating split rows, pull quotes, a milestone timeline and
closing calls to action, all built from the Park's own tokens (#105249
tertiary, #00ABC5 primary, #F7C23D secondary, Serenity display type). */
.isi-hero { position: relative; display: flex; align-items: flex-end; overflow: hidden; background: #105249; min-height: clamp(340px, 56vh, 600px); }
.isi-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.isi-hero__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(6,40,36,.12) 0%, rgba(6,40,36,.5) 52%, rgba(6,40,36,.93) 100%); }
.isi-hero__inner { position: relative; z-index: 2; width: 100%; padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem); }
/* The floating logo badge (.ss-theme-six-logo-shell) is position:fixed at the
viewport's top-left, roughly x -20..250 / y -20..210, and paints above the
hero at z-index 1100. .isi-hero bottom-aligns its content, so a tall headline
grows upward into that band and the breadcrumb and kicker disappear behind
the badge. Reserve vertical clearance so hero content always starts below the
badge, whatever the headline length. */
.isi-hero__inner { padding-top: 170px; }
.isi-hero { min-height: clamp(430px, 60vh, 660px); }
@media (max-width: 575.98px) {
.isi-hero__inner { padding-top: 120px; }
.isi-hero { min-height: clamp(360px, 56vh, 520px); }
}
.isi-hero h1 { font-family: "Serenity", sans-serif; font-weight: 200; color: #fff; font-size: clamp(2.1rem, 5.6vw, 4.25rem); line-height: 1.03; margin: 1.15rem 0 0; text-wrap: balance; }
.isi-hero__lede { color: rgba(255,255,255,.9); font-size: clamp(1.02rem, 1.6vw, 1.3rem); line-height: 1.55; max-width: 62ch; margin: 1.15rem 0 0; text-wrap: pretty; }
.isi-crumb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: .9rem; color: rgba(255,255,255,.75); }
.isi-crumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.isi-crumb a:hover { color: #F7C23D; text-decoration: underline; }
.isi-kicker { display: inline-block; background: #F7C23D; color: #105249; border-radius: 999px; padding: .42rem 1.1rem; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.isi-section { padding: clamp(2.75rem, 7vw, 5.5rem) 0; }
.isi-section--tint { background: #F4F8F7; }
.isi-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .76rem; font-weight: 700; color: #00737F; margin: 0 0 .85rem; }
.isi-h2 { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.8rem, 4vw, 2.9rem); color: #105249; line-height: 1.08; margin: 0 0 1.25rem; text-wrap: balance; }
.isi-h3 { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: #105249; line-height: 1.15; margin: 0 0 .75rem; }
.isi-lead { font-size: clamp(1.04rem, 1.45vw, 1.22rem); line-height: 1.68; color: #24423d; text-wrap: pretty; }
.isi-body { font-size: 1.02rem; line-height: 1.72; color: #33514c; text-wrap: pretty; }
.isi-measure { max-width: 68ch; }
.isi-band { background: #105249; color: #fff; padding: clamp(2.5rem, 6vw, 4.25rem) 0; }
.isi-statgrid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .isi-statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.isi-statgrid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .isi-statgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.isi-stat__num { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1; color: #F7C23D; margin: 0; }
.isi-stat__label { margin: .6rem 0 0; font-size: .95rem; line-height: 1.45; color: #fff; }
.isi-split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .isi-split { grid-template-columns: 1fr 1fr; } .isi-split--rev .isi-split__media { order: 2; } }
.isi-split__media img { width: 100%; height: 100%; min-height: clamp(240px, 34vw, 420px); object-fit: cover; border-radius: 26px; display: block; }
.isi-figcap { margin: .7rem 0 0; font-size: .85rem; color: #546965; }
.isi-quote { border-left: 4px solid #F7C23D; padding: .25rem 0 .25rem 1.5rem; margin: 0; }
.isi-quote p { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.35rem, 3vw, 2.15rem); line-height: 1.25; color: #105249; margin: 0; text-wrap: balance; }
.isi-quote cite { display: block; margin-top: 1rem; font-style: normal; font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; color: #00737F; }
.isi-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 700px) { .isi-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 700px) { .isi-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .isi-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.isi-tile { background: #fff; border: 1px solid rgba(16,82,73,.12); border-radius: 24px; padding: clamp(1.4rem, 2.6vw, 2rem); height: 100%; }
.isi-tile--solid { background: #105249; border-color: transparent; color: #fff; }
.isi-tile.isi-tile--solid .isi-h3, .isi-tile.isi-tile--solid p:not(.isi-tile__idx) { color: #fff; }
.isi-tile .isi-tile__idx { font-family: "Serenity", sans-serif; font-weight: 200; font-size: 2.2rem; line-height: 1; color: #00737F; margin: 0 0 .9rem; }
.isi-tile.isi-tile--solid .isi-tile__idx { color: #F7C23D; }
.isi-tile p { margin: 0; font-size: .99rem; line-height: 1.65; color: #43605b; }
.isi-list { margin: 0; padding: 0; list-style: none; display: grid; gap: .85rem; }
.isi-list li { position: relative; padding-left: 1.8rem; font-size: 1rem; line-height: 1.6; color: #33514c; }
.isi-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px; border-radius: 50%; background: #00ABC5; }
.isi-time { margin: 0; padding: 0; list-style: none; }
.isi-time > li { position: relative; margin-left: 8px; padding: 0 0 2.25rem 2.5rem; border-left: 2px solid rgba(0,171,197,.3); }
.isi-time > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.isi-time > li::before { content: ""; position: absolute; left: -8px; top: .35rem; width: 14px; height: 14px; border-radius: 50%; background: #F7C23D; box-shadow: 0 0 0 4px rgba(247,194,61,.2); }
.isi-time__yr { display: block; font-family: "Serenity", sans-serif; font-weight: 200; font-size: 1.6rem; line-height: 1; color: #00737F; margin: 0 0 .45rem; }
.isi-time__t { font-weight: 600; color: #105249; margin: 0 0 .35rem; font-size: 1.05rem; }
.isi-time p { margin: 0; font-size: .99rem; line-height: 1.65; color: #43605b; }
.isi-cta { position: relative; overflow: hidden; border-radius: 30px; background: #105249; color: #fff; padding: clamp(2rem, 5vw, 3.5rem); }
.isi-cta h2 { font-family: "Serenity", sans-serif; font-weight: 200; font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: 0 0 .85rem; color: #fff; text-wrap: balance; }
.isi-cta p { color: rgba(255,255,255,.85); max-width: 58ch; margin: 0 0 1.6rem; font-size: 1.03rem; line-height: 1.6; }
.isi-btnrow { display: flex; flex-wrap: wrap; gap: .85rem; }
.isi-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: .7rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: .97rem; text-decoration: none; transition: background .2s ease, color .2s ease; }
.isi-btn--gold { background: #F7C23D; color: #105249; }
.isi-btn--gold:hover { background: #fff; color: #105249; text-decoration: none; }
.isi-btn--ghost { border: 1.5px solid rgba(255,255,255,.6); color: #fff; }
.isi-btn--ghost:hover { background: #fff; color: #105249; text-decoration: none; }
.isi-btn--solid { background: #105249; color: #fff; }
.isi-btn--solid:hover { background: #00737F; color: #fff; text-decoration: none; }
.isi-note { font-size: .88rem; color: #546965; margin: 1.5rem 0 0; }
/* The captured theme sets h1-h6 { font-family:"Warnock Pro"; font-weight:700;
font-style:italic }. Every Serenity display component below overrides family
and weight but inherited that italic unless it says otherwise, so .isi-h3
card titles rendered slanted. Declare font-style explicitly across the set so
no component can pick it up from a bare element selector. */
.isi-hero h1,
.isi-h2,
.isi-h3,
.isi-stat__num,
.isi-quote p,
.isi-cta h2,
.isi-time__yr,
.isi-tile .isi-tile__idx,
.isi-tile strong, .isi-tile b,
.isi-hours strong, .isi-hours b,
.isi-contactcard strong, .isi-contactcard b,
.isi-estcard strong, .isi-estcard b,
.isi-list strong, .isi-list b,
.isi-body strong, .isi-body b,
.isi-lead strong, .isi-lead b { font-style: normal; font-family: "Serenity", sans-serif; }
/* rule 16 - motion. The section was entirely static: no reveal, no hover
feedback, no depth. Everything below is gated on [data-motion="on"], which
about-motion.js only sets when the visitor has NOT asked for reduced motion -
so with JS off, or reduced motion on, nothing is hidden and nothing animates. */
html[data-motion="on"] [data-reveal] {
opacity: 0;
transform: translateY(20px);
transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
}
html[data-motion="on"] [data-reveal].is-in { opacity: 1; transform: none; }
html[data-motion="on"] .isi-hero__img {
animation: isi-kenburns 26s cubic-bezier(.22,.61,.36,1) forwards;
transform-origin: 52% 48%;
}
@keyframes isi-kenburns { from { transform: scale(1.09); } to { transform: scale(1); } }
.isi-split__media { overflow: hidden; border-radius: 26px; }
.isi-split__media img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.isi-split__media:hover img { transform: scale(1.045); }
.isi-tile { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.isi-tile:hover { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(16,82,73,.14); border-color: rgba(0,171,197,.45); }
.isi-tile.isi-tile--solid:hover { box-shadow: 0 18px 42px rgba(16,82,73,.4); }
.isi-btn { transition: transform .25s ease, background-color .2s ease, color .2s ease; }
.isi-btn:hover { transform: translateY(-2px); }
.isi-hero { will-change: auto; }
.isi-stat__num { font-variant-numeric: tabular-nums; }
.isi-time > li::before { transition: transform .3s ease, box-shadow .3s ease; }
.isi-time > li:hover::before { transform: scale(1.25); box-shadow: 0 0 0 6px rgba(247,194,61,.28); }
/* rule 17 - establishment profile components. Extends the About Us editorial
system (rule 15) with the pieces the 30 establishment profiles and the
directory need: chip lists for linked places and activities, an outline
button variant for secondary contact actions, and the directory card. Colours
are the same tokens - #105249 tertiary, #00737F accessible teal, #F7C23D
gold - so profiles read as part of the same site. */
.isi-chips { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.isi-chip { display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.15rem; border-radius: 999px; border: 1px solid rgba(16,82,73,.22); background: #fff; color: #105249; font-size: .95rem; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
a.isi-chip:hover, a.isi-chip:focus { background: #105249; border-color: #105249; color: #fff; text-decoration: none; transform: translateY(-2px); }
.isi-chip--static { background: rgba(16,82,73,.05); color: #3f5a55; font-weight: 500; }
.isi-btn--outline { border: 1.5px solid rgba(16,82,73,.4); color: #105249; background: transparent; }
.isi-btn--outline:hover { background: #105249; border-color: #105249; color: #fff; text-decoration: none; }
.isi-contact { margin: 0; font-size: 1rem; line-height: 1.7; color: #33514c; text-wrap: pretty; }
.isi-estcard { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; border: 1px solid rgba(16,82,73,.12); background: #fff; height: 100%; text-decoration: none; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.isi-estcard:hover, .isi-estcard:focus { transform: translateY(-5px); box-shadow: 0 18px 42px rgba(16,82,73,.14); border-color: rgba(0,171,197,.45); text-decoration: none; }
.isi-estcard__img { width: 100%; height: 210px; object-fit: cover; display: block; }
.isi-estcard__body { padding: 1.35rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.isi-estcard__type { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #00737F; }
.isi-estcard__name { font-family: "Serenity", sans-serif; font-weight: 200; font-style: normal; font-size: 1.35rem; line-height: 1.2; color: #105249; margin: 0; }
.isi-estcard__text { font-size: .95rem; line-height: 1.6; color: #43605b; margin: 0; }
.isi-estcard__more { margin-top: auto; padding-top: .35rem; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #00737F; }
.isi-estgrid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .isi-estgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .isi-estgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .isi-estgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.isi-estcard__img { transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.isi-estcard:hover .isi-estcard__img { transform: scale(1.05); }
/* rule 18 - Places to Visit + Activities: bring both sections onto the design
system. Defects this fixes, all inherited from the captured theme:
- .area-card nested a bordered, rounded, mb-3 image INSIDE a bordered
rounded card, so every card showed a double border and the photo floated
off the card edge instead of sitting flush.
- .area-description set line-height 1.095 on 18px copy - far too tight, and
the reason the card text looked cramped against the 3-line clamp.
- The "View Activity" control was a non-interactive pill: 220x40px
(under the 44px touch target), text off-centre from an absolute inner div
with padding-right 40px, and a var(--color-tertiary, #2D5A3D) fallback
green that is not in the palette. Replaced in markup with .isi-btn links.
- Place heroes printed a #105249 title straight onto photography with no
scrim, so the Park name was barely legible.
- .explore-card titles inherited the theme's h1-h6 italic Warnock Pro,
against Serenity Light everywhere else on the site.
- .conic-gradient-* painted a four-stop yellow/cyan/green conic rainbow
behind whole sections, putting dark green headings on yellow. */
/* --- cards: flush photo, one border, system radius and hover depth --- */
.area-card {
border-radius: 24px !important;
border-color: rgba(16, 82, 73, .12) !important;
overflow: hidden;
transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.area-card:hover,
.area-card:focus-within {
transform: translateY(-5px);
box-shadow: 0 18px 42px rgba(16, 82, 73, .14);
border-color: rgba(0, 171, 197, .45) !important;
}
.area-card .area-img {
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
width: 100% !important;
}
.area-card .area-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.area-card:hover .area-img img { transform: scale(1.05); }
.area-card .area-body { gap: .55rem; padding: 1.4rem !important; }
/* --- card typography: Serenity, upright, readable measure --- */
.area-card .area-title {
font-family: "Serenity", sans-serif !important;
font-weight: 200 !important;
font-style: normal !important;
font-size: 1.3rem !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #105249;
margin: 0;
text-wrap: pretty;
}
.area-card .area-description {
font-size: 1rem !important;
line-height: 1.65 !important;
color: #43605b;
margin: 0;
-webkit-line-clamp: 4;
text-wrap: pretty;
}
/* --- the CTA that replaced the fake div pill --- */
.area-cta { margin-top: auto; padding-top: 1.1rem; display: flex; }
.isi-btn--sm { min-height: 44px; padding: .6rem 1.25rem; font-size: .9rem; }
/* --- activity cards: kill the italic Warnock leak, size the button --- */
.explore-card h3,
.explore-card .h3,
.card-activity h3 {
font-family: "Serenity", sans-serif !important;
font-weight: 200 !important;
font-style: normal !important;
letter-spacing: 0 !important;
}
.explore-card .btn,
.card-activity .btn {
min-height: 46px;
display: inline-flex;
align-items: center;
gap: .5rem;
border-radius: 999px;
font-weight: 600;
letter-spacing: .08em !important;
border-width: 1.5px;
transition: background-color .2s ease, color .2s ease, transform .25s ease;
}
.explore-card .btn:hover,
.card-activity .btn:hover { background: #F7C23D; border-color: #F7C23D; color: #105249; transform: translateY(-2px); }
/* --- section backgrounds: replace the conic rainbow with system surfaces --- */
[class*="conic-gradient-"] {
height: auto !important;
background: #F4F8F7 !important;
}
/* --- place hero: scrim so the Park name reads on photography --- */
.hero-section-2 > img[src] { z-index: 0; }
.hero-section-2::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(100deg, rgba(6,40,36,.86) 0%, rgba(6,40,36,.58) 52%, rgba(6,40,36,.26) 100%);
pointer-events: none;
}
.hero-section-2 > .container,
.hero-section-2 > div:not([class*="img"]) { position: relative; z-index: 2; }
.hero-section-2 h1 {
font-family: "Serenity", sans-serif !important;
font-weight: 200 !important;
font-style: normal !important;
color: #fff !important;
font-size: clamp(2.1rem, 5.2vw, 3.9rem) !important;
line-height: 1.05 !important;
text-wrap: balance;
}
.hero-section-2 .title-description,
.hero-section-2 h2,
.hero-section-2 h3,
.hero-section-2 h4,
.hero-section-2 h5,
.hero-section-2 h6,
.hero-section-2 p {
color: rgba(255,255,255,.92) !important;
font-family: "Serenity", sans-serif !important;
font-weight: 300 !important;
font-style: normal !important;
font-size: clamp(1rem, 1.5vw, 1.25rem) !important;
line-height: 1.6 !important;
max-width: 62ch;
text-wrap: pretty;
}
/* --- section headings on these two sections --- */
.destination-title,
h2.title-heading {
font-family: "Serenity", sans-serif !important;
font-weight: 200 !important;
font-style: normal !important;
color: #105249;
text-wrap: balance;
}
p.title-description { line-height: 1.7 !important; }
/* Activity heroes carried no breadcrumb at all, so those nine pages gave no
route back up to Activities and no sense of location - every other section
of the site has one. */
.activity-hero-v2__crumb { margin-bottom: 1.1rem !important; }
/* Establishment card titles inherited the theme's h1-h6 italic (30px uppercase
italic at weight 500), the same Warnock-era leak fixed elsewhere - upright
Serenity, sentence case, sized to sit under the card image. The CTA row's
inline style also hardcoded Arial 13px, which poisoned every descendant and
left the control 20px tall; the row is now unstyled type and carries the
system .isi-btn pills used on the Jewels pages. */
.activity-card-v2__title,
.activity-card-v2__title a {
font-family: "Serenity", sans-serif !important;
font-style: normal !important;
font-weight: 200 !important;
font-size: clamp(1.3rem, 2.2vw, 1.6rem) !important;
line-height: 1.2 !important;
letter-spacing: 0 !important;
text-transform: none !important;
color: #105249 !important;
text-wrap: pretty;
}
.activity-card-v2__text { font-size: 1rem !important; line-height: 1.65 !important; color: #43605b; }
.activity-card-v2__meta {
font-size: .72rem !important;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: #00737F !important;
}
.activity-card-v2__links { font-family: "Serenity", sans-serif; }
.activity-hero-v2__eyebrow { font-size: .78rem !important; letter-spacing: .14em; text-transform: uppercase; color: #F7C23D !important; font-weight: 700 !important; }
/* Section headings mix a Serenity run with a place name, which the theme
renders as bold italic Warnock Pro - two typefaces inside one heading. The
trailing empty and duplicate empty the template leaves behind also
add stray vertical space above each card grid. */
.section-theme-six_title b,
.section-theme-six_title strong,
.destination-title b,
.destination-title strong {
font-family: inherit !important;
font-weight: 200 !important;
font-style: normal !important;
color: inherit !important;
}
.section-theme-six_title i:empty,
.destination-title i:empty,
h2.section-theme-six_title:empty { display: none !important; }
/* A full-bleed hero must sit flush under the header. The theme reserves 110px
of top padding on the page-content main to clear the fixed header, which is
right for pages that open on text but leaves a white band above an
edge-to-edge photographic hero. */
main.theme-six-page-content:has(> .isi-hero:first-child) { padding-top: 0 !important; }
/* Card copy runs 2-3 lines depending on the activity, and .explore-card
bottom-anchors its body, so titles landed on different lines across a row.
A three-line floor puts every title in a row on the same baseline. */
.explore-card .card-body p { min-height: calc(3 * 1.6em); }
@media (max-width: 575.98px) {
.explore-card .card-body p { min-height: 0; }
}
/* 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; }
}