What you earn
Your total monthly
commission
` with a DOUBLE break — `…Deriv API.
Earn
40% of…` — so the second sentence starts a new line and leaves a blank one
above it (line tops measured on deriv.com: 1468 / 1492 / 1516 / 1540 against a
24px line-height, i.e. a 48px step across the blank).
Raven emits the two sentences as sibling ``s with a single `
`
opening the second, so the line breaks but no blank line appears and the two
sentences read as one block (measured step 0). Promote the trailing span to a
block with one line-height above and drop its now-redundant `
`.
Measured step after: 46px against live's 48 — the 2px is line-box rounding
between an inline continuation and a block, not a spacing choice.
Live's CFDs card also carries a "See commission rates" link; deliberately NOT
added, as raven#289 notes that destination does not exist yet. */
[data-raven-path="/partners"] .fc-twoCard-description > span + span {
display: block;
margin-top: 24px;
}
[data-raven-path="/partners"] .fc-twoCard-description > span + span > br {
display: none;
}
/* P9. The two-up cards are far too tall below the 2-up breakpoint. Raven
server-renders `style="min-height:577px"` on each `.fc-twoCard` — the correct
DESKTOP height — but the value is baked into markup, so it applies at every
width and holds a 438px-of-content card open at 577 on a 375 viewport.
Live sizes these to content below 768 and applies a 456px floor only at
Webflow's mobile-portrait breakpoint. Measured on deriv.com with images forced
to decode (heights under-report badly otherwise):
375 -> min-height 456px, heights 456 / 560
767 -> min-height auto, heights 479 / 650
768 -> min-height auto, heights 576 / 576 (the baked value is right here)
Verified on staging: min-height 577 -> 456 at 375, 577 -> 0 at 480 and 767,
and untouched at 768 and up.
`!important` is unavoidable — 577 is an inline style, which outranks every
normal declaration. It is the only `!important` in this file, and it marks
work that belongs upstream: the renderer should not emit a viewport-
independent min-height for a block whose height is content-driven below the
2-up breakpoint. */
@media (max-width: 767px) {
[data-raven-path="/partners"] .fc-twoCard {
min-height: 0 !important;
}
}
@media (max-width: 479px) {
[data-raven-path="/partners"] .fc-twoCard {
min-height: 456px !important;
}
}
/* 2026-09-14 — Contact us only. Ported from deriv-com/raven#292.
DS FeatureCards still mounts an empty `.fc-header` after the duplicate
"Help centre" sectionTitle is suppressed (``).
Live has no header above the Help centre / Live chat cards. Path-scoped —
do not hide empty fc-header site-wide. */
[data-raven-path="/contact-us"] .fc-header,
[data-raven-path="/eu/contact-us"] .fc-header {
display: none;
}
/* 2026-09-15 — Terms and conditions document cards only (ROW + EU), both tabs
(For clients / For business partners). Live `.terms_item` is
background--slate--layer-2 = slate-75; the FeatureCardsIcon shells render
unschemed (#fff) here. Same pattern as the Derived Indices tiles rule above.
Do not paint other bands on these pages. */
[data-raven-path="/terms-and-conditions"]
.raven-tab-card-groups
.fci-section
.card-secondary:not([data-raven-card-scheme]):not(:has([data-raven-card-scheme])),
[data-raven-path="/terms-and-conditions"]
.raven-tab-card-groups
.fci-section
.card-secondary,
[data-raven-path="/eu/terms-and-conditions"]
.raven-tab-card-groups
.fci-section
.card-secondary:not([data-raven-card-scheme]):not(:has([data-raven-card-scheme])),
[data-raven-path="/eu/terms-and-conditions"]
.raven-tab-card-groups
.fci-section
.card-secondary {
background-color: var(--color-slate-75, #f6f7f8);
}
/* 2026-09-15 — "What our customers say" Trustpilot badge: DS Testimonial
(ui 0.1.32) inlines a 346×33 PNG data URI, which blurs at 2×. Swap the
replaced content for the approved Frontify SVG on the four pages that carry
the trustpilot testimonial (ROW + EU home, ROW + EU Why choose us). Remove
when the DS exposes a badge src prop. */
[data-raven-path="/"] .testimonial__tp-badge-img,
[data-raven-path="/eu"] .testimonial__tp-badge-img,
[data-raven-path="/why-choose-us"] .testimonial__tp-badge-img,
[data-raven-path="/eu/why-choose-us"] .testimonial__tp-badge-img {
content: url("https://media.ffycdn.net/eu/deriv/d/0e8c6ac0c57a42298297a05dd9866b59");
height: 28px;
width: auto;
}
@media (min-width: 768px) {
[data-raven-path="/"] .testimonial__tp-badge-img,
[data-raven-path="/eu"] .testimonial__tp-badge-img,
[data-raven-path="/why-choose-us"] .testimonial__tp-badge-img,
[data-raven-path="/eu/why-choose-us"] .testimonial__tp-badge-img {
height: 32px;
}
}
/* 2026-09-28 — Markets cryptocurrencies phone showcase: product art bakes a
thin Buy/Sell chrome strip (teal + pink) under the model. On ≤767 that strip
reads as a "gap" between the hero band and the next white section. Crop via
overflow + negative margin (clip-path alone leaves the layout box tall).
Remove when the Frontify person asset is re-exported without that pad.
Ported from deriv-com/raven#433. */
@media (max-width: 767px) {
[data-raven-path="/markets/cryptocurrencies"] .hero--showcase .hero__product-image,
[data-raven-path="/eu/markets/cryptocurrencies"] .hero--showcase .hero__product-image {
overflow: hidden !important;
line-height: 0 !important;
font-size: 0 !important;
}
[data-raven-path="/markets/cryptocurrencies"] .hero--showcase .hero__product-image img,
[data-raven-path="/markets/cryptocurrencies"] .hero--showcase .hero__product-image > *,
[data-raven-path="/eu/markets/cryptocurrencies"] .hero--showcase .hero__product-image img,
[data-raven-path="/eu/markets/cryptocurrencies"] .hero--showcase .hero__product-image > * {
display: block !important;
width: 100% !important;
height: auto !important;
max-height: none !important;
object-fit: contain !important;
object-position: top center !important;
/* Crop baked Buy/Sell chrome + dark pad under the model. Measured ~14px
of bar at 1016w art (~7px @393); use a larger crop so DPR / phone UI
chrome cannot peek as a teal/pink seam above the next white section. */
margin-bottom: -36px !important;
}
}
/* 2026-09-29 — RTL staging QA (Urdu / ckb / ar, etc.).
Scoped to [dir="rtl"] only — LTR locales untouched. */
/*
* 1) Horizontal scroll into blank space.
* Physical LTR geometry (max-content marquees, 100vw + fixed chrome, negative
* overhangs) under an inherited rtl axis widens the scrollport so the page can
* pan into empty canvas. Clip the root scrollport; pin FeatureAwards' marquee
* viewport to LTR like `.asm__viewport` already is.
*/
html[dir="rtl"],
html[dir="rtl"] body {
overflow-x: clip;
}
/*
* 1b) Nested carousels still scroll sideways under RTL because overflow:clip
* on the page cannot clip an inner overflow-x:auto track (Trustpilot
* testimonials, FeatureAwards, etc.). Keep swipe, hide the scrollbar, and
* stop the scroll chaining onto the page. Applies to every RTL locale.
*/
html[dir="rtl"] .testimonial__tp-carousel,
html[dir="rtl"] .fa__scroller {
scrollbar-width: none;
overscroll-behavior-x: contain;
}
html[dir="rtl"] .testimonial__tp-carousel::-webkit-scrollbar,
html[dir="rtl"] .fa__scroller::-webkit-scrollbar {
display: none;
}
html[dir="rtl"] .fa__scroller {
direction: ltr;
}
/* Marquee track stays physical LTR; award copy must keep page direction so
localized titles/subtitles still render RTL (same pattern as CoralBanner). */
html[dir="rtl"] .fa__item {
direction: rtl;
}
/*
* 2) Why-choose-us / FeatureAwards leaves.
* DOM is leaf--left, text, leaf--right. RTL flex paints left-leaf on the
* inline-start (right), so the mirrored pair faces outward instead of
* bracketing the copy. Same remedy as `.stats-v2__laurel` in globals.
*/
html[dir="rtl"] .fa__leaf--left,
html[dir="rtl"] .fa__leaf--right {
transform: scaleX(-1);
}
/*
* 3) Trading-spec / DynamicTable pagination.
* Flex row + chevrons inherit rtl and reverse to ‹ 9 … 1 ›. Isolate the
* control strip as physical LTR (same contract as CoralBanner / Trustpilot
* carousels); do not flip the nav SVGs.
*/
html[dir="rtl"] .tbl__pagination-wrap,
html[dir="rtl"] .pagination {
direction: ltr;
}
html[dir="rtl"] .pagination .navIcon svg {
transform: none;
}
/*
* 4) Homepage Day/Night (webflow-v2) — text only.
* Do NOT transform the plates here: `.dnt__v2-bg-night` is position:sticky and
* both use background-attachment:fixed; any transform (host or painted pseudo
* that forces overflow/size hacks) breaks that contract into a day|night split.
* RTL plate mirroring is done by flipping the bitmap URLs in
* ResponsiveDayNight so the DS sticky/fixed transition is untouched.
* Day copy is BODY_TEXT rgb(51,51,51); force true black while that channel is
* present. Night (rgb(255…)) no longer matches.
*/
html[dir="rtl"] .dnt--webflow-v2 .dnt__headline[style*="rgb(51"],
html[dir="rtl"] .dnt--webflow-v2 .dnt__description[style*="rgb(51"] {
color: #000 !important;
}
/*
* 2026-09-29 — Crypto exchange "What you get" (FeatureCardsCarousel).
* DS `.fcc-header` uses margin-inline:auto (≥768), which centers as both
* margin-left and margin-right auto. On RTL keep only margin-left:auto so the
* header is not dual-auto centered. Path-scoped; LTR untouched.
* Ported from deriv-com/raven#440.
*/
@media (min-width: 768px) {
html[dir="rtl"]
[data-raven-path="/trading-platforms/crypto-exchange"]
.fcc-header,
html[dir="rtl"]
[data-raven-path="/eu/trading-platforms/crypto-exchange"]
.fcc-header {
margin-left: auto !important;
margin-right: 0 !important;
}
}
/* 2026-09-30 — Regulatory: Financial Commission follow-on band.
Zero bottom pad only; keep top + inline from `.raven-eis-followon__inner`.
Ported from deriv-com/raven#445. */
[data-raven-path="/regulatory"] .raven-eis-followon__inner,
[data-raven-path="/eu/regulatory"] .raven-eis-followon__inner {
padding-bottom: 0 !important;
}
/* 2026-09-30 — Fraud prevention: phishing-signal cards grey fill.
Reinforce `.raven-fraud-grey-cards` so staging/website cannot lose the
slate-75 shells on white. Wrapper is locale-safe (section id + route).
Also target the stable section id directly so locales never depend on
English title matching alone.
Ported from deriv-com/raven#445. */
[data-raven-path="/fraud-prevention"] .raven-fraud-grey-cards .fci-section .card-secondary,
[data-raven-path="/eu/fraud-prevention"] .raven-fraud-grey-cards .fci-section .card-secondary,
[data-raven-path="/fraud-prevention"] [data-raven-section-id="featureCards-1"] .fci-section .card-secondary,
[data-raven-path="/eu/fraud-prevention"] [data-raven-section-id="featureCards-1"] .fci-section .card-secondary {
background-color: var(--color-slate-75, #f6f7f8) !important;
}
/* 2026-09-30 — Fraud "Learn more about staying safe" CTA.
Keep DS external arrow on the RIGHT; never the press-kit download glyph.
Applied by route (not EN title) so locales keep the same chrome.
Ported from deriv-com/raven#445. */
[data-raven-path="/fraud-prevention"] .raven-fraud-stay-safe .rsb__link svg,
[data-raven-path="/eu/fraud-prevention"] .raven-fraud-stay-safe .rsb__link svg {
display: inline-block;
}
[data-raven-path="/fraud-prevention"] .raven-fraud-stay-safe .rsb__link::before,
[data-raven-path="/eu/fraud-prevention"] .raven-fraud-stay-safe .rsb__link::before {
content: none;
display: none;
}
/* 2026-09-30 — Marketing heroes: description measure.
Cap `.hero__description` / `.header__description` at 48rem (Terms + heroes).
Ported from deriv-com/raven#445. */
.hero__description,
.header__description {
max-width: 48rem;
}
/*
* 2026-09-30 — Homepage iPhone: hero--split “expands” on scroll.
* DS uses 100vh / 80vh / 10vh. iOS Safari changes the layout `vh` when the
* URL bar shows/hides, so the person slot grows mid-scroll. Lock to `svh`
* (stable small viewport). Keep the DS view-timeline shrink (rounded corners
* + slight scale) — do not set animation:none. Desktop ≥992 untouched.
* Proper later: DS Hero mobile viewport units.
* Ported from deriv-com/raven#445.
*/
@media (max-width: 991px) {
[data-raven-path="/"] .hero.hero--split,
[data-raven-path="/eu"] .hero.hero--split {
height: 100vh; /* fallback */
height: 100svh;
}
[data-raven-path="/"] .hero--split .hero__inner,
[data-raven-path="/eu"] .hero--split .hero__inner {
height: 100vh;
height: 100svh;
}
[data-raven-path="/"] .hero--split .hero__image-slot,
[data-raven-path="/eu"] .hero--split .hero__image-slot {
top: 10vh;
top: 10svh;
height: 80vh;
height: 80svh;
}
}
/*
* 2026-09-30 — Homepage DayNight mobile: unit alignment only.
* Do NOT force background-attachment:scroll or background-size:cover — that
* destroys the sticky/fixed plate crossfade (day top / night bottom seam).
* DS sticky is 100dvh while night plate is 100vh / margin-top:-100vh; align
* sticky to the same vh contract as the night plate so the sky cut from the
* dvh/vh mismatch is reduced. Parallax + attachment stay DS stock.
* Real-iOS fixed-attachment bugs still need a DS mobile redesign.
* Ported from deriv-com/raven#445.
*/
@media (max-width: 991px) {
[data-raven-path="/"] .dnt--webflow-v2 .dnt__sticky--webflow-v2,
[data-raven-path="/eu"] .dnt--webflow-v2 .dnt__sticky--webflow-v2 {
height: 100vh;
min-height: 100vh;
}
}
/*
* 2026-09-30 — Homepage DayNight iOS: pale sky band under the day photo.
* iOS ignores background-attachment:fixed, so the day photo (one 100vh tile,
* repeat) is painted from the top of its own box. DS JS sets that box's height
* inline up to ~92% of the 200vh section, so on iOS it outgrows one tile and
* the repeated sky shows under the man. Capping the box at one tile keeps the
* JS shrink (day → night reveal) intact; attachment/size/crossfade untouched.
*/
@supports (-webkit-touch-callout: none) {
@media (max-width: 991px) {
[data-raven-path="/"] .dnt--webflow-v2 .dnt__v2-bg-day,
[data-raven-path="/eu"] .dnt--webflow-v2 .dnt__v2-bg-day {
max-height: 100vh;
}
}
}
/*
* 2026-09-30 — Homepage iPhone (WebKit only): hero + DayNight, CSS-only pass 2.
* Scope: iOS via `@supports (-webkit-touch-callout: none)` (iOS-only property),
* phones/tablets <992px, homepage + EU homepage. Android / desktop untouched.
*
* Hero: the earlier `svh` lock only moves the DS stylesheet values; DS JS
* still writes inline heights measured from `innerHeight`, which iOS changes
* mid-scroll while the URL bar collapses — so the person slot kept growing.
* `!important` beats inline styles; lock the three JS-driven boxes to `svh`.
*
* DayNight: iOS ignores `background-attachment: fixed`, so the DS model (night
* plate viewport-pinned by `fixed`, day plate a relative box shrinking from
* 200vh with a bottom-anchored cover image) paints each photo from its own
* box → the day photo slides/zooms as its box shrinks (sky cut) and drifts
* off the night photo (day|night split). Make both plates identical
* viewport-pinned 100vh boxes (day becomes sticky too, one-tile cap already
* on staging) and give both photos the SAME fixed scale and anchor:
* `background-size: auto 100vh` (constant while the day box shrinks — `cover`
* re-fits to the shrinking box and mis-scales the day photo, seen as two
* heads on iPhone) and `50% 0` (top-anchored so the pinned box keeps the
* image still, centred so the subject stays in a 375px frame). The DS
* height shrink of the day box is then a straight bottom-up wipe over an
* aligned night photo — V2's `auto 100vh` mobile model. iOS loses the
* parallax it never had.
* Proper later: DS DayNight mobile mode without fixed attachment.
*/
@supports (-webkit-touch-callout: none) {
@media (max-width: 991px) {
[data-raven-path="/"] .hero.hero--split,
[data-raven-path="/eu"] .hero.hero--split,
[data-raven-path="/"] .hero--split .hero__inner,
[data-raven-path="/eu"] .hero--split .hero__inner {
height: 100svh !important;
}
[data-raven-path="/"] .hero--split .hero__image-slot,
[data-raven-path="/eu"] .hero--split .hero__image-slot {
top: 10svh !important;
height: 80svh !important;
}
[data-raven-path="/"] .dnt--webflow-v2 .dnt__v2-bg-day,
[data-raven-path="/eu"] .dnt--webflow-v2 .dnt__v2-bg-day {
position: sticky;
top: 0;
max-height: 100vh;
background-attachment: scroll;
background-size: auto 100vh;
background-position: 50% 0;
}
[data-raven-path="/"] .dnt--webflow-v2 .dnt__v2-bg-night,
[data-raven-path="/eu"] .dnt--webflow-v2 .dnt__v2-bg-night {
background-attachment: scroll;
background-size: auto 100vh;
background-position: 50% 0;
}
}
}