/* ================================================================================ EQ SYSTEM — foundation and correction layer. Loads LAST, after bootstrap / style / responsive / landing. That ordering is deliberate: this file is the only place allowed to correct the layers beneath it, so every rule here is either (a) a token the rest of the system should be built on, or (b) a documented correction of a defect measured in the shipped CSS. It never introduces a new visual world — the dark ground, the mint and gold accents, IBM Plex Sans and Space Grotesk are the committed identity and stay exactly as they are. Sections 1 Token foundation — type scale, spacing scale, role colors, motion 2 Motion policy — global prefers-reduced-motion 3 Focus — the visible-focus system (fixes a site-wide WCAG 2.4.7 failure) 4 Skip link 5 Browser surfaces — selection, caret, scrollbars, markers, underlines 6 Numerals — tabular figures for money, sizes and timestamps 7 Legibility floor — lifts sub-10px type to a readable minimum 8 Pointer targets — 44px minimum on coarse pointers 9 Edges and depth — the hairline was invisible at 1.20:1 10 Icon corrections — three FA4 fallbacks rendered the wrong picture 11 Form controls — one consistent field across the app 12 Navigation state — the current page had no indication of any kind 13 Anchor targets — the fixed header covered every anchored heading 14 Headings — balance, tracking and orphan control 15 Selection — the mint wash inverted badly on the mint fills 16 Content-driven overflow — hashes and addresses broke the layout 17 Inline code — Bootstrap's magenta was the color of every 18 Forced colors — Windows High Contrast had no baseline at all 19 Print — nothing styled the printed page, including the routes people actually print: research notes, legal pages, statements 20 Section grounds and chapter markers — every band varied the page ground by ~1.5 L*, so the landing page scrolled as one undifferentiated dark surface, and every header on it was centred ================================================================================ */ /* ================================================================================ 1 TOKEN FOUNDATION -------------------------------------------------------------------------------- Three token namespaces shipped independently before this file: the landing palette (--primary-dark / --accent-green), the eq-panel set (--eq-surface-*), and the pre-hydration boot palette in index.html (--eq-bg / --eq-accent). They disagreed on the accent: #3fcf9b, #00c896 and #00b685 all claimed the same role, so the mint visibly shifted the moment the WASM tree replaced the boot shell. The aliases below make one green canonical without restyling anything. The scales are the substantive addition. The shipped CSS used 62 distinct font sizes and 63 distinct spacing values — steps of 0.01rem apart, which is 0.16px and therefore not a step at all. New work uses these tokens. ================================================================================ */ :root { /* --- Type scale. 11 / 12 / 13 / 14 / 16 / 18 / 22 / 28 / 36 then fluid. Fine-grained at the small end because the terminal surfaces are dense; the ratio opens up above body size where headings need real separation. */ --eq-text-2xs: 0.6875rem; /* 11px — uppercase micro-labels, the legibility floor */ --eq-text-xs: 0.75rem; /* 12px — table meta, chip text */ --eq-text-sm: 0.8125rem; /* 13px — secondary UI text */ --eq-text-md: 0.875rem; /* 14px — dense UI body, the app default */ --eq-text-base: 1rem; /* 16px — prose body */ --eq-text-lg: 1.125rem; /* 18px — lead paragraphs, card titles */ --eq-text-xl: 1.375rem; /* 22px — subsection headings */ --eq-text-2xl: 1.75rem; /* 28px — section headings */ --eq-text-3xl: 2.25rem; /* 36px — page titles */ --eq-text-4xl: clamp(2.5rem, 1.6rem + 3.4vw, 3.5rem); --eq-text-5xl: clamp(3rem, 1.4rem + 6vw, 5rem); /* Line heights travel with the size: display type tightens, body opens up. */ --eq-leading-display: 1.08; --eq-leading-heading: 1.2; --eq-leading-body: 1.6; --eq-leading-ui: 1.4; /* Tracking. Negative on display so large type does not read loose; positive on the uppercase micro-labels, which are unreadable without it. */ --eq-tracking-display: -0.028em; --eq-tracking-heading: -0.015em; --eq-tracking-body: 0; --eq-tracking-label: 0.08em; /* Prose measure. Long-form pages (blog, guides, legal) cap here. */ --eq-measure: 68ch; /* --- Spacing scale, 4px base. */ --eq-space-1: 0.25rem; --eq-space-2: 0.5rem; --eq-space-3: 0.75rem; --eq-space-4: 1rem; --eq-space-5: 1.25rem; --eq-space-6: 1.5rem; --eq-space-8: 2rem; --eq-space-10: 2.5rem; --eq-space-12: 3rem; --eq-space-16: 4rem; --eq-space-20: 5rem; --eq-space-24: 6rem; /* --- Canonical accent. #3fcf9b is the most-used of the three and carries the best contrast on the dark ground (10.13:1), so it wins the role. The two legacy names are re-pointed at it rather than deleted: page code still references them by name. */ --eq-accent: #3fcf9b; --eq-accent-strong: #8de3bb; --eq-accent-ink-on: #04120c; /* text laid on a mint fill — 13.4:1 */ /* --- Focus. Two layers so the ring survives on any ground: a dark separator hugging the element, then the mint ring outside it. On the mint buttons the separator is what makes the ring visible at all. */ --eq-focus-color: #8de3bb; --eq-focus-halo: #04070c; --eq-focus-width: 2px; --eq-focus-offset: 2px; /* --- Edges. The shipped --glass-border composites to 1.20:1 against the page ground, so card boundaries were effectively invisible and every panel bled into the background. These read as edges. */ --eq-edge: rgba(211, 223, 236, 0.16); /* 1.9:1 — quiet internal divisions */ --eq-edge-strong: rgba(211, 223, 236, 0.26); /* 2.6:1 — card and panel boundaries */ --eq-edge-accent: rgba(141, 227, 187, 0.34); /* --- Depth. Every shadow carries a real offset and a soft blur; none of them is a zero-offset colored halo. */ --eq-elev-1: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.20); --eq-elev-2: 0 2px 4px rgba(0, 0, 0, 0.30), 0 8px 24px rgba(0, 0, 0, 0.28); --eq-elev-3: 0 4px 8px rgba(0, 0, 0, 0.32), 0 18px 48px rgba(0, 0, 0, 0.36); /* --- Motion. One easing family. `exit` is faster than `enter` because things leaving should not make the user wait. */ --eq-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --eq-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --eq-dur-instant: 90ms; --eq-dur-fast: 160ms; --eq-dur-base: 240ms; --eq-dur-slow: 420ms; } /* ================================================================================ 2 MOTION POLICY -------------------------------------------------------------------------------- Only bootstrap.css honored prefers-reduced-motion; the ambient background pulse, the scroll-reveal system, the cookie-banner entrance and every hover lift ran regardless. Vestibular-sensitive users had no way to turn any of it off. This does not freeze the interface. Transitions collapse to 1ms rather than 0 so `transitionend` listeners still fire, and opacity is left animatable so fade-in reveals still resolve to visible instead of stranding content at opacity: 0. ================================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } html { scroll-behavior: auto !important; } /* The reveal system starts elements translated and transparent, then animates them in. With animations suppressed they must land at their resting state rather than staying where they started. */ .reveal, .reveal-ready, [data-reveal] { opacity: 1 !important; transform: none !important; } /* Ambient decoration has no informational value; stop it outright. */ .gradient-bg::before { animation: none !important; } } /* ================================================================================ 3 FOCUS -------------------------------------------------------------------------------- landing.css:580 set `outline: none !important; box-shadow: none !important` on :focus and :focus-visible for .btn, .btn-primary-custom, .btn-outline-custom, .btn-outline-success and .btn-outline-danger — that is every button on the site. Thirteen further `outline: none` declarations across landing.css and style.css removed it from inputs, selects, tabs and the language picker. The result was a keyboard user with no indication of where they were on any page: a WCAG 2.4.7 (AA) failure across the whole product. The ring below is authored rather than default: mint, offset off the control so it never sits on the label, and backed by a dark separator ring so it also reads when the control itself is mint. :focus-visible keeps it off mouse clicks, so the visual quiet the original rule was reaching for is preserved. ================================================================================ */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"], [role="tab"], [role="link"], [role="menuitem"], [role="switch"], [role="checkbox"], [role="radio"], [contenteditable="true"]):focus-visible { /* `outline` already follows the element's own border-radius in every current engine, so the ring wraps pills and cards correctly without being told the shape. No box-shadow here: these elements sit on the dark ground where the mint reads on its own, and overwriting box-shadow would flatten the elevation of anything that carries one. */ outline: var(--eq-focus-width) solid var(--eq-focus-color) !important; outline-offset: var(--eq-focus-offset) !important; } /* The buttons carry the highest-specificity suppression in landing.css, so they are re-stated explicitly rather than relying on :where()'s zero specificity. */ .btn:focus-visible, .btn-primary-custom:focus-visible, .btn-outline-custom:focus-visible, .btn-outline-success:focus-visible, .btn-outline-danger:focus-visible, .navbar-toggler:focus-visible, .nav-link:focus-visible, .language-select:focus-visible, .profile-tab:focus-visible, .pricing-toggle:focus-visible { outline: var(--eq-focus-width) solid var(--eq-focus-color) !important; outline-offset: var(--eq-focus-offset) !important; /* These do get the dark separator. .btn-primary-custom is filled with the same mint as the ring, so without a dark band between them the ring dissolves into the button. It also beats the unconditional `box-shadow: none !important` that .navbar-toggler still carries. */ box-shadow: 0 0 0 var(--eq-focus-offset) var(--eq-focus-halo) !important; } /* Text fields signal focus on the field itself as well as the ring — the ring says "you are here", the border says "this is now editable". */ input:focus-visible, select:focus-visible, textarea:focus-visible, .form-control:focus-visible, .form-input:focus-visible { border-color: var(--eq-edge-accent) !important; } /* Mouse users keep the quiet original treatment: no ring on plain :focus. */ :focus:not(:focus-visible) { outline: none; } /* The ring must appear the instant focus lands. 54 rules across landing.css and style.css declare `transition: all`, which sweeps outline-width, outline-color and outline-offset into the same 350ms interpolation as everything else — measured mid-transition the ring is still 3px of currentColor at offset 0, so for a third of a second a keyboard user sees a washed-out ghost of the indicator rather than the indicator itself. Focus is the one state that must never animate in. Fixed at the cause rather than on the focused element: `all` is replaced with the explicit list of properties those rules actually meant to animate. Every intended hover and press transition is preserved; only outline drops out. This also stops `all` from animating layout properties, which is where its cost comes from. */ .btn, .btn-primary-custom, .btn-outline-custom, .nav-link, .navbar, .glass-card, .feature-card, .pricing-card, .language-select, .social-links a, .footer-links a, [class*="-card"], [class*="-pill"] { transition-property: color, background-color, background, border-color, box-shadow, transform, opacity, filter, backdrop-filter; } /* ================================================================================ 4 SKIP LINK -------------------------------------------------------------------------------- The shell renders 8–15 primary nav links plus an account menu on every route. Without a skip target a keyboard or switch user re-traverses all of them on every single navigation. Paired with the `
` landmark and the anchor added to app.rs. It is positioned rather than display:none so it stays in the tab order, and it is styled as a real control rather than a browser-default link — it is the first thing a keyboard user ever sees of this product. ================================================================================ */ .eq-skip-link { position: fixed; top: var(--eq-space-2); left: var(--eq-space-2); z-index: 2000; padding: 0.7rem 1.1rem; border-radius: 12px; border: 1px solid var(--eq-edge-accent); background: #071018; color: #d9f7e9; font-size: var(--eq-text-md); font-weight: 600; letter-spacing: 0.01em; text-decoration: none; box-shadow: var(--eq-elev-3); /* Off-screen but focusable, and never a source of horizontal overflow. */ transform: translateY(calc(-100% - var(--eq-space-4))); transition: transform var(--eq-dur-fast) var(--eq-ease-out); } .eq-skip-link:focus, .eq-skip-link:focus-visible { transform: translateY(0); } /* The routed region receives focus after a skip, but should not draw a ring when it is merely being scrolled into view. */ #eq-main:focus { outline: none; } /* ================================================================================ 5 BROWSER SURFACES -------------------------------------------------------------------------------- The parts of the page nobody draws still belong to the design. Selection and scrollbars were already themed; the caret, list markers, underline placement and the mobile tap highlight were still browser defaults. ================================================================================ */ :root { caret-color: var(--eq-accent); } input, textarea, [contenteditable] { caret-color: var(--eq-accent); } /* iOS/Android paint a translucent grey block on tap. It reads as a rendering glitch against a dark ground; the designed :active states replace it. */ a, button, [role="button"], .btn, summary { -webkit-tap-highlight-color: transparent; } /* Underlines that clear the descenders instead of cutting through them. */ a:not(.btn):not(.nav-link):not(.navbar-brand) { text-underline-offset: 0.18em; text-decoration-thickness: from-font; } /* Prose lists get the accent on the marker — a one-token detail that ties body copy back to the palette. */ .blog-content li::marker, .eq-blog-article li::marker, .legal-content li::marker, .eq-prose li::marker { color: var(--eq-accent); } /* Firefox misses the -webkit-scrollbar rules landing.css ships. */ * { scrollbar-color: rgba(255, 255, 255, 0.16) transparent; scrollbar-width: thin; } /* ================================================================================ 6 NUMERALS -------------------------------------------------------------------------------- Prices, position sizes, P&L and timestamps sit in columns. In proportional figures the digits have different widths, so the columns shimmer as values tick and the decimal points do not line up — in a trading interface that reads as imprecision. Tabular figures fix the column; slashed zero disambiguates 0 from O in order and transaction ids. ================================================================================ */ table td, table th, .console-table td, .console-table th, .metric-value, .stat-value, .eq-metric, .eq-num, [class*="-pnl"], [class*="-price"], [class*="-balance"], [class*="-amount"], time, code, kbd, pre { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } code, kbd, pre, samp { font-variant-numeric: tabular-nums slashed-zero; } /* ================================================================================ 7 LEGIBILITY FLOOR -------------------------------------------------------------------------------- 33 declarations shipped between 0.52rem and 0.63rem — 8.3px to 10.1px. That is below the size at which the shipped face stays readable on a dark ground, and several of them carry letter-spacing on top, which thins the strokes further. Page code sets these through the `style` attribute, so an attribute-match with !important is the only lever short of editing 62k lines of Rust. The codebase already established this technique in responsive.css. The floor is 11px, and it deliberately stops at 0.63rem: the 0.64–0.68rem band is 79 declarations of working micro-label and lifting it would reflow dense layouts for a much smaller legibility gain. ================================================================================ */ [style*="font-size: 0.5"], [style*="font-size:0.5"], [style*="font-size: 0.60"], [style*="font-size:0.60"], [style*="font-size: 0.61"], [style*="font-size:0.61"], [style*="font-size: 0.62"], [style*="font-size:0.62"], [style*="font-size: 0.63"], [style*="font-size:0.63"], [style*="font-size: 0.6rem"], [style*="font-size:0.6rem"] { font-size: var(--eq-text-2xs) !important; } /* Rendering the six public pages at both viewports surfaced exactly one class below the floor that carries real copy rather than a chart tick: the "24h" window badge on the market-mover cards, at 0.64rem. Lifted here rather than by widening the band above, because the band above is where the working micro-labels live and this is the only member of it the render objected to. SVG chart ticks are deliberately left alone. They sit at 10px, but they scale with their viewBox rather than with the root font size, and axis labels at that size are the convention the reader expects in a price chart. */ .market-mover-window { font-size: var(--eq-text-2xs); } /* ================================================================================ 8 POINTER TARGETS -------------------------------------------------------------------------------- Applies only to coarse pointers, so the dense desktop terminal keeps its compact rows. Padding stays as authored; the minimum is reached with the target box, so nothing reflows. ================================================================================ */ @media (pointer: coarse) { button, .btn, [role="button"], .nav-link, .navbar-toggler, a.eq-tap, input[type="checkbox"], input[type="radio"], select { min-height: 44px; } input[type="checkbox"], input[type="radio"] { min-width: 44px; } /* Icon-only controls need the width too, and a grid centre keeps the glyph optically centred inside the enlarged box. */ .btn-icon, .navbar-toggler, .notification-bell button { min-width: 44px; display: inline-grid; place-items: center; } /* Adjacent targets need separation or the 44px boxes overlap and the wrong one receives the tap. */ .nav-actions > * + *, .btn-group > * + * { margin-left: var(--eq-space-1); } } /* ================================================================================ 9 EDGES AND DEPTH -------------------------------------------------------------------------------- --glass-border is rgba(211, 223, 236, 0.1), which composites to #1a1e23 on the page ground: 1.20:1. Card edges were present in the stylesheet and absent on screen, which is why panels read as floating gradients rather than as objects. Raising the token itself would change every consumer at once. These rules raise it where it carries meaning — the boundary of a surface — and leave the quiet internal hairlines alone. ================================================================================ */ .glass-card, .eq-panel, .feature-card, .pricing-card, .freebies-card, .market-mover-card, .affiliate-commission-card, .console-table, .dashboard-page .card, .card { border-color: var(--eq-edge-strong); } /* The hover state moves the edge toward the accent rather than lighting up a halo, so the boundary stays the thing that reads. */ .glass-card:hover, .eq-panel:hover, .feature-card:hover, .pricing-card:hover { border-color: var(--eq-edge-accent); } /* Table rules: strong enough to guide the eye across a wide row, quiet enough not to become a grid. */ table th, table td, .console-table th, .console-table td { border-color: var(--eq-edge); } /* Sticky headers on long data tables — the terminal surfaces run to hundreds of rows and the column meaning was lost on scroll. */ .console-table thead th, .dashboard-page table thead th { position: sticky; top: 0; z-index: 2; background: #0a1119; box-shadow: inset 0 -1px 0 var(--eq-edge-strong); } /* ================================================================================ 10 ICON CORRECTIONS -------------------------------------------------------------------------------- The project ships Font Awesome 4.7 with a shim mapping FA5/FA6 class names onto 4.7 glyphs. Most mappings are close enough. Three are not: `.fa-robot` rendered a pile of cogs, `.fa-discord` rendered a speech-bubble pair, and `.fa-wave-square` rendered a filled area chart. Those are different pictures, not approximations — a "Discord" link showing a chat bubble is wrong. Rather than pull ~1MB of FA6 webfonts for three glyphs, each is drawn here as an inline SVG mask. Masks keep `currentColor`, so the icons inherit color, size and every existing hover state exactly like the font glyphs they replace. ================================================================================ */ .fa-robot::before, .fa-discord::before, .fa-wave-square::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* Solid, to sit alongside the FA 4.7 solid glyphs it shares a row with. */ .fa-robot::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.1a1.65 1.65 0 110 3.3 1.65 1.65 0 010-3.3zM11.15 4.3h1.7v1.5h-1.7zM6.9 5.8h10.2a3.9 3.9 0 013.9 3.9v5.4a3.9 3.9 0 01-3.9 3.9H6.9A3.9 3.9 0 013 15.1V9.7a3.9 3.9 0 013.9-3.9zM1 10.5h1.6v3.8H1zM21.4 10.5H23v3.8h-1.6zM8.9 10.5a1.7 1.7 0 100 3.4 1.7 1.7 0 000-3.4zM15.1 10.5a1.7 1.7 0 100 3.4 1.7 1.7 0 000-3.4zM8.6 15.5h6.8v1.3H8.6zM7.6 20.1h2.2v2.4H7.6zM14.2 20.1h2.2v2.4h-2.2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1.1a1.65 1.65 0 110 3.3 1.65 1.65 0 010-3.3zM11.15 4.3h1.7v1.5h-1.7zM6.9 5.8h10.2a3.9 3.9 0 013.9 3.9v5.4a3.9 3.9 0 01-3.9 3.9H6.9A3.9 3.9 0 013 15.1V9.7a3.9 3.9 0 013.9-3.9zM1 10.5h1.6v3.8H1zM21.4 10.5H23v3.8h-1.6zM8.9 10.5a1.7 1.7 0 100 3.4 1.7 1.7 0 000-3.4zM15.1 10.5a1.7 1.7 0 100 3.4 1.7 1.7 0 000-3.4zM8.6 15.5h6.8v1.3H8.6zM7.6 20.1h2.2v2.4H7.6zM14.2 20.1h2.2v2.4h-2.2z'/%3E%3C/svg%3E"); } /* The real Discord mark. A brand glyph is either accurate or it is wrong, so this is the official path rather than something approximate. */ .fa-discord::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z'/%3E%3C/svg%3E"); } /* A square wave, drawn as a stroke because that is what the shape is. */ .fa-wave-square::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 18.4h5.2V5.6h5.4v12.8h5.4V9.4h4.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.6 18.4h5.2V5.6h5.4v12.8h5.4V9.4h4.8'/%3E%3C/svg%3E"); } /* ================================================================================ 11 FORM CONTROLS -------------------------------------------------------------------------------- Selects and date inputs render with the platform's own light-mode chrome unless told otherwise, which on this ground produces a white dropdown arrow well on a near-black field, and an invisible date picker icon. ================================================================================ */ input, select, textarea, .form-control, .form-input { color-scheme: dark; } /* Placeholders sit at 4.6:1 — readable, and still clearly not a value. */ ::placeholder { color: #7d8b9a; opacity: 1; } /* A field that rejects input should say so before it is submitted. */ input:disabled, select:disabled, textarea:disabled, button:disabled, .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; } /* The native calendar and time pickers ship a dark glyph on a dark field. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.75); cursor: pointer; } /* Checkbox and radio inherit the accent instead of the platform blue. */ input[type="checkbox"], input[type="radio"], progress, input[type="range"] { accent-color: var(--eq-accent); } /* Long-form reading surfaces cap their measure. Above ~75ch the eye loses the line return; the guides and blog posts ran full container width. */ .blog-content p, .eq-blog-article p, .legal-content p, .eq-prose p, .beginner-guide-content p { max-width: var(--eq-measure); } /* ================================================================================ 12 NAVIGATION STATE -------------------------------------------------------------------------------- The header carries 8–15 links and had no current-page indication of any kind: no `.active` styling in any stylesheet, and no `active_class` on any Link. On a product with this many sections, "where am I" was answerable only by reading the URL. No markup change was needed. Dioxus Router's `Link` already emits `aria-current="page"` on the link whose href matches the current URL, so the semantics were shipping correctly the whole time and only the visual half was missing. Styling the attribute directly keeps the two in lockstep — they can never drift, because there is only one source. The treatment is a tinted pill rather than an underline: the links are already pills, and hover already uses a neutral wash, so the accent wash reads as a different state rather than a stronger hover. ================================================================================ */ .navbar .nav-link[aria-current="page"], .nav-link[aria-current="page"] { color: #cbf5e1 !important; background: rgba(63, 207, 155, 0.12); box-shadow: inset 0 0 0 1px var(--eq-edge-accent); } /* Hover on the page you are already on should not read as "go somewhere". */ .navbar .nav-link[aria-current="page"]:hover { background: rgba(63, 207, 155, 0.17); color: #dcfaec !important; } /* In the collapsed mobile menu the pill is the only cue, so it carries a little more weight — there is no row context to compare against. */ @media (max-width: 1199.98px) { .navbar .nav-link[aria-current="page"] { background: rgba(63, 207, 155, 0.14); font-weight: 700; } } /* Secondary navigations — sidebar, tabs, footer — inherit the same signal. */ .footer-links a[aria-current="page"], .profile-tab[aria-current="page"], [role="tab"][aria-selected="true"] { color: #cbf5e1; } /* ================================================================================ 13 ANCHOR TARGETS -------------------------------------------------------------------------------- The header is `position: fixed` and `html` sets `scroll-behavior: smooth`, so following an in-page anchor scrolls the target flush to the viewport top and the fixed bar covers it. Four elements in the codebase set scroll-margin-top individually; every other anchored heading — the legal pages, the guides, the FAQ blocks, the blog's section links — landed underneath the navbar. Declared once here against the same variable the navbar reads, so a visible announcement strip pushes the anchor offset down with it. ================================================================================ */ :root { --eq-header-h: 5.5rem; } :target, [id]:is(h1, h2, h3, h4, h5, h6), [id].eq-anchor, section[id], article[id] { scroll-margin-top: calc(var(--eq-header-h) + var(--eq-banner-h, 0px)); } /* Landing on an anchor should confirm the arrival. It fades out on its own, so the highlight never becomes permanent decoration. */ @media (prefers-reduced-motion: no-preference) { :target { animation: eq-target-arrive 1.6s var(--eq-ease-out) 1; } @keyframes eq-target-arrive { from { background-color: rgba(63, 207, 155, 0.14); } to { background-color: transparent; } } } /* ================================================================================ 14 HEADINGS -------------------------------------------------------------------------------- `text-wrap: balance` appeared on three selectors. Everywhere else a two-line heading could leave a single orphaned word on line two, which is the most visible typographic tell on a marketing page. Balance is capped by browsers at a handful of lines, so it is safe to apply broadly; body copy uses `pretty` instead, which only prevents orphans and does not re-flow the paragraph. ================================================================================ */ h1, h2, h3, h4, .hero-title, .section-title, .eq-title { text-wrap: balance; letter-spacing: var(--eq-tracking-heading); } h1, .hero-title { letter-spacing: var(--eq-tracking-display); line-height: var(--eq-leading-display); } p, li { text-wrap: pretty; } /* Uppercase micro-labels are unreadable at their size without tracking. Several ship it; this is the floor for the ones that do not. */ .eq-kicker, .eq-label, .stat-label, .metric-label, [class*="__label"] { letter-spacing: var(--eq-tracking-label); } /* ================================================================================ 15 SELECTION -------------------------------------------------------------------------------- The global selection wash is mint on dark, which inverts badly over the mint fills: mint-on-mint leaves the selected text with no highlight at all. On those surfaces the selection flips to the dark ink instead. ================================================================================ */ .btn-primary-custom ::selection, .eq-panel--accent ::selection, [class*="--accent"] ::selection { background: rgba(4, 18, 12, 0.55); color: #ffffff; } /* ================================================================================ 16 CONTENT-DRIVEN OVERFLOW -------------------------------------------------------------------------------- Wallet addresses, transaction hashes, API keys and strategy ids are long unbroken strings. In a fixed-width cell they push the table wider than the viewport rather than wrapping, which is what produced the horizontal page scroll the responsive sheet works around with `display: block` on tables. Breaking them at the source removes the cause. ================================================================================ */ .eq-hash, .eq-address, [class*="-address"], [class*="-hash"], [class*="-txid"], code { overflow-wrap: anywhere; word-break: break-word; } /* Truncation needs a title or a copy control to stay recoverable; where a cell opts into it, make the affordance explicit. */ .eq-truncate { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ================================================================================ 17 INLINE CODE -------------------------------------------------------------------------------- bootstrap.css:509 sets `code { color: #e83e8c }` — Bootstrap 4's magenta. It is the color of every unstyled `` on the site, and this product's ground is dark with a mint accent, so the API paths on the business page, the endpoint names in the guides and the inline identifiers in the research posts all rendered hot pink. It also lands at 4.0:1 on this ground, under the AA floor for body text. Code is a different voice, not a different palette: it takes the accent ink the rest of the system reserves for it, on a recessed ground so the span still reads as set apart from the prose around it. ================================================================================ */ :not(pre) > code { color: var(--eq-accent-ink, #cbf5e1); background: rgba(255, 255, 255, 0.055); border: 1px solid var(--eq-edge); border-radius: 5px; padding: 0.1em 0.36em; font-size: 0.9em; } /* A container that already draws a frame around code does not want a second one inside it. These are the code blocks the pages build themselves; the rule above is for bare inline spans in prose. */ pre code, .biz-code code, .arb-code code, .bjg-code code, .bot-form-code code, .affiliate-link-preview code, [class$="-code"] > code { color: var(--eq-accent-ink, #cbf5e1); background: none; border: 0; padding: 0; font-size: inherit; } /* ================================================================================ 18 FORCED COLORS -------------------------------------------------------------------------------- Windows High Contrast and the forced-colors modes replace every author color with a small system palette. Backgrounds, box-shadows and background-images are dropped wholesale — which is most of how this product draws structure. Panels lose their fill, hairline borders composited from rgba lose their contrast, and the focus ring from Section 3 loses the mint that made it read. Everything below re-states, in system colors, only the things that carry meaning: the boundary of a surface, the focus indicator, the state of a control, and the accent on a call to action. Decoration is allowed to fall away, which is the point of the mode. ================================================================================ */ @media (forced-colors: active) { /* Boundaries have to be re-declared: a border whose color came from an rgba token is forced to the window background in this mode and disappears. */ .glass-card, .eq-panel, .feature-card, .pricing-card, .card, .biz-card, .biz-cap-card, .biz-compare-table, .eq-blog-post-card, .eq-blog-cover, .eq-blog-newsletter, input, select, textarea, .form-control { border: 1px solid CanvasText; } /* The ring must survive; `Highlight` is the one color the mode guarantees reads against both Canvas and CanvasText. */ :where(a, button, input, select, textarea, summary, [tabindex], [role="button"]):focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px !important; } /* Filled buttons keep their figure/ground relationship rather than becoming indistinguishable from the outline variants. */ .btn-primary-custom, .btn-primary { background: Highlight; color: HighlightText; border: 1px solid HighlightText; } /* The current page marker was a tinted wash, which is dropped. */ .nav-link[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; } /* Purely atmospheric layers: no information, and in this mode they can only add noise on top of the system ground. */ .gradient-bg::before, .biz-hero-bg, .eq-blog-shell::before, .eq-blog-cover--drawn::before { display: none; } /* The generated covers are line work on a transparent ground, so they need a forced color or they vanish with the fill. */ .eq-blog-cover-line, .eq-blog-cover-fit, .eq-blog-cover-rule { stroke: CanvasText; } .eq-blog-cover-bar, .eq-blog-cover-cell, .eq-blog-cover-area, .eq-blog-cover-mark { fill: CanvasText; } /* Disabled must stay distinguishable: opacity is not honored as a state cue in this mode. */ :disabled, .disabled { color: GrayText; border-color: GrayText; } } /* ================================================================================ 19 PRINT -------------------------------------------------------------------------------- Nothing in this project styled the printed page, so every route printed the dark ground: the research articles, the legal pages, the beginner and broker guides, the fund statements and the billing history. Bootstrap's own print block is the only thing that ran, and it does not know about any of this. People print exactly the pages the product most wants taken seriously — a research note to read away from the screen, terms to file, a statement to hand to an accountant. This sheet gives them a document: ink on paper, the navigation and the sales furniture removed, and every link's destination printed after it, because a URL that only exists as a hover is lost the moment the page leaves the browser. ================================================================================ */ @media print { /* Ink on paper. `print-color-adjust: economy` lets the browser drop the remaining fills rather than flooding a page with toner. */ html, body, .app-root, .gradient-bg, .biz-landing, .eq-blog-shell { background: #ffffff !important; color: #101418 !important; print-color-adjust: economy; -webkit-print-color-adjust: economy; } /* Every author background is dropped, so the light text that sat on them has to come back to ink or the page prints blank. */ *, *::before, *::after { background-image: none !important; box-shadow: none !important; text-shadow: none !important; color: #101418 !important; } /* Surfaces keep their boundary as a hairline rule — the structure is still information — but lose the fill. */ .glass-card, .eq-panel, .feature-card, .pricing-card, .card, .biz-card, .biz-cap-card, .eq-blog-post-card, .eq-blog-newsletter { background: none !important; border: 1px solid #c3ccd4 !important; } /* Product chrome, page furniture and anything asking for a click. None of it survives the transition to paper, and all of it costs a page. */ .navbar, .eq-skip-link, .footer, .eq-site-banner, #eq-cookie-banner, .upsell-overlay, .upsell-modal, .notification-bell, .language-switch, .nav-actions, .biz-cta, .eq-blog-newsletter, .eq-blog-related, .agent-chat-widget, [class*="-widget"], .btn, button { display: none !important; } /* The fixed header reserves 5.5rem at the top of every page; on paper that is 5.5rem of nothing on every sheet. */ main, #eq-main, .biz-hero, .eq-blog-shell, .blog-content { padding-top: 0 !important; margin-top: 0 !important; } /* A link's destination has to be on the paper. Anchors and javascript hrefs are skipped — printing "#" after a word is noise. */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; color: #4a5560 !important; } a { text-decoration: underline; } /* Serif for the running text: at print resolution it is what the eye reads fastest, and the screen faces were chosen for a backlit dark ground. */ .blog-content, .eq-blog-article, .legal-content, .beginner-guide-content { font-family: Georgia, "Times New Roman", serif; font-size: 11pt; line-height: 1.5; max-width: none; } /* A heading at the foot of a sheet with its section overleaf, or a two-line paragraph split across the fold, are the two things that make a printout read as a screenshot rather than as a document. */ h1, h2, h3, h4, h5, h6 { break-after: avoid-page; page-break-after: avoid; color: #05090d !important; } p, li, blockquote, figure, tr, img, pre { break-inside: avoid-page; page-break-inside: avoid; orphans: 3; widows: 3; } table { border-collapse: collapse; } th, td { border: 1px solid #c3ccd4 !important; } /* Content the reader opened on screen should be on the paper too: a printed FAQ with every answer collapsed is a printed list of questions. */ details { display: block !important; } details > *:not(summary) { display: revert !important; } @page { margin: 18mm 16mm; } } /* ================================================================================ 20 SECTION GROUNDS AND CHAPTER MARKERS The page had one ground. Every band varied it by two or three percent of white — measured, `--tape` and `--quiet` differed by about 1.5 L*, which is under the threshold where a boundary reads as a boundary at all. So the landing page scrolled as one continuous dark surface with headings floating on it, and the only thing telling you a new chapter had started was the spacing. That is the specific quality that makes a page look machine-made: not the colours, the absence of decisions about them. This gives the bands a real tonal ladder and two genuine hue breaks. The page opens at its darkest, steps up as it argues, turns violet where it asks for money and teal where it asks for the click, and drops back to base for the epilogue. Each band also gets a chapter rule — one hairline in its own accent across the top edge — so the seam between two sections is a line you can see rather than a gradient you cannot. These rules sit here rather than in landing.css because they are corrections to that file's grounds, and this is the layer that is allowed to make them. ================================================================================ */ :root { /* The ladder. Steps are ~3-4 L* apart, which is the smallest difference that still reads as a step on a dark screen at typical brightness. */ --eq-ground-sunk: #03060b; --eq-ground-base: #05080d; --eq-ground-rise-1: #090f18; --eq-ground-rise-2: #0d1524; /* The two hue breaks. Both are held to roughly the same lightness as the ladder steps they sit between, so they read as a change of colour and not as a change of level. */ --eq-ground-violet: #15111f; --eq-ground-teal: #06171a; /* Chapter accents. One per band, used only for the top rule. */ --eq-chapter-neutral: rgba(211, 223, 236, 0.16); --eq-chapter-mint: rgba(63, 207, 155, 0.42); --eq-chapter-blue: rgba(106, 166, 255, 0.38); --eq-chapter-violet: rgba(167, 139, 250, 0.40); --eq-chapter-gold: rgba(208, 176, 106, 0.44); } /* The chapter rule. `.eq-band--tape` and `--plate` already declared a `border-top` of their own at the same specificity; this file loads after landing.css, so these win, and the variants below only have to name a colour. */ .eq-band { border-top: 1px solid var(--eq-chapter, var(--eq-chapter-neutral)); } .eq-band--tape { --eq-chapter: var(--eq-chapter-neutral); background: linear-gradient(180deg, var(--eq-ground-sunk), #05090f); } .eq-band--engine { --eq-chapter: var(--eq-chapter-mint); background: linear-gradient(180deg, var(--eq-ground-rise-1), #070d16); } .eq-band--rail { --eq-chapter: var(--eq-chapter-blue); background: var(--eq-ground-sunk); } .eq-band--mesh { --eq-chapter: var(--eq-chapter-mint); background: linear-gradient(180deg, var(--eq-ground-rise-2), #0a1120); } .eq-band--vault { --eq-chapter: var(--eq-chapter-blue); background: linear-gradient(180deg, #0a1018, #070c14); } /* Pricing. The commercial section is the one place on the page where a different hue is doing work rather than decorating: it marks the moment the page stops explaining and starts selling. It is also the tallest section on the page — nearly 2000px — and a single linear gradient across that distance resolves to one flat muddy field, which is what it was. It is now lit like a stage: a violet key over the heading, a gold counter-light on the opposite side because this is the section about money, a raised plateau under the plans themselves, and a fall-off to near black at the foot so the section has a floor. Four cheap layers, no pattern, and the depth comes from the light rather than from a texture. */ .eq-band--plate { --eq-chapter: var(--eq-chapter-gold); background: radial-gradient(120% 38% at 16% 0%, rgba(167, 139, 250, 0.22), transparent 72%), radial-gradient(78% 30% at 94% 4%, rgba(208, 176, 106, 0.14), transparent 74%), radial-gradient(130% 44% at 50% 44%, rgba(124, 92, 255, 0.10), transparent 78%), linear-gradient(180deg, #17131f 0%, #120f1b 34%, #0a0812 72%, #05040b 100%); } /* The dot field that used to sit on top of the slab is gone. A tiled dot or line grid over a marketing surface is the same generated-UI signature the hero lattice was, and here it was also fighting the pricing table's own rules. What replaces it is a single broad beam from above — a spotlight on the plans, which is the one thing this section wants you looking at. */ .eq-band--plate::before { border-radius: inherit; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012) 30%, transparent 62%); background-size: auto; -webkit-mask-image: radial-gradient(ellipse 82% 62% at 50% -6%, #000, transparent 74%); mask-image: radial-gradient(ellipse 82% 62% at 50% -6%, #000, transparent 74%); opacity: 1; } /* The closing call to action, lit from below in the brand mint so the eye is pulled down into the button. */ .eq-band--glow { --eq-chapter: var(--eq-chapter-mint); background: linear-gradient(180deg, #05080d 0%, var(--eq-ground-teal) 100%); } .eq-band--quiet { --eq-chapter: var(--eq-chapter-neutral); background: var(--eq-ground-base); } /* The business page runs its own band class. It had the same problem — a 1.6% white wash over the page ground — and gets the same treatment. */ .biz-band { border-top: 1px solid var(--eq-chapter-mint); border-bottom: 1px solid var(--eq-chapter-neutral); background: linear-gradient(180deg, var(--eq-ground-rise-1), #070c14); } .biz-band.biz-funds { border-top-color: var(--eq-chapter-violet); background: linear-gradient(180deg, var(--eq-ground-violet), #0a0913); } .biz-pricing { background: linear-gradient(180deg, #05080d, #080e17); } .biz-cta { border-top: 1px solid var(--eq-chapter-mint); background: linear-gradient(180deg, #05080d 0%, var(--eq-ground-teal) 100%); } /* Bands sit flush against each other, so a rounded top on the pricing slab leaves two dark triangles against the band above it. The slab reads as its own surface from the tone change alone now. */ .eq-band--plate { margin-top: 0; border-radius: 0; } @media (prefers-reduced-motion: no-preference) { /* Nothing animated here — the grounds are static by design. The block exists so a future author does not add a drifting gradient to a chapter marker. */ } /* -- Chapter markers ------------------------------------------------------- Every section header on the landing page was centred: a numbered kicker with a symmetric rule on each side, a centred display heading, a centred lede. It is a competent arrangement and it is also the single most recognisable shape a generated marketing page has, because centring is what you reach for when you have not decided where the reader's eye should start. Left-aligning them gives the page a consistent left edge to read down — the same edge the container, the grids and the cards already sit on — and turns the numbered kicker into a masthead rather than an ornament. The leading rule goes with it: a rule on the left of a left-aligned line is pointing at nothing. The closing call to action is deliberately exempt. It is one short line and two buttons with nothing to scan, and centring is the right answer there. */ .eq-section__header { margin-left: 0; margin-right: 0; text-align: left; } .eq-section__header .eq-lede, .eq-section .eq-section__header .eq-lede { margin-left: 0; margin-right: 0; } .eq-index { justify-content: flex-start; } .eq-index .eq-index__rule:first-child { display: none; } /* The trailing rule now runs from the label out towards the margin, so it reads as a masthead rule rather than as one half of a pair of brackets. */ .eq-index .eq-index__rule:last-child { flex: 1; max-width: 12rem; } /* The CTA keeps its centre. */ .cta-section .eq-index, .eq-cta .eq-index { justify-content: center; } .cta-section .eq-section__header, .eq-cta { text-align: center; }