2728 lines
54 KiB
CSS
2728 lines
54 KiB
CSS
:root {
|
||
--paper: #f8efe0;
|
||
--paper-deep: #ead6b8;
|
||
--ink: #24160f;
|
||
--muted: #7b6755;
|
||
--red: #a71922;
|
||
--red-dark: #741017;
|
||
--gold: #c99a45;
|
||
--gold-light: #f1d99a;
|
||
--tech: #07090f;
|
||
--tech-card: rgba(255, 255, 255, 0.075);
|
||
--tech-line: rgba(241, 217, 154, 0.28);
|
||
--max: 77.5rem;
|
||
color: var(--ink);
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
background: var(--paper);
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
button,
|
||
a {
|
||
-webkit-tap-highlight-color: transparent;
|
||
}
|
||
|
||
.site {
|
||
width: 100%;
|
||
max-width: 100vw;
|
||
overflow-x: hidden;
|
||
background:
|
||
radial-gradient(circle at 9% 12%, rgba(167, 25, 34, 0.1), transparent 26rem),
|
||
linear-gradient(135deg, #fff7e8 0%, var(--paper) 42%, #ead6b8 100%);
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.site::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.topbar {
|
||
position: fixed;
|
||
top: 1.125rem;
|
||
left: 50%;
|
||
z-index: 50;
|
||
display: flex;
|
||
width: min(calc(100% - 3rem), 82.5rem);
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 1.5rem;
|
||
padding: 0.875rem 1.125rem;
|
||
border: 1px solid rgba(122, 75, 38, 0.18);
|
||
border-radius: 999px;
|
||
background: rgba(255, 247, 232, 0.78);
|
||
box-shadow: 0 1.125rem 4.375rem rgba(83, 42, 18, 0.14);
|
||
backdrop-filter: blur(1rem);
|
||
transform: translateX(-50%);
|
||
transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
|
||
}
|
||
|
||
.topbar.is-tech-theme {
|
||
border-color: rgba(201, 154, 69, 0.28);
|
||
background: rgba(8, 9, 15, 0.78);
|
||
box-shadow: 0 1.125rem 4.375rem rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
.topbar.is-tech-theme .brand-lockup strong,
|
||
.topbar.is-tech-theme .brand-lockup small {
|
||
color: #fff4df;
|
||
transition: color 0.35s ease;
|
||
}
|
||
|
||
.topbar.is-tech-theme .nav-links {
|
||
color: rgba(241, 217, 154, 0.82);
|
||
transition: color 0.35s ease;
|
||
}
|
||
|
||
.topbar.is-tech-theme .nav-links a:hover,
|
||
.topbar.is-tech-theme .nav-cta:hover {
|
||
color: var(--gold-light);
|
||
}
|
||
|
||
.topbar.is-tech-theme .nav-cta {
|
||
border-color: rgba(201, 154, 69, 0.42);
|
||
color: var(--gold-light);
|
||
background: rgba(255, 244, 223, 0.06);
|
||
transition: color 0.35s ease, border-color 0.35s ease, background 0.35s ease, transform 0.2s ease;
|
||
}
|
||
|
||
.brand-lockup {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
min-width: max-content;
|
||
}
|
||
|
||
.seal {
|
||
display: grid;
|
||
width: 2.625rem;
|
||
height: 2.625rem;
|
||
place-items: center;
|
||
border: 2px solid var(--red);
|
||
color: var(--red);
|
||
font-family: 'STKaiti', 'KaiTi', serif;
|
||
font-size: 1.5rem;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
transform: rotate(-8deg);
|
||
}
|
||
|
||
.seal-img,
|
||
.haoke-logo-img {
|
||
width: auto;
|
||
height: 2.75rem;
|
||
border-radius: 5px;
|
||
object-fit: contain;
|
||
background: transparent;
|
||
}
|
||
|
||
.ornament {
|
||
width: min(13.75rem, 42vw);
|
||
margin-bottom: 0.625rem;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.ornament.square-seal,
|
||
.ornament.haoke-mark {
|
||
width: clamp(3rem, 5vh, 4.5rem);
|
||
height: auto;
|
||
margin-bottom: 0.35rem;
|
||
opacity: 1;
|
||
border-radius: 0.25rem;
|
||
object-fit: contain;
|
||
background: rgba(255, 255, 255, 0.92);
|
||
padding: 0.2rem;
|
||
}
|
||
|
||
.brand-lockup strong,
|
||
.brand-lockup small {
|
||
display: block;
|
||
}
|
||
|
||
.brand-lockup strong {
|
||
color: var(--red);
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
font-size: 1.125rem;
|
||
letter-spacing: 0.18em;
|
||
}
|
||
|
||
.brand-lockup small {
|
||
color: var(--muted);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.36em;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
max-width: 72vw;
|
||
overflow-x: auto;
|
||
color: #6b4d3a;
|
||
font-size: 0.8125rem;
|
||
white-space: nowrap;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.nav-links::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.nav-links a:hover,
|
||
.nav-cta:hover {
|
||
color: var(--red);
|
||
}
|
||
|
||
.nav-cta,
|
||
.primary-button,
|
||
.secondary-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 999px;
|
||
font-weight: 700;
|
||
letter-spacing: 0.08em;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||
}
|
||
|
||
.nav-cta {
|
||
padding: 0.625rem 1.125rem;
|
||
border: 1px solid rgba(167, 25, 34, 0.25);
|
||
color: var(--red);
|
||
}
|
||
|
||
.primary-button,
|
||
.secondary-button {
|
||
min-width: 11.25rem;
|
||
padding: 0.9375rem 1.625rem;
|
||
}
|
||
|
||
.primary-button {
|
||
border: 1px solid var(--red);
|
||
background: linear-gradient(135deg, var(--red), var(--red-dark));
|
||
color: #fff7ed;
|
||
box-shadow: 0 1rem 2.25rem rgba(167, 25, 34, 0.24);
|
||
}
|
||
|
||
.secondary-button {
|
||
border: 1px solid rgba(167, 25, 34, 0.42);
|
||
color: var(--red);
|
||
background: rgba(255, 255, 255, 0.35);
|
||
}
|
||
|
||
.primary-button:hover,
|
||
.secondary-button:hover,
|
||
.nav-cta:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.page-section {
|
||
position: relative;
|
||
display: grid;
|
||
width: 100vw;
|
||
max-width: 100vw;
|
||
height: 100vh;
|
||
height: 100svh;
|
||
max-height: 100vh;
|
||
max-height: 100svh;
|
||
min-height: 100vh;
|
||
min-height: 100svh;
|
||
align-items: center;
|
||
align-content: center;
|
||
justify-items: stretch;
|
||
gap: clamp(0.5rem, 1.6vh, 1.5rem);
|
||
padding:
|
||
clamp(4.5rem, 7.5vh, 6.5rem)
|
||
max(1.5rem, calc((100vw - var(--max)) / 2))
|
||
clamp(1.25rem, 3vh, 2.5rem);
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
scroll-snap-align: start;
|
||
scroll-snap-stop: always;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.page-section > *:not(.ink-cloud):not(.tech-orbit) {
|
||
min-width: 0;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.page-section::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.poetic-section {
|
||
background:
|
||
linear-gradient(180deg, rgba(255, 248, 236, 0.38), rgba(255, 248, 236, 0.18) 42%, rgba(248, 239, 224, 0.48)),
|
||
url('/assets/bg-mountains-gold.png') center / cover no-repeat,
|
||
var(--paper);
|
||
background-size: auto, cover, auto;
|
||
}
|
||
|
||
.hero-section {
|
||
grid-template-columns: minmax(0, 1.05fr) minmax(22.5rem, 0.95fr);
|
||
overflow: hidden;
|
||
background-image:
|
||
linear-gradient(105deg, rgba(255, 248, 236, 0.72) 0%, rgba(255, 248, 236, 0.28) 48%, rgba(255, 248, 236, 0.12) 100%),
|
||
url('/assets/bg-mountains-gold.png');
|
||
background-position: center, center;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.brand-section {
|
||
background-image:
|
||
linear-gradient(180deg, rgba(255, 248, 236, 0.55), rgba(255, 248, 236, 0.22) 40%, rgba(248, 239, 224, 0.5)),
|
||
url('/assets/bg-brewing.png');
|
||
background-position: center, center;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.poetry-section {
|
||
background-image:
|
||
linear-gradient(180deg, rgba(255, 248, 236, 0.5), rgba(255, 248, 236, 0.2) 45%, rgba(248, 239, 224, 0.45)),
|
||
url('/assets/bg-mountains-water.png');
|
||
background-position: center, center;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.qingxiang-section {
|
||
background-image:
|
||
linear-gradient(105deg, rgba(255, 248, 236, 0.72) 0%, rgba(255, 248, 236, 0.42) 45%, rgba(255, 248, 236, 0.18) 100%),
|
||
url('/assets/bg-qingxiang-ink.png');
|
||
background-position: center, center;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.haoke-section {
|
||
background-image:
|
||
linear-gradient(180deg, rgba(255, 248, 236, 0.58), rgba(255, 248, 236, 0.24) 40%, rgba(248, 239, 224, 0.5)),
|
||
url('/assets/bg-wine-jar.png');
|
||
background-position: center, center;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.system-section {
|
||
background-image:
|
||
linear-gradient(180deg, rgba(255, 248, 236, 0.6), rgba(255, 248, 236, 0.3) 42%, rgba(248, 239, 224, 0.55)),
|
||
url('/assets/bg-harvest.png');
|
||
background-position: center, center bottom;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.ink-cloud {
|
||
position: absolute;
|
||
border-radius: 999px;
|
||
filter: blur(1.125rem);
|
||
opacity: 0.34;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ink-cloud-one {
|
||
right: 6vw;
|
||
bottom: 8vh;
|
||
width: 44vw;
|
||
height: 44vw;
|
||
background: radial-gradient(circle, rgba(66, 48, 37, 0.16), transparent 62%);
|
||
}
|
||
|
||
.hero-copy {
|
||
position: relative;
|
||
z-index: 2;
|
||
max-width: 42.5rem;
|
||
}
|
||
|
||
.brand-main {
|
||
color: var(--red);
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
font-size: clamp(1.75rem, 3.2vw, 3rem);
|
||
font-weight: 800;
|
||
letter-spacing: 0.28em;
|
||
margin: 0 0 0.25rem;
|
||
}
|
||
|
||
.brand-sub,
|
||
.eyebrow {
|
||
color: var(--gold);
|
||
font-size: clamp(0.75rem, 1.2vh, 0.9375rem);
|
||
font-weight: 800;
|
||
letter-spacing: 0.36em;
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.hero-copy h1,
|
||
.section-heading h2,
|
||
.poetry-main-card h2 {
|
||
margin: clamp(0.35rem, 1vh, 0.85rem) 0;
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
font-size: clamp(1.75rem, 4.2vh, 3.75rem);
|
||
line-height: 1.1;
|
||
letter-spacing: -0.05em;
|
||
}
|
||
|
||
.hero-text,
|
||
.section-heading p,
|
||
.poetry-main-card p {
|
||
max-width: 48rem;
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: clamp(0.875rem, 1.5vh, 1.125rem);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
margin-top: clamp(0.75rem, 2vh, 1.5rem);
|
||
}
|
||
|
||
.hero-visual {
|
||
position: relative;
|
||
display: grid;
|
||
min-height: 0;
|
||
width: 100%;
|
||
height: min(62vh, 34rem);
|
||
max-height: 62vh;
|
||
place-items: center;
|
||
border-radius: 1.5rem;
|
||
overflow: hidden;
|
||
background:
|
||
radial-gradient(ellipse at center, rgba(8, 10, 14, 0.92) 0%, rgba(8, 10, 14, 0.55) 48%, transparent 72%);
|
||
}
|
||
|
||
.hero-bottle {
|
||
width: auto;
|
||
height: min(56vh, 30rem);
|
||
max-width: min(36vw, 22rem);
|
||
min-width: 0;
|
||
object-fit: contain;
|
||
filter: drop-shadow(0 1.25rem 2rem rgba(0, 0, 0, 0.45));
|
||
animation: floatBottle 7s ease-in-out infinite;
|
||
}
|
||
|
||
.brand-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.25fr) minmax(12rem, 0.7fr);
|
||
gap: clamp(0.75rem, 1.5vw, 1.25rem);
|
||
align-items: stretch;
|
||
min-height: 0;
|
||
max-height: 48vh;
|
||
}
|
||
|
||
.heritage-figure,
|
||
.store-figure {
|
||
margin: 0;
|
||
min-height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.heritage-figure img,
|
||
.store-figure img {
|
||
width: 100%;
|
||
height: 100%;
|
||
max-height: 40vh;
|
||
object-fit: cover;
|
||
border: 1px solid rgba(122, 75, 38, 0.18);
|
||
box-shadow: 0 1rem 2.5rem rgba(83, 42, 18, 0.1);
|
||
}
|
||
|
||
.heritage-figure figcaption,
|
||
.store-figure figcaption {
|
||
margin-top: 0.35rem;
|
||
color: var(--muted);
|
||
font-size: 0.75rem;
|
||
letter-spacing: 0.18em;
|
||
text-align: center;
|
||
}
|
||
|
||
.store-figure {
|
||
display: none;
|
||
}
|
||
|
||
.store-figure img {
|
||
max-height: 18vh;
|
||
}
|
||
|
||
.vertical-poem {
|
||
position: absolute;
|
||
right: 2vw;
|
||
top: 12%;
|
||
color: rgba(167, 25, 34, 0.24);
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
font-size: clamp(2.125rem, 4vw, 4rem);
|
||
font-weight: 800;
|
||
letter-spacing: 0.3em;
|
||
writing-mode: vertical-rl;
|
||
}
|
||
|
||
.section-heading {
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
.centered {
|
||
margin: 0 auto;
|
||
text-align: center;
|
||
}
|
||
|
||
.heritage-grid,
|
||
.three-columns,
|
||
.tech-grid,
|
||
.ports-grid,
|
||
.partner-list,
|
||
.data-band {
|
||
display: grid;
|
||
gap: clamp(0.5rem, 1.2vh, 0.875rem);
|
||
min-height: 0;
|
||
}
|
||
|
||
.heritage-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
grid-template-rows: repeat(2, minmax(0, 1fr));
|
||
height: 100%;
|
||
}
|
||
|
||
.paper-card,
|
||
.three-columns article,
|
||
.craft-card {
|
||
border: 1px solid rgba(122, 75, 38, 0.18);
|
||
background: rgba(255, 250, 240, 0.74);
|
||
box-shadow: 0 0.75rem 2rem rgba(83, 42, 18, 0.08);
|
||
min-height: 0;
|
||
}
|
||
|
||
.paper-card {
|
||
display: grid;
|
||
align-content: start;
|
||
gap: 0.35rem;
|
||
min-height: 0;
|
||
padding: clamp(0.75rem, 1.4vh, 1.1rem);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.paper-card p {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 4;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
font-size: clamp(0.75rem, 1.35vh, 0.9375rem);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.paper-card span,
|
||
.three-columns span {
|
||
color: var(--red);
|
||
font-weight: 800;
|
||
letter-spacing: 0.22em;
|
||
font-size: clamp(0.75rem, 1.3vh, 0.875rem);
|
||
}
|
||
|
||
.paper-card p,
|
||
.three-columns p,
|
||
.craft-card p,
|
||
.loop-diagram p,
|
||
.tech-grid p,
|
||
.ports-grid p {
|
||
color: var(--muted);
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
}
|
||
|
||
.timeline {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
margin-top: 0;
|
||
border-top: 1px solid rgba(167, 25, 34, 0.25);
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
padding: 0.75rem 0.75rem 0;
|
||
color: #5d432e;
|
||
font-weight: 700;
|
||
font-size: clamp(0.75rem, 1.4vh, 0.9375rem);
|
||
}
|
||
|
||
.timeline-item::before {
|
||
position: absolute;
|
||
top: -0.35rem;
|
||
left: 0.75rem;
|
||
width: 0.55rem;
|
||
height: 0.55rem;
|
||
border-radius: 50%;
|
||
background: var(--red);
|
||
content: '';
|
||
}
|
||
|
||
.closing-line {
|
||
margin: 0;
|
||
color: var(--red);
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
font-size: clamp(0.9375rem, 1.8vh, 1.25rem);
|
||
text-align: center;
|
||
}
|
||
|
||
.poetry-section {
|
||
grid-template-columns: minmax(0, 1.1fr) minmax(14rem, 0.65fr);
|
||
align-items: stretch;
|
||
}
|
||
|
||
.poetry-main-card {
|
||
display: grid;
|
||
align-content: center;
|
||
gap: clamp(0.35rem, 1vh, 0.75rem);
|
||
min-height: 0;
|
||
max-height: 78vh;
|
||
overflow: hidden;
|
||
padding: clamp(1rem, 2.5vh, 2rem);
|
||
border: 1px solid rgba(167, 25, 34, 0.18);
|
||
background: rgba(255, 250, 242, 0.65);
|
||
}
|
||
|
||
.poetry-main-card .lead,
|
||
.poetry-main-card > p {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.poetry-main-card .closing-inline {
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
blockquote {
|
||
margin: clamp(0.35rem, 1vh, 0.85rem) 0;
|
||
color: var(--ink);
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
}
|
||
|
||
blockquote span,
|
||
blockquote strong,
|
||
blockquote cite {
|
||
display: block;
|
||
}
|
||
|
||
blockquote span,
|
||
blockquote strong {
|
||
font-size: clamp(1.35rem, 3.2vh, 2.75rem);
|
||
line-height: 1.25;
|
||
}
|
||
|
||
blockquote strong {
|
||
color: var(--red);
|
||
}
|
||
|
||
blockquote cite {
|
||
margin-top: 0.35rem;
|
||
color: var(--muted);
|
||
font-size: clamp(0.75rem, 1.3vh, 0.9375rem);
|
||
}
|
||
|
||
.poetry-tags {
|
||
display: grid;
|
||
gap: clamp(0.5rem, 1.2vh, 0.75rem);
|
||
min-height: 0;
|
||
max-height: 78vh;
|
||
align-content: stretch;
|
||
}
|
||
|
||
.poetry-tags article {
|
||
display: grid;
|
||
align-content: center;
|
||
gap: 0.35rem;
|
||
min-height: 0;
|
||
padding: clamp(0.75rem, 1.6vh, 1.15rem);
|
||
overflow: hidden;
|
||
border: 1px solid rgba(122, 75, 38, 0.16);
|
||
background: rgba(255, 255, 255, 0.44);
|
||
}
|
||
|
||
.poetry-tags b {
|
||
font-size: clamp(1rem, 2vh, 1.35rem);
|
||
}
|
||
|
||
.poetry-tags span {
|
||
font-size: clamp(0.75rem, 1.4vh, 0.9375rem);
|
||
line-height: 1.4;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.poetry-tags b {
|
||
color: var(--red);
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
}
|
||
|
||
.poetry-tags article {
|
||
border-left: 0.25rem solid var(--red);
|
||
}
|
||
|
||
.poetry-tags small {
|
||
color: var(--muted);
|
||
font-size: clamp(0.7rem, 1.2vh, 0.8125rem);
|
||
}
|
||
|
||
.data-band {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.data-band div {
|
||
padding: 2.125rem;
|
||
border: 1px solid rgba(167, 25, 34, 0.18);
|
||
background: linear-gradient(135deg, rgba(167, 25, 34, 0.1), rgba(255, 255, 255, 0.45));
|
||
}
|
||
|
||
.data-band strong,
|
||
.data-band span,
|
||
.data-band small {
|
||
display: block;
|
||
}
|
||
|
||
.data-band strong {
|
||
color: var(--red);
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
font-size: clamp(2.75rem, 5vw, 5.125rem);
|
||
}
|
||
|
||
.feature-layout {
|
||
display: grid;
|
||
grid-template-columns: 0.8fr 1.2fr;
|
||
gap: 1.375rem;
|
||
}
|
||
|
||
.position-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.position-grid article,
|
||
.partner-list span {
|
||
display: grid;
|
||
min-height: 6.5rem;
|
||
border: 1px solid rgba(201, 154, 69, 0.45);
|
||
color: var(--red);
|
||
background: rgba(255, 255, 255, 0.35);
|
||
}
|
||
|
||
.position-grid article {
|
||
align-content: start;
|
||
gap: 0.625rem;
|
||
padding: 1.25rem;
|
||
}
|
||
|
||
.position-grid h3 {
|
||
margin: 0;
|
||
font-size: 1.1875rem;
|
||
letter-spacing: 0.18em;
|
||
}
|
||
|
||
.position-grid p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 0.875rem;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.partner-list span {
|
||
place-items: center;
|
||
font-weight: 800;
|
||
letter-spacing: 0.18em;
|
||
}
|
||
|
||
.craft-card {
|
||
padding: 2.125rem;
|
||
}
|
||
|
||
.craft-card h3 {
|
||
margin: 0 0 1.125rem;
|
||
color: var(--red);
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
font-size: clamp(2.5rem, 5vw, 4.625rem);
|
||
}
|
||
|
||
.craft-points {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.625rem;
|
||
margin-top: 1.375rem;
|
||
}
|
||
|
||
.craft-points span {
|
||
padding: 0.5rem 0.75rem;
|
||
border: 1px solid rgba(167, 25, 34, 0.24);
|
||
border-radius: 999px;
|
||
color: var(--red);
|
||
background: rgba(255, 255, 255, 0.35);
|
||
font-size: 0.8125rem;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tasting {
|
||
display: flex;
|
||
gap: 1.125rem;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.tasting span {
|
||
display: grid;
|
||
width: 4.5rem;
|
||
height: 4.5rem;
|
||
place-items: center;
|
||
border: 1px solid rgba(167, 25, 34, 0.28);
|
||
border-radius: 50%;
|
||
color: var(--red);
|
||
font-size: 1.75rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.tasting-detail {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 0.875rem;
|
||
margin-top: 1.5rem;
|
||
}
|
||
|
||
.tasting-detail div {
|
||
padding: 1rem;
|
||
border: 1px solid rgba(167, 25, 34, 0.18);
|
||
background: rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
.tasting-detail strong {
|
||
display: grid;
|
||
width: 3rem;
|
||
height: 3rem;
|
||
place-items: center;
|
||
margin-bottom: 0.625rem;
|
||
border: 1px solid rgba(167, 25, 34, 0.28);
|
||
border-radius: 50%;
|
||
color: var(--red);
|
||
font-size: 1.375rem;
|
||
}
|
||
|
||
.tasting-detail p {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 0.875rem;
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.footnote {
|
||
margin: 0;
|
||
color: var(--muted);
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.three-columns {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.three-columns article {
|
||
min-height: 15.625rem;
|
||
padding: 2.125rem;
|
||
}
|
||
|
||
.three-columns h3 {
|
||
margin: 1.25rem 0 0.75rem;
|
||
color: var(--ink);
|
||
font-size: 1.75rem;
|
||
}
|
||
|
||
.loop-diagram {
|
||
display: grid;
|
||
grid-template-columns: 1fr auto 1fr auto 1fr;
|
||
align-items: center;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.loop-diagram article {
|
||
min-height: 13.125rem;
|
||
padding: 2rem;
|
||
border: 1px solid rgba(167, 25, 34, 0.18);
|
||
background: rgba(255, 250, 240, 0.66);
|
||
}
|
||
|
||
.loop-diagram b {
|
||
color: var(--red);
|
||
font-size: 1.625rem;
|
||
}
|
||
|
||
.loop-arrow {
|
||
color: var(--gold);
|
||
font-size: 2.75rem;
|
||
}
|
||
|
||
.tech-section {
|
||
overflow: hidden;
|
||
color: #f8f2e5;
|
||
background:
|
||
linear-gradient(180deg, rgba(5, 7, 13, 0.45), rgba(5, 7, 13, 0.72)),
|
||
url('/assets/tech-bg.svg') center / cover no-repeat,
|
||
var(--tech);
|
||
background-size: auto, cover, auto;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.tech-drive-section {
|
||
background-image:
|
||
linear-gradient(105deg, rgba(5, 7, 13, 0.72) 0%, rgba(5, 7, 13, 0.35) 48%, rgba(5, 7, 13, 0.55) 100%),
|
||
url('/assets/bg-tech.png');
|
||
background-position: center, center right;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.subsidy-section {
|
||
background-image:
|
||
linear-gradient(180deg, rgba(5, 7, 13, 0.55), rgba(5, 7, 13, 0.4) 45%, rgba(5, 7, 13, 0.7)),
|
||
url('/assets/bg-subsidy.png');
|
||
background-position: center, center;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
text-align: center;
|
||
}
|
||
|
||
.partner-section {
|
||
background-image:
|
||
linear-gradient(105deg, rgba(5, 7, 13, 0.78) 0%, rgba(5, 7, 13, 0.42) 52%, rgba(5, 7, 13, 0.55) 100%),
|
||
url('/assets/bg-partner.png');
|
||
background-position: center, right center;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.tech-detail-section {
|
||
background-image:
|
||
linear-gradient(105deg, rgba(5, 7, 13, 0.78) 0%, rgba(5, 7, 13, 0.38) 50%, rgba(5, 7, 13, 0.55) 100%),
|
||
url('/assets/bg-tech-detail.png');
|
||
background-position: center, right center;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.contact-section {
|
||
grid-template-columns: minmax(0, 1fr) 22.5rem;
|
||
background-image:
|
||
linear-gradient(180deg, rgba(5, 7, 13, 0.55), rgba(5, 7, 13, 0.45) 50%, rgba(5, 7, 13, 0.7)),
|
||
url('/assets/bg-contact.png');
|
||
background-position: center, center;
|
||
background-size: auto, cover;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.dark-heading h2,
|
||
.dark-heading p {
|
||
color: #fff4df;
|
||
}
|
||
|
||
.dark-heading p {
|
||
opacity: 0.76;
|
||
}
|
||
|
||
.tech-orbit {
|
||
position: absolute;
|
||
right: 10vw;
|
||
top: 20vh;
|
||
width: 26.875rem;
|
||
height: 26.875rem;
|
||
border: 1px solid rgba(201, 154, 69, 0.22);
|
||
border-radius: 50%;
|
||
box-shadow: inset 0 0 5rem rgba(167, 25, 34, 0.14), 0 0 5.625rem rgba(201, 154, 69, 0.08);
|
||
}
|
||
|
||
.tech-grid {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
|
||
.tech-grid article,
|
||
.ports-grid article,
|
||
.partner-list span,
|
||
.qr-card,
|
||
.stage-panel {
|
||
border: 1px solid var(--tech-line);
|
||
background: var(--tech-card);
|
||
backdrop-filter: blur(1.125rem);
|
||
}
|
||
|
||
.tech-grid article,
|
||
.ports-grid article {
|
||
min-height: 11.875rem;
|
||
padding: 1.75rem;
|
||
}
|
||
|
||
.tech-grid span,
|
||
.ports-grid h3 {
|
||
color: var(--gold-light);
|
||
font-size: 1.5rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.subsidy-number {
|
||
color: transparent;
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
font-size: clamp(7rem, 18vw, 16.25rem);
|
||
font-weight: 900;
|
||
line-height: 0.9;
|
||
background: linear-gradient(180deg, #fff5d2, #c99a45 46%, #a71922);
|
||
background-clip: text;
|
||
-webkit-background-clip: text;
|
||
filter: drop-shadow(0 0 2.625rem rgba(167, 25, 34, 0.45));
|
||
}
|
||
|
||
.dark-footnote {
|
||
color: rgba(255, 244, 223, 0.66);
|
||
}
|
||
|
||
.partner-list {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
|
||
.partner-detail-grid,
|
||
.system-grid,
|
||
.subsidy-points {
|
||
display: grid;
|
||
gap: 1.125rem;
|
||
}
|
||
|
||
.partner-detail-grid {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.partner-detail-grid article,
|
||
.system-grid article,
|
||
.subsidy-points article {
|
||
padding: 1.5rem;
|
||
border: 1px solid var(--tech-line);
|
||
background: var(--tech-card);
|
||
}
|
||
|
||
.system-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
}
|
||
|
||
.system-grid article,
|
||
.system-section .closing-line,
|
||
.system-section .loop-line {
|
||
border-color: rgba(167, 25, 34, 0.18);
|
||
background: rgba(255, 250, 240, 0.7);
|
||
color: var(--ink);
|
||
}
|
||
|
||
.system-grid h3,
|
||
.partner-detail-grid h3,
|
||
.subsidy-points h3 {
|
||
margin: 0 0 0.625rem;
|
||
color: var(--gold-light);
|
||
font-size: 1.375rem;
|
||
}
|
||
|
||
.system-grid h3 {
|
||
color: var(--red);
|
||
}
|
||
|
||
.system-grid p,
|
||
.partner-detail-grid p,
|
||
.subsidy-points p {
|
||
margin: 0;
|
||
line-height: 1.7;
|
||
opacity: 0.86;
|
||
}
|
||
|
||
.system-grid small {
|
||
display: block;
|
||
margin-top: 0.875rem;
|
||
color: var(--muted);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.partner-detail-grid .span-2 {
|
||
grid-column: span 2;
|
||
}
|
||
|
||
.subsidy-points {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
text-align: left;
|
||
}
|
||
|
||
.number-desc,
|
||
.industry-claim,
|
||
.loop-line,
|
||
.mode-line,
|
||
.mission-line,
|
||
.product-tag,
|
||
.contact-hint,
|
||
.contact-role,
|
||
.sub-title {
|
||
color: inherit;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.mode-line,
|
||
.mission-line,
|
||
.product-tag {
|
||
color: var(--red);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.sub-title {
|
||
color: var(--gold-light);
|
||
font-size: 1.375rem;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.industry-claim,
|
||
.number-desc,
|
||
.contact-hint {
|
||
color: rgba(255, 244, 223, 0.78);
|
||
}
|
||
|
||
.tech-highlights {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.75rem;
|
||
justify-content: center;
|
||
}
|
||
|
||
.tech-highlights span {
|
||
padding: 0.625rem 1rem;
|
||
border: 1px solid rgba(201, 154, 69, 0.35);
|
||
color: var(--gold-light);
|
||
background: rgba(167, 25, 34, 0.16);
|
||
}
|
||
|
||
.section-cta {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.lead,
|
||
.closing-inline,
|
||
.craft-extra {
|
||
color: var(--muted);
|
||
line-height: 1.8;
|
||
}
|
||
|
||
.dark-closing {
|
||
color: rgba(255, 244, 223, 0.9);
|
||
}
|
||
|
||
.tech-secondary {
|
||
border-color: rgba(241, 217, 154, 0.45);
|
||
color: var(--gold-light);
|
||
background: transparent;
|
||
}
|
||
|
||
.tech-button {
|
||
width: fit-content;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.reveal-section .hero-copy,
|
||
.reveal-card,
|
||
.reveal-number {
|
||
animation: fadeRise 0.9s ease both;
|
||
}
|
||
|
||
@keyframes fadeRise {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(1.5rem);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.ports-grid {
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
}
|
||
|
||
.contact-person {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 1.75rem;
|
||
margin-top: 1.75rem;
|
||
}
|
||
|
||
.contact-person strong {
|
||
color: var(--gold-light);
|
||
font-size: 2.625rem;
|
||
}
|
||
|
||
.contact-person a {
|
||
color: #fff;
|
||
font-size: 2rem;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.qr-card {
|
||
display: grid;
|
||
justify-items: center;
|
||
gap: 1rem;
|
||
padding: 1.75rem;
|
||
}
|
||
|
||
.qr-card img {
|
||
width: 15rem;
|
||
height: 15rem;
|
||
border-radius: 1.125rem;
|
||
background: #fff;
|
||
}
|
||
|
||
.footer {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1rem 1.75rem;
|
||
padding: 2.375rem 1.75rem 2.875rem;
|
||
color: rgba(255, 244, 223, 0.74);
|
||
background: #050609;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer strong {
|
||
color: var(--gold-light);
|
||
}
|
||
|
||
.footer p {
|
||
flex-basis: 100%;
|
||
max-width: 56.25rem;
|
||
margin: 0;
|
||
font-size: 0.8125rem;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.progress-bar {
|
||
position: fixed;
|
||
left: 0;
|
||
bottom: 0;
|
||
z-index: 80;
|
||
width: 100%;
|
||
height: 0.3125rem;
|
||
background: rgba(255, 255, 255, 0.16);
|
||
}
|
||
|
||
.progress-bar.with-label {
|
||
height: 2.625rem;
|
||
display: grid;
|
||
align-items: end;
|
||
background: rgba(5, 7, 13, 0.88);
|
||
border-top: 1px solid rgba(201, 154, 69, 0.28);
|
||
}
|
||
|
||
.progress-bar div {
|
||
height: 0.3125rem;
|
||
background: linear-gradient(90deg, var(--red), var(--gold));
|
||
transition: width 0.32s ease;
|
||
}
|
||
|
||
.progress-label {
|
||
position: absolute;
|
||
left: 1.5rem;
|
||
bottom: 0.625rem;
|
||
color: #fff4df;
|
||
font-size: 0.875rem;
|
||
letter-spacing: 0.16em;
|
||
}
|
||
|
||
.stage-panel {
|
||
position: fixed;
|
||
right: 1.75rem;
|
||
bottom: 1.75rem;
|
||
z-index: 70;
|
||
width: 19.5rem;
|
||
padding: 1rem;
|
||
border: 1px solid rgba(201, 154, 69, 0.28);
|
||
border-radius: 1.25rem;
|
||
color: #fff4df;
|
||
background: rgba(12, 14, 22, 0.82);
|
||
backdrop-filter: blur(0.875rem);
|
||
box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
|
||
}
|
||
|
||
.stage-status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.625rem;
|
||
color: var(--gold-light);
|
||
font-size: 0.8125rem;
|
||
font-weight: 800;
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.stage-status-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.stage-status-right b {
|
||
font-variant-numeric: tabular-nums;
|
||
font-size: 0.8125rem;
|
||
}
|
||
|
||
.stage-collapse-btn {
|
||
padding: 0.25rem 0.625rem;
|
||
border: 1px solid rgba(201, 154, 69, 0.4);
|
||
border-radius: 999px;
|
||
color: #fff4df;
|
||
background: rgba(255, 255, 255, 0.06);
|
||
font-size: 0.75rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.stage-collapse-btn:hover {
|
||
background: rgba(201, 154, 69, 0.22);
|
||
}
|
||
|
||
.stage-panel p {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 3;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
margin: 0.625rem 0 0.75rem;
|
||
color: rgba(255, 244, 223, 0.72);
|
||
font-size: 0.8125rem;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.autoplay-row,
|
||
.highlight-jumps,
|
||
.stage-qr-grid {
|
||
display: grid;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.autoplay-row {
|
||
grid-template-columns: 1fr 1fr;
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
|
||
.highlight-jumps {
|
||
grid-template-columns: repeat(3, 1fr);
|
||
margin-bottom: 0.875rem;
|
||
}
|
||
|
||
.autoplay-row button,
|
||
.highlight-jumps button {
|
||
min-height: 2.25rem;
|
||
padding: 0.5rem 0.625rem;
|
||
border: 1px solid rgba(201, 154, 69, 0.28);
|
||
border-radius: 999px;
|
||
color: #fff4df;
|
||
background: rgba(167, 25, 34, 0.28);
|
||
font-size: 0.8125rem;
|
||
cursor: pointer;
|
||
transition: background 0.2s ease, border-color 0.2s ease;
|
||
}
|
||
|
||
.autoplay-row button:hover,
|
||
.highlight-jumps button:hover {
|
||
border-color: rgba(201, 154, 69, 0.55);
|
||
background: rgba(167, 25, 34, 0.42);
|
||
}
|
||
|
||
.autoplay-row button.is-on {
|
||
background: rgba(201, 154, 69, 0.38);
|
||
border-color: rgba(201, 154, 69, 0.6);
|
||
}
|
||
|
||
.stage-qr-grid {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
margin-top: 0.625rem;
|
||
}
|
||
|
||
.stage-qr-grid div {
|
||
display: grid;
|
||
justify-items: center;
|
||
gap: 0.375rem;
|
||
padding: 0.5rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
border-radius: 0.75rem;
|
||
background: rgba(255, 255, 255, 0.03);
|
||
}
|
||
|
||
.stage-qr-grid img {
|
||
width: 4.5rem;
|
||
height: 4.5rem;
|
||
border-radius: 0.5rem;
|
||
background: #fff;
|
||
}
|
||
|
||
.stage-qr-grid span,
|
||
.stage-keys {
|
||
color: rgba(255, 244, 223, 0.55);
|
||
font-size: 0.6875rem;
|
||
text-align: center;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.stage-keys {
|
||
margin-top: 0.625rem;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.stage-panel-toggle {
|
||
position: fixed;
|
||
right: 1.25rem;
|
||
bottom: 3.625rem;
|
||
z-index: 70;
|
||
min-width: 4.5rem;
|
||
padding: 0.75rem 1.125rem;
|
||
border: 1px solid rgba(201, 154, 69, 0.45);
|
||
border-radius: 999px;
|
||
color: #fff4df;
|
||
background: rgba(12, 14, 22, 0.88);
|
||
backdrop-filter: blur(0.75rem);
|
||
box-shadow: 0 0.625rem 1.75rem rgba(0, 0, 0, 0.35);
|
||
font-size: 0.875rem;
|
||
font-weight: 700;
|
||
letter-spacing: 0.12em;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.stage-panel-toggle:hover {
|
||
background: rgba(167, 25, 34, 0.55);
|
||
border-color: rgba(201, 154, 69, 0.7);
|
||
}
|
||
|
||
.stage-click-zone {
|
||
position: fixed;
|
||
top: 0;
|
||
bottom: 2.625rem;
|
||
z-index: 65;
|
||
width: min(18vw, 11.25rem);
|
||
border: 0;
|
||
background: transparent;
|
||
color: rgba(255, 244, 223, 0.55);
|
||
cursor: pointer;
|
||
transition: background 0.2s ease, color 0.2s ease;
|
||
}
|
||
|
||
.stage-click-zone span {
|
||
display: grid;
|
||
width: 3rem;
|
||
height: 3rem;
|
||
place-items: center;
|
||
border: 1px solid rgba(201, 154, 69, 0.28);
|
||
border-radius: 50%;
|
||
background: rgba(8, 9, 15, 0.28);
|
||
font-size: 2.125rem;
|
||
line-height: 1;
|
||
opacity: 0;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
|
||
.stage-click-prev {
|
||
left: 0;
|
||
}
|
||
|
||
.stage-click-next {
|
||
right: 0;
|
||
}
|
||
|
||
.stage-click-prev span {
|
||
margin-left: 1.125rem;
|
||
}
|
||
|
||
.stage-click-next span {
|
||
margin-left: auto;
|
||
margin-right: 1.125rem;
|
||
}
|
||
|
||
.stage-click-zone:hover {
|
||
background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent);
|
||
color: #f1d99a;
|
||
}
|
||
|
||
.stage-click-next:hover {
|
||
background: linear-gradient(270deg, rgba(0, 0, 0, 0.12), transparent);
|
||
}
|
||
|
||
.stage-click-zone:hover span,
|
||
.stage-click-zone:focus-visible span {
|
||
opacity: 1;
|
||
}
|
||
|
||
.stage-click-zone:disabled {
|
||
cursor: default;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.stage-dots {
|
||
position: fixed;
|
||
left: 1.75rem;
|
||
top: 50%;
|
||
z-index: 70;
|
||
display: grid;
|
||
gap: 0.75rem;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.stage-dots button {
|
||
width: 0.625rem;
|
||
height: 0.625rem;
|
||
padding: 0;
|
||
border: 0;
|
||
border-radius: 999px;
|
||
background: rgba(255, 244, 223, 0.38);
|
||
cursor: pointer;
|
||
transition: transform 0.2s ease, background 0.2s ease;
|
||
}
|
||
|
||
.stage-dots button.active {
|
||
background: var(--gold-light);
|
||
transform: scale(1.75);
|
||
}
|
||
|
||
.stage-mode {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.is-stage {
|
||
width: 100vw;
|
||
height: 100svh;
|
||
}
|
||
|
||
.stage-track {
|
||
display: flex;
|
||
width: max-content;
|
||
height: 100svh;
|
||
transition: transform 0.58s cubic-bezier(0.76, 0, 0.24, 1);
|
||
will-change: transform;
|
||
}
|
||
|
||
.stage-track .page-section {
|
||
flex: 0 0 100vw;
|
||
width: 100vw;
|
||
height: 100svh;
|
||
max-height: 100svh;
|
||
min-height: 100svh;
|
||
box-sizing: border-box;
|
||
display: grid;
|
||
align-content: center;
|
||
gap: clamp(1rem, 2.5vh, 2.375rem);
|
||
padding: clamp(4.5rem, 8vh, 7.75rem) max(2.75rem, calc((100vw - var(--max)) / 2)) clamp(2rem, 4vh, 4.5rem);
|
||
overflow: hidden;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.stage-track .page-section::-webkit-scrollbar {
|
||
display: none;
|
||
width: 0;
|
||
height: 0;
|
||
}
|
||
|
||
.is-stage .haoke-logo-img {
|
||
height: 3rem;
|
||
filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.35));
|
||
}
|
||
|
||
.is-stage .topbar {
|
||
width: auto;
|
||
left: 1.75rem;
|
||
transform: none;
|
||
background: rgba(8, 9, 15, 0.7);
|
||
border-color: rgba(201, 154, 69, 0.28);
|
||
}
|
||
|
||
.is-stage .nav-links,
|
||
.is-stage .nav-cta {
|
||
display: none;
|
||
}
|
||
|
||
.is-stage .footer {
|
||
display: none;
|
||
}
|
||
|
||
.contact-section .footer.in-section {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
.is-stage .brand-lockup small,
|
||
.is-stage .brand-lockup strong {
|
||
color: #fff4df;
|
||
}
|
||
|
||
.is-stage .page-section {
|
||
font-size: clamp(1.125rem, 1.05vw, 1.375rem);
|
||
}
|
||
|
||
.is-stage .hero-copy h1,
|
||
.is-stage .section-heading h2,
|
||
.is-stage .poetry-main-card h2 {
|
||
font-size: clamp(2.75rem, 4.2vw, 4.25rem);
|
||
margin: clamp(0.875rem, 2vh, 1.5rem) 0;
|
||
}
|
||
|
||
.is-stage .hero-text,
|
||
.is-stage .section-heading p,
|
||
.is-stage .poetry-main-card p,
|
||
.is-stage .lead,
|
||
.is-stage .closing-inline {
|
||
font-size: clamp(1.125rem, 1.08vw, 1.375rem);
|
||
line-height: 1.65;
|
||
}
|
||
|
||
.is-stage .ornament {
|
||
width: min(11.25rem, 24vw);
|
||
margin-bottom: clamp(0.5rem, 1vh, 0.875rem);
|
||
}
|
||
|
||
.is-stage .ornament.square-seal,
|
||
.is-stage .ornament.haoke-mark {
|
||
width: clamp(4.5rem, 6vw, 5.5rem);
|
||
}
|
||
|
||
/* Stage poetry: large-screen two-column layout */
|
||
.is-stage .poetry-section {
|
||
grid-template-columns: minmax(0, 1.08fr) minmax(21.25rem, 0.72fr);
|
||
grid-auto-rows: minmax(0, auto);
|
||
gap: clamp(1.75rem, 3vw, 3rem);
|
||
padding-right: max(23.75rem, calc((100vw - var(--max)) / 2 + 21.25rem));
|
||
}
|
||
|
||
.is-stage .poetry-main-card {
|
||
align-self: center;
|
||
display: grid;
|
||
gap: clamp(1.125rem, 2vh, 1.75rem);
|
||
padding: clamp(1.875rem, 4vw, 3.5rem);
|
||
}
|
||
|
||
.is-stage .poetry-main-card blockquote {
|
||
margin: 0;
|
||
}
|
||
|
||
.is-stage .poetry-main-card blockquote span,
|
||
.is-stage .poetry-main-card blockquote strong {
|
||
font-size: clamp(2.75rem, 4.4vw, 4.5rem);
|
||
line-height: 1.15;
|
||
}
|
||
|
||
.is-stage .poetry-main-card blockquote cite {
|
||
margin-top: 0.875rem;
|
||
font-size: clamp(1rem, 1vw, 1.25rem);
|
||
}
|
||
|
||
.is-stage .poetry-tags {
|
||
align-self: center;
|
||
display: grid;
|
||
grid-template-rows: repeat(3, minmax(0, 1fr));
|
||
gap: clamp(1.375rem, 2.5vh, 2rem);
|
||
min-height: min(66vh, 38.75rem);
|
||
}
|
||
|
||
.is-stage .poetry-tags article {
|
||
display: grid;
|
||
align-content: center;
|
||
gap: 0.75rem;
|
||
padding: clamp(1.375rem, 2.3vw, 2.125rem);
|
||
}
|
||
|
||
.is-stage .poetry-tags b {
|
||
font-size: clamp(1.875rem, 2.4vw, 2.625rem);
|
||
}
|
||
|
||
.is-stage .poetry-tags span {
|
||
font-size: clamp(1.125rem, 1.1vw, 1.375rem);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.is-stage .poetry-tags small {
|
||
font-size: clamp(0.9375rem, 0.95vw, 1.125rem);
|
||
}
|
||
|
||
/* Stage qingxiang: three clear zones, no collapse overlap */
|
||
.is-stage .qingxiang-section {
|
||
align-content: start;
|
||
gap: clamp(1.125rem, 2.2vh, 1.75rem);
|
||
padding-top: clamp(5.5rem, 9vh, 6.875rem);
|
||
padding-right: max(22.5rem, calc((100vw - var(--max)) / 2 + 20rem));
|
||
padding-bottom: 4.5rem;
|
||
}
|
||
|
||
.is-stage .qingxiang-section > * {
|
||
position: relative;
|
||
z-index: auto;
|
||
min-height: auto;
|
||
overflow: visible;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .store-figure {
|
||
display: none;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .section-heading {
|
||
max-width: 56.25rem;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .section-heading h2 {
|
||
font-size: clamp(2.5rem, 3.6vw, 3.625rem);
|
||
margin: 0.625rem 0 0.75rem;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .section-heading p {
|
||
font-size: clamp(1rem, 1vw, 1.25rem);
|
||
line-height: 1.6;
|
||
margin: 0;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .ornament {
|
||
width: min(8.75rem, 18vw);
|
||
margin-bottom: 0.375rem;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .ornament.square-seal,
|
||
.is-stage .qingxiang-section .ornament.haoke-mark {
|
||
width: clamp(4rem, 5.5vw, 5rem);
|
||
}
|
||
|
||
.is-stage .qingxiang-section .data-band {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: clamp(1rem, 2vw, 1.5rem);
|
||
}
|
||
|
||
.is-stage .qingxiang-section .data-band div {
|
||
padding: clamp(1rem, 1.6vw, 1.5rem);
|
||
}
|
||
|
||
.is-stage .qingxiang-section .data-band strong {
|
||
font-size: clamp(2.25rem, 3.2vw, 3.5rem);
|
||
line-height: 1.05;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .data-band span,
|
||
.is-stage .qingxiang-section .data-band small {
|
||
font-size: clamp(0.875rem, 0.9vw, 1.0625rem);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .feature-layout {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
|
||
gap: clamp(1rem, 2vw, 1.75rem);
|
||
align-items: stretch;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .position-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
gap: clamp(0.75rem, 1.4vh, 1.125rem);
|
||
}
|
||
|
||
.is-stage .qingxiang-section .position-grid article {
|
||
min-height: 0;
|
||
padding: clamp(0.875rem, 1.4vw, 1.25rem);
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .position-grid h3 {
|
||
font-size: clamp(1.0625rem, 1.05vw, 1.375rem);
|
||
}
|
||
|
||
.is-stage .qingxiang-section .position-grid p {
|
||
font-size: clamp(0.8125rem, 0.85vw, 1rem);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .craft-card {
|
||
display: grid;
|
||
align-content: start;
|
||
gap: clamp(0.625rem, 1.2vh, 1rem);
|
||
padding: clamp(1.125rem, 1.8vw, 1.75rem);
|
||
}
|
||
|
||
.is-stage .qingxiang-section .craft-card h3 {
|
||
margin: 0;
|
||
font-size: clamp(2.25rem, 3.4vw, 3.5rem);
|
||
line-height: 1.1;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .craft-card > p:not(.craft-extra):not(.mission-line):not(.product-tag) {
|
||
font-size: clamp(0.9375rem, 0.95vw, 1.125rem);
|
||
line-height: 1.55;
|
||
margin: 0;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .craft-extra {
|
||
font-size: clamp(0.8125rem, 0.85vw, 0.9375rem);
|
||
line-height: 1.5;
|
||
margin: 0;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .tasting-detail {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 0.625rem;
|
||
margin-top: 0;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .tasting-detail div {
|
||
padding: 0.625rem 0.75rem;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .tasting-detail strong {
|
||
width: 2.5rem;
|
||
height: 2.5rem;
|
||
margin-bottom: 0.375rem;
|
||
font-size: 1.125rem;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .tasting-detail p {
|
||
font-size: clamp(0.75rem, 0.8vw, 0.875rem);
|
||
line-height: 1.45;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .mission-line {
|
||
margin: 0;
|
||
font-size: clamp(0.875rem, 0.9vw, 1rem);
|
||
}
|
||
|
||
.is-stage .qingxiang-section .product-tag {
|
||
margin: 0;
|
||
font-size: clamp(0.8125rem, 0.85vw, 0.9375rem);
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.is-stage .qingxiang-section .footnote {
|
||
margin: 0;
|
||
font-size: clamp(0.75rem, 0.8vw, 0.875rem);
|
||
opacity: 0.85;
|
||
}
|
||
|
||
/* Stage panel clearance */
|
||
.is-stage .stage-panel {
|
||
right: 0.875rem;
|
||
bottom: 3.375rem;
|
||
width: 18.75rem;
|
||
padding: 0.875rem;
|
||
max-height: calc(100svh - 7.5rem);
|
||
overflow: hidden;
|
||
scrollbar-width: none;
|
||
}
|
||
|
||
.is-stage .stage-panel p {
|
||
min-height: 0;
|
||
margin: 0.5rem 0 0.625rem;
|
||
font-size: 0.75rem;
|
||
}
|
||
|
||
.is-stage .stage-qr-grid img {
|
||
width: 4rem;
|
||
height: 4rem;
|
||
}
|
||
|
||
.is-stage .stage-panel-toggle {
|
||
right: 1rem;
|
||
bottom: 3.625rem;
|
||
}
|
||
@keyframes floatBottle {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-0.75rem); }
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
|
||
.hero-section,
|
||
.poetry-section,
|
||
.feature-layout,
|
||
.contact-section,
|
||
.brand-layout {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.heritage-grid,
|
||
.tech-grid,
|
||
.ports-grid,
|
||
.partner-list {
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
}
|
||
|
||
.hero-visual {
|
||
min-height: 0;
|
||
height: min(48vh, 28.75rem);
|
||
max-height: min(48vh, 28.75rem);
|
||
}
|
||
|
||
.stage-panel {
|
||
width: min(22.5rem, calc(100% - 2.5rem));
|
||
right: 1.25rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.topbar {
|
||
width: calc(100% - 1.5rem);
|
||
top: 0.625rem;
|
||
}
|
||
|
||
.page-section {
|
||
height: 100vh;
|
||
height: 100svh;
|
||
max-height: 100vh;
|
||
max-height: 100svh;
|
||
min-height: 100vh;
|
||
min-height: 100svh;
|
||
padding: clamp(4.5rem, 8vh, 6.875rem) 1.25rem clamp(1.5rem, 3vh, 4rem);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-section,
|
||
.poetic-section,
|
||
.brand-section,
|
||
.poetry-section,
|
||
.qingxiang-section,
|
||
.haoke-section,
|
||
.system-section {
|
||
background-size: auto, cover;
|
||
background-position: center, center;
|
||
}
|
||
|
||
.poetic-section {
|
||
background-size: auto, cover, auto;
|
||
}
|
||
|
||
.qingxiang-section {
|
||
background-position: center, center;
|
||
}
|
||
|
||
.system-section {
|
||
background-position: center, center bottom;
|
||
}
|
||
|
||
.tech-section,
|
||
.tech-drive-section,
|
||
.subsidy-section,
|
||
.partner-section,
|
||
.tech-detail-section,
|
||
.contact-section {
|
||
background-size: auto, cover;
|
||
}
|
||
|
||
.hero-actions,
|
||
.contact-person {
|
||
align-items: stretch;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.primary-button,
|
||
.secondary-button {
|
||
width: 100%;
|
||
}
|
||
|
||
.hero-visual img {
|
||
min-width: 12rem;
|
||
}
|
||
|
||
.haoke-logo-img {
|
||
height: 2.25rem;
|
||
}
|
||
|
||
.brand-lockup strong {
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.brand-lockup small {
|
||
font-size: 0.625rem;
|
||
}
|
||
|
||
.heritage-grid,
|
||
.timeline,
|
||
.three-columns,
|
||
.loop-diagram,
|
||
.tech-grid,
|
||
.ports-grid,
|
||
.partner-list,
|
||
.partner-detail-grid,
|
||
.system-grid,
|
||
.subsidy-points,
|
||
.data-band,
|
||
.position-grid,
|
||
.tasting-detail {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.partner-detail-grid .span-2 {
|
||
grid-column: span 1;
|
||
}
|
||
|
||
.loop-arrow {
|
||
transform: rotate(90deg);
|
||
text-align: center;
|
||
}
|
||
|
||
.stage-dots {
|
||
display: none;
|
||
}
|
||
}\n
|
||
|
||
/* ===== Viewport fit: lock each screen to 100vw x 100vh ===== */
|
||
.page-section {
|
||
width: 100vw !important;
|
||
max-width: 100vw !important;
|
||
height: 100vh !important;
|
||
height: 100svh !important;
|
||
max-height: 100vh !important;
|
||
max-height: 100svh !important;
|
||
min-height: 100vh !important;
|
||
min-height: 100svh !important;
|
||
overflow: hidden !important;
|
||
gap: clamp(0.4rem, 1.4vh, 1.1rem) !important;
|
||
}
|
||
|
||
.qingxiang-section .store-figure,
|
||
.qingxiang-section .footnote,
|
||
.qingxiang-section .craft-extra,
|
||
.qingxiang-section .ornament {
|
||
display: none !important;
|
||
}
|
||
|
||
.qingxiang-section .section-heading p {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.data-band div {
|
||
padding: clamp(0.6rem, 1.4vh, 1rem) !important;
|
||
}
|
||
|
||
.data-band strong {
|
||
font-size: clamp(1.35rem, 3.2vh, 2.5rem) !important;
|
||
}
|
||
|
||
.feature-layout {
|
||
max-height: 46vh;
|
||
min-height: 0;
|
||
gap: clamp(0.4rem, 1vh, 0.75rem) !important;
|
||
}
|
||
|
||
.craft-card {
|
||
padding: clamp(0.6rem, 1.4vh, 1rem) !important;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.craft-card h3 {
|
||
margin: 0 !important;
|
||
font-size: clamp(1.35rem, 3vh, 2.25rem) !important;
|
||
}
|
||
|
||
.tasting-detail {
|
||
margin-top: 0.35rem !important;
|
||
gap: 0.45rem !important;
|
||
}
|
||
|
||
.tasting-detail div {
|
||
padding: 0.45rem 0.55rem !important;
|
||
}
|
||
|
||
.tasting-detail strong {
|
||
width: 1.75rem !important;
|
||
height: 1.75rem !important;
|
||
margin-bottom: 0.25rem !important;
|
||
font-size: 0.875rem !important;
|
||
}
|
||
|
||
.tasting-detail p,
|
||
.mission-line,
|
||
.product-tag {
|
||
font-size: clamp(0.7rem, 1.2vh, 0.85rem) !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.three-columns article {
|
||
min-height: 0 !important;
|
||
padding: clamp(0.75rem, 1.6vh, 1.25rem) !important;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.three-columns p {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 4;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
font-size: clamp(0.75rem, 1.3vh, 0.9375rem);
|
||
}
|
||
|
||
.tech-grid article,
|
||
.ports-grid article {
|
||
min-height: 0 !important;
|
||
padding: clamp(0.75rem, 1.5vh, 1.15rem) !important;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tech-grid p,
|
||
.ports-grid p,
|
||
.partner-detail-grid p,
|
||
.subsidy-points p,
|
||
.system-grid p {
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 4;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
font-size: clamp(0.75rem, 1.3vh, 0.9375rem);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.subsidy-number {
|
||
font-size: clamp(3.5rem, 12vh, 8rem) !important;
|
||
line-height: 0.9 !important;
|
||
margin: 0 !important;
|
||
}
|
||
|
||
.number-desc,
|
||
.industry-claim,
|
||
.loop-line,
|
||
.mode-line,
|
||
.contact-hint {
|
||
font-size: clamp(0.75rem, 1.35vh, 0.95rem) !important;
|
||
line-height: 1.4 !important;
|
||
margin: 0 !important;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.partner-detail-grid article,
|
||
.system-grid article,
|
||
.subsidy-points article {
|
||
padding: clamp(0.65rem, 1.3vh, 1rem) !important;
|
||
overflow: hidden;
|
||
min-height: 0;
|
||
}
|
||
|
||
.section-cta {
|
||
margin-top: 0.25rem !important;
|
||
}
|
||
|
||
.primary-button,
|
||
.secondary-button {
|
||
min-width: 9rem;
|
||
padding: 0.65rem 1.15rem !important;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.qr-card {
|
||
padding: 0.75rem !important;
|
||
gap: 0.5rem !important;
|
||
}
|
||
|
||
.qr-card img {
|
||
width: min(28vh, 11rem) !important;
|
||
height: min(28vh, 11rem) !important;
|
||
}
|
||
|
||
.contact-person strong {
|
||
font-size: clamp(1.5rem, 3.5vh, 2.25rem) !important;
|
||
}
|
||
|
||
.contact-person a {
|
||
font-size: clamp(1.15rem, 2.5vh, 1.75rem) !important;
|
||
}
|
||
|
||
.footer.in-section {
|
||
width: 100%;
|
||
max-width: 100%;
|
||
margin-top: clamp(0.35rem, 1vh, 0.75rem);
|
||
padding: 0.65rem 0.75rem !important;
|
||
gap: 0.35rem 0.85rem !important;
|
||
background: rgba(5, 6, 9, 0.55);
|
||
border: 1px solid rgba(201, 154, 69, 0.22);
|
||
border-radius: 0.75rem;
|
||
}
|
||
|
||
.footer.in-section p {
|
||
font-size: 0.7rem !important;
|
||
line-height: 1.4 !important;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
}
|
||
|
||
|
||
|
||
.stage-track .page-section {
|
||
width: 100vw !important;
|
||
height: 100svh !important;
|
||
max-height: 100svh !important;
|
||
overflow: hidden !important;
|
||
}
|
||
|
||
body.stage-mode {
|
||
scroll-snap-type: none;
|
||
}
|
||
|
||
@media (max-width: 1100px) {
|
||
.brand-layout {
|
||
grid-template-columns: 1fr !important;
|
||
max-height: 52vh;
|
||
}
|
||
|
||
.heritage-figure {
|
||
display: none;
|
||
}
|
||
|
||
.hero-visual {
|
||
height: min(42vh, 22rem) !important;
|
||
max-height: 42vh !important;
|
||
}
|
||
|
||
.hero-bottle {
|
||
height: min(38vh, 20rem) !important;
|
||
max-width: min(55vw, 16rem) !important;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.page-section {
|
||
padding: 4.25rem 1rem 1rem !important;
|
||
}
|
||
|
||
.poetry-section,
|
||
.feature-layout,
|
||
.contact-section {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
.poetry-tags {
|
||
display: none;
|
||
}
|
||
|
||
.heritage-grid {
|
||
grid-template-columns: 1fr 1fr !important;
|
||
}
|
||
|
||
.data-band,
|
||
.three-columns,
|
||
.tech-grid,
|
||
.ports-grid,
|
||
.system-grid,
|
||
.subsidy-points,
|
||
.partner-detail-grid {
|
||
grid-template-columns: 1fr 1fr !important;
|
||
}
|
||
|
||
.footer.in-section span:nth-child(n+3),
|
||
.footer.in-section p {
|
||
display: none !important;
|
||
}
|
||
}
|
||
|
||
|
||
/* ===== Alt layouts: pages 4/6/8/10 (non-card rhythm) ===== */
|
||
/* 4 清香: editorial metrics + open list, no boxed tiles */
|
||
.qingxiang-section .data-band {
|
||
gap: 0;
|
||
border-top: 1px solid rgba(167, 25, 34, 0.28);
|
||
border-bottom: 1px solid rgba(167, 25, 34, 0.28);
|
||
}
|
||
|
||
.qingxiang-section .data-band div {
|
||
padding: clamp(0.75rem, 1.8vh, 1.35rem) clamp(0.75rem, 2vw, 1.5rem) !important;
|
||
border: none !important;
|
||
border-right: 1px solid rgba(167, 25, 34, 0.18) !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
.qingxiang-section .data-band div:last-child {
|
||
border-right: none !important;
|
||
}
|
||
|
||
.qingxiang-section .data-band strong {
|
||
letter-spacing: 0.04em;
|
||
}
|
||
|
||
.qingxiang-section .feature-layout {
|
||
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
||
gap: clamp(1rem, 3vw, 2.5rem) !important;
|
||
max-height: none;
|
||
}
|
||
|
||
.qingxiang-section .position-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 0 !important;
|
||
}
|
||
|
||
.qingxiang-section .position-grid article {
|
||
min-height: 0 !important;
|
||
padding: clamp(0.55rem, 1.2vh, 0.85rem) 0 clamp(0.55rem, 1.2vh, 0.85rem) 0.85rem !important;
|
||
border: none !important;
|
||
border-left: 2px solid var(--red) !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
border-radius: 0 !important;
|
||
color: inherit;
|
||
}
|
||
|
||
.qingxiang-section .position-grid h3 {
|
||
color: var(--red);
|
||
font-size: clamp(0.875rem, 1.5vh, 1.05rem);
|
||
}
|
||
|
||
.qingxiang-section .craft-card {
|
||
padding: 0 !important;
|
||
border: none !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
border-radius: 0 !important;
|
||
gap: clamp(0.35rem, 1vh, 0.65rem);
|
||
}
|
||
|
||
.qingxiang-section .craft-card h3 {
|
||
margin: 0 !important;
|
||
padding-bottom: 0.35rem;
|
||
border-bottom: 1px solid rgba(167, 25, 34, 0.22);
|
||
}
|
||
|
||
.qingxiang-section .tasting-detail {
|
||
margin-top: 0.5rem !important;
|
||
gap: 0 !important;
|
||
border-top: 1px solid rgba(122, 75, 38, 0.16);
|
||
}
|
||
|
||
.qingxiang-section .tasting-detail div {
|
||
padding: 0.55rem 0.75rem 0.55rem 0 !important;
|
||
border: none !important;
|
||
border-right: 1px solid rgba(122, 75, 38, 0.14) !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
.qingxiang-section .tasting-detail div:last-child {
|
||
border-right: none !important;
|
||
}
|
||
|
||
.qingxiang-section .tasting-detail strong {
|
||
width: auto !important;
|
||
height: auto !important;
|
||
margin-bottom: 0.25rem !important;
|
||
border: none !important;
|
||
border-radius: 0 !important;
|
||
background: transparent !important;
|
||
color: var(--red);
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
font-size: clamp(1.25rem, 2.4vh, 1.75rem) !important;
|
||
}
|
||
|
||
/* 6 三端协同: process ribbon, not three equal cards */
|
||
.system-section .system-grid {
|
||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||
gap: 0 !important;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.system-section .system-grid article {
|
||
position: relative;
|
||
padding: clamp(0.85rem, 1.8vh, 1.35rem) clamp(0.85rem, 1.6vw, 1.35rem) !important;
|
||
border: none !important;
|
||
border-top: 2px solid var(--red) !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
.system-section .system-grid article:not(:last-child)::after {
|
||
position: absolute;
|
||
top: 42%;
|
||
right: -0.15rem;
|
||
color: var(--gold);
|
||
font-size: 1.25rem;
|
||
font-weight: 700;
|
||
content: '›';
|
||
transform: translateY(-50%);
|
||
opacity: 0.85;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.system-section .system-grid h3 {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.5rem;
|
||
margin-bottom: 0.45rem;
|
||
}
|
||
|
||
.system-section .system-grid article:nth-child(1) h3::before { content: '01'; }
|
||
.system-section .system-grid article:nth-child(2) h3::before { content: '02'; }
|
||
.system-section .system-grid article:nth-child(3) h3::before { content: '03'; }
|
||
|
||
.system-section .system-grid h3::before {
|
||
color: var(--gold);
|
||
font-family: 'Noto Serif SC', 'Songti SC', serif;
|
||
font-size: 0.85em;
|
||
letter-spacing: 0.08em;
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.system-section .loop-line {
|
||
margin-top: 0.35rem;
|
||
padding: 0.65rem 0;
|
||
border: none !important;
|
||
border-top: 1px dashed rgba(167, 25, 34, 0.35) !important;
|
||
background: transparent !important;
|
||
text-align: center;
|
||
letter-spacing: 0.06em;
|
||
}
|
||
|
||
.system-section .closing-line {
|
||
border: none !important;
|
||
background: transparent !important;
|
||
}
|
||
|
||
/* 8 酒厂实力: manifesto rows under giant numeral */
|
||
.subsidy-section .subsidy-points {
|
||
grid-template-columns: 1fr;
|
||
gap: 0 !important;
|
||
max-width: 52rem;
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
}
|
||
|
||
.subsidy-section .subsidy-points article {
|
||
display: grid;
|
||
grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
|
||
gap: 0.75rem 1.25rem;
|
||
align-items: baseline;
|
||
padding: clamp(0.65rem, 1.4vh, 1rem) 0 !important;
|
||
border: none !important;
|
||
border-bottom: 1px solid rgba(241, 217, 154, 0.22) !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
border-radius: 0 !important;
|
||
text-align: left;
|
||
}
|
||
|
||
.subsidy-section .subsidy-points article:last-child {
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
.subsidy-section .subsidy-points h3 {
|
||
margin: 0 !important;
|
||
color: var(--gold-light);
|
||
font-size: clamp(1rem, 2vh, 1.25rem);
|
||
letter-spacing: 0.16em;
|
||
}
|
||
|
||
.subsidy-section .subsidy-points p {
|
||
margin: 0 !important;
|
||
opacity: 0.88;
|
||
}
|
||
|
||
.subsidy-section .number-desc {
|
||
max-width: 40rem;
|
||
margin-left: auto !important;
|
||
margin-right: auto !important;
|
||
text-align: center;
|
||
}
|
||
|
||
/* 10 科技板块: horizontal capability rails */
|
||
.tech-detail-section .ports-grid {
|
||
grid-template-columns: 1fr;
|
||
gap: 0 !important;
|
||
}
|
||
|
||
.tech-detail-section .ports-grid article {
|
||
display: grid;
|
||
grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
|
||
gap: 0.75rem 1.5rem;
|
||
align-items: center;
|
||
min-height: 0 !important;
|
||
padding: clamp(0.7rem, 1.5vh, 1.1rem) 0 clamp(0.7rem, 1.5vh, 1.1rem) 1rem !important;
|
||
border: none !important;
|
||
border-left: 3px solid var(--gold) !important;
|
||
border-bottom: 1px solid rgba(241, 217, 154, 0.16) !important;
|
||
background: transparent !important;
|
||
box-shadow: none !important;
|
||
border-radius: 0 !important;
|
||
backdrop-filter: none !important;
|
||
}
|
||
|
||
.tech-detail-section .ports-grid article:last-child {
|
||
border-bottom: none !important;
|
||
}
|
||
|
||
.tech-detail-section .ports-grid h3 {
|
||
margin: 0;
|
||
font-size: clamp(1.05rem, 2vh, 1.35rem);
|
||
}
|
||
|
||
.tech-detail-section .ports-grid p {
|
||
margin: 0;
|
||
font-size: clamp(0.8rem, 1.35vh, 0.95rem);
|
||
line-height: 1.45;
|
||
-webkit-line-clamp: 2;
|
||
}
|
||
|
||
.tech-detail-section .tech-highlights {
|
||
justify-content: flex-start;
|
||
gap: 0.5rem 1.25rem;
|
||
margin-top: 0.35rem;
|
||
}
|
||
|
||
.tech-detail-section .tech-highlights span {
|
||
padding: 0;
|
||
border: none;
|
||
border-radius: 0;
|
||
background: transparent;
|
||
color: var(--gold-light);
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.tech-detail-section .tech-highlights span::before {
|
||
content: '· ';
|
||
color: var(--red);
|
||
}
|
||
|
||
@media (max-width: 760px) {
|
||
.qingxiang-section .data-band,
|
||
.qingxiang-section .feature-layout,
|
||
.system-section .system-grid,
|
||
.subsidy-section .subsidy-points article,
|
||
.tech-detail-section .ports-grid article {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
|
||
.qingxiang-section .data-band div {
|
||
border-right: none !important;
|
||
border-bottom: 1px solid rgba(167, 25, 34, 0.14) !important;
|
||
}
|
||
|
||
.system-section .system-grid article:not(:last-child)::after {
|
||
top: auto;
|
||
right: 50%;
|
||
bottom: -0.35rem;
|
||
transform: translateX(50%) rotate(90deg);
|
||
}
|
||
}
|
||
|
||
/* ===== Moutai-style Animate.css entrances (brand vs poetry) ===== */
|
||
@keyframes fadeInLeftBig {
|
||
from {
|
||
opacity: 0;
|
||
transform: translate3d(-80%, 0, 0);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInRightBig {
|
||
from {
|
||
opacity: 0;
|
||
transform: translate3d(80%, 0, 0);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInUpBig {
|
||
from {
|
||
opacity: 0;
|
||
transform: translate3d(0, 80%, 0);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceInLeft {
|
||
from,
|
||
60%,
|
||
75%,
|
||
90%,
|
||
to {
|
||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
}
|
||
0% {
|
||
opacity: 0;
|
||
transform: translate3d(-2800px, 0, 0) scaleX(3);
|
||
}
|
||
60% {
|
||
opacity: 1;
|
||
transform: translate3d(25px, 0, 0) scaleX(1);
|
||
}
|
||
75% {
|
||
transform: translate3d(-10px, 0, 0) scaleX(0.98);
|
||
}
|
||
90% {
|
||
transform: translate3d(5px, 0, 0) scaleX(0.995);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes zoomIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: scale3d(0.3, 0.3, 0.3);
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: scale3d(1, 1, 1);
|
||
}
|
||
}
|
||
|
||
@keyframes bounceInRight {
|
||
from,
|
||
60%,
|
||
75%,
|
||
90%,
|
||
to {
|
||
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
|
||
}
|
||
0% {
|
||
opacity: 0;
|
||
transform: translate3d(2800px, 0, 0) scaleX(3);
|
||
}
|
||
60% {
|
||
opacity: 1;
|
||
transform: translate3d(-25px, 0, 0) scaleX(1);
|
||
}
|
||
75% {
|
||
transform: translate3d(10px, 0, 0) scaleX(0.98);
|
||
}
|
||
90% {
|
||
transform: translate3d(-5px, 0, 0) scaleX(0.995);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeInDown {
|
||
from {
|
||
opacity: 0;
|
||
transform: translate3d(0, -40%, 0);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
}
|
||
|
||
/* Brand screen: bounce from left + figure from right (Moutai-like) */
|
||
.brand-section .section-heading,
|
||
.brand-section .paper-card,
|
||
.brand-section .heritage-figure,
|
||
.brand-section .timeline-item,
|
||
.brand-section .closing-line {
|
||
opacity: 0;
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
.brand-section.is-entered .section-heading {
|
||
animation: fadeInDown 0.85s both;
|
||
}
|
||
|
||
.brand-section.is-entered .paper-card {
|
||
animation: bounceInLeft 1s both;
|
||
animation-delay: calc(0.08s + var(--slide-i, 0) * 0.12s);
|
||
}
|
||
|
||
.brand-section.is-entered .heritage-figure {
|
||
animation: fadeInRightBig 1s both;
|
||
animation-delay: 0.28s;
|
||
}
|
||
|
||
.brand-section.is-entered .timeline-item {
|
||
animation: fadeInUpBig 0.85s both;
|
||
animation-delay: calc(0.45s + var(--slide-i, 0) * 0.1s);
|
||
}
|
||
|
||
.brand-section.is-entered .closing-line {
|
||
animation: fadeInUpBig 0.75s both;
|
||
animation-delay: 0.85s;
|
||
}
|
||
|
||
/* Poetry screen: zoom main card + bounce tags from right (different from brand) */
|
||
.poetry-section .poetry-main-card,
|
||
.poetry-section .poetry-tags article {
|
||
opacity: 0;
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
.poetry-section.is-entered .poetry-main-card {
|
||
animation: zoomIn 0.95s both;
|
||
animation-delay: 0.06s;
|
||
}
|
||
|
||
.poetry-section .poetry-main-card.reveal-card {
|
||
animation: none;
|
||
opacity: 0;
|
||
}
|
||
|
||
.poetry-section.is-entered .poetry-main-card.reveal-card {
|
||
animation: zoomIn 0.95s both;
|
||
animation-delay: 0.06s;
|
||
}
|
||
|
||
.poetry-section.is-entered .poetry-tags article {
|
||
animation: bounceInRight 1.05s both;
|
||
animation-delay: calc(0.22s + var(--slide-i, 0) * 0.15s);
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.brand-section .section-heading,
|
||
.brand-section .paper-card,
|
||
.brand-section .heritage-figure,
|
||
.brand-section .timeline-item,
|
||
.brand-section .closing-line,
|
||
.poetry-section .poetry-main-card,
|
||
.poetry-section .poetry-tags article {
|
||
opacity: 1 !important;
|
||
animation: none !important;
|
||
transform: none !important;
|
||
}
|
||
}
|