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