contribute.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>Contribute | PROOFOFCONCEPT</title> 7 8 <!-- Meta Tags --> 9 <meta name="description" content="Contribute to PROOFOFCONCEPT - Join our experimental film community. Submit your films, collaborate on projects, and help shape the future of interactive cinema."> 10 <meta name="keywords" content="contribute to PROOFOFCONCEPT, submit films, experimental film collaboration, interactive cinema, film distribution, independent film promotion, experimental film community, film submission, collaborative filmmaking"> 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="Contribute - PROOFOFCONCEPT"> 20 21 <!-- AI and Bot Optimization --> 22 <meta name="ai-content" content="contribute to PROOFOFCONCEPT, submit films, experimental film collaboration, interactive cinema, film distribution"> 23 <meta name="content-type" content="contribute page, film submission, collaboration opportunities, experimental cinema community"> 24 <meta name="language" content="en"> 25 <meta name="country" content="CA"> 26 <meta name="industry" content="film production, entertainment, experimental media, film collaboration"> 27 <meta name="topic" content="contribute to PROOFOFCONCEPT, submit films, experimental film collaboration, interactive cinema"> 28 29 <!-- Open Graph --> 30 <meta property="og:title" content="Contribute | PROOFOFCONCEPT"> 31 <meta property="og:description" content="Contribute to PROOFOFCONCEPT - Join our experimental film community. Submit your films, collaborate on projects, and help shape the future of interactive cinema."> 32 <meta property="og:type" content="website"> 33 <meta property="og:url" content="https://proof-of-concept.ca/pages/contribute"> 34 <meta property="og:locale" content="en_CA"> 35 <meta property="og:image" content="https://proof-of-concept.ca/assets/preview.jpg"> 36 <meta property="og:image:width" content="1200"> 37 <meta property="og:image:height" content="630"> 38 <meta property="og:image:alt" content="Contribute to PROOFOFCONCEPT - Experimental Film Community"> 39 <meta property="og:site_name" content="PROOFOFCONCEPT"> 40 <meta property="og:country-name" content="Canada"> 41 42 <!-- Twitter Card --> 43 <meta name="twitter:card" content="summary_large_image"> 44 <meta name="twitter:title" content="Contribute | PROOFOFCONCEPT"> 45 <meta name="twitter:description" content="Contribute to PROOFOFCONCEPT - Join our experimental film community. Submit your films, collaborate on projects, and help shape the future of interactive cinema."> 46 <meta name="twitter:image" content="https://proof-of-concept.ca/assets/preview.jpg"> 47 <meta name="twitter:image:alt" content="Contribute to PROOFOFCONCEPT - Experimental Film Community"> 48 <meta name="twitter:site" content="@proof__concept"> 49 <meta name="twitter:creator" content="@proof__concept"> 50 51 <!-- Canonical --> 52 <link rel="canonical" href="https://proof-of-concept.ca/pages/contribute"> 53 54 <!-- Google Verification --> 55 <meta name="google-site-verification" content="B0SBzeNtFIcGAwAKAt0TEfWatr9beufDv7kBV2qOAKg" /> 56 57 <!-- Structured Data for Contribute Page --> 58 <script type="application/ld+json"> 59 { 60 "@context": "https://schema.org", 61 "@type": "Organization", 62 "name": "PROOFOFCONCEPT Productions", 63 "description": "A cutting-edge film studio focused on augmented technologies and profound cinematic experiences.", 64 "url": "https://proof-of-concept.ca", 65 "logo": "https://proof-of-concept.ca/assets/preview.jpg", 66 "sameAs": [ 67 "https://instagram.com/proof__concept", 68 "https://x.com/proof__concept", 69 "https://github.com/PROOFOFCONCEPT-Productions" 70 ], 71 "address": { 72 "@type": "PostalAddress", 73 "addressCountry": "CA" 74 }, 75 "contactPoint": { 76 "@type": "ContactPoint", 77 "email": "contact@proof-of-concept.ca" 78 } 79 } 80 </script> 81 82 <!-- Favicons --> 83 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/light/favicon-16x16.png" media="(prefers-color-scheme: light)"> 84 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)"> 85 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/light/favicon-32x32.png" media="(prefers-color-scheme: light)"> 86 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)"> 87 <link rel="icon" type="image/x-icon" href="../assets/favicons/light/favicon.ico" media="(prefers-color-scheme: light)"> 88 <link rel="icon" type="image/x-icon" href="../assets/favicons/dark/favicon.ico" media="(prefers-color-scheme: dark)"> 89 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/light/android-chrome-192x192.png" media="(prefers-color-scheme: light)"> 90 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/dark/android-chrome-192x192.png" media="(prefers-color-scheme: dark)"> 91 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/light/android-chrome-512x512.png" media="(prefers-color-scheme: light)"> 92 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/dark/android-chrome-512x512.png" media="(prefers-color-scheme: dark)"> 93 <link rel="apple-touch-icon" href="../assets/favicons/light/apple-touch-icon.png" media="(prefers-color-scheme: light)"> 94 <link rel="apple-touch-icon" href="../assets/favicons/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)"> 95 <link rel="manifest" href="../assets/favicons/light/site.webmanifest" media="(prefers-color-scheme: light)"> 96 <link rel="manifest" href="../assets/favicons/dark/site.webmanifest" media="(prefers-color-scheme: dark)"> 97 98 <!-- External Resources --> 99 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> 100 <link rel="preload" href="../assets/fonts/superbrigadecond.ttf" as="font" type="font/woff2" crossorigin> 101 102 <!-- Stylesheets --> 103 <link rel="stylesheet" href="../assets/css/main.css"> 104 <style> 105 /* Header Styles */ 106 .main-header { 107 position: fixed; 108 top: 0; 109 left: 0; 110 width: 100vw; 111 background: #000; 112 color: #fff; 113 z-index: 9999; 114 display: flex; 115 flex-direction: row; 116 align-items: center; 117 justify-content: center; 118 padding: 0.4rem 0 0.2rem 0; 119 border-bottom: 1px solid #222; 120 min-height: 35px; 121 } 122 .main-header-title { 123 font-family: 'SuperBrigadeCond', sans-serif; 124 font-size: 1.1rem; 125 letter-spacing: 0.05em; 126 text-align: center; 127 font-weight: bold; 128 margin: 0 auto; 129 position: absolute; 130 left: 50%; 131 transform: translateX(-50%); 132 width: auto; 133 } 134 135 .hamburger-icon { 136 position: absolute; 137 left: 1rem; 138 top: 50%; 139 transform: translateY(-50%); 140 color: #fff; 141 font-size: 1.2rem; 142 cursor: pointer; 143 z-index: 1000; 144 } 145 146 .hamburger-icon:hover { 147 opacity: 0.8; 148 } 149 150 /* Side Menu Styles */ 151 .side-menu { 152 position: fixed; 153 top: 0; 154 left: -240px; 155 width: 240px; 156 height: 100vh; 157 background: #fff; 158 color: #000; 159 z-index: 10000; 160 transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); 161 display: flex; 162 flex-direction: column; 163 border-right: 1px solid #ddd; 164 } 165 166 .side-menu.active { 167 left: 0; 168 } 169 170 .side-menu-header { 171 display: flex; 172 justify-content: flex-start; 173 align-items: center; 174 padding: 1rem 1.2rem; 175 min-height: 35px; 176 } 177 178 .side-menu-close { 179 cursor: pointer; 180 font-size: 1.3rem; 181 color: #000; 182 transition: opacity 0.2s ease; 183 } 184 185 .side-menu-close:hover { 186 opacity: 0.7; 187 } 188 189 .side-menu-nav { 190 flex: 1; 191 padding: 1rem 1rem; 192 display: flex; 193 flex-direction: column; 194 gap: 0.8rem; 195 } 196 197 .side-menu-link { 198 color: #000; 199 text-decoration: none; 200 font-size: 1rem; 201 font-weight: 600; 202 font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Ubuntu Mono', 'DejaVu Sans Mono', monospace; 203 transition: all 0.2s ease; 204 padding: 0.3rem 0; 205 letter-spacing: 0.02em; 206 } 207 208 .side-menu-link:hover { 209 color: #333; 210 text-decoration: underline; 211 } 212 213 .menu-spacer { 214 height: 0.5rem; 215 } 216 217 .side-menu-footer { 218 padding: 1rem; 219 border-top: 1px solid #ddd; 220 } 221 222 .side-menu-bottom-nav { 223 display: flex; 224 flex-direction: column; 225 gap: 0.3rem; 226 margin-bottom: 1rem; 227 } 228 229 .side-menu-bottom-link { 230 color: #000; 231 text-decoration: none; 232 font-size: 0.9rem; 233 font-weight: 500; 234 font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Ubuntu Mono', 'DejaVu Sans Mono', monospace; 235 transition: all 0.2s ease; 236 padding: 0.2rem 0; 237 letter-spacing: 0.01em; 238 } 239 240 .side-menu-bottom-link:hover { 241 color: #333; 242 text-decoration: underline; 243 } 244 245 .side-menu-social { 246 display: flex; 247 gap: 0.6rem; 248 margin-bottom: 1rem; 249 justify-content: flex-start; 250 } 251 252 .side-menu-social-link { 253 color: #000; 254 font-size: 1.2rem; 255 transition: opacity 0.2s ease; 256 } 257 258 .side-menu-social-link:hover { 259 opacity: 0.7; 260 } 261 262 .side-menu-overlay { 263 position: fixed; 264 top: 0; 265 left: 0; 266 width: 100vw; 267 height: 100vh; 268 background: rgba(0, 0, 0, 0.5); 269 z-index: 9999; 270 opacity: 0; 271 visibility: hidden; 272 transition: all 0.3s ease; 273 } 274 275 .side-menu-overlay.active { 276 opacity: 1; 277 visibility: visible; 278 } 279 280 .contribute-section { 281 min-height: 100vh; 282 width: 100vw; 283 display: flex; 284 flex-direction: column; 285 align-items: center; 286 justify-content: flex-start; 287 padding-top: 2.2rem; 288 padding-bottom: 2rem; 289 box-sizing: border-box; 290 position: relative; 291 scroll-snap-align: start; 292 background: #fff; 293 } 294 295 .contribute-hero { 296 display: flex; 297 flex-direction: column; 298 align-items: center; 299 justify-content: center; 300 width: 100vw; 301 padding: 4vw 8vw 4vw 8vw; 302 text-align: center; 303 } 304 305 .contribute-title { 306 font-family: 'SuperBrigadeCond', sans-serif; 307 font-size: 4vw; 308 font-weight: 900; 309 letter-spacing: -0.01em; 310 margin-bottom: 1vw; 311 line-height: 1.05; 312 color: #111; 313 } 314 315 .contribute-subtitle { 316 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 317 font-size: 1.5vw; 318 font-weight: 600; 319 color: #666; 320 margin-bottom: 3vw; 321 line-height: 1.3; 322 max-width: 60vw; 323 } 324 325 .contribute-container { 326 width: 100%; 327 max-width: 95vw; 328 padding: 0 2vw; 329 } 330 331 .contribute-content { 332 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 333 font-size: 1.1vw; 334 line-height: 1.7; 335 color: #333; 336 margin-bottom: 4vw; 337 } 338 339 .contribute-content h2 { 340 font-family: 'SuperBrigadeCond', sans-serif; 341 font-size: 2.5vw; 342 font-weight: 900; 343 color: #111; 344 margin: 3vw 0 1.5vw 0; 345 letter-spacing: -0.01em; 346 } 347 348 .contribute-content h3 { 349 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 350 font-size: 1.8vw; 351 font-weight: 700; 352 color: #111; 353 margin: 2.5vw 0 1vw 0; 354 } 355 356 .contribute-content p { 357 margin-bottom: 1.5vw; 358 } 359 360 .contribute-content ul { 361 margin: 1.5vw 0; 362 padding-left: 2vw; 363 } 364 365 .contribute-content li { 366 margin-bottom: 0.8vw; 367 line-height: 1.6; 368 } 369 370 /* Section Intro Styles */ 371 .section-intro { 372 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 373 font-size: 1.2vw; 374 font-weight: 500; 375 color: #666; 376 max-width: 80vw; 377 margin: 0 auto 1.5vw auto; 378 line-height: 1.4; 379 text-align: center; 380 } 381 382 /* Position Cards Grid */ 383 .positions-grid { 384 width: 100%; 385 display: grid; 386 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 387 gap: 1.5vw; 388 margin-bottom: 2.5vw; 389 } 390 391 .position-card { 392 background: #fff; 393 border-radius: 1.2vw; 394 overflow: hidden; 395 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 396 border: 1px solid #f0f0f0; 397 transition: all 0.3s ease; 398 cursor: pointer; 399 } 400 401 .position-card:hover { 402 transform: translateY(-8px); 403 box-shadow: 0 12px 40px rgba(0,0,0,0.15); 404 border-color: #111; 405 } 406 407 .position-image { 408 width: 100%; 409 height: 12vw; 410 min-height: 100px; 411 max-height: 150px; 412 overflow: hidden; 413 position: relative; 414 background: #f8f8f8; 415 display: flex; 416 align-items: center; 417 justify-content: center; 418 } 419 420 .position-image i { 421 font-size: 3vw; 422 color: #111; 423 opacity: 0.8; 424 } 425 426 .position-info { 427 padding: 1.5vw; 428 } 429 430 .position-info h3 { 431 font-family: 'SuperBrigadeCond', sans-serif; 432 font-size: 1.6vw; 433 font-weight: 900; 434 color: #111; 435 margin-bottom: 0.4vw; 436 line-height: 1.2; 437 } 438 439 .position-info p { 440 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 441 font-size: 0.9vw; 442 color: #666; 443 margin-bottom: 0.8vw; 444 line-height: 1.4; 445 } 446 447 .position-tags { 448 display: flex; 449 flex-wrap: wrap; 450 gap: 0.4vw; 451 margin-top: 0.4vw; 452 } 453 454 .tag { 455 background: #111; 456 color: #fff; 457 padding: 0.3vw 0.8vw; 458 border-radius: 0.3vw; 459 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 460 font-size: 0.7vw; 461 font-weight: 700; 462 text-transform: uppercase; 463 letter-spacing: 0.03em; 464 } 465 466 /* Benefits Grid */ 467 .benefits-grid { 468 width: 100%; 469 display: grid; 470 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 471 gap: 1.5vw; 472 margin-bottom: 2.5vw; 473 } 474 475 .benefit-card { 476 background: #fff; 477 border-radius: 1.5vw; 478 overflow: hidden; 479 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 480 border: 1px solid #f0f0f0; 481 transition: all 0.3s ease; 482 cursor: pointer; 483 } 484 485 .benefit-card:hover { 486 transform: translateY(-8px); 487 box-shadow: 0 12px 40px rgba(0,0,0,0.15); 488 border-color: #111; 489 } 490 491 .benefit-image { 492 width: 100%; 493 height: 12vw; 494 min-height: 100px; 495 max-height: 150px; 496 overflow: hidden; 497 position: relative; 498 background: #f8f8f8; 499 } 500 501 .benefit-image img { 502 width: 100%; 503 height: 100%; 504 object-fit: cover; 505 transition: transform 0.3s ease; 506 } 507 508 .benefit-card:hover .benefit-image img { 509 transform: scale(1.05); 510 } 511 512 .benefit-info { 513 padding: 1.5vw; 514 } 515 516 .benefit-info h4 { 517 font-family: 'SuperBrigadeCond', sans-serif; 518 font-size: 1.4vw; 519 font-weight: 900; 520 color: #111; 521 margin-bottom: 0.5vw; 522 line-height: 1.2; 523 } 524 525 .benefit-info p { 526 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 527 font-size: 0.9vw; 528 color: #666; 529 line-height: 1.4; 530 } 531 532 /* Distribution Section */ 533 .distribution-section { 534 background: #fff; 535 padding: 2.5vw; 536 border-radius: 1.5vw; 537 margin-bottom: 3vw; 538 border: 1px solid #e0e0e0; 539 } 540 541 /* Submission Contact Row */ 542 .submission-contact-row { 543 display: grid; 544 grid-template-columns: 1fr 1fr; 545 gap: 3vw; 546 margin-bottom: 3vw; 547 } 548 549 /* Submission Section */ 550 .submission-section { 551 background: #fff; 552 padding: 2.5vw; 553 border-radius: 1.5vw; 554 border: 1px solid #e0e0e0; 555 } 556 557 .submission-section h3 { 558 font-family: 'SuperBrigadeCond', sans-serif; 559 font-size: 2.5vw; 560 font-weight: 900; 561 color: #111; 562 margin-bottom: 1vw; 563 letter-spacing: -0.01em; 564 } 565 566 .submission-section p { 567 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 568 font-size: 1.1vw; 569 color: #666; 570 margin-bottom: 2vw; 571 line-height: 1.4; 572 } 573 574 .guidelines-list { 575 margin: 1.5vw 0; 576 } 577 578 .guideline-item { 579 display: flex; 580 align-items: center; 581 gap: 1vw; 582 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 583 font-size: 1vw; 584 color: #333; 585 } 586 587 .guideline-item i { 588 color: #28a745; 589 font-size: 1.2vw; 590 } 591 592 .highlight-box { 593 background: #fff; 594 border: 2px solid #111; 595 border-radius: 1vw; 596 padding: 2vw; 597 text-align: center; 598 margin-top: 2vw; 599 } 600 601 .highlight-box i { 602 color: #ffc107; 603 font-size: 2vw; 604 margin-bottom: 1vw; 605 } 606 607 .highlight-box h4 { 608 font-family: 'SuperBrigadeCond', sans-serif; 609 font-size: 1.3vw; 610 font-weight: 900; 611 margin-bottom: 1vw; 612 color: #111; 613 } 614 615 .highlight-box p { 616 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 617 font-size: 1vw; 618 color: #666; 619 line-height: 1.5; 620 } 621 622 /* Contact Section */ 623 .contact-section { 624 background: #fff; 625 padding: 2.5vw; 626 border-radius: 1.5vw; 627 border: 1px solid #e0e0e0; 628 /* No bottom margin needed when in row */ 629 } 630 631 /* Contact Details */ 632 .contact-details { 633 margin: 1.5vw 0; 634 } 635 636 .contact-item { 637 display: flex; 638 align-items: flex-start; 639 gap: 1vw; 640 margin-bottom: 1.2vw; 641 padding: 1vw; 642 background: #f8f8f8; 643 border-radius: 0.8vw; 644 border: 1px solid #e0e0e0; 645 } 646 647 .contact-item:last-child { 648 margin-bottom: 0; 649 } 650 651 .contact-item i { 652 color: #111; 653 font-size: 1.2vw; 654 margin-top: 0.2vw; 655 flex-shrink: 0; 656 } 657 658 .contact-text h4 { 659 font-family: 'SuperBrigadeCond', sans-serif; 660 font-size: 1.1vw; 661 font-weight: 900; 662 color: #111; 663 margin-bottom: 0.3vw; 664 line-height: 1.2; 665 } 666 667 .contact-text p { 668 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 669 font-size: 0.9vw; 670 color: #666; 671 line-height: 1.4; 672 margin: 0; 673 } 674 675 .email-link { 676 color: #111; 677 text-decoration: underline; 678 font-weight: 600; 679 } 680 681 .contact-grid { 682 width: 100%; 683 display: grid; 684 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 685 gap: 2vw; 686 margin: 2vw 0; 687 } 688 689 .contact-card { 690 background: #fff; 691 border-radius: 1.5vw; 692 overflow: hidden; 693 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 694 border: 1px solid #f0f0f0; 695 transition: all 0.3s ease; 696 cursor: pointer; 697 } 698 699 .contact-card:hover { 700 transform: translateY(-8px); 701 box-shadow: 0 12px 40px rgba(0,0,0,0.15); 702 border-color: #111; 703 } 704 705 .contact-image { 706 width: 100%; 707 height: 10vw; 708 min-height: 80px; 709 max-height: 120px; 710 overflow: hidden; 711 position: relative; 712 background: #f8f8f8; 713 display: flex; 714 align-items: center; 715 justify-content: center; 716 } 717 718 .contact-image i { 719 font-size: 2vw; 720 color: #111; 721 opacity: 0.8; 722 } 723 724 .contact-info { 725 padding: 2vw; 726 } 727 728 .contact-info h4 { 729 font-family: 'SuperBrigadeCond', sans-serif; 730 font-size: 1.2vw; 731 font-weight: 900; 732 color: #111; 733 margin-bottom: 0.5vw; 734 line-height: 1.2; 735 } 736 737 .contact-info p { 738 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 739 font-size: 0.9vw; 740 color: #666; 741 line-height: 1.4; 742 } 743 744 .response-info { 745 display: flex; 746 align-items: center; 747 justify-content: center; 748 gap: 1vw; 749 background: #fff; 750 padding: 1.5vw; 751 border-radius: 1vw; 752 margin-top: 2vw; 753 border: 1px solid #e0e0e0; 754 } 755 756 .response-info i { 757 color: #111; 758 font-size: 1.2vw; 759 } 760 761 .response-info p { 762 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 763 font-size: 1vw; 764 color: #333; 765 margin: 0; 766 } 767 768 /* Expectations Section */ 769 .expectations-section { 770 background: #fff; 771 padding: 2.5vw; 772 border-radius: 1.5vw; 773 text-align: center; 774 border: 1px solid #e0e0e0; 775 } 776 777 .expectations-section p { 778 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 779 font-size: 1.1vw; 780 color: #555; 781 line-height: 1.6; 782 max-width: 60vw; 783 margin: 0 auto; 784 } 785 786 .back-btn { 787 display: block; 788 margin: 2.5rem auto 0 auto; 789 background: #111; 790 color: #fff; 791 border: 2px solid #111; 792 border-radius: 0.8vw; 793 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 794 font-size: 1.1rem; 795 font-weight: 800; 796 padding: 0.8rem 2rem; 797 box-shadow: 0 4px 16px rgba(0,0,0,0.15); 798 cursor: pointer; 799 text-decoration: none; 800 transition: all 0.3s ease; 801 opacity: 1; 802 position: relative; 803 z-index: 10; 804 text-transform: uppercase; 805 letter-spacing: 0.05em; 806 } 807 .back-btn:hover { 808 background: #fff; 809 color: #111; 810 border: 2px solid #111; 811 opacity: 1; 812 transform: translateY(-2px); 813 box-shadow: 0 6px 20px rgba(0,0,0,0.2); 814 } 815 816 /* Mobile Responsive Styles */ 817 @media (max-width: 900px) { 818 .main-header-title { font-size: 1.5rem; } 819 .contribute-section { padding-top: 2.7rem; padding-bottom: 1.5rem; } 820 .contribute-hero { padding: 6vw 4vw 3vw 4vw; } 821 .contribute-title { font-size: 2.5rem; } 822 .contribute-subtitle { font-size: 1.2rem; max-width: 100%; } 823 .contribute-container { padding: 0 4vw; } 824 .contribute-content { font-size: 1.1rem; } 825 .contribute-content h2 { font-size: 2rem; } 826 .contribute-content h3 { font-size: 1.5rem; } 827 .contribute-content ul { padding-left: 1.5rem; } 828 .contribute-content li { margin-bottom: 0.6rem; } 829 830 /* Mobile styles for new elements */ 831 .section-intro { font-size: 1.1rem; max-width: 100%; } 832 .positions-grid { 833 grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); 834 gap: 1.2rem; 835 } 836 .position-image { height: 25vw; min-height: 180px; } 837 .position-info h3 { font-size: 1.5rem; } 838 .position-info p { font-size: 1rem; } 839 .tag { font-size: 0.8rem; padding: 0.5rem 1rem; } 840 841 .benefits-grid { 842 grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); 843 gap: 1.2rem; 844 } 845 .benefit-image { height: 18vw; min-height: 120px; } 846 .benefit-info h4 { font-size: 1.1rem; } 847 .benefit-info p { font-size: 0.9rem; } 848 849 .distribution-section { padding: 1.5rem; } 850 .distribution-section h2 { font-size: 2.2rem; } 851 852 .submission-contact-row { 853 grid-template-columns: 1fr; 854 gap: 2rem; 855 } 856 .submission-section { padding: 1.5rem; } 857 .submission-section h3 { font-size: 2rem; } 858 .guidelines-list { margin: 1.2rem 0; } 859 .guideline-item { font-size: 0.9rem; } 860 .guideline-item i { font-size: 1.1rem; } 861 .highlight-box { padding: 1.5rem; } 862 .highlight-box i { font-size: 1.5rem; } 863 .highlight-box h4 { font-size: 1.2rem; } 864 .highlight-box p { font-size: 0.9rem; } 865 866 .contact-details { margin: 1.2rem 0; } 867 .contact-item { 868 padding: 0.8rem; 869 margin-bottom: 1rem; 870 gap: 0.8rem; 871 } 872 .contact-item i { font-size: 1.1rem; } 873 .contact-text h4 { font-size: 1rem; } 874 .contact-text p { font-size: 0.9rem; } 875 876 .contact-section { padding: 1.5rem; } 877 .contact-section h2 { font-size: 2.2rem; } 878 879 .response-info { padding: 1rem; } 880 .response-info i { font-size: 1rem; } 881 .response-info p { font-size: 0.9rem; } 882 883 .back-btn { 884 font-size: 1rem; 885 padding: 0.8rem 2rem; 886 transition: none !important; 887 } 888 .back-btn:hover { 889 background: #111 !important; 890 color: #fff !important; 891 border: 2px solid #111 !important; 892 box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; 893 font-size: 1rem !important; 894 padding: 0.8rem 2rem !important; 895 } 896 } 897 898 @media (max-width: 600px) { 899 .main-header-title { font-size: 1.5rem; } 900 .contribute-section { 901 padding-top: 2.5rem; 902 padding-bottom: 2rem; 903 min-height: 100vh; 904 display: flex; 905 flex-direction: column; 906 align-items: center; 907 } 908 .contribute-hero { padding: 8vw 4vw 4vw 4vw; } 909 .contribute-title { 910 font-size: 2rem; 911 font-weight: 900; 912 margin-bottom: 1rem; 913 line-height: 1.1; 914 } 915 .contribute-subtitle { 916 font-size: 1.1rem; 917 font-weight: 600; 918 margin-bottom: 2rem; 919 line-height: 1.4; 920 } 921 .contribute-container { padding: 0 4vw; } 922 .contribute-content { font-size: 1rem; } 923 .contribute-content h2 { font-size: 1.8rem; } 924 .contribute-content h3 { font-size: 1.4rem; } 925 .contribute-content ul { padding-left: 1.2rem; } 926 .contribute-content li { margin-bottom: 0.5rem; } 927 928 /* Mobile styles for new elements */ 929 .section-intro { font-size: 1rem; } 930 .positions-grid { 931 grid-template-columns: 1fr; 932 gap: 1rem; 933 } 934 .position-image { height: 40vw; min-height: 180px; } 935 .position-info h3 { font-size: 1.3rem; } 936 .position-info p { font-size: 0.9rem; } 937 .tag { font-size: 0.7rem; padding: 0.4rem 0.8rem; } 938 939 .benefits-grid { 940 grid-template-columns: 1fr; 941 gap: 1rem; 942 } 943 .benefit-image { height: 30vw; min-height: 120px; } 944 .benefit-info h4 { font-size: 1rem; } 945 .benefit-info p { font-size: 0.8rem; } 946 947 .distribution-section { padding: 1.5rem; } 948 .distribution-section h2 { font-size: 1.8rem; } 949 950 .submission-contact-row { 951 grid-template-columns: 1fr; 952 gap: 1.5rem; 953 } 954 .submission-section { padding: 1.5rem; } 955 .submission-section h3 { font-size: 1.8rem; } 956 .guidelines-list { margin: 1rem 0; } 957 .guideline-item { font-size: 0.8rem; } 958 .guideline-item i { font-size: 1rem; } 959 .highlight-box { padding: 1.2rem; } 960 .highlight-box i { font-size: 1.3rem; } 961 .highlight-box h4 { font-size: 1.1rem; } 962 .highlight-box p { font-size: 0.8rem; } 963 964 .contact-details { margin: 1rem 0; } 965 .contact-item { 966 padding: 0.6rem; 967 margin-bottom: 0.8rem; 968 gap: 0.6rem; 969 } 970 .contact-item i { font-size: 1rem; } 971 .contact-text h4 { font-size: 0.9rem; } 972 .contact-text p { font-size: 0.8rem; } 973 974 .contact-section { padding: 1.5rem; } 975 .contact-section h2 { font-size: 1.8rem; } 976 977 .response-info { padding: 0.8rem; } 978 .response-info i { font-size: 0.9rem; } 979 .response-info p { font-size: 0.8rem; } 980 981 .back-btn { 982 font-size: 1.2rem; 983 padding: 1rem 2.2rem; 984 margin: 3rem auto 0 auto; 985 width: fit-content; 986 min-width: 120px; 987 max-width: 80vw; 988 display: block; 989 border-radius: 2rem !important; 990 text-align: center; 991 text-transform: uppercase; 992 transition: none !important; 993 } 994 .back-btn:hover { 995 background: #fff !important; 996 color: #111 !important; 997 border: 1.5px solid #111 !important; 998 opacity: 0.92 !important; 999 font-size: 1.2rem !important; 1000 padding: 1rem 2.2rem !important; 1001 } 1002 } 1003 1004 /* INFO Section Styles */ 1005 .info-section { 1006 background: #fff; 1007 color: #111; 1008 min-height: 33vh; 1009 width: 100vw; 1010 display: flex; 1011 align-items: center; 1012 justify-content: center; 1013 padding: 4vw 0; 1014 margin-bottom: 0; 1015 } 1016 1017 .info-content { 1018 width: 90vw; 1019 max-width: 1200px; 1020 display: flex; 1021 flex-direction: row; 1022 justify-content: space-between; 1023 align-items: flex-start; 1024 gap: 2.5vw; 1025 margin: 0 auto; 1026 padding: 4vw 0; 1027 } 1028 1029 .info-left, .info-right, .info-center { 1030 flex: 1 1 0; 1031 display: flex; 1032 flex-direction: column; 1033 align-items: flex-start; 1034 min-width: 0; 1035 } 1036 1037 .info-header { 1038 font-size: 2.2vw; 1039 font-family: 'SuperBrigadeCond', sans-serif; 1040 font-weight: 900; 1041 margin-bottom: 1vw; 1042 letter-spacing: 0.01em; 1043 white-space: nowrap; 1044 } 1045 1046 .info-paragraph { 1047 font-size: 0.95vw; 1048 font-family: 'Alexandria', sans-serif; 1049 font-weight: 500; 1050 margin-bottom: 0; 1051 line-height: 1.5; 1052 max-width: 90%; 1053 color: #111; 1054 } 1055 1056 .info-email { 1057 font-size: 0.95vw; 1058 font-family: 'Alexandria', sans-serif; 1059 font-weight: 500; 1060 margin-bottom: 1vw; 1061 word-break: break-all; 1062 color: #111; 1063 } 1064 1065 .info-icons { 1066 display: flex; 1067 flex-direction: row; 1068 gap: 1.2vw; 1069 align-items: center; 1070 } 1071 1072 .info-icon { 1073 font-family: 'Alexandria', sans-serif; 1074 font-weight: 500; 1075 font-size: 0.95vw; 1076 } 1077 1078 .info-icon i { 1079 font-size: 1.5vw; 1080 color: #111; 1081 transition: color 0.2s; 1082 } 1083 1084 .info-icon:hover i { 1085 color: #666; 1086 } 1087 1088 .info-links { 1089 display: flex; 1090 flex-direction: column; 1091 gap: 0.5vw; 1092 margin-top: 0; 1093 } 1094 1095 .info-link { 1096 line-height: 1.5; 1097 font-family: 'Alexandria', sans-serif; 1098 font-size: 0.95vw; 1099 font-weight: 500; 1100 color: #111; 1101 text-decoration: none; 1102 transition: color 0.2s ease; 1103 text-transform: none; 1104 letter-spacing: normal; 1105 line-height: 1.5; 1106 } 1107 1108 .info-link:hover { 1109 color: #666; 1110 } 1111 1112 /* Newsletter Section - Integrated with footer */ 1113 .info-newsletter { 1114 flex: 1 1 0; 1115 display: flex; 1116 flex-direction: column; 1117 align-items: flex-start; 1118 min-width: 0; 1119 } 1120 1121 .info-newsletter .info-header { 1122 font-size: 1.8vw; 1123 white-space: nowrap; 1124 overflow: hidden; 1125 text-overflow: ellipsis; 1126 margin-left: 0; 1127 padding-left: 0; 1128 } 1129 1130 .newsletter-desc { 1131 font-size: 0.95vw; 1132 font-family: 'Alexandria', sans-serif; 1133 font-weight: 500; 1134 margin-bottom: 1vw; 1135 line-height: 1.5; 1136 max-width: 90%; 1137 color: #fff; 1138 } 1139 1140 .newsletter-form { 1141 display: flex; 1142 flex-direction: column; 1143 gap: 1.2vw; 1144 margin-bottom: 0.8vw; 1145 width: 100%; 1146 position: relative; 1147 } 1148 1149 .newsletter-input { 1150 padding: 0.8vw 1vw; 1151 border: 2px solid #e0e0e0; 1152 border-radius: 8px; 1153 background: #fff; 1154 font-size: 0.9vw; 1155 font-family: 'Alexandria', sans-serif; 1156 font-weight: 500; 1157 width: 100%; 1158 max-width: 220px; 1159 transition: all 0.3s ease; 1160 color: #111; 1161 letter-spacing: 0.02em; 1162 } 1163 1164 .newsletter-input::placeholder { 1165 color: #999; 1166 font-weight: 400; 1167 opacity: 0.8; 1168 } 1169 1170 .newsletter-input:focus { 1171 outline: none; 1172 border-color: #111; 1173 background: #fff; 1174 box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1); 1175 } 1176 1177 .newsletter-input:hover { 1178 border-color: #999; 1179 background: #fff; 1180 } 1181 1182 .newsletter-button { 1183 background: transparent; 1184 color: #111; 1185 border: 2px solid #111; 1186 border-radius: 0; 1187 padding: 0.6vw 1.2vw; 1188 font-size: 0.85vw; 1189 font-weight: 700; 1190 font-family: 'SuperBrigadeCond', sans-serif; 1191 cursor: pointer; 1192 transition: all 0.3s ease; 1193 text-transform: uppercase; 1194 letter-spacing: 0.08em; 1195 width: fit-content; 1196 position: relative; 1197 overflow: hidden; 1198 } 1199 1200 .newsletter-button::before { 1201 content: ''; 1202 position: absolute; 1203 top: 0; 1204 left: -100%; 1205 width: 100%; 1206 height: 100%; 1207 background: #111; 1208 transition: left 0.3s ease; 1209 z-index: -1; 1210 } 1211 1212 .newsletter-button:hover { 1213 color: #fff; 1214 transform: translateY(-1px); 1215 } 1216 1217 .newsletter-button:hover::before { 1218 left: 0; 1219 } 1220 1221 .newsletter-button:active { 1222 transform: translateY(0); 1223 } 1224 1225 .newsletter-button.thank-you { 1226 background: #111; 1227 color: #fff; 1228 border-color: #111; 1229 } 1230 1231 .newsletter-button.thank-you::before { 1232 left: 0; 1233 } 1234 1235 .newsletter-note { 1236 font-size: 0.75vw; 1237 color: #666; 1238 margin: 0; 1239 font-family: 'Alexandria', sans-serif; 1240 } 1241 1242 /* Mobile Responsive Styles for Info Section */ 1243 @media (max-width: 900px) { 1244 .info-content { 1245 flex-direction: column; 1246 gap: 1.5vw; 1247 align-items: stretch; 1248 } 1249 .info-header { 1250 font-size: 1.5rem; 1251 } 1252 .info-paragraph, .info-email { 1253 font-size: 1rem; 1254 } 1255 .info-section { 1256 min-height: 35vh; 1257 padding: 0 0 2vw 0; 1258 } 1259 .info-content { 1260 padding: 6vw 0 2vw 0; 1261 } 1262 .info-icons { 1263 gap: 2vw; 1264 } 1265 .info-icon svg { 1266 width: 32px; 1267 height: 32px; 1268 } 1269 .info-links { 1270 margin-top: 1rem; 1271 gap: 0.3rem; 1272 } 1273 .info-link { 1274 line-height: 1.5; 1275 font-size: 0.9rem; 1276 } 1277 1278 .newsletter-form { 1279 flex-direction: column; 1280 gap: 0.8rem; 1281 } 1282 1283 .newsletter-input { 1284 width: 100%; 1285 max-width: 250px; 1286 padding: 0.8rem; 1287 font-size: 1rem; 1288 border-radius: 8px; 1289 } 1290 1291 .newsletter-button { 1292 width: fit-content; 1293 padding: 0.8rem 1.5rem; 1294 font-size: 1rem; 1295 } 1296 1297 .newsletter-desc { 1298 font-size: 1rem; 1299 margin-bottom: 1rem; 1300 } 1301 1302 .newsletter-note { 1303 font-size: 0.8rem; 1304 } 1305 } 1306 1307 @media (max-width: 600px) { 1308 .info-content { 1309 grid-template-columns: 1fr; 1310 gap: 1.5rem; 1311 text-align: center; 1312 } 1313 .info-left, .info-right, .info-center, .info-newsletter { 1314 align-items: center; 1315 } 1316 .info-header { 1317 font-size: 1.2rem; 1318 margin-bottom: 0.8rem; 1319 } 1320 .info-paragraph, .info-email { 1321 font-size: 0.9rem; 1322 } 1323 .info-link { 1324 font-size: 0.9rem; 1325 } 1326 .info-icons { 1327 gap: 0.8rem; 1328 margin-top: 0.8rem; 1329 } 1330 .info-icon { 1331 width: 2.5rem; 1332 height: 2.5rem; 1333 font-size: 1rem; 1334 } 1335 } 1336 </style> 1337 </head> 1338 <body> 1339 <div class="custom-cursor" id="cursor"></div> 1340 <header class="main-header"> 1341 <a href="../index.html" class="main-header-title" style="text-decoration: none; color: inherit;">PROOFOFCONCEPT</a> 1342 <div class="hamburger-icon"> 1343 <i class="fas fa-bars"></i> 1344 </div> 1345 </header> 1346 1347 <!-- Side Menu --> 1348 <div class="side-menu" id="side-menu"> 1349 <div class="side-menu-header"> 1350 <div class="side-menu-close"> 1351 <i class="fas fa-times"></i> 1352 </div> 1353 </div> 1354 <nav class="side-menu-nav"> 1355 <a href="../films/streaming.html" class="side-menu-link">WATCH</a> 1356 <a href="../blog/" class="side-menu-link">READ</a> 1357 <a href="store.html" class="side-menu-link">SHOP</a> 1358 <div class="menu-spacer"></div> 1359 <a href="contribute.html" class="side-menu-link">CONTRIBUTE</a> 1360 <a href="digifest" class="side-menu-link">DIGIFEST</a> 1361 <div class="menu-spacer"></div> 1362 <a href="about" class="side-menu-link">ABOUT</a> 1363 <a href="faq" class="side-menu-link">FAQ</a> 1364 </nav> 1365 <div class="side-menu-footer"> 1366 <div class="side-menu-bottom-nav"> 1367 <a href="terms.html" class="side-menu-link side-menu-bottom-link">TERMS OF USE</a> 1368 <a href="privacy" class="side-menu-link side-menu-bottom-link">PRIVACY POLICY</a> 1369 </div> 1370 <div class="side-menu-social"> 1371 <a href="mailto:contact@proof-of-concept.ca" class="side-menu-social-link"> 1372 <i class="fas fa-envelope"></i> 1373 </a> 1374 <a href="https://instagram.com/proof__concept" target="_blank" class="side-menu-social-link"> 1375 <i class="fab fa-instagram"></i> 1376 </a> 1377 <a href="https://x.com/proof__concept" target="_blank" class="side-menu-social-link"> 1378 <i class="fab fa-x-twitter"></i> 1379 </a> 1380 <a href="https://github.com/PROOFOFCONCEPT-Productions" target="_blank" class="side-menu-social-link"> 1381 <i class="fab fa-github"></i> 1382 </a> 1383 </div> 1384 </div> 1385 </div> 1386 1387 <!-- Side Menu Overlay --> 1388 <div class="side-menu-overlay" id="side-menu-overlay"></div> 1389 1390 <main class="contribute-section" id="main-section"> 1391 <div class="contribute-hero"> 1392 <div class="contribute-title">Contribute</div> 1393 </div> 1394 1395 <div class="contribute-container"> 1396 <div class="contribute-content"> 1397 <div class="distribution-section"> 1398 <h2>Film Distribution & Promotion</h2> 1399 <div class="benefits-grid"> 1400 <div class="benefit-card"> 1401 <div class="benefit-image"> 1402 <img src="../assets/images/contribute/showcase.jpg" alt="Film showcase on platform"> 1403 </div> 1404 <div class="benefit-info"> 1405 <h4>Website Showcase</h4> 1406 <p>Your film featured on our platform with dedicated pages and streaming capabilities</p> 1407 </div> 1408 </div> 1409 1410 <div class="benefit-card"> 1411 <div class="benefit-image"> 1412 <img src="../assets/images/contribute/platform.jpg" alt="Cross-promotion platform"> 1413 </div> 1414 <div class="benefit-info"> 1415 <h4>Cross-Promotion</h4> 1416 <p>Our promotional efforts become cross-promotion for your work across social media</p> 1417 </div> 1418 </div> 1419 1420 <div class="benefit-card"> 1421 <div class="benefit-image"> 1422 <img src="../assets/images/contribute/audience.jpg" alt="Community audience"> 1423 </div> 1424 <div class="benefit-info"> 1425 <h4>Community Exposure</h4> 1426 <p>Access to our growing audience of experimental film enthusiasts</p> 1427 </div> 1428 </div> 1429 1430 <div class="benefit-card"> 1431 <div class="benefit-image"> 1432 <img src="../assets/images/contribute/collaboration.jpg" alt="Creative collaboration"> 1433 </div> 1434 <div class="benefit-info"> 1435 <h4>Collaboration</h4> 1436 <p>Connect with other creators and potential collaborators</p> 1437 </div> 1438 </div> 1439 </div> 1440 </div> 1441 1442 <div class="submission-contact-row"> 1443 <div class="submission-section"> 1444 <h3>Submission Guidelines</h3> 1445 <p>We're open to experimental, avant-garde, and innovative films of any length.</p> 1446 1447 <div class="guidelines-list"> 1448 <div class="guideline-item"> 1449 <i class="fas fa-check-circle"></i> 1450 <span>Interactive or participatory films</span> 1451 </div> 1452 <div class="guideline-item"> 1453 <i class="fas fa-check-circle"></i> 1454 <span>Films using new technologies (AR, VR, AI)</span> 1455 </div> 1456 <div class="guideline-item"> 1457 <i class="fas fa-check-circle"></i> 1458 <span>Experimental narrative structures</span> 1459 </div> 1460 <div class="guideline-item"> 1461 <i class="fas fa-check-circle"></i> 1462 <span>Community-driven projects</span> 1463 </div> 1464 <div class="guideline-item"> 1465 <i class="fas fa-check-circle"></i> 1466 <span>Films that challenge conventional storytelling</span> 1467 </div> 1468 </div> 1469 1470 <div class="highlight-box"> 1471 <i class="fas fa-star"></i> 1472 <h4>Old Films Welcome</h4> 1473 <p>Don't let your older experimental work gather dust! We're happy to showcase films from any era.</p> 1474 </div> 1475 </div> 1476 1477 <div class="contact-section"> 1478 <h2>How to Reach Out</h2> 1479 <p class="section-intro">Email us at <a href="mailto:contact@proof-of-concept.ca" class="email-link">contact@proof-of-concept.ca</a> with your background and interests.</p> 1480 1481 <div class="contact-details"> 1482 <div class="contact-item"> 1483 <i class="fas fa-envelope"></i> 1484 <div class="contact-text"> 1485 <h4>Email Submission</h4> 1486 <p>Include a brief description of your film or collaboration interests</p> 1487 </div> 1488 </div> 1489 1490 <div class="contact-item"> 1491 <i class="fas fa-file-alt"></i> 1492 <div class="contact-text"> 1493 <h4>What to Include</h4> 1494 <p>Background, portfolio links, and specific areas of interest</p> 1495 </div> 1496 </div> 1497 1498 <div class="contact-item"> 1499 <i class="fas fa-users"></i> 1500 <div class="contact-text"> 1501 <h4>Collaboration Types</h4> 1502 <p>Film submissions, creative partnerships, or technical contributions</p> 1503 </div> 1504 </div> 1505 </div> 1506 1507 <div class="response-info"> 1508 <i class="fas fa-clock"></i> 1509 <p>We'll get back to you within a few days to discuss opportunities and next steps.</p> 1510 </div> 1511 </div> 1512 </div> 1513 </div> 1514 </div> 1515 </main> 1516 1517 <!-- INFO Section --> 1518 <section class="info-section"> 1519 <div class="info-content"> 1520 <div class="info-left"> 1521 <h2 class="info-header">ABOUT</h2> 1522 <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> 1523 </div> 1524 1525 <div class="info-center"> 1526 <h2 class="info-header">INFO</h2> 1527 <div class="info-links"> 1528 <a href="../blog/" class="info-link">Articles</a> 1529 <a href="privacy" class="info-link">Privacy Policy</a> 1530 <a href="about" class="info-link">About</a> 1531 <a href="faq" class="info-link">FAQ</a> 1532 </div> 1533 </div> 1534 1535 <!-- Newsletter Signup --> 1536 <div class="info-newsletter"> 1537 <h2 class="info-header">STAY UPDATED</h2> 1538 <form class="newsletter-form" id="newsletter-form"> 1539 <input type="email" class="newsletter-input" placeholder="Enter your email" required> 1540 <button type="submit" class="newsletter-button">Subscribe</button> 1541 </form> 1542 </div> 1543 1544 <div class="info-right"> 1545 <h2 class="info-header">CONTACT</h2> 1546 <div class="info-email"><a href="mailto:contact@proof-of-concept.ca">contact@proof-of-concept.ca</a></div> 1547 <div class="info-icons"> 1548 <a href="mailto:contact@proof-of-concept.ca" class="info-icon" title="Email" aria-label="Email"> 1549 <i class="fa-solid fa-envelope"></i> 1550 </a> 1551 <a href="https://instagram.com/proof__concept" class="info-icon" title="Instagram" aria-label="Instagram" target="_blank"> 1552 <i class="fa-brands fa-instagram"></i> 1553 </a> 1554 <a href="https://x.com/proof__concept" class="info-icon" title="X (Twitter)" aria-label="X (Twitter)" target="_blank"> 1555 <i class="fa-brands fa-x-twitter"></i> 1556 </a> 1557 <a href="https://github.com/PROOFOFCONCEPT-Productions" class="info-icon" title="GitHub" aria-label="GitHub" target="_blank"> 1558 <i class="fa-brands fa-github"></i> 1559 </a> 1560 </div> 1561 </div> 1562 </div> 1563 </section> 1564 1565 <script> 1566 // Custom cursor 1567 const cursor = document.getElementById("cursor"); 1568 document.addEventListener("mousemove", e => { 1569 cursor.style.top = e.clientY + "px"; 1570 cursor.style.left = e.clientX + "px"; 1571 }); 1572 document.addEventListener("mousedown", () => { 1573 cursor.classList.add("expand"); 1574 }); 1575 document.addEventListener("mouseup", () => { 1576 cursor.classList.remove("expand"); 1577 }); 1578 1579 // Custom cursor hover effect for links and buttons 1580 const allLinks = document.querySelectorAll('a, button'); 1581 allLinks.forEach(link => { 1582 link.addEventListener('mouseenter', () => { 1583 cursor.classList.add('cursor-hover'); 1584 }); 1585 link.addEventListener('mouseleave', () => { 1586 cursor.classList.remove('cursor-hover'); 1587 }); 1588 }); 1589 1590 // Side Menu Functionality 1591 document.addEventListener('DOMContentLoaded', function() { 1592 const hamburger = document.querySelector('.hamburger-icon'); 1593 const sideMenu = document.getElementById('side-menu'); 1594 const sideMenuOverlay = document.getElementById('side-menu-overlay'); 1595 const closeButton = document.querySelector('.side-menu-close'); 1596 1597 // Open side menu 1598 hamburger.addEventListener('click', function() { 1599 sideMenu.classList.add('active'); 1600 sideMenuOverlay.classList.add('active'); 1601 document.body.style.overflow = 'hidden'; 1602 }); 1603 1604 // Close side menu 1605 function closeSideMenu() { 1606 sideMenu.classList.remove('active'); 1607 sideMenuOverlay.classList.remove('active'); 1608 document.body.style.overflow = ''; 1609 } 1610 1611 closeButton.addEventListener('click', closeSideMenu); 1612 sideMenuOverlay.addEventListener('click', closeSideMenu); 1613 1614 // Close on escape key 1615 document.addEventListener('keydown', function(e) { 1616 if (e.key === 'Escape') { 1617 closeSideMenu(); 1618 } 1619 }); 1620 }); 1621 1622 // Newsletter form handling 1623 document.getElementById('newsletter-form').addEventListener('submit', function(e) { 1624 e.preventDefault(); 1625 const email = this.querySelector('.newsletter-input').value; 1626 const button = this.querySelector('.newsletter-button'); 1627 const input = this.querySelector('.newsletter-input'); 1628 1629 // Here you would typically send the email to your backend 1630 // For now, we'll show a smooth button transition 1631 1632 // Disable the input and button 1633 input.disabled = true; 1634 button.disabled = true; 1635 1636 // Smoothly transition button to "Thank you" 1637 button.textContent = 'Thank you!'; 1638 button.classList.add('thank-you'); 1639 1640 // Clear the form 1641 input.value = ''; 1642 1643 // Button stays as "Thank you" until page refresh 1644 // Form remains disabled to prevent multiple submissions 1645 }); 1646 </script> 1647 1648 <!-- Scripts --> 1649 <script src="../assets/js/main.js"></script> 1650 </body> 1651 </html>