/* ========== Theme tokens ========== */ :root{ --bg:#FAF7F1; --ink:#1F2937; --muted:#6B7280; --card:#FFFFFF; --line:#E5E7EB; --accent:#F6E27A; --accent-press:#0B5E57; --accent-soft:#D6F4F1; --ring:rgba(246,226,122,.45); --shadow:0 6px 24px rgba(31,41,55,.08); --shadow-hover:0 12px 30px rgba(31,41,55,.14); --radius:18px; } /* ========== Base ========== */ html{ scroll-behavior:smooth } [x-cloak]{ display:none !important } /* 提醒：若有 Tailwind 的 bg-* 類別，下面背景漸層會被蓋掉 */ body{ background: radial-gradient(1200px 700px at 70% -10%, #FFF 0%, var(--bg) 55%, #F6F2EA 100%) fixed; color: var(--ink); } h1,h2,h3{ letter-spacing:.2px; color:var(--ink) } header.sticky{ background: rgba(250,247,241,.82); backdrop-filter: blur(10px); border-bottom:1px solid var(--line); } /* ========== Components ========== */ /* 卡片：覆蓋 .bg-white（注意全域影響） */ .bg-white{ background: var(--card) !important; border: 1px solid var(--line) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow); display: flex; flex-direction: column; height: 100%; } /* 書封 hover 放大 */ .aspect-\[3\/4\] img{ transition: transform .28s ease, filter .28s ease; transform-origin: center center; will-change: transform; } .aspect-\[3\/4\]:hover img{ transform: scale(1.04); filter: saturate(1.02) contrast(1.02) } /* chip */ .chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .6rem; border-radius:9999px; font-size:.75rem; font-weight:600; background:rgba(191,164,101,.15); color:#2E2E2E; border:1px solid rgba(191,164,101,.35); box-shadow:inset 0 1px 2px rgba(255,255,255,.05); transition:all .25s ease; } .chip:hover{ background:rgba(191,164,101,.25); border-color:#E1C97B; color:#FFF4D0; box-shadow:0 0 6px 1px rgba(224,190,90,.25); } /* Buttons */ .btn{ border-radius:12px; padding:.6rem 1.2rem; font-weight:700; letter-spacing:.3px; transition:all .3s ease; } .btn-primary{ background:#2E2E2E; color:#E8D6A6; border:1.5px solid #BFA465; box-shadow:0 4px 12px rgba(0,0,0,.4); } .btn-primary:hover{ background:#3A3A3A; color:#FFF4D0; border-color:#E1C97B; transform:translateY(-1px); box-shadow:0 6px 18px rgba(224,190,90,.25); } .btn-primary:active{ transform:translateY(0) } .btn-primary-s{ background:#2E2E2E; color:#E8D6A6; border:1.5px solid #BFA465; box-shadow:0 4px 12px rgba(0,0,0,.4); } .btn-primary-s:hover{ background:#3A3A3A; color:#FFF4D0; border-color:#E1C97B; transform:translateY(-1px); box-shadow:0 6px 18px rgba(224,190,90,.25); } .btn-primary-s:active{ transform:translateY(0) } .btn-outline{ background:#1F1F1F; color:#F5EBD0; border:1.5px solid #BFA465; } .btn-outline:hover{ background:#2B2B2B; color:#FFF8E5; box-shadow:0 0 12px 2px rgba(191,164,101,.4); } /* Inputs */ select, input[type="search"], input[type="text"], input[type="email"], input[type="tel"]{ border:1px solid var(--line) !important; border-radius:12px !important; transition:border-color .2s ease, box-shadow .2s ease; } select:focus, input:focus{ outline:none !important; border-color:var(--accent) !important; box-shadow:0 0 0 6px var(--ring) !important; } /* 卡片 hover 陰影（去重） */ .hover\:shadow:hover{ transform:translateY(-2px); box-shadow:var(--shadow-hover) !important; } /* Footer & selection */ footer{ background:#fff !important; border-top:1px solid var(--line) !important } ::selection{ background:#BFEDEA; color:#0B1B1A } /* ========== FAB（回頂端鈕） ========== */ .fab-top{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px) + 72px); width:48px; height:48px; border-radius:18px; display:grid; place-items:center; background:#2E2E2E; color:#E8D6A6; border:1.5px solid #BFA465; box-shadow:0 4px 12px rgba(0,0,0,.4); font-size:20px; line-height:1; z-index:50; opacity:0; pointer-events:none; transform:translateY(8px); transition:opacity .25s ease, transform .25s ease; } .fab-top.show{ opacity:1; pointer-events:auto; transform:translateY(0) } .fab-top:active{ transform:scale(.96) } /* ========== Responsive ========== */ @media (max-width:768px){ .btn-primary-s{ padding:.1rem 2rem; font-size:.9rem; width:auto; height:50px; border-radius:10px; display:flex; align-items:center; justify-content:center; text-align:center; } } @media (min-width:769px){ #notesModal .bg-white{ border-radius:0 !important } #notesModal .rounded-lg{ border-radius:0 !important } } @media (max-width:768px){ .md\:hidden.bg-white{ border-radius:0 !important; box-shadow:none !important } nav.md\:hidden.bg-white{ display:flex !important; flex-direction:row !important; align-items:center; justify-content:flex-start; gap:2rem; } nav.md\:hidden.bg-white a{ white-space:nowrap } } /* 規則區塊去弧角（可選） */ #rules.bg-white{ border-radius:0 !important; box-shadow:none !important } /* 讓套了 bg-white 的

回到 block，不要是 flex */ section.bg-white { display: block !important; flex-direction: initial !important; height: auto !important; padding-inline: 0 !important; /* 避免 section 自己左右有 padding */ } /* 全站統一容器：跟「書單」用同一個殼 */ .site-container{ max-width: 72rem; /* = Tailwind max-w-6xl */ margin-inline: auto; /* mx-auto */ padding-inline: 1rem; /* px-4 */ } /* 確保標題與文字不被奇怪外距影響對齊（可保留） */ #rules h2, #books h2 { margin-left: 0; } #rules p, #books p { margin-left: 0; } /* 偵錯輔助：暫時開啟外框對齊（確認後可刪） */ /* .site-container { outline: 1px dashed red; } */