/* Saudi Women's Football — hub landing, v3 ============================================================================ Built on the one asset the federation supplied: the SAFF brand gradient. Everything on this page is derived from it and nothing is invented. The gradient was measured off the supplied artwork rather than eyeballed. Sampled on a 9x9 grid with the logo masked out, it resolves to a clean four-corner mesh: top-left #87393F top-right #4F709D bot-left #1E0236 bot-right #14104B and a vertical falloff that is NOT linear — it holds near full strength for the first quarter, falls away between 0.35 and 0.75, and is flat black-purple for the last eighth. Those measured stops are in --ramp below, so the warm and cool ends sit at the same height on the page as they do in the artwork. The artwork also carries a low-poly facet field at about ±5 levels of luminance. That is reproduced as assets/brand/facets.svg — 660 jittered triangles at 0.4–7.5% alpha — rather than as a raster tile, so it scales to any viewport without a seam and costs ~15 KB over the wire. Why this looks nothing like v1 or v2: the gradient IS the identity, so the page carries no third colour of its own. Every surface is glass — white at 5–9% with a hairline — and the ground reads through all of it. The league colour coding is pulled back into the gradient too: the Premier League takes the warm end, the U-17 league the cool one. Nothing neon, nothing on paper. Type: 29LT Bukra, the family the brand book publishes. Four weights, no Black, so nothing here goes above 700. */ @font-face{font-family:Bukra;src:url(assets/fonts/29LTBukra-Light-Crg3LNJn.otf) format("opentype");font-weight:300;font-display:swap} @font-face{font-family:Bukra;src:url(assets/fonts/29LTBukra-DVLtNXDS.otf) format("opentype");font-weight:400;font-display:swap} @font-face{font-family:Bukra;src:url(assets/fonts/29LTBukra-Medium-Bf6wkqex.otf) format("opentype");font-weight:500;font-display:swap} @font-face{font-family:Bukra;src:url(assets/fonts/29LTBukra-Bold-BITvp0ab.otf) format("opentype");font-weight:700;font-display:swap} :root{ /* the four measured mesh corners, verbatim */ --g-tl:#87393F; --g-tr:#4F709D; --g-bl:#1E0236; --g-br:#14104B; /* the measured vertical falloff, used as a mask so the warm row sits over the deep row at exactly the strength the artwork has at that height */ --ramp:linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.955) 10%, rgba(0,0,0,.927) 20%, rgba(0,0,0,.839) 30%, rgba(0,0,0,.716) 40%, rgba(0,0,0,.560) 50%, rgba(0,0,0,.382) 60%, rgba(0,0,0,.224) 70%, rgba(0,0,0,.112) 80%, rgba(0,0,0,.014) 90%, rgba(0,0,0,0) 100%); /* the two ends of the gradient, lifted to hold type on the deep ground. #D98A8F is 6.9:1 and #9DC2E8 is 9.8:1 against the page floor — both clear AA for body text, not just for large. The raw corner colours are far too dark to set type in and are only ever used as fields. */ --ember:#87393F; --ember-lt:#D98A8F; --steel:#4F709D; --steel-lt:#9DC2E8; /* grounds */ --deep:#17063E; --deep2:#14104B; --floor:#12093A; /* glass — every panel on the page is one of these, never a solid */ --glass:rgba(255,255,255,.055); --glass2:rgba(255,255,255,.085); --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.28); /* ink */ --white:#fff; --ink-md:rgba(255,255,255,.76); --ink-lo:rgba(255,255,255,.56); --pad:clamp(20px,5vw,120px); --maxw:1800px; --r:8px; /* one facet cut, reused: the corner clip that echoes the low-poly field */ --cut:14px; } *{box-sizing:border-box} html{scroll-behavior:smooth} section,footer{scroll-margin-top:112px} /* iOS Safari paints the overscroll gutter with the canvas colour, and the canvas is propagated from . Both ends of this page are deep, so the gutter is invisible at either end. It has to stay on : give a background and it paints a real background box, which lands ABOVE the fixed ground layer and the ground disappears. */ html{background:var(--floor)} body{ margin:0;background:transparent; font-family:Bukra,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--white);-webkit-font-smoothing:antialiased; } /* ------------------------------------------------------------------ ground The ground is a fixed, viewport-sized layer rather than a background on . A body background sized `cover` is sized to the whole DOCUMENT, so on a phone — where this page is seven screens tall — it gets blown up about 4x and the facets go to mush. `background-attachment:fixed` sizes to the viewport but iOS Safari will not scroll it properly. A fixed pseudo element is the only thing that is both viewport-sized and stable on iOS. Two layers: the deep end of the brand mesh, then the facet field over it. */ body::before{ content:"";position:fixed;inset:0;z-index:-10;pointer-events:none; background: url(assets/brand/facets.svg) center/cover no-repeat, radial-gradient(130% 90% at 6% -18%,rgba(135,57,63,.42),transparent 58%), radial-gradient(130% 90% at 96% -14%,rgba(79,112,157,.38),transparent 56%), linear-gradient(168deg,var(--g-bl) 0%,#190A40 42%,var(--g-br) 100%); } img{max-width:100%;display:block} a{color:inherit} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} .skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip:focus{position:fixed;width:auto;height:auto;clip:auto;margin:0; inset-inline-start:8px;top:8px;background:var(--white);color:var(--deep); padding:10px 16px;z-index:99;text-decoration:none;font-weight:700} /* ------------------------------------------------------------------ type */ h1,h2,h3,h4,h5{margin:0;letter-spacing:-.01em;line-height:.96} .h{font-size:clamp(28px,3vw,46px);text-transform:uppercase} /* The section sub-line is no longer a filled chip. On glass a filled chip reads as a second, competing panel; a hairline rule carries the same job and lets the ground through, which is the whole point of this build. */ .sub{display:inline-block;margin:14px 0 0;padding:0 0 0 16px; border-inline-start:2px solid var(--ember-lt); color:var(--ink-md);font-size:clamp(13px,1vw,20px);font-weight:400; text-transform:uppercase;letter-spacing:.06em} .sec{padding:clamp(38px,4.4vw,72px) 0} .card{background:var(--glass);border:1px solid var(--line);border-radius:var(--r); padding:clamp(18px,1.6vw,26px);backdrop-filter:blur(10px)} /* Nothing above 700 — Bukra Black is not in the brand book. */ h1,h2,h3,h4,h5,.btn,.whynum b,.whynum em, .gs figcaption b,.bt b,.tonight li b,.tonight li div, .lcta .from,.final h2,.hero h1,.kicker, .fgrid h5,.mark b,.cmp thead th,.cmp td,.faq summary{font-weight:700} /* --------------------------------------------------------------- buttons White on the gradient is the federation's own contrast pair — the supplied artwork sets the whole lockup in white on exactly this field — and it is the only fill that holds at the same strength over the warm end, the cool end and the deep floor. A coloured button would only work on one third of it. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--white);color:var(--deep);text-decoration:none; padding:14px 26px;border-radius:4px;font-size:19px;letter-spacing:.01em; text-transform:uppercase;transition:transform .12s,box-shadow .16s,background .12s} .btn:hover{background:#fff;transform:translateY(-1px); box-shadow:0 8px 26px -10px rgba(0,0,0,.75),0 0 0 3px rgba(255,255,255,.16)} .btn:focus-visible{outline:3px solid var(--ember-lt);outline-offset:3px} .btn-lg{padding:20px 34px;font-size:clamp(19px,1.5vw,26px)} .btn-sm{padding:10px 20px;font-size:17px} .btn-o{background:none;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--line2)} .btn-o:hover{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px var(--white)} /* ------------------------------------------------------------------- nav */ .nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:clamp(14px,2vw,52px); padding:0 var(--pad);height:96px;background:rgba(18,9,58,.72); backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)} .mark{display:flex;align-items:center;gap:13px;text-decoration:none;line-height:1} /* The lockup's ink is not centred inside its own box: the crest fills the full height while the SAFF wordmark and its two sub-lines are inset, sitting a little low. Centring the BOXES leaves a big gap above the SAFF type and a small one below, which reads as the logo hanging off the bottom of our own two lines. So the crest tracks the two-line block and is lifted by a share of its own height until the two type blocks share a centre line. */ .mark .crest{height:clamp(32px,calc(2.32vw + 3px),40px);width:auto;flex:0 0 auto; transform:translateY(-3.4%)} .mark .word{display:flex;flex-direction:column;gap:3px;padding-inline-start:13px; border-inline-start:1px solid var(--line2)} footer .mark .crest{height:44px} @media (max-width:560px){.mark .word{display:none} .mark .crest{height:34px;transform:none}} /* 22px and 16px are the two sizes where this font's optical overshoot on the round caps (O S C G, drawn 16/1000 em taller than the flat ones) lands on the wrong side of a pixel boundary at 1x, so O and S rasterise a whole pixel shorter than H and E and the word looks like it dips. 21 and 17 land clean. Retina never showed it; most of our desktop traffic is not retina. */ .mark b{font-size:clamp(15px,1.4vw,21px);text-transform:uppercase;letter-spacing:-.01em} .mark .word>span{font-weight:500;font-size:clamp(10px,.75vw,13px);color:var(--ember-lt); text-transform:uppercase;letter-spacing:.14em} .nav nav{display:flex;gap:clamp(14px,2.4vw,52px);margin-left:auto} .nav nav a{font-weight:700;font-size:17px;color:var(--ink-md);text-decoration:none; text-transform:uppercase;padding:4px 0;transition:color .14s} .nav nav a:hover{color:#fff} .nav nav a.on{color:#fff;box-shadow:inset 0 -3px 0 var(--white)} .navr{display:flex;align-items:center;gap:22px;margin-left:auto} .lang{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--ink-lo)} .lang b{color:#fff}.lang i{color:var(--line2);font-style:normal} .lang a{text-decoration:none;font-size:19px} .lang a:hover{color:#fff} @media (max-width:1180px){.nav nav{display:none}} @media (max-width:640px){.nav .btn{display:none}} /* ------------------------------------------------------------------ hero The video keeps its place, but the scrim over it is the brand mesh rather than a flat purple: ember pooling from the top-left, steel from the top- right, both over a deep floor that is heaviest where the copy sits. The fixture card on the right needs a legible field under it too, so the scrim never drops below .52 on that side. */ .hero{position:relative;min-height:min(84vh,820px);display:flex;align-items:center; overflow:hidden;isolation:isolate} .herov{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .hero::after{content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(90% 120% at 0% 0%,rgba(135,57,63,.72),transparent 62%), radial-gradient(85% 115% at 100% 0%,rgba(79,112,157,.62),transparent 60%), linear-gradient(92deg,rgba(23,6,62,.95) 0%,rgba(23,6,62,.80) 44%,rgba(20,16,75,.52) 100%); } /* a hairline of the gradient across the foot of the hero, the way the brand artwork resolves from warm to cool across its own width */ .hero::before{content:"";position:absolute;inset:auto 0 0 0;height:2px;z-index:1; background:linear-gradient(90deg,var(--g-tl),#6B5480,var(--g-tr))} .heroin{padding-top:40px;padding-bottom:40px;padding-right:min(40vw,600px)} .kicker{margin:0 0 14px;color:var(--ember-lt);font-size:clamp(14px,1.2vw,24px); letter-spacing:.1em;text-transform:uppercase} .hero h1{font-size:clamp(44px,6.6vw,104px);text-transform:uppercase} .lede{margin:26px 0 34px;font-size:clamp(15px,1.5vw,26px);color:var(--ink-md); letter-spacing:.02em;text-transform:uppercase;font-weight:400} .tonight{position:absolute;right:var(--pad);top:50%;translate:0 -50%;width:min(430px,38vw); background:rgba(18,9,58,.58);border:1px solid var(--line); backdrop-filter:blur(16px) saturate(140%); border-radius:var(--r);padding:22px; clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)} .tonight h2{font-size:15px;color:var(--steel-lt);letter-spacing:.12em; text-transform:uppercase;margin-bottom:12px} .tonight ul{list-style:none;margin:0;padding:0} .tonight li{display:grid;grid-template-columns:78px 1fr;gap:4px 14px;align-items:baseline; padding:13px 0;border-top:1px solid var(--line)} .tonight li b{font-size:21px;text-transform:uppercase} .tonight li span{grid-column:1;color:var(--ink-lo);font-size:15px} .tonight li div{grid-column:2;grid-row:1/3;font-size:17px;line-height:1.25} .tonight li em{display:block;color:var(--ink-lo);font-style:normal;font-weight:400;font-size:14px;margin-top:3px} .tonight li div a{text-decoration:none} .tonight li div a:hover{color:var(--steel-lt)} .tonight .upl[hidden],.tonight .upsoon[hidden]{display:none} .tonight .upsoon p{margin:0 0 14px;color:var(--ink-md);font-size:16px;line-height:1.45} @media (max-width:1100px){.tonight{position:static;translate:0;width:auto;margin:0 var(--pad) 40px} .hero{display:block;padding-top:40px} /* the desktop rule parks the copy left of the fixture card; once that card drops below, the padding goes back to the wrap gutter — not to zero, or the headline sits flush against the right edge of the screen. */ .heroin{padding-right:var(--pad)}} /* --------------------------------------------------------------- leagues Both league banners are supplied at exactly 5:2 (2560x1024 and 1920x768) and carry the league lockup baked in at the edges, so the frame honours that ratio and nothing is cropped — an off-ratio box eats the mark. Colour coding is no longer green-vs-blue. On a federation page the two leagues take the two ends of the federation's own gradient: the senior league the warm end, the U-17 league the cool one. */ .lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr)); gap:18px;margin-top:26px} .lcard{position:relative;display:flex;flex-direction:column;border-radius:var(--r);overflow:hidden; background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(10px); transition:transform .16s,border-color .16s,background .16s} .lcard:hover{transform:translateY(-3px);border-color:var(--ember-lt);background:var(--glass2)} /* the accent rule along the top edge is the card's half of the gradient */ .lcard::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;z-index:3; background:linear-gradient(90deg,var(--g-tl),var(--ember-lt))} .lshot{position:relative;aspect-ratio:5/2;overflow:hidden;background:rgba(10,4,30,.5)} .lshot img.kv{width:100%;height:100%;object-fit:contain} .lstatus{position:absolute;right:16px;top:16px;z-index:2; background:rgba(255,255,255,.92);color:var(--deep); font-size:12px;font-weight:700;letter-spacing:.08em; padding:6px 12px;border-radius:14px;text-transform:uppercase} .lstatus.soon{background:none;box-shadow:inset 0 0 0 2px var(--ember-lt);color:var(--ember-lt)} .lcard.u17:hover{border-color:var(--steel-lt)} .lcard.u17::before{background:linear-gradient(90deg,var(--g-tr),var(--steel-lt))} .lcard.u17 .lcta .from{color:var(--steel-lt)} .lbody{padding:clamp(18px,1.5vw,24px);display:flex;flex-direction:column;flex:1;gap:14px} .lbody h3{font-size:clamp(19px,1.5vw,26px);text-transform:uppercase} .lbody p{margin:0;color:var(--ink-md);font-size:clamp(14px,.95vw,17px);line-height:1.45} .lcta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px; padding-top:14px;border-top:1px solid var(--line)} .lcta .from{color:var(--ember-lt);font-size:18px} /* the next league in — a real card, not a hole in the grid */ .lcard.next,.lcard.next:hover{background: radial-gradient(120% 90% at 10% 0%,rgba(135,57,63,.28),transparent 60%), radial-gradient(120% 90% at 92% 8%,rgba(79,112,157,.22),transparent 58%), var(--glass); border:1px dashed var(--line2);transform:none} .lcard.next::before{display:none} .nextin{display:flex;flex-direction:column;justify-content:center;flex:1;gap:16px; padding:clamp(28px,3vw,48px);text-align:left} .nextin .pip{display:inline-flex;align-items:center;gap:9px;align-self:flex-start; box-shadow:inset 0 0 0 2px var(--line2);color:var(--white);border-radius:15px; font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px} .nextin .pip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ember-lt); animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}} .nextin h3{font-size:clamp(22px,2vw,34px);text-transform:uppercase;max-width:18ch} .nextin p{margin:0;color:var(--ink-md);font-size:clamp(15px,1.1vw,19px);line-height:1.45;max-width:40ch} .nextin .dots{display:flex;gap:8px;margin-top:4px} .nextin .dots i{width:34px;height:6px;border-radius:3px;background:rgba(255,255,255,.16)} .nextin .dots i:first-child{background:var(--ember-lt)} .nextin .dots i:nth-child(2){background:rgba(217,138,143,.45)} /* --------------------------------------------------------------- compare Two spec cards side by side rather than a table: it reads as two things being chosen between, it scales to a third league without a new column, and the rows still line up because every card carries the same keys. */ .vsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:18px;margin-top:26px} .vscard{position:relative;display:flex;flex-direction:column;background:var(--glass); border:1px solid var(--line);backdrop-filter:blur(10px); border-radius:var(--r);overflow:hidden;transition:border-color .16s,background .16s} .vscard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px; background:linear-gradient(90deg,var(--g-tl),var(--ember-lt))} .vscard.youth::before{background:linear-gradient(90deg,var(--g-tr),var(--steel-lt))} .vscard:hover{border-color:var(--ember-lt);background:var(--glass2)} .vscard.youth:hover{border-color:var(--steel-lt)} .vshead{padding:clamp(20px,1.8vw,26px) clamp(18px,1.6vw,24px) 14px} .vskind{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--ember-lt);margin-bottom:12px} .vscard.youth .vskind{color:var(--steel-lt)} .vshead h3{font-size:clamp(18px,1.4vw,25px);text-transform:uppercase} .vslist{margin:0;padding:0 clamp(18px,1.6vw,24px)} .vsrow{display:grid;grid-template-columns:minmax(92px,32%) 1fr;gap:8px 16px; padding:11px 0;border-top:1px solid var(--line);align-items:baseline} .vsrow dt{color:var(--ink-lo);font-size:14px;text-transform:uppercase;letter-spacing:.06em} .vsrow dd{margin:0;font-weight:700;font-size:clamp(14px,.95vw,17px);line-height:1.3} .vsfoot{margin-top:auto;padding:16px clamp(18px,1.6vw,24px) clamp(18px,1.8vw,24px); display:flex;flex-wrap:wrap;align-items:center;gap:14px;border-top:1px solid var(--line)} .vsfoot .host{color:var(--ink-lo);font-size:15px} @media (max-width:520px){.vsrow{grid-template-columns:1fr;gap:4px}} /* ------------------------------------------------------------------ info */ .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px} /* The plate was carrying the low-poly facet cut — one corner clipped off. At 44px the cut is smaller than the icon inside it, so it did not read as a motif; it read as a corner that had failed to render. The cut needs room to be legible as a deliberate shape, and this plate has none, so the plate is a plain rounded square and the facet language stays where it has the size to work: the ground, and the fixture card in the hero. */ .bt .ic{display:grid;place-items:center;width:44px;height:44px;border-radius:10px; border:1px solid var(--line2);background:var(--glass2);color:var(--white); margin-bottom:14px;transition:border-color .2s,background .2s,color .2s} .bt .ic svg{width:22px;height:22px} .bt:hover .ic{border-color:var(--ember-lt);background:rgba(217,138,143,.16);color:var(--ember-lt)} .bt b{display:block;font-size:clamp(15px,1.05vw,19px);text-transform:uppercase;margin-bottom:8px} .bt p{margin:0;color:var(--ink-md);font-size:15px;line-height:1.45} @media (max-width:900px){.bgrid{grid-template-columns:1fr}} /* ------------------------------------------------------------------- why */ .whygrid{display:grid;grid-template-columns:minmax(280px,500px) 1fr;gap:18px;margin-top:24px; align-items:stretch} /* The gallery keeps its 16/9 box (align-self:start, so the row height does not stretch it and crop the frame); the stat card stretches to match it, with the counts line pinned to the bottom so both columns end level. */ .whynum{display:flex;flex-direction:column;position:relative;overflow:hidden} /* the big number sits over a pool of the warm end — the only place on the page where the gradient is allowed to come forward inside a panel */ .whynum::before{content:"";position:absolute;inset:auto auto -30% -20%;width:75%; aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,rgba(135,57,63,.5),transparent 68%);pointer-events:none} .whynum>*{position:relative} .whynum b{display:block;font-size:clamp(74px,9vw,150px);line-height:.82;letter-spacing:-.03em} .whynum em{display:block;margin-top:10px;color:var(--ember-lt);font-style:normal; font-size:clamp(16px,1.4vw,24px);text-transform:uppercase} .whynum p{color:var(--ink-md);font-size:clamp(14px,1vw,18px);line-height:1.45;max-width:46ch} .whynum .counts{margin-top:auto;padding-top:22px;color:#fff;font-weight:700;letter-spacing:.06em} .gal{position:relative;border-radius:var(--r);overflow:hidden;background:rgba(10,4,30,.6); border:1px solid var(--line); /* Capping the height while the width stayed at 100% broke the 16/9 box and `cover` trimmed the top and bottom of every frame — that is what cut the players' heads off. The cap is expressed as a width instead: the slides are absolutely positioned, so an auto width would collapse the box to nothing. 16/9 of the height we want to allow. */ aspect-ratio:16/9;min-height:0; width:100%;max-width:calc(min(46vh,420px) * 1.778);justify-self:center;align-self:start} .gs{margin:0;position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none} .gs.on{opacity:1;pointer-events:auto} .gs img{width:100%;height:100%;object-fit:cover} .gs figcaption{position:absolute;inset:auto 0 0 0;padding:26px 28px; background:linear-gradient(180deg,rgba(23,6,62,0),rgba(18,9,58,.94) 62%)} .gs figcaption b{display:block;font-size:clamp(20px,2vw,32px);text-transform:uppercase;letter-spacing:.02em} .gs figcaption span{display:block;margin-top:4px;color:var(--ink-md);font-size:15px} .gnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px; border-radius:50%;border:1px solid var(--line2);background:rgba(13,6,32,.5); backdrop-filter:blur(6px); color:#fff;font-size:26px;font-family:inherit;cursor:pointer;line-height:1;z-index:3} .gnav:hover{background:rgba(255,255,255,.18);border-color:#fff} .gprev{left:14px}.gnext{right:14px} .gdots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:9px} .gd{width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.42)} .gd.on{background:#fff;width:24px;border-radius:5px} @media (max-width:1000px){.whygrid{grid-template-columns:1fr} .gal{margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1);border-radius:0; border-inline:0;max-width:none} .gs figcaption{padding-left:var(--pad);padding-right:var(--pad)}} @media (max-width:760px){.gs figcaption{padding:16px var(--pad)} .gs figcaption b{font-size:clamp(17px,5.4vw,24px)} .gnav{width:44px;height:44px;font-size:21px} .gd{width:11px;height:11px}.gd.on{width:26px}.gdots{bottom:10px}} @media (max-width:420px){.gal{max-width:none}} /* ---------------------------------------------------------------- social */ .sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin-top:30px} .sgrid .card{display:flex;flex-direction:column;gap:12px} .sgrid .card em{font-style:normal;color:var(--steel-lt);font-weight:700;font-size:clamp(19px,1.6vw,28px)} .sgrid .card p{margin:0;color:var(--ink-md);font-size:16px} .sgrid .card a{margin-top:auto;align-self:flex-start} /* ------------------------------------------------------------------- faq */ .faq{margin-top:24px;display:grid;gap:6px} .faq details{background:var(--glass);border:1px solid var(--line); border-radius:var(--r);overflow:hidden;backdrop-filter:blur(10px)} .faq details[open]{background:var(--glass2);box-shadow:inset 4px 0 0 var(--ember-lt)} .faq summary{cursor:pointer;list-style:none;padding:16px 22px; font-size:clamp(15px,1.15vw,21px);text-transform:uppercase;display:flex; justify-content:space-between;gap:20px;align-items:center} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"▾";color:var(--ink-lo);font-size:.7em;flex:0 0 auto} .faq details[open] summary::after{content:"▴";color:var(--ember-lt)} /* A

body cannot be transitioned — the browser flips it between display:none and block — so the answer sits in a grid row that runs 0fr -> 1fr, and hub.js holds the panel open until the close has finished. */ .faqin{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s cubic-bezier(.4,0,.2,1)} .faq details[open] .faqin{grid-template-rows:1fr} .faqin>div{overflow:hidden;min-height:0} .faq summary::after{transition:transform .32s cubic-bezier(.4,0,.2,1)} .faq p{margin:0;padding:0 22px 20px;color:var(--ink-md);font-size:clamp(14px,1vw,18px); line-height:1.5;max-width:100ch} .faq a{color:var(--steel-lt);font-weight:700} /* ----------------------------------------------------------------- final The closing field is the brand gradient at full strength — the one place on the page where the artwork is reproduced as the client supplied it, warm to cool across the width, deep at the foot. */ .final{position:relative;overflow:hidden;isolation:isolate;padding:clamp(46px,6vw,104px) 0} .final video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2} .final::after{content:"";position:absolute;inset:0;z-index:-1; background: radial-gradient(90% 130% at 2% 0%,rgba(135,57,63,.80),transparent 62%), radial-gradient(85% 120% at 100% 4%,rgba(79,112,157,.66),transparent 58%), linear-gradient(92deg,rgba(23,6,62,.93),rgba(23,6,62,.72) 58%,rgba(20,16,75,.58)); } .final::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;z-index:1; background:linear-gradient(90deg,var(--g-tl),#6B5480,var(--g-tr))} .final h2{font-size:clamp(34px,4.6vw,74px);text-transform:uppercase} .final .lede{margin-bottom:30px} /* ---------------------------------------------------------------- footer */ footer{position:relative;background:rgba(12,5,34,.72);backdrop-filter:blur(14px); border-top:1px solid var(--line);padding:clamp(40px,4vw,64px) 0 30px} .fgrid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px} .fgrid h5{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;color:var(--ember-lt)} .fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .fgrid a{color:var(--ink-md);text-decoration:none;font-size:16px} .fgrid a:hover{color:#fff} .fgrid .mark{margin-bottom:14px;align-items:center} .fnote{color:var(--ink-md);font-size:15px;line-height:1.5;max-width:40ch} .pays{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .pays img{height:26px;width:auto;border-radius:3px} .fbot{margin-top:34px;padding-top:22px;border-top:1px solid var(--line);color:var(--ink-lo);font-size:14px} @media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.fgrid{grid-template-columns:1fr}} @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important; scroll-behavior:auto!important}} /* ------------------------------------------------------------- instagram One strip, six reels, no account headers — so the grid carries the gap under the sub-line that the old per-account block used to. Tiles are 9/16 because every one of them is a reel: a square crop cut the top and bottom off each. */ .iggrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;max-width:1320px; margin-top:26px} .igt{position:relative;display:block;aspect-ratio:9/16;overflow:hidden;border-radius:5px; background:rgba(10,4,30,.5);border:1px solid var(--line)} .igt img,.igt video{width:100%;height:100%;object-fit:cover;transition:transform .3s} .igt:hover{border-color:var(--line2)} .igt:hover img,.igt:hover video{transform:scale(1.05)} .igt .vb{position:absolute;right:10px;top:10px;width:24px;height:24px;border-radius:50%; background:rgba(13,6,32,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); display:grid;place-items:center;pointer-events:none} /* A border triangle's box is as wide as its base plus whatever the opposite border reserves, and the ink itself tapers — its centre of mass sits a third in from the flat edge. Centring that box parks the glyph visibly back from the middle of the circle. The opposite border is dropped so the box is the triangle, then the whole thing is pushed out by a sixth of the base, which puts the centroid on the circle's centre. */ .igt .vb::after{content:"";width:0;height:0; border-top:5px solid transparent;border-bottom:5px solid transparent; border-left:9px solid #fff; transform:translateX(1.5px)} @media (max-width:1000px){.iggrid{grid-template-columns:repeat(3,1fr);margin-top:20px}} @media (max-width:560px){.iggrid{gap:10px}} /* A laptop with a bookmarks bar leaves about 680px under our header, and a section the reader cannot take in at a glance loses its context. Below that height everything tightens one more notch rather than growing scrollbars. */ @media (min-width:1000px) and (max-height:820px){ .sec{padding:34px 0} .h{font-size:clamp(26px,2.4vw,38px)} .sub{margin-top:10px;font-size:14px} .lgrid,.vsgrid,.bgrid,.whygrid{margin-top:20px} .whynum b{font-size:clamp(64px,7vw,110px)} .gal{max-width:calc(38vh * 1.778)} .faq summary{padding:13px 20px} .faq p{padding:0 20px 16px} .iggrid{margin-top:18px;max-width:1080px} } @media (min-width:1000px) and (max-height:700px){ .sec{padding:24px 0} .h{font-size:clamp(24px,2vw,32px)} .lbody{padding:14px 16px;gap:10px} /* the blurb is supporting copy — two lines is enough when the window is this short, and it beats letting the card push the button off screen */ .lbody p{font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden} .iggrid{max-width:780px;gap:10px;margin-top:14px} .vsrow{padding:8px 0} .vshead{padding:16px 18px 10px} .vsfoot{padding:12px 18px 16px} .card{padding:14px} .bt p{font-size:14px} .bt .ic{width:38px;height:38px;margin-bottom:10px} .faq summary{padding:11px 18px} .final{padding:34px 0} } /* ------------------------------------------------------------ mobile fit */ @media (max-width:760px){ .sub{padding-inline-start:12px;margin-top:12px;font-size:14px;line-height:1.35} .card{padding:20px 18px} .lbody,.vshead,.vslist,.vsfoot{padding-left:18px;padding-right:18px} /* backdrop-filter on a dozen panels at once is the single biggest paint cost on a mid-range Android, and at this width the panels are full-bleed anyway, so the blur buys nothing. The glass is carried by the fill alone. */ .card,.lcard,.vscard,.faq details,.tonight{backdrop-filter:none} .tonight{background:rgba(18,9,58,.9)} } @media (max-width:560px){ .hero h1{font-size:clamp(34px,10vw,44px)} .final h2{font-size:clamp(30px,9vw,42px)} [dir=rtl] .hero h1{font-size:clamp(30px,8.4vw,40px)} } /* ------------------------------------------------------------------- rtl */ [dir=rtl] .nav nav,[dir=rtl] .navr{margin-left:0;margin-right:auto} [dir=rtl] .cmp th,[dir=rtl] .cmp td{text-align:right} [dir=rtl] .heroin{padding-right:0;padding-left:min(40vw,600px)} [dir=rtl] .tonight{right:auto;left:var(--pad); clip-path:polygon(0 0,100% 0,100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))} [dir=rtl] .lstatus{right:auto;left:16px} [dir=rtl] .faq details[open]{box-shadow:inset -4px 0 0 var(--ember-lt)} [dir=rtl] .gprev{left:auto;right:14px} [dir=rtl] .gnext{right:auto;left:14px} [dir=rtl] .nextin{text-align:right} [dir=rtl] .igt .vb{right:auto;left:10px} /* mirrored for RTL, and the nudge rides along in the flipped frame */ [dir=rtl] .igt .vb::after{transform:scaleX(-1) translateX(1.5px)} [dir=rtl] .mark .word>span{letter-spacing:0} /* the gradient reads warm-to-cool left-to-right in the artwork; in an RTL frame the reading order flips, so the accent rules flip with it */ [dir=rtl] .hero::before,[dir=rtl] .final::before{ background:linear-gradient(270deg,var(--g-tl),#6B5480,var(--g-tr))} [dir=rtl] .lcard::before,[dir=rtl] .vscard::before{ background:linear-gradient(270deg,var(--g-tl),var(--ember-lt))} [dir=rtl] .lcard.u17::before,[dir=rtl] .vscard.youth::before{ background:linear-gradient(270deg,var(--g-tr),var(--steel-lt))} [dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .h,[dir=rtl] .lede,[dir=rtl] .kicker, [dir=rtl] .sub,[dir=rtl] .btn, [dir=rtl] .fgrid h5,[dir=rtl] .bt b,[dir=rtl] .tonight h2, [dir=rtl] .gs figcaption b,[dir=rtl] .nextin .pip,[dir=rtl] .lstatus, [dir=rtl] .faq summary,[dir=rtl] .vshead h3, [dir=rtl] .vskind,[dir=rtl] .vsrow dt{text-transform:none;letter-spacing:0} [dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{line-height:1.12} [dir=rtl] .hero h1{font-size:clamp(38px,5.4vw,86px)} [dir=rtl] .final h2{font-size:clamp(32px,4.6vw,76px)} @media (max-width:1100px){ /* the base rtl rule zeroes padding-right to mirror the desktop layout; once the fixture card drops below, both gutters come back. */ [dir=rtl] .heroin{padding-left:var(--pad);padding-right:var(--pad)} [dir=rtl] .tonight{left:auto}}