/* ==========================================================================
DIYSSD Navigation Menu Styles
Scoped with 'diyssd-' prefix to prevent conflicts
========================================================================== */
/* 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: #f4f3f2;
position: relative;
z-index: 1000;
font-family: -apple-system, BlinkMacSystemFont, Inter, Roboto, Ubuntu,
sans-serif;
}
/* Navigation bar */
.diyssd-nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
max-width: 100%;
margin: 0 auto;
position: relative;
}
/* ==========================================================================
LOGO STYLES
========================================================================== */
.diyssd-logo {
flex-shrink: 0;
transition: opacity 0.2s ease;
}
.diyssd-logo:hover {
opacity: 0.8;
}
.diyssd-logo img {
height: auto;
width: auto;
max-height: 40px;
max-width: 250px;
display: block;
padding-right: 8px;
}
/* ==========================================================================
DESKTOP MENU STYLES
========================================================================== */
.diyssd-desktop-menu {
display: none;
align-items: center;
list-style: none;
gap: 0;
}
.diyssd-menu-item {
position: relative;
margin: 0;
}
.diyssd-menu-link {
display: flex;
align-items: center;
padding: 0.75rem 1.25rem;
text-decoration: none;
color: #374151;
font-weight: 500;
font-size: 0.95rem;
transition: all 0.2s ease;
border-radius: 4px;
white-space: nowrap;
}
.diyssd-menu-link:hover {
background-color: rgba(0, 0, 0, 0.05);
color: #1f2937;
}
/* Dropdown arrow */
.diyssd-menu-link.has-dropdown::after {
content: "▼";
font-size: 0.7rem;
margin-left: 0.5rem;
transition: transform 0.2s ease;
color: #6b7280;
}
.diyssd-menu-item:hover .diyssd-menu-link.has-dropdown::after {
transform: rotate(180deg);
}
/* Menu dividers for desktop */
.diyssd-menu-divider {
width: 1px;
height: 20px;
background-color: rgba(0, 0, 0, 0.4);
margin: 0 0.5rem;
}
/* ==========================================================================
DROPDOWN MENU STYLES
========================================================================== */
.diyssd-dropdown {
position: absolute;
top: 100%;
left: 0;
background-color: white;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(0, 0, 0, 0.08);
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
z-index: 1001;
overflow: hidden;
}
.diyssd-menu-item:hover .diyssd-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.diyssd-dropdown-link {
display: block;
padding: 0.75rem 1rem;
text-decoration: none;
color: #4b5563;
font-size: 0.9rem;
transition: all 0.15s ease;
border-bottom: 1px solid #f3f4f6;
}
.diyssd-dropdown-link:last-child {
border-bottom: none;
}
.diyssd-dropdown-link:hover {
background-color: #f9fafb;
background-color: #f2f4f5;
color: #1f2937;
color: #381f2f;
font-weight: 400;
}
/* ==========================================================================
MOBILE TOGGLE BUTTON (INDENTED LINES LIST ICON)
========================================================================== */
.diyssd-mobile-toggle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 0;
transition: all 0.2s ease;
}
.diyssd-mobile-toggle:hover {
background-color: rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
/* Indented list lines */
.diyssd-hamburger {
position: relative;
width: 24px;
height: 2px;
background-color: #374151;
transition: all 0.3s ease;
border-radius: 1px;
}
.diyssd-hamburger::before,
.diyssd-hamburger::after {
content: "";
position: absolute;
height: 2px;
background-color: #374151;
transition: all 0.3s ease;
border-radius: 1px;
}
/* Top line - full width */
.diyssd-hamburger::before {
top: -6px;
left: 0;
width: 24px;
}
/* Bottom line - full width */
.diyssd-hamburger::after {
bottom: -6px;
left: 0;
width: 24px;
}
/* Middle line (the hamburger element itself) - indented */
.diyssd-hamburger {
width: 18px;
margin-left: 6px;
}
/* Active state animation - transform to X */
.diyssd-mobile-toggle.active .diyssd-hamburger {
background-color: transparent;
transform: translateX(-3px);
}
.diyssd-mobile-toggle.active .diyssd-hamburger::before {
top: 0;
left: 0;
width: 24px;
transform: rotate(45deg);
}
.diyssd-mobile-toggle.active .diyssd-hamburger::after {
bottom: 0;
left: 0;
width: 24px;
transform: rotate(-45deg);
}
/* ==========================================================================
MOBILE MENU STYLES
========================================================================== */
.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 0.3s ease;
z-index: 1001;
}
.diyssd-mobile-overlay.active {
opacity: 1;
visibility: visible;
}
.diyssd-mobile-menu {
position: fixed;
top: 0;
left: 0;
height: 100%;
background-color: white;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 1002;
overflow-y: auto;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.diyssd-mobile-menu.active {
transform: translateX(0);
}
/* Mobile menu header */
.diyssd-mobile-header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 1rem;
border-bottom: 1px solid #e5e7eb;
background-color: #f9fafb;
}
.diyssd-mobile-close {
background: none;
border: none;
font-size: 1.25rem;
color: #6b7280;
cursor: pointer;
padding: 0.5rem;
border-radius: 4px;
transition: all 0.2s ease;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
}
.diyssd-mobile-close:hover {
background-color: #e5e7eb;
color: #374151;
}
/* Mobile navigation */
.diyssd-mobile-nav {
padding: 1rem;
}
.diyssd-mobile-section {
margin-bottom: 1.5rem;
}
.diyssd-mobile-heading {
font-size: 1.1rem;
font-weight: 600;
color: #1f2937;
margin-bottom: 0.5rem;
}
.diyssd-mobile-divider {
height: 1px;
background-color: #e5e7eb;
margin-bottom: 0.75rem;
}
.diyssd-mobile-link {
display: block;
padding: 0.75rem 1rem;
padding: 0.25rem 1rem;
text-decoration: none;
color: #4b5563;
font-size: 0.95rem;
margin-bottom: 0.25rem;
border-radius: 4px;
transition: all 0.2s ease;
font-family: -apple-system, BlinkMacSystemFont, Inter, Roboto, Ubuntu,
sans-serif;
}
.diyssd-mobile-link:hover {
background-color: #f3f4f6;
color: #1f2937;
}
/* ==========================================================================
RESPONSIVE BREAKPOINTS
========================================================================== */
/* Mobile: 640px and below */
@media (max-width: 640px) {
.diyssd-nav {
padding: 0.5rem 1rem;
}
.diyssd-logo img {
max-height: 32px;
max-width: 160px;
max-width: 250px;
padding-right: 0;
}
.diyssd-mobile-menu {
width: 100%;
}
.diyssd-mobile-toggle {
display: flex;
}
}
/* Mobile Landscape: 641px to 844px */
@media (min-width: 641px) and (max-width: 844px) {
.diyssd-mobile-menu {
width: 75%;
max-width: 450px;
}
.diyssd-mobile-toggle {
display: flex;
}
}
/* Tablet: 845px to 1080px */
@media (min-width: 845px) and (max-width: 1080px) {
.diyssd-mobile-menu {
width: 75%;
max-width: 500px;
}
.diyssd-mobile-toggle {
display: flex;
}
}
/* Desktop: 1081px to 1280px */
@media (min-width: 1081px) and (max-width: 1280px) {
.diyssd-desktop-menu {
display: flex;
}
.diyssd-mobile-toggle {
display: none;
}
}
/* Large Desktop: 1281px and above */
@media (min-width: 1281px) {
.diyssd-desktop-menu {
display: flex;
}
.diyssd-mobile-toggle {
display: none;
}
.diyssd-nav {
padding: 0.75rem 2rem;
}
}
/* ==========================================================================
ACCESSIBILITY & FOCUS STYLES
========================================================================== */
/* The outline will only be applied when a keyboard is used for navigation. */
body.diyssd-using-keyboard .diyssd-menu-link:focus,
body.diyssd-using-keyboard .diyssd-dropdown-link:focus,
body.diyssd-using-keyboard .diyssd-mobile-link:focus,
body.diyssd-using-keyboard .diyssd-mobile-toggle:focus,
body.diyssd-using-keyboard .diyssd-mobile-close:focus {
outline: 2px solid #3b82f6;
outline-offset: 2px;
}
/* Prevent body scroll when mobile menu is open */
.diyssd-nav-container.mobile-menu-open {
overflow: hidden;
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.diyssd-menu-divider {
background-color: #000;
}
.diyssd-dropdown {
border: 2px solid #000;
}
.diyssd-mobile-divider {
background-color: #000;
height: 2px;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.diyssd-nav-container * {
transition: none !important;
animation: none !important;
}
}
Best SSD for Every Build
Gamers, content creators, and PC enthusiasts
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!
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.
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.
VIDEO
The Smartest Tech Buy of the Holidays? It’s Storage.
Looking for the ultimate storage upgrade for the gamer or creator in your life? You’ll want to grab that drive now. With big tech companies prioritizing enterprise storage for AI, the supply of consumer NVMe SSD drives is tightening fast. That means the deals you see this Black Friday and Cyber Monday are likely the best prices we will see for awhile.
Grab the one upgrade that kills load times and keeps your edits running smooth, so your setup is ready before 2025 prices level up.
Browse our Exclusive Discounts
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.
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.
© 2024, 2025 - All Rights Reserved
