106 lines
9.1 KiB
CSS
106 lines
9.1 KiB
CSS
.page-autonomy { background-image: radial-gradient(circle at 78% 0, rgba(223,255,79,.07), transparent 31rem); }
|
|
.autonomy-shell { width: min(1500px, 100%); margin: 0 auto; padding: 38px 38px 70px; }
|
|
|
|
.autonomy-hero { min-height: 238px; padding: 22px 4px 34px; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; border-bottom: 1px solid var(--border); }
|
|
.hero-copy { max-width: 780px; }
|
|
.eyebrow { margin-bottom: 23px; display: flex; align-items: center; gap: 9px; color: var(--accent); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
|
|
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(223,255,79,.5); animation: pulse 2.4s infinite; }
|
|
@keyframes pulse { 60% { box-shadow: 0 0 0 8px rgba(223,255,79,0); } 100% { box-shadow: 0 0 0 0 rgba(223,255,79,0); } }
|
|
.hero-copy h2 { max-width: 760px; font-size: clamp(42px, 6vw, 82px); font-weight: 560; letter-spacing: -.068em; line-height: .94; }
|
|
.hero-copy p { max-width: 640px; margin-top: 22px; color: var(--muted); font-size: 16px; line-height: 1.6; }
|
|
|
|
.hero-mode { min-width: 220px; padding: 17px 0 3px 22px; display: flex; flex-direction: column; gap: 5px; border-left: 1px solid var(--border); }
|
|
.mode-label { color: var(--muted-dark); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
|
|
.hero-mode strong { color: var(--accent); font-family: var(--mono); font-size: 25px; letter-spacing: -.04em; }
|
|
.hero-mode > span:last-child { color: var(--muted); font-size: 11px; }
|
|
|
|
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
|
|
.metric-block { min-height: 132px; padding: 26px 24px; display: flex; flex-direction: column; border-right: 1px solid var(--border-light); }
|
|
.metric-block:first-child { padding-left: 4px; }
|
|
.metric-block:last-child { border-right: 0; }
|
|
.metric-kicker { color: var(--muted-dark); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
|
|
.metric-block strong { margin-top: auto; color: var(--foreground); font-size: 34px; font-weight: 580; letter-spacing: -.05em; line-height: 1; }
|
|
.metric-block small { margin-top: 7px; color: #636b61; font-size: 10px; }
|
|
|
|
.panel { background: rgba(16,19,16,.74); border: 1px solid var(--border); border-radius: 8px; }
|
|
.section-head { min-height: 58px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid var(--border-light); }
|
|
.section-head > div { display: flex; align-items: center; gap: 11px; }
|
|
.section-head h3 { font-size: 13px; font-weight: 650; letter-spacing: -.01em; }
|
|
.section-index { color: #596157; font-family: var(--mono); font-size: 9px; }
|
|
.freshness, .text-link { color: var(--muted-dark); font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-decoration: none; }
|
|
.text-link:hover { color: var(--accent); }
|
|
|
|
.pipeline-section { margin-top: 26px; }
|
|
.pipeline { min-height: 158px; padding: 26px 28px; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr; align-items: center; }
|
|
.pipeline-step { min-width: 0; display: grid; grid-template-columns: 22px 1fr; grid-template-rows: auto auto auto; align-items: center; }
|
|
.step-number { grid-row: 1 / span 3; align-self: start; color: #4f574e; font-family: var(--mono); font-size: 9px; }
|
|
.pipeline-step strong { font-size: 13px; }
|
|
.pipeline-step small { margin-top: 3px; color: var(--muted-dark); font-size: 10px; }
|
|
.pipeline-step b { margin-top: 12px; color: var(--accent); font-family: var(--mono); font-size: 18px; font-weight: 550; }
|
|
.pipeline-arrow { padding: 0 10px; color: #3c433b; font-family: var(--mono); }
|
|
|
|
.autonomy-grid { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, .7fr); gap: 16px; }
|
|
.hypothesis-list { min-height: 320px; }
|
|
.hypothesis-row { padding: 18px; display: grid; grid-template-columns: 82px minmax(100px, .7fr) minmax(220px, 1.8fr) 100px; gap: 18px; align-items: center; border-bottom: 1px solid var(--border-light); }
|
|
.hypothesis-row:last-child { border-bottom: 0; }
|
|
.hypothesis-symbol { font-family: var(--mono); font-size: 15px; font-weight: 750; }
|
|
.direction-tag { width: fit-content; margin-top: 5px; color: var(--muted-dark); font-family: var(--mono); font-size: 8px; text-transform: uppercase; }
|
|
.direction-tag.positive { color: var(--positive); }
|
|
.direction-tag.negative { color: var(--negative); }
|
|
.hypothesis-type { color: #d4d7d0; font-size: 12px; font-weight: 600; }
|
|
.hypothesis-channel { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
|
|
.hypothesis-meta { color: var(--muted-dark); font-family: var(--mono); font-size: 9px; line-height: 1.7; }
|
|
.decision-chip { justify-self: end; padding: 5px 8px; color: var(--warning); background: rgba(243,201,105,.06); border: 1px solid rgba(243,201,105,.16); border-radius: 3px; font-family: var(--mono); font-size: 9px; font-weight: 750; }
|
|
.decision-chip.buy { color: var(--positive); border-color: rgba(142,230,168,.18); background: rgba(142,230,168,.06); }
|
|
.decision-chip.sell { color: var(--negative); border-color: rgba(255,141,125,.18); background: rgba(255,141,125,.06); }
|
|
|
|
.performance-panel { padding-bottom: 18px; }
|
|
.accuracy-orbit { --accuracy: 0deg; width: 166px; height: 166px; margin: 28px auto 24px; padding: 1px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--accent) var(--accuracy), #252b24 0); }
|
|
.accuracy-orbit::before { content: ""; grid-area: 1/1; width: 138px; height: 138px; border-radius: 50%; background: #111411; }
|
|
.accuracy-orbit > div { z-index: 1; grid-area: 1/1; display: flex; flex-direction: column; align-items: center; }
|
|
.accuracy-orbit strong { font-size: 31px; font-weight: 570; letter-spacing: -.055em; }
|
|
.accuracy-orbit span { color: var(--muted-dark); font-family: var(--mono); font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
|
|
.performance-facts { margin: 0 18px; border-top: 1px solid var(--border-light); }
|
|
.performance-facts > div { padding: 11px 0; display: flex; justify-content: space-between; color: var(--muted); border-bottom: 1px solid var(--border-light); font-size: 11px; }
|
|
.performance-facts strong { color: var(--foreground); font-family: var(--mono); font-size: 11px; }
|
|
.performance-note { margin: 17px 18px 0; color: var(--muted-dark); font-size: 10px; line-height: 1.55; }
|
|
|
|
.lower-grid { grid-template-columns: minmax(0, 1.8fr) minmax(280px, .7fr); }
|
|
.ledger-table { border: 0; border-radius: 0 0 8px 8px; }
|
|
.mode-pill { padding: 4px 7px; color: var(--warning); border: 1px solid rgba(243,201,105,.2); border-radius: 20px; font-family: var(--mono); font-size: 8px; font-weight: 700; text-transform: uppercase; }
|
|
.runtime-list { padding: 7px 18px; }
|
|
.runtime-list > div { min-height: 41px; display: flex; align-items: center; justify-content: space-between; color: var(--muted); border-bottom: 1px solid var(--border-light); font-size: 10px; }
|
|
.runtime-list span { display: flex; align-items: center; gap: 8px; }
|
|
.runtime-list strong { color: var(--foreground); font-family: var(--mono); font-size: 9px; font-weight: 550; }
|
|
.status-light { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); }
|
|
.status-light.ok { background: var(--positive); box-shadow: 0 0 8px rgba(142,230,168,.35); }
|
|
.account-card { margin: 10px 18px 18px; padding: 15px; display: flex; flex-direction: column; background: #0d100e; border: 1px solid var(--border-light); border-radius: 5px; }
|
|
.account-card span { color: var(--muted-dark); font-family: var(--mono); font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
|
|
.account-card strong { margin-top: 9px; font-size: 15px; font-weight: 580; }
|
|
.account-card small { margin-top: 5px; color: var(--muted-dark); font-size: 9px; }
|
|
.loading-line { width: 42%; height: 1px; margin: 100px auto; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: loading 1.2s infinite; }
|
|
@keyframes loading { from { transform: translateX(-40%); opacity: .25; } 50% { opacity: 1; } to { transform: translateX(40%); opacity: .25; } }
|
|
|
|
@media (max-width: 1100px) {
|
|
.metric-strip { grid-template-columns: repeat(2, 1fr); }
|
|
.metric-block:nth-child(2) { border-right: 0; }
|
|
.autonomy-grid, .lower-grid { grid-template-columns: 1fr; }
|
|
.pipeline { grid-template-columns: repeat(5, 1fr); gap: 10px; }
|
|
.pipeline-arrow { display: none; }
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.autonomy-shell { padding: 22px 16px 50px; }
|
|
.autonomy-hero { min-height: 0; padding-top: 16px; flex-direction: column; align-items: stretch; }
|
|
.hero-copy h2 { font-size: 44px; }
|
|
.hero-mode { padding-left: 0; border-left: 0; }
|
|
.metric-block, .metric-block:first-child { min-height: 112px; padding: 18px 12px; }
|
|
.metric-block strong { font-size: 28px; }
|
|
.pipeline { grid-template-columns: 1fr; padding: 16px 18px; gap: 18px; }
|
|
.pipeline-step { grid-template-columns: 24px 1fr auto; grid-template-rows: auto auto; }
|
|
.pipeline-step b { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
|
|
.hypothesis-row { grid-template-columns: 72px 1fr auto; gap: 12px; }
|
|
.hypothesis-meta { display: none; }
|
|
.decision-chip { grid-column: 3; }
|
|
}
|