:root{
--side:86px; --side-m:20px;
--radius:36px;
--pill-h:55px; } .dts-footer.footer--dark { background:#000; }
.dts-footer.footer--light{ background:#fff; }
.dts-footer{
position:relative;
padding: clamp(28px, 5vh, 64px) 0 calc(max(28px, env(safe-area-inset-bottom)));
} .dts-footer__bar{
width: calc(100% - (var(--side) * 2));
margin: 0 auto;
height: var(--pill-h);
border-radius: var(--radius);
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 24px;
padding: 10px 10px;
box-sizing: border-box;
border: 1.5px solid currentColor; }
.footer--dark .dts-footer__bar{ background:#000; color:#fff; }
.footer--light .dts-footer__bar{ background:#fff; color:#000; } .dts-footer__brand{
display:flex; align-items:center; gap:8px;
white-space:nowrap;
margin-left:10px;
}
.dts-footer__brand .brand-name{ font-weight:400; }
.dts-footer__brand .brand-role em{ font-style:italic; }
.dts-footer__brand .brand-sep{ opacity:.8; } .dts-footer__nav{
position: relative;
display: inline-flex;
align-items: center;
gap: clamp(22px, 5.2vw, 48px);
padding: 0 10px;
margin-left:10px; } .dts-footer__link{
position: relative;
z-index: 1;
text-decoration: none;
white-space: nowrap;
padding: 0 12px; transition: color .16s ease;
}
.footer--dark  .dts-footer__link{ color:#fff; }
.footer--light .dts-footer__link{ color:#000; } .dts-footer__highlight{
position: absolute;
top: 50%;
left: 0;
height: var(--pill-h);
border-radius: var(--radius);
transform: translate(0,-50%);
width: 0;
opacity: 0;
z-index: 0;
transition: transform .28s cubic-bezier(0.23,1,0.32,1),
width .28s cubic-bezier(0.23,1,0.32,1),
background-color .16s ease,
opacity .16s ease;
}
.footer--dark  .dts-footer__highlight{ background:#fff; }
.footer--light .dts-footer__highlight{ background:#000; } .footer--dark  .dts-footer__link.is-on-pill{ color:#000 !important; }
.footer--light .dts-footer__link.is-on-pill{ color:#fff !important; } .dts-footer__link.is-active{ color: inherit; } @media (max-width: 900px){
.dts-footer__bar{
width: calc(100% - (var(--side-m) * 2));
height: auto;
display: block; padding: 14px 16px;
gap: 0;
} .dts-footer__brand{
white-space: normal;
flex-wrap: wrap;
row-gap: 2px;
margin-left:10px;
}
.dts-footer__brand .brand-sep{ display:none; } .dts-footer__nav{
display: inline-flex;
justify-content: flex-start;
align-items: center;
padding: 0;
margin-top: 20px; margin-left:10px; gap: clamp(16px, 5vw, 28px);
}
}