rename project to fhdhview

fhdhview/static/style.css

@@ -0,0 +1,134 @@
+@font-face {
+  font-family: "Figtree";
+  font-style: normal;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url("/static/fonts/figtree-latin.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Figtree";
+  font-style: italic;
+  font-weight: 300 900;
+  font-display: swap;
+  src: url("/static/fonts/figtree-italic-latin.woff2") format("woff2");
+}
+
+: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: "Figtree", "Futura", sans-serif;
+  background: var(--bg);
+  color: var(--ink);
+  overflow: hidden;
+}
+.screen { display: grid; grid-template-columns: 1fr 30%; height: 100vh; }
+
+/* ---------- left: film list ---------- */
+.programme { padding: 28px 40px 40px 48px; display: flex; flex-direction: column; }
+.programme h1 {
+  font-size: 152px; font-weight: 600; letter-spacing: 6px;
+  text-transform: uppercase; line-height: 1;
+  margin-bottom: -50px;
+  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);
+}
+.film-spacer { min-height: 0; padding: 0; }
+.times { line-height: 1.25; }
+.times .start { font-size: 25px; font-weight: 600; }
+.times .end   { font-size: 25px; 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: 18px; font-weight: 600;
+  display: flex; align-items: center; justify-content: center;
+}
+.info { padding-top: 3px; }
+.info .title { font-size: 25px; font-weight: 500; }
+.info .meta {
+  margin-top: 14px; font-size: 15px; font-weight: 400;
+  letter-spacing: 1.5px; text-transform: uppercase;
+  display: flex; gap: 18px; align-items: center;
+}
+.pill {
+  background: var(--bg-side); border-radius: 12px;
+  padding: 4px 14px;
+  font-weight: 600;
+  text-transform: none;
+}
+.subs {
+  margin-left: 18px;
+}
+.badge-last {
+  justify-self: end; align-self: start; margin-top: -16px;
+  background: var(--badge); color: #fff;
+  font-size: 15px; font-weight: 600; letter-spacing: 1.5px;
+  padding: 6px 12px; text-transform: uppercase; white-space: nowrap;
+}
+
+/* ---------- right: sidebar ---------- */
+.sidebar {
+  background: var(--bg-side);
+  padding: 50px 50px;
+  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: 66px;
+  font-weight: 700;
+  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: 11px;
+}
+.sidebar .logo img {
+  height: 46px;
+  width: auto;
+}
+.sidebar h2 { margin-top: 56px; font-size: 28px; font-weight: 600; margin-bottom: 14px; }
+.price-row { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 9px; font-size: 20px; }
+.price-row .price { white-space: nowrap; }
+.sidebar h3 { margin-top: 34px; font-size: 20px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }