: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(68vh, 38rem); max-height: 68vh; place-items: center; overflow: visible; background: transparent; } .hero-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle closest-side at center, rgba(8, 10, 14, 0.92) 0%, rgba(8, 10, 14, 0.55) 58%, transparent 100%); pointer-events: none; z-index: 0; } .hero-bottle { position: relative; z-index: 1; 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, .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; } .contact-phone { display: inline-block; text-decoration: none; -webkit-tap-highlight-color: rgba(241, 217, 154, 0.35); touch-action: manipulation; cursor: pointer; } .qr-card { display: grid; justify-items: center; align-self: center; gap: 1.35rem; margin-block: 1.75rem; padding: 3.75rem 1.75rem 3.5rem; border: 1px solid rgba(201, 154, 69, 0.2); border-radius: 1.25rem; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 1px 0 rgba(255, 244, 223, 0.06); backdrop-filter: blur(1.125rem); } .qr-card img { width: 14.5rem; height: 14.5rem; padding: 0.65rem; border-radius: 0.75rem; background: #fff; box-sizing: border-box; object-fit: contain; } .qr-card span { max-width: 13.5rem; margin: 0; color: rgba(255, 244, 223, 0.72); font-size: 0.8125rem; letter-spacing: 0.08em; line-height: 1.6; text-align: center; } .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 .hero-actions, .is-stage .section-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 .contact-section .qr-card { margin-block: 1.75rem !important; padding: 3.75rem 1.75rem 3.5rem !important; gap: 1.35rem !important; border: 1px solid rgba(201, 154, 69, 0.2); border-radius: 1.25rem; background: rgba(255, 255, 255, 0.045); box-shadow: inset 0 1px 0 rgba(255, 244, 223, 0.06); backdrop-filter: blur(1.125rem); } .is-stage .contact-section .qr-card img { width: min(22rem, 32vh) !important; height: min(22rem, 32vh) !important; padding: 0.85rem !important; border-radius: 0.75rem; background: #fff; box-sizing: border-box; object-fit: contain; } .is-stage .contact-section .qr-card span { max-width: 13.5rem; color: rgba(255, 244, 223, 0.72); font-size: 0.8125rem !important; letter-spacing: 0.08em; line-height: 1.6 !important; text-align: center; } .is-stage .stage-panel-toggle { right: 1rem; bottom: 3.625rem; } @keyframes floatBottle { 0%, 100% { transform: translateY(0) rotate(-10deg); } 50% { transform: translateY(-2rem) rotate(0deg); } } @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; } } /* ===== 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 { margin-block: clamp(0.75rem, 2vh, 1.5rem) !important; padding: 2.25rem 0.9rem 2.1rem !important; gap: 0.85rem !important; } .qr-card img { width: min(28vh, 11rem) !important; height: min(28vh, 11rem) !important; padding: 0.45rem !important; } .qr-card span { font-size: clamp(0.7rem, 1.2vh, 0.8125rem) !important; line-height: 1.5 !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; } } /* ===== Mobile (≤760px): each section = one screen; PC/stage unchanged ===== */ @media (max-width: 760px) { .site:not(.is-stage) .page-section { height: 100vh !important; height: 100svh !important; max-height: 100vh !important; max-height: 100svh !important; min-height: 100vh !important; min-height: 100svh !important; overflow-x: hidden !important; overflow-y: auto !important; align-content: center !important; align-content: safe center !important; justify-items: stretch !important; align-items: stretch !important; gap: 1.1rem !important; padding: 5rem 1.15rem 2rem !important; scroll-snap-align: start; scroll-snap-stop: always; -webkit-overflow-scrolling: touch; } .site:not(.is-stage) .page-section > *:not(.ink-cloud):not(.tech-orbit) { min-height: 0; max-width: 100%; min-width: 0; } /* Wrap-friendly typography on narrow screens */ .site:not(.is-stage) .brand-main { letter-spacing: 0.12em !important; overflow-wrap: anywhere; word-break: break-word; } .site:not(.is-stage) .brand-sub, .site:not(.is-stage) .eyebrow { letter-spacing: 0.16em !important; white-space: normal !important; overflow-wrap: anywhere; } .site:not(.is-stage) .hero-copy h1, .site:not(.is-stage) .section-heading h2, .site:not(.is-stage) .poetry-main-card h2, .site:not(.is-stage) .craft-card h3 { letter-spacing: 0.02em !important; overflow-wrap: anywhere; word-break: break-word; line-height: 1.25 !important; } .site:not(.is-stage) .hero-text, .site:not(.is-stage) .section-heading p, .site:not(.is-stage) .poetry-main-card p, .site:not(.is-stage) .lead, .site:not(.is-stage) .closing-line, .site:not(.is-stage) .closing-inline, .site:not(.is-stage) .loop-line, .site:not(.is-stage) .mode-line, .site:not(.is-stage) .footnote, .site:not(.is-stage) .dark-footnote, .site:not(.is-stage) .mission-line, .site:not(.is-stage) .product-tag, .site:not(.is-stage) .contact-hint, .site:not(.is-stage) .contact-role { max-width: 100% !important; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; line-height: 1.6 !important; } .site:not(.is-stage) .section-heading, .site:not(.is-stage) .hero-copy { width: 100%; max-width: 100%; min-width: 0; } .site:not(.is-stage) .paper-card span, .site:not(.is-stage) .three-columns span, .site:not(.is-stage) .position-grid h3, .site:not(.is-stage) .partner-list span { letter-spacing: 0.08em !important; white-space: normal !important; overflow-wrap: anywhere; } .site:not(.is-stage) .data-band strong { letter-spacing: 0.02em !important; overflow-wrap: anywhere; word-break: break-word; } .site:not(.is-stage) .data-band span, .site:not(.is-stage) .data-band small, .site:not(.is-stage) .paper-card p, .site:not(.is-stage) .three-columns p, .site:not(.is-stage) .tech-grid p, .site:not(.is-stage) .ports-grid p, .site:not(.is-stage) .system-grid p, .site:not(.is-stage) .subsidy-points p, .site:not(.is-stage) .partner-detail-grid p, .site:not(.is-stage) .position-grid p { white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; } .site:not(.is-stage) .primary-button, .site:not(.is-stage) .secondary-button, .site:not(.is-stage) .nav-cta { white-space: normal !important; text-align: center; line-height: 1.35; } /* Qingxiang: single column, spacing, no overlap */ .site:not(.is-stage) .qingxiang-section .feature-layout { grid-template-columns: 1fr !important; max-height: none !important; gap: 1.5rem !important; } .site:not(.is-stage) .qingxiang-section .data-band { grid-template-columns: 1fr !important; gap: 0 !important; } .site:not(.is-stage) .qingxiang-section .data-band div { padding: 1rem 0 !important; border: none !important; border-bottom: 1px solid rgba(167, 25, 34, 0.18) !important; } .site:not(.is-stage) .qingxiang-section .data-band div:last-child { border-bottom: none !important; } .site:not(.is-stage) .qingxiang-section .data-band strong { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; line-height: 1.15; } .site:not(.is-stage) .qingxiang-section .data-band span, .site:not(.is-stage) .qingxiang-section .data-band small { font-size: 0.8125rem !important; line-height: 1.55 !important; margin-top: 0.35rem; } .site:not(.is-stage) .qingxiang-section .section-heading p { display: block !important; -webkit-line-clamp: unset; overflow: visible !important; } .site:not(.is-stage) .qingxiang-section .position-grid { grid-template-columns: 1fr !important; gap: 0.75rem !important; margin-top: 0.25rem; } .site:not(.is-stage) .qingxiang-section .position-grid article { min-height: 0 !important; padding: 0.75rem 0 0.75rem 0.85rem !important; } .site:not(.is-stage) .qingxiang-section .position-grid h3 { font-size: 1rem !important; } .site:not(.is-stage) .qingxiang-section .position-grid p { font-size: 0.875rem !important; line-height: 1.55 !important; } .site:not(.is-stage) .qingxiang-section .craft-card { padding: 0 !important; overflow: visible !important; } .site:not(.is-stage) .qingxiang-section .craft-card h3 { font-size: 1.5rem !important; } .site:not(.is-stage) .qingxiang-section .craft-card > p:not(.craft-extra):not(.mission-line):not(.product-tag) { display: block !important; font-size: 0.875rem !important; line-height: 1.6 !important; -webkit-line-clamp: unset; overflow: visible !important; } .site:not(.is-stage) .qingxiang-section .tasting-detail { grid-template-columns: 1fr !important; gap: 0 !important; margin-top: 0.75rem !important; } .site:not(.is-stage) .qingxiang-section .tasting-detail div { display: flex !important; align-items: center; gap: 0.75rem; padding: 0.75rem 0 !important; border: none !important; border-bottom: 1px solid rgba(122, 75, 38, 0.14) !important; } .site:not(.is-stage) .qingxiang-section .tasting-detail div:last-child { border-bottom: none !important; } .site:not(.is-stage) .qingxiang-section .tasting-detail strong { width: 2.25rem !important; height: 2.25rem !important; margin: 0 !important; flex-shrink: 0; font-size: 1rem !important; } .site:not(.is-stage) .qingxiang-section .tasting-detail p, .site:not(.is-stage) .qingxiang-section .mission-line, .site:not(.is-stage) .qingxiang-section .product-tag { font-size: 0.8125rem !important; line-height: 1.5 !important; } .site:not(.is-stage) .qingxiang-section .store-figure, .site:not(.is-stage) .qingxiang-section .footnote, .site:not(.is-stage) .qingxiang-section .craft-extra, .site:not(.is-stage) .qingxiang-section .ornament { display: none !important; } /* Hero */ .site:not(.is-stage) .hero-section { grid-template-columns: 1fr !important; } .site:not(.is-stage) .hero-visual { height: auto !important; max-height: none !important; min-height: 16rem; margin-block: 0.5rem 1rem; } .site:not(.is-stage) .hero-bottle { height: min(42vh, 18rem) !important; max-width: min(70vw, 14rem) !important; } .site:not(.is-stage) .hero-actions { flex-direction: column; align-items: stretch; } /* Brand / poetry / other grids */ .site:not(.is-stage) .brand-layout { grid-template-columns: 1fr !important; max-height: none !important; } .site:not(.is-stage) .heritage-figure { display: none; } .site:not(.is-stage) .heritage-grid, .site:not(.is-stage) .timeline, .site:not(.is-stage) .three-columns, .site:not(.is-stage) .tech-grid, .site:not(.is-stage) .ports-grid, .site:not(.is-stage) .system-grid, .site:not(.is-stage) .subsidy-points, .site:not(.is-stage) .partner-detail-grid, .site:not(.is-stage) .partner-list, .site:not(.is-stage) .data-band { grid-template-columns: 1fr !important; } .site:not(.is-stage) .feature-layout { max-height: none !important; grid-template-columns: 1fr !important; } .site:not(.is-stage) .paper-card, .site:not(.is-stage) .three-columns article, .site:not(.is-stage) .tech-grid article, .site:not(.is-stage) .ports-grid article, .site:not(.is-stage) .partner-detail-grid article, .site:not(.is-stage) .system-grid article, .site:not(.is-stage) .subsidy-points article { overflow: visible !important; min-height: 0 !important; } .site:not(.is-stage) .paper-card p, .site:not(.is-stage) .three-columns p, .site:not(.is-stage) .tech-grid p, .site:not(.is-stage) .ports-grid p, .site:not(.is-stage) .partner-detail-grid p, .site:not(.is-stage) .subsidy-points p, .site:not(.is-stage) .system-grid p { display: block !important; -webkit-line-clamp: unset; overflow: visible !important; font-size: 0.875rem !important; line-height: 1.55 !important; } .site:not(.is-stage) .poetry-section { grid-template-columns: 1fr !important; } .site:not(.is-stage) .poetry-tags { display: none; } .site:not(.is-stage) .contact-section { grid-template-columns: 1fr !important; } .site:not(.is-stage) .contact-person { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .site:not(.is-stage) .contact-phone { padding: 0.35rem 0; border-bottom: 1px solid rgba(241, 217, 154, 0.45); color: var(--gold-light); font-size: clamp(1.35rem, 6vw, 1.85rem) !important; letter-spacing: 0.04em; pointer-events: auto; position: relative; z-index: 2; } .site:not(.is-stage) .qr-card { margin-block: 1rem !important; padding: 1.75rem 1.25rem !important; width: 100%; max-width: 20rem; justify-self: center; } .site:not(.is-stage) .qr-card img { width: min(70vw, 14.5rem) !important; height: min(70vw, 14.5rem) !important; max-width: none !important; max-height: none !important; padding: 0.65rem !important; border-radius: 0.75rem; background: #fff; box-sizing: border-box; object-fit: contain !important; } .site:not(.is-stage) .footer.in-section { margin-top: 1.5rem; } .site:not(.is-stage) .subsidy-number { font-size: clamp(4rem, 22vw, 7rem) !important; } }