with no
alt/aria equivalent. Sizes were tuned live; they are NOT arbitrary, so change
them here rather than re-deriving them inline. */
.bannerAccent {
position: absolute;
bottom: -70px;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 160px;
border: 18px solid var(--color-yellow-bright);
box-sizing: border-box;
z-index: 1;
}
@media (min-width: 576px) {
.bannerAccent {
bottom: -100px;
width: 200px;
height: 200px;
}
}
@media (min-width: 992px) {
.bannerAccent {
bottom: -120px;
width: 260px;
height: 260px;
border-width: 20px;
}
}
/* About Us variant — sits ON the photo, inset from its right edge, rather than straddling the
bottom edge and centring the way the What We Do square does.
WHY THIS EXISTS AT ALL: this square used to live in the page body, absolutely positioned
~970px upwards out of the "Who you'll actually work with" section in order to reach the photo.
Its position therefore depended on the combined height of the banner title, the photo and the
spacing between them — so a translated title wrapping to one more line would move it, and each
language would have needed its own offset. As a child of .bannerPhoto it's measured from the
photo itself and cannot drift, in any language.
BOTH BREAKPOINTS. Mobile used to keep its own square in the page body, and that turned out to
be the same bug in miniature: the body section is pulled up under the photo, so the square (and
the heading with it) landed on top of the image. Measured live at 375px, the section's
sat
41px inside the photo and covered the photo credit completely. Anchoring the square here and
removing the pull fixes both. The mobile values reproduce the old rendering exactly — 120px
square, 10px border, straddling the photo's bottom-right corner.
`top` (desktop) / `bottom` (mobile) is the one value to tune if the square sits too high or low.
Desktop measures DOWN from the photo's top edge, mobile UP from the bottom. Anchoring from the top rather than the bottom is deliberate: the photo's own
height is fixed, but a photo credit sits below it (About Us has one), so a bottom-anchored
offset would shift if that caption ever wrapped to two lines.
Three of these declarations exist purely to undo the base .bannerAccent rule, which centres the
square horizontally and hangs it off the photo's bottom edge: `left: auto` and `transform: none`
cancel the centring, and `bottom: auto` cancels the bottom anchoring so `top` can take over.
Without that last one the element would have both offsets set and `top` would lose. */
.bannerAccent--onPhoto {
left: auto;
transform: none;
top: auto;
bottom: -30px;
right: -5px;
width: 120px;
height: 120px;
border-width: 10px;
}
@media (min-width: 992px) {
.bannerAccent--onPhoto {
bottom: auto;
top: 110px;
right: 130px;
width: 260px;
height: 260px;
border-width: 20px;
}
}
/* Paragraph copy inside content blocks. Replaces the old convention of writing
`
` in the desktop copy and a plain `
` in the mobile one.
Mobile value is the site's 19px base; desktop steps up to what `.bigger` did. */
.bodyText {
font-size: 1em;
line-height: 30px;
}
@media (min-width: 992px) {
.bodyText {
font-size: 1.2em;
line-height: 1.6em;
}
}
/* Section headings (
). `padding-top: 0` is baked in because the base h2 rule
carries `padding-top: 1.2em`, which every inline style was overriding by hand.
Use the --secondary modifier for closing/centered headings — see the two
heading tiers documented in :root above. */
.sectionHeading {
font-size: var(--font-size-heading-mobile);
padding-top: 0;
}
@media (min-width: 992px) {
.sectionHeading {
font-size: var(--font-size-heading-desktop);
}
}
@media (min-width: 992px) {
.sectionHeading.sectionHeading--secondary {
font-size: var(--font-size-heading-secondary-desktop);
}
}