body.home .ngh > #home-brands.ngh-brandshow {
--ngbs-ink:#202124;
--ngbs-lime:#B5E66A;
--ngbs-green:#84C041;
position:relative;
isolation:isolate;
overflow:hidden;
display:block;
content-visibility:visible !important;
padding:clamp(28px,3.1vw,42px) 0 !important;
background:#202124 !important;
border:0 !important;
scroll-margin-top:96px;
}
body.home .ngh > #home-brands.ngh-brandshow::before {
content:"";
position:absolute;
inset:0;
z-index:0;
pointer-events:none;
background:
radial-gradient(ellipse 48% 105% at 7% 52%,rgba(132,192,65,.105),transparent 77%),
radial-gradient(ellipse 50% 110% at 100% 3%,rgba(181,230,106,.065),transparent 82%);
}
body.home .ngh > #home-brands .ngh-brandshow__layout {
width:min(1240px,calc(100% - 76px));
max-width:1240px;
margin:0 auto;
padding:0;
position:relative;
z-index:2;
display:grid;
grid-template-columns:minmax(235px,.83fr) minmax(0,2.14fr);
gap:clamp(24px,4.5vw,63px);
align-items:center;
}
body.home .ngh > #home-brands .ngh-brandshow__intro {
align-self:center;
text-align:left;
max-width:340px;
}
body.home .ngh > #home-brands .ngh-brandshow__eyebrow {
margin:0 0 14px;
color:#B5E66A !important;
font:700 11px/1.4 'Proximanova-bold',sans-serif !important;
letter-spacing:.19em;
text-transform:uppercase;
display:flex;
align-items:center;
gap:10px;
}
body.home .ngh > #home-brands .ngh-brandshow__signal {
width:12px;
height:12px;
border:2px solid #B5E66A;
border-radius:50%;
display:inline-block;
flex:0 0 auto;
position:relative;
box-shadow:0 0 0 4px rgba(181,230,106,.12);
animation:ngbs-signal 3.4s ease-in-out infinite;
}
body.home .ngh > #home-brands .ngh-brandshow__intro h2 {
display:block;
margin:0;
padding:0;
max-width:340px;
font:700 clamp(26px,2.4vw,36px)/1.08 'Proximanova-bold',sans-serif !important;
letter-spacing:-.043em;
color:#FFFFFF !important;
text-wrap:balance;
}
body.home .ngh > #home-brands .ngh-brandshow__intro h2 em {
display:inline;
color:#B5E66A !important;
font:inherit !important;
font-style:normal !important;
}
body.home .ngh > #home-brands .ngh-brandshow__summary {
max-width:320px;
margin:16px 0 0;
font:400 14px/1.55 'Proximanova',sans-serif !important;
color:#BCC1C5 !important;
letter-spacing:0;
text-transform:none;
}
body.home .ngh > #home-brands .ngh-brandshow__caption {
display:flex;
align-items:center;
gap:10px;
max-width:270px;
margin-top:22px;
color:#A5ADB1;
font:700 9px/1.2 'Proximanova-bold',sans-serif;
letter-spacing:.16em;
}
body.home .ngh > #home-brands .ngh-brandshow__caption-line {
flex:1;
height:1px;
background:linear-gradient(90deg,#84C041,rgba(132,192,65,.1));
}
body.home .ngh > #home-brands .ngh-brandshow__gallery {
display:grid;
grid-template-columns:repeat(6,minmax(0,1fr));
gap:10px;
min-width:0;
align-items:stretch;
}
body.home .ngh > #home-brands .ngh-brandshow__card {
position:relative;
grid-column:span 2;
min-width:0;
min-height:112px;
display:flex;
flex-direction:column;
justify-content:space-between;
overflow:hidden;
padding:13px 15px 17px;
border-radius:13px;
border:1px solid rgba(255,255,255,.11);
background:#F7F8F9;
color:#202124;
box-shadow:0 9px 18px rgba(0,0,0,.12);
transform:translateY(0);
transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease;
animation:ngbs-in .65s cubic-bezier(.16,1,.3,1) both;
}
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(2){animation-delay:.06s}
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(3){animation-delay:.12s}
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(4){animation-delay:.18s}
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(5){animation-delay:.24s}
body.home .ngh > #home-brands .ngh-brandshow__card:hover {
transform:translateY(-5px) rotate(-.45deg);
box-shadow:0 17px 35px rgba(0,0,0,.26);
border-color:rgba(181,230,106,.55);
}
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(4),
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(5){grid-column:span 3}
body.home .ngh > #home-brands .ngh-brandshow__card--air {
background:linear-gradient(134deg,#B5E66A 0%,#84C041 100%);
color:#202124;
}
body.home .ngh > #home-brands .ngh-brandshow__card--hammer {
background:linear-gradient(147deg,#FFFFFF,#ECEEF0);
color:#202124;
}
body.home .ngh > #home-brands .ngh-brandshow__card--river {
background:linear-gradient(144deg,#343739,#292B2D);
color:#FFFFFF;
border-color:#62676B;
}
body.home .ngh > #home-brands .ngh-brandshow__card--fire {
background:linear-gradient(132deg,#E3F3D5,#B5E66A);
color:#202124;
}
body.home .ngh > #home-brands .ngh-brandshow__card--credit {
background:linear-gradient(140deg,#FFFFFF,#ECEEF0);
color:#202124;
}
body.home .ngh > #home-brands .ngh-brandshow__card-top,
body.home .ngh > #home-brands .ngh-brandshow__card-middle {
position:relative;
z-index:1;
display:flex;
justify-content:space-between;
}
body.home .ngh > #home-brands .ngh-brandshow__card-top {
align-items:center;
color:inherit;
opacity:.67;
font:700 8px/1.2 'Proximanova-bold',sans-serif;
letter-spacing:.14em;
white-space:nowrap;
}
body.home .ngh > #home-brands .ngh-brandshow__card-cross {
font-size:14px;
line-height:1;
transform:rotate(0);
transition:transform .65s ease;
}
body.home .ngh > #home-brands .ngh-brandshow__card:hover .ngh-brandshow__card-cross {transform:rotate(135deg)}
body.home .ngh > #home-brands .ngh-brandshow__card-middle {
align-items:flex-end;
min-height:62px;
margin-top:8px;
}
body.home .ngh > #home-brands .ngh-brandshow__card-middle > strong {
position:relative;
z-index:1;
max-width:calc(100% - 45px);
font:700 clamp(16px,1.4vw,21px)/1.05 'Proximanova-bold',sans-serif;
letter-spacing:-.045em;
color:inherit;
text-align:left;
}
body.home .ngh > #home-brands .ngh-brandshow__card-middle > strong b {
font-weight:inherit;
color:inherit;
}
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(4) .ngh-brandshow__card-middle > strong,
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(5) .ngh-brandshow__card-middle > strong {
font-size:clamp(19px,1.8vw,27px);
}
body.home .ngh > #home-brands .ngh-brandshow__art {
position:absolute;
width:105px;
height:105px;
right:-18px;
bottom:-37px;
color:inherit;
opacity:.18;
transform:rotate(-10deg) scale(1);
transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .5s ease;
pointer-events:none;
}
body.home .ngh > #home-brands .ngh-brandshow__card:hover .ngh-brandshow__art {
opacity:.32;
transform:rotate(17deg) scale(1.17);
}
body.home .ngh > #home-brands .ngh-brandshow__card--river .ngh-brandshow__art{opacity:.28}
body.home .ngh > #home-brands .ngh-brandshow__card--fire .ngh-brandshow__art{right:-4px;bottom:-36px}
body.home .ngh > #home-brands .ngh-brandshow__card--credit .ngh-brandshow__art{right:-6px;bottom:-31px}
body.home .ngh > #home-brands .ngh-brandshow__ambient {
position:absolute;
z-index:0;
pointer-events:none;
width:340px;
height:340px;
border:1px solid rgba(181,230,106,.11);
border-radius:50%;
left:-230px;
top:50%;
transform:translateY(-50%);
box-shadow:0 0 0 65px rgba(181,230,106,.02),0 0 0 125px rgba(181,230,106,.012);
}
@keyframes ngbs-signal {
0%,100%{box-shadow:0 0 0 3px rgba(181,230,106,.1)}
50%{box-shadow:0 0 0 7px rgba(181,230,106,.03)}
}
@keyframes ngbs-in {
from{transform:translateY(12px) scale(.985)}
to{transform:translateY(0) scale(1)}
}
@media (max-width:1080px) {
body.home .ngh > #home-brands .ngh-brandshow__layout {
width:calc(100% - 60px);
grid-template-columns:minmax(205px,.75fr) minmax(0,2fr);
gap:28px;
}
body.home .ngh > #home-brands .ngh-brandshow__card {padding:12px;min-height:108px}
body.home .ngh > #home-brands .ngh-brandshow__card-middle > strong {font-size:clamp(15px,1.6vw,20px)}
}
@media (max-width:800px) {
body.home .ngh > #home-brands .ngh-brandshow__layout {
width:calc(100% - 48px);
grid-template-columns:minmax(0,1fr);
gap:24px;
align-items:start;
}
body.home .ngh > #home-brands .ngh-brandshow__intro{max-width:none}
body.home .ngh > #home-brands .ngh-brandshow__intro h2{max-width:560px;font-size:clamp(28px,4.6vw,38px)}
body.home .ngh > #home-brands .ngh-brandshow__summary{max-width:520px}
body.home .ngh > #home-brands .ngh-brandshow__caption{display:none}
body.home .ngh > #home-brands .ngh-brandshow__card{min-height:114px}
body.home .ngh > #home-brands .ngh-brandshow__card-middle > strong{font-size:clamp(18px,2.7vw,23px)}
}
@media (max-width:540px) {
body.home .ngh > #home-brands.ngh-brandshow{padding:30px 0 32px !important}
body.home .ngh > #home-brands .ngh-brandshow__layout{width:calc(100% - 36px);gap:21px}
body.home .ngh > #home-brands .ngh-brandshow__intro h2{font-size:31px;line-height:1.07}
body.home .ngh > #home-brands .ngh-brandshow__summary{margin-top:11px;font-size:13px}
body.home .ngh > #home-brands .ngh-brandshow__eyebrow{font-size:10px;margin-bottom:10px}
body.home .ngh > #home-brands .ngh-brandshow__gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
body.home .ngh > #home-brands .ngh-brandshow__card,
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(4),
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(5) {
grid-column:span 1;
min-height:106px;
padding:11px 12px 13px;
}
body.home .ngh > #home-brands .ngh-brandshow__card:first-child{grid-column:span 2;min-height:106px}
body.home .ngh > #home-brands .ngh-brandshow__card-middle > strong,
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(4) .ngh-brandshow__card-middle > strong,
body.home .ngh > #home-brands .ngh-brandshow__card:nth-child(5) .ngh-brandshow__card-middle > strong{font-size:18px;max-width:calc(100% - 30px)}
body.home .ngh > #home-brands .ngh-brandshow__card:first-child .ngh-brandshow__card-middle > strong{font-size:22px}
body.home .ngh > #home-brands .ngh-brandshow__card-top{font-size:7px;letter-spacing:.09em}
body.home .ngh > #home-brands .ngh-brandshow__art{width:91px;height:91px;right:-20px;bottom:-29px}
}
@media (prefers-reduced-motion:reduce) {
body.home .ngh > #home-brands .ngh-brandshow__signal,
body.home .ngh > #home-brands .ngh-brandshow__card{animation:none!important}
body.home .ngh > #home-brands .ngh-brandshow__card,
body.home .ngh > #home-brands .ngh-brandshow__card-cross,
body.home .ngh > #home-brands .ngh-brandshow__art{transition:none!important}
}