/* Bond Street turns 10 · temporary homepage hero and highlights strip Live for the week of Saturday 26 September 2026, then removed together with the hero markup and js/e10-home-hero.js. Loads after css/bond-system.css. Every rule is prefixed .e10h-; canonical tokens only; no shared-chrome changes. */ /* --- 1 · Hero: cream field, invitation left, campaign photograph right ------- */ .e10h-hero{background:var(--surface-alt);border-bottom:1px solid var(--line)} .e10h-hero__grid{display:grid;grid-template-areas:"copy" "media";row-gap:clamp(24px,4vw,32px);padding-top:clamp(26px,4vw,52px);padding-bottom:clamp(26px,4vw,52px)} .e10h-copy{grid-area:copy;min-width:0} .e10h-media{grid-area:media;min-width:0} .e10h-label{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1.4} .e10h-date{color:var(--ink)} .e10h-title{margin-top:clamp(12px,1.6vw,18px);font-size:clamp(38px,4.4vw,56px);line-height:1;letter-spacing:-.015em} .e10h-line{display:block} .e10h-title .punch{margin:0 .22em 0 .04em} .e10h-facts{margin-top:clamp(16px,2vw,22px);font-size:18px;font-weight:600;color:var(--ink);line-height:1.4} .e10h-intro{margin-top:12px;font-size:17px;line-height:1.5;color:var(--body);max-width:46ch;text-wrap:pretty} .e10h-prize{margin-top:clamp(18px,2.4vw,26px);padding-top:clamp(14px,1.8vw,18px);border-top:1px solid var(--line-strong);max-width:46ch} .e10h-prize__label{color:var(--accent)} .e10h-prize__copy{margin-top:8px;font-size:17px;line-height:1.5;color:var(--ink);text-wrap:pretty} .e10h-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,26px)} /* mobile: the shallow 2.5:1 banner sits under the complete text panel */ .e10h-pic{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--line);aspect-ratio:2.5/1} .e10h-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 50%} @media(min-width:900px){ .e10h-hero__grid{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);grid-template-areas:"copy media";column-gap:clamp(32px,4.5vw,64px);align-items:stretch} /* the copy sets the hero height; the 3:2 photograph fills the column and crops its sides only */ .e10h-media{position:relative;min-height:440px} .e10h-pic{position:absolute;inset:0;aspect-ratio:auto} } /* --- 2 · Highlights strip: teal band, one readable slot ---------------------- */ .e10h-strip{background:var(--accent);color:#fff} .e10h-strip__grid{display:grid;grid-template-areas:"label" "list" "ctl";grid-template-columns:minmax(0,1fr);gap:14px 28px;padding-top:18px;padding-bottom:18px;align-items:center} .e10h-strip__label{grid-area:label;font-family:var(--font-sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;line-height:1.4} .e10h-list{grid-area:list;list-style:none;margin:0;padding:0;display:grid;gap:18px 28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} /* scripts off: compact static list */ .e10h-item{min-width:0} .e10h-item__title{font-family:var(--font-sans);font-weight:500;font-size:19px;line-height:1.25;color:#fff;text-wrap:pretty} .e10h-item p{margin:6px 0 0;font-size:16px;line-height:1.45;color:#fff;text-wrap:pretty} /* scripts on: the five messages share one grid cell, so the slot always reserves the height of the longest message at the current width and text size; nothing below moves */ .e10h-strip.is-live .e10h-list{grid-template-columns:minmax(0,1fr)} .e10h-strip.is-live .e10h-item{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s} .e10h-strip.is-live .e10h-item.is-on{opacity:1;visibility:visible;transition-delay:0s} .e10h-ctl{grid-area:ctl;display:flex;align-items:center;gap:8px} .e10h-ctl[hidden]{display:none} .e10h-btn{width:44px;height:44px;flex:none;border-radius:50%;border:1.5px solid rgba(255,255,255,.62);background:transparent;color:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;font:inherit;transition:background-color .15s ease,border-color .15s ease} .e10h-btn:hover{background:rgba(255,255,255,.14);border-color:#fff} .e10h-btn[hidden]{display:none} .e10h-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .e10h-btn .e10h-ico-play{display:none} .e10h-btn.is-paused .e10h-ico-pause{display:none} .e10h-btn.is-paused .e10h-ico-play{display:block} .e10h-count{font-size:14px;font-weight:600;color:#fff;margin-left:6px;font-variant-numeric:tabular-nums;white-space:nowrap} /* the site's blue focus ring has no contrast against teal; on this band the ring is white */ .e10h-strip :focus-visible{outline:3px solid #fff;outline-offset:3px} @media(min-width:760px){ .e10h-strip__grid{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"label list ctl";padding-top:20px;padding-bottom:20px} .e10h-strip__label{max-width:9ch} } @media(prefers-reduced-motion:reduce){ .e10h-strip.is-live .e10h-item{transition:none} .e10h-btn{transition:none} } @media print{.e10h-ctl{display:none}} /* =========================================================================== D467 - HOMEPAGE SCOPE FIX. The build was styled against a copy of index.html that links css/bond-system.css. The live homepage does not: it carries its own inline stylesheet, and in it the button is deliberately scoped to three modules, ".wnew .btn, .anniv .btn, .upev .btn", while .stmt does not exist at all. So on the live page the hero's two calls to action rendered as bare text and the headline lost its capitals. The declarations below are copied from the homepage's own rules, not from bond-system.css, so the hero's buttons are identical to the ones in the modules beneath it. Nothing in the homepage's inline stylesheet is touched. ======================================================================== */ /* the statement headline, base .stmt from bond-system.css. Only the properties the homepage lacks: .e10h-title already sets size, line-height and letter-spacing and must keep them. */ .e10h-title{font-family:var(--font-sans);font-weight:300; text-transform:uppercase;color:var(--ink);padding-bottom:.04em} /* the button, copied from ".wnew .btn, .anniv .btn, .upev .btn" */ .e10h-cta .btn{font-family:var(--font-sans);font-weight:600;font-size:15px;line-height:1.1; display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:48px;padding:0 24px;border:1.5px solid transparent;border-radius:6px; text-align:center;cursor:pointer;text-decoration:none; transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease} .e10h-cta .btn:hover{transform:translateY(-1px)} .e10h-cta .btn:active{transform:none} .e10h-cta .btn--primary{background:var(--ink);color:#fff;border-color:var(--ink)} .e10h-cta .btn--primary:hover{background:var(--accent);border-color:var(--accent);color:#fff} .e10h-cta .btn--secondary{background:transparent;color:var(--ink);border-color:var(--ink)} .e10h-cta .btn--secondary:hover{background:var(--accent);border-color:var(--accent);color:#fff} @media(prefers-reduced-motion:reduce){ .e10h-cta .btn{transition:none} .e10h-cta .btn:hover{transform:none}} /* =========================================================================== D468 · HOMEPAGE PADDING AND WEIGHT FIX 21 September 2026 --------------------------------------------------------------------------- Two further consequences of the homepage being CSS-self-contained. 1 · CASCADE ORDER. index.html links this sheet at byte 873 and opens its own inline