/*
BD Horror DB Main Stylesheet v2
*/
/* Google Fonts loaded via in HTML not imported here to avoid render blocking */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--blood: #e70f48;
--blood-bright: #e70f48;
--ash: #0f0f0f;
--card-bg: #161616;
--border: #2a2a2a;
--border2: #3a3a3a;
--bone: #F5F0E8;
--pale: #DDD8CE;
--muted: #ccc;
--dim: #999;
--green-pos: #4ade80;
--gold: #c8a84b;
/* Matches BD Custom WP theme typography (style.css --font-display / --font-body).
--font-mono retired in favor of Inter to fully unify with the theme; letter-spacing
on individual mono-labeled rules kept as-is to preserve the tightened UI rhythm. */
/* Anton retired — --font-title now unified with --font-body (Inter).
Variable name kept for backward-compat with existing rule selectors; all font-title
usages below carry explicit font-weight: 800 since Anton's boldness was baked into
its single design weight, and Inter needs that declared to keep the same visual heft. */
--font-title: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--nav-height: 62px;
--max-width: 1440px;
--content-pad: 56px;
}
html { scroll-behavior: smooth; }
body {
background: var(--ash);
color: var(--bone);
font-family: var(--font-body);
font-size: 19px;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
.skip-link {
position: absolute; top: -100px; left: 1rem;
background: var(--blood-bright); color: #fff;
padding: 8px 16px; font-family: var(--font-mono); font-size: 13px;
z-index: 9999; transition: top .2s;
}
.skip-link:focus { top: 1rem; }
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--content-pad);
}
/*
NAVIGATION
*/
.site-nav {
background: #080808; border-bottom: 1px solid var(--border);
height: var(--nav-height); position: sticky; top: 0; z-index: 200;
}
.site-nav .container {
height: 100%; display: flex; align-items: center; gap: 36px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.site-logo { display: flex; align-items: center; }
.nav-logo-img { height: 38px; width: auto; filter: brightness(1.05); }
.nav-links { display: flex; gap: 28px; }
.nav-link {
font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--muted); transition: color .15s; white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--blood-bright); }
.nav-search-form {
margin-left: auto; display: flex; align-items: center;
gap: 10px; background: #141414; border: 1px solid var(--border2);
padding: 0 16px; height: 42px;
}
.nav-search-form svg { color: var(--dim); flex-shrink: 0; }
.nav-search-form input {
background: transparent; border: none; outline: none;
color: var(--bone); font-family: var(--font-mono); font-size: 13px; width: 220px;
}
.nav-search-form input::placeholder { color: var(--dim); }
/*
HOMEPAGE SINGLE FEATURED FILM
*/
#featured-hero {
position: relative; width: 100%; height: 620px;
overflow: hidden; background: #0a0a0a;
}
.featured-backdrop {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; filter: brightness(.42) saturate(.6);
}
.featured-scrim {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,.82) 36%, rgba(0,0,0,.05) 100%),
linear-gradient(to top, rgba(0,0,0,.88) 0%, transparent 52%);
}
.featured-inner { position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: 52px; }
.featured-inner .container { display: flex; gap: 36px; align-items: flex-end; }
.featured-poster {
width: 280px; flex-shrink: 0; border: 2px solid var(--blood);
background: #1a1a1a; box-shadow: 0 0 60px rgba(231,15,72,.45); overflow: hidden;
}
.featured-poster img { width: 100%; height: auto; display: block; }
.featured-meta { flex: 1; min-width: 0; }
.featured-badge {
display: inline-flex; align-items: center; background: var(--blood);
color: #fff; font-family: var(--font-mono); font-size: 11px;
letter-spacing: 2px; padding: 5px 14px; margin-bottom: 16px;
}
.featured-title {
font-family: var(--font-title); font-weight: 800; font-size: 82px; line-height: .88;
letter-spacing: 0.02em; color: #fff; margin-bottom: 14px;
}
.featured-title .yr { color: #fff; }
.featured-overview {
font-size: 18px; font-weight: 300; color: var(--pale);
max-width: 580px; margin-bottom: 18px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.featured-stats { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.featured-stat { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.featured-stat strong { color: var(--bone); font-weight: 500; }
.featured-cta {
display: inline-flex; align-items: center; gap: 10px;
margin-top: 22px; padding: 13px 30px; background: var(--blood); color: #fff;
font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.5px;
text-transform: uppercase; transition: background .15s; cursor: pointer;
}
.featured-cta:hover { background: var(--blood-bright); }
/* HOME SECTIONS */
.home-section { padding: 44px 0 36px; }
.home-section.alt-bg {
background: #0d0d0d; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.section-head {
display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px;
}
.section-heading {
font-family: var(--font-body); font-weight: 800; font-size: 36px;
letter-spacing: 0.02em; text-transform: uppercase; color: #fff; line-height: 1;
}
.section-heading .accent { color: #fff; }
.section-view-all {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px;
text-transform: uppercase; color: var(--blood-bright); transition: color .15s; white-space: nowrap;
}
.section-view-all:hover { color: #fff; }
.film-row-scroll {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.film-row-scroll {
grid-auto-flow: column;
grid-template-columns: none;
grid-auto-columns: 140px;
overflow-x: auto;
padding-bottom: 10px;
scrollbar-width: thin; scrollbar-color: #333 #1a1a1a;
}
.film-row-scroll::-webkit-scrollbar { height: 4px; }
.film-row-scroll::-webkit-scrollbar-track { background: #1a1a1a; }
.film-row-scroll::-webkit-scrollbar-thumb { background: #333; }
}
/*
FILM CARD
*/
.film-card { cursor: pointer; display: block; }
.film-card:hover .fc-poster { border-color: var(--blood-bright); }
.film-card:hover .fc-poster img { transform: scale(1.04); filter: brightness(.95) saturate(1.1); }
.fc-poster {
position: relative; aspect-ratio: 2/3; overflow: hidden;
background: #1a1a1a; border: 1px solid var(--border); transition: border-color .2s;
}
.fc-poster img {
width: 100%; height: 100%; object-fit: cover;
filter: saturate(.75) brightness(.9); transition: filter .3s, transform .3s; display: block;
}
.fc-score {
position: absolute; bottom: 6px; right: 7px;
font-family: var(--font-title); font-weight: 800; font-size: 17px; color: #fff;
background: rgba(0,0,0,.82); padding: 2px 6px; letter-spacing: 0.02em; line-height: 1;
}
.fc-release-badge {
position: absolute; top: 7px; left: 7px; background: var(--blood); color: #fff;
font-family: var(--font-mono); font-size: 10px; letter-spacing: .5px; padding: 3px 8px; line-height: 1.2;
}
.fc-title { font-size: 14px; color: var(--pale); margin-top: 9px; line-height: 1.35; }
.fc-year { font-family: var(--font-mono); font-size: 12px; color: var(--dim); margin-top: 3px; }
/*
BROWSE PAGE
*/
.browse-page { padding: 40px 0; }
.browse-page-title {
font-family: var(--font-title); font-weight: 800; font-size: 44px; letter-spacing: 0.02em;
color: #fff; line-height: 1; margin-bottom: 28px;
}
.browse-page-title .accent { color: #fff; }
.filter-bar {
display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
margin-bottom: 22px; padding: 18px 22px; background: #111; border: 1px solid var(--border);
}
.filter-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); }
.filter-search {
background: #0f0f0f; border: 1px solid var(--border2); color: var(--bone);
font-family: var(--font-mono); font-size: 13px; padding: 9px 14px;
outline: none; width: 260px; transition: border-color .15s;
}
.filter-search:focus { border-color: var(--blood-bright); }
.filter-search::placeholder { color: var(--dim); }
.filter-select {
background: #0f0f0f; border: 1px solid var(--border2); color: var(--pale);
font-family: var(--font-mono); font-size: 12px; padding: 9px 36px 9px 14px;
cursor: pointer; outline: none; appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 10px center; transition: border-color .15s;
}
.filter-select:focus { border-color: var(--blood-bright); }
.filter-select option { background: #1a1a1a; }
.results-count { font-family: var(--font-mono); font-size: 12px; color: var(--dim); letter-spacing: .5px; margin-bottom: 20px; }
.film-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 22px; }
.load-more-wrap { text-align: center; margin: 44px 0; }
.load-more-btn {
background: transparent; border: 1px solid var(--border2); color: var(--muted);
font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px;
text-transform: uppercase; padding: 14px 44px; cursor: pointer; transition: border-color .15s, color .15s;
}
.load-more-btn:hover { border-color: var(--blood-bright); color: var(--blood-bright); }
/*
FILM DETAIL CINEMATIC HERO (full bleed)
*/
.film-hero { position: relative; width: 100%; height: 610px; overflow: visible; background: #0a0a0a; }
.film-hero-backdrop {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; filter: brightness(.55) saturate(.75);
}
.film-hero-scrim {
position: absolute; inset: 0;
background: linear-gradient(to right, rgba(0,0,0,.72) 34%, rgba(0,0,0,.05) 100%),
linear-gradient(to top, rgba(0,0,0,.75) 0%, transparent 52%);
}
.film-hero-inner { position: absolute; bottom: 0; left: 0; right: 0; padding-bottom: 24px; }
.film-hero-inner .container { display: flex; gap: 44px; align-items: flex-end; }
.film-poster-wrap {
flex-shrink: 0; width: 380px; border: 1px solid var(--blood);
background: #1a1a1a;
/* Bleed poster below hero for cinematic effect */
margin-bottom: 0;
position: relative;
z-index: 2;
}
.film-poster { width: 100%; display: block; }
.film-hero-meta { flex: 1; min-width: 0; }
.cert-badge {
display: inline-flex; align-items: center; background: var(--blood); color: #fff;
font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; padding: 5px 14px; margin-bottom: 16px;
}
.film-title {
font-family: var(--font-title); font-weight: 800; font-size: 88px; line-height: .86;
letter-spacing: 0.02em; color: #fff; margin-bottom: 14px; word-break: break-word;
}
.film-year-accent { color: #fff; }
.film-tagline { font-style: italic; font-size: 21px; font-weight: 300; color: var(--pale); margin-bottom: 18px; }
.film-quick-stats { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.qs-item { font-family: var(--font-mono); font-size: 13px; color: var(--muted); letter-spacing: .5px; }
.qs-item strong { color: var(--bone); font-weight: 500; }
.qs-sep { color: #333; font-size: 18px; line-height: 1; }
/* TAXONOMY BAR */
.taxonomy-bar { background: #0c0c0c; border-bottom: 1px solid var(--border); padding: 14px 0 20px; position: relative; z-index: 1; }
.taxonomy-bar .container { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; padding-left: var(--content-pad); }
.tax-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.genre-pill { font-family: var(--font-mono); font-size: 12px; padding: 5px 14px; border-radius: 2px; display: inline-block; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.genre-pill.primary { background: var(--blood); border: 1px solid var(--blood-bright); color: #fff; }
.genre-pill.primary:hover { background: var(--blood-bright); border-color: var(--blood-bright); color: #fff; }
.genre-pill.sub { background: rgba(231,15,72,.14); border: 1px solid rgba(231,15,72,.28); color: #e70f48; }
.genre-pill.sub:hover { background: rgba(231,15,72,.28); color: #e70f48; }
.pill-divider { width: 1px; height: 22px; background: #2a2a2a; margin: 0 6px; flex-shrink: 0; }
/* FILM BODY */
.film-body { padding: 52px 0 52px; position: relative; z-index: 1; }
.film-body .container { display: grid; grid-template-columns: 1fr 360px; gap: 60px; align-items: start; }
.section-label {
font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
color: var(--blood-bright); margin-bottom: 16px; display: flex; align-items: center; gap: 12px;
}
.section-label::after { content: ''; flex: 1; height: 1px; background: #242424; }
.film-section { margin-bottom: 52px; }
/* SYNOPSIS */
.synopsis-text { font-size: 21px; font-weight: 300; line-height: 1.9; color: var(--bone); }
/* TRAILER EMBED */
.trailer-embed-wrap {
position: relative; width: 100%; aspect-ratio: 16/9;
background: #000; border: 1px solid var(--border);
}
.trailer-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
/* CREDITS */
.credits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 20px; }
.credit-card { text-align: center; }
.credit-card a { display: block; text-decoration: none; }
.credit-avatar {
width: 80px; height: 80px; border-radius: 50%;
margin: 0 auto 10px; overflow: hidden;
border: 1px solid var(--border); background: #1a1a1a; transition: border-color .2s;
}
.credit-card a:hover .credit-avatar { border-color: var(--blood-bright); }
.credit-avatar img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(25%); }
.credit-name { font-size: 14px; color: var(--pale); line-height: 1.3; }
.credit-role { font-family: var(--font-mono); font-size: 11px; color: var(--dim); margin-top: 3px; }
.credit-role.director { color: var(--blood-bright); }
/* GALLERY */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gallery-item { aspect-ratio: 16/9; overflow: hidden; background: #1a1a1a; cursor: pointer; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) brightness(.82); transition: filter .3s, transform .3s; display: block; }
.gallery-item:hover img { filter: saturate(1) brightness(1); transform: scale(1.04); }
/* BOX OFFICE */
.box-office-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bo-card { background: var(--card-bg); border: 1px solid var(--border); padding: 22px; text-align: center; }
.bo-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.bo-value { font-family: var(--font-title); font-weight: 800; font-size: 30px; letter-spacing: 0.02em; color: var(--bone); line-height: 1; }
.bo-value.positive { color: var(--green-pos); }
/* SIMILAR */
.similar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
/* SIDEBAR */
.film-sidebar { display: flex; flex-direction: column; gap: 18px; }
.sidebar-card { background: var(--card-bg); border: 1px solid var(--border); padding: 22px; }
.score-card { text-align: center; }
.score-ring-wrap { position: relative; width: 110px; height: 110px; margin: 16px auto 12px; }
.score-ring-wrap svg { display: block; }
.score-number {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: var(--font-title); font-weight: 800; font-size: 38px; letter-spacing: 0.02em; color: var(--blood-bright); line-height: 1;
}
.score-votes { font-family: var(--font-mono); font-size: 12px; color: var(--dim); }
.tmdb-badge {
display: inline-flex; align-items: center; gap: 7px; background: #01b4e4; color: #0d1b2a;
font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 1px;
padding: 5px 12px; border-radius: 3px; margin-top: 12px; text-decoration: none; transition: background .15s;
}
.tmdb-badge:hover { background: #02c8f8; }
.meta-list { list-style: none; }
.meta-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #1e1e1e; gap: 12px; }
.meta-row:first-child { padding-top: 0; }
.meta-row:last-child { border-bottom: none; padding-bottom: 0; }
.meta-key { font-family: var(--font-mono); font-size: 12px; color: var(--dim); flex-shrink: 0; }
.meta-val { font-size: 15px; color: var(--pale); text-align: right; line-height: 1.4; }
/* WHERE TO WATCH */
.watch-card { background: var(--card-bg); border: 1px solid var(--border); padding: 22px; }
.streaming-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; }
.stream-chip {
font-family: var(--font-mono); font-size: 12px; padding: 7px 14px;
border: 1px solid var(--border2); color: var(--pale); display: inline-block;
transition: border-color .15s, color .15s, background .15s; text-decoration: none;
}
.stream-chip:hover { border-color: var(--blood-bright); color: var(--blood-bright); }
.watch-sublabel {
font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
color: var(--blood-bright); margin: 14px 0 0;
display: flex; align-items: center; gap: 8px;
}
.watch-sublabel::after { content: ''; flex: 1; height: 1px; background: #242424; }
.amazon-buy-link {
display: flex; align-items: center; gap: 9px; padding: 12px 16px;
background: rgba(231,15,72,.14); border: 1px solid rgba(231,15,72,.28); color: var(--blood-bright);
font-family: var(--font-mono); font-size: 12px; text-decoration: none; transition: background .15s; margin-top: 14px;
}
.amazon-buy-link:hover { background: rgba(231,15,72,.28); }
.justwatch-attr {
font-family: var(--font-mono); font-size: 10px; color: var(--dim);
margin-top: 10px; display: flex; align-items: center; gap: 5px;
}
/* PERSON PAGE */
.person-hero { background: #111; padding: 64px 0 52px; border-bottom: 1px solid var(--border); }
.person-hero .container { display: flex; gap: 48px; align-items: flex-start; }
.person-hero.has-backdrop { position: relative; overflow: hidden; }
.person-hero-backdrop { position: absolute; inset: 0; z-index: 0; }
.person-hero-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.38) saturate(.75); }
.person-hero-backdrop::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, var(--ash) 94%);
}
.person-hero.has-backdrop .container { position: relative; z-index: 1; }
.person-photo-wrap { flex-shrink: 0; width: 210px; border: 2px solid var(--border2); background: #1a1a1a; }
.person-photo-wrap img { width: 100%; display: block; filter: grayscale(20%); }
.person-meta { flex: 1; padding-top: 8px; }
.person-name { font-family: var(--font-title); font-weight: 800; font-size: 74px; line-height: .88; letter-spacing: 0.02em; color: #fff; margin-bottom: 18px; }
.person-bio-wrap { max-width: 700px; }
.person-bio {
font-size: 18px; font-weight: 300; line-height: 1.85; color: var(--pale);
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden;
}
.person-bio.expanded { -webkit-line-clamp: unset; overflow: visible; }
.person-bio-toggle {
display: none; /* JS reveals this only if the clamp actually hid text */
background: none; border: none; padding: 8px 0 0; margin: 0;
color: var(--blood-bright); font-family: var(--font-mono); font-size: 12px;
letter-spacing: .5px; text-transform: uppercase; cursor: pointer;
}
.person-bio-toggle:hover { text-decoration: underline; }
.person-facts { display: flex; gap: 32px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--border); }
.person-fact { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.person-fact strong { color: var(--bone); display: block; margin-bottom: 3px; font-size: 13px; }
.person-body { padding: 52px 0; }
/* FOOTER */
.site-footer { background: #080808; border-top: 1px solid var(--border); padding: 44px 0; margin-top: 72px; }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--content-pad); }
.footer-logo { height: 32px; width: auto; opacity: .7; margin-bottom: 16px; }
.footer-copy { font-family: var(--font-mono); font-size: 12px; color: var(--dim); line-height: 1.7; margin-bottom: 8px; }
.footer-copy a { color: var(--muted); text-decoration: underline; }
.footer-copy a:hover { color: var(--blood-bright); }
.page-loading {
text-align: center; padding: 80px 40px;
font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--dim);
}
.page-loading::after {
content: ''; display: inline-block; width: 8px; height: 8px;
border-radius: 50%; background: var(--blood-bright); margin-left: 8px; animation: pulse 1s infinite;
}
@keyframes pulse { 0%,100%{opacity:.2} 50%{opacity:1} }
/* RESPONSIVE */
@media (max-width: 1100px) {
:root { --content-pad: 32px; }
.film-body .container { grid-template-columns: 1fr 320px; gap: 40px; }
.film-title { font-size: 72px; }
}
@media (max-width: 900px) {
.film-body .container { grid-template-columns: 1fr; gap: 36px; }
.film-sidebar { order: -1; }
.film-hero { height: auto; min-height: auto; }
.film-title { font-size: 54px; }
.film-poster-wrap { width: 160px; margin-bottom: 0; }
.taxonomy-bar .container { padding-left: var(--content-pad); }
.similar-grid { grid-template-columns: repeat(2, 1fr); }
.gallery-grid { grid-template-columns: repeat(2, 1fr); }
.nav-links { display: none; }
:root { --content-pad: 20px; }
}
@media (max-width: 600px) {
/* Hero: bigger poster on top, info stacked below, same backdrop */
.film-hero { height: auto; min-height: auto; }
.film-hero-backdrop { min-height: 340px; }
.film-hero-inner {
position: relative;
padding-top: 24px;
padding-bottom: 28px;
}
.film-hero-inner .container {
flex-direction: column;
align-items: center;
gap: 18px;
}
.film-poster-wrap {
width: 220px;
flex-shrink: 0;
margin-top: 0;
/* Let poster define its own height — no squishing */
align-self: center;
}
.film-poster {
width: 100%;
height: auto;
display: block;
aspect-ratio: 2/3;
object-fit: contain;
}
.film-hero-meta { flex: 1; min-width: 0; width: 100%; text-align: center; }
.film-title {
font-size: 32px;
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.film-tagline {
font-size: 14px;
margin-bottom: 10px;
}
.film-quick-stats { gap: 8px; flex-wrap: wrap; justify-content: center; }
.qs-item { font-size: 11px; }
.qs-sep { display: none; }
.cert-badge {
font-size: 10px;
padding: 3px 10px;
margin-bottom: 10px;
}
/* Body layout */
.box-office-grid { grid-template-columns: 1fr; }
.person-hero .container { flex-direction: column; }
.person-name { font-size: 52px; }
.featured-title { font-size: 40px; }
.featured-hero { height: auto; min-height: 360px; }
.featured-inner .container {
flex-direction: row;
align-items: flex-start;
gap: 14px;
padding-bottom: 28px;
padding-top: 20px;
}
.featured-poster { width: 100px; flex-shrink: 0; }
}
/* NAV AUTH AREA VISIBILITY FIX */
/* Ensure the nav search form doesn't consume all space when auth area is present */
.site-nav .container {
display: flex;
align-items: center;
gap: 28px;
height: 100%;
}
.nav-search-form {
/* Remove margin-left:auto auth area handles right-alignment */
margin-left: auto;
}
#nav-auth-area {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
white-space: nowrap;
}
/* When auth area has content, search bar should not push to right */
#nav-auth-area:not(:empty) ~ .nav-search-form,
.nav-search-form:has(~ #nav-auth-area:not(:empty)) {
margin-left: 0;
}
/*
MOBILE NAVIGATION
*/
/* Hamburger button */
.nav-hamburger {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
flex-shrink: 0;
z-index: 201;
}
.ham-bar {
display: block;
width: 22px;
height: 2px;
background: var(--bone);
border-radius: 2px;
transition: transform .25s ease, opacity .25s ease, width .25s ease;
transform-origin: center;
}
/* Mobile /db badge — hidden by default; the ≤1500px media query below
turns it on. Kept ABOVE that media query in source order: same
specificity as the media-query rule, so if this sat below it instead
it would win the cascade tie and clobber the mobile display. */
.nav-db-badge--mobile {
display: none;
margin-left: 4px;
flex-shrink: 0;
}
/* Animate to X when open */
.nav-hamburger[aria-expanded="true"] .ham-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] .ham-bar:nth-child(2) {
opacity: 0;
width: 0;
}
.nav-hamburger[aria-expanded="true"] .ham-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* Mobile drawer */
.mobile-menu {
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
bottom: 0;
background: #0a0a0a;
z-index: 199;
overflow-y: auto;
border-top: 1px solid var(--border);
/* Hidden by default off-screen to the right */
transform: translateX(100%);
visibility: hidden;
transition: transform .3s ease, visibility .3s ease;
/* Always in the DOM but off-screen avoids display:none flash */
}
.mobile-menu.open {
transform: translateX(0);
visibility: visible;
}
.mobile-menu-inner {
padding: 24px 24px 48px;
display: flex;
flex-direction: column;
gap: 0;
}
/* Mobile search */
.mobile-search-form {
display: flex;
align-items: center;
gap: 10px;
background: #141414;
border: 1px solid var(--border2);
padding: 12px 16px;
margin-bottom:24px;
}
.mobile-search-form svg { color: var(--dim); flex-shrink: 0; }
.mobile-search-form input {
background: transparent;
border: none;
outline: none;
color: var(--bone);
font-family: var(--font-mono);
font-size: 14px;
width: 100%;
}
.mobile-search-form input::placeholder { color: var(--dim); }
/* Mobile nav links */
.mobile-nav-links {
display: flex;
flex-direction: column;
border-top: 1px solid var(--border);
}
.mobile-nav-link {
display: block;
padding: 12px 4px;
font-family: var(--font-title); font-weight: 800;
font-size: 20px;
letter-spacing: 0.02em;
color: var(--pale);
text-decoration: none;
border-bottom: 1px solid var(--border);
transition: color .15s, padding-left .15s;
background: none;
border-left: none;
border-right: none;
border-top: none;
text-align: left;
cursor: pointer;
width: 100%;
line-height: 1;
}
.mobile-nav-link:hover,
.mobile-nav-link:focus {
color: var(--blood-bright);
padding-left: 8px;
}
/* Mobile auth section */
.mobile-auth-links {
display: flex;
flex-direction: column;
margin-top: 8px;
border-top: 1px solid var(--border);
padding-top: 8px;
}
.mobile-auth-link {
font-size: 16px;
color: var(--dim);
letter-spacing: 1.5px;
}
.mobile-auth-join {
color: var(--blood-bright) !important;
}
.mobile-auth-signout {
border-bottom: 1px solid var(--border) !important;
color: var(--dim) !important;
}
/* Show/hide at breakpoints */
@media (max-width: 1500px) {
/* Hide desktop elements */
.nav-links { display: none !important; }
.nav-search-form { display: none !important; }
#nav-auth-area { display: none !important; }
/* Hide the logo-paired /db badge; the standalone mobile one (next to
the hamburger) takes over below */
.nav-brand .nav-db-badge { display: none !important; }
/* Show hamburger */
.nav-hamburger { display: flex; }
/* Show the mobile /db badge, right before the hamburger */
.nav-db-badge--mobile {
display: inline-flex;
align-items: center;
}
/* Push the whole trailing cluster (bell, /db, hamburger) to the right
edge together, instead of only the hamburger jumping right on its
own */
.nav-brand { margin-right: auto; }
/* Prevent nav container from overflowing */
.site-nav .container {
gap: 12px;
padding: 0 20px;
overflow: hidden;
}
}
@media (min-width: 1501px) {
/* Force hide mobile elements on desktop */
.nav-hamburger {
display: none !important;
}
.nav-db-badge--mobile {
display: none !important;
}
.mobile-menu {
transform: translateX(100%) !important;
visibility: hidden !important;
}
}
/* Bigger /db badge on phones — desktop size stays as-is */
@media (max-width: 600px) {
.nav-db-badge {
font-size: 14px;
padding: 6px 11px;
}
}
/* Film hero mobile backdrop fix */
@media (max-width: 600px) {
.film-hero-backdrop {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 100%;
height: 100%;
min-height: 100%;
object-fit: cover;
}
.film-hero-scrim {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
}
.film-hero-inner {
position: relative;
z-index: 2;
}
}
/* Film hero mobile: poster stacked above info, bigger poster */
@media (max-width: 600px) {
.film-poster-wrap {
width: 220px !important;
min-width: 220px !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
margin: 0 auto !important;
}
.film-poster {
width: 220px !important;
height: auto !important;
aspect-ratio: 2/3 !important;
display: block !important;
object-fit: contain !important;
}
.film-hero-inner .container {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: 18px !important;
overflow: visible;
}
.film-hero-meta {
flex: 1 1 0 !important;
min-width: 0 !important;
width: 100% !important;
text-align: center !important;
overflow: visible;
}
.film-title {
font-size: 32px !important;
word-break: break-word;
overflow-wrap: break-word;
}
}
/* Fix: featured film poster on homepage should not be squished */
@media (max-width: 600px) {
.featured-poster {
width: 100px !important;
min-width: 100px !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
}
.featured-poster img {
width: 100px !important;
height: auto !important;
}
.featured-meta {
flex: 1 1 0 !important;
min-width: 0 !important;
}
}
/* Featured hero mobile: full-width backdrop banner with the poster
centered on top of it (2026-08-21 — replaces the earlier "poster IS
the visual, backdrop hidden" treatment below). The backdrop is a real,
fixed-height element in the document flow (not absolutely stretched to
cover the whole hero the way it is on desktop, which here would also
drag in the meta text below it) — that fixed height is what gives the
poster room to sit centered on top of it with genuine padding on every
side, rather than touching an edge. The poster itself is absolutely
positioned against #featured-hero so it overlays the banner instead of
pushing it down; everything else (badge aside) flows normally
underneath, right after the banner's real flow height. */
@media (max-width: 600px) {
#featured-hero {
height: auto !important;
min-height: auto !important;
/* Base rule (both index.php's inline block and main.css's own
non-mobile #featured-hero rule above) sets display:flex — needed
on desktop to keep .featured-inner centered since the backdrop/
scrim are position:absolute there. On mobile the backdrop is back
in normal flow (position:static, below) so it needs to stack as a
block above .featured-inner instead of sitting beside it as a
flex row item. */
display: block !important;
}
.featured-backdrop {
display: block !important;
position: static !important;
width: 100% !important;
height: 320px !important;
object-fit: cover !important;
object-position: center 25% !important;
}
/* Scrim now overlays just the banner (absolutely positioned against
#featured-hero, sized to match the backdrop exactly) — a bottom-only
fade into the meta section's background color, rather than desktop's
left-to-right readability gradient (no text sits on the image here,
just the poster and badge, so an overall darken isn't needed — the
backdrop's own base filter, from the non-mobile .featured-backdrop
rule above, already dims it plenty; stacking a flat dark scrim on
top of that on a narrow band crushed the image to near-black). */
.featured-scrim {
display: block !important;
position: absolute !important;
inset: auto !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 320px !important;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 78%, #0a0a0a 100%) !important;
}
/* Featured badge sits above the banner */
.featured-badge {
position: absolute;
top: 14px;
left: 20px;
z-index: 3;
margin-bottom: 0;
}
/* Poster: fixed size, centered on the banner. 60px above, 20px below
(320px banner − 240px poster, weighted toward the top rather than
split evenly — kept the top gap generous per the original ask, but
tightened the bottom gap 2026-08-22 per feedback that the space
between the poster and the title below felt too large) plus wide
side margins from being centered at a fixed width well under the
viewport. */
.featured-poster {
position: absolute !important;
top: 60px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 160px !important;
min-width: 0 !important;
margin: 0 !important;
border: none !important;
/* The non-mobile .featured-poster rule earlier in this file gives
the wrapper its own background + a red glow box-shadow (a
desktop-only styling choice, untouched here) — reset both so
they don't leak through around this smaller centered poster;
the image itself carries its own plain drop shadow below instead. */
background: none !important;
box-shadow: none !important;
overflow: visible !important;
z-index: 2;
}
.featured-poster img {
width: 160px !important;
height: 240px !important;
object-fit: cover !important;
border-radius: 4px;
box-shadow: 0 12px 32px rgba(0, 0, 0, .65);
}
/* Meta: starts right after the banner's real flow height — no extra
offset needed since the backdrop above it already occupies that
space in the flow (the poster/scrim overlaying it are both
absolutely positioned, so they don't add to that flow height). */
.featured-inner {
position: static !important;
padding: 0 !important;
}
.featured-inner .container {
flex-direction: column !important;
align-items: center !important;
gap: 0 !important;
padding: 0 !important;
}
.featured-meta {
/* Top padding tightened from 20px to 10px (2026-08-22) — stacked on
top of the poster's own 20px bottom gap within the banner above,
this is what actually closes up the poster-to-title gap. */
padding: 10px 20px 28px !important;
flex: none !important;
text-align: center;
background: linear-gradient(to bottom, #0a0a0a, #0f0f0f);
}
.featured-title {
font-size: 34px !important;
margin-bottom: 10px !important;
line-height: 1.05 !important;
}
/* Synopsis dropped on mobile — keeps the stack short enough that
the View Film button doesn't end up scrolled below the fold. */
.featured-overview {
display: none !important;
}
.featured-stats {
gap: 14px !important;
margin-bottom: 16px !important;
justify-content: center !important;
}
.featured-cta {
width: 100% !important;
justify-content: center !important;
margin-top: 4px !important;
}
}
/* ── Home Page Community Section ─────────────────────── */
.home-community-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}
/* Recently active — avatar row */
.home-community-avatars {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 4px;
}
.home-avatar-chip {
display: flex;
align-items: center;
gap: 10px;
background: var(--card-bg);
border: 1px solid var(--border);
padding: 8px 14px 8px 8px;
text-decoration: none;
color: var(--bone);
transition: border-color .15s, background .15s;
}
.home-avatar-chip:hover {
border-color: var(--blood-bright);
background: #1e1e1e;
}
.home-avatar-chip .av-img {
width: 34px; height: 34px;
border-radius: 50%;
object-fit: cover;
border: 1px solid var(--border2);
flex-shrink: 0;
}
.home-avatar-chip .av-initials {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--blood);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 13px; color: #fff;
font-weight: 500; flex-shrink: 0;
}
.home-avatar-chip .av-name {
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: .3px;
}
.home-avatar-chip .av-activity {
font-family: var(--font-mono);
font-size: 10px;
color: var(--dim);
margin-top: 2px;
}
/* Top contributors — leaderboard list */
.home-contributors-list {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 4px;
}
.home-contrib-row {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
background: var(--card-bg);
border: 1px solid var(--border);
text-decoration: none;
color: var(--bone);
transition: border-color .15s, background .15s;
}
.home-contrib-row:hover {
border-color: var(--blood-bright);
background: #1e1e1e;
}
.home-contrib-rank {
font-family: var(--font-mono);
font-size: 11px;
color: var(--dim);
width: 20px;
flex-shrink: 0;
text-align: center;
}
.home-contrib-rank.gold { color: var(--gold); }
.home-contrib-rank.silver { color: #aaa; }
.home-contrib-rank.bronze { color: #c8855a; }
.home-contrib-av {
width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
object-fit: cover; border: 1px solid var(--border2);
}
.home-contrib-av-initials {
width: 30px; height: 30px; border-radius: 50%;
background: var(--blood); display: flex;
align-items: center; justify-content: center;
font-family: var(--font-mono); font-size: 12px; color: #fff;
flex-shrink: 0;
}
.home-contrib-info { flex: 1; min-width: 0; }
.home-contrib-name {
font-family: var(--font-mono); font-size: 13px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-contrib-stats {
font-family: var(--font-mono); font-size: 10px;
color: var(--dim); margin-top: 2px;
}
.home-contrib-score {
font-family: var(--font-mono); font-size: 13px;
color: var(--gold); flex-shrink: 0;
}
@media (max-width: 860px) {
.home-community-grid { grid-template-columns: 1fr; gap: 40px; }
}
/* ── Keyword pills on film pages ─────────────────────────── */
.genre-pill.keyword {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.14);
color: var(--muted);
font-size: 11px;
padding: 3px 10px;
letter-spacing: .3px;
}
.genre-pill.keyword:hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.28);
color: var(--bone);
}
/* ── BD News Section ─────────────────────────────────────── */
.bd-news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 4px;
}
.bd-news-card {
display: flex;
flex-direction: column;
background: var(--card-bg);
border: 1px solid var(--border);
text-decoration: none;
color: var(--bone);
transition: border-color .15s;
}
.bd-news-card:hover { border-color: var(--blood-bright); }
.bd-news-thumb {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
background: #1a1a1a;
flex-shrink: 0;
}
.bd-news-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.bd-news-card:hover .bd-news-thumb img { transform: scale(1.04); }
.bd-news-thumb-empty { background: #1a1a1a; }
.bd-news-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bd-news-date { font-family: var(--font-mono); font-size: 10px; color: var(--dim); letter-spacing: .5px; text-transform: uppercase; }
.bd-news-title { font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--bone); }
.bd-news-excerpt { font-family: var(--font-body); font-size: 13px; color: var(--muted); line-height: 1.5; }
.bd-news-more {
display: inline-block;
margin-top: 16px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 1px;
color: var(--blood-bright);
text-decoration: none;
text-transform: uppercase;
}
.bd-news-more:hover { color: var(--bone); }
@media (max-width: 900px) {
.bd-news-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.bd-news-grid { grid-template-columns: 1fr; }
}
/* ── Verified badge ──────────────────────────────────────── */
.verified-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
background: var(--blood);
border-radius: 50%;
flex-shrink: 0;
vertical-align: middle;
margin-left: 4px;
position: relative;
top: -1px;
}
.verified-badge svg {
width: 8px;
height: 8px;
stroke: #fff;
stroke-width: 2.5;
fill: none;
}
.verified-badge[title] { cursor: default; }
/* ── Social links on profiles ────────────────────────────── */
.profile-social-links {
display: flex;
gap: 12px;
margin: 10px 0 16px;
flex-wrap: wrap;
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
color: var(--muted);
text-decoration: none;
transition: background .15s, border-color .15s, color .15s;
}
.social-link:hover {
background: rgba(255,255,255,.12);
border-color: var(--blood-bright);
color: #fff;
}
/* ── Community 3-column grid (recent activity / your feed / new members) ── */
.community-columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 900px) {
/* Stacks in DOM order at this width */
.community-columns { grid-template-columns: 1fr; gap: 32px; }
}
/* ── Community 2-column grid (leaderboard / most active this week) ── */
.community-columns-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 700px) {
/* Stacks in DOM order at this width */
.community-columns-2 { grid-template-columns: 1fr; gap: 32px; }
}
/* ── Community search row — centered, single column below the grids ── */
.community-search-row {
max-width: 480px;
margin: 0 auto;
}
/* ── Community hero ── */
.community-hero {
margin-bottom: 28px;
display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.community-hero__text { min-width: 0; } /* allows the title to wrap/shrink instead of pushing the sticker off */
.community-hero__title {
font-family: var(--font-title); font-weight: 800; font-size: 52px;
letter-spacing: 3px; color: #fff; line-height: 1;
}
.community-hero__logo {
height: 42px; width: auto; vertical-align: -8px; margin-right: 6px;
}
.community-hero__sub {
font-size: 16px; color: var(--muted); line-height: 1.6;
max-width: 560px; margin-top: 12px;
}
/* Sticker badge — see community.php. Fixed square, never stretched, never
shrunk below legibility (the "HORROR CLUB" text on it needs to stay
readable even at the mobile size). */
.community-hero__sticker {
width: 96px; height: 96px; flex-shrink: 0; object-fit: contain;
}
@media (max-width: 600px) {
.community-hero__title { font-size: 34px; letter-spacing: 1px; }
.community-hero__logo { height: 28px; vertical-align: -5px; }
.community-hero__sticker { width: 64px; height: 64px; }
}
/* ── Community stats bar — sits between the join CTA and Recent Activity ── */
.community-stats-bar {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
font-family: var(--font-mono); font-size: 13px; color: var(--muted);
margin-bottom: 44px;
}
.community-stat strong { color: var(--bone); font-weight: 700; margin-right: 5px; }
.community-stat-sep { color: var(--border2); }
@media (max-width: 600px) {
.community-stats-bar { gap: 8px; font-size: 12px; }
}
/* ── Community join actions — Create Profile + Sign In side by side,
used inside .comments-join-cta on the Community page (its other use,
the comments-section join prompt, only ever shows the one primary
button, so this row and the ghost button variant below are new). ── */
.community-join-actions {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center;
}
.join-cta-btn--ghost {
background: transparent; border: 1px solid rgba(231,15,72,.45); color: var(--blood-bright);
}
.join-cta-btn--ghost:hover { background: rgba(231,15,72,.14); }
/* ── Your Feed gate (logged-out) — blurred faux feed behind a centered
CTA, rather than just an empty state message ── */
.feed-gate { position: relative; min-height: 260px; }
.feed-gate__blur {
filter: blur(5px); opacity: .5; pointer-events: none; user-select: none;
}
.feed-gate__content {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; padding: 20px;
background: linear-gradient(to bottom, rgba(22,22,22,0) 0%, rgba(22,22,22,.72) 32%, var(--card-bg) 78%);
}
.feed-gate__text {
font-size: 14px; color: var(--pale); line-height: 1.5; max-width: 360px; margin: 0 0 18px;
}
.feed-gate__login {
font-family: var(--font-mono); font-size: 12px; color: var(--dim); margin: 14px 0 0;
}
.feed-gate__login a { color: var(--blood-bright); text-decoration: none; }
.feed-gate__login a:hover { text-decoration: underline; }
/* ── Trending Now (Community page) — 5 cards instead of film-row-scroll's
usual 7, so cards stay full-size rather than squeezing into unused
columns. Desktop-only: this used to be unconditional, which meant it
also won on mobile (equal CSS specificity to the base class's own
@media(max-width:768px) override, but declared later in the file, so
it took precedence) and silently overwrote grid-template-columns back
to a fixed 5-column grid there too — forcing all 5 cards into view at
once at ~70px each instead of the horizontal scroll every other film
row gets on mobile, which is what made the posters look cramped and
inconsistently sized. Scoping this to desktop means mobile now falls
through untouched to .film-row-scroll's own mobile rule (scrolling,
140px cards) — same as every other film row on the site. ── */
@media (min-width: 769px) {
.film-row-scroll--5 { grid-template-columns: repeat(5, 1fr); }
}
/* ── Profile aside — hide bio on mobile (duplicates hero) ── */
@media (max-width: 768px) {
.profile-aside #follow-card .profile-bio-sidebar { display: none; }
}
/* ── Nav /db badge (links to /db/ home) ──────────────────── */
.nav-db-badge {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
color: var(--blood-bright);
border: 1px solid var(--blood-bright);
padding: 4px 8px;
border-radius: 2px;
transition: background-color .15s, color .15s;
}
.nav-db-badge:hover {
background: var(--blood-bright);
color: #080808;
}
/* ── Profile page — mobile redesign ──────────────────────
1. Edit Profile card moves above tabs via grid order
2. Watched/Ratings grids cap at 6 visible (3-col) before
Show More, so the page doesn't get pushed down
3. Header stats compact onto fewer lines, Points pulled
out next to avatar in gold
──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
/* Reflow profile-body into a single column with explicit order:
1) Edit Profile card (aside's first child)
2) Following card (aside's second child)
3) Main content (tabs + panels) */
.profile-body .container {
display: flex !important;
flex-direction: column !important;
}
.profile-body .container > aside {
order: -1 !important;
margin-bottom: 28px !important;
}
.profile-body .container > div:not(aside) {
order: 1 !important;
}
/* Watched/Ratings grids: 3-column on mobile, capped height before Show More */
#watched-grid.film-grid-sm,
#ratings-grid.film-grid-sm {
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
}
@media (max-width: 600px) {
/* ── Profile hero header ── */
.profile-hero .container {
flex-direction: row !important;
align-items: flex-start !important;
gap: 16px !important;
flex-wrap: wrap !important;
}
.profile-avatar-wrap {
width: 84px !important;
height: 84px !important;
}
.profile-avatar,
.profile-avatar-initials {
width: 84px !important;
height: 84px !important;
}
.profile-info {
min-width: 0 !important;
flex: 1 !important;
}
.profile-display-name {
font-size: 32px !important;
letter-spacing: 0.02em !important;
}
.profile-bio {
font-size: 14px !important;
}
/* Points badge — pulled out next to avatar, gold accent */
.profile-points-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 84px;
margin-top: 6px;
font-family: var(--font-mono);
}
.profile-points-badge .pts-num {
font-family: var(--font-title); font-weight: 800;
font-size: 26px;
color: var(--gold, #f1c40f);
line-height: 1;
}
.profile-points-badge .pts-label {
font-size: 9px;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--dim);
margin-top: 2px;
}
/* Remaining stats: compact single-line wrap, smaller text */
.profile-stats {
display: flex !important;
flex-wrap: wrap !important;
gap: 14px !important;
width: 100% !important;
margin-top: 14px !important;
padding-top: 14px !important;
}
.profile-stat {
flex: 0 0 auto !important;
}
.profile-stat-num {
font-size: 18px !important;
}
.profile-stat-label {
font-size: 9px !important;
}
/* Hide the in-grid Points stat on mobile since it's shown in the badge instead */
.profile-stat:has(#profile-score) {
display: none !important;
}
}
/* ── Public Profile — full redesign ──────────────────────
Square avatar, inline username/display name, full-width
stats row, Instagram-style tabbed content, no sidebar.
──────────────────────────────────────────────────────── */
.pp-page { padding-top: 48px; padding-bottom: 80px; }
/* Header: avatar + identity inline */
.pp-header {
display: flex;
align-items: flex-start;
gap: 24px;
margin-bottom: 28px;
}
.pp-avatar-wrap { flex-shrink: 0; }
.pp-avatar,
.pp-avatar-initials {
width: 140px;
height: 140px;
border-radius: 50%;
object-fit: cover;
display: block;
border: 1px solid var(--border, #222);
background: #1a1a1a;
}
.pp-avatar-initials {
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-title); font-weight: 800;
font-size: 52px;
color: #fff;
background: var(--blood, #e70f48);
border-color: var(--blood-bright, #e70f48);
}
.pp-identity { flex: 1; min-width: 0; padding-top: 6px; }
.pp-header-points {
flex-shrink: 0;
margin-left: auto;
text-align: center;
padding: 14px 26px;
border: 1px solid var(--border, #222);
border-radius: 6px;
background: rgba(241,196,15,.06);
}
.pp-header-points-num {
font-family: var(--font-title); font-weight: 800;
font-size: 32px;
color: var(--gold, #f1c40f);
line-height: 1;
}
.pp-header-points-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--dim, #555);
margin-top: 6px;
}
.pp-username {
font-family: var(--font-mono);
font-size: 17px;
font-weight: 400;
color: var(--blood-bright, #e70f48);
letter-spacing: .02em;
}
.pp-display-name {
font-family: var(--font-title); font-weight: 800;
font-size: 42px;
color: #fff;
line-height: 1.15;
margin-top: 4px;
}
/* Bio */
.pp-header-wrap {
position: relative;
}
.pp-header-wrap.has-backdrop {
border-radius: 6px;
overflow: hidden;
}
.pp-header-backdrop {
position: absolute;
inset: 0;
z-index: 0;
}
.pp-header-backdrop img {
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(.38) saturate(.75);
}
.pp-header-backdrop::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, var(--ash) 94%);
}
.pp-header-wrap.has-backdrop .pp-header {
position: relative;
z-index: 1;
padding: 40px 32px;
}
.pp-header-wrap.has-backdrop .list-header-content {
position: relative;
z-index: 1;
padding: 40px 32px;
}
/* Community page hero, sharing the same .pp-header-wrap/.pp-header-backdrop
component as the list/person page headers above — see community.php. */
.community-page .pp-header-wrap { margin-bottom: 28px; }
.pp-header-wrap.has-backdrop .community-hero {
position: relative;
z-index: 1;
padding: 40px 32px;
margin-bottom: 0; /* the wrap's own margin-bottom above replaces this */
}
/* Featured-film backdrop, same .pp-header-wrap component, extended
(2026-08-21) to browse/newly-added, upcoming/new-releases, and
lists/streaming — three page pairs that already share markup/CSS with
each other, so each pair shares one set of header-content rules here
too rather than four near-duplicate blocks. See bd_featured_backdrop_url()
in includes/render.php for the shared PHP side. */
/* browse.php + newly-added.php (both ) */
.browse-page .pp-header-wrap { margin-bottom: 24px; }
.pp-header-wrap.has-backdrop .browse-page-header {
position: relative;
z-index: 1;
padding: 40px 32px;
}
.pp-header-wrap.has-backdrop .browse-page-header .faq-intro { margin-bottom: 0; }
/* upcoming.php + new-releases.php (both ) */
.hub-page .pp-header-wrap { margin-bottom: 28px; }
.pp-header-wrap.has-backdrop .hub-page-header {
position: relative;
z-index: 1;
padding: 40px 32px;
}
.pp-header-wrap.has-backdrop .hub-page-header .faq-intro { margin-bottom: 0; }
/* lists.php + streaming.php (both ) — reuses the
existing .lists-page-header component (already carries its own
margin-bottom: 44px, see below) rather than a new wrapper class. */
.lists-page .pp-header-wrap { margin-bottom: 44px; }
.pp-header-wrap.has-backdrop .lists-page-header {
position: relative;
z-index: 1;
padding: 40px 32px;
margin-bottom: 0; /* the wrap's own margin-bottom above replaces this */
}
.pp-bio {
font-size: 18px;
font-weight: 300;
color: var(--muted, #999);
line-height: 1.6;
max-width: 640px;
margin: 16px 0 0;
}
/* Location */
.pp-location {
display: flex;
align-items: center;
gap: 5px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--dim, #666);
margin-top: 8px;
}
.pp-location svg { flex-shrink: 0; }
/* Premium badge / Go Premium CTA — sits under display name */
.pp-premium-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 8px;
padding: 5px 14px;
border: 1px solid var(--gold, #c8a84b);
border-radius: 2px;
color: var(--gold, #c8a84b);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.pp-premium-cta {
display: inline-flex;
align-items: center;
margin-top: 8px;
padding: 8px 20px;
background: var(--gold, #c8a84b);
color: #16110a;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
text-decoration: none;
border-radius: 2px;
transition: opacity .15s;
}
.pp-premium-cta:hover { opacity: .85; }
/* Social links row */
.pp-social { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pp-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid var(--border, #222);
border-radius: 2px;
color: var(--muted, #999);
transition: border-color .15s, color .15s;
}
.pp-social a:hover { border-color: var(--blood-bright); color: var(--blood-bright); }
.pp-social svg { width: 19px; height: 19px; }
/* Stats row — equal width, spans full row */
.pp-stats {
display: grid;
grid-template-columns: repeat(6, 1fr);
border-top: 1px solid #1e1e1e;
border-bottom: 1px solid #1e1e1e;
margin-top: 24px;
}
.pp-stat {
text-align: center;
padding: 16px 8px;
border-right: 1px solid #1e1e1e;
}
.pp-stat:last-child { border-right: none; }
.pp-stat-num {
font-family: var(--font-title); font-weight: 800;
font-size: 24px;
color: var(--bone, #e8e0d0);
line-height: 1;
}
.pp-stat-link {
display: block;
text-decoration: none;
cursor: pointer;
}
.pp-stat-link:hover { color: var(--blood); }
.pp-stat-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--dim, #555);
margin-top: 6px;
}
/* Follow button */
.pp-follow-wrap { margin-top: 20px; }
.pp-follow-btn {
padding: 10px 28px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
border-radius: 2px;
transition: background .15s, border-color .15s, color .15s;
}
.pp-follow-btn.follow { background: var(--blood); border: 1px solid var(--blood); color: #fff; }
.pp-follow-btn.follow:hover { background: var(--blood-bright); border-color: var(--blood-bright); }
.pp-follow-btn.unfollow { background: transparent; border: 1px solid var(--border2, #333); color: var(--muted); }
.pp-follow-btn.unfollow:hover { border-color: var(--blood-bright); color: var(--blood-bright); }
/* Tabs — full width, Instagram-style top border indicator */
.pp-tabs {
display: flex;
border-bottom: 1px solid #1e1e1e;
margin-top: 36px;
}
.pp-tab {
flex: 1;
text-align: center;
padding: 14px 8px;
background: none;
border: none;
border-bottom: 2px solid transparent;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--dim, #555);
cursor: pointer;
transition: color .15s, border-color .15s;
}
.pp-tab.active { color: var(--blood-bright); border-bottom-color: var(--blood-bright); }
.pp-tab:hover:not(.active) { color: var(--muted); }
/* Edit Profile — styled as a standout CTA button rather than a plain tab */
.pp-tab.pp-tab-cta {
flex: 0 0 auto;
background: var(--blood);
color: #fff;
border-bottom: none;
border-radius: 2px;
padding: 10px 22px;
margin: 8px 0 8px 12px;
}
.pp-tab.pp-tab-cta:hover,
.pp-tab.pp-tab-cta.active {
background: var(--blood-bright);
color: #fff;
border-bottom: none;
}
.pp-panel { display: none; padding-top: 24px; }
.pp-panel.active { display: block; }
/* ── Overview tab ─────────────────────────────────────── */
.pp-overview-divider {
border-top: 1px solid var(--border);
margin-bottom: 32px;
}
.pp-overview-section { margin-bottom: 40px; }
.pp-overview-section:last-child { margin-bottom: 0; }
.pp-overview-section-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.pp-overview-section-head h3 {
font-family: var(--font-body);
font-weight: 800;
font-size: 15px;
letter-spacing: .02em;
text-transform: uppercase;
color: var(--bone);
}
.pp-overview-see-all {
font-family: var(--font-mono);
font-size: 11px;
color: var(--dim);
text-decoration: none;
white-space: nowrap;
transition: color .15s;
}
.pp-overview-see-all:hover { color: var(--blood-bright); }
.pp-grid--compact {
grid-template-columns: repeat(4, 1fr);
}
.pp-following-avatars {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pp-following-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
display: block;
background: var(--border);
transition: transform .15s;
}
.pp-following-avatar:hover { transform: scale(1.08); }
.pp-following-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-following-avatar-initials {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body);
font-size: 14px; font-weight: 700;
color: var(--bone);
}
@media (max-width: 600px) {
.pp-grid--compact { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pp-following-avatar { width: 36px; height: 36px; }
}
/* Poster grid for watched/ratings/activity — reuses film-card/fc- classes */
.pp-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
}
/* Activity list (text-based, not posters) */
.pp-activity-item {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 0;
border-bottom: 1px solid #1a1a1a;
}
.pp-activity-item:last-child { border-bottom: none; }
.pp-activity-poster {
width: 36px;
height: 54px;
flex-shrink: 0;
background: #1a1a1a;
border: 1px solid #222;
overflow: hidden;
}
.pp-activity-poster img { width: 100%; height: 100%; object-fit: cover; }
.pp-activity-text { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); line-height: 1.5; }
.pp-activity-text a { color: var(--bone); text-decoration: none; }
.pp-activity-text a:hover { color: var(--blood-bright); }
.pp-activity-time {
font-family: var(--font-mono);
font-size: 10px;
color: var(--dim);
margin-top: 3px;
}
.pp-load-more-wrap { text-align: center; margin-top: 24px; }
.pp-empty {
font-family: var(--font-mono);
font-size: 12px;
color: var(--dim);
padding: 32px 0;
text-align: center;
}
/* Mobile */
@media (max-width: 600px) {
.pp-page { padding-top: 32px; padding-bottom: 60px; }
/* Header: stack avatar above identity, centered, clean separation */
.pp-header {
flex-direction: column;
align-items: center;
text-align: center;
gap: 12px;
}
/* .pp-header carries a base margin-bottom: 28px (desktop rule) that's
meant to space it from whatever follows when there's no backdrop box.
With a backdrop, overflow:hidden on the wrap traps that margin inside
the rounded box instead of collapsing it away, so it was stacking on
top of the 28px bottom padding below — 56px before the stats-grid
margin even applied. Zero it out here; the padding alone frames it. */
.pp-header-wrap.has-backdrop .pp-header { padding: 28px 20px; margin-bottom: 0; }
.pp-header-wrap.has-backdrop .list-header-content { padding: 28px 20px; }
.pp-header-wrap.has-backdrop .community-hero { padding: 28px 20px; }
.pp-header-wrap.has-backdrop .browse-page-header { padding: 28px 20px; }
.pp-header-wrap.has-backdrop .hub-page-header { padding: 28px 20px; }
.pp-header-wrap.has-backdrop .lists-page-header { padding: 28px 20px; }
.pp-avatar, .pp-avatar-initials { width: 110px; height: 110px; }
.pp-avatar-initials { font-size: 40px; }
.pp-identity { width: 100%; padding-top: 0; }
.pp-display-name { font-size: 28px; }
.pp-username { font-size: 13px; }
.pp-header-points { margin-left: 0; margin-top: 16px; padding: 10px 24px; }
.pp-header-points-num { font-size: 26px; }
.pp-bio { font-size: 15px; margin-left: auto; margin-right: auto; }
.pp-location { justify-content: center; }
.pp-social { justify-content: center; }
.pp-follow-wrap { display: flex; justify-content: center; }
/* Stats: clean 3x2 grid, fully separated from header above */
.pp-stats {
grid-template-columns: repeat(3, 1fr);
margin-top: 28px;
}
/* Backdrop header already has its own 28px bottom padding around the
points badge (margin-bottom zeroed above so that's the only space
left in there) — a smaller top margin here keeps the total in line
with the site's normal spacing instead of piling on a full 28px more. */
.pp-header-wrap.has-backdrop + .pp-stats { margin-top: 12px; }
.pp-stat { padding: 14px 4px; border-bottom: 1px solid #1e1e1e; }
.pp-stat:nth-child(3n) { border-right: none; }
.pp-stat:nth-last-child(-n+3) { border-bottom: none; }
.pp-stat-num { font-size: 18px; }
.pp-stat-label { font-size: 9px; }
/* Tabs: 4 equal columns, no wrap */
.pp-tabs { display: flex; }
.pp-tab { flex: 1; font-size: 9px; padding: 10px 2px; letter-spacing: 0; white-space: nowrap; }
/* Poster grids: fixed 3-column, matches PAGE_SIZE multiples */
.pp-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}
/* ── Sub-genre tiles — film backdrop style ─────────────── */
.sg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 12px;
}
.sg-tile {
position: relative;
display: flex;
align-items: flex-end;
height: 100px;
border-radius: 4px;
overflow: hidden;
text-decoration: none;
border: 1px solid #222;
transition: border-color .2s, transform .2s;
}
.sg-tile:hover {
border-color: var(--blood, #e70f48);
transform: translateY(-2px);
}
.sg-bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 20%;
filter: brightness(0.55);
transition: filter .2s, transform .2s;
z-index: 0;
}
.sg-tile:hover .sg-bg {
filter: brightness(0.45);
transform: scale(1.04);
}
.sg-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.1) 60%);
z-index: 1;
}
.sg-name {
position: relative;
z-index: 2;
width: 100%;
padding: 10px 12px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
@media (max-width: 600px) {
.sg-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.sg-tile { height: 80px; }
}
/* ── My Profile — avatar edit pencil + Edit Profile tab ── */
.pp-avatar-wrap { position: relative; }
.pp-avatar-edit {
position: absolute;
bottom: 4px;
right: 4px;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--blood-bright, #e70f48);
border: 2px solid #0a0a0a;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .15s;
}
.pp-avatar-edit:hover { background: var(--blood, #e70f48); }
.pp-avatar-edit svg { width: 14px; height: 14px; stroke: #fff; }
.pp-avatar-remove {
position: absolute;
bottom: 4px;
left: 4px;
width: 32px;
height: 32px;
border-radius: 50%;
background: #2a2a2a;
border: 2px solid #0a0a0a;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background .15s;
}
.pp-avatar-remove:hover { background: #e70f48; }
.pp-avatar-remove svg { width: 14px; height: 14px; stroke: #999; }
.pp-avatar-remove:hover svg { stroke: #fff; }
/* Edit Profile tab content — form fields, single column */
.pp-edit-grid {
display: block;
}
.pp-edit-section { max-width: 480px; }
.pp-edit-field { margin-bottom: 18px; }
.pp-edit-label {
display: block;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 1.2px;
text-transform: uppercase;
color: var(--muted, #999);
margin-bottom: 8px;
}
.pp-edit-checkbox-field {
display: flex;
align-items: flex-start;
gap: 10px;
}
.pp-edit-checkbox-field input[type="checkbox"] {
width: 16px; height: 16px; margin-top: 3px; flex-shrink: 0;
accent-color: var(--blood-bright, #e70f48);
cursor: pointer;
}
.pp-edit-checkbox-field label {
font-family: var(--font-body);
font-size: 13px;
color: var(--pale);
line-height: 1.4;
cursor: pointer;
}
.pp-edit-section-label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--blood-bright, #e70f48);
margin: 28px 0 16px;
}
.pp-edit-section-label:first-child { margin-top: 0; }
.pp-edit-section-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 28px 0 16px;
}
.pp-edit-section-label-row .pp-edit-section-label { margin: 0; }
.pp-edit-section-label-row .new-list-btn {
width: auto;
margin-bottom: 0;
padding: 8px 16px;
}
.pp-delete-account-section {
margin-top: 72px;
padding-top: 28px;
border-top: 1px solid var(--border, #222);
}
.pp-delete-account-copy {
font-size: 12px;
line-height: 1.7;
color: var(--dim, #777);
max-width: 420px;
margin-bottom: 16px;
}
.pp-delete-account-btn {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 9px 18px;
background: transparent;
border: 1px solid var(--border2, #333);
color: var(--dim, #777);
cursor: pointer;
transition: border-color .15s, color .15s;
}
.pp-delete-account-btn:hover {
border-color: var(--muted, #999);
color: var(--muted, #999);
}
/* Following list item — shared with the standalone Following/Followers page */
.pp-following-list { display: flex; flex-direction: column; gap: 2px; }
.pp-following-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #1a1a1a;
text-decoration: none;
}
.pp-following-item img,
.pp-following-item .pp-following-initials {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1px solid var(--border, #222);
}
.pp-following-initials {
display: flex;
align-items: center;
justify-content: center;
background: var(--blood);
color: #fff;
font-family: var(--font-title); font-weight: 800;
font-size: 14px;
}
.pp-following-name {
font-family: var(--font-mono);
font-size: 13px;
color: var(--pale, #ccc);
}
@media (max-width: 600px) {
.pp-avatar-edit, .pp-avatar-remove { width: 28px; height: 28px; }
.pp-avatar-edit svg, .pp-avatar-remove svg { width: 12px; height: 12px; }
.pp-edit-section { max-width: 100%; }
}
/* ── Profile — report link ───────────────────────────── */
.pp-header-actions {
display: flex;
align-items: center;
gap: 16px;
margin-top: 20px;
}
.pp-report-link {
font-family: var(--font-mono);
font-size: 11px;
color: var(--dim, #555);
text-decoration: underline;
letter-spacing: .02em;
transition: color .15s;
}
.pp-report-link:hover { color: var(--blood-bright, #e70f48); }
.pp-copy-link {
background: none;
border: none;
padding: 0;
cursor: pointer;
font-family: var(--font-mono);
font-size: 11px;
color: var(--dim, #555);
text-decoration: underline;
letter-spacing: .02em;
transition: color .15s;
}
.pp-copy-link:hover { color: var(--bone); }
@media (max-width: 600px) {
.pp-header-actions { justify-content: center; flex-wrap: wrap; }
}
/* Film row card skeletons — match fc-poster aspect-ratio: 2/3 */
.film-row-skeleton {
aspect-ratio: 2/3;
background: #111;
border: 1px solid #1a1a1a;
flex-shrink: 0;
}
/* Subgenre tile skeletons — match sg-tile height: 100px */
.sg-tile-skeleton {
height: 100px;
background: #111;
border: 1px solid #1a1a1a;
border-radius: 4px;
}
/* Hero placeholder — removed by JS once hero renders */
#featured-hero-placeholder {
background: #0a0a0a;
}
@media (max-width: 600px) {
/* !important is required here: the placeholder div in index.php carries
an inline style="height:610px" (its desktop CLS height), and an
inline style attribute otherwise beats any external stylesheet rule
regardless of selector specificity — a plain (non-!important) rule
here would never actually apply on mobile. Height updated to roughly
match the new banner+poster+meta stack below (2026-08-21; tightened
further 2026-08-22 when the banner height and meta top padding were
both reduced) so the placeholder doesn't reserve noticeably more or
less space than the real hero ends up needing once JS renders it in. */
#featured-hero-placeholder { height: 510px !important; }
.sg-tile-skeleton { height: 80px; }
}
.comments-section .section-label { margin-bottom: 16px; }
.comments-signin-prompt {
font-family: var(--font-body);
font-size: 13px;
color: var(--dim);
padding: 16px;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 6px;
margin-bottom: 24px;
}
.comments-signin-prompt a { color: var(--blood); text-decoration: none; }
.comments-signin-prompt a:hover { text-decoration: underline; }
.comment-form { margin-bottom: 24px; }
.comment-form__replying {
font-family: var(--font-body);
font-size: 12px;
color: var(--dim);
margin-bottom: 6px;
}
.comment-form__textarea,
.comment__edit-textarea {
width: 100%;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--bone);
font-family: var(--font-body);
font-size: 14px;
padding: 12px;
resize: vertical;
min-height: 72px;
}
.comment-form__textarea:focus,
.comment__edit-textarea:focus {
outline: none;
border-color: var(--border2);
}
.comment-form__actions {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 8px;
}
.comments-btn {
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
border-radius: 5px;
padding: 7px 16px;
cursor: pointer;
border: 1px solid transparent;
}
.comments-btn--primary {
background: var(--blood);
color: var(--bone);
}
.comments-btn--primary:hover { background: var(--blood-bright); }
.comments-btn--secondary {
background: transparent;
color: var(--muted);
border-color: var(--border2);
}
.comments-btn--secondary:hover { color: var(--bone); border-color: var(--muted); }
.comments-empty,
.comments-error {
font-family: var(--font-body);
font-size: 13px;
color: var(--dim);
padding: 16px 0;
}
.comments-list { display: flex; flex-direction: column; gap: 32px; }
.comment { }
.comment__main { }
.comment__replying-to {
font-family: var(--font-body);
font-size: 13px;
color: var(--dim);
}
.comment__replying-to a {
color: var(--dim);
text-decoration: none;
}
.comment__replying-to a:hover {
color: var(--blood);
text-decoration: underline;
}
.comment__header {
display: flex;
align-items: flex-start;
gap: 8px;
margin-bottom: 6px;
}
.comment__meta { flex: 1; min-width: 0; }
.comment__header-actions {
display: flex; align-items: center; gap: 4px;
flex-shrink: 0; margin-left: auto;
}
.comment__icon-btn {
background: none; border: none; cursor: pointer;
color: var(--dim); display: flex; align-items: center; justify-content: center;
width: 22px; height: 22px; font-size: 15px; line-height: 1; padding: 0;
border-radius: 2px; transition: color .15s, background .15s;
}
.comment__icon-btn:hover { color: var(--bone); background: var(--border); }
.comment__icon-btn[data-action="report"]:hover { color: var(--blood-bright); }
/* ── Collapsed comment state ──────────────────────────── */
.comment--collapsed .comment__body,
.comment--collapsed .comment__actions,
.comment--collapsed .comment__hidden-note {
display: none;
}
.comment__avatar {
width: 40px; height: 40px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--border);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body);
font-size: 15px; font-weight: 700;
color: var(--bone);
}
.comment__avatar img { width: 100%; height: 100%; object-fit: cover; }
.comment__meta {
display: flex;
flex-direction: column;
gap: 2px;
}
.comment__name-row {
display: flex;
align-items: center;
gap: 8px;
}
.comment__name {
font-family: var(--font-body);
font-size: 15px;
font-weight: 700;
color: var(--bone);
text-decoration: none;
}
.comment__name:hover { color: var(--blood); }
.comment__time {
font-family: var(--font-body);
font-size: 12px;
color: var(--dim);
}
.comment__hidden-note {
font-family: var(--font-body);
font-size: 11px;
color: var(--gold);
margin-bottom: 6px;
}
.comment__body {
font-family: var(--font-body);
font-size: 16px;
font-weight: 300;
line-height: 1.6;
color: var(--bone);
white-space: pre-wrap;
word-break: break-word;
}
.comment__deleted {
font-family: var(--font-body);
font-size: 13px;
font-style: italic;
color: var(--dim);
}
.comment__actions {
display: flex;
gap: 14px;
margin-top: 8px;
}
.comment__action {
background: none;
border: none;
padding: 0;
font-family: var(--font-body);
font-size: 13px;
font-weight: 300;
color: var(--dim);
cursor: pointer;
}
.comment__action:hover { color: var(--bone); }
.fc-reason {
font-family: var(--font-mono);
font-size: 11px;
color: var(--gold);
margin-top: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.comment-thread { }
.comment__replies {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 16px;
padding-left: 20px;
border-left: 2px solid var(--border);
}
.comment--reply .comment__body {
font-size: 15px;
}
.comment--reply .comment__name {
font-size: 14px;
}
.comments-btn--text {
display: inline-block;
margin-top: 12px;
padding: 0;
background: none;
border: none;
color: var(--dim);
font-family: var(--font-body);
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.comments-btn--text:hover { color: var(--blood); }
.comments-btn--text:disabled { color: var(--border2); cursor: default; }
@media (max-width: 600px) {
.comment__replies {
padding-left: 12px;
border-left-width: 1px;
}
}
/* ────────────────────────────────────────────────────────
Announcements pages (list + detail)
Same --card-bg/--border/--bone/--blood/--font-body tokens
as the rest of main.css.
──────────────────────────────────────────────────────── */
.announcements-list {
display: flex;
flex-direction: column;
gap: 20px;
max-width: 720px;
}
.announcement-card {
display: block;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px 24px;
text-decoration: none;
transition: border-color .15s;
}
.announcement-card:hover { border-color: var(--border2); }
.announcement-card__date {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--dim);
margin-bottom: 8px;
}
.announcement-card__title {
font-family: var(--font-body);
font-size: 20px;
font-weight: 700;
color: var(--bone);
margin: 0 0 8px;
}
.announcement-card__excerpt {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.5;
color: var(--pale);
margin: 0;
}
/* ── Detail page ─────────────────────────────────────── */
.announcement-back-link {
display: inline-block;
font-family: var(--font-body);
font-size: 13px;
font-weight: 600;
color: var(--dim);
text-decoration: none;
margin-bottom: 24px;
}
.announcement-back-link:hover { color: var(--bone); }
/* ── Following / Followers page ──────────────────────── */
.conn-header {
margin-bottom: 20px;
}
.conn-name {
font-family: var(--font-body);
font-weight: 800;
font-size: 24px;
color: var(--bone);
}
#conn-tab-following.pp-panel,
#conn-tab-followers.pp-panel {
padding-top: 20px;
}
.announcement-detail__date {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--dim);
margin-bottom: 10px;
}
.announcement-detail__title {
font-family: var(--font-body);
font-size: clamp(26px, 4vw, 36px);
font-weight: 800;
color: var(--bone);
margin: 0 0 24px;
line-height: 1.25;
}
.announcement-detail__body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.7;
color: var(--pale);
white-space: pre-wrap;
word-break: break-word;
}
/* ────────────────────────────────────────────────────────
Profile edit — display name cooldown hint
──────────────────────────────────────────────────────── */
.pp-edit-hint {
font-family: var(--font-body);
font-size: 12px;
color: var(--dim);
margin-top: 6px;
}
.pp-edit-hint--cooldown {
color: var(--gold);
}
.comments-join-cta {
background: linear-gradient(135deg, rgba(231,15,72,.14), rgba(231,15,72,.04));
border: 1px solid rgba(231,15,72,.28);
border-radius: 4px;
padding: 32px 24px;
text-align: center;
margin-bottom: 24px;
}
.comments-join-cta__heading {
font-family: var(--font-title);
font-weight: 800;
font-size: 21px;
letter-spacing: .02em;
text-transform: uppercase;
color: #fff;
margin: 0 0 10px;
line-height: 1.25;
}
.comments-join-cta__heading .accent { color: var(--blood-bright); }
.comments-join-cta__text {
font-family: var(--font-body);
font-size: 14px;
color: var(--dim);
max-width: 460px;
margin: 0 auto 20px;
line-height: 1.5;
}
.comments-join-cta__login {
font-family: var(--font-body);
font-size: 12px;
color: var(--dim);
margin: 14px 0 0;
}
.comments-join-cta__login a { color: var(--blood-bright); text-decoration: none; }
.comments-join-cta__login a:hover { text-decoration: underline; }
.join-cta-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--blood);
color: #fff;
font-family: var(--font-mono);
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
padding: 13px 34px;
border-radius: 2px;
transition: background .15s;
}
.join-cta-btn:hover { background: var(--blood-bright); }
@media (max-width: 600px) {
.comments-join-cta { padding: 24px 18px; }
.comments-join-cta__heading { font-size: 18px; }
}
/* ── Comment vote widget (inline, bottom actions row) ─── */
.comment__votes-inline {
display: flex; align-items: center; gap: 4px;
}
.comment__votes-inline--readonly { gap: 3px; }
.comment__vote-icon { color: var(--dim); font-size: 11px; line-height: 1; }
.comment__vote-btn {
background: none; border: none; cursor: pointer;
color: var(--dim); font-size: 12px; line-height: 1; padding: 3px;
transition: color .15s;
}
.comment__vote-btn:hover { color: var(--bone); }
.comment__vote-btn.active[data-action="upvote"] { color: var(--gold); }
.comment__vote-btn.active[data-action="downvote"] { color: var(--blood-bright); }
.comment__vote-btn:disabled { opacity: .5; cursor: default; }
.comment__vote-score {
font-family: var(--font-mono); font-size: 12px; color: var(--dim); font-weight: 600;
}
/* ── Rich text: bold/italic already inherit body type; spoiler ── */
.comment-spoiler {
background: var(--border2); color: transparent;
border-radius: 2px; cursor: pointer; user-select: none;
transition: background .1s;
}
.comment-spoiler.revealed {
background: transparent; color: inherit; cursor: text; user-select: text;
}
/* ── Rich text toolbar (comment form + edit mode) ─────── */
.comment-form__toolbar { display: flex; gap: 4px; margin-bottom: 6px; }
.comment-toolbar-btn {
background: var(--card-bg); border: 1px solid var(--border2); color: var(--dim);
font-family: var(--font-body); font-size: 12px; width: 26px; height: 26px;
border-radius: 2px; cursor: pointer; transition: all .15s;
}
.comment-toolbar-btn:hover { color: var(--bone); border-color: var(--blood-bright); }
/* ── Comment count header + sort tabs ─────────────────── */
.comments-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px;
}
.comments-count {
font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--bone);
}
.comments-sort-tabs { display: flex; gap: 4px; }
.comments-sort-tab {
background: none; border: none; color: var(--dim);
font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
padding: 4px 10px; cursor: pointer; border-radius: 2px; transition: all .15s;
}
.comments-sort-tab:hover { color: var(--bone); }
.comments-sort-tab.active { background: var(--card-bg); color: var(--bone); border: 1px solid var(--border2); }
/* ── Admin moderation dashboard ───────────────────────── */
.admin-mod-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); }
.admin-mod-tab {
background: none; border: none; border-bottom: 2px solid transparent;
color: var(--dim); font-family: var(--font-mono); font-size: 13px;
padding: 10px 4px; cursor: pointer; transition: all .15s;
}
.admin-mod-tab:hover { color: var(--bone); }
.admin-mod-tab.active { color: var(--bone); border-bottom-color: var(--blood-bright); }
.admin-mod-card {
background: var(--card-bg); border: 1px solid var(--border); border-radius: 2px;
padding: 16px; margin-bottom: 12px;
}
.admin-mod-card__meta {
display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
font-family: var(--font-mono); font-size: 11px;
}
.admin-mod-card__author { color: var(--blood-bright); text-decoration: none; font-weight: 700; }
.admin-mod-card__author:hover { text-decoration: underline; }
.admin-mod-card__stat { color: var(--dim); }
.admin-mod-card__content {
font-family: var(--font-body); font-size: 14px; color: var(--bone);
line-height: 1.6; margin-bottom: 12px; white-space: pre-wrap;
}
.admin-mod-card__actions { display: flex; gap: 8px; }
.admin-deletion-card {
background: var(--card-bg); border: 1px solid var(--border); border-radius: 2px;
padding: 16px; margin-bottom: 12px;
}
.admin-deletion-card__meta {
display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px;
font-family: var(--font-mono); font-size: 11px;
}
.admin-deletion-card__email { color: var(--blood-bright); font-weight: 700; }
.admin-deletion-card__stat { color: var(--dim); }
.admin-deletion-card__detail {
font-family: var(--font-mono); font-size: 11px; color: var(--dim); margin-bottom: 8px;
}
.admin-deletion-card__content {
font-family: var(--font-body); font-size: 14px; color: var(--bone);
line-height: 1.6; margin-bottom: 12px; white-space: pre-wrap;
}
.admin-deletion-card__actions { display: flex; gap: 8px; }
/* ── FAQ page ─────────────────────────────────────────── */
.faq-intro {
font-family: var(--font-body);
font-size: 16px;
font-weight: 300;
color: var(--muted);
line-height: 1.6;
max-width: 560px;
margin-top: 10px;
}
.faq-section { margin-bottom: 44px; }
.faq-section:last-child { margin-bottom: 0; }
.faq-section-title {
font-family: var(--font-body);
font-weight: 800;
font-size: 13px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--blood-bright);
margin-bottom: 16px;
}
.faq-item {
background: var(--card-bg);
border: 1px solid var(--border);
margin-bottom: 10px;
transition: border-color .15s;
}
.faq-item:hover { border-color: var(--border2); }
.faq-item[open] { border-color: var(--border2); }
.faq-question {
list-style: none;
cursor: pointer;
padding: 16px 44px 16px 18px;
position: relative;
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
color: var(--bone);
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
content: '+';
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-body);
font-size: 20px;
font-weight: 300;
color: var(--dim);
transition: transform .15s;
}
.faq-item[open] .faq-question::after {
content: '\2212'; /* minus sign */
}
.faq-answer {
padding: 0 18px 18px;
font-family: var(--font-body);
font-size: 14px;
font-weight: 300;
line-height: 1.7;
color: var(--pale);
}
.faq-answer p { margin-bottom: 10px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul { padding-left: 20px; margin-bottom: 10px; }
.faq-answer ul:last-child { margin-bottom: 0; }
.faq-answer li { margin-bottom: 4px; }
.faq-answer a { color: var(--blood-bright); text-decoration: underline; }
.faq-answer strong { color: var(--bone); font-weight: 700; }
.faq-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--gold);
background: rgba(200,168,75,.14);
border: 1px solid rgba(200,168,75,.35);
padding: 3px 8px;
border-radius: 2px;
vertical-align: middle;
margin-left: 4px;
}
/* ── Lists browse page ───────────────────────────────── */
.lists-page-header { margin-bottom: 44px; }
.lists-page-header .faq-intro { margin-top: 10px; }
.lists-section { margin-bottom: 52px; }
.lists-section:last-child { margin-bottom: 0; }
.lists-section-head { margin-bottom: 20px; }
.lists-section-title {
font-family: var(--font-body);
font-weight: 800;
font-size: 20px;
color: var(--bone);
}
.lists-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 20px;
}
.lists-card {
display: block;
text-decoration: none;
background: var(--card-bg);
border: 1px solid var(--border);
overflow: hidden;
transition: border-color .15s, transform .15s;
}
.lists-card:hover { border-color: var(--blood-bright); transform: translateY(-2px); }
.lists-card-thumb {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
aspect-ratio: 16 / 10;
background: #111;
gap: 0;
overflow: hidden;
}
.lists-card-thumb::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 25%, rgba(0,0,0,.65) 100%);
pointer-events: none;
}
.lists-card-thumb img,
.lists-card-thumb-blank {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(.7) brightness(.85);
}
.lists-card-thumb-blank { background: #1a1a1a; }
.lists-card-body { padding: 14px 16px; }
.lists-card-name {
font-family: var(--font-body);
font-weight: 700;
font-size: 15px;
color: var(--bone);
line-height: 1.3;
margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.lists-card-meta {
font-family: var(--font-mono);
font-size: 11px;
color: var(--dim);
}
.lists-card-author {
font-weight: 700;
color: var(--bone);
}
@media (max-width: 600px) {
.lists-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lists-card-body { padding: 10px 12px; }
.lists-card-name { font-size: 13px; }
/* Community page only: 8 cards render in the markup, but show just the
first 4 (2x2) on mobile — /db/lists itself uses .lists-grid without
this modifier class, so it still shows everything there. */
.community-lists-grid .lists-card:nth-child(n+5) { display: none; }
}