.nglk {
--nglk-accent: #ec3535;
--nglk-accent-dark: #6d2929;
--nglk-radius: 12px;
--nglk-ink: #181b22;
--nglk-muted: #667085;
--nglk-line: #e1e5ed;
color: var(--nglk-ink);
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
font-family: inherit;
}
.nglk *, .nglk *::before, .nglk *::after { box-sizing: border-box; }
.nglk .nglk__header { margin: 0 0 19px; padding: 0; }
.nglk .nglk__heading {
margin: 0 0 8px;
padding: 0;
border: 0;
color: var(--nglk-ink);
font-size: clamp(17px, 1.6vw, 20px);
line-height: 1.32;
font-weight: 750;
letter-spacing: -.015em;
text-transform: none;
}
.nglk .nglk__intro {
margin: 0;
padding: 0;
color: var(--nglk-muted);
font-size: 13px;
line-height: 1.65;
overflow-wrap: anywhere;
}
.nglk .nglk__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.nglk.nglk--grid .nglk__items { grid-template-columns: repeat(var(--nglk-cols, 3), minmax(0, 1fr)); gap: 12px; }
.nglk a.nglk__item,
.nglk a.nglk__item:link,
.nglk a.nglk__item:visited {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 0;
padding: 12px;
border: 1px solid var(--nglk-line);
border-radius: var(--nglk-radius);
background: #fff;
color: var(--nglk-ink);
text-decoration: none;
box-shadow: 0 2px 5px rgba(15, 23, 42, .018);
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
cursor: pointer;
overflow-wrap: anywhere;
-webkit-tap-highlight-color: transparent;
}
.nglk .nglk__icon {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #3d424e;
background: #f1f3f6;
border-radius: max(5px, calc(var(--nglk-radius) - 3px));
transition: background-color .2s ease, color .2s ease;
}
.nglk .nglk__icon svg { width: 21px; height: 21px; display: block; flex: none; }
.nglk .nglk__copy { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.nglk .nglk__title {
color: inherit;
font-size: 14px;
line-height: 1.32;
font-weight: 700;
letter-spacing: -.01em;
text-decoration: none;
}
.nglk .nglk__desc { color: var(--nglk-muted); font-size: 12px; line-height: 1.45; text-decoration: none; }
.nglk .nglk__badge {
flex: 0 0 auto;
max-width: 80px;
padding: 4px 6px;
border-radius: 5px;
background: #fff0f1;
color: var(--nglk-accent-dark);
font-size: 10px;
font-weight: 750;
line-height: 1.2;
text-align: center;
overflow-wrap: anywhere;
}
.nglk .nglk__arrow {
flex: 0 0 auto;
margin-left: auto;
color: var(--nglk-accent);
font-size: 25px;
font-family: Arial, sans-serif;
line-height: .8;
transition: transform .2s ease;
}
.nglk a.nglk__item:hover {
background: #fff6f6;
color: var(--nglk-ink);
border-color: var(--nglk-accent);
box-shadow: 0 7px 22px rgba(38, 32, 38, .075);
transform: translateY(-2px);
}
.nglk a.nglk__item:hover .nglk__icon { color: #fff; background: var(--nglk-accent); }
.nglk a.nglk__item:hover .nglk__title { color: var(--nglk-accent-dark); }
.nglk a.nglk__item:hover .nglk__arrow { transform: translateX(3px); }
.nglk a.nglk__item:focus-visible {
outline: 3px solid var(--nglk-accent);
outline-offset: 3px;
border-color: var(--nglk-accent);
} .nglk--outline a.nglk__item,
.nglk--outline a.nglk__item:link,
.nglk--outline a.nglk__item:visited { box-shadow: none; border-color: #cbd0da; border-width: 1.5px; } .nglk--minimal .nglk__items { gap: 0; }
.nglk--minimal a.nglk__item,
.nglk--minimal a.nglk__item:link,
.nglk--minimal a.nglk__item:visited {
border: 0;
border-bottom: 1px solid var(--nglk-line);
border-radius: 0;
box-shadow: none;
background: transparent;
padding: 13px 4px;
}
.nglk--minimal a.nglk__item:hover { transform: none; box-shadow: none; background: #fff6f6; }
.nglk--minimal .nglk__icon { width: 39px; height: 39px; flex-basis: 39px; } .nglk--dark a.nglk__item,
.nglk--dark a.nglk__item:link,
.nglk--dark a.nglk__item:visited {
color: #fff;
background: #191b20;
border-color: #353944;
box-shadow: 0 5px 16px rgba(0, 0, 0, .09);
}
.nglk--dark .nglk__icon { color: #fff; background: #31353e; }
.nglk--dark .nglk__desc { color: #d0d3db; }
.nglk--dark .nglk__badge { background: #fff; color: var(--nglk-accent-dark); }
.nglk--dark a.nglk__item:hover,
.nglk--dark a.nglk__item:focus-visible { color: #fff; background: var(--nglk-accent-dark); border-color: var(--nglk-accent); }
.nglk--dark a.nglk__item:hover .nglk__title { color: #fff; }
.nglk--dark a.nglk__item:hover .nglk__icon { background: #fff; color: var(--nglk-accent-dark); }
.nglk--dark .nglk__arrow { color: #ff8181; }
.nglk--dark a.nglk__item:hover .nglk__arrow { color: #fff; } .nglk .nglk__badge + .nglk__arrow { margin-left: 0; }
@media (max-width: 780px) {
.nglk.nglk--grid .nglk__items { grid-template-columns: repeat(min(2, var(--nglk-cols, 3)), minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.nglk.nglk--grid .nglk__items { grid-template-columns: minmax(0, 1fr); }
.nglk a.nglk__item { gap: 10px; }
.nglk .nglk__badge { max-width: 65px; }
}
@media (prefers-reduced-motion: reduce) {
.nglk .nglk__item, .nglk .nglk__icon, .nglk .nglk__arrow { transition: none !important; }
.nglk a.nglk__item:hover { transform: none; }
}
.nglk .nglk__sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }