/* ========================================================================== 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; } }

Budget SATA 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

Budget SATA Catalog