/* FlyTo Web 基礎樣式（全站共用，由 _Layout.cshtml 引入）
===========================================================
設計變數：所有顏色 / 陰影 / 邊框抽成 CSS variables，方便 dark mode 切換。
依 prefers-color-scheme 自動套用對應主題；要強制單一模式可加
data-theme="light" / data-theme="dark" 在 。
*/
:root {
color-scheme: light dark;
/* Header 高度（用於 body padding-top 與 anchor scroll-margin） */
--header-height: 68px;
/* ===== Light tokens（預設） ===== */
--c-bg: #f8fafc;
--c-surface: #ffffff;
--c-surface-2: #f1f5f9; /* 次要面（stat、表單區塊背景） */
--c-surface-3: #e2e8f0; /* 三級面（mockup chrome） */
--c-border: #e2e8f0;
--c-border-strong: #cbd5e1;
--c-text: #1f2937;
--c-text-strong: #0f172a;
--c-text-muted: #64748b;
--c-text-subtle: #94a3b8;
--c-primary: #2563eb;
--c-primary-hover: #1d4ed8;
--c-primary-soft: #eff6ff; /* 主色 hover/focus 背景 */
--c-primary-on: #ffffff; /* 主色按鈕上的文字色 */
--c-second: #0c6048;
--c-second-hover: #107357;
--c-second-soft: #eff6ff; /* 次色 hover/focus 背景 */
--c-second-on: #ffffff; /* 次色按鈕上的文字色 */
--c-success: #047857;
--c-success-bg: #ecfdf5;
--c-success-border: #a7f3d0;
--c-error: #b91c1c;
--c-error-bg: #fef2f2;
--c-error-border: #fecaca;
--c-danger: #dc2626;
--c-danger-hover: #b91c1c;
--c-badge-pro-bg: #fef3c7;
--c-badge-pro-text: #b45309;
--c-badge-free-bg: #e2e8f0;
--c-badge-free-text: #475569;
--c-header-bg: rgba(255, 255, 255, 0.85);
--c-header-border: #e2e8f0;
--c-footer-bg: #0f172a; /* footer 永遠深色，不隨 dark mode 變 */
--c-footer-text: #94a3b8;
--c-footer-text-strong: #f8fafc;
--c-footer-text-subtle: #64748b;
--c-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
--c-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.06);
--c-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
--c-shadow-primary: 0 4px 10px rgba(37, 99, 235, 0.18);
--c-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.18);
--c-trans-box-1: #ddd;
--c-trans-box-2: #fff;
}
/* ===== Dark tokens（共用一組變數；兩條規則分別觸發）=====
1. 系統為 dark + 使用者沒明確選 light → 走 prefers-color-scheme 規則
2. 使用者明確選 dark → 走 [data-theme="dark"] 規則 */
:root[data-theme="dark"] {
--c-bg: #0b1220;
--c-surface: #131c2e;
--c-surface-2: #1c2740;
--c-surface-3: #243150;
--c-border: #2a3656;
--c-border-strong: #3a4970;
--c-text: #e2e8f0;
--c-text-strong: #f8fafc;
--c-text-muted: #94a3b8;
--c-text-subtle: #64748b;
--c-primary: #3b82f6;
--c-primary-hover: #60a5fa;
--c-primary-soft: rgba(59, 130, 246, 0.14);
--c-primary-on: #ffffff;
--c-success: #34d399;
--c-success-bg: rgba(52, 211, 153, 0.14);
--c-success-border: rgba(52, 211, 153, 0.32);
--c-error: #f87171;
--c-error-bg: rgba(248, 113, 113, 0.14);
--c-error-border: rgba(248, 113, 113, 0.32);
--c-danger: #ef4444;
--c-danger-hover: #f87171;
--c-badge-pro-bg: rgba(180, 83, 9, 0.22);
--c-badge-pro-text: #fbbf24;
--c-badge-free-bg: rgba(148, 163, 184, 0.18);
--c-badge-free-text: #cbd5e1;
--c-header-bg: rgba(19, 28, 46, 0.85);
--c-header-border: #2a3656;
--c-footer-bg: #060b16;
--c-footer-text: #94a3b8;
--c-footer-text-strong: #f8fafc;
--c-footer-text-subtle: #64748b;
--c-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--c-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
--c-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
--c-shadow-primary: 0 4px 10px rgba(59, 130, 246, 0.4);
--c-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.32);
--c-trans-box-1: #000;
--c-trans-box-2: #222;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) {
--c-bg: #0b1220;
--c-surface: #131c2e;
--c-surface-2: #1c2740;
--c-surface-3: #243150;
--c-border: #2a3656;
--c-border-strong: #3a4970;
--c-text: #e2e8f0;
--c-text-strong: #f8fafc;
--c-text-muted: #94a3b8;
--c-text-subtle: #64748b;
--c-primary: #3b82f6;
--c-primary-hover: #60a5fa;
--c-primary-soft: rgba(59, 130, 246, 0.14);
--c-primary-on: #ffffff;
--c-success: #34d399;
--c-success-bg: rgba(52, 211, 153, 0.14);
--c-success-border: rgba(52, 211, 153, 0.32);
--c-error: #f87171;
--c-error-bg: rgba(248, 113, 113, 0.14);
--c-error-border: rgba(248, 113, 113, 0.32);
--c-danger: #ef4444;
--c-danger-hover: #f87171;
--c-badge-pro-bg: rgba(180, 83, 9, 0.22);
--c-badge-pro-text: #fbbf24;
--c-badge-free-bg: rgba(148, 163, 184, 0.18);
--c-badge-free-text: #cbd5e1;
--c-header-bg: rgba(19, 28, 46, 0.85);
--c-header-border: #2a3656;
--c-footer-bg: #060b16;
--c-footer-text: #94a3b8;
--c-footer-text-strong: #f8fafc;
--c-footer-text-subtle: #64748b;
--c-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
--c-shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
--c-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
--c-shadow-primary: 0 4px 10px rgba(59, 130, 246, 0.4);
--c-focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.32);
--c-trans-box-1: #000;
--c-trans-box-2: #222;
}
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", sans-serif;
margin: 0;
color: var(--c-text);
background: var(--c-bg);
display: flex;
flex-direction: column;
min-height: 100vh;
/* Header 改為 fixed 永遠置頂，需補上對應 padding 讓內容不被遮 */
padding-top: var(--header-height, 68px);
}
/* ===== 結構 ===== */
[x-cloak] { display: none !important; }
/* fixed header 會遮住錨點目標，常見的 anchor target 跳轉時往下推一個 header 高 */
section[id],
article[id],
h1[id], h2[id], h3[id], h4[id] {
scroll-margin-top: calc(var(--header-height) + 12px);
}
/* ===== Header（白底 / 深色 surface） ===== */
.site-header {
background: var(--c-header-bg);
border-bottom: 1px solid var(--c-header-border);
/* 永遠置頂；脫離流程，body 已補 padding-top: var(--header-height) */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
backdrop-filter: saturate(180%) blur(8px);
}
.site-header-inner {
max-width: 1200px;
margin: 0 auto;
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.site-brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--c-text-strong);
}
.site-brand-logo {
width: 36px;
height: 36px;
border-radius: 10px;
object-fit: cover;
display: inline-block;
box-shadow: var(--c-shadow-primary);
}
.site-brand-text {
font-size: 20px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--c-text-strong);
}
.site-nav {
display: flex;
align-items: center;
gap: 12px;
}
/* header 文字連結（訂閱方案 / 支援 / 登入），與 user avatar 並排 */
.site-nav-link {
color: var(--c-text);
text-decoration: none;
font-size: 14px;
font-weight: 500;
padding: 6px 4px;
transition: color 120ms ease;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
.site-nav-link:hover {
color: var(--c-primary);
}
/* 支援下拉選單（仿 user menu，但獨立命名） */
.site-support { position: relative; }
.site-support-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
}
.site-support-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 180px;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 10px;
box-shadow: var(--c-shadow-md);
padding: 6px;
z-index: 50;
}
.site-support-menu-item {
display: block;
padding: 8px 12px;
color: var(--c-text);
text-decoration: none;
border-radius: 6px;
font-size: 14px;
transition: background-color 120ms ease;
}
.site-support-menu-item:hover {
background: var(--c-surface-2);
color: var(--c-text-strong);
}
/* 支援頁卡片是 ，去掉預設文字裝飾、繼承字色 */
.support-card,
.support-quicklink {
text-decoration: none;
color: inherit;
}
/* 登入態：avatar 圓圈 + 下拉選單 */
.site-user { position: relative; }
.site-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
padding: 0;
background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
color: #fff;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 600;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.site-avatar:hover {
transform: scale(1.05);
box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
}
.site-avatar-letter { font-size: 15px; line-height: 1; }
.site-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: block;
}
.site-user-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 240px;
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 12px;
box-shadow: var(--c-shadow-lg);
padding: 6px;
z-index: 60;
}
.site-user-menu-head {
padding: 10px 12px 12px;
border-bottom: 1px solid var(--c-surface-2);
margin-bottom: 6px;
}
/* 桌面版:外層的 .site-user-head 不顯示(menu-head 用的是 menu 內那份);
手機版會在 @media (max-width: 800px) 區塊強制顯示 */
.site-user-head { display: none; }
.site-user-menu-label {
font-size: 11px;
color: var(--c-text-subtle);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.site-user-menu-email {
font-size: 13px;
color: var(--c-text-strong);
margin-top: 2px;
word-break: break-all;
}
.site-user-menu-item {
display: block;
padding: 8px 12px;
color: var(--c-text);
text-decoration: none;
font-size: 14px;
border-radius: 8px;
background: none;
border: none;
width: 100%;
text-align: left;
cursor: pointer;
font-family: inherit;
}
.site-user-menu-item:hover { background: var(--c-surface-2); }
.site-user-menu-item-danger { color: var(--c-danger); }
.site-user-menu-item-danger:hover { background: var(--c-error-bg); }
.site-user-menu-sep {
height: 1px;
background: var(--c-surface-2);
margin: 4px 8px;
}
.site-user-menu-logout { margin: 0; padding: 0; }
/* 透明描邊按鈕（header 用） */
.btn-ghost {
background: transparent;
color: var(--c-text-muted);
border-color: transparent;
}
.btn-ghost:hover {
background: var(--c-surface-2);
color: var(--c-text-strong);
}
main {
max-width: 720px;
width: 100%;
margin: 32px auto;
padding: 0 20px;
flex: 1 0 auto;
}
main:has(> .page-wide) {
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
/* ===== Footer（永遠深色） ===== */
.site-footer {
background: var(--c-footer-bg);
color: var(--c-footer-text);
flex-shrink: 0;
margin-top: 48px;
}
.site-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 20px 24px;
text-align: center;
}
.site-footer-brand {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 12px;
}
.site-footer-brand-text {
font-size: 18px;
font-weight: 700;
color: var(--c-footer-text-strong);
}
.site-footer-tagline {
color: #cbd5e1;
font-size: 14px;
margin: 0 0 8px;
}
.site-footer-copy {
color: var(--c-footer-text-subtle);
font-size: 12px;
margin: 0;
}
.site-footer-links {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
margin-bottom: 6px;
font-size: 13px;
}
.site-footer-links a {
color: var(--c-footer-text);
text-decoration: none;
}
.site-footer-links a:hover {
color: var(--c-footer-text-strong);
text-decoration: underline;
}
.site-footer-sep {
color: var(--c-footer-text-subtle);
}
/* 垂直 + 水平置中容器（用於登入頁等簡單表單頁） */
.page-center {
display: flex;
align-items: center;
justify-content: center;
min-height: 100%;
flex: 1 0 auto;
}
main:has(> .page-center) {
margin: 0 auto;
padding: 0 20px;
display: flex;
}
/* ===== 卡片 ===== */
.card {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: 12px;
padding: 24px;
box-shadow: var(--c-shadow-sm);
width: 100%;
}
.card-narrow {
max-width: 66.6667%;
margin-left: auto;
margin-right: auto;
}
/* ===== 文字 ===== */
h1 { margin: 0 0 16px; font-size: 24px; color: var(--c-text-strong); }
h2 { margin: 24px 0 8px; font-size: 18px; color: var(--c-text-strong); }
.muted { color: var(--c-text-muted); font-size: 13px; }
/* ===== 按鈕 ===== */
button, .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 16px;
border-radius: 8px;
border: 1px solid var(--c-border-strong);
background: var(--c-surface);
color: var(--c-text);
cursor: pointer;
font-size: 14px;
text-decoration: none;
font-family: inherit;
}
.btn-primary {
background: var(--c-primary);
color: var(--c-primary-on);
border-color: var(--c-primary);
}
.btn-primary:hover:not(:disabled) { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.btn-google {
background: var(--c-surface);
color: var(--c-text);
border: 1px solid var(--c-border-strong);
gap: 8px;
}
.btn-second {
background: var(--c-second);
color: var(--c-second-on);
border-color: var(--c-second);
}
.btn-second:hover:not(:disabled) { background: var(--c-second-hover); border-color: var(--c-second-hover); }
.btn-block { width: 100%; padding: 12px 16px; }
.btn[disabled], button[disabled] { opacity: .5; cursor: not-allowed; }
.btn.btn-small {
padding: 2px 8px;
font-size: 80%;
border-radius: 4px;
}
.nowrap { white-space: nowrap; }
/* ===== 表單控制 ===== */
input[type=email], input[type=text], input[type=number], input[type=password],
input[type=tel], input[type=url], input[type=search], textarea, select {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--c-border-strong);
border-radius: 8px;
font-size: 14px;
background: var(--c-surface);
color: var(--c-text);
font-family: inherit;
}
input:focus, textarea:focus, select:focus {
outline: none;
border-color: var(--c-primary);
box-shadow: var(--c-focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--c-text-subtle); }
label {
display: block;
font-size: 13px;
color: var(--c-text-muted);
margin: 12px 0 4px;
}
/* ===== 輔助元件 ===== */
.divider {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
color: var(--c-text-subtle);
font-size: 13px;
}
.divider::before, .divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--c-border);
}
.alert {
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
}
.alert-error {
background: var(--c-error-bg);
color: var(--c-error);
border: 1px solid var(--c-error-border);
}
.alert-success {
background: var(--c-success-bg);
color: var(--c-success);
border: 1px solid var(--c-success-border);
}
.grid-stat {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
margin-top: 16px;
}
.stat {
background: var(--c-surface-2);
border-radius: 10px;
padding: 14px 16px;
}
.stat-label { font-size: 12px; color: var(--c-text-muted); }
.stat-value {
font-size: 22px;
font-weight: 600;
margin-top: 2px;
color: var(--c-text-strong);
}
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.badge-pro { background: var(--c-badge-pro-bg); color: var(--c-badge-pro-text); }
.badge-free { background: var(--c-badge-free-bg); color: var(--c-badge-free-text); }
/* ===== Header RWD:三橫槓 toggle + 手機版下推 menu ===== */
/* 桌面版預設不顯示 toggle */
.site-mobile-toggle {
display: none;
background: none;
border: none;
color: var(--c-text);
cursor: pointer;
padding: 6px;
border-radius: 6px;
align-items: center;
justify-content: center;
}
.site-mobile-toggle:hover {
background: var(--c-surface-2);
color: var(--c-primary);
}
@media (max-width: 800px) {
.site-header-inner {
padding: 12px 16px;
position: relative;
}
.site-brand-text {
font-size: 18px;
}
/* 顯示三橫槓按鈕 */
.site-mobile-toggle {
display: inline-flex;
}
/* 預設隱藏 nav;有 .is-mobile-open 時才從 header 下方滑出 */
.site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 8px 16px 16px;
background: var(--c-header-bg);
border-bottom: 1px solid var(--c-header-border);
backdrop-filter: saturate(180%) blur(8px);
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition: max-height 200ms ease, opacity 150ms ease, visibility 0s linear 200ms;
}
.site-nav.is-mobile-open {
max-height: calc(100vh - var(--header-height));
overflow-y: auto;
opacity: 1;
visibility: visible;
transition: max-height 200ms ease, opacity 150ms ease, visibility 0s;
}
/* 連結改全寬塊狀,點擊面積大 */
.site-nav-link {
padding: 12px 8px;
font-size: 16px;
border-bottom: 1px solid var(--c-border);
}
/* 子選單在手機版改為自然 in-flow,不再 absolute */
.site-support {
border-bottom: 1px solid var(--c-border);
}
.site-support-toggle {
width: 100%;
justify-content: space-between;
border-bottom: none;
}
.site-support-menu {
position: static;
box-shadow: none;
border: none;
background: var(--c-surface-2);
border-radius: 6px;
padding: 4px;
margin: 0 0 8px;
min-width: 0;
}
.site-support-menu-item {
font-size: 15px;
padding: 10px 12px;
}
/* 使用者區(手機):avatar 與「登入身份 + email」永遠並排同 row(整塊當 toggle);
點擊整塊 → 展開/收起下方選單(個人資料、偏好...) */
.site-user {
position: relative;
margin-top: 8px;
display: grid;
grid-template-columns: 56px 1fr;
column-gap: 12px;
row-gap: 8px;
align-items: center;
background: var(--c-surface-2);
border-radius: 10px;
padding: 10px;
}
.site-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
padding: 0;
background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
justify-content: center;
grid-row: 1;
grid-column: 1;
}
.site-avatar-img,
.site-avatar-letter {
width: 100%;
height: 100%;
}
.site-avatar-letter {
font-size: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* head:手機版永遠顯示在第二欄,並當作整塊的 toggle target;桌面版那邊預設 display: none,這裡覆蓋 */
.site-user-head {
display: block;
grid-row: 1;
grid-column: 2;
cursor: pointer;
padding: 4px 0;
}
.site-user-head .site-user-menu-label {
font-size: 11px;
color: var(--c-text-subtle);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.site-user-head .site-user-menu-email {
font-size: 13px;
color: var(--c-text-strong);
margin-top: 2px;
word-break: break-all;
}
/* menu 內那份 head 是桌面版用,手機版隱藏(避免重複) */
.site-user-menu .site-user-menu-head {
display: none;
}
/* 選單(個人資料 / 偏好...):x-show 控制開合;手機版改為靜態 in-flow,跨兩欄全寬 */
.site-user-menu {
position: static;
grid-row: 2;
grid-column: 1 / -1;
background: transparent;
border: none;
box-shadow: none;
padding: 0;
min-width: 0;
}
.site-user-menu-item {
padding: 12px;
font-size: 15px;
}
/* 手機版分隔線:.site-user 背景已是 surface-2,sep 預設色會融進去看不到 → 改用 border */
.site-user-menu-sep {
background: var(--c-border);
margin: 4px 0;
}
}