/* Minification failed. Returning unminified contents.
(198,23): run-time error CSS1030: Expected identifier, found '>'
(198,37): run-time error CSS1031: Expected selector, found ')'
(198,37): run-time error CSS1025: Expected comma or open brace, found ')'
(392,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(393,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(394,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(395,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(412,17): run-time error CSS1039: Token not allowed after unary operator: '-bxc-text'
(10046,19): run-time error CSS1039: Token not allowed after unary operator: '-jumbotron-dim'
(10089,15): run-time error CSS1039: Token not allowed after unary operator: '-jumbotron-text-y'
*/
/*
Content images that break out of the text column.
The column is capped at 970px (style.min.css: .contentpage
.content-column-width-limiter > .container). That is a good measure for prose - 65 to 75
characters - and should not change. It is a bad width for a screenshot. So the two are
separated: text keeps its measure, images get more room.
Two classes, both opt-in. Without one of them nothing changes, so every image already on
the site is untouched.
img-wide always wide. Static breakout, geometry lifted from KnowledgeBase.css so the
site has one breakout convention rather than two that drift.
img-zoom column width normally, growing to the wide size as it passes the middle of
the viewport and shrinking again on the way out.
Pair either with a larger ?mw= on the media URL: the class sets display width, ?mw= sets
how many pixels C1 serves, and a 1400px slot fed by mw=1200 is upscaled.
*/
@media (min-width: 1200px) {
.contentpage .content-column-width-limiter img.img-wide {
display: block;
max-width: none;
width: min(1400px, calc(100vw - 64px));
height: auto;
/*
The image sits in a paragraph the width of the column, so 100% here is the column.
Half the difference pulls the wider image back to centre; it is negative, which is
what puts the overflow on both sides instead of only the right.
*/
margin-left: calc((100% - min(1400px, calc(100vw - 64px))) / 2);
}
/*
WHY THIS SCALES INSTEAD OF RESIZING.
The first version of img-zoom animated width. It was unusable: you could not scroll to
a half-way state, only to fully small or fully large. Animating width also changes the
image's height, which moves everything below it, which changes how far the image has
travelled through the viewport, which is what drives the animation. The animation fed
its own input, so the loop had no stable middle and ran to one end or the other.
transform does not participate in layout, so there is no feedback and every
intermediate position is reachable.
The layout box stays at COLUMN width and the image scales UP from it, rather than
reserving the wide box and scaling down. Scaling down would be the more usual way round
and gives a sharper peak, but it leaves the image sitting in a permanently wide box
with empty space above and below it at every other scroll position.
The vertical margin is sized to hold the enlarged image, so growing never overlaps the
text. It is constant, so it costs spacing rather than stability.
*/
.contentpage .content-column-width-limiter img.img-zoom {
display: block;
width: 100%;
height: auto;
transform-origin: center center;
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.contentpage .content-column-width-limiter img.img-zoom {
/*
MARGIN AND SCALE ARE LOCKED TOGETHER. Growing from the centre adds height
above and below, so the margin has to clear the largest state - but it is
fixed, so it shows as a gap in the smallest state, which is where the image
spends most of its travel.
The rule: at column width these images are about 520px tall, so each side
needs (scale - 1) x 520 / 2. At 1.44 that was 120px each, which read as a
white band. 1.25 needs 65px, which is close to ordinary section spacing and
stops looking like a border.
Raising the peak means raising the margin in step, or the image will cover
the text next to it at full size.
*/
margin-top: 68px;
margin-bottom: 68px;
animation: img-centre-zoom linear both;
animation-timeline: view();
/* Keeps the layer composited, so the scale stays smooth while scrolling. */
will-change: transform;
}
/*
The timeline runs 0% as the image enters the viewport to 100% as it leaves, so
50% is dead centre.
Interpolating straight from 0 to 50 to 100 was wrong in both directions: the
image started growing the moment it appeared, and spent most of its travel
near full size because the curve is flattest around its peak. So the ends are
pinned flat and the movement is packed into the middle - nothing happens for
the first third, it grows through 33-50%, peaks for an instant at centre, and
is back to column width by 67%.
Every scroll position still maps to its own size, so it tracks the scrollbar
rather than triggering. Move 33/67 together: closer to 50 makes it later and
sharper, further away makes it earlier and gentler.
linear is deliberate: easing would decouple size from scroll position, which is
what makes it feel driven rather than fired.
*/
@keyframes img-centre-zoom {
0%, 33% { transform: scale(1); }
50% { transform: scale(1.25); }
67%, 100% { transform: scale(1); }
}
}
}
}
/*
Link affordance.
Two problems, one file.
1. INLINE LINKS RELIED ON COLOUR ALONE. The theme gives a link #0777ff and no underline until
hover, so a link inside a paragraph is distinguished from the sentence around it by hue and
nothing else. That fails WCAG 1.4.1 (Use of Colour) for anyone who cannot separate the two,
and it is simply easy to miss for everyone else. The underline goes back, but thin and
offset so it reads as a modern link rather than a 1996 one.
2. STANDALONE SECTION LINKS READ AS STRAY TEXT. A section that ends with its own link is
written as Label
- a paragraph whose only child is a link. Rendered with the
ordinary inline treatment it looks like the leftover first three words of a sentence
someone forgot to finish. It is navigation, so it is styled as navigation.
WHY THIS NEEDS NO PAGE EDITS. "p > a:only-child" matches exactly the shape those links already
have, everywhere on the site, including every one written before this file existed. Nothing to
republish, and no class anyone has to remember to add for the next one.
Loaded from the page template, so it applies site-wide. Remove the