111 lines
3.2 KiB
CSS
111 lines
3.2 KiB
CSS
:root {
|
|
--bg: #dfe2e9;
|
|
--bg-side: #a8adb1;
|
|
--ink: #111318;
|
|
--muted: #8a8f99;
|
|
--rule: #9aa0aa;
|
|
--badge: #101318;
|
|
}
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
html, body { height: 100%; }
|
|
body {
|
|
font-family: "Poppins", "Futura", sans-serif;
|
|
background: var(--bg);
|
|
color: var(--ink);
|
|
overflow: hidden;
|
|
}
|
|
.screen { display: grid; grid-template-columns: 1fr 420px; height: 100vh; }
|
|
|
|
/* ---------- left: film list ---------- */
|
|
.programme { padding: 28px 40px 40px 48px; display: flex; flex-direction: column; }
|
|
.programme h1 {
|
|
font-size: 92px; font-weight: 600; letter-spacing: 6px;
|
|
text-transform: uppercase; line-height: 1;
|
|
margin-bottom: -27px; /* was 18px — lets the list overlap the letters */
|
|
position: relative; z-index: 0;
|
|
}
|
|
.film {
|
|
position: relative;
|
|
background: var(--bg);
|
|
display: grid;
|
|
grid-template-columns: 90px 160px 1fr 170px;
|
|
gap: 14px; align-items: start;
|
|
padding: 16px 0 18px;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
.times { line-height: 1.25; }
|
|
.times .start { font-size: 20px; font-weight: 600; }
|
|
.times .end { font-size: 20px; color: var(--muted); }
|
|
.icons {
|
|
display: flex;
|
|
flex-wrap: nowrap;
|
|
gap: 6px;
|
|
align-items: center;
|
|
padding-top: 3px;
|
|
}
|
|
.icons .kijkwijzer {
|
|
width: 26px; height: 26px;
|
|
object-fit: contain;
|
|
display: block;
|
|
}
|
|
.icons .dot {
|
|
width: 26px; height: 26px; border-radius: 50%;
|
|
background: var(--badge); color: #fff;
|
|
font-size: 13px; font-weight: 600;
|
|
display: flex; align-items: center; justify-content: center;
|
|
}
|
|
.info { padding-top: 3px; }
|
|
.info .title { font-size: 22px; font-weight: 500; }
|
|
.info .meta {
|
|
margin-top: 14px; font-size: 13px; font-weight: 600;
|
|
letter-spacing: 1.5px; text-transform: uppercase;
|
|
display: flex; gap: 18px; align-items: center;
|
|
}
|
|
.pill {
|
|
background: var(--bg-side); border-radius: 14px;
|
|
padding: 4px 14px; font-size: 12px; font-weight: 600;
|
|
letter-spacing: 1px;
|
|
text-transform: none; /* "Boutique Cinema" reads like the photo */
|
|
}
|
|
.badge-last {
|
|
justify-self: end; align-self: start; margin-top: -16px;
|
|
background: var(--badge); color: #fff;
|
|
font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
|
|
padding: 6px 12px; text-transform: uppercase; white-space: nowrap;
|
|
}
|
|
|
|
/* ---------- right: sidebar ---------- */
|
|
.sidebar { background: var(--bg-side); padding: 30px 32px; display: flex; flex-direction: column; }
|
|
.sidebar .top {
|
|
display: grid;
|
|
grid-template-columns: auto 1fr;
|
|
align-items: start;
|
|
gap: 24px;
|
|
margin-bottom: 4px;
|
|
}
|
|
.sidebar .date {
|
|
font-size: 56px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
}
|
|
.sidebar .date .colon {
|
|
animation: blink 1s steps(1) infinite;
|
|
}
|
|
@keyframes blink {
|
|
50% { opacity: 0; }
|
|
}
|
|
.sidebar .logo {
|
|
filter: invert(1);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding-top: 4px;
|
|
}
|
|
.sidebar .logo img {
|
|
height: 46px;
|
|
width: auto;
|
|
}
|
|
.sidebar h2 { margin-top: 56px; font-size: 20px; font-weight: 600; margin-bottom: 14px; }
|
|
.price-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; font-size: 17px; }
|
|
.price-row .price { white-space: nowrap; }
|
|
.sidebar h3 { margin-top: 34px; font-size: 17px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }
|