/* ========================================================================== FastRig Mega Menu Tune the whole thing from the variables below. Change --frm-accent once and every hover, focus ring and active state follows. ========================================================================== */ :root { --frm-bg: #0d0d0d; --frm-surface: #141414; --frm-surface-2: #1b1b1b; --frm-border: #262626; --frm-text: #e8e8e8; --frm-text-dim: #9a9a9a; --frm-text-faint: #666; --frm-accent: #8dc63f; /* FastRig green - actions, hover */ --frm-accent-ink: #0d0d0d; /* text on top of the accent */ --frm-sale: #f7941d; /* orange - reserve this for deals ONLY */ --frm-radius: 8px; --frm-bar-h: 48px; --frm-max: 1280px; --frm-font: inherit; } /* Kill the glow/gradient habit inside the nav specifically. */ .frm-bar *, .frm-drawer * { box-shadow: none; text-shadow: none; } /* ========================================================================== DESKTOP BAR ========================================================================== */ /* --------------------------------------------------------------- MOUNT STATE The markup is printed in the footer and moved into the header by megamenu.js, which then adds .frm-mounted to . Until that happens both pieces stay hidden so nothing flashes at the bottom of the page - and if the JS fails, nothing appears in the wrong place either. --------------------------------------------------------------- */ .frm-bar, .frm-mobile-trigger { display: none; } html.frm-mounted .frm-mobile-trigger { display: flex; } /* --------------------------------------------------------------- THE OLD HEADER NAV #center-header holds two things: .product-category-area - the old "All Category" dropdown .site-navigation - Home / Shop / T&Cs / Privacy / etc. Default: hide the category dropdown (our bar replaces it) and hide the page links too, because your FOOTER already carries every one of them as a crawlable link. Duplicating them here adds nothing. Want the page links back as a second row? Delete the second rule below - that one line is the whole switch. --------------------------------------------------------------- */ html.frm-mounted #center-header .product-category-area { display: none; } html.frm-mounted #center-header .site-navigation { display: none; } /* Keep the old row's container from leaving an empty gap. */ html.frm-mounted #center-header > .wrapper:empty, html.frm-mounted #center-header .navbar-controls { display: none; } .frm-bar { position: relative; z-index: 500; background: var(--frm-bg); border-top: 1px solid var(--frm-border); border-bottom: 1px solid var(--frm-border); font-family: var(--frm-font); } @media (min-width: 992px) { html.frm-mounted .frm-bar { display: block; } html.frm-mounted .frm-mobile-trigger { display: none !important; } } .frm-bar__inner { max-width: var(--frm-max); margin: 0 auto; padding: 0 16px; display: flex; align-items: stretch; justify-content: space-between; gap: 24px; } .frm-bar__groups, .frm-bar__utility { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; gap: 2px; } .frm-bar__group { position: static; display: flex; } .frm-bar__trigger { display: inline-flex; align-items: center; gap: 6px; height: var(--frm-bar-h); padding: 0 14px; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--frm-text); font: inherit; font-size: 14px; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: color .15s, border-color .15s; } .frm-bar__trigger:hover, .frm-bar__trigger[aria-expanded="true"] { color: var(--frm-accent); border-bottom-color: var(--frm-accent); } .frm-bar__trigger .frm-icon { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .18s; opacity: .6; } .frm-bar__trigger[aria-expanded="true"] .frm-icon { transform: rotate(-90deg); opacity: 1; } .frm-bar__utility a { display: inline-flex; align-items: center; gap: 7px; height: var(--frm-bar-h); padding: 0 12px; color: var(--frm-text-dim); font-size: 13px; font-weight: 600; text-decoration: none; transition: color .15s; } .frm-bar__utility a:hover { color: var(--frm-accent); } .frm-bar__utility .frm-icon { width: 15px; height: 15px; } /* ---------- Drop panel ---------- */ .frm-panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--frm-surface); border-bottom: 1px solid var(--frm-border); animation: frm-drop .16s ease-out; } .frm-panel[hidden] { display: none; } @keyframes frm-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .frm-panel__inner { max-width: var(--frm-max); margin: 0 auto; padding: 28px 16px 20px; display: flex; align-items: flex-start; gap: 32px; } .frm-panel__cols { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 28px; } .frm-panel__aside { flex: 0 0 260px; } @media (max-width: 1180px) { .frm-panel__aside { display: none; } /* promo needs room; drop it first */ } .frm-panel__col ul { list-style: none; margin: 0; padding: 0; } .frm-panel__heading { display: flex; align-items: center; gap: 7px; margin: 0 0 10px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--frm-text-faint); } .frm-icon--section { width: 13px; height: 13px; color: var(--frm-accent); opacity: .8; } /* ---- link rows: accent bar slides in on hover ---- */ .frm-panel__col a { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 10px; margin-left: -10px; border-radius: 6px; color: var(--frm-text); font-size: 14px; line-height: 1.35; text-decoration: none; transition: background .14s ease, color .14s ease; } .frm-panel__col a::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--frm-accent); transform: scaleY(0); transform-origin: center; transition: transform .16s ease; } .frm-panel__col a:hover, .frm-panel__col a:focus-visible { background: var(--frm-surface-2); color: var(--frm-accent); outline: none; } .frm-panel__col a:hover::before, .frm-panel__col a:focus-visible::before { transform: scaleY(1); } .frm-link__label { transition: transform .16s ease; } .frm-panel__col a:hover .frm-link__label { transform: translateX(2px); } .frm-count { flex: none; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--frm-text-faint); transition: color .14s ease; } .frm-panel__col a:hover .frm-count { color: var(--frm-text-dim); } /* ---- promo tile ---- */ .frm-promo { display: block; padding: 18px; background: var(--frm-surface-2); border: 1px solid var(--frm-border); border-radius: 10px; text-decoration: none; transition: border-color .16s ease, transform .16s ease; } .frm-promo:hover { border-color: var(--frm-accent); transform: translateY(-2px); } .frm-promo__media { display: block; margin: -18px -18px 14px; border-radius: 10px 10px 0 0; overflow: hidden; line-height: 0; } .frm-promo__media img { width: 100%; height: 130px; object-fit: cover; } .frm-promo__body { display: block; } .frm-promo__eyebrow { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--frm-accent); } .frm-promo__title { display: block; margin-bottom: 6px; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--frm-text); } .frm-promo__text { display: block; margin-bottom: 14px; font-size: 13px; line-height: 1.5; color: var(--frm-text-dim); } .frm-promo__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--frm-accent); } .frm-promo__cta .frm-icon { width: 15px; height: 15px; transition: transform .16s ease; } .frm-promo:hover .frm-promo__cta .frm-icon { transform: translateX(3px); } .frm-panel__foot { max-width: var(--frm-max); margin: 0 auto; padding: 0 16px 20px; border-top: 1px solid var(--frm-border); padding-top: 16px; } .frm-panel__all { display: inline-flex; align-items: center; gap: 6px; color: var(--frm-accent); font-size: 13px; font-weight: 700; text-decoration: none; } .frm-panel__all .frm-icon { width: 14px; height: 14px; } .frm-panel__all:hover { text-decoration: underline; } /* ========================================================================== MOBILE TRIGGER + DRAWER ========================================================================== */ .frm-mobile-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 16px; background: var(--frm-surface); border: 0; border-top: 1px solid var(--frm-border); border-bottom: 1px solid var(--frm-border); color: var(--frm-text); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; } .frm-mobile-trigger .frm-icon { width: 20px; height: 20px; color: var(--frm-accent); } .frm-drawer { position: fixed; inset: 0; z-index: 9999; } .frm-drawer[hidden] { display: none; } .frm-drawer__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); animation: frm-fade .18s ease-out; } @keyframes frm-fade { from { opacity: 0 } to { opacity: 1 } } .frm-drawer__sheet { position: absolute; inset: 0 0 0 0; max-width: 460px; background: var(--frm-bg); overflow: hidden; animation: frm-slide-in .22s cubic-bezier(.22,.61,.36,1); } @keyframes frm-slide-in { from { transform: translateX(-100%) } to { transform: none } } /* Each level is a full-height panel stacked in the same box. */ .frm-level { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--frm-bg); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform .22s cubic-bezier(.22,.61,.36,1); } .frm-level--root { transform: translateX(0); } .frm-level.is-active { transform: translateX(0); } .frm-level--root.is-parked { transform: translateX(-22%); } .frm-level[hidden] { display: none; } .frm-level__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 12px 12px; background: var(--frm-bg); border-bottom: 1px solid var(--frm-border); } .frm-level__title { flex: 1; font-size: 17px; font-weight: 700; color: var(--frm-text); } .frm-iconbtn { display: grid; place-items: center; width: 38px; height: 38px; background: var(--frm-surface); border: 1px solid var(--frm-border); border-radius: var(--frm-radius); color: var(--frm-text); cursor: pointer; } .frm-iconbtn .frm-icon { width: 18px; height: 18px; } .frm-iconbtn:hover { border-color: var(--frm-accent); color: var(--frm-accent); } .frm-level__search, .frm-level__filter { position: relative; margin: 12px; } .frm-level__search .frm-icon, .frm-level__filter .frm-icon { position: absolute; left: 12px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%); color: var(--frm-text-faint); pointer-events: none; } .frm-level__search input, .frm-level__filter input { width: 100%; padding: 12px 12px 12px 38px; background: var(--frm-surface); border: 1px solid var(--frm-border); border-radius: var(--frm-radius); color: var(--frm-text); font: inherit; font-size: 14px; } .frm-level__search input:focus, .frm-level__filter input:focus { outline: none; border-color: var(--frm-accent); } .frm-level__list { list-style: none; margin: 0; padding: 0 0 24px; } .frm-level__row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 15px 16px; background: none; border: 0; border-bottom: 1px solid var(--frm-border); color: var(--frm-text); font: inherit; font-size: 15px; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer; } .frm-level__row > span:first-of-type { flex: 1; } .frm-level__row .frm-icon { width: 17px; height: 17px; color: var(--frm-text-faint); flex: none; } .frm-level__row:hover { background: var(--frm-surface); color: var(--frm-accent); } .frm-level__row--all { color: var(--frm-accent); font-weight: 700; } .frm-level__kicker { padding: 18px 16px 7px; background: var(--frm-surface); border-bottom: 1px solid var(--frm-border); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--frm-text-faint); } .frm-level__apps { margin-top: auto; border-top: 1px solid var(--frm-border); } .frm-level__apps .frm-level__kicker { display: block; } /* Rows hidden by the level-2 filter box. */ .frm-level__list li.is-filtered, .frm-level__row.is-filtered, .frm-level__kicker.is-filtered { display: none; } /* Lock background scroll while the drawer is open. */ body.frm-drawer-open { overflow: hidden; } @media (min-width: 992px) { .frm-drawer { display: none !important; } } /* Respect users who asked for less motion. */ @media (prefers-reduced-motion: reduce) { .frm-panel, .frm-drawer__sheet, .frm-drawer__scrim { animation: none; } .frm-level { transition: none; } }