to (clickable
screenshot → /app). Force block-level flex layout and suppress the
browser default styling so the visual treatment is identical to
the previous div, while the entire screenshot card becomes a single
keyboard-focusable hit target. */
text-decoration: none !important;
color: inherit !important;
cursor: pointer;
position: relative;
display: flex;
justify-content: center;
align-items: flex-start;
padding-right: 0;
margin-right: 0;
min-width: 0;
width: 100%;
max-width: min(1240px, 96%);
margin-left: auto;
margin-right: auto;
margin-top: -10px;
}
.tt-ti-landing__shot-stack {
position: relative;
width: 100%;
max-width: none;
padding-bottom: 16px;
box-sizing: border-box;
/* Allow shooting-star pseudo-elements to spill outside the card on both
* sides without being clipped. */
overflow: visible;
}
/* Static aurora ribbons: two heavily blurred multi-stop colour fields that
* spill outside the screenshot card on the left and right. Pure decoration —
* no animation, no JS, no extra DOM.
*
* Recipe for "richer + smoother":
* - more layers (5 radial blobs per side at varied scale & position) build
* organic colour temperature transitions instead of a single solid blob
* - each blob's colour spans the full nebula palette family (cobalt /
* violet / magenta / amber / cyan accent) so neighbours blend optically
* - heavier blur (72px) + saturate(1.15) gives the smooth gaseous feel
* - vertical mask fades the top and bottom 20% to nothing → ribbons feel
* like they emerge from and dissolve into the dark void
* - z-index 0 keeps them behind the screenshot frame; pointer-events:none
*/
.tt-ti-landing__shot-stack::before,
.tt-ti-landing__shot-stack::after {
content: "";
position: absolute;
top: -10%;
bottom: -10%;
width: clamp(180px, 22vw, 320px);
z-index: 0;
pointer-events: none;
filter: blur(48px) saturate(1.05);
opacity: 0.85;
}
/* Left ribbon — cobalt + violet, anchored just outside the card's left edge.
* Multiple radial-gradients stacked vertically build a wavy aurora silhouette. */
.tt-ti-landing__shot-stack::before {
left: clamp(-260px, -16vw, -160px);
background:
radial-gradient(60% 30% at 60% 18%, rgba(91, 140, 255, 0.85), transparent 70%),
radial-gradient(70% 28% at 40% 48%, rgba(123, 61, 245, 0.85), transparent 70%),
radial-gradient(60% 32% at 65% 78%, rgba(41, 98, 255, 0.70), transparent 70%);
}
/* Right ribbon — magenta + amber, anchored just outside the card's right edge. */
.tt-ti-landing__shot-stack::after {
right: clamp(-260px, -16vw, -160px);
background:
radial-gradient(60% 30% at 40% 22%, rgba(232, 76, 184, 0.12), transparent 70%),
radial-gradient(70% 28% at 60% 52%, rgba(123, 61, 245, 0.65), transparent 70%),
radial-gradient(60% 32% at 35% 80%, rgba(255, 154, 60, 0.18), transparent 70%);
}
@media (max-width: 991px) {
/* On tablets/phones the card already takes nearly all the width; the
* ribbons would crowd the screenshot, so collapse them. */
.tt-ti-landing__shot-stack::before,
.tt-ti-landing__shot-stack::after {
display: none;
}
}
.tt-ti-landing__shot-plate {
position: absolute;
pointer-events: none;
border-radius: var(--tt-radius);
}
/* rear plate: wider rear card + nebula rim glow.
* [UPDATE] 2026-05-12 — wider reach, brighter default state, multi-hue glow:
* left → cobalt blue, top → violet, right → magenta, bottom → amber. The
* colours mix optically into a "nebula" wash without tinting the global
* landing background. Hover keeps the same hues but lifts intensity. */
.tt-ti-landing__shot-plate--rear {
z-index: 0;
top: clamp(8px, 1.3vw, 14px);
left: clamp(-58px, -7.4vw, -28px);
right: clamp(-58px, -7.4vw, -28px);
bottom: clamp(-8px, -1vw, -2px);
width: auto;
height: auto;
box-sizing: border-box;
background:
radial-gradient(60% 90% at 0% 50%, rgba(41, 98, 255, 0.22), transparent 70%),
radial-gradient(60% 80% at 50% 0%, rgba(123, 61, 245, 0.20), transparent 70%),
radial-gradient(60% 90% at 100% 50%, rgba(232, 76, 184, 0.18), transparent 70%),
radial-gradient(60% 80% at 50% 100%, rgba(255, 154, 60, 0.04), transparent 70%),
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
border: 1px solid rgba(123, 61, 245, 0.55);
box-shadow:
0 0 0 1px rgba(41, 98, 255, 0.32),
0 0 36px rgba(41, 98, 255, 0.55),
0 0 64px rgba(123, 61, 245, 0.42),
0 0 110px rgba(232, 76, 184, 0.10),
0 0 160px rgba(255, 154, 60, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 26px 48px -16px rgba(0, 0, 0, 0.6);
opacity: 0.92;
transform: translateY(14px);
transition:
transform 0.35s ease,
opacity 0.35s ease,
border-color 0.35s ease,
box-shadow 0.45s ease;
}
body.theme--light .tt-ti-landing__shot-plate--rear {
/* Same nebula rim glow as dark theme (product shot card lives only on homepage). */
background:
radial-gradient(60% 90% at 0% 50%, rgba(41, 98, 255, 0.22), transparent 70%),
radial-gradient(60% 80% at 50% 0%, rgba(123, 61, 245, 0.20), transparent 70%),
radial-gradient(60% 90% at 100% 50%, rgba(232, 76, 184, 0.18), transparent 70%),
radial-gradient(60% 80% at 50% 100%, rgba(255, 154, 60, 0.04), transparent 70%),
linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0));
border-color: rgba(123, 61, 245, 0.55);
box-shadow:
0 0 0 1px rgba(41, 98, 255, 0.32),
0 0 36px rgba(41, 98, 255, 0.55),
0 0 64px rgba(123, 61, 245, 0.42),
0 0 110px rgba(232, 76, 184, 0.10),
0 0 160px rgba(255, 154, 60, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.18),
0 26px 48px -16px rgba(0, 0, 0, 0.6);
}
.tt-ti-landing__shot-frame {
position: relative;
z-index: 1;
border-radius: var(--tt-radius);
overflow: hidden;
isolation: isolate;
box-sizing: border-box;
border: 1px solid var(--tt-line);
transform: translateY(0);
transition: transform 0.35s ease, box-shadow 0.35s ease;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 32px 64px -16px rgba(0, 0, 0, 0.7),
0 14px 24px -8px rgba(0, 0, 0, 0.45);
}
/* Landing 锁定黑底：light 主题 shot-frame 阴影与 dark 一致 */
body.theme--light .tt-ti-landing__shot-frame {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 32px 64px -16px rgba(0, 0, 0, 0.7),
0 14px 24px -8px rgba(0, 0, 0, 0.45);
}
@media (hover: hover) and (pointer: fine) {
.tt-ti-landing__visual:hover .tt-ti-landing__shot-frame {
transform: translateY(-6px);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.07) inset,
0 44px 88px -20px rgba(0, 0, 0, 0.75),
0 22px 36px -10px rgba(0, 0, 0, 0.5);
}
body.theme--light .tt-ti-landing__visual:hover .tt-ti-landing__shot-frame {
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.07) inset,
0 44px 88px -20px rgba(0, 0, 0, 0.75),
0 22px 36px -10px rgba(0, 0, 0, 0.5);
}
.tt-ti-landing__visual:hover .tt-ti-landing__shot-plate--rear,
body.theme--light .tt-ti-landing__visual:hover .tt-ti-landing__shot-plate--rear {
transform: translateY(16px);
opacity: 1;
border-color: rgba(232, 76, 184, 0.28);
box-shadow:
0 0 0 1px rgba(41, 98, 255, 0.45),
0 0 48px rgba(41, 98, 255, 0.72),
0 0 84px rgba(123, 61, 245, 0.55),
0 0 140px rgba(232, 76, 184, 0.14),
0 0 200px rgba(255, 154, 60, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.24),
0 32px 56px -14px rgba(0, 0, 0, 0.55);
}
}
.tt-ti-landing__shot-img {
display: block;
width: 100%;
height: auto;
vertical-align: top;
}
/* [ADD] 2026-05-12 — Hero tagline above the workspace screenshot.
* [EXCEPTION] color #ffffff — hero sits on dark nebula/astronaut imagery
* regardless of site theme; must not flip with --tt-fg-0 on theme toggle.
* [EXCEPTION] 2026-05-12 — font-size 80px / 56px / 36px is OUTSIDE the
* {12,14,16,18,20,22} body-text whitelist in web_app_styling.mdc.
* User explicitly authorised the override for this single hero display
* element ("使用 80PX, 不管约束"). Rule scope (typography on home/aggregation
* pages) is otherwise still enforced — do NOT propagate this size to other
* selectors. WEB-320 mistakenly clamped these to 22px; restored 2026-08-30. */
/* ID selector beats every theme/responsive `h2 { ... }` rule on the cascade. */
#tt-home-landing .tt-ti-landing__hero-top .tt-ti-landing__hero-copy {
position: absolute;
left: 50%;
top: clamp(120px, 28vh, 420px);
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
/* [FIX] 2026-07-10 — never exceed viewport: long translations (RU/DE) were
* forced single-line by `nowrap` + `max-content` and overflowed the screen.
* Cap width to the viewport and let long copy wrap; short EN stays 1 line. */
width: auto;
max-width: min(1100px, 92vw);
margin: 0;
z-index: 2;
pointer-events: none;
}
#tt-home-landing .tt-ti-landing__hero-top h2#tt-home-tagline.tt-ti-landing__tagline {
position: static;
left: auto;
top: auto;
transform: none;
width: auto;
max-width: min(1100px, 92vw);
margin: 0;
pointer-events: none;
font-family: 'Inter', 'Plus Jakarta Sans', sans-serif;
/* [EXCEPTION] hero display tagline — product-authorized 80/56/36px (see block comment above). */
font-size: 80px;
font-weight: 800;
line-height: 1.06;
letter-spacing: -0.035em;
/* [EXCEPTION] hero tagline on dark imagery — always white, not --tt-fg-0. */
color: #ffffff;
white-space: normal;
overflow-wrap: break-word;
text-align: center;
text-shadow:
0 2px 18px rgba(0, 0, 0, 0.55),
0 1px 4px rgba(0, 0, 0, 0.45);
}
@media (max-width: 1279.98px) {
#tt-home-landing .tt-ti-landing__hero-top .tt-ti-landing__hero-copy {
top: clamp(100px, 26vh, 396px);
}
}
@media (max-width: 991px) {
#tt-home-landing .tt-ti-landing__hero-top h2#tt-home-tagline.tt-ti-landing__tagline {
/* [EXCEPTION] hero display tagline tablet — product-authorized 56px. */
font-size: 56px;
line-height: 1.08;
white-space: normal;
}
}
@media (max-width: 575.98px) {
#tt-home-landing .tt-ti-landing__hero-top .tt-ti-landing__hero-copy {
top: clamp(88px, 22vh, 300px);
}
#tt-home-landing .tt-ti-landing__hero-top h2#tt-home-tagline.tt-ti-landing__tagline {
/* [EXCEPTION] hero display tagline mobile — product-authorized 36px. */
font-size: 36px;
line-height: 1.12;
}
}
/* [ADD] 2026-05-12 — Hero CTA below the workspace screenshot.
* Rectangular pill with two diagonal chamfer corners (top-left + bottom-right)
* via clip-path — gives a hard-edged sci-fi look that pairs with the nebula
* glow from .tt-ti-landing__shot-plate--rear. The clip-path hides the regular
* border, so a second filled element (::before) paints a 1px coloured edge by
* sitting behind the foreground content. Colours used here are decorative
* (background / box-shadow / border) and exempt from the body-text rule. */
/* CTA: a high-conviction primary button.
* Visual recipe (kept deliberately simple after several over-designed iterations):
* - vertical gradient (#3b6dff → #2354dd) so the body has dimension under
* the dark hero without looking flat
* - 8px radius reads as a modern button (TradingView/Stripe scale)
* - inner top-edge highlight (1px white inset) + inner bottom shadow gives
* the surface a subtle bevel
* - outer blue glow (drop-shadow) + soft drop shadow grounds the button
* - hover lifts +2px, deepens shadow, slightly brightens the gradient
* - active sinks +1px so click feels physical
* - focus-visible exposes a high-contrast white ring for keyboard users
*/
@media (prefers-reduced-motion: reduce) {
.tt-ti-landing__shot-frame,
.tt-ti-landing__shot-plate--rear {
transition: none;
}
.tt-ti-landing__visual:hover .tt-ti-landing__shot-frame {
transform: none;
}
.tt-ti-landing__visual:hover .tt-ti-landing__shot-plate--rear {
transform: translateY(14px);
opacity: 0.66;
}
body.theme--light .tt-ti-landing__visual:hover .tt-ti-landing__shot-plate--rear {
transform: translateY(14px);
}
}
/* [REMOVED] 2026-05-12 — download/platform pills (.tt-ti-landing__downloads,
* .tt-ti-landing__dl-group, .tt-ti-landing__platform-*) removed by product. The
* client-download row is now exclusively on /downloads. */
/* bottom stats bar — margin-top: auto pins it to second-screen bottom */
.tt-ti-landing__bar {
margin-top: auto;
width: 100%;
position: relative;
z-index: 1;
border-top: 1px solid var(--tt-line, #0a0a0a);
background: var(--tt-bg-0, #000000);
}
body.theme--light .tt-ti-landing__bar {
border-top-color: #1e1e1e !important;
background: #000000 !important;
}
.tt-ti-landing__bar-inner {
width: 100%;
height: 64px;
display: flex;
align-items: center;
gap: 0;
}
.tt-ti-landing__stat {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 0 32px;
}
.tt-ti-landing__stat:first-child { padding-left: 0; }
.tt-ti-landing__stat-num {
font-size: 18px;
font-weight: 700;
/* [EXCEPTION] dark strip on landing — always white on #000 bar */
color: #ffffff;
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
line-height: 1;
white-space: nowrap;
}
.tt-ti-landing__stat-lbl {
font-size: 12px;
/* [EXCEPTION] dark strip on landing — always white on #000 bar */
color: #ffffff;
opacity: 0.72;
font-weight: 500;
white-space: nowrap;
}
.tt-ti-landing__bar-sep {
width: 1px;
height: 28px;
background: var(--tt-line, #0a0a0a);
flex-shrink: 0;
}
body.theme--light .tt-ti-landing__bar-sep { background: #1e1e1e !important; }
@media (max-width: 1199px) {
.tt-ti-landing__stat { padding: 0 20px; }
/* [FIX] 2026-05-13 — Was `gap: 18px clamp(40px, 5vw, 72px)`. The 18px
row-gap inside the column flex container forced an 18px empty band
between the screenshot and the "Explore the App" CTA, so the
button visibly detached from the image the instant the viewport
crossed 1199px (≥1200px had no gap — button sat tight under the
screenshot like a pedestal — and ≤1199px slammed in a row gap,
producing the jump the user reported). The CTA already controls
its distance from the image via its own scaled `margin-top`
(≈46px @ scale=1, shrinks with viewport); the container row-gap
was double-counting that spacing. Reason this was originally set:
a leftover from when .tt-ti-landing__main was a 2-column grid
(screenshot left, copy right) that needed both row and column
gaps; the layout has since been collapsed to a single column at
all sizes so row-gap is just dead weight that breaks the pedestal
silhouette. Change: keep `padding-top` / `padding-bottom` (those
control the section's top/bottom breathing room — independent of
image-to-CTA distance) but drop the gap shorthand. */
.tt-ti-landing__main-body {
padding-top: 48px;
padding-bottom: 0;
}
}
@media (max-width: 991px) {
.tt-ti-landing__bar-inner {
margin-left: auto;
margin-right: auto;
padding-left: max(20px, env(safe-area-inset-left));
padding-right: max(20px, env(safe-area-inset-right));
}
.tt-ti-landing__stat { padding: 0 16px; }
.tt-ti-landing__main-body {
grid-template-columns: 1fr;
align-items: center;
margin-left: auto;
margin-right: auto;
padding-top: 48px;
padding-bottom: 0;
padding-left: max(18px, env(safe-area-inset-left));
padding-right: 18px;
/* [FIX] 2026-05-13 — Was `gap: 18px`. Same pedestal-break bug as the
1199px breakpoint: a row-gap inside the column flex container
was forcing 18px of empty space between the screenshot and the
CTA, splitting the visual "image-sits-on-button" silhouette.
The CTA's own scaled `margin-top` already provides the right
spacing; container gap would double-count it. Tagline-to-image
spacing is independently governed by the tagline's own
`margin-bottom: clamp(56px, 6vw, 84px)` so removing the gap
does NOT collapse the tagline-to-image distance — verified by
reading `h2#tt-home-tagline.tt-ti-landing__tagline { margin: 24px
auto clamp(56px, 6vw, 84px) }` earlier in this file. */
text-align: center;
}
.tt-ti-landing__visual {
justify-content: center;
padding-right: 0;
margin-right: 0;
}
/* [UPDATE] 2026-05-13 — Removed the previous `max-width: min(720px, 96vw)`
ceiling on the screenshot stack below 992px. Reason: the CTA below the
screenshot tracks `96vw / 1240` to stay visually proportional to the
workspace image (see .tt-ti-landing__cta). If the image gets clamped
to 720px at viewport 800–991 while the CTA keeps shrinking with vw,
the desktop-authored image-to-CTA size ratio breaks. Letting the
screenshot follow the same `min(1240px, 96%)` rule as on desktop
keeps the entire hero stack visually congruent across the full
viewport range. The screenshot's intrinsic 3299x1885 PNG is still
downscaled crisply by the browser at any width. */
.tt-ti-landing__shot-stack {
margin: 0 auto;
}
.tt-ti-landing__shot-frame {
transform: translateY(0);
}
.tt-ti-landing__shot-plate--rear {
left: clamp(-34px, -7.4vw, -18px);
right: clamp(-34px, -7.4vw, -18px);
top: clamp(7px, 1.8vw, 12px);
/* [FIX] 2026-05-13 — was `clamp(-6px, -1.1vw, -2px)`. At ≤991 the
rear-plate's downward extension shrank from 8px (desktop ≥992,
`clamp(-8px, -1vw, -2px)`) to 6px — a 25% loss of the purple
nebula "pedestal" glow that visually anchors the CTA to the
screenshot. User saw this as the button "detaching" from the
image at exactly the 992→991 crossover (the gap to the CTA
suddenly grew 2px AND the connecting glow shrank 2px =
cumulative ~4px detachment signal). Pulling the bottom value
back to -8px matches the desktop baseline so the pedestal stays
continuous across the breakpoint. Left/right/top remain
smaller because they only control sideways/upward spillover
which doesn't affect the image-to-CTA bond. */
bottom: clamp(-8px, -1vw, -2px);
transform: translateY(14px);
opacity: 0.62;
}
}
@media (max-width: 767px) {
.tt-ti-landing__main-body {
padding-top: 46px;
padding-bottom: 0;
padding-left: max(14px, env(safe-area-inset-left));
padding-right: max(14px, env(safe-area-inset-right));
}
.tt-ti-landing__shot-frame {
transform: translateY(0);
}
.tt-ti-landing__shot-plate--rear {
left: clamp(-24px, -7vw, -14px);
right: clamp(-24px, -7vw, -14px);
top: clamp(6px, 2.2vw, 10px);
/* [FIX] 2026-05-13 — was `clamp(-4px, -1.2vw, -1px)`. Same
pedestal-detachment fix as the 991 breakpoint: keeping bottom
at -8px (matching desktop ≥992) makes the purple nebula glow
continue to extend visibly below the screenshot frame on
phones, preserving the "image-on-button pedestal" silhouette
at every viewport instead of having the connecting glow
evaporate as the user crosses 768→767. */
bottom: clamp(-8px, -1vw, -2px);
transform: translateY(14px);
}
.tt-ti-landing__stat--secondary { display: none; }
.tt-ti-landing__bar-sep--secondary { display: none; }
.tt-ti-landing__bar-inner {
height: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 14px 20px;
gap: 0;
}
.tt-ti-landing__bar-sep { display: none; }
.tt-ti-landing__stat {
flex: 1;
padding: 0;
align-items: center;
/* [UPDATE 2026-05-11] right divider synced #1e1e1e -> #0a0a0a. */
border-right: 1px solid var(--tt-line, #0a0a0a);
}
.tt-ti-landing__stat:last-of-type { border-right: none; }
.tt-ti-landing__stat-num { font-size: 16px; }
/* [UPDATE] 2026-05-11 — whitelist min 12px (was 10px). */
.tt-ti-landing__stat-lbl { font-size: 12px; }
}
body.theme--light .tt-ti-landing__bar-inner .tt-ti-landing__stat { border-right-color: #0a0a0a !important; }
/* [ADD v2-footer] 2026-05-11 — Corporate static-page body typography
* shared by /about, /blog and /disclaimer. Keeps headings on the
* 12/14/16/18/22/28 size whitelist (web_app_styling.mdc — these
* pages are NOT in the rule's exclusion list, so they must comply).
* Color is `--tt-fg-0` (the only allowed body color), de-emphasis is
* achieved with opacity on auxiliary lines. */
.corp-page .corp-page__body {
font-size: 16px;
line-height: 1.7;
color: var(--tt-fg-0);
}
.corp-page .corp-page__body p { margin: 0 0 14px; }
.corp-page .corp-page__body h2 {
font-size: 22px;
line-height: 1.3;
margin: 28px 0 10px;
color: var(--tt-fg-0);
}
.corp-page .corp-page__body ul {
margin: 0 0 14px;
padding-left: 22px;
}
.corp-page .corp-page__body ul li { margin: 0 0 6px; }
.corp-page .corp-page__body ul li p { margin: 0; }
.corp-page .corp-page__body a {
color: var(--tt-fg-0);
text-decoration: underline;
}
.corp-page .corp-page__body a:hover { opacity: 0.75; }
.corp-page .corp-page__sub {
font-size: 18px;
line-height: 1.6;
color: var(--tt-fg-0);
opacity: 0.7;
}
.corp-page .corp-page__note {
font-size: 12px;
line-height: 1.6;
color: var(--tt-fg-0);
opacity: 0.65;
}
/* [ADD] 2026-05-11 — Corporate page hero title.
* Replaces template's `.s-44` (44px out-of-whitelist) with the largest
* allowed body size (28px) per web_app_styling.mdc. */
.corp-page .corp-page__title {
font-size: 22px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--tt-fg-0);
margin: 0;
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
/* [ADD] 2026-09-02 — Display-scale footer-linked corp hero titles.
* Root cause: fixed 88px/56px overflowed on narrow viewports; #page { overflow:hidden }
* (crocus-theme) clipped spill instead of wrapping. Fluid clamp + wrap guards below. */
.tt-faq,
.tt-legal,
.tt-glos,
#page.tt-newsroom,
#page.tt-about,
#page.tt-manifesto,
.tt-whats-new-page,
.tt-status-page {
--tt-corp-hero-title-size: clamp(28px, 5.5vw + 0.75rem, 88px);
}
.corp-page .inner-page-hero .section-title {
max-width: 100%;
min-width: 0;
}
.tt-faq .corp-page .section-title .corp-page__title,
.tt-legal .corp-page .section-title .corp-page__title,
.tt-glos .corp-page .section-title .corp-page__title,
#page.tt-newsroom .corp-page .section-title .corp-page__title,
#page.tt-about .corp-page .section-title .corp-page__title,
#page.tt-manifesto .corp-page .section-title .corp-page__title,
.tt-wn-hero__title,
.tt-status-page-title {
font-size: var(--tt-corp-hero-title-size, clamp(28px, 5.5vw + 0.75rem, 88px));
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 700;
max-width: 100%;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
/* [ADD] 2026-05-11 — Acknowledgements list. Slight wider gap between
* items than the default body ul, since each line cites a project +
* license link and is information-dense. */
.corp-page .corp-page__list {
margin: 0 0 18px 0;
padding-left: 22px;
list-style: disc;
}
.corp-page .corp-page__list li {
margin: 0 0 8px 0;
font-size: 14px;
line-height: 1.65;
color: var(--tt-fg-0);
}
.corp-page .corp-page__list li strong {
font-weight: 600;
}
.corp-page .corp-page__list a {
color: var(--tt-fg-0);
text-decoration: underline;
}
.corp-page .corp-page__list a:hover {
opacity: 0.75;
}
.corp-page .corp-page__body h3 {
font-size: 18px;
line-height: 1.4;
margin: 22px 0 10px;
color: var(--tt-fg-0);
}
.corp-page .corp-page__body code {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 14px;
padding: 1px 6px;
border-radius: 4px;
border: 1px solid rgba(120, 123, 134, 0.25);
background: transparent;
}
/* [FIX] 2026-05-14 (v2) — Mobile hamburger icon: full ☰ → ✕ rotation.
* Reason: responsive.css L1491-1493 and L2889-2891 (loaded AFTER menu.css)
* stomped on menu.css's correct X animation. responsive.css writes:
* .wsactive .wsanimated-arrow span:before { width: 28px; top: 0; }
* .wsactive .wsanimated-arrow span:after { width: 28px; top: 0; }
* but does NOT rotate them. Result: all three bars collapse to y=0
* stacked horizontally — user sees "☰ + X overlaid" (actually 3 flat
* bars on top of each other, no diagonal lines at all).
* Change: re-apply the menu.css rotation with !important so it wins
* the cascade race against responsive.css's incomplete rule. Also
* unifies dark + light theme color (white on dark hero, slate on light)
* and locks the close-state middle bar to transparent so the X is clean.
*
* [FIX] 2026-05-19 — light-theme hamburger color was #1a1a1a (dark grey)
* but `.wsmobileheader` background is locked to #000000 in light theme
* (see L1149). Dark icon on dark bg = invisible. Force white in BOTH
* themes since the header bar is now black in both.
*
* [FIX] 2026-05-19 (v3) — User requested: hamburger icon must be ALWAYS
* white, never tracking theme switches. Refactored selectors to NOT
* depend on `.theme--light` / `.theme--dark` classes at all, so the
* hamburger color is theme-agnostic by design. The `body` ancestor is
* kept only to win the cascade against `responsive.css` (loaded after
* this file) which sets `.theme--dark .wsanimated-arrow span { bg:
* #aaaaaa }` at specificity 0,2,2 inside `(max-width: 991px)` — our
* 0,2,3 + !important handily wins, regardless of which theme class is
* present on body. Header bar (`.wsmobileheader`) is locked to black
* in both themes (see L1149 and L862-866), so white is correct in
* 100% of cases. */
@media (max-width: 1279px) {
/* Close state — three horizontal bars, ALWAYS WHITE. The body prefix
* boosts specificity to 0,2,3 to defeat responsive.css's
* `.theme--dark .wsanimated-arrow span { background: #aaaaaa }`
* (0,2,2) without relying on theme class matching. !important is
* required because crocus-theme.css and other vendor sheets also
* touch this property without media-query gating. */
body #header .wsanimated-arrow span,
body #header .wsanimated-arrow span::before,
body #header .wsanimated-arrow span::after {
background-color: #ffffff !important;
}
/* Open state — middle bar disappears, top/bottom rotate to ✕.
* NOTE: menu.js attaches `.wsactive` to itself (not a descendant),
* so selectors must use `body.wsactive` (no space). The earlier draft
* mistakenly used `body .wsactive` (descendant combinator), which never
* matched because there is no `.wsactive` element inside . */
body.wsactive #header .wsanimated-arrow span {
background-color: transparent !important;
}
body.wsactive #header .wsanimated-arrow span::before {
top: 0 !important;
bottom: auto !important;
transform: rotate(45deg) !important;
-webkit-transform: rotate(45deg) !important;
}
body.wsactive #header .wsanimated-arrow span::after {
top: 0 !important;
bottom: auto !important;
transform: rotate(-45deg) !important;
-webkit-transform: rotate(-45deg) !important;
}
}
/* =====================================================================
[UPDATE 2026-05-14] TT home landing (#tt-home-landing) — follows theme.
Reason: prior LOCK (2026-05-11/12) forced #tt-home-landing to #000 in
both themes. With site-wide theme toggle, light theme users saw the
top of the page (hero block + transparent .tra-menu .wsmainfull on top)
permanently render black even after switching to light, because the
hero's #000 bled through the fixed navbar's transparent surface.
Change: keep dark-theme hero unchanged (preserves brand-night feel),
but paint the hero white-on-near-black-text in light theme so the
entire viewport tracks body.theme--*. The Explore-stack visual stays
centered with neutral chrome that works on either background.
Scope: only #tt-home-landing (homepage hero) — does not affect chart
page or marketing inner pages. */
/* --- Dark theme hero (preserves the original 2026-05-11 surface) --- */
body.theme--dark #tt-home-landing,
body.theme--dark #tt-home-landing.tt-ti-landing {
background: #000000 !important;
--tt-bg-0: #000000;
--tt-fg-0: #d0d0d0;
--tt-fg-1: #cccccc;
--tt-fg-2: #787b86;
--tt-line: #1e1e1e;
}
/* Dark stats strip — always white on #000 bar in every site theme. */
body.theme--light #tt-home-landing .tt-ti-landing__bar .tt-ti-landing__stat-num,
body.theme--dark #tt-home-landing .tt-ti-landing__bar .tt-ti-landing__stat-num,
body.theme--light #tt-home-landing .tt-ti-landing__bar .tt-ti-landing__stat-lbl,
body.theme--dark #tt-home-landing .tt-ti-landing__bar .tt-ti-landing__stat-lbl {
/* [EXCEPTION] dark strip on landing — always white on #000 bar */
color: #ffffff !important;
}
body.theme--light #tt-home-landing .tt-ti-landing__bar .tt-ti-landing__dl-btn,
body.theme--dark #tt-home-landing .tt-ti-landing__bar .tt-ti-landing__dl-btn {
/* [EXCEPTION] dark strip on landing — always white on #000 bar */
color: #ffffff !important;
}
body.theme--light #tt-home-landing .tz-btn--primary {
background: #ffffff !important; color: #000000 !important; border-color: #ffffff !important;
}
body.theme--light #tt-home-landing .tz-btn--primary:hover {
background: #cccccc !important; border-color: #cccccc !important; color: #000000 !important;
}
body.theme--light #tt-home-landing .tz-btn--ghost {
background: transparent !important; color: #ffffff !important; border-color: #1e1e1e !important;
}
body.theme--light #tt-home-landing .tz-btn--ghost:hover {
border-color: #ffffff !important; color: #ffffff !important;
}
body.theme--light #tt-home-landing .tt-ti-landing__bar {
background: #000000 !important; border-top-color: #1e1e1e !important;
}
body.theme--light #tt-home-landing .tt-ti-landing__bar-sep { background: #1e1e1e !important; }
body.theme--light #tt-home-landing .tt-ti-landing__bar-inner .tt-ti-landing__stat {
border-right-color: #1e1e1e !important;
}
/* Hero tagline stays white on dark nebula imagery in every site theme. */
body.theme--light #tt-home-landing #tt-home-tagline.tt-ti-landing__tagline,
body.theme--dark #tt-home-landing #tt-home-tagline.tt-ti-landing__tagline {
/* [EXCEPTION] hero tagline — fixed white, independent of --tt-fg-0. */
color: #ffffff !important;
}
/* Second-screen tagline + subtitle stay white on nebula imagery in every theme. */
body.theme--light #tt-home-landing #tt-home-second-screen h2.tt-ti-landing__second-tagline,
body.theme--dark #tt-home-landing #tt-home-second-screen h2.tt-ti-landing__second-tagline,
body.theme--light #tt-home-landing #tt-home-second-screen p.tt-ti-landing__second-subtitle,
body.theme--dark #tt-home-landing #tt-home-second-screen p.tt-ti-landing__second-subtitle {
/* [EXCEPTION] second-screen hero copy — fixed white, independent of --tt-fg-0. */
color: #ffffff !important;
}
/* =====================================================================
[UPDATE 2026-07-31] Header scroll states (TradingView-style).
Scope: all theme--dark / theme--light shell pages (home, apps, docs…).
Chart uses dark-theme/light-theme and is excluded.
Top (scroll=0): solid #000 navbar. Scrolled: transparent bar + top
gradient scrim so nav text stays readable over page content. */
body.theme--dark #header .header-wrapper::before,
body.theme--light #header .header-wrapper::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
height: 150px;
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.55) 0%,
rgba(0, 0, 0, 0.28) 45%,
rgba(0, 0, 0, 0) 100%
);
pointer-events: none;
z-index: -1;
opacity: 0;
transition: opacity 450ms ease-in-out;
}
body.theme--dark #header:has(.wsmainfull.scroll) .header-wrapper::before,
body.theme--light #header:has(.wsmainfull.scroll) .header-wrapper::before {
opacity: 1;
}
body.theme--dark #header .wsmainfull:not(.scroll),
body.theme--light #header .wsmainfull:not(.scroll) {
background-color: #000000 !important;
border-bottom: 1px solid #0a0a0a !important;
box-shadow: none !important;
}
body.theme--dark #header:has(.wsmainfull.scroll) .wsmainfull.scroll,
body.theme--light #header:has(.wsmainfull.scroll) .wsmainfull.scroll {
background-color: transparent !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none !important;
box-shadow: none !important;
}
@media (max-width: 1279px) {
body.theme--dark #header .wsmobileheader,
body.theme--light #header .wsmobileheader {
background-color: #000000 !important;
}
body.theme--dark #header:has(.wsmainfull.scroll) .wsmobileheader,
body.theme--light #header:has(.wsmainfull.scroll) .wsmobileheader {
background-color: transparent !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
body.theme--dark #tt-home-landing .tt-ti-landing__shot-frame {
border-color: #1e1e1e !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 32px 64px -16px rgba(0, 0, 0, 0.7),
0 14px 24px -8px rgba(0, 0, 0, 0.45) !important;
}
body.theme--light #tt-home-landing .tt-ti-landing__shot-frame {
border-color: #1e1e1e !important;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.06) inset,
0 32px 64px -16px rgba(0, 0, 0, 0.7),
0 14px 24px -8px rgba(0, 0, 0, 0.45) !important;
}
body.theme--dark #tt-home-landing .tt-ti-landing__shot-plate--rear {
border-color: rgba(41, 98, 255, 0.48) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)) !important;
box-shadow:
0 0 0 1px rgba(41, 98, 255, 0.2) !important,
0 0 32px rgba(41, 98, 255, 0.32) !important,
0 0 64px rgba(41, 98, 255, 0.18) !important,
0 0 112px rgba(41, 98, 255, 0.08) !important,
inset 0 1px 0 rgba(255, 255, 255, 0.14) !important,
0 22px 40px -14px rgba(0, 0, 0, 0.58) !important;
}
body.theme--dark #tt-home-landing .tt-ti-landing__visual:hover .tt-ti-landing__shot-plate--rear {
border-color: rgba(41, 98, 255, 0.78) !important;
opacity: 0.82 !important;
box-shadow:
0 0 0 1px rgba(41, 98, 255, 0.38) !important,
0 0 42px rgba(41, 98, 255, 0.48) !important,
0 0 88px rgba(41, 98, 255, 0.28) !important,
0 0 160px rgba(41, 98, 255, 0.12) !important,
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important,
0 28px 48px -14px rgba(0, 0, 0, 0.48) !important;
}
/* [FIX] 2026-05-14 (v6) — landing 区不跟随主题，light 主题下星云配色
必须与 dark 完全一致，否则切到 light 时颜色被冲淡发白。 */
body.theme--light #tt-home-landing .tt-ti-landing__shot-plate--rear {
border-color: rgba(41, 98, 255, 0.48) !important;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)) !important;
box-shadow:
0 0 0 1px rgba(41, 98, 255, 0.2) !important,
0 0 32px rgba(41, 98, 255, 0.32) !important,
0 0 64px rgba(41, 98, 255, 0.18) !important,
0 0 112px rgba(41, 98, 255, 0.08) !important,
inset 0 1px 0 rgba(255, 255, 255, 0.14) !important,
0 22px 40px -14px rgba(0, 0, 0, 0.58) !important;
}
body.theme--light #tt-home-landing .tt-ti-landing__visual:hover .tt-ti-landing__shot-plate--rear {
border-color: rgba(41, 98, 255, 0.78) !important;
opacity: 0.82 !important;
box-shadow:
0 0 0 1px rgba(41, 98, 255, 0.38) !important,
0 0 42px rgba(41, 98, 255, 0.48) !important,
0 0 88px rgba(41, 98, 255, 0.28) !important,
0 0 160px rgba(41, 98, 255, 0.12) !important,
inset 0 1px 0 rgba(255, 255, 255, 0.2) !important,
0 28px 48px -14px rgba(0, 0, 0, 0.48) !important;
}
/* [ADD] 2026-05-12 — /pricing comparison table (single source of truth)
Reason: previous 4-card layout duplicated every feature per tier and
gave no clear way to see ✓ / ✗ across plans. Replaced with one
comparison table — left column = full feature list, right four
columns = plan availability per tier.
v3 (2026-05-12): theme-aware text colours. pricing.ejs is excluded from
tradeiz-home --tt-fg-* variables (those are scoped to .tt-home /
.tt-agg only), so we drive colours from .theme--light / .theme--dark
directly to guarantee both themes render readable text. */
/* [ADD] 2026-05-13 — /pricing top CTA card
Reason: replaces the bottom pt-100 pb-100 banner-1 section (~260px tall
with s-45 huge heading) with a compact top-of-page card that
still hosts the primary CTA but lives above the comparison
table rather than at the very bottom.
Layout: panel spans full .container width; inner content uses
justify-content: center so heading + CTA cluster sit in the
middle of the card with comfortable side gutters instead of
being pushed to the two edges via space-between.
Visual: plain white (light) / subtle translucent (dark) background —
no gradients or accent glow — neutral grey pill badges, single
blue CTA button as the only colour accent, plus a small
secondary "Compare plans →" link.
Placement: above section-title, inside .inner-page-hero (180px top
pad already provides breathing room below site header). */
/* Two-column horizontal layout: copy block on the left (heading + single-line
lead with inline middot badge), CTA cluster on the right (button + small
secondary link). Wide silhouette, single visual row — avoids the stubby
stacked look. */
#pricing-1 .tt-pricing-topcta {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 24px 56px;
margin-bottom: 56px;
padding: 28px 36px;
border: 1px solid rgba(120, 123, 134, 0.20);
}
.theme--light #pricing-1 .tt-pricing-topcta {
background: transparent;
border-color: rgba(0, 0, 0, 0.18);
}
.theme--dark #pricing-1 .tt-pricing-topcta {
background: transparent;
border-color: rgba(255, 255, 255, 0.20);
}
#pricing-1 .tt-pricing-topcta__copy {
flex: 1 1 auto;
min-width: 0;
max-width: 680px;
}
#pricing-1 .tt-pricing-topcta__title {
margin: 0 0 12px 0;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--tt-fg-0);
}
/* Three-line value-prop list under the title. Uses a thin vertical
accent bar instead of bullet dots so the points read as compact,
on-brand statements without visual clutter. */
#pricing-1 .tt-pricing-topcta__points {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
#pricing-1 .tt-pricing-topcta__points li {
position: relative;
padding-left: 14px;
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: var(--tt-fg-0);
}
#pricing-1 .tt-pricing-topcta__points li::before {
content: "";
position: absolute;
left: 0;
top: 0.45em;
width: 4px;
height: 4px;
border-radius: 50%;
background: #2962ff;
}
#pricing-1 .tt-pricing-topcta__actions {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
#pricing-1 .tt-pricing-topcta__price {
display: inline-flex;
align-items: baseline;
gap: 4px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
line-height: 1;
color: var(--tt-fg-0);
}
#pricing-1 .tt-pricing-topcta__price-zero {
font-size: 22px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
#pricing-1 .tt-pricing-topcta__note {
font-size: 12px;
font-weight: 400;
line-height: 1.3;
letter-spacing: 0.01em;
white-space: nowrap;
}
#pricing-1 .tt-pricing-topcta__note { color: var(--tt-fg-0); opacity: 0.62; }
@media (max-width: 767px) {
#pricing-1 .tt-pricing-topcta {
margin-bottom: 40px;
padding: 24px 22px;
gap: 20px;
}
#pricing-1 .tt-pricing-topcta__title { font-size: 22px; margin-bottom: 10px; }
#pricing-1 .tt-pricing-topcta__copy { flex: 1 1 100%; max-width: none; }
#pricing-1 .tt-pricing-topcta__actions {
width: 100%;
align-items: center;
}
}
/* Section title under .pricing-section — make heading & sub copy theme-aware */
.theme--light #pricing-1 .section-title h2 { color: #0d0f12; }
.theme--dark #pricing-1 .section-title h2 { color: #ffffff; }
.theme--light #pricing-1 .section-title > p { color: rgba(0,0,0,0.62); }
.theme--dark #pricing-1 .section-title > p { color: rgba(255,255,255,0.65); }
.theme--light #pricing-1 .toggle-btn .toggler-txt { color: #0d0f12; }
.theme--dark #pricing-1 .toggle-btn .toggler-txt { color: #ffffff; }
/* Override the 'Save about 17%' tag which inherits .color--theme purple/white */
.theme--dark #pricing-1 .toggle-btn p.color--theme { color: #4d8bff !important; }
.theme--light #pricing-1 .toggle-btn p.color--theme { color: #0d0f12 !important; }
#pricing-1 .tt-plan-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid rgba(120, 123, 134, 0.22);
}
.theme--light #pricing-1 .tt-plan-table-wrap {
background: #ffffff;
border-color: rgba(0,0,0,0.10);
box-shadow: 0 12px 28px rgba(0,0,0,0.05);
}
/* Dark theme: keep page-black background, only use thin border + subtle
row dividers to delineate the table. No grey panel. */
.theme--dark #pricing-1 .tt-plan-table-wrap {
background: transparent;
border-color: rgba(255,255,255,0.12);
box-shadow: none;
}
#pricing-1 .tt-plan-table {
width: 100%;
min-width: 1080px;
border-collapse: collapse;
table-layout: fixed;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
#pricing-1 .tt-plan-table__col--feat { width: 24%; }
#pricing-1 .tt-plan-table__col--tier { width: 15.2%; }
/* API pricing uses four paid tiers + feature column (100% = 24 + 4×19). */
#pricing-1 .tt-plan-table--4tier .tt-plan-table__col--tier { width: 19%; }
#pricing-1 .tt-plan-table--4tier { min-width: 920px; }
/* Header row — fixed-height slots so all four columns align horizontally
regardless of which one carries the "Most popular" badge.
Layout slots top-down:
· badge 28px
· name 28px
· price 56px
· CTA 44px
The featured column places its badge at the top of the same slot, so
none of the other rows shift down. */
#pricing-1 .tt-plan-table thead th {
padding: 24px 16px 22px;
vertical-align: top;
text-align: center;
background: transparent;
position: sticky;
top: 0;
z-index: 3;
}
.theme--light #pricing-1 .tt-plan-table thead th {
border-bottom: 1px solid rgba(0,0,0,0.08);
background: #ffffff;
}
.theme--dark #pricing-1 .tt-plan-table thead th {
border-bottom: 1px solid rgba(255,255,255,0.10);
background: #0d0f12;
}
.theme--light #pricing-1 .tt-plan-table__featured-head { background: rgba(41, 98, 255, 0.06) !important; }
.theme--dark #pricing-1 .tt-plan-table__featured-head { background: rgba(41, 98, 255, 0.10) !important; }
#pricing-1 .tt-plan-table__feat-head {
text-align: left !important;
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--tt-fg-0);
}
#pricing-1 .tt-plan-table__featured-head {
position: relative;
}
/* Plan-head structure: every column gets the same vertical layout slots,
so the price line, CTA line, and note line align across all four heads. */
#pricing-1 .tt-plan-head {
display: grid;
grid-template-rows:
[badge] 28px
[name] 28px
[price] minmax(56px, auto)
[save] 28px
[cta] 44px;
align-items: center;
justify-items: center;
row-gap: 5px;
width: 100%;
}
/* Most popular badge — pinned to the badge slot of its own column. */
/* [EXCEPTION] status badge — white label on brand-blue pill */
#pricing-1 .tt-plan-head__badge {
grid-row: badge;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 10px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
background: #2962ff;
color: #ffffff;
white-space: nowrap;
}
/* When badge sits as a sibling of .tt-plan-head (Pro column markup), pull it
into the same grid by re-anchoring via absolute positioning at the top of
the th. Other columns simply leave the badge slot empty. */
#pricing-1 .tt-plan-table__featured-head .tt-plan-head__badge {
position: absolute;
top: 24px;
left: 50%;
transform: translateX(-50%);
}
#pricing-1 .tt-plan-head__name {
grid-row: name;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
color: var(--tt-fg-0);
}
#pricing-1 .tt-plan-head__price {
grid-row: price;
display: flex;
flex-direction: column;
justify-content: center;
}
#pricing-1 .tt-plan-head__amount {
display: block;
line-height: 1;
}
#pricing-1 .tt-plan-head__amount span {
font-size: 22px;
font-weight: 700;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.theme--light #pricing-1 .tt-plan-head__amount,
.theme--light #pricing-1 .tt-plan-head__amount span,
.theme--light #pricing-1 .tt-plan-head__amount sup,
.theme--dark #pricing-1 .tt-plan-head__amount,
.theme--dark #pricing-1 .tt-plan-head__amount span,
.theme--dark #pricing-1 .tt-plan-head__amount sup { color: var(--tt-fg-0); }
#pricing-1 .tt-plan-head__amount sup {
font-size: 16px;
font-weight: 600;
vertical-align: super;
}
#pricing-1 .tt-plan-head__amount sup.validity {
font-size: 14px;
font-weight: 500;
opacity: 0.7;
margin-left: 4px;
}
/* [UPDATE] 2026-05-28 — move annual savings out of the price line.
User requested "Save $X" not to appear inside the amount area. We now
render a dedicated save-chip row between price and CTA. */
/* [EXCEPTION] funding-rate-style savings chip highlight colors */
#pricing-1 .tt-plan-head__save-chip {
grid-row: save;
display: inline-block;
width: fit-content;
justify-self: center;
padding: 5px 11px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
background: rgba(252, 213, 53, 0.16);
color: #fcd535;
border: 1px solid rgba(252, 213, 53, 0.42);
}
/* [EXCEPTION] funding-rate-style savings chip — dark theme */
.theme--dark #pricing-1 .tt-plan-head__save-chip {
background: rgba(252, 213, 53, 0.16);
color: #fcd535;
border-color: rgba(252, 213, 53, 0.42);
}
/* [EXCEPTION] funding-rate-style savings chip — light theme */
.theme--light #pricing-1 .tt-plan-head__save-chip {
background: rgba(245, 158, 11, 0.14);
color: #b45309;
border-color: rgba(245, 158, 11, 0.50);
}
.price1.tt-plan-head__save-chip { display: none; }
#pricing-1 .tt-plan-head__cta {
grid-row: cta;
width: 100%;
max-width: 200px;
font-size: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#pricing-1 .tt-plan-head__cta--free {
border: 1px solid rgba(120, 123, 134, 0.36);
border-radius: 10px;
font-weight: 600;
letter-spacing: 0.02em;
min-height: 44px;
padding: 10px 12px;
}
.theme--light #pricing-1 .tt-plan-head__cta--free,
.theme--dark #pricing-1 .tt-plan-head__cta--free {
color: var(--tt-fg-0);
}
.theme--light #pricing-1 .tt-plan-head__cta--free {
background: rgba(0, 0, 0, 0.03);
}
.theme--dark #pricing-1 .tt-plan-head__cta--free {
background: rgba(255, 255, 255, 0.05);
}
#pricing-1 .tt-plan-head__cta--free.is-current-plan {
border-color: rgba(41, 98, 255, 0.55);
box-shadow: inset 0 0 0 1px rgba(41, 98, 255, 0.2);
}
/* Body rows */
#pricing-1 .tt-plan-table tbody th[scope="row"] {
text-align: left;
padding: 14px 16px;
font-size: 14px;
font-weight: 500;
background: transparent;
}
.theme--light #pricing-1 .tt-plan-table tbody th[scope="row"],
.theme--dark #pricing-1 .tt-plan-table tbody th[scope="row"] {
color: var(--tt-fg-0);
}
.theme--light #pricing-1 .tt-plan-table tbody th[scope="row"] {
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.theme--dark #pricing-1 .tt-plan-table tbody th[scope="row"] {
border-bottom: 1px solid rgba(255,255,255,0.08);
}
#pricing-1 .tt-plan-table tbody td {
text-align: center;
padding: 14px 12px;
font-size: 14px;
vertical-align: middle;
}
.theme--light #pricing-1 .tt-plan-table tbody td,
.theme--dark #pricing-1 .tt-plan-table tbody td {
color: var(--tt-fg-0);
}
.theme--light #pricing-1 .tt-plan-table tbody td {
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.theme--dark #pricing-1 .tt-plan-table tbody td {
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.theme--light #pricing-1 .tt-plan-table tbody tr:hover th[scope="row"],
.theme--light #pricing-1 .tt-plan-table tbody tr:hover td {
background: rgba(41, 98, 255, 0.04);
}
.theme--dark #pricing-1 .tt-plan-table tbody tr:hover th[scope="row"],
.theme--dark #pricing-1 .tt-plan-table tbody tr:hover td {
background: rgba(41, 98, 255, 0.10);
}
/* Featured (Pro) column highlight */
.theme--light #pricing-1 .tt-plan-cell--featured { background: rgba(41, 98, 255, 0.06); }
.theme--dark #pricing-1 .tt-plan-cell--featured { background: rgba(41, 98, 255, 0.10); }
/* Group rows */
#pricing-1 .tt-plan-table__group th {
text-align: left;
padding: 18px 16px 8px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--tt-fg-0);
opacity: 0.66;
}
.theme--light #pricing-1 .tt-plan-table__group th {
background: rgba(0,0,0,0.04);
border-top: 1px solid rgba(0,0,0,0.08);
border-bottom: 1px solid rgba(0,0,0,0.08);
}
.theme--dark #pricing-1 .tt-plan-table__group th {
background: transparent;
border-top: 1px solid rgba(255,255,255,0.10);
border-bottom: 1px solid rgba(255,255,255,0.10);
}
#pricing-1 .tt-plan-table__group--sub th {
padding: 12px 16px 6px 24px;
font-size: 12px;
letter-spacing: 0.08em;
text-transform: none;
}
.theme--light #pricing-1 .tt-plan-table__group--sub th {
color: var(--tt-fg-0);
background: rgba(0,0,0,0.02);
border-top: none;
}
.theme--dark #pricing-1 .tt-plan-table__group--sub th {
color: var(--tt-fg-0);
opacity: 0.75;
background: rgba(255,255,255,0.03);
border-top: none;
}
#pricing-1 .tt-plan-table__endpoint-row th[scope="row"] {
padding: 10px 16px 10px 24px;
font-size: 12px;
font-weight: 400;
}
#pricing-1 .tt-plan-endpoint {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
min-width: 0;
}
#pricing-1 .tt-plan-endpoint__name {
font-size: 14px;
font-weight: 500;
line-height: 1.35;
color: var(--tt-fg-0);
}
#pricing-1 .tt-plan-endpoint__route {
display: flex;
align-items: baseline;
gap: 8px;
width: 100%;
min-width: 0;
}
#pricing-1 .tt-plan-endpoint__method {
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--tt-fg-0);
opacity: 0.75;
}
#pricing-1 .tt-plan-endpoint__path {
flex: 1 1 auto;
min-width: 0;
font-family: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 12px;
line-height: 1.45;
color: var(--tt-fg-0);
background: rgba(127, 140, 170, 0.12);
padding: 3px 8px;
border-radius: 4px;
word-break: break-all;
}
.theme--light #pricing-1 .tt-plan-endpoint__path {
background: rgba(0, 0, 0, 0.06);
}
.theme--dark #pricing-1 .tt-plan-endpoint__path {
background: rgba(255, 255, 255, 0.08);
}
.theme--light #pricing-1 .tt-plan-table__endpoint-row:nth-child(even) th[scope="row"],
.theme--light #pricing-1 .tt-plan-table__endpoint-row:nth-child(even) td {
background: rgba(0, 0, 0, 0.015);
}
.theme--dark #pricing-1 .tt-plan-table__endpoint-row:nth-child(even) th[scope="row"],
.theme--dark #pricing-1 .tt-plan-table__endpoint-row:nth-child(even) td {
background: rgba(255, 255, 255, 0.02);
}
/* ✓ / ✗ glyphs */
#pricing-1 .tt-plan-cell-check,
#pricing-1 .tt-plan-cell-x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 50%;
font-size: 14px;
font-weight: 700;
line-height: 1;
}
/* ✓ uses the site brand blue (#2962ff — same as Pro badge / CTA);
✗ uses the chart-page down red (#ef5350 — pairs with #26a69a up green). */
#pricing-1 .tt-plan-cell-check {
background: rgba(41, 98, 255, 0.14);
color: #2962ff;
}
.theme--dark #pricing-1 .tt-plan-cell-check {
background: rgba(41, 98, 255, 0.20);
color: #4d8bff;
}
#pricing-1 .tt-plan-cell-x {
background: rgba(239, 83, 80, 0.14);
color: #ef5350;
}
.theme--dark #pricing-1 .tt-plan-cell-x {
background: rgba(239, 83, 80, 0.18);
color: #ef5350;
}
#pricing-1 .tt-plan-cell-num {
font-size: 14px;
font-weight: 700;
color: var(--tt-fg-0);
}
/* Footer CTA row */
#pricing-1 .tt-plan-table__foot-row td,
#pricing-1 .tt-plan-table__foot-row .tt-plan-table__feat-foot {
padding: 22px 12px 26px;
text-align: center;
vertical-align: middle;
}
#pricing-1 .tt-plan-table__feat-foot {
text-align: left !important;
padding-left: 16px !important;
font-size: 14px;
font-weight: 600;
color: var(--tt-fg-0);
}
#pricing-1 .tt-plan-foot-cta {
width: 100%;
max-width: 146px;
min-width: 124px;
font-size: 12px;
line-height: 1.15;
padding: 7px 8px;
white-space: nowrap;
}
#pricing-1 .tt-plan-foot-free {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 146px;
min-width: 124px;
min-height: 34px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
border: 1px solid rgba(120, 123, 134, 0.36);
}
.theme--light #pricing-1 .tt-plan-foot-free,
.theme--dark #pricing-1 .tt-plan-foot-free {
color: var(--tt-fg-0);
}
.theme--light #pricing-1 .tt-plan-foot-free {
background: rgba(0, 0, 0, 0.03);
}
.theme--dark #pricing-1 .tt-plan-foot-free {
background: rgba(255, 255, 255, 0.05);
}
#pricing-1 .tt-plan-foot-free.is-current-plan {
border-color: rgba(41, 98, 255, 0.55);
box-shadow: inset 0 0 0 1px rgba(41, 98, 255, 0.2);
}
#pricing-1 .tt-pricing-matrix-note {
margin-bottom: 0;
font-size: 14px;
color: var(--tt-fg-0);
opacity: 0.65;
}
.theme--light #pricing-1 .tt-pricing-matrix-note {
color: var(--tt-fg-0);
opacity: 0.65;
}
/* Responsive: keep table scrollable on small screens */
@media (max-width: 1199.98px) {
/* [FIX] 2026-05-28 — tablet layout stabilization for /pricing.
Root causes:
1) top CTA remained in desktop side-by-side mode on tablets, causing
a cramped two-column block.
2) tier CTA buttons (180px) were wider than each tier column in the
5-column comparison table, which caused overlap/clipping around
768–1199px.
Changes:
- Stack top CTA copy/actions on tablets.
- Use a wider tier-share ratio (18%) and compact CTA geometry (160x44)
to keep controls fully inside each column.
- Slightly reduce heading/price typography and table padding for
denser but readable tablet rendering. */
#pricing-1 .tt-pricing-topcta {
justify-content: flex-start;
gap: 18px;
}
#pricing-1 .tt-pricing-topcta__copy {
flex: 1 1 100%;
max-width: none;
}
#pricing-1 .tt-pricing-topcta__actions {
width: 100%;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 10px 14px;
}
#pricing-1 .tt-plan-table {
min-width: 1040px;
}
#pricing-1 .tt-plan-table__col--feat { width: 22%; }
#pricing-1 .tt-plan-table__col--tier { width: 15.6%; }
#pricing-1 .tt-plan-table thead th { padding: 20px 12px 18px; }
#pricing-1 .tt-plan-table tbody th[scope="row"] { padding: 12px 12px; }
#pricing-1 .tt-plan-table tbody td { padding: 12px 10px; }
#pricing-1 .tt-plan-head__amount span { font-size: 22px; }
#pricing-1 .tt-plan-head__amount sup { font-size: 14px; }
#pricing-1 .tt-plan-head__amount sup.validity { font-size: 12px; }
#pricing-1 .tt-plan-head__name { font-size: 14px; }
#pricing-1 .tt-plan-head__cta.tt-btn-skew--md {
width: 160px !important;
height: 44px !important;
max-width: 160px !important;
font-size: 14px;
letter-spacing: 0.2px;
clip-path: path('M10 5 H137 Q141 5 143 8 L153 33 Q156 38 151 40 H10 Q5 40 5 36 V10 Q5 5 10 5 Z');
}
}
@media (max-width: 767.98px) {
#pricing-1 .tt-pricing-topcta {
margin-bottom: 40px;
padding: 24px 22px;
gap: 20px;
}
#pricing-1 .tt-pricing-topcta__title { font-size: 22px; margin-bottom: 10px; }
#pricing-1 .tt-pricing-topcta__price-zero { font-size: 22px; }
#pricing-1 .tt-pricing-topcta__actions {
justify-content: center;
align-items: center;
gap: 10px;
}
#pricing-1 .tt-plan-table-wrap { border-radius: 0; }
#pricing-1 .tt-plan-table { min-width: 1040px; }
#pricing-1 .tt-plan-head__cta { max-width: 160px; }
#pricing-1 .tt-plan-foot-cta { max-width: 140px; }
}
/* Toggle button (monthly/yearly) — keep using existing pricing-toggle.js
selectors `.price1 / .price2`. We display them stacked inside the head. */
#pricing-1 .tt-plan-head__amount.price1 { display: none; }
#pricing-1 .tt-plan-head__amount.price2 { display: block; }
/* Pricing CTA buttons — override the global dark-grey .btn--theme so the
four plan CTAs and the Enterprise CTA all use the brand blue (#2962ff)
instead of #333. Scoped to #pricing-1 only so other pages keep the
neutral grey theme button. */
/* [EXCEPTION] CTA buttons — white label on brand-blue background */
#pricing-1 .tt-plan-head__cta.btn,
#pricing-1 .tt-plan-foot-cta.btn,
#pricing-1 .tt-pricing-extras-cta.btn {
background-color: #2962ff !important;
color: #ffffff !important;
border-color: transparent !important;
font-weight: 600;
letter-spacing: 0.02em;
transition: background-color 0.18s ease, transform 0.18s ease;
}
/* [UPDATE] 2026-05-28 — bottom "Choose" labels should be regular weight,
not bold, per user request. */
#pricing-1 .tt-plan-foot-cta.btn {
font-weight: 400;
letter-spacing: 0;
}
#pricing-1 .tt-plan-head__cta.btn:hover,
#pricing-1 .tt-plan-foot-cta.btn:hover,
#pricing-1 .tt-pricing-extras-cta.btn:hover,
#pricing-1 .tt-plan-head__cta.btn:focus-visible,
#pricing-1 .tt-plan-foot-cta.btn:focus-visible,
#pricing-1 .tt-pricing-extras-cta.btn:focus-visible {
background-color: #1e4dd6 !important;
color: #ffffff !important;
border-color: transparent !important;
}
/* [ADD] 2026-05-12 — Enterprise / billing notes side-by-side block (v2)
v2: equal 6/6 columns, vertically centred content, balanced inner padding,
eyebrow chip stays centred on the CTA card and left-aligned on notes. */
#pricing-1 .tt-pricing-extras {
margin-bottom: 24px;
}
#pricing-1 .tt-pricing-extras .tt-pricing-extras-card {
border: 1px solid rgba(120, 123, 134, 0.20);
box-sizing: border-box;
display: flex;
align-items: stretch;
min-height: 280px;
overflow: hidden;
}
.theme--dark #pricing-1 .tt-pricing-extras .tt-pricing-extras-card {
border-color: rgba(255, 255, 255, 0.10);
}
#pricing-1 .tt-pricing-extras .tt-pricing-extras-card__inner {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 18px;
padding: 48px 56px;
box-sizing: border-box;
}
@media (max-width: 1199.98px) {
#pricing-1 .tt-pricing-extras .tt-pricing-extras-card__inner { padding: 40px 44px; }
}
@media (max-width: 767.98px) {
#pricing-1 .tt-pricing-extras .tt-pricing-extras-card__inner { padding: 32px 28px; }
#pricing-1 .tt-pricing-extras .tt-pricing-extras-card { min-height: 0; }
}
/* CTA card — accented, centered */
.theme--light #pricing-1 .tt-pricing-extras-card--cta {
background: linear-gradient(135deg, rgba(41, 98, 255, 0.06), rgba(41, 98, 255, 0.02));
border-color: rgba(41, 98, 255, 0.25);
}
/* Dark theme: very subtle blue tint instead of grey panel — keeps the CTA
card feeling distinct without breaking the all-black aesthetic. */
.theme--dark #pricing-1 .tt-pricing-extras-card--cta {
background: linear-gradient(135deg, rgba(41, 98, 255, 0.08), rgba(41, 98, 255, 0.02));
border-color: rgba(41, 98, 255, 0.28);
}
#pricing-1 .tt-pricing-extras-card--cta .tt-pricing-extras-card__inner {
align-items: center;
text-align: center;
}
/* Notes card — softly framed, left-aligned but well padded.
Dark theme: stay on black with a thin border. */
.theme--light #pricing-1 .tt-pricing-extras-card--notes { background: #f7f8fa; }
.theme--dark #pricing-1 .tt-pricing-extras-card--notes {
background: transparent;
border-color: rgba(255,255,255,0.10);
}
#pricing-1 .tt-pricing-extras-card--notes .tt-pricing-extras-card__inner {
align-items: flex-start;
text-align: left;
}
/* Eyebrow chip */
#pricing-1 .tt-pricing-extras-eyebrow {
display: inline-block;
margin: 0;
font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
}
.theme--light #pricing-1 .tt-pricing-extras-eyebrow {
color: #2962ff;
background: rgba(41, 98, 255, 0.10);
}
.theme--dark #pricing-1 .tt-pricing-extras-eyebrow {
color: #4d8bff;
background: rgba(41, 98, 255, 0.14);
}
/* Title + lead text on CTA card */
#pricing-1 .tt-pricing-extras-title {
margin: 0;
font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
color: var(--tt-fg-0);
}
#pricing-1 .tt-pricing-extras-lead {
margin: 0;
max-width: 460px;
font-size: 14px;
line-height: 1.6;
}
#pricing-1 .tt-pricing-extras-lead { color: var(--tt-fg-0); opacity: 0.66; }
/* CTA button: do NOT stretch */
#pricing-1 .tt-pricing-extras-cta {
align-self: center;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
font-size: 14px;
margin-top: 4px;
}
/* Notes list */
#pricing-1 .tt-pricing-notes {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
width: 100%;
}
#pricing-1 .tt-pricing-notes li {
position: relative;
padding: 0 0 0 22px;
margin: 0;
font-size: 14px;
line-height: 1.55;
}
#pricing-1 .tt-pricing-notes li { color: var(--tt-fg-0); opacity: 0.72; }
#pricing-1 .tt-pricing-notes li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(41, 98, 255, 0.75);
}
/* ===========================================================================
tt-btn-skew — reusable shaped CTA button (2026-05-13)
---------------------------------------------------------------------------
Site-wide CTA component with a soft down-skew silhouette. The shape is
produced by `clip-path: path()` on a standard /