.dmb-home-block,
.dmb-grid-block {
border: 1px solid #3a4250;
border-radius: 14px;
padding: 20px;
background: linear-gradient(160deg, #141820 0%, #1d2633 100%);
color: #e2e8f0;
box-shadow: 0 8px 24px rgba(10, 13, 18, 0.24);
}
.dmb-home-block__header h2,
.dmb-grid-block__header h2 {
margin: 0 0 8px;
color: #f8fafc;
}
.dmb-home-block__header p,
.dmb-grid-block__header p {
color: #cbd5e1;
}
.dmb-home-random h3,
.dmb-home-mine h3,
.dmb-grid-block__header h2 {
color: #f8fafc;
}
.dmb-home-block__eyebrow,
.dmb-grid-block__eyebrow {
margin: 0 0 6px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #f59e0b;
}
.dmb-home-menu {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
width: min(360px, 100%);
}
.dmb-home-hero {
display: grid;
grid-template-columns: 1fr minmax(280px, 360px) 1fr;
align-items: center;
gap: 10px;
margin: 14px 0 18px;
}
.dmb-home-menu__btn {
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px 12px;
border-radius: 10px;
background: linear-gradient(180deg, #243247 0%, #1a2535 100%);
color: #fff;
text-decoration: none;
border: 1px solid #4b5563;
transition: transform 0.15s ease, box-shadow 0.15s ease;
font: inherit;
cursor: pointer;
}
.dmb-home-tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, minmax(0, 1fr));
gap: 0;
width: 100%;
max-width: none;
}
.dmb-home-tiles--left {
justify-self: stretch;
}
.dmb-home-tiles--right {
justify-self: stretch;
}
.dmb-home-tile {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 0;
border: 0;
background-color: #0f172a;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: background-image 0.25s ease, transform 0.25s ease;
}
.dmb-home-tile.is-fallback {
background-image: linear-gradient(145deg, #334155, #0f172a);
}
.dmb-home-menu__btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 12px rgba(3, 7, 18, 0.2);
}
.dmb-home-menu__btn--primary {
position: relative;
isolation: isolate;
padding: 18px 16px;
min-height: 62px;
font-size: 1.06rem;
font-weight: 800;
background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
border-color: #f59e0b;
box-shadow: 0 10px 18px rgba(180, 83, 9, 0.38);
}
.dmb-home-menu__btn--primary:hover {
box-shadow: 0 12px 20px rgba(180, 83, 9, 0.44);
filter: brightness(1.03);
}
.dmb-home-menu__btn--primary::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 12px;
background: radial-gradient(circle, rgba(251, 191, 36, 0.45) 0%, rgba(245, 158, 11, 0) 70%);
z-index: -1;
animation: dmb-primary-halo 2.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes dmb-primary-halo {
0%, 100% {
opacity: 0.4;
transform: scale(0.98);
}
50% {
opacity: 0.9;
transform: scale(1.03);
}
}
@media (prefers-reduced-motion: reduce) {
.dmb-home-menu__btn--primary::after {
animation: none;
opacity: 0.55;
transform: none;
}
}
.dmb-home-mine__form {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.dmb-home-mine__form input {
min-width: 240px;
padding: 10px;
border-radius: 8px;
border: 1px solid #c7ccd6;
background: #f8fafc;
color: #0f172a;
}
.dmb-home-mine__form button {
padding: 10px 14px;
border: 0;
border-radius: 8px;
background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
color: #fff;
cursor: pointer;
font-weight: 700;
transition: transform 0.15s ease, filter 0.15s ease;
}
.dmb-home-mine__form button:hover {
transform: translateY(-1px);
filter: brightness(1.03);
}
.dmb-home-mine__form button:disabled {
opacity: 0.7;
cursor: wait;
}
.dmb-home-modal[hidden] {
display: none;
}
.dmb-home-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.dmb-home-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(2, 6, 23, 0.75);
}
.dmb-home-modal__dialog {
position: relative;
z-index: 1;
width: min(560px, 100%);
background: linear-gradient(180deg, #1b2331 0%, #111827 100%);
border: 1px solid #334155;
border-radius: 14px;
padding: 20px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}
.dmb-home-modal__close {
position: absolute;
top: 10px;
right: 10px;
width: 34px;
height: 34px;
border: 1px solid #475569;
border-radius: 10px;
background: #1f2937;
color: #e2e8f0;
font-size: 22px;
line-height: 1;
cursor: pointer;
}
.dmb-home-modal__close:hover {
background: #334155;
}
.dmb-home-modal-open {
overflow: hidden;
}
.dmb-home-random__grid,
.dmb-grid-block__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 12px;
margin-top: 12px;
}
.dmb-card {
border: 1px solid #dde2ea;
border-radius: 14px;
padding: 14px;
background: linear-gradient(180deg, #f8fafc 0%, #eef2f8 100%);
display: flex;
flex-direction: column;
gap: 10px;
}
.dmb-card__cover {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 4px 4px;
text-decoration: none;
}
.dmb-card__meta {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
font-size: 13px;
color: #475569;
}
.dmb-card__avatar {
width: 112px;
height: 112px;
object-fit: contain;
object-position: center bottom;
border-radius: 0;
-webkit-filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.3));
filter: drop-shadow(0 3px 6px rgba(15, 23, 42, 0.3));
}
.dmb-card__avatar--placeholder {
display: inline-flex;
background: radial-gradient(circle at 35% 30%, #64748b, #334155);
border: 2px solid #94a3b8;
border-radius: 0;
}
.dmb-card__title {
font-weight: 800;
color: #0f172a;
text-decoration: none;
line-height: 1.25;
}
.dmb-card__author {
margin: 0;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #64748b;
}
.dmb-grid-block__pagination {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.dmb-grid-page {
padding: 8px 10px;
border: 1px solid #c5ccd8;
border-radius: 8px;
background: #fff;
cursor: pointer;
}
.dmb-grid-page.is-active {
background: #0f172a;
border-color: #0f172a;
color: #fff;
}
.dmb-home-mine__message {
margin-top: 10px;
font-size: 14px;
}
.dmb-home-mine__message.is-success {
color: #86efac;
}
.dmb-home-mine__message.is-error,
.dmb-state--error {
color: #fca5a5;
}
.dmb-home-mine__message.is-loading {
color: #fde68a;
}
.dmb-state {
padding: 12px;
border-radius: 10px;
margin: 0;
}
.dmb-state--empty {
background: #1f2937;
color: #cbd5e1;
border: 1px solid #334155;
}
.dmb-state--error {
background: #2b1b1b;
border: 1px solid #7f1d1d;
}
.dmb-card--skeleton {
background: #182131;
border-color: #2c3748;
}
.dmb-skeleton {
border-radius: 6px;
background: linear-gradient(90deg, #273244 25%, #334155 50%, #273244 75%);
background-size: 200% 100%;
animation: dmb-skeleton-shimmer 1.3s infinite;
}
.dmb-skeleton--title {
height: 18px;
width: 70%;
margin-bottom: 10px;
}
.dmb-skeleton--meta {
height: 12px;
width: 45%;
margin-bottom: 10px;
}
.dmb-skeleton--line {
height: 12px;
width: 100%;
margin-top: 8px;
}
.dmb-skeleton--short {
width: 80%;
}
@keyframes dmb-skeleton-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.dmb-home-menu__btn:focus-visible,
.dmb-home-mine__form input:focus-visible,
.dmb-home-mine__form button:focus-visible,
.dmb-card__title:focus-visible,
.dmb-grid-page:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 2px;
}
@media (max-width: 1024px) {
.dmb-home-hero {
grid-template-columns: 1fr minmax(260px, 1fr) 1fr;
gap: 8px;
}
}
@media (max-width: 768px) {
.dmb-home-mine__form input {
min-width: 100%;
}
.dmb-home-hero {
grid-template-columns: 1fr;
}
.dmb-home-tiles {
display: none;
}
.dmb-home-menu {
width: min(420px, 100%);
margin-inline: auto;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.dmb-home-tiles {
max-width: none;
}
}
@media (max-width: 640px) {
.dmb-home-block,
.dmb-grid-block {
padding: 16px;
}
.dmb-home-random__grid,
.dmb-grid-block__grid {
grid-template-columns: 1fr;
}
.dmb-card__avatar {
width: 92px;
height: 92px;
}
.dmb-home-modal__dialog {
padding: 16px;
}
}