ff
This commit is contained in:
1650
src/styles/components.css
Normal file
1650
src/styles/components.css
Normal file
File diff suppressed because it is too large
Load Diff
178
src/styles/docs-nextra-search.css
Normal file
178
src/styles/docs-nextra-search.css
Normal file
@@ -0,0 +1,178 @@
|
||||
/* Nextra 风格文档搜索（仅作用于 .docs-spotlight*，不引入 theme 全局 reset） */
|
||||
|
||||
.docs-spotlight {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.docs-spotlight__input {
|
||||
width: 100%;
|
||||
min-height: 2.25rem;
|
||||
padding: 0.5rem 4.25rem 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid transparent;
|
||||
background: rgb(0 0 0 / 0.05);
|
||||
color: var(--color-ink);
|
||||
transition:
|
||||
background-color 0.15s ease,
|
||||
box-shadow 0.15s ease,
|
||||
border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.docs-spotlight__input::placeholder {
|
||||
color: var(--color-body);
|
||||
}
|
||||
|
||||
.docs-spotlight__input--focus,
|
||||
.docs-spotlight__input:focus {
|
||||
outline: none;
|
||||
background: rgb(255 255 255 / 0.95);
|
||||
border-color: var(--color-border-light);
|
||||
box-shadow: 0 0 0 2px rgb(38 112 232 / 0.18);
|
||||
}
|
||||
|
||||
.docs-spotlight__input::-webkit-search-cancel-button {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.docs-spotlight__kbd {
|
||||
position: absolute;
|
||||
inset-block: auto;
|
||||
inset-inline-end: 0.375rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
height: 1.25rem;
|
||||
padding: 0 0.375rem;
|
||||
font-family: var(--font-mono-caps);
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-body);
|
||||
pointer-events: none;
|
||||
border: 1px solid var(--color-border-light);
|
||||
border-radius: 0.25rem;
|
||||
background: rgb(255 255 255 / 0.9);
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.docs-spotlight__kbd--hidden {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media (width < 640px) {
|
||||
.docs-spotlight__kbd {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.docs-spotlight__input {
|
||||
padding-inline-end: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Headless UI 浮层可能挂在 body 下，用 :has 限定在文档路由 */
|
||||
html:has(.docs-page) .docs-spotlight__panel {
|
||||
z-index: 45;
|
||||
width: min(100vw - 2rem, 36rem);
|
||||
max-height: min(calc(100vh - 6rem), 400px);
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0.625rem 0;
|
||||
border: 1px solid var(--color-border-light);
|
||||
border-radius: 0.75rem;
|
||||
background: rgb(255 255 255 / 0.92);
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: var(--shadow-surface-hover);
|
||||
transition:
|
||||
opacity 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
}
|
||||
|
||||
html:has(.docs-page) .docs-spotlight__panel[data-closed] {
|
||||
opacity: 0;
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.docs-spotlight__state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
min-height: 7rem;
|
||||
padding: 1rem 1.5rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-body);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.docs-spotlight__state--error {
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
.docs-spotlight__state-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.docs-spotlight__group-title {
|
||||
margin: 0.5rem 0.625rem 0.375rem;
|
||||
padding: 0 0.5rem 0.25rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-body-light);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.docs-spotlight__group-title:first-child {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.docs-spotlight__hit {
|
||||
display: block;
|
||||
margin: 0 0.35rem;
|
||||
padding: 0.5rem 0.625rem;
|
||||
border-radius: 0.375rem;
|
||||
text-decoration: none;
|
||||
color: var(--color-ink-soft);
|
||||
scroll-margin-top: 6rem;
|
||||
}
|
||||
|
||||
.docs-spotlight__hit-title {
|
||||
font-size: 0.9375rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.docs-spotlight__hit-excerpt {
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.4;
|
||||
color: var(--color-body);
|
||||
}
|
||||
|
||||
.docs-spotlight__hit-excerpt mark {
|
||||
background: rgb(38 112 232 / 0.72);
|
||||
color: #fff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.docs-spotlight__hit--focus,
|
||||
.docs-spotlight__hit[data-focus] {
|
||||
background: rgb(38 112 232 / 0.08);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.docs-spotlight__hit--focus .docs-spotlight__hit-title,
|
||||
.docs-spotlight__hit[data-focus] .docs-spotlight__hit-title {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
642
src/styles/docs.css
Normal file
642
src/styles/docs.css
Normal file
@@ -0,0 +1,642 @@
|
||||
@import "./docs-nextra-search.css";
|
||||
|
||||
/* —— 文档区：与官网 band / token 一致 —— */
|
||||
|
||||
/* 全站顶栏 fixed + 文档次顶栏（通栏，非岛状；吸顶时与主导航同色衔接） */
|
||||
.docs-page {
|
||||
--docs-subnav-height: 2.5rem;
|
||||
--docs-chrome-bg: rgb(255 255 255 / 0.52);
|
||||
--docs-subnav-bg: var(--docs-chrome-bg);
|
||||
--docs-chrome-blur: blur(10px);
|
||||
--docs-sticky-top: calc(
|
||||
var(--nav-offset) + var(--docs-subnav-height) + var(--spacing-xs)
|
||||
);
|
||||
padding-top: var(--nav-offset);
|
||||
}
|
||||
|
||||
html.nav-is-docked .docs-page {
|
||||
--docs-subnav-height: 2.25rem;
|
||||
--docs-chrome-bg: rgb(255 255 255 / 0.94);
|
||||
--docs-subnav-bg: rgb(246 248 251 / 0.98);
|
||||
--docs-chrome-blur: blur(12px);
|
||||
}
|
||||
|
||||
/* 文档页吸顶：主导航去掉底边/阴影，避免与次顶栏叠出色差 */
|
||||
html.nav-is-docked .docs-page .nav-float--docked .nav-float-rail {
|
||||
border-bottom: none;
|
||||
box-shadow: none;
|
||||
background-color: var(--docs-chrome-bg);
|
||||
backdrop-filter: var(--docs-chrome-blur);
|
||||
}
|
||||
|
||||
.docs-subnav {
|
||||
position: sticky;
|
||||
top: var(--nav-offset);
|
||||
z-index: 40;
|
||||
width: 100%;
|
||||
transition: top 0.38s cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
html.nav-is-docked .docs-subnav {
|
||||
/* 与 fixed 主导航贴齐，消除亚像素缝 */
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
.docs-subnav__rail {
|
||||
background-color: var(--docs-subnav-bg);
|
||||
backdrop-filter: var(--docs-chrome-blur);
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
transition:
|
||||
background-color 0.38s ease,
|
||||
backdrop-filter 0.38s ease;
|
||||
}
|
||||
|
||||
|
||||
.docs-subnav__inner {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm) var(--spacing-lg);
|
||||
min-height: var(--docs-subnav-height);
|
||||
padding-block: 0.15rem;
|
||||
}
|
||||
|
||||
html.nav-is-docked .docs-subnav__inner {
|
||||
padding-block: 0.1rem;
|
||||
}
|
||||
|
||||
.docs-subnav__inner .docs-breadcrumb {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.docs-subnav__search {
|
||||
flex: 1 1 14rem;
|
||||
width: 100%;
|
||||
max-width: 18rem;
|
||||
min-width: min(100%, 11rem);
|
||||
}
|
||||
|
||||
.docs-subnav .docs-spotlight__input {
|
||||
min-height: 1.875rem;
|
||||
padding-block: 0.3rem;
|
||||
font-size: 0.8125rem;
|
||||
background: rgb(0 0 0 / 0.04);
|
||||
}
|
||||
|
||||
html.nav-is-docked .docs-subnav .docs-spotlight__input {
|
||||
min-height: 1.75rem;
|
||||
padding-block: 0.25rem;
|
||||
}
|
||||
|
||||
.docs-subnav .docs-spotlight__input--focus,
|
||||
.docs-subnav .docs-spotlight__input:focus {
|
||||
background: rgb(255 255 255 / 0.95);
|
||||
}
|
||||
|
||||
@media (width < 768px) {
|
||||
.docs-subnav__search {
|
||||
max-width: none;
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.docs-subnav,
|
||||
.docs-subnav__rail,
|
||||
html.nav-is-docked .docs-page .nav-float--docked .nav-float-rail {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 文档页内保证全站顶栏/容器宽度与首页一致 */
|
||||
.docs-page .nav-float {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.docs-page .container-site {
|
||||
width: 100%;
|
||||
max-width: var(--width-container);
|
||||
margin-inline: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.docs-breadcrumb {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 0.35rem 0.5rem;
|
||||
color: var(--color-body);
|
||||
}
|
||||
|
||||
.docs-breadcrumb__link {
|
||||
color: var(--color-body);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.docs-breadcrumb__link:hover {
|
||||
color: var(--color-accent-ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.docs-breadcrumb__current {
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.docs-breadcrumb__sep {
|
||||
color: var(--color-body-light);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.docs-shell__grid {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--spacing-3xl);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
@media (width >= 992px) {
|
||||
.docs-shell__grid {
|
||||
grid-template-columns: minmax(168px, 188px) minmax(0, 1fr);
|
||||
gap: var(--spacing-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
.docs-shell {
|
||||
padding-block: var(--spacing-xl) var(--spacing-section);
|
||||
}
|
||||
|
||||
.docs-shell__aside {
|
||||
display: none;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (width >= 992px) {
|
||||
.docs-shell__aside {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.docs-shell__sticky-anchor {
|
||||
position: sticky;
|
||||
top: var(--docs-sticky-top);
|
||||
align-self: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.docs-shell__sticky {
|
||||
max-height: calc(100vh - var(--docs-sticky-top) - 0.75rem);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0;
|
||||
padding-right: 0.35rem;
|
||||
}
|
||||
|
||||
/* 侧栏：贴近 Nextra Docs 的扁平链接样式 */
|
||||
.docs-nav {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.125rem;
|
||||
}
|
||||
|
||||
.docs-nav__group-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.docs-nav__link {
|
||||
display: block;
|
||||
flex: 1;
|
||||
padding: 0.3125rem 0.5rem;
|
||||
border-radius: 0.375rem;
|
||||
color: var(--color-body);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.35;
|
||||
transition:
|
||||
color 0.15s ease,
|
||||
background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.docs-nav__link--nested {
|
||||
font-size: 0.8125rem;
|
||||
padding-left: 0.875rem;
|
||||
color: var(--color-body-light);
|
||||
}
|
||||
|
||||
.docs-nav__link:hover {
|
||||
color: var(--color-ink);
|
||||
background: rgb(0 0 0 / 0.04);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.docs-nav__link--active {
|
||||
color: var(--color-primary);
|
||||
font-weight: 500;
|
||||
background: rgb(38 112 232 / 0.08);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.docs-nav__link--nested.docs-nav__link--active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.docs-nav__toggle {
|
||||
flex-shrink: 0;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.docs-nav__toggle:hover {
|
||||
background: var(--color-canvas-muted);
|
||||
}
|
||||
|
||||
.docs-nav__chevron {
|
||||
display: block;
|
||||
width: 0.45rem;
|
||||
height: 0.45rem;
|
||||
border-right: 2px solid var(--color-body);
|
||||
border-bottom: 2px solid var(--color-body);
|
||||
transform: rotate(45deg);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.docs-nav__chevron[data-open="true"] {
|
||||
transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
.docs-nav__sub {
|
||||
list-style: none;
|
||||
margin: 0.125rem 0 0.35rem;
|
||||
padding: 0 0 0 0.5rem;
|
||||
border-left: 1px solid var(--color-border-light);
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 0.0625rem;
|
||||
}
|
||||
|
||||
.docs-nav__sub[data-open="true"] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@media (width >= 992px) {
|
||||
.docs-nav__toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.docs-nav__sub {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* 移动端目录抽屉 */
|
||||
.docs-mobile-nav {
|
||||
position: relative;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.docs-mobile-nav__trigger {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.docs-mobile-nav__backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 40;
|
||||
background: rgb(20 20 20 / 0.35);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.docs-mobile-nav__panel {
|
||||
position: fixed;
|
||||
z-index: 50;
|
||||
left: var(--spacing-lg);
|
||||
right: var(--spacing-lg);
|
||||
top: var(--docs-sticky-top);
|
||||
max-height: min(70vh, 520px);
|
||||
overflow-y: auto;
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-canvas-elevated);
|
||||
box-shadow: var(--shadow-surface);
|
||||
animation: docs-panel-in 0.22s ease;
|
||||
}
|
||||
|
||||
.docs-mobile-nav__panel[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes docs-panel-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 992px) {
|
||||
.docs-mobile-nav {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 正文 + 右侧 TOC */
|
||||
.docs-article {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: var(--spacing-3xl);
|
||||
min-width: 0;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
@media (width >= 1100px) {
|
||||
.docs-article {
|
||||
grid-template-columns: minmax(0, 1fr) minmax(140px, 168px);
|
||||
gap: var(--spacing-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
.docs-article__body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.docs-toc-anchor {
|
||||
position: sticky;
|
||||
top: var(--docs-sticky-top);
|
||||
align-self: start;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.docs-toc-sticky {
|
||||
max-height: calc(100vh - var(--docs-sticky-top) - 0.75rem);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
/* 右侧 TOC：Nextra 式左边线 + 小字号 */
|
||||
.docs-toc {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.docs-toc__title {
|
||||
margin: 0 0 var(--spacing-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-body-light);
|
||||
}
|
||||
|
||||
.docs-toc__list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
border-left: 1px solid var(--color-border-light);
|
||||
}
|
||||
|
||||
.docs-toc__link {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1.45;
|
||||
color: var(--color-body);
|
||||
text-decoration: none;
|
||||
padding: 0.25rem 0 0.25rem 0.75rem;
|
||||
margin-left: -1px;
|
||||
border-left: 2px solid transparent;
|
||||
border-radius: 0;
|
||||
transition:
|
||||
color 0.15s ease,
|
||||
border-color 0.15s ease;
|
||||
}
|
||||
|
||||
.docs-toc__link--h3 {
|
||||
padding-left: 1.125rem;
|
||||
font-size: 0.6875rem;
|
||||
color: var(--color-body-light);
|
||||
}
|
||||
|
||||
.docs-toc__link:hover {
|
||||
color: var(--color-ink);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.docs-toc__link--active {
|
||||
color: var(--color-ink);
|
||||
font-weight: 500;
|
||||
border-left-color: var(--color-primary);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 正文排版 */
|
||||
.docs-prose {
|
||||
min-width: 0;
|
||||
max-width: 46rem;
|
||||
line-height: 1.75;
|
||||
color: var(--color-ink-soft);
|
||||
}
|
||||
|
||||
.docs-prose h1 {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(1.75rem, 4vw, 2.15rem);
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
margin: 0 0 var(--spacing-lg);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.docs-heading {
|
||||
position: relative;
|
||||
scroll-margin-top: calc(var(--docs-sticky-top) + 1.5rem);
|
||||
}
|
||||
|
||||
.docs-heading__anchor {
|
||||
position: absolute;
|
||||
left: -1.25rem;
|
||||
opacity: 0;
|
||||
color: var(--color-body-light);
|
||||
text-decoration: none;
|
||||
font-weight: 400;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
|
||||
.docs-heading:hover .docs-heading__anchor {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.docs-prose h2 {
|
||||
font-size: 1.35rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
margin: var(--spacing-4xl) 0 var(--spacing-md);
|
||||
padding-bottom: var(--spacing-sm);
|
||||
border-bottom: 1px solid var(--color-hairline);
|
||||
}
|
||||
|
||||
.docs-prose h3 {
|
||||
font-size: 1.08rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
margin: var(--spacing-2xl) 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.docs-prose p,
|
||||
.docs-prose ul,
|
||||
.docs-prose ol {
|
||||
margin: 0 0 var(--spacing-lg);
|
||||
color: var(--color-body);
|
||||
}
|
||||
|
||||
.docs-prose a {
|
||||
color: var(--color-accent-ink);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.2em;
|
||||
}
|
||||
|
||||
.docs-prose a:hover {
|
||||
color: var(--color-accent-ink-hover);
|
||||
}
|
||||
|
||||
.docs-prose ul,
|
||||
.docs-prose ol {
|
||||
padding-left: 1.35rem;
|
||||
}
|
||||
|
||||
.docs-prose li {
|
||||
margin: 0.35rem 0;
|
||||
}
|
||||
|
||||
.docs-code {
|
||||
position: relative;
|
||||
margin: 0 0 var(--spacing-xl);
|
||||
}
|
||||
|
||||
.docs-code__pre {
|
||||
font-family: var(--font-mono-caps);
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.55;
|
||||
padding: var(--spacing-xl) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
background: linear-gradient(
|
||||
145deg,
|
||||
rgb(248 250 252 / 0.98) 0%,
|
||||
rgb(236 244 255 / 0.92) 100%
|
||||
);
|
||||
border: 1px solid var(--color-border-light);
|
||||
box-shadow: var(--shadow-field);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.docs-code__copy {
|
||||
position: absolute;
|
||||
top: var(--spacing-sm);
|
||||
right: var(--spacing-sm);
|
||||
z-index: 1;
|
||||
padding: 0.25rem 0.65rem;
|
||||
font-size: 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--color-border-light);
|
||||
background: rgb(255 255 255 / 0.92);
|
||||
color: var(--color-body);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.15s ease,
|
||||
color 0.15s ease;
|
||||
}
|
||||
|
||||
.docs-code__copy:hover {
|
||||
color: var(--color-accent-ink);
|
||||
border-color: var(--color-accent-border);
|
||||
}
|
||||
|
||||
.docs-prose :not(pre) > code {
|
||||
font-family: var(--font-mono-caps);
|
||||
font-size: 0.88em;
|
||||
padding: 0.12em 0.4em;
|
||||
border-radius: var(--radius-xs);
|
||||
background: var(--color-accent-wash);
|
||||
color: var(--color-accent-ink);
|
||||
}
|
||||
|
||||
.docs-prose strong {
|
||||
font-weight: 600;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
.docs-prose table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0 0 var(--spacing-xl);
|
||||
font-size: 0.92rem;
|
||||
box-shadow: var(--shadow-field);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.docs-prose th,
|
||||
.docs-prose td {
|
||||
border: 1px solid var(--color-hairline);
|
||||
padding: 0.55rem 0.85rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.docs-prose th {
|
||||
background: var(--color-accent-wash);
|
||||
color: var(--color-ink);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.docs-prose blockquote {
|
||||
margin: 0 0 var(--spacing-lg);
|
||||
padding: var(--spacing-md) var(--spacing-lg);
|
||||
border-left: 3px solid var(--color-primary);
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||
background: var(--color-accent-wash);
|
||||
color: var(--color-body);
|
||||
}
|
||||
|
||||
.docs-prose blockquote > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.docs-prose hr {
|
||||
margin: var(--spacing-3xl) 0;
|
||||
border: none;
|
||||
border-top: 1px solid var(--color-hairline);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
243
src/styles/effects.css
Normal file
243
src/styles/effects.css
Normal file
@@ -0,0 +1,243 @@
|
||||
/**
|
||||
* 亮色点缀：蓝 / 绿 / 紫 / 红仅用于光晕、细线、小色块，不改主背景与按钮填色。
|
||||
*/
|
||||
@layer components {
|
||||
.page-shell {
|
||||
background-color: var(--color-canvas-page);
|
||||
}
|
||||
|
||||
.ambient-bg-stack {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.ambient-motion-glow {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@keyframes model-marquee-left {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes model-marquee-right {
|
||||
from {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.model-marquee--left .model-marquee__track,
|
||||
.model-marquee--right .model-marquee__track {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ambient-fallback-drift {
|
||||
0% {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
33% {
|
||||
transform: translate3d(5%, -4%, 0) scale(1.08);
|
||||
}
|
||||
66% {
|
||||
transform: translate3d(-4%, 6%, 0) scale(0.94);
|
||||
}
|
||||
100% {
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.ambient-motion-glow__orb {
|
||||
position: absolute;
|
||||
filter: blur(56px) saturate(1.08);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.ambient-motion-glow__orb {
|
||||
filter: blur(72px) saturate(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.ambient-particles-fallback {
|
||||
position: absolute;
|
||||
inset: -10%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
animation: ambient-fallback-drift 11s ease-in-out infinite;
|
||||
will-change: transform;
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse 70% 50% at 95% 0%,
|
||||
rgb(158 178 212 / 0.2),
|
||||
transparent 58%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse 45% 80% at -5% 20%,
|
||||
rgb(91 142 196 / 0.18),
|
||||
transparent 55%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse 90% 35% at 40% 95%,
|
||||
rgb(86 168 198 / 0.14),
|
||||
transparent 60%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse 55% 65% at 82% 55%,
|
||||
rgb(124 140 200 / 0.16),
|
||||
transparent 52%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse 40% 45% at 12% 78%,
|
||||
rgb(74 101 130 / 0.12),
|
||||
transparent 48%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse 100% 40% at 55% 10%,
|
||||
rgb(176 198 228 / 0.1),
|
||||
transparent 62%
|
||||
);
|
||||
}
|
||||
|
||||
.ambient-particles-fallback--boost {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ambient-particles-canvas {
|
||||
position: absolute !important;
|
||||
inset: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
pointer-events: none !important;
|
||||
z-index: 1 !important;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ambient-particles-fallback {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.ambient-particles-canvas canvas {
|
||||
filter: blur(40px) saturate(1.08);
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.band-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
color: var(--color-accent) !important;
|
||||
}
|
||||
|
||||
.section-eyebrow::before {
|
||||
content: "";
|
||||
flex-shrink: 0;
|
||||
width: 28px;
|
||||
height: 3px;
|
||||
border-radius: var(--radius-full);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgb(74 101 130) 0%,
|
||||
rgb(91 142 196) 40%,
|
||||
rgb(158 178 212) 70%,
|
||||
rgb(124 140 200) 100%
|
||||
);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.nav-float-rail .nav-axis {
|
||||
background-color: var(--color-primary);
|
||||
height: 2px;
|
||||
}
|
||||
|
||||
#reports .grid > *:nth-child(1) .report-scenario-card::before {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(59 158 255),
|
||||
rgb(59 158 255 / 0.2)
|
||||
);
|
||||
}
|
||||
|
||||
#reports .grid > *:nth-child(2) .report-scenario-card::before {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(52 211 153),
|
||||
rgb(52 211 153 / 0.2)
|
||||
);
|
||||
}
|
||||
|
||||
#reports .grid > *:nth-child(3) .report-scenario-card::before {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(167 139 250),
|
||||
rgb(167 139 250 / 0.2)
|
||||
);
|
||||
}
|
||||
|
||||
#reports .grid > *:nth-child(4) .report-scenario-card::before {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(251 113 133),
|
||||
rgb(251 113 133 / 0.2)
|
||||
);
|
||||
}
|
||||
|
||||
#agents .grid > *:nth-child(1) .agent-pillar-tile {
|
||||
box-shadow: var(--shadow-soft), -6px 0 22px rgb(59 158 255 / 0.14);
|
||||
}
|
||||
|
||||
#agents .grid > *:nth-child(2) .agent-pillar-tile {
|
||||
box-shadow: var(--shadow-soft), 0 0 26px rgb(52 211 153 / 0.12);
|
||||
}
|
||||
|
||||
#agents .grid > *:nth-child(3) .agent-pillar-tile {
|
||||
box-shadow: var(--shadow-soft), 6px 0 22px rgb(167 139 250 / 0.14);
|
||||
}
|
||||
|
||||
#models .grid > *:nth-child(1) .model-library-card {
|
||||
box-shadow: var(--shadow-soft), 0 10px 30px rgb(59 158 255 / 0.12);
|
||||
}
|
||||
|
||||
#models .grid > *:nth-child(2) .model-library-card {
|
||||
box-shadow: var(--shadow-soft), 0 10px 30px rgb(52 211 153 / 0.12);
|
||||
}
|
||||
|
||||
#models .grid > *:nth-child(3) .model-library-card {
|
||||
box-shadow: var(--shadow-soft), 0 10px 30px rgb(167 139 250 / 0.12);
|
||||
}
|
||||
|
||||
#reports .grid > *:nth-child(1) .report-scenario-card {
|
||||
box-shadow: var(--shadow-soft), 0 8px 28px rgb(59 158 255 / 0.08);
|
||||
}
|
||||
|
||||
#reports .grid > *:nth-child(2) .report-scenario-card {
|
||||
box-shadow: var(--shadow-soft), 0 8px 28px rgb(52 211 153 / 0.08);
|
||||
}
|
||||
|
||||
#reports .grid > *:nth-child(3) .report-scenario-card {
|
||||
box-shadow: var(--shadow-soft), 0 8px 28px rgb(167 139 250 / 0.08);
|
||||
}
|
||||
|
||||
#reports .grid > *:nth-child(4) .report-scenario-card {
|
||||
box-shadow: var(--shadow-soft), 0 8px 28px rgb(251 113 133 / 0.08);
|
||||
}
|
||||
}
|
||||
53
src/styles/layout.css
Normal file
53
src/styles/layout.css
Normal file
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* Layout primitives — site container, section bands.
|
||||
*/
|
||||
@utility container-site {
|
||||
width: 100%;
|
||||
max-width: var(--width-container);
|
||||
margin-inline: auto;
|
||||
padding-inline: var(--spacing-lg);
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.container-site {
|
||||
padding-inline: var(--spacing-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
@utility band-section {
|
||||
padding-block: var(--spacing-section);
|
||||
}
|
||||
|
||||
@utility section-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-3xl);
|
||||
}
|
||||
|
||||
@utility section-block-gap {
|
||||
margin-top: var(--spacing-5xl);
|
||||
}
|
||||
|
||||
@utility band-light {
|
||||
background-color: rgb(255 255 255 / 0.52);
|
||||
backdrop-filter: blur(10px);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
@utility band-muted {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(242 245 249 / 0.48) 0%,
|
||||
rgb(248 250 252 / 0.38) 100%
|
||||
);
|
||||
backdrop-filter: blur(8px);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
|
||||
@utility hairline-border {
|
||||
box-shadow: var(--shadow-field);
|
||||
}
|
||||
|
||||
@utility hairline-border-dark {
|
||||
box-shadow: var(--shadow-surface);
|
||||
}
|
||||
90
src/styles/locale-zh.css
Normal file
90
src/styles/locale-zh.css
Normal file
@@ -0,0 +1,90 @@
|
||||
/**
|
||||
* 中文站点：衬线标题 + 宽松正文，无深色背景依赖。
|
||||
*/
|
||||
@layer base {
|
||||
html[lang="zh-CN"] .type-display-xxl,
|
||||
html[lang="zh-CN"] .type-display-xl,
|
||||
html[lang="zh-CN"] .type-display-lg,
|
||||
html[lang="zh-CN"] .type-display-md {
|
||||
font-feature-settings: "palt" 1;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
html[lang="zh-CN"] .type-display-xxl {
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.22;
|
||||
}
|
||||
|
||||
html[lang="zh-CN"] .type-display-xl {
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.26;
|
||||
}
|
||||
|
||||
html[lang="zh-CN"] .type-display-lg {
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.32;
|
||||
}
|
||||
|
||||
html[lang="zh-CN"] .type-display-md {
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.38;
|
||||
}
|
||||
|
||||
html[lang="zh-CN"] .type-body-lg,
|
||||
html[lang="zh-CN"] .type-body-lg-strong,
|
||||
html[lang="zh-CN"] .type-body-md,
|
||||
html[lang="zh-CN"] .type-body-md-strong {
|
||||
font-feature-settings: normal;
|
||||
letter-spacing: 0.02em;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
html[lang="zh-CN"] .type-caption,
|
||||
html[lang="zh-CN"] .type-caption-strong {
|
||||
letter-spacing: 0.03em;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
html[lang="zh-CN"] .btn-primary,
|
||||
html[lang="zh-CN"] .btn-secondary-mint,
|
||||
html[lang="zh-CN"] .btn-secondary-white,
|
||||
html[lang="zh-CN"] .btn-ghost,
|
||||
html[lang="zh-CN"] .btn-outline {
|
||||
font-family: var(--font-display);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 1.4;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@utility type-eyebrow {
|
||||
font-family: var(--font-display);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
letter-spacing: 0.14em;
|
||||
color: var(--color-body);
|
||||
}
|
||||
|
||||
@utility type-lead {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.125rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.85;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--color-ink-soft);
|
||||
}
|
||||
|
||||
@utility text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
@utility measure-prose {
|
||||
max-width: 40rem;
|
||||
}
|
||||
|
||||
@utility measure-title {
|
||||
max-width: 48rem;
|
||||
}
|
||||
125
src/styles/responsive.css
Normal file
125
src/styles/responsive.css
Normal file
@@ -0,0 +1,125 @@
|
||||
/**
|
||||
* 全站响应式：手机 (<768)、平板 (768–991)、桌面 (≥992)。
|
||||
*/
|
||||
@layer components {
|
||||
html {
|
||||
--nav-offset: 4.75rem;
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
html {
|
||||
--nav-offset: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 992px) {
|
||||
html {
|
||||
--nav-offset: 5.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/** 顶栏吸顶融合后，仅占导航条高度 */
|
||||
html.nav-is-docked {
|
||||
--nav-offset: 3.25rem;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: clip;
|
||||
}
|
||||
|
||||
.site-content {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
@media (width < 768px) {
|
||||
.band-section {
|
||||
padding-block: 3.5rem;
|
||||
}
|
||||
|
||||
.section-stack {
|
||||
gap: var(--spacing-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 768px) and (width < 992px) {
|
||||
.band-section {
|
||||
padding-block: 4.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
min-height: min(400px, 78svh);
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.hero-section {
|
||||
min-height: min(480px, 72vh);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 992px) {
|
||||
.hero-section {
|
||||
min-height: min(520px, 72vh);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-section__content {
|
||||
min-height: inherit;
|
||||
padding-block: 3rem;
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.hero-section__content {
|
||||
padding-block: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width >= 992px) {
|
||||
.hero-section__content {
|
||||
padding-block: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-section__shade--mobile {
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgb(248 250 252 / 0.55) 0%,
|
||||
rgb(248 250 252 / 0.82) 42%,
|
||||
rgb(248 250 252 / 0.92) 100%
|
||||
);
|
||||
}
|
||||
|
||||
@media (width >= 768px) {
|
||||
.hero-section__shade--mobile {
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
rgb(248 250 252 / 0.88) 0%,
|
||||
rgb(248 250 252 / 0.88) 22%,
|
||||
rgb(248 250 252 / 0.45) 45%,
|
||||
transparent 70%
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@media (width < 768px) {
|
||||
.report-example-overlay {
|
||||
align-items: flex-end;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.report-example-dialog__header,
|
||||
.report-example-dialog__body,
|
||||
.report-example-dialog__footer {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.report-example-dialog__footer .btn-outline {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.subpage-main {
|
||||
padding-top: var(--nav-offset);
|
||||
}
|
||||
}
|
||||
71
src/styles/tokens.css
Normal file
71
src/styles/tokens.css
Normal file
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* Premium light editorial tokens — no dark page bands.
|
||||
*/
|
||||
@theme {
|
||||
--color-primary: #2670e8;
|
||||
--color-on-primary: #ffffff;
|
||||
--color-ink: #141414;
|
||||
--color-ink-soft: #2a2a2a;
|
||||
--color-body: #5c6470;
|
||||
--color-body-light: #8a939f;
|
||||
--color-hairline: #e4e8ee;
|
||||
--color-nav-axis: #2670e8;
|
||||
--color-accent: #3d6fd4;
|
||||
--color-accent-ink: #2670e8;
|
||||
--color-accent-ink-hover: #4088ec;
|
||||
--color-accent-soft: #5c7eb8;
|
||||
--color-accent-wash: #e8f1ff;
|
||||
--color-accent-border: rgb(38 112 232 / 0.35);
|
||||
/* 点缀亮色（仅光晕/细线/小标记，勿作大面积底） */
|
||||
--color-spot-blue: #3b9eff;
|
||||
--color-spot-green: #34d399;
|
||||
--color-spot-violet: #a78bfa;
|
||||
--color-spot-red: #fb7185;
|
||||
--color-canvas: #ffffff;
|
||||
--color-canvas-elevated: #ffffff;
|
||||
--color-canvas-page: #f8fafc;
|
||||
--color-canvas-muted: #f2f5f9;
|
||||
|
||||
--color-border-light: rgb(38 112 232 / 0.14);
|
||||
|
||||
--font-display:
|
||||
var(--font-inter), "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
--font-serif: var(--font-noto-serif), "Songti SC", "Noto Serif SC", serif;
|
||||
--font-mono-caps:
|
||||
var(--font-jetbrains-mono), ui-monospace, Menlo, monospace;
|
||||
|
||||
--spacing-xxs: 2px;
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 12px;
|
||||
--spacing-lg: 16px;
|
||||
--spacing-xl: 20px;
|
||||
--spacing-2xl: 24px;
|
||||
--spacing-3xl: 32px;
|
||||
--spacing-4xl: 44px;
|
||||
--spacing-5xl: 48px;
|
||||
--spacing-6xl: 55.2px;
|
||||
--spacing-section: 88px;
|
||||
|
||||
--radius-none: 0;
|
||||
--radius-xs: 3.25px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--shadow-soft: 0 2px 14px rgb(30 40 55 / 0.06);
|
||||
--shadow-elevated: 0 8px 28px rgb(30 45 65 / 0.1);
|
||||
--shadow-button: 0 1px 3px rgb(38 112 232 / 0.18);
|
||||
--shadow-button-hover: 0 2px 5px rgb(38 112 232 / 0.22);
|
||||
--shadow-surface: 0 4px 24px rgb(30 45 65 / 0.08);
|
||||
--shadow-surface-hover: 0 12px 40px rgb(30 45 65 / 0.12);
|
||||
--shadow-field: 0 2px 14px rgb(30 45 65 / 0.06);
|
||||
--shadow-field-focus: 0 4px 22px rgb(59 158 255 / 0.18);
|
||||
|
||||
--width-container: 1280px;
|
||||
|
||||
--breakpoint-mobile-lg: 479px;
|
||||
--breakpoint-tablet: 768px;
|
||||
--breakpoint-desktop: 992px;
|
||||
--breakpoint-desktop-lg: 1280px;
|
||||
}
|
||||
132
src/styles/typography.css
Normal file
132
src/styles/typography.css
Normal file
@@ -0,0 +1,132 @@
|
||||
/**
|
||||
* Typography utilities — display sans + uppercase mono (DESIGN.md).
|
||||
*/
|
||||
@utility font-display {
|
||||
font-family: var(--font-display);
|
||||
font-feature-settings: "ss01" on;
|
||||
}
|
||||
|
||||
@utility font-mono-caps {
|
||||
font-family: var(--font-mono-caps);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@utility type-display-xxl {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(2.25rem, 5vw, 3.5rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.18;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
@utility type-display-xl {
|
||||
font-family: var(--font-serif);
|
||||
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.22;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
@utility type-display-lg {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 1.625rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.28;
|
||||
letter-spacing: 0.015em;
|
||||
}
|
||||
|
||||
@utility type-display-md {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
@utility type-body-lg {
|
||||
font-family: var(--font-display);
|
||||
font-feature-settings: "ss01" on;
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
line-height: 23.4px;
|
||||
letter-spacing: -0.18px;
|
||||
}
|
||||
|
||||
@utility type-body-lg-strong {
|
||||
font-family: var(--font-display);
|
||||
font-feature-settings: "ss01" on;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
line-height: 23.4px;
|
||||
letter-spacing: -0.18px;
|
||||
}
|
||||
|
||||
@utility type-body-md {
|
||||
font-family: var(--font-display);
|
||||
font-feature-settings: "ss01" on;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 20.8px;
|
||||
letter-spacing: -0.16px;
|
||||
}
|
||||
|
||||
@utility type-body-md-strong {
|
||||
font-family: var(--font-display);
|
||||
font-feature-settings: "ss01" on;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 20.8px;
|
||||
letter-spacing: -0.16px;
|
||||
}
|
||||
|
||||
@utility type-caption {
|
||||
font-family: var(--font-display);
|
||||
font-feature-settings: "ss01" on;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 19.6px;
|
||||
}
|
||||
|
||||
@utility type-caption-strong {
|
||||
font-family: var(--font-display);
|
||||
font-feature-settings: "ss01" on;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 19.6px;
|
||||
}
|
||||
|
||||
@utility type-mono-caps-button {
|
||||
font-family: var(--font-mono-caps);
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.08px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@utility type-mono-caps-eyebrow {
|
||||
font-family: var(--font-mono-caps);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 11px;
|
||||
letter-spacing: 0.55px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@utility type-mono-caps-label {
|
||||
font-family: var(--font-mono-caps);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
line-height: 15.4px;
|
||||
letter-spacing: 0.055px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
@utility type-mono-caption {
|
||||
font-family: var(--font-mono-caps);
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
line-height: 14px;
|
||||
letter-spacing: 0.05px;
|
||||
text-transform: none;
|
||||
}
|
||||
Reference in New Issue
Block a user