.ly-toolbox {
margin: 0 0 48px;
}
.ly-toolbox__section {
margin: 0 0 44px;
}
.ly-toolbox__title {
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 1px solid #e7ebf2;
font-size: 20px;
color: #0a1020;
} .ly-toolbox__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 16px;
}
.ly-tool-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 16px;
border: 1px solid #e7ecf7;
border-radius: 14px;
background: #ffffff;
text-decoration: none;
color: inherit;
transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.ly-tool-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
flex: 0 0 auto;
border-radius: 11px;
background: #f2f5ff;
color: #315efb;
}
.ly-tool-card__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1 1 auto;
}
.ly-tool-card__body strong {
color: #0a1020;
font-size: 15px;
font-weight: 650;
}
.ly-tool-card__desc {
color: #667085;
font-size: 13px;
line-height: 1.6;
}
.ly-tool-card__go {
align-self: center;
flex: 0 0 auto;
color: #315efb;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.ly-tool-card:hover,
.ly-tool-card:focus-visible {
border-color: #cdd8f2;
box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
transform: translateY(-2px);
}
.ly-tool-card:hover .ly-tool-card__go,
.ly-tool-card:focus-visible .ly-tool-card__go { text-decoration: underline; } .ly-toolcat-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.ly-toolcat {
display: flex;
flex-direction: column;
gap: 6px;
padding: 22px;
border: 1px solid #e7ecf7;
border-radius: 16px;
background: #ffffff;
text-decoration: none;
color: inherit;
transition: border-color 160ms ease, background-color 160ms ease;
}
.ly-toolcat:hover,
.ly-toolcat:focus-visible {
border-color: #cdd8f2;
background: #fafbff;
}
.ly-toolcat:focus-visible {
outline: 2px solid #315efb;
outline-offset: 2px;
}
.ly-toolcat:hover h3,
.ly-toolcat:focus-visible h3 { color: #315efb; }
.ly-toolcat__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-bottom: 4px;
border-radius: 12px;
background: #f2f5ff;
color: #315efb;
}
.ly-toolcat h3 {
margin: 0;
font-size: 17px;
color: #0a1020;
}
.ly-toolcat p {
margin: 0;
color: #475467;
font-size: 14px;
line-height: 1.6;
}
.ly-toolcat__examples {
color: #98a2b3;
font-size: 12.5px;
line-height: 1.6;
} .ly-toolcat-list {
margin: 0;
padding: 0;
list-style: none;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.ly-toolitem {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 18px;
border: 1px solid #e7ecf7;
border-radius: 14px;
background: #ffffff;
}
.ly-toolitem__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
text-decoration: none;
color: inherit;
}
.ly-toolitem__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.ly-toolitem__link:focus-visible {
outline: 2px solid #315efb;
outline-offset: 4px;
border-radius: 4px;
}
.ly-toolitem__name {
color: #0a1020;
font-size: 15px;
font-weight: 650;
}
.ly-toolitem__desc {
color: #667085;
font-size: 13px;
line-height: 1.6;
}
.ly-toolitem__go {
flex: 0 0 auto;
color: #315efb;
font-size: 13px;
font-weight: 600;
white-space: nowrap;
}
.ly-toolitem--link:hover,
.ly-toolitem--link:focus-within {
border-color: #cdd8f2;
background: #fafbff;
}
.ly-toolitem--link:hover .ly-toolitem__go,
.ly-toolitem--link:focus-within .ly-toolitem__go { text-decoration: underline; }
.ly-toolitem.is-planned {
background: #fcfcfd;
}
.ly-toolitem__badge {
flex: 0 0 auto;
padding: 3px 10px;
border-radius: 999px;
background: #f2f5ff;
color: #667085;
font-size: 12px;
white-space: nowrap;
}
.ly-toolbox__more {
margin: 16px 0 0;
color: #98a2b3;
font-size: 13px;
text-align: center;
}
@media (max-width: 1024px) {
.ly-toolcat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.ly-toolbox__grid,
.ly-toolcat-grid,
.ly-toolcat-list { grid-template-columns: 1fr; }
.ly-tool-card { padding: 14px; }
.ly-toolcat { padding: 18px; }
} .ly-tool-icon {
display: block;
}
.ly-tool-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.ly-tool-badge-tag {
display: inline-flex;
align-items: center;
padding: 2px 9px;
border: 1px solid #e2e8f5;
border-radius: 999px;
background: #f5f8ff;
color: #4361a8;
font-size: 11.5px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
}
.ly-toolitem__icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 11px;
background: #f2f5ff;
color: #315efb;
}
.ly-toolitem__link .ly-toolitem__body {
flex: 1 1 auto;
}
.ly-tool-card__icon svg,
.ly-toolcat__icon svg,
.ly-toolitem__icon svg {
display: block;
} .ly-toolcat--service {
max-width: 640px;
border-color: rgba(49, 94, 251, 0.22);
background: linear-gradient(150deg, #f4f7ff 0%, #ffffff 60%, #f8fbff 100%);
}
.ly-toolcat--service:hover { border-color: #9db6f2; }
.ly-toolcat--service .ly-toolcat__examples { color: #315efb; font-weight: 600; } .ly-toolcat-grid--resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ly-toolcat--resource { background: linear-gradient(160deg, #fafbff 0%, #ffffff 60%); }
@media (max-width: 640px) {
.ly-toolcat-grid--resources { grid-template-columns: 1fr; }
}