/* FS-Portal Modern 1.6.19 — BALANCED HOME category/brand discovery. * One cohesive stylesheet (replaces accumulated 1.5.x/1.6.x overrides). * Images come from the latest published mod with a cover, using --hbc-card-image. */ .fsp-home-bottom-catalog-v157 { --hbc-accent:var(--fsp-user-main,var(--fsp-accent,#65a8ee)); --hbc-text:#f3f5f6; --hbc-muted:#aeb7b9; width:min(1580px,calc(100% - 44px)); margin:48px auto 42px;position:relative;clear:both;color:var(--hbc-text); } .fsp-home-bottom-catalog-v157 * {box-sizing:border-box} .fsp-hbc-grid-v157 { display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); align-items:start;gap:26px;min-width:0; } .fsp-hbc-categories-v157,.fsp-hbc-brands-v157 {display:flex;flex-direction:column;min-width:0} .fsp-hbc-head-v157 { display:flex;align-items:center;justify-content:space-between; min-height:64px;gap:20px;margin:0 0 19px; } .fsp-hbc-heading-v157 {display:flex;align-items:flex-start;gap:14px;min-width:0} .fsp-hbc-accent-v157 {display:block;flex:0 0 4px;width:4px;height:31px;margin-top:1px;border-radius:9px;background:var(--hbc-accent)} .fsp-hbc-heading-v157 h2 {margin:0!important;font-size:clamp(24px,2.05vw,32px)!important;line-height:1.09!important;letter-spacing:-.035em!important;font-weight:850!important;color:#f3f5f6!important} .fsp-hbc-heading-v157 p {margin:6px 0 0!important;font-size:12px!important;line-height:1.35!important;color:var(--hbc-muted)!important} .fsp-hbc-actions-v157 {display:flex;gap:10px;align-items:center;flex:none} .fsp-hbc-all-v157 { display:inline-flex;justify-content:center;align-items:center;gap:9px; padding:0 16px;min-height:40px;max-width:100%;border-radius:999px; background:var(--hbc-accent);border:1px solid transparent; color:#0f1921!important;text-decoration:none!important; font-size:12px;font-weight:800;line-height:1.1;white-space:nowrap; box-shadow:0 8px 18px color-mix(in srgb,var(--hbc-accent),transparent 85%); transition:filter .2s ease,transform .2s ease; } .fsp-hbc-all-v157:hover {color:#0f1921!important;filter:brightness(1.1);transform:translateY(-1px)} .fsp-hbc-all-v157 span {font-size:18px;line-height:0} .fsp-hbc-cat-grid-v157 {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-content:start} .fsp-hbc-cat-grid-v157[hidden] {display:none!important} .fsp-hbc-cat-card-v157 { position:relative;isolation:isolate;display:flex;align-items:flex-start; justify-content:space-between;min-width:0;min-height:198px;overflow:hidden; padding:23px 22px;border:0;border-radius:18px; background-color:#192126; background-image: linear-gradient(100deg,rgba(12,18,22,.91) 0%,rgba(12,18,22,.64) 52%,rgba(12,18,22,.22) 100%), var(--hbc-card-image,none), radial-gradient(ellipse at 78% 30%,rgba(77,138,156,.19),transparent 65%); background-size:cover;background-position:center;background-repeat:no-repeat; color:#f5f7f8!important;text-decoration:none!important; box-shadow:none;transition:transform .2s ease,filter .2s ease; } .fsp-hbc-cat-card-v157::before { content:"";position:absolute;inset:0;pointer-events:none;z-index:0; background:linear-gradient(0deg,rgba(9,14,17,.20),transparent 60%); } .fsp-hbc-cat-card-v157:hover {transform:translateY(-2px);filter:brightness(1.09)} .fsp-hbc-cat-copy-v157 {position:relative;z-index:1;display:flex;flex-direction:column;gap:11px;flex:1 1 auto;min-width:0;max-width:73%} .fsp-hbc-cat-copy-v157 strong {font-size:clamp(18px,1.35vw,22px);line-height:1.17;letter-spacing:-.025em;font-weight:820;overflow-wrap:anywhere;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.8)} .fsp-hbc-cat-copy-v157 small {font-size:12.5px;line-height:1.2;color:#d0d9da;font-weight:550;text-shadow:0 2px 8px rgba(0,0,0,.8)} .fsp-hbc-cat-copy-v157 small b {font-weight:850;color:#fff} .fsp-hbc-cat-icon-v157 {position:relative;z-index:1;flex:0 0 auto;object-fit:contain;width:clamp(57px,5.2vw,84px);height:clamp(57px,5.2vw,84px);max-width:33%;align-self:center;filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));transition:transform .2s ease} .fsp-hbc-cat-card-v157:hover .fsp-hbc-cat-icon-v157 {transform:scale(1.06)} .fsp-hbc-cat-fallback-v157 {position:relative;z-index:1;align-self:center;font-size:36px;line-height:1;color:var(--hbc-accent)} .fsp-hbc-empty-v157 {grid-column:1/-1;padding:20px;margin:0;color:var(--hbc-muted);font-size:13px} .fsp-hbc-brand-grid-v157 {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-content:start;min-width:0} .fsp-hbc-brand-card-v157 { position:relative;isolation:isolate;min-width:0;min-height:108px;overflow:hidden; display:flex;flex-direction:column;justify-content:space-between;align-items:stretch; border-radius:16px;border:0; background-color:#1a2227; background-image: linear-gradient(180deg,rgba(12,18,22,.43) 0%,rgba(12,18,22,.45) 46%,rgba(12,18,22,.89) 100%), var(--hbc-card-image,none), radial-gradient(circle at 72% 10%,rgba(75,125,148,.2),transparent 76%); background-size:cover;background-position:center;background-repeat:no-repeat; color:#f2f6f6!important;text-decoration:none!important; box-shadow:none;transition:transform .2s ease,filter .2s ease; } .fsp-hbc-brand-card-v157[hidden],.fsp-hbc-brand-empty-v157[hidden] {display:none!important} .fsp-hbc-brand-card-v157:hover {transform:translateY(-2px);filter:brightness(1.09)} .fsp-hbc-brand-logo-v157 {position:relative;z-index:1;display:flex;align-items:center;justify-content:center;flex:1;min-height:72px;padding:10px 12px;background:none;border:0} .fsp-hbc-brand-logo-v157 img {display:block;width:auto;height:auto;max-width:82px;max-height:46px;object-fit:contain;border-radius:4px;filter:brightness(.91) drop-shadow(0 2px 9px rgba(0,0,0,.52))} .fsp-hbc-brand-logo-v157>span {display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:rgba(17,23,28,.64);border:1px solid rgba(145,186,218,.22);color:#c6e4ff;font-size:16px;font-weight:850} .fsp-hbc-brand-meta-v157 {position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;min-height:35px;padding:9px 10px;background:linear-gradient(180deg,rgba(10,16,20,.55),rgba(10,16,20,.81))} .fsp-hbc-brand-meta-v157 strong {display:block;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#f0f4f4;font-size:11px;line-height:1.2;font-weight:760;text-shadow:0 1px 6px rgba(0,0,0,.6)} .fsp-hbc-brand-meta-v157 small {flex:0 0 auto;font-size:10px;line-height:1.2;color:#b7c2c5;white-space:nowrap} .fsp-hbc-brand-meta-v157 small b {font-size:10.5px;font-weight:800;color:#76bfff} .fsp-hbc-brand-search-v157 {display:flex;align-items:center;gap:9px;min-height:46px;margin-top:13px;position:relative} .fsp-hbc-brand-search-v157>span {position:absolute;left:14px;top:9px;color:#83bef0;font-size:23px;line-height:1;pointer-events:none;z-index:1} .fsp-hbc-brand-search-v157 input {flex:1 1 auto;min-width:0;width:100%;height:46px;min-height:46px;padding:0 12px 0 40px!important;border-radius:12px!important;border:1px solid rgba(180,208,220,.15)!important;background:rgba(29,37,43,.88)!important;color:#f1f4f6!important;font-size:12px!important;box-shadow:none!important;outline:none} .fsp-hbc-brand-search-v157 input::placeholder {color:#99a6aa!important;opacity:1} .fsp-hbc-brand-search-v157 input:focus {border-color:rgba(102,173,233,.55)!important} .fsp-hbc-brand-search-v157 button {flex:0 0 auto;min-height:46px;border-radius:12px;border:1px solid rgba(180,208,220,.15);background:rgba(29,37,43,.88);color:#e4ebef;padding:0 12px;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap} .fsp-hbc-brand-search-v157 button:hover {border-color:rgba(102,173,233,.45);background:rgba(36,47,55,.9)} .fsp-hbc-brand-search-v157 button b {color:#78c1ff;margin-left:4px} .fsp-hbc-brand-empty-v157 {grid-column:1/-1;margin:0;padding:16px;color:#aeb7bb;font-size:12px} .fsp-home-bottom-catalog-v157 a:focus-visible,.fsp-hbc-brand-search-v157 input:focus-visible,.fsp-hbc-brand-search-v157 button:focus-visible {outline:2px solid var(--hbc-accent)!important;outline-offset:3px} @media(max-width:1220px) { .fsp-hbc-grid-v157 {grid-template-columns:minmax(0,1fr);gap:30px} .fsp-hbc-cat-card-v157 {min-height:160px} .fsp-hbc-brand-grid-v157 {grid-template-columns:repeat(3,minmax(0,1fr))} } @media(max-width:680px) { .fsp-home-bottom-catalog-v157 {width:calc(100% - 28px);margin:34px auto 38px} .fsp-hbc-head-v157 {flex-wrap:wrap;gap:12px;min-height:0;margin-bottom:16px} .fsp-hbc-heading-v157 h2 {font-size:24px!important} .fsp-hbc-heading-v157 p {font-size:12px!important} .fsp-hbc-all-v157 {min-height:37px;padding:0 12px;font-size:11px} .fsp-hbc-cat-grid-v157 {grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .fsp-hbc-cat-card-v157 {min-height:146px;padding:17px 15px;border-radius:14px} .fsp-hbc-cat-copy-v157 {max-width:78%;gap:8px} .fsp-hbc-cat-copy-v157 strong {font-size:15px} .fsp-hbc-cat-copy-v157 small {font-size:10.5px} .fsp-hbc-cat-icon-v157 {width:52px;height:52px} .fsp-hbc-brand-grid-v157 {gap:9px} .fsp-hbc-brand-card-v157 {min-height:99px;border-radius:13px} .fsp-hbc-brand-logo-v157 {min-height:65px;padding:8px} .fsp-hbc-brand-logo-v157 img {max-width:70px;max-height:40px} .fsp-hbc-brand-meta-v157 {flex-direction:column;align-items:flex-start;gap:4px;padding:7px 8px} .fsp-hbc-brand-meta-v157 strong {font-size:10px;max-width:100%} .fsp-hbc-brand-meta-v157 small {font-size:9px} .fsp-hbc-brand-search-v157 {flex-wrap:wrap} .fsp-hbc-brand-search-v157 input {flex-basis:100%} .fsp-hbc-brand-search-v157 button {width:100%} } @media(max-width:390px) { .fsp-hbc-brand-grid-v157 {grid-template-columns:repeat(2,minmax(0,1fr))} .fsp-hbc-heading-v157 h2 {font-size:21px!important} .fsp-hbc-cat-icon-v157 {width:40px;height:40px} .fsp-hbc-cat-copy-v157 {max-width:88%} } @media(prefers-reduced-motion:reduce) { .fsp-hbc-cat-card-v157,.fsp-hbc-brand-card-v157,.fsp-hbc-all-v157,.fsp-hbc-cat-icon-v157 {transition:none!important;transform:none!important} }