cards. Values mirror the original
image geometry so the cards sit exactly where the images did. */
.about__img-wrap-three > .oerl-badge-card { position:absolute; left:-10%; bottom:18%; z-index:2; }
@media (max-width:767.98px){ .about__img-wrap-three > .oerl-badge-card { display:none; } }
.choose__img-wrap-five { position:relative; }
.choose__img-wrap-five > .oerl-badge-card { position:absolute; left:17%; bottom:8%; z-index:2; }
.choose__img-wrap-five > .oerl-callout,
.choose__img-wrap-five > .oerl-scard--row { position:absolute; right:0; bottom:15%; z-index:2; }
/* choose-img-wrap / choose__img-wrap-three also floated the card via img
selectors — re-anchor the bars card, mirroring the responsive shifts. */
.choose-img-wrap > .oerl-scard { position:absolute; left:-16%; bottom:0; z-index:2; }
@media (max-width:1199.98px){ .choose-img-wrap > .oerl-scard { left:-9%; } }
@media (max-width:991.98px){ .choose-img-wrap > .oerl-scard { left:-2%; } }
@media (max-width:767.98px){ .choose-img-wrap > .oerl-scard { display:none; } }
.choose__img-wrap-three > .oerl-scard { position:absolute; left:9%; top:30%; z-index:2; }
@media (max-width:1199.98px){ .choose__img-wrap-three > .oerl-scard { left:0; } }
@media (max-width:767.98px){ .choose__img-wrap-three > .oerl-scard { display:none; } }
/* ==========================================================================
PHASE 3.1 — UI polish, dark-mode & responsive refinements.
Scoped overrides only; vendor main.css is left untouched.
========================================================================== */
/* --- Header "Let's Talk" CTA: keep the label readable in every state -------
Bug: in sticky mode main.css forces `.tgmenu__action ul li a { color:primary
!important }`, so the button text turned primary. On hover the .btn::before
primary fill expands → primary text on primary fill = invisible. Pin the
label to white in default + sticky + hover/focus/active, over the fill. */
/* Use a literal white, not --tg-color-white-default: that token is remapped to
navy in dark mode, which is exactly what turned the label invisible. The CTA
sits on an orange (idle) / blue (hover-fill) button, so white is always AA. */
.tgmenu__action ul .header-btn .btn,
.tgmenu__action ul .header-btn .btn:hover,
.tgmenu__action ul .header-btn .btn:focus,
.tgmenu__action ul .header-btn .btn:focus-visible,
.tgmenu__action ul .header-btn .btn:active,
.sticky-menu .tgmenu__action ul .header-btn a,
.sticky-menu .tgmenu__action ul .header-btn .btn:hover {
color: #fff !important;
}
.tgmenu__action ul .header-btn .btn:focus-visible {
outline: 2px solid #fff; outline-offset: 2px;
}
/* --- Mobile dropdown toggle: contrast + touch feedback in both themes ------
Was 32px with black plus-lines on a pale tint — near-invisible in dark. */
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn {
width: 40px; height: 40px; line-height: 40px; top: 3px; border-radius: 9px;
background: var(--tg-theme-primary-50);
transition: background .25s ease, transform .12s ease, box-shadow .2s ease;
}
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn .plus-line,
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn .plus-line::after {
background-color: var(--tg-heading-color);
}
[data-bs-theme="dark"] .tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn {
background: var(--oerl-surface-2);
box-shadow: inset 0 0 0 1px var(--oerl-border-soft);
}
[data-bs-theme="dark"] .tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn .plus-line,
[data-bs-theme="dark"] .tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn .plus-line::after {
background-color: var(--oerl-text, #e6ebf5);
}
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn:hover {
background: var(--tg-theme-primary-500);
}
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn:hover .plus-line,
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn:hover .plus-line::after {
background-color: #fff;
}
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn:active { transform: scale(.9); }
.tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn:focus-visible {
outline: 2px solid var(--tg-theme-primary-500); outline-offset: 2px;
}
/* keep the "open" state accent (orange) legible too */
[data-bs-theme="dark"] .tgmobile__menu .navigation li.menu-item-has-children .dropdown-btn.open {
box-shadow: none;
}
/* --- Social icon lists: even circular touch targets that wrap cleanly ------ */
/* Header-top row (tablet+; the top bar is hidden < 768) */
.social-links > .list-wrap {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0;
}
.social-links > .list-wrap > li { list-style: none; margin: 0; }
.social-links > .list-wrap > li > a {
width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; font-size: 14px; color: #fff; background: rgba(255, 255, 255, .1);
transition: background .2s ease, color .2s ease, transform .15s ease;
}
.social-links > .list-wrap > li > a:hover { background: var(--tg-theme-secondary-500); color: #fff; transform: translateY(-2px); }
/* Off-canvas side panel — the mobile-visible social row */
.offCanvas__social-icon { display: flex; flex-wrap: wrap; gap: 10px; }
.offCanvas__social-icon a {
margin-right: 0; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%; font-size: 16px; border: 1px solid var(--oerl-border-soft, rgba(20,24,60,.12));
background: var(--oerl-surface-2, transparent);
transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.offCanvas__social-icon a:hover {
background: var(--tg-theme-secondary-500); border-color: var(--tg-theme-secondary-500);
color: #fff; transform: translateY(-2px);
}
/* Mobile menu bottom social — give the bare icons real targets */
.tgmobile__menu-bottom .social-links ul { gap: 10px; justify-content: center; }
.tgmobile__menu-bottom .social-links ul li a {
width: 42px; height: 42px; border-radius: 50%; font-size: 16px;
background: var(--tg-theme-primary-50); border: 1px solid var(--oerl-border-soft, rgba(20,24,60,.12));
}
[data-bs-theme="dark"] .tgmobile__menu-bottom .social-links ul li a { background: var(--oerl-surface-2); }
.tgmobile__menu-bottom .social-links ul li a:hover {
background: var(--tg-theme-secondary-500); border-color: var(--tg-theme-secondary-500); color: #fff;
}
/* --- "Our Journey" (service-student-success): dark-mode emphasis -----------
The section's fixed navy blended into the page in dark, and the pure-white
counter slab was jarring. Deepen the band, separate it, and make the card a
proper dark surface with readable metrics. */
[data-bs-theme="dark"] .journey_area-seven {
background-color: #0c1030;
border-top: 1px solid var(--oerl-border-soft);
}
[data-bs-theme="dark"] .box-counter-home7 {
background-color: var(--oerl-surface);
border: 1px solid var(--oerl-border-soft);
box-shadow: 0 26px 54px -30px rgba(0, 0, 0, .9);
}
[data-bs-theme="dark"] .box-counter-home7 .counter-item .count,
[data-bs-theme="dark"] .box-counter-home7 .counter-item .count .odometer {
color: var(--oerl-heading);
}
[data-bs-theme="dark"] .box-counter-home7 .counter-item .content p { color: var(--oerl-text); }
/* Hero title/intro sit on a fixed dark image, so they need real white — the
template's `text-white` / white-default token flips to navy in dark mode. */
[data-bs-theme="dark"] .journey_area-seven .section-title h2,
[data-bs-theme="dark"] .journey_area-seven .section-title h2 .tg-element-title,
[data-bs-theme="dark"] .journey_area-seven .section-title p { color: #f3f5fb !important; }
/* --- "Need Help" box (service-institutional-development): dark-mode polish --
Base uses a hard heading-color slab with white text; give it a defined
surface, border and shadow so it stays prominent without a raw black block. */
[data-bs-theme="dark"] .box-text-need-help {
background-color: var(--oerl-surface-2);
border: 1px solid var(--oerl-border-strong);
box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .9);
}
[data-bs-theme="dark"] .box-text-need-help p { color: var(--oerl-text); }
[data-bs-theme="dark"] .box-text-need-help h6 { color: var(--tg-theme-secondary-500); }
/* ==========================================================================
ACCESSIBILITY — non-colour fixes retained from the UI audit.
(Colour / contrast changes were reverted on request; these two are layout
and focus-behaviour only.)
========================================================================== */
/* H7: lift pointer targets to the 44x44 minimum (sizing only). */
.scroll__top { width: 44px; height: 44px; line-height: 44px; }
@media (max-width: 767.98px) {
.scroll__top { width: 44px; height: 44px; line-height: 44px; }
}
.search-close-btn {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* H6: skip-to-content link — visually hidden until it receives keyboard focus.
Styling exists only so this new element renders correctly; it does not alter
any existing UI colour. */
.oerl-skip-link {
position: absolute;
left: 8px;
top: -60px;
z-index: 2001;
padding: 10px 18px;
border-radius: 8px;
background: #0e104b;
color: #ffffff;
font-weight: 700;
font-size: 14px;
text-decoration: none;
transition: top .2s ease;
}
.oerl-skip-link:focus,
.oerl-skip-link:focus-visible {
top: 8px;
color: #ffffff;
outline: 3px solid #ff7d38;
outline-offset: 2px;
}
/* Service card icons -------------------------------------------------------
`.card-icon` used to hold a hand-drawn inline SVG per card, sized by whatever
the illustration happened to be exported at -- 27x35 and 37x35 on Research
Intelligence, 84x85 on Educational Publishing, inside a wrapper that is 58px
tall. The large ones overflowed their own box and sat unevenly against the
heading beneath.
They are Iconify icons now (`streamline-freehand`, the set the Events page
already uses), sized once to the wrapper's own height so every service card
presents the same icon at the same size.
main.css gives `.card-icon i, img, svg` a transition and flips them on hover.
`iconify-icon` is a custom element and matches none of those selectors, so
both rules are restated here -- otherwise replacing the SVG would silently
drop the hover animation the cards were built with. */
.card-icon iconify-icon {
width: 58px;
height: 58px;
font-size: 58px;
color: var(--tg-theme-secondary-500);
transition: 0.3s linear;
}
.card-services-type-01:hover .card-icon iconify-icon {
transform: rotateY(180deg);
}
/* ==========================================================================
PAGER — .oerl-pager
Publications, Media & Insights and Careers share one pagination partial, so
they share one set of rules. This started life as .pub-pagination inside
oerl-publications.css; keeping a copy per page stylesheet would have been
three places for the same pager to drift apart.
Anchors rather than buttons, because a page of results has a URL now. The
:disabled rule is kept for the disabled *state* the partial renders as a
with aria-disabled, and both are styled the same way.
========================================================================== */
.oerl-pager { display:flex; justify-content:center; align-items:center; gap:8px; margin-top:44px; flex-wrap:wrap; }
.oerl-page { min-width:44px; height:44px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center; gap:6px;
font-size:14.5px; font-weight:700; border-radius:12px; border:1px solid var(--oerl-border-soft); background:var(--oerl-surface);
color:var(--tg-heading-color); cursor:pointer; transition:all .2s ease; }
.oerl-page:hover:not(:disabled):not(.active):not([aria-disabled]) { border-color:var(--tg-theme-primary-400); color:var(--tg-theme-primary-500); transform:translateY(-2px); }
.oerl-page:focus-visible { outline:2px solid var(--tg-theme-primary-500); outline-offset:2px; }
.oerl-page.active { background:var(--tg-theme-primary-500); border-color:var(--tg-theme-primary-500); color:#fff;
box-shadow:0 10px 22px -10px rgba(63,163,215,.7); cursor:default; }
.oerl-page:disabled, .oerl-page[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.oerl-page iconify-icon { font-size:18px; }
.oerl-page svg { width:18px; height:18px; }
.oerl-page-nav { font-size:13.5px; }
.oerl-ellipsis { min-width:24px; text-align:center; color:var(--tg-body-color); font-weight:700; }
/* Dark mode: explicit surfaces so page numbers read clearly. */
[data-bs-theme="dark"] .oerl-page { background:var(--oerl-surface-2); border-color:var(--oerl-border-strong); color:var(--oerl-heading); }
[data-bs-theme="dark"] .oerl-page:hover:not(:disabled):not(.active):not([aria-disabled]) { border-color:var(--tg-theme-primary-400); color:var(--tg-theme-primary-400); }
[data-bs-theme="dark"] .oerl-page.active { background:var(--tg-theme-primary-500); border-color:var(--tg-theme-primary-500); color:#fff; }
@media (max-width:575px){ .oerl-page-nav span { display:none; } }
/* ==========================================================================
CONTACT FORM — the parts the design had no markup for.
Two fields were added because `contact.Message` requires them and the static
form left them out: a subject and a service select. The select is styled to
match the inputs beside it rather than left as the browser's default, which
at 50px tall next to a 50px input is the only way it does not look bolted on.
The rest is the validation state the AJAX submission needs somewhere to
render: a field that failed, the message under it, and the "sending" tone
alongside main.css's existing .ajax-response.error / .success.
========================================================================== */
.contact__form-wrap form .form-grp select {
width: 100%;
background: var(--tg-color-white-default);
border: 1px solid var(--tg-color-gray-1);
border-radius: 8px;
padding: 14px 40px 14px 15px;
font-size: 15px;
color: var(--tg-theme-primary-500);
height: 50px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6f8c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 16px;
}
/* Turnstile reserves its own height so the button does not jump down the page
when the widget finishes loading. 65px is the compact widget's own height. */
.contact__form-wrap .cf-turnstile {
margin: 16px 0 4px;
min-height: 65px;
}
/* A field that failed validation, and the reason under it. */
.contact__form-wrap form .form-grp.has-error input,
.contact__form-wrap form .form-grp.has-error select,
.contact__form-wrap form .form-grp.has-error textarea {
border-color: #d64545;
box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.12);
}
.contact__form-wrap form .field-error {
display: block;
margin-top: 6px;
font-size: 13.5px;
color: #d64545;
}
.ajax-response.busy {
margin: 20px 0 0 !important;
color: var(--tg-body-color);
}
/* ==========================================================================
NEWSLETTER — the footer signup, and the two blocks on the insight pages.
The design gave all three a form that posted nowhere, so none of them had
anywhere to put an outcome and none had a Turnstile widget. Both are added
here in a way that costs nothing until it has something to say: the status
line collapses while it is empty, and the widget is out of the flow entirely
unless Cloudflare decides this visitor has to interact with it.
Everything else — the pill input, the pinned button, the gradient band — is
the design's own and untouched.
========================================================================== */
/* Rendered with `appearance: interaction-only`, so in the ordinary case there
is nothing to show and nothing should take up room. `oerl-turnstile.js` adds
`.is-interactive` from Turnstile's own before-interactive callback, for
every protected form on the site — the three newsletter blocks, the job
application and the enquiry blocks all share these rules. */
.nl-turnstile {
display: none;
}
/* The honeypot on the job application. Hidden from sight without being
`display:none` or `visibility:hidden`: some bots skip a field they can see
is unreachable, and the point is that this one looks reachable. Taken out of
the tab order and hidden from assistive technology in the markup, so nobody
filling the form in ever meets it. */
.oerl-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.nl-turnstile.is-interactive {
display: block;
margin: 14px 0 0;
}
/* The two page blocks centre their copy, so the widget goes on the same axis
when it does appear. */
.art-news-inner .nl-turnstile.is-interactive,
.mi-band .nl-turnstile.is-interactive {
display: flex;
justify-content: center;
}
/* `:empty` rather than a hidden attribute: the script writes text into it and
clears it, and one rule beats remembering to toggle a second thing. */
.nl-status:empty {
display: none;
}
.nl-status {
margin: 12px 0 0;
font-size: 13.5px;
font-weight: 600;
line-height: 1.5;
}
/* All three blocks sit on a dark ground — the footer's #0e104b, and the two
gradient bands — so the tones are the light-on-dark pair rather than
main.css's .ajax-response colours, which are for a white form panel. */
.nl-status.busy {
color: rgba(255, 255, 255, 0.78);
}
.nl-status.success {
color: #8fe3b0;
}
.nl-status.error {
color: #ffb3b3;
}
/* The two page blocks centre their own copy; the status belongs on the same
axis. `.art-news-inner p` and `.mi-band p` also set a margin of their own,
which is what these override. */
.art-news-inner .nl-status,
.mi-band .nl-status {
max-width: 520px;
margin: 12px auto 0;
}
.art-news-inner .nl-status {
text-align: center;
}
/* ==========================================================================
PHASE 9 — BUTTON STANDARDISATION
The site had grown two button languages, and they disagreed about every
visible property:
.btn / .btn-two / .btn-secondary the design system's own. 10px radius,
14px uppercase 700, 18px/24px padding, and a hover that expands a
coloured circle from below (`::before`). Used 147 times.
.ev-btn / .ev-btn-primary / -ghost / -blue the events pages'. 40px pill,
15px sentence case, 15px/30px padding, a drop shadow, and a hover that
lifts the button 3px. Used 34 times.
Two shapes, two type scales, two hover animations. On the event detail page
both appear within one viewport of each other.
The brief names `.header-btn` as canonical, which in `main.css` is `.btn`
with `font-size:14px` and no trailing arrow — so `.btn` is the shape
everything converges on, and the block below brings the `.ev-btn` family to
it: same palette, weight, size, radius, padding, transition timing, icon
spacing and hover animation.
**The class names stay.** The brief asks for visual consistency while
maintaining semantic utility classes, and renaming 34 call sites across
eleven templates would be a diff nobody could review against a design that
has not changed. `.ev-btn-primary` still means "the primary action on an
events page"; it now looks like every other primary action on the site.
Also here, for *both* families, the five states the brief requires and
neither had in full: hover, focus-visible, active, disabled and loading.
`.btn` had no focus ring at all — `main.css` explicitly removes the outline
on `.btn:focus` — so a keyboard user could not see where they were.
========================================================================== */
/* --- The .ev-btn family, wearing the design system's shape ---------------- */
.ev-btn {
/* `overflow:hidden` and the stacking context are what make the `::before`
circle-wipe below possible; `.btn` sets both for the same reason. */
position: relative;
z-index: 1;
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 0;
border-radius: 10px;
padding: 18px 24px;
font-size: 14px;
font-weight: 700;
line-height: 1;
letter-spacing: 0;
text-transform: uppercase;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
touch-action: manipulation;
/* The design system's timing, not the events pages' .25s. */
transition: all 0.3s ease-out 0s;
}
/* The circle-wipe, lifted from `.btn::before` so the two animate identically.
Colour is set per variant below: the wipe is always the *other* brand
colour, which is what gives the hover its sense of a deliberate swap. */
.ev-btn::before {
content: "";
position: absolute;
z-index: -1;
top: 110%;
left: 50%;
width: 200%;
height: 200%;
border-radius: 50%;
transform: translateX(-50%);
transition-duration: 800ms;
}
.ev-btn:hover::before,
.ev-btn:focus-visible::before {
top: -35%;
}
/* Icons: one gap for every button on the site. The events pages set 10px and
an 18px box; the design system's own icon sits at 8px. */
.ev-btn i,
.ev-btn iconify-icon,
.ev-btn svg {
width: 18px;
height: 18px;
font-size: 18px;
flex-shrink: 0;
}
/* Primary: orange, wiping to navy. Matches `.btn`. */
.ev-btn-primary {
background: var(--tg-theme-secondary-500);
color: #fff;
/* The drop shadow goes. It was the one property that made these read as a
different component even after the shape matched. */
box-shadow: none;
}
.ev-btn-primary::before { background: var(--tg-theme-primary-500); }
.ev-btn-primary:hover,
.ev-btn-primary:focus-visible {
color: #fff;
background: var(--tg-theme-secondary-500);
/* No translate: the design system's buttons do not move. */
transform: none;
}
/* Blue: navy, wiping to orange. Matches `.btn-two`. */
.ev-btn-blue {
background: var(--tg-theme-primary-500);
color: #fff;
box-shadow: none;
}
.ev-btn-blue::before { background: var(--tg-theme-secondary-500); }
.ev-btn-blue:hover,
.ev-btn-blue:focus-visible {
color: #fff;
background: var(--tg-theme-primary-500);
transform: none;
}
/* Ghost: an outline on a dark hero, filling to white. The one variant with no
design-system counterpart, so it keeps its own colours and takes only the
shape and the timing. */
.ev-btn-ghost {
background: transparent;
color: #fff;
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.4);
}
.ev-btn-ghost::before { background: #fff; }
.ev-btn-ghost:hover,
.ev-btn-ghost:focus-visible {
color: #0a1830;
transform: none;
}
/* --- The five states, for both families ---------------------------------- */
/* Focus. `main.css` sets `.btn:focus { outline:none }` with no replacement, so
until now a keyboard user tabbing through the site could not see where they
were — a WCAG 2.4.7 failure on every button on every page. A two-colour ring
(dark core, light halo) so it is visible on an orange button, a navy one and
a white card alike. */
.btn:focus-visible,
.ev-btn:focus-visible,
.btn-two:focus-visible,
.header-btn .btn:focus-visible {
outline: 3px solid var(--tg-theme-primary-500);
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85);
}
[data-bs-theme="dark"] .btn:focus-visible,
[data-bs-theme="dark"] .ev-btn:focus-visible,
[data-bs-theme="dark"] .btn-two:focus-visible {
outline-color: var(--tg-theme-secondary-500);
box-shadow: 0 0 0 6px rgba(10, 24, 48, 0.85);
}
/* On a dark hero the ring's halo has to be the light one. */
.ev-hero .ev-btn:focus-visible,
.ev-btn-ghost:focus-visible {
outline-color: #fff;
box-shadow: 0 0 0 6px rgba(10, 24, 48, 0.55);
}
/* Active. A press should register; 1px is enough to feel and small enough not
to reflow anything beside it. */
.btn:active:not(:disabled):not([aria-disabled="true"]),
.ev-btn:active:not(:disabled):not([aria-disabled="true"]),
.btn-two:active:not(:disabled):not([aria-disabled="true"]) {
transform: translateY(1px);
}
/* Disabled. Covers `[disabled]` on a real button, `[aria-disabled]` on a link
pretending to be one, and `.is-disabled` for markup that can do neither.
`pointer-events:none` is deliberately *not* used on the aria case: a
disabled control that cannot be focused is a control a screen-reader user
cannot discover the existence of. */
.btn:disabled,
.ev-btn:disabled,
.btn[aria-disabled="true"],
.ev-btn[aria-disabled="true"],
.btn.is-disabled,
.ev-btn.is-disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn:disabled::before,
.ev-btn:disabled::before,
.btn[aria-disabled="true"]::before,
.ev-btn[aria-disabled="true"]::before {
/* No hover wipe on something that cannot be pressed. */
top: 110%;
}
/* Loading. `.ev-submit` already has a bespoke spinner for the two long forms;
this is the general case, for any button a script marks busy. The label is
kept in the layout rather than hidden, so the button does not change width
mid-request and shift everything beside it. */
.btn.is-loading,
.ev-btn.is-loading,
.btn[aria-busy="true"],
.ev-btn[aria-busy="true"] {
cursor: progress;
pointer-events: none;
}
.btn.is-loading::after,
.ev-btn.is-loading::after,
.btn[aria-busy="true"]::after,
.ev-btn[aria-busy="true"]::after {
content: "";
display: inline-block;
width: 15px;
height: 15px;
margin-inline-start: 8px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: oerl-btn-spin 0.7s linear infinite;
}
/* `.ev-submit` supplies its own centred spinner and hides its label, so it
must not also grow a second one on the end. */
.ev-submit.is-loading::after {
content: none;
}
@keyframes oerl-btn-spin {
to { transform: rotate(360deg); }
}
/* Somebody who has asked for less motion gets a static ring rather than no
feedback at all. */
@media (prefers-reduced-motion: reduce) {
.btn.is-loading::after,
.ev-btn.is-loading::after,
.btn[aria-busy="true"]::after,
.ev-btn[aria-busy="true"]::after {
animation: none;
border-top-color: currentColor;
opacity: 0.6;
}
.btn::before,
.ev-btn::before {
transition-duration: 0ms;
}
}
/* --- Dark mode ------------------------------------------------------------
`--tg-color-white-default` is remapped to navy in dark mode, which is what
made the header CTA's label invisible (see the phase 3.1 block above). Both
families' filled variants sit on a brand colour in either theme, so their
label is pinned to a literal white for the same reason. */
[data-bs-theme="dark"] .ev-btn-primary,
[data-bs-theme="dark"] .ev-btn-primary:hover,
[data-bs-theme="dark"] .ev-btn-blue,
[data-bs-theme="dark"] .ev-btn-blue:hover,
[data-bs-theme="dark"] .btn,
[data-bs-theme="dark"] .btn:hover,
[data-bs-theme="dark"] .btn-two,
[data-bs-theme="dark"] .btn-two:hover {
color: #fff;
}
/* `.btn-secondary` is the one filled variant that is *not* on a brand colour:
it is a pale lilac with navy text, which inverts badly. Given the same
treatment it has in light mode, at a surface tone that belongs in dark. */
[data-bs-theme="dark"] .btn.btn-secondary {
background: var(--oerl-surface-2);
color: var(--oerl-text, #e6ebf5);
box-shadow: inset 0 0 0 1px var(--oerl-border-soft);
}
[data-bs-theme="dark"] .btn.btn-secondary:hover {
color: #fff;
}
[data-bs-theme="dark"] .ev-btn-ghost {
box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.28);
}
/* --- The events submit button, reconciled --------------------------------
`.ev-submit` keeps its full-width shape, its sweep and its spinner — it is a
distinct thing, the single submit at the foot of a long form — but it now
sits on the same radius and type scale as everything else, and its own
`:hover` lift is dropped so it agrees with the family it belongs to. */
.ev-submit {
border-radius: 10px;
font-size: 14px;
padding: 18px 24px;
}
.ev-submit:hover:not(:disabled) {
transform: none;
box-shadow: none;
}
.ev-submit:active:not(:disabled) {
transform: translateY(1px);
}
@media (max-width: 575px) {
.ev-submit { padding: 16px 20px; font-size: 14px; }
}
/* ==========================================================================
PHASE 9 — HEADER, 1205–1399 BAND
Measured, not guessed. On any page other than the homepage the header
renders a "Let's Talk" CTA that the homepage omits, and with it the row
needs:
logo 101 + nav 742 + actions 338 = 1181px
At a 1205px viewport the container offers 1175px. Six pixels short — so the
nav list and the action block are laid over each other, which is the overlap
the brief reports. It clears at about 1213px and then stays uncomfortably
thin: 69px of slack at 1280, which one longer navigation label or one extra
menu item would spend.
The band below 1205 is already handled: the 992–1204.98 rule further up
tightens spacing and hides the CTA outright. What was missing is the band
immediately above it, where the CTA comes back at full size and nothing else
gives way. This is that rule, and it does the same kind of tightening the
lower band does — nav spacing, type scale, action gaps — so the header has
real headroom through the whole range instead of six pixels of luck.
Two structural guards go with it, and they are what stops this recurring:
* `flex-wrap: nowrap` on the row. The row was `wrap`, so overflow was
*supposed* to push the action block onto a second line; what it actually
did at these widths was overlap, because the nav list has no `min-width`
to shrink from.
* `min-width: 0` on the nav list, which is what lets a flex child shrink
below its content width at all. Without it a flex item's floor is its
content, and "shrink" is not an option the browser has.
Together they mean the failure mode at any width, for any future menu, is
the nav tightening — not two blocks drawn on top of each other.
========================================================================== */
@media (min-width: 1205px) and (max-width: 1399.98px) {
.tg-header__area .tgmenu__nav {
flex-wrap: nowrap;
}
/* The two flex children that must be allowed to give. */
.tg-header__area .tgmenu__navbar-wrap {
min-width: 0;
}
.tg-header__area .tgmenu__action {
flex-shrink: 0;
}
/* 30px between navigation items is the desktop rhythm and costs 210px
across seven of them. 16px reads the same at this width and returns 98px
— sixteen times the deficit, which is the point: the fix should not need
to be re-measured the next time a menu item is added. */
.tg-header__area .tgmenu__navbar-wrap > ul > li {
margin-right: 16px;
}
.tg-header__area .tgmenu__navbar-wrap > ul > li:last-child {
margin-right: 0;
}
.tg-header__area .tgmenu__navbar-wrap > ul > li > a {
font-size: 15px;
}
/* The action block: the same tightening the 992–1204 band applies, so the
two read as one continuous response rather than two unrelated rules. */
.tg-header__area .tgmenu__action ul li {
margin-left: 14px;
}
.tg-header__area .tgmenu__action ul .header-btn .btn {
padding: 14px 20px;
}
/* The logo is the one element that can give room back without touching
anything the reader interacts with. */
.tg-header__area .tgmenu__nav .logo .oerl-logo,
.tg-header__area .tgmenu__nav .logo img {
max-height: 64px;
}
/* A submenu opening near the right edge would otherwise run off it, now
that its parent sits closer to the action block. */
.tg-header__area .tgmenu__navbar-wrap > ul > li:nth-last-child(-n + 2) .sub-menu {
left: auto;
right: 0;
}
}
/* ==========================================================================
PHASE 9 — CMS RICH TEXT ON THE PUBLIC SITE
The counterpart to `dashboard/css/editor-content.css`. That file makes the
editor render what the writer chose; this makes the published page render
the same thing, so "Quote" in the toolbar and a quotation on the article
page are the same object seen twice.
Headings and lists already work here — `main.css` styles `h1`–`h6` globally
and `oerl-base.css` leaves list markers alone — so what is missing is
everything else the publishing toolbar can produce. Measured on a live
article page: a `` in an article body computed to 16px, weight
400, no border. Indistinguishable from the paragraph above it.
Applied to the containers that render CMS HTML, named individually rather
than globally: these rules must reach editor output and nothing else, and a
bare `blockquote` selector would also catch the founder pull-quote and the
testimonial slider, both of which are designed components with their own
type.
========================================================================== */
.art-content blockquote,
.ev-prose blockquote,
.job-block blockquote,
.accordion-body blockquote,
.oerl-faq__a-in blockquote {
margin: 28px 0;
padding: 4px 0 4px 20px;
border-left: 4px solid var(--tg-theme-primary-500);
color: var(--tg-body-color, inherit);
font-size: 1.0625em;
font-style: italic;
opacity: 0.92;
}
.art-content blockquote p,
.ev-prose blockquote p,
.job-block blockquote p {
margin: 8px 0;
}
.art-content pre,
.ev-prose pre,
.job-block pre {
margin: 24px 0;
padding: 16px 18px;
border-radius: 10px;
background: var(--oerl-surface-2);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.9375rem;
line-height: 1.6;
white-space: pre-wrap;
overflow-x: auto;
}
.art-content code,
.ev-prose code,
.job-block code {
padding: 2px 6px;
border-radius: 4px;
background: var(--oerl-surface-2);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.9em;
}
.art-content pre code,
.ev-prose pre code,
.job-block pre code {
padding: 0;
background: none;
font-size: inherit;
}
.art-content hr,
.ev-prose hr,
.job-block hr {
margin: 32px 0;
border: 0;
border-top: 1px solid var(--oerl-border-soft);
}
/* Jodit's table control is on the publishing toolbar, so an article can
contain one. Unstyled, it arrives as borderless text in columns. */
.art-content table,
.ev-prose table,
.job-block table {
width: 100%;
margin: 26px 0;
border-collapse: collapse;
font-size: 0.9375rem;
}
.art-content th, .art-content td,
.ev-prose th, .ev-prose td,
.job-block th, .job-block td {
padding: 10px 12px;
border: 1px solid var(--oerl-border-soft);
text-align: left;
vertical-align: top;
}
.art-content th,
.ev-prose th,
.job-block th {
background: var(--oerl-surface-2);
font-weight: 600;
}
/* A table is the one block that cannot be made to fit a phone by reflowing it,
so it scrolls inside its own box rather than widening the page. */
@media (max-width: 575.98px) {
.art-content table,
.ev-prose table,
.job-block table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
/* An image dropped into an article is stored at full width by the media
endpoint; the column it lands in is narrower than that on every viewport. */
.art-content img,
.ev-prose img,
.job-block img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
/* --------------------------------------------------------------------------
FOOTER SITEMAP LINK
Beside the copyright notice, on every page.
Its own colour rather than the copyright text's `#5f6196`, which measures
3.04:1 against the footer's `#0e104b` — under the 4.5:1 WCAG AA needs for
normal text, and 14px bold is normal text, not large. That is inherited
from the design and is left alone for the static notice, but this is a
control somebody has to find and click, so it takes `--tg-color-gray-2`
from the same palette: 9.2:1, and already the footer's own colour for the
social icons rather than a new one invented here.
The hover comes from `.copyright-text-two p a:hover` in `main.css`, which
is why this sets colour and nothing else — an inline style would have
outranked it and left the link with no hover at all.
-------------------------------------------------------------------------- */
.copyright-text-two .footer-sitemap {
color: var(--tg-color-gray-2);
}
.copyright-text-two .footer-sitemap-sep {
margin: 0 9px;
color: #3d3f7a;
}
/* --------------------------------------------------------------------------
Nothing from an editor may widen its column.
`apps.common.sanitize.normalize_nbsp` fixes the cause of the overflow that
prompted this — a pasted body whose every space was non-breaking, laying out
2631px wide inside a 360px column — and `manage.py normalize_richtext` fixed
the bodies already stored. This is the floor underneath both.
The sanitiser can only judge what looks like a paste artefact. It cannot
help a single 90-character URL, a DOI, a file path or a German compound
noun, none of which contain a break opportunity at all. `overflow-wrap`
breaks a word only when it would otherwise overflow, so ordinary prose is
unaffected: it costs nothing on text that already fits and is the difference
between a readable page and an unreadable one on text that does not.
`min-width: 0` on the containers themselves because these sit in flex
columns, whose items default to `min-width: auto` — wide content there
stretches the *column*, and no amount of wrapping inside a box that has
already been widened will bring it back.
-------------------------------------------------------------------------- */
.art-content,
.ev-prose,
.job-block,
.accordion-body,
.oerl-faq__a-in {
min-width: 0;
overflow-wrap: break-word;
}
.art-content *,
.ev-prose *,
.job-block *,
.accordion-body *,
.oerl-faq__a-in * {
max-width: 100%;
}
/* `` opts out of the break: code is read by its line structure and
breaking it mid-token changes what it says. It scrolls instead, which the
rule above already gives it. */
.art-content pre,
.ev-prose pre,
.job-block pre {
overflow-wrap: normal;
}
/* --------------------------------------------------------------------------
THE STRUCTURE A WRITER TYPED
A posting or an event description is written in the editor as a whole
document — its own headings, its own lists — and dropped into a page that
already has headings of its own. `.ev-prose` is the boundary between the
two, and the job page now uses it exactly as the event page always has.
The wrapper is what made this possible. `.job-block h2` is the page's
*section* heading: 24px, `display:flex`, an 11px gap for the icon the
template puts beside it. An `` the writer typed used to be a direct
child of the same element and could not be told apart from it, so "About
the Role" arrived at the weight of "Role Overview" and reserved a gap for an
icon that was not there. Editor headings now sit one level down.
Everything below `h2` had no rule at all in either container — `.ev-prose p`
was the whole of it — so `h3`–`h6` fell through to the global sheet and
lists lost their markers to Tailwind's preflight. A responsibilities list
rendered as unmarked, unindented paragraphs, which is not a list.
`:where()` throughout, so every rule here sits at zero specificity: the
designed components inside these containers keep whatever the component
sheet gives them, and this is only the floor under editor output.
-------------------------------------------------------------------------- */
.ev-prose :where(h1) {
font-size: 24px;
font-weight: 800;
line-height: 1.3;
color: var(--tg-heading-color);
margin: 32px 0 14px;
}
.ev-prose :where(h2) {
font-size: 20px;
font-weight: 700;
line-height: 1.35;
color: var(--tg-heading-color);
margin: 30px 0 12px;
}
.ev-prose :where(h3) {
font-size: 17.5px;
font-weight: 700;
line-height: 1.4;
color: var(--tg-heading-color);
margin: 26px 0 10px;
}
.ev-prose :where(h4, h5, h6) {
font-size: 16px;
font-weight: 700;
line-height: 1.45;
color: var(--tg-heading-color);
margin: 22px 0 8px;
}
/* The writer's first heading should not push away from the section title
immediately above it. */
.ev-prose > :where(h1, h2, h3, h4, h5, h6):first-child {
margin-top: 0;
}
.ev-prose :where(p) {
font-size: 16px;
line-height: 1.8;
color: var(--tg-body-color);
margin: 0 0 14px;
}
/* Markers restored explicitly: Tailwind's preflight removes them, so an
editor's bulleted list arrives as unindented paragraphs and the reader
cannot tell where one responsibility ends and the next begins. */
.ev-prose :where(ul, ol) {
margin: 0 0 16px;
padding-left: 22px;
list-style-position: outside;
}
.ev-prose :where(ul) { list-style-type: disc; }
.ev-prose :where(ol) { list-style-type: decimal; }
.ev-prose :where(ul, ol) :where(ul, ol) {
margin: 6px 0;
}
.ev-prose :where(li) {
font-size: 16px;
line-height: 1.75;
color: var(--tg-body-color);
margin-bottom: 7px;
}
.ev-prose :where(li)::marker {
color: var(--tg-theme-secondary-500);
}
.ev-prose :where(a) {
color: var(--tg-theme-primary-500);
text-decoration: underline;
text-underline-offset: 2px;
}
.ev-prose :where(strong, b) {
font-weight: 700;
color: var(--tg-heading-color);
}
.ev-prose > :where(:last-child) {
margin-bottom: 0;
}
[data-bs-theme="dark"] .ev-prose :where(p, li) {
color: var(--oerl-text);
}