.walker-glass-expand-panel{
position: relative;
width: 100%;
margin: 0 0 56px;
}
.walker-glass-expand-panel__layout{
position: relative;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: start;
min-height: 330px;
}
.walker-glass-expand-panel__media-wrap{
grid-row: 1;
position: relative;
z-index: 1;
}
.walker-glass-expand-panel--image-right .walker-glass-expand-panel__media-wrap{
grid-column: 6 / -1;
justify-self: end;
}
.walker-glass-expand-panel--image-left .walker-glass-expand-panel__media-wrap{
grid-column: 1 / span 7;
justify-self: start;
}
.walker-glass-expand-panel__media{
position: relative;
width: min(100%, 700px);
max-width: 700px;
height: min(300px, 36vw);
min-height: 260px;
max-height: 300px;
border-radius: 30px;
overflow: hidden;
background: #dfe6eb;
box-shadow: 0 18px 48px rgba(15,23,42,0.10);
}
.walker-glass-expand-panel__video-button{
position: absolute;
top: 15px;
right: 15px;
left: auto;
bottom: auto;
z-index: 5;
display: inline-flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
border: 0;
border-radius: 999px;
background: var(--wstd-teal, #00A5B1);
color: #ffffff;
cursor: pointer;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.walker-glass-expand-panel__video-button:hover,
.walker-glass-expand-panel__video-button:focus{
transform: scale(1.05);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
outline: none;
}
.walker-glass-expand-panel__video-button-icon{
display: inline-flex;
align-items: center;
justify-content: center;
width: 70%;
height: 70%;
margin-left: 3%;
color: #ffffff;
line-height: 0;
}
.walker-glass-expand-panel__video-button-icon svg{
display: block;
width: 100%;
height: 100%;
}
.walker-glass-expand-panel__img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
.walker-glass-expand-panel__panel-wrap{
grid-column: 1 / -1;
grid-row: 1;
position: relative;
z-index: 2;
width: 100%;
margin-top: 30px;
} .walker-glass-expand-panel__panel-wrap{
grid-column: 1 / -1;
grid-row: 1;
position: relative;
z-index: 2;
width: 100%;
margin-top: 30px;
display: flex;
}
.walker-glass-expand-panel--image-right .walker-glass-expand-panel__panel-wrap{
justify-content: flex-start;
}
.walker-glass-expand-panel--image-left .walker-glass-expand-panel__panel-wrap{
justify-content: flex-end;
}
.walker-glass-expand-panel__panel{
position: relative;
width: 100%;
max-width: 700px;
border-radius: 28px;
background: rgba(255,255,255,0.80);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow: 0 24px 70px rgba(10,16,28,0.16);
border: 1px solid rgba(255,255,255,0.55);
padding: 34px 34px 30px;
color: #142138;
transition:
max-width 0.34s ease,
border-radius 0.28s ease;
}
.walker-glass-expand-panel.is-shell-open .walker-glass-expand-panel__panel{
max-width: 100%;
}
.walker-glass-expand-panel__eyebrow{
margin: 0 0 14px;
font-size: 0.78rem;
line-height: 1;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
color: var(--wstd-teal, #00A5B1);
}
.walker-glass-expand-panel__title{
margin: 0 0 16px;
font-size: clamp(2rem, 2.7vw, 3.2rem);
line-height: 0.98;
font-weight: 500;
letter-spacing: -0.035em;
color: #121d33;
text-wrap: balance;
max-width: 14ch;
}
.walker-glass-expand-panel.is-shell-open .walker-glass-expand-panel__title{
max-width: 18ch;
}
.walker-glass-expand-panel__intro{
margin: 0;
color: #5b6a7d;
font-size: 1rem;
line-height: 1.78;
max-width: 58ch;
padding-right: 52px;
}
.walker-glass-expand-panel__intro p:last-child{
margin-bottom: 0;
}
.walker-glass-expand-panel__toggle{
position: absolute;
right: 24px;
bottom: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 0;
border-radius: 999px;
background: transparent;
color: #142138;
cursor: pointer;
transition: transform 0.22s ease, color 0.22s ease, opacity 0.22s ease;
}
.walker-glass-expand-panel__toggle:hover,
.walker-glass-expand-panel__toggle:focus{
transform: translateY(1px);
color: var(--wstd-teal, #00A5B1);
outline: none;
}
.walker-glass-expand-panel__toggle-icon{
display: inline-flex;
width: 24px;
height: 24px;
}
.walker-glass-expand-panel__toggle-icon svg{
display: block;
width: 100%;
height: 100%;
}
.walker-glass-expand-panel.is-shell-open .walker-glass-expand-panel__toggle{
transform: rotate(180deg);
}
.walker-glass-expand-panel__body{
height: 0;
overflow: hidden;
opacity: 0;
transition:
height 0.38s cubic-bezier(0.22, 1, 0.36, 1),
opacity 0.22s ease;
}
.walker-glass-expand-panel.is-body-open .walker-glass-expand-panel__body{
opacity: 1;
}
.walker-glass-expand-panel__body-inner{
padding-top: 28px;
margin-top: 24px;
border-top: 1px solid rgba(19,35,60,0.10);
color: #516173;
font-size: 1rem;
line-height: 1.78;
max-width: 100%;
}
.walker-glass-expand-panel__body-inner > *:first-child{
margin-top: 0;
}
.walker-glass-expand-panel__body-inner > *:last-child{
margin-bottom: 0;
}
.walker-glass-expand-panel__body-inner h2,
.walker-glass-expand-panel__body-inner h3,
.walker-glass-expand-panel__body-inner h4{
color: #13233c;
margin: 1.4em 0 0.5em;
line-height: 1.14;
letter-spacing: -0.02em;
}
.walker-glass-expand-panel__body-inner p{
margin: 0 0 1.15em;
}
.walker-glass-expand-panel__body-inner ul,
.walker-glass-expand-panel__body-inner ol{
margin: 0 0 1.2em 1.2em;
padding: 0;
}
.walker-glass-expand-panel__body-inner li{
margin: 0 0 0.42em;
}
.walker-glass-expand-panel__body-inner a{
color: var(--wstd-teal, #00A5B1);
text-decoration: underline;
text-underline-offset: 2px;
}
body.gep-modal-open{
overflow: hidden;
}
.walker-glass-expand-panel__modal{
position: fixed;
inset: 0;
z-index: 2147483647;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
.walker-glass-expand-panel__modal.is-active{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.walker-glass-expand-panel__modal-backdrop{
position: absolute;
inset: 0;
background: rgba(10, 16, 24, 0.72);
backdrop-filter: blur(4px);
z-index: 1;
}
.walker-glass-expand-panel__modal-dialog{
position: relative;
z-index: 2;
width: min(92vw, 1100px);
max-height: 90vh;
margin: 0;
background: #000;
border-radius: 18px;
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
overflow: hidden;
}
.walker-glass-expand-panel__modal-close{
position: absolute;
top: 10px;
right: 10px;
z-index: 3;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.14);
color: #fff;
cursor: pointer;
font-size: 28px;
line-height: 1;
transition: background 0.2s ease, transform 0.2s ease;
}
.walker-glass-expand-panel__modal-close:hover,
.walker-glass-expand-panel__modal-close:focus{
background: rgba(255, 255, 255, 0.24);
transform: scale(1.05);
outline: none;
}
.walker-glass-expand-panel__modal-video{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: #000;
}
.walker-glass-expand-panel__modal-video iframe{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
@media (max-width: 1180px){
.walker-glass-expand-panel__layout{
min-height: 310px;
}
.walker-glass-expand-panel__media{
height: 300px;
min-height: 240px;
}
}
@media (max-width: 991px){
.walker-glass-expand-panel{
margin-bottom: 42px;
}
.walker-glass-expand-panel__layout{
grid-template-columns: 1fr;
grid-template-areas:
"media"
"panel";
min-height: auto;
gap: 18px;
}
.walker-glass-expand-panel__media-wrap,
.walker-glass-expand-panel--image-right .walker-glass-expand-panel__media-wrap,
.walker-glass-expand-panel--image-left .walker-glass-expand-panel__media-wrap{
grid-area: media;
grid-column: 1;
grid-row: auto;
justify-self: stretch;
width: 100%;
}
.walker-glass-expand-panel__media{
width: 100%;
max-width: none;
height: clamp(220px, 42vw, 320px);
min-height: 220px;
border-radius: 26px;
}
.walker-glass-expand-panel__video-button,
.walker-glass-expand-panel--image-right .walker-glass-expand-panel__video-button,
.walker-glass-expand-panel--image-left .walker-glass-expand-panel__video-button{
top: 14px;
right: 14px;
left: auto;
bottom: auto;
width: 46px;
height: 46px;
}
.walker-glass-expand-panel__panel-wrap,
.walker-glass-expand-panel--image-right .walker-glass-expand-panel__panel-wrap,
.walker-glass-expand-panel--image-left .walker-glass-expand-panel__panel-wrap,
.walker-glass-expand-panel.is-open .walker-glass-expand-panel__panel-wrap{
grid-area: panel;
grid-column: 1;
grid-row: auto;
justify-self: stretch;
width: 100%;
max-width: none;
margin-top: 0;
padding: 0;
box-sizing: border-box;
}
.walker-glass-expand-panel__panel{
max-width: none;
padding: 26px 24px 24px;
border-radius: 24px;
}
.walker-glass-expand-panel__title{
font-size: clamp(1.85rem, 5vw, 2.45rem);
max-width: none;
}
.walker-glass-expand-panel__intro{
padding-right: 46px;
}
}
@media (max-width: 640px){
.walker-glass-expand-panel__layout{
gap: 14px;
}
.walker-glass-expand-panel__media{
height: 220px;
min-height: 220px;
border-radius: 22px;
}
.walker-glass-expand-panel__video-button,
.walker-glass-expand-panel--image-right .walker-glass-expand-panel__video-button,
.walker-glass-expand-panel--image-left .walker-glass-expand-panel__video-button{
top: 12px;
right: 12px;
left: auto;
bottom: auto;
width: 42px;
height: 42px;
}
.walker-glass-expand-panel__panel-wrap{
margin-top: 0;
padding: 0;
}
.walker-glass-expand-panel__panel{
padding: 22px 18px 18px;
border-radius: 20px;
}
.walker-glass-expand-panel__toggle{
right: 14px;
bottom: 14px;
width: 40px;
height: 40px;
}
.walker-glass-expand-panel__toggle-icon{
width: 22px;
height: 22px;
}
}