/* Theme Name: DC Supplies Theme Theme URI: https://www.dcsupplies.net/ Author: DC Supplies Author URI: https://www.dcsupplies.net/ Description: Custom WooCommerce theme for DC Supplies, inspired by Newegg Business. Version: 2.0.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: dcsupplies-theme */ /* ─── Reset & Base ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --primary: #9B1E22; --primary-dark: #7A171B; --accent: #9B1E22; --accent-dark: #7A171B; --red: #9B1E22; --text: #12181E; --text-light: #6E6E6E; --bg: #FCFAF8; --border: #E2E2E2; --white: #FFFFFF; --footer-bg: #0D0D0D; --sidebar-bg: #0D0D0D; --navy: #0D0D0D; /* was referenced but never defined — CTA banner gradient rendered blank */ --navy-2: #1A1A1A; /* Tokens referenced by woocommerce-cart-checkout.css (added here so cart/checkout render correctly) */ --accent-fg: #FFFFFF; /* text color on top of --accent buttons */ --card: #FFFFFF; /* card / table backgrounds */ --sidebar: #0D0D0D; /* cart totals & order review sidebar bg */ --radius: 10px; /* shared corner radius */ --brand-red: #9B1E22; /* required-field asterisk, etc. */ --muted: #6E6E6E; /* secondary/quiet text */ } body { font-family: 'Open Sans', Arial, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); line-height: 1.5; } a { color: var(--primary); text-decoration: none; } a:hover { color: var(--primary-dark); text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } /* ═══════════════════════════════════════════════════════════════════ HEADER — 3-ROW NEWEGG BUSINESS LAYOUT ═══════════════════════════════════════════════════════════════════ */ .site-branding img { height: 52px; width: auto; } .site-branding .custom-logo { height: 52px; width: auto; } .search-form-outer { flex: 1; display: flex; } .search-form-outer form { display: flex; width: 100%; } .search-cat-select { border: none; border-right: 1px solid #6E6E6E; padding: 0 12px; font-size: 13px; background: #F4EFEB; color: var(--text); outline: none; cursor: pointer; max-width: 53px; flex-shrink: 0; } .search-cat-select:focus { background: #E2E2E2; } .search-input-field { flex: 1; padding: 10px 16px; font-size: 14px; border: none; outline: none; font-family: inherit; min-width: 0; } .search-submit-btn { background: var(--accent); color: #FFFFFF; border: none; padding: 0 24px; cursor: pointer; font-size: 20px; display: flex; align-items: center; justify-content: center; border-radius: 0 3px 3px 0; transition: background 0.15s; } .search-submit-btn:hover { background: var(--accent-dark); } .search-submit-btn .dashicons { font-size: 22px; width: 22px; height: 22px; } /* ═══════════════════════════════════════════════════════════════════ HOMEPAGE ABOVE-FOLD: LEFT SIDEBAR + HERO SLIDER ═══════════════════════════════════════════════════════════════════ */ .homepage-above-fold { position: relative; max-width: 1280px; margin: 0 auto; display: flex; align-items: stretch; /* hero banner matches the sidebar's height, same as the reference design. */ gap: 9px; margin-top:10px; margin-bottom:10px; } /* Left Category Sidebar — fixed-width column. Submenus below open as an absolutely-positioned flyout (see .home-cat-sidebar__sublevel), so this box's own height never changes and the hero column never stretches. */ .home-cat-sidebar { position: relative; /* positioning context for the flyout submenus */ flex: 0 0 210px; width: 210px; background: var(--sidebar-bg); z-index: 20; overflow: visible; border-radius: 8px; align-self: flex-start; /* stop this from stretching to match a taller .home-hero-area — keeps the sidebar at its own natural (list-content) height even when the banner grows. */ } .home-cat-sidebar__list { padding: 0; margin: 0; } /* Quick links panel — Net Terms / E-Procurement / Quote Request / Tax Exemption. Sits directly below the category list inside the same sidebar column, visually set apart with a slightly lighter navy card and small accent-colored bullet dots (Newegg Business-style). */ .home-cat-sidebar__quicklinks { list-style: none; margin: 10px; padding: 12px 14px; background: #1A1A1A; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; } .home-cat-sidebar__quicklinks li + li { margin-top: 8px; } .home-cat-sidebar__quicklink { position: relative; display: block; padding-left: 16px; color: rgba(255,255,255,0.88); font-size: 12.5px; font-weight: 600; text-decoration: none; transition: color 0.15s; } .home-cat-sidebar__quicklink::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translateY(-50%); } .home-cat-sidebar__quicklink:hover { color: #FFFFFF; text-decoration: underline; } /* Quote Request button in this list — match the footer's "Request a Quote" text link (solid white, 13px) instead of the dimmer default quicklink color. Hover stays white/underline like its siblings; the footer's red hover (see button.js-request-quote rules further down) is scoped to .footer-menu/.footer-accordion__content so it never applies here. */ .home-cat-sidebar__quicklink.js-request-quote { color: #FFFFFF; font-size: 13px; background: #1A1A1A; } .home-cat-sidebar__quicklink.js-request-quote:hover { color: #FFFFFF; text-decoration: underline; } .home-cat-sidebar__row { display: flex; align-items: stretch; } .home-cat-sidebar__link { flex: 1 1 auto; display: block; padding: 6px 16px; color: rgba(255,255,255,0.88); font-size: 13px; text-decoration: none; transition: background 0.15s, color 0.15s; } .home-cat-sidebar__item > .home-cat-sidebar__row, .home-cat-sidebar__subitem > .home-cat-sidebar__row { border-bottom: 1px solid rgba(255,255,255,0.06); padding-top:7px; } /* Hover — a dark, slightly lighter-than-sidebar tone (matching the shop page's "By Category" widget), not white. Skipped on the currently expanded (active) row so it doesn't fight with the red active background. */ .home-cat-sidebar__item:not(.is-row-active) > .home-cat-sidebar__row .home-cat-sidebar__link:hover, .home-cat-sidebar__subitem:not(.is-row-active) > .home-cat-sidebar__row .home-cat-sidebar__link:hover { background: #262626; color: #FFFFFF; text-decoration: none; } /* Active / expanded row — red highlight, matching the reference "By Category" widget on the shop page. */ .home-cat-sidebar__item.is-row-active > .home-cat-sidebar__row, .home-cat-sidebar__subitem.is-row-active > .home-cat-sidebar__row { background: var(--accent); } .home-cat-sidebar__item.is-row-active > .home-cat-sidebar__row .home-cat-sidebar__link, .home-cat-sidebar__subitem.is-row-active > .home-cat-sidebar__row .home-cat-sidebar__link { color: #FFFFFF; font-weight: 700; text-decoration: none; } .home-cat-sidebar__item.is-row-active > .home-cat-sidebar__row .home-cat-sidebar__link:hover, .home-cat-sidebar__subitem.is-row-active > .home-cat-sidebar__row .home-cat-sidebar__link:hover { text-decoration: none; } .cat-toggle { flex: 0 0 auto; width: 34px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; cursor: pointer; } .cat-toggle__arrow { display: inline-block; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.65); transition: transform 0.15s ease, color 0.15s ease; } .home-cat-sidebar__row:hover .cat-toggle__arrow { color: #FFFFFF; } .is-row-active > .home-cat-sidebar__row .cat-toggle__arrow, .cat-toggle[aria-expanded="true"] .cat-toggle__arrow { color: #FFFFFF; } .cat-toggle[aria-expanded="true"] .cat-toggle__arrow { transform: rotate(90deg); } /* Submenus (both the top-level flyout and, nested inside it, the grandchild flyout) open as an absolutely-positioned panel anchored to the right of their row. Being position: absolute takes them out of normal document flow — expanding one never changes the sidebar's own height, so it can never stretch the hero banner sitting next to it. Only one flyout per level is open at a time (see JS), and both levels share the exact same slide-and-fade transition so drilling down feels consistent. */ .home-cat-sidebar__item, .home-cat-sidebar__subitem { position: relative; } .home-cat-sidebar__sublevel { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; left: 100%; width: 230px; max-height: none; overflow: visible; background: var(--sidebar-bg); box-shadow: 6px 0 18px rgba(0,0,0,0.35); opacity: 0; pointer-events: none; /* keeps it non-interactive while closed, without the hard on/off snap that `visibility` causes — that's what lets opacity + transform ease smoothly */ transform: translateX(-28px); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .home-cat-sidebar__sublevel.is-open { opacity: 1; pointer-events: auto; transform: translateX(0); } .home-cat-sidebar__link--level2 { padding-left: 16px; font-size: 12.5px; } /* Grandchild list (level 3) opens downward, in normal flow, inside the top-level flyout — it's the only level that doesn't cascade sideways. It still gets the same buttery fade + slide feel as the flyout above, just on the vertical axis, and JS animates max-height to the list's actual pixel height (instead of a big arbitrary cap) so short and long lists both ease in at the same, correctly-timed pace rather than snapping open. */ .home-cat-sidebar__sublevel--3 { position: static; left: auto; top: auto; width: auto; box-shadow: none; background: rgba(0,0,0,0.15); max-height: 0; overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .home-cat-sidebar__sublevel--3.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); } .home-cat-sidebar__sublevel--3 .home-cat-sidebar__link--level3 { padding-left: 32px; font-size: 12px; color: rgba(255,255,255,0.88); } .home-cat-sidebar__link--level3:hover { background: #262626; color: #FFFFFF; text-decoration: none; } /* ───────────────────────────────────────────────────────────────── HOVER-TO-OPEN — same flyouts, opened by mouse hover instead of a click. Re-uses the exact opacity/transform transitions already defined above on .home-cat-sidebar__sublevel and .home-cat-sidebar__sublevel--3, so hovering feels identical to the old click-triggered open state, just smoother/instant on mouse-in. This works because .home-cat-sidebar__sublevel(--3) is a DOM child of the row it belongs to — hovering anywhere inside the open flyout (including its own grandchild flyout) keeps the parent's :hover active, so nothing closes while the cursor is still over it. Left in place alongside the existing is-open/aria-expanded/click logic, which still matters for touch and keyboard users (no hover on touch devices) — the two don't conflict, they just both end up toggling the same opacity/transform styles. ───────────────────────────────────────────────────────────────── */ /* Level 2 flyout (sideways) */ .home-cat-sidebar__item:hover > .home-cat-sidebar__sublevel { opacity: 1; pointer-events: auto; transform: translateX(0); } /* Level 3 / grandchild flyout (downward, nested inside level 2) */ .home-cat-sidebar__subitem:hover > .home-cat-sidebar__sublevel--3 { max-height: 800px; /* generous cap so any realistic list opens fully; CSS can't animate to "auto", so a fixed value is used instead of the JS-measured exact height */ opacity: 1; pointer-events: auto; transform: translateY(0); } /* Arrow rotates/brightens on hover too, matching the active/expanded look */ .home-cat-sidebar__item:hover > .home-cat-sidebar__row .cat-toggle__arrow, .home-cat-sidebar__subitem:hover > .home-cat-sidebar__row .cat-toggle__arrow { color: #FFFFFF; transform: rotate(90deg); } /* Hero Area — stretches to match the sidebar's height (inherited from /* Hero Area — stretches to match the sidebar's height (inherited from .homepage-above-fold's align-items:stretch). The banner images are fixed at 1600x600, so getting full edge-to-edge coverage with zero black bars against a taller sidebar means the box has to be cropped to fit rather than shown at its natural size — see .hero-slide__bg below for how that crop is kept safe. */ .home-hero-area { flex: 1 1 0; min-width: 0; min-height: 620px; /* was implicitly set by the sidebar's height via align-items:stretch — now sized on its own. Raise/lower this number to taste; the blur backdrop + object-fit:contain below already handle any height with no crop/blur on the real image. */ display: flex; flex-direction: column; overflow: hidden; position: relative; border-radius:8px; background: var(--sidebar-bg); } /* Hero Slider — fills 100% of .home-hero-area's height, so it always exactly matches the sidebar with no leftover space and no flat black bar underneath. */ .hero-slider { position: relative; background: #0D0D0D; width: 100%; height: 100%; flex: 1 1 auto; overflow: hidden; border-radius: 8px; } .hero-slide { position: absolute; inset: 0; display: flex; align-items: center; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } .hero-slide.is-active { opacity: 1; pointer-events: auto; } .hero-slide > a, .hero-slide > .hero-slide__link { position: absolute; inset: 0; } /* Blurred backdrop layer — a softly blurred, darkened, zoomed-in copy of the SAME banner image, stretched to fully cover the box behind the main image. This is the standard fix for a fixed-ratio image (1600x600) that has to sit in a taller box (matching the sidebar) without being cropped or leaving flat black space: the surrounding area is filled with real pixels from the image itself, just softened, instead of empty color. The blur/scale only ever apply to this backdrop copy — the sharp, uncropped image on top (.hero-slide__bg below) is completely untouched. */ .hero-slide__bg-blur { position: absolute; inset: -30px; /* overscans past the edges so the blur's soft falloff never shows a hard/visible boundary */ background-size: cover; background-position: center; filter: blur(35px) brightness(0.55) saturate(1.15); transform: scale(1.15); /* extra headroom so blurred edges are never visible */ z-index: 0; } /* Main banner image — shown with object-fit:contain so the ENTIRE 1600x600 image is always visible: no cropping, no distortion, and never scaled up past its native resolution (so never blurry). It just sits centered over the blurred backdrop above, which does the work of filling the rest of the box. */ .hero-slide__bg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; } .hero-slide__content { position: relative; z-index: 2; padding: 32px 40px; color: #FFFFFF; max-width: 520px; } .hero-slide__eyebrow { font-size: 13px; color: var(--accent); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; } .hero-slide__title { font-size: 30px; font-weight: 900; line-height: 1.15; text-transform: uppercase; margin-bottom: 10px; } .hero-slide__title em { color: var(--accent); font-style: normal; } .hero-slide__sub { font-size: 15px; color: rgba(255,255,255,0.8); margin-bottom: 24px; } .hero-slide__cta { display: inline-block; background: var(--accent); color: #FFFFFF !important; padding: 11px 28px; font-size: 14px; font-weight: 700; border-radius: 3px; text-decoration: none !important; transition: background 0.15s; } .hero-slide__cta:hover { background: var(--accent-dark); } .hero-slider__arrow { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.45); color: #FFFFFF; border: none; width: 38px; height: 56px; font-size: 22px; cursor: pointer; z-index: 5; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .hero-slider__arrow:hover { background: rgba(0,0,0,0.75); } .hero-slider__arrow--prev { left: 0; border-radius: 0 4px 4px 0; } .hero-slider__arrow--next { right: 0; border-radius: 4px 0 0 4px; } .hero-slider__dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 5; } .hero-slider__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.35); border: none; cursor: pointer; padding: 0; transition: background 0.2s; } .hero-slider__dot.is-active { background: var(--accent); } /* ── Mobile: kill the absolute sidebar + its 219px offset ────────── Nothing in this file ever reset these for small screens, which is what was pushing the hero/category grid/carousels sideways. Mobile already has its own hamburger + category drawer, so this sidebar is just hidden here rather than reflowed. */ @media (max-width: 991px) { .homepage-above-fold { display: block; max-width: 100%; } .home-cat-sidebar { display: none; } .home-hero-area { display: block; min-height: 0; /* cancel the desktop min-height — mobile sizes the banner via .hero-slider's aspect-ratio below instead. */ margin: 7px; margin-top: 15px; padding: 10px; /* margin around the banner, via padding on the wrapper so it doesn't interact with the slider's own aspect-ratio box */ background: var(--sidebar-bg); } .hero-slider { flex: none; height: auto; min-height: 0; aspect-ratio: 8 / 3; margin: 0; border-radius: 0; /* flat corners */ } .hero-slide__bg { object-fit: contain; } /* full image, never cropped, on mobile too */ .hero-slide__content { padding: 24px 20px; max-width: 100%; } .hero-slide__title { font-size: 22px; } } @media (max-width: 560px) { .hero-slide__content { padding: 20px 18px; } } /* Promo Mini Banners — now a standalone full-width section below .homepage-above-fold (see front-page.php), spanning under both the sidebar and hero columns above it, matching the reference layout. Uses the same 1280px container convention as the other homepage sections. */ .promo-mini-banners-section { max-width: 1280px; margin: 0 auto; } .promo-mini-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; background: #FFFFFF; } .promo-mini-banner { background: var(--sidebar-bg); padding: 18px 20px; display: flex; align-items: center; gap: 14px; cursor: pointer; transition: background 0.15s; min-height: 90px; text-decoration: none !important; border-radius: 8px; overflow: hidden; } .promo-mini-banner:hover { background: #0D0D0D; text-decoration: none !important; } .promo-mini-banner__text strong { display: block; font-size: 13px; color: #FFFFFF; font-weight: 700; margin-bottom: 4px; } .promo-mini-banner__text span { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.4; } .promo-mini-banner__icon { font-size: 28px; flex-shrink: 0; } .promo-mini-banner__icon img { width: 44px; height: 44px; object-fit: contain; display: block; } .promo-mini-banner__cta { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--accent); font-weight: 600; } /* Image-only variant — a plain banner image, sized to fit without cropping or stretching. */ .promo-mini-banner--image-only { display: flex; align-items: center; justify-content: center; overflow: hidden; max-height: 90px; padding: 0; background: #0D0D0D; } .promo-mini-banner--image-only img { width: auto; height: 90px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; } /* Must come after the base .promo-mini-banners / .promo-mini-banner rules above — same specificity, so source order decides the winner. Some of these overrides used to live in the earlier 991px block near the top of the file, where the later, unconditional base rules (padding, border- radius, grid-template-columns) always won and silently cancelled them out. Keeping every mobile override for this component here, after the base rules, is what actually makes them apply. */ @media (max-width: 991px) { .promo-mini-banners { grid-template-columns: 1fr; } .promo-mini-banners-section { padding: 0 0px 10px; /* left/right/bottom margin; top margin comes from the hero area's own bottom padding above it */ margin:7px; } .promo-mini-banners { gap: 10px; padding: 0; } .promo-mini-banner, .promo-mini-banner--image-only { border-radius: 8px; } .promo-mini-banner--image-only { max-height: none; border-radius:8px; } /* Was width:100%, which force-upscaled the (small, ~401x106px) source images past their native resolution on phone screens — that's what was reported as "blurry / not HD". object-fit:contain + auto width renders at native size (or smaller, if the screen is narrower), never larger, so it stays sharp. The dark background (set on .promo-mini-banner--image-only above) fills any leftover space. */ .promo-mini-banner--image-only img { width: auto; max-width: 100%; height: auto; object-fit: contain; } .wc-braintree-blocks-paymentMethod__label { flex-wrap: nowrap !important; } } /* ═══════════════════════════════════════════════════════════════════ CATEGORY SHOWCASE — CLEAN PRODUCT IMAGES No black/white circular frame. Only a soft box shadow appears on hover. ═══════════════════════════════════════════════════════════════════ */ .category-showcase { background: white; padding: 28px 0; } .category-showcase__inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; } .category-showcase__header { text-align: center; margin-bottom: 28px; } .category-showcase__title { font-size: 20px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: #000000; margin-bottom: 8px; } .category-showcase__subtitle { font-size: 13px; color: rgba(0, 0, 0, 0.65); max-width: 560px; margin: 0 auto; line-height: 1.5; } .category-showcase__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .category-showcase__item { text-align: center; } .category-showcase__item a { display: block; text-decoration: none !important; } /* Clean image area: no circular border, no circular background, no clipping. */ .cat-circle { width: 150px; height: 150px; border-radius: 0 !important; border: none !important; background: transparent !important; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; overflow: visible !important; box-shadow: none !important; transition: transform 0.25s ease; } /* Hover: NO square shadow on the container. Shadow follows the image. */ .category-showcase__item a:hover .cat-circle { border: none !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; } .cat-circle img { width: 150px; height: 150px; object-fit: contain; display: block; border: none !important; border-radius: 0 !important; background: transparent !important; filter: none; transition: filter 0.25s ease; } /* Only the product image gets a hover shadow — never a white square. */ .category-showcase__item a:hover .cat-circle img { filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.20)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.1)); } .cat-circle .cat-icon { font-size: 52px; line-height: 1; } .cat-name { font-size: 12px; font-weight: 600; color: #000000; line-height: 1.3; transition: color 0.15s; } @media (max-width: 991px) { .category-showcase__grid { grid-template-columns: repeat(3, 1fr); gap: 20px 12px; } .cat-circle { width: 100px; height: 100px; } .cat-circle img { width: 72px; height: 72px; } .cat-circle .cat-icon { font-size: 36px; } } @media (max-width: 480px) { .category-showcase__grid { grid-template-columns: repeat(2, 1fr); } } /* Dot pagination for the phone swipe carousels (Who We Serve, Shop Our Wide Range) — replaces the native scrollbar line. Hidden by default since those sections are a normal, non-scrolling grid above the 768px breakpoint; the carousel media query below turns it on. */ .carousel-dots { display: none; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; } .carousel-dots__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.18); border: none; padding: 0; cursor: pointer; transition: background .2s ease, width .2s ease, border-radius .2s ease; } .carousel-dots__dot.is-active { background: var(--primary); width: 16px; border-radius: 3px; } .who-we-serve .carousel-dots__dot { background: rgba(255,255,255,0.35); } .who-we-serve .carousel-dots__dot.is-active { background: #FFFFFF; } @media (max-width: 768px) { .carousel-dots { display: flex; } } /* (Who We Serve, Shop Our Wide Range) — replaces the native scrollbar line. Hidden by default since those sections are a normal, non-scrolling grid above the 768px breakpoint; the carousel media query below turns it on. */ .carousel-dots { display: none; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; } .carousel-dots__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(0,0,0,0.18); border: none; padding: 0; cursor: pointer; transition: background .2s ease, width .2s ease, border-radius .2s ease; } .carousel-dots__dot.is-active { background: var(--primary); width: 16px; border-radius: 3px; } .who-we-serve .carousel-dots__dot { background: rgba(255,255,255,0.35); } .who-we-serve .carousel-dots__dot.is-active { background: #FFFFFF; } @media (max-width: 768px) { .carousel-dots { display: flex; } } /* ═══════════════════════════════════════════════════════════════════ WHO WE SERVE ═══════════════════════════════════════════════════════════════════ */ .who-we-serve { background: var(--navy); padding: 64px 16px; } .who-we-serve__inner { max-width: 1280px; margin: 0 auto; } .who-we-serve__eyebrow { color: var(--primary); font-size: 13px; font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 1.5px; margin: 0 0 10px; } .who-we-serve__title { color: #FFFFFF; font-size: 36px; font-weight: 800; text-align: center; margin: 0 0 14px; letter-spacing: 0.2px; } .who-we-serve__lead { color: rgba(255,255,255,0.65); font-size: 15px; font-weight: 400; text-align: center; max-width: 560px; margin: 0 auto 40px; line-height: 1.5; } .who-we-serve__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; } .who-we-serve__card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 28px 18px; text-align: center; transition: background 0.2s, transform 0.2s, border-color 0.2s; display: block; text-decoration: none; } .who-we-serve__card:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.22); transform: translateY(-2px); text-decoration: none; } .who-we-serve__icon { width: 40px; height: 40px; object-fit: contain; margin: 0 auto 16px; display: block; filter: brightness(0) invert(1); } .who-we-serve__divider { display: block; width: 28px; height: 2px; background: var(--primary); margin: 0 auto 16px; border-radius: 1px; } .who-we-serve__card h3 { font-size: 14px; font-weight: 700; color: #FFFFFF; margin: 0 0 6px; } .who-we-serve__subtitle { font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.4; } @media (max-width: 991px) { .who-we-serve__grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .who-we-serve__grid { grid-template-columns: repeat(2, 1fr); } .who-we-serve__title { font-size: 26px; } } /* ═══════════════════════════════════════════════════════════════════ VOLUME PRICING / BULK QUOTE ═══════════════════════════════════════════════════════════════════ */ .volume-pricing { background: var(--bg); padding: 48px 16px; } .volume-pricing__card { max-width: 1280px; margin: 0 auto; background: #FFFFFF; border-left: 4px solid var(--primary); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); padding: 40px 48px; display: flex; align-items: center; gap: 40px; } .volume-pricing__content { flex: 1; min-width: 0; } .volume-pricing__eyebrow { display: block; color: var(--primary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .volume-pricing__title { font-size: 30px; font-weight: 800; line-height: 1.2; color: var(--text); margin: 0 0 14px; } .volume-pricing__desc { font-size: 14px; color: var(--text-light); line-height: 1.6; margin: 0 0 22px; } .volume-pricing__features { display: flex; flex-wrap: wrap; gap: 28px; } .volume-pricing__feature { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text); } .volume-pricing__feature-icon { width: 22px; height: 22px; color: var(--text); flex-shrink: 0; } .volume-pricing__divider { width: 1px; align-self: stretch; background: var(--border); flex-shrink: 0; } .volume-pricing__cta { flex-shrink: 0; width: 260px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; } .volume-pricing__quote-btn { width: 100%; background: var(--primary); color: #FFFFFF; border: none; border-radius: 4px; padding: 14px 20px; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.2s; } .volume-pricing__quote-btn:hover { background: var(--primary-dark); } .volume-pricing__quote-btn-icon { width: 18px; height: 18px; flex-shrink: 0; } .volume-pricing__talk-link { font-size: 14px; font-weight: 700; color: var(--text); text-decoration: underline; } .volume-pricing__talk-link:hover { color: var(--primary); } .volume-pricing__note { font-size: 12px; color: var(--text-light); margin: 0; } @media (max-width: 900px) { .volume-pricing__card { flex-direction: column; padding: 32px 24px; } .volume-pricing__divider { display: none; } .volume-pricing__title { font-size: 24px; } .volume-pricing__cta { width: 100%; } .volume-pricing__features { justify-content: center; } } /* ═══════════════════════════════════════════════════════════════════ PURCHASING RESOURCES ═══════════════════════════════════════════════════════════════════ */ .purchasing-resources { background: var(--bg); padding: 44px 16px; border-bottom: 1px solid var(--border); } .purchasing-resources__inner { max-width: 1280px; margin: 0 auto; } .purchasing-resources__title { color: var(--text); font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 28px; text-transform: uppercase; letter-spacing: 0.5px; } .purchasing-resources__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .purchasing-resources__card { background: var(--white); border: 1px solid var(--border); border-radius: 8px; padding: 28px 22px; text-align: center; } .purchasing-resources__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: var(--white); font-size: 20px; margin-bottom: 14px; } .purchasing-resources__card h3 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 8px; } .purchasing-resources__card p { font-size: 13.5px; color: var(--text-light); line-height: 1.5; margin: 0 0 16px; } @media (max-width: 768px) { .purchasing-resources__grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ SERVICES STRIP ═══════════════════════════════════════════════════════════════════ */ .services-strip { background: #6d0b0b; padding: 20px 16px; } .services-strip__inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: center; } .service-block { display: flex; align-items: center; gap: 12px; color: #FFFFFF; padding: 8px 0; border-right: 1px solid rgba(255,255,255,0.2); } .service-block:last-child { border-right: none; } .service-block__icon { font-size: 28px; width: 28px; height: 28px; flex-shrink: 0; color: #FFFFFF; /* monochrome white — was colorful emoji, read as "kiddish" */ } .service-block__title { font-size: 13px; font-weight: 700; } .service-block__desc { font-size: 11px; opacity: 0.8; margin-top: 2px; } @media (max-width: 768px) { .services-strip__inner { grid-template-columns: 1fr 1fr; } .service-block { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 12px; } } @media (max-width: 480px) { .services-strip__inner { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════════ FEATURED PRODUCTS ═══════════════════════════════════════════════════════════════════ */ .home-featured { padding: 32px 16px; background: var(--bg); } .home-featured__inner { max-width: 1280px; margin: 0 auto; } .section-title { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 3px solid var(--primary); } /* ═══════════════════════════════════════════════════════════════════ PRODUCT CARDS ═══════════════════════════════════════════════════════════════════ */ .product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 1024px) { .product-grid { grid-template-columns: repeat(3, 1fr); } .archive-layout { grid-template-columns: 1fr; } .archive-sidebar { order: 2; } } @media (max-width: 640px) { .product-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } } .product-card { position: relative; background: #FFFFFF; border: 1px solid var(--border); border-radius: 3px; display: flex; flex-direction: column; transition: box-shadow 0.2s, border-color 0.2s; } .product-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12); border-color: #6E6E6E; } /* Compare checkbox — main product-grid cards (content-product.php). Lives in .product-card__footer, below the Add to Cart / Request Quote button, instead of overlaying the image, so it no longer fights the wishlist heart for the top-right corner. Scoped to .product-card__footer so this only affects cards where Compare is actually placed there; the homepage carousel's .dcs-card__compare (still an image overlay) is untouched below. !important beats the old absolute-positioning rule that used to apply here. */ .product-card__footer .product-card__compare { position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; z-index: auto !important; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px !important; background: none; border: none; border-radius: 0; padding: 0; font-size: 12.5px; font-weight: 500; color: var(--text-light); cursor: pointer; user-select: none; } .product-card__footer .product-card__compare input { margin: 0; width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; } .product-card__footer .product-card__compare:hover { color: var(--text); } .product-card__footer .product-card__compare:has(input:checked) { background: none; border-color: transparent; color: var(--accent); } /* Extra-specific backup: guarantees the static/below placement wins even if another stylesheet loaded after this one re-declares the overlay position at equal specificity. */ .product-grid .product-card .product-card__footer .product-card__compare { position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; z-index: auto !important; display: flex !important; align-self: flex-start !important; flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; margin: 10px auto 0 0 !important; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; } /* Base/overlay version of Compare — still used as-is by the homepage carousel (product-carousel.php), whose .dcs-card__compare just overrides top/bottom below to sit at the bottom-right of the image instead of the top-right. content-product.php no longer uses this overlay position (see .product-card__footer .product-card__compare above, which wins there via higher specificity). */ .product-card__compare { position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; bottom: auto !important; z-index: 6 !important; display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 3px; padding: 4px 8px; font-size: 11px; font-weight: 600; color: var(--text-light); cursor: pointer; user-select: none; } .product-card__compare:hover { color: var(--text); border-color: #6E6E6E; } .product-card__compare input { margin: 0; cursor: pointer; } .product-card__compare:has(input:checked) { background: var(--primary); border-color: var(--primary); color: #FFFFFF; } /* Carousel cards (.dcs-card, product-carousel.php): Compare now lives in .dcs-card__body, right after the Request Quote / Add to Cart button, instead of overlaying the image — same "below the button" placement used on the main product-grid cards, so Compare and the wishlist heart never fight for the same corner. Needs higher specificity than the base .product-card__compare overlay rule above (0,1,0), which this beats at (0,1,0)+!important via the dedicated --below modifier class added in the markup. */ .dcs-card__compare--below { position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; z-index: auto !important; display: inline-flex; align-items: center; gap: 6px; margin-top: 0; background: none; border: none; border-radius: 0; padding: 0; font-size: 12.5px; font-weight: 500; color: var(--text-light); cursor: pointer; user-select: none; } .dcs-card__compare--below input { margin: 0; width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; } .dcs-card__compare--below:hover { color: var(--text); } .dcs-card__compare--below:has(input:checked) { background: none; border-color: transparent; color: var(--accent); } /* Force Compare below the Request Quote / Add to Cart button and left-aligned, instead of stretching full-width / sharing the button's row. The carousel's .dcs-card__body flex container was stretching this element (align-items: stretch), which pushed it into the button's row and made it span the card's full width. align-self: flex-start stops the stretch + left-aligns it; the explicit margin-top gives it its own line below the button. */ .dcs-carousel .dcs-card .dcs-card__body .dcs-card__compare--below { position: static !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; z-index: auto !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; align-self: flex-start !important; flex: 0 0 auto !important; width: auto !important; max-width: max-content !important; margin: 8px auto 0 0 !important; background: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; } /* Floating "Compare (n)" bar, shown once 2+ products are selected */ .compare-bar { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120%); z-index: 2000; display: flex; align-items: center; gap: 16px; background: var(--sidebar, #0D0D0D); color: #FFFFFF; padding: 12px 20px; border-radius: 8px; box-shadow: var(--shadow); transition: transform .2s ease; } .compare-bar.is-visible { transform: translate(-50%, 0); } .compare-bar__count { font-size: 13px; font-weight: 700; white-space: nowrap; } .compare-bar__clear { background: none; border: none; color: rgba(255,255,255,.7); font-size: 12px; cursor: pointer; text-decoration: underline; } .compare-bar__clear:hover { color: #FFFFFF; } .compare-bar__go { background: var(--accent); color: #FFFFFF; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 4px; text-decoration: none; white-space: nowrap; } .compare-bar__go:hover { background: var(--accent-dark); color: #FFFFFF; } @media (max-width: 480px) { .compare-bar { left: 12px; right: 12px; transform: translateY(120%); width: auto; } .compare-bar.is-visible { transform: translateY(0); } } .product-card__media-wrap { position: relative; } /* Wishlist heart (rendered by dcsupplies_wishlist_button() — its own markup/class lives in functions.php, not this stylesheet) is the first element printed inside .product-card__media-wrap, before the image link. Pin it to the top-right of the image regardless of whatever default position its own CSS gives it, so it no longer overlaps the middle/bottom of the picture. */ .product-card__media-wrap > *:first-child:not(.product-card__image-wrap) { position: absolute !important; top: 8px !important; right: 8px !important; bottom: auto !important; left: auto !important; z-index: 5 !important; } /* Same fix for the carousel cards (.dcs-card, product-carousel.php) — .dcs-card__media-wrap had no position:relative of its own, so the wishlist heart's absolute positioning was resolving against the whole card (article.dcs-card) instead of just the image, landing it near the bottom of the image instead of the top-right corner. */ .dcs-card__media-wrap { position: relative; } .dcs-card__media-wrap > *:first-child:not(.dcs-card__media) { position: absolute !important; top: 8px !important; right: 8px !important; bottom: auto !important; left: auto !important; z-index: 5 !important; } /* Wishlist heart, both card types: strip the circular backdrop (white/ gray disc behind the icon) so just the heart glyph shows — whatever background/border/shadow dcsupplies_wishlist_button()'s own CSS gives it by default. */ .product-card__media-wrap > *:first-child:not(.product-card__image-wrap), .dcs-card__media-wrap > *:first-child:not(.dcs-card__media) { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; } .product-card__image-wrap { position: relative; display: flex; align-items: center; justify-content: center; height: 180px; padding: 12px; border-bottom: 1px solid #E2E2E2; background: #FCFAF8; } .product-card__image-wrap img { max-width: 100%; max-height: 171px; width: auto; height: auto; object-fit: contain; object-position: center; margin: 0 auto; display: block; } /* Discount badge on the product image (rendered by content-product.php) had no positioning rules at all, so it was rendering as a normal flex item next to the image instead of floating over it — the pair then centered together, which is what made the image itself look off-center/shifted whenever a badge was present. */ .product-card__discount-badge { position: absolute; top: 8px; left: 8px; z-index: 3; background: #c53030; color: #fff; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; } .product-card__body { padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 5px; } .product-card__title { font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 4px; } .product-card__title a { color: var(--text); text-decoration: none; } .product-card__title a:hover { color: var(--primary); text-decoration: none; } /* Price colors/sizes matched to the front page and Outlet page: current price in the brand red, crossed-out original price in near-black and smaller. get_price_html() only wraps in / when a sale is active, so the plain rule below covers non-sale prices too. */ .product-card__price, .product-card__price .woocommerce-Price-amount { color: #A91E22; font-weight: 700; font-size: 17px; } .product-card__price del, .product-card__price del .woocommerce-Price-amount { color: #12181E !important; text-decoration: line-through; font-weight: 400; font-size: 13px; } .product-card__price ins, .product-card__price ins .woocommerce-Price-amount { color: #A91E22 !important; text-decoration: none; font-weight: 700; font-size: 17px; } .product-card__sku { font-size: 11px; color: var(--text-light); } .product-card__stock-in { font-size: 12px; color: #2a7a2a; font-weight: 600; } .product-card__stock-out { font-size: 12px; color: var(--red); } .product-card__footer { margin-top: auto; padding-top: 8px; } .product-card__footer .button, .product-card__footer a.button { width: 100%; text-align: center; font-size: 13px; } /* Add to Cart was inheriting the bigger global .button padding (9px 20px) while Request Quote had no explicit padding of its own. Give both the same compact padding so they match. */ .product-card__footer .button, .product-card__footer a.button, .product-card__get-quote, .product-card__add-to-cart { padding: 8px 14px; } /* Force identical icon+label layout on both buttons — flex row, centered, fixed-size icon with a small consistent gap. Without this, Add to Cart was falling back to the browser's default button content box (which gives the SVG a large intrinsic size and shoves the label away from it), while Request Quote only looked right because its separate appearance:none reset (further down this file) happened to collapse that extra space. Setting this explicitly here means neither button depends on that side effect. */ .product-card__footer .product-card__get-quote, .product-card__footer .add_to_cart_button, .product-card__footer .product-card__add-to-cart { display: flex; align-items: center; justify-content: center; gap: 6px; -webkit-appearance: none; appearance: none; } .product-card__footer .product-card__get-quote svg, .product-card__footer .add_to_cart_button svg, .product-card__footer .product-card__add-to-cart svg { width: 14px; height: 14px; flex: 0 0 auto; } /* Request Quote — outlined (white bg, #9B1E22 border/text) so it reads as visually distinct from the solid Add to Cart button. Border adds 2px on each side, so padding drops to 6px (vs. 8px on the borderless solid button) to keep both buttons the same height. */ .product-card__footer .product-card__get-quote { background: #FFFFFF; color: #9B1E22 !important; border: 2px solid #9B1E22; border-radius: 8px; padding: 6px 14px; } .product-card__footer .product-card__get-quote:hover { background: #9B1E22; color: #FFFFFF !important; } /* Add to Cart / View Product — solid #9B1E22, same look as the default .button style. Targets both the real WooCommerce Add to Cart link (.add_to_cart_button — the class WC actually renders; it doesn't carry .product-card__add-to-cart) and the View Product fallback link, which does carry .product-card__add-to-cart. Explicit rule (rather than relying purely on the base .button selector) so this stays solid even if Request Quote's outline rule above changes again later. Border is the same color as the background by default (invisible) so the box doesn't change size when it becomes visible on hover — box-sizing: border-box handles the rest. */ .product-card__footer .add_to_cart_button, .product-card__footer .product-card__add-to-cart { width: 100%; box-sizing: border-box; background: #9B1E22; color: #FFFFFF !important; border: 2px solid #9B1E22; border-radius: 8px; padding: 6px 14px; } .product-card__footer .add_to_cart_button:hover, .product-card__footer .product-card__add-to-cart:hover { background: #FFFFFF; color: #9B1E22 !important; border: 2px solid #9B1E22; } /* Same hover treatment for the homepage carousel's Add to Cart button (product-carousel.php: .dcs-btn--accent.add_to_cart_button) — white background, #9B1E22 border, #9B1E22 text. box-shadow (not border) so it doesn't disturb the button's box size / the base .dcs-btn padding defined outside this stylesheet. */ .dcs-card .add_to_cart_button:hover { background: #FFFFFF !important; color: #9B1E22 !important; border-radius: 8px; box-shadow: inset 0 0 0 2px #9B1E22; } /* ═══════════════════════════════════════════════════════════════════ ARCHIVE / CATEGORY PAGE ═══════════════════════════════════════════════════════════════════ */ .archive-layout { display: grid; grid-template-columns: 240px 1fr; gap: 20px; max-width: 1280px; margin: 20px auto; padding: 0 16px; } .archive-sidebar { align-self: start; } .filter-sidebar { background: #FFFFFF; border: 1px solid var(--border); border-radius: 3px; padding: 16px; } .filter-sidebar .widget-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .filter-sidebar ul li { margin-bottom: 6px; font-size: 13px; } .filter-sidebar ul li a { color: var(--text); } .filter-sidebar ul li a:hover { color: var(--primary); } .archive-header { background: #FFFFFF; border: 1px solid var(--border); border-radius: 3px; padding: 16px 16px 12px 16px; margin-bottom: 16px; display: flex; align-items: center; justify-content: space-between; gap: 2px; flex-wrap: wrap; } .archive-title { font-size: 18px; font-weight: 700; } .archive-count { font-size: 13px; color: var(--text-light); } .woocommerce-ordering select { border: 1px solid var(--border); padding: 6px 10px; font-size: 13px; border-radius: 3px; } .no-results { background: #FFFFFF; border: 1px solid var(--border); border-radius: 3px; padding: 48px; text-align: center; } .no-results p { margin-bottom: 16px; color: var(--text-light); } /* ═══════════════════════════════════════════════════════════════════ SINGLE PRODUCT ═══════════════════════════════════════════════════════════════════ */ .single-product-wrap { max-width: 1280px; margin: 20px auto; padding: 0 16px; } .single-product-layout { display: grid; /* grid-template-columns: 1fr 1fr; */ gap: 32px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 3px; padding: 24px; margin-bottom: 20px; background: #FCFAF887; } .product-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; } .product-sku-line { font-size: 12px; color: var(--text-light); margin-bottom: 8px; } .product-price { font-size: 28px; font-weight: 700; color: var(--red); margin-bottom: 12px; } .product-short-description { font-size: 13px; color: var(--text-light); margin-top: 16px; line-height: 1.6; } .single-product__related { background: #FFFFFF; border: 1px solid var(--border); border-radius: 3px; padding: 20px; } /* ═══════════════════════════════════════════════════════════════════ PAGINATION ═══════════════════════════════════════════════════════════════════ */ .nav-links { display: flex; gap: 4px; margin-top: 24px; justify-content: center; } .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border: 1px solid var(--border); background: #FFFFFF; color: var(--text); font-size: 13px; border-radius: 2px; text-decoration: none; padding: 0 8px; } .page-numbers.current { background: var(--primary); color: #FFFFFF; border-color: var(--primary); } .page-numbers:hover:not(.current) { border-color: var(--primary); color: var(--primary); text-decoration: none; } /* ═══════════════════════════════════════════════════════════════════ FOOTER Note: .dcs-footer__grid, .dcs-subscribe, .dcs-footer__contact, .dcs-footer__social, and .dcs-footer__desc are already fully styled in main.css (incl. responsive breakpoints) — not duplicated here. This file only covers what main.css doesn't: the wrapper, the old .footer-col/.footer-menu naming footer.php still uses, and logo size. ═══════════════════════════════════════════════════════════════════ */ /* ─── Newsletter banner (sits above the footer) ─── */ /* Newsletter banner: a standalone rounded card with breathing room above and below, instead of a full-bleed bar fused directly onto the footer. */ .footer-newsletter { background: transparent; padding: 48px 16px; } .footer-newsletter__inner { max-width: 1280px; margin: 0 auto; background: var(--sidebar, #0D0D0D); border-radius: 16px; padding: 36px 44px; box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,.08)); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-newsletter__text h3 { color: #FFFFFF; font-size: 20px; font-weight: 800; margin: 0 0 6px; } .footer-newsletter__text p { color: #C9C9C9; font-size: 13.5px; margin: 0; } .footer-newsletter__form { flex: 0 0 380px; max-width: 420px; } .footer-newsletter__form.dcs-footer__subscribe form { max-width: 100%; } @media (max-width: 640px) { .footer-newsletter { padding: 32px 16px; } .footer-newsletter__inner { flex-direction: column; align-items: flex-start; padding: 28px 24px; border-radius: 12px; } .footer-newsletter__form { flex: 1 1 100%; max-width: 100%; } } .site-footer { background: var(--footer-bg); color: #E2E2E2; } .site-footer__inner { padding: 40px 0 0; } .dcs-footer__grid { max-width: 1280px; margin: 0 auto; padding: 0 16px; } .footer-menu__static { color: #C9C9C9; font-size: 13px; line-height: 1.5; } /* ─── Bottom bar: legal text left, social icons right ─── */ .dcs-footer__bottom { max-width: 1280px; margin: 32px auto 0; padding: 20px 16px; border-top: 1px solid #0D0D0D; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dcs-footer__legal { font-size: 12px; color: #C9C9C9; margin: 0; } .dcs-footer__legal a { color: #C9C9C9; text-decoration: none; } .dcs-footer__legal a:hover { color: var(--accent); text-decoration: underline; } @media (max-width: 640px) { .dcs-footer__bottom { flex-direction: column; text-align: center; justify-content: center; } } .dcs-footer__brand { display: flex; flex-direction: column; gap: 14px; } /* White box behind the footer logo */ .dcs-footer__logo { display: inline-flex; align-items: center; justify-content: center; width: fit-content; background: #FFFFFF; border-radius: 12px; padding: 10px 18px; box-shadow: 0 6px 18px rgba(0,0,0,.25); } .dcs-footer__brand .dcs-footer__logo img { height: 40px; width: auto; display: block; } .footer-col h4 { color: #FFFFFF; font-size: 14px; font-weight: 800; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #0D0D0D; text-transform: uppercase; letter-spacing: 0.8px; } .footer-menu li { margin-bottom: 8px; } .footer-menu a { color: #FFFFFF; font-size: 13px; } .footer-menu a:hover { color: var(--accent); text-decoration: none; } .footer-trust { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: #FFFFFF; } .footer-trust span::before { content: '✔ '; color: #4caf50; } .dcs-footer__subscribe h4 { color: #FFFFFF; font-size: 14px; font-weight: 700; margin-bottom: 6px; } .dcs-footer__subscribe > p { color: #FFFFFF; font-size: 13px; margin-bottom: 14px; } .site-info { border-top: 1px solid #0D0D0D; padding: 16px; text-align: center; font-size: 12px; color: #FFFFFF; max-width: 1280px; margin: 0 auto; } .site-info a { color: #FFFFFF; text-decoration: none; } .site-info a:hover { color: var(--accent); text-decoration: underline; } /* ═══════════════════════════════════════════════════════════════════ WOOCOMMERCE OVERRIDES ═══════════════════════════════════════════════════════════════════ */ .woocommerce-message, .woocommerce-info { border-top-color: var(--primary); background: #F0F0F0; padding: 12px 16px; font-size: 13px; margin-bottom: 16px; } .woocommerce-breadcrumb { font-size: 12px; color: var(--text-light); padding: 8px 16px; max-width: 1280px; margin: 0 auto; } .woocommerce-breadcrumb a { color: var(--primary); } .button, button.button, input[type="submit"] { display: inline-block; padding: 9px 20px; background: var(--accent); color: #FFFFFF !important; border: none; cursor: pointer; font-size: 13px; font-weight: 600; border-radius: 2px; text-decoration: none !important; transition: background 0.15s; font-family: inherit; } .button:hover { background: var(--accent-dark); text-decoration: none !important; } .button.button-primary, input[type="submit"] { background: var(--primary); } .button.button-primary:hover { background: var(--primary-dark); } /*========================================================= PREMIUM MOBILE FOOTER =========================================================*/ .mobile-footer{ display:none; background:#0D0D0D; color:#FFFFFF; padding:42px 24px 30px; } /*------------------------------*/ .mobile-footer__brand{ text-align:center; margin-bottom:36px; } .mobile-footer__brand img{ width:150px; height:auto; } .mobile-footer__brand p{ margin:16px auto; max-width:260px; color:#6E6E6E; font-size:14px; line-height:1.6; } .mobile-footer__phone{ display:inline-flex; align-items:center; gap:8px; color:#9B1E22; text-decoration:none; font-weight:600; font-size:16px; } /*------------------------------*/ .mobile-footer__nav{ border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); } .mobile-footer__nav a{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; color:#FFFFFF; text-decoration:none; font-size:15px; transition:.2s; border-bottom:1px solid rgba(255,255,255,.05); } .mobile-footer__nav a:last-child{ border-bottom:none; } .mobile-footer__nav a:hover{ color:#9B1E22; } .mobile-footer__nav .dashicons{ font-size:18px; } /*------------------------------*/ .mobile-footer__trust{ padding:32px 0; } .mobile-footer__trust h4{ margin-bottom:18px; font-size:16px; color:#FFFFFF; } .mobile-footer__trust ul{ list-style:none; margin:0; padding:0; } .mobile-footer__trust li{ position:relative; padding-left:22px; margin-bottom:14px; color:#E2E2E2; font-size:14px; } .mobile-footer__trust li:before{ content:"✓"; position:absolute; left:0; color:#4CAF50; font-weight:bold; } /*------------------------------*/ .mobile-footer__legal{ border-top:1px solid rgba(255,255,255,.08); margin-top:24px; padding-top:24px; display:flex; justify-content:center; flex-wrap:wrap; gap:18px; } .mobile-footer__legal a{ color:#6E6E6E; text-decoration:none; font-size:14px; } .mobile-footer__legal a:hover{ color:#FFFFFF; } /*------------------------------*/ .mobile-footer__copyright{ margin-top:22px; text-align:center; color:#6E6E6E; font-size:13px; } /*=========================================================*/ .desktop-footer{ display:block; } .mobile-footer{ display:none; } @media(max-width:1024px){ .desktop-footer{ display:none; } .mobile-footer{ display:block; } /*----------------------------------- Accordion -----------------------------------*/ .footer-accordion{ border-bottom:1px solid rgba(255,255,255,.08); } .footer-accordion__button{ width:100%; background:none; border:none; color:#FFFFFF; padding:18px 0; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:15px; font-weight:600; } .footer-accordion__button .dashicons{ transition:.3s; } .footer-accordion.active .dashicons{ transform:rotate(180deg); } .footer-accordion__content{ display:none; padding-bottom:16px; } .footer-accordion__content a{ display:block; color:#E2E2E2; text-decoration:none; padding:10px 0 10px 18px; font-size:14px; transition:.2s; border-bottom:1px solid rgba(255,255,255,.06); } .footer-accordion__content a:hover{ color:#FFFFFF; } /* Give the "Request a Quote" button the same divider as its sibling links, and drop the border off whichever item ends up last so the list doesn't end on a double line against .footer-accordion's own bottom border. */ .footer-accordion__content a:last-child, .footer-accordion__content button.js-request-quote:last-child{ border-bottom:none; } .footer-single-link{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; color:#FFFFFF; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.08); font-weight:600; } .footer-single-link:hover{ color:#9B1E22; } } /*========================================================= TABLET FOOTER (577px – 1024px) Two real grid columns: brand + nav on the left, subscribe/contact on the right, legal + copyright spanning the full width underneath. Everything shares the same column edges so it lines up cleanly. =========================================================*/ @media (min-width: 577px) and (max-width: 1024px) { .mobile-footer { padding: 48px 40px 32px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; row-gap: 8px; } /* the logo/description wrapper — reset the flex/centering that was meant for the phone layout, and place it as a normal grid item in the left column */ .mobile-footer .dcs-footer__grid { display: block; grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding: 0; } .mobile-footer .dcs-footer__brand { text-align: left; max-width: 420px; } .mobile-footer__nav { grid-column: 1; grid-row: 2; border-top: 1px solid rgba(255,255,255,.08); border-bottom: none; margin-top: 20px; } .footer-accordion { border-bottom: 1px solid rgba(255,255,255,.08); } .footer-accordion__button { font-size: 16px; padding: 18px 0; } .footer-accordion__content a { font-size: 15px; padding: 10px 0 10px 4px; } .mobile-footer .dcs-footer__subscribe { grid-column: 2; grid-row: 1 / 3; max-width: 380px; margin: 0; text-align: left; } .mobile-footer .dcs-footer__subscribe .dcs-footer__contact { align-items: flex-start; } .mobile-footer .dcs-footer__social { justify-content: flex-start; } .mobile-footer__legal { grid-column: 1 / -1; justify-content: center; border-top: 1px solid rgba(255,255,255,.08); padding-top: 24px; margin-top: 16px; } .mobile-footer__copyright { grid-column: 1 / -1; text-align: center; } } /* ═══════════════════════════════════════════════════════════════════ PAGE TEMPLATES — SHARED ═══════════════════════════════════════════════════════════════════ */ .dc-page-hero { background: var(--primary-dark); color: #FFFFFF; padding: 36px 0; margin-bottom: 40px; } .dc-page-hero__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .dc-page-hero__title { font-size: 26px; font-weight: 900; text-transform: uppercase; margin-bottom: 8px; } .dc-page-hero__sub { color: rgba(255,255,255,0.75); font-size: 15px; } .dc-page-main { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; } .dc-section-title { font-size: 18px; font-weight: 900; text-transform: uppercase; color: var(--primary-dark); border-bottom: 3px solid var(--primary); padding-bottom: 10px; margin-bottom: 24px; } /* Category cards — Hard Drives, Networking */ .dc-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 20px; margin-bottom: 48px; } .dc-cat-card { background: #FFFFFF; border: 1px solid #E2E2E2; border-radius: 8px; padding: 28px 20px; text-align: center; text-decoration: none; color: var(--text); transition: box-shadow 0.2s, border-color 0.2s; display: flex; flex-direction: column; align-items: center; gap: 10px; } .dc-cat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); border-color: var(--primary); text-decoration: none; color: var(--primary); } .dc-cat-card__icon { font-size: 38px; } .dc-cat-card__name { font-weight: 700; font-size: 15px; } .dc-cat-card__count { font-size: 12px; color: #6E6E6E; } .dc-cat-card__desc { font-size: 12px; color: #6E6E6E; } /* Brands A-Z */ .dc-brands-page { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; } .dc-brands-letter-group { margin-bottom: 28px; } .dc-brands-letter { font-size: 20px; font-weight: 900; color: var(--primary); border-bottom: 2px solid var(--primary); padding-bottom: 5px; margin-bottom: 12px; display: inline-block; min-width: 34px; } .dc-brands-list { display: flex; flex-wrap: wrap; gap: 8px; } .dc-brands-list a { color: var(--text); font-size: 13px; text-decoration: none; padding: 4px 12px; border: 1px solid #E2E2E2; border-radius: 4px; transition: background 0.15s, border-color 0.15s, color 0.15s; } .dc-brands-list a:hover { background: var(--primary); border-color: var(--primary); color: #FFFFFF; text-decoration: none; } /* Contact page */ .dc-contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; } .dc-contact-info h2, .dc-contact-form-wrap h2 { font-size: 18px; font-weight: 700; margin-bottom: 20px; color: var(--primary-dark); } .dc-contact-info__item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 22px; font-size: 15px; } .dc-contact-info__icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; } .dc-contact-info__label { font-weight: 600; display: block; margin-bottom: 2px; } .dc-contact-form label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 4px; color: #12181E; } .dc-contact-form input, .dc-contact-form select, .dc-contact-form textarea { width: 100%; padding: 10px 12px; border: 1px solid #E2E2E2; border-radius: 6px; font-size: 14px; font-family: inherit; margin-bottom: 14px; box-sizing: border-box; transition: border-color 0.15s; } .dc-contact-form input:focus, .dc-contact-form select:focus, .dc-contact-form textarea:focus { outline: none; border-color: var(--primary); } .dc-contact-form textarea { height: 130px; resize: vertical; } .dc-contact-form .dc-btn-submit { background: var(--accent); color: #FFFFFF; border: none; padding: 12px 28px; font-size: 15px; font-weight: 700; border-radius: 6px; cursor: pointer; transition: background 0.15s; } .dc-contact-form .dc-btn-submit:hover { background: var(--accent-dark); } .dc-form-notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; font-size: 14px; } .dc-form-notice--success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .dc-form-notice--error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } /* Customers page */ .dc-customers-page { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; } .dc-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 48px; } .dc-resource-card { background: #FFFFFF; border: 1px solid #E2E2E2; border-radius: 10px; padding: 28px 24px; text-decoration: none; color: var(--text); transition: box-shadow 0.2s, border-color 0.2s; display: flex; flex-direction: column; gap: 10px; } .dc-resource-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-color: var(--primary); text-decoration: none; color: var(--primary-dark); } .dc-resource-card__icon { font-size: 36px; } .dc-resource-card__title { font-weight: 700; font-size: 15px; } .dc-resource-card__desc { font-size: 13px; color: #6E6E6E; } /* Info box */ .dc-info-box { background: #FCFAF8; border: 1px solid #E2E2E2; border-radius: 8px; padding: 28px 32px; } .dc-info-box h3 { font-size: 16px; font-weight: 700; color: var(--primary-dark); margin-bottom: 12px; } /* CTA banner */ .dc-cta-banner { background: var(--navy); color: #FFFFFF; padding: 32px; border-radius: 8px; margin-top: 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .dc-cta-banner__title { font-size: 18px; font-weight: 700; margin-bottom: 4px; } .dc-cta-banner__sub { color: rgba(255,255,255,0.8); font-size: 14px; } @media (max-width: 768px) { .dc-contact-layout { grid-template-columns: 1fr; } .dc-cta-banner { flex-direction: column; text-align: center; } } /* quote btn */ .quote-popup{ position: fixed; inset: 0; display: none; justify-content: center; align-items: center; background: rgba(0,0,0,.65); z-index: 999999999; } .quote-popup.active{ display:flex; } .wpcf7 select{ cursor:pointer; width:100%; height:42px; padding:0 38px 0 12px; border:1px solid #E2E2E2; border-radius:6px; background:#FFFFFF; font-size:14px; appearance:none; -webkit-appearance:none; -moz-appearance:none; transition:.2s; } .wpcf7 select:focus{ border-color:#9B1E22; outline:none; } .quote-popup__wrapper{ position:relative; } .quote-popup__content{ background:#FFFFFF; border-radius:12px; box-shadow:0 20px 60px rgba(0,0,0,.25); width:680px; max-width:92vw; max-height:94vh; /* was 80vh — gives content more room before it has to scroll */ overflow-y:auto; padding:20px 26px; /* was 24px 30px */ } .quote-popup__close{ position:absolute; top:-18px; right:-18px; width:42px; height:42px; background:#FFFFFF; border:none; border-radius:50%; font-size:22px; font-weight:600; box-shadow:0 4px 15px rgba(0,0,0,.25); transition:.2s; cursor:pointer; } .quote-popup__close:hover{ background:#9B1E22; color:#FFFFFF; } .quote-popup__title{ text-align:center; font-weight:700; font-size:22px; /* was 28px */ margin-bottom:14px; /* was 20px */ } .form_row{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; /* new — was relying on flex gap alone, so rows had no vertical spacing */ } .col50{ width:calc(50% - 5px); } .col-12{ width:100%; } .wpcf7 input, .wpcf7 textarea, .wpcf7 select{ width:100%; padding:9px 12px; /* was 11px 14px */ font-size:14px; /* was 15px */ border:1px solid #E2E2E2; border-radius:6px; box-sizing:border-box; } .wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus{ outline:none; border-color:#9B1E22; box-shadow:0 0 0 3px rgba(206,0,0,.12); } .wpcf7 textarea{ min-height:70px; /* was 100px */ resize:vertical; } .wpcf7 input[readonly]{ background:#FCFAF8; } .quote-btn, .wpcf7-submit{ width:100%; background:#9B1E22; color:#FFFFFF; border:none; padding:12px; /* was 14px */ font-size:15px; /* was 16px */ font-weight:600; border-radius:6px; cursor:pointer; } .submit-wrap{ margin-top:12px; /* was 18px */ } .quote-popup__content::-webkit-scrollbar{ width:8px; } .quote-popup__content::-webkit-scrollbar-thumb{ background:#E2E2E2; border-radius:20px; } .quote-popup__content::-webkit-scrollbar-track{ background:transparent; } @media(max-width:768px){ .col50{ width:100%; } .quote-popup__close{ top:15px; right:15px; } } /* email subscription form */ /* Newsletter row */ .dcs-subscribe__field{ height:38px; } .dcs-subscribe__input{ height:38px; } .dcs-subscribe__icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:#6E6E6E; pointer-events:none; } .dcs-subscribe__input::placeholder{ color:rgba(255,255,255,.5); } .dcs-subscribe__input:focus{ outline:none; box-shadow:none; } .dcs-subscribe__field .wpcf7-form-control-wrap{ display:flex; flex:1; width:100%; } /* Remove Chrome autofill color */ .dcs-subscribe__input:-webkit-autofill, .dcs-subscribe__input:-webkit-autofill:hover, .dcs-subscribe__input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px #FFFFFF inset !important; -webkit-text-fill-color:#12181E !important; transition:background-color 5000s ease-in-out 0s; } /* Subscribe button */ /* Icon-only submit button */ /* Icon-only submit button, orange */ .dcs-subscribe__button{ position:relative; width:38px; height:38px; padding:0; flex-shrink:0; background:transparent; border:none; color:transparent; font-size:0; overflow:hidden; cursor:pointer; padding-bottom: 26px; } .dcs-subscribe__button::after{ content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; transform:translate(-50%,-50%); background-color:#9B1E22; /* match your phone-icon orange — adjust if it's a different hex */ -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E"); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center; -webkit-mask-size:contain; mask-size:contain; } .dcs-subscribe__button:hover::after{ background-color:#EADAD6; /* slightly lighter on hover */ } .dcs-subscribe__button:active{ background:#7A171B; } /* Success/Error message */ .wpcf7-response-output{ margin:10px 0 0 !important; padding:8px 12px !important; font-size:13px; border-radius:4px; max-width:340px; } /* CF7 default green/red still shows through borders CF7 adds inline, but base text color should read on dark footer bg */ .dcs-footer__subscribe .wpcf7-response-output{ color:#FFFFFF; } /* Newsletter form: CF7 appends the response/error message as the last child of the same flex row that holds the email field + Sign Up button, which used to squeeze it in beside them or push it below. Wrapping instead of nowrap + pulling it to order:-1 puts it on its own full-width line ABOVE the email/button row. */ .dcs-footer__subscribe form{ flex-wrap: wrap; } .dcs-footer__subscribe .wpcf7-response-output{ order: -1; flex: 0 0 100%; width: 100%; margin: 0 0 10px !important; } .dcs-subscribe__input:-webkit-autofill, .dcs-subscribe__input:-webkit-autofill:hover, .dcs-subscribe__input:-webkit-autofill:focus{ -webkit-box-shadow:0 0 0 1000px rgba(255,255,255,.06) inset !important; -webkit-text-fill-color:#FFFFFF !important; transition:background-color 5000s ease-in-out 0s; } /* ─── Footer newsletter form: reserve error space, tighten gap, icon button ─── */ /* Space above the field reserved for the validation error message */ .dcs-footer__subscribe .wpcf7-form, .dcs-footer__subscribe form { margin-top: 18px; } .dcs-footer__subscribe .wpcf7-form p, .dcs-footer__subscribe form p { margin: 0; } /* Remove the extra gap between the subscribe form and the phone/email/address block below it. CF7 injects a .screen-reader-response element after the form; if it isn't visually hidden it renders as an empty block and pushes the content below it down. */ .dcs-footer__subscribe .screen-reader-response { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } .dcs-footer__subscribe form { margin-bottom: 0; } .dcs-footer__subscribe .wpcf7 { margin-bottom: 0; } .dcs-footer__contact--no-rule { margin-top: 0; padding-top: 0; } /* "Sign Up" text button instead of icon-only arrow */ .dcs-footer__subscribe input[type="submit"], .dcs-footer__subscribe .wpcf7-submit { height: 36px; min-width: 110px; padding: 0 22px; flex-shrink: 0; background-color: #9B1E22; color: #FFFFFF; border: none; border-radius: 50px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; cursor: pointer; text-indent: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; } .dcs-footer__subscribe input[type="submit"]:hover, .dcs-footer__subscribe .wpcf7-submit:hover { background-color: #7A171B; } /* Defensive override: if the CF7 field also carries the older .dcs-subscribe__button icon-button class, force it back into a normal "Sign Up" text button and drop the arrow icon pseudo-element. */ .dcs-footer__subscribe .dcs-subscribe__button{ width: auto; height: 48px; min-width: 110px; padding: 0 22px; color: #FFFFFF; font-size: 14px; overflow: visible; } .dcs-footer__subscribe .dcs-subscribe__button::after{ content: none; } .dcs-footer__subscribe form { display: flex; align-items: center; gap: 0; flex-wrap: nowrap; max-width: 340px; } .dcs-footer__subscribe .wpcf7-form-control-wrap { flex: 1; width: 100%; } /* Mobile */ @media(max-width:768px){ .dcs-subscribe{ flex-direction:column; max-width:100%; } .dcs-subscribe__field, .dcs-subscribe__button{ width:100%; } .dcs-subscribe__input{ border-radius:6px; } .dcs-subscribe__button{ border-radius:6px; margin-top:10px; } /* Footer newsletter form specifically: keep the email field and the submit icon side-by-side on one row instead of stacking, at every phone width down to the smallest supported screens. */ .dcs-footer__subscribe, .dcs-footer__subscribe form, .dcs-footer__subscribe .wpcf7 { width: 100%; max-width: 100%; } .dcs-footer__subscribe .dcs-subscribe { flex-direction: row !important; align-items: center; gap: 8px; width: 100%; max-width: 100%; } .dcs-footer__subscribe .dcs-subscribe__field { width: auto; flex: 1 1 auto; min-width: 0; } .dcs-footer__subscribe input[type="submit"], .dcs-footer__subscribe .wpcf7-submit { min-width: 90px; height: 44px; padding: 0 16px; font-size: 13px; flex-shrink: 0; margin-top: 0; } } @media(max-width:400px){ .dcs-footer__subscribe .dcs-subscribe__input, .dcs-footer__subscribe input[type="email"] { font-size: 13px; } .dcs-footer__subscribe input[type="submit"], .dcs-footer__subscribe .wpcf7-submit { min-width: 76px; padding: 0 12px; font-size: 12px; } } /* ─── Newsletter field/button alignment fix (mobile) ───────────────────── A separately-loaded stylesheet (main.css) also targets .dcs-subscribe and fights this file's row layout, which is what was causing the email field and Sign Up button to stack instead of sitting side by side. This block pins every property involved with !important so it wins regardless of load order. */ @media (max-width: 768px) { .dcs-footer__subscribe .dcs-subscribe, .footer-newsletter__form .dcs-subscribe { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; } .dcs-footer__subscribe .dcs-subscribe__field, .footer-newsletter__form .dcs-subscribe__field { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin-top: 0 !important; } .dcs-footer__subscribe .dcs-subscribe__field .wpcf7-form-control-wrap { width: 100% !important; } .dcs-footer__subscribe input[type="submit"], .dcs-footer__subscribe .wpcf7-submit, .footer-newsletter__form input[type="submit"], .footer-newsletter__form .wpcf7-submit { flex: 0 0 auto !important; width: auto !important; margin-top: 20px !important; } } .wpcf7-spinner { height: 0; } /* ─── Mobile header logo: prevent distortion ────────────────────────────── The mobile logo carries fixed width/height attributes (180x46). Without an explicit CSS override the browser stretches the real logo file to exactly that box, squashing it. This lets it scale proportionally instead, the same way the desktop logo already does via .site-branding img. */ .mobile-header__logo img, .mobile-header__logo .custom-logo { height: 40px; width: auto; max-width: 100%; } /* ─── Mobile Utility Bar: Phone + Request a Quote (row 1), B2B Accounts dropdown (row 2) ──────────────────────────────────────────── Mirrors the desktop utility bar (.header-utility-bar) and the desktop B2B Accounts dropdown (.subnav-dropdown) but split into two rows on mobile so nothing feels cramped, and given its own stacking context so the dropdown panel is never hidden behind the search bar underneath it. */ .mobile-utility-bar { display: none; flex-direction: column; background: var(--sidebar-bg); position: relative !important; isolation: isolate; /* own stacking context: keeps z-index below contained, no matter what the sibling search bar does */ z-index: 9999 !important; } .mobile-utility-bar__row1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; } .mobile-utility-bar__phone { display: flex; align-items: center; gap: 5px; color: var(--white); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; } .mobile-utility-bar__phone .dashicons { font-size: 16px; width: 16px; height: 16px; } .mobile-utility-bar__quote { display: flex; align-items: center; gap: 5px; background: var(--primary); color: var(--white); font-size: 12px; font-weight: 700; text-decoration: none; padding: 8px 12px; border-radius: 6px; white-space: nowrap; } .mobile-utility-bar__quote .dashicons { font-size: 15px; width: 15px; height: 15px; } .mobile-utility-bar__quote:hover { background: var(--primary-dark); color: var(--white); } .mobile-utility-bar__b2b { position: relative; z-index: 1; border-top: 1px solid rgba(255, 255, 255, 0.12); } .mobile-utility-bar__b2b-toggle { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; background: none; border: none; color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 10px 12px; cursor: pointer; } .mobile-utility-bar__b2b-chev { font-size: 15px; width: 15px; height: 15px; transition: transform 0.2s ease; } .mobile-utility-bar__b2b.is-open .mobile-utility-bar__b2b-chev { transform: rotate(180deg); } .mobile-utility-bar__b2b-panel { display: none; position: absolute !important; top: 100%; left: 0; right: 0; background: var(--sidebar-bg); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4); padding: 6px 0; z-index: 10000 !important; } .mobile-utility-bar__b2b.is-open .mobile-utility-bar__b2b-panel { display: block; } .mobile-utility-bar__b2b-panel a { display: block; padding: 12px 16px; color: var(--white); font-size: 13px; font-weight: 500; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .mobile-utility-bar__b2b-panel a:last-child { border-bottom: none; } .mobile-utility-bar__b2b-panel a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); } @media (max-width: 1024px) { .mobile-utility-bar { display: flex; } } @media (max-width: 360px) { .mobile-utility-bar__phone { font-size: 12px; } .mobile-utility-bar__quote { font-size: 11px; padding: 7px 10px; } } /* * Real brand logo images (dcsupplies_get_brand_logo_html output) were * rendering at full native resolution because neither the modifier * class (.product-card__brand-icon--logo) nor the class * (.product-card__brand-logo) had any size constraint defined — * only the plain text-badge wrapper (.product-card__brand-icon) did. * Fixed with !important below since dcsupplies_get_brand_logo_html() * appears to emit an inline height on the , which otherwise beats * any external stylesheet rule regardless of specificity. * * Second issue, reported after the first fix: a flat "height: 14px" * on the doesn't render every brand at the same visual size — * a wide wordmark logo and a small/low-res square icon logo (e.g. * HPE's) scale completely differently under a plain height clamp, so * some brands ended up looking near-invisible next to others. Switched * to a fixed-size flex box (the wrapper) with the filling its * full height via object-fit: contain — this scales EVERY logo (up or * down, regardless of source resolution or aspect ratio) to the same * visual weight, the way a real logo-badge grid should behave. */ .product-card__brand-icon--logo, .dcs-card__brand-icon--logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 96px !important; height: 32px !important; background: transparent; padding: 0 !important; overflow: hidden; flex-shrink: 0; } .product-card__brand-logo, .dcs-card__brand-logo, .product-card__brand-icon--logo img, .dcs-card__brand-icon--logo img { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; } /* * Price colors on homepage carousel cards, matched to the Outlet page: * current/sale price in the brand red, crossed-out original price in * near-black. get_price_html() wraps the old price in and the * new price in only when a sale is active — a non-sale price * has no / at all, so it's covered by the plain rule below. */ .dcs-card__price, .dcs-card__price .woocommerce-Price-amount { color: #A91E22; font-weight: 700; font-size: 17px; } .dcs-card__price del, .dcs-card__price del .woocommerce-Price-amount { color: #12181E !important; text-decoration: line-through; font-weight: 400; font-size: 13px; } .dcs-card__price ins, .dcs-card__price ins .woocommerce-Price-amount { color: #A91E22 !important; text-decoration: none; font-weight: 700; font-size: 17px; } button.js-request-quote { border: none; outline: none; -webkit-appearance: none; appearance: none; font: inherit; cursor: pointer; } /* The reset above strips ALL borders from every button.js-request-quote on the site (footer links, sidebar quicklinks, etc., where a plain text-style trigger is wanted). Product-card contexts now use the outline button style for Request Quote, which needs its border back — restore it here, scoped to just the carousel card so the footer/sidebar instances stay borderless. Two-class selector beats the element+class reset above on specificity, so !important isn't strictly required, but it's added for resilience against any other card-specific overrides (like the "category" inline style seen in DevTools) that might target buttons the same way. */ .dcs-card .js-request-quote { background: #FFFFFF !important; color: #9B1E22 !important; border: 2px solid #9B1E22 !important; border-radius: 8px; font-size: 0.8rem; padding: 10px; font-weight:700; } .dcs-card .js-request-quote:hover { background: #9B1E22 !important; color: #FFFFFF !important; border-color: #9B1E22 !important; } /* Keep keyboard accessibility — only show a focus ring when tabbing to the button, not on a mouse click */ button.js-request-quote:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; } .footer-menu button.js-request-quote { display: inline; background: none; border: none; outline: none; -webkit-appearance: none; appearance: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } /* Mobile accordion links are display:block with 10px 0 10px 18px padding (see .footer-accordion__content a) — match that box model here so the button lines up with the rest of the list instead of sitting flush-left. */ .footer-accordion__content button.js-request-quote { display: block; width: 100%; background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.06); outline: none; -webkit-appearance: none; appearance: none; padding: 10px 0 10px 18px; margin: 0; font: inherit; font-size: 14px; color: #E2E2E2; text-align: left; cursor: pointer; } .footer-menu button.js-request-quote:hover, .footer-accordion__content button.js-request-quote:hover { color: #9B1E22; /* match whatever your .footer-menu a:hover already does */ } .footer-menu button.js-request-quote:focus-visible, .footer-accordion__content button.js-request-quote:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════════════ SHOP BY BRAND — compact block grid Was rendering as one full-width column per brand with a lot of empty space to the right of the text (name/tag/Shop stacked on the left, nothing filling the rest of the card). This turns it into a real grid of small, evenly-sized blocks so brands sit side-by-side instead of each eating a full screen-width row. ═══════════════════════════════════════════════════════════════════ */ .home-brands-v2 { padding: 40px 16px; } .home-brands-v2__inner { max-width: 1280px; margin: 0 auto; } .brands-v2-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 14px !important; margin-top: 24px; } .brand-v2-card { display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; height: auto !important; min-height: 0 !important; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 8px; padding: 16px !important; gap: 4px; text-decoration: none !important; transition: background 0.2s, transform 0.2s; } .brand-v2-card:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); text-decoration: none !important; } .brand-v2-card__logo { color: #FFFFFF; font-size: 17px; font-weight: 800; } .brand-v2-card__tag { color: rgba(255, 255, 255, 0.65); font-size: 11.5px; line-height: 1.3; } .brand-v2-card__cta { color: var(--accent); font-size: 12px; font-weight: 700; margin-top: 6px; } @media (max-width: 991px) { .brands-v2-grid { grid-template-columns: repeat(3, 1fr) !important; } } @media (max-width: 640px) { .brands-v2-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; margin-top: 18px; } .brand-v2-card { padding: 14px !important; } .brand-v2-card__logo { font-size: 15px; } .brand-v2-card__tag { font-size: 11px; } } /* ═══════════════════════════════════════════════════════════════════ MOBILE DENSITY PASS — fixes the "too zoomed in" feel vs. the Newegg Business reference. The mobile view was showing fewer, larger elements per screen (tall hero, bulky utility bar, generous section padding); this tightens spacing and font sizes at mobile widths so more content is visible per screen without changing layout structure. ═══════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .mobile-utility-bar__row1 { padding: 7px 12px; } .mobile-utility-bar__quote { padding: 6px 10px; } .mobile-utility-bar__b2b-toggle { padding: 7px 12px; font-size: 11px; } .hero-slider { aspect-ratio: 8 / 3; } .hero-slide__content { padding: 16px; } .hero-slide__title { font-size: 19px; margin-bottom: 6px; } .hero-slide__sub { font-size: 13px; margin-bottom: 14px; } .hero-slide__cta { padding: 8px 20px; font-size: 13px; } /* Product cards (shop grid, related-products carousel, Featured Products page) — shorter image area, smaller heading/badge/button type so more of the grid is visible per screen on phone. !important is used throughout this card block because the title/ price/footer rules exist at the same specificity elsewhere in this file and, without it, source order alone wasn't reliably winning on every card variant. */ .product-card__image-wrap { height: 96px !important; padding: 6px !important; } .product-card__image-wrap img { max-height: 82px !important; } .product-card__body { padding: 7px 8px !important; gap: 2px !important; } .product-card__title { font-size: 10px !important; line-height: 1.3 !important; margin-bottom: 2px !important; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-card__model, .product-card__condition { font-size: 10px !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-card__sku, .product-card__stock-in, .product-card__stock-out { font-size: 10px !important; } .product-card__price, .product-card__price .woocommerce-Price-amount { font-size: 13px !important; } .product-card__price del, .product-card__price del .woocommerce-Price-amount { font-size: 10.5px !important; } .product-card__price ins, .product-card__price ins .woocommerce-Price-amount { font-size: 13px !important; } .product-card__footer { padding-top: 4px !important; } /* Badges — sale/discount badge and the Compare pill (carousel overlay version only — see the footer-scoped override right below for the main grid card's below-the-button version) */ .product-card__discount-badge { font-size: 10px !important; padding: 3px 7px !important; top: 6px; left: 6px; } .product-card__compare { padding: 3px 6px !important; font-size: 10px !important; gap: 4px; top: 6px; right: 6px; } /* Main grid card's Compare row (below the button) — smaller type to match the rest of the shrunk mobile card, no pill padding. */ .product-card__footer .product-card__compare { padding: 0 !important; font-size: 10px !important; gap: 4px !important; margin-top: 6px !important; } /* Buttons — Add to Cart / Request Quote on the card, and the text-only brand badge when a real brand logo isn't available */ .product-card__footer .button, .product-card__footer a.button, .product-card__get-quote, .product-card__add-to-cart { display: flex; width: 100%; box-sizing: border-box; align-items: center; justify-content: center; font-size: 13.5px !important; padding: 11px 6px !important; gap: 4px !important; } .product-card__get-quote svg, .product-card__add-to-cart svg { width: 12px !important; height: 12px !important; } .product-card__brand-icon { font-size: 10px !important; padding: 2px 6px !important; } /* Real brand-logo images: same fixed-box technique as the base rule above. Kept close to the base size (not shrunk down further) — a smaller box was making logos hard to read on phone — every logo, whatever its native resolution or aspect ratio, is still centered inside an identical box so brands read as one consistent, clearly-visible row. */ .product-card__brand-icon--logo, .dcs-card__brand-icon--logo { width: 84px !important; height: 28px !important; } /* Homepage product carousels (dcs-card / dcs-carousel) */ .dcs-card__media { padding: 10px; } .dcs-card__body { padding: .6rem; gap: .3rem; } .dcs-card__title { font-size: .76rem !important; min-height: 0 !important; -webkit-line-clamp: 2; } .dcs-card__brand { font-size: .62rem; } .dcs-card__badge { font-size: .58rem; padding: .18rem .5rem; top: .5rem; left: .5rem; } .dcs-card__price { font-size: 13px !important; } .dcs-card__price-now { font-size: .82rem !important; } .dcs-card__price-old { font-size: .68rem; } .dcs-btn { font-size: .76rem !important; padding: .55rem .85rem !important; gap: .3rem !important; } /* Who We Serve — swipeable single-row carousel on phone */ .who-we-serve { padding: 28px 0 22px 16px; } .who-we-serve__eyebrow { font-size: 10.5px; padding-right: 16px; margin-bottom: 6px; } .who-we-serve__title { font-size: 20px; margin-bottom: 8px; padding-right: 16px; } .who-we-serve__lead { font-size: 12px; padding: 0 16px 0 0; margin-bottom: 18px; } .who-we-serve__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; /* -webkit-overflow-scrolling: touch removed — on iOS Safari this combined with border-radius + overflow:hidden + transition on child elements (.who-we-serve__card) triggers a known WebKit compositing bug that paints a solid black bar over the row during/after scroll. Modern iOS scrolls overflow-x:auto with native momentum by default, so this property is no longer needed and removing it removes the bug. */ gap: 10px; padding-right: 16px; padding-bottom: 6px; margin-right: -16px; scrollbar-width: none; } .who-we-serve__grid::-webkit-scrollbar { display: none; } .who-we-serve__card { flex: 0 0 108px; scroll-snap-align: start; padding: 12px 8px; } .who-we-serve__icon { width: 28px; height: 28px; margin-bottom: 8px; } .who-we-serve__divider { width: 20px; margin-bottom: 8px; } .who-we-serve__card h3 { font-size: 10.5px; line-height: 1.25; margin: 0 0 2px; } .who-we-serve__subtitle { font-size: 9px; line-height: 1.3; } /* Shop Our Wide Range of Business Products — swipeable carousel of category circles on phone, smaller heading to match. */ .category-showcase { padding: 22px 0; } .category-showcase__header { padding: 0 16px; margin-bottom: 16px; } .category-showcase__title { font-size: 15px; margin-bottom: 6px; } .category-showcase__subtitle { font-size: 11.5px; } .category-showcase__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; /* -webkit-overflow-scrolling: touch removed — on iOS Safari this combined with border-radius + overflow:hidden + transition on .cat-circle triggers a known WebKit compositing bug that paints a solid black bar over this row during/after scroll (the bug reported on the homepage "Shop Our Wide Range" section). Modern iOS scrolls overflow-x:auto with native momentum by default, so this property is no longer needed and removing it removes the bug. */ gap: 14px; padding: 2px 16px 8px; scrollbar-width: none; } .category-showcase__grid::-webkit-scrollbar { display: none; } .category-showcase__item { flex: 0 0 82px; scroll-snap-align: start; } .cat-circle { width: 72px; height: 72px; margin: 0 auto 8px; border-radius: 0 !important; border: none !important; background: transparent !important; overflow: visible !important; box-shadow: none; } .category-showcase__item a:hover .cat-circle { border: none !important; background: transparent !important; box-shadow: none !important; } .cat-circle img { width: 50px; height: 50px; border-radius: 0 !important; border: none !important; background: transparent !important; filter: none; transition: filter 0.25s ease; } .category-showcase__item a:hover .cat-circle img { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.20)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.10)); } .cat-circle .cat-icon { font-size: 28px; } .cat-name { font-size: 10.5px; } .purchasing-resources { padding: 28px 16px; } .purchasing-resources__title { font-size: 18px; margin-bottom: 18px; } .purchasing-resources__card { padding: 20px 16px; } .services-strip { padding: 14px 16px; } .home-brands-v2 { padding: 26px 16px; } } /* ═══════════════════════════════════════════════════════════════════ MOBILE HEADER v3 — 2 calm rows, per reference design Row 1: hamburger + logo ⋯ phone / wishlist / account / cart icons Row 2: full-width search + B2B chip + red Quote button One red accent only (Quote button + cart badge) — everything else is neutral so the header doesn't compete with page content. ═══════════════════════════════════════════════════════════════════ */ /* ── Row 1: menu + logo + icon cluster ─────────────────────────── */ .mobile-header__top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--white); box-shadow: 0 1px 3px rgba(0,0,0,0.06); } .mobile-header__menu-btn { all: unset; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 30px; height: 30px; color: var(--text); cursor: pointer; } .mobile-header__menu-btn .dashicons { font-size: 20px; width: 20px; height: 20px; } .mobile-header__logo { flex: 0 0 auto; margin-right: auto; } .mobile-header__logo img, .mobile-header__logo .custom-logo { height: 26px !important; width: auto !important; max-width: 100%; display: block; } .mobile-header__top-icons { flex: 0 0 auto; display: flex; align-items: center; gap: 16px; } .mobile-header__icon-btn { all: unset; position: relative; display: flex !important; align-items: center; justify-content: center; color: var(--text) !important; width: 20px; height: 20px; cursor: pointer; background: none !important; border: none !important; } .mobile-header__icon-btn svg { display: block; } .mobile-header__icon-badge { position: absolute; top: -7px; right: -9px; background: var(--primary); color: #FFFFFF; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; line-height: 15px; text-align: center; border-radius: 8px; padding: 0 3px; } .mobile-header__icon-badge.is-hidden { display: none; } /* ── Row 2: search + B2B + Quote ───────────────────────────────── */ .mobile-header__bar2 { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; background: var(--sidebar-bg); padding: 10px 12px 12px; } .mobile-header__bar2-search { flex: 1 1 auto; min-width: 0; } .dcs-mheader2-search-form { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; height: 40px !important; background: #FFFFFF !important; border: 1px solid transparent !important; border-radius: 8px !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; } .dcs-mheader2-search-icon { flex: 0 0 auto !important; margin-left: 12px !important; color: var(--text-light) !important; pointer-events: none; } .dcs-mheader2-search-input { all: unset !important; flex: 1 1 auto !important; box-sizing: border-box !important; width: 100% !important; height: 100% !important; padding: 0 10px !important; font-size: 14px !important; font-family: inherit !important; color: var(--text) !important; background: transparent !important; } .dcs-mheader2-search-input::placeholder { color: var(--text-light); } /* Search icon is decorative-only (see .dcs-mheader2-search-icon above); the submit button stays in the DOM for Enter-key/native submission but isn't shown, since the reference design has no separate search button — tapping the icon area or the return key both submit. */ .mobile-header__bar2-search-submit { all: unset !important; position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } .mobile-header__bar2-b2b { flex: 0 0 auto; position: relative; border-top: none !important; } .mobile-header__bar2-b2b .mobile-utility-bar__b2b-toggle { display: flex !important; align-items: center; gap: 2px; padding: 0 10px !important; height: 40px; font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: 0.2px; width: auto !important; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); border-radius: 8px; color: #FFFFFF; white-space: nowrap; } .mobile-header__bar2-b2b .mobile-utility-bar__b2b-chev { font-size: 13px; width: 13px; height: 13px; } .mobile-header__bar2-b2b .mobile-utility-bar__b2b-panel { left: auto !important; right: 0 !important; min-width: 220px; } .mobile-header__bar2-quote { display: flex; align-items: center; justify-content: center; background: var(--primary); color: #FFFFFF; font-size: 13.5px; font-weight: 700; border: none; padding: 0 16px; height: 40px; border-radius: 8px; flex: 0 0 auto; white-space: nowrap; cursor: pointer; } @media (max-width: 1024px) { .mobile-header__top, .mobile-header__bar2 { display: flex; } } /* ═══════════════════════════════════════════════════════════════════ 404 PAGE ═══════════════════════════════════════════════════════════════════ */ .error-404-page { background: var(--bg); padding: 64px 16px 80px; } .error-404-page__inner { max-width: 640px; margin: 0 auto; text-align: center; } .error-404-page__code { font-size: 120px; font-weight: 900; line-height: 1; color: var(--primary); letter-spacing: -2px; margin-bottom: 8px; } .error-404-page__title { font-size: 24px; font-weight: 800; color: var(--text); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.3px; } .error-404-page__sub { font-size: 14.5px; color: var(--text-light); line-height: 1.6; max-width: 460px; margin: 0 auto 32px; } .error-404-page__search { max-width: 420px; margin: 0 auto 28px; } .error-404-page__search .search-form-outer form, .error-404-page__search form { display: flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: #FFFFFF; } .error-404-page__actions { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 48px; flex-wrap: wrap; } .error-404-page__categories-label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); margin-bottom: 14px; } .error-404-page__category-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .error-404-page__category-pill { display: inline-block; padding: 8px 18px; background: #FFFFFF; border: 1px solid var(--border); border-radius: 999px; color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s; } .error-404-page__category-pill:hover { background: var(--primary); border-color: var(--primary); color: #FFFFFF; text-decoration: none; } @media (max-width: 480px) { .error-404-page { padding: 48px 16px 56px; } .error-404-page__code { font-size: 84px; } .error-404-page__title { font-size: 19px; } .error-404-page__actions { flex-direction: column; width: 100%; } .error-404-page__actions .button { width: 100%; } } /* ========================================================= WHAT OUR CUSTOMERS SAY — BOXED SECTION ========================================================= */ .dcs-testimonials { max-width: 1280px; margin: 40px auto; padding: 32px 24px; box-sizing: border-box; } /* Keep the testimonial marquee inside the box */ .dcs-testimonials .dcs-marquee { width: 100%; } /* Mobile */ @media (max-width: 768px) { .dcs-testimonials { margin: 24px 16px; padding: 24px 16px; border-radius: 8px; } }