/* ==========================================================================
cineapp · styles.css · single stylesheet
==========================================================================
File layout (one section per concern, jump-to via the banner names):
[BASE] palette, body, topbar, page-head, flash, footer
[LIST_SHOWS] filter bar, table, sort arrows, mob-sort, DataTables UI
[DISPLAY_SHOW] (phase 5)
[SHOW_GRAPHS] stats graphs — navigator + Chart.js card
[ACTIVITY_FLOW] activity feed — DataTables timeline
[CHAT] the Trollbox — real-time SocketIO room
[LOGIN] front door — poster medley + login panel
[...] (other pages added here)
Per-user color rules (depending on User.id at render time) are generated
inline by their template via Jinja loops — they cannot live in this static
file. Everything else belongs here.
========================================================================== */
/* ==========================================================================
[BASE] — shared by every page (declared in base.html)
========================================================================== */
:root {
--paper: #f6f3f0;
--paper-soft: #ede8e4;
--paper-card: #ffffff;
--ink: #1c1820;
--ink-mid: #5d5460;
--ink-dim: #9a8fa1;
--rule: #d6cfd8;
--rule-soft: #e8e2ec;
--violet: #6b3a9e;
--violet-rgb: 107, 58, 158; /* channels of --violet, for rgba(var(--violet-rgb), α) */
--violet-soft: #a78bca;
--violet-tint: rgba(var(--violet-rgb), .06);
/* Accent palette — colors used for non-user UI roles (favorite badges,
activity-type tags, legend swatches, etc.). User-specific colors are
read from User.theme_color at render time, NOT picked from this palette. */
--accent-violet: #6b3a9e;
--accent-rose: #b04860;
--accent-teal: #2f8488;
--accent-sage: #5e7a48;
--ok: #5e7a48;
--warn: #b08c00;
--error: #b04860;
/* Font stacks — one source of truth for the type system. */
--font-ui: 'Outfit', sans-serif; /* labels, eyebrows, buttons */
--font-display: 'Bricolage Grotesque', sans-serif; /* italic headings, brand */
--font-body: 'Inter', sans-serif; /* prose, synopsis, comments */
--font-mono: 'JetBrains Mono', monospace; /* stats kickers, byline */
/* Shared radius for large content cards (small blocks like reviews / region
releases keep their own tighter radius). */
--card-radius: 16px;
}
/* ============== [CAPTIONS] — shared uppercase label/eyebrow recipe ==============
One source for the Outfit-900 .14em uppercase ink-dim caption type used across
labels, eyebrows, table headers, the footer signature, etc. font-size stays
per-rule below. */
.foot,
.filter-bar .control-label,
.form-label,
.list thead .cols th,
.dt-info,
.show-nav,
.fav-menu a,
.show-detail .eyebrow,
.reviews-count,
.score-empty,
.mark-studio .mark-score-max,
.wizard-page-indicator,
.wizard-hint,
.wizard-confirm-meta label,
.flux-count,
.graph-nav-label,
.login-field label,
.login-powered-label,
.id-role,
.panel-label,
.profile-field label {
font-family: var(--font-ui); font-weight: 900;
letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-dim);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--paper); color: var(--ink); }
body {
font-family: 'Inter', -apple-system, sans-serif;
font-size: 15.5px;
line-height: 1.55;
font-weight: 400;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
--st-accent: #6b3a9e;
--st-tint: none;
background-image:
var(--st-tint, none),
radial-gradient(1200px 600px at 20% -10%, rgba(var(--violet-rgb),.05), transparent 60%),
radial-gradient(900px 500px at 90% 10%, rgba(176, 72, 96, .035), transparent 60%);
/* Make a stacking context so the fixed .show-type-watermark can use
z-index: -1 to sit behind all normal-flow content while staying above
the body background. Without this, the watermark (z-index: auto, fixed)
paints above every normal-flow block on every page. */
isolation: isolate;
}
body[data-show-type="movie"] {
--st-accent: #6b3a9e;
--st-tint: radial-gradient(1100px 700px at 80% 110%, rgba(107, 58, 158, .07), transparent 60%);
}
body[data-show-type="tvshow"] {
--st-accent: #3a6b9e;
--st-tint: radial-gradient(1100px 700px at 80% 110%, rgba(58, 107, 158, .07), transparent 60%);
}
body[data-show-type="videogame"] {
--st-accent: #3a9e6b;
--st-tint: radial-gradient(1100px 700px at 80% 110%, rgba(58, 158, 107, .07), transparent 60%);
}
::selection { background: var(--violet); color: var(--paper); }
/* ---------- Show-type watermark (fixed bottom-right) ---------- */
.show-type-watermark {
position: fixed;
right: -40px;
bottom: -40px;
font-size: 440px;
line-height: 1;
color: var(--st-accent, var(--ink));
opacity: .07;
pointer-events: none;
transform: rotate(-8deg);
transform-origin: bottom right;
/* Sit behind every page content. body has `isolation: isolate`, so this
z-index is local to body's stacking context: the watermark paints above
body's background but below all normal-flow blocks. */
z-index: -1;
}
@media (max-width: 900px) {
.show-type-watermark { font-size: 280px; right: -28px; bottom: -28px; }
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
/* ---------- Top bar ---------- */
.topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(246, 243, 240, .92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--rule);
}
/* Show-type accent (3px) pinned to the bottom of the STICKY topbar so the
coloured separator stays visible while scrolling. It used to be a separate
non-sticky .show-type-strip div that scrolled out of view. Shown only when a
show-type is active (data-show-type non-empty), matching the old condition. */
body:not([data-show-type=""]) .topbar::after {
content: "";
position: absolute;
left: 0; right: 0; top: 100%;
height: 3px;
background: var(--st-accent);
}
.topbar-inner {
max-width: 1480px;
margin: 0 auto;
padding: 18px 56px;
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 36px;
align-items: center;
}
.brand {
font-family: var(--font-display);
font-style: italic;
font-weight: 600;
font-size: 22px;
letter-spacing: -.02em;
color: var(--ink);
display: inline-flex; align-items: center; gap: 8px;
}
.brand::before {
content: ""; width: 26px; height: 26px; flex: none;
background: url(../images/logos/cineapp-logo.png) center / contain no-repeat;
}
nav.menu { display: flex; gap: 32px; flex-wrap: nowrap; }
nav.menu a {
font-family: var(--font-display);
font-weight: 400;
font-size: 18px;
color: var(--ink-mid);
letter-spacing: -.01em;
white-space: nowrap;
transition: color .2s;
}
nav.menu a:hover, nav.menu a.active { color: var(--violet); }
nav.menu a.active { font-weight: 500; }
/* Mobile hamburger toggle + close button — hidden on desktop */
.menu-toggle, .menu-close { display: none; }
/* ---------- Search pill (top bar) ---------- */
.search-pill {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 18px;
background: var(--paper-card);
border: 1px solid var(--rule);
border-radius: 999px;
font-size: 14px;
color: var(--ink-mid);
min-width: 280px;
transition: border-color .2s;
}
.search-pill:hover, .search-pill:focus-within { border-color: var(--violet); }
.search-pill input {
flex: 1; border: 0; background: transparent; outline: none;
font: inherit; color: var(--ink);
}
.search-pill input::placeholder { color: var(--ink-dim); }
.search-pill button.search-submit {
background: transparent; border: 0; color: var(--ink-dim);
padding: 0 4px; cursor: pointer;
}
.search-pill button.search-submit:hover { color: var(--violet); }
/* ---------- User chip + dropdown ---------- */
.user-chip {
position: relative;
display: inline-flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--ink);
cursor: pointer;
}
/* Avatar circle — shared recipe (initials fallback in Bricolage italic on a
round, clipped chip). Per-instance rules below carry only size/background. */
.user-chip .ava,
.list thead .users th .ava,
.avatar-large,
.subcomment .ava,
.composer .ava,
.msg-avatar,
.id-ava {
position: relative;
border-radius: 50%;
overflow: hidden;
display: grid; place-items: center;
font-family: var(--font-display);
font-style: italic; font-weight: 600;
color: #fefdfa;
}
.user-chip .ava {
width: 32px; height: 32px; font-size: 14px;
background: linear-gradient(135deg, var(--violet-soft), var(--violet));
}
/* Avatar photo overlay — shared by every avatar circle (initials show through
the gradient/initials fallback until the ![]()
loads, then it covers them). */
.user-chip .ava img,
.list thead .users th .ava img,
.avatar-large img,
.subcomment .ava img,
.composer .ava img,
.msg-avatar img,
.id-ava img,
.dash .latest-meta .rater .ava img,
.dash .you-block .ava-big img,
.dash .others .row .ava img,
.act-av img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover;
}
.user-chip #topbar-username { font-weight: 500; }
.user-chip .caret { font-size: 10px; opacity: .55; margin-left: 2px; }
.user-menu {
position: absolute; top: calc(100% + 10px); right: 0;
min-width: 220px;
background: var(--paper-card);
border: 1px solid var(--rule);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(28, 24, 32, .12), 0 2px 6px rgba(28, 24, 32, .06);
padding: 6px;
opacity: 0; pointer-events: none;
transform: translateY(-4px);
transition: opacity .15s, transform .15s;
z-index: 100;
}
.user-chip.is-open .user-menu,
.user-menu:hover {
opacity: 1; pointer-events: auto; transform: translateY(0);
}
.user-menu a {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; border-radius: 8px;
font-family: var(--font-body); font-size: 14px;
color: var(--ink-mid);
transition: background .15s, color .15s;
}
.user-menu a:hover { background: var(--paper-soft); color: var(--ink); }
.user-menu a.active { color: var(--violet); }
.user-menu .sep {
height: 1px; background: var(--rule-soft); margin: 4px 8px;
}
.user-menu a i { width: 16px; text-align: center; color: var(--ink-dim); }
/* ---------- Page head (centered H1) ---------- */
.page-head {
max-width: 1480px; margin: 0 auto;
padding: 24px 56px 36px;
text-align: center;
}
.page-head h1 {
font-family: var(--font-display);
font-style: italic; font-weight: 500;
font-size: clamp(40px, 4.5vw, 64px);
line-height: .98; letter-spacing: -.035em; color: var(--ink);
}
.page-head h1 em { font-style: italic; font-weight: 500; color: var(--violet); }
.page-head .stats {
display: flex; gap: 32px;
font-family: var(--font-mono); font-size: 12px;
color: var(--ink-mid); letter-spacing: .04em;
}
.page-head .stats .num {
font-family: var(--font-ui); font-weight: 600;
font-size: 32px; color: var(--violet);
letter-spacing: -.01em; display: block; line-height: 1;
margin-bottom: 4px; font-feature-settings: "tnum" 1;
}
.page-head .stats .lbl { text-transform: uppercase; }
/* ---------- Flash messages ---------- */
.flash-stack {
position: fixed; top: 16px; left: 50%;
transform: translateX(-50%);
z-index: 1000;
display: flex; flex-direction: column; gap: 10px;
pointer-events: none;
width: min(560px, 92vw);
}
.flash {
pointer-events: auto;
position: relative;
padding: 12px 44px 12px 18px;
background: var(--paper-card);
border: 1px solid var(--rule);
border-left: 3px solid var(--ink-mid);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(28, 24, 32, .12), 0 2px 6px rgba(28, 24, 32, .06);
font-family: var(--font-body); font-size: 14px;
color: var(--ink);
}
.flash.success { border-left-color: var(--ok); }
.flash.warning { border-left-color: var(--warn); }
.flash.danger,
.flash.error { border-left-color: var(--error); }
.flash .close {
position: absolute; top: 8px; right: 10px;
background: transparent; border: 0; padding: 4px 8px;
font-size: 18px; line-height: 1; color: var(--ink-dim);
cursor: pointer; border-radius: 6px;
transition: background .15s, color .15s;
}
.flash .close:hover { background: var(--paper-soft); color: var(--ink); }
/* ---------- Poster placeholder (shared) ----------
Used by display_show, list_shows row, dashboard suggestion. Always rendered
absolutely positioned inside a `position: relative` container ; the real
`![]()
` sits on top of it. When the image fails to load (onerror →
display:none / remove), the placeholder remains visible. The variant
classes .lg / .sm tune the icon size. */
.poster-placeholder {
position: absolute; inset: 0;
display: grid; place-items: center;
background:
radial-gradient(circle at 30% 30%, rgba(var(--violet-rgb),.35), transparent 60%),
var(--ink);
color: var(--violet);
}
.poster-placeholder i {
font-size: 64px;
opacity: .35;
transform: rotate(-8deg);
transition: transform .4s ease, opacity .4s ease;
}
.poster-placeholder.lg i { font-size: 130px; }
.poster-placeholder.sm i { font-size: 22px; }
.dash .cata-suggestion:hover .poster-placeholder i {
transform: rotate(-8deg) scale(1.06);
opacity: .5;
}
/* ---------- Footer ---------- */
.foot {
border-top: 1px solid var(--rule);
padding: 24px 56px;
max-width: 1480px;
margin: 32px auto 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
font-size: 11px;
}
/* ==========================================================================
Responsive — ≤920px
========================================================================== */
@media (max-width: 920px) {
html, body { overflow-x: hidden; }
.topbar-inner {
grid-template-columns: auto 1fr auto;
padding: 14px 20px; gap: 12px;
}
/* Hamburger button — placed where the desktop nav used to be */
.menu-toggle {
display: inline-flex; flex-direction: column;
justify-content: center; align-items: center;
width: 38px; height: 38px;
background: transparent; border: 1px solid var(--rule);
border-radius: 999px;
cursor: pointer;
gap: 4px;
transition: border-color .2s;
grid-column: 2; justify-self: end;
}
.menu-toggle:hover { border-color: var(--violet); }
.menu-toggle-bar {
display: block; width: 16px; height: 2px;
background: var(--ink); border-radius: 1px;
transition: transform .2s, opacity .2s;
}
/* Full-screen overlay menu */
nav.menu {
position: fixed; top: 0; left: 0;
width: 100vw; height: 100vh; height: 100dvh;
z-index: 200;
display: none;
flex-direction: column;
justify-content: center; align-items: center;
gap: 22px;
background: var(--paper);
padding: 80px 24px;
overflow-y: auto;
}
nav.menu.is-open { display: flex; animation: menuFade .25s ease both; }
@keyframes menuFade {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
nav.menu a {
font-family: var(--font-display);
font-style: italic; font-weight: 500;
font-size: 32px; line-height: 1;
letter-spacing: -.02em;
color: var(--ink);
padding: 8px 4px;
}
nav.menu a.active {
color: var(--violet); font-weight: 600;
}
nav.menu a.active::before {
content: "▸ "; color: var(--violet); font-style: normal;
}
/* Close button (× in top right of the overlay) */
.menu-close {
display: grid; place-items: center;
position: absolute; top: 18px; right: 20px;
width: 38px; height: 38px;
background: transparent; border: 1px solid var(--rule); border-radius: 50%;
font-family: var(--font-display);
font-weight: 500; font-size: 22px; line-height: 1;
color: var(--ink); cursor: pointer;
transition: border-color .2s, color .2s;
}
.menu-close:hover { border-color: var(--violet); color: var(--violet); }
.search-pill { min-width: 0; width: 100%; padding: 8px 14px; font-size: 13px; grid-column: 1 / -1; order: 3; }
.user-chip #topbar-username, .user-chip .caret { display: none; }
.page-head, .foot {
padding-left: 20px; padding-right: 20px;
}
.page-head { padding-top: 18px; padding-bottom: 24px; }
}
/* Below ~600px the two footer lines no longer fit side by side and the base
space-between row wraps them into a ragged left-aligned block. Stack them as
a single centred column instead. */
@media (max-width: 600px) {
.foot {
flex-direction: column;
align-items: center;
text-align: center;
gap: 10px;
}
}
@media (max-width: 480px) {
.page-head h1 { font-size: 36px; }
}
/* ==========================================================================
[LIST_SHOWS] — movie / tvshow / videogame list (list_shows.html)
==========================================================================
Note: per-user color rules (.user- backgrounds and accents) are
generated by Jinja in the template — see the inline