/* ============================================================ APP USER MODE - Modern Theme Styles ============================================================ This file contains ALL styles for in-app webview usage. Applied when: IsAppUser=true querystring adds .appuser class to Purpose: Streamline the shopping experience for existing customers viewing the site through the iOS/Android app's browser window. Principles: - Remove branding (app has its own) - Remove navigation redundancy (app handles nav) - Remove marketing/promotional content (user is already a customer) - Emphasize: Search, Cart, Wishlist, Product browsing - Optimize for touch and quick purchasing ============================================================ */ /* =========================================== HEADER - HIDE ELEMENTS =========================================== */ /* Hide logo - app has its own branding */ .appuser .abs-brand { display: none !important; } /* Hide login/account wrapper - app handles authentication */ .appuser .abs-login-wrapper { display: none !important; } /* Hide browse dropdown link - app has native category navigation */ .appuser #browse-link { display: none !important; } /* Allow mega menu to open when hamburger is clicked */ .appuser .abs-megamenu-wrapper.active { display: flex !important; } /* Show overlay when menu is open */ .appuser .abs-megamenu-overlay.visible { display: block !important; } /* Hide Ask Scout button in header - app users navigate differently */ .appuser .abs-ai-button-wrap { display: none !important; } /* =========================================== MENU - HIDE APP-IRRELEVANT ITEMS =========================================== */ /* Hide My Library link - app handles library access */ .appuser .abs-account-links li:has(a[href="/my-library"]), .appuser .abs-nav-links li:has(a[href="/my-library"]) { display: none !important; } /* Hide Logout link - app handles authentication */ .appuser .abs-account-links li:has(a[href="/logout"]), .appuser .abs-nav-links li:has(a[href="/logout"]) { display: none !important; } /* Hide FAQs link */ .appuser .abs-nav-links li:has(a[href="/faq"]) { display: none !important; } /* Hide Contact Us link */ .appuser .abs-nav-links li:has(a[href="/contactus"]) { display: none !important; } /* Hide social section in menu */ .appuser .abs-social-section { display: none !important; } /* =========================================== ASK SCOUT MENU BUTTON - APP USER ONLY =========================================== */ /* Show Ask Scout in menu for app users */ .appuser .abs-menu-ask-scout { display: block !important; border-bottom: none !important; } /* Ask Scout menu item container - full tappable area */ .appuser .abs-menu-ask-scout a { position: relative !important; display: flex !important; align-items: flex-start !important; gap: 0px !important; padding: 10px 10px 10px 5px !important; background: linear-gradient(135deg, rgba(140, 154, 0, 0.15) 0%, rgba(140, 154, 0, 0.05) 100%) !important; border: 1px solid rgba(140, 154, 0, 0.4) !important; border-radius: 10px !important; margin: 8px 0 4px !important; color: #f5f1d1 !important; text-decoration: none !important; transition: all 0.2s ease !important; width: 100% !important; box-sizing: border-box !important; } .appuser .abs-menu-ask-scout a:hover { background: linear-gradient(135deg, rgba(140, 154, 0, 0.25) 0%, rgba(140, 154, 0, 0.1) 100%) !important; border-color: rgba(140, 154, 0, 0.6) !important; } /* Scout icon */ .appuser .ask-scout-icon { display: block !important; width: 60px !important; height: 60px !important; background-image: url('/images/scout-listening.webp') !important; background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; flex-shrink: 0 !important; } /* New badge - positioned at top right corner of button */ .appuser .ask-scout-badge { position: absolute !important; top: -13px !important; right: -7px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: #c75000 !important; color: #fff !important; font-size: 9px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; padding: 3px 8px !important; border-radius: 10px !important; white-space: nowrap !important; box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; } /* Text container */ .appuser .ask-scout-text { display: flex !important; flex-direction: column !important; gap: 4px !important; flex: 1 !important; min-width: 0 !important; } /* Title */ .appuser .ask-scout-title { font-weight: 600 !important; font-size: 15px !important; color: #f5f1d1 !important; line-height: 1.3 !important; } /* Description */ .appuser .ask-scout-desc { font-weight: 400 !important; font-size: 12px !important; color: #aaa !important; line-height: 1.4 !important; } /* =========================================== ABOUT SCOUT LINK - APP USER ONLY =========================================== */ /* Show About Scout link for app users */ .appuser .abs-menu-about-scout { display: block !important; text-align: center !important; } .appuser .abs-menu-about-scout a { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 6px 0 12px 0 !important; color: var(--btn-yellow-bg, #d4a017) !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; transition: all 0.2s ease !important; border-bottom: none !important; } .appuser .abs-menu-about-scout a:hover { color: #f5c842 !important; } .appuser .abs-menu-about-scout a i { font-size: 11px !important; transition: transform 0.2s ease !important; } .appuser .abs-menu-about-scout a:hover i { transform: translateX(3px) !important; } /* =========================================== HEADER - MODIFY FOR APP EXPERIENCE Single-row layout: Hamburger | Search | Cart =========================================== */ /* Fixed header at top of screen */ .appuser #main-header { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 1000 !important; padding: 8px 0 !important; min-height: 50px !important; height: auto !important; } /* Add padding to body to account for fixed header */ .appuser { padding-top: 50px !important; } /* Header container - flex layout for single row */ .appuser .abs-header-container.abs-topbar { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; padding: 0 12px !important; } /* Show hamburger menu and position on the left */ .appuser .abs-mobile-hamburger { display: flex !important; order: -1 !important; flex-shrink: 0 !important; width: 44px !important; height: 44px !important; } /* Search bar - narrower to accommodate hamburger and cart */ /* Override Scout page rules that hide header search (Scout has its own input) */ /* In app mode, we ALWAYS want the header search visible for quick access */ .appuser .abs-header-search, .appuser.scout.scout-page .abs-header-search, .appuser.scout-conversations-page .abs-header-search { display: flex !important; flex: 1 !important; max-width: 100% !important; margin: 0 !important; order: 0 !important; min-width: 0 !important; } .appuser .abs-search-input-wrap { max-width: 100% !important; flex: 1 !important; } /* Header actions - position cart on the right */ .appuser .abs-header-actions { order: 1 !important; flex-shrink: 0 !important; margin-left: 0 !important; } /* Ensure cart remains visible and accessible */ .appuser .abs-cart-icon { display: flex !important; } /* Reduce header inner padding */ .appuser #main-header .abs-header-inner { padding-top: 8px; padding-bottom: 8px; } /* =========================================== FOOTER - ALWAYS HIDE IN APP =========================================== */ .appuser #main-footer { display: none !important; } .appuser .footer-top2, .appuser .container-fluid.footer-top2 { display: none !important; } /* Hide social navigation icons */ .appuser .social-nav-icons { display: none !important; } /* =========================================== HOME PAGE - HIDE MARKETING SECTIONS =========================================== */ /* Hide hero section - users don't need to be sold */ .appuser.home-page .home-hero { display: none !important; } /* Hide FlexPass benefits section - they already know about membership */ .appuser.home-page .home-benefits { display: none !important; } /* Keep product sliders, but remove top padding since hero is gone */ .appuser.home-page #content-holder { padding-top: 20px; } /* =========================================== GLOBAL - HIDE NON-SHOPPING ELEMENTS =========================================== */ /* Hide back-to-top button - app may handle scrolling differently */ .appuser .back-to-top { display: none !important; } /* Hide any newsletter signup prompts */ .appuser .newsletter-signup, .appuser .email-signup-banner { display: none !important; } /* Hide cookie consent if app handles this */ .appuser .cookie-consent, .appuser #cookie-banner { display: none !important; } /* Hide promotional banners that aren't product-related */ .appuser .promo-banner, .appuser .marketing-banner { display: none !important; } /* =========================================== PRODUCT PAGES - OPTIMIZE FOR PURCHASING =========================================== */ /* Keep Ask Scout CTA visible - helps with discovery */ /* .appuser .ask-scout-cta { } */ /* Ensure buttons have better touch targets */ .appuser .yellow-btn, .appuser .transparent-btn, .appuser .addToCartClick { min-height: 48px; /* Better touch target */ display: inline-flex; align-items: center; justify-content: center; } /* =========================================== CATEGORY/SEARCH PAGES - STREAMLINE BROWSING =========================================== */ /* Heading bars - full width on mobile */ .appuser .heading-bar, .appuser .heading-bar h1, .appuser .heading-bar h2, .appuser .category-header-main { width: 100%; } /* =========================================== CART & CHECKOUT - KEEP FUNCTIONAL =========================================== */ /* Cart page - keep fully functional */ /* Checkout - keep fully functional */ /* Hide print gift certificate option (not relevant for app) */ .appuser .gc-delivery-row.print-gc { display: none !important; } /* =========================================== SCOUT PAGES - KEEP FULLY FUNCTIONAL =========================================== */ /* Scout is valuable for discovery - keep it intact */ /* Just ensure it works well in webview context */ /* =========================================== RESPONSIVE ADJUSTMENTS =========================================== */ /* Mobile-first: Most app users will be on mobile */ @media (max-width: 767px) { /* Maximize content area */ .appuser .container, .appuser .container-fluid { padding-left: 12px; padding-right: 12px; } /* Compact header for mobile */ .appuser #main-header { padding: 6px 0 !important; min-height: 46px !important; } /* Single-row layout: Hamburger | Search | Cart */ .appuser .abs-header-container.abs-topbar { gap: 8px !important; padding: 0 10px !important; } /* Search bar - flexible width between hamburger and cart */ .appuser .abs-header-search { order: 0 !important; flex: 1 !important; width: auto !important; margin: 0 !important; } /* Hamburger - left side */ .appuser .abs-mobile-hamburger { order: -1 !important; width: 40px !important; height: 40px !important; } /* Cart icon - right side, ensure good touch target */ .appuser .abs-cart-icon { min-width: 44px; min-height: 44px; } /* Header actions stay on right */ .appuser .abs-header-actions { order: 1 !important; } } /* Tablet and up */ @media (min-width: 768px) { /* Search bar with reasonable max-width */ .appuser .abs-header-search { max-width: 600px !important; } } /* =========================================== LEGACY ELEMENT HIDING (For pages that may still use old classes) =========================================== */ /* Legacy navigation elements */ .appuser .top-nav2, .appuser .nav-howworks, .appuser .nav-gift, .appuser .nav-home, .appuser .nav-faq, .appuser .nav-faq2, .appuser .nav-enterprise, .appuser .nav-contact, .appuser .nav-login, .appuser .nav-blog, .appuser .nav-bestsellers, .appuser .main-navbar-container .nav-gift, .appuser .main-navbar .nav-bestsellers { display: none !important; } /* Legacy header elements - hide only non-essential parts */ .appuser .headerspace, .appuser .headernavspace, .appuser .top-nav-bar.topnavbartest, .appuser .navbar-logo, .appuser #main-header .span4 { display: none !important; } /* Ensure header is visible (override any legacy rules) */ .appuser #main-header, .appuser #main-header.statichdr, .appuser #main-header.originalhdr { display: block !important; } /* Legacy homepage elements */ .appuser .home-header.hero, .appuser .home-subheader.headline-flexpass { display: none !important; } /* =========================================== WISHLIST - ENSURE ACCESSIBILITY =========================================== */ /* Wishlist link should always be accessible for app users (legacy) */ .appuser .nav-wishlist { display: block !important; }