/* ---- was style#spl-site-palette in the site footer ---- */
:root{
--spl-color-orange:#E46021;
--spl-orange-hover:#CF5218;
--spl-orange-600:#CF5218;
--spl-color-white:#FEF3EC;
}
/* ---- was style#spl-site-eyebrow-removal in the site footer ---- */
.spl-rv-ew,
.spl-contact-ew,
.apply-faq-kicker,
.ue-contact-kicker{display:none!important;}
/* [header rules moved to splport-nav-v2.css - see that file] */
/* ---- was style#spl-site-hero-grammar in the site footer ---- */
:root{--spl-site-hero-size:140px;--spl-site-hero-leading:.94;--spl-site-hero-tracking:-.015em;}
@media(max-width:1023px){:root{--spl-site-hero-size:105px;}}
@media(max-width:767px){:root{--spl-site-hero-size:57px;--spl-site-hero-leading:.89;}}
html body .spl-site-hero-title:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){
font-family:'Reckless',serif!important;font-weight:300!important;font-size:var(--spl-site-hero-size)!important;line-height:var(--spl-site-hero-leading)!important;letter-spacing:var(--spl-site-hero-tracking)!important;color:var(--spl-color-orange,#E46021)!important;text-align:left;text-wrap:wrap;}
html body .spl-site-hero-title .spl-site-hero-line:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){
display:block!important;font:inherit!important;letter-spacing:inherit!important;color:inherit!important;margin:0!important;}
html body .spl-site-hero-title .spl-site-hero-tail:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){display:flex!important;align-items:baseline;gap:.16em;flex-wrap:nowrap;}
html body .spl-site-hero-title .spl-site-hero-byline:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){
display:inline-block!important;flex:none;font-family:inherit!important;font-weight:400!important;font-size:clamp(22px,.32em,44px)!important;line-height:1!important;letter-spacing:var(--spl-site-hero-tracking)!important;color:inherit!important;margin:0!important;white-space:nowrap;}
/* ---- was style#spl-site-palette-rollout in the site footer ---- */
html body :is(#spl-nav .nb-drop,.spl-04-card,.spl-calc-box,.spl-criteria-card,#spl-criteria table,#spl-criteria tr,.ue-card,.ue-role-trigger,.ue-role-menu,.ue-role-option,.ue-input,.ue-select,.ue-textarea,.ue-date-display,.ue-date-open,.ue-cal,.ue-cal-nav,#splApplyForm .spl-premium-select-trigger,.spl-contact-card,.s5a-stat,.spl-inv-inp,.spl-inv-sel):not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){background-color:var(--spl-color-tan,#FEF3EC)!important;}
html body :is(.spl-btn-primary:not(.spl-calc-apply-btn),.spl-submit,.spl-btn-white,.ue-btn.primary,.ue-day.selected):not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){color:var(--spl-color-navy,#111437)!important;}
html body :is(#spl-nav .nb-overlay-head,.spl-hero-body,.spl-trust-label,.spl-04-body,.spl-calc-title,.spl-calc-label,.spl-calc-label span,.spl-range-labels span,.spl-result-label,.spl-result-sub,.spl-result-sub span,.spl-calc-disclaimer,.spl-calc-disclaimer a,.spl-rate-label,.spl-card-lvr,.spl-card-lvr strong,#spl-criteria p,#spl-criteria th,#spl-criteria td,.splport-inv-op-rowlabel,.splport-inv-jn-num,.splport-inv-faq-q,.splport-inv-faq-link,.splport-inv-ir-cue,.splport-inv-ir-google-link,.splport-inv-calc-finelink,.ue-direct-link,.ue-asap,.ue-review-heading,.apply-faq-index,.s5a-stat-val,.s5a-stat-lbl,.spl-id-railindex,.spl-contact-detail-label,.spl-contact-detail-val a):not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){color:var(--spl-color-navy,#111437)!important;}
/* ---- was style#spl-site-hero-rollout in the site footer ---- */
.spl-site-hero-contained{--spl-site-hero-size:52px;--spl-site-hero-leading:1.08;}
@media(max-width:767px){.spl-site-hero-contained{--spl-site-hero-size:40px;}}
html body .spl-site-hero-title .spl-site-hero-inline:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){font:inherit!important;letter-spacing:inherit!important;color:inherit!important;}
.inv1 .inv1-inner{grid-template-columns:minmax(0,1fr) minmax(240px,360px);row-gap:32px;}
.inv1 .spl-site-hero-title{grid-column:1/-1;width:100%;margin:0;}
.inv1 .inv1-illo{max-width:300px;justify-self:center;}
@media(max-width:860px){.inv1 .inv1-inner{align-items:stretch;}.inv1 .inv1-illo{align-self:center;}}
@media(prefers-reduced-motion:reduce){.inv1 .inv1-illo img,.inv1 [class*="inv1-f"]{animation:none!important;opacity:1!important;transform:none!important;}}
/* ---- was style#spl-site-rollout-state-corrections in the site footer ---- */
html body :is(.spl-btn-primary:not(.spl-calc-apply-btn),.spl-submit,.ue-btn.primary):hover:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){background-color:#E46021!important;}
html body .spl-site-hero-title.spl-site-hero-contained.spl-site-hero-contained:not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3){font-size:var(--spl-site-hero-size)!important;line-height:var(--spl-site-hero-leading)!important;}
/* ---- was style#spl-insights-light-contrast in the site footer ---- */
html body .itn-card:not(.itn-featured){background-color:#FEF3EC!important;}
html body .itn-card:not(.itn-featured) :is(.itn-card-pub,.itn-card-link),
html body .splport-ins-work-cardcategory{color:#111437!important;}
/* ===========================================================================
SPL SITE POLISH v1
Site-wide corrections that are too small to deserve their own file and too
broad to live on one page. Loaded from the site-wide footer code slot.
Convention: every rule is written `html body ...` so it outranks the page
embeds' own plain-class declarations without !important. Where a rule does
carry !important it is because the embed it is correcting used !important
first, and the reason is stated at that rule.
=========================================================================== */
/* [header rules moved to splport-nav-v2.css - see that file] */
/* ===========================================================================
2. ABOUT - THE FOUR LEADS
=========================================================================== */
/* Tom Woods' LinkedIn link sat 26px higher than the other three. Measured link
tops: 743 / 743 / 717 / 743. The cause is not the link - it is the block
above it. .spl-id-leadbtn is 240, 240, 215, 241px tall, because his name is
one line where the others wrap to two, and .spl-id-lead centres its column.
The grid already stretches all four .spl-id-lead columns to the same height
(293px each), so pushing the link to the bottom of its own column aligns all
four on one line regardless of how many lines the name above it takes.
padding-top keeps the 8px of air the margin used to provide. */
html body .spl-id-lead {
justify-content: flex-start;
}
/* The declaration this has to beat is `.spl-id.spl-id-js .spl-id-linkedin
{ margin-top: var(--space-2) }` - specificity (0,3,0). A rule written
`html body .spl-id-linkedin` is only (0,1,2), and the class column is
compared before the element column, so three classes beat one class plus two
elements and the first attempt silently lost. Matching the same three classes
and keeping html+body puts this at (0,3,2). */
html body .spl-id.spl-id-js .spl-id-linkedin,
html body .spl-id .spl-id-lead .spl-id-linkedin {
margin-top: auto;
padding-top: 8px;
}
/* ===========================================================================
3. THE JADIG PANEL - RESTORE THE PARENT BRAND'S GREEN
=========================================================================== */
/* The panel renders near-black, but nothing is wrong with the panel: it already
asks for the right colour.
.spl-cb-ribbon { background-image:
linear-gradient(158deg, var(--color-jadig-green) 0%,
var(--color-jadig-green-deep) 100%) }
The TOKENS were overwritten. Measured on /about:
--color-jadig-green #111437 should be #245036
--color-jadig-green-deep #0A0C26 should be #1d4029
That is the "remove the green" palette pass reaching past SPL's own surfaces
and onto the parent brand's colour - the same over-reach that took the green
off the quarterly-payment markers earlier. Jadig's green is not SPL green;
it is another company's brand asset and is not ours to neutralise.
Restored to the repository's values (src/app/tokens.css:50-51). Because the
component already consumes the tokens, this is the entire fix - no structural
CSS, and it repairs the Jadig block on /invest at the same time.
Contrast on the restored #245036:
Tan #FEF3EC 8.46:1
rgba(254,243,236,.72) -> #C1C5B9 5.25:1
Tan on the deep stop #1d4029 10.59:1
All pass AA. Orange is deliberately not introduced here: #E46021 on #245036
is 2.63:1 and fails even the 3:1 non-text threshold. */
/* Written `html:root`, not `:root`. The page declares its own `:root` block that
rebinds these to Navy, and a plain `:root` here is (0,1,0) - identical
specificity - so whichever comes last wins, and the page-level code slot
parses after the site-wide one. `html:root` is (0,1,1) and settles it on
specificity instead of order. */
html:root {
--color-jadig-green: #245036;
--color-jadig-green-deep: #1d4029;
}
/* ===========================================================================
4. IN THE NEWS - GIVE THE ARTICLES AN EDGE
=========================================================================== */
/* The five non-featured cards are Tan on a Tan page with `border: 0 none` and
`box-shadow: none`, so they have no edge at all and the list reads as one
undifferentiated column of text. The featured card is navy and does stand
out, which is what makes the rest look flat by comparison.
This is an edge-and-state pass, not a redesign: the layout, order and copy
are untouched. Each card gets a navy hairline, a soft navy-tinted shadow, and
a hover state that lifts it and draws an orange rule up its leading edge -
the same travelling-rule idiom the FAQ rows already use, so it is not a new
piece of vocabulary. */
html body .itn-card:not(.itn-featured) {
border: 1px solid rgba(17, 20, 55, 0.14);
box-shadow: 0 1px 2px rgba(17, 20, 55, 0.04);
position: relative;
overflow: hidden;
transition:
transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1),
border-color 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
html body .itn-card:not(.itn-featured)::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline-start: 0;
width: 3px;
background: var(--spl-color-orange, #E46021);
transform: scaleY(0);
transform-origin: top center;
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
html body .itn-card:not(.itn-featured):hover,
html body .itn-card:not(.itn-featured):focus-within {
transform: translateY(-2px);
border-color: rgba(17, 20, 55, 0.24);
box-shadow: 0 10px 28px rgba(17, 20, 55, 0.10);
}
html body .itn-card:not(.itn-featured):hover::before,
html body .itn-card:not(.itn-featured):focus-within::before {
transform: scaleY(1);
}
/* The publication label was 11px orange on Tan: 3.21:1, which fails AA for text
at any size. It also carried 0.88px of tracking left over from an uppercase
treatment that the site-wide `text-transform:none !important` has made
impossible to render, so it was reading as tracked-out lowercase. Navy at
16.32:1, one step larger, normal tracking. The orange accent in this card is
now the rule on the leading edge, where it is a graphic mark at 3.21:1
against Tan and clears the 3:1 non-text threshold. */
html body .itn-card .itn-card-pub {
color: var(--spl-color-navy, #111437);
font-size: 12px;
letter-spacing: normal;
opacity: 0.72;
}
html body .itn-card.itn-featured .itn-card-pub {
color: var(--spl-color-tan, #FEF3EC);
opacity: 0.78;
}
/* "Read article" was orange at 14px - the same 3.21:1 failure. Navy text with
an orange underline keeps the orange cue without putting it in the glyphs. */
html body .itn-card:not(.itn-featured) .itn-card-link {
color: var(--spl-color-navy, #111437);
text-decoration: underline;
text-decoration-color: var(--spl-color-orange, #E46021);
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
html body .itn-card:not(.itn-featured),
html body .itn-card:not(.itn-featured)::before {
transition: none;
}
html body .itn-card:not(.itn-featured):hover {
transform: none;
}
}
/* ===========================================================================
5. APPLY - RETIRE THE "SHARE A LENDING SCENARIO" CTA
=========================================================================== */
/* Worth recording accurately: this control was NOT broken. `a.ue-scenario`
points at `#ue-form-card`, that id exists, and the jump is a real 414px -
measured, link top 1476, target top 1890. On any normal desktop viewport the
form is already on screen when you click it, so the scroll is imperceptible
and the control reads as dead. It is redundant rather than faulty, which is
why removing it is the right call.
Hidden rather than deleted from the markup on purpose: it sits inside the
43KB live enquiry-form embed, and re-emitting all of that to drop one anchor
is disproportionate risk for a decorative CTA. If it should come out of the
DOM properly, that is a one-line deletion next time that embed is opened for
another reason. */
html body a.ue-scenario {
display: none;
}
/* ===========================================================================
6. CONTACT - USE THE APPLY PAGE'S PHONE/EMAIL TREATMENT
=========================================================================== */
/* The contact page's direct-contact block was much smaller and quieter than the
equivalent on /apply, and its label failed contrast:
contact .spl-contact-detail-label .65rem (10.4px) ORANGE, uppercase,
.1em tracking -> 3.21:1, fails
.spl-contact-detail-val .95rem navy
apply .ue-direct-key 16px navy, normal tracking
.ue-direct-link Reckless, clamp(1.2rem,2vw,1.55rem),
inline-flex, 9px gap, orange arrow
.ue-direct grid, 14px gap
Values below are the apply page's, read off the rendered element rather than
copied from its source, so the two pages now render the same object. The
uppercase on the old label never rendered anyway - the site forces
text-transform:none - so only its tracking survived, as spaced-out lowercase.
The arrow is added with ::after rather than by editing markup, so this needs
no change to the contact embed. It is aria-hidden by virtue of being
generated content, which is what we want: it is decoration, and the link text
already says where it goes. */
html body .spl-contact-details {
display: grid;
gap: 14px;
}
html body .spl-contact-detail-label {
font-size: 16px;
letter-spacing: normal;
margin-bottom: 3px;
}
html body .spl-contact-detail-val {
font-size: inherit;
}
html body .spl-contact-detail-val a {
font-family: "Reckless", Georgia, serif;
font-size: clamp(1.2rem, 2vw, 1.55rem);
line-height: 1.25;
display: inline-flex;
align-items: center;
gap: 9px;
text-decoration: none;
overflow-wrap: normal;
}
html body .spl-contact-detail-val a::after {
content: "\2192";
color: var(--spl-color-orange, #E46021);
transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}
html body .spl-contact-detail-val a:hover::after,
html body .spl-contact-detail-val a:focus-visible::after {
transform: translateX(4px);
}
@media (prefers-reduced-motion: reduce) {
html body .spl-contact-detail-val a::after { transition: none; }
html body .spl-contact-detail-val a:hover::after { transform: none; }
}
/* [header rules moved to splport-nav-v2.css - see that file] */
/* ===========================================================================
8. LOAN PARAMETERS - SEPARATE THE ROWS AND CARDS FROM THE FIELD
=========================================================================== */
/* Measured: section, table, every row and both rate cards all resolve to Tan
#FEF3EC, the cards carry a 10%-navy hairline and NO shadow. So the whole
block is one flat tan field and the table reads as loose text rather than
tabular data. The zebra striping that used to exist was collapsed when the
palette rollout forced `#spl-criteria tr` to Tan with !important.
Restored as a navy tint rather than the old near-white #FAFAF8, so it stays
inside the palette. It has to beat that rollout entry, which is
(4,1,2) + !important - hence the matching weight here. Everything else is
ordinary specificity.
The client explicitly likes this section, so this is separation only: no
layout, type or copy changes. */
html body #spl-criteria table tr:nth-child(even):not(#__spl_never_1):not(#__spl_never_2):not(#__spl_never_3):not(#__spl_never_4) {
background-color: rgba(17, 20, 55, 0.035) !important;
}
html body #spl-criteria table {
box-shadow: 0 1px 2px rgba(17, 20, 55, 0.05);
}
html body #spl-criteria .spl-criteria-card {
border-color: rgba(17, 20, 55, 0.16);
box-shadow: 0 6px 20px rgba(17, 20, 55, 0.06);
}
/* ===========================================================================
BACK TO TOP - floating, site-wide
Reuses the footer's existing scroll-to-top arrow rather than inventing a
second idiom: same glyph (viewBox 0 0 24 36, 1.25 stroke), same behaviour.
The footer keeps its own copy; this one is the floating version for when the
footer is nowhere near the viewport.
Colour: Navy field, Tan arrow = 16.32:1. Not orange - orange is the site's
action colour and this is a utility, not a call to action. A soft Tan ring
keeps it legible where it overlaps a Navy or Orange band.
It is injected by script, so it does not exist without JS. That is the right
trade for this control: it is a convenience that duplicates the browser's own
Home key, it is useless without JS anyway (it has to react to scroll), and
the alternative was editing the nav or footer embed on all 16 pages.
=========================================================================== */
.splport-top {
/* Sits above page content but below the nav's dropdown panels (z 70+). */
position: fixed;
z-index: 60;
right: clamp(16px, 2.5vw, 32px);
bottom: clamp(16px, 2.5vw, 32px);
/* 44px is the minimum comfortable pointer target. "Visible but not shouty" -
this is the smallest size that still clears that floor. */
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border: 1px solid rgba(254, 243, 236, 0.22);
border-radius: 999px;
background-color: var(--spl-color-navy, #111437);
color: var(--spl-color-tan, #FEF3EC);
box-shadow: 0 6px 20px rgba(17, 20, 55, 0.22);
cursor: pointer;
/* Hidden state. visibility (not display) so the transition can run, and it
leaves the tab order while hidden - a control you cannot see should not be
focusable. */
opacity: 0;
visibility: hidden;
transform: translateY(8px) scale(0.96);
transition:
opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
transform 200ms cubic-bezier(0.16, 1, 0.3, 1),
visibility 200ms cubic-bezier(0.4, 0, 0.2, 1),
background-color 160ms ease;
}
.splport-top[data-splport-top-shown="true"] {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.splport-top svg {
width: 17px;
height: 25px;
display: block;
pointer-events: none;
}
.splport-top:hover {
background-color: #242857;
}
.splport-top:active {
transform: translateY(1px) scale(0.98);
}
.splport-top:focus-visible {
outline: 2px solid var(--spl-color-orange, #E46021);
outline-offset: 3px;
}
/* Reduced motion: no slide, no fade in transform terms. It still appears and
disappears, because that IS the feature - it just does not animate. */
@media (prefers-reduced-motion: reduce) {
.splport-top {
transition: none;
transform: none;
}
.splport-top[data-splport-top-shown="true"] {
transform: none;
}
.splport-top:active {
transform: none;
}
}
/* Small screens: tuck it in slightly so it does not sit over content edges. */
@media (max-width: 520px) {
.splport-top {
width: 42px;
height: 42px;
right: 14px;
bottom: 14px;
}
}
/* ===========================================================================
SITE - SECOND POLISH PASS (2026-09-21)
Appended last in the site bundle, so it wins on source order over anything
declared earlier in this file at the same specificity.
=========================================================================== */
/* ---------------------------------------------------------------------------
1. BACK TO TOP - MAKE IT FINDABLE
The control was built and working; it was just not noticeable. It is a 44px
Navy circle in the bottom-right corner that fades in, on a page whose
right-hand margin is empty Tan - so it read as part of the background. Asked
twice where it was, which is the answer.
Changed my earlier reasoning. The original note here said "not orange -
orange is the site's action colour and this is a utility". That is a sound
principle and it lost to the fact that nobody could find the thing. Orange
on Tan is 3.21:1, over the 3:1 floor for a non-text graphic, and the Tan
arrow on Orange is the same 3.21:1 - both legal. It is also now 52px rather
than 44px, with a shadow heavy enough to lift it off the field.
Still hidden while the footer's own scroll-to-top arrow is on screen, so
there are never two of the same control visible at once.
--------------------------------------------------------------------------- */
html body .splport-top {
width: 52px;
height: 52px;
background-color: var(--spl-color-orange, #E46021);
color: var(--spl-color-cream, #FEF3EC);
border-color: rgba(254, 243, 236, 0.34);
box-shadow: 0 6px 18px rgba(17, 20, 55, 0.26), 0 2px 6px rgba(17, 20, 55, 0.18);
}
html body .splport-top:hover {
background-color: #D45516;
}
html body .splport-top svg {
width: 19px;
height: 28px;
}
html body .splport-top:focus-visible {
outline: 2px solid var(--spl-color-navy, #111437);
outline-offset: 3px;
}
@media (max-width: 520px) {
html body .splport-top {
width: 48px;
height: 48px;
}
}
/* ---------------------------------------------------------------------------
2. /in-the-news - "In the news." IS A PAGE TITLE, NOT A SUB-HEADING
It was 48px, which put it below four of the home page's section openers. A
page's own name should not be smaller than a section heading inside another
page. Brought up to the same scale as /about's title so the two secondary
pages open at one size; the home hero stays the largest thing on the site.
--------------------------------------------------------------------------- */
html body .itn-h1 {
font-size: clamp(2.5rem, 2rem + 4vw, 5.25rem);
line-height: 1.04;
letter-spacing: -0.02em;
}
/* ---------------------------------------------------------------------------
3. /about - THE PAGE TITLE, THE LEDE, AND THE GAP BETWEEN THEM
a. "A business built for one purpose" was 52px - the same problem as above.
Same scale as /in-the-news now, so the two pages open consistently.
b. The lede under it was rgba(17,20,55,0.76), a softened navy that reads as
grey. This is the paragraph that says what the business is; it is primary
copy, not metadata, so it is now solid Navy at 16.32:1 on Tan.
c. It also sat directly under the title with margin-top: 0. A display line
and its first paragraph need air between them or they read as one
wrapped block.
--------------------------------------------------------------------------- */
/* This one CANNOT be set as a font-size, and the first attempt failed because
of it. /about's title carries .spl-site-hero-title.spl-site-hero-contained,
and the hero-grammar block earlier in this file sizes it with
html body .spl-site-hero-title.spl-site-hero-contained
.spl-site-hero-contained:not(#a):not(#b):not(#c) { font-size: ... }
- three :not(#id) plus three classes, so (3,3,2), and !important on top. A
plain `html body .spl-id-title` at (0,1,2) is not in the same league, and
out-specifying it would mean copying that whole ballast selector.
But that rule's value is `var(--spl-site-hero-size)`, and the variable is
declared on the plain class `.spl-site-hero-contained` at (0,1,0). So the
size is settable by overriding the VARIABLE, which needs only to beat
(0,1,0) - and a custom property carries no !important from the rule that
consumes it. That is the system working as designed rather than being
fought: the hero grammar keeps ownership of how a hero title is drawn, and
this only says how big this page's is.
Scoped to the two /about titles (desktop and mobile) rather than raising
--spl-site-hero-size globally, because every "contained" hero on the site
reads that variable and only these two were asked about. */
html body .spl-id-title,
html body .spl-id-mtitle {
--spl-site-hero-size: clamp(2.5rem, 2rem + 4vw, 5.25rem);
--spl-site-hero-leading: 1.04;
}
html body .spl-id-body {
color: var(--spl-color-navy, #111437);
margin-top: clamp(1.25rem, 2vw, 2rem);
}
/* ---------------------------------------------------------------------------
4. /about - REPLACE THE HERO ILLUSTRATION
The old asset was the problem, not the layout. SPL-people-Graphic.png is
320x358 - a small, nearly square image - being shown in a 684x334 slot at
`object-fit: contain`. So it was upscaled past 2x AND letterboxed, leaving
the grey plate showing down both sides. That is what made it look wrong.
Replaced with broker-handoff-v1 from the repository's artwork set: 1672x941,
drawn in the brand's own three colours, two people across a table, and it
already carries the orange route-string with dot endpoints - the same motif
now running through the rest of the site. Converted to WebP at 1600px wide:
2.08MB -> 82KB.
DONE IN CSS, NOT MARKUP, deliberately. The image lives in a 45KB hand-written
embed and the only change needed is one src attribute; re-emitting 45KB to
swap a URL is how transcription errors get made. The wrapper paints the new
illustration and the old is hidden but left in the flow, so it still
sizes the plate exactly as before and the layout does not move. If this ever
moves into the markup, delete this block and set the src.
--------------------------------------------------------------------------- */
html body .spl-id-photo {
background-image: url("https://cdn.prod.website-files.com/69c1e42db2f14712cb15f6e7/6ab09308834d73cf82e4e727_about-hero-broker-handoff.webp");
background-size: cover;
/* The source is 16:9 and the slot is about 2:1, so cover trims top and
bottom. Biased upward to keep both faces and the handed-over documents in
frame and lose the empty table instead. */
background-position: center 38%;
background-repeat: no-repeat;
background-color: var(--spl-color-navy, #111437);
}
html body .spl-id-photo > .spl-id-photoimg {
visibility: hidden;
}
/* ===========================================================================
SITE - THIRD PASS (2026-09-23)
=========================================================================== */
/* ---------------------------------------------------------------------------
1. THE ORANGE STRING MOTIF IS RETIRED, SITE-WIDE
Decision: no orange connecting lines/strings anywhere on the site. The
illustrations themselves stay; only the lines go.
What that covers, found by sweeping every page for decorative orange strokes
and then checking each hit's actual role:
home the auto-placed strings (script and styles removed outright,
not just hidden), the reviews section's diagonal string and its
short reading-line, and the "Tell us about the deal" wire
/about the orange arc and end-dot over the hero illustration
/invest the reviews section's string, and the connector with dot ends
running between the two closing buttons and the illustration
/apply the curved string beside the form illustration
Deliberately KEPT, because they are controls rather than illustrations:
/invest the straight line joining the five numbered investment steps -
it is the step indicator, and without it the five icons read
as unrelated
/about the short orange underline under the selected Purpose /
Pragmatism tab - it shows which tab is open
Hidden with display:none !important. !important is correct here: several of
these are driven by their section's own script, which can set inline
styles, and a retirement rule must win over all of that unconditionally.
The markup can be deleted from each section at leisure; nothing depends on
it.
--------------------------------------------------------------------------- */
html body .splport-str,
html body .splport-hm-rv-string,
html body .splport-hm-rv-readline,
html body .splport-hm-ce-wire,
html body .splport-hm-heroart-atmosphere,
html body .spl-id-routestring,
html body .splport-inv-ir-string,
html body .spl-cl-railseg,
html body .ue-route {
display: none !important;
}
/* ===========================================================================
SITE - FOURTH PASS (2026-09-23)
Appended last in the site bundle.
=========================================================================== */
/* ---------------------------------------------------------------------------
0. TWO SHARED HEADING SIZES
"H1 size" and "H3 size" now mean one value each, everywhere.
H1 clamp(2.6rem, 1.6rem + 4.4vw, 5.5rem) 88px on a laptop, 42px on a phone
H3 clamp(1.4rem, 1.2rem + 1vw, 1.9rem) 30px on a laptop, 24px on a phone
Both are the design-token values the site head's own h1 default and the
investor page's --text-h3 already use, so nothing new is being invented;
they are just named once and reused. The home hero keeps its larger
display size on purpose - it is the one exception.
--------------------------------------------------------------------------- */
:root {
--spl-h1-size: clamp(2.6rem, 1.6rem + 4.4vw, 5.5rem);
--spl-h3-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem);
}
/* ---------------------------------------------------------------------------
1. PAGE TITLES AT H1 SIZE
Culture, Insights, both FAQ pages, Success Stories and every case study
now open at the same H1 size. Before this they were 84, 84, 48 (Borrower
FAQs), 72 (Investor FAQs - so the two FAQ pages did not even match each
other), 48 and 36px.
/about's title is set through the hero variable, not font-size: the hero
grammar sizes it with an (3,3,2) !important rule that reads
--spl-site-hero-size, so the variable is the handle.
--------------------------------------------------------------------------- */
html body .spl-id-title,
html body .spl-id-mtitle {
--spl-site-hero-size: var(--spl-h1-size);
--spl-site-hero-leading: 1.04;
}
html body .itn-h1,
html body .h6s-h1,
html body .h6si-h1,
html body .ph .h1,
html body .cs-detail-title {
font-size: var(--spl-h1-size);
line-height: 1.04;
letter-spacing: -0.02em;
}
html body .cs-detail-title {
margin: 0 0 0.3em;
}
/* ---------------------------------------------------------------------------
2. CULTURE - "At the centre of the business sit two principles." REMOVED
The two principles still follow directly; only the sentence introducing
them goes. Hidden rather than cut from the 45KB section embed.
--------------------------------------------------------------------------- */
html body .spl-id-mprinciplesheading {
display: none;
}
/* ---------------------------------------------------------------------------
3. ALIGNMENT - ONE TEXT COLUMN PER PAGE
Measured every section on every page at 1440 wide. Most pages hold their
text in the site's standard column: a 1,160px box with the site gutter
inside it, so text starts 190px from the screen edge. The sections that
were ported in later used a wider 1,400px box, so their text started at
64px. On Invest that zig-zagged 190 / 64 / 64 / 64 / 190 / 190 / 64 down
the page, and on Insights it is exactly what the boss spotted: "What we've
been doing lately" sat 126px left of "In the news", and its filter buttons
126px right of it.
Each of those containers now uses the same column as its neighbours:
var(--max-w) with var(--pad-x) inside, the same tokens the rest of the
site is built on. Wide MEDIA is left wide on purpose - the Insights photo
slider and the home reviews carousel keep their full width - only the text
and controls come into line.
The home page is the one page on a different, deliberate column (its text
starts 133px in: 1,160px of TEXT, with the gutter outside it). Its reviews
heading row is aligned to that instead.
--------------------------------------------------------------------------- */
html body .splport-ins-work-workhead,
html body .splport-inv-op-inner,
html body .splport-inv-calc-inner,
html body .splport-inv-jn-inner,
html body .splport-inv-ir-container {
box-sizing: border-box;
max-width: var(--max-w, 1160px);
margin-inline: auto;
padding-inline: var(--pad-x, clamp(20px, 4vw, 64px));
}
html body .splport-hm-rv .splport-hm-rv-head {
box-sizing: border-box;
max-width: calc(1160px + 2 * var(--pad-x, clamp(20px, 4vw, 64px)));
margin-inline: auto;
padding-inline: var(--pad-x, clamp(20px, 4vw, 64px));
}
/* ---------------------------------------------------------------------------
4. INVEST - SMALLER ITEMS
a. The line joining the five investment-journey steps is removed, as the
last of the orange lines.
b. "Smart investing, made Simple." is navy on this page only. Done through
the hero variable for the same reason as /about above.
--------------------------------------------------------------------------- */
html body .splport-inv-jn-route {
display: none !important;
}
html body .inv1 .spl-site-hero-title {
--spl-color-orange: #111437;
}
/* ---------------------------------------------------------------------------
5. INVEST - "YOU CHOOSE" AS A TWO-COLUMN EXPLORER
The animated infographic on the right is retired. In its place: one navy
panel holding the six attributes as large tiles, with the answer directly
beneath them. The heading, intro, the One opportunity / Diversified
portfolio toggle and its explanation sit in the left column.
Why this shape: the attributes were a row of small icons under a paragraph
on the left, next to a large illustration that looked interactive but was
not. Putting the controls where the illustration was, as tiles with a
visible hover lift and a clear selected state, makes the interaction the
obvious thing to do - and the answer appears right under the finger.
Every word of content is unchanged, and the section's own script still
drives it; the site script only moves the existing elements into the new
panel. All of this is gated on .splport-inv-op-v2, which that move adds,
so without script the section keeps its original layout.
--------------------------------------------------------------------------- */
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-stage {
display: none;
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-wrap {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(40px, 5vw, 80px);
align-items: center;
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-copy {
gap: 1.5rem;
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-intro {
margin: 0 0 0.5rem;
}
#splport-inv-op-root .splport-inv-op-explorer {
position: relative;
background: #111437;
color: #FEF3EC;
border-radius: 22px;
padding: clamp(18px, 2.2vw, 30px);
box-shadow: 0 30px 70px rgba(17, 20, 55, 0.22), 0 2px 6px rgba(17, 20, 55, 0.12);
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-tabs {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
margin: 0;
padding: 0;
border: 0;
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 104px;
padding: 14px 10px;
border: 1px solid rgba(254, 243, 236, 0.14);
border-radius: 14px;
background: rgba(254, 243, 236, 0.04);
color: rgba(254, 243, 236, 0.8);
font-size: 15px;
line-height: 1.25;
text-align: center;
cursor: pointer;
transition:
background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
color 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-tab .splport-inv-op-tabicon {
width: 28px;
height: 28px;
color: #E46021;
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-tab:hover {
background: rgba(254, 243, 236, 0.09);
border-color: rgba(228, 96, 33, 0.6);
color: #FEF3EC;
transform: translateY(-2px);
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-tab.is-on {
background: #FEF3EC;
border-color: #FEF3EC;
color: #111437;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
transform: translateY(-2px);
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-tab.is-on .splport-inv-op-tabicon {
color: #E46021;
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-tab:focus-visible {
outline: 2px solid #E46021;
outline-offset: 3px;
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-annotation {
display: flex;
gap: 18px;
align-items: flex-start;
margin: clamp(18px, 2vw, 26px) 0 0;
padding: clamp(18px, 2vw, 24px) 4px 4px;
background: transparent;
border: 0;
border-top: 1px solid rgba(254, 243, 236, 0.16);
border-radius: 0;
box-shadow: none;
color: #FEF3EC;
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-annotation-mark {
width: 52px;
height: 52px;
border: 1.5px solid #E46021;
color: #E46021;
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-annotation-value {
margin: 0 0 0.3em;
font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
line-height: 1.1;
color: #FEF3EC;
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-annotation-text {
margin: 0;
max-width: 46ch;
font-size: 1.0625rem;
line-height: 1.55;
color: rgba(254, 243, 236, 0.86);
}
/* The answer settles in each time it changes: a short fade and 8px rise,
the same feel as the FAQ answers. */
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-annotation.is-settling .splport-inv-op-annotation-body,
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-annotation.is-settling .splport-inv-op-annotation-mark {
animation: splport-op-settle 320ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
@keyframes splport-op-settle {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-wrap {
grid-template-columns: minmax(0, 1fr);
gap: 2rem;
}
}
@media (max-width: 520px) {
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-tab {
min-height: 88px;
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-tab { transition: none; transform: none !important; }
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-annotation.is-settling .splport-inv-op-annotation-body,
#splport-inv-op-root.splport-inv-op-v2 .splport-inv-op-annotation.is-settling .splport-inv-op-annotation-mark { animation: none; }
}
/* ---------------------------------------------------------------------------
6. INVEST - "WHY INVEST WITH SIMPLE" AND THE VIDEO, AS ONE SECTION
These were two back-to-back navy sections totalling 1,352px: three centred
columns of small text, then the video alone in a band of its own. They
are now one section - the three reasons as a left-aligned list on the
left, the video on the right - at roughly half the height.
Readability: the old columns were centred, 240px wide and 85%-opacity
light text, which is the hardest shape to read. Now each reason is a
left-aligned row - icon, title, sentence - separated by hairlines, at a
comfortable measure. The 8.00% figure is picked out in orange as the one
number in the section. Wording is unchanged.
--------------------------------------------------------------------------- */
.inv3x { display: block; width: 100%; }
.inv3x *, .inv3x *::before, .inv3x *::after { box-sizing: border-box; }
.inv3x-sec {
background: #111437;
color: #FEF3EC;
padding: clamp(56px, 6.5vw, 96px) 0;
}
.inv3x-inner {
max-width: var(--max-w, 1160px);
margin: 0 auto;
padding-inline: var(--pad-x, clamp(20px, 4vw, 64px));
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: clamp(36px, 5vw, 80px);
align-items: center;
}
.inv3x-h2 {
margin: 0 0 clamp(20px, 2.4vw, 32px);
font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 400;
color: #FEF3EC;
}
.inv3x-list { list-style: none; margin: 0; padding: 0; }
.inv3x-item {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 16px;
padding: clamp(14px, 1.6vw, 20px) 0;
border-top: 1px solid rgba(254, 243, 236, 0.14);
}
.inv3x-item:last-child { border-bottom: 1px solid rgba(254, 243, 236, 0.14); }
.inv3x-icon {
width: 44px;
height: 44px;
margin-top: 2px;
border-radius: 50%;
border: 1.5px solid #E46021;
display: grid;
place-items: center;
}
.inv3x-icon svg { width: 24px; height: 24px; }
.inv3x-title {
margin: 0 0 0.3rem;
font-size: 1.3rem;
line-height: 1.2;
font-weight: 400;
color: #FEF3EC;
}
.inv3x-body {
margin: 0;
font-size: 1rem;
line-height: 1.55;
color: rgba(254, 243, 236, 0.86);
}
.inv3x-fig { color: #E46021; font-weight: 400; white-space: nowrap; }
.inv3x-frame {
position: relative;
aspect-ratio: 16 / 9;
border-radius: 18px;
overflow: hidden;
background: #000;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 70px rgba(0, 0, 0, 0.4);
}
.inv3x-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
@media (max-width: 900px) {
.inv3x-inner { grid-template-columns: minmax(0, 1fr); }
}
/* ---------------------------------------------------------------------------
7. SUCCESS STORIES - A LIST AND A LIVE PREVIEW
Was: six white horizontal cards stacked down the page (and white is off
this site's palette). Now: a compact numbered list of the six cases on the
left, and one large preview on the right that swaps as you point at or tab
to each row. The preview stays pinned while you move down the list, and
the last case you looked at stays up when the pointer leaves.
Each row is the real link; the preview is decoration for sighted mouse
users and is hidden from screen readers, so nothing is announced twice.
Two of the six photos are low resolution (Kent Town 407px, Lower Plenty
520px wide), so the preview shows those at their true size on a navy field
rather than stretching them soft. All six photos were recompressed:
6.9MB down to 0.8MB for the page.
On phones and small tablets the preview is dropped and each row carries
its own photo, so the list stands on its own.
--------------------------------------------------------------------------- */
.cs-x .cs-listing-inner {
box-sizing: border-box;
max-width: var(--max-w, 1160px);
margin: 0 auto;
padding: 0 var(--pad-x, clamp(20px, 4vw, 64px)) 4rem;
}
.cs-x *, .cs-x *::before, .cs-x *::after { box-sizing: border-box; }
.cs-x-grid {
display: grid;
grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
gap: clamp(32px, 4vw, 64px);
align-items: start;
margin-top: clamp(32px, 4vw, 56px);
}
.cs-x-list {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid rgba(17, 20, 55, 0.16);
}
.cs-x-row {
position: relative;
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto 20px;
align-items: center;
gap: 16px;
padding: 22px 4px;
border-bottom: 1px solid rgba(17, 20, 55, 0.16);
color: #111437;
text-decoration: none;
}
.cs-x-row::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: #E46021;
transform: scaleX(0);
transform-origin: left center;
transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-x-row:hover::after,
.cs-x-row.is-on::after { transform: scaleX(1); }
.cs-x-row:focus-visible { outline: 2px solid #E46021; outline-offset: 4px; }
.cs-x-num {
font-size: 14px;
color: #111437;
opacity: 0.55;
font-variant-numeric: proportional-nums;
transition: color 200ms, opacity 200ms;
}
.cs-x-row.is-on .cs-x-num,
.cs-x-row:hover .cs-x-num { color: #E46021; opacity: 1; }
.cs-x-rowtext { min-width: 0; }
.cs-x-name {
display: block;
font-size: clamp(1.25rem, 1rem + 0.8vw, 1.6rem);
line-height: 1.2;
transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-x-meta {
display: block;
margin-top: 4px;
font-size: 14px;
line-height: 1.4;
color: #111437;
transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-x-row:hover .cs-x-name,
.cs-x-row.is-on .cs-x-name,
.cs-x-row:hover .cs-x-meta,
.cs-x-row.is-on .cs-x-meta { transform: translateX(6px); }
.cs-x-size { font-size: 1.15rem; color: #111437; white-space: nowrap; }
.cs-x-go {
width: 20px;
height: 20px;
color: #E46021;
opacity: 0;
transform: translateX(-6px);
transition: opacity 200ms, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-x-go svg { width: 100%; height: 100%; display: block; }
.cs-x-row:hover .cs-x-go,
.cs-x-row.is-on .cs-x-go { opacity: 1; transform: none; }
.cs-x-thumb { display: none; }
/* The preview. Every panel sits in the same grid cell, so the stage is as
tall as the tallest one and nothing jumps as they swap. */
.cs-x-stage {
position: sticky;
top: 120px;
display: grid;
}
.cs-x-panel {
grid-area: 1 / 1;
display: block;
border-radius: 22px;
overflow: hidden;
background: #111437;
color: #FEF3EC;
text-decoration: none;
box-shadow: 0 30px 70px rgba(17, 20, 55, 0.2);
opacity: 0;
visibility: hidden;
transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 380ms;
}
.cs-x-panel.is-on {
opacity: 1;
visibility: visible;
transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}
.cs-x-media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #1c2050;
}
.cs-x-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.05);
transition: transform 1100ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-x-media.cs-x-media--native img { object-fit: scale-down; }
.cs-x-panel.is-on .cs-x-media img { transform: none; }
.cs-x-body {
display: block;
padding: clamp(20px, 2.2vw, 30px);
transform: translateY(10px);
transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-x-panel.is-on .cs-x-body { transform: none; }
.cs-x-tags { display: block; font-size: 14px; color: #E46021; }
.cs-x-title {
display: block;
margin: 6px 0 16px;
font-size: var(--spl-h3-size);
line-height: 1.15;
color: #FEF3EC;
}
.cs-x-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
padding: 14px 0;
border-top: 1px solid rgba(254, 243, 236, 0.16);
border-bottom: 1px solid rgba(254, 243, 236, 0.16);
}
.cs-x-val { display: block; font-size: 1.35rem; line-height: 1.15; color: #FEF3EC; }
.cs-x-lbl { display: block; margin-top: 2px; font-size: 13px; color: rgba(254, 243, 236, 0.75); }
.cs-x-quote {
display: block;
margin: 16px 0 18px;
padding-left: 14px;
border-left: 3px solid #E46021;
font-size: 1rem;
line-height: 1.55;
font-style: italic;
color: rgba(254, 243, 236, 0.9);
}
.cs-x-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 15px;
color: #FEF3EC;
text-decoration: underline;
text-decoration-color: #E46021;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
}
.cs-x-cta svg { width: 16px; height: 16px; color: #E46021; }
/* The call to action under the list (its styles used to live in the embed). */
.cs-x .cs-cta {
text-align: center;
margin-top: 3rem;
padding-top: 2.5rem;
border-top: 1px solid rgba(17, 20, 55, 0.12);
}
.cs-x .cs-cta p { font-size: 1.0625rem; color: #111437; margin: 0 0 1.25rem; }
.cs-x .cs-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: #E46021;
color: #FEF3EC;
font-size: 0.9375rem;
padding: 0.875rem 1.75rem;
border-radius: 8px;
text-decoration: none;
transition: background-color 200ms;
}
.cs-x .cs-cta-btn:hover { background: #D0551A; }
@media (max-width: 900px) {
.cs-x-grid { grid-template-columns: minmax(0, 1fr); }
.cs-x-stage { display: none; }
.cs-x-row { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; }
.cs-x-num, .cs-x-go { display: none; }
.cs-x-thumb {
display: block;
width: 96px;
height: 72px;
border-radius: 10px;
overflow: hidden;
background: #1c2050;
}
.cs-x-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
}
@media (prefers-reduced-motion: reduce) {
.cs-x-row::after, .cs-x-name, .cs-x-meta, .cs-x-go, .cs-x-panel, .cs-x-media img, .cs-x-body { transition: none; }
.cs-x-media img, .cs-x-body { transform: none; }
}
/* ---------------------------------------------------------------------------
8. CASE STUDY PAGES - HEADINGS, TEXT COLOUR, NEXT CASE
a. Title at H1 size (section 1 above).
b. "Purchase . Residential . Non-standard income" at H3 size.
c. The Scenario / The Challenge / Solution & Outcome at H3 size, each led
by a small orange chapter number (01, 02, 03) - borrowed from the
reference build's case pages, and it keeps the orange accent those
labels had while they grow into real headings. The site script makes
both of these genuine
elements; they are styled here in BOTH their
old and new form, so the swap is invisible.
d. Every grey paragraph is now solid navy. The body text was
rgb(58,61,92), a greyed navy that read as secondary copy.
e. A "Next case study" card at the foot (built by the site script) so a
reader can move through all six without going back to the list.
--------------------------------------------------------------------------- */
html body .cs-detail .cs-detail-tags {
margin: 0 0 1rem;
font-size: var(--spl-h3-size);
line-height: 1.2;
letter-spacing: -0.005em;
font-weight: 400;
color: #111437;
}
html body .cs-detail .cs-content { counter-reset: splcs; }
html body .cs-detail .cs-col > h3,
html body .cs-detail .cs-col > h4 {
display: flex;
align-items: baseline;
gap: 0.45em;
margin: 0 0 0.6rem;
font-size: var(--spl-h3-size);
line-height: 1.2;
letter-spacing: -0.005em;
font-weight: 400;
text-transform: none;
color: #111437;
}
html body .cs-detail .cs-col > h3::before,
html body .cs-detail .cs-col > h4::before {
counter-increment: splcs;
content: "0" counter(splcs);
font-size: 0.55em;
color: #E46021;
font-variant-numeric: proportional-nums;
}
html body .cs-detail .cs-col p,
html body .cs-detail .cs-col p strong,
html body .cs-detail .cs-hero-quote {
color: #111437;
}
html body .cs-detail .cs-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.cs-next {
display: grid;
grid-template-columns: 96px minmax(0, 1fr) 20px;
align-items: center;
gap: 18px;
max-width: 520px;
padding: 12px 18px 12px 12px;
border: 1px solid rgba(17, 20, 55, 0.14);
border-radius: 16px;
color: #111437;
text-decoration: none;
transition: border-color 200ms, transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms;
}
.cs-next:hover {
border-color: rgba(228, 96, 33, 0.6);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(17, 20, 55, 0.1);
}
.cs-next:focus-visible { outline: 2px solid #E46021; outline-offset: 3px; }
.cs-next-thumb { width: 96px; height: 72px; border-radius: 10px; overflow: hidden; background: #1c2050; }
.cs-next-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.cs-next:hover .cs-next-thumb img { transform: scale(1.06); }
.cs-next-text { min-width: 0; }
.cs-next-label { display: block; font-size: 13px; color: #E46021; }
.cs-next-title { display: block; font-size: 1.25rem; line-height: 1.2; }
.cs-next-meta { display: block; margin-top: 2px; font-size: 14px; color: #111437; }
.cs-next-arrow { width: 20px; height: 20px; color: #E46021; transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1); }
.cs-next-arrow svg { width: 100%; height: 100%; display: block; }
.cs-next:hover .cs-next-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.cs-next, .cs-next-thumb img, .cs-next-arrow { transition: none; transform: none !important; }
}
/* ---------------------------------------------------------------------------
8. INSIGHTS ALIGNMENT - SPECIFICITY FIX
Section 3's column rule lost to the Insights embed's own
".splport-ins-work-sec .splport-ins-work-workhead" (two classes beat one),
so the heading row stayed at 1,400px. Repeated with the section class so
it wins: the heading now starts on the "In the news" line and the filter
buttons end on the same right edge as the column above.
--------------------------------------------------------------------------- */
html body .splport-ins-work-sec .splport-ins-work-workhead {
box-sizing: border-box;
max-width: var(--max-w, 1160px);
margin-inline: auto;
padding-inline: var(--pad-x, clamp(20px, 4vw, 64px));
}
/* ---------------------------------------------------------------------------
9. INVEST - SMALL FIXES (2026-09-23)
--------------------------------------------------------------------------- */
/* 9a. The calculator's fine print runs the full width of the navy results
card above it (979px at 1440), not a 568px column - so it reads as the
card's footnote rather than a tall, narrow block. */
html body .splport-inv-calc-sec .splport-inv-calc-fine {
max-width: none;
}
/* 9b. "Access Investor Portal" back to the right-hand column.
The button used to sit at the far end of the orange line that ran in from
the illustration. With the line removed it slid to the START of that row -
out under the illustration. It now sits at the row's right end, on the same
right edge as "Already investing?", its sentence and the secure-login note. */
html body .spl-cl-sec .spl-cl-rail-end {
justify-content: flex-end;
}
/* 9c. "Why invest with Simple" icons.
Were: repo drawings on a 42-unit grid shrunk to 24px, so their 2px lines
rendered at about 1.1px, thin orange on navy inside an orange ring - hard
to make out, and two of the three pictures were muddled (a tick crossed
with an x; a thumbs-up). Now: new icons drawn on a 24-unit grid at a 1.6px
line - a rising line, a portfolio pie with one slice picked out, a shield
with a tick - in Tan for legibility, with just the key stroke in orange,
on a soft rounded tile. Title and text sit on the tile's top line. */
html body .inv3x .inv3x-item {
grid-template-columns: 48px minmax(0, 1fr);
gap: 18px;
align-items: start;
}
html body .inv3x .inv3x-icon {
width: 48px;
height: 48px;
margin-top: 0;
border-radius: 14px;
border: 1px solid rgba(254, 243, 236, 0.16);
background: rgba(254, 243, 236, 0.06);
color: #FEF3EC;
}
html body .inv3x .inv3x-icon svg {
width: 26px;
height: 26px;
overflow: visible;
}
html body .inv3x .inv3x-icon .inv3x-accent { stroke: #E46021; }
html body .inv3x .inv3x-title { margin-top: 2px; }
html body .inv3x .inv3x-body { color: rgba(254, 243, 236, 0.9); }
/* ===========================================================================
FIFTH PASS (2026-09-23)
=========================================================================== */
/* ---------------------------------------------------------------------------
10. SECTION HEADINGS IN ORANGE (borrower side of the site)
Headings are SPL orange everywhere except the invest pages, which keep
their navy scheme. The home page's are in the home stylesheet; these are
the rest that were still navy: Success stories, each case study's title,
the Culture page's "Simple Property Loans is a Jadig Finance..." and its
Purpose / Pragmatism / Relationships / People headline (only Purpose was
orange, so the headline turned navy when you clicked another value), the
Apply page's "Questions, answered simply." and Insights' "What we've been
doing lately." Card and chapter headings (e.g. The Scenario) stay navy.
--------------------------------------------------------------------------- */
html body .ph .h1:not(#_a):not(#_b):not(#_c):not(#_d),
html body .cs-detail .cs-detail-title:not(#_a):not(#_b):not(#_c):not(#_d),
html body .spl-cb-culture .spl-cb-heading:not(#_a):not(#_b):not(#_c):not(#_d),
html body .spl-id .spl-id-title:not(#_a):not(#_b):not(#_c):not(#_d),
html body .spl-id .spl-id-mtitle:not(#_a):not(#_b):not(#_c):not(#_d),
html body .apply-faq #apply-faq-title:not(#_a):not(#_b):not(#_c):not(#_d),
html body .splport-ins-work-sec .splport-ins-work-workheading:not(#_a):not(#_b):not(#_c):not(#_d) {
color: #E46021 !important;
}
/* ---------------------------------------------------------------------------
11. CULTURE - CLICKING A VALUE NO LONGER MOVES THE PAGE
Two things moved the page when you clicked Purpose / Pragmatism /
Relationships / People:
a. the section ran a "scroll to advance" mode, and every click scrolled
the window to that value's scroll position;
b. the Purpose headline is five lines tall and the others are one, so
the section shrank by ~326px and everything below jumped up.
The site script now switches the scroll mode off (clicks just change the
text) and holds the copy column at the Purpose height, below. The
"Scroll to advance" hint goes with the scroll mode.
--------------------------------------------------------------------------- */
html body .spl-id .spl-id-copycol {
min-height: var(--splport-id-copy-h, 0px);
}
html body .spl-id .spl-id-scrollhint {
display: none !important;
}
/* ---------------------------------------------------------------------------
12. INVEST
--------------------------------------------------------------------------- */
/* 12a. Journey steps: the selected step's circle was a green tint with a
dark-green icon (the old eucalyptus colours). Now a pale orange tint with
an orange icon, keeping its orange ring. Only these two colour variables
are changed, and only inside this section. */
html body #splport-inv-jn-root {
--color-eucalyptus: #FBE3D6;
--color-eucalyptus-strong: #E46021;
}
/* 12b. Step names 13.6px -> 17.6px and numbers 12.5px -> 15px (+30%). */
html body #splport-inv-jn-root .splport-inv-jn-label:not(#_a) { font-size: 17.6px !important; line-height: 1.25 !important; }
html body #splport-inv-jn-root .splport-inv-jn-num:not(#_a) { font-size: 15px !important; }
/* 12c. "Invest With Us" under the Investor Portal copy: was an unstyled