/** * Temporary public-site visual hotfixes. * * Scope every rule under a page path so it cannot leak site-wide: * * [data-raven-path="/markets/stocks"] .some-class { … } * * Add a dated comment + ticket / audit-log pointer on each rule. * Delete the rule when the pipeline fix lands — do not grow this into a theme. * * Linked from site chrome (`RavenHotfixStylesheet`). Not loaded in Studio. */ /* Example (disabled): [data-raven-path="/markets/stocks"] .fc-grid { // 2026-09-11 — hotfix for … — remove after … } */ /* 2026-09-13 — Who we are "Our principles" cards are invisible. Live (`.prinicples_card-small`) is slate-50 (#fff) on a slate-75 band; Raven paints the cards slate-75 too, so the shells vanish into the band and the section reads as four bare text columns. The band itself is already correct (`.raven-section-pad[data-raven-surface="coloured"]` = #f6f7f8) — only the card fill is wrong. Cause: the global `.card-secondary[data-raven-card-scheme="light"]` maps the light scheme to slate-75, the same value as the surrounding coloured surface. The `.raven-principles-icon-cards` rule in globals.css was meant to cover this, but PageRenderer only emits that wrapper for `section.kind === "principlesCards"`. The served page has no such wrapper in its DOM (raven#285 reports the section as `valuesCards`), so that rule never matches here and the light scheme wins. Target is the "Our principles" grid — the only `.fci-section` and the only `.card-secondary` on this page ("Our values" is `card-primary`), so this cannot repaint a neighbouring band. `/eu/who-we-are` emits a different `data-raven-path`, so the exact-match selector cannot reach it. Ported from deriv-com/raven#285. See raven docs/audit-and-fix/who-we-are-audit-and-fix.md §22. */ [data-raven-path="/who-we-are"] .fci-section .card-secondary { background-color: var(--color-slate-50, #ffffff); } /* 2026-09-13 — Partners: four live-parity gaps. Ported from deriv-com/raven#287. Each selector was counted on the rendered staging page and hits only its own section — `.fc-twoCard` x2 (featureCards-2), `.tiers__card` x4 (tiers-3), `.image-banner--chips` x1 (imageBanner-4), `.card-secondary` x4 (valuesCards-7). Section ids match raven's one-for-one. See raven docs/audit-and-fix/partners-pages-audit-and-fix.md, 2026-09-13. */ /* P1. "How you will earn" two-up cards: live `.feature_item-card-container` is 32px from 992px up and 24px below it (measured on deriv.com at 1440 and 390). Raven is 24px at every width, so only desktop is wrong — a blanket radius would break the mobile match. Fill, body padding, pill and image order already match live. */ @media (min-width: 992px) { [data-raven-path="/partners"] .fc-twoCard { border-radius: 32px; } } /* P2. Tier cards carry 76px of dead space under the copy at desktop; live `.tiers_card_wrapper` is a flat 24px at both widths. Mobile is already 24px, so writing the longhand is a verified no-op there and corrects desktop only. */ [data-raven-path="/partners"] .tiers__card { padding-bottom: 24px; } /* P3. "Grow faster with AI on your side" sits flush on the seam where the tiers band ends: the section is marked `data-raven-surface="coloured"` but its `.raven-section-pad` renders transparent, so the dark card's top edge lands exactly on the slate-75 -> white transition. On live this banner is not a section at all — it is a sub-block INSIDE `.section_partner-tiers`, one child of a flex `.tiers-component-2` whose own `gap` supplies the space below the "Learn more about partner tiers" link. Raven splits it into its own section, so the tiers container's closing pad and any pad added to the banner stack. Keep the band paint (live's banner does sit on slate-75) and close the tiers container at live's gap instead of opening a pad on the banner. Measured link-bottom to dark-card-top on deriv.com: 32px at 390/480/767 and 64px at 768/992/1440 — the flip is Webflow's 768 tablet breakpoint, not the DS 992. Verified on staging: 112 -> 64 at 1440, 56 -> 64 at 768, 56 -> 32 at 390. (Follows deriv-com/raven#289 P7, which revises the first pass at this section. Raven uses a flat 32px; that is live's mobile value only and leaves >=768 32px short, so the measured pair is used instead.) */ [data-raven-path="/partners"] [data-raven-section-id="imageBanner-4"] { background-color: var(--color-slate-75, #f6f7f8); } [data-raven-path="/partners"] .tiers__container { padding-bottom: 32px; } @media (min-width: 768px) { [data-raven-path="/partners"] .tiers__container { padding-bottom: 64px; } } [data-raven-path="/partners"] .image-banner--chips { padding-top: 0; } /* P4. "Why your clients will trade with Deriv" cards are slate-75 on a slate-75 band, so the shells vanish — the same defect as the who-we-are rule above, on the same `valuesCards` -> FeatureCardsIcon path. Live `.prinicples_card-small` is slate-50 at every width. "Partner benefits" is `card-primary`, so this cannot reach it. */ [data-raven-path="/partners"] .fci-section .card-secondary { background-color: var(--color-slate-50, #ffffff); } /* 2026-09-13 — Partners help centre "Quick help" is double-padded above and unpadded below. Ported from deriv-com/raven#287. `faq-2`'s pad is emitted `raven-section-pad--top` with no `--bottom` (the mirror of the /partners imageBanner-4 case above), and `.faq-accordion__container` is `112px 24px 0` (56px 16px 0 on mobile). The section above it, `.hcc-container`, already closes with a full 112/56 pad, so the two stack: measured 233px between the last category card and the "Quick help" title where the page rhythm is 112. Below, the FAQ list ends flush against the CTA banner, and `.crb__inner` carries no vertical pad of its own (`0px 24px`) to absorb it. Drop the section's own top pad (the previous section already supplies the full gap) and close it with the matching bottom pad. `.faq-accordion__container` occurs exactly once on this page, inside `faq-2`. */ [data-raven-path="/partners-help-centre"] .faq-accordion__container { padding-top: 0; padding-bottom: 56px; } @media (min-width: 992px) { [data-raven-path="/partners-help-centre"] .faq-accordion__container { padding-bottom: 112px; } } /* --------------------------------------------------------------------------- 2026-09-12 rules from raven, ported 2026-09-13 (deriv-com/raven, pre-#285). Each defect was reproduced on staging and each target value re-measured on deriv.com before porting. Two blocks needed a different selector than raven's and two needed different values — see the notes on each. Not a byte mirror. --------------------------------------------------------------------------- */ /* D1. "Types of Derived Indices" tiles are white; live `options_card-small is-indices` is slate-75 (measured 3x rgb(246,247,248) on deriv.com at 1440). The globals rule `.fci-section .card-secondary:not([data-raven-card-scheme])` forces unschemed FeatureCardsIcon shells to slate-50, and all 3 tiles here are unschemed. SELECTOR DIFFERS FROM RAVEN: raven scopes this with `.raven-derived-type-cards`, which is never emitted on this site (0 occurrences in the repo and in the served DOM), so the upstream rule would be dead here. Scoped to the section id instead — `featureCards-2` is the only `.fci-section` on the page and holds all 3 of its `.card-secondary`. The `:not()` guard keeps an explicit Studio colorScheme winning. */ [data-raven-path="/markets/derived-indices"] [data-raven-section-id="featureCards-2"] .fci-section .card-secondary:not([data-raven-card-scheme]):not( :has([data-raven-card-scheme]) ) { background-color: var(--color-slate-75, #f6f7f8); } /* D2. "How to trade Volatility Indices on Deriv" media box. The shell forces `aspect-ratio: 1/1`, so the image renders square (358x358 at 390, 568x568 at 1440). Live is driven by the asset's own ratio: intrinsic 1208x1378, rendered 358x408 at 390 and 560x639 at 1440. Staging serves the same artwork (intrinsic 1200x1369 — same ratio to 4dp), so the square is the whole defect. Mobile also has the wrong order: the DOM is image-then-content, and live puts the image BELOW the step copy (verified at 390 on both sites). IMPLEMENTATION DIFFERS FROM RAVEN — raven's fixed heights are not used here: * Mobile: raven hardcodes `height: 392px`, which is live's height at a 375px viewport only. Live is fluid — measured 408px at a 390 viewport. Driving the box from the asset ratio matches live at every width (verified: 358x408 at 390) instead of being 16px short at 390 and further off on wider phones. * Desktop: raven adds `height: 639px` + `flex: 0 1 auto`. On this DOM that COLLAPSES the media column — `.steps__image` is width:100%, so with `flex-basis: auto` the wrapper has no intrinsic width and computes to 0px wide, which lets `.steps__content` expand to the full 1136px row (measured). Dropping the flex override keeps the two-column layout intact and the ratio alone gives 568x648. Residual vs live at desktop: 568x648 here against live's 560x639. That 8/9px is the 1280px DS container versus live's 1200px grid — a container-width difference, not a media-box one — so it is left alone, as on who-we-are. */ [data-raven-path="/derived-indices/volatility-indices"] .steps__image-wrapper { aspect-ratio: 1200 / 1369; height: auto; } @media (max-width: 991px) { [data-raven-path="/derived-indices/volatility-indices"] .steps__container { flex-direction: column-reverse; } } /* D3. Gold / Silver "trading platforms" tiles are slate-75 on a slate-75 `coloured` band, so the shells vanish — the same card-fill-matches-surface defect as who-we-are and partners P4. Live is `options_card-small is-white` (5x rgb(255,255,255) on a rgb(246,247,248) band, measured on both routes). SELECTOR DIFFERS FROM RAVEN: raven scopes this with `.raven-metal-trading-platforms`, which is never emitted on this site (0 occurrences in the repo and in the served DOM). Scoped to the section id instead — the section is `valuesCards-2` on both routes, holding all 5 `.card-secondary` on each page. Raven's rule also paints `.card-primary`; omitted deliberately, because here the only `.card-primary` tiles are the 3 in `featureCards-1` ("Why trade gold/silver with Deriv"), which are intentionally dark / grey / coral and must not be repainted. */ [data-raven-path="/markets/commodities/precious-metals/gold"] [data-raven-section-id="valuesCards-2"] .card-secondary, [data-raven-path="/markets/commodities/precious-metals/silver"] [data-raven-section-id="valuesCards-2"] .card-secondary { background-color: var(--color-slate-50, #ffffff); } /* D4. "How to trade Tactical Indices on Deriv" has no top padding at all, so the heading butts directly against the comparison table above it (measured gap 0 between `table-3`'s bottom edge and the `fc-header` top). The heading lives inside `.fc-container`, so the pad belongs there. VALUE DIFFERS FROM RAVEN: raven uses 40 / 80. Live's section carries `padding-top: 56px` at 390 and `112px` at 1440 — the same 56/112 rhythm this site uses everywhere else (cf. `.hcc-container`). Raven's 80 leaves the section 32px short of live, so the measured values are used instead. `.raven-howto-cards` wraps exactly one `.fc-container` here (the page has 2 in total). */ [data-raven-path="/markets/derived-indices/tactical-indices"] .raven-howto-cards .fc-container { padding-top: 56px; } @media (min-width: 992px) { [data-raven-path="/markets/derived-indices/tactical-indices"] .raven-howto-cards .fc-container { padding-top: 112px; } } /* --------------------------------------------------------------------------- 2026-09-13 — Partners follow-ups. Ported from deriv-com/raven#289 (P6/P8/P9). That PR's P7 revises P3 above and is applied there, in the block it corrects, rather than layered on top. NOTE: raven#289 was still OPEN upstream when this was ported. Each rule was re-derived against live rather than taken on trust, so this stands on its own measurements, but if #289 changes in review this block may need revisiting. Counts on the rendered staging page: `.tiers__card` x4 and `.tiers__card-title` / `-description` x4 each (tiers-3), `.fc-twoCard` x2 and `.fc-twoCard-description > span + span` x2 (featureCards-2). --------------------------------------------------------------------------- */ /* P6. Tier card copy runs together, centred and mis-weighted. Live is `

What you earn
Your total monthly commission

` — 16px / 400 / 24px line-height, left aligned, slate-1200, with only the label bold (measured on deriv.com at 1440). Raven ships the same two-part copy but the break is a literal "\n" inside one text node, which `white-space: normal` collapses to a space, so label and value render as one centred 18px/800 run. The newline is already in the content, so `pre-line` restores the break without touching markup and `::first-line` re-bolds the label. `::first-line` is only sound while the label never wraps — verified by reading the rendered first line of all 8 title/description blocks: every one is exactly "What you earn" or "How you qualify". */ [data-raven-path="/partners"] .tiers__card { text-align: left; } [data-raven-path="/partners"] .tiers__card-title, [data-raven-path="/partners"] .tiers__card-description { white-space: pre-line; font-size: 16px; font-weight: 400; line-height: 24px; color: var(--color-slate-1200, #181c25); } [data-raven-path="/partners"] .tiers__card-title::first-line, [data-raven-path="/partners"] .tiers__card-description::first-line { font-weight: 700; } /* P8. "How you will earn" card copy loses the paragraph break before its second sentence. Live is one `

` 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; } }