/* ========================================================================== Bang-Bang Tactical — approved-mockup implementation (CS job b2744) Design authority: DESIGN_SPEC.md + LAYOUT_MAP.json + design.tokens.css (ChatGPT/Creation Station, 2026-09-03). Claude implements as drawn. Loaded LAST in so it out-specifies theme.css + professional-fixes. TENANT-LOCAL: not in TGD release source (assets/images excluded; this new file is tenant-only so trinity_release never touches it). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800;900&display=swap'); :root { --bbt-page:#fff; --bbt-panel:#f7f7f7; --bbt-panel-warm:#f3f1ed; --bbt-ink:#111; --bbt-ink-soft:#262626; --bbt-muted:#666; --bbt-muted-lt:#8a8a8a; --bbt-border:#ddd; --bbt-border-soft:#e8e8e8; --bbt-black:#0d0d0d; --bbt-red:#b70f0a; --bbt-red-dk:#8f0906; --bbt-red-lt:#d91f17; --bbt-skeleton:#ececec; --bbt-display:"Oswald","Arial Narrow","Inter",sans-serif; --bbt-cond:"Oswald","Arial Narrow",sans-serif; --bbt-body:"Inter","Arial",sans-serif; --bbt-xl:1240px; --bbt-nav:1000px; --bbt-pad:24px; --bbt-tile-gap:16px; } /* ---- global page reset for BBT pages ---- */ body.bbt-page{background:var(--bbt-page);color:var(--bbt-ink);font-family:var(--bbt-body);} /* theme.css .main-content{min-height:60vh} stretches main on tall windows, gapping the footer */ .bbt-page main.main-content{min-height:0 !important;} .bbt-wrap{max-width:var(--bbt-xl);margin:0 auto;padding-inline:var(--bbt-pad);width:100%;box-sizing:border-box;} .bbt-page *,.bbt-page *::before,.bbt-page *::after{box-sizing:border-box;} .bbt-page a{text-decoration:none;} :where(.bbt-utility,.bbt-shophdr,.main-nav,.bbt-mosaic,.bbt-brands,.bbt-service,.bbt-footer) :focus-visible{outline:2px solid #005fcc;outline-offset:2px;} /* =============================== 01 UTILITY BAR ========================= */ .bbt-utility{background:var(--bbt-black);color:#fff;font-family:var(--bbt-cond);} .bbt-utility .bbt-wrap{display:flex;align-items:center;justify-content:space-between;min-height:42px;gap:20px;} .bbt-util-left,.bbt-util-right{display:flex;align-items:center;} .bbt-util-left{gap:8px;} .bbt-util-right{gap:42px;} .bbt-utility span,.bbt-utility a{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:#fff;white-space:nowrap;} .bbt-utility a:hover{color:var(--bbt-red-lt);} .bbt-util-loc svg{width:14px;height:14px;vertical-align:-2px;margin-right:5px;} /* =============================== 02 MAIN HEADER ======================== */ .bbt-shophdr{background:#fff;border-bottom:1px solid var(--bbt-border-soft);} .bbt-shophdr .bbt-wrap{display:grid;grid-template-columns:250px 1fr 205px;gap:30px;align-items:center;min-height:130px;} .bbt-logo{display:flex;align-items:center;} .bbt-logo img{max-width:none;max-height:108px;width:auto;height:auto !important;display:block;} .bbt-search{width:100%;max-width:590px;} .bbt-search form{display:flex;height:48px;position:relative;} .bbt-search input[type=text]{flex:1;height:48px;border:1px solid var(--bbt-border);border-right:0;border-radius:2px 0 0 2px;padding:0 44px 0 16px;font:400 15px/1 var(--bbt-body);color:var(--bbt-ink-soft);min-width:0;} .bbt-search input[type=text]:focus{outline:none;border-color:var(--bbt-ink);} .bbt-search .bbt-search-btn{width:48px;height:48px;flex:0 0 48px;background:var(--bbt-red);border:0;border-radius:0 2px 2px 0;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;} .bbt-search .bbt-search-btn:hover{background:var(--bbt-red-dk);} .bbt-search .bbt-search-btn svg{width:20px;height:20px;} .bbt-search .search-clear{position:absolute;right:56px;top:0;height:48px;width:32px;border:0;background:transparent;color:var(--bbt-muted);font-size:22px;cursor:pointer;display:none;align-items:center;justify-content:center;} .bbt-actions{display:flex;justify-content:flex-end;align-items:center;gap:24px;} .bbt-action{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--bbt-ink);font-family:var(--bbt-cond);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;line-height:1;} .bbt-action svg{width:26px;height:26px;stroke:var(--bbt-ink);} .bbt-action:hover,.bbt-action:hover svg{color:var(--bbt-red);stroke:var(--bbt-red);} .bbt-action .bbt-cart-count{color:inherit;} /* neutralize the platform's red .cart-link box + badge inside our actions */ .bbt-page .bbt-actions a.cart-link,.bbt-page .bbt-actions a.cart-link:link,.bbt-page .bbt-actions a.cart-link:visited{ display:flex !important;background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;min-width:0 !important;border-radius:0 !important;color:var(--bbt-ink) !important;font-size:13px !important;text-transform:uppercase;} .bbt-page .bbt-actions a.cart-link:hover,.bbt-page .bbt-actions a.cart-link:hover svg{color:var(--bbt-red) !important;stroke:var(--bbt-red) !important;background:none !important;} .bbt-page .bbt-actions a.cart-link .cart-count{background:none !important;color:inherit !important;padding:0 !important;font-size:inherit !important;position:static !important;min-width:0 !important;border-radius:0 !important;} /* =============================== 03 CATEGORY NAV ======================= */ /* Reuse platform .main-nav (mobile drawer JS depends on it); restyle desktop. */ .bbt-page .main-nav{background:#fff !important;border:0 !important;box-shadow:none !important;} .bbt-page .main-nav .container{max-width:var(--bbt-nav);margin:0 auto;padding:0 var(--bbt-pad);} .bbt-page .main-nav ul[role=menubar]{display:flex;justify-content:center;align-items:center;gap:38px;list-style:none;margin:0;padding:0;min-height:48px;} .bbt-page .main-nav > ul > li{margin:0;} .bbt-page .main-nav a.nav-link,.bbt-page .main-nav a.nav-link:link,.bbt-page .main-nav a.nav-link:visited{ font-family:var(--bbt-body) !important;font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--bbt-ink) !important; padding:6px 0;border:0;background:none !important;display:inline-block;line-height:1;} .bbt-page .main-nav a.nav-link:hover{color:var(--bbt-red) !important;border-bottom:2px solid var(--bbt-red);} .bbt-page .main-nav a.nav-link.is-sale,.bbt-page .main-nav a.nav-link.is-sale:link,.bbt-page .main-nav a.nav-link.is-sale:visited{color:var(--bbt-red) !important;} .bbt-page .main-nav a.nav-link.is-active{border-bottom:2px solid var(--bbt-red);} /* =============================== 04 PROMO MOSAIC ====================== */ .bbt-mosaic-sec{padding:14px 0 4px;} .bbt-mosaic{background:var(--bbt-panel);border:1px solid var(--bbt-border);border-radius:4px;padding:16px;} .bbt-mosaic-top{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--bbt-tile-gap);} .bbt-mosaic-top .bbt-right{display:grid;grid-template-rows:1fr 1fr;gap:var(--bbt-tile-gap);} .bbt-row3,.bbt-row4{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--bbt-tile-gap);margin-top:var(--bbt-tile-gap);} .bbt-tile{position:relative;overflow:hidden;border-radius:4px;background:var(--bbt-panel-warm);display:block;color:var(--bbt-ink);transition:box-shadow .22s ease, transform .22s ease;will-change:transform;} /* "pillow" hover: tile lifts with a soft shadow, product image gently zooms */ .bbt-page .bbt-tile:hover,.bbt-page .bbt-tile:focus-within{box-shadow:0 14px 34px rgba(0,0,0,.18);transform:translateY(-4px);z-index:4;} .bbt-page .bbt-tile:hover .bbt-btn{background:var(--bbt-red-dk);} @media (hover:none){.bbt-page .bbt-tile:hover{transform:none;box-shadow:none;}} @media (prefers-reduced-motion:reduce){.bbt-page .bbt-tile,.bbt-page .bbt-tile img.bbt-tile-bg{transition:none !important;}.bbt-page .bbt-tile:hover{transform:none;}} .bbt-tile-hero{min-height:568px;} .bbt-tile-md-r{min-height:276px;} /* right stacked (optics/ammo) */ .bbt-tile-md{min-height:274px;} /* row3 category cards */ .bbt-tile-sm{min-height:148px;} /* row4 compact */ /* beat professional-fixes img{max-width:100%!important;height:auto!important} which stopped tiles filling */ .bbt-page .bbt-tile img.bbt-tile-bg{position:absolute !important;inset:0;width:100% !important;height:100% !important;max-width:none !important;object-fit:cover !important;z-index:0;transition:transform .4s ease;} .bbt-page .bbt-tile:hover img.bbt-tile-bg{transform:scale(1.05) !important;} /* clean gradient blend on the copy side so there's no hard seam (ALL tiles except the hero) */ .bbt-page .bbt-tile:not(.bbt-tile-hero)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,var(--bbt-panel-warm) 0%,var(--bbt-panel-warm) 22%,rgba(243,241,237,0) 62%);} .bbt-page .bbt-tile-sm::before{background:linear-gradient(90deg,#f7f6f4 0%,#f7f6f4 34%,rgba(247,246,244,0) 74%);} .bbt-tile-skel{position:absolute;inset:0;background:var(--bbt-skeleton);z-index:0;} .bbt-tile-copy{position:relative;z-index:2;padding:44px 32px;max-width:250px;display:flex;flex-direction:column;align-items:flex-start;} .bbt-tile-md-r .bbt-tile-copy,.bbt-tile-md .bbt-tile-copy{padding:24px;max-width:190px;} .bbt-tile-sm .bbt-tile-copy{padding:24px;max-width:56%;} .bbt-tile-title{display:block;font-family:var(--bbt-display);font-weight:700;text-transform:uppercase;color:var(--bbt-ink);line-height:.98;letter-spacing:.005em;margin:0 0 12px;} .bbt-tile-body{display:block;} .bbt-tile-hero .bbt-tile-title{font-size:clamp(34px,3.7vw,50px);font-weight:700;line-height:.96;} .bbt-tile-md-r .bbt-tile-title,.bbt-tile-md .bbt-tile-title{font-size:27px;} .bbt-tile-sm .bbt-tile-title{font-size:22px;margin-bottom:6px;white-space:nowrap;} .bbt-tile-body{font-family:var(--bbt-cond);font-weight:600;text-transform:uppercase;font-size:15px;line-height:1.25;color:var(--bbt-ink-soft);margin:0 0 16px;letter-spacing:.01em;} .bbt-tile-sm .bbt-tile-body{font-size:13px;margin-bottom:10px;} .bbt-btn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 16px;background:var(--bbt-red);color:#fff !important;font-family:var(--bbt-body);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;border-radius:3px;border:0;cursor:pointer;white-space:nowrap;} .bbt-btn:hover{background:var(--bbt-red-dk);} .bbt-link{display:inline-flex;align-items:center;font-family:var(--bbt-body);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--bbt-red) !important;border-bottom:2px solid var(--bbt-red);padding-bottom:2px;} .bbt-link:hover{color:var(--bbt-red-dk) !important;border-color:var(--bbt-red-dk);} /* =============================== 05 TOP BRANDS ======================== */ .bbt-brands{border-top:1px solid var(--bbt-border);border-bottom:1px solid var(--bbt-border);} .bbt-brands .bbt-brands-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;min-height:62px;} .bbt-brands-label{font-family:var(--bbt-display);font-weight:700;font-size:18px;letter-spacing:.02em;text-transform:uppercase;color:var(--bbt-ink);white-space:nowrap;} .bbt-carousel{overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);} .bbt-carousel-track{display:flex;align-items:center;gap:52px;width:max-content;animation:bbt-scroll 34s linear infinite;} .bbt-carousel:hover .bbt-carousel-track{animation-play-state:paused;} @keyframes bbt-scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} .bbt-brand-cell{flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-family:var(--bbt-display);font-weight:700;font-size:16px;letter-spacing:.02em;text-transform:uppercase;color:#151515 !important;white-space:nowrap;line-height:1.02;transition:color .15s;} .bbt-brand-cell:hover{color:var(--bbt-red) !important;} .bbt-brands-all{font-family:var(--bbt-cond);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em;color:var(--bbt-red) !important;text-align:right;white-space:nowrap;} .bbt-brands-all:hover{color:var(--bbt-red-dk) !important;text-decoration:underline;} /* =============================== 06 SERVICE STRIP ===================== */ .bbt-service .bbt-wrap{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;min-height:80px;} .bbt-service-col{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 0;position:relative;} .bbt-service-col + .bbt-service-col::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:44px;background:var(--bbt-border);} .bbt-service-col svg{width:36px;height:36px;flex:0 0 36px;stroke:var(--bbt-ink);} .bbt-service-txt strong{display:block;font-family:var(--bbt-display);font-size:16px;letter-spacing:.01em;text-transform:uppercase;color:var(--bbt-ink);font-weight:700;} .bbt-service-txt span{display:block;font-size:13px;color:var(--bbt-muted);line-height:1.35;} /* =============================== 07 FOOTER =========================== */ /* out-specify professional-fixes' footer{background:#2c3e50!important} + footer a{color:#e0e0e0!important} */ .bbt-page .bbt-footer{background:#fff !important;border-top:1px solid var(--bbt-border);color:var(--bbt-ink) !important;} .bbt-page .bbt-footer h3,.bbt-page .bbt-footer .bbt-foot-col h3,.bbt-page .bbt-footer .bbt-news h3{color:var(--bbt-ink) !important;} .bbt-page .bbt-footer p,.bbt-page .bbt-footer li,.bbt-page .bbt-footer .bbt-foot-about p{color:var(--bbt-muted) !important;} .bbt-page .bbt-footer a,.bbt-page .bbt-footer .bbt-foot-col a{color:var(--bbt-ink-soft) !important;background:none !important;} .bbt-page .bbt-footer a:hover,.bbt-page .bbt-footer .bbt-foot-col a:hover{color:var(--bbt-red) !important;} .bbt-page .bbt-footer .bbt-foot-social a{color:var(--bbt-ink) !important;border:1px solid var(--bbt-border) !important;} .bbt-page .bbt-footer .bbt-foot-social a:hover{color:var(--bbt-red) !important;border-color:var(--bbt-red) !important;} .bbt-page .bbt-footer .bbt-news button{color:#fff !important;background:var(--bbt-red) !important;} .bbt-page .bbt-footer .bbt-news button:hover{background:var(--bbt-red-dk) !important;} .bbt-page .bbt-legal{background:#fff !important;} .bbt-page .bbt-legal p{color:var(--bbt-muted) !important;} .bbt-page .bbt-legal a{color:var(--bbt-muted) !important;} .bbt-footer .bbt-wrap{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.55fr);gap:28px;padding-top:28px;padding-bottom:34px;} .bbt-foot-logo img{max-width:none;max-height:120px;width:auto;height:auto !important;display:block;margin-bottom:14px;} .bbt-foot-about p{font-size:13px;color:var(--bbt-muted);line-height:1.5;margin:0 0 16px;max-width:260px;} .bbt-foot-social{display:flex;gap:12px;} .bbt-foot-social a{width:34px;height:34px;border:1px solid var(--bbt-border);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--bbt-ink);} .bbt-foot-social a:hover{border-color:var(--bbt-red);color:var(--bbt-red);} .bbt-foot-social svg{width:16px;height:16px;} .bbt-foot-col h3{font-family:var(--bbt-display);font-size:16px;letter-spacing:.01em;text-transform:uppercase;color:var(--bbt-ink);margin:0 0 14px;font-weight:700;} .bbt-foot-col ul{list-style:none;margin:0;padding:0;} .bbt-foot-col li{margin:0 0 9px;} .bbt-foot-col a{font-size:13px;color:var(--bbt-ink-soft);} .bbt-foot-col a:hover{color:var(--bbt-red);text-decoration:underline;} .bbt-news h3{font-family:var(--bbt-display);font-size:16px;letter-spacing:.01em;text-transform:uppercase;color:var(--bbt-ink);margin:0 0 8px;font-weight:700;} .bbt-news p{font-size:13px;color:var(--bbt-muted);line-height:1.5;margin:0 0 14px;} .bbt-news input[type=email]{width:100%;height:42px;border:1px solid var(--bbt-border);border-radius:2px;padding:0 12px;font:400 14px/1 var(--bbt-body);margin-bottom:10px;} .bbt-news input[type=email]:focus{outline:none;border-color:var(--bbt-ink);} .bbt-news button{width:100%;height:42px;background:var(--bbt-red);color:#fff;border:0;border-radius:3px;font-family:var(--bbt-body);font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;} .bbt-news button:hover{background:var(--bbt-red-dk);} .bbt-news .bbt-news-msg{font-size:12px;margin-top:8px;min-height:14px;} .bbt-news .bbt-news-msg.ok{color:#1a7f37;} .bbt-news .bbt-news-msg.err{color:var(--bbt-red);} /* legal bar */ .bbt-legal{border-top:1px solid var(--bbt-border);} .bbt-legal .bbt-wrap{display:flex;align-items:center;justify-content:space-between;min-height:48px;gap:12px;flex-wrap:wrap;} .bbt-legal p{margin:0;font-size:12px;color:var(--bbt-muted);} .bbt-legal a{color:var(--bbt-muted);text-decoration:underline;} /* =============================== RESPONSIVE =========================== */ @media (max-width:1023px){ .bbt-tile-hero{min-height:clamp(460px,52vw,612px);} } @media (max-width:900px){ /* header reflow */ .bbt-shophdr .bbt-wrap{grid-template-columns:1fr;gap:12px;padding-top:14px;padding-bottom:14px;justify-items:center;} .bbt-logo img{max-width:none;max-height:100px;} .bbt-actions{order:2;gap:28px;} .bbt-search{order:3;max-width:100%;} .bbt-utility .bbt-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;gap:20px;} .bbt-util-right{gap:20px;} /* mosaic collapses; the platform mobile-drawer CSS already owns .main-nav here */ .bbt-mosaic-top{grid-template-columns:1fr 1fr;} .bbt-tile-hero{grid-column:1/-1;min-height:460px;} .bbt-row3,.bbt-row4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));} .bbt-brands .bbt-brands-inner{grid-template-columns:1fr;gap:12px;justify-items:center;padding-top:16px;padding-bottom:16px;} .bbt-carousel{width:100%;} .bbt-brands-all{text-align:center;} .bbt-footer .bbt-wrap{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;} } @media (max-width:768px){ .bbt-util-loc-area{display:none;} /* hide long left phrase, keep links */ .bbt-brands .bbt-brands-inner{grid-template-columns:1fr;} } @media (max-width:640px){ .bbt-mosaic{padding:12px;} .bbt-mosaic-top{grid-template-columns:1fr;gap:12px;} .bbt-mosaic-top .bbt-right{grid-template-rows:none;} .bbt-tile-hero{grid-column:auto;min-height:clamp(360px,110vw,430px);} .bbt-tile-md-r,.bbt-tile-md{min-height:240px;} .bbt-tile-sm{min-height:150px;} .bbt-row3,.bbt-row4{grid-template-columns:1fr;gap:12px;} .bbt-tile-copy{padding:24px;} .bbt-tile-hero .bbt-tile-copy{padding:24px 20px;} .bbt-service .bbt-wrap{grid-template-columns:1fr;} .bbt-service-col{justify-content:flex-start;padding:16px 0;} .bbt-service-col + .bbt-service-col::before{left:0;right:0;top:0;width:auto;height:1px;transform:none;} .bbt-brands .bbt-brands-inner{grid-template-columns:1fr;} .bbt-footer .bbt-wrap{grid-template-columns:1fr;gap:26px;padding-inline:16px;} .bbt-legal .bbt-wrap{flex-direction:column;align-items:flex-start;gap:8px;} .bbt-tile-hero .bbt-tile-title{font-size:clamp(36px,11vw,52px);} }