/* 🌿 綠金風格 Mobile 側邊選單專用 CSS */ .custom-mobile-menu-box { padding: 10px 5px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* 1. 搜尋欄位美化 */ .menu-search-wrapper { position: relative; margin-bottom: 20px; } .menu-search-input { width: 100% !important; height: 42px !important; padding: 8px 45px 8px 16px !important; border: 1px solid #d4af37 !important; border-radius: 25px !important; background-color: #fdfbf7 !important; font-size: 14px !important; color: #1b4332 !important; box-sizing: border-box !important; outline: none !important; } .menu-search-input::placeholder { color: #a3b18a; } .menu-search-button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); background: #1b4332; color: #ffffff; border: none; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: all 0.3s ease; } .menu-search-button:hover { background: #d4af37; } /* 2. 主選單列表美化 */ .custom-menu-list { list-style: none !important; padding: 0 !important; margin: 0 0 20px 0 !important; } .custom-menu-list li { list-style: none !important; margin: 0 !important; border-bottom: 1px dashed rgba(212, 175, 55, 0.3); } .custom-menu-list li a { display: flex; justify-content: space-between; align-items: center; padding: 11px 8px; color: #1b4332 !important; font-weight: 600; font-size: 14.5px; text-decoration: none !important; transition: all 0.25s ease; } .custom-menu-list li a:hover { color: #d4af37 !important; padding-left: 14px; background-color: #fdfbf7; } .custom-menu-list li a .arrow { color: #d4af37; font-size: 14px; } /* 強調項目 (熱銷/限時優惠) 的微調特效 */ .custom-menu-list li.highlight-item a { color: #b88d2a !important; } /* 3. 專屬優惠 Banner */ .menu-promo-banner-link { display: block; text-decoration: none !important; margin-bottom: 20px; } .menu-promo-banner { background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%); color: #ffffff; padding: 12px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; border-left: 4px solid #d4af37; box-shadow: 0 4px 10px rgba(27, 67, 50, 0.15); display: flex; justify-content: space-between; align-items: center; transition: all 0.3s ease; } .menu-promo-banner:hover { background: linear-gradient(135deg, #2d6a4f 0%, #1b4332 100%); transform: translateY(-2px); box-shadow: 0 6px 15px rgba(212, 175, 55, 0.25); } /* 4. 社群平台按鈕專區 */ .custom-social-links { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .custom-social-links li { list-style: none !important; margin: 0 !important; } .custom-social-links li a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; background-color: #ffffff; border: 1px solid #e0e0e0; border-radius: 10px; color: #1b4332 !important; font-size: 13px; font-weight: 600; text-decoration: none !important; transition: all 0.25s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.03); } .custom-social-links li a:hover { border-color: #d4af37; color: #d4af37 !important; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2); } .custom-social-links li a .social-icon { width: 22px; height: 22px; fill: currentColor; }
