* Login *
* * and Framer renders text with `white-space: pre`/`pre-wrap`, which makes those * indentation newlines REAL line breaks. Measured on the export as shipped: all * 783 text nodes carried injected newlines and 385 of them rendered a phantom * empty line. "Login" sat on line 2 of 3 inside a 36px button that clips at * 73px, so only the sliced tops of the glyphs showed; the hero headline * measured 320px tall instead of 128px, which was the yawning gap under it. * * On Framer's own hosting this never surfaces: React hydrates and rewrites each * text node from the component data, discarding the pretty-printer's * whitespace. This archive ships without its JS runtime (see * docs/LANDING-PAGE.md), so nothing ever rewrites them. * * ── Why this rule and not an HTML rewrite ─────────────────────────────────── * `white-space-collapse` is the collapsing half of the `white-space` shorthand, * split away from the wrapping half (`text-wrap-mode`). Overriding only the * collapsing leaves every element's WRAP behaviour exactly as the export set * it — the 214 `pre` nodes (nav labels, buttons) still refuse to wrap, the 569 * `pre-wrap` nodes (headlines, body copy) still do. Rewriting 14k lines of * generated HTML would have to be redone on every re-export and could not make * that distinction as cleanly. * * Lossless here, verified rather than assumed: the export contains no sits in, which inherits the
* same setting and holds its own indentation whitespace between the tags.
*
* Delete this file the day the runtime is present, and check the rule is
* genuinely unnecessary before you do.
*/
.framer-text,
[class*="framer-"]:has(> .framer-text) {
white-space-collapse: collapse !important;
}
/* ── Sections the product does not have ──────────────────────────────────────
Owner call 2026-07-29: anything with no real Hytrade equivalent comes off the
page rather than being dressed up with a screenshot that does not match the
copy above it.
`#market` sells a stock screener, market heatmaps, a news feed and AI
earnings-call summaries. `#assets` is a marquee of stock and crypto logos
(AAPL, NVDA, BTC). We are futures execution and ICT charting: none of that
exists, and the asset strip advertises markets we do not offer.
Hiding rather than cutting the markup, deliberately. The page is generated —
excising nodes from 14k lines of compiled Framer output would not survive a
re-export, and one rule per section is far easier to audit or reverse than a
diff against minified JSX. `display: none` genuinely collapses the layout:
measured 18,155px -> 15,299px, exactly the 2,856px those two occupied.
The nav's "Product" dropdown still lists them, so its entries are hidden to
match — a menu item that scrolls to a section that is gone is worse than no
menu item. */
#market,
#assets {
display: none !important;
}
/* The "Product" dropdown's own entries for those two sections. Scoped to the
href so it keeps working if the menu markup is regenerated. */
.framer-body a[href$="#market"],
.framer-body a[href$="#assets"],
a[href="/#market"],
a[href="/#assets"],
a[href="./#market"],
a[href="./#assets"] {
display: none !important;
}
/* ── The page ENDS at the CTA (owner spec 2026-07-29) ────────────────────────
"Remove all from the website including [the Community section] and below, but
ending at the all-in-one portfolio-tracking CTA with the blue background —
include that part still and anything below. Remove the screenshot of the
platform from that blue part."
So everything between Community and the closing CTA comes off:
#community Superinvestors + public portfolios — a social product we do
not have, and the invented followers/portfolio values in it
were the template's fiction under our name.
#portfolio "Real-time portfolio tracking" — a holdings tracker; we are
futures execution.
#ios-app an iOS app that does not exist.
#testimonials the invented quote wall (Sarah L., Michael T. ...), praising
tools we do not ship. It also WRAPS #more-features, so one
rule takes both — and the closing CTA and the footer sit in a
sibling subtree, which is why they survive it.
Hidden, not cut, for the same reason #market and #assets above are: the markup
is generated, and one auditable rule per section beats a diff against 14k lines
of compiled output that a re-export would undo. */
#community,
#portfolio,
#ios-app,
/* #calendars — "Key financial events": a stock EARNINGS calendar (PYPL, NVDA,
CRM) and a US macro table, both the template's, both dated Aug 2024. We ship a
real economic calendar inside the terminal; what this section advertises is an
equities earnings feed we do not have, beside macro numbers that are two years
stale. Removed on the owner's call 2026-07-29. */
#calendars {
display: none !important;
}
/* ── #testimonials is COLLAPSED, never display:none (found 2026-07-31) ─────────
This one section cannot be hidden the way the others are, because the header
holds a REF to it.
The nav is a three-variant component (Transparent / Black / White) and the
page drives it off three scroll targets: #hero-title -> Black, #sections-1 ->
White, and #testimonials -> Black again. Framer measures all three every
scroll frame and builds ONE ascending input range out of their offsets, then
interpolates the scroll position through it to pick the variant.
`display: none` gives an element offsetTop 0 and clientHeight 0. That appends
a 0 to the END of an otherwise ascending range, and the range stops being
monotonic — so the interpolation returns a bogus index, the resolved variant
comes back undefined, and the component falls back to its base variant. The
observable result is that hiding a section 18,000px down the page silently
froze the header on Transparent at the TOP of the page: it never went dark on
scroll and never went white over the white block, which is exactly what was
reported. Verified both ways in a browser — with this file's old rule the
header never leaves Transparent at any scroll position; with the rule off it
walks Transparent -> Black -> White correctly.
So the section is collapsed IN FLOW instead: zero height, clipped, invisible,
and unreachable by pointer or keyboard, but still a real box at a real offset.
The offset it lands on is the right one by construction — it sits between
#features (white, ends where it starts) and the closing dark CTA/footer, so
"the header goes Black again here" means "the header goes Black when the dark
closing section reaches it". That is the same rule the template intended, on
our shorter page.
If you ever need this section truly gone, the header's third target has to
move with it — otherwise the nav goes dead again, far from anything you
touched. */
#testimonials {
height: 0 !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
border: 0 !important;
overflow: hidden !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Every link to a hidden section, wherever it lives — the "Product" dropdown, the
footer's own menus, or an in-page button. A menu item that scrolls to a section
that is gone is worse than no menu item, and the first pass at this rule missed
the footer's /#ios-app, /#more-features and /#testimonials entries, which stayed
clickable and jumped nowhere.
Suffix match, so it covers every form the export emits for the same target
("#x", "./#x", "/#x") without listing three selectors per anchor. These ids
exist only on this page, so an unscoped match cannot reach anything else. */
a[href$="#market"],
a[href$="#assets"],
a[href$="#calendars"],
a[href$="#community"],
a[href$="#portfolio"],
a[href$="#ios-app"],
a[href$="#testimonials"],
a[href$="#more-features"] {
display: none !important;
}
/* The product screenshot inside the blue CTA. Scoped to the CTA's own direct
child so the generic "Frame 1" name cannot reach anything else on the page; the
hashed class is listed beside it as a second anchor for the same node. */
[data-framer-name="CTA"] > [data-framer-name="Frame 1"],
[data-framer-name="CTA"] > .framer-diiher {
display: none !important;
}
/* ── The wordmark has to darken with the WHITE header ────────────────────────
The nav ships three copies of the logo artwork: one for the dark states and
one for each of the two white states (desktop `framer-v-1us43vy`, mobile
`framer-v-12a0azj`). The template's white-state copies were drawn in
rgb(9, 9, 11); our rebrand replaced all three with the same white Hytrade
wordmark, so on a white bar the logo is white on white — invisible.
That was unreachable until the header started changing variants again (see
#testimonials above), which is why it had never been seen.
Recolouring here rather than in the bundle: the artwork is a background-image
built from an SVG string inside a content-hashed module, and re-issuing that
whole import chain to change one fill is a great deal of risk for a colour.
`brightness(0)` maps every non-transparent pixel to black while leaving the
alpha alone — the mark is solid white on transparent, so the result is the
flat dark wordmark the white bar wants, and it needs no second copy of the
artwork to drift out of sync with the first. */
.framer-qEQgo.framer-v-1us43vy .framer-1p4iy09,
.framer-qEQgo.framer-v-12a0azj .framer-1p4iy09 {
filter: brightness(0);
}
/* ── The hero screenshot gets the same framed treatment, in black ────────────
Owner 2026-07-31: "make that with the fat-ish rounded corners like the
screenshot we use below that has the white rounded corners padding, but for
that one should be black."
The screenshot in the "Everything in one place" section below is framed by
the export itself: a 20px radius, a 2px rgb(228,228,231) border over a white
card, and a 3px rgb(244,244,245) ring outside it (12px / 1px / 1px on mobile).
The hero's copy of the terminal had none of that — square corners, straight
cut, so the black gutter baked into the image just ended rather than reading
as a device.
Mirrored here with the same geometry and the page's own black instead of the
white, which is what makes it work in the hero specifically: that screenshot
sits on the colourful gradient video, so a black bezel is genuinely visible
there and separates the panel from the artwork the way the light one does
against the white section. Radius on .framer-7ui6uc because the export
already gives it `overflow: hidden` — it is the box that clips the image, so
the corners round the artwork rather than just the wrapper.
Layout is untouched: radius, background and box-shadow all paint inside or
outside the existing box and none of them take part in sizing. */
.framer-uwaC5 .framer-7ui6uc {
border-radius: 20px;
background-color: #09090b;
/* The reference's frame reads 5px thick: a 2px border drawn inside the white
card plus the 3px ring outside it. Taken as one 5px ring here so the black
margin round the artwork is the same weight without a border eating 2px of
the screenshot. box-shadow paints outside the box and never affects layout. */
box-shadow: 0 0 0 5px #09090b;
}
/* The export drops to a 12px radius and a 1px ring for the framed screenshot on
phones; the hero's follows it so the two read as one treatment. */
@media (max-width: 809.98px) {
.framer-uwaC5 .framer-7ui6uc {
border-radius: 12px;
box-shadow: 0 0 0 1px #09090b;
}
}
/* ── The hero must be COLORFUL at first paint (owner 2026-07-30) ──────────────
The hero's animated background is a video (the gumlet mp4 in
.framer-17hkb9r-container). The export shipped it preload="none", no
autoplay, no poster — playback waited on the fetchpriority="low" main bundle
hydrating and calling play(), so every first visit opened on a stationary
BLACK hero for seconds before "the animation came in".
index.html now gives the tag autoplay + a self-hosted frame-0 poster; this
rule paints that same frame behind the video's container as the layer of
last resort — for the instant before the poster decodes, for autoplay-blocked
environments (iOS Low Power Mode, data-saver), and for the day the template
author's gumlet account dies and the mp4 404s. The video covers it the moment
real frames exist: the container is the hero-filling absolute box the video
fills 100%/100% with object-fit:cover, so center/cover here is the identical
crop and the handoff poster -> frame 0 is pixel-for-pixel. */
.framer-17hkb9r-container {
background: url("images/hero-first-frame.jpg") center / cover no-repeat;
}
/* ── The cycling word in the hero headline ────────────────────────────────────
"The most reliable [trading|charting|backtesting|strategies]" over
"platform for futures", the cycling word swapping every 3s. The motion is
backtrader.io's, captured from their running page rather than approximated:
a word leaves by rising half its own height while fading and blurring to 4px
over 300ms, the next one is placed half a height BELOW at zero opacity, and
it rises into place over another 300ms. Their exact declaration was
`transition: opacity .3s, transform .3s, filter .3s` with translateY(±50%)
and blur(4px), and every one of those numbers is reproduced here. Theirs
fires every 2500ms; ours is 3000ms because that is what was asked for.
CSS KEYFRAMES, NOT A TIMER. backtrader re-titles a single span from
JavaScript. We cannot: this headline is server-rendered markup that React
hydrates and re-renders on every breakpoint change, so a script that rewrote
it would be fighting React for the node — the documented failure mode on this
page, and the cause of the load-time flash that took three sessions to kill.
All four words are therefore in the DOM from the start and the animation only
ever touches properties, which hydration cannot see. Nothing to observe,
nothing to re-apply, and it still runs if the side-car JS never loads.
The words are stacked in one grid cell, so the slot is as wide as the widest
of them and NOTHING MOVES as they swap — a slot that resized per word would
drag the centred line left and right every three seconds. */
/* @generated by scripts/set_landing_headline.py — edit that, not this */
.hy-cycle {
display: inline-grid;
/* Baseline alignment on an inline-grid follows the first row's baseline, which
drifts as the row's contents animate; `top` pins the box to the line instead
and the line-height does the rest. */
vertical-align: top;
/* The word is CENTRED in its slot (owner, 2026-07-31: "the second row should
be centered").
This was `start` for a good reason that no longer holds. While the word
shared line one, centring it inside a slot cut for the longest alternative
split the leftover width in two and put half of it between "reliable" and
the word — a double space that changed size on every swap. Now the word has
a line to itself, there is nothing beside it for a gap to open against, and
the slot and the word are both centred on the same axis: whatever is showing
sits in the middle of the headline.
The slot stays as wide as the WIDEST alternative. That is what stops the row
jumping every three seconds. */
justify-items: center;
}
.hy-cycle-word {
grid-area: 1 / 1;
/* `backwards` is load-bearing: without it a word shows its NORMAL style during
its animation-delay, so every word would sit stacked and fully opaque on top
of the others until its turn came round. */
animation: hy-word-cycle 15s ease infinite backwards;
}
.hy-cycle-word:nth-child(1) {
animation-delay: 0s;
}
.hy-cycle-word:nth-child(2) {
animation-delay: 3s;
}
.hy-cycle-word:nth-child(3) {
animation-delay: 6s;
}
.hy-cycle-word:nth-child(4) {
animation-delay: 9s;
}
.hy-cycle-word:nth-child(5) {
animation-delay: 12s;
}
/* One word's 3s turn inside the 15s loop: 300ms in, held, 300ms out, then
invisible for everyone else's turn. */
@keyframes hy-word-cycle {
0% {
opacity: 0;
transform: translateY(50%);
filter: blur(4px);
}
2% {
opacity: 1;
transform: translateY(0);
filter: blur(0px);
}
18% {
opacity: 1;
transform: translateY(0);
filter: blur(0px);
}
20% {
opacity: 0;
transform: translateY(-50%);
filter: blur(4px);
}
20.001% {
opacity: 0;
transform: translateY(50%);
filter: blur(4px);
}
100% {
opacity: 0;
transform: translateY(50%);
filter: blur(4px);
}
}
/* Asked not to be moved: hold the first word, still and legible. */
@media (prefers-reduced-motion: reduce) {
.hy-cycle-word {
animation: none;
opacity: 0;
}
.hy-cycle-word:nth-child(1) {
opacity: 1;
}
}
/* The hero's call to action, wearing the header's own button.
The export put a search box here. It searched nothing — the page it points at
was never exported — so it was a control that looked live and was not. It now
says "Start for free" and is styled as the SAME white pill the header carries,
120% larger because it is the page's primary action rather than a corner
affordance (owner, 2026-07-31).
Only the skin is CSS; the words are rewritten in the markup, because
hytrade-fixes.js routes calls to action by their TEXT at click time and a
label painted on with `content:` would be invisible to it.
Matched by `:has()` on its own shape rather than the generated class name,
which changes on every re-export — verified to hit exactly this one anchor.
The magnifier goes with the search it belonged to: `display: none`, not
`opacity: 0`, so it gives its space back.
`!important` on the box properties because the export dresses this anchor
through `.framer-uwaC5 .framer-1ik7w2m` — two classes, which outranks an
element plus two `:has()`. Without it the label restyles and the pill does
not, which reads as a half-applied change rather than a cascade problem. */
[data-framer-name="Hero title"] a:has(> [data-framer-name="Icon"]) {
width: fit-content !important;
margin-inline: auto !important;
padding: 10px 19px !important;
border-radius: 12px !important;
background: #fff !important;
gap: 0 !important;
}
[data-framer-name="Hero title"] a:has(> [data-framer-name="Icon"]) > [data-framer-name="Icon"] {
display: none;
}
/* The label's wrapper is 296px wide — the width the search FIELD needed. Left
alone it holds the pill open to 334px with the words floating in the middle,
so `width: fit-content` on the anchor sizes to a box that is itself padded
with nothing. */
[data-framer-name="Hero title"] a:has(> [data-framer-name="Icon"]) > [data-framer-name="Icon"] ~ * {
width: auto !important;
}
[data-framer-name="Hero title"] a:has(> [data-framer-name="Icon"]) p {
font-size: 17px;
font-weight: 500;
line-height: 24px;
color: #09090b;
white-space: nowrap;
}
/* @end generated */
/* @generated by scripts/set_landing_firms.py — edit that, not this */
/* The marquee's marks.
Painted as backgrounds on each item's existing avatar box rather than by
swapping the markup: half the export's items draw through an and half
through an SVG sprite