/* ========================================================================== 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; } } /* ========================================================================== NAVIGATION CONTAINER ========================================================================== */ .diyssd-nav-container { position: relative; width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== NAVIGATION BAR - TWO-CHILD FLEXBOX STRUCTURE ========================================================================== */ .diyssd-nav { display: flex; align-items: center; padding: 1rem 1.5rem; background-color: var(--charcoal-050); border-bottom: none; position: relative; z-index: 1000; gap: 2rem; /* Space between logo and menu */ min-height: 70px; } @media (min-width: 1281px) { .diyssd-nav { padding: 1rem 2rem; } } /* Left Container: Logo (grows to fill remaining space) */ .diyssd-nav-left { flex: 1 1 auto; /* Grows and shrinks, takes remaining space */ display: flex; align-items: center; min-width: 0; /* Allows shrinking below content size */ } /* Right Container: Menu (shrinks to content size) */ .diyssd-nav-right { flex: 0 0 auto; /* Doesn't grow or shrink, sizes to content */ display: flex; align-items: center; gap: 1rem; } /* ========================================================================== LOGO ========================================================================== */ .diyssd-logo { display: flex; align-items: center; text-decoration: none; -webkit-tap-highlight-color: transparent; max-width: 100%; /* Constrained by parent container */ } .diyssd-logo:focus { outline: none; } .diyssd-logo:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: 4px; } .diyssd-logo img { height: 50px; /* Back to original size */ width: auto; display: block; max-width: 100%; object-fit: contain; } @media (max-width: 1080px) { .diyssd-logo img { height: 40px; } } /* ========================================================================== DESKTOP MENU ========================================================================== */ .diyssd-desktop-menu { display: none; list-style: none; margin: 0; padding: 0; align-items: center; gap: 0; } @media (min-width: 1081px) { .diyssd-desktop-menu { display: flex; } } .diyssd-menu-item { position: relative; display: flex; align-items: center; } .diyssd-menu-link { display: flex; align-items: center; padding: 0.75rem 1.25rem; /* Restored to original */ color: var(--charcoal-900); text-decoration: none; font-size: 1rem; font-weight: 500; transition: all var(--transition-speed) var(--transition-easing); border-radius: 4px; white-space: nowrap; } @media (min-width: 1281px) { .diyssd-menu-link { padding: 0.75rem 1.5rem; /* Restored to original */ } } .diyssd-menu-link.has-dropdown::after { content: "▾"; margin-left: 0.5rem; font-size: 0.875rem; /* Increased from 0.75rem (12px → 14px) */ transition: transform var(--transition-speed) var(--transition-easing); } .diyssd-menu-link:hover { color: var(--ocean-blue); background-color: var(--charcoal-050); } .diyssd-menu-link:hover.has-dropdown::after { transform: rotate(180deg); } .diyssd-menu-link:focus { outline: none; } .diyssd-menu-link:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: 4px; } .diyssd-menu-link:active { background-color: var(--charcoal-050); transform: scale(0.98); } .diyssd-menu-divider { width: 1px; height: 20px; background-color: var(--charcoal-300); margin: 0 0.25rem; opacity: 0.8; } /* ========================================================================== DROPDOWN MENUS ========================================================================== */ .diyssd-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background-color: #ffffff; border: 1px solid var(--charcoal-100); border-radius: 8px; box-shadow: 0 4px 12px rgba(44, 44, 44, 0.15), 0 2px 4px rgba(44, 44, 44, 0.08); padding: 0.5rem 0; min-width: 200px; opacity: 0; visibility: hidden; transition: all var(--transition-speed) var(--transition-easing); z-index: 1001; margin-top: 0.5rem; } .diyssd-menu-item:hover .diyssd-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .diyssd-dropdown-link { display: block; padding: 0.75rem 1.5rem; color: var(--charcoal-900); text-decoration: none; font-size: 0.95rem; font-weight: 400; transition: all var(--transition-speed) var(--transition-easing); position: relative; } .diyssd-dropdown-link:hover { 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-100); } /* Active Link (current page) with Terracotta left border */ .diyssd-dropdown-link.active { color: var(--terracotta); background-color: rgba(199, 82, 42, 0.08); font-weight: 500; padding-left: calc(1.5rem + 3px); } .diyssd-dropdown-link.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: var(--terracotta); } /* ========================================================================== MOBILE TOGGLE BUTTON ========================================================================== */ .diyssd-mobile-toggle { display: none; flex-direction: column; justify-content: space-between; width: 28px; height: 22px; background: none; border: none; cursor: pointer; padding: 0; z-index: 1002; -webkit-tap-highlight-color: transparent; transition: transform var(--transition-speed) var(--transition-easing); } @media (max-width: 1080px) { .diyssd-mobile-toggle { display: flex; } } .diyssd-mobile-toggle:focus { outline: none; } .diyssd-mobile-toggle:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: 4px; } .diyssd-mobile-toggle:active { transform: scale(0.95); } .diyssd-mobile-toggle span { display: block; width: 100%; height: 3px; 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(9.5px) rotate(45deg); } .diyssd-mobile-toggle.active span:nth-child(2) { opacity: 0; } .diyssd-mobile-toggle.active span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); } /* ========================================================================== MOBILE OVERLAY ========================================================================== */ .diyssd-mobile-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 999; opacity: 0; transition: opacity var(--transition-speed) var(--transition-easing); } @media (max-width: 1080px) { .diyssd-mobile-overlay { display: block; pointer-events: none; } .diyssd-mobile-overlay.active { opacity: 1; pointer-events: auto; } } /* ========================================================================== MOBILE MENU ========================================================================== */ .diyssd-mobile-menu { display: none; position: fixed; top: 0; left: 0; bottom: 0; width: 100%; max-width: 100%; background-color: #ffffff; z-index: 1000; overflow-y: auto; transform: translate3d(-100%, 0, 0); transition: transform var(--transition-speed) var(--transition-easing); will-change: transform; contain: layout style paint; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1); } @media (max-width: 1080px) { .diyssd-mobile-menu { display: block; } .diyssd-mobile-menu.active { transform: translate3d(0, 0, 0); } } @media (min-width: 641px) and (max-width: 844px) { .diyssd-mobile-menu { width: 75%; max-width: 450px; } } @media (min-width: 845px) and (max-width: 1080px) { .diyssd-mobile-menu { width: 75%; max-width: 500px; } } .diyssd-mobile-header { display: flex; justify-content: flex-end; align-items: center; padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--charcoal-100); } .diyssd-mobile-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background-color: var(--charcoal-050); border: none; border-radius: 50%; cursor: pointer; font-size: 1.4rem; color: var(--charcoal-900); transition: all var(--transition-speed) var(--transition-easing); -webkit-tap-highlight-color: transparent; } .diyssd-mobile-close:hover { background-color: var(--charcoal-100); color: var(--ocean-blue); } .diyssd-mobile-close:focus { outline: none; } .diyssd-mobile-close:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .diyssd-mobile-close:active { transform: scale(0.95); } .diyssd-mobile-content { padding: 0.5rem 1rem; } .diyssd-mobile-section { margin-bottom: 0.65rem; background-color: rgba(245, 245, 245, 0.4); padding: 0.35rem 0.6rem 0.6rem 0.6rem; /* Reduced top padding: 0.6rem → 0.35rem */ border-radius: 6px; border-top: 2px solid var(--ocean-blue); } .diyssd-mobile-heading { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--charcoal-800); margin: 0 0 0.25rem 0; } .diyssd-mobile-divider { height: 1px; background-color: var(--charcoal-200); margin-bottom: 0.25rem; } .diyssd-mobile-link { display: flex; align-items: center; padding: 0.45rem 0.6rem; 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; } }

News & Announcements

December 3, 2025

The 2026 Consumer SSD Market Outlook

Micron is exiting consumer SSDs entirely by February 2026, while SK hynix pulls back from retail markets. With AI data centers consuming all available NAND production and prices already up 123% since mid-2025, the storage market faces unprecedented consolidation. Learn what this means for PC builders, expected pricing changes through 2027, and why you should buy storage now before costs climb further.

View Blog Post

December 2, 2025

Micron to exit SSD and Memory Market by 2026

Sad day for the DIY community. Micron announced today (Dec 3) that they are exiting the consumer market. No more Crucial SSDs or RAM after Feb 2026 as they pivot 100% to Data Center/AI. They confirmed warranties will still be honored, but stock is expected to dry up fast. If you were eyeing a T705 or cheap DDR5 kit, grab it now before prices hike. Full details in the release.

View News Release

November 22, 2025

Trend Markers Added to Pricing

SSD prices are climbing rapidly, up 5-10%, and industry insiders say the days of bargain storage might be over—at least until 2026. Cloud giants and AI demand are devouring supply, leaving everyday upgraders in the cold. If your gaming rig or content workflow craves more space, pounce on Black Friday deals now—waiting for a price drop could be a fantasy. View announcement for the full story!

View Announcement

November 16, 2025

Addlink AddGame A93 Added to Inventory

The Addlink AddGame A93 brings Gen4 NVMe power to PC and PS5 users hunting for real speed at a wallet-friendly price. Sporting up to 7,400 MB/s reads and robust TLC endurance, it’s the smart pick for faster gaming, faster boots, and faster file moves—just add a heatsink for sustained performance and you’re set.

View Features & Benefits

November 12, 2025

3-STEP SSD SHOPPING HACK (Save Time & Cash)

Tired of wading through endless SSD listings and confusing specs? This quick shopping hack shows how to cut through the noise, validate real discounts, and find the best deal fast.

Discover the three simple steps every smart SSD shopper should know—set your budget, lock in your specs, and surface genuine discounts to save time and money.

View YouTube

November 4, 2025

October Updates

DIY SSD just received a serious upgrade, starting with our revamped homepage that puts critical information right where you need it. Explore the redesigned pricing cards and the slick new menu that scales perfectly across all your devices. Our smarter layout gives you the ultimate control over your next SSD upgrade. Click 'View Details' to see the difference for yourself!

View Announcement

October 30, 2025

Corsair MP600 PRO LPX Added to Inventory

Ready for an SSD upgrade? The Corsair MP600 PRO LPX delivers top-tier speed, heat management, and wide compatibility—making it a smart pick for PS5 or desktop users seeking faster gaming, video editing, and effortless file transfers.

View Features & Benefits

October 20, 2025

Why I Use an External SSD with my Console

Learn how using an external SSD with your PlayStation 5 can boost load times, expand storage, and make managing your game library easier. Watch this video to learn why this setup isn’t the best fit for Xbox consoles, which rely on proprietary expansion cards for full next-gen performance.

View YouTube

About

Privacy

Terms