. Question 6 is the only one with a list today. */
.csa-accordion__a p {
margin: 0 0 12px;
}
.csa-accordion__a ul {
margin: 0;
padding-left: 18px;
list-style: disc outside;
}
.csa-accordion__a li {
margin: 0 0 4px;
}
.csa-accordion__a > :first-child {
margin-top: 0;
}
.csa-accordion__a > :last-child,
.csa-accordion__a li:last-child {
margin-bottom: 0;
}
/* A table inside an answer. Added 2026-09-14, for the payment details table.
There is no builder field for a | or a | , so this is the same case as
a code block: the builder cannot see inside the copy.
OXYGEN-CONVENTIONS.md section 9.
The rest of the answer, the sub-headings and the paragraphs, is set in the
Rich Text element's own editor and needs nothing here.
On the site this block sits at the END of the stylesheet, where it was
pasted on 2026-09-14. Nothing else targets `.csa-accordion__a table`, so
the position changes no cascade. The next full import lands it here. */
.csa-accordion__a table {
width: 100%;
margin: 0 0 12px;
border: 1px solid #eef0f5;
border-collapse: collapse;
}
.csa-accordion__a th,
.csa-accordion__a td {
padding: 8px 12px;
border: 1px solid #eef0f5;
text-align: left;
vertical-align: top;
}
.csa-accordion__a th {
font-weight: 700;
color: #0d2651;
}
/* A LINK INSIDE AN ANSWER. Pink and underlined, as decided on
2026-09-18. Without a rule the browser paints it `-webkit-link` blue, which
is the only blue anywhere on this site.
OXYGEN-CONVENTIONS.md section 9, two rows: "hover, focus and active
states", and "the output of a code block", because the copy lives inside a
Rich Text element and the builder has no field for a link buried in it.
The download button in the FAQs course-fees answer is NOT touched. It is a
ct_link inside `__panel-inner`, a SIBLING of `__a`, not a descendant.
THE HOVER COLOUR IS INVENTED. The design gives accordion links no state at
all. Navy is the question colour from the same block, so it reads as part
of the set. It is due for design review, blocker B10. */
.csa-accordion__a a {
color: #ff3364;
text-decoration: underline;
transition: color 0.2s ease;
}
.csa-accordion__a a:hover,
.csa-accordion__a a:focus-visible {
color: #0d2651;
}
/* A LOGO AT THE TOP OF AN ANSWER. Our Accreditation, 2026-09-18.
Capped by HEIGHT, not by width. The ten accreditation logos run from
150 x 300 portrait, NEBOSH, to 600 x 142 landscape, Saiosh, so a width cap
would draw NEBOSH 600px tall. Both caps together keep the aspect ratio and
let every logo sit on one visual line.
80px IS NOT FROM A DESIGN. There is none for this page. It is the one
number here worth tuning. */
.csa-accordion__a img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 80px;
margin: 0 0 12px;
}
/* A WIDE TABLE INSIDE AN ANSWER. Our Accreditation, 2026-09-18.
Three of its ten answers carry a four column table, SAQA ID, qualification,
NQF level and credits, whose longest cell is an 85 character qualification
title, "Further Education and Training Certificate: Information Technology:
Technical Support". At 375px that table cannot be read and, with no
wrapper, it pushes the whole page wide. So it scrolls sideways inside the
answer instead.
The wrapper is written into the Rich Text copy, which is why it is here and
not in the builder. OXYGEN-CONVENTIONS.md section 9.
ONLY THE FOUR COLUMN TABLES ARE WRAPPED. The Sage and NEBOSH tables are one
column and fit at every width, so they carry no wrapper and no scrollbar.
520px is the point below which four columns stop being readable. */
.csa-accordion__a .csa-table-scroll {
margin: 0 0 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.csa-accordion__a .csa-table-scroll > table {
min-width: 520px;
margin: 0;
}
/* One column at 991 and down. 991 is the Oxygen tablet breakpoint, so the
builder's own tablet fields line up with this rule. The design measures a
24px row gap on the 600 frame against 16px on the 1440 frame. */
@media (max-width: 991px) {
/* `align-items: stretch` again. The row layout wants `flex-start`, so the
two columns sit top aligned at their own height. The moment the
direction flips to column, that same `flex-start` shrinks each column to
its widest question instead of filling the band. */
.csa-accordion {
flex-direction: column;
align-items: stretch;
gap: 24px;
}
.csa-accordion__col {
gap: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.csa-accordion__panel,
.csa-accordion__disc,
.csa-accordion__arrow {
transition: none;
}
}
/* --------------------------------------------------------------------------
20. Page hero, the reusable banner section
Built 2026-09-11. Used on the Courses page first, and then on every page
that takes a banner. It is in this file, not in a page file, because it
runs on seven pages or more. Decision D34.
THREE THINGS LIVE HERE AND NOTHING ELSE. Everything else is in
`json/courses/page-hero.json`, on the classes, so the builder fields stay
live. Rule 13, decision D62.
1. `min-height`, because a `calc` with `vw` has no field. Released below
768, where the copy sets the height.
2. The inner wrap given the section's own height, so the copy can be
centred in it. There is no field for that, and it locks nothing.
3. The CTA hover and its transition, and the wide icon box. Oxygen state
handling is limited, and the builder cannot see inside a code block.
`OXYGEN-CONVENTIONS.md` section 9.
THERE IS NO PADDING RULE HERE, AND THAT IS DELIBERATE. Decision D69. The
section carries no padding. Its own four padding fields are set to 0 on
the element in the JSON, which lands on the inner wrap and replaces
Oxygen's own 75px. The real padding is on `csa-page-hero__inner`, a plain
Div, so no default adds to it and nothing has to be cancelled in CSS.
EVERY HERO IS THE SAME HEIGHT, AND THE ARTWORK CROPS. Decision D70,
2026-09-11, decided after comparing the Courses page and the home page
side by side on a 1920 x 945 screen.
The first build gave each page the height of its own artwork, 2.286 for
the 1920 x 840 files and 2.630 for the 1920 x 730 ones. That cropped
nothing, but it made the Courses hero 110px taller than the home hero at
1920 and pushed the brag strip off the screen.
So the ratio is now 2.630 everywhere, which is the home page banner's own
shape. A 1920 x 840 banner in it loses 13.1 per cent of its height, 55px
at the top and 55px at the bottom at 1920, and the same 13.1 per cent at
every width below the cap. That crop is accepted. The navy half of the
artwork is flat colour, so the crop is only ever visible in the photo.
The 730px cap is the artwork's own height, so above 1920 the hero stops
growing instead of reaching 1 120px on a 2 560 screen.
Below 768 there is no min-height at all. The portrait artwork is anchored
to the bottom edge and the navy background colour fills the space above
it, so the copy sets the height. `calc(100vw / 0.732)` was rejected: it
asks for 1 048px of hero at 767px wide. The number that tunes that tier is
`padding-bottom` on `csa-page-hero__inner` at Phone Landscape, in per
cent, and a percentage padding resolves against the element's own width.
Decision D49.
`100vw` counts the scrollbar, so the section is 6 to 7px taller than the
ratio asks in a desktop browser. Risk R6, accepted.
-------------------------------------------------------------------------- */
.csa-page-hero {
min-height: min(calc(100vw / 2.63), 730px);
}
/* The wrap is only as tall as its content, so `justify-content: center` set
on the class in the builder would have nothing to centre against. This
hands it the section's own computed height. The centring itself stays a
builder field. */
.csa-page-hero.ct-section > .ct-section-inner-wrap:not(.oxy-easy-posts) {
min-height: inherit;
}
@media (max-width: 767px) {
.csa-page-hero {
min-height: 0;
}
}
/* The CTA arrow is 24 x 13, not a square. `.csa-icon` in `02-base.css` is
1em by 1em, which letterboxes it. Height drives it here and the viewBox
supplies the width, so there is no magic number to keep in step with the
file. The size is the `font-size` on the code block's class, in the
builder. */
.csa-icon--wide {
width: auto;
height: 1em;
}
/* The CTA hover. Pink fill, white label, white arrow, agreed with the
designer on 2026-09-11. Decision D68.
Both children are named. Each one carries its own colour from its own
class, so neither can inherit a colour from the link. The arrow follows
`color` because `code-blocks/icons/long-arrow-right.html` carries
`stroke="currentColor"`.
Classes, not ids. The fees and finance hover in `css/05-home.css` section
3 targets ids, and an import that renumbers would kill it silently. */
.csa-page-hero__cta,
.csa-page-hero__cta-label,
.csa-page-hero__cta-icon {
transition: background-color 0.2s ease, color 0.2s ease;
}
.csa-page-hero__cta:hover,
.csa-page-hero__cta:focus-visible {
background-color: #ff3364;
}
.csa-page-hero__cta:hover .csa-page-hero__cta-label,
.csa-page-hero__cta:focus-visible .csa-page-hero__cta-label,
.csa-page-hero__cta:hover .csa-page-hero__cta-icon,
.csa-page-hero__cta:focus-visible .csa-page-hero__cta-icon {
color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
.csa-page-hero__cta,
.csa-page-hero__cta-label,
.csa-page-hero__cta-icon {
transition: none;
}
}
/* ---------------------------------------------------------------------------
21. Card slider, the logo strip add-on
Rewritten 2026-09-16, session 27. Decision D89.
An accreditation logo band is the card slider with two changes.
768 and up the row WRAPS. It is not a slider at all. No chevron,
no lane, no paging. A school can carry three logos or
ten and the band simply grows another row.
767 and down it is a slider, and every logo takes an EQUAL SLOT.
Two slots to a view down to 481, one slot at 480 down.
WHY THE SLOTS
Measured on the build site 2026-09-16, before this change. At a 375 viewport
the track window is 267px and each logo was its own width, 93 to 185px. So
the window was wider than one logo and narrower than two, and the right edge
of the track cut the second logo in half on BOTH school pages:
IT, 10 logos window 267, scroll width 1712. The first view showed
CompTIA whole and Microsoft sliced.
HR, 3 logos window 267, scroll width 519. The first view showed
QCTO whole and SAQA sliced.
An equal slot puts the track edge on a slot boundary, so a logo is either
wholly in the view or wholly out of it. It also makes snippet S3 exact. The
script steps by the FIRST child's width plus the gap, which drifted badly
against ten unequal logos and was only ever rescued by `scroll-snap-type`.
WHY A SLOT CARRIES A HEIGHT, AND WHY THAT IS NOT A RULE 13 BREAK
The slot sizes the box. `object-fit: contain` then fits the logo inside it,
so a 4.4:1 wordmark and a 1.2:1 crest occupy the same box and neither one is
ever cropped or distorted. Without the height a 1.2:1 logo in a full width
slot at 375 renders 230px tall and owns the whole band.
`height` HAS an Oxygen field. It is written here because it would otherwise
be set by hand on every logo, on every school page: five schools and about
thirty images. OXYGEN-CONVENTIONS.md section 9, "anything repeated across
three or more places". `flex-basis` and `object-fit` have no field at all,
and section 10 proves `flex-basis` is dropped on import.
WHAT IS DELIBERATELY NOT HERE
`flex-wrap`, `gap`, `align-items` and `justify-content` all have fields, and
all three tiers are Oxygen's own breakpoints, so they live on the class
`csa-logos__track` in the builder. Rule 13.
They were set on the ELEMENT on both pages, which Oxygen compiles to an ID
rule at 1,0,0. That beats every rule in this file and every class. So those
element values MUST be cleared for the class, and this section, to do
anything at all. STATUS.md carries the steps.
THE 16px IN THE CALC IS THE GAP
It has to match the `gap` set on `csa-logos__track` at Phone Landscape. CSS
cannot read a gap, so the number is written twice. Section 17 does the same
thing with its 20px. Change one and change the other.
THE SELECTOR
Section 17 sets the item width at 991 and below:
.csa-slider .csa-slider__track > :not(.ct-section):not(.oxy-easy-posts)
That is 0,4,0. An item width set on a class in the builder is written at
0,3,0 and loses, so this one cannot go in the builder. Decision D36, and
OXYGEN-CONVENTIONS.md section 9.
The rules below are 0,4,0 as well, so SOURCE ORDER decides between them.
They have to stay AFTER section 17. Do not move this section up the file.
--------------------------------------------------------------------------- */
/* ---- 768 and up, a wrapping row, not a slider --------------------------- */
/* Section 17 insets `.csa-slider` by 48px to make a lane for the two buttons.
With no buttons on show that is 96px of the row's width given away for
nothing, so the lane comes off with them.
`overflow-x: auto` from section 17 is LEFT ALONE at 768 to 991, on purpose.
A wrapped row cannot overflow, so it never fires. If the wrap is ever turned
off on a page, the row scrolls instead of spilling out of the section, and a
row you cannot reach is a smaller fault than a page that scrolls sideways. */
@media (min-width: 768px) {
.csa-slider--logos .csa-slider__btn {
display: none;
}
.csa-slider--logos {
padding-left: 0;
padding-right: 0;
}
/* Each logo keeps the width set on it in the builder. `flex-basis: auto`
undoes section 17's two up basis, which runs from 991 down and would
otherwise give each logo a share of the row at 768 to 991 instead of its
own width. `max-width` is the safety net, because section 17 sets
`max-width: none` at 0,4,0 over the same range. */
.csa-slider--logos .csa-slider__track > :not(.ct-section):not(.oxy-easy-posts) {
flex-basis: auto;
max-width: 100%;
}
}
/* ---- 767 to 481, two equal slots to a view ------------------------------ */
/* THE `justify-content` GUARD IS NOT OPTIONAL, AND IT IS NOT A STYLE CHOICE.
Measured on the build site 2026-09-16, with ten logos at a 375 viewport.
`justify-content: center` on a flex row that ALSO overflows centres the
content on the container, so the overflow goes out of BOTH sides. The left
overhang sits at a negative offset, and `scrollLeft` cannot go negative:
first logo offset -1206px
min scrollLeft 0
max scrollLeft 0
Nine of the ten logos were unreachable, silently, with the chevrons showing
and doing nothing. Section 17 already warns about this in its own words and
leaves `justify-content` unset for exactly this reason.
NOTHING IN THIS PROJECT SETS IT. The design aligns the row to the start at
every width, and `csa-logos__track` carries no Justify content field at any
breakpoint. A centred row at Desktop was proposed and rejected on
2026-09-16, and the JSON no longer declares it.
So this rule is a rail, not support for a style. It is 0,4,0, which beats
the 0,3,0 Oxygen writes for a class, so if anyone ever sets Justify content
on the track in the builder the value cannot reach the tier where it breaks
scrolling. An element level value still beats it, at 1,0,0, which is the
correct escape hatch.
It locks the field on the track at 767 and down. That costs nothing. One
slot fills the view, so the property has no visible effect there at all.
Its only possible effect is the bug above.
96px of height. At 767 a slot is about 315px wide, so the widest wordmark in
the set, 4.4:1, is 72px tall in it and the height never binds. It binds on
the tall marks only, which is the point of it. */
@media (max-width: 767.98px) {
.csa-slider--logos .csa-slider__track:not(.ct-section):not(.oxy-easy-posts) {
justify-content: flex-start;
}
.csa-slider--logos .csa-slider__track > :not(.ct-section):not(.oxy-easy-posts) {
flex-basis: calc((100% - 16px) / 2);
height: 96px;
object-fit: contain;
object-position: center;
}
}
/* ---- 480 and down, one slot to a view ----------------------------------- */
/* Two slots at 480 leave about 178px a logo, and the 4.4:1 wordmark is 40px
tall in that, under the 12px-equivalent floor the rest of the site holds to.
One slot gives the same wordmark the full 372px window and 61px of height.
Section 17 narrows the button lane at the same width, so the two flips stay
together and there is one place to read the tier.
80px, not 96px, because the window is now the whole track: a 1.2:1 crest at
96px would be 116px wide against a 267px window at 375 and would sit alone
in a band half as tall again as it needs to be. */
@media (max-width: 480px) {
.csa-slider--logos .csa-slider__track > :not(.ct-section):not(.oxy-easy-posts) {
flex-basis: 100%;
height: 80px;
}
}
/* The base net, for the wrapping tier. Section 17 overrides it at 991 and
below, which is why the 768 block above restates it. */
.csa-logos__item {
max-width: 100%;
height: auto;
}
/* ---------------------------------------------------------------------------
22. Course catalogue, the chip states and the row zebra
Two rule sets, and nothing else. Every other value in the catalogue is a
builder field and lives in the classes in json/hr/. Ground rule 13.
WHY THE CHIP STATES CANNOT GO IN THE BUILDER
Oxygen marks the active tab with a class that carries the tabs element's own
instance number. Read off the build site 2026-09-14:
The 8664 changes per instance, so no stylesheet can name that class and no
builder field targets it either. Snippet S5 mirrors the state onto
`aria-selected`, which is both the correct ARIA and a stable hook, and that
is what these rules key off.
The instance class is kept as a SECOND selector, matched loosely. If S5 is
off, or fails, the active chip still looks active. It is scoped to
`.csa-chip`, so it cannot match anything else on the page.
--------------------------------------------------------------------------- */
/* A tab is a div, so it does not get a pointer on its own. This is the one
value here that MIGHT have an Oxygen field. If it does, move it to the
builder and delete this rule. */
.csa-chip {
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.csa-chip[aria-selected="true"],
.csa-chip[class*="-tab-active"] {
color: #ffffff;
background-color: #ff3364;
border-color: #ff3364;
}
.csa-chip[aria-selected="true"] .csa-chip__count,
.csa-chip[class*="-tab-active"] .csa-chip__count {
color: #ff3364;
background-color: #ffebf0;
}
/* The design gives the chip no hover state at all. This is invented, and it
is deliberately slight: the border and the label only. It is due for design
review with the other three on the blocker B10 list. */
.csa-chip:hover:not([aria-selected="true"]):not([class*="-tab-active"]) {
color: #0d2651;
border-color: #ffaee0;
}
/* The chip is the control that reveals the courses, so it needs a visible
focus ring. The ring in css/02-base.css is scoped to the header and the
footer, so it does not reach here. */
.csa-chip:focus-visible {
outline: 2px solid #ff94cc;
outline-offset: 2px;
}
/* ---- the specification rows ---------------------------------------------
Rows 1, 3, 5 and 7 carry the darker fill, which is what the design draws:
Entry requirements is striped, Language requirements is not. The even rows
need no rule, because they show the card's own background through.
`:nth-child` has no builder field, which is why this is here. It also means
the stripes stay correct when the row count changes, and a short course
card has a different row set from an accredited one.
The rows have their own wrapper, `.csa-course-card__rows`, so the count
starts at the first row and is not thrown off by the card head. */
.csa-course-card__row:nth-child(odd) {
background-color: #d7eaff;
}
/* ---- the card foot ------------------------------------------------------
`margin-top: auto` on `.csa-course-card__foot` is what holds the price row
and the button to the bottom of the card, so two cards in a row end on the
same line however long their blurbs are.
IT IS NOT WRITTEN HERE, ON PURPOSE. It was, for about ten minutes, on the
wrong conclusion that the builder could not express it. It can:
`auto` is a UNIT in the Oxygen margin field, not a value. Pick it in
the unit dropdown next to the number and it works. Rule 13 therefore keeps
it in the builder, and a rule here would lock the field.
It is set on the class in the builder, by hand, because the JSON cannot
carry it yet. See OXYGEN-CONVENTIONS.md section 10. */
/* ---- the card button ----------------------------------------------------
Hover, focus and the transition only. The pink, the radius and the padding
are all builder fields and are in json/hr/panel-*.json. The hover colour is
the same one `.csa-btn--primary` uses in section 1, so the two agree. */
.csa-course-card__cta,
.csa-course-card__cta-label,
.csa-course-card__cta-icon {
transition: background-color 0.2s ease, color 0.2s ease;
}
.csa-course-card__cta:hover,
.csa-course-card__cta:focus-visible {
background-color: #e51f4f;
}
.csa-course-card__cta:focus-visible {
outline: 2px solid #ff94cc;
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.csa-chip,
.csa-course-card__cta,
.csa-course-card__cta-label,
.csa-course-card__cta-icon {
transition: none;
}
}
/* ---------------------------------------------------------------------------
23. Course card, the mobile layout
The signed off mobile design, Figma `147:3` closed and `147:39` open.
THE SPEC BLOCK WEARS NO `csa-accordion__*` CLASS, and that is the whole
point of this section. The first attempt reused them for the mechanism and
inherited the FAQ's LOOK with it: section 19 puts `background: #ffffff`, a
1px `#eef0f5` border and an 8px radius on `.csa-accordion__item`, and
`padding: 16px 24px` plus a radius on `.csa-accordion__q`. On the course
card that showed as white rows on BOTH tiers, the wrong radius on the
requirements block and a badly inset bar. Confirmed on the site 2026-09-16.
So the card has `csa-spec*` classes of its own and snippet S4 was taught to
recognise them. The panel mechanics below are therefore duplicated from
section 19 rather than inherited. That duplication is deliberate: it is what
keeps the FAQ band and the course card from styling each other.
WHAT IS NOT HERE. The bar's fill, radius and padding, the tiles, the row
weights, the foot and the price placement are all builder fields and live in
`json/hr/panel-*.json`. Ground rule 13.
THE BAR'S `display` IS NOT HERE EITHER, and it must not be. Oxygen writes a
display set on a class at 0,3,0, so a `@media` rule here at 0,2,0 loses and
the bar stayed visible on desktop. It is `none` by default and `flex` at
Phone Landscape, both set in the JSON. Section 10.
--------------------------------------------------------------------------- */
/* ---- the bar is hidden from 768 up -------------------------------------
`!important`, and it is the one place in this project that earns it.
Two things were tried first and both failed, measured on the site:
1. A plain `@media (min-width: 768px) { ... display: none }`. Oxygen writes
a display set on a class at 0,3,0, through its
`:not(.ct-section):not(.oxy-easy-posts)` triple, so a 0,2,0 rule here
loses and the bar stayed visible on desktop.
2. `display: none` as the BASE value in the JSON with `flex` at Phone
Landscape. Oxygen dropped the base `none` and emitted
`.csa-spec__bar{display:flex}` with no media query at all.
Oxygen's own breakpoints are all max-width, so the builder cannot express
"768 and up" either. That leaves this. Section 10.
THE SELECTOR IS FOUR CLASSES DEEP FOR A REASON. A plain
`.csa-spec__bar { display: none !important }` is 0,1,0 and STILL lost,
because between two `!important` declarations specificity is compared
before source order, and Oxygen's is 0,3,0. This is 0,4,0. Caught in
preview/course-card.html at a real 1100px viewport, which is the third time
this same rule has bitten on this component. */
@media (min-width: 768px) {
.csa-course-card .csa-spec .csa-spec__item > .csa-spec__bar {
display: none !important;
}
}
/* ---- the collapsing panel ----------------------------------------------
Same mechanism as section 19: the panel animates `grid-template-rows` from
`0fr` to `1fr`, so nothing has to be measured and it survives every resize.
`align-items: stretch` overrides Oxygen's `flex-start`, which otherwise
sizes the row to its content instead of to the 0fr track and stops the
panel closing at all. */
.csa-spec__panel {
display: grid;
grid-template-rows: 1fr;
align-items: stretch;
width: 100%;
transition: grid-template-rows 0.3s ease;
}
html.csa-js .csa-spec__panel {
grid-template-rows: 0fr;
}
html.csa-js .csa-spec__item.is-open .csa-spec__panel {
grid-template-rows: 1fr;
}
/* Held open from 768 up, where the bar is hidden and the card shows its whole
specification list. 0,3,1 against the 0,2,1 above, so it wins. Snippet S4
also leaves a spec item open and never marks it `inert` up here, because CSS
cannot undo `inert`. If you change this breakpoint, change the matchMedia
query in S4 with it. */
@media (min-width: 768px) {
html.csa-js .csa-spec__panel {
grid-template-rows: 1fr;
}
}
/* `display: block` on purpose. It is the grid child, and blocking it out of
Oxygen's flex column removes every inherited flex rule in one line. */
.csa-spec__panel-inner {
display: block;
overflow: hidden;
min-height: 0;
}
/* ---- the toggle -------------------------------------------------------- */
/* The row is a real |