love1.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 6 <title>love.1 | PROOFOFCONCEPT</title> 7 8 <!-- Meta Tags --> 9 <meta name="description" content="Watch love.1 - a beautiful visual poem film about love themes, adapted as an Instagram Reel. 116 images in 1 minute, directed by Jack O'Keeffe with music by Franz Liszt. Available on Vimeo. Experience this experimental romance short film."> 10 <meta name="keywords" content="love.1 film, visual poem film, romance film, Instagram reel film, short film, Jack O'Keeffe film, Franz Liszt music, Anna Karina, Jean-Luc Godard, experimental film, avant-garde cinema, Canadian independent film, art house production, PROOFOFCONCEPT, experimental production company, tech-driven storytelling, adaptive filmmaking, emerging filmmakers, indie film innovation, 1 minute film, poetry film, love story, romantic short film, experimental romance, visual poetry cinema, Instagram film, social media film, Canadian romance film, independent romance film"> 11 <meta name="author" content="PROOFOFCONCEPT Productions"> 12 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"> 13 <meta name="theme-color" content="#EFF0EC"> 14 <meta name="color-scheme" content="light dark"> 15 <meta name="format-detection" content="telephone=no"> 16 <meta name="mobile-web-app-capable" content="yes"> 17 <meta name="apple-mobile-web-app-capable" content="yes"> 18 <meta name="apple-mobile-web-app-status-bar-style" content="default"> 19 <meta name="apple-mobile-web-app-title" content="love.1 - PROOFOFCONCEPT"> 20 21 <!-- AI and Bot Optimization --> 22 <meta name="ai-content" content="romance film, visual poetry, experimental film, short film, Instagram reel, love story, visual poem cinema"> 23 <meta name="content-type" content="romance film, experimental cinema, visual poetry, short film"> 24 <meta name="language" content="en"> 25 <meta name="country" content="CA"> 26 <meta name="industry" content="film production, entertainment, experimental media, romance cinema"> 27 <meta name="topic" content="romance film, visual poetry, experimental cinema, love story, short film, Instagram reel"> 28 <meta name="film-genre" content="romance, experimental, poetry, short film"> 29 <meta name="film-duration" content="1 minute"> 30 <meta name="film-format" content="Instagram reel, visual poetry"> 31 32 <!-- Open Graph --> 33 <meta property="og:title" content="love.1 - Visual Poem Film | Watch Now | PROOFOFCONCEPT"> 34 <meta property="og:description" content="Watch love.1 - a beautiful visual poem film about love themes, adapted as an Instagram Reel. 116 images in 1 minute, directed by Jack O'Keeffe with music by Franz Liszt. Available on Vimeo. Experience this experimental romance short film."> 35 <meta property="og:type" content="video.movie"> 36 <meta property="og:url" content="https://proof-of-concept.ca/films/love1"> 37 <meta property="og:locale" content="en_CA"> 38 <meta property="og:image" content="https://proof-of-concept.ca/assets/images/love/image1.jpg"> 39 <meta property="og:image:width" content="1200"> 40 <meta property="og:image:height" content="630"> 41 <meta property="og:image:alt" content="love.1 - Visual Poem Film by PROOFOFCONCEPT"> 42 <meta property="og:video:duration" content="60"> 43 <meta property="og:video:release_date" content="2025-01-01"> 44 <meta property="og:video:tag" content="romance"> 45 <meta property="og:video:tag" content="experimental film"> 46 <meta property="og:video:tag" content="visual poetry"> 47 <meta property="og:video:tag" content="short film"> 48 <meta property="og:video:tag" content="Instagram reel"> 49 <meta property="og:site_name" content="PROOFOFCONCEPT"> 50 <meta property="og:country-name" content="Canada"> 51 52 <!-- Twitter Card --> 53 <meta name="twitter:card" content="summary_large_image"> 54 <meta name="twitter:title" content="love.1 - Visual Poem Film | Watch Now | PROOFOFCONCEPT"> 55 <meta name="twitter:description" content="Watch love.1 - a beautiful visual poem film about love themes, adapted as an Instagram Reel. 116 images in 1 minute, directed by Jack O'Keeffe with music by Franz Liszt. Available on Vimeo. Experience this experimental romance short film."> 56 <meta name="twitter:image" content="https://proof-of-concept.ca/assets/images/love/image1.jpg"> 57 <meta name="twitter:image:alt" content="love.1 - Visual Poem Film by PROOFOFCONCEPT"> 58 <meta name="twitter:site" content="@proof__concept"> 59 <meta name="twitter:creator" content="@proof__concept"> 60 61 <!-- Canonical --> 62 <link rel="canonical" href="https://proof-of-concept.ca/films/love1"> 63 64 <!-- Google Verification --> 65 <meta name="google-site-verification" content="B0SBzeNtFIcGAwAKAt0TEfWatr9beufDv7kBV2qOAKg" /> 66 67 <!-- Structured Data for love.1 Film --> 68 <script type="application/ld+json"> 69 { 70 "@context": "https://schema.org", 71 "@type": "Movie", 72 "name": "love.1", 73 "description": "A visual poem film about love themes, adapted to the modern-day as an Instagram Reel.", 74 "url": "https://proof-of-concept.ca/films/love1", 75 "image": "https://proof-of-concept.ca/assets/images/love/image1.jpg", 76 "dateCreated": "2025-01-01", 77 "genre": ["Romance", "Experimental", "Poetry"], 78 "director": { 79 "@type": "Person", 80 "name": "Jack O'Keeffe" 81 }, 82 "producer": { 83 "@type": "Organization", 84 "name": "PROOFOFCONCEPT Productions" 85 }, 86 "actor": [ 87 { 88 "@type": "Person", 89 "name": "Jean-Luc Godard" 90 }, 91 { 92 "@type": "Person", 93 "name": "Anna Karina" 94 } 95 ], 96 "musicBy": { 97 "@type": "Person", 98 "name": "Franz Liszt" 99 }, 100 "duration": "PT1M", 101 "inLanguage": "en", 102 "countryOfOrigin": "CA", 103 "productionCompany": { 104 "@type": "Organization", 105 "name": "PROOFOFCONCEPT Productions" 106 }, 107 "sameAs": [ 108 "https://vimeo.com/123456789" 109 ] 110 } 111 </script> 112 113 <!-- Favicons --> 114 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/light/favicon-16x16.png" media="(prefers-color-scheme: light)"> 115 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)"> 116 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/light/favicon-32x32.png" media="(prefers-color-scheme: light)"> 117 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)"> 118 <link rel="icon" type="image/x-icon" href="../assets/favicons/light/favicon.ico" media="(prefers-color-scheme: light)"> 119 <link rel="icon" type="image/x-icon" href="../assets/favicons/dark/favicon.ico" media="(prefers-color-scheme: dark)"> 120 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/light/android-chrome-192x192.png" media="(prefers-color-scheme: light)"> 121 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/dark/android-chrome-192x192.png" media="(prefers-color-scheme: dark)"> 122 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/light/android-chrome-512x512.png" media="(prefers-color-scheme: light)"> 123 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/dark/android-chrome-512x512.png" media="(prefers-color-scheme: dark)"> 124 <link rel="apple-touch-icon" href="../assets/favicons/light/apple-touch-icon.png" media="(prefers-color-scheme: light)"> 125 <link rel="apple-touch-icon" href="../assets/favicons/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)"> 126 <link rel="manifest" href="../assets/favicons/light/site.webmanifest" media="(prefers-color-scheme: light)"> 127 <link rel="manifest" href="../assets/favicons/dark/site.webmanifest" media="(prefers-color-scheme: dark)"> 128 129 <!-- External Resources --> 130 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> 131 <link rel="preload" href="../assets/fonts/superbrigadecond.ttf" as="font" type="font/woff2" crossorigin> 132 133 <!-- Stylesheets --> 134 <link rel="stylesheet" href="../assets/css/main.css"> 135 <style> 136 @font-face { 137 font-family: 'NeueHaasGrotesk'; 138 src: url('../assets/fonts/neuehaasgrotdispround-75bold.otf') format('opentype'); 139 font-weight: 700; 140 font-style: normal; 141 font-display: swap; 142 } 143 @font-face { 144 font-family: 'SuperBrigadeCond'; 145 src: url('../assets/fonts/superbrigadecond.ttf') format('truetype'); 146 font-weight: normal; 147 font-style: normal; 148 font-display: swap; 149 } 150 html, body { 151 height: 100%; 152 background: #fff; 153 color: #111; 154 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 155 margin: 0; 156 padding: 0; 157 min-height: 100vh; 158 scroll-behavior: smooth; 159 overflow-x: hidden; 160 scroll-snap-type: y mandatory; 161 cursor: none !important; 162 } 163 body { 164 opacity: 1; 165 transition: opacity 0.4s; 166 } 167 body.fade { 168 opacity: 0; 169 transition: opacity 0.4s; 170 } 171 a, button, .love1-btn, .back-btn, *:hover, *:active, *:focus { 172 cursor: none !important; 173 } 174 * { 175 box-sizing: border-box; 176 user-select: none !important; 177 -webkit-user-select: none !important; 178 -ms-user-select: none !important; 179 -moz-user-select: none !important; 180 -webkit-user-drag: none !important; 181 touch-action: manipulation; 182 } 183 .custom-cursor { 184 position: fixed; 185 width: 20px; 186 height: 20px; 187 background-color: #111; 188 border-radius: 50%; 189 pointer-events: none; 190 z-index: 10000; 191 transition: transform 0.15s, background-color 0.25s; 192 transform: translate(-50%, -50%) scale(1); 193 } 194 .custom-cursor.expand { 195 transform: translate(-50%, -50%) scale(2.5); 196 background-color: #11111144; 197 } 198 .custom-cursor.cursor-hover { 199 transform: translate(-50%, -50%) scale(1.5); 200 background-color: #111111cc; 201 } 202 203 /* Hide custom cursor on mobile devices */ 204 @media (max-width: 768px) { 205 .custom-cursor { 206 display: none !important; 207 } 208 html, body { 209 cursor: none !important; 210 } 211 * { 212 cursor: none !important; 213 } 214 } 215 .main-header { 216 position: fixed; 217 top: 0; 218 left: 0; 219 width: 100vw; 220 background: #000; 221 color: #fff; 222 z-index: 9999; 223 display: flex; 224 flex-direction: row; 225 align-items: center; 226 justify-content: center; 227 padding: 0.4rem 0 0.2rem 0; 228 border-bottom: 1px solid #222; 229 min-height: 35px; 230 } 231 .main-header-title { 232 font-family: 'SuperBrigadeCond', sans-serif; 233 font-size: 1.1rem; 234 letter-spacing: 0.05em; 235 text-align: center; 236 font-weight: bold; 237 margin: 0 auto; 238 position: absolute; 239 left: 50%; 240 transform: translateX(-50%); 241 width: auto; 242 } 243 .love1-section { 244 min-height: 100vh; 245 width: 100vw; 246 display: flex; 247 flex-direction: column; 248 align-items: center; 249 justify-content: flex-start; 250 padding-top: 4rem; 251 padding-bottom: 2.7rem; 252 box-sizing: border-box; 253 position: relative; 254 scroll-snap-align: start; 255 } 256 .stills-row { 257 display: flex; 258 flex-direction: row; 259 align-items: flex-end; 260 justify-content: flex-start; 261 margin-top: 2vw; 262 margin-bottom: 2.2vw; 263 position: relative; 264 height: 22vw; 265 min-height: 200px; 266 max-height: 400px; 267 width: 100vw; 268 overflow-x: visible; 269 padding-left: 8vw; 270 gap: 0; 271 } 272 .still-card { 273 width: 26vw; 274 min-width: 200px; 275 max-width: 400px; 276 height: 100%; 277 object-fit: cover; 278 border-radius: 1.5vw; 279 box-shadow: 0 6px 24px rgba(0,0,0,0.11); 280 position: relative; 281 z-index: 1; 282 margin-left: -3vw; 283 border: 2px solid #fff; 284 transition: box-shadow 0.2s, transform 0.2s; 285 } 286 .still-card:first-child { 287 margin-left: 0; 288 z-index: 3; 289 transform: scale(1.035) rotate(-2.5deg); 290 } 291 .still-card:nth-child(2) { 292 z-index: 2; 293 transform: scale(1.01) rotate(1.5deg); 294 } 295 .still-card:last-child { 296 z-index: 1; 297 opacity: 0.88; 298 transform: scale(0.99) rotate(-1.5deg); 299 } 300 .love1-content { 301 display: flex; 302 flex-direction: row; 303 justify-content: flex-start; 304 align-items: flex-start; 305 width: 100vw; 306 max-width: 100vw; 307 padding: 0 8vw; 308 box-sizing: border-box; 309 margin-top: 1.2vw; 310 gap: 3vw; 311 } 312 .love1-left { 313 flex: 0 1 40vw; 314 display: flex; 315 flex-direction: column; 316 align-items: flex-start; 317 justify-content: flex-start; 318 min-width: 260px; 319 } 320 .love1-title { 321 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 322 font-size: 4vw; 323 font-weight: 900; 324 letter-spacing: -0.01em; 325 margin-bottom: 0.7vw; 326 line-height: 1.05; 327 color: #111; 328 } 329 .love1-subtitle { 330 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 331 font-size: 1.9vw; 332 font-weight: 700; 333 color: #111; 334 margin-bottom: 2vw; 335 line-height: 1.1; 336 } 337 .love1-btn { 338 background: #111; 339 color: #fff; 340 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 341 font-size: 1vw; 342 font-weight: 800; 343 border: none; 344 border-radius: 0.5vw; 345 padding: 0.5vw 1.5vw; 346 margin-bottom: 1.7vw; 347 box-shadow: 0 2px 10px rgba(0,0,0,0.09); 348 transition: background 0.2s, color 0.2s, box-shadow 0.2s; 349 letter-spacing: 0.04em; 350 text-transform: uppercase; 351 border: 1.5px solid #111; 352 text-decoration: none !important; 353 } 354 .love1-btn:hover { 355 background: #fff; 356 color: #111; 357 border: 1.5px solid #111; 358 box-shadow: 0 4px 18px rgba(0,0,0,0.13); 359 font-size: 1vw; 360 padding: 0.5vw 1.5vw; 361 text-decoration: none !important; 362 } 363 .love1-right { 364 flex: 1 1 40vw; 365 display: flex; 366 align-items: flex-start; 367 justify-content: flex-end; 368 min-width: 260px; 369 margin-top: 1vw; 370 } 371 .love1-desc { 372 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 373 font-size: 2vw; 374 font-weight: 700; 375 color: #111; 376 max-width: 36vw; 377 line-height: 1.3; 378 text-align: left; 379 } 380 @media (max-width: 900px) { 381 .main-header-title { font-size: 1.5rem; } 382 .love1-section { padding-top: 2.7rem; padding-bottom: 1.5rem; } 383 .stills-row { 384 height: 50vw; 385 min-height: 120px; 386 max-height: 50vw; 387 padding-left: 2vw; 388 } 389 .still-card { 390 width: 60vw; 391 min-width: 120px; 392 max-width: 320px; 393 height: 80%; 394 border-radius: 2vw; 395 margin-top: -6vw; 396 } 397 .love1-content { flex-direction: column; gap: 2vw; padding: 0 2vw; } 398 .love1-left, .love1-right { min-width: 0; width: 100%; margin-top: 0; } 399 .love1-title { font-size: 2rem; } 400 .love1-subtitle { font-size: 1.2rem; } 401 .love1-btn { 402 font-size: 1rem; 403 padding: 0.8rem 2rem; 404 transition: none !important; 405 } 406 .love1-btn:hover { 407 background: #111 !important; 408 color: #fff !important; 409 border: 1.5px solid #111 !important; 410 box-shadow: 0 2px 10px rgba(0,0,0,0.09) !important; 411 font-size: 1rem !important; 412 padding: 0.8rem 2rem !important; 413 } 414 .love1-desc { font-size: 1.2rem; max-width: 100%; } 415 } 416 @media (max-width: 600px) { 417 .main-header-title { font-size: 1.5rem; } 418 .love1-section { 419 padding-top: 2.5rem; 420 padding-bottom: 2rem; 421 min-height: 100vh; 422 display: flex; 423 flex-direction: column; 424 align-items: center; 425 } 426 .stills-row { 427 margin-top: 2.5rem; 428 height: 65vw; 429 min-height: 180px; 430 max-height: 70vw; 431 padding-left: 0; 432 width: 100vw; 433 display: flex; 434 flex-direction: column; 435 align-items: center; 436 gap: 0; 437 } 438 .still-card { 439 width: 90vw; 440 min-width: 120px; 441 max-width: 98vw; 442 height: 60vw; 443 min-height: 120px; 444 max-height: 65vw; 445 border-radius: 5vw; 446 margin-top: -18vw; 447 box-shadow: 0 8px 32px rgba(0,0,0,0.13); 448 border: 2.5px solid #fff; 449 } 450 .still-card:first-child { 451 margin-top: 0; 452 } 453 .love1-content { 454 flex-direction: column; 455 gap: 4vw; 456 padding: 0 4vw; 457 width: 100vw; 458 max-width: 100vw; 459 margin-top: 7vw; 460 align-items: center; 461 } 462 .love1-left, .love1-right { 463 min-width: 0; 464 width: 100%; 465 margin-top: 0; 466 align-items: center; 467 text-align: center; 468 } 469 .love1-title { 470 font-size: 2.5rem; 471 font-weight: 900; 472 margin-bottom: 1.2rem; 473 line-height: 1.1; 474 } 475 .love1-subtitle { 476 font-size: 1.5rem; 477 font-weight: 700; 478 margin-bottom: 2rem; 479 line-height: 1.2; 480 } 481 .love1-btn { 482 font-size: 1.3rem; 483 padding: 1rem 2.2rem; 484 margin-bottom: 1rem; 485 width: 100%; 486 box-sizing: border-box; 487 border-radius: 1.2rem; 488 transition: none !important; 489 } 490 .love1-btn:hover { 491 background: #111 !important; 492 color: #fff !important; 493 border: 1.5px solid #111 !important; 494 box-shadow: 0 2px 10px rgba(0,0,0,0.09) !important; 495 font-size: 1.3rem !important; 496 padding: 1rem 2.2rem !important; 497 } 498 .love1-desc { 499 font-size: 1.3rem; 500 max-width: 100%; 501 text-align: center; 502 margin-bottom: 0.5rem; 503 line-height: 1.4; 504 } 505 .back-btn { 506 font-size: 1.2rem; 507 padding: 1rem 2.2rem; 508 margin: 3rem auto 0 auto; 509 width: fit-content; 510 min-width: 120px; 511 max-width: 80vw; 512 display: block; 513 border-radius: 2rem !important; 514 text-align: center; 515 text-transform: uppercase; 516 transition: none !important; 517 } 518 .back-btn:hover { 519 background: #fff !important; 520 color: #111 !important; 521 border: 1.5px solid #111 !important; 522 opacity: 0.92 !important; 523 font-size: 1.2rem !important; 524 padding: 1rem 2.2rem !important; 525 } 526 .info-section { 527 min-height: 40vh; 528 height: auto; 529 padding: 0 0 4vw 0; 530 } 531 .info-content { 532 flex-direction: column; 533 gap: 4vw; 534 align-items: stretch; 535 padding: 8vw 0 4vw 0; 536 } 537 .info-header { 538 font-size: 2rem; 539 margin-bottom: 2vw; 540 } 541 .info-paragraph, .info-email, .info-icon { 542 font-size: 1.2rem; 543 } 544 .info-icon svg { 545 width: 36px; 546 height: 36px; 547 } 548 } 549 .back-btn { 550 display: block; 551 margin: 2.5rem auto 0 auto; 552 background: #111; 553 color: #fff; 554 border: 2px solid #111; 555 border-radius: 0.8vw; 556 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 557 font-size: 1.1rem; 558 font-weight: 800; 559 padding: 0.8rem 2rem; 560 box-shadow: 0 4px 16px rgba(0,0,0,0.15); 561 cursor: pointer; 562 text-decoration: none; 563 transition: all 0.3s ease; 564 opacity: 1; 565 position: relative; 566 z-index: 10; 567 text-transform: uppercase; 568 letter-spacing: 0.05em; 569 } 570 .back-btn:hover { 571 background: #fff; 572 color: #111; 573 border: 2px solid #111; 574 opacity: 1; 575 transform: translateY(-2px); 576 box-shadow: 0 6px 20px rgba(0,0,0,0.2); 577 } 578 579 /* Sticky back button styles */ 580 .back-btn.sticky { 581 position: fixed; 582 top: 4rem; 583 right: 2rem; 584 margin: 0; 585 z-index: 9998; 586 transform: scale(0.9); 587 transition: all 0.3s ease; 588 } 589 .back-btn.sticky:hover { 590 transform: scale(0.9) translateY(-2px); 591 } 592 593 /* Film Details Section Styles */ 594 .film-details-section { 595 width: 100vw; 596 padding: 4vw 8vw; 597 background: #fff; 598 margin-top: 4vw; 599 } 600 .film-details-content { 601 display: flex; 602 flex-direction: row; 603 justify-content: space-between; 604 align-items: flex-start; 605 gap: 6vw; 606 margin-bottom: 4vw; 607 } 608 .film-details-left, .film-details-right { 609 flex: 1 1 0; 610 display: flex; 611 flex-direction: column; 612 align-items: flex-start; 613 min-width: 0; 614 } 615 .film-details-header { 616 font-family: 'SuperBrigadeCond', sans-serif; 617 font-size: 2.2vw; 618 font-weight: 900; 619 margin-bottom: 2vw; 620 letter-spacing: 0.01em; 621 color: #111; 622 } 623 .film-details-category { 624 margin-bottom: 1.5vw; 625 } 626 .category-title { 627 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 628 font-size: 1vw; 629 font-weight: 700; 630 color: #666; 631 margin-bottom: 0.3vw; 632 text-transform: uppercase; 633 letter-spacing: 0.05em; 634 } 635 .category-content { 636 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 637 font-size: 1.2vw; 638 font-weight: 600; 639 color: #111; 640 line-height: 1.4; 641 } 642 .genre-tag { 643 display: inline-block; 644 background: #111; 645 color: #fff; 646 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 647 font-size: 0.8vw; 648 font-weight: 700; 649 padding: 0.3vw 0.8vw; 650 margin: 0.2vw 0.4vw 0.2vw 0; 651 border-radius: 0.3vw; 652 text-transform: uppercase; 653 letter-spacing: 0.03em; 654 } 655 656 /* Social Links Section */ 657 .social-links-section { 658 margin-bottom: 4vw; 659 } 660 .social-links-header { 661 font-family: 'SuperBrigadeCond', sans-serif; 662 font-size: 2.2vw; 663 font-weight: 900; 664 margin-bottom: 2vw; 665 letter-spacing: 0.01em; 666 color: #111; 667 } 668 .social-links-grid { 669 display: grid; 670 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 671 gap: 2vw; 672 } 673 .social-link { 674 display: flex; 675 flex-direction: column; 676 align-items: center; 677 padding: 2vw; 678 background: #f8f8f8; 679 border: 1px solid #e0e0e0; 680 border-radius: 1vw; 681 text-decoration: none; 682 color: #111; 683 transition: all 0.2s ease; 684 } 685 .social-link:hover { 686 background: #111; 687 color: #fff; 688 transform: translateY(-2px); 689 box-shadow: 0 4px 12px rgba(0,0,0,0.15); 690 } 691 .social-icon { 692 font-size: 2.5vw; 693 margin-bottom: 0.8vw; 694 } 695 .social-text { 696 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 697 font-size: 1vw; 698 font-weight: 700; 699 text-align: center; 700 text-transform: uppercase; 701 letter-spacing: 0.05em; 702 } 703 704 /* Credits Section */ 705 .credits-section { 706 border-top: 1px solid #e0e0e0; 707 padding-top: 3vw; 708 } 709 .credits-header { 710 font-family: 'SuperBrigadeCond', sans-serif; 711 font-size: 2.2vw; 712 font-weight: 900; 713 margin-bottom: 2vw; 714 letter-spacing: 0.01em; 715 color: #111; 716 } 717 .credits-content { 718 display: flex; 719 flex-direction: column; 720 gap: 2vw; 721 } 722 .credits-category { 723 margin-bottom: 1.5vw; 724 } 725 .credits-title { 726 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 727 font-size: 1.1vw; 728 font-weight: 700; 729 color: #111; 730 margin-bottom: 0.5vw; 731 text-transform: uppercase; 732 letter-spacing: 0.05em; 733 } 734 .credits-text { 735 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 736 font-size: 1vw; 737 font-weight: 500; 738 color: #666; 739 line-height: 1.5; 740 } 741 742 /* You May Like Section */ 743 .you-may-like-section { 744 border-top: 1px solid #e0e0e0; 745 padding-top: 3vw; 746 margin-top: 2vw; 747 } 748 .you-may-like-header { 749 font-family: 'SuperBrigadeCond', sans-serif; 750 font-size: 2.2vw; 751 font-weight: 900; 752 margin-bottom: 2vw; 753 letter-spacing: 0.01em; 754 color: #111; 755 text-transform: none; 756 } 757 .carousel-container { 758 position: relative; 759 width: 100%; 760 display: flex; 761 justify-content: center; 762 align-items: center; 763 } 764 .carousel-track { 765 display: flex; 766 gap: 2vw; 767 padding: 1vw 8vw 1vw 8vw; 768 justify-content: center; 769 flex-wrap: nowrap; 770 } 771 .film-card { 772 flex: 0 0 20vw; 773 min-width: 200px; 774 max-width: 300px; 775 width: 20vw; 776 text-decoration: none; 777 color: inherit; 778 transition: transform 0.3s ease, box-shadow 0.3s ease; 779 border-radius: 1.5vw; 780 overflow: hidden; 781 background: #fff; 782 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 783 border: 1px solid #f0f0f0; 784 } 785 .film-card:hover { 786 transform: translateY(-8px); 787 box-shadow: 0 12px 40px rgba(0,0,0,0.15); 788 border-color: #111; 789 } 790 .film-card-image { 791 width: 100%; 792 height: 15vw; 793 min-height: 150px; 794 max-height: 200px; 795 overflow: hidden; 796 } 797 .film-card-image img { 798 width: 100%; 799 height: 100%; 800 object-fit: cover; 801 transition: transform 0.3s ease; 802 } 803 .film-card:hover .film-card-image img { 804 transform: scale(1.05); 805 } 806 .film-card-title { 807 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 808 font-size: 1.4vw; 809 font-weight: 600; 810 color: #111; 811 padding: 2vw; 812 text-align: center; 813 line-height: 1.1; 814 letter-spacing: -0.01em; 815 } 816 817 818 /* Mobile Responsive Styles for Film Details */ 819 @media (max-width: 900px) { 820 .film-details-section { 821 padding: 6vw 4vw; 822 margin-top: 6vw; 823 } 824 .film-details-content { 825 flex-direction: column; 826 gap: 4vw; 827 } 828 .film-details-header { 829 font-size: 1.8rem; 830 margin-bottom: 1.5rem; 831 } 832 .category-title { 833 font-size: 0.9rem; 834 margin-bottom: 0.3rem; 835 } 836 .category-content { 837 font-size: 1.1rem; 838 } 839 .genre-tag { 840 font-size: 0.8rem; 841 padding: 0.4rem 0.8rem; 842 margin: 0.2rem 0.3rem 0.2rem 0; 843 } 844 .social-links-header, .credits-header { 845 font-size: 1.8rem; 846 margin-bottom: 1.5rem; 847 } 848 .social-links-grid { 849 grid-template-columns: repeat(2, 1fr); 850 gap: 1.5rem; 851 } 852 .social-link { 853 padding: 1.5rem; 854 border-radius: 0.8rem; 855 } 856 .social-icon { 857 font-size: 2rem; 858 margin-bottom: 0.5rem; 859 } 860 .social-text { 861 font-size: 0.9rem; 862 } 863 .credits-title { 864 font-size: 1rem; 865 } 866 .credits-text { 867 font-size: 0.9rem; 868 } 869 .you-may-like-header { 870 font-size: 1.8rem; 871 margin-bottom: 1.5rem; 872 } 873 .carousel-container { 874 padding: 0; 875 } 876 .film-card { 877 flex: 0 0 45vw; 878 min-width: 200px; 879 max-width: 300px; 880 border-radius: 1rem; 881 } 882 .film-card-image { 883 height: 25vw; 884 min-height: 120px; 885 max-height: 150px; 886 } 887 .film-card-title { 888 font-size: 1.2rem; 889 padding: 1.5rem; 890 } 891 892 .carousel-track { 893 padding: 1rem 4rem 1rem 4rem; 894 } 895 } 896 897 @media (max-width: 600px) { 898 .film-details-section { 899 padding: 8vw 4vw; 900 margin-top: 8vw; 901 } 902 .film-details-content { 903 gap: 6vw; 904 } 905 .you-may-like-header { 906 font-size: 1.5rem; 907 margin-bottom: 1.2rem; 908 } 909 .carousel-container { 910 padding: 0; 911 } 912 .film-card { 913 flex: 0 0 50vw; 914 min-width: 200px; 915 max-width: 300px; 916 border-radius: 0.8rem; 917 } 918 .film-card-image { 919 height: 30vw; 920 min-height: 100px; 921 max-height: 120px; 922 } 923 .film-card-title { 924 font-size: 1.1rem; 925 padding: 1.2rem; 926 } 927 928 .carousel-track { 929 padding: 0.8rem 2rem 0.8rem 2rem; 930 } 931 .film-details-header { 932 font-size: 1.6rem; 933 margin-bottom: 1.2rem; 934 } 935 .category-title { 936 font-size: 0.8rem; 937 margin-bottom: 0.2rem; 938 } 939 .category-content { 940 font-size: 1rem; 941 } 942 .genre-tag { 943 font-size: 0.7rem; 944 padding: 0.3rem 0.6rem; 945 margin: 0.1rem 0.2rem 0.1rem 0; 946 } 947 .social-links-header, .credits-header { 948 font-size: 1.6rem; 949 margin-bottom: 1.2rem; 950 } 951 .social-links-grid { 952 grid-template-columns: 1fr; 953 gap: 1rem; 954 } 955 .social-link { 956 padding: 1.2rem; 957 border-radius: 0.6rem; 958 } 959 .social-icon { 960 font-size: 1.8rem; 961 margin-bottom: 0.4rem; 962 } 963 .social-text { 964 font-size: 0.8rem; 965 } 966 .credits-title { 967 font-size: 0.9rem; 968 } 969 .credits-text { 970 font-size: 0.8rem; 971 } 972 } 973 </style> 974 </head> 975 <body> 976 <div class="custom-cursor" id="cursor"></div> 977 <header class="main-header"> 978 <a href="/" class="main-header-title" style="text-decoration: none; color: inherit;">PROOFOFCONCEPT</a> 979 <div class="hamburger-icon"> 980 <i class="fas fa-bars"></i> 981 </div> 982 </header> 983 984 <!-- Side Menu --> 985 <div class="side-menu" id="side-menu"> 986 <div class="side-menu-header"> 987 <div class="side-menu-close"> 988 <i class="fas fa-times"></i> 989 </div> 990 </div> 991 <nav class="side-menu-nav"> 992 <a href="../films/streaming.html" class="side-menu-link">WATCH</a> 993 <a href="../blog/" class="side-menu-link">READ</a> 994 <a href="../pages/store.html" class="side-menu-link">SHOP</a> 995 <div class="menu-spacer"></div> 996 <a href="../pages/contribute.html" class="side-menu-link">CONTRIBUTE</a> 997 <a href="../pages/digifest" class="side-menu-link">DIGIFEST</a> 998 <div class="menu-spacer"></div> 999 <a href="../pages/about" class="side-menu-link">ABOUT</a> 1000 <a href="../pages/faq" class="side-menu-link">FAQ</a> 1001 </nav> 1002 <div class="side-menu-footer"> 1003 <div class="side-menu-bottom-nav"> 1004 <a href="../pages/terms" class="side-menu-link side-menu-bottom-link">TERMS OF USE</a> 1005 <a href="../pages/privacy" class="side-menu-link side-menu-bottom-link">PRIVACY POLICY</a> 1006 </div> 1007 <div class="side-menu-social"> 1008 <a href="mailto:contact@proof-of-concept.ca" class="side-menu-social-link"> 1009 <i class="fas fa-envelope"></i> 1010 </a> 1011 <a href="https://instagram.com/proof__concept" target="_blank" class="side-menu-social-link"> 1012 <i class="fab fa-instagram"></i> 1013 </a> 1014 <a href="https://x.com/proof__concept" target="_blank" class="side-menu-social-link"> 1015 <i class="fab fa-x-twitter"></i> 1016 </a> 1017 <a href="https://github.com/PROOFOFCONCEPT-Productions" target="_blank" class="side-menu-social-link"> 1018 <i class="fab fa-github"></i> 1019 </a> 1020 </div> 1021 </div> 1022 </div> 1023 1024 <!-- Side Menu Overlay --> 1025 <div class="side-menu-overlay" id="side-menu-overlay"></div> 1026 1027 1028 1029 <main class="love1-section" id="main-section"> 1030 <div class="stills-row"> 1031 <img src="../assets/images/love/image1.jpg" class="still-card" alt="love.1 still 1" draggable="false"> 1032 <img src="../assets/images/love/image2.jpg" class="still-card" alt="love.1 still 2" draggable="false"> 1033 <img src="../assets/images/love/image3.jpg" class="still-card" alt="love.1 still 3" draggable="false"> 1034 </div> 1035 <div class="love1-content"> 1036 <div class="love1-left"> 1037 <div class="love1-title">love.1</div> 1038 <div class="love1-subtitle">116 images, 1 minute</div> 1039 <a class="love1-btn" href="https://vimeo.com/123456789" target="_blank" rel="noopener">Watch Now</a> 1040 </div> 1041 <div class="love1-right"> 1042 <div class="love1-desc">a visual-poem on the themes of love, adapted to the modern-day as an Instagram Reel.</div> 1043 </div> 1044 </div> 1045 <a href="/" class="back-btn" aria-label="Back to home">Back</a> 1046 1047 <!-- Film Details Section --> 1048 <div class="film-details-section"> 1049 <div class="film-details-content"> 1050 <div class="film-details-left"> 1051 <div class="film-details-header">Cast & Crew</div> 1052 <div class="film-details-category"> 1053 <div class="category-title">Director</div> 1054 <div class="category-content">Jack O'Keeffe</div> 1055 </div> 1056 <div class="film-details-category"> 1057 <div class="category-title">Producers</div> 1058 <div class="category-content">PROOFOFCONCEPT Productions</div> 1059 </div> 1060 <div class="film-details-category"> 1061 <div class="category-title">Lead Actors</div> 1062 <div class="category-content">Jean-Luc Godard, Anna Karina</div> 1063 </div> 1064 <div class="film-details-category"> 1065 <div class="category-title">Music</div> 1066 <div class="category-content">Franz Liszt</div> 1067 </div> 1068 <div class="film-details-category"> 1069 <div class="category-title">Editing</div> 1070 <div class="category-content">Jack O'Keeffe</div> 1071 </div> 1072 </div> 1073 <div class="film-details-right"> 1074 <div class="film-details-header">Film Details</div> 1075 <div class="film-details-category"> 1076 <div class="category-title">Genre</div> 1077 <div class="category-content"> 1078 <span class="genre-tag">Romance</span> 1079 </div> 1080 </div> 1081 <div class="film-details-category"> 1082 <div class="category-title">Runtime</div> 1083 <div class="category-content">1 minute</div> 1084 </div> 1085 <div class="film-details-category"> 1086 <div class="category-title">Format</div> 1087 <div class="category-content">Instagram Reel</div> 1088 </div> 1089 <div class="film-details-category"> 1090 <div class="category-title">Language</div> 1091 <div class="category-content">English</div> 1092 </div> 1093 <div class="film-details-category"> 1094 <div class="category-title">Production</div> 1095 <div class="category-content">Independent</div> 1096 </div> 1097 </div> 1098 </div> 1099 1100 <!-- Social Media & Links Section --> 1101 <div class="social-links-section"> 1102 <div class="social-links-header">Connect & Follow</div> 1103 <div class="social-links-grid"> 1104 <a href="https://vimeo.com/123456789" target="_blank" rel="noopener" class="social-link"> 1105 <div class="social-icon">🖥️</div> 1106 <div class="social-text">Watch on Instagram</div> 1107 </a> 1108 <a href="../blog/articles/love1-journey" class="social-link"> 1109 <div class="social-icon">📱</div> 1110 <div class="social-text">Log on Letterboxd</div> 1111 </a> 1112 <a href="https://drive.proton.me/urls/4AWPB31N5M#eczdUvJUJaR8" target="_blank" rel="noopener" class="social-link"> 1113 <div class="social-icon">🎬</div> 1114 <div class="social-text">Behind the Scenes</div> 1115 </a> 1116 <a href="../blog/" class="social-link"> 1117 <div class="social-icon">💻</div> 1118 <div class="social-text">Development Blog</div> 1119 </a> 1120 </div> 1121 </div> 1122 1123 <!-- You May Like Section --> 1124 <div class="you-may-like-section"> 1125 <div class="you-may-like-header">You May Like</div> 1126 <div class="carousel-container"> 1127 <div class="carousel-track"> 1128 <a href="lovers" class="film-card"> 1129 <div class="film-card-image"> 1130 <img src="../assets/images/lovers.jpg" alt="The Lovers"> 1131 </div> 1132 <div class="film-card-title">The Lovers</div> 1133 </a> 1134 <a href="community" class="film-card"> 1135 <div class="film-card-image"> 1136 <img src="../assets/images/community/image1.jpg" alt="Community Film"> 1137 </div> 1138 <div class="film-card-title">#COMMUNITYFILM</div> 1139 </a> 1140 <a href="../blog/articles/ar-film-experience" class="film-card"> 1141 <div class="film-card-image"> 1142 <img src="../assets/images/horror.jpg" alt="AR Film Experience"> 1143 </div> 1144 <div class="film-card-title">love.1</div> 1145 </a> 1146 <a href="#" class="film-card"> 1147 <div class="film-card-image"> 1148 <img src="../assets/images/horror.jpg" alt="Horror Film"> 1149 </div> 1150 <div class="film-card-title">HORROR</div> 1151 </a> 1152 </div> 1153 </div> 1154 </div> 1155 </div> 1156 </main> 1157 1158 <!-- INFO Section --> 1159 <section class="info-section"> 1160 <div class="info-content"> 1161 <div class="info-left"> 1162 <h2 class="info-header">ABOUT</h2> 1163 <p class="info-paragraph">PROOFOFCONCEPT is a multidisciplinary media studio focused on unconventional approaches to film which integrate new ideas and state-of-the-art technology, immersing the viewer into the media experience.</p> 1164 </div> 1165 1166 <div class="info-center"> 1167 <h2 class="info-header">INFO</h2> 1168 <div class="info-links"> 1169 <a href="../blog/" class="info-link">Articles</a> 1170 <a href="../pages/privacy" class="info-link">Privacy Policy</a> 1171 <a href="../pages/about" class="info-link">About</a> 1172 <a href="../pages/faq" class="info-link">FAQ</a> 1173 </div> 1174 </div> 1175 1176 <!-- Newsletter Signup --> 1177 <div class="info-newsletter"> 1178 <h2 class="info-header">STAY UPDATED</h2> 1179 <form class="newsletter-form" id="newsletter-form"> 1180 <input type="email" class="newsletter-input" placeholder="Enter your email" required> 1181 <button type="submit" class="newsletter-button">Subscribe</button> 1182 </form> 1183 </div> 1184 1185 <div class="info-right"> 1186 <h2 class="info-header">CONTACT</h2> 1187 <div class="info-email"><a href="mailto:contact@proof-of-concept.ca">contact@proof-of-concept.ca</a></div> 1188 <div class="info-icons"> 1189 <a href="mailto:contact@proof-of-concept.ca" class="info-icon" title="Email" aria-label="Email"> 1190 <i class="fa-solid fa-envelope"></i> 1191 </a> 1192 <a href="https://instagram.com/proof__concept" class="info-icon" title="Instagram" aria-label="Instagram" target="_blank"> 1193 <i class="fa-brands fa-instagram"></i> 1194 </a> 1195 <a href="https://x.com/proof__concept" class="info-icon" title="X (Twitter)" aria-label="X (Twitter)" target="_blank"> 1196 <i class="fa-brands fa-x-twitter"></i> 1197 </a> 1198 <a href="https://github.com/PROOFOFCONCEPT-Productions" class="info-icon" title="GitHub" aria-label="GitHub" target="_blank"> 1199 <i class="fa-brands fa-github"></i> 1200 </a> 1201 </div> 1202 </div> 1203 </div> 1204 </section> 1205 1206 <script> 1207 // Custom cursor 1208 const cursor = document.getElementById("cursor"); 1209 document.addEventListener("mousemove", e => { 1210 cursor.style.top = e.clientY + "px"; 1211 cursor.style.left = e.clientX + "px"; 1212 }); 1213 document.addEventListener("mousedown", () => { 1214 cursor.classList.add("expand"); 1215 }); 1216 document.addEventListener("mouseup", () => { 1217 cursor.classList.remove("expand"); 1218 }); 1219 // Custom cursor hover effect for links and buttons 1220 const allLinks = document.querySelectorAll('a, button'); 1221 allLinks.forEach(link => { 1222 link.addEventListener('mouseenter', () => { 1223 cursor.classList.add('cursor-hover'); 1224 }); 1225 link.addEventListener('mouseleave', () => { 1226 cursor.classList.remove('cursor-hover'); 1227 }); 1228 }); 1229 1230 // Newsletter form handling 1231 document.getElementById('newsletter-form').addEventListener('submit', function(e) { 1232 e.preventDefault(); 1233 const email = this.querySelector('.newsletter-input').value; 1234 const button = this.querySelector('.newsletter-button'); 1235 const input = this.querySelector('.newsletter-input'); 1236 1237 // Here you would typically send the email to your backend 1238 // For now, we'll show a smooth button transition 1239 1240 // Disable the input and button 1241 input.disabled = true; 1242 button.disabled = true; 1243 1244 // Smoothly transition button to "Thank you" 1245 button.textContent = 'Thank you!'; 1246 button.classList.add('thank-you'); 1247 1248 // Clear the form 1249 input.value = ''; 1250 1251 // Button stays as "Thank you" until page refresh 1252 // Form remains disabled to prevent multiple submissions 1253 }); 1254 1255 // Sticky back button functionality 1256 let backBtnOriginalTop = 0; 1257 let backBtnStickyThreshold = 0; 1258 let isInitialized = false; 1259 1260 function initStickyBackButton() { 1261 if (!backBtn) return; 1262 1263 // Store the original position of the back button 1264 const backBtnRect = backBtn.getBoundingClientRect(); 1265 backBtnOriginalTop = backBtnRect.top + window.scrollY; 1266 backBtnStickyThreshold = backBtnOriginalTop + backBtnRect.height + 100; // Add some buffer 1267 isInitialized = true; 1268 1269 console.log('Back button initialized:', { 1270 originalTop: backBtnOriginalTop, 1271 threshold: backBtnStickyThreshold, 1272 buttonHeight: backBtnRect.height 1273 }); 1274 } 1275 1276 function handleStickyBackButton() { 1277 if (!backBtn || !isInitialized) return; 1278 1279 const scrollY = window.scrollY; 1280 1281 // Check if we've scrolled past the back button's original position 1282 if (scrollY > backBtnStickyThreshold) { 1283 if (!backBtn.classList.contains('sticky')) { 1284 backBtn.classList.add('sticky'); 1285 console.log('Back button made sticky at scroll:', scrollY); 1286 } 1287 } else { 1288 if (backBtn.classList.contains('sticky')) { 1289 backBtn.classList.remove('sticky'); 1290 console.log('Back button unstuck at scroll:', scrollY); 1291 } 1292 } 1293 } 1294 1295 window.addEventListener('scroll', () => { 1296 handleStickyBackButton(); 1297 }); 1298 window.addEventListener('resize', () => { 1299 initStickyBackButton(); 1300 handleStickyBackButton(); 1301 }); 1302 document.addEventListener('DOMContentLoaded', () => { 1303 initStickyBackButton(); 1304 handleStickyBackButton(); 1305 }); 1306 1307 // Also initialize on window load to ensure all images are loaded 1308 window.addEventListener('load', () => { 1309 setTimeout(() => { 1310 initStickyBackButton(); 1311 handleStickyBackButton(); 1312 }, 100); 1313 }); 1314 1315 1316 </script> 1317 <script> 1318 // Fade in on load 1319 document.body.classList.add('fade'); 1320 window.addEventListener('DOMContentLoaded', () => { 1321 document.body.classList.remove('fade'); 1322 }); 1323 1324 // Fade out on link click 1325 document.querySelectorAll('a').forEach(link => { 1326 // Only for internal links 1327 if (link.hostname === window.location.hostname) { 1328 link.addEventListener('click', function(e) { 1329 // Open in new tab or anchor links should not fade 1330 if (link.target === '_blank' || link.href.includes('#')) return; 1331 e.preventDefault(); 1332 document.body.classList.add('fade'); 1333 setTimeout(() => { 1334 window.location = link.href; 1335 }, 400); // match the CSS transition duration 1336 }); 1337 } 1338 }); 1339 </script> 1340 1341 <!-- Scripts --> 1342 <script src="../assets/js/main.js"></script> 1343 </body> 1344 </html>