Timmy
04907e1ac6
- eight-drunken-styles.html (醉翁八態) - liquor-tasting.html (品酒程序) - shoe-size.html (鞋子尺寸對照表)
552 lines
14 KiB
HTML
552 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-TW">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>飲酒七方 · 品酒程序</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;600;900&family=Cinzel:wght@400;700&family=Noto+Sans+TC:wght@300;400&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--gold: #c9a84c;
|
|
--gold-light: #e8cb7a;
|
|
--gold-dim: #7a6030;
|
|
--bg: #0d0d0d;
|
|
--surface: #141414;
|
|
--surface2: #1c1c1c;
|
|
--text: #e8e0d0;
|
|
--text-dim: #8a8070;
|
|
--border: rgba(201,168,76,0.2);
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html { scroll-behavior: smooth; }
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: 'Noto Serif TC', serif;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* === NOISE TEXTURE === */
|
|
body::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* === HERO === */
|
|
.hero {
|
|
position: relative;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(201,168,76,0.08) 0%, transparent 70%);
|
|
}
|
|
|
|
.hero-deco {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 600px;
|
|
height: 600px;
|
|
border: 1px solid rgba(201,168,76,0.06);
|
|
border-radius: 50%;
|
|
animation: pulse-ring 6s ease-in-out infinite;
|
|
}
|
|
.hero-deco:nth-child(2) {
|
|
width: 450px; height: 450px;
|
|
border-color: rgba(201,168,76,0.1);
|
|
animation-delay: -2s;
|
|
}
|
|
.hero-deco:nth-child(3) {
|
|
width: 300px; height: 300px;
|
|
border-color: rgba(201,168,76,0.15);
|
|
animation-delay: -4s;
|
|
}
|
|
|
|
@keyframes pulse-ring {
|
|
0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
|
|
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
|
|
}
|
|
|
|
.hero-content { position: relative; z-index: 2; }
|
|
|
|
.hero-en {
|
|
font-family: 'Cinzel', serif;
|
|
font-size: clamp(0.7rem, 1.5vw, 0.85rem);
|
|
letter-spacing: 0.5em;
|
|
color: var(--gold);
|
|
text-transform: uppercase;
|
|
opacity: 0;
|
|
animation: fade-up 1s ease forwards 0.3s;
|
|
}
|
|
|
|
.hero-zh {
|
|
font-size: clamp(3rem, 10vw, 7rem);
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
margin: 0.3em 0 0.2em;
|
|
background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 40%, var(--gold-dim) 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
opacity: 0;
|
|
animation: fade-up 1s ease forwards 0.6s;
|
|
}
|
|
|
|
.hero-sub {
|
|
font-size: clamp(0.8rem, 2vw, 1rem);
|
|
font-weight: 300;
|
|
color: var(--text-dim);
|
|
letter-spacing: 0.3em;
|
|
opacity: 0;
|
|
animation: fade-up 1s ease forwards 0.9s;
|
|
}
|
|
|
|
.hero-line {
|
|
width: 1px;
|
|
height: 80px;
|
|
background: linear-gradient(to bottom, var(--gold), transparent);
|
|
margin: 2.5rem auto 0;
|
|
opacity: 0;
|
|
animation: fade-up 1s ease forwards 1.2s;
|
|
}
|
|
|
|
@keyframes fade-up {
|
|
from { opacity: 0; transform: translateY(20px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* === SECTION === */
|
|
section {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 6rem 2rem;
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1.5rem;
|
|
margin-bottom: 4rem;
|
|
}
|
|
|
|
.section-title::before, .section-title::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, var(--gold-dim), transparent);
|
|
}
|
|
|
|
.section-title h2 {
|
|
font-family: 'Cinzel', serif;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.4em;
|
|
color: var(--gold);
|
|
text-transform: uppercase;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* === SEVEN WAYS === */
|
|
.ways-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 1.5px;
|
|
background: var(--border);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
.way-card {
|
|
background: var(--surface);
|
|
padding: 2.5rem 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: background 0.4s ease;
|
|
cursor: default;
|
|
}
|
|
|
|
.way-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 3px;
|
|
height: 0;
|
|
background: var(--gold);
|
|
transition: height 0.4s ease;
|
|
}
|
|
|
|
.way-card:hover { background: var(--surface2); }
|
|
.way-card:hover::before { height: 100%; }
|
|
|
|
.way-char {
|
|
font-size: 3.5rem;
|
|
font-weight: 900;
|
|
line-height: 1;
|
|
background: linear-gradient(135deg, var(--gold-light), var(--gold));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
margin-bottom: 0.4rem;
|
|
}
|
|
|
|
.way-en {
|
|
font-family: 'Cinzel', serif;
|
|
font-size: 0.65rem;
|
|
letter-spacing: 0.35em;
|
|
color: var(--gold-dim);
|
|
text-transform: uppercase;
|
|
margin-bottom: 1.2rem;
|
|
}
|
|
|
|
.way-desc {
|
|
font-size: 0.9rem;
|
|
font-weight: 300;
|
|
line-height: 2;
|
|
color: var(--text-dim);
|
|
font-family: 'Noto Sans TC', sans-serif;
|
|
}
|
|
|
|
.way-num {
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
right: 1.5rem;
|
|
font-family: 'Cinzel', serif;
|
|
font-size: 0.6rem;
|
|
color: rgba(201,168,76,0.2);
|
|
letter-spacing: 0.1em;
|
|
}
|
|
|
|
/* === TASTING PROCEDURE === */
|
|
.procedure-section {
|
|
background: var(--surface);
|
|
border-top: 1px solid var(--border);
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.procedure-section > section {
|
|
padding-top: 5rem;
|
|
padding-bottom: 5rem;
|
|
}
|
|
|
|
.steps-flow {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
position: relative;
|
|
}
|
|
|
|
.steps-flow::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 60px;
|
|
left: calc(12.5% + 10px);
|
|
right: calc(12.5% + 10px);
|
|
height: 1px;
|
|
background: linear-gradient(to right, var(--gold-dim), var(--gold), var(--gold-dim));
|
|
}
|
|
|
|
.step {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 0 1rem;
|
|
opacity: 0;
|
|
animation: fade-up 0.8s ease forwards;
|
|
}
|
|
|
|
.step:nth-child(1) { animation-delay: 0.1s; }
|
|
.step:nth-child(2) { animation-delay: 0.3s; }
|
|
.step:nth-child(3) { animation-delay: 0.5s; }
|
|
.step:nth-child(4) { animation-delay: 0.7s; }
|
|
|
|
.step-circle {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--gold);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--bg);
|
|
position: relative;
|
|
z-index: 1;
|
|
transition: all 0.4s ease;
|
|
box-shadow: 0 0 30px rgba(201,168,76,0.05);
|
|
}
|
|
|
|
.step-circle:hover {
|
|
background: rgba(201,168,76,0.08);
|
|
box-shadow: 0 0 50px rgba(201,168,76,0.15);
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.step-zh {
|
|
font-size: 2rem;
|
|
font-weight: 900;
|
|
color: var(--gold-light);
|
|
line-height: 1;
|
|
}
|
|
|
|
.step-en {
|
|
font-family: 'Cinzel', serif;
|
|
font-size: 0.55rem;
|
|
letter-spacing: 0.2em;
|
|
color: var(--gold-dim);
|
|
text-transform: uppercase;
|
|
margin-top: 0.3rem;
|
|
}
|
|
|
|
.step-attrs {
|
|
margin-top: 2rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
|
|
.step-attrs span {
|
|
font-size: 0.82rem;
|
|
color: var(--text-dim);
|
|
font-family: 'Noto Sans TC', sans-serif;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.step-attrs .en-attr {
|
|
font-family: 'Cinzel', serif;
|
|
font-size: 0.55rem;
|
|
color: rgba(201,168,76,0.3);
|
|
letter-spacing: 0.1em;
|
|
margin-top: 0.8rem;
|
|
}
|
|
|
|
/* === FOOTER === */
|
|
footer {
|
|
text-align: center;
|
|
padding: 3rem 2rem;
|
|
border-top: 1px solid var(--border);
|
|
font-family: 'Cinzel', serif;
|
|
font-size: 0.6rem;
|
|
letter-spacing: 0.4em;
|
|
color: var(--gold-dim);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* === SCROLL REVEAL === */
|
|
.reveal {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
transition: opacity 0.8s ease, transform 0.8s ease;
|
|
}
|
|
.reveal.visible {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* === RESPONSIVE === */
|
|
@media (max-width: 768px) {
|
|
.steps-flow {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 3rem 1rem;
|
|
}
|
|
.steps-flow::before { display: none; }
|
|
.ways-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.steps-flow { grid-template-columns: 1fr; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- HERO -->
|
|
<div class="hero">
|
|
<div class="hero-deco"></div>
|
|
<div class="hero-deco"></div>
|
|
<div class="hero-deco"></div>
|
|
<div class="hero-content">
|
|
<p class="hero-en">The Art of Chinese Liquor</p>
|
|
<h1 class="hero-zh">飲酒七方</h1>
|
|
<p class="hero-sub">七種飲酒之道 · 一套品酒程序</p>
|
|
<div class="hero-line"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SEVEN WAYS -->
|
|
<section>
|
|
<div class="section-title">
|
|
<h2>Seven Ways of Liquor Drinking</h2>
|
|
</div>
|
|
<div class="ways-grid reveal">
|
|
<div class="way-card">
|
|
<span class="way-num">01</span>
|
|
<div class="way-char">壯</div>
|
|
<div class="way-en">Drink Bravely</div>
|
|
<div class="way-desc">鴻圖壯志心未止，飲乾一壺笑看天</div>
|
|
</div>
|
|
<div class="way-card">
|
|
<span class="way-num">02</span>
|
|
<div class="way-char">放</div>
|
|
<div class="way-en">Drink Freely</div>
|
|
<div class="way-desc">任由酒花白眼亂，何不一回酒中仙</div>
|
|
</div>
|
|
<div class="way-card">
|
|
<span class="way-num">03</span>
|
|
<div class="way-char">覬</div>
|
|
<div class="way-en">Drink Lustfully</div>
|
|
<div class="way-desc">胸前瑞雪燈斜照，眼底桃花酒半醺。美人在懷，秋波盈盈，飲酒一杯已三分</div>
|
|
</div>
|
|
<div class="way-card">
|
|
<span class="way-num">04</span>
|
|
<div class="way-char">獨</div>
|
|
<div class="way-en">Drink Alone</div>
|
|
<div class="way-desc">一仰盡盅酒，舉杯邀邀月</div>
|
|
</div>
|
|
<div class="way-card">
|
|
<span class="way-num">05</span>
|
|
<div class="way-char">對</div>
|
|
<div class="way-en">Drink in Pairs</div>
|
|
<div class="way-desc">但求知音相對飲，隔桌呼取盡餘杯</div>
|
|
</div>
|
|
<div class="way-card">
|
|
<span class="way-num">06</span>
|
|
<div class="way-char">共</div>
|
|
<div class="way-en">Drink in Groups</div>
|
|
<div class="way-desc">開壇猛生花醉月，群朋聚飲樂無邊。催酒興來難知盡，千杯不醉似神仙</div>
|
|
</div>
|
|
<div class="way-card">
|
|
<span class="way-num">07</span>
|
|
<div class="way-char">豪</div>
|
|
<div class="way-en">Drink Generously</div>
|
|
<div class="way-desc">醉臥沙場君莫笑，瀟瀟滄海歸何年</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- PROCEDURE -->
|
|
<div class="procedure-section">
|
|
<section>
|
|
<div class="section-title">
|
|
<h2>Procedure of Liquor Tasting</h2>
|
|
</div>
|
|
<div class="steps-flow">
|
|
<div class="step">
|
|
<div class="step-circle">
|
|
<div class="step-zh">看</div>
|
|
<div class="step-en">Look</div>
|
|
</div>
|
|
<div class="step-attrs">
|
|
<span>光澤</span>
|
|
<span>顏色</span>
|
|
<span>清晰度</span>
|
|
<span class="en-attr">gloss · color · clarity</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-circle">
|
|
<div class="step-zh">嗅</div>
|
|
<div class="step-en">Smell</div>
|
|
</div>
|
|
<div class="step-attrs">
|
|
<span>果香 · 花香 · 藥香</span>
|
|
<span>清香 · 濃香</span>
|
|
<span>醬香 · 醇香</span>
|
|
<span class="en-attr">fruity · flowery · herbal<br>refreshing · strong · mellow</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-circle">
|
|
<div class="step-zh">喝</div>
|
|
<div class="step-en">Taste</div>
|
|
</div>
|
|
<div class="step-attrs">
|
|
<span>酸</span>
|
|
<span>甜</span>
|
|
<span>苦</span>
|
|
<span>澀</span>
|
|
<span>鹹</span>
|
|
<span class="en-attr">sour · sweet · bitter · astringent · salty</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-circle">
|
|
<div class="step-zh">回味</div>
|
|
<div class="step-en">Savor</div>
|
|
</div>
|
|
<div class="step-attrs">
|
|
<span>平滑</span>
|
|
<span>柔和</span>
|
|
<span>爽口</span>
|
|
<span>圓正</span>
|
|
<span class="en-attr">smooth · supple · fresh · round</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<footer>
|
|
飲酒七方 · Seven Ways of Liquor Drinking · 品酒程序
|
|
</footer>
|
|
|
|
<script>
|
|
// Scroll reveal
|
|
const reveals = document.querySelectorAll('.reveal');
|
|
const observer = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add('visible');
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
reveals.forEach(el => observer.observe(el));
|
|
|
|
// Staggered card reveal
|
|
const cards = document.querySelectorAll('.way-card');
|
|
const cardObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const cards = entry.target.querySelectorAll('.way-card');
|
|
cards.forEach((card, i) => {
|
|
setTimeout(() => {
|
|
card.style.opacity = '1';
|
|
card.style.transform = 'translateY(0)';
|
|
}, i * 80);
|
|
});
|
|
}
|
|
});
|
|
}, { threshold: 0.1 });
|
|
|
|
document.querySelectorAll('.ways-grid').forEach(grid => {
|
|
grid.querySelectorAll('.way-card').forEach(card => {
|
|
card.style.opacity = '0';
|
|
card.style.transform = 'translateY(20px)';
|
|
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease, background 0.4s ease';
|
|
});
|
|
cardObserver.observe(grid);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|