/* ============================================================ EAST BAY FILM CLUB — "LATE SHOW" (v2 — letterboxd cohesion) The last screening of the night, on Letterboxd's own rails: their slate (#14181c family), their gray-blue text (#99aabb), green stars, blue for people, posters that light up green. Type: Bricolage Grotesque (display) · Hanken Grotesk (UI/body, Graphik-adjacent) · Newsreader italic (reviews, quotes) Spline Sans Mono (labels, numerals, meta) ============================================================ */ /* Fonts load via in build.ts's — a font import chained inside the stylesheet was a render-blocking request that couldn't start until the CSS itself had downloaded. */ /* ─── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img { display: block; max-width: 100%; } button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; } [hidden] { display: none !important; } /* ─── Tokens ────────────────────────────────────────────── */ :root { /* letterboxd's slate family, half a stop darker for the late show */ --black: #101418; --panel: #1b2228; --panel-2: #242c34; --hairline: #2c3440; --hairline-soft: rgba(44, 52, 64, 0.6); --heading: #ffffff; --text: #99aabb; /* lb body gray-blue */ --muted: #667788; --dim: #4e5b68; --green: #00e054; /* ratings, data, action */ --green-dim: rgba(0, 224, 84, 0.12); --blue: #40bcf4; /* people, links */ --orange: #ff8000; /* the third dot — flourish only */ --display: 'Bricolage Grotesque', 'Arial Narrow', sans-serif; --sans: 'Hanken Grotesk', 'Helvetica Neue', sans-serif; --serif: 'Newsreader', Georgia, serif; --mono: 'Spline Sans Mono', 'Courier New', monospace; --gutter: clamp(20px, 4vw, 56px); --measure: 1360px; /* consistency tokens — the whole page snaps to these */ --radius-card: 10px; --radius-poster: 4px; --pad-card: 18px; --gap-cards: 16px; --card-min: 300px; --hairline-lit: #445566; /* the stat band's brighter "lit edge" */ } html { scroll-behavior: smooth; } body { background: var(--black); color: var(--text); font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* the projector beam — one fixed atmospheric gradient, no clutter */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(120% 60% at 18% -10%, rgba(140, 180, 230, 0.055), transparent 55%), radial-gradient(80% 40% at 85% 0%, rgba(0, 224, 84, 0.04), transparent 60%); z-index: 0; } body > * { position: relative; z-index: 1; } ::selection { background: var(--green); color: var(--black); } a { color: var(--text); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--blue); } a:focus-visible, button:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; } .meta, .built-at, .stat-label, .badge, .col-desc, .empty, .tab-bar button, .record, .recent-watch { font-family: var(--mono); } /* ════════════════════════════════════════════════════════ MASTHEAD ════════════════════════════════════════════════════════ */ header { max-width: var(--measure); margin: 0 auto; padding: clamp(32px, 5vw, 72px) var(--gutter) 0; } header::before { content: 'NOW SHOWING · A DASHBOARD FOR LETTERBOXD · EAST BAY, CALIFORNIA'; display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--green); margin-bottom: clamp(20px, 3vw, 40px); } header h1 { font-family: var(--display); font-weight: 800; font-size: clamp(54px, 10.5vw, 148px); line-height: 0.96; letter-spacing: -0.03em; text-transform: uppercase; max-width: 10ch; text-wrap: balance; color: var(--heading); margin-bottom: clamp(28px, 4vw, 52px); } /* one green full stop — a nod, not a logo */ header h1::after { content: '.'; color: var(--green); } header .built-at { text-align: right; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); margin: 16px 0 22px; } /* ─── Stat band — the box office numbers ────────────────── */ .stat-band { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--hairline-lit); border-bottom: 1px solid var(--hairline); } .stat { padding: 20px 22px 24px 0; border-right: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 6px; } .stat:last-child { border-right: none; } .stat-num { font-family: var(--display); font-weight: 800; font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; color: var(--heading); font-variant-numeric: tabular-nums; } .stat:first-child .stat-num { color: var(--green); text-shadow: 0 0 32px rgba(0, 224, 84, 0.35); } .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); } /* ─── Member strip — cast credits along the bottom of the hero ── */ .member-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; } .member-chip { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 999px; padding: 8px 18px 8px 9px; transition: border-color 0.18s ease, transform 0.18s ease; } a.member-chip:hover { border-color: rgba(64, 188, 244, 0.5); transform: translateY(-2px); color: inherit; } .member-chip .avatar, .member-chip .avatar-placeholder { width: 36px; height: 36px; border-width: 1px; font-size: 16px; } .member-chip-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .member-chip-name { font-weight: 700; font-size: 14px; color: var(--heading); line-height: 1.2; } .member-chip-name em { font-style: normal; color: var(--dim); padding: 0 1px; } .member-chip-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } /* ════════════════════════════════════════════════════════ SECTIONS ════════════════════════════════════════════════════════ */ main { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter) 56px; counter-reset: reel; } main > section { counter-increment: reel; padding: clamp(40px, 5.5vw, 72px) 0; border-bottom: 1px solid var(--hairline); } main > section:last-child { border-bottom: none; padding-bottom: 32px; } main > section > h2 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.2vw, 42px); letter-spacing: -0.02em; line-height: 1.05; color: var(--heading); margin-bottom: clamp(24px, 3vw, 40px); } main > section > h2::before { content: 'REEL ' counter(reel, decimal-leading-zero); display: block; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.22em; color: var(--green); margin-bottom: 10px; } /* lb's own section-rule convention: small caps gray over a slate rule */ section h3 { font-family: var(--sans); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); border-bottom: 1px solid var(--hairline); padding-bottom: 7px; margin-bottom: 14px; } .who { color: var(--blue); } .nowrap { white-space: nowrap; } .empty { font-size: 12px; color: var(--dim); letter-spacing: 0.04em; } .empty::before { content: '· · · '; color: var(--green); letter-spacing: 0.2em; } /* ════════════════════════════════════════════════════════ REEL 01 — ACTIVITY, the lit-up poster wall ════════════════════════════════════════════════════════ */ .activity-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--gap-cards); /* cards stretch to row height: aligned panel bottoms read as designed air, a 260px void under a short card read as sag */ } /* every entry is one click-target to its letterboxd page (stretched link) */ .activity-item { display: flex; flex-direction: column; gap: 10px; position: relative; } .activity-body > a::after { content: ''; position: absolute; inset: 0; } .activity-item:has(blockquote) { display: grid; grid-template-columns: minmax(100px, 120px) 1fr; gap: 0 20px; align-items: start; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: var(--pad-card); transition: border-color 0.18s ease, transform 0.18s ease; } .activity-item:has(blockquote):hover { border-color: rgba(0, 224, 84, 0.45); transform: translateY(-2px); } /* lb poster grammar: 4px radius, 1px inner ring, crisp green ring on hover */ .poster-sm { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--radius-poster); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); outline: 1px solid rgba(255, 255, 255, 0.08); outline-offset: -1px; background: linear-gradient(165deg, var(--panel-2), var(--black)); transition: transform 0.18s ease, box-shadow 0.18s ease, outline-color 0.18s ease; } .activity-item:hover .poster-sm { transform: translateY(-4px); outline: 2px solid var(--green); outline-offset: -2px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } .activity-item:not(:has(img))::before { content: 'NO STILL'; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--dim); display: grid; place-content: center; aspect-ratio: 2 / 3; border: 1px dashed var(--hairline); border-radius: 4px; background: var(--panel); } .activity-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; overflow-wrap: anywhere; } .activity-body > a { font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1.25; letter-spacing: 0; color: var(--heading); } .activity-body .meta { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } /* letterboxd stars are green — the single strongest cohesion signal */ .stars { color: var(--green); letter-spacing: 0.04em; font-family: var(--sans); } .badge { display: inline-block; align-self: flex-start; font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--green); background: var(--green-dim); border-radius: 999px; padding: 2px 8px 1px; margin-left: 6px; vertical-align: 2px; } .activity-item blockquote { font-family: var(--serif); font-style: italic; font-size: 16.5px; line-height: 1.55; color: var(--text); margin-top: 10px; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; /* caps card height so rows stay even */ overflow: hidden; } .activity-item blockquote p + p { margin-top: 0.5em; } /* spoiler reviews: body stays blurred until the reader opts in. The toggle is a full-bleed overlay sitting ABOVE the card's stretched-link ::after (z-index), so a click reveals the text instead of navigating off to letterboxd. */ .activity-item blockquote.spoiler { display: block; position: relative; -webkit-line-clamp: none; overflow: visible; } .spoiler .spoiler-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; /* same height cap as a normal review */ overflow: hidden; filter: blur(8px); /* 8px on 16.5px serif = fully illegible */ user-select: none; -webkit-user-select: none; transition: filter 0.25s ease; } .spoiler-toggle { position: absolute; inset: 0; z-index: 3; /* above .activity-body > a::after */ display: grid; place-content: center; gap: 3px; width: 100%; cursor: pointer; border: 0; background: transparent; font-family: var(--mono); text-align: center; text-shadow: 0 1px 6px var(--black), 0 0 12px var(--black), 0 0 4px var(--black); } .spoiler-lock { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); } .spoiler-hint { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .spoiler-toggle:hover .spoiler-lock { color: var(--heading); } .spoiler-toggle:focus-visible { outline: 1px solid var(--green); outline-offset: -3px; border-radius: var(--radius-poster); } /* revealed — app.js adds .revealed on click (one-way). The text lifts above the stretched-link overlay so it can actually be read/selected without navigating. */ .spoiler.revealed .spoiler-text { filter: none; user-select: text; -webkit-user-select: text; position: relative; z-index: 3; } .spoiler.revealed .spoiler-toggle { display: none; } /* ════════════════════════════════════════════════════════ REEL 03 — LEADERBOARDS ════════════════════════════════════════════════════════ */ .tab-bar { display: inline-flex; background: var(--panel); border: 1px solid var(--hairline); border-radius: 999px; padding: 4px; margin-bottom: 30px; gap: 2px; } .tab-bar button { white-space: nowrap; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; padding: 8px 20px 7px; border-radius: 999px; color: var(--muted); transition: background 0.15s ease, color 0.15s ease; } .tab-bar button:hover { color: var(--text); } .tab-bar button.active { background: var(--green); color: var(--black); font-weight: 500; } [data-pane] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px var(--gap-cards); } /* tablet band: three leaderboard tables get cramped -> step down to two. Runs to 1100px, not 900: at 901-1024 the 3-col panes were ~300px each and wrapped "(to 25 Jul 2026)" onto a second line. */ @media (min-width: 721px) and (max-width: 1100px) { [data-pane] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lb-table .col-desc { margin: -8px 0 10px; font-size: 10px; } .lb-table table { width: 100%; border-collapse: collapse; } .lb-table td { padding: 9px 0 8px; border-bottom: 1px solid var(--hairline); font-size: 14px; vertical-align: baseline; } .lb-table td:first-child { font-weight: 500; color: var(--heading); white-space: nowrap; } .lb-table td:last-child { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--muted); } /* Ranks live in the markup (see rankTable): a CSS counter can't mark a tie ("=01") or skip zero rows, and the crown rules key off renderer-set classes so a table of one never crowns itself. The Curve crowns both ends — green for the toughest, orange for the most generous. */ .lb-table .rank { font-family: var(--mono); font-size: 11px; color: var(--green); margin-right: 6px; font-variant-numeric: tabular-nums; } .lb-table tr.champ td:first-child, .lb-table tr.champ-end td:first-child { color: var(--heading); font-weight: 700; } .lb-table tr.champ .rank { background: var(--green); color: var(--black); padding: 1px 5px; border-radius: 3px; } .lb-table tr.champ td:last-child { color: var(--green); } .lb-table tr.champ-end .rank { background: var(--orange); color: var(--black); padding: 1px 5px; border-radius: 3px; } .lb-table tr.champ-end td:last-child { color: var(--orange); } /* ════════════════════════════════════════════════════════ MOVIE OPINIONS — Canon shelf · Taste Matches · Where We Clash ════════════════════════════════════════════════════════ */ .opinion-block { margin-top: 44px; } .opinion-block:first-of-type { margin-top: 0; } #opinions h3 { margin: 0 0 2px; } #opinions .col-desc { margin: 0 0 18px; } /* The Canon — a horizontal poster shelf of the club's top feature films */ .canon-shelf { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: 140px; gap: 18px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; scroll-snap-type: x proximity; /* the marquee's edge fade: without it, a cut exactly on a poster boundary reads as "the canon ends at 6" with no hint that 7-8 exist offscreen */ mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); } .canon-film { position: relative; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; } .canon-link { display: block; position: relative; } .canon-film .poster-sm { width: 140px; border-radius: var(--radius-poster); display: block; } .canon-film:hover .poster-sm { outline: 2px solid var(--green); outline-offset: -2px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); } .canon-film:not(:has(img)) .canon-link::before { content: 'NO POSTER'; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--dim); display: grid; place-content: center; aspect-ratio: 2 / 3; border: 1px dashed var(--hairline); border-radius: var(--radius-poster); background: var(--panel); } .canon-rank { position: absolute; top: 8px; left: 8px; z-index: 1; font-family: var(--display); font-weight: 800; font-size: 13px; color: var(--black); background: var(--green); min-width: 20px; text-align: center; border-radius: 4px; padding: 1px 5px; font-variant-numeric: tabular-nums; } .canon-meta { display: flex; flex-direction: column; gap: 3px; } .canon-title { font-weight: 600; color: var(--heading); font-size: 13px; line-height: 1.25; } .canon-stat { display: flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 11px; } .canon-score { color: var(--green); font-weight: 700; font-variant-numeric: tabular-nums; } .canon-raters { color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; } /* Taste Matches — one legible row per member: who they agree with most */ .taste-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 480px)); gap: 0 56px; } .taste-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 11px 0; border-bottom: 1px solid var(--hairline); } .taste-row:nth-last-child(-n+2) { border-bottom: 0; } .taste-pair { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; } .taste-member { font-weight: 700; color: var(--heading); } .taste-arrow { color: var(--dim); } .taste-match { color: var(--heading); } .taste-stat { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); white-space: nowrap; } .taste-pct { color: var(--green); font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; } .taste-shared { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; } .taste-twin { white-space: nowrap; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green); border: 1px solid rgba(0, 224, 84, 0.4); border-radius: 999px; padding: 2px 8px 1px; } .taste-none { color: var(--dim); font-style: italic; } .taste-row-empty .taste-member { color: var(--muted); } /* disagreements — full-size fight tiles, same grammar as screenings but bigger (this section is the marquee drama) and ringed in orange */ .disagreement-list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 28px 18px; align-items: start; } .dis-card { display: flex; flex-direction: column; gap: 10px; position: relative; } .dis-card .poster-sm { width: 100%; border-radius: var(--radius-poster); } .dis-card:hover .poster-sm { transform: translateY(-4px); outline: 2px solid var(--orange); outline-offset: -2px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } .dis-card:not(:has(img))::before { content: 'NO POSTER'; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--dim); display: grid; place-content: center; aspect-ratio: 2 / 3; border: 1px dashed var(--hairline); border-radius: var(--radius-poster); background: var(--panel); } .dis-gap { position: absolute; top: 8px; right: 8px; z-index: 1; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); background: rgba(16, 20, 24, 0.85); border-radius: 999px; padding: 3px 9px 2px; } .dis-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; } .dis-title { font-weight: 700; color: var(--heading); font-size: 16px; line-height: 1.25; } .dis-title::after { content: ''; position: absolute; inset: 0; } /* same voice as the screening rows: names are people, not labels */ .dis-sides { display: flex; flex-direction: column; gap: 3px; font-family: var(--sans); font-size: 12px; color: var(--muted); } .dis-sides .side { white-space: nowrap; } .dis-sides .who { font-weight: 500; } .dis-sides .stars { font-size: 12px; } /* ════════════════════════════════════════════════════════ FAVORITES WALL — auto-scrolling marquee of everyone's top 4 ════════════════════════════════════════════════════════ */ .marquee-band { /* full-bleed: escape main's measure so the strip runs edge to edge */ margin: 0 calc(50% - 50vw); } .marquee { overflow: hidden; scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; /* posters fade at the viewport edges instead of hard-cutting */ mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); } .marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee-scroll calc(var(--marquee-n, 8) * 5s) linear infinite; } .marquee-track:hover { animation-play-state: paused; } .marquee-dup { display: contents; } .marquee-item { margin: 0; flex: 0 0 auto; width: 152px; display: flex; flex-direction: column; gap: 6px; } .marquee-link { display: block; } .marquee-item:hover .poster-sm { outline: 2px solid var(--green); outline-offset: -2px; } .marquee-item .poster-sm { width: 152px; } .marquee-item .title-chip { display: grid; place-content: center; text-align: center; aspect-ratio: 2 / 3; white-space: normal; } .marquee-item figcaption { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); text-align: center; } /* content slides left-to-right; the duplicate half makes the loop seamless */ @keyframes marquee-scroll { from { transform: translateX(-50%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .marquee-track { animation: none; } } /* shared section sub-heading description (Movie Opinions lanes, etc.) */ .col-desc { font-size: 11px; color: var(--dim); letter-spacing: 0.04em; margin-bottom: 14px; } /* ════════════════════════════════════════════════════════ MOVIE NIGHTS — the club's shared history (leads the page) ════════════════════════════════════════════════════════ */ /* club-verdict corner flags — the canon-rank / dis-gap chip grammar, applied to the winning screening cards. The chip row these replace announced "SPREAD: 0.0" at the top of the section about posters two inches below itself; the flag sits on the card, where its evidence (the avg numeral and the star rows) already is. */ .screening-flags { position: absolute; top: 8px; left: 8px; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .flag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px 2px; background: rgba(16, 20, 24, 0.85); white-space: nowrap; } .flag-highest { background: var(--green); color: var(--black); font-weight: 500; } .flag-lowest { color: var(--muted); } .flag-agreed { color: var(--green); } .flag-divided { color: var(--orange); } /* screening tiles — same grammar as the activity wall: poster up top, text beneath, the whole tile clicks through to the film page */ /* Fluid tracks: the viewport picks the column count, not the film count. 190px min fits six across the full 1248px measure — the same ~193px tile Where We Clash uses — so the shelf stays on the page's left rail at every width instead of freezing into a centered block. auto-fill (not auto-fit) keeps empty tracks, so a 2-screening month renders two cards at normal size, not two inflated ones. Short last rows stay ragged on purpose: that's Letterboxd's own poster-shelf idiom. */ .screening-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 28px 18px; align-items: start; } .screening-card { display: flex; flex-direction: column; gap: 10px; position: relative; min-width: 0; } .screening-card:hover .poster-sm { transform: translateY(-4px); outline: 2px solid var(--green); outline-offset: -2px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } .screening-card:not(:has(img))::before { content: 'NO POSTER'; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--dim); display: grid; place-content: center; aspect-ratio: 2 / 3; border: 1px dashed var(--hairline); border-radius: 4px; background: var(--panel); } .screening-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; } .screening-title { font-family: var(--sans); font-weight: 700; font-size: 16px; line-height: 1.25; color: var(--heading); } /* whole tile is the click target (stretched link, like activity tiles) */ .screening-title::after { content: ''; position: absolute; inset: 0; } .screening-card .watched-date { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-variant-numeric: tabular-nums; } .screening-avg { display: flex; align-items: baseline; gap: 6px; } .avg-num { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1; letter-spacing: -0.01em; color: var(--green); font-variant-numeric: tabular-nums; } .avg-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* member verdicts in the site's own sans, names in people-blue — mono caps is for labels, and a person's name is not a label. Raters sort to the top; the absent collapse to one quiet line, so card height encodes attendance. */ .screening-ratings { list-style: none; display: flex; flex-direction: column; gap: 3px; font-family: var(--sans); font-size: 12px; color: var(--muted); } .screening-ratings .who { font-weight: 500; } .screening-ratings .stars { font-size: 12px; letter-spacing: 0.04em; } .screening-ratings .logged { color: var(--text); } .screening-ratings .liked { color: var(--orange); } /* lb's like-heart is orange */ .screening-ratings .notseen { color: var(--dim); font-size: 11px; padding-top: 2px; } /* ════════════════════════════════════════════════════════ ACHIEVEMENTS (inside Leaderboards) ════════════════════════════════════════════════════════ */ .achievements { margin-top: 36px; max-width: 520px; } .all-time-records .record:first-child { border-top: 0; padding-top: 0; } .milestone-card { display: inline-block; font-size: 13px; color: var(--text); background: var(--green-dim); border: 1px solid rgba(0, 224, 84, 0.3); border-radius: var(--radius-card); padding: 10px 16px; margin: 0 8px 10px 0; } .milestone-card strong { color: var(--green); } .all-time-records { margin-top: 14px; display: grid; gap: 10px; } .record { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); border-top: 1px solid var(--hairline); padding-top: 10px; } .record strong { color: var(--green); font-weight: 500; } /* ════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════ */ body > footer { max-width: var(--measure); margin: 0 auto; padding: 0 var(--gutter) 40px; } body > footer p { border-top: 1px solid var(--hairline); padding-top: 22px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); } /* ════════════════════════════════════════════════════════ Motion — gated, restrained ════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { @keyframes houseLights { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } header::before { animation: houseLights 0.5s ease both; } header h1 { animation: houseLights 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s both; } .stat-band { animation: houseLights 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s both; } } /* ════════════════════════════════════════════════════════ Small screens ════════════════════════════════════════════════════════ */ @media (max-width: 720px) { header::before { content: 'NOW SHOWING · EAST BAY, CA'; } .activity-list { grid-template-columns: 1fr; } .disagreement-list { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 20px 12px; } .screening-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; } .tab-bar button { padding: 8px 14px 7px; } /* stat band 2×2 — pinned, not auto-fit: minmax(150px,1fr) fits THREE columns at 460px, and the nth-child divider rules below style a 2×2 that would otherwise not exist */ .stat-band { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2n) { padding-left: 16px; border-right: 0; } .stat:nth-child(n+3) { border-top: 1px solid var(--hairline); } /* leaderboards: titles carry the meaning; descs are repetition at this width */ [data-pane] .col-desc { display: none; } [data-pane] { gap: 24px; } .activity-item:has(blockquote) { grid-column: 1 / -1; grid-template-columns: 92px 1fr; padding: 12px; } .activity-body > a { font-size: 15px; } .stat { padding: 14px 12px 16px 0; } .member-card { grid-template-columns: 50px 1fr; } .avatar { width: 50px; height: 50px; } [data-pane] { grid-template-columns: 1fr; } .taste-list { grid-template-columns: 1fr; } .taste-row:nth-last-child(2) { border-bottom: 1px solid var(--hairline); } }