*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--film-red: #a91515;
--film-red-hover: #861010;
--film-red-bright: #df2424;
--film-red-soft: #f8eeee;
--film-burgundy: #2b0000;
--film-burgundy-2: #5b0a0a;
--film-dark: #171717;
--film-dark-2: #242424;
--film-dark-3: #303030;
--film-text: #252525;
--film-muted: #686868;
--film-bg: #ffffff;
--film-surface: #f7f7f7;
--film-card: #ffffff;
--film-border: #e1e1e1;
--film-border-dark: #3a3a3a;
--film-radius: 10px;
--film-radius-small: 7px;
--film-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
--film-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--film-bg);
color: var(--film-text);
font-family: Arial, Helvetica, sans-serif;
line-height: 1.6;
}
button,
input,
select,
textarea {
font: inherit;
}
button {
cursor: pointer;
}
button:disabled {
cursor: wait;
opacity: 0.65;
}
.is-hidden {
display: none !important;
}
.film-picker {
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
padding: 42px 0 48px;
} .film-picker__hero {
position: relative;
overflow: hidden;
padding: 38px 40px;
margin-bottom: 28px;
border-radius: var(--film-radius);
color: #fff;
background:
radial-gradient(
circle at 88% 18%,
rgba(169, 21, 21, 0.28),
transparent 38%
),
linear-gradient(
135deg,
#1a1a1a 0%,
#111 55%,
#240303 100%
);
border-left: 5px solid var(--film-red);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
}
.film-picker__hero::after {
content: "🎬";
position: absolute;
right: 32px;
bottom: -24px;
font-size: 115px;
line-height: 1;
opacity: 0.055;
pointer-events: none;
}
.film-picker__eyebrow,
.results-section__eyebrow {
display: inline-block;
margin-bottom: 8px;
color: #df4242;
font-size: 1.3rem;
font-weight: 800;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.film-picker__hero h1 {
position: relative;
z-index: 1;
margin: 0 0 12px;
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1.08;
font-weight: 800;
}
.film-picker__hero p {
position: relative;
z-index: 1;
max-width: 720px;
margin: 0;
color: #d9d9d9;
font-size: 1.5rem;
line-height: 1.65;
} .film-picker__steps {
display: grid;
gap: 22px;
}
.picker-card {
display: grid;
grid-template-columns: 54px 1fr;
gap: 22px;
padding: 28px;
color: #fff;
background:
radial-gradient(
circle at 92% 15%,
rgba(169, 21, 21, 0.20),
transparent 38%
),
linear-gradient(
135deg,
#202020 0%,
#161616 55%,
#2b0505 100%
);
border: 1px solid #343434;
border-left: 4px solid var(--film-red);
border-radius: var(--film-radius);
box-shadow:
0 7px 20px rgba(0, 0, 0, 0.18);
}
.picker-card.is-visible {
animation: pickerFadeIn 0.28s ease both;
}
@keyframes pickerFadeIn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.picker-card__number {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background:
linear-gradient(
145deg,
#c51b1b,
#801010
);
color: #fff;
font-weight: 800;
font-size: 1rem;
box-shadow:
0 4px 12px rgba(183, 25, 25, 0.38);
}
.picker-card__body h2 {
margin: 1px 0 20px;
color: #fff;
font-size: clamp(1.35rem, 2.3vw, 1.8rem);
line-height: 1.25;
font-weight: 800;
}
.picker-card__hint {
margin: -8px 0 18px;
color: #c7c7c7;
font-size: 0.95rem;
} .choice-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.choice-grid button {
min-height: 62px;
padding: 14px 16px;
border: 1px solid #444;
border-radius: var(--film-radius-small);
background:
linear-gradient(
135deg,
#292929,
#202020
);
color: #eee;
font-weight: 700;
text-align: left;
transition:
transform 0.16s ease,
border-color 0.16s ease,
box-shadow 0.16s ease,
background 0.16s ease,
color 0.16s ease;
}
.choice-grid button:hover {
transform: translateY(-2px);
border-color: var(--film-red);
background:
linear-gradient(
135deg,
#343434,
#252525
);
color: #fff;
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.22);
}
.choice-grid button.is-selected {
border-color: #c31a1a;
background:
linear-gradient(
135deg,
#7b0d0d 0%,
#4a0606 100%
);
color: #fff;
box-shadow:
inset 4px 0 0 var(--film-red-bright),
0 5px 14px rgba(120, 0, 0, 0.30);
} .choice-grid--genres {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.choice-grid--genres button {
text-align: center;
}
.choice-grid--genres .choice-surprise {
grid-column: span 2;
background:
linear-gradient(
135deg,
var(--film-burgundy-2),
var(--film-burgundy)
);
color: #fff;
border-color: var(--film-red-hover);
}
.choice-grid--genres .choice-surprise:hover {
background:
linear-gradient(
135deg,
#7e1010,
#3d0303
);
border-color: #b71919;
color: #fff;
}
.choice-grid--genres .choice-surprise.is-selected {
background:
linear-gradient(
135deg,
#b71919,
#750d0d
);
color: #fff;
border-color: #cf2525;
} .choice-grid--providers {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.choice-grid--providers button {
position: relative;
text-align: center;
background:
linear-gradient(
135deg,
#292929,
#202020
);
color: #eee;
border-color: #444;
}
.choice-grid--providers button.is-selected {
background:
linear-gradient(
135deg,
#6e0b0b,
#3c0303
);
border-color: #b71919;
color: #fff;
box-shadow:
inset 0 0 0 1px #b71919;
}
.choice-grid--providers button.is-selected::after {
content: "✓";
position: absolute;
top: 7px;
right: 9px;
color: #ff6565;
font-size: 0.82rem;
font-weight: 900;
}
.picker-card__submit {
display: flex;
justify-content: flex-end;
margin-top: 20px;
} .selection-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 25px 0 0;
padding: 17px 20px;
border-radius: var(--film-radius-small);
background:
radial-gradient(
circle at 95% 20%,
rgba(169, 21, 21, 0.18),
transparent 38%
),
linear-gradient(
135deg,
#252525,
#171717
);
border: 1px solid #3a3a3a;
border-left: 4px solid var(--film-red);
box-shadow:
0 5px 16px rgba(0, 0, 0, 0.16);
}
.selection-summary__label {
display: block;
margin-bottom: 3px;
color: #e24040;
font-size: 1.2rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.09em;
}
.selection-summary strong {
color: #fff;
font-size: 1.5rem;
font-weight: 700;
}
.selection-summary #restart-summary {
flex: 0 0 auto;
padding: 7px 16px;
border: 1px solid rgba(183, 25, 25, 0.55);
border-radius: 8px;
background: rgba(183, 25, 25, 0.10);
color: #e84545;
font-weight: 800;
white-space: nowrap;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.selection-summary #restart-summary:hover {
background: var(--film-red);
border-color: var(--film-red);
color: #fff;
transform: translateY(-1px);
box-shadow: 0 5px 14px rgba(183, 25, 25, 0.25);
}
.selection-summary #restart-summary:active {
transform: translateY(0);
box-shadow: none;
}
.selection-summary #restart-summary:focus-visible {
outline: 2px solid #e84545;
outline-offset: 3px;
} .movie-loader {
display: grid;
justify-items: center;
gap: 15px;
padding: 42px 20px;
margin-top: 20px;
text-align: center;
background:
radial-gradient(
circle at center,
rgba(169, 21, 21, 0.12),
transparent 50%
);
border-radius: var(--film-radius);
}
.movie-loader__spinner {
width: 52px;
height: 52px;
border: 4px solid #ececec;
border-top-color: var(--film-red);
border-radius: 50%;
animation: movieSpinner 0.7s linear infinite;
}
.movie-loader p {
margin: 0;
color: #fff;
font-size: 1.1rem;
font-weight: 700;
}
@keyframes movieSpinner {
to {
transform: rotate(360deg);
}
} .results-section {
margin-top: 28px;
}
.results-section__header {
margin-bottom: 18px;
}
.results-section__header h2 {
margin: 0;
color: #ffffff;
font-size: clamp(1.9rem, 3vw, 2.4rem);
line-height: 1.15;
}
.results-status {
padding: 18px 20px;
margin-bottom: 18px;
border-radius: var(--film-radius-small);
background: #fff;
border: 1px solid var(--film-border);
font-weight: 700;
}
.results-status.is-error {
border-color: #c73939;
background: #fff1f1;
color: #8e1d1d;
}
.movie-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
} .movie-card {
min-width: 0;
overflow: hidden;
background:
linear-gradient(
160deg,
#242424 0%,
#171717 100%
);
color: #eee;
border: 1px solid #353535;
border-radius: var(--film-radius);
box-shadow:
0 7px 22px rgba(0, 0, 0, 0.18);
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.movie-card:hover {
transform: translateY(-4px);
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.25);
}
.movie-card__poster {
position: relative;
aspect-ratio: 2 / 3;
overflow: hidden;
background: #181818;
}
.movie-card__poster img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.35s ease;
}
.movie-card:hover .movie-card__poster img {
transform: scale(1.025);
}
.movie-card__poster-placeholder {
display: grid;
place-items: center;
width: 100%;
height: 100%;
color: #aaa;
font-weight: 700;
}
.movie-card__body {
padding: 20px;
}
.movie-card__body h3 {
margin: 0 0 7px;
color: #fff;
font-size: 1.35rem;
line-height: 1.25;
font-weight: 800;
}
.movie-card__meta {
margin-bottom: 8px;
color: #c4c4c4;
font-size: 0.9rem;
font-weight: 700;
}
.movie-card__genres {
margin-bottom: 14px;
color: #e54646;
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.025em;
}
.movie-card__overview {
margin: 0 0 18px;
color: #d4d4d4;
} .movie-card__providers {
display: grid;
gap: 11px;
padding-top: 14px;
border-top: 1px solid #3a3a3a;
}
.movie-card__providers--empty {
color: #aaa;
font-size: 0.9rem;
}
.movie-card__providers-row {
display: grid;
gap: 7px;
}
.movie-card__providers-label {
font-size: 0.77rem;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.movie-card__providers-list {
display: flex;
flex-wrap: wrap;
gap: 7px;
}
.provider-chip {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 100%;
padding: 5px 9px;
border-radius: 6px;
background: #303030;
border: 1px solid #444;
color: #eee;
font-size: 0.79rem;
font-weight: 700;
}
.provider-chip img {
width: 25px;
height: 25px;
border-radius: 4px;
object-fit: cover;
} .movie-card__details {
margin-top: 18px;
border-top: 1px solid #3a3a3a;
padding-top: 14px;
}
.movie-card__details summary {
color: #e54646;
font-weight: 800;
cursor: pointer;
}
.movie-card__details summary:hover {
color: #ff6b6b;
}
.movie-card__details-content {
padding-top: 10px;
color: #d5d5d5;
}
.movie-card__details-content p {
margin: 0 0 12px;
}
.movie-card__reason {
margin-top: 14px;
padding: 14px;
border-radius: var(--film-radius-small);
background:
linear-gradient(
135deg,
#2f1515,
#251111
);
border-left: 3px solid var(--film-red);
}
.movie-card__provider-link {
display: inline-block;
margin-top: 3px;
color: #e54646;
font-weight: 800;
}
.movie-card__provider-link:hover {
color: #ff6b6b;
} .results-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
margin-top: 26px;
}
.button {
min-height: 48px;
padding: 12px 22px;
border-radius: 7px;
border: 1px solid transparent;
font-weight: 800;
transition:
background-color 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease,
border-color 0.18s ease;
}
.button--primary {
background:
linear-gradient(
135deg,
var(--film-red),
var(--film-red-hover)
);
color: #fff;
box-shadow:
0 4px 12px rgba(169, 21, 21, 0.20);
}
.button--primary:hover {
transform: translateY(-1px);
background:
linear-gradient(
135deg,
#921212,
#6d0c0c
);
box-shadow:
0 6px 16px rgba(169, 21, 21, 0.28);
}
.button--secondary {
background: #fff;
color: #333;
border-color: #ccc;
}
.button--secondary:hover {
border-color: #999;
background: #f7f7f7;
} .film-picker__credits {
margin-top: 38px;
padding-top: 20px;
border-top: 1px solid #d8d8d8;
color: #fff;
font-size: 1rem;
}
.film-picker__credits p {
margin: 4px 0;
} @media (max-width: 900px) {
.choice-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.choice-grid--genres {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.choice-grid--providers {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.movie-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 650px) {
.film-picker {
width: min(100% - 20px, 1180px);
padding-top: 18px;
}
.film-picker__hero {
padding: 27px 22px;
}
.film-picker__hero::after {
right: 12px;
font-size: 84px;
}
.picker-card {
grid-template-columns: 1fr;
gap: 10px;
padding: 20px 16px;
}
.picker-card__number {
width: 40px;
height: 40px;
}
.choice-grid,
.choice-grid--genres,
.choice-grid--providers,
.movie-grid {
grid-template-columns: 1fr;
}
.choice-grid--genres .choice-surprise {
grid-column: auto;
}
.choice-grid button {
min-height: 56px;
}
.selection-summary {
flex-direction: column;
align-items: stretch;
gap: 14px;
}
.selection-summary > div {
width: 100%;
min-width: 0;
}
.selection-summary strong {
display: block;
overflow-wrap: anywhere;
}
.selection-summary #restart-summary {
align-self: center;
}
.picker-card__submit {
justify-content: stretch;
}
.picker-card__submit .button {
width: 100%;
}
.results-actions {
display: grid;
}
.button {
width: 100%;
}
}