/* ========================================================================= bendavis.mov — stylesheet ========================================================================= Everything you'll want to retune lives in the DESIGN TOKENS block below. Change a value there and it updates everywhere on the site. Light is the default. To flip the whole site to dark, change the data-theme attribute on the tag (in index.html and rtm.html) from "light" to "dark". Nothing else needs to change. ========================================================================= */ /* ------------------------------------------------------------------------- DESIGN TOKENS ------------------------------------------------------------------------- */ :root { /* ---- COLORS: light theme (the default) — cool graphite/slate ---- */ --bg: #E8E7E3; /* the lit content panel */ --bg-deep: #D9D7D0; /* deeper backdrop the panel feathers into */ --surface: #DCDAD5; /* media boxes / cards, a touch deeper */ --ink: #1B1B1D; /* primary text — near-black graphite */ --muted: #6E6E73; /* secondary / metadata text — slate grey */ --hairline: #C9C7C1; /* thin rules */ --accent: #9C7A2E; /* restrained gold/brass — used sparingly */ /* ---- TYPE (Marquee-inspired: cinematic, not encyclopedic) ---- */ --title: "Cinzel", Georgia, serif; /* hero name + page titles — classic film-title serif */ --display: "Oswald", "Arial Narrow", sans-serif; /* project / film / writing titles — condensed */ --body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* body text */ --mono: "Courier Prime", "Courier New", monospace; /* metadata tags + labels — typewriter */ /* ---- TYPE SCALE (fluid: min, preferred, max) ---- */ --step-hero: clamp(2rem, 4.5vw, 3.4rem); /* hero name — modest, not a title card */ --step-h2: clamp(0.85rem, 1.4vw, 0.95rem);/* small section labels */ --step-h3: clamp(1.75rem, 3.6vw, 2.85rem);/* project titles */ --step-body: clamp(1.125rem, 1.6vw, 1.3rem);/* loglines + about */ --step-small: 0.78rem; /* mono tags, footer */ /* ---- SPACING ---- */ --measure: 62ch; /* max line length for body text */ --margin: clamp(1.5rem, 6vw, 7rem); /* strong left/right page margin */ --section-gap: clamp(3rem, 6vw, 5rem); /* vertical space between sections */ --max-width: 1240px; /* outer content cap on big screens */ --radius: 10px; /* rounded corners on media (Apple-ish) */ /* ---- MOTION ---- */ --reveal-distance: 14px; /* how far elements rise as they fade in */ --reveal-time: 0.7s; } /* ---- COLORS: dark alternate ---- Activated by setting data-theme="dark" on . */ [data-theme="dark"] { --bg: #0D0D0F; /* the lit content panel */ --bg-deep: #030303; /* deeper backdrop the panel feathers into */ --surface: #161617; /* media boxes / cards */ --ink: #ECEAE6; /* near-neutral off-white */ --muted: #888890; /* cool grey */ --hairline: #242427; --accent: #D8A24A; /* gold — the one warm note, used sparingly */ } /* ------------------------------------------------------------------------- BASE / RESET ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* offset anchored scrolls so the sticky header doesn't cover headings */ scroll-padding-top: 5rem; /* ---- VINTAGE TITLE-CARD BACKDROP ---- Layered behind everything and fixed in place: a soft edge vignette (the lens falloff of an old title card) over a faint, cloudy paper mottle, on the flat base color. All very subtle. To soften/strengthen the vignette, change the 0.5 below; the paper texture is the SVG's opacity (0.06). */ background-color: var(--bg-deep); background-image: radial-gradient(130% 110% at 50% 32%, rgba(0,0,0,0) 36%, rgba(0,0,0,0.62) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014' numOctaves='3' seed='11'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.06'/%3E%3C/svg%3E"); background-repeat: no-repeat, repeat; background-size: cover, 620px 620px; background-position: center, center; background-attachment: fixed, fixed; } /* ---- LIT CONTENT PANEL ---- A fixed, centered column slightly lifted from the deep backdrop, with its left/right edges feathered so it falls off into the textured background — like a focus pulled onto the content. Sits behind everything (z-index -1). Widen/narrow with --max-width; soften the feather via the mask percentages. */ body::before { content: ""; position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: min(calc(var(--max-width) + 1.5rem), 100%); z-index: -1; pointer-events: none; background: var(--bg); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } body { margin: 0; background: transparent; color: var(--ink); font-family: var(--body); font-size: var(--step-body); line-height: 1.62; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* Visible, on-brand focus outline for keyboard users */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---- FILM GRAIN ---- A faint, fixed texture over everything for an analog, cinematic feel. It's purely decorative (pointer-events: none) and very subtle. To dial it up or down, change --grain-strength; set it to 0 to remove the grain. */ :root { --grain-strength: 0.2; } body::after { content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: var(--grain-strength); mix-blend-mode: soft-light; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } /* ------------------------------------------------------------------------- LAYOUT HELPERS ------------------------------------------------------------------------- */ /* A consistent left margin shared by header, sections, and footer */ .site-header, .section, .hero, .site-footer { padding-left: var(--margin); padding-right: var(--margin); max-width: var(--max-width); margin-inline: auto; } /* ------------------------------------------------------------------------- HEADER (tiny, sticky) ------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(120%) blur(8px); border-bottom: 1px solid var(--hairline); } .wordmark { font-family: var(--mono); font-size: var(--step-small); letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--ink); white-space: nowrap; /* never break "BEN DAVIS" onto two lines */ flex-shrink: 0; } /* On the narrowest screens, drop the wordmark's letter-spacing a touch so it and the nav share the row comfortably. */ @media (max-width: 400px) { .wordmark { letter-spacing: 0.12em; } .site-nav { gap: 0.8rem; } } .site-nav { display: flex; gap: clamp(0.9rem, 3vw, 2.25rem); } .site-nav a { font-family: var(--mono); font-size: var(--step-small); letter-spacing: 0.1em; text-transform: lowercase; text-decoration: none; color: var(--muted); transition: color 0.25s ease; } .site-nav a:hover { color: var(--ink); } /* Active section gets the restrained gold accent */ .site-nav a.is-active { color: var(--accent); } /* ------------------------------------------------------------------------- HERO ------------------------------------------------------------------------- */ .hero { /* A small intro block — just a name + line, then straight into the work. */ padding-top: clamp(1.5rem, 4vh, 2.5rem); padding-bottom: 0; } /* A short gold rule above the name — a single quiet editorial mark */ .hero h1::before { content: ""; display: block; width: 30px; height: 2px; background: var(--accent); margin-bottom: 0.9rem; } .hero h1 { font-family: var(--title); font-size: var(--step-hero); font-weight: 500; line-height: 1.02; letter-spacing: 0.01em; margin: 0; } .hero-line { font-size: clamp(1.15rem, 1.8vw, 1.4rem); color: var(--muted); max-width: var(--measure); margin: 0.75rem 0 0; } .hero-still { margin: clamp(2.5rem, 6vw, 4rem) 0 0; } /* ------------------------------------------------------------------------- SECTIONS (hairline rule on top of each) ------------------------------------------------------------------------- */ .section { padding-top: var(--section-gap); padding-bottom: 0; border-top: 1px solid var(--hairline); } .section-head { margin-bottom: clamp(2rem, 5vw, 3.5rem); } .section-title { font-family: var(--mono); font-size: var(--step-h2); font-weight: 500; letter-spacing: 0.16em; text-transform: lowercase; color: var(--muted); margin: 0; } .section-intro { color: var(--muted); max-width: var(--measure); margin: 0 0 clamp(2rem, 5vw, 3rem); } /* ------------------------------------------------------------------------- PROJECTS (Selected Work) ------------------------------------------------------------------------- */ /* Projects are auto-numbered 01, 02, 03… via a CSS counter, so you never hand-number them — reorder the blocks and the numbers follow. */ #work { counter-reset: project; } .project { counter-increment: project; display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: var(--section-gap); } /* The small gold index numeral above each project title */ .project-index { font-family: var(--mono); font-size: var(--step-small); letter-spacing: 0.12em; color: var(--accent); margin: 0 0 0.85rem; } .project-index::before { content: counter(project, decimal-leading-zero); } /* Two-column on wider screens: text left, media right */ @media (min-width: 880px) { .project { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; gap: clamp(2.5rem, 5vw, 5rem); } } .project-title { font-family: var(--display); font-size: var(--step-h3); font-weight: 500; line-height: 1.02; letter-spacing: 0.01em; margin: 0 0 0.9rem; } /* The mono metadata chips, like afinch's format / year / status */ .project-tags { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0 0 1.25rem; } .project-tags span { font-family: var(--mono); font-size: var(--step-small); letter-spacing: 0.08em; text-transform: lowercase; color: var(--muted); } /* subtle separator dot between tags */ .project-tags span + span::before { content: "/"; margin-right: 1.1rem; color: var(--hairline); } .logline { max-width: var(--measure); margin: 0; } .comp { font-size: 0.95rem; color: var(--muted); margin: 1rem 0 0; } /* Status line (e.g. "Never Die is in development …"). Quiet serif italic with a small gold marker. Only add it when there's something to say. */ .status { font-style: italic; font-size: 0.98rem; color: var(--muted); max-width: var(--measure); margin: 1.4rem 0 0; padding-left: 1.15rem; position: relative; } .status::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; } /* ------------------------------------------------------------------------- MEDIA (placeholders + images + video embeds) ------------------------------------------------------------------------- */ .project-media, .film-media, .about-still { margin: 0; } /* Project stills render at a uniform 16:9 frame (cover-cropped to fill), matching the film embeds. Swap the image; the frame stays consistent. To shift which part of a wide/tall image shows, set object-position (e.g. object-position: center 30%;). */ .project-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center; border-radius: var(--radius); } /* Placeholder box — disappears the moment you drop in a real or embed */ .media-placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); } .media-placeholder span { font-family: var(--mono); font-size: var(--step-small); letter-spacing: 0.12em; text-transform: lowercase; color: var(--muted); } .media-placeholder--wide { aspect-ratio: 21 / 9; } /* Responsive 16:9 wrapper for Vimeo/YouTube iframes */ .embed-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; } .embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ------------------------------------------------------------------------- FILM FEATURE (RTM hero — media on top, text below) ------------------------------------------------------------------------- */ .film-feature { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.75rem); padding-bottom: var(--section-gap); } /* On wider screens, match the Selected Work rhythm: text left, video right. This keeps the embeds from running full-width and dominating the page. */ @media (min-width: 880px) { .film-feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; gap: clamp(2.5rem, 5vw, 5rem); } .film-feature .film-text { order: 1; } .film-feature .film-media { order: 2; } } .film-text { max-width: var(--measure); } .film-note { color: var(--muted); margin: 1.1rem 0 1.75rem; } /* ------------------------------------------------------------------------- PHOTOGRAPHY (quiet 3-up grid; no captions, no hover) ------------------------------------------------------------------------- */ /* Smaller thumbnails in a denser, contact-sheet-style grid. 3-up on phones, 4-up on tablets, 5-up on desktop. */ .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.7rem, 1.4vw, 1.15rem); padding-bottom: var(--section-gap); } @media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1000px) { .photo-grid { grid-template-columns: repeat(5, 1fr); } } /* Each photo is a button so it's keyboard-accessible; styles reset to none. Thumbnails are a uniform square (cover-cropped for the grid only — the original file is never modified, and the lightbox shows it in full). */ .photo { margin: 0; padding: 0; border: 0; background: none; display: block; width: 100%; cursor: pointer; -webkit-appearance: none; appearance: none; } .photo img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); } .photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---- LIGHTBOX ---- (full image at its real aspect ratio, no new window) */ .lightbox { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3.5rem); background: color-mix(in srgb, var(--bg) 92%, #000); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } .lightbox.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .lightbox-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius); } .lightbox-close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 4vw, 3rem); border: 0; background: none; color: var(--ink); cursor: pointer; font-family: var(--mono); font-size: var(--step-small); letter-spacing: 0.12em; text-transform: lowercase; } .lightbox-close:hover { color: var(--accent); } @media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } } /* ------------------------------------------------------------------------- ABOUT ------------------------------------------------------------------------- */ /* About: text left, portrait right — same two-column rhythm as the work/film rows. Collapses to a single column (portrait below text) on narrow screens. */ .about-layout { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.75rem); } @media (min-width: 880px) { .about-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; } } .about-body { max-width: var(--measure); } .about-body p { margin: 0 0 1.3rem; } .about-note { color: var(--muted); font-size: 1rem; } .about-still { margin: 0; } .about-still img, .hero-still img { border-radius: var(--radius); } /* ------------------------------------------------------------------------- FOOTER ------------------------------------------------------------------------- */ .site-footer { margin-top: 0; padding-top: var(--section-gap); padding-bottom: clamp(3rem, 8vw, 6rem); border-top: 1px solid var(--hairline); display: grid; gap: clamp(2rem, 5vw, 3.5rem); font-size: 0.95rem; } @media (min-width: 720px) { .site-footer { grid-template-columns: 1fr 1fr; } } .rep p { margin: 0 0 0.5rem; color: var(--muted); } .rep-role { font-family: var(--mono); font-size: var(--step-small); letter-spacing: 0.1em; text-transform: lowercase; color: var(--accent); margin-right: 0.6rem; } .contact { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; } .social { display: flex; gap: 1.25rem; } .commercial { color: var(--muted); font-size: 0.85rem; margin: 0.75rem 0 0; } /* Quiet text link with an understated underline on hover */ .textlink { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 1px; transition: border-color 0.25s ease, color 0.25s ease; } .textlink:hover { border-color: var(--accent); color: var(--ink); } /* ------------------------------------------------------------------------- SCROLL REVEAL (subtle fade + rise; respects reduced-motion) ------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(var(--reveal-distance)); transition: opacity var(--reveal-time) ease, transform var(--reveal-time) ease; } .reveal.is-visible { opacity: 1; transform: none; } /* Users who prefer less motion get no animation at all */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } } /* ------------------------------------------------------------------------- RTM DETAIL PAGE (rtm.html) ------------------------------------------------------------------------- */ .detail { padding-top: clamp(4rem, 12vh, 8rem); padding-bottom: var(--section-gap); } .back-link { font-family: var(--mono); font-size: var(--step-small); letter-spacing: 0.1em; text-transform: lowercase; color: var(--muted); text-decoration: none; display: inline-block; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .back-link:hover { color: var(--ink); } .detail h1 { font-family: var(--title); font-size: var(--step-hero); font-weight: 500; line-height: 1.02; letter-spacing: 0.01em; margin: 0 0 1.25rem; } .detail .logline { font-size: clamp(1.2rem, 2.2vw, 1.55rem); color: var(--ink); } .detail-body { max-width: var(--measure); margin-top: clamp(2.5rem, 6vw, 4rem); } .detail-body p { margin: 0 0 1.3rem; } .detail-media { margin: clamp(2.5rem, 6vw, 4rem) 0; } /* ------------------------------------------------------------------------- WRITING INDEX (writing.html) ------------------------------------------------------------------------- */ .writing-intro { max-width: var(--measure); margin: 0 0 1.1rem; } .writing-note { font-family: var(--mono); font-size: var(--step-small); letter-spacing: 0.08em; text-transform: lowercase; color: var(--muted); margin: 0; } /* Each format gets its own group with a gold-marked label */ .writing-group { padding-top: var(--section-gap); } .writing-group .section-title { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); } /* One row per script: title + tags + credit on the left, logline on the right */ .writing-item { display: grid; grid-template-columns: 1fr; gap: 0.85rem; padding: clamp(1.6rem, 3.5vw, 2.4rem) 0; border-top: 1px solid var(--hairline); } .writing-item:first-child { border-top: 0; padding-top: 0; } @media (min-width: 800px) { .writing-item { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } } .writing-title { font-family: var(--display); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.8rem; } .writing-title a { text-decoration: none; border-bottom: 1px solid var(--hairline); transition: border-color 0.25s ease; } .writing-title a:hover { border-color: var(--accent); } .writing-credit { font-style: italic; font-size: 0.95rem; color: var(--muted); margin: 0.8rem 0 0; } .writing-logline { max-width: var(--measure); margin: 0; } /* "All writing →" link at the foot of Selected Work on the homepage. Bottom space keeps it from hugging the section divider below. */ .work-more { margin: 0 0 clamp(3rem, 6vw, 5rem); }