/* ========================================================================== DIYSSD NAVIGATION - CSS VARIABLES ========================================================================== */ :root { /* Charcoal Scale */ --charcoal-050: #f5f5f5; --charcoal-100: #e6e6e6; --charcoal-200: #cccccc; --charcoal-300: #adadad; --charcoal-500: #7a7a7a; --charcoal-700: #565656; --charcoal-800: #474747; --charcoal-900: #3a3a3a; --charcoal-950: #2c2c2c; /* Accent Colors - WCAG AA Compliant */ --ocean-blue: #245270; --ocean-blue-rgb: 36, 82, 112; --terracotta: #c7522a; --golden-sand: #e5b363; --forest-green: #5d8a66; --dusty-plum: #8b5a8b; /* Accessibility */ --focus-ring-color: var(--ocean-blue); --focus-ring-width: 3px; --focus-ring-offset: 2px; --touch-target-min: 44px; /* Transitions */ --transition-speed: 0.2s; --transition-easing: cubic-bezier(0.4, 0, 0.2, 1); } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { :root { --transition-speed: 0.01ms; } * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== NAVIGATION CONTAINER ========================================================================== */ .diyssd-nav-container { position: relative; width: 100%; background: #ffffff; border-bottom: 1px solid var(--charcoal-200); z-index: 1000; } /* ========================================================================== MAIN NAVIGATION ========================================================================== */ .diyssd-nav { display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: 0 auto; padding: 0.75rem 1.5rem; height: 4rem; background: #ffffff; } /* ========================================================================== LOGO SECTION ========================================================================== */ .diyssd-nav-left { flex: 1; display: flex; align-items: center; min-width: 0; } .diyssd-logo { font-family: "Oswald", sans-serif; font-weight: 800; font-size: 36px; color: #2d5a7b; /* Ocean Blue from your palette */ text-decoration: none; display: block; } .diyssd-logo:hover { opacity: 0.8; } .diyssd-logo:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: 4px; } /* ========================================================================== MENU CONTAINER ========================================================================== */ .diyssd-nav-right { flex: 0 0 auto; display: flex; align-items: center; gap: 0.75rem; height: 100%; } /* ========================================================================== DESKTOP MENU ========================================================================== */ .diyssd-desktop-menu { display: none; align-items: center; gap: 0rem; list-style: none; margin: 0; padding: 0; height: 100%; } @media (min-width: 769px) { .diyssd-desktop-menu { display: flex; } } /* ========================================================================== MENU ITEMS ========================================================================== */ .diyssd-menu-item { position: relative; display: flex; align-items: center; height: 100%; } .diyssd-menu-link { display: flex; align-items: center; padding: 0.75rem 1rem; min-height: var(--touch-target-min); color: var(--charcoal-900); text-decoration: none; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; border-radius: 4px; transition: all var(--transition-speed) var(--transition-easing); cursor: pointer; } .diyssd-menu-link:hover { color: var(--ocean-blue); background-color: var(--charcoal-050); } .diyssd-menu-link:focus { outline: none; } .diyssd-menu-link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(var(--focus-ring-offset) * -1); } .diyssd-menu-link.has-dropdown::after { content: "▼"; margin-left: 0.5rem; font-size: 0.625rem; transition: transform var(--transition-speed) var(--transition-easing); display: inline-block; } .diyssd-menu-item:hover .diyssd-menu-link.has-dropdown::after { transform: rotate(180deg); } /* ========================================================================== MENU DIVIDER ========================================================================== */ .diyssd-menu-divider { width: 1px; height: 1.5rem; background-color: var(--charcoal-200); margin: 0; } /* ========================================================================== DROPDOWN MENU ========================================================================== */ .diyssd-dropdown { position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%) translateY(-8px); min-width: 200px; background: #ffffff; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); padding: 0.5rem; opacity: 0; visibility: hidden; transition: all var(--transition-speed) var(--transition-easing); z-index: 1001; } .diyssd-menu-item:hover .diyssd-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .diyssd-dropdown-link { display: flex; align-items: center; padding: 0.625rem 0.75rem; min-height: var(--touch-target-min); color: var(--charcoal-900); text-decoration: none; font-size: 0.875rem; font-weight: 500; border-radius: 4px; transition: all var(--transition-speed) var(--transition-easing); } .diyssd-dropdown-link:hover { color: var(--ocean-blue); background-color: var(--charcoal-050); } .diyssd-dropdown-link:focus { outline: none; } .diyssd-dropdown-link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(var(--focus-ring-offset) * -1); } .diyssd-dropdown-link:active { background-color: var(--charcoal-050); } .diyssd-dropdown-link.active { color: var(--terracotta); background-color: rgba(199, 82, 42, 0.08); font-weight: 600; } /* ========================================================================== MOBILE TOGGLE BUTTON ========================================================================== */ .diyssd-mobile-toggle { display: flex; flex-direction: column; justify-content: space-around; width: var(--touch-target-min); height: var(--touch-target-min); padding: 0.75rem; background: transparent; border: none; cursor: pointer; border-radius: 4px; transition: background-color var(--transition-speed) var(--transition-easing); } .diyssd-mobile-toggle:hover { background-color: var(--charcoal-050); } .diyssd-mobile-toggle:focus { outline: none; } .diyssd-mobile-toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(var(--focus-ring-offset) * -1); } .diyssd-mobile-toggle span { display: block; width: 100%; height: 2px; background-color: var(--charcoal-900); border-radius: 2px; transition: all var(--transition-speed) var(--transition-easing); } .diyssd-mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .diyssd-mobile-toggle.active span:nth-child(2) { opacity: 0; } .diyssd-mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (min-width: 769px) { .diyssd-mobile-toggle { display: none; } } /* ========================================================================== MOBILE OVERLAY ========================================================================== */ .diyssd-mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: all var(--transition-speed) var(--transition-easing); z-index: 1001; } .diyssd-mobile-overlay.active { opacity: 1; visibility: visible; } @media (min-width: 769px) { .diyssd-mobile-overlay { display: none; } } /* ========================================================================== MOBILE MENU ========================================================================== */ .diyssd-mobile-menu { position: fixed; top: 0; right: 0; width: 85%; max-width: 320px; height: 100%; background: #ffffff; transform: translateX(100%); transition: transform var(--transition-speed) var(--transition-easing); z-index: 1002; overflow-y: auto; box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15); } .diyssd-mobile-menu.active { transform: translateX(0); } @media (min-width: 769px) { .diyssd-mobile-menu { display: none; } } /* ========================================================================== MOBILE HEADER ========================================================================== */ .diyssd-mobile-header { display: flex; align-items: center; justify-content: flex-end; padding: 0.6rem 1rem; border-bottom: 1px solid var(--charcoal-200); } .diyssd-mobile-close { display: flex; align-items: center; justify-content: center; width: var(--touch-target-min); height: var(--touch-target-min); padding: 0; background: transparent; border: none; cursor: pointer; border-radius: 4px; font-size: 1.5rem; color: var(--charcoal-900); transition: all var(--transition-speed) var(--transition-easing); } .diyssd-mobile-close:hover { background-color: var(--charcoal-050); } .diyssd-mobile-close:focus { outline: none; } .diyssd-mobile-close:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(var(--focus-ring-offset) * -1); } /* ========================================================================== MOBILE CONTENT ========================================================================== */ .diyssd-mobile-content { padding: 1rem; } .diyssd-mobile-section { margin-bottom: 1rem; } .diyssd-mobile-section:last-child { margin-bottom: 0; } .diyssd-mobile-heading { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--charcoal-500); margin: 0 0 0.5rem 0; } .diyssd-mobile-divider { height: 1px; background-color: var(--charcoal-200); margin-bottom: 0.75rem; } .diyssd-mobile-link { display: flex; align-items: center; padding: 0.75rem; margin-bottom: 0.25rem; min-height: var(--touch-target-min); color: var(--charcoal-900); text-decoration: none; font-size: 0.875rem; font-weight: 500; border-radius: 4px; transition: all var(--transition-speed) var(--transition-easing); } .diyssd-mobile-link:hover { color: var(--ocean-blue); background-color: var(--charcoal-050); } .diyssd-mobile-link:focus { outline: none; } .diyssd-mobile-link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(var(--focus-ring-offset) * -1); } .diyssd-mobile-link:active { background-color: var(--charcoal-050); transform: translateX(2px); } .diyssd-mobile-link.active { color: var(--terracotta); background-color: rgba(199, 82, 42, 0.08); font-weight: 600; } /* ========================================================================== UTILITY CLASSES ========================================================================== */ body.diyssd-menu-open { overflow: hidden; } @media (prefers-contrast: high) { .diyssd-nav { border-bottom-width: 2px; } .diyssd-menu-link:focus-visible, .diyssd-dropdown-link:focus-visible, .diyssd-mobile-link:focus-visible { outline-width: 4px; } }

Out of Stock Catalog

Loading Airtable...

Please wait while the content loads

This data is from our regularly updated database and subject to change. You can scroll inside the embedded window separately from the main page—click or tap inside to focus, then swipe up or down to scroll.

The Exclusive Discounts display estimated prices, sorted by discount amount. For the latest price or to purchase, click “View Price & Buy Now” under Affiliate Options. Looking for more deals? Explore the complete catalog on the Pricing Page.

About

Privacy

Terms

Product

Pricing

Blog

Support

Out of Stock Catalog