.dobro-hub-widget.hub-v2 {
--hub-primary: #6b8f71;
--hub-text: #212121;
--hub-muted: #5b4f3d;
--hub-accent-bordeaux: #d4a373;
--hub-accent-bordeaux-dark: #be9063;
--hub-accent-bordeaux-light: #e0b184;
--hub-state-active: #6b8f71;
--hub-state-active-bg: #e6f0e9;
--hub-state-active-br: #a2bfa8;
--hub-state-review: #2f6ea6;
--hub-state-review-bg: #e8f1fb;
--hub-state-review-br: #9fc0e1;
--hub-state-soon: #c65d3b;
--hub-state-soon-bg: #fbe8dd;
--hub-state-soon-br: #ddb099;
--hub-state-ended: #212121;
--hub-state-ended-bg: #f2e6cf;
--hub-state-ended-br: #d4a373;
--hub-hero-side: clamp(520px, 45vw, 700px);
width: min(1320px, calc(100vw - 72px));
max-width: none;
margin: 28px auto;
margin-left: 50%;
transform: translateX(-50%);
padding: 18px;
border-radius: 20px;
font-family: "Montserrat", "Segoe UI", sans-serif;
color: var(--hub-text);
background:
radial-gradient(760px 420px at 6% -12%, rgba(168, 27, 27, .16) 0%, rgba(168, 27, 27, .04) 38%, rgba(168, 27, 27, 0) 74%),
radial-gradient(820px 460px at 98% 8%, rgba(212, 163, 115, .26) 0%, rgba(212, 163, 115, .08) 42%, rgba(212, 163, 115, 0) 78%),
linear-gradient(165deg, #fff6e4 0%, #ffefd1 38%, #f5d7a1 100%);
border: 1px solid #d4a373;
box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 10px 30px rgba(0, 0, 0, .10);
box-sizing: border-box;
overflow-x: clip;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.dobro-hub-widget.hub-v2 *,
.dobro-hub-widget.hub-v2 *::before,
.dobro-hub-widget.hub-v2 *::after {
box-sizing: border-box;
}
.dobro-hub-widget.hub-v2 .hub-head h2 {
margin: 0;
text-align: center;
font-size: clamp(30px, 3.6vw, 54px);
line-height: 1.06;
letter-spacing: .01em;
color: #212121;
}
.dobro-hub-widget.hub-v2 .hub-head p {
margin: 10px 0 0;
text-align: center;
color: var(--hub-muted);
font-size: 14px;
}
.dobro-hub-widget.hub-v2 .hub-layout {
margin-top: 16px;
display: grid;
grid-template-columns: var(--hub-hero-side) minmax(350px, 1fr);
gap: 14px;
align-items: stretch;
height: var(--hub-hero-side);
}
.dobro-hub-widget.hub-v2 .hub-hero {
height: 100%;
width: 100%;
}
.dobro-hub-widget.hub-v2 .hub-hero-image {
position: relative;
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
border-radius: 18px;
overflow: hidden;
border: 1px solid #cfe0f2;
border-color: #d4a373;
background: #faf3e0;
}
.dobro-hub-widget.hub-v2 .hub-hero-image img {
width: 100%;
height: 100%;
display: block;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.dobro-hub-widget.hub-v2 .hub-hero-fallback {
width: 100%;
height: 100%;
display: grid;
place-items: center;
color: #5f5542;
font-weight: 700;
}
.dobro-hub-widget.hub-v2 .hub-hero-badge {
position: absolute;
top: 12px;
left: 12px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 10px;
padding: 6px 11px;
font-size: 12px;
font-weight: 800;
line-height: 1;
letter-spacing: 0;
border: 1px solid transparent;
box-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.dobro-hub-widget.hub-v2 .hub-hero-badge.state-active {
background: #6b8f71;
border-color: #56745c;
color: #ffffff;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-hero-badge.state-active {
gap: 7px;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-hero-badge.state-active::before {
content: "";
position: relative;
z-index: 2;
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 auto;
background: #ffffff;
box-shadow: 0 0 0 1px rgba(255,255,255,.65);
animation: hubDotPulse 1.25s ease-out infinite;
}
.dobro-hub-widget.hub-v2 .hub-hero-badge.state-review {
background: var(--hub-state-review);
border-color: #255986;
color: #ffffff;
}
.dobro-hub-widget.hub-v2 .hub-hero-badge.state-soon_start {
background: #c65d3b;
border-color: #a94e30;
color: #ffffff;
}
.dobro-hub-widget.hub-v2 .hub-hero-badge.state-ended {
background: #f2e6cf;
border-color: #d4a373;
color: #212121;
}
.dobro-hub-widget.hub-v2 .hub-hero-chipline {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.dobro-hub-widget.hub-v2 .hub-chip {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,.55);
background: rgba(33,33,33,.68);
backdrop-filter: blur(3px);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 6px 10px;
}
.dobro-hub-widget.hub-v2 .hub-chip.hub-chip-part-individual {
background: rgba(0, 0, 0, .68);
}
.dobro-hub-widget.hub-v2 .hub-chip.hub-chip-part-collective {
background: rgba(0, 0, 0, .68);
}
.dobro-hub-widget.hub-v2 .hub-chip.hub-chip-kind {
background: rgba(212, 163, 115, .92);
color: #212121;
border-color: rgba(255,255,255,.45);
}
.dobro-hub-widget.hub-v2 .hub-list {
border: 1px solid #d4a373;
border-radius: 16px;
background: linear-gradient(180deg, #faf3e0 0%, #ffefd1 100%);
padding: 10px;
overflow: auto;
display: grid;
gap: 8px;
grid-auto-rows: max-content;
align-content: start;
height: 100%;
max-height: 100%;
}
.dobro-hub-widget.hub-v2 .hub-list-item {
border: 1.5px solid #d4a373;
border-radius: 14px;
background: #fff7e8;
padding: 0;
min-height: 158px;
height: auto;
align-self: start;
box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
cursor: pointer;
display: grid;
grid-template-columns: minmax(0, 1fr) 128px;
overflow: hidden;
position: relative;
}
.dobro-hub-widget.hub-v2 .hub-list-item:hover,
.dobro-hub-widget.hub-v2 .hub-list-item.is-active {
transform: translateY(-1px);
border-color: var(--hub-accent-bordeaux);
background: #fffaf0;
box-shadow: 0 10px 18px rgba(0, 0, 0, .12);
}
.dobro-hub-widget.hub-v2 .hub-list-item.is-active {
border-width: 2px;
border-color: var(--hub-accent-bordeaux-dark);
box-shadow: 0 0 0 4px rgba(212, 163, 115, .28), 0 14px 24px rgba(0, 0, 0, .22);
}
.dobro-hub-widget.hub-v2 .hub-list-item.is-active .hub-item-main {
background: linear-gradient(180deg, #fff3df 0%, #ffefd1 100%);
}
.dobro-hub-widget.hub-v2 .hub-list-item.is-active::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: linear-gradient(180deg, var(--hub-accent-bordeaux) 0%, var(--hub-accent-bordeaux-dark) 100%);
}
.dobro-hub-widget.hub-v2 .hub-item-main {
position: relative;
padding: 10px 10px 10px 12px;
border-right: 1px dashed #d4c3a0;
min-height: 100%;
}
.dobro-hub-widget.hub-v2 .hub-status-sticker {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
gap: 7px;
border-radius: 10px;
padding: 5px 10px;
font-size: 12px;
font-weight: 800;
line-height: 1;
border: 1px solid transparent;
box-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.dobro-hub-widget.hub-v2 .hub-status-icon {
font-size: 12px;
line-height: 1;
}
.dobro-hub-widget.hub-v2 .hub-status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
background: currentColor;
position: relative;
flex: 0 0 auto;
display: inline-block;
}
.dobro-hub-widget.hub-v2 .hub-hero-badge .hub-status-dot {
background: transparent;
}
.dobro-hub-widget.hub-v2 .hub-hero-badge .hub-status-dot::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 0 0 1px rgba(255,255,255,.65);
}
.dobro-hub-widget.hub-v2 .hub-status-dot::after {
content: "";
position: absolute;
inset: -5px;
border-radius: 50%;
border: 2px solid currentColor;
opacity: .6;
}
.dobro-hub-widget.hub-v2 .hub-hero-badge .hub-status-dot::after {
border-color: rgba(255, 255, 255, .95);
}
.dobro-hub-widget.hub-v2 .hub-status-icon.anim-pulse {
animation: hubPulse 1.8s ease-in-out infinite;
}
.dobro-hub-widget.hub-v2 .hub-status-dot.anim-live {
animation: hubDotPulse 1.25s ease-out infinite;
}
.dobro-hub-widget.hub-v2 .hub-status-dot.anim-live::after {
animation: hubRingPulse 1.25s ease-out infinite;
}
.dobro-hub-widget.hub-v2 .hub-status-icon.anim-sway {
animation: hubSway 2.2s ease-in-out infinite;
transform-origin: 50% 10%;
}
@keyframes hubPulse {
0%, 100% { transform: scale(1); opacity: 1; }
45% { transform: scale(1.16); opacity: .82; }
}
@keyframes hubSway {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(-7deg); }
75% { transform: rotate(7deg); }
}
@keyframes hubDotPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(.88); }
}
@keyframes hubRingPulse {
0% { transform: scale(.65); opacity: .62; }
100% { transform: scale(1.25); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.dobro-hub-widget.hub-v2 .hub-status-icon.anim-pulse,
.dobro-hub-widget.hub-v2 .hub-status-icon.anim-sway,
.dobro-hub-widget.hub-v2 .hub-status-dot.anim-live,
.dobro-hub-widget.hub-v2 .hub-status-dot.anim-live::after,
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-hero-badge.state-active::before {
animation: none !important;
}
}
.dobro-hub-widget.hub-v2 .hub-status-sticker.state-active {
background: #6b8f71;
color: #fff;
border-color: #56745c;
}
.dobro-hub-widget.hub-v2 .hub-status-sticker.state-review {
background: var(--hub-state-review);
color: #fff;
border-color: #255986;
}
.dobro-hub-widget.hub-v2 .hub-status-sticker.state-soon_start {
background: #c65d3b;
color: #fff;
border-color: #a94e30;
}
.dobro-hub-widget.hub-v2 .hub-status-sticker.state-ended {
background: #f2e6cf;
color: #212121;
border-color: #d4a373;
}
.dobro-hub-widget.hub-v2 .hub-list-item h3 {
margin: 0;
padding-right: 0;
font-size: 18px;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: .01em;
white-space: normal;
overflow: visible;
text-overflow: clip;
word-break: break-word;
}
.dobro-hub-widget.hub-v2 .hub-item-kind {
margin: 0 0 6px;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 700;
color: #5b4f3d;
background: #f2e6cf;
border: 1px solid #d4a373;
border-radius: 999px;
padding: 4px 9px;
}
.dobro-hub-widget.hub-v2 .hub-item-dates {
margin: 6px 0 0;
font-size: 12px;
color: #41382b;
font-weight: 600;
}
.dobro-hub-widget.hub-v2 .hub-item-meta {
margin-top: 9px;
display: flex;
align-items: center;
}
.dobro-hub-widget.hub-v2 .hub-status-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border-radius: 999px;
border: 1px solid #d4a373;
background: #f2e6cf;
color: #212121;
font-size: 13px;
font-weight: 800;
padding: 6px 12px;
}
.dobro-hub-widget.hub-v2 .hub-status-pill i {
font-size: 7px;
}
.dobro-hub-widget.hub-v2 .hub-status-pill.state-active {
background: #6b8f71;
border-color: #6b8f71;
color: #ffffff;
}
.dobro-hub-widget.hub-v2 .hub-status-pill.state-soon_start {
background: #c65d3b;
border-color: #c65d3b;
color: #ffffff;
}
.dobro-hub-widget.hub-v2 .hub-status-pill.state-ended {
background: var(--hub-state-ended-bg);
border-color: var(--hub-state-ended-br);
color: var(--hub-state-ended);
}
.dobro-hub-widget.hub-v2 .hub-item-actions {
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed #d4a373;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn {
text-decoration: none;
border-radius: 999px;
padding: 7px 12px;
font-size: 12px;
font-weight: 700;
border: 1px solid #d4a373;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
white-space: nowrap;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
appearance: none;
-webkit-appearance: none;
-webkit-tap-highlight-color: transparent;
outline: none;
position: relative;
overflow: hidden;
background-clip: padding-box;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn:focus,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn:focus-visible {
outline: none !important;
box-shadow: 0 0 0 2px rgba(255, 239, 209, .95), 0 0 0 4px rgba(107, 143, 113, .32);
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary {
background: linear-gradient(180deg, #6b8f71 0%, #56745c 100%);
border-color: #56745c;
color: #fff;
box-shadow: 0 6px 14px rgba(86, 116, 92, .28);
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost {
background: #f5d7a1;
color: #212121;
border-color: #d4a373;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:link,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:visited,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:hover,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:active {
color: #fff !important;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:link,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:visited,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:hover,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:active {
color: #212121 !important;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:visited {
color: #fff;
border-color: #56745c;
background: linear-gradient(180deg, #6b8f71 0%, #56745c 100%);
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:visited {
color: #212121;
border-color: #d4a373;
background: #f5d7a1;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:active {
background: linear-gradient(180deg, #5f8165 0%, #4f6a55 100%);
border-color: #4f6a55;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:active {
background: #e3c58f;
border-color: #c59560;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn:hover {
transform: translateY(-1px);
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:hover {
background: linear-gradient(180deg, #7ca383 0%, #5f7f66 100%);
border-color: #4f6a55;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:hover {
background: #e8cfa4;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.is-disabled,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.is-disabled:link,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.is-disabled:visited,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.is-disabled:hover,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.is-disabled:active,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary.is-disabled,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary.is-disabled:hover,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary.is-disabled:active {
background: linear-gradient(180deg, #b8c2bb 0%, #a3aea7 100%) !important;
border-color: #9aa69f !important;
color: #f6f8f7 !important;
cursor: not-allowed;
box-shadow: none !important;
pointer-events: none;
transform: none !important;
opacity: .95;
}
.dobro-hub-widget.hub-v2 .hub-ticket-date {
background: #faf3e0;
display: grid;
align-content: center;
justify-items: center;
padding: 6px 4px;
}
.dobro-hub-widget.hub-v2 .hub-ticket-prefix {
font-size: 18px;
font-weight: 800;
line-height: 1;
text-transform: uppercase;
}
.dobro-hub-widget.hub-v2 .hub-ticket-full {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.dobro-hub-widget.hub-v2 .hub-ticket-day {
margin-top: 2px;
font-size: 52px;
line-height: .9;
font-weight: 900;
letter-spacing: .01em;
}
.dobro-hub-widget.hub-v2 .hub-ticket-month {
margin-top: 2px;
font-size: 19px;
font-weight: 800;
letter-spacing: .02em;
}
.dobro-hub-widget.hub-v2 .hub-ticket-date.state-active {
background: linear-gradient(180deg, #6b8f71 0%, #56745c 100%);
color: #ffffff;
border-left: 1px solid #56745c;
}
.dobro-hub-widget.hub-v2 .hub-ticket-date.state-review {
background: linear-gradient(180deg, #3d81bd 0%, #2f6ea6 100%);
color: #ffffff;
border-left: 1px solid #255986;
}
.dobro-hub-widget.hub-v2 .hub-ticket-date.state-soon_start {
background: linear-gradient(180deg, #c65d3b 0%, #a94e30 100%);
color: #ffffff;
border-left: 1px solid #a94e30;
}
.dobro-hub-widget.hub-v2 .hub-ticket-date.state-ended {
background: linear-gradient(180deg, #f4e7d1 0%, #efdfc3 100%);
color: #4a3e2d;
border-left: 1px solid #d4a373;
}
.dobro-hub-widget.hub-v2 .hub-ticket-date.is-ended-marker {
gap: 8px;
padding: 10px 8px;
}
.dobro-hub-widget.hub-v2 .hub-ticket-done-icon {
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-grid;
place-items: center;
background: #6b8f71;
color: #ffffff;
font-size: 21px;
line-height: 1;
box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 3px 8px rgba(0,0,0,.12);
}
.dobro-hub-widget.hub-v2 .hub-ticket-done-text {
max-width: 100%;
color: #4a3e2d;
font-size: 12px;
line-height: 1.1;
font-weight: 900;
text-align: center;
text-transform: uppercase;
}
.dobro-hub-widget.hub-v2 .hub-controls {
position: sticky;
bottom: 0;
display: none;
grid-template-columns: 1fr 1fr;
gap: 8px;
background: linear-gradient(180deg, rgba(250,243,224,0) 0%, rgba(250,243,224,1) 40%);
padding-top: 6px;
}
.dobro-hub-widget.hub-v2.hub-has-overflow .hub-controls {
display: grid;
}
.dobro-hub-widget.hub-v2 .hub-nav {
appearance: none;
border: 2px solid #a81b1b;
border-radius: 10px;
background: linear-gradient(180deg, #fff2da 0%, #f5d7a1 100%);
color: #7e1515;
height: 40px;
cursor: pointer;
box-shadow: 0 10px 22px rgba(168, 27, 27, .24), 0 4px 10px rgba(0,0,0,.16);
transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}
.dobro-hub-widget.hub-v2 .hub-nav:hover {
background: linear-gradient(180deg, #fff8eb 0%, #f8deaf 100%);
border-color: #8e1616;
color: #8e1616;
box-shadow: 0 14px 28px rgba(168, 27, 27, .32), 0 6px 14px rgba(0,0,0,.18);
transform: translateY(-1px);
}
.dobro-hub-widget.hub-v2 .hub-nav:active {
transform: translateY(0);
box-shadow: 0 6px 14px rgba(168, 27, 27, .25);
}
.dobro-hub-widget.hub-v2 .hub-nav:focus,
.dobro-hub-widget.hub-v2 .hub-nav:focus-visible {
outline: none !important;
border-color: #8e1616;
box-shadow: 0 0 0 3px rgba(245, 215, 161, .95), 0 0 0 6px rgba(168, 27, 27, .35), 0 14px 28px rgba(168, 27, 27, .34);
}
.dobro-hub-widget.hub-v2 .hub-empty {
margin-top: 12px;
border: 1px dashed #d4a373;
border-radius: 12px;
padding: 16px;
color: #5b4f3d;
background: rgba(255, 239, 209, .55);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3-desktop {
width: min(1320px, calc(100vw - 72px));
max-width: none;
margin-left: 50%;
transform: translateX(-50%);
zoom: .84;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3-desktop .hub-head h2 {
font-size: clamp(26px, 2.8vw, 40px);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3-desktop .hub-layout {
grid-template-columns: var(--hub-hero-side) minmax(350px, 1fr);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 {
display: none;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 {
width: min(980px, calc(100vw - 28px));
padding: 14px;
border-radius: 12px;
overflow: hidden;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-head h2 {
max-width: 760px;
margin: 0 auto;
font-size: clamp(22px, 5vw, 36px);
line-height: 1.1;
letter-spacing: 0;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-showcase,
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-all {
margin-top: 14px;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-section-title {
margin: 0 0 8px;
color: #2d251c;
font-size: 17px;
line-height: 1.15;
font-weight: 900;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slider {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(240px, 84%);
gap: 10px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding: 1px 2px 12px;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide {
scroll-snap-align: start;
border: 1.5px solid #d4a373;
border-radius: 8px;
background: #fff7e8;
overflow: hidden;
box-shadow: 0 5px 14px rgba(0, 0, 0, .10);
display: flex;
flex-direction: column;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide-image {
position: relative;
aspect-ratio: 1 / 1;
overflow: hidden;
background: #faf3e0;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide-image img {
width: 100%;
height: 100%;
display: block;
object-fit: contain;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-image-fallback {
width: 100%;
height: 100%;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-image-fallback {
display: grid;
place-items: center;
color: #5f5542;
font-weight: 800;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide-body {
padding: 10px;
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide h3 {
margin: 0;
color: #171717;
font-size: 17px;
line-height: 1.18;
word-break: break-word;
min-height: 2.36em;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide .hub-item-kind {
min-height: 34px;
width: fit-content;
max-width: 100%;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide .hub-item-dates {
min-height: 18px;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-deadline {
margin-top: 8px;
margin-bottom: 14px;
display: inline-flex;
align-items: center;
align-self: flex-start;
min-height: 28px;
border-radius: 999px;
padding: 5px 10px;
color: #fff;
background: #6b8f71;
font-size: 12px;
line-height: 1;
font-weight: 900;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-deadline.state-review {
background: var(--hub-state-review);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-deadline.state-soon_start {
background: #c65d3b;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-deadline.state-ended {
color: #4a3e2d;
background: #f2e6cf;
border: 1px solid #d4a373;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-accordion {
display: grid;
gap: 8px;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row {
border: 1.5px solid #d4a373;
border-radius: 8px;
background: #fff7e8;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row.is-hidden-page {
display: none;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row-toggle {
width: 100%;
border: 0;
margin: 0;
padding: 10px;
background: transparent;
color: inherit;
display: grid;
grid-template-columns: minmax(0, 1fr) 28px;
gap: 8px;
text-align: left;
cursor: pointer;
font: inherit;
appearance: none;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row-toggle:focus,
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row-toggle:focus-visible {
outline: none;
box-shadow: inset 0 0 0 3px rgba(107, 143, 113, .28);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row-main {
min-width: 0;
display: grid;
gap: 6px;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row-title {
color: #171717;
font-size: 16px;
line-height: 1.2;
font-weight: 900;
word-break: break-word;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row-meta {
display: flex;
flex-wrap: wrap;
gap: 5px 10px;
color: #4b4032;
font-size: 12px;
line-height: 1.25;
font-weight: 700;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row-meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-chevron {
align-self: center;
justify-self: center;
color: #7e1515;
transition: transform .16s ease;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row.is-open .hub-mobile-chevron {
transform: rotate(180deg);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row-panel {
display: none;
padding: 0 10px 10px;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row.is-open .hub-mobile-row-panel {
display: block;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-chipline {
padding-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-chip {
background: rgba(33,33,33,.70);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-chip.hub-chip-kind {
background: #f2e6cf;
color: #212121;
border-color: #d4a373;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-item-actions {
margin-top: auto;
padding-top: 14px;
border-top: 1px dashed #d4a373;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide .hub-item-actions {
min-height: 98px;
display: grid;
grid-template-rows: 38px 38px;
gap: 8px;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-item-actions .btn {
min-height: 38px;
border-radius: 8px;
flex: 1 1 128px;
white-space: normal;
text-align: center;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide .hub-item-actions .btn {
width: 100%;
min-width: 0;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide .hub-item-actions .btn.primary {
grid-row: 1;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slide .hub-item-actions .btn.ghost {
grid-row: 2;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-row .hub-item-actions {
border-top: 0;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-all-link,
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-all-link:link,
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-all-link:visited {
width: 100%;
min-height: 48px;
border: 1.5px solid #a81b1b;
border-radius: 8px;
background: linear-gradient(180deg, #fff2da 0%, #f5d7a1 100%);
color: #7e1515;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
text-decoration: none;
font-size: 17px;
line-height: 1;
font-weight: 900;
box-shadow: 0 6px 14px rgba(168, 27, 27, .14);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-all-link:hover,
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-all-link:active {
color: #7e1515;
background: linear-gradient(180deg, #fff8eb 0%, #f8deaf 100%);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-all-link:focus,
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-all-link:focus-visible,
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-all-link:active {
outline: none;
box-shadow: 0 6px 14px rgba(168, 27, 27, .14);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-more {
width: 100%;
min-height: 44px;
margin-top: 10px;
border: 1.5px solid #a81b1b;
border-radius: 8px;
background: linear-gradient(180deg, #fff2da 0%, #f5d7a1 100%);
color: #7e1515;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 15px;
font-weight: 900;
cursor: pointer;
}
@media (min-width: 700px) {
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slider {
grid-auto-columns: minmax(260px, 44%);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-accordion {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-more {
max-width: 360px;
margin-left: auto;
margin-right: auto;
}
}
@media (min-width: 1024px) {
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slider {
grid-auto-columns: minmax(280px, 31%);
}
}
@media (max-width: 840px), (max-width: 1080px) and (hover: none) and (pointer: coarse) {
.dobro-hub-widget.hub-v2.hub-mobile-v3-desktop {
display: none;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 {
display: block;
}
}
@media (max-width: 420px) {
.dobro-hub-widget.hub-v2.hub-mobile-v3 {
width: 100vw;
max-width: 100vw;
margin: 1px calc(50% - 50vw);
padding: 8px;
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-head h2 {
font-size: clamp(18px, 6vw, 22px);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-mobile-slider {
grid-auto-columns: minmax(230px, 88%);
}
.dobro-hub-widget.hub-v2.hub-mobile-v3 .hub-item-actions .btn {
flex-basis: 100%;
font-size: 11px;
}
}
@media (max-width: 1080px) {
.dobro-hub-widget.hub-v2 {
width: calc(100vw - 28px);
margin: 14px auto;
margin-left: auto;
transform: none;
padding: 14px;
--hub-hero-side: min(100%, 620px);
}
.dobro-hub-widget.hub-v2 .hub-layout {
grid-template-columns: 1fr;
height: auto;
gap: 10px;
}
.dobro-hub-widget.hub-v2 .hub-list {
max-height: min(64vh, 720px);
height: auto;
}
.dobro-hub-widget.hub-v2 .hub-hero-image,
.dobro-hub-widget.hub-v2 .hub-hero-fallback {
aspect-ratio: 1 / 1;
}
}
@media (max-width: 840px) {
.dobro-hub-widget.hub-v2 .hub-head h2 {
font-size: clamp(24px, 6.2vw, 34px);
line-height: 1.1;
}
.dobro-hub-widget.hub-v2 .hub-list {
max-height: none;
overflow: visible;
}
.dobro-hub-widget.hub-v2 .hub-controls {
position: static;
background: none;
padding-top: 4px;
}
.dobro-hub-widget.hub-v2 .hub-list-item {
grid-template-columns: 1fr;
min-height: 0;
}
.dobro-hub-widget.hub-v2 .hub-item-main {
border-right: 0;
border-bottom: 1px dashed #d4c3a0;
}
.dobro-hub-widget.hub-v2 .hub-status-sticker {
position: relative;
top: auto;
right: auto;
bottom: auto;
left: auto;
margin: 0 0 6px;
width: fit-content;
}
.dobro-hub-widget.hub-v2 .hub-list-item h3 {
padding-top: 0;
font-size: 16px !important;
line-height: 1.2 !important;
text-transform: none;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn {
padding: 8px 10px;
font-size: 11px;
width: 100%;
text-align: center;
}
.dobro-hub-widget.hub-v2 .hub-item-actions {
gap: 8px;
}
.dobro-hub-widget.hub-v2 .hub-ticket-date {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 8px 10px;
}
.dobro-hub-widget.hub-v2 .hub-ticket-prefix {
font-size: 15px;
}
.dobro-hub-widget.hub-v2 .hub-ticket-day {
font-size: 30px;
line-height: 1;
margin-top: 0;
}
.dobro-hub-widget.hub-v2 .hub-ticket-month {
font-size: 14px;
margin-top: 0;
}
}
@media (max-width: 640px) {
.dobro-hub-widget.hub-v2 {
padding: 9px;
border-radius: 12px;
margin: 2px calc(50% - 50vw);
width: 100vw;
max-width: 100vw;
transform: none;
}
.dobro-hub-widget.hub-v2 .hub-layout {
gap: 7px;
}
.dobro-hub-widget.hub-v2 .hub-head h2 {
font-size: clamp(19px, 6.8vw, 26px);
letter-spacing: 0;
line-height: 1.14;
max-width: 96%;
margin-left: auto;
margin-right: auto;
}
.dobro-hub-widget.hub-v2 .hub-hero-badge {
top: 8px;
left: 8px;
padding: 4px 8px;
font-size: 10px;
border-radius: 8px;
}
.dobro-hub-widget.hub-v2 .hub-hero-chipline {
left: 8px;
right: 8px;
bottom: 8px;
gap: 5px;
justify-content: flex-start;
}
.dobro-hub-widget.hub-v2 .hub-chip {
font-size: 9px;
padding: 4px 7px;
max-width: 100%;
}
.dobro-hub-widget.hub-v2 .hub-list-item h3 {
font-size: 15px !important;
}
.dobro-hub-widget.hub-v2 .hub-item-dates {
font-size: 11px;
line-height: 1.25;
margin-top: 4px;
}
.dobro-hub-widget.hub-v2 .hub-status-sticker {
font-size: 11px;
padding: 4px 8px;
}
.dobro-hub-widget.hub-v2 .hub-ticket-day {
font-size: 28px;
}
.dobro-hub-widget.hub-v2 .hub-ticket-month {
font-size: 13px;
}
.dobro-hub-widget.hub-v2 .hub-nav {
height: 36px;
}
}
@media (hover: none) and (pointer: coarse) {
.dobro-hub-widget.hub-v2 .hub-list-item,
.dobro-hub-widget.hub-v2 .hub-list-item * {
-webkit-tap-highlight-color: transparent !important;
}
.dobro-hub-widget.hub-v2 .hub-list-item {
pointer-events: none;
}
.dobro-hub-widget.hub-v2 .hub-list-item .hub-item-actions,
.dobro-hub-widget.hub-v2 .hub-list-item .hub-item-actions * {
pointer-events: auto;
}
.dobro-hub-widget.hub-v2 .hub-list-item:hover,
.dobro-hub-widget.hub-v2 .hub-list-item:active,
.dobro-hub-widget.hub-v2 .hub-list-item.is-active {
transform: none !important;
border-color: #d4a373 !important;
background: #fff7e8 !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, .08) !important;
border-width: 1.5px !important;
}
.dobro-hub-widget.hub-v2 .hub-list-item::before,
.dobro-hub-widget.hub-v2 .hub-list-item.is-active::before {
display: none !important;
}
.dobro-hub-widget.hub-v2 .hub-list-item.is-active .hub-item-main {
background: transparent !important;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn:focus,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn:focus-visible,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn:active,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn:hover {
outline: none !important;
box-shadow: none !important;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:link,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:visited,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:hover,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary:active {
background: linear-gradient(180deg, #6b8f71 0%, #56745c 100%) !important;
border-color: #56745c !important;
color: #fff !important;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:link,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:visited,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:hover,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.ghost:active {
background: #f5d7a1 !important;
border-color: #d4a373 !important;
color: #212121 !important;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.is-disabled,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.is-disabled:link,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.is-disabled:visited,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.is-disabled:hover,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.is-disabled:active,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary.is-disabled,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary.is-disabled:hover,
.dobro-hub-widget.hub-v2 .hub-item-actions .btn.primary.is-disabled:active {
background: linear-gradient(180deg, #b8c2bb 0%, #a3aea7 100%) !important;
border-color: #9aa69f !important;
color: #f6f8f7 !important;
box-shadow: none !important;
transform: none !important;
}
}
@media (max-width: 420px) {
.dobro-hub-widget.hub-v2 {
margin: 1px calc(50% - 50vw);
width: 100vw;
max-width: 100vw;
padding: 7px;
}
.dobro-hub-widget.hub-v2 .hub-head h2 {
font-size: clamp(17px, 6.2vw, 22px);
}
.dobro-hub-widget.hub-v2 .hub-ticket-prefix {
font-size: 13px;
}
.dobro-hub-widget.hub-v2 .hub-ticket-day {
font-size: 24px;
}
.dobro-hub-widget.hub-v2 .hub-ticket-month {
font-size: 12px;
}
.dobro-hub-widget.hub-v2 .hub-item-actions .btn {
font-size: 10px;
}
}