@import "./tokens.css"; * { box-sizing: border-box; } html, body { margin: 0; } /* the layout puts a legacy utility class (.bg-gray-01, #e5eaec) on that out-specifies a bare element selector — repeat it so the token ground wins */ body, body.bg-gray-01 { font-family: var(--font-body); color: var(--c-ink); background: var(--c-bg); line-height: 1.45; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } /* ---- layout ---- */ /* One vertical rhythm for the whole page: every section wrapper pads with --section-pad-y, so the VISIBLE gap between sections is 2x this value — 32px mobile / 48px tablet / 64px wide. (The Figma page frames don't expose inter-section gaps as data; these values follow the section frames' internal 30px rhythm and replace the old 64-96px gaps that ran consistently airier than the comps.) */ :root { --section-pad-y: 16px; } @media (min-width: 768px) { :root { --section-pad-y: 24px; } } @media (min-width: 1024px) { :root { --section-pad-y: 32px; } } .home { width: 100%; display: flex; flex-direction: column; } .section { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: var(--section-pad-y) var(--sp-4); } .section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); /* head -> content: Figma section frames all use a 30px desktop / ~12px mobile gap */ margin-bottom: 12px; } @media (min-width: 768px) { .section__head { margin-bottom: 30px; } } .section__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-20); margin: 0; } @media (min-width: 768px) { .section__title { font-size: 24px; } } .section__sub { margin: 4px 0 0; color: var(--c-muted); font-size: var(--fs-14); } /* Screen-reader/crawler-only text (the SEO H1 + tagline in the baked hero): visually removed but present in the accessibility tree and the DOM for crawlers. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---- hero (white card; sports/casino = 1 hero, hybrid = 2 side by side) ---- */ /* Breathing gap between the site header and the first section on desktop. */ .hero { width: 100%; margin-top: var(--sp-4); } /* Below 992px the primary nav is FIXED (53px; 40px ≤575) — the in-flow secondary nav is display:none ≤991 (global.css). The dismissible Trustpilot strip nets ZERO flow height (its margin-bottom cancels its height), so "nav height + gap" yields the same 16px breathing room whether the strip is open (gap sits below the strip) or closed (gap sits below the nav) — no per-state rules needed. */ @media screen and (max-width: 991px) { .hero { margin-top: calc(53px + var(--sp-4)); } } @media screen and (max-width: 575px) { .hero { margin-top: calc(40px + var(--sp-4)); } } .hero__grid { max-width: var(--maxw); margin: 0 auto; /* same horizontal gutter as .section so the hero card aligns with every other section */ padding: 0 var(--sp-4); display: grid; grid-template-columns: 1fr; gap: var(--sp-4); } /* Multi-banner hero (hybrid): below 768px the pair rides the shared carousel treatment instead of stacking — 1-up swipe track, next-card peek while it overflows (is-draggable from carousel.js), no arrows on mobile. */ .hero__grid--2 { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px; /* Figma 3335-8956 mobile card gap (space-x/3) — desktop restores --sp-4 */ overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--sp-4); /* snap inside the page gutter */ scrollbar-width: none; } .hero__grid--2::-webkit-scrollbar { display: none; } .hero__grid--2 > .hero__inner { scroll-snap-align: start; } .hero__grid--2.is-draggable { /* 1-up + next-banner peek: 12px gap + ~24px sliver (Figma 3335-8956 — was 60px total, which showed a much wider peek than the design). */ grid-auto-columns: calc(100% - 36px); } @media (min-width: 768px) { .hero__grid--2, .hero__grid--2.is-draggable { grid-template-columns: 1fr 1fr; /* both banners fit — static 50/50 per design */ grid-auto-columns: calc((100% - 16px) / 2); /* 3+ banners would overflow at half width */ gap: var(--sp-4); /* the 50/50 split + the column calc above assume the 16px gap */ } /* Hybrid halves (Figma 2472:15482): 32px headline over a FIXED 248px CTA column — both cards identical. The fixed width matters beyond fidelity: the content column shrink-wraps here, so a percentage CTA width resolves against an INDEFINITE size and the two cards rendered visibly different pills. */ .hero__grid--2 .hero__title { font-size: clamp(22px, 2.25vw, 32px); line-height: 1.15; margin-bottom: 20px; } /* CTA + microcopy scale with the card (cqw = 1% of the card width, via the baked card's container-type). Ceilings are the Figma full-size half-card values (248px / 50px / 18px at the ~688px card); as the half-cards shrink on narrower desktops the button scales down proportionally to sensible floors. */ .hero__grid--2 .hero__cta { width: clamp(150px, 36cqw, 248px); max-width: 100%; height: clamp(38px, 7.3cqw, 50px); font-size: clamp(13px, 2.6cqw, 18px); padding: 0 clamp(10px, 2.3cqw, 16px); } .hero__grid--2 .hero__microcopy { width: clamp(150px, 36cqw, 248px); max-width: 100%; font-size: clamp(11px, 2cqw, 14px); margin-top: clamp(7px, 1.6cqw, 11px); } } .hero__inner { position: relative; background: #ffffff; border: 1px solid var(--color-card-border); /* Figma card border (#e7ecf3) */ border-radius: var(--radius); overflow: hidden; /* Figma mobile card is 343×164. Between ~500 and 767px the whole composition scales with the viewport (card height, type, and the card-height-locked scene together) so the wider card doesn't open a dead zone between text and art; the card always grows faster than the type stack, so nothing overflows. */ min-height: clamp(164px, 33vw, 253px); box-shadow: var(--shadow); display: flex; align-items: center; } /* ---- BAKED-title hero (headline rendered into the image) ---- The card takes the IMAGE's aspect so the whole scene — including the baked title — shows uncropped, and the live content (CTA + microcopy only) is overlaid under the title. Anchors are proportional (% of the aspect-locked card), so the button tracks the baked title across every viewport. Values read off the baked art: the title occupies the upper ~half, so content starts just below it. */ /* Doubled class (.hero__inner.hero__inner--baked, specificity 0,2,0) so these box rules beat every single-class .hero__inner { min-height } rule at ANY breakpoint, order-independent. min-height MUST stay 0: with a forced min-height the browser derives the card's WIDTH from that height via aspect-ratio (320 × 707/262 = 864px) and the cards overflow their grid columns and overlap. With min-height 0 the grid column drives the width and aspect-ratio derives the height. */ .hero__inner.hero__inner--baked { display: block; min-height: 0; aspect-ratio: 11 / 5; /* hybrid mobile baked art (330×150) */ container-type: inline-size; /* so the CTA/microcopy scale in cqw with the card width */ } /* Single hero (sports/casino) mobile art is 366×150 — wider than the hybrid 330×150, so the 11/5 box above would cover-crop the baked title's sides. Take its own ratio (grid--1 only). */ .hero__grid--1 .hero__inner.hero__inner--baked { aspect-ratio: 366 / 150; } .hero__inner--baked .hero__img { inset: 0; width: 100%; height: 100%; object-fit: cover; /* card aspect == image aspect, so no crop */ object-position: center; } .hero__inner--baked .hero__content { position: absolute; top: 50%; /* under the baked title */ left: 6%; right: 6%; bottom: 0; padding: 0; max-width: none; align-items: flex-start; justify-content: flex-start; } @media (min-width: 768px) { /* Hybrid 2-up: each baked card is HALF width, art authored ~707×262. */ .hero__inner.hero__inner--baked { aspect-ratio: 707 / 262; /* desktop/half baked art */ } /* Single hero (sports/casino): the baked art is FULL width (1424×370). Locking it to the half-card ratio above cover-crops the sides and clips the baked title — take the full-width art ratio instead so the whole scene shows uncropped. Doubled class (0,3,0) beats the half-card rule regardless of source order. */ .hero__grid--1 .hero__inner.hero__inner--baked { aspect-ratio: 1424 / 370; } .hero__inner--baked .hero__content { top: 54%; left: 5%; } /* Single full-width hero: the baked title sits higher/larger than on the half-card, so drop the live CTA block lower to clear it. */ .hero__grid--1 .hero__inner--baked .hero__content { top: 64%; } } /* Mobile (Figma 2636:10036): the card is a fixed-height canvas — the image is a clipped background layer anchored right, and the content overlays it absolutely, vertically centered, free to span ~3/4 of the card width. On ≥768px the content returns to normal flow (it drives the card height there). */ .hero__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 20px; max-width: 76%; } /* Type scales with the card across the 500–767px band (see .hero__inner) — floors are the Figma mobile values (19/15/10px), ceilings keep the stack well inside the 253px card cap; ≥768 sets the desktop sizes. */ .hero__title { margin: 0 0 14px; /* Design revision 2026-07-15 (Figma 2636:10036 / 2422:9902): the headline moved from Gustavo to Nexa (Heavy strong line / Book light line) at every breakpoint. */ font-family: var(--font-heading); font-size: clamp(19px, 3.4vw, 26px); line-height: 1.16; color: var(--c-slate); } /* Figma's hero gaps (14/33 title->CTA, 11 CTA->microcopy) measure between INK edges (both hero text nodes carry text-box-trim) — trim the line-height halo so our identical margin values land identically. */ @supports (text-box: trim-both cap alphabetic) { .hero__title, .hero__microcopy { text-box: trim-both cap alphabetic; } } .hero__title-strong { display: block; font-weight: 800; } .hero__title-light { display: block; font-weight: 400; } .hero__cta { display: inline-flex; align-items: center; gap: 8px; /* Aurora ADS/CTA Yellow: cta-2 pairing, hover/active are BG swaps (not a filter). */ background: var(--color-cta-2); color: var(--color-cta-2-foreground); font-family: var(--font-display); font-weight: 800; font-size: clamp(15px, 2.6vw, 18px); border-radius: var(--radius-pill); padding: 10px 22px; white-space: nowrap; } .hero__cta:hover { background: var(--color-cta-2-hover); } .hero__cta:active { background: var(--color-cta-2-active); } .hero__cta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } .hero__microcopy { margin: 11px 0 0; /* Figma CTA column gap (2636:10042 / 2422:9908) */ font-family: var(--font-body); font-size: clamp(10px, 1.6vw, 12px); color: #7f8ba3; } /* Baked heroes, mobile: the CTA/microcopy scale with the CARD (cqw via the baked card's container-type), not the viewport — the 15px font floor + fixed 10/22 padding stopped shrinking below ~380px while the aspect-locked card kept shrinking, so the button rode up into the baked headline on small phones. Ceilings = today's values (366px basis), so nothing changes at common widths or ≥768. */ @media (max-width: 767px) { .hero__inner--baked .hero__cta { font-size: clamp(11px, 4.1cqw, 15px); padding: clamp(6px, 2.7cqw, 10px) clamp(13px, 6cqw, 22px); } .hero__inner--baked .hero__microcopy { font-size: clamp(8px, 2.7cqw, 10px); margin-top: clamp(6px, 3cqw, 11px); } } /* Background layer for the whole card: the hero image is a full-card SCENE (white text zone + diagonal graphic + subject baked into one FUSE upload, desktop 1424×370 / mobile 366×150) — cover-fit, anchored right so narrower cards crop the scene's empty left. Text/CTA render live on top. */ .hero__media { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } /* Mobile: the scene renders at the CARD's height and its own aspect, anchored right — it does NOT scale with the viewport width. Narrow phones crop the scene's empty left; wider small viewports show white card left of it (the scene background is white). Cover-scaling here let 400–767px viewports blow the scene up and crop the subject's head. ≥768 the full-width scene covers the card (it's authored for that). */ .hero__img { position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: none; } @media (min-width: 768px) { .hero__img { inset: 0; width: 100%; object-fit: cover; object-position: right center; } } @media (min-width: 768px) { .hero__inner { min-height: 240px; } .hero__content { /* back in normal flow — content height drives the card on desktop */ position: relative; inset: auto; padding: 40px; max-width: 56%; } .hero__title { /* 56px at the 1424 design width (3.9vw there), 36px floor through the tablet band */ font-size: clamp(36px, 3.9vw, 56px); line-height: 1.29; margin-bottom: 33px; /* Figma 2422:9902 headline -> CTA block gap */ } /* ADS/CTA Small (Aurora CtaButton size=Small color=Yellow — Figma 2422:9902): 40px tall, 18px heading-extrabold on cta-2 yellow, stretched to the design's 400px CTA column with the microcopy centered beneath. The hybrid half-cards (.hero__grid--2 .hero__cta) out-specify this and keep their compact scaling. */ .hero__cta { justify-content: center; width: min(400px, 100%); height: 40px; padding: 0 14px; font-size: 18px; line-height: 1; background: var(--color-cta-2); color: var(--color-cta-2-foreground); } .hero__cta:hover { background: var(--color-cta-2-hover); filter: none; } .hero__microcopy { font-size: 14px; width: min(400px, 100%); text-align: center; margin-top: 11px; } } @media (min-width: 1024px) { .hero__inner { min-height: 320px; } .hero__content { padding: 20px 70px; /* Figma 2422:9902 card padding (px-70 / py-20; flex centers vertically) */ max-width: 60%; } } /* ---- featureNavigation (Figma 2422:9973 desktop / 2300:15487 mobile) ---- White card shell; the strip's gradient art arrives from FUSE (--featnav-bg, inline per group) under a FIXED topo pattern overlay this section owns (img/home/featnav-pattern.webp — not a FUSE export). Items divide with short 36px keylines and distribute evenly when they fit; marquee.js clones + loops only on overflow. */ .featnav { max-width: var(--maxw); margin: 0 auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); } /* optional centered head (benefits/rewards reference) — renders only when FUSE sends navigation title/subtitle */ .featnav__head { text-align: center; margin-bottom: 12px; } @media (min-width: 768px) { .featnav__head { margin-bottom: 30px; /* same head->content rhythm as .section__head */ } } .featnav__title { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-20); } @media (min-width: 768px) { .featnav__title { font-size: 24px; } } .featnav__sub { margin: 4px 0 0; color: var(--c-muted); font-size: var(--fs-14); } /* Reference anatomy (benefits/rewards strip): the SCROLLER is the chrome-less scroll container and the CARD scrolls through it as one unit — background, border, and corners travel with the items, so each finished edge naturally arrives at its end of the scroll. The bleed is UNCONDITIONAL (design 2026-07-17): the scroller always extends to the wrapper's inline edges with a gutter of padding inside. So whenever the strip overflows — at ANY width, small desktop and tablet included, not just mobile — it scrolls with the card clipped to those edges exactly like mobile; when it fits, the card fills the row and rests on the gutters (the bleed is then visually inert). On viewports wider than --maxw the "edges" are the centered wrapper's, so the strip never touches the screen edge there. */ .featnav__scroller { margin-inline: calc(-1 * var(--sp-4)); padding-inline: var(--sp-4); overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; } .featnav__scroller::-webkit-scrollbar { display: none; } .featnav__scroller.is-dragging { cursor: grabbing; } .featnav__group { width: max-content; /* the card takes its items' natural width when they overflow... */ min-width: 100%; /* ...and fills the row when they fit */ background: #fff; border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); padding: 3px 4px; } .featnav__marquee { border-radius: 8px; /* NO-ART FALLBACK (FUSE navigation.background missing): the fixed pattern tile over the same comp gradient the art path uses (spec: #E4F1FF -> #FFFFFF as an 80%-opacity layer on the white shell; casino uses the same per 2442:8174). Tile URL is CSS-relative (not root-relative): deployed envs serve this file from the CDN under a PR/env segment where "/img/..." would 404. */ background-image: url("../../img/home/featnav-pattern.webp"), linear-gradient(180deg, rgb(228 241 255 / 80%), rgb(255 255 255 / 80%)); background-size: 1024px 1024px, cover; background-position: top left, center; background-repeat: repeat, no-repeat; } /* FUSE art present (partial sets --featnav-bg + this modifier). Design revision 2026-07-16: the FUSE export is the topo PATTERN ONLY (transparent PNG, ~80%-alpha strokes) — deliberately layered art — over the comp's gradient rendered in code exactly per spec: #E4F1FF -> #FFFFFF stops on an 80%-opacity layer (the white card shell shows through). Split rationale: the gradient is a stable brand treatment (code-owned); the pattern is marketer-swappable content (FUSE). Top-anchored cover keeps the pattern's aspect and full-width coverage at every strip height (the 183px export exceeds all strips). */ .featnav__marquee--art { background-image: var(--featnav-bg), linear-gradient(180deg, rgb(228 241 255 / 80%), rgb(255 255 255 / 80%)); background-size: cover, cover; background-position: top center, center; background-repeat: no-repeat, no-repeat; } .featnav__track { display: flex; min-width: 100%; /* items distribute across the strip when they fit... */ width: max-content; /* ...and take natural width when they overflow */ } .featnav__btn { position: relative; /* FIXED basis, not auto (Figma models the items as equal columns): every item is the same width in the scrolling state and they grow EQUALLY when the strip fits. Long labels wrap inside the column instead of widening their item. */ flex: 1 0 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; user-select: none; } /* short vertical keyline between items (Figma: 1px × 36px, centered) */ .featnav__btn::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 36px; background: var(--color-border-low); } .featnav__btn:first-child::before { display: none; } .featnav__icon { width: 40px; height: 40px; object-fit: contain; pointer-events: none; transition: transform 0.18s ease; } /* Figma hover variant: the icon wiggles */ .featnav__btn:hover .featnav__icon, .featnav__btn:focus-visible .featnav__icon { transform: rotate(6deg) scale(1.05); } .featnav__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; border-radius: 8px; } .featnav__label { font-family: var(--font-heading); font-weight: 800; font-size: 10px; line-height: 1.15; color: var(--color-foreground-high); text-align: center; max-width: 92px; /* Reserve the TWO-LINE label space in every item (per the comp's constant-height strip): otherwise a strip whose labels all fit one line renders shorter than one with a wrapping label, and the paired strips (own page + cross-sell) visibly differ in height. Single-line labels center in the reserve. */ display: flex; align-items: center; justify-content: center; min-height: 2.3em; } @media (min-width: 768px) { .featnav__btn { flex-basis: 132px; /* 9 items fit under --maxw and grow equally into it */ } .featnav__icon { width: 45px; height: 45px; } .featnav__label { font-size: var(--text-xs); } } /* ---- CoreFeatures (Figma 2472:13350 desktop / 2412:16740 mobile) ---- */ /* Aurora underline tabs over an icon-card grid; tabs.js flips the panels' `hidden` attribute (all panels render server-side so every feature stays crawlable). */ .corefeatures__tabs { display: flex; border-bottom: 1px solid var(--color-border-low); margin-bottom: 10px; /* Figma tabs → grid */ } .corefeatures__tab { flex: 1; border: 0; background: none; cursor: pointer; height: 24px; padding: 0 12px; font-family: var(--font-heading); font-weight: 800; /* Nexa Heavy */ font-size: var(--text-xs); text-transform: uppercase; color: var(--color-foreground-medium); border-bottom: 2px solid transparent; margin-bottom: -1px; /* the active underline sits on the hairline */ } .corefeatures__tab.is-active { color: var(--color-foreground-high); border-bottom-color: var(--color-primary); } /* The legacy chrome css puts Bootstrap's `outline: auto` on plain button:focus, which draws a box around the tab on mouse CLICK. Suppress it — keyboard users still get the ring below via :focus-visible. */ .corefeatures__tab:focus { outline: none; } .corefeatures__tab:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; } .corefeatures__grid { display: grid; grid-template-columns: 1fr; gap: 7px; /* Figma card gap */ } /* `hidden` must beat the grid display for the tab toggle */ .corefeatures__grid[hidden] { display: none; } .corefeatures__card { display: flex; align-items: center; gap: 18px; padding: 16px; /* Figma mobile */ background: var(--color-card-1); border: 1px solid var(--color-card-border); border-radius: var(--radius-xl); text-decoration: none; color: inherit; } /* the legacy site.min.css reset (a:hover/:focus { border:0 }) out-specifies the class alone and strips the card border on interaction — pin it explicitly. :visited needs its own pin: the legacy `a,a:visited{border:0}` shorthand resets border-color to currentColor, and visited-styling rules apply ONLY their color components (privacy spec) — so visited "#" cards kept 1px solid but flipped to ink-dark until this override. */ .corefeatures__card:visited { /* LITERAL color required: the visited-privacy style pass ignores var()/inherit, so the pin restates --color-card-border's value directly */ border-color: #e7ecf3; } .corefeatures__card:hover, .corefeatures__card:focus, .corefeatures__card:active { border: 1px solid var(--color-card-border); color: inherit; } .corefeatures__card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } .corefeatures__icon { width: 36px; height: 36px; object-fit: contain; flex: none; } /* ValuePropositions instance (Figma 2442:8072): same card anatomy, 30px icon */ .corefeatures--value .corefeatures__icon { width: 30px; height: 30px; } /* Figma measures the title/desc gap between INK edges (vertical trim: cap -> alphabetic), not line boxes. Where text-box is supported we trim to match; the fallback gaps below are pre-shrunk by the line-height halo instead. */ .corefeatures__text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } @supports (text-box: trim-both cap alphabetic) { .corefeatures__title, .corefeatures__desc { text-box: trim-both cap alphabetic; } .corefeatures__text { gap: 9px; /* Figma mobile */ } } .corefeatures__title { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-sm); line-height: 1.2; color: var(--color-foreground-high); } .corefeatures__desc { font-family: var(--font-body); font-size: var(--text-xs); line-height: 1.5; color: var(--color-foreground-medium); } /* AURORA/Link's ArrowUpRight: a 16px thin-stroke glyph in a 20px slot */ .corefeatures__arrow { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--color-link); } .corefeatures__arrow svg { display: block; width: 16px; height: 16px; } /* mobile-only Join Now: ADS/CTA Yellow pill (design update 2026-07-24: all grey card buttons moved to the yellow CTA — Aurora cta-2 pairing; desktop design omits it) */ .corefeatures__cta { margin-top: 11px; display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; border-radius: var(--radius-full); background: var(--color-cta-2); color: var(--color-cta-2-foreground); font-family: var(--font-heading); font-weight: 800; font-size: var(--text-sm); } .corefeatures__cta:hover { background: var(--color-cta-2-hover); } .corefeatures__cta:active { background: var(--color-cta-2-active); } .corefeatures__cta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } @media (min-width: 768px) { .corefeatures__tabs { max-width: 444px; /* Figma desktop tab bar */ } .corefeatures__tab { height: 32px; font-size: var(--text-sm); border-bottom-width: 3px; } .corefeatures__grid { grid-template-columns: repeat(2, 1fr); } .corefeatures__card { padding: 36px 26px; /* Figma desktop */ } .corefeatures__text { gap: 4px; } @supports (text-box: trim-both cap alphabetic) { .corefeatures__text { gap: 14px; /* Figma desktop */ } } .corefeatures__title { font-size: var(--text-base); } .corefeatures__desc { font-size: var(--text-sm); } .corefeatures__cta { display: none; } } @media (min-width: 1024px) { .corefeatures__grid { grid-template-columns: repeat(3, 1fr); /* Figma desktop: 3-up */ } } /* ---- welcomeOffers banner pair (Figma 2472:12230 desktop / 2302:22685 mobile) ---- Scene image bakes the kicker/amount art; the glass CTA and the footer strip render live. Cards join with an "or" divider — inline on desktop, a line—or—line rule when stacked on mobile. */ .welcomeoffers__row { display: flex; flex-direction: column; gap: 3px; } .welcomeoffers__card { flex: 1; min-width: 0; display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; /* the scene art is aspect-locked, so its baked copy scales with card width — the live CTA + footer scale in cqw against the same width to stay in step */ container-type: inline-size; } .welcomeoffers__scene { position: relative; aspect-ratio: 366 / 153; /* mobile export */ background: #090a56; /* scene ground while the image loads */ } .welcomeoffers__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; /* baked copy sits at the left edge */ } /* ADS glass pill over the scene. Every metric mirrors the Figma stack as a share of the export width (mobile 366 / desktop 688), so the pill tracks the baked copy at ANY card width; px-first lines are the no-container-query fallback. */ .welcomeoffers__cta { position: absolute; left: 20px; left: clamp(16px, 5.8cqw, 40px); /* 40/688 */ bottom: 12px; bottom: clamp(10px, 5.5cqw, 38px); /* 38/688 */ display: inline-flex; align-items: center; justify-content: center; min-width: 80px; min-width: clamp(80px, 18.6cqw, 128px); height: 32px; height: clamp(30px, 7.3cqw, 50px); /* 50/688 */ padding: 0 12px; padding: 0 clamp(10px, 2.9cqw, 20px); border-radius: var(--radius-full); /* Aurora ADS/CTA Outline INVERSE (cta-3 on photo art — AURORA 8714-3883): glass face inv-cta-3 (#ffffff2e), 1.5px inv-cta-3-border (#83c7ff), blur 7.5, 2px edge on press. */ border: 1.5px solid var(--color-inv-cta-3-border); background: var(--color-inv-cta-3); backdrop-filter: blur(7.5px); -webkit-backdrop-filter: blur(7.5px); color: var(--color-inv-cta-3-foreground); font-family: var(--font-heading); font-weight: 800; font-size: var(--text-sm); font-size: clamp(12px, 2.9cqw, 20px); /* 20/688 */ line-height: 1.2; white-space: nowrap; } /* interaction states: the legacy site.min.css a:hover/:focus reset strips borders, so every state re-declares it; :visited pins the border color against the legacy `a,a:visited{border:0}` currentColor flip. Hover/press add the inv-alpha tint over the glass (Aurora State=Hover/Pressed). */ .welcomeoffers__cta:visited { border-color: var(--color-inv-cta-3-border); color: var(--color-inv-cta-3-foreground); } .welcomeoffers__cta:hover, .welcomeoffers__cta:focus, .welcomeoffers__cta:active { border: 1.5px solid var(--color-inv-cta-3-border); color: var(--color-inv-cta-3-foreground); } .welcomeoffers__cta:hover { background: linear-gradient(var(--color-inv-alpha-10), var(--color-inv-alpha-10)), var(--color-inv-cta-3); } .welcomeoffers__cta:active { background: linear-gradient(var(--color-inv-alpha-20), var(--color-inv-alpha-20)), var(--color-inv-cta-3); border-width: 2px; } .welcomeoffers__cta:focus-visible { outline: 2px solid var(--color-inv-focus); /* focus-ring-inv (cta-3 per the coded variant) */ outline-offset: 3px; } /* live footer strip: ordered icon/text fragments on the payload background. Text/icons/gaps scale with card width so the row always fits — no clipping. */ .welcomeoffers__footer { display: flex; align-items: center; justify-content: center; gap: 4px; gap: clamp(2px, 0.6cqw, 4px); /* 4/688 */ padding: 8px 12px; padding: clamp(6px, 2cqw, 14px) clamp(8px, 2.3cqw, 16px); /* (52 - 24) / 2 at 688 */ } .welcomeoffers__footertext { font-family: var(--font-accent); font-weight: 400; font-size: 16px; font-size: clamp(11px, 2.33cqw, 16px); /* 16/688 */ line-height: 1.2; color: #fff; white-space: nowrap; margin-right: 22px; margin-right: clamp(10px, 3.2cqw, 22px); /* 22/688 group gap to the card logos */ } .welcomeoffers__footericon { max-height: 24px; max-height: clamp(13px, 3.5cqw, 24px); /* 24/688 */ width: auto; } /* leading glyph (fire/bolt before the text) is 14px in the spec, not logo-size */ .welcomeoffers__footericon:first-child { max-height: clamp(10px, 2cqw, 14px); /* 14/688 */ } /* "or" divider — line—or—line between stacked mobile cards */ .welcomeoffers__or { display: flex; align-items: center; gap: 11px; padding: 4px 0; color: var(--color-foreground-high); font-family: var(--font-body); font-size: var(--text-sm); } .welcomeoffers__or::before, .welcomeoffers__or::after { content: ""; flex: 1; height: 1px; background: var(--color-border-low); } @media (min-width: 576px) { .welcomeoffers__scene { aspect-ratio: 688 / 266; /* desktop export */ } } @media (min-width: 768px) { .welcomeoffers__row { flex-direction: row; align-items: stretch; } .welcomeoffers__or { flex: none; padding: 0 12px; align-self: center; font-weight: 800; font-size: var(--text-xl); } .welcomeoffers__or::before, .welcomeoffers__or::after { display: none; } } /* bonus (hybrid): horizontal carousel + nav arrows */ .carousel__nav { display: flex; gap: 8px; flex: 0 0 auto; } .carousel__arrow { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--c-line); background: #fff; font-size: 20px; line-height: 1; color: var(--c-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; } .carousel__arrow:hover { background: #f1f5fb; } /* Set by carousel.js when that direction cannot scroll any further. */ .carousel__arrow:disabled { color: var(--c-muted); background: var(--c-bg); cursor: default; } /* ---- crossSell (Figma 2472:13272 title dt / 2302:23545 title mb) ---- The other vertical's opener title + embedded hero + feature strip. */ .crosssell__head { max-width: var(--maxw); margin: 0 auto; padding: var(--section-pad-y) var(--sp-4) 0; display: flex; align-items: stretch; gap: 14px; } .crosssell__bar { flex: none; width: 6px; background: var(--color-primary); /* FUSE title_color overrides inline */ } .crosssell__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .crosssell__brand { font-family: var(--font-heading); font-weight: 800; font-size: clamp(16px, 1.7cqw + 12px, 26px); line-height: 1.1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-foreground-high); } .crosssell__vertical { font-family: var(--font-heading); font-weight: 400; /* Nexa Book — big light caps per the comp */ font-size: clamp(34px, 4.5vw, 64px); line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-fill-high, #a9b4c6); } /* embedded hero: neutralize the lead-hero fixed-header offsets — this one is mid-page */ .crosssell .hero { margin-top: var(--sp-4); } /* ---- bonusCards / BonusCardCarousel (hybrid welcomeOffers grid layout; Figma 2873:8990 dt / 2415:27598 mb) ---- Photo cards with a coded primary-muted scrim; live title + AURORA Details link; whole card links out. Shared carousel: controls/drag/peek gate on overflow. */ .bonuscards__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .bonuscards__track::-webkit-scrollbar { display: none; } .bonuscards__card { flex: 0 0 160px; /* Figma mobile card */ scroll-snap-align: start; } .bonuscards__link { position: relative; display: block; aspect-ratio: 196 / 284; border-radius: 9px; overflow: hidden; background: var(--color-fill-medium); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); /* Figma shadow/sm */ } .bonuscards__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* coded scrim: primary-muted rising from the bottom (Figma layer, not baked) */ .bonuscards__link::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--color-inv-primary-muted), transparent 51.5%); pointer-events: none; } .bonuscards__content { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; } .bonuscards__icon { width: 20px; height: 20px; object-fit: contain; } .bonuscards__title { font-family: var(--font-accent); font-weight: 700; font-size: var(--text-sm); line-height: 1.2; color: rgba(255, 255, 255, 0.87); } /* AURORA/Link on inverse ground */ .bonuscards__details { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; font-size: var(--text-sm); line-height: 1.5; color: var(--color-inv-link); } .bonuscards__details svg { width: 14px; height: 14px; } .bonuscards__link:hover .bonuscards__details { color: var(--color-inv-link-hover); } .bonuscards__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } /* mobile-design crypto boost strip — dormant until FUSE ships data for it */ .bonuscards__boost { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; } .bonuscards__boostlabel { font-family: var(--font-heading); font-weight: 800; font-size: var(--text-xs); color: var(--color-foreground-high); margin-right: 6px; } .bonuscards__boosticon { width: 20px; height: 20px; } @media (min-width: 768px) { .bonuscards__card { flex-basis: 196px; /* Figma desktop card */ } } /* ---- expertInsights / ExpertsCarousel (Figma 2442:9210 dt / 2300:16521 mb) ---- Fully baked host cards (photo + name) linking out. Desktop defaults to a fixed 3-col row (no carousel); with 4+ payload items the cards narrow so the 4th peeks and the shared carousel (nav + drag, gated on overflow) takes over. Mobile keeps the peeking carousel + Join Now pill below the track. */ .expertinsights__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .expertinsights__track::-webkit-scrollbar { display: none; } .expertinsights__card { /* Figma mobile (2300:16521): 237px card + 12px gap + 117px peek on the 366 frame — card takes 237/354 of the row net of one gap so the peek keeps the same proportion at every viewport width */ flex: 0 0 calc((100% - 12px) * 0.6695); scroll-snap-align: start; } .expertinsights__link { position: relative; display: block; aspect-ratio: 237 / 132; /* mobile export ratio */ border-radius: var(--radius-xl); overflow: hidden; background: #3a7fd5; /* card ground while art loads */ } .expertinsights__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .expertinsights__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } /* mobile-only Join Now pill (desktop design omits it) — CoreFeatures pattern; ADS/CTA Yellow (design update 2026-07-24: all grey card buttons → yellow CTA) */ .expertinsights__cta { margin-top: 16px; display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; border-radius: var(--radius-full); background: var(--color-cta-2); color: var(--color-cta-2-foreground); font-family: var(--font-heading); font-weight: 800; font-size: var(--text-sm); } .expertinsights__cta:hover { background: var(--color-cta-2-hover); } .expertinsights__cta:active { background: var(--color-cta-2-active); } .expertinsights__cta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } @media (min-width: 576px) { .expertinsights__link { aspect-ratio: 1400 / 603; /* desktop export ratio (466.67x201 card, x3) */ } } @media (min-width: 768px) { .expertinsights__card { flex: 1 1 0; /* default: exactly 3 columns fill the row — no overflow, nav stays hidden */ min-width: 0; } /* 4+ payload items: narrow the cards so the 4th peeks 60px (the previous carousel reveal) and the track overflows, re-arming nav arrows + drag */ .expertinsights__track:has(> :nth-child(4)) .expertinsights__card { flex: 0 0 calc((100% - 3 * 12px - 60px) / 3); } .expertinsights__cta { display: none; } } /* ---- gameRecommendations / GamesCarousel (Figma 2472:12334 dt / 2302:22777 mb) ---- Fixed-size tiles (137x189) with baked art and a coded play overlay; the whole tile links out. Shared carousel: controls/drag gate on overflow, and the fixed tile width cuts naturally at the container edge for the peek. */ .gamerecommendations__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .gamerecommendations__track::-webkit-scrollbar { display: none; } .gamerecommendations__tile { flex: 0 0 137px; scroll-snap-align: start; } .gamerecommendations__link { position: relative; display: block; height: 189px; border-radius: 9px; overflow: hidden; background: var(--color-inv-card-1, #0e1524); /* tile ground while art loads */ } .gamerecommendations__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* coded play affordance (Icon/Play in an inv-alpha-overlay circle, per Figma) */ .gamerecommendations__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-inv-alpha-overlay); color: #fff; transition: background 0.15s ease; } .gamerecommendations__play svg { width: 24px; height: 24px; } .gamerecommendations__link:hover .gamerecommendations__play, .gamerecommendations__link:focus .gamerecommendations__play { background: hsl(215 54% 7% / 80%); } .gamerecommendations__link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } /* ---- tournamentShowcase / FeatureImageCardsCarousel (Figma 3012:9633 desktop / 2998:20397 mobile) ---- */ /* Header prev/next — ADS IconButton XXSmall outline; carousel.js hides the nav wrapper when the track doesn't overflow and disables buttons at the ends. Shared by any [data-carousel-root] section header. */ .carousel__nav { display: none; /* latest designs drop all arrows on mobile — scrollability reads from the card peek */ gap: 2px; } .carousel__nav[hidden] { display: none; } @media (min-width: 768px) { .carousel__nav:not([hidden]) { display: flex; } } .carousel__btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border-low); border-radius: var(--radius-full); color: var(--color-foreground-high); cursor: pointer; padding: 0; } .carousel__btn svg { width: 16px; height: 16px; } .carousel__btn:hover:not(:disabled) { background: var(--color-fill-medium); } .carousel__btn:disabled { opacity: 0.35; cursor: default; } .carousel__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } /* Scroll-snap track: fixed-width swipe cards on mobile (Figma 283px), 2-up on tablet, exactly 3-up on desktop — extra cards overflow and scroll. */ .tournamentshowcase__track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 283px; /* Figma mobile card width */ gap: 11px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .tournamentshowcase__track::-webkit-scrollbar { display: none; } /* draggable carousel: carousel.js sets is-draggable only while the track overflows, so the grab cursor never appears with nothing to drag */ [data-carousel].is-draggable { cursor: grab; } [data-carousel].is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; } @media (min-width: 768px) { .tournamentshowcase__track { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; } } @media (min-width: 1024px) { .tournamentshowcase__track { grid-auto-columns: calc((100% - 32px) / 3); /* Figma desktop: 3-up, 16px gaps */ } } /* While the track overflows (carousel.js flags is-draggable), cards give up a sliver so a PEEK of the next card signals scrollability at every breakpoint. Without overflow the exact-fit sizes above apply — no dangling gap. */ .tournamentshowcase__track.is-draggable { grid-auto-columns: calc(100% - 60px); /* 1-up + ~49px peek */ } @media (min-width: 768px) { .tournamentshowcase__track.is-draggable { grid-auto-columns: calc((100% - 56px) / 2); /* 2-up + ~40px peek */ } } @media (min-width: 1024px) { .tournamentshowcase__track.is-draggable { grid-auto-columns: calc((100% - 80px) / 3); /* 3-up + ~48px peek */ } } .tournamentshowcase__card { scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--color-card-border); border-radius: var(--radius-3xl); overflow: hidden; } .tournamentshowcase__img { width: 100%; height: 150px; /* Figma mobile image area */ object-fit: cover; /* the art's baked title sits at the left edge — crop from the right */ object-position: left center; display: block; } @media (min-width: 768px) { .tournamentshowcase__img { height: 167px; /* Figma desktop */ } } .tournamentshowcase__body { flex: 1; background: var(--color-card-1); padding: 20px; display: flex; flex-direction: column; gap: 16px; } /* name + badge: stacked on mobile (Figma), side by side from 768px */ .tournamentshowcase__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } @media (min-width: 768px) { .tournamentshowcase__meta { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; } } .tournamentshowcase__name { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg); line-height: 1.2; color: var(--color-foreground-high); } /* AURORA/Badges (Brand, XSmall): colored glyph + uppercase tag */ .tournamentshowcase__badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-heading); font-weight: 700; font-size: var(--text-xs); line-height: 1.2; text-transform: uppercase; color: var(--color-foreground-high); white-space: nowrap; } .tournamentshowcase__badge img { width: 14px; height: 14px; object-fit: contain; } /* ADS/CTA Yellow (design update 2026-07-24, Figma 3012-9633 — was the grey ADS/Button secondary): full-width on mobile, content-width from 768px */ .tournamentshowcase__cta { margin-top: auto; display: flex; align-items: center; justify-content: center; width: 100%; height: 32px; padding: 0 24px; border-radius: var(--radius-full); background: var(--color-cta-2); color: var(--color-cta-2-foreground); font-family: var(--font-heading); font-weight: 800; font-size: var(--text-sm); } .tournamentshowcase__cta:hover { background: var(--color-cta-2-hover); } .tournamentshowcase__cta:active { background: var(--color-cta-2-active); } .tournamentshowcase__cta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } @media (min-width: 768px) { .tournamentshowcase__cta { width: auto; align-self: flex-start; height: 40px; /* ADS/Button Small */ } } /* ---- supportCards (Figma 2998:20559 desktop / 2998:21686+21715+21751 mobile) ---- Three uniform columns straight on the page ground (no card chrome): live title/desc, illustration with the bespoke detail baked in, bottom-aligned grey CTA pill. Mobile stacks. */ .supportcards__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; } @media (min-width: 768px) { .supportcards__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } } @media (min-width: 1200px) { .supportcards__grid { gap: 76px; /* Figma desktop column gap */ } } .supportcards__card { display: flex; flex-direction: column; } .supportcards__title { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: var(--text-lg); line-height: 1.2; color: var(--color-foreground-high); } .supportcards__desc { margin: 12px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-foreground-medium); } .supportcards__img { width: 100%; height: auto; margin-top: 20px; } /* ADS/CTA Yellow (design update 2026-07-24, Figma 2431-12474 — was the grey pill) */ .supportcards__cta { margin-top: 20px; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: var(--radius-full); background: var(--color-cta-2); color: var(--color-cta-2-foreground); font-family: var(--font-heading); font-weight: 800; font-size: var(--text-base); } .supportcards__cta:hover { background: var(--color-cta-2-hover); } .supportcards__cta:active { background: var(--color-cta-2-active); } .supportcards__cta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } @media (min-width: 768px) { .supportcards__title { font-size: var(--text-2xl); } .supportcards__desc { font-size: var(--text-base); } .supportcards__cta { margin-top: auto; /* bottom-align the pills across unequal headers */ height: 48px; font-size: var(--text-lg); } .supportcards__img { margin-bottom: 20px; /* keep clearance above the auto-pinned pill */ } } /* ---- promotionalBanner / PromotionalCTA (Figma 2472:13399 dt / 3016:9111 mb) ---- Scene art baked per banner; live right-aligned title + gold ADS/CTA (+ note). Track = shared carousel contract: static band for one banner, controls/drag/peek once it overflows. Live layers scale in cqw against each export's basis width (mobile 366 / desktop 1424) to track the baked art. */ .promotionalbanner__track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .promotionalbanner__track::-webkit-scrollbar { display: none; } .promotionalbanner__track.is-draggable { grid-auto-columns: calc(100% - 60px); /* 1-up + next-banner peek */ } .promotionalbanner__slide { scroll-snap-align: start; position: relative; display: flex; /* height = max(art-ratio spacer, content stack) — see ::before */ border-radius: var(--radius-xl); overflow: hidden; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); background: #ace6ff; /* scene ground while the image loads */ container-type: inline-size; } /* Zero-width spacer carrying the art's aspect ratio as padding (% of slide width). Unlike aspect-ratio on the slide itself — which Chrome pins even against min-height:max-content inside the grid track — this floors the height while letting the content stack grow the slide in the tight mid-width band. */ .promotionalbanner__slide::before { content: ""; width: 0; padding-top: 43.72%; /* 160/366 mobile export */ } .promotionalbanner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; /* chest art anchors left; live content sits right */ } .promotionalbanner__content { /* IN FLOW (not absolute) so the guaranteed block padding can grow the slide past the art's aspect ratio in the mid-width band where the clamp FLOORS (title 26px, CTA 34px...) stop shrinking but the aspect-locked height keeps shrinking — previously the stack met the banner edges and the padding visually vanished. The art (absolute, cover, left-anchored, empty right side by design) crops a harmless sliver there instead. */ position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: right; gap: 10px; gap: clamp(8px, 3.3cqw, 14px); padding-right: 16px; padding-right: clamp(12px, 4.4cqw, 26px); padding-block: clamp(12px, 3.3cqw, 16px); } /* Children must not flex-shrink: in the tight mid-width band the column was compressing them to fit the aspect-locked height (the CTA squashed from 34px to ~17px) instead of letting the stack grow the slide. */ .promotionalbanner__content > * { flex-shrink: 0; } .promotionalbanner__title { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 24px; font-size: clamp(20px, 7.1cqw, 30px); /* Figma mobile ~26/366, two lines */ line-height: 1.16; color: var(--color-foreground-high); /* the baked chest fills the left half of the mobile export — keep the text box inside the art-free zone so long titles BREAK instead of overlapping */ max-width: 48cqw; text-wrap: balance; } /* ADS/CTA Yellow (cta-2 #ffc107) */ .promotionalbanner__cta { display: inline-flex; align-items: center; justify-content: center; height: 36px; height: clamp(32px, 9.8cqw, 40px); padding: 0 20px; padding: 0 clamp(16px, 5.5cqw, 24px); border-radius: var(--radius-full); background: var(--color-cta-2); color: var(--color-cta-2-foreground); font-family: var(--font-heading); font-weight: 800; font-size: 14px; font-size: clamp(13px, 3.8cqw, 16px); line-height: 1.2; white-space: nowrap; } /* color pinned against the legacy anchor hover/visited resets (see tokens gotchas) */ .promotionalbanner__cta:hover, .promotionalbanner__cta:focus, .promotionalbanner__cta:active { color: var(--color-cta-2-foreground); } /* Aurora hover/active go LIGHTER (cta-2-hover/-active) — the old hand-picked hsl values went darker, opposite of the design system. */ .promotionalbanner__cta:hover { background: var(--color-cta-2-hover); } .promotionalbanner__cta:active { background: var(--color-cta-2-active); } .promotionalbanner__cta:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; } .promotionalbanner__note { margin: 0; font-size: 10px; font-size: clamp(9px, 2.9cqw, 12px); color: var(--color-foreground-medium); } @media (min-width: 576px) { .promotionalbanner__slide::before { padding-top: 12.92%; /* 184/1424 desktop export */ } .promotionalbanner__content { gap: clamp(10px, 1.7cqw, 24px); /* 24/1424 */ padding-right: clamp(24px, 11.2cqw, 160px); /* 160/1424 */ padding-block: clamp(12px, 1.2cqw, 17px); } .promotionalbanner__title { font-size: clamp(26px, 4.35cqw, 62px); /* 62/1424 */ max-width: none; } .promotionalbanner__cta { height: clamp(34px, 3.1cqw, 44px); padding: 0 clamp(18px, 2.25cqw, 32px); font-size: clamp(14px, 1.27cqw, 18px); } .promotionalbanner__note { font-size: clamp(10px, 0.85cqw, 12px); } } /* Chest-video banner: when FUSE attaches a