/* ============================================================================= CHILL FACTORY — 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; } /* The canvas itself is dark. Needed because the video pages set the BODY to transparent (so the fixed .page-bg shows through) and .page-bg only covers the viewport — without this, anything outside it (below the footer, or an iOS rubber-band overscroll) falls back to the browser's 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 */ } /* 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; } /* ice-cube mark before the wordmark (222x276 → 32px tall; ~2px > footer mark) */ .brand::before { content: ""; flex: 0 0 auto; width: 26px; height: 32px; background: url("../assets/logo-mark.png") center/contain no-repeat; filter: brightness(0) invert(1); } /* 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%; } /* 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); } .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 ----------------------------------------------- */ .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; /* anchors the absolutely-positioned embed iframe */ 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; } /* tighter than the generic .section so the 16:9 player clears the fold */ #project-root > .section { padding-top: var(--detail-pad); } .project-hero video, .project-hero img { width: 100%; height: 100%; object-fit: cover; } /* 60SD detail pages: many masters are 720p — a full-bleed frame flatters no one. Cap the player from the viewport height so the player AND the title below it share the first screen; centered, with a floor for short viewports. */ .project-hero--compact { max-width: min(100%, 1280px, max(560px, calc((100vh - 345px) * 1.77778))); margin-left: auto; margin-right: auto; } .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 and break its arrow onto a line of its own. */ .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. */ .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; /* No hard
in the copy — it wraps naturally so every screen gets full lines. This cap is what shapes the desktop break (after "company"); on phones it doesn't bind and the text simply fills the column. */ max-width: 44ch; } .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 overran the 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); /* Fold guard (same trick as the Films/Series grids): cap the row's width from the viewport HEIGHT so the tallest poster (Motel Drive, 0.647 ratio) plus its caption clears the fold on any screen. ~370px = page head + card meta. 900px floor keeps landscape-phone viewports from crushing the cards. */ max-width: min(100%, max(900px, calc(((100vh - 370px) * 0.6667 * 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; aspect-ratio: 2 / 3; overflow: hidden; background: var(--tile); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); } /* 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. 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); } /* Uniform 2:3 cover-crop. Verified against the actual poster files: the centered crop removes only paint/photo bleed — every text element on all three one-sheets survives with margin (see 2026-07 crop-line renders). */ .sheet-art img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease); } .sheet:hover .sheet-art img { transform: scale(1.04); } /* placeholder sheets for films without key art yet */ .sheet-art--empty { 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-role { display: block; margin-top: 5px; font-size: 12px; color: #fff; text-transform: uppercase; letter-spacing: 0.1em; /* same static frost glow as the nav/footer links — no pulse */ text-shadow: 0 0 6px rgba(255, 255, 255, 0.3), 0 0 1px rgba(255, 255, 255, 0.55); } /* ---------- 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; } /* smaller tag scale for the Collabs listing cards — one row, never wraps */ .role-tags--sheet { gap: 8px; margin-top: 12px; flex-wrap: nowrap; } .role-tags--sheet .role-tag { font-size: 10px; padding: 6px 10px; letter-spacing: 0.1em; white-space: nowrap; } /* the STATUS keeps the exact capsule spec wherever it appears — the card-scale override above is for the format tag only */ .role-tags--sheet .role-tag--line { padding: 5px 11px; letter-spacing: 0.16em; } /* 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. */ .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 — the value ends up running past the container's right edge. Stack instead: label over value, both flush left. 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; background: #0a0a0a; border-bottom: 1px solid rgba(255, 255, 255, 0.14); padding: 8px var(--gutter) 20px; /* Park the closed panel fully ABOVE the viewport. -120% of its own height was not enough: the panel is anchored at top:var(--nav-h), so it has to travel its whole height PLUS that offset — otherwise its bottom edge shows as a dark strip across the top of every mobile page. visibility also keeps the hidden panel from swallowing taps up there. */ 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; } .nav--transparent .nav-links { color: #fff; } }