/* ============================================================================= RACHEL ELIZABETH SEED — global styles Cinematic, dark, editorial. A 70s photobook read: soft serif display (Fraunces), warm paper-white type, a single periwinkle-purple accent. Architecture ported from the Chill Factory site; identity is its own. ============================================================================= */ :root { /* dark is the default here (cinematic), unlike the Chill Factory white base */ --bg: #0b0a0f; /* near-black with a hint of violet */ --fg: #f4f1ea; /* warm photobook paper-white */ --muted: #9a93a6; /* dusty lilac-grey */ --line: #241f2e; /* hairline on dark */ --tile: #16131d; /* media placeholder */ --accent: #b39bff; /* periwinkle — the DEFAULT accent (landing, APM). Overridden per section by the .accent-* classes below. */ --accent-2: #8a63ff; /* deeper partner for fills / glows */ --accent-ink: #0b0a0f; /* text on an accent fill */ --periwinkle: #b39bff; /* FIXED brand colour — brand mark + APM chip, never per-page */ --maxw: 1560px; /* 22px floor, not 16px: below ~550px the min governs, and 16px let the big headlines crowd the screen edge on phones. */ --gutter: clamp(22px, 4vw, 44px); --nav-h: 62px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --serif: "Fraunces", Georgia, "Times New Roman", serif; --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* headline face: a Helvetica-style grotesque (not Helvetica) for the big type */ --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; /* 70s photographic bloom behind the display type */ --glow: 0 0 22px rgba(179, 155, 255, 0.45), 0 0 58px rgba(138, 99, 255, 0.30); --glow-soft: 0 0 18px rgba(179, 155, 255, 0.35), 0 0 44px rgba(138, 99, 255, 0.22); } /* ---------- per-category accent overrides ----------------------------------- Each section page sets one of these on ; it retargets --accent/--accent-2 and the two glows. :root stays periwinkle (landing + APM pedestal + APM detail). --periwinkle is the FIXED brand colour and never follows the page accent. */ .accent-dev { --accent: #f76ea0; --accent-2: #f4347a; --glow: 0 0 22px rgba(247, 110, 160, 0.45), 0 0 58px rgba(244, 52, 122, 0.3); --glow-soft: 0 0 18px rgba(247, 110, 160, 0.35), 0 0 44px rgba(244, 52, 122, 0.22); } .accent-films { --accent: #f7b76e; --accent-2: #f49a34; --glow: 0 0 22px rgba(247, 183, 110, 0.45), 0 0 58px rgba(244, 154, 52, 0.3); --glow-soft: 0 0 18px rgba(247, 183, 110, 0.35), 0 0 44px rgba(244, 154, 52, 0.22); } .accent-archive { --accent: #6ef7c5; --accent-2: #34f4ae; --glow: 0 0 22px rgba(110, 247, 197, 0.45), 0 0 58px rgba(52, 244, 174, 0.3); --glow-soft: 0 0 18px rgba(110, 247, 197, 0.35), 0 0 44px rgba(52, 244, 174, 0.22); } .accent-about { --accent: #b2dffa; --accent-2: #79c6f6; --glow: 0 0 22px rgba(178, 223, 250, 0.45), 0 0 58px rgba(121, 198, 246, 0.3); --glow-soft: 0 0 18px rgba(178, 223, 250, 0.35), 0 0 44px rgba(121, 198, 246, 0.22); } .accent-contact { --accent: #f7d76e; --accent-2: #f4c734; --glow: 0 0 22px rgba(247, 215, 110, 0.45), 0 0 58px rgba(244, 199, 52, 0.3); --glow-soft: 0 0 18px rgba(247, 215, 110, 0.35), 0 0 44px rgba(244, 199, 52, 0.22); } /* Per-category nav — every link hovers/actives in ITS OWN colour on every page, independent of the page accent. NOTE: [href*="films"] (substring), not [href="films.html"] — Netlify's Pretty URLs strips the .html on the live site (films.html -> /films), so an exact-match selector matches nothing in production. Substring matches both forms. Same reason the APM chip selectors below use [href*="a-photographic-memory"]. */ .nav-links a[href*="development"]:hover, .nav-links a[href*="development"][aria-current="page"] { color: #f76ea0; } .nav-links a[href*="development"]::after { background: #f76ea0; } .nav-links a[href*="films"]:hover, .nav-links a[href*="films"][aria-current="page"] { color: #f7b76e; } .nav-links a[href*="films"]::after { background: #f7b76e; } .nav-links a[href*="archive"]:hover, .nav-links a[href*="archive"][aria-current="page"] { color: #6ef7c5; } .nav-links a[href*="archive"]::after { background: #6ef7c5; } .nav-links a[href*="about"]:hover, .nav-links a[href*="about"][aria-current="page"] { color: #b2dffa; } .nav-links a[href*="about"]::after { background: #b2dffa; } .nav-links a[href*="contact"]:hover, .nav-links a[href*="contact"][aria-current="page"] { color: #f7d76e; } .nav-links a[href*="contact"]::after { background: #f7d76e; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-weight: 400; line-height: 1.5; letter-spacing: 0.005em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img, video { display: block; max-width: 100%; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ---------- type roles --------------------------------------------------- */ /* Display serif carries the 70s photobook voice: soft, high-contrast, set in mixed case (not the shouty all-caps of the Chill Factory site). */ h1, h2, h3, .serif { font-family: var(--serif); } .eyebrow { font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent); margin: 0 0 24px; } /* ---------- layout helpers ---------------------------------------------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* Horizontal value must be var(--gutter), not 0. Paired as `.wrap.section` (every film detail page via site.js), this shorthand overrode .wrap's own `padding: 0 var(--gutter)` and pinned the content to the viewport edge. Same trap as .page-head and .pedestal. */ .section { padding: clamp(48px, 9vw, 120px) var(--gutter); } /* ---------- fixed page video background ---------------------------------- */ .page-video { background: transparent; } .page-video .nav { background: transparent; border-bottom-color: transparent; } .page-bg { position: fixed; inset: 0; z-index: -2; overflow: hidden; background: #08070b; } .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; } /* violet-tinted scrim keeps text readable and ties the footage to the palette */ .page-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, rgba(138,99,255,0.10) 0%, rgba(11,10,15,0) 55%), rgba(9, 8, 13, 0.74); } /* ---------- 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(11, 10, 15, 0.72); backdrop-filter: saturate(140%) blur(9px); -webkit-backdrop-filter: saturate(140%) blur(9px); border-bottom: 1px solid var(--line); } .nav.nav--transparent { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; } .brand { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; } .brand em { color: var(--periwinkle); font-style: normal; } .nav-links { display: flex; gap: clamp(18px, 3vw, 40px); align-items: center; } .nav-links a { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: inherit; position: relative; padding: 6px 0; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--accent); transition: width 0.35s var(--ease); } .nav-links a:hover::after, .nav-links a[aria-current="page"]::after { width: 100%; } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 12.5px; } /* divider that sets "A Photographic Memory" apart from the section links */ .nav-sep { width: 1px; height: 17px; flex: none; align-self: center; background: currentColor; opacity: 0.32; margin: 0 -6px; } /* featured: "A Photographic Memory" as an outlined accent chip -------------- */ .nav-links a[href*="a-photographic-memory"] { color: var(--periwinkle); border: 1px solid rgba(179, 155, 255, 0.55); padding: 6px 13px; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .nav-links a[href*="a-photographic-memory"]::after { display: none; } .nav-links a[href*="a-photographic-memory"]:hover { background: var(--periwinkle); color: var(--accent-ink); border-color: var(--periwinkle); } /* footer: center the row and use a tighter chip so it sits inline with the links */ .footer-links { align-items: center; } .footer-links a[href*="a-photographic-memory"] { color: var(--periwinkle); border: 1px solid rgba(179, 155, 255, 0.5); padding: 4px 10px; line-height: 1; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); } .footer-links a[href*="a-photographic-memory"]:hover { background: var(--periwinkle); color: var(--accent-ink); border-color: var(--periwinkle); } /* ---------- hero / splash ------------------------------------------------ */ .hero { position: relative; height: 100svh; min-height: 560px; 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; } .hero-frame { 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; } /* violet-graded scrim over the loop */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(130% 100% at 50% 8%, rgba(138,99,255,0.16) 0%, rgba(11,10,15,0) 46%), linear-gradient(180deg, rgba(11,10,15,0.42) 0%, rgba(11,10,15,0.10) 32%, rgba(11,10,15,0.78) 100%); } .hero-inner { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(24px, 5vw, 64px) var(--gutter) clamp(40px, 7vw, 84px); color: #fff; } .hero-eyebrow { font-family: var(--sans); font-size: clamp(14px, 1.5vw, 19px); font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; text-shadow: var(--glow-soft); } .hero-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(42px, 7.7vw, 136px); line-height: 0.9; letter-spacing: -0.035em; /* 70s photographic bloom behind the type */ text-shadow: var(--glow), 0 1px 3px rgba(0, 0, 0, 0.4); } .hero-title em { font-style: normal; color: var(--accent); } .hero-sub { margin: 22px 0 0; max-width: 40ch; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(17px, 2vw, 25px); line-height: 1.35; color: rgba(255,255,255,0.9); } /* stacked: the In Production CTA sits under A Photographic Memory */ .hero-ctas { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; } .hero-ctas .hero-cta { min-width: 260px; justify-content: space-between; } .hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 13px 28px; border: 1px solid rgba(255, 255, 255, 0.5); color: #fff; font-family: var(--sans); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); } .hero-cta:hover { background: #fff; color: var(--accent-ink); border-color: #fff; } .hero-cta span { transition: transform 0.35s var(--ease); } .hero-cta:hover span { transform: translateX(5px); } /* primary CTA = accent fill (used to send people to the pedestal film) */ .hero-cta--accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .hero-cta--accent:hover { background: #fff; border-color: #fff; } /* hero impact quote — cycles through pull-quotes; sized to break to ~2 lines. font-size lives on the blockquote so the `ch` max-width tracks the quote text. */ .hero-quote { margin: 26px 0 0; max-width: 38ch; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(18px, 2.8vw, 37px); line-height: 1.16; transition: opacity 0.5s var(--ease); } .hero-quote.is-fading { opacity: 0; } /* fixed two-line box so cycling quotes never reflow the name above them */ .hero-quote p { margin: 0; height: 2.32em; overflow: hidden; color: #fff; text-shadow: 0 2px 40px rgba(138, 99, 255, 0.3), 0 1px 2px rgba(0,0,0,0.4); text-wrap: balance; } .hero-quote cite { display: block; margin-top: 16px; font-style: normal; font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.13em; color: var(--accent); } .hero-quote cite em { font-style: italic; } .hero-quote cite a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .hero-quote cite a:hover { color: #fff; } /* ---------- In Production section (landing + films page) ------------------ */ /* on the landing, sit closer to the fold above and read bigger */ .dev-section { border-top: 1px solid var(--line); padding-top: clamp(26px, 3.6vw, 52px); } .dev-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px 24px; margin-bottom: clamp(26px, 4vw, 46px); } .dev-head .eyebrow { font-size: clamp(13px, 1.5vw, 17px); font-weight: 800; margin-bottom: 12px; } .dev-title { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; font-size: clamp(34px, 5.4vw, 74px); line-height: 0.96; text-shadow: var(--glow-soft); } .dev-more { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); white-space: nowrap; } .dev-more span { transition: transform 0.35s var(--ease); display: inline-block; } .dev-more:hover span { transform: translateX(4px); } /* ---------- page header -------------------------------------------------- */ /* Horizontal value must be var(--gutter), not 0 — this shorthand overrides .wrap's `padding: 0 var(--gutter)` and was pinning the page titles to the viewport edge (Films / Archive / In Production / About all sat at left: 0). Same trap as .pedestal below. */ .page-head { padding: clamp(40px, 4.5vw, 88px) var(--gutter) clamp(24px, 3vw, 40px); } .page-title { margin: 0; font-family: var(--display); font-weight: 700; line-height: 0.92; letter-spacing: -0.03em; font-size: clamp(46px, 10vw, 134px); text-shadow: var(--glow); } .page-title em { font-style: normal; color: var(--accent); } .page-lead { margin: 22px 0 0; max-width: 46ch; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(17px, 2.1vw, 24px); color: var(--muted); line-height: 1.4; } /* ---------- work / film grid (16:9 cards) -------------------------------- */ .grid { display: grid; gap: clamp(10px, 1.6vw, 22px); grid-template-columns: repeat(2, 1fr); } .grid--three { grid-template-columns: repeat(3, 1fr); } @media (max-width: 720px) { .grid, .grid--three { grid-template-columns: 1fr; } } .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-family: var(--serif); font-size: clamp(17px, 1.7vw, 23px); font-weight: 400; letter-spacing: 0; } .card-client { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; white-space: nowrap; } @media (max-width: 720px) { .card-meta { flex-direction: column; gap: 4px; } .card-client { white-space: normal; } } /* ---------- films: one-sheet grid (2:3 posters) -------------------------- */ /* Capped off viewport HEIGHT so the poster AND its title/role clear the fold. 3 cols at full width gave 444px posters on a 731px-tall window and pushed the text 112px under. 95svh + gaps keeps the whole tile visible; posters still grow on taller screens, and min(100%) means nothing changes on narrow ones. */ .sheet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.6vw, 40px); max-width: min(100%, calc(95svh + 52px)); } @media (max-width: 900px) { .sheet-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .sheet-grid { grid-template-columns: 1fr; } } /* Films runs 4-up. Narrower columns keep the whole tile above the fold on their own (~230px poster → ~430px tile at 1100px wide), so the height cap above is dropped here. This ladder comes AFTER the 3-up queries on purpose: identical specificity, so it has to be last to own every breakpoint — otherwise the .sheet-grid rule above would force 2-up between 760 and 900. */ .sheet-grid--four { grid-template-columns: repeat(4, 1fr); max-width: 100%; } @media (max-width: 1000px) { .sheet-grid--four { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 760px) { .sheet-grid--four { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .sheet-grid--four { grid-template-columns: 1fr; } } .sheet { display: block; } .sheet-art { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--tile); box-shadow: 0 20px 55px rgba(0, 0, 0, 0.5); border: 1px solid rgba(179,155,255,0.10); } .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 / in development */ .sheet-art--empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; border: 1px solid rgba(179,155,255,0.20); box-shadow: none; background: radial-gradient(95% 75% at 50% 32%, rgba(138,99,255,0.26) 0%, rgba(22,19,29,0) 72%), linear-gradient(180deg, #1b1727 0%, #100d18 100%); } .sheet-art--empty .sheet-ph { font-family: var(--serif); font-weight: 400; font-style: normal; font-size: clamp(18px, 2.1vw, 27px); letter-spacing: 0; line-height: 1.15; color: rgba(244,241,234,0.9); text-transform: none; } /* in-development sheets get a dashed "work in progress" frame */ .sheet-art--dev { border: 1px dashed rgba(179,155,255,0.42); } /* title-card / off-ratio art: show the whole thing on black with breathing room */ .sheet-art--contain { background: #000; } .sheet-art--contain img { object-fit: contain; padding: 13%; } .sheet-meta { padding: 15px 2px 0; } /* Film titles read ALL CAPS on the grids. A touch of tracking — caps set solid in a serif close up badly at this size. */ .sheet-title { font-family: var(--serif); font-size: clamp(17px, 1.7vw, 23px); font-weight: 400; color: var(--fg); text-transform: uppercase; letter-spacing: 0.04em; } .sheet-year { display: block; margin-top: 3px; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--muted); } .sheet-role { display: block; margin-top: 6px; font-size: 11.5px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.12em; } /* In Production: feature Rachel's role prominently (accent, bolder, larger) */ .sheet--dev .sheet-role { color: var(--accent); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; } /* In Production tiles: solid accent format chip beneath the role (grid option 8) */ .sheet-format { display: inline-block; margin-top: 9px; padding: 4px 10px; font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-ink); background: var(--accent); } /* status pill (e.g. In Production / Post-Production) */ .sheet-status { position: absolute; top: 12px; left: 12px; z-index: 2; font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; padding: 6px 10px; color: var(--accent-ink); background: var(--accent); } .sheet-status--dev { background: rgba(11,10,15,0.7); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); } /* ---------- film detail (poster-forward, over video bg) ------------------ */ .feature-stage { min-height: calc(100svh - var(--nav-h)); display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; padding: clamp(96px, 13vh, 150px) 0 clamp(56px, 9vh, 100px); } .feature-poster { position: sticky; top: calc(var(--nav-h) + 28px); justify-self: start; } /* CTA lives under the one-sheet, not in the info rail — it rode the sticky poster column so it stays with the artwork as the rail scrolls. */ .feature-poster .hero-cta { margin-top: 22px; } .feature-poster img { display: block; height: min(76vh, 780px); width: auto; max-width: 100%; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.65); border: 1px solid rgba(179,155,255,0.14); } @media (max-width: 820px) { .feature-stage { grid-template-columns: 1fr; gap: 40px; padding-top: clamp(88px, 15vh, 118px); } .feature-poster { position: static; } .feature-poster img { height: auto; width: min(72vw, 380px); } } .feature-info { color: var(--fg); max-width: 52ch; } .back-link { display: inline-block; margin-bottom: 26px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); } .back-link:hover { color: var(--accent); } .feature-title { margin: 0; font-family: var(--display); font-weight: 700; line-height: 0.94; letter-spacing: -0.03em; font-size: clamp(38px, 5.6vw, 76px); text-shadow: var(--glow-soft); } .feature-title em { font-style: normal; color: var(--accent); } .feature-logline { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.5; margin: 22px 0 0; color: rgba(244,241,234,0.86); } .feature-roles { margin: clamp(28px, 4vw, 40px) 0 0; } .feature-roles .eyebrow { color: var(--muted); margin-bottom: 14px; } .role-list { list-style: none; margin: 0; padding: 0; } .role-list li { font-family: var(--serif); font-size: clamp(19px, 2.1vw, 26px); font-weight: 400; padding: 10px 0; border-bottom: 1px solid var(--line); } /* Wraps to a stack in practice — the info column is too narrow for the three columns to sit in a row — so row-gap is set tight and independently of the column-gap, which only applies if the row ever does fit. */ .feature-meta { display: flex; gap: 18px clamp(24px, 4vw, 48px); margin-top: 30px; flex-wrap: wrap; } .feature-meta dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin: 0 0 5px; } .feature-meta dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--fg); } /* ---------- generic project detail (16:9 hero) --------------------------- */ /* position: relative is load-bearing — embedFrame() emits the player iframe with an inline `position:absolute; inset:0`. Without a positioned ancestor that resolved against the viewport (1440x900), so the video rendered viewport-sized and got cropped by overflow:hidden — i.e. hugely zoomed in. */ /* Width is driven by viewport HEIGHT so the film title stays above the fold: a full-width 16:9 hero ran 761px tall on a 900px screen and pushed the title 147px under. Deriving width from svh (never past 100%) keeps a true 16:9 with no letterboxing, and still goes full-width on phones. */ .project-hero { position: relative; width: min(100%, calc(56svh * 16 / 9)); aspect-ratio: 16 / 9; background: var(--tile); overflow: hidden; margin-bottom: clamp(28px, 5vw, 56px); border: 1px solid var(--line); } .project-hero video, .project-hero img, .project-hero iframe { width: 100%; height: 100%; object-fit: cover; } .project-hero--contain { background: #000; } .project-hero--contain img { object-fit: contain; } /* designed key-art banner: show it in full at its natural ratio (no crop) */ .project-hero--art { aspect-ratio: auto; background: #000; } .project-hero--art img { height: auto; object-fit: contain; } .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-family: var(--display); font-weight: 700; line-height: 0.98; letter-spacing: -0.03em; font-size: clamp(32px, 5vw, 62px); text-shadow: var(--glow-soft); } .project-title em { font-style: normal; color: var(--accent); } /* In Production: Rachel's role leads the right-hand rail (purple, prominent) */ .role-lead { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } /* when the role lead follows the synopsis (feature pages), give it space above */ .feature-info .role-lead { margin-top: clamp(28px, 4vw, 44px); } /* The word "ROLE" only — Archivo + white to echo the film title, still at label scale. The role value itself stays purple (see .role-lead-role). */ .role-lead-label { display: block; font-family: var(--display); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg); margin-bottom: 8px; } .role-lead-role { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(21px, 2.6vw, 33px); letter-spacing: -0.02em; line-height: 1.02; color: var(--accent); text-shadow: var(--glow-soft); } /* In-development films: the stage tag shares the role's line, vertically centred against it and pushed to the rail's right edge. Echoes the .sheet-status--dev pill on the grid tiles. */ /* Column, not a row: the chips ALWAYS sit beneath the role, left-aligned under it. Sharing the role's line meant they sat beside it on wide windows and dropped below on narrow ones — same page reading two different ways depending on the viewport. Stacking makes the role + its two tags one consistent block at every width. The tags themselves still wrap if a very narrow screen demands it. */ .role-lead-line { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; } .role-lead-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* solid accent fill — the loud half of the pair, matching the grid tile chip */ .role-lead-format { flex: none; font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; padding: 6px 11px; color: var(--accent-ink); background: var(--accent); } .role-lead-status { flex: none; font-family: var(--sans); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; padding: 6px 10px; color: var(--accent); background: rgba(11,10,15,0.7); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); } .project-body p { font-size: 16px; line-height: 1.7; color: #cfc9d8; margin: 0 0 18px; } /* Logline leads the summary: light Fraunces italic, set a touch above body size so the serif italic reads at least as large as the Inter copy beneath it. Needs `.project-body p.logline` to outweigh the `.project-body p` rule above. */ .logline, .project-body p.logline { font-family: var(--serif); font-size: 18px; font-weight: 400; font-style: italic; line-height: 1.55; margin: 0 0 24px; color: var(--fg); } .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: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin: 0; } .meta-row dd { margin: 0; font-size: 14px; text-align: right; font-weight: 500; } /* ---------- tag blocks (Credits / Recognition) --------------------------- */ .tag-block { margin-top: 34px; } /* Same treatment as the ROLE lead (.role-lead-label): Archivo 800 at 14px in white, not muted Inter — so RECOGNITION reads as a peer of ROLE in the same rail. */ .tag-block h3 { font-family: var(--display); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg); margin: 0 0 12px; } .tag-block ul { list-style: none; margin: 0; padding: 0; } .tag-block li { font-size: 14.5px; padding: 8px 0; border-bottom: 1px solid var(--line); } /* festival-laurel bullet, masked to the accent color */ .tag-block--laurels li { position: relative; padding-left: 34px; } .tag-block--laurels li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 21px; opacity: 0.9; background-color: var(--accent); -webkit-mask: url("../assets/laurel.svg") center/contain no-repeat; mask: url("../assets/laurel.svg") center/contain no-repeat; } .watch-btn { display: inline-block; margin-top: 30px; padding: 14px 30px; background: var(--accent); color: var(--accent-ink); font-family: var(--sans); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; transition: transform 0.3s var(--ease), background 0.3s var(--ease); } .watch-btn:hover { background: #fff; transform: translateY(-1px); } .watch-btn--ghost { background: transparent; color: var(--fg); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); } .watch-btn--ghost:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .prevnext { display: flex; justify-content: space-between; gap: 20px; margin-top: clamp(48px, 8vw, 100px); padding-top: 28px; border-top: 1px solid var(--line); } .prevnext a { font-size: 13.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; } .prevnext a:hover { color: var(--accent); } .prevnext .disabled { color: var(--line); pointer-events: none; } /* ============================================================================= A PHOTOGRAPHIC MEMORY — pedestal page ============================================================================= */ /* Horizontal value must be var(--gutter), not 0 — this shorthand overrides .wrap's `padding: 0 var(--gutter)` and was pinning the whole page to the viewport edge (title, logline, laurels, poster all sat at left: 0). */ .pedestal { padding: clamp(96px, 13vh, 150px) var(--gutter) clamp(64px, 10vh, 120px); } .pedestal .back-link { color: rgba(244,241,234,0.6); } .pedestal .back-link:hover { color: var(--accent); } /* headline block */ .pedestal-head { max-width: 62ch; } /* Must scale: at a fixed 18px this sat at 74% of the film title on mobile (the title bottoms out at its own 24px clamp min there) and wrapped to two lines, taking up more height than the title itself. Holds 18px from ~820px up. */ .pedestal-kicker { font-family: var(--sans); font-size: clamp(11px, 2.2vw, 18px); font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; } /* one line, no italic — "A Photographic Memory" reads as a single title */ .pedestal-title { margin: 0; font-family: var(--display); font-weight: 700; white-space: nowrap; font-size: clamp(24px, 6.2vw, 104px); line-height: 0.95; letter-spacing: -0.035em; text-shadow: var(--glow); } .pedestal-logline { margin: 26px 0 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(18px, 2.3vw, 27px); line-height: 1.4; color: rgba(244,241,234,0.9); } /* Festival laurel band — opens the accolades box (border-top); the text laurels row below closes it (border-bottom), so both tiers sit inside one frame. Height is fluid so the eight marks always hold one row without overrunning the gutter: Hot Docs (3.02:1) is the widest mark and sets the ceiling. A fixed 72px overflowed by 4px at ~1240px wide. */ .fest-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px clamp(10px, 1.2vw, 18px); margin-top: clamp(38px, 5vw, 58px); padding-top: clamp(24px, 3vw, 34px); border-top: 1px solid var(--line); } .fest-band img { height: clamp(46px, 5.4vw, 70px); width: auto; opacity: 0.92; flex: 0 0 auto; } /* Both laurel tiers wrap to several ragged rows on phones; centring them keeps the accolades box reading as one block instead of a left-aligned jumble. */ @media (max-width: 820px) { .fest-band { justify-content: center; gap: 16px; } .laurels { justify-content: center; } /* Cap the text block so a long sub-line can't stretch a laurel to the full row. "Independent Spirit Award · Winner 2025" was filling 282px and stranding "2025" on its own line, which pushed the wreaths out to the edges — they read as far from the headline than the other three. */ .laurel-text { max-width: 200px; } /* The base clamp bottoms out at its 24px min on phones, leaving the title smaller than the logline under it. The title is nowrap, so it must fit: it renders at ~10.74x its font-size, and the content box is (100vw - 44px). This tracks that with ~7% headroom for font-metric shift while Archivo loads. */ .pedestal-title { font-size: min(calc(8.2vw - 2px), 52px); } } /* laurels row — closes the accolades box opened by .fest-band above. Centred, not space-between: with only four items, space-between stretched the gaps across the full box and read as clunky. Centring keeps the tight gap and still sits balanced under the band. */ .laurels { display: flex; flex-wrap: wrap; gap: clamp(20px, 3.4vw, 52px); align-items: center; justify-content: center; margin: 24px 0 0; padding: 0 0 clamp(24px, 3vw, 34px); border-bottom: 1px solid var(--line); } .laurel { display: flex; align-items: center; gap: 12px; color: var(--fg); } .laurel::before, .laurel::after { content: ""; width: 20px; height: 40px; flex: none; opacity: 0.85; background-color: var(--accent); -webkit-mask: url("../assets/laurel-half.svg") center/contain no-repeat; mask: url("../assets/laurel-half.svg") center/contain no-repeat; } .laurel::after { transform: scaleX(-1); } .laurel-text { text-align: center; line-height: 1.25; } .laurel-text b { display: flex; align-items: center; justify-content: center; gap: 0.42em; font-family: var(--serif); font-weight: 500; font-size: clamp(14px, 1.5vw, 18px); } /* logo sits inline with the bold line, sized to it */ .laurel-logo { height: 0.95em; width: auto; flex: none; } .laurel-logo--tomato { height: 1.2em; } .laurel-text span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); margin-top: 3px; } /* the big two-column body: poster + rail */ .pedestal-stage { display: grid; grid-template-columns: auto 1fr; gap: clamp(36px, 6vw, 92px); align-items: start; margin-top: clamp(48px, 7vw, 88px); } @media (max-width: 900px) { .pedestal-stage { grid-template-columns: 1fr; gap: 44px; } } .pedestal-poster { position: sticky; top: calc(var(--nav-h) + 28px); justify-self: start; } .pedestal-poster img { display: block; height: min(80vh, 860px); width: auto; max-width: 100%; box-shadow: 0 48px 120px rgba(0,0,0,0.7), 0 0 0 1px rgba(179,155,255,0.12); } /* The poster centres itself here (margin: 0 auto), so the buttons under it must centre too — otherwise they sit hard left while the artwork is middled. */ @media (max-width: 900px) { .pedestal-poster { position: static; } .pedestal-poster img { height: auto; width: min(78vw, 420px); margin: 0 auto; } .pedestal-actions { justify-content: center; } } .pedestal-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; } /* pull-quotes */ .quotes { display: grid; gap: clamp(22px, 3vw, 34px); } /* cycling pair on the APM page fades between rotations */ .quotes[data-quote-cycle] { transition: opacity 0.5s var(--ease); } .quotes[data-quote-cycle].is-fading { opacity: 0; } .quote { border-left: 2px solid var(--accent); padding: 2px 0 2px 22px; } .quote p { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(19px, 2.3vw, 28px); line-height: 1.32; color: var(--fg); } .quote cite { display: block; margin-top: 12px; font-style: normal; font-family: var(--sans); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); } .pedestal-block { margin-top: clamp(40px, 6vw, 64px); } /* Same treatment as the ROLE lead on the film pages (.role-lead-label): Archivo 800 at 14px in white, not muted Inter. Rule + spacing stay as they were. */ .pedestal-block > h3 { font-family: var(--display); font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg); margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } /* credits + meta grids on the pedestal */ .cred-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 40px; } @media (max-width: 560px) { .cred-grid { grid-template-columns: 1fr; } } .cred-row { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); } .cred-row dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .cred-row dd { margin: 0; font-family: var(--serif); font-size: 16px; } .award-list { list-style: none; margin: 0; padding: 0; } .award-list li { position: relative; padding: 11px 0 11px 34px; border-bottom: 1px solid var(--line); font-size: 15px; } .award-list li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 24px; height: 21px; opacity: 0.9; background-color: var(--accent); -webkit-mask: url("../assets/laurel.svg") center/contain no-repeat; mask: url("../assets/laurel.svg") center/contain no-repeat; } .award-list li b { color: var(--accent); font-weight: 600; } /* ---------- about -------------------------------------------------------- */ /* white-space: pre-line honours the explicit line breaks in aboutLead (site.json), so the sub-headline wraps exactly as authored instead of running full-width. */ .about-lead { font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 3.6vw, 50px); line-height: 1.14; letter-spacing: -0.01em; white-space: pre-line; } .about-lead em { font-style: italic; color: var(--accent); } .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.75; color: #cfc9d8; margin: 0 0 18px; max-width: 62ch; } /* brand / publication cluster */ .logo-wall { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(22px, 3vw, 44px); margin-top: 16px; } .brand-name { font-family: var(--serif); font-weight: 400; font-size: clamp(15px, 1.7vw, 20px); color: rgba(244,241,234,0.72); transition: color 0.3s var(--ease); } .logo-item:hover .brand-name { color: var(--accent); } /* light multi-tone monochrome: desaturate + invert keeps the internal tonal detail (PBS faces, the peacock, Sundance) instead of one flat silhouette */ .brand-logo { height: clamp(22px, 3vw, 34px); width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) invert(1); opacity: 0.85; transition: opacity 0.3s var(--ease); } .brand-logo[src*="sundance"] { height: clamp(26px, 3.4vw, 39px); } .logo-item:hover .brand-logo { opacity: 1; } /* press list */ .press-list { border-top: 1px solid var(--line); margin-top: 8px; } /* Hover goes purple, matching the footer links — a dim-to-60% fade read as the link going away rather than lighting up. */ .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: color 0.3s var(--ease); } .press-item:hover { color: var(--accent); } .press-outlet { grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); } .press-title { font-family: var(--serif); font-size: 17px; font-weight: 400; 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; } .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; } /* Contact mirrors the landing hero: the "Contact" label takes the .hero-eyebrow treatment, the email takes .hero-title. Scoped to .page-contact so the shared .eyebrow on About / index is untouched. */ .page-contact .eyebrow { font-family: var(--sans); font-size: clamp(14px, 1.5vw, 19px); font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; text-shadow: var(--glow-soft); } .email-huge { display: inline-block; margin: 0; font-family: var(--display); font-weight: 700; /* Must stay on ONE line, and sit ~75-80% of the content width rather than running edge to edge. "racheleseed AT gmail.com" renders ~11.72x its font-size wide; the content box is (100vw - 88px) until --maxw, then a fixed 1472px. The 100px cap covers viewports past --maxw, where the container stops growing. Re-check these numbers if contactEmail ever changes length. */ font-size: clamp(20px, calc(6.5vw - 6px), 100px); white-space: nowrap; line-height: 0.9; letter-spacing: -0.035em; text-shadow: var(--glow), 0 1px 3px rgba(0, 0, 0, 0.4); } .email-huge:hover { color: var(--accent); } .social-row { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 44px; } .social-row a { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .social-row a:hover { color: var(--accent); } /* ---------- footer ------------------------------------------------------- */ .footer { background: #08070b; color: var(--fg); border-top: 1px solid var(--line); } .footer-inner { padding-top: 26px; padding-bottom: 26px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; } .footer-brand { font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--fg); } .footer-brand em { color: var(--periwinkle); font-style: normal; } .footer small { color: rgba(244,241,234,0.42); font-size: 12px; letter-spacing: 0.03em; } /* Must wrap: seven links force a ~560px line, which overflowed the viewport on phones (the .footer-inner above wraps, but this row could not break internally). */ .footer-links { display: flex; flex-wrap: wrap; gap: 12px 22px; } .footer-links a { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(244,241,234,0.55); } .footer-links a:hover { color: var(--accent); } /* footer links hover per-category too, matching the header nav */ .footer-links a[href*="development"]:hover { color: #f76ea0; } .footer-links a[href*="films"]:hover { color: #f7b76e; } .footer-links a[href*="archive"]:hover { color: #6ef7c5; } .footer-links a[href*="about"]:hover { color: #b2dffa; } .footer-links a[href*="contact"]:hover { color: #f7d76e; } /* ---------- 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; } } /* ---------- mobile nav --------------------------------------------------- */ @media (max-width: 660px) { .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: rgba(11,10,15,0.98); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; transform: translateY(-120%); transition: transform 0.4s var(--ease); } .nav-links.open { transform: translateY(0); } .nav-sep { display: none; } .nav-links a { width: 100%; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .nav-links a[href*="a-photographic-memory"] { border: 0; border-bottom: 1px solid var(--line); padding: 16px 0; } .nav--transparent .nav-links { background: rgba(11,10,15,0.98); } } /* Footer chip placement is viewport-dependent, so it's done with flex `order` rather than duplicated markup. The DOM order is the mobile one (chip last, after Contact); above the 660px breakpoint the chip and its divider are pulled back to the front of the row. */ @media (min-width: 661px) { .footer-links a[href*="a-photographic-memory"] { order: -2; } .footer-links .nav-sep { order: -1; } }