=====================================================
H&T STORE GLOBAL HEADER
===================================================== */
.ht-site-header,
.ht-site-header * {
box-sizing: border-box;
}
.ht-site-header {
--ht-black: #111111;
--ht-gold: #d4af37;
--ht-gold-light: #e6c75a;
--ht-gold-dark: #b89120;
--ht-white: #ffffff;
--ht-cream: #f7f5f0;
--ht-border: rgba(17,17,17,.12);
position: relative;
z-index: 1000;
width: 100%;
font-family: inherit;
}
/* =====================================================
ANNOUNCEMENT BAR
===================================================== */
.ht-announcement {
min-height: 38px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px 20px;
background:
linear-gradient(
90deg,
var(--ht-gold-dark),
var(--ht-gold),
var(--ht-gold-light)
);
color: #111111 !important;
text-align: center;
font-size: 10px;
font-weight: 850;
letter-spacing: .14em;
text-transform: uppercase;
}
.ht-announcement,
.ht-announcement * {
color: #111111 !important;
}
/* =====================================================
MAIN HEADER
===================================================== */
.ht-header-main {
background: #ffffff;
border-bottom:
1px solid var(--ht-border);
}
.ht-header-container {
width: min(1480px, calc(100% - 48px));
min-height: 160px;
margin: 0 auto;
display: grid;
grid-template-columns: 440px 1fr auto;
align-items: center;
gap: 42px;
}
/* =====================================================
LOGO
===================================================== */
.ht-header-logo {
display: flex;
align-items: center;
justify-content: flex-start;
text-decoration: none;
}
.ht-header-logo img {
width: 220px;
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* =====================================================
DESKTOP NAVIGATION
===================================================== */
.ht-header-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 28px;
}
.ht-header-nav > a,
.ht-nav-dropdown > button {
position: relative;
padding: 66px 0;
border: 0;
background: transparent;
color: #111111 !important;
font-family: inherit;
font-size: 13px;
font-weight: 700;
text-decoration: none;
cursor: pointer;
}
.ht-header-nav > a::after,
.ht-nav-dropdown > button::after {
content: "";
position: absolute;
left: 0;
bottom: 49px;
width: 0;
height: 2px;
background: var(--ht-gold);
transition: width .2s ease;
}
.ht-header-nav > a:hover::after,
.ht-nav-dropdown > button:hover::after {
width: 100%;
}
/* =====================================================
SHOP DROPDOWN
===================================================== */
.ht-nav-dropdown {
position: relative;
}
.ht-nav-dropdown > button {
display: flex;
align-items: center;
gap: 7px;
}
.ht-nav-chevron {
width: 7px;
height: 7px;
border-right: 1.5px solid #111111;
border-bottom: 1.5px solid #111111;
transform:
rotate(45deg)
translateY(-2px);
}
.ht-nav-dropdown-menu {
position: absolute;
top: calc(100% - 35px);
left: -30px;
width: 270px;
padding: 12px;
visibility: hidden;
opacity: 0;
transform: translateY(10px);
background: #ffffff;
border:
1px solid rgba(17,17,17,.10);
border-radius: 16px;
box-shadow:
0 20px 55px rgba(0,0,0,.12);
transition:
opacity .2s ease,
transform .2s ease,
visibility .2s ease;
}
.ht-nav-dropdown:hover .ht-nav-dropdown-menu,
.ht-nav-dropdown:focus-within .ht-nav-dropdown-menu {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.ht-nav-dropdown-menu a {
min-height: 50px;
padding: 0 14px;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 10px;
color: #111111 !important;
font-size: 13px;
font-weight: 650;
text-decoration: none;
transition:
background .2s ease,
padding-left .2s ease;
}
.ht-nav-dropdown-menu a:hover {
padding-left: 18px;
background: var(--ht-cream);
}
.ht-nav-dropdown-menu a span {
color: var(--ht-gold) !important;
}
/* =====================================================
HEADER ACTION ICONS
===================================================== */
.ht-header-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.ht-header-action {
position: relative;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border:
1px solid rgba(17,17,17,.10);
border-radius: 50%;
background: #ffffff;
color: #111111 !important;
text-decoration: none;
transition:
border-color .2s ease,
background .2s ease,
transform .2s ease;
}
.ht-header-action:hover {
background: var(--ht-cream);
border-color: var(--ht-gold);
transform: translateY(-1px);
}
.ht-header-action svg {
width: 18px;
height: 18px;
stroke: #111111;
fill: none;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* CART COUNT */
.ht-cart-count {
position: absolute;
top: -4px;
right: -4px;
min-width: 18px;
height: 18px;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100px;
background: var(--ht-gold);
color: #111111 !important;
font-size: 9px;
font-weight: 850;
}
/* =====================================================
MOBILE TOGGLE
===================================================== */
.ht-mobile-toggle {
display: none;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
border:
1px solid rgba(17,17,17,.10);
border-radius: 50%;
background: #ffffff;
cursor: pointer;
}
.ht-mobile-toggle-lines {
width: 18px;
display: grid;
gap: 4px;
}
.ht-mobile-toggle-lines span {
width: 100%;
height: 1.5px;
display: block;
background: #111111;
}
/* =====================================================
MOBILE MENU
===================================================== */
.ht-mobile-menu {
display: none;
background: #ffffff;
border-bottom:
1px solid rgba(17,17,17,.10);
}
.ht-mobile-menu.is-open {
display: block;
}
.ht-mobile-menu-inner {
width: calc(100% - 28px);
margin: 0 auto;
padding: 12px 0 28px;
}
.ht-mobile-menu a {
min-height: 54px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom:
1px solid rgba(17,17,17,.09);
color: #111111 !important;
font-size: 15px;
font-weight: 700;
text-decoration: none;
}
.ht-mobile-menu a span {
color: var(--ht-gold) !important;
}
.ht-mobile-label {
padding-top: 24px;
color: #999999 !important;
font-size: 10px;
font-weight: 850;
letter-spacing: .15em;
text-transform: uppercase;
}
/* =====================================================
TABLET
===================================================== */
@media screen and (max-width: 1150px) {
.ht-header-container {
grid-template-columns: 340px 1fr auto;
gap: 25px;
}
.ht-header-logo img {
width: 340px;
}
.ht-header-nav {
gap: 18px;
}
.ht-header-nav > a,
.ht-nav-dropdown > button {
font-size: 12px;
}
}
/* =====================================================
MOBILE
===================================================== */
@media screen and (max-width: 900px) {
.ht-header-container {
width: calc(100% - 28px);
min-height: 110px;
grid-template-columns: 48px 1fr auto;
gap: 15px;
}
.ht-header-nav {
display: none;
}
.ht-mobile-toggle {
display: flex;
}
.ht-header-logo {
justify-content: center;
}
.ht-header-logo img {
width: 280px;
max-width: 100%;
}
.ht-account-action {
display: none;
}
}
/* =====================================================
SMALL MOBILE
===================================================== */
@media screen and (max-width: 520px) {
.ht-header-container {
min-height: 95px;
grid-template-columns: 42px 1fr auto;
gap: 9px;
}
.ht-header-logo img {
width: 230px;
max-width: 100%;
}
.ht-header-action,
.ht-mobile-toggle {
width: 40px;
height: 40px;
}
.ht-header-actions {
gap: 4px;
}
.ht-announcement {
min-height: 34px;
padding: 7px 10px;
font-size: 9px;
letter-spacing: .09em;
}
}
/* =====================================================
VERY SMALL MOBILE
===================================================== */
@media screen and (max-width: 390px) {
.ht-header-logo img {
width: 190px;
}
.ht-header-container {
width: calc(100% - 20px);
}
}
Instant Digital Delivery • Secure Checkout • 24/7 Access
