@font-face { font-family: "Switzer"; src: url("fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Nine TC"; src: url("fonts/noto-sans-tc-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; }
@font-face { font-family: "Nine TC"; src: url("fonts/noto-sans-tc-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+FF00-FFEF; }
:root {
--bg: #ffffff;
--surface: #F1F3F6;
--ink: #1D3768;
--muted: #535C73;
--field: #1D3768;
--field-ink: #F4F5F7;
--accent: #C42B2B;
--accent-press: #A32222;
--font: "Switzer", "Nine TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
--step-small: 0.9375rem;
--step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
--step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
--step-head: clamp(2rem, 1.4rem + 2vw, 2.75rem);
--step-hero: clamp(3.25rem, 5.8vw, 5.75rem);
--margin: clamp(16px, 2.2vw, 32px);
--gap-section: clamp(96px, 11vw, 180px);
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
--t-press: 140ms; --t-hover: 180ms; --t-ui: 240ms; --t-reveal: 800ms;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--step-body)/1.5 var(--font); letter-spacing: -0.01em; overflow-x: clip; }
img, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.03em; line-height: 1.1; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--bg); padding: 12px 16px; }
.skip:focus { top: 12px; }
html[lang="zh-Hant"] body { line-height: 1.8; letter-spacing: 0.04em; line-break: strict; }
html[lang="zh-Hant"] h1, html[lang="zh-Hant"] h2, html[lang="zh-Hant"] h3, html[lang="zh-Hant"] .line, html[lang="zh-Hant"] .foot-menu a { letter-spacing: 0.04em; line-height: 1.3; font-weight: 500; text-wrap: balance; }
html[lang="zh-Hant"] .line { font-size: clamp(3rem, 5.2vw, 5.25rem); line-height: 1.25; }
html[lang="zh-Hant"] .item-top { letter-spacing: 0.06em; }
html[lang="zh-Hant"] .item-d { font-size: var(--step-body); }
html[lang="zh-Hant"] .marks { letter-spacing: 0.02em; }
html[lang="zh-Hant"] .side-r, html[lang="zh-Hant"] .count { letter-spacing: 0.06em; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border: 0; border-radius: 0; background: var(--accent); color: #fff; font-weight: 500; text-decoration: none; cursor: pointer; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.btn:hover { background: var(--accent-press); }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-wide { width: 100%; }
.hero { position: relative; min-height: 100svh; background: var(--field); color: var(--field-ink); overflow: hidden; display: flex; flex-direction: column; }
.bar { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 12px var(--margin); }
.wordmark { font-weight: 500; text-decoration: none; padding: 10px 0; justify-self: start; }
.links { display: flex; gap: 28px; }
.links a, .lang { text-decoration: none; padding: 10px 0; transition: opacity var(--t-hover) ease; }
.links a:hover, .lang:hover { text-decoration: underline; }
.bar-end { justify-self: end; display: flex; align-items: center; gap: 20px; }
.lang { background: none; border: 0; cursor: pointer; min-width: 44px; }
.tab { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--field-ink); color: var(--ink); font-weight: 500; text-decoration: none; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.tab:hover { background: #fff; }
.tab:active { transform: scale(0.97); }
.stage { position: relative; flex: 1; display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding: 0 var(--margin); align-content: center; min-height: 560px; }
.line { position: relative; z-index: 2; grid-column: 1 / 7; font-size: var(--step-hero); line-height: 1.02; letter-spacing: -0.035em; }
.line-1 { margin-top: -6vh; }
.side { position: relative; z-index: 2; font-size: var(--step-body); }
.side-l { grid-column: 1 / 5; margin-top: 36px; max-width: 40ch; }
.status { margin-top: 14px; font-weight: 500; }
.status::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #7FD08A; margin-right: 10px; vertical-align: 1px; }
.status.closed::before { background: #9AA6BF; }
.side-r { grid-column: 1 / 5; margin-top: 28px; color: #C9D2E3; font-size: var(--step-small); font-variant-numeric: tabular-nums; }
.plates { position: absolute; z-index: 1; right: 2vw; top: 50%; margin-top: -38vh; height: min(76vh, 760px); aspect-ratio: 1; transform: rotate(-8deg); }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1600ms ease; }
.plate.on { opacity: 1; }
.menu { padding: var(--gap-section) var(--margin); max-width: 1440px; margin: 0 auto; }
.menu-head { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: end; }
.menu-head h2 { grid-column: 1 / 6; font-size: var(--step-hero); line-height: 1; }
.menu-head p { grid-column: 7 / 12; max-width: 52ch; }
.jump { display: none; }
.cat { margin-top: 80px; }
.cat-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 40px; }
.cat-head h3 { font-size: var(--step-head); }
.count { color: var(--muted); font-size: var(--step-small); }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 64px; }
.item { display: grid; grid-template-columns: 96px 1fr 44px; gap: 22px; align-items: center; }
.item img { width: 96px; height: 96px; object-fit: contain; transition: transform var(--t-ui) var(--ease-out); }
.item:hover img { transform: scale(1.08) rotate(-4deg); }
.item-top { display: flex; justify-content: space-between; gap: 16px; font-weight: 500; font-size: var(--step-lead); letter-spacing: -0.02em; }
.marks { font-size: var(--step-small); color: var(--muted); font-weight: 400; margin-left: 6px; white-space: nowrap; }
.price { font-variant-numeric: tabular-nums; }
.item-d { margin-top: 4px; max-width: 44ch; color: var(--muted); }
.add { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; font-variant-numeric: tabular-nums; transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.add:hover { background: #E2E6EE; }
.add:active { transform: scale(0.9); }
.add.has { background: var(--ink); color: var(--bg); font-size: var(--step-small); font-weight: 500; }
.add.bump { animation: bump 320ms var(--ease-out); }
@keyframes bump { 40% { transform: scale(1.15); } }
.nojs-note { margin-top: 48px; color: var(--muted); }
html.js .nojs-note { display: none; }
.about { position: relative; margin: 0 20px; min-height: 104svh; background: var(--field); color: var(--field-ink); overflow: hidden; display: grid; grid-template-columns: 63fr 37fr; }
.about-l { position: relative; padding: 56px; }
.about-l h2 { font-size: var(--step-head); }
.portrait { position: absolute; left: 56px; bottom: 56px; width: min(34vw, 540px); aspect-ratio: 1; object-fit: cover; clip-path: circle(50%); }
.about-r { padding: 56px 56px 56px 0; display: flex; flex-direction: column; gap: 56px; align-items: flex-start; max-width: 400px; }
.about-r h3 { font-size: var(--step-lead); margin-bottom: 12px; }
.about-r p { color: #DCE2EE; }
.sequence { margin-top: var(--gap-section); }
.frame { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.frame figcaption { position: absolute; left: var(--margin); bottom: var(--margin); padding: 10px 14px; background: rgba(15, 18, 26, 0.72); color: #fff; font-size: var(--step-small); max-width: 46ch; }
.visit { position: relative; min-height: 100svh; overflow: hidden; background: #3a3a36; }
.visit-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card { position: relative; z-index: 1; width: 400px; margin: 60px 60px 60px auto; background: var(--bg); padding: 32px 32px 0; }
.card h2 { font-size: var(--step-head); }
.addr { margin-top: 14px; }
.hours { margin-top: 22px; font-variant-numeric: tabular-nums; }
.hours div { display: flex; justify-content: space-between; gap: 16px; padding: 6px 0; }
.hours dt { color: var(--muted); }
.phone { margin: 18px 0 26px; }
.phone a { display: inline-block; padding: 10px 0; font-weight: 500; }
.card .btn { margin: 0 -32px; width: calc(100% + 64px); min-height: 56px; }
.foot { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: var(--surface); }
.foot-photo { width: 100%; height: 100%; object-fit: cover; }
.foot-r { padding: 80px var(--margin) 32px 8vw; display: flex; flex-direction: column; }
.foot-mark { font-weight: 500; }
.foot-menu { margin-top: 40px; display: grid; gap: 14px; }
.foot-menu a { display: inline-block; font-size: var(--step-head); letter-spacing: -0.03em; text-decoration: none; transition: transform var(--t-ui) var(--ease-out), color var(--t-hover) ease; }
.foot-menu:hover a { color: var(--muted); }
.foot-menu a:hover, .foot-menu a:focus-visible { color: var(--ink); transform: translateX(12px); }
.foot-blocks { margin-top: 64px; display: flex; gap: 48px; font-size: var(--step-small); }
.foot-blocks a { display: inline-block; padding: 6px 0; }
.legal { margin-top: auto; padding-top: 48px; font-size: var(--step-small); color: var(--muted); max-width: 60ch; }
.orderbar { position: fixed; right: var(--margin); bottom: var(--margin); z-index: 20; width: min(440px, calc(100vw - 2 * var(--margin))); }
.orderbar button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 58px; padding: 0 20px; border: 0; background: var(--ink); color: var(--bg); font-weight: 500; cursor: pointer; box-shadow: 0 10px 30px rgba(10, 20, 40, 0.28);  transition: transform var(--t-press) var(--ease-out); }
.orderbar button:active { transform: scale(0.985); }
.orderbar span:last-child { text-decoration: underline; }
.orderbar.in { animation: bar-in 420ms var(--ease-out); }
@keyframes bar-in { from { transform: translateY(24px); opacity: 0; } }
.sheet { border: 0; padding: 0; width: min(480px, 100vw); max-height: 100dvh; margin: 0 0 0 auto; height: 100dvh; background: var(--bg); color: var(--ink); }
.sheet::backdrop { background: rgba(15, 22, 40, 0.45); }
.sheet[open] { animation: sheet-in 360ms var(--ease-out); }
@keyframes sheet-in { from { transform: translateX(40px); opacity: 0; } }
.sheet-in { padding: 24px 28px 40px; display: flex; flex-direction: column; gap: 10px; }
.sheet-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sheet h2 { font-size: var(--step-head); }
.x { width: 44px; height: 44px; border: 0; background: var(--surface); font-size: 24px; cursor: pointer; border-radius: 50%; }
.sheet label { font-size: var(--step-small); font-weight: 500; margin-top: 10px; }
.sheet input, .sheet select { width: 100%; min-height: 50px; padding: 0 14px; border: 0; border-radius: 0; background: var(--surface); font-size: 16px; }
.sheet input:focus, .sheet select:focus { outline: 2px solid var(--ink); outline-offset: 0; }
.sheet .btn { margin-top: 18px; }
.empty { color: var(--muted); }
.lines li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.qty { display: inline-flex; align-items: center; gap: 4px; }
.qty button { width: 44px; height: 44px; border: 0; background: none; font-size: 20px; cursor: pointer; color: var(--muted); }
.qty button:hover { color: var(--ink); }
.total { display: flex; justify-content: space-between; font-weight: 500; padding-top: 10px; margin-top: 4px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair > div { display: flex; flex-direction: column; gap: 10px; }
.book-err { color: var(--accent); font-size: var(--step-small); min-height: 1em; }
.msgs { margin-top: 18px; padding: 20px; background: var(--surface); display: grid; gap: 14px; }
.msgs-head { font-size: var(--step-small); color: var(--muted); }
.msg { background: var(--bg); padding: 14px 16px; }
.msg-when { display: block; font-size: var(--step-small); color: var(--muted); margin-bottom: 4px; }
.msgs.fresh .msg { animation: msg-in 520ms var(--ease-out) both; }
.msgs.fresh .msg + .msg { animation-delay: 140ms; }
@keyframes msg-in { from { opacity: 0; transform: translateY(12px); } }
html.js .rise { opacity: 0; transform: translateY(22px); }
html.js .rise.in { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); transition-delay: var(--d, 0ms); }
html.js .hero .line, html.js .hero .side { opacity: 0; transform: translateY(18px); }
html.js .hero.ready .line, html.js .hero.ready .side { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out); }
html.js .hero.ready .line-2 { transition-delay: 90ms; }
html.js .hero.ready .side-l { transition-delay: 200ms; }
html.js .hero.ready .side-r { transition-delay: 280ms; }
html.js .hero .plates { opacity: 0; transform: rotate(-20deg) scale(0.94); }
html.js .hero.ready .plates { opacity: 1; transform: rotate(-8deg); transition: opacity 1000ms ease, transform 1400ms var(--ease-out); }
@media (max-width: 1000px) {
.line { grid-column: 1 / 9; }
.side-l, .side-r { grid-column: 1 / 7; }
.plates { right: -4vw; height: 56vh; margin-top: -28vh; }
.items { grid-template-columns: 1fr; }
.menu-head h2, .menu-head p { grid-column: 1 / -1; }
.menu-head p { margin-top: 20px; }
.about { grid-template-columns: 1fr; min-height: 0; }
.about-l { min-height: 0; padding-bottom: 0; }
.portrait { position: relative; left: auto; bottom: auto; width: 60%; margin: 8px auto 56px; }
.about-r { padding: 40px 56px 56px; max-width: none; order: -1; grid-row: 2; }
.about-l { display: contents; }
.about-l h2 { padding: 56px 56px 0; }
}
@media (max-width: 640px) {
.bar { grid-template-columns: 1fr auto; }
.links { display: none; }
.bar-end { gap: 8px; }
.stage { display: flex; flex-direction: column; padding-top: 32px; min-height: 0; }
.line-2 { margin-top: 0; }
.line { font-size: 11vw; }
.line-1 { margin-top: 0; }
.side-l { margin-top: 18px; }
.side-l p:first-child { font-size: var(--step-small); }
.side-r { display: none; }
.plates { order: 5; position: relative; right: auto; top: auto; bottom: auto; height: auto; width: 88vw; align-self: center; margin: 24px 0 32px; transform: rotate(-8deg); }
html.js .hero.ready .plates { transform: rotate(-8deg); }
.menu { padding-top: 72px; }
.menu-head h2 { font-size: 15vw; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 5; margin: 28px calc(var(--margin) * -1) 0; padding: 8px var(--margin); background: var(--bg); }
.jump a { flex: none; padding: 10px 14px; background: var(--surface); text-decoration: none; font-size: var(--step-small); }
.cat { margin-top: 96px; scroll-margin-top: 72px; }
.cat-head h3 { font-size: 8.5vw; }
.item { grid-template-columns: 60px 1fr 44px; gap: 14px; align-items: start; }
.item img { width: 60px; height: 60px; }
.item-top { font-size: var(--step-body); }
.item-d { font-size: var(--step-small); }
.item-top { flex-direction: column; gap: 0; }
.about { margin: 0 10px; }
.about-l h2, .about-r { padding-left: 24px; padding-right: 24px; }
.about-l h2 { font-size: 8vw; }
.portrait { width: 78vw; max-width: none; margin: 8px auto 32px; }
.about-r .btn { width: 100%; }
.frame { position: relative; height: auto; }
.frame img { height: auto; aspect-ratio: 16 / 9; }
.frame figcaption { position: static; max-width: none; background: var(--ink); }
.visit { min-height: 0; padding-top: 70svh; background: var(--bg); }
.visit-video { height: 70svh; bottom: auto; }
.card { width: auto; margin: -80px 16px 16px; }
.card .btn { min-height: 56px; }
.foot { grid-template-columns: 1fr; }
.foot-photo { height: 50svh; }
.foot-r { padding: 40px var(--margin) 110px; }
.foot-menu a { font-size: 8vw; }
.foot-blocks { flex-direction: column; gap: 20px; }
.sheet { width: 100vw; }
.sheet-in { padding: 20px 18px 40px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
html.js .rise, html.js .hero .line, html.js .hero .side, html.js .hero .plates { opacity: 1; transform: none; }
html.js .hero .plates { transform: rotate(-8deg); }
.visit-video { display: none; }
.visit { background: #3a3a36 url("media/room-loop-poster.webp") center / cover; }
}