/* 全域基本定義 - 提高權重以覆蓋 Tailwind 預設 */
html { scroll-behavior: smooth; }
body header h1 {
font-size: 2.75rem;
line-height: 1.25;
}
body p { line-height: 1.7; }
/* 漸層與背景 */
.gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #311042 100%); }
.btn-gradient { background: linear-gradient(90deg, #34d399 0%, #059669 100%); }
.btn-gradient-gold { background: linear-gradient(90deg, #fbbf24 0%, #d97706 100%); }
/* 卡片與元件 */
.glass-card { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); }
.glass-card:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); transition: all 0.4s ease; }
.price-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
/* LINE 懸浮按鈕 */
.line-float {
position: fixed; bottom: 35px; right: 35px; background-color: #06C755; color: white;
width: 64px; height: 64px; border-radius: 50px; display: flex; align-items: center;
justify-content: center; font-size: 32px; box-shadow: 0 8px 24px rgba(6, 199, 85, 0.3);
z-index: 9999; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.line-float:hover { transform: scale(1.1) translateY(-4px); background-color: #05b34c; box-shadow: 0 12px 28px rgba(6, 199, 85, 0.45); }
.line-text {
position: absolute; right: 76px; background: #1e293b; color: white;
padding: 10px 18px; border-radius: 12px; font-size: 14px; font-weight: 700;
white-space: nowrap; box-shadow: 0 4px 15px rgba(0,0,0,0.15);
pointer-events: none; opacity: 0; transform: translateX(10px); transition: 0.3s ease;
}
.line-float:hover .line-text { opacity: 1; transform: translateX(0); }
/* 步驟裝飾線 (桌機版) */
@media (min-width: 768px) {
.step-line::after {
content: ''; position: absolute; top: 40px; left: 65%; width: 70%;
border-top: 2px dashed #e2e8f0; z-index: 0;
}
}
/* 步驟數字標籤 */
.step-number {
width: 4rem; height: 4rem; background-color: #f5f3ff; border: 1px solid #ddd6fe; color: #4f46e5;
border-radius: 1rem; display: flex; align-items: center; justify-content: center;
margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; font-size: 1.25rem; font-weight: 900;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); position: relative; z-index: 10;
}
@media (min-width: 768px) { .step-number { margin-left: 0; margin-right: 0; } }
.step-number-emerald {
width: 4rem; height: 4rem; background-color: #ecfdf5; border: 1px solid #a7f3d0; color: #059669;
border-radius: 1rem; display: flex; align-items: center; justify-content: center;
margin-left: auto; margin-right: auto; margin-bottom: 1.5rem; font-size: 1.25rem; font-weight: 900;
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); position: relative; z-index: 10;
}
@media (min-width: 768px) { .step-number-emerald { margin-left: 0; margin-right: 0; } }
/* Flash Message 視窗 */
.flash-notice-wrapper { position: fixed; top: 0; left: 0; width: 100%; z-index: 10001; }
.flash-notice-card { margin-left: auto; margin-right: auto; margin-top: 1.5rem; padding-left: 2rem; padding-right: 2rem; padding-top: 1.25rem; padding-bottom: 1.25rem; border-radius: 1rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); display: flex; align-items: center; justify-content: space-between; border-bottom-width: 4px; width: 600px; max-width: 90%; }
.flash-success { background-color: #f0fdf4; border-color: #22c55e; }
.flash-alert { background-color: #fef2f2; border-color: #ef4444; }
.flash-notice-text { font-size: 1.25rem; font-weight: 700; }
.flash-close-btn { color: #cbd5e1; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 1.5rem; font-weight: 900; }
.flash-close-btn:hover { color: #475569; }
/* 定價卡片樣式 */
.pricing-main-card {
background-image: linear-gradient(to bottom, #0f172a, #020617); border-width: 2px; border-color: rgba(16, 185, 129, 0.4);
border-radius: 1.5rem; padding: 1.5rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; text-align: left;
}
@media (min-width: 768px) { .pricing-main-card { padding: 3rem; } }
.pricing-badge {
position: absolute; top: -1rem; left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, #34d399 0%, #059669 100%);
color: #020617; padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 900; text-transform: uppercase; tracking-ratio: 0.05em; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* 策略思考區塊 */
.strategy-box { margin-top: 1rem; margin-bottom: 2rem; padding: 1.5rem; background-color: rgba(238, 242, 255, 0.6); border-left-width: 4px; border-color: #6366f1; border-radius: 0 1rem 1rem 0; text-align: left; max-w: 42rem; margin-left: auto; margin-right: auto; }
/* 動畫效果區塊 */
@keyframes fadeInDown {
0% { opacity: 0; transform: translateY(-20px); }
100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-down { animation: fadeInDown 0.5s ease-out; }
@keyframes pulse-gentle {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.03); }
}
.animate-pulse-gentle { animation: pulse-gentle 3s infinite ease-in-out; }
/* ==========================================================================
手機版 RWD 巨大化排版優化 --- 配合特別 init.less 特殊定義 (修正註解錯誤)
========================================================================== */
@media (max-width: 750px) {
/* 透過 body 前綴增加權重，優雅移除所有 !important */
body { font-size: 16px; }
/* LINE 懸浮按鈕巨大化 */
body .line-float {
width: 72px; height: 72px;
bottom: 25px; right: 25px;
font-size: 38px;
}
body .line-text { display: none; }
/* Header 大標與文字手機端優化 */
body header h1 {
font-size: 2.5rem;
letter-spacing: -0.02em;
}
body header p {
font-size: 1.15rem;
padding: 0 0.5rem;
}
/* 按鈕巨大化，滿版 */
body .btn-gradient-gold,
body header .flex-col a,
body .pricing-main-card a {
width: 100%;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
font-size: 1.35rem;
border-radius: 1.25rem;
display: block;
}
/* 說明區塊字體放大 */
body .step-line p,
body .strategy-box p,
body #faq p {
font-size: 1rem;
}
body .strategy-box {
padding: 1.25rem;
border-radius: 1rem;
}
/* 頂部通知彈窗手機版優化 */
body .flash-notice-card {
width: 94%;
max-width: 94%;
margin-top: 1rem;
padding: 1rem;
}
body .flash-notice-text {
font-size: 1.1rem;
}
}