/* ========================================================================== tokens.css — every value you'd want to tweak lives here. Change these first. base.css and layout.css only reference them. ========================================================================== */ :root{ /* ---- color ------------------------------------------------------------ Deliberately achromatic. The only color on the page should be the film stills. If you add an accent, add it here and nowhere else. Dark. Not pure #000/#fff in either direction: full white on full black haloes badly at these type sizes, and the stills have real black in them, so a near-black page lets the frames sit on it without a seam. */ --ink: #ededed; /* body text, wordmark */ --paper: #0d0d0d; /* background */ --muted: #a0a0a0; /* labels, nav, credits */ --rule: #2e2e2e; /* hairlines */ --frame-bg: #1a1a1a; /* video placeholder before load */ /* Inverted palette, used by the tech page. Same five roles, same names, opposite values -- one design system serving two audiences rather than two designs. Set on rather than so color-scheme travels with it and the browser's own chrome (scrollbars, focus rings, form controls) flips too; on the root would stay dark and the scrollbar with it. Pure #fff/#000 here, unlike the dark palette above. The reason that one backs off the extremes is haloing, which is a light-on-dark artefact -- black on white doesn't have it. Soften --ink to #111 if you want it less stark on a bright screen. */ } .theme-light{ --ink: #000000; --paper: #ffffff; --muted: #666666; /* 5.7:1 on white -- passes AA for body text */ --rule: #dcdcdc; --frame-bg: #eeeeee; color-scheme: light; } :root{ /* ---- type ------------------------------------------------------------- Two roles: a grotesque for anything set in caps (wordmark, nav, labels, titles), a serif for prose (loglines, bio). */ --font-display: 'Archivo', Helvetica, Arial, sans-serif; --font-body: 'Newsreader', Georgia, serif; --size-wordmark: clamp(1.5rem, 1.1rem + 2.2vw, 2.75rem); --size-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem); --size-lead: 1.125rem; /* bio */ --size-logline: 1.0625rem; --size-title: 1.125rem; /* film titles in a list */ --size-film-title: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); /* film title on its own page — subordinate to the wordmark, dominant on the page */ --size-label: 0.6875rem; /* nav, tags, social */ --size-footer: 0.625rem; /* the footer line, the smallest type on the site */ --size-section: 1.25rem; /* section headings on /tech. Above the 1.125rem company names they sit over, so the hierarchy reads; below the wordmark, so they don't compete with it */ /* letter-spacing for uppercase settings */ --track-wordmark: 0.24em; --track-label: 0.18em; --track-footer: 0.16em; --track-section: 0.14em; /* less than --track-label: tracking is there to open up small caps, and the need falls away as the type grows */ /* ---- space ------------------------------------------------------------ */ --gutter: clamp(1.25rem, 5vw, 4rem); /* page side padding */ --stack: clamp(4rem, 11vh, 8rem); /* gap between sections */ --page-top: clamp(2rem, 4vh, 3rem); /* nav rule to first content. Deliberately smaller than --stack: a gap that reads as breathing room between sections reads as a missing element at the top */ --measure: 960px; /* max content width */ --measure-text: 72ch; /* max prose width. 45–75 characters is the readable band; sitting near the top of it fills more of the page without becoming a chore */ --credits-gap: clamp(1.5rem, 4vw, 3.5rem); /* credits role to name */ --credits-lift: 0.1875rem; /* 3px. Optical only. Roles are small caps and names a much larger serif, so on a shared baseline the name's capitals stand ~5px taller and the label reads as sitting low. This lifts the role by half that, centring the two cap bands against each other. Constant because --size-label and --size-logline are both fixed rem; if either becomes fluid, this has to follow */ --poster-w: 400px; /* film poster -- sized as an object, not a hero */ --stills-gap: 0.75rem; /* between stacked stills */ --film-gap: clamp(1.5rem, 4vw, 3rem); /* poster to its text */ --contact-slot: 3.5rem; /* 56px. The hit area, not the mark. Invisible on the page; it exists so the target stays comfortably over the 44px a thumb needs, whatever --social-mark is set to */ --social-mark: 2.125rem; /* 34px. Sized against the wordmark, not against the nav: the marks are the only content on this page, so they sit just under the 44px name rather than down with the labels */ --mark-scale-mail: 0.93; /* the envelope. Same job as --mark-dim-word, opposite lever: it is a chunkier solid than the three brand marks and measured 14% more ink at the same box. Scaled back rather than dimmed -- a slightly smaller solid reads as sized, a dimmed one reads as disabled */ --mark-dim-word: 0.75; /* IMDb only, and an optical correction rather than a style. Instagram and Vimeo are compact solids and measure within 3% of each other untouched; a solid wordmark is denser than either, and this is what brings it back level. Retune it against the others if --social-mark moves */ --contact-gap: 1.75rem; /* square to square */ --job-gap: clamp(2rem, 5vh, 2.75rem); /* between roles on /tech */ --section-gap: clamp(2.5rem, 6vh, 3.25rem); /* section to divider, and divider to the next section. Equal on both sides so the rule sits in the middle of the gap rather than belonging to one side */ --job-logo: 2rem; /* 32px. Sized against the 18px company name beside it, not the 11px labels: it should read as belonging to the heading */ --job-unit-gap: 0.6rem; /* company name to its business unit. Deliberately about half the 1.25rem gap between items in .job__head, so "Oracle" and "Oracle Cloud Infrastructure" bind to each other before either binds to the role */ --job-logo-radius: 6px; /* these are square avatars, so a corner is needed or they read as photographs rather than marks */ --spec-gap: clamp(1.5rem, 4vw, 3rem); /* label to value on /tech */ --spec-row: 1.1rem; /* row to row in a spec list */ --link-mark: 0.9375rem; /* 15px. The marks in the /tech link row, sized off the cap height of the 11px tracked label beside them rather than off its em, which is what makes the two read level */ --link-bleed: 0.85; /* An optical correction for a mark drawn flush to its own viewBox. LinkedIn's square touches all four edges; the envelope and the document are Material glyphs and carry ~2 units of padding inside theirs. Rendered at one size the square measured 48% more ink, so it is scaled back to sit level */ --link-gap: 0.5rem; /* mark to its own word. Under the gap between links, so each pair binds before the row does */ --film-text-min: 20rem; /* text column stops shrinking here and drops below the poster instead */ --ratio-film: 1920 / 1012; /* the film's native 1.90:1 — what the stills are cropped to, and the shape the picture actually is */ --ratio-source: 16 / 9; /* the shape of the FILE on Vimeo, which is not the same thing: it's a 16:9 container with the 1.90:1 picture letterboxed inside it. The player fits the file, not the picture, so the frame has to match this or the player pillarboxes and paints its own background into the gap. Re-upload at true 1.90:1 and this becomes --ratio-film */ /* ---- motion ----------------------------------------------------------- */ --ease: .2s ease; --dim: 0.86; /* image opacity on hover — the only hover cue on a poster */ }