/* ========================================================================== V1 — current look. Unchanged, still the default. ========================================================================== */ /* Launch App primary CTA in topbar: light pink background needs black text */ #topbar-cta-button a, #topbar-cta-button a span, #topbar-cta-button a svg { color: #000000 !important; } /* ========================================================================== V2 — the RISE app's design-v2 language, applied to the docs. Opt-in. Enabled by v2-flag.js, which sets data-docs-v2 on (?v2=1 / ?v2=0) and injects the Rubik stylesheet only when the flag is on. Every rule below is scoped to :root[data-docs-v2], so v1 is never touched. Derived from the app running on client/test: tokens from src/app/globals.css [data-design="v2"], behaviour from the v2 components, and colour budget measured off screenshots of /, /faq, /leaderboard and /portfolio. The defining property of that UI is RESTRAINT — accent covers 0.08-0.26% of a page; structure comes from 1px hairlines and a three-rung surface ladder whose steps are 4 and 3 RGB units apart, never from fill contrast. Hierarchy is carried by white/grey, not by colour. Selectors were verified against the DOM Mintlify actually renders. Mintlify emits NO custom element tags — everything is a class, an id or a data-attribute. Do not add bare-element selectors like `card` or `callout`. ========================================================================== */ :root[data-docs-v2] { /* --- app v2 tokens (source of truth) --------------------------------- uponly-mvp-front-end src/app/globals.css, [data-design="v2"] block. */ --rise-bg: #0c0c0c; --rise-surface: #101010; --rise-surface-2: #131315; --rise-surface-3: #191919; --rise-border: #1c1c1c; --rise-border-2: #212123; --rise-border-3: #2b2b2b; /* Text ladder, named by ROLE. The app's own names invert — its "muted" (#979797) is LIGHTER than its "secondary" (#707070) — so copying those names into the docs guarantees a mistake: --rise-text headings, emphasis, active labels #ffffff --rise-text-muted prose + interactive-chrome-at-rest #979797 --rise-text-dim micro-labels, metadata, non-clickable #707070 Prose sits on the MIDDLE rung, not the bottom one. The app's #707070 body is a two-line FAQ answer; docs prose is paragraphs, and #707070 on #0c0c0c is 3.9:1 — below AA. #979797 is 6.7:1 and is still an app token. */ --rise-text: #ffffff; --rise-text-muted: #979797; --rise-text-dim: #707070; /* One accent. --accent-cta and --accent-interactive are both #7fceff in the app; the #fdc5c1 literals still in the TSX are v1 leftovers the var overrides — never reproduce them here. */ --rise-accent: #7fceff; --rise-accent-fill: #7fceff; --rise-accent-on-fill: #000000; /* an accent fill ALWAYS carries black */ --rise-accent-soft: rgba(127, 206, 255, 0.12); /* Badge tint constant */ /* Semantic pair. Strictly semantic — never decorative. The app's alpha recipe for a semantic surface is fill 10% / border 25% (error Card, ProfilePanelV2 disconnect, CreatedTokenCardV2 copied state). */ --rise-success: #66f48e; --rise-success-fill: rgba(102, 244, 142, 0.1); --rise-success-line: rgba(102, 244, 142, 0.25); --rise-danger: #f63c6b; --rise-danger-fill: rgba(246, 60, 107, 0.1); --rise-danger-line: rgba(246, 60, 107, 0.25); /* Hover on a surface is a white wash, never a tint shift and never accent: 2% for a row hover, 6% for selected-within-a-track. */ --rise-wash: rgba(255, 255, 255, 0.02); --rise-wash-strong: rgba(255, 255, 255, 0.06); --rise-radius-sm: 6px; --rise-radius-md: 12px; --rise-radius-lg: 16px; --rise-radius-pill: 999px; /* Motion: colour 150ms (Tailwind default, declared but never tuned in the app), and 200ms for the single elevation move on a card. */ --rise-t-color: 150ms ease; --rise-t-card: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* Rubik with a CJK fallback stack — Rubik ships no CJK glyphs and the /zh tree must not fall through to an arbitrary system face. */ --rise-font: "Rubik", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; /* Mintlify sets the family ON the heading/body elements, so inheritance from `body` never reaches them — these two slots are the real hook. */ --font-family-body-custom: var(--rise-font); --font-family-headings-custom: var(--rise-font); /* --- Mintlify theme variables (space-separated RGB channels) --- --primary = accent used in LIGHT mode --primary-light = accent used in DARK mode --primary-dark = darker shade, used for filled buttons Left pointing at the accent so Mintlify internals (search highlight, form controls) stay in-palette. Everywhere the docs should NOT be accent is overridden explicitly below rather than by neutralising these — a white --primary-light would make Mintlify's accent-as-background cases render white-on-white. */ --primary: 10 107 166; /* #0a6ba6 */ --primary-light: 127 206 255; /* #7fceff */ --primary-dark: 10 107 166; /* #0a6ba6 */ --background-dark: 12 12 12; /* #0c0c0c */ --background-light: 255 255 255; } /* Light mode. The app's v2 is dark-only, so this is a docs-side derivation, not a match: the neutral ladder inverts and the accent darkens until a white label on it clears AA (#0a6ba6 on white = 5.7:1; #7fceff would be 4.3:1 as text and a 1.5:1 chip against the page). Only this block changes — every rule below is token-only, so light follows for free. */ :root[data-docs-v2]:not(.dark) { --rise-bg: #ffffff; --rise-surface: #fafafa; --rise-surface-2: #f2f3f5; --rise-surface-3: #eceef1; --rise-border: #e5e6e9; --rise-border-2: #dcdee2; --rise-border-3: #c8cbd1; /* Same ROLES, inverted: -muted is the darker (prose) rung, -dim the lighter (label) rung. 7.2:1 and 5.1:1 on white. */ --rise-text: #0c0c0c; --rise-text-muted: #55585c; --rise-text-dim: #6b6e73; --rise-accent: #0a6ba6; --rise-accent-fill: #0a6ba6; --rise-accent-on-fill: #ffffff; --rise-accent-soft: rgba(10, 107, 166, 0.1); --rise-success: #10804a; --rise-success-fill: rgba(16, 128, 74, 0.1); --rise-success-line: rgba(16, 128, 74, 0.25); --rise-danger: #c62348; --rise-danger-fill: rgba(198, 35, 72, 0.1); --rise-danger-line: rgba(198, 35, 72, 0.25); --rise-wash: rgba(12, 12, 12, 0.03); --rise-wash-strong: rgba(12, 12, 12, 0.06); } /* --- Typography ----------------------------------------------------------- */ :root[data-docs-v2] body, :root[data-docs-v2] #navbar, :root[data-docs-v2] #sidebar, :root[data-docs-v2] #table-of-contents { font-family: var(--rise-font); } /* v2 headings top out at Medium (500) — the font ships 400/500/600 and there is no bold display weight anywhere in the app. Tracking is reset to 0: Mintlify applies -0.01em, the app applies none. */ :root[data-docs-v2] #page-title, :root[data-docs-v2] #content-area h1, :root[data-docs-v2] #content-area h2, :root[data-docs-v2] #content-area h3, :root[data-docs-v2] #content-area h4, :root[data-docs-v2] #content-area h5, :root[data-docs-v2] #content-area h6 { font-weight: 500; letter-spacing: 0; color: var(--rise-text); } /* Prose. Two calls in one rule: the colour moves onto the ladder (it was #a6a4a4 — warm-tinted, and every grey in the app is perfectly neutral), and the size drops 18/28 -> 16/26. The app's body is 14-16px; 18px made the docs read a full step airier than any app surface. */ :root[data-docs-v2] #content-area p, :root[data-docs-v2] #content-area li, :root[data-docs-v2] #content-area blockquote { color: var(--rise-text-muted); font-size: 16px; line-height: 26px; } :root[data-docs-v2] #content-area li::marker { color: var(--rise-text-dim); } /* Emphasis is white at Medium. Mintlify ships #faf8f8 at 600; v2 has no 600 for prose (it is reserved for numerics and CTA labels) and emphasis colour is pure #ffffff. */ :root[data-docs-v2] #content-area strong, :root[data-docs-v2] #content-area b { color: var(--rise-text); font-weight: 500; } /* The eyebrow above the page title. It was accent — the single most off-system thing on the page: the app has no accent kicker at all. Its equivalent is the micro-label signature (10-11px, uppercase, tracked, #707070, sitting directly above a white value) from TokenCardV2 / ProfilePanelV2. */ :root[data-docs-v2] .eyebrow { color: var(--rise-text-dim); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; } :root[data-docs-v2] #content-area blockquote { border-left: 1px solid var(--rise-border-2); } /* --- Chrome: background, navbar -------------------------------------------- */ :root[data-docs-v2] body, :root[data-docs-v2] #background-color { background-color: var(--rise-bg); } /* HeaderV2: sticky, page bg at 0.90 + backdrop-blur-sm, and the ONE place the brightest border rung is correct — border-b #2b2b2b. (Was #212123/blur 6px.) The app frame is the only job --border-3 does besides a real text field and the card hover state. */ :root[data-docs-v2].dark #navbar, :root[data-docs-v2].dark #banner { background-color: rgba(12, 12, 12, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rise-border-3); } :root[data-docs-v2]:not(.dark) #navbar, :root[data-docs-v2]:not(.dark) #banner { background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rise-border-2); } /* --- Sidebar, tabs, anchors, TOC ------------------------------------------- */ /* Chrome at rest is #979797 and it resolves UPWARD TO WHITE — never to accent. Accent-on-hover is for actions (copy, claim, open); white-on-hover is for navigation and labels (HeaderV2 navLinkClass, AppShellV2 footer, Tabs). */ :root[data-docs-v2] #navbar .navbar-link, :root[data-docs-v2] #sidebar a, :root[data-docs-v2] #table-of-contents a { color: var(--rise-text-muted); transition: color var(--rise-t-color); } :root[data-docs-v2] #navbar .navbar-link:hover, :root[data-docs-v2] #sidebar a:hover, :root[data-docs-v2] #table-of-contents a:hover { color: var(--rise-text); } /* The rail had border-width: 0, so the 288px sidebar floated with no edge and Mintlify's residual #2d2b2b showed through on unstyled corners. In the app every panel is bounded by a hairline; structure comes from 1px lines, not from fill contrast. */ :root[data-docs-v2] #sidebar { border-right: 1px solid var(--rise-border); } /* Active page: pill on surface-2 with a white label — the v2 selection signature (pill + text colour, never an accent fill; HomeFilterTabs' active and inactive states are byte-identical except the text colour). data-active sits on the

) and Tailwind puts blue-300 / amber-300 directly on it, so every text node has to be normalised. `:where()` contributes 0 specificity, keeping this at (0,3,0): above Tailwind's utilities, below the link rule, and it never touches the itself, not on Mintlify's wrapper: the wrapper is a display:table box (Tailwind's `.table` utility), so overflow declarations on it are inert and its full-bleed width pushes the side borders off-screen at mobile widths. Horizontal scrolling is already handled by an overflow-x:scroll ancestor, and since `overflow` is inert on a display:table box the thead fill is clipped to the radius by rounding the corner cells instead. */ :root[data-docs-v2] #content-area table { background-color: var(--rise-surface); border: 1px solid var(--rise-border); border-radius: var(--rise-radius-lg); } :root[data-docs-v2] #content-area thead tr > th:first-child { border-top-left-radius: var(--rise-radius-lg); } :root[data-docs-v2] #content-area thead tr > th:last-child { border-top-right-radius: var(--rise-radius-lg); } /* The header fill goes on the cells, not on : border-radius does not apply to a table-header-group, so a fill there would square off outside the table's rounded corners. */ :root[data-docs-v2] #content-area thead th { background-color: var(--rise-surface-2); color: var(--rise-text); font-weight: 500; } /* Mintlify's prose reset zeroes padding-left on the first column and padding-top on thead — harmless in a borderless table, but once the table gained a border and a header band the first column's text sat flush on the border and the band collapsed to 29px. The app's interior padding is 12-16px (Card padding md = 16). An id in the selector plus being unlayered beats the prose utility outright. */ :root[data-docs-v2] #content-area :is(th, td) { padding: 12px 16px; border-color: var(--rise-border); } :root[data-docs-v2] #content-area td { color: var(--rise-text-muted); } /* Zebra striping is gone. rgba(255,255,255,0.015) is not a value in the surface ladder and is ~0.4 RGB steps — invisible at 1440px. The app's own tables have no zebra and no dividers on the leaderboard; the data tables that do divide use a 1px --border rule and a one-rung hover (PositionsPanelV2 `hover:bg-[var(--surface-2,#131315)]`). */ :root[data-docs-v2] #content-area tbody tr { background-color: transparent; transition: background-color var(--rise-t-color); } :root[data-docs-v2] #content-area tbody tr:hover { background-color: var(--rise-surface-2); } :root[data-docs-v2] #content-area tbody tr:last-child :is(td, th) { border-bottom: 0; } :root[data-docs-v2] #content-area hr { border-color: var(--rise-border); } /* --- Pagination, footer, badges -------------------------------------------- */ :root[data-docs-v2] .pagination-prev, :root[data-docs-v2] .pagination-next { background-color: var(--rise-surface); border: 1px solid var(--rise-border); border-radius: var(--rise-radius-md); padding: 0.5rem 0.875rem; font-weight: 500; /* was 600 — v2 reserves 600 for numerics and CTA labels */ transition: border-color var(--rise-t-color), color var(--rise-t-color); } /* These must out-specify `#content-area a:not(.card)` above, which would otherwise underline them and hand them the prose colour. #footer is itself a descendant of #content-area, so it needs the same two-id prefix. */ :root[data-docs-v2] #footer a, :root[data-docs-v2] #content-area #pagination a, :root[data-docs-v2] #content-area #footer a { color: var(--rise-text-muted); text-decoration: none; } :root[data-docs-v2] #footer a:hover, :root[data-docs-v2] #content-area #pagination a:hover, :root[data-docs-v2] #content-area #footer a:hover { color: var(--rise-text); } /* NOT accent. A card-shaped control hovers one border rung — #1c1c1c -> #2b2b2b — and stops there; the app has hover:border-accent in its codebase and deliberately does not use it on cards. */ :root[data-docs-v2] #pagination a:hover { border-color: var(--rise-border-3); } :root[data-docs-v2] #footer { border-color: var(--rise-border); color: var(--rise-text-dim); } /* KEPT ACCENT (5 of 5). Badge.tsx accent variant: a 12% tint carrying accent-coloured text, at 12px/500. This is the only way accent is ever allowed to become a background behind text, and 0.12 is the app's literal constant across all three Badge variants. */ :root[data-docs-v2] .nav-tag-pill { background-color: var(--rise-accent-soft); border: none; border-radius: var(--rise-radius-pill); color: var(--rise-accent); font-size: 12px; font-weight: 500; } /* --- Focus ring ------------------------------------------------------------ */ /* The one place accent is mandatory and uniform. The app's string is ring-2 + ring-offset-2 + ring-offset-[var(--bg)]; outline-offset against the page background is the CSS equivalent. Never visible with a mouse. */ :root[data-docs-v2] a:focus-visible, :root[data-docs-v2] button:focus-visible, :root[data-docs-v2] summary:focus-visible, :root[data-docs-v2] input:focus-visible, :root[data-docs-v2] [tabindex]:focus-visible { outline: 2px solid var(--rise-accent); outline-offset: 2px; } /* An input takes the same ring on focus-within (Input.tsx). This is the only accent an input is allowed — its rest and hover states stay neutral. */ :root[data-docs-v2] #search-bar-entry:focus-within { outline: 2px solid var(--rise-accent); outline-offset: 2px; }

​Logo

渐变

黑色

白色

​文字标

黑色

白色

渐变

​配色

Logo

文字标

配色