:root {
--dmhm-topbar-bg: #0f172a;
--dmhm-topbar-text: #e5e7eb;
--dmhm-topbar-icon: #6d28d9;
--dmhm-header-bg: #ffffff;
--dmhm-header-text: #111827;
--dmhm-header-accent: #6d28d9;
--dmhm-submenu-bg: #ffffff;
--dmhm-submenu-text: #111827;
--dmhm-submenu-hover-bg: #f3f4f6;
--dmhm-submenu-hover-text: #6d28d9;
--dmhm-max-width: 1280px;
--dmhm-min-width: 320px;
--dmhm-off-bg: #0f172a;
--dmhm-off-text: #ffffff;
--dmhm-off-accent: #8b5cf6;
--dmhm-off-width: 340px;
--dmhm-anim-speed: 450ms;
--dmhm-btn-bg: #6d28d9;
--dmhm-btn-bg-hover: #5b21b6;
--dmhm-btn-text: #ffffff;
}
.dmhm-header * {
box-sizing: border-box;
}
.dmhm-container {
width: 100%;
max-width: var(--dmhm-max-width);
min-width: var(--dmhm-min-width);
margin: 0 auto;
padding: 0 20px;
} .dmhm-topbar {
background: var(--dmhm-topbar-bg);
color: var(--dmhm-topbar-text);
font-size: 13.5px;
transition: max-height var(--dmhm-anim-speed) ease, opacity var(--dmhm-anim-speed) ease;
}
.dmhm-topbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 8px;
padding-bottom: 8px;
flex-wrap: wrap;
gap: 10px;
}
.dmhm-topbar-left {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
.dmhm-topbar-item {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--dmhm-topbar-text) !important;
text-decoration: none;
transition: color .25s ease;
}
.dmhm-topbar-item:hover {
color: var(--dmhm-topbar-icon) !important;
}
.dmhm-icon svg {
width: 15px;
height: 15px;
display: block;
color: var(--dmhm-topbar-icon) !important;
}
.dmhm-topbar-right.dmhm-social {
display: flex;
align-items: center;
gap: 10px;
}
.dmhm-social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: var(--dmhm-topbar-text) !important;
transition: transform .25s ease, background .25s ease, color .25s ease;
}
.dmhm-social-icon svg {
width: 14px;
height: 14px;
}
.dmhm-social-icon:hover {
background: var(--dmhm-topbar-icon);
color: #fff;
transform: translateY(-3px);
} .dmhm-main-header {
background: var(--dmhm-header-bg);
color: var(--dmhm-header-text);
transition: box-shadow .3s ease, padding .3s ease;
}
.dmhm-header.dmhm-sticky-enabled .dmhm-main-header {
position: relative;
z-index: 999;
} .dmhm-main-header.dmhm-fixed {
position: fixed !important;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 99999;
animation: dmhm-slide-down .35s ease;
}
@keyframes dmhm-slide-down {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
} .dmhm-header-spacer {
display: none;
}
.dmhm-header-spacer.dmhm-active {
display: block;
}
.dmhm-header.dmhm-scrolled .dmhm-main-header {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}
.dmhm-main-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 16px;
padding-bottom: 16px;
gap: 24px;
}
.dmhm-logo-link {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
}
.dmhm-logo-image {
display: inline-flex;
align-items: center;
}
.dmhm-logo img {
width: auto;
max-width: 100%;
display: block;
}
.dmhm-site-title {
font-size: 24px;
font-weight: 800;
color: var(--dmhm-header-text) !important;
text-decoration: none;
letter-spacing: -0.02em;
line-height: 1.2;
} .dmhm-header-btn {
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
background: var(--dmhm-btn-bg);
color: var(--dmhm-btn-text) !important;
text-decoration: none;
font-weight: 700;
font-size: 14.5px;
padding: 11px 24px;
border-radius: 8px;
margin-left: 12px;
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.dmhm-header-btn:hover {
background: var(--dmhm-btn-bg-hover);
color: var(--dmhm-btn-text) !important;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
} .dmhm-desktop-nav {
margin-left: auto;
}
.dmhm-menu {
display: flex;
align-items: center;
gap: 34px;
list-style: none;
margin: 0;
padding: 0;
}
.dmhm-menu li a {
position: relative;
color: var(--dmhm-header-text) !important;
text-decoration: none;
font-weight: 600;
font-size: 15.5px;
padding: 6px 0;
transition: color .25s ease;
}
.dmhm-menu li a::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 0;
height: 2px;
background: var(--dmhm-header-accent);
transition: width .3s ease;
}
.dmhm-menu li a:hover,
.dmhm-menu li a:focus {
color: var(--dmhm-header-accent) !important;
}
.dmhm-menu li a:hover::after,
.dmhm-menu li a:focus::after {
width: 100%;
}
.dmhm-menu li.menu-item-has-children {
position: relative;
}
.dmhm-menu .sub-menu {
position: absolute;
top: calc(100% + 18px);
left: 0;
min-width: 220px;
background: var(--dmhm-submenu-bg);
border-radius: 10px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
list-style: none;
margin: 0;
padding: 10px 0;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
z-index: 50;
}
.dmhm-menu li.menu-item-has-children:hover .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dmhm-menu .sub-menu li a {
display: block;
padding: 9px 20px;
color: var(--dmhm-submenu-text) !important;
font-weight: 500;
font-size: 14.5px;
transition: background .2s ease, color .2s ease;
}
.dmhm-menu .sub-menu li a::after {
display: none;
}
.dmhm-menu .sub-menu li a:hover {
background: var(--dmhm-submenu-hover-bg);
color: var(--dmhm-submenu-hover-text) !important;
} .dmhm-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px;
height: 42px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
flex-shrink: 0;
z-index: 20;
}
.dmhm-hamburger span {
display: block;
width: 26px;
height: 2.5px;
background: var(--dmhm-header-text);
border-radius: 2px;
transition: transform var(--dmhm-anim-speed) ease, opacity var(--dmhm-anim-speed) ease;
}
.dmhm-hamburger.dmhm-active span:nth-child(1) {
transform: translateY(7.5px) rotate(45deg);
}
.dmhm-hamburger.dmhm-active span:nth-child(2) {
opacity: 0;
}
.dmhm-hamburger.dmhm-active span:nth-child(3) {
transform: translateY(-7.5px) rotate(-45deg);
} .dmhm-offcanvas {
position: fixed;
top: 0;
bottom: 0;
width: var(--dmhm-off-width);
max-width: 90vw;
background: var(--dmhm-off-bg);
color: var(--dmhm-off-text);
z-index: 1001;
padding: 70px 30px 40px;
overflow-y: auto;
transition: transform var(--dmhm-anim-speed) cubic-bezier(.4, 0, .2, 1);
box-shadow: 0 0 60px rgba(0, 0, 0, 0.3);
}
.dmhm-offcanvas-right {
right: 0;
transform: translateX(100%);
}
.dmhm-offcanvas-left {
left: 0;
transform: translateX(-100%);
}
.dmhm-offcanvas.dmhm-active {
transform: translateX(0);
}
.dmhm-offcanvas-close {
position: absolute;
top: 20px;
right: 20px;
width: 42px;
height: 42px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.18);
color: var(--dmhm-off-text, #ffffff);
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
cursor: pointer;
z-index: 5;
transition: background .25s ease, transform .25s ease;
}
.dmhm-offcanvas-close svg {
width: 20px;
height: 20px;
display: block;
overflow: visible;
color: inherit;
stroke: currentColor;
}
.dmhm-offcanvas-close:hover {
background: var(--dmhm-off-accent);
transform: rotate(90deg);
}
.dmhm-offcanvas-menu {
list-style: none;
margin: 0 0 40px;
padding: 0;
}
.dmhm-offcanvas-menu li {
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
opacity: 0;
transform: translateX(24px);
transition: opacity .4s ease, transform .4s ease;
}
.dmhm-offcanvas.dmhm-active .dmhm-offcanvas-menu li {
opacity: 1;
transform: translateX(0);
}
.dmhm-offcanvas.dmhm-active .dmhm-offcanvas-menu li:nth-child(1) { transition-delay: .05s; }
.dmhm-offcanvas.dmhm-active .dmhm-offcanvas-menu li:nth-child(2) { transition-delay: .1s; }
.dmhm-offcanvas.dmhm-active .dmhm-offcanvas-menu li:nth-child(3) { transition-delay: .15s; }
.dmhm-offcanvas.dmhm-active .dmhm-offcanvas-menu li:nth-child(4) { transition-delay: .2s; }
.dmhm-offcanvas.dmhm-active .dmhm-offcanvas-menu li:nth-child(5) { transition-delay: .25s; }
.dmhm-offcanvas.dmhm-active .dmhm-offcanvas-menu li:nth-child(6) { transition-delay: .3s; }
.dmhm-offcanvas.dmhm-active .dmhm-offcanvas-menu li:nth-child(7) { transition-delay: .35s; }
.dmhm-offcanvas-menu li a {
display: block;
padding: 14px 4px;
color: var(--dmhm-off-text) !important;
text-decoration: none;
font-weight: 600;
font-size: 17px;
transition: color .25s ease, padding-left .25s ease;
}
.dmhm-offcanvas-menu li a:hover {
color: var(--dmhm-off-accent) !important;
padding-left: 10px;
} .dmhm-offcanvas-menu .menu-item-has-children > a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.dmhm-offcanvas-menu .menu-item-has-children > a::after {
content: "";
width: 9px;
height: 9px;
flex-shrink: 0;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .3s ease;
opacity: 0.8;
}
.dmhm-offcanvas-menu .menu-item-has-children.dmhm-submenu-open > a::after {
transform: rotate(-135deg);
}
.dmhm-offcanvas-menu .sub-menu {
list-style: none;
margin: 0;
padding-left: 14px;
max-height: 0;
overflow: hidden;
transition: max-height .35s ease;
}
.dmhm-offcanvas-menu .menu-item-has-children.dmhm-submenu-open > .sub-menu {
margin-bottom: 8px;
}
.dmhm-offcanvas-menu .sub-menu li {
border-bottom: none;
}
.dmhm-offcanvas-menu .sub-menu li a {
font-size: 14.5px;
font-weight: 500;
opacity: 0.8;
padding: 8px 4px;
}
.dmhm-offcanvas-menu .sub-menu li a::after {
display: none;
}
.dmhm-offcanvas-btn {
width: 100%;
margin-left: 0;
margin-bottom: 10px;
}
.dmhm-offcanvas-meta {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.dmhm-offcanvas-meta-item {
display: flex;
align-items: center;
gap: 10px;
color: var(--dmhm-off-text) !important;
text-decoration: none;
font-size: 14.5px;
opacity: 0.9;
}
.dmhm-offcanvas-meta-item:hover {
color: var(--dmhm-off-accent) !important;
}
.dmhm-offcanvas-meta-item .dmhm-icon svg {
color: var(--dmhm-off-accent) !important;
}
.dmhm-offcanvas-social {
display: flex;
gap: 10px;
margin-top: 6px;
} .dmhm-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity var(--dmhm-anim-speed) ease, visibility var(--dmhm-anim-speed) ease;
z-index: 1000;
}
.dmhm-overlay.dmhm-active {
opacity: 1;
visibility: visible;
}
body.dmhm-noscroll {
overflow: hidden;
} @media (max-width: 991px) {
.dmhm-desktop-nav {
display: none;
}
.dmhm-hamburger {
display: flex;
}
.dmhm-header-btn {
margin-left: auto;
}
.dmhm-topbar-left {
gap: 14px;
}
}
@media (max-width: 640px) {
.dmhm-topbar-inner {
justify-content: space-between;
flex-wrap: nowrap;
}
.dmhm-topbar-left {
justify-content: flex-start;
width: auto;
gap: 16px;
flex-shrink: 0;
}
.dmhm-topbar-item span:last-child {
display: none;
}
.dmhm-topbar-item {
gap: 0;
}
.dmhm-topbar-right.dmhm-social {
gap: 6px;
flex-shrink: 0;
overflow-x: auto;
scrollbar-width: none;
}
.dmhm-topbar-right.dmhm-social::-webkit-scrollbar {
display: none;
}
.dmhm-social-icon {
width: 26px;
height: 26px;
}
.dmhm-social-icon svg {
width: 12px;
height: 12px;
}
.dmhm-site-title {
font-size: 20px;
}
.dmhm-header-btn {
padding: 9px 16px;
font-size: 13px;
margin-left: auto;
}
}
@media (max-width: 420px) {
.dmhm-header-btn {
display: none;
}
}