/* design-system/featured-carousel.css · GENERATED by design-system/build.py from design-system/components/featured-carousel.css.
   Page-only token sheet: edit the sources, not this file. */
/* ===== SOURCE: design-system/components/featured-carousel.css ===== */
html body .fwc {
--fwc-gap: 24px;
--fwc-per: 3;
--fwc-room-top: 16px;
--fwc-room-end: 48px;
--fwc-pad: calc(var(--pub-gutter) + 12px);
max-width: calc(var(--pub-wide) + 24px); width: auto; margin: 0 auto;
border-radius: 0; box-shadow: none; overflow: visible;
padding: calc(var(--pub-fd-block) * .5) var(--fwc-pad) 0;
}
@media (max-width: 1023.98px) { html body .fwc { --fwc-per: 2.2; } }
@media (max-width: 767.98px)  { html body .fwc { --fwc-per: 1.2; --fwc-gap: 16px; } }
html body .fwc .profile-role::before { content: ""; display: block; height: 2px; }
html body .fwc .profile-role { text-wrap: balance; }
html body .fwc-tools { border-top: 1px solid var(--pub-text); padding-top: 32px; }
html body .fwc-foot { display: flex; align-items: center; justify-content: flex-start; gap: 20px; margin: 16px 0 0; }
@media (max-width: 767.98px) { html body .fwc-foot { justify-content: center; margin-top: 16px; } }
html body .fwc-all {
--fwc-all-edge: 0 0 0 1px rgb(19 37 168 / .10);
--fwc-all-shadow: 0 1px 2px rgb(19 37 168 / .08), 0 8px 20px -8px rgb(19 37 168 / .28);
position: relative; display: inline-flex; align-items: center; gap: 8px;
height: 44px; padding: 0 18px 0 20px; box-sizing: border-box; border-radius: 999px;
font: 600 14px/1 var(--pub-font-ui); letter-spacing: .005em; color: var(--pub-accent); text-decoration: none; white-space: nowrap;
border: 1px solid rgb(157 176 242 / .55);
background:
radial-gradient(120% 70% at 50% 0%, rgb(255 255 255 / .85), rgb(255 255 255 / 0) 62%),
linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / .22));
-webkit-backdrop-filter: blur(var(--glass-blur-sm, 8px)) saturate(var(--glass-saturate-light, 160%));
backdrop-filter: blur(var(--glass-blur-sm, 8px)) saturate(var(--glass-saturate-light, 160%));
box-shadow:
var(--glass-rim-top, inset 0 1px rgb(255 255 255 / .78)),
var(--glass-rim-bottom, inset 0 -1px rgb(3 32 90 / .03)),
var(--fwc-all-edge),
var(--fwc-all-shadow);
transition: background-color var(--dur-base, .2s) var(--ease-out, ease), box-shadow var(--dur-base, .2s) var(--ease-out, ease),
transform var(--dur-base, .2s) var(--ease-out, ease);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html body .fwc-all { background: linear-gradient(180deg, #fff, var(--pub-surface, #faf8f4)); }
}
html body .fwc-all svg { width: 14px; height: 14px; flex: none; transition: transform var(--dur-base, .2s) var(--ease-out, ease); }
@media (hover: hover) and (pointer: fine) {
html body .fwc-all:hover {
--fwc-all-edge: 0 0 0 1px rgb(19 37 168 / .16);
--fwc-all-shadow: 0 2px 4px rgb(19 37 168 / .10), 0 12px 24px -10px rgb(19 37 168 / .34);
background-color: rgb(228 232 248 / .45);
transform: translateY(-1px);
}
html body .fwc-all:hover svg { transform: translateX(3px); }
}
html body .fwc-all:active { transform: translateY(0) scale(.97); }
html body .fwc-all:focus-visible { background-color: rgb(228 232 248 / .45); }
html body .fwc-all:focus-visible svg { transform: translateX(3px); }
html body .fwc-nav { display: flex; gap: 10px; }
html body .fwc-btn {
--fwc-btn-shadow: 0 1px 2px rgb(3 32 90 / .08), 0 8px 20px -8px rgb(3 32 90 / .30);
position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
color: var(--pub-text); border-radius: 999px;
border: 1px solid var(--glass-border-highlight, rgb(255 255 255 / .65));
background:
radial-gradient(120% 70% at 50% 0%, rgb(255 255 255 / .85), rgb(255 255 255 / 0) 62%),
linear-gradient(180deg, rgb(255 255 255 / .55), rgb(255 255 255 / .22));
-webkit-backdrop-filter: blur(var(--glass-blur-sm, 8px)) saturate(var(--glass-saturate-light, 160%));
backdrop-filter: blur(var(--glass-blur-sm, 8px)) saturate(var(--glass-saturate-light, 160%));
box-shadow:
var(--glass-rim-top, inset 0 1px rgb(255 255 255 / .78)),
var(--glass-rim-bottom, inset 0 -1px rgb(3 32 90 / .03)),
0 0 0 1px rgb(3 32 90 / .07),
var(--fwc-btn-shadow);
transition: background-color var(--dur-base, .2s) var(--ease-out, ease), box-shadow var(--dur-base, .2s) var(--ease-out, ease),
transform var(--dur-base, .2s) var(--ease-out, ease), opacity var(--dur-base, .2s);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
html body .fwc-btn { background: linear-gradient(180deg, #fff, var(--pub-surface, #faf8f4)); }
}
html body .fwc-btn svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
html body .fwc-btn:not([aria-disabled="true"]):hover {
--fwc-btn-shadow: 0 2px 4px rgb(3 32 90 / .10), 0 12px 24px -10px rgb(3 32 90 / .36);
background-color: rgb(255 255 255 / .35); transform: translateY(-1px); color: var(--pub-accent);
}
}
html body .fwc-btn:not([aria-disabled="true"]):active { transform: translateY(0) scale(.96); }
html body .fwc-btn[aria-disabled="true"] {
opacity: .45; cursor: default; --fwc-btn-shadow: 0 1px 2px rgb(3 32 90 / .06);
}
html body :is(.fwc-btn, .fwc-all, .fwc-track):focus-visible { outline: var(--pub-focus-ring); outline-offset: var(--pub-focus-offset); }
html body .fwc-btn:focus-visible { background-color: rgb(255 255 255 / .35); }
@media (max-width: 767.98px) { html body .fwc-nav { display: none; } }
html body .fwc-track {
display: flex; gap: var(--fwc-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
scroll-snap-type: x mandatory; scroll-padding-inline: var(--fwc-pad); scrollbar-width: none;
margin: 0 calc(-1 * var(--fwc-pad)) calc(-1 * var(--fwc-room-end) + 8px);
padding: var(--fwc-room-top) var(--fwc-pad) var(--fwc-room-end);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--pub-gutter), #000 calc(100% - var(--pub-gutter)), transparent);
mask-image: linear-gradient(90deg, transparent, #000 var(--pub-gutter), #000 calc(100% - var(--pub-gutter)), transparent);
}
html body .fwc-track::-webkit-scrollbar { display: none; }
html body .fwc-track:focus-visible { -webkit-mask-image: none; mask-image: none; outline-offset: -2px; }
html body .fwc-track > .bento-card {
flex: 0 0 auto;
min-width: 0; width: auto; max-width: none; margin: 0; scroll-snap-align: start;
}
html body .fwc-track { --fwc-col: 100%; }
html body .fwc-track > .bento-card { flex-basis: calc((var(--fwc-col) - (var(--fwc-per) - 1) * var(--fwc-gap)) / var(--fwc-per)); }
@media (max-width: 767.98px) {
html body .fwc-track > .bento-card { flex-basis: calc(var(--fwc-col) - 24px); }
}
html body .fwc-track::after { content: ""; flex: 0 0 1px; margin-left: calc(var(--fwc-pad) - var(--fwc-gap) - 1px); }
html body .fwc-dots { display: none; }
@media (max-width: 767.98px) {
html body .fwc-dots { display: flex; justify-content: center; gap: 6px; margin: 12px 0 0; position: relative; padding: 0; list-style: none; }
html body .fwc-dots li {
width: 6px; height: 6px; border-radius: 999px; background: var(--slate-400);
transition: width var(--dur-base, .2s) var(--ease-out, ease), background-color var(--dur-base, .2s) var(--ease-out, ease);
}
html body .fwc-dots li.is-filled { background: var(--slate-600); }
html body .fwc-dots li.is-current { width: 18px; background: var(--pub-text); }
}
@property --fwc-fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fwc-fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fwc-hide-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fwc-hide-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@media (min-width: 64em) {
html body #featured-work.fwc {
--fwc-per: 2.2;
--fwc-room-end: 60px;
--fwc-shade: 28px;
display: grid; grid-template-columns: var(--pub-fd-cols); column-gap: var(--pub-fd-col-gap); align-items: start;
}
html body #featured-work > .fwc-head.profile-content { display: contents; }
html body #featured-work .fwc-title { grid-column: 1; grid-row: 1 / span 3; }
html body #featured-work .fwc-tools { grid-column: 2; grid-row: 1; }
html body #featured-work > :is(.fwc-track, .fwc-dots, .fwc-foot) { grid-column: 2; min-width: 0; }
html body #featured-work .fwc-track {
--fwc-fade-r: 40px; --fwc-hide-r: var(--fwc-shade);
margin: 0 calc(-1 * var(--fwc-shade)) calc(-1 * var(--fwc-room-end) + 8px);
padding-inline: var(--fwc-shade); scroll-padding-inline: var(--fwc-shade);
-webkit-mask-image: linear-gradient(90deg, transparent var(--fwc-hide-l), #000 calc(var(--fwc-hide-l) + var(--fwc-fade-l)),
#000 calc(100% - var(--fwc-hide-r) - var(--fwc-fade-r)), transparent calc(100% - var(--fwc-hide-r)));
mask-image: linear-gradient(90deg, transparent var(--fwc-hide-l), #000 calc(var(--fwc-hide-l) + var(--fwc-fade-l)),
#000 calc(100% - var(--fwc-hide-r) - var(--fwc-fade-r)), transparent calc(100% - var(--fwc-hide-r)));
transition: --fwc-fade-l var(--dur-base, .2s) var(--ease-out, ease), --fwc-fade-r var(--dur-base, .2s) var(--ease-out, ease),
--fwc-hide-l var(--dur-base, .2s) var(--ease-out, ease), --fwc-hide-r var(--dur-base, .2s) var(--ease-out, ease);
}
html body #featured-work:has(.fwc-prev[aria-disabled="false"]) .fwc-track { --fwc-fade-l: 40px; --fwc-hide-l: var(--fwc-shade); }
html body #featured-work:has(.fwc-next[aria-disabled="true"]) .fwc-track { --fwc-fade-r: 0px; --fwc-hide-r: 0px; }
html body #featured-work .fwc-track::after { content: none; }
}
@media (prefers-reduced-motion: reduce) {
html body .fwc-dots li, html body .fwc-btn, html body .fwc-all, html body .fwc-all svg, html body #featured-work .fwc-track { transition: none; }
html body .fwc-btn:not([aria-disabled="true"]):is(:hover, :active) { transform: none; }
html body .fwc-all:is(:hover, :active, :focus-visible), html body .fwc-all:is(:hover, :focus-visible) svg { transform: none; }
}
/* END components/featured-carousel.css */