:root {
/* ── 核心色票（Care Cloud SaaS — Teal + Orange）── */
--primary: #0D9488; /* Teal-600：品牌・信任 */
--primary-lt: #CCFBF1; /* Teal-100：淡底 */
--primary-dk: #0F766E; /* Teal-700：hover */
--primary-mid: #2DD4BF; /* Teal-400：強調 */
--secondary: #27AE60; /* 綠：健康・安心 */
--secondary-lt: #E6F9EF;
--accent: #F97316; /* Orange-500：CTA 主色 */
--accent-soft: #FFF7ED; /* Orange-50：淡底 */
--warm: #F97316; /* 暖橘：CTA */
--warm-lt: #FFF7ED;
/* ── 深色調（hero / 強調底） ── */
--deep-1: #042F2E; /* 最深 Teal */
--deep-2: #0F5F57; /* 深 Teal */
--deep-3: #0D9488; /* 中 Teal */
/* ── 中性色 ── */
--bg: #D8E2EC; /* 頁面背景 */
--surface: rgba(255,255,255,0.96);
--card: #FFFFFF;
--ink: #111827; /* 深灰文字 */
--muted: #6B7280; /* 中灰副文 */
--line: rgba(13,148,136,0.12);
--border: #E2E8F0;
/* ── 狀態色 ── */
--success: #10B981;
--warning: #F59E0B;
--error: #EF4444;
/* ── 舊相容別名 ── */
--accent-deep: var(--primary-dk);
--olive: var(--secondary);
/* ── 陰影・圓角 ── */
--shadow-sm: 0 2px 12px rgba(13,148,136,.06);
--shadow: 0 8px 32px rgba(13,148,136,.10);
--shadow-lg: 0 20px 60px rgba(13,148,136,.14);
--radius-xl: 24px;
--radius-lg: 18px;
--radius-md: 12px;
--radius-sm: 8px;
/* ── 標題尺寸統一規範 ── */
--h-hero: clamp(3.6rem, 8vw, 7.2rem); /* 主頁 Hero h1 ×7.2 body */
--h-page: clamp(2.8rem, 5.5vw, 5rem); /* 各頁 Hero h1 ×5.0 body */
--h-section: clamp(2rem, 3.5vw, 3.2rem); /* 區塊 h2 ×3.2 body */
--h-card: clamp(1.05rem, 1.6vw, 1.2rem);/* 卡片 h3 ×1.2 body */
--h-lh: 1.05; /* 大字標題行高 */
--h-tracking: -0.04em; /* 大字更緊實 */
/* ── 半灰半黑色系 ── */
--split-muted: #9CA3AF; /* 灰色（較輕的詞） */
--split-dark: #111827; /* 近黑（強調詞） */
}
/* ════════════════════════════════════════
SPLIT HEADING 半灰半黑標題系統
用法：
前半灰字
後半黑字
════════════════════════════════════════ */
.split-h {
font-weight: 900;
line-height: var(--h-lh);
letter-spacing: var(--h-tracking);
}
.split-h .sh-g {
color: var(--split-muted);
font-weight: 700;
}
.split-h .sh-d {
color: var(--split-dark);
font-weight: 900;
}
/* 深色背景上的版本（hero/dark sections） */
.split-h.on-dark .sh-g { color: rgba(255,255,255,.48); }
.split-h.on-dark .sh-d { color: #ffffff; }
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 26px;
}
body {
margin: 0;
font-family: "Outfit", "Noto Sans TC", system-ui, sans-serif;
font-size: 1rem;
line-height: 1.7;
color: var(--ink);
background: #F8FAFC;
}
/* 段落字色稍淡，與大字標題形成明暗對比 */
p { color: #4B5563; margin: 0 0 1em; }
.notice-page {
background: linear-gradient(180deg, #f4f7fa 0%, #eef3f7 100%);
}
.notice-shell {
width: min(1080px, calc(100% - 32px));
margin: 0 auto;
padding: 32px 0 56px;
}
.notice-header {
margin-bottom: 24px;
padding: 28px;
border: 1px solid rgba(32, 73, 110, 0.12);
border-radius: 12px;
background: #ffffff;
box-shadow: 0 10px 24px rgba(32, 73, 110, 0.06);
}
.notice-kicker,
.notice-header h1,
.notice-lead {
margin: 0;
}
.notice-kicker {
color: #275d84;
font-weight: 800;
}
.notice-header h1 {
margin-top: 10px;
font-size: clamp(2rem, 4vw, 2.8rem);
}
.notice-lead {
margin-top: 14px;
color: var(--muted);
line-height: 1.9;
}
.notice-content {
display: grid;
gap: 14px;
}
.notice-card {
padding: 22px 24px;
border: 1px solid rgba(32, 73, 110, 0.1);
border-radius: 12px;
background: #ffffff;
}
.notice-card h2,
.notice-card p,
.notice-list {
margin: 0;
}
.notice-card h2 {
margin-bottom: 10px;
font-size: 1.16rem;
color: #19324d;
}
.notice-card p,
.notice-list {
color: #4f6476;
line-height: 1.9;
}
.notice-list {
padding-left: 18px;
}
.consent-check-booking,
.consent-check-footer {
margin-top: 4px;
}
.floating-service-qr {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 22;
display: grid;
gap: 12px;
width: 220px;
padding: 18px 16px 16px;
border: none;
border-radius: 20px;
background: linear-gradient(145deg, #0f3460 0%, #0d9488 100%);
box-shadow: 0 8px 32px rgba(13, 148, 136, 0.35), 0 2px 8px rgba(0,0,0,0.25);
outline: 1.5px solid rgba(255,255,255,0.15);
}
.floating-service-qr-close {
position: absolute;
top: 10px;
right: 10px;
width: 28px;
height: 28px;
border: 1.5px solid rgba(255,255,255,0.3);
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
cursor: pointer;
font-size: 1rem;
line-height: 1;
font-weight: 700;
z-index: 1;
display: grid;
place-items: center;
transition: background .15s;
}
.floating-service-qr-close:hover {
background: rgba(255, 255, 255, 0.28);
}
.floating-service-qr.is-hidden {
display: none;
}
.floating-line-wrap {
position: fixed;
right: 20px;
bottom: 228px;
z-index: 21;
display: flex;
align-items: center;
gap: 4px;
}
.floating-line-button {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 8px 12px;
border: 1.5px solid rgba(73, 130, 64, 0.12);
border-radius: 999px;
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 8px 20px rgba(28, 54, 92, 0.15);
text-decoration: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
cursor: pointer;
}
.floating-line-icon {
display: inline-grid;
place-items: center;
min-width: 40px;
height: 40px;
padding: 0 8px;
border-radius: 999px;
background: linear-gradient(180deg, #58cc02, #31b64b);
color: #ffffff;
font-size: 0.82rem;
font-weight: 900;
letter-spacing: 0.04em;
}
.floating-line-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: 50%;
background: rgba(0,0,0,.18);
color: #fff;
font-size: .75rem;
cursor: pointer;
line-height: 1;
flex-shrink: 0;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
/* 擴大可點擊熱區，不影響視覺大小 */
position: relative;
}
.floating-line-close::before {
content: '';
position: absolute;
inset: -8px;
}
.floating-line-close:hover { background: rgba(0,0,0,.35); }
.floating-line-copy {
display: grid;
gap: 2px;
}
.floating-line-copy strong,
.floating-line-copy small {
margin: 0;
}
.floating-line-copy small {
color: var(--muted);
}
.floating-service-qr strong {
color: #ffffff;
font-family: "Noto Sans TC", sans-serif;
font-size: .9rem;
font-weight: 900;
letter-spacing: .04em;
display: flex;
align-items: center;
gap: 6px;
padding-right: 32px;
}
.floating-service-qr strong::before {
content: "📱";
font-size: .85rem;
}
.floating-service-qr-body {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.floating-service-qr-badges {
display: grid;
gap: 12px;
}
.floating-service-qr-badges img {
width: 100%;
max-width: 130px;
display: block;
border-radius: 12px;
}
.floating-service-qr-code {
display: grid;
place-items: center;
padding: 10px;
background: #ffffff;
border-radius: 14px;
box-shadow: 0 2px 12px rgba(0,0,0,0.18);
}
.floating-service-qr-code img {
width: 100%;
display: block;
border-radius: 4px;
}
.floating-service-qr-hint {
color: rgba(255,255,255,0.72);
font-size: .72rem;
text-align: center;
line-height: 1.4;
}
a {
color: inherit;
text-decoration: none;
}
.page-shell {
width: min(1400px, calc(100% - 32px));
margin: 0 auto;
padding: 24px 0 56px;
}
.hero,
.section,
.provider-card,
.side-card,
.booking-card,
.metric-card,
.doc-card,
.map-card,
.filter-card,
.listing-card,
.panel-card {
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.hero {
padding: 24px;
border-radius: 36px;
background:
linear-gradient(135deg, rgba(204,251,241,.85), rgba(240,253,250,.95));
}
.topbar,
.hero-grid,
.search-bar,
.result-layout,
.provider-grid,
.booking-flow,
.dashboard-grid,
.ai-shell,
.docs-grid,
.hero-stats,
.section-heading,
.provider-header,
.nav-links,
.quick-categories,
.filter-pills,
.caregiver-list {
display: grid;
gap: 16px;
}
.topbar {
grid-template-columns: 1fr auto;
align-items: center;
}
.brand {
display: flex;
gap: 14px;
align-items: center;
}
.brand-mark {
display: grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 16px;
background: linear-gradient(135deg, var(--accent), #74d3eb);
color: white;
font-weight: 700;
}
.brand p,
.section-heading h2,
.provider-card h3,
.doc-card h3,
.side-title,
.panel-title,
.hero-copy h1 {
margin: 0;
font-family: "Noto Serif TC", serif;
}
.brand span,
.hero-text,
.provider-card p,
.doc-card p,
.booking-note,
.map-card span,
.review-list blockquote {
color: var(--muted);
}
.nav-links {
grid-auto-flow: column;
align-items: center;
}
.nav-links a {
padding: 10px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.42);
}
.hero-grid {
grid-template-columns: 1.08fr 1.12fr;
margin-top: 36px;
align-items: center;
}
.hero-copy {
padding-right: 10px;
}
.eyebrow {
margin: 0 0 10px;
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--primary);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.78rem;
font-weight: 800;
background: var(--primary-lt);
padding: 4px 12px;
border-radius: 999px;
border: 1px solid rgba(59,130,246,.15);
}
.hero-copy h1 {
font-size: clamp(2.2rem, 4vw, 4.5rem);
line-height: 1.08;
}
.hero-text {
max-width: 56ch;
margin: 20px 0 0;
font-size: 1.06rem;
line-height: 1.7;
}
.hero-actions {
display: flex;
gap: 12px;
margin-top: 28px;
}
.button {
border: 0;
border-radius: 999px;
padding: 14px 22px;
font: inherit;
cursor: pointer;
}
.button-primary {
background: linear-gradient(135deg, var(--primary-mid), var(--primary), var(--primary-dk));
background-size: 200% 100%;
background-position: 0% 50%;
color: white;
box-shadow: 0 6px 20px rgba(13,148,136,.35);
transition: background-position .3s, box-shadow .2s, transform .12s;
}
.button-primary:hover {
background-position: 100% 50%;
box-shadow: 0 10px 28px rgba(13,148,136,.48);
transform: translateY(-1px);
}
.button-secondary {
background: rgba(255, 255, 255, 0.88);
color: var(--ink);
border: 1.5px solid var(--border);
box-shadow: 0 2px 8px rgba(59,130,246,.06);
transition: background .15s, box-shadow .15s;
}
.button-secondary:hover {
background: #fff;
box-shadow: 0 4px 16px rgba(59,130,246,.12);
}
.hero,
.section,
.provider-card,
.side-card,
.booking-card,
.metric-card,
.doc-card,
.map-card,
.filter-card,
.listing-card,
.panel-card {
background: var(--surface);
backdrop-filter: blur(16px);
}
.panel-card,
.section,
.map-card,
.filter-card,
.provider-card,
.side-card,
.booking-card,
.metric-card,
.doc-card,
.listing-card {
padding: 20px;
border-radius: var(--radius-lg);
}
.hero-stats {
grid-template-columns: repeat(3, 1fr);
margin-top: 18px;
}
.hero-stats div,
.metric-card {
padding: 18px;
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.54);
}
.hero-stats strong,
.metric-card strong,
.provider-header strong {
display: block;
font-size: 1.8rem;
}
.section {
margin-top: 28px;
border-radius: var(--radius-xl);
position: relative;
}
.section-heading {
grid-template-columns: 1fr;
margin-bottom: 18px;
}
.section-heading.with-toggle {
position: relative;
}
/* Toggle sits in the top-right corner of the section */
.section-heading.with-toggle .section-toggle {
position: absolute;
top: 0;
right: 0;
}
.section-heading-main {
display: grid;
gap: 8px;
}
.section-toggle {
align-self: start;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 34px;
padding: 0;
border: none;
border-radius: 999px;
background: #ccfaf4;
cursor: pointer;
transition: background .2s, opacity .2s;
}
.section-toggle:hover { background: #99f0e6; }
.section-toggle .st-face {
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.section-toggle .st-face::after {
content: '';
display: block;
width: 9px;
height: 9px;
border-right: 2px solid #0f766e;
border-bottom: 2px solid #0f766e;
border-radius: 1px;
/* default: expanded → arrow points down */
transform: rotate(45deg) translate(-2px, -2px);
transition: transform .3s cubic-bezier(.4,0,.2,1);
}
.section-toggle .st-label { display: none; }
/* collapsed → arrow points right */
.section-toggle.st-off .st-face::after {
transform: rotate(-45deg) translate(0, 2px);
}
.section-collapsible-body {
display: grid;
gap: inherit;
margin-top: 18px;
}
.section.is-collapsed .section-collapsible-body {
display: none;
}
.search-bar {
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: end;
}
label {
display: grid;
gap: 10px;
font-size: 0.94rem;
color: var(--muted);
}
input,
select {
width: 100%;
padding: 14px 16px;
border: 1px solid var(--line);
border-radius: 16px;
background: rgba(255, 255, 255, 0.72);
color: var(--ink);
font: inherit;
}
.quick-categories {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
margin-top: 18px;
}
.category-pill {
padding: 14px 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.58);
border: 1px solid var(--line);
cursor: pointer;
}
.category-pill.active {
background: linear-gradient(135deg, rgba(217, 109, 58, 0.18), rgba(241, 198, 168, 0.32));
}
.result-layout {
grid-template-columns: 1fr;
}
.provider-grid,
.ai-shell,
.docs-grid {
grid-template-columns: 0.92fr 1.08fr;
}
.map-panel,
.provider-side,
.listing-panel {
display: grid;
gap: 16px;
}
.map-card {
min-height: 260px;
display: grid;
place-content: center;
text-align: center;
}
.map-explorer {
place-content: initial;
text-align: left;
gap: 18px;
background:
linear-gradient(180deg, rgba(247, 251, 254, 0.94), rgba(232, 241, 248, 0.98)),
radial-gradient(circle at 20% 20%, rgba(67, 183, 217, 0.14), transparent 28%);
}
.map-topline,
.region-summary,
.city-selector {
display: grid;
gap: 12px;
}
.map-source-note {
margin: 0;
color: var(--muted);
font-size: 0.92rem;
}
.region-summary {
grid-template-columns: 1fr auto;
align-items: end;
padding: 14px 16px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.72);
}
.region-summary strong,
.region-count strong {
display: block;
font-size: 1.5rem;
}
.map-stage {
position: relative;
min-height: 320px;
border-radius: 24px;
border: 1px solid var(--line);
overflow: hidden;
background:
linear-gradient(180deg, rgba(234, 243, 249, 0.96), rgba(245, 250, 253, 0.98)),
radial-gradient(circle at 40% 35%, rgba(75, 145, 192, 0.12), transparent 22%),
radial-gradient(circle at 72% 58%, rgba(67, 183, 217, 0.1), transparent 24%);
}
.map-stage::before {
content: "";
position: absolute;
inset: 18px;
border-radius: 20px;
border: 1px dashed rgba(31, 36, 48, 0.12);
pointer-events: none;
}
.map-legend {
position: absolute;
left: 18px;
bottom: 18px;
padding: 10px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
color: var(--muted);
font-size: 0.88rem;
}
.city-allbar,
.city-column {
display: grid;
gap: 12px;
}
.city-chip {
padding: 12px 16px;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
color: var(--ink);
cursor: pointer;
text-align: center;
white-space: nowrap;
}
.city-chip.active {
background: linear-gradient(135deg, rgba(217, 109, 58, 0.22), rgba(241, 198, 168, 0.52));
color: var(--accent-deep);
}
.city-chip.region-north {
background: rgba(99, 196, 223, 0.9);
color: white;
}
.city-chip.region-central {
background: rgba(240, 198, 111, 0.9);
color: white;
}
.city-chip.region-south {
background: rgba(142, 187, 136, 0.92);
color: white;
}
.city-chip.region-east {
background: rgba(164, 154, 220, 0.92);
color: white;
}
.city-chip.region-island {
background: rgba(232, 166, 202, 0.92);
color: white;
}
.city-chip.active.region-north,
.city-chip.active.region-central,
.city-chip.active.region-south,
.city-chip.active.region-east,
.city-chip.active.region-island {
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72), 0 8px 20px rgba(31, 36, 48, 0.12);
}
.map-editor-shell {
display: grid;
gap: 14px;
}
.map-editor-toolbar {
display: grid;
grid-template-columns: auto auto 1fr;
gap: 14px;
align-items: center;
padding: 12px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.86);
}
.toolbar-brand {
display: flex;
align-items: center;
gap: 10px;
}
.toolbar-badge {
padding: 7px 10px;
border-radius: 999px;
background: linear-gradient(135deg, #37b5d7, #2f6fe4);
color: white;
font-size: 0.78rem;
font-weight: 700;
}
.toolbar-tabs {
display: flex;
gap: 8px;
}
.toolbar-tab {
padding: 10px 12px;
border: 0;
border-radius: 12px;
background: rgba(31, 36, 48, 0.08);
color: var(--ink);
cursor: pointer;
font: inherit;
}
.toolbar-tab.active {
background: #17314a;
color: white;
}
.map-inline-search {
display: grid;
gap: 6px;
justify-self: end;
min-width: 280px;
}
.map-inline-search input {
background: white;
}
.map-editor-stage {
display: grid;
grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
align-items: start;
gap: 12px;
overflow: visible;
}
.map-style-sidebar {
position: relative;
width: min(100%, 360px);
justify-self: end;
max-height: none;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(250, 252, 255, 0.95);
box-shadow: 0 22px 42px rgba(32, 73, 110, 0.16);
}
.sidebar-header,
.sidebar-group,
.map-mini-actions {
display: grid;
gap: 8px;
}
.sidebar-header {
grid-template-columns: 1fr auto;
align-items: start;
}
.sidebar-header-copy {
display: grid;
gap: 4px;
}
.map-style-sidebar-body {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
overflow: hidden;
max-height: 1600px;
transition: max-height 220ms ease, opacity 220ms ease, margin-top 220ms ease;
}
.map-style-sidebar.is-collapsed .map-style-sidebar-body {
max-height: 0;
opacity: 0;
margin-top: 0;
pointer-events: none;
}
.sidebar-toggle-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
min-height: 34px;
padding: 0 12px;
border: 1px solid rgba(21, 32, 43, 0.08);
border-radius: 999px;
background: rgba(240, 247, 251, 0.92);
color: var(--ink);
cursor: pointer;
font: inherit;
font-weight: 800;
font-size: 0.84rem;
}
.sidebar-toggle-label {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sidebar-toggle-label::after {
content: "−";
font-size: 1.1rem;
line-height: 1;
}
.map-style-sidebar.is-collapsed .sidebar-toggle-label::after {
content: "+";
}
.map-style-options,
.layer-options {
display: grid;
gap: 8px;
}
.sidebar-group-compact {
grid-column: 1 / -1;
}
.sidebar-group-wide {
grid-column: 1 / -1;
}
.sidebar-group {
padding: 10px;
border: 1px solid rgba(21, 32, 43, 0.08);
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
}
.style-option {
display: grid;
gap: 3px;
padding: 9px 10px;
border: 1px solid rgba(21, 32, 43, 0.08);
border-radius: 12px;
background: rgba(240, 247, 251, 0.9);
color: var(--ink);
text-align: left;
cursor: pointer;
font: inherit;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.style-option span {
color: var(--muted);
font-size: 0.74rem;
}
.style-option.active {
border-color: rgba(31, 126, 168, 0.35);
box-shadow: 0 6px 12px rgba(31, 126, 168, 0.14);
transform: translateY(-1px);
}
.layer-toggle {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 12px;
background: rgba(240, 247, 251, 0.9);
color: var(--ink);
cursor: pointer;
font-size: 0.84rem;
}
.layer-toggle input {
width: 14px;
height: 14px;
accent-color: var(--accent-deep);
}
.sidebar-header span,
.sidebar-title {
color: var(--muted);
}
.sidebar-title {
margin: 0;
font-size: 0.78rem;
font-weight: 600;
}
.taiwan-stage {
min-height: 660px;
background: #e4eef5;
}
.map-editor-stage .map-stage {
min-width: 0;
}
.google-map-frame {
position: relative;
min-height: 660px;
}
.google-map-canvas {
position: absolute;
inset: 0;
border-radius: 22px;
}
.gm-marker-card {
display: grid;
gap: 2px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.96);
color: var(--ink);
box-shadow: 0 12px 22px rgba(32, 73, 110, 0.18);
border: 1px solid rgba(31, 126, 168, 0.12);
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.gm-marker-card strong {
font-size: 0.9rem;
}
.gm-marker-card span {
color: var(--muted);
font-size: 0.78rem;
}
.gm-marker-card.active {
transform: translateY(-2px);
box-shadow: 0 18px 28px rgba(31, 126, 168, 0.24);
border-color: rgba(31, 126, 168, 0.4);
}
.county-node,
.island-card {
position: absolute;
border: 0;
background: rgba(255, 255, 255, 0.18);
cursor: pointer;
}
.county-node {
z-index: 2;
padding: 0;
width: 62px;
height: 38px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
}
.county-node span,
.island-card span {
display: grid;
place-items: center;
width: 100%;
height: 100%;
border-radius: inherit;
color: white;
font-size: 0.82rem;
font-weight: 700;
background: rgba(92, 196, 223, 0.92);
box-shadow: 0 10px 18px rgba(31, 36, 48, 0.1);
}
.county-node.active span,
.island-card.active span {
background: linear-gradient(135deg, #6ca764, #8cc27f);
}
.county-chip,
.map-mini-actions .county-node,
.map-mini-actions .island-card {
position: relative;
width: auto;
height: auto;
}
.county-chip {
background: transparent;
}
.county-chip span,
.map-mini-actions .county-node span,
.map-mini-actions .island-card span {
min-width: 72px;
min-height: 36px;
padding: 0 10px;
font-size: 0.74rem;
}
.county-taipei { top: 96px; left: 63%; }
.county-new-taipei { top: 136px; left: 69%; }
.county-taoyuan { top: 154px; left: 50%; }
.county-taichung { top: 302px; left: 47%; }
.county-tainan { top: 472px; left: 45%; }
.county-kaohsiung { top: 532px; left: 54%; }
.county-yilan,
.county-hualien,
.county-taitung {
position: relative;
width: auto;
height: auto;
}
.island-card {
position: relative;
width: auto;
height: auto;
border-radius: 14px;
border: 0;
background: transparent;
}
.island-card span {
min-width: 72px;
min-height: 36px;
padding: 0 10px;
font-size: 0.74rem;
}
.floating-summary {
display: grid;
gap: 2px;
padding: 10px 12px;
border-radius: 14px;
background: rgba(248, 252, 255, 0.95);
box-shadow: 0 14px 32px rgba(32, 73, 110, 0.14);
}
.floating-summary strong {
font-size: 1rem;
}
.floating-summary span,
.floating-summary em {
color: var(--muted);
font-style: normal;
font-size: 0.82rem;
}
.floating-summary-inline {
position: relative;
top: auto;
left: auto;
z-index: auto;
}
.map-external-actions {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
align-items: start;
margin-top: 10px;
}
.map-quick-cities {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 8px 10px;
border-radius: 14px;
background: rgba(248, 252, 255, 0.92);
box-shadow: 0 14px 32px rgba(32, 73, 110, 0.1);
}
.map-style-sidebar .map-style-options {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.map-style-sidebar .layer-options,
.map-style-sidebar .city-column,
.map-style-sidebar .map-mini-actions,
.map-style-sidebar .city-allbar {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.map-style-sidebar .layer-options {
grid-template-columns: 1fr;
}
.map-style-sidebar .style-option,
.map-style-sidebar .layer-toggle,
.map-style-sidebar .city-chip,
.map-style-sidebar .county-node,
.map-style-sidebar .island-card {
width: 100%;
}
.map-style-sidebar .style-option {
min-height: 72px;
align-content: start;
}
.map-style-sidebar .style-option strong {
font-size: 0.82rem;
line-height: 1.25;
}
.map-style-sidebar .city-chip,
.map-style-sidebar .county-node,
.map-style-sidebar .island-card {
justify-self: stretch;
}
.map-style-sidebar .city-chip,
.map-style-sidebar .county-node span,
.map-style-sidebar .island-card span {
min-width: 0;
width: 100%;
}
.map-style-sidebar .city-chip {
min-height: 38px;
padding: 8px 10px;
border-radius: 12px;
text-align: center;
}
.map-style-sidebar .county-node,
.map-style-sidebar .island-card {
background: transparent;
}
.map-style-sidebar .county-node span,
.map-style-sidebar .island-card span {
min-height: 38px;
padding: 8px 10px;
font-size: 0.72rem;
line-height: 1.2;
}
.filter-pills,
.caregiver-list {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.filter-pills span,
.caregiver-chip,
.provider-tag,
.calendar-day,
.step,
.badge {
border-radius: 999px;
}
.filter-pills span,
.caregiver-chip,
.badge {
padding: 10px 12px;
background: rgba(255, 255, 255, 0.64);
text-align: center;
}
.listing-card {
display: grid;
gap: 14px;
transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
cursor: pointer;
}
.listing-card.active {
transform: translateY(-2px);
border-color: rgba(31, 126, 168, 0.28);
background: linear-gradient(180deg, rgba(246, 252, 255, 0.96), rgba(230, 243, 250, 0.92));
box-shadow: 0 20px 34px rgba(31, 126, 168, 0.16);
}
.listing-top,
.listing-bottom,
.summary-list,
.badge-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.listing-card h3 {
margin: 0;
}
.listing-meta,
.summary-list {
color: var(--muted);
}
.provider-header {
grid-template-columns: 1fr auto;
align-items: start;
}
.provider-tag {
display: inline-block;
margin-bottom: 10px;
padding: 6px 10px;
background: rgba(217, 109, 58, 0.14);
color: var(--accent-deep);
font-size: 0.82rem;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
}
.calendar-grid span {
text-align: center;
}
.calendar-day {
padding: 12px 0;
background: rgba(255, 255, 255, 0.58);
}
.calendar-day.active,
.step.active {
background: linear-gradient(135deg, rgba(217, 109, 58, 0.2), rgba(241, 198, 168, 0.52));
color: var(--accent-deep);
}
.review-list {
display: grid;
gap: 12px;
}
.review-list blockquote {
margin: 0;
padding: 16px;
border-left: 4px solid rgba(217, 109, 58, 0.4);
background: rgba(255, 255, 255, 0.48);
border-radius: 12px;
}
.step-track {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.step {
padding: 14px 16px;
background: rgba(255, 255, 255, 0.58);
text-align: center;
}
.booking-card,
.ai-form {
display: grid;
gap: 18px;
}
/* ── AI 助理美化 ── */
.ai-form-intro p {
margin: 0 0 18px;
font-size: .9rem;
color: var(--muted);
line-height: 1.6;
}
.ai-form-fields {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
margin-bottom: 20px;
}
.ai-label {
display: flex;
flex-direction: column;
gap: 6px;
font-weight: normal;
}
.ai-label-text {
font-size: .78rem;
font-weight: 700;
color: var(--ink);
letter-spacing: .04em;
text-transform: uppercase;
}
.ai-select {
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 10px;
background: #fff;
font: inherit;
font-size: .875rem;
color: var(--ink);
cursor: pointer;
transition: border-color .15s;
}
.ai-select:focus { outline: none; border-color: var(--primary); }
.ai-submit-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 999px;
font: inherit;
font-size: .9rem;
font-weight: 700;
cursor: pointer;
transition: opacity .15s, transform .15s;
}
.ai-submit-btn:hover { opacity: .88; transform: translateY(-1px); }
.ai-btn-row {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.ai-why-btn {
font: inherit;
font-size: .82rem;
color: var(--muted);
background: none;
border: none;
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
padding: 0;
transition: color .15s;
}
.ai-why-btn:hover { color: var(--ink); }
.ai-why-panel {
margin-top: 12px;
padding: 14px 18px;
background: #fffbf5;
border: 1px dashed rgba(159,67,34,.28);
border-radius: 10px;
font-size: .85rem;
color: var(--muted);
line-height: 1.65;
}
.ai-why-panel ul { margin: 6px 0; padding-left: 18px; }
.ai-why-panel li { margin-bottom: 4px; }
@media (max-width: 700px) {
.ai-form-fields { grid-template-columns: 1fr; }
}
.summary-list {
padding: 0;
margin: 0;
list-style: none;
}
.dashboard-grid {
grid-template-columns: repeat(4, 1fr);
}
.dashboard-toolbar,
.dashboard-admin-shell,
.admin-card-head,
.admin-form-grid,
.admin-list,
.admin-row,
.admin-form-actions,
.admin-checkbox-grid {
display: grid;
gap: 16px;
}
.dashboard-toolbar {
grid-template-columns: minmax(260px, 360px) 1fr;
align-items: end;
margin-bottom: 18px;
}
.dashboard-select,
.admin-form-grid label {
display: grid;
gap: 8px;
}
.dashboard-select span,
.admin-form-grid span,
.admin-checkbox span {
font-weight: 700;
}
.dashboard-status {
padding: 14px 18px;
border-radius: 18px;
border: 1px solid rgba(24, 49, 83, 0.12);
background: rgba(255, 255, 255, 0.72);
color: var(--muted);
}
.dashboard-admin-shell {
margin-top: 22px;
grid-template-columns: repeat(3, minmax(0, 1fr));
align-items: start;
}
.admin-card {
padding: 24px;
border-radius: var(--radius-lg);
border: 1px solid rgba(24, 49, 83, 0.12);
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 18px 36px rgba(22, 58, 93, 0.08);
}
.admin-card h3,
.admin-row h4 {
margin: 0;
}
.admin-card p {
margin: 8px 0 0;
color: var(--muted);
line-height: 1.7;
}
.admin-card-head {
grid-template-columns: 1fr auto;
align-items: start;
margin-bottom: 18px;
}
.admin-form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-form-grid input,
.admin-form-grid textarea,
.admin-form-grid select,
.dashboard-select select {
width: 100%;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(24, 49, 83, 0.16);
background: rgba(255, 255, 255, 0.96);
color: var(--ink);
font: inherit;
}
.admin-form-grid textarea {
resize: vertical;
min-height: 96px;
}
.admin-form-wide {
grid-column: 1 / -1;
}
.admin-checkbox-grid {
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admin-checkbox {
display: flex;
gap: 10px;
align-items: center;
min-height: 48px;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(24, 49, 83, 0.12);
background: rgba(244, 250, 255, 0.9);
}
.admin-checkbox input {
width: 18px;
height: 18px;
margin: 0;
}
.admin-form-actions {
grid-column: 1 / -1;
grid-auto-flow: column;
justify-content: start;
}
.admin-list {
margin-top: 18px;
}
.admin-row {
padding: 16px 18px;
border-radius: 18px;
border: 1px solid rgba(24, 49, 83, 0.12);
background: rgba(246, 251, 255, 0.9);
}
.admin-row p {
margin: 0;
}
.admin-row-meta,
.admin-row-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.admin-tag {
display: inline-flex;
align-items: center;
padding: 7px 12px;
border-radius: 999px;
background: rgba(88, 204, 2, 0.12);
color: var(--ink);
font-size: 0.92rem;
font-weight: 700;
}
.admin-tag.muted {
background: rgba(24, 49, 83, 0.08);
color: var(--muted);
}
.admin-inline-button {
border: 0;
border-radius: 999px;
padding: 10px 14px;
background: rgba(24, 49, 83, 0.08);
color: var(--ink);
font: inherit;
cursor: pointer;
}
.admin-inline-button.active {
background: rgba(88, 204, 2, 0.16);
}
.admin-empty {
padding: 18px;
border-radius: 18px;
border: 1px dashed rgba(24, 49, 83, 0.18);
color: var(--muted);
background: rgba(255, 255, 255, 0.58);
}
.admin-list-schedule .admin-row {
grid-template-columns: 1fr auto;
align-items: center;
}
.ai-result {
padding: 22px;
border-radius: var(--radius-lg);
border: 1px dashed rgba(159, 67, 34, 0.28);
background: rgba(255, 251, 247, 0.74);
}
.ai-result ul {
padding-left: 18px;
}
.doc-card a {
color: var(--accent-deep);
font-weight: 600;
}
@media (max-width: 960px) {
.hero-grid,
.result-layout,
.provider-grid,
.ai-shell,
.docs-grid,
.search-bar,
.dashboard-grid {
grid-template-columns: 1fr;
}
.topbar {
grid-template-columns: 1fr;
}
.nav-links {
grid-auto-flow: row;
}
.step-track {
grid-template-columns: repeat(2, 1fr);
}
.map-editor-toolbar {
grid-template-columns: 1fr;
}
.map-inline-search {
justify-self: stretch;
min-width: 0;
}
.map-style-sidebar {
width: 100%;
}
.map-editor-stage {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
overflow: visible;
}
.map-style-sidebar {
width: 100%;
justify-self: stretch;
}
.map-style-sidebar-body,
.sidebar-group-compact,
.sidebar-group-wide {
grid-column: 1 / -1;
}
.map-style-sidebar .map-style-options,
.map-style-sidebar .city-column,
.map-style-sidebar .map-mini-actions,
.map-style-sidebar .city-allbar {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.map-external-actions {
grid-template-columns: 1fr;
}
.city-allbar,
.city-column,
.map-mini-actions {
grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
}
.dashboard-toolbar,
.dashboard-admin-shell,
.admin-form-grid,
.admin-card-head {
grid-template-columns: 1fr;
}
.admin-checkbox-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.page-shell {
width: calc(100% - 40px);
}
.hero-actions,
.step-track,
.hero-stats {
grid-template-columns: 1fr;
flex-direction: column;
}
.location-select-group {
flex-direction: column;
}
.search-bar-usage {
gap: 14px;
}
}
:root {
--bg: #eaf3f7;
--surface: #ffffff;
--ink: #19324d;
--muted: #61758c;
--line: rgba(25, 50, 77, 0.12);
--accent: #2b7bbb;
--accent-deep: #1e5f97;
--accent-soft: #d7ebf8;
--warning: #f5a547;
--orange: #ef8f33;
--pink: #ffb3c8;
--sky: #7bcaf4;
--purple: #a0b3ff;
--teal: #42b883;
--shadow: 0 18px 40px rgba(31, 77, 117, 0.1);
--radius-xl: 32px;
--radius-lg: 24px;
}
body {
color: var(--ink);
background:
radial-gradient(circle at 14% 10%, rgba(43, 123, 187, 0.16), transparent 20%),
radial-gradient(circle at 88% 18%, rgba(66, 184, 131, 0.12), transparent 22%),
radial-gradient(circle at 78% 72%, rgba(239, 143, 51, 0.12), transparent 18%),
linear-gradient(180deg, #f8fcfe 0%, #edf6fa 52%, #f8fbfd 100%);
}
.page-shell {
padding-top: 28px;
}
.hero,
.section,
.provider-card,
.side-card,
.booking-card,
.metric-card,
.doc-card,
.map-card,
.filter-card,
.listing-card,
.panel-card {
border: 1px solid var(--line);
box-shadow: var(--shadow);
background: var(--surface);
backdrop-filter: none;
}
.hero {
position: relative;
overflow: hidden;
background: #04020d;
}
.hero-reference-layer {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.hero-blob,
.hero-curve {
position: absolute;
opacity: 0;
display: none;
}
.hero-blob-one {
top: -24px;
left: -96px;
width: 360px;
}
.hero-blob-two {
right: -112px;
top: 72px;
width: 320px;
}
.hero-curve-top {
right: 6%;
top: 18px;
width: 260px;
}
.hero-curve-bottom {
left: 24%;
bottom: -8px;
width: 280px;
}
.topbar,
.hero-grid {
position: relative;
z-index: 1;
}
.brand-mark {
width: 56px;
height: 56px;
border: 3px solid var(--line);
border-radius: 20px;
background: linear-gradient(180deg, #63c7ff, #2da7ff);
box-shadow: 0 8px 0 rgba(24, 49, 83, 0.14);
}
.nav-links a,
.button,
.category-pill,
.city-chip,
.toolbar-tab,
.style-option,
.layer-toggle,
.badge,
.caregiver-chip,
.filter-pills span,
.calendar-day,
.step {
border: 3px solid var(--line);
box-shadow: 0 6px 0 rgba(24, 49, 83, 0.12);
}
.nav-links a {
background: #ffffff;
font-weight: 700;
}
.eyebrow {
color: var(--orange);
font-weight: 800;
letter-spacing: 0.1em;
}
.hero-copy h1 {
line-height: 1.04;
color: #10365c;
}
.hero-text {
font-size: 1.1rem;
color: #35506f;
}
.button {
padding: 16px 24px;
font-weight: 800;
transition: transform 140ms ease;
}
.button:hover,
.category-pill:hover,
.city-chip:hover,
.listing-card:hover {
transform: translateY(-2px);
}
.listing-card:hover,
.story-card:hover,
.usage-filter-card:hover,
.detail-card:hover {
box-shadow: 0 24px 44px rgba(31, 88, 125, 0.12);
}
.button-primary {
background: linear-gradient(180deg, #3f90cf, #2b7bbb);
color: #ffffff;
min-height: 56px;
padding: 16px 28px;
box-shadow: 0 14px 28px rgba(34, 101, 154, 0.22);
}
.button-secondary {
background: linear-gradient(180deg, #fff5e8, #fde5c8);
color: #8a5417;
min-height: 56px;
padding: 16px 28px;
border: 1px solid rgba(239, 143, 51, 0.22);
}
input,
select {
padding: 16px 18px;
border: 1px solid rgba(25, 50, 77, 0.16);
border-radius: 20px;
background: #ffffff;
box-shadow: inset 0 -1px 0 rgba(25, 50, 77, 0.04);
color: var(--ink);
font-weight: 700;
}
label {
color: var(--ink);
font-weight: 700;
}
.panel-card,
.section,
.map-card,
.filter-card,
.provider-card,
.side-card,
.booking-card,
.metric-card,
.doc-card,
.listing-card {
padding: 22px;
}
.hero-panel {
display: grid;
gap: 18px;
}
.hero-stats div,
.metric-card {
border: 1px solid rgba(25, 50, 77, 0.1);
background: linear-gradient(180deg, #ffffff, #f7fbfe);
}
.hero-trust-row,
.service-storyboard {
display: grid;
gap: 14px;
}
.hero-trust-row {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-top: 18px;
}
.trust-pill {
padding: 12px 14px;
border: 1px solid rgba(25, 50, 77, 0.12);
border-radius: 999px;
text-align: center;
font-weight: 800;
box-shadow: 0 6px 0 rgba(24, 49, 83, 0.1);
}
.trust-home { background: #ffe27a; }
.trust-nursing { background: #ffb9d6; }
.trust-rehab { background: #a5ebff; }
.trust-transport { background: #c9b9ff; }
.cartoon-scene {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 18px;
border: 3px solid var(--line);
border-radius: 28px;
background: linear-gradient(180deg, #dff5ff, #fff5d8);
box-shadow: 0 10px 0 rgba(24, 49, 83, 0.12);
}
.cartoon-character {
position: relative;
display: grid;
justify-items: center;
gap: 8px;
padding: 18px 10px 10px;
border-radius: 24px;
}
.character-head {
width: 48px;
height: 48px;
border: 3px solid var(--line);
border-radius: 50%;
background: #ffd8a8;
box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.06);
}
.character-body {
width: 70px;
height: 66px;
border: 3px solid var(--line);
border-radius: 24px 24px 18px 18px;
}
.elder-figure .character-body { background: #ffe27a; }
.caregiver-figure .character-body { background: #7fe33d; }
.medical-figure .character-body { background: #63c7ff; }
.character-label {
padding: 6px 10px;
border: 3px solid var(--line);
border-radius: 999px;
background: #ffffff;
font-size: 0.85rem;
font-weight: 800;
}
.decor-illustration-card {
position: relative;
min-height: 320px;
overflow: hidden;
border: 3px solid var(--line);
border-radius: 30px;
background:
radial-gradient(circle at 16% 18%, rgba(99, 199, 255, 0.18), transparent 16%),
linear-gradient(180deg, #f4fbff 0%, #ffffff 100%);
box-shadow: 0 10px 0 rgba(24, 49, 83, 0.12);
}
.scene-person,
.scene-ground,
.scene-sofa,
.scene-backdrop,
.hero-search-art,
.illustration-cloud,
.illustration-leaf {
position: absolute;
}
.hero-search-art {
inset: 18px 18px 18px;
}
.scene-backdrop {
left: 150px;
right: 34px;
bottom: 34px;
height: 176px;
border-radius: 180px 180px 28px 28px;
background: linear-gradient(180deg, rgba(192, 226, 248, 0.2), rgba(173, 214, 242, 0.34));
}
.illustration-cloud {
width: 74px;
height: 28px;
border: 3px solid var(--line);
border-radius: 999px;
background: #dff5ff;
}
.illustration-cloud::before,
.illustration-cloud::after {
content: "";
position: absolute;
bottom: 10px;
border: 3px solid var(--line);
border-radius: 50%;
background: #dff5ff;
}
.illustration-cloud::before {
left: 10px;
width: 24px;
height: 24px;
}
.illustration-cloud::after {
right: 10px;
width: 20px;
height: 20px;
}
.cloud-left {
top: 18px;
left: 18px;
}
.cloud-right {
top: 22px;
right: 22px;
}
.illustration-leaf {
width: 34px;
height: 74px;
border: 3px solid var(--line);
border-radius: 999px 999px 0 999px;
background: linear-gradient(180deg, #28d0b5, #22b394);
}
.illustration-leaf::after {
content: "";
position: absolute;
left: 50%;
top: 10px;
width: 3px;
height: 48px;
background: rgba(24, 49, 83, 0.35);
transform: translateX(-50%);
}
.leaf-left {
left: 8px;
bottom: 16px;
transform: rotate(-14deg);
}
.leaf-right {
right: 12px;
bottom: 20px;
transform: scaleX(-1) rotate(-8deg);
}
.scene-sofa {
right: 74px;
bottom: 28px;
width: 220px;
height: 110px;
border: 3px solid var(--line);
border-radius: 34px 34px 28px 28px;
background: linear-gradient(180deg, #86d4ef 0%, #71c4e7 100%);
box-shadow: inset 0 -10px 0 rgba(255, 255, 255, 0.18);
}
.scene-sofa::before,
.scene-sofa::after {
content: "";
position: absolute;
bottom: -14px;
width: 12px;
height: 18px;
border-radius: 999px;
background: #b38e65;
}
.scene-sofa::before {
left: 34px;
}
.scene-sofa::after {
right: 34px;
}
.scene-person {
display: block;
}
.scene-head,
.scene-body {
display: block;
border: 3px solid var(--line);
}
.scene-head {
width: 44px;
height: 44px;
border-radius: 50%;
background: #ffd3b5;
}
.scene-body {
position: absolute;
border-radius: 24px;
}
.scene-cane {
position: absolute;
left: 16px;
bottom: -8px;
width: 7px;
height: 84px;
border-radius: 999px;
background: #20b1a0;
}
.scene-cane::before {
content: "";
position: absolute;
left: -3px;
top: -2px;
width: 14px;
height: 12px;
border: 3px solid #20b1a0;
border-bottom: 0;
border-radius: 999px 999px 0 0;
}
.elder-main {
right: 166px;
bottom: 36px;
width: 104px;
height: 162px;
z-index: 2;
}
.elder-main .scene-head {
left: 26px;
top: 2px;
}
.elder-main .scene-head::before {
content: "";
position: absolute;
inset: -8px -6px 10px;
border-radius: 50%;
background: #f3f5f8;
z-index: -1;
}
.elder-main .scene-body {
left: 12px;
top: 34px;
width: 78px;
height: 110px;
background: linear-gradient(180deg, #f0bf2b 0 34%, #b39c7d 34% 100%);
}
.elder-main .scene-body::before {
content: "";
position: absolute;
left: 26px;
top: 16px;
width: 38px;
height: 72px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.46);
}
.caregiver-main {
right: 42px;
bottom: 18px;
width: 136px;
height: 214px;
z-index: 3;
}
.caregiver-main .scene-head {
left: 42px;
top: 0;
}
.caregiver-main .scene-head::before {
content: "";
position: absolute;
inset: -6px -5px 14px;
border-radius: 999px 999px 20px 20px;
background: #724653;
z-index: -1;
}
.caregiver-main .scene-body {
left: 20px;
top: 34px;
width: 96px;
height: 156px;
border-radius: 34px;
background: linear-gradient(180deg, #25cbc1 0%, #1db3a9 100%);
}
.caregiver-main .scene-body::before,
.caregiver-main .scene-body::after {
content: "";
position: absolute;
width: 18px;
border: 3px solid var(--line);
border-radius: 999px;
background: #25cbc1;
}
.caregiver-main .scene-body::before {
left: -10px;
top: 52px;
height: 72px;
transform: rotate(20deg);
}
.caregiver-main .scene-body::after {
right: -10px;
top: 60px;
height: 74px;
transform: rotate(-18deg);
}
.scene-ground {
left: 144px;
right: 32px;
bottom: 18px;
height: 84px;
border-radius: 999px;
background: linear-gradient(180deg, rgba(152, 214, 246, 0.18), rgba(122, 197, 236, 0.28));
}
.how-it-works-section {
background:
url("example/定價 - 致敬_files/Hero-Curve-white.svg") no-repeat right 24px top 20px / 220px,
radial-gradient(circle at 12% 16%, rgba(99, 199, 255, 0.16), transparent 18%),
linear-gradient(180deg, #dff6ff 0%, #f8fdff 100%);
}
.network-difference-section {
background:
linear-gradient(180deg, #f9fdff 0%, #eef8fb 100%);
}
.difference-grid,
.network-cta,
.network-cta-actions {
display: grid;
gap: 18px;
}
.difference-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.difference-card {
display: grid;
gap: 12px;
padding: 22px;
border: 1px solid rgba(39, 93, 132, 0.14);
border-radius: 24px;
background: linear-gradient(180deg, #ffffff, #f6fbfd);
box-shadow: 0 18px 30px rgba(65, 109, 142, 0.08);
}
.difference-card h3,
.difference-card p {
margin: 0;
}
.difference-card p {
color: var(--muted);
line-height: 1.7;
}
.difference-icon {
width: 56px;
height: 56px;
border-radius: 18px;
border: 2px solid rgba(31, 92, 120, 0.16);
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.54) 24%, transparent 25%),
linear-gradient(180deg, #f5fffd, #dff4ef);
position: relative;
}
.difference-icon::before,
.difference-icon::after {
content: "";
position: absolute;
}
.difference-icon-care::before {
left: 17px;
top: 15px;
width: 14px;
height: 22px;
background: #21a68d;
border-radius: 14px 14px 0 0;
transform: rotate(-45deg);
transform-origin: bottom center;
}
.difference-icon-care::after {
left: 25px;
top: 15px;
width: 14px;
height: 22px;
background: #21a68d;
border-radius: 14px 14px 0 0;
transform: rotate(45deg);
transform-origin: bottom center;
}
.difference-icon-tech::before {
left: 22px;
top: 12px;
width: 12px;
height: 30px;
background: #1b7da0;
}
.difference-icon-tech::after {
left: 13px;
top: 21px;
width: 30px;
height: 12px;
background: #1b7da0;
}
.difference-icon-trust::before {
left: 18px;
top: 12px;
width: 20px;
height: 28px;
border-radius: 20px 20px 20px 0;
background: linear-gradient(180deg, #2abf9d, #168f74);
transform: rotate(-35deg);
}
.difference-icon-trust::after {
left: 27px;
top: 19px;
width: 2px;
height: 18px;
background: rgba(18, 71, 101, 0.6);
transform: rotate(-35deg);
}
.network-cta {
grid-template-columns: 0.95fr 1.2fr auto;
align-items: center;
margin-top: 24px;
padding: 0;
overflow: hidden;
border-radius: 32px;
border: 1px solid rgba(39, 93, 132, 0.14);
background: linear-gradient(135deg, #fbfeff, #f4fbff);
box-shadow: 0 18px 34px rgba(65, 109, 142, 0.08);
}
.network-cta-copy,
.network-cta-actions {
padding: 34px 0;
}
.network-cta-visual {
position: relative;
min-height: 392px;
overflow: hidden;
background:
radial-gradient(circle at 28% 56%, rgba(118, 196, 238, 0.24), transparent 22%),
linear-gradient(180deg, #ffffff 0%, #f1fbff 100%);
}
.network-cta-copy {
display: grid;
gap: 12px;
align-self: stretch;
align-content: center;
}
.network-cta strong,
.network-cta p {
display: block;
margin: 0;
}
.network-cta strong {
font-size: clamp(2rem, 3.8vw, 3.4rem);
line-height: 1.25;
color: #17254d;
}
.network-cta p {
color: var(--muted);
font-size: 1.08rem;
line-height: 1.8;
}
.network-cta-actions {
grid-auto-flow: row;
align-content: center;
padding-right: 30px;
}
.button-line {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 0 20px;
border-radius: 999px;
border: 2px solid rgba(88, 204, 2, 0.16);
background: linear-gradient(180deg, #f8ffef, #ebf9de);
color: #226f34;
font-weight: 800;
text-decoration: none;
}
.application-benefit-section {
background:
radial-gradient(ellipse at 90% 0%, rgba(249,115,22,.07), transparent 50%),
radial-gradient(ellipse at 5% 100%, rgba(13,148,136,.06), transparent 40%),
#F8FAFC;
}
/* ── New AB layout ── */
.ab-subtitle {
font-size: .78rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 20px;
}
.ab-flow-wrap,
.ab-benefit-wrap {
background: #fff;
border: 1px solid var(--border);
border-radius: 16px;
padding: 28px 32px 32px;
margin-bottom: 20px;
}
.ab-steps {
display: flex;
align-items: flex-start;
gap: 0;
}
.ab-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
flex: 1;
text-align: center;
}
.ab-step-num {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-dk));
color: #fff;
font-size: 1.1rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(13,148,136,.25);
}
.ab-step-body { padding: 0 8px; }
.ab-step-body strong { display: block; font-size: .88rem; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.ab-step-body p { margin: 0; font-size: .78rem; color: var(--muted); line-height: 1.55; }
.ab-step-line {
flex-shrink: 0;
width: 32px;
height: 2px;
background: linear-gradient(90deg, var(--primary), var(--accent));
margin-top: 22px;
border-radius: 2px;
opacity: .45;
}
/* Copay badges */
.ab-copay-row {
display: flex;
gap: 12px;
margin-bottom: 20px;
}
.ab-copay {
flex: 1;
border-radius: 12px;
padding: 16px 18px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ab-copay--high { background: #FEF3C7; border: 1px solid #FDE68A; }
.ab-copay--mid { background: #DCFCE7; border: 1px solid #BBF7D0; }
.ab-copay--low { background: #DBEAFE; border: 1px solid #BFDBFE; }
.ab-copay-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; color: #374151; }
.ab-copay-pct { font-size: 1.3rem; font-weight: 800; color: #111827; line-height: 1.1; }
.ab-copay-desc { font-size: .72rem; color: #6B7280; }
/* Fee table */
.ab-fee-table { display: grid; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.ab-fee-head, .ab-fee-row { display: grid; grid-template-columns: 1.2fr 1.6fr 2.2fr; }
.ab-fee-head {
background: var(--primary);
color: #fff;
padding: 10px 16px;
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
gap: 12px;
}
.ab-fee-row {
padding: 12px 16px;
gap: 12px;
font-size: .85rem;
border-top: 1px solid var(--border);
align-items: center;
}
.ab-fee-row:nth-child(even) { background: #F8FAFC; }
.ab-fee-row strong { font-weight: 700; color: var(--ink); }
.ab-fee-row span { color: var(--muted); line-height: 1.45; }
.ab-fee-row span:nth-child(2) { font-weight: 600; color: var(--ink); font-size: .82rem; }
@media (max-width: 900px) {
.ab-steps { flex-direction: column; align-items: stretch; gap: 0; }
.ab-step { flex-direction: row; text-align: left; padding: 12px 0; }
.ab-step-num { width: 36px; height: 36px; font-size: .9rem; flex-shrink: 0; }
.ab-step-line { width: 2px; height: 20px; margin: 0 0 0 17px; background: linear-gradient(180deg, var(--primary), var(--accent)); }
.ab-copay-row { flex-direction: column; }
.ab-fee-head { display: none; }
.ab-fee-row { grid-template-columns: 1fr 1fr; }
.ab-fee-row span:last-child { grid-column: 1 / -1; }
.ab-flow-wrap, .ab-benefit-wrap { padding: 20px 18px; }
}
.notice-signup-section {
background: linear-gradient(180deg, #f9fdff 0%, #eef8fb 100%);
}
.notice-signup-card {
display: grid;
grid-template-columns: 1.05fr 0.95fr;
gap: 24px;
padding: 28px;
border: 1px solid rgba(39, 93, 132, 0.12);
border-radius: 28px;
background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
box-shadow: 0 18px 32px rgba(65, 109, 142, 0.08);
}
.notice-signup-copy,
.notice-signup-form,
.notice-signup-actions {
display: grid;
gap: 14px;
}
.notice-signup-copy strong,
.notice-signup-copy p {
margin: 0;
}
.notice-signup-copy strong {
font-size: 1.25rem;
line-height: 1.6;
}
.notice-signup-copy p {
color: var(--muted);
line-height: 1.8;
}
.modal-notice[hidden] {
display: none;
}
.modal-notice {
position: fixed;
inset: 0;
z-index: 60;
}
.modal-notice-backdrop {
position: absolute;
inset: 0;
background: rgba(14, 27, 36, 0.56);
backdrop-filter: blur(8px);
}
.modal-notice-card {
position: relative;
width: min(520px, calc(100% - 32px));
margin: 12vh auto 0;
padding: 26px;
border: 1px solid rgba(39, 93, 132, 0.16);
border-radius: 28px;
background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
box-shadow: 0 28px 60px rgba(19, 50, 77, 0.18);
}
.modal-notice-head,
.modal-notice-actions {
display: flex;
align-items: center;
gap: 14px;
}
.modal-notice-head {
justify-content: space-between;
}
.modal-notice-badge {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 14px;
border-radius: 999px;
background: linear-gradient(180deg, #e6f4fb, #d8edf8);
color: #1c5b86;
font-weight: 800;
}
.modal-notice-head h2,
.modal-notice-text {
margin: 0;
}
.modal-notice-text {
margin-top: 14px;
color: var(--muted);
line-height: 1.85;
}
.modal-notice-progress {
height: 10px;
margin-top: 18px;
border-radius: 999px;
background: rgba(39, 93, 132, 0.1);
overflow: hidden;
}
.modal-notice-progress span {
display: block;
width: 68%;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, #42b883, #43b7d9);
}
.modal-notice-actions {
justify-content: flex-end;
flex-wrap: wrap;
margin-top: 18px;
}
.application-benefit-grid {
display: grid;
grid-template-columns: 1.15fr 0.95fr;
gap: 24px;
align-items: start;
}
.application-flow-card,
.benefit-fee-card {
display: grid;
gap: 18px;
padding: 24px;
border: 1px solid rgba(39, 93, 132, 0.12);
border-radius: 28px;
background: linear-gradient(180deg, #ffffff 0%, #f7fbfd 100%);
box-shadow: 0 18px 32px rgba(65, 109, 142, 0.08);
}
.content-card-head h3 {
margin: 0;
font-size: clamp(1.15rem, 1.5vw, 1.45rem);
line-height: 1.3;
overflow-wrap: anywhere;
}
.apply-steps {
display: grid;
grid-template-columns: repeat(9, minmax(0, 1fr));
gap: 12px;
align-items: stretch;
}
.apply-step {
display: grid;
gap: 10px;
align-content: start;
padding: 16px 14px;
border-radius: 20px;
border: 1px solid rgba(39, 93, 132, 0.1);
background: linear-gradient(180deg, #ffffff 0%, #f5fbff 100%);
box-shadow: 0 10px 22px rgba(65, 109, 142, 0.06);
}
.apply-step:nth-child(1),
.apply-step:nth-child(3),
.apply-step:nth-child(5),
.apply-step:nth-child(7),
.apply-step:nth-child(9) {
grid-column: span 1;
}
.apply-step-icon {
display: inline-grid;
place-items: center;
width: 48px;
height: 48px;
border-radius: 999px;
border: 3px solid rgba(31, 92, 120, 0.16);
background: linear-gradient(180deg, #1f8ec8 0%, #1db3a9 100%);
color: #ffffff;
font-size: 1.05rem;
font-weight: 800;
box-shadow: 0 12px 18px rgba(31, 142, 200, 0.18);
}
.apply-step strong,
.apply-step p {
margin: 0;
}
.apply-step strong {
font-size: 0.96rem;
line-height: 1.4;
color: #173058;
overflow-wrap: anywhere;
}
.apply-step p {
color: var(--muted);
line-height: 1.65;
font-size: 0.9rem;
}
.apply-step-arrow {
display: grid;
place-items: center;
font-size: 1.3rem;
font-weight: 800;
color: #1f8ec8;
}
.benefit-tags {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
}
.benefit-tag {
display: grid;
gap: 8px;
padding: 18px 16px;
border-radius: 22px;
border: 1px solid rgba(39, 93, 132, 0.1);
background: linear-gradient(180deg, #f9fdff 0%, #eef8fb 100%);
}
.benefit-tag strong,
.benefit-tag span {
margin: 0;
}
.benefit-tag strong {
font-size: 1.02rem;
color: #173058;
}
.benefit-tag span {
color: #1e8d72;
font-size: 1.2rem;
font-weight: 800;
}
.fee-table {
display: grid;
gap: 10px;
}
.fee-table-head,
.fee-row {
display: grid;
grid-template-columns: 1fr 0.8fr 1.35fr;
gap: 16px;
align-items: start;
padding: 16px 18px;
border-radius: 20px;
}
.fee-table-head {
background: #dff1fa;
color: #1a4364;
font-size: 0.95rem;
font-weight: 800;
}
.fee-row {
border: 1px solid rgba(39, 93, 132, 0.1);
background: #ffffff;
box-shadow: 0 10px 20px rgba(65, 109, 142, 0.05);
}
.fee-row strong,
.fee-row span {
margin: 0;
line-height: 1.7;
}
.fee-row strong {
font-size: 1rem;
color: #173058;
}
.fee-row span {
color: var(--muted);
}
@media (max-width: 1180px) {
.application-benefit-grid {
grid-template-columns: 1fr;
}
.notice-signup-card {
grid-template-columns: 1fr;
}
.apply-steps {
grid-template-columns: 1fr;
}
.apply-step-arrow {
transform: rotate(90deg);
min-height: 18px;
}
}
@media (max-width: 820px) {
.application-flow-card,
.benefit-fee-card {
padding: 20px;
}
.benefit-tags {
grid-template-columns: 1fr;
}
.fee-table-head {
display: none;
}
.fee-row {
grid-template-columns: 1fr;
gap: 8px;
padding: 18px 16px;
}
.apply-step {
padding: 14px 12px;
}
}
.cta-photo-frame,
.cta-caregiver,
.cta-elder,
.cta-leaf {
position: absolute;
}
.cta-photo-frame {
left: 38px;
bottom: -2px;
width: 360px;
height: 360px;
}
.cta-caregiver,
.cta-elder {
border-radius: 999px 999px 40px 40px;
border: 3px solid rgba(22, 55, 97, 0.12);
box-shadow: 0 18px 30px rgba(74, 127, 162, 0.12);
}
.cta-caregiver {
left: 16px;
top: 18px;
width: 154px;
height: 286px;
background:
radial-gradient(circle at 58% 10%, #1d2a44 0 24px, transparent 25px),
radial-gradient(circle at 58% 18%, #f2b48f 0 38px, transparent 39px),
linear-gradient(180deg, transparent 0 74px, #0f84c7 74px 100%);
}
.cta-caregiver::before,
.cta-caregiver::after,
.cta-elder::before,
.cta-elder::after {
content: "";
position: absolute;
}
.cta-caregiver::before {
left: 86px;
top: 126px;
width: 62px;
height: 136px;
border-radius: 999px;
background: #0f84c7;
transform: rotate(18deg);
}
.cta-caregiver::after {
left: 44px;
bottom: -6px;
width: 88px;
height: 148px;
border-radius: 999px 999px 32px 32px;
background: rgba(13, 104, 170, 0.18);
}
.cta-elder {
left: 116px;
top: 104px;
width: 178px;
height: 210px;
border-radius: 110px 110px 42px 42px;
background:
radial-gradient(circle at 50% 15%, #cad3dd 0 24px, transparent 25px),
radial-gradient(circle at 50% 22%, #f2c9ae 0 40px, transparent 41px),
linear-gradient(180deg, transparent 0 84px, #7fb4d5 84px 100%);
}
.cta-elder::before {
left: -24px;
top: 26px;
width: 190px;
height: 224px;
border-radius: 50%;
border: 16px solid rgba(183, 223, 247, 0.9);
z-index: -1;
}
.cta-elder::after {
left: -30px;
top: 84px;
width: 214px;
height: 132px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.7);
transform: rotate(-18deg);
}
.cta-leaf {
width: 40px;
height: 84px;
border-radius: 999px 999px 0 999px;
background: rgba(145, 214, 247, 0.72);
transform-origin: bottom center;
}
.cta-leaf-one { left: 248px; top: 56px; transform: rotate(32deg); }
.cta-leaf-two { left: 286px; top: 126px; transform: rotate(-18deg); }
.cta-leaf-three { left: 334px; top: 188px; transform: rotate(28deg); }
.cta-leaf-four { left: 246px; top: 244px; transform: rotate(-32deg); }
.cta-leaf::after {
content: "";
position: absolute;
left: 50%;
top: 10px;
width: 3px;
height: 56px;
background: rgba(38, 112, 148, 0.34);
transform: translateX(-50%);
}
/* ════════════════════════════════════════
客戶評價 — plumbing.framer.media style
════════════════════════════════════════ */
.lp-testimonial-section {
background: #eef2fb;
padding: 96px 0 104px;
}
.lp-testimonial-header {
text-align: center;
margin-bottom: 56px;
}
.lp-testimonial-heading {
font-size: clamp(2rem, 4.5vw, 3.2rem);
font-weight: 900;
color: #0a0f1e;
letter-spacing: -.04em;
margin: 0 0 16px;
line-height: 1.1;
}
.lp-testimonial-sub {
font-size: 1.05rem;
color: #5a6a8a;
max-width: 520px;
margin: 0 auto;
line-height: 1.65;
}
/* 無限橫向捲動 marquee */
.lp-testimonial-marquee-wrap {
overflow: hidden;
/* 左右淡出遮罩 */
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.lp-testimonial-track {
display: flex;
gap: 24px;
width: max-content;
animation: marqueeLeft 60s linear infinite;
}
.lp-testimonial-track:hover { animation-play-state: paused; }
@keyframes marqueeLeft {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
/* ── 真實照顧故事卡 ─────────────────────────────────────── */
.lp-story-eyebrow {
display: inline-block;
padding: 6px 14px;
background: rgba(124, 58, 237, .1);
color: #7c3aed;
font-size: .75rem;
font-weight: 800;
letter-spacing: .12em;
border-radius: 99px;
margin-bottom: 14px;
}
.lp-story-card {
background: #fff;
border-radius: 1.5rem;
display: flex;
flex-direction: column;
width: 380px;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(10,15,30,.08);
overflow: hidden;
transition: transform .25s, box-shadow .25s;
}
.lp-story-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 40px rgba(10,15,30,.16);
}
.lp-story-card .story-img {
width: 100%;
aspect-ratio: 16 / 11;
background-size: cover;
background-position: center;
background-color: #cbd5e1;
}
.lp-story-card .story-body {
padding: 22px 24px 26px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
}
.lp-story-card .story-tags {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 2px;
}
.lp-story-card .story-tag {
display: inline-block;
padding: 3px 10px;
font-size: .7rem;
font-weight: 700;
border-radius: 99px;
letter-spacing: .03em;
}
.lp-story-card .tag-home { background:#dbeafe; color:#1e40af; }
.lp-story-card .tag-nurse { background:#dcfce7; color:#166534; }
.lp-story-card .tag-aid { background:#fef3c7; color:#92400e; }
.lp-story-card .tag-companion { background:#fce7f3; color:#9d174d; }
.lp-story-card .tag-bridge { background:#e0e7ff; color:#3730a3; }
.lp-story-card .tag-online { background:#cffafe; color:#155e75; }
.lp-story-card .tag-respite { background:#ede9fe; color:#5b21b6; }
.lp-story-card .tag-family { background:#ffedd5; color:#9a3412; }
.lp-story-card .tag-rehab { background:#fee2e2; color:#991b1b; }
.lp-story-card .story-title {
font-size: 1.15rem;
font-weight: 900;
color: #0a0f1e;
line-height: 1.4;
margin: 0 0 4px;
letter-spacing: -.01em;
}
.lp-story-card .story-text {
font-size: .88rem;
color: #475569;
line-height: 1.7;
margin: 0;
flex: 1;
}
.lp-story-card .story-outcome {
font-size: .82rem;
font-weight: 700;
color: #7c3aed;
margin: 8px 0 0;
padding-top: 12px;
border-top: 1px dashed #e2e8f0;
font-style: italic;
}
.lp-tcard {
background: #fff;
border-radius: 1.25rem;
padding: 32px 28px 28px;
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: 0 2px 12px rgba(10,15,30,.06);
width: 340px;
flex-shrink: 0;
transition: box-shadow .2s;
}
.lp-tcard:hover {
box-shadow: 0 10px 32px rgba(10,15,30,.12);
}
.lp-tcard-stars {
color: #f59e0b;
font-size: 1.1rem;
letter-spacing: .08em;
}
.lp-tcard-quote {
font-size: .95rem;
color: #374151;
line-height: 1.75;
margin: 0;
flex: 1;
}
.lp-tcard-footer {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
border-top: 1px solid #f1f5f9;
padding-top: 16px;
}
.lp-tcard-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #1535a8, #3b82f6);
color: #fff;
font-size: .95rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lp-tcard-name {
display: block;
font-size: .9rem;
font-weight: 800;
color: #0a0f1e;
}
.lp-tcard-platform {
display: block;
font-size: .75rem;
color: #9ca3af;
margin-top: 1px;
}
@media (max-width: 600px) {
.lp-testimonial-section { padding: 64px 0 72px; }
.lp-tcard { width: 280px; }
.lp-story-card { width: 300px; }
.lp-story-card .story-body { padding: 18px 18px 22px; }
.lp-story-card .story-title { font-size: 1.05rem; }
}
/* ════════════════════════════════════════
隱私權政策 — plumbing.framer.media style
════════════════════════════════════════ */
.lp-privacy-section {
background: #f8fafc;
padding: 96px 0 104px;
border-top: 1px solid #e2e8f0;
}
.lp-privacy-header {
text-align: center;
margin-bottom: 56px;
}
.lp-privacy-badge {
display: inline-block;
font-size: .7rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #1535a8;
background: rgba(21,53,168,.08);
border: 1px solid rgba(21,53,168,.18);
border-radius: 999px;
padding: 4px 14px;
margin-bottom: 18px;
}
.lp-privacy-heading {
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 900;
color: #0a0f1e;
letter-spacing: -.04em;
margin: 0 0 16px;
line-height: 1.1;
}
.lp-privacy-lead {
font-size: 1rem;
color: #5a6a8a;
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}
/* 主體：左側卡片格 + 右側聯絡卡 */
.lp-privacy-body {
display: flex;
gap: 24px;
align-items: flex-start;
overflow: hidden;
max-height: 0;
transition: max-height .45s ease;
}
.lp-privacy-body.is-open {
max-height: 1200px;
}
.lp-privacy-grid {
flex: 1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.lp-privacy-card {
background: #fff;
border: 1px solid #e8edf5;
border-radius: 1rem;
padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color .2s, box-shadow .2s;
}
.lp-privacy-card:hover {
border-color: #c7d2fe;
box-shadow: 0 6px 24px rgba(21,53,168,.08);
}
.lp-privacy-icon {
width: 38px;
height: 38px;
border-radius: .55rem;
background: rgba(21,53,168,.07);
color: #1535a8;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lp-privacy-card h3 {
font-size: .9rem;
font-weight: 800;
color: #0a0f1e;
margin: 0;
}
.lp-privacy-card p {
font-size: .84rem;
color: #5a6a8a;
line-height: 1.7;
margin: 0;
}
/* 聯絡我們：右側欄 */
.lp-privacy-contact-card {
width: 280px;
flex-shrink: 0;
background: linear-gradient(160deg, #f0f4ff 0%, #e8f0fe 100%);
border: 1px solid #c7d2fe;
border-radius: 1rem;
padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 4px 20px rgba(21,53,168,.1);
position: sticky;
top: 80px;
}
.lp-privacy-contact-card h3 {
font-size: .95rem;
font-weight: 800;
color: #0a0f1e;
margin: 0;
}
.lp-privacy-contact-card p {
font-size: .82rem;
color: #5a6a8a;
line-height: 1.65;
margin: 0;
}
/* 展開按鈕 */
.lp-privacy-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 20px;
padding: 10px 22px;
background: #fff;
border: 1.5px solid #c7d2fe;
border-radius: 999px;
font-size: .88rem;
font-weight: 700;
color: #1535a8;
cursor: pointer;
transition: background .18s, border-color .18s;
}
.lp-privacy-toggle:hover {
background: #f0f4ff;
border-color: #1535a8;
}
.lp-privacy-toggle-chevron {
transition: transform .3s ease;
}
.lp-privacy-toggle[aria-expanded="true"] .lp-privacy-toggle-chevron {
transform: rotate(180deg);
}
@media (max-width: 900px) {
.lp-privacy-body { flex-direction: column; }
.lp-privacy-contact-card { width: 100%; position: static; }
.lp-privacy-grid { grid-template-columns: 1fr; }
}
.lp-privacy-contact-list {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
border-top: 1px solid rgba(21,53,168,.12);
padding-top: 12px;
}
.lp-privacy-contact-list li {
font-size: .82rem;
color: #374151;
display: flex;
gap: 8px;
}
.lp-privacy-contact-list li span {
font-weight: 700;
color: #1535a8;
white-space: nowrap;
}
@media (max-width: 900px) {
.lp-privacy-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.lp-privacy-grid { grid-template-columns: 1fr; }
.lp-privacy-section { padding: 64px 0 72px; }
}
.how-it-works-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
}
.flow-card {
display: grid;
gap: 14px;
justify-items: center;
text-align: center;
padding: 20px 16px;
}
.flow-card h3,
.flow-card p {
margin: 0;
}
.flow-card p {
color: var(--muted);
line-height: 1.65;
}
.flow-oval {
position: relative;
width: 100%;
min-height: 220px;
border: 3px solid rgba(99, 199, 255, 0.9);
border-radius: 999px;
background:
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.94), rgba(227, 245, 255, 0.86));
overflow: hidden;
}
.flow-reference-art {
position: absolute;
inset: 18px;
width: calc(100% - 36px);
height: calc(100% - 36px);
object-fit: contain;
object-position: center;
opacity: 0.9;
}
.flow-number {
position: absolute;
left: 18px;
bottom: 20px;
font-size: 4.25rem;
font-weight: 900;
line-height: 1;
color: #35bfd9;
}
.flow-illustration,
.flow-phone-screen,
.flow-person-mini,
.flow-doctor-mini,
.flow-wheelchair,
.flow-caregiver,
.flow-calendar-mini,
.flow-wallet-mini {
position: absolute;
}
.flow-illustration {
inset: 18px;
}
.flow-card-one .flow-illustration,
.flow-card-two .flow-illustration,
.flow-card-three .flow-illustration {
opacity: 0.12;
}
.flow-phone-screen {
left: 50%;
top: 28px;
width: 78px;
height: 136px;
border: 3px solid var(--line);
border-radius: 24px;
background: linear-gradient(180deg, #ffffff 0%, #7dd8ff 58%, #d7b8ff 100%);
transform: translateX(-50%) rotate(-8deg);
}
.flow-phone-screen::before {
content: "";
position: absolute;
top: 8px;
left: 50%;
width: 28px;
height: 8px;
border-radius: 999px;
background: var(--line);
transform: translateX(-50%);
}
.phone-match .flow-phone-screen {
transform: translateX(-50%);
}
.phone-manage .flow-phone-screen {
transform: translateX(-50%) rotate(6deg);
}
.flow-person-mini,
.flow-doctor-mini,
.flow-caregiver {
width: 34px;
height: 92px;
}
.flow-person-mini::before,
.flow-doctor-mini::before,
.flow-caregiver::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: 26px;
height: 26px;
border: 3px solid var(--line);
border-radius: 50%;
background: #ffd8a8;
transform: translateX(-50%);
}
.flow-person-mini::after,
.flow-doctor-mini::after,
.flow-caregiver::after {
content: "";
position: absolute;
left: 50%;
top: 28px;
width: 34px;
height: 58px;
border: 3px solid var(--line);
border-radius: 18px;
transform: translateX(-50%);
}
.flow-person-mini {
left: 64%;
top: 34px;
}
.flow-person-mini::after {
background: #d8f1ff;
}
.flow-doctor-mini {
left: 50%;
top: 40px;
transform: translateX(-50%);
}
.flow-doctor-mini::after {
background: #ffffff;
}
.flow-caregiver {
right: 26px;
bottom: 20px;
}
.flow-caregiver::after {
background: #35bfd9;
}
.flow-wheelchair {
left: 42px;
bottom: 28px;
width: 88px;
height: 88px;
border-radius: 50%;
border: 3px solid #ffbf29;
background:
radial-gradient(circle at center, transparent 0 24px, #ffffff 24px 25px, transparent 25px),
transparent;
}
.flow-wheelchair::before {
content: "";
position: absolute;
left: 26px;
top: -28px;
width: 32px;
height: 76px;
border: 3px solid var(--line);
border-radius: 18px;
background: #ffd166;
}
.flow-wheelchair::after {
content: "";
position: absolute;
right: -8px;
top: 30px;
width: 22px;
height: 3px;
background: var(--line);
}
.flow-calendar-mini,
.flow-wallet-mini {
border: 3px solid var(--line);
background: #ffffff;
}
.flow-calendar-mini {
right: 22px;
top: 40px;
width: 56px;
height: 50px;
border-radius: 14px;
background:
linear-gradient(180deg, #ffd166 0 14px, #ffffff 14px 100%);
}
.flow-wallet-mini {
left: 26px;
bottom: 30px;
width: 58px;
height: 40px;
border-radius: 12px;
background: #35bfd9;
}
.flow-card-one .flow-oval,
.flow-card-two .flow-oval,
.flow-card-three .flow-oval,
.flow-card-four .flow-oval {
box-shadow: inset 0 -10px 0 rgba(99, 199, 255, 0.08);
}
.service-storyboard {
display: none;
}
.service-section {
margin-top: 20px;
}
.service-section-head {
display: grid;
gap: 8px;
margin-bottom: 18px;
}
.service-section-head h3,
.service-section-head p {
margin: 0;
}
.service-section-head h3 {
color: #102f52;
font-size: 2rem;
font-weight: 900;
}
.service-section-head p {
color: #304966;
font-size: 1.05rem;
font-weight: 700;
}
.service-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
}
.service-card {
display: grid;
gap: 12px;
padding: 22px;
border: 1px solid rgba(39, 93, 132, 0.14);
border-radius: 28px;
background: #ffffff;
text-align: left;
cursor: pointer;
box-shadow: 0 18px 30px rgba(65, 109, 142, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.service-card:hover {
transform: translateY(-6px);
box-shadow: 0 24px 40px rgba(65, 109, 142, 0.14);
}
.service-card.active {
border-color: #1f4f82;
box-shadow: 0 18px 34px rgba(55, 136, 181, 0.18);
}
.service-card-icon {
display: inline-grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.55);
font-size: 2rem;
}
.service-card h3,
.service-card p {
margin: 0;
}
.service-card h3 {
color: #102f52;
font-size: 1.5rem;
font-weight: 900;
line-height: 1.25;
}
.service-card p {
color: #304966;
font-size: 0.98rem;
font-weight: 700;
line-height: 1.7;
}
.service-card-meta,
.service-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
}
.service-card-rating,
.service-card-price,
.service-card-badge,
.service-card-link {
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 0 12px;
border-radius: 999px;
font-weight: 800;
}
.service-card-rating,
.service-card-price {
background: rgba(255, 255, 255, 0.58);
color: #183153;
}
.service-card-badge {
background: rgba(28, 168, 124, 0.14);
color: #147a58;
}
.service-card-link {
background: rgba(24, 49, 83, 0.08);
color: #183153;
}
.service-home { background: linear-gradient(180deg, #fff3a1, #ffe27a); }
.service-nursing { background: linear-gradient(180deg, #ffd2e5, #ffb9d6); }
.service-rehab { background: linear-gradient(180deg, #cff4ff, #a5ebff); }
.service-respite { background: linear-gradient(180deg, #ffe7bf, #ffd2a0); }
.service-daycare { background: linear-gradient(180deg, #dff5bf, #c4ed95); }
.service-transport { background: linear-gradient(180deg, #e1d7ff, #c9b9ff); }
.service-meal { background: linear-gradient(180deg, #fff0cf, #ffd9a8); }
.service-assistive { background: linear-gradient(180deg, #e7edf7, #d4deec); }
.service-smart { background: linear-gradient(180deg, #d8fff6, #bdf5e7); }
.map-explorer {
background:
linear-gradient(180deg, #fffdf7, #eef9ff),
radial-gradient(circle at 16% 12%, rgba(255, 183, 3, 0.18), transparent 20%);
}
.map-editor-toolbar,
.map-style-sidebar,
.floating-summary,
.region-summary {
border: 3px solid var(--line);
box-shadow: 0 8px 0 rgba(24, 49, 83, 0.1);
background: #ffffff;
}
.toolbar-badge {
border: 3px solid var(--line);
background: linear-gradient(180deg, #ffd64f, #ffb703);
color: #5f4300;
}
.toolbar-tab.active {
background: #63c7ff;
color: #10365c;
}
.style-option,
.layer-toggle {
background: #f7fbff;
}
.style-option.active {
border-color: var(--line);
box-shadow: 0 8px 0 rgba(99, 199, 255, 0.2);
}
.layer-toggle input {
accent-color: #58cc02;
}
.city-chip {
font-weight: 800;
}
.city-chip.region-north { background: #63c7ff; }
.city-chip.region-central { background: #ffd166; color: #5d4300; }
.city-chip.region-south { background: #7fe33d; color: #173500; }
.city-chip.region-east { background: #a991ff; }
.city-chip.region-island { background: #ff9ac5; }
.map-stage,
.taiwan-stage {
background:
radial-gradient(circle at 50% 18%, rgba(99, 199, 255, 0.26), transparent 24%),
linear-gradient(180deg, #cfefff 0%, #e7f8ff 56%, #fff6d9 100%);
}
.map-stage::before {
border: 3px dashed rgba(24, 49, 83, 0.24);
}
.county-node span,
.island-card span {
border: 3px solid var(--line);
color: var(--ink);
background: #ffffff;
box-shadow: 0 6px 0 rgba(24, 49, 83, 0.12);
}
.county-node.active span,
.island-card.active span {
background: #7fe33d;
color: #173500;
}
.filter-card {
border-color: rgba(39, 93, 132, 0.14);
background: linear-gradient(180deg, #ffffff, #f8fbfe);
box-shadow: 0 22px 42px rgba(65, 109, 142, 0.08);
}
.filter-pills span,
.caregiver-chip,
.badge {
background: #ffffff;
font-weight: 700;
}
.listing-card {
position: relative;
overflow: hidden;
gap: 16px;
border-color: rgba(39, 93, 132, 0.14);
background: linear-gradient(180deg, #ffffff, #fbfdff);
box-shadow: 0 18px 34px rgba(65, 109, 142, 0.08);
}
.listing-card::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 7px;
background: linear-gradient(180deg, #d6ecf8, #c5dff0);
}
.listing-home::after { background: #ffd64f; }
.listing-nursing::after { background: #ff7eb6; }
.listing-rehab::after { background: #63c7ff; }
.listing-transport::after { background: #8f7cff; }
.listing-card.active {
border-color: rgba(53, 144, 190, 0.28);
background: linear-gradient(180deg, #ffffff, #f2f9fd);
box-shadow: 0 22px 40px rgba(55, 136, 181, 0.14);
}
.listing-illustration {
display: grid;
place-items: center;
}
.provider-logo-badge {
display: grid;
place-items: center;
width: 76px;
height: 76px;
border: 3px solid #1f5c78;
border-radius: 50%;
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58) 24%, transparent 25%),
linear-gradient(180deg, #f6fffe 0%, #dff4f3 100%);
box-shadow: 0 14px 26px rgba(54, 117, 146, 0.14);
color: #124765;
font-family: "Noto Sans TC", sans-serif;
font-size: 1.55rem;
font-weight: 900;
letter-spacing: 0.04em;
line-height: 1;
position: relative;
z-index: 0;
}
.provider-logo-badge::after {
content: "";
position: absolute;
width: 56px;
height: 56px;
border: 2px solid rgba(31, 92, 120, 0.16);
border-radius: 50%;
background: rgba(255, 255, 255, 0.28);
z-index: -1;
}
.provider-logo-badge::before {
content: "";
position: absolute;
inset: 7px;
border-radius: 50%;
background:
linear-gradient(160deg, rgba(53, 191, 217, 0.16), rgba(31, 201, 169, 0.08));
z-index: -2;
}
.provider-logo-badge-detail {
width: 88px;
height: 88px;
font-size: 1.75rem;
}
.provider-logo-badge-detail::after {
width: 66px;
height: 66px;
}
.illustration-home .provider-logo-badge {
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58) 24%, transparent 25%),
linear-gradient(180deg, #f7fffc, #dff4ec);
}
.illustration-nursing .provider-logo-badge {
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58) 24%, transparent 25%),
linear-gradient(180deg, #f7ffff, #d7f0f3);
}
.illustration-rehab .provider-logo-badge {
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58) 24%, transparent 25%),
linear-gradient(180deg, #f2fcff, #d6eef7);
}
.illustration-transport .provider-logo-badge {
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58) 24%, transparent 25%),
linear-gradient(180deg, #f3fbfc, #d9eef0);
}
.illustration-respite .provider-logo-badge {
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58) 24%, transparent 25%),
linear-gradient(180deg, #fafffb, #e4f4eb);
}
.illustration-daycare .provider-logo-badge {
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58) 24%, transparent 25%),
linear-gradient(180deg, #f5fffb, #dff4ea);
}
.illustration-assistive .provider-logo-badge {
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58) 24%, transparent 25%),
linear-gradient(180deg, #f5fbfd, #ddecef);
}
.illustration-smart .provider-logo-badge {
background:
radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58) 24%, transparent 25%),
linear-gradient(180deg, #f2fffd, #d6f3ef);
}
.listing-top,
.listing-bottom,
.summary-list,
.badge-row {
position: relative;
z-index: 1;
}
.provider-card,
.side-card,
.booking-card,
.metric-card,
.doc-card,
.ai-result {
background: #ffffff;
}
.provider-tag {
border: 3px solid var(--line);
background: #dff6bf;
color: #23461d;
font-weight: 800;
}
.calendar-day.active,
.step.active {
background: #7fe33d;
color: #173500;
}
.review-list blockquote {
border-left: 6px solid #63c7ff;
background: #f5fbff;
color: var(--ink);
}
.ai-result {
border: 3px dashed var(--line);
}
.gm-marker-card {
border: 3px solid var(--line);
border-radius: 18px;
box-shadow: 0 8px 0 rgba(24, 49, 83, 0.14);
}
.gm-marker-card.active {
border-color: var(--line);
box-shadow: 0 10px 0 rgba(88, 204, 2, 0.2);
}
@media (max-width: 960px) {
.hero-trust-row,
.service-storyboard,
.cartoon-scene {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.how-it-works-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.testimonial-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.hero-trust-row,
.service-storyboard,
.cartoon-scene {
grid-template-columns: 1fr;
}
.how-it-works-grid {
grid-template-columns: 1fr;
}
.decor-illustration-card {
min-height: 220px;
}
}
.task-mode-shell {
display: grid;
gap: 20px;
}
.task-mode-tabs,
.task-post-grid,
.task-post-actions,
.task-mode-shell-inner,
.task-booking-actions,
.tasker-status-actions {
display: grid;
gap: 14px;
}
.task-mode-tabs {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-bottom: 18px;
}
.task-mode-tab {
padding: 14px 18px;
border: 3px solid var(--line);
border-radius: 999px;
background: #ffffff;
box-shadow: 0 6px 0 rgba(24, 49, 83, 0.08);
font: inherit;
font-weight: 800;
cursor: pointer;
}
.task-mode-tab.active {
background: #dff6bf;
}
.task-mode-view {
display: none;
}
.task-mode-view.active {
display: grid;
gap: 20px;
}
.task-post-card,
.task-booking-card {
padding: 20px;
border: 3px solid var(--line);
border-radius: 28px;
background: linear-gradient(180deg, #fffdf7, #f6fbff);
box-shadow: 0 10px 0 rgba(24, 49, 83, 0.1);
}
.task-post-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.task-post-full {
grid-column: 1 / -1;
}
.task-post-grid textarea {
width: 100%;
padding: 16px;
border: 3px solid var(--line);
border-radius: 20px;
font: inherit;
resize: vertical;
}
.task-post-actions {
grid-template-columns: auto 1fr;
align-items: center;
}
.task-post-status {
color: var(--muted);
font-weight: 700;
}
.task-mode-shell-inner {
grid-template-columns: 1.1fr 0.9fr;
}
.task-board,
.tasker-mobile,
.task-ticket,
.tasker-top-card,
.feedback-sheet,
.task-ticket-header,
.task-pill-row,
.tasker-identity,
.tasker-stat-grid,
.tasker-section,
.feedback-head,
.feedback-scale,
.feedback-reasons {
display: grid;
gap: 14px;
}
.task-ticket,
.tasker-top-card,
.feedback-sheet {
border: 3px solid var(--line);
border-radius: 28px;
background: #ffffff;
box-shadow: 0 10px 0 rgba(24, 49, 83, 0.12);
}
.task-ticket {
padding: 20px;
}
.task-ticket h3,
.feedback-sheet h3,
.tasker-top-card h3 {
margin: 0;
}
.task-ticket p,
.tasker-top-card p,
.feedback-head span {
margin: 0;
color: var(--muted);
line-height: 1.6;
}
.task-ticket-header {
grid-template-columns: 1fr auto;
align-items: center;
}
.task-type-tag,
.task-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border: 3px solid var(--line);
border-radius: 999px;
background: #ffffff;
font-weight: 800;
}
.task-pill-row {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.task-home-ticket { background: linear-gradient(180deg, #fff5bc, #fffdf3); }
.task-transport-ticket { background: linear-gradient(180deg, #e9ddff, #fbf9ff); }
.task-rehab-ticket { background: linear-gradient(180deg, #d6f5ff, #f9fdff); }
.tasker-mobile {
align-content: start;
}
.tasker-top-card,
.feedback-sheet {
padding: 20px;
}
.tasker-top-card {
background: linear-gradient(180deg, #ffffff, #f5fbff);
}
.tasker-identity {
grid-template-columns: 80px 1fr;
align-items: center;
}
.tasker-avatar {
width: 80px;
height: 80px;
border: 3px solid var(--line);
border-radius: 24px;
background:
radial-gradient(circle at 50% 34%, #ffd8a8 0 18px, transparent 19px),
linear-gradient(180deg, #3c2f2f 0 18px, transparent 19px),
linear-gradient(180deg, #f1f7ff, #dfefff);
box-shadow: inset 0 -8px 0 rgba(24, 49, 83, 0.06);
}
.tasker-stat-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tasker-stat-grid div {
padding: 14px;
border: 3px solid var(--line);
border-radius: 20px;
background: #ffffff;
text-align: center;
box-shadow: 0 6px 0 rgba(24, 49, 83, 0.08);
}
.tasker-stat-grid strong,
.task-price-bar strong {
display: block;
font-size: 1.25rem;
}
.tasker-status-actions {
grid-template-columns: auto auto;
align-items: center;
}
.task-status-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 14px;
border: 3px solid var(--line);
border-radius: 999px;
font-weight: 800;
background: #ffffff;
box-shadow: 0 5px 0 rgba(24, 49, 83, 0.08);
}
.task-status-open {
background: #fff3a1;
}
.task-status-claimed {
background: #dff6bf;
}
.tasker-stat-grid span {
color: var(--muted);
font-size: 0.86rem;
font-weight: 700;
}
.tasker-section {
padding-top: 6px;
}
.task-price-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px;
border: 3px solid var(--line);
border-radius: 22px;
background: linear-gradient(180deg, #fff7d8, #ffffff);
}
.feedback-sheet {
background: linear-gradient(180deg, #ffffff, #f9fcff);
}
.feedback-progress {
height: 10px;
border: 3px solid var(--line);
border-radius: 999px;
background: #e8eef5;
overflow: hidden;
}
.feedback-progress span {
display: block;
width: 58%;
height: 100%;
background: linear-gradient(90deg, #21b7a8, #58cc02);
}
.feedback-scale {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feedback-option,
.feedback-reason,
.feedback-input {
border: 3px solid var(--line);
font: inherit;
}
.feedback-option {
display: grid;
justify-items: center;
gap: 10px;
padding: 18px 12px;
border-radius: 20px;
background: #ffffff;
cursor: pointer;
box-shadow: 0 6px 0 rgba(24, 49, 83, 0.08);
}
.feedback-option.active {
background: #dff6bf;
}
.emoji-face {
width: 52px;
height: 52px;
border: 3px solid var(--line);
border-radius: 50%;
position: relative;
background-color: #ffffff;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
}
.emoji-face::before,
.emoji-face::after {
content: "";
position: absolute;
top: 16px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--line);
}
.emoji-face::before { left: 14px; }
.emoji-face::after { right: 14px; }
.face-bad {
box-shadow: inset 0 -8px 0 rgba(255, 126, 182, 0.12);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath d='M16 36c2-4 6-6 10-6s8 2 10 6' fill='none' stroke='%23183153' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.face-okay {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath d='M16 33h20' fill='none' stroke='%23183153' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.face-good {
box-shadow: inset 0 -8px 0 rgba(88, 204, 2, 0.12);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52' viewBox='0 0 52 52'%3E%3Cpath d='M16 31c3 4 6 6 10 6s7-2 10-6' fill='none' stroke='%23183153' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}
.feedback-reasons {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feedback-reason {
padding: 10px 12px;
border-radius: 999px;
background: #ffffff;
cursor: pointer;
font-weight: 700;
box-shadow: 0 5px 0 rgba(24, 49, 83, 0.08);
}
.feedback-reason.active {
background: #dff6bf;
}
.feedback-input {
width: 100%;
padding: 16px;
border-radius: 20px;
background: #ffffff;
color: var(--ink);
resize: vertical;
}
.feedback-next {
justify-self: stretch;
}
.task-booking-actions {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: 10px;
}
@media (max-width: 960px) {
.task-mode-shell-inner,
.task-post-grid,
.task-booking-actions {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.task-mode-tabs,
.task-pill-row,
.tasker-stat-grid,
.feedback-scale,
.feedback-reasons {
grid-template-columns: 1fr;
}
.tasker-identity {
grid-template-columns: 1fr;
}
.task-price-bar {
flex-direction: column;
align-items: stretch;
}
.task-post-actions,
.tasker-status-actions {
grid-template-columns: 1fr;
}
}
.usage-banner {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin: 0 0 18px;
padding: 10px 16px;
border: 3px solid var(--line);
border-radius: 999px;
background: #fff7e7;
box-shadow: 0 6px 0 rgba(24, 49, 83, 0.08);
font-weight: 800;
}
.usage-badge {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 3px solid var(--line);
border-radius: 50%;
background: #dff6bf;
}
.official-note-banner {
margin: 0 0 18px;
padding: 14px 18px;
border: 3px solid var(--line);
border-radius: 22px;
background: linear-gradient(180deg, #fff7d8, #fffdf5);
box-shadow: 0 6px 0 rgba(24, 49, 83, 0.08);
}
.official-note-banner p {
margin: 0;
color: var(--ink);
font-weight: 800;
line-height: 1.7;
text-align: center;
}
.search-bar-usage {
grid-template-columns: 1fr 1fr 1fr auto;
padding: 18px;
border: 1px solid rgba(39, 93, 132, 0.14);
border-radius: 26px;
background: linear-gradient(180deg, #ffffff, #f7fbfe);
box-shadow: 0 18px 38px rgba(65, 109, 142, 0.08);
}
.usage-label {
font-size: 0.9rem;
font-weight: 800;
}
.location-select-group {
display: flex;
gap: 8px;
}
.location-select-field {
flex: 1;
min-width: 0;
display: grid;
gap: 6px;
color: var(--ink);
}
.location-select-field span {
font-size: 0.76rem;
font-weight: 800;
color: var(--muted);
}
.location-select-group select {
width: 100%;
min-width: 0;
}
.usage-filter-card {
display: grid;
gap: 16px;
padding: 20px;
border: 1px solid rgba(39, 93, 132, 0.14);
border-radius: 28px;
background: linear-gradient(180deg, #ffffff, #f7fbfe);
box-shadow: 0 20px 36px rgba(65, 109, 142, 0.08);
}
.usage-filter-head,
.usage-filter-stack {
display: grid;
gap: 10px;
}
.usage-filter-item {
display: grid;
gap: 8px;
color: var(--ink);
font-weight: 800;
}
.usage-check-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 1px solid rgba(39, 93, 132, 0.14);
border-radius: 18px;
background: #ffffff;
box-shadow: 0 8px 18px rgba(65, 109, 142, 0.06);
color: var(--ink);
font-weight: 800;
}
.usage-check-item input {
width: 18px;
height: 18px;
accent-color: #58cc02;
}
.usage-apply {
width: 100%;
}
.listing-column {
display: grid;
gap: 16px;
align-content: start;
}
.listing-column.is-floating-empty {
position: sticky;
bottom: 14px;
z-index: 8;
grid-column: 1 / -1;
grid-template-columns: repeat(2, minmax(0, 260px));
justify-content: center;
gap: 10px;
margin-top: -6px;
}
.caregiver-detail-panel,
.listing-panel {
align-content: start;
}
.listing-column.is-floating-empty .caregiver-detail-panel,
.listing-column.is-floating-empty .listing-panel {
position: static;
}
.caregiver-detail-panel {
position: sticky;
top: 24px;
}
.detail-card,
.detail-empty {
display: grid;
gap: 14px;
padding: 20px;
border: 1px solid rgba(39, 93, 132, 0.14);
border-radius: 28px;
background: #ffffff;
box-shadow: 0 24px 44px rgba(65, 109, 142, 0.1);
}
.listing-column.is-floating-empty .detail-empty,
.listing-column.is-floating-empty .listing-card {
gap: 6px;
padding: 10px 12px;
border-radius: 16px;
box-shadow: 0 12px 22px rgba(65, 109, 142, 0.12);
background: rgba(255, 255, 255, 0.96);
}
.listing-column.is-floating-empty .detail-empty strong,
.listing-column.is-floating-empty .listing-card h3 {
font-size: 0.92rem;
line-height: 1.35;
}
.listing-column.is-floating-empty .detail-empty p,
.listing-column.is-floating-empty .listing-card p {
margin: 0;
font-size: 0.8rem;
line-height: 1.45;
}
.detail-section-head,
.detail-selector {
display: grid;
gap: 8px;
}
.detail-section-head h3,
.detail-section-head p,
.detail-selector span {
margin: 0;
}
.detail-eyebrow {
color: #3f90cf;
font-size: 0.85rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.detail-selector span {
font-weight: 800;
color: #183153;
}
.detail-selector select {
min-height: 52px;
padding: 0 16px;
border-radius: 18px;
border: 1px solid rgba(39, 93, 132, 0.18);
background: linear-gradient(180deg, #ffffff, #f7fbfe);
color: #183153;
font: inherit;
}
.detail-top {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 14px;
align-items: start;
}
.detail-actions {
display: flex;
gap: 14px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.detail-avatar {
flex: 0 0 auto;
}
.detail-copy {
min-width: 0;
display: grid;
gap: 8px;
}
.detail-copy h3,
.detail-copy p,
.detail-quote {
margin: 0;
}
.detail-copy p,
.detail-quote,
.detail-price span,
.detail-price em,
.detail-empty p {
color: var(--muted);
}
.detail-price {
display: grid;
justify-items: end;
align-self: start;
text-align: right;
}
.detail-price strong {
font-size: 1.6rem;
}
.detail-price em {
font-style: normal;
}
.detail-info-grid {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
@media (max-width: 640px) {
.listing-column.is-floating-empty {
grid-template-columns: 1fr;
bottom: 10px;
}
.detail-top {
grid-template-columns: 1fr;
}
.detail-price {
justify-items: start;
text-align: left;
}
}
.detail-home { border-color: #dcae00; }
.detail-nursing { border-color: #df6e9a; }
.detail-rehab { border-color: #2fa8db; }
.detail-transport { border-color: #7b69d9; }
.listing-card {
grid-template-columns: 1fr;
gap: 14px;
}
.listing-media,
.usage-listing-top,
.usage-listing-bottom,
.usage-rating-row,
.usage-trust-row {
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
.listing-media {
align-items: flex-start;
}
.listing-rate {
margin-left: auto;
display: grid;
justify-items: end;
text-align: right;
}
.listing-rate span,
.listing-rate em {
color: var(--muted);
font-size: 0.78rem;
font-style: normal;
}
.listing-rate strong {
font-size: 1.8rem;
line-height: 1;
}
.star-row {
color: #ffb703;
font-weight: 900;
letter-spacing: 0.08em;
}
.trust-inline {
color: #2b9348;
font-weight: 800;
}
.usage-quote {
margin: 0;
color: var(--muted);
line-height: 1.6;
}
.contact-button {
margin-left: auto;
padding: 12px 24px;
border: 3px solid var(--line);
border-radius: 999px;
background: #163c69;
color: #ffffff;
font: inherit;
font-weight: 800;
box-shadow: 0 6px 0 rgba(24, 49, 83, 0.12);
cursor: pointer;
}
@media (max-width: 960px) {
.search-bar-usage {
grid-template-columns: 1fr;
}
.caregiver-detail-panel {
position: static;
}
}
.service-booking-selector {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin-bottom: 22px;
}
.selector-panel,
.service-choice,
.date-choice,
.time-choice,
.summary-choice-card,
.time-slot-pill {
border: 3px solid var(--line);
box-shadow: 0 8px 0 rgba(24, 49, 83, 0.08);
}
.selector-panel {
display: grid;
gap: 16px;
padding: 20px;
border-radius: 28px;
background: #ffffff;
}
.selector-head {
display: grid;
gap: 4px;
}
.selector-head span,
.service-choice-body em,
.summary-choice-copy p,
.timeslot-label {
color: var(--muted);
font-style: normal;
}
.selector-head.compact {
padding-top: 8px;
}
.service-choice {
display: grid;
grid-template-columns: 52px 1fr;
gap: 14px;
align-items: center;
padding: 14px;
border-radius: 22px;
background: #ffffff;
cursor: pointer;
text-align: left;
}
.service-choice.active {
background: #f2fbeb;
}
.service-choice-icon {
width: 52px;
height: 52px;
border: 3px solid var(--line);
border-radius: 18px;
background-color: #ffffff;
background-repeat: no-repeat;
background-position: center;
background-size: 30px 30px;
}
.service-choice-home .service-choice-icon {
background-image: url("example/定價 - 致敬_files/nav-caregiver.svg"), linear-gradient(180deg, #fff3a1, #ffd64f);
}
.service-choice-nursing .service-choice-icon {
background-image: url("example/定價 - 致敬_files/nav-nurse.svg"), linear-gradient(180deg, #ffd2e5, #ff8fb9);
}
.service-choice-rehab .service-choice-icon {
background-image: url("example/定價 - 致敬_files/nav-physiotherapist.svg"), linear-gradient(180deg, #cff4ff, #6ed8ff);
}
.service-choice-transport .service-choice-icon {
background-image: url("example/定價 - 致敬_files/nav-partners.svg"), linear-gradient(180deg, #e1d7ff, #9b87ff);
}
.service-choice-body {
display: grid;
gap: 4px;
}
.date-choice-grid,
.time-choice-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.calendar-picker-card {
display: grid;
gap: 10px;
padding: 16px 18px;
border: 3px solid var(--line);
border-radius: 22px;
background: #ffffff;
box-shadow: 0 8px 0 rgba(24, 49, 83, 0.08);
}
.calendar-picker-label {
color: var(--muted);
font-size: 0.92rem;
font-weight: 700;
}
.calendar-picker-input {
width: 100%;
border: 2px solid #d7e4ee;
border-radius: 18px;
padding: 14px 16px;
background: #f9fcff;
color: var(--ink);
font: inherit;
font-weight: 700;
}
.calendar-picker-input:focus {
outline: none;
border-color: #86b4d6;
box-shadow: 0 0 0 4px rgba(134, 180, 214, 0.18);
}
.time-choice-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.date-choice,
.time-choice {
display: grid;
gap: 4px;
place-items: center;
padding: 14px 10px;
border-radius: 18px;
background: #ffffff;
cursor: pointer;
font: inherit;
font-weight: 800;
}
.date-choice span {
color: var(--muted);
font-size: 0.8rem;
}
.date-choice strong {
font-size: 1.3rem;
}
.date-choice.active,
.time-choice.active {
background: #eef1ff;
}
.selector-summary {
background: linear-gradient(180deg, #ffffff, #f7fbff);
}
.summary-choice-card {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
padding: 16px;
border-radius: 24px;
background: #ffffff;
}
.summary-avatars {
display: flex;
align-items: center;
gap: 8px;
}
.summary-avatar {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 3px solid var(--line);
border-radius: 50%;
background: #163c69;
color: #ffffff;
font-weight: 800;
}
.summary-avatar-photo {
background:
radial-gradient(circle at 50% 36%, #ffd8a8 0 11px, transparent 12px),
linear-gradient(180deg, #4a332d 0 12px, transparent 13px),
linear-gradient(180deg, #f8fbff, #dfefff);
color: transparent;
}
.summary-avatar-photo.second {
background:
radial-gradient(circle at 50% 36%, #ffd8a8 0 11px, transparent 12px),
linear-gradient(180deg, #d07a4d 0 12px, transparent 13px),
linear-gradient(180deg, #fff7fb, #f2ddf2);
}
.summary-choice-copy p {
margin: 6px 0 0;
line-height: 1.6;
}
.timeslot-block {
display: grid;
gap: 10px;
}
.timeslot-label {
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
}
.time-slot-pill {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 16px;
border-radius: 18px;
background: #ffffff;
cursor: pointer;
font: inherit;
font-weight: 800;
}
.time-slot-pill em {
color: #2f55ff;
font-style: normal;
}
.time-slot-pill.active {
background: #eef1ff;
}
.privacy-section {
padding-top: 24px;
}
.privacy-heading {
max-width: 860px;
}
.section-lead {
margin: 12px 0 0;
color: var(--muted);
line-height: 1.8;
font-size: 1rem;
}
.privacy-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.privacy-card {
padding: 24px;
border: 1px solid rgba(24, 72, 118, 0.12);
border-radius: 28px;
background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
box-shadow: 0 18px 38px rgba(30, 71, 112, 0.08);
}
.privacy-card h3 {
margin: 0 0 12px;
font-size: 1.08rem;
}
.privacy-card p {
margin: 0;
color: var(--muted);
line-height: 1.8;
}
.privacy-card-contact {
background: linear-gradient(180deg, #f6fcff 0%, #eef8ff 100%);
}
.privacy-contact-list {
margin: 16px 0 0;
padding-left: 18px;
color: #163c69;
line-height: 1.9;
}
.site-footer {
margin-top: 36px;
border-top: 1px solid rgba(24, 72, 118, 0.12);
background: linear-gradient(180deg, #f8fcff 0%, #eef6fb 100%);
}
.site-footer-inner {
width: min(1240px, calc(100% - 40px));
margin: 0 auto;
padding: 40px 0 36px;
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 32px;
align-items: start;
}
.site-footer-col { min-width: 0; }
.site-footer-h {
margin: 0 0 14px;
font-size: 0.95rem;
font-weight: 800;
color: #163c69;
letter-spacing: .02em;
}
.site-footer-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 9px;
}
.site-footer-list a {
color: #475569;
font-size: .85rem;
text-decoration: none;
transition: color .15s;
}
.site-footer-list a:hover { color: #1f8fdc; }
/* 品牌欄 */
.site-footer-brand-col { display: grid; gap: 16px; }
.site-footer-brand strong {
display: inline-block;
margin-bottom: 6px;
font-size: 1.25rem;
color: #1a1a2e;
}
.site-footer-brand strong + .site-footer-tagline {
margin: 0;
color: var(--muted);
font-size: .9rem;
line-height: 1.6;
}
/* 公司資訊清單 */
.site-footer-corp {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 6px;
}
.site-footer-corp li {
display: flex;
align-items: baseline;
gap: 10px;
font-size: .82rem;
color: #475569;
line-height: 1.55;
}
.site-footer-corp .lab {
flex-shrink: 0;
width: 4.5em;
font-weight: 700;
color: #94A3B8;
font-size: .75rem;
}
.site-footer-corp a { color: #06b160; text-decoration: none; font-weight: 600; }
.site-footer-corp a:hover { color: #048a4b; }
.footer-contact-actions {
display: grid;
gap: 10px;
margin-top: 18px;
}
.footer-line-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
min-height: 46px;
padding: 0 20px;
border-radius: 999px;
background: #06C755;
color: #ffffff;
font-weight: 800;
font-size: .95rem;
text-decoration: none;
box-shadow: 0 6px 18px rgba(6,199,85,.35);
transition: transform .15s, box-shadow .15s;
}
.footer-line-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(6,199,85,.45);
}
.footer-contact-note {
color: var(--muted);
line-height: 1.8;
}
.footer-line-qr {
display: flex;
align-items: center;
gap: .75rem;
margin-top: .25rem;
padding: 10px 12px;
background: #fff;
border: 1px solid #E2E8F0;
border-radius: 12px;
width: fit-content;
}
.footer-line-qr img {
border-radius: 6px;
border: 2px solid #06C755;
display: block;
flex-shrink: 0;
}
.footer-line-qr span {
font-size: .78rem;
color: #475569;
line-height: 1.5;
font-weight: 600;
}
/* 浮動 LINE 按鈕 */
.line-float-wrap {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
z-index: 9999;
display: flex;
align-items: center;
gap: .4rem;
}
.line-float-btn {
display: flex;
align-items: center;
gap: .5rem;
padding: .6rem 1.1rem .6rem .75rem;
background: #06C755;
color: #fff;
font-weight: 700;
font-size: .9rem;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 4px 20px rgba(6,199,85,.4);
transition: transform .15s, box-shadow .15s;
}
.line-float-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(6,199,85,.5);
}
.line-float-close {
width: 22px;
height: 22px;
border-radius: 50%;
border: none;
background: rgba(0,0,0,.35);
color: #fff;
font-size: .75rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
align-self: flex-start;
margin-top: 2px;
transition: background .15s;
}
.line-float-close:hover {
background: rgba(0,0,0,.6);
}
.site-footer-legal {
grid-column: 1 / -1;
margin-top: 8px;
padding-top: 20px;
border-top: 1px solid rgba(24, 72, 118, 0.1);
color: #7c8a99;
font-size: 0.72rem;
line-height: 1.75;
}
.site-footer-platform-note {
background: rgba(255,255,255,.6);
border-left: 3px solid #1f8fdc;
padding: 10px 14px;
border-radius: 0 6px 6px 0;
color: #475569;
margin: 0 0 12px;
font-size: 0.74rem;
}
.site-footer-legal p {
margin: 0 0 6px;
}
.site-footer-legal p:last-child {
margin-bottom: 0;
}
@media (max-width: 960px) {
.difference-grid,
.network-cta,
.privacy-grid {
grid-template-columns: 1fr;
}
.site-footer-inner {
grid-template-columns: 1fr 1fr;
}
.site-footer-brand-col {
grid-column: 1 / -1;
}
.network-cta-actions {
grid-auto-flow: row;
padding: 0 24px 28px;
}
.network-cta-copy {
padding: 24px;
}
.network-cta-visual {
min-height: 280px;
}
.service-booking-selector {
grid-template-columns: 1fr;
}
.hero-copy {
padding-right: 0;
}
}
@media (max-width: 768px) {
.service-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.search-bar-usage {
grid-template-columns: 1fr;
}
.notice-signup-actions {
flex-direction: column;
align-items: stretch;
}
}
@media (max-width: 640px) {
.floating-service-qr {
display: none;
}
.floating-line-button {
right: 16px;
bottom: 16px;
padding: 8px;
}
.floating-line-copy {
display: none;
}
.date-choice-grid,
.time-choice-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.summary-choice-card {
grid-template-columns: 1fr;
}
.privacy-card {
padding: 20px;
border-radius: 22px;
}
}
.hero-video-shell {
position: relative;
width: calc(100vw - 32px);
margin-left: calc(50% - 50vw + 16px);
margin-right: calc(50% - 50vw + 16px);
min-height: calc(100vh - 32px);
padding: 28px clamp(20px, 4vw, 52px) 24px;
overflow: hidden;
border-radius: 0 0 40px 40px;
border: 0;
box-shadow: none;
background: #D9F0FF url('assets/hero-bg-new.jpg') center 76px / 100% auto no-repeat;
}
/* ── 粉彩 mesh gradient orbs ── */
.hero-mesh {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
.hero-orb {
display: none;
}
/* Orb — 夕陽粉藍雲色系 */
.hero-orb-1 {
width: 700px; height: 700px;
top: -20%; left: -12%;
background: radial-gradient(circle, rgba(240,160,140,.50) 0%, rgba(220,130,120,.25) 55%, transparent 100%);
opacity: .04;
animation-duration: 22s;
animation-delay: 0s;
}
.hero-orb-2 {
width: 580px; height: 580px;
top: -10%; right: -10%;
background: radial-gradient(circle, rgba(170,200,230,.55) 0%, rgba(140,175,210,.30) 55%, transparent 100%);
opacity: .04;
animation-duration: 28s;
animation-delay: -9s;
}
.hero-orb-3 {
width: 480px; height: 480px;
top: 35%; left: 15%;
background: radial-gradient(circle, rgba(210,160,180,.45) 0%, rgba(190,140,160,.25) 60%, transparent 100%);
opacity: .04;
animation-duration: 20s;
animation-delay: -5s;
}
.hero-orb-4 {
width: 540px; height: 540px;
bottom: -15%; right: 5%;
background: radial-gradient(circle, rgba(255,175,110,.42) 0%, rgba(240,150,90,.22) 55%, transparent 100%);
opacity: .04;
animation-duration: 32s;
animation-delay: -16s;
}
.hero-orb-5 {
width: 420px; height: 420px;
top: 55%; left: -8%;
background: radial-gradient(circle, rgba(120,175,210,.40) 0%, rgba(100,155,195,.22) 55%, transparent 100%);
opacity: .04;
animation-duration: 25s;
animation-delay: -12s;
}
@keyframes orbFloat {
0% { transform: translate(0px, 0px) scale(1); }
25% { transform: translate(30px, -25px) scale(1.04); }
50% { transform: translate(15px, 35px) scale(.97); }
75% { transform: translate(-20px, 20px) scale(1.02); }
100% { transform: translate(0px, 0px) scale(1); }
}
/* keep old cloud selectors harmless */
.hero-clouds { display: none; }
/* ── 星空粒子層 ── */
.hero-mesh::before {
display: none; /* 隱藏，避免蓋住雲朵照片 */
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
radial-gradient(1px 1px at 12% 8%, rgba(255,255,255,.75) 0%, transparent 100%),
radial-gradient(1px 1px at 28% 15%, rgba(255,255,255,.55) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 45% 6%, rgba(255,255,255,.80) 0%, transparent 100%),
radial-gradient(1px 1px at 62% 12%, rgba(255,255,255,.60) 0%, transparent 100%),
radial-gradient(1px 1px at 78% 5%, rgba(255,255,255,.70) 0%, transparent 100%),
radial-gradient(1px 1px at 90% 18%, rgba(255,255,255,.50) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 5% 22%, rgba(255,255,255,.65) 0%, transparent 100%),
radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.45) 0%, transparent 100%),
radial-gradient(1px 1px at 38% 25%, rgba(255,255,255,.60) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 55% 20%, rgba(255,255,255,.70) 0%, transparent 100%),
radial-gradient(1px 1px at 72% 28%, rgba(255,255,255,.50) 0%, transparent 100%),
radial-gradient(1px 1px at 85% 35%, rgba(255,255,255,.55) 0%, transparent 100%),
radial-gradient(1px 1px at 15% 38%, rgba(255,255,255,.40) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 33% 42%, rgba(255,255,255,.65) 0%, transparent 100%),
radial-gradient(1px 1px at 50% 35%, rgba(255,255,255,.45) 0%, transparent 100%),
radial-gradient(1px 1px at 67% 40%, rgba(255,255,255,.55) 0%, transparent 100%),
radial-gradient(1px 1px at 94% 8%, rgba(255,255,255,.60) 0%, transparent 100%),
radial-gradient(1px 1px at 3% 45%, rgba(255,255,255,.40) 0%, transparent 100%),
/* warm stars near horizon */
radial-gradient(1.5px 1.5px at 25% 52%, rgba(255,210,140,.55) 0%, transparent 100%),
radial-gradient(1px 1px at 42% 50%, rgba(255,200,120,.45) 0%, transparent 100%),
radial-gradient(1px 1px at 58% 48%, rgba(255,180,100,.50) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 75% 55%, rgba(255,220,150,.45) 0%, transparent 100%);
}
/* ── 背景大字 ── */
.hero-bg-text {
position: absolute;
bottom: 8%;
left: 0;
width: 100%;
overflow: hidden;
z-index: 0;
pointer-events: none;
animation: bgTextDrift 9s ease-in-out infinite alternate;
}
.hero-bg-text span {
display: block;
font-weight: 900;
white-space: nowrap;
letter-spacing: -0.02em;
line-height: 1;
padding-left: 2%;
background: linear-gradient(
110deg,
#38bdf8 0%,
#818cf8 18%,
#c084fc 34%,
#f472b6 50%,
#fb923c 66%,
#34d399 82%,
#38bdf8 100%
);
background-size: 250% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.55;
animation: bgTextColor 6s linear infinite;
-webkit-text-stroke: 2px rgba(130, 140, 255, 0.70);
}
.hero-bg-line0 {
font-size: clamp(3.5rem, 7.5vw, 8rem);
animation-delay: -1.5s;
opacity: 0.40;
}
.hero-bg-line1 {
font-size: clamp(5rem, 11vw, 12rem);
animation-delay: -3s;
opacity: 0.65;
}
.hero-bg-line2 {
font-size: clamp(7rem, 16vw, 17rem);
opacity: 0.85;
-webkit-text-stroke: 3px rgba(130, 140, 255, 0.75);
}
@keyframes bgTextDrift {
0% { transform: translateX(0%); }
100% { transform: translateX(-6%); }
}
@keyframes bgTextColor {
0% { background-position: 0% 50%; }
100% { background-position: 250% 50%; }
}
/* ── 3D 球體 canvas ── */
#heroSphere {
position: absolute;
right: 3%;
top: 50%;
transform: translateY(-50%);
width: 520px;
height: 520px;
z-index: 1;
pointer-events: none;
filter: drop-shadow(0 0 60px rgba(168,85,247,.35))
drop-shadow(0 0 120px rgba(244,114,182,.20));
}
.hero-cloud::before,
.hero-cloud::after {
content: '';
position: absolute;
background: inherit;
border-radius: 50%;
}
/* Cloud A — large, slow drift */
.hero-cloud-a {
width: 260px; height: 65px;
bottom: 28%; left: -280px;
animation: cloudDrift 48s linear infinite;
}
.hero-cloud-a::before { width:120px; height:96px; top:-52px; left:40px; filter:blur(1px); }
.hero-cloud-a::after { width: 90px; height:72px; top:-36px; left:130px; }
/* Cloud B — medium */
.hero-cloud-b {
width: 190px; height: 52px;
bottom: 18%; left: -210px;
animation: cloudDrift 35s linear 10s infinite;
}
.hero-cloud-b::before { width:88px; height:70px; top:-36px; left:28px; }
.hero-cloud-b::after { width:64px; height:52px; top:-24px; left:94px; }
/* Cloud C — small, quick */
.hero-cloud-c {
width: 130px; height: 36px;
bottom: 42%; left: -150px;
animation: cloudDrift 25s linear 4s infinite;
opacity: .8;
}
.hero-cloud-c::before { width:60px; height:50px; top:-26px; left:18px; }
.hero-cloud-c::after { width:44px; height:38px; top:-16px; left:68px; }
/* Cloud D — large, very slow */
.hero-cloud-d {
width: 320px; height: 78px;
bottom: 12%; left: -350px;
animation: cloudDrift 62s linear 20s infinite;
opacity: .85;
}
.hero-cloud-d::before { width:140px; height:110px; top:-58px; left:52px; }
.hero-cloud-d::after { width:100px; height: 82px; top:-42px; left:168px; }
/* Cloud E — tiny accent */
.hero-cloud-e {
width: 100px; height: 28px;
bottom: 55%; left: -120px;
animation: cloudDrift 18s linear 7s infinite;
opacity: .65;
}
.hero-cloud-e::before { width:46px; height:38px; top:-20px; left:12px; }
.hero-cloud-e::after { width:34px; height:28px; top:-12px; left:52px; }
@keyframes cloudDrift {
from { transform: translateX(0); }
to { transform: translateX(calc(100vw + 400px)); }
}
.hero-video-layer,
.hero-video,
.hero-overlay {
position: absolute;
inset: 0;
}
.hero-reference-layer {
display: none;
}
.hero-video-layer {
z-index: 0;
display: none;
}
.hero-video {
display: none;
}
.hero-overlay {
background: linear-gradient(180deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.15) 60%, rgba(255,255,255,0) 100%);
}
/* 山脈剪影層 */
.hero-video-shell::before {
display: none; /* 隱藏，避免蓋住雲朵照片 */
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 62%;
z-index: 0;
pointer-events: none;
background-image: url("data:image/svg+xml,");
background-size: 100% 100%;
background-position: bottom center;
background-repeat: no-repeat;
}
/* 斜向光線效果 — 隱藏，避免蓋住雲朵照片 */
.hero-video-shell::after {
display: none;
}
.hero-video-shell::after-DISABLED {
content: '';
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(125deg,
transparent 28%,
rgba(255,170,60,.12) 40%,
rgba(255,200,80,.22) 44%,
rgba(255,170,60,.12) 48%,
transparent 60%
),
linear-gradient(125deg,
transparent 48%,
rgba(255,130,30,.08) 56%,
rgba(255,150,50,.14) 60%,
rgba(255,130,30,.08) 64%,
transparent 72%
);
mix-blend-mode: screen;
}
.hero-video-shell .hero-navbar,
.hero-video-shell .hero-content,
.hero-video-shell .hero-stats {
position: relative;
z-index: 2;
}
.hero-navbar {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 20px;
padding: 2px 0 0;
position: relative;
z-index: 10000;
}
.hero-video-shell .hero-content h1,
.hero-video-shell .hero-subtitle,
.hero-video-shell .hero-text {
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,.40);
}
.hero-video-shell .logo {
font-family: "Noto Serif TC", serif;
font-size: 2rem;
font-weight: 900;
letter-spacing: .02em;
color: #fff;
text-shadow:
-1px -1px 0 #000, 1px -1px 0 #000,
-1px 1px 0 #000, 1px 1px 0 #000,
0 2px 12px rgba(0,0,0,.35);
display: flex;
align-items: center;
gap: .5rem;
}
.navbar-brand-logo {
width: 110px;
height: 110px;
flex-shrink: 0;
filter: drop-shadow(0 3px 14px rgba(0,0,0,.35));
}
.hero-nav-links {
display: flex;
justify-content: flex-end;
gap: 10px;
flex-wrap: wrap;
}
.hero-video-shell .hero-nav-links a {
padding: 10px 20px;
border-radius: 999px;
background-image: linear-gradient(to right, #c084fc 0%, #f472b6 50%, #fb7185 100%) !important;
background-color: transparent;
border: none;
backdrop-filter: none;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background-clip: padding-box !important;
-webkit-background-clip: padding-box !important;
font-weight: 700;
font-size: 1rem;
letter-spacing: .01em;
box-shadow: 0 4px 18px rgba(168,85,247,.45);
transition: filter .18s, box-shadow .18s;
position: relative;
}
.hero-video-shell .hero-nav-links a:hover {
filter: brightness(1.1);
box-shadow: 0 6px 24px rgba(168,85,247,.6);
}
.hero-entry-links {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.hero-entry-link {
min-height: 44px;
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: 2px;
padding: 8px 16px;
border: 1.5px solid rgba(167,139,250,.45);
border-radius: 999px;
background: rgba(255,255,255,.28);
text-decoration: none;
font-weight: 800;
font-size: 1rem;
line-height: 1.2;
backdrop-filter: blur(14px);
transition: background .18s, border-color .18s, transform .15s;
background-image: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
animation: none !important;
text-shadow: 0 1px 6px rgba(0,0,0,.25) !important;
position: relative;
}
.hero-entry-link span,
.hero-entry-link span *,
#memberIndexText,
#memberIndexText * {
color: #fff !important;
-webkit-text-fill-color: #fff !important;
background: none !important;
background-image: none !important;
background-clip: unset !important;
-webkit-background-clip: unset !important;
-webkit-text-stroke: 0 !important;
}
.hero-entry-link::before {
content: '';
position: absolute; inset: 0;
border-radius: 999px;
background: rgba(255,255,255,.28);
border: 1.5px solid rgba(167,139,250,.45);
backdrop-filter: blur(14px);
z-index: -1;
transition: background .18s, border-color .18s;
}
.hero-entry-link:hover {
transform: translateY(-1px);
}
.hero-entry-link:hover::before {
background: rgba(255,255,255,.45);
border-color: rgba(129,140,248,.7);
}
#memberIndexLink,
#memberIndexLink span {
color: #22C55E !important;
-webkit-text-fill-color: unset !important;
text-shadow:
-1px -1px 0 #000, 1px -1px 0 #000,
-1px 1px 0 #000, 1px 1px 0 #000 !important;
}
.hero-entry-link--vendor {
background-image: none;
-webkit-background-clip: unset;
background-clip: unset;
color: #fff;
-webkit-text-fill-color: #fff;
animation: none;
}
.hero-entry-link--vendor::before {
background: rgba(249,115,22,.25);
border-color: rgba(253,186,116,.55);
}
.hero-entry-link--vendor:hover::before {
background: rgba(249,115,22,.40);
}
/* ════════════════════════════════════════
會員帳戶下拉選單 (mb-dropdown)
════════════════════════════════════════ */
.mb-dropdown {
position: relative;
}
/* 登入後觸發按鈕外觀微調 */
.mb-logged-in #memberIndexLink {
cursor: pointer !important;
user-select: none;
}
/* 下拉面板 */
.mb-dropdown-panel {
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
top: calc(100% + 10px);
right: 0;
min-width: 220px;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(203,213,225,0.7);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
overflow: hidden;
z-index: 9999;
transform-origin: top right;
transform: scale(0.96) translateY(-6px);
transition: opacity .16s ease, transform .16s ease, visibility 0s linear .2s;
}
/* 橋接填補觸發元素與面板之間的空隙，避免滑鼠穿越時消失 */
.mb-dropdown-panel::before {
content: '';
position: absolute;
top: -12px;
left: 0;
right: 0;
height: 12px;
}
.mb-open .mb-dropdown-panel,
.mb-logged-in:hover .mb-dropdown-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: scale(1) translateY(0);
transition: opacity .16s ease, transform .16s ease, visibility 0s linear 0s;
}
/* 使用者資訊列 */
.mb-dp-user {
display: flex;
align-items: center;
gap: .75rem;
padding: .875rem 1rem;
background: linear-gradient(135deg, #ede9fe 0%, #dbeafe 100%);
border-bottom: 1px solid rgba(203,213,225,.5);
}
.mb-dp-avatar {
width: 38px; height: 38px;
border-radius: 50%;
background: linear-gradient(135deg,#7c3aed,#2563eb);
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; flex-shrink: 0;
}
.mb-dp-name { font-size: .875rem; font-weight: 700; color: #1e293b; }
.mb-dp-email { font-size: .7rem; color: #64748b; margin-top: .1rem; word-break: break-all; }
/* 分區標題 */
.mb-dp-section {
font-size: .65rem;
font-weight: 800;
letter-spacing: .07em;
color: #94a3b8;
padding: .55rem 1rem .2rem;
margin-top: .15rem;
text-transform: uppercase;
}
.mb-dp-section:first-of-type { margin-top: 0; }
/* 選單項目 */
.mb-dp-item {
display: flex;
align-items: center;
gap: .55rem;
padding: .525rem 1rem;
font-size: .875rem;
font-weight: 500;
color: #334155;
text-decoration: none;
cursor: pointer;
border: none;
background: none;
width: 100%;
text-align: left;
transition: background .12s, color .12s;
font-family: inherit;
}
.mb-dp-item:hover {
background: #f1f5f9;
color: #7c3aed;
}
.mb-dp-icon {
font-size: .95rem;
width: 20px;
text-align: center;
flex-shrink: 0;
}
/* 通知數量徽章 */
.mb-dp-badge {
margin-left: auto;
background: #ef4444;
color: #fff;
font-size: .62rem;
font-weight: 800;
padding: .1rem .4rem;
border-radius: 99px;
min-width: 18px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* 登出按鈕 */
.mb-dp-logout {
color: #ef4444;
border-top: 1px solid #f1f5f9;
margin-top: .15rem;
padding-top: .6rem;
padding-bottom: .6rem;
}
.mb-dp-logout:hover {
background: #fef2f2;
color: #dc2626;
}
/* 手機版：面板靠左對齊 */
@media (max-width: 600px) {
.mb-dropdown-panel {
right: auto;
left: 0;
min-width: 200px;
}
}
.hero-entry-link small {
color: #fff;
-webkit-text-fill-color: #fff;
background: none;
animation: none;
font-size: .72rem;
font-weight: 600;
white-space: nowrap;
text-shadow:
-1px -1px 0 #000, 1px -1px 0 #000,
-1px 1px 0 #000, 1px 1px 0 #000;
}
.nav-btn,
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 16px 28px;
border-radius: 999px;
font-weight: 800;
text-decoration: none;
}
.btn-line {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
padding: 16px 28px;
border-radius: 999px;
border: 1px solid rgba(137, 214, 88, 0.28);
background: linear-gradient(180deg, rgba(102, 211, 44, 0.18), rgba(232, 255, 215, 0.14));
color: #ffffff;
font-weight: 800;
text-decoration: none;
backdrop-filter: blur(10px);
}
.consent-check {
display: inline-flex;
align-items: flex-start;
gap: 10px;
color: var(--ink);
line-height: 1.7;
}
.consent-check input {
margin-top: 3px;
}
.consent-check a {
color: var(--accent-deep);
font-weight: 800;
text-decoration: underline;
}
.nav-btn,
.btn-primary {
background: linear-gradient(135deg, #2DD4BF, var(--primary), var(--primary-dk));
background-size: 200% 100%;
background-position: 0% 50%;
color: #ffffff;
box-shadow: 0 8px 28px rgba(13,148,136,.40);
transition: background-position .3s, box-shadow .2s, transform .12s;
}
.nav-btn:hover,
.btn-primary:hover {
background-position: 100% 50%;
box-shadow: 0 12px 36px rgba(13,148,136,.55);
transform: translateY(-1px);
}
.btn-secondary {
background: rgba(255,255,255,.18);
color: #fff;
border: 1.5px solid rgba(255,255,255,.42);
backdrop-filter: blur(12px);
transition: background .2s, border-color .2s;
}
.btn-secondary:hover {
background: rgba(255,255,255,.28);
border-color: rgba(255,255,255,.70);
}
.hero-video-shell .hero-content {
max-width: 640px;
margin-top: clamp(90px, 16vh, 160px);
min-height: 42vh;
}
.hero-video-shell .hero-content h1 {
max-width: 10ch;
font-size: var(--h-hero);
line-height: var(--h-lh);
letter-spacing: var(--h-tracking);
text-shadow: none;
color: var(--split-dark);
}
.hero-subtitle {
margin: 0 0 12px;
color: #374151;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.hero-video-shell .hero-text {
max-width: 46ch;
margin-top: 20px;
color: rgba(255,255,255,.90);
font-size: 1.08rem;
line-height: 1.85;
}
.consent-check-hero {
margin-top: 18px;
color: rgba(244, 248, 250, 0.92);
}
.consent-check-hero a {
color: #ffffff;
}
.hero-search-pill {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.24);
backdrop-filter: blur(10px);
color: rgba(255, 255, 255, 0.82);
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
pointer-events: none;
}
.hero-search-icon {
font-size: 1.1rem;
flex-shrink: 0;
}
.hero-video-shell .hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 28px;
}
.hero-video-shell .hero-stats {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
position: absolute;
right: clamp(20px, 4vw, 52px);
bottom: 28px;
width: 500px;
padding: 15px 18px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 20px;
background: rgba(10, 50, 90, 0.45);
box-shadow: 0 7px 26px rgba(0,0,0,.15);
backdrop-filter: blur(20px);
}
.hero-video-shell .stat-item {
padding: 0.6rem 0.75rem;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.22);
border-radius: 0.85rem;
backdrop-filter: blur(12px);
box-shadow: 0 4px 12px rgba(0,0,0,.10);
text-align: center;
}
.hero-video-shell .stat-item h2,
.hero-video-shell .stat-item p {
margin: 0;
color: #fff;
}
.hero-video-shell .stat-item h2 {
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -.01em;
text-shadow: 0 2px 4px rgba(0,0,0,.20);
}
.hero-video-shell .stat-item p {
color: rgba(255,255,255,.82);
margin-top: 4px;
font-size: 0.95rem;
font-weight: 600;
}
.hero-reference-layer,
.hero-panel,
.hero-floating-stats,
.topbar,
.hero-grid,
.hero-copy,
.hero-video-shell .hero-trust-row {
display: none;
}
@media (max-width: 960px) {
.hero-video-shell {
min-height: auto;
padding-bottom: 32px;
border-radius: 0 0 32px 32px;
}
.hero-navbar {
grid-template-columns: 1fr;
justify-items: start;
}
.hero-nav-links {
justify-content: start;
}
.hero-entry-links {
justify-content: start;
}
.hero-video-shell .hero-content {
margin-top: 72px;
min-height: auto;
}
.hero-video-shell .hero-stats {
position: relative;
left: auto;
right: auto;
bottom: auto;
width: 100%;
margin-top: 28px;
margin-left: 0;
}
.hero-video-shell .stat-item {
width: 100%;
}
}
@media (max-width: 720px) {
.hero-video-shell {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
min-height: auto;
padding: 20px 18px 24px;
border-radius: 0 0 28px 28px;
}
.hero-nav-links {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
justify-content: stretch;
width: 100%;
}
.hero-video-shell .hero-content {
margin-top: 54px;
}
.hero-entry-links {
width: 100%;
}
.hero-entry-link {
flex: 1 1 150px;
align-items: center;
text-align: center;
}
.hero-entry-link--vendor {
flex-basis: 100%;
}
.hero-video-shell .hero-content h1 {
max-width: 11ch;
font-size: clamp(2.2rem, 11vw, 3.4rem);
}
.hero-video-shell .hero-actions,
.hero-video-shell .hero-stats {
grid-template-columns: 1fr;
}
}
/* ═══════════════════════════════════════════
輔具商城 — Assistive Devices
設計風格：歐式居家水彩療癒風
═══════════════════════════════════════════ */
/* ── 共用版型 ── */
.assistive-page {
background:
radial-gradient(ellipse at top left, rgba(180, 210, 170, 0.18), transparent 40%),
radial-gradient(ellipse at bottom right, rgba(210, 185, 160, 0.14), transparent 40%),
linear-gradient(180deg, #f6f2ec 0%, #eef3f0 100%);
min-height: 100vh;
}
.container {
width: min(1140px, calc(100% - 32px));
margin: 0 auto;
}
.grid-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
/* ── 分類格 ── */
.category-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
margin-top: 24px;
}
.category-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 28px 16px 22px;
border-radius: 20px;
background: rgba(255, 252, 247, 0.9);
border: 1.5px solid rgba(160, 140, 115, 0.18);
box-shadow: 0 4px 18px rgba(100, 80, 55, 0.07);
text-decoration: none;
color: var(--ink);
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
cursor: pointer;
}
.category-card:hover {
transform: translateY(-4px);
background: rgba(255, 252, 247, 1);
box-shadow: 0 12px 36px rgba(100, 80, 55, 0.13);
}
.category-icon {
font-size: 2.4rem;
line-height: 1;
filter: drop-shadow(0 2px 6px rgba(100, 80, 55, 0.12));
}
.category-card h3 {
margin: 0;
font-size: 0.95rem;
font-weight: 700;
text-align: center;
}
.category-card p {
margin: 0;
font-size: 0.78rem;
color: var(--muted);
text-align: center;
line-height: 1.5;
}
/* ── section 標頭（輔具版） ── */
.section-header {
margin-bottom: 8px;
}
.section-header h2 {
margin: 0 0 6px;
font-size: clamp(1.4rem, 3vw, 1.9rem);
font-weight: 800;
color: #3a4a35;
letter-spacing: -0.02em;
}
.section-header p {
margin: 0;
font-size: 0.92rem;
color: var(--muted);
}
/* ── 商品卡 ── */
.product-card {
display: flex;
flex-direction: column;
border-radius: 22px;
background: rgba(255, 252, 248, 0.95);
border: 1.5px solid rgba(160, 140, 115, 0.16);
box-shadow: 0 6px 24px rgba(100, 80, 55, 0.08);
text-decoration: none;
color: var(--ink);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 16px 48px rgba(100, 80, 55, 0.14);
}
.product-image-wrap {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: linear-gradient(135deg, #f0ebe3, #e8f0e8);
}
.watercolor-img {
width: 100%;
height: 100%;
object-fit: cover;
mix-blend-mode: multiply;
opacity: 0.92;
transition: opacity 0.2s ease, transform 0.3s ease;
}
.product-card:hover .watercolor-img {
opacity: 1;
transform: scale(1.03);
}
.product-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px 18px 20px;
flex: 1;
}
.product-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.brand {
font-size: 0.78rem;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.category-pill {
padding: 3px 10px;
border-radius: 999px;
background: rgba(111, 127, 75, 0.12);
color: #4a5e2e;
font-size: 0.72rem;
font-weight: 700;
white-space: nowrap;
}
.product-body h3 {
margin: 0;
font-size: 1rem;
font-weight: 800;
line-height: 1.35;
color: #2a3525;
}
.rating-row {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.82rem;
color: var(--muted);
}
.tag-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag {
padding: 3px 10px;
border-radius: 999px;
background: rgba(67, 183, 217, 0.1);
color: var(--accent-deep);
font-size: 0.72rem;
font-weight: 600;
}
.description {
margin: 0;
font-size: 0.84rem;
color: var(--muted);
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price-row {
display: flex;
align-items: baseline;
gap: 12px;
margin-top: auto;
padding-top: 8px;
border-top: 1px dashed rgba(160, 140, 115, 0.25);
font-size: 0.85rem;
color: var(--muted);
}
.price-row strong {
font-size: 1.05rem;
font-weight: 800;
color: #3a5a30;
}
/* ── 補助試算器 ── */
.subsidy-box {
padding: 28px 24px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(255, 252, 245, 0.98), rgba(240, 248, 240, 0.95));
border: 1.5px solid rgba(111, 127, 75, 0.2);
box-shadow: 0 8px 28px rgba(80, 100, 55, 0.09);
}
.subsidy-box h3 {
margin: 0 0 18px;
font-size: 1.05rem;
font-weight: 800;
color: #3a4a35;
}
.subsidy-box label {
display: block;
margin-bottom: 6px;
font-size: 0.85rem;
font-weight: 700;
color: var(--muted);
}
.subsidy-box select {
width: 100%;
padding: 10px 14px;
border-radius: 10px;
border: 1.5px solid rgba(111, 127, 75, 0.25);
background: #fff;
font: inherit;
font-size: 0.9rem;
color: var(--ink);
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235e7283' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
cursor: pointer;
margin-bottom: 20px;
}
.subsidy-result {
display: grid;
gap: 10px;
margin-bottom: 16px;
}
.subsidy-result > div {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.7);
font-size: 0.88rem;
}
.subsidy-result > div:last-child {
background: rgba(111, 127, 75, 0.1);
border: 1px solid rgba(111, 127, 75, 0.2);
}
.subsidy-result strong {
font-size: 1rem;
font-weight: 800;
color: #3a5a30;
}
.subsidy-note {
margin: 0;
font-size: 0.75rem;
color: var(--muted);
line-height: 1.6;
padding-top: 12px;
border-top: 1px dashed rgba(160, 140, 115, 0.25);
}
/* ── RWD ── */
@media (max-width: 900px) {
.grid-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.category-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
}
@media (max-width: 560px) {
.grid-3 {
grid-template-columns: 1fr;
}
.category-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.category-card {
padding: 18px 10px 14px;
}
.category-icon {
font-size: 1.8rem;
}
.category-card p {
display: none;
}
}
/* ── 輔具商城（消費者入口）按鈕 ── */
.btn-store {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 56px;
padding: 16px 28px;
border-radius: 999px;
font-weight: 800;
text-decoration: none;
background: linear-gradient(135deg, #c07a3a, #9a5a1e);
color: #ffffff;
box-shadow: 0 12px 28px rgba(154, 90, 30, 0.35);
border: 1px solid rgba(230, 180, 120, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-store:hover {
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(154, 90, 30, 0.45);
}
/* ── 輔具公司後台按鈕 ── */
.btn-assistive {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 56px;
padding: 16px 28px;
border-radius: 999px;
font-weight: 800;
text-decoration: none;
background: linear-gradient(135deg, #6f7f4b, #4a5e2e);
color: #ffffff;
box-shadow: 0 12px 28px rgba(74, 94, 46, 0.35);
border: 1px solid rgba(180, 200, 120, 0.3);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-assistive:hover {
transform: translateY(-2px);
box-shadow: 0 18px 36px rgba(74, 94, 46, 0.45);
}
/* ══════════════════════════════════════════════════════
輔具商城入口（Finder Section）
══════════════════════════════════════════════════════ */
/* ── 輔具商城色票 ── */
.assistive-finder-section {
--af-primary: #2F80ED;
--af-secondary: #27AE60;
--af-accent: #9B51E0;
--af-bg: #F7F9FC;
--af-card: #FFFFFF;
--af-text: #1F2937;
--af-subtext: #6B7280;
--af-border: #E5E7EB;
--af-warning: #F2994A;
--af-error: #EB5757;
position: relative;
padding: 72px 0;
background: var(--af-bg);
}
.finder-admin-btn {
position: absolute;
top: 24px;
right: 24px;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 0 22px;
border-radius: 999px;
background: var(--af-card);
border: 2px solid var(--af-primary);
color: var(--af-primary);
font-size: 1.125rem;
font-weight: 900;
text-decoration: none;
box-shadow: 0 10px 24px rgba(47, 128, 237, 0.12);
transition: background 0.15s;
}
.finder-admin-btn:hover {
background: rgba(47, 128, 237, 0.06);
}
.finder-group {
margin-bottom: 48px;
}
.finder-group-label {
margin: 0 0 20px;
font-weight: 800;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--af-primary);
}
/* 四大空間：4 欄 */
.finder-card-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
/* 專項照護：3 欄 */
.finder-card-grid--specialist {
grid-template-columns: repeat(3, 1fr);
}
/* Card */
.finder-card {
display: flex;
flex-direction: column;
border-radius: var(--radius-xl);
background: var(--af-card);
border: 1px solid var(--af-border);
box-shadow: 0 4px 16px rgba(47, 128, 237, 0.06);
overflow: hidden;
text-decoration: none;
color: var(--af-text);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.finder-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(47, 128, 237, 0.14);
border-color: var(--af-primary);
}
/* Card image area */
.finder-card-img {
display: flex;
align-items: center;
justify-content: center;
height: 120px;
font-size: 3rem;
background: linear-gradient(135deg, rgba(47,128,237,0.10), rgba(47,128,237,0.04));
}
/* 四大生活空間：使用 primary 藍 */
.finder-card-img--bedroom { background: linear-gradient(135deg, rgba(47,128,237,0.12), rgba(47,128,237,0.05)); }
.finder-card-img--bathroom { background: linear-gradient(135deg, rgba(47,128,237,0.15), rgba(100,181,246,0.07)); }
.finder-card-img--kitchen { background: linear-gradient(135deg, rgba(39,174,96,0.12), rgba(39,174,96,0.05)); }
.finder-card-img--outdoor { background: linear-gradient(135deg, rgba(39,174,96,0.15), rgba(39,174,96,0.07)); }
/* 專項照護：使用 accent 紫 */
.finder-card-img--dementia { background: linear-gradient(135deg, rgba(155,81,224,0.14), rgba(155,81,224,0.06)); }
.finder-card-img--paediatric{ background: linear-gradient(135deg, rgba(242,153,74,0.14), rgba(242,153,74,0.06)); }
.finder-card-img--pressure { background: linear-gradient(135deg, rgba(235,87,87,0.12), rgba(235,87,87,0.05)); }
/* Card body */
.finder-card-body {
padding: 18px 20px 20px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.finder-card-name {
font-size: 1.05rem;
font-weight: 800;
color: var(--af-text);
}
.finder-card-desc {
margin: 0;
font-size: 0.84rem;
color: var(--af-subtext);
line-height: 1.5;
}
/* Sub-category tags */
.finder-card-tags {
list-style: none;
margin: 8px 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
/* 生活空間 tags：紫色系 */
.finder-card-tags li {
padding: 3px 9px;
border-radius: 999px;
background: rgba(124, 58, 237, 0.07);
border: 1px solid rgba(124, 58, 237, 0.18);
font-size: 0.72rem;
font-weight: 600;
color: var(--primary, #0D9488);
}
/* Specialist card tags：綠色系 */
.finder-card--specialist .finder-card-tags li {
background: rgba(39, 174, 96, 0.08);
border-color: rgba(39, 174, 96, 0.22);
color: var(--af-secondary);
}
/* CTA */
.finder-cta-wrap {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 8px;
}
.finder-cta-btn {
font-size: 1rem;
padding: 18px 36px;
background: var(--af-primary);
color: #fff;
border-radius: 999px;
text-decoration: none;
font-weight: 800;
box-shadow: 0 6px 20px rgba(47, 128, 237, 0.28);
transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
}
.finder-cta-btn:hover {
background: #1a6ed8;
box-shadow: 0 10px 28px rgba(47, 128, 237, 0.38);
transform: translateY(-2px);
}
.finder-cta-btn.btn-market {
background: var(--af-card);
color: var(--af-secondary);
border: 2px solid var(--af-secondary);
box-shadow: none;
}
.finder-cta-btn.btn-market:hover {
background: rgba(39, 174, 96, 0.06);
box-shadow: 0 6px 18px rgba(39, 174, 96, 0.18);
transform: translateY(-2px);
}
/* Responsive */
@media (max-width: 1100px) {
.finder-card-grid { grid-template-columns: repeat(2, 1fr); }
.finder-card-grid--specialist { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.finder-card-grid,
.finder-card-grid--specialist { grid-template-columns: 1fr; }
.finder-card-img { height: 80px; font-size: 2rem; }
.finder-admin-btn {
top: 16px;
right: 16px;
min-height: 48px;
padding: 0 16px;
font-size: 1rem;
}
.assistive-finder-section .section-heading {
padding-top: 58px;
}
}
/* ══════════════════════════════════════════
首屏決策引擎 .hero-decision
══════════════════════════════════════════ */
/* Replace old hero-content layout — 雙欄：左卡片 + 右小電視輪播 */
.hero-decision {
position: relative; z-index: 2;
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: stretch;
padding: 1.75rem 1.5rem 1.5rem;
width: 100%; max-width: 1480px; margin: 0 auto;
min-height: calc(100vh - 80px);
text-align: left;
}
.hd-left {
display: flex; flex-direction: column;
}
.hd-right {
position: relative;
border-radius: 14px;
overflow: hidden;
aspect-ratio: 3 / 2;
width: 460px;
box-shadow: 0 8px 32px rgba(0,0,0,.35);
flex-shrink: 0;
}
.hd-adslide {
position: absolute; inset: 0;
}
.hd-slide {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity .55s ease; pointer-events: none;
}
.hd-slide.hd-slide-active { opacity: 1; pointer-events: auto; }
.hd-slide-inner { padding: 32px 28px; color: #fff; }
.hd-slide-tag {
display: inline-block; font-size: .7rem; font-weight: 700;
letter-spacing: .06em; background: rgba(255,255,255,.2);
padding: 3px 10px; border-radius: 99px; margin-bottom: 12px;
}
.hd-slide-title {
font-size: 1.4rem; font-weight: 800; line-height: 1.35; margin: 0 0 10px;
}
.hd-slide-title strong { font-size: 1.9rem; }
.hd-slide-desc { font-size: .8rem; line-height: 1.6; opacity: .88; margin: 0 0 18px; }
.hd-slide-btn {
display: inline-block; background: rgba(255,255,255,.22);
border: 1.5px solid rgba(255,255,255,.5); color: #fff;
font-weight: 700; font-size: .82rem; padding: 8px 18px;
border-radius: 8px; text-decoration: none; transition: background .18s;
}
.hd-slide-btn:hover { background: rgba(255,255,255,.38); }
.hd-sp {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,.18); border: none; color: #fff;
font-size: 1.5rem; width: 32px; height: 32px; border-radius: 50%;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background .18s; z-index: 2;
}
.hd-sp-prev { left: 8px; }
.hd-sp-next { right: 8px; }
.hd-sp:hover { background: rgba(255,255,255,.35); }
.hd-sd {
position: absolute; bottom: 10px; left: 0; right: 0;
display: flex; justify-content: center; align-items: center; gap: 5px; z-index: 2;
}
.hd-sd .hd-dot {
appearance: none; -webkit-appearance: none;
display: block;
flex: 0 0 7px;
width: 7px; height: 7px;
min-width: 7px; min-height: 7px; max-width: 7px; max-height: 7px;
border-radius: 50%;
background: rgba(255,255,255,.45);
border: none; outline: none;
padding: 0; margin: 0;
cursor: pointer;
align-self: center;
transition: background .18s, transform .18s;
box-shadow: none;
overflow: hidden;
}
.hd-sd .hd-dot.hd-dot-a {
background: #fff !important;
transform: scale(1.4);
}
.hd-tagline {
display: none;
}
.hd-title {
font-size: var(--h-hero);
font-weight: 900;
line-height: 1.0;
margin-bottom: .75rem;
letter-spacing: -0.04em;
color: #fff;
text-shadow: 0 4px 24px rgba(0,0,0,.30);
}
.hd-subtitle-inline {
font-size: 1rem;
color: rgba(255,255,255,.85);
font-weight: 400;
margin-left: .75rem;
letter-spacing: 0;
vertical-align: middle;
}
/* Decision cards — 3×3 grid */
.hd-cards {
display: grid;
grid-template-columns: repeat(9, 1fr);
gap: .8rem;
width: 100%;
/* 跟隨水彩圖底部 (圖比例 1346:387 ≈ 3.48:1)，貼齊圖底略留 8px gap */
margin-top: calc((100vw - 32px) / 3.48 - 22px);
margin-bottom: 0;
}
.hd-search { margin-top: auto; margin-bottom: 0; margin-left: calc(-1.5rem - clamp(20px, 4vw, 52px) + 20px); }
.hd-search-inner { margin: 0; }
.hd-petition-wrap { margin-bottom: 0; margin-left: calc(-1.5rem - clamp(20px, 4vw, 52px) + 20px); }
.hd-card {
display: flex; flex-direction: column; align-items: center; gap: .65rem;
border: none;
border-radius: 1.4rem;
padding: 2.5rem .5rem 2.2rem;
text-decoration: none;
transition: transform .2s, box-shadow .2s, filter .2s;
cursor: pointer;
box-shadow: 0 8px 28px rgba(0,0,0,.14);
position: relative;
overflow: hidden;
text-align: center;
}
.hd-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(0,0,0,.16);
filter: brightness(1.06) saturate(1.1);
}
/* ── 水彩暈染背景：9 張各異 ── */
/* 1. 居家照顧 — 玫瑰粉 */
.hd-cards .hd-card:nth-child(1) {
background:
radial-gradient(ellipse 80% 60% at 25% 35%, rgba(255,182,193,.85) 0%, transparent 65%),
radial-gradient(ellipse 60% 70% at 75% 65%, rgba(255,160,170,.70) 0%, transparent 60%),
radial-gradient(ellipse 50% 45% at 55% 20%, rgba(255,210,220,.60) 0%, transparent 55%),
#fce8ec;
}
/* 2. 日間照顧 — 蜜桃杏 */
.hd-cards .hd-card:nth-child(2) {
background:
radial-gradient(ellipse 75% 55% at 30% 40%, rgba(255,210,160,.85) 0%, transparent 65%),
radial-gradient(ellipse 55% 65% at 70% 70%, rgba(255,190,130,.70) 0%, transparent 60%),
radial-gradient(ellipse 45% 40% at 60% 15%, rgba(255,225,190,.60) 0%, transparent 55%),
#fdebd0;
}
/* 3. 喘息服務 — 薄荷綠 */
.hd-cards .hd-card:nth-child(3) {
background:
radial-gradient(ellipse 78% 58% at 28% 38%, rgba(160,230,200,.85) 0%, transparent 65%),
radial-gradient(ellipse 58% 68% at 72% 68%, rgba(140,215,185,.70) 0%, transparent 60%),
radial-gradient(ellipse 48% 42% at 58% 18%, rgba(190,240,220,.60) 0%, transparent 55%),
#d4f5e9;
}
/* 4. 輔具廠商 — 天空藍 */
.hd-cards .hd-card:nth-child(4) {
background:
radial-gradient(ellipse 76% 56% at 32% 42%, rgba(160,205,255,.85) 0%, transparent 65%),
radial-gradient(ellipse 56% 66% at 68% 66%, rgba(140,190,250,.70) 0%, transparent 60%),
radial-gradient(ellipse 46% 42% at 62% 20%, rgba(190,220,255,.60) 0%, transparent 55%),
#d6eaff;
}
/* 5. 居家無障礙補助 — 薰衣草紫 */
.hd-cards .hd-card:nth-child(5) {
background:
radial-gradient(ellipse 80% 60% at 26% 36%, rgba(200,170,255,.85) 0%, transparent 65%),
radial-gradient(ellipse 58% 68% at 74% 64%, rgba(180,150,245,.70) 0%, transparent 60%),
radial-gradient(ellipse 48% 44% at 56% 18%, rgba(220,200,255,.60) 0%, transparent 55%),
#ebe0ff;
}
/* 6. 試算補助 — 珊瑚橘 */
.hd-cards .hd-card:nth-child(6) {
background:
radial-gradient(ellipse 74% 54% at 34% 44%, rgba(255,170,140,.85) 0%, transparent 65%),
radial-gradient(ellipse 54% 64% at 66% 68%, rgba(255,150,120,.70) 0%, transparent 60%),
radial-gradient(ellipse 44% 40% at 60% 20%, rgba(255,200,175,.60) 0%, transparent 55%),
#ffe0d5;
}
/* 7. 交通服務 — 青藍 */
.hd-cards .hd-card:nth-child(7) {
background:
radial-gradient(ellipse 77% 57% at 29% 39%, rgba(140,215,225,.85) 0%, transparent 65%),
radial-gradient(ellipse 57% 67% at 71% 67%, rgba(120,200,215,.70) 0%, transparent 60%),
radial-gradient(ellipse 47% 43% at 59% 19%, rgba(175,230,238,.60) 0%, transparent 55%),
#d0f0f5;
}
/* 8. AI 顧問 — 靛藍紫 */
.hd-cards .hd-card:nth-child(8) {
background:
radial-gradient(ellipse 79% 59% at 27% 37%, rgba(170,175,255,.85) 0%, transparent 65%),
radial-gradient(ellipse 59% 69% at 73% 65%, rgba(150,155,245,.70) 0%, transparent 60%),
radial-gradient(ellipse 49% 45% at 57% 19%, rgba(200,205,255,.60) 0%, transparent 55%),
#e0e2ff;
}
/* 9. 知識專區 — 暖金黃 */
.hd-cards .hd-card:nth-child(9) {
background:
radial-gradient(ellipse 76% 56% at 30% 40%, rgba(255,225,130,.85) 0%, transparent 65%),
radial-gradient(ellipse 56% 66% at 70% 68%, rgba(255,210,100,.70) 0%, transparent 60%),
radial-gradient(ellipse 46% 42% at 60% 18%, rgba(255,235,170,.60) 0%, transparent 55%),
#fff4cc;
}
/* 移除舊的 accent / ai 特殊色（改用 nth-child 控制） */
.hd-card--accent, .hd-card--accent:hover,
.hd-card--ai, .hd-card--ai:hover { background: unset; border-color: transparent; }
.hd-icon { font-size: 4rem; line-height: 1; }
.hd-icon svg { width: 70px; height: 70px; }
.hd-name {
font-size: 1.5rem; font-weight: 800; color: #2d2d2d; line-height: 1.3;
text-shadow: none; word-break: keep-all;
}
.hd-hint {
font-size: 1rem; color: #555; line-height: 1.4;
text-shadow: none; word-break: keep-all;
}
/* Quick search bar */
.hd-search { width: 100%; margin-bottom: 1.1rem; }
.hd-search-inner {
display: flex; align-items: center;
background: rgba(255,255,255,.97);
border-radius: 1.125rem;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,.20), 0 2px 8px rgba(0,0,0,.08);
max-width: 520px; margin: 0;
border: 1.5px solid rgba(255,255,255,.6);
}
.hd-search-pin {
padding: 0 1rem; font-size: 1.15rem; flex-shrink: 0;
color: var(--primary);
}
.hd-city-sel {
flex: 1; border: none; background: transparent;
font-family: inherit; font-size: .9375rem; color: var(--ink);
padding: .9rem .5rem; cursor: pointer; font-weight: 600;
}
.hd-city-sel:focus { outline: none; }
.hd-search-btn {
flex-shrink: 0; padding: .9rem 1.6rem;
background: linear-gradient(135deg, #F97316, #EA580C);
color: #fff;
font-weight: 800; font-size: .9375rem;
text-decoration: none;
transition: opacity .15s, transform .15s;
white-space: nowrap;
}
.hd-search-btn:hover { opacity: .92; transform: none; }
/* ── 連署橫幅 ── */
.hd-petition-wrap {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
background: rgba(0,0,0,.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255,255,255,.18);
border-radius: 40px;
padding: 9px 18px 9px 12px;
width: fit-content;
margin-top: 4px;
margin-bottom: 1rem;
}
@keyframes petition-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .5; transform: scale(.85); }
}
.hd-petition-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #F97316;
flex-shrink: 0;
animation: petition-pulse 1.6s ease-in-out infinite;
}
.hd-petition-label {
font-size: .72rem;
font-weight: 800;
color: #FED7AA;
letter-spacing: .04em;
white-space: nowrap;
}
.hd-petition-text {
font-size: .76rem;
color: rgba(255,255,255,.82);
white-space: nowrap;
}
@media (max-width: 500px) { .hd-petition-text { display: none; } }
.hd-petition-btn {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #F97316, #DC2626);
color: #fff;
font-size: .76rem;
font-weight: 800;
padding: 6px 14px;
border-radius: 20px;
text-decoration: none;
white-space: nowrap;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 2px 10px rgba(249,115,22,.4);
}
.hd-petition-btn:hover {
transform: translateY(-1px) scale(1.03);
box-shadow: 0 4px 16px rgba(249,115,22,.55);
}
/* Role links */
.hd-roles {
display: flex; align-items: center; gap: .6rem;
flex-wrap: wrap; justify-content: center;
font-size: .8rem;
}
.hd-roles a {
color: rgba(255,255,255,.75); text-decoration: none;
transition: color .15s;
}
.hd-roles a:hover { color: #fff; text-decoration: underline; }
.hd-sep { color: rgba(255,255,255,.35); }
/* Responsive */
@media (max-width: 680px) {
.hd-cards { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 400px) {
.hd-cards { grid-template-columns: repeat(2, 1fr); }
.hd-card { padding: .9rem .5rem .75rem; }
}
/* ── 長照高齡友善首頁強化（Senior-Readable Overrides）── */
.hero-decision {
max-width: 1480px;
}
.hd-tagline {
font-size: 1rem;
letter-spacing: .1em;
}
.hd-title {
font-size: var(--h-hero);
margin-bottom: 2rem;
}
.hd-cards {
gap: .5rem;
}
.hd-card {
min-height: auto;
padding: .75rem .5rem .65rem;
justify-content: center;
border-radius: .85rem;
}
.hd-icon {
font-size: 1.6rem;
filter: drop-shadow(0 1px 4px rgba(0,0,0,.15));
}
.hd-name {
font-size: .82rem;
font-weight: 900;
line-height: 1.2;
letter-spacing: .01em;
color: #fff;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.hd-hint {
font-size: .68rem;
line-height: 1.4;
color: #fff;
font-weight: 600;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.hd-search {
margin-top: .5rem;
margin-bottom: 1.5rem;
}
.hd-search-inner {
max-width: 760px;
min-height: 72px;
border-radius: 1.25rem;
box-shadow: 0 10px 40px rgba(0,0,0,.22);
}
.hd-search-pin {
font-size: 1.5rem;
padding: 0 1.35rem;
color: var(--primary);
}
.hd-city-sel {
font-size: 1.25rem;
font-weight: 800;
min-height: 72px;
padding: 1rem .75rem;
color: var(--ink);
}
.hd-search-btn {
min-height: 72px;
padding: 1rem 2.25rem;
font-size: 1.2rem;
font-weight: 900;
letter-spacing: .02em;
}
.hd-roles {
gap: .9rem;
font-size: 1.1rem;
font-weight: 700;
}
.hd-roles a {
color: rgba(255,255,255,.9);
transition: color .15s;
}
.hd-roles a:hover { color: #fff; }
@media (max-width: 1100px) {
.hero-decision { grid-template-columns: 1fr 360px; }
.hd-right { width: 360px; }
}
@media (max-width: 900px) {
.hero-decision { grid-template-columns: 1fr; }
.hd-right { width: 100%; aspect-ratio: 4/3; }
}
@media (max-width: 680px) {
.hd-card {
min-height: auto;
}
.hd-name {
font-size: .75rem;
}
.hd-hint {
font-size: .62rem;
}
.hd-search-inner {
flex-wrap: wrap;
}
.hd-search-btn {
width: 100%;
}
}
/* ══════════════════════════════════════════════════════════════
輔具商城 — Enhanced Visual: vivid palette + illustrations + steps bar
══════════════════════════════════════════════════════════════ */
/* ── Vivid color override ── */
.assistive-finder-section {
--af-primary: #0D9488;
--af-teal: #06B6D4;
--af-pink: #EC4899;
--af-amber: #F59E0B;
--af-green: #10B981;
--af-bg: #F0FDFA;
background: linear-gradient(160deg, #F0FDFA 0%, #EFF6FF 50%, #F0FDF4 100%);
padding: 80px 0 96px;
overflow: hidden;
position: relative;
}
/* Decorative blobs */
.assistive-finder-section::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 440px; height: 440px;
border-radius: 50%;
background: radial-gradient(circle, rgba(13,148,136,.10) 0%, transparent 65%);
pointer-events: none;
}
.assistive-finder-section::after {
content: '';
position: absolute;
bottom: -80px; left: -80px;
width: 360px; height: 360px;
border-radius: 50%;
background: radial-gradient(circle, rgba(6,182,212,.08) 0%, transparent 65%);
pointer-events: none;
}
/* ── Animated Step Progress Bar ── */
.af-steps-bar {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin: 0 auto 56px;
max-width: 640px;
padding: 28px 32px;
background: rgba(255,255,255,.85);
backdrop-filter: blur(12px);
border-radius: 999px;
border: 1.5px solid rgba(13,148,136,.15);
box-shadow: 0 4px 24px rgba(13,148,136,.1);
position: relative;
z-index: 2;
}
.af-step-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.af-step-circle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2.5px solid #D1D5DB;
background: #fff;
color: #9CA3AF;
font-size: .875rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
transition: all .4s cubic-bezier(.4,0,.2,1);
position: relative;
z-index: 1;
}
.af-step-label {
font-size: .625rem;
font-weight: 700;
color: #9CA3AF;
white-space: nowrap;
transition: color .4s;
letter-spacing: .03em;
}
/* Active step */
.af-step-item.af-step-active .af-step-circle {
border-color: var(--af-primary);
background: var(--af-primary);
color: #fff;
box-shadow: 0 0 0 6px rgba(13,148,136,.18), 0 4px 14px rgba(13,148,136,.3);
animation: afPulse 2s ease-in-out infinite;
}
.af-step-item.af-step-active .af-step-label { color: var(--af-primary); font-weight: 800; }
/* Done step */
.af-step-item.af-step-done .af-step-circle {
border-color: #10B981;
background: #10B981;
color: #fff;
box-shadow: 0 3px 10px rgba(16,185,129,.25);
}
.af-step-item.af-step-done .af-step-label { color: #10B981; }
@keyframes afPulse {
0%, 100% { box-shadow: 0 0 0 6px rgba(13,148,136,.18), 0 4px 14px rgba(13,148,136,.3); }
50% { box-shadow: 0 0 0 10px rgba(13,148,136,.08), 0 4px 20px rgba(13,148,136,.4); }
}
/* Connector line */
.af-step-connector {
flex: 1;
height: 3px;
background: #E5E7EB;
border-radius: 99px;
min-width: 40px;
max-width: 100px;
position: relative;
overflow: hidden;
margin-bottom: 18px;
}
.af-step-connector-fill {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 0%;
background: linear-gradient(90deg, #10B981, #0D9488);
border-radius: 99px;
transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
/* Animate fill when section enters view */
.assistive-finder-section.in-view .af-step-connector-fill {
width: 100%;
}
/* Step 2→3 connector not filled yet */
.af-step-connector:nth-child(4) .af-step-connector-fill,
.af-step-connector:nth-child(6) .af-step-connector-fill {
width: 0%;
transition-delay: 0s;
}
.af-step-connector:nth-child(2) .af-step-connector-fill {
width: 100%;
}
/* ── SVG Illustrations ── */
.af-illus {
width: 72px;
height: 72px;
display: block;
}
/* Illustration container with vivid gradient backgrounds */
.finder-card-img {
height: 108px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition: transform .3s ease;
}
.finder-card:hover .finder-card-img { transform: scale(1.03); }
/* Space-specific gradient bg override */
.finder-card-img--bedroom {
background: linear-gradient(135deg, #CCFBF1 0%, #F3E8FF 100%);
}
.finder-card-img--bathroom {
background: linear-gradient(135deg, #ECFEFF 0%, #E0F2FE 100%);
}
.finder-card-img--kitchen {
background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
}
.finder-card-img--outdoor {
background: linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 100%);
}
.finder-card-img--dementia {
background: linear-gradient(135deg, #FDF4FF 0%, #F3E8FF 100%);
}
.finder-card-img--paediatric {
background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}
.finder-card-img--pressure {
background: linear-gradient(135deg, #FFF1F2 0%, #FFE4E6 100%);
}
/* Card border + shadow override */
.finder-card {
border: 1.5px solid rgba(13,148,136,.1);
box-shadow: 0 4px 18px rgba(13,148,136,.07);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.finder-card:hover {
border-color: rgba(13,148,136,.28);
box-shadow: 0 12px 36px rgba(13,148,136,.16);
transform: translateY(-5px);
}
/* Group label */
.finder-group-label {
display: inline-flex;
align-items: center;
gap: .4rem;
font-size: .75rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--af-primary);
background: rgba(13,148,136,.08);
padding: .3rem .9rem;
border-radius: 999px;
border: 1px solid rgba(13,148,136,.15);
margin-bottom: 22px;
}
/* CTA buttons */
.finder-cta-btn {
background: linear-gradient(135deg, #0D9488, #0F766E);
box-shadow: 0 6px 20px rgba(13,148,136,.3);
border: none;
transition: all .2s;
}
.finder-cta-btn:hover {
background: linear-gradient(135deg, #6D28D9, #134E4A);
box-shadow: 0 8px 28px rgba(13,148,136,.42);
transform: translateY(-3px);
}
.finder-cta-btn.btn-market {
background: #fff;
color: var(--af-teal);
border: 2px solid var(--af-teal);
box-shadow: 0 4px 14px rgba(6,182,212,.15);
}
.finder-cta-btn.btn-market:hover {
background: #ECFEFF;
border-color: var(--af-teal);
box-shadow: 0 6px 20px rgba(6,182,212,.28);
transform: translateY(-2px);
}
/* JS hook: trigger fill animation via IntersectionObserver */
/* ════════════════════════════════════════════════════════════
Modern SaaS Landing Page — lp-* namespace
Care Cloud 照家雲 v2.0
════════════════════════════════════════════════════════════ */
.lp-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 28px;
}
/* 水彩村莊插畫點綴（CTA 下方靠右對齊） */
.house-deco {
margin-top: 1.5rem;
text-align: right;
pointer-events: none;
}
.house-deco img {
display: inline-block;
width: 100%;
max-width: 320px;
height: auto;
}
/* 小屋與信箱水彩點綴（daycare.html 時間軸右下） */
.house-mailbox-deco {
position: absolute;
right: -200px;
bottom: -10px;
pointer-events: none;
z-index: 0;
}
.house-mailbox-deco img {
display: block;
width: 100%;
max-width: 180px;
height: auto;
}
@media (max-width: 1100px) {
.house-mailbox-deco { right: 0; max-width: 140px; }
.house-mailbox-deco img { max-width: 140px; }
}
/* 老夫婦散步水彩條（daycare.html stats 與「適合對象」section 之間） */
.walking-deco {
max-width: 1200px;
margin: 2rem auto 1rem;
padding: 0 28px;
text-align: center;
pointer-events: none;
}
.walking-deco img {
display: inline-block;
width: 100%;
max-width: 600px;
height: auto;
}
/* 家庭照護水彩點綴（home-care.html「身體照護」清單下方空白處） */
.family-deco {
margin-top: 1.5rem;
text-align: center;
pointer-events: none;
}
.family-deco img {
display: inline-block;
width: 100%;
max-width: 280px;
height: auto;
}
/* 護理師水彩點綴（home-care.html 介紹區「查詢居服單位」按鈕下方） */
.nurse-deco {
position: absolute;
right: 1rem;
bottom: 1rem;
pointer-events: none;
z-index: 0;
}
.nurse-deco img {
display: block;
width: 100%;
max-width: 140px;
height: auto;
}
/* 木牌路標水彩點綴（按鈕列上方靠右） */
.signpost-deco {
margin-top: 1rem;
margin-bottom: 0.5rem;
text-align: right;
pointer-events: none;
}
.signpost-deco img {
display: inline-block;
width: 100%;
max-width: 200px;
height: auto;
}
/* 水彩村莊裝飾條 — 滿版 + 無限橫向滾動 */
.village-strip-deco {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
margin-top: 0;
margin-bottom: 1rem;
padding: 0;
overflow: hidden;
pointer-events: none;
}
.village-strip-track {
display: flex;
width: max-content;
animation: village-drive 50s linear infinite;
}
.village-strip-track img {
display: block;
height: 100px;
width: auto;
flex-shrink: 0;
}
@keyframes village-drive {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.village-strip-track { animation: none; }
}
/* ── Section shared ── */
.lp-section {
padding: 72px 0;
}
.lp-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 40px;
gap: 16px;
}
.lp-section-header--center {
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 48px;
}
.lp-eyebrow {
font-size: .72rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--primary);
margin: 0 0 6px;
}
.lp-h2 {
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 900;
color: var(--ink);
margin: 0;
line-height: 1.2;
}
.lp-eyebrow.split-h,
.lp-h2.split-h { color: inherit; }
@keyframes gradShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* 漸層標題已移除動態，改用實色 */
.grad-title { color: var(--ink); }
.lp-steps-section .lp-h2,
.lp-features-section .lp-h2 { color: var(--ink); -webkit-text-fill-color: var(--ink); background: none; animation: none; }
.lp-steps-section .lp-eyebrow,
.lp-features-section .lp-eyebrow { color: var(--primary); -webkit-text-fill-color: var(--primary); background: none; animation: none; }
/* 首頁 hero h1 標題：深色字確保雲朵背景上清晰可讀 */
.hero-video-shell .hd-title {
background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 40%, #7c3aed 70%, #1e1b4b 100%);
background-size: 200% 200%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradShift 5s ease infinite;
filter: drop-shadow(0 2px 0 rgba(255,255,255,0.9)) drop-shadow(0 4px 16px rgba(79,70,229,0.4));
}
/* 首頁 hero tagline：深色字確保雲朵背景上清晰可讀 */
.hero-video-shell .hd-tagline {
background: linear-gradient(270deg, #4f46e5, #7c3aed, #db2777, #7c3aed, #4f46e5);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradShift 4s ease infinite;
font-weight: 800;
letter-spacing: .08em;
filter: drop-shadow(0 1px 0 rgba(255,255,255,0.8)) drop-shadow(0 2px 8px rgba(79,70,229,0.35));
}
/* lp-h2 實色 */
.lp-h2-sub {
font-size: 1rem;
color: var(--muted);
margin: 10px 0 0;
max-width: 480px;
}
.lp-see-all {
white-space: nowrap;
font-size: .875rem;
font-weight: 700;
color: var(--primary);
text-decoration: none;
padding: 8px 18px;
border: 1.5px solid rgba(13,148,136,.25);
border-radius: 999px;
transition: all .18s;
}
.lp-see-all:hover {
background: var(--primary-lt);
border-color: var(--primary);
}
/* ══════════════════════════════════════
① Search Strip
══════════════════════════════════════ */
.lp-search-strip {
position: relative;
background: #fff;
padding: 64px 0 52px;
overflow: hidden;
}
/* Diagonal gradient slab on the right */
.lp-search-diag {
position: absolute;
top: 0; right: 0;
width: 48%;
height: 100%;
background: linear-gradient(145deg, #0D9488 0%, #3B82F6 55%, #F97316 100%);
clip-path: polygon(14% 0, 100% 0, 100% 100%, 0% 100%);
opacity: .88;
pointer-events: none;
}
.lp-search-diag::after {
content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23fff' opacity='.18'/%3E%3C/svg%3E");
}
.lp-search-strip .lp-container {
position: relative;
z-index: 2;
}
.lp-search-eyebrow {
font-size: .8rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--primary);
margin: 0 0 10px;
}
.lp-search-title {
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 900;
color: var(--ink);
margin: 0 0 28px;
line-height: 1.15;
max-width: 540px;
}
/* Search bar */
.lp-searchbar {
display: flex;
align-items: center;
background: #fff;
border-radius: 999px;
box-shadow: 0 8px 40px rgba(13,148,136,.16), 0 2px 8px rgba(0,0,0,.06);
padding: 6px 6px 6px 20px;
gap: 0;
max-width: 680px;
border: 1.5px solid rgba(13,148,136,.12);
}
.lp-sb-icon {
color: var(--muted);
flex-shrink: 0;
display: flex;
align-items: center;
margin-right: 10px;
}
.lp-sb-input {
flex: 1;
border: none;
outline: none;
font-size: .95rem;
color: var(--ink);
background: transparent;
min-width: 0;
}
.lp-sb-input::placeholder { color: #aaa; }
.lp-sb-sep {
width: 1px;
height: 24px;
background: var(--border);
margin: 0 12px;
flex-shrink: 0;
}
.lp-sb-city {
border: none;
outline: none;
font-size: .88rem;
color: var(--ink);
background: transparent;
cursor: pointer;
min-width: 90px;
padding: 0 6px;
}
.lp-sb-btn {
background: linear-gradient(135deg, #F97316, #EA580C);
color: #fff;
font-weight: 800;
font-size: .9rem;
padding: 12px 26px;
border-radius: 999px;
text-decoration: none;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(249,115,22,.35);
transition: transform .15s, box-shadow .15s;
flex-shrink: 0;
}
.lp-sb-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(249,115,22,.45);
}
/* Quick-search chips */
.lp-search-chips {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.lp-chips-label {
font-size: .8rem;
color: var(--muted);
font-weight: 600;
}
.lp-chip {
font-size: .8rem;
font-weight: 600;
color: var(--primary);
background: rgba(13,148,136,.07);
border: 1px solid rgba(13,148,136,.18);
padding: 5px 14px;
border-radius: 999px;
text-decoration: none;
transition: all .15s;
}
.lp-chip:hover {
background: var(--primary);
color: #fff;
border-color: var(--primary);
}
.lp-chip--hot {
background: rgba(249,115,22,.09);
border-color: rgba(249,115,22,.25);
color: #EA580C;
}
.lp-chip--hot:hover { background: #F97316; color: #fff; border-color: #F97316; }
/* ══════════════════════════════════════
② Hot Service Cards
══════════════════════════════════════ */
.lp-hot-section {
padding: 60px 0;
position: relative;
overflow: hidden;
background: linear-gradient(118deg, #ede9ff 0%, #f5f3ff 28%, #ffffff 48%, #e8eeff 72%, #dce8ff 100%);
}
/* 斜向光線 */
.lp-hot-section::before {
content: '';
position: absolute; inset: 0; pointer-events: none; z-index: 0;
background:
linear-gradient(118deg,
transparent 30%,
rgba(255,255,255,.55) 42%,
rgba(255,255,255,.80) 46%,
rgba(255,255,255,.55) 50%,
transparent 62%
),
linear-gradient(118deg,
transparent 50%,
rgba(200,210,255,.25) 58%,
rgba(200,210,255,.40) 61%,
rgba(200,210,255,.25) 64%,
transparent 72%
);
mix-blend-mode: screen;
}
.lp-hot-section .lp-container { position: relative; z-index: 1; }
/* 熱門服務方案標題漸層 */
.lp-hot-section .lp-eyebrow,
.lp-hot-section .lp-h2 {
background: linear-gradient(270deg, #38bdf8, #818cf8, #a78bfa, #f472b6, #818cf8, #38bdf8);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradShift 3s ease infinite;
}
.lp-hot-section .lp-eyebrow .sh-d,
.lp-hot-section .lp-eyebrow .sh-g,
.lp-hot-section .lp-h2 .sh-d,
.lp-hot-section .lp-h2 .sh-g {
background: inherit;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: unset;
}
.lp-hot-scroll {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
overflow-x: auto;
padding-bottom: 8px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: rgba(13,148,136,.2) transparent;
}
.lp-svc-card {
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, #f472b6 0%, #a78bfa 50%, #7C3AED 100%) border-box;
border: 2.5px solid transparent;
border-radius: 20px;
padding: 20px 16px 16px;
display: flex;
flex-direction: column;
gap: 12px;
text-decoration: none;
color: var(--ink);
transition: transform .2s, box-shadow .2s;
position: relative;
min-width: 160px;
box-shadow: 0 2px 16px rgba(167,139,250,.10);
}
.lp-svc-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(167,139,250,.25);
background:
linear-gradient(#fff, #fff) padding-box,
linear-gradient(135deg, #f472b6 0%, #818cf8 40%, #7C3AED 100%) border-box;
}
.lp-svc-icon-wrap {
width: 64px;
height: 64px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lp-svc-home { background: linear-gradient(135deg, #CCFBF1, #F3E8FF); }
.lp-svc-daycare { background: linear-gradient(135deg, #FEF3C7, #FFFBEB); }
.lp-svc-respite { background: linear-gradient(135deg, #FCE7F3, #FDF4FF); }
.lp-svc-assistive { background: linear-gradient(135deg, #DBEAFE, #EFF6FF); }
.lp-svc-nursing { background: linear-gradient(135deg, #D1FAE5, #ECFDF5); }
.lp-svc-transport { background: linear-gradient(135deg, #FFF7ED, #FFEDD5); }
.lp-svc-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lp-svc-type {
font-size: .68rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--muted);
margin: 0;
}
.lp-svc-name {
font-size: .95rem;
font-weight: 800;
color: var(--ink);
margin: 0;
line-height: 1.3;
}
.lp-svc-meta {
font-size: .75rem;
color: var(--muted);
margin: 2px 0 0;
display: flex;
align-items: center;
gap: 4px;
}
.lp-svc-meta svg { flex-shrink: 0; }
.lp-svc-price {
font-size: .9rem;
font-weight: 800;
color: var(--primary);
margin: 6px 0 0;
}
.lp-svc-price span {
font-size: .75rem;
font-weight: 500;
color: var(--muted);
}
.lp-svc-badge {
position: absolute;
top: 12px;
right: 12px;
font-size: .65rem;
font-weight: 800;
padding: 3px 8px;
border-radius: 999px;
background: rgba(13,148,136,.1);
color: var(--primary);
letter-spacing: .06em;
}
.lp-badge-yellow { background: rgba(245,158,11,.12); color: #B45309; }
.lp-badge-pink { background: rgba(236,72,153,.1); color: #BE185D; }
.lp-badge-blue { background: rgba(59,130,246,.12); color: #1D4ED8; }
.lp-badge-green { background: rgba(16,185,129,.1); color: #065F46; }
.lp-badge-orange { background: rgba(249,115,22,.12); color: #C2410C; }
/* ══════════════════════════════════════
③ Steps Section
══════════════════════════════════════ */
.lp-steps-section {
background: #fff;
}
.lp-steps-grid {
display: flex;
align-items: flex-start;
gap: 0;
}
.lp-step-card {
flex: 1;
background: #fff;
border-radius: 20px;
padding: 32px 28px;
border: 1px solid #E5E7EB;
transition: border-color .2s, transform .2s;
position: relative;
}
.lp-step-card:hover {
border-color: #1535a8;
transform: translateY(-3px);
}
.lp-step-num {
font-size: 3.5rem;
font-weight: 900;
color: rgba(21,53,168,.10);
line-height: 1;
margin-bottom: 16px;
font-variant-numeric: tabular-nums;
letter-spacing: -.04em;
}
.lp-step-icon {
margin-bottom: 16px;
}
.lp-step-card h3 {
font-size: 1rem;
font-weight: 800;
color: var(--ink);
margin: 0 0 8px;
}
.lp-step-card p {
font-size: .84rem;
color: #6B7280;
line-height: 1.65;
margin: 0;
}
.lp-step-arrow {
font-size: 1.2rem;
color: #D1D5DB;
padding: 0 10px;
padding-top: 60px;
flex-shrink: 0;
}
/* ══════════════════════════════════════
④ Features Section
══════════════════════════════════════ */
.lp-features-section {
background: #1535a8;
padding: 72px 0;
}
.lp-features-section .lp-h2 { color: #fff; -webkit-text-fill-color: #fff; }
.lp-features-section .lp-eyebrow { color: rgba(255,255,255,.6); -webkit-text-fill-color: rgba(255,255,255,.6); }
.lp-features-section .lp-h2-sub { color: rgba(255,255,255,.6); }
.lp-features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.lp-feature-card {
background: rgba(255,255,255,.08);
border-radius: 24px;
padding: 36px 28px;
border: 1px solid rgba(255,255,255,.12);
transition: background .2s, transform .2s;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
overflow: hidden;
}
.lp-feature-card::before { display: none; }
.lp-feature-card:hover {
background: rgba(255,255,255,.14);
transform: translateY(-4px);
}
.lp-feature-card h3 {
font-size: 1.1rem;
font-weight: 800;
color: #fff;
margin: 0;
}
.lp-feature-card p {
font-size: .875rem;
color: rgba(255,255,255,.6);
line-height: 1.65;
margin: 0;
flex: 1;
}
.lp-feature-stats {
display: flex;
align-items: baseline;
gap: 6px;
margin-top: 4px;
padding-top: 16px;
border-top: 1px solid rgba(255,255,255,.15);
}
.lp-stat-num {
font-size: 1.6rem;
font-weight: 900;
color: #fff;
line-height: 1;
}
.lp-stat-label {
font-size: .78rem;
color: rgba(255,255,255,.55);
font-weight: 600;
}
/* ══════════════════════════════════════
⑤ CTA Banner — plumbing split layout
══════════════════════════════════════ */
.lp-cta-banner {
background: #fff;
padding: 100px 0;
border-top: 1px solid #e8edf5;
}
.lp-cta-bg { display: none; }
.lp-cta-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
/* 左：視覺統計面板 */
.lp-cta-visual {
display: flex;
flex-direction: column;
gap: 16px;
}
.lp-cta-vis-card {
background: #0a0f1e;
border-radius: 1.25rem;
padding: 28px 32px;
display: flex;
flex-direction: column;
gap: 6px;
}
.lp-cta-vis-card--main {
background: linear-gradient(135deg, #1535a8 0%, #0f2080 100%);
}
.lp-cta-vis-card--accent {
background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
}
.lp-cta-vis-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.lp-cta-vis-card--sm { padding: 22px 24px; }
.lp-cta-vis-num {
font-size: 2.4rem;
font-weight: 900;
color: #fff;
letter-spacing: -.04em;
line-height: 1;
}
.lp-cta-vis-num span {
font-size: 1.2rem;
opacity: .7;
margin-left: 2px;
}
.lp-cta-vis-label {
font-size: .78rem;
color: rgba(255,255,255,.55);
font-weight: 600;
}
.lp-cta-vis-card--bar {
background: #f1f5f9;
padding: 20px 24px;
gap: 10px;
}
.lp-cta-vis-bar-label {
display: flex;
justify-content: space-between;
font-size: .82rem;
font-weight: 700;
color: #0a0f1e;
}
.lp-cta-vis-bar-track {
height: 8px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
}
.lp-cta-vis-bar-fill {
height: 100%;
background: linear-gradient(90deg, #1535a8, #3b82f6);
border-radius: 999px;
}
/* 右：文案 */
.lp-cta-copy { max-width: 520px; }
.lp-cta-title {
font-size: clamp(2rem, 4vw, 3.2rem);
font-weight: 900;
margin: 0 0 20px;
line-height: 1.1;
color: #0a0f1e;
-webkit-text-fill-color: #0a0f1e;
background: none;
animation: none;
letter-spacing: -.04em;
}
.lp-cta-sub {
font-size: 1rem;
color: #6b7280;
line-height: 1.7;
margin: 0 0 32px;
}
.lp-cta-checks {
list-style: none;
margin: 0 0 36px;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.lp-cta-checks li {
display: flex;
align-items: center;
gap: 12px;
font-size: .95rem;
font-weight: 700;
color: #0a0f1e;
}
.lp-cta-check-icon {
width: 24px;
height: 24px;
border-radius: 50%;
background: #1535a8;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.lp-cta-check-icon::after {
content: '';
display: block;
width: 6px;
height: 10px;
border: 2px solid #fff;
border-top: none;
border-left: none;
transform: rotate(45deg) translate(-1px, -1px);
}
.lp-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.lp-cta-btn {
display: inline-block;
text-align: center;
font-size: .92rem;
font-weight: 800;
padding: 13px 28px;
border-radius: 999px;
text-decoration: none;
transition: all .2s;
white-space: nowrap;
border: 2px solid transparent;
}
.lp-cta-btn--primary {
background: #0a0f1e;
color: #fff;
}
.lp-cta-btn--primary:hover {
background: #1535a8;
transform: translateY(-2px);
}
.lp-cta-btn--outline {
background: transparent;
color: #0a0f1e;
border-color: #d1d5db;
}
.lp-cta-btn--outline:hover {
border-color: #0a0f1e;
background: #f8fafc;
}
.lp-cta-btn--line {
background: #06C755;
color: #fff;
box-shadow: 0 4px 20px rgba(6,199,85,.3);
}
.lp-cta-btn--line:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(6,199,85,.45);
}
@media (max-width: 900px) {
.lp-cta-split { grid-template-columns: 1fr; gap: 40px; }
.lp-cta-visual { display: none; }
}
/* ══════════════════════════════════════
Responsive
══════════════════════════════════════ */
@media (max-width: 1100px) {
.lp-hot-scroll { grid-template-columns: repeat(3, minmax(180px, 1fr)); }
.lp-steps-grid { flex-wrap: wrap; }
.lp-steps-grid .lp-step-card { flex: 1 1 calc(50% - 40px); }
.lp-steps-grid .lp-step-arrow:nth-child(4) { display: none; }
}
@media (max-width: 768px) {
.lp-search-diag { display: none; }
.lp-searchbar { flex-wrap: wrap; border-radius: 16px; padding: 12px; gap: 8px; }
.lp-sb-sep { display: none; }
.lp-sb-input { width: 100%; }
.lp-sb-city { width: 100%; }
.lp-sb-btn { width: 100%; text-align: center; border-radius: 12px; }
.lp-hot-scroll { grid-template-columns: repeat(2, 1fr); }
.lp-features-grid { grid-template-columns: 1fr; }
.lp-steps-grid { flex-direction: column; }
.lp-steps-grid .lp-step-arrow { display: none; }
.lp-cta-actions { flex-direction: column; align-items: stretch; }
.lp-cta-btn { width: 100%; }
.lp-section-header { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
.lp-hot-scroll { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
.lp-search-title { font-size: 1.5rem; }
}
/* ══════════════════════════════════════
長照知識專區 — LTC Blog Section
══════════════════════════════════════ */
.ltc-blog-section {
background: #F8FAFC;
padding: 64px 0 72px;
border-top: 1px solid #E2E8F0;
}
/* ════════════════════════════════════════
知識＋申請資訊 融合區塊 — plumbing style
════════════════════════════════════════ */
/* ════════════════════════════════════════
申請流程 + 補助 + 知識 融合區塊
plumbing.framer.media light style
════════════════════════════════════════ */
.lp-apply-band {
background: #eef2fb;
padding: 96px 0 80px;
}
/* 標題區 */
.lp-apply-header {
text-align: center;
margin-bottom: 56px;
}
.lp-apply-badge {
display: inline-block;
font-size: .7rem;
font-weight: 700;
letter-spacing: .18em;
text-transform: uppercase;
color: #1535a8;
background: rgba(21,53,168,.08);
border: 1px solid rgba(21,53,168,.18);
border-radius: 999px;
padding: 4px 14px;
margin-bottom: 18px;
}
.lp-apply-heading {
font-size: clamp(1.8rem, 4vw, 3rem);
font-weight: 900;
color: #0a0f1e;
letter-spacing: -.04em;
margin: 0 0 14px;
line-height: 1.1;
}
.lp-apply-lead {
font-size: 1rem;
color: #5a6a8a;
max-width: 480px;
margin: 0 auto;
line-height: 1.65;
}
/* 5 步驟 */
.lp-apply-steps {
display: flex;
align-items: flex-start;
gap: 0;
margin-bottom: 40px;
background: #fff;
border-radius: 1.25rem;
padding: 36px 24px;
box-shadow: 0 2px 12px rgba(10,15,30,.06);
}
.lp-apply-step {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
padding: 0 8px;
}
.lp-apply-num {
width: 44px;
height: 44px;
border-radius: 50%;
background: #1535a8;
color: #fff;
font-size: 1.1rem;
font-weight: 900;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lp-apply-step strong {
font-size: .88rem;
font-weight: 800;
color: #0a0f1e;
display: block;
}
.lp-apply-step p {
font-size: .78rem;
color: #6b7280;
line-height: 1.55;
margin: 0;
}
.lp-apply-arrow {
color: #cbd5e1;
font-size: 1.2rem;
padding-top: 12px;
flex-shrink: 0;
}
/* 補助比例 + 費用表 */
.lp-apply-cost {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1.25rem;
padding: 32px;
margin-bottom: 24px;
box-shadow: 0 2px 12px rgba(10,15,30,.05);
}
.lp-apply-cost-label {
font-size: .72rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: #94a3b8;
margin-bottom: 20px;
}
.lp-apply-copay-row {
display: grid;
grid-template-columns: repeat(3, auto) 1fr;
gap: 16px;
align-items: start;
}
.lp-apply-copay {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: .75rem;
padding: 16px 20px;
display: flex;
flex-direction: column;
gap: 4px;
}
.lp-apply-copay-tier {
font-size: .72rem;
font-weight: 700;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: .1em;
}
.lp-apply-copay-pct {
font-size: 1.1rem;
font-weight: 900;
color: #0a0f1e;
}
.lp-apply-copay-pct em {
font-style: normal;
color: #1535a8;
}
.lp-apply-copay--mid .lp-apply-copay-pct em { color: #7c3aed; }
.lp-apply-copay--low .lp-apply-copay-pct em { color: #059669; }
.lp-apply-copay-sub {
font-size: .75rem;
color: #94a3b8;
}
.lp-apply-fee-table {
display: flex;
flex-direction: column;
border-radius: .75rem;
overflow: hidden;
border: 1px solid #e2e8f0;
}
.lp-apply-fee-row {
display: grid;
grid-template-columns: 1fr 1fr 1.5fr;
gap: 12px;
padding: 12px 16px;
font-size: .8rem;
color: #6b7280;
border-bottom: 1px solid #f1f5f9;
}
.lp-apply-fee-row:last-child { border-bottom: none; }
.lp-apply-fee-head {
background: #f8fafc;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #94a3b8;
}
.lp-apply-fee-row strong { color: #0a0f1e; font-weight: 700; }
/* 底部知識 + 申請資訊卡 */
.lp-apply-info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.lp-apply-info-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1.25rem;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 12px;
text-decoration: none;
transition: border-color .2s, box-shadow .2s, transform .2s;
box-shadow: 0 2px 8px rgba(10,15,30,.05);
}
.lp-apply-info-card--purple:hover {
border-color: #c4b5fd;
box-shadow: 0 8px 28px rgba(124,58,237,.1);
transform: translateY(-3px);
}
.lp-apply-info-card--teal:hover {
border-color: #99f6e4;
box-shadow: 0 8px 28px rgba(13,148,136,.08);
}
.lp-apply-info-badge {
display: inline-block;
align-self: flex-start;
font-size: .68rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #7c3aed;
background: rgba(124,58,237,.08);
border: 1px solid rgba(124,58,237,.2);
border-radius: 999px;
padding: 3px 12px;
}
.lp-apply-info-badge--teal {
color: #0d9488;
background: rgba(13,148,136,.08);
border-color: rgba(13,148,136,.2);
}
.lp-apply-info-title {
font-size: clamp(1rem, 2vw, 1.35rem);
font-weight: 900;
color: #0a0f1e;
margin: 0;
line-height: 1.25;
letter-spacing: -.02em;
}
.lp-apply-info-desc {
font-size: .88rem;
color: #6b7280;
margin: 0;
}
.lp-apply-info-link {
margin-top: auto;
font-size: .88rem;
font-weight: 700;
color: #7c3aed;
}
.lp-apply-info-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.lp-apply-info-list li {
font-size: .9rem;
color: #6b7280;
padding-left: 18px;
position: relative;
line-height: 1.55;
}
.lp-apply-info-list li::before {
content: '·';
position: absolute;
left: 4px;
color: #0d9488;
font-weight: 900;
}
.lp-apply-info-list strong { color: #0a0f1e; font-weight: 900; }
@media (max-width: 900px) {
.lp-apply-copay-row { grid-template-columns: repeat(3, 1fr); }
.lp-apply-fee-table { display: none; }
.lp-apply-info-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.lp-apply-steps { flex-wrap: wrap; padding: 24px 16px; }
.lp-apply-step { flex: 1 1 40%; }
.lp-apply-arrow { display: none; }
.lp-apply-copay-row { grid-template-columns: 1fr; }
}
.lp-info-band {
background: #0a0f1e;
padding: 64px 0;
position: relative;
overflow: hidden;
}
.lp-info-band::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 55% 80% at 10% 50%, rgba(21,53,168,.45) 0%, transparent 65%),
radial-gradient(ellipse 45% 70% at 90% 50%, rgba(20,184,166,.18) 0%, transparent 65%);
pointer-events: none;
}
.lp-info-band-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.lp-info-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: 1.25rem;
padding: 36px 40px;
display: flex;
flex-direction: column;
gap: 12px;
transition: background .2s, border-color .2s, transform .2s;
text-decoration: none;
}
.lp-info-card--knowledge:hover {
background: rgba(255,255,255,.1);
border-color: rgba(255,255,255,.22);
transform: translateY(-3px);
}
.lp-info-badge {
display: inline-block;
align-self: flex-start;
font-size: .68rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: #a78bfa;
background: rgba(167,139,250,.12);
border: 1px solid rgba(167,139,250,.28);
border-radius: 999px;
padding: 3px 12px;
}
.lp-info-badge--teal {
color: #5eead4;
background: rgba(94,234,212,.1);
border-color: rgba(94,234,212,.25);
}
.lp-info-title {
font-size: clamp(1.15rem, 2vw, 1.45rem);
font-weight: 900;
color: #fff;
margin: 0;
line-height: 1.25;
letter-spacing: -.02em;
}
.lp-info-desc {
font-size: .88rem;
color: rgba(255,255,255,.55);
margin: 0;
line-height: 1.6;
}
.lp-info-link {
margin-top: auto;
font-size: .88rem;
font-weight: 700;
color: #a78bfa;
display: inline-flex;
align-items: center;
gap: 4px;
}
.lp-info-list {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 10px;
}
.lp-info-list li {
font-size: .9rem;
color: rgba(255,255,255,.65);
line-height: 1.55;
padding-left: 20px;
position: relative;
}
.lp-info-list li::before {
content: '·';
position: absolute;
left: 6px;
color: #5eead4;
font-weight: 900;
}
.lp-info-list strong {
color: #fff;
font-weight: 900;
}
@media (max-width: 768px) {
.lp-info-band-grid { grid-template-columns: 1fr; }
.lp-info-card { padding: 28px 24px; }
}
/* 入口卡（首頁替換版）*/
.ltcb-promo-card {
display: flex;
align-items: center;
justify-content: space-between;
background: linear-gradient(120deg,#F5F3FF 0%,#EDE9FE 60%,#FAF5FF 100%);
border: 1px solid #DDD6FE;
border-radius: 1.25rem;
padding: 28px 36px;
text-decoration: none;
color: inherit;
transition: box-shadow .18s, transform .18s;
gap: 1.5rem;
margin: 0 0 2rem;
}
.ltcb-promo-card:hover { box-shadow: 0 8px 32px rgba(124,58,237,.15); transform: translateY(-2px); }
.ltcb-promo-eyebrow {
display: inline-block;
font-size: .7rem; font-weight: 800; letter-spacing: .1em;
text-transform: uppercase; color: #7C3AED;
background: #EDE9FE; border-radius: 999px;
padding: 3px 12px; margin-bottom: 8px;
}
.ltcb-promo-title {
font-size: clamp(1.3rem,2.5vw,1.75rem);
font-weight: 900; margin: 0 0 6px;
background: linear-gradient(270deg, #38bdf8, #818cf8, #a78bfa, #f472b6, #818cf8, #38bdf8);
background-size: 300% 300%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradShift 3s ease infinite;
}
.ltcb-promo-desc { font-size: .85rem; color: #64748B; margin: 0; }
.ltcb-promo-cta {
font-size: .9rem; font-weight: 800; color: #7C3AED;
white-space: nowrap; flex-shrink: 0;
background: #fff; border: 1.5px solid #DDD6FE;
border-radius: .65rem; padding: 10px 22px;
transition: background .15s;
}
.ltcb-promo-card:hover .ltcb-promo-cta { background: #F5F3FF; }
.ltcb-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 36px;
flex-wrap: wrap;
}
.ltcb-eyebrow {
display: inline-block;
font-size: .7rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #2563EB;
background: #EFF6FF;
border-radius: 20px;
padding: 3px 10px;
margin-bottom: 8px;
}
.ltcb-title {
font-size: 1.65rem;
font-weight: 800;
color: #0F172A;
margin: 0 0 6px;
line-height: 1.2;
}
.ltcb-desc { font-size: .85rem; color: #64748B; margin: 0; }
.ltcb-week-badge {
font-size: .75rem;
font-weight: 600;
color: #475569;
background: #fff;
border: 1px solid #CBD5E1;
border-radius: 8px;
padding: 6px 14px;
white-space: nowrap;
align-self: flex-start;
margin-top: 4px;
}
/* 主卡 2欄 */
.ltcb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 40px;
}
@media (max-width: 700px) { .ltcb-grid { grid-template-columns: 1fr; } }
.ltcb-card {
border-radius: 16px;
padding: 24px;
border: 1px solid rgba(0,0,0,.06);
display: flex;
flex-direction: column;
gap: 12px;
transition: box-shadow .18s, transform .18s;
}
.ltcb-card:hover {
box-shadow: 0 8px 28px rgba(0,0,0,.1);
transform: translateY(-2px);
}
.ltcb-card-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ltcb-city-tag {
font-size: .7rem;
font-weight: 700;
border-radius: 6px;
padding: 3px 8px;
}
.ltcb-service-tag {
font-size: .7rem;
font-weight: 600;
color: #64748B;
background: #F1F5F9;
border-radius: 6px;
padding: 3px 8px;
}
.ltcb-card-title {
font-size: 1.05rem;
font-weight: 700;
color: #0F172A;
line-height: 1.45;
margin: 0;
}
.ltcb-card-summary {
font-size: .82rem;
color: #475569;
line-height: 1.65;
margin: 0;
}
.ltcb-card-topics { display: flex; gap: 6px; flex-wrap: wrap; }
.ltcb-topic {
font-size: .68rem;
font-weight: 600;
border-radius: 5px;
padding: 2px 8px;
}
.ltcb-card-foot {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid rgba(0,0,0,.06);
}
.ltcb-date, .ltcb-read { font-size: .72rem; color: #94A3B8; }
.ltcb-readmore {
margin-left: auto;
font-size: .78rem;
font-weight: 700;
text-decoration: none;
transition: opacity .15s;
}
.ltcb-readmore:hover { opacity: .7; }
/* 往期小卡 */
.ltcb-archive-hd {
display: flex;
align-items: center;
gap: 12px;
font-size: .78rem;
font-weight: 700;
color: #94A3B8;
text-transform: uppercase;
letter-spacing: .06em;
margin-bottom: 16px;
}
.ltcb-archive-line { flex: 1; height: 1px; background: #E2E8F0; }
.ltcb-archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 700px) { .ltcb-archive-grid { grid-template-columns: 1fr; } }
.ltcb-arc-card {
background: #fff;
border-radius: 10px;
border: 1px solid #E2E8F0;
padding: 14px 16px;
display: flex;
gap: 10px;
align-items: flex-start;
}
.ltcb-arc-dot {
width: 8px; height: 8px;
border-radius: 50%;
flex-shrink: 0;
margin-top: 5px;
}
.ltcb-arc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ltcb-arc-city { font-size: .68rem; font-weight: 700; }
.ltcb-arc-title {
font-size: .8rem;
font-weight: 600;
color: #1E293B;
text-decoration: none;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ltcb-arc-title:hover { text-decoration: underline; }
.ltcb-arc-date { font-size: .66rem; color: #94A3B8; }
/* SEO 常見問題 badge */
.ltcb-seo-badge {
font-size: .68rem;
color: #64748B;
background: #F1F5F9;
border-radius: 6px;
padding: 2px 10px;
white-space: nowrap;
}
/* SEO 3欄卡 */
.ltcb-seo-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
@media (max-width: 700px) { .ltcb-seo-grid { grid-template-columns: 1fr; } }
.ltcb-seo-card {
background: #fff;
border-radius: 14px;
border: 1px solid #E2E8F0;
border-top: 3px solid var(--ltcb-accent, #2563EB);
padding: 20px;
display: flex;
gap: 14px;
align-items: flex-start;
transition: box-shadow .18s, transform .18s;
}
.ltcb-seo-card:hover {
box-shadow: 0 6px 22px rgba(0,0,0,.09);
transform: translateY(-2px);
}
.ltcb-seo-icon {
width: 36px; height: 36px;
border-radius: 10px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-weight: 900;
font-size: 1.05rem;
}
.ltcb-seo-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.ltcb-seo-title {
font-size: .88rem;
font-weight: 700;
color: #0F172A;
line-height: 1.45;
margin: 0;
}
.ltcb-seo-summary {
font-size: .76rem;
color: #64748B;
line-height: 1.6;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ══════════════════════════════════════
活動資訊跑馬燈 — News Marquee
══════════════════════════════════════ */
.news-marquee-section {
background: #F8FAFC;
border-top: 1px solid #E2E8F0;
border-bottom: 1px solid #E2E8F0;
padding: 24px 0;
overflow: hidden;
}
.news-marquee-wrap {
overflow: hidden;
position: relative;
}
/* fade edges */
.news-marquee-wrap::before,
.news-marquee-wrap::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 80px;
z-index: 2;
pointer-events: none;
}
.news-marquee-wrap::before { left: 0; background: linear-gradient(to right, #F8FAFC, transparent); }
.news-marquee-wrap::after { right: 0; background: linear-gradient(to left, #F8FAFC, transparent); }
@keyframes nmq-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.news-marquee-track {
display: flex;
gap: 16px;
width: max-content;
animation: nmq-scroll 32s linear infinite;
}
.news-marquee-track:hover {
animation-play-state: paused;
}
/* Individual card */
.nmq-card {
display: flex;
align-items: stretch;
width: 280px;
min-height: 130px;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
box-shadow: 0 2px 10px rgba(0,0,0,.08);
flex-shrink: 0;
transition: transform .18s, box-shadow .18s;
}
.nmq-card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
/* Left logo strip */
.nmq-logo {
width: 64px;
min-width: 64px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-weight: 800;
font-size: .85rem;
line-height: 1.25;
color: #fff;
padding: 12px 6px;
}
.nmq-logo small { font-size: .65rem; font-weight: 600; opacity: .85; }
/* Right body */
.nmq-body {
flex: 1;
padding: 12px 14px;
background: #fff;
display: flex;
flex-direction: column;
gap: 3px;
justify-content: center;
}
.nmq-tag {
font-size: .65rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: #64748B;
background: #F1F5F9;
border-radius: 4px;
padding: 2px 6px;
align-self: flex-start;
}
.nmq-title {
font-size: .95rem;
font-weight: 700;
color: #1E293B;
line-height: 1.35;
}
.nmq-date {
font-size: .82rem;
font-weight: 700;
color: #2563EB;
}
.nmq-date small { font-size: .65rem; color: #64748B; }
.nmq-sub {
font-size: .7rem;
color: #64748B;
line-height: 1.4;
}
/* Colour themes */
.nmq-red .nmq-logo { background: linear-gradient(160deg,#C0392B,#E74C3C); }
.nmq-blue .nmq-logo { background: linear-gradient(160deg,#1E4799,#2E86DE); }
.nmq-green .nmq-logo { background: linear-gradient(160deg,#1A7A4A,#27AE60); }
.nmq-purple .nmq-logo { background: linear-gradient(160deg,#6B3FA0,#9B59B6); }
.nmq-orange .nmq-logo { background: linear-gradient(160deg,#D4622A,#E67E22); }
.nmq-teal .nmq-logo { background: linear-gradient(160deg,#0E7490,#06B6D4); }
/* ══════════════════════════════════════
好感照護提案 — Feature Cards
══════════════════════════════════════ */
.muji-proposal-section {
background: #1535a8;
padding: 72px 0 80px;
}
/* Header */
.mp-header {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 36px;
}
.mp-title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 900;
letter-spacing: -.03em;
margin: 0;
color: #fff;
-webkit-text-fill-color: #fff;
background: none;
animation: none;
}
.mp-title .sh-d,
.mp-title .sh-g {
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: #fff;
background-clip: unset;
color: #fff;
}
.mp-more {
font-size: .85rem;
color: rgba(255,255,255,.55);
text-decoration: none;
font-weight: 500;
letter-spacing: .02em;
transition: color .15s;
}
.mp-more:hover { color: #fff; }
/* Tabs */
.mp-tabs {
display: flex;
gap: 0;
border-bottom: 1px solid rgba(255,255,255,.18);
margin-bottom: 20px;
}
.mp-tab {
padding: 10px 20px 11px;
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
font: inherit;
font-size: .9rem;
font-weight: 500;
color: rgba(255,255,255,.5);
cursor: pointer;
transition: all .15s;
letter-spacing: .02em;
}
.mp-tab:hover { color: rgba(255,255,255,.85); }
.mp-tab.active {
color: #fff;
border-bottom-color: #fff;
font-weight: 700;
}
/* Filter pills */
.mp-filters {
display: flex;
gap: 8px;
margin-bottom: 28px;
}
.mp-filter {
padding: 6px 16px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.3);
background: transparent;
font: inherit;
font-size: .8rem;
font-weight: 500;
color: rgba(255,255,255,.65);
cursor: pointer;
transition: all .15s;
}
.mp-filter:hover { border-color: rgba(255,255,255,.7); color: #fff; }
.mp-filter.active {
background: #fff;
border-color: #fff;
color: #1535a8;
}
/* ── Cards grid — 3 × 2 ── */
.mp-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.mp-card {
display: flex;
flex-direction: column;
gap: 1.2rem;
text-decoration: none;
color: inherit;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
border-radius: 20px;
padding: 2rem 1.75rem 1.75rem;
transition: background .2s, transform .2s;
}
.mp-card:hover {
background: rgba(255,255,255,.14);
transform: translateY(-3px);
}
/* Card head: icon above title (stacked) */
.mp-card-head {
display: flex;
flex-direction: column;
gap: 1.1rem;
}
/* Icon: no circle, just white SVG */
.mp-icon {
width: auto; height: auto;
border-radius: 0;
background: transparent !important;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: transform .2s;
}
.mp-card:hover .mp-icon { transform: scale(1.08); }
.mp-icon svg { stroke: rgba(255,255,255,.9) !important; }
/* colour modifier classes — all transparent on dark bg */
.mp-icon--pink, .mp-icon--blue, .mp-icon--yellow,
.mp-icon--green, .mp-icon--purple, .mp-icon--coral,
.mp-icon--sky, .mp-icon--teal { background: transparent; }
/* Card title */
.mp-card-title {
margin: 0;
font-size: 1.05rem;
font-weight: 700;
color: #fff;
line-height: 1.3;
letter-spacing: -.01em;
}
/* Card description */
.mp-card-desc {
margin: 0;
font-size: .875rem;
color: rgba(255,255,255,.6);
line-height: 1.7;
}
/* Bottom CTA */
.mp-bottom-cta {
text-align: center;
margin-top: 44px;
}
.mp-view-all {
font-size: .9rem;
color: rgba(255,255,255,.6);
text-decoration: none;
font-weight: 500;
letter-spacing: .03em;
padding-bottom: 2px;
border-bottom: 1px solid rgba(255,255,255,.25);
transition: all .15s;
}
.mp-view-all:hover { color: #fff; border-bottom-color: #fff; }
/* Responsive */
@media (max-width: 900px) { .mp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) {
.mp-grid { grid-template-columns: 1fr; gap: 12px; }
.mp-tab { padding: 8px 12px; font-size: .82rem; }
.mp-title { font-size: 1.4rem; }
}
/* ── AI 對話聊天介面 ── */
.ai-chat-shell {
display: flex;
flex-direction: column;
height: 480px;
max-width: 720px;
margin: 0 auto;
background: #fff;
border: 1px solid var(--border);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(13,148,136,.08);
}
.ai-chat-messages {
flex: 1;
overflow-y: auto;
padding: 24px 20px 16px;
display: flex;
flex-direction: column;
gap: 16px;
scroll-behavior: smooth;
}
.ai-bubble {
display: flex;
gap: 10px;
align-items: flex-start;
max-width: 90%;
}
.ai-bubble--user {
flex-direction: row-reverse;
align-self: flex-end;
}
.ai-bubble-avatar {
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--primary-lt);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.ai-bubble--user .ai-bubble-avatar {
background: #FFF7ED;
}
.ai-bubble-body {
background: var(--primary-lt);
color: var(--ink);
padding: 12px 16px;
border-radius: 0 16px 16px 16px;
font-size: .92rem;
line-height: 1.65;
white-space: pre-wrap;
word-break: break-word;
}
.ai-bubble--user .ai-bubble-body {
background: var(--accent);
color: #fff;
border-radius: 16px 0 16px 16px;
}
.ai-bubble--typing .ai-bubble-body {
min-width: 56px;
min-height: 38px;
}
.ai-typing-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--muted);
margin: 0 2px;
animation: aiDotBounce .9s ease-in-out infinite both;
}
.ai-typing-dot:nth-child(2) { animation-delay: .18s; }
.ai-typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes aiDotBounce {
0%, 80%, 100% { transform: translateY(0); opacity: .5; }
40% { transform: translateY(-6px); opacity: 1; }
}
.ai-chat-input-row {
display: flex;
gap: 10px;
padding: 14px 16px;
border-top: 1px solid var(--border);
background: #fafafa;
}
.ai-chat-input {
flex: 1;
padding: 10px 16px;
border: 1px solid var(--border);
border-radius: 999px;
font: inherit;
font-size: .92rem;
color: var(--ink);
background: #fff;
transition: border-color .15s;
outline: none;
}
.ai-chat-input:focus { border-color: var(--primary); }
.ai-chat-send {
padding: 10px 22px;
background: var(--primary);
color: #fff;
border: none;
border-radius: 999px;
font: inherit;
font-size: .9rem;
font-weight: 700;
cursor: pointer;
transition: opacity .15s, transform .15s;
white-space: nowrap;
}
.ai-chat-send:hover { opacity: .88; transform: translateY(-1px); }
.ai-chat-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
@media (max-width: 600px) {
.ai-chat-shell { height: 420px; }
.ai-bubble { max-width: 100%; }
}
/* ══════════════════════════════════════
SEO 輪椅補助指南區塊 (#wheelchair-subsidy-guide)
══════════════════════════════════════ */
/* ══════════════════════════════════════
跑馬燈帶 .marquee-section
══════════════════════════════════════ */
.marquee-section {
position: relative;
width: 100%;
height: 170px;
overflow: hidden;
background: transparent;
margin: 0;
}
.marquee-band {
position: absolute;
left: -25%;
width: 150%;
white-space: nowrap;
overflow: hidden;
padding: 13px 0;
box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.marquee-band--pink {
top: 22px;
transform: rotate(-7deg);
background: #FF2D78;
z-index: 2;
}
.marquee-band--yellow {
bottom: 22px;
transform: rotate(7deg);
background: #FFD600;
z-index: 1;
}
.marquee-inner {
display: inline-flex;
animation: marqueeFwd 22s linear infinite;
}
.marquee-inner--rev {
animation-direction: reverse;
animation-duration: 26s;
}
.marquee-band--pink .marquee-inner span {
color: #fff;
font-family: "Inter", "Noto Sans TC", sans-serif;
font-weight: 900;
font-size: 1.35rem;
letter-spacing: .12em;
text-transform: uppercase;
padding-right: 1.2rem;
text-shadow: 0 1px 4px rgba(0,0,0,.20);
}
.marquee-band--yellow .marquee-inner span {
color: #111;
font-family: "Inter", "Noto Sans TC", sans-serif;
font-weight: 900;
font-size: 1.35rem;
letter-spacing: .12em;
text-transform: uppercase;
padding-right: 1.2rem;
}
@keyframes marqueeFwd {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-inner { animation: none; }
}
.seo-faq-section {
background: #ffffff;
padding: 5rem 0 4.5rem;
border-top: 1px solid #E2EDF8;
}
.seo-faq-head {
text-align: center;
margin-bottom: 3rem;
}
.seo-faq-title {
font-size: clamp(1.6rem, 3vw, 2.2rem);
font-weight: 900;
margin: .4rem 0 .75rem;
letter-spacing: -.01em;
background: linear-gradient(270deg, #38bdf8, #818cf8, #a78bfa, #f472b6, #818cf8, #38bdf8);
background-size: 300% 300%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: gradShift 3s ease infinite;
}
.seo-faq-title.split-h { color: inherit; }
.seo-faq-title .sh-d,
.seo-faq-title .sh-g {
background: inherit;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: unset;
}
.seo-faq-sub {
font-size: 1.1rem;
color: #334155;
max-width: 560px;
margin: 0 auto;
line-height: 1.75;
}
/* Two-column grid */
.seo-faq-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
align-items: start;
}
@media (max-width: 860px) {
.seo-faq-grid { grid-template-columns: 1fr; }
}
/* Steps (left) */
.seo-faq-steps {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.seo-step {
display: flex;
gap: 1rem;
align-items: flex-start;
background: #fff;
border: 1px solid #E2E8F0;
border-radius: 1rem;
padding: 1rem 1.25rem;
}
.seo-step-num {
width: 38px; height: 38px;
background: linear-gradient(135deg, #2563EB, #7C3AED);
color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: .85rem; font-weight: 900;
flex-shrink: 0;
margin-top: .1rem;
}
.seo-step-body h3 {
font-size: 1.025rem;
font-weight: 800;
color: #0F172A;
margin-bottom: .35rem;
}
.seo-step-body p {
font-size: .9rem;
color: #334155;
line-height: 1.75;
}
.seo-step-body strong { color: #1D4ED8; }
/* Right column */
.seo-faq-right {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* ── 鐘擺動畫元件 ── */
.so-wrap {
position: relative;
width: 280px; height: 210px;
margin: 4px auto 0;
flex-shrink: 0;
}
.so-rings,
.so-arc {
position: absolute;
inset: 0;
width: 100%; height: 100%;
}
.so-pendulum {
position: absolute;
inset: 0;
transform-origin: 140px 188px;
animation: soPendulum 1.9s ease-in-out infinite alternate;
}
.so-node {
position: absolute;
width: 40px; height: 40px;
background: rgba(255,255,255,.96);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.2rem;
box-shadow: 0 4px 14px rgba(124,58,237,.18), 0 1px 4px rgba(0,0,0,.07);
border: 1.5px solid rgba(167,139,250,.40);
}
.so-hub {
position: absolute;
left: 140px; top: 188px;
transform: translate(-50%, -50%);
width: 12px; height: 12px;
background: #7C3AED;
border-radius: 50%;
box-shadow: 0 0 0 5px rgba(124,58,237,.18);
}
.so-label {
position: absolute;
bottom: 6px; left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 100%);
color: #fff;
font-size: .68rem; font-weight: 700;
letter-spacing: .07em;
padding: .38rem 1.1rem;
border-radius: 999px;
white-space: nowrap;
box-shadow: 0 4px 16px rgba(124,58,237,.38);
}
@keyframes soPendulum {
from { transform: rotate(-13deg); }
to { transform: rotate(13deg); }
}
@media (prefers-reduced-motion: reduce) {
.so-pendulum { animation: none; }
}
/* FAQ card */
.seo-faq-card {
background: #fff;
border: 1.5px solid #E2E8F0;
border-radius: 1.25rem;
padding: 1.5rem 1.75rem;
box-shadow: 0 2px 16px rgba(0,0,0,.06);
position: relative; z-index: 1;
}
.seo-faq-card-title {
font-size: 1.05rem;
font-weight: 800;
color: #0F172A;
margin-bottom: 1rem;
padding-bottom: .75rem;
border-bottom: 2px solid #EDE9FE;
}
/* FAQ details/summary */
.seo-qa {
border-bottom: 1px solid #F1F5F9;
padding: .65rem 0;
}
.seo-qa:last-child { border-bottom: none; }
.seo-qa summary {
font-size: .95rem;
font-weight: 700;
color: #0F172A;
cursor: pointer;
list-style: none;
padding-right: 1.5rem;
position: relative;
user-select: none;
line-height: 1.5;
}
.seo-qa summary::-webkit-details-marker { display: none; }
.seo-qa summary::after {
content: '+';
position: absolute; right: 0; top: 0;
font-size: 1.1rem; color: #7C3AED; font-weight: 900;
transition: transform .2s;
}
.seo-qa[open] summary::after {
content: '−';
}
.seo-qa p {
font-size: .9rem;
color: #334155;
line-height: 1.8;
padding: .7rem 0 .3rem;
}
.seo-qa strong { color: #1D4ED8; }
/* CTA box */
.seo-faq-cta-box {
background: linear-gradient(135deg, #1E3A8A, #2563EB 50%, #7C3AED);
border-radius: 1.25rem;
padding: 1.75rem 1.75rem 1.5rem;
text-align: center;
}
.seo-cta-label {
font-size: .85rem;
color: rgba(255,255,255,.8);
font-weight: 600;
margin-bottom: 1rem;
letter-spacing: .03em;
}
.seo-cta-btn {
display: block;
padding: .825rem 1.5rem;
background: #fff;
color: #1D4ED8;
font-weight: 900;
font-size: .9rem;
border-radius: .875rem;
text-decoration: none;
margin-bottom: .75rem;
transition: transform .15s, box-shadow .15s;
box-shadow: 0 4px 16px rgba(0,0,0,.12);
}
.seo-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.seo-cta-btn--ghost {
background: rgba(255,255,255,.12);
color: #fff;
border: 1.5px solid rgba(255,255,255,.35);
box-shadow: none;
margin-bottom: 0;
}
.seo-cta-btn--ghost:hover {
background: rgba(255,255,255,.22);
box-shadow: none;
}
/* ════════════════════════════════════════
Float Nav — HubStore 樣式懸浮導覽列
════════════════════════════════════════ */
.float-nav {
position: fixed;
top: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 99999;
display: flex;
align-items: center;
gap: 0;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border-radius: 999px;
padding: 10px 18px 10px 16px;
box-shadow: 0 4px 32px rgba(0,0,0,0.13), 0 1px 6px rgba(0,0,0,0.07);
border: 1px solid rgba(255,255,255,0.65);
min-width: min(780px, calc(100vw - 32px));
max-width: calc(100vw - 32px);
}
/* Logo */
.fn-logo {
display: flex;
align-items: center;
gap: 9px;
text-decoration: none;
flex-shrink: 0;
}
.fn-logo-img { width: 28px; height: 28px; }
.fn-logo-text {
font-size: 0.95rem;
font-weight: 800;
color: #1a1a2e;
white-space: nowrap;
letter-spacing: -0.01em;
}
.fn-logo-sub { color: #7c3aed; }
/* Center links */
.fn-links {
display: flex;
align-items: center;
gap: 4px;
margin: 0 auto;
padding: 0 8px;
}
.fn-link {
font-size: 0.82rem;
font-weight: 600;
color: #374151;
text-decoration: none;
padding: 5px 10px;
border-radius: 999px;
transition: background .15s, color .15s;
white-space: nowrap;
}
.fn-link:hover { background: #f3f4f6; color: #7c3aed; }
.fn-sep { color: #d1d5db; font-size: 0.75rem; user-select: none; }
/* Right controls */
.fn-right {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
/* Language switcher */
.fn-lang {
display: flex;
align-items: center;
background: #f3f4f6;
border-radius: 999px;
padding: 2px;
gap: 2px;
}
.fn-lang-btn {
border: none;
background: transparent;
font-size: 0.75rem;
font-weight: 700;
color: #6b7280;
padding: 3px 9px;
border-radius: 999px;
cursor: pointer;
transition: background .15s, color .15s;
}
.fn-lang-btn.fn-lang-active {
background: #fff;
color: #7c3aed;
box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
/* Hamburger button */
.fn-hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
width: 38px;
height: 38px;
border: none;
background: #1a1a2e;
border-radius: 999px;
cursor: pointer;
padding: 0;
transition: background .18s;
flex-shrink: 0;
}
.fn-hamburger span {
display: block;
width: 16px;
height: 2px;
background: #fff;
border-radius: 2px;
transition: transform .22s, opacity .22s;
}
.fn-hamburger:hover { background: #7c3aed; }
.fn-ham-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.fn-ham-open span:nth-child(2) { opacity: 0; }
.fn-ham-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* Dropdown menu */
.fn-menu {
display: none;
position: absolute;
top: calc(100% + 10px);
right: 16px;
background: rgba(255,255,255,0.97);
backdrop-filter: blur(18px);
border-radius: 20px;
box-shadow: 0 8px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
border: 1px solid rgba(255,255,255,0.7);
padding: 8px;
min-width: 200px;
z-index: 100000;
}
.fn-menu.fn-menu-open { display: block; animation: fnMenuIn .18s ease; }
@keyframes fnMenuIn {
from { opacity: 0; transform: translateY(-8px) scale(.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.fn-menu-link {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
border-radius: 12px;
font-size: 0.9rem;
font-weight: 600;
color: #1f2937;
text-decoration: none;
transition: background .14s, color .14s;
}
.fn-menu-link:hover { background: #f5f3ff; color: #7c3aed; }
/* 給原本 hero-navbar 讓出空間 */
.hero-video-shell .hero-navbar { display: none; }
@media (max-width: 640px) {
.fn-links { display: none; }
.float-nav { padding: 8px 12px; }
}
/* ════════════════════════════════════════
SVG 描繪動畫 — hd-card 圖示
════════════════════════════════════════ */
.hd-icon svg {
width: 2.8rem;
height: 2.8rem;
display: block;
margin: 0 auto;
}
.hd-icon svg path,
.hd-icon svg circle,
.hd-icon svg rect,
.hd-icon svg line,
.hd-icon svg polyline {
stroke-dasharray: 100;
stroke-dashoffset: 100;
transition: none;
}
@keyframes svgDraw {
to { stroke-dashoffset: 0; }
}
.hd-card.svg-drawn .hd-icon svg path,
.hd-card.svg-drawn .hd-icon svg circle,
.hd-card.svg-drawn .hd-icon svg rect,
.hd-card.svg-drawn .hd-icon svg line {
animation: svgDraw 0.7s ease forwards var(--d, 0s);
}
/* ════════════════════════════════════════
SVG 描繪動畫 — lp-svc-card 照護服務卡
════════════════════════════════════════ */
.lp-svc-icon-wrap svg path,
.lp-svc-icon-wrap svg circle,
.lp-svc-icon-wrap svg rect,
.lp-svc-icon-wrap svg line {
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.lp-svc-card.svg-drawn .lp-svc-icon-wrap svg path,
.lp-svc-card.svg-drawn .lp-svc-icon-wrap svg circle,
.lp-svc-card.svg-drawn .lp-svc-icon-wrap svg rect,
.lp-svc-card.svg-drawn .lp-svc-icon-wrap svg line {
animation: svgDraw 0.7s ease forwards var(--d, 0s);
}
/* ════════════════════════════════════════
SVG 描繪動畫 — mp-card 好感輔具提案
════════════════════════════════════════ */
.mp-icon svg path,
.mp-icon svg circle,
.mp-icon svg rect,
.mp-icon svg line {
stroke-dasharray: 100;
stroke-dashoffset: 100;
}
.mp-card.svg-drawn .mp-icon svg path,
.mp-card.svg-drawn .mp-icon svg circle,
.mp-card.svg-drawn .mp-icon svg rect,
.mp-card.svg-drawn .mp-icon svg line {
animation: svgDraw 0.7s ease forwards var(--d, 0s);
}
/* ════════════════════════════════════════
SVG 圖示 — lp-step-card & lp-feature-card
靜態顯示（不做路徑描繪動畫）
════════════════════════════════════════ */
.lp-step-icon svg path,
.lp-step-icon svg circle,
.lp-step-icon svg rect,
.lp-step-icon svg line,
.lp-feature-icon svg path,
.lp-feature-icon svg circle,
.lp-feature-icon svg rect,
.lp-feature-icon svg line {
stroke-dasharray: unset;
stroke-dashoffset: unset;
opacity: 0;
transition: opacity 0.5s ease var(--d, 0s);
}
.lp-step-card.svg-drawn .lp-step-icon svg path,
.lp-step-card.svg-drawn .lp-step-icon svg circle,
.lp-step-card.svg-drawn .lp-step-icon svg rect,
.lp-step-card.svg-drawn .lp-step-icon svg line,
.lp-feature-card.svg-drawn .lp-feature-icon svg path,
.lp-feature-card.svg-drawn .lp-feature-icon svg circle,
.lp-feature-card.svg-drawn .lp-feature-icon svg rect,
.lp-feature-card.svg-drawn .lp-feature-icon svg line {
opacity: 1;
}
/* ════════════════════════════════════════
首頁頂部：左側 3×3 服務格 + 右側廣告輪播
════════════════════════════════════════ */
.hp-top-section {
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.hp-top-inner {
display: grid;
grid-template-columns: 1fr 420px;
max-width: 1200px;
margin: 0 auto;
gap: 0;
}
/* ── 服務格 ── */
.hp-svc-grid-wrap {
padding: 28px 24px 28px 32px;
border-right: 1px solid #e2e8f0;
}
.hp-svc-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.hp-svc-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 16px 14px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 10px;
text-decoration: none;
color: #1e293b;
transition: box-shadow .18s, transform .18s, border-color .18s;
}
.hp-svc-card:hover {
box-shadow: 0 4px 16px rgba(0,0,0,.08);
transform: translateY(-2px);
border-color: #cbd5e1;
}
.hp-svc-icon {
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: #f1f5f9;
border-radius: 10px;
flex-shrink: 0;
}
.hp-svc-name {
font-size: .88rem; font-weight: 700; color: #0f172a;
line-height: 1.3;
}
.hp-svc-tag {
font-size: .68rem; font-weight: 600;
padding: 2px 8px; border-radius: 99px;
margin-top: auto;
}
/* ── 廣告輪播 ── */
.hp-adslide-wrap {
position: relative;
overflow: hidden;
}
.hp-adslide {
position: relative;
width: 100%; height: 100%;
min-height: 380px;
}
.hp-slide {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity .55s ease;
pointer-events: none;
}
.hp-slide.hp-slide-active {
opacity: 1;
pointer-events: auto;
}
.hp-slide-inner {
padding: 36px 32px;
color: #fff;
max-width: 340px;
}
.hp-slide-tag {
display: inline-block;
font-size: .72rem; font-weight: 700; letter-spacing: .06em;
background: rgba(255,255,255,.2);
padding: 3px 10px; border-radius: 99px;
margin-bottom: 14px;
}
.hp-slide-title {
font-size: 1.55rem; font-weight: 800; line-height: 1.35;
margin: 0 0 12px;
}
.hp-slide-title strong { font-size: 2rem; }
.hp-slide-desc {
font-size: .84rem; line-height: 1.6; opacity: .88;
margin: 0 0 22px;
}
.hp-slide-btn {
display: inline-block;
background: rgba(255,255,255,.22);
border: 1.5px solid rgba(255,255,255,.5);
color: #fff; font-weight: 700; font-size: .85rem;
padding: 9px 20px; border-radius: 8px;
text-decoration: none;
transition: background .18s;
}
.hp-slide-btn:hover { background: rgba(255,255,255,.38); }
.hp-slide-prev, .hp-slide-next {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,.18); border: none;
color: #fff; font-size: 1.6rem; line-height: 1;
width: 34px; height: 34px;
border-radius: 50%; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background .18s;
z-index: 2;
}
.hp-slide-prev { left: 10px; }
.hp-slide-next { right: 10px; }
.hp-slide-prev:hover, .hp-slide-next:hover { background: rgba(255,255,255,.35); }
.hp-slide-dots {
position: absolute; bottom: 14px; left: 0; right: 0;
display: flex; justify-content: center; gap: 6px;
z-index: 2;
}
.hp-dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(255,255,255,.4); border: none; cursor: pointer;
transition: background .18s, transform .18s;
padding: 0;
}
.hp-dot.hp-dot-active {
background: #fff;
transform: scale(1.3);
}
/* ── RWD ── */
@media (max-width: 900px) {
.hp-top-inner {
grid-template-columns: 1fr;
}
.hp-svc-grid-wrap {
padding: 20px 16px;
border-right: none;
border-bottom: 1px solid #e2e8f0;
}
.hp-adslide { min-height: 280px; }
.hp-slide-title { font-size: 1.2rem; }
}
@media (max-width: 480px) {
.hp-svc-grid { gap: 8px; }
.hp-svc-card { padding: 12px 10px; }
.hp-svc-icon { width: 36px; height: 36px; }
.hp-svc-name { font-size: .8rem; }
}
/* ── Button Loading State ───────────────────────────────────── */
.btn-loading {
pointer-events: none !important;
opacity: .72;
position: relative;
}
.btn-loading::after {
content: '';
display: inline-block;
width: 13px;
height: 13px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: cc-spin .65s linear infinite;
vertical-align: middle;
margin-left: .45rem;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }
/* ── Homepage RWD stabilization ─────────────────────────────── */
html,
body {
max-width: 100%;
overflow-x: hidden;
}
img,
video,
canvas {
max-width: 100%;
}
@media (max-width: 1024px) {
.hero-video-shell {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
min-height: auto;
padding: 20px 18px 28px;
border-radius: 0 0 28px 28px;
background-position: center 64px;
background-size: auto 58%;
}
.hero-decision {
min-height: auto;
padding: 1rem 0 0;
}
.hd-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: clamp(132px, 30vw, 260px);
gap: 10px;
}
.hd-search,
.hd-petition-wrap {
margin-left: 0;
}
}
@media (max-width: 720px) {
.hero-video-shell {
padding: 14px 14px 22px;
border-radius: 0 0 22px 22px;
background-position: center 58px;
background-size: auto 44%;
}
.hero-decision {
gap: 14px;
}
.hd-cards {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: clamp(118px, 34vw, 190px);
gap: 8px;
}
.hd-card {
min-width: 0;
padding: .72rem .36rem .62rem;
border-radius: .75rem;
gap: .38rem;
}
.hd-icon svg {
width: 2.25rem;
height: 2.25rem;
}
.hd-name {
font-size: .78rem;
line-height: 1.18;
}
.hd-hint {
font-size: .62rem;
line-height: 1.28;
}
.hd-search {
margin: .4rem 0 .75rem;
}
.hd-search-inner {
min-height: 0;
border-radius: 1rem;
}
.hd-search-pin {
padding: 0 .85rem;
font-size: 1.15rem;
}
.hd-city-sel {
min-width: 0;
min-height: 54px;
font-size: 1rem;
padding: .75rem .4rem;
}
.hd-search-btn {
min-height: 52px;
padding: .8rem 1rem;
font-size: 1rem;
text-align: center;
}
.hd-petition-wrap {
width: 100%;
justify-content: center;
border-radius: 18px;
padding: 8px 10px;
}
}
@media (max-width: 560px) {
.hp-svc-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hp-slide-inner {
max-width: none;
padding: 30px 46px;
}
}
@media (max-width: 420px) {
.hero-video-shell {
background-size: auto 38%;
}
.hd-cards {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin-top: clamp(104px, 32vw, 140px);
}
.hd-card {
aspect-ratio: 1.08 / 1;
}
.hd-hint {
display: none;
}
.hd-search-pin {
display: none;
}
.hd-city-sel {
flex-basis: 100%;
text-align: center;
padding-left: .75rem;
padding-right: .75rem;
}
.hp-svc-grid {
grid-template-columns: 1fr;
}
.hp-adslide {
min-height: 240px;
}
.hp-slide-inner {
padding: 28px 38px;
}
}
/* ════════════════════════════════════════
行動端 RWD 補強區段（統一 breakpoint：768 / 640 / 480）
════════════════════════════════════════ */
/* 全域：圖片自動縮放、防止表格爆版、消除點擊藍框 */
img, video { max-width: 100%; height: auto; }
table { max-width: 100%; }
.table-wrap, .scroll-x, .overflow-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
* { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.04); }
/* 觸控裝置：防止 :hover 卡住的位移／縮放／陰影 */
@media (hover: none) {
a:hover,
button:hover,
.btn:hover, .btn-primary:hover, .btn-secondary:hover,
.nav a:hover, .nav-item:hover,
.card:hover, .service-card:hover, .product-card:hover,
.lp-tcard:hover, .lp-story-card:hover,
.floating-line-button:hover,
[class*="-card"]:hover {
transform: none !important;
}
}
/* 平板以下：浮動 QR 占空間，提早隱藏 */
@media (max-width: 768px) {
.floating-service-qr { display: none !important; }
/* 確保固定寬度元素能縮放 */
.lp-tcard,
.lp-story-card,
.testimonial-card { width: 100% !important; max-width: 360px; }
/* 費用表強制單欄（820 已處理，這裡保險） */
.fee-table-head { display: none; }
.fee-row { grid-template-columns: 1fr !important; gap: 8px; }
}
/* 手機主切點：版面壓縮、字級調整、黏性元素解除 */
@media (max-width: 640px) {
/* 黏性側欄改靜態，避免遮擋內容 */
.lp-privacy-contact-card,
.sticky-aside,
.side-toc {
position: static !important;
top: auto !important;
}
/* Hero 高度太大，縮小讓首屏能看到下方內容 */
.hero-video-shell .hero-content,
.hero-content {
min-height: auto !important;
margin-top: clamp(60px, 10vh, 100px) !important;
}
/* 橫向 tab/分類列補 overflow 保護 */
.quick-categories,
.category-pill-row,
.tab-row,
.tabs,
[role="tablist"] {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
flex-wrap: nowrap;
}
.quick-categories::-webkit-scrollbar,
.category-pill-row::-webkit-scrollbar,
.tab-row::-webkit-scrollbar,
.tabs::-webkit-scrollbar,
[role="tablist"]::-webkit-scrollbar { display: none; }
/* 所有按鈕／連結最小觸控區 44x44 */
.btn, button.btn, a.btn,
.pill, .chip, .tag-link {
min-height: 44px;
}
/* 容器水平 padding 收斂 */
.container, .wrap, main, section {
padding-left: max(env(safe-area-inset-left), 16px);
padding-right: max(env(safe-area-inset-right), 16px);
}
}
/* 超小螢幕（iPhone SE 直立 ~320px） */
@media (max-width: 480px) {
html { font-size: 22px; } /* 26px 在小螢幕過大，降到 22px */
.hero-content h1,
h1 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
}
/* iOS Safari 100vh 修正 */
@supports (-webkit-touch-callout: none) {
.full-vh, .hero-vh { min-height: -webkit-fill-available; }
}