126 lines
2.1 KiB
CSS
126 lines
2.1 KiB
CSS
/**
|
||
* 全站响应式：手机 (<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);
|
||
}
|
||
}
|