/** Shopify CDN: Minification failed Line 723:0 Unexpected "}" **/ /* ═══════════════════════════════════════════════ WorkplaceTechHub — B2B Design System File: assets/b2b-styles.css Horizon v3.2.1 · Global CSS overrides Referenced from: layout/theme.liquid ═══════════════════════════════════════════════ */ /* ── Page-level background: scheme-1 provides #F4F6F9, but some full-width sections escape that. Force it. ── */ body { font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ── White card surfaces on gray page ── */ .product-card, .collection-card, .resource-card, .predictive-search-results__card { background-color: #FFFFFF; border: 1px solid #DDE2EC; border-radius: 10px; overflow: hidden; } /* Inner card padding — product cards use web component, collection cards use . Ensure white bg. */ .product-card, .collection-card { background-color: #FFFFFF; } /* ── Product card gallery images ── */ .product-card .card-gallery, .collection-card .collection-card__image { border-radius: 10px 10px 0 0; overflow: hidden; } /* ── Hero: force navy background on hero container (in case image doesn't load or overlay is off) ── */ .hero.color-scheme-2, .hero[class*="color-scheme-2"] { background-color: #0A1628; } /* ── Footer: force navy background regardless of scheme ── */ #footer-group .shopify-section .section-background, #footer-group .shopify-section > .section { background-color: #0A1628 !important; color: #8899B8; } .footer__menu a, .footer__menu .list-menu__item--link, .footer a, #footer-group a { color: #1A6EF8 !important; } .footer__menu a:hover, .footer a:hover, #footer-group a:hover { color: #FFFFFF !important; } /* ── Announcement bar: B2B blue ──────────────── */ .announcement-bar, .announcement-bar__message, .announcement-bar-wrapper .section-background, .shopify-section:has(.announcement-bar) .section-background { background-color: #1A6EF8 !important; color: #FFFFFF !important; } .announcement-bar a { color: #FFFFFF !important; text-decoration: underline; } /* ── Quote CTA button in header ── */ .b2b-quote-cta { background-color: #1A6EF8 !important; color: #FFFFFF !important; padding: 8px 18px; border-radius: 6px; font-weight: 600; white-space: nowrap; font-size: 13px; display: inline-flex; align-items: center; } .b2b-quote-cta:hover { background-color: #1558CC !important; color: #FFFFFF !important; } /* ── Header: hide default retail cart icon (B2B = quote-first) ── */ .header-actions__action.action__cart, cart-icon { display: none !important; } /* ── Primary button: override any scheme-specific variations ── */ .button { border-radius: 6px !important; font-weight: 600 !important; } .button:hover { background-color: #1558CC !important; } /* ── Secondary button outline ── */ .button-secondary { border-radius: 6px !important; } /* ── Price display: clean, not retail-flashy ── */ .price, .price__regular, .price--large { font-weight: 700; color: #1A202C; } .price__sale { color: #0F7B4E; } /* ═══════════════════════════════════════════════ B2B SECTION COMPONENTS ═══════════════════════════════════════════════ */ /* ── B2B Hero ─────────────────────────────── */ .b2b-hero { background: #0A1628; padding: 48px 32px 40px; } .b2b-hero__inner { max-width: 1200px; margin: 0 auto; } .b2b-hero__badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(74,158,255,.12); border: 1px solid rgba(74,158,255,.28); color: #7AB8FF; font-size: 11px; padding: 4px 12px; border-radius: 20px; margin-bottom: 18px; } .b2b-hero__h1 { color: #FFFFFF; font-size: clamp(24px, 4vw, 36px); font-weight: 700; line-height: 1.2; max-width: 600px; margin-bottom: 14px; } .b2b-hero__h1 em { color: #1A6EF8; font-style: normal; } .b2b-hero__sub { color: #8899B8; font-size: 14px; line-height: 1.65; max-width: 520px; margin-bottom: 28px; } .b2b-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 36px; } .b2b-btn { padding: 11px 22px; border-radius: 6px; font-weight: 600; font-size: 13px; text-decoration: none; display: inline-block; } .b2b-btn--primary { background: #1A6EF8; color: #fff; border: none; } .b2b-btn--primary:hover { background: #1558CC; } .b2b-btn--secondary { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.25); } .b2b-btn--secondary:hover { background: rgba(255,255,255,.08); } .b2b-btn--ghost { background: transparent; color: #6677A0; border: none; text-decoration: underline; } .b2b-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: rgba(255,255,255,.08); border-radius: 8px; border: 1px solid rgba(255,255,255,.08); overflow: hidden; max-width: 1200px; margin: 0 auto; } .b2b-stat { background: rgba(255,255,255,.04); padding: 14px 16px; } .b2b-stat__num { display: block; color: #fff; font-size: 22px; font-weight: 700; } .b2b-stat__lbl { display: block; color: #566480; font-size: 11px; margin-top: 4px; } /* ── B2B Trust Strip ──────────────────────── */ .b2b-trust-strip { background: #FFFFFF; padding: 28px 0; border-bottom: 1px solid #DDE2EC; } .b2b-trust-strip__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .b2b-trust-strip__group { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .b2b-trust-pill--tier2 { background: #FFFFFF; border: 1px solid #C8D0E0; color: #64748B; font-weight: 500; font-size: 10px; padding: 4px 10px; border-radius: 5px; white-space: nowrap; } .b2b-trust-row--tier2 { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; margin-bottom: 12px; } .b2b-trust-label--tier2 { font-size: 10px; color: #94A3B8; font-weight: 400; white-space: nowrap; flex-shrink: 0; } .b2b-trust-strip__group:last-child { margin-bottom: 0; } .b2b-trust-strip__label { font-size: 11px; font-weight: 700; color: #4A5568; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; } .b2b-trust-strip__pills { display: flex; flex-wrap: wrap; gap: 8px; } .b2b-pill { display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; } .b2b-pill--brand { background: #EEF1F6; color: #1A202C; border: 1px solid #DDE2EC; } .b2b-pill--dist { background: #EEF5FF; color: #1A6EF8; border: 1px solid #C8D9F7; font-weight: 600; } /* ── B2B Use-Case Grid ────────────────────── */ .b2b-usecases { padding: 48px 0; } /* section-background gets the scheme color; ensure our section content overlays it */ .b2b-usecases-wrapper .section-background, .b2b-why-us-wrapper .section-background { position: absolute; inset: 0; z-index: 0; } .b2b-usecases-wrapper, .b2b-why-us-wrapper { position: relative; } .b2b-usecases-wrapper .b2b-usecases, .b2b-why-us-wrapper .b2b-why-us { position: relative; z-index: 1; } .b2b-usecases__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .b2b-usecases__heading { font-size: 22px; font-weight: 700; color: #1A202C; margin-bottom: 28px; text-align: center; } .b2b-usecases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .b2b-usecase-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #DDE2EC; border-radius: 10px; padding: 24px 20px; text-decoration: none; transition: box-shadow 0.2s ease, transform 0.2s ease; } .b2b-usecase-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.08); transform: translateY(-2px); } .b2b-usecase-card__icon { font-size: 28px; margin-bottom: 10px; } .b2b-usecase-card__title { font-size: 15px; font-weight: 700; color: #1A202C; margin-bottom: 6px; } .b2b-usecase-card__desc { font-size: 12px; color: #4A5568; line-height: 1.5; margin-bottom: 10px; flex-grow: 1; } .b2b-usecase-card__arrow { color: #1A6EF8; font-size: 16px; font-weight: 700; } /* ── B2B Quote Form ───────────────────────── */ /* Custom-liquid section wrapper: force white background when scheme-3 */ .shopify-section:has(.b2b-quote-form) .section-background { background-color: #FFFFFF; } .shopify-section:has(.b2b-quote-form) .section { background: transparent; } .b2b-quote-form { background: #FFFFFF; border: 1px solid #DDE2EC; border-radius: 10px; padding: 32px; max-width: 720px; margin: 0 auto; } .b2b-quote-form h2 { font-size: 20px; font-weight: 700; color: #1A202C; margin-bottom: 6px; } .b2b-quote-form p { font-size: 13px; color: #4A5568; margin-bottom: 20px; } .b2b-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .b2b-field label { display: block; font-size: 11px; font-weight: 600; color: #4A5568; margin-bottom: 4px; } .b2b-field input, .b2b-field select { width: 100%; background: #F4F6F9; border: 1px solid #DDE2EC; border-radius: 6px; padding: 8px 10px; font-size: 12px; color: #1A202C; } .b2b-field--full { grid-column: 1 / -1; } .b2b-form-promise { font-size: 11px; color: #0F7B4E; margin-bottom: 14px; } .b2b-submit { width: 100%; padding: 13px; font-size: 14px; font-weight: 700; border-radius: 6px; } .b2b-form-success { background: #E6F7F0; border: 1px solid #9FE1CB; border-radius: 6px; padding: 16px; font-size: 13px; color: #0F7B4E; } /* ── B2B Why Us ───────────────────────────── */ .b2b-why-us { padding: 48px 0; } .b2b-why-us__inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .b2b-why-us__heading { font-size: 22px; font-weight: 700; color: #1A202C; margin-bottom: 28px; text-align: center; } .b2b-why-us__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .b2b-why-card { background: #FFFFFF; border: 1px solid #DDE2EC; border-radius: 10px; padding: 24px 20px; } .b2b-why-card__icon { font-size: 28px; margin-bottom: 10px; } .b2b-why-card__title { font-size: 15px; font-weight: 700; color: #1A202C; margin-bottom: 6px; } .b2b-why-card__desc { font-size: 12px; color: #4A5568; line-height: 1.6; } /* ═══════════════════════════════════════════════ PRODUCT PAGE — B2B COMPONENTS ═══════════════════════════════════════════════ */ /* ── Volume pricing tier table ─────────────────── */ .b2b-tiers { background: #F4F6F9; border: 1px solid #DDE2EC; border-radius: 8px; overflow: hidden; margin-bottom: 16px; } .b2b-tiers__header { display: grid; grid-template-columns: 1fr 1fr 1fr; background: #0A1628; padding: 7px 14px; } .b2b-tiers__header span { font-size: 10px; font-weight: 700; color: #8899B8; text-transform: uppercase; letter-spacing: 0.5px; } .b2b-tier-row { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 8px 14px; border-top: 1px solid #DDE2EC; font-size: 12px; color: #4A5568; } .b2b-tier-row--highlight { background: #EEF5FF; } .b2b-tier-row--highlight span { font-weight: 700; color: #1A6EF8; } .b2b-tier-price { font-weight: 700; color: #1A6EF8; } .b2b-tier-save { color: #0F7B4E; font-size: 11px; } .b2b-tier-best { color: #1A6EF8; font-size: 11px; font-weight: 600; } /* ── Distributor inventory panel ───────────────── */ .b2b-dist-panel { background: #fff; border: 1px solid #DDE2EC; border-radius: 10px; padding: 14px; margin-bottom: 16px; } .b2b-dist-panel__title { font-size: 12px; font-weight: 700; color: #1A202C; margin-bottom: 10px; } .b2b-dist-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; } .b2b-dist-item { background: #F4F6F9; border: 1px solid #DDE2EC; border-radius: 7px; padding: 8px 10px; } .b2b-dist-name { font-size: 10px; font-weight: 700; color: #1A202C; margin-bottom: 3px; } .b2b-dist-stock { font-size: 12px; font-weight: 700; } .b2b-dist-stock--in { color: #0F7B4E; } .b2b-dist-stock--low { color: #B86C00; } .b2b-dist-stock--out { color: #C0392B; } .b2b-dist-sku { font-size: 9px; color: #718096; margin-top: 3px; } /* ── Procurement CTA stack ────────────────────── */ .b2b-cta-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .b2b-cta-primary { font-size: 14px !important; font-weight: 700 !important; padding: 14px !important; background-color: #1A6EF8 !important; color: #FFFFFF !important; border-radius: 6px !important; text-align: center; text-decoration: none; display: block; } .b2b-cta-primary:hover { background-color: #1558CC !important; } .b2b-cta-po { background: transparent !important; color: #1A6EF8 !important; border: 1.5px solid #1A6EF8 !important; border-radius: 6px !important; text-align: center; text-decoration: none; display: block; padding: 12px !important; font-weight: 600 !important; } .b2b-cta-po:hover { background: #EEF5FF !important; } .b2b-cta-save { background: transparent !important; color: #4A5568 !important; border: 1px solid #DDE2EC !important; font-size: 12px !important; border-radius: 6px !important; width: 100%; padding: 10px !important; } .b2b-cta-meta { font-size: 11px; color: #718096; text-align: center; margin-bottom: 16px; line-height: 1.5; } /* ── Procurement notes block ──────────────────── */ .b2b-procurement-notes { background: #E6F7F0; border: 1px solid #9FE1CB; border-radius: 10px; padding: 16px; margin-top: 4px; } .b2b-note { display: flex; gap: 12px; margin-bottom: 12px; font-size: 12px; color: #334155; line-height: 1.6; } .b2b-note:last-child { margin-bottom: 0; } .b2b-note__icon { color: #0F7B4E; font-weight: 700; flex-shrink: 0; } /* ── Promotions banner ─────────────────────────── */ .b2b-promotions { padding: 0; } .b2b-promotions__grid { display: grid; grid-template-columns: 1fr 1fr; min-height: 280px; } .b2b-promotions__panel { padding: 48px 40px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .b2b-promotions__panel--dark { background: #0A1628; } .b2b-promotions__panel--light { background: #EEF1F6; } .b2b-promo-label { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #1A6EF8; } .b2b-promo-label--green { color: #0F7B4E; } .b2b-promo-headline { font-size: 28px; font-weight: 800; color: #FFFFFF; line-height: 1.2; margin: 0; } .b2b-promo-headline--dark { color: #0A1628; } .b2b-promo-sub { font-size: 14px; color: #94A3B8; line-height: 1.5; margin: 0; } .b2b-promo-sub--dark { color: #475569; } .b2b-promo-expiry { font-size: 13px; color: #F59E0B; font-weight: 600; margin: 0; } .b2b-btn { display: inline-block; padding: 12px 24px; border-radius: 6px; font-size: 14px; font-weight: 700; text-decoration: none; width: fit-content; margin-top: 8px; } .b2b-btn--blue { background: #1A6EF8; color: #FFFFFF; } .b2b-btn--navy { background: #0A1628; color: #FFFFFF; } @media (max-width: 749px) { .b2b-promotions__grid { grid-template-columns: 1fr; } .b2b-promotions__panel { padding: 32px 24px; } .b2b-promo-headline { font-size: 22px; } } /* ── Featured products ─────────────────────────── */ .b2b-featured__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } .b2b-featured__title { font-size: 24px; font-weight: 800; color: #0A1628; margin: 0; } .b2b-featured__viewall { font-size: 14px; color: #1A6EF8; text-decoration: none; font-weight: 600; } .b2b-featured__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .b2b-featured__card { background: #FFFFFF; border-radius: 8px; overflow: hidden; border: 1px solid #DDE2EC; display: flex; flex-direction: column; } .b2b-featured__img { width: 100%; height: 200px; object-fit: contain; padding: 16px; background: #FAFAFA; } .b2b-featured__img-placeholder { width: 100%; height: 200px; background: #EEF1F6; display: flex; align-items: center; justify-content: center; color: #64748B; font-size: 13px; font-weight: 600; } .b2b-featured__info { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .b2b-featured__vendor { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #64748B; margin: 0; } .b2b-featured__name { font-size: 14px; font-weight: 600; color: #0A1628; margin: 0; line-height: 1.4; } .b2b-featured__name a { color: inherit; text-decoration: none; } .b2b-featured__price { font-size: 18px; font-weight: 700; color: #1A6EF8; margin: 0; } @media (max-width: 989px) { .b2b-featured__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 749px) { .b2b-featured__grid { grid-template-columns: 1fr; } } /* ── Brands strip ──────────────────────────────── */ .b2b-brands__title { font-size: 22px; font-weight: 800; color: #0A1628; margin: 0 0 24px 0; text-align: center; } .b2b-brands__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-bottom: 14px; } .b2b-brands__label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #334155; white-space: nowrap; margin-right: 4px; } .b2b-brands__label--muted { color: #94A3B8; } .b2b-brand-pill { display: inline-block; padding: 6px 14px; border-radius: 5px; font-size: 13px; font-weight: 600; text-decoration: none; transition: all 0.15s ease; } .b2b-brand-pill--tier1 { background: #EBF2FF; color: #1A6EF8; border: 1px solid #BFDBFE; } .b2b-brand-pill--tier1:hover { background: #1A6EF8; color: #FFFFFF; } .b2b-brand-pill--tier2 { background: #F4F6F9; color: #64748B; border: 1px solid #CBD5E1; } .b2b-brand-pill--tier2:hover { background: #334155; color: #FFFFFF; } /* ── B2B Split Row ─────────────────────────────── */ .b2b-split { padding: 56px 0; } .b2b-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .b2b-split__grid--reverse { direction: rtl; } .b2b-split__grid--reverse > * { direction: ltr; } .b2b-split__image img { width: 100%; border-radius: 8px; object-fit: cover; } .b2b-split__image-placeholder { width: 100%; aspect-ratio: 7/5; background: #EEF1F6; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #64748B; font-weight: 600; } .b2b-split__label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #1A6EF8; } .b2b-split__heading { font-size: 28px; font-weight: 800; color: #0A1628; margin: 8px 0 12px; } .b2b-split__text { font-size: 15px; color: #475569; line-height: 1.6; margin-bottom: 20px; } @media (max-width: 749px) { .b2b-split__grid { grid-template-columns: 1fr; gap: 24px; } .b2b-split__grid--reverse { direction: ltr; } } /* ── Footer column alignment fix ──────────────── */ .footer-content { align-items: start; } /* ── Responsive ───────────────────────────── */ @media (max-width: 749px) { .b2b-stats { grid-template-columns: repeat(2,1fr); } .b2b-usecases__grid { grid-template-columns: repeat(2, 1fr); } .b2b-why-us__grid { grid-template-columns: repeat(2, 1fr); } .b2b-form-grid { grid-template-columns: 1fr; } .b2b-hero { padding: 32px 20px 28px; } .b2b-hero__ctas { flex-direction: column; } .b2b-hero__ctas .b2b-btn { width: 100%; text-align: center; } .b2b-trust-strip__group { flex-direction: column; align-items: flex-start; } .b2b-dist-grid { grid-template-columns: 1fr; } .b2b-tiers { font-size: 11px; } .b2b-tiers__header span, .b2b-tier-row { font-size: 11px; padding: 6px 10px; } } @media (max-width: 480px) { .b2b-usecases__grid { grid-template-columns: 1fr; } .b2b-why-us__grid { grid-template-columns: 1fr; } .b2b-hero__h1 { font-size: clamp(20px, 6vw, 24px); } .b2b-stat__num { font-size: 18px; } .b2b-badge { font-size: 10px; padding: 3px 10px; } .b2b-quote-cta { font-size: 12px; padding: 6px 12px; } .b2b-procurement-notes { padding: 12px; } .b2b-note { font-size: 11px; } } }