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