/* ═══ BLOG NAV → PILL STYLE ═══ */
nav[aria-label="Blog"] ul {
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
justify-content: center !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
nav[aria-label="Blog"] li {
margin: 0 !important;
border: none !important;
}
/* the pills themselves */
nav[aria-label="Blog"] a[data-hook="link"] {
display: inline-block !important;
padding: 8px 16px !important;
border-radius: 20px !important;
font-family: 'Public Sans', sans-serif !important;
font-size: 12.5px !important;
font-weight: 600 !important;
letter-spacing: .02em !important;
border: 1.5px solid rgba(26, 31, 26, .18) !important;
color: #4a534c !important;
background: transparent !important;
transition: background .18s ease, border-color .18s ease, color .18s ease !important;
text-decoration: none !important;
}
nav[aria-label="Blog"] a[data-hook="link"]:hover {
background: #4cb853 !important;
border-color: #4cb853 !important;
color: #fff !important;
}
/* active category */
nav[aria-label="Blog"] a[aria-current="page"] {
background: #db4105 !important;
border-color: #db4105 !important;
color: #fff !important;
}
/* "More" dropdown button — match the pills */
nav[aria-label="Blog"] button {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 8px 16px !important;
border-radius: 20px !important;
font-family: 'Public Sans', sans-serif !important;
font-size: 12.5px !important;
font-weight: 600 !important;
border: 1.5px solid rgba(26, 31, 26, .18) !important;
color: #4a534c !important;
background: transparent !important;
cursor: pointer !important;
}
nav[aria-label="Blog"] button:hover {
background: #4cb853 !important;
border-color: #4cb853 !important;
color: #fff !important;
}
nav[aria-label="Blog"] button svg { fill: currentColor !important; }
/* dropdown panel */
nav[aria-label="Blog"] [data-hook="blog-desktop-header-dropdown-menu-container"] ul {
display: block !important;
background: #fff !important;
border: 1px solid #e3e0d5 !important;
border-radius: 8px !important;
padding: 8px !important;
box-shadow: 0 6px 30px rgba(0,0,0,.10) !important;
}
nav[aria-label="Blog"] [data-hook="blog-desktop-header-dropdown-menu-container"] a {
display: block !important;
border: none !important;
border-radius: 4px !important;
padding: 8px 12px !important;
text-align: left !important;
}
top of page
bottom of page
