| 1 | <!DOCTYPE html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8" /> |
| 5 | <title>Light Leak Cinema · REEL 03</title> |
| 6 | <script src="https://cdn.tailwindcss.com"></script> |
| 7 | <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Source+Serif+Pro:ital,wght@0,400;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500&display=swap" rel="stylesheet" /> |
| 8 | <style> |
| 9 | body { font-family:'Source Serif Pro','Noto Serif SC',Georgia,serif; background:#000; margin:0; min-height:100vh; } |
| 10 | .frame { |
| 11 | position:relative; width:100%; max-width:1600px; aspect-ratio: 2.39 / 1; margin:0 auto; |
| 12 | background:#1a0d08; |
| 13 | overflow:hidden; |
| 14 | } |
| 15 | .scene { |
| 16 | position:absolute; inset:0; |
| 17 | background: |
| 18 | radial-gradient(ellipse at 78% 18%, #ffb547 0%, transparent 38%), |
| 19 | radial-gradient(ellipse at 90% 30%, #ff7e3f 0%, transparent 30%), |
| 20 | linear-gradient(180deg, transparent 60%, #d97757 110%), |
| 21 | radial-gradient(ellipse at 30% 60%, #2a1410 0%, transparent 60%), |
| 22 | linear-gradient(135deg, #1a0d08 0%, #28140c 50%, #0a0502 100%); |
| 23 | } |
| 24 | .grain { position:absolute; inset:0; opacity:0.14; mix-blend-mode:overlay; pointer-events:none; |
| 25 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } |
| 26 | /* scratches */ |
| 27 | .scratch { position:absolute; top:0; bottom:0; width:1px; background:#f5e9d6; opacity:0.18; } |
| 28 | .vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.6) 100%); } |
| 29 | .perfs { |
| 30 | position:absolute; left:0; right:0; height:6px; |
| 31 | background-image: repeating-linear-gradient(90deg, #f5e9d6 0 8px, transparent 8px 24px); |
| 32 | opacity:0.5; |
| 33 | } |
| 34 | .cream { color:#f5e9d6; } |
| 35 | .mono { font-family:'IBM Plex Mono',monospace; } |
| 36 | .display { font-family:'EB Garamond','Noto Serif SC',serif; } |
| 37 | .chip { font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase; } |
| 38 | </style> |
| 39 | </head> |
| 40 | <body class="min-h-screen flex items-center justify-center p-6" style="background:#000"> |
| 41 | <div class="frame"> |
| 42 | <div class="scene"></div> |
| 43 | |
| 44 | <!-- scratches --> |
| 45 | <div class="scratch" style="left:14%;height:38%"></div> |
| 46 | <div class="scratch" style="left:42%;height:60%;top:20%;opacity:0.12"></div> |
| 47 | <div class="scratch" style="left:71%;height:30%;top:55%"></div> |
| 48 | |
| 49 | <!-- letterbox bars - actually built into aspect ratio container; perfs on top --> |
| 50 | |
| 51 | <!-- top caption --> |
| 52 | <header class="absolute top-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-70 z-10"> |
| 53 | <span>REEL 03 · CH I · MMXXVI</span> |
| 54 | <span>A Quiet Year in Berlin</span> |
| 55 | <span>00:03:21</span> |
| 56 | </header> |
| 57 | |
| 58 | <!-- main text --> |
| 59 | <main class="absolute z-10 cream" style="left:8%; bottom:18%; max-width:60%"> |
| 60 | <div class="chip mono opacity-70">Reel III · Title</div> |
| 61 | <h1 class="display mt-3 leading-[1.05] italic font-medium" style="font-size:clamp(40px,5.5vw,84px); color:#f5e9d6"> |
| 62 | A Quiet Year<br/> |
| 63 | <span style="font-style:italic">in</span> Berlin. |
| 64 | </h1> |
| 65 | <p class="display mt-4 italic opacity-80 text-[22px]"> |
| 66 | A short film about typesetting, in fourteen reels. |
| 67 | </p> |
| 68 | </main> |
| 69 | |
| 70 | <!-- bottom right meta --> |
| 71 | <footer class="absolute bottom-6 left-10 right-10 flex items-baseline justify-between chip mono cream opacity-50 z-10"> |
| 72 | <span>52.5200° N · 13.4050° E</span> |
| 73 | <span>FILMED ON 35MM · PROXY 1080P</span> |
| 74 | <span>FRAME · LIGHT-LEAK-CINEMA</span> |
| 75 | </footer> |
| 76 | |
| 77 | <div class="grain"></div> |
| 78 | <div class="vignette"></div> |
| 79 | </div> |
| 80 | </body> |
| 81 | </html> |
| 82 |