.abs-hero.abs-hero--badge { --abs-hero-pt: clamp(4rem, 10vw, 8.5rem); padding-block: var(--abs-hero-pt) 3rem; }
.abs-hero__grid { display: block; }
.abs-badge {
--abs-clip-drop: 2.5rem; --abs-badge-strap: 3.5rem;
width: min(100%, 15rem);
margin: 2rem auto 0;
color: var(--abs-ink);
}
.abs-badge svg { display: block; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.abs-badge svg * { vector-effect: non-scaling-stroke; } .abs-badge__straps { height: var(--abs-badge-strap); border-top: 1px solid var(--abs-rule); }
.abs-badge__straps svg { width: 100%; height: 100%; }
.abs-badge__straps .abs-badge__gold { stroke: var(--abs-gold); }
.abs-badge__hang { position: relative; }
.abs-badge__card {
position: relative;
padding-top: var(--abs-clip-drop);
transform-origin: 50% 0;
cursor: grab;
touch-action: pan-y;
will-change: transform;
}
.abs-badge__card.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; } .abs-badge__clip { position: absolute; z-index: 1; left: 50%; top: -6px; width: 48px; height: 64px; margin-left: -24px; pointer-events: none; }
.abs-badge__clip rect,
.abs-badge__clip path:nth-child(2) { fill: var(--abs-paper); } .abs-badge__marks {
position: absolute;
inset: calc(var(--abs-clip-drop) - .75rem) -.75rem -.75rem;
pointer-events: none;
color: var(--abs-ink);
background:
linear-gradient(currentColor, currentColor) 0 0 / 10px 1px no-repeat,
linear-gradient(currentColor, currentColor) 0 0 / 1px 10px no-repeat,
linear-gradient(currentColor, currentColor) 100% 0 / 10px 1px no-repeat,
linear-gradient(currentColor, currentColor) 100% 0 / 1px 10px no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / 10px 1px no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / 1px 10px no-repeat,
linear-gradient(currentColor, currentColor) 100% 100% / 10px 1px no-repeat,
linear-gradient(currentColor, currentColor) 100% 100% / 1px 10px no-repeat;
}
.abs-badge__marks::before,
.abs-badge__marks::after {
content: "";
position: absolute;
top: 20%;
bottom: 20%;
width: 5px;
opacity: .45;
background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 2.25rem);
}
.abs-badge__marks::before { left: 0; }
.abs-badge__marks::after { right: 0; }
.abs-badge__body {
position: relative;
padding: 2rem 1.25rem 0;
border: 1px solid var(--abs-ink);
border-radius: 8px;
background: var(--abs-paper);
}
.abs-badge .abs-badge__body p { margin: 0; }
.abs-badge__photo {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
max-width: none;
object-fit: cover;
object-position: 50% 20%;
border: 1px solid var(--abs-ink);
-webkit-user-drag: none;
user-select: none;
}
.abs-badge .abs-badge__name { margin-top: .875rem; font-size: 1.5rem; font-weight: 600; line-height: 1.1; color: var(--abs-ink); }
.abs-badge .abs-badge__role { margin-top: .25rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--abs-ink-dim); } .abs-badge .abs-badge__where { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--abs-line); font-size: .8125rem; line-height: 1.5; color: var(--abs-ink-dim); }
.abs-badge .abs-badge__links {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1rem;
border-top: 1px solid var(--abs-rule);
}
.abs-badge__links a {
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: .8125rem;
color: var(--abs-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
cursor: pointer;
}
.abs-badge__links a:hover { text-decoration-color: var(--abs-accent); } .abs-badge__back { margin-top: 1rem; padding-top: 1.25rem; }
.abs-badge__turn { display: none; }
.abs-badge.has-flip .abs-badge__turn {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 0;
border: 0;
background: none;
font: inherit;
font-size: .8125rem;
color: var(--abs-ink);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: .2em;
cursor: pointer;
}
.abs-badge__turn:hover { text-decoration-color: var(--abs-accent); } .abs-badge.has-flip .abs-badge__turn,
.abs-badge.has-flip .abs-badge__turn:hover,
.abs-badge.has-flip .abs-badge__turn:focus {
text-transform: none;
letter-spacing: normal;
background: none;
box-shadow: none;
border-radius: 0;
}
.abs-badge.has-flip .abs-badge__turn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.abs-badge__id { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .25rem; }
.abs-badge .abs-badge__id .abs-badge__role { margin-top: 0; }
.abs-badge.has-flip .abs-badge__card { perspective: 1000px; }
.abs-badge.has-flip .abs-badge__flipper {
display: grid;
transform-style: preserve-3d;
transition: transform .5s cubic-bezier(.65, 0, .25, 1);
}
.abs-badge.has-flip .abs-badge__flipper > .abs-badge__face {
grid-area: 1 / 1;
display: flex;
flex-direction: column;
margin-top: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.abs-badge.has-flip .abs-badge__back { transform: rotateY(180deg); }
.abs-badge.has-flip.is-flipped .abs-badge__flipper { transform: rotateY(180deg); }
.abs-badge.has-flip .abs-badge__face .abs-badge__links { margin-top: auto; } .abs-badge .abs-badge__back { padding-top: 1.25rem; font-size: .72rem; line-height: 1.3; color: var(--abs-ink); }
.abs-badge .abs-badge__kicker { margin: 0 0 .5rem; font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; color: var(--abs-ink-dim); }
.abs-badge__stats { margin: 0; border-top: 1px solid var(--abs-rule); }
.abs-badge__stats > div { display: flex; align-items: baseline; gap: .625rem; padding: .3rem 0; border-bottom: 1px solid var(--abs-rule); }
.abs-badge__stats dt { flex: 0 0 3.25rem; margin: 0; font-size: 1.375rem; font-weight: 600; line-height: 1; color: var(--abs-ink); }
.abs-badge__stats dd { margin: 0; color: var(--abs-ink-dim); }
.abs-badge .abs-badge__quote { margin: .625rem 0 .5rem; }
.abs-badge .abs-badge__quote blockquote { margin: 0; padding: 0; border: 0; font-size: .8125rem; line-height: 1.3; font-style: italic; color: var(--abs-ink); }
.abs-badge .abs-badge__quote figcaption { margin-top: .25rem; color: var(--abs-ink-dim); }
.abs-badge .abs-badge__list { margin: 0; padding: .4rem 0 .4rem; list-style: none; border-top: 1px solid var(--abs-rule); }
.abs-badge .abs-badge__list li { margin: 0; padding: .1rem 0; color: var(--abs-ink); } @media (prefers-reduced-motion: no-preference) {
.abs-badge__card:not(.is-ready) { opacity: 0; animation: abs-badge-show .01s 1.5s forwards; }
}
@keyframes abs-badge-show { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.abs-badge__card { transform: none !important; cursor: auto; } .abs-badge.has-flip .abs-badge__flipper { transition: none; transform: none !important; }
.abs-badge.has-flip .abs-badge__back { transform: none; }
.abs-badge.has-flip .abs-badge__face[inert] { visibility: hidden; }
} @media (min-width: 880px) {
.abs-hero__grid {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(14rem, 20vw, 17rem);
column-gap: clamp(2rem, 5vw, 5rem);
align-items: start; grid-template-rows: auto 1fr;
}
.abs-hero__copy { grid-column: 1; grid-row: 1; margin-block: 0; } .abs-hero__grid > .abs-hero__sub { grid-column: 1; grid-row: 2; margin-top: 3.5rem; grid-template-columns: 1fr; align-items: start; }
.abs-hero__grid > .abs-hero__sub .abs-btns { justify-content: flex-start; }
.abs-badge {
--abs-badge-strap: calc(var(--abs-hero-pt) + 2.5rem);
grid-column: 2;
grid-row: 1 / span 2;
width: 100%;
margin: calc(var(--abs-hero-pt) * -1) 0 0;
}
.abs-badge__straps { border-top: 0; }
}