/* ================================================================== WELCOME OFFER — first-visit promotion reveal, homepage only. Markup lives inline in index.html (single consumer), last child of
; behaviour is js/home-welcome.js. A fixed sheet of dark navy glass slides down over the top of the page once per browser session and promotes the account that /bonus-account carries under a recorded BRD §7 conflict — see the note at the top of page/bonus-account.html; the same Compliance sign-off gates this layer. Ported from update/bounseBanner/royce-welcome-bonus.css (v4). Deviations, and why: 1. CLASS NAMES. The prototype is .rz-welcome-bonus*. Here it is .rz-welcome with BEM children, in step with .rz-bonus / .rz-social on the same page. The data-rz-welcome-* hooks are the JS contract. 2. FONTS. Marcellus + Inter are dropped; the sheet inherits the self-hosted 'Ping AR + LT' — neither Google font covers Arabic (NFR-10). Sizes and line-heights are the prototype's. 3. TOKENS. Navy, ivory and the two golds resolve to the site's --royce-* custom properties (css/style.css), which carry the BRD §9.1 values the prototype hard-codes. The cobalt / azure / cyan family is the promotion's own signature, shared with .rz-bonus, and stays scoped here — hairlines, glows and the CTA core only. Gold is a 3px bar, a dot, two operators and a hairline; never a fill. 4. HEADER HEIGHT. The prototype hard-codes --rz-wb-header-h at 76px (64px mobile). The site's navbar height differs across its width tiers and is not assumed here: css/royce-header.css sets it as --nav-h on , and every top offset below reads that. 5. FIXED DARK, NOT THEME-AWARE. The glass, glows and edge lights are drawn for a dark plate over the hero, so the sheet keeps its own surfaces in both themes — the same call css/home-bonus.css made. 6. RTL. Every physical left / right offset is logical here, so the panel, the numeral, the labels and the close control mirror under dir="rtl" without a second rule set. Wide tracking is reset under .rtl (Arabic does not letter-space) and the numeral is digits and stays as drawn. PHOTOGRAPH — LICENCE UNCONFIRMED. /image/welcome-bonus-bg.webp, .jpg and -m.webp were extracted from a Canva export. Canva's content licence covers use inside Canva designs; standalone web use of the underlying stock item has not been cleared. If it cannot be cleared, delete the block in index.html — __glass, __light and __lines carry the composition on their own and nothing here depends on the image. CONTENT RULES CARRIED OVER FROM /bonus-account · Every figure is a value already published on that page, rendered verbatim — bonus rate 100%. The prototype's "first qualifying deposit" wording was dropped: qualifying deposits are multiple. · Bonus Credit is promotional trading credit and is not withdrawable cash — the disclosure says so in the page's approved words. · "View Bonus Terms" points at /bonus-account (relabelled "Bonus Account Details") until /promotion-terms exists. ================================================================== */ /* #region ------- ( 1- Root, tokens and choreography ) ---------- */ .rz-welcome { --rz-welcome-glass: 6, 18, 35; /* rgb triplet for alpha surfaces */ --rz-welcome-azure: #2f7cff; --rz-welcome-cyan: #20d9e8; --rz-welcome-cobalt: #1746a2; --rz-welcome-gold: var(--royce-gold); --rz-welcome-gold-hover: var(--royce-gold-hover); --rz-welcome-ivory: var(--royce-ivory); /* the fixed navbar's resting height, a token set by css/royce-header.css */ --rz-welcome-nav-h: var(--nav-h); --rz-welcome-z: 9000; /* above the chrome, below #loader (9999) */ --rz-welcome-ease: cubic-bezier(0.16, 1, 0.3, 1); /* reveal choreography (ms after the glass starts moving) */ --rz-welcome-t-env: 150ms; --rz-welcome-t-edge: 250ms; --rz-welcome-t-num: 320ms; --rz-welcome-t-head: 420ms; --rz-welcome-t-labels: 500ms; --rz-welcome-t-cta: 580ms; position: fixed; inset: 0; z-index: var(--rz-welcome-z); pointer-events: none; color: var(--rz-welcome-ivory); -webkit-font-smoothing: antialiased; } .rz-welcome *, .rz-welcome *::before, .rz-welcome *::after { box-sizing: border-box; } .rz-welcome[hidden] { display: none; } .rz-welcome.is-open { pointer-events: auto; } /* #endregion */ /* #region ------- ( 2- Scrim: the homepage stays visible, lightly cooled ) ---------- */ .rz-welcome__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--rz-welcome-glass), 0.3) 0%, rgba(var(--rz-welcome-glass), 0.12) 60%, rgba(var(--rz-welcome-glass), 0.04) 100%); opacity: 0; transition: opacity 600ms var(--rz-welcome-ease); cursor: pointer; } .rz-welcome.is-open .rz-welcome__scrim { opacity: 1; } /* #endregion */ /* #region ------- ( 3- The glass region: no box, dissolves into the hero ) ---------- */ .rz-welcome__sheet { position: absolute; top: 0; left: 0; right: 0; height: clamp(520px, 56vh, 640px); overflow-x: hidden; overflow-y: hidden; transform: translate3d(0, -100%, 0); transition: transform 600ms var(--rz-welcome-ease); will-change: transform; /* NOTE: no mask/filter/opacity on this element — any of those would make it a backdrop root and the glass below could no longer blur the homepage. The lower-edge fade lives on the surfaces themselves (--rz-welcome-fade). */ --rz-welcome-fade: linear-gradient(180deg, #000 0%, #000 82%, rgba(0, 0, 0, 0) 100%); } .rz-welcome.is-open .rz-welcome__sheet { transform: translate3d(0, 0, 0); } /* dark navy glass: the homepage and header read through it. The horizontal gradient darkens the text side; it is mirrored under .rtl */ .rz-welcome__glass { --rz-welcome-glass-angle: 90deg; position: absolute; inset: 0; background: linear-gradient(var(--rz-welcome-glass-angle), rgba(var(--rz-welcome-glass), 0.34) 0%, rgba(var(--rz-welcome-glass), 0.14) 40%, rgba(var(--rz-welcome-glass), 0) 60%), linear-gradient(180deg, rgba(var(--rz-welcome-glass), 0.5) 0%, rgba(var(--rz-welcome-glass), 0.64) 30%, rgba(var(--rz-welcome-glass), 0.72) 100%); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); -webkit-mask-image: var(--rz-welcome-fade); mask-image: var(--rz-welcome-fade); } .rtl .rz-welcome__glass { --rz-welcome-glass-angle: 270deg; } /* environment stack shares the same lower-edge fade */ .rz-welcome__backdrop { position: absolute; inset: 0; -webkit-mask-image: var(--rz-welcome-fade); mask-image: var(--rz-welcome-fade); } /* architectural environment, darkened, framed by its own edges */ .rz-welcome__env { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--rz-welcome-ease) var(--rz-welcome-t-env); -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 22%, #000 78%, rgba(0, 0, 0, 0.35) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, #000 22%, #000 78%, rgba(0, 0, 0, 0.35) 100%); } .rz-welcome.is-open .rz-welcome__env { opacity: 0.54; } .rz-welcome__env img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; } /* atmospheric cobalt→azure light in the open centre; drifts very slowly */ .rz-welcome__light { position: absolute; inset: -10% -6%; background: radial-gradient(44% 60% at 62% 26%, rgba(47, 124, 255, 0.24) 0%, rgba(47, 124, 255, 0) 70%), radial-gradient(30% 44% at 70% 56%, rgba(32, 217, 232, 0.14) 0%, rgba(32, 217, 232, 0) 70%), radial-gradient(26% 40% at 30% 74%, rgba(23, 70, 162, 0.32) 0%, rgba(23, 70, 162, 0) 70%); mix-blend-mode: screen; opacity: 0; transition: opacity 1000ms var(--rz-welcome-ease) var(--rz-welcome-t-env); animation: rz-welcome-drift 30s ease-in-out infinite alternate; } .rz-welcome.is-open .rz-welcome__light { opacity: 1; } @keyframes rz-welcome-drift { from { transform: translate3d(-1.5%, 0, 0); } to { transform: translate3d(1.5%, 1%, 0); } } /* perspective lines rising from the lower frame */ .rz-welcome__lines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 800ms var(--rz-welcome-ease) var(--rz-welcome-t-edge); } .rz-welcome.is-open .rz-welcome__lines { opacity: 1; } /* the header's gold hairline continues straight through the glass */ .rz-welcome__headline-rule { position: absolute; left: 0; right: 0; top: var(--rz-welcome-nav-h); height: 1px; background: linear-gradient(90deg, rgba(214, 166, 28, 0.42), rgba(214, 166, 28, 0.1) 60%, rgba(47, 124, 255, 0.28)); } /* illuminated edge — cyan into gold — travels once through the composition */ .rz-welcome__edge { position: absolute; left: 0; right: 0; bottom: 18%; height: 1px; background: linear-gradient(90deg, rgba(32, 217, 232, 0) 0%, rgba(32, 217, 232, 0.85) 18%, rgba(47, 124, 255, 0.55) 48%, rgba(214, 166, 28, 0.75) 82%, rgba(214, 166, 28, 0) 100%); box-shadow: 0 0 18px rgba(47, 124, 255, 0.35); transform: scaleX(0); transform-origin: left center; transition: transform 1100ms var(--rz-welcome-ease) var(--rz-welcome-t-edge); } .rtl .rz-welcome__edge { transform-origin: right center; } .rz-welcome.is-open .rz-welcome__edge { transform: scaleX(1); } /* #endregion */ /* #region ------- ( 4- Illuminated glass numerals, behind the offer panel ) ---------- */ .rz-welcome__num { position: absolute; inset-inline-start: 43%; top: calc(var(--rz-welcome-nav-h) + 34px); display: flex; align-items: flex-start; direction: ltr; font-size: clamp(170px, 15.5vw, 230px); line-height: 0.82; letter-spacing: -0.035em; white-space: nowrap; opacity: 0; filter: blur(14px); transform: translate3d(0, 10px, 0); transition: opacity 700ms var(--rz-welcome-ease) var(--rz-welcome-t-num), filter 900ms var(--rz-welcome-ease) var(--rz-welcome-t-num), transform 900ms var(--rz-welcome-ease) var(--rz-welcome-t-num); } .rz-welcome.is-open .rz-welcome__num { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); } /* The numeral is direction:ltr so "100%" always reads as digits-then-sign, and inset-inline-* resolves against the element's OWN direction — so on an RTL page the logical start above is still the LEFT edge, and the digits run rightwards under the panel instead of mirroring away from it. Every placement of this element is therefore restated physically for .rtl: the panel (which has no direction override) mirrors on its own. */ .rtl .rz-welcome__num { left: auto; right: 43%; } .rz-welcome__digits { position: relative; display: block; } .rz-welcome__digits > span { display: block; color: transparent; } /* glass body: faint cobalt→cyan fill, seen through */ .rz-welcome__num-core { background: linear-gradient(168deg, rgba(47, 124, 255, 0.26) 0%, rgba(32, 217, 232, 0.1) 40%, rgba(23, 70, 162, 0.34) 100%); -webkit-background-clip: text; background-clip: text; } /* illuminated edge */ .rz-welcome__num-edge { position: absolute; inset: 0; -webkit-text-stroke: 1.1px rgba(32, 217, 232, 0.62); text-shadow: 0 0 28px rgba(47, 124, 255, 0.34); } /* internal reflection: upper part only, a breath of white */ .rz-welcome__num-reflect { position: absolute; inset: 0; transform: translate3d(1px, -2px, 0); background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 100%); -webkit-background-clip: text; background-clip: text; clip-path: polygon(0 0, 100% 0, 100% 34%, 0 46%); } /* the percent: electric cyan → royal blue, one gold point */ .rz-welcome__pct { position: relative; margin-left: 0.04em; padding-top: 0.06em; font-size: 0.34em; color: transparent; background: linear-gradient(160deg, var(--rz-welcome-cyan) 0%, var(--rz-welcome-azure) 55%, var(--rz-welcome-cobalt) 100%); -webkit-background-clip: text; background-clip: text; } .rz-welcome__pct::after { content: ''; position: absolute; left: 0.1em; bottom: -0.08em; width: 0.16em; height: 2px; background: var(--rz-welcome-gold); box-shadow: 0 0 10px rgba(214, 166, 28, 0.7); } /* #endregion */ /* #region ------- ( 5- Offer panel — overlaps the numerals ) ---------- */ .rz-welcome__inner { position: relative; height: 100%; max-width: 1360px; margin: 0 auto; padding: 0 40px; } .rz-welcome__panel { position: absolute; inset-inline-start: 40px; top: calc(var(--rz-welcome-nav-h) + 14px); width: 470px; padding: 18px 32px 0; background: linear-gradient(180deg, rgba(var(--rz-welcome-glass), 0.66) 0%, rgba(var(--rz-welcome-glass), 0.74) 100%); border: 1px solid rgba(255, 255, 255, 0.14); border-top-color: rgba(255, 255, 255, 0.24); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 600ms var(--rz-welcome-ease) var(--rz-welcome-t-head), transform 600ms var(--rz-welcome-ease) var(--rz-welcome-t-head); } .rz-welcome.is-open .rz-welcome__panel { opacity: 1; transform: translate3d(0, 0, 0); } /* a single vertical light on the panel edge: cyan into gold */ .rz-welcome__panel::before { content: ''; position: absolute; inset-inline-start: -1px; top: 14%; bottom: 14%; width: 2px; background: linear-gradient(180deg, var(--rz-welcome-cyan) 0%, var(--rz-welcome-azure) 55%, var(--rz-welcome-gold) 100%); box-shadow: 0 0 12px rgba(32, 217, 232, 0.45); } .rz-welcome__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--rz-welcome-gold-hover); } .rtl .rz-welcome__eyebrow { letter-spacing: 0; font-size: 12px; } .rz-welcome__eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--rz-welcome-cyan); box-shadow: 0 0 8px var(--rz-welcome-cyan); } .rz-welcome__title { margin: 0 0 6px; font-weight: 400; font-size: clamp(34px, 3.2vw, 46px); line-height: 1.02; color: #ffffff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35); } .rz-welcome__br { display: none; } .rz-welcome__title-sub { display: block; margin-top: 8px; font-size: 13.5px; font-weight: 500; letter-spacing: 0.06em; color: #cfe3ff; } .rtl .rz-welcome__title-sub { letter-spacing: 0; } .rz-welcome__hook { margin: 12px 0 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.3; color: #ffffff; } .rz-welcome__support { max-width: 44ch; margin: 0; font-size: 13px; line-height: 1.62; color: rgba(248, 248, 248, 0.84); } /* actions ride the panel's lower edge — the CTA breaks the grid */ .rz-welcome__actions { display: flex; align-items: center; gap: 22px; margin: 14px 0 0; margin-inline-end: -32px; opacity: 0; transform: translate3d(0, 64%, 0); transition: opacity 600ms var(--rz-welcome-ease) var(--rz-welcome-t-cta), transform 600ms var(--rz-welcome-ease) var(--rz-welcome-t-cta); } .rz-welcome.is-open .rz-welcome__actions { opacity: 1; transform: translate3d(0, 50%, 0); } /* #endregion */ /* #region ------- ( 6- CTA — cobalt core, cyan edge light, one gold detail ) ---------- */ .rz-welcome__cta { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 38px; padding-inline-start: 42px; overflow: hidden; background: linear-gradient(112deg, #16418f 0%, #1e56c2 40%, var(--rz-welcome-azure) 100%); color: #ffffff; font-size: 13px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(32, 217, 232, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 22px 44px -16px rgba(47, 124, 255, 0.95), 0 8px 22px -8px rgba(0, 0, 0, 0.55); transition: box-shadow 320ms var(--rz-welcome-ease), transform 320ms var(--rz-welcome-ease); } .rtl .rz-welcome__cta { letter-spacing: 0; font-size: 15px; } /* the gold detail: a short bar at the leading edge */ .rz-welcome__cta::before { content: ''; position: absolute; inset-inline-start: 0; top: 14px; bottom: 14px; width: 3px; background: var(--rz-welcome-gold); box-shadow: 0 0 8px rgba(214, 166, 28, 0.55); } /* directional light sweep on hover */ .rz-welcome__cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -50%; width: 36%; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%); transform: skewX(-20deg); transition: left 720ms var(--rz-welcome-ease); } .rz-welcome__cta:hover, .rz-welcome__cta:focus-visible { color: #ffffff; transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(32, 217, 232, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 22px 40px -16px rgba(47, 124, 255, 0.95); } .rz-welcome__cta:hover::after, .rz-welcome__cta:focus-visible::after { left: 120%; } .rz-welcome__terms { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: rgba(248, 248, 248, 0.9); text-decoration: none; transition: color 240ms ease; } .rtl .rz-welcome__terms { letter-spacing: 0; font-size: 13px; } .rz-welcome__terms-arrow { color: var(--rz-welcome-cyan); transition: transform 300ms var(--rz-welcome-ease); } .rtl .rz-welcome__terms-arrow { transform: scaleX(-1); } .rz-welcome__terms:hover, .rz-welcome__terms:focus-visible { color: #ffffff; } .rz-welcome__terms:hover .rz-welcome__terms-arrow { transform: translateX(4px); } .rtl .rz-welcome__terms:hover .rz-welcome__terms-arrow { transform: scaleX(-1) translateX(4px); } .rz-welcome__disclosure { position: absolute; inset-inline-end: 40px; bottom: calc(18% + 16px); max-width: 440px; margin: 0; font-size: 10.5px; line-height: 1.55; text-align: end; color: rgba(248, 248, 248, 0.64); opacity: 0; transition: opacity 600ms var(--rz-welcome-ease) var(--rz-welcome-t-cta); } .rz-welcome.is-open .rz-welcome__disclosure { opacity: 1; } /* #endregion */ /* #region ------- ( 7- Floating financial labels and the equation strip ) ---------- */ .rz-welcome__label { position: absolute; display: flex; align-items: center; gap: 10px; margin: 0; font-size: 9.5px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(248, 248, 248, 0.8); white-space: nowrap; opacity: 0; transform: translate3d(0, 6px, 0); transition: opacity 600ms var(--rz-welcome-ease) var(--rz-welcome-t-labels), transform 600ms var(--rz-welcome-ease) var(--rz-welcome-t-labels); } .rtl .rz-welcome__label { letter-spacing: 0; font-size: 11.5px; } .rz-welcome.is-open .rz-welcome__label { opacity: 1; transform: translate3d(0, 0, 0); } .rz-welcome__label::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--rz-welcome-cyan); box-shadow: 0 0 8px var(--rz-welcome-cyan); } /* the rule fades away from the dot; mirrored under .rtl and again on the end-side labels, which read inward (rule first, then the dot) */ .rz-welcome__label::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, rgba(248, 248, 248, 0.5), rgba(248, 248, 248, 0)); } .rtl .rz-welcome__label::after, .rz-welcome__label--b::after, .rz-welcome__label--c::after { transform: scaleX(-1); } .rtl .rz-welcome__label--b::after, .rtl .rz-welcome__label--c::after { transform: none; } .rz-welcome__label--gold::before { background: var(--rz-welcome-gold); box-shadow: 0 0 8px rgba(214, 166, 28, 0.8); } .rz-welcome__label--a { inset-inline-start: calc(40px + 470px + 36px); bottom: calc(18% + 66px); } .rz-welcome__label--b, .rz-welcome__label--c { inset-inline-end: 40px; flex-direction: row-reverse; } .rz-welcome__label--b { top: calc(var(--rz-welcome-nav-h) + 46px); } .rz-welcome__label--c { top: 44%; } .rz-welcome__equation { position: absolute; inset-inline-end: 40px; bottom: calc(18% + 62px); display: flex; align-items: center; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 9.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(248, 248, 248, 0.8); white-space: nowrap; opacity: 0; transition: opacity 600ms var(--rz-welcome-ease) var(--rz-welcome-t-labels); } .rtl .rz-welcome__equation { letter-spacing: 0; font-size: 11.5px; } .rz-welcome.is-open .rz-welcome__equation { opacity: 1; } .rz-welcome__equation li { display: flex; align-items: center; gap: 14px; } .rz-welcome__op { font-size: 15px; color: var(--rz-welcome-gold); letter-spacing: 0; } .rz-welcome__equation .rz-welcome__em { color: var(--rz-welcome-cyan); } .rz-welcome__equation .rz-welcome__result { color: var(--rz-welcome-ivory); } /* #endregion */ /* #region ------- ( 8- Close — part of the interface, not a badge ) ---------- */ .rz-welcome__close { position: absolute; top: calc((var(--rz-welcome-nav-h) - 36px) / 2); inset-inline-end: 40px; display: inline-flex; align-items: center; gap: 12px; min-height: 36px; padding: 0 12px; padding-inline-start: 16px; background: rgba(var(--rz-welcome-glass), 0.82); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(248, 248, 248, 0.78); font-size: 10px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity 500ms var(--rz-welcome-ease) var(--rz-welcome-t-head), color 240ms ease, border-color 240ms ease; } .rtl .rz-welcome__close { letter-spacing: 0; font-size: 12px; } .rz-welcome.is-open .rz-welcome__close { opacity: 1; } .rz-welcome__close:hover, .rz-welcome__close:focus-visible { color: #ffffff; border-color: var(--rz-welcome-gold); } .rz-welcome__close-x { font-size: 16px; line-height: 1; letter-spacing: 0; color: var(--rz-welcome-cyan); } .rz-welcome :focus-visible { outline: 2px solid var(--rz-welcome-cyan); outline-offset: 3px; } /* #endregion */ /* #region ------- ( 9- Tablet ) ---------- */ @media (max-width: 1199.98px) { .rz-welcome__sheet { height: clamp(520px, 54vh, 600px); } .rz-welcome__num { inset-inline-start: 50%; top: calc(var(--rz-welcome-nav-h) + 60px); font-size: 19vw; } .rtl .rz-welcome__num { left: auto; right: 50%; } .rz-welcome__panel { width: 420px; } .rz-welcome__disclosure { max-width: 360px; } .rz-welcome__label--a, .rz-welcome__label--b, .rz-welcome__label--c, .rz-welcome__equation { display: none; } } /* #endregion */ /* #region ------- ( 10- Mobile — a separate composition, numeral as hero artwork ) ---------- */ @media (max-width: 767.98px) { .rz-welcome__sheet { height: auto; min-height: 60vh; min-height: 60dvh; max-height: 76vh; max-height: 76dvh; overflow-x: hidden; overflow-y: auto; --rz-welcome-fade: linear-gradient(180deg, #000 0%, #000 90%, rgba(0, 0, 0, 0) 100%); } .rz-welcome__env { -webkit-mask-image: none; mask-image: none; } .rz-welcome.is-open .rz-welcome__env { opacity: 0.42; } .rz-welcome__env img { object-position: 50% 30%; } .rz-welcome__glass { background: linear-gradient(180deg, rgba(var(--rz-welcome-glass), 0.7) 0%, rgba(var(--rz-welcome-glass), 0.86) 100%); -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2); } .rz-welcome__edge { bottom: 10%; } .rz-welcome__light { animation: none; } /* hero artwork: lower end side, cropped by the edge and dissolved by the fade */ .rz-welcome__num { inset-inline-start: auto; inset-inline-end: -13%; top: auto; bottom: 21%; font-size: 34vw; } .rtl .rz-welcome__num { right: auto; left: -13%; } .rz-welcome.is-open .rz-welcome__num { opacity: 0.48; } .rz-welcome__num-edge { text-shadow: 0 0 20px rgba(47, 124, 255, 0.28); } .rz-welcome__inner { position: static; padding: 0; height: auto; } .rz-welcome__panel { position: relative; display: flex; flex-direction: column; inset-inline-start: auto; top: auto; width: auto; margin: calc(var(--rz-welcome-nav-h) + 10px) 0 0; padding: 18px 26px 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .rz-welcome__panel::before { inset-inline-start: 0; top: 30px; bottom: auto; height: 96px; } /* mobile reading order: eyebrow, headline, CTA, hook, copy, terms */ .rz-welcome__eyebrow { order: 1; margin-bottom: 14px; } .rz-welcome__title { order: 2; } .rz-welcome__cta { order: 3; } .rz-welcome__hook { order: 4; } .rz-welcome__support { order: 5; } .rz-welcome__terms { order: 6; } .rz-welcome__actions { display: contents; } /* with display:contents the row has no box; its children carry the reveal */ .rz-welcome__cta, .rz-welcome__terms { opacity: 0; transition: opacity 600ms var(--rz-welcome-ease) var(--rz-welcome-t-cta), transform 320ms var(--rz-welcome-ease); } .rz-welcome.is-open .rz-welcome__cta, .rz-welcome.is-open .rz-welcome__terms { opacity: 1; } .rz-welcome__title { margin: 0; font-size: 38px; line-height: 1.04; } .rz-welcome__br { display: inline; } .rz-welcome__title-sub { margin-top: 12px; font-size: 14.5px; letter-spacing: 0.04em; color: #e2eeff; } .rz-welcome__cta { width: 100%; min-height: 58px; margin: 26px 0 24px; } .rz-welcome__hook { display: block; margin: 0 0 12px; padding: 0; border: 0; font-size: 19px; } .rz-welcome__support { max-width: 31ch; margin: 0 0 22px; padding: 0; font-size: 13px; line-height: 1.72; color: rgba(248, 248, 248, 0.8); } .rz-welcome__terms { align-self: flex-start; padding: 6px 0; font-size: 12px; color: #ffffff; border-bottom: 1px solid rgba(32, 217, 232, 0.45); } .rz-welcome__disclosure { position: relative; inset-inline-end: auto; bottom: auto; max-width: 100%; margin: 0; padding: 22px 26px 46px; font-size: 10.5px; line-height: 1.6; text-align: start; color: rgba(248, 248, 248, 0.62); } .rz-welcome__label--a, .rz-welcome__label--b, .rz-welcome__label--c, .rz-welcome__equation { display: none; } .rz-welcome__close { top: calc((var(--rz-welcome-nav-h) - 40px) / 2); inset-inline-end: 14px; min-height: 40px; padding: 0 10px; padding-inline-start: 12px; } } /* narrow phones */ @media (max-width: 399.98px) { .rz-welcome__title { font-size: 34px; } .rz-welcome__panel { padding-left: 22px; padding-right: 22px; } .rz-welcome__disclosure { padding-left: 22px; padding-right: 22px; } } /* short phones: keep everything above the fold, drop the paragraph first */ @media (max-width: 767.98px) and (max-height: 720px) { .rz-welcome__support { display: none; } .rz-welcome__hook { margin-bottom: 18px; } .rz-welcome__cta { margin: 22px 0 20px; } } /* short landscape viewports */ @media (min-width: 1200px) and (max-height: 560px) { .rz-welcome__sheet { height: 96vh; height: 96dvh; } .rz-welcome__hook, .rz-welcome__equation, .rz-welcome__label--c { display: none; } .rz-welcome__num { font-size: 22vw; } } /* #endregion */ /* #region ------- ( 11- Reduced motion — arrive without travel, environment still ) ---------- */ @media (prefers-reduced-motion: reduce) { .rz-welcome__sheet { transform: none; opacity: 0; transition: opacity 220ms linear; } .rz-welcome.is-open .rz-welcome__sheet { opacity: 1; } .rz-welcome__light { animation: none; } .rz-welcome__edge { transform: scaleX(1); transition: none; } .rz-welcome__num, .rz-welcome__panel, .rz-welcome__label, .rz-welcome__equation, .rz-welcome__disclosure, .rz-welcome__close, .rz-welcome__env, .rz-welcome__lines, .rz-welcome__scrim { transition: opacity 220ms linear !important; transition-delay: 0ms !important; filter: none !important; } .rz-welcome__num, .rz-welcome__panel, .rz-welcome__label { transform: none !important; } .rz-welcome__actions { transition: opacity 220ms linear !important; transition-delay: 0ms !important; } .rz-welcome__cta::after { display: none; } } /* #endregion */ /* #region ------- ( 12- Fallbacks ) ---------- */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .rz-welcome__glass { background: rgba(var(--rz-welcome-glass), 0.86); } .rz-welcome__panel { background: rgba(var(--rz-welcome-glass), 0.7); } } @supports not ((-webkit-background-clip: text) or (background-clip: text)) { .rz-welcome__num-core, .rz-welcome__num-reflect { display: none; } .rz-welcome__pct { color: var(--rz-welcome-cyan); background: none; } } /* #endregion */ /* #region ------- ( 9- Full-viewport coverage ) ---------- */ /* Ported September 2026 from update/heroSection/css/royce-welcome-bonus-fullscreen.css. The campaign package sizes its sliding region to a fixed band — clamp(520px, 56vh, 640px) on desktop, ~600px on tablet — and dissolves its lower edge with a mask. Below that band the homepage stayed readable: hero copy, Open an Account and Chat on WhatsApp were all still legible and, at the very bottom, still clickable while the offer was up. This region does three things and nothing else, and wins over the rules above by order alone (same selectors, same specificity): 1. The COVERAGE SURFACE (sheet + glass + environment) fills the whole visible viewport at every size, with no height cap and no transparent lower edge. 2. The CONTENT STAGE keeps the approved composition at its designed dimensions, anchored to the top so the close control stays on the header row. Nothing is stretched to fill the new height. 3. An opaque navy foundation sits beneath the architectural image so the lower third of the page is not identifiable. Every value here is viewport-relative. No pixel height is hard-coded for any device, and no media query below reintroduces a cap. */ .rz-welcome { /* The designed height of the promotional composition. The surface no longer uses this — only the content stage does. */ --rz-welcome-stage-h: clamp(520px, 56vh, 640px); isolation: isolate; } /* 1. Coverage surface — the whole viewport, at every size */ .rz-welcome__sheet { position: fixed; inset: 0; width: 100%; height: 100vh; /* fallback */ height: 100dvh; /* dynamic viewport — mobile URL bar in or out */ min-height: 100svh; /* never shorter than the small viewport */ max-height: none; /* no cap survives, at any breakpoint */ overflow-x: hidden; overflow-y: hidden; /* the content stage scrolls, not the surface */ isolation: isolate; /* Was: …#000 82%, transparent 100%. That transparent ending is what exposed the homepage. Solid end to end; the layers below also drop their masks. */ --rz-welcome-fade: linear-gradient(180deg, #000 0%, #000 100%); } .rz-welcome__glass, .rz-welcome__backdrop { -webkit-mask-image: none; mask-image: none; } /* Navy foundation. It lives on the backdrop wrapper, which paints above the blurred glass and BELOW the architectural image, light field and perspective lines — so the image continues down to the bottom edge over a deepening navy rather than stopping at a visible boundary. The header strip is the one place the page sits directly behind thin, high-contrast text, so it carries a little more navy; the gold hairline still marks the header row. */ .rz-welcome__backdrop { background: linear-gradient(180deg, rgba(var(--rz-welcome-glass), 0.88) 0%, rgba(var(--rz-welcome-glass), 0.88) 7%, rgba(var(--rz-welcome-glass), 0.66) 13%, rgba(var(--rz-welcome-glass), 0.66) 30%, rgba(var(--rz-welcome-glass), 0.78) 50%, rgba(var(--rz-welcome-glass), 0.9) 62%, rgba(var(--rz-welcome-glass), 0.94) 70%, rgba(var(--rz-welcome-glass), 0.96) 100%); } /* The environment image now has a full viewport to cover. */ .rz-welcome__env img { width: 100%; height: 100%; object-fit: cover; } /* 2. Content stage — approved composition, unchanged dimensions */ .rz-welcome__inner { box-sizing: border-box; /* width includes the 40px side padding */ position: absolute; top: 0; left: 0; right: 0; width: min(1360px, 100%); max-width: none; margin-inline: auto; /* centres against left:0 / right:0 */ height: var(--rz-welcome-stage-h); max-height: 100%; /* short viewports compress instead of clipping */ padding: 0 40px; } /* The illuminated edge is part of the composition, not the surface, so it follows the stage rather than dropping to the bottom of the viewport — otherwise it would separate from the disclosure that sits above it. */ .rz-welcome__edge { bottom: auto; top: calc(min(var(--rz-welcome-stage-h), 100%) * 0.82); } /* 3. Breakpoints — each one keeps full coverage and adjusts the stage only */ /* Tablet: the band the package narrowed to moves to the stage; the surface stays full height. */ @media (max-width: 1199.98px) { .rz-welcome { --rz-welcome-stage-h: clamp(520px, 54vh, 600px); } } /* Mobile: the surface is already full height. The stage becomes the scroller so a long offer can be read on a short phone without the page behind it moving. */ @media (max-width: 767.98px) { .rz-welcome__inner { position: absolute; inset: 0; width: auto; height: auto; max-height: none; margin: 0; padding: 0 0 calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Pinned rather than scrolled away: fixed resolves against the sheet, which is the nearest transformed ancestor, so the control travels with the descent but stays put while the stage scrolls. */ .rz-welcome__close { position: fixed; top: calc((var(--rz-welcome-nav-h) - 40px) / 2); inset-inline-end: 14px; } .rz-welcome__edge { top: auto; bottom: 10%; } } /* Short landscape viewports: the stage takes the full height; the rules above continue to drop the optional elements. */ @media (min-width: 1200px) and (max-height: 560px) { .rz-welcome { --rz-welcome-stage-h: 100%; } } /* Very short screens of any width: let the composition scroll rather than clip the CTA, terms link, disclosure or close control. */ @media (max-height: 480px) { .rz-welcome__inner { overflow-y: auto; overscroll-behavior: contain; } } /* #endregion */