#cff-screenplay-finalists-app {
--cff-finalists-ink: #26243a;
--cff-finalists-navy: #2e2e48;
--cff-finalists-navy-deep: #1c1b2d;
--cff-finalists-gold: #c9a875;
--cff-finalists-cream: #f5efe5;
--cff-finalists-paper: #fbfaf7;
--cff-finalists-line: #ded7cc;
--cff-finalists-muted: #706d79;
width: 100%;
overflow: hidden;
color: var(--cff-finalists-ink);
background: var(--cff-finalists-paper);
font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
#cff-screenplay-finalists-app,
#cff-screenplay-finalists-app *,
#cff-screenplay-finalists-app *::before,
#cff-screenplay-finalists-app *::after {
box-sizing: border-box;
}
#cff-screenplay-finalists-app h1,
#cff-screenplay-finalists-app h2,
#cff-screenplay-finalists-app p {
margin: 0;
padding: 0;
}
#cff-screenplay-finalists-app button,
#cff-screenplay-finalists-app input {
margin: 0;
font: inherit;
text-transform: none;
box-shadow: none;
}
#cff-screenplay-finalists-app .cff-finalists-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
#cff-screenplay-finalists-app .cff-finalists-hero {
position: relative;
min-height: 520px;
padding: 104px clamp(24px, 7vw, 112px) 92px;
display: grid;
grid-template-columns: minmax(0, 760px) auto;
align-items: end;
justify-content: space-between;
gap: 56px;
overflow: hidden;
color: #fff;
background:
linear-gradient(105deg, rgba(20, 22, 43, 0.94) 0%, rgba(28, 29, 52, 0.84) 58%, rgba(28, 29, 52, 0.66) 100%),
url(https://catalinafilm.org/wp-content/uploads/2026/08/c81b8dad-d8af-40af-a394-cbb8f0fae1d4.png) center / cover no-repeat;
}
#cff-screenplay-finalists-app .cff-finalists-hero::before,
#cff-screenplay-finalists-app .cff-finalists-hero::after {
content: "";
position: absolute;
border: 1px solid rgba(201, 168, 117, 0.32);
border-radius: 50%;
}
#cff-screenplay-finalists-app .cff-finalists-hero::before {
width: 620px;
height: 620px;
right: -230px;
top: -330px;
}
#cff-screenplay-finalists-app .cff-finalists-hero::after {
width: 440px;
height: 440px;
right: -105px;
top: -245px;
}
#cff-screenplay-finalists-app .cff-finalists-hero__glow {
position: absolute;
width: 380px;
height: 380px;
right: 7%;
bottom: -250px;
border-radius: 50%;
background: rgba(201, 168, 117, 0.26);
filter: blur(70px);
}
#cff-screenplay-finalists-app .cff-finalists-hero__content {
position: relative;
z-index: 1;
}
#cff-screenplay-finalists-app .cff-finalists-overline {
margin-bottom: 24px;
color: var(--cff-finalists-gold);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
#cff-screenplay-finalists-app .cff-finalists-hero h1 {
max-width: 780px;
color: #fff;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(58px, 8vw, 112px);
font-weight: 400;
line-height: 0.88;
letter-spacing: -0.055em;
text-shadow: 0 3px 24px rgba(10, 12, 28, 0.42);
}
#cff-screenplay-finalists-app .cff-finalists-hero h1 span {
display: block;
color: var(--cff-finalists-gold);
font-style: italic;
}
#cff-screenplay-finalists-app .cff-finalists-intro {
max-width: 660px;
margin-top: 34px;
color: rgba(255, 255, 255, 0.74);
font-size: clamp(16px, 1.5vw, 20px);
line-height: 1.65;
}
#cff-screenplay-finalists-app .cff-finalists-hero__mark {
position: relative;
z-index: 1;
width: 146px;
height: 146px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid rgba(201, 168, 117, 0.7);
border-radius: 50%;
color: var(--cff-finalists-gold);
}
#cff-screenplay-finalists-app .cff-finalists-hero__mark span {
font-family: Georgia, "Times New Roman", serif;
font-size: 50px;
line-height: 0.9;
}
#cff-screenplay-finalists-app .cff-finalists-hero__mark small {
margin-top: 9px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.22em;
}
#cff-screenplay-finalists-app .cff-finalists-summary {
min-height: 48px;
padding: 10px clamp(24px, 7vw, 112px);
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
color: #57462f;
background: #e9dcc8;
border-bottom: 1px solid #d9c7aa;
font-size: 12px;
text-align: center;
}
#cff-screenplay-finalists-app .cff-finalists-summary strong {
padding: 4px 8px;
color: #fff;
background: #876a42;
border-radius: 3px;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#cff-screenplay-finalists-app .cff-finalists-main {
max-width: 1500px;
margin: 0 auto;
padding: 72px clamp(20px, 6vw, 96px) 96px;
}
#cff-screenplay-finalists-app .cff-finalists-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
#cff-screenplay-finalists-app .cff-finalists-search {
position: relative;
width: min(100%, 440px);
}
#cff-screenplay-finalists-app .cff-finalists-search svg {
position: absolute;
left: 18px;
top: 50%;
width: 18px;
height: 18px;
transform: translateY(-50%);
fill: none;
stroke: var(--cff-finalists-muted);
stroke-linecap: round;
stroke-width: 1.7;
pointer-events: none;
}
#cff-screenplay-finalists-app .cff-finalists-search input {
width: 100%;
height: 54px;
padding: 0 20px 0 50px;
color: var(--cff-finalists-ink);
background: #fff;
border: 1px solid var(--cff-finalists-line);
border-radius: 0;
outline: none;
}
#cff-screenplay-finalists-app .cff-finalists-search input:focus {
border-color: var(--cff-finalists-gold);
box-shadow: 0 0 0 3px rgba(201, 168, 117, 0.16);
}
#cff-screenplay-finalists-app .cff-finalists-count {
color: var(--cff-finalists-muted);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#cff-screenplay-finalists-app .cff-finalists-filters {
margin: 28px 0 50px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
#cff-screenplay-finalists-app .cff-finalists-filters button {
min-height: 42px;
padding: 10px 18px;
color: var(--cff-finalists-muted);
background: transparent;
border: 1px solid var(--cff-finalists-line);
border-radius: 999px;
cursor: pointer;
font-size: 12px;
font-weight: 700;
transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
#cff-screenplay-finalists-app .cff-finalists-filters button:hover {
color: var(--cff-finalists-navy);
border-color: var(--cff-finalists-gold);
transform: translateY(-1px);
}
#cff-screenplay-finalists-app .cff-finalists-filters button.is-active {
color: #fff;
background: var(--cff-finalists-navy);
border-color: var(--cff-finalists-navy);
}
#cff-screenplay-finalists-app .cff-finalists-grid {
margin-top: 42px;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
#cff-screenplay-finalists-app .cff-finalist-card {
position: relative;
min-height: 280px;
padding: 28px;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid var(--cff-finalists-line);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
#cff-screenplay-finalists-app .cff-finalist-card::after {
content: "";
position: absolute;
right: -40px;
bottom: -65px;
width: 150px;
height: 150px;
border: 1px solid rgba(201, 168, 117, 0.24);
border-radius: 50%;
}
#cff-screenplay-finalists-app .cff-finalist-card:hover {
transform: translateY(-4px);
border-color: #cbbda8;
box-shadow: 0 18px 45px rgba(35, 33, 52, 0.09);
}
#cff-screenplay-finalists-app .cff-finalist-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
#cff-screenplay-finalists-app .cff-finalist-number {
color: #d8d0c4;
font-family: Georgia, "Times New Roman", serif;
font-size: 28px;
}
#cff-screenplay-finalists-app .cff-finalist-badge {
color: #8b6b3e;
font-size: 8px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#cff-screenplay-finalists-app .cff-finalist-category {
margin-top: 42px;
color: #987749;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
#cff-screenplay-finalists-app .cff-finalist-card h2 {
margin-top: 9px;
color: var(--cff-finalists-navy-deep);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(27px, 2.2vw, 37px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -0.03em;
}
#cff-screenplay-finalists-app .cff-finalist-writer {
margin-top: 18px;
color: var(--cff-finalists-muted);
font-size: 13px;
}
#cff-screenplay-finalists-app .cff-finalist-writer strong {
color: var(--cff-finalists-ink);
font-weight: 700;
}
#cff-screenplay-finalists-app .cff-finalist-meta {
margin-top: 17px;
display: flex;
gap: 8px 18px;
flex-wrap: wrap;
color: #8a8690;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
#cff-screenplay-finalists-app .cff-finalist-meta span + span::before {
content: "·";
margin-right: 18px;
color: var(--cff-finalists-gold);
}
#cff-screenplay-finalists-app .cff-finalist-logline {
position: relative;
z-index: 1;
margin-top: auto;
padding-top: 26px;
color: #666370;
font-size: 13px;
line-height: 1.65;
} #cff-screenplay-finalists-app .cff-finalists-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
#cff-screenplay-finalists-app .cff-finalist-card {
min-height: 470px;
padding: 0;
display: grid;
grid-template-columns: minmax(165px, 36%) minmax(0, 1fr);
}
#cff-screenplay-finalists-app .cff-finalist-card::after {
display: none;
}
#cff-screenplay-finalists-app .cff-finalist-poster {
position: relative;
min-height: 100%;
overflow: hidden;
background:
linear-gradient(145deg, rgba(201, 168, 117, 0.22), transparent 48%),
var(--cff-finalists-navy-deep);
border-right: 1px solid var(--cff-finalists-line);
}
#cff-screenplay-finalists-app .cff-finalist-poster img {
position: absolute;
inset: 0;
z-index: 2;
width: 100%;
height: 100%;
display: block;
object-fit: contain;
object-position: center;
background: #fff;
}
#cff-screenplay-finalists-app .cff-finalist-poster__fallback {
position: absolute;
inset: 0;
z-index: 1;
padding: 24px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
color: var(--cff-finalists-gold);
text-align: center;
}
#cff-screenplay-finalists-app .cff-finalist-poster__fallback span {
font-family: Georgia, "Times New Roman", serif;
font-size: 42px;
letter-spacing: 0.08em;
}
#cff-screenplay-finalists-app .cff-finalist-poster__fallback small {
color: rgba(255, 255, 255, 0.68);
font-size: 9px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
#cff-screenplay-finalists-app .cff-finalist-card__body {
min-width: 0;
padding: 27px 28px 30px;
display: flex;
flex-direction: column;
}
#cff-screenplay-finalists-app .cff-finalist-category {
margin-top: 24px;
}
#cff-screenplay-finalists-app .cff-finalist-card h2 {
font-size: clamp(25px, 2vw, 34px);
max-width: 100%;
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
#cff-screenplay-finalists-app .cff-finalist-ff {
margin-top: 7px;
color: #9a958d;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
#cff-screenplay-finalists-app .cff-finalist-synopsis {
margin-top: 25px;
padding-top: 20px;
border-top: 1px solid #ece7df;
}
#cff-screenplay-finalists-app .cff-finalist-synopsis > span {
color: #987749;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
#cff-screenplay-finalists-app .cff-finalist-synopsis p {
margin-top: 9px;
color: #5f5c68;
font-size: 13px;
line-height: 1.6;
}
#cff-screenplay-finalists-app .cff-finalist-synopsis p.is-placeholder {
color: #8f8b94;
font-style: italic;
}
#cff-screenplay-finalists-app .cff-finalists-empty {
grid-column: 1 / -1;
min-height: 260px;
padding: 48px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: var(--cff-finalists-muted);
background: var(--cff-finalists-cream);
border: 1px solid var(--cff-finalists-line);
text-align: center;
}
#cff-screenplay-finalists-app .cff-finalists-empty strong {
color: var(--cff-finalists-navy);
font-family: Georgia, "Times New Roman", serif;
font-size: 28px;
font-weight: 400;
}
#cff-screenplay-finalists-app .cff-finalists-footer {
min-height: 90px;
padding: 24px clamp(24px, 7vw, 112px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
color: rgba(255, 255, 255, 0.64);
background: var(--cff-finalists-navy-deep);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
text-transform: uppercase;
}
#cff-screenplay-finalists-app .cff-finalists-footer span:last-child {
color: var(--cff-finalists-gold);
}
@media (max-width: 1050px) {
#cff-screenplay-finalists-app .cff-finalists-grid {
grid-template-columns: 1fr;
}
#cff-screenplay-finalists-app .cff-finalists-hero {
grid-template-columns: minmax(0, 1fr) 120px;
}
#cff-screenplay-finalists-app .cff-finalists-hero__mark {
width: 116px;
height: 116px;
}
}
@media (max-width: 700px) {
#cff-screenplay-finalists-app .cff-finalists-hero {
min-height: 500px;
padding: 88px 24px 64px;
display: block;
}
#cff-screenplay-finalists-app .cff-finalists-hero h1 {
font-size: clamp(52px, 18vw, 80px);
}
#cff-screenplay-finalists-app .cff-finalists-intro {
font-size: 15px;
}
#cff-screenplay-finalists-app .cff-finalists-hero__mark {
display: none;
}
#cff-screenplay-finalists-app .cff-finalists-main {
padding: 52px 18px 64px;
}
#cff-screenplay-finalists-app .cff-finalists-toolbar {
align-items: flex-start;
flex-direction: column;
}
#cff-screenplay-finalists-app .cff-finalists-search {
width: 100%;
}
#cff-screenplay-finalists-app .cff-finalists-filters {
margin: 24px 0 36px;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
}
#cff-screenplay-finalists-app .cff-finalists-filters button {
flex: 0 0 auto;
}
#cff-screenplay-finalists-app .cff-finalists-grid {
grid-template-columns: 1fr;
}
#cff-screenplay-finalists-app .cff-finalist-card {
min-height: 0;
grid-template-columns: 1fr;
}
#cff-screenplay-finalists-app .cff-finalist-poster {
min-height: 0;
aspect-ratio: 2 / 3;
border-right: 0;
border-bottom: 1px solid var(--cff-finalists-line);
}
#cff-screenplay-finalists-app .cff-finalist-card__body {
padding: 26px 24px 30px;
}
#cff-screenplay-finalists-app .cff-finalist-card h2 {
font-size: 34px;
}
#cff-screenplay-finalists-app .cff-finalists-footer {
align-items: flex-start;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
#cff-screenplay-finalists-app *,
#cff-screenplay-finalists-app *::before,
#cff-screenplay-finalists-app *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}