/* ════════════════════════════════════════════════════════════ D ESIG*N CONCEPT ──────────────────────────────────────────────────────────── A Victorian bound annual's front matter. The reader has opened the cover of the "Cinemaths Annual Compendium, Edition V" and found the classified index of contents. Every typographic choice echoes this premise: · Reversed ink section bands (the printer's chapter openings) · CSS dot-leaders (the compositor's standard index format) · Three-column classified grid (the Victorian newspaper ad register) · Ruled progress measures (the compositor's column gauge) · Diamond ornament chains (the period separator standard) ════════════════════════════════════════════════════════════ */ :root { /* ── Colors — Global / Body ─────────────────────────────────── */ --body-bg: #f4b97d; /* Background of the element (the page's base paper color) */ --body-text-color: #151515; /* Default text color of the element */ /* ── Colors — Rule & Ornament Primitives ───────────────────── */ --rule-thick-color: #151515; /* Color of .r-thick heavy horizontal rules (title page) */ --rule-mid-color: #151515; /* Color of .r-mid medium-weight rules (title page) */ --rule-thin-color: #151515; /* Color of .r-thin hairline rules (title page) */ --diamonds-fill-color: #151515; /* Fill of the diamond-chain ornament SVG (baked into the data-URI — must be updated by hand if changed) */ /* ── Colors — Title Page ────────────────────────────────────── */ --title-eyebrow-color: #151515; /* Text color of the "Cinemaths · A Complete Index" eyebrow line */ --title-edition-color: #151515; /* Text color of the "Edition the Fifth" line */ --title-heading-color: #151515; /* Text color of the big "The Register of Lists" H1 */ --title-subtitle-color: #151515; /* Text color of the subtitle line under the H1 */ --title-credits-color: #151515; /* Text color of the "Five Departments · Sixty Directors · N Films" credits line */ /* ── Colors — Contents Index ────────────────────────────────── */ --contents-border-color: #151515; /* Top & bottom rule of the contents box */ --contents-underline-color: #151515; /* Faint rule sitting just above the bottom border of the contents box */ --contents-header-bg: #e8a35a; /* Background of the "Contents of this Volume" header bar */ --contents-header-border-color: rgba(21,21,21,0.22); /* Bottom border of the contents header bar */ --contents-header-rule-color: #151515; /* Color of the two flanking rules beside the contents header text */ --contents-header-text-color: #151515; /* Text color of "Contents of this Volume" */ --contents-grid-divider-color: rgba(21,21,21,0.12); /* Divider lines between the 4 contents grid columns */ --contents-item-color: #151515; /* Text color of each contents grid link */ --contents-item-border-color: rgba(21,21,21,0.1); /* Right-hand border between contents grid items */ --contents-item-hover-bg: rgba(21,21,21,0.04); /* Background tint on hover for a contents grid item */ --contents-item-num-color: #151515; /* Color of the roman numeral (I, II, III, IV) in each contents item */ --contents-item-name-color: #151515; /* Color of the section name in each contents item */ --contents-item-sub-color: #151515; /* Color of the small subtitle line in each contents item */ /* ── Colors — Section Shell (band / rules / intro / closer) ─── */ --section-band-bg: #151515; /* Background of the reversed-ink section header band (I., II., III., IV.) */ --section-band-texture-color: rgba(255,255,255,0.012); /* Faint conic-gradient "projector beam" texture overlaid on the section band */ --section-band-inset-border: rgba(244,185,125,0.16); /* Inset frame line drawn just inside the section band */ --section-band-roman-color: #f4b97d; /* Color of the roman numeral (I./II./III./IV.) on the left of the band */ --section-band-title-color: #f4b97d; /* Color of the centered section title text on the band */ --section-band-aside-color: #f4b97d; /* Color of the small aside text on the right of the band (e.g. film counts) */ --section-rule-thick-color: #151515; /* Thick rule directly under the section band */ --section-rule-thin-color: #151515; /* Hairline rule directly under the thick rule */ --section-intro-color: #151515; /* Text color of the italic intro paragraph under each section header */ --section-close-rule-color: #151515; /* Color of the two rules flanking the section-closer ornament */ --section-close-orn-color: #151515; /* Color of the ❧ ✦ ❧ ornament that closes each section */ /* ── Colors — Subsection Headers ───────────────────────────── */ --subsec-head-rule-color: #151515; /* Color of the rules flanking a subsection heading (e.g. "By Decade") */ --subsec-head-text-color: #151515; /* Text color of a subsection heading */ /* ── Colors — Dot-Leader List Entries (.entry) ─────────────── */ --entry-color: #151515; /* Base text color set on the .entry link itself (overridden by child spans) */ --entry-border-color: rgba(21,21,21,0.13); /* Divider line under each list entry (matches root --ink-faint) */ --entry-hover-bg: rgba(21,21,21,0.07); /* Background tint on hover for a list entry (matches root --ink-ghost) */ --entry-orn-color: #151515; /* Color of the ☞ pointing-hand ornament before each entry */ --entry-name-color: #151515; /* Text color of the entry's title */ --entry-lead-color: rgba(21,21,21,0.22); /* Color of the dotted "leader" line between title and note */ --entry-note-color: #151515; /* Text color of the standard trailing note/count on an entry */ --entry-note-badge-bg: #151515; /* Background of the reversed "New" badge variant of the note */ --entry-note-badge-color: #f4b97d; /* Text color of the reversed "New" badge variant of the note */ /* ── Colors — Rankings (Section I) ─────────────────────────── */ --rankings-col-rule-color: #151515; /* Color of the vertical rule between the two rankings columns */ /* ── Colors — Filmography Register (Section III) ───────────── */ --filmo-register-border-color: rgba(21,21,21,0.16); /* Outer border of the .filmo-register and .sub-registers boxes */ --filmo-col-rule-color: #151515; /* Color of the vertical rules between filmography columns */ --filmo-col-head-color: #151515; /* Text color of a filmography column header (A–F, G–M, etc.) */ --filmo-col-head-bg: rgba(21,21,21,0.03); /* Background tint of a filmography column header */ --filmo-col-head-border-color: rgba(21,21,21,0.1); /* Bottom border under a filmography column header */ --filmo-entry-color: #151515; /* Text color of a filmography entry link */ --filmo-entry-border-color: rgba(21,21,21,0.07); /* Divider line under a filmography entry (matches root --ink-ghost) */ --filmo-entry-hover-bg: rgba(21,21,21,0.07); /* Background tint on hover for a filmography entry */ --filmo-entry-name-color: #151515; /* Text color of a director/entity name in the filmography register */ --filmo-dot-done-color: #151515; /* Fill color of the "done" status dot (paired with 0.6 opacity) */ --filmo-dot-partial-color: #151515; /* Fill color of the "partial" status dot (paired with 0.24 opacity) */ --filmo-dot-plan-color: #151515; /* Outline color of the "planned" status dot (paired with 0.2 opacity) */ --filmo-tally-color: #151515; /* Text color of the inline film-count tally (writers/franchises/studios sub-registers) */ /* ── Colors — Filmography Register, Rich Entry Variant ─────── */ --filmo-count-color: #151515; /* Text color of the absolute-positioned film count on a rich filmography entry */ --filmo-stats-color: #151515; /* Text color of the small "avg · bay · Σ" stats micro-line on a rich filmography entry */ /* ── Colors — Watch Projects (Section II) ──────────────────── */ --project-border-color: rgba(21,21,21,0.18); /* Outer border of a project card */ --project-color: #151515; /* Base text/icon color for a project card */ --project-hover-bg: rgba(21,21,21,0.07); /* Background tint on hover for a project card */ --project-corner-star-color: #151515; /* Color of the ✦ corner-star decorations on a project card */ --project-title-color: #151515; /* Text color of the project title */ --project-rule-color: #151515; /* Color of the thin rule under the project title */ --project-stats-color: #151515; /* Text color of the "N of M seen / X%" stats line */ --project-gauge-bg: rgba(21,21,21,0.08); /* Background (unfilled track) of the progress gauge */ --project-gauge-border-color: rgba(21,21,21,0.16); /* Border around the progress gauge */ --project-gauge-fill-color: #151515; /* Fill color of the completed portion of the progress gauge */ --project-gauge-hatch-color: rgba(255,255,255,0.2); /* Diagonal hatch overlay drawn on top of the gauge fill */ --project-scope-color: #151515; /* Text color of the italic scope/description line on a project card */ /* ── Colors — Archive & Automation (Section IV columns) ────── */ --archive-col-rule-color: #151515; /* Color of the vertical rule between the archive/automation sub-columns */ /* ── Colors — Footer ────────────────────────────────────────── */ --footer-border-color: #151515; /* Top border of the page footer */ --footer-rule-color: #151515; /* Thin rule just inside the footer's top border */ --footer-orn-color: #151515; /* Color of the ❧ ✦ ❧ ornament in the footer */ --footer-text-color: #151515; /* Text color of the main footer credit line */ /* ── Colors — Indices: Decades & Years (Section IV) ────────── */ --decade-col-rule-color: #151515; /* Color of the vertical rule between the two decade columns */ --year-grid-border-color: rgba(21,21,21,0.16); /* Outer border of the year grid */ --year-cell-border-color: rgba(21,21,21,0.07); /* Bottom & right cell borders inside the year grid (matches root --ink-ghost) */ --year-cell-color: #151515; /* Text color of a year-cell link */ --year-cell-hover-bg: rgba(21,21,21,0.07); /* Background tint on hover for a year cell */ --year-cell-year-color: #151515; /* Text color of the year number inside a year cell */ --year-cell-count-color: #151515; /* Text color of the film count inside a year cell */ --year-cell-shade-bg: rgba(21,21,21,0.025);/* Background tint applied to alternating (odd) decade bands */ /* ── Colors — Indices: Certificates ─────────────────────────── */ --cert-row-border-color: rgba(21,21,21,0.16); /* Outer border of the certificate chip row */ --cert-chip-color: #151515; /* Base text/icon color of a certificate chip */ --cert-chip-border-color: rgba(21,21,21,0.1); /* Right-hand border between certificate chips */ --cert-chip-hover-bg: rgba(21,21,21,0.07); /* Background tint on hover for a certificate chip */ --cert-chip-label-color: #151515; /* Text color of the certificate rating label (e.g. "PG-13") */ --cert-chip-count-color: #151515; /* Text color of the film count on a certificate chip */ --cert-chip-name-color: #151515; /* Text color of the small "films" caption on a certificate chip */ /* ── Colors — Indices: Genre ────────────────────────────────── */ --genre-col-rule-color: #151515; /* Color of the vertical rule between the two genre columns */ /* ── Colors — Indices: Country & Language (text grid) ──────── */ --text-grid-border-color: rgba(21,21,21,0.16); /* Outer border of the country/language grid */ --text-cell-border-color: rgba(21,21,21,0.07); /* Bottom & right cell borders inside the text grid (matches root --ink-ghost) */ --text-cell-color: #151515; /* Text color of a country/language cell link */ --text-cell-hover-bg: rgba(21,21,21,0.07); /* Background tint on hover for a country/language cell */ --text-cell-name-color: #151515; /* Text color of the country/language name */ --text-cell-count-color: #151515; /* Text color of the film count next to the country/language name */ /* ── Fonts — Global / Body ─────────────────────────────────── */ --font-body: 'im-fell-english', Georgia, serif; /* Base font for — the default serif used across the page */ /* ── Fonts — Title Page ─────────────────────────────────────── */ --font-title-eyebrow: 'goldentype-sc-original', serif; /* Font of the "Cinemaths · A Complete Index" eyebrow line */ --font-title-edition: 'playfair-display', Georgia, serif; /* Font of the "Edition the Fifth" line */ --font-title-heading: 'globe', 'playfair-display', serif; /* Font of the big "The Register of Lists" H1 — the site's dedicated film-title face */ --font-title-subtitle: 'playfair-display', Georgia, serif; /* Font of the subtitle line under the H1 */ --font-title-credits: 'goldentype-sc-original', serif; /* Font of the "Five Departments · Sixty Directors · N Films" line */ /* ── Fonts — Contents Index ─────────────────────────────────── */ --font-contents-header-text: 'goldentype-sc-original', serif; /* Font of "Contents of this Volume" */ --font-contents-item-num: 'playfair-display', Georgia, serif; /* Font of the roman numeral in each contents item */ --font-contents-item-name: 'silentina-film', serif; /* Font of the section name in each contents item */ --font-contents-item-sub: 'im-fell-english', Georgia, serif; /* Font of the small subtitle line in each contents item */ /* ── Fonts — Section Shell ──────────────────────────────────── */ --font-section-band-roman: 'playfair-display', Georgia, serif; /* Font of the roman numeral on the section band */ --font-section-band-title: 'clarendon', serif; /* Font of the centered section title on the band */ --font-section-band-aside: 'im-fell-english', Georgia, serif; /* Font of the aside text on the section band */ /* ── Fonts — Subsection Headers ─────────────────────────────── */ --font-subsec-head-text: 'goldentype-sc-original', serif; /* Font of a subsection heading (e.g. "By Decade") */ /* ── Fonts — Dot-Leader List Entries (.entry) ──────────────── */ --font-entry-name: 'century731', Georgia, serif; /* Font of an entry's title */ --font-entry-note: 'goldentype-sc-original', serif; /* Font of the standard trailing note on an entry */ --font-entry-note-num: 'playfair-display', Georgia, serif; /* Font of the numeral variant of the trailing note (overrides --font-entry-note) */ /* ── Fonts — Rankings / Filmography Register ───────────────── */ --font-filmo-col-head: 'block', serif; /* Font of a filmography column header (A–F, G–M, etc.) */ --font-filmo-entry-name: 'century731', Georgia, serif; /* Font of a director/entity name in the filmography register */ --font-filmo-tally: 'playfair-display', Georgia, serif; /* Font of the inline film-count tally */ --font-filmo-count: 'playfair-display', Georgia, serif; /* Font of the film count on a rich filmography entry */ --font-filmo-stats: 'block', serif; /* Font of the "avg · bay · Σ" stats micro-line on a rich filmography entry */ /* ── Fonts — Watch Projects ─────────────────────────────────── */ --font-project-title: 'century731', Georgia, serif; /* Font of the project title on a project card */ --font-project-stats: 'silentina-film', serif; /* Font of the "N of M seen / X%" stats line */ /* ── Fonts — Footer ─────────────────────────────────────────── */ --font-footer-text: 'block', serif; /* Font of the main footer credit line */ /* ── Fonts — Indices: Decades & Years ───────────────────────── */ --font-year-cell-year: 'century731', Georgia, serif; /* Font of the year number inside a year cell */ --font-year-cell-count: 'playfair-display', Georgia, serif; /* Font of the film count inside a year cell */ /* ── Fonts — Indices: Certificates ──────────────────────────── */ --font-cert-chip-label: 'block', serif; /* Font of the certificate rating label (e.g. "PG-13") */ --font-cert-chip-count: 'playfair-display', Georgia, serif; /* Font of the film count on a certificate chip */ --font-cert-chip-name: 'silentina-film', serif; /* Font of the small "films" caption on a certificate chip */ /* ── Fonts — Indices: Country & Language ────────────────────── */ --font-text-cell-name: 'century731', Georgia, serif; /* Font of the country/language name */ --font-text-cell-count: 'playfair-display', Georgia, serif; /* Font of the film count next to the country/language name */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--body-bg); color: var(--body-text-color); font-family: var(--font-body); min-height: 100vh; } /* ════════════════════════════════════════════════════════════ P AGE *WRAPPER ════════════════════════════════════════════════════════════ */ .compendium { max-width: 880px; width: 93%; margin: 0 auto; padding-bottom: 80px; } /* ════════════════════════════════════════════════════════════ T ITLE* PAGE A full Victorian title-page composition with rule architecture, diamond chains, and edition marks. ════════════════════════════════════════════════════════════ */ .title-page { padding: 30px 0 0; text-align: center; } /* Reusable rule elements */ .r-thick { height: 4px; background: var(--rule-thick-color); } .r-mid { height: 2px; background: var(--rule-mid-color); opacity: 0.7; } .r-thin { height: 1px; background: var(--rule-thin-color); opacity: 0.35; } .r-gap-lg { height: 8px; } .r-gap { height: 5px; } .r-gap-sm { height: 3px; } /* Diamond-chain ornament bar */ .diamonds { height: 9px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpolygon points='7,1 13,4.5 7,8 1,4.5' fill='%23151515'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-size: 14px 9px; background-position: center; opacity: 0.65; } .title-page__top-rule-block { display: flex; flex-direction: column; gap: 0; } .title-page__eyebrow { font-family: var(--font-title-eyebrow); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.7em; text-transform: lowercase; color: var(--title-eyebrow-color); opacity: 0.45; margin: 10px 0 3px; } .title-page__edition { font-family: var(--font-title-edition); font-style: italic; font-size: 0.78rem; color: var(--title-edition-color); opacity: 0.38; margin-bottom: 1px; letter-spacing: 0.06em; } .title-page__title { /* GlobeL font — the site's film-title face — for the page title */ font-family: var(--font-title-heading); font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: normal; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; color: var(--title-heading-color); margin: 5px 0 3px; } .title-page__subtitle { font-family: var(--font-title-subtitle); font-style: italic; font-size: 0.88rem; color: var(--title-subtitle-color); opacity: 0.55; margin: 0 0 6px; letter-spacing: 0.03em; } .title-page__credits { display: flex; justify-content: center; align-items: center; gap: 0; font-family: var(--font-title-credits); font-size: 0.6rem; letter-spacing: 0.35em; text-transform: lowercase; color: var(--title-credits-color); opacity: 0.4; margin-bottom: 8px; } .title-page__credits-sep { margin: 0 10px; } .title-page__bottom-rule-block { display: flex; flex-direction: column; gap: 0; margin-bottom: 28px; } /* ════════════════════════════════════════════════════════════ C ONTE*NTS INDEX The reader's first stop: a compact contents block with all four sections listed, as in a Victorian annual. ════════════════════════════════════════════════════════════ */ .contents { border-top: 2px solid var(--contents-border-color); border-bottom: 1px solid var(--contents-border-color); margin-bottom: 34px; position: relative; } .contents::after { content: ''; position: absolute; bottom: 3px; left: 0; right: 0; height: 1px; background: var(--contents-underline-color); opacity: 0.2; } .contents__header { background: var(--contents-header-bg); border-bottom: 1px solid var(--contents-header-border-color); padding: 5px 18px; display: flex; align-items: center; gap: 0; } .contents__header-rule { flex: 1; height: 1px; background: var(--contents-header-rule-color); opacity: 0.2; } .contents__header-text { font-family: var(--font-contents-header-text); font-size: 0.55rem; font-weight: 500; letter-spacing: 0.55em; text-transform: lowercase; color: var(--contents-header-text-color); opacity: 0.55; padding: 0 12px; white-space: nowrap; } .contents__grid { display: grid; grid-template-columns: repeat(4, 1fr); divide-columns: 1px solid var(--contents-grid-divider-color); } .contents__item { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 14px 10px 12px; text-decoration: none; color: var(--contents-item-color); border-right: 1px solid var(--contents-item-border-color); transition: background 0.15s; gap: 2px; } .contents__item:last-child { border-right: none; } .contents__item:hover { background: var(--contents-item-hover-bg); } .contents__item-num { font-family: var(--font-contents-item-num); font-style: italic; font-size: 1.1rem; line-height: 1; color: var(--contents-item-num-color); opacity: 0.2; } .contents__item-name { font-family: var(--font-contents-item-name); font-size: 0.5rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--contents-item-name-color); line-height: 1.4; margin-top: 2px; } .contents__item-sub { font-family: var(--font-contents-item-sub); font-style: italic; font-size: 0.68rem; color: var(--contents-item-sub-color); opacity: 0.4; margin-top: 1px; } /* ════════════════════════════════════════════════════════════ S ECTI*ON SHELL Reversed ink band header + rule cluster + body ════════════════════════════════════════════════════════════ */ .section { margin-bottom: 38px; /* Scroll target offset — account for sticky nothing on this page */ scroll-margin-top: 16px; } .section__band { background: var(--section-band-bg); /* Projector-beam texture borrowed from the title card */ background-image: repeating-conic-gradient( from 0deg at 50% -30%, transparent 0deg 4deg, var(--section-band-texture-color) 4deg 8deg ); padding: 8px 18px 7px; display: flex; align-items: baseline; justify-content: space-between; position: relative; overflow: hidden; } /* Inset frame on the band — same register as the header title card */ .section__band::before { content: ''; position: absolute; inset: 3px 10px; border: 1px solid var(--section-band-inset-border); pointer-events: none; } .section__band-roman { font-family: var(--font-section-band-roman); font-style: italic; font-size: 0.75rem; color: var(--section-band-roman-color); opacity: 0.3; flex-shrink: 0; margin-right: 10px; position: relative; } .section__band-title { font-family: var(--font-section-band-title); font-size: 0.66rem; font-weight: 400; letter-spacing: 0.33em; text-transform: uppercase; color: var(--section-band-title-color); flex: 1; text-align: center; position: relative; } .section__band-aside { font-family: var(--font-section-band-aside); font-style: italic; font-size: 0.62rem; color: var(--section-band-aside-color); opacity: 0.35; flex-shrink: 0; margin-left: 10px; position: relative; } /* Rule cluster: thick rule + hairline, just below the band */ .section__rule-cluster { display: flex; flex-direction: column; margin-bottom: 16px; } .section__rule-cluster-thick { height: 2px; background: var(--section-rule-thick-color); opacity: 0.75; } .section__rule-cluster-thin { height: 1px; background: var(--section-rule-thin-color); opacity: 0.2; margin-top: 2px; } /* Section intro line */ .section__intro { font-style: italic; font-size: 0.8rem; color: var(--section-intro-color); opacity: 0.55; text-align: center; max-width: 560px; margin: 0 auto 18px; line-height: 1.55; letter-spacing: 0.015em; } /* Section closer ornament */ .section__close { display: flex; align-items: center; margin-top: 6px; gap: 0; } .section__close-rule { flex: 1; height: 1px; background: var(--section-close-rule-color); opacity: 0.14; } .section__close-orn { font-size: 0.48rem; color: var(--section-close-orn-color); opacity: 0.18; padding: 0 8px; letter-spacing: 0.3em; } /* ════════════════════════════════════════════════════════════ S UBSE*CTION HEADERS Lighter than the section band — these are internal chapter dividers within a section. ════════════════════════════════════════════════════════════ */ .subsec { margin-bottom: 20px; } .subsec__head { display: flex; align-items: center; gap: 0; margin-bottom: 6px; } .subsec__head-rule { flex: 1; height: 1px; background: var(--subsec-head-rule-color); opacity: 0.18; } .subsec__head-text { font-family: var(--font-subsec-head-text); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.4em; text-transform: lowercase; color: var(--subsec-head-text-color); opacity: 0.45; padding: 0 12px; white-space: nowrap; } /* Variant: centred with no rules (for in-column headers) */ .subsec__head--plain .subsec__head-rule { display: none; } .subsec__head--plain .subsec__head-text { padding: 0; opacity: 0.35; } /* ════════════════════════════════════════════════════════════ L IST *ENTRIES — dot-leader rows The fundamental unit of this page. Structure: [orn] [title] [........dot leader........] [annotation] The dot-leader is a flex-growing element with a dotted border-bottom. The compositor's standard index format, reproduced faithfully in CSS. ════════════════════════════════════════════════════════════ */ .entries { display: flex; flex-direction: column; } .entry { display: flex; align-items: baseline; padding: 3px 4px; border-bottom: 1px solid var(--entry-border-color); text-decoration: none; color: var(--entry-color); transition: background 0.1s; min-height: 26px; } .entry:last-child { border-bottom: none; } .entry:hover { background: var(--entry-hover-bg); } .entry:hover .entry__name { opacity: 1; } .entry:hover .entry__orn { opacity: 0.7; transform: translateX(2px); } .entry__orn { font-size: 0.72rem; color: var(--entry-orn-color); opacity: 0.22; flex-shrink: 0; margin-right: 6px; transition: opacity 0.1s, transform 0.1s; /* Baseline-align the pointing hand with the text */ line-height: 1.2; } .entry__name { font-family: var(--font-entry-name); font-size: 0.84rem; color: var(--entry-name-color); opacity: 0.82; flex-shrink: 0; line-height: 1.35; letter-spacing: 0.01em; transition: opacity 0.1s; } /* Italic variant for lesser entries */ .entry__name--it { font-style: italic; opacity: 0.5; } /* The dot leader */ .entry__lead { flex: 1; min-width: 16px; height: 0; border-bottom: 1px dotted var(--entry-lead-color); margin: 0 7px 4px; } .entry__note { font-family: var(--font-entry-note); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.22em; text-transform: lowercase; color: var(--entry-note-color); opacity: 0.38; flex-shrink: 0; white-space: nowrap; line-height: 1; align-self: center; } /* Italic numeral variant */ .entry__note--num { font-family: var(--font-entry-note-num); font-style: italic; font-size: 0.72rem; font-weight: 400; letter-spacing: 0; opacity: 0.42; } /* Badge variant — reversed chip */ .entry__note--badge { background: var(--entry-note-badge-bg); color: var(--entry-note-badge-color); opacity: 1; font-size: 0.36rem; letter-spacing: 0.25em; padding: 2px 5px 1px; } /* ════════════════════════════════════════════════════════════ S ECTI*ON I — RANKINGS Two-column layout for the ranked-list tables. Left column: by title/decade. Right column: by director/tier. ════════════════════════════════════════════════════════════ */ .rankings-cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 0; } .rankings-col-rule { background: var(--rankings-col-rule-color); opacity: 0.1; margin: 0 18px; } .rankings-col { } /* ════════════════════════════════════════════════════════════ S ECTI*ON II — FILMOGRAPHY REGISTER The page's heaviest section. Three-column classified directory: each column covers a letter range. Entries are compact — name + status dot only. Like a Victorian classified advertisement register. ════════════════════════════════════════════════════════════ */ .sub-registers { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 0; margin-top: 14px; margin-bottom: 14px; border: 1px solid var(--filmo-register-border-color); } .filmo-register { border: 1px solid var(--filmo-register-border-color); display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 0; margin-bottom: 14px; } .filmo-col-rule { background: var(--filmo-col-rule-color); opacity: 0.1; } .filmo-col { display: flex; flex-direction: column; } .filmo-col__head { font-family: var(--font-filmo-col-head); font-size: 0.4rem; font-weight: 800; letter-spacing: 0.48em; text-transform: uppercase; color: var(--filmo-col-head-color); opacity: 0.5; text-align: center; padding: 5px 8px 5px; border-bottom: 1px solid var(--filmo-col-head-border-color); background: var(--filmo-col-head-bg); } .filmo-entry { display: flex; align-items: center; padding: 2px 9px 2px 8px; text-decoration: none; color: var(--filmo-entry-color); border-bottom: 1px solid var(--filmo-entry-border-color); transition: background 0.1s; min-height: 21px; gap: 0; } .filmo-entry:last-child { border-bottom: none; } .filmo-entry:hover { background: var(--filmo-entry-hover-bg); } .filmo-entry__name { font-family: var(--font-filmo-entry-name); font-size: 0.76rem; color: var(--filmo-entry-name-color); opacity: 0.8; flex: 1; line-height: 1.35; } .filmo-entry__name--pending { font-style: italic; opacity: 0.38; } /* Status dot */ .filmo-entry__dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-left: 5px; } .filmo-entry__dot--done { background: var(--filmo-dot-done-color); opacity: 0.6; } .filmo-entry__dot--partial { background: var(--filmo-dot-partial-color); opacity: 0.24; } .filmo-entry__dot--plan { border: 1px solid var(--filmo-dot-plan-color); opacity: 0.2; } /* Inline film count — replaces the status dot in the sub-registers */ .filmo-entry__tally { font-family: var(--font-filmo-tally); font-style: italic; font-size: 0.72rem; color: var(--filmo-tally-color); opacity: 0.38; flex-shrink: 0; margin-left: auto; padding-left: 6px; } /* ════════════════════════════════════════════════════════════ F ILMO*GRAPHY REGISTER — ENHANCED ENTRY .filmo-entry--rich wraps the entry in a column flex so the name row and the stats micro-line stack vertically. The dot is replaced by a film-count numeral at the right. ════════════════════════════════════════════════════════════ */ /* T he en*try stays display:flex but switches to column direction. Three children stack top-to-bottom: 1. .filmo-entry__name (grows to fill width, pushes count right) 2. .filmo-entry__stats (tiny one-line metadata) 3. .filmo-entry__count is positioned absolute at the right of the name row We use position:relative on --rich and absolute on the count so the count floats to the top-right without disturbing the flow. */ .filmo-entry--rich { flex-direction: column; align-items: flex-start; padding-top: 3px; padding-bottom: 4px; min-height: 32px; position: relative; } /* Name — same as before, but now has right padding so count never overlaps */ .filmo-entry--rich .filmo-entry__name { flex: none; width: 100%; padding-right: 30px; /* room for the count */ line-height: 1.3; } .filmo-entry--rich:hover .filmo-entry__name { opacity: 1; } /* Count — absolute top-right of the entry */ .filmo-entry__count { font-family: var(--font-filmo-count); font-style: italic; font-size: 0.72rem; color: var(--filmo-count-color); opacity: 0.35; position: absolute; top: 4px; right: 9px; line-height: 1; } .filmo-entry--completed .filmo-entry__count { opacity: 0.65; } /* Stats micro-line */ .filmo-entry__stats { font-family: var(--font-filmo-stats); font-size: 0.34rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--filmo-stats-color); opacity: 0.4; line-height: 1; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* ════════════════════════════════════════════════════════════ S ECTI*ON III — WATCH PROJECTS Each project is a ruled card with a hatch-fill progress gauge — a compositor's column measure. ════════════════════════════════════════════════════════════ */ .projects { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-bottom: 6px; } .project { border: 1px solid var(--project-border-color); padding: 10px 12px 9px; display: flex; flex-direction: column; gap: 5px; text-decoration: none; color: var(--project-color); transition: background 0.14s; position: relative; } .project:hover { background: var(--project-hover-bg); } /* Corner stars — a nod to the title card corners */ .project::before, .project::after { content: '✦'; position: absolute; font-size: 0.28rem; color: var(--project-corner-star-color); opacity: 0.18; } .project::before { top: 4px; left: 6px; } .project::after { top: 4px; right: 6px; } .project__title { font-family: var(--font-project-title); font-size: 0.84rem; color: var(--project-title-color); line-height: 1.3; text-align: center; padding: 0 10px; letter-spacing: 0.01em; } .project__rule { height: 1px; background: var(--project-rule-color); opacity: 0.1; } .project__stats { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-project-stats); font-size: 0.45rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--project-stats-color); opacity: 0.8; } /* Progress gauge — a ruled column measure */ .project__gauge { height: 5px; background: var(--project-gauge-bg); border: 1px solid var(--project-gauge-border-color); position: relative; overflow: hidden; } .project__gauge-fill { position: absolute; inset: 0 auto 0 0; background: var(--project-gauge-fill-color); opacity: 0.5; /* Diagonal hatching overlay — the compositor's fill indicator */ background-image: repeating-linear-gradient( -45deg, transparent, transparent 2px, var(--project-gauge-hatch-color) 2px, var(--project-gauge-hatch-color) 4px ); } .project__scope { font-style: italic; font-size: 0.68rem; color: var(--project-scope-color); opacity: 0.45; text-align: center; line-height: 1.4; } /* ════════════════════════════════════════════════════════════ S ECTI*ON IV — ARCHIVE & AUTOMATION Two sub-columns: manually curated series on left, auto-generated data lists on right. ════════════════════════════════════════════════════════════ */ .archive-cols { display: grid; grid-template-columns: 3fr 1px 2fr; gap: 0; } .archive-col-rule { background: var(--archive-col-rule-color); opacity: 0.1; margin: 0 16px; } /* ════════════════════════════════════════════════════════════ P AGE *FOOTER ════════════════════════════════════════════════════════════ */ .footer { text-align: center; padding: 18px 0 6px; display: flex; flex-direction: column; gap: 4px; border-top: 3px solid var(--footer-border-color); } .footer::before { content: ''; display: block; height: 1px; background: var(--footer-rule-color); opacity: 0.28; margin-bottom: 12px; } .footer__orn { font-size: 0.5rem; color: var(--footer-orn-color); opacity: 0.2; letter-spacing: 0.4em; } .footer__text { font-family: var(--font-footer-text); font-size: 0.4rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--footer-text-color); opacity: 0.5; } .footer__text--sub { opacity: 0.2; margin-top: 1px; } /* ════════════════════════════════════════════════════════════ S CROL*L REVEAL ════════════════════════════════════════════════════════════ */ .reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ════════════════════════════════════════════════════════════ R ESPO*NSIVE ════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════ R ESPO*NSIVE DESIGN (Breakpoint: 640px) ════════════════════════════════════════════════════════════ */ @media (max-width: 640px) { /* Title page */ .title-page__title { font-size: clamp(1.8rem, 8vw, 2.8rem); } .title-page__subtitle { font-size: 0.8rem; line-height: 1.4; padding: 0 0.5rem; } .title-page__credits { font-size: 0.38rem; letter-spacing: 0.2em; } /* Contents grid */ .contents__grid { grid-template-columns: 1fr 1fr; } .contents__item:nth-child(2n) { border-right: none; } .contents__item:nth-child(3), .contents__item:nth-child(4) { border-top: 1px solid var(--contents-item-border-color); } /* Section bands */ .section__band-roman, .section__band-aside { display: none; } .section__band-title { font-size: 0.48rem; letter-spacing: 0.3em; padding: 0 0.5rem; } /* Section I: Rankings */ .rankings-cols { grid-template-columns: 1fr; } .rankings-col-rule { display: none; } .rankings-col { padding-left: 0 !important; } /* Section II: Filmography Register */ .filmo-register { grid-template-columns: 1fr; } .filmo-register > .filmo-col-rule { display: none; } .filmo-col { border-bottom: 1px solid var(--filmo-col-head-border-color); } .filmo-col:last-child { border-bottom: none; } /* Sub-registers (Writers, Franchises, streaming) */ .sub-registers { grid-template-columns: 1fr; } .sub-registers > .filmo-col-rule { display: none; } .sub-registers > .filmo-col { border-bottom: 1px solid var(--filmo-col-head-border-color); } .sub-registers > .filmo-col:last-child { border-bottom: none; } /* Section III: Watch Projects */ .projects { grid-template-columns: 1fr; } /* Section IV: Curated series & data lists */ .archive-cols { grid-template-columns: 1fr; } .archive-col-rule { display: none; } /* Indices: Years */ .year-grid { grid-template-columns: repeat(3, 1fr); } .year-cell:nth-child(5n) { border-right: 1px solid var(--year-cell-border-color); } .year-cell:nth-child(3n) { border-right: none; } /* Indices: Certificates */ .cert-row { grid-template-columns: repeat(3, 1fr); } .cert-chip:nth-child(3n) { border-right: none; } .cert-chip:nth-child(-n+3) { border-bottom: 1px solid var(--cert-chip-border-color); } /* Indices: Countries & Languages */ .text-grid { grid-template-columns: repeat(2, 1fr); } .text-cell:nth-child(3n) { border-right: 1px solid var(--text-cell-border-color); } .text-cell:nth-child(2n) { border-right: none; } } @media (max-width: 400px) { .contents__grid { grid-template-columns: 1fr; } .contents__item { border-right: none; border-bottom: 1px solid var(--contents-item-border-color); } .contents__item:last-child { border-bottom: none; } .year-grid { grid-template-columns: repeat(2, 1fr); } .year-cell:nth-child(3n) { border-right: 1px solid var(--year-cell-border-color); } .year-cell:nth-child(2n) { border-right: none; } .cert-row { grid-template-columns: repeat(2, 1fr); } .cert-chip:nth-child(3n) { border-right: 1px solid var(--cert-chip-border-color); } .cert-chip:nth-child(2n) { border-right: none; } .cert-chip:nth-child(-n+4) { border-bottom: 1px solid var(--cert-chip-border-color); } .text-grid { grid-template-columns: 1fr; } .text-cell { border-right: none; } } /* ════════════════════════════════════════════════════════════ S ECTI*ON V — INDICES Decades: two-column dot-leader entries, sorted by count. Years: compact 5-column grid — each cell shows the year and its count, grouped by shading every other decade. ════════════════════════════════════════════════════════════ */ .decade-cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; margin-bottom: 20px; } .decade-col-rule { background: var(--decade-col-rule-color); opacity: 0.1; margin: 0 18px; } .year-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--year-grid-border-color); margin-bottom: 6px; } .year-cell { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 7px 3px 8px; border-bottom: 1px solid var(--year-cell-border-color); border-right: 1px solid var(--year-cell-border-color); text-decoration: none; color: var(--year-cell-color); transition: background 0.1s; min-height: 22px; } .year-cell:hover { background: var(--year-cell-hover-bg); } /* Suppress right border on every 5th cell */ .year-cell:nth-child(5n) { border-right: none; } .year-cell__year { font-family: var(--font-year-cell-year); font-size: 0.76rem; color: var(--year-cell-year-color); opacity: 0.78; flex-shrink: 0; } .year-cell__count { font-family: var(--font-year-cell-count); font-style: italic; font-size: 0.68rem; color: var(--year-cell-count-color); opacity: 0.36; flex-shrink: 0; } /* Alternate decade shading — every other decade band gets a tint */ .year-cell--shade { background: var(--year-cell-shade-bg); } .year-cell--shade:hover { background: var(--year-cell-hover-bg); } /* Responsive Year Grid consolidated above */ /* ════════════════════════════════════════════════════════════ S ECTI*ON V — INDICES In addition to year/decade (above), four more sub-layouts: .cert-row — 6 certificate chips in a single row .genre-cols — two-column dot-leader genre list .text-grid — compact N-column named grid for country and language ════════════════════════════════════════════════════════════ */ /* ── Certificate chips ───────────────────────────────────── */ .cert-row { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--cert-row-border-color); margin-bottom: 20px; } .cert-chip { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px 6px 9px; text-decoration: none; color: var(--cert-chip-color); border-right: 1px solid var(--cert-chip-border-color); transition: background 0.12s; gap: 4px; } .cert-chip:last-child { border-right: none; } .cert-chip:hover { background: var(--cert-chip-hover-bg); } .cert-chip__label { font-family: var(--font-cert-chip-label); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; color: var(--cert-chip-label-color); opacity: 0.7; line-height: 1; } .cert-chip__count { font-family: var(--font-cert-chip-count); font-style: italic; font-size: 0.9rem; color: var(--cert-chip-count-color); opacity: 0.32; line-height: 1; } .cert-chip__name { font-family: var(--font-cert-chip-name); font-size: 0.32rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cert-chip-name-color); opacity: 0.36; line-height: 1; } /* ── Genre two-column list ───────────────────────────────── */ .genre-cols { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; margin-bottom: 20px; } .genre-col-rule { background: var(--genre-col-rule-color); opacity: 0.1; margin: 0 18px; } /* ── Text grid (country, language) ──────────────────────── */ .text-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--text-grid-border-color); margin-bottom: 20px; } .text-cell { display: flex; align-items: baseline; justify-content: space-between; padding: 3px 7px 3px 8px; border-bottom: 1px solid var(--text-cell-border-color); border-right: 1px solid var(--text-cell-border-color); text-decoration: none; color: var(--text-cell-color); transition: background 0.1s; min-height: 22px; } .text-cell:hover { background: var(--text-cell-hover-bg); } .text-cell:nth-child(3n) { border-right: none; } .text-cell__name { font-family: var(--font-text-cell-name); font-size: 0.76rem; color: var(--text-cell-name-color); opacity: 0.78; flex-shrink: 1; min-width: 0; line-height: 1.35; } .text-cell__count { font-family: var(--font-text-cell-count); font-style: italic; font-size: 0.68rem; color: var(--text-cell-count-color); opacity: 0.36; flex-shrink: 0; margin-left: 6px; } /* Responsive Cert/Genre/Text consolidated above */