:root {
--t-concrete: #BCBAB3;
--t-bone: #D6D3CA;
--t-concrete-lo: #A6A4A2;
--t-icon: #5C5E5A;
--t-ink: #17191A;
--t-ink-soft: #33362F;
--t-hair: rgba(23,25,26,.34);
}
.trades {
position: relative;
isolation: isolate;
background-color: var(--t-concrete);
color: var(--t-ink);
font-family: 'Inter', Helvetica, Arial, sans-serif;
overflow: hidden;
--t-gutter: 3.5%;
--t-text-in: 20px;
padding: 0;
}
.trades::before {
content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: url('/assets/img/section2/concrete-light.webp');
background-size: 420px 420px;
background-repeat: repeat;
mix-blend-mode: multiply;
opacity: .22;
}
.trades-inner { position: relative; z-index: 3; padding: 0 var(--t-gutter); }
.trades-head { padding-left: var(--t-text-in); position: relative; }
.trades-eyebrow {
display: flex; align-items: center; gap: 18px;
margin: 0 0 13px;
padding-left: 37px;
padding-top: 97px;
font-family: 'Barlow Semi Condensed', 'Inter', sans-serif;
font-weight: 500; font-size: 15px; letter-spacing: .04em;
color: var(--t-ink); text-transform: uppercase; white-space: nowrap;
}
.trades-eyebrow::after {
content: ''; flex: 0 0 auto; width: 156px; height: 2px;
background: var(--h-cyan); opacity: .95;
}
.trades-h2 {
margin: 0;
font-family: 'Anton', 'Barlow Semi Condensed', Impact, sans-serif;
font-weight: 400;
font-size: 57.5px;
line-height: 1.02;
letter-spacing: -.004em;
text-transform: uppercase;
color: var(--t-ink);
}
.trades-h2 .l { display: block; }
@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
.trades-h2 .l {
-webkit-mask-image: url('/assets/img/hero/headline-mask.webp');
mask-image: url('/assets/img/hero/headline-mask.webp');
-webkit-mask-size: 420px 420px; mask-size: 420px 420px;
-webkit-mask-repeat: repeat; mask-repeat: repeat;
}
}
.trades-lede {
margin: 8px 0 0;
font-size: 16px; line-height: 1.5; font-weight: 400;
color: var(--t-ink-soft);
}
.trades-halftone {
position: absolute;
z-index: 1;
top: 92px; right: 0;
width: 296px; height: 287px;
pointer-events: none;
opacity: 1;
}
.trades-grid {
list-style: none; margin: 18px 0 0; padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 1fr;
border-top: 1px solid var(--t-hair);
border-left: 1px solid var(--t-hair);
}
.trades-card {
border-right: 1px solid var(--t-hair);
border-bottom: 1px solid var(--t-hair);
min-height: 220px;
}
.trades-card > a {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
column-gap: 34px;
height: 100%;
padding: 30px 24px 15px 22px;
text-decoration: none;
color: inherit;
overflow: hidden;
isolation: isolate;
}
.trades-card > a::before {
content: ''; position: absolute; inset: 0; z-index: -2;
background-color: #0A0E12;
background-image: url('/assets/img/hero/concrete.webp');
background-size: 380px 380px;
background-blend-mode: overlay;
opacity: 0;
transition: opacity .16s ease-out;
}
.trades-card > a::after {
content: ''; position: absolute; z-index: -1;
top: 0; left: 0; width: 58%; height: 13px;
background: var(--h-cyan);
clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 100%, 0 100%);
opacity: 0;
transition: opacity .16s ease-out;
}
.trades-card .tc-dots {
position: absolute; top: 0; right: 0; z-index: -1;
width: 172px; height: 136px;
opacity: 0;
transition: opacity .16s ease-out;
pointer-events: none;
}
.tc-foot {
grid-column: 1 / span 2; grid-row: 3;
display: flex; align-items: center; gap: 18px;
margin-top: 13px;
}
.tc-rule {
flex: 1 1 auto; height: 1px;
background: var(--h-cyan);
opacity: 0;
transition: opacity .16s ease-out;
}
.tc-icon {
grid-column: 1; grid-row: 1 / span 2;
align-self: start;
display: block;
width: 92px; height: 92px;
margin-top: 8px;
color: var(--t-icon);
transition: color .16s ease-out;
-webkit-user-select: none; user-select: none;
}
.tc-icon svg { display: block; width: 100%; height: 100%; }
@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
.tc-icon {
-webkit-mask-image: url('/assets/img/hero/headline-mask.webp');
mask-image: url('/assets/img/hero/headline-mask.webp');
-webkit-mask-size: 140px 140px; mask-size: 140px 140px;
-webkit-mask-repeat: repeat; mask-repeat: repeat;
}
}
.tc-name {
grid-column: 2; grid-row: 1;
margin: 5px 0 0;
font-family: 'Barlow Semi Condensed', 'Inter', sans-serif;
font-weight: 800;
font-size: 19px;
line-height: 1.08;
letter-spacing: 0;
text-transform: uppercase;
white-space: nowrap;
color: var(--t-ink);
transition: color .16s ease-out;
}
.tc-body {
grid-column: 2; grid-row: 2;
align-self: start;
margin: 13px 0 0;
max-width: 250px;
font-size: 15px; line-height: 1.5;
color: var(--t-ink-soft);
transition: color .16s ease-out;
}
.tc-arrow {
flex: 0 0 auto;
width: 34px; height: 14px;
color: var(--t-ink);
transition: color .16s ease-out, transform .16s ease-out;
}
.tc-arrow svg { display: block; width: 100%; height: 100%; }
.trades-card > a:hover::before,
.trades-card > a:focus-visible::before,
.trades-card > a:hover::after,
.trades-card > a:focus-visible::after { opacity: 1; }
.trades-card > a:hover .tc-dots,
.trades-card > a:focus-visible .tc-dots,
.trades-card > a:hover .tc-rule,
.trades-card > a:focus-visible .tc-rule { opacity: 1; }
.trades-card > a:hover .tc-name,
.trades-card > a:focus-visible .tc-name { color: #fff; }
.trades-card > a:hover .tc-body,
.trades-card > a:focus-visible .tc-body { color: var(--h-muted); }
.trades-card > a:hover .tc-icon,
.trades-card > a:focus-visible .tc-icon { color: var(--h-bone); }
.trades-card > a:hover .tc-arrow,
.trades-card > a:focus-visible .tc-arrow { color: var(--h-cyan); transform: translateX(4px); }
.trades-card > a:focus-visible { outline: 3px solid var(--h-cyan); outline-offset: -3px; }
.trades-explore {
display: inline-flex; align-items: center; gap: 16px;
float: right;
margin: 22px 0 0;
padding-bottom: 6px;
border-bottom: 1px solid var(--t-ink);
font-family: 'Barlow Semi Condensed', 'Inter', sans-serif;
font-weight: 500; font-size: 14.5px; letter-spacing: .06em;
text-transform: uppercase; text-decoration: none;
color: var(--t-ink);
}
.trades-explore svg { width: 46px; height: 14px; color: var(--h-cyan); flex: 0 0 auto; }
.trades-explore:hover { color: #000; border-bottom-color: var(--h-cyan); }
.trades-explore:focus-visible { outline: 3px solid var(--h-cyan); outline-offset: 4px; }
@media (max-width: 1200px) {
.trades-h2 { font-size: 4.63vw; }
.trades-halftone { width: 230px; height: 214px; top: 81px; }
.trades-card > a { padding: 35px 20px 17px 18px; column-gap: 26px; }
.tc-icon { width: 96px; height: 96px; -webkit-mask-size: 170px 170px; mask-size: 170px 170px; }
.tc-name { font-size: 1.593vw; }
.tc-body { font-size: 15.5px; }
}
@media (max-width: 900px) {
.tc-name { white-space: normal; }
.trades { --t-gutter: 5%; }
.trades-eyebrow { padding-top: 71px; padding-left: 0; font-size: 15.5px; }
.trades-eyebrow::after { width: 96px; }
.trades-head { padding-left: 0; }
.trades-h2 { font-size: clamp(26.5px, 5.612vw, 52px); }
.trades-lede { font-size: 18px; }
.trades-lede br { display: none; }
.trades-halftone { width: 170px; height: 158px; top: 70px; opacity: .8; }
.trades-grid { grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
.tc-icon { width: 84px; height: 84px; -webkit-mask-size: 150px 150px; mask-size: 150px 150px; }
.tc-name { font-size: 16px; }
.trades-card { min-height: 195px; }
}
@media (max-width: 620px) {
.trades-halftone { display: none; }
.trades-grid { grid-template-columns: 1fr; }
.trades-card { min-height: 0; }
.trades-card > a { padding: 22px 17px 17px; column-gap: 20px; }
.tc-icon { width: 68px; height: 68px; margin-top: 4px; -webkit-mask-size: 124px 124px; mask-size: 124px 124px; }
.tc-name { font-size: 15px; }
.tc-body { font-size: 16px; max-width: none; }
.trades-explore { float: none; display: flex; width: 100%; justify-content: space-between; font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
.trades * { transition: none !important; }
}