/* 主站 lucys.com */ /* Mobile Menu & Footer Optimization v1.5 */ /* ============================================ */ /* ======================================== MOBILE MENU OPTIMIZATION ======================================== */ /* When menu is open on mobile */ @media (max-width:991px){/* Menu container styling */ .navbar-collapse{background:linear-gradient(180deg,#fffef8 0%,#fff9e6 100%) !important;border-left:1px solid #e8e4dd;box-shadow:-5px 0 20px rgba(0,0,0,0.1)}/* 關鍵修復：覆蓋 Bootstrap ml-auto，讓選單靠左 */ .navbar-collapse .navbar-nav,.navbar-collapse .navbar-nav.ml-auto{margin-left:0 !important;margin-right:auto !important;padding:20px 15px 30px 10px}/* Home icon styling - 移除框，簡潔設計，靠左 */ .navbar-collapse .nav-home{display:flex;align-items:center;justify-content:flex-start;width:auto;height:auto;background:transparent;border:none;border-radius:0;margin:0 0 15px 0;padding:10px 0;transition:all 0.3s ease}.navbar-collapse .nav-home:hover{background:transparent;border-color:transparent}.navbar-collapse .nav-home:hover .nc-icon{color:#c9a050 !important}.navbar-collapse .nav-home .nc-icon{font-size:24px;color:#333 !important}/* Divider after home icon */ .navbar-collapse .navbar-nav > li:first-child{border-bottom:1px solid #e8e4dd;padding-bottom:10px;margin-bottom:15px}/* Category menu items (BOYS,GIRLS,BABY & TODDLERS) - 字體深色 #222 */ .navbar-collapse .navbar-nav .nav-item.dropdown > .nav-link{display:block;padding:14px 15px;font-size:15px;font-weight:600;color:#222 !important;letter-spacing:1px;text-transform:uppercase;background:#fff;border:1px solid #e8e4dd;border-radius:8px;margin-bottom:10px;transition:all 0.3s ease}.navbar-collapse .navbar-nav .nav-item.dropdown > .nav-link:hover,.navbar-collapse .navbar-nav .nav-item.dropdown > .nav-link:focus{background:#f9f7f4;border-color:#c9a050;color:#222 !important}.navbar-collapse .navbar-nav .nav-item.dropdown > .nav-link .caret{float:right;margin-top:6px;border-top-color:#444}/* Dropdown menu styling - 加入滾動功能解決子分類過多問題 */ .navbar-collapse .dropdown-menu{background:#fff;border:none;box-shadow:none;padding:5px 0 15px 10px;margin-top:0;max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch}/* 滾動條樣式 */ .navbar-collapse .dropdown-menu::-webkit-scrollbar{width:4px}.navbar-collapse .dropdown-menu::-webkit-scrollbar-track{background:#f1f1f1;border-radius:2px}.navbar-collapse .dropdown-menu::-webkit-scrollbar-thumb{background:#c9a050;border-radius:2px}.navbar-collapse .dropdown-menu .dropdown-item{padding:10px 15px;font-size:14px;color:#666;border-radius:5px;margin-bottom:2px}.navbar-collapse .dropdown-menu .dropdown-item:hover{background:#f9f7f4;color:#c9a050}/* CONTACT link - 字體深色 #222 */ .navbar-collapse .navbar-nav > li:not(.dropdown) > .nav-link:not(.btn){display:block;padding:14px 15px;font-size:15px;font-weight:600;color:#222 !important;letter-spacing:1px;text-transform:uppercase;background:#fff;border:1px solid #e8e4dd;border-radius:8px;margin-bottom:10px}/* Cart button styling */ .navbar-collapse .navbar-nav .btn-link{display:flex !important;align-items:center;justify-content:flex-start;padding:14px 15px !important;font-size:15px;font-weight:500;color:#e74c3c !important;background:#fff;border:1px solid #e8e4dd;border-radius:8px;margin-bottom:15px;width:100%;text-align:left}.navbar-collapse .navbar-nav .btn-link .nc-icon{font-size:20px;margin-right:10px}/* Section divider before login/register - 優化寬度 */ .navbar-collapse .navbar-nav > li:has(> .btn-primary),.navbar-collapse .navbar-nav > li:has(> .btn-warning){display:inline-block;width:48%;vertical-align:top;margin-right:2%}.navbar-collapse .navbar-nav > li:has(> .btn-warning){margin-right:0}/* Login & Register buttons - 統一寬度 */ .navbar-collapse .navbar-nav .btn-primary,.navbar-collapse .navbar-nav .btn-warning{display:flex !important;align-items:center;justify-content:center;width:100%;padding:12px 10px !important;font-size:13px;font-weight:600;letter-spacing:0.5px;border-radius:8px;margin-bottom:15px;box-sizing:border-box}.navbar-collapse .navbar-nav .btn-primary{background:#3498db;border-color:#3498db;color:#fff !important}.navbar-collapse .navbar-nav .btn-warning{background:#c9a050;border-color:#c9a050;color:#fff !important}.navbar-collapse .navbar-nav .btn-primary .nc-icon,.navbar-collapse .navbar-nav .btn-warning .nc-icon{margin-right:6px;font-size:14px}/* Book an appointment button - 灰色背景白色字，確保文字完整顯示 */ .navbar-collapse .navbar-nav .btn-outline-default,.navbar-collapse .navbar-nav .btn-default,.navbar-collapse .navbar-nav > li > a.btn:not(.btn-primary):not(.btn-warning):not(.btn-link),.navbar-collapse .navbar-nav a[href*="appointment"].btn,.navbar-collapse .navbar-nav a[href*="booking"].btn{display:block !important;width:100%;padding:14px 10px !important;font-size:12px;font-weight:600;color:#fff !important;background:#66615b !important;border:none !important;border-radius:8px !important;text-align:center;letter-spacing:0.3px;margin-top:10px;margin-bottom:15px;transition:all 0.3s ease;box-sizing:border-box;white-space:nowrap;overflow:visible}.navbar-collapse .navbar-nav .btn-outline-default:hover,.navbar-collapse .navbar-nav .btn-default:hover,.navbar-collapse .navbar-nav > li > a.btn:not(.btn-primary):not(.btn-warning):not(.btn-link):hover,.navbar-collapse .navbar-nav a[href*="appointment"].btn:hover,.navbar-collapse .navbar-nav a[href*="booking"].btn:hover{background:#555 !important;color:#fff !important}/* Currency selector */ .navbar-collapse .navbar-nav .js-web-currency{width:100%;padding:12px 15px;font-size:14px;border:1px solid #e8e4dd;border-radius:8px;background:#fff;color:#555;margin:10px 0 !important;height:auto !important}/* Close button styling */ .navbar-collapse .navbar-toggler-bar{background:#333}/* Animation for menu items */ .navbar-collapse.show .navbar-nav > li{animation:slideInRight 0.3s ease forwards;opacity:0}.navbar-collapse.show .navbar-nav > li:nth-child(1){animation-delay:0.05s}.navbar-collapse.show .navbar-nav > li:nth-child(2){animation-delay:0.1s}.navbar-collapse.show .navbar-nav > li:nth-child(3){animation-delay:0.15s}.navbar-collapse.show .navbar-nav > li:nth-child(4){animation-delay:0.2s}.navbar-collapse.show .navbar-nav > li:nth-child(5){animation-delay:0.25s}.navbar-collapse.show .navbar-nav > li:nth-child(6){animation-delay:0.3s}.navbar-collapse.show .navbar-nav > li:nth-child(7){animation-delay:0.35s}.navbar-collapse.show .navbar-nav > li:nth-child(8){animation-delay:0.4s}.navbar-collapse.show .navbar-nav > li:nth-child(9){animation-delay:0.45s}.navbar-collapse.show .navbar-nav > li:nth-child(10){animation-delay:0.5s}@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}}/* ======================================== MOBILE FOOTER OPTIMIZATION ======================================== */ @media (max-width:991px){/* Footer main container */ .footer.footer-big{padding:40px 0 30px}/* Lucy's About section */ .footer .col-md-3.text-center{margin-bottom:30px;padding-bottom:30px;border-bottom:1px solid rgba(255,255,255,0.1)}.footer .footer-sup-heading{font-size:12px;letter-spacing:2px;color:rgba(255,255,255,0.7);display:block;margin-bottom:10px}.footer .h4,.footer h2.h4{font-size:28px;margin-bottom:5px}.footer small{font-size:12px;color:rgba(255,255,255,0.6)}.footer .btn-light{margin-top:15px;padding:10px 25px;font-size:13px;border-radius:20px}/* Payment methods */ .footer .footer-payment-methods{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;margin-top:15px}.footer .footer-payment-methods > div{display:inline-block}.footer .footer-payment-methods .fa-3x{font-size:2em}.footer .footer-payment-methods p.h6{width:100%;margin-top:15px !important}/* More Info links section */ .footer .links{margin-bottom:25px}.footer .links strong{font-size:16px;margin-bottom:15px;display:block;color:#fff;letter-spacing:1px}.footer .stacked-links{padding:0;margin:0;list-style:none}.footer .stacked-links li{margin-bottom:0}.footer .stacked-links li a{display:block;padding:10px 0;font-size:14px;color:rgba(255,255,255,0.7);border-bottom:1px solid rgba(255,255,255,0.1);transition:all 0.3s ease}.footer .stacked-links li:last-child a{border-bottom:none}.footer .stacked-links li a:hover{color:#c9a050;padding-left:5px}/* Store address section */ .footer .footer-store-address{margin-bottom:25px;padding-bottom:25px;border-bottom:1px solid rgba(255,255,255,0.1)}.footer .footer-store-address strong{font-size:14px;color:#fff;letter-spacing:1px;display:block;margin-bottom:10px}.footer .footer-store-address br + br{display:none}/* Newsletter section */ #newsletter{margin-top:10px}#newsletter .card-body{padding:0}#newsletter strong{font-size:16px;margin-bottom:15px;display:block;color:#fff}#newsletter .form-control{padding:12px 15px;font-size:14px;border-radius:8px 0 0 8px !important;border:1px solid rgba(255,255,255,0.2);background:rgba(255,255,255,0.1);color:#fff}#newsletter .form-control::placeholder{color:rgba(255,255,255,0.5)}#newsletter .btn-primary{border-radius:0 8px 8px 0 !important;padding:12px 20px}/* reCAPTCHA styling */ #newsletter .g-recaptcha{margin-top:15px;transform:scale(0.9);transform-origin:left}/* Copyright */ .footer .copyright{text-align:center;padding-top:20px;font-size:13px;color:rgba(255,255,255,0.6)}.footer hr{border-color:rgba(255,255,255,0.1);margin:25px 0}}/* Small mobile specific */ @media (max-width:576px){/* Menu specific */ .navbar-collapse .navbar-nav .nav-item.dropdown > .nav-link{padding:12px 12px;font-size:14px}.navbar-collapse .navbar-nav .btn-primary,.navbar-collapse .navbar-nav .btn-warning{padding:10px 8px !important;font-size:11px}.navbar-collapse .navbar-nav .btn-primary .nc-icon,.navbar-collapse .navbar-nav .btn-warning .nc-icon{margin-right:4px;font-size:12px}/* Book an appointment - smaller screens */ .navbar-collapse .navbar-nav .btn-outline-default,.navbar-collapse .navbar-nav .btn-default,.navbar-collapse .navbar-nav > li > a.btn:not(.btn-primary):not(.btn-warning):not(.btn-link),.navbar-collapse .navbar-nav a[href*="appointment"].btn,.navbar-collapse .navbar-nav a[href*="booking"].btn{font-size:11px;padding:12px 8px !important;letter-spacing:0}/* Footer specific */ .footer.footer-big{padding:30px 0 20px}.footer .h4,.footer h2.h4{font-size:24px}.footer .footer-payment-methods .fa-3x{font-size:1.8em}.footer .links strong,#newsletter strong{font-size:14px}.footer .stacked-links li a{font-size:13px;padding:8px 0}#newsletter .g-recaptcha{transform:scale(0.85)}.footer .copyright{font-size:12px}}/* ======================================== ADDITIONAL ENHANCEMENTS ======================================== */ /* Smooth scrolling for the whole page */ @media (max-width:991px){html{scroll-behavior:smooth}/* Better tap targets */ .navbar-collapse a,.navbar-collapse button,.footer a{min-height:44px;display:flex;align-items:center}/* Prevent text selection on menu */ .navbar-collapse{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}}