.module-workspace-hero [hidden] { display: none !important; }
.module-workspace-hero.mh-themed {
--mh-a: #0a84ff;
--mh-b: #34c759;
--mh-deep: #0a5bd6;
--mh-wash: rgba(10, 132, 255, 0.10);
position: relative;
overflow: hidden;
min-height: 322px;
padding: 26px 32px 28px;
border-radius: var(--radius-xl);
background: linear-gradient(118deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.68) 50%, rgba(255, 255, 255, 0.52) 100%);
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
inset 0 -1px 0 rgba(255, 255, 255, 0.35),
inset 1px 0 0 rgba(255, 255, 255, 0.5),
0 24px 60px rgba(15, 23, 42, 0.10),
0 2px 6px rgba(15, 23, 42, 0.04);
backdrop-filter: blur(18px) saturate(1.7);
-webkit-backdrop-filter: blur(18px) saturate(1.7);
}
.module-workspace-hero.mh-themed[data-module-theme="mtma"],
.dh-journey[data-module-theme="mtma"],
.dh-node[data-module-theme="mtma"],
.ob-wb-themed[data-module-theme="mtma"],
.arena-hero-tile[data-module-theme="mtma"] {
--mh-a: #0d9488;
--mh-b: #0891b2;
--mh-deep: #0f766e;
--mh-wash: rgba(13, 148, 136, 0.14);
}
.module-workspace-hero.mh-themed[data-module-theme="mtmb"],
.dh-journey[data-module-theme="mtmb"],
.dh-node[data-module-theme="mtmb"],
.ob-wb-themed[data-module-theme="mtmb"],
.arena-hero-tile[data-module-theme="mtmb"] {
--mh-a: #65a30d;
--mh-b: #059669;
--mh-deep: #3f6212;
--mh-wash: rgba(101, 163, 13, 0.14);
}
.module-workspace-hero.mh-themed[data-module-theme="hoad"],
.dh-journey[data-module-theme="hoad"],
.dh-node[data-module-theme="hoad"],
.ob-wb-themed[data-module-theme="hoad"],
.arena-hero-tile[data-module-theme="hoad"] {
--mh-a: #f87171;
--mh-b: #be123c;
--mh-deep: #b91c1c;
--mh-wash: rgba(239, 68, 68, 0.13);
}
.module-workspace-hero.mh-themed[data-module-theme="msk"],
.dh-journey[data-module-theme="msk"],
.dh-node[data-module-theme="msk"],
.ob-wb-themed[data-module-theme="msk"],
.arena-hero-tile[data-module-theme="msk"] {
--mh-a: #eab308;
--mh-b: #ea580c;
--mh-deep: #a16207;
--mh-wash: rgba(234, 179, 8, 0.15);
}
.module-workspace-hero.mh-themed[data-module-theme="cav"],
.dh-journey[data-module-theme="cav"],
.dh-node[data-module-theme="cav"],
.ob-wb-themed[data-module-theme="cav"],
.arena-hero-tile[data-module-theme="cav"] {
--mh-a: #2563eb;
--mh-b: #e11d48;
--mh-deep: #be123c;
--mh-wash: rgba(225, 29, 72, 0.12);
}
.module-workspace-hero.mh-themed[data-module-theme="rar"],
.dh-journey[data-module-theme="rar"],
.dh-node[data-module-theme="rar"],
.ob-wb-themed[data-module-theme="rar"],
.arena-hero-tile[data-module-theme="rar"] {
--mh-a: #38bdf8;
--mh-b: #0284c7;
--mh-deep: #0369a1;
--mh-wash: rgba(56, 189, 248, 0.15);
}
.module-workspace-hero.mh-themed[data-module-theme="gin"],
.dh-journey[data-module-theme="gin"],
.dh-node[data-module-theme="gin"],
.ob-wb-themed[data-module-theme="gin"],
.arena-hero-tile[data-module-theme="gin"] {
--mh-a: #f59e0b;
--mh-b: #f43f5e;
--mh-deep: #c2410c;
--mh-wash: rgba(251, 146, 60, 0.16);
}
.module-workspace-hero.mh-themed[data-module-theme="enr"],
.dh-journey[data-module-theme="enr"],
.dh-node[data-module-theme="enr"],
.ob-wb-themed[data-module-theme="enr"],
.arena-hero-tile[data-module-theme="enr"] {
--mh-a: #f472b6;
--mh-b: #db2777;
--mh-deep: #be185d;
--mh-wash: rgba(244, 114, 182, 0.15);
}
.module-workspace-hero.mh-themed[data-module-theme="bab"],
.dh-journey[data-module-theme="bab"],
.dh-node[data-module-theme="bab"],
.ob-wb-themed[data-module-theme="bab"],
.arena-hero-tile[data-module-theme="bab"] {
--mh-a: #3b82f6;
--mh-b: #1e3a8a;
--mh-deep: #1e40af;
--mh-wash: rgba(59, 130, 246, 0.13);
}
.module-workspace-hero.mh-themed::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(52% 88% at 80% 46%, var(--mh-wash), transparent 72%);
}
.module-workspace-hero.mh-themed::after {
content: "";
position: absolute;
left: 6%;
right: 6%;
top: 0;
height: 1px;
pointer-events: none;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.95) 70%, transparent);
}
.module-workspace-hero.mh-themed > * {
position: relative;
z-index: 1;
max-width: min(640px, 56%);
}
.module-workspace-hero.mh-themed > .section-label,
.module-workspace-hero.mh-themed > .module-workspace-meta {
display: none;
}
.mh-brand {
display: inline-flex;
align-items: center;
gap: 10px;
}
.mh-brand img {
display: block;
height: 28px;
width: auto;
}
.mh-brand span {
padding-left: 10px;
border-left: 1px solid rgba(15, 23, 42, 0.18);
color: var(--mh-deep);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.module-workspace-hero.mh-themed .module-workspace-title {
margin: 18px 0 0;
color: var(--text);
font-size: clamp(64px, 8vw, 96px);
line-height: 0.86;
letter-spacing: -0.07em;
word-spacing: 0.14em;
}
.module-workspace-hero.mh-themed .module-workspace-title::after {
content: "";
display: block;
width: 64px;
height: 5px;
margin-top: 16px;
border-radius: 5px;
background: linear-gradient(90deg, var(--mh-a), var(--mh-b));
}
.module-workspace-hero.mh-themed .module-workspace-subtitle {
margin: 14px 0 0;
color: var(--text);
font-size: 23px;
font-weight: 750;
line-height: 1.2;
letter-spacing: -0.03em;
}
.module-workspace-hero.mh-themed .module-workspace-overview {
margin: 10px 0 0;
max-width: min(60ch, 56%);
color: var(--text);
font-size: 14.5px;
line-height: 1.55;
}
.mh-stats {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
}
.mh-stats span {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(255, 255, 255, 0.75);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
color: var(--text);
font-size: 12px;
font-weight: 800;
}
.mh-stats b { color: var(--mh-deep); }
.module-workspace-hero.mh-themed > .mh-art {
position: absolute;
z-index: 0;
top: -8%;
bottom: -6%;
right: 2%;
width: min(46%, 540px);
max-width: none;
pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 13%);
mask-image: linear-gradient(90deg, transparent 0, #000 13%);
}
.mh-art svg {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
}
.mh-art .mh-draw {
stroke-dasharray: 1;
stroke-dashoffset: 1;
animation: mh-draw 1250ms cubic-bezier(0.33, 0.9, 0.4, 1) forwards;
animation-delay: var(--d, 0ms);
}
.mh-art .mh-fade {
opacity: 0;
animation: mh-fade 900ms ease forwards;
animation-delay: var(--d, 300ms);
}
@keyframes mh-draw {
from { stroke-dashoffset: 1; opacity: 0; }
8% { opacity: 1; }
to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes mh-fade { to { opacity: 1; } }
.mh-art .mh-beat {
transform-box: fill-box;
transform-origin: 50% 62%;
animation: mh-beat 1.1s ease-in-out infinite;
}
@keyframes mh-beat {
0%, 42%, 100% { transform: scale(1); }
10% { transform: scale(1.022); }
20% { transform: scale(0.998); }
30% { transform: scale(1.012); }
}
.mh-art .mh-breath {
transform-box: fill-box;
transform-origin: 50% 0;
animation: mh-breath 5s ease-in-out infinite;
}
@keyframes mh-breath {
0%, 100% { transform: scale(1); }
42% { transform: scale(1.028); }
}
.mh-art.is-paused,
.mh-art.is-paused * {
animation-play-state: paused !important;
}
.mh-art text {
font-family: inherit;
letter-spacing: -0.01em;
}
@media (prefers-reduced-motion: reduce) {
.mh-art .mh-draw,
.mh-art .mh-fade {
animation: none;
stroke-dashoffset: 0;
opacity: 1;
}
.mh-art .mh-beat,
.mh-art .mh-breath {
animation: none;
}
}
@media (max-width: 900px) {
.module-workspace-hero.mh-themed > *,
.module-workspace-hero.mh-themed .module-workspace-overview {
max-width: none;
}
.module-workspace-hero.mh-themed > .mh-art {
right: -14%;
width: 80%;
opacity: 0.3;
}
}
@media (max-width: 560px) {
.module-workspace-hero.mh-themed {
min-height: 0;
padding: 22px 20px 24px;
}
.mh-brand { flex-wrap: wrap; }
.mh-brand img { height: 24px; }
.module-workspace-hero.mh-themed .module-workspace-title { font-size: 68px; }
.module-workspace-hero.mh-themed .module-workspace-subtitle { font-size: 19px; }
}