/* --- 1. 核心視覺系統 --- */ :root {--bg-color: #F9FAFD; --primary-color: #FF6F61; --secondary-color: #FFD166; --text-main: #2D3436; --text-light: #636E72; --card-white: #FFFFFF; --shadow: 0 8px 30px rgba(0,0,0,0.06); --radius: 20px; --line-green: #06C755;} * {box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent;} body {font-family: 'Noto Sans TC', sans-serif; background-color: var(--bg-color); color: var(--text-main); line-height: 1.8; letter-spacing: 0.1px;} h1, h2, h3, h4 {font-family: 'Noto Serif TC', serif; font-weight: 700; letter-spacing: 0.05em;} button {font-family: 'Noto Sans TC', sans-serif; cursor: pointer; border: none; outline: none;} p {margin-bottom: 1.2rem; text-align: justify; color: #4A4A4A;} strong {color: var(--primary-color); font-weight: 500;} input, select, textarea {font-family: 'Noto Sans TC', sans-serif;} /* --- 2. 導航與頭部 --- */ header {background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); padding: 1rem 5%; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 90; box-shadow: 0 4px 20px rgba(0,0,0,0.03);} .img-center {display: block; margin: 0 auto; max-width: 100%; height: auto;} .logo {font-size: 1.3rem; color: var(--primary-color); font-weight: bold; display: flex; align-items: center; gap: 8px; cursor: pointer;} /* ===== planet nav：自適應 ===== */ .planet-nav {position: fixed; bottom: 25px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.9); backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,.6); border-radius: 60px; box-shadow: 0 10px 40px rgba(0,0,0,.1); z-index: 100; /* ✅ 大螢幕：依內容寬度 */ width: fit-content; max-width: min(95vw, 720px); /* ✅ 內容排版 */ display: flex; justify-content: center; align-items: center; /* ✅ 預設 gap */ gap: 12px; padding: 12px 16px; /* ✅ menu超過轉為滑動 */ overflow-x: auto; -webkit-overflow-scrolling: touch; /* 讓滑動更順，不撐高度 */ white-space: nowrap;} /* 隱藏捲軸 */ .planet-nav::-webkit-scrollbar {display:none;} /* item 自然分配寬度 */ .nav-item {flex: 0 0 auto; display: flex; justify-content: center;} /* 圓形按鈕：預設 50px */ .nav-pill {width: 50px; height: 50px; border-radius: 50%; display:flex; flex-direction: column; align-items:center; justify-content:center; color:#B2BEC3; transition:.3s; font-size:.75rem;} .nav-pill i {font-size: 1.35rem; margin-bottom: 3px;} /* active 狀態 */ .nav-item.active .nav-pill {background: var(--primary-color); color:#fff; transform: translateY(-8px); box-shadow: 0 6px 15px rgba(255, 111, 97, 0.4);} /* ===== 小螢幕icon排列 ===== */ @media (max-width: 420px){ .planet-nav {gap: 5px; /* ✅ 更小間距 */ padding: 10px 10px; max-width: 95vw;} .nav-pill {width: 44px; /* ✅ 圓變小 */ height: 44px; font-size: .70rem; /* ✅ 字縮小 */} .nav-pill i {font-size: 1.2rem; margin-bottom: 2px;} } /* 超小螢幕 */ @media (max-width: 360px){ .planet-nav {gap: 2px;} .nav-pill {width: 42px; height: 42px;} } /* 小螢幕menu滑動漸層提示 */ @media (max-width: 420px){ .planet-nav{ -webkit-mask-image: linear-gradient( to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100% ); mask-image: linear-gradient( to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100% ); } } /* --- 3. 引流系統 --- */ .fab-container {position: fixed; bottom: 110px; right: 20px; z-index: 95; display: flex; flex-direction: column; gap: 15px; align-items: flex-end;} .fab-btn {width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 1.6rem; box-shadow: 0 5px 20px rgba(0,0,0,0.2); cursor: pointer; transition: 0.3s; position: relative;} .fab-btn.line {background: var(--line-green);} .fab-btn.consult {background: var(--primary-color); animation: pulse 2s infinite;} .fab-label {position: absolute; right: 65px; background: white; padding: 6px 12px; border-radius: 8px; font-size: 0.85rem; color: #555; font-weight: bold; box-shadow: 0 3px 10px rgba(0,0,0,0.1); white-space: nowrap; opacity: 0; transform: translateX(10px); transition: 0.3s; pointer-events: none;} .fab-btn:hover {transform: scale(1.1);} .fab-btn:hover .fab-label {opacity: 1; transform: translateX(0);} @keyframes pulse { 0% {box-shadow: 0 0 0 0 rgba(255, 111, 97, 0.7);} 70% {box-shadow: 0 0 0 15px rgba(255, 111, 97, 0);} 100% {box-shadow: 0 0 0 0 rgba(255, 111, 97, 0);} } .cta-box {background: linear-gradient(135deg, #FFF8E1, #FFFFFF); border: 2px solid var(--secondary-color); border-radius: 16px; padding: 30px 20px; text-align: center; margin-top: 30px; box-shadow: 0 5px 15px rgba(255, 209, 102, 0.15);} .cta-title {font-size: 1.1rem; color: #333; margin-bottom: 10px; display: block; font-weight: bold;} .cta-btn {background: var(--text-main); color: white; padding: 12px 35px; border-radius: 50px; font-weight: bold; font-size: 1rem; margin-top: 10px; display: block; margin: 20px auto; align-items: center; gap: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); transition: 0.3s;} .cta-btn:hover {transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.3); background: #000;} /* --- 4. 版面容器 --- */ .page-section {display: none; padding: 30px 5%; animation: slideUp 0.5s ease; max-width: 850px; margin: 0 auto;} .page-section.active {display: block;} @keyframes slideUp { from {opacity: 0; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);} } .page-form {display: none; padding: 30px 5%; animation: slideUp 0.5s ease; max-width: 850px; margin: 0 auto;} /* --- 5. 首頁 Grid --- */ .hero {text-align: center; padding: 2rem 0 2rem;} .grid-container {display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; margin-bottom: 3rem;} .lovewiki-card {background: var(--card-white); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; cursor: pointer; transition: 0.3s; border: 1px solid rgba(0,0,0,0.02); box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;} .lovewiki-card:hover {transform: translateY(-8px); border-color: var(--primary-color); box-shadow: 0 15px 30px rgba(0,0,0,0.08);} .p-icon {width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 15px; transition: 0.3s;} /* --- 6. 分頁籤 --- */ .tab-container {display: grid; grid-template-columns: repeat(2, 1fr); /* 手機預設 2 欄 */ gap: 12px; padding: 0px 5px;} @media (min-width: 768px) { .tab-container { grid-template-columns: repeat(3, 1fr); /* 平板以上 3 欄 */ gap: 12px; padding: 0px 5px; } } .tab-header {margin-bottom: 30px; padding-bottom: 5px; scrollbar-width: none;} .tab-btn {background: white; border: 1px solid #EEE; padding: 10px 22px; border-radius: 50px; white-space: nowrap; color: var(--text-light); font-weight: 500; transition: 0.3s; box-shadow: 0 3px 8px rgba(0,0,0,0.03); flex-shrink: 0; font-size: 0.95rem; width: 100%; text-align: center;} .tab-btn.active {background: var(--text-main); color: white; border-color: var(--text-main); transform: scale(1.05);} .tab-content {display: none; animation: fadeIn 0.4s;} .tab-content.active {display: block;} /* --- 7. 故事館 (Drill-down Navigation) --- */ .story-menu-grid {display: grid; grid-template-columns: 1fr; gap: 15px;} .story-menu-card {background: white; padding: 20px; border-radius: 16px; border: 1px solid #EEE; box-shadow: 0 4px 10px rgba(0,0,0,0.03); cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 18px;} .story-menu-card:hover {transform: translateX(8px); border-color: var(--primary-color); box-shadow: 0 5px 15px rgba(0,0,0,0.08);} .story-icon-box {width: 55px; height: 55px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: white; flex-shrink: 0;} .story-preview h4 {margin: 0 0 6px 0; font-size: 1.1rem; color: #333;} .story-preview span {font-size: 0.85rem; color: #888; display: block;} .story-arrow {margin-left: auto; color: #DDD;} /* 故事詳細頁面 */ .story-detail-view {display: none; animation: slideInRight 0.3s ease-out;} .story-detail-view.active {display: block;} @keyframes slideInRight { from {opacity: 0; transform: translateX(30px);} to {opacity: 1; transform: translateX(0);} } .btn-back {display: inline-flex; align-items: center; gap: 8px; margin-bottom: 25px; background-color: yellow; color: darkcyan; padding: 10px 25px; border-radius: 30px; font-size: 0.95rem; font-weight: bold; transition: 0.2s; cursor: pointer;} .btn-back:hover {background: #E0E0E0; color: #333;} /* --- 8. 元件樣式 --- */ .info-card {background: white; padding: 35px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 25px; position: relative; overflow: hidden; border: 1px solid #F0F0F0;} .info-card h2, .info-card h3 {color: var(--text-main); margin-bottom: 20px; font-size: 1.4rem; display: flex; align-items: center; gap: 12px; border-bottom: 3px solid #F5F5F5; padding-bottom: 15px;} .story-badge {display: inline-block; padding: 5px 15px; border-radius: 8px; color: white; font-size: 0.85rem; font-weight: bold; margin-bottom: 15px; letter-spacing: 1px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);} .story-quote {background: #FFF8E1; border-left: 5px solid #FFC107; padding: 25px; margin: 25px 0; font-style: italic; color: #5D4037; border-radius: 0 12px 12px 0; line-height: 1.8;} /* Q&A Ranking */ .ranking-container {display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 25px;} .ranking-card {background: white; border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px rgba(0,0,0,0.05); border: 1px solid #EEE;} .ranking-header {padding: 20px; text-align: center; color: white; font-size: 1.2rem; font-weight: bold; display: flex; align-items: center; justify-content: center; gap: 10px;} .ranking-header.male {background: linear-gradient(135deg, #4FC3F7, #2196F3);} .ranking-header.female {background: linear-gradient(135deg, #FF8A80, #FF5252);} .ranking-list {padding: 20px;} .rank-row {display: flex; align-items: center; padding: 12px 0; border-bottom: 1px dashed #EEE;} .rank-row:last-child {border-bottom: none;} .rank-icon {width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; font-weight: bold; color: white; font-size: 0.9rem;} .rank-1 {background: #FFD700; box-shadow: 0 2px 5px rgba(255, 215, 0, 0.4);} .rank-2 {background: #C0C0C0;} .rank-3 {background: #CD7F32;} .rank-text {font-size: 1rem; color: #555; font-weight: 500;} /* Checkbox & Accordion */ .type-box {border: 2px dashed #DDD; padding: 20px; border-radius: 16px; margin-bottom: 20px; background: #FAFAFA; transition: 0.3s;} .type-box:hover {border-color: var(--secondary-color); background: #FFF;} .type-header {font-weight: bold; margin-bottom: 15px; color: var(--primary-color); display: flex; align-items: center; gap: 10px; font-size: 1.1rem;} .check-item {display: flex; align-items: flex-start; margin-bottom: 12px; cursor: pointer;} .check-item input {margin-right: 12px; margin-top: 6px; transform: scale(1.3); accent-color: var(--primary-color);} .check-item span {font-size: 1rem; color: #555;} .analysis-card {margin-bottom: 20px; border-left: 5px solid #DDD; padding: 20px; background: #FFF; border-radius: 0 12px 12px 0; box-shadow: 0 2px 10px rgba(0,0,0,0.03);} .analysis-title {font-weight: bold; font-size: 1.1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 10px;} .analysis-desc {font-size: 0.95rem; color: #666; line-height: 1.7;} .check-btn {width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 18px; margin-bottom: 12px; background: #FAFAFA; border: 2px solid transparent; border-radius: 14px; transition: 0.3s; text-align: left; cursor: pointer;} .check-btn:hover {background: #FFF; border-color: #EEE; box-shadow: 0 4px 12px rgba(0,0,0,0.08);} .check-btn.checked {background: #F1F8E9; border-color: #81C784; color: #1B5E20;} .check-btn i {font-size: 1.4rem; color: #E0E0E0;} .check-btn.checked i {color: #4CAF50;} .acc-item {margin-bottom: 15px; border: 1px solid #EEE; border-radius: 12px; overflow: hidden; background: white; box-shadow: 0 2px 5px rgba(0,0,0,0.02);} .acc-header {padding: 20px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: bold; background: #FAFAFA; font-size: 1.05rem;} .acc-body {padding: 25px; display: none; color: #555; font-size: 1rem; line-height: 1.8; background: white; border-top: 1px solid #EEE;} .acc-item.open .acc-body {display: block;} .acc-item.open .acc-header {background: #E1F5FE; color: #0277BD;} /* Attraction Cards & Tips */ .attract-bg {background: linear-gradient(135deg, #FFF9F0 0%, #FFF 100%); border: 2px solid #FFECB3;} .attract-step {display: flex; align-items: center; background: white; padding: 20px; border-radius: 16px; margin-bottom: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.03); cursor: pointer; transition: 0.3s; border: 2px solid transparent;} .attract-step:hover {transform: translateY(-3px); border-color: #FFD166;} .attract-step.checked {background: #FFFDE7; border-color: #FBC02D;} .attract-step.checked .step-icon {background: #FBC02D; color: white; transform: rotate(360deg);} .step-icon {width: 50px; height: 50px; background: #FFF3E0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: #FFB300; margin-right: 20px; transition: 0.5s; flex-shrink: 0;} .step-content h4 {margin: 0 0 5px 0; font-size: 1.1rem; color: #333;} .step-content p {margin: 0; font-size: 0.9rem; color: #777; line-height: 1.4;} .step-check {margin-left: auto; color: #DDD; font-size: 1.5rem; transition: 0.3s;} .attract-step.checked .step-check {color: #FBC02D; transform: scale(1.2);} .magic-note {margin-top: 25px; background: #FEF9E7; padding: 25px; border-radius: 2px 2px 20px 2px; position: relative; box-shadow: 5px 5px 15px rgba(0,0,0,0.05); border-top: 5px solid #FBC02D;} .magic-note::before {content: ''; position: absolute; top: 0; right: 0; border-width: 0 20px 20px 0; border-style: solid; border-color: #F9FBE7 white; box-shadow: -2px 2px 2px rgba(0,0,0,0.05);} /* Colors */ .bg-pink {background: #E91E63;} .bg-blue {background: #039BE5;} .bg-orange {background: #FF9800;} .bg-purple {background: #9C27B0;} .bg-teal {background: #009688;} .bg-brown {background: #795548;} .c-pink {background: #FCE4EC; color: #C2185B;} .c-blue {background: #E1F5FE; color: #0288D1;} .c-green {background: #E8F5E9; color: #388E3C;} .c-purple {background: #F3E5F5; color: #7B1FA2;} .c-teal {background: #E0F2F1; color: #00796B;} .c-gray {background: #ECEFF1; color: #455A64;} /* Modal */ .modal-overlay {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 200; display: none; align-items: center; justify-content: center; backdrop-filter: blur(5px);} .modal {background: white; width: 90%; max-width: 400px; padding: 40px 30px; border-radius: 24px; text-align: center; animation: popIn 0.3s; position: relative;} .close-modal {position: absolute; top: 20px; right: 20px; font-size: 1.5rem; color: #CCC; cursor: pointer;} .modal-avatar {width: 80px; height: 80px; border-radius: 50%; margin: -30px auto 20px; background: var(--secondary-color); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; border: 5px solid white; box-shadow: 0 10px 20px rgba(0,0,0,0.1); color: #FFF; font-family: serif;} .lead-form input, .lead-form select {width: 100%; padding: 5px 10px; margin-bottom: 10px; border: 1px solid #DDD; border-radius: 12px; font-size: 1rem; background: #FAFAFA; transition: 0.3s; color:gray;} .lead-form input:focus, .lead-form select:focus {border-color: var(--primary-color); background: #FFF; outline: none;} .lead-form label {display: block; text-align: left; font-weight: bold; margin-bottom: 5px; color: #444; font-size: 0.95rem;} .lead-btn {width: 100%; background: var(--primary-color); color: white; padding: 14px; border-radius: 50px; font-weight: bold; font-size: 1.1rem; box-shadow: 0 8px 20px rgba(255, 111, 97, 0.3); transition: 0.3s; margin-top: 10px;} .lead-btn:hover {background: #FF5252; transform: translateY(-3px);} @keyframes popIn { from {transform: scale(0.8); opacity: 0;} to {transform: scale(1); opacity: 1;} } /* --- Planet E 專用：九宮格目錄樣式 --- */ .menu-grid {display: grid; grid-template-columns: repeat(2, 1fr); /* 兩欄排列 */ gap: 15px; margin-bottom: 30px;} .menu-item {background: white; padding: 20px 15px; border-radius: 16px; text-align: center; box-shadow: 0 4px 15px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid #EEE; display: flex; flex-direction: column; align-items: center; justify-content: center;} .menu-item:active {transform: scale(0.96); /* 點擊時縮放效果 */} .menu-icon-box {width: 50px; height: 50px; border-radius: 50%; background: #F5F5F5; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 12px; color: #555;} .menu-title {font-size: 0.95rem; font-weight: bold; color: #333; line-height: 1.4;} .menu-subtitle {font-size: 0.75rem; color: #888; margin-top: 5px;} /* 子頁面預設隱藏 */ .sub-page {display: none; animation: fadeIn 0.3s;} .sub-page.active {display: block;} /* 返回按鈕 */ .btn-back-menu {display: inline-flex; align-items: center; gap: 5px; margin-bottom: 20px; padding: 8px 15px; background: #EEE; color: #555; border-radius: 20px; border: none; font-size: 0.9rem; cursor: pointer; font-weight: bold;} /* 單身類型顯示全部類型時，非達標卡片變灰 */ .analysis-card.dimmed{opacity: .35; filter: grayscale(1); pointer-events: none; /* 讓灰掉的卡不要可點（可選） */} .btn-toggle-all i {margin-left: 10px;} #tab-e7 .practice-detail-view {display: none;} #tab-e7 .practice-detail-view.active {display: block;} /* === GEO / AIO / SEO: accessible + semantic helpers (不影響 UI) === */ .sr-only {position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;} .seo-heading, .seo-nav {position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important;} /* close button rendered as