about.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>About | PROOFOFCONCEPT</title> 7 8 <!-- Meta Tags --> 9 <meta name="description" content="About PROOFOFCONCEPT - A cutting-edge film studio focused on augmented technologies and profound cinematic experiences. Learn about our experimental films, interactive cinema, and AI-powered horror experiences."> 10 <meta name="keywords" content="about PROOFOFCONCEPT, experimental film studio, avant-garde cinema, interactive short films, Canadian independent film, art house production, PROOFOFCONCEPT, experimental production company, tech-driven storytelling, adaptive filmmaking, emerging filmmakers, indie film innovation, film studio about, Canadian film production company, experimental cinema studio, interactive film company"> 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="About - PROOFOFCONCEPT"> 20 21 <!-- AI and Bot Optimization --> 22 <meta name="ai-content" content="about PROOFOFCONCEPT, experimental film studio, avant-garde cinema, interactive cinema, AI-powered entertainment"> 23 <meta name="content-type" content="about page, film studio information, company profile, experimental cinema studio"> 24 <meta name="language" content="en"> 25 <meta name="country" content="CA"> 26 <meta name="industry" content="film production, entertainment, experimental media, film studio"> 27 <meta name="topic" content="about PROOFOFCONCEPT, experimental film studio, avant-garde cinema, interactive cinema, AI entertainment"> 28 <meta name="page-type" content="about, company profile, studio information"> 29 <meta name="content-category" content="film studio, experimental cinema, company information"> 30 31 <!-- Open Graph --> 32 <meta property="og:title" content="About | PROOFOFCONCEPT"> 33 <meta property="og:description" content="About PROOFOFCONCEPT - A cutting-edge film studio focused on augmented technologies and profound cinematic experiences. Learn about our experimental films, interactive cinema, and AI-powered horror experiences."> 34 <meta property="og:type" content="website"> 35 <meta property="og:url" content="https://proof-of-concept.ca/pages/about"> 36 <meta property="og:locale" content="en_CA"> 37 <meta property="og:image" content="https://proof-of-concept.ca/assets/preview.jpg"> 38 <meta property="og:image:width" content="1200"> 39 <meta property="og:image:height" content="630"> 40 <meta property="og:image:alt" content="About PROOFOFCONCEPT - Experimental Film Production Studio"> 41 <meta property="og:site_name" content="PROOFOFCONCEPT"> 42 <meta property="og:country-name" content="Canada"> 43 44 <!-- Twitter Card --> 45 <meta name="twitter:card" content="summary_large_image"> 46 <meta name="twitter:title" content="About | PROOFOFCONCEPT"> 47 <meta name="twitter:description" content="About PROOFOFCONCEPT - A cutting-edge film studio focused on augmented technologies and profound cinematic experiences. Learn about our experimental films, interactive cinema, and AI-powered horror experiences."> 48 <meta name="twitter:image" content="https://proof-of-concept.ca/assets/preview.jpg"> 49 <meta name="twitter:image:alt" content="About PROOFOFCONCEPT - Experimental Film Production Studio"> 50 <meta name="twitter:site" content="@proof__concept"> 51 <meta name="twitter:creator" content="@proof__concept"> 52 53 <!-- Canonical --> 54 <link rel="canonical" href="https://proof-of-concept.ca/pages/about"> 55 56 <!-- Google Verification --> 57 <meta name="google-site-verification" content="B0SBzeNtFIcGAwAKAt0TEfWatr9beufDv7kBV2qOAKg" /> 58 59 <!-- Structured Data for About Page --> 60 <script type="application/ld+json"> 61 { 62 "@context": "https://schema.org", 63 "@type": "Organization", 64 "name": "PROOFOFCONCEPT Productions", 65 "description": "A cutting-edge film studio focused on augmented technologies and profound cinematic experiences.", 66 "url": "https://proof-of-concept.ca", 67 "logo": "https://proof-of-concept.ca/assets/preview.jpg", 68 "sameAs": [ 69 "https://instagram.com/proof__concept", 70 "https://x.com/proof__concept", 71 "https://github.com/PROOFOFCONCEPT-Productions" 72 ], 73 "address": { 74 "@type": "PostalAddress", 75 "addressCountry": "CA" 76 }, 77 "contactPoint": { 78 "@type": "ContactPoint", 79 "email": "contact@proof-of-concept.ca" 80 } 81 } 82 </script> 83 84 <!-- Favicons --> 85 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/light/favicon-16x16.png" media="(prefers-color-scheme: light)"> 86 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)"> 87 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/light/favicon-32x32.png" media="(prefers-color-scheme: light)"> 88 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)"> 89 <link rel="icon" type="image/x-icon" href="../assets/favicons/light/favicon.ico" media="(prefers-color-scheme: light)"> 90 <link rel="icon" type="image/x-icon" href="../assets/favicons/dark/favicon.ico" media="(prefers-color-scheme: dark)"> 91 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/light/android-chrome-192x192.png" media="(prefers-color-scheme: light)"> 92 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/dark/android-chrome-192x192.png" media="(prefers-color-scheme: dark)"> 93 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/light/android-chrome-512x512.png" media="(prefers-color-scheme: light)"> 94 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/dark/android-chrome-512x512.png" media="(prefers-color-scheme: dark)"> 95 <link rel="apple-touch-icon" href="../assets/favicons/light/apple-touch-icon.png" media="(prefers-color-scheme: light)"> 96 <link rel="apple-touch-icon" href="../assets/favicons/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)"> 97 <link rel="manifest" href="../assets/favicons/light/site.webmanifest" media="(prefers-color-scheme: light)"> 98 <link rel="manifest" href="../assets/favicons/dark/site.webmanifest" media="(prefers-color-scheme: dark)"> 99 100 <!-- External Resources --> 101 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> 102 <link rel="preload" href="../assets/fonts/superbrigadecond.ttf" as="font" type="font/woff2" crossorigin> 103 104 <!-- Stylesheets --> 105 <link rel="stylesheet" href="../assets/css/main.css"> 106 <style> 107 @font-face { 108 font-family: 'NeueHaasGrotesk'; 109 src: url('../assets/fonts/neuehaasgrotdispround-75bold.otf') format('opentype'); 110 font-weight: 700; 111 font-style: normal; 112 font-display: swap; 113 } 114 @font-face { 115 font-family: 'SuperBrigadeCond'; 116 src: url('../assets/fonts/superbrigadecond.ttf') format('truetype'); 117 font-weight: normal; 118 font-style: normal; 119 font-display: swap; 120 } 121 @font-face { 122 font-family: 'Alexandria'; 123 src: url('../assets/fonts/Alexandria.ttf') format('truetype'); 124 font-weight: normal; 125 font-style: normal; 126 font-display: swap; 127 } 128 html, body { 129 height: 100%; 130 background: #fff; 131 color: #111; 132 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 133 margin: 0; 134 padding: 0; 135 min-height: 100vh; 136 scroll-behavior: smooth; 137 overflow-x: hidden; 138 scroll-snap-type: y mandatory; 139 cursor: none !important; 140 } 141 body { 142 opacity: 1; 143 transition: opacity 0.4s; 144 } 145 body.fade { 146 opacity: 0; 147 transition: opacity 0.4s; 148 } 149 a, button, .back-btn, *:hover, *:active, *:focus { 150 cursor: none !important; 151 } 152 * { 153 box-sizing: border-box; 154 user-select: none !important; 155 -webkit-user-select: none !important; 156 -ms-user-select: none !important; 157 -moz-user-select: none !important; 158 -webkit-user-drag: none !important; 159 touch-action: manipulation; 160 } 161 .custom-cursor { 162 position: fixed; 163 width: 20px; 164 height: 20px; 165 background-color: #111; 166 border-radius: 50%; 167 pointer-events: none; 168 z-index: 10000; 169 transition: transform 0.15s, background-color 0.25s; 170 transform: translate(-50%, -50%) scale(1); 171 } 172 .custom-cursor.expand { 173 transform: translate(-50%, -50%) scale(2.5); 174 background-color: #11111144; 175 } 176 .custom-cursor.cursor-hover { 177 transform: translate(-50%, -50%) scale(1.5); 178 background-color: #111111cc; 179 } 180 181 /* Hide custom cursor on mobile devices */ 182 @media (max-width: 768px) { 183 .custom-cursor { 184 display: none !important; 185 } 186 html, body { 187 cursor: none !important; 188 } 189 * { 190 cursor: none !important; 191 } 192 } 193 194 .main-header { 195 position: fixed; 196 top: 0; 197 left: 0; 198 width: 100vw; 199 background: #000; 200 color: #fff; 201 z-index: 9999; 202 display: flex; 203 flex-direction: row; 204 align-items: center; 205 justify-content: center; 206 padding: 0.4rem 0 0.2rem 0; 207 border-bottom: 1px solid #222; 208 min-height: 35px; 209 } 210 .main-header-title { 211 font-family: 'SuperBrigadeCond', sans-serif; 212 font-size: 1.1rem; 213 letter-spacing: 0.05em; 214 text-align: center; 215 font-weight: bold; 216 margin: 0 auto; 217 position: absolute; 218 left: 50%; 219 transform: translateX(-50%); 220 width: auto; 221 } 222 223 .hamburger-icon { 224 position: absolute; 225 left: 1rem; 226 top: 50%; 227 transform: translateY(-50%); 228 color: #fff; 229 font-size: 1.2rem; 230 cursor: pointer; 231 z-index: 1000; 232 } 233 234 .hamburger-icon:hover { 235 opacity: 0.8; 236 } 237 238 /* Side Menu Styles */ 239 .side-menu { 240 position: fixed; 241 top: 0; 242 left: -240px; 243 width: 240px; 244 height: 100vh; 245 background: #fff; 246 color: #000; 247 z-index: 10000; 248 transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); 249 display: flex; 250 flex-direction: column; 251 border-right: 1px solid #ddd; 252 } 253 254 .side-menu.active { 255 left: 0; 256 } 257 258 .side-menu-header { 259 display: flex; 260 justify-content: flex-start; 261 align-items: center; 262 padding: 1rem 1.2rem; 263 min-height: 35px; 264 } 265 266 .side-menu-close { 267 cursor: pointer; 268 font-size: 1.3rem; 269 color: #000; 270 transition: opacity 0.2s ease; 271 } 272 273 .side-menu-close:hover { 274 opacity: 0.7; 275 } 276 277 .side-menu-nav { 278 flex: 1; 279 padding: 1rem 1rem; 280 display: flex; 281 flex-direction: column; 282 gap: 0.8rem; 283 } 284 285 .side-menu-link { 286 color: #000; 287 text-decoration: none; 288 font-size: 1rem; 289 font-weight: 600; 290 font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Ubuntu Mono', 'DejaVu Sans Mono', monospace; 291 transition: all 0.2s ease; 292 padding: 0.3rem 0; 293 letter-spacing: 0.02em; 294 } 295 296 .side-menu-link:hover { 297 color: #333; 298 text-decoration: underline; 299 } 300 301 .menu-spacer { 302 height: 0.5rem; 303 } 304 305 .side-menu-footer { 306 padding: 1rem; 307 border-top: 1px solid #ddd; 308 } 309 310 .side-menu-bottom-nav { 311 display: flex; 312 flex-direction: column; 313 gap: 0.3rem; 314 margin-bottom: 1rem; 315 } 316 317 .side-menu-bottom-link { 318 color: #000; 319 text-decoration: none; 320 font-size: 0.9rem; 321 font-weight: 500; 322 font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Ubuntu Mono', 'DejaVu Sans Mono', monospace; 323 transition: all 0.2s ease; 324 padding: 0.2rem 0; 325 letter-spacing: 0.01em; 326 } 327 328 .side-menu-bottom-link:hover { 329 color: #333; 330 text-decoration: underline; 331 } 332 333 .side-menu-social { 334 display: flex; 335 gap: 0.6rem; 336 margin-bottom: 1rem; 337 justify-content: flex-start; 338 } 339 340 .side-menu-social-link { 341 color: #000; 342 font-size: 1.2rem; 343 transition: opacity 0.2s ease; 344 } 345 346 .side-menu-social-link:hover { 347 opacity: 0.7; 348 } 349 350 .side-menu-email { 351 text-align: center; 352 } 353 354 .side-menu-email a { 355 color: #000; 356 text-decoration: none; 357 font-size: 0.9rem; 358 transition: opacity 0.2s ease; 359 } 360 361 .side-menu-email a:hover { 362 opacity: 0.7; 363 } 364 365 .side-menu-overlay { 366 position: fixed; 367 top: 0; 368 left: 0; 369 width: 100vw; 370 height: 100vh; 371 background: rgba(0, 0, 0, 0.5); 372 z-index: 9999; 373 opacity: 0; 374 visibility: hidden; 375 transition: all 0.3s ease; 376 } 377 378 .side-menu-overlay.active { 379 opacity: 1; 380 visibility: visible; 381 } 382 383 384 385 .about-section { 386 min-height: 100vh; 387 width: 100vw; 388 display: flex; 389 flex-direction: column; 390 align-items: center; 391 justify-content: flex-start; 392 padding-top: 2.2rem; 393 padding-bottom: 2.7rem; 394 box-sizing: border-box; 395 position: relative; 396 scroll-snap-align: start; 397 } 398 399 .about-hero { 400 display: flex; 401 flex-direction: column; 402 align-items: center; 403 justify-content: center; 404 width: 100vw; 405 padding: 4vw 8vw 4vw 8vw; 406 text-align: center; 407 } 408 409 .about-title { 410 font-family: 'SuperBrigadeCond', sans-serif; 411 font-size: 4vw; 412 font-weight: 900; 413 letter-spacing: -0.01em; 414 margin-bottom: 1vw; 415 line-height: 1.05; 416 color: #111; 417 } 418 419 .about-subtitle { 420 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 421 font-size: 1.5vw; 422 font-weight: 600; 423 color: #666; 424 margin-bottom: 3vw; 425 line-height: 1.3; 426 max-width: 60vw; 427 } 428 429 .about-container { 430 width: 100%; 431 max-width: 900px; 432 padding: 0 8vw; 433 } 434 435 .about-content { 436 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 437 font-size: 1.1vw; 438 line-height: 1.7; 439 color: #333; 440 margin-bottom: 4vw; 441 } 442 443 .about-content h2 { 444 font-family: 'SuperBrigadeCond', sans-serif; 445 font-size: 2.5vw; 446 font-weight: 900; 447 color: #111; 448 margin: 3vw 0 1.5vw 0; 449 letter-spacing: -0.01em; 450 } 451 452 .about-content h3 { 453 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 454 font-size: 1.8vw; 455 font-weight: 700; 456 color: #111; 457 margin: 2.5vw 0 1vw 0; 458 } 459 460 .about-content p { 461 margin-bottom: 1.5vw; 462 } 463 464 .about-content blockquote { 465 border-left: 4px solid #111; 466 padding-left: 2vw; 467 margin: 2vw 0; 468 font-style: italic; 469 color: #555; 470 font-size: 1.2vw; 471 } 472 473 .team-section { 474 background: #f8f8f8; 475 padding: 4vw 8vw; 476 margin: 4vw 0; 477 border-radius: 1vw; 478 } 479 480 .team-member { 481 display: flex; 482 align-items: center; 483 margin-bottom: 2vw; 484 gap: 2vw; 485 } 486 487 .team-member img { 488 width: 8vw; 489 height: 8vw; 490 border-radius: 50%; 491 object-fit: cover; 492 } 493 494 .team-member-info h4 { 495 font-family: 'SuperBrigadeCond', sans-serif; 496 font-size: 1.5vw; 497 margin-bottom: 0.5vw; 498 color: #111; 499 } 500 501 .team-member-info p { 502 font-size: 1vw; 503 color: #666; 504 margin: 0; 505 } 506 507 .back-btn { 508 display: block; 509 margin: 2.5rem auto 0 auto; 510 background: #111; 511 color: #fff; 512 border: 2px solid #111; 513 border-radius: 0.8vw; 514 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 515 font-size: 1.1rem; 516 font-weight: 800; 517 padding: 0.8rem 2rem; 518 box-shadow: 0 4px 16px rgba(0,0,0,0.15); 519 cursor: pointer; 520 text-decoration: none; 521 transition: all 0.3s ease; 522 opacity: 1; 523 position: relative; 524 z-index: 10; 525 text-transform: uppercase; 526 letter-spacing: 0.05em; 527 } 528 .back-btn:hover { 529 background: #fff; 530 color: #111; 531 border: 2px solid #111; 532 opacity: 1; 533 transform: translateY(-2px); 534 box-shadow: 0 6px 20px rgba(0,0,0,0.2); 535 } 536 537 /* Mobile Responsive Styles */ 538 @media (max-width: 900px) { 539 .main-header-title { font-size: 1.5rem; } 540 .about-section { padding-top: 2.7rem; padding-bottom: 1.5rem; } 541 .about-hero { padding: 6vw 4vw 3vw 4vw; } 542 .about-title { font-size: 2.5rem; } 543 .about-subtitle { font-size: 1.2rem; max-width: 100%; } 544 .about-container { padding: 0 4vw; } 545 .about-content { font-size: 1.1rem; } 546 .about-content h2 { font-size: 2rem; } 547 .about-content h3 { font-size: 1.5rem; } 548 .about-content blockquote { font-size: 1.1rem; } 549 .team-section { padding: 3rem 4vw; } 550 .team-member img { width: 4rem; height: 4rem; } 551 .team-member-info h4 { font-size: 1.2rem; } 552 .team-member-info p { font-size: 0.9rem; } 553 .back-btn { 554 font-size: 1rem; 555 padding: 0.8rem 2rem; 556 transition: none !important; 557 } 558 .back-btn:hover { 559 background: #111 !important; 560 color: #fff !important; 561 border: 2px solid #111 !important; 562 box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important; 563 font-size: 1rem !important; 564 padding: 0.8rem 2rem !important; 565 } 566 } 567 568 @media (max-width: 600px) { 569 .main-header-title { font-size: 1.5rem; } 570 .about-section { 571 padding-top: 2.5rem; 572 padding-bottom: 2rem; 573 min-height: 100vh; 574 display: flex; 575 flex-direction: column; 576 align-items: center; 577 } 578 .about-hero { padding: 8vw 4vw 4vw 4vw; } 579 .about-title { 580 font-size: 2rem; 581 font-weight: 900; 582 margin-bottom: 1rem; 583 line-height: 1.1; 584 } 585 .about-subtitle { 586 font-size: 1.1rem; 587 font-weight: 600; 588 margin-bottom: 2rem; 589 line-height: 1.4; 590 } 591 .about-container { padding: 0 4vw; } 592 .about-content { font-size: 1rem; } 593 .about-content h2 { font-size: 1.8rem; } 594 .about-content h3 { font-size: 1.4rem; } 595 .about-content blockquote { font-size: 1rem; } 596 .team-section { padding: 2rem 4vw; } 597 .team-member { flex-direction: column; text-align: center; gap: 1rem; } 598 .team-member img { width: 5rem; height: 5rem; } 599 .team-member-info h4 { font-size: 1.1rem; } 600 .team-member-info p { font-size: 0.9rem; } 601 .back-btn { 602 font-size: 1.2rem; 603 padding: 1rem 2.2rem; 604 margin: 3rem auto 0 auto; 605 width: fit-content; 606 min-width: 120px; 607 max-width: 80vw; 608 display: block; 609 border-radius: 2rem !important; 610 text-align: center; 611 text-transform: uppercase; 612 transition: none !important; 613 } 614 .back-btn:hover { 615 background: #fff !important; 616 color: #111 !important; 617 border: 1.5px solid #111 !important; 618 opacity: 0.92 !important; 619 font-size: 1.2rem !important; 620 padding: 1rem 2.2rem !important; 621 } 622 } 623 624 /* Title Image Styles */ 625 .about-title-image { 626 width: 100%; 627 max-width: 800px; 628 height: 400px; 629 object-fit: cover; 630 border-radius: 20px; 631 margin: 40px auto 20px auto; 632 display: block; 633 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); 634 transition: transform 0.3s ease, box-shadow 0.3s ease; 635 } 636 637 .about-title-image:hover { 638 transform: translateY(-5px); 639 box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); 640 } 641 642 /* Social Icons Styles */ 643 .social-icons { 644 display: flex; 645 gap: 15px; 646 margin-top: 15px; 647 align-items: center; 648 } 649 650 .social-icon { 651 width: 32px; 652 height: 32px; 653 border-radius: 50%; 654 background: #111; 655 color: #fff; 656 display: flex; 657 align-items: center; 658 justify-content: center; 659 text-decoration: none; 660 transition: all 0.2s ease; 661 font-size: 14px; 662 border: 1px solid #111; 663 } 664 665 .social-icon:hover { 666 background: #fff; 667 color: #111; 668 transform: translateY(-1px); 669 } 670 671 /* Info Section Styles */ 672 .info-section { 673 background: #fff; 674 color: #111; 675 min-height: 33vh; 676 width: 100vw; 677 display: flex; 678 align-items: center; 679 justify-content: center; 680 padding: 4vw 0; 681 margin-bottom: 0; 682 } 683 684 .info-content { 685 width: 90vw; 686 max-width: 1200px; 687 display: flex; 688 flex-direction: row; 689 justify-content: space-between; 690 align-items: flex-start; 691 gap: 2.5vw; 692 margin: 0 auto; 693 padding: 4vw 0; 694 } 695 696 .info-left, .info-right, .info-center { 697 flex: 1 1 0; 698 display: flex; 699 flex-direction: column; 700 align-items: flex-start; 701 min-width: 0; 702 } 703 704 .info-header { 705 font-size: 2.2vw; 706 font-family: 'SuperBrigadeCond', sans-serif; 707 font-weight: 900; 708 margin-bottom: 1vw; 709 letter-spacing: 0.01em; 710 white-space: nowrap; 711 } 712 713 .info-paragraph { 714 font-size: 0.95vw; 715 font-family: 'Alexandria', sans-serif; 716 font-weight: 500; 717 margin-bottom: 0; 718 line-height: 1.5; 719 max-width: 90%; 720 color: #111; 721 } 722 723 .info-email { 724 font-size: 0.95vw; 725 font-family: 'Alexandria', sans-serif; 726 font-weight: 500; 727 margin-bottom: 1vw; 728 word-break: break-all; 729 color: #111; 730 } 731 732 .info-icons { 733 display: flex; 734 flex-direction: row; 735 gap: 1.2vw; 736 align-items: center; 737 } 738 739 .info-icon { 740 font-family: 'Alexandria', sans-serif; 741 font-weight: 500; 742 font-size: 0.95vw; 743 } 744 745 .info-icon i { 746 font-size: 1.5vw; 747 color: #111; 748 transition: color 0.2s; 749 } 750 751 .info-icon:hover i { 752 color: #666; 753 } 754 755 .info-links { 756 display: flex; 757 flex-direction: column; 758 gap: 0.5vw; 759 margin-top: 0; 760 } 761 762 .info-link { 763 line-height: 1.5; 764 font-family: 'Alexandria', sans-serif; 765 font-size: 0.95vw; 766 font-weight: 500; 767 color: #111; 768 text-decoration: none; 769 transition: color 0.2s ease; 770 text-transform: none; 771 letter-spacing: normal; 772 line-height: 1.5; 773 } 774 775 .info-link:hover { 776 color: #666; 777 } 778 779 /* Newsletter Section - Integrated with footer */ 780 .info-newsletter { 781 flex: 1 1 0; 782 display: flex; 783 flex-direction: column; 784 align-items: flex-start; 785 min-width: 0; 786 } 787 788 .info-newsletter .info-header { 789 font-size: 1.8vw; 790 white-space: nowrap; 791 overflow: hidden; 792 text-overflow: ellipsis; 793 margin-left: 0; 794 padding-left: 0; 795 } 796 797 .newsletter-desc { 798 font-size: 0.95vw; 799 font-family: 'Alexandria', sans-serif; 800 font-weight: 500; 801 margin-bottom: 1vw; 802 line-height: 1.5; 803 max-width: 90%; 804 color: #fff; 805 } 806 807 .newsletter-form { 808 display: flex; 809 flex-direction: column; 810 gap: 1.2vw; 811 margin-bottom: 0.8vw; 812 width: 100%; 813 position: relative; 814 } 815 816 .newsletter-input { 817 padding: 0.8vw 1vw; 818 border: 2px solid #e0e0e0; 819 border-radius: 8px; 820 background: #fff; 821 font-size: 0.9vw; 822 font-family: 'Alexandria', sans-serif; 823 font-weight: 500; 824 width: 100%; 825 max-width: 220px; 826 transition: all 0.3s ease; 827 color: #111; 828 letter-spacing: 0.02em; 829 } 830 831 .newsletter-input::placeholder { 832 color: #999; 833 font-weight: 400; 834 opacity: 0.8; 835 } 836 837 .newsletter-input:focus { 838 outline: none; 839 border-color: #111; 840 background: #fff; 841 box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1); 842 } 843 844 .newsletter-input:hover { 845 border-color: #999; 846 background: #fff; 847 } 848 849 .newsletter-button { 850 background: transparent; 851 color: #111; 852 border: 2px solid #111; 853 border-radius: 0; 854 padding: 0.6vw 1.2vw; 855 font-size: 0.85vw; 856 font-weight: 700; 857 font-family: 'SuperBrigadeCond', sans-serif; 858 cursor: pointer; 859 transition: all 0.3s ease; 860 text-transform: uppercase; 861 letter-spacing: 0.08em; 862 width: fit-content; 863 position: relative; 864 overflow: hidden; 865 } 866 867 .newsletter-button::before { 868 content: ''; 869 position: absolute; 870 top: 0; 871 left: -100%; 872 width: 100%; 873 height: 100%; 874 background: #111; 875 transition: left 0.3s ease; 876 z-index: -1; 877 } 878 879 .newsletter-button:hover { 880 color: #fff; 881 transform: translateY(-1px); 882 } 883 884 .newsletter-button:hover::before { 885 left: 0; 886 } 887 888 .newsletter-button:active { 889 transform: translateY(0); 890 } 891 892 .newsletter-button.thank-you { 893 background: #111; 894 color: #fff; 895 border-color: #111; 896 } 897 898 .newsletter-button.thank-you::before { 899 left: 0; 900 } 901 902 .newsletter-note { 903 font-size: 0.75vw; 904 color: #666; 905 margin: 0; 906 font-family: 'Alexandria', sans-serif; 907 } 908 909 /* Mobile Responsive Styles for Info Section */ 910 @media (max-width: 900px) { 911 .info-content { 912 flex-direction: column; 913 gap: 1.5vw; 914 align-items: stretch; 915 } 916 .info-header { 917 font-size: 1.5rem; 918 } 919 .info-paragraph, .info-email { 920 font-size: 1rem; 921 } 922 .info-section { 923 min-height: 35vh; 924 padding: 0 0 2vw 0; 925 } 926 .info-content { 927 padding: 6vw 0 2vw 0; 928 } 929 .info-icons { 930 gap: 2vw; 931 } 932 .info-icon svg { 933 width: 32px; 934 height: 32px; 935 } 936 .info-links { 937 margin-top: 1rem; 938 gap: 0.3rem; 939 } 940 .info-link { 941 line-height: 1.5; 942 font-size: 0.9rem; 943 } 944 945 .newsletter-form { 946 flex-direction: column; 947 gap: 0.8rem; 948 } 949 950 .newsletter-input { 951 width: 100%; 952 max-width: 250px; 953 padding: 0.8rem; 954 font-size: 1rem; 955 border-radius: 8px; 956 } 957 958 .newsletter-button { 959 width: fit-content; 960 padding: 0.8rem 1.5rem; 961 font-size: 1rem; 962 } 963 964 .newsletter-desc { 965 font-size: 1rem; 966 margin-bottom: 1rem; 967 } 968 969 .newsletter-note { 970 font-size: 0.8rem; 971 } 972 } 973 974 @media (max-width: 600px) { 975 .info-content { 976 grid-template-columns: 1fr; 977 gap: 1.5rem; 978 text-align: center; 979 } 980 .info-left, .info-right, .info-center, .info-newsletter { 981 align-items: center; 982 } 983 .info-header { 984 font-size: 1.2rem; 985 margin-bottom: 0.8rem; 986 } 987 .info-paragraph, .info-email { 988 font-size: 0.9rem; 989 } 990 .info-link { 991 font-size: 0.9rem; 992 } 993 .info-icons { 994 gap: 0.8rem; 995 margin-top: 0.8rem; 996 } 997 .info-icon { 998 width: 2.5rem; 999 height: 2.5rem; 1000 font-size: 1rem; 1001 } 1002 } 1003 </style> 1004 </head> 1005 <body> 1006 <div class="custom-cursor" id="cursor"></div> 1007 <header class="main-header"> 1008 <a href="../index.html" class="main-header-title" style="text-decoration: none; color: inherit;">PROOFOFCONCEPT</a> 1009 <div class="hamburger-icon"> 1010 <i class="fas fa-bars"></i> 1011 </div> 1012 </header> 1013 1014 <!-- Side Menu --> 1015 <div class="side-menu" id="side-menu"> 1016 <div class="side-menu-header"> 1017 <div class="side-menu-close"> 1018 <i class="fas fa-times"></i> 1019 </div> 1020 </div> 1021 <nav class="side-menu-nav"> 1022 <a href="../films/streaming.html" class="side-menu-link">WATCH</a> 1023 <a href="../blog/" class="side-menu-link">READ</a> 1024 <a href="store.html" class="side-menu-link">SHOP</a> 1025 <div class="menu-spacer"></div> 1026 <a href="contribute.html" class="side-menu-link">CONTRIBUTE</a> 1027 <a href="digifest" class="side-menu-link">DIGIFEST</a> 1028 <div class="menu-spacer"></div> 1029 <a href="about" class="side-menu-link">ABOUT</a> 1030 <a href="faq" class="side-menu-link">FAQ</a> 1031 </nav> 1032 <div class="side-menu-footer"> 1033 <div class="side-menu-bottom-nav"> 1034 <a href="terms.html" class="side-menu-link side-menu-bottom-link">TERMS OF USE</a> 1035 <a href="privacy" class="side-menu-link side-menu-bottom-link">PRIVACY POLICY</a> 1036 </div> 1037 <div class="side-menu-social"> 1038 <a href="mailto:contact@proof-of-concept.ca" class="side-menu-social-link"> 1039 <i class="fas fa-envelope"></i> 1040 </a> 1041 <a href="https://instagram.com/proof__concept" target="_blank" class="side-menu-social-link"> 1042 <i class="fab fa-instagram"></i> 1043 </a> 1044 <a href="https://x.com/proof__concept" target="_blank" class="side-menu-social-link"> 1045 <i class="fab fa-x-twitter"></i> 1046 </a> 1047 <a href="https://github.com/PROOFOFCONCEPT-Productions" target="_blank" class="side-menu-social-link"> 1048 <i class="fab fa-github"></i> 1049 </a> 1050 </div> 1051 </div> 1052 </div> 1053 1054 <!-- Side Menu Overlay --> 1055 <div class="side-menu-overlay" id="side-menu-overlay"></div> 1056 1057 1058 <main class="about-section" id="main-section"> 1059 <div class="about-hero"> 1060 <div class="about-title">About PROOFOFCONCEPT</div> 1061 <div class="about-subtitle">Pushing the boundaries of experimental film through technology and innovation</div> 1062 <img src="assets/images/lovers.jpg" alt="PROOFOFCONCEPT Title Image" class="about-title-image"> 1063 </div> 1064 1065 <div class="about-container"> 1066 <div class="about-content"> 1067 <h2>Our Mission</h2> 1068 <p>PROOFOFCONCEPT is a multidisciplinary media studio dedicated to creating groundbreaking film experiences that challenge conventional storytelling. We believe in the power of technology to transform how audiences engage with narrative, creating immersive experiences that blur the line between viewer and participant.</p> 1069 1070 <h2>What We Do</h2> 1071 <p>We specialize in experimental film production that integrates cutting-edge technology with innovative storytelling techniques. Our projects range from interactive short films to community-driven experiences, all designed to push the boundaries of what's possible in cinema.</p> 1072 1073 <h3>Experimental Filmmaking</h3> 1074 <p>Our approach to filmmaking goes beyond traditional narrative structures. We explore new forms of storytelling through augmented reality, real-time processing, and interactive elements that respond to audience participation.</p> 1075 1076 <h3>Technology Integration</h3> 1077 <p>We develop custom software solutions and integrate emerging technologies to create unique viewing experiences. From real-time video processing to AR-enhanced storytelling, our technical innovations drive our creative vision.</p> 1078 1079 <h3>Community Engagement</h3> 1080 <p>We believe in the power of collective creativity. Projects like #COMMUNITYFILM demonstrate our commitment to democratizing the filmmaking process, allowing audiences to become active participants in the creative journey.</p> 1081 1082 <blockquote> 1083 "We're not just making films—we're creating new ways of experiencing stories that challenge everything you thought you knew about cinema." 1084 </blockquote> 1085 1086 <h2>Our Approach</h2> 1087 <p>We approach each project as an experiment in possibility. Our process involves rapid prototyping, iterative development, and constant collaboration with our community. We believe that the best ideas come from pushing boundaries and embracing the unknown.</p> 1088 1089 <h3>Innovation First</h3> 1090 <p>Every project starts with a question: "What if we could do this differently?" This mindset drives us to explore new technologies and storytelling methods that haven't been tried before.</p> 1091 1092 <h3>Community-Driven</h3> 1093 <p>We see our audience as collaborators, not just viewers. Their feedback, participation, and creative input shape our projects in real-time, creating experiences that are truly co-created.</p> 1094 1095 <h3>Technical Excellence</h3> 1096 <p>While we push creative boundaries, we maintain the highest standards of technical quality. Our custom software solutions and technical innovations ensure that our experimental concepts translate into seamless user experiences.</p> 1097 1098 <div class="team-section"> 1099 <div class="team-member"> 1100 <img src="assets/profile.jpg" alt="Jack O'Keeffe"> 1101 <div class="team-member-info"> 1102 <h4>Jack O'Keeffe</h4> 1103 <p>Founder & Creative Director</p> 1104 <div class="social-icons"> 1105 <a href="https://jackokeeffe.site" target="_blank" rel="noopener" class="social-icon personal-site" title="Personal Website" aria-label="Personal Website"> 1106 <i class="fas fa-globe"></i> 1107 </a> 1108 <a href="https://instagram.com/_jackokeeffe" target="_blank" rel="noopener" class="social-icon instagram" title="Instagram" aria-label="Instagram"> 1109 <i class="fab fa-instagram"></i> 1110 </a> 1111 <a href="https://twitter.com/jckokeeffe" target="_blank" rel="noopener" class="social-icon twitter" title="Twitter" aria-label="Twitter"> 1112 <i class="fab fa-twitter"></i> 1113 </a> 1114 </div> 1115 </div> 1116 </div> 1117 </div> 1118 1119 <h2>Looking Forward</h2> 1120 <p>As we continue to explore the intersection of technology and storytelling, we're excited about the possibilities that lie ahead. We're constantly researching new technologies, experimenting with new forms of narrative, and finding new ways to engage our community.</p> 1121 1122 <p>We invite you to join us on this journey of exploration and innovation. Whether you're interested in our projects, want to collaborate, or simply want to see what's possible when we push the boundaries of film, we'd love to hear from you.</p> 1123 1124 <p>Get in touch at <a href="mailto:contact@proof-of-concept.ca" style="color: #111; text-decoration: underline;">contact@proof-of-concept.ca</a> to learn more about our work or discuss potential collaborations.</p> 1125 </div> 1126 </div> 1127 1128 </main> 1129 1130 <!-- INFO Section --> 1131 <section class="info-section"> 1132 <div class="info-content"> 1133 <div class="info-left"> 1134 <h2 class="info-header">ABOUT</h2> 1135 <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> 1136 </div> 1137 1138 <div class="info-center"> 1139 <h2 class="info-header">INFO</h2> 1140 <div class="info-links"> 1141 <a href="../blog/" class="info-link">Articles</a> 1142 <a href="privacy" class="info-link">Privacy Policy</a> 1143 <a href="about" class="info-link">About</a> 1144 <a href="faq" class="info-link">FAQ</a> 1145 </div> 1146 </div> 1147 1148 <!-- Newsletter Signup --> 1149 <div class="info-newsletter"> 1150 <h2 class="info-header">STAY UPDATED</h2> 1151 <form class="newsletter-form" id="newsletter-form"> 1152 <input type="email" class="newsletter-input" placeholder="Enter your email" required> 1153 <button type="submit" class="newsletter-button">Subscribe</button> 1154 </form> 1155 </div> 1156 1157 <div class="info-right"> 1158 <h2 class="info-header">CONTACT</h2> 1159 <div class="info-email"><a href="mailto:contact@proof-of-concept.ca">contact@proof-of-concept.ca</a></div> 1160 <div class="info-icons"> 1161 <a href="mailto:contact@proof-of-concept.ca" class="info-icon" title="Email" aria-label="Email"> 1162 <i class="fa-solid fa-envelope"></i> 1163 </a> 1164 <a href="https://instagram.com/proof__concept" class="info-icon" title="Instagram" aria-label="Instagram" target="_blank"> 1165 <i class="fa-brands fa-instagram"></i> 1166 </a> 1167 <a href="https://x.com/proof__concept" class="info-icon" title="X (Twitter)" aria-label="X (Twitter)" target="_blank"> 1168 <i class="fa-brands fa-x-twitter"></i> 1169 </a> 1170 <a href="https://github.com/PROOFOFCONCEPT-Productions" class="info-icon" title="GitHub" aria-label="GitHub" target="_blank"> 1171 <i class="fa-brands fa-github"></i> 1172 </a> 1173 </div> 1174 </div> 1175 </div> 1176 </section> 1177 1178 <script> 1179 // Custom cursor 1180 const cursor = document.getElementById("cursor"); 1181 document.addEventListener("mousemove", e => { 1182 cursor.style.top = e.clientY + "px"; 1183 cursor.style.left = e.clientX + "px"; 1184 }); 1185 document.addEventListener("mousedown", () => { 1186 cursor.classList.add("expand"); 1187 }); 1188 document.addEventListener("mouseup", () => { 1189 cursor.classList.remove("expand"); 1190 }); 1191 1192 // Custom cursor hover effect for links and buttons 1193 const allLinks = document.querySelectorAll('a, button'); 1194 allLinks.forEach(link => { 1195 link.addEventListener('mouseenter', () => { 1196 cursor.classList.add('cursor-hover'); 1197 }); 1198 link.addEventListener('mouseleave', () => { 1199 cursor.classList.remove('cursor-hover'); 1200 }); 1201 }); 1202 1203 // Side Menu Functionality 1204 document.addEventListener('DOMContentLoaded', function() { 1205 const hamburger = document.querySelector('.hamburger-icon'); 1206 const sideMenu = document.getElementById('side-menu'); 1207 const sideMenuOverlay = document.getElementById('side-menu-overlay'); 1208 const closeButton = document.querySelector('.side-menu-close'); 1209 1210 // Open side menu 1211 hamburger.addEventListener('click', function() { 1212 sideMenu.classList.add('active'); 1213 sideMenuOverlay.classList.add('active'); 1214 document.body.style.overflow = 'hidden'; 1215 }); 1216 1217 // Close side menu 1218 function closeSideMenu() { 1219 sideMenu.classList.remove('active'); 1220 sideMenuOverlay.classList.remove('active'); 1221 document.body.style.overflow = ''; 1222 } 1223 1224 closeButton.addEventListener('click', closeSideMenu); 1225 sideMenuOverlay.addEventListener('click', closeSideMenu); 1226 1227 // Close on escape key 1228 document.addEventListener('keydown', function(e) { 1229 if (e.key === 'Escape') { 1230 closeSideMenu(); 1231 } 1232 }); 1233 }); 1234 1235 // Newsletter form handling 1236 document.getElementById('newsletter-form').addEventListener('submit', function(e) { 1237 e.preventDefault(); 1238 const email = this.querySelector('.newsletter-input').value; 1239 const button = this.querySelector('.newsletter-button'); 1240 const input = this.querySelector('.newsletter-input'); 1241 1242 // Here you would typically send the email to your backend 1243 // For now, we'll show a smooth button transition 1244 1245 // Disable the input and button 1246 input.disabled = true; 1247 button.disabled = true; 1248 1249 // Smoothly transition button to "Thank you" 1250 button.textContent = 'Thank you!'; 1251 button.classList.add('thank-you'); 1252 1253 // Clear the form 1254 input.value = ''; 1255 1256 // Button stays as "Thank you" until page refresh 1257 // Form remains disabled to prevent multiple submissions 1258 }); 1259 </script> 1260 1261 <!-- Scripts --> 1262 <script src="../assets/js/main.js"></script> 1263 </body> 1264 </html>