/* ==========================================================================
mRNA Timeline ([mrna_timeline] shortcode / CPT)
All styling for the timeline lives here in the plugin so the feature is
self-contained (previously split into the child theme's style.css).
========================================================================== */
/* Type colours */
:root {
--mrna-tl-general: #7ac943; /* green */
--mrna-tl-milestone: #1dc3c2; /* teal */
--mrna-tl-navy: #13335b;
--mrna-tl-line: #cdd7e0; /* light grey vertical line */
/* Sticky decade bar parks flush under the WP admin bar + site header.
JS measures the real stacked height and overwrites this per timeline. */
--mrna-tl-header-offset: 32px;
}
div.mrna-timeline {
font-family: Inter, sans-serif;
/* Match the Timeline headline column (.site-main is 1140px). The wrapping
Gutenberg group otherwise caps children at 1100px, leaving the bar
inset from the heading. */
width: 100%;
max-width: 1140px;
}
/* Legend */
.mrna-timeline__legend { display:flex; gap:32px; flex-wrap:wrap; margin:0 0 24px; font-size:14px; color:#333; }
.mrna-timeline__legend span { display:inline-flex; align-items:center; gap:10px; }
.mrna-timeline__dot-legend { width:16px; height:16px; border-radius:50%; display:inline-block; }
.mrna-timeline__dot-legend--general { background:var(--mrna-tl-general); }
.mrna-timeline__dot-legend--milestone { background:var(--mrna-tl-milestone); }
/* Decade selector: buttons always stay in the content column. The bar
background is container-width until sticky, then a ::before expands it
to the viewport edges. */
.mrna-timeline__selector {
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: space-between;
gap: 0;
position: sticky;
top: var(--mrna-tl-header-offset);
z-index: 998; /* below the sticky site header; below #wpadminbar (99999) */
isolation: isolate;
box-sizing: border-box;
width: 100%;
margin-bottom: 24px;
background: transparent;
overflow: visible;
}
.mrna-timeline__selector::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #DDEDFF;
border-radius: 4px;
z-index: -1;
pointer-events: none;
transition: left 0.25s ease, right 0.25s ease, border-radius 0.25s ease, box-shadow 0.2s ease;
}
/* Mobile dropdown is hidden on desktop (the buttons are used instead). */
.mrna-timeline__decade-select { display:none; }
/* position:sticky is clipped if ANY ancestor has overflow other than visible.
Elementor commonly sets overflow:hidden on its containers/columns, which
silently breaks the sticky decade bar. Force the timeline's Elementor
ancestors back to visible so sticky works. */
.elementor-widget-container:has(> .mrna-timeline),
.elementor-widget:has(.mrna-timeline),
.elementor-element:has(.mrna-timeline),
.e-con:has(.mrna-timeline),
.e-con-inner:has(.mrna-timeline) {
overflow:visible !important;
}
.mrna-timeline__selector.is-stuck::before {
left: calc(50% - 50vw);
right: calc(50% - 50vw);
border-radius: 0;
box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.mrna-timeline__decade-btn { border:none; background:transparent; padding:8px 18px; font-family:Inter,sans-serif; font-weight:700; font-size:17px; color:var(--mrna-tl-navy); cursor:pointer; border-radius:6px; transition:background 0.15s ease, color 0.15s ease; }
/* Explicit hover bg (transparent) prevents inherited theme/Elementor button
hover colours (e.g. a pink fill) from bleeding through; just the text greens. */
.mrna-timeline__decade-btn:hover,
.mrna-timeline__decade-btn:focus {
background:transparent !important;
color:#7ac943 !important;
}
/* Active decade: rounded black pill, inset from the bar edges (matches design). */
.mrna-timeline__decade-btn.is-active { background:#000 !important; color:#79C944 !important; }
.mrna-timeline__decade-btn.is-active:hover,
.mrna-timeline__decade-btn.is-active:focus { background:#000 !important; color:#79C944 !important; }
/* ---- Track + right-hand vertical line ---- */
.mrna-timeline__track { position:relative; }
/*
* Continuous SMOOTH sine wave running down the RIGHT side of the content column,
* evoking a flowing DNA strand. The strand is an inline SVG built by
* timeline-wave.js. The mask fades the strand out at the very bottom and hides
* the sliver above the first dot.
*/
.mrna-timeline__line {
position:absolute;
top:0;
bottom:0;
right:4px; /* centre of the 180px-wide wave sits at right:94px */
width:180px;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 74px, #000 calc(100% - 130px), transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 74px, #000 calc(100% - 130px), transparent 100%);
}
/* Inline SVG strand (sized/drawn by timeline-wave.js). */
.mrna-timeline__wave-svg {
position:absolute;
inset:0;
width:100%;
height:100%;
display:block;
overflow:visible;
}
/* The path's stroke-dasharray/offset are set inline by JS to draw it in on
scroll. A short transition smooths the per-frame updates. */
.mrna-timeline__wave-path {
transition:stroke-dashoffset 0.08s linear;
}
/* Decade grouping for the show_all scroll view */
.mrna-timeline__decade-section { position:relative; }
/* Decade toggle groups (non-all mode) */
.mrna-timeline__group { display:none; position:relative; }
.mrna-timeline__group.is-active { display:block; }
/* ---- Year group ----
Single content column with a fixed left GUTTER (178px) reserved for the media
badges. The year header and all entry text align to the right of the gutter;
each entry's media badge is positioned into the gutter and vertically centred
against ITS OWN entry (not the whole year group). */
.mrna-timeline__yeargroup {
position:relative;
/* left = media gutter (150px badge + 28px gap); right = room for the wave */
padding:0 176px 16px 178px;
}
.mrna-timeline__content { min-width:0; }
.mrna-timeline__entry {
position:relative;
margin-bottom:12px;
}
.mrna-timeline__entry:last-child { margin-bottom:0; }
/* The body (title + desc) is the FULL TEXT BLOCK and the positioning context for
its badge. Text stays TOP-aligned so the title sits directly under the year
(no gap); the badge is centred against this block's real height below. */
.mrna-timeline__entry-body {
position:relative;
min-width:0;
}
/* Reserve a lane at least the badge's height on the ENTRY (not the body) so two
consecutive badges keep clear space, WITHOUT pushing the text down — the body
keeps its natural height and stays top-aligned, and the badge centres against
that real text height. */
.mrna-timeline__entry--has-media:has(img.mrna-timeline__img) { min-height:110px; }
.mrna-timeline__entry--has-media:has(.mrna-timeline__img--svg) { min-height:90px; }
.mrna-timeline__entry--has-media:has(.mrna-timeline__icon) { min-height:64px; }
/* The badge is absolutely positioned in the left gutter and vertically CENTRED
against the BODY (the text block) — so it lines up with the text and, on a
short first entry, simply extends upward toward the year rather than sitting
low or pushing the title down. */
.mrna-timeline__entry-media {
position:absolute;
right:100%; /* to the left of the text */
margin-right:28px; /* gap between badge and text */
top:50%;
transform:translateY(-50%); /* centre against the text block */
width:150px;
display:flex; align-items:center; justify-content:center;
}
/* Photos only: circular badge with green ring + white gap. Scoped to actual
elements so inline animated SVG icons (.mrna-timeline__img--svg) are
left unstyled. */
img.mrna-timeline__img {
box-sizing:border-box;
/* Lock to a square so global `img { width:100% }` rules can't stretch it into
an oval. !important + min/max + flex:none defend against theme/Elementor CSS. */
width:110px !important; height:110px !important;
min-width:110px; max-width:110px; min-height:110px; max-height:110px;
flex:0 0 auto;
aspect-ratio:1 / 1;
border-radius:50%; object-fit:cover; display:block;
border:2px solid var(--mrna-tl-general); /* ring colour follows the group type */
padding:5px; /* white gap */
background:#fff;
background-clip:content-box;
}
/* Milestone (teal) groups: the photo ring matches the teal dot/year. */
.mrna-timeline__yeargroup--milestone img.mrna-timeline__img {
border-color:var(--mrna-tl-milestone);
}
/* Inline animated SVG icons: a fixed circular badge, smaller than the photos.
The SVG already contains its own coloured circle, so no ring/padding here —
just a consistent size so icons line up with the photos in the media column.
overflow:visible lets the SVG's own animations (which extend past the circle)
play without being clipped. */
.mrna-timeline__img--svg {
display:inline-flex; align-items:center; justify-content:center;
flex:0 0 auto;
box-sizing:border-box;
width:90px; height:90px;
overflow:visible;
}
.mrna-timeline__img--svg svg {
display:block;
width:100%; height:100%;
overflow:visible;
}
.mrna-timeline__icon {
width:64px; height:64px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
background:var(--mrna-tl-general);
}
.mrna-timeline__icon--milestone { background:var(--mrna-tl-milestone); }
.mrna-timeline__icon img { width:60%; height:60%; object-fit:contain; filter:brightness(0) invert(1); }
/* Content column */
.mrna-timeline__year {
display:inline-flex; align-items:center; gap:8px;
font-weight:700; font-size:18px; line-height:1;
margin-bottom:8px;
color:var(--mrna-tl-general);
}
.mrna-timeline__yeargroup--milestone .mrna-timeline__year { color:var(--mrna-tl-milestone); }
/* Diamond marker: sits to the RIGHT of the year and marks the start of the
horizontal connector line that runs across to the dot on the wave.
`order:1` forces it after the year text regardless of source markup order. */
.mrna-timeline__marker {
order:1;
width:8px; height:8px;
background:currentColor; display:inline-block;
position:relative; z-index:3;
/* Milestone reveal: the diamond pops in at the YEAR end of the connector,
after the line has drawn out to it. Keep the 45deg rotation while scaling
from 0 to full. */
transform:rotate(45deg) scale(0);
transform-origin:center center;
transition:transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) 0.42s;
}
.mrna-timeline__yeargroup.is-revealed .mrna-timeline__marker {
transform:rotate(45deg) scale(1);
}
.mrna-timeline__entry-title { font-family:Inter,sans-serif; font-weight:700; font-size:18px; color:var(--mrna-tl-navy); margin:0 0 6px; }
.mrna-timeline__entry-desc p { font-size:15px; line-height:22px; color:#555; margin:0; }
/* Connector: single continuous horizontal line running from the diamond (just
right of the year) across to the dot on the wave. It starts near the year and
spans to the wave centreline so the diamond and the dot are visually joined. */
.mrna-timeline__connector {
position:absolute;
top:10px; /* centre of the 2px line aligns with the diamond centre */
/* start right at the diamond that follows a 4-digit year:
120px media + 28px gap = 148px content start, plus ~50px for a
4-digit year, so the line emerges from under the diamond. */
left:198px;
right:94px; /* meets the wave centreline */
height:2px;
background:currentColor;
color:var(--mrna-tl-general);
z-index:2; /* above the white eraser so the line stays visible */
/* Milestone reveal: the connector draws OUT from the wave (right) toward the
year (left). Hidden until the strand's drawn tip reaches this dot. */
transform:scaleX(0);
transform-origin:right center;
transition:transform 0.35s ease 0.12s; /* slight delay: colour reveals first */
}
.mrna-timeline__yeargroup--milestone .mrna-timeline__connector { color:var(--mrna-tl-milestone); }
.mrna-timeline__yeargroup.is-revealed .mrna-timeline__connector { transform:scaleX(1); }
/* Dot sitting on the wave centreline, aligned with the year row */
.mrna-timeline__dot {
position:absolute;
top:-3px; /* centres the 27px dot on the connector line (centre at 11px) */
right:83px; /* right is overwritten by JS to seat the dot on the wave */
width:27px; height:27px; border-radius:50%; /* match the 27px wave stroke */
background:var(--mrna-tl-general);
z-index:3; /* coloured dot on top of everything */
/* Milestone reveal: the coloured dot appears when the strand tip arrives,
then the connector draws out. Hidden (scaled to 0) until revealed. */
transform:scale(0);
transform-origin:center center;
transition:transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* subtle pop */
}
.mrna-timeline__yeargroup--milestone .mrna-timeline__dot { background:var(--mrna-tl-milestone); }
.mrna-timeline__yeargroup.is-revealed .mrna-timeline__dot { transform:scale(1); }
/* "Stops and starts" effect below each dot (positioned by timeline-wave.js).
The strand resumes below the dot with a slightly darker rounded cap, and a
white gap separates it from the dot. */
/* Grey "restart" dot where the strand re-emerges, a clear white gap below the
coloured dot. Same width as the strand. Positioned by timeline-wave.js. */
.mrna-timeline__waverestart {
position:absolute;
border-radius:50%;
background:#a7c0cb; /* slightly darker than the #CDDFE4 strand */
z-index:2; /* above the white eraser, below the coloured dot */
pointer-events:none;
/* Part of the milestone marker: hidden until the strand reaches the dot. */
opacity:0;
transition:opacity 0.25s ease;
}
.mrna-timeline__yeargroup.is-revealed .mrna-timeline__waverestart { opacity:1; }
/* White eraser bar that clears the strand between the coloured dot and the grey
restart dot, so a clean white gap separates them. Sized by JS. Sits above the
wave + grey dot, below the coloured dot. */
.mrna-timeline__wavegap {
position:absolute;
border-radius:50%; /* a circle: no corners to ever poke past the dots */
background:#fff;
z-index:1; /* above the wave, below both dots */
pointer-events:none;
/* Only carve the white gap once the milestone is revealed. */
opacity:0;
transition:opacity 0.25s ease;
}
.mrna-timeline__yeargroup.is-revealed .mrna-timeline__wavegap { opacity:1; }
/* Reduced motion: no scroll-linked animation. Show the strand fully drawn and
every milestone revealed immediately, with all transitions disabled. */
@media (prefers-reduced-motion: reduce) {
.mrna-timeline__wave-path { transition:none; }
.mrna-timeline__dot,
.mrna-timeline__connector,
.mrna-timeline__marker,
.mrna-timeline__waverestart,
.mrna-timeline__wavegap {
transition:none !important;
}
.mrna-timeline__dot { transform:scale(1) !important; }
.mrna-timeline__connector { transform:scaleX(1) !important; }
.mrna-timeline__marker { transform:rotate(45deg) scale(1) !important; }
.mrna-timeline__waverestart,
.mrna-timeline__wavegap { opacity:1 !important; }
}
/* ---- Responsive ---- */
@media (max-width:768px) {
/* Decade nav becomes a dropdown: hide the button row, show the