/* ==========================================================================
MANCHESTER UNITED SHIRT HISTORY
1 Variables and the light / dark switch
2 Page basics
3 Header, logos and title
4 Vertical scroll guide and year list
5 Columns and the shirt slider
6 Scroll-Horizontally bar and the arrows beside the shirts
7 Paragraphs and trophies
8 Section themes (one small block per section: colour + photo)
9 Footer
10 Phone-only pieces
11 Phone layout (screens up to 700px wide)
12 Desktop layout (screens wider than 700px)
13 Page peel (every season is its own page; the page-turn between them)
14 Home screen
15 Support button and pop-up
16 3D kits and trophies, giant years and the kit tag
17 Timeline navigation (the year list)
18 Dark sections: 50% white boxes with black text
Fonts: the @font-face rules for ITC Stone Sans II come first, just below this list.
Phone and desktop each have their own block (11 and 12). Both are written to
cover every width, so nothing is left to fall back on in between.
========================================================================== */
/* --------------------------------------------------------------------------
FONTS
ITC Stone Sans II: looks for it on the computer first, then for the files in ./Fonts
(change the file names to match yours; a missing file is simply skipped)
-------------------------------------------------------------------------- */
@font-face {
font-family: 'ITC Stone Sans II';
font-weight: normal;
font-style: normal;
font-display: swap;
src: local('ITC Stone Sans II'), local('ITCStoneSansII'),
url('../Fonts/ITCStoneSansII-Medium.woff2') format('woff2'),
url('../Fonts/ITCStoneSansII-Medium.woff') format('woff');
}
@font-face {
font-family: 'ITC Stone Sans II';
font-weight: bold;
font-style: normal;
font-display: swap;
src: local('ITC Stone Sans II Bold'), local('ITCStoneSansII-Bold'),
url('../Fonts/ITCStoneSansII-Bold.woff2') format('woff2'),
url('../Fonts/ITCStoneSansII-Bold.woff') format('woff');
}
/* ==========================================================================
1 VARIABLES AND THE LIGHT / DARK SWITCH
========================================================================== */
:root {
/* Colour used by the year list, title, scroll text and footer.
Switched to dark while a light-background section is on screen. */
--ui-color: #ffffff;
--ui-filter: none;
/* Fonts: Bebas Neue for H1 / H2 / H3 (loaded from Google Fonts in index.html), ITC Stone Sans II for
everything else. ITC Stone Sans II is a licensed font and is not in this project: put your font files in
a Fonts folder (see the @font-face rule below) and it is used automatically. Until then the next font
in the list is shown. */
--font-heading: 'Bebas Neue', Impact, 'Arial Narrow', sans-serif;
--font-body: 'ITC Stone Sans II', 'ITC Stone Sans', 'Stone Sans', Arial, sans-serif;
/* Scroll-mouse GIF: 50px above the bottom of the screen, 70px tall.
--mouse-centre = how far up the GIF's own frame the middle of the mouse sits
(35px = the middle of the frame). The Scroll-Horizontally bar lines up with it. */
--mouse-gif-bottom: 50px;
--mouse-centre: 35px;
/* Extra nudge up for the Scroll-Horizontally bar, on top of the mouse line */
--bar-lift: 15px;
/* The gold used in the trophy artwork: selected dot and selected year */
--gold: #EFBF04;
/* Colour of the dot under the shirt that is showing, and of the other dots on light sections */
--dot-active: var(--gold);
--dot-idle-light: #000000;
/* Space between a shirt arrow and the edge of the slider */
--kit-arrow-gap: 6px;
/* Width of the Home / Away / Third Kit bars as a share of the shirt width. Less than 1 leaves a
gap between neighbouring bars, and the Scroll-Horizontally bar is made the same width. */
--cap-frac: 0.78;
/* Also defined per layout (blocks 11 and 12): --slider-width (shirt width) and --guide-top
(height of the middle of the shirt, which the Scroll-Vertically text and side arrows follow) */
}
body.light-section {
--ui-color: #1a1a1a;
/* turns a white / single-colour image dark grey (matches --ui-color) */
--ui-filter: brightness(0) invert(0.1);
}
/* Scroll hints and sponsor logos on light sections follow the same switch */
#mouse-scroll,
#arrow-down,
#arrow-up,
.h-arrow img,
.kit-arrow img,
#adidas,
#umbro,
#nike,
#old {
filter: var(--ui-filter);
transition: filter 0.4s ease;
}
/* ==========================================================================
2 PAGE BASICS
========================================================================== */
* {
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
html {
font-family: var(--font-body);
scroll-behavior: smooth;
overscroll-behavior-y: contain; /* a swipe down on a phone goes to the previous page; it does not pull-to-refresh */
}
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
}
/* Every page is one full-screen section (block 13 pins it to the screen). Its colour and photo are set per
section in block 8 (plain red if a section has none); the size and position of the photo are shared here. */
section {
position: relative;
width: 100%;
height: 100vh;
text-align: center;
background-color: #f42630;
background-size: cover;
background-position: center;
}
/* Year heading */
.site-title,
h1,
h2,
h3 {
font-family: var(--font-heading);
font-weight: 400; /* Bebas Neue has one weight: asking for bold would only smear it */
}
/* (":where(...)" keeps these rules as light as the plain "h1" / "h2" they replace, so nothing else changes) */
h1:where(.year-heading) {
position: absolute;
top: 14%;
transform: translateY(-50%);
width: 100%;
margin: 0;
text-align: center;
color: white;
font-size: 4.5rem;
line-height: 1;
}
/* Season title under the year */
h2:where(.season-title) {
position: absolute;
top: calc(11% + 4.9rem);
transform: translateY(-50%);
width: 100%;
margin: 0;
text-align: center;
color: white;
font-size: 2rem;
letter-spacing: 1px;
line-height: 1;
}
/* Headings are white by default; darken them on light sections */
section[data-theme="light"] h1:where(.year-heading),
section[data-theme="light"] h2:where(.season-title) {
color: #1a1a1a;
}
/* Text that is there for search engines and screen readers but not drawn on the screen (the long version of
each page's heading, e.g. "1993 - 1994 Manchester United home, away and third shirts") */
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
3 HEADER, LOGOS AND TITLE
========================================================================== */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5rem;
color: white;
display: flex;
z-index: 1000;
}
.site-title {
position: absolute;
margin-block: 0.67em; /* the same space the H1 had when this was a heading */
top: 11px;
left: 100px;
display: flex;
width: 100%;
color: var(--ui-color);
font-size: min(1.6rem, 3.2vw); /* full size from 800px wide; a little smaller in the narrowest desktop windows so it keeps clear of the logos */
letter-spacing: 1px;
line-height: 1;
transition: color 0.4s ease, opacity 0.4s ease;
}
#icon,
#adidas,
#nike,
#umbro,
#old {
position: fixed;
z-index: 1200;
}
/* Manchester United crest */
#icon {
top: 13px;
left: 25px;
width: 50px;
height: 50px;
}
#adidas {
top: 19px;
right: 30px;
width: 40px;
height: 40px;
}
#nike {
top: 15px;
right: 82px;
width: 50px;
height: 50px;
}
#umbro {
top: 15px;
right: 150px;
width: 50px;
height: 50px;
}
#old {
top: 14px;
right: 213px;
width: 50px;
height: 50px;
}
/* The crest and the old / Umbro logos are links (back to the start / 1992-93) */
#icon,
#old,
#umbro {
cursor: pointer;
transition: opacity 0.2s ease, filter 0.4s ease;
}
#icon:hover,
#old:hover,
#umbro:hover {
opacity: 0.8;
}
/* ==========================================================================
4 VERTICAL SCROLL GUIDE AND YEAR LIST
========================================================================== */
/* Top arrow, label and bottom arrow are stacked in one fixed column, so they always share the
same centre line. left: 50px lines the column up with the centre of the crest above it. */
#scroll-guide {
position: fixed;
left: 50px;
top: var(--guide-top);
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
z-index: 1000;
}
#slide-down {
margin: 0;
color: var(--ui-color);
font-size: 0.75rem;
letter-spacing: 1px;
writing-mode: vertical-rl;
text-orientation: mixed;
transition: color 0.4s ease;
}
.guide-arrow img {
display: block;
width: 10px;
height: 80px;
}
/* Shared look for the clickable arrow buttons (vertical and horizontal) */
.guide-arrow,
.h-arrow {
margin: 0;
padding: 0;
background: none;
border: none;
line-height: 0;
cursor: pointer;
transition: opacity 0.2s ease;
}
.guide-arrow:hover,
.h-arrow:hover {
opacity: 0.6;
}
.guide-arrow:focus-visible,
.h-arrow:focus-visible {
outline: 2px solid var(--ui-color);
outline-offset: 4px;
}
/* Year list */
nav {
position: fixed;
right: 35px;
display: flex;
color: rgb(255, 255, 255);
justify-content: center;
align-items: center;
font-size: 15px;
z-index: 1000;
}
nav li {
margin-bottom: 5px;
list-style: none;
}
nav a {
color: var(--ui-color);
text-decoration: none;
font-weight: lighter;
/* fixed width so the list doesn't shift when a link turns bold */
display: inline-block;
min-width: 4.5em;
text-align: center;
transition: color 0.4s ease;
}
nav a:hover {
color: var(--ui-color);
font-weight: bold;
}
/* Link for the section on screen (set by js/script.js) */
nav a.active {
color: var(--gold);
font-weight: bold;
}
/* Scroll-mouse GIF */
#mouse-scroll {
position: fixed;
left: 50%;
bottom: var(--mouse-gif-bottom);
transform: translateX(-50%);
z-index: 1000;
}
/* ==========================================================================
5 COLUMNS AND THE SHIRT SLIDER
========================================================================== */
/* Each section has one column for the shirts (left or right) and a text block for the rest */
.left-column,
.right-column {
width: 50%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 1;
}
.left-column {
float: left;
}
.right-column {
float: right;
}
.slider-wrapper {
position: relative;
}
.slider {
display: flex;
width: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
}
.slider img {
flex: 1 0 100%;
position: relative;
scroll-snap-align: start;
object-fit: scale-down;
}
.figure {
width: 100%;
position: relative;
align-content: center;
text-align: center;
}
/* Home / Away / Third Kit bars under the shirt */
.figcaption-1,
.figcaption-2,
.figcaption-3 {
position: absolute;
bottom: 0;
left: calc((1 - var(--cap-frac)) / 2 * 100%);
width: calc(var(--cap-frac) * 100%);
padding: 0.75rem;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 10px;
color: white;
font-size: 1rem;
text-align: center;
}
/* Dots under the shirt */
.slider-nav {
position: absolute;
left: 50%;
display: flex;
column-gap: 1rem;
transform: translateX(-50%);
z-index: 1;
}
.slider-nav a {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: #fff;
opacity: 0.75;
transition: opacity ease 250ms, background-color ease 250ms, transform ease 250ms;
}
.slider-nav a:hover {
opacity: 1;
}
/* Dot for the shirt currently showing (set by js/script.js) */
.slider-nav a.active {
background-color: var(--dot-active);
opacity: 1;
transform: scale(1.4);
}
/* On light sections the dots that are not selected are black so they stay visible */
section[data-theme="light"] .slider-nav a {
background-color: var(--dot-idle-light);
}
section[data-theme="light"] .slider-nav a.active {
background-color: var(--dot-active);
}
/* ==========================================================================
6 SCROLL-HORIZONTALLY BAR AND THE ARROWS BESIDE THE SHIRTS
========================================================================== */
/* "Scroll-Horizontally" bar. It belongs to its section (not fixed to the page), so it scrolls away
with it. It is the same width as the Home / Away / Third Kit bars and sits at the height of the
mouse in the scroll GIF (see --mouse-centre). Its left edge is set per layout (blocks 11 / 12). */
.scroll-horizontal {
--bar-height: 14px;
position: absolute;
bottom: calc(var(--mouse-gif-bottom) + var(--mouse-centre) - var(--bar-height) / 2 + var(--bar-lift));
width: calc(var(--slider-width) * var(--cap-frac));
height: var(--bar-height);
display: flex;
align-items: center;
gap: 14px;
margin: 0;
color: var(--ui-color);
font-size: 0.75rem;
letter-spacing: 1px;
transform: translateX(-50%);
z-index: 2;
transition: color 0.4s ease;
}
.scroll-horizontal span {
white-space: nowrap;
}
/* The arrows stretch to fill the space either side of the label, so the whole
bar (arrow - label - arrow) spans the full width of the bars. */
.h-arrow {
flex: 1 1 0;
min-width: 0;
height: var(--bar-height);
}
.scroll-horizontal .h-arrow-line {
position: relative;
display: block;
width: 100%;
height: 100%;
container-type: inline-size;
}
/* The arrow PNGs are tall (like the vertical ones), so each is turned on its side:
its length (100cqw) is the width of the space it fills, its thickness is the bar height.
Left arrow = arrow-up.png turned anticlockwise, right arrow = arrow.png turned anticlockwise.
If an arrow points the wrong way, change its rotate() value to 90deg. */
.h-arrow img {
position: absolute;
top: 50%;
left: 50%;
width: var(--bar-height);
height: 100cqw;
transform: translate(-50%, -50%) rotate(-90deg);
}
/* Arrows either side of the shirts: a left and a right button per section that scroll through the
kits. They sit just outside the edges of the slider, level with the Scroll-Vertically text.
--slider-centre (the middle of the shirt column) is set per layout (blocks 11 / 12). */
.kit-arrow {
--kit-arrow-size: 36px; /* clickable area; the icon itself is 20px */
position: absolute;
top: var(--guide-top);
width: var(--kit-arrow-size);
height: var(--kit-arrow-size);
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
background: none;
border: none;
cursor: pointer;
transform: translateY(-50%);
z-index: 2;
transition: opacity 0.2s ease;
}
.kit-left {
left: calc(var(--slider-centre) - var(--slider-width) / 2 - var(--kit-arrow-gap) - var(--kit-arrow-size));
}
.kit-right {
left: calc(var(--slider-centre) + var(--slider-width) / 2 + var(--kit-arrow-gap));
}
.kit-arrow img {
display: block;
width: 20px;
height: 20px;
}
.kit-arrow:hover {
opacity: 0.6;
}
.kit-arrow:focus-visible {
outline: 2px solid var(--ui-color);
outline-offset: 2px;
}
/* ==========================================================================
7 PARAGRAPHS AND TROPHIES
========================================================================== */
/* These wrappers have no box of their own: their contents take part in the layout around them.
(Block 12 gives .text-col a real box on desktop; block 11 gives .desc-wrap and .trophies one on phones.) */
.text-col,
.desc-wrap,
.trophies {
display: contents;
}
/* The paragraph. Its position comes from the layout blocks (11 and 12). */
.description {
color: white;
font-family: var(--font-body);
font-size: 0.8rem;
font-weight: lighter;
line-height: 1.5;
text-align: left;
z-index: 1000;
}
/* Names in the paragraph */
.description strong {
font-weight: bold;
}
/* Individual trophy size tweaks. --adj = change in height on desktop, in "design pixels" (the size
it would be when the paragraph box is at its full 590px; it shrinks with the box, see block 12);
--adj-r = the same change as a share of the biggest trophy, used on phones. */
#old-league-cup,
#s16-league-cup,
#s19-league-cup,
#s20-league-cup { --adj: -15; --adj-r: -0.168; }
#winners-cup,
#super-cup { --adj: 10; --adj-r: 0.112; }
#super-cup { --k: 0.9; }
#s10-intercontinental-cup { --adj: 18; --adj-r: 0.2; } /* tall and thin, so it is made a little taller */ /* 10% smaller than the others get after the change above */
/* The five stat cells (top scorer, top assists, captain, Matt Busby Award, biggest win): sit at the right end of the trophy row (desktop), or inside the Read-more panel (phone) */
.season-stats {
display: none;
}
.stat {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
color: var(--ui-color);
font-family: var(--font-body);
text-align: left;
transition: color 0.4s ease;
}
/* Both icons sit in the same width box so the names line up */
.stat-icon {
flex: none;
width: 40px;
height: 32px;
color: var(--gold);
object-fit: contain; /* the boot is an image: keep its proportions inside the box */
}
/* (the trophy size rules also match , so the boot image says its size again here) */
.trophies .stat-icon {
width: 40px;
height: 32px;
}
.stat-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.stat-name {
overflow: hidden;
font-size: 0.85rem;
font-weight: bold;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.stat-value {
color: var(--gold);
font-size: 0.75rem;
line-height: 1.25;
}
/* A season with no trophies: the stats start at the left edge, so the divider is not needed */
.trophies:not(:has(img:not(.stat-icon))) .season-stats {
padding-left: 0;
border-left: 0;
}
/* Set by js/script.js on desktop when the paragraph reaches the trophies */
.trophies.is-hidden {
visibility: hidden;
}
/* ==========================================================================
8 SECTION THEMES
Each section is a colour fading over an optional photo:
background-color the section colour (used while the photo loads, and behind it)
rgba(..., 1.0 -> 0.x) the same colour as a gradient: solid at the bottom, 0.x see-through at the top
(a smaller 0.x lets more of the photo show)
url('...') the photo; leave it out for a plain colour
Colours used: red 244, 38, 48 / dark 25, 25, 25 / blue 61, 103, 143 / white 255, 255, 255
========================================================================== */
/* 1 - 1990-91 */
#section-one {
background-color: rgb(244, 38, 48);
background-image: linear-gradient(0deg, rgba(244, 38, 48, 1), rgba(244, 38, 48, 0.6)),
url('https://static01.nyt.com/athletic/uploads/wp/2020/05/14114521/manchester-united-cup-winners-cup-final-barcelona-rotterdam-1991-ferguson-scaled-e1589471162883.jpg');
}
/* 2 - 1991-92 */
#section-two {
background-color: rgb(25, 25, 25);
background-image: linear-gradient(0deg, rgba(25, 25, 25, 1), rgba(25, 25, 25, 0.9)),
url('https://media.gettyimages.com/id/110503073/photo/pfa-award-winners-gary-palliister-with-ryan-giggs-and-brian-clough.jpg?s=1024x1024&w=gi&k=20&c=7AqlQpuBXWg_c2DtrqTA0oDFEQykSdVEE5ExywPaqpo=');
}
/* 3 - 1992-93 */
#section-three {
background-color: rgb(61, 103, 143);
background-image: linear-gradient(0deg, rgba(61, 103, 143, 1), rgba(61, 103, 143, 0.7)),
url('https://tangofootballshirts.com/wp-content/uploads/2022/01/manchester-united-suplente-199293-cantona-110530_1024x1024.jpg.webp');
}
/* 4 - 1993-94 (the white section) */
#section-four {
background-color: rgb(255, 255, 255);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6)),
url('https://i.pinimg.com/1200x/68/02/5f/68025fba3e63c8b42ad8b73739a91b1c.jpg');
}
/* 5 - 1994-95 */
#section-five {
background-color: rgb(244, 38, 48);
background-image: linear-gradient(0deg, rgba(244, 38, 48, 1), rgba(244, 38, 48, 0.6)),
url('https://i2-prod.dailyrecord.co.uk/article5022923.ece/ALTERNATES/s1200f/GD530850.jpg');
}
/* 6 - 1995-96 */
#section-six {
background-color: rgb(25, 25, 25);
background-image: linear-gradient(0deg, rgba(25, 25, 25, 1), rgba(25, 25, 25, 0.9)),
url('https://pbs.twimg.com/media/HTnTV4yXcAA-fha?format=webp&name=large');
}
/* 7 - 1996-97 */
#section-seven {
background-color: rgb(61, 103, 143);
background-image: linear-gradient(0deg, rgba(61, 103, 143, 1), rgba(61, 103, 143, 0.8)),
url('https://www.wsc.co.uk/wp-content/uploads/2018/10/Beckham_goal_CS.jpg');
}
/* 8 - 1997-98 (no photo yet: add , url('...') after the gradient) */
#section-eight {
background-color: rgb(255, 255, 255);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6)),
url('https://s.yimg.com/lo/mysterio/api/bd2e3c0205d325b269c9e2d95ff9ec98dc6bd6543f56768408a06cb67214b512/lightyear_networkapi/resizefill_w810_h542%3Bquality_80%3Bformat_webp/http%3A%2F%2Fmedia.zenfs.com%2Fen-CA%2Fhomerun%2Farticle.442.com%2F28dea6d9bc6ddf137c9d32c9fb76cdf4');
}
/* 9 - 1998-99 */
#section-nine {
background-color: rgb(244, 38, 48);
background-image: linear-gradient(0deg, rgba(244, 38, 48, 1), rgba(244, 38, 48, 0.6)),
url('https://www.thesun.co.uk/wp-content/uploads/2019/05/NINTCHDBPICT000001343888.jpg?strip=all&w=960');
}
/* 10 - 1999-2000 */
#section-ten {
background-color: rgb(25, 25, 25);
background-image: linear-gradient(0deg, rgba(25, 25, 25, 1), rgba(25, 25, 25, 0.8)),
url('https://talksport.com/wp-content/uploads/2012/12/Man20United20World20Club20Cup201208320.jpg?strip=all&w=700&h=420&crop=1');
}
/* 11 - 2000-01 */
#section-eleven {
background-color: rgb(61, 103, 143);
background-image: linear-gradient(0deg, rgba(61, 103, 143, 1), rgba(61, 103, 143, 0.7)),
url('https://resources.platform.pulselive.com/premierleague/photo/2016/06/01/482b0de2-3738-40b7-9592-31c83a22156b/man-utd-champions-2000-2001.jpg');
}
/* 12 - 2001-02 */
#section-twelve {
background-color: rgb(255, 255, 255);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6)),
url('https://talksport.com/wp-content/uploads/2017/04/12._2001-02_ruud_van_nistelrooy.jpg?strip=all&w=700');
}
/* 13 - 2002-03 */
#section-thirteen {
background-color: rgb(244, 38, 48);
background-image: linear-gradient(0deg, rgba(244, 38, 48, 1), rgba(244, 38, 48, 0.7)),
url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTdqzf_1iGfwi_CdWvRGQMliVfF19HhANvT4G9_o5EP3bymNOPdevmVbH0&s=10');
}
/* 14 - 2003-04 */
#section-fourteen {
background-color: rgb(25, 25, 25);
background-image: linear-gradient(0deg, rgba(25, 25, 25, 1), rgba(25, 25, 25, 0.8)),
url('https://static0.givemesportimages.com/wordpress/wp-content/uploads/2022/01/21_09_04_798182a1c3dbfe395a281250d19d3efc_960-1.jpg?q=70&fit=crop&w=1200&h=628&dpr=1');
}
/* 15 - 2004-05 */
#section-fifteen {
background-color: rgb(61, 103, 143);
background-image: linear-gradient(0deg, rgba(61, 103, 143, 1), rgba(61, 103, 143, 0.8)),
url('https://static0.givemesportimages.com/wordpress/wp-content/uploads/2022/01/21_09_04_798182a1c3dbfe395a281250d19d3efc_960-1.jpg?q=70&fit=crop&w=1200&h=628&dpr=1');
}
/* 16 - 2005-06 */
#section-sixteen {
background-color: rgb(255, 255, 255);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6)),
url('https://www.thesun.co.uk/wp-content/uploads/2019/05/NINTCHDBPICT000001343888.jpg?strip=all&w=960');
}
/* 17 - 2006-07 (no photo yet: add , url('...') after the gradient) */
#section-seventeen {
background-color: rgb(244, 38, 48);
background-image: linear-gradient(0deg, rgba(244, 38, 48, 1), rgba(244, 38, 48, 0.8));
}
/* 18 - 2007-08 (no photo yet: add , url('...') after the gradient) */
#section-eighteen {
background-color: rgb(25, 25, 25);
background-image: linear-gradient(0deg, rgba(25, 25, 25, 1), rgba(25, 25, 25, 0.8));
}
/* 19 - 2008-09 (no photo yet: add , url('...') after the gradient) */
#section-nineteen {
background-color: rgb(61, 103, 143);
background-image: linear-gradient(0deg, rgba(61, 103, 143, 1), rgba(61, 103, 143, 0.8));
}
/* 20 - 2009-10 (no photo yet: add , url('...') after the gradient) */
#section-twenty {
background-color: rgb(255, 255, 255);
background-image: linear-gradient(0deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6));
}
/* 21 - 2010-11 (no photo yet: add , url('...') after the gradient) */
#section-twenty-one {
background-color: rgb(244, 38, 48);
background-image: linear-gradient(0deg, rgba(244, 38, 48, 1), rgba(244, 38, 48, 0.8));
}
/* 22 - 2011-12 (no photo yet: add , url('...') after the gradient) */
#section-twenty-two {
background-color: rgb(25, 25, 25);
background-image: linear-gradient(0deg, rgba(25, 25, 25, 1), rgba(25, 25, 25, 0.8));
}
/* 23 - 2012-13 (no photo yet: add , url('...') after the gradient) */
#section-twenty-three {
background-color: rgb(61, 103, 143);
background-image: linear-gradient(0deg, rgba(61, 103, 143, 1), rgba(61, 103, 143, 0.8));
}
/* ==========================================================================
9 FOOTER
========================================================================== */
footer {
position: fixed;
bottom: 10px;
left: 0;
width: 100%;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--ui-color);
font-size: 12px;
z-index: 1000; /* above the sections and the page-turn, so it never disappears while scrolling */
pointer-events: none; /* the strip never blocks clicks on things behind it... */
transition: color 0.4s ease;
}
footer a {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
pointer-events: auto; /* ...only the MadeByDale link is clickable */
}
footer a:hover {
opacity: 0.8;
}
/* "Dale" in the footer link (its underline is gold too) */
footer .dale {
color: #F4B954;
text-decoration: underline;
text-decoration-color: #F4B954;
}
/* ==========================================================================
10 PHONE-ONLY PIECES (hidden on desktop)
========================================================================== */
#menu-toggle,
.txt-mobile,
.read-more {
display: none;
}
/* ==========================================================================
11 PHONE LAYOUT - screens up to 700px wide.
Order, top to bottom: header, year, shirts (arrows either side), caption, dots,
paragraph, trophies, footer. "Swipe Up" sits at the right edge.
========================================================================== */
@media (max-width: 700px) {
:root {
--m-vh: 100vh;
--m-sec-h: 100vh; /* height of each section */
--m-bleed: 0px; /* extra height when the phone's address bar is showing (see below) */
/* Space kept free at the bottom of each section for the trophies and footer */
--m-pad: clamp(52px, 9vh, 90px);
/* Width of the shirts: up to 70% of the screen, limited by the screen height */
--m-slider: clamp(110px, 30vh, 70vw);
/* Paragraph: width, text size, and how many lines show before "Read more" */
--m-text-w: min(86vw, 360px);
--m-desc-font: clamp(0.7rem, 1.5vh, 0.82rem);
--m-lines: 6; /* default; smaller phones get fewer (js/script.js also sets this from the small screen height) */
/* Vertical layout. The shirts + caption + dots + paragraph block is centred in the space
between the year heading and the trophies, so these sizes are listed here. */
--m-icon: 52.5px; /* size of the crest and of the menu icon (30px x 1.75) */
--m-edge: 12px; /* space above and to the left of the crest, and above and to the right of the menu icon */
--m-hdr-mid: calc(var(--m-edge) + var(--m-icon) / 2); /* height of the middle of the header row (crest, logos, menu icon) */
/* Where the header ends as the eye sees it: between the bottom of the small logos and the
bottom of the crest / menu icon. The year heading is centred from here. */
--m-hdr: calc(var(--m-hdr-mid) + (var(--m-icon) / 2 + 15px) / 2);
--m-h2: 40px; /* height of the year heading */
--m-h3: 24px; /* height of the season title under it */
--m-cap: 46px; /* room for the caption under the shirt (includes the gap between shirt and caption) */
--m-dots: 22px; /* room for the three dots under the caption */
--m-trophy: clamp(50px, 8.1vh, 72px); /* height of the biggest trophy (the Premier League one); the others are scaled from it. Make these numbers smaller/bigger to resize all trophies. */
--m-readmore: 24px; /* height of the Read more link */
--m-area-top: var(--m-hdr); /* bottom of the header row */
--m-area-bottom: calc(var(--m-vh) - var(--m-pad) - var(--m-trophy)); /* top of the trophies */
--m-group: calc(var(--m-h2) + var(--m-h3) + var(--m-slider) + var(--m-cap) + var(--m-dots)
+ var(--m-lines) * var(--m-desc-font) * 1.4 + var(--m-readmore));
/* Four equal gaps: header -> year, year -> shirt, dots -> paragraph, Read more -> trophies */
--m-shift: max(8px, calc((var(--m-area-bottom) - var(--m-area-top) - var(--m-group)) / 4));
/* Top of the shirts (the arrows beside them use this) */
--m-kit-top: calc(var(--m-area-top) + 2 * var(--m-shift) + var(--m-h2) + var(--m-h3));
/* Where the Read more panel sits: centred between the year heading and the trophies */
--m-panel-top: calc(var(--m-area-top) + var(--m-shift) + var(--m-h2) + var(--m-h3));
/* The arrows beside the shirts use this too */
--slider-width: var(--m-slider);
}
/* Shorter phones show fewer lines (fallback; the script sets the same thing from the small height) */
@media (max-height: 699px) {
:root { --m-lines: 5; }
}
@media (max-height: 619px) {
:root { --m-lines: 4; }
}
/* Phone address bar: everything is laid out for the SMALL screen height (address bar showing),
so nothing resizes when the bar slides away. The section itself is the LARGE height, so
when the bar hides there is only extra background at the bottom, never a gap. */
@supports (height: 100svh) {
:root {
--m-vh: 100svh;
--m-sec-h: 100lvh;
--m-bleed: calc(100lvh - 100svh);
--m-pad: clamp(52px, 9svh, 90px);
--m-slider: clamp(110px, 30svh, 70vw);
--m-desc-font: clamp(0.7rem, 1.5svh, 0.82rem);
--m-trophy: clamp(50px, 8.1svh, 72px);
}
}
/* --- Header: crest on the left, four sponsor logos, menu icon on the right --- */
.site-title {
display: none;
}
/* Crest: 75% bigger than before (30px -> 52.5px) */
#icon {
top: var(--m-edge);
left: var(--m-edge);
width: var(--m-icon);
height: var(--m-icon);
}
/* The four logos keep their 30px size; they sit in a row centred on the page, and on the
same centre line as the crest and the menu icon */
#old, #umbro, #nike, #adidas {
top: calc(var(--m-hdr-mid) - 15px);
right: auto;
width: 30px;
height: 30px;
}
#old { left: calc(50% - 81px); }
#umbro { left: calc(50% - 37px); }
#nike { left: calc(50% + 7px); }
#adidas { left: calc(50% + 51px); }
/* --- Menu icon (three bars) --- */
#menu-toggle {
display: flex;
flex-direction: column;
justify-content: center;
gap: 7px;
position: fixed;
top: var(--m-edge);
right: var(--m-edge);
width: var(--m-icon);
height: var(--m-icon);
padding: 0 6px;
background: none;
border: none;
cursor: pointer;
z-index: 1250;
}
#menu-toggle span {
display: block;
width: 100%;
height: 3px;
border-radius: 2px;
background-color: var(--ui-color);
transition: background-color 0.4s ease;
}
/* --- Year list becomes a drop-down under the menu icon --- */
nav {
display: none;
flex-direction: column;
justify-content: flex-start; /* a long list starts at the top and scrolls, instead of being cut off at both ends */
align-items: stretch;
/* the panel hangs straight under the menu icon, tucked inside the screen edge */
top: calc(var(--m-edge) + var(--m-icon) + 6px);
right: 8px;
padding: 10px 6px;
background: rgba(20, 20, 20, 0.94);
border-radius: 12px;
max-height: calc(var(--m-vh) - var(--m-edge) - var(--m-icon) - 26px);
overflow-y: auto;
z-index: 1300;
}
nav.open {
display: flex;
}
nav ul {
margin: 0;
padding: 0;
}
/* The panel is always dark, so its links are always white */
nav a,
nav a:hover,
nav a.active {
color: #ffffff;
}
nav a {
display: block;
min-width: 4.8em;
padding: 4px 22px;
text-align: center;
}
/* The year on screen is shown in the same gold as the trophies */
nav a.active {
color: var(--gold);
}
/* --- Sections stack vertically and everything is centred --- */
section {
height: var(--m-sec-h);
display: flex;
flex-direction: column;
align-items: center;
padding: var(--m-hdr) 0 calc(var(--m-pad) + var(--m-bleed));
}
/* Year heading: centred between the header row and the shirts */
h1:where(.year-heading) {
position: static;
transform: none;
width: 100%;
height: var(--m-h2);
line-height: var(--m-h2);
margin: auto 0 0;
font-size: 2.4rem;
flex: none;
}
/* Season title: straight under the year */
h2:where(.season-title) {
position: static;
transform: none;
width: 100%;
height: var(--m-h3);
line-height: var(--m-h3);
margin: 0;
font-size: clamp(0.85rem, 4.2vw, 1.3rem); /* long season titles shrink to stay on one line */
white-space: nowrap;
flex: none;
}
/* The two desktop columns become one centred stack */
.left-column,
.right-column {
float: none;
width: 100%;
height: auto;
overflow: visible;
justify-content: flex-start;
flex: none;
margin-top: auto;
}
/* Shirts: smaller, centred. The caption sits under the shirt and the dots under the caption. */
.slider-wrapper {
width: var(--m-slider);
margin: 0 auto;
padding-bottom: var(--m-dots);
}
.slider {
height: calc(var(--m-slider) + var(--m-cap));
}
.figure {
flex: 0 0 100%;
min-width: 0;
margin: 0; /* remove the browser's default margin around each figure */
align-content: flex-start; /* shirt sits at the top, caption underneath */
}
.slider img {
width: 100%;
height: var(--m-slider);
}
.figcaption-1,
.figcaption-2,
.figcaption-3 {
padding: 0.4rem;
font-size: 0.8rem;
}
.slider-nav {
bottom: 0;
}
/* Arrows beside the shirts: centred in the space either side, level with the shirt */
.kit-arrow {
--kit-arrow-size: 32px;
top: calc(var(--m-kit-top) + var(--m-slider) / 2);
}
.kit-left {
left: calc((100% - var(--m-slider)) / 4 - var(--kit-arrow-size) / 2);
}
.kit-right {
left: calc(100% - (100% - var(--m-slider)) / 4 - var(--kit-arrow-size) / 2);
}
/* Paragraph: centred under the shirts, smaller, centred text.
Only the first few lines show; "Read more" opens the whole paragraph. */
.description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: var(--m-lines);
line-clamp: var(--m-lines);
overflow: hidden;
width: 100%;
margin: 0;
text-align: center;
font-size: var(--m-desc-font);
line-height: 1.4;
flex: none;
}
.read-more {
display: block;
flex: none;
margin: 0;
padding: 5px 30px;
background: none;
border: none;
color: var(--ui-color);
font: inherit;
font-size: 0.74rem;
letter-spacing: 0.5px;
text-decoration: underline;
cursor: pointer;
transition: color 0.4s ease;
}
/* Paragraph and Read more button sit together */
.desc-wrap {
display: flex;
flex-direction: column;
align-items: center;
flex: none;
margin: auto 0; /* equal space above (to the dots) and below (to the trophies) */
width: var(--m-text-w);
padding: 10px 12px 4px;
background-color: rgba(0, 0, 0, 0.5); /* same box as the Home Kit caption */
border-radius: 10px;
}
/* Read more sits inside the dark box, so it stays white (dark again inside the white open panel) */
.read-more {
color: white;
}
/* "Read more" pressed: paragraph and button become one panel that fits the text,
centred in the space between the year heading and the trophies */
section.text-open .desc-wrap {
position: absolute;
left: 50%;
top: calc((var(--m-panel-top) + var(--m-area-bottom)) / 2);
transform: translate(-50%, -50%);
width: min(90vw, 380px);
max-height: calc(var(--m-area-bottom) - var(--m-panel-top) - 16px);
overflow-y: auto;
padding: 20px 30px 8px;
background: rgba(0, 0, 0, 0.5); /* same box as the Home Kit caption (was 0.84, a darker, more solid panel) */
border-radius: 14px;
z-index: 1100;
margin: 0;
}
section.text-open .description {
display: block;
-webkit-line-clamp: none;
line-clamp: none;
overflow: visible;
width: 100%;
margin: 0;
font-size: clamp(0.68rem, 1.55vh, 0.85rem);
line-height: 1.5;
}
/* Read less: same text size as the paragraph, with padding around it */
section.text-open .read-more {
padding: 14px 28px 10px;
font-size: clamp(0.68rem, 1.55vh, 0.85rem);
}
/* The five stats: only inside the open panel (script.js moves them there), side by side */
section.text-open .season-stats {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
margin: 12px 0 0;
padding: 8px 0;
}
section.text-open .stat {
flex: 1 1 40%;
justify-content: center;
gap: 6px;
min-width: 0;
}
/* Five stats: two to a row, and the last (biggest win) has a row to itself */
section.text-open .stat-win {
flex: 1 1 100%;
}
section.text-open .stat-icon {
width: 28px;
height: 24px;
}
section.text-open .stat-name {
overflow: visible;
font-size: 0.72rem;
line-height: 1.2;
text-overflow: clip;
white-space: normal; /* a long name (or two names) wraps onto a second line instead of being cut off */
overflow-wrap: anywhere;
}
section.text-open .stat-value {
font-size: 0.68rem;
}
/* The crest sits at the top of the open panel, with space above and below it */
section.text-open .desc-wrap::before {
content: "";
display: block;
flex: none;
width: clamp(28px, 5.2vh, 44px);
height: clamp(28px, 5.2vh, 44px);
margin: 0 auto clamp(8px, 1.6vh, 14px);
background: url('../Images/Manchester_United_FC_crest.svg.png') center / contain no-repeat;
}
/* White sections: the open panel is the same box as the Home Kit caption, so its text stays white */
section[data-theme="light"].text-open .desc-wrap {
background: rgba(0, 0, 0, 0.5);
}
section[data-theme="light"].text-open .stat {
color: #ffffff;
}
/* Dark sections: the open Read more panel is 50% white with black text (the Home Kit caption and the paragraph
box are in block 18, because they are the same on desktop). The labels and icons inside it are a deep
gold, because the normal gold is too pale on the light panel. */
section[data-theme="dark"].text-open .desc-wrap {
background: rgba(255, 255, 255, 0.5);
}
section[data-theme="dark"].text-open .stat {
color: #000000;
}
section[data-theme="dark"].text-open .stat-value,
section[data-theme="dark"].text-open .stat-icon {
color: #332800;
}
/* The paragraph leaves the layout while the panel is open, so the year heading and the (hidden)
shirt block are pinned to the same spots with fixed spacing and nothing jumps. */
section.text-open h1:where(.year-heading),
section.text-open .left-column,
section.text-open .right-column {
margin-top: var(--m-shift);
}
section.text-open .trophies {
margin-top: auto;
}
/* While the panel is open, hide the shirts and their arrows so nothing shows through it
(visibility keeps the space, so the layout does not jump) */
section.text-open .slider-wrapper,
section.text-open .kit-arrow {
visibility: hidden;
}
/* Trophies: small, in one centred row at the bottom.
!important is needed to beat any position set on a single trophy. */
.trophies {
display: flex;
justify-content: center;
align-items: flex-end; /* all trophies stand on the same line */
gap: 12px;
margin-top: 0;
flex: none;
height: var(--m-trophy); /* same row height in every section, so everything lines up */
}
/* Trophies keep their real size difference: --r is each trophy's size compared with the
biggest one (the HTML sizes are 105 for the Premier League trophy and 75 for the rest). */
.trophies img {
--r: 0.714;
position: static !important;
height: calc(var(--m-trophy) * (var(--r) + var(--adj-r, 0)) * var(--k, 1));
width: auto;
}
.trophies img[width="105"] { --r: 1; }
/* --- Removed on phones --- */
#mouse-scroll,
.scroll-horizontal,
.guide-arrow {
display: none;
}
/* "Swipe Up" is hidden while a Read more panel is open */
body.panel-open #scroll-guide {
visibility: hidden;
}
/* --- "Scroll-Vertically" becomes "Swipe Up", at the right edge --- */
.txt-desktop {
display: none;
}
.txt-mobile {
display: inline;
}
/* "Swipe Up" stays gold */
#slide-down {
color: var(--gold);
}
/* Standing on the same line as the trophies, and on the same centre line as the menu icon
(the menu icon's edge gap, then half its width, in from the right) */
#scroll-guide {
left: calc(100% - var(--m-edge) - var(--m-icon) / 2);
top: calc(var(--m-vh) - var(--m-pad)); /* the bottom of the block sits on the trophies' line */
transform: translate(-50%, -100%);
}
/* --- Footer: smaller, tucked into the bottom --- */
footer {
bottom: 25px;
height: 2rem;
font-size: 10px;
}
footer p {
margin: 0;
}
}
/* ==========================================================================
12 DESKTOP LAYOUT - screens wider than 700px (700.02px so no width falls between
the two layouts when a browser is zoomed).
Year at the top, shirts in one column, paragraph + trophies in the other, both centred
in the space between the year and the bottom bar. Phones are not affected by this block.
========================================================================== */
@media (min-width: 700.02px) {
:root {
/* Space between the top of the page and the shirt/text area (year heading) */
--band-top: calc(10vh + 90px);
/* Space kept free at the bottom for the Scroll-Horizontally bar and footer */
--band-bottom: 113px;
/* The shirt is as wide as 24rem, half the page, or whatever height allows (so it never
runs into the year or the bottom bar on short screens) */
--slider-width: max(180px, min(24rem, calc(50vw - 125px - 4rem), calc(100vh - var(--band-top) - var(--band-bottom) - 80px)));
/* Height of the middle of the shirt: the Scroll-Vertically text and the side arrows
line up with it */
--guide-top: calc(var(--band-top) + (100vh - var(--band-top) - var(--band-bottom)) / 2 - 40px);
/* Height of the middle of the "Home Kit" caption: the trophies line up with it */
--cap-mid: calc(var(--band-top) + (100vh - var(--band-top) - var(--band-bottom)) / 2 + var(--slider-width) / 2 - 9px);
}
/* Shirt column: the shirt block is centred between the year and the bottom bar */
.left-column,
.right-column {
padding: var(--band-top) 0 var(--band-bottom);
}
/* Each column is the space between the side containers (Scroll-Vertically on the left,
year list on the right) and the centre divider; the shirt is centred in that space. */
.left-column {
padding-left: 95px;
}
.right-column {
padding-right: 125px;
}
/* Arrows beside the shirts (raised 10px) and the Scroll-Horizontally bar share the
middle of the shirt column */
.kit-arrow {
--slider-centre: calc(25% + 47.5px);
transform: translateY(calc(-50% - 10px));
}
.right-column ~ .kit-arrow {
--slider-centre: calc(75% - 62.5px);
}
.scroll-horizontal.h-left {
left: calc(25% + 47.5px);
}
.scroll-horizontal.h-right {
left: calc(75% - 62.5px);
}
.container {
padding: 0 2rem;
}
.slider-wrapper {
width: var(--slider-width);
padding-bottom: 28px;
}
.slider {
height: calc(var(--slider-width) + 52px);
}
.figure {
flex: 0 0 100%;
min-width: 0;
margin: 0;
align-content: flex-start;
}
.slider img {
width: 100%;
height: var(--slider-width);
}
.slider-nav {
bottom: 10px;
}
/* Paragraph + trophies: one block, centred in the other column.
Shirts on the left = text on the right, and the other way round. */
.text-col {
position: absolute;
top: var(--band-top);
/* the paragraph is centred in the space above the trophy row */
bottom: calc(100vh - var(--cap-mid) + 70px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 1000;
container-type: inline-size; /* lets the trophies and stats measure the box (cqw, block below) */
}
.left-column ~ .text-col {
left: 50%;
right: 125px; /* keeps clear of the year list */
}
.right-column ~ .text-col {
left: 95px; /* keeps clear of the Scroll-Vertically column */
right: 50%;
}
.text-col > .desc-wrap,
.text-col > .trophies {
display: block;
width: min(590px, calc(100% - 2rem));
}
/* The paragraph is centred on the same line as the shirt arrows (--guide-top) */
.text-col > .desc-wrap {
position: absolute;
top: calc(var(--guide-top) - var(--band-top));
left: calc((100% - min(590px, 100% - 2rem)) / 2);
transform: translateY(-50%);
padding: 20px;
background-color: rgba(0, 0, 0, 0.5); /* same box as the Home Kit caption */
border-radius: 10px;
}
/* The year list is centred on that line too */
nav {
top: var(--guide-top);
transform: translateY(calc(-50% + 2.5px)); /* the last year has 5px of space under it */
}
/* Short windows: the list (home + 23 seasons) is packed a little tighter so it stays clear of the logos */
@media (max-height: 740px) {
nav li {
margin-bottom: 2px;
}
}
.text-col p {
margin: 0;
}
/* Trophies: one row under the paragraph, starting at its left edge, identical gaps between
them, centred on the same height as the "Home Kit" caption.
The whole row (trophies, gaps, stats, icons and their text) is drawn for a paragraph box
590px wide and shrinks with the box when the window is made narrower:
--box the width of the paragraph box (the same sum as .desc-wrap uses)
--u one "design pixel" at the box's current size = --box / 590
Every size in the row below is written as (number) * var(--u). */
.text-col > .trophies {
--box: min(590px, 100cqw - 2rem);
--u: calc(var(--box) / 590);
position: absolute;
top: calc(var(--cap-mid) - var(--band-top));
left: calc((100% - min(590px, 100% - 2rem)) / 2);
transform: translateY(-50%);
display: flex;
align-items: flex-end; /* all trophies stand on the same line */
justify-content: flex-start;
gap: calc(20 * var(--u));
margin: 0;
}
/* Trophy size: each keeps its own proportions (the images are cropped to the edge).
--trophy-scale shrinks or grows all of them together (0.85 = 85% of the original size).
--h is the height in design pixels; * var(--u) makes it follow the paragraph box. */
.trophies > img {
--trophy-scale: 0.85;
--h: 75;
position: static !important;
flex: none;
width: auto;
height: calc((var(--h) * var(--trophy-scale) + var(--adj, 0)) * var(--k, 1) * var(--u));
}
.trophies > img[width="105"] { --h: 105; }
/* Full height of the trophy row, with a white line down its left edge (dark on the white page).
The stats are five cells with lines between them, like a stat table:
Top scorer |
------------| Matt Busby Award
Top assists |
------------|------------------
Captain | Biggest win
The left column has three cells and the right column has two, so the grid is six rows tall: each left cell
takes two rows and each right cell takes three, which staggers the lines between them. The stats sit at the
bottom, level with the trophies. --stat-line is the colour of the lines between the cells. */
.season-stats {
--stat-line: var(--ui-color);
--stat-line: color-mix(in srgb, var(--ui-color) 55%, transparent);
--cell-x: calc(14 * var(--u)); /* space between a cell's text and the lines either side of it */
--cell-y: calc(5 * var(--u)); /* space between a cell's text and the line above or below it */
display: grid;
grid-template-rows: repeat(6, auto);
grid-template-columns: minmax(0, auto) minmax(0, auto);
align-content: end; /* the stats sit at the bottom, level with the trophies */
align-self: stretch;
column-gap: 0;
row-gap: 0;
min-width: 0;
padding-left: calc(20 * var(--u));
border-left: 1px solid var(--ui-color);
transition: border-color 0.4s ease;
}
/* Every cell fades its lines with the page colour */
.season-stats .stat {
transition: color 0.4s ease, border-color 0.4s ease;
}
/* Left column: top scorer, top assists, captain (the line under a cell separates it from the next) */
.season-stats .stat:nth-child(1) {
grid-column: 1;
grid-row: 1 / span 2;
padding: 0 var(--cell-x) var(--cell-y) 0;
border-bottom: 1px solid var(--stat-line);
}
.season-stats .stat:nth-child(2) {
grid-column: 1;
grid-row: 3 / span 2;
padding: var(--cell-y) var(--cell-x) var(--cell-y) 0;
border-bottom: 1px solid var(--stat-line);
}
.season-stats .stat:nth-child(3) {
grid-column: 1;
grid-row: 5 / span 2;
padding: var(--cell-y) var(--cell-x) 0 0;
}
/* Right column: Matt Busby Award, biggest win. Each has a line down its left edge that joins up with the
other, so it runs the full height of the left column. */
.season-stats .stat-poty {
grid-column: 2;
grid-row: 1 / span 3;
padding: 0 0 var(--cell-y) var(--cell-x);
border-left: 1px solid var(--stat-line);
border-bottom: 1px solid var(--stat-line);
}
.season-stats .stat-win {
grid-column: 2;
grid-row: 4 / span 3;
padding: var(--cell-y) 0 0 var(--cell-x);
border-left: 1px solid var(--stat-line);
}
/* Five stats share the row with the trophies, so the text is a touch tighter.
Icon, gap and text sizes are in design pixels, so they shrink with the paragraph box. */
.season-stats .stat {
gap: calc(8 * var(--u));
}
.season-stats .stat-icon {
width: calc(40 * var(--u));
height: calc(32 * var(--u));
}
.season-stats .stat-name {
overflow: visible;
font-size: calc(12.8 * var(--u));
text-overflow: clip;
white-space: normal; /* if a long name ever runs out of room it wraps onto a second line instead of being cut off */
overflow-wrap: anywhere;
}
.season-stats .stat-value {
font-size: calc(12 * var(--u));
}
}
/* Narrower desktop windows: slightly smaller paragraph text so it keeps clear of the trophies */
@media (min-width: 700.02px) and (max-width: 1100px) {
.text-col p {
font-size: 0.72rem;
}
}
/* ==========================================================================
13 PAGE PEEL (js/script.js, section 10)
Every season is its own page (index.html is the home screen, then one .html file per season). Each page is one
full-screen section pinned to the screen. Scrolling, swiping, the arrow keys, the arrows beside the page and the
year list take you to the next or the previous page by PEELING the page you are on off from its bottom-right
corner, like a sticky note or a calendar page: a straight diagonal fold line sweeps across the screen with the
folded-over corner behind it, uncovering the next page underneath. js/script.js cuts the page and moves the
fold and its shadow while you scroll or swipe. The next and the earlier page are fetched quietly and drawn
underneath this page (each in a .peel-box), so the real page is what you see when it is uncovered, and when the
peel is over the two boxes just swap places (nothing is reloaded, so nothing flashes).
How it stays smooth: every page and the folded corner each sit in a box a little bigger than the
screen (--peel-a is the extra on every side; script.js sets it). To peel, a box is cut along ONE fixed
diagonal (--peel-cut) and slid across the screen, while the page inside slides the same distance the other
way, so the page stands still and only the cut moves. Sliding is done by the graphics chip without redrawing
anything, which is why it is smooth.
Visitors who ask for less motion simply change page. To turn the peel off, delete this block and section 10
of the script.
========================================================================== */
main > section {
position: fixed;
top: 0;
left: 0;
}
/* The page does not scroll: a vertical swipe belongs to the peel (sideways swipes still move the shirts) */
html,
body {
touch-action: pan-x pinch-zoom;
}
.slider {
touch-action: pan-x;
}
#site-nav,
.about-card,
section.text-open .desc-wrap {
touch-action: pan-y;
}
/* The pages, once script.js has switched the peel on (it adds "peelable" to the page): each page sits in a box a
little bigger than the screen, with the section in the middle of it exactly where it always was. There is a box for
the page being shown ("is-current", on top) and for the pages just before and after it, which are drawn underneath
once they are ready ("is-warm") so a peel has nothing left to prepare. While a peel is running the page being
uncovered is "is-next" (just under the page) or, coming back, "is-over" (lifted over it). Only the page being
shown can be clicked. */
html.peelable .peel-box,
.peel-fold {
position: fixed;
top: calc(-1 * var(--peel-a));
left: calc(-1 * var(--peel-a));
width: calc(var(--peel-w) + 2 * var(--peel-a));
height: calc(var(--peel-h) + 2 * var(--peel-a));
}
html.peelable .peel-box {
z-index: -2;
visibility: hidden;
pointer-events: none;
will-change: transform;
}
html.peelable .peel-box > section {
position: absolute;
top: var(--peel-a);
left: var(--peel-a);
width: var(--peel-w);
will-change: transform;
}
html.peelable .peel-box.is-warm {
visibility: visible;
}
html.peelable .peel-box.is-next {
z-index: -1;
}
html.peelable .peel-box.is-over {
z-index: 2;
}
html.peelable .peel-box.is-current {
z-index: 0;
visibility: visible;
pointer-events: auto;
}
/* While a box is being peeled it is cut along the fixed diagonal */
.is-cut,
.peel-fold.is-on {
-webkit-clip-path: var(--peel-cut);
clip-path: var(--peel-cut);
}
/* A page that is opened straight from a folder (no web address) is fetched through a hidden frame (see script.js) */
.peel-loader {
display: none;
}
/* The folded-over corner (the back of the sticky note): the screen turned on its side (a "sheet" as wide as the
screen is tall), cut along the fold and slid into place by script.js. Its box-shadow, nudged down and right and
dimmed, is the thin shadow the curled corner throws on the page below. */
.peel-fold {
z-index: 3;
visibility: hidden;
pointer-events: none;
}
.peel-fold.is-on {
visibility: visible;
will-change: transform;
}
.peel-sheet {
position: absolute;
top: 0;
left: 0;
width: var(--peel-h);
height: var(--peel-w);
overflow: hidden;
}
.peel-fold.is-on .peel-sheet {
will-change: transform;
}
/* Shading on the back of the corner: darker towards the far tip */
.peel-fold-face .peel-sheet {
background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.08) 15%);
box-shadow: 3px 5px 0 rgba(0, 0, 0, 0.35);
}
/* A soft highlight just before the fold and a thin dark line on the fold itself (it is turned 45 degrees and kept
against the fold line by script.js) */
.peel-edge {
position: absolute;
top: 0;
left: 0;
transform-origin: 100% 50%;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.28) 66.7%, rgba(0, 0, 0, 0.3));
will-change: transform;
}
/* The soft shadow on the page underneath, just beyond the fold line */
.peel-shade {
position: fixed;
left: 50%;
top: 50%;
width: 170px;
height: 200vmax;
margin-top: -100vmax;
transform-origin: 0 50%;
transform: rotate(45deg);
background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.18) 35%, rgba(0, 0, 0, 0));
z-index: 3;
pointer-events: none;
visibility: hidden;
}
.peel-shade.is-on {
visibility: visible;
will-change: transform, opacity;
}
/* Never printed */
@media print {
.peel-box:not(.is-current),
.peel-fold,
.peel-shade {
display: none !important;
}
}
/* ==========================================================================
14 HOME SCREEN
The first screen: title, crest, a short description and a nudge to scroll. The scroll-mouse GIF below it is
the same one used on every screen (block 4). On phones the GIF is hidden, so a "Swipe up" hint is shown.
========================================================================== */
#section-home {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 70px 24px 170px;
background-color: rgb(244, 38, 48);
/* The photo: the red fades over it (solid at the bottom, 0.6 at the top). A smaller second number shows
more of the photo. */
background-image: linear-gradient(0deg, rgba(244, 38, 48, 1), rgba(244, 38, 48, 0.6)),
url('https://dynamic-crop-cdn.scoreplay.io/472/4786167/media_101239163_100846196_compressed.jpg?fmt=webp&f=center&w=720&h=480');
}
.home-title {
margin: 0 0 10px;
color: #ffffff;
max-width: min(900px, calc(100vw - 340px)); /* stays clear of the year list */
font-size: clamp(3rem, min(6.5vw, 10vh), 6rem);
letter-spacing: 2px;
line-height: 0.95;
text-align: center;
text-wrap: balance;
}
/* The crest sits in a round badge, like the crest on a shirt (the small crests in the header and the phone panel are left as they were) */
.home-crest {
display: block;
--crest-size: clamp(130px, 26vh, 220px);
box-sizing: border-box;
width: var(--crest-size);
height: var(--crest-size);
margin: 10px 0 24px;
padding: calc(var(--crest-size) * 0.14);
background: rgb(200, 31, 39); /* a shade darker than the red page behind it */
border-radius: 50%;
box-shadow: 0 0 0 clamp(4px, 0.9vh, 8px) rgba(255, 255, 255, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
object-fit: contain;
}
.home-intro {
width: min(640px, 100%);
margin: 0;
padding: 18px 24px;
background-color: rgba(0, 0, 0, 0.5); /* same box as the Home Kit caption */
border-radius: 10px;
color: #ffffff;
font-size: 1rem;
line-height: 1.55;
text-align: center;
}
/* "Scroll down to explore": sits just above the scroll-mouse GIF */
.home-prompt {
--prompt-gap: 24px; /* space between the text and the scroll-mouse GIF below it: raise it to lift the text */
position: absolute;
left: 50%;
bottom: calc(var(--mouse-gif-bottom) + 70px + var(--prompt-gap));
transform: translateX(-50%);
margin: 0;
color: #ffffff;
font-size: 0.8rem;
letter-spacing: 3px;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}
.home-chevron {
display: none;
}
/* Short windows: a slightly smaller crest so everything fits above the scroll prompt */
@media (min-width: 700.02px) and (max-height: 720px) {
.home-crest {
--crest-size: clamp(110px, 21vh, 220px);
}
}
/* While the home screen is showing: the small header title (the big one is on the page) and the
Scroll-Vertically guide are tucked away */
body.on-home .site-title {
opacity: 0;
}
body.on-home #scroll-guide {
visibility: hidden;
}
@keyframes home-nudge {
0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.5; }
50% { transform: translateY(8px) rotate(45deg); opacity: 1; }
}
@media (max-width: 700px) {
#section-home {
justify-content: center;
padding: calc(var(--m-hdr) + 10px) 20px calc(var(--m-pad) + var(--m-bleed) + 70px);
}
.home-title {
max-width: 100%;
/* Sized so "Manchester United" always fits on one line: two lines in all (it was three) */
font-size: clamp(2.2rem, 11vw, 3.4rem);
}
.home-crest {
--crest-size: clamp(110px, 22svh, 170px);
}
.home-intro {
width: min(86vw, 360px);
padding: 14px 16px;
font-size: 0.9rem;
line-height: 1.5;
}
.home-prompt {
bottom: calc(var(--m-pad) + var(--m-bleed) + 14px);
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.home-chevron {
display: block;
width: 12px;
height: 12px;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
transform: rotate(45deg);
animation: home-nudge 1.6s ease-in-out infinite;
}
}
@media (prefers-reduced-motion: reduce) {
.home-chevron {
animation: none;
}
}
/* ==========================================================================
15 SUPPORT BUTTON AND POP-UP
The gold button in the bottom-left corner opens the "About / support" pop-up (js/script.js, section 11).
========================================================================== */
.cta {
position: fixed;
left: 25px;
bottom: 25px;
z-index: 1150;
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 11px 18px 11px 14px;
background: var(--gold);
border: none;
border-radius: 999px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
color: #1a1a1a;
font: inherit;
font-size: 0.85rem;
font-weight: bold;
letter-spacing: 0.3px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.cta:focus-visible,
.about-donate:focus-visible,
.about-later:focus-visible,
.about-contact:focus-visible,
.about-close:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.cta svg {
width: 18px;
height: 18px;
fill: currentColor;
}
/* Narrow screens: just the heart (the words stay for screen readers) */
@media (max-width: 900px) {
.cta {
width: 44px;
height: 44px;
padding: 0;
justify-content: center;
}
.cta-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
@media (max-width: 700px) {
.cta {
left: var(--m-edge);
bottom: 52px; /* sits above the footer line, so it never covers the footer text */
}
}
.about-dialog {
width: min(560px, calc(100vw - 32px));
max-width: none;
max-height: none;
margin: auto;
padding: 0;
background: transparent;
border: none;
color: #ffffff;
font-family: var(--font-body);
overflow: visible;
}
.about-dialog::backdrop {
background: rgba(0, 0, 0, 0.7);
}
.about-dialog[open] {
animation: about-in 0.25s ease;
}
@keyframes about-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.about-dialog[open] {
animation: none;
}
}
.about-card {
position: relative;
max-height: calc(100vh - 48px);
padding: 30px 32px 24px;
overflow-y: auto;
background: #191919;
border-top: 4px solid var(--gold);
border-radius: 14px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
line-height: 1.55;
text-align: left;
}
.about-card p {
margin: 0 0 14px;
font-size: 0.95rem;
}
.about-card .about-title {
margin: 0 0 14px;
font-family: var(--font-heading);
font-size: 2.6rem;
line-height: 1;
}
.about-card .about-heading {
margin: 20px 0 4px;
color: var(--gold);
font-family: var(--font-heading);
font-size: 1.5rem;
letter-spacing: 1px;
line-height: 1;
}
.about-close {
position: absolute;
top: 10px;
right: 12px;
width: 36px;
height: 36px;
padding: 0;
background: none;
border: none;
color: #ffffff;
font-size: 1.8rem;
line-height: 1;
cursor: pointer;
opacity: 0.7;
}
.about-close:hover {
opacity: 1;
}
.about-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
margin: 22px 0 18px;
}
.about-donate {
padding: 12px 24px;
background: var(--gold);
border-radius: 999px;
color: #1a1a1a;
font-weight: bold;
text-decoration: none;
}
.about-donate:hover {
opacity: 0.9;
}
.about-later {
padding: 8px 4px;
background: none;
border: none;
color: #ffffff;
font: inherit;
text-decoration: underline;
cursor: pointer;
}
/* "Work together" in the pop-up: the email address */
.about-contact {
color: var(--gold);
font-weight: bold;
text-decoration: underline;
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
.about-contact:hover {
opacity: 0.85;
}
.about-card .about-small {
margin: 0;
padding-top: 14px;
border-top: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.6);
font-size: 0.72rem;
line-height: 1.5;
}
/* "Make a donation" shows the Ko-fi donation panel inside the pop-up (script, block 11). While it is showing, the rest
of the pop-up steps aside; the X stays. */
.about-donate-panel {
display: none;
}
.about-card.is-donating > :not(.about-donate-panel):not(.about-close) {
display: none;
}
.about-card.is-donating .about-donate-panel {
display: block;
}
.about-donate-back {
margin: 0 0 6px;
padding: 6px 2px;
background: none;
border: none;
color: #ffffff;
font: inherit;
text-decoration: underline;
cursor: pointer;
}
.about-donate-back:focus-visible,
.about-donate-newtab:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.about-card .about-donate-title {
margin-bottom: 14px;
font-size: 2.1rem;
}
.about-donate-frame {
position: relative;
min-height: 200px;
overflow: hidden;
background: #f9f9f9;
border-radius: 10px;
}
.about-donate-frame iframe {
display: block;
width: 100%;
height: 560px;
height: clamp(360px, calc(100vh - 260px), 712px);
border: none;
}
.about-card .about-donate-loading {
position: absolute;
inset: 0;
display: grid;
margin: 0;
place-items: center;
color: #555555;
}
.about-donate-panel.is-loaded .about-donate-loading {
display: none;
}
.about-card .about-donate-help {
margin: 12px 0 0;
color: rgba(255, 255, 255, 0.75);
font-size: 0.8rem;
}
.about-donate-newtab {
color: var(--gold);
}
/* Shown only if the panel is slow to load */
.about-donate-slow {
display: none;
}
.about-donate-panel.is-slow:not(.is-loaded) .about-donate-slow {
display: inline;
color: #ffffff;
font-weight: bold;
}
/* The page behind the pop-up stays put */
html:has(dialog[open]) {
overflow: hidden;
}
/* ==========================================================================
16 3D KITS AND TROPHIES, GIANT YEARS AND THE KIT TAG
Ideas borrowed from the "Red Thread" page: the kits and trophies lit so they look solid, the years as huge type
behind them, and a small line naming the kit maker and the shirt sponsor.
Tuning: numbers behind the kit .yr-solid / .yr-outline (fill-opacity, stroke-opacity) and .year-bg (width)
how solid the kits look the numbers inside the #kit-3d filters in index.html (see the note above them)
how the trophies look the numbers inside the #trophy-3d filter in index.html (see the note above it)
To turn it off: delete the "3D kits" and trophy rules in this block (the .slider img and .trophies > img rules), the two