/* ============================================================================
dwg-dsg-nav.css
Restyles the EXISTING dwg.us ProductCart header into the
dickssportinggoods.com look. Pure CSS overlay — no ASP/markup changes
required. Targets the real selectors found in header.asp.
INSTALL
-------
Upload this file to: /ecommerce/pc/dwg-dsg-nav.css
Then in header.asp, add this line as the LAST stylesheet in
(after pcStorefront.css and the superfish CSS, so it wins on cascade):
Palette is DWG navy. For a literal Dick's black header, set --brand:#111.
============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');
:root{
--dsg-brand:#0d3b66; /* DWG navy — logo, active, accents */
--dsg-brand-dark:#07294d;
--dsg-ink:#181818; /* primary bold text */
--dsg-soft:#5a5f66;
--dsg-line:#e4e6e9; /* hairlines */
--dsg-field:#f1f2f4; /* search fill */
--dsg-field-line:#c9ced4;
--dsg-sale:#c40b0b; /* Deals / sale red */
--dsg-save:#0a7d36; /* free-shipping green */
--dsg-shadow:0 14px 30px rgba(13,28,48,.14);
--dsg-hsans:'Archivo','Trebuchet MS',Arial,sans-serif;
--dsg-bsans:'Inter','Segoe UI',Arial,sans-serif;
}
/* ----------------------------------------------------------------------------
0 · ANNOUNCEMENT STRIP (#dabar : "VIP Distribution. Scalable Service…")
Thin, quiet top band like DSG's utility strip.
---------------------------------------------------------------------------- */
#dabar{
background:var(--dsg-brand) !important;
color:#fff !important;
font-family:var(--dsg-hsans);
font-weight:700;
letter-spacing:.06em;
text-transform:uppercase;
font-size:12px;
text-align:center;
padding:7px 12px !important;
}
/* the grey strip wrapper below the announcement — tighten it up */
.container-fluid[style*="background-color: #EEE"]{ background:#fff !important; }
/* ----------------------------------------------------------------------------
1 · MASTHEAD (logo / search / right) → clean white DSG bar
---------------------------------------------------------------------------- */
.peLogoRowMobile{ align-items:center; }
#pcHeaderLeft,#pcHeaderCenter,#pcHeaderRight{ display:flex; align-items:center; min-height:78px; }
#pcHeaderCenter{ width:100%; }
/* --- big rounded DSG search --- */
#pcHSearchForm{ width:100%; margin:0; }
.search-wrapper-container,.search-container{ width:100%; }
.search-container{
position:relative;
display:flex; align-items:center;
max-width:680px;
}
#pcHSearch{
flex:1;
height:46px !important;
border:1.5px solid var(--dsg-field-line) !important;
background:var(--dsg-field) !important;
border-radius:26px !important;
padding:0 150px 0 20px !important; /* room for advanced-search + Go */
font-family:var(--dsg-bsans) !important;
font-size:14.5px !important;
color:var(--dsg-ink) !important;
box-shadow:none !important;
transition:border-color .15s, background .15s;
}
#pcHSearch::placeholder{ color:#8a9099; }
#pcHSearch:focus{
outline:none !important;
border-color:var(--dsg-brand) !important;
background:#fff !important;
box-shadow:0 0 0 3px rgba(13,59,102,.12) !important;
}
/* keep the "ADVANCED SEARCH" link, just make it a subtle inline control */
#advancedSearchLink{
position:absolute; right:54px; top:50%; transform:translateY(-50%);
font-family:var(--dsg-hsans); font-weight:800;
font-size:9px; line-height:1.05; letter-spacing:.08em;
text-align:center; color:var(--dsg-soft) !important;
text-decoration:none !important; border-left:1px solid var(--dsg-field-line);
padding-left:10px;
}
#advancedSearchLink:hover{ color:var(--dsg-brand) !important; }
/* circular navy Go button with a magnifier */
#pcHSearchSubmit{
position:absolute; right:5px; top:50%; transform:translateY(-50%);
width:36px; height:36px; border-radius:50% !important;
background:var(--dsg-brand) !important; color:transparent !important;
border:0 !important; font-size:0 !important; padding:0 !important;
cursor:pointer; transition:background .15s;
}
#pcHSearchSubmit::before{
content:"\f002"; font-family:"FontAwesome"; /* FA4 already loaded */
font-size:16px; color:#fff;
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
#pcHSearchSubmit:hover{ background:var(--dsg-brand-dark) !important; }
/* ----------------------------------------------------------------------------
2 · DESKTOP CATEGORY BAR (#topmenu-wrap) → bold DSG nav + mega flyouts
Works on every tab (Data Comm … Deals) because the rules are structural,
not tied to the tab-one/tab-eight sliding-door classes.
---------------------------------------------------------------------------- */
#pcNavContainer45{ background:#fff; }
#topmenu-wrap{
background:#fff !important;
border-top:1px solid var(--dsg-line);
border-bottom:1px solid var(--dsg-line);
padding:0 !important;
}
#topmenu-wrap > ul{
display:flex !important; flex-wrap:wrap; align-items:stretch;
list-style:none; margin:0 auto; padding:0;
max-width:1320px;
}
#topmenu-wrap > ul > li{
position:relative; float:none !important; background:none !important;
list-style:none;
}
/* kill the old sliding-door sprite backgrounds on the tab labels */
#topmenu-wrap > ul > li > a,
#topmenu-wrap a.tab-eight,
#topmenu-wrap a.tab-nine,
#topmenu-wrap a[class^="tab-"]{
display:flex !important; align-items:center;
height:48px; padding:0 16px !important;
background:none !important; background-image:none !important;
border:0 !important; border-bottom:3px solid transparent !important;
font-family:var(--dsg-hsans) !important;
font-weight:800 !important; font-size:13.5px !important;
letter-spacing:.04em; text-transform:uppercase;
color:var(--dsg-ink) !important; text-decoration:none !important;
white-space:nowrap; transition:color .12s, border-color .12s;
}
#topmenu-wrap > ul > li > a:hover{
color:var(--dsg-brand) !important; border-bottom-color:var(--dsg-brand) !important;
}
/* Deals tab in DSG sale-red (it's the tab-nine item) */
#topmenu-wrap > ul > li > a.tab-nine{ color:var(--dsg-sale) !important; }
#topmenu-wrap > ul > li > a.tab-nine:hover{ border-bottom-color:var(--dsg-sale) !important; }
/* the little caret toggles inside dropdown tabs */
#topmenu-wrap .dropdown-toggle.caret,#topmenu-wrap b.caret{ display:none !important; }
/* --- mega flyout panel (.ulwrap) --- */
#topmenu-wrap .ulwrap{
position:absolute !important; top:100% !important; left:0 !important;
z-index:1200;
background:#fff !important;
border:1px solid var(--dsg-line) !important;
border-top:3px solid var(--dsg-brand) !important;
box-shadow:var(--dsg-shadow) !important;
border-radius:0 0 10px 10px;
padding:22px 26px !important;
min-width:520px;
}
#topmenu-wrap li > a.tab-nine ~ .ulwrap,
#topmenu-wrap .ulwrap.nine{ border-top-color:var(--dsg-sale) !important; min-width:300px; }
/* neutralize the sprite-based rounded-corner wrappers */
#topmenu-wrap .outline-left,
#topmenu-wrap .outline,
#topmenu-wrap .corner-wrap,
#topmenu-wrap .ulwrap > span.tab-eight,
#topmenu-wrap .ulwrap > span.tab-nine{
background:none !important; background-image:none !important;
border:0 !important; padding:0 !important; margin:0 !important; display:block;
}
#topmenu-wrap .ulwrap > span.tab-eight,
#topmenu-wrap .ulwrap > span.tab-nine{ display:none !important; } /* empty sprite tab */
/* multiple inside corner-wrap become mega-menu columns */
#topmenu-wrap .corner-wrap{
display:flex !important; flex-wrap:wrap; gap:6px 34px; align-items:flex-start;
}
#topmenu-wrap .corner-wrap > ul{
display:block !important; list-style:none; margin:0 !important; padding:0 !important;
min-width:170px; column-count:1 !important; /* override #peUL2 columns */
border:0 !important; background:none !important; box-shadow:none !important;
}
#topmenu-wrap .corner-wrap ul li{
float:none !important; background:none !important; list-style:none; margin:0;
}
#topmenu-wrap .corner-wrap ul li a{
display:block !important; padding:6px 0 !important;
background:none !important; background-image:none !important;
border:0 !important; white-space:normal;
font-family:var(--dsg-bsans) !important; font-weight:500 !important;
font-size:13.5px !important; letter-spacing:0; text-transform:none !important;
color:var(--dsg-ink) !important; text-decoration:none !important;
transition:color .12s;
}
#topmenu-wrap .corner-wrap ul li a:hover{
color:var(--dsg-brand) !important; text-decoration:underline !important;
}
#topmenu-wrap .corner-wrap ul li a strong{ color:var(--dsg-brand) !important; }
/* keep your existing hover/superfish reveal; this is just a safety net */
#topmenu-wrap > ul > li:hover .ulwrap{ display:block !important; }
/* --- sticky state (.fix) → DSG full-width white bar + shadow --- */
#topmenu-wrap.fix{
position:fixed !important; top:0; left:0; right:0; z-index:1100;
background:#fff !important;
box-shadow:0 4px 14px rgba(13,28,48,.12) !important;
border-top:0;
}
#topmenu-wrap.fix > ul{ padding:0 22px; }
/* ----------------------------------------------------------------------------
3 · UTILITY / CART BAR (#fullwidthCartLinksbar)
Sits just under the category bar; styled as a clean DSG action strip.
---------------------------------------------------------------------------- */
#fullwidthCartLinksbar{
border-bottom:1px solid var(--dsg-line);
background:#fff;
}
#pcIconBarContainer{ max-width:1320px; margin:0 auto; align-items:center; padding:8px 6px; }
/* dealer-account message (left) */
#pcIconBarLeft.dealer-account .dealer-message{ margin:0; font-family:var(--dsg-bsans); font-size:13px; color:var(--dsg-soft); }
.dealer-link{
display:inline-block; font-family:var(--dsg-hsans); font-weight:800;
font-size:12px; letter-spacing:.04em; text-transform:uppercase;
color:#fff !important; background:var(--dsg-brand);
padding:7px 14px; border-radius:20px; text-decoration:none !important;
margin-left:6px;
}
.dealer-link:hover{ background:var(--dsg-brand-dark); }
.dealer-button{ border-radius:20px !important; }
/* right-side links: Sign In · Checkout · Help · Cart */
#pcIconBarRight{ text-align:right; font-family:var(--dsg-hsans); }
#pcIconBarRight .pcIconBarSeparator{
font-weight:700 !important; font-size:13px; letter-spacing:.02em;
color:var(--dsg-ink) !important; text-decoration:none !important;
padding:0 14px; border-left:1px solid var(--dsg-line);
}
#pcIconBarRight .pcIconBarSeparator:first-child{ border-left:0; }
#pcIconBarRight a.pcIconBarSeparator:hover{ color:var(--dsg-brand) !important; }
/* icons via Font Awesome 4 (already loaded) */
#pcIconBarRight a[href*="custPref"]::before{ content:"\f007"; font-family:"FontAwesome"; margin-right:6px; color:var(--dsg-brand); }
#pcIconBarRight a[href*="checkout"]::before{ content:"\f07a"; font-family:"FontAwesome"; margin-right:6px; color:var(--dsg-brand); }
#pcIconBarRight a[href*="idpage=13"]::before{ content:"\f059"; font-family:"FontAwesome"; margin-right:6px; color:var(--dsg-brand); }
/* the place-order / on-behalf banner — keep it loud but on-brand */
.SPbanner{ background:var(--dsg-sale) !important; }
/* ----------------------------------------------------------------------------
4 · MOBILE (meanmenu builds .mean-bar / .mean-nav from .pc-nav)
---------------------------------------------------------------------------- */
.mean-container .mean-bar{ background:var(--dsg-brand) !important; padding:8px 0; min-height:46px; }
.mean-container a.meanmenu-reveal{
color:#fff !important; font-weight:800; font-family:var(--dsg-hsans);
text-transform:uppercase; letter-spacing:.06em;
}
.mean-container a.meanmenu-reveal span{ background:#fff !important; }
.mean-container .mean-nav{ background:#0a3157 !important; }
.mean-container .mean-nav ul li a{
font-family:var(--dsg-bsans); font-size:14px;
color:#eaf1f8 !important; border-top:1px solid rgba(255,255,255,.08) !important;
text-transform:none;
}
.mean-container .mean-nav ul li a.mean-expand{ border:0 !important; }
.mean-container .mean-nav ul li a:hover{ background:rgba(255,255,255,.06) !important; }
.mean-container .mean-nav ul li li a{ opacity:.9; padding-left:10%; }
/* On small screens the desktop bar is already hidden via .hidden-xs/.hidden-sm.
Make the masthead search full-width and comfortable. */
@media (max-width:991px){
#pcHeaderLeft,#pcHeaderCenter{ min-height:0; }
.search-container{ max-width:none; }
#dabar{ font-size:11px; letter-spacing:.04em; }
}
/* ============================================================================
PATCH (added after live review)
A · keep all category tabs on ONE line — no wrapping to a 2nd row
B · vertically center the dealer "CLICK HERE" pill with its text
============================================================================ */
/* A — single-row nav, tightened so 8 items fit */
#topmenu-wrap > ul{ flex-wrap:nowrap !important; }
#topmenu-wrap > ul > li{ flex:0 0 auto; }
#topmenu-wrap > ul > li > a,
#topmenu-wrap a[class^="tab-"]{
padding:0 12px !important;
font-size:12.5px !important;
letter-spacing:.02em;
}
/* on medium screens (992–1199px) squeeze a little more so nothing clips */
@media (min-width:992px) and (max-width:1199px){
#topmenu-wrap > ul > li > a,
#topmenu-wrap a[class^="tab-"]{
padding:0 8px !important;
font-size:11.5px !important;
letter-spacing:0;
}
}
/* B — dealer message + pill on one centered line */
#pcIconBarLeft.dealer-account .dealer-message{
display:flex !important;
align-items:center;
gap:8px;
flex-wrap:wrap;
line-height:1.2;
margin:0;
}
.dealer-link{ margin-left:0 !important; }
/* ============================================================================
PATCH C — taller category bar to match DSG's nav proportions
============================================================================ */
#topmenu-wrap > ul > li > a,
#topmenu-wrap a[class^="tab-"]{
height:58px !important;
}
/* ============================================================================
PATCH D — vertical centering + proportions (after 2nd live review)
============================================================================ */
/* category labels: TRUE vertical centering (was bottom-aligned) + taller bar */
#topmenu-wrap > ul > li > a,
#topmenu-wrap a[class^="tab-"]{
height:64px !important;
display:flex !important;
align-items:center !important;
justify-content:center;
line-height:1 !important;
padding-top:0 !important;
padding-bottom:0 !important;
}
/* SEARCH — kill the leftover boxed look on "ADVANCED SEARCH" + size the field up */
#pcHSearch{ height:50px !important; }
#advancedSearchLink{
background:none !important;
border:0 !important;
border-left:1px solid var(--dsg-field-line) !important;
border-radius:0 !important;
box-shadow:none !important;
}
#pcHSearchSubmit{ width:40px !important; height:40px !important; }
/* DEALER / CART utility row — more vertical height so it isn't cramped */
#fullwidthCartLinksbar{ min-height:54px; }
#pcIconBarContainer{
padding-top:14px !important;
padding-bottom:14px !important;
}
/* ============================================================================
PATCH E — beat the legacy menu CSS on SPECIFICITY (2 IDs), fix dividers/box
============================================================================ */
/* (1) category bar height + true centering — 2 IDs to outrank superfish's .sf-menu a */
#pcNavContainer45 #topmenu-wrap > ul{ align-items:stretch !important; }
#pcNavContainer45 #topmenu-wrap > ul > li{ display:flex !important; align-items:stretch !important; }
#pcNavContainer45 #topmenu-wrap > ul > li > a,
#pcNavContainer45 #topmenu-wrap a[class^="tab-"]{
height:64px !important; min-height:64px !important;
display:flex !important; align-items:center !important; justify-content:center !important;
line-height:1 !important; padding:0 12px !important;
}
/* (2) duplicate dividers — remove the one I added; keep the storefront's existing single divider */
#pcIconBarRight .pcIconBarSeparator{ border-left:0 !important; }
#pcIconBarRight .pcIconBarSeparator1{ display:none !important; } /* leftover empty call-us span */
/* (3) Advanced Search box — force-strip the legacy border/background */
#pcHeaderCenter a#advancedSearchLink,
a#advancedSearchLink{
background:transparent !important; background-image:none !important;
border:0 !important; border-left:1px solid var(--dsg-field-line) !important;
border-radius:0 !important; box-shadow:none !important;
}