/* Fonts are loaded via +
in each page's instead of @import here -- @import blocks CSSOM
construction until styles.css itself has been fetched and parsed, so the
font request couldn't even start until then. A in lets the
browser discover and fetch it in parallel with styles.css. See AGENTS.md
"字型載入" for the exact tags every page must include. */
:root {
color-scheme: dark;
--ink: #080912;
--paper: #f4f0f7;
--muted: #a9a5b5;
--line: rgba(255, 255, 255, 0.16);
--violet: #c849f5;
--cyan: #78ddff;
--display: 'Noto Sans TC', system-ui, sans-serif;
--latin: 'Space Grotesk', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); scroll-padding-top: 96px; }
body {
margin: 0;
color: var(--paper);
background: var(--ink);
font-family: var(--display);
font-size: 16px;
line-height: 1.7;
overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { color: var(--ink); background: #e49aff; }
.skip-link {
position: fixed;
left: 1rem;
top: -5rem;
z-index: 100;
padding: .75rem 1rem;
color: var(--ink);
background: var(--paper);
transition: top .2s;
}
.skip-link:focus { top: 1rem; }
.grain {
position: fixed;
inset: 0;
z-index: 20;
pointer-events: none;
opacity: .09;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.site-header {
position: fixed;
inset: 0 0 auto;
z-index: 30;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
height: 96px;
padding: 0 clamp(1.25rem, 4vw, 4.5rem);
background: rgba(8, 9, 18, .55);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .65rem; font-weight: 700; letter-spacing: .15em; }
.brand-mark { color: #e5a8ff; font-size: 1.2rem; }
.site-header nav { display: flex; gap: 2.5rem; font-family: var(--latin); font-size: .82rem; letter-spacing: .13em; }
.site-header nav a { transition: color .25s; }
.site-header nav a:hover { color: #e5a8ff; }
.header-right { display: flex; align-items: center; gap: 1.75rem; justify-self: end; }
.menu-button { display: none; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; }
.menu-button span { display: block; width: 24px; height: 1px; margin: 7px 0; background: currentColor; transition: transform .25s; }
.menu-button[aria-expanded='true'] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-button[aria-expanded='true'] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-nav { position: fixed; inset: 0; z-index: 25; padding: 9rem 1.5rem 2rem; background: rgba(8, 9, 18, .97); }
.mobile-nav a { display: block; padding: 1.2rem 0; border-bottom: 1px solid var(--line); font-size: 2rem; }
.lang-switch-group { display: flex; align-items: center; gap: .9rem; font-family: var(--latin); font-size: .82rem; letter-spacing: .13em; }
.lang-switch { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; opacity: .55; transition: opacity .25s, color .25s; }
.lang-switch:hover { opacity: 1; color: #e5a8ff; }
.lang-switch.is-active { opacity: 1; color: var(--paper); text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; cursor: default; }
.mobile-nav .lang-switch-group { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: .75rem; }
.mobile-nav .lang-switch { padding: .5rem 0; font-size: 1.1rem; }
.hero {
position: relative;
display: flex;
min-height: 100svh;
align-items: center;
overflow: hidden;
isolation: isolate;
}
picture:has(.hero-image) { display: contents; }
.hero-image { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 52% center; animation: drift 16s ease-in-out infinite alternate; }
.hero-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, rgba(3, 6, 15, .95) 0%, rgba(3, 6, 15, .72) 35%, rgba(3, 6, 15, .05) 72%), linear-gradient(0deg, rgba(3, 6, 15, .68), transparent 45%); }
.hero-copy { width: min(780px, 82vw); margin: 5rem 0 0 clamp(1.25rem, 9vw, 10rem); }
.eyebrow, .section-number, .release-kicker { font-family: var(--latin); font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .9rem; color: #d7d3dd; }
.eyebrow span { width: 2.5rem; height: 1px; background: var(--violet); }
.hero h1 { margin: .05em 0 0; font-size: clamp(6rem, 17vw, 13rem); line-height: .95; letter-spacing: -.08em; font-weight: 900; text-shadow: 0 0 70px rgba(204, 70, 255, .22); }
.hero-line { margin: 1.6rem 0 2.2rem; font-size: clamp(1.25rem, 2vw, 1.8rem); font-weight: 300; line-height: 1.55; letter-spacing: .12em; }
.text-link { display: inline-flex; gap: 1rem; align-items: center; padding-bottom: .4rem; border-bottom: 1px solid rgba(255,255,255,.65); font-size: .9rem; letter-spacing: .12em; }
.text-link span { color: #e49aff; font-size: 1.25rem; transition: transform .25s; }
.text-link:hover span { transform: translate(4px, 4px); }
.hero-meta { position: absolute; right: clamp(1.25rem, 4vw, 4.5rem); top: 50%; display: flex; gap: 2.5rem; writing-mode: vertical-rl; font-family: var(--latin); font-size: .65rem; letter-spacing: .16em; color: rgba(255,255,255,.65); }
.scroll-cue { position: absolute; left: clamp(1.25rem, 4vw, 4.5rem); bottom: 2.2rem; display: flex; align-items: center; gap: .8rem; font-family: var(--latin); font-size: .64rem; letter-spacing: .2em; }
.scroll-cue span { display: block; width: 38px; height: 1px; background: var(--paper); transform-origin: left; animation: pulse 2s ease-in-out infinite; }
.section { padding: clamp(6rem, 12vw, 11rem) clamp(1.25rem, 8vw, 9rem); }
.section-number { color: #cf82ec; }
.section-heading { display: grid; grid-template-columns: minmax(140px, .45fr) 1fr; align-items: start; }
.section h2 { margin: 0; font-size: clamp(3rem, 7vw, 6.4rem); line-height: 1.12; letter-spacing: -.055em; }
.music { background: linear-gradient(180deg, #080912, #0d0b18); }
.release-card { display: grid; grid-template-columns: minmax(280px, .8fr) 1.2fr; gap: clamp(2rem, 7vw, 8rem); align-items: center; width: min(1120px, 100%); margin: clamp(4rem, 9vw, 8rem) auto 0; }
.cover-art { position: relative; aspect-ratio: 1; overflow: hidden; display: flex; align-items: flex-end; padding: 2rem; background: radial-gradient(circle at 63% 35%, #d949d8 0, #512b8d 14%, #121329 37%, #070811 67%); box-shadow: 0 2rem 6rem rgba(0,0,0,.5); }
.cover-art::before { content: ''; position: absolute; inset: 10%; border: 1px solid rgba(255,255,255,.16); transform: rotate(8deg); }
.cover-art::after { content: ''; position: absolute; width: 8px; aspect-ratio: 1; top: 35%; left: 63%; border-radius: 50%; background: white; box-shadow: 0 0 8px 3px #fff, 0 0 40px 18px #dc52ff; }
.cover-art p { position: relative; z-index: 2; margin: 0; font-size: 2rem; font-weight: 700; line-height: 1.1; letter-spacing: .18em; }
.cover-art p span { font: 400 .62rem/1 var(--latin); letter-spacing: .28em; }
.cover-star { position: absolute; top: 1.8rem; right: 1.8rem; color: #f5c2ff; font-size: 1.6rem; }
.orbit { position: absolute; border: 1px solid rgba(133, 220, 255, .22); border-radius: 50%; }
.orbit-one { width: 120%; aspect-ratio: 1; left: -45%; top: -20%; }
.orbit-two { width: 90%; aspect-ratio: 1; left: 28%; top: 18%; }
.release-kicker { color: var(--cyan); }
.release-info h3 { margin: 1.4rem 0 1.5rem; font-size: clamp(2.7rem, 5vw, 5rem); line-height: 1.12; letter-spacing: -.04em; }
.release-info > p:not(.release-kicker) { max-width: 31rem; color: var(--muted); font-weight: 300; }
.signal { display: flex; align-items: center; gap: 8px; height: 52px; margin-top: 2.3rem; }
.signal i { display: block; width: 2px; height: 12px; background: linear-gradient(var(--cyan), var(--violet)); animation: wave 1.3s ease-in-out infinite; }
.signal i:nth-child(2n) { animation-delay: -.3s; }
.signal i:nth-child(3n) { animation-delay: -.65s; }
.signal i:nth-child(4n) { animation-delay: -.9s; }
.listen { background: linear-gradient(180deg, #080912, #0d0b18); }
.stream-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(4rem, 8vw, 7rem); }
.stream-card { display: flex; flex-direction: column; gap: 1rem; padding: clamp(2rem, 4vw, 2.6rem); border: 1px solid var(--line); transition: border-color .25s, transform .25s; }
.stream-card:hover { border-color: var(--violet); transform: translateY(-4px); }
.stream-name { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 700; letter-spacing: -.02em; }
.stream-action { color: var(--cyan); font: 400 .78rem/1 var(--latin); letter-spacing: .12em; }
.videos { background: radial-gradient(circle at 82% 14%, rgba(120, 221, 255, .1), transparent 30%), #0d0b18; }
.videos .section-heading > div { max-width: 920px; }
.playlist-link { display: inline-flex; align-items: center; gap: .7rem; margin-top: 2rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(255,255,255,.38); color: var(--muted); font: 400 .78rem/1.4 var(--latin); letter-spacing: .12em; transition: color .25s, border-color .25s; }
.playlist-link:hover { color: var(--paper); border-color: var(--violet); }
.playlist-link span { color: var(--cyan); }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2.2rem); margin-top: clamp(4rem, 8vw, 7rem); }
.video-card { min-width: 0; }
.video-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 0; background: #05060c; }
button.video-media { display: block; width: 100%; padding: 0; color: var(--paper); text-align: left; cursor: pointer; }
.video-media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78) contrast(1.08); transition: transform .6s ease, filter .4s ease; }
.video-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(5,6,12,.78)); }
.video-media:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.05); }
.video-play { position: absolute; left: 1.2rem; bottom: 1.1rem; z-index: 1; display: grid; place-items: center; width: 3.1rem; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; background: rgba(8,9,18,.32); backdrop-filter: blur(8px); transition: color .25s, border-color .25s, transform .25s; }
.video-media:hover .video-play { color: var(--cyan); border-color: var(--cyan); transform: scale(1.06); }
.video-media iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-meta { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.video-index { color: #cf82ec; font: 400 .68rem/1.5 var(--latin); letter-spacing: .14em; }
.video-title { margin: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: clamp(1rem, 1.45vw, 1.25rem); line-height: 1.45; font-weight: 500; }
.video-date { grid-column: 2; margin: -.45rem 0 0; color: #85818f; font: 400 .66rem/1.4 var(--latin); letter-spacing: .1em; }
.video-state { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; min-height: 260px; padding: 2rem; border: 1px solid var(--line); color: var(--muted); }
.video-state-mark { color: var(--violet); }
.video-state p { margin: 0; }
.video-state a { color: var(--cyan); border-bottom: 1px solid currentColor; }
.manifesto { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(3rem, 8vw, 10rem); align-items: center; background: #f0edf2; color: #10101a; }
.portrait-slice { position: relative; min-height: 700px; overflow: hidden; }
.portrait-slice img { position: absolute; width: 180%; height: 100%; object-fit: cover; object-position: 72% center; filter: saturate(.72) contrast(1.07); }
.manifesto .section-number { color: #752796; }
.manifesto-copy h2 { margin-bottom: 3rem; }
.manifesto-copy .lead { font-size: 1.35rem; font-weight: 500; }
.manifesto-copy > p:not(.section-number, .lead, .signature) { max-width: 37rem; color: #5f5c69; }
.signature { margin-top: 3rem; font-size: 1.4rem; font-weight: 700; letter-spacing: .18em; }
.signature span { color: #a52fd1; }
.contact { min-height: 88vh; display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 75% 45%, rgba(108, 32, 147, .25), transparent 36%), #090a13; }
.contact h2 { margin-top: 1.6rem; max-width: 1050px; }
.contact h2 em { color: #e7a6ff; font-style: normal; }
.contact-note { margin: 2.3rem 0 1rem; color: var(--muted); }
.email-button { display: flex; justify-content: space-between; align-items: center; width: min(760px, 100%); padding: 1.5rem 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.45); background: transparent; text-align: left; cursor: pointer; }
.email-button > span:first-child { font: 400 clamp(1rem, 2.2vw, 1.5rem)/1.3 var(--latin); }
.email-action { color: #dda1f2; font-size: .78rem; letter-spacing: .12em; }
footer { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: 3rem clamp(1.25rem, 4vw, 4.5rem); border-top: 1px solid var(--line); color: #8f8b9a; font: 400 .7rem/1.5 var(--latin); letter-spacing: .13em; }
.footer-brand { display: flex; flex-direction: column; color: var(--paper); }
.footer-brand span { font: 700 1.5rem/1.2 var(--display); letter-spacing: .15em; }
.footer-brand small { font-size: .55rem; letter-spacing: .25em; }
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.08) translateX(-1%); } }
@keyframes pulse { 50% { transform: scaleX(.35); opacity: .45; } }
@keyframes wave { 0%, 100% { height: 8px; } 50% { height: 42px; } }
@media (max-width: 1024px) and (min-width: 761px) {
.video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
html { scroll-padding-top: 76px; }
.site-header { height: 76px; grid-template-columns: 1fr auto; }
.site-header nav { display: none; }
.header-right .lang-switch-group { display: none; }
.menu-button { display: block; }
.hero { min-height: 760px; }
.hero-image { object-position: 61% center; }
.hero-shade { background: linear-gradient(90deg, rgba(3,6,15,.94), rgba(3,6,15,.18)), linear-gradient(0deg, rgba(3,6,15,.72), transparent 60%); }
.hero-copy { width: calc(100% - 2.5rem); margin: 2rem 1.25rem 0; }
.hero h1 { font-size: clamp(5.8rem, 30vw, 8rem); }
.hero-line { font-size: 1.12rem; }
.hero-meta { display: none; }
.scroll-cue { left: 1.25rem; }
.section-heading { grid-template-columns: 1fr; gap: 1rem; }
.release-card, .manifesto { grid-template-columns: 1fr; }
.video-grid { grid-template-columns: 1fr; }
.stream-grid { grid-template-columns: 1fr; }
.portrait-slice { min-height: 480px; margin: 0 -1.25rem; }
.manifesto-copy h2 { font-size: 2.8rem; }
.contact { min-height: 720px; }
footer { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
.reveal { opacity: 1; transform: none; }
}
/* ---------------------------------------------------------------- */
/* Long-form content (blog posts, privacy policy) */
/* ---------------------------------------------------------------- */
.prose { max-width: 46rem; margin-top: clamp(2.5rem, 6vw, 4rem); color: var(--muted); font-weight: 300; }
.prose p { margin: 0 0 1.5rem; font-size: 1.05rem; line-height: 1.85; }
.prose h3 { margin: 2.6rem 0 1rem; color: var(--paper); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; }
.prose ul { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.prose li { margin-bottom: .75rem; line-height: 1.7; }
.prose a { color: var(--cyan); border-bottom: 1px solid rgba(120, 221, 255, .45); }
.prose a:hover { border-color: var(--cyan); }
.prose code { padding: .15em .4em; background: rgba(255, 255, 255, .08); font-family: var(--latin); font-size: .9em; }
.legal-updated { color: #85818f; font: 400 .78rem/1.4 var(--latin); letter-spacing: .1em; text-transform: uppercase; }
/* Blog index */
.blog-index { background: linear-gradient(180deg, #080912, #0d0b18); }
.blog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(3.5rem, 8vw, 6rem); }
.blog-card { display: flex; flex-direction: column; gap: .6rem; padding: 2rem 1.8rem; border: 1px solid var(--line); transition: border-color .25s, transform .25s; }
.blog-card:hover { border-color: var(--violet); transform: translateY(-4px); }
.blog-card-date { color: #cf82ec; font: 400 .7rem/1.4 var(--latin); letter-spacing: .14em; }
.blog-card h3 { margin: 0; font-size: 1.4rem; line-height: 1.35; letter-spacing: -.01em; }
.blog-card-excerpt { margin: 0; color: var(--muted); font-size: .92rem; font-weight: 300; line-height: 1.6; }
.blog-card-link { margin-top: .4rem; color: var(--cyan); font: 400 .78rem/1 var(--latin); letter-spacing: .1em; }
/* Blog post / legal page article */
.blog-post { max-width: 60rem; margin: 0 auto; }
.blog-back { display: inline-flex; margin-bottom: 2.5rem; color: var(--muted); font: 400 .8rem/1 var(--latin); letter-spacing: .1em; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.blog-back:hover { color: var(--paper); border-color: currentColor; }
.blog-post-title { margin: .6rem 0 0; font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1.15; letter-spacing: -.03em; }
.blog-post-meta { margin: 1rem 0 0; color: #85818f; font: 400 .78rem/1.4 var(--latin); letter-spacing: .12em; }
.blog-post-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px dashed var(--line); font-size: .85rem; color: #6f6b7a; }
/* ---------------------------------------------------------------- */
/* Cookie consent banner */
/* ---------------------------------------------------------------- */
.ys-notice[hidden] {
display: none;
}
.ys-notice {
position: fixed;
left: 1.25rem;
right: 1.25rem;
bottom: 1.25rem;
z-index: 90;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.2rem;
max-width: 900px;
margin: 0 auto;
padding: 1.3rem 1.6rem;
border: 1px solid var(--line);
background: rgba(10, 10, 20, .92);
backdrop-filter: blur(10px);
box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .45);
}
.ys-notice p { margin: 0; max-width: 46rem; color: var(--muted); font-size: .88rem; line-height: 1.6; }
.ys-notice a { color: var(--cyan); border-bottom: 1px solid rgba(120, 221, 255, .45); }
.ys-notice-actions { display: flex; gap: .8rem; flex-shrink: 0; }
.ys-notice-actions button {
padding: .65rem 1.3rem;
border: 1px solid rgba(255, 255, 255, .35);
background: transparent;
font: 400 .78rem/1 var(--latin);
letter-spacing: .08em;
cursor: pointer;
transition: border-color .25s, background .25s, color .25s;
}
.ys-notice-actions button[data-ys-action='accept'] { border-color: var(--violet); background: var(--violet); color: #fff; }
.ys-notice-actions button[data-ys-action='accept']:hover { background: #b93be0; }
.ys-notice-actions button[data-ys-action='decline']:hover { border-color: var(--paper); }
@media (max-width: 760px) {
.blog-list { grid-template-columns: 1fr; }
.ys-notice { flex-direction: column; align-items: stretch; left: 1rem; right: 1rem; bottom: 1rem; padding: 1.2rem; }
.ys-notice-actions { justify-content: flex-end; }
}