. The underneath is
left at the section theme's paragraph colour, which in this palette is
PURPLE (--black-hsl is #7300FA, not black).
So anything we generate — timeline entries, forms, the 404 — falls through
to purple and looks wrong beside the captured text, which renders ink.
Rather than sprinkle colour spans through generated markup, set it once
here. Dates and headings keep the theme colour, which is correct.
-------------------------------------------------------------------------- */
.ping-tl-extra p,
.ping-tl-extra li,
.ping-form label,
.ping-form .form-fallback,
.contact-form label,
.contact-form .form-fallback,
.ping-testimonial p{
color:var(--ink);
}
/* on dark sections the same content must invert */
[data-section-theme="dark"] .ping-tl-extra p,
[data-section-theme="dark-bold"] .ping-tl-extra p,
[data-section-theme="black"] .ping-tl-extra p,
[data-section-theme="dark"] .ping-form label,
[data-section-theme="dark-bold"] .ping-form label,
[data-section-theme="black"] .ping-form label{
color:#fff;
}
/* --- news card hover ------------------------------------------------------
A deliberate design addition, not in the original. The brand is flat, bold
and geometric, so the card uses a hard offset block rather than a soft
shadow, and colour switches rather than fades.
The whole card is clickable via a stretched link on the title, which keeps
one meaningful link per card for screen readers and keyboard users. The
same treatment applies on :focus-within so keyboard users see it too.
-------------------------------------------------------------------------- */
.blog-side-by-side .blog-item{
position:relative;
background:transparent;
padding:1.25rem;
margin-left:-1.25rem; margin-right:-1.25rem;
transition:transform .18s cubic-bezier(.2,.8,.2,1),
background-color .18s ease,
box-shadow .18s cubic-bezier(.2,.8,.2,1);
}
/* stretched link: the title anchor covers the card */
.blog-side-by-side .blog-title a::after{
content:""; position:absolute; inset:0; z-index:3;
}
.blog-side-by-side .blog-item:hover,
.blog-side-by-side .blog-item:focus-within{
background:#fff;
transform:translate(-6px,-6px);
box-shadow:14px 14px 0 0 var(--mint);
}
/* image sits in a square frame and pushes in on hover */
.blog-side-by-side .blog-image-wrapper .image-wrapper{overflow:hidden}
.blog-side-by-side .blog-image-wrapper .image-wrapper img{
transition:transform .35s cubic-bezier(.2,.8,.2,1);
}
.blog-side-by-side .blog-item:hover .image-wrapper img,
.blog-side-by-side .blog-item:focus-within .image-wrapper img{
transform:scale(1.06);
}
/* title switches to purple, no fade */
.blog-side-by-side .blog-title a{
transition:color .12s linear;
text-decoration:none;
}
.blog-side-by-side .blog-item:hover .blog-title a,
.blog-side-by-side .blog-item:focus-within .blog-title a{
color:var(--purple);
}
/* Read More becomes a solid block with a nudging arrow */
.blog-side-by-side .blog-more-link{
position:relative; z-index:4;
display:inline-flex; align-items:center; gap:.5em;
font-family:var(--font-display);
font-style:italic; font-weight:500; text-transform:uppercase;
font-size:.78rem; letter-spacing:.06em; text-decoration:none;
color:var(--ink); background:transparent;
padding:.62em 1em;
box-shadow:inset 0 0 0 2px var(--ink);
transition:background-color .14s linear, color .14s linear,
box-shadow .14s linear, transform .18s cubic-bezier(.2,.8,.2,1);
}
.blog-side-by-side .blog-more-link::after{
content:"\2192";
transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.blog-side-by-side .blog-item:hover .blog-more-link,
.blog-side-by-side .blog-item:focus-within .blog-more-link{
background:var(--ink); color:#fff; box-shadow:inset 0 0 0 2px var(--ink);
}
.blog-side-by-side .blog-item:hover .blog-more-link::after,
.blog-side-by-side .blog-item:focus-within .blog-more-link::after{
transform:translateX(5px);
}
.blog-side-by-side .blog-more-link:focus-visible{
outline:2px solid var(--purple); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
.blog-side-by-side .blog-item,
.blog-side-by-side .blog-item:hover,
.blog-side-by-side .blog-item:focus-within{transform:none; transition:none}
.blog-side-by-side .blog-image-wrapper .image-wrapper img,
.blog-side-by-side .blog-more-link::after{transition:none; transform:none!important}
}
@media (max-width:767px){
.blog-side-by-side .blog-item:hover,
.blog-side-by-side .blog-item:focus-within{
transform:none; box-shadow:8px 8px 0 0 var(--mint);
}
}
/* --- history timeline: mobile ---------------------------------------------
Measured against the original at 375px: the spine sits at the LEFT edge
(x=23), entries start at x=64 and their text is left-aligned. Ours kept the
desktop centre spine (x=187), so the line ran straight through the text,
and the appended entries had no gutter at all (x=0, full bleed).
-------------------------------------------------------------------------- */
@media (max-width:767px){
.ping-spine-track{left:23px; margin-left:0}
.ping-spine-dot{left:23px}
/* the captured entries carry inline text-align:right for the desktop
two-column layout; the original switches them to left on mobile */
.ping-timeline .fe-block.ping-tl-entry :is(h1,h2,h3,h4,p,ul,ol){
text-align:left !important;
}
/* On mobile the captured entries stop stacking with any trailing space, so
the first appended date collided with the last captured paragraph (a 0px
seam). Carry the same 3.5rem the appended entries use between themselves.
Desktop needs nothing: the captured blocks alternate sides there and
already leave 28px. */
.ping-tl-extra{margin-top:3.5rem}
/* appended entries: clear the spine and pick up the page gutter */
.ping-tl-extra li{
padding-left:64px;
padding-right:var(--site-gutter);
}
.ping-tl-extra .ping-tl-left > div,
.ping-tl-extra .ping-tl-right > div{text-align:left}
}
/* --- cookie consent --------------------------------------------------------
Google Analytics loads with Consent Mode denied by default, so this banner
is what actually turns it on. It sits at the bottom, does not trap the page
behind an overlay (nothing here is worth blocking the news for), and the
choice is remembered in localStorage.
-------------------------------------------------------------------------- */
.cookie-banner{
position:fixed;left:0;right:0;bottom:0;z-index:9000;
background:var(--ink,#1E1E1E);color:#fff;
padding:1rem var(--site-gutter,1.25rem);
box-shadow:0 -2px 14px rgba(0,0,0,.18);
}
.cookie-banner[hidden]{display:none}
.cookie-banner__inner{
max-width:1100px;margin:0 auto;
display:flex;gap:1.25rem;align-items:center;justify-content:space-between;
flex-wrap:wrap;
}
.cookie-banner__text{
margin:0;font-size:.9rem;line-height:1.5;max-width:64ch;
}
.cookie-banner__text strong{display:block;font-family:var(--font-display);
font-size:1rem;letter-spacing:.02em;margin-bottom:.2rem}
.cookie-banner__text a{color:var(--mint,#00FFBE);text-decoration:underline}
.cookie-banner__actions{display:flex;gap:.6rem;flex-shrink:0}
.cookie-btn{
font-family:var(--font-display);font-weight:600;font-size:.85rem;
letter-spacing:.04em;text-transform:uppercase;
padding:.65rem 1.4rem;border:2px solid transparent;cursor:pointer;
}
.cookie-btn--accept{background:var(--mint,#00FFBE);color:var(--ink,#1E1E1E)}
.cookie-btn--reject{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.cookie-btn:focus-visible{outline:2px solid var(--mint,#00FFBE);outline-offset:3px}
/* the way back in, for anyone who changes their mind */
.cookie-settings-line{margin:0;padding:0 var(--site-gutter,1.25rem) 1.25rem;text-align:center}
.cookie-settings-link{
background:none;border:0;padding:.25rem;cursor:pointer;
font-size:.78rem;color:inherit;opacity:.6;text-decoration:underline;
}
.cookie-settings-link:hover{opacity:1}
@media (max-width:600px){
.cookie-banner__inner{flex-direction:column;align-items:flex-start}
.cookie-banner__actions{width:100%}
.cookie-btn{flex:1}
}