/* ====================================================
Self-hosted fonts — unified 2-font system
- Display / wordmark / numbers : Orbitron
- Body / Chinese : Noto Sans TC
==================================================== */
@font-face { font-family: "Orbitron"; src: url("fonts/orbitron.woff2") format("woff2"); font-display: swap; font-weight: 100 900; }
@font-face { font-family: "Noto Sans TC"; src: url("fonts/noto-sans-tc.woff2") format("woff2"); font-display: swap; font-weight: 100 900; }
/* Inter — used only inside the Aura Visualization section (.aura) */
@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-display: swap; font-weight: 100 900; }
/* ====================================================
Rova Chain - Site Template
Theme: Dark base + Gold accent
==================================================== */
:root{
/* ========================================================
Professional deep-purple-red palette
Brand essence stays mystic / cosmic, but tones are DEEP & RICH
— aubergine, wine, burgundy — instead of bright pastels.
Aimed at premium trading / finance aesthetic.
======================================================== */
/* Brand core (deep, saturated) */
--brand-deep: #2a0d3a; /* near-black aubergine */
--brand-aubergine:#4a1d5e; /* main purple */
--brand-plum: #6a2a6e; /* mid-tone plum */
--brand-wine: #7a1f3e; /* deep wine red */
--brand-burgundy: #5e1929; /* darker red accent */
--brand-magenta: #a23a6e; /* sparing highlight (only ~5% usage) */
/* The single brand gradient — deep wine + aubergine, no pastels */
--grad: linear-gradient(135deg, #6a2a6e 0%, #4a1d5e 38%, #7a1f3e 72%, #5e1929 100%);
--grad-soft: linear-gradient(135deg, rgba(106,42,110,.16) 0%, rgba(74,29,94,.12) 40%, rgba(122,31,62,.10) 75%);
--grad-radial: radial-gradient(circle, rgba(106,42,110,.20) 0%, rgba(74,29,94,.14) 40%, rgba(122,31,62,.08) 75%, transparent);
--grad-vertical: linear-gradient(180deg, #6a2a6e 0%, #4a1d5e 50%, #7a1f3e 100%);
/* Backgrounds — very dark plum, not navy */
--bg:#0b0712; /* deep plum-black */
--bg-2:#0f0a1a;
--bg-3:#140e22;
--card:#15102a;
--card-2:#1c1530;
--line:rgba(255,255,255,0.05);
--line-2:rgba(106,42,110,0.28);
/* Text */
--text:#f0ebf5;
--text-2:#b5a8c2;
--text-3:#7a6f8a;
/* Cosmic accents — deeper shades for atmosphere & glow */
--cosmo-deep: #050310; /* deepest void */
--cosmo-1: #1a0e2e; /* dark plum backdrop */
--cosmo-2: #2e1648; /* aubergine backdrop */
--cosmo-3: #4a1d3e; /* wine backdrop */
/* Glows — keep low saturation, deep tones */
--glow-aubergine: rgba(106,42,110,.40);
--glow-wine: rgba(122,31,62,.40);
--glow-magenta: rgba(162,58,110,.32); /* used sparingly for highlights */
--glow-star: rgba(220,200,235,.45); /* near-white starlight */
--shadow-brand: 0 12px 44px -10px rgba(74,29,94,.55),
0 6px 30px -8px rgba(122,31,62,.30);
--shadow-star: 0 0 22px rgba(220,200,235,.30), 0 0 70px rgba(106,42,110,.18);
/* Legacy gold + bright alias — fallback to deep palette */
--gold:#6a2a6e;
--gold-2:#6a2a6e;
--gold-warm:#a23a6e;
--star:#ddc8eb;
--shadow-gold: 0 12px 44px -10px rgba(74,29,94,.55);
/* Legacy bright-color alias — anything still using the bright cyan/coral
names is mapped onto the deep palette so nothing breaks. */
--brand-cyan: #4a1d5e;
--brand-blue: #2e1648;
--brand-violet: #6a2a6e;
--brand-coral: #7a1f3e;
--brand-orange: #8b2548;
--radius:16px;
--ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
background:#000;
color:var(--text);
font-family:'Noto Sans TC','Orbitron',system-ui,sans-serif;
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
ul{list-style:none}
em{font-style:normal}
.container{max-width:1280px;margin:0 auto;padding:0 24px}
.hidden{display:none !important}
.center{text-align:center}
.mt-40{margin-top:40px}
.muted{color:var(--text-3)}
/* ====== Gradient Text ====== */
.gradient-text{
background:var(--grad);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
display:inline-block;
}
/* =====================================================
INTRO STAGE
===================================================== */
.intro-stage{
position:fixed;inset:0;z-index:200;
background:#000;
overflow:hidden;
cursor:pointer;
font-family:'Orbitron','Noto Sans TC',sans-serif;
transition:opacity 1s var(--ease), filter 1s var(--ease), transform 1s var(--ease);
}
.intro-stage.dissolving{
opacity:0; filter:blur(14px) brightness(1.35) saturate(1.1); transform:scale(1.035);
pointer-events:none;
}
.intro-stage.dissolved{visibility:hidden}
/* Intro center logo overlay */
.intro-logo-overlay{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
z-index:5;pointer-events:none;
opacity:0;
animation:introLogoIn 1.6s .4s var(--ease) forwards;
}
.intro-logo-img{
width:min(360px,55vw);height:auto;display:block;
filter:drop-shadow(0 0 36px rgba(106,42,110,.55)) drop-shadow(0 0 12px rgba(255,255,255,.18));
animation:introLogoFloat 5s 2s ease-in-out infinite;
}
@keyframes introLogoIn{
0%{opacity:0;transform:translate(-50%,-50%) scale(.82);filter:blur(18px)}
60%{opacity:1;filter:blur(0)}
100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}
}
@keyframes introLogoFloat{
0%,100%{transform:translate(-50%,-50%) translateY(0)}
50%{transform:translate(-50%,-50%) translateY(-10px)}
}
@media(max-width:768px){
.intro-logo-img{width:min(260px,68vw)}
}
/* background video — hidden so intro stage stays pure black */
.intro-video{
display:none;
}
/* ===== Intro sparkles + ROVA wordmark (new opening, vanilla canvas) ===== */
.intro-sparkles{
display:block;width:min(900px,97vw);height:clamp(230px,38vh,360px);margin:6px auto 0;z-index:1;pointer-events:none;
-webkit-mask-image:radial-gradient(60% 118% at 50% 0%, #000 3%, transparent 62%);
mask-image:radial-gradient(60% 118% at 50% 0%, #000 3%, transparent 62%);
opacity:0;animation:fadeIn 1.2s 1.1s ease forwards;
}
.intro-rova-wrap{
position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);
z-index:6;text-align:center;width:92vw;pointer-events:none;
}
.intro-rova{
margin:0;
font-family:'Orbitron','Noto Sans TC',sans-serif;
font-weight:900;letter-spacing:.14em;text-transform:uppercase;
font-size:clamp(46px,11vw,128px);line-height:1;
background:linear-gradient(180deg,#ffffff 0%,#d7dbe2 100%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 26px rgba(255,255,255,.32));
opacity:0;animation:rovaIntroIn 1.5s .4s var(--ease) forwards, rovaBreath 4.5s 2s ease-in-out infinite;
}
@keyframes rovaIntroIn{
0%{opacity:0;letter-spacing:.45em;filter:blur(18px) drop-shadow(0 0 26px rgba(255,255,255,.30))}
100%{opacity:1;letter-spacing:.14em;filter:blur(0) drop-shadow(0 0 26px rgba(255,255,255,.32))}
}
@keyframes rovaBreath{
0%,100%{filter:drop-shadow(0 0 22px rgba(255,255,255,.26))}
50%{filter:drop-shadow(0 0 46px rgba(255,255,255,.48))}
}
.intro-rova-tag{
margin:16px 0 0;font-family:'Orbitron','Noto Sans TC',sans-serif;
font-size:clamp(11px,1.5vw,16px);letter-spacing:.4em;color:#cdcdcd;
opacity:0;animation:fadeIn 1.1s 1.0s ease forwards;
}
.intro-rova-lines{
position:relative;width:min(680px,90vw);height:8px;margin:22px auto 4px;
opacity:0;animation:fadeIn 1s 1.05s ease forwards;
}
.intro-rova-lines .rl{position:absolute;top:0;left:50%;transform:translateX(-50%);border-radius:3px}
.rl-bloom{width:46%;height:28px;top:-13px;border-radius:50%;filter:blur(9px);
background:radial-gradient(ellipse at center, rgba(255,224,140,.6), transparent 70%)}
.rl-wide-blur{width:100%;height:4px;filter:blur(5px);
background:linear-gradient(90deg,transparent,rgba(212,175,55,.95),transparent)}
.rl-wide{width:100%;height:1px;
background:linear-gradient(90deg,transparent,rgba(232,198,96,1),transparent)}
.rl-core-blur{width:42%;height:6px;filter:blur(4px);
background:linear-gradient(90deg,transparent,rgba(255,242,196,1),transparent)}
.rl-core{width:42%;height:1px;
background:linear-gradient(90deg,transparent,#fffaf0,transparent)}
/* atmospheric glow */
.intro-atmos{
position:absolute;inset:0;pointer-events:none;
mix-blend-mode:screen;
background:
radial-gradient(ellipse 38% 22% at 96% 102%, rgba(74,29,94,.85), rgba(230,190, 80,.7) 20%, rgba(180,140,40,.45) 45%, rgba(70,45,15,.18) 70%, transparent 88%),
radial-gradient(ellipse 70% 35% at 85% 95%, rgba(150,110,30,.38), rgba(70,45,15,.22) 35%, transparent 65%),
linear-gradient(108deg, transparent 0%, rgba(210,160,60,.30) 14%, rgba(180,140,40,.55) 20%, rgba(220,180, 80,.45) 25%, rgba(150,110,30,.28) 32%, transparent 44%),
radial-gradient(ellipse 50% 30% at 8% 12%, rgba(190,150,50,.22), transparent 70%),
radial-gradient(ellipse at 50% 55%, #0a0507 0%, #060305 55%, #030102 100%);
filter:blur(28px) contrast(1.15) saturate(1.05);
opacity:.85;
}
/* grain */
.intro-grain{
position:absolute;inset:0;pointer-events:none;
opacity:.18;
background-image:url("data:image/svg+xml;utf8,");
mix-blend-mode:overlay;
z-index:1;
}
/* particles */
.intro-particles{position:absolute;inset:0;pointer-events:none;z-index:1}
.intro-particle{
position:absolute;border-radius:50%;
background:radial-gradient(circle, rgba(74,29,94,.95) 0%, rgba(106,42,110,.6) 40%, rgba(212,175, 55,.2) 70%, transparent 100%);
box-shadow:0 0 4px rgba(106,42,110,.5);
animation:twinkle ease-in-out infinite;
}
@keyframes twinkle{
0%,100%{opacity:.12;transform:scale(.7)}
50%{opacity:.85;transform:scale(1.15)}
}
/* grid lines */
.intro-bg-grid,.intro-orange-flow{position:absolute;inset:0;pointer-events:none}
.intro-bg-grid{z-index:2}
.intro-orange-flow{z-index:3}
.intro-bg-grid svg,.intro-orange-flow svg{width:100%;height:100%;display:block;overflow:visible}
.grid-line{
fill:none;
stroke:rgba(255,255,255,.10);
stroke-width:1;
vector-effect:non-scaling-stroke;
stroke-dasharray:1500;
stroke-dashoffset:1500;
animation:drawIn 1s var(--ease) forwards;
}
.grid-line:nth-child(1){animation-delay:.1s}
.grid-line:nth-child(2){animation-delay:.2s}
.grid-line:nth-child(3){animation-delay:.25s}
.grid-line:nth-child(4){animation-delay:.3s}
.grid-line:nth-child(5){animation-delay:.35s}
.grid-line:nth-child(6){animation-delay:.4s}
@keyframes drawIn{to{stroke-dashoffset:0}}
.figma-segment{
fill:none;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;
filter:drop-shadow(0 0 6px rgba(106,42,110,.65));
}
/* logo */
.intro-logo-wrap{
position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);
width:min(820px,90vw);
z-index:6;
text-align:center;
}
.intro-logo{
font-family:'Orbitron','Noto Sans TC',sans-serif;
font-weight:700;
font-size:clamp(28px,7vw,80px);
letter-spacing:.12em;
background:var(--grad);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
opacity:0;
filter:drop-shadow(0 0 20px rgba(106,42,110,.4));
animation:logoIn 1.4s .6s var(--ease) forwards;
}
.intro-logo .x{
display:inline-block;
transform:translateY(-2px);
font-weight:900;
margin-left:.15em;
}
@keyframes logoIn{
0%{opacity:0;letter-spacing:.5em;filter:blur(20px) drop-shadow(0 0 20px rgba(106,42,110,.4))}
100%{opacity:1;letter-spacing:.12em;filter:blur(0) drop-shadow(0 0 20px rgba(106,42,110,.4))}
}
.intro-slogan{
position:absolute;left:50%;top:58%;transform:translateX(-50%);
font-family:'Orbitron','Noto Sans TC',sans-serif;
font-size:clamp(11px,1.4vw,16px);
letter-spacing:.4em;
color:#bababa;
z-index:6;
opacity:0;
animation:fadeUp 1.2s 1.6s var(--ease) forwards;
}
@keyframes fadeUp{
0%{opacity:0;transform:translate(-50%,15px)}
100%{opacity:1;transform:translate(-50%,0)}
}
.intro-enter-prompt{
position:absolute;left:50%;bottom:8%;transform:translateX(-50%);
font-family:'Orbitron','Noto Sans TC',sans-serif;
font-size:12px;letter-spacing:.35em;
color:rgba(255,255,255,.55);
z-index:6;
opacity:0;
animation:promptPulse 2.2s 2.2s ease-in-out infinite, fadeIn .8s 2s ease forwards;
white-space:nowrap;
}
.intro-enter-prompt .key{
display:inline-block;
padding:3px 8px;margin:0 4px;
border:1px solid rgba(255,255,255,.4);
border-radius:4px;
color:rgba(255,255,255,.85);
letter-spacing:.2em;
}
@keyframes fadeIn{to{opacity:1}}
@keyframes promptPulse{
0%,100%{opacity:.55}
50%{opacity:1}
}
.prompt-mobile{display:none}
@media(max-width:768px){
.prompt-desktop{display:none}
.prompt-mobile{display:inline}
}
/* =====================================================
HEADER / NAV
===================================================== */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:80;
padding:14px 0;
background:rgba(3,3,3,.7);
backdrop-filter:blur(20px);
border-bottom:1px solid var(--line);
transition:padding .3s ease;
}
.site-header.scrolled{padding:10px 0;background:rgba(3,3,3,.9)}
.nav-container{
max-width:1280px;margin:0 auto;padding:0 24px;
display:flex;align-items:center;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;font-family:'Orbitron','Noto Sans TC',sans-serif}
.brand-mark{
font-weight:900;font-size:18px;letter-spacing:.12em;text-transform:uppercase;
color:#fff;
text-shadow:0 0 18px rgba(106,42,110,.45);
}
.brand-mark em{font-style:normal;font-weight:900;color:var(--gold-2)}
.brand-text{font-size:13px;color:var(--text-2);letter-spacing:.04em}
/* Logo image — mix-blend-mode:screen removes the dark navy background so only the
bright logo content shows through on the black site background. */
.brand-logo{
height:38px;width:auto;display:block;
mix-blend-mode:screen;
filter:drop-shadow(0 0 12px rgba(106,42,110,.35));
transition:filter .3s ease, transform .3s ease;
}
.brand:hover .brand-logo{
filter:drop-shadow(0 0 18px rgba(106,42,110,.6));
transform:scale(1.04);
}
/* Header uses the transparent emblem (rova-emblem.png) — no blend needed, show true colors */
.site-header .brand-logo{mix-blend-mode:normal}
.brand-logo-lg{height:54px}
@media(max-width:768px){
.brand-logo{height:32px}
.brand-logo-lg{height:44px}
}
/* Rova wordmark — match logo font: bold, angular, uppercase, with gold glow */
.rova-wordmark{
font-family:'Orbitron','Noto Sans TC',sans-serif;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
background:var(--grad);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
filter:drop-shadow(0 0 14px rgba(106,42,110,.35));
display:inline-block;
}
/* Inline mention — slightly tighter, scales with surrounding text */
.rova-inline{
letter-spacing:.06em;
filter:drop-shadow(0 0 8px rgba(106,42,110,.3));
}
/* Hero subtitle/desc Rova — solid white instead of the purple gradient */
.hero-subtitle .rova-inline,
.hero-desc .rova-inline{
background:none;
color:#fff;
-webkit-text-fill-color:#fff;
filter:drop-shadow(0 0 8px rgba(255,255,255,.35));
}
/* Hero — largest, more pronounced glow to echo the logo */
.hero-rova{
letter-spacing:.04em;
filter:drop-shadow(0 0 28px rgba(106,42,110,.55)) drop-shadow(0 0 6px rgba(255,255,255,.15));
}
.primary-nav{display:flex;gap:28px;margin-left:auto}
.primary-nav a{
font-size:14px;color:var(--text-2);
position:relative;padding:6px 0;
transition:color .25s ease;
}
.primary-nav a:hover{color:#fff}
.primary-nav a::after{
content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
background:var(--grad);transform:scaleX(0);transform-origin:left;
transition:transform .3s var(--ease);
}
.primary-nav a:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;gap:10px}
.nav-toggle{
display:none;flex-direction:column;gap:5px;
width:36px;height:36px;align-items:center;justify-content:center;
}
.nav-toggle span{width:22px;height:2px;background:#fff;border-radius:2px;transition:.3s}
@media(max-width:1024px){
.primary-nav,.nav-actions{display:none}
.nav-toggle{display:flex;margin-left:auto}
.primary-nav.open{
display:flex;flex-direction:column;gap:20px;
position:fixed;top:60px;left:0;right:0;
background:rgba(3,3,3,.97);padding:30px 24px;border-bottom:1px solid var(--line);
margin-left:0;
}
}
/* =====================================================
Buttons
===================================================== */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:11px 22px;font-size:14px;font-weight:600;letter-spacing:.04em;
border-radius:10px;border:1px solid transparent;
transition:all .25s var(--ease);position:relative;overflow:hidden;
}
.btn-primary{
background:var(--grad);color:#fff;
box-shadow:var(--shadow-gold);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 50px -10px rgba(106,42,110,.65)}
.btn-outline{
border-color:var(--line-2);color:#fff;background:rgba(255,255,255,.02);
}
.btn-outline:hover{border-color:var(--gold-2);color:var(--gold-2)}
.btn-ghost{color:var(--text-2)}
.btn-ghost:hover{color:#fff}
.btn-lg{padding:14px 28px;font-size:15px}
.btn-block{width:100%}
/* ===== Subtle "加入社群" CTA (ported from React subtle-button → vanilla) ===== */
.join-cta{
position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
height:44px;padding:0 22px;border-radius:999px;
border:2px solid rgba(255,255,255,.7);background:transparent;
color:#fff;font-weight:600;font-size:14px;letter-spacing:.04em;
overflow:hidden;backdrop-filter:blur(4px);cursor:pointer;
transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease);
}
.join-cta:hover{
border-color:#fff;transform:scale(1.05);
box-shadow:0 10px 30px -8px rgba(255,255,255,.2);
}
.join-cta:active{transform:scale(.95)}
/* shimmer sweep */
.join-cta::before{
content:"";position:absolute;inset:0;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);
transform:translateX(-100%);transition:transform .7s var(--ease);
}
.join-cta:hover::before{transform:translateX(100%)}
/* amber glow */
.join-cta::after{
content:"";position:absolute;inset:0;border-radius:999px;
background:radial-gradient(circle at 50% 50%,rgba(252,211,77,.14),transparent 70%);
opacity:0;transition:opacity .5s var(--ease);pointer-events:none;
}
.join-cta:hover::after{opacity:1}
.join-cta__text{position:relative;z-index:2;transition:color .3s var(--ease)}
.join-cta:hover .join-cta__text{color:#fffbeb}
.join-cta__dot{
position:relative;z-index:2;width:15px;height:15px;border-radius:999px;
background:#fde68a;transition:transform .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease);
}
.join-cta:hover .join-cta__dot{
background:#fcd34d;transform:scale(1.1);
box-shadow:0 0 14px 2px rgba(252,211,77,.5);
}
.join-cta:active .join-cta__dot{transform:scale(.9)}
/* ping ripple */
.join-cta__dot::after{
content:"";position:absolute;inset:0;border-radius:999px;background:#fde68a;
opacity:0;
}
.join-cta:hover .join-cta__dot::after{animation:joinPing 2s var(--ease) infinite}
@keyframes joinPing{0%{transform:scale(1);opacity:.75}75%,100%{transform:scale(2);opacity:0}}
/* ===== Shiny animated CTA (ported from React ShinyButton → vanilla, gold theme) ===== */
@property --gradient-angle { syntax: ""; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: ""; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: ""; initial-value: 5%; inherits: false; }
@property --gradient-shine { syntax: ""; initial-value: #ffffff; inherits: false; }
.shiny-cta{
--shiny-cta-bg:#0a0a0c; --shiny-cta-bg-subtle:#1a1818; --shiny-cta-fg:#fff;
--shiny-cta-highlight:#dfe3ea; --shiny-cta-highlight-subtle:#ffffff;
--animation:gradient-angle linear infinite; --duration:3s; --shadow-size:2px;
--transition:800ms cubic-bezier(0.25,1,0.5,1);
isolation:isolate;position:relative;overflow:hidden;cursor:pointer;outline-offset:4px;
padding:15px 32px;font-family:'Orbitron','Noto Sans TC',sans-serif;font-size:15px;line-height:1.2;font-weight:600;letter-spacing:.05em;
border:1px solid transparent;border-radius:360px;color:var(--shiny-cta-fg);
background:linear-gradient(var(--shiny-cta-bg),var(--shiny-cta-bg)) padding-box,
conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
transparent, var(--shiny-cta-highlight) var(--gradient-percent),
var(--gradient-shine) calc(var(--gradient-percent)*2),
var(--shiny-cta-highlight) calc(var(--gradient-percent)*3),
transparent calc(var(--gradient-percent)*4)) border-box;
box-shadow:none;
transition:var(--transition);
transition-property:--gradient-angle-offset,--gradient-percent,--gradient-shine;
}
.shiny-cta::before,.shiny-cta::after,.shiny-cta span::before{
content:"";pointer-events:none;position:absolute;inset-inline-start:50%;inset-block-start:50%;translate:-50% -50%;z-index:-1;
}
.shiny-cta:active{translate:0 1px}
.shiny-cta::before{
--size:calc(100% - var(--shadow-size)*3); --position:2px; --space:calc(var(--position)*2);
width:var(--size);height:var(--size);
background:radial-gradient(circle at var(--position) var(--position), #fff calc(var(--position)/4), transparent 0) padding-box;
background-size:var(--space) var(--space);background-repeat:space;
mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
border-radius:inherit;opacity:.2;z-index:-1;
}
.shiny-cta::after{
--animation:shimmer linear infinite;width:100%;aspect-ratio:1;
background:linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent);
mask-image:radial-gradient(circle at bottom, transparent 40%, black);opacity:.6;
}
.shiny-cta span{z-index:1;position:relative}
.shiny-cta span::before{
--size:calc(100% + 1rem);width:var(--size);height:var(--size);
box-shadow:inset 0 -1ex 2rem 4px var(--shiny-cta-highlight);
opacity:0;transition:opacity var(--transition);
animation:calc(var(--duration)*1.5) breathe linear infinite;
}
.shiny-cta,.shiny-cta::before,.shiny-cta::after{
animation:var(--animation) var(--duration), var(--animation) calc(var(--duration)/0.4) reverse paused;
animation-composition:add;
}
.shiny-cta:is(:hover,:focus-visible){--gradient-percent:20%;--gradient-angle-offset:95deg;--gradient-shine:var(--shiny-cta-highlight-subtle)}
.shiny-cta:is(:hover,:focus-visible),.shiny-cta:is(:hover,:focus-visible)::before,.shiny-cta:is(:hover,:focus-visible)::after{animation-play-state:running}
.shiny-cta:is(:hover,:focus-visible) span::before{opacity:1}
@keyframes gradient-angle{to{--gradient-angle:360deg}}
@keyframes shimmer{to{rotate:360deg}}
@keyframes breathe{from,to{scale:1}50%{scale:1.2}}
/* 移除中間的框感：關掉點陣、方形閃光、hover 內側光暈，只留乾淨暗底 + 旋轉光邊 */
.shiny-cta::before,.shiny-cta::after,.shiny-cta span::before{display:none !important}
.link-arrow{
color:var(--gold-2);font-weight:600;font-size:14px;
display:inline-flex;align-items:center;gap:6px;
transition:gap .25s ease,color .25s ease;
}
.link-arrow:hover{gap:12px;color:var(--gold-warm)}
/* =====================================================
HERO — scroll-jacked immersive intro
The outer .hero-pin-wrapper is tall (350vh) so the inner
sticky .hero stays in view while the user scrolls — the
3D cosmos camera advances driven by scroll position.
Once scroll exits the wrapper, normal page flow resumes.
===================================================== */
.hero-pin-wrapper{
position:relative;
height:350vh; /* desktop: 3.5 viewport-heights of pinned journey */
width:100%;
background:#000; /* pure black — hero section is monochrome */
z-index:1;
}
.hero{
position:sticky;top:0;
width:100%;height:100vh;
display:flex;align-items:flex-end; /* 內容靠下，避免擋到結尾圖的比特幣 */
overflow:hidden;
/* pure black backdrop — no purple radials */
background:#000;
padding-bottom:8vh;
}
/* Mobile / tablet — disable scroll-jack, fall back to normal hero */
@media(max-width:1023px){
.hero-pin-wrapper{height:auto;min-height:100vh}
.hero{position:relative;height:auto;min-height:100vh;padding:160px 0 80px}
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
/* WebGL cosmos scene fills the bg.
Stars carry the scroll-through, then fade out (progress 0.5 → 0.9) as the
aurora takes over — so the arrival screen is aurora only, no stars. */
.hero-shader{
position:absolute;inset:0;width:100%;height:100%;
display:block;
opacity:clamp(0, calc(1 - (var(--hero-progress, 0) - 0.5) / 0.4), 1);
transition:opacity .15s linear;
}
/* Aurora arrival backdrop — layered over the stars, fades in as the
scroll-through journey settles (progress 0.5 → 0.9). The star travel
is untouched; the aurora is simply the screen you land on. */
.hero-aurora{
position:absolute;inset:0;width:100%;height:100%;
display:block;z-index:1;pointer-events:none;
opacity:clamp(0, calc((var(--hero-progress, 0) - 0.5) / 0.4), 1);
transition:opacity .15s linear;
}
/* ROVA emblem watermark — right side of the hero, fades in on arrival */
.hero-emblem{
position:absolute; z-index:2; pointer-events:none;
top:58%; right:14%;
width:min(30vw, 360px); height:auto;
/* watermark: appears with the hero content (progress 0.62 → 0.95) */
opacity:clamp(0, calc((var(--hero-progress, 0) - 0.62) / 0.33), 0.7);
filter:drop-shadow(0 0 40px rgba(120,150,220,.22));
animation:emblemFloat 9s ease-in-out infinite;
will-change:transform;
}
@keyframes emblemFloat{
0%,100%{ transform:translateY(-50%) }
50%{ transform:translateY(calc(-50% - 16px)) }
}
@media(max-width:900px){
/* avoid clashing with the title on narrow screens — center it behind, dimmer */
.hero-emblem{ right:50%; transform:translate(50%,-50%); width:min(70vw,380px); opacity:.14; animation:none; }
}
.hero-grid{
display:none; /* 移除網格線 */
position:absolute;inset:0;
background-image:
linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
background-size:72px 72px;
mask-image:radial-gradient(ellipse at 50% 40%, #000 25%, transparent 75%);
}
.hero-glow{
/* big radial glow removed — keep the element but make it invisible
so any JS hook that targets it still works */
display:none;
}
.hero-vignette{
position:absolute;inset:0;
background:
radial-gradient(ellipse 90% 70% at 30% 50%, transparent 35%, rgba(0,0,0,.55) 85%),
linear-gradient(180deg, transparent 52%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.85) 100%);
pointer-events:none;
}
/* Earth end-frame removed — hero now settles on the pure-black cosmos. */
/* 紫色 full-bleed 透視網格場：地板 + 天花板交會於中央地平線 + 發光帶 + 呼吸脈動 */
.hero-vgrid{
position:absolute; left:50%; width:360%; height:54%;
background-image:
linear-gradient(to right, rgba(168,85,247,.6) 1.2px, transparent 1.2px),
linear-gradient(to top, rgba(139,92,246,.5) 1.2px, transparent 1.2px);
background-size:62px 62px;
pointer-events:none; z-index:1;
animation: vgridMove 3.4s linear infinite, vgridPulse 5.5s ease-in-out infinite;
}
.hero-vgrid-floor{
bottom:-2%; transform-origin:50% 100%;
transform:translateX(-50%) perspective(300px) rotateX(67deg);
-webkit-mask-image:linear-gradient(to top, #000 0%, transparent 80%);
mask-image:linear-gradient(to top, #000 0%, transparent 80%);
}
.hero-vgrid-ceil{
top:-2%; transform-origin:50% 0%;
transform:translateX(-50%) perspective(300px) rotateX(-67deg);
-webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 80%);
mask-image:linear-gradient(to bottom, #000 0%, transparent 80%);
opacity:.55;
}
@keyframes vgridMove{ to{ background-position:0 62px; } }
@keyframes vgridPulse{ 0%,100%{ filter:brightness(.8) } 50%{ filter:brightness(1.3) } }
.hero-horizon{
position:absolute; left:0; right:0; top:50%; height:2px; transform:translateY(-50%);
background:linear-gradient(90deg, transparent, rgba(168,85,247,.85) 32%, rgba(217,70,239,.95) 50%, rgba(168,85,247,.85) 68%, transparent);
box-shadow:0 0 34px 8px rgba(139,92,246,.5);
z-index:2; pointer-events:none;
animation: vgridPulse 5.5s ease-in-out infinite;
}
/* Earth end-frame removed → hero settles on pure-black cosmos.
The title / subtitle / desc / badge are no longer hidden;
their Aura-style treatment lives at the END of this file so it
reliably wins over the base hero rules below. */
.hero-mandala{display:none !important} /* keep it minimal */
/* GSAP title char split — each glyph becomes an inline-block for 3D animation */
.title-char{
display:inline-block;
transform-origin:50% 100%;
will-change:transform,opacity;
white-space:pre;
}
/* =====================================================
Hero scroll-jack stages
Initial state (stage 1): only the cosmos + scroll prompt visible.
JS updates --hero-progress (0..1) on scroll; opacities reveal in stages.
===================================================== */
.hero-prompt{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
z-index:3;pointer-events:none;
display:flex;flex-direction:column;align-items:center;gap:18px;
font-family:'Orbitron',sans-serif;
font-size:13px;letter-spacing:.42em;
color:var(--text-2);text-transform:uppercase;
/* visible only at stage 1 (progress < 0.15) */
opacity:calc(1 - var(--hero-progress, 0) * 6.5);
transition:opacity .2s linear;
}
.hero-prompt .prompt-line{
display:block;width:2px;height:80px;
background:linear-gradient(180deg, var(--brand-plum), transparent);
animation:promptDrop 2s ease-in-out infinite;
}
@keyframes promptDrop{
0%{transform:scaleY(.4);transform-origin:top}
50%{transform:scaleY(1);transform-origin:top}
51%{transform:scaleY(1);transform-origin:bottom}
100%{transform:scaleY(.4);transform-origin:bottom}
}
/* Hero content fades in during stage 4 (progress > 0.7) */
.hero-content-v2{
/* progress 0..0.7 => opacity 0; 0.7..1 => fade to 1 */
opacity:clamp(0, calc((var(--hero-progress, 0) - 0.7) / 0.3), 1);
transform:translateY(calc((1 - clamp(0, (var(--hero-progress, 0) - 0.7) / 0.3, 1)) * 40px));
transition:opacity .15s linear, transform .15s linear;
}
/* Mandala scales + appears during stages 3-4 */
.hero-mandala{
/* progress 0..0.45 => opacity 0; 0.45..0.85 => fades to 1; 0.85..1 => fade out a touch */
opacity:clamp(0, calc((var(--hero-progress, 0) - 0.45) / 0.4), 1);
--m-scale:clamp(0.55, calc(0.55 + (var(--hero-progress, 0) - 0.3) * 1.1), 1);
}
/* Stage dots (right rail) */
.hero-stages{
position:absolute;right:max(2vw,24px);top:50%;transform:translateY(-50%);
z-index:4;display:flex;flex-direction:column;gap:14px;
pointer-events:none;
}
.stage-dot{
display:block;width:7px;height:7px;border-radius:50%;
background:rgba(255,255,255,.12);
transition:background .35s ease, transform .35s var(--ease), box-shadow .35s ease;
}
.stage-dot.active{
background:#D4AF37;transform:scale(1.4);
box-shadow:0 0 14px rgba(212,175,55,.7);
}
@media(max-width:1023px){
/* On mobile, drop the cinematic gating — content is always visible */
.hero-prompt{display:none}
.hero-content-v2{opacity:1 !important;transform:none !important}
.hero-mandala{opacity:.55 !important}
.hero-stages{display:none}
}
@keyframes heroGlowBreathe{
0%,100%{opacity:.9;transform:translateX(-50%) scale(1)}
50%{opacity:1;transform:translateX(-50%) scale(1.04)}
}
/* The floating mandala — signature visual, scaled by scroll progress */
.hero-mandala{
position:absolute;
left:50%;top:50%;
transform:translate(-50%,-50%) scale(var(--m-scale, 0.6));
width:min(540px,50vw);aspect-ratio:1/1;
z-index:1;pointer-events:none;
transition:transform .15s linear;
animation:mandalaFloat 9s ease-in-out infinite;
}
.mandala-img{
width:100%;height:100%;object-fit:contain;
mix-blend-mode:screen;
filter:
drop-shadow(0 0 32px rgba(74,29,94,.55)) /* cyan inner glow */
drop-shadow(0 0 60px rgba(106,42,110,.35)) /* violet mid */
drop-shadow(0 0 100px rgba(122,31,62,.20)); /* coral outer */
animation:mandalaSpin 60s linear infinite;
}
@keyframes mandalaFloat{
0%,100%{transform:translate(-50%,-50%) scale(var(--m-scale, 0.6))}
50%{transform:translate(-50%,calc(-50% - 12px)) scale(calc(var(--m-scale, 0.6) * 1.015))}
}
@keyframes mandalaSpin{
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
/* Orbit rings */
.orbit{
position:absolute;left:50%;top:50%;
border-radius:50%;border:1px solid rgba(106,42,110,.18);
transform:translate(-50%,-50%);pointer-events:none;
}
.orbit-1{width:110%;height:110%;animation:orbitPulse 6s ease-in-out infinite}
.orbit-2{width:135%;height:135%;border-color:rgba(106,42,110,.12);animation:orbitPulse 7s ease-in-out infinite .8s reverse}
.orbit-3{width:165%;height:165%;border-color:rgba(106,42,110,.06);animation:orbitPulse 9s ease-in-out infinite 1.6s}
@keyframes orbitPulse{
0%,100%{opacity:.4}
50%{opacity:.9;border-color:rgba(74,29,94,.4)}
}
@media(max-width:1023px){
.hero-mandala{
left:50%;top:18%;
transform:translate(-50%,0) scale(0.8);
width:min(360px,70vw);
}
@keyframes mandalaFloat{
0%,100%{transform:translate(-50%,0) scale(0.8)}
50%{transform:translate(-50%,-14px) scale(0.812)}
}
}
.hero-content{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 24px;width:100%}
.hero-content-v2{max-width:1280px}
.badge{
display:inline-flex;align-items:center;gap:10px;
padding:8px 16px;border:1px solid rgba(106,42,110,.3);
border-radius:30px;background:rgba(106,42,110,.06);
font-size:12px;color:var(--gold-warm);
letter-spacing:.18em;text-transform:uppercase;font-weight:600;
margin-bottom:32px;backdrop-filter:blur(8px);
}
.badge .dot{
width:6px;height:6px;border-radius:50%;background:var(--gold-2);
box-shadow:0 0 12px var(--gold-2);
animation:pulse 2s infinite;
}
@keyframes pulse{50%{opacity:.4}}
/* Hero title — theatre-style layout, broken across lines, asymmetric */
.hero-title-v2{
font-family:'Noto Sans TC','Orbitron',sans-serif;
font-size:clamp(56px,9.5vw,148px);
font-weight:900;line-height:.92;
letter-spacing:-.03em;
margin-bottom:28px;
max-width:920px;
text-shadow:0 2px 60px rgba(74,29,94,.12);
}
.hero-title-v2 .line{display:block;position:relative}
.hero-title-v2 .line-1{
padding-left:0;
opacity:.96;
}
.hero-title-v2 .line-2{
margin-top:.04em;
padding-left:clamp(40px,8vw,140px);
display:flex;align-items:baseline;gap:.22em;flex-wrap:wrap;
}
.hero-title-v2 .bar{
display:inline-block;
width:clamp(40px,5vw,72px);height:3px;
background:var(--grad);
margin-right:.4em;align-self:center;
box-shadow:0 0 12px rgba(74,29,94,.5);
border-radius:2px;
}
.hero-subtitle{
font-size:clamp(15px,1.8vw,20px);color:#dfe2ec;font-weight:500;
margin-bottom:12px;letter-spacing:.04em;font-family:'Orbitron','Noto Sans TC',sans-serif;
}
.hero-desc{
font-size:16px;color:var(--text-2);max-width:600px;margin-bottom:40px;line-height:1.7;
}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:60px}
.btn-primary .arr{
display:inline-block;transition:transform .3s var(--ease);
}
.btn-primary:hover .arr{transform:translateX(4px)}
/* Scroll cue at bottom of Hero */
.scroll-cue{
display:flex;align-items:center;gap:14px;
font-family:'Orbitron',sans-serif;
font-size:11px;letter-spacing:.4em;color:var(--text-3);
opacity:.7;
}
.scroll-cue .cue-line{
display:block;width:80px;height:1px;background:rgba(106,42,110,.4);
position:relative;overflow:hidden;
}
.scroll-cue .cue-line::after{
content:"";position:absolute;left:0;top:0;width:30%;height:100%;
background:var(--gold-warm);
animation:cueSweep 2.4s ease-in-out infinite;
}
@keyframes cueSweep{
0%{transform:translateX(-100%)}
100%{transform:translateX(330%)}
}
/* =====================================================
Marquee — brand mantras with star separators
===================================================== */
/* LogoCloud-style infinite ticker — black, centred band with full-width
hairlines top/bottom, edges blurred-faded, slows down on hover. */
.marquee{
position:relative; background:#000;
border-top:1px solid rgba(255,255,255,.10);
border-bottom:1px solid rgba(255,255,255,.10);
padding:24px 0; overflow:hidden;
}
.marquee-viewport{
position:relative; max-width:780px; margin:0 auto; overflow:hidden;
/* fade + soft blur at the two 160px edges (≈ progressive blur) */
-webkit-mask-image:linear-gradient(90deg, transparent 0, #000 21%, #000 79%, transparent 100%);
mask-image:linear-gradient(90deg, transparent 0, #000 21%, #000 79%, transparent 100%);
}
.marquee-track{
display:flex; gap:42px; white-space:nowrap; width:max-content;
animation:scroll 42s linear infinite reverse;
font-family:'Inter','Noto Sans TC',sans-serif; color:#c7ced8;
font-size:15px; letter-spacing:.16em; font-weight:300;
}
.marquee:hover .marquee-track{ animation-duration:120s; } /* speedOnHover → slower */
.marquee-track > span{flex-shrink:0;display:inline-flex;align-items:center}
.marquee-track .m-star{ color:#5ec8d6; font-size:10px; opacity:.55; text-shadow:none; }
.marquee-track .rova-wordmark{font-size:15px; filter:none;}
@keyframes scroll{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
/* =====================================================
Sections
===================================================== */
.section{padding:100px 0;position:relative}
.section-dark{background:linear-gradient(180deg,var(--bg) 0%,#070707 50%,var(--bg) 100%);}
.section-glow{position:relative;overflow:hidden}
.section-glow::before{
content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at center, rgba(106,42,110,.10) 0%, transparent 60%);
pointer-events:none;
}
.section-head{text-align:center;max-width:780px;margin:0 auto 60px}
.eyebrow{
display:inline-block;font-family:'Orbitron','Noto Sans TC',sans-serif;
color:var(--gold-2);font-size:12px;letter-spacing:.3em;
text-transform:uppercase;margin-bottom:14px;
}
.section-title{
font-size:clamp(30px,4.5vw,52px);font-weight:800;line-height:1.15;margin-bottom:14px;
}
.section-sub{font-size:17px;color:var(--text-2);line-height:1.7}
/* =====================================================
Three Col / Card
===================================================== */
.three-col{
display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:900px){.three-col{grid-template-columns:1fr}}
.card{
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:36px 30px;
transition:all .35s var(--ease);
position:relative;overflow:hidden;
}
.card::before{
content:"";position:absolute;inset:0;
background:var(--grad-soft);opacity:0;transition:opacity .35s ease;
}
.card:hover{transform:translateY(-4px);border-color:rgba(106,42,110,.3)}
.card:hover::before{opacity:1}
.card>*{position:relative;z-index:1}
.card-icon{
width:64px;height:64px;border-radius:16px;
display:flex;align-items:center;justify-content:center;
background:
radial-gradient(circle at 30% 30%, rgba(74,29,94,.18), transparent 60%),
linear-gradient(140deg, rgba(106,42,110,.10), rgba(46,22,72,.08) 60%, transparent);
border:1px solid rgba(106,42,110,.28);
margin-bottom:22px;
color:var(--gold-warm);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 28px -10px rgba(106,42,110,.25);
transition:transform .4s var(--ease), box-shadow .4s ease;
}
.card-icon svg{width:36px;height:36px;filter:drop-shadow(0 0 6px rgba(74,29,94,.4))}
.card:hover .card-icon{
transform:rotate(-4deg) scale(1.05);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 36px -10px rgba(106,42,110,.45);
}
.card h3{font-size:22px;font-weight:700;margin-bottom:12px}
.card p{color:var(--text-2);font-size:15px;line-height:1.7}
/* =====================================================
Stats Grid
===================================================== */
.stats-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:0;
border:1px solid rgba(106,42,110,.18);border-radius:24px;
overflow:hidden;
background:
radial-gradient(ellipse 60% 80% at 50% 50%, rgba(46,22,72,.06), transparent),
var(--card);
box-shadow:0 24px 80px -30px rgba(106,42,110,.25);
}
.stats-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1024px){.stats-grid,.stats-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.stats-grid,.stats-grid-4{grid-template-columns:1fr}}
.stat-card{
padding:44px 28px;text-align:center;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);
transition:background .25s ease;
}
.stat-card:hover{background:rgba(106,42,110,.04)}
.stat-num{
font-family:'Orbitron','Noto Sans TC',sans-serif;font-size:48px;font-weight:700;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
line-height:1;margin-bottom:8px;
}
.stat-num em{font-size:.5em;font-weight:600}
.stat-label{font-size:14px;color:var(--text-2)}
/* =====================================================
Services Grid
===================================================== */
.services-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
.service-card{
background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
padding:32px 26px;transition:all .35s var(--ease);
position:relative;overflow:hidden;
}
.service-card:hover{
transform:translateY(-6px);border-color:rgba(106,42,110,.4);
box-shadow:0 20px 60px -20px rgba(106,42,110,.25);
}
.service-card-wide{grid-column:span 4;background:linear-gradient(120deg,var(--card) 60%,rgba(106,42,110,.08))}
.service-icon{
width:64px;height:64px;border-radius:16px;
display:flex;align-items:center;justify-content:center;
background:
radial-gradient(circle at 30% 30%, rgba(74,29,94,.18), transparent 60%),
linear-gradient(140deg, rgba(106,42,110,.10), rgba(46,22,72,.08) 60%, transparent);
border:1px solid rgba(106,42,110,.28);margin-bottom:22px;
color:var(--gold-warm);
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 28px -10px rgba(106,42,110,.25);
transition:transform .4s var(--ease);
}
.service-icon svg{width:36px;height:36px;filter:drop-shadow(0 0 6px rgba(74,29,94,.4))}
.service-card:hover .service-icon{transform:rotate(-4deg) scale(1.05)}
.service-card h3{font-size:20px;font-weight:700;margin-bottom:10px}
.service-card p{color:var(--text-2);font-size:14px;margin-bottom:18px;line-height:1.7}
@media(max-width:1024px){.services-grid{grid-template-columns:repeat(2,1fr)}.service-card-wide{grid-column:span 2}}
@media(max-width:600px){.services-grid{grid-template-columns:1fr}.service-card-wide{grid-column:span 1}}
/* ===== Glassmorphism premium cards (violet spec) — 什麼是 Rova(3卡) + 四大核心服務(4卡) ===== */
.three-col,.services-grid{gap:18px}
.card,.service-card{
background:
linear-gradient(rgba(255,255,255,.045), rgba(255,255,255,.02)) padding-box,
linear-gradient(145deg, rgba(168,85,247,.5) 0%, rgba(255,255,255,.13) 42%, rgba(255,255,255,0) 100%) border-box;
border:1px solid transparent;
border-radius:32px;
padding:30px 28px;
-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
box-shadow:inset 0 1px 0 0 rgba(255,255,255,.07);
transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease, border-color .55s ease;
}
.card:hover,.service-card:hover{
transform:translateY(-8px);
border-color:transparent;
box-shadow:inset 0 1px 0 0 rgba(255,255,255,.12), 0 26px 70px -26px rgba(139,92,246,.55), 0 0 26px -6px rgba(217,70,239,.38);
}
.card-icon,.service-icon{
width:58px;height:58px;border-radius:16px;
background:linear-gradient(145deg, rgba(139,92,246,.28), rgba(255,255,255,.04));
border:.8px solid rgba(168,85,247,.5);
color:#b9a3f5;
box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 20px -2px rgba(139,92,246,.35);
margin-bottom:20px;
}
.card-icon svg,.service-icon svg{filter:drop-shadow(0 0 6px rgba(139,92,246,.6))}
.card:hover .card-icon,.service-card:hover .service-icon{transform:rotate(-4deg) scale(1.06)}
.card h3,.service-card h3{color:#fff;letter-spacing:-.01em}
.card p,.service-card p{color:#9aa3b8}
.service-card .link-arrow{color:#A78BFA}
.service-card .link-arrow:hover{color:#c9b8ff}
#services .gradient-text{
background:linear-gradient(135deg,#C4B5FD,#8B5CF6,#7C3AED);
-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* =====================================================
Framework
===================================================== */
.framework-grid{
display:grid;grid-template-columns:repeat(5,1fr);gap:18px;
}
@media(max-width:1024px){.framework-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.framework-grid{grid-template-columns:1fr}}
.framework-item{
background:var(--card);border:1px solid var(--line);border-radius:14px;
padding:30px 22px;
position:relative;transition:all .3s ease;
}
.framework-item:hover{border-color:rgba(106,42,110,.4);transform:translateY(-3px)}
.fw-num{
display:inline-block;font-family:'Orbitron','Noto Sans TC',sans-serif;
font-size:28px;font-weight:700;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
margin-bottom:14px;
}
.framework-item h4{font-size:18px;margin-bottom:10px;font-weight:700}
.framework-item p{color:var(--text-2);font-size:14px;line-height:1.65}
/* =====================================================
Team
===================================================== */
.team-grid{
display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
.team-card{
background:var(--card);border:1px solid var(--line);border-radius:20px;
padding:32px;display:flex;gap:24px;
transition:all .35s var(--ease);position:relative;overflow:hidden;
}
.team-card.featured{
grid-column:1/-1;
background:linear-gradient(135deg,rgba(106,42,110,.06),rgba(15,15,16,1));
border-color:rgba(106,42,110,.25);
}
.team-card:hover{border-color:rgba(106,42,110,.4);transform:translateY(-4px)}
.team-avatar{
flex-shrink:0;
width:84px;height:84px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Orbitron','Noto Sans TC',sans-serif;
font-size:38px;font-weight:900;letter-spacing:0;
color:var(--gold-warm);
background:
radial-gradient(circle at 30% 30%, rgba(74,29,94,.18), transparent 55%),
radial-gradient(circle at 70% 80%, rgba(46,22,72,.35), transparent 60%),
radial-gradient(circle at 50% 50%, var(--cosmo-1), #050610 70%);
border:1px solid rgba(106,42,110,.32);
box-shadow:
inset 0 0 20px rgba(46,22,72,.4),
inset 0 1px 0 rgba(255,255,255,.06),
0 0 24px rgba(106,42,110,.22),
0 8px 32px -8px rgba(0,0,0,.6);
overflow:hidden;position:relative;
text-shadow:0 0 18px rgba(74,29,94,.6), 0 0 4px rgba(106,42,110,.4);
}
/* Twinkling star micro-dots */
.team-avatar::before,
.team-avatar::after{
content:"";position:absolute;border-radius:50%;
background:#ffe9a8;pointer-events:none;
}
.team-avatar::before{
width:2px;height:2px;top:18%;left:22%;
box-shadow:
36px 12px 0 -.5px rgba(74,29,94,.7),
14px 48px 0 -.5px rgba(74,29,94,.5),
52px 56px 0 -.5px rgba(255,255,255,.6),
48px 30px 0 -.5px rgba(74,29,94,.4);
animation:twinkleA 4s ease-in-out infinite;
}
.team-avatar::after{
width:1px;height:1px;top:30%;right:26%;
box-shadow:
-22px 18px 0 0 rgba(106,42,110,.6),
8px 32px 0 0 rgba(255,255,255,.5);
animation:twinkleA 3.2s ease-in-out infinite .6s;
}
@keyframes twinkleA{
0%,100%{opacity:.85}
50%{opacity:.3}
}
/* Orbit ring around avatar */
.team-avatar{box-sizing:border-box}
.team-card.featured .team-avatar{
width:108px;height:108px;font-size:48px;
}
/* Photo avatars override the cosmic bg (keep the existing rules below) */
/* Avatar that holds a real photo instead of an initial letter */
.team-avatar-photo{
background:#0a0a0a;
border:2px solid rgba(106,42,110,.5);
padding:0;
text-shadow:none;
}
.team-avatar-photo::before,
.team-avatar-photo::after{display:none}
.team-avatar-photo img{
width:100%;height:100%;object-fit:cover;
display:block;
transition:transform .5s var(--ease), filter .5s ease;
}
.team-card:hover .team-avatar-photo img{
transform:scale(1.08);
filter:brightness(1.1) saturate(1.1);
}
.team-body{flex:1}
.team-tag{
display:inline-block;font-size:11px;letter-spacing:.2em;
color:var(--gold-2);background:rgba(106,42,110,.1);
padding:4px 10px;border-radius:30px;margin-bottom:10px;
}
.team-card h3{font-size:24px;margin-bottom:6px;font-weight:700}
.team-card h3 .role{font-size:14px;color:var(--text-3);font-weight:400;margin-left:8px}
.team-quote{
font-style:italic;color:var(--gold-warm);
border-left:2px solid var(--gold-2);padding-left:12px;
margin:10px 0 16px;
}
.team-meta{display:grid;gap:8px;margin-bottom:18px}
.team-meta li{
display:flex;gap:12px;font-size:14px;
padding:6px 0;border-bottom:1px dashed var(--line);
}
.team-meta li span{color:var(--text-3);min-width:90px}
.team-meta li b{color:#fff;font-weight:500}
.team-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
padding-top:18px;border-top:1px solid var(--line);
}
.team-stats>div{text-align:center}
.team-stats em{
display:block;font-family:'Orbitron','Noto Sans TC',sans-serif;font-size:20px;font-weight:700;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
margin-bottom:4px;
}
.team-stats span{font-size:11px;color:var(--text-3)}
@media(max-width:900px){
.team-grid{grid-template-columns:1fr}
.team-card{flex-direction:column;text-align:center}
.team-card.featured .team-avatar,.team-avatar{margin:0 auto}
.team-meta li{justify-content:center;flex-direction:column;gap:0}
.team-meta li span{min-width:0}
}
/* =====================================================
Tutorial Videos
===================================================== */
/* Base card (shared by featured + grid items) */
.tutorial-card{
position:relative;
background:linear-gradient(160deg,rgba(106,42,110,.04),var(--card) 35%,var(--card));
border:1px solid var(--line);border-radius:22px;
overflow:hidden;display:flex;flex-direction:column;
transition:all .35s var(--ease);
}
.tutorial-card::before{
/* subtle top-gold accent strip */
content:"";position:absolute;left:24px;right:24px;top:0;height:2px;
background:var(--grad);opacity:.45;border-radius:2px;
transition:opacity .35s ease;
z-index:2;pointer-events:none;
}
.tutorial-card:hover{
border-color:rgba(106,42,110,.55);
transform:translateY(-6px);
box-shadow:0 24px 60px -22px rgba(106,42,110,.45),
0 0 0 1px rgba(106,42,110,.1) inset;
}
.tutorial-card:hover::before{opacity:1}
/* Number badge top-right */
.tutorial-num{
position:absolute;top:14px;right:18px;z-index:3;
font-family:'Orbitron','Noto Sans TC',sans-serif;
font-size:42px;font-weight:900;letter-spacing:.02em;
background:var(--grad);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 0 8px rgba(106,42,110,.35));
line-height:1;pointer-events:none;
opacity:.55;
transition:opacity .3s ease, transform .3s var(--ease);
}
.tutorial-card:hover .tutorial-num{opacity:1;transform:scale(1.04)}
/* Video iframe wrapper */
.tutorial-frame{
position:relative;width:100%;
aspect-ratio:16/9;
background:#000;
border-bottom:1px solid var(--line);
}
.tutorial-frame iframe{
position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
/* Card body */
.tutorial-body{padding:24px 26px 28px;flex:1;display:flex;flex-direction:column}
.tutorial-tag{
display:inline-block;align-self:flex-start;
font-size:11px;letter-spacing:.22em;
color:var(--gold-2);background:rgba(106,42,110,.08);
border:1px solid rgba(106,42,110,.22);
padding:5px 12px;border-radius:30px;margin-bottom:14px;
text-transform:uppercase;font-weight:600;
}
.tutorial-body h3{
font-family:'Noto Sans TC','Orbitron',sans-serif;
font-size:20px;font-weight:700;margin-bottom:8px;color:#fff;
line-height:1.35;
}
.tutorial-body p{
font-size:14px;color:var(--text-2);line-height:1.65;
}
/* Featured (top card, full width, larger) */
.tutorial-featured{
margin-bottom:28px;
background:linear-gradient(135deg,rgba(106,42,110,.08),rgba(15,15,16,1) 55%);
border-color:rgba(106,42,110,.28);
}
.tutorial-featured::before{opacity:.85}
.tutorial-featured .tutorial-num{font-size:64px;top:18px;right:26px}
.tutorial-featured .tutorial-body{padding:30px 36px 36px}
.tutorial-featured .tutorial-body h3{
font-size:30px;letter-spacing:.01em;margin-bottom:10px;
}
.tutorial-featured .tutorial-body p{font-size:16px;max-width:780px}
@media(min-width:900px){
.tutorial-featured{
display:grid;grid-template-columns:1.4fr 1fr;align-items:stretch;gap:0;
}
.tutorial-featured .tutorial-frame{
border-bottom:0;border-right:1px solid var(--line);
height:100%;aspect-ratio:auto;
}
.tutorial-featured .tutorial-body{padding:40px 44px;justify-content:center}
}
/* 2x2 grid below */
.tutorial-grid{
display:grid;grid-template-columns:repeat(2,1fr);gap:24px;
}
@media(max-width:768px){
.tutorial-grid{grid-template-columns:1fr}
.tutorial-num{font-size:34px;top:10px;right:14px}
.tutorial-featured .tutorial-num{font-size:46px}
.tutorial-featured .tutorial-body h3{font-size:24px}
.tutorial-featured .tutorial-body{padding:24px 22px 28px}
}
/* =====================================================
Achievements
===================================================== */
.ach-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
margin-bottom:40px;position:relative;
}
@media(max-width:768px){.ach-grid{grid-template-columns:1fr}}
.ach-card{
background:rgba(15,15,16,.6);backdrop-filter:blur(20px);
border:1px solid var(--line);border-radius:18px;
padding:32px 26px;text-align:center;
transition:all .35s var(--ease);
position:relative;overflow:hidden;
}
.ach-card::before{
content:"";position:absolute;left:0;top:0;height:2px;width:0;
background:var(--grad);transition:width .5s ease;
}
.ach-card:hover::before{width:100%}
.ach-card.big{grid-column:span 1;border-color:rgba(106,42,110,.35);background:linear-gradient(135deg,rgba(106,42,110,.08),rgba(15,15,16,1))}
.ach-label{font-size:13px;color:var(--text-3);margin-bottom:14px;letter-spacing:.1em}
.ach-num{
font-family:'Orbitron','Noto Sans TC',sans-serif;font-size:52px;font-weight:700;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
line-height:1;
}
.ach-num em{font-size:.5em;margin-left:4px;font-weight:600}
.ach-sub{font-size:13px;color:var(--text-2);margin-top:10px}
.badge-row{
display:flex;gap:12px;flex-wrap:wrap;justify-content:center;
position:relative;z-index:1;
}
.ach-badge{
padding:10px 20px;border:1px solid rgba(106,42,110,.35);
background:rgba(106,42,110,.06);border-radius:30px;
font-size:13px;color:var(--gold-warm);letter-spacing:.05em;
}
/* =====================================================
Creators
===================================================== */
.creators-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
}
@media(max-width:900px){.creators-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.creators-grid{grid-template-columns:1fr}}
.creator-card{
background:var(--card);border:1px solid var(--line);border-radius:16px;
padding:28px 22px;text-align:center;
transition:all .3s ease;
}
.creator-card:hover{border-color:rgba(106,42,110,.4);transform:translateY(-4px)}
.creator-avatar{
width:72px;height:72px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:'Noto Sans TC','Orbitron',sans-serif;font-size:30px;font-weight:700;
background:var(--grad);color:#fff;margin:0 auto 16px;
box-shadow:var(--shadow-gold);
}
.creator-card h4{font-size:18px;margin-bottom:6px}
.creator-card p{font-size:13px;color:var(--text-2);margin-bottom:14px}
.creator-stat{
display:inline-block;padding:4px 12px;
background:rgba(106,42,110,.1);color:var(--gold-warm);
border-radius:30px;font-size:12px;margin-bottom:14px;
}
.creator-link{display:block;color:var(--gold-2);font-size:13px;font-weight:600}
.creator-link:hover{color:var(--gold-warm)}
/* =====================================================
Exchanges
===================================================== */
.ex-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:60px;
}
@media(max-width:1024px){.ex-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.ex-grid{grid-template-columns:1fr}}
.ex-card{
background:var(--card);border:1px solid var(--line);border-radius:18px;
padding:32px 24px;position:relative;
transition:all .35s var(--ease);
}
.ex-card:hover{transform:translateY(-4px);border-color:rgba(106,42,110,.3)}
.ex-card.recommended{
border-color:var(--gold-2);
background:linear-gradient(180deg,rgba(106,42,110,.05),var(--card) 60%);
box-shadow:0 20px 60px -20px rgba(106,42,110,.4);
}
.ex-tag{
position:absolute;top:-12px;right:18px;
background:var(--grad);color:#fff;
font-size:11px;padding:5px 12px;border-radius:20px;
letter-spacing:.15em;font-weight:700;
}
.ex-logo{
font-family:'Orbitron','Noto Sans TC',sans-serif;font-size:28px;font-weight:700;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
margin-bottom:20px;
}
.ex-features{margin-bottom:24px}
.ex-features li{
padding:8px 0;border-bottom:1px solid var(--line);
font-size:14px;color:var(--text-2);
display:flex;align-items:center;gap:8px;
}
.ex-features li::before{content:"✓";color:var(--gold-2);font-weight:700}
.ex-rebate{
display:block;text-align:center;margin-top:12px;
font-size:13px;color:var(--gold-warm);
}
/* steps */
.how-to-start{
background:var(--card);border:1px solid var(--line);
border-radius:20px;padding:40px;
}
.how-to-start h3{
text-align:center;font-size:24px;margin-bottom:30px;font-weight:700;
}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:768px){.steps{grid-template-columns:1fr}}
.step{
text-align:center;padding:24px 16px;
background:rgba(255,255,255,.02);border-radius:14px;
border:1px solid var(--line);
}
.step-num{
display:inline-flex;align-items:center;justify-content:center;
width:42px;height:42px;border-radius:50%;
background:var(--grad);color:#fff;
font-family:'Orbitron','Noto Sans TC',sans-serif;font-size:18px;font-weight:700;
margin-bottom:14px;box-shadow:var(--shadow-gold);
}
.step h4{font-size:17px;margin-bottom:6px;font-weight:700}
.step p{font-size:14px;color:var(--text-2)}
/* =====================================================
Testimonials
===================================================== */
.testi-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px;
}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr}}
.testi{
background:var(--card);border:1px solid var(--line);border-radius:16px;
padding:28px;transition:all .3s ease;
}
.testi:hover{border-color:rgba(106,42,110,.3)}
.testi-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.t-avatar{
width:48px;height:48px;border-radius:50%;
background:var(--grad);color:#fff;
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:18px;
}
.testi-head h5{font-size:16px;margin-bottom:2px}
.testi-head span{font-size:12px;color:var(--text-3)}
.testi>p{
font-size:15px;color:var(--text);line-height:1.7;margin-bottom:18px;
position:relative;padding-left:14px;border-left:2px solid var(--gold-2);
}
.testi-stats{display:flex;gap:18px;padding-top:14px;border-top:1px solid var(--line)}
.testi-stats span{display:flex;flex-direction:column;font-size:11px;color:var(--text-3)}
.testi-stats em{
font-family:'Orbitron','Noto Sans TC',sans-serif;font-size:18px;font-weight:700;
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* =====================================================
Calculator
===================================================== */
.calc{
max-width:780px;margin:0 auto;
background:var(--card);border:1px solid var(--line);border-radius:20px;
padding:36px;
}
.calc-row{
display:grid;grid-template-columns:180px 1fr 120px;gap:20px;align-items:center;
margin-bottom:24px;
}
@media(max-width:600px){.calc-row{grid-template-columns:1fr}.calc-row label{margin-bottom:0}}
.calc-row label{font-size:14px;color:var(--text-2)}
.calc-row input[type="range"]{
-webkit-appearance:none;height:6px;border-radius:6px;
background:linear-gradient(90deg,var(--gold-2),var(--line));
outline:none;
}
.calc-row input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
background:var(--grad);box-shadow:0 0 12px rgba(106,42,110,.6);
cursor:pointer;
}
.calc-out{
text-align:right;font-family:'Orbitron','Noto Sans TC',sans-serif;font-weight:700;font-size:16px;
color:var(--gold-2);
}
.calc-results{
display:grid;grid-template-columns:1fr 1fr;gap:20px;
padding:24px;background:rgba(106,42,110,.04);
border:1px solid rgba(106,42,110,.2);border-radius:14px;
margin-top:30px;
}
@media(max-width:600px){.calc-results{grid-template-columns:1fr}}
.calc-results>div{display:flex;flex-direction:column;gap:6px}
.calc-results strong{
font-family:'Orbitron','Noto Sans TC',sans-serif;font-size:26px;
}
.big-gold{
background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
font-size:32px !important;
}
.calc-note{margin-top:16px;font-size:12px;color:var(--text-3)}
/* =====================================================
FAQ
===================================================== */
.faq-list{max-width:880px;margin:0 auto}
.faq-item{
background:var(--card);border:1px solid var(--line);border-radius:14px;
margin-bottom:12px;overflow:hidden;
transition:border-color .3s ease;
}
.faq-item[open]{border-color:rgba(106,42,110,.3)}
.faq-item summary{
list-style:none;cursor:pointer;
padding:20px 26px;
display:flex;align-items:center;justify-content:space-between;gap:20px;
font-size:16px;font-weight:600;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{
flex-shrink:0;width:28px;height:28px;border-radius:50%;
background:var(--grad);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:18px;font-weight:700;
transition:transform .3s ease;
}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
.faq-body{
padding:0 26px 22px;color:var(--text-2);font-size:15px;line-height:1.75;
}
.faq-cta{
text-align:center;margin-top:50px;padding:40px;
background:linear-gradient(135deg,rgba(106,42,110,.06),transparent);
border:1px solid var(--line);border-radius:20px;
}
.faq-cta p{margin-bottom:20px;font-size:16px}
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* =====================================================
CTA Band
===================================================== */
.cta-band{
padding:100px 0;
background:
radial-gradient(ellipse 60% 60% at 50% 50%, rgba(106,42,110,.15), transparent 65%),
linear-gradient(180deg, var(--bg), #0a0606, var(--bg));
text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
content:"";position:absolute;inset:0;
background-image:
linear-gradient(rgba(106,42,110,.06) 1px,transparent 1px),
linear-gradient(90deg,rgba(106,42,110,.06) 1px,transparent 1px);
background-size:80px 80px;
mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 70%);
}
.cta-band>.container{position:relative;z-index:1}
.cta-band h2{font-size:clamp(28px,4.5vw,48px);font-weight:800;margin-bottom:18px}
.cta-band>.container>p{color:var(--text-2);font-size:17px;margin-bottom:30px;line-height:1.8}
.cta-list{
display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
max-width:780px;margin:50px auto 0;text-align:left;
}
@media(max-width:600px){.cta-list{grid-template-columns:1fr}}
.cta-list li{
padding:16px 22px;background:var(--card);border:1px solid var(--line);
border-radius:12px;font-size:14px;color:var(--text-2);
}
/* =====================================================
Footer
===================================================== */
.site-footer{
background:#050505;border-top:1px solid var(--line);
padding:80px 0 30px;
}
.footer-grid{
display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:40px;
margin-bottom:50px;
}
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .brand{margin-bottom:14px}
.footer-brand p{font-size:14px;color:var(--text-2);margin-bottom:8px}
.site-footer h5{font-size:14px;color:#fff;margin-bottom:18px;letter-spacing:.05em}
.site-footer ul li{margin-bottom:10px}
.site-footer ul li a{font-size:14px;color:var(--text-2);transition:color .25s ease}
.site-footer ul li a:hover{color:var(--gold-2)}
.footer-bottom{
display:flex;justify-content:space-between;align-items:center;
padding-top:24px;border-top:1px solid var(--line);
font-size:13px;color:var(--text-3);flex-wrap:wrap;gap:10px;
}
/* ===== Clean closing footer (footer-v2) ===== */
.footer-v2{ padding:0; }
.footer-v2 .brand-logo{ mix-blend-mode:normal; height:30px; }
.footer-cta{
text-align:center; max-width:720px; margin:0 auto; padding:80px 24px 56px;
}
.footer-cta-title{
font-size:clamp(26px,3.4vw,40px); font-weight:700; color:#fff;
margin:0 0 14px; line-height:1.25;
}
.footer-cta-sub{ color:var(--text-2); font-size:16px; margin:0 0 30px; }
.footer-cta .join-cta{ margin:0 auto; }
.footer-meta{
display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
padding:28px 0; border-top:1px solid var(--line);
}
.footer-links{ display:flex; gap:24px; flex-wrap:wrap; }
.footer-links a{ font-size:14px; color:var(--text-2); transition:color .2s ease; }
.footer-links a:hover{ color:#fff; }
.footer-v2 .footer-bottom{ padding:22px 0 30px; }
/* copyright "Rova" → white instead of purple gradient */
.footer-v2 .footer-bottom .rova-wordmark{
background:none; color:#fff; -webkit-text-fill-color:#fff; filter:none;
}
@media(max-width:680px){
.footer-meta{ flex-direction:column; align-items:flex-start; }
.footer-v2 .footer-bottom{ flex-direction:column; align-items:flex-start; }
}
/* utility */
.scroll-reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease}
.scroll-reveal.in{opacity:1;transform:translateY(0)}
/* =========================================================
AURA HERO — settled-state treatment (placed last so it wins).
Cosmos travel lands on a pure-black, glassy Aura screen:
Inter ultra-thin display (-0.05em), muted gray palette.
========================================================= */
/* badge → Aura glass pill */
.hero-content-v2 .badge{
border:.8px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.04);
color:#9CA3AF;font-weight:300;letter-spacing:.3em;
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.hero-content-v2 .badge .dot{background:#9CA3AF;box-shadow:0 0 10px rgba(156,163,175,.55)}
/* display headline → Inter ultra-thin, -0.05em */
.hero-title-v2{
font-family:'Inter','Noto Sans TC',sans-serif;
font-weight:300;
letter-spacing:-.04em;
line-height:1.0;
/* smaller than the old 148px display so two CJK lines fit above the fold */
font-size:clamp(38px,5.2vw,84px);
max-width:none;
margin-bottom:24px;
text-shadow:none;
color:#fff;
}
.hero-title-v2 .line-1{opacity:1}
/* drop the heavy asymmetric indent so 「建立於 Rova」stays on one line */
.hero-title-v2 .line-2{padding-left:0;margin-top:.04em;gap:.2em}
.hero-title-v2 .bar{width:clamp(26px,2.6vw,46px);height:2px;margin-right:.3em;background:linear-gradient(90deg,#9CA3AF,#76688D);box-shadow:none}
.hero-title-v2 .hero-rova{
background:linear-gradient(135deg,#F3F4F6,#9CA3AF,#76688D);
-webkit-background-clip:text;background-clip:text;
color:transparent;-webkit-text-fill-color:transparent;
filter:none;text-shadow:none;
}
/* supporting copy → Inter thin gray */
.hero-subtitle{
font-family:'Inter','Noto Sans TC',sans-serif;
color:#9CA3AF;font-weight:300;letter-spacing:.06em;
}
.hero-subtitle .rova-wordmark{filter:none}
.hero-desc{
font-family:'Inter','Noto Sans TC',sans-serif;
color:#9CA3AF;font-weight:300;
}
/* scroll cue → neutral gray */
.scroll-cue{color:#6B7280}
.scroll-cue .cue-line{background:rgba(255,255,255,.14)}
.scroll-cue .cue-line::after{background:#9CA3AF}
/* =========================================================
"什麼是 Rova" (#about) — visual refinement aligned to the
aurora / Aura hero: cooler cyan-violet glass, Inter-thin
heading, restrained ambient glow. Scoped to #about so the
other sections stay untouched.
========================================================= */
/* =========================================================
Full-page aurora (cyan/teal/blue, no purple) fixed behind
the content sections; the sections are transparent so it
shows through. Hero keeps its own aurora.
========================================================= */
.page-aurora{
position:fixed; inset:0; width:100vw; height:100vh;
z-index:0; pointer-events:none; opacity:.5;
}
#main-site{ position:relative; z-index:1; }
#about, #team, #stats, #services, #journey{ position:relative; background:transparent; }
#about > .container, #team > .container, #stats > .container, #services > .container, #journey > .container{ position:relative; z-index:1; }
/* glowing light-beam divider — the bright line sits at the section's top
edge; the halo fades UPWARD only, so nothing bleeds below the line. */
#about::before, #team::before, #stats::before, #services::before, #journey::before{
content:""; position:absolute; top:0; left:50%; transform:translate(-50%,-100%);
width:min(88%, 1040px); height:48px; z-index:2; pointer-events:none;
background:
linear-gradient(90deg, transparent, rgba(125,220,242,.5) 24%, rgba(202,244,255,.95) 50%, rgba(125,220,242,.5) 76%, transparent) bottom/100% 1.5px no-repeat,
radial-gradient(ellipse 56% 120% at 50% 100%, rgba(90,205,238,.22), transparent 72%);
}
/* section head → Aura premium, cool (no violet) */
#about .eyebrow{
font-family:'Inter','Noto Sans TC',sans-serif;
color:#9CA3AF; font-weight:300; letter-spacing:.34em;
}
#about .section-title{
font-family:'Inter','Noto Sans TC',sans-serif;
font-weight:300; letter-spacing:-.03em; line-height:1.12;
font-size:clamp(32px,4.6vw,58px);
}
/* every "Rova" wordmark in this section → cyan/teal (drop the gold glow) */
#about .rova-wordmark{
background:linear-gradient(120deg,#9fe9f2,#38bdf8,#cfeff6);
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent;
filter:none;
}
#about .section-sub{ color:#9aa3b8; font-weight:300; }
/* cards → cool cyan/teal glass on neutral white (no purple) */
#about .three-col{ gap:16px; }
#about .card{
border-radius:24px; padding:34px 30px;
background:
linear-gradient(rgba(255,255,255,.05), rgba(255,255,255,.018)) padding-box,
linear-gradient(150deg, rgba(45,212,216,.45) 0%, rgba(255,255,255,.12) 48%, rgba(255,255,255,.04) 100%) border-box;
border:1px solid transparent;
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 24px 60px -34px rgba(0,0,0,.85);
transition:transform .55s cubic-bezier(.16,1,.3,1), box-shadow .55s ease;
}
/* neutralise the inherited violet hover wash */
#about .card::before{ background:radial-gradient(circle at 50% 0%, rgba(45,212,216,.07), transparent 70%) !important; }
/* faint cyan sheen across the top edge */
#about .card::after{
content:""; position:absolute; left:16%; right:16%; top:0; height:1px; z-index:2;
background:linear-gradient(90deg, transparent, rgba(120,210,235,.6), transparent);
}
#about .card:hover{
transform:translateY(-8px);
border-color:transparent;
box-shadow:inset 0 1px 0 rgba(255,255,255,.1),
0 30px 70px -28px rgba(20,120,150,.45),
0 0 28px -8px rgba(45,212,216,.32);
}
#about .card-icon{
width:60px; height:60px; border-radius:16px;
background:linear-gradient(150deg, rgba(45,212,216,.24), rgba(255,255,255,.05));
border:.8px solid rgba(130,205,225,.45);
color:#bfe9f0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 22px -4px rgba(60,170,205,.4);
}
#about .card-icon svg{ filter:drop-shadow(0 0 6px rgba(90,190,225,.6)); }
#about .card:hover .card-icon{ transform:rotate(-3deg) scale(1.06); }
#about .card h3{
font-family:'Inter','Noto Sans TC',sans-serif;
font-weight:500; letter-spacing:-.01em; color:#fff;
}
#about .card p{ color:#9aa3b8; font-weight:300; }
#about .link-arrow{ color:#9fd7e6; }
#about .link-arrow:hover{ color:#d6f0f7; }
/* =========================================================
"我們用數據說話" (#stats) — de-purple → cyan/teal, glassy
bordered stat grid. Scoped to #stats.
========================================================= */
#stats{ background:transparent; }
#stats .eyebrow{
font-family:'Inter','Noto Sans TC',sans-serif;
color:#9CA3AF; font-weight:300; letter-spacing:.34em;
}
#stats .section-title{
font-family:'Inter','Noto Sans TC',sans-serif;
font-weight:300; letter-spacing:-.03em; line-height:1.12;
}
#stats .gradient-text,
#stats .rova-wordmark{
background:linear-gradient(120deg,#9fe9f2,#38bdf8,#5eead4);
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent;
filter:none;
}
#stats .section-sub{ color:#9aa3b8; font-weight:300; }
/* bordered stat grid → cool glass */
#stats .stats-grid{
border-color:rgba(120,200,225,.20);
background:linear-gradient(rgba(255,255,255,.035), rgba(255,255,255,.012));
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 26px 60px -38px rgba(0,0,0,.8);
}
#stats .stat-card{ border-color:rgba(255,255,255,.08); }
#stats .stat-card:hover{ background:rgba(45,212,216,.05); }
/* big metric numbers → cyan/teal (was gold) */
#stats .stat-num{
background:linear-gradient(120deg,#a7eef5,#38bdf8,#5eead4);
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent;
text-shadow:none;
}
#stats .stat-label{ color:#9aa3b8; font-family:'Inter','Noto Sans TC',sans-serif; font-weight:300; letter-spacing:.02em; }
/* =========================================================
#about → BentoGrid layout (dark glass, cool cyan accents).
========================================================= */
#about .bento-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
max-width:1080px; margin:0 auto;
}
@media(max-width:840px){ #about .bento-grid{ grid-template-columns:1fr; } }
#about .bento-item{
position:relative; display:flex; flex-direction:column;
min-height:158px; padding:18px; border-radius:16px; overflow:hidden;
border:1px solid rgba(120,205,230,.22);
/* cyan corner wash on every card */
background:
radial-gradient(130% 90% at 0% 0%, rgba(45,212,216,.10), transparent 52%),
linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.008));
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
#about .bento-item.span-2{ grid-column:span 2; }
@media(max-width:840px){ #about .bento-item.span-2{ grid-column:span 1; } }
#about .bento-item:hover,
#about .bento-item.persistent{
transform:translateY(-3px);
border-color:rgba(120,205,230,.30);
box-shadow:0 18px 50px -30px rgba(0,0,0,.8), 0 0 24px -10px rgba(45,212,216,.28);
}
/* dot-grid overlay on hover / persistent */
#about .bento-item::before{
content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
background-image:radial-gradient(circle at center, rgba(255,255,255,.025) 1px, transparent 1px);
background-size:4px 4px; transition:opacity .3s ease;
}
#about .bento-item:hover::before,
#about .bento-item.persistent::before{ opacity:1; }
#about .bento-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
#about .bento-icon{
width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.08); border:.8px solid rgba(255,255,255,.10);
}
#about .bento-icon svg{ width:17px; height:17px; }
#about .bento-icon.i-cyan{ color:#5ec8d6; }
#about .bento-icon.i-sky{ color:#56b6f0; }
#about .bento-icon.i-teal{ color:#5eead4; }
#about .bento-status{
font-size:11px; font-weight:400; letter-spacing:.04em;
padding:3px 9px; border-radius:8px;
background:rgba(255,255,255,.07); color:#aeb6c2;
-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
#about .bento-title{
font-family:'Inter','Noto Sans TC',sans-serif; font-weight:500; font-size:16px;
letter-spacing:-.01em; color:#f1f3f6; margin:0 0 7px;
}
#about .bento-meta{ font-size:11px; font-weight:300; color:#7f8896; margin-left:8px; letter-spacing:.02em; }
#about .bento-desc{
font-family:'Inter','Noto Sans TC',sans-serif; font-weight:300; font-size:13px;
line-height:1.6; color:#9aa3b2; margin:0;
}
#about .bento-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; }
#about .bento-tags{ display:flex; gap:6px; flex-wrap:wrap; }
#about .bento-tags span{
font-size:11px; color:#8b94a2; padding:3px 8px; border-radius:7px;
background:rgba(255,255,255,.06); transition:background .2s ease;
}
#about .bento-item:hover .bento-tags span{ background:rgba(255,255,255,.10); }
#about .bento-cta{ font-size:12px; color:#9fd7e6; white-space:nowrap; opacity:0; transition:opacity .3s ease; }
#about .bento-item:hover .bento-cta,
#about .bento-item.persistent .bento-cta{ opacity:1; }
/* =========================================================
#services "四大核心" — de-purple → cyan/teal, black bg,
glass cards consistent with #about.
========================================================= */
#services{ background:transparent; }
#services .eyebrow{
font-family:'Inter','Noto Sans TC',sans-serif;
color:#9CA3AF; font-weight:300; letter-spacing:.34em;
}
#services .section-title{
font-family:'Inter','Noto Sans TC',sans-serif;
font-weight:300; letter-spacing:-.03em;
}
#services .gradient-text,
#services .rova-wordmark{
background:linear-gradient(120deg,#9fe9f2,#38bdf8,#5eead4);
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent; filter:none;
}
#services .section-sub{ color:#9aa3b8; font-weight:300; }
#services .service-card{
border:1px solid rgba(120,205,230,.22); border-radius:18px;
background:
radial-gradient(130% 90% at 0% 0%, rgba(45,212,216,.10), transparent 52%),
linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.008));
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
#services .service-card:hover{
transform:translateY(-6px);
border-color:rgba(120,205,230,.40);
box-shadow:0 24px 60px -28px rgba(0,0,0,.8), 0 0 26px -8px rgba(45,212,216,.30);
}
#services .service-icon{
background:linear-gradient(150deg, rgba(45,212,216,.22), rgba(255,255,255,.05));
border:.8px solid rgba(130,205,225,.45);
color:#bfe9f0;
box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 22px -4px rgba(60,170,205,.4);
}
#services .service-icon svg{ filter:drop-shadow(0 0 6px rgba(90,190,225,.6)); }
#services .service-card:hover .service-icon{ transform:rotate(-3deg) scale(1.06); }
#services .service-card h3{
font-family:'Inter','Noto Sans TC',sans-serif; font-weight:500; letter-spacing:-.01em; color:#fff;
}
#services .service-card p{ color:#9aa3b2; font-weight:300; }
#services .link-arrow{ color:#9fd7e6; }
#services .link-arrow:hover{ color:#d6f0f7; }
/* =========================================================
#journey — horizontal roadmap timeline, reveals left→right.
========================================================= */
#journey{ background:transparent; }
/* Roadmap card — bordered container with the heading inside (reference look) */
.roadmap-card{
max-width:1140px; margin:0 auto;
padding:30px 38px 40px; border-radius:20px;
border:1px solid rgba(255,255,255,.10);
background:
radial-gradient(120% 100% at 0% 0%, rgba(45,212,216,.05), transparent 55%),
linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.008));
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
box-shadow:0 36px 80px -46px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
.roadmap-card-head{ margin-bottom:30px; }
.rc-eyebrow{
display:inline-block; font-family:'Inter','Noto Sans TC',sans-serif;
font-size:12px; letter-spacing:.3em; color:#7fb8c8; font-weight:300;
text-transform:uppercase; margin-bottom:10px;
}
.roadmap-card-title{
font-family:'Inter','Noto Sans TC',sans-serif; font-weight:600;
font-size:clamp(22px,3vw,30px); letter-spacing:-.02em; color:#fff; margin:0 0 6px;
}
.roadmap-card-sub{
font-family:'Inter','Noto Sans TC',sans-serif; font-weight:300; font-size:14px;
color:#9aa3b8; margin:0;
}
.roadmap{ position:relative; margin:0; }
.roadmap-line{
position:absolute; top:14px; left:2%; right:2%; height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.16) 10%, rgba(255,255,255,.16) 90%, transparent);
transform:scaleX(0); transform-origin:left; transition:transform 1.1s cubic-bezier(.16,1,.3,1);
}
/* draw the line in once the card scrolls into view */
#journey.scroll-reveal.in .roadmap-line{ transform:scaleX(1); }
.roadmap-track{ display:flex; gap:10px; }
.rm-node{ flex:1; position:relative; text-align:center; padding-top:42px; }
.rm-dot{
position:absolute; top:7px; left:50%; transform:translateX(-50%);
width:15px; height:15px; border-radius:50%;
background:#d4e9f0; display:flex; align-items:center; justify-content:center;
box-shadow:0 0 0 4px rgba(255,255,255,.05), 0 0 12px rgba(120,205,235,.45);
}
.rm-dot::after{ content:""; width:5px; height:5px; border-radius:50%; background:#0a0d12; }
.rm-badge{
display:inline-block; font-family:'Inter','Noto Sans TC',sans-serif;
font-size:11px; letter-spacing:.12em; padding:3px 11px; border-radius:9999px;
border:1px solid rgba(255,255,255,.16); color:#d7dce3; background:rgba(255,255,255,.06);
margin-bottom:10px;
}
.rm-node h4{
font-family:'Inter','Noto Sans TC',sans-serif; font-weight:500; font-size:15px;
color:#f1f3f6; margin:0 0 6px; letter-spacing:-.01em;
}
.rm-node p{
font-family:'Inter','Noto Sans TC',sans-serif; font-weight:300; font-size:12.5px;
color:#9aa3b2; line-height:1.6; margin:0 auto; max-width:200px;
}
/* left → right staggered reveal */
#journey .rm-node.scroll-reveal{
opacity:0; transform:translateY(18px);
transition:opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1);
transition-delay:calc(var(--i, 0) * .13s);
}
#journey .rm-node.scroll-reveal.in{ opacity:1; transform:translateY(0); }
@media(max-width:760px){
.roadmap-line{ left:18px; right:auto; top:0; bottom:0; width:1px; height:auto; transform:scaleY(0); transform-origin:top; }
#journey.scroll-reveal.in .roadmap-line{ transform:scaleY(1); }
.roadmap-track{ flex-direction:column; gap:26px; }
.rm-node{ text-align:left; padding-top:0; padding-left:46px; }
.rm-dot{ left:18px; top:4px; transform:translateX(-50%); }
.rm-node p{ margin:0; max-width:none; }
}
/* =========================================================
#team 核心成員 — de-purple/gold → cyan/teal, black bg.
========================================================= */
#team{ background:transparent; }
#team .eyebrow{ font-family:'Inter','Noto Sans TC',sans-serif; color:#9CA3AF; font-weight:300; letter-spacing:.34em; }
#team .section-title{ font-family:'Inter','Noto Sans TC',sans-serif; font-weight:300; letter-spacing:-.03em; }
#team .gradient-text,
#team .rova-wordmark{
background:linear-gradient(120deg,#9fe9f2,#38bdf8,#5eead4);
-webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:none;
}
#team .section-sub{ color:#9aa3b8; font-weight:300; }
#team .team-card{
border:1px solid rgba(120,205,230,.20); border-radius:20px;
background:
radial-gradient(120% 90% at 0% 0%, rgba(45,212,216,.08), transparent 52%),
linear-gradient(rgba(255,255,255,.025), rgba(255,255,255,.006));
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
#team .team-card.featured{
background:
radial-gradient(80% 130% at 0% 0%, rgba(45,212,216,.10), transparent 52%),
linear-gradient(135deg, rgba(45,212,216,.05), rgba(10,12,16,1));
border-color:rgba(120,205,230,.30);
}
#team .team-card:hover{
border-color:rgba(120,205,230,.42);
box-shadow:0 24px 60px -30px rgba(0,0,0,.8), 0 0 26px -10px rgba(45,212,216,.30);
}
/* letter-initial avatars → cyan (photo avatars keep the image) */
#team .team-avatar{
color:#bfe9f0;
background:
radial-gradient(circle at 30% 30%, rgba(45,212,216,.18), transparent 55%),
linear-gradient(140deg, rgba(45,212,216,.12), rgba(18,38,46,.35));
border:1px solid rgba(120,205,230,.4);
box-shadow:inset 0 0 18px rgba(40,90,110,.35), 0 0 20px -6px rgba(45,212,216,.30);
text-shadow:0 0 16px rgba(60,170,205,.5);
}
#team .team-avatar::before, #team .team-avatar::after{ display:none; }
#team .team-avatar-photo{
background:#0a0a0a; border:2px solid rgba(120,205,230,.45);
box-shadow:0 0 20px -6px rgba(45,212,216,.35);
}
#team .team-tag{ color:#9fd7e6; background:rgba(45,212,216,.08); }
#team .team-card h3{ font-family:'Inter','Noto Sans TC',sans-serif; font-weight:600; color:#fff; }
#team .team-card h3 .role{ color:#8b94a2; }
#team .team-quote{ color:#a7d8e4; border-left:2px solid rgba(120,205,230,.5); }
#team .team-meta li b{ color:#eef2f6; }
/* =========================================================
Team testimonial carousel (built from .team-grid by JS).
========================================================= */
.tc{ max-width:1080px; margin:0 auto; }
.tc-stage{ display:flex; align-items:center; position:relative; min-height:440px; }
.tc-fade{ animation:tcFade .45s ease; }
@keyframes tcFade{ from{opacity:0} to{opacity:1} }
.tc-photo{
width:clamp(280px,38vw,450px); aspect-ratio:1; flex-shrink:0;
border-radius:26px; overflow:hidden; background:#0a0a0a;
border:1px solid rgba(120,205,230,.25);
}
.tc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.tc-photo-initial{
display:flex; align-items:center; justify-content:center;
background:radial-gradient(circle at 34% 28%, rgba(45,212,216,.22), transparent 60%), linear-gradient(140deg,#0c1519,#0a0d12);
}
.tc-photo-initial span{ font-family:'Orbitron',sans-serif; font-size:clamp(80px,14vw,150px); font-weight:900; color:#bfe9f0; text-shadow:0 0 32px rgba(60,170,205,.55); }
.tc-card{
flex:1; margin-left:-84px; z-index:2; max-width:600px;
background:linear-gradient(180deg, rgba(22,24,28,.97), rgba(12,14,18,.97));
border:1px solid rgba(255,255,255,.08); border-radius:26px;
padding:34px 38px; box-shadow:0 40px 90px -42px rgba(0,0,0,.9);
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.tc-tag{
display:inline-block; font-family:'Inter','Noto Sans TC',sans-serif;
font-size:11px; letter-spacing:.16em; color:#9fd7e6;
background:rgba(45,212,216,.08); border:1px solid rgba(120,205,230,.3);
padding:4px 12px; border-radius:9999px; margin-bottom:14px;
}
.tc-name{ font-family:'Inter','Noto Sans TC',sans-serif; font-weight:600; font-size:26px; color:#fff; margin:0; letter-spacing:-.01em; }
.tc-name .tc-en{ font-size:14px; color:#8b94a2; font-weight:300; margin-left:8px; letter-spacing:.02em; }
.tc-quote{ font-family:'Inter','Noto Sans TC',sans-serif; font-size:17px; color:#cfd6df; margin:14px 0 18px; line-height:1.55; }
.tc-meta{ list-style:none; display:grid; gap:9px; margin:0; padding:0; }
.tc-meta li{ display:flex; gap:14px; font-size:13.5px; line-height:1.5; }
.tc-meta li span{ color:#7f8896; min-width:48px; flex-shrink:0; }
.tc-meta li b{ color:#dfe4ea; font-weight:400; }
.tc-nav{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:36px; }
.tc-arrow{
width:46px; height:46px; border-radius:50%;
background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
color:#cfd6df; font-size:20px; line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center; transition:all .2s ease;
}
.tc-arrow:hover{ background:rgba(45,212,216,.12); border-color:rgba(120,205,230,.5); color:#fff; }
.tc-dots{ display:flex; gap:8px; }
.tc-dot{ width:9px; height:9px; border-radius:50%; border:none; padding:0; cursor:pointer; background:rgba(255,255,255,.25); transition:all .2s ease; }
.tc-dot.active{ background:#5ec8d6; transform:scale(1.25); }
@media(max-width:860px){
.tc-stage{ flex-direction:column; min-height:0; }
.tc-photo{ width:min(82vw,400px); }
.tc-card{ margin-left:0; margin-top:-52px; width:90%; max-width:none; }
}
/* =========================================================
Standalone subpages (member.html / exchange.html)
All scoped under .subpage so the homepage is untouched.
========================================================= */
.primary-nav a.active{ color:#fff; }
.primary-nav a.active::after{ transform:scaleX(1); }
.subpage-main{ padding-top:64px; } /* clear the fixed header */
.subpage-hero{ padding-top:96px; padding-bottom:40px; position:relative; }
.subpage-hero::after{
content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
background:radial-gradient(60% 70% at 50% 0%, rgba(106,42,110,.18), transparent 70%);
}
.subpage-hero .section-title{ font-size:clamp(34px,5vw,56px); }
/* member.html hero title — blue-green gradient (matches meteors / homepage) */
.hero-title-bluegreen{
font-family:'Noto Sans TC',sans-serif; font-weight:800; letter-spacing:.02em;
background:linear-gradient(120deg,#9fe9f2,#38bdf8,#5eead4);
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 24px rgba(56,189,248,.25));
}
.eyebrow-teal{ color:#5eead4; }
/* member.html hero — same treatment as homepage #about heading
(thin white title + cyan accent word, gray eyebrow, muted subtitle) */
.member-page .subpage-hero .eyebrow{
font-family:'Noto Sans TC',sans-serif;
color:#9CA3AF; font-weight:300; letter-spacing:.34em;
}
.member-page .subpage-hero .section-title{
font-family:'Noto Sans TC',sans-serif;
font-weight:300; letter-spacing:-.03em; line-height:1.12;
color:#fff; -webkit-text-fill-color:#fff; background:none; filter:none;
}
.member-page .member-hl,
.member-page .subpage-hero .rova-wordmark{
background:linear-gradient(120deg,#9fe9f2,#38bdf8,#cfeff6);
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent; filter:none;
}
.member-page .subpage-hero .section-sub{ color:#9aa3b8; font-weight:300; }
/* tighten the gap between hero text and the member images */
.member-page .subpage-hero{ padding-bottom:8px; }
.member-page .subpage-hero + .section{ padding-top:24px; }
/* ---- bento cards (replicated from #about, scoped to subpages) ---- */
.subpage .bento-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
max-width:1080px; margin:0 auto;
}
@media(max-width:840px){ .subpage .bento-grid{ grid-template-columns:1fr; } }
.subpage .bento-item{
position:relative; display:flex; flex-direction:column;
min-height:180px; padding:22px; border-radius:16px; overflow:hidden;
border:1px solid rgba(120,205,230,.22);
background:
radial-gradient(130% 90% at 0% 0%, rgba(45,212,216,.10), transparent 52%),
linear-gradient(rgba(255,255,255,.03), rgba(255,255,255,.008));
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.subpage .bento-item:hover,
.subpage .bento-item.persistent{
transform:translateY(-3px);
border-color:rgba(120,205,230,.30);
box-shadow:0 18px 50px -30px rgba(0,0,0,.8), 0 0 24px -10px rgba(45,212,216,.28);
}
.subpage .bento-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.subpage .bento-icon{
width:36px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
background:rgba(255,255,255,.08); border:.8px solid rgba(255,255,255,.10);
}
.subpage .bento-icon svg{ width:18px; height:18px; }
.subpage .bento-icon.i-cyan{ color:#5ec8d6; }
.subpage .bento-icon.i-sky{ color:#56b6f0; }
.subpage .bento-icon.i-teal{ color:#5eead4; }
.subpage .bento-status{
font-size:11px; letter-spacing:.04em; padding:3px 9px; border-radius:8px;
background:rgba(255,255,255,.07); color:#aeb6c2;
}
.subpage .bento-title{
font-family:'Noto Sans TC',sans-serif; font-weight:600; font-size:17px;
color:#f1f3f6; margin:0 0 7px;
}
.subpage .bento-desc{
font-family:'Noto Sans TC',sans-serif; font-weight:300; font-size:13.5px;
line-height:1.65; color:#9aa3b2; margin:0;
}
.subpage .bento-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:16px; }
.subpage .bento-tags{ display:flex; gap:6px; flex-wrap:wrap; }
.subpage .bento-tags span{
font-size:11px; color:#8b94a2; padding:3px 8px; border-radius:7px;
background:rgba(255,255,255,.06); transition:background .2s ease;
}
.subpage .bento-item:hover .bento-tags span{ background:rgba(255,255,255,.10); }
/* ---- membership tiers (member.html) ---- */
.tier-grid{
display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
max-width:1000px; margin:0 auto; align-items:stretch;
}
@media(max-width:840px){ .tier-grid{ grid-template-columns:1fr; } }
.tier-card{
position:relative; display:flex; flex-direction:column;
padding:30px 26px; border-radius:18px;
border:1px solid var(--line-2); background:rgba(255,255,255,.025);
-webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.tier-card:hover{ transform:translateY(-4px); border-color:rgba(255,255,255,.22); }
.tier-featured{
border-color:rgba(106,42,110,.55);
background:linear-gradient(180deg, rgba(106,42,110,.14), rgba(255,255,255,.02));
box-shadow:0 24px 70px -34px rgba(106,42,110,.7);
}
.tier-badge{
position:absolute; top:-12px; left:50%; transform:translateX(-50%);
font-size:11px; letter-spacing:.06em; padding:5px 14px; border-radius:999px;
background:var(--grad); color:#fff; white-space:nowrap;
}
.tier-name{ font-size:17px; font-weight:600; color:#fff; margin:0 0 10px; }
.tier-price{ font-size:34px; font-weight:800; color:#fff; margin:0 0 20px; font-family:'Orbitron','Noto Sans TC',sans-serif; }
.tier-price span{ font-size:14px; font-weight:400; color:var(--text-3); margin-left:6px; }
.tier-list{ display:flex; flex-direction:column; gap:11px; margin:0 0 26px; }
.tier-list li{ position:relative; padding-left:24px; font-size:14px; color:var(--text-2); line-height:1.5; }
.tier-list li::before{
content:"✓"; position:absolute; left:0; top:0; color:var(--gold-2); font-weight:700;
}
.tier-card .btn{ margin-top:auto; }
/* ---- step list (exchange.html) ---- */
.step-list{ max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.step-card{
display:flex; gap:22px; align-items:flex-start;
padding:24px 26px; border-radius:16px;
border:1px solid var(--line); background:rgba(255,255,255,.022);
-webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
transition:transform .3s ease, border-color .3s ease;
}
.step-card:hover{ transform:translateX(4px); border-color:rgba(120,205,230,.3); }
.step-num{
font-family:'Orbitron','Noto Sans TC',sans-serif; font-weight:800; font-size:26px;
line-height:1; color:transparent; background:var(--grad); -webkit-background-clip:text; background-clip:text;
min-width:48px;
}
.step-body{ flex:1; }
.step-title{ font-size:18px; font-weight:600; color:#fff; margin:0 0 8px; }
.step-desc{ font-size:14px; color:var(--text-2); line-height:1.7; margin:0 0 12px; }
/* ---- FAQ (exchange.html) ---- */
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item{
border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.022);
padding:4px 20px; transition:border-color .3s ease;
}
.faq-item[open]{ border-color:rgba(120,205,230,.3); }
.faq-item summary{
list-style:none; cursor:pointer; padding:16px 0; font-size:15px; font-weight:600; color:#fff;
display:flex; align-items:center; justify-content:space-between;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"+"; color:var(--gold-2); font-size:20px; transition:transform .3s ease; }
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item p{ margin:0 0 16px; font-size:14px; color:var(--text-2); line-height:1.7; }
/* ---- CTA band (both subpages) ---- */
.cta-band{
max-width:900px; margin:0 auto; text-align:center;
padding:56px 32px; border-radius:24px;
border:1px solid rgba(106,42,110,.4);
background:
radial-gradient(80% 120% at 50% 0%, rgba(106,42,110,.20), transparent 70%),
rgba(255,255,255,.02);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.cta-band .join-cta{ margin:0 auto; }
.subpage .site-footer{ margin-top:40px; }
/* ---- member intro figures (member.html) — side by side ---- */
.member-figures{
max-width:960px; margin:0 auto;
display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;
}
@media(max-width:760px){ .member-figures{ grid-template-columns:1fr; } }
.member-figure{ margin:0; }
.member-figure img{
width:100%; height:auto; display:block; border-radius:18px;
border:1px solid var(--line-2);
box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
}
/* ---- Meteor shower background for subpages (CSS-only, Aceternity-style) ---- */
.meteor-bg{
position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
background:#000;
}
.meteor{
position:absolute;
width:2px; height:2px; border-radius:9999px;
color:var(--meteor-color, #5eead4);
background:currentColor; box-shadow:0 0 6px 1px currentColor;
animation:meteorFall linear infinite;
opacity:0;
}
.meteor::before{
content:""; position:absolute; top:50%; transform:translateY(-50%);
width:90px; height:1px;
background:linear-gradient(90deg, currentColor, transparent);
}
@keyframes meteorFall{
0% { transform:rotate(215deg) translateX(0); opacity:0; }
10% { opacity:1; }
85% { opacity:1; }
100% { transform:rotate(215deg) translateX(-820px); opacity:0; }
}
@media(prefers-reduced-motion:reduce){ .meteor{ animation:none; opacity:0; } }
/* =========================================================
Primary nav — animated navbar (vanilla port of framer-motion
navbar): sliding underline + hover pill + "關於" dropdown.
========================================================= */
.primary-nav{ position:relative; display:flex; align-items:center; gap:6px; margin-left:auto; }
/* kill the old per-link underline */
.primary-nav a::after{ display:none !important; }
.primary-nav .nav-item{ position:relative; }
.primary-nav .nav-item > a,
.primary-nav .nav-link{
display:inline-flex; align-items:center; gap:6px;
font-size:14px; color:var(--text-2); line-height:1;
padding:9px 16px; border-radius:8px;
transition:background .25s ease, color .25s ease;
}
.primary-nav .nav-item > a:hover,
.primary-nav .nav-link:hover,
.primary-nav .nav-link.active{ background:rgba(255,255,255,.08); color:#fff; }
.primary-nav .caret{ font-size:10px; opacity:.7; transition:transform .25s ease; }
.primary-nav .nav-item.has-dropdown:hover .caret{ transform:rotate(180deg); }
/* sliding underline (positioned by nav.js) */
.primary-nav .nav-underline{
position:absolute; bottom:-6px; left:0; width:0; height:2px;
background:#fff; border-radius:2px; opacity:0; pointer-events:none;
transition:left .3s var(--ease), width .3s var(--ease), opacity .2s ease;
}
/* dropdown panel */
.primary-nav .nav-dropdown{
position:absolute; left:0; top:100%; min-width:170px;
display:flex; flex-direction:column; gap:2px; padding:7px;
background:rgba(10,10,12,.97); border:1px solid var(--line-2); border-radius:12px;
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
opacity:0; transform:translateY(8px); pointer-events:none;
transition:opacity .2s ease, transform .2s ease; z-index:90;
}
.primary-nav .nav-item.has-dropdown:hover .nav-dropdown{
opacity:1; transform:translateY(0); pointer-events:auto;
}
.primary-nav .nav-dropdown a{
padding:10px 14px; border-radius:8px; font-size:13.5px; color:var(--text-2); white-space:nowrap;
transition:background .2s ease, color .2s ease;
}
.primary-nav .nav-dropdown a:hover{ background:rgba(255,255,255,.08); color:#fff; }
/* mobile (≤1024px): collapse into a hamburger panel — tap ☰ to open/close.
These rules sit after the unconditional `.primary-nav{display:flex}` above,
so they win and properly hide the desktop nav on phones. */
@media(max-width:1024px){
.nav-container{ flex-wrap:wrap; }
.primary-nav,.nav-actions{ display:none; } /* hidden until ☰ opened */
.nav-toggle{ display:flex; margin-left:auto; }
.site-header.nav-open{ background:rgba(3,3,3,.97); }
/* open: primary nav + actions stack as full-width rows below the bar */
.site-header.nav-open .primary-nav{
display:flex; flex-direction:column; align-items:stretch;
order:3; width:100%; gap:4px; margin:16px 0 0;
}
.site-header.nav-open .nav-actions{
display:flex; order:4; width:100%; gap:12px; margin:14px 0 6px;
}
.site-header.nav-open .nav-actions .btn,
.site-header.nav-open .nav-actions .join-cta{ flex:1 1 0; justify-content:center; }
/* dropdown (團隊/服務) shows inline inside the open menu */
.primary-nav .nav-underline{ display:none; }
.primary-nav .nav-dropdown{
position:static; opacity:1; transform:none; pointer-events:auto;
background:transparent; border:none; box-shadow:none;
-webkit-backdrop-filter:none; backdrop-filter:none;
padding:2px 0 2px 16px; margin-top:2px;
}
.primary-nav .nav-item.has-dropdown .caret{ display:none; }
.primary-nav .nav-item > a,
.primary-nav .nav-link{ padding:12px 14px; font-size:15px; }
/* ☰ → ✕ when open */
.site-header.nav-open .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
.site-header.nav-open .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}
/* =========================================================
Section heading accents → white→gold (matches intro's
white ROVA + gold light line). Replaces the cyan gradient.
Placed last so it overrides the per-section cyan rules.
========================================================= */
#about .rova-wordmark,
#stats .gradient-text, #stats .rova-wordmark,
#services .gradient-text, #services .rova-wordmark,
#team .gradient-text, #team .rova-wordmark,
.subpage .gradient-text,
.member-page .member-hl,
.member-page .subpage-hero .rova-wordmark,
.hero-subtitle .rova-inline,
.hero-desc .rova-inline{
background:linear-gradient(120deg,#ffffff 0%,#ecdcae 55%,#bd9530 100%);
-webkit-background-clip:text; background-clip:text;
color:transparent; -webkit-text-fill-color:transparent;
filter:drop-shadow(0 0 12px rgba(189,149,48,.16));
}