Haozhe Wu
a7f645f368
Each section carried its own copy of the header: Home's nav had no Home, the docs' nav had no Docs, the research post had no star or theme button, and the generated Alpha Library pages had no header at all. Only the docs could switch language, and they guessed Chinese from the browser while every other page stayed English. - partials/ holds one head block, header and footer; sync_site_chrome.py writes them into every page between markers and, with --check in CI, also requires <body data-section> (the current section is highlighted by CSS), the language attributes and a single ?v= token site-wide. The Alpha Library generator inserts the same partials. - site.js is the shared shell (theme, stars, language, footer traffic on home only). English is the HTML; Chinese comes from locales/zh.json via data-i18n hooks, and check_i18n.py fails on a key with no Chinese or a Chinese string nothing uses. A URL that names a language (/docs/zh/, the two articles) shows it and remembers it; everything else follows the stored choice, English by default. theme-init.js keeps a page hidden until its Chinese text is in, so it never flashes English. - English tutorial and Chinese research post added. The Chinese tutorial gets the corrections its translation surfaced: 462 alphas in five zoos, AAPL.US, the mandate caps trades per day (it has no daily loss limit), Shadow Account extracts up to five rules, the web UI needs Docker or a checkout. - Alpha Library: the zoo pages were never deployed — content/ is gitignored and nothing built it, so every zoo link served the root redirect. The deploy now exports the manifest and renders the pages (and redeploys when agent/src/factors changes); the fifth zoo, fundamental, is listed; generated pages allow same-origin scripts only. - Phones keep the nav as a scrollable row instead of hiding it.
687 lines
11 KiB
CSS
687 lines
11 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
--bg: #f7f8f4;
|
|
--surface: #ffffff;
|
|
--surface-2: #eff3ea;
|
|
--ink: #171b1a;
|
|
--muted: #606962;
|
|
--line: #d9ded2;
|
|
--accent: #0b8f70;
|
|
--accent-2: #d47719;
|
|
--accent-3: #2366a8;
|
|
--danger: #b0413e;
|
|
--shadow: 0 22px 60px rgba(24, 32, 28, 0.12);
|
|
--mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
--sans: "IBM Plex Sans", system-ui, sans-serif;
|
|
--serif: "Fraunces", Georgia, serif;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
--bg: #101312;
|
|
--surface: #171b19;
|
|
--surface-2: #202821;
|
|
--ink: #f2f4ec;
|
|
--muted: #a8b1a9;
|
|
--line: #313a33;
|
|
--accent: #35c99b;
|
|
--accent-2: #f0a04c;
|
|
--accent-3: #6faee7;
|
|
--danger: #ff8a7b;
|
|
--shadow: 0 22px 70px rgba(0, 0, 0, 0.38);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background:
|
|
linear-gradient(90deg, rgba(11, 143, 112, 0.08) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(35, 102, 168, 0.06) 1px, transparent 1px),
|
|
var(--bg);
|
|
background-size: 44px 44px, 44px 44px, auto;
|
|
color: var(--ink);
|
|
font-family: var(--sans);
|
|
font-size: 16px;
|
|
line-height: 1.55;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
button {
|
|
font: inherit;
|
|
}
|
|
|
|
.site-header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 30;
|
|
border-bottom: 1px solid transparent;
|
|
background: color-mix(in srgb, var(--bg) 82%, transparent);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
|
|
.site-header.is-scrolled {
|
|
border-color: var(--line);
|
|
}
|
|
|
|
.site-header__inner,
|
|
.site-footer {
|
|
width: min(1180px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.site-header__inner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
min-height: 72px;
|
|
gap: 24px;
|
|
}
|
|
|
|
.brand,
|
|
.site-actions,
|
|
.site-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.brand {
|
|
gap: 12px;
|
|
min-width: max-content;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.brand__mark {
|
|
width: 38px;
|
|
height: 38px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.brand__text {
|
|
font-family: var(--serif);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.site-nav {
|
|
gap: 24px;
|
|
color: var(--muted);
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.site-nav a:hover {
|
|
color: var(--ink);
|
|
}
|
|
|
|
/* The current section, from <body data-section> (no script needed). */
|
|
body[data-section="home"] .site-nav [data-nav="home"],
|
|
body[data-section="docs"] .site-nav [data-nav="docs"],
|
|
body[data-section="tutorials"] .site-nav [data-nav="tutorials"],
|
|
body[data-section="alpha"] .site-nav [data-nav="alpha"],
|
|
body[data-section="lab"] .site-nav [data-nav="lab"] {
|
|
color: var(--ink);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--accent);
|
|
text-decoration-thickness: 2px;
|
|
text-underline-offset: 8px;
|
|
}
|
|
|
|
.lang-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 38px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
padding: 0 12px;
|
|
font: 700 0.86rem var(--sans);
|
|
white-space: nowrap;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.lang-pill:hover {
|
|
border-color: var(--accent);
|
|
}
|
|
|
|
/* A reader who chose Chinese never sees the English text flash first
|
|
(theme-init.js sets this; site.js or a 1.5 s timeout clears it). */
|
|
html[data-lang-pending] body {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.site-actions {
|
|
gap: 10px;
|
|
}
|
|
|
|
.star-pill,
|
|
.icon-button,
|
|
.button,
|
|
.tabs button {
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
color: var(--ink);
|
|
}
|
|
|
|
.star-pill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 38px;
|
|
padding: 0 12px;
|
|
font-family: var(--mono);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.star-pill strong {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.icon-button {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 38px;
|
|
height: 38px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.theme-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid var(--ink);
|
|
border-radius: 50%;
|
|
box-shadow: inset -5px -5px 0 var(--ink);
|
|
}
|
|
|
|
:root[data-theme="dark"] .theme-icon {
|
|
box-shadow: inset 5px 0 0 var(--ink);
|
|
}
|
|
|
|
.hero,
|
|
.install-band,
|
|
.knowledge-band,
|
|
.workflow,
|
|
.feature-band,
|
|
.safety-band,
|
|
.section-page {
|
|
width: min(1180px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hero {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.02fr) minmax(360px, 0.98fr);
|
|
gap: 48px;
|
|
align-items: center;
|
|
min-height: calc(100vh - 72px);
|
|
padding: 74px 0 54px;
|
|
}
|
|
|
|
.eyebrow {
|
|
margin: 0 0 12px;
|
|
color: var(--accent);
|
|
font-family: var(--mono);
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
p {
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 820px;
|
|
margin: 0;
|
|
font-family: var(--serif);
|
|
font-size: clamp(3.2rem, 8vw, 7.4rem);
|
|
line-height: 0.92;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
h2 {
|
|
margin: 0;
|
|
font-family: var(--serif);
|
|
font-size: clamp(2rem, 4vw, 4rem);
|
|
line-height: 1;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
h3 {
|
|
margin: 0 0 10px;
|
|
font-size: 1.1rem;
|
|
letter-spacing: 0;
|
|
}
|
|
|
|
.hero__lead {
|
|
max-width: 670px;
|
|
margin: 24px 0 0;
|
|
color: var(--muted);
|
|
font-size: clamp(1rem, 2.1vw, 1.28rem);
|
|
}
|
|
|
|
.hero__actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
margin-top: 34px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 46px;
|
|
padding: 0 18px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.button--primary {
|
|
border-color: var(--ink);
|
|
background: var(--ink);
|
|
color: var(--bg);
|
|
}
|
|
|
|
.button--ghost {
|
|
background: color-mix(in srgb, var(--surface) 78%, transparent);
|
|
}
|
|
|
|
.hero__visual {
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.terminal {
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: #101312;
|
|
color: #e7efe8;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.terminal__bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 42px;
|
|
border-bottom: 1px solid #2d3830;
|
|
padding: 0 14px;
|
|
}
|
|
|
|
.terminal__bar span {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background: #f05d5e;
|
|
}
|
|
|
|
.terminal__bar span:nth-child(2) {
|
|
background: #f3b23d;
|
|
}
|
|
|
|
.terminal__bar span:nth-child(3) {
|
|
background: #35c99b;
|
|
}
|
|
|
|
.terminal__bar strong {
|
|
margin-left: 8px;
|
|
color: #aeb8af;
|
|
font-family: var(--mono);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.terminal__body {
|
|
padding: 20px;
|
|
font-family: var(--mono);
|
|
font-size: clamp(0.78rem, 1.6vw, 0.95rem);
|
|
}
|
|
|
|
.terminal__body p {
|
|
margin: 0 0 14px;
|
|
}
|
|
|
|
.terminal__body p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.prompt {
|
|
color: var(--accent-2);
|
|
}
|
|
|
|
.ok {
|
|
color: #35c99b;
|
|
}
|
|
|
|
.warn {
|
|
color: #f0a04c;
|
|
}
|
|
|
|
.muted {
|
|
color: #94a097;
|
|
}
|
|
|
|
.market-strip {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 8px;
|
|
}
|
|
|
|
.market-strip span {
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
background: var(--surface);
|
|
padding: 10px 8px;
|
|
color: var(--muted);
|
|
font-family: var(--mono);
|
|
font-size: 0.78rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.section-head {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
|
|
gap: 24px;
|
|
align-items: end;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.install-band,
|
|
.knowledge-band,
|
|
.workflow,
|
|
.feature-band,
|
|
.safety-band {
|
|
padding: 68px 0;
|
|
}
|
|
|
|
.install-panel {
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: var(--surface);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 8px;
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 10px;
|
|
}
|
|
|
|
.tabs button {
|
|
min-height: 36px;
|
|
padding: 0 14px;
|
|
cursor: pointer;
|
|
font-family: var(--mono);
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
.tabs button[aria-selected="true"] {
|
|
border-color: var(--ink);
|
|
background: var(--ink);
|
|
color: var(--bg);
|
|
}
|
|
|
|
pre {
|
|
margin: 0;
|
|
overflow-x: auto;
|
|
padding: 24px;
|
|
font-family: var(--mono);
|
|
font-size: clamp(0.86rem, 1.7vw, 1rem);
|
|
}
|
|
|
|
.step-grid,
|
|
.feature-grid,
|
|
.knowledge-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.step-grid article,
|
|
.feature-card,
|
|
.knowledge-card {
|
|
border: 1px solid var(--line);
|
|
border-radius: 8px;
|
|
background: color-mix(in srgb, var(--surface) 88%, transparent);
|
|
padding: 18px;
|
|
}
|
|
|
|
.step-grid span {
|
|
display: block;
|
|
margin-bottom: 26px;
|
|
color: var(--accent-2);
|
|
font-family: var(--mono);
|
|
font-size: 0.82rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.step-grid p,
|
|
.feature-card p,
|
|
.knowledge-card p,
|
|
.section-hero p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.knowledge-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.knowledge-card {
|
|
display: grid;
|
|
gap: 12px;
|
|
min-height: 128px;
|
|
align-content: start;
|
|
transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
|
|
}
|
|
|
|
.knowledge-card:hover {
|
|
border-color: var(--accent);
|
|
background: var(--surface);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.knowledge-card strong {
|
|
font-family: var(--serif);
|
|
font-size: 1.7rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.section-page {
|
|
padding: 56px 0 72px;
|
|
}
|
|
|
|
.section-hero {
|
|
display: grid;
|
|
gap: 22px;
|
|
max-width: 920px;
|
|
padding: 72px 0 46px;
|
|
}
|
|
|
|
.section-hero h1 {
|
|
font-size: clamp(3.4rem, 9vw, 7.2rem);
|
|
}
|
|
|
|
.section-hero--blank {
|
|
min-height: calc(100vh - 236px);
|
|
}
|
|
|
|
.section-hero p {
|
|
max-width: 760px;
|
|
font-size: clamp(1.05rem, 2.2vw, 1.26rem);
|
|
}
|
|
|
|
.feature-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.feature-card img {
|
|
width: 100%;
|
|
aspect-ratio: 1 / 0.72;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
background: var(--surface-2);
|
|
}
|
|
|
|
.safety-band {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
|
|
gap: 24px;
|
|
align-items: center;
|
|
border-top: 1px solid var(--line);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.safety-band p:last-child {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
font-size: 1.08rem;
|
|
}
|
|
|
|
.site-footer {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 18px;
|
|
min-height: 92px;
|
|
color: var(--muted);
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.site-footer__name {
|
|
margin-right: auto;
|
|
color: var(--ink);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.footer-traffic[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.footer-traffic {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: baseline;
|
|
flex-basis: 100%;
|
|
gap: 0.5rem 1.25rem;
|
|
margin-bottom: 0.75rem;
|
|
font-size: 0.85rem;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.footer-traffic .ft-item strong {
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.footer-traffic .ft-note {
|
|
font-size: 0.72rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
@media (max-width: 920px) {
|
|
.site-nav {
|
|
gap: 14px;
|
|
font-size: 0.88rem;
|
|
}
|
|
|
|
.hero {
|
|
grid-template-columns: 1fr;
|
|
min-height: auto;
|
|
}
|
|
|
|
.step-grid,
|
|
.feature-grid,
|
|
.knowledge-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 680px) {
|
|
.site-header__inner {
|
|
min-height: 66px;
|
|
gap: 12px;
|
|
}
|
|
|
|
.site-header__inner {
|
|
flex-wrap: wrap;
|
|
row-gap: 8px;
|
|
min-height: 0;
|
|
padding-top: 12px;
|
|
}
|
|
|
|
/* The nav drops to its own row and scrolls sideways instead of vanishing,
|
|
so every section stays one tap away on a phone. */
|
|
.site-nav {
|
|
order: 3;
|
|
width: 100%;
|
|
gap: 18px;
|
|
overflow-x: auto;
|
|
padding: 2px 0 12px;
|
|
font-size: 0.9rem;
|
|
white-space: nowrap;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.site-nav::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.brand__text {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.star-pill {
|
|
display: none;
|
|
}
|
|
|
|
.hero {
|
|
padding-top: 46px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(3rem, 16vw, 4.8rem);
|
|
}
|
|
|
|
.section-head,
|
|
.safety-band {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.step-grid,
|
|
.feature-grid,
|
|
.knowledge-grid,
|
|
.market-strip {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.tabs {
|
|
overflow-x: auto;
|
|
}
|
|
}
|