.wa-portfolio-gallery {
--red: #dd533b;
--ink: #292725;
--muted: #685f57;
--sand: #f2eee9;
--line: #ded9d4;
color: var(--ink);
font: 17px/1.6 Outfit, Arial, sans-serif;
text-align: left;
width: 100%;
}
.wa-portfolio-gallery *, .wa-portfolio-gallery *::before, .wa-portfolio-gallery *::after {
box-sizing: border-box;
}
.wa-portfolio-gallery [hidden] { display: none !important; }
.wa-portfolio-gallery.wa-enhanced {
display: grid;
grid-template-columns: 220px minmax(0, 1fr);
gap: 28px;
border-top: 1px solid var(--line);
padding-top: 28px;
}
.wa-portfolio-gallery h2, .wa-portfolio-gallery h3 {
color: var(--ink);
font-family: 'Plus Jakarta Sans', Arial, sans-serif;
font-weight: 600;
line-height: 1.22;
padding: 0;
}
.wa-portfolio-gallery a { color: inherit; }
.wa-portfolio-gallery button, .wa-portfolio-gallery input, .wa-portfolio-gallery select { font: inherit; }
.wa-portfolio-gallery :focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.wa-portfolio-gallery .wa-eyebrow {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600;
padding: 0;
}
.wa-portfolio-gallery .wa-sidebar-inner {
position:sticky;
top:var(--wa-sticky-top, 105px);
}
.wa-portfolio-gallery .wa-sidebar .wa-eyebrow {
color:var(--muted);
margin:8px 12px 15px;
}
.wa-portfolio-gallery .wa-filter {
border:0;
border-radius:7px;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
text-align:left;
background:none;
padding:10px 12px;
margin:2px 0;
font-size:14px;
line-height:1.35;
cursor:pointer;
color:var(--muted);
}
.wa-portfolio-gallery .wa-filter span {
font-size:11px;
min-width:22px;
text-align:center;
color:#8c8178;
}
.wa-portfolio-gallery .wa-filter:hover {
background:#eee8e1;
}
.wa-portfolio-gallery .wa-filter.active {
background:var(--ink);
color:white;
}
.wa-portfolio-gallery .wa-filter.active span {
color:white;
}
.wa-portfolio-gallery .wa-industry-link {
display:inline-block;
font-size:13px;
margin:24px 12px;
text-decoration:none;
border-bottom:1px solid #b9b0a8;
}
.wa-portfolio-gallery .wa-toolbar {
display:flex;
gap:20px;
align-items:center;
justify-content:space-between;
margin-bottom:25px;
min-height:70px;
}
.wa-portfolio-gallery .wa-toolbar h2 {
font-size:24px;
margin:0 0 7px;
}
.wa-portfolio-gallery .wa-toolbar p {
font-size:13px;
color:var(--muted);
margin:0;
}
.wa-portfolio-gallery .wa-search {
display:flex;
gap:8px;
align-items:center;
border:1px solid var(--line);
border-radius:8px;
padding:8px 12px;
background:#fff;
}
.wa-portfolio-gallery .wa-search span {
font-size:24px;
line-height:1;
}
.wa-portfolio-gallery .wa-search input {
border:0;
min-width:0;
width:190px;
font-size:13px;
background:none;
color:var(--ink);
}
.wa-portfolio-gallery .wa-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:28px 22px;
}
.wa-portfolio-gallery .wa-card {
background:white;
border:1px solid #e5dfd9;
border-radius:10px;
overflow:hidden;
transition:box-shadow .2s,transform .2s;
}
.wa-portfolio-gallery .wa-card:hover {
transform:translateY(-3px);
box-shadow:0 14px 30px #2927250d;
}
.wa-portfolio-gallery .wa-visual {
display:block;
text-decoration:none;
background:#ede8e2;
}
.wa-portfolio-gallery .wa-chrome {
height:30px;
background:#eae5df;
display:flex;
align-items:center;
gap:4px;
padding:0 10px;
}
.wa-portfolio-gallery .wa-chrome i {
width:5px;
height:5px;
border-radius:100%;
background:#b9b0a8;
}
.wa-portfolio-gallery .wa-chrome span {
font-size:9px;
margin-left:6px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
color:#685f57;
}
.wa-portfolio-gallery .wa-chrome b {
margin-left:auto;
font-weight:400;
font-size:13px;
}
.wa-portfolio-gallery .wa-screen {
overflow:hidden;
}
.wa-portfolio-gallery .wa-screen img {
display:block;
width:100%;
height:auto;
}
.wa-portfolio-gallery .wa-card-body {
padding:18px 18px 20px;
}
.wa-portfolio-gallery .wa-tag {
font-size:10px;
line-height:1.4;
color:var(--red);
margin-bottom:9px;
}
.wa-portfolio-gallery .wa-card h3 {
font-size:17px;
letter-spacing:-.4px;
margin:0 0 8px;
overflow-wrap:anywhere;
}
.wa-portfolio-gallery .wa-card p {
font-size:13px;
color:var(--muted);
margin:0 0 16px;
}
.wa-portfolio-gallery .wa-visit {
display:flex;
align-items:center;
justify-content:space-between;
border-top:1px solid #eee8e1;
padding-top:12px;
text-decoration:none;
font-size:12px;
font-weight:500;
}
.wa-portfolio-gallery .wa-visit span {
font-size:19px;
color:var(--red);
}
.wa-portfolio-gallery .wa-mobile-select {
display:none;
}
.wa-portfolio-gallery .wa-card { align-self: start; }
.wa-portfolio-gallery .wa-card p, .wa-portfolio-gallery .wa-toolbar p { padding: 0; }
.wa-portfolio-gallery .wa-tag { color: #9e3727; }
.wa-portfolio-gallery .wa-empty {
padding: 42px 20px;
text-align: center;
background: var(--sand);
border-radius: 10px;
}
.wa-portfolio-gallery .wa-empty button {
background: var(--ink);
color: white;
border: 0;
border-radius: 7px;
padding: 10px 20px;
cursor: pointer;
}
@media (max-width: 1200px) {
.wa-portfolio-gallery .wa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 981px) {
.wa-portfolio-gallery .wa-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 850px) {
.wa-portfolio-gallery.wa-enhanced { display: block; }
.wa-portfolio-gallery .wa-sidebar-inner { position: static; }
.wa-portfolio-gallery .wa-sidebar nav, .wa-portfolio-gallery .wa-sidebar .wa-eyebrow, .wa-portfolio-gallery .wa-industry-link { display: none; }
.wa-portfolio-gallery .wa-mobile-select { display: block; font-size: 13px; }
.wa-portfolio-gallery select {
display: block;
width: 100%;
padding: 12px;
border: 1px solid var(--line);
border-radius: 8px;
background: white;
margin: 6px 0 20px;
}
.wa-portfolio-gallery .wa-toolbar { flex-wrap: wrap; }
}
@media (max-width: 520px) {
.wa-portfolio-gallery .wa-grid { grid-template-columns: 1fr; }
.wa-portfolio-gallery .wa-search, .wa-portfolio-gallery .wa-search input { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.wa-portfolio-gallery .wa-card { transition: none; }
}