store.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>Store | PROOFOFCONCEPT</title> 7 8 <!-- Meta Tags --> 9 <meta name="description" content="Shop #COMMUNITYFILM merchandise from PROOFOFCONCEPT. Limited edition shirts and crop tops featuring our community film project designs."> 10 <meta name="keywords" content="#COMMUNITYFILM, merchandise, t-shirts, crop tops, film merchandise, PROOFOFCONCEPT store, community film, experimental cinema, Canadian film"> 11 <meta name="author" content="PROOFOFCONCEPT Productions"> 12 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"> 13 <meta name="theme-color" content="#EFF0EC"> 14 <meta name="color-scheme" content="light dark"> 15 <meta name="format-detection" content="telephone=no"> 16 <meta name="mobile-web-app-capable" content="yes"> 17 <meta name="apple-mobile-web-app-capable" content="yes"> 18 <meta name="apple-mobile-web-app-status-bar-style" content="default"> 19 <meta name="apple-mobile-web-app-title" content="Store - PROOFOFCONCEPT"> 20 21 <!-- Favicons --> 22 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/light/favicon-16x16.png" media="(prefers-color-scheme: light)"> 23 <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicons/dark/favicon-16x16.png" media="(prefers-color-scheme: dark)"> 24 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/light/favicon-32x32.png" media="(prefers-color-scheme: light)"> 25 <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicons/dark/favicon-32x32.png" media="(prefers-color-scheme: dark)"> 26 <link rel="icon" type="image/x-icon" href="../assets/favicons/light/favicon.ico" media="(prefers-color-scheme: light)"> 27 <link rel="icon" type="image/x-icon" href="../assets/favicons/dark/favicon.ico" media="(prefers-color-scheme: dark)"> 28 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/light/android-chrome-192x192.png" media="(prefers-color-scheme: light)"> 29 <link rel="icon" type="image/png" sizes="192x192" href="../assets/favicons/dark/android-chrome-192x192.png" media="(prefers-color-scheme: dark)"> 30 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/light/android-chrome-512x512.png" media="(prefers-color-scheme: light)"> 31 <link rel="icon" type="image/png" sizes="512x512" href="../assets/favicons/dark/android-chrome-512x512.png" media="(prefers-color-scheme: dark)"> 32 <link rel="apple-touch-icon" href="../assets/favicons/light/apple-touch-icon.png" media="(prefers-color-scheme: light)"> 33 <link rel="apple-touch-icon" href="../assets/favicons/dark/apple-touch-icon.png" media="(prefers-color-scheme: dark)"> 34 <link rel="manifest" href="../assets/favicons/light/site.webmanifest" media="(prefers-color-scheme: light)"> 35 <link rel="manifest" href="../assets/favicons/dark/site.webmanifest" media="(prefers-color-scheme: dark)"> 36 37 <!-- External Resources --> 38 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> 39 <link rel="preload" href="../assets/fonts/superbrigadecond.ttf" as="font" type="font/woff2" crossorigin> 40 41 <!-- Stylesheets --> 42 <link rel="stylesheet" href="../assets/css/main.css"> 43 <style> 44 @font-face { 45 font-family: 'NeueHaasGrotesk'; 46 src: url('../assets/fonts/neuehaasgrotdispround-75bold.otf') format('opentype'); 47 font-weight: 700; 48 font-style: normal; 49 font-display: swap; 50 } 51 @font-face { 52 font-family: 'SuperBrigadeCond'; 53 src: url('../assets/fonts/superbrigadecond.ttf') format('truetype'); 54 font-weight: normal; 55 font-style: normal; 56 font-display: swap; 57 } 58 59 html, body { 60 height: auto; 61 background: #fff; 62 color: #111; 63 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 64 margin: 0; 65 padding: 0; 66 min-height: 100vh; 67 scroll-behavior: smooth; 68 overflow-x: hidden; 69 cursor: none !important; 70 } 71 72 body { 73 opacity: 1; 74 transition: opacity 0.4s; 75 } 76 77 body.fade { 78 opacity: 0; 79 transition: opacity 0.4s; 80 } 81 82 a, button, *:hover, *:active, *:focus { 83 cursor: none !important; 84 } 85 86 * { 87 box-sizing: border-box; 88 user-select: none !important; 89 -webkit-user-select: none !important; 90 -ms-user-select: none !important; 91 -moz-user-select: none !important; 92 -webkit-user-drag: none !important; 93 touch-action: manipulation; 94 } 95 96 .custom-cursor { 97 position: fixed; 98 width: 20px; 99 height: 20px; 100 background-color: #111; 101 border-radius: 50%; 102 pointer-events: none; 103 z-index: 10003; 104 transition: transform 0.15s, background-color 0.25s; 105 transform: translate(-50%, -50%) scale(1); 106 } 107 108 .custom-cursor.expand { 109 transform: translate(-50%, -50%) scale(2.5); 110 background-color: #11111144; 111 } 112 113 .custom-cursor.cursor-hover { 114 transform: translate(-50%, -50%) scale(1.5); 115 background-color: #111111cc; 116 } 117 118 /* Hide custom cursor on mobile devices */ 119 @media (max-width: 768px) { 120 .custom-cursor { 121 display: none !important; 122 } 123 html, body { 124 cursor: none !important; 125 } 126 * { 127 cursor: none !important; 128 } 129 } 130 131 .main-header { 132 position: fixed; 133 top: 0; 134 left: 0; 135 width: 100vw; 136 background: #000; 137 color: #fff; 138 z-index: 9999; 139 display: flex; 140 flex-direction: row; 141 align-items: center; 142 justify-content: center; 143 padding: 0.4rem 0 0.2rem 0; 144 border-bottom: 1px solid #222; 145 min-height: 35px; 146 } 147 148 .main-header-title { 149 font-family: 'SuperBrigadeCond', sans-serif; 150 font-size: 1.1rem; 151 letter-spacing: 0.05em; 152 text-align: center; 153 font-weight: bold; 154 margin: 0 auto; 155 position: absolute; 156 left: 50%; 157 transform: translateX(-50%); 158 width: auto; 159 } 160 161 .store-section { 162 min-height: auto; 163 width: 100vw; 164 display: flex; 165 flex-direction: column; 166 align-items: center; 167 justify-content: flex-start; 168 padding-top: 4rem; 169 padding-bottom: 2rem; 170 box-sizing: border-box; 171 position: relative; 172 } 173 174 .store-hero { 175 width: 100vw; 176 padding: 4vw 8vw; 177 text-align: center; 178 margin-bottom: 2vw; 179 } 180 181 .store-title { 182 font-family: 'SuperBrigadeCond', sans-serif; 183 font-size: 4vw; 184 font-weight: 900; 185 letter-spacing: -0.01em; 186 margin-bottom: 1vw; 187 line-height: 1.05; 188 color: #111; 189 } 190 191 .store-subtitle { 192 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 193 font-size: 1.9vw; 194 font-weight: 700; 195 color: #111; 196 margin-bottom: 2vw; 197 line-height: 1.1; 198 } 199 200 .store-description { 201 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 202 font-size: 1.2vw; 203 font-weight: 500; 204 color: #666; 205 max-width: 60vw; 206 margin: 0 auto; 207 line-height: 1.4; 208 } 209 210 .products-grid { 211 width: 100vw; 212 padding: 0 8vw; 213 display: grid; 214 grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 215 gap: 3vw; 216 margin-bottom: 4vw; 217 } 218 219 .product-card { 220 background: #fff; 221 border-radius: 1.5vw; 222 overflow: hidden; 223 box-shadow: 0 4px 20px rgba(0,0,0,0.08); 224 border: 1px solid #f0f0f0; 225 transition: all 0.3s ease; 226 cursor: pointer; 227 } 228 229 .product-card:hover { 230 transform: translateY(-8px); 231 box-shadow: 0 12px 40px rgba(0,0,0,0.15); 232 border-color: #111; 233 } 234 235 .product-image { 236 width: 100%; 237 height: 20vw; 238 min-height: 200px; 239 max-height: 300px; 240 overflow: hidden; 241 position: relative; 242 background: #f8f8f8; 243 display: flex; 244 align-items: center; 245 justify-content: center; 246 } 247 248 .product-image img { 249 width: 100%; 250 height: 100%; 251 object-fit: cover; 252 transition: transform 0.3s ease; 253 } 254 255 .product-card:hover .product-image img { 256 transform: scale(1.05); 257 } 258 259 .product-info { 260 padding: 2vw; 261 } 262 263 .product-title { 264 font-family: 'SuperBrigadeCond', sans-serif; 265 font-size: 1.8vw; 266 font-weight: 900; 267 color: #111; 268 margin-bottom: 0.5vw; 269 line-height: 1.2; 270 } 271 272 .product-description { 273 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 274 font-size: 1vw; 275 color: #666; 276 margin-bottom: 1vw; 277 line-height: 1.4; 278 } 279 280 .product-price { 281 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 282 font-size: 1.2vw; 283 font-weight: 700; 284 color: #111; 285 margin-bottom: 1vw; 286 } 287 288 .product-status { 289 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 290 font-size: 0.9vw; 291 color: #999; 292 font-weight: 500; 293 text-transform: uppercase; 294 letter-spacing: 0.05em; 295 } 296 297 /* Info Section Footer Styles */ 298 .info-section { 299 background: #fff; 300 color: #000; 301 min-height: 33vh; 302 height: 33vh; 303 width: 100vw; 304 display: flex; 305 align-items: center; 306 justify-content: center; 307 padding: 0; 308 margin-top: 2rem; 309 } 310 311 .info-content { 312 width: 90vw; 313 max-width: 1200px; 314 display: flex; 315 flex-direction: row; 316 justify-content: space-between; 317 align-items: flex-start; 318 gap: 2.5vw; 319 margin: 0 auto; 320 padding: 4vw 0; 321 } 322 323 .info-left, .info-right, .info-center, .info-newsletter { 324 flex: 1 1 0; 325 display: flex; 326 flex-direction: column; 327 align-items: flex-start; 328 min-width: 0; 329 } 330 331 .info-header { 332 font-size: 2.2vw; 333 font-family: 'SuperBrigadeCond', sans-serif; 334 font-weight: 900; 335 margin-bottom: 1vw; 336 letter-spacing: 0.01em; 337 white-space: nowrap; 338 } 339 340 .info-paragraph { 341 font-size: 0.95vw; 342 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 343 font-weight: 500; 344 margin-bottom: 0; 345 line-height: 1.5; 346 max-width: 90%; 347 } 348 349 .info-links { 350 display: flex; 351 flex-direction: column; 352 gap: 0.5vw; 353 } 354 355 .info-link { 356 color: #111; 357 text-decoration: none; 358 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 359 font-size: 0.95vw; 360 font-weight: 500; 361 transition: color 0.2s; 362 } 363 364 .info-link:hover { 365 color: #666; 366 } 367 368 .info-email { 369 font-size: 0.95vw; 370 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 371 font-weight: 500; 372 margin-bottom: 1vw; 373 word-break: break-all; 374 } 375 376 .info-email a { 377 color: #111; 378 text-decoration: none; 379 font-family: inherit; 380 font-size: inherit; 381 font-weight: inherit; 382 } 383 384 .info-icons { 385 display: flex; 386 flex-direction: row; 387 gap: 1.2vw; 388 align-items: center; 389 } 390 391 .info-icon { 392 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 393 font-weight: 500; 394 font-size: 0.95vw; 395 color: #111; 396 text-decoration: none; 397 transition: color 0.2s; 398 } 399 400 .info-icon:hover { 401 color: #666; 402 } 403 404 .info-icon i { 405 font-size: 1.5vw; 406 color: inherit; 407 transition: color 0.2s; 408 } 409 410 /* Product Modal Styles */ 411 .product-modal { 412 position: fixed; 413 top: 0; 414 left: 0; 415 width: 100vw; 416 height: 100vh; 417 background: rgba(0, 0, 0, 0.9); 418 z-index: 10001; 419 display: none; 420 align-items: center; 421 justify-content: center; 422 padding: 2vw; 423 box-sizing: border-box; 424 } 425 426 .product-modal.active { 427 display: flex; 428 } 429 430 .modal-content { 431 background: #fff; 432 border-radius: 2vw; 433 max-width: 70vw; 434 max-height: 80vh; 435 overflow-y: auto; 436 position: relative; 437 animation: modalSlideIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 438 } 439 440 @keyframes modalSlideIn { 441 from { 442 opacity: 0; 443 transform: translateY(30px) scale(0.95); 444 } 445 to { 446 opacity: 1; 447 transform: translateY(0) scale(1); 448 } 449 } 450 451 .modal-header { 452 padding: 2vw; 453 border-bottom: 1px solid #e0e0e0; 454 display: flex; 455 justify-content: space-between; 456 align-items: center; 457 } 458 459 .modal-title { 460 font-family: 'SuperBrigadeCond', sans-serif; 461 font-size: 2.5vw; 462 font-weight: 900; 463 color: #111; 464 } 465 466 .modal-close { 467 background: none; 468 border: none; 469 font-size: 2vw; 470 color: #666; 471 cursor: pointer; 472 width: 3vw; 473 height: 3vw; 474 min-width: 40px; 475 min-height: 40px; 476 border-radius: 50%; 477 transition: all 0.2s; 478 display: flex; 479 align-items: center; 480 justify-content: center; 481 } 482 483 .modal-close:hover { 484 background: #f0f0f0; 485 color: #111; 486 } 487 488 .modal-body { 489 padding: 2vw; 490 display: flex; 491 gap: 2vw; 492 } 493 494 .modal-left { 495 flex: 1; 496 } 497 498 .modal-right { 499 flex: 1; 500 display: flex; 501 flex-direction: column; 502 gap: 1vw; 503 } 504 505 .modal-image { 506 width: 100%; 507 height: 25vw; 508 min-height: 250px; 509 border-radius: 1vw; 510 overflow: hidden; 511 margin-bottom: 2vw; 512 background: #f8f8f8; 513 display: flex; 514 align-items: center; 515 justify-content: center; 516 } 517 518 .modal-image img { 519 width: 100%; 520 height: 100%; 521 object-fit: cover; 522 } 523 524 .modal-description { 525 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 526 font-size: 1.1vw; 527 line-height: 1.6; 528 color: #333; 529 margin-bottom: 2vw; 530 } 531 532 .modal-details { 533 display: grid; 534 grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 535 gap: 2vw; 536 margin-bottom: 2vw; 537 } 538 539 .detail-item { 540 display: flex; 541 flex-direction: column; 542 gap: 0.5vw; 543 } 544 545 .detail-label { 546 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 547 font-size: 0.9vw; 548 font-weight: 700; 549 color: #666; 550 text-transform: uppercase; 551 letter-spacing: 0.05em; 552 } 553 554 .detail-value { 555 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 556 font-size: 1vw; 557 color: #111; 558 font-weight: 600; 559 } 560 561 562 563 .size-selector { 564 margin-bottom: 2vw; 565 padding: 2vw; 566 border-top: 1px solid #e0e0e0; 567 } 568 569 .size-options { 570 display: flex; 571 gap: 1vw; 572 align-items: center; 573 } 574 575 .size-option { 576 padding: 0.8vw 1.5vw; 577 border: 2px solid #e0e0e0; 578 border-radius: 0.5vw; 579 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 580 font-size: 1vw; 581 font-weight: 700; 582 background: #fff; 583 color: #111; 584 cursor: pointer; 585 transition: all 0.2s; 586 text-transform: uppercase; 587 letter-spacing: 0.05em; 588 min-width: 60px; 589 text-align: center; 590 } 591 592 .size-option:hover { 593 border-color: #111; 594 background: #f8f8f8; 595 } 596 597 .size-option.selected { 598 border-color: #111; 599 background: #111; 600 color: #fff; 601 } 602 603 .size-option.disabled { 604 border-color: #ccc; 605 background: #f5f5f5; 606 color: #999; 607 cursor: not-allowed; 608 } 609 610 611 612 .buy-btn { 613 background: #111; 614 color: #fff; 615 border: none; 616 padding: 0.8vw 1.5vw; 617 border-radius: 0.5vw; 618 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 619 font-size: 0.9vw; 620 font-weight: 700; 621 cursor: pointer; 622 transition: all 0.2s; 623 text-transform: uppercase; 624 letter-spacing: 0.05em; 625 min-width: 120px; 626 } 627 628 .buy-btn:hover { 629 background: #333; 630 transform: translateY(-2px); 631 } 632 633 .buy-btn:disabled { 634 background: #ccc; 635 cursor: not-allowed; 636 transform: none; 637 } 638 639 .buy-btn.sold-out { 640 background: #999; 641 color: #fff; 642 cursor: not-allowed; 643 } 644 645 .buy-btn.sold-out:hover { 646 background: #999; 647 transform: none; 648 } 649 650 /* Newsletter Form Styles */ 651 .newsletter-form { 652 display: flex; 653 gap: 1vw; 654 margin-top: 1vw; 655 } 656 657 .newsletter-input { 658 flex: 1; 659 padding: 0.8vw 1.2vw; 660 border: 2px solid #333; 661 border-radius: 0.5vw; 662 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 663 font-size: 0.9vw; 664 background: #000; 665 color: #fff; 666 transition: border-color 0.2s; 667 } 668 669 .newsletter-input:focus { 670 outline: none; 671 border-color: #fff; 672 } 673 674 .newsletter-input::placeholder { 675 color: #999; 676 } 677 678 .newsletter-button { 679 background: #fff; 680 color: #000; 681 border: none; 682 padding: 0.8vw 1.2vw; 683 border-radius: 0.5vw; 684 font-family: 'NeueHaasGrotesk', Helvetica, Arial, sans-serif; 685 font-size: 0.9vw; 686 font-weight: 700; 687 cursor: pointer; 688 transition: all 0.2s; 689 white-space: nowrap; 690 } 691 692 .newsletter-button:hover { 693 background: #ccc; 694 transform: translateY(-1px); 695 } 696 697 /* Mobile Responsive Styles */ 698 @media (max-width: 900px) { 699 .store-title { font-size: 2.5rem; } 700 .store-subtitle { font-size: 1.5rem; } 701 .store-description { font-size: 1.1rem; max-width: 90vw; } 702 .products-grid { 703 padding: 0 4vw; 704 grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 705 gap: 2rem; 706 } 707 .product-image { height: 25vw; min-height: 180px; } 708 .product-title { font-size: 1.5rem; } 709 .product-description { font-size: 1rem; } 710 .product-price { font-size: 1.1rem; } 711 .product-status { font-size: 0.8rem; } 712 .modal-title { font-size: 2rem; } 713 .modal-close { width: 3rem; height: 3rem; min-width: 40px; min-height: 40px; } 714 .modal-body { flex-direction: column; } 715 .modal-image { height: 35vw; min-height: 200px; } 716 .modal-description { font-size: 1.1rem; } 717 .size-option { font-size: 1rem; padding: 0.8rem 1.5rem; } 718 .buy-btn { font-size: 1rem; padding: 0.8rem 1.5rem; } 719 .newsletter-form { flex-direction: column; gap: 1rem; } 720 .newsletter-input, .newsletter-button { font-size: 1rem; padding: 0.8rem 1.2rem; } 721 722 /* Info section mobile styles */ 723 .info-section { 724 min-height: auto; 725 height: auto; 726 padding: 2rem 0; 727 } 728 .info-content { 729 flex-direction: column; 730 gap: 2rem; 731 padding: 2rem 4vw; 732 } 733 .info-header { font-size: 1.5rem; } 734 .info-paragraph, .info-email, .info-link, .info-icon { font-size: 1rem; } 735 .info-links { gap: 0.5rem; } 736 .info-icons { gap: 1rem; } 737 } 738 739 @media (max-width: 600px) { 740 .store-section { padding-top: 2.5rem; } 741 .store-hero { padding: 2rem 4vw; } 742 .store-title { font-size: 2rem; } 743 .store-subtitle { font-size: 1.3rem; } 744 .store-description { font-size: 1rem; } 745 .products-grid { 746 padding: 0 4vw; 747 grid-template-columns: 1fr; 748 gap: 1.5rem; 749 } 750 .product-image { height: 50vw; min-height: 250px; } 751 .product-info { padding: 1.5rem; } 752 .product-title { font-size: 1.4rem; } 753 .product-description { font-size: 0.9rem; } 754 .product-price { font-size: 1rem; } 755 .modal-content { max-width: 95vw; max-height: 95vh; } 756 .modal-header { padding: 1.5rem; } 757 .modal-title { font-size: 1.8rem; } 758 .modal-close { width: 2.5rem; height: 2.5rem; min-width: 35px; min-height: 35px; } 759 .modal-body { padding: 1.5rem; flex-direction: column; } 760 .modal-image { height: 45vw; min-height: 200px; } 761 .modal-description { font-size: 1rem; } 762 .modal-details { grid-template-columns: 1fr; gap: 1rem; } 763 .detail-label { font-size: 0.8rem; } 764 .detail-value { font-size: 0.9rem; } 765 .size-selector { padding: 1.5rem; } 766 .size-options { flex-wrap: wrap; gap: 0.8rem; } 767 .size-option { width: calc(50% - 0.4rem); font-size: 0.9rem; padding: 0.8rem; } 768 .buy-btn { font-size: 0.9rem; padding: 0.8rem; } 769 .newsletter-form { flex-direction: column; gap: 0.8rem; } 770 .newsletter-input, .newsletter-button { font-size: 0.9rem; padding: 0.8rem; } 771 772 /* Info section mobile styles */ 773 .info-section { 774 padding: 1.5rem 0; 775 margin-top: 1rem; 776 } 777 .info-content { 778 padding: 1.5rem 4vw; 779 gap: 1.5rem; 780 } 781 .info-header { font-size: 1.3rem; } 782 .info-paragraph, .info-email, .info-link, .info-icon { font-size: 0.9rem; } 783 .info-links { gap: 0.4rem; } 784 .info-icons { gap: 0.8rem; } 785 .info-icon i { font-size: 1.2rem; } 786 } 787 </style> 788 </head> 789 <body> 790 <div class="custom-cursor" id="cursor"></div> 791 792 <header class="main-header"> 793 <a href="../index.html" class="main-header-title" style="text-decoration: none; color: inherit;">PROOFOFCONCEPT</a> 794 <div class="hamburger-icon"> 795 <i class="fas fa-bars"></i> 796 </div> 797 </header> 798 799 <!-- Side Menu --> 800 <div class="side-menu" id="side-menu"> 801 <div class="side-menu-header"> 802 <div class="side-menu-close"> 803 <i class="fas fa-times"></i> 804 </div> 805 </div> 806 <nav class="side-menu-nav"> 807 <a href="../films/streaming.html" class="side-menu-link">WATCH</a> 808 <a href="../blog/" class="side-menu-link">READ</a> 809 <a href="../pages/store.html" class="side-menu-link">SHOP</a> 810 <div class="menu-spacer"></div> 811 <a href="contribute.html" class="side-menu-link">CONTRIBUTE</a> 812 <a href="../pages/digifest.html" class="side-menu-link">DIGIFEST</a> 813 <div class="menu-spacer"></div> 814 <a href="../pages/about.html" class="side-menu-link">ABOUT</a> 815 <a href="../pages/faq.html" class="side-menu-link">FAQ</a> 816 </nav> 817 <div class="side-menu-footer"> 818 <div class="side-menu-bottom-nav"> 819 <a href="terms.html" class="side-menu-link side-menu-bottom-link">TERMS OF USE</a> 820 <a href="../pages/privacy.html" class="side-menu-link side-menu-bottom-link">PRIVACY POLICY</a> 821 </div> 822 <div class="side-menu-social"> 823 <a href="mailto:contact@proof-of-concept.ca" class="side-menu-social-link"> 824 <i class="fas fa-envelope"></i> 825 </a> 826 <a href="https://instagram.com/proof__concept" target="_blank" class="side-menu-social-link"> 827 <i class="fab fa-instagram"></i> 828 </a> 829 <a href="https://x.com/proof__concept" target="_blank" class="side-menu-social-link"> 830 <i class="fab fa-x-twitter"></i> 831 </a> 832 <a href="https://github.com/PROOFOFCONCEPT-Productions" target="_blank" class="side-menu-social-link"> 833 <i class="fab fa-github"></i> 834 </a> 835 </div> 836 </div> 837 </div> 838 839 <!-- Side Menu Overlay --> 840 <div class="side-menu-overlay" id="side-menu-overlay"></div> 841 842 <main class="store-section" id="main-section"> 843 <div class="store-hero"> 844 <h1 class="store-title">Store</h1> 845 </div> 846 847 <div class="products-grid" id="products-grid"> 848 <!-- Product cards will be populated by JavaScript --> 849 </div> 850 </main> 851 852 <!-- INFO Section --> 853 <section class="info-section"> 854 <div class="info-content"> 855 <div class="info-left"> 856 <h2 class="info-header">ABOUT</h2> 857 <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> 858 </div> 859 860 <div class="info-center"> 861 <h2 class="info-header">INFO</h2> 862 <div class="info-links"> 863 <a href="../blog/" class="info-link">Articles</a> 864 <a href="privacy.html" class="info-link">Privacy Policy</a> 865 <a href="about.html" class="info-link">About</a> 866 <a href="faq.html" class="info-link">FAQ</a> 867 </div> 868 </div> 869 870 <!-- Newsletter Signup --> 871 <div class="info-newsletter"> 872 <h2 class="info-header">STAY UPDATED</h2> 873 <form class="newsletter-form" id="newsletter-form"> 874 <input type="email" class="newsletter-input" placeholder="Enter your email" required> 875 <button type="submit" class="newsletter-button">Subscribe</button> 876 </form> 877 </div> 878 879 <div class="info-right"> 880 <h2 class="info-header">CONTACT</h2> 881 <div class="info-email"><a href="mailto:contact@proof-of-concept.ca">contact@proof-of-concept.ca</a></div> 882 <div class="info-icons"> 883 <a href="mailto:contact@proof-of-concept.ca" class="info-icon" title="Email" aria-label="Email"> 884 <i class="fa-solid fa-envelope"></i> 885 </a> 886 <a href="https://instagram.com/proof__concept" class="info-icon" title="Instagram" aria-label="Instagram" target="_blank"> 887 <i class="fa-brands fa-instagram"></i> 888 </a> 889 <a href="https://x.com/proof__concept" class="info-icon" title="X (Twitter)" aria-label="X (Twitter)" target="_blank"> 890 <i class="fa-brands fa-x-twitter"></i> 891 </a> 892 <a href="https://github.com/PROOFOFCONCEPT-Productions" class="info-icon" title="GitHub" aria-label="GitHub" target="_blank"> 893 <i class="fa-brands fa-github"></i> 894 </a> 895 </div> 896 </div> 897 </div> 898 </section> 899 900 <!-- Product Modal --> 901 <div class="product-modal" id="product-modal"> 902 <div class="modal-content"> 903 <div class="modal-header"> 904 <h2 class="modal-title" id="modal-title">Product Title</h2> 905 <button class="modal-close" id="modal-close">×</button> 906 </div> 907 <div class="modal-body"> 908 <div class="modal-left"> 909 <div class="modal-image"> 910 <img id="modal-image" src="" alt="Product image"> 911 </div> 912 </div> 913 <div class="modal-right"> 914 <p class="modal-description" id="modal-description">Product description will appear here.</p> 915 916 <div class="modal-details"> 917 <div class="detail-item"> 918 <span class="detail-label">Material</span> 919 <span class="detail-value" id="modal-material">-</span> 920 </div> 921 <div class="detail-item"> 922 <span class="detail-label">Care</span> 923 <span class="detail-value" id="modal-care">-</span> 924 </div> 925 <div class="detail-item"> 926 <span class="detail-label">Price</span> 927 <span class="detail-value" id="modal-price">-</span> 928 </div> 929 <div class="detail-item"> 930 <span class="detail-label">Status</span> 931 <span class="detail-value" id="modal-status">-</span> 932 </div> 933 </div> 934 935 <!-- Size Selector Section --> 936 <div class="size-selector"> 937 <div class="size-options" id="size-options"> 938 <button class="buy-btn sold-out" id="buy-btn" disabled>Sold Out</button> 939 <button class="size-option" data-size="S">S</button> 940 <button class="size-option" data-size="M">M</button> 941 <button class="size-option" data-size="L">L</button> 942 </div> 943 </div> 944 </div> 945 </div> 946 </div> 947 </div> 948 949 <script> 950 // Custom cursor functionality 951 const cursor = document.getElementById("cursor"); 952 document.addEventListener("mousemove", e => { 953 cursor.style.top = e.clientY + "px"; 954 cursor.style.left = e.clientX + "px"; 955 }); 956 document.addEventListener("mousedown", () => { 957 cursor.classList.add("expand"); 958 }); 959 document.addEventListener("mouseup", () => { 960 cursor.classList.remove("expand"); 961 }); 962 963 const allLinks = document.querySelectorAll('a, button'); 964 allLinks.forEach(link => { 965 link.addEventListener('mouseenter', () => { 966 cursor.classList.add('cursor-hover'); 967 }); 968 link.addEventListener('mouseleave', () => { 969 cursor.classList.remove('cursor-hover'); 970 }); 971 }); 972 973 // Product data 974 const products = [ 975 { 976 id: 'community-shirt', 977 title: '#COMMUNITYFILM SHIRT', 978 description: 'A premium cotton t-shirt featuring the #COMMUNITYFILM design. This limited edition piece represents the collaborative spirit of our community film project.', 979 price: '$35 CAD', 980 status: 'Sold Out', 981 image: '../assets/images/community/image1.jpg', 982 material: '100% Organic Cotton', 983 care: 'Machine wash cold, tumble dry low', 984 available: false 985 }, 986 { 987 id: 'community-croptop', 988 title: '#COMMUNITYFILM CROPTOP', 989 description: 'A stylish crop top featuring the #COMMUNITYFILM design. Perfect for those who want to show their support for experimental community cinema.', 990 price: '$28 CAD', 991 status: 'Sold Out', 992 image: '../assets/images/community/image2.jpg', 993 material: '100% Organic Cotton', 994 care: 'Machine wash cold, tumble dry low', 995 available: false 996 } 997 ]; 998 999 // DOM elements 1000 const productsGrid = document.getElementById('products-grid'); 1001 const productModal = document.getElementById('product-modal'); 1002 const modalClose = document.getElementById('modal-close'); 1003 const sizeOptions = document.querySelectorAll('.size-option'); 1004 const buyBtn = document.getElementById('buy-btn'); 1005 1006 // Current selected size 1007 let selectedSize = null; 1008 1009 // Initialize the page 1010 function init() { 1011 renderProducts(); 1012 setupEventListeners(); 1013 } 1014 1015 // Render products in the grid 1016 function renderProducts() { 1017 productsGrid.innerHTML = ''; 1018 1019 products.forEach(product => { 1020 const productCard = createProductCard(product); 1021 productsGrid.appendChild(productCard); 1022 }); 1023 } 1024 1025 // Create a product card element 1026 function createProductCard(product) { 1027 const card = document.createElement('div'); 1028 card.className = 'product-card'; 1029 card.dataset.productId = product.id; 1030 1031 card.innerHTML = ` 1032 <div class="product-image"> 1033 <img src="${product.image}" alt="${product.title}"> 1034 </div> 1035 <div class="product-info"> 1036 <h3 class="product-title">${product.title}</h3> 1037 <p class="product-description">${product.description}</p> 1038 <p class="product-price">${product.price}</p> 1039 <p class="product-status">${product.status}</p> 1040 </div> 1041 `; 1042 1043 card.addEventListener('click', () => openProductModal(product)); 1044 return card; 1045 } 1046 1047 // Open product modal 1048 function openProductModal(product) { 1049 document.getElementById('modal-title').textContent = product.title; 1050 document.getElementById('modal-image').src = product.image; 1051 document.getElementById('modal-image').alt = product.title; 1052 document.getElementById('modal-description').textContent = product.description; 1053 document.getElementById('modal-material').textContent = product.material; 1054 document.getElementById('modal-care').textContent = product.care; 1055 document.getElementById('modal-price').textContent = product.price; 1056 document.getElementById('modal-status').textContent = product.status; 1057 1058 // Reset size selection 1059 selectedSize = null; 1060 sizeOptions.forEach(option => { 1061 option.classList.remove('selected'); 1062 option.classList.remove('disabled'); 1063 }); 1064 1065 // Update buy button 1066 buyBtn.textContent = 'Sold Out'; 1067 buyBtn.disabled = true; 1068 buyBtn.classList.add('sold-out'); 1069 1070 1071 1072 productModal.classList.add('active'); 1073 document.body.style.overflow = 'hidden'; 1074 } 1075 1076 // Close product modal 1077 function closeProductModal() { 1078 productModal.classList.remove('active'); 1079 document.body.style.overflow = 'auto'; 1080 } 1081 1082 // Setup event listeners 1083 function setupEventListeners() { 1084 modalClose.addEventListener('click', closeProductModal); 1085 1086 // Close modal when clicking outside 1087 productModal.addEventListener('click', (e) => { 1088 if (e.target === productModal) { 1089 closeProductModal(); 1090 } 1091 }); 1092 1093 // Size selection 1094 sizeOptions.forEach(option => { 1095 option.addEventListener('click', () => { 1096 if (option.classList.contains('disabled')) return; 1097 1098 // Remove previous selection 1099 sizeOptions.forEach(opt => opt.classList.remove('selected')); 1100 1101 // Select new size 1102 option.classList.add('selected'); 1103 selectedSize = option.dataset.size; 1104 }); 1105 }); 1106 1107 1108 1109 // Close modal with Escape key 1110 document.addEventListener('keydown', (e) => { 1111 if (e.key === 'Escape') { 1112 closeProductModal(); 1113 } 1114 }); 1115 } 1116 1117 // Newsletter form handling 1118 document.addEventListener('DOMContentLoaded', function() { 1119 const newsletterForm = document.getElementById('newsletter-form'); 1120 if (newsletterForm) { 1121 newsletterForm.addEventListener('submit', function(e) { 1122 e.preventDefault(); 1123 const email = this.querySelector('.newsletter-input').value; 1124 if (email) { 1125 alert('Thank you for subscribing! We\'ll keep you updated on new releases and events.'); 1126 this.reset(); 1127 } 1128 }); 1129 } 1130 }); 1131 1132 // Initialize when DOM is loaded 1133 document.addEventListener('DOMContentLoaded', init); 1134 1135 // Fade in on load 1136 document.body.classList.add('fade'); 1137 window.addEventListener('DOMContentLoaded', () => { 1138 document.body.classList.remove('fade'); 1139 }); 1140 1141 // Fade out on link click 1142 document.querySelectorAll('a').forEach(link => { 1143 if (link.hostname === window.location.hostname) { 1144 link.addEventListener('click', function(e) { 1145 if (link.target === '_blank' || link.href.includes('#')) return; 1146 e.preventDefault(); 1147 document.body.classList.add('fade'); 1148 setTimeout(() => { 1149 window.location = link.href; 1150 }, 400); 1151 }); 1152 } 1153 }); 1154 </script> 1155 1156 <!-- Scripts --> 1157 <script src="../assets/js/main.js"></script> 1158 </body> 1159 </html>