/* AUTO-GENERATED by scripts/build_assets.py — منبع را ویرایش کن و اسکریپت را دوباره اجرا کن (2026-08-29) */
/* ==== src: style.css ==== */
:root {
--bm-blue: #0077b6;
--bm-blue-dark: #025c8f;
--bm-blue-deep: #00578c;
--bm-navy: #013a5f;
--bm-accent: #00b4d8;
--bm-blue-soft: #e4f5fa;
--bm-turq: #0090bf;
--bm-turq-soft: #d9f3fa;
--bm-sky: #90e0ef;
--bm-orange: #f4581c;
--bm-orange-soft: #ffe8dc;
--bm-red: #d32424;
--bm-red-dark: #b01c1c;
--bm-red-soft: #fdeaea;
--bm-blue-grad: #0077b6;
--bm-grad-fun: #0077b6;
--bm-grad-hot: #d32424;
--bm-grad-cool: #00578c;
--bm-rim: #d32424;
--bm-bg: #ecf3f7;
--bm-surface: #ffffff;
--bm-line: #dfeaf0;
--bm-text: #21384d;
--bm-text-2: #5a7185;
--bm-gold: #ffb300;
--bm-green: #16a34a;
--bm-radius-lg: 18px;
--bm-radius: 14px;
--bm-radius-sm: 10px;
--bm-shadow-1: 0 1px 2px rgba(15, 40, 60, .04), 0 6px 18px rgba(15, 40, 60, .07);
--bm-shadow-2: 0 12px 40px rgba(0, 60, 100, .20);
--bm-shadow-3: 0 18px 50px rgba(0, 40, 70, .28);
--bm-font: 'YekanBakh', 'YekanBakhFaNum', Vazirmatn, Tahoma, sans-serif;
--bm-container: 1200px;
--bm-side-w: 260px;
--bm-header-h: 64px;
--bm-trs: .18s ease;
}
@font-face {
font-family: 'YekanBakh';
src: url('../../fonts/YekanBakhFaNum-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'YekanBakh';
src: url('../../fonts/YekanBakhFaNum-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
[hidden] {
display: none !important;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}
body {
margin: 0;
background: var(--bm-bg);
color: var(--bm-text);
font-family: var(--bm-font);
font-size: 15px;
line-height: 1.8;
text-rendering: optimizeSpeed;
overflow-x: hidden;
overflow-x: clip;
}
img {
max-width: 100%;
height: auto;
}
a {
color: var(--bm-blue);
text-decoration: none;
transition: color var(--bm-trs);
}
a:hover {
color: var(--bm-turq);
}
::selection {
background: #c9ecf6;
color: #052e42;
}
::-webkit-scrollbar {
width: 11px;
height: 11px;
}
::-webkit-scrollbar-track {
background: var(--bm-bg);
}
::-webkit-scrollbar-thumb {
background: #b9d3e2;
border: 3px solid var(--bm-bg);
border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--bm-sky);
}
h1,
h2,
h3,
h4 {
line-height: 1.5;
margin: 0;
font-weight: 700;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
p {
margin: 0 0 1em;
}
button {
font-family: inherit;
cursor: pointer;
}
input,
button,
select {
font-size: inherit;
}
:focus-visible {
outline: 2px solid var(--bm-accent);
outline-offset: 2px;
border-radius: 4px;
}
.bm-container {
max-width: var(--bm-container);
margin-inline: auto;
padding-inline: 12px;
}
.bm-post__body > *:first-child {
margin-top: 0;
}
.bm-post__body > *:last-child {
margin-bottom: 0;
}
.bm-post__body img {
border-radius: var(--bm-radius-sm);
}
.bm-main {
min-height: 60vh;
padding-top: 84px;
padding-bottom: 24px;
}
.bm-layout {
display: grid;
grid-template-columns: var(--bm-side-w) minmax(0, 1fr) var(--bm-side-w);
gap: 16px;
align-items: start;
}
.bm-content {
min-width: 0;
}
.bm-box {
background: var(--bm-surface);
border: 1px solid var(--bm-line);
border-radius: var(--bm-radius);
box-shadow: var(--bm-shadow-1);
overflow: hidden;
margin-bottom: 16px;
}
.bm-box__head {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 16px;
background: #fbfdfe;
border-bottom: 1px solid var(--bm-line);
}
.bm-box__head h1,
.bm-box__head h2 {
font-size: 16px;
color: var(--bm-blue-deep);
}
.bm-box__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 10px;
background: var(--bm-grad-fun);
color: #fff;
box-shadow: 0 4px 10px rgba(0, 124, 190, .30);
flex: none;
}
.bm-box__body {
padding: 14px 16px;
}
.bm-special__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
grid-auto-flow: dense;
}
.bm-special__item:first-child {
grid-column: span 2;
grid-row: span 2;
}
.bm-special__item a {
position: relative;
display: block;
height: 100%;
border-radius: 14px;
overflow: hidden;
background: #dce6ec;
aspect-ratio: 1 / 1;
box-shadow: var(--bm-shadow-1);
transition: box-shadow var(--bm-trs), transform var(--bm-trs);
}
.bm-special__item a:hover {
transform: translateY(-2px);
box-shadow: 0 12px 26px rgba(0, 50, 85, .16);
}
.bm-special__item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}
.bm-special__item a:hover img {
transform: scale(1.05);
}
.bm-special__title {
position: absolute;
inset-inline: 8px;
bottom: 8px;
padding: 5px 10px;
border-radius: 10px;
background: rgba(0, 55, 92, .85);
color: #fff;
font-size: 12.5px;
font-weight: 600;
line-height: 1.7;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
transition: background var(--bm-trs);
}
.bm-special__item a:hover .bm-special__title {
background: var(--bm-red);
}
.bm-special__play {
position: absolute;
inset-inline-start: 8px;
top: 8px;
width: 34px;
height: 34px;
border-radius: 50%;
background: var(--bm-red);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(90, 8, 8, .35);
transition: transform var(--bm-trs);
}
.bm-special__item a:hover .bm-special__play {
transform: scale(1.12);
}
.bm-special__item:first-child .bm-special__title {
font-size: 14.5px;
}
.bm-special__item:first-child .bm-special__play {
width: 40px;
height: 40px;
}
@media (max-width: 720px) {
.bm-special__grid {
gap: 8px;
}
.bm-special__title {
font-size: 11px;
padding: 4px 8px;
inset-inline: 6px;
bottom: 6px;
}
.bm-special__play {
width: 22px;
height: 22px;
inset-inline-start: 6px;
top: 6px;
box-shadow: 0 2px 8px rgba(90, 8, 8, .30);
}
.bm-special__play svg {
width: 11px;
height: 11px;
}
.bm-special__item:first-child .bm-special__play {
width: 28px;
height: 28px;
}
.bm-special__item:first-child .bm-special__play svg {
width: 13px;
height: 13px;
}
.bm-special__item:first-child .bm-special__title {
font-size: 12px;
}
}
.bm-h1-paged {
font-size: 18px;
text-align: center;
color: var(--bm-blue-deep);
width: 100%;
}
.bm-side {
min-width: 0;
}
.bm-side--right {
position: sticky;
top: 84px;
}
.bm-side-menu {
display: flex;
flex-direction: column;
}
.bm-side-menu__label {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
color: var(--bm-text-2);
padding: 12px 4px 4px;
}
.bm-side-menu__label::after {
content: '';
flex: 1;
height: 1px;
background: var(--bm-line);
}
.bm-side-menu__label:first-child {
padding-top: 0;
}
.bm-side-menu a {
position: relative;
display: block;
padding: 8px 26px 8px 10px;
border-radius: var(--bm-radius-sm);
color: var(--bm-text);
font-size: 14.5px;
transition: background var(--bm-trs), color var(--bm-trs), padding var(--bm-trs);
}
.bm-side-menu a::after {
content: '‹';
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-58%);
font-size: 15px;
color: var(--bm-accent);
opacity: 0;
transition: opacity var(--bm-trs);
}
.bm-side-menu a:hover {
background: var(--bm-blue-soft);
color: var(--bm-blue);
padding-inline-start: 14px;
}
.bm-side-menu a:hover::after {
opacity: 1;
}
.bm-trending {
display: flex;
flex-direction: column;
gap: 2px;
counter-reset: trend;
}
.bm-trending a {
position: relative;
display: block;
padding: 7px 30px 7px 8px;
border-radius: 8px;
color: var(--bm-text);
font-size: 13.5px;
line-height: 1.7;
transition: background var(--bm-trs), color var(--bm-trs), transform var(--bm-trs);
}
.bm-trending a::before {
counter-increment: trend;
content: counter(trend);
position: absolute;
right: 6px;
top: 8px;
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--bm-blue-soft);
color: var(--bm-blue);
font-size: 11px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
}
.bm-trending a:hover {
background: var(--bm-blue-soft);
color: var(--bm-blue);
transform: translateX(-3px);
}
.bm-trending a:nth-child(1)::before {
background: var(--bm-orange-soft);
color: #d1490f;
}
.bm-trending a:nth-child(2)::before {
background: var(--bm-red-soft);
color: var(--bm-red);
}
.bm-trending a:nth-child(3)::before {
background: var(--bm-turq-soft);
color: var(--bm-turq);
}
.bm-box--ad .bm-box__body {
text-align: center;
padding: 10px;
}
.bm-breadcrumb {
padding: 10px 14px;
margin-bottom: 12px;
background: var(--bm-surface);
border: 1px solid var(--bm-line);
border-radius: var(--bm-radius-sm);
font-size: 13px;
}
.bm-breadcrumb ol {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
.bm-breadcrumb li {
display: flex;
align-items: center;
gap: 4px;
color: var(--bm-text-2);
}
.bm-breadcrumb li + li::before {
content: '‹';
color: var(--bm-text-2);
opacity: .6;
}
.bm-breadcrumb a {
color: var(--bm-text-2);
}
.bm-breadcrumb a:hover {
color: var(--bm-blue);
}
.bm-pagination {
display: flex;
justify-content: center;
margin: 20px 0;
}
.bm-pagination ul {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.bm-pagination a,
.bm-pagination span {
display: flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border-radius: 999px;
background: var(--bm-surface);
border: 1px solid var(--bm-line);
color: var(--bm-text);
font-size: 14px;
font-weight: 600;
transition: all var(--bm-trs);
}
.bm-pagination a:hover {
border-color: var(--bm-blue);
color: var(--bm-blue);
background: var(--bm-blue-soft);
}
.bm-pagination span.current {
background: var(--bm-grad-fun);
border-color: transparent;
color: #fff;
font-weight: 700;
box-shadow: 0 4px 12px rgba(0, 124, 190, .30);
}
.bm-pagination .dots {
border: 0;
background: none;
}
.bm-footer {
margin-top: 20px;
background: var(--bm-blue-deep);
color: rgba(255, 255, 255, .78);
}
.bm-footer::before {
content: '';
display: block;
height: 3px;
background: var(--bm-red);
}
.bm-footer__inner {
display: grid;
grid-template-columns: 1.2fr 1fr auto;
gap: 24px;
padding-top: 26px;
padding-bottom: 26px;
align-items: start;
}
.bm-footer__brand {
display: flex;
flex-direction: column;
gap: 6px;
}
.bm-footer__brand .bm-logo__icon {
background: var(--bm-red);
color: #fff;
}
.bm-footer__name {
font-size: 18px;
font-weight: 700;
color: #fff;
margin: 0;
}
.bm-footer__desc {
font-size: 13px;
color: rgba(255, 255, 255, .76);
margin: 0;
max-width: 340px;
}
.bm-footer__menu,
.bm-footer__nav ul {
display: flex;
flex-wrap: wrap;
gap: 4px 18px;
}
.bm-footer__menu a,
.bm-footer__nav a {
color: rgba(255, 255, 255, .82);
font-size: 14px;
}
.bm-footer__menu a:hover,
.bm-footer__nav a:hover {
color: var(--bm-sky);
}
.bm-footer__tg {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .16);
color: #caf0f8;
font-size: 14px;
font-weight: 700;
transition: background var(--bm-trs), color var(--bm-trs);
}
.bm-footer__tg:hover {
background: var(--bm-red);
border-color: var(--bm-red);
color: #fff;
}
.bm-footer__copy {
border-top: 1px solid rgba(255, 255, 255, .10);
background: var(--bm-navy);
padding: 12px 0;
font-size: 13px;
color: rgba(255, 255, 255, .62);
text-align: center;
}
.bm-footer__copy p {
margin: 0;
}
.bm-footer__copy a {
color: var(--bm-sky);
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 1199px) {
:root {
--bm-side-w: 232px;
}
}
@media (max-width: 1024px) {
.bm-layout {
grid-template-columns: var(--bm-side-w) minmax(0, 1fr);
}
.bm-side--left {
display: none;
}
.bm-footer__inner {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 720px) {
body {
font-size: 14px;
}
.bm-main {
padding-top: 76px;
}
.bm-layout {
grid-template-columns: 1fr;
}
.bm-side {
display: none;
}
.bm-footer__inner {
grid-template-columns: 1fr;
gap: 18px;
}
}
.bm-archmeta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
color: var(--bm-text-2);
font-size: 13px;
}
.bm-archmeta span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.bm-archhead__desc {
margin: 10px 0 0;
color: var(--bm-text-2);
font-size: 14px;
line-height: 2;
}
.bm-archhead__desc p {
margin: 0 0 8px;
}
.bm-searchbox {
margin: 12px 0 4px;
}
.bm-searchbox form {
display: flex;
gap: 8px;
background: #fff;
border: 1px solid var(--bm-line);
border-radius: 999px;
padding: 6px 8px;
box-shadow: 0 4px 14px rgba(0, 40, 70, .05);
}
.bm-searchbox input[type="search"] {
flex: 1;
min-width: 0;
border: 0;
background: none;
padding: 8px 12px;
font: inherit;
font-size: 14px;
outline: none;
color: var(--bm-text);
}
.bm-searchbox button {
border: 0;
background: var(--bm-grad-fun);
color: #fff;
border-radius: 999px;
padding: 9px 20px;
font: inherit;
font-size: 13.5px;
font-weight: 700;
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 124, 190, .25);
transition: filter var(--bm-trs), box-shadow var(--bm-trs);
}
.bm-searchbox button:hover {
filter: brightness(1.08);
box-shadow: 0 6px 16px rgba(0, 124, 190, .35);
}
.bm-404 {
text-align: center;
}
.bm-404 .bm-box__body {
padding: 34px 22px 38px;
}
.bm-404__code {
font-size: 72px;
font-weight: 800;
line-height: 1.15;
letter-spacing: 2px;
color: var(--bm-blue);
opacity: .28;
}
.bm-404 h1 {
font-size: 22px;
margin: 6px 0 10px;
color: var(--bm-text);
}
.bm-404 p {
color: var(--bm-text-2);
margin: 0 auto 16px;
max-width: 520px;
}
.bm-404__links {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 6px;
}
.bm-404__links a {
border: 1px solid var(--bm-line);
background: #fff;
color: var(--bm-blue);
font-weight: 700;
font-size: 13.5px;
border-radius: 999px;
padding: 9px 18px;
transition: all var(--bm-trs);
}
.bm-404__links a:hover {
background: var(--bm-grad-fun);
border-color: transparent;
color: #fff;
}
.bm-notfound h2 {
font-size: 17px;
margin: 0 0 10px;
color: var(--bm-text);
}
.bm-notfound p {
color: var(--bm-text-2);
margin: 0 0 8px;
}
.bm-notfound ul {
margin: 0;
padding-inline-start: 20px;
color: var(--bm-text-2);
line-height: 2.2;
}
.bm-page__body {
font-size: 15px;
line-height: 2.1;
}
.bm-page__body p {
margin: 0 0 14px;
}
/* ==== src: assets/css/header.css ==== */
.bm-header {
position: fixed;
inset-inline: 0;
top: 10px;
z-index: 1000;
pointer-events: none;
}
.bm-header__bar {
position: relative;
display: flex;
align-items: center;
gap: 8px;
height: var(--bm-header-h);
background: var(--bm-blue-grad);
border-radius: 20px;
box-shadow: 0 10px 34px rgba(0, 60, 100, .35);
-webkit-backdrop-filter: saturate(180%) blur(14px);
backdrop-filter: saturate(180%) blur(14px);
padding: 0 16px;
pointer-events: auto;
border: 1px solid rgba(255, 255, 255, .14);
}
.bm-header__bar::before {
content: '';
position: absolute;
top: 0;
left: 14px;
right: 14px;
height: 3px;
border-radius: 0 0 6px 6px;
background: var(--bm-rim);
opacity: .9;
pointer-events: none;
}
.bm-logo {
flex: none;
}
.bm-logo a {
display: flex;
align-items: center;
gap: 9px;
color: #fff;
font-weight: 700;
font-size: 19px;
padding: 4px 6px;
border-radius: var(--bm-radius-sm);
}
.bm-logo__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 11px;
background: rgba(255, 255, 255, .18);
color: #fff;
transition: transform var(--bm-trs), background var(--bm-trs);
}
.bm-logo a:hover .bm-logo__icon {
transform: rotate(-8deg) scale(1.05);
background: rgba(255, 255, 255, .28);
}
.bm-logo__txt {
text-shadow: 0 1px 2px rgba(0, 40, 70, .3);
}
.bm-nav {
flex: 1;
min-width: 0;
}
.bm-nav__list {
display: flex;
align-items: center;
gap: 2px;
}
.bm-nav__link {
display: flex;
align-items: center;
gap: 5px;
color: rgba(255, 255, 255, .92);
font-size: 14.5px;
font-weight: 400;
padding: 9px 12px;
border-radius: 999px;
white-space: nowrap;
transition: background var(--bm-trs), color var(--bm-trs);
}
.bm-nav__item:hover > .bm-nav__link,
.bm-nav__item.is-open > .bm-nav__link {
background: rgba(255, 255, 255, .16);
color: #fff;
}
.bm-nav__item.current-menu-item > .bm-nav__link,
.bm-nav__item.current-menu-parent > .bm-nav__link {
background: rgba(255, 255, 255, .20);
color: #fff;
font-weight: 700;
}
.bm-caret {
opacity: .75;
transition: transform var(--bm-trs);
}
.bm-nav__item.is-open .bm-caret,
.bm-nav__item:hover .bm-caret {
transform: rotate(180deg);
}
.bm-nav__expand {
display: none;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin-inline-start: 4px;
border: 0;
border-radius: var(--bm-radius-sm);
background: var(--bm-blue-soft);
color: var(--bm-blue);
flex: none;
}
.bm-nav__expand .bm-caret {
opacity: 1;
}
@media (max-width: 1024px) {
.bm-mobile-nav .bm-nav__item {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.bm-mobile-nav .bm-nav__link {
flex: 1;
min-width: 0;
}
.bm-mobile-nav .bm-nav__expand {
display: inline-flex;
}
.bm-mobile-nav .bm-nav__link .bm-caret {
display: none;
}
.bm-mobile-nav .bm-nav__item.is-open .bm-caret {
transform: rotate(180deg);
}
}
body.bm-nav-locked {
overflow: hidden;
}
.bm-mega {
position: absolute;
top: calc(100% + 12px);
inset-inline: 0;
display: none;
background: var(--bm-surface);
border: 1px solid var(--bm-line);
border-radius: 20px;
box-shadow: var(--bm-shadow-3);
padding: 16px 18px;
max-height: min(66vh, 560px);
overflow: auto;
overscroll-behavior: contain;
}
.bm-mega::before {
content: '';
position: absolute;
top: -7px;
inset-inline-start: 0;
width: 100%;
height: 8px;
}
@media (hover: hover) and (min-width: 1025px) {
.bm-nav__item:hover > .bm-mega {
display: block;
animation: bm-mega-in .16s ease both;
}
}
.bm-nav__item.is-open > .bm-mega {
display: block;
animation: bm-mega-in .16s ease both;
}
@keyframes bm-mega-in {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.bm-mega__cols {
columns: 4 190px;
column-gap: 6px;
column-rule: 1px dashed var(--bm-line);
}
.bm-mega__item,
.bm-mega__group {
break-inside: avoid;
}
.bm-mega__link {
display: block;
padding: 7px 10px;
border-radius: 8px;
color: var(--bm-text);
font-size: 13.5px;
line-height: 1.7;
transition: background var(--bm-trs), color var(--bm-trs);
}
.bm-mega__link:hover {
background: var(--bm-blue-soft);
color: var(--bm-blue);
}
.bm-mega__group {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--bm-line);
}
.bm-mega__gtitle {
display: block;
padding: 5px 10px;
font-size: 13px;
font-weight: 700;
color: var(--bm-blue-deep);
}
.bm-mega__sublist .bm-mega__link {
padding-inline-start: 22px;
font-size: 13px;
color: var(--bm-text-2);
}
.bm-mega__sublist .bm-mega__link::before {
content: '•';
margin-inline-end: 6px;
color: var(--bm-accent);
}
.bm-header__actions {
display: flex;
align-items: center;
gap: 6px;
flex: none;
}
.bm-iconbtn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, .22);
border-radius: 50%;
background: rgba(255, 255, 255, .14);
color: #fff;
transition: background var(--bm-trs), transform var(--bm-trs);
}
.bm-iconbtn:hover {
background: rgba(255, 255, 255, .28);
color: #fff;
}
.bm-iconbtn:active {
transform: scale(.94);
}
.bm-player-open {
background: var(--bm-red);
color: #fff;
border-color: rgba(255, 255, 255, .25);
width: 42px;
height: 42px;
box-shadow: 0 5px 16px rgba(160, 20, 20, .42);
}
.bm-player-open svg {
width: 20px;
height: 20px;
}
.bm-player-open:hover {
background: var(--bm-red-dark);
color: #fff;
}
.bm-player-open.is-playing {
box-shadow: 0 0 0 4px rgba(211, 36, 36, .22), 0 5px 16px rgba(160, 20, 20, .42);
}
.bm-search {
position: absolute;
top: calc(100% + 12px);
inset-inline-end: 0;
width: min(360px, calc(100vw - 32px));
}
.bm-search__form {
display: flex;
align-items: center;
gap: 4px;
background: var(--bm-surface);
border: 1px solid var(--bm-line);
border-radius: 999px;
box-shadow: var(--bm-shadow-2);
padding: 5px 6px;
animation: bm-mega-in .16s ease both;
}
.bm-search__input {
flex: 1;
min-width: 0;
border: 0;
background: none;
padding: 6px 12px;
font-size: 14px;
color: var(--bm-text);
outline: none;
}
.bm-search__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border: 0;
border-radius: 50%;
background: var(--bm-blue-soft);
color: var(--bm-blue);
transition: background var(--bm-trs);
}
.bm-search__btn:hover {
background: var(--bm-blue);
color: #fff;
}
.bm-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 4.5px;
width: 40px;
height: 40px;
padding: 0 10px;
border: 0;
border-radius: var(--bm-radius-sm);
background: rgba(255, 255, 255, .14);
}
.bm-burger span {
display: block;
height: 2px;
border-radius: 2px;
background: #fff;
transition: transform var(--bm-trs), opacity var(--bm-trs);
}
.bm-burger[aria-expanded="true"] span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
.bm-burger[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.bm-burger[aria-expanded="true"] span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
.bm-mobile-nav {
display: none;
pointer-events: auto;
position: fixed;
top: calc(10px + var(--bm-header-h) + 8px);
inset-inline: 12px;
max-height: calc(100vh - var(--bm-header-h) - 40px);
overflow: auto;
background: var(--bm-surface);
border: 1px solid var(--bm-line);
border-radius: var(--bm-radius-lg);
box-shadow: var(--bm-shadow-2);
padding: 12px;
z-index: 999;
animation: bm-mega-in .18s ease both;
}
.bm-mobile-nav[hidden] {
display: none;
}
.bm-mobile-nav__search {
margin-bottom: 8px;
}
.bm-mobile-nav__search form {
display: flex;
gap: 4px;
background: var(--bm-bg);
border-radius: 999px;
padding: 4px 6px;
}
.bm-mobile-nav__search input {
flex: 1;
min-width: 0;
border: 0;
background: none;
padding: 7px 10px;
font-size: 14px;
outline: none;
color: var(--bm-text);
}
.bm-mobile-nav__search button {
border: 0;
border-radius: 50%;
width: 34px;
height: 34px;
background: var(--bm-blue);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.bm-mobile-nav .bm-nav__list {
flex-direction: column;
align-items: stretch;
gap: 2px;
}
.bm-mobile-nav .bm-nav__link {
color: var(--bm-text);
border-radius: var(--bm-radius-sm);
justify-content: space-between;
padding: 10px 12px;
font-size: 15px;
}
.bm-mobile-nav .bm-nav__item:hover > .bm-nav__link {
background: var(--bm-blue-soft);
color: var(--bm-blue);
}
.bm-mobile-nav .bm-nav__item.current-menu-item > .bm-nav__link,
.bm-mobile-nav .bm-nav__item.current-menu-parent > .bm-nav__link {
background: var(--bm-blue-soft);
color: var(--bm-blue);
font-weight: 700;
}
.bm-mobile-nav .bm-mega {
display: none;
position: static;
max-height: none;
box-shadow: none;
border: 0;
padding: 0 6px 6px;
overflow: visible;
flex-basis: 100%;
}
.bm-mobile-nav .bm-nav__item.is-open .bm-mega {
display: block;
}
.bm-mobile-nav .bm-mega__cols {
columns: 2 140px;
}
@media (max-width: 1024px) {
.bm-nav {
display: none;
}
.bm-burger {
display: flex;
}
.bm-mobile-nav {
display: block;
}
.bm-mobile-nav[hidden] {
display: none;
}
}
@media (max-width: 720px) {
.bm-header {
top: 8px;
}
.bm-header__bar {
height: 56px;
border-radius: 14px;
}
.bm-logo a {
font-size: 17px;
}
.bm-logo__icon {
width: 32px;
height: 32px;
}
.bm-logo__icon svg {
width: 22px;
height: 22px;
}
.bm-iconbtn {
width: 36px;
height: 36px;
}
.bm-player-open {
width: 38px;
height: 38px;
}
}
/* ==== src: assets/css/player.css ==== */
.bmx {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1100;
padding: 0 16px calc(14px + env(safe-area-inset-bottom, 0px));
pointer-events: none;
}
.bmx,
.bmx *,
.bmx *::before,
.bmx *::after {
box-sizing: border-box;
}
.bmx [hidden] {
display: none !important;
}
body.bmx-live {
padding-bottom: 106px;
}
.bmx-bar {
--bmx-bar-h: 76px;
position: relative;
min-height: var(--bmx-bar-h);
max-width: var(--bm-container, 1200px);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
direction: ltr;
background: #ffffff;
border: 1px solid var(--bm-line);
border-radius: 20px;
box-shadow: 0 18px 50px rgba(0, 60, 100, .22), 0 2px 8px rgba(0, 60, 100, .08);
overflow: hidden;
pointer-events: auto;
}
.bmx-bar::before {
content: '';
position: absolute;
top: 0;
left: 16px;
right: 16px;
height: 2.5px;
border-radius: 0 0 6px 6px;
background: var(--bm-rim);
opacity: .85;
pointer-events: none;
z-index: 4;
}
.bmx-topline {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3.5px;
background: rgba(0, 75, 112, .10);
z-index: 3;
}
.bmx-topline__buf,
.bmx-topline__fill {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 0;
border-radius: 0 3px 3px 0;
}
.bmx-topline__buf {
background: rgba(0, 75, 112, .22);
}
.bmx-topline__fill {
background: var(--bm-grad-fun);
}
.bmx-row {
display: flex;
align-items: center;
gap: 12px;
padding: 0 18px;
min-height: var(--bmx-bar-h);
}
.bmx-left {
display: flex;
align-items: center;
gap: 12px;
flex: 0 1 auto;
min-width: 0;
}
.bmx-cover {
width: 50px;
height: 50px;
border-radius: 13px;
object-fit: cover;
background: var(--bm-bg);
border: 1px solid var(--bm-line);
box-shadow: 0 4px 12px rgba(0, 60, 100, .14);
flex: none;
cursor: pointer;
transition: filter var(--bm-trs), transform var(--bm-trs);
}
.bmx-cover:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
.bmx-meta {
min-width: 0;
max-width: 230px;
cursor: pointer;
}
.bmx-title {
font-size: 13.5px;
font-weight: 700;
color: var(--bm-blue-deep);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.6;
transition: color var(--bm-trs);
}
.bmx-artist {
font-size: 11.5px;
color: var(--bm-text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.6;
}
.bmx-meta:hover .bmx-title,
.bmx-meta:focus-visible .bmx-title {
color: var(--bm-turq);
}
.bmx-transport {
display: flex;
align-items: center;
gap: 6px;
flex: none;
margin: 0 4px;
}
.bmx-btn {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--bm-text-2);
cursor: pointer;
flex: none;
text-decoration: none;
transition: background var(--bm-trs), color var(--bm-trs), transform var(--bm-trs);
}
.bmx-btn:hover {
background: var(--bm-blue-soft);
color: var(--bm-blue);
}
.bmx-btn:active {
transform: scale(.9);
}
.bmx-btn--sm {
width: 32px;
height: 32px;
}
.bmx-play {
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border: 0;
border-radius: 50%;
background: var(--bm-red);
color: #fff;
cursor: pointer;
flex: none;
box-shadow: 0 6px 18px rgba(170, 25, 25, .40);
transition: transform var(--bm-trs), background var(--bm-trs), box-shadow var(--bm-trs);
}
.bmx-play:hover {
background: var(--bm-red-dark);
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(170, 25, 25, .48);
}
.bmx-play:active {
transform: scale(.93);
}
.bmx-play.is-loading {
pointer-events: none;
color: transparent;
background: transparent;
box-shadow: none;
border: 3px solid rgba(211, 36, 36, .16);
border-top-color: var(--bm-red);
animation: bmx-spin .8s linear infinite;
}
@keyframes bmx-spin {
to {
transform: rotate(360deg);
}
}
.bmx-timeline {
display: flex;
align-items: center;
gap: 10px;
flex: 1 1 auto;
min-width: 170px;
}
.bmx-time {
flex: none;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--bm-text-2);
line-height: 1;
letter-spacing: .3px;
pointer-events: none;
min-width: 38px;
}
.bmx-time--cur {
color: var(--bm-blue);
text-align: right;
}
.bmx-time--dur {
text-align: left;
}
.bmx-strip {
position: relative;
flex: 1 1 auto;
min-width: 90px;
height: 42px;
cursor: pointer;
touch-action: none;
border-radius: 6px;
}
.bmx-wave {
position: absolute;
inset: 0;
width: 100%;
height: 42px;
display: block;
}
.bmx-cursor {
position: absolute;
top: 4px;
bottom: 4px;
left: 0;
width: 2px;
border-radius: 2px;
background: var(--bm-blue-deep);
opacity: 0;
transition: opacity .15s ease;
pointer-events: none;
z-index: 3;
}
.bmx-right {
display: flex;
align-items: center;
gap: 2px;
flex: none;
}
.bmx-vol {
display: flex;
align-items: center;
gap: 4px;
margin-right: 6px;
}
.bmx-vol input[type="range"] {
width: 78px;
height: 4px;
accent-color: var(--bm-accent);
cursor: pointer;
}
.bmx-listbtn__badge {
position: absolute;
top: -3px;
right: -5px;
min-width: 17px;
height: 17px;
padding: 0 4px;
border-radius: 999px;
background: var(--bm-grad-hot);
color: #fff;
font-size: 9.5px;
font-weight: 800;
line-height: 17px;
text-align: center;
box-shadow: 0 2px 6px rgba(160, 20, 20, .4);
}
.bmx-panel {
position: fixed;
bottom: calc(var(--bmx-bar-h, 76px) + 30px);
left: 50%;
transform: translateX(-50%);
width: min(880px, calc(100vw - 20px));
background: #fff;
border: 1px solid var(--bm-line);
border-radius: 18px;
box-shadow: 0 24px 70px rgba(4, 24, 40, .35);
max-height: min(64vh, 580px);
overflow: auto;
overscroll-behavior: contain;
direction: rtl;
animation: bmx-in .22s ease both;
z-index: 1099;
pointer-events: auto;
}
@keyframes bmx-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(14px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.bmx-panel::-webkit-scrollbar {
width: 9px;
}
.bmx-panel::-webkit-scrollbar-thumb {
background: var(--bm-line);
border-radius: 99px;
}
.bmx-panel__head {
position: sticky;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 16px;
background: #fff;
border-bottom: 1px solid var(--bm-line);
z-index: 2;
}
.bmx-panel__title {
font-size: 14px;
font-weight: 800;
color: var(--bm-blue-deep);
}
.bmx-panel__count {
font-size: 11px;
font-weight: 700;
color: var(--bm-turq);
background: var(--bm-turq-soft);
border-radius: 999px;
padding: 2px 9px;
margin-inline-start: 6px;
}
.bmx-panel__tools {
display: flex;
align-items: center;
gap: 6px;
}
.bmx-mode {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background: var(--bm-bg);
color: var(--bm-text-2);
cursor: pointer;
transition: background var(--bm-trs), color var(--bm-trs);
}
.bmx-mode:hover {
background: var(--bm-turq-soft);
color: var(--bm-turq);
}
.bmx-mode.is-on {
background: var(--bm-grad-fun);
color: #fff;
}
.bmx-mode[data-mode="one"]::after {
content: '1';
position: absolute;
bottom: -2px;
left: -2px;
width: 13px;
height: 13px;
border-radius: 50%;
background: var(--bm-red);
border: 2px solid #fff;
color: #fff;
font-size: 8px;
font-weight: 800;
line-height: 9px;
text-align: center;
}
.bmx-panel__x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 0;
border-radius: 50%;
background: var(--bm-bg);
color: var(--bm-text-2);
cursor: pointer;
transition: background var(--bm-trs), color var(--bm-trs);
}
.bmx-panel__x:hover {
background: var(--bm-red);
color: #fff;
}
.bmx-now {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-bottom: 1px solid var(--bm-line);
}
.bmx-now__cover {
width: 84px;
height: 84px;
border-radius: 14px;
object-fit: cover;
background: #dbe4ea;
flex: none;
box-shadow: 0 6px 18px rgba(0, 40, 70, .18);
}
.bmx-now__meta {
flex: 1;
min-width: 0;
}
.bmx-now__title {
font-size: 15.5px;
font-weight: 800;
margin: 0 0 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bmx-now__artist {
font-size: 12.5px;
color: var(--bm-text-2);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bmx-now__acts {
display: flex;
align-items: center;
gap: 8px;
flex: none;
}
.bmx-panel .bmx-btn {
width: 36px;
height: 36px;
background: var(--bm-bg);
color: var(--bm-text-2);
}
.bmx-panel .bmx-btn:hover {
background: var(--bm-turq-soft);
color: var(--bm-turq);
}
.bmx-quality {
display: flex;
gap: 4px;
}
.bmx-quality button {
border: 1px solid var(--bm-line);
background: var(--bm-bg);
color: var(--bm-text-2);
border-radius: 999px;
padding: 4px 13px;
font-size: 11.5px;
font-weight: 800;
cursor: pointer;
transition: all var(--bm-trs);
}
.bmx-quality button.is-active {
background: var(--bm-grad-fun);
border-color: transparent;
color: #fff;
}
.bmx-rows {
padding: 8px;
}
.bmx-rowi {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 7px 9px;
border: 0;
border-radius: 10px;
background: none;
text-align: start;
cursor: pointer;
transition: background var(--bm-trs);
}
.bmx-rowi:hover {
background: var(--bm-bg);
}
.bmx-rowi.is-active {
background: var(--bm-turq-soft);
}
.bmx-rowi__num {
min-width: 22px;
text-align: center;
font-size: 11.5px;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #9aacbd;
flex: none;
}
.bmx-rowi__cover {
width: 38px;
height: 38px;
border-radius: 9px;
object-fit: cover;
background: #dbe4ea;
flex: none;
}
.bmx-rowi__meta {
flex: 1;
min-width: 0;
}
.bmx-rowi__title {
display: block;
font-size: 13px;
font-weight: 700;
color: var(--bm-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.7;
}
.bmx-rowi__artist {
display: block;
font-size: 11.5px;
color: var(--bm-text-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.6;
}
.bmx-rowi.is-active .bmx-rowi__title {
color: var(--bm-turq);
}
.bmx-rowi__state {
flex: none;
color: var(--bm-turq);
width: 20px;
display: inline-flex;
justify-content: center;
}
.bmx-eq {
display: inline-flex;
align-items: flex-end;
gap: 2px;
height: 14px;
}
.bmx-eq span {
width: 3px;
background: var(--bm-grad-fun);
border-radius: 2px;
animation: bmx-eq .9s ease-in-out infinite;
}
.bmx-eq span:nth-child(1) { height: 40%; animation-delay: 0s; }
.bmx-eq span:nth-child(2) { height: 90%; animation-delay: .15s; }
.bmx-eq span:nth-child(3) { height: 60%; animation-delay: .3s; }
.bmx-eq span:nth-child(4) { height: 80%; animation-delay: .45s; }
@keyframes bmx-eq {
0%, 100% { transform: scaleY(.5); }
50% { transform: scaleY(1); }
}
.bmx :focus-visible {
outline: 2px solid var(--bm-accent);
outline-offset: 2px;
}
.bmx-toast {
position: fixed;
bottom: calc(var(--bmx-bar-h, 76px) + 38px);
left: 50%;
transform: translateX(-50%);
background: #243447;
color: #fff;
font-size: 13px;
padding: 10px 20px;
border-radius: 999px;
z-index: 1200;
box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
animation: bmx-toast-in .2s ease both;
}
@keyframes bmx-toast-in {
from {
opacity: 0;
transform: translateX(-50%) translateY(8px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
@media (max-width: 1150px) {
.bmx-vol {
display: none;
}
}
@media (max-width: 980px) {
.bmx-right [data-act="dl"],
.bmx-right [data-act="page"] {
display: none;
}
.bmx-meta {
max-width: 170px;
}
}
@media (max-width: 760px) {
.bmx {
padding: 0 8px calc(10px + env(safe-area-inset-bottom, 0px));
}
body.bmx-live {
padding-bottom: 84px;
}
.bmx-bar {
--bmx-bar-h: 62px;
border-radius: 16px;
}
.bmx-bar::before {
display: none;
}
.bmx-topline {
display: block;
}
.bmx-timeline {
display: none;
}
.bmx-row {
gap: 7px;
padding: 0 12px;
}
.bmx-cover {
width: 40px;
height: 40px;
border-radius: 10px;
}
.bmx-meta {
max-width: none;
flex: 1;
}
.bmx-title {
font-size: 12.5px;
}
.bmx-artist {
font-size: 10.5px;
}
.bmx-play {
width: 42px;
height: 42px;
}
.bmx-play svg {
width: 20px;
height: 20px;
}
.bmx-btn {
width: 34px;
height: 34px;
}
.bmx-panel {
bottom: calc(var(--bmx-bar-h, 62px) + 22px);
width: calc(100vw - 16px);
max-height: 66vh;
border-radius: 14px;
}
.bmx-now {
flex-wrap: wrap;
gap: 12px;
}
.bmx-now__acts {
width: 100%;
justify-content: flex-start;
}
.bmx-toast {
bottom: calc(var(--bmx-bar-h, 62px) + 28px);
}
}
@media (max-width: 400px) {
.bmx-left {
gap: 8px;
}
.bmx-transport {
margin: 0;
gap: 2px;
}
.bmx-listbtn__badge {
top: -4px;
right: -6px;
}
}
@media (prefers-reduced-motion: reduce) {
.bmx *,
.bmx-toast {
animation: none !important;
transition: none !important;
}
}
/* ==== src: assets/css/bm-track.css ==== */
.bm-track{
--navy:#0f2b46; --blue:#1c5fa8; --red:#d21f2c;
--cream:#f7f5f1; --slate:#55616e; --line:#e6e2da;
position:relative;
background:var(--cream);
border:1px solid var(--line);
border-radius:12px;
overflow:hidden;
box-shadow:0 1px 2px rgba(15,43,70,.04), 0 12px 28px -14px rgba(15,43,70,.18);
font-family:'Dana',Tahoma,sans-serif;
direction:rtl;
width:100%;
box-sizing:border-box;
margin:0 0 15px 0;
}
.bm-track *{ box-sizing:border-box; }
.bm-track__eyebrow{
display:flex; align-items:center; justify-content:center;
gap:10px;
background:var(--navy);
padding:10px 16px;
}
.bm-track__eyebrow-label{
color:#cfe0f2; font-size:13.5px; font-weight:700; letter-spacing:.2px;
display:flex; align-items:center; gap:8px;
}
.bm-dot{width:7px;height:7px;border-radius:50%;background:#3ddc84;position:relative;flex:0 0 auto;}
.bm-dot::after{
content:'';position:absolute;inset:0;border-radius:50%;background:#3ddc84;
animation:bm-ping 1.8s ease-out infinite;
}
@keyframes bm-ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.8);opacity:0}}
.bm-eq{display:flex;align-items:flex-end;gap:3px;height:12px;}
.bm-eq span{width:3px;background:#7fb2e6;border-radius:2px;animation:bm-eq 1.1s ease-in-out infinite;}
.bm-eq span:nth-child(1){height:40%;animation-delay:.0s}
.bm-eq span:nth-child(2){height:100%;animation-delay:.15s}
.bm-eq span:nth-child(3){height:60%;animation-delay:.3s}
.bm-eq span:nth-child(4){height:85%;animation-delay:.45s}
@keyframes bm-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.bm-track__body{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
padding:22px 18px;
gap:14px;
}
.bm-art{
position:relative; flex:0 0 auto; width:140px; height:140px;
}
.bm-art__vinyl{
position:absolute; inset:0; border-radius:50%;
background: #1b1b1b;
box-shadow: inset 0 0 0 2px #262626, inset 0 0 0 5px #1b1b1b, inset 0 0 0 7px #262626;
display:flex; align-items:center; justify-content:center;
transform:translateX(-12%) scale(.92);
transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.bm-art__vinyl::after{
content:'';width:30%;height:30%;border-radius:50%;
background:var(--red);
box-shadow:inset 0 0 0 3px #1b1b1b;
}
.bm-art__cover{
position:absolute; inset:0; border-radius:14px; overflow:hidden;
box-shadow:0 6px 16px -6px rgba(0,0,0,.35);
transition:transform .5s cubic-bezier(.2,.8,.2,1);
z-index:1;
}
.bm-art__cover img{width:100%;height:100%;object-fit:cover;display:block;}
.bm-track:hover .bm-art__vinyl{
transform:translateX(-34%) scale(1);
animation:bm-spin 3s linear infinite;
}
.bm-track:hover .bm-art__cover{ transform:translateX(8%) rotate(2deg); }
@keyframes bm-spin{to{transform:translateX(-34%) scale(1) rotate(360deg)}}
.bm-track__info{ width:100%; }
.bm-track__kicker{
font-size:14px; color:var(--slate); margin:0 0 6px; line-height:1.7;
}
.bm-track__title{
margin:0; font-size:19px; font-weight:900; color:var(--navy); line-height:1.5;
}
.bm-track__title b{color:var(--blue);}
.bm-track__title a{color:inherit;text-decoration:none;}
.bm-track__title a:hover{text-decoration:underline;text-decoration-color:var(--blue);}
.bm-track__title-en{
margin:4px 0 0; font-size:13px; color:var(--slate);
font-family:'Dana',Tahoma,sans-serif; letter-spacing:.2px;
direction:ltr;
}
.bm-track__meta{
margin-top:10px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
}
.bm-badge{
font-family:'Dana',Tahoma,sans-serif; font-size:12.5px; font-weight:500;
color:var(--blue); background:#e8f0fa; border:1px solid #d3e3f4;
padding:3px 10px; border-radius:999px;
}
.bm-track__actions{
width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
}
.bm-btn{
display:inline-flex; align-items:center; justify-content:center; gap:6px;
font-family:inherit; font-size:15px; font-weight:700;
padding:13px 18px; border-radius:9px; text-decoration:none;
border:1px solid transparent; cursor:pointer;
transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
white-space:nowrap;
}
.bm-btn:active{transform:translateY(1px);}
.bm-btn--play{
background:var(--red); color:#fff;
box-shadow:0 8px 18px -8px rgba(210,31,44,.55);
flex:1 1 auto; max-width:220px;
}
.bm-btn--play:hover{background:#b81824;}
.bm-btn--dl{
background:transparent; color:var(--blue); border-color:#c9dcef;
flex:0 0 48px; padding:13px;
}
.bm-btn--dl:hover{background:#eef4fb;}
.bm-btn svg{width:16px;height:16px;flex:0 0 auto;}
.bm-mini{
--navy:#0f2b46; --blue:#1c5fa8;
display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
gap:8px;
background:#eef4fb;
border:1px solid #d3e3f4;
border-radius:10px;
padding:12px 16px;
text-decoration:none;
direction:rtl;
font-family:'Dana',Tahoma,sans-serif;
text-align:center;
margin:0 0 15px 0;
transition:background .15s ease, transform .15s ease;
}
.bm-mini:hover{ background:#e2edf9; }
.bm-mini:active{ transform:translateY(1px); }
.bm-mini__icon{
flex:0 0 auto; width:26px; height:26px; border-radius:7px;
background:var(--blue); color:#fff;
display:flex; align-items:center; justify-content:center;
}
.bm-mini__icon svg{ width:13px; height:13px; }
.bm-mini__text{
font-size:14px; color:#243b52; line-height:1.7;
}
.bm-mini__text b{ color:var(--navy); font-weight:800; }
.bm-relist-box{
background:var(--cream, #f7f5f1);
border:1px solid var(--line, #e6e2da);
border-radius:12px;
overflow:hidden;
margin:0 0 15px 0;
}
.bm-relist-box .bm-relist__eyebrow{
display:flex !important; align-items:center; justify-content:center; gap:8px;
background:var(--navy, #0f2b46) !important;
padding:10px 16px;
margin:0 !important;
}
.bm-relist-box .bm-relist__eyebrow span{
color:#cfe0f2 !important; font-size:13.5px !important; font-weight:700 !important;
font-family:'Dana',Tahoma,sans-serif;
}
.bm-relist-box .bm-relist__eyebrow svg{ width:15px; height:15px; color:#7fb2e6; flex:0 0 auto; }
.bm-relist{
list-style:none !important; margin:0 !important; padding:12px !important;
font-family:'Dana',Tahoma,sans-serif;
display:flex; flex-direction:column; gap:10px;
}
.bm-relist li{
list-style:none !important;
display:flex !important; align-items:center; gap:10px;
padding:12px;
border-radius:12px;
background:#fff;
border:1px solid var(--line, #e6e2da);
direction:rtl;
transition:border-color .15s ease, background .15s ease;
}
.bm-relist li:hover{ border-color:#c9dcef; background:#fbfdff; }
.bm-relist li:hover .bm-relist__title{ color:var(--blue, #1c5fa8); }
.bm-relist__row{
display:flex !important; align-items:center; gap:12px;
flex:1 1 auto; min-width:0;
text-decoration:none !important;
color:inherit;
}
.bm-relist__icon{
flex:0 0 auto; width:44px; height:44px; border-radius:11px;
background:var(--blue, #1c5fa8); color:#fff;
display:flex; align-items:center; justify-content:center;
}
.bm-relist__icon svg{ width:20px; height:20px; }
.bm-relist__body{ flex:1 1 auto; min-width:0; }
.bm-relist__title{
display:block; font-size:15px; color:#243b52; font-weight:700; line-height:1.6;
text-align:right !important;
transition:color .15s ease;
}
.bm-relist__date{
display:flex; align-items:center; gap:5px; margin-top:5px;
font-size:12px; color:var(--slate, #55616e);
}
.bm-relist__date svg{ width:12px; height:12px; flex:0 0 auto; }
.bm-relist__dl{
flex:0 0 auto;
display:flex; align-items:center; gap:6px;
background:#eef4fb; color:var(--blue, #1c5fa8);
border:1px solid #d3e3f4;
font-size:13.5px; font-weight:700;
padding:9px 14px; border-radius:9px;
white-space:nowrap;
text-decoration:none !important;
}
.bm-relist__dl svg{ width:14px; height:14px; flex:0 0 auto; }
.bm-relist li:hover .bm-relist__dl{ background:#e2edf9; }
@media (max-width:420px){
.bm-relist li{ flex-wrap:wrap; }
.bm-relist__dl{ order:3; width:100%; justify-content:center; margin-top:4px; }
}
/* ==== src: assets/css/single.css ==== */
.bm-single__head {
padding: 22px 22px 20px;
}
.bm-single__title {
font-size: 22px;
line-height: 1.75;
margin: 0;
color: var(--bm-blue-deep);
}
.bm-info {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 15px 12px;
margin-top: 16px;
padding: 15px 18px 16px;
background: #f6fafc;
border: 1px solid var(--bm-line);
border-radius: var(--bm-radius);
}
.bm-info__item {
min-width: 0;
}
.bm-info__label {
display: flex;
align-items: center;
gap: 6px;
font-size: 11.5px;
font-weight: 600;
line-height: 1.6;
color: var(--bm-text-2);
margin: 0 0 3px;
}
.bm-info__label svg {
color: var(--bm-blue);
opacity: .8;
flex: none;
}
.bm-info__val {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
margin: 0;
font-size: 14px;
font-weight: 700;
line-height: 1.9;
color: var(--bm-blue-deep);
overflow-wrap: anywhere;
}
.bm-info__val a {
color: var(--bm-blue-deep);
}
.bm-info__val a:hover {
color: var(--bm-red);
}
.bm-info__ava {
flex: none;
width: 30px;
height: 30px;
border-radius: 10px;
overflow: hidden;
border: 2px solid #fff;
box-shadow: 0 2px 8px rgba(0, 87, 140, .16);
background: var(--bm-blue-soft);
line-height: 0;
}
.bm-info__ava img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bm-single__body {
padding: 18px 22px 22px;
font-size: 15px;
line-height: 2.1;
}
.bm-single__body p {
margin: 0 0 14px;
}
.bm-single__body h2,
.bm-single__body h3 {
color: var(--bm-blue-deep);
line-height: 1.9;
}
.bm-single__body img {
max-width: 100%;
height: auto;
border-radius: var(--bm-radius-sm);
}
.bm-single__body a {
color: var(--bm-blue);
}
.bm-cover {
margin: 16px auto 22px;
border-radius: var(--bm-radius);
overflow: hidden;
background: var(--bm-blue-soft);
aspect-ratio: 1 / 1;
min-height: 500px;
max-height: 500px;
}
.bm-cover img {
display: block;
width: 100% !important;
max-width: none !important;
height: 100% !important;
object-fit: cover;
object-position: center;
transition: transform .35s ease, filter .35s ease;
}
@media (hover: hover) {
.bm-cover:hover img {
transform: scale(1.04);
filter: contrast(1.05) saturate(1.05);
}
}
@media (max-width: 720px) {
.bm-cover {
min-height: 320px;
max-height: 420px;
}
}
.bm-ad-slot {
min-height: 96px;
margin: 14px 0;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.bm-ad-slot--yn {
min-height: 120px;
}
.bm-ad-slot:empty {
background: #f2f7fa;
border: 1px dashed var(--bm-line);
border-radius: var(--bm-radius-sm);
}
.bm-lyricbox {
background: var(--bm-blue-soft);
border: 1px solid #cbe6f4;
border-radius: var(--bm-radius);
padding: 14px 18px;
margin: 16px 0;
}
.bm-video {
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
background: #001521;
border-radius: var(--bm-radius);
margin: 14px 0;
display: block;
}
.bm-lyric-title {
font-size: 16.5px;
margin: 22px 0 10px;
}
.bm-lyric {
text-align: center;
font-weight: 700;
font-size: 15px;
line-height: 2.2;
background: #fbfcfd;
border: 1px dashed var(--bm-line);
border-radius: var(--bm-radius);
padding: 16px 20px;
margin: 0 0 18px;
}
.bm-lyric p {
margin: 0;
}
.bm-onlineplay {
text-align: center;
margin: 8px 0 20px;
}
.bm-onlineplay__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 78px;
height: 78px;
border: 0;
border-radius: 50%;
background: var(--bm-red);
color: #fff;
cursor: pointer;
box-shadow: 0 10px 26px rgba(180, 25, 25, .35), 0 0 0 8px rgba(211, 36, 36, .09);
transition: transform var(--bm-trs), box-shadow var(--bm-trs);
}
.bm-onlineplay__btn svg {
margin-inline-start: 4px;
}
.bm-onlineplay__btn:hover {
transform: scale(1.06);
box-shadow: 0 14px 32px rgba(180, 25, 25, .45), 0 0 0 12px rgba(211, 36, 36, .11);
}
.bm-onlineplay__btn:active {
transform: scale(.95);
}
.bm-onlineplay__label {
display: block;
margin-top: 10px;
font-size: 13px;
font-weight: 700;
color: var(--bm-text-2);
}
.bm-comment-jump {
text-align: center;
margin: 18px 0;
}
.bm-comment-jump__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
border-radius: 999px;
background: var(--bm-blue-soft);
color: var(--bm-blue-dark) !important;
font-size: 13.5px;
font-weight: 700;
text-decoration: none;
transition: var(--bm-trs);
}
.bm-comment-jump__btn:hover {
background: #d3ecf8;
}
.bm-dl {
margin-top: 8px;
}
.bm-dl__title {
display: flex;
align-items: center;
gap: 14px;
text-align: center;
font-size: 16.5px;
color: var(--bm-blue-deep);
margin: 20px 0 14px;
}
.bm-dl__title::before,
.bm-dl__title::after {
content: '';
flex: 1;
height: 1px;
background: var(--bm-line);
}
.bm-dlbtn {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
padding: 13px 18px;
margin: 10px 0;
border-radius: 12px;
background: var(--bm-blue);
color: #fff !important;
font-size: 14px;
font-weight: 700;
text-decoration: none !important;
box-shadow: 0 3px 10px rgba(0, 95, 150, .28);
transition: background var(--bm-trs), box-shadow var(--bm-trs), transform var(--bm-trs);
}
.bm-dlbtn__txt {
flex: 1 1 auto;
min-width: 0;
text-align: start;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bm-dlbtn svg {
flex: none;
}
.bm-dlbtn b {
flex: none;
background: rgba(0, 0, 0, .28);
padding: 2px 12px;
border-radius: 999px;
font-size: 12.5px;
font-weight: 800;
white-space: nowrap;
}
.bm-dlbtn:hover {
background: var(--bm-blue-dark);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 95, 150, .38);
}
.bm-dlbtn:active {
transform: translateY(0);
}
.bm-dlbtn--video {
background: #fff;
color: var(--bm-red) !important;
border: 1.5px solid #f3c7c7;
box-shadow: none;
}
.bm-dlbtn--video b {
background: var(--bm-red);
color: #fff;
}
.bm-dlbtn--video:hover {
background: var(--bm-red);
color: #fff !important;
box-shadow: 0 6px 16px rgba(180, 25, 25, .32);
}
.bm-dlbtn--video:hover b {
background: rgba(0, 0, 0, .28);
}
.bm-dlbtn--128 {
background: var(--bm-blue-deep);
box-shadow: 0 3px 10px rgba(0, 60, 100, .30);
}
.bm-dlbtn--128:hover {
background: #004a77;
box-shadow: 0 6px 16px rgba(0, 60, 100, .38);
}
.bm-dlbtn--zip {
background: var(--bm-blue-dark);
box-shadow: 0 3px 10px rgba(2, 92, 143, .30);
}
.bm-dlbtn--zip:hover {
background: #014a74;
box-shadow: 0 6px 16px rgba(2, 92, 143, .38);
}
.bm-singerlink {
margin: 16px 0 0;
}
.bm-dlbtn--singer {
background: var(--bm-red);
color: #fff !important;
box-shadow: 0 3px 10px rgba(180, 25, 25, .30);
}
.bm-dlbtn--singer b {
background: rgba(255, 255, 255, .22);
}
.bm-dlbtn--singer:hover {
background: var(--bm-red-dark);
box-shadow: 0 6px 16px rgba(180, 25, 25, .38);
}
.bm-tracklist {
background: #fbfcfd;
border: 1px solid var(--bm-line);
border-radius: var(--bm-radius);
margin: 18px 0;
overflow: hidden;
}
.bm-trackrow {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--bm-line);
}
.bm-trackrow:last-child {
border-bottom: 0;
}
.bm-trackrow:hover {
background: #f2f8fc;
}
.bm-trackrow__num {
flex: none;
width: 26px;
height: 26px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--bm-blue-soft);
color: var(--bm-blue-dark);
font-size: 12.5px;
font-weight: 700;
}
.bm-trackrow__title {
flex: 1;
min-width: 0;
color: var(--bm-text) !important;
text-decoration: none !important;
font-size: 14px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bm-trackrow__title:hover {
color: var(--bm-blue) !important;
}
.bm-trackrow__acts {
flex: none;
display: flex;
align-items: center;
gap: 6px;
}
.bm-trackrow__acts a {
display: inline-block;
padding: 4px 12px;
border-radius: 999px;
background: var(--bm-blue);
border: 1px solid var(--bm-blue);
color: #fff !important;
font-size: 12.5px;
font-weight: 700;
text-decoration: none !important;
transition: var(--bm-trs);
}
.bm-trackrow__acts a:hover {
background: var(--bm-accent);
border-color: var(--bm-accent);
color: #fff !important;
}
.bm-trackrow__play {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 0;
border-radius: 50%;
background: var(--bm-red);
color: #fff;
cursor: pointer;
transition: var(--bm-trs);
}
.bm-trackrow__play svg {
margin-right: -1px;
}
.bm-trackrow__play:hover {
background: var(--bm-red-dark);
transform: scale(1.06);
}
.bm-zipbox {
margin: 16px 0;
}
.bm-zipbox__list {
background: #fbfcfd;
border: 1px solid var(--bm-line);
border-radius: var(--bm-radius);
padding: 4px 14px;
margin-top: 10px;
font-size: 14px;
}
.bm-zipbox__list:empty {
display: none;
margin: 0;
padding: 0;
border: 0;
background: none;
}
.bm-zipbox__list table {
width: 100%;
border-collapse: collapse;
}
.bm-zipbox__list td {
padding: 8px 4px;
border-bottom: 1px solid var(--bm-line);
}
.bm-zipbox__list tr:last-child td {
border-bottom: 0;
}
.bm-share {
display: flex;
gap: 10px;
margin: 18px 0;
}
.bm-share a {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px;
border-radius: var(--bm-radius-sm);
background: var(--bm-blue-soft);
color: var(--bm-blue-dark) !important;
font-size: 13.5px;
font-weight: 700;
text-decoration: none !important;
}
.bm-single__foot {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--bm-line);
color: var(--bm-text-2);
font-size: 13px;
}
.bm-single__foot span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.bm-relsong__list {
list-style: none;
margin: 0;
padding: 8px 14px;
}
.bm-relsong__item {
display: flex;
align-items: center;
gap: 12px;
padding: 9px 4px;
border-bottom: 1px solid var(--bm-line);
}
.bm-relsong__item:last-child {
border-bottom: 0;
}
.bm-relsong__cover {
flex: none;
position: relative;
display: block;
border-radius: 12px;
overflow: hidden;
line-height: 0;
border: 1px solid var(--bm-line);
background: var(--bm-blue-soft);
}
.bm-relsong__cover img {
width: 62px;
height: 62px;
object-fit: cover;
display: block;
transition: transform .3s ease;
}
.bm-relsong__item:hover .bm-relsong__cover img {
transform: scale(1.08);
}
.bm-relsong__info {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.bm-relsong__title {
font-size: 14px;
font-weight: 700;
color: var(--bm-text) !important;
text-decoration: none !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color var(--bm-trs);
}
.bm-relsong__title:hover {
color: var(--bm-blue) !important;
}
.bm-relsong__date {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
color: var(--bm-text-2);
}
.bm-relsong__acts {
flex: none;
display: flex;
align-items: center;
gap: 8px;
}
.bm-relsong__play {
width: 40px;
height: 40px;
border: 0;
border-radius: 50%;
background: var(--bm-red);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
transition: background var(--bm-trs), transform var(--bm-trs);
}
.bm-relsong__play svg {
margin-inline-start: 1px;
}
.bm-relsong__play:hover {
background: var(--bm-red-dark);
transform: scale(1.07);
}
.bm-relsong__dl {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: 999px;
background: var(--bm-blue-soft);
border: 1px solid #cfe7f3;
color: var(--bm-blue-dark) !important;
font-size: 12.5px;
font-weight: 700;
text-decoration: none !important;
transition: background var(--bm-trs), color var(--bm-trs);
}
.bm-relsong__dl:hover {
background: var(--bm-blue);
border-color: var(--bm-blue);
color: #fff !important;
}
@media (max-width: 720px) {
.bm-relsong__list {
padding: 6px 10px;
}
.bm-relsong__item {
gap: 10px;
padding: 8px 2px;
}
.bm-relsong__cover {
border-radius: 10px;
}
.bm-relsong__cover img {
width: 52px;
height: 52px;
}
.bm-relsong__title {
font-size: 13px;
}
.bm-relsong__play {
width: 36px;
height: 36px;
}
.bm-relsong__dl {
padding: 7px 12px;
}
.bm-relsong__dl span {
display: none;
}
}
.bm-comments__count {
margin-inline-start: auto;
font-size: 12.5px;
color: var(--bm-text-2);
background: #f2f6f9;
padding: 4px 12px;
border-radius: 999px;
}
.bm-comments__form {
margin-bottom: 18px;
}
.bm-comments__author input,
.bm-comments__field textarea {
width: 100%;
border: 1.5px solid var(--bm-line);
border-radius: var(--bm-radius-sm);
padding: 11px 14px;
font: inherit;
font-size: 14px;
color: var(--bm-text);
background: #fff;
transition: var(--bm-trs);
resize: vertical;
}
.bm-comments__author {
margin-bottom: 10px;
}
.bm-comments__author input:focus,
.bm-comments__field textarea:focus {
outline: 0;
border-color: var(--bm-blue);
box-shadow: 0 0 0 3px rgba(0, 128, 188, .12);
}
.bm-comments__field {
display: flex;
gap: 10px;
align-items: stretch;
}
.bm-comments__field textarea {
min-height: 96px;
flex: 1;
}
.bm-comments__field button {
flex: none;
align-self: flex-end;
padding: 11px 30px;
border: 0;
border-radius: var(--bm-radius-sm);
background: var(--bm-blue-grad);
color: #fff;
font: inherit;
font-weight: 700;
font-size: 14.5px;
cursor: pointer;
transition: var(--bm-trs);
}
.bm-comments__field button:hover {
filter: brightness(1.06);
}
.bm-comments__success {
display: flex;
align-items: center;
gap: 8px;
background: #e8f8ee;
border: 1px solid #bfe8cd;
color: #157347;
border-radius: var(--bm-radius-sm);
padding: 11px 14px;
font-size: 13.5px;
margin-bottom: 14px;
}
.bm-comments__list {
list-style: none;
margin: 0;
padding: 0;
}
.bm-comments__list li {
padding: 10px 0;
}
.bm-comments__item {
background: #f8fafb;
border: 1px solid var(--bm-line);
border-radius: var(--bm-radius-sm);
padding: 12px 16px;
transition: var(--bm-trs);
}
.bm-comments__item.bm-flash {
border-color: var(--bm-green);
box-shadow: 0 0 0 3px rgba(22, 163, 74, .15);
}
.bm-comments__head {
display: flex;
align-items: center;
gap: 10px;
font-size: 13px;
margin-bottom: 6px;
}
.bm-comments__head strong {
color: var(--bm-blue-dark);
}
.bm-comments__head time {
color: var(--bm-text-2);
font-size: 12px;
margin-inline-start: auto;
}
.bm-comments__item p {
margin: 0 0 8px;
font-size: 14px;
}
.bm-comments__actions {
display: flex;
}
.bm-like-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border: 1px solid var(--bm-line);
border-radius: 999px;
background: #fff;
color: var(--bm-text-2);
font: inherit;
font-size: 12.5px;
font-weight: 700;
cursor: pointer;
transition: var(--bm-trs);
}
.bm-like-btn:hover:not(:disabled) {
border-color: var(--bm-red);
color: var(--bm-red);
}
.bm-like-btn.bm-liked {
border-color: var(--bm-red);
color: var(--bm-red);
background: #fdf0f0;
opacity: .85;
}
.bm-comments__empty {
text-align: center;
color: var(--bm-text-2);
background: #f8fafb;
border: 1px dashed var(--bm-line);
border-radius: var(--bm-radius-sm);
padding: 18px;
font-size: 13.5px;
}
@media (max-width: 720px) {
.bm-single__head {
padding: 16px 14px 14px;
}
.bm-single__title {
font-size: 17.5px;
}
.bm-info {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px 10px;
margin-top: 12px;
padding: 12px 13px 13px;
border-radius: var(--bm-radius-sm);
}
.bm-info__label {
font-size: 10.5px;
}
.bm-info__val {
font-size: 13px;
}
.bm-info__ava {
width: 26px;
height: 26px;
border-radius: 8px;
}
.bm-single__body {
padding: 14px;
font-size: 14.5px;
}
.bm-dl__title {
font-size: 15px;
margin: 14px 0 10px;
}
.bm-dlbtn {
font-size: 12.5px;
padding: 10px 12px;
gap: 8px;
margin: 8px 0;
border-radius: 12px;
}
.bm-dlbtn svg {
width: 17px;
height: 17px;
}
.bm-dlbtn b {
font-size: 11px;
padding: 2px 9px;
}
.bm-onlineplay {
margin: 6px 0 14px;
}
.bm-onlineplay__btn {
width: 58px;
height: 58px;
}
.bm-onlineplay__btn svg {
width: 22px;
height: 22px;
}
.bm-onlineplay__label {
margin-top: 6px;
font-size: 12px;
}
.bm-trackrow {
flex-wrap: wrap;
}
.bm-trackrow__title {
flex-basis: calc(100% - 80px);
white-space: normal;
}
.bm-comments__field {
flex-direction: column;
}
.bm-comments__field button {
align-self: stretch;
}
}
/* ==== src: assets/css/tax.css ==== */
.bm-taxhero .bm-box__head {
justify-content: center;
}
.bm-taxhero .bm-box__head h1 {
font-size: 19px;
text-align: center;
color: var(--bm-blue-deep);
}
.bm-taxhero .bm-box__body {
text-align: center;
}
.bm-taxhero .bm-box__body p {
text-align: center;
line-height: 2;
}
.bm-taxhero__list {
display: inline-block;
text-align: right;
margin: 4px auto 14px;
}
.bm-taxhero__list li {
position: relative;
padding: 3px 18px 3px 0;
line-height: 2;
text-align: right;
}
.bm-taxhero__list li::before {
content: '';
position: absolute;
right: 2px;
top: 13px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--bm-accent);
}
.bm-taxhero__cover {
margin: 14px auto 18px;
max-width: 500px;
aspect-ratio: 1 / 1;
border-radius: var(--bm-radius);
overflow: hidden;
border: 1px solid var(--bm-line);
background: var(--bm-blue-soft);
line-height: 0;
}
.bm-taxhero__cover img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.bm-taxhero__h2 {
font-size: 18px;
text-align: center;
margin-bottom: 8px;
color: var(--bm-text);
}
.bm-taxlist .bm-box__head {
justify-content: center;
}
.bm-taxlist .bm-box__head h2 {
font-size: 16.5px;
text-align: center;
}
.bm-playall {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
width: 100%;
padding: 12px 16px;
margin-bottom: 12px;
border: 0;
border-radius: var(--bm-radius);
background: var(--bm-red);
color: #fff;
font-family: inherit;
font-size: 15px;
font-weight: 700;
box-shadow: 0 6px 16px rgba(180, 25, 25, .30);
transition: background var(--bm-trs), transform var(--bm-trs);
}
.bm-playall:hover {
background: var(--bm-red-dark);
transform: translateY(-1px);
}
.bm-playall:active {
transform: translateY(0);
}
.bm-bhtag {
margin-top: 14px;
padding: 12px 14px;
border: 1px dashed var(--bm-line);
border-radius: var(--bm-radius-sm);
background: #fbfcfd;
text-align: center;
font-size: 13.5px;
color: var(--bm-text-2);
}
.bm-bhtag p {
margin: 0 0 4px;
}
.bm-bhtag p:last-child {
margin-bottom: 0;
}
.bm-taxdesc .bm-box__body {
font-size: 14px;
line-height: 2;
text-align: justify;
}
.bm-taxpost__intro p {
text-align: center;
line-height: 2;
}
.bm-taxpost__explain {
line-height: 2;
text-align: justify;
background: #fbfcfd;
border: 1px dashed var(--bm-line);
border-radius: var(--bm-radius-sm);
padding: 12px 16px;
margin: 0 0 16px;
}
.bm-taxaudio {
width: 100%;
margin: 0 0 16px;
border-radius: var(--bm-radius-sm);
}
.bm-taxrecent .bm-box__body {
padding: 10px;
}
.bm-artisthero {
position: relative;
background: var(--bm-blue-deep);
border-radius: var(--bm-radius-lg);
padding: 26px 26px 28px;
margin-bottom: 16px;
color: #fff;
overflow: hidden;
isolation: isolate;
}
.bm-artisthero__circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, .05);
pointer-events: none;
z-index: -1;
}
.bm-artisthero__circle--a {
width: 300px;
height: 300px;
inset-inline-end: -110px;
top: -130px;
}
.bm-artisthero__circle--b {
width: 220px;
height: 220px;
inset-inline-start: -80px;
bottom: -100px;
background: rgba(255, 255, 255, .04);
}
.bm-artisthero__row {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
gap: 24px;
align-items: center;
}
.bm-artisthero__cover {
margin: 0;
aspect-ratio: 1 / 1;
border-radius: 22px;
overflow: hidden;
border: 5px solid rgba(255, 255, 255, .14);
background: rgba(255, 255, 255, .06);
box-shadow: 0 22px 44px rgba(0, 18, 36, .38);
line-height: 0;
}
.bm-artisthero__cover img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.bm-artisthero__badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 13px;
border-radius: 999px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .16);
color: #caf0f8;
font-size: 12px;
font-weight: 700;
}
.bm-artisthero__badge svg {
color: #fff;
}
.bm-artisthero__title {
margin: 12px 0 0;
font-size: clamp(20px, 2.6vw, 27px);
line-height: 1.7;
color: #fff;
}
.bm-artisthero__title b {
color: #90e0ef;
font-weight: 800;
}
.bm-artisthero__title-sub {
display: block;
font-size: 13px;
font-weight: 400;
color: rgba(255, 255, 255, .62);
margin-top: 2px;
}
.bm-artisthero__latin {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
margin-top: 12px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .14);
color: #caf0f8;
font-size: 13px;
font-weight: 700;
letter-spacing: .2px;
}
.bm-artisthero__latin svg {
color: rgba(255, 255, 255, .55);
}
.bm-artisthero__latin a {
color: #fff;
}
.bm-artisthero__latin a:hover {
color: #90e0ef;
}
.bm-artisthero__stats {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin-top: 14px;
color: rgba(255, 255, 255, .62);
font-size: 13px;
}
.bm-artisthero__stats span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.bm-artisthero__stats svg {
color: #00b4d8;
flex: none;
}
.bm-artisthero__cta {
margin-top: 18px;
}
.bm-artisthero__play {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 11px 24px;
border-radius: 999px;
background: var(--bm-red);
color: #fff;
font-size: 14px;
font-weight: 700;
box-shadow: 0 8px 20px rgba(120, 12, 12, .40);
transition: background var(--bm-trs), transform var(--bm-trs);
}
.bm-artisthero__play:hover {
background: var(--bm-red-dark);
color: #fff;
transform: translateY(-1px);
}
.bm-taxintro .bm-box__body {
font-size: 14px;
line-height: 2.05;
}
.bm-taxintro .bm-box__body p {
text-align: justify;
}
@media (max-width: 720px) {
.bm-artisthero {
padding: 20px 16px 22px;
border-radius: var(--bm-radius);
}
.bm-artisthero__row {
grid-template-columns: 132px minmax(0, 1fr);
gap: 16px;
}
.bm-artisthero__cover {
border-radius: 16px;
border-width: 4px;
}
.bm-artisthero__title {
font-size: 18px;
}
.bm-artisthero__title-sub {
font-size: 12px;
}
.bm-artisthero__play {
width: 100%;
justify-content: center;
}
}
@media (max-width: 380px) {
.bm-artisthero__row {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
}
.bm-artisthero__cover {
width: 132px;
}
.bm-artisthero__stats,
.bm-artisthero__cta {
justify-content: center;
}
}
@media (max-width: 720px) {
.bm-taxhero .bm-box__head h1 {
font-size: 16.5px;
}
.bm-taxhero__list li {
font-size: 13.5px;
}
}
/* ==== src: assets/css/home.css ==== */
.bm-hero {
position: relative;
margin-top: calc(-1 * (var(--bm-header-h) + 22px));
margin-bottom: 16px;
margin-inline: calc(50% - 50vw);
padding: calc(var(--bm-header-h) + 54px) 24px 76px;
min-height: 100svh;
display: flex;
align-items: center;
background: var(--bm-blue-deep);
border-radius: 0 0 30px 30px;
overflow: hidden;
color: #fff;
isolation: isolate;
}
.bm-hero__circle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, .05);
pointer-events: none;
z-index: -1;
}
.bm-hero__circle--a {
width: 460px;
height: 460px;
inset-inline-start: -150px;
top: -140px;
}
.bm-hero__vinyl {
position: absolute;
inset-inline-end: -130px;
bottom: -120px;
width: 480px;
height: 480px;
color: #fff;
opacity: .055;
pointer-events: none;
z-index: -1;
}
.bm-hero__vinyl svg {
width: 100%;
height: 100%;
}
.bm-hero__inner {
max-width: var(--bm-container);
margin-inline: auto;
width: 100%;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
gap: 48px;
align-items: center;
}
.bm-hero__brand {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 15px;
border-radius: 999px;
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .16);
color: #caf0f8;
font-size: 13px;
font-weight: 700;
}
.bm-hero__brand svg {
color: var(--bm-red);
background: #fff;
border-radius: 50%;
padding: 3px;
width: 21px;
height: 21px;
}
.bm-hero__title {
font-size: clamp(34px, 4.8vw, 58px);
font-weight: 800;
line-height: 1.3;
color: #fff;
margin: 18px 0 12px;
}
.bm-hero__title span {
color: var(--bm-accent);
}
.bm-hero__sub {
max-width: 520px;
margin: 0 0 24px;
color: rgba(255, 255, 255, .74);
font-size: 15px;
line-height: 2;
}
.bm-hero__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.bm-hero__chips a {
padding: 8px 18px;
border-radius: 999px;
background: rgba(255, 255, 255, .08);
border: 1px solid rgba(255, 255, 255, .14);
color: rgba(255, 255, 255, .88);
font-size: 13.5px;
font-weight: 600;
transition: background var(--bm-trs), border-color var(--bm-trs), color var(--bm-trs), transform var(--bm-trs);
}
.bm-hero__chips a:hover {
background: var(--bm-red);
border-color: var(--bm-red);
color: #fff;
transform: translateY(-1px);
}
.bm-hero__stats {
display: flex;
flex-wrap: wrap;
gap: 10px 22px;
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, .10);
color: rgba(255, 255, 255, .60);
font-size: 13px;
}
.bm-hero__stats span {
display: inline-flex;
align-items: center;
gap: 7px;
}
.bm-hero__stats svg {
color: var(--bm-accent);
flex: none;
}
.bm-hero__latest {
position: relative;
width: min(100%, 430px);
justify-self: center;
background: rgba(255, 255, 255, .07);
border: 1px solid rgba(255, 255, 255, .14);
border-radius: 24px;
padding: 10px;
box-shadow: 0 26px 60px rgba(0, 20, 40, .35);
}
.bm-hero__latest-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 9px 10px 13px;
}
.bm-hero__live {
display: inline-flex;
align-items: center;
gap: 9px;
color: #fff;
font-size: 15px;
font-weight: 800;
}
.bm-hero__live i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--bm-red);
animation: bm-hero-pulse 2.4s ease-in-out infinite;
}
@keyframes bm-hero-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(211, 36, 36, .30); }
50%      { box-shadow: 0 0 0 6px rgba(211, 36, 36, .10); }
}
.bm-hero__playall {
display: inline-flex;
align-items: center;
gap: 7px;
border: 0;
cursor: pointer;
background: var(--bm-red);
color: #fff;
border-radius: 999px;
padding: 8px 18px;
font: inherit;
font-size: 13px;
font-weight: 700;
box-shadow: 0 8px 18px rgba(130, 12, 12, .35);
transition: background var(--bm-trs), transform var(--bm-trs);
}
.bm-hero__playall:hover {
background: var(--bm-red-dark);
transform: translateY(-1px);
}
.bm-hero__row {
display: flex;
align-items: center;
gap: 10px;
padding: 7px 8px;
border-radius: 15px;
transition: background var(--bm-trs);
}
.bm-hero__row:hover {
background: rgba(255, 255, 255, .08);
}
.bm-hero__track {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 11px;
color: inherit;
text-decoration: none;
}
.bm-hero__track-cover {
flex: none;
width: 50px;
height: 50px;
border-radius: 13px;
overflow: hidden;
background: rgba(255, 255, 255, .10);
line-height: 0;
}
.bm-hero__track-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bm-hero__track-txt {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.bm-hero__track-name {
color: #fff;
font-size: 13.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bm-hero__track-artist {
color: rgba(255, 255, 255, .58);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bm-hero__track-play {
flex: none;
width: 33px;
height: 33px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, .13);
color: #fff;
display: grid;
place-items: center;
cursor: pointer;
transition: background var(--bm-trs), transform var(--bm-trs);
}
.bm-hero__track-play svg {
margin-inline-start: 1px;
}
.bm-hero__track-play:hover {
background: var(--bm-red);
transform: scale(1.08);
}
@media (max-width: 900px) {
.bm-hero__inner {
grid-template-columns: 1fr;
gap: 44px;
}
.bm-hero__copy {
text-align: center;
}
.bm-hero__sub {
margin-inline: auto;
}
.bm-hero__chips,
.bm-hero__stats {
justify-content: center;
}
.bm-hero__latest {
margin-inline: auto;
}
.bm-hero__vinyl {
width: 360px;
height: 360px;
inset-inline-end: -140px;
bottom: -140px;
}
}
@media (max-width: 720px) {
.bm-hero {
margin-top: -68px;
padding: 86px 16px 48px;
min-height: calc(100svh - 4px);
border-radius: 0 0 22px 22px;
}
.bm-hero__title {
font-size: 31px;
margin-top: 13px;
}
.bm-hero__sub {
font-size: 13.5px;
margin-bottom: 18px;
}
.bm-hero__stats {
gap: 8px 14px;
font-size: 12px;
margin-top: 20px;
padding-top: 16px;
}
.bm-hero__latest {
width: 100%;
max-width: 400px;
padding: 8px;
border-radius: 19px;
}
.bm-hero__latest-head {
padding: 7px 8px 10px;
}
.bm-hero__live {
font-size: 13.5px;
}
.bm-hero__playall {
padding: 7px 14px;
font-size: 12.5px;
}
.bm-hero__row {
padding: 5px 6px;
border-radius: 12px;
}
.bm-hero__track {
gap: 9px;
}
.bm-hero__track-cover {
width: 44px;
height: 44px;
border-radius: 11px;
}
.bm-hero__track-name {
font-size: 12.5px;
}
.bm-hero__track-artist {
font-size: 11px;
}
.bm-hero__track-play {
width: 30px;
height: 30px;
}
}
.bm-post {
background: var(--bm-surface);
border: 1px solid var(--bm-line);
border-radius: var(--bm-radius);
box-shadow: var(--bm-shadow-1);
margin-bottom: 16px;
overflow: hidden;
}
.bm-post__head {
padding: 12px 16px;
border-bottom: 1px solid var(--bm-line);
background: #f4f8fa;
}
.bm-post__title {
font-size: 16.5px;
}
.bm-post__title a {
color: var(--bm-blue-deep);
}
.bm-post__title a:hover {
color: var(--bm-blue);
}
.bm-post__body {
padding: 14px 16px;
}
.bm-post__cover {
aspect-ratio: 1 / 1;
max-width: 500px;
margin: 14px auto 6px;
border-radius: 20px;
overflow: hidden;
border: 2px solid #e5e5e5;
transition: border-color var(--bm-trs);
}
.bm-post__cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.bm-post__cover:hover {
border-color: var(--bm-accent);
}
.bm-post__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 12px;
padding-top: 10px;
border-top: 1px dashed var(--bm-line);
}
.bm-post__date {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: var(--bm-red-dark);
background: var(--bm-red-soft);
padding: 3px 12px;
border-radius: 999px;
}
.bm-post__more {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 22px;
border-radius: 999px;
background: var(--bm-grad-fun);
color: #fff;
font-size: 13.5px;
font-weight: 700;
box-shadow: 0 4px 12px rgba(0, 124, 190, .30);
transition: filter var(--bm-trs), transform var(--bm-trs), box-shadow var(--bm-trs);
}
.bm-post__more:hover {
filter: brightness(1.1);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(0, 124, 190, .4);
}
.bm-post__body p {
text-align: justify;
}
.bm-archhead .bm-box__head h1 {
font-size: 18px;
}