/* ============================================================ Y TYMBL — scroll story. Ink band end to end; each chapter is a full viewport: photograph above, words below on mobile, side by side on wide screens. Reveals ride on .seen, added by story.js — with no JS everything is simply visible. ============================================================ */ :root { --ink: #111111; --paper: #faf8f2; --accent: #d0a800; --measure: 34rem; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink); color: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.6; } img { display: block; max-width: 100%; } a { color: inherit; } .story-top { position: fixed; top: 0; left: 0; right: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; background: linear-gradient(to bottom, rgba(17,17,17,.92), rgba(17,17,17,0)); font-size: .85rem; font-weight: 700; } .story-top a { text-decoration: none; } .story-top-cta { color: var(--accent); } /* timeline rail */ .rail { position: fixed; left: .65rem; top: 50%; z-index: 9; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; font-size: .72rem; font-weight: 800; letter-spacing: .22em; color: var(--accent); opacity: .85; } @media (max-width: 700px) { .rail { display: none; } } .kicker { font-size: .74rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; opacity: .7; margin: 0 0 1rem; } /* ---- chapters ---- */ .ch { min-height: 100svh; display: grid; align-content: center; justify-items: center; gap: 1.4rem; padding: 4.5rem 1.25rem 3.5rem; } .ch-media { margin: 0; width: min(100%, 46rem); } .ch-media img { width: 100%; height: auto; filter: grayscale(.15) sepia(.12) contrast(1.04); border: 1px solid rgba(250,248,242,.18); } /* documents (the reward poster) read better narrow */ .ch-media-doc { width: min(70%, 22rem); } /* the founders photo is small — frame it like the relic it is rather than stretching it soft */ .ch-media-frame { width: min(88%, 30rem); padding: 10px; background: var(--paper); } .ch-media-frame img { border: none; filter: grayscale(.1) sepia(.15); } .ch-copy { max-width: var(--measure); } .ch-year { margin: 0 0 .4rem; font-size: .78rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); } .ch h1 { margin: .5rem 0 1rem; font-size: clamp(4.5rem, 16vw, 9rem); line-height: .85; letter-spacing: -.04em; text-transform: uppercase; font-weight: 900; } .ch h2 { margin: 0 0 .8rem; font-size: clamp(1.7rem, 4.6vw, 2.6rem); line-height: 1.04; letter-spacing: -.015em; font-weight: 900; text-transform: uppercase; text-wrap: balance; } .ch p { margin: 0 0 .8rem; font-size: 1.06rem; } .ch-note { font-weight: 700; color: var(--accent); } .ch-sub { font-size: 1.2rem; max-width: 30rem; } .ch-scroll { margin-top: 2.5rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .75rem; opacity: .7; } .ch-arrow { display: inline-block; margin-left: .5rem; animation: bob 1.6s ease-in-out infinite; } @keyframes bob { 50% { transform: translateY(6px); } } .ch-title { text-align: center; } /* wide screens: photo and words side by side, alternating */ @media (min-width: 960px) { .ch { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 5vw, 5rem); max-width: 78rem; margin-inline: auto; } .ch-title, .ch-now { grid-template-columns: 1fr; } .ch:nth-of-type(even) .ch-media { order: 2; } .ch-media-doc { width: min(100%, 24rem); justify-self: center; } } /* reveals — gated on html.js (set inline in ) so that with JS disabled nothing is ever hidden waiting for a reveal that can't come */ @media (prefers-reduced-motion: no-preference) { .js .ch-media, .js .ch-copy { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s ease; } .js .ch-copy { transition-delay: .15s; } .seen .ch-media, .seen .ch-copy { opacity: 1; transform: none; } /* slow breath on the photographs once revealed */ .seen .ch-media img { animation: breathe 18s ease-in-out infinite alternate; } @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.045); } } .ch-media { overflow: hidden; } } /* the closing chapter */ .ch-now { text-align: center; background: radial-gradient(ellipse at 50% 120%, rgba(208,168,0,.16), transparent 60%); } .ch-copy-center { max-width: 40rem; } .ch-big { font-size: clamp(1.3rem, 3.4vw, 1.8rem); font-weight: 900; line-height: 1.25; margin: 1.6rem 0; text-wrap: balance; } .ch-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 1.8rem; } .btn-gold, .btn-line { display: inline-block; padding: 1rem 1.6rem; font-weight: 800; text-decoration: none; font-size: 1.02rem; } .btn-gold { background: var(--accent); color: var(--ink); } .btn-line { border: 2px solid var(--paper); } .story-foot { padding: 2.5rem 1.25rem 3rem; text-align: center; font-size: .85rem; opacity: .75; max-width: 44rem; margin-inline: auto; } /* ============================================================ CINEMATIC LAYER — only active when story.js confirms GSAP loaded and the visitor is happy with motion (body.gsap-on). Everything below is invisible/inert otherwise, so the plain fade-reveal page above stays exactly as it was. ============================================================ */ /* decorations hidden until the cinematic mode switches on */ .deco { display: none; } .gsap-on .deco { display: block; } /* GSAP replaces the CSS reveals and the old timeline rail */ .gsap-on .rail { display: none; } .gsap-on .ch-media, .gsap-on .ch-copy { opacity: 1; transform: none; transition: none; } .gsap-on .seen .ch-media img, .gsap-on .ch-media img { animation: none; } .gsap-on .ch-media { overflow: hidden; } /* clips the scrubbed photo zoom */ .gsap-on .ch { position: relative; } /* anchors set pieces per chapter */ body { overflow-x: clip; } /* birds fly in from off-canvas */ /* ---- the coal seam: one gold line drawn down the whole page ---- */ .seam { position: absolute; top: 0; left: 0; z-index: 8; pointer-events: none; overflow: visible; } .seam-path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(208, 168, 0, .55)); transition: stroke .8s ease, filter .8s ease; } .seam.seam-hot .seam-path { stroke: #ffce1f; filter: drop-shadow(0 0 11px rgba(255, 206, 31, .85)); } .seam-station circle { fill: #33301f; stroke: rgba(208, 168, 0, .55); stroke-width: 1.5; transition: fill .5s ease, filter .5s ease; } .seam-station text { fill: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .18em; text-anchor: end; /* years sit left of the line, clear of the copy */ opacity: .3; transition: opacity .5s ease; } .seam-station.lit circle { fill: var(--accent); filter: drop-shadow(0 0 6px rgba(208, 168, 0, .9)); } .seam-station.lit text { opacity: 1; } @media (max-width: 700px) { .seam-station text { display: none; } } /* ---- hero: coal-dust canvas behind the title, magpie on top of it ---- */ .ch-title { position: relative; overflow: hidden; } #dustCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .ch-title .ch-inner { position: relative; z-index: 1; } /* ---- magpies (positions are set by story.js; sizes live here) ---- */ /* a faint paper rim + gold ambient glow so the black bird reads on ink */ .magpie { aspect-ratio: 14 / 9; filter: drop-shadow(0 0 1px rgba(250, 248, 242, .75)) drop-shadow(0 0 1px rgba(250, 248, 242, .45)) drop-shadow(0 0 14px rgba(208, 168, 0, .4)); } .hero-magpie { position: absolute; z-index: 2; left: 0; top: 0; width: clamp(64px, 9vw, 104px); opacity: 0; /* faded in when the glide starts */ } .magpie-flight { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: clip; } .magpie-flight .magpie { position: absolute; left: 0; } .magpie-a { top: 14%; width: clamp(58px, 8vw, 96px); } .magpie-b { top: 30%; width: clamp(44px, 6vw, 72px); } .finale-magpie { position: absolute; z-index: 2; left: 0; top: 0; width: clamp(56px, 8vw, 88px); opacity: 0; } /* each hero/finale magpie holds both poses; .perched swaps them */ .magpie .use-perch { display: none; } .magpie.perched .use-fly { display: none; } .magpie.perched .use-perch { display: inline; } /* ---- pit-head winding gear beside the 1887 photo ---- */ .pit-wheel { position: absolute; z-index: 2; left: 0; top: 0; width: clamp(84px, 11vw, 148px); opacity: .92; filter: drop-shadow(0 0 4px rgba(208, 168, 0, .35)); } /* ---- the canary cage, hung from the top of the viewport ---- */ .canary { position: fixed; z-index: 9; top: -6px; left: min(72%, calc(100% - 110px)); width: clamp(52px, 7vw, 78px); pointer-events: none; opacity: 0; transition: opacity 1.2s ease, transform 2s ease-out; transform-origin: 50% 6px; /* swings from the hook */ } .gsap-on .canary.show { opacity: 1; } .canary.swing { animation: cage-swing 2.4s ease-in-out infinite alternate; } .canary.still { animation: none; transform: rotate(0deg); } @keyframes cage-swing { from { transform: rotate(6.5deg); } to { transform: rotate(-6.5deg); } } /* ============================================================ CHAPTER SET PIECES — one vignette per chapter, all scrubbed by story.js. Positions that depend on the photograph are set by JS (like the pit-wheel); everything starts invisible and is revealed only by its scrubbed timeline. ============================================================ */ /* full-photo overlays that hold the impact flashes (JS sizes them) */ .set-rebecca, .set-strike { position: absolute; z-index: 2; pointer-events: none; } .rb-burst, .st-burst { position: absolute; width: clamp(44px, 6vw, 84px); aspect-ratio: 1; opacity: 0; filter: drop-shadow(0 0 6px rgba(208, 168, 0, .5)); } .rb-b1 { left: 12%; top: 14%; } .rb-b2 { left: 44%; top: 30%; } .rb-b3 { left: 22%; top: 54%; } .st-b1 { left: 16%; top: 16%; } .st-b2 { right: 16%; top: 36%; } .st-b3 { left: 34%; top: 60%; } .st-arcs { position: absolute; left: 3%; bottom: 4%; width: min(58%, 300px); } .st-arcs path, .st-arcs rect { opacity: 0; } /* the tollgate bar, straddling the photo's lower edge */ .rb-gate { position: absolute; z-index: 2; width: clamp(150px, 20vw, 240px); opacity: 0; filter: drop-shadow(0 0 4px rgba(208, 168, 0, .35)); } /* the Queen's wax seal, stamped on the reward poster's corner */ .wax-seal { position: absolute; z-index: 2; width: clamp(54px, 8vw, 92px); opacity: 0; filter: drop-shadow(0 0 6px rgba(208, 168, 0, .45)); } /* the file of redcoats marching along the chapter's foot */ .redcoat-march { position: absolute; left: 0; bottom: .9rem; z-index: 2; gap: 12px; pointer-events: none; } .gsap-on .redcoat-march { display: flex; } /* flex would beat .deco's none */ .redcoat { width: clamp(14px, 2vw, 20px); aspect-ratio: 44 / 84; } /* founders' toast: bunting above the frame, pints and sparks below */ .club-bunting { position: absolute; z-index: 2; opacity: 0; } .club-toast { position: absolute; z-index: 2; width: clamp(140px, 20vw, 230px); opacity: 0; filter: drop-shadow(0 0 5px rgba(208, 168, 0, .35)); } /* the 1906 cell bars beside the photo, helmet at their foot */ .jail-bars { position: absolute; z-index: 2; width: clamp(68px, 9vw, 118px); opacity: 0; filter: drop-shadow(0 0 4px rgba(208, 168, 0, .35)); } .jail-bars .jb-bent, .jail-bars .jb-helmet { opacity: 0; } /* the Davy lamp memorial — a quiet row along the chapter's foot */ .davy-row { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 2; gap: clamp(12px, 3vw, 30px); opacity: 0; pointer-events: none; } .gsap-on .davy-row { display: flex; } /* flex would beat .deco's none */ .davy { width: clamp(20px, 3vw, 34px); aspect-ratio: 40 / 64; filter: drop-shadow(0 0 4px rgba(208, 168, 0, .3)); } .dv-flame { filter: drop-shadow(0 0 5px rgba(255, 206, 31, .9)); } /* the grey dust that followed them home — fixed field over the viewport */ .dust2 { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; } /* washing line above the High Street photo; garments sway gently */ .wash-line { position: absolute; z-index: 2; opacity: 0; } .wl-g { animation: wl-sway 3.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; } .wash-line g:nth-of-type(2) > .wl-g { animation-delay: -1.1s; } .wash-line g:nth-of-type(3) > .wl-g { animation-delay: -2.3s; } .wash-line g:nth-of-type(4) > .wl-g { animation-delay: -.6s; } @keyframes wl-sway { from { transform: rotate(2.4deg); } to { transform: rotate(-2.4deg); } } /* the charabanc, driving along the chapter's foot */ .charabanc { position: absolute; left: 0; bottom: .6rem; z-index: 2; width: clamp(140px, 18vw, 220px); pointer-events: none; filter: drop-shadow(0 0 4px rgba(208, 168, 0, .3)); } /* the snooker shot: baize line, cue ball, black, corner pocket */ .snooker-lane { position: absolute; left: 6%; right: 6%; bottom: 1.1rem; height: 44px; z-index: 2; pointer-events: none; } .snk-line { position: absolute; left: 0; right: 0; bottom: 5px; height: 2px; background: var(--accent); box-shadow: 0 0 6px rgba(208, 168, 0, .55); transform: scaleX(0); } .snk-ball { position: absolute; bottom: 7px; width: 24px; height: 24px; } .snk-cue { left: 0; opacity: 0; } .snk-black { left: 56%; opacity: 0; } .snk-pocket { position: absolute; right: -10px; bottom: -3px; width: 26px; height: 16px; opacity: 0; } /* ============================================================ THE FUTURE SECTION — everything above the auction happened. Nothing below it has. Tone stays plain and honest: the only flourish is the gold, and the only claim is a proposal. ============================================================ */ /* ---- before / after ---- */ .ch-vision { gap: 2.2rem; } .ch-vision-intro { max-width: 42rem; } .vision-set { display: grid; gap: 1.6rem; width: min(100%, 62rem); grid-template-columns: 1fr; } @media (min-width: 900px) { .vision-set { grid-template-columns: repeat(3, 1fr); } } .ba { margin: 0; } .ba-frame { position: relative; overflow: hidden; border: 1px solid rgba(250,248,242,.18); aspect-ratio: 3 / 4; background: #000; touch-action: pan-y; /* let the page still scroll on a phone */ } .ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: none; /* vision shots stay full colour */ } /* the after image is revealed by clipping its wrapper from the left */ .ba-after-wrap { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--split, 50%)); } .ba-handle { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; margin-left: -1px; background: var(--accent); box-shadow: 0 0 10px rgba(208,168,0,.8); pointer-events: none; } .ba-handle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid var(--accent); border-radius: 50%; background: rgba(17,17,17,.72); } /* the range input IS the control: keyboard operable, screen-reader sane, sat invisibly over the frame */ .ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; } .ba-range:focus-visible ~ .ba-handle::after { outline: 3px solid var(--paper); outline-offset: 3px; } .ba figcaption { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; opacity: .65; } /* with no JS the slider cannot move, so show both pictures stacked instead */ html:not(.js) .ba-after-wrap { position: static; clip-path: none; margin-top: .5rem; } html:not(.js) .ba-frame { aspect-ratio: auto; } html:not(.js) .ba-frame img { position: static; height: auto; } html:not(.js) .ba-range, html:not(.js) .ba-handle { display: none; } .serves { list-style: none; margin: 2rem 0 0; padding: 0; width: min(100%, 62rem); display: grid; gap: 1rem; grid-template-columns: 1fr; } @media (min-width: 760px) { .serves { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .serves { grid-template-columns: repeat(3, 1fr); } } .serves li { border-top: 3px solid var(--accent); padding-top: .9rem; } .serves h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 800; } .serves p { margin: 0; font-size: .95rem; opacity: .85; } /* the auction chapter keeps the old finale glow; the real finale now carries the buttons and the seam's underline */ .ch-auction { background: radial-gradient(ellipse at 50% 120%, rgba(208,168,0,.10), transparent 60%); } /* ---- survey evidence ---- */ .stats { list-style: none; margin: 2.2rem 0 0; padding: 0; width: min(100%, 62rem); display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 860px) { .stats { grid-template-columns: repeat(3, 1fr); } } .stats li { border: 1px solid rgba(250,248,242,.16); border-top: 3px solid var(--accent); padding: 1.1rem 1rem; background: rgba(250,248,242,.03); } .stats b { display: block; font-size: clamp(2rem, 6vw, 2.9rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: var(--accent); } .stats span { display: block; margin-top: .5rem; font-size: .92rem; opacity: .85; line-height: 1.45; } .stats-note { margin-top: 1.4rem; font-size: .85rem; opacity: .7; } .stats-note a { color: var(--accent); } /* ---- what the village asked for ---- */ .wants { list-style: none; margin: 2rem 0 0; padding: 0; width: min(100%, 52rem); counter-reset: want; } .wants li { position: relative; display: flex; align-items: center; gap: .9rem; padding: .72rem .9rem; margin-bottom: .45rem; border-left: 3px solid var(--accent); overflow: hidden; } /* the bar is the data — width is the percentage itself */ .w-bar { position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: linear-gradient(to right, rgba(208,168,0,.30), rgba(208,168,0,.10)); z-index: 0; } .w-label { position: relative; z-index: 1; flex: 1; font-size: .98rem; } .wants b { position: relative; z-index: 1; font-weight: 900; color: var(--accent); font-size: 1.02rem; font-variant-numeric: tabular-nums; } /* ---- Gwyl Ty-isha ---- */ .ch-tyisha-copy { max-width: 42rem; } .tyisha-pair { display: grid; gap: 1rem; width: min(100%, 66rem); grid-template-columns: 1fr; margin-top: 1.6rem; } @media (min-width: 800px) { .tyisha-pair { grid-template-columns: 1fr 1fr; } } .tyisha-pair figure { margin: 0; overflow: hidden; border: 1px solid rgba(250,248,242,.18); } .tyisha-pair img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; } .tyisha-credit { margin-top: .7rem; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6; } /* one slider now, so give it room rather than a three-across grid */ .vision-set { grid-template-columns: 1fr !important; width: min(100%, 34rem); }