/* design-system/work-cards.css · GENERATED by design-system/build.py from design-system/components/work-cards.css.
   Page-only token sheet: edit the sources, not this file. */
/* ===== SOURCE: design-system/components/work-cards.css ===== */
:is(body.work-page, .wcards) .bento-card,
:is(body.work-page, .wcards) .bento-card:hover {
border: var(--wc-border); border-radius: var(--wc-radius); -webkit-backdrop-filter: var(--wc-backdrop); backdrop-filter: var(--wc-backdrop);
background: linear-gradient(180deg, var(--white) 0 34%, var(--tile-hover-tint) 100%);
}
:is(body.work-page, .wcards) .bento-card { box-shadow: var(--wc-shadow); }
:is(body.work-page, .wcards) .bento-card:hover { box-shadow: var(--pub-e2), 0 0 0 1px var(--gold-300), 0 24px 56px -28px var(--title-hover-color); }
:is(body.work-page, .wcards) .bento-card::before {
background: conic-gradient(from var(--snake-angle), transparent 0%, color-mix(in oklab, var(--title-hover-color) 25%, transparent) 30%,
var(--title-hover-color) 70%, var(--gold-300) 100%);
}
:is(body.work-page, .wcards) .bento-card .bento-company-lockup { max-width: none; }
:is(body.work-page, .wcards) .bento-card .bento-company-name {
font: 600 11px/1 var(--pub-font-ui); letter-spacing: .12em; text-transform: uppercase; margin-top: 0; color: var(--slate-500);
}
:is(body.work-page, .wcards) .bento-card .editorial-title {
font-family: var(--pub-font-display); font-weight: 560; letter-spacing: -.02em; line-height: 1.14;
font-size: clamp(1.25rem, 6.4cqw, 1.625rem); color: var(--ink-cobalt);
}
:is(body.work-page, .wcards) .bento-card:hover .editorial-title { color: var(--title-hover-color); }
:is(body.work-page, .wcards) .bento-card .editorial-cta {
font: 600 15px/1.2 var(--pub-font-ui); color: var(--title-hover-color); display: inline-flex; align-items: center; gap: 8px;
}
:is(body.work-page, .wcards) .bento-card .editorial-cta svg { color: var(--gold-700); }
:is(body.work-page, .wcards) .bento-card:focus-visible { outline: var(--wc-focus-ring); outline-offset: var(--wc-focus-offset); }
:is(body.work-page, .wcards) .bento-card { --mh-pad: var(--wc-pad); --mh-inset: var(--wc-art-inset); padding: var(--mh-pad); }
:is(body.work-page, .wcards) .bento-card,
:is(body.work-page, .wcards) .bento-card:hover { background: var(--wc-bg); }
@media (hover: hover) and (pointer: fine) {
:is(body.work-page, .wcards) .bento-card:hover { background: var(--wc-bg-hover); }
}
@media (max-width: 767.98px), (hover: none) {
:is(body.work-page, .wcards) .bento-card { background: var(--wc-bg-hover); }
}
:is(body.work-page, .wcards) .bento-card:hover { box-shadow: var(--wc-shadow-hover); }
:is(body.work-page, .wcards) .bento-card::before,
:is(body.work-page, .wcards) .bento-card .bento-ring,
:is(body.work-page, .wcards) .bento-card .editorial-cta { display: none; }
:is(body.work-page, .wcards) .bento-card .bento-company-lockup { display: flex; align-items: center; max-width: none; margin: 0 0 var(--wc-lockup-space); }
:is(body.work-page, .wcards) .bento-card .bento-company-logo,
:is(body.work-page, .wcards) .bento-card:hover .bento-company-logo { filter: var(--wc-logo-filter); opacity: var(--wc-logo-opacity); }
:is(body.work-page, .wcards) .bento-card .bento-company-name,
:is(body.work-page, .wcards) .bento-card:hover .bento-company-name {
font: var(--wc-name-weight) var(--wc-name-size)/var(--wc-name-leading) var(--wc-name-face); letter-spacing: var(--wc-name-tracking); text-transform: none; margin-top: 0; color: var(--wc-name-color);
}
:is(body.work-page, .wcards) .bento-card .card-eyebrow {
display: flex; align-items: center; gap: var(--wc-eyebrow-gap); margin: 0 0 12px;
font: var(--wc-eyebrow-weight) var(--wc-eyebrow-size)/var(--wc-eyebrow-leading) var(--wc-eyebrow-face); letter-spacing: var(--wc-eyebrow-tracking); text-transform: var(--wc-eyebrow-case); color: var(--wc-eyebrow-color);
}
:is(body.work-page, .wcards) .bento-card .card-eyebrow::after {
content: "→"; letter-spacing: 0; opacity: 0; transform: translateX(-4px);
transition: transform var(--dur-spring-smooth) var(--pub-ease), opacity .2s linear;
}
:is(body.work-page, .wcards) .bento-card:hover .card-eyebrow::after { opacity: 1; transform: none; }
:is(body.work-page, .wcards) .bento-card .editorial-title,
:is(body.work-page, .wcards) .bento-card:hover .editorial-title {
margin: 0; font: var(--wc-title-weight) var(--wc-title-size)/var(--wc-title-leading) var(--wc-title-face); letter-spacing: var(--wc-title-tracking);
color: var(--wc-title-color); text-wrap: balance;
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--wc-title-lines); overflow: hidden;
}
:is(body.work-page, .wcards) :is(#chase-card, #fc-chase-card, #ff-chase-card) { --title-hover-color: #276fae; }
:is(body.work-page, .wcards) :is(#metlife-card, #fc-metlife-card, #ff-metlife-card) { --title-hover-color: #387935; }
:is(body.work-page, .wcards) :is(#turbotax-card, #fc-turbotax-card, #ff-turbotax-card) { --title-hover-color: #be3e3e; }
:is(body.work-page, .wcards) :is(#yelp-card, #fc-yelp-card, #ff-yelp-card) { --title-hover-color: #ca2222; }
@media (hover: hover) and (pointer: fine) {
:is(body.work-page, .wcards) .bento-card:hover .editorial-title { color: var(--wc-title-color-brand); }
}
@media (max-width: 767.98px), (hover: none) {
:is(body.work-page, .wcards) .bento-card .editorial-title,
:is(body.work-page, .wcards) .bento-card:hover .editorial-title { color: var(--wc-title-color-brand); }
}
@container bento-card (max-width: 285px) {
:is(body.work-page, .wcards) .bento-card .editorial-title,
:is(body.work-page, .wcards) .bento-card:hover .editorial-title { font-size: var(--wc-title-size-narrow); line-height: var(--wc-title-leading-narrow); }
}
@container bento-card (max-width: 270px) {
:is(body.work-page, .wcards) .bento-card .editorial-title,
:is(body.work-page, .wcards) .bento-card:hover .editorial-title { font-size: var(--wc-title-size-narrowest); }
}
:is(body.work-page, .wcards) .bento-card .card-labels {
display: flex; min-width: 0; margin: 14px 0 0; padding: 0; list-style: none;
border-top: var(--wc-tags-rule); border-bottom: var(--wc-tags-rule);
}
:is(body.work-page, .wcards) .bento-card .card-labels li {
flex: none; min-width: 0; padding: 8px var(--wc-tags-pad-end) 8px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font: var(--wc-tags-weight) var(--wc-tags-size)/var(--wc-tags-leading) var(--wc-tags-face); color: var(--wc-tags-color);
}
:is(body.work-page, .wcards) .bento-card .card-labels li:last-child { flex: 0 1 auto; }
:is(body.work-page, .wcards) .bento-card .card-labels li:last-child { white-space: normal; overflow: visible; text-overflow: clip; }
:is(body.work-page, .wcards) .bento-card .card-labels li + li { padding-left: var(--wc-tags-divider-gap); border-left: var(--wc-tags-rule); }
:is(body.work-page, .wcards) .bento-card .card-eyebrow { margin-bottom: var(--wc-eyebrow-space); }
:is(body.work-page, .wcards) .bento-card .card-outcome { margin-top: var(--wc-desc-space); -webkit-line-clamp: var(--wc-desc-lines); line-clamp: var(--wc-desc-lines); }
:is(body.work-page, .wcards) .bento-card .card-labels { margin-top: var(--wc-tags-space); }
:is(body.work-page, .wcards) .bento-card .card-labels li { padding-top: var(--wc-tags-pad-y); padding-bottom: var(--wc-tags-pad-y); }
:is(body.work-page, .wcards) .bento-card .bento-image-placeholder {
flex: none; display: block; width: auto; max-height: none; height: auto; aspect-ratio: auto;
margin: auto calc(-1 * var(--mh-pad)) calc(-1 * var(--mh-pad)); padding: var(--mh-inset) var(--mh-inset) 0;
background: var(--wc-art-bg);
}
:is(body.work-page, .wcards) .bento-card .bento-image-placeholder picture { display: block; }
:is(body.work-page, .wcards) .bento-card .bento-image-placeholder { position: relative; }
:is(body.work-page, .wcards) .bento-card .card-eyebrow::after { content: none; }
:is(body.work-page, .wcards) .bento-card .bento-mockup-img,
:is(body.work-page, .wcards) .bento-card:hover .bento-mockup-img {
display: block; width: 100%; height: auto; aspect-ratio: var(--wc-cover-ratio); max-width: none;
object-fit: contain; object-position: var(--wc-art-position); mix-blend-mode: var(--wc-art-blend);
transform: none !important; transition: none;
border-radius: var(--wc-cover-radius);
}
:is(body.work-page, .wcards) .bento-card picture .bento-mockup-img { box-shadow: var(--wc-cover-shadow); }
:is(body.work-page, .wcards) .bento-card .bento-image-placeholder {
flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin-top: var(--wc-art-gap);
}
:is(body.work-page, .wcards) .bento-card .bento-image-placeholder picture { flex: 1 1 0; min-height: 0; align-self: stretch; }
:is(body.work-page, .wcards) .bento-card .bento-mockup-img,
:is(body.work-page, .wcards) .bento-card:hover .bento-mockup-img {
flex: 1 1 0; min-height: 0; height: 100%; aspect-ratio: auto; object-fit: var(--wc-cover-fit); object-position: var(--wc-art-position);
}
:is(body.work-page, .wcards) .bento-card picture[data-art] .bento-mockup-img.wc-art {
object-fit: var(--wc-art-fit); object-position: var(--wc-art-position); box-shadow: var(--wc-art-shadow); border-radius: var(--wc-art-radius); background: none;
}
:is(body.work-page, .wcards) .bento-card .wc-screen-stage {
position: absolute; top: var(--mh-inset); left: var(--mh-inset); right: var(--mh-inset); bottom: 0;
container-type: size; pointer-events: none; z-index: 1;
}
:is(body.work-page, .wcards) .bento-card .wc-screen-art {
position: absolute; bottom: 0; left: 50%; translate: -50% 0;
width: min(100cqw, calc(100cqh * 900 / 648)); aspect-ratio: 900 / 648; container-type: inline-size;
}
:is(body.work-page, .wcards) .bento-card .wc-screen {
position: absolute; top: 0; left: 0; width: 100cqw; transform-origin: 0 0; display: block;
}
:is(body.work-page, .wcards) .bento-card .bento-image-placeholder .wc-screen picture { display: contents; }
:is(body.work-page, .wcards) .bento-card .wc-screen .wc-screen-img {
display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; border-radius: 0; box-shadow: none; transform: none; scale: none;
}
:is(body.work-page, .wcards) .bento-card .wc-screen.wc-screen--amny {
aspect-ratio: 558 / 1267;
transform: translate(40.743083cqw, 8.009934cqw) perspective(100cqw) matrix3d(0.221606, 0.029378, 0.041368, 0, -0.060167, 0.215957, 0.012921, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
:is(body.work-page, .wcards) .bento-card .wc-screen.wc-screen--pod {
aspect-ratio: 566 / 1348;
transform: translate(58.916932cqw, 16.481194cqw) perspective(100cqw) matrix3d(0.154506, 0.053638, 0.035485, 0, -0.066351, 0.154334, -0.008689, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
:is(body.work-page, .wcards) .bento-card .wc-screen.wc-screen--stl {
aspect-ratio: 560 / 1332;
transform: translate(47.563693cqw, 9.948608cqw) perspective(100cqw) matrix3d(0.202748, 0.036849, 0.038881, 0, -0.062157, 0.199322, 0.002707, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
:is(body.work-page, .wcards) .bento-card .wc-screen.wc-screen--co {
aspect-ratio: 567 / 1355;
transform: translate(52.739847cqw, 17.586532cqw) perspective(100cqw) matrix3d(0.153452, 0.023403, 0.042467, 0, -0.049152, 0.14716, 0.013812, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
:is(body.work-page, .wcards) .bento-card .wc-screen.wc-screen--dc {
aspect-ratio: 571 / 1390;
transform: translate(48.009801cqw, 18.196103cqw) perspective(100cqw) matrix3d(0.134509, 0.025965, 0.044274, 0, -0.045115, 0.130584, 0.007758, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
:is(body.work-page, .wcards) .bento-card .wc-screen.wc-screen--cfb {
aspect-ratio: 580 / 1344;
transform: translate(61.107516cqw, 20.832263cqw) perspective(100cqw) matrix3d(0.099246, 0.043666, 0.032875, 0, -0.050937, 0.097534, 0.000443, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
:is(body.work-page, .wcards) .bento-card .wc-screen.wc-screen--dep {
aspect-ratio: 1098 / 815;
transform: translate(41.547212cqw, 15.784205cqw) perspective(100cqw) matrix3d(0.404879, 0.050068, 0.120005, 0, -0.072209, 0.427401, 0.003143, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
:is(body.work-page, .wcards) .bento-card .wc-screen.wc-screen--tt {
aspect-ratio: 575 / 1356;
transform: translate(66.876215cqw, 13.677555cqw) perspective(100cqw) matrix3d(0.123587, 0.017086, 0.029995, 0, -0.028392, 0.122134, 0.006784, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
:is(body.work-page, .wcards) .bento-card .wc-screen.wc-screen--cb {
aspect-ratio: 1096 / 740;
transform: translate(35.076833cqw, 13.86829cqw) perspective(100cqw) matrix3d(0.487513, 0.050173, 0.105282, 0, -0.085993, 0.509414, 0.003158, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
:is(body.work-page, .wcards) .bento-card .wc-screen.wc-screen--ey {
aspect-ratio: 572 / 1252;
transform: translate(47.040507cqw, 17.377362cqw) perspective(100cqw) matrix3d(0.133309, 0.02162, 0.028985, 0, -0.038847, 0.128942, 0.013759, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
:is(body.work-page, .wcards) .bento-card .wc-screen--locked .wc-screen-lock {
position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; translate: -50% -50%;
display: grid; place-items: center; border-radius: 50%; color: #fff;
background: rgba(17, 24, 39, .42); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .45), 0 4px 14px rgba(17, 24, 39, .28);
}
:is(body.work-page, .wcards) .bento-card .wc-screen--locked .wc-screen-lock svg {
display: block; width: 52%; height: 52%; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3));
}
:is(body.work-page, .wcards) .bento-card .wc-screen--cfb.wc-screen--locked .wc-screen-lock {
background: rgba(17, 24, 39, .58); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .72), 0 4px 14px rgba(17, 24, 39, .34);
}
@media (hover: hover) and (pointer: fine) and (min-width: 601px) and (prefers-reduced-motion: no-preference) {
html :is(body.work-page, .wcards) .bento-card:not(.wd-copy) .wc-screen-stage { transform-origin: 50% 100%; scale: 1; transition: scale var(--wh-dur) var(--wh-ease); }
html :is(body.work-page, .wcards) .bento-card:not(.wd-copy):not(.wh-reset):hover .wc-screen-stage { scale: var(--wh-zoom); }
}
html[data-wc-screen-off] :is(body.work-page, .wcards) .wc-screen-stage { visibility: hidden; }
@property --wci-tint { syntax: "<number>"; inherits: false; initial-value: .05; }
:is(body.work-page, .wcards) .bento-card::after {
--wci-icon: var(--wc-icon-glyph);
--wci-tint: var(--wc-icon-tint);
content: ""; display: block; position: absolute; top: var(--wc-icon-top); right: var(--wc-icon-right); z-index: var(--wc-icon-z); pointer-events: none;
width: var(--wc-icon-size); height: var(--wc-icon-size); border-radius: var(--wc-icon-radius);
background: var(--wc-icon-color);
-webkit-mask: var(--wci-icon) center / var(--wc-icon-glyph-size) var(--wc-icon-glyph-size) no-repeat, linear-gradient(rgb(0 0 0 / var(--wci-tint)) 0 0);
mask: var(--wci-icon) center / var(--wc-icon-glyph-size) var(--wc-icon-glyph-size) no-repeat, linear-gradient(rgb(0 0 0 / var(--wci-tint)) 0 0);
transform: none; transition: --wci-tint var(--wc-icon-dur) var(--wc-icon-ease);
}
@media (hover: hover) and (pointer: fine) {
:is(body.work-page, .wcards) .bento-card:hover::after { --wci-tint: var(--wc-icon-tint-hover); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
:is(body.work-page, .wcards) .bento-card::after { transition: --wci-tint var(--wc-icon-dur) var(--wc-icon-ease), transform var(--wc-icon-dur) var(--wc-icon-ease); }
:is(body.work-page, .wcards) .bento-card:hover::after { transform: scale(var(--wc-icon-scale-hover)); }
}
@media (max-width: 767.98px) {
:is(body.work-page, .wcards) .bento-card { --mh-pad: var(--wc-pad-sm); }
}
:is(body.work-page, .wcards) .bento-card[href$="/chasedeposits/"], :is(body.work-page, .wcards) .bento-card[href$="/chasedeposits/"]:hover { background: #f1e7da; background-image: none; }
.bento-company-wordmark { display: block; height: 18px; width: auto; max-width: 70%; }
.editorial-project {
display: flex;
flex-direction: column;
text-decoration: none;
background: rgba(250, 248, 245, 0.65);
backdrop-filter: blur(var(--glass-blur, 20px));
-webkit-backdrop-filter: blur(var(--glass-blur, 20px));
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
transform: translateZ(0);
transition: transform var(--dur-page) var(--ease-emphasized), box-shadow var(--dur-page) var(--ease-emphasized), background var(--dur-page) ease;
height: 100%;
position: relative;
}
.editorial-project::after {
content: "";
position: absolute;
top: 2rem;
right: 2rem;
width: 32px;
height: 32px;
background-color: rgba(99, 91, 255, 0.05);
border-radius: var(--radius-sm);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23635BFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
transition: all 0.2s var(--ease-out);
z-index: 2;
}
.editorial-project:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 12px 48px rgba(9, 13, 26, 0.12);
background: rgba(250, 248, 245, 0.85);
border: 1px solid rgba(255, 255, 255, 0.8);
}
.editorial-project:hover::after {
background-color: rgba(99, 91, 255, 0.1);
transform: scale(1.05);
}
.editorial-project:focus-visible {
outline: 2px solid #635BFF;
outline-offset: 4px;
}
.editorial-project:hover .editorial-img {
transform: scale(1.02);
}
.editorial-content {
order: 2;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1;
padding: 1.5rem;
}
.editorial-title {
font-family: 'Poppins', 'Poppins Fallback', 'Segoe UI', Roboto, sans-serif;
font-size: var(--text-card-title);
font-weight: 500;
line-height: 1.25;
color: #0a2540;
margin: 0;
text-align: left;
text-wrap: balance;
letter-spacing: -0.02em;
padding-right: 2rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.editorial-pills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.25rem;
}
.editorial-pill {
font-family: 'Poppins', 'Poppins Fallback', 'Segoe UI', Roboto, sans-serif;
font-size: var(--text-label);
font-weight: 400;
line-height: 1.5;
color: #425466;
text-wrap: pretty;
}
.editorial-img-wrapper {
order: 1;
position: relative;
width: 100%;
flex: none;
height: 220px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 12px 0 12px;
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.editorial-badge {
display: none;
}
.editorial-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
border-radius: 6px;
transition: transform 0.6s var(--ease-out);
display: block;
}
.editorial-cta {
font-family: 'Poppins', 'Poppins Fallback', 'Segoe UI', Roboto, sans-serif;
font-size: var(--text-label);
font-weight: 600;
color: #635BFF;
margin-top: auto;
display: inline-flex;
align-items: center;
gap: 6px;
transition: opacity 0.2s ease;
}
.editorial-cta svg {
width: 16px;
height: 16px;
transition: transform var(--dur-base) var(--ease-out);
}
.editorial-project:hover .editorial-cta svg {
transform: translateX(4px);
}
@media (max-width: 767px) {
.editorial-project {
height: auto;
}
}
.editorial-kicker-logo {
height: 20px;
width: auto;
max-width: 120px;
object-fit: contain;
object-position: left center;
margin-bottom: 10px;
filter: grayscale(100%) opacity(0.6);
transition: filter 0.3s ease, opacity 0.3s ease;
display: block;
}
.editorial-project:hover .editorial-kicker-logo {
filter: grayscale(0%) opacity(1);
}
.bento-card {
--tile-tint: #eaf3fc;
--tile-hover-tint: #e3effa;
--title-hover-color: #2b7bc0;
background: radial-gradient(circle at 50% 80%, var(--white) 0%, var(--tile-tint) 100%);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: var(--radius-sm);
padding: clamp(16px, 8cqw, 32px);
display: flex;
flex-direction: column;
justify-content: flex-start;
overflow: hidden;
aspect-ratio: 389 / 480;
height: auto;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.02);
position: relative;
text-decoration: none;
transition: transform var(--dur-page) var(--ease-emphasized), box-shadow var(--dur-page) var(--ease-emphasized), border-color var(--dur-page) ease;
container-type: inline-size;
container-name: bento-card;
}
@property --snake-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
@keyframes snake-spin {
from { --snake-angle: 0deg; }
to { --snake-angle: 360deg; }
}
.bento-card::before {
content: "";
position: absolute;
inset: -1px;
border-radius: var(--radius-sm);
padding: 1px;
background: conic-gradient(
from var(--snake-angle),
transparent 0%,
rgba(254, 118, 88, 0.1) 20%,
rgba(254, 118, 88, 0.4) 40%,
rgba(254, 118, 88, 0.1) 60%,
rgba(254, 118, 88, 0.8) 85%,
#FE7658 100%
);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
opacity: 0;
transition: opacity 0.8s ease;
z-index: 10;
}
.bento-card:hover::before {
opacity: 1;
animation: snake-spin 6s var(--ease-linear) infinite;
}
.bento-card::after {
background-color: rgba(254, 118, 88, 0.08);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23FE7658' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M9 21H3v-6'/%3E%3Cpath d='M21 3l-7 7'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E");
top: clamp(16px, 8cqw, 32px);
right: clamp(16px, 8cqw, 32px);
width: clamp(20px, 8cqw, 32px);
height: clamp(20px, 8cqw, 32px);
}
.bento-card:hover::after {
background-color: rgba(254, 118, 88, 0.15);
}
.bento-card:hover {
transform: translateY(-6px) scale(1.01);
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
border-color: rgba(0, 0, 0, 0.12);
background: radial-gradient(circle at 50% 80%, var(--white) 0%, var(--tile-hover-tint) 100%);
}
.bento-company-lockup {
display: flex;
align-items: center;
height: clamp(20px, 8cqw, 32px);
gap: clamp(4px, 2cqw, 8px);
margin-bottom: 0;
max-width: calc(100% - clamp(24px, 10cqw, 40px));
}
.bento-card .bento-company-logo {
width: var(--wc-logo-size);
height: var(--wc-logo-size);
margin-top: 2px;
opacity: 0.55;
filter: grayscale(100%);
transition: opacity 0.3s ease, filter 0.3s ease;
object-fit: contain;
object-position: left center;
}
.bento-card:hover .bento-company-logo {
opacity: 0.85;
filter: none;
}
.bento-card .bento-company-name {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Text", "Segoe UI", sans-serif;
font-size: clamp(14px, 4.2cqw, 18px);
font-weight: 500;
color: #86868b;
letter-spacing: 0.01em;
line-height: 1;
margin-top: 2px;
transition: color 0.3s ease;
}
.bento-card:hover .bento-company-name {
color: #515154;
}
.bento-image-placeholder {
margin: auto 0 calc(-1 * clamp(16px, 8cqw, 32px)) 0;
width: 100%;
aspect-ratio: 3 / 2;
display: flex;
align-items: flex-end;
justify-content: center;
}
.bento-mockup-img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
mix-blend-mode: multiply;
transform: scale(1.1);
transform-origin: bottom center;
transition: transform var(--dur-page) var(--ease-emphasized);
}
.bento-mockup-img.no-blend {
mix-blend-mode: normal;
}
.bento-card:hover .bento-mockup-img {
transform: scale(1.13);
}
.bento-card .editorial-title {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
font-size: var(--text-card-title);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.02em;
color: #1d1d1f;
margin: clamp(16px, 8cqw, 32px) 0 clamp(8px, 4cqw, 16px) 0;
text-shadow: none;
display: block;
-webkit-line-clamp: unset;
overflow: visible;
text-wrap: pretty;
padding-right: 0;
transition: color 0.3s ease;
}
.bento-card:hover .editorial-title {
color: var(--title-hover-color);
}
:is(#metlife-card, #fc-metlife-card, #ff-metlife-card) {
--tile-tint: #edf7eb;
--tile-hover-tint: #dff2db;
--title-hover-color: #4a9e46;
}
:is(#turbotax-card, #fc-turbotax-card, #ff-turbotax-card) {
--tile-tint: #fef2f2;
--tile-hover-tint: #fce8e8;
--title-hover-color: #d14545;
}
:is(#microsoft-card, #fc-microsoft-card, #ff-microsoft-card) {
--tile-tint: #f5f5f7;
--tile-hover-tint: #ebebf0;
--title-hover-color: #515154;
}
:is(#schneps-card, #fc-schneps-card, #ff-schneps-card) {
--tile-tint: #fef4f4;
--tile-hover-tint: #fde6e7;
--title-hover-color: #c8161d;
}
:is(#amny-card, #fc-amny-card, #ff-amny-card) {
--tile-tint: var(--sand-50);
--tile-hover-tint: #f5f0e6;
--title-hover-color: #2b2b2b;
}
:is(#stealth-card, #fc-stealth-card, #ff-stealth-card) {
--tile-tint: #f5f5f5;
--tile-hover-tint: #e5e5e5;
--title-hover-color: #404040;
}
:is(#yelp-card, #fc-yelp-card, #ff-yelp-card) {
--tile-tint: #fff5f5;
--tile-hover-tint: #fee2e2;
--title-hover-color: #dc2626;
}
#cta-card {
--tile-tint: #fff1ed;
--tile-hover-tint: var(--coral-100);
--title-hover-color: var(--coral-500);
}
.bento-card .editorial-cta {
color: #FE7658;
margin-top: 0;
font-weight: 500;
}
@media (max-width: 1024px) {
.bento-card::before {
opacity: 1;
animation: snake-spin 6s var(--ease-linear) infinite;
}
.bento-card::after {
background-color: rgba(254, 118, 88, 0.15);
}
.bento-card {
background: radial-gradient(circle at 50% 80%, var(--white) 0%, var(--tile-hover-tint) 100%);
}
.bento-card .bento-company-logo {
opacity: 0.85;
filter: none;
}
.bento-card .bento-company-name {
color: #515154;
}
.bento-card .bento-mockup-img {
transform: scale(1.13);
}
.bento-card .editorial-title {
color: var(--title-hover-color);
}
}
/* END components/work-cards.css */