tags with * their own explicit font-weight), so this no longer touches them. */ h1, h2, h3 { font-weight: 900 !important; letter-spacing: -0.01em !important; } /* * Header main nav row: logo hugs its own content, the nav column * fills the rest, and the Menu module grows to fill that column so * its centered link list sits between the logo and the CTA button * (matches Header.dc.html's flex:1;justify-content:center nav). * Divi's per-item Sizing panel would not persist these values * reliably in the Visual Builder, so they're set directly here. */ .et_pb_column_3_tb_header { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } .et_pb_column_4_tb_header { flex: 1 1 auto !important; } .et_pb_menu_0_tb_header { flex: 1 1 0% !important; width: auto !important; } /* * Divi 5's actual menu markup nests the
, adding that
's default browser margin on top
* of the link's own line-height and roughly doubling the gap
* between links. Zero that margin (scoped to the footer only).
*/
.et_pb_section_1_tb_footer .et_pb_text_inner p {
margin: 0;
}
/*
* Home page: every content row was built before the header/footer
* were widened to the canvas's 1320px measure, so it's still at
* Divi's default 1080px and reads narrower than the header/footer
* above and below it.
*/
body.page-id-99 #main-content .et_pb_row {
max-width: 1320px !important;
}
/*
* Home page section padding. First attempt at this (since corrected)
* wrongly assumed every section followed Main.dc.html's raw-HTML
* pattern of a self-contained inner div carrying its own padding —
* true for the Membership page, but NOT for Home: sections 0, 1, 2
* and 4 were actually built with real Divi Image/Text modules that
* carry no padding of their own anywhere (checked the raw
* post_content directly rather than assuming from the canvas this
* time), so they depend entirely on the Section's own padding for
* spacing. Setting those to 0 removed ALL spacing and caused
* "Over four decades" to butt straight into the stats bar above it —
* a real regression, caught immediately when reported. Section 3
* ("Three ways in") and section 5 ("Latest news", fixed earlier this
* project) are the only two that put their real background on a
* full-bleed div, so those two correctly need explicit Section
* padding to match canvas; sections 0/1/2/4 need it too, just because
* they never had any padding at all, not because of doubling.
* Values below move each section's canvas-intended padding
* (Main.dc.html's per-section inner values, which don't exist in the
* actual built content) onto the Section itself. Section indices:
* 0 hero (88px/104px, asymmetric per canvas), 1 stats row (34px),
* 2 "over four decades" mission copy (88px), 3 "Three ways in" (88px),
* 4 strategic partners (80px), 5 Latest news (88px, already fixed).
*/
body.page-id-99 .et_pb_section_0 {
padding-top: 88px !important;
padding-bottom: 104px !important;
}
body.page-id-99 .et_pb_section_1 {
padding-top: 34px !important;
padding-bottom: 34px !important;
}
body.page-id-99 .et_pb_section_2 {
padding-top: 88px !important;
padding-bottom: 88px !important;
}
body.page-id-99 .et_pb_section_3 {
padding-top: 88px !important;
padding-bottom: 88px !important;
}
body.page-id-99 .et_pb_section_4 {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
/*
* Utility bar row: the phone/email column and the badge+social
* column were both stuck at fixed ~50% widths (same Column Class
* leftover pattern as the nav row), so the badge+social group sat
* well short of the row's true right edge instead of flush against
* it — visibly out of line with the CTA button below. Shrink both
* to their own content width and let space-between push them to
* the row's two ends.
*/
.et_pb_row_0_tb_header {
justify-content: space-between !important;
}
.et_pb_column_0_tb_header,
.et_pb_column_1_tb_header {
flex: 0 0 auto !important;
width: auto !important;
}
/*
* Utility bar on mobile/tablet: with the phone/email column hidden
* (see the max-width:900px rule above), the row is left with only the
* badge text + 5 social icons — but the shrink-to-content rule just
* above (flex:0 0 auto, needed so space-between works on desktop)
* sizes that column to its full intrinsic width regardless of
* viewport, since flex-shrink:0 refuses to shrink it. Worse, the
* column itself is *also* a flex row (its two modules — the
* social-icons list and the badge text — sit side by side with a
* 30px gap), and that inner row is nowrap too. Below 900px the
* combined intrinsic width of both modules can exceed the screen, so
* it silently overflowed past the right edge — the later social icons
* (Instagram/LinkedIn/YouTube) weren't hidden, they were pushed
* off-screen with no scroll affordance. This block must come *after*
* the shrink-to-content rule above: both are equally specific
* (single class + !important), so being later in the cascade is what
* lets it win at these widths rather than the media query itself.
* Matches the same 900px breakpoint as the contact-hide rule above —
* below that point is exactly where this column has to carry the
* badge + all 5 icons alone.
*/
@media only screen and (max-width: 900px) {
.et_pb_row_0_tb_header {
flex-wrap: wrap !important;
justify-content: center !important;
row-gap: 8px !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
.et_pb_column_1_tb_header {
flex: 1 1 100% !important;
width: 100% !important;
flex-wrap: wrap !important;
justify-content: center !important;
row-gap: 8px !important;
gap: 8px !important;
}
.et_pb_column_1_tb_header .et_pb_text_inner,
.et_pb_column_1_tb_header .et_pb_text_inner > span {
text-align: center !important;
}
}
/*
* Header CTA button: font-size was left at Divi's default (20px)
* instead of the canvas's 14px, making the whole button read as
* oversized even though its padding was already correct.
*/
.et_pb_button_0_tb_header {
font-size: 14px !important;
line-height: 1.4 !important;
}
/*
* Hero "segment-row" mini-cards (I'm a professional / student /
* executive): each line was typed on its own row in the Text
* module, so wpautop() inserted a
after every line — on top of
* the two s already being separate lines, that doubled up
* and made the cards nearly 3x taller than the canvas's compact
* cards. The stray
elements are removed at the content level
* (see the accompanying content fix); this just prevents the same
* class of bug from inflating things further via inherited spacing.
*/
/*
* "Latest news" section background: Main.dc.html wraps the whole
* section in a full-bleed grey div (background:#F5F7FB) with the
* heading/grid centered inside it at the shared 1320px measure. The
* built page instead put that grey background on an inline style
* inside the Text module, which lives inside the row — and the row is
* capped to 1320px (see the page-id-99 rule above), so the grey only
* ever painted the centered 1320px column, not the full section width
* behind it. Move the background/padding to the actual Divi Section
* (which is genuinely full-bleed) instead; the matching inline style
* is stripped from the row content itself so the vertical padding
* isn't applied twice.
*/
body.page-id-99 .et_pb_section_5 {
background: #F5F7FB !important;
padding-top: 88px !important;
padding-bottom: 88px !important;
}
/*
* "Latest news" cards ([cimg_latest_news] shortcode), matching
* Main.dc.html's .news-card/.news-grid/.news-date/.news-title/
* .news-link classes exactly.
*/
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 900px) {
.news-grid {
grid-template-columns: 1fr;
}
}
.news-card {
border: 1px solid #E4E8F0;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
.news-card img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.news-body {
padding: 20px;
}
.news-date {
font-size: 12px;
color: #5B647A;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
margin: 0;
}
.news-title {
font-size: 16.5px;
font-weight: 800;
line-height: 1.4;
margin: 8px 0 10px 0;
color: #1A2233;
}
.news-link {
font-size: 13.5px;
font-weight: 700;
color: #15488A;
text-decoration: none;
}
.news-link:hover {
text-decoration: underline;
}
/*
* Membership page (Membership.dc.html) — reusable classes lifted
* directly from the canvas so the hand-typed raw HTML in the page's
* Text modules can reference them instead of repeating the same
* inline styles across 8 category cards, 8 quick-pick tiles and 14
* benefit rows.
*/
.section-pad {
max-width: 1320px;
margin: 0 auto;
padding: 0 32px;
}
/*
* Mobile fixes for the site's navy hero sections (Membership, Qualifications,
* About, Contact, Events, Accelerator, Study Centres, Professional Misconduct,
* Home — 10 pages checked directly against the DB, all with the same pattern).
* Each one is a raw hand-typed
* inside .section-pad, written once with only a desktop size — unlike a real
* Divi module (which gets separate desktop/tablet/phone values automatically),
* plain inline HTML like this never picks up any responsive scaling on its
* own. At a 36-48px desktop size, a single long word ("Membership",
* "qualification") can be wider than the entire mobile viewport once you
* subtract .section-pad's own padding, forcing the browser to break the word
* itself mid-letter rather than just wrapping at the next space.
*
* Fixed two ways, together: a smaller side padding on phones (still enough
* gutter to read comfortably, just not as wide as the 32px desktop value),
* and a capped hero font-size. The attribute selector
* (h1[style*="color:#fff"]) targets every one of these hand-typed hero
* headings by the literal inline style text they all already share, without
* needing to touch 10 pages' block content individually — an inline style
* always beats a plain external rule, so this needs !important to win, same
* as every other inline-style-override case already documented in this file.
*
* The hero sections specifically set their own inline `padding:88px 32px`
* shorthand directly on the .section-pad div (not just relying on the base
* class), which would also beat a plain external override — overriding only
* the longhand padding-left/padding-right (with !important) instead of the
* padding shorthand lets the side gutter shrink on mobile without touching
* each hero's own intentional top/bottom spacing.
*/
@media (max-width: 600px) {
.section-pad {
padding-left: 20px !important;
padding-right: 20px !important;
}
h1[style*="color:#fff"] {
font-size: 30px !important;
}
/*
* Contact page's hero ("Talk to CIMG.") is short enough that it was
* never actually breaking, unlike the other 9 pages this rule exists
* for — but shrinking it anyway had a real side effect: its section's
* flow height (padding + title line height) is what a sibling
* position:absolute decorative mosaic (280px fixed, page 196 only)
* bleeds past at the bottom edge. A shorter title shrinks that flow
* height, which moved the section boundary up through the middle of
* the mosaic instead of past its bottom edge — a visible white line
* cutting the pattern in half. Restoring this one page's original
* size (higher specificity than the plain attribute selector above,
* so this wins regardless of source order) fixes it without touching
* the other 9 pages that actually needed the reduction.
*/
body.page-id-196 h1[style*="color:#fff"] {
font-size: 42px !important;
}
/*
* Home page's "Latest news" section header ("Latest news" + "Visit the
* Content Hub →") is a flex row with justify-content:space-between and
* no flex-wrap, so on a narrow phone the two items get squeezed onto
* one line instead of wrapping.
*
* flex-wrap:wrap alone (tried first) wasn't enough: flex items shrink
* to fit a line before they wrap onto a new one, and text itself can
* shrink by wrapping internally — so the browser "solved" the overflow
* by breaking "Latest news" into two lines while still keeping the link
* squeezed onto the same row, instead of moving the link to its own
* line the way flex-wrap alone was expected to. flex-direction:column
* forces each child onto its own full-width row unconditionally, no
* "does it fit" judgment call for the browser to get wrong. No inline
* flex-direction/align-items is set on this element at all, so this
* doesn't need !important to win.
*/
div[style*="justify-content:space-between"] {
flex-direction: column;
align-items: flex-start;
row-gap: 6px;
}
/*
* Header top bar's "Chartered by Act..." text + social icons currently
* share one flex row (both flex-shrink:1 by default, no wrap), so on a
* narrow phone they squeeze down to roughly half the width each rather
* than either one getting real room. Stacking them (text full-width,
* then icons full-width below) instead takes less total vertical space
* than a cramped shared row would, and both read cleanly.
*
* Scoped to `.et_pb_column_1_tb_header` (Divi's own generated class for
* this specific header column) rather than the bare inline-style
* attribute selector used elsewhere in this file — the footer's social
* icons row (`.ftr-social`) happens to share the exact same
* `display:flex;align-items:center;gap:14px;` inline style but has no
* text sibling to stack against, so an unscoped selector here would
* incorrectly stack the footer icons into a single column too.
*/
.et_pb_column_1_tb_header div[style*="display:flex;align-items:center;gap:14px;"] {
flex-direction: column;
align-items: flex-start;
row-gap: 10px;
}
/*
* The icon row's left border only makes sense as a separator next to
* the text on the same line — once stacked below it, drop the border
* and the padding that existed solely to clear it.
*/
.et_pb_column_1_tb_header span[style*="border-left:1px solid rgba(255,255,255,.25)"] {
border-left: none !important;
padding-left: 0 !important;
/*
* Icon row now has the full row width to itself (stacked below the
* text rather than squeezed beside it), so its icons can space out
* more than the 12px gap that was sized for sharing a line — wider
* touch targets read better on a phone anyway.
*/
gap: 20px !important;
}
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 10px;
background: #137C78;
color: #fff;
font-weight: 700;
font-size: 15.5px;
padding: 15px 28px;
border-radius: 6px;
text-decoration: none;
}
.btn-outline {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: #fff;
font-weight: 700;
font-size: 14px;
padding: 13px 22px;
border: 1.5px solid rgba(255, 255, 255, .55);
border-radius: 6px;
text-decoration: none;
}
.btn-outline:hover {
border-color: #fff;
background: rgba(255, 255, 255, .1);
}
.btn-quiet {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: #15488A;
font-weight: 700;
font-size: 14px;
padding: 13px 22px;
border: 1.5px solid #E4E8F0;
border-radius: 6px;
text-decoration: none;
}
/* "Which membership is mine?" quick-pick strip (8 tiles). */
.segment-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.segment-pick {
background: #fff;
border: 1px solid #E4E8F0;
border-radius: 10px;
padding: 20px;
flex: 1;
min-width: 200px;
text-align: center;
}
@media (max-width: 1000px) {
/*
* .segment-pick's flex:1/min-width:200px pair (copied from
* Membership.dc.html verbatim) is a flex-layout pattern, but
* .segment-grid is a CSS Grid container (repeat(2,1fr) at this
* width, per the rule below) — the canvas mixed the two, and on a
* grid the leftover min-width:200px still holds each cell to a
* 200px floor, forcing two 200px+ columns into a container
* narrower than 400px and overflowing off-screen on phones.
* Confirmed via getComputedStyle (gridTemplateColumns computed as
* "200px 200px" wider than the actual container) rather than
* eyeballing it. Grid items don't need the min-width here.
*/
.segment-pick {
min-width: 0;
}
}
.segment-pick p.q {
font-size: 13px;
color: #5B647A;
font-weight: 600;
margin: 0 0 6px 0;
}
.segment-pick p.a {
font-size: 15px;
font-weight: 800;
color: #1A2233;
margin: 0;
}
/* Benefits two-column list (individuals / corporate). */
.two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
}
.benefit-row {
display: flex;
gap: 12px;
padding: 13px 0;
border-bottom: 1px solid #E4E8F0;
}
.benefit-check {
width: 22px;
height: 22px;
border-radius: 50%;
flex: none;
display: flex;
align-items: center;
justify-content: center;
}
/*
* "Eight membership categories" card grid — rendered by the
* [cimg_membership_categories] shortcode (functions.php), which reads
* the cimg_membership CPT so Council can update the single
* authoritative dataset instead of hand-typed cards drifting out of
* sync with it (report.md §4.7 / §5 item 4).
*/
.cat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.cat-card {
background: #fff;
border: 1px solid #E4E8F0;
border-radius: 10px;
padding: 26px 24px;
}
.cat-badge {
display: inline-block;
font-size: 11.5px;
font-weight: 900;
letter-spacing: .03em;
color: #fff;
padding: 4px 10px;
border-radius: 5px;
margin-bottom: 12px;
}
.cat-name {
font-size: 16.5px;
font-weight: 800;
color: #1A2233;
margin: 0 0 8px 0;
}
.cat-crit {
font-size: 13.5px;
line-height: 1.55;
color: #5B647A;
margin: 0;
}
@media (max-width: 1000px) {
.cat-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
.two-col {
grid-template-columns: 1fr !important;
gap: 40px !important;
}
.segment-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
@media (max-width: 640px) {
.cat-grid {
grid-template-columns: 1fr !important;
}
/*
* Same reasoning as .cat-grid above: 2 columns of short quick-pick
* text still forces mid-word breaks on phone widths once each
* column narrows to ~110px (e.g. "Registering an organisation"),
* so drop to a single column here too rather than leaving it
* cramped just because canvas didn't call out this narrower step.
*/
.segment-grid {
grid-template-columns: 1fr !important;
}
}
/*
* Membership page section padding. Divi's Section module defaults to
* 54px top/bottom when not explicitly set — setting it via the block's
* own JSON attributes (module.decoration.spacing.padding) had no
* effect (confirmed with getComputedStyle: still 54px after the
* content update), so — consistent with the header/footer sections
* above and the Home page's Latest-news fix — it's forced directly
* here instead. Each section's own inner div already carries the
* canvas's real padding in most cases (hero, Good Standing bar,
* quick-picker, categories, ready-to-join all self-contain their full
* padding), so those need the Section itself at 0 to avoid doubling;
* the other two (benefits, Chartered Marketer banner) put the vertical
* padding on the full-bleed background div in the canvas, so that's
* where the Section's own padding needs to carry the real value
* instead. Section indices: 0 hero, 1 "Members in Good Standing" bar,
* 2 quick-picker, 3 benefits, 4 categories, 5 Chartered Marketer
* banner, 6 ready-to-join. Scoped to page-id-144 since et_pb_section_N
* is a page-relative index shared with every other page's sections,
* not a stable global class.
*/
body.page-id-144 .et_pb_section_0,
body.page-id-144 .et_pb_section_1,
body.page-id-144 .et_pb_section_2,
body.page-id-144 .et_pb_section_4,
body.page-id-144 .et_pb_section_6 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body.page-id-144 .et_pb_section_3 {
padding-top: 72px !important;
padding-bottom: 72px !important;
}
body.page-id-144 .et_pb_section_5 {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
/*
* "Members in Good Standing" bar's hairline bottom border
* (Membership.dc.html line 69: border-bottom:1px solid var(--hair)) —
* on the Section itself since that's the full-bleed element the
* canvas draws the border across, not the inner content div.
*/
body.page-id-144 .et_pb_section_1 {
border-bottom: 1px solid #E4E8F0;
}
/*
* Every Row on this page was still at Divi's default 1080px max-width
* (never set when the block content was written directly, same class
* of bug the Home page hit — see the page-id-99 rule above). The
* page's actual content still looked plausible at a glance because
* each section's own inner .section-pad div (max-width:1320px) simply
* capped itself to whatever the 1080px Row gave it, rather than
* visibly overflowing — confirmed the real width via
* getBoundingClientRect() (1080px) rather than trusting the
* screenshot, per the pixel-accuracy non-negotiable.
*/
body.page-id-144 #main-content .et_pb_row {
max-width: 1320px !important;
}
/*
* Qualifications hub page (Qualifications.dc.html) — reusable classes
* lifted from the canvas for the page's own Text-module raw HTML.
* .section-pad, .two-col, .benefit-row and .benefit-check already
* exist from the Membership page and are identical here, so they're
* reused as-is. .btn-primary also already exists (Membership's
* teal-strong) — this page needs the same button shape in
* orange-strong instead, handled via a page-scoped color override
* below rather than a second class, since every other property is
* identical.
*/
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
color: #fff;
font-weight: 700;
font-size: 14px;
padding: 12px 20px;
border: 1.5px solid rgba(255, 255, 255, .55);
border-radius: 6px;
text-decoration: none;
}
.btn-ghost:hover {
border-color: #fff;
background: rgba(255, 255, 255, .1);
}
/* Pathway stepper (the 7-card row, rendered by [cimg_pathway_stepper]). */
.stepper {
display: flex;
align-items: stretch;
gap: 10px;
}
.step-card {
background: #fff;
border: 1px solid #E4E8F0;
border-radius: 10px;
padding: 22px 18px;
flex: 1;
min-width: 150px;
position: relative;
display: block;
color: inherit;
text-decoration: none;
}
.step-card:hover {
border-color: #B75108;
box-shadow: 0 4px 16px rgba(0, 0, 0, .06);
}
.step-num {
width: 28px;
height: 28px;
border-radius: 50%;
background: #B75108;
color: #fff;
font-size: 13px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
}
.step-title {
font-size: 14.5px;
font-weight: 800;
color: #1A2233;
line-height: 1.3;
margin: 0 0 8px 0;
}
.step-desc {
font-size: 12.5px;
color: #5B647A;
line-height: 1.5;
margin: 0;
}
.step-arrow {
flex: none;
color: #C7D0E0;
align-self: center;
}
.step-readmore {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 800;
color: #B75108;
margin-top: 10px;
}
@media (max-width: 1100px) {
.stepper {
flex-direction: column !important;
}
.step-arrow {
transform: rotate(90deg);
}
}
/*
* Qualifications page uses the shared .btn-primary shape in
* orange-strong instead of Membership's teal-strong — same structural
* properties (padding, radius, weight), different brand accent per
* canvas, so only the color needs a page-scoped override rather than
* a whole second class.
*/
body.page-id-152 .btn-primary {
background: #B75108 !important;
}
body.page-id-152 .btn-primary:hover {
background: #943F06 !important;
}
/* Same Row-defaults-to-1080px bug as every other page built this way — fixed proactively this time. */
body.page-id-152 #main-content .et_pb_row {
max-width: 1320px !important;
}
/*
* Qualification Pathway detail template (QualificationPathway.dc.html),
* shared by all 7 cimg_pathway posts via the [cimg_pathway_detail]
* shortcode — one template, not 7 hand-built pages (report.md §5 item
* 3). Scoped to `body.single-cimg_pathway` (WordPress's own body class
* for any singular view of this post type) rather than a page ID,
* since there are 7 different post IDs sharing this one template.
*
* This canvas uses its own narrower 1180px content measure (a
* sidebar layout, unlike every other page's 1320px), so .section-pad
* needs a page-type-scoped override here — same conflict-avoidance
* pattern as the .btn-primary color override above. The Row itself
* still gets the site's standard 1320px (wider than 1180, so it just
* gives .section-pad room to center within it, matching how the
* canvas's own section-pad already behaves independent of viewport).
*/
body.single-cimg_pathway #main-content .et_pb_row {
max-width: 1320px !important;
}
body.single-cimg_pathway .section-pad {
max-width: 1180px !important;
}
.sidebar-btn {
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
border: 1px solid #E4E8F0;
border-radius: 8px;
padding: 14px 16px;
font-size: 14px;
font-weight: 700;
color: #1A2233;
margin-bottom: 10px;
text-decoration: none;
}
.sidebar-btn:hover {
border-color: #B75108;
color: #B75108;
}
.subject-chip {
background: #F5F7FB;
border-radius: 6px;
padding: 9px 14px;
font-size: 13.5px;
font-weight: 600;
color: #3A425A;
}
.crit-card {
background: #F5F7FB;
border-radius: 10px;
padding: 20px;
flex: 1;
min-width: 200px;
}
.crit-card p.h {
font-size: 13px;
font-weight: 800;
color: #15488A;
margin: 0 0 8px 0;
}
.crit-card p.b {
font-size: 13.5px;
line-height: 1.55;
color: #495164;
margin: 0;
}
.path-dot {
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
border: 2px solid #E4E8F0;
color: #5B647A;
text-decoration: none;
flex-shrink: 0;
background: #fff;
}
.path-dot:hover {
border-color: #B75108;
color: #B75108;
}
.path-dot.active {
background: #B75108;
border-color: #B75108;
color: #fff;
}
.path-line {
width: 20px;
height: 2px;
background: #E4E8F0;
flex-shrink: 0;
}
.fee-table {
width: 100%;
border-collapse: collapse;
}
.fee-table td {
padding: 14px 4px;
border-bottom: 1px solid #E4E8F0;
font-size: 15px;
}
.fee-table td.amt {
text-align: right;
font-weight: 700;
color: #1A2233;
}
.fee-table tr.total td {
font-weight: 900;
font-size: 17px;
color: #15488A;
border-bottom: none;
padding-top: 18px;
}
@media (max-width: 1000px) {
body.single-cimg_pathway .path-grid {
grid-template-columns: 1fr !important;
}
}
/*
* Accelerator Programme page (AcceleratorProgramme.dc.html). Reuses
* .section-pad/.two-col/.fee-table structurally (see the page-scoped
* overrides below for the few properties that differ from the
* Qualification Pathway template's own numbers) and .btn-primary's
* shape with this page's purple accent instead of teal/orange.
*/
body.page-id-156 .section-pad {
max-width: 1180px !important;
}
body.page-id-156 .btn-primary {
background: #92278F !important;
}
body.page-id-156 .btn-primary:hover {
background: #6E1D6C !important;
}
.module-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.module-card {
background: #fff;
border: 1px solid #E4E8F0;
border-radius: 10px;
padding: 26px;
}
.module-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: #F3EAF3;
color: #92278F;
font-weight: 800;
font-size: 13px;
margin-bottom: 14px;
}
.module-title {
font-size: 17px;
font-weight: 800;
margin: 0 0 10px 0;
}
.module-aim {
font-size: 14px;
line-height: 1.6;
color: #495164;
margin: 0 0 14px 0;
}
.module-outcomes {
font-size: 13px;
line-height: 1.55;
color: #5B647A;
margin: 0;
}
/* This page's fee-table uses slightly different numbers than the Pathway template's. */
body.page-id-156 .fee-table td {
padding: 12px 4px;
font-size: 14.5px;
}
body.page-id-156 .fee-table tr.total td {
font-weight: 900;
font-size: 18px;
color: #92278F;
padding-top: 16px;
}
/*
* Application form (Contact Form 7, id 155) styling to match the
* canvas's plain input/label look — these are broad element
* selectors (label, input, select) so they're scoped to this page
* only to avoid leaking into wp-admin or any other form elsewhere.
*/
body.page-id-156 label {
display: block;
font-size: 13.5px;
font-weight: 700;
color: #1A2233;
margin-bottom: 7px;
}
body.page-id-156 .wpcf7-form input[type="text"],
body.page-id-156 .wpcf7-form input[type="tel"],
body.page-id-156 .wpcf7-form input[type="email"],
body.page-id-156 .wpcf7-form input[type="date"],
body.page-id-156 .wpcf7-form input[type="file"],
body.page-id-156 .wpcf7-form select {
width: 100%;
border: 1.5px solid #E4E8F0;
border-radius: 7px;
padding: 12px 14px;
font-size: 14.5px;
font-family: inherit;
color: #1A2233;
background: #fff;
}
body.page-id-156 .wpcf7-form input[type="file"] {
border-style: dashed;
color: #5B647A;
font-size: 13.5px;
padding: 16px;
text-align: center;
}
body.page-id-156 .wpcf7-form input:focus {
outline: none;
border-color: #92278F;
box-shadow: 0 0 0 3px rgba(146, 39, 143, .15);
}
body.page-id-156 .submit-btn,
body.page-id-156 .wpcf7-form input.submit-btn {
background: #92278F;
color: #fff;
font-weight: 700;
font-size: 15px;
padding: 14px 28px;
border-radius: 7px;
border: none;
cursor: pointer;
}
body.page-id-156 .submit-btn:hover {
background: #6E1D6C;
}
body.page-id-156 .wpcf7-form-control-wrap {
display: block;
}
body.page-id-156 .wpcf7-not-valid-tip {
font-size: 12.5px;
margin-top: 4px;
}
/*
* Real hidden state for the honeypot field — belt-and-braces alongside
* its inline style. Unscoped (not tied to one page ID) since the
* Contact form now uses the same honeypot field name as the
* Accelerator form (see inc/cf7-security.php).
*/
.wpcf7-form-control-wrap[data-name="cimg-hp-field"] {
position: absolute;
left: -9999px;
}
body.page-id-156 .cf-turnstile-wrap {
margin-bottom: 8px;
}
body.page-id-156 #main-content .et_pb_row {
max-width: 1320px !important;
}
@media (max-width: 1000px) {
.module-grid {
grid-template-columns: 1fr !important;
}
body.page-id-156 .form-grid {
grid-template-columns: 1fr !important;
}
}
/*
* Events page (Events.dc.html, page ID 171). Uses the site's standard
* 1320px .section-pad measure (already global) — no page-scoped override
* needed there, unlike the Pathway template/Accelerator page's narrower
* 1180px. The "Past events" archive grid is rendered by the
* [cimg_events_archive] shortcode (inc/events.php); this is just the
* canvas's own visual styling for it plus the "Upcoming" cards above it.
*/
.upcoming-card {
background: #fff;
border: 1px solid #E4E8F0;
border-radius: 10px;
padding: 24px;
flex: 1;
min-width: 260px;
}
.upcoming-date {
font-size: 13px;
font-weight: 800;
letter-spacing: .02em;
color: #92278F;
margin-bottom: 10px;
display: block;
}
.upcoming-date.tbd {
color: #5B647A;
}
.filter-tab {
padding: 9px 18px;
border-radius: 20px;
font-size: 13.5px;
font-weight: 700;
color: #5B647A;
background: #F5F7FB;
cursor: pointer;
display: inline-block;
}
.filter-tab.active {
background: #15488A;
color: #fff;
}
.archive-card {
border-radius: 10px;
overflow: hidden;
position: relative;
}
button.archive-card {
border: none;
background: none;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
font: inherit;
cursor: pointer;
display: block;
}
.archive-card img {
width: 100%;
height: 240px;
object-fit: cover;
display: block;
}
.archive-zoom {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(14, 47, 92, .75);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .15s;
}
button.archive-card:hover .archive-zoom,
button.archive-card:focus-visible .archive-zoom {
opacity: 1;
}
.archive-label {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 16px;
background: linear-gradient(to top, rgba(14, 47, 92, .92), transparent);
color: #fff;
font-size: 14.5px;
font-weight: 700;
}
.cimg-lightbox-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(14, 47, 92, .9);
z-index: 9999;
align-items: center;
justify-content: center;
padding: 32px;
cursor: zoom-out;
}
.cimg-lightbox-img {
max-width: 100%;
max-height: 100%;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
body.page-id-171 #main-content .et_pb_row {
max-width: 1320px !important;
}
@media (max-width: 900px) {
body.page-id-171 .upcoming-row {
flex-direction: column;
}
body.page-id-171 .archive-grid {
grid-template-columns: 1fr 1fr !important;
}
}
/*
* Content Hub / Blog (design/Blog.dc.html, design/BlogPost.dc.html).
* The archive page (page ID set below once created) reuses .filter-tab
* from the Events page unchanged. The single-post template
* (single-post.php, native `post` type only) needs its own narrower
* 800px reading-column measure — .section-pad is 1320px site-wide, so
* this is scoped to WordPress's own `single-post` body class rather than
* a page ID, same reasoning as the Pathway template's 1180px override.
*/
.post-card {
border: 1px solid #E4E8F0;
border-radius: 10px;
overflow: hidden;
background: #fff;
display: flex;
flex-direction: column;
}
.post-card img {
width: 100%;
height: 190px;
object-fit: cover;
display: block;
}
.post-body {
padding: 20px;
display: flex;
flex-direction: column;
flex: 1;
}
.cat-tag {
display: inline-block;
font-size: 11px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
margin-bottom: 12px;
width: fit-content;
}
.cat-news {
background: #E9F0FB;
color: #15488A;
}
.cat-press {
background: #FDF1E7;
color: #943C0D;
}
.cat-thought {
background: #EAF7F6;
color: #0F7A73;
}
.cat-careers {
background: #F3EDF7;
color: #6A2E86;
}
.cat-pub {
background: #FDECEC;
color: #A32626;
}
button.post-card {
border: 1px solid #E4E8F0;
background: #fff;
padding: 0;
margin: 0;
text-align: left;
width: 100%;
font: inherit;
cursor: pointer;
}
.post-card-media {
position: relative;
}
.post-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
}
.post-play svg {
width: 52px;
height: 52px;
padding: 16px;
border-radius: 50%;
background: rgba(14, 47, 92, .75);
}
.cimg-lightbox-video {
width: min(100%, 960px);
aspect-ratio: 16 / 9;
}
.cimg-lightbox-video iframe {
width: 100%;
height: 100%;
border: none;
border-radius: 8px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
}
.post-title {
font-size: 16px;
font-weight: 800;
line-height: 1.4;
margin-bottom: 10px;
color: #1A2233;
}
.post-meta {
font-size: 12.5px;
color: #5B647A;
margin-top: auto;
padding-top: 12px;
}
body.single-post .section-pad {
max-width: 800px !important;
}
/*
* Blog post featured image — sits below the navy title hero, inside the
* same 800px .section-pad reading column at every width, so it never
* needs a separate full-bleed/contained split between mobile and desktop
* (the earlier full-bleed banner treatment this replaced was what made
* that split necessary in the first place; now that the title lives in
* its own hero band above, the image is just a normal contained image in
* the article flow).
*/
.blog-post-image {
display: block;
width: 100%;
max-height: 480px;
object-fit: cover;
border-radius: 10px;
}
body.single-post .byline {
display: flex;
align-items: center;
gap: 12px;
margin: 24px 0 36px 0;
padding-bottom: 24px;
border-bottom: 1px solid #E4E8F0;
}
body.single-post .avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: #15488A;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 14px;
flex: none;
}
body.single-post .post-body p {
font-size: 16.5px;
line-height: 1.85;
color: #3A425A;
margin-bottom: 22px;
}
body.single-post .post-body h2 {
font-size: 21px;
margin: 36px 0 14px 0;
color: #1A2233;
}
body.single-post .related-card {
border: 1px solid #E4E8F0;
border-radius: 10px;
overflow: hidden;
background: #fff;
display: block;
}
body.single-post .related-card img {
width: 100%;
height: 140px;
object-fit: cover;
display: block;
}
body.single-post .related-title {
font-size: 14px;
font-weight: 800;
line-height: 1.4;
padding: 14px;
color: #1A2233;
margin: 0;
}
body.single-post .cta-band {
background: #B75108;
border-radius: 12px;
padding: 36px;
text-align: center;
margin: 56px 0;
}
@media (max-width: 1000px) {
.post-grid {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 700px) {
body.single-post .related-grid {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 640px) {
.post-grid {
grid-template-columns: 1fr !important;
}
}
body.page-id-177 #main-content .et_pb_row {
max-width: 1320px !important;
}
/*
* About page (design/About.dc.html, page ID 194). Standard 1320px
* .section-pad, no page-scoped override needed. Governing Council grid is
* rendered by [cimg_council_grid] (inc/about.php); everything else here is
* static per report.md §4.2 ("keep the History/Vision/Mission copy").
*/
.milestone-year {
font-size: 28px;
font-weight: 900;
color: #15488A;
}
.milestone-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: #1BAEA8;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #1BAEA8;
}
/*
* Timeline connector line, dot-to-dot. Three fix attempts, in order:
*
* 1. The canvas's own version was a single absolutely-positioned line
* pinned at a fixed left:60px/right:60px, which missed the first dot
* and overshot past the last one.
* 2. Replaced it with one line segment per item (each item's own
* `::before`, reaching backward to the previous dot) — this painted
* IN FRONT of the previous dot instead of behind it, because each
* timeline item has `position:relative;z-index:1` inline (canvas
* markup) and, with equal z-index, a later sibling's whole stacking
* context paints above an earlier sibling's regardless of that
* pseudo-element's own z-index.
* 3. Replaced that with a single `.timeline-row::before` sized by
* `calc(100%/3)`, assuming 3 equal-width flex items — WRONG in
* practice: items 1 and 2 carry inline `padding-right:20px` (item 3
* doesn't), and with `flex:1` (flex-basis:0%) on a `box-sizing:
* border-box` item, that padding still makes items 1/2 render ~20px
* wider than item 3, confirmed by measuring actual rendered item
* widths (~425px/~425px/~405px of a 1256px row, not 419px each).
* Percentage math can't get this right.
*
* Fixed for real with a measured, not calculated, start: a real
* `.timeline-connector` div (first child of `.timeline-row`, inserted
* directly in this page's content) whose `left` is set by a small inline
* `