main.css
1 /* ===== RESET & BASE STYLES ===== */ 2 * { 3 margin: 0; 4 padding: 0; 5 box-sizing: border-box; 6 user-select: none !important; 7 -webkit-user-select: none !important; 8 -ms-user-select: none !important; 9 -moz-user-select: none !important; 10 -webkit-user-drag: none !important; 11 touch-action: manipulation; 12 cursor: none !important; 13 } 14 15 html, body { 16 height: 100%; 17 overflow-y: scroll; 18 font-family: 'NeueHaasGrotesk', sans-serif, Helvetica; 19 scroll-behavior: smooth; 20 cursor: none !important; 21 background: #EFF0EC; 22 scroll-snap-type: y mandatory; 23 min-height: 100vh; 24 } 25 26 body { 27 -ms-overflow-style: none; 28 scrollbar-width: none; 29 position: relative; 30 opacity: 1; 31 transition: opacity 0.4s; 32 } 33 34 body.fade { 35 opacity: 0; 36 transition: opacity 0.4s; 37 } 38 39 ::-webkit-scrollbar { 40 display: none; 41 } 42 43 /* ===== TYPOGRAPHY ===== */ 44 @font-face { 45 font-family: 'Desire'; 46 src: url('../fonts/Desire.otf') format('opentype'); 47 font-weight: normal; 48 font-style: normal; 49 } 50 51 @font-face { 52 font-family: 'SuperBrigadeCond'; 53 src: url('../fonts/superbrigadecond.ttf') format('truetype'); 54 font-weight: normal; 55 font-style: normal; 56 font-display: swap; 57 } 58 59 @font-face { 60 font-family: 'Imbue'; 61 src: url('../fonts/Imbue.ttf') format('truetype'); 62 font-weight: normal; 63 font-style: normal; 64 font-display: swap; 65 } 66 67 @font-face { 68 font-family: 'Koulen'; 69 src: url('../fonts/Koulen.ttf') format('truetype'); 70 font-weight: normal; 71 font-style: normal; 72 font-display: swap; 73 } 74 75 /* ===== HEADER STYLES ===== */ 76 .main-header { 77 position: fixed; 78 top: 0; 79 left: 0; 80 width: 100vw; 81 background: #000; 82 color: #fff; 83 z-index: 9999; 84 display: flex; 85 flex-direction: column; 86 align-items: center; 87 justify-content: flex-start; 88 padding: 0.6rem 0 0.4rem 0; 89 border-bottom: 1px solid #222; 90 } 91 92 .main-header-title { 93 font-family: 'SuperBrigadeCond', sans-serif; 94 font-size: 1.1rem; 95 letter-spacing: normal; 96 line-height: 1.5; 97 text-align: center; 98 font-weight: bold; 99 } 100 101 .header-extra { 102 margin-top: 0.5rem; 103 display: flex; 104 flex-direction: column; 105 align-items: center; 106 gap: 0.2rem; 107 } 108 109 .header-extra-link { 110 color: #fff; 111 text-decoration: underline; 112 font-size: 1rem; 113 margin-bottom: 0.2rem; 114 } 115 116 .header-extra-desc { 117 color: #fff; 118 font-size: 0.95rem; 119 text-align: center; 120 max-width: 80vw; 121 } 122 123 124 125 /* ===== SECTION STYLES ===== */ 126 section { 127 scroll-snap-align: start; 128 min-height: 100vh; 129 width: 100vw; 130 display: flex; 131 align-items: center; 132 justify-content: center; 133 position: relative; 134 padding: 0; 135 overflow: hidden; 136 color: #222222; 137 background-size: cover; 138 background-position: center center; 139 transition: background-image 0.5s ease; 140 } 141 142 /* ===== COMMUNITY FILM SECTION ===== */ 143 #about { 144 position: relative; 145 background: #fff; 146 padding-top: 0; 147 margin-top: 0; 148 align-items: flex-start; 149 justify-content: flex-start; 150 } 151 152 #about .text { 153 display: block; 154 width: 100vw; 155 padding: 0; 156 font-weight: 900; 157 text-align: justify; 158 line-height: 1; 159 word-break: break-word; 160 hyphens: auto; 161 } 162 163 #about .term { 164 position: relative; 165 background-image: linear-gradient(to right, #222222 100%, transparent 0); 166 background-repeat: repeat-x; 167 background-size: 0% 4px; 168 background-position: 0 100%; 169 transition: background-size 0.2s ease-in-out; 170 cursor: none !important; 171 } 172 173 #about .term:hover { 174 background-size: 100% 4px; 175 } 176 177 /* ===== LOVE.1 SECTION ===== */ 178 #movies { 179 justify-content: flex-start; 180 align-items: flex-start; 181 padding-left: 0; 182 background-color: #EFF0EC; 183 transition: background-image 0.5s ease; 184 } 185 186 #movies .container { 187 width: 100vw; 188 padding: 0; 189 margin: 0; 190 transform: none; 191 } 192 193 #movies .row { 194 display: flex; 195 align-items: flex-end; 196 margin-bottom: 3rem; 197 cursor: none !important; 198 } 199 200 #movies .number { 201 font-size: 1rem; 202 margin-right: 1rem; 203 color: #222222; 204 transition: color 0.3s ease; 205 } 206 207 #movies .title { 208 font-size: 6rem; 209 font-weight: bold; 210 color: #222222; 211 transition: color 0.3s ease, text-decoration 0.3s ease; 212 cursor: none !important; 213 } 214 215 #movies .row:hover .title, 216 #movies .row:hover .number, .contact-links a:hover { 217 color: #222222; 218 text-decoration: underline; 219 } 220 221 /* ===== LOVERS SECTION ===== */ 222 .lovers-section { 223 min-height: 100vh; 224 width: 100vw; 225 } 226 227 .lovers-overlay { 228 align-items: flex-start; 229 padding-left: 20vw; 230 padding-top: 15vh; 231 } 232 233 .lovers-content { 234 display: flex; 235 flex-direction: column; 236 align-items: flex-start; 237 } 238 239 .lovers-content .hero-title { 240 margin-bottom: 1vw; 241 line-height: 1.0; 242 } 243 244 .lovers-content .hero-subtitle { 245 margin-bottom: 1vw; 246 line-height: 1.0; 247 } 248 249 .lovers-content .hero-coming-soon { 250 margin-bottom: 0; 251 line-height: 1.0; 252 font-size: 4vw; 253 } 254 255 /* ===== HORROR SECTION ===== */ 256 .horror-section { 257 position: relative; 258 min-height: 100vh; 259 width: 100vw; 260 } 261 262 /* ===== INFO SECTION ===== */ 263 .info-section { 264 background: #fff; 265 color: #000; 266 min-height: 33vh; 267 height: 33vh; 268 width: 100vw; 269 display: flex; 270 align-items: center; 271 justify-content: center; 272 padding: 0; 273 } 274 275 .info-content { 276 width: 90vw; 277 max-width: 1200px; 278 display: flex; 279 flex-direction: row; 280 justify-content: space-between; 281 align-items: flex-start; 282 gap: 2.5vw; 283 margin: 0 auto; 284 padding: 4vw 0; 285 } 286 287 .info-left, .info-right, .info-center { 288 flex: 1 1 0; 289 display: flex; 290 flex-direction: column; 291 align-items: flex-start; 292 min-width: 0; 293 } 294 295 .info-header { 296 font-size: 2.2vw; 297 font-family: 'SuperBrigadeCond', sans-serif; 298 font-weight: 900; 299 margin-bottom: 1vw; 300 letter-spacing: 0.01em; 301 white-space: nowrap; 302 } 303 304 .info-paragraph { 305 font-size: 0.95vw; 306 font-family: 'Alexandria', sans-serif; 307 font-weight: 500; 308 margin-bottom: 0; 309 line-height: 1.5; 310 max-width: 90%; 311 } 312 313 .info-email { 314 font-size: 0.95vw; 315 font-family: 'Alexandria', sans-serif; 316 font-weight: 500; 317 margin-bottom: 1vw; 318 word-break: break-all; 319 } 320 321 .info-email a { 322 color: #111; 323 text-decoration: none; 324 font-family: inherit; 325 font-size: inherit; 326 font-weight: inherit; 327 } 328 329 .info-icons { 330 display: flex; 331 flex-direction: row; 332 gap: 1.2vw; 333 align-items: center; 334 } 335 336 .info-icon svg { 337 display: block; 338 width: 28px; 339 height: 28px; 340 stroke: #000; 341 fill: none; 342 transition: stroke 0.2s; 343 } 344 345 .info-icon { 346 font-family: 'Alexandria', sans-serif; 347 font-weight: 500; 348 font-size: 0.95vw; 349 } 350 351 .info-icon i { 352 font-size: 1.5vw; 353 color: #000; 354 transition: color 0.2s; 355 } 356 357 .info-icon:hover i { 358 color: #666; 359 } 360 361 .info-links { 362 display: flex; 363 flex-direction: column; 364 gap: 0.5vw; 365 margin-top: 0; 366 } 367 368 .info-link { 369 line-height: 1.5; 370 font-family: 'Alexandria', sans-serif; 371 font-size: 0.95vw; 372 font-weight: 500; 373 color: #111; 374 text-decoration: none; 375 transition: color 0.2s ease; 376 text-transform: none; 377 letter-spacing: normal; 378 line-height: 1.5; 379 } 380 381 .info-link:hover { 382 color: #666; 383 } 384 385 /* ===== NEWSLETTER SECTION ===== */ 386 .info-newsletter { 387 flex: 1 1 0; 388 display: flex; 389 flex-direction: column; 390 align-items: flex-start; 391 min-width: 0; 392 } 393 394 .info-newsletter .info-header { 395 font-size: 1.8vw; 396 white-space: nowrap; 397 overflow: hidden; 398 text-overflow: ellipsis; 399 margin-left: 0; 400 padding-left: 0; 401 } 402 403 .newsletter-desc { 404 font-size: 0.95vw; 405 font-family: 'Alexandria', sans-serif; 406 font-weight: 500; 407 margin-bottom: 1vw; 408 line-height: 1.5; 409 max-width: 90%; 410 color: #111; 411 } 412 413 .newsletter-form { 414 display: flex; 415 flex-direction: column; 416 gap: 1.2vw; 417 margin-bottom: 0.8vw; 418 width: 100%; 419 position: relative; 420 } 421 422 .newsletter-input { 423 padding: 0.8vw 1vw; 424 border: 2px solid #e0e0e0; 425 border-radius: 8px; 426 background: #fff; 427 font-size: 0.9vw; 428 font-family: 'Alexandria', sans-serif; 429 font-weight: 500; 430 width: 100%; 431 max-width: 220px; 432 transition: all 0.3s ease; 433 color: #111; 434 letter-spacing: 0.02em; 435 } 436 437 .newsletter-input::placeholder { 438 color: #999; 439 font-weight: 400; 440 opacity: 0.8; 441 } 442 443 .newsletter-input:focus { 444 outline: none; 445 border-color: #111; 446 background: #fff; 447 box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.1); 448 } 449 450 .newsletter-input:hover { 451 border-color: #999; 452 background: #fff; 453 } 454 455 .newsletter-button { 456 background: transparent; 457 color: #111; 458 border: 2px solid #111; 459 border-radius: 0; 460 padding: 0.6vw 1.2vw; 461 font-size: 0.85vw; 462 font-weight: 700; 463 font-family: 'SuperBrigadeCond', sans-serif; 464 cursor: none !important; 465 transition: all 0.3s ease; 466 text-transform: uppercase; 467 letter-spacing: 0.08em; 468 width: fit-content; 469 position: relative; 470 overflow: hidden; 471 } 472 473 .newsletter-button::before { 474 content: ''; 475 position: absolute; 476 top: 0; 477 left: -100%; 478 width: 100%; 479 height: 100%; 480 background: #111; 481 transition: left 0.3s ease; 482 z-index: -1; 483 } 484 485 .newsletter-button:hover { 486 color: #fff; 487 transform: translateY(-1px); 488 } 489 490 .newsletter-button:hover::before { 491 left: 0; 492 } 493 494 .newsletter-button:active { 495 transform: translateY(0); 496 } 497 498 .newsletter-button.thank-you { 499 background: #111; 500 color: #fff; 501 border-color: #111; 502 } 503 504 .newsletter-button.thank-you::before { 505 left: 0; 506 } 507 508 .newsletter-note { 509 font-size: 0.75vw; 510 color: #999; 511 margin: 0; 512 font-family: 'Alexandria', sans-serif; 513 } 514 515 /* ===== CUSTOM CURSOR ===== */ 516 .custom-cursor { 517 position: fixed; 518 width: 20px; 519 height: 20px; 520 background-color: #222222; 521 border-radius: 50%; 522 pointer-events: none; 523 z-index: 99999; 524 transition: transform 0.15s ease, background-color 0.25s ease; 525 transform: translate(-50%, -50%) scale(1); 526 } 527 528 .custom-cursor.expand { 529 transform: translate(-50%, -50%) scale(2.5); 530 background-color: #22222244; 531 } 532 533 .custom-cursor.cursor-hover { 534 transform: translate(-50%, -50%) scale(1.5); 535 background-color: #222222cc; 536 } 537 538 /* ===== IMAGE STYLES ===== */ 539 .full-width-img { 540 width: 100vw; 541 height: 100vh; 542 display: block; 543 object-fit: cover; 544 max-width: 100vw; 545 max-height: 100vh; 546 } 547 548 #landing .full-width-img { 549 object-position: center 20%; 550 } 551 552 /* ===== OVERLAY STYLES ===== */ 553 .section-overlay { 554 position: absolute; 555 top: 0; 556 left: 0; 557 width: 100vw; 558 height: 100vh; 559 display: flex; 560 flex-direction: column; 561 justify-content: center; 562 z-index: 2; 563 pointer-events: none; 564 box-sizing: border-box; 565 } 566 567 .image-overlay { 568 position: absolute; 569 top: 0; 570 left: 0; 571 width: 100vw; 572 height: 100vh; 573 display: flex; 574 flex-direction: column; 575 align-items: flex-start; 576 justify-content: center; 577 z-index: 2; 578 pointer-events: none; 579 padding-left: 6vw; 580 box-sizing: border-box; 581 } 582 583 .image-overlay .main-text { 584 color: #fff; 585 text-align: left; 586 font-family: 'NeueHaasGrotesk', sans-serif; 587 font-weight: 900; 588 letter-spacing: 0.04em; 589 margin-bottom: 0.5vw; 590 font-size: 7vw; 591 line-height: 1.05; 592 pointer-events: auto; 593 } 594 595 .image-overlay .sub-text { 596 color: #fff; 597 text-align: left; 598 font-family: 'NeueHaasGrotesk', sans-serif; 599 font-weight: 700; 600 letter-spacing: 0.08em; 601 font-size: 2.5vw; 602 margin-bottom: 0.3vw; 603 line-height: 1.05; 604 pointer-events: auto; 605 } 606 607 .image-overlay .coming-soon { 608 color: #fff; 609 text-align: left; 610 font-family: 'NeueHaasGrotesk', sans-serif; 611 font-weight: 700; 612 letter-spacing: 0.08em; 613 font-size: 2vw; 614 margin-bottom: 0; 615 line-height: 1.05; 616 pointer-events: auto; 617 } 618 619 .image-overlay .get-involved-link { 620 position: absolute; 621 bottom: 4vw; 622 left: 6vw; 623 color: #fff; 624 font-size: 1.5vw; 625 font-family: 'NeueHaasGrotesk', sans-serif; 626 font-weight: 700; 627 text-decoration: underline; 628 letter-spacing: 0.08em; 629 pointer-events: auto; 630 cursor: none !important; 631 text-align: left; 632 } 633 634 /* ===== HERO OVERLAY ===== */ 635 .hero-overlay { 636 align-items: flex-start; 637 padding-left: 20vw; 638 } 639 640 .hero-overlay .hero-title { 641 color: #fff; 642 font-family: 'NeueHaasGrotesk', sans-serif; 643 font-size: 6vw; 644 font-weight: 900; 645 letter-spacing: -0.05em; 646 margin-bottom: 1.5vw; 647 text-align: left; 648 line-height: 1.2; 649 pointer-events: auto; 650 } 651 652 .hero-overlay .hero-subtitle { 653 color: #fff; 654 font-family: 'NeueHaasGrotesk', sans-serif; 655 font-size: 4vw; 656 font-weight: 700; 657 letter-spacing: 0.01em; 658 margin-bottom: 1.5vw; 659 text-align: left; 660 line-height: 1.2; 661 pointer-events: auto; 662 word-break: normal; 663 hyphens: none; 664 overflow-wrap: normal; 665 } 666 667 .hero-overlay .hero-coming-soon { 668 color: #fff; 669 font-family: 'NeueHaasGrotesk', sans-serif; 670 font-size: 3vw; 671 font-weight: 700; 672 letter-spacing: 0.01em; 673 margin-bottom: 0; 674 text-align: left; 675 line-height: 1.2; 676 pointer-events: auto; 677 } 678 679 .hero-overlay .hero-link { 680 position: relative; 681 margin-top: 1vw; 682 color: #fff; 683 font-size: 2vw; 684 font-family: 'NeueHaasGrotesk', sans-serif; 685 font-weight: 700; 686 text-decoration: underline; 687 letter-spacing: 0.01em; 688 pointer-events: auto; 689 cursor: none !important; 690 text-align: left; 691 } 692 693 /* ===== FEATURE OVERLAY ===== */ 694 .feature-overlay { 695 align-items: center; 696 justify-content: flex-end; 697 padding-bottom: 0vw; 698 pointer-events: none; 699 } 700 701 #movies .feature-overlay { 702 justify-content: center !important; 703 } 704 705 #movies .feature-overlay-content { 706 align-items: center !important; 707 text-align: center !important; 708 margin-top: 0 !important; 709 } 710 711 .feature-overlay-content { 712 display: flex; 713 flex-direction: column; 714 align-items: flex-start; 715 font-family: 'Desire', serif !important; 716 pointer-events: auto; 717 padding-left: 4vw; 718 padding-right: 4vw; 719 padding-bottom: 4vw; 720 padding-top: 4vw; 721 margin-bottom: 0vw; 722 margin-top: 30vw; 723 text-align: left; 724 margin-left: auto; 725 margin-right: auto; 726 } 727 728 .feature-overlay-content .feature-title { 729 font-size: 4vw; 730 margin-bottom: 0; 731 line-height: 1; 732 color: #000; 733 font-family: 'Desire', serif !important; 734 } 735 736 #movies .feature-overlay-content .feature-title { 737 color: #fff !important; 738 } 739 740 .feature-overlay-content .feature-subtitle { 741 font-size: 2vw; 742 margin-bottom: 0; 743 line-height: 1; 744 color: #000; 745 font-family: 'Desire', serif !important; 746 } 747 748 #movies .feature-overlay-content .feature-subtitle { 749 color: #fff !important; 750 } 751 752 .feature-overlay-content .feature-link { 753 font-size: 1.5vw; 754 margin-top: 0; 755 line-height: 1; 756 color: #000; 757 text-decoration: underline; 758 cursor: none !important; 759 pointer-events: auto; 760 font-family: 'Desire', serif !important; 761 } 762 763 #movies .feature-overlay-content .feature-link { 764 color: #fff !important; 765 margin-top: 1vw !important; 766 } 767 768 /* ===== COMMUNITY OVERLAY ===== */ 769 .community-overlay { 770 align-items: center; 771 justify-content: flex-start; 772 padding-top: 6vh; 773 padding-bottom: 0; 774 } 775 776 .community-overlay .community-top { 777 width: 100%; 778 display: flex; 779 flex-direction: column; 780 align-items: center; 781 pointer-events: auto; 782 padding-top: 0; 783 padding-left: 4vw; 784 padding-right: 4vw; 785 padding-bottom: 0; 786 margin-top: 0; 787 } 788 789 .community-overlay .community-title { 790 font-family: Impact, Charcoal, 'Arial Black', sans-serif; 791 font-size: 5vw; 792 font-weight: 900; 793 margin-bottom: 1vw; 794 color: #000; 795 text-align: center; 796 } 797 798 .community-overlay .community-subtitle { 799 font-family: Impact, Charcoal, 'Arial Black', sans-serif; 800 font-size: 2.5vw; 801 font-weight: 700; 802 margin-bottom: 1vw; 803 color: #000; 804 text-align: center; 805 word-break: normal; 806 hyphens: none; 807 overflow-wrap: normal; 808 } 809 810 .community-overlay .community-bottom { 811 width: 100%; 812 display: flex; 813 flex-direction: column; 814 align-items: center; 815 pointer-events: auto; 816 padding-bottom: 0; 817 padding-left: 4vw; 818 padding-right: 4vw; 819 } 820 821 .community-overlay .community-link { 822 font-family: Impact, Charcoal, 'Arial Black', sans-serif; 823 font-size: 2vw; 824 font-weight: 700; 825 color: #000; 826 text-decoration: underline !important; 827 text-decoration-color: #000 !important; 828 text-decoration-thickness: 3px !important; 829 text-underline-offset: 0.08em !important; 830 margin-bottom: 1vw; 831 text-align: center; 832 cursor: none !important; 833 display: block; 834 } 835 836 .community-overlay .community-credit { 837 font-family: Impact, Charcoal, 'Arial Black', sans-serif; 838 font-size: 1.5vw; 839 font-weight: 400; 840 color: #000; 841 text-align: center; 842 display: block; 843 } 844 845 .community-square { 846 margin: 3vw auto; 847 width: 340px !important; 848 height: 340px !important; 849 background: #fff !important; 850 border: 4px solid #000; 851 display: flex; 852 align-items: center; 853 justify-content: center; 854 box-shadow: 0 2px 16px rgba(0,0,0,0.05); 855 } 856 857 /* ===== CONTACT SECTION ===== */ 858 #contact-section { 859 min-height: 100vh; 860 scroll-snap-align: start; 861 background: #EFF0EC; 862 color: #222222; 863 display: flex; 864 justify-content: center; 865 align-items: flex-end; 866 padding: 4rem 0 2rem 0; 867 box-sizing: border-box; 868 position: relative; 869 } 870 871 .contact-content { 872 width: 100%; 873 max-width: 100%; 874 display: flex; 875 flex-direction: column; 876 justify-content: flex-end; 877 align-items: center; 878 position: relative; 879 } 880 881 .contact-meta { 882 margin-bottom: 0.25rem; 883 text-align: left; 884 max-width: 100%; 885 position: relative; 886 align-self: flex-start; 887 padding-left: calc(21vw - 19vw); 888 } 889 890 .contact-links { 891 font-size: 2.5rem; 892 font-weight: 700; 893 font-family: 'NeueHaasGrotesk', sans-serif; 894 margin-bottom: 0.5rem; 895 white-space: nowrap; 896 } 897 898 .contact-links a { 899 color: #222222; 900 text-decoration: none; 901 pointer-events: auto; 902 cursor: none !important; 903 } 904 905 .contact-description { 906 font-size: 4rem; 907 font-weight: 700; 908 margin-bottom: -3vw; 909 font-family: 'NeueHaasGrotesk', sans-serif; 910 line-height: 1.2; 911 } 912 913 .contact-word { 914 font-size: 29vw; 915 font-weight: 900; 916 font-family: 'NeueHaasGrotesk', sans-serif; 917 line-height: 1; 918 letter-spacing: -0.02em; 919 text-align: left; 920 width: 100vw; 921 white-space: nowrap; 922 } 923 924 /* ===== MOBILE RESPONSIVE STYLES ===== */ 925 @media (max-width: 900px) { 926 .info-content { 927 flex-direction: column; 928 gap: 1.5vw; 929 align-items: stretch; 930 } 931 932 .info-header { 933 font-size: 1.5rem; 934 } 935 936 .info-paragraph, .info-email { 937 font-size: 1rem; 938 } 939 940 .info-section { 941 min-height: 35vh; 942 height: auto; 943 padding: 0 0 2vw 0; 944 } 945 946 .info-content { 947 padding: 6vw 0 2vw 0; 948 } 949 950 .info-icons { 951 gap: 2vw; 952 } 953 954 .info-icon svg { 955 width: 32px; 956 height: 32px; 957 } 958 959 .info-links { 960 margin-top: 1rem; 961 gap: 0.3rem; 962 } 963 964 .info-link { 965 line-height: 1.5; 966 font-size: 0.9rem; 967 } 968 } 969 970 @media (max-width: 768px) { 971 .custom-cursor { 972 display: block !important; 973 } 974 975 html, body { 976 cursor: none !important; 977 overflow-y: auto; 978 scroll-snap-type: y mandatory; 979 } 980 981 * { 982 cursor: none !important; 983 } 984 985 986 987 .info-content { 988 flex-direction: column; 989 gap: 2rem; 990 padding: 2rem 0; 991 } 992 993 .info-left, .info-right, .info-center, .info-newsletter { 994 flex: 1 1 100%; 995 min-width: auto; 996 } 997 998 .newsletter-form { 999 flex-direction: column; 1000 gap: 0.8rem; 1001 } 1002 1003 .newsletter-input { 1004 width: 100%; 1005 max-width: 250px; 1006 padding: 0.8rem; 1007 font-size: 1rem; 1008 border-radius: 8px; 1009 } 1010 1011 .newsletter-button { 1012 width: fit-content; 1013 padding: 0.8rem 1.5rem; 1014 font-size: 1rem; 1015 } 1016 1017 .newsletter-desc { 1018 font-size: 1rem; 1019 margin-bottom: 1rem; 1020 } 1021 1022 .newsletter-note { 1023 font-size: 0.8rem; 1024 } 1025 } 1026 1027 @media (max-width: 600px) { 1028 .main-header { 1029 padding: 0.4rem 0 0.2rem 0; 1030 } 1031 1032 .main-header-title { 1033 font-size: 1.5rem; 1034 } 1035 1036 .section-overlay, .horror-overlay { 1037 width: 100vw; 1038 height: 100vh; 1039 padding: 0; 1040 } 1041 1042 .hero-overlay { 1043 padding-left: 4vw; 1044 } 1045 1046 .hero-overlay .hero-title { 1047 font-size: 2.8rem; 1048 margin-bottom: 1rem; 1049 line-height: 1.2; 1050 } 1051 1052 .hero-overlay .hero-subtitle { 1053 font-size: 1.5rem; 1054 margin-bottom: 1rem; 1055 line-height: 1.2; 1056 } 1057 1058 .hero-overlay .hero-coming-soon { 1059 font-size: 1.2rem; 1060 margin-bottom: 0; 1061 line-height: 1.2; 1062 } 1063 1064 .hero-overlay .hero-link { 1065 font-size: 1.2rem; 1066 margin-top: 0.5rem; 1067 } 1068 1069 .feature-overlay-content { 1070 padding-left: 7vw; 1071 padding-right: 7vw; 1072 padding-bottom: 16vw; 1073 padding-top: 0; 1074 margin-bottom: 0; 1075 } 1076 1077 .feature-overlay-content .feature-title { 1078 font-size: 5vw !important; 1079 } 1080 1081 .feature-overlay-content .feature-subtitle { 1082 font-size: 3vw !important; 1083 } 1084 1085 .feature-overlay-content { 1086 margin-top: 2vw; 1087 margin-bottom: 0; 1088 } 1089 1090 .feature-overlay-content .feature-link { 1091 font-size: 2rem !important; 1092 } 1093 1094 .community-overlay .community-top { 1095 padding-top: 10vw; 1096 padding-left: 7vw; 1097 padding-right: 7vw; 1098 padding-bottom: 5vw; 1099 } 1100 1101 .community-overlay .community-bottom { 1102 padding-bottom: 7vw; 1103 padding-left: 7vw; 1104 padding-right: 7vw; 1105 margin-top: 18vw !important; 1106 } 1107 1108 .community-overlay .community-title { 1109 font-size: 2.5rem !important; 1110 } 1111 1112 .community-overlay .community-subtitle { 1113 font-size: 1.5rem !important; 1114 } 1115 1116 .community-overlay .community-link { 1117 font-size: 1.3rem !important; 1118 } 1119 1120 .community-overlay .community-credit { 1121 font-size: 1.1rem !important; 1122 } 1123 1124 .horror-title { 1125 font-size: 2.5rem !important; 1126 } 1127 1128 .horror-subtitle { 1129 font-size: 1.3rem !important; 1130 } 1131 1132 .horror-bottom span { 1133 font-size: 1.3rem !important; 1134 } 1135 1136 .info-header { 1137 font-size: 1.3rem; 1138 } 1139 1140 .info-paragraph, .info-email, .info-icon { 1141 font-size: 1rem; 1142 } 1143 1144 .info-icon svg { 1145 width: 28px; 1146 height: 28px; 1147 } 1148 1149 .info-links { 1150 margin-top: 0.8rem; 1151 gap: 0.2rem; 1152 } 1153 1154 .info-link { 1155 line-height: 1.5; 1156 font-size: 0.8rem; 1157 } 1158 1159 .hero-overlay .hero-title { 1160 font-size: 3.2rem; 1161 margin-bottom: 1rem; 1162 line-height: 1.2; 1163 } 1164 1165 .hero-overlay .hero-subtitle { 1166 font-size: 1.8rem; 1167 margin-bottom: 1rem; 1168 line-height: 1.2; 1169 word-break: normal !important; 1170 hyphens: none !important; 1171 overflow-wrap: normal !important; 1172 } 1173 1174 .lovers-overlay { 1175 padding-left: 4vw; 1176 padding-top: 10vh; 1177 } 1178 1179 .lovers-content .hero-title { 1180 margin-bottom: 0.8rem; 1181 line-height: 1.0; 1182 } 1183 1184 .lovers-content .hero-subtitle { 1185 margin-bottom: 0.8rem; 1186 line-height: 1.0; 1187 } 1188 1189 .lovers-content .hero-coming-soon { 1190 margin-bottom: 0; 1191 line-height: 1.0; 1192 font-size: 1.5rem; 1193 } 1194 1195 #contact-section { 1196 min-height: auto; 1197 padding: 2rem 0 6rem 0; 1198 align-items: center; 1199 } 1200 1201 .contact-word { 1202 font-size: 15rem; 1203 line-height: 0.8; 1204 margin-bottom: 1rem; 1205 } 1206 1207 .contact-description { 1208 font-size: 2rem; 1209 margin-bottom: 0.5rem; 1210 } 1211 1212 .contact-links { 1213 font-size: 1.5rem; 1214 margin-bottom: 0.5rem; 1215 } 1216 1217 .contact-meta { 1218 padding-left: 1rem; 1219 margin-bottom: 0.5rem; 1220 } 1221 1222 .hero-overlay .hero-subtitle { 1223 font-size: 1.7rem; 1224 } 1225 1226 .hero-overlay .hero-coming-soon { 1227 font-size: 1.4rem; 1228 margin-top: 1rem; 1229 } 1230 1231 .feature-overlay-content .feature-title { 1232 font-size: 2.8rem !important; 1233 } 1234 1235 .feature-overlay-content .feature-subtitle { 1236 font-size: 1.7rem !important; 1237 word-break: normal !important; 1238 hyphens: none !important; 1239 overflow-wrap: normal !important; 1240 } 1241 1242 .community-overlay .community-title { 1243 font-size: 2.8rem !important; 1244 } 1245 1246 .community-overlay .community-subtitle { 1247 font-size: 1.7rem !important; 1248 word-break: normal !important; 1249 hyphens: none !important; 1250 overflow-wrap: normal !important; 1251 } 1252 1253 .horror-title { 1254 font-size: 3rem !important; 1255 } 1256 1257 .horror-subtitle { 1258 font-size: 1.7rem !important; 1259 } 1260 1261 .info-icon svg, .info-icon i { 1262 width: 36px !important; 1263 height: 36px !important; 1264 font-size: 2rem !important; 1265 } 1266 1267 .info-section { 1268 min-height: 35vh !important; 1269 height: auto !important; 1270 padding: 0 0 8rem 0 !important; 1271 } 1272 1273 .info-content { 1274 padding: 6vw 0 2vw 0 !important; 1275 } 1276 1277 .community-overlay .community-title, 1278 .community-overlay .community-subtitle, 1279 .community-overlay .community-link, 1280 .community-overlay .community-credit { 1281 -webkit-text-stroke: 1.2px #000 !important; 1282 text-stroke: 1.2px #000 !important; 1283 } 1284 1285 #movies .feature-overlay-content { 1286 margin-top: -50vw !important; 1287 } 1288 1289 #movies .feature-title { 1290 font-size: 16vw !important; 1291 color: #fff !important; 1292 } 1293 1294 #movies .feature-subtitle { 1295 font-size: 9vw !important; 1296 color: #fff !important; 1297 } 1298 1299 #movies .feature-link { 1300 color: #fff !important; 1301 } 1302 1303 #movies .feature-overlay { 1304 align-items: center !important; 1305 justify-content: center !important; 1306 } 1307 1308 #movies .feature-overlay-content { 1309 margin-top: 0 !important; 1310 margin-bottom: 0 !important; 1311 text-align: center !important; 1312 transform: none !important; 1313 align-items: center !important; 1314 } 1315 1316 #movies .feature-link { 1317 margin-top: 0.5rem !important; 1318 } 1319 } 1320 1321 /* ===== MOBILE OVERRIDES ===== */ 1322 @media (max-width: 768px) { 1323 .community-overlay .community-title, 1324 .community-overlay .community-subtitle, 1325 .community-overlay .community-link, 1326 .community-overlay .community-credit { 1327 -webkit-text-stroke: none !important; 1328 text-stroke: none !important; 1329 -webkit-font-smoothing: antialiased !important; 1330 -moz-osx-font-smoothing: grayscale !important; 1331 text-rendering: optimizeLegibility !important; 1332 } 1333 } 1334 1335 /* ===== UTILITY CLASSES ===== */ 1336 a, a:hover, a:active, a:focus { 1337 cursor: none !important; 1338 } 1339 1340 body::after { 1341 display: none !important; 1342 } 1343 1344 /* ===== INSTAGRAM BANNER ===== */ 1345 .instagram-banner { 1346 position: fixed; 1347 bottom: 0; 1348 left: 0; 1349 width: 100%; 1350 background: rgba(0, 0, 0, 0.95); 1351 backdrop-filter: blur(10px); 1352 color: #fff; 1353 z-index: 10000; 1354 padding: 0.75rem 0; 1355 border-top: 1px solid rgba(255, 255, 255, 0.1); 1356 } 1357 1358 .banner-content { 1359 display: flex; 1360 justify-content: center; 1361 align-items: center; 1362 width: 100%; 1363 margin: 0; 1364 padding: 0; 1365 position: relative; 1366 } 1367 1368 .banner-text { 1369 font-family: 'NeueHaasGrotesk', sans-serif, Helvetica; 1370 font-size: 0.9rem; 1371 font-weight: 700; 1372 letter-spacing: 0.02em; 1373 } 1374 1375 .banner-link { 1376 color: #fff; 1377 text-decoration: underline; 1378 text-decoration-thickness: 1px; 1379 text-underline-offset: 0.2em; 1380 transition: all 0.2s ease; 1381 font-weight: 700; 1382 } 1383 1384 .banner-link:hover { 1385 opacity: 0.8; 1386 text-decoration-thickness: 2px; 1387 } 1388 1389 .banner-close { 1390 position: absolute; 1391 right: 0; 1392 top: 0; 1393 bottom: 0; 1394 background: none; 1395 border: none; 1396 color: #fff; 1397 font-size: 1.5rem; 1398 font-weight: 400; 1399 cursor: none !important; 1400 padding: 0.5rem 1rem; 1401 line-height: 1; 1402 transition: all 0.2s ease; 1403 opacity: 1; 1404 font-family: 'NeueHaasGrotesk', sans-serif, Helvetica; 1405 border-radius: 0; 1406 min-width: 50px; 1407 display: flex; 1408 align-items: center; 1409 justify-content: center; 1410 width: 50px; 1411 } 1412 1413 .banner-close:hover { 1414 opacity: 0.8; 1415 transform: scale(1.05); 1416 } 1417 1418 /* ===== SIDE MENU STYLES ===== */ 1419 /* Force cursor visibility on side menu - this must be at the top */ 1420 .side-menu, 1421 .side-menu * { 1422 cursor: none !important; 1423 } 1424 1425 .side-menu-close, 1426 .side-menu-link, 1427 .side-menu-bottom-link, 1428 .side-menu-social-link { 1429 cursor: none !important; 1430 } 1431 1432 .hamburger-icon { 1433 position: absolute; 1434 left: 1rem; 1435 top: 50%; 1436 transform: translateY(-50%); 1437 color: #fff; 1438 font-size: 1.2rem; 1439 cursor: none !important; 1440 z-index: 1000; 1441 } 1442 1443 .hamburger-icon:hover { 1444 opacity: 0.8; 1445 } 1446 1447 .side-menu { 1448 position: fixed; 1449 top: 0; 1450 left: -240px; 1451 width: 240px; 1452 height: 100vh; 1453 background: #fff; 1454 color: #000; 1455 z-index: 10000; 1456 transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); 1457 display: flex; 1458 flex-direction: column; 1459 border-right: 1px solid #ddd; 1460 cursor: none !important; 1461 pointer-events: auto; 1462 } 1463 1464 .side-menu.active { 1465 left: 0; 1466 } 1467 1468 .side-menu-header { 1469 display: flex; 1470 justify-content: flex-start; 1471 align-items: center; 1472 padding: 1rem 1.2rem; 1473 min-height: 35px; 1474 } 1475 1476 .side-menu-close { 1477 cursor: none !important; 1478 font-size: 1.3rem; 1479 color: #000; 1480 transition: opacity 0.2s ease; 1481 } 1482 1483 .side-menu-close:hover { 1484 opacity: 0.7; 1485 } 1486 1487 .side-menu-nav { 1488 flex: 1; 1489 padding: 1rem 1rem; 1490 display: flex; 1491 flex-direction: column; 1492 gap: 0.8rem; 1493 cursor: none !important; 1494 } 1495 1496 .side-menu-link { 1497 color: #000; 1498 text-decoration: none; 1499 font-size: 1rem; 1500 font-weight: 600; 1501 font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Ubuntu Mono', 'DejaVu Sans Mono', monospace; 1502 transition: all 0.2s ease; 1503 padding: 0.3rem 0; 1504 letter-spacing: 0.02em; 1505 cursor: none !important; 1506 } 1507 1508 .side-menu-link:hover { 1509 color: #333; 1510 text-decoration: underline; 1511 } 1512 1513 .menu-spacer { 1514 height: 0.5rem; 1515 } 1516 1517 .side-menu-footer { 1518 padding: 1rem; 1519 border-top: 1px solid #ddd; 1520 cursor: none !important; 1521 } 1522 1523 .side-menu-bottom-nav { 1524 display: flex; 1525 flex-direction: column; 1526 gap: 0.3rem; 1527 margin-bottom: 1rem; 1528 } 1529 1530 .side-menu-bottom-link { 1531 color: #000; 1532 text-decoration: none; 1533 font-size: 0.9rem; 1534 font-weight: 500; 1535 font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', 'Ubuntu Mono', 'DejaVu Sans Mono', monospace; 1536 transition: all 0.2s ease; 1537 padding: 0.2rem 0; 1538 letter-spacing: 0.01em; 1539 cursor: none !important; 1540 } 1541 1542 .side-menu-bottom-link:hover { 1543 color: #333; 1544 text-decoration: underline; 1545 } 1546 1547 .side-menu-social { 1548 display: flex; 1549 gap: 0.6rem; 1550 margin-bottom: 1rem; 1551 justify-content: flex-start; 1552 } 1553 1554 .side-menu-social-link { 1555 color: #000; 1556 font-size: 1.2rem; 1557 transition: opacity 0.2s ease; 1558 cursor: none !important; 1559 } 1560 1561 .side-menu-social-link:hover { 1562 opacity: 0.7; 1563 } 1564 1565 .side-menu-email { 1566 display: none; 1567 } 1568 1569 .side-menu-email a { 1570 display: none; 1571 } 1572 1573 .side-menu-overlay { 1574 position: fixed; 1575 top: 0; 1576 left: 0; 1577 width: 100vw; 1578 height: 100vh; 1579 background: rgba(0, 0, 0, 0.5); 1580 z-index: 9999; 1581 opacity: 0; 1582 visibility: hidden; 1583 transition: all 0.3s ease; 1584 } 1585 1586 .side-menu-overlay.active { 1587 opacity: 1; 1588 visibility: visible; 1589 } 1590 1591 /* Ensure cursor visibility on side menu */ 1592 .side-menu, 1593 .side-menu * { 1594 cursor: none !important; 1595 } 1596 1597 .side-menu-close, 1598 .side-menu-link, 1599 .side-menu-bottom-link, 1600 .side-menu-social-link { 1601 cursor: none !important; 1602 } 1603 1604 /* Ensure custom cursor is visible when side menu is active */ 1605 .side-menu.active ~ .custom-cursor, 1606 body .custom-cursor, 1607 .custom-cursor { 1608 z-index: 99999 !important; 1609 opacity: 1 !important; 1610 visibility: visible !important; 1611 } 1612 1613 /* Force cursor visibility when side menu is active */ 1614 body:has(.side-menu.active) .custom-cursor, 1615 .side-menu.active + .custom-cursor, 1616 .side-menu.active ~ .custom-cursor, 1617 .side-menu.active .custom-cursor, 1618 .side-menu .custom-cursor { 1619 z-index: 99999 !important; 1620 opacity: 1 !important; 1621 visibility: visible !important; 1622 display: block !important; 1623 } 1624 1625 /* Ensure cursor is always visible */ 1626 .custom-cursor { 1627 display: block !important; 1628 visibility: visible !important; 1629 opacity: 1 !important; 1630 position: fixed !important; 1631 z-index: 99999 !important; 1632 pointer-events: none !important; 1633 mix-blend-mode: normal !important; 1634 transform: translate(-50%, -50%) scale(1) !important; 1635 background-color: #222222 !important; 1636 border-radius: 50% !important; 1637 width: 20px !important; 1638 height: 20px !important; 1639 clip: auto !important; 1640 overflow: visible !important; 1641 filter: none !important; 1642 } 1643 1644 /* Force cursor visibility regardless of parent elements */ 1645 html .custom-cursor, 1646 body .custom-cursor, 1647 * .custom-cursor { 1648 display: block !important; 1649 visibility: visible !important; 1650 opacity: 1 !important; 1651 z-index: 99999 !important; 1652 } 1653 1654 /* Ensure cursor is visible during animations and transitions */ 1655 .custom-cursor, 1656 .custom-cursor *, 1657 .custom-cursor::before, 1658 .custom-cursor::after { 1659 display: block !important; 1660 visibility: visible !important; 1661 opacity: 1 !important; 1662 } 1663 1664 /* Ensure cursor visibility when hovering over side menu elements */ 1665 .side-menu:hover, 1666 .side-menu *:hover { 1667 cursor: none !important; 1668 } 1669 1670 .side-menu-close:hover, 1671 .side-menu-link:hover, 1672 .side-menu-bottom-link:hover, 1673 .side-menu-social-link:hover { 1674 cursor: none !important; 1675 } 1676 1677 /* Ensure cursor is visible above side menu overlay */ 1678 .side-menu-overlay.active ~ .custom-cursor, 1679 .side-menu-overlay.active + .custom-cursor, 1680 .side-menu-overlay .custom-cursor { 1681 z-index: 99999 !important; 1682 opacity: 1 !important; 1683 visibility: visible !important; 1684 display: block !important; 1685 } 1686 1687 /* Ensure cursor is visible even when body has fade class */ 1688 body.fade .custom-cursor, 1689 body.fade * .custom-cursor { 1690 opacity: 1 !important; 1691 visibility: visible !important; 1692 display: block !important; 1693 } 1694 1695 /* Ultra-high specificity cursor visibility */ 1696 html body div.custom-cursor, 1697 html body div#cursor, 1698 div.custom-cursor, 1699 div#cursor { 1700 display: block !important; 1701 visibility: visible !important; 1702 opacity: 1 !important; 1703 z-index: 99999 !important; 1704 position: fixed !important; 1705 } 1706 1707 /* Ensure cursor is visible during all states */ 1708 .custom-cursor.expand, 1709 .custom-cursor.cursor-hover, 1710 .custom-cursor:hover, 1711 .custom-cursor:active, 1712 .custom-cursor:focus { 1713 display: block !important; 1714 visibility: visible !important; 1715 opacity: 1 !important; 1716 z-index: 99999 !important; 1717 }