/* The hero: venue footage on a loop behind the headline. An ordinary band in the page flow, 100svh tall. The scroll-pinned three-chapter journey this replaced is gone: the page simply scrolls, and Presence is the next section rather than a slide that covered the hero. */ .editorial .hero.hero--casino{position:relative;height:100svh;min-height:620px;overflow:hidden;background:var(--ink);visibility:visible;padding:0} /* The poster is the fallback if the video never decodes, so it carries full strength until the video is ready to cover it. */ .editorial .hero--casino .hero__media{opacity:1;clip-path:none;background:url('../video/facade-poster.jpg') center/cover} .editorial .hero--casino:has(.casino-chip[data-state=ready]) .hero__media{opacity:0} .casino-chip{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity 1.2s;pointer-events:none} .casino-chip[data-state=ready]{opacity:1} .casino-chip video{display:block;width:100%;height:100%;object-fit:cover} /* Legibility for the headline: a wash from the left, plus a floor so the scroll cue never sits on a blown highlight. */ .editorial .hero--casino::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(0,0,0,.36) 46%,transparent 72%), linear-gradient(0deg,rgba(0,0,0,.55),transparent 32%)} .editorial .hero--casino .hero__seal,.editorial .hero--casino .hero__foot{display:none} /* Centred on the hero rather than pinned near the top, and held in the same column as every other page: the measure is --max minus the page margins, so above 1680px the headline stops tracking the window edge and lines up with the nav above it. Anchored to a full-width inset instead of left/right so the width can be the min() of the two. */ .editorial .hero--casino .hero__in{position:absolute;top:50%;left:50%;translate:-50% -50%; width:min(100% - var(--edge) * 2, var(--max) - var(--edge) * 2); padding:0;max-width:none;margin:0;display:block;pointer-events:none;z-index:2} .editorial .hero--casino .hero__h1{font-size:clamp(44px,5.3vw,84px);line-height:.98;max-width:11ch;letter-spacing:-.055em;margin-bottom:24px;color:var(--paper)} .editorial .hero--casino .hero__eyebrow{font-size:9px;letter-spacing:.18em;margin-bottom:18px} .editorial .hero--casino .hero__cta{pointer-events:auto} .editorial .hero--casino .hero__cta .btn{font-size:10px;min-height:42px} .editorial .hero--casino .hero__cta .btn b{min-height:42px} .casino-scroll{position:absolute;bottom:35px;left:50%;translate:-50% 0; width:min(100% - var(--edge) * 2, var(--max) - var(--edge) * 2);display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line-d);padding-top:18px;font-size:10px;letter-spacing:.16em;color:var(--paper);z-index:3} .casino-scroll>span:last-child{font-size:26px} .casino-scroll:focus-visible{outline:2px solid var(--gold);outline-offset:5px} .editorial .hero--casino .motion-toggle{z-index:9;right:var(--edge)} /* The nav sits on the dark hero while it is on screen. */ .casino-active .nav .scrim::after{background:linear-gradient(180deg,rgba(0,0,0,.95),rgba(0,0,0,0))} .casino-active .nav .nav__menu a,.casino-active .nav .nav__go,.casino-active .nav .nav__burger,.casino-active .nav .nav__lang button{color:var(--paper)} .casino-active .nav .nav__logo img{filter:brightness(0) invert(1)} .casino-active .nav .nav__prog{background:linear-gradient(to right,var(--gold) calc(var(--sp,0)*100%),var(--line-d) 0)} .casino-active .nav .nav__logo{color:var(--paper)} @media(max-width:700px){ .editorial .hero.hero--casino{min-height:620px} .editorial .hero--casino .hero__h1{font-size:46px;max-width:10ch} .editorial .hero--casino::after{background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.3) 38%,rgba(0,0,0,.74))} } @media(prefers-reduced-motion:reduce){.casino-chip{transition:none}} /* PRESENCE FIGURES ---------------------------------------------------------- The three numbers rise as they come into view while their value counts up (editorial.js). Staggered so they read left to right rather than as a block. */ .facts-rise li{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease,ease),transform .7s var(--ease,ease)} .facts-rise li:nth-child(2){transition-delay:.12s} .facts-rise li:nth-child(3){transition-delay:.24s} .facts-rise.is-in li{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .facts-rise li{opacity:1;transform:none;transition:none} } /* CHIP BAND ----------------------------------------------------------------- A full bleed interlude between the markets index and the seven territories: the Senator chip turning in mid air, with the claim over it. It breaks the wrap on purpose: 100vw measured from the centre, which is what keeps it edge to edge inside a centred column without a horizontal scrollbar. */ .chipband{position:relative;width:100vw;margin-left:calc(50% - 50vw); height:clamp(320px,42vw,560px);overflow:hidden;background:var(--ink); display:grid;align-items:center} .chipband video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; opacity:0;transition:opacity .9s var(--ease,ease)} .chipband[data-state=ready] video{opacity:1} /* The copy sits on footage, so it needs a layer under it rather than luck: a wash from the left that also softens both ends into the bands either side. */ .chipband::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.88),rgba(0,0,0,.55) 40%,rgba(0,0,0,.18) 60%,rgba(0,0,0,.82))} /* No rule and no soft edge either: the footage meets the page straight. The hairlines that used to frame it are gone and nothing replaces them. */ .chipband__in{position:relative;z-index:1;padding-inline:var(--edge); width:min(100%,var(--max,1320px));margin-inline:auto; display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(32px,6vw,90px)} .chipband__k{display:block;color:var(--gold);margin-bottom:14px} .chipband__h{color:var(--paper);max-width:14ch;line-height:1.02;letter-spacing:-.04em;margin:0} /* The four names, in white, beside the claim. They are drawn at wildly different proportions (the Senator wordmark is 5:1, the other three are close to square), so they are sized by OPTICAL height inside equal boxes rather than by a single height, which would leave the wordmark three times wider than its neighbours. */ .chipband__brands{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.2vw,34px) clamp(26px,3vw,48px)} .chipband__brands li{display:flex;align-items:center;justify-content:center; min-width:clamp(112px,11vw,164px);min-height:clamp(54px,5.4vw,78px)} .chipband__brands img{width:auto;max-width:100%;object-fit:contain; filter:brightness(0) invert(1);opacity:.92} /* This one mark is already flattened to white pixels, so it must not go through the filter again: brightness(0) would take it to black before the invert. Matched by name, not by extension: the Senator wordmark is also a .png and it DOES need the filter. */ .chipband__brands img[src$='flamingo-white.png']{filter:none} .chipband__brands li:first-child img{max-height:clamp(20px,1.9vw,28px)} .chipband__brands li:not(:first-child) img{max-height:clamp(48px,4.8vw,70px)} @media(max-width:860px){ .chipband{height:auto;min-height:clamp(340px,78vw,460px);padding-block:clamp(34px,7vw,56px)} .chipband__in{grid-template-columns:minmax(0,1fr);gap:clamp(26px,6vw,40px)} .chipband__h{max-width:12ch} .chipband__brands{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .chipband__brands li{min-width:0;min-height:clamp(40px,11vw,58px)} .chipband__brands li:not(:first-child) img{max-height:clamp(34px,9vw,50px)} .chipband__brands li:first-child img{max-height:clamp(15px,3.6vw,22px)} .chipband::after{background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.45) 55%,rgba(0,0,0,.72))} } @media(prefers-reduced-motion:reduce){.chipband video{transition:none}} /* ========================================================================== MARKET INDEX · .rows--index The dimmed three column list, rebuilt as a typographic index entry. It keeps the .rows carriers on purpose, so three machines that already work keep working with no JavaScript change: the hairline at the top of the list and under every row, the line traced from the left as the row arrives (.js .rows li.rv::after), and the text theme runtime, which stamps data-on on every element that paints text and picks black or the near white against the ramp actually under it. What goes away is .rows--dim: the rows no longer rest at 42% opacity waiting for the scroll to light them, and the flag is no longer a 55% grey stamp. Paste at the end of assets/css/sharp.css. No new colour, no new radius, no shadow; three weights already in the system (400, 450, 500). ========================================================================== */ /* The row. Three columns: the mark, the entry, the figure. .rows li is already position:relative and display:grid, so only the tracks, the areas and the air are restated here. */ .rows--index li{ grid-template-columns:clamp(60px,5.6vw,96px) minmax(0,1fr) clamp(112px,13vw,184px); grid-template-areas: "idx name fig" "idx copy fig" "idx cta fig"; column-gap:clamp(20px,3vw,56px); row-gap:14px; align-items:start; padding:clamp(30px,3.4vw,52px) 0; } /* The mark. The flag at its intrinsic 32 x 24 and full colour: it is the only colour in the row that is not ours, and it earns its place by being small and exact rather than big and faded. */ .rows--index .mkx__idx{grid-area:idx;display:flex;flex-direction:column;align-items:flex-start; gap:14px;padding-top:5px} .rows--index .mkx__n{font-variant-numeric:tabular-nums;letter-spacing:.12em} .rows--index .mkx__flag{width:32px;height:24px;aspect-ratio:4/3;object-fit:contain} /* The entry. .h3 is the system's 22 to 32px heading; the measure is capped so the name always breaks into two lines and never runs under the figure. */ .rows--index .mkx__name{grid-area:name;max-width:21ch;text-wrap:balance} .rows--index .mkx__p{grid-area:copy;max-width:54ch} /* The figure. A 34px gold rule, the number, the unit. The number is TEXT, so it is never gold: gold reads 1.92:1 on paper. It takes the row's themed ink or ivory like everything else. */ .rows--index .mkx__fig{grid-area:fig;justify-self:end;display:flex;flex-direction:column; align-items:flex-end;gap:12px;padding-top:4px;text-align:right;max-width:none} /* The 3px gold tick over every figure was four more lines on a page the client asked to quieten. The number carries itself. */ .rows--index .mkx__fig::before{display:none} .rows--index .mkx__num{display:block;font-weight:400;font-size:clamp(38px,4.8vw,68px); line-height:.84;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .rows--index .mkx__unit{display:block} /* The action. The label keeps cta.market; its ::after is the row's hit area, so the whole entry is clickable while the link keeps a short accessible name (aria-labelledby joins the label and the heading, both translated). li::after is already the traced hairline, which is why the hit area hangs off the link and not off the row. */ .rows--index .mkx__cta{grid-area:cta;align-self:start;display:inline-flex;align-items:center; gap:10px;margin-top:2px} /* No stretched hit area: it covered the four paragraphs and made the copy unselectable. The row still responds on hover through :focus-within. */ .rows--index .mkx__cta svg{flex:none;width:15px;height:15px;color:inherit; transition:transform var(--dur-2) var(--ease)} /* currentColor, not the site's gold ring: on the paper end of this band the gold ring measures 1.92:1, the themed ink or ivory never drops below 4.5:1 */ .rows--index .mkx__cta:focus-visible{outline:2px solid currentColor;outline-offset:6px} /* The commitment. The whole row answers: a 3px gold bar lands in the gutter, the row's hairline goes from 15% to full strength, the arrow steps 5px and the label underlines. Nothing changes size and nothing changes place. */ .rows--index li::before{content:"";position:absolute;left:-18px;top:clamp(30px,3.4vw,52px); width:3px;height:34px;background:var(--gold); opacity:0;transform:scaleY(.25);transform-origin:50% 0; transition:opacity var(--dur-2) var(--ease),transform var(--dur-3) var(--ease-io)} .rows--index li:is(:hover,:focus-within)::before{opacity:1;transform:none} .rows--index li:is(:hover,:focus-within) .mkx__cta svg{transform:translateX(5px)} .rows--index li:is(:hover,:focus-within) .mkx__cta > span{ text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px} /* the traced line rests at opacity .15 and its own rule carries four classes, so this one carries five and wins wherever the block is pasted */ .js:not(.rm) .rows--index li.rv:is(:hover,:focus-within)::after{opacity:1} /* no JavaScript and no traced line: the painted hairline answers instead */ .rows--index li:is(:hover,:focus-within){background-image:linear-gradient(var(--gold),var(--gold))} /* Under 900px the figure keeps its place beside the mark, on the row's first line, the way a results table folds. The gutter bar has no gutter to live in, so it goes. */ @media (max-width:900px){ .rows--index li{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas: "idx fig" "name fig" "copy copy" "cta cta"; column-gap:20px;row-gap:12px;padding:30px 0} .rows--index li::before{display:none} .rows--index .mkx__idx{flex-direction:row;align-items:center;gap:12px;padding-top:0} .rows--index .mkx__name{max-width:none} .rows--index .mkx__fig{gap:10px;padding-top:0} .rows--index .mkx__num{font-size:clamp(34px,9vw,46px)} } /* Nothing travels. The bar and the underline still say what is happening. */ @media (prefers-reduced-motion:reduce){ .rows--index li::before, .rows--index .mkx__cta svg{transition:none} .rows--index li::before{transform:none} .rows--index li:is(:hover,:focus-within) .mkx__cta svg{transform:none} } /* The label owns the colour and the arrow follows it. Without this the svg inherits the row's stamp while the span reads its own, and the two can land black and white on the same background, ten pixels apart. */ .rows--index .mkx__cta,.rows--index .mkx__cta *{color:inherit} /* The index sits on the band's own ramp ------------------------------------ No surface of its own: the gradient of .band--wash-up shows through, which is what the design asks for. What it does need is the width back. The block's