/* 全站設計 token — 詳見 inftdes-redesign.css、Tools/design-system/inftdes-limited/MASTER.md */ /* 核心 CSS 由各頁 平行載入（勿用 @import，避免串行瀑布）。 */ /* Public: redesign + nav + components + site. Shop: shop-page.css on shop pages only. */ /* Legacy Zurich — superseded on body.business by architecture theme */ html:not(.js) body:not(.business), body:not(.business):not(.admin-page) { margin: 0; padding: 0; font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang HK', 'Microsoft JhengHei', sans-serif; background: #ffffff; color: #333333; font-size: 16px; letter-spacing: 0.01em; line-height: 1.6; font-weight: 400; } /* Zurich 風格標題 */ h1, h2, h3, h4, h5, h6 { font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang HK', 'Microsoft JhengHei', sans-serif; font-weight: 600; color: #333333; letter-spacing: 0.02em; margin-top: 0; margin-bottom: 20px; line-height: 1.3; } h1 { font-size: 2.5em; font-weight: 700; color: var(--inftdes-primary); } h2 { font-size: 2em; font-weight: 600; color: var(--inftdes-primary); } h3 { font-size: 1.5em; font-weight: 600; } /* Logo - Zurich 風格 */ .logo { font-size: 1.8em; font-weight: 700; letter-spacing: 0.02em; color: var(--inftdes-primary); padding: 20px 0; font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang HK', 'Microsoft JhengHei', sans-serif; } /* Header - 對齊 footer 深色主題 */ header { background: #343a40; box-shadow: 0 2px 8px rgba(0,0,0,0.25); position: sticky; top: 0; z-index: 1000; } /* 移除舊的導航樣式，由 nav.html 處理 */ /* Zurich 風格主要內容區域 — 僅非 business 舊頁 */ body:not(.business) main { max-width: 1200px; margin: 0 auto; padding: 40px 20px 80px 20px; } /* Zurich 風格區塊 — business 頁排版見 inftdes-public.css / inftdes-redesign.css */ body:not(.business) section { margin: 0 0 40px 0; padding: 40px; background: #ffffff; border: 1px solid #e9ecef; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: box-shadow 0.3s, transform 0.3s; font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang HK', 'Microsoft JhengHei', sans-serif; } body:not(.business) section:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); transform: translateY(-2px); } body:not(.business) section h2 { font-size: 1.8em; font-weight: 600; color: var(--inftdes-primary); margin-top: 0; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 2px solid #e9ecef; letter-spacing: 0.02em; font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang HK', 'Microsoft JhengHei', sans-serif; } section h3 { font-size: 1.4em; font-weight: 600; color: #333333; margin-bottom: 16px; } section p { font-size: 16px; line-height: 1.6; color: #555555; margin-bottom: 16px; } body.business section.contact-cta p { color: rgba(255, 255, 255, 0.88) !important; } body.business .inftdes-stat-banner .stat-card p, body.business .inftdes-care-banner .stat-card p, body.business .inftdes-brand-banner .stat-card p { color: rgba(255, 255, 255, 0.92) !important; } body.business .inftdes-stat-banner .stat-card h4, body.business .inftdes-care-banner .stat-card h4, body.business .inftdes-brand-banner .stat-card h4, body.business .inftdes-stat-banner .stat-card__num, body.business .inftdes-care-banner .stat-card__num, body.business .inftdes-brand-banner .stat-card__num, body.business .inftdes-stat-banner .stat-card__label, body.business .inftdes-care-banner .stat-card__label, body.business .inftdes-brand-banner .stat-card__label { color: #fff !important; } body.business section.contact-cta .hero-cta a.cta-btn { color: #fff !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.9) !important; } /* Zurich 風格按鈕和連結 */ a.gallery-btn, section a, .btn { font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang HK', 'Microsoft JhengHei', sans-serif; display: inline-block; padding: 12px 24px; background: var(--inftdes-primary); color: #ffffff; text-decoration: none; border-radius: 6px; font-weight: 500; font-size: 16px; border: none; cursor: pointer; transition: all 0.3s; margin: 8px 8px 8px 0; } a.gallery-btn:hover, section a:hover, .btn:hover { background: var(--inftdes-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--inftdes-primary-rgb), 0.3); } /* 次要按鈕 */ .btn-secondary { background: #6c757d; color: #ffffff; } .btn-secondary:hover { background: #545b62; } /* 成功按鈕 */ .btn-success { background: #28a745; color: #ffffff; } .btn-success:hover { background: #1e7e34; } /* 警告按鈕 */ .btn-warning { background: #ffc107; color: #212529; } .btn-warning:hover { background: #e0a800; } /* 危險按鈕 */ .btn-danger { background: #dc3545; color: #ffffff; } .btn-danger:hover { background: #c82333; } /* Zurich 風格頁面佈局 */ .zurich-page-container { min-height: 100vh; background: #ffffff; } /* Zurich 風格 Hero 區塊 */ .zurich-hero { background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); padding: 80px 20px; text-align: center; border-bottom: 1px solid #dee2e6; } .zurich-hero-content { max-width: 800px; margin: 0 auto; } .zurich-hero h1 { font-size: 3em; font-weight: 700; color: var(--inftdes-primary); margin-bottom: 20px; letter-spacing: 0.02em; } .hero-description { font-size: 1.2em; color: #6c757d; margin-bottom: 40px; line-height: 1.6; max-width: 600px; margin-left: auto; margin-right: auto; } /* ===== 內頁橫幅 (page-banner) — about/contact 等二級頁面用 ===== */ .page-banner { background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, var(--inftdes-primary) 100%); color: #fff; text-align: center; padding: 60px 20px 48px; position: relative; overflow: hidden; } /* legacy page-banner::before — 已由 inftdes-page-backgrounds.css 取代 */ .page-banner h1 { font-size: 2.4em; font-weight: 700; margin: 0 0 12px; color: #fff; letter-spacing: 0.03em; } .page-banner p { font-size: 1.1em; opacity: 0.85; margin: 0; color: #e3eaf8; } body.dark-mode .page-banner { background: linear-gradient(135deg, #0d1b38 0%, #1a3170 50%, #1a56a8 100%); } body.dark-mode .page-banner h1 { color: #e8f0ff; } body.dark-mode .page-banner p { color: #b8cef0; } @media (max-width: 768px) { .page-banner { padding: 44px 16px 32px; } .page-banner h1 { font-size: 1.8em; } .page-banner p { font-size: 1em; } } .hero-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } /* Zurich 風格內容區塊 */ .zurich-content-section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; } .section-header { text-align: center; margin-bottom: 60px; } .section-header h2 { font-size: 2.5em; font-weight: 600; color: var(--inftdes-primary); margin-bottom: 16px; } .section-header p { font-size: 1.1em; color: #6c757d; max-width: 600px; margin: 0 auto; line-height: 1.6; } /* Instagram 展示區 */ .instagram-showcase { margin-bottom: 80px; } .instagram-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-bottom: 60px; } .instagram-footer { text-align: center; padding: 40px; background: #f8f9fa; border-radius: 12px; border: 1px solid #e9ecef; } .instagram-footer h3 { font-size: 1.8em; color: var(--inftdes-primary); margin-bottom: 12px; } .instagram-footer p { color: #6c757d; margin-bottom: 24px; font-size: 1.1em; } .btn-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: white; font-weight: 600; padding: 12px 30px; display: inline-flex; align-items: center; gap: 8px; } .btn-instagram:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(240,148,51,0.3); } /* 特色服務區塊 */ .zurich-features-section { padding: 80px 20px; background: #f8f9fa; border-top: 1px solid #e9ecef; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; max-width: 1200px; margin: 0 auto; } .feature-card { background: #ffffff; padding: 40px 30px; border-radius: 12px; text-align: center; border: 1px solid #e9ecef; transition: all 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .feature-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(var(--inftdes-primary-rgb), 0.15); border-color: var(--inftdes-primary); } .feature-icon { font-size: 3em; margin-bottom: 20px; height: 80px; display: flex; align-items: center; justify-content: center; } .feature-card h3 { font-size: 1.4em; color: var(--inftdes-primary); margin-bottom: 16px; font-weight: 600; } .feature-card p { color: #6c757d; line-height: 1.6; font-size: 1em; } /* 響應式設計 */ @media (max-width: 768px) { .zurich-hero { padding: 60px 15px; } .zurich-hero h1 { font-size: 2.2em; } .hero-description { font-size: 1.1em; } .hero-buttons { flex-direction: column; align-items: center; } .zurich-content-section, .zurich-features-section { padding: 60px 15px; } .section-header h2 { font-size: 2em; } .instagram-grid { grid-template-columns: 1fr; gap: 20px; } .features-grid { grid-template-columns: 1fr; gap: 30px; } .feature-card { padding: 30px 20px; } } /* 服務頁面特定樣式 */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto 60px auto; } .service-card { background: #ffffff; padding: 40px 30px; border-radius: 12px; border: 1px solid #e9ecef; transition: all 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .service-card:hover { transform: translateY(-8px); box-shadow: 0 12px 30px rgba(var(--inftdes-primary-rgb), 0.15); border-color: var(--inftdes-primary); } .service-card.featured { border: 2px solid var(--inftdes-primary); position: relative; } .service-card.featured::before { content: "推薦服務"; position: absolute; top: -12px; left: 30px; background: var(--inftdes-primary); color: white; padding: 4px 12px; border-radius: 12px; font-size: 0.8em; font-weight: 600; } .service-icon { font-size: 3em; margin-bottom: 20px; text-align: center; height: 80px; display: flex; align-items: center; justify-content: center; } .service-card h3 { font-size: 1.5em; color: var(--inftdes-primary); margin-bottom: 16px; font-weight: 600; text-align: center; } .service-card p { color: #6c757d; line-height: 1.6; margin-bottom: 20px; text-align: center; } .service-features { list-style: none; padding: 0; margin: 0; } .service-features li { padding: 8px 0; color: #495057; position: relative; padding-left: 24px; } .service-features li::before { content: "✓"; position: absolute; left: 0; color: #28a745; font-weight: bold; } @media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; gap: 20px; } .service-card { padding: 30px 20px; } .service-card.featured::before { left: 20px; } } /* 關於我們頁面特定樣式 */ .about-content-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; max-width: 1200px; margin: 0 auto; align-items: start; } .about-text .text-block { margin-bottom: 40px; padding: 30px; background: #f8f9fa; border-radius: 12px; border-left: 4px solid var(--inftdes-primary); } .about-text h3 { font-size: 1.4em; color: var(--inftdes-primary); margin-bottom: 16px; font-weight: 600; } .about-text p { color: #495057; line-height: 1.7; font-size: 1.05em; margin: 0; } .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .stat-card { background: #ffffff; padding: 30px 20px; border-radius: 12px; text-align: center; border: 1px solid #e9ecef; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: all 0.3s; } .stat-card:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(var(--inftdes-primary-rgb), 0.15); border-color: var(--inftdes-primary); } .stat-number { font-size: 2.5em; font-weight: 700; color: var(--inftdes-primary); margin-bottom: 8px; line-height: 1; } .stat-label { color: #6c757d; font-weight: 500; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.05em; } @media (max-width: 992px) { .about-content-grid { grid-template-columns: 1fr; gap: 40px; } .about-stats { grid-template-columns: repeat(2, 1fr); gap: 15px; max-width: 400px; margin: 0 auto; } } @media (max-width: 768px) { .about-text .text-block { padding: 20px; margin-bottom: 30px; } .about-stats { grid-template-columns: 1fr; max-width: 250px; } .stat-card { padding: 25px 15px; } .stat-number { font-size: 2em; } } /* Zurich 風格頁尾 — 由下方統一定義覆蓋 */ /* (此處保留向後兼容，以下 footer 區塊為有效定義) */ /* 舊樣式保留 - 向後兼容 */ a.gallery-btn, section a { display: inline-block; background: var(--inftdes-primary); color: #fff; font-weight: 600; border-radius: 8px; padding: 10px 26px; font-size: 1.08em; text-decoration: none; margin: 12px 0 0 0; box-shadow: 0 2px 8px rgba(var(--inftdes-primary-rgb),0.08); transition: background 0.18s, color 0.18s, box-shadow 0.18s; } a.gallery-btn:hover, section a:hover { background: var(--inftdes-primary-hover); color: #fff; box-shadow: 0 4px 18px rgba(var(--inftdes-primary-rgb),0.13); } /* Instagram Embed — legacy；business 頁用 portfolio-page.css */ body:not(.business) .instagram-embed { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(var(--inftdes-primary-rgb),0.06); padding: 18px 0 0 0; } /* 表單 */ .contact-form { margin-top: 18px; background: #fff; border-radius: 10px; padding: 18px 18px 12px 18px; box-shadow: 0 2px 8px rgba(var(--inftdes-primary-rgb),0.06); } .contact-form label, .contact-form input, .contact-form textarea, .contact-form button { font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang HK', 'Microsoft JhengHei', sans-serif; letter-spacing: 0.01em; } .contact-form label { display: block; margin: 12px 0 6px 0; color: var(--inftdes-primary); font-weight: 500; } .contact-form input, .contact-form textarea { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid #e3e3e3; background: #f7f9fb; color: #23272a; margin-bottom: 10px; font-size: 1em; box-shadow: 0 1px 4px rgba(var(--inftdes-primary-rgb),0.04); } .contact-form button { background: var(--inftdes-primary); color: #fff; font-weight: 700; border: none; border-radius: 8px; padding: 10px 28px; font-size: 1.08em; margin-top: 8px; cursor: pointer; transition: background 0.18s, color 0.18s; } .contact-form button:hover { background: var(--inftdes-primary-hover); color: #fff; } /* WhatsApp 浮動按鈕 */ #whatsapp-float { position: fixed !important; bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; right: calc(14px + env(safe-area-inset-right, 0px)) !important; z-index: 201 !important; display: flex !important; align-items: center; justify-content: center; background: #25d366 !important; width: 40px; height: 40px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,0.12); transition: background 0.18s, box-shadow 0.18s; } #whatsapp-float:hover { background: #1ebe57 !important; box-shadow: 0 4px 18px rgba(37,211,102,0.18); } #whatsapp-float img { height: 1.4em; width: 1.4em; } /* 線上助手（ WhatsApp Dark 色系，置於 WhatsApp 掣上方） */ #support-ai-float { position: fixed !important; bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important; right: calc(14px + env(safe-area-inset-right, 0px)) !important; z-index: 1210 !important; width: 40px; height: 40px; border-radius: 50%; border: none; padding: 0; cursor: pointer; display: flex !important; align-items: center; justify-content: center; background: linear-gradient(145deg, #075e54, #128c7e) !important; color: #e7fffb; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease; } #support-ai-float:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 4px 16px rgba(7, 94, 84, 0.45); } #support-ai-float .support-ai-float-icon { font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center; } #support-ai-panel { position: fixed !important; bottom: calc(154px + env(safe-area-inset-bottom, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); width: min(360px, calc(100vw - 28px)); height: min(472px, calc(100vh - 132px)); max-height: min(472px, calc(100vh - 132px)); border-radius: 12px; overflow: hidden; z-index: 1211 !important; display: none; flex-direction: column; background: #0b141a; color: #e9edef; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.42); } #support-ai-panel.support-ai-open { display: flex; } .support-ai-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; background: linear-gradient(90deg, #075e54, #065d4f); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .support-ai-close { background: transparent; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; opacity: 0.9; } .support-ai-close:hover { opacity: 1; } .support-ai-title { font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; } .support-ai-body { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 12px; background: #0b141a; } .support-ai-hint { font-size: 0.82rem; line-height: 1.45; color: rgba(233, 237, 239, 0.68); margin: 0 0 8px; } .support-ai-live-status { font-size: 0.78rem; color: #53b39a; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .support-ai-live-status.support-ai-status-ringing { color: #7ec8ff; animation: support-ai-ring-pulse 1.1s ease-in-out infinite; } @keyframes support-ai-ring-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .support-ai-transcript { flex: 1; overflow-y: auto; min-height: 180px; max-height: 280px; padding: 6px 4px; font-size: 0.84rem; line-height: 1.45; scroll-behavior: smooth; } .support-ai-line { margin-bottom: 8px; padding: 6px 8px; border-radius: 6px; white-space: pre-wrap; } .support-ai-line-you { background: #005c4b; color: #e9edef; margin-left: 12px; } .support-ai-line-ai { background: #1f2c33; color: #e9edef; margin-right: 12px; } .support-ai-line-sys { background: #101a20; color: rgba(233, 237, 239, 0.75); font-size: 0.78rem; border-left: 2px solid #128c7e; } .support-ai-lang-row { margin-bottom: 10px; } .support-ai-lang-label { display: block; font-size: 0.78rem; line-height: 1.35; color: rgba(233, 237, 239, 0.68); margin-bottom: 8px; } .support-ai-lang-btns { display: flex; flex-wrap: wrap; gap: 8px; } .btn-support-lang { flex: 1 1 auto; min-width: 88px; border: none; border-radius: 6px; padding: 8px 10px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: filter 0.15s ease, background 0.15s ease; } .btn-support-lang.support-ai-lang-active { background: #00a884 !important; color: #03221b !important; } .support-ai-live-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .support-ai-mode-text { color: rgba(233, 237, 239, 0.85); } .support-ai-text-row { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .support-ai-textarea { width: 100%; box-sizing: border-box; min-height: 72px; max-height: 160px; resize: vertical; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.12); background: #101a20; color: #e9edef; font-size: 0.84rem; line-height: 1.4; padding: 8px 10px; font-family: inherit; } .support-ai-textarea:focus { outline: 2px solid #128c7e; outline-offset: 1px; } .btn-support-text-send { align-self: flex-end; flex: 0 0 auto; min-width: 88px; } .btn-support-ai { flex: 1; border: none; border-radius: 6px; padding: 8px 12px; font-size: 0.82rem; font-weight: 600; cursor: pointer; background: #00a884; color: #03221b; } .btn-support-ai:hover { filter: brightness(1.06); } .btn-support-ai:disabled { opacity: 0.55; cursor: not-allowed; } .btn-support-ai-muted { background: #2d3a43; color: #e9edef; } .btn-support-ai-muted:hover:not(:disabled) { filter: brightness(1.06); } /* Dark mode 按鈕 */ #darkmode-toggle { position: fixed !important; bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; right: calc(14px + env(safe-area-inset-right, 0px)) !important; z-index: 1212 !important; background: #222; color: #fff; border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.4em; display: flex !important; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.12); padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none; background-image: none; } #darkmode-toggle span { display: block; line-height: 1; font-size: 1.4em; font-family: inherit; font-weight: normal; /* 防止出現多餘空白或字 */ white-space: nowrap; } /* * 平板／手機：三粒掣垂直疊一排（由下而上：深色、WhatsApp、AI），統一掣徑／間距， * 避免細屏並排或大螢 stacking 規則混用導致重疊或偏離 thumb 區。 */ @media (max-width: 768px) { #darkmode-toggle { bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important; right: calc(14px + env(safe-area-inset-right, 0px)) !important; width: 46px !important; height: 46px !important; } #whatsapp-float { bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; right: calc(14px + env(safe-area-inset-right, 0px)) !important; width: 46px !important; height: 46px !important; } #whatsapp-float img { width: 26px !important; height: 26px !important; } #support-ai-float { bottom: calc(130px + env(safe-area-inset-bottom, 0px)) !important; right: calc(14px + env(safe-area-inset-right, 0px)) !important; width: 46px !important; height: 46px !important; } #support-ai-float .support-ai-float-icon { font-size: 1.42rem !important; } /* 對話匡底邊對齊於 AI 掣頂再上留空 */ #support-ai-panel { bottom: calc(188px + env(safe-area-inset-bottom, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); } } /* ADMIN：浮動掣要高於側欄 (1040) */ body.admin-page #darkmode-toggle, body.admin-page #support-ai-float, body.admin-page #whatsapp-float, body.admin-page #support-ai-panel { z-index: 10550 !important; } /* Dark mode 效果 - Zurich 專業風格 */ body.dark-mode { background: #0f0f0f; color: #e8e8e8; } body.dark-mode .zurich-hero { background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); color: #e8e8e8; } body.dark-mode .zurich-content-section { background: #1a1a1a; color: #e8e8e8; } body.dark-mode .zurich-content-section:nth-child(even) { background: #222222; } body.dark-mode .service-card, body.dark-mode .feature-card, body.dark-mode .card { background: #2d2d2d; border-color: #444; color: #e8e8e8; } body.dark-mode .service-card:hover, body.dark-mode .feature-card:hover, body.dark-mode .card:hover { background: #383838; box-shadow: 0 8px 25px rgba(0,0,0,0.4); } body.dark-mode .btn-primary { background: #66a3ff; border-color: #66a3ff; color: #fff !important; } body.dark-mode .btn-primary:hover { background: #4d8cff; border-color: #4d8cff; } body.dark-mode .btn-outline { border-color: #66a3ff; color: #66a3ff; } body.dark-mode .btn-outline:hover { background: #66a3ff; color: #fff; } body.dark-mode:not(.business) section, body.dark-mode:not(.business) main, body.dark-mode .contact-form { background: #1a1a1a !important; color: #e8e8e8 !important; } body.dark-mode.business main { background: transparent !important; } body.dark-mode header { background: #111827 !important; color: #e8e8e8 !important; } body.dark-mode a { color: #66a3ff; } body.dark-mode a:hover { color: #4d8cff; } /* 保護漸層 CTA 按鈕在 dark mode 不變藍 */ body.dark-mode .insta-strip-cta, body.dark-mode .insta-strip-cta:hover, body.dark-mode .btn-instagram, body.dark-mode .btn-instagram:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } body.dark-mode .logo { color: #66a3ff !important; } body.dark-mode #main-nav li a:hover, body.dark-mode #main-nav li a.active { background: #2d2d2d !important; color: #66a3ff !important; } /* Dark mode 表單樣式 */ body.dark-mode input, body.dark-mode textarea, body.dark-mode select { background: #2d2d2d; border-color: #444; color: #e8e8e8; } body.dark-mode input:focus, body.dark-mode textarea:focus, body.dark-mode select:focus { border-color: #66a3ff; box-shadow: 0 0 0 2px rgba(102,163,255,0.2); } /* 修正 dark mode 下圖片顯示問題 */ body.dark-mode img, body.dark-mode img[src] { filter: brightness(0.9) contrast(1.1) saturate(1.05); border-radius: 4px; } /* Logo 圖片在 dark mode 下保持原色 */ body.dark-mode .logo-img, body.dark-mode .nav-logo img, body.dark-mode .mobile-logo img { filter: none !important; background: transparent !important; } /* 保持白底圖片不會變灰 */ body.dark-mode img[style*="background:#fff"], body.dark-mode img[style*="background-color:#fff"] { filter: none !important; background: #2d2d2d !important; padding: 8px; } /* 圖片預覽 modal 內圖片不加 filter */ body.dark-mode #img-preview-modal img, body.dark-mode .modal img { filter: none !important; background: #2d2d2d !important; } /* 手機版側邊欄選單深色模式 */ #mobile-menu-container { background: #ffffff !important; } body.dark-mode #mobile-menu-container { background: #1e1e1e !important; } #mobile-menu-container a { color: #2c2c2c !important; } body.dark-mode #mobile-menu-container a { color: #ffffff !important; } /* 產品圖片和作品集圖片 */ body.dark-mode .product-image, body.dark-mode .portfolio-image, body.dark-mode .gallery-image { background: #2d2d2d; padding: 4px; border-radius: 8px; } /* ===== Footer ===== */ footer { background: #343a40; color: #ffffff; padding: 28px 24px 24px; margin-top: 0; font-family: 'Segoe UI', 'Helvetica Neue', Arial, 'PingFang HK', 'Microsoft JhengHei', sans-serif; font-size: 0.9em; letter-spacing: 0.01em; } .footer-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; } .footer-left { display: flex; flex-direction: column; gap: 4px; } .footer-left p { margin: 0; font-size: 13px; color: #adb5bd; } .footer-links { display: flex; align-items: center; gap: 0; flex-wrap: wrap; } .footer-links a { color: #9ca3af; text-decoration: none; font-size: 13px; transition: color 0.18s; } .footer-links a:hover { color: #e0e0e0; text-decoration: none; } .footer-sep { color: #6b7280; margin: 0 8px; font-size: 13px; } /* 社交媒體圖示 */ .footer-social { display: flex; gap: 10px; align-items: center; flex-shrink: 0; } .social-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #9ca3af; text-decoration: none !important; transition: background 0.25s, color 0.25s, transform 0.2s; flex-shrink: 0; overflow: hidden; box-sizing: border-box; } .social-icon svg { width: 17px; height: 17px; min-width: 17px; min-height: 17px; max-width: 17px; max-height: 17px; display: block; fill: currentColor; pointer-events: none; flex: 0 0 17px; } .social-icon:hover { background: rgba(255,255,255,0.2); color: #ffffff !important; transform: translateY(-2px); } .social-icon.social-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #ffffff !important; } .social-icon.social-whatsapp:hover { background: #25d366; color: #ffffff !important; } /* footer 舊式裸連結向後兼容 */ footer > p, footer > a { margin: 4px 8px; font-size: 13px; color: #adb5bd; text-decoration: none; } footer > a:hover { color: #e0e0e0; } /* Dark mode footer */ body.dark-mode footer { background: #111827 !important; border-top: 1px solid #1f2937; } body.dark-mode .footer-links a, body.dark-mode footer > a { color: #9ca3af !important; } body.dark-mode .footer-links a:hover, body.dark-mode footer > a:hover { color: #e5e7eb !important; } body.dark-mode .social-icon { color: #9ca3af !important; background: rgba(255,255,255,0.06) !important; } body.dark-mode .social-icon:hover { color: #ffffff !important; background: rgba(255,255,255,0.18) !important; } body.dark-mode .social-icon.social-instagram:hover { background: linear-gradient(45deg, #f09433, #bc1888) !important; color: #ffffff !important; } body.dark-mode .social-icon.social-whatsapp:hover { background: #25d366 !important; color: #ffffff !important; } @media (max-width: 576px) { .footer-inner { flex-direction: column; align-items: center; text-align: center; gap: 16px; } .footer-left { align-items: center; } } /* 滾动條美化 */ ::-webkit-scrollbar { width: 8px; background: #e3e3e3; } ::-webkit-scrollbar-thumb { background: var(--inftdes-primary); border-radius: 8px; } /* Dark mode 表格樣式 */ .dark-table { background: #23272e !important; color: #e0e0e0 !important; } .dark-table th, .dark-table td { background: #23272e !important; color: #e0e0e0 !important; border-color: #444 !important; } .dark-table thead tr { background: #2d333b !important; } .dark-table tbody tr { border-bottom: 1px solid #444 !important; } .dark-table tr:hover { background: #2d333b !important; } /* 最新消息表格內「查看」連結按鈕（light mode） */ .news-table-link-btn, .news-table-link-btn:link, .news-table-link-btn:visited { display: inline-block; background: var(--inftdes-primary); color: #fff !important; border: none; border-radius: 6px; padding: 6px 16px; font-size: 1em; font-weight: 600; text-decoration: none; margin: 2px 0; transition: background 0.18s, color 0.18s; box-shadow: 0 1px 6px rgba(var(--inftdes-primary-rgb),0.08); } .news-table-link-btn:hover, .news-table-link-btn:active, .news-table-link-btn:focus { background: var(--inftdes-primary-hover); color: #fff !important; text-decoration: none; } body.dark-mode .news-table-link-btn, body.dark-mode .news-table-link-btn:link, body.dark-mode .news-table-link-btn:visited { background: var(--inftdes-primary-tint); color: #23272f !important; } body.dark-mode .news-table-link-btn:hover, body.dark-mode .news-table-link-btn:active, body.dark-mode .news-table-link-btn:focus { background: var(--inftdes-primary-light); color: #fff !important; } /* CMS 預覽表格內「查看」連結 */ #news-section table td a, .news-content table td a, .news-list table td a { background: var(--inftdes-primary) !important; color: #fff !important; padding: 6px 16px !important; border-radius: 6px !important; text-decoration: none !important; font-weight: 600 !important; display: inline-block !important; } body.dark-mode #news-section table td a, body.dark-mode .news-content table td a, body.dark-mode .news-list table td a { background: var(--inftdes-primary-tint) !important; color: #23272f !important; } /* 響應式設計增強 - 統一所有頁面的斷點 */ @media (max-width: 1200px) { body:not(.business) main { padding: 24px 3vw 60px 3vw; } body:not(.business) section { padding: 28px 16px 24px 16px; margin: 16px auto; } .logo { font-size: 1.8em; padding: 24px 0 14px 0; } } @media (max-width: 992px) { body:not(.business) main { padding: 20px 3vw 50px 3vw; } body:not(.business) section { padding: 24px 14px 20px 14px; margin: 14px auto; } .logo { font-size: 1.6em; padding: 20px 0 12px 0; } h2 { font-size: 1.3em; } } @media (max-width: 800px) { body:not(.business) main { padding: 18px 4vw 60px 4vw; } body:not(.business) section { padding: 24px 8px 18px 8px; } #main-nav ul { gap: 12px; justify-content: center; flex-wrap: wrap; } .logo { font-size: 1.3em; padding: 18px 0 10px 0; } h2 { font-size: 1.1em; } } @media (max-width: 768px) { body:not(.business) main { padding: 16px 4vw 50px 4vw; } body:not(.business) section { padding: 20px 12px 16px 12px; margin: 12px auto; border-radius: 12px; } .logo { font-size: 1.2em; padding: 16px 0 8px 0; } h1 { font-size: 1.6em; } h2 { font-size: 1.2em; } h3 { font-size: 1.1em; } } @media (max-width: 576px) { body:not(.business) main { padding: 14px 3vw 40px 3vw; } body:not(.business) section { padding: 16px 8px 14px 8px; margin: 8px auto; border-radius: 8px; } .logo { font-size: 1.1em; padding: 14px 0 6px 0; } h1 { font-size: 1.4em; } h2 { font-size: 1.1em; } h3 { font-size: 1.0em; } } /* WhatsApp 浮動按鈕圖片在 dark mode 下不加 filter，保持原色 */ body.dark-mode #whatsapp-float img { filter: none !important; background: transparent !important; } /* Mobile Menu Styles */ @media (max-width: 1024px) { #mobile-menu-overlay { background: rgba(26, 35, 48, 0.92); backdrop-filter: blur(12px); } .mobile-nav-list a { display: block; padding: 15px 30px; font-size: 1.8em; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.3s, border-color 0.3s; } /* Light mode link colors */ .mobile-nav-list a { color: #1a2330; border-bottom: 2px solid #d32f2f; } .mobile-nav-list a[href="profile.html"], .mobile-nav-list a[href="edit-profile.html"], .mobile-nav-list a[href="register.html"], .mobile-nav-list a[href="login.html"] { color: var(--inftdes-primary); border-bottom-color: var(--inftdes-primary); } .mobile-nav-list a[href="cms.html"], .mobile-nav-list a[href="shop-admin.html"], .mobile-nav-list a[href="contact-admin.html"] { color: #c62828; border-bottom-color: #c62828; } .mobile-nav-list a[href="#"] { color: #c62828; border-bottom-color: #c62828; } /* Dark mode link colors */ body.dark-mode .mobile-nav-list a { color: #ffffff; border-bottom: 2px solid #ff5252; } body.dark-mode .mobile-nav-list a[href="profile.html"], body.dark-mode .mobile-nav-list a[href="edit-profile.html"], body.dark-mode .mobile-nav-list a[href="register.html"], body.dark-mode .mobile-nav-list a[href="login.html"] { color: var(--inftdes-primary-light); border-bottom-color: var(--inftdes-primary-light); } body.dark-mode .mobile-nav-list a[href="cms.html"], body.dark-mode .mobile-nav-list a[href="shop-admin.html"], body.dark-mode .mobile-nav-list a[href="contact-admin.html"] { color: #ff8a65; border-bottom-color: #ff8a65; } body.dark-mode .mobile-nav-list a[href="#"] { color: #ff5252; border-bottom-color: #ff5252; } } /* Mobile Menu Enhanced Styles */ @media (max-width: 1024px) { /* Mobile menu overlay enhanced */ #mobile-menu-overlay { background: rgba(26, 35, 48, 0.92) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; } /* Mobile menu container adaptive styling */ #mobile-menu-container { background: var(--mobile-menu-bg, #ffffff); color: var(--mobile-menu-text, #333333); border-left: 3px solid var(--mobile-menu-accent, var(--inftdes-primary)); } /* Dark mode mobile menu variables */ body.dark-mode #mobile-menu-container { --mobile-menu-bg: #1a1a1a; --mobile-menu-text: #f5f5f5; --mobile-menu-accent: var(--inftdes-primary-light); } /* Light mode mobile menu variables */ body:not(.dark-mode) #mobile-menu-container { --mobile-menu-bg: #ffffff; --mobile-menu-text: #333333; --mobile-menu-accent: var(--inftdes-primary); } /* Mobile menu text enhanced visibility */ #mobile-menu-container a { color: var(--mobile-menu-text) !important; text-shadow: none !important; -webkit-text-fill-color: var(--mobile-menu-text) !important; font-weight: 600 !important; transition: all 0.3s ease !important; } body:not(.dark-mode) #mobile-menu-container a { color: #1f2937 !important; -webkit-text-fill-color: #1f2937 !important; text-shadow: none !important; } body.dark-mode #mobile-menu-container a { -webkit-text-fill-color: #ffffff !important; text-shadow: 2px 2px 6px rgba(0,0,0,0.9) !important; } /* Mobile menu item hover effects */ #mobile-menu-container a:hover { background: rgba(var(--inftdes-primary-rgb), 0.2) !important; transform: translateX(8px) !important; border-radius: 8px !important; } body.dark-mode #mobile-menu-container a:hover { background: rgba(66, 165, 245, 0.2) !important; } /* Category colors for mobile menu */ .mobile-menu-main { color: var(--mobile-menu-accent) !important; } .mobile-menu-user { color: var(--inftdes-primary) !important; } .mobile-menu-admin { color: #ff9800 !important; } .mobile-menu-auth { color: #f44336 !important; } body.dark-mode .mobile-menu-main { color: var(--inftdes-primary-tint) !important; } body.dark-mode .mobile-menu-user { color: var(--inftdes-primary-tint) !important; } body.dark-mode .mobile-menu-admin { color: #ffb74d !important; } body.dark-mode .mobile-menu-auth { color: #ef5350 !important; } /* Mobile menu close button enhanced */ #mobile-menu-close { background: rgba(255, 255, 255, 0.3) !important; border: 2px solid rgba(255, 255, 255, 0.5) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important; z-index: 10005 !important; } #mobile-menu-close:hover { background: rgba(255, 255, 255, 0.4) !important; border-color: rgba(255, 255, 255, 0.7) !important; transform: scale(1.1) !important; box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important; } /* Hamburger button states */ #mobile-menu-button { transition: all 0.3s ease !important; } #mobile-menu-button.hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 1 !important; } /* Smooth animations */ @keyframes mobileMenuSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes mobileMenuSlideOut { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100%); opacity: 0; } } @keyframes overlayFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes overlayFadeOut { from { opacity: 1; } to { opacity: 0; } } } /* Accessibility improvements for mobile menu */ @media (max-width: 1024px) { #mobile-menu-container:focus-within { outline: 2px solid var(--mobile-menu-accent); outline-offset: 2px; } #mobile-menu-container a:focus { outline: 2px solid var(--mobile-menu-accent) !important; outline-offset: 2px !important; background: rgba(var(--inftdes-primary-rgb), 0.1) !important; } body.dark-mode #mobile-menu-container a:focus { background: rgba(66, 165, 245, 0.1) !important; } } /* Ensure desktop nav remains visible on larger screens */ @media (min-width: 1025px) { #desktop-nav { display: block !important; } #mobile-menu-button, #mobile-menu-overlay, #mobile-menu-container { display: none !important; } } /* 手機版主選單 LOGO 和公司名稱樣式 */ @media (max-width: 1024px) { #mobile-menu-header { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 20px; background: linear-gradient(135deg, var(--inftdes-primary), var(--inftdes-primary-light)); color: #ffffff; text-align: center; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } body.dark-mode #mobile-menu-header { background: linear-gradient(135deg, #1a1a1a, #2d2d2d); color: #ffffff; } #mobile-menu-logo { font-size: 1.8em; font-weight: 700; letter-spacing: 0.08em; color: #ffffff; text-shadow: 0 2px 12px rgba(255, 255, 255, 0.2); margin-bottom: 8px; } body.dark-mode #mobile-menu-logo { color: var(--inftdes-primary-tint); } #mobile-menu-company-name { font-size: 1em; font-weight: 500; color: #ffffff; opacity: 0.9; } body.dark-mode #mobile-menu-company-name { color: #b0bec5; } #mobile-menu-header .red-underline { width: 60%; height: 4px; background: #d32f2f; margin-top: 8px; border-radius: 2px; } body.dark-mode #mobile-menu-header .red-underline { background: #ff5252; } } /* 手機版主選單底線和文字顏色樣式 */ @media (max-width: 1024px) { #mobile-nav-ul a { color: #1a2330; text-decoration: none; border-bottom: 2px solid #d32f2f; padding: 12px 16px; font-size: 1.2em; font-weight: 600; } body.dark-mode #mobile-nav-ul a { color: #ffffff; border-bottom: 2px solid var(--inftdes-primary-light); } #mobile-nav-ul a:hover { background: rgba(var(--inftdes-primary-rgb), 0.1); } body.dark-mode #mobile-nav-ul a:hover { background: rgba(66, 165, 245, 0.1); } } /* Update mobile menu link styles for light and dark modes */ .mobile-nav-link { color: #1a2330; border-bottom: 2px solid #d32f2f; } body.dark-mode .mobile-nav-link { color: #ffffff !important; border-bottom: 2px solid var(--inftdes-primary-light) !important; } /* Legacy nav-logo（非 business 舊頁）；business 以 nav-chrome.css 為準 */ body:not(.business) .nav-logo { display: flex; align-items: center; gap: 18px; text-decoration: none; } body:not(.business) .nav-logo img { height: 72px; max-width: 220px; } body:not(.business) .nav-logo .logo { font-size: 2.1em; line-height: 1.1; } /* 全局統一輸入欄樣式 */ input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], input[type="url"], select, textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 1rem; border-radius: 6px; border: 1px solid #ced4da; background: #ffffff; color: #212529; font-family: inherit; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus, input[type="tel"]:focus, input[type="url"]:focus, select:focus, textarea:focus { border-color: var(--inftdes-primary); box-shadow: 0 0 0 0.2rem rgba(var(--inftdes-primary-rgb), 0.25); outline: 0; } /* Dark mode 輸入欄樣式 */ body.dark-mode input[type="text"], body.dark-mode input[type="email"], body.dark-mode input[type="password"], body.dark-mode input[type="number"], body.dark-mode input[type="date"], body.dark-mode input[type="tel"], body.dark-mode input[type="url"], body.dark-mode select, body.dark-mode textarea { background: #343a40; color: #e0e0e0; border-color: #495057; } body.dark-mode input[type="text"]:focus, body.dark-mode input[type="email"]:focus, body.dark-mode input[type="password"]:focus, body.dark-mode input[type="number"]:focus, body.dark-mode input[type="date"]:focus, body.dark-mode input[type="tel"]:focus, body.dark-mode input[type="url"]:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { border-color: var(--inftdes-primary-tint); box-shadow: 0 0 0 0.2rem rgba(144, 202, 249, 0.25); } /* 統一標籤樣式 */ label { display: block; margin-bottom: 6px; font-weight: 600; color: #495057; font-size: 1rem; } body.dark-mode label { color: #e0e0e0; } /* 統一按鈕樣式 */ .btn, button[type="submit"], input[type="submit"] { display: inline-block; font-weight: 600; line-height: 1.5; color: #ffffff; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; user-select: none; background-color: var(--inftdes-primary); border: 1px solid var(--inftdes-primary); padding: 10px 16px; font-size: 1rem; border-radius: 6px; transition: all 0.15s ease-in-out; } .btn:hover, button[type="submit"]:hover, input[type="submit"]:hover { background-color: var(--inftdes-primary-hover); border-color: var(--inftdes-primary-hover); color: #ffffff; text-decoration: none; } /* 響應式表單改善 */ @media (max-width: 768px) { input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="date"], input[type="tel"], input[type="url"], select, textarea { font-size: 16px; /* 防止iOS自動縮放 */ padding: 12px; } .btn, button[type="submit"], input[type="submit"] { padding: 12px 16px; width: 100%; margin-bottom: 8px; } } /* ===== 全域 Dark Mode 標題顏色修正 ===== */ /* 因為 h1/h2 有直接的 color:var(--inftdes-primary)，需要 dark mode 明確覆蓋 */ body.dark-mode h1, body.dark-mode h2 { color: var(--inftdes-primary-tint); } body.dark-mode h3 { color: #b8d4f0; } body.dark-mode section h2 { border-bottom-color: #2d3748; } body.dark-mode section p, body.dark-mode section li { color: #d0d8e4; } /* 避免深色模式下連結在卡片/section 裡過於刺眼 */ body.dark-mode section a:not(.btn):not(.cta-btn):not(.insta-strip-cta) { color: var(--inftdes-primary-tint) !important; } /* feature-card / stat-card / service-card 標題在 dark mode */ body.dark-mode .feature-card h3, body.dark-mode .service-card h3, body.dark-mode .stat-card .stat-number { color: var(--inftdes-primary-tint); } body.dark-mode .feature-card p, body.dark-mode .service-card p { color: #b0bec5; } /* Zurich footer section dark */ body.dark-mode .zurich-features-section { background: #111827; border-top-color: #2d3748; } body.dark-mode .instagram-footer { background: #1a1a2e; border-color: #2d3748; } body.dark-mode .instagram-footer h3 { color: var(--inftdes-primary-tint); } body.dark-mode .instagram-footer p { color: #9ca3af; } /* ===== Instagram 圖片條：.insta-strip 規則在手機版 @media 之後（避免誤插在空選擇器內）===== */ /* ===== 手機版一致性與圖片穩定修正 ===== */ /* 防止圖片在樣式完成前瞬間放大，降低 CLS/閃爍 */ main img, section img, .table img, #news-section img, .news-content img, .shop-list img, #shop-list img { max-width: 100%; height: auto; display: block; } /* 常見縮圖容器預留高度，避免先放大後回縮 */ .news-images-container, .news-card .news-image, .product-image-container { background: #eef2f6; border-radius: 8px; overflow: hidden; } body.dark-mode .news-images-container, body.dark-mode .news-card .news-image, body.dark-mode .product-image-container { background: #20262f; } /* 確保商品圖/消息圖顯示比例穩定 */ .news-thumbnail, .news-image-clickable, .product-image-container img, .shop-list .shop-item img { width: 100%; height: auto; object-fit: cover; } /* 手機版統一排版節奏 */ @media (max-width: 768px) { body { font-size: 15px; } .container, section, .card { border-radius: 10px !important; } .admin-header h1, .page-banner h1 { letter-spacing: 0.01em; } .btn, button, input, select, textarea { font-size: 16px !important; } } .insta-strip { background: #f8f9fa; border-top: 1px solid #e9ecef; padding: 48px 20px 40px; text-align: center; } body.dark-mode .insta-strip { background: #111827; border-top-color: #1f2937; } .insta-strip-heading { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; } .insta-strip-icon { font-size: 1.6em; line-height: 1; } .insta-strip-heading h3 { font-size: 1.4em; font-weight: 700; margin: 0; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; border: none; } /* 覆蓋 dark-mode h3 全域規則：Instagram 標題保持漸層色 */ body.dark-mode .insta-strip-heading h3 { color: transparent; } .insta-strip-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 900px; margin: 0 auto 28px; } .insta-strip-item { aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #e9ecef; position: relative; display: block; text-decoration: none; } body.dark-mode .insta-strip-item { background: #1f2937; } .insta-strip-item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; filter: none !important; /* 不加暗色 filter */ } .insta-strip-item:hover img { transform: scale(1.08); } .insta-strip-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background 0.3s; display: flex; align-items: center; justify-content: center; } .insta-strip-item:hover .insta-strip-overlay { background: rgba(0,0,0,0.28); } .insta-strip-play { color: white; font-size: 1.6em; opacity: 0; transition: opacity 0.3s; text-shadow: 0 2px 8px rgba(0,0,0,0.5); } .insta-strip-item:hover .insta-strip-play { opacity: 1; } /* Skeleton shimmer */ .insta-strip-skel { background: linear-gradient(90deg, #e0e0e0 25%, #ebebeb 50%, #e0e0e0 75%); background-size: 200% 100%; animation: instaShimmer 1.4s infinite; } body.dark-mode .insta-strip-skel { background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%); background-size: 200% 100%; } @keyframes instaShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .insta-strip-cta { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); color: #ffffff !important; font-weight: 600; padding: 12px 28px; border-radius: 50px; text-decoration: none !important; font-size: 1em; transition: transform 0.2s, box-shadow 0.2s; box-shadow: 0 4px 15px rgba(188, 24, 136, 0.3); -webkit-text-fill-color: #ffffff; } .insta-strip-cta:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 25px rgba(188, 24, 136, 0.45) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff; } @media (max-width: 768px) { .insta-strip { padding: 32px 12px 28px; } .insta-strip-grid { grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 100%; } .insta-strip-heading h3 { font-size: 1.1em; } .insta-strip-cta { font-size: 0.92em; padding: 10px 22px; } } @media (max-width: 480px) { .insta-strip-grid { gap: 3px; } } /* Section / member layout: inftdes-site.css + auth-forms.css */ /* Admin pages keep full-width sections */ body.admin-page .container.my-5, body.admin-page .container.my-5 > section, body.admin-page main > section { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* shop-admin nested Bootstrap containers should also be full-width */ body.admin-page .shop-admin-content .container, body.admin-page .shop-admin-content .container-fluid { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } /* ---- Admin 工具列：Zurich 全站同色（section / hero 灰藍底、主色 var(--inftdes-primary)、Dark 同上站） ---- */ body.admin-page { --at-muted: #6c757d; --at-strip-a: #f8f9fa; --at-strip-b: #e9ecef; --at-strip-line: #dee2e6; --at-chip-fg: #333333; --at-chip-bd: #ced4da; --at-chip-bg: #ffffff; --at-chip-hover-bg: rgba(var(--inftdes-primary-rgb), 0.09); --at-chip-hover-bd: #4da3ff; --at-chip-hover-fg: var(--inftdes-primary-hover); --at-meta: var(--inftdes-primary); --at-link: var(--inftdes-primary); --at-link-hover: var(--inftdes-primary-hover); --at-odanger-fg: #bd2130; --at-odanger-bd: #f1949e; --at-chip-danger-bg: #ffffff; --at-sdanger-bg: #dc3545; --at-sdanger-bd: #c82333; } body.dark-mode.admin-page { --at-muted: #adb5bd; --at-strip-a: #2d2d2d; --at-strip-b: #292929; --at-strip-line: #444444; --at-chip-fg: #e8e8e8; --at-chip-bd: #555555; --at-chip-bg: #383838; --at-chip-hover-bg: rgba(102, 163, 255, 0.12); --at-chip-hover-bd: #66a3ff; --at-chip-hover-fg: #f5faff; --at-meta: #66a3ff; --at-link: #66a3ff; --at-link-hover: #93c0ff; --at-odanger-fg: #f1949b; --at-odanger-bd: #a84852; --at-chip-danger-bg: rgba(220, 53, 69, 0.12); --at-sdanger-bg: #dc3545; --at-sdanger-bd: #bd2130; } .admin-tools-bar { display: flex !important; justify-content: space-between !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px 12px !important; } .admin-tools-group { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; } /* 底板同 .zurich-hero（135deg 柔灰）；admin 橫幅用細改角度保持柔 */ body.admin-page .admin-tools-bar.admin-tools-strip { padding: 10px 16px !important; background: linear-gradient(135deg, var(--at-strip-a) 0%, var(--at-strip-b) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6) !important; } body.dark-mode.admin-page .admin-tools-bar.admin-tools-strip { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important; } body.admin-page .card > .card-header.admin-tools-strip { margin: 0 !important; border: none !important; border-bottom: 1px solid var(--at-strip-line) !important; border-radius: 0 !important; background-color: transparent !important; background-image: linear-gradient( 135deg, var(--at-strip-a) 0%, var(--at-strip-b) 100% ) !important; } body.admin-page #cms-content .cms-admin-tools.admin-tools-strip { margin: 8px 0 18px !important; border: 1px solid var(--at-strip-line) !important; border-radius: 8px !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; } body.dark-mode.admin-page #cms-content .cms-admin-tools.admin-tools-strip { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35) !important; } body.admin-page .wp-admin-panel > .wp-admin-head.admin-tools-strip { border: none !important; border-bottom: 1px solid var(--at-strip-line) !important; border-radius: 0 !important; } /* 標題：固定字級，避免各頁 h5 規則干擾 */ /* 標題色同全站 h1/h2 Zurich 藍；Dark 同全站連結 #66a3ff */ body.admin-page .admin-tools-heading { font-size: 1rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important; line-height: 1.35 !important; color: var(--inftdes-primary) !important; margin-bottom: 0 !important; font-family: "Segoe UI", "Helvetica Neue", Arial, "PingFang HK", "Microsoft JhengHei", sans-serif !important; } body.dark-mode.admin-page .admin-tools-heading { color: #66a3ff !important; } /* 掣：尺寸一致；取消全站 .btn 藍底／浮起 */ body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm { height: auto !important; min-height: 36px !important; padding: 7px 14px !important; font-size: 0.9rem !important; font-weight: 500 !important; line-height: 1.35 !important; border-radius: 6px !important; margin: 0 !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.45em !important; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm:hover, body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm:focus-visible, body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm:active { transform: none !important; box-shadow: none !important; } body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm:focus-visible { outline: 2px solid rgba(0, 123, 255, 0.4) !important; outline-offset: 2px !important; } body.dark-mode.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm:focus-visible { outline-color: rgba(102, 163, 255, 0.55) !important; } body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm i, body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm .fab { font-size: 0.92em !important; line-height: 1 !important; } body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm.btn-outline-secondary { color: var(--at-chip-fg) !important; border-width: 1px !important; border-style: solid !important; border-color: var(--at-chip-bd) !important; background-color: var(--at-chip-bg) !important; background-image: none !important; } body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm.btn-outline-secondary:hover { color: var(--at-chip-hover-fg) !important; border-color: var(--at-chip-hover-bd) !important; background-color: var(--at-chip-hover-bg) !important; } /* 還原（outline） */ body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm.btn-outline-danger { color: var(--at-odanger-fg) !important; border-color: var(--at-odanger-bd) !important; background-color: var(--at-chip-danger-bg) !important; font-weight: 500 !important; } body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm.btn-outline-danger:hover { color: #fff !important; border-color: var(--at-sdanger-bd) !important; background-color: var(--at-sdanger-bg) !important; } /* 完整還原（實心） */ body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm.btn-danger { font-weight: 600 !important; color: #fff !important; background-color: var(--at-sdanger-bg) !important; border-color: var(--at-sdanger-bd) !important; background-image: none !important; } body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm.btn-danger:hover { filter: brightness(1.07); } body.dark-mode.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm.btn-danger:hover { filter: brightness(1.12); } body.admin-page .admin-tools-bar .admin-tools-meta-msg { font-size: 0.875rem !important; font-weight: 500 !important; color: var(--at-meta) !important; } body.admin-page .admin-tools-bar .admin-tools-external-link { font-size: 0.9rem !important; font-weight: 600 !important; color: var(--at-link) !important; text-decoration: none !important; } body.admin-page .admin-tools-bar .admin-tools-external-link:hover { color: var(--at-link-hover) !important; text-decoration: underline !important; } body.admin-page .card-header.admin-tools-bar.admin-tools-strip .text-muted { color: var(--at-muted) !important; font-size: 0.875rem !important; } @media (max-width: 768px) { .admin-tools-group { width: 100%; } body.admin-page .admin-tools-bar .admin-tools-group > .btn.btn-sm { flex: 1 1 auto; min-width: 112px; } body.admin-page .admin-tools-heading { width: 100%; } } /* Hero/banner/shop 佈局：inftdes-redesign.css + shop-page.css（Phase 18） */