body.body-portfolio-item {
background-image:
radial-gradient(ellipse 110% 110% at 100% 0%,
color-mix(in srgb, var(--color-brand) 32%, transparent) 0%,
transparent 72%),
radial-gradient(ellipse 110% 110% at 0% 0%,
color-mix(in srgb, var(--color-brand) 32%, transparent) 0%,
transparent 72%);
background-position: top right, top left;
background-repeat: no-repeat, no-repeat;
background-size: min(84rem, 104vw) min(56rem, 84vh), min(84rem, 104vw) min(56rem, 84vh);
isolation: isolate;
position: relative; }
body.body-portfolio-item::before,
body.body-portfolio-item::after {
background-repeat: no-repeat;
background-size: min(84rem, 104vw) min(56rem, 84vh);
content: "";
inset: 0;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity var(--animate-duration-fast) ease;
z-index: -1; }
body.body-portfolio-item::before {
background-image: radial-gradient(ellipse 110% 110% at 100% 0%,
color-mix(in srgb, var(--color-accent) 36%, transparent) 0%,
transparent 72%);
background-position: top right; }
body.body-portfolio-item::after {
background-image: radial-gradient(ellipse 110% 110% at 0% 0%,
color-mix(in srgb, var(--color-accent) 36%, transparent) 0%,
transparent 72%);
background-position: top left; }
body.body-portfolio-item.is-audio-playing::before {
animation: portfolio-item-gradient-right 7.5s ease-in-out infinite; }
body.body-portfolio-item.is-audio-playing::after {
animation: portfolio-item-gradient-left 10.5s ease-in-out infinite 1.1s; }
[data-portfolio-audio-toggle-image] {
cursor: pointer; }
.portfolio-player {
align-items: center;
backdrop-filter: blur(10px);
background-color: color-mix(in srgb, var(--color-background-default) 78%, transparent);
border: 1px solid color-mix(in srgb, var(--color-brand) 34%, transparent);
border-radius: 999px;
display: grid;
gap: var(--spacing-s);
grid-template-columns: auto minmax(0, 1fr) auto;
inset-block-start: var(--spacing-s);
inset-inline: var(--spacing-r);
margin: 0;
opacity: .5;
padding: .25rem .75rem;
position: absolute;
z-index: 2; }
.portfolio-media:hover .portfolio-player {
opacity: 1;
transition: opacity var(--animate-duration-faster) var(--animate-function); }
.portfolio-player__toggle {
align-items: center;
background-color: transparent;
border: none;
color: var(--color-text-default);
cursor: pointer;
display: inline-flex;
font: inherit;
justify-content: center;
inline-size: 2.5rem;
min-inline-size: 2.5rem;
padding: 0; }
.portfolio-player__toggle span[hidden] {
display: none; }
.portfolio-player__toggle span {
display: inline-flex; }
.portfolio-player__toggle svg {
block-size: 2rem;
display: block;
inline-size: 2rem; }
.portfolio-player__scrubber {
-webkit-appearance: none;
appearance: none;
background: transparent;
cursor: pointer;
inline-size: 100%;
margin: 0; }
.portfolio-player__scrubber::-webkit-slider-runnable-track {
background-color: color-mix(in srgb, var(--color-text-default) 18%, transparent);
border-radius: 999px;
block-size: .25rem; }
.portfolio-player__scrubber::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
background-color: var(--color-brand);
block-size: .85rem;
border: none;
border-radius: 50%;
box-shadow: 0 0 .75rem color-mix(in srgb, var(--color-brand) 45%, transparent);
inline-size: .85rem;
margin-block-start: -.3rem; }
.portfolio-player__scrubber::-moz-range-track {
background-color: color-mix(in srgb, var(--color-text-default) 18%, transparent);
border: none;
border-radius: 999px;
block-size: .25rem; }
.portfolio-player__scrubber::-moz-range-thumb {
background-color: var(--color-brand);
block-size: .85rem;
border: none;
border-radius: 50%;
box-shadow: 0 0 .75rem color-mix(in srgb, var(--color-brand) 45%, transparent);
inline-size: .85rem; }
.portfolio-player__times {
column-gap: var(--spacing-s);
display: flex;
font-size: var(--font-size-xs);
font-variant-numeric: tabular-nums;
opacity: .9;
white-space: nowrap; }
[data-portfolio-page-audio] {
display: none; }
@keyframes portfolio-item-gradient-right {
0%, 100% {
opacity: .12; }
45% {
opacity: .56; }
70% {
opacity: .28; }
}
@keyframes portfolio-item-gradient-left {
0%, 100% {
opacity: .08; }
35% {
opacity: .4; }
68% {
opacity: .2; }
}
.item-portfolio {
border-block-end: var(--border-width-l) solid var(--color-border);
margin-block-end: var(--spacing-l);
padding-block-end: var(--spacing-r); }
.item-portfolio img {
border: var(--border-width-r) solid var(--color-background-default);
scale: 1;
transition: all var(--animate-duration-faster) var(--animate-function); }
.item-portfolio:hover img {
border-color: var(--color-brand);
box-shadow:
0 0 3rem color-mix(in srgb, var(--color-brand) 56%, transparent),
0 0 6rem color-mix(in srgb, var(--color-accent) 32%, transparent);
scale: var(--scale-up); }
.portfolio-media {
overflow: hidden;
position: relative;
transition: box-shadow var(--animate-duration-fast) ease; }
.portfolio-media img {
margin-block-end: -5px !important; }
body.body-portfolio-item.is-audio-playing .portfolio-media {
animation: portfolio-media-shadow 8.5s ease-in-out infinite .4s; }
@keyframes portfolio-media-shadow {
0%, 100% {
box-shadow:
0 0 4rem color-mix(in srgb, var(--color-brand) 34%, transparent),
0 0 8rem color-mix(in srgb, var(--color-accent) 20%, transparent); }
42% {
box-shadow:
0 0 4.5rem color-mix(in srgb, var(--color-accent) 40%, transparent),
0 0 9rem color-mix(in srgb, var(--color-brand) 24%, transparent); }
70% {
box-shadow:
0 0 5rem color-mix(in srgb, var(--color-accent) 32%, transparent),
0 0 10rem color-mix(in srgb, var(--color-brand) 18%, transparent); }
}
[data-portfolio-filters] {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-s);
margin-block-end: var(--spacing-r); }
[data-portfolio-filters] [data-filter],
[data-page-action] {
background-color: transparent;
border: var(--border-width-r) solid var(--color-text-default);
color: var(--color-text-default);
cursor: pointer;
font: inherit;
padding: var(--spacing-s) var(--spacing-r); }
[data-portfolio-filters] [data-filter] {
text-decoration: none; }
[data-portfolio-filters] [data-filter][aria-current="page"] {
background-color: transparent;
border-color: var(--color-brand);
color: var(--color-button-text); }
[data-portfolio-results] {
text-transform: uppercase; }
[data-page-action] + [data-page-action] {
margin-inline-start: var(--spacing-s); }
[data-page-action][disabled] {
cursor: not-allowed;
opacity: .5; }