/* ========================================================================== NEVERLAND HOMEMENU V5.1 — PREMIUM HOME EXPERIENCE Scope: /HomeMenu only (.nlv5-home-page) Loaded after menu-v5-premium.css. Functional behavior is intentionally untouched. ========================================================================== */ .nlv5-home-page { --nlv51-shell-max: 1500px; --nlv51-navy: #071f36; --nlv51-navy-2: #0b3458; --nlv51-gold: #d7a13a; --nlv51-gold-soft: #f1ca76; --nlv51-ivory: #fffaf0; --nlv51-surface: rgba(255, 255, 255, .94); --nlv51-line: rgba(8, 38, 66, .10); --nlv51-shadow: 0 24px 60px rgba(5, 25, 44, .13); --nlv51-shadow-soft: 0 12px 28px rgba(5, 25, 44, .08); width: 100% !important; min-height: 100vh !important; } body:has(.nlv5-home-page) { background: radial-gradient(circle at 50% 0%, rgba(215, 161, 58, .10), transparent 42rem), linear-gradient(180deg, #e9eef4 0%, #f7f8fa 42%, #eef2f6 100%) !important; } /* -------------------------------------------------------------------------- HERO — visually distinct from the old HomeMenu -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-hero { width: min(var(--nlv51-shell-max), calc(100% - 40px)) !important; margin: 18px auto 0 !important; } .nlv5-home-page .nlv2-hero-image { height: clamp(290px, 25vw, 385px) !important; min-height: 290px !important; max-height: 385px !important; border: 1px solid rgba(255, 255, 255, .16) !important; border-radius: 34px !important; background-position: center 48% !important; box-shadow: 0 30px 70px rgba(4, 18, 32, .20), 0 7px 18px rgba(4, 18, 32, .08) !important; } .nlv5-home-page .nlv2-hero-image::before { background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.10), transparent 28rem), linear-gradient( 90deg, rgba(2, 12, 22, .64) 0%, rgba(2, 12, 22, .16) 31%, rgba(2, 12, 22, .10) 67%, rgba(2, 12, 22, .60) 100% ), linear-gradient( 180deg, rgba(2, 12, 22, .10) 0%, rgba(2, 12, 22, .02) 48%, rgba(2, 12, 22, .52) 100% ) !important; } .nlv5-home-page .nlv2-hero-title { font-size: clamp(64px, 6.2vw, 112px) !important; line-height: .88 !important; letter-spacing: -.035em !important; } .nlv5-home-page .nlv2-hero-localized-subtitle { margin-top: 12px !important; font-size: clamp(22px, 2.1vw, 36px) !important; letter-spacing: .01em !important; } /* -------------------------------------------------------------------------- FLOATING CONTENT SHELL -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-shell { width: min(var(--nlv51-shell-max), calc(100% - 40px)) !important; max-width: var(--nlv51-shell-max) !important; margin: -34px auto 0 !important; padding: 0 clamp(18px, 2vw, 30px) 42px !important; border: 1px solid rgba(255,255,255,.78) !important; border-radius: 34px !important; background: linear-gradient( 180deg, rgba(255,255,255,.94) 0%, rgba(249,250,251,.97) 100% ) !important; -webkit-backdrop-filter: blur(16px) saturate(1.08) !important; backdrop-filter: blur(16px) saturate(1.08) !important; box-shadow: var(--nlv51-shadow), inset 0 1px 0 #fff !important; } /* -------------------------------------------------------------------------- LANGUAGE — stronger floating capsule -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-language-panel { width: min(720px, calc(100% - 80px)) !important; min-height: 76px !important; margin: -18px auto 26px !important; padding: 8px !important; border: 1px solid rgba(8, 38, 66, .08) !important; border-radius: 26px !important; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important; box-shadow: 0 20px 42px rgba(5,25,44,.16), 0 3px 10px rgba(5,25,44,.05), inset 0 1px 0 #fff !important; } .nlv5-home-page .nlv2-language-option { min-height: 58px !important; border-radius: 18px !important; } .nlv5-home-page .nlv2-language-option.active { background: linear-gradient( 145deg, #0d3b63 0%, #082b49 58%, #061e34 100% ) !important; box-shadow: 0 10px 20px rgba(5,28,49,.21), inset 0 1px 0 rgba(255,255,255,.10) !important; } /* -------------------------------------------------------------------------- CATEGORY GALLERY -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-category-zone { margin-top: 0 !important; padding: 4px 0 8px !important; } .nlv5-home-page .nlv2-category-slider-container.category-slider-container { padding: 5px 3px 13px !important; } .nlv5-home-page .nlv2-category-card.menu-category-card, .nlv5-home-page .nlv2-category-card.add-cart-btn4 { height: 145px !important; min-height: 145px !important; border: 1px solid rgba(215,161,58,.26) !important; border-radius: 24px !important; box-shadow: 0 15px 32px rgba(5,25,44,.13), 0 3px 8px rgba(5,25,44,.04) !important; } .nlv5-home-page .nlv2-category-card.active { border-color: rgba(241,202,118,.92) !important; box-shadow: 0 19px 38px rgba(5,25,44,.16), 0 0 0 2px rgba(215,161,58,.20) !important; } .nlv5-home-page .nlv2-category-icon.icon-part4 { width: 52px !important; height: 52px !important; border: 1px solid rgba(241,202,118,.80) !important; box-shadow: 0 9px 20px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12) !important; } .nlv5-home-page .nlv2-category-icon.icon-part4 i { font-size: 21px !important; } .nlv5-home-page .nlv2-category-name.btn-label4 { font-size: 17px !important; line-height: 1.05 !important; } /* -------------------------------------------------------------------------- HOMEMENU ACTION DOCK -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-home-actions { position: relative !important; z-index: 16 !important; display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1.02fr) minmax(190px, .42fr) !important; width: 100% !important; gap: 12px !important; margin: 12px auto 0 !important; padding: 9px !important; border: 1px solid rgba(8,38,66,.08) !important; border-radius: 25px !important; background: linear-gradient( 180deg, rgba(255,255,255,.96), rgba(246,248,250,.95) ) !important; box-shadow: 0 17px 38px rgba(5,25,44,.10), inset 0 1px 0 #fff !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart, .nlv5-home-page .nlv2-home-actions .nlv2-home-call-action, .nlv5-home-page .nlv2-home-actions .nlv2-profile-button { min-height: 62px !important; border-radius: 17px !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart { background: linear-gradient( 145deg, #0f426d, #082d4d 58%, #061f36 ) !important; box-shadow: 0 10px 22px rgba(5,28,49,.22), inset 0 1px 0 rgba(255,255,255,.10) !important; } .nlv5-home-page .nlv2-home-call-action { border: 1px solid rgba(158,103,16,.14) !important; color: #102640 !important; background: linear-gradient( 135deg, #f8d77e 0%, #ecb84e 52%, #d99c30 100% ) !important; box-shadow: 0 10px 22px rgba(169,113,24,.20), inset 0 1px 0 rgba(255,255,255,.48) !important; } .nlv5-home-page .nlv2-home-call-icon { border-right-color: rgba(8,38,66,.14) !important; color: #0d3456 !important; } .nlv5-home-page .nlv2-home-call-label { color: #102640 !important; font-weight: 850 !important; } .nlv5-home-page .nlv2-home-call-chevron { color: #0d3456 !important; } .nlv5-home-page .nlv2-profile-menu { min-width: 0 !important; } .nlv5-home-page .nlv2-profile-button { width: 100% !important; border: 1px solid rgba(8,38,66,.09) !important; background: linear-gradient(180deg, #ffffff, #f1f4f7) !important; box-shadow: 0 8px 18px rgba(5,25,44,.08), inset 0 1px 0 #fff !important; } /* -------------------------------------------------------------------------- LIVE / RESULTS / SEARCH -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-home-live-stats { margin: 13px auto 0 !important; border-color: rgba(215,161,58,.18) !important; color: #617083 !important; background: #fffaf0 !important; } .nlv5-home-page .nlv2-home-live-stats i { color: var(--nlv51-gold) !important; } .nlv5-home-page .nlv2-result-count { margin: 24px 0 8px !important; color: #17334e !important; font-size: 13px !important; font-weight: 850 !important; letter-spacing: .02em !important; } .nlv5-home-page .nlv2-search-wrap { margin-bottom: 22px !important; border: 1px solid rgba(8,38,66,.07) !important; border-radius: 20px !important; background: #fff !important; box-shadow: 0 12px 28px rgba(5,25,44,.075), inset 0 1px 0 #fff !important; } .nlv5-home-page .nlv2-search-input.form-control { min-height: 62px !important; padding-left: 54px !important; padding-right: 54px !important; border: 0 !important; border-radius: 20px !important; font-size: 16px !important; } .nlv5-home-page .nlv2-search-icon, .nlv5-home-page .nlv2-search-filter { font-size: 19px !important; } /* -------------------------------------------------------------------------- PRODUCT CARDS — more visual separation and luxury depth -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-product-grid { gap: 18px !important; } .nlv5-home-page .nlv2-product-card.card-grid, .nlv5-home-page .nlv2-product-card.blockb { border: 1px solid rgba(8,38,66,.09) !important; border-radius: 26px !important; background: linear-gradient( 180deg, #ffffff 0%, #ffffff 70%, #fffdf8 100% ) !important; box-shadow: 0 16px 36px rgba(5,25,44,.09), 0 3px 8px rgba(5,25,44,.03), inset 0 1px 0 #fff !important; } .nlv5-home-page .nlv2-product-card.card-grid::before, .nlv5-home-page .nlv2-product-card.blockb::before { height: 4px !important; opacity: .88 !important; } .nlv5-home-page .nlv2-product-media.card-left { border-radius: 19px !important; background: radial-gradient( circle at 50% 42%, #ffffff 0%, #fbfaf7 58%, #f0f2f4 100% ) !important; box-shadow: inset 0 0 0 1px rgba(8,38,66,.05), 0 5px 12px rgba(5,25,44,.035) !important; } .nlv5-home-page .nlv2-product-title.menu-item-title { color: #082945 !important; font-size: 18px !important; font-weight: 750 !important; } .nlv5-home-page .nlv2-product-description.description { color: #364354 !important; } .nlv5-home-page .nlv2-product-purchase { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid rgba(8,38,66,.075) !important; } .nlv5-home-page .nlv2-price-primary, .nlv5-home-page .nlv2-price-block strong { color: #082945 !important; font-size: 19px !important; } .nlv5-home-page .nlv2-add-cart-button.add-cart-btn { color: #102640 !important; background: linear-gradient( 145deg, #f7d373, #e8ad3e ) !important; box-shadow: 0 8px 17px rgba(169,113,24,.19), inset 0 1px 0 rgba(255,255,255,.42) !important; } .nlv5-home-page .nlv2-add-cart-button .icon-part, .nlv5-home-page .nlv2-add-cart-button .icon-part i { color: #102640 !important; } /* -------------------------------------------------------------------------- CONTACT — premium closing panel -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-home-contact { position: relative !important; overflow: hidden !important; width: min(var(--nlv51-shell-max), calc(100% - 40px)) !important; margin: 24px auto 28px !important; padding: 54px 26px 58px !important; border: 1px solid rgba(241,202,118,.20) !important; border-radius: 30px !important; background: radial-gradient(circle at 50% 0%, rgba(215,161,58,.15), transparent 28rem), linear-gradient(145deg, #0b2c4b, #061b30 62%, #041423) !important; box-shadow: 0 24px 55px rgba(4,20,36,.18) !important; } .nlv5-home-page .nlv2-home-contact::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; width: min(560px, 70%) !important; height: 2px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, var(--nlv51-gold-soft), transparent ) !important; } .nlv5-home-page .nlv2-home-contact .section-subtitle { color: var(--nlv51-gold-soft) !important; letter-spacing: .18em !important; } .nlv5-home-page .nlv2-home-contact .btn-hero-outline { border-color: rgba(241,202,118,.78) !important; border-radius: 13px !important; color: #fff8e7 !important; } /* -------------------------------------------------------------------------- DESKTOP — keep exactly 4 product columns -------------------------------------------------------------------------- */ @media (min-width: 1280px) { .nlv5-home-page .nlv2-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .nlv5-home-page .nlv2-product-card.card-grid, .nlv5-home-page .nlv2-product-card.blockb { min-height: 248px !important; padding: 14px !important; } .nlv5-home-page .nlv2-product-main { grid-template-columns: 112px minmax(0, 1fr) !important; gap: 12px !important; } .nlv5-home-page .nlv2-product-media.card-left { width: 112px !important; min-width: 112px !important; height: 112px !important; min-height: 112px !important; } .nlv5-home-page .nlv2-product-image.menu-image { width: 108px !important; min-width: 108px !important; max-width: 108px !important; height: 108px !important; min-height: 108px !important; max-height: 108px !important; object-fit: contain !important; } } @media (min-width: 1600px) { .nlv5-home-page .nlv2-product-main { grid-template-columns: 132px minmax(0, 1fr) !important; gap: 14px !important; } .nlv5-home-page .nlv2-product-media.card-left { width: 132px !important; min-width: 132px !important; height: 132px !important; min-height: 132px !important; } .nlv5-home-page .nlv2-product-image.menu-image { width: 126px !important; min-width: 126px !important; max-width: 126px !important; height: 126px !important; min-height: 126px !important; max-height: 126px !important; } } /* -------------------------------------------------------------------------- TABLET -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1279.98px) { .nlv5-home-page .nlv2-hero { width: calc(100% - 24px) !important; } .nlv5-home-page .nlv2-shell { width: calc(100% - 24px) !important; } .nlv5-home-page .nlv2-home-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 76px !important; } .nlv5-home-page .nlv2-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .nlv5-home-page .nlv2-home-contact { width: calc(100% - 24px) !important; } } /* -------------------------------------------------------------------------- MOBILE — obvious visual change, still compact and touch-first -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { body:has(.nlv5-home-page) { background: linear-gradient( 180deg, #e8edf3 0%, #f4f6f8 42%, #e9eef3 100% ) !important; } .nlv5-home-page .nlv2-hero { width: 100% !important; margin: 0 !important; } .nlv5-home-page .nlv2-hero-image { height: clamp(220px, 51vw, 270px) !important; min-height: 220px !important; max-height: 270px !important; border: 0 !important; border-radius: 0 0 27px 27px !important; } .nlv5-home-page .nlv2-hero-title { font-size: clamp(46px, 12vw, 68px) !important; } .nlv5-home-page .nlv2-hero-localized-subtitle { font-size: clamp(18px, 5.2vw, 26px) !important; } .nlv5-home-page .nlv2-shell { width: calc(100% - 12px) !important; margin: -18px auto 0 !important; padding: 0 7px 20px !important; border-radius: 24px !important; box-shadow: 0 18px 42px rgba(5,25,44,.10), inset 0 1px 0 #fff !important; } .nlv5-home-page .nlv2-language-panel { width: calc(100% - 18px) !important; min-height: 62px !important; margin: -12px auto 20px !important; padding: 6px !important; border-radius: 20px !important; } .nlv5-home-page .nlv2-language-option { min-height: 48px !important; border-radius: 15px !important; } .nlv5-home-page .nlv2-category-card.menu-category-card, .nlv5-home-page .nlv2-category-card.add-cart-btn4 { height: 136px !important; min-height: 136px !important; border-radius: 20px !important; } .nlv5-home-page .nlv2-category-icon.icon-part4 { width: 47px !important; height: 47px !important; } .nlv5-home-page .nlv2-category-name.btn-label4 { font-size: 16px !important; } .nlv5-home-page .nlv2-home-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 58px !important; gap: 7px !important; margin-top: 8px !important; padding: 6px !important; border-radius: 20px !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart, .nlv5-home-page .nlv2-home-actions .nlv2-home-call-action, .nlv5-home-page .nlv2-home-actions .nlv2-profile-button { min-height: 60px !important; border-radius: 15px !important; } .nlv5-home-page .nlv2-home-call-label { font-size: 12px !important; line-height: 1.08 !important; } .nlv5-home-page .nlv2-home-live-stats { margin-top: 10px !important; } .nlv5-home-page .nlv2-result-count { width: calc(100% - 10px) !important; margin: 18px auto 7px !important; } .nlv5-home-page .nlv2-search-wrap { width: calc(100% - 10px) !important; margin: 0 auto 13px !important; border-radius: 17px !important; } .nlv5-home-page .nlv2-search-input.form-control { min-height: 56px !important; border-radius: 17px !important; font-size: 15px !important; } .nlv5-home-page .nlv2-menu-items { width: calc(100% - 10px) !important; margin: 0 auto !important; } .nlv5-home-page .nlv2-product-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 12px !important; } .nlv5-home-page .nlv2-product-card.card-grid, .nlv5-home-page .nlv2-product-card.blockb { min-height: 0 !important; padding: 12px !important; border-radius: 22px !important; box-shadow: 0 12px 27px rgba(5,25,44,.08), 0 2px 6px rgba(5,25,44,.025) !important; } .nlv5-home-page .nlv2-product-main { grid-template-columns: clamp(96px, 28vw, 116px) minmax(0, 1fr) !important; gap: 11px !important; } .nlv5-home-page .nlv2-product-media.card-left { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 1 !important; border-radius: 17px !important; } .nlv5-home-page .nlv2-product-image.menu-image { width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; object-fit: contain !important; } .nlv5-home-page .nlv2-product-title.menu-item-title { font-size: 17px !important; line-height: 1.08 !important; } .nlv5-home-page .nlv2-product-description.description { font-size: 11.7px !important; line-height: 1.32 !important; } .nlv5-home-page .nlv2-product-purchase { margin-top: 9px !important; padding-top: 9px !important; } .nlv5-home-page .nlv2-home-contact { width: calc(100% - 12px) !important; margin: 14px auto 16px !important; padding: 40px 18px 44px !important; border-radius: 24px !important; } } @media (max-width: 390px) { .nlv5-home-page .nlv2-home-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px !important; gap: 5px !important; padding: 5px !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-label { font-size: 13px !important; } .nlv5-home-page .nlv2-home-call-label { font-size: 11px !important; } .nlv5-home-page .nlv2-product-main { grid-template-columns: 90px minmax(0, 1fr) !important; gap: 9px !important; } .nlv5-home-page .nlv2-product-title.menu-item-title { font-size: 16px !important; } } /* -------------------------------------------------------------------------- FINE POINTER POLISH -------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .nlv5-home-page .nlv2-home-actions .nlv2-action-cart:hover, .nlv5-home-page .nlv2-home-call-action:hover, .nlv5-home-page .nlv2-profile-button:hover { transform: translateY(-2px) !important; } .nlv5-home-page .nlv2-product-card.card-grid:hover, .nlv5-home-page .nlv2-product-card.blockb:hover { transform: translateY(-5px) !important; border-color: rgba(215,161,58,.26) !important; box-shadow: 0 23px 48px rgba(5,25,44,.13), 0 4px 12px rgba(5,25,44,.04), inset 0 1px 0 #fff !important; } } /* Keep search filtering authoritative. */ html body .nlv5-home-page .nlv2-menu-items .nlv2-menu-item.menu-item[hidden] { display: none !important; } /* NEVERLAND PREMIUM HEADER NAVIGATION V1 START */ /* Premium polish for HomeMenu discovery/navigation only. Preserved contracts: - category markup and click/drag behavior - cart/call/profile actions and Bootstrap dropdown behavior - live online counter - search/filter JavaScript - product cards / popup / WebP / content-visibility - desktop 4-column product grid */ /* -------------------------------------------------------------------------- CATEGORY RAIL — tighter, clearer, more premium -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-category-zone { position: relative !important; margin-top: 2px !important; padding: 3px 0 5px !important; } .nlv5-home-page .nlv2-category-slider-container.category-slider-container { padding: 4px 4px 10px !important; scrollbar-width: thin !important; scrollbar-color: rgba(216,157,49,.45) transparent !important; } .nlv5-home-page .nlv2-category-slider-container.category-slider-container::-webkit-scrollbar { height: 6px !important; } .nlv5-home-page .nlv2-category-slider-container.category-slider-container::-webkit-scrollbar-track { background: transparent !important; } .nlv5-home-page .nlv2-category-slider-container.category-slider-container::-webkit-scrollbar-thumb { border-radius: 999px !important; background: linear-gradient( 90deg, rgba(216,157,49,.38), rgba(241,205,124,.82), rgba(216,157,49,.38) ) !important; } .nlv5-home-page .nlv2-category-card.menu-category-card, .nlv5-home-page .nlv2-category-card.add-cart-btn4 { height: 132px !important; min-height: 132px !important; border: 1px solid rgba(8,38,66,.09) !important; border-radius: 22px !important; box-shadow: 0 11px 24px rgba(5,25,44,.105), 0 2px 6px rgba(5,25,44,.03), inset 0 1px 0 rgba(255,255,255,.10) !important; transition: transform 150ms ease, border-color 150ms ease !important; } .nlv5-home-page .nlv2-category-card.menu-category-card::after, .nlv5-home-page .nlv2-category-card.add-cart-btn4::after { background: linear-gradient( 180deg, rgba(3,22,39,.03) 10%, rgba(3,22,39,.18) 52%, rgba(3,22,39,.82) 100% ) !important; } .nlv5-home-page .nlv2-category-card.active { border-color: rgba(236,184,78,.92) !important; box-shadow: 0 14px 30px rgba(5,25,44,.14), 0 0 0 2px rgba(216,157,49,.18), inset 0 1px 0 rgba(255,255,255,.16) !important; } .nlv5-home-page .nlv2-category-card.active::before { opacity: 1 !important; } .nlv5-home-page .nlv2-category-icon.icon-part4 { width: 48px !important; height: 48px !important; border: 1px solid rgba(241,205,124,.80) !important; background: linear-gradient( 145deg, rgba(8,45,77,.98), rgba(5,31,54,.98) ) !important; box-shadow: 0 7px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12) !important; } .nlv5-home-page .nlv2-category-icon.icon-part4 i { font-size: 19px !important; } .nlv5-home-page .nlv2-category-name.btn-label4 { font-size: 16px !important; line-height: 1.04 !important; letter-spacing: -.012em !important; text-shadow: 0 2px 8px rgba(0,0,0,.38) !important; } /* -------------------------------------------------------------------------- ACTION DOCK — same premium visual language as Product Card V2.1 -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-home-actions { gap: 10px !important; margin: 9px auto 0 !important; padding: 7px !important; border: 1px solid rgba(8,38,66,.07) !important; border-radius: 22px !important; background: linear-gradient( 180deg, rgba(255,255,255,.975), rgba(246,248,250,.965) ) !important; box-shadow: 0 14px 30px rgba(5,25,44,.085), inset 0 1px 0 #fff !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart, .nlv5-home-page .nlv2-home-actions .nlv2-home-call-action, .nlv5-home-page .nlv2-home-actions .nlv2-profile-button { min-height: 58px !important; border-radius: 15px !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart { border: 1px solid rgba(255,255,255,.09) !important; background: linear-gradient( 145deg, #10466f 0%, #082f50 58%, #061f36 100% ) !important; box-shadow: 0 8px 18px rgba(5,28,49,.20), inset 0 1px 0 rgba(255,255,255,.10) !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart .nlv2-action-icon { color: #f0bd53 !important; } .nlv5-home-page .nlv2-cart-badge { border: 2px solid #0a3659 !important; color: #092d4d !important; background: linear-gradient( 180deg, #f8d878, #eab64d ) !important; box-shadow: 0 3px 8px rgba(5,25,44,.16) !important; } .nlv5-home-page .nlv2-home-call-action { border-color: rgba(158,103,16,.12) !important; background: linear-gradient( 135deg, #f8d77e 0%, #efbd55 50%, #dfa235 100% ) !important; box-shadow: 0 8px 18px rgba(169,113,24,.17), inset 0 1px 0 rgba(255,255,255,.50) !important; } .nlv5-home-page .nlv2-profile-button { border-color: rgba(8,38,66,.075) !important; background: linear-gradient( 180deg, #ffffff, #f3f6f8 ) !important; box-shadow: 0 6px 14px rgba(5,25,44,.065), inset 0 1px 0 #fff !important; } /* -------------------------------------------------------------------------- ONLINE CHIP — less vertical weight -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-home-live-stats { min-height: 34px !important; margin: 10px auto 0 !important; padding: 5px 11px !important; border: 1px solid rgba(216,157,49,.18) !important; border-radius: 999px !important; color: #5a6777 !important; background: linear-gradient( 180deg, #fffdf8, #fff8e9 ) !important; box-shadow: 0 5px 12px rgba(5,25,44,.04), inset 0 1px 0 #fff !important; } .nlv5-home-page .nlv2-home-live-stats span { gap: 5px !important; } .nlv5-home-page .nlv2-home-live-stats b { color: #183650 !important; font-weight: 900 !important; } /* -------------------------------------------------------------------------- DISCOVERY — result count + search as one visual system -------------------------------------------------------------------------- */ .nlv5-home-page .nlv2-result-count { width: fit-content !important; max-width: 100% !important; margin: 18px 0 7px !important; padding: 5px 10px !important; border: 1px solid rgba(8,38,66,.055) !important; border-radius: 999px !important; color: #173650 !important; background: linear-gradient( 180deg, #ffffff, #f7f9fa ) !important; box-shadow: 0 4px 10px rgba(5,25,44,.035), inset 0 1px 0 #fff !important; font-size: 12.5px !important; font-weight: 850 !important; letter-spacing: .018em !important; } .nlv5-home-page .nlv2-search-wrap { position: relative !important; overflow: hidden !important; margin-bottom: 18px !important; border: 1px solid rgba(8,38,66,.075) !important; border-radius: 18px !important; background: linear-gradient( 180deg, #ffffff, #fbfcfd ) !important; box-shadow: 0 9px 22px rgba(5,25,44,.065), inset 0 1px 0 #fff !important; transition: border-color 150ms ease, box-shadow 150ms ease !important; } .nlv5-home-page .nlv2-search-wrap:focus-within { border-color: rgba(216,157,49,.46) !important; box-shadow: 0 10px 24px rgba(5,25,44,.075), 0 0 0 3px rgba(216,157,49,.10), inset 0 1px 0 #fff !important; } .nlv5-home-page .nlv2-search-input.form-control { min-height: 58px !important; padding-left: 52px !important; padding-right: 54px !important; border-radius: 18px !important; color: #132f49 !important; background: transparent !important; font-size: 15.5px !important; font-weight: 600 !important; } .nlv5-home-page .nlv2-search-input.form-control::placeholder { color: #929ca7 !important; opacity: 1 !important; font-weight: 650 !important; } .nlv5-home-page .nlv2-search-icon { color: #0b416c !important; font-size: 20px !important; } .nlv5-home-page .nlv2-search-filter { display: inline-flex !important; width: 38px !important; height: 38px !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(216,157,49,.14) !important; border-radius: 12px !important; color: #c88920 !important; background: linear-gradient( 180deg, #fffdf8, #fff8e8 ) !important; } /* -------------------------------------------------------------------------- TABLET -------------------------------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1279.98px) { .nlv5-home-page .nlv2-category-card.menu-category-card, .nlv5-home-page .nlv2-category-card.add-cart-btn4 { height: 126px !important; min-height: 126px !important; } .nlv5-home-page .nlv2-home-actions { gap: 8px !important; padding: 6px !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart, .nlv5-home-page .nlv2-home-actions .nlv2-home-call-action, .nlv5-home-page .nlv2-home-actions .nlv2-profile-button { min-height: 56px !important; } .nlv5-home-page .nlv2-result-count { margin-top: 16px !important; } } /* -------------------------------------------------------------------------- MOBILE — tighter vertical rhythm, same functionality -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .nlv5-home-page .nlv2-category-zone { padding-bottom: 2px !important; } .nlv5-home-page .nlv2-category-slider-container.category-slider-container { padding: 3px 3px 8px !important; } .nlv5-home-page .nlv2-category-card.menu-category-card, .nlv5-home-page .nlv2-category-card.add-cart-btn4 { height: 118px !important; min-height: 118px !important; border-radius: 19px !important; } .nlv5-home-page .nlv2-category-icon.icon-part4 { width: 44px !important; height: 44px !important; } .nlv5-home-page .nlv2-category-icon.icon-part4 i { font-size: 18px !important; } .nlv5-home-page .nlv2-category-name.btn-label4 { font-size: 15px !important; } .nlv5-home-page .nlv2-home-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px !important; gap: 6px !important; margin-top: 6px !important; padding: 5px !important; border-radius: 18px !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart, .nlv5-home-page .nlv2-home-actions .nlv2-home-call-action, .nlv5-home-page .nlv2-home-actions .nlv2-profile-button { min-height: 56px !important; border-radius: 14px !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-label { font-size: 13px !important; } .nlv5-home-page .nlv2-home-call-label { font-size: 11.5px !important; line-height: 1.06 !important; } .nlv5-home-page .nlv2-home-live-stats { min-height: 32px !important; margin-top: 8px !important; padding: 4px 10px !important; } .nlv5-home-page .nlv2-result-count { width: fit-content !important; max-width: calc(100% - 10px) !important; margin: 14px 5px 7px !important; padding: 4px 8px !important; font-size: 12px !important; } .nlv5-home-page .nlv2-search-wrap { width: calc(100% - 10px) !important; margin: 0 auto 12px !important; border-radius: 16px !important; } .nlv5-home-page .nlv2-search-input.form-control { min-height: 54px !important; padding-left: 49px !important; padding-right: 52px !important; border-radius: 16px !important; font-size: 15px !important; } .nlv5-home-page .nlv2-search-filter { width: 36px !important; height: 36px !important; border-radius: 11px !important; } } @media (max-width: 390px) { .nlv5-home-page .nlv2-category-card.menu-category-card, .nlv5-home-page .nlv2-category-card.add-cart-btn4 { height: 112px !important; min-height: 112px !important; } .nlv5-home-page .nlv2-home-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px !important; gap: 5px !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-label { font-size: 12.5px !important; } .nlv5-home-page .nlv2-home-call-label { font-size: 10.8px !important; } } /* -------------------------------------------------------------------------- FINE POINTER -------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .nlv5-home-page .nlv2-category-card.menu-category-card:hover, .nlv5-home-page .nlv2-category-card.add-cart-btn4:hover { transform: translateY(-2px) !important; border-color: rgba(216,157,49,.38) !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart:hover, .nlv5-home-page .nlv2-home-call-action:hover, .nlv5-home-page .nlv2-profile-button:hover { transform: translateY(-1px) !important; } } /* NEVERLAND PREMIUM HEADER NAVIGATION V1 END */ /* NEVERLAND MOBILE COMPACT HEADER V1 START */ /* Mobile-only vertical compaction for HomeMenu. Goals: - expose the first product card earlier on initial view - preserve premium hero/language/category/action styling - preserve all category/action/search behavior - leave tablet/desktop and Product Card V2.1 untouched */ @media (max-width: 767.98px) { /* HERO: preserve branding, reduce vertical occupation by ~20%. */ .nlv5-home-page .nlv2-hero-image { height: clamp(180px, 43vw, 220px) !important; min-height: 180px !important; max-height: 220px !important; border-radius: 0 0 24px 24px !important; background-position: center 47% !important; } .nlv5-home-page .nlv2-hero-title { font-size: clamp(40px, 10.8vw, 58px) !important; line-height: .90 !important; } .nlv5-home-page .nlv2-hero-localized-subtitle { margin-top: 7px !important; font-size: clamp(16px, 4.5vw, 22px) !important; } /* Shell overlap remains premium but consumes less vertical space. */ .nlv5-home-page .nlv2-shell { margin-top: -14px !important; padding-bottom: 16px !important; border-radius: 22px !important; } /* LANGUAGE: same 4 options, smaller capsule and active state. */ .nlv5-home-page .nlv2-language-panel { width: calc(100% - 18px) !important; min-height: 54px !important; margin: -10px auto 12px !important; padding: 5px !important; border-radius: 18px !important; box-shadow: 0 13px 28px rgba(5,25,44,.12), 0 2px 7px rgba(5,25,44,.04), inset 0 1px 0 #fff !important; } .nlv5-home-page .nlv2-language-option { min-height: 44px !important; border-radius: 13px !important; } /* CATEGORY RAIL: keep imagery prominent while cutting empty height. */ .nlv5-home-page .nlv2-category-zone { margin-top: 0 !important; padding: 1px 0 0 !important; } .nlv5-home-page .nlv2-category-slider-container.category-slider-container { padding: 2px 3px 6px !important; } .nlv5-home-page .nlv2-category-card.menu-category-card, .nlv5-home-page .nlv2-category-card.add-cart-btn4 { height: 104px !important; min-height: 104px !important; border-radius: 18px !important; } .nlv5-home-page .nlv2-category-icon.icon-part4 { width: 40px !important; height: 40px !important; } .nlv5-home-page .nlv2-category-icon.icon-part4 i { font-size: 17px !important; } .nlv5-home-page .nlv2-category-name.btn-label4 { font-size: 14px !important; line-height: 1.02 !important; } /* ACTION DOCK: identical actions, reduced chrome and height. */ .nlv5-home-page .nlv2-home-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 52px !important; gap: 5px !important; margin-top: 4px !important; padding: 4px !important; border-radius: 16px !important; box-shadow: 0 10px 24px rgba(5,25,44,.075), inset 0 1px 0 #fff !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart, .nlv5-home-page .nlv2-home-actions .nlv2-home-call-action, .nlv5-home-page .nlv2-home-actions .nlv2-profile-button { min-height: 52px !important; border-radius: 12px !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-label { font-size: 12.5px !important; } .nlv5-home-page .nlv2-home-call-label { font-size: 10.8px !important; line-height: 1.03 !important; } /* ONLINE + DISCOVERY: compact vertical rhythm. */ .nlv5-home-page .nlv2-home-live-stats { min-height: 28px !important; margin-top: 6px !important; padding: 3px 9px !important; } .nlv5-home-page .nlv2-result-count { margin: 10px 5px 5px !important; padding: 3px 8px !important; font-size: 11.5px !important; } .nlv5-home-page .nlv2-search-wrap { margin-bottom: 9px !important; border-radius: 15px !important; } .nlv5-home-page .nlv2-search-input.form-control { min-height: 50px !important; padding-left: 46px !important; padding-right: 48px !important; border-radius: 15px !important; font-size: 14.5px !important; } .nlv5-home-page .nlv2-search-icon { font-size: 19px !important; } .nlv5-home-page .nlv2-search-filter { width: 34px !important; height: 34px !important; border-radius: 10px !important; } } @media (max-width: 390px) { .nlv5-home-page .nlv2-hero-image { height: clamp(172px, 44vw, 202px) !important; min-height: 172px !important; max-height: 202px !important; } .nlv5-home-page .nlv2-language-panel { min-height: 52px !important; margin-bottom: 10px !important; } .nlv5-home-page .nlv2-language-option { min-height: 42px !important; } .nlv5-home-page .nlv2-category-card.menu-category-card, .nlv5-home-page .nlv2-category-card.add-cart-btn4 { height: 100px !important; min-height: 100px !important; } .nlv5-home-page .nlv2-home-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 48px !important; } .nlv5-home-page .nlv2-home-actions .nlv2-action-cart, .nlv5-home-page .nlv2-home-actions .nlv2-home-call-action, .nlv5-home-page .nlv2-home-actions .nlv2-profile-button { min-height: 50px !important; } } /* NEVERLAND MOBILE COMPACT HEADER V1 END */ /* NEVERLAND QR CONTACT PANEL V1 START */ /* QR menu (/auth/{table} -> Menu/Index) receives the same visual closing contact panel as HomeMenu without changing QR token/session behavior. */ .nlv5-page .nlv2-qr-contact { position: relative !important; overflow: hidden !important; width: min(1500px, calc(100% - 40px)) !important; margin: 24px auto 28px !important; padding: 54px 26px 58px !important; border: 1px solid rgba(241,202,118,.20) !important; border-radius: 30px !important; color: #fff !important; background: radial-gradient( circle at 50% 0%, rgba(215,161,58,.15), transparent 28rem ), linear-gradient( 145deg, #0b2c4b, #061b30 62%, #041423 ) !important; box-shadow: 0 24px 55px rgba(4,20,36,.18) !important; } .nlv5-page .nlv2-qr-contact::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; width: min(560px, 70%) !important; height: 2px !important; transform: translateX(-50%) !important; background: linear-gradient( 90deg, transparent, #f1ca76, transparent ) !important; } .nlv5-page .nlv2-qr-contact .section-subtitle { margin-bottom: 0 !important; color: #f1ca76 !important; font-weight: 500 !important; letter-spacing: .18em !important; } .nlv5-page .nlv2-qr-contact .section-title { color: #fff !important; } .nlv5-page .nlv2-qr-contact p { color: rgba(255,255,255,.94) !important; } .nlv5-page .nlv2-qr-contact a:not(.btn) { color: #f1ca76 !important; } .nlv5-page .nlv2-qr-contact .btn-hero-outline { border: 1px solid rgba(241,202,118,.78) !important; border-radius: 13px !important; color: #fff8e7 !important; background: rgba(5,25,44,.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important; } @media (max-width: 767.98px) { .nlv5-page .nlv2-qr-contact { width: calc(100% - 24px) !important; margin: 18px auto 20px !important; padding: 34px 18px 38px !important; border-radius: 24px !important; } .nlv5-page .nlv2-qr-contact .section-title { font-size: 22px !important; } .nlv5-page .nlv2-qr-contact p { font-size: 14px !important; line-height: 1.45 !important; } .nlv5-page .nlv2-qr-contact .btn-hero-outline { min-height: 48px !important; padding: 10px 16px !important; } } /* NEVERLAND QR CONTACT PANEL V1 END */