Site banner | diy ssd
  • Product
    Catalog
  • Pricing
    Complete Expanded Amazon Best Buy B&H Manufacturer Newegg
  • Blog
    Posts
  • Support
    FAQ News

Product

Catalog

Pricing

Complete Expanded Amazon Best Buy B&H Manufacturer Newegg

Blog

Posts

Support

FAQ News
/* ========================================================================== DIYSSD Navigation Menu Styles Scoped with 'diyssd-' prefix to prevent conflicts ========================================================================== */ /* CSS Custom Properties for Color Palette */ :root { /* Charcoal Scale */ --diyssd-charcoal-050: #f5f5f5; --diyssd-charcoal-100: #e6e6e6; --diyssd-charcoal-200: #cccccc; --diyssd-charcoal-300: #adadad; --diyssd-charcoal-400: #949494; --diyssd-charcoal-500: #7a7a7a; --diyssd-charcoal-600: #6b6b6b; --diyssd-charcoal-700: #565656; --diyssd-charcoal-800: #474747; --diyssd-charcoal-900: #3a3a3a; --diyssd-charcoal-950: #2c2c2c; /* Accent Colors */ --diyssd-ocean-blue: #2d5a7b; --diyssd-ocean-blue-light: #3a6d94; --diyssd-ocean-blue-dark: #1f3f56; --diyssd-terracotta: #c7522a; --diyssd-terracotta-light: #d66640; --diyssd-golden-sand: #e5b363; --diyssd-forest-green: #5d8a66; --diyssd-dusty-plum: #8b5a8b; } /* Reset and base styles */ .diyssd-nav-container * { box-sizing: border-box; margin: 0; padding: 0; } /* Main navigation container */ .diyssd-nav-container { width: 100%; background-color: var(--diyssd-charcoal-050); position: relative; z-index: 1000; font-family: -apple-system, BlinkMacSystemFont, Inter, Roboto, Ubuntu, sans-serif; border-bottom: 1px solid var(--diyssd-charcoal-100); } /* Navigation bar */ .diyssd-nav { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.5rem; max-width: 1400px; margin: 0 auto; } /* Logo */ .diyssd-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; transition: opacity 0.2s ease; } .diyssd-logo:hover { opacity: 0.8; } .diyssd-logo img { height: 42px; width: auto; display: block; } /* Desktop menu (hidden on mobile/tablet) */ .diyssd-desktop-menu { display: none; align-items: center; list-style: none; gap: 0; } /* Menu items */ .diyssd-menu-item { position: relative; } /* Menu divider */ .diyssd-menu-divider { width: 1px; height: 20px; background-color: var(--diyssd-charcoal-200); margin: 0 1.25rem; } /* Menu links */ .diyssd-menu-link { display: block; padding: 0.625rem 0.875rem; color: var(--diyssd-charcoal-800); text-decoration: none; font-size: 1rem; font-weight: 500; transition: all 0.2s ease; border-radius: 6px; position: relative; } /* Hover state with Ocean Blue */ .diyssd-menu-link:hover { color: var(--diyssd-ocean-blue); background-color: rgba(45, 90, 123, 0.08); } /* Active state with underline accent */ .diyssd-menu-link.active { color: var(--diyssd-ocean-blue); } .diyssd-menu-link.active::after { content: ""; position: absolute; bottom: 0; left: 0.875rem; right: 0.875rem; height: 2px; background-color: var(--diyssd-terracotta); border-radius: 2px; } /* Dropdown indicator */ .diyssd-menu-link.has-dropdown::after { content: "▾"; margin-left: 0.375rem; font-size: 1.25rem; transition: transform 0.2s ease; display: inline-block; color: var(--diyssd-charcoal-500); } .diyssd-menu-link.has-dropdown:hover::after { color: var(--diyssd-ocean-blue); } /* Dropdown menu */ .diyssd-dropdown { position: absolute; top: 100%; left: 0; min-width: 200px; background-color: #ffffff; border: 1px solid var(--diyssd-charcoal-100); border-radius: 8px; box-shadow: 0 4px 12px rgba(44, 44, 44, 0.15), 0 0 0 1px rgba(44, 44, 44, 0.05); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.2s ease; margin-top: 0; padding: 0.5rem 0; z-index: 100; pointer-events: none; } /* Show dropdown on hover */ .diyssd-menu-item:hover .diyssd-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Rotate arrow on hover */ .diyssd-menu-item:hover .diyssd-menu-link.has-dropdown::after { transform: rotate(180deg); } /* Dropdown links */ .diyssd-dropdown-link { display: block; padding: 0.625rem 1.25rem; color: var(--diyssd-charcoal-700); text-decoration: none; font-size: 0.9375rem; transition: all 0.15s ease; position: relative; } .diyssd-dropdown-link:hover { background-color: rgba(45, 90, 123, 0.06); color: var(--diyssd-ocean-blue); } .diyssd-dropdown-link.active { color: var(--diyssd-ocean-blue); background-color: rgba(45, 90, 123, 0.08); font-weight: 500; } /* Mobile toggle button (hamburger) */ .diyssd-mobile-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; position: relative; z-index: 1001; border-radius: 6px; transition: background-color 0.2s ease; } .diyssd-mobile-toggle.active { opacity: 0; pointer-events: none; } .diyssd-mobile-toggle:hover { background-color: rgba(45, 90, 123, 0.08); } .diyssd-mobile-toggle:focus { outline: none; } .diyssd-mobile-toggle:focus-visible { outline: 2px solid var(--diyssd-ocean-blue); outline-offset: 2px; } /* Hamburger icon */ .diyssd-hamburger, .diyssd-hamburger::before, .diyssd-hamburger::after { width: 24px; height: 2px; background-color: var(--diyssd-charcoal-800); border-radius: 2px; transition: all 0.3s ease; position: absolute; } .diyssd-hamburger::before, .diyssd-hamburger::after { content: ""; } .diyssd-hamburger::before { transform: translateY(-7px); } .diyssd-hamburger::after { transform: translateY(7px); } /* Hamburger animation when menu is open */ .diyssd-mobile-toggle.active .diyssd-hamburger { background-color: transparent; } .diyssd-mobile-toggle.active .diyssd-hamburger::before { transform: rotate(45deg); background-color: var(--diyssd-ocean-blue); } .diyssd-mobile-toggle.active .diyssd-hamburger::after { transform: rotate(-45deg); background-color: var(--diyssd-ocean-blue); } /* Mobile menu overlay */ .diyssd-mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(44, 44, 44, 0.6); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; backdrop-filter: blur(2px); } .diyssd-mobile-overlay.active { opacity: 1; visibility: visible; } /* Mobile menu panel */ .diyssd-mobile-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--diyssd-charcoal-050); transform: translateX(-100%); transition: transform 0.3s ease; z-index: 1000; overflow-y: auto; border-right: 3px solid var(--diyssd-ocean-blue); } .diyssd-mobile-menu.active { transform: translateX(0); } /* Mobile menu header */ .diyssd-mobile-header { display: flex; justify-content: flex-end; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--diyssd-charcoal-200); } /* Mobile close button */ .diyssd-mobile-close { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: none; font-size: 1.5rem; color: var(--diyssd-charcoal-700); cursor: pointer; border-radius: 6px; transition: all 0.2s ease; } .diyssd-mobile-close:hover { background-color: rgba(199, 82, 42, 0.1); color: var(--diyssd-terracotta); } .diyssd-mobile-close:focus { outline: 2px solid var(--diyssd-ocean-blue); outline-offset: 2px; } /* Mobile navigation content */ .diyssd-mobile-nav { padding: 0.25rem 0; } /* Mobile menu sections */ .diyssd-mobile-section { margin-bottom: 1rem; } /* Mobile section headings with Ocean Blue */ .diyssd-mobile-heading { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--diyssd-ocean-blue); padding: 0.5rem 1rem; margin-bottom: 0.25rem; } /* Mobile divider */ .diyssd-mobile-divider { height: 1px; background-color: var(--diyssd-charcoal-200); margin: 0 1rem 0.25rem 1rem; } /* Mobile links */ .diyssd-mobile-link { display: block; padding: 0.5rem 1rem; color: var(--diyssd-charcoal-700); text-decoration: none; font-size: 0.9375rem; transition: all 0.15s ease; position: relative; border-left: 3px solid transparent; margin-left: 1rem; } .diyssd-mobile-link:hover { background-color: rgba(45, 90, 123, 0.06); color: var(--diyssd-ocean-blue); border-left-color: var(--diyssd-ocean-blue); } .diyssd-mobile-link.active { background-color: rgba(45, 90, 123, 0.08); color: var(--diyssd-ocean-blue); border-left-color: var(--diyssd-terracotta); font-weight: 500; } .diyssd-mobile-link:focus { outline: 2px solid var(--diyssd-ocean-blue); outline-offset: -2px; } .diyssd-mobile-link:focus:not(:focus-visible) { outline: none; } /* ========================================================================== RESPONSIVE BREAKPOINTS ========================================================================== */ /* Mobile: ≤640px - Full width mobile menu */ @media (max-width: 640px) { .diyssd-mobile-menu { width: 100%; } } /* Mobile Landscape: 641-844px - 75% width menu, max 450px */ @media (min-width: 641px) and (max-width: 844px) { .diyssd-mobile-menu { width: 75%; max-width: 450px; } } /* Tablet: 845-1080px - 75% width menu, max 500px */ @media (min-width: 845px) and (max-width: 1080px) { .diyssd-mobile-menu { width: 75%; max-width: 500px; } } /* Desktop: 1081-1280px - Show desktop menu */ @media (min-width: 1081px) { .diyssd-desktop-menu { display: flex; } .diyssd-mobile-toggle { display: none; } .diyssd-logo img { height: 46px; } .diyssd-nav { padding: 1rem 2rem; } } /* Large Desktop: ≥1281px - Increased padding */ @media (min-width: 1281px) { .diyssd-nav { padding: 1.25rem 2.5rem; } .diyssd-menu-link { padding: 0.75rem 1rem; } .diyssd-menu-divider { margin: 0 1.5rem; } .diyssd-logo img { height: 50px; } } /* Accessibility: Reduced motion support */ @media (prefers-reduced-motion: reduce) { .diyssd-nav-container *, .diyssd-nav-container *::before, .diyssd-nav-container *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Accessibility: High contrast mode support */ @media (prefers-contrast: high) { .diyssd-nav-container { border-bottom: 2px solid var(--diyssd-charcoal-900); } .diyssd-dropdown { border: 2px solid var(--diyssd-charcoal-900); } } /* Print styles */ @media print { .diyssd-mobile-toggle, .diyssd-mobile-overlay, .diyssd-mobile-menu { display: none; } .diyssd-desktop-menu { display: flex; } }
catalog | product diy ssd

Product Catalog

Loading Airtable...

Please wait while the content loads

You can scroll inside the embedded window separately from the main page. Click inside the window to focus, then swipe up or down with your finger or mouse to scroll. Browse product reviews here.

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
© 2024, 2025 - All Rights Reserved
Brand Logo Icon | DIY SSD