/* Listof.Best — site shell (header, mega-menu, drawer, footer, hero). Uses --lb-* tokens. */ /* Phantom horizontal-scroll guard scoped to CONTENT wrappers (not ), so the sticky header's containing block is untouched. clip != scroll container. */ #brx-content,.lb-main{overflow-x:clip} /* ---------- header bar (floating liquid-glass pill, content-width) ---------- */ /* Bricks wraps [listof_header] in

(a direct child). THAT must be sticky -- a sticky .lb-hdr inside it can't move (its box is header-tall). */ #brx-header{position:sticky;top:0;z-index:1000} body.admin-bar #brx-header{top:32px} @media (max-width:782px){body.admin-bar #brx-header{top:46px}} .lb-hdr{position:relative;background:transparent;padding:0.8rem clamp(1.2rem,2.4vw,2rem) 0} .lb-hdr__inner{display:flex;align-items:center;gap:var(--lb-m,1.6rem);max-width:1280px;margin:0 auto; padding:0.72rem clamp(1.6rem,2.4vw,2.4rem);border-radius:18px; background:linear-gradient(180deg,color-mix(in srgb,#fff 82%,transparent),color-mix(in srgb,#fff 92%,transparent)); -webkit-backdrop-filter:saturate(1.9) blur(24px);backdrop-filter:saturate(1.9) blur(24px); box-shadow:0 10px 34px rgba(11,26,42,.16),0 2px 8px rgba(11,26,42,.08),inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(11,26,42,.04)} .lb-brand{display:inline-flex;align-items:center;gap:0.72rem;font-weight:800;font-size:1.68rem;color:var(--lb-ink,#1E2A38);text-decoration:none;letter-spacing:-.01em;flex:0 0 auto} .lb-brand svg{width:20px;height:20px;color:var(--lb-primary,#FF6A2B)} .lb-hdr__nav{flex:1 1 auto;min-width:0} .lb-hdr__right{display:flex;align-items:center;gap:0.96rem;flex:0 0 auto;margin-left:auto} .lb-hdr__search .lb-searchpill{min-width:200px} .lb-acct{font-size:1.36rem;font-weight:600;color:var(--lb-ink);text-decoration:none;padding:0.8rem 1.44rem;border-radius:8px;white-space:nowrap} .lb-acct--in{background:var(--lb-primary,#FF6A2B);color:#fff} .lb-acct--in:hover{background:var(--lb-primary-600,#E85A1E)} .lb-burger{display:none;background:none;border:0;cursor:pointer;color:var(--lb-ink);padding:0.48rem} .lb-burger svg{width:24px;height:24px} /* ---------- desktop mega-menu ---------- */ .lb-mega__top{list-style:none;display:flex;gap:0.32rem;margin:0;padding:0;flex-wrap:wrap} .lb-mega__item{position:relative} .lb-mega__a{display:inline-flex;align-items:center;gap:0.32rem;padding:0.8rem 1.12rem;border-radius:8px;font-size:1.44rem;font-weight:550;color:var(--lb-ink);text-decoration:none;white-space:nowrap} .lb-mega__a svg{width:14px;height:14px;color:var(--lb-light,#8A93A0);transition:transform .15s} .lb-mega__a:hover{background:var(--lb-surface-2,#F7F8FA);color:var(--lb-primary-600,#E85A1E)} .lb-mega__panel{position:absolute;top:calc(100% + 6px);left:0;min-width:440px;max-width:92vw;background:#fff;border:1px solid var(--lb-border);border-radius:14px; box-shadow:0 16px 44px rgba(11,26,42,.16);padding:1.28rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.14s;z-index:1001} .lb-mega__item:hover .lb-mega__panel,.lb-mega__item:focus-within .lb-mega__panel{opacity:1;visibility:visible;transform:none} .lb-mega__item:hover .lb-mega__a svg{transform:rotate(180deg)} .lb-mega__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.24rem} .lb-mega__sub{padding:0.72rem 0.96rem;border-radius:8px;font-size:1.376rem;color:var(--lb-ink);text-decoration:none} .lb-mega__sub:hover{background:var(--lb-surface-2);color:var(--lb-primary-600)} .lb-mega__all{grid-column:1/-1;margin-top:0.48rem;padding:0.72rem 0.96rem;font-size:1.312rem;font-weight:600;color:var(--lb-primary-600);text-decoration:none;border-top:1px solid var(--lb-border)} /* ---------- top-level verticals nav (AI Tools / Hosting / Courses) ---------- */ .lb-nav__top{list-style:none;display:flex;gap:0.16rem;margin:0;padding:0;align-items:center} .lb-nav__item{position:relative} .lb-nav__btn{display:inline-flex;align-items:center;gap:0.4rem;padding:0.8rem 1.28rem;border-radius:8px;font:inherit;font-size:1.472rem;font-weight:600;color:var(--lb-ink);text-decoration:none;white-space:nowrap;background:none;border:0;cursor:pointer} .lb-nav__btn svg{width:14px;height:14px;color:var(--lb-light,#8A93A0);transition:transform .15s} .lb-nav__btn:hover{background:var(--lb-surface-2,#F7F8FA);color:var(--lb-primary-600,#E85A1E)} .lb-nav__item:hover .lb-nav__btn svg,.lb-nav__item:focus-within .lb-nav__btn svg{transform:rotate(180deg);color:var(--lb-primary-600)} .lb-nav__panel{position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--lb-border);border-radius:14px; box-shadow:0 18px 48px rgba(11,26,42,.16);padding:1.28rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s,transform .14s,visibility .14s;z-index:1001;min-width:300px} .lb-nav__panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .lb-nav__item:hover .lb-nav__panel,.lb-nav__item:focus-within .lb-nav__panel,.lb-nav__item.is-open .lb-nav__panel{opacity:1;visibility:visible;transform:none} /* wide mega-panel for AI Tools — anchored under the bar, generous, never off-edge */ .lb-nav__panel--mega{width:min(860px,calc(100vw - 4rem))} .lb-nav__mega-hd{display:flex;justify-content:space-between;align-items:baseline;gap:1.6rem;padding:0 0.64rem 0.96rem;margin-bottom:0.64rem;border-bottom:1px solid var(--lb-border);font-size:1.184rem;text-transform:uppercase;letter-spacing:.04em;color:var(--lb-light)} .lb-nav__mega-hd a{color:var(--lb-primary-600);text-decoration:none;font-weight:700;text-transform:none;letter-spacing:0} .lb-nav__mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0.32rem 1.12rem} .lb-nav__mega-col{display:flex;flex-direction:column} .lb-nav__mega-cat{display:flex;align-items:center;gap:0.48rem;padding:0.56rem 0.64rem;border-radius:8px;font-size:1.408rem;font-weight:700;color:var(--lb-ink);text-decoration:none} .lb-nav__mega-cat:hover{background:var(--lb-surface-2);color:var(--lb-primary-600)} .lb-nav__mega-c{font-family:var(--lb-mono);font-size:1.04rem;color:var(--lb-light);font-weight:500} .lb-nav__mega-sub{padding:0.4rem 0.64rem;border-left:2px solid transparent;border-radius:0 6px 6px 0;font-size:1.296rem;color:var(--lb-ink);opacity:.78;text-decoration:none;transition:.1s} .lb-nav__mega-sub:hover{background:var(--lb-surface-2);border-left-color:var(--lb-primary);color:var(--lb-primary-600);opacity:1} .lb-nav__soon{max-width:320px} .lb-nav__soon-badge{display:inline-block;font-size:1.04rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--lb-primary-600);background:color-mix(in srgb,var(--lb-primary) 12%,#fff);border:1px solid color-mix(in srgb,var(--lb-primary) 28%,var(--lb-border));border-radius:999px;padding:0.24rem 0.8rem;margin-bottom:0.72rem} .lb-nav__soon strong{display:block;font-size:1.52rem;color:var(--lb-ink);margin-bottom:0.32rem} .lb-nav__soon p{margin:0;font-size:1.312rem;line-height:1.5;color:var(--lb-muted)} .lb-acc__soon{color:var(--lb-light);cursor:default} .lb-acc__soon em{font-style:normal;font-size:1.12rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--lb-primary-600);margin-left:0.48rem} /* ---------- mobile drawer ---------- */ .lb-drawer{position:fixed;inset:0;z-index:2000} .lb-drawer[hidden]{display:none} .lb-drawer__bg{position:absolute;inset:0;background:rgba(15,23,35,.45)} .lb-drawer__panel{position:absolute;top:0;left:0;height:100%;width:min(360px,86vw);background:#fff;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.25);animation:lb-slide .18s ease} @keyframes lb-slide{from{transform:translateX(-100%)}to{transform:none}} .lb-drawer__hd{display:flex;align-items:center;justify-content:space-between;padding:1.6rem;border-bottom:1px solid var(--lb-border)} .lb-drawer__x{background:none;border:0;cursor:pointer;color:var(--lb-ink)}.lb-drawer__x svg{width:24px;height:24px} .lb-drawer__body{flex:1;overflow:auto;padding:0.8rem} .lb-drawer__ft{padding:1.6rem;border-top:1px solid var(--lb-border)} .lb-acc{list-style:none;margin:0;padding:0} .lb-acc__btn,.lb-acc__link{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;cursor:pointer; padding:1.28rem 1.12rem;font:inherit;font-size:1.52rem;font-weight:600;color:var(--lb-ink);text-decoration:none;text-align:left;border-radius:8px} .lb-acc__btn svg{width:16px;height:16px;transition:transform .15s} .lb-acc__btn[aria-expanded="true"] svg{transform:rotate(180deg)} .lb-acc__panel{display:none;flex-direction:column;padding:0 1.12rem 0.8rem} .lb-acc__panel.is-open{display:flex} .lb-acc__panel a{padding:0.8rem 0.96rem;color:var(--lb-muted);text-decoration:none;font-size:1.44rem;border-radius:6px} .lb-acc__panel a:hover{background:var(--lb-surface-2);color:var(--lb-primary-600)} /* ---------- footer ---------- */ .lb-ft{background:var(--lb-ink,#1E2A38);color:#cdd5df;padding:clamp(3.2rem,5vw,5.6rem) clamp(1.6rem,4vw,4.8rem) 2.4rem} .lb-ft__top{display:flex;flex-wrap:wrap;gap:2.4rem 3.2rem;max-width:1280px;margin:0 auto} .lb-ft__brand{flex:1 1 280px;min-width:240px} .lb-ft__col{flex:1 1 150px;min-width:130px} .lb-ft__brand .lb-brand{color:#fff}.lb-ft__brand .lb-brand svg{color:var(--lb-primary)} .lb-ft__brand p{margin:0.96rem 0 0;font-size:1.36rem;line-height:1.5;color:#9aa6b3;max-width:32ch} .lb-ft__col h3{font-size:1.312rem;margin:0 0 0.96rem;text-transform:uppercase;letter-spacing:.05em} .lb-ft__col h3 a{color:#fff;text-decoration:none} .lb-ft__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.56rem} .lb-ft__col a{color:#9aa6b3;text-decoration:none;font-size:1.36rem} .lb-ft__col a:hover{color:#fff} .lb-ft__bot{display:flex;flex-wrap:wrap;gap:0.8rem 1.6rem;justify-content:space-between;max-width:1280px;margin:3.2rem auto 0;padding-top:1.92rem;border-top:1px solid rgba(255,255,255,.1);font-size:1.28rem;color:#8a96a3} .lb-ft__bot a{color:#9aa6b3;text-decoration:none}.lb-ft__bot a:hover{color:#fff} /* ---------- hero + homepage ---------- */ .lb-hero{text-align:center;padding:clamp(4rem,7vw,8rem) 1.6rem} .lb-hero__h1{font-size:clamp(3.2rem,2.08rem+3.4vw,5.44rem);line-height:1.05;margin:0 auto;max-width:16ch;font-weight:820;letter-spacing:-.02em;color:var(--lb-ink);text-wrap:balance} .lb-hero__sub{font-size:clamp(1.6rem,1.52rem+.4vw,1.92rem);color:var(--lb-muted);max-width:52ch;margin:1.6rem auto 2.56rem;line-height:1.5} .lb-hero__search{max-width:560px;margin:0 auto} .lb-hero__search .lb-searchpill{width:100%;min-width:0;padding:1.36rem 1.76rem;font-size:1.6rem} .lb-home-sec{max-width:1280px;margin:0 auto;padding:clamp(2.4rem,4vw,4.8rem) clamp(1.6rem,3vw,3.2rem)} .lb-home-sec__hd{display:flex;align-items:baseline;justify-content:space-between;gap:1.6rem} .lb-home-h2{font-size:clamp(2.08rem,1.76rem+1vw,2.88rem);font-weight:750;color:var(--lb-ink);margin:0 0 var(--lb-m)} .lb-seeall{font-size:1.408rem;font-weight:600;color:var(--lb-primary-600);text-decoration:none;white-space:nowrap} .lb-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.12rem} .lb-catcard{display:flex;align-items:center;justify-content:space-between;gap:0.8rem;padding:1.44rem 1.6rem;background:#fff;border:1px solid var(--lb-border);border-radius:12px;text-decoration:none;color:var(--lb-ink);font-weight:600;font-size:1.52rem;transition:.12s} .lb-catcard:hover{border-color:color-mix(in srgb,var(--lb-primary) 40%,var(--lb-border));transform:translateY(-2px);box-shadow:var(--lb-shadow)} .lb-catcard__c{font-family:var(--lb-mono);font-size:1.248rem;color:var(--lb-light);font-weight:500} /* ---------- interactive breadcrumb bar (under header) ---------- */ /* Not sticky: breadcrumb bar sits at the top of the page in normal flow (scrolls away with content). */ .lb-bcbar{position:static;background:transparent} .lb-bcbar__inner{max-width:1280px;margin:0 auto;padding:0.4rem clamp(1.6rem,3vw,3.2rem) 0} /* Mobile: breadcrumb sticks just under the (sticky) header for quick lateral nav. */ @media (max-width:900px){ .lb-bcbar{position:sticky;top:calc(var(--lb-hdr-h,60px) - 1px);z-index:850; background:color-mix(in srgb,var(--lb-surface,#fff) 82%,transparent); -webkit-backdrop-filter:saturate(1.6) blur(12px);backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--lb-border)} .lb-bcbar__inner{padding-top:0.32rem;padding-bottom:0.32rem} } .lb-cr{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:0.16rem;margin:0;padding:0.72rem 0;font-size:1.312rem} .lb-cr__item{display:inline-flex;align-items:center;gap:0.16rem} .lb-cr__node{position:relative;display:inline-flex;align-items:center;border-radius:7px} .lb-cr__node:hover{background:var(--lb-surface-2)} .lb-cr__a{display:inline-flex;align-items:center;padding:0.4rem 0.56rem;color:var(--lb-muted);text-decoration:none;border-radius:7px;white-space:nowrap;font-weight:550} .lb-cr__a:hover{color:var(--lb-primary-600)} .lb-cr__a--cur{color:var(--lb-ink);font-weight:700} .lb-cr__sep{display:inline-flex;color:var(--lb-light)} .lb-cr__sep .lb-cr__chev{width:13px;height:13px;transform:rotate(-90deg)} .lb-cr__toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;color:var(--lb-light);padding:0.32rem 0.4rem 0.32rem 0;border-radius:7px} .lb-cr__toggle .lb-cr__chev{width:14px;height:14px;transition:transform .15s} .lb-cr__item.has-dd:hover .lb-cr__toggle .lb-cr__chev,.lb-cr__item.has-dd:focus-within .lb-cr__toggle .lb-cr__chev{transform:rotate(180deg);color:var(--lb-primary-600)} .lb-cr__dd{position:absolute;top:calc(100% + 8px);left:0;min-width:220px;max-width:min(360px,86vw);max-height:60vh;overflow:auto; background:#fff;border:1px solid var(--lb-border);border-radius:12px;box-shadow:0 16px 44px rgba(11,26,42,.16); padding:0.56rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .14s,transform .14s,visibility .14s;z-index:901} .lb-cr__dd::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} .lb-cr__item.has-dd:hover .lb-cr__dd,.lb-cr__item.has-dd:focus-within .lb-cr__dd,.lb-cr__item.has-dd.is-open .lb-cr__dd{opacity:1;visibility:visible;transform:none} .lb-cr__dd-hd{font-size:1.04rem;text-transform:uppercase;letter-spacing:.05em;color:var(--lb-light);font-weight:700;padding:0.4rem 0.72rem 0.56rem} .lb-cr__dd-a{display:block;padding:0.56rem 0.72rem;border-radius:7px;font-size:1.312rem;color:var(--lb-ink);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lb-cr__dd-a:hover{background:var(--lb-surface-2);color:var(--lb-primary-600)} .lb-cr__dd-a.is-active{color:var(--lb-primary-600);font-weight:700} .lb-bcbar .lb-cr__a--cur{max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media (max-width:600px){ .lb-cr{font-size:1.232rem} /* wraps (flex-wrap from base) so dropdowns aren't clipped */ .lb-cr__a{padding:0.4rem 0.4rem} .lb-cr__item:last-child .lb-cr__dd,.lb-cr__item:nth-last-child(2) .lb-cr__dd{left:auto;right:0} .lb-bcbar .lb-cr__a--cur{max-width:18ch} } /* ---------- responsive ---------- */ @media (max-width:900px){ .lb-hdr__nav{display:none} .lb-hdr__search{display:none} .lb-burger{display:inline-flex} .lb-brand{margin-right:auto} } @media (min-width:901px){ .lb-drawer{display:none!important} } /* ---------- enriched homepage (collections, just-added, top-by-category, about) ---------- */ #brxe-lbhome{padding:0!important} .lb-hero__count{margin:1.2rem 0 0;font-family:var(--lb-mono,monospace);font-size:1.28rem;color:var(--lb-light);letter-spacing:.02em} .lb-collgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:1.28rem} .lb-coll{display:flex;flex-direction:column;gap:0.32rem;padding:1.44rem 1.6rem;background:var(--lb-surface,#fff);border:1px solid var(--lb-border);border-radius:var(--lb-radius,12px);text-decoration:none;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease} .lb-coll:hover{transform:translateY(-2px);box-shadow:var(--lb-shadow);border-color:color-mix(in srgb,var(--lb-primary) 35%,var(--lb-border))} .lb-coll__t{font-weight:700;font-size:1.6rem;color:var(--lb-ink)} .lb-coll__d{font-size:1.28rem;color:var(--lb-muted);line-height:1.4} .lb-coll__c{margin-top:0.4rem;font-family:var(--lb-mono,monospace);font-size:1.184rem;color:var(--lb-light)} .lb-bycat{margin-top:clamp(2rem,3vw,3.2rem)} .lb-bycat:first-of-type{margin-top:0} .lb-bycat__h{font-size:1.92rem;font-weight:700;color:var(--lb-ink);margin:0} .lb-about{max-width:860px} .lb-about__p{font-size:1.52rem;line-height:1.65;color:var(--lb-muted);margin:0 0 1.28rem} .lb-about__p strong{color:var(--lb-ink)}