/* ============================================================================= THE GUS BAND — SITE STYLES Brand: Heritage Scarlet #BE1D2E · Royal Red #A50E0E · Sovereign Gold #F1C532 Type: Noverion Sans. Headings CAPS · sub-heads Title Case · body sentence case ============================================================================= */ /* WOFF2, WHICH IS THE SAME THREE FACES AT LESS THAN HALF THE WEIGHT — 108KB of TrueType became 48KB, on the first visit to every page. Nothing is lost: the format is the web's own, every browser this site supports has read it for the best part of a decade, and the .ttf masters are in the folder the fonts came from rather than in the site. */ @font-face{font-family:'Noverion';src:url('../fonts/NoverionMedium.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Noverion';src:url('../fonts/NoverionBold.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Noverion';src:url('../fonts/NoverionBlack.woff2') format('woff2');font-weight:900;font-display:swap} :root{ --scarlet:#BE1D2E; --royal:#A50E0E; --gold:#F1C532; --ink:#14100F; --ink-2:#241B1A; --paper:#fff; --tint:#FAF6F3; --line:#E6DDD8; --mute:#6B5F5B; --wrap:1180px; --f:'Noverion',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } *{box-sizing:border-box} /* The hidden attribute applies display:none at the lowest priority, so any later rule setting display:flex/grid would silently un-hide the element. */ [hidden]{display:none !important} html{scroll-behavior:smooth} /* Set on while the biography panel is open, so the page behind can't be scrolled under it. On the root rather than on : the root is the element that actually scrolls, and locking it leaves the scroll position alone. Locking instead is what used to throw the page back to the top every time a player was opened. */ /* THE PAGE BEHIND A PANEL, HELD STILL WITHOUT MOVING IT. overflow:hidden alone is what made clicking a player jump the page to the top. The root is the thing that scrolls; take its ability to scroll away and the browser clamps it to zero, and the backdrop is see-through enough that you watch it happen. So the body is pinned instead, at minus the distance already scrolled — which leaves it looking exactly where it was while the root has nothing left to scroll. site.js sets --page-y and --bar before adding the class. --bar is the width the scrollbar took up. A pinned body has no scrollbar, and without putting that width back as padding the whole page slides sideways by about fifteen pixels as the panel opens. */ html.dlg-open{overflow:hidden} html.dlg-open body{position:fixed;top:var(--page-y,0);left:0;right:0;width:100%; padding-right:var(--bar,0)} body{margin:0;font-family:var(--f);font-weight:500;font-size:17px;line-height:1.65; color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,h4{margin:0;line-height:1.05;font-weight:900} /* .ad-welcome-who is the name on the admin's welcome. It is listed here rather than given a heading style of its own next to it: the first version had Title Case and negative tracking, which is not how this band sets a heading, and the only reliable way to keep type in step is to have one declaration of it. */ h1,.ad-welcome-who{font-size:clamp(40px,7vw,84px);text-transform:uppercase; letter-spacing:.005em} h2{font-size:clamp(28px,4.2vw,48px);text-transform:uppercase;letter-spacing:.01em} h3{font-size:22px} p{margin:0 0 1em} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .skip{position:absolute;left:-9999px;background:var(--gold);color:var(--ink); padding:12px 18px;z-index:200;font-weight:700} .skip:focus{left:12px;top:12px} :focus-visible{outline:3px solid var(--gold);outline-offset:3px} /* ---------- type helpers ---------- */ .kicker{font-weight:700;text-transform:uppercase;letter-spacing:.18em; font-size:12px;color:var(--scarlet);margin:0 0 12px} /* The gap under a kicker has to grow with the heading beneath it. A flat 12px reads as generous under a 28px heading and cramped under a 48px one, which is why "COME AND HEAR US" looked tighter than everything else on the site. The em resolves against the heading's own size, so every kicker/heading pair now has the same optical gap with nobody tuning it page by page. */ .kicker + h1,.kicker + h2,.kicker + h3,.kicker + p{margin-top:.16em} .dark .kicker{color:var(--gold)} .lede{font-size:clamp(17px,1.9vw,21px);line-height:1.6} .txtlink{font-weight:700;font-size:14px;letter-spacing:.05em;text-decoration:none; color:var(--scarlet);border-bottom:2px solid transparent;white-space:nowrap} .txtlink:hover{border-color:var(--gold)} .dark .txtlink{color:var(--gold)} /* ---------- buttons ---------- */ /* ---- THE TRAILING LETTER-SPACE, which affects every label on this site ---- CSS puts the tracking AFTER the last letter as well as between letters, so a letter-spaced word is always carrying an invisible gap on its right. Centre that word and you centre the gap with it, which leaves the visible letters sitting half the tracking to the LEFT of true centre. Every uppercase label here is letter-spaced, so every one of them has it. The header lockup already compensates for this in script when it measures the band name. These are the CSS equivalents, and there are two, because the fix depends on how the text is aligned: CENTRED text -> text-indent equal to the tracking. The browser centres the line in the width left after the indent and then offsets it by the indent, so the line moves right by half of it — exactly the correction needed. LEFT-aligned -> take the tracking off the right padding. A shrink-to-fit chips box would otherwise look like it had more air on the right than the left, because it has. Both are written in em so they stay correct if the type size changes. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700; font-size:14px;letter-spacing:.09em;text-indent:.09em;text-transform:uppercase; text-decoration:none; padding:16px 30px;border:2px solid transparent;border-radius:0;cursor:pointer; font-family:inherit;transition:.18s} .btn-sm{padding:11px 20px;font-size:12.5px} .btn-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)} .btn-gold:hover{background:#ffdf5e;border-color:#ffdf5e} .btn-red{background:var(--scarlet);color:#fff;border-color:var(--scarlet)} .btn-red:hover{background:var(--royal);border-color:var(--royal)} /* Royal Red on Heritage Scarlet — the accent doing what it's for, sitting on the primary without competing with it. Hovers to ink rather than to a lighter red, since there is no red darker than royal to move to. */ .btn-royal{background:var(--royal);color:#fff;border-color:var(--royal)} .btn-royal:hover{background:var(--ink);border-color:var(--ink)} .btn-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.6)} .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff} .btn-outline{background:none;color:var(--ink);border-color:var(--line)} .btn-outline:hover{border-color:var(--scarlet);color:var(--scarlet)} /* ---------- header ---------- Heritage Scarlet is the primary brand colour and leads every major surface. Royal Red is the accent: gradient ends, dividing rules, hover states. Gold on Scarlet is 3.75:1 — fine for large display text, so small text (this sub-line, nav links, kickers) is white and gold does the rules. */ /* Full-width gold rule, flush to the bottom of the header. 7px rather than the original 5px — the extra weight was the part of the experiments worth keeping. Tried at 12px since; too heavy, and 7px is settled. Even padding top and bottom: the tallest thing in here is the Tickets button, and a button is a box with no overhang, so equal padding reads as equal. */ /* --hdr-h is measured and published by site.js — the real height of this bar, gold rule included. Everything that has to clear the header reads it rather than carrying its own copy of the number. 73px is only the value used before the script has run and on a page with no script at all. */ :root{--hdr-h:73px} .site{position:sticky;top:0;z-index:100;background:var(--scarlet); border-bottom:7px solid var(--gold)} /* Going down the page on a phone the header leaves; coming back up it returns. The class is put on and taken off by site.js, which only ever does so on a touch layout, never above the first screenful, and never while the menu is open. transform rather than top, so it costs no layout and cannot shift the page as it moves. */ .site{transition:transform .28s ease} .site.gone{transform:translateY(-100%)} @media(prefers-reduced-motion:reduce){ /* Asked for less movement, so it does not slide — it is simply there or not, which is still the behaviour, without the travel. */ .site{transition:none} } .hdr{display:flex;align-items:center;gap:24px;padding:11px 24px} .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;flex:0 0 auto} /* LOGO VARIANTS — gus-logo.png is the FLAT mark, for small sizes. The shadowed mark (gus-logo-shadow.png) is for large reproductions; below roughly 120px the offset shadow closes up and reads as dirt rather than depth. Use .logo-lg on any logo rendered at 120px or more. */ .brand img{height:44px;width:auto} .logo-lg{content:url('../img/gus-logo-shadow.png')} /* Nothing carries .logo-lg at the moment — the footer logo went back to 54px. The rule stays because it is the brand rule, not a leftover: the day anything is rendered at 120px or more it needs this, and the rule is where the instruction above it can be found. */ /* The name is scaled by site.js to exactly match the sub-line's width — the two are measured in the browser, because estimating from font metrics gets it wrong by enough to notice. 20px is only the starting point; the script overwrites it. --lockup is the resolved size. */ .brand span{display:block} .brand b{font-weight:900;font-size:var(--lockup,20px);letter-spacing:.06em;display:block; line-height:1;white-space:nowrap} .brand i{font-style:normal;font-size:10px;letter-spacing:.15em;text-transform:uppercase; color:#fff;opacity:.92;display:block;margin-top:3px;white-space:nowrap} /* The current-page underline runs down to meet the gold rule, so the two join into a T rather than the underline floating above it. For that the links have to reach the very bottom of the header: the nav stretches to the full content height, then eats the header's 11px bottom padding with a negative margin, which puts each link's bottom border flush against the gold. The link's own 11px bottom padding puts the text back on the optical centre it had before. The Tickets button opts out of the stretch — it's a box, not a tab. */ .nav{display:flex;gap:20px;margin-left:auto;align-items:stretch; align-self:stretch;margin-bottom:-11px} /* The highlight is 4px against the rule's 7px. Tried at 7px so the two strokes of the T matched; it read as heavy, and 4px is right. */ .nav a{font-weight:700;font-size:13px;letter-spacing:.05em;text-transform:uppercase; color:#fff;text-decoration:none;display:flex;align-items:center; padding:0 0 11px;border-bottom:4px solid transparent} .nav a:hover,.nav a[aria-current=page]{border-color:var(--gold);color:#fff} /* .nav a sets white for the links, and it out-specifies .btn-gold's own colour — so the Tickets button has to claim ink back explicitly, resting AND hover. Without this it renders white on gold, which is 1.7:1 and close to illegible. */ .nav .btn,.nav .btn:hover{color:var(--ink)} .nav .btn{align-self:center;margin-left:6px;margin-bottom:11px;padding:11px 20px; font-size:12px;border-bottom:2px solid var(--gold)} /* NO OPTICAL NUDGE HERE, and it is worth saying why not. The Tickets button and the icons were once pushed down 3px on the theory that the 7px gold rule reads as part of the same block, so centring on the scarlet alone leaves things 3.5px high. It was a nice argument and it was wrong: on screen the button then sat visibly low, worse than what it replaced. The measurement was right all along — the scarlet runs 71.1px and the button's centre is at 35.5px, which is exactly half. Leave it alone. */ /* ---- social links in the header ---- Deliberately quieter than everything else up here. The nav takes people through the site and the Tickets button is the one thing we want pressed; three icons at 80% white are a way out to somewhere else, and should not compete with either. They come up to full white on hover. Marked out from the nav by a hairline rather than by extra space, because space alone at this size reads as a gap rather than a division. They opt out of the nav's full-height stretch — these are icons, not tabs, so they take no underline and centre on the row like the button does. */ .social{display:flex;align-items:center;gap:2px;align-self:center; margin-bottom:11px;margin-left:14px;padding-left:14px; border-left:1px solid rgba(255,255,255,.22)} /* These are inside .nav, so `.nav a` matches them too — and that rule turns a link into a full-height tab: 11px of bottom padding and a 4px bottom border for the current-page underline. Both selectors are one class and one element, so they have equal specificity and .social a only wins on the properties it actually names. It named neither of those. The result: everything is border-box, so a 34px button with 11px of padding and a 4px border had 19px of content area left, and the icon centred in that — 7.5px above the middle of the button. The hover rule would also have drawn a gold underline beneath each icon. Both are undone explicitly here. */ .social a{display:grid;place-items:center;width:34px;height:34px; padding:0;border-bottom:0; color:rgba(255,255,255,.8);transition:color .15s} .social a:hover{color:#fff;border-color:transparent} .social svg{width:19px;height:19px;display:block} /* 44 by 44. The three bars occupy only 24 by 16 of it; the rest is padding, which is invisible and is exactly the point — a target the size of a fingertip rather than the size of the drawing on it. */ .burger{display:none;background:none;border:0;cursor:pointer;flex-direction:column; justify-content:center;align-items:center; gap:5px;width:44px;height:44px;padding:0;margin-left:auto} .burger span{display:block;width:24px;height:2px;background:#fff} /* ---------- hero ---------- */ /* overflow:hidden is load-bearing, not tidiness. .hero-img is deliberately taller than this box so it can drift for the parallax; without clipping, that extra 9% top and bottom simply paints outside the hero — and since .sec has no background of its own, the spill below showed as a strip of photograph between the gold "next performance" bar and What's On. .quote had this from the start; the hero didn't, because until the parallax nothing overflowed it. */ .hero{position:relative;color:#fff;isolation:isolate;background:var(--ink-2); overflow:hidden} /* Overhangs top and bottom so it can drift against the scroll without ever showing an edge — the same trick as the quote photograph, gentler, because this one is on screen the moment the page opens. */ .hero-img{position:absolute;inset:-9% 0;z-index:-2;background-size:cover; background-position:center 40%;background-repeat:no-repeat} /* Two layers, so the photograph still reads: 1. a neutral scrim, strongest behind the text on the left, fading off to the right — this is what carries the legibility, not the colour; 2. a light Heritage Scarlet wash, deepening to Royal Red at the base where it meets the gold bar. Kept well under a third so the image shows through. */ .hero::after{content:'';position:absolute;inset:0;z-index:-1; background: linear-gradient(90deg, rgba(20,16,15,.72) 0%, rgba(20,16,15,.58) 40%, rgba(20,16,15,.30) 75%, rgba(20,16,15,.14) 100%), linear-gradient(180deg, rgba(190,29,46,.20) 0%, rgba(190,29,46,.28) 55%, rgba(165,14,14,.48) 100%)} /* safety net for the body line, which sits lower over unpredictable image areas */ .hero .lede{text-shadow:0 1px 12px rgba(20,16,15,.55)} /* No max-width of its own, so it keeps .wrap's 1180px and starts on the same left edge as every other section — including the gold "next performance" bar immediately beneath it, which is also a .wrap. It used to be capped at 880px, which centred it and pushed the headline 150px to the right of everything else on the page. The reading measure is still controlled, just not here: .hero .lede caps itself at 600px, which is what that 880 was really for. */ .hero-in{padding:96px 24px 104px} .hero h1{text-shadow:0 4px 34px rgba(0,0,0,.45)} /* The whole headline is white — the gold bar underneath is the only gold here, which keeps the accent doing one job rather than two. */ .hero h1 em{font-style:normal;color:inherit} .hero .lede{max-width:600px;margin:22px 0 34px;color:rgba(255,255,255,.93)} .hero-cta{display:flex;gap:14px;flex-wrap:wrap} /* White, not gold: this is 12px text on Heritage Scarlet, where gold is 3.75:1. */ /* column-gap MUST stay 0. The gold divider is a ::before inside the following span, so any column gap is added on its left only — the pipe then sits that much nearer the word on its right. With the gap at zero the spacing comes entirely from the divider's own symmetric 12px margins, and the .16em letter-space that trails both the previous word and the pipe itself falls on each side equally. Row gap still applies when the strip wraps on a phone. */ .proof{display:flex;column-gap:0;row-gap:8px;flex-wrap:wrap;align-items:center; margin:0 0 26px;font-weight:700;font-size:12px;letter-spacing:.16em; text-transform:uppercase;color:#fff} .proof span{display:inline-flex;align-items:center} .proof span+span::before{content:'|';margin:0 12px;color:var(--gold);opacity:1;font-weight:500} /* The rotating honour. Every entry is stacked in one grid cell, so the strip is sized by the longest and nothing shifts as they change — a chip that resized itself would nudge the whole line every few seconds. Only the current one is visible; the rest stay in the document for screen readers, which get the complete list rather than whichever happened to be on screen. */ /* The stacking goes on an inner .cycle, NOT on the .proof-cycle span itself. `.proof span+span::before` draws the gold divider as a pseudo-element inside that span — make the span a grid and the divider becomes a grid item, lands in row two, and drags the text out of line. Leaving the span as an ordinary flex item keeps the divider beside the text where it belongs. */ .proof-cycle .cycle{display:inline-grid;align-items:center} .cycle b{grid-area:1/1;font-weight:700;opacity:0;transition:opacity .45s ease; white-space:nowrap;text-align:left} .cycle b.on{opacity:1} /* The longest honour is about 280px once letter-spaced, which overflows the narrowest phones. Below that, let it wrap — the grid still stacks them, so the strip becomes two lines tall rather than running off the screen. */ @media(max-width:480px){.cycle b{white-space:normal}} /* The rotating occasion above BOOK THE BAND. Same stacking device as the hero chip: every line in one grid cell, so the block is as tall as the tallest and the heading beneath it never moves as they change. Centred, because the CTA section is. */ .cta-cycle .cycle{display:inline-grid;align-items:center;text-align:center} .cta-cycle .cycle b{text-align:center} @media(max-width:560px){.cta-cycle .cycle b{white-space:normal}} @media(prefers-reduced-motion:reduce){ /* Shown one after another as ordinary text rather than fading. */ .cta-cycle .cycle{display:inline} .cta-cycle .cycle b{opacity:1} .cta-cycle .cycle b+b{display:none} } /* Nothing should move by itself for anyone who has asked it not to. All of them are then shown in sequence, which the strip can carry. */ @media(prefers-reduced-motion:reduce){ .proof-cycle .cycle{display:inline} .cycle b{opacity:1;transition:none} .cycle b+b::before{content:'|';margin:0 10px;color:var(--gold);font-weight:500} } /* Heritage Scarlet across the body, Royal Red only in the far corner. */ /* Ink, the same treatment as the enquiry panel on Book Us: flat black ground, white heading, gold kicker, and the black crest reading as a shade rather than a shape. Deliberately not scarlet — the header above is already scarlet, so a scarlet banner directly beneath it stacked two reds with only the gold rule between them. */ .page-head{background:var(--ink); color:#fff;padding:64px 0 58px;border-bottom:5px solid var(--gold)} .page-head h1{font-size:clamp(34px,5.5vw,60px)} /* THE THREE LINES ARE ONE LOCKUP. The gold bar sits under the heading at exactly its own thickness — 8px under an 8px bar, which is the rule the whole site is set to — while the kicker floated nineteen pixels above it, so the pair read as two separate things that happened to be stacked. The air above the capitals is now the air below them. Nineteen became eight by taking eleven off the box, not off the eye: seven of those pixels are the leading under the kicker's own line — the space its descenders would use if it had any, and it is capitals, so it never does. The correction is in the kicker's em rather than in pixels, so it still holds if the kicker is ever set at another size. */ .page-head .kicker{color:var(--gold);margin-bottom:calc(8px - .58em)} .page-head .kicker + h1{margin-top:0} .page-head .lede{max-width:660px;margin-top:18px;color:rgba(255,255,255,.94)} /* THE FRONT PAGE'S OWN TITLE, in the white under the banner. The banner is addressed to the person — good evening, DANIEL — so the page itself would otherwise go unnamed, and a front page with no title reads as the middle of something. The same heading device as every other screen in here, sitting on the same left edge as the strip and the tiles below it. */ .ad-intro-home{margin:0 0 26px} /* AND AT FULL SIZE, because it is the page's heading and not a caption on the way to one. Deliberately the same clamp as the banner's own h1, so the two titles on this screen track each other at every width — the ink says who is here, the white says what this is, in the same voice. */ .ad-intro-home h2{font-size:clamp(34px,5.5vw,60px)} /* And the bar under it is the banner's, not the section pages': the thickness goes with the size of the word it is under, and this word is now the same size as the one in the ink above it. */ .ad-intro-home h2.rule::after{--bar:8px} /* ---------- next performance bar ---------- */ .nextbar{background:var(--gold);color:var(--ink)} .nextbar-in{display:flex;align-items:center;gap:18px;padding:14px 24px;flex-wrap:wrap} /* The black tag looked to be sitting high in its own box, and it was. The label inherited the body's 1.65 line-height, so an 11px capital sat in an 18px line box. Capitals have no descenders, so all the ink is in the top part of that box and the empty descender space below it pushes the visible block above centre — the padding was even, but the thing inside it wasn't. line-height:1 takes the leading out, then 1px more above than below corrects for capitals sitting slightly high in the em itself. The letter-spacing also adds a trailing gap after the final letter, which shifts the label left of centre; padding-right carries 1px less to take that back out. */ .nb-tag{font-weight:900;font-size:11px;letter-spacing:.16em;text-transform:uppercase; background:var(--ink);color:var(--gold);border-radius:0; line-height:1;padding:9px calc(12px - .16em) 8px 12px} .nb-body{font-weight:700;font-size:15px;flex:1 1 auto} .nb-link{font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase; text-decoration:none;border-bottom:2px solid var(--ink);white-space:nowrap} /* ---------- sections ---------- */ .sec{padding:84px 0} .sec-tint{background:var(--tint)} .dark{background:var(--ink);color:#fff} .dark h2,.dark h3{color:#fff} .dark p{color:rgba(255,255,255,.82)} /* Heritage Scarlet section. White text only — gold small text fails here. */ .red{background:var(--scarlet);color:#fff} .red h2,.red h3{color:#fff} .red p{color:rgba(255,255,255,.94)} .red .kicker{color:#fff} .red .txtlink{color:#fff;border-bottom-color:rgba(255,255,255,.5)} .red .txtlink:hover{border-bottom-color:var(--gold)} .red .venues span{border-color:rgba(255,255,255,.45);background:rgba(0,0,0,.16)} .red .btn-outline{color:#fff;border-color:rgba(255,255,255,.6)} .red .btn-outline:hover{background:#fff;color:var(--scarlet);border-color:#fff} .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px; margin-bottom:36px;flex-wrap:wrap} /* :not(.kicker), and that is the whole point of it. `.sec-head p` is a class plus an element, so it outranks the bare `.kicker` class and was painting the little heading above the title mute grey — but only inside a .sec-head. Seven of them across three pages were grey while every other kicker on the site was scarlet, which is why they looked arbitrary: the rule that greyed them was meant for the sentence underneath, and caught the kicker on the way past. */ .sec-head p:not(.kicker){margin:10px 0 0;color:var(--mute);max-width:56ch} .dark .sec-head p{color:rgba(255,255,255,.75)} /* The .prod / .prods rules that used to live here styled the three numbered production cards on Book Us. That menu is gone — the band doesn't sell a fixed set of productions — and nothing else on the site used them, so they have gone with it rather than sitting here waiting to be wondered about. See .offers. */ /* ---------- record / proof strip ---------- */ /* Heritage Scarlet panels divided by Royal Red rules — the accent doing its job. Gold numerals are 42px display text, so 3.75:1 clears the AA-large threshold. */ .record{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--royal)} .rec{background:var(--scarlet);padding:32px 24px} .rec b{display:block;font-weight:900;font-size:42px;color:var(--gold);line-height:1} .rec i{font-style:normal;display:block;font-size:13.5px;color:rgba(255,255,255,.94); margin-top:8px;line-height:1.4} /* The two cycling panels. Every honour is stacked in the same grid cell, so the panel is as tall as the longest one and the row never changes height as they turn over — a panel that resized itself would shunt the whole strip. */ .rec-cycle{display:grid;align-items:start} /* One out, then the next in — not a crossfade. Overlapping them leaves two honours half-visible over the same pixels, which reads as a smudge rather than a change. The gap between the two is timed in site.js, which reads this duration back off the element so the two can't fall out of step. Same treatment as the rotating chip in the hero. */ .rec-cycle .stat{grid-area:1/1;opacity:0;transition:opacity .85s ease} .rec-cycle .stat.on{opacity:1} @media(prefers-reduced-motion:reduce){ /* No movement: each panel shows its opening honour and stays there. */ .rec-cycle .stat{transition:none} } /* ---------- events ---------- */ .tag{display:inline-block;font-weight:700;font-size:10.5px;letter-spacing:.13em; text-transform:uppercase;padding:4px calc(10px - .13em) 4px 10px;margin-bottom:8px} .tag-contest{background:#FFF6D9;color:#8A6A00} .tag-concert{background:#FDEBED;color:var(--royal)} .ev-note{font-size:13px;color:var(--mute);font-style:italic;text-align:center;padding:8px} /* ---------- cards ---------- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .card{background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit; display:flex;flex-direction:column;transition:.18s} .card:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,16,15,.1)} .card-img{aspect-ratio:16/10;background:var(--tint) center/cover no-repeat} .card-body{padding:22px 24px 26px} /* A small scarlet line on a card. News puts it under the title as the date; Listen puts it above as a label ("Over 100,000 views", "Whit Friday") — which is why the name is only half right, and why the spacing is set per position rather than baked into the class. */ .card-date{font-weight:700;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase; color:var(--scarlet)} .card h3{font-size:20px;margin-bottom:9px} /* Above a title (Listen): space below it, separating it from the heading. Under a title (News): the heading's own 9px is already there, so it only needs space beneath, before the blurb. Tighter above than a paragraph would be, so it reads as belonging to the title rather than starting the text. */ .card-date + h3{margin-top:0} .card h3 + .card-date{margin:-3px 0 9px} .card-body > .card-date:first-child{margin-bottom:8px} .card p{font-size:14.5px;color:var(--mute);margin:0} /* ---------- split ---------- */ .split{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:center} .split-2{display:grid;grid-template-columns:1fr 1fr;gap:56px} /* ---------- book us: what we do ---------- Deliberately not cards. Cards look like products with prices behind them, and the whole point of this section is that these are examples of what the band has done rather than a catalogue to choose from. THE SUB-HEADINGS ARE THE BAND'S OWN DEVICE, lifted from the social media plan, where a Royal Red strip of white Bold text heads forty-one blocks. The plan's brand note is explicit about the colour: Royal Red #A50E0E for on-page elements — badges, boxes and rules — "since none sit on a coloured background", which is exactly the case here. Heritage Scarlet leads whole surfaces; Royal Red does the small furniture on white. 7.87:1. TWO THINGS TAKEN FROM THE DOCUMENT ITSELF RATHER THAN FROM ITS BRAND NOTE. The strip is as wide as its words, not as wide as the column. Every strip in the plan is its own single-cell table sized to its contents: measured across them, the width holds at 110–134 twentieths of a point per character from a thirteen-character heading to a forty-seven-character one, and the widest never reaches two thirds of the page. Hence inline-block. And the text is sentence case. The brand note says Title Case for sub-headings; the document says otherwise forty times out of forty-one — "Our headline targets", not "Our Headline Targets". Not one is in caps. Where the note and the practice disagree, the practice is what the band actually looks like. THE INSET IS TIGHT, AND TIGHTER STILL AT THE SIDES. Measured from the cell margins: 36 twentieths of a point top and bottom against 6 at the sides — the fill is drawn almost exactly round the words, and it is closer at the left and right than above and below, which is the reverse of how a button is padded. The leading is tight with it, at 0.96 of single spacing. Translated rather than copied. Literally 6 twentieths of a point is 0.4px at this size, which would have the letters touching the red; 5px keeps a hair of air without loosening the shape. Everything else follows the original: 4px above and below, and the leading pulled in to 1.2 so the strip sits on the text rather than around it. */ /* Two columns, not three. Six small items across a white field read as a list of minor points; the same six at half the count per row read as six things the band does. Nothing has been added to make this stronger — no boxes, no ground, no rules. It is bigger, there is more air between, and the body text is ink rather than grey. Confidence rather than decoration. The measure is capped: a two-column layout at this width would otherwise run to ninety characters a line, which is where prose stops being read. */ .offers{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 56px;margin-top:42px} .offer h3{display:inline-block;background:var(--royal);color:#fff;font-weight:700; font-size:20px;line-height:1.2;letter-spacing:.01em;text-transform:none; padding:5px 7px;margin:0 0 15px} .offer p{margin:0;font-size:16.5px;line-height:1.62;color:var(--ink);max-width:50ch} @media(max-width:760px){ .offers{grid-template-columns:1fr;gap:30px} .offer h3{font-size:18px} } /* ---------- book us: the collage ---------- EVERY PICTURE IS THE SAME HEIGHT; THE WIDTHS DO WHATEVER THE PICTURE WANTS. That is the whole idea. A grid of fixed cells forces every photograph into the same shape and gives ragged rows when the shapes differ; here the height is the constant, each picture is as wide as its own proportions make it, and the row stretches to fill the line. Uneven widths, dead-level rows. HOW IT WORKS. Each figure declares --ar, its width divided by its height. flex-basis starts it at --ar × the row height, which is its true width, and flex-grow shares out whatever is left over in the same proportion, so wider pictures take more of the slack. Nothing has to be measured in JavaScript and nothing needs to know how many photographs there are. ADDING ONE: copy a
, set --ar from the file's own dimensions — 300x169 is 1.78, 2048x1363 is 1.50 — and drop it anywhere in the list. The rows re-justify on their own. If --ar is left off it falls back to 3:2, which is right for most photographs and wrong only in a way nobody notices. The caption sits on the picture rather than under it. Underneath, a one-line caption and a two-line caption make the row ragged again at the bottom, and the whole block was taking too much of the page. */ .photo-set{display:flex;flex-wrap:wrap;gap:8px;--h:210px} .photo-set figure{margin:0;position:relative;overflow:hidden; flex:var(--ar,1.5) 1 calc(var(--ar,1.5) * var(--h))} .photo-set .photo{height:var(--h);background-size:cover;background-position:center 40%; background-repeat:no-repeat;background-color:var(--ink-2)} /* The last row would otherwise stretch a lone picture across the full width. */ .photo-set::after{content:'';flex-grow:1e6} .photo-set figcaption{position:absolute;left:0;right:0;bottom:0; padding:26px 13px 10px;color:#fff;font-size:12.5px;line-height:1.35; background:linear-gradient(180deg,rgba(20,16,15,0) 0%,rgba(20,16,15,.55) 45%, rgba(20,16,15,.88) 100%)} @media(max-width:900px){.photo-set{--h:170px}} @media(max-width:560px){ /* One at a time, at their own shapes — justifying two per row at this width leaves slivers. */ .photo-set{--h:auto;display:block} .photo-set figure{margin-bottom:8px} .photo-set .photo{height:auto;aspect-ratio:var(--ar,1.5)} } /* ---------- book us: what it involves ---------- */ /* This section was briefly a two-column head — heading one side, prose the other. It measured badly. The heading column stacked to about 145px and the prose beside it to about 239px, so whichever way they were aligned one of them was left hanging: top-aligned put a 94px hole in the bottom left, right where the panel starts, and bottom-aligned dropped the heading to nothing. Two columns only balance when the two things in them are a similar size, and a heading is never the size of three paragraphs. So the head is one full-width block, and the two remarks that used to pad the right column have gone below the panel as a matched pair, where they are the same size as each other and do balance. */ .spec-lede{max-width:62ch;margin:18px 0 0} /* The six answers a promoter actually rings up to ask. These were previously laid two-across inside the narrow half of a .split: 190px of label against what worked out at a 20px value column, so every answer wrapped to roughly one word per line. They now take the full wrap and read three across, which is the measure the copy was written for. The rules between them are drawn by a 1px grid gap over a --line ground rather than by a border on each cell. One continuous table, no doubled hairlines where cells meet, and nothing to special-case at the edges. */ .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px; background:var(--line);border:1px solid var(--line);margin-top:40px} .spec{background:var(--paper);padding:26px 28px 30px} /* Royal red, not mute grey. These are the labels on a specification sheet and they are meant to be found at a glance — 7.87:1 on paper, and it ties the panel to the red strips further up the page. */ .spec dt{font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase; color:var(--royal);margin:0 0 13px} /* No max-width here: the cell is 321px at full size, which is about a 40-character measure on its own. A ch cap on top of that would only leave a ragged strip of empty card down the right of every answer. */ .spec dd{margin:0;font-size:16px;line-height:1.58;color:var(--ink)} /* The same device used again in the Sponsor section, where it sits in the narrow half of a .split and carries four short figures rather than six sentences. Two across, not three. It had the identical squashed-value problem before this change and simply wasn't as obvious, because "4,900 followers" survives a narrow column better than a full sentence does. */ .specs-narrow{grid-template-columns:repeat(2,1fr)} /* The two remarks under the panel. Equal columns, equal size, equal colour — the balance is doing the work here, so neither may be emphasised over the other. They are 225 and 204 characters, which at this measure comes to four lines and three. Matching the lengths to make them bottom out level would mean padding a sentence to fit a column, which is the wrong way round. Instead each gets a short rule across the top, so the pair is anchored at the head where they are exactly level and the ragged foot stops signifying. Two separate rules with the column gap between them, not one continuous line — that would read as a second border under the panel. */ .spec-notes{display:grid;grid-template-columns:1fr 1fr;gap:22px 56px;margin-top:34px} .spec-notes p{margin:0;padding-top:18px;border-top:2px solid var(--line); font-size:15.5px;line-height:1.66;color:var(--mute)} .spec-notes b{color:var(--ink);font-weight:700} /* Still used on its own by the Sponsor panel, which has one remark, not two. */ .spec-note{margin:24px 0 0;font-size:14.5px;line-height:1.6;color:var(--mute);max-width:74ch} /* Two across once the third column would drop below about 300px, one across on a phone — a definition list is the one layout that loses nothing by stacking. */ @media(max-width:980px){ .specs{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ .specs,.specs-narrow{grid-template-columns:1fr} .spec{padding:22px 22px 24px} /* Side by side is the whole point of the pair; once they'd be 40 characters wide it isn't, so they stack. */ .spec-notes{grid-template-columns:1fr} } .venues{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px} .venues span{border:1px solid var(--line);padding:8px 16px;font-size:14px;background:#fff} .dark .venues span{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.05)} /* ---------- steps ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;counter-reset:s} .step{counter-increment:s;position:relative;padding-top:56px} .step::before{content:counter(s,decimal-leading-zero);position:absolute;top:0;left:0; font-weight:900;font-size:34px;color:var(--gold)} .step h3{font-size:18px;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px} .step p{font-size:15px;color:var(--mute);margin:0} .dark .step p{color:rgba(255,255,255,.78)} /* ---------- roster ---------- */ /* One click to any section. Twenty-nine players is a long scroll however it's laid out; this is what stops it being a slog, without hiding anybody. */ .roster-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 38px; padding-bottom:26px;border-bottom:1px solid var(--line)} .roster-jump a{font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase; text-decoration:none;color:var(--ink);background:var(--tint); border:1px solid var(--line);padding:9px calc(15px - .1em) 9px 15px;transition:.18s} .roster-jump a:hover{background:var(--ink);border-color:var(--ink);color:#fff} /* scroll-margin keeps a jumped-to heading clear of the sticky header. */ /* scroll-margin keeps a jumped-to heading clear of the sticky header — the real height of it plus a little air, rather than a number typed in and left to drift when the header changes. */ .section-block{margin-bottom:44px;scroll-margin-top:calc(var(--hdr-h) + 22px)} .section-block h3{margin-bottom:22px} /* The heading IS the control, so it takes the whole width — a section is folded by clicking its name, not by hunting for a small arrow at one end. The scarlet rule that was on the h3 moves onto the button, which is the thing being pressed. */ .sec-toggle{width:100%;display:flex;align-items:center;gap:12px; background:none;border:0;border-bottom:2px solid var(--scarlet); padding:0 0 10px;margin:0;cursor:pointer;text-align:left;color:inherit; font:inherit;font-size:15px;font-weight:900;text-transform:uppercase; letter-spacing:.16em} .sec-toggle:hover{border-bottom-color:var(--gold)} .sec-name{flex:1 1 auto} /* How many players are in there. Reads as information when the section is open and as a reason to open it when it isn't. */ .sec-count{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--mute)} /* The open/shut mark. A triangle rotated rather than two different characters, so it turns rather than jumps — and the transition is on transform only, which the compositor handles without touching layout. Marked aria-hidden by being CSS content: generated content is not in the accessibility tree, and aria-expanded on the button already says the same thing properly. */ .sec-toggle::after{content:'';width:0;height:0;flex:0 0 auto; border-left:6px solid transparent;border-right:6px solid transparent; border-top:7px solid var(--scarlet);transition:transform .2s ease} .sec-toggle[aria-expanded=false]::after{transform:rotate(-90deg)} .sec-toggle[aria-expanded=false]{border-bottom-color:var(--line)} /* Five across rather than four, and a squarer crop. Same photographs, roughly a third less page to get through. */ .players{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} /* .player is a