/* ============================================================================= CHRISTOPHER STOUDT — global styles Monochrome, bold, grid-driven. No color by design. ============================================================================= */ :root { --bg: #ffffff; --fg: #0a0a0a; --muted: #6f6f6f; --line: #e6e6e6; --tile: #1a1a1a; --maxw: 1600px; --gutter: clamp(16px, 4vw, 40px); --nav-h: 58px; /* detail pages sit tighter under the nav than the section default, to leave the 16:9 player as much height as possible before the fold */ --detail-pad: clamp(28px, 4vw, 56px); --ease: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } /* .page-video sets body { background: transparent } for the fixed video layer, so without a colour here anything past the footer — and iOS rubber-band overscroll — falls through to white. */ html { -webkit-text-size-adjust: 100%; background: #0a0a0a; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; line-height: 1.4; letter-spacing: 0.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } ::selection { background: var(--fg); color: var(--bg); } /* ---------- dark theme (applied per-page via ) --- */ .theme-dark { --bg: #0a0a0a; --fg: #ffffff; --muted: #8a8a8a; --line: #262626; } .theme-dark .nav { background: rgba(10, 10, 10, 0.86); border-bottom-color: var(--line); } .theme-dark .project-body p { color: #c9c9c9; } /* ---------- fixed page video background (e.g. About) --------------------- */ .page-video { background: transparent; } /* video-page nav: transparent + blurred so the footage flows through (matches the landing), instead of a solid bar with a hard cutoff line */ .page-video .nav { background: transparent; border-bottom-color: transparent; } /* Feather the see-through blur strip: the element-level backdrop-filter ends in a hard horizontal seam wherever content scrolls beneath the nav. Move the blur onto a ::before that overshoots the bar and mask-fades it out, so blurred → sharp is a gradient instead of a cut line. */ .page-video .nav, .nav.nav--transparent { backdrop-filter: none; -webkit-backdrop-filter: none; } .page-video .nav::before, .nav.nav--transparent::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -22px; z-index: -1; pointer-events: none; backdrop-filter: saturate(130%) blur(3px); -webkit-backdrop-filter: saturate(130%) blur(3px); -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 55%, transparent 100%); } .page-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: #0a0a0a; } .page-bg iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; min-height: 100svh; min-width: 177.78svh; border: 0; pointer-events: none; } /* mobile static background still (used instead of the iframe on touch devices) */ .page-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .page-bg::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, 0.69); /* scrim keeps text readable */ } /* About portrait: sits under the bio text, above the Get in touch chip */ .about-portrait { width: min(340px, 100%); margin-top: 34px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); } /* readability of About content over the darkened video */ .page-video .about-cols p { color: #d2d2d2; } /* ---------- layout helpers ---------------------------------------------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* vertical only — must NOT reset the horizontal gutter inherited from .wrap */ .section { padding-top: clamp(48px, 9vw, 120px); padding-bottom: clamp(48px, 9vw, 120px); } .eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); margin: 0 0 24px; } /* ---------- navigation --------------------------------------------------- */ .nav { position: sticky; top: 0; z-index: 100; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(130%) blur(3px); -webkit-backdrop-filter: saturate(130%) blur(3px); border-bottom: 1px solid var(--line); } .nav.nav--transparent { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; color: #fff; } .brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; } /* header + footer wordmarks, nav links, footer links: a subtle static frost glow (no pulse) */ .brand, .footer-brand, .nav-links a, .footer-links a { text-shadow: 0 0 6px rgba(255,255,255,0.30), 0 0 1px rgba(255,255,255,0.55); transition: text-shadow 0.3s var(--ease), color 0.3s var(--ease); } /* brighten the frost glow on hover (same idea as the contact email) */ .brand:hover, .nav-links a:hover, .footer-brand:hover, .footer-links a:hover { color: #fff; text-shadow: 0 0 9px rgba(255,255,255,0.55), 0 0 2px rgba(255,255,255,0.9); } .nav-links { display: flex; gap: clamp(18px, 3vw, 40px); align-items: center; } .nav-links a { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: inherit; position: relative; padding: 6px 0; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: currentColor; transition: width 0.35s var(--ease); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; } /* FILMS header marquee: six titles, each in its own accent (--fc), between the brand and the nav. Hidden when the header hasn't room. */ .film-strip { display: none; } /* mobile menu film section: hidden except inside the <=640px slide-down */ .nav-films { display: none; } @media (min-width: 1380px) { .film-strip { display: flex; align-items: center; gap: clamp(11px, 1.2vw, 20px); flex: 1; justify-content: center; min-width: 0; padding: 0 clamp(14px, 1.6vw, 28px); } } .film-strip a { display: flex; flex-direction: column; align-items: center; line-height: 1.2; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: var(--fc, #fff); opacity: 0.88; text-shadow: 0 0 7px color-mix(in srgb, var(--fc, #fff) 45%, transparent); transition: opacity 0.3s var(--ease), text-shadow 0.3s var(--ease); } .film-strip a:hover { opacity: 1; text-shadow: 0 0 10px color-mix(in srgb, var(--fc, #fff) 70%, transparent); } .film-strip .nav-divider:first-child { margin-right: clamp(2px, 0.6vw, 10px); } .film-strip .nav-divider:last-child { margin-left: clamp(2px, 0.6vw, 10px); } /* thin divider between Work and the rest of the nav (header + footer) */ .nav-divider { flex: 0 0 auto; width: 2px; height: 15px; background: #fff; align-self: center; } .footer-links .nav-divider { height: 12px; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 13px; } /* ---------- hero / splash ------------------------------------------------ */ .hero { position: relative; height: 100svh; min-height: 520px; overflow: hidden; background: var(--tile); } .hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; background: var(--tile); } .hero video, .hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* full-bleed video-background iframe (YouTube/Vimeo): scale so it always covers */ .hero-frame { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: 56.25vw; /* 16:9 sized by width */ min-height: 100svh; min-width: 177.78svh; /* 16:9 sized by height */ border: 0; pointer-events: none; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.42) 100%); } .hero-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--gutter); color: #fff; } .hero-title { margin: 0 0 0 -0.045em; /* offset the "C" glyph's left bearing so it's flush with the sub + button */ font-weight: 800; letter-spacing: -0.02em; font-size: clamp(20px, 7vw, 116px); line-height: 1; text-transform: uppercase; white-space: nowrap; } .hero-sub { margin: 18px 0 0; max-width: 46ch; font-size: clamp(14px, 1.6vw, 19px); font-weight: 400; opacity: 0.92; } .hero-cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 30px; padding: 13px 28px; border: 1px solid rgba(255, 255, 255, 0.65); color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; transition: background 0.35s var(--ease), color 0.35s var(--ease); } .hero-cta:hover { background: #fff; color: #0a0a0a; } .hero-cta span { transition: transform 0.35s var(--ease); } .hero-cta:hover span { transform: translateX(5px); } .scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.8; animation: bob 2.2s var(--ease) infinite; } @keyframes bob { 0%,100% { transform: translate(-50%, 0);} 50% { transform: translate(-50%, 7px);} } /* ---------- work grid ---------------------------------------------------- */ .grid { display: grid; gap: clamp(8px, 1.4vw, 20px); grid-template-columns: repeat(2, 1fr); } /* One-per-row tiles size themselves to the VIEWPORT HEIGHT: the 16:9 media plus the page header must fit above the fold at any window width, so the column width is derived from the height budget (100vh minus nav + WORK head + card caption), instead of always filling the container. */ .grid--one { grid-template-columns: 1fr; /* height budget reserves a little air below the caption at the fold; the 560px floor guards short viewports (landscape phones, half-height windows) where the height math would collapse the tiles */ max-width: min(100%, max(560px, calc((100vh - 350px) * 1.77778))); /* roomier row gap keeps the NEXT film fully below the fold and gives the full-width tiles cinematic separation while scrolling */ row-gap: clamp(40px, 6vh, 72px); } .grid--five { grid-template-columns: repeat(5, 1fr); gap: clamp(12px, 1.2vw, 18px); max-width: 1280px; margin-left: auto; margin-right: auto; } /* per-category intro above the grid (currently 60SD only): title + one-liner, Webby badges on the right (same convention as 60secdocs.com) */ .grid-intro { margin: 0 0 clamp(24px, 3.2vw, 40px); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .grid-intro-badges { display: flex; gap: clamp(18px, 1.8vw, 28px); } .grid-intro-badges img { width: clamp(60px, 5.5vw, 80px); height: auto; } .grid-intro-title { display: inline-block; position: relative; padding-bottom: 7px; margin: 0 0 12px; font-size: clamp(19px, 1.9vw, 28px); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } /* static 2px rule under the title — same treatment as the nav/card hover underline */ .grid-intro-title::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: currentColor; } /* in-copy link (60 Second Docs → their Instagram): underlined, brightens on hover */ .grid-sub a { text-decoration: underline; text-underline-offset: 3px; transition: color 0.3s var(--ease); } .grid-sub a:hover { color: #fff; } .grid-sub { margin: 0; font-size: clamp(13px, 1.05vw, 15px); color: #c9c9c9; } .grid-sub--wall { max-width: 1280px; margin-left: auto; margin-right: auto; } .grid-intro[hidden] { display: none; } /* 60SD wall mode: captionless contact sheet. The caption stays in the DOM but becomes an overlay that fades in over a bottom scrim on hover — the wall stays pure image until you reach into it. */ .grid--five .card { position: relative; } .grid--five .card-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 34px 12px 10px; background: linear-gradient(to top, rgba(10, 10, 10, 0.85), transparent); opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; } .grid--five .card:hover .card-meta { opacity: 1; } .grid--five .card-title { font-size: 13px; } .grid--five .card-client { display: none; } /* the wall IS the 60SD page — the tag is redundant */ @media (max-width: 720px) { /* collapsed to one column the wall is just the normal grid — captions return */ .grid--five .card-meta { position: static; opacity: 1; background: none; padding: 14px 2px 0; pointer-events: auto; } .grid--five .card-client { display: block; } } @media (max-width: 720px) { .grid, .grid--five { grid-template-columns: 1fr; } } /* ---------- work category filter ---------------------------------------- */ /* sits on the baseline of the WORK title, right side; same title typeface but thin + tracked so it reads as a quiet caption under the headline */ .work-filter { display: flex; flex-wrap: wrap; align-items: baseline; gap: clamp(14px, 2.2vw, 30px); margin: 0; } .work-filter-btn { position: relative; background: none; border: 0; padding: 3px 0; cursor: pointer; font-family: inherit; font-weight: 700; font-size: clamp(13px, 1.15vw, 16px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); transition: color 0.3s var(--ease); } .work-filter-btn::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: currentColor; transition: width 0.35s var(--ease); } .work-filter-btn:hover { color: var(--fg); } .work-filter-btn.is-active { color: var(--fg); } .work-filter-btn:hover::after, .work-filter-btn.is-active::after { width: 100%; } .work-filter-btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; } /* the repeat bar at the end of the grid — needs extra clearance on mobile so it doesn't crowd the last card's title */ .work-filter--end { margin-top: clamp(40px, 6vw, 64px); } /* detail pages: the category bar sits under the prev/next pager */ .work-filter--detail { margin-top: clamp(26px, 4vw, 44px); } /* hidden by the category filter — .card.card--hidden so it outranks the later `.card { display: block }` rule regardless of source order */ .card.card--hidden { display: none; } .card { display: block; position: relative; } .card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--tile); } .card-media video, .card-media img, .card-media iframe { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); } .card-media iframe { position: absolute; inset: 0; border: 0; pointer-events: none; } .card:hover .card-media video, .card:hover .card-media img { transform: scale(1.04); } .card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 2px 0; } .card-title { font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; position: relative; transition: text-shadow 0.3s var(--ease); } /* card title brightens with a frost glow on hover, matching the nav/footer hover */ .card:hover .card-title { text-shadow: 0 0 9px rgba(255,255,255,0.55), 0 0 2px rgba(255,255,255,0.9); } /* hovering anywhere on the card (incl. the video) slides an underline under the title, matching the header nav hover */ .card-title::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: currentColor; } /* underline just appears on hover — no slide in either direction */ .card:hover .card-title::after { width: 100%; } .card-client { font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 720px) { .card-meta { flex-direction: column; gap: 4px; } .card-client { white-space: normal; } } /* ---------- page header -------------------------------------------------- */ /* vertical only — keep .wrap's horizontal gutter (was flush to the edge) */ .page-head { /* WORK sits right under the nav; first grid tile well above the fold */ padding-top: clamp(18px, 2.5vw, 36px); padding-bottom: clamp(14px, 2vw, 24px); display: flex; flex-direction: column; align-items: flex-start; gap: clamp(8px, 1.2vw, 14px); } .page-title { margin: 0; font-weight: 800; text-transform: uppercase; line-height: 0.94; letter-spacing: -0.01em; font-size: clamp(40px, 10vw, 128px); } /* ---------- frozen headlines (Chill Factory) ----------------------------- */ /* Big page headlines get a crisp frost "rime" edge + a slow, subtle breathing frost halo — monochrome, playing on the "chill" theme. */ .hero-title, .page-title, .project-title, .feature-title, .grid-intro-title, .email-huge { -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.5); animation: frost-breathe 6s ease-in-out infinite; } @keyframes frost-breathe { 0%, 100% { text-shadow: 0 0 5px rgba(255,255,255,0.24), 0 0 1px rgba(255,255,255,0.83); } 50% { text-shadow: 0 0 16px rgba(255,255,255,0.47), 0 0 2px rgba(255,255,255,0.9); } } /* the contact email glows harder than the headlines — its own brighter halo */ .email-huge { -webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.65); animation-name: frost-breathe-strong; } @keyframes frost-breathe-strong { 0%, 100% { text-shadow: 0 0 12px rgba(255,255,255,0.41), 0 0 3px rgba(255,255,255,0.9); } 50% { text-shadow: 0 0 33px rgba(255,255,255,0.735), 0 0 5px rgba(255,255,255,1); } } /* About + Work page titles glow a step harder than the other headlines */ .page-title--bright, .hero-title { -webkit-text-stroke: 0.6px rgba(255, 255, 255, 0.65); animation-name: frost-breathe-strong; /* same halo as the contact email */ } /* Work sits on solid black, where the strong halo reads much heavier than the same glow does over About's darkened video. Dial the Work title down so the two pages look matched. (Work is the only bright title on a non-video page.) */ body:not(.page-video) .page-title--bright { -webkit-text-stroke: 0.55px rgba(255, 255, 255, 0.6); animation-name: frost-breathe-work; } @keyframes frost-breathe-work { 0%, 100% { text-shadow: 0 0 10px rgba(255,255,255,0.36), 0 0 3px rgba(255,255,255,0.88); } 50% { text-shadow: 0 0 28px rgba(255,255,255,0.66), 0 0 4px rgba(255,255,255,0.95); } } /* accessibility: hold still (but keep a static frost glow) if motion is off */ @media (prefers-reduced-motion: reduce) { .hero-title, .page-title, .project-title, .feature-title, .grid-intro-title, .email-huge { animation: none; text-shadow: 0 0 7px rgba(255,255,255,0.26), 0 0 1px rgba(255,255,255,0.85); } .email-huge { text-shadow: 0 0 18px rgba(255,255,255,0.5), 0 0 3px rgba(255,255,255,0.95); } .page-title--bright, .hero-title { text-shadow: 0 0 18px rgba(255,255,255,0.5), 0 0 3px rgba(255,255,255,0.95); } } /* ---------- project detail ----------------------------------------------- */ /* tighter than the generic .section so the 16:9 player clears the fold */ #project-root > .section { padding-top: var(--detail-pad); } .back-link { display: inline-block; margin-bottom: 28px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .back-link:hover { color: var(--fg); } .project-hero { /* position:relative is load-bearing: the embed iframe inside is position:absolute and otherwise anchors to the VIEWPORT (full-screen video bug on mobile) */ position: relative; aspect-ratio: 16 / 9; background: var(--tile); overflow: hidden; margin-bottom: clamp(28px, 5vw, 56px); /* Whole player stays above the fold. Cap the WIDTH from the viewport height (not the height) so the box remains a true 16:9 and the embed never letterboxes; on tall or narrow screens the cap doesn't bind and .wrap wins. Chrome = sticky nav + the detail page's top padding + the back-link row. */ max-width: calc((100svh - (var(--nav-h) + var(--detail-pad) + 66px)) * 16 / 9); margin-inline: auto; } .project-hero video, .project-hero img { width: 100%; height: 100%; object-fit: cover; } .project-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(28px, 6vw, 80px); align-items: start; } @media (max-width: 860px) { .project-grid { grid-template-columns: 1fr; gap: 40px; } } .project-title { margin: 0 0 20px; font-weight: 800; text-transform: uppercase; line-height: 0.98; letter-spacing: -0.01em; font-size: clamp(30px, 5vw, 60px); } /* title summary = logline + description, italicized for all work */ .logline { font-size: clamp(18px, 2.2vw, 26px); font-weight: 400; font-style: italic; line-height: 1.3; margin: 0 0 28px; } .project-body p { font-size: 16px; line-height: 1.65; font-style: italic; color: #2a2a2a; margin: 0 0 18px; } .meta-list { border-top: 1px solid var(--line); } .meta-row { display: flex; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); } .meta-row dt { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin: 0; } .meta-row dd { margin: 0; font-size: 14px; text-align: right; font-weight: 500; } .tag-block { margin-top: 34px; } .tag-block h3 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 0 0 12px; } .tag-block ul { list-style: none; margin: 0; padding: 0; } .tag-block li { font-size: 14px; padding: 7px 0; border-bottom: 1px solid var(--line); } /* festival-laurel bullet for the Recognition list (masked to the text colour) */ .tag-block--laurels li { position: relative; padding-left: 32px; } .tag-block--laurels li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 21px; opacity: 0.5; background-color: currentColor; -webkit-mask: url("../assets/laurel.png") center/contain no-repeat; mask: url("../assets/laurel.png") center/contain no-repeat; } /* Outline chip — ghost box that fills on hover. Shared look with the Collab .poster-chip below and a sibling of the home hero's .hero-cta, so the whole site reads as one kit. (Only used on .theme-dark pages, hence the white.) */ .watch-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 30px; padding: 14px 30px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .watch-btn:hover { background: #fff; color: #0a0a0a; border-color: #fff; } .prevnext { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(48px, 8vw, 100px); padding-top: 28px; border-top: 1px solid var(--line); /* top-align so both arrows sit on the same axis when a title wraps */ align-items: flex-start; } /* Split the row evenly instead of letting a long prev title starve the next link: at 375px "A Photographic Memory" took 232 of 343px, squeezing "Collabs →" into 91px and breaking the arrow onto its own line. */ .prevnext a { flex: 1 1 0; min-width: 0; } .prevnext a:last-child { text-align: right; } /* Collabs prev/next: full-width like Work, aligned to the centered stage. Hugs the text column as long as the text is at least as tall as the poster (which it is on the content-rich pages; short pages carry a description to clear the poster). */ .feature-stage + .prevnext { max-width: 1180px; margin-inline: auto; margin-top: clamp(14px, 2vw, 22px); } /* The category bar now follows the pager, so it — not the pager — is the last thing before the footer and carries the breathing room. Without this the bar sat flush against the footer (measured 0px gap). */ .feature-stage + .prevnext + .work-filter--detail { max-width: 1180px; margin-inline: auto; } .prevnext + .work-filter--detail { padding-bottom: clamp(40px, 6vh, 72px); } .prevnext a { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .prevnext a:hover { color: var(--muted); } .prevnext .disabled { color: var(--line); pointer-events: none; } /* ---------- about -------------------------------------------------------- */ .about-lead { font-size: clamp(22px, 3.4vw, 46px); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; max-width: none; } .about-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 80px); margin-top: clamp(40px, 7vw, 90px); align-items: start; } @media (max-width: 860px) { .about-cols { grid-template-columns: 1fr; gap: 44px; } } .about-cols p { font-size: 16px; line-height: 1.7; color: #2a2a2a; margin: 0 0 18px; max-width: 60ch; } .logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: 8px; } @media (max-width: 520px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } } .logo-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; font-weight: 700; font-size: clamp(12px, 1.3vw, 15px); text-transform: uppercase; letter-spacing: 0.06em; color: #222; } /* ---------- brand logo cluster ------------------------------------------- */ .logo-wall { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(26px, 3.6vw, 52px); margin-top: 16px; } .logo-item { display: flex; align-items: center; justify-content: center; } /* unify every logo to one light monochrome tone while keeping internal contrast (grayscale, not a flat fill) so multi-colour marks like Sonic stay legible */ .brand-logo { height: clamp(26px, 3.4vw, 40px); width: auto; max-width: 165px; object-fit: contain; filter: grayscale(1) invert(1) brightness(1.08); opacity: 0.82; transition: opacity 0.3s var(--ease); } .logo-item:hover .brand-logo { opacity: 1; } /* logos that are already light (e.g. white MSNBC): desaturate, don't invert */ .logo--light .brand-logo { filter: grayscale(1) brightness(1.6); } .brand-name { font-weight: 700; font-size: clamp(14px, 1.6vw, 18px); text-transform: uppercase; letter-spacing: 0.04em; color: #f0f0f0; } /* ---------- press list --------------------------------------------------- */ .press-list { border-top: 1px solid var(--line); margin-top: 8px; } .press-item { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 16px; padding: 16px 0; border-bottom: 1px solid var(--line); transition: opacity 0.3s var(--ease); } .press-item:hover { opacity: 0.55; } .press-outlet { grid-column: 1 / -1; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); } .press-title { font-size: 15px; font-weight: 500; line-height: 1.35; } .press-arrow { font-size: 13px; color: var(--muted); } /* ---------- contact ------------------------------------------------------ */ .contact-wrap { min-height: calc(100svh - var(--nav-h)); display: flex; align-items: center; } /* sticky-footer layout so the footer sits flush at the bottom with the email centered above it — no stranded gap */ .page-contact { min-height: 100svh; display: flex; flex-direction: column; } .page-contact main { flex: 1 0 auto; display: flex; flex-direction: column; } .page-contact .contact-wrap { flex: 1 1 auto; min-height: 0; } /* the gutter is too narrow on phones to hang the footer mark cleanly — hide it */ @media (max-width: 768px) { .footer-mark { display: none; } /* the contact-note line break is a desktop-only nicety — let it flow on phones */ .page-contact [data-site="contactNote"] br { display: none; } } .email-huge { display: inline-block; font-weight: 800; letter-spacing: -0.02em; font-size: clamp(26px, 6.2vw, 84px); line-height: 1.02; text-transform: none; word-break: break-word; } .email-huge:hover { color: #fff; animation: none; text-shadow: 0 0 28px rgba(255,255,255,0.95), 0 0 8px rgba(255,255,255,1), 0 0 2px rgba(255,255,255,1); } .social-row { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 44px; } .social-row a { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .social-row a:hover { color: var(--fg); } /* ---------- footer ------------------------------------------------------- */ .footer { background: #0a0a0a; color: #fff; } /* divider when the page itself is dark (e.g. Work), so the footer reads apart */ .theme-dark .footer { border-top: 1px solid var(--line); } .footer-inner { padding-top: 24px; padding-bottom: 24px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; max-width: none; /* full-bleed like the nav, so the footer brand aligns with the header brand */ } .footer-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 14px; color: #fff; } .footer-mark { height: 30px; width: auto; filter: brightness(0) invert(1); } .footer small { color: rgba(255, 255, 255, 0.5); font-size: 12px; letter-spacing: 0.04em; } /* wrap + a tighter gap on narrow screens: at 375px the five links measured 377px against a 343px track and pushed Contact off the right edge */ .footer-links { display: flex; flex-wrap: wrap; gap: 22px; } @media (max-width: 420px) { .footer-links { gap: 14px; } } .footer-links a { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.6); } .footer-links a:hover { color: #fff; } /* ---------- reveal-on-scroll -------------------------------------------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .scroll-cue { animation: none; } } /* ---------- features: one-sheet grid ------------------------------------ */ /* The one-sheet is the statement, so tiles are portrait (2:3) poster crops. */ .sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 34px); /* cap width from viewport height so the tallest poster (R = 0.647, Motel Drive) plus its caption clears the fold at full-screen; 370px = page head + card meta reserve, 68px = 2x grid gap */ max-width: min(100%, max(900px, calc(((100vh - 370px) * 0.647 * 3) + 68px))); margin-left: auto; margin-right: auto; } @media (max-width: 900px) { .sheet-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .sheet-grid { grid-template-columns: 1fr; } } .sheet { display: block; } .sheet-art { position: relative; overflow: hidden; background: var(--tile); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); } /* posters render at their TRUE aspect — never crop a one-sheet's credits */ .sheet-art img { width: 100%; height: auto; display: block; transition: transform 0.7s var(--ease); } /* FILMS page: uniform 2:3 frames, art fills edge to edge (Chris: no black bars). The 4:5 posters scale up to fill — Camp ALEC center-crops ~8% a side (all text/subject safe), TOCB rides its onesheetPos (43%) so every laurel stays in frame. */ .page-films .sheet-art { aspect-ratio: 2 / 3; background: #000; } .page-films .sheet-art img { height: 100%; object-fit: cover; } /* COLLABS: uniform 2:3 frames, art fills edge to edge like FILMS. Crop verified against the actual posters: MD loses only painted sky above the byline and paint below the credits (1.5%/edge); PMAS loses 2.4% of photo at the sides; APM is exact 2:3. */ .page-collabs .sheet-art { aspect-ratio: 2 / 3; background: #000; } .page-collabs .sheet-art img { height: 100%; object-fit: cover; } /* status flag on a grid card's art (e.g. IN PRODUCTION). .sheet-art is already position:relative, so no wrapper is needed. Solid dark ground rather than the page tag's translucent white — it sits over artwork and has to stay legible against light posters. Sits outside the img, so the hover zoom doesn't move it. */ .sheet-tag { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: #fff; background: rgba(10, 10, 10, 0.86); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .sheet:hover .sheet-art img { transform: scale(1.04); } /* solid format chip — the Rachel Seed tag in monochrome. On Collabs it rides directly under the art (uniform position on every card), title and roles wrap freely below. */ .sheet-format-row { display: flex; align-items: center; margin: 2px 0 10px; } .sheet-format { display: inline-block; margin-top: 9px; padding: 4px 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #0a0a0a; background: #fff; } /* non-2:3 poster art shown whole, letterboxed on black (posters with black backgrounds read seamlessly) */ .sheet-art--contain { background: #000; } .sheet-art--contain img { object-fit: contain; } /* placeholder sheets for films without key art yet */ .sheet-art--empty { aspect-ratio: 2 / 3; /* placeholder keeps the frame */ display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: none; } .sheet-art--empty span { font-size: clamp(12px, 1.4vw, 15px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.26); } .sheet-meta { padding: 14px 2px 0; } .sheet-title { font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; color: #fff; } .sheet-year { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); letter-spacing: 0.02em; } /* FILMS cards: streamer-first meta — the network is the bright glowing line, the year rides muted beside it, roles drop back to quiet */ .sheet-net { display: block; margin-top: 5px; font-size: 13px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 0.12em; text-shadow: 0 0 6px rgba(255, 255, 255, 0.24), 0 0 1px rgba(255, 255, 255, 0.4); } .sheet-net-year { font-weight: 400; color: var(--muted); text-shadow: none; } /* FILMS card meta: the network row sits directly under the art (aligned across the grid because every poster frame is identical), then title, then roles — plain flow, no grid tricks, no reserved space. */ .sheet-netrow { display: flex; align-items: center; gap: 10px; margin: 2px 0 10px; height: 19px; } .sheet-netrow img { width: auto; filter: brightness(0) invert(1); opacity: 0.9; display: block; } /* optical normalization — each mark tuned to carry the same visual weight */ .sheet-netrow img[alt="Disney+"] { height: 19px; position: relative; top: -1.5px; } .sheet-netrow img[alt="The New Yorker"] { height: 13px; position: relative; top: -0.5px; } .sheet-netrow img[alt="MSNBC"] { height: 14px; /* keep the mark's internal tones (peacock feathers), same recipe as the About brand wall's light treatment — not the flat white knockout */ filter: grayscale(1) brightness(1.6); } .sheet-netrow img[alt="Peacock"] { height: 14px; } .sheet-netrow img[alt="Means TV"] { height: 12px; } .sheet-netrow img[alt="Wrong Creative"] { height: 17px; } .sheet-netrow img[alt="DNO"] { height: 15px; position: relative; top: 2px; } .sheet-netrow .sheet-net-year { font-size: 12px; line-height: 1; } /* text fallback chip for any client without a mark */ .sheet-chip { display: inline-block; padding: 3px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: #0a0a0a; background: #fff; white-space: nowrap; } /* role lines (Collabs + Films cards): white with a slight static frost glow — a quieter dose of the nav/brand glow, no pulse */ .sheet-role { display: block; margin-top: 5px; font-size: 13px; color: #fff; text-transform: uppercase; letter-spacing: 0.1em; text-shadow: 0 0 6px rgba(255, 255, 255, 0.24), 0 0 1px rgba(255, 255, 255, 0.4); } /* a status inside a role line uses the same capsule as the detail pages, so IN PRODUCTION reads identically everywhere it appears */ .sheet-role .role-tag--line { vertical-align: 1px; margin-left: 8px; text-shadow: none; } /* ---------- feature film page (poster-forward, over video bg) ------------ */ .feature-stage { max-width: 1180px; margin-inline: auto; display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; padding: clamp(96px, 13vh, 150px) 0 clamp(52px, 8vh, 100px); } /* keep the poster pinned in view while the longer copy scrolls past it */ .feature-poster { position: sticky; top: calc(var(--nav-h) + 28px); } @media (max-width: 820px) { .feature-stage { grid-template-columns: 1fr; gap: 40px; align-items: start; padding-top: clamp(88px, 15vh, 118px); } } .feature-poster { justify-self: start; } .feature-poster img { display: block; height: min(76vh, 760px); width: auto; max-width: 100%; box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.08); } @media (max-width: 820px) { .feature-poster { position: static; } .feature-poster img { height: auto; width: min(72vw, 360px); } } /* watch chips under the poster — matched to the work-page .watch-btn chip (solid fill, square corners, 13px / .14em, fade on hover) so the Collab detail pages and the Work detail pages read as the same component. */ .poster-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .poster-chip { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; background: transparent; color: #fff; border-radius: 0; border: 1px solid rgba(255, 255, 255, 0.55); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .poster-chip:hover { background: #fff; color: #0a0a0a; border-color: #fff; } /* primary action (e.g. Watch on iTunes) — solid fill so it leads the outlined secondary chip next to it; hover inverts to the outlined state */ .poster-chip--fill { background: #fff; color: #0a0a0a; border-color: #fff; } .poster-chip--fill:hover { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); } .feature-info { color: #fff; max-width: none; } .feature-info .back-link { color: rgba(255, 255, 255, 0.6); } .feature-info .back-link:hover { color: #fff; } .feature-title { margin: 0; font-weight: 800; text-transform: uppercase; line-height: 0.98; letter-spacing: -0.01em; font-size: clamp(32px, 4.2vw, 50px); text-wrap: balance; } .feature-logline { font-size: clamp(14px, 1.35vw, 16px); font-weight: 400; font-style: italic; line-height: 1.6; margin: 20px 0 0; color: rgba(255, 255, 255, 0.82); } .feature-desc { font-size: clamp(14px, 1.3vw, 15.5px); line-height: 1.7; color: rgba(255, 255, 255, 0.7); margin: 16px 0 0; } /* prominent role lead at the top of a feature page (mirrors the Rachel dev pages); monochrome adaptation — white role value carries the static frost glow */ .role-lead { margin: clamp(28px, 4vw, 44px) 0 0; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); } .role-lead-label { display: block; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: #fff; margin-bottom: 8px; } .role-lead-role { display: block; font-weight: 800; font-size: clamp(21px, 2.6vw, 33px); letter-spacing: -0.02em; line-height: 1.04; color: #fff; text-shadow: 0 0 7px rgba(255, 255, 255, 0.28), 0 0 1px rgba(255, 255, 255, 0.55); } /* role + status pill on one line (e.g. in-production Collabs) */ /* role tags: flush-left row UNDER the role (Rachel-site design, in white). --fill = solid box (the format, e.g. FEATURE DOCUMENTARY); --line = outlined box (the status, e.g. IN PRODUCTION). */ .role-tags { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; align-items: center; } .role-tag { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; padding: 12px 22px; border-radius: 0; } .role-tag--fill { background: #fff; color: #0a0a0a; border: 1px solid #fff; } /* Status (e.g. IN PRODUCTION) is a label, not a control — so it deliberately does NOT wear a border. The outlined version it replaced was within 2px of .poster-chip, the genuinely clickable "Watch the trailer" button, so a non-interactive tag was reading as something you could press. Small tinted capsule instead: same 10px / .16em scale as the .sheet-format grid chip. */ .role-tag--line { background: rgba(255, 255, 255, 0.15); color: #fff; border: 0; font-size: 10px; letter-spacing: 0.16em; padding: 5px 11px; } /* critic pull quote on a feature page (optionally wrapped in a link to the review) */ a.feature-quote-link { display: block; text-decoration: none; color: inherit; } a.feature-quote-link .feature-quote { transition: border-color 0.3s var(--ease); } a.feature-quote-link:hover .feature-quote { border-left-color: #fff; } a.feature-quote-link:hover cite { color: #fff; } a.feature-quote-link:focus-visible { outline: 2px solid var(--fg); outline-offset: 6px; } .feature-quote { margin: clamp(24px, 4vw, 36px) 0 0; padding-left: 18px; border-left: 2px solid rgba(255, 255, 255, 0.32); } .feature-quote p { margin: 0; font-size: clamp(18px, 2vw, 23px); font-style: italic; line-height: 1.4; color: #fff; } .feature-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.62); } .feature-quote cite span { color: rgba(255, 255, 255, 0.42); } /* feature affiliation rows — a vertical label/value list like the detail pages, on dark */ .feature-meta { display: block; margin-top: clamp(26px, 4vw, 38px); border-top: 1px solid rgba(255, 255, 255, 0.16); } .feature-meta > div { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .feature-meta dt { flex: none; margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.55); } .feature-meta dd { margin: 0; font-size: 14px; font-weight: 500; color: #fff; text-align: right; } /* Narrow screens: a long label plus a long value can't share one row. Measured on Motel Drive at 375px — "Director of Photography" left the DP names only 106px, so the value ran 23px past the container's right edge. Stack instead: label over value, both flush left. Applies to both detail-page meta lists. */ @media (max-width: 560px) { .feature-meta > div, .meta-row { flex-direction: column; align-items: flex-start; gap: 4px; } .feature-meta dd, .meta-row dd { text-align: left; } } /* ---------- mobile nav --------------------------------------------------- */ @media (max-width: 640px) { .nav-toggle { display: block; } .nav-links { position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: flex-start; gap: 0; /* frosted glass: the splash video (and page art) glows through the menu */ background: rgba(10, 10, 10, 0.28); backdrop-filter: saturate(130%) blur(16px); -webkit-backdrop-filter: saturate(130%) blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding: 8px var(--gutter) 20px; /* Height-independent: -120% is relative to the panel's own height, so it only clears the viewport once the panel is ~5× the nav bar. This site's menu is tall enough (the nested film strip) that it already did, but visibility also takes the closed menu's links out of the tab order. */ transform: translateY(calc(-100% - var(--nav-h) - 4px)); visibility: hidden; transition: transform 0.4s var(--ease), visibility 0.4s; color: #fff; } .nav-links.open { transform: translateY(0); visibility: visible; } .nav-links a { width: 100%; padding: 16px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 16px; } /* vertical divider makes no sense in the stacked mobile menu */ .nav-links .nav-divider { display: none; } /* the six films, nested under the FILMS link, each in its accent */ .nav-links .nav-films { display: block; width: 100%; } .nav-links .nav-films a { display: block; width: auto; margin-left: 16px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fc, #fff); text-shadow: 0 0 7px color-mix(in srgb, var(--fc, #fff) 45%, transparent); } .nav--transparent .nav-links { color: #fff; } }