/* ============================================================================ LSNM storefront design system (ported from the LSNM Web_Consumer prototype) Fonts: Bricolage Grotesque (display) + Figtree (body). Everything is scoped under .lsnm on to avoid colliding with Metronic. ========================================================================== */ :root{ --lsnm-navy:#161d31; --lsnm-navy-2:#1a2138; --lsnm-shell:#10162b; --lsnm-panel:#1b2740; --lsnm-orange:#ff5a2c; --lsnm-orange-hover:#ec4d22; --lsnm-orange-soft:#fff0eb; --lsnm-green:#1f9d57; --lsnm-green-soft:#e6f8ef; --lsnm-mint:#5fcf92; --lsnm-amber:#f5a623; --lsnm-amber-text:#c8761f; --lsnm-amber-soft:#fff5e6; --lsnm-blue:#2563c9; --lsnm-blue-soft:#eef3fc; --lsnm-red:#d4452e; --lsnm-red-soft:#fdecea; --lsnm-purple:#7c4dd1; --lsnm-purple-soft:#f3eefc; --lsnm-page:#f5f7fb; --lsnm-card:#fff; --lsnm-subtle:#f7f9fc; --lsnm-subtle-2:#f4f6fa; --lsnm-border:#eaeef5; --lsnm-border-2:#e4e9f1; --lsnm-border-3:#eef1f7; --lsnm-text:#161d31; --lsnm-text-2:#46506a; --lsnm-text-3:#5a6379; --lsnm-muted:#8a93a8; --lsnm-muted-2:#9aa3b8; --lsnm-display:'Bricolage Grotesque',system-ui,sans-serif; --lsnm-body:'Figtree',system-ui,sans-serif; } /* ---- reset (scoped) ---- */ .lsnm,.lsnm *{box-sizing:border-box} body.lsnm{margin:0;padding:0;font-family:var(--lsnm-body);background:var(--lsnm-page);color:var(--lsnm-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} .lsnm a{color:inherit;text-decoration:none} .lsnm button{font-family:inherit;cursor:pointer;border:none;background:none} .lsnm input,.lsnm select,.lsnm textarea{font-family:inherit;outline:none} .lsnm input::placeholder,.lsnm textarea::placeholder{color:var(--lsnm-muted-2)} .lsnm ::selection{background:var(--lsnm-orange);color:#fff} .lsnm h1,.lsnm h2,.lsnm h3{margin:0} .lsnm-display{font-family:var(--lsnm-display)} /* ---- scrollbar ---- */ .lsnm-sc::-webkit-scrollbar{width:11px;height:11px} .lsnm-sc::-webkit-scrollbar-thumb{background:#d5dbe7;border-radius:9px;border:3px solid var(--lsnm-page)} .lsnm-sc::-webkit-scrollbar-thumb:hover{background:#c2cad9} /* ---- animations ---- */ @keyframes lsnmUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes lsnmFade{from{opacity:0}to{opacity:1}} @keyframes lsnmDrop{0%{opacity:0;transform:translate(-50%,-130%)}60%{transform:translate(-50%,-92%)}100%{opacity:1;transform:translate(-50%,-100%)}} @keyframes lsnmPulse{0%{transform:scale(1);opacity:.55}70%{transform:scale(2.6);opacity:0}100%{opacity:0}} @keyframes lsnmSpin{to{transform:rotate(360deg)}} .lsnm-anim-up{animation:lsnmUp .2s ease} /* ---- layout helpers ---- */ .lsnm-wrap{max-width:1300px;margin:0 auto;padding:0 30px} .lsnm-section{padding:54px 30px 8px;max-width:none;margin:0} .lsnm-section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap} .lsnm-h2{font-family:var(--lsnm-display);font-weight:700;font-size:30px;letter-spacing:-.5px;color:var(--lsnm-text)} .lsnm-sub{margin:6px 0 0;color:#6b748a;font-size:15.5px} /* Scoped under .lsnm (0,2,0) so its colour beats the `.lsnm a{color:inherit}` reset (0,1,1). Without the extra .lsnm the "See all / Browse all" links fell back to whatever colour they inherited — a dropped base colour that reads as invisible on any light surface. Explicit :hover gives the affordance too. */ .lsnm a.lsnm-link,.lsnm .lsnm-link{font-weight:700;font-size:14.5px;color:var(--lsnm-navy-2);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:color .15s} .lsnm a.lsnm-link:hover,.lsnm .lsnm-link:hover{color:var(--lsnm-orange)} .lsnm-grid-8{display:grid;grid-template-columns:repeat(8,1fr);gap:14px} .lsnm-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .lsnm-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .lsnm-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} /* ---- nav ---- */ .lsnm-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:blur(14px);border-bottom:1px solid #e9edf4} .lsnm-header-in{margin:0;padding:14px 30px;display:flex;align-items:center;gap:34px} .lsnm-logo{height:32px;cursor:pointer} .lsnm-nav{display:flex;gap:30px;font-weight:600;font-size:15px;color:var(--lsnm-text-3)} .lsnm-nav a{cursor:pointer} .lsnm-nav a:hover,.lsnm-nav a.active{color:var(--lsnm-text)} .lsnm-navbtns{margin-left:auto;display:flex;align-items:center;gap:14px} .lsnm .lsnm-iconbtn{position:relative;width:40px;height:40px;border-radius:11px;border:none;background:var(--lsnm-subtle-2);color:var(--lsnm-text-2);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .lsnm .lsnm-iconbtn:hover{background:var(--lsnm-border)} .lsnm .lsnm-iconbtn.is-active{background:var(--lsnm-navy);color:#fff} .lsnm .lsnm-iconbtn--dark{background:var(--lsnm-navy);color:#fff} .lsnm .lsnm-iconbtn--dark:hover{background:#23304f} .lsnm-badge{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px;border-radius:100px;background:var(--lsnm-orange);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;border:2px solid #fff} .lsnm-dot{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--lsnm-orange);border:2px solid #fff} /* ---- buttons ---- Scoped under .lsnm so component backgrounds beat the `.lsnm button` reset (border:none;background:none). Without the extra .lsnm the reset's higher specificity (0,1,1 > 0,1,0) stripped button backgrounds while keeping white text → invisible-until-hover CTAs (incl. the age-gate YES button). */ .lsnm .lsnm-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:13px 22px;border-radius:12px;border:none;background:transparent;transition:background .15s,transform .15s;cursor:pointer} .lsnm .lsnm-btn--primary{background:var(--lsnm-orange);color:#fff} .lsnm .lsnm-btn--primary:hover{background:var(--lsnm-orange-hover)} .lsnm .lsnm-btn--dark{background:var(--lsnm-navy);color:#fff} .lsnm .lsnm-btn--dark:hover{background:#23304f} .lsnm .lsnm-btn--ghost{background:#fff;border:1px solid var(--lsnm-border-2);color:var(--lsnm-text-2)} .lsnm .lsnm-btn--ghost:hover{background:var(--lsnm-subtle)} .lsnm .lsnm-btn--soft{background:var(--lsnm-subtle-2);color:var(--lsnm-text-2)} .lsnm .lsnm-btn--soft:hover{background:var(--lsnm-border)} .lsnm .lsnm-btn--block{width:100%} .lsnm .lsnm-btn[disabled]{opacity:.5;cursor:not-allowed} .lsnm .lsnm-cmp-btn{cursor:pointer;transition:background .15s,border-color .15s,color .15s} .lsnm .lsnm-cmp-btn.is-on{background:var(--lsnm-navy);border-color:var(--lsnm-navy);color:#fff} /* ---- pagination (storefront paginator: resources/views/vendor/pagination/lsnm.blade.php) ---- */ .lsnm-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;list-style:none;margin:26px 0 6px;padding:0} .lsnm .lsnm-pager-btn{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 12px;border-radius:11px;background:#fff;border:1px solid var(--lsnm-border-2);color:var(--lsnm-text-2);font-weight:700;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .lsnm .lsnm-pager-btn:hover{background:var(--lsnm-subtle);border-color:var(--lsnm-muted-2)} .lsnm .lsnm-pager-btn.is-active{background:var(--lsnm-navy);border-color:var(--lsnm-navy);color:#fff} .lsnm .lsnm-pager-btn.is-disabled{opacity:.4;cursor:not-allowed;pointer-events:none} .lsnm-pager-gap{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:38px;color:var(--lsnm-muted-2);font-weight:700} /* ---- chips / pills ---- */ .lsnm-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:100px;border:1px solid var(--lsnm-border-2);background:#fff;color:var(--lsnm-text-2);cursor:pointer} .lsnm-chip.is-on{background:var(--lsnm-navy);color:#fff;border-color:var(--lsnm-navy)} .lsnm-pill{font-size:12px;font-weight:700;padding:5px 10px;border-radius:8px;display:inline-flex;align-items:center;gap:5px} .lsnm-pill--open{background:var(--lsnm-green-soft);color:var(--lsnm-green)} .lsnm-pill--closed{background:var(--lsnm-red-soft);color:var(--lsnm-red)} .lsnm-pill--muted{background:#f1f4f9;color:var(--lsnm-text-3)} .lsnm-stock-in{background:var(--lsnm-green-soft);color:var(--lsnm-green)} .lsnm-stock-out{background:var(--lsnm-red-soft);color:var(--lsnm-red)} /* ---- cards ---- */ .lsnm-card{background:var(--lsnm-card);border:1px solid var(--lsnm-border);border-radius:18px;transition:transform .15s,box-shadow .15s} .lsnm-card--hover:hover{transform:translateY(-3px);box-shadow:0 18px 34px -18px rgba(20,28,55,.3)} .lsnm-card-pad{padding:20px} /* ---- store logo monogram ---- */ .lsnm-logo-mono{display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex:0 0 auto} /* ---- bottle glyph (decorative) ---- */ .lsnm-bottle{position:relative} .lsnm-bottle .cap{position:absolute;left:50%;top:0;transform:translateX(-50%);border-radius:5px} .lsnm-bottle .body{position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-radius:12px 12px 14px 14px} .lsnm-bottle .label{position:absolute;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.78)} /* ---- hero ---- */ .lsnm-hero{position:relative;overflow:hidden;background:radial-gradient(120% 120% at 18% -10%,#2a3354 0%,#1a2138 42%,#10162b 100%)} .lsnm-hero .blob{position:absolute;border-radius:50%;filter:blur(150px)} .lsnm-hero .grid-tex{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:26px 26px;opacity:.6} .lsnm-hero-in{max-width:900px;margin:0 auto;padding:78px 28px 104px;text-align:center;position:relative;z-index:3} .lsnm-hero h1{font-family:var(--lsnm-display);font-weight:700;font-size:62px;line-height:1.03;letter-spacing:-1.5px;color:#fff} .lsnm-searchbar{display:flex;align-items:stretch;background:#fff;border-radius:16px;padding:7px;box-shadow:0 30px 70px -28px rgba(0,0,0,.55)} .lsnm-searchbar input{width:100%;font-size:16px;font-weight:500;color:var(--lsnm-text);padding:13px 0;background:transparent;border:none} /* ---- autosuggest ---- */ .lsnm-suggest{position:absolute;left:0;right:0;top:calc(100% + 10px);background:#fff;border-radius:15px;box-shadow:0 26px 60px -22px rgba(20,28,55,.42);overflow:hidden;z-index:30;animation:lsnmUp .16s ease;text-align:left} .lsnm-suggest-row{display:flex;align-items:center;gap:13px;padding:11px 18px;cursor:pointer} .lsnm-suggest-row:hover{background:#f4f7fc} /* ---- header search bar ---- */ .lsnm-navsearch{position:relative;flex:1 1 200px;min-width:0;max-width:460px;display:flex;align-items:center;gap:10px;height:42px;background:var(--lsnm-subtle-2);border:1px solid var(--lsnm-border-2);border-radius:12px;padding:0 14px} .lsnm-navsearch:focus-within{background:#fff;border-color:var(--lsnm-muted-2);box-shadow:0 6px 16px -8px rgba(20,28,55,.28)} .lsnm-navsearch input{flex:1;min-width:0;border:none;background:transparent;font-family:inherit;font-size:14.5px;font-weight:500;color:var(--lsnm-text)} @media(max-width:560px){ .lsnm-header-in{flex-wrap:wrap} .lsnm-navsearch{order:5;flex-basis:100%;max-width:none} } /* ---- modals / overlays ---- */ .lsnm-overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px} .lsnm-overlay-bg{position:absolute;inset:0;background:rgba(16,22,43,.5);backdrop-filter:blur(2px);animation:lsnmFade .2s ease} .lsnm-modal{position:relative;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);animation:lsnmUp .22s ease;width:430px;max-width:100%} /* Scoped (0,2,0) so the pill background survives the `.lsnm button` reset. */ .lsnm .lsnm-modal-x{width:34px;height:34px;border-radius:9px;background:var(--lsnm-subtle-2);color:var(--lsnm-text-2);font-size:18px;flex:0 0 auto} .lsnm .lsnm-modal-x:hover{background:var(--lsnm-border)} .lsnm-field{display:block} .lsnm-field>span{font-weight:600;font-size:12.5px;color:var(--lsnm-text-2);display:block;margin-bottom:6px} .lsnm-input{width:100%;background:var(--lsnm-subtle-2);border:1px solid var(--lsnm-border-2);border-radius:11px;padding:12px 14px;font-size:14.5px;color:var(--lsnm-text)} .lsnm-input:focus{border-color:var(--lsnm-navy);background:#fff} /* ---- drawer (right) ---- */ .lsnm-drawer-scrim{position:fixed;inset:0;z-index:95} .lsnm-drawer-bg{position:absolute;inset:0;background:rgba(16,22,43,.45);animation:lsnmFade .2s ease} .lsnm-drawer{position:absolute;right:0;top:0;height:100%;width:448px;max-width:94vw;background:var(--lsnm-page);display:flex;flex-direction:column;box-shadow:-24px 0 60px -24px rgba(0,0,0,.45);animation:lsnmUp .24s ease} /* ---- toggle switch ---- */ .lsnm-switch{width:40px;height:23px;border-radius:100px;position:relative;flex:0 0 auto;transition:background .15s;background:#d5dbe7} .lsnm-switch.is-on{background:var(--lsnm-green)} .lsnm-switch>span{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .lsnm-switch.is-on>span{left:20px} /* ---- toast ---- */ .lsnm-toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);z-index:120;background:var(--lsnm-navy);color:#fff;font-weight:600;font-size:14px;padding:13px 20px;border-radius:12px;box-shadow:0 16px 40px -10px rgba(0,0,0,.5);animation:lsnmUp .2s ease;display:flex;align-items:center;gap:10px} .lsnm-toast .dot{width:8px;height:8px;border-radius:50%;background:var(--lsnm-mint);flex:0 0 auto} /* ---- spinner ---- */ .lsnm-spin{width:20px;height:20px;border:2.5px solid rgba(0,0,0,.12);border-top-color:var(--lsnm-navy);border-radius:50%;animation:lsnmSpin .8s linear infinite} /* ---- footer ---- */ .lsnm-footer{background:var(--lsnm-shell);color:#fff;padding:54px 30px 28px} .lsnm-footer-grid{margin:0;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} .lsnm-footer a{color:#8b93ab;font-size:13.5px;cursor:pointer} .lsnm-footer a:hover{color:#fff} /* ---- split (search list/map) ---- */ .lsnm-split{display:flex;flex:1;min-height:0} .lsnm-left{width:54%;display:flex;flex-direction:column;min-height:0} .lsnm-right{width:46%;position:relative} .lsnm-mobtoggle{display:none} /* ---- responsive ---- */ @media(max-width:1100px){.lsnm-grid-8{grid-template-columns:repeat(4,1fr)}} @media(max-width:980px){ .lsnm-ctrls-wrap{flex-wrap:wrap} .lsnm-grid-4{grid-template-columns:repeat(2,1fr)} .lsnm-footer-grid{grid-template-columns:1fr 1fr} .lsnm-hero h1{font-size:46px} } @media(max-width:840px){ .lsnm-split{flex-direction:column} .lsnm-left,.lsnm-right{width:100%} .lsnm-split.mob-list .lsnm-right{display:none} .lsnm-split.mob-map .lsnm-left{display:none} .lsnm-split.mob-map .lsnm-right{height:calc(100vh - 188px)} .lsnm-mobtoggle{display:flex} .lsnm-hidemob{display:none!important} .lsnm-nav{display:none} .lsnm-section{padding:36px 18px 6px} } @media(max-width:560px){ .lsnm-grid-8,.lsnm-grid-3,.lsnm-grid-2{grid-template-columns:repeat(2,1fr)} .lsnm-grid-4{grid-template-columns:repeat(2,1fr)} .lsnm-hero h1{font-size:36px} .lsnm-header-in{padding:12px 16px;gap:16px} }