.memento-ui {
--color-ink: #0c0c0c;
--color-paper: #c4beb4;
--color-paper-soft: #f8f1e7;
--color-ember: #f3c17a;
--color-cursor-blend: #d0cac0;
--font-body: "Archivo", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-display: "Archivo Black", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--font-accent: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
--site-nav-height: 52px;
--site-nav-inset-top: env(safe-area-inset-top, 0px);
--site-nav-total-height: calc(var(--site-nav-height) + var(--site-nav-inset-top));
--site-gutter: 80px;
}
@media (max-width: 1024px) {
.memento-ui {
--site-nav-height: 48px;
--site-gutter: 48px;
}
}
@media (max-width: 768px) {
.memento-ui {
--site-gutter: 24px;
}
}
@media (max-width: 480px) {
.memento-ui {
--site-nav-height: 44px;
}
}
.memento-ui .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
} .memento-ui .site-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1200;
box-sizing: border-box;
height: var(--site-nav-total-height);
padding-top: var(--site-nav-inset-top);
overflow: visible;
background-color: transparent;
pointer-events: none;
border-bottom: 1px solid transparent;
transition: background-color 220ms ease, border-color 220ms ease;
--nav-gutter: var(--site-gutter);
--nav-initial-offset: 50px;
--nav-anchored-offset: 0px;
--nav-offset: var(--nav-initial-offset);
--nav-logo-echo-reserve: 40px;
}
.memento-ui .site-nav[data-menu-open] {
--nav-offset: var(--nav-anchored-offset);
background-color: var(--color-ink);
border-bottom-color: rgba(196, 190, 180, 0.25);
}
.memento-ui .site-nav[data-anchored] {
--nav-offset: var(--nav-anchored-offset);
background-color: var(--color-ink);
border-bottom-color: rgba(196, 190, 180, 0.25);
}
@media (prefers-reduced-motion: reduce) {
.memento-ui .site-nav {
transition: none;
}
.memento-ui .site-nav__row {
transition: none;
}
}
@media (max-width: 1024px) {
.memento-ui .site-nav {
--nav-initial-offset: 20px;
}
}
@media (max-width: 768px) {
.memento-ui .site-nav {
--nav-initial-offset: 30px;
}
}
@media (max-width: 480px) {
.memento-ui .site-nav {
--nav-initial-offset: 20px;
}
}
.memento-ui .site-nav__row {
position: relative;
z-index: 2;
display: flex;
justify-content: space-between;
align-items: center;
height: var(--site-nav-height);
padding: 0 var(--nav-gutter);
transform: translateY(var(--nav-offset));
transition: transform 220ms ease;
pointer-events: auto;
}
.memento-ui .site-nav[data-menu-open] .site-nav__row,
.memento-ui .site-nav[data-anchored] .site-nav__row {
will-change: transform;
}
.memento-ui .site-nav__actions {
display: flex;
align-items: center;
gap: 16px;
transition: opacity 220ms ease;
}
.memento-ui .site-nav[data-anchored][data-logo-echo-active] .site-nav__actions {
will-change: opacity;
opacity: 0;
pointer-events: none;
transition-delay: var(--nav-actions-fade-delay, 0ms);
}
.memento-ui .site-nav__brand {
position: relative;
display: flex;
align-items: center;
flex: 1 1 auto;
min-width: 0;
height: 100%;
overflow: visible;
}
.memento-ui .site-nav__lang-switch {
font-family: "Archivo", var(--font-body);
font-size: 14px;
font-weight: 400;
letter-spacing: 0.4em;
text-transform: uppercase;
color: rgba(196, 190, 180, 0.7);
text-decoration: none;
transition: color 0.2s ease, opacity 0.2s ease;
}
.memento-ui .site-nav__lang-switch:hover {
color: #c4beb4;
}
.memento-ui .site-nav__lang-switch:focus-visible {
outline: 2px solid rgba(196, 190, 180, 0.8);
outline-offset: 6px;
}
.memento-ui .site-nav[data-primary-inversion="difference"]:not([data-anchored]):not([data-menu-open]) {
mix-blend-mode: difference;
color: var(--color-cursor-blend);
}
.memento-ui .site-nav[data-primary-inversion="exclusion"]:not([data-anchored]):not([data-menu-open]) {
mix-blend-mode: exclusion;
color: var(--color-cursor-blend);
}
.memento-ui .site-nav[data-primary-inversion]:not([data-anchored]):not([data-menu-open]) .site-nav__lang-switch {
color: inherit;
opacity: 0.85;
}
.memento-ui .site-nav[data-primary-inversion]:not([data-anchored]):not([data-menu-open]) .site-nav__lang-switch:hover {
color: inherit;
opacity: 1;
}
.memento-ui .site-nav[data-primary-inversion]:not([data-anchored]):not([data-menu-open]) .site-nav__lang-switch:focus-visible {
outline-color: currentColor;
}
.memento-ui .site-nav[data-primary-inversion]:not([data-anchored]):not([data-menu-open]) .site-nav__hamburger:focus-visible {
outline-color: currentColor;
}
.memento-ui .site-nav__hamburger {
display: flex;
width: 32px;
height: 24px;
flex-direction: column;
justify-content: space-between;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
}
.memento-ui .site-nav__hamburger span {
display: block;
height: 2px;
width: 100%;
background: #c4beb4;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.memento-ui .site-nav[data-primary-inversion]:not([data-anchored]):not([data-menu-open]) .site-nav__hamburger span {
background: currentColor;
}
.memento-ui .site-nav[data-menu-open] .site-nav__hamburger span:nth-child(1) {
transform: translateY(11px) rotate(45deg);
}
.memento-ui .site-nav[data-menu-open] .site-nav__hamburger span:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.memento-ui .site-nav[data-menu-open] .site-nav__hamburger span:nth-child(3) {
transform: translateY(-11px) rotate(-45deg);
}
.memento-ui .site-nav__hamburger:hover span {
opacity: 0.7;
}
.memento-ui .site-nav[data-menu-open] .site-nav__hamburger:hover span {
opacity: 1;
}
.memento-ui .site-nav__hamburger:focus-visible {
outline: 2px solid rgba(196, 190, 180, 0.8);
outline-offset: 8px;
}
.memento-ui .site-nav__logo {
display: inline-flex;
align-items: center;
height: 100%;
position: relative;
z-index: 1;
}
.memento-ui .site-nav__logo img {
height: 32px;
width: auto;
object-fit: contain;
}
.memento-ui .site-nav__logo-echo {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.memento-ui .site-nav__logo-echo .site-nav__logo-echo-item {
position: absolute;
left: 0;
top: 50%;
opacity: 0;
transform: translate3d(calc(var(--echo-x, 0px) + var(--echo-entry-shift, -8px)), -50%, 0) scale(0.985);
transition: opacity 160ms ease, transform 240ms ease;
}
.memento-ui .site-nav__logo-echo .site-nav__logo-echo-item img {
height: 32px;
width: auto;
object-fit: contain;
}
.memento-ui .site-nav[data-anchored] .site-nav__logo:is(:hover, :focus-visible) ~ .site-nav__logo-echo .site-nav__logo-echo-item {
will-change: transform, opacity;
opacity: var(--echo-opacity, 0.55);
transform: translate3d(var(--echo-x, 0px), -50%, 0) scale(1);
transition-delay: var(--echo-delay, 0ms);
}
@media (max-width: 1024px) {
.memento-ui .site-nav__logo img {
height: 26px;
}
.memento-ui .site-nav__logo-echo .site-nav__logo-echo-item img {
height: 26px;
}
}
@media (max-width: 480px) {
.memento-ui .site-nav__logo img {
height: 22px;
}
.memento-ui .site-nav__logo-echo .site-nav__logo-echo-item img {
height: 22px;
}
}
@media (hover: none), (pointer: coarse) {
.memento-ui .site-nav__logo-echo {
display: none;
}
}
.memento-ui .site-nav__menu {
position: fixed;
inset: 0;
z-index: 1;
display: grid;
place-items: center;
box-sizing: border-box;
background-color: var(--color-ink);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 320ms ease, visibility 0ms linear 320ms;
padding-top: var(--site-nav-inset-top);
}
.memento-ui .site-nav[data-menu-open] .site-nav__menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 320ms ease;
}
.memento-ui .site-nav__menu-nav {
pointer-events: auto;
}
.memento-ui .site-nav__menu-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 26px;
text-align: center;
}
.memento-ui .site-nav__menu-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: clamp(2.2rem, 6.5vw, 4.5rem);
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(196, 190, 180, 0.92);
text-decoration: none;
transition: color 1000ms ease, opacity 260ms ease, transform 260ms ease;
}
.memento-ui .site-nav__menu-link:hover {
will-change: transform, opacity;
color: #ccff00;
transform: translateY(-1px);
}
.memento-ui .site-nav__menu-link[aria-current] {
color: #ccff00;
}
.memento-ui .site-nav__menu-link:focus-visible {
outline: 2px solid rgba(204, 255, 0, 0.85);
outline-offset: 10px;
}
@media (prefers-reduced-motion: reduce) {
.memento-ui .site-nav__menu,
.memento-ui .site-nav__menu-link,
.memento-ui .site-nav__hamburger span,
.memento-ui .site-nav__logo,
.memento-ui .site-nav__logo-echo .site-nav__logo-echo-item {
transition: none !important;
}
.memento-ui .site-nav__logo-echo {
display: none;
}
}
html[data-site-nav-menu-open],
html[data-site-nav-menu-open] body {
overflow: hidden;
} html.hero-scroll-lock,
body.hero-scroll-lock {
overflow: hidden;
height: 100%;
overscroll-behavior: none;
}
body.hero-scroll-lock {
touch-action: none;
}
html.hero-scroll-lock .memento-ui .hero-fluid,
body.hero-scroll-lock .memento-ui .hero-fluid {
touch-action: none;
}
.memento-ui .hero-fluid {
position: relative;
width: 100%;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
overflow: hidden;
background-color: #0c0c0c;
color: #c4beb4;
perspective: 600px;
--hero-top-offset: 50px;
--hero-top-gutter: 100px;
--hero-mid-gutter: 24px;
--hero-bottom-offset: 50px;
--hero-bottom-gutter: 100px;
}
@media (max-width: 1024px) {
.memento-ui .hero-fluid {
--hero-top-offset: 20px;
--hero-top-gutter: 60px;
--hero-mid-gutter: 20px;
--hero-bottom-offset: 40px;
--hero-bottom-gutter: 60px;
}
}
@media (max-width: 768px) {
.memento-ui .hero-fluid {
--hero-top-offset: 30px;
--hero-top-gutter: 40px;
--hero-mid-gutter: 16px;
--hero-bottom-offset: 50px;
--hero-bottom-gutter: 40px;
}
}
@media (max-width: 480px) {
.memento-ui .hero-fluid {
--hero-top-offset: 20px;
--hero-top-gutter: 40px;
--hero-mid-gutter: 14px;
--hero-bottom-offset: 40px;
--hero-bottom-gutter: 30px;
}
}
.memento-ui .hero-reveal-overlay {
position: absolute;
inset: 0;
z-index: 100;
overflow: hidden;
pointer-events: none;
}
.memento-ui .hero-reveal-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.memento-ui .hero-reveal-triangle {
fill: #c4beb4;
stroke: #c4beb4;
stroke-width: 1px;
}
.memento-ui .hero-fluid-wrapper {
position: absolute;
inset: 0;
z-index: 1;
isolation: isolate;
}
.memento-ui .hero-fluid-canvas {
width: 100%;
height: 100%;
}
.memento-ui .hero-cursor-circle {
--cursor-size: 80px;
position: absolute;
top: 0;
left: 0;
width: var(--cursor-size);
height: var(--cursor-size);
border-radius: 50%;
background-color: var(--color-cursor-blend);
mix-blend-mode: difference;
opacity: 0;
pointer-events: none;
z-index: 1002;
}
.memento-ui .hero-cursor-circle.is-animating {
will-change: transform;
}
@media (max-width: 1024px) {
.memento-ui .hero-cursor-circle {
--cursor-size: 50px;
}
}
@media (max-width: 768px) {
.memento-ui .hero-cursor-circle {
display: none;
}
}
.memento-ui .hero-mid-zone {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--hero-mid-gutter);
z-index: 10;
pointer-events: none;
text-align: center;
}
.memento-ui .hero-copy {
width: 100%;
max-width: none;
margin: 0 auto;
}
.memento-ui .hero-title {
margin: 0;
display: inline-block;
font-family: "Archivo Black", var(--font-display);
font-size: calc(clamp(3.25rem, 9vw, 8.75rem) * var(--hero-title-scale, 1));
line-height: 0.95;
letter-spacing: -0.06em;
transform-origin: 50% 50%;
}
.memento-ui .hero-title.is-animating {
will-change: transform;
}
.memento-ui .hero-title-line {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 0.22em;
}
.memento-ui .hero-title-line + .hero-title-line {
margin-top: 0.28em;
}
.memento-ui .hero-title-word {
display: inline-block;
transform-origin: 50% 50%;
}
.memento-ui .hero-title-word-inner {
display: inline-block;
transform-origin: 50% 50%;
}
.memento-ui .hero-title-word.is-empty {
display: none;
}
.memento-ui .hero-title-word.is-animating {
will-change: transform;
}
.memento-ui .hero-title-word-inner.is-animating {
will-change: transform;
}
.memento-ui .hero-title-line--outline,
.memento-ui .hero-title-word--outline {
color: transparent;
-webkit-text-stroke: 1px rgba(196, 190, 180, 0.95);
text-stroke: 1px rgba(196, 190, 180, 0.95);
}
.memento-ui .hero-title-line--solid,
.memento-ui .hero-title-word--solid {
color: #c4beb4;
}
@media (max-width: 768px) {
.memento-ui .hero-title {
letter-spacing: -0.04em;
}
}
@media (max-width: 480px) {
.memento-ui .hero-title {
font-size: calc(clamp(2.6rem, 12vw, 4.2rem) * var(--hero-title-scale, 1));
letter-spacing: -0.02em;
}
}
.memento-ui .hero-scroll-cta {
position: absolute;
left: 50%;
bottom: calc(var(--hero-bottom-offset) - 6px);
transform: translateX(-50%);
z-index: 12;
display: none;
pointer-events: auto;
}
.memento-ui .hero-scroll-button {
border: 1px solid rgba(196, 190, 180, 0.6);
background: rgba(12, 12, 12, 0.5);
color: #c4beb4;
font-family: "Archivo", var(--font-body);
font-size: 0.9rem;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 0.95rem 2.4rem;
border-radius: 999px;
width: min(78vw, 320px);
box-shadow: 0 16px 32px rgba(0, 0, 0, 0.28);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.memento-ui .hero-scroll-button:active {
transform: translateY(2px);
}
@media (max-width: 768px) {
.memento-ui .hero-scroll-cta {
display: flex;
justify-content: center;
}
} .memento-ui .marquee-strip {
border-top: 2px solid var(--color-ink);
border-bottom: 2px solid var(--color-ink);
background: var(--color-paper);
overflow: hidden;
}
.memento-ui .marquee {
overflow: hidden;
white-space: nowrap;
}
.memento-ui .marquee__track {
display: flex;
width: max-content;
padding: 0.1rem 0;
font-family: "Archivo Black", var(--font-display);
font-size: 22px;
line-height: 19.2px;
font-weight: 400;
letter-spacing: -1px;
text-transform: uppercase;
animation: marquee var(--marquee-duration, 8s) linear infinite;
will-change: transform;
--marquee-gap: 10px;
}
.memento-ui .marquee__content {
display: flex;
flex-shrink: 0;
gap: var(--marquee-gap);
padding-right: var(--marquee-gap);
}
.memento-ui .marquee__content span:nth-child(odd) {
color: #deebc8;
}
.memento-ui .marquee__content span:nth-child(even) {
color: #ccff00;
} .memento-ui .hero-note {
position: relative;
width: 100%;
min-height: 100vh;
background: var(--color-ink);
color: var(--color-paper);
}
.memento-ui .hero-note__inner {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: calc(10vh + var(--site-nav-total-height)) var(--site-gutter);
text-align: center;
box-sizing: border-box;
}
.memento-ui .hero-note__text {
margin: 0;
max-width: 72ch;
font-family: var(--font-body);
font-size: clamp(1.3rem, 2.4vw, 2.2rem);
line-height: 1.55;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(196, 190, 180, 0.78);
}
@media (max-width: 768px) {
.memento-ui .hero-note__text {
max-width: 60ch;
font-size: clamp(1.05rem, 4vw, 1.5rem);
letter-spacing: 0.05em;
}
}
@media (max-width: 480px) {
.memento-ui .hero-note__text {
font-size: clamp(1rem, 5.2vw, 1.35rem);
line-height: 1.5;
}
} .memento-ui .inversion-wrapper {
position: relative;
width: 100vw;
min-height: 100vh;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow: hidden;
isolation: isolate;
background: var(--color-paper);
color: var(--color-ink);
--circle-radius: 0px;
--circle-cx: 50%;
--circle-cy: 50%;
}
.memento-ui .inversion-content {
box-sizing: border-box;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: calc(10vh + var(--site-nav-total-height)) var(--site-gutter) 10vh;
position: relative;
z-index: 2;
}
.memento-ui .text-block {
display: flex;
flex-direction: column;
text-align: center;
font-family: var(--font-display);
font-size: clamp(2.8rem, 7vw, 4.6rem);
line-height: 0.85;
letter-spacing: -5px;
color: var(--color-ink);
text-transform: uppercase;
gap: 0.8rem;
}
.memento-ui .find-more-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
align-self: center;
margin-top: 1.5rem;
font-size: 0.95rem;
letter-spacing: 0.25rem;
color: var(--color-ink);
text-decoration: none;
position: relative;
z-index: 1;
isolation: isolate;
}
.memento-ui .find-more-link:focus-visible {
outline: 2px solid var(--color-ink);
outline-offset: 4px;
}
.memento-ui .find-more-icon {
width: 1.1em;
height: 1.1em;
flex-shrink: 0;
}
.memento-ui .inversion-overlay {
position: absolute;
inset: 0;
pointer-events: none;
background: var(--color-ink);
clip-path: circle(var(--circle-radius, 0px) at var(--circle-cx, 50%) var(--circle-cy, 50%));
-webkit-clip-path: circle(var(--circle-radius, 0px) at var(--circle-cx, 50%) var(--circle-cy, 50%));
z-index: 1;
opacity: 0;
transition: opacity 160ms ease;
}
.memento-ui .invert-text-layer {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: calc(10vh + var(--site-nav-total-height)) var(--site-gutter) 10vh;
pointer-events: none;
clip-path: circle(var(--circle-radius, 0px) at var(--circle-cx, 50%) var(--circle-cy, 50%));
-webkit-clip-path: circle(var(--circle-radius, 0px) at var(--circle-cx, 50%) var(--circle-cy, 50%));
opacity: 0;
transition: opacity 160ms ease;
z-index: 3;
}
.memento-ui .invert-text-layer .text-block {
color: var(--color-paper);
}
.memento-ui .invert-text-layer .find-more-link {
color: var(--color-paper);
}
@media (prefers-reduced-motion: reduce) {
.memento-ui .inversion-overlay,
.memento-ui .invert-text-layer {
transition: none;
}
}
@media (max-width: 768px) {
.memento-ui .text-block {
font-size: clamp(2.2rem, 8vw, 3.8rem);
letter-spacing: -3px;
line-height: 0.9;
gap: 0.6rem;
}
.memento-ui .find-more-link {
font-size: 0.85rem;
letter-spacing: 0.2rem;
}
}
@media (max-width: 480px) {
.memento-ui .text-block {
font-size: clamp(1.8rem, 10vw, 2.6rem);
letter-spacing: -2px;
line-height: 0.92;
gap: 0.5rem;
}
.memento-ui .find-more-link {
font-size: 0.75rem;
letter-spacing: 0.15rem;
margin-top: 1.2rem;
}
} .memento-ui .selected-work {
position: relative;
width: 100%;
scroll-margin-top: var(--site-nav-total-height);
}
.memento-ui .selected-work__pin {
position: relative;
width: 100%;
height: 100vh;
box-sizing: border-box;
padding-top: var(--site-nav-total-height);
display: flex;
flex-direction: column;
overflow: hidden;
background-color: var(--color-ink);
contain: layout style;
}
.memento-ui .selected-work__pin.is-pinned {
z-index: 10;
will-change: transform;
}
.memento-ui .selected-work__pin.is-at-end {
pointer-events: auto;
}
.memento-ui .selected-work__spacing {
flex-shrink: 0;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--site-gutter);
}
.memento-ui .selected-work__spacing--top {
z-index: 5;
}
.memento-ui .selected-work__spacing--bottom {
z-index: 5;
}
.memento-ui .selected-work__progress {
width: 100%;
max-width: 200px;
height: 2px;
background: rgba(242, 233, 220, 0.15);
border-radius: 2px;
overflow: hidden;
}
.memento-ui .selected-work__progress-bar {
width: 100%;
height: 100%;
background: linear-gradient(90deg, #ccff00, #deebc8);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.1s ease-out;
}
.memento-ui .selected-work__track-wrapper {
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
padding: 0 var(--site-gutter);
}
.memento-ui .selected-work__track {
display: flex;
gap: 2rem;
height: 100%;
align-items: center;
contain: layout;
}
.memento-ui .selected-work__track.is-animating {
will-change: transform;
}
.memento-ui .work-card {
display: block;
flex-shrink: 0;
height: 100%;
aspect-ratio: 5 / 4;
cursor: pointer;
text-decoration: none;
color: inherit;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}
.memento-ui .work-card:hover,
.memento-ui .work-card:focus-within {
will-change: transform, opacity;
}
.memento-ui .work-card:focus-visible {
outline: 2px solid rgba(204, 255, 0, 0.85);
outline-offset: 6px;
}
.memento-ui .work-card__image {
position: relative;
width: 100%;
height: 100%;
border-radius: 0;
overflow: hidden;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.memento-ui .work-card__media {
position: absolute;
inset: 0;
z-index: 0;
}
.memento-ui .work-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
}
.memento-ui .work-card__image::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(10, 10, 10, 0.85) 100%);
opacity: 1;
transition: opacity 0.4s ease;
z-index: 1;
}
.memento-ui .work-card:hover .work-card__image::before {
opacity: 0.95;
}
.memento-ui .work-card__number {
position: absolute;
top: 1rem;
left: 1rem;
font-family: var(--font-display);
font-size: 0.85rem;
letter-spacing: 0.15em;
color: rgba(242, 233, 220, 0.7);
background: rgba(10, 10, 10, 0.5);
backdrop-filter: blur(8px);
padding: 0.4rem 0.6rem;
border-radius: 2px;
z-index: 2;
}
.memento-ui .work-card__content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1.5rem;
z-index: 2;
}
.memento-ui .work-card__type {
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--color-ember);
}
.memento-ui .work-card__title {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 600;
letter-spacing: 0.01em;
color: var(--color-paper);
margin: 0;
transition: color 0.3s ease;
}
.memento-ui .work-card:hover .work-card__title {
color: var(--color-ember);
}
.memento-ui .work-card__subtitle {
font-size: 0.875rem;
line-height: 1.5;
color: rgba(242, 233, 220, 0.75);
margin: 0;
}
@media (max-width: 768px) {
.memento-ui .selected-work__progress {
max-width: 100%;
width: 100%;
}
.memento-ui .selected-work__track {
gap: 1.25rem;
}
}
@media (max-width: 480px) {
.memento-ui .selected-work__spacing {
height: 2rem;
}
.memento-ui .selected-work__track {
gap: 1rem;
}
.memento-ui .work-card__content {
padding: 1rem;
gap: 0.3rem;
}
.memento-ui .work-card__type {
font-size: 0.7rem;
letter-spacing: 0.15em;
}
.memento-ui .work-card__title {
font-size: 1.25rem;
}
.memento-ui .work-card__subtitle {
font-size: 0.75rem;
}
.memento-ui .work-card__number {
font-size: 0.75rem;
padding: 0.3rem 0.5rem;
}
}
.memento-ui .selected-work.reduced-motion,
.memento-ui .selected-work.native-scroll {
height: auto !important;
}
.memento-ui .selected-work.reduced-motion .selected-work__pin,
.memento-ui .selected-work.native-scroll .selected-work__pin {
position: relative !important;
height: auto !important;
padding: 2rem 0;
}
.memento-ui .selected-work.reduced-motion .selected-work__spacing,
.memento-ui .selected-work.native-scroll .selected-work__spacing {
display: none;
}
.memento-ui .selected-work.reduced-motion .selected-work__track-wrapper,
.memento-ui .selected-work.native-scroll .selected-work__track-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: var(--color-ember) rgba(242, 233, 220, 0.1);
}
.memento-ui .selected-work.reduced-motion .selected-work__track,
.memento-ui .selected-work.native-scroll .selected-work__track {
height: auto;
padding: 2rem 0;
}
.memento-ui .selected-work.reduced-motion .work-card,
.memento-ui .selected-work.native-scroll .work-card {
scroll-snap-align: start;
transform: none !important;
opacity: 1 !important;
height: auto;
width: 680px;
}
.memento-ui .selected-work.reduced-motion .selected-work__progress,
.memento-ui .selected-work.native-scroll .selected-work__progress {
display: none;
}
@supports (scroll-snap-type: x mandatory) {
.memento-ui .selected-work__track-wrapper {
scroll-snap-type: x proximity;
}
.memento-ui .work-card {
scroll-snap-align: center;
}
} .memento-ui .memento-about {
width: 100%;
background: var(--color-paper);
color: var(--color-ink);
}
.memento-ui .memento-about__inner {
padding: 6rem var(--site-gutter);
box-sizing: border-box;
}
.memento-ui .memento-about__copy {
font-family: var(--font-display);
font-size: clamp(2.2rem, 4.5vw, 4.6rem);
line-height: 1.1;
color: var(--color-ink);
text-wrap: balance;
}
.memento-ui .memento-about__line {
margin: 0 0 1.5rem 0;
overflow: hidden;
}
.memento-ui .memento-about__line:last-child {
margin-bottom: 0;
}
@media (max-width: 768px) {
.memento-ui .memento-about__inner {
padding: 5rem var(--site-gutter);
}
} .memento-ui .pillars-section {
position: relative;
overflow: hidden;
background: var(--color-paper);
color: var(--color-ink);
padding: 0 var(--site-gutter) 6rem;
box-sizing: border-box;
}
.memento-ui .pillars-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.memento-ui .pillars-grid {
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
}
.memento-ui .pillar-card {
position: relative;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 2rem;
background: linear-gradient(145deg, #d8d3ca 0%, #ccc7be 100%);
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.memento-ui .pillar-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 40%);
pointer-events: none;
opacity: 0;
transition: opacity 0.4s ease;
}
.memento-ui .pillar-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(12, 12, 12, 0.12), 0 8px 20px rgba(12, 12, 12, 0.08);
}
.memento-ui .pillar-card:hover::before {
opacity: 1;
}
.memento-ui .pillar-number {
position: relative;
width: 3.5rem;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.memento-ui .pillar-number-text {
position: relative;
z-index: 2;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 700;
color: var(--color-ink);
letter-spacing: -0.02em;
}
.memento-ui .pillar-number-ring {
position: absolute;
inset: 0;
border: 2px solid var(--color-ink);
border-radius: 50%;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}
.memento-ui .pillar-card:hover .pillar-number-ring {
transform: scale(1.12);
border-color: #ccff00;
}
.memento-ui .pillar-content {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.memento-ui .pillar-title {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-ink);
line-height: 1.2;
letter-spacing: -0.02em;
transition: color 0.4s ease;
margin: 0;
}
.memento-ui .pillar-card:hover .pillar-title {
color: #1a1a1a;
}
.memento-ui .pillar-body {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.65;
color: rgba(12, 12, 12, 0.75);
margin: 0;
}
.memento-ui .pillar-services {
margin-top: auto;
padding-top: 1.5rem;
border-top: 1px solid rgba(12, 12, 12, 0.1);
}
.memento-ui .pillar-services-label {
font-family: var(--font-accent);
font-size: 0.8rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(12, 12, 12, 0.5);
margin-bottom: 1rem;
}
.memento-ui .pillar-tags-grid {
display: flex;
flex-direction: column;
gap: 0.65rem;
list-style: none;
padding: 0;
margin: 0;
}
.memento-ui .pillar-tag {
display: flex;
align-items: center;
gap: 0.75rem;
opacity: 0;
transform: translateX(-8px);
animation: tag-reveal 0.6s ease forwards;
animation-delay: var(--tag-delay, 0s);
}
.memento-ui .pillar-tag-indicator {
position: relative;
width: 14px;
height: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.memento-ui .pillar-tag-dot {
position: absolute;
width: 6px;
height: 6px;
background: #ccff00;
border-radius: 50%;
transition: opacity 0.3s ease, transform 0.3s ease;
}
.memento-ui .pillar-tag-icon {
position: absolute;
color: var(--color-ink);
opacity: 0;
transform: scale(0.5);
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.memento-ui .pillar-tag:hover .pillar-tag-dot {
opacity: 0;
transform: scale(0);
}
.memento-ui .pillar-tag:hover .pillar-tag-icon {
opacity: 1;
transform: scale(1);
}
.memento-ui .pillar-tag-text {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--color-ink);
transition: color 0.3s ease, transform 0.3s ease;
}
.memento-ui .pillar-tag:hover .pillar-tag-text {
color: #1a1a1a;
transform: translateX(4px);
}
.memento-ui .pillar-accent-line {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #ccff00 0%, #deebc8 100%);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.memento-ui .pillar-card:hover .pillar-accent-line {
transform: scaleX(1);
}
@media (min-width: 1024px) {
.memento-ui .pillar-card {
padding: 2.5rem;
}
.memento-ui .pillar-title {
font-size: 1.75rem;
}
.memento-ui .pillar-number {
width: 4rem;
height: 4rem;
}
.memento-ui .pillar-number-text {
font-size: 1.4rem;
}
}
@media (max-width: 480px) {
.memento-ui .pillar-card {
padding: 1.5rem;
gap: 1.25rem;
}
.memento-ui .pillar-number {
width: 2.75rem;
height: 2.75rem;
}
.memento-ui .pillar-number-text {
font-size: 1rem;
}
.memento-ui .pillar-title {
font-size: 1.25rem;
}
.memento-ui .pillar-body {
font-size: 0.875rem;
line-height: 1.6;
}
.memento-ui .pillar-services {
padding-top: 1rem;
}
.memento-ui .pillar-services-label {
font-size: 0.7rem;
margin-bottom: 0.75rem;
}
.memento-ui .pillar-tag-text {
font-size: 0.8rem;
}
}
@media (prefers-reduced-motion: reduce) {
.memento-ui .pillar-card,
.memento-ui .pillar-number-ring,
.memento-ui .pillar-accent-line,
.memento-ui .pillar-tag,
.memento-ui .pillar-tag-dot,
.memento-ui .pillar-tag-icon {
transition: none !important;
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
.memento-ui .pillar-tag-dot {
opacity: 0 !important;
}
.memento-ui .pillar-tag-icon {
opacity: 1 !important;
}
}
.memento-ui .reveal {
opacity: 0;
transform: translateY(12px);
animation: fade-up 0.9s ease forwards;
animation-delay: var(--delay, 0s);
} .memento-ui .footer-contact {
--cursor-size: 350px;
position: relative;
height: 100vh;
min-height: 100vh;
overflow: hidden;
background: var(--color-ink);
box-sizing: border-box;
padding-top: var(--site-nav-total-height);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--color-paper);
}
.memento-ui .footer-cursor-circle {
pointer-events: none;
position: absolute;
z-index: 50;
width: var(--cursor-size);
height: var(--cursor-size);
border-radius: 50%;
background-color: var(--color-cursor-blend);
mix-blend-mode: difference;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
@media (max-width: 768px) {
.memento-ui .footer-cursor-circle {
display: none;
}
}
.memento-ui .footer-headline-wrapper {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 var(--site-gutter);
box-sizing: border-box;
}
.memento-ui .footer-headline {
pointer-events: none;
user-select: none;
font-family: var(--font-display);
font-size: clamp(3rem, 15vw, 10rem);
text-transform: uppercase;
line-height: 0.9;
letter-spacing: -0.02em;
text-align: center;
margin: 0;
color: var(--color-paper);
}
.memento-ui .footer-links-wrapper {
position: relative;
z-index: 20;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-top: 30vh;
}
.memento-ui .footer-social-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
align-items: center;
}
.memento-ui .footer-legal-links {
position: absolute;
bottom: 1.5rem;
left: 0;
right: 0;
z-index: 20;
display: flex;
justify-content: center;
gap: 1rem;
align-items: center;
padding: 0 var(--site-gutter);
box-sizing: border-box;
}
.memento-ui .footer-divider {
color: rgba(196, 190, 180, 0.3);
}
.memento-ui .barrel-roll-link {
position: relative;
display: inline-block;
font-family: "Archivo", var(--font-body);
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--color-paper);
text-decoration: none;
overflow: hidden;
padding: 0.25em 0;
}
.memento-ui .footer-legal-link {
font-size: 0.75rem;
}
.memento-ui .barrel-roll-text {
display: inline-block;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.memento-ui .barrel-roll-link::after {
content: attr(data-text);
position: absolute;
left: 0;
top: 0;
padding: 0.25em 0;
transform: translateY(100%) rotateX(-90deg);
transform-origin: top center;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.memento-ui .barrel-roll-link:hover .barrel-roll-text {
transform: translateY(-100%) rotateX(90deg);
}
.memento-ui .barrel-roll-link:hover::after {
transform: translateY(0) rotateX(0deg);
}
.memento-ui .barrel-roll-link:focus-visible {
outline: 2px solid var(--color-paper);
outline-offset: 4px;
}
@media (max-width: 1024px) {
.memento-ui .footer-headline {
font-size: clamp(2.5rem, 14vw, 8rem);
}
}
@media (max-width: 768px) {
.memento-ui .footer-headline {
font-size: clamp(2rem, 16vw, 5rem);
}
.memento-ui .barrel-roll-link {
font-size: 0.75rem;
letter-spacing: 0.2em;
}
}
@media (max-width: 480px) {
.memento-ui .footer-headline {
font-size: clamp(1.8rem, 15vw, 3.5rem);
line-height: 1;
}
.memento-ui .barrel-roll-link {
font-size: 0.7rem;
letter-spacing: 0.15em;
}
.memento-ui .footer-links-wrapper {
padding-top: 25vh;
gap: 1.5rem;
}
.memento-ui .footer-social-links {
flex-direction: column;
gap: 0.75rem;
}
}
@keyframes marquee {
from {
transform: translateX(0);
}
to {
transform: translateX(calc(-1 * var(--marquee-distance, 50%)));
}
}
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes tag-reveal {
to {
opacity: 1;
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.memento-ui .marquee__track,
.memento-ui .reveal {
animation: none !important;
}
.memento-ui .marquee__content ~ .marquee__content {
display: none;
}
}