.wtb-project-trigger {
position: relative;
cursor: pointer;
border: 1px solid rgba(255,255,255,.12);
border-left: 1px solid var(--wtb-panel-accent, #4fb3ff);
background: var(--wtb-panel-bg, #0f2138);
color: var(--wtb-panel-title, #f4f7fb);
border-radius: var(--wtb-panel-radius, 8px);
box-shadow: 0 14px 30px rgba(0,0,0,.14);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
outline: none;
}
.wtb-project-trigger:hover,
.wtb-project-trigger:focus,
.wtb-project-trigger.is-active {
transform: translateY(-2px);
border-color: rgba(79,179,255,.48);
box-shadow: 0 18px 36px rgba(0,0,0,.22);
}
.wtb-project-trigger::after {
content: none !important;
display: none !important;
}
.wtb-project-display {
color: var(--wtb-panel-text, #d8dfeb);
}
.wtb-project-browser {
display: grid;
gap: 22px;
}
.wtb-project-browser-head h3 {
margin: 0;
color: var(--wtb-panel-title, #f4f7fb);
}
.wtb-project-selector-wrap {
display: block;
}
.wtb-project-selector {
width: 100%;
min-height: 52px;
padding: 12px 16px;
border-radius: var(--wtb-panel-radius, 8px);
border: 1px solid rgba(255,255,255,.12);
background: var(--wtb-panel-bg, #0f2138);
color: var(--wtb-panel-title, #f4f7fb);
box-shadow: 0 14px 30px rgba(0,0,0,.14);
}
.wtb-project-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.wtb-project-card {
padding: 0;
text-align: left;
overflow: hidden;
}
.wtb-project-card-media {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.wtb-project-card-media--icon {
padding: 24px;
}
.wtb-project-card-media .wtb-panel-icon {
font-size: 40px;
}
.wtb-project-card-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.wtb-project-card-body {
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px;
}
.wtb-project-card-type {
font-size: 12px;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--wtb-panel-accent, #4fb3ff);
font-weight: 700;
}
.wtb-project-card-title {
font-size: 18px;
line-height: 1.35;
font-weight: 700;
color: var(--wtb-panel-title, #f4f7fb);
}
.wtb-project-card-excerpt {
color: var(--wtb-panel-text, #d8dfeb);
line-height: 1.6;
font-size: 14px;
overflow-wrap: anywhere;
}
.wtb-project-meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 24px;
}
.wtb-project-meta-item {
display: flex;
flex-direction: column;
gap: 6px;
min-height: 70px;
padding: 14px 18px;
border-radius: 8px;
background: rgba(255,255,255,.04);
border: 1px solid rgba(255,255,255,.09);
}
.wtb-project-meta-label {
color: var(--wtb-panel-accent, #4fb3ff);
font-size: 13px;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
}
.wtb-project-meta-value,
.wtb-project-meta-value a {
color: var(--wtb-panel-title, #f4f7fb);
overflow-wrap: anywhere;
word-break: break-word;
}
.wtb-project-video-wrap {
margin-top: 22px;
}
.wtb-project-video-link {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 50px;
padding: 12px 18px;
border-radius: calc(var(--wtb-panel-radius, 8px) - 2px);
background: rgba(79,179,255,.08);
border: 1px solid rgba(79,179,255,.26);
color: var(--wtb-panel-title, #f4f7fb);
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.wtb-project-video-link:hover,
.wtb-project-video-link:focus {
transform: translateY(-2px);
border-color: rgba(79,179,255,.48);
box-shadow: 0 18px 36px rgba(0,0,0,.22);
color: var(--wtb-panel-title, #f4f7fb);
text-decoration: none;
}
.wtb-project-panel-section {
margin-top: 28px;
padding-top: 10px;
}
.wtb-project-panel-section h3 {
margin-bottom: 16px;
}
.wtb-project-browser--grid,
.wtb-project-browser--mixed {
grid-template-columns: minmax(420px, 620px) minmax(0, 1fr);
align-items: start;
}
.wtb-project-browser--grid .wtb-project-grid,
.wtb-project-browser--mixed .wtb-project-grid {
align-self: start;
}
.wtb-project-browser--grid .wtb-project-display,
.wtb-project-browser--mixed .wtb-project-display {
align-self: start;
min-width: 0;
}
.wtb-project-browser--grid .wtb-project-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.wtb-project-browser--mixed .wtb-project-browser-head,
.wtb-project-browser--mixed .wtb-project-selector-wrap {
grid-column: 1 / -1;
}
.wtb-project-browser--mixed .wtb-project-grid,
.wtb-project-browser--mixed .wtb-project-display {
grid-row: auto;
}
.wtb-project-browser--grid .wtb-project-browser-head {
grid-column: 1 / -1;
}
.wtb-project-display .wtb-panel-box {
min-height: 100%;
}
@media (max-width: 1400px) {
.wtb-project-browser--grid,
.wtb-project-browser--mixed {
grid-template-columns: minmax(340px, 520px) minmax(0, 1fr);
}
.wtb-project-grid,
.wtb-project-browser--grid .wtb-project-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1200px) {
.wtb-project-browser--grid,
.wtb-project-browser--mixed {
grid-template-columns: 1fr;
}
.wtb-project-grid,
.wtb-project-browser--grid .wtb-project-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 980px) {
.wtb-project-browser--grid,
.wtb-project-browser--mixed {
grid-template-columns: 1fr;
}
.wtb-project-browser--grid .wtb-project-browser-head,
.wtb-project-browser--mixed .wtb-project-browser-head,
.wtb-project-browser--mixed .wtb-project-selector-wrap,
.wtb-project-browser--grid .wtb-project-grid,
.wtb-project-browser--mixed .wtb-project-grid,
.wtb-project-browser--grid .wtb-project-display,
.wtb-project-browser--mixed .wtb-project-display {
grid-column: auto;
}
.wtb-project-meta {
grid-template-columns: 1fr;
}
.wtb-project-grid {
grid-template-columns: 1fr;
}
}