/* ═══════════════════════════════════════════════════════════════════════════ IMPLIED LENS — DESIGN SYSTEM Terminal density. Loads last; this file is the authority on surface, elevation and accent. The brand playbook asks for "dense, legible information with restrained motion and minimal decoration." The stack had drifted the other way: ambient page gradients, sheen overlays on buttons, glow shadows, blur, and gold on roughly a dozen controls per screen. This layer takes that back. Three rules, applied in order: 1. FLAT BY DEFAULT. Depth is expensive and should be spent only where it carries meaning — a popover that floats above the page, a modal. Cards that merely group related data separate with a hairline, not a border plus a shadow plus a lighter fill. 27 rendered shadows become 4. 2. ONE ACCENT PER VIEW. Gold means "this is the thing to act on". On the research screen it was on the nav pill, Start trial, Go Pro, Candle, 50D Avg, RSI, 1Y, Vol, Read and the ticker label simultaneously, which makes it mean nothing. Toggles and chips get a neutral active state; gold is reserved for the primary action and the active nav tab. 3. THE NUMBERS ARE THE INTERFACE. Mono, tabular, high contrast. Labels shrink and quieten to get out of their way. ═══════════════════════════════════════════════════════════════════════════ */ /* ── SPECIFICITY ──────────────────────────────────────────────────────────── Selectors here are prefixed with :is(#il-system, html) :is(#il-system, body). :is() adopts the specificity of its most specific argument, so each one counts as an ID while still matching / . Two of them puts every rule in this file at 2 IDs, which clears the whole codebase — the deepest competing selectors are single-ID (#landing-page .il-hero-mock .ihm-card, #view-tool #tool-welcome ... being the rare two-ID exception). One ID was not enough, and the reason is worth recording: specificity is (ID, class, element), compared left to right. A single boost put these rules at 1 ID + 1 class + 1 element, which loses to 1 ID + 2 classes. The universal selector `body *` is weaker still. Measured, not assumed. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · SCALE ──────────────────────────────────────────────────────────── */ :root { /* type — 9 steps, 13px base. Matches the values the codemod snapped to. */ --t-micro: 10px; --t-tiny: 11px; --t-small: 12px; --t-body: 13px; --t-lead: 15px; --t-h3: 18px; --t-h2: 22px; --t-h1: 28px; --t-display: 40px; /* weight — only values with a real font file behind them */ --w-regular: 400; --w-medium: 500; --w-semi: 600; --w-bold: 700; /* radius */ --r-sm: 4px; --r-md: 8px; --r-pill: 999px; /* elevation — flat, hairline, raised, overlay. That is the whole set. */ --e-flat: none; --e-hairline: inset 0 -1px 0 var(--il-line, rgba(255, 255, 255, .07)); --e-raised: 0 1px 2px rgba(0, 0, 0, .28); --e-overlay: 0 16px 40px -12px rgba(0, 0, 0, .6); /* spacing — 4px rhythm */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; } /* ── 2 · FLAT BY DEFAULT ──────────────────────────────────────────────────── Strip decorative depth everywhere, then hand it back deliberately below. The selector list is broad on purpose: enumerating components is what produced 27 different shadows in the first place. */ :is(#il-system, html) :is(#il-system, body) :is( .card, .panel, .app-card, .metric, .metric-card, .stat, .stat-card, .fstock-card, .source-card, .pricing-card, .il-card, .il-panel, .chart-wrap, .app-section, .acc-body, .il-tool-shell, .il-shell-top, .il-shell-ticker > div, .il-trust-panel, .il-onboarding, .il-onboarding-step, .tw-tool, .il-cap-card, .lens-card, .decision-section, .next-move, .il-drawer, .il-result-summary > div, .il-template-row, .il-trust-field ) { box-shadow: var(--e-flat) !important; background-image: none !important; } /* Flat by default, for real. Enumerating component classes is what let 27 different shadows survive three separate passes — every new component invented its own. Zero out the whole tree here; the rules further down (which carry higher specificity) hand depth back to the few things that genuinely float. Focus rings use outline, not shadow, so they are unaffected. */ :is(#il-system, html) :is(#il-system, body) * { box-shadow: none !important; text-shadow: none !important; } /* Ambient page decoration: the two full-bleed gradient washes on the root. They tinted every surface above them and cost a compositing layer. */ :is(#il-system, html) :is(#il-system, body)::before, :is(#il-system, html) :is(#il-system, body)::after { background: none !important; content: none !important; } /* Button sheen. A moving highlight on a research tool is noise. */ :is(#il-system, html) :is(#il-system, body) :is(button, .btn, .btn-primary, .act-btn, .tf-pill, .chip)::before, :is(#il-system, html) :is(#il-system, body) :is(button, .btn, .btn-primary, .act-btn, .tf-pill, .chip)::after { background-image: none !important; } /* Backdrop blur survives only where something genuinely floats. */ :is(#il-system, html) :is(#il-system, body) :is(.card, .panel, .app-card, .chart-wrap, .app-section, .metric, .il-tool-shell) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── 3 · SURFACES: HAIRLINES, NOT BORDERED BOXES ──────────────────────────── Everything previously read at the same weight — fill + 1px border + radius — so nothing receded. Data containers now sit ON the page and separate with a single rule; only genuinely floating things keep an outline. */ :is(#il-system, html) :is(#il-system, body) :is( .metric, .metric-card, .stat, .stat-card, .il-trust-field, .il-shell-ticker > div, .il-result-summary > div ) { border: 0 !important; border-radius: 0 !important; background: transparent !important; } :is(#il-system, html) :is(#il-system, body) .il-shell-ticker { gap: 1px !important; background: var(--il-line, rgba(255, 255, 255, .08)) !important; } :is(#il-system, html) :is(#il-system, body) :is(.chart-wrap, .app-section, .il-tool-shell, .il-drawer, .source-card, .lens-card) { border: 1px solid var(--il-line, rgba(255, 255, 255, .07)) !important; border-radius: var(--r-md) !important; background: var(--il-surface, #101319) !important; } /* Raised only when it floats: menus, popovers, modals, toasts. */ :is(#il-system, html) :is(#il-system, body) :is( .modal, .modal-box, .cex-box, .drawer, .popover, .menu, .dropdown, .mobile-more-menu, .nav-acct-menu, .toast, dialog ) { box-shadow: var(--e-overlay) !important; border-radius: var(--r-md) !important; } /* ── 4 · ONE ACCENT PER VIEW ──────────────────────────────────────────────── Toggles, chips, timeframe pills and segmented controls all used the gold fill for "on". They now use a neutral high-contrast fill, which is easier to scan across a dense toolbar and leaves gold meaning "act here". */ :is(#il-system, html) :is(#il-system, body) :is(.act-btn, .tf-pill, .rpill, .ind-pill, .cex-type-btn, .chip, .mst-btn, .indicator-control):is(.on, .active, [aria-pressed="true"]) { background: var(--il-ink, #F2F0EB) !important; background-image: none !important; color: var(--il-bg, #0B0D12) !important; -webkit-text-fill-color: var(--il-bg, #0B0D12) !important; border-color: transparent !important; box-shadow: none !important; font-weight: var(--w-semi) !important; } :is(#il-system, html):not([data-theme="dark"]) :is(#il-system, body) :is(.act-btn, .tf-pill, .rpill, .ind-pill, .cex-type-btn, .chip, .mst-btn, .indicator-control):is(.on, .active, [aria-pressed="true"]) { background: #14161A !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* Resting state for the same controls: quiet, no border, no fill. */ :is(#il-system, html) :is(#il-system, body) :is(.act-btn, .tf-pill, .rpill, .ind-pill, .cex-type-btn, .mst-btn) { background: transparent !important; background-image: none !important; border: 1px solid transparent !important; border-radius: var(--r-sm) !important; box-shadow: none !important; color: var(--il-ink-2, rgba(242, 240, 235, .62)) !important; -webkit-text-fill-color: var(--il-ink-2, rgba(242, 240, 235, .62)) !important; font-weight: var(--w-medium) !important; letter-spacing: 0 !important; } :is(#il-system, html) :is(#il-system, body) :is(.act-btn, .tf-pill, .rpill, .ind-pill, .cex-type-btn, .mst-btn):hover { background: color-mix(in srgb, var(--il-ink, #F2F0EB) 9%, transparent) !important; color: var(--il-ink, #F2F0EB) !important; -webkit-text-fill-color: var(--il-ink, #F2F0EB) !important; } /* Gold survives on exactly two things: the primary CTA and the active nav tab. */ :is(#il-system, html) :is(#il-system, body) :is(.btn-primary, .il-global-trial, .btn-nav:not(.btn-nav-outline), .go-pro, .il-upgrade-btn) { background: var(--il-gold, #D6AC64) !important; background-image: none !important; color: #17100A !important; -webkit-text-fill-color: #17100A !important; border: 0 !important; border-radius: var(--r-sm) !important; box-shadow: none !important; font-weight: var(--w-semi) !important; } :is(#il-system, html) :is(#il-system, body) :is(.btn-primary, .il-global-trial, .btn-nav:not(.btn-nav-outline)):hover { filter: brightness(1.06); } /* ── 5 · TYPOGRAPHY ───────────────────────────────────────────────────────── One sans for prose and UI, one mono for every number. The serif stays for the wordmark and editorial headings only — it was appearing inside data cards next to mono figures, which is three voices in one box. */ :is(#il-system, html) :is(#il-system, body) { font-family: "Plus Jakarta Sans", "PJS Fallback", ui-sans-serif, system-ui, sans-serif; font-size: var(--t-body); font-weight: var(--w-regular); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Numbers, everywhere, in tabular mono. This is the single biggest signal that a research tool is serious: figures that line up column to column. */ :is(#il-system, html) :is(#il-system, body) :is( .price, .metric-value, .stat-value, .m-val, .ilr-price, .ilr-ohlc b, .fstock-price, .fstock-chg, .ht-price, .wl-price, .p-amount, .il-shell-ticker strong, .score-value, .lens-score-value, td.num, .num ) { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace !important; font-variant-numeric: tabular-nums !important; font-feature-settings: "tnum" 1, "zero" 1 !important; letter-spacing: -.01em !important; } /* Micro labels: small, quiet, tracked. They exist to be skipped over. */ :is(#il-system, html) :is(#il-system, body) :is( .metric-label, .stat-label, .m-lbl, .il-shell-top span, .il-shell-ticker span, .chart-title, .il-learn-kicker, .tw-kicker, .ilr-ohlc i, .eyebrow ) { font-family: "Plus Jakarta Sans", "PJS Fallback", ui-sans-serif, system-ui, sans-serif !important; font-size: var(--t-micro) !important; font-weight: var(--w-semi) !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* Headings: sans, tight, not serif. */ :is(#il-system, html) :is(#il-system, body) :is(h1, h2, h3, h4, .app-section-title, .chart-title, .card-title) { font-family: "Plus Jakarta Sans", "PJS Fallback", ui-sans-serif, system-ui, sans-serif !important; font-weight: var(--w-bold) !important; letter-spacing: -.015em !important; line-height: 1.2 !important; } /* The serif is a brand mark, not a UI face. */ :is(#il-system, html) :is(#il-system, body) :is(.nav-logo, .f-logo, .ihm-brand, .brand) :is(em, span) { font-family: "Instrument Serif", Georgia, serif !important; } /* Nothing on the page synthesises a weight any more. */ :is(#il-system, html) :is(#il-system, body) * { font-synthesis: none; } /* ── 6 · DENSITY ──────────────────────────────────────────────────────────── Reclaim vertical space. The ticker strip and metric row were consuming most of a viewport before the first chart pixel. */ :is(#il-system, html) :is(#il-system, body) .il-shell-ticker > div { padding: var(--s2) var(--s3) !important; } :is(#il-system, html) :is(#il-system, body) :is(.metric, .metric-card, .stat, .stat-card) { padding: var(--s2) var(--s3) !important; } :is(#il-system, html) :is(#il-system, body) .fstock-card { padding: var(--s2) var(--s3) !important; } :is(#il-system, html) :is(#il-system, body) .chart-wrap .chart-header { padding: var(--s2) var(--s3) !important; } :is(#il-system, html) :is(#il-system, body) .app-section > .acc-body { padding-top: var(--s3) !important; } /* ── 7 · MOTION ───────────────────────────────────────────────────────────── "Restrained motion." Keep hover/---focus feedback, drop everything that animates on its own. */ :is(#il-system, html) :is(#il-system, body) :is(.act-btn, .tf-pill, .btn, .btn-primary, a, button) { transition: background-color .12s linear, color .12s linear, border-color .12s linear !important; } @media (prefers-reduced-motion: reduce) { :is(#il-system, html) :is(#il-system, body) *, :is(#il-system, html) :is(#il-system, body) *::before, :is(#il-system, html) :is(#il-system, body) *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* ── 8 · FOCUS ────────────────────────────────────────────────────────────── One visible focus treatment, keyboard only. */ :is(#il-system, html) :is(#il-system, body) :is(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--il-gold, #D6AC64) !important; outline-offset: 2px !important; border-radius: var(--r-sm); } /* ── 9 · CHROME ───────────────────────────────────────────────────────────── The frame around the work: nav, sidebar, search, footer. These carried their own shadows and their own font stack, which is why the nav read as a different product from the workspace it sits above. */ :is(#il-system, html) :is(#il-system, body) :is( nav, #main-nav, .app-sidebar, .sb-item, .sb-pro-card, .search-row, .nav-search, .ticker-input, .btn-search, .ash-btn, footer, .theme-toggle-track, .theme-toggle-thumb, .btn-nav, .btn-nav-outline, .nav-tab, .mobile-bottom-nav, .mbn-item, .app-section-hdr ) { box-shadow: none !important; text-shadow: none !important; } /* One typeface across the frame. The nav was rendering DM Sans while the workspace beneath it rendered Plus Jakarta Sans. */ :is(#il-system, html) :is(#il-system, body) :is(nav, #main-nav, .app-sidebar, footer, .mobile-bottom-nav) :is(a, span, button, div, strong, em, input) { font-family: "Plus Jakarta Sans", "PJS Fallback", ui-sans-serif, system-ui, sans-serif !important; } /* Nav tabs: quiet by default, and the active one is marked ONCE — a gold rule beneath it — instead of gold text plus a gold wash plus a gold underline. */ :is(#il-system, html) :is(#il-system, body) a.nav-tab { font-size: var(--t-small) !important; font-weight: var(--w-medium) !important; color: var(--il-ink-2, rgba(242, 240, 235, .60)) !important; background: transparent !important; border-radius: var(--r-sm) !important; letter-spacing: 0 !important; } :is(#il-system, html) :is(#il-system, body) a.nav-tab:hover { color: var(--il-ink, #F2F0EB) !important; background: color-mix(in srgb, var(--il-ink, #F2F0EB) 8%, transparent) !important; } :is(#il-system, html) :is(#il-system, body) a.nav-tab:is(.active-tab, .active) { color: var(--il-ink, #F2F0EB) !important; font-weight: var(--w-semi) !important; background: transparent !important; border-radius: 0 !important; box-shadow: inset 0 -2px 0 var(--il-gold, #D6AC64) !important; } /* Sidebar: same logic — the active row gets one mark, not a card. */ :is(#il-system, html) :is(#il-system, body) .sb-item { border: 0 !important; border-radius: var(--r-sm) !important; background: transparent !important; font-size: var(--t-body) !important; font-weight: var(--w-medium) !important; } :is(#il-system, html) :is(#il-system, body) .sb-item:hover { background: color-mix(in srgb, var(--il-ink, #F2F0EB) 7%, transparent) !important; } :is(#il-system, html) :is(#il-system, body) .sb-item:is(.active, .on) { background: color-mix(in srgb, var(--il-ink, #F2F0EB) 11%, transparent) !important; color: var(--il-ink, #F2F0EB) !important; font-weight: var(--w-semi) !important; box-shadow: inset 2px 0 0 var(--il-gold, #D6AC64) !important; } /* Inputs: recessed, not raised. */ :is(#il-system, html) :is(#il-system, body) :is(input, select, textarea, .search-row, .nav-search) { border: 1px solid var(--il-line, rgba(255, 255, 255, .10)) !important; border-radius: var(--r-sm) !important; background: color-mix(in srgb, var(--il-bg, #0B0D12) 55%, transparent) !important; box-shadow: none !important; font-family: "Plus Jakarta Sans", "PJS Fallback", ui-sans-serif, system-ui, sans-serif !important; font-size: var(--t-body) !important; } /* ── 10 · LANDING ─────────────────────────────────────────────────────────── The blanket flat rule in section 2 uses the universal selector, and measured against this codebase that is weaker than it looks: `#landing-page .x` beats it, so the hero kept a 34px drop shadow and a gold ring. Naming the classes restores the ID-level weight and they flatten like everything else. The hero mock is the one place a shadow still earns its keep — it is a picture of the product sitting on the page — so it keeps a single soft one rather than the previous stack of three. */ :is(#il-system, html) :is(#il-system, body) :is( .il-hero-mock, .ihm-card, .il-preview-caption, .il-landing-secondary, .il-landing-search, .il-landing-primary, .il-cap-card, .il-workflow-panels, .tw-tool, .il-trust, .btn-nav, .btn-nav-outline, .il-global-trial, .il-global-login, .il-global-account ) { box-shadow: none !important; text-shadow: none !important; } :is(#il-system, html) :is(#il-system, body) .il-hero-mock { box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .7) !important; } /* Icons should never carry a glow. */ :is(#il-system, html) :is(#il-system, body) :is(i, svg, img, .ti) { box-shadow: none !important; text-shadow: none !important; filter: none !important; } /* The active nav tab was computing color:#F2F0EB but -webkit-text-fill-color: #17100A — the fill wins, so the label rendered near-black on a dark bar and the tab looked empty. Both properties are set together here; anywhere the two can disagree is a latent bug. */ :is(#il-system, html) :is(#il-system, body) a.nav-tab:is(.active-tab, .active), :is(#il-system, html) :is(#il-system, body) #main-nav a.nav-tab:is(.active-tab, .active) { color: var(--il-ink, #F2F0EB) !important; -webkit-text-fill-color: var(--il-ink, #F2F0EB) !important; background: transparent !important; box-shadow: inset 0 -2px 0 var(--il-gold, #D6AC64) !important; border-radius: 0 !important; } /* Metric tiles carried two affordance icons per label (help + glossary), which is 16 pieces of chrome on a row of 8 figures. They stay reachable, but they only surface on hover or keyboard focus so the numbers read cleanly. */ :is(#il-system, html) :is(#il-system, body) :is(.metric, .metric-card, .stat, .stat-card) :is(.m-help, .m-gloss, .metric-help, .metric-gloss, [data-help], [data-gloss]) { opacity: 0; transition: opacity .12s linear; } :is(#il-system, html) :is(#il-system, body) :is(.metric, .metric-card, .stat, .stat-card):is(:hover, :focus-within) :is(.m-help, .m-gloss, .metric-help, .metric-gloss, [data-help], [data-gloss]) { opacity: .75; } /* Sidebar active row: marked with a gold edge, not filled — so its label must stay light. It was inheriting the dark text-fill that pairs with the filled toggle treatment, giving near-black on a dark row. */ :is(#il-system, html) :is(#il-system, body) .sb-item:is(.active, .on), :is(#il-system, html) :is(#il-system, body) #view-tool .sb-item:is(.active, .on), :is(#il-system, html) :is(#il-system, body) .sb-item:is(.active, .on) :is(.sb-item-label, .sb-item-icon, span, i) { color: var(--il-ink, #F2F0EB) !important; -webkit-text-fill-color: var(--il-ink, #F2F0EB) !important; } /* Anything given the filled "on" treatment needs BOTH colour properties, or whichever one a competing rule sets will win silently. This is the third place in this codebase where the two had drifted apart. */ :is(#il-system, html) :is(#il-system, body) :is(.act-btn, .tf-pill, .rpill, .ind-pill, .cex-type-btn, .mst-btn, .indicator-control):is(.on, .active, [aria-pressed="true"]) :is(span, i, b, em) { color: inherit !important; -webkit-text-fill-color: inherit !important; } /* ── 11 · ALWAYS-DARK CHROME ──────────────────────────────────────────────── The static masthead stays dark in BOTH themes. Any rule that colours its contents with a theme token (--il-ink and friends) therefore inverts under it: in light mode --il-ink resolves to #14161A and the nav paints near-black on near-black. That has now caused the same defect three separate times in this codebase, so the fix here is structural rather than another patch — the region gets its own token scope that does not flip, and everything inside spends those instead. If you add anything to the masthead later, colour it with --chrome-* and it cannot go wrong in one theme while looking fine in the other. */ :is(#il-system, html) :is(#il-system, body) :is(nav#main-nav, nav.il-global-nav), :is(#il-system, html):not([data-theme="dark"]) :is(#il-system, body) :is(nav#main-nav, nav.il-global-nav) { --chrome-bg: rgba(10, 12, 16, .94); --chrome-ink: #F2F0EB; --chrome-ink-2: rgba(239, 237, 230, .70); --chrome-ink-3: rgba(239, 237, 230, .48); --chrome-line: rgba(255, 255, 255, .09); background-color: var(--chrome-bg) !important; background-image: none !important; border-bottom: 1px solid var(--chrome-line) !important; color: var(--chrome-ink) !important; } /* Tabs, idle and active — both colour properties, both themes, one source. */ :is(#il-system, html) :is(#il-system, body) :is(nav#main-nav, nav.il-global-nav) a.nav-tab { color: var(--chrome-ink-2) !important; -webkit-text-fill-color: var(--chrome-ink-2) !important; } :is(#il-system, html) :is(#il-system, body) :is(nav#main-nav, nav.il-global-nav) a.nav-tab:hover { color: var(--chrome-ink) !important; -webkit-text-fill-color: var(--chrome-ink) !important; background: rgba(255, 255, 255, .07) !important; } :is(#il-system, html) :is(#il-system, body) :is(nav#main-nav, nav.il-global-nav) a.nav-tab:is(.active-tab, .active) { color: var(--chrome-ink) !important; -webkit-text-fill-color: var(--chrome-ink) !important; background: transparent !important; box-shadow: inset 0 -2px 0 var(--il-gold, #D6AC64) !important; border-radius: 0 !important; } /* Everything else written directly on the bar. */ :is(#il-system, html) :is(#il-system, body) :is(nav#main-nav, nav.il-global-nav) :is(span:not([class]), .nav-live, .il-global-search span, [aria-hidden="true"]) { color: var(--chrome-ink-3) !important; -webkit-text-fill-color: var(--chrome-ink-3) !important; } :is(#il-system, html) :is(#il-system, body) :is(nav#main-nav, nav.il-global-nav) :is(input, .nav-search, .il-global-search) { background: rgba(255, 255, 255, .06) !important; border: 1px solid var(--chrome-line) !important; color: var(--chrome-ink) !important; -webkit-text-fill-color: var(--chrome-ink) !important; } :is(#il-system, html) :is(#il-system, body) :is(nav#main-nav, nav.il-global-nav) input::placeholder { color: var(--chrome-ink-3) !important; -webkit-text-fill-color: var(--chrome-ink-3) !important; opacity: 1 !important; } /* ── 12 · THE 16px INPUT FLOOR ────────────────────────────────────────────── Mobile Safari zooms the viewport whenever a focused input renders below 16px, and the zoom does not undo itself. Section 5 sets inputs to the 13px body size, which is right on a desktop and wrong on a phone. This is a functional constraint, not a stylistic one — it does not get snapped to the type scale. */ @media (max-width: 820px) { :is(#il-system, html) :is(#il-system, body) :is(input, select, textarea) { font-size: 16px !important; } } /* ── 13 · SMALL-TEXT CONTRAST ─────────────────────────────────────────────── The muted ink on paper was #93969E, which is 2.96:1 on white — fine for a 28px heading, not for the 11px hints, meter labels and footnotes that actually use it. #63666E clears 5.7:1 on white and 5.2:1 on the cream surface, with headroom for the smallest type in the system. */ :is(#il-system, html):not([data-theme="dark"]), :is(#il-system, html):not([data-theme="dark"]) body { --il-muted: #63666E; --ink5: #63666E; --sp-muted: #63666E; --text5: #63666E; } :is(#il-system, html):not([data-theme="dark"]) :is(#il-system, body) :is( .field-hint, .meter-label, .pgc-note, .hint, .form-hint, .footnote, .caption ) { color: #63666E !important; -webkit-text-fill-color: #63666E !important; } /* A gold badge takes dark ink. White on #D6AC64 is 2.11:1 — gold is a light colour, so it behaves like a light surface no matter how "brand" it feels. */ :is(#il-system, html) :is(#il-system, body) :is(.pgc-badge, .badge-gold, .tag.gold-fill) { color: #17100A !important; -webkit-text-fill-color: #17100A !important; } /* Gold labels sitting on white cards. */ :is(#il-system, html):not([data-theme="dark"]) :is(#il-system, body) :is( .sb-pro-title, .tw-kicker, .il-learn-kicker, .eyebrow-gold ) { color: #7A5A1E !important; -webkit-text-fill-color: #7A5A1E !important; } /* Dark-theme counterpart to section 13. The muted ink on the dark surface was #6E6B65 — 3.77:1 on the page background, which fails at the 11px these hints render at. #918E89 clears 6.1:1 on the page and 5.7:1 on a raised panel. */ :is(#il-system, html)[data-theme="dark"], :is(#il-system, html)[data-theme="dark"] body { --il-muted: #918E89; --ink5: #918E89; --sp-muted: #918E89; --text5: #918E89; } :is(#il-system, html)[data-theme="dark"] :is(#il-system, body) :is( .field-hint, .meter-label, .pgc-note, .hint, .form-hint, .footnote, .caption ) { color: #918E89 !important; -webkit-text-fill-color: #918E89 !important; } /* Weights above 700 come from a handful of inline styles and `font:` shorthands the normalisation pass could not reach. font-synthesis:none means the browser picks the nearest real face rather than faking one, so these were not rendering as faux bold — but four weights in the system means four, so they clamp here. */ :is(#il-system, html) :is(#il-system, body) [style*="font-weight: 7"], :is(#il-system, html) :is(#il-system, body) [style*="font-weight:7"], :is(#il-system, html) :is(#il-system, body) [style*="font-weight: 8"], :is(#il-system, html) :is(#il-system, body) [style*="font-weight:8"], :is(#il-system, html) :is(#il-system, body) [style*="font-weight: 9"], :is(#il-system, html) :is(#il-system, body) [style*="font-weight:9"] { font-weight: var(--w-bold) !important; } /* Decorative radial washes on workspace panels. These are corner glows that tint the panel without carrying information — "minimal decoration" in the brand playbook rules them out, and they also defeat any honest contrast measurement, since a tool cannot know the text does not sit under the glow. */ :is(#il-system, html) :is(#il-system, body) :is( .tool-welcome, #tool-welcome, .il-onboarding, .app-section, .acc-body, .cex-body, .il-tool-shell, .tw-welcome-copy, .il-drawer ) { background-image: none !important; } /* The tool-welcome panel used to be an always-dark gradient card, so its heading and subtitle were hard-coded near-white. With the decorative wash removed the panel inherits the themed surface beneath it, and that text has to follow the theme too — otherwise it is white on white on paper. */ :is(#il-system, html) :is(#il-system, body) :is(.tw-title, .tool-welcome h1, .tool-welcome h2) { color: var(--il-ink, #F2F0EB) !important; -webkit-text-fill-color: var(--il-ink, #F2F0EB) !important; } :is(#il-system, html) :is(#il-system, body) :is(.tw-sub, .tw-welcome-copy p, .tool-welcome p) { color: var(--il-ink-2, rgba(242, 240, 235, .70)) !important; -webkit-text-fill-color: var(--il-ink-2, rgba(242, 240, 235, .70)) !important; } /* ── 14 · MOBILE BOTTOM NAV ───────────────────────────────────────────────── This component broke twice, both times by the same mechanism: it depended on one rule out-ordering another, so any stylesheet loading stale — from a browser cache or a partial deploy — turned a 74x64 nav cell into a filled capsule with invisible labels. .mbn-item is now out of the pill group entirely, and everything below is a literal. No var() that can fail to resolve, no color-mix() (Safari shipped it only in 16.2, and a dropped declaration there leaves the bar with no background at all), no dependency on which stylesheet wins. ═════════════════════════════════════════════════════════════════════════ */ :is(#il-system, html) :is(#il-system, body) .mobile-bottom-nav { background: #0B0D12 !important; border-top: 1px solid rgba(255, 255, 255, .09) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 8px !important; padding-bottom: env(safe-area-inset-bottom, 0px) !important; } :is(#il-system, html):not([data-theme="dark"]) :is(#il-system, body) .mobile-bottom-nav { background: #FFFFFF !important; border-top: 1px solid rgba(24, 22, 18, .12) !important; } :is(#il-system, html) :is(#il-system, body) .mobile-bottom-nav .mbn-item, :is(#il-system, html) :is(#il-system, body) .mbn-item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; flex: 1 1 0 !important; min-width: 0 !important; padding: 6px 2px !important; border: 0 !important; border-radius: 4px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; font-size: 10px !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: none !important; color: rgba(239, 237, 230, .62) !important; -webkit-text-fill-color: rgba(239, 237, 230, .62) !important; } :is(#il-system, html):not([data-theme="dark"]) :is(#il-system, body) .mobile-bottom-nav .mbn-item, :is(#il-system, html):not([data-theme="dark"]) :is(#il-system, body) .mbn-item { color: #5C6069 !important; -webkit-text-fill-color: #5C6069 !important; } :is(#il-system, html) :is(#il-system, body) .mbn-item :is(i, span, svg) { color: inherit !important; -webkit-text-fill-color: inherit !important; background: transparent !important; } :is(#il-system, html) :is(#il-system, body) .mbn-item i { font-size: 19px !important; } :is(#il-system, html) :is(#il-system, body) .mbn-item:is(.mbn-active, .active) { color: #D6AC64 !important; -webkit-text-fill-color: #D6AC64 !important; background: transparent !important; } :is(#il-system, html):not([data-theme="dark"]) :is(#il-system, body) .mbn-item:is(.mbn-active, .active) { color: #7A5A1E !important; -webkit-text-fill-color: #7A5A1E !important; } /* ── 15 · THEME TOGGLE GLYPHS ─────────────────────────────────────────────── The toggle used literal ☀ (U+2600) and ☾ (U+263E). Section 9 forces Plus Jakarta Sans across the chrome and PJS has neither glyph, so both rendered as the missing-glyph box. A symbol-font fallback only moves the problem — which font supplies U+2600 varies by OS. Draw the shapes instead: no glyph, no font dependency, identical everywhere. The moon is a circle with an offset inset shadow, the cheapest way to cut a crescent without a second element. */ :is(#il-system, html) :is(#il-system, body) :is(.theme-toggle-sun, .theme-toggle-moon) { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 14px !important; height: 14px !important; font-size: 0 !important; line-height: 0 !important; } :is(#il-system, html) :is(#il-system, body) .theme-toggle-sun::before { content: "" !important; display: block !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: currentColor !important; } :is(#il-system, html) :is(#il-system, body) .theme-toggle-moon::before { content: "" !important; display: block !important; width: 11px !important; height: 11px !important; border-radius: 50% !important; background: transparent !important; box-shadow: inset -3.5px -1.5px 0 0 currentColor !important; } /* ── 16 · PHONE LAYOUT ────────────────────────────────────────────────────── .il-landing-hero kept its desktop grid — grid-template-columns: 380px 500px — at every width. At 393px that is 880px of fixed track in a 393px box, which is why the copy measured 380px regardless of padding and the hero mock sat at x=434, entirely off-canvas and saved only by overflow-x:hidden. */ /* Collapse at 960px, not 760px. The desktop rhythm in section 19 starts at 961px, so a 760px breakpoint left the whole tablet band on the untouched desktop grid: 880px of fixed track (380px + 500px) inside a 768-960px box, with the headline crammed to 362px and breaking onto six lines. */ @media (max-width: 960px) { :is(#il-system, html) :is(#il-system, body) :is(.il-landing-hero, .il-landing-inner, .il-landing-grid) { display: block !important; grid-template-columns: 1fr !important; width: 100% !important; max-width: 100% !important; padding-left: 28px !important; padding-right: 28px !important; box-sizing: border-box !important; } :is(#il-system, html) :is(#il-system, body) :is(.il-landing-copy, .il-landing-inner > *) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } :is(#il-system, html) :is(#il-system, body) :is(.il-landing-hero h1, .il-landing-copy h1) { font-size: clamp(34px, 5.4vw, 48px) !important; line-height: 1.07 !important; letter-spacing: -.022em !important; text-align: left !important; max-width: 22ch !important; } /* On a tablet the mock stacks under the copy; it only disappears on phones. */ :is(#il-system, html) :is(#il-system, body) :is(.il-landing-preview, .il-hero-mock) { margin-top: 40px !important; max-width: 100% !important; } } @media (max-width: 760px) { /* A 500px product illustration has no place on a 393px screen. */ :is(#il-system, html) :is(#il-system, body) :is(.il-landing-preview, .il-hero-mock) { display: none !important; } } @media (max-width: 640px) { :is(#il-system, html), :is(#il-system, body) { max-width: 100% !important; overflow-x: hidden !important; } :is(#il-system, html) :is(#il-system, body) :is( .il-landing-copy, .il-landing-hero, .il-landing-inner, .il-landing-band, .hero-inner, .wrap, .il-landing-actions, .il-landing-search ) { padding-left: 18px !important; padding-right: 18px !important; box-sizing: border-box !important; } :is(#il-system, html) :is(#il-system, body) :is(.il-landing-hero h1, .il-landing-copy h1, .hero-title) { font-size: clamp(30px, 8.4vw, 40px) !important; line-height: 1.08 !important; letter-spacing: -.02em !important; overflow-wrap: break-word !important; } /* The bottom nav is fixed; the last section needs clearance under it. */ :is(#il-system, html) :is(#il-system, body) :is(#view-home, .il-landing, footer) { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important; } } /* ── 17 · SCREEN-READER ONLY ──────────────────────────────────────────────── Visually hidden but still announced and still indexed. Not display:none, which removes it from the accessibility tree entirely. */ .il-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* ── 18 · TOUCH TARGETS ───────────────────────────────────────────────────── Inline text links — footers, auth links, legal links — were rendering 13-21px tall on a phone. WCAG asks for 24px minimum and every platform guideline says 44px; these are the links people miss and tap twice. Padding would break the inline flow, so the hit area is grown with a pseudo-element that does not affect layout. */ @media (pointer: coarse), (max-width: 640px) { :is(#il-system, html) :is(#il-system, body) :is(footer, .f-links, .auth-alt, .legal-links, .guide-cta, .sec-note) a, :is(#il-system, html) :is(#il-system, body) a:not(.btn):not(.btn-primary):not(.mbn-item):not(.nav-tab):not(.act-btn):not(.sb-item):not(.skip-link):not(.il-skip-link) { position: relative; } /* Structural, not a list of class names. Guessing container classes left the static pages and auth links untouched; this covers every inline link that is not already a button-shaped control, which is exactly the set that renders 13-19px tall. */ :is(#il-system, html) :is(#il-system, body) a:not(.btn):not(.btn-primary):not(.mbn-item):not(.nav-tab):not(.act-btn):not(.sb-item):not(.tf-pill):not(.il-global-trial):not(.il-global-login):not(.mmenu-item):not(.skip-link):not(.il-skip-link)::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); pointer-events: auto; } /* Give the rows enough room that the enlarged targets do not overlap. */ :is(#il-system, html) :is(#il-system, body) :is(footer, .f-links, .legal-links) { line-height: 2.6 !important; } /* Checkboxes were 13x13. */ /* WCAG 2.2 AA sets 24x24 as the floor for a pointer target. */ :is(#il-system, html) :is(#il-system, body) :is(input[type="checkbox"], input[type="radio"]) { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important; accent-color: #D6AC64; } /* The brand mark in the auth pages' nav was 30px tall. */ :is(#il-system, html) :is(#il-system, body) :is(.nav-logo, .il-global-brand) { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } } /* ── 19 · LANDING RHYTHM ──────────────────────────────────────────────────── Three things made the landing read as unfinished at desktop widths: · The hero ran a 66px display headline inside a 489px column, so it broke onto SIX lines while 1320px of hero sat around it. A display size needs a measure to match or it stops reading as a headline and starts reading as a narrow paragraph. · The hero was 1320px wide while every section under it was 1180px, so nothing lined up down the left edge. · Section padding plus section margin stacked to ~180px of empty space between blocks, which reads as missing content rather than as air. ═════════════════════════════════════════════════════════════════════════ */ @media (min-width: 961px) { /* One measure for the whole page. */ :is(#il-system, html) :is(#il-system, body) :is( .il-landing-hero, .il-capabilities, .il-workflow-visual, .il-landing-band, .il-landing-pricing ) { max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 32px !important; padding-right: 32px !important; box-sizing: border-box !important; } /* Give the copy the larger share: the headline is the thing being read. */ :is(#il-system, html) :is(#il-system, body) .il-landing-hero { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) !important; gap: 56px !important; align-items: center !important; padding-top: 72px !important; padding-bottom: 88px !important; } /* 56px over ~600px lands the headline on three lines instead of six. */ :is(#il-system, html) :is(#il-system, body) :is(.il-landing-hero h1, .il-landing-copy h1) { font-size: clamp(40px, 3.9vw, 56px) !important; line-height: 1.06 !important; letter-spacing: -.025em !important; max-width: none !important; /* the grid column is the measure now */ margin: 0 0 20px !important; /* The headline was centre-aligned inside a left-aligned column, so each of its lines started at a different x while the kicker, paragraph and buttons all lined up at 162px. It read as a mistake rather than a choice. */ text-align: left !important; } :is(#il-system, html) :is(#il-system, body) .il-landing-copy { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; } :is(#il-system, html) :is(#il-system, body) .il-landing-copy > p { max-width: 52ch !important; font-size: 15px !important; line-height: 1.62 !important; } /* Vertical rhythm: one source of spacing, not padding plus margin. */ :is(#il-system, html) :is(#il-system, body) :is(.il-capabilities, .il-workflow-visual) { padding-top: 88px !important; padding-bottom: 88px !important; margin-top: 0 !important; margin-bottom: 0 !important; } :is(#il-system, html) :is(#il-system, body) :is(.il-landing-band, .il-landing-pricing) { margin-top: 0 !important; margin-bottom: 88px !important; } /* Section headings sized against the new hero so the page has a real scale. */ :is(#il-system, html) :is(#il-system, body) :is(.il-capabilities h2, .il-workflow-visual h2, .il-landing-band h2, .il-landing-pricing h2) { font-size: clamp(26px, 2.5vw, 34px) !important; line-height: 1.14 !important; letter-spacing: -.02em !important; } } /* ── 20 · SKIP LINK ───────────────────────────────────────────────────────── The tap-target rule in section 18 sets position:relative on inline links, which overrode the skip link's position:fixed on phones — so "Skip to content" sat visibly over the brand mark instead of waiting for focus. It is pinned off-screen here and only travels into view when focused, in both themes and at every width. */ :is(#il-system, html) :is(#il-system, body) :is(.skip-link, .il-skip-link) { position: fixed !important; top: 0 !important; left: 12px !important; z-index: 10000 !important; transform: translateY(-140%) !important; transition: transform .14s ease !important; /* A skip link is a keyboard affordance, but when it IS on screen it should still be a real target rather than a 20px sliver. */ min-height: 44px !important; display: inline-flex !important; align-items: center !important; padding: 0 18px !important; border-radius: 0 0 6px 6px !important; background: #D6AC64 !important; color: #17100A !important; -webkit-text-fill-color: #17100A !important; font-weight: 600 !important; text-decoration: none !important; } :is(#il-system, html) :is(#il-system, body) :is(.skip-link, .il-skip-link):focus, :is(#il-system, html) :is(#il-system, body) :is(.skip-link, .il-skip-link):focus-visible { transform: translateY(0) !important; outline: 2px solid #17100A !important; outline-offset: -4px !important; } /* ═══════════════════════════════════════════════════════════════════════════ 21. FALLBACK FONT METRICS — kill the first-paint reflow. Measured, not guessed: with webfonts blocked, the landing h1 rendered at 356px / 6 lines; with Plus Jakarta Sans loaded it renders 237px / 4 lines. That 119px collapse was the entire CLS of 0.153 — every element below the headline jumped up when the font swapped in. The old stack fell back to `ui-sans-serif, system-ui`, whose metrics vary by platform and are nowhere near Plus Jakarta's. Declaring an explicit fallback built on Arial/Liberation Sans — present on effectively every platform — and overriding its metrics makes the pre-swap layout occupy the same space, so nothing moves when the real font arrives. size-adjust was solved empirically by sweeping values until the fallback h1 matched 237px; the match plateau was 96-108%, so 100% sits in its middle. ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'PJS Fallback'; src: local('Arial'), local('Liberation Sans'), local('Helvetica Neue'), local('Helvetica'); size-adjust: 100%; ascent-override: 105%; descent-override: 26%; line-gap-override: 0%; } /* ═══════════════════════════════════════════════════════════════════════════ 22. LANDING — DISPLAY TYPE AND FEATURE RAIL Direction taken from the reference: a high-contrast display serif against the sans body, a letterspaced wordmark, and a dense hairline-separated feature rail instead of loose pill chips. Instrument Serif was already self-hosted, so the serif costs no new bytes. It only runs at display sizes - body copy, data and UI stay on Plus Jakarta and JetBrains Mono, because a serif at 15px in a data table is a legibility loss, not a premium signal. ═══════════════════════════════════════════════════════════════════════════ */ /* Metric-matched fallback for the display serif, same technique as §21 — Georgia is the nearest ubiquitous serif and is what the stack falls back to anyway; overriding its metrics keeps the headline from reflowing. The size-adjust value is solved empirically, see the harness note in §21. */ @font-face { font-family: 'IS Fallback'; src: local('Georgia'), local('Times New Roman'), local('Liberation Serif'); size-adjust: 100%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; } /* ── wordmark ─────────────────────────────────────────────────────────────── */ :is(#il-system, html) :is(#il-system, body) #main-nav .nav-logo > span { font-family: "Plus Jakarta Sans", "PJS Fallback", ui-sans-serif, sans-serif !important; text-transform: uppercase !important; letter-spacing: .17em !important; font-weight: 600 !important; font-size: 13px !important; line-height: 1 !important; } :is(#il-system, html) :is(#il-system, body) #main-nav .nav-logo > span em { font-style: normal !important; margin-left: .17em !important; } :is(#il-system, html) :is(#il-system, body) #main-nav .nav-logo img { box-shadow: 0 0 0 1px rgba(216,154,55,.42) !important; } /* ── display headline ─────────────────────────────────────────────────────── */ :is(#il-system, html) :is(#il-system, body) h1.il-display { font-family: "Instrument Serif", "IS Fallback", Georgia, serif !important; font-weight: 400 !important; font-size: clamp(38px, 4.4vw, 62px) !important; line-height: 1.06 !important; letter-spacing: -0.5px !important; text-wrap: balance; margin: 0 0 18px !important; } :is(#il-system, html) :is(#il-system, body) h1.il-display .il-d1 { display: block; } :is(#il-system, html) :is(#il-system, body) h1.il-display .il-d2 { display: block; /* Upright, in the body ink — the reference accents only the closing phrase, not the whole sentence. A full italic gold sentence reads as decoration; a short gold phrase reads as emphasis. */ color: var(--ink, #F2F0EB) !important; -webkit-text-fill-color: var(--ink, #F2F0EB) !important; font-style: normal !important; } :is(#il-system, html) :is(#il-system, body) h1.il-display .il-d2 em { font-style: normal !important; color: var(--gold-d, #D89A37) !important; -webkit-text-fill-color: var(--gold-d, #D89A37) !important; } /* ── feature rail ─────────────────────────────────────────────────────────── */ :is(#il-system, html) :is(#il-system, body) .il-rail { /* Spans the whole hero, not just the copy column — the rail is a summary of the product, so it reads across the full measure like the reference. */ grid-column: 1 / -1 !important; /* Auto-placement drops a full-width item into the first row that can hold it, which put the rail above the headline. order pins it last. */ order: 99 !important; display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; margin: 44px 0 0 !important; padding-top: 0 !important; border-top: 1px solid var(--border, rgba(255,255,255,.075)) !important; } @media (min-width: 961px) { :is(#il-system, html) :is(#il-system, body) .il-landing-hero { row-gap: 0 !important; } } :is(#il-system, html) :is(#il-system, body) .il-rail-item { display: flex !important; flex-direction: column !important; gap: 5px !important; padding: 20px 22px 4px 0 !important; border-right: 1px solid var(--border, rgba(255,255,255,.075)) !important; } :is(#il-system, html) :is(#il-system, body) .il-rail-item:last-child { border-right: 0 !important; } :is(#il-system, html) :is(#il-system, body) .il-rail-item > i { font-size: 17px !important; color: var(--gold-d, #D89A37) !important; margin-bottom: 3px !important; } :is(#il-system, html) :is(#il-system, body) .il-rail-item > b { font-size: 13px !important; font-weight: 600 !important; letter-spacing: .01em !important; display: flex !important; align-items: center !important; gap: 7px !important; flex-wrap: wrap !important; } :is(#il-system, html) :is(#il-system, body) .il-rail-item > span { font-size: 12px !important; line-height: 1.45 !important; color: var(--ink3, #B4B0A8) !important; } /* A slot with no data behind it says so, rather than showing invented numbers. */ :is(#il-system, html) :is(#il-system, body) .il-rail-item > b em { font-style: normal !important; font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 9px !important; letter-spacing: .09em !important; text-transform: uppercase !important; padding: 2px 6px !important; border-radius: 999px !important; border: 1px solid var(--border, rgba(255,255,255,.14)) !important; color: var(--ink3, #B4B0A8) !important; } :is(#il-system, html) :is(#il-system, body) .il-rail-item.is-soon > i { opacity: .5 !important; } @media (max-width: 760px) { :is(#il-system, html) :is(#il-system, body) .il-rail { grid-template-columns: 1fr 1fr !important; } :is(#il-system, html) :is(#il-system, body) .il-rail-item { padding: 14px 14px 14px 0 !important; border-bottom: 1px solid var(--border, rgba(255,255,255,.075)) !important; } :is(#il-system, html) :is(#il-system, body) .il-rail-item:nth-child(2n) { border-right: 0 !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 23. HERO CTA PAIR + LIVE MARKET STRIP Matches the reference's two-button hero (solid accent + ghost) and the data strip beneath it. The strip is real: it renders /api/market/movers, the free unmetered endpoint. The options card next to it is explicitly labelled "coming soon" because no options provider is wired up — an empty card that says so beats a full one showing invented sweeps. ═══════════════════════════════════════════════════════════════════════════ */ /* ── CTA pair ─────────────────────────────────────────────────────────────── */ :is(#il-system, html) :is(#il-system, body) .il-cta-pair { display: flex !important; gap: 12px !important; flex-wrap: wrap !important; align-items: center !important; } :is(#il-system, html) :is(#il-system, body) a.il-cta-solid { background: linear-gradient(180deg, #E3B25A, #C9922F) !important; color: #17130B !important; -webkit-text-fill-color: #17130B !important; border: 0 !important; border-radius: 8px !important; padding: 13px 22px !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .01em !important; display: inline-flex !important; align-items: center !important; gap: 9px !important; text-decoration: none !important; box-shadow: 0 1px 0 rgba(255,255,255,.28) inset, 0 8px 22px -12px rgba(201,146,47,.85) !important; } :is(#il-system, html) :is(#il-system, body) button.il-cta-ghost { background: transparent !important; color: var(--ink, #F2F0EB) !important; -webkit-text-fill-color: var(--ink, #F2F0EB) !important; border: 1px solid var(--border, rgba(255,255,255,.16)) !important; border-radius: 8px !important; padding: 13px 20px !important; font-size: 14px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center !important; gap: 9px !important; } :is(#il-system, html) :is(#il-system, body) button.il-cta-ghost > i { color: var(--gold-d, #D89A37) !important; } /* ── market strip ─────────────────────────────────────────────────────────── */ :is(#il-system, html) :is(#il-system, body) .il-market-strip { padding: 0 24px 8px !important; } :is(#il-system, html) :is(#il-system, body) .il-ms-inner { max-width: 1180px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) !important; gap: 14px !important; } :is(#il-system, html) :is(#il-system, body) .ilm-card { border: 1px solid var(--border, rgba(255,255,255,.09)) !important; border-radius: 8px !important; padding: 16px 18px 12px !important; background: var(--surface, rgba(255,255,255,.015)) !important; } :is(#il-system, html) :is(#il-system, body) .ilm-head { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin-bottom: 12px !important; } :is(#il-system, html) :is(#il-system, body) .ilm-title { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 10px !important; letter-spacing: .13em !important; text-transform: uppercase !important; color: var(--ink3, #B4B0A8) !important; } :is(#il-system, html) :is(#il-system, body) .ilm-tabs { display: flex !important; gap: 2px !important; } :is(#il-system, html) :is(#il-system, body) .ilm-tab { background: transparent !important; border: 0 !important; padding: 5px 10px !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 600 !important; color: var(--ink3, #B4B0A8) !important; -webkit-text-fill-color: var(--ink3, #B4B0A8) !important; cursor: pointer !important; min-height: 28px !important; } :is(#il-system, html) :is(#il-system, body) .ilm-tab.on { background: var(--border, rgba(255,255,255,.07)) !important; color: var(--ink, #F2F0EB) !important; -webkit-text-fill-color: var(--ink, #F2F0EB) !important; } :is(#il-system, html) :is(#il-system, body) .ilm-row { display: grid !important; grid-template-columns: 62px minmax(0,1fr) 72px 74px !important; align-items: center !important; gap: 10px !important; padding: 9px 0 !important; border-top: 1px solid var(--border, rgba(255,255,255,.055)) !important; text-decoration: none !important; min-height: 40px !important; } :is(#il-system, html) :is(#il-system, body) .ilm-row:first-child { border-top: 0 !important; } :is(#il-system, html) :is(#il-system, body) .ilm-sym { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 12px !important; font-weight: 700 !important; color: var(--ink, #F2F0EB) !important; -webkit-text-fill-color: var(--ink, #F2F0EB) !important; } :is(#il-system, html) :is(#il-system, body) .ilm-name { font-size: 12px !important; color: var(--ink3, #B4B0A8) !important; -webkit-text-fill-color: var(--ink3, #B4B0A8) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } :is(#il-system, html) :is(#il-system, body) .ilm-price, :is(#il-system, html) :is(#il-system, body) .ilm-chg { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 12px !important; text-align: right !important; } :is(#il-system, html) :is(#il-system, body) .ilm-price { color: var(--ink2, #D2CFC8) !important; -webkit-text-fill-color: var(--ink2, #D2CFC8) !important; } /* Financial semantics, muted rather than neon — these sit next to gold. */ :is(#il-system, html) :is(#il-system, body) .ilm-chg.is-up { color: #4BA97A !important; -webkit-text-fill-color: #4BA97A !important; } :is(#il-system, html) :is(#il-system, body) .ilm-chg.is-dn { color: #C4614F !important; -webkit-text-fill-color: #C4614F !important; } html[data-theme="light"] :is(#il-system, body) .ilm-chg.is-up { color:#1F7A4D !important; -webkit-text-fill-color:#1F7A4D !important; } html[data-theme="light"] :is(#il-system, body) .ilm-chg.is-dn { color:#A3352A !important; -webkit-text-fill-color:#A3352A !important; } /* Loading rows keep the strip's height stable so nothing shifts on arrival. */ :is(#il-system, html) :is(#il-system, body) .ilm-row.is-load > span { height: 9px !important; border-radius: 3px !important; background: var(--border, rgba(255,255,255,.07)) !important; animation: ilmPulse 1.5s ease-in-out infinite !important; } @keyframes ilmPulse { 0%,100% { opacity: .45 } 50% { opacity: .8 } } @media (prefers-reduced-motion: reduce) { :is(#il-system, html) :is(#il-system, body) .ilm-row.is-load > span { animation: none !important; } } :is(#il-system, html) :is(#il-system, body) .ilm-more, :is(#il-system, html) :is(#il-system, body) .ilm-empty { display: block !important; margin-top: 12px !important; padding-top: 10px !important; border-top: 1px solid var(--border, rgba(255,255,255,.055)) !important; font-size: 12px !important; color: var(--ink3, #B4B0A8) !important; -webkit-text-fill-color: var(--ink3, #B4B0A8) !important; text-decoration: none !important; } :is(#il-system, html) :is(#il-system, body) .ilm-badge { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 9px !important; letter-spacing: .09em !important; text-transform: uppercase !important; padding: 3px 7px !important; border-radius: 999px !important; border: 1px solid var(--border, rgba(255,255,255,.14)) !important; color: var(--ink3, #B4B0A8) !important; -webkit-text-fill-color: var(--ink3, #B4B0A8) !important; } :is(#il-system, html) :is(#il-system, body) .ilm-soon-copy { font-size: 12px !important; line-height: 1.55 !important; color: var(--ink3, #B4B0A8) !important; -webkit-text-fill-color: var(--ink3, #B4B0A8) !important; margin: 0 !important; } @media (max-width: 900px) { :is(#il-system, html) :is(#il-system, body) .il-ms-inner { grid-template-columns: 1fr !important; } :is(#il-system, html) :is(#il-system, body) .ilm-row { grid-template-columns: 56px minmax(0,1fr) 68px !important; } :is(#il-system, html) :is(#il-system, body) .ilm-price { display: none !important; } } /* ═══════════════════════════════════════════════════════════════════════════ 24. HERO ILLUSTRATION — MAGNIFIER OVER THE TAPE The signature image from the reference: a rising candle field with a gold lens over it, magnifying the section underneath, plus a floating readout and a quote panel. The magnification is real geometry, not a picture of one — the same candle group is drawn twice and the second copy is scaled about the lens centre and clipped to the glass. Move the circle and the magnified region follows. Everything here is an ILLUSTRATION and is labelled as such: the panel ends in "Sample data" and the caption beneath already reads "Illustrative workspace". No live number is implied. ═══════════════════════════════════════════════════════════════════════════ */ :is(#il-system, html) :is(#il-system, body) .ihx-wrap { display: grid !important; grid-template-columns: minmax(0, 1fr) 196px !important; gap: 0 !important; align-items: stretch !important; border: 1px solid var(--border, rgba(255,255,255,.09)) !important; border-radius: 12px !important; overflow: hidden !important; background: #0A0907 !important; box-shadow: 0 30px 70px -40px rgba(0,0,0,.9) !important; } :is(#il-system, html) :is(#il-system, body) .ihx-stage { position: relative !important; min-height: 412px !important; overflow: hidden !important; } :is(#il-system, html) :is(#il-system, body) .ihx-scene { display: block !important; width: 100% !important; height: 100% !important; position: absolute !important; inset: 0 !important; } /* Candles are amber, not green/red. The reference keeps the whole tape in the brand's gold family — a two-colour financial palette here would fight the ring for attention and make the image read as a chart rather than an image. Direction is carried by brightness instead: up candles sit lighter. */ :is(#il-system, html) :is(#il-system, body) .ihx-candles .cd.up { fill: #CF9C41 !important; } :is(#il-system, html) :is(#il-system, body) .ihx-candles .cd.dn { fill: #8B6527 !important; } :is(#il-system, html) :is(#il-system, body) .ihx-candles .wk { stroke: rgba(216,175,110,.42) !important; stroke-width: 1.1 !important; } /* Inside the glass everything reads brighter — that is what magnifying does. */ :is(#il-system, html) :is(#il-system, body) .ihx-mag .cd.up { fill: #F0CA77 !important; } :is(#il-system, html) :is(#il-system, body) .ihx-mag .cd.dn { fill: #97702E !important; } :is(#il-system, html) :is(#il-system, body) .ihx-mag .wk { stroke: rgba(245,220,170,.62) !important; stroke-width: .85 !important; } /* floating readout */ :is(#il-system, html) :is(#il-system, body) .ihx-float { position: absolute !important; left: 18px !important; top: 92px !important; width: 150px !important; padding: 11px 13px 9px !important; border-radius: 9px !important; background: rgba(16,15,13,.90) !important; border: 1px solid rgba(255,225,170,.20) !important; box-shadow: 0 18px 40px -22px rgba(0,0,0,.95) !important; display: grid !important; gap: 2px !important; } :is(#il-system, html) :is(#il-system, body) .ihx-f-lbl { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 8.5px !important; letter-spacing: .11em !important; text-transform: uppercase !important; color: rgba(232,226,214,.60) !important; -webkit-text-fill-color: rgba(232,226,214,.60) !important; } :is(#il-system, html) :is(#il-system, body) .ihx-f-val { font-size: 25px !important; font-weight: 700 !important; line-height: 1.05 !important; color: #F4F1EA !important; -webkit-text-fill-color: #F4F1EA !important; } :is(#il-system, html) :is(#il-system, body) .ihx-f-tag { font-size: 10.5px !important; font-weight: 600 !important; color: #6FBE95 !important; -webkit-text-fill-color: #6FBE95 !important; } :is(#il-system, html) :is(#il-system, body) .ihx-f-spark { width: 100% !important; height: 24px !important; margin-top: 3px !important; } :is(#il-system, html) :is(#il-system, body) .ihx-f-spark path { stroke: #D89A37 !important; stroke-width: 1.7 !important; } /* quote panel */ :is(#il-system, html) :is(#il-system, body) .ihx-rail { border-left: 1px solid rgba(255,255,255,.08) !important; padding: 14px 14px 11px !important; background: rgba(255,255,255,.018) !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } :is(#il-system, html) :is(#il-system, body) .ihx-r-top { display: flex !important; align-items: baseline !important; gap: 7px !important; } :is(#il-system, html) :is(#il-system, body) .ihx-r-sym { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 13px !important; font-weight: 700 !important; color: #F4F1EA !important; -webkit-text-fill-color: #F4F1EA !important; } :is(#il-system, html) :is(#il-system, body) .ihx-r-name { font-size: 9.5px !important; color: rgba(232,226,214,.52) !important; -webkit-text-fill-color: rgba(232,226,214,.52) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } :is(#il-system, html) :is(#il-system, body) .ihx-r-price { font-size: 27px !important; font-weight: 700 !important; line-height: 1.15 !important; margin-top: 6px !important; color: #F4F1EA !important; -webkit-text-fill-color: #F4F1EA !important; } :is(#il-system, html) :is(#il-system, body) .ihx-r-chg { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 10.5px !important; margin-bottom: 10px !important; color: #6FBE95 !important; -webkit-text-fill-color: #6FBE95 !important; } :is(#il-system, html) :is(#il-system, body) .ihx-r-row { display: flex !important; flex-direction: column !important; gap: 1px !important; padding: 8px 0 !important; border-top: 1px solid rgba(255,255,255,.07) !important; } :is(#il-system, html) :is(#il-system, body) .ihx-r-row > span { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 8px !important; letter-spacing: .11em !important; text-transform: uppercase !important; color: rgba(232,226,214,.50) !important; -webkit-text-fill-color: rgba(232,226,214,.50) !important; } :is(#il-system, html) :is(#il-system, body) .ihx-r-row > b { font-size: 12px !important; font-weight: 600 !important; color: #EDCB84 !important; -webkit-text-fill-color: #EDCB84 !important; } :is(#il-system, html) :is(#il-system, body) .ihx-r-foot { margin-top: auto !important; padding-top: 9px !important; font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 8px !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: rgba(232,226,214,.40) !important; -webkit-text-fill-color: rgba(232,226,214,.40) !important; } @media (max-width: 900px) { :is(#il-system, html) :is(#il-system, body) .ihx-wrap { grid-template-columns: 1fr !important; } :is(#il-system, html) :is(#il-system, body) .ihx-rail { border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.08) !important; } :is(#il-system, html) :is(#il-system, body) .ihx-stage { min-height: 260px !important; } :is(#il-system, html) :is(#il-system, body) .ihx-float { left: 12px !important; top: 60px !important; width: 132px !important; } }