/* ═══════════════════════════════════════════════
FILM PAGE — CINEMATHS · 1890s BROADSHEET STYLE
═══════════════════════════════════════════════ */
/* ── Typeface stack ─────────────────────────────
G lo*beL → Globe Gothic (slab gothic headlines)
"Block Berthold BQ" → Berthold Block (heavy display)
"Bradley Gratis" → Bradley (ornate serif)
"Century731 BT" → Century Schoolbook (body)
"Clarendon BQ" → Clarendon (accent slab serif)
──────────────────────────────────────────────── */
.film-page {
font-family: var(--font-page-body);
color: var(--color-page-text);
max-width: 780px;
margin: 0 auto;
padding: 0 24px 60px;
}
:root {
/* ── Colors ─────────────────────────────────────────────────────── */
/* — Page — */
--color-page-text: #1a1008; /* Base body text color for the entire .film-page wrapper */
/* — Masthead — */
--color-masthead-border-top: #1a1008; /* Heavy top rule of the masthead header */
--color-masthead-border-bottom: #6b3f0f; /* Thin bottom rule closing out the masthead */
--color-masthead-divider-upper: #6b3f0f; /* ::before hairline under the year tag (wide, 70%) */
--color-masthead-divider-lower: #6b3f0f; /* ::after hairline under the title (narrow, 50%) */
--color-year-tag-text: #6b3f0f; /* "COUNTRY · YEAR · LANGUAGE" line above the title */
--color-title-text: var(--ink-warm); /* Main film title (H1) */
--color-byline-text: #6b3f0f; /* "A Film by ___" director byline under the title */
/* — Rule dividers — */
--color-double-rule: #6b3f0f; /* Double-line
between masthead and body */
--color-thin-rule: #6b3f0f; /* Single-line
between body and lower sections */
/* — Body layout — */
--color-body-border-bottom: #6b3f0f; /* Bottom border closing the poster+vitals grid row */
--color-poster-col-border: #6b3f0f; /* Right-hand divider between poster column and vitals column */
/* — Poster — */
--color-poster-border: #1a1008; /* Solid border framing the actual poster ![]()
*/
--color-poster-shadow: #6b3f0f; /* Offset drop-shadow behind the poster image */
--color-poster-placeholder-bg: rgba(107,63,15,.18); /* Fill color of the "No Poster Available" box */
--color-poster-placeholder-border: #6b3f0f; /* Border of the "No Poster Available" box */
--color-poster-placeholder-shadow: #6b3f0f; /* Offset drop-shadow behind the placeholder box */
--color-poster-placeholder-label: #6b3f0f; /* "NO POSTER / AVAILABLE" text inside the placeholder */
--color-poster-ornament: #6b3f0f; /* Decorative ❧ glyph inside the placeholder */
/* — Rating medallion — */
--color-medallion-border: #1a1008; /* Outer border of the rating medallion box */
--color-medallion-bg: #1a1008; /* Fill of the rating medallion box */
--color-medallion-text: #f0c878; /* Grade letter, score, and percentile text (and the ✦ corner marks, inherited) */
/* — Vitals table — */
--color-vitals-section-head-text: #6b3f0f; /* "Particulars" / "Principal Cast" section labels */
--color-vitals-section-head-border: rgba(107,63,15,.18); /* Hairline under each vitals section label */
--color-vitals-row-border: rgba(107,63,15,.18); /* Divider line between each row of the vitals table */
--color-vitals-label-text: #6b3f0f; /* Left-column labels in vitals table (Runtime, Certificate, etc.) */
--color-vitals-value-text: var(--ink-warm); /* Right-column values in vitals table */
/* — Seen counter — */
--color-seen-counter-border: rgba(107,63,15,.18); /* Top divider separating the seen-counter row from the table above */
--color-seen-dot-filled: #1a1008; /* Solid dot representing one viewing */
--color-seen-dot-empty-border: #6b3f0f; /* Outline of an unfilled/empty seen dot */
--color-seen-label-text: #6b3f0f; /* "Seen × N" label and the "Last: date" label */
--color-seen-overflow-count-text: #6b3f0f; /* [inline style, film.njk L136] "+N" shown when times_seen exceeds 10 dots */
/* — Credits — */
--color-section-banner-bg: #1a1008; /* Fill behind "✦ Credits ✦" / "✦ Appears On ✦" banners */
--color-section-banner-text: #f0c878; /* Text/glyph color inside the section banners */
--color-credit-row-border: rgba(107,63,15,.18); /* Divider line between each credit row */
--color-credit-label-text: #6b3f0f; /* Credit role labels (Direction, Screenplay, Music, etc.) */
--color-credit-value-text: var(--ink-warm); /* Credit names (the people/values) */
/* — Cast list (inline style in film.njk) — */
--color-cast-list-text: var(--ink-warm); /* [inline style, film.njk L117] Principal cast names cell */
/* — Lists / tags —
* NOTE: .list-tag is declared twice in film.css (once early, once
* near the bottom). CSS cascade means the SECOND declaration
* currently wins. Both are captured below so nothing is lost. */
--color-list-tag-border-v1: #6b3f0f; /* [1st .list-tag def — currently overridden] bordered pill outline */
--color-list-tag-text-v1: #6b3f0f; /* [1st .list-tag def — currently overridden] pill text color */
--color-list-tag-hover-bg-v1: #1a1008; /* [1st .list-tag:hover def — currently overridden] fill on hover */
--color-list-tag-hover-text-v1: #f0c878; /* [1st .list-tag:hover def — currently overridden] text on hover */
--color-list-tag-hover-border-v1: #1a1008; /* [1st .list-tag:hover def — currently overridden] border on hover */
--color-list-tag-text-v2: var(--ink-warm); /* [2nd .list-tag def — currently ACTIVE] borderless tag text color */
--color-list-tag-hover-text-v2: #6b3f0f; /* [2nd .list-tag:hover def — currently ACTIVE] text color on hover */
--color-list-sep: #6b3f0f; /* ✦ separator glyph between list tags */
/* — Footer —
* NOTE: .back-link is also declared twice (once mid-file, once
* near the bottom). The SECOND declaration currently wins. */
--color-footer-border: #6b3f0f; /* Double-line top border of the page footer */
--color-footer-ornament: #6b3f0f; /* "· ✦ · ✦ · ✦ ·" decorative line in the footer */
--color-back-link-text-v1: #6b3f0f; /* [1st .back-link def — currently overridden] "Return to the Register" text */
--color-back-link-border-v1: #6b3f0f; /* [1st .back-link def — currently overridden] underline */
--color-back-link-hover-text-v1: var(--ink-warm); /* [1st .back-link:hover def — currently overridden] */
--color-back-link-hover-border-v1: var(--ink-warm); /* [1st .back-link:hover def — currently overridden] */
--color-back-link-text-v2: var(--ink-warm); /* [2nd .back-link def — currently ACTIVE] link text color */
--color-back-link-hover-text-v2: #6b3f0f; /* [2nd .back-link:hover def — currently ACTIVE] hover color */
--color-release-note-text: #6b3f0f; /* "N days after the dawn of cinema" footnote */
/* — Ledger links (director/cast/genre/country links) — */
--color-vitals-link-text: var(--ink-warm); /* Default color of a.vitals-link (used in vitals table + credits) */
--color-vitals-link-hover-text: #6b3f0f; /* Hover color of a.vitals-link */
--color-byline-link-text: #6b3f0f; /* a.vitals-link specifically inside the director byline */
--color-byline-link-hover-text: var(--ink-warm); /* Hover color of that byline link */
/* ── Fonts ───────────────────────────────────────────────────────
* None of these are currently tokenized — every value below is
* copied verbatim from its hardcoded font-family stack in
* film.css / film.njk. Several stacks are identical or near-
* identical; each still gets its own name per your instructions.
* ──────────────────────────────────────────────────────────────── */
/* — Page — */
--font-page-body: 'century731', Georgia, serif; /* Base body font for .film-page */
/* — Masthead — */
--font-year-tag: "clarendon", Georgia, serif; /* Country · Year · Language line */
--font-title: 'silentina-film', 'globe', Impact, serif; /* Main film title (H1) */
--font-byline: 'century731', 'bradley', serif; /* "A Film by ___" byline */
/* — Poster — */
--font-poster-placeholder-label: 'clarendon', 'clarendon', serif; /* "NO POSTER / AVAILABLE" text */
/* — Rating medallion — */
--font-rating-grade: 'block', 'globe', Impact, serif; /* Big letter grade (A, B+, etc.) */
--font-rating-score: 'block', serif; /* "NN / 100" score line */
--font-rating-percentile: 'century731', 'century731', serif; /* "Nth percentile" line (no Georgia fallback, unlike font-page-body) */
/* — Vitals table — */
--font-vitals-section-head: 'globe', 'globe', 'clarendon', 'clarendon', serif; /* "Particulars" / "Principal Cast" labels */
--font-vitals-label: 'clarendon', 'clarendon', serif; /* Left-column row labels */
--font-vitals-value: 'century731', 'century731', Georgia, serif; /* Right-column row values */
/* — Seen counter — */
--font-seen-label: 'clarendon', 'clarendon', serif; /* "Seen × N" / "Last:" labels */
--font-seen-overflow-count: 'clarendon', serif; /* [inline style, film.njk L136] "+N" overflow count — note: shorter fallback stack than font-seen-label, missing the 'clarendon' fallback step */
/* — Credits — */
--font-section-banner: 'globe', 'globe', 'clarendon', serif; /* "✦ Credits ✦" / "✦ Appears On ✦" banners — note: missing the 'clarendon' fallback step that font-vitals-section-head has */
--font-credit-label: 'clarendon', 'clarendon', serif; /* Credit role labels */
--font-credit-value: 'century731', 'century731', Georgia, serif; /* Credit names */
/* — Cast list (inline style in film.njk) — */
--font-cast-list: 'century731', 'century731', Georgia, serif; /* [inline style, film.njk L117] Principal cast names cell */
/* — Lists / tags —
* Declared twice in film.css (see color note above); both
* instances use the identical stack, so this collapses to one. */
--font-list-tag: 'clarendon', 'clarendon', serif; /* .list-tag, both declarations */
/* — Footer —
* Also declared twice; both instances use the identical stack. */
--font-back-link: 'clarendon', 'clarendon', serif; /* .back-link, both declarations */
--font-release-note: 'century731', 'century731', Georgia, serif; /* Italic footnote under the footer */
}
/* ── Masthead / Title block ──────────────────────── */
.film-masthead {
text-align: center;
padding: 28px 12px 20px;
border-top: 3px solid var(--color-masthead-border-top);
border-bottom: 1px solid var(--color-masthead-border-bottom);
margin-bottom: 0;
position: relative;
}
.film-masthead::before {
content: '';
display: block;
height: 1px;
background: var(--color-masthead-divider-upper);
margin: 5px auto 10px; /* Increased the 0 to 10px to push text down */
width: 70%;
}
.film-masthead::after {
content: '';
display: block;
height: 1px;
background: var(--color-masthead-divider-lower);
margin: 5px auto 0;
width: 50%;
}
.film-masthead::after {
margin-top: 3px;
width: 50%;
}
.film-year-tag {
font-family: var(--font-year-tag);
font-size: 10px;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--color-year-tag-text);
display: block;
margin-bottom: 10px;
}
.film-title {
font-family: var(--font-title);
font-size: clamp(30px, 5.5vw, 58px);
font-weight: 400;
line-height: 1.0;
letter-spacing: .01em;
color: var(--color-title-text);
margin: 0 0 8px;
text-transform: uppercase;
}
.film-director-byline {
font-family: var(--font-byline);
font-size: 15px;
font-style: italic;
color: var(--color-byline-text);
letter-spacing: .04em;
margin: 0;
}
.film-director-byline em {
font-style: italic;
}
/* ── Double rule divider ─────────────────────────── */
.double-rule {
border: none;
border-top: 3px double var(--color-double-rule);
margin: 0;
}
.thin-rule {
border: none;
border-top: 1px solid var(--color-thin-rule);
margin: 0;
}
/* ── Main body: poster + vitals ─────────────────── */
.film-body {
display: grid;
grid-template-columns: 220px 1fr;
gap: 0;
border-bottom: 1px solid var(--color-body-border-bottom);
margin-top: 0;
}
/* ── Poster column ──────────────────────────────── */
.film-poster-col {
border-right: 1px solid var(--color-poster-col-border);
padding: 18px 18px 18px 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.film-poster-wrap {
position: relative;
width: 100%;
}
.film-poster-wrap img {
width: 100%;
height: auto;
display: block;
border: 2px solid var(--color-poster-border);
box-shadow: 4px 4px 0 var(--color-poster-shadow);
}
.film-poster-placeholder {
width: 100%;
aspect-ratio: 2/3;
background: var(--color-poster-placeholder-bg);
border: 2px solid var(--color-poster-placeholder-border);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 6px;
box-shadow: 4px 4px 0 var(--color-poster-placeholder-shadow);
}
.film-poster-placeholder span {
font-family: var(--font-poster-placeholder-label);
font-size: 9px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--color-poster-placeholder-label);
opacity: .7;
}
.poster-ornament {
font-size: 28px;
color: var(--color-poster-ornament);
opacity: .5;
line-height: 1;
}
/* ── Rating medallion ───────────────────────────── */
.rating-medallion {
width: 100%;
border: 2px solid var(--color-medallion-border);
padding: 10px 8px;
text-align: center;
background: var(--color-medallion-bg);
color: var(--color-medallion-text);
position: relative;
}
.rating-medallion::before,
.rating-medallion::after {
content: '✦';
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 10px;
opacity: .6;
}
.rating-medallion::before { left: 8px; }
.rating-medallion::after { right: 8px; }
.rating-grade {
font-family: var(--font-rating-grade);
font-size: 42px;
font-weight: 900;
line-height: 1;
display: block;
letter-spacing: -.02em;
}
.rating-score {
font-family: var(--font-rating-score);
font-size: 11px;
font-weight: 400;
letter-spacing: .18em;
display: block;
margin-top: 2px;
opacity: .85;
}
.rating-percentile {
font-family: var(--font-rating-percentile);
font-size: 9px;
letter-spacing: .12em;
display: block;
opacity: .65;
margin-top: 1px;
font-style: italic;
}
/* ── Vitals column ──────────────────────────────── */
.film-vitals-col {
padding: 18px 0 18px 20px;
display: flex;
flex-direction: column;
gap: 0;
}
.vitals-section-head {
font-family: var(--font-vitals-section-head);
font-size: 8px;
letter-spacing: .32em;
text-transform: uppercase;
color: var(--color-vitals-section-head-text);
border-bottom: 1px solid var(--color-vitals-section-head-border);
padding-bottom: 3px;
margin: 16px 0 8px;
}
.vitals-section-head:first-child { margin-top: 0; }
.vitals-table {
width: 100%;
border-collapse: collapse;
font-size: 12.5px;
}
.vitals-table tr {
border-bottom: 1px solid var(--color-vitals-row-border);
}
.vitals-table tr:last-child {
border-bottom: none;
}
.vitals-table td {
padding: 5px 0;
vertical-align: top;
line-height: 1.45;
}
.vitals-table td:first-child {
font-family: var(--font-vitals-label);
font-size: 9px;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--color-vitals-label-text);
width: 110px;
padding-right: 10px;
padding-top: 7px;
}
.vitals-table td:last-child {
font-family: var(--font-vitals-value);
color: var(--color-vitals-value-text);
}
.vitals-table tr td.cast-list-cell {
padding-top: 3px;
padding-bottom: 3px;
font-family: var(--font-cast-list);
color: var(--color-cast-list-text);
font-size: 12.5px;
line-height: 1.55;
text-transform: none;
}
/* ── Seen counter ───────────────────────────────── */
.seen-counter {
display: flex;
align-items: center;
gap: 10px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--color-seen-counter-border);
}
.seen-dots {
display: flex;
gap: 5px;
flex-wrap: wrap;
}
.seen-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--color-seen-dot-filled);
display: inline-block;
}
.seen-dot.empty {
background: transparent;
border: 1.5px solid var(--color-seen-dot-empty-border);
opacity: .4;
}
.seen-label {
font-family: var(--font-seen-label);
font-size: 9px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--color-seen-label-text);
}
.seen-overflow-count {
font-size: 9px;
letter-spacing: .05em;
font-family: var(--font-seen-overflow-count);
color: var(--color-seen-overflow-count-text);
margin-left: 2px;
}
.seen-label-last {
margin-left: auto;
font-size: 8px;
}
/* ── Full-width sections below the fold ─────────── */
.film-lower {
padding: 22px 0 0;
}
/* ── Credits block ──────────────────────────────── */
.credits-block {
margin-bottom: 24px;
}
.section-banner {
background: var(--color-section-banner-bg);
color: var(--color-section-banner-text);
text-align: center;
padding: 5px 12px;
font-family: var(--font-section-banner);
font-size: 9px;
letter-spacing: .38em;
text-transform: uppercase;
margin-bottom: 14px;
}
.credits-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 30px;
font-size: 12.5px;
}
.credit-row {
display: flex;
flex-direction: column;
padding: 7px 0;
border-bottom: 1px solid var(--color-credit-row-border);
gap: 1px;
}
.credit-row:last-child { border-bottom: none; }
.credit-label {
font-family: var(--font-credit-label);
font-size: 8.5px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--color-credit-label-text);
}
.credit-value {
font-family: var(--font-credit-value);
color: var(--color-credit-value-text);
line-height: 1.4;
}
/* ── Lists section ──────────────────────────────── */
.lists-block {
margin-bottom: 24px;
}
.lists-cloud {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 4px 0 8px;
}
.list-tag {
font-family: var(--font-list-tag);
font-size: 10px;
letter-spacing: .1em;
border: 1.5px solid var(--color-list-tag-border-v1);
padding: 3px 9px;
color: var(--color-list-tag-text-v1);
text-decoration: none;
transition: background .15s, color .15s;
white-space: nowrap;
}
.list-tag:hover {
background: var(--color-list-tag-hover-bg-v1);
color: var(--color-list-tag-hover-text-v1);
border-color: var(--color-list-tag-hover-border-v1);
}
/* ── Ornamental footer ──────────────────────────── */
.film-footer {
text-align: center;
padding: 24px 0 0;
margin-top: 8px;
border-top: 3px double var(--color-footer-border);
}
.film-footer-ornament {
font-size: 20px;
color: var(--color-footer-ornament);
display: block;
margin: 0 0 14px;
letter-spacing: .35em;
}
.back-link {
font-family: var(--font-back-link);
font-size: 9px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--color-back-link-text-v1);
text-decoration: none;
border-bottom: 1px solid var(--color-back-link-border-v1);
padding-bottom: 1px;
}
.back-link:hover { color: var(--color-back-link-hover-text-v1); border-color: var(--color-back-link-hover-border-v1); }
/* ── Release date footnote ──────────────────────── */
.release-note {
font-family: var(--font-release-note);
font-style: italic;
font-size: 11px;
color: var(--color-release-note-text);
text-align: center;
margin: 10px 0 0;
opacity: .8;
}
/* ── Ledger links ───────────────────────────────── */
a.vitals-link {
color: var(--color-vitals-link-text);
text-decoration: none;
border-bottom: none;
background: none;
padding: 0;
margin: 0;
transition: color .14s;
}
a.vitals-link:hover {
color: var(--color-vitals-link-hover-text);
background: none;
}
/* Inside the director byline */
.film-director-byline a.vitals-link {
color: var(--color-byline-link-text);
text-decoration: none;
}
.film-director-byline a.vitals-link:hover {
color: var(--color-byline-link-hover-text);
background: none;
}
/* ── Lists section ──────────────────────────────── */
.list-sep {
font-size: 8px;
color: var(--color-list-sep);
opacity: .6;
margin: 0 6px;
vertical-align: middle;
}
.list-tag {
font-family: var(--font-list-tag);
font-size: 10px;
letter-spacing: .1em;
border: none;
background: none;
padding: 0;
color: var(--color-list-tag-text-v2);
text-decoration: none;
transition: color .14s;
}
.list-tag:hover {
background: none;
color: var(--color-list-tag-hover-text-v2);
}
/* ── Footer ─────────────────────────────────────── */
.back-link {
font-family: var(--font-back-link);
font-size: 9px;
letter-spacing: .3em;
text-transform: uppercase;
color: var(--color-back-link-text-v2);
text-decoration: none;
border-bottom: none;
background: none;
padding: 0;
transition: color .14s;
}
.back-link:hover {
color: var(--color-back-link-hover-text-v2);
background: none;
}
/* ── Responsive ─────────────────────────────────── */
@media (max-width: 640px) {
.film-masthead {
padding: 20px 6px 14px;
}
.film-year-tag {
font-size: 9px;
margin-bottom: 8px;
letter-spacing: .2em;
}
.film-title {
font-size: 2.2rem;
margin-bottom: 6px;
}
.film-director-byline {
font-size: 13px;
}
.film-page {
padding: 0 12px 40px;
}
.film-body {
grid-template-columns: 1fr;
}
.film-poster-col {
border-right: none;
border-bottom: 1px solid var(--color-poster-col-border);
padding: 18px 0;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}
.film-poster-col .film-poster-wrap,
.film-poster-col .film-poster-placeholder {
width: 140px;
max-width: 100%;
flex-shrink: 0;
}
.film-poster-col .rating-medallion {
width: 140px;
flex-shrink: 0;
}
.film-vitals-col {
padding: 18px 0 10px;
}
.seen-counter {
flex-wrap: wrap;
justify-content: space-between;
}
.seen-dots {
order: 3;
width: 100%;
margin-top: 6px;
}
.credits-grid {
grid-template-columns: 1fr;
gap: 0;
}
}