/* Hand-written styles for CMS-generated work pages. Reuses the site's existing color tokens/fonts (loaded via the shared Framer style blocks in ) but with plain, dependency-free CSS — no Framer runtime required for these rules to apply. */ .cms-main { background: rgb(15, 15, 15); color: #eee; padding-top: 96px; } .cms-hero { max-width: 1200px; margin: 0 auto; padding: 24px; } .cms-hero__back { display: inline-block; margin-bottom: 24px; color: #fff; text-decoration: none; border-bottom: 1px solid rgb(247, 247, 247); font-size: 14px; } .cms-hero__title { margin: 0 0 24px; font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: clamp(32px, 6vw, 64px); font-weight: 500; line-height: 1.05; color: #fff; } .cms-hero__image { width: 100%; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: rgb(29, 29, 29); } .cms-hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Gallery: pure CSS scroll-snap carousel, no JS required for core function */ .cms-gallery { max-width: 1200px; margin: 32px auto 0; padding: 0 24px; } .cms-gallery__track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; list-style: none; margin: 0; padding: 0 0 8px; scrollbar-width: thin; } .cms-gallery__item { flex-shrink: 0; width: min(720px, 85vw); aspect-ratio: 16 / 10; scroll-snap-align: center; border-radius: 4px; overflow: hidden; background: rgb(29, 29, 29); } .cms-gallery__item img, .cms-gallery__item video { width: 100%; height: 100%; object-fit: cover; display: block; } .cms-gallery__nav { display: flex; gap: 8px; margin-top: 12px; } .cms-gallery__nav button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(36, 36, 36); background: rgb(29, 29, 29); color: #fff; cursor: pointer; font-size: 16px; line-height: 1; } .cms-gallery__nav button:hover { background: rgb(51, 51, 51); } /* Meta / text content */ .cms-meta { max-width: 1200px; margin: 64px auto 0; padding: 0 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } @media (max-width: 809px) { .cms-meta { grid-template-columns: 1fr; gap: 24px; } .cms-gallery__item { width: 90vw; } } .cms-meta__label { font-family: "PT Mono", monospace; font-size: 13px; color: #999; text-transform: uppercase; margin: 0 0 8px; } .cms-meta__value { font-family: "Switzer", "Switzer Placeholder", sans-serif; font-size: 15px; line-height: 1.4; color: #eee; margin: 0; } .cms-meta__value a { color: #fff; } .cms-project-overview { max-width: 800px; margin: 64px auto 0; padding: 0 24px 96px; font-family: "Switzer", "Switzer Placeholder", sans-serif; font-size: 17px; line-height: 1.6; color: #ccc; white-space: pre-wrap; } /* Mobile menu overlay (built from scratch — the original relies on Framer's JS to mount this, which CMS pages intentionally don't load) */ .cms-menu-overlay { position: fixed; inset: 0; background: rgb(15, 15, 15); z-index: 1000; display: none; flex-direction: column; padding: 24px; } .cms-menu-overlay.is-open { display: flex; } .cms-menu-overlay__close { align-self: flex-end; background: none; border: none; color: #fff; font-size: 15px; font-family: "PT Mono", monospace; text-transform: uppercase; cursor: pointer; } .cms-menu-overlay__links { margin-top: 48px; display: flex; flex-direction: column; gap: 24px; } .cms-menu-overlay__links a { color: #fff; text-decoration: none; font-family: "Switzer", "Switzer Placeholder", sans-serif; font-size: 32px; } /* New-project cards appended to the /work listing */ .cms-card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1200px; margin: 24px auto 0; padding: 0 24px; } @media (max-width: 809px) { .cms-card-grid { grid-template-columns: 1fr; } } .cms-card { display: block; text-decoration: none; color: inherit; } .cms-card__image { width: 100%; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: rgb(29, 29, 29); } .cms-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .cms-card:hover .cms-card__image img { transform: scale(1.03); } .cms-card__title { margin: 16px 0 4px; font-family: "Inter Display", "Inter Display Placeholder", sans-serif; font-size: 22px; color: #fff; } .cms-card__year { font-family: "PT Mono", monospace; font-size: 13px; color: #999; }