/* Saudi Women's Football — hub landing Design system taken from swpl-v2.platinumlist.ai (SAFF brand book). Type: 29LT Bukra. The brand book publishes four weights and no Black, so nothing here goes above 700 — same rule as the league site. Ground: Colorway (2) from WPL 26/27 New Elements, composed landscape. Colour coding: green is the Premier League, blue is the U-17 league. The page routes to the league sites; it carries no fixture list of its own. */ @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{ --p900:#1A0D2C; --p800:#210A36; --p600:#2A1B3D; --p500:#3B2B4E; --green:#02B510; --greenb:#02F119; --lilac:#A79ABA; --white:#fff; --amber:#C5DB65; --pink:#FF23A7; --plate:#F4F1F7; /* Saudi Girls' U-17 runs on its own colourway — this blue is sampled from the league's key visual (#47AFCD), lifted for UI contrast. Green stays the Premier League's. */ --cyan:#4FC6E4; --cyanb:#7EE0F5; --cyan-ink:#06222B; --chip:rgba(26,13,44,.965); --chips:rgba(26,13,44,.86); --pad:clamp(20px,5vw,120px); --maxw:1800px; } *{box-sizing:border-box} html{scroll-behavior:smooth} section,footer{scroll-margin-top:112px} body{ margin:0;background:#302061; font-family:Bukra,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--white);-webkit-font-smoothing:antialiased; } /* The ground is a fixed layer, not a background on . A body background with `cover` is sized to the whole document, so on a phone — where the page is six or seven screens tall — it was being blown up about 4x and went to mush. `background-attachment:fixed` sizes to the viewport but iOS Safari does not scroll it properly, so the layer is a fixed pseudo element instead: viewport-sized, no upscaling, no jank. */ body::before{ content:"";position:fixed;inset:0;z-index:-10;pointer-events:none; /* Colorway (2) from WPL 26/27 New Elements, composed landscape: the streak blocks sit at near-native scale so the diagonal keeps its true angle. */ background:#302061 url(assets/img/ground.jpg) center center/cover no-repeat; } /* Portrait screens get the colourway in its original vertical proportion, so both streak corners stay in frame instead of being cropped to plain purple. */ @media (max-width:820px){ body::before{background-image:url(assets/img/ground-tall.jpg)} } 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(--green);color:var(--p900); 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(30px,3.4vw,54px);text-transform:uppercase} .sub{display:inline-block;margin:18px 0 0;padding:11px 18px;border-radius:4px; background:var(--chip);color:var(--lilac);font-size:clamp(13px,1vw,20px); text-transform:uppercase;letter-spacing:.02em} .sec{padding:clamp(48px,6vw,96px) 0} .card{background:var(--chip);border-radius:6px;padding:clamp(20px,2vw,34px)} /* 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,.lfacts b,.tonight li b,.tonight li div, .lcta .from,.final h2,.hero h1,.kicker,.sub,.lede, .fgrid h5,.mark b,.cmp thead th,.cmp td,.faq summary{font-weight:700} /* --------------------------------------------------------------- buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--green);color:var(--p900);text-decoration:none; padding:14px 26px;border-radius:4px;font-size:19px;letter-spacing:.01em; text-transform:uppercase;transition:transform .12s,background .12s} .btn:hover{background:var(--greenb);transform:translateY(-1px)} .btn:focus-visible{outline:3px solid var(--amber);outline-offset:3px} .btn-lg{padding:20px 34px;font-size:clamp(19px,1.5vw,26px)} .btn-sm{padding:10px 20px;font-size:16px} .btn-o{background:none;color:var(--white);box-shadow:inset 0 0 0 2px var(--lilac)} .btn-o:hover{background:rgba(255,255,255,.08)} /* ------------------------------------------------------------------- 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(20,8,34,.94); backdrop-filter:blur(8px);border-bottom:1px solid var(--p500)} .mark{display:flex;flex-direction:column;gap:3px;text-decoration:none;line-height:1} .mark b{font-size:clamp(15px,1.4vw,22px);text-transform:uppercase;letter-spacing:-.01em} .mark span{font-weight:500;font-size:clamp(10px,.75vw,13px);color:var(--greenb); 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(--lilac);text-decoration:none; text-transform:uppercase;padding:4px 0} .nav nav a:hover{color:#fff} .nav nav a.on{color:#fff;box-shadow:inset 0 -3px 0 var(--green)} .navr{display:flex;align-items:center;gap:22px;margin-left:auto} .lang{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--lilac)} .lang b{color:#fff}.lang i{color:var(--p500);font-style:normal} .lang a{text-decoration:none;font-size:19px} @media (max-width:1180px){.nav nav{display:none}} @media (max-width:640px){.nav .btn{display:none}} /* ------------------------------------------------------------------ hero */ .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:linear-gradient(90deg,rgba(26,13,44,.94) 0%,rgba(26,13,44,.72) 46%,rgba(26,13,44,.4) 100%)} .heroin{padding-top:40px;padding-bottom:40px;padding-right:min(40vw,600px)} .kicker{margin:0 0 14px;color:var(--greenb);font-size:clamp(14px,1.2vw,24px); letter-spacing:.06em;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(--lilac); letter-spacing:.02em;text-transform:uppercase} .tonight{position:absolute;right:var(--pad);top:50%;translate:0 -50%;width:min(430px,38vw); background:var(--chip);border-radius:6px;padding:22px} .tonight h2{font-size:15px;color:var(--greenb);letter-spacing:.08em; 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(--p500)} .tonight li b{font-size:21px} .tonight li span{grid-column:1;color:var(--lilac);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(--lilac);font-style:normal;font-weight:400;font-size:14px;margin-top:3px} @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. */ .lgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:22px;margin-top:34px} .lcard{position:relative;display:flex;flex-direction:column;border-radius:6px;overflow:hidden; background:var(--p600);box-shadow:inset 0 0 0 1px var(--p500); transition:transform .16s,box-shadow .16s} .lcard:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--green)} .lshot{position:relative;aspect-ratio:5/2;overflow:hidden;background:var(--p800)} .lshot img.kv{width:100%;height:100%;object-fit:contain} .lstatus{position:absolute;right:16px;top:16px;z-index:2;background:rgba(2,181,16,.94); color:var(--p900);font-size:12px;font-weight:700;letter-spacing:.06em; padding:6px 12px;border-radius:14px;text-transform:uppercase} .lstatus.soon{background:none;border:2px solid var(--amber);color:var(--amber)} /* U-17 carries its own blue through the badge, the rule and the button. */ .lcard.u17:hover{box-shadow:inset 0 0 0 1px var(--cyan)} .lcard.u17 .lstatus{background:rgba(79,198,228,.95);color:var(--cyan-ink)} .lcard.u17 .lcta .from{color:var(--cyanb)} .lcard.u17 .btn{background:var(--cyan);color:var(--cyan-ink)} .lcard.u17 .btn:hover{background:var(--cyanb)} .lbody{padding:clamp(20px,2vw,32px);display:flex;flex-direction:column;flex:1;gap:18px} .lbody h3{font-size:clamp(21px,1.8vw,32px);text-transform:uppercase} .lbody p{margin:0;color:var(--lilac);font-size:clamp(15px,1.1vw,19px);line-height:1.45} .lfacts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr); gap:10px;border-top:1px solid var(--p500);padding-top:18px} .lfacts b{display:block;font-size:clamp(19px,1.6vw,28px);line-height:1} .lfacts span{display:block;margin-top:5px;color:var(--lilac);font-size:13px; text-transform:uppercase;letter-spacing:.04em} .lcta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:14px} .lcta .from{color:var(--greenb);font-size:18px} /* the next league in — a real card, not a hole in the grid */ .lcard.next{background: radial-gradient(120% 90% at 12% 0%,rgba(2,181,16,.16),transparent 62%), linear-gradient(180deg,var(--p600),var(--p800)); box-shadow:inset 0 0 0 1px var(--p500)} .lcard.next:hover{transform:none;box-shadow:inset 0 0 0 1px var(--p500)} .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; border:2px solid var(--amber);color:var(--amber);border-radius:15px; font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 13px} .nextin .pip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--amber); 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(--lilac);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:var(--p500)} .nextin .dots i:first-child{background:var(--green)} .nextin .dots i:nth-child(2){background:rgba(2,181,16,.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%,420px),1fr)); gap:22px;margin-top:34px} .vscard{position:relative;display:flex;flex-direction:column;background:var(--chip); border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--p500); transition:box-shadow .16s} .vscard::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--green)} .vscard.youth::before{background:var(--cyan)} .vscard:hover{box-shadow:inset 0 0 0 1px var(--green)} .vscard.youth:hover{box-shadow:inset 0 0 0 1px var(--cyan)} .vshead{padding:clamp(24px,2.4vw,34px) clamp(20px,2vw,30px) 20px} .vskind{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--greenb);margin-bottom:12px} .vscard.youth .vskind{color:var(--cyan)} .vshead h3{font-size:clamp(20px,1.7vw,30px);text-transform:uppercase} .vslist{margin:0;padding:0 clamp(20px,2vw,30px)} .vsrow{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:10px 18px; padding:16px 0;border-top:1px solid var(--p500);align-items:baseline} .vsrow dt{color:var(--lilac);font-size:14px;text-transform:uppercase;letter-spacing:.04em} .vsrow dd{margin:0;font-weight:700;font-size:clamp(15px,1.1vw,19px);line-height:1.35} .vsfoot{margin-top:auto;padding:22px clamp(20px,2vw,30px) clamp(24px,2.4vw,32px); display:flex;flex-wrap:wrap;align-items:center;gap:14px;border-top:1px solid var(--p500)} .vsfoot .host{color:var(--lilac);font-size:15px} .vscard.youth .vsfoot .btn{background:var(--cyan);color:var(--cyan-ink)} .vscard.youth .vsfoot .btn:hover{background:var(--cyanb)} @media (max-width:520px){.vsrow{grid-template-columns:1fr;gap:4px}} /* ------------------------------------------------------------------ info */ .bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px} .bt .ic{display:grid;place-items:center;width:52px;height:52px;border-radius:14px; border:2px solid var(--p500);background:rgba(2,181,16,.08);color:var(--greenb); margin-bottom:18px;transition:border-color .2s,background .2s} .bt .ic svg{width:26px;height:26px} .bt:hover .ic{border-color:var(--green);background:rgba(2,181,16,.16)} .bt b{display:block;font-size:clamp(17px,1.3vw,22px);text-transform:uppercase;margin-bottom:10px} .bt p{margin:0;color:var(--lilac);font-size:17px;line-height:1.45} @media (max-width:900px){.bgrid{grid-template-columns:1fr}} /* ------------------------------------------------------------------- why */ .whygrid{display:grid;grid-template-columns:minmax(300px,560px) 1fr;gap:22px;margin-top:30px; align-items:start} .whynum b{display:block;font-size:clamp(90px,13vw,220px);line-height:.82;letter-spacing:-.03em} .whynum em{display:block;margin-top:14px;color:var(--greenb);font-style:normal; font-size:clamp(18px,1.8vw,30px);text-transform:uppercase} .whynum p{color:var(--lilac);font-size:clamp(15px,1.2vw,21px);line-height:1.45;max-width:46ch} .whynum .counts{margin-top:22px;color:#fff;font-weight:700;letter-spacing:.02em} .gal{position:relative;border-radius:6px;overflow:hidden;background:#12071f; aspect-ratio:16/9;min-height:0;max-height:min(72vh,640px);justify-self:center;width:100%} .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(26,13,44,0),rgba(20,8,34,.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(--lilac);font-size:15px} .gnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px; border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(13,6,22,.5); color:#fff;font-size:26px;font-family:inherit;cursor:pointer;line-height:1;z-index:3} .gnav:hover{background:rgba(2,181,16,.35);border-color:var(--green)} .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:var(--greenb);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} .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-height:26vh}} /* ---------------------------------------------------------------- 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(--greenb);font-weight:700;font-size:clamp(19px,1.6vw,28px)} .sgrid .card p{margin:0;color:var(--lilac);font-size:16px} .sgrid .card a{margin-top:auto;align-self:flex-start} /* ------------------------------------------------------------------- faq */ .faq{margin-top:30px;display:grid;gap:8px} .faq details{background:var(--chip);border-radius:6px;overflow:hidden} .faq details[open]{box-shadow:inset 6px 0 0 var(--green)} .faq summary{cursor:pointer;list-style:none;padding:24px 26px; font-size:clamp(17px,1.5vw,28px);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(--lilac);font-size:.7em;flex:0 0 auto} .faq details[open] summary::after{content:"▴";color:var(--greenb)} .faq p{margin:0;padding:0 26px 26px;color:var(--lilac);font-size:clamp(15px,1.2vw,21px); line-height:1.55;max-width:100ch} .faq a{color:var(--greenb);font-weight:700} /* ----------------------------------------------------------------- final */ .final{position:relative;overflow:hidden;isolation:isolate;padding:clamp(70px,9vw,150px) 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:linear-gradient(90deg,rgba(26,13,44,.93),rgba(26,13,44,.55) 60%,rgba(26,13,44,.3))} .final h2{font-size:clamp(38px,5.6vw,92px);text-transform:uppercase} .final .lede{margin-bottom:30px} /* ---------------------------------------------------------------- footer */ footer{background:rgba(20,8,34,.96);border-top:1px solid var(--p500);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:.08em;color:var(--greenb)} .fgrid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} .fgrid a{color:var(--lilac);text-decoration:none;font-size:16px} .fgrid a:hover{color:#fff} .fgrid .mark{margin-bottom:14px} .fnote{color:var(--lilac);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(--p500);color:var(--lilac);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 */ .igblock{margin-top:34px} .igblock + .igblock{margin-top:44px} .ighead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:14px} .ighead em{font-style:normal;color:var(--greenb);font-weight:700;font-size:clamp(19px,1.6vw,28px)} .ighead span{color:var(--lilac);font-size:16px} .ighead .btn{margin-inline-start:auto} .iggrid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .iggrid.six{grid-template-columns:repeat(6,1fr)} .igt{position:relative;display:block;aspect-ratio:1;overflow:hidden;border-radius:4px; background:var(--p600);box-shadow:inset 0 0 0 1px var(--p500)} .igt img,.igt video{width:100%;height:100%;object-fit:cover;transition:transform .3s} .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,22,.72);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35); display:grid;place-items:center;pointer-events:none} .igt .vb::after{content:"";width:0;height:0;margin-inline-start:2px; border:5px solid transparent;border-left:8px solid #fff} @media (max-width:1000px){.iggrid,.iggrid.six{grid-template-columns:repeat(3,1fr)}} @media (max-width:560px){.iggrid,.iggrid.six{grid-template-columns:repeat(2,1fr)}} /* ------------------------------------------------------------ mobile fit The section sub-line is a chip on desktop; on a phone that chip's own padding pushed it in from the heading above it and read as a stray indent down the left edge of every block. Below 760 it goes flush. */ @media (max-width:760px){ .sub{background:none;padding:0;margin-top:12px;font-size:14px;line-height:1.35} .card{padding:20px 18px} .lbody,.vshead,.vslist,.vsfoot{padding-left:18px;padding-right:18px} .igblock + .igblock{margin-top:32px} .ighead .btn{margin-inline-start:0} } @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)} [dir=rtl] .lstatus{right:auto;left:16px} [dir=rtl] .faq details[open]{box-shadow:inset -6px 0 0 var(--green)} [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} [dir=rtl] .igt .vb::after{transform:scaleX(-1)} [dir=rtl] .mark span{letter-spacing:0} [dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] .h,[dir=rtl] .lede,[dir=rtl] .kicker, [dir=rtl] .sub,[dir=rtl] .lfacts span,[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}}