@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Ma+Shan+Zheng&family=Noto+Sans+TC:wght@400;500;700&display=swap'); /* ========================================================= TRPG 老玩家商城 — 共用主題（奇幻公會 / 羊皮紙 + 皮革 + 古銅金） 此檔在各頁 最後載入，用來統一升級全站視覺。 ========================================================= */ :root { --bg: #e7d9bd; /* 羊皮紙底 */ --bg-deep: #ddc9a4; --surface: #fbf5e7; /* 卡片 / 面板 */ --surface-soft:#f4e9d2; --ink: #2c2114; /* 主文字 */ --ink-soft: #6f5c3f; /* 次要文字 */ --leather: #6b3410; /* 主色：皮革棕 */ --leather-deep:#45230c; --leather-lite:#8a4a1d; --gold: #c2a04a; /* 古銅金 */ --gold-deep: #9a7a2c; --gold-bright: #e4cd84; /* 深色上的金字 */ --danger: #a8392a; --line: rgba(107,52,16,.20); --radius: 14px; --radius-sm: 9px; --shadow: 0 10px 26px rgba(74,39,16,.16); --shadow-sm: 0 4px 12px rgba(74,39,16,.12); --font-body: "Noto Sans TC", system-ui, -apple-system, "PingFang TC", sans-serif; --font-disp: "Cinzel", "Noto Serif TC", serif; --font-brush: "Ma Shan Zheng", "Kaiti", "標楷體", serif; } /* ---------- 底：羊皮紙紋理 ---------- */ body { font-family: var(--font-body) !important; color: var(--ink); background-color: var(--bg); background-image: radial-gradient(at 25% 12%, rgba(255,251,240,.55), transparent 55%), radial-gradient(at 85% 0%, rgba(120,80,30,.07), transparent 50%), radial-gradient(at 50% 120%, rgba(120,80,30,.08), transparent 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"); background-attachment: fixed; } ::selection { background: var(--gold); color: #fff; } h1, h2, h3 { color: var(--ink); } /* ---------- 導覽列：皮革質感 + 金邊 ---------- */ .brand-nav { background: linear-gradient(180deg, #6a3a1c 0%, #4a2710 55%, #3c1f0c 100%); border-bottom: 2px solid var(--gold); box-shadow: 0 4px 18px rgba(40,20,5,.35), inset 0 1px 0 rgba(255,220,160,.18); color: var(--gold-bright); } .brand-nav a, .brand-nav .logo-wrap, .nav-container a { color: var(--gold-bright) !important; text-decoration: none; } .brand-nav .logo-text { font-family: var(--font-brush) !important; font-size: 1.7rem !important; color: var(--gold-bright); letter-spacing: 1px; text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 0 14px rgba(226,205,132,.25); } #admin-portal { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%) !important; color: #3a2408 !important; border: 1px solid rgba(255,240,200,.5); box-shadow: 0 2px 6px rgba(0,0,0,.3); } .cart-count-badge { background: var(--danger) !important; border-color: var(--gold) !important; } /* ---------- 免運跑馬燈 ---------- */ .free-shipping-bar { background: linear-gradient(180deg, var(--leather-deep), #381c09) !important; color: var(--gold-bright) !important; border-top: 1px solid rgba(226,205,132,.25); border-bottom: 1px solid rgba(226,205,132,.25); letter-spacing: .5px; } /* ---------- Hero：加深漸層 + 內金框 ---------- */ .hero-banner { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; box-shadow: inset 0 0 0 1px rgba(226,205,132,.35); } .hero-banner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(28,16,6,.22), rgba(28,16,6,.5)), linear-gradient(180deg, rgba(28,16,6,.25) 0%, transparent 38%, rgba(28,16,6,.6) 100%); box-shadow: inset 0 0 0 6px rgba(28,16,6,.18), inset 0 0 60px rgba(28,16,6,.35); } /* ---------- 公告佈告欄（招牌元素）---------- */ .news-board { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%) !important; border: 1px solid var(--gold-deep) !important; outline: 1px solid var(--gold); outline-offset: 5px; border-radius: var(--radius) !important; box-shadow: var(--shadow), inset 0 0 30px rgba(154,122,44,.10) !important; } .news-board::before { content: "📜 冒險公會佈告欄" !important; font-family: var(--font-brush) !important; font-size: 1.5rem !important; color: var(--leather) !important; border-bottom: 1px solid var(--gold-deep) !important; letter-spacing: 1px; } .news-content { color: var(--ink) !important; } .news-date { color: var(--ink-soft) !important; } .news-tag { box-shadow: 0 1px 3px rgba(0,0,0,.2); } .tag-important { background: var(--danger) !important; } .tag-event { background: var(--leather-lite) !important; } .tag-info { background: var(--gold-deep) !important; } .ctrl-btn { background: linear-gradient(180deg, var(--leather-lite), var(--leather)) !important; border: 1px solid rgba(226,205,132,.4) !important; } /* ---------- 側邊選單 ---------- */ .sidebar { background: linear-gradient(180deg, #d8c39c, #cdb488) !important; } .sidebar-search { background: var(--leather) !important; } .sidebar-nav-links li a, .sidebar-user-links li a { color: var(--ink) !important; } .sidebar-nav-links .arrow { color: var(--leather) !important; } .sidebar-nav-links li a:hover { background: rgba(107,52,16,.12) !important; } /* ---------- 分類頁籤 ---------- */ .tab-item { background: var(--surface) !important; border: 1px solid var(--line) !important; border-bottom: 3px solid var(--gold-deep) !important; border-radius: var(--radius-sm) !important; color: var(--leather) !important; font-family: var(--font-disp); letter-spacing: .5px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .tab-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); } .tab-item.active { background: linear-gradient(180deg, var(--leather-lite), var(--leather)) !important; color: var(--gold-bright) !important; border-bottom-color: var(--gold) !important; } /* 區段標題：左側改成金/皮革雙線 */ #section-title { font-family: var(--font-disp); border-left: 5px solid var(--gold-deep) !important; color: var(--leather-deep); letter-spacing: .5px; } /* ---------- 商品卡片 ---------- */ .card { background: var(--surface) !important; border: 1px solid var(--line); border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; overflow: hidden; } .card:hover { box-shadow: var(--shadow) !important; transform: translateY(-4px); } .card img { transition: transform .4s ease; } .card:hover img { transform: scale(1.05); } .card h3 { font-family: var(--font-body); font-weight: 700; color: var(--ink); } .card .price, .card p { color: var(--leather) !important; font-family: var(--font-disp); font-weight: 600; font-size: 1.05rem; } /* 卡片按鈕 / 通用「皮革金」按鈕 */ .card a, .card .view-btn { background: linear-gradient(180deg, var(--leather-lite) 0%, var(--leather) 100%) !important; color: var(--gold-bright) !important; border: 1px solid rgba(226,205,132,.35); border-radius: var(--radius-sm) !important; font-weight: 600 !important; letter-spacing: .5px; transition: background .2s ease, transform .12s ease; } .card a:hover, .card .view-btn:hover { background: linear-gradient(180deg, var(--leather) 0%, var(--leather-deep) 100%) !important; transform: translateY(-1px); } /* ---------- 商品詳情頁 ---------- */ .product-detail { border: 1px solid var(--line); box-shadow: var(--shadow) !important; } .product-name { font-family: var(--font-brush) !important; color: var(--leather-deep) !important; } .product-price, #display-price { color: var(--leather) !important; font-family: var(--font-disp); } .variant-btn { border: 2px solid var(--line) !important; color: var(--leather) !important; border-radius: var(--radius-sm) !important; transition: all .18s ease; } .variant-btn:hover { border-color: var(--gold-deep) !important; } .variant-btn.active { background: linear-gradient(180deg, var(--leather-lite), var(--leather)) !important; color: var(--gold-bright) !important; border-color: var(--leather) !important; } /* ---------- 通用按鈕（皮革壓花）---------- */ .buy-btn, .checkout-btn, .query-btn, .auth-btn { background: linear-gradient(180deg, var(--leather-lite) 0%, var(--leather) 60%, var(--leather-deep) 100%) !important; color: var(--gold-bright) !important; border: 1px solid rgba(226,205,132,.4) !important; border-radius: var(--radius-sm) !important; font-family: var(--font-body); font-weight: 700; letter-spacing: .5px; box-shadow: 0 4px 12px rgba(60,30,8,.28), inset 0 1px 0 rgba(255,225,170,.25) !important; transition: transform .12s ease, box-shadow .12s ease, filter .2s ease; } .buy-btn:hover:not(:disabled), .checkout-btn:hover:not(:disabled), .query-btn:hover, .auth-btn:hover { filter: brightness(1.07); transform: translateY(-2px); } .buy-btn:active, .checkout-btn:active, .auth-btn:active { transform: translateY(1px); } .buy-btn:disabled, .checkout-btn:disabled { filter: grayscale(.5) brightness(.9); } /* ---------- 表單欄位 ---------- */ input, textarea, select, .query-input { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important; color: var(--ink) !important; font-family: var(--font-body); transition: border-color .15s ease, box-shadow .15s ease; } input:focus, textarea:focus, select:focus { outline: none !important; border-color: var(--gold-deep) !important; box-shadow: 0 0 0 3px rgba(194,160,74,.28) !important; } label { color: var(--leather) !important; font-weight: 700; } /* ---------- 卡片 / 容器面板 ---------- */ .cart-container, .auth-container, .admin-box, .modal-content, .cart-modal-content { background: linear-gradient(180deg, var(--surface), var(--surface-soft)) !important; border: 1px solid var(--gold-deep) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important; } .store-info-box { background: var(--surface-soft) !important; border: 1px dashed var(--gold-deep) !important; } .order-item { background: var(--surface-soft) !important; border-left: 5px solid var(--gold-deep) !important; } .del-btn { background: var(--danger) !important; } /* ---------- 登入頁頁籤 ---------- */ .auth-tabs { border-bottom: 2px solid var(--gold-deep) !important; } .tab { color: var(--leather) !important; font-family: var(--font-disp); } .tab.active { background: var(--leather) !important; color: var(--gold-bright) !important; border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .forgot-link { color: var(--leather) !important; } h3 { color: var(--leather-deep); } /* ---------- 後台 ---------- */ .admin-tab { background: var(--surface-soft) !important; color: var(--leather) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important; font-family: var(--font-disp); } .admin-tab.active { background: linear-gradient(180deg, var(--leather-lite), var(--leather)) !important; color: var(--gold-bright) !important; } .btn-3d { background: linear-gradient(180deg, var(--leather-lite), var(--leather)) !important; box-shadow: 0 4px 0 var(--leather-deep) !important; border: 1px solid rgba(226,205,132,.35) !important; color: var(--gold-bright) !important; } .btn-3d:hover { background: linear-gradient(180deg, var(--leather), var(--leather-deep)) !important; } .btn-green { background: linear-gradient(180deg, #3fa15a, #2c7d42) !important; box-shadow: 0 4px 0 #1e7e34 !important; color: #fff !important; } .order-card { border-left: 6px solid var(--gold-deep) !important; background: var(--surface-soft) !important; } .loader { border-top-color: var(--leather) !important; } .v-img-preview { border: 1px solid var(--gold-deep) !important; } /* ---------- 無障礙 / 細節 ---------- */ a:focus-visible, button:focus-visible, .tab-item:focus-visible, input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } .card:hover, .card:hover img, .tab-item:hover { transform: none; } } /* ---------- 補：其他頁面特有元件，併入同一套視覺 ---------- */ .submit-btn, .btn-go-cart { background: linear-gradient(180deg, var(--leather-lite) 0%, var(--leather) 60%, var(--leather-deep) 100%) !important; color: var(--gold-bright) !important; border: 1px solid rgba(226,205,132,.4) !important; border-radius: var(--radius-sm) !important; font-weight: 700; box-shadow: 0 4px 12px rgba(60,30,8,.28), inset 0 1px 0 rgba(255,225,170,.25) !important; transition: transform .12s ease, filter .2s ease; } .submit-btn:hover, .btn-go-cart:hover { filter: brightness(1.07); transform: translateY(-2px); } .info-card, .contact-form { background: linear-gradient(180deg, var(--surface), var(--surface-soft)) !important; border: 1px solid var(--gold-deep) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-sm) !important; color: var(--ink) !important; } .info-card h2 { border-bottom: 1px solid var(--gold-deep) !important; color: var(--leather-deep) !important; font-family: var(--font-disp); } .contact-form label { color: var(--leather) !important; } /* ===================== 首頁專屬版面 ===================== */ .hero-content { position: relative; z-index: 2; max-width: 780px; padding: 0 24px; color: #fdf6e6; } .hero-eyebrow { font-family: var(--font-disp); letter-spacing: 4px; font-size: .95rem; color: var(--gold-bright); margin: 0 0 14px; text-shadow: 0 2px 8px rgba(0,0,0,.7); } .hero-title { font-family: var(--font-disp); font-weight: 700; color: #fff; font-size: clamp(2.1rem, 6vw, 3.6rem); line-height: 1.15; margin: 0 0 16px; text-shadow: 0 3px 16px rgba(0,0,0,.65), 0 1px 0 rgba(0,0,0,.5); } .hero-title .gold { color: var(--gold-bright); } .hero-sub { font-size: clamp(1rem, 2.4vw, 1.25rem); margin: 0 0 28px; color: #f3e7cd; text-shadow: 0 2px 10px rgba(0,0,0,.7); letter-spacing: 1px; } .hero-cta { display: inline-block; text-decoration: none; color: #3a2408; background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-deep) 100%); font-weight: 700; font-size: 1.1rem; letter-spacing: 1px; padding: 14px 38px; border-radius: 999px; border: 1px solid rgba(255,245,210,.6); box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); transition: transform .15s ease, filter .2s ease; } .hero-cta:hover { transform: translateY(-2px); filter: brightness(1.05); } /* 信任條 */ .trust-strip { display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center; align-items: center; background: linear-gradient(180deg, var(--surface), var(--surface-soft)); border-bottom: 1px solid var(--gold-deep); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); padding: 16px 20px; } .trust-item { display: flex; align-items: center; gap: 12px; } .trust-ico { font-size: 1.7rem; line-height: 1; } .trust-tx { display: flex; flex-direction: column; line-height: 1.25; } .trust-tx b { color: var(--leather-deep); font-size: .98rem; } .trust-tx small { color: var(--ink-soft); font-size: .78rem; } /* 頁尾 */ .site-footer { margin-top: 60px; color: var(--gold-bright); background: linear-gradient(180deg, #4a2710 0%, #3a1d0b 100%); border-top: 2px solid var(--gold); box-shadow: inset 0 1px 0 rgba(255,220,160,.18); } .footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 32px; padding: 48px 24px 32px; } .footer-logo { font-family: var(--font-brush); font-size: 1.5rem; color: var(--gold-bright); margin-bottom: 12px; } .footer-brand p { color: #e8d8b8; font-size: .9rem; line-height: 1.7; margin: 0; } .footer-col h4 { font-family: var(--font-disp); color: #fff; font-size: 1rem; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(226,205,132,.3); } .footer-col a { display: block; color: #e8d8b8; text-decoration: none; font-size: .9rem; padding: 6px 0; transition: color .15s ease, padding-left .15s ease; } .footer-col a:hover { color: var(--gold-bright); padding-left: 6px; } .footer-contact { color: #e8d8b8; font-size: .88rem; line-height: 1.7; margin: 0 0 12px; } .footer-col a.footer-line { display: inline-block; background: rgba(226,205,132,.14); border: 1px solid rgba(226,205,132,.4); border-radius: 8px; padding: 8px 16px; color: var(--gold-bright); } .footer-col a.footer-line:hover { background: rgba(226,205,132,.24); padding-left: 16px; } .footer-bottom { border-top: 1px solid rgba(226,205,132,.22); text-align: center; padding: 18px; font-size: .82rem; color: #cdb98c; letter-spacing: .5px; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } .trust-strip { gap: 12px 24px; } .trust-item { width: 42%; } } /* SEO 介紹區（首頁底部「關於」）融入主題 */ .seo-footer-text { border-top: 1px solid var(--gold-deep) !important; color: var(--ink-soft) !important; max-width: 1100px; margin-left: auto; margin-right: auto; } .seo-footer-text h3 { font-family: var(--font-disp); color: var(--leather-deep); } /* ===================== 公告佈告欄 結構 ===================== */ .news-section { max-width: 1000px; margin: 22px auto; padding: 0 12px; } .news-board { position: relative; padding: 52px 22px 22px; overflow: hidden; } .news-board::before { position: absolute; top: 0; left: 0; right: 0; padding: 10px 16px; display: block; } .news-container { position: relative; height: 64px; } .news-item { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity .5s ease; pointer-events: none; flex-wrap: wrap; } .news-item.active { opacity: 1; pointer-events: auto; } .news-tag { color:#fff; padding: 3px 12px; border-radius: 6px; font-size: .8rem; font-weight: 700; white-space: nowrap; } .news-content { flex: 1; min-width: 60%; line-height: 1.5; } .news-date { font-size: .8rem; } .news-ctrls { position: absolute; top: 11px; right: 16px; display: flex; gap: 6px; z-index: 5; } .ctrl-btn { color:#fff; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: .9rem; line-height: 1; } @media (max-width:600px){ .news-container { height: 96px; } } /* 導覽列 LOGO 真正置中（不受左右元素寬度影響） */ .brand-nav .logo-wrap { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } @media (max-width: 600px) { .brand-nav .logo-text, .brand-nav h1.logo-text { font-size: 1.25rem !important; } } /* 子頁頁尾（三欄）與商品圖底色 */ .site-footer.sub .footer-grid { grid-template-columns: 1.6fr 1fr 1.2fr; } .product-image-wrap { background: var(--surface) !important; }