/* Almeria Story — Special Report template */
/* Template-specific styles. Body content styling is inherited from story-templates.css */
/* Note: body.single-story has * { margin: 0; padding: 0 } !important reset in
header-branded.php, so layout spacing rules here use !important where they need to
win against that reset. */
:root {
/* Palette for this template only. Scoped local tokens, not design tokens —
every section background and every run of body copy reads one of these
two, so they are the whole palette.
One flat page colour top to bottom: the hero, the body and the bottom
sections all sit on --sr-bg, so every join between them is seamless. */
--sr-bg: #0C0E26;
--sr-text: #fff;
/* Extra screens of scroll the title block holds on-centre before it
releases. 1 means the headline sits still for one turn of the wheel. */
--sr-title-hold: 1;
/* Screens of scroll track each standfirst panel gets. One screen per panel
paced the sequence too fast to read: a single trackpad flick covers more
distance than a paragraph's whole fade-in, hold and fade-out, so it was
possible to scroll straight past a panel without registering it. This is
the one number to turn if the sequence still feels rushed or now drags —
the slot rhythm in the template's scroll handler is expressed as
fractions of a slot, so it rescales with it and nothing else changes. */
--sr-panel-screens: 1.8;
/* How far the hero photograph runs past the bottom of the poster, and
therefore how tall the fade into --sr-bg is. The strip below the fold
is pushed down by the same amount, so the credit clears the fade. */
--sr-hero-fade: 12.5vh;
/* This template is dark in BOTH OS colour schemes, so pin the dark-mode
values of the shared palette rather than letting the scheme pick.
--content-bg backs `html, body` in story-templates.css, so it has to be
set here on :root — a body-level declaration never reaches . */
--content-bg: var(--sr-bg);
--main-content-bg: var(--sr-bg);
--text-color: var(--sr-text);
--text-color-muted: #a8a8a8;
}
html {
background: var(--sr-bg);
}
body {
/* Template accent — feeds --highlight-color (and the derived
--bg-highlight-color) so the whole template themes jaffna, and
--link-hover-color so the theme's ::selection rule derives the
selection tint from the same accent. */
--highlight-color: var(--cr-jaffna);
--link-hover-color: var(--cr-jaffna);
/* Restated on `body` because header-branded.php's inline :root loads AFTER
this stylesheet and re-sets --text-color per colour scheme, beating our
:root. A declaration on `body` wins for body and every descendant — i.e.
the whole visible page — whichever :root ends up on . */
--text-color: var(--sr-text);
--text-color-muted: #a8a8a8;
}
a {
transition: color 0.3s ease;
}
a:hover,
.sr-hero-inner a:hover,
.sr-index a:hover,
.sr-body .story-content-inner a:hover,
a.sr-more-stories:hover {
color: var(--link-hover-color);
text-decoration: none;
}
/* ===== Hero Section =====
Two parts: a 100vh full-bleed poster (featured image + type), then the
divider/index strip, which is deliberately outside the poster so it only
comes into view once the reader scrolls past the fold. The section itself
carries no padding — the poster and the strip each set their own. */
.sr-hero {
width: 100vw;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
background: var(--sr-bg);
padding: 0 !important;
position: relative;
z-index: 10;
}
/* --- The scroll track ---
Taller than the viewport by --sr-panel-screens per standfirst panel, which is
what gives the pinned poster something to scroll through. The count comes from
the template as an inline custom property, so adding a paragraph lengthens the
sequence with no change here. */
.sr-hero-scroll {
position: relative;
height: calc(var(--sr-standfirst-count, 1) * var(--sr-panel-screens, 1) * 100vh);
}
/* --- The poster ---
The featured image covers the full 100vw x 100vh as a z 0 layer and the
standfirst sits over it at z 2, with nothing in between — no scrim, no tint.
Legibility is the photograph's job here, so choose a featured image with a
quiet middle band.
Sticky rather than static: the photograph holds perfectly still while the
standfirst paragraphs cross-fade through it. Nothing between here and
.sr-hero-scroll may set overflow, or the pinning silently stops working.
The poster keeps --sr-bg as its own background, which is what shows for a
story with no featured image.
No overflow:hidden here — the photo deliberately runs --sr-hero-fade past the
poster's bottom edge and clipping it would undo the fade. object-fit:cover
means the ![]()
never overflows on its own, so nothing else needs the clip. */
.sr-hero-poster {
position: sticky;
top: 0;
min-height: 100vh;
/* svh excludes the mobile browser chrome, so the standfirst is not parked
under the URL bar. Ignored by engines that do not know the unit. */
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
background: var(--sr-bg);
/* Vertical padding is symmetric on purpose: the standfirst is centred in the
content box, so unequal top/bottom padding would push it off the poster's
true midline. Nothing sits at the top any more, so the header-height
allowance is only there to keep the two sides equal. */
padding: calc(var(--header-height) + 2vw) 2vw !important;
text-align: center;
color: var(--sr-text);
}
/* Full bleed: the offsets resolve against the poster's padding box, so the
image reaches all four edges even though the poster is padded for its type.
The bottom offset is negative, so the photo hangs --sr-hero-fade below the
poster and dissolves there rather than ending on a hard horizontal edge.
max-width:none is load-bearing — the shared rules cap story images at 1200px
and that cap letterboxes the poster. */
.sr-hero-image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: calc(-1 * var(--sr-hero-fade));
z-index: 0;
width: 100%;
height: auto;
max-width: none;
margin: 0 !important;
}
/* One frame per standfirst panel, all stacked in the image layer and swapped by
opacity. Absolute rather than a grid stack like the paragraphs use: these have
no intrinsic size to contribute, and the layer's height comes from its own
offsets, so there is nothing for them to size. */
.sr-hero-frame {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
display: block;
/* First frame is up before any JS runs, so the hero is never bare; the rest
are faded in by the scroll handler. */
opacity: 0;
transition: opacity 0.15s linear;
}
.sr-hero-frame:first-child {
opacity: 1;
}
/* The fade itself: transparent at the poster's bottom edge, solid --sr-bg
by the end of the overhang, so the photograph resolves into the page colour.
Sits inside .sr-hero-image, so it covers the overhang and nothing else. */
.sr-hero-image::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: var(--sr-hero-fade);
/* Above the frames, which sit at z 0 — otherwise the swap would paint over
the fade and the photo would end on a hard edge again. */
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, transparent 0%, var(--sr-bg) 100%);
}
/* Lift the standfirst above the image layer. A one-cell grid stacks every panel
in the same place, so the block is as tall as the longest paragraph and
nothing shifts as they swap — cleaner than absolute positioning, which would
collapse the container to nothing and leave the poster's centring guessing. */
.sr-standfirst {
position: relative;
z-index: 2;
display: grid;
width: 100%;
max-width: 1200px;
margin: 0 auto !important;
}
.sr-standfirst-para {
grid-area: 1 / 1;
align-self: center;
font-family: var(--serif-font);
font-style: italic;
font-size: 2.5rem;
color: var(--sr-text);
line-height: 1.5;
margin: 0 auto !important;
text-wrap: balance;
/* Same shadow the homepage hero puts under its headline and serif subtitle
(featured-story-full-bleed.css). There is no scrim over the photographs
here, so this is the only thing holding the copy legible against whatever
the frame happens to be. */
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
/* First panel is visible before a single line of JS runs, so the hero is
never briefly blank; the rest are faded up by the scroll handler. */
opacity: 0;
transition: opacity 0.15s linear;
}
.sr-standfirst-para:first-child {
opacity: 1;
}
/* --- The strip below the fold: credit + kicker + headline + divider + index ---
No max-width of its own; the divider and index are each 1200px capped and
auto-centred, so with 2vw of padding here they line up exactly with
.sr-divider-bottom down in .sr-body. The credit is not capped, so the same
2vw is what puts it hard against the left edge.
The top padding clears the photo's overhang so the credit starts on flat
colour, and position/z-index lift the whole strip above the photo — without
them the image layer, being positioned, would paint over this text. */
.sr-hero-inner {
position: relative;
z-index: 2;
margin: 0 auto !important;
padding: var(--sr-hero-fade) 2vw 0 !important;
text-align: center;
color: var(--sr-text);
}
/* Title block — kicker and headline get a screen to themselves, centred
vertically. No background of its own: .sr-hero is already --sr-bg and the
photograph has faded out well above here, so they sit on flat page colour.
The track is taller than the block; the block is sticky inside it. So the
pair rides up to the centre of the screen, holds there for --sr-title-hold
screens of scrolling, then releases. */
.sr-hero-title-track {
position: relative;
height: calc((1 + var(--sr-title-hold, 1)) * 100vh);
}
.sr-hero-title {
position: sticky;
top: 0;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
/* Cross-axis centring stated outright. The pair used to rely on auto side
margins, which is a different mechanism once these became flex items —
width + align-items is unambiguous and cannot drift. */
align-items: center;
}
/* Kicker and headline read as one block, left-aligned and exactly as wide as
the article's body copy column. Both are centred at that width, so their left
edge lands on the body text's left edge rather than the viewport's. 760px is
the body measure set by story-templates.css on .story-content-inner p. */
.sr-hero-inner .sr-kicker,
.sr-hero-inner .sr-headline {
width: 100%;
max-width: 760px;
text-align: left;
}
/* No top margin: the block centres its own contents, so a leading margin would
only push the pair off that centre. */
.sr-hero-inner .sr-kicker {
margin: 0 0 12px !important;
}
.sr-hero-inner .sr-headline {
margin: 0 !important;
}
.sr-hero-inner a {
text-decoration: underline;
color: inherit;
}
.sr-kicker,
.sr-headline {
max-width: 760px;
margin-left: auto !important;
margin-right: auto !important;
text-wrap: balance;
}
.sr-kicker {
font-family: var(--primary-font);
font-weight: 600;
font-size: var(--fs-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cr-jaffna);
margin-bottom: 12px;
}
/* 400 pulls in the Tall Fine cut of PP Right Serif (header-branded.php
registers 400 and 600 as separate files), not a synthetic thinning of the
600. Literal rem sizes, never an --fs-* token: those are calibrated for the
sans stack. */
.sr-headline {
font-family: var(--compressed-font);
font-size: 8rem;
color: var(--sr-text);
line-height: 0.9;
margin: 0 auto 3rem !important;
font-weight: 400;
}
/* Photo credit — hard left in the strip below the fold, above the divider.
Deliberately uncapped, unlike the divider and index it sits with: dropping
the 1200px cap and the auto margins lets .sr-hero-inner's own padding set the
offset, so the credit sits 2vw off the viewport's left edge at any width
(4vw on mobile, where the rule below adds the difference). */
.sr-image-credit {
text-align: left;
max-width: none;
margin: 8px 0 0 !important;
}
.sr-divider {
height: 2px;
background: var(--sr-text);
border: none;
width: 1200px;
max-width: 100%;
/* Tighter below than above: the rule sits closer to the index it introduces
than to the headline screen it closes. */
margin: 2rem auto 1.5rem !important;
}
.sr-divider-bottom {
height: 2px;
background: var(--sr-text);
border: none;
width: 1200px;
max-width: 100%;
margin: 4rem auto 2rem auto !important;
}
.sr-index {
width: 1200px;
max-width: 100%;
margin: 0.5rem auto 0 !important;
padding-bottom: 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
font-family: var(--primary-font);
font-weight: 600;
font-size: var(--fs-base);
color: var(--sr-text);
}
.sr-index a {
color: inherit;
text-decoration: none;
}
.sr-index-left {
text-align: left;
}
/* Lighter than the rest of the index, which .sr-index sets to 600. */
.sr-index-right {
text-align: right;
font-weight: 400;
}
.sr-index-right a {
font-style: italic;
}
.sr-dot {
margin: 0 0.2rem !important;
}
/* ===== Body Section ===== */
.sr-body {
width: 100vw;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
background: var(--sr-bg);
padding: 0 2vw !important;
position: relative;
z-index: 10;
}
/* Cancel the top padding the shared container applies inside the body section */
.sr-body .story-single-container {
padding: 0 2vw !important;
}
.sr-body .story-content-inner {
color: var(--sr-text);
padding-top: 1rem !important;
}
.sr-body .story-content-inner p {
color: var(--sr-text) !important;
}
.sr-body .story-content-inner a {
color: var(--sr-text);
text-decoration: underline;
}
/* Suppress the global p a::after lime-sweep from style.css — without position:relative on
the , it anchors to .sr-body (position:relative) and renders a full-width lime bar
just above sr-divider-bottom. The jaffna hover color already handles the link state here. */
.sr-body .story-content-inner p a::after {
content: none;
}
/* Image captions and credits sit at the dark-mode --text-color-muted (#a8a8a8)
in both colour schemes. The token is pinned on :root/body above, so these
rules only need to catch the places that hard-code a colour instead. */
.sr-image-credit,
.sr-hero .story-image-credit,
.sr-body .story-image-credit,
.sr-body .caption,
.sr-body .architecture-scroll-item .caption {
color: var(--text-color-muted) !important;
}
/* Credit line under the in-article video, from the credit-video class applied
to the block in the editor. Restated rather than reusing .story-image-credit,
because a pseudo-element cannot carry a class — keep these in step with
.story-image-credit (story-templates.css) and the .sr-image-credit override
above if either moves.
font-family is not optional here: unlike the hero credit, this one sits
inside .story-content-inner, which sets the serif face for body copy, so
without this it would come out in Legitima rather than the sans the other
credits use. */
/* Full bleed: the video breaks out of the article's gutters to fill the
viewport. Same 100vw + negative-margin breakout .sr-hero and
.story-single-container use — every containing block in the chain is centred,
so the negative margins land it at x=0 however many padded ancestors it sits
inside. Nothing on that chain sets overflow, which is the thing that would
otherwise clip it, and the shared max-width:100% applies to img only, not
video. */
.sr-body .credit-video {
width: 100vw;
max-width: none;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
.sr-body .credit-video video {
display: block;
width: 100%;
height: 100vh;
/* svh keeps it inside the visible viewport on phones, where 100vh counts
the browser chrome too. Ignored by engines that do not know the unit. */
height: 100svh;
object-fit: cover;
}
.sr-body .credit-video::after {
content: "Reuben J. Brown for Panoramic";
display: block;
font-family: var(--primary-font);
font-size: 0.75rem;
line-height: 1.4;
color: var(--text-color-muted);
text-align: left;
margin-top: 8px;
/* The figure is now flush with the viewport, so the credit needs the gutter
itself. 2vw matches where .sr-image-credit sits under the hero. */
padding-left: 2vw;
}
/* Small caps span (applied manually in the WP editor) */
.sr-all-small-caps {
font-variant-caps: small-caps;
text-transform: lowercase;
}
/* Drop cap. The class applied to these paragraphs in the WP editor is
`drop-cap` — the plugin's base-sections.css class, which is where the
letterform itself comes from (float + compressed font at 5em). Only the
space above it is ours, so this rule has to name that class: the section's
own `sr-drop-cap` never appears in the article body and styling it alone
silently did nothing.
Padding only. The margin that used to sit alongside it collapsed against the
preceding paragraph's 1.5rem bottom margin, so it was never worth its stated
value anyway; the padding is inside the box and collapses against nothing. */
.sr-drop-cap,
.sr-body .story-content-inner p.drop-cap {
padding-top: 4rem !important;
}
/* Alternative letterform — an initial-letter drop cap instead of the plugin's
floated one. Opt in per paragraph with the `sr-drop-cap` class; nothing in
the article currently uses it. */
.sr-drop-cap::first-letter {
-webkit-initial-letter: 2;
initial-letter: 2;
margin-right: 0.25em !important;
font-weight: inherit;
}
/* ===== Bottom Section ===== */
.sr-bottom {
width: 100vw;
min-height: 100vh;
align-content: center;
margin-left: calc(-50vw + 50%) !important;
margin-right: calc(-50vw + 50%) !important;
margin-top: -32px;
background: var(--sr-bg);
/* Extra bottom padding lets the background extend behind the sticky footer
so nothing white shows when scrolled all the way down. */
padding: 4rem 2vw !important;
position: relative;
z-index: 10;
}
.sr-bottom-inner {
max-width: 1200px;
margin: 0 auto !important;
text-align: center;
}
.sr-bottom .sr-divider {
margin-top: 0 !important;
}
.sr-bottom-kicker {
font-family: var(--primary-font);
font-weight: 600;
font-size: var(--fs-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--cr-jaffna);
max-width: 760px;
margin: 1.5rem auto 3rem !important;
text-align: center;
text-decoration: none !important;
}
.sr-bottom-kicker a {
text-decoration: none !important;
}
.sr-bottom-stories {
max-width: 760px;
margin: 0 auto !important;
text-align: center;
font-size: 6rem !important;
text-wrap: balance;
}
.sr-more-stories {
display: block;
font-family: var(--compressed-font);
font-weight: 600;
font-size: 6rem;
color: var(--sr-text);
text-wrap: balance;
text-decoration: none;
margin-bottom: 3rem !important;
line-height: 0.9;
text-align: center;
transition: color 0.3s ease;
}
.sr-more-stories+.sr-more-stories::before {
content: '';
display: block;
width: 150px;
height: 1px;
background: var(--cr-75grey);
margin: 0 auto 3rem;
}
a.sr-more-stories {
color: var(--sr-text);
}
.sr-img-fade-in {
/* Define the animation name and set it to a dummy duration (required for fallbacks) */
animation: fadeIn linear both;
/* Link the animation to the root scroll container */
animation-timeline: view();
/* Trigger the animation when the element enters the viewport
and finish it when it reaches the vertical center (50%) */
animation-range: entry 0% contain 50%;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: scale(0.95); /* Optional: Adds a subtle smooth zoom-in effect */
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ===== Footer overlay on this template =====
Pull the sticky footer up to overlay the Bottom section's dark gradient so
no white block is visible when scrolled all the way down. JS toggles
.over-full-bleed on the footer based on overlap with .sr-bottom. */
.site-footer {
margin-top: -80px !important;
}
/* This template is dark top-to-bottom (hero, body and bottom are all dark), so
the footer always wants the white "over-full-bleed" treatment — including the
stretches where the shared JS has not applied it. Force the R mark white and
the copyright muted throughout, overriding the black logo PNG the JS swaps in. */
body .site-footer .footer-logo img {
/* brightness(0) flattens the mark to solid black, invert(1) then makes it
solid white — whichever PNG src the JS has swapped in. */
filter: brightness(0) invert(1) !important;
}
body .site-footer .copyright,
body .site-footer.over-full-bleed .copyright {
color: var(--text-color-muted) !important;
}
/* The footer contact pill's tablet/mobile palette is in story-templates.css,
next to the .story-header-contact it matches. */
/* ===== Responsive ===== */
@media (max-width: 1200px) {
.sr-headline {
font-size: 4.5rem;
}
}
@media (max-width: 768px) {
.site-footer {
margin-top: calc(-2vw - env(safe-area-inset-bottom, 0px)) !important;
}
.sr-body .story-single-container {
padding: 0 4vw !important;
}
.sr-hero-poster {
padding: calc(var(--header-height) + 4vw) 4vw calc(4vw + 1rem) !important;
}
/* One 4vw gutter for the whole strip below the fold — credit, kicker,
headline, divider, share line and publication line all start on the same
vertical. Set here on the container rather than stacked onto each child:
below 760px the children are full-width anyway, so there is no measure
left to centre them within and the container's padding is the only lever
that matters. Note this takes the divider off .sr-divider-bottom's 2vw —
deliberate, since a rule indented less than every line around it was the
odd one out. */
.sr-hero-inner {
padding-left: 4vw !important;
padding-right: 4vw !important;
}
.sr-headline {
font-size: 3rem;
}
/* 4vw here, matching .sr-hero-inner's mobile gutter. */
.sr-body .credit-video::after {
padding-left: 4vw;
}
.sr-divider {
margin-bottom: 0.75rem !important;
}
/* Stacked and flush left, not centred: the date/share line and the
publication line read as one left-aligned column under the rule.
--fs-sm is safe here: .sr-index is set in --primary-font, and the --fs-*
scale is calibrated for the sans only. */
.sr-index {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
font-size: var(--fs-sm);
}
.sr-index-right {
text-align: left;
}
.sr-bottom {
padding: 3rem 1rem 200px !important;
margin-bottom: -50px;
}
.sr-more-stories {
font-size: 4rem;
}
.sr-kicker,
.sr-bottom-kicker {
font-size: var(--fs-2xs);
}
}
/* Short viewports — landscape phones and short tablets. The standfirst is the
height-constrained one: it is centred inside a hard 100vh poster, so on a
wide-but-short screen the width-only queries above leave it at full size with
nowhere to go. The drop cap's opening gap belongs here too rather than in the
width-only block above — what it spends is vertical space, which is precisely
what these viewports are short of. The headline is deliberately absent from
these blocks — it lives below the fold in normal flow, where a short viewport
costs it nothing and shrinking it would only be gratuitous; its own
width-only rules still apply. The compound clause is copied verbatim from the
breakpoint reference at the top of the plugin's base-sections.css, and has to
sit after the 1200px block to win the cascade. */
@media (max-width: 768px), ((max-width: 1200px) and (max-height: 768px)) {
.sr-standfirst-para {
font-size: 1.5rem;
}
/* Half the desktop opening gap. Selectors must match the desktop rule
exactly; both carry !important, so anything less specific here would
simply lose. */
.sr-drop-cap,
.sr-body .story-content-inner p.drop-cap {
padding-top: 2rem !important;
}
}
/* Reduced motion: no pinning and no cross-fade. The scroll track collapses to
the poster's own height, the poster sits in normal flow and the panels become
what they always were underneath — three consecutive paragraphs, all visible,
in order. The scroll handler checks the same query and bails, so it never
fights this. */
@media (prefers-reduced-motion: reduce) {
.sr-hero-scroll,
.sr-hero-title-track {
height: auto;
}
.sr-hero-poster,
.sr-hero-title {
position: relative;
top: auto;
}
.sr-standfirst {
display: block;
}
.sr-standfirst-para {
opacity: 1 !important;
transition: none;
}
.sr-standfirst-para + .sr-standfirst-para {
margin-top: 1.25rem !important;
}
}
/* ===== Header text always white, over the hero AND over the body =====
The shared rules turn the header white only while it overlaps the full-bleed
hero (.over-full-bleed) and fall back to var(--text-color) — black in the
light colour scheme — once it crosses into the body. This template is dark
all the way down, so pin white in both states and both schemes. The `body`
prefix raises specificity so these win over header-branded.php's inline