/* ============================================================================ Bond Street Turns 10 — page styles (event page rebuild, Sept 2026) Loads AFTER css/bond-system.css. Canonical tokens and classes only; every page-specific rule is prefixed .e10- and scoped under body.e10 where it touches shared chrome. No colours, sizes or radii outside the token set. ============================================================================ */ /* --- Page-level chassis deltas ------------------------------------------- */ /* The masthead scrolls away on this page so the programme controls can hold the top of the viewport without stacking two sticky bars (brief §4). */ .e10 .nav{position:static} .e10 main{display:block} .e10 .crumb{margin-bottom:0} /* --- 1 · Opening module --------------------------------------------------- */ .e10-open{padding:clamp(18px,2.6vw,36px) 0 clamp(26px,3.4vw,44px);border-bottom:1px solid var(--line)} .e10-open__grid{display:grid;grid-template-areas:"copy" "jump" "media";row-gap:clamp(20px,3vw,30px)} .e10-open__copy{grid-area:copy;min-width:0} .e10-jump{grid-area:jump} .e10-open__media{grid-area:media;min-width:0} .e10-open .eyebrow{margin-bottom:clamp(14px,1.8vw,22px)} .e10-title{font-size:clamp(38px,5.6vw,72px);line-height:.98;letter-spacing:-.015em;max-width:12ch;text-wrap:balance} .e10-open__intro{margin-top:clamp(16px,2vw,24px);font-size:18px;line-height:1.55;color:var(--body);max-width:46ch;text-wrap:pretty} .e10-facts{margin-top:clamp(14px,1.8vw,20px);font-size:18px;font-weight:var(--fw-med);color:var(--ink);line-height:1.45} .e10-facts span{display:inline} .e10-facts span:not(:first-child)::before{content:"\00a0\00b7\00a0";color:var(--muted);font-weight:400} .e10-jump{display:flex;flex-wrap:wrap;gap:10px} .e10-jump .pill{display:inline-flex;align-items:center;min-height:44px;font-size:16px;font-weight:var(--fw-med)} .e10-open__pic{display:block;border-radius:var(--r-md);aspect-ratio:2.5/1} @media(min-width:900px){ .e10-open__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-areas:"copy media" "jump jump";align-items:center;column-gap:clamp(32px,4.5vw,72px)} .e10-open__pic{aspect-ratio:3/2} } /* --- 2 · Programme -------------------------------------------------------- */ .e10-prog{padding-top:clamp(34px,4.6vw,60px)} .e10-prog__head{max-width:62ch} .e10-prog__head .kicker{margin-bottom:12px} .e10-prog__head .sec-intro{font-size:18px;line-height:1.55} .e10-hosts{display:flex;align-items:center;gap:14px;margin-top:clamp(16px,2vw,22px)} .e10-hosts__pics{display:flex;flex:none} .e10-hosts__pics img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--surface-alt);border:2px solid var(--surface)} .e10-hosts__pics img+img{margin-left:-12px} .e10-hosts p{font-size:16px;color:var(--body);line-height:1.5} /* controls: one bar, hidden until the script arms it (no dead controls without JS) */ .e10-controls{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(20px,2.6vw,30px);padding:12px 0} .e10-controls[hidden]{display:none} /* D464 - pinning is kept where it is cheap and dropped where it is not. With 44px targets the bar measures 132px on desktop and tablet, 17% of a 760px viewport, but 176px at 390 (23%) and 230px at 320 (30%). Spending a third of a phone screen permanently on a control that is pressed once or twice costs more than it returns, and the script already returns the visitor to the controls after every selection. Measured across widths, the bar collapses to one compact row at 640px and holds 132px from there up, so that is where pinning starts. To restore pinning on phones, delete the min-width condition. */ @media(min-width:640px) and (min-height:560px){.e10-controls{position:sticky;top:0;z-index:var(--z-nav)}} .e10-controls .fbar{margin-top:0} /* D464 - the project minimum is a 44px touch target. The review build set 36px here and 32px on a phone, which is the wrong way round for the one surface that is used one-handed and outdoors on the day. */ .e10-controls .fchip{min-height:44px;font-size:16px;font-weight:var(--fw-med);line-height:1.1;padding:8px 16px} .e10-controls .fchip[aria-pressed="true"]::before{content:"\2713";margin-right:7px;font-weight:700} .e10-controls__row{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;margin-top:10px} .e10-controls .countline{margin:0;font-size:14px;font-weight:var(--fw-med);flex:1 1 220px;min-width:0} .e10-view{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);padding:3px;background:var(--surface);flex:none} .e10-view .fchip{border-color:transparent;min-height:44px;padding:8px 16px} .e10-view .fchip[aria-pressed="true"]::before{content:none} @media(max-width:540px){ .e10-controls{padding:10px 0} .e10-controls .fbar{gap:6px} .e10-controls .fchip{font-size:16px;padding:8px 11px;min-height:44px} .e10-controls .fchip[aria-pressed="true"]::before{margin-right:5px} .e10-controls__row{margin-top:8px;gap:6px 12px} .e10-controls .countline{font-size:14px;flex-basis:150px} .e10-view .fchip{min-height:44px;padding:8px 12px} } /* results */ .e10-results{padding-bottom:clamp(30px,4vw,52px)} .e10-group{margin-top:clamp(28px,3.6vw,44px)} .e10-group[hidden],.e10-act[hidden],.e10-runwrap[hidden]{display:none} .e10-group__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding-bottom:10px;border-bottom:2px solid var(--line-strong)} .e10-group__head .t-h3{min-width:0} .e10-group__head .t-h3{font-weight:var(--fw-med)} .e10-group__head .qtag{font-size:14px} .e10-grid{display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(24px,4vw,56px)} @media(min-width:900px){.e10-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} .e10-act{display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(22px,2.6vw,28px) 0;border-bottom:1px solid var(--line)} .e10-act__head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px} .e10-act__text{flex:1 1 auto;min-width:0} .e10-act__title{font-family:var(--font-sans);font-weight:var(--fw-med);font-size:22px;line-height:1.25;color:var(--ink);text-wrap:pretty} .e10-act__where{margin-top:2px;font-size:16px;line-height:1.45;color:var(--body)} .e10-act__img{flex:none;width:96px;height:96px;object-fit:cover;border-radius:var(--r-md);background:var(--surface-alt)} @media(max-width:540px){.e10-act__img{width:80px;height:80px}} /* Venue logos share the activity thumb slot. The logo library is squared to 320px so cover is safe; the hairline gives the white-ground marks the same tile edge the coloured ones already have, so the column reads as one set. */ .e10-act__img--logo{background:var(--surface);border:1px solid var(--line)} .e10-times{list-style:none;display:flex;flex-direction:column;gap:6px;margin-top:6px} .e10-times li{display:flex;flex-wrap:wrap;gap:0 10px;font-size:18px;font-weight:var(--fw-med);line-height:1.35;color:var(--ink)} .e10-times__place{font-size:16px;font-weight:var(--fw-book);color:var(--body)} .e10-when{margin-top:6px;font-size:18px;font-weight:var(--fw-med);line-height:1.35;color:var(--ink)} .e10-act__desc{font-size:16px;line-height:1.55;color:var(--body);max-width:60ch} .e10-act__note{font-size:16px;line-height:1.55;color:var(--ink);font-weight:var(--fw-med);max-width:60ch} .e10-act__links{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:16px} .e10-act__links a{display:inline-flex;align-items:center;gap:6px;min-height:32px;font-weight:500;color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .e10-act__links a:hover{color:var(--accent-deep)} .e10-act__links .e10-ext{flex:none;width:16px;height:16px} .e10-more{max-width:none} .e10-more summary{font-size:16px;font-weight:var(--fw-med)} .e10-more .acc__body{font-size:16px;line-height:1.55} .e10-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px} .e10-gallery .ar{border-radius:var(--r)} @media(max-width:540px){.e10-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} /* time-order view (built by js/turns-10.js from the same articles) */ .e10-runwrap{margin-top:clamp(28px,3.6vw,44px)} .e10-run__intro{margin-top:10px;font-size:16px;line-height:1.55;color:var(--body);max-width:70ch} .e10-run{list-style:none;margin-top:6px} .e10-run li{display:grid;grid-template-columns:116px minmax(0,1fr) auto;gap:6px 18px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line)} .e10-run__time{font-size:18px;font-weight:var(--fw-med);line-height:1.35;color:var(--ink);font-variant-numeric:tabular-nums} .e10-run__time small{display:block;margin-top:2px;font-size:14px;font-weight:var(--fw-book);color:var(--muted)} .e10-run__title{font-family:var(--font-sans);font-weight:var(--fw-med);font-size:22px;line-height:1.25;color:var(--ink);text-wrap:pretty} .e10-run__where{margin-top:2px;font-size:16px;line-height:1.45;color:var(--body)} .e10-run__desc{margin-top:14px;font-size:16px;line-height:1.55;color:var(--body);max-width:60ch} .e10-run img{width:64px;height:64px;object-fit:cover;border-radius:var(--r);background:var(--surface-alt)} @media(max-width:540px){.e10-run li{grid-template-columns:100px minmax(0,1fr)}.e10-run img{display:none}} .e10-runwrap .empty-state{margin-top:14px;text-align:left} /* --- 3 · Prize draw ------------------------------------------------------- */ .e10-prize{padding-top:var(--sec-y);border-top:1px solid var(--line)} .e10-prize__band{margin-top:clamp(28px,3.6vw,44px);padding:clamp(28px,3.6vw,44px) 0;background:var(--surface-alt);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .e10-prize__band-title{margin-bottom:4px} .e10-prize__points{padding-top:clamp(28px,3.6vw,44px);padding-bottom:var(--sec-y)} .e10-prize .sec-head{margin-bottom:0} .e10-prizes{list-style:none;margin-top:clamp(22px,3vw,34px);display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--line-strong)} @media(min-width:760px){.e10-prizes{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(24px,4vw,56px)}} .e10-prizes li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line)} .e10-prizes img{width:56px;height:56px;object-fit:contain;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r)} .e10-prizes .qtag{display:block;margin-bottom:4px;font-size:14px;white-space:normal} .e10-prizes h3{font-family:var(--font-sans);font-weight:var(--fw-med);font-size:22px;line-height:1.25;color:var(--ink);text-wrap:pretty} .e10-prizes p{margin-top:6px;font-size:16px;line-height:1.55;color:var(--body)} .e10-steps{list-style:none;counter-reset:step;display:grid;gap:16px;margin-top:18px} @media(min-width:760px){.e10-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}} .e10-steps li{counter-increment:step;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start} .e10-steps li::before{content:counter(step);display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1.5px solid var(--ink);font-size:16px;font-weight:var(--fw-med);color:var(--ink)} .e10-steps h4{font-family:var(--font-sans);font-weight:var(--fw-med);font-size:22px;line-height:1.3;color:var(--ink);text-wrap:pretty} .e10-steps p{margin-top:8px;font-size:16px;line-height:1.55;color:var(--body)} .e10-points{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px 22px;margin-top:8px} .e10-points a{display:inline-flex;align-items:flex-start;gap:6px;min-height:44px;padding:8px 0;font-size:16px;line-height:1.45;font-weight:var(--fw-med);color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .e10-points a:hover{color:var(--accent-deep)} .e10-points .e10-pin{flex:none;width:18px;height:18px;margin-top:1px} .e10-terms{margin-top:clamp(24px,3.2vw,36px);padding-top:18px;border-top:1px solid var(--line-strong);max-width:72ch} .e10-terms p{font-size:16px;line-height:1.6;color:var(--body)} .e10-terms p+p{margin-top:8px} .e10-terms .e10-window{font-size:18px;font-weight:var(--fw-med);color:var(--ink)} .e10-terms .e10-fine{font-size:14px;color:var(--muted)} /* --- 4 · Plan your visit -------------------------------------------------- */ .e10-visit{padding-top:var(--sec-y);border-top:1px solid var(--line)} .e10-visit .sec-head{margin-bottom:0} .e10-visit .gtk{margin-top:clamp(18px,2.4vw,28px);border-top:1px solid var(--line-strong)} .e10-visit .gtk .qblk h3{font-size:22px;font-weight:var(--fw-med);line-height:1.3} .e10-visit .gtk .qblk p{font-size:16px;line-height:1.55} .e10-visit__links{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:8px} .e10-visit__links a{display:inline-flex;align-items:center;min-height:44px;font-size:16px} .e10-bridge{margin:clamp(26px,3.4vw,40px) 0 var(--junction)} .e10-bridge b{color:var(--ink);font-weight:var(--fw-med)} .e10-bridge a+a::before{content:"\00a0\00b7\00a0";color:var(--muted);font-weight:400} /* ============================================================================ D470 · TYPE ROLES 21 September 2026 ---------------------------------------------------------------------------- One ladder for the whole page. Size carries the hierarchy, weight separates the item from its supporting detail, and spacing keeps the lines that belong to one activity closer to each other than to the next activity. 42 / 32 section heading What's on · Win a birthday treat · Plan your visit 28 group or subsection programme groups · How to enter · Where to enter 22 item title activity · prize · entry step · visitor question 18 time, lead, window any time or range, section intros, entry window 16 location, body, UI locations and floors, descriptions, conditions, booking and venue links, chips and tabs 14 secondary counts, retailer tags, sub-times, fine print WEIGHTS. Gotham is loaded at four weights only: 300 Light, 400 Book, 500 Medium, 700 Bold. There is no 600. Every "font-weight:600" in the previous build therefore resolved to Bold, which is not what a semibold title was meant to be. The brief asks for semibold "using an available brand weight", so semibold is 500 Medium throughout: item titles, times, chips and emphasised notes. 700 stays where the system already uses it, on the small uppercase labels. Nothing relies on a synthesised face. Headings are scoped to .e10 so no other page moves. ========================================================================== */ .e10 .t-h2{font-size:clamp(32px,3.2vw,42px);line-height:1.15} .e10 .t-h3{font-size:28px;line-height:1.25} /* long words must reflow rather than push the page wide under a visitor's own letter-spacing or word-spacing overrides (WCAG 1.4.12) */ .e10 .t-h2,.e10 .t-h3,.e10-act__title,.e10-run__title,.e10-prizes h3,.e10-steps h4,.e10-visit .gtk .qblk h3{overflow-wrap:break-word} .e10 b,.e10 strong{font-weight:var(--fw-med)} .e10-bridge{font-size:16px;line-height:1.6} /* --- Print ---------------------------------------------------------------- */ @media print{ .e10 .nav,.e10 .skip,.e10-controls,.e10-jump,.footer{display:none!important} .e10-act,.e10-prizes li{break-inside:avoid} .e10-open__pic{max-width:420px} }