/*
* jcts-banner-fix.css
*
* Makes the site header readable on the pale hero banners, using a gradient scrim across the
* top of the banner rather than a flat wash over the whole thing, so the artwork stays bright.
*
* The problem, in three parts:
* 1. `.site-nav` is `position: absolute; top: 0` (style.css:8757) with no background of its
* own, so it floats over the banner and depends entirely on that image for contrast.
* 2. Its links are hard-coded `rgba(255,255,255,.7)` (style.css:8774) and `.hero h1` / `.hero p`
* are `#fff` (style.css:~9275). There is no light/dark variant anywhere, and no JS adds a
* scroll class.
* 3. The tint that used to sit behind that white text - `.hero.overlay:before` - still exists as
* a full-bleed absolutely-positioned box, but its `background` declaration is commented out
* in the compiled style.css (~9265). The Sass source still has it enabled
* (scss/components/_site-blocks.scss:29), so the compiled CSS is out of sync with its source.
*
* Most hero banners use the dark navy Banner.jpg (mean luma 35.7), where white text reads fine,
* which is why this stayed hidden. The pale illustrations replacing it one page at a time are
* nearly white - landscape-2.jpg measures 224.6 luma across the header strip and 243.9 in the
* centre, EventBanner.jpg 235.7, VideoBanner.jpg 219.2, ContactBanner.jpg 220.2 - putting white
* text at roughly 1.1:1 contrast. Every new pale banner has to be added to the selectors below.
*
* Load this AFTER style.css. Nothing here uses !important; it wins on source order.
*/
/* Two knobs. The top stop governs the nav strip, the mid stop governs the centred hero text.
Both are measured worst case: white text over a *pure white* pixel of the artwork, composited
with the scrim at that point, using the sRGB relative-luminance formula. Both banners contain
such pixels, so this is the number that governs - a mean-luma estimate flatters the result by
roughly 0.5:1 and should not be used.
0.78 -> 8.04:1 <- top stop default
0.70 -> 6.10:1
0.62 -> 4.68:1 <- mid stop default; clears AA for normal text
0.55 -> 3.76:1 clears large text only
0.35 -> 2.16:1 unreadable
The mid stop is 0.62 rather than something lighter because the hero's `` ("Learn about our
mission...") is normal-size white text and needs 4.5:1. The 40px bold `
` only needs 3:1, so
if you ever drop that paragraph you can take the mid stop down to 0.55 and get more artwork
back. Lowering it while the paragraph is there fails AA - 0.55 at the paragraph's position
measures 3.76:1, and the first draft of this file put it at 3.19:1. */
:root {
--jcts-scrim-top: 0.78;
--jcts-scrim-mid: 0.62;
}
/* ------------------------------------------------------------------------------------------
1. Paint a top-down gradient scrim - but only on the pale banners.
Scoped by the hero's inline `style` attribute so no markup change is needed. Each of the four
names below appears on exactly one page - "landscape-2" on /Home/AboutUs, "EventBanner" on
/Home/Events, "VideoBanner" on /Latestvideo and "ContactBanner" on /Home/Contact - so these
selectors cannot catch anything else. Note that "ContactBanner" would also substring-match a
hypothetical "Banner", but the reverse is not true: the dark Banner.jpg pages are matched by
neither. Those remaining Banner.jpg pages are deliberately left alone - they are already dark
enough. The two new banners measure 219.2 and 220.2 mean luma across the nav strip, in the
same range as landscape-2.jpg (224.7), so the stops below carry over unchanged.
The stops are positioned against where things actually sit in a 70vh hero (style.css:9292):
the nav strip is the top ~90px, and the centred h1+p block spans roughly 40-62% of the height.
0-20% full top stop - the nav strip, on any viewport height
20-34% ramp down - transition
34-64% full mid stop - the h1 and the paragraph both fall inside this plateau
64-100% fade to clear - artwork at full brightness
The 0-20% plateau is what makes this hold up on a short viewport. The hero has a 300px floor,
where the 90px nav strip reaches 30% rather than the ~12% it occupies at 1080p. 30% lands on
the ramp, not past it, so the nav still measures 5.43:1 there.
To cover a new pale banner later, add its filename here as another selector.
------------------------------------------------------------------------------------------ */
.hero.overlay[style*="landscape-2"]::before,
.hero.overlay[style*="EventBanner"]::before,
.hero.overlay[style*="VideoBanner"]::before,
.hero.overlay[style*="ContactBanner"]::before {
background: linear-gradient(to bottom,
rgba(16, 32, 56, var(--jcts-scrim-top)) 0%,
rgba(16, 32, 56, var(--jcts-scrim-top)) 20%,
rgba(16, 32, 56, var(--jcts-scrim-mid)) 34%,
rgba(16, 32, 56, var(--jcts-scrim-mid)) 64%,
rgba(16, 32, 56, calc(var(--jcts-scrim-mid) * 0.35)) 84%,
rgba(16, 32, 56, 0) 100%);
}
/* ------------------------------------------------------------------------------------------
2. Lift the hero's own text above that scrim.
This rule is what stops the fix backfiring. `.hero.overlay` is `position: relative` and its
`::before` is absolutely positioned, while the hero's `.container` is static. CSS 2.1 painting
order (Appendix E) paints positioned descendants after in-flow non-positioned content, so
without an explicit stacking order the scrim would be painted straight over the "About Us"
heading - dimming the text by exactly as much as the background behind it and leaving the page
no more readable than before.
`.site-nav` already carries `z-index: 9` and sits outside the hero, so the header itself is
unaffected and needs no change here.
------------------------------------------------------------------------------------------ */
.hero.overlay[style*="landscape-2"] > .container,
.hero.overlay[style*="EventBanner"] > .container,
.hero.overlay[style*="VideoBanner"] > .container,
.hero.overlay[style*="ContactBanner"] > .container {
position: relative;
z-index: 2;
}
/* ------------------------------------------------------------------------------------------
3. Opaque white nav links, site-wide.
The scrim alone is not enough: the semi-transparent `rgba(255,255,255,.7)` links lose about a
third of their contrast against any backdrop, while opaque white keeps all of it. This is
applied globally rather than scoped to the two pages because the nav lives in _Layout.cshtml
*before* @RenderBody(), making it a preceding sibling of the hero - it cannot be targeted from
the hero without `:has()`. Going global avoids that dependency entirely and is an improvement
on the dark banners too, where contrast rises from 9.1:1 to 17:1.
Hover, .active and .has-children states are already #fff in style.css, so they need nothing.
The dropdown panels have their own white background with #000 links and are untouched, as is
the mobile off-canvas menu (background #fff, #000 links - style.css:8915, :8976).
------------------------------------------------------------------------------------------ */
.site-nav .site-navigation .site-menu > li > a {
color: #fff;
}
/* Keep the Login pill's outline in step with the brighter links; at rgba(255,255,255,.1) it was
invisible on every banner, pale or dark. */
.site-nav .site-navigation .site-menu > li.cta-button a {
border-color: rgba(255, 255, 255, 0.55);
}
/* ------------------------------------------------------------------------------------------
4. A soft shadow on the hero text.
The scrim already clears AA on its own, so this is margin rather than load-bearing - WCAG does
not credit text-shadow, and the numbers above are all computed without it. It matters where the
artwork happens to be light *and* busy, which flat contrast maths does not capture. The shadow
is offsetless and wide, so it reads as a halo rather than a drop shadow.
------------------------------------------------------------------------------------------ */
.hero.overlay[style*="landscape-2"] h1,
.hero.overlay[style*="EventBanner"] h1 {
text-shadow: 0 0 18px rgba(16, 32, 56, 0.55);
}
.hero.overlay[style*="landscape-2"] p,
.hero.overlay[style*="EventBanner"] p {
text-shadow: 0 0 12px rgba(16, 32, 56, 0.6);
}