/* 宇宙貝拉 Universe Bella — Global Design System v2 */
/* Link this from every page: */
/* For subdirectory pages use: */
/* ═══ DESIGN TOKENS ═══ */
:root {
/* Brand */
--gold: #B08820;
--gold-2: #D4AA30;
--gold-grad: linear-gradient(135deg,#7A4E06,#B08820,#D4AA30);
--brand: #7B62C8;
--brand-2: #9B78DC;
--brand-grad: linear-gradient(135deg,#7B62C8,#9B78DC);
/* Light content sections */
--bg: #F8F6F2; /* warm cream */
--bg-2: #F2EFF8; /* faint lavender */
--bg-card: #FFFFFF;
--tx: #1C1635; /* primary — deep indigo */
--tx-2: #3D3460; /* secondary — readable purple-gray (was too light) */
--tx-3: #6B6090; /* tertiary / meta (was #9090AA, too faint) */
--bdr-l: rgba(123,98,200,.12);
/* Dark sections (hero / guide / cta / footer) */
--bg-dark: #16103A;
--bg-dark-2: #1C1648;
--bg-dark-3: #120E32;
--border: rgba(255,255,255,.09);
--text-bright: rgba(255,255,255,.95);
--text-main: rgba(230,228,245,.88);
--text-soft: rgba(200,196,230,.72);
--text-dim: rgba(170,165,210,.55);
}
/* ═══ BASE ═══ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Noto Sans TC','Helvetica Neue',Arial,sans-serif;
background:var(--bg);
color:var(--tx);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
/* ═══ TYPOGRAPHY SCALE ═══ */
h1,h2,h3,h4{font-family:'Noto Serif TC',serif;font-weight:300;letter-spacing:.01em}
strong{font-weight:600}
/* Gradient text utility */
.grad-text{background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* ═══ NAV ═══ */
.nav{
position:sticky;top:0;z-index:200;
display:flex;align-items:center;justify-content:space-between;
padding:0 56px;height:66px;
background:rgba(18,13,44,.94);
border-bottom:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:30px;width:auto;filter:brightness(0) invert(1);opacity:.94}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none}
.nav-links a{
font-size:.8rem;letter-spacing:.06em;
color:rgba(255,255,255,.75);
padding:6px 14px;border-radius:6px;
text-decoration:none;white-space:nowrap;
transition:color .2s,background .2s;position:relative;
}
.nav-links a:hover{color:var(--gold-2);background:rgba(196,165,62,.08)}
.nav-links a.nav-music::after{
content:'';position:absolute;top:5px;right:6px;
width:5px;height:5px;border-radius:50%;
background:#E55;animation:pulse-r 2s ease-in-out infinite;
}
@keyframes pulse-r{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(238,85,85,.5)}50%{opacity:.5;box-shadow:0 0 0 4px rgba(238,85,85,0)}}
.nav-cta{
padding:9px 22px;background:var(--gold-grad);
color:#1a0e00;border-radius:24px;font-size:.75rem;
letter-spacing:.08em;text-decoration:none;font-weight:600;
box-shadow:0 4px 16px rgba(176,136,32,.28);
transition:box-shadow .2s,transform .15s;
}
.nav-cta:hover{box-shadow:0 6px 22px rgba(176,136,32,.4);transform:translateY(-1px)}
/* ═══ SHARED SECTION STYLES ═══ */
.sec{padding:88px 80px;position:relative;overflow:hidden}
.sec-inner{max-width:1080px;margin:0 auto;position:relative;z-index:2}
/* Eyebrow / title / desc — LIGHT default */
.sec-eyebrow{
font-size:.58rem;letter-spacing:.4em;text-transform:uppercase;
color:var(--brand);margin-bottom:12px;display:block;opacity:.9;
}
.sec-title{
font-size:clamp(1.7rem,3vw,2.2rem);font-weight:300;
color:var(--tx);margin-bottom:12px;letter-spacing:.02em;
font-family:'Noto Serif TC',serif;
}
.sec-title strong{font-weight:600;background:var(--gold-grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sec-desc{
font-size:.88rem;color:var(--tx-2);
line-height:1.9;margin-bottom:48px;max-width:500px;letter-spacing:.03em;
}
/* DARK section overrides */
.sec-dark .sec-eyebrow{color:var(--gold)}
.sec-dark .sec-title{color:var(--text-bright)}
.sec-dark .sec-desc{color:var(--text-soft)}
/* ═══ BUTTONS ═══ */
.btn-gold{
display:inline-flex;align-items:center;gap:9px;
padding:14px 30px;background:var(--gold-grad);
color:#1a0e00;border:none;border-radius:30px;
font-size:.82rem;letter-spacing:.08em;font-weight:600;
text-decoration:none;cursor:pointer;font-family:inherit;
box-shadow:0 8px 24px rgba(176,136,32,.25);
transition:box-shadow .2s,transform .15s;
}
.btn-gold:hover{box-shadow:0 12px 32px rgba(176,136,32,.38);transform:translateY(-2px)}
.btn-ghost{
display:inline-flex;align-items:center;gap:9px;
padding:13px 28px;background:transparent;
color:var(--brand);border:1px solid rgba(123,98,200,.35);
border-radius:30px;font-size:.8rem;letter-spacing:.08em;
text-decoration:none;cursor:pointer;font-family:inherit;
transition:all .2s;
}
.btn-ghost:hover{background:rgba(123,98,200,.08);border-color:rgba(123,98,200,.55)}
/* ═══ FOOTER ═══ */
.footer{background:#17142E;padding:48px 80px 32px;border-top:1px solid rgba(255,255,255,.09)}
.footer-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px}
.footer-logo img{height:30px;filter:brightness(0) invert(1);opacity:.55}
.footer-links{display:flex;gap:24px;list-style:none}
.footer-links a{font-size:.7rem;color:rgba(255,255,255,.48);text-decoration:none;letter-spacing:.06em;transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,.85)}
.footer-copy{font-size:.62rem;color:rgba(255,255,255,.25);letter-spacing:.06em;width:100%;margin-top:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);text-align:center}
/* ═══ RESPONSIVE — shared breakpoints ═══ */
@media(max-width:960px){
.nav{padding:0 20px;height:58px}
.nav-links{display:none}
.nav-cta{display:none}
.sec{padding:64px 24px}
.footer{padding:36px 24px 24px}
.footer-inner{flex-direction:column;align-items:flex-start;gap:16px}
.footer-links{flex-wrap:wrap;gap:14px}
}
/* Active page indicator */
.nav-links a.active-page{
color:var(--gold-2);
background:rgba(176,136,32,.10);
}