/* ============================================= MINDPRESS — ANIMATION LAYER (animate.css) Load after main.css in ============================================= */ /* --- HERO PARALLAX --- */ .p-5.text-center.bg-cover { position: relative; overflow: hidden; min-height: 100vh; display: flex; align-items: center; background-image: none !important; } .p-5.text-center.bg-cover::before { content: ''; position: absolute; top: -50%; left: 0; right: 0; bottom: -50%; background: url('../img/cover-1.webp') 75% 5% / cover no-repeat; will-change: transform; z-index: 0; transition: transform 0.05s linear; } .p-5.text-center.bg-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%); z-index: 1; pointer-events: none; } .p-5.text-center.bg-cover > * { position: relative; z-index: 2; } /* --- HERO TEXT REVEAL ON LOAD --- */ .p-5.text-center.bg-cover h1 { opacity: 0; transform: translateY(36px); animation: mpFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards; } .p-5.text-center.bg-cover p { opacity: 0; transform: translateY(28px); animation: mpFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards; } .p-5.text-center.bg-cover .btn { opacity: 0; transform: translateY(20px); animation: mpFadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important; } .p-5.text-center.bg-cover .btn:hover { background-color: rgba(255,255,255,0.15) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.3); } /* --- SCROLL REVEAL --- */ .mp-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); } .mp-reveal.mp-visible { opacity: 1; transform: translateY(0); } .mp-reveal.mp-delay-1 { transition-delay: 0.1s; } .mp-reveal.mp-delay-2 { transition-delay: 0.2s; } .mp-reveal.mp-delay-3 { transition-delay: 0.3s; } .mp-reveal.mp-delay-4 { transition-delay: 0.4s; } /* --- NAV HOVER UNDERLINE --- */ .navbar-nav .nav-link span { position: relative; display: inline-block; } .navbar-nav .nav-link span::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: rgba(255,255,255,0.7); transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .navbar-nav .nav-link:hover span::after, .navbar-nav .nav-link.active span::after { width: 100%; } /* --- SERVICE ICON HOVER --- */ .icon { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease; display: block; margin-bottom: 1rem; } .col-lg-4:hover .icon { transform: translateY(-6px) scale(1.05); filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15)); } /* --- WHAT WE DO CARDS HOVER --- */ .col-sm-12.col-md-6.col-lg-3 { position: relative; padding: 1.5rem 1rem; border-radius: 8px; transition: background 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; cursor: default; } .col-sm-12.col-md-6.col-lg-3:hover { background: rgba(0,0,0,0.03); transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); } .col-sm-12.col-md-6.col-lg-3 h4 { transition: letter-spacing 0.3s ease, color 0.3s ease; } .col-sm-12.col-md-6.col-lg-3:hover h4 { letter-spacing: 0.01em; } .col-sm-12.col-md-6.col-lg-3::before { content: ''; position: absolute; left: 0; top: 1rem; bottom: 1rem; width: 2px; background: currentColor; opacity: 0; border-radius: 2px; transition: opacity 0.3s ease, transform 0.3s ease; transform: scaleY(0.4); } .col-sm-12.col-md-6.col-lg-3:hover::before { opacity: 0.2; transform: scaleY(1); } /* --- bg-what PARALLAX --- */ .bg-what { position: relative; overflow: hidden; background-image: none !important; height: 0; padding-bottom: 54.2%; } .bg-what::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('../img/cover-2.webp') center center / cover no-repeat; z-index: 0; } .bg-what > * { position: relative; z-index: 1; } /* --- ROGERS CUP PARALLAX --- */ .rogers-cup { position: relative; overflow: hidden; background-image: none !important; } .rogers-cup::before { content: ''; position: absolute; top: -50%; left: 0; right: 0; bottom: -50%; background: url('../img/work/rogers-cup.webp') center center / cover no-repeat; will-change: transform; z-index: 0; } .rogers-cup > * { position: relative; z-index: 1; } /* --- CUSTOM MINDPRESS BUTTON --- */ .mp-btn { color: rgb(17, 52, 90); border: 1px solid rgb(17, 52, 90); background-color: transparent; transition: background-color 0.25s ease, color 0.25s ease; } .mp-btn:hover, .mp-btn:focus, .mp-btn:active { background-color: rgb(17, 52, 90); border-color: rgb(17, 52, 90); color: #ffffff; } /* --- FOOTER LINK HOVER --- */ footer a { transition: opacity 0.25s ease; } footer a:hover { opacity: 0.75; } /* --- HR ANIMATED ENTRANCE --- */ hr.mp-reveal { transform-origin: left; transform: scaleX(0); opacity: 0; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease; } hr.mp-reveal.mp-visible { transform: scaleX(1); opacity: 1; } /* --- HEADING SPLIT REVEAL --- */ .mp-heading-reveal { overflow: hidden; display: block; } .mp-heading-reveal span { display: block; opacity: 0; transform: translateY(100%); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .mp-heading-reveal.mp-visible span { opacity: 1; transform: translateY(0); } /* --- KEYFRAMES --- */ @keyframes mpFadeUp { to { opacity: 1; transform: translateY(0); } } /* --- PARALLAX DATA LAYER for JS --- */ [data-parallax] { will-change: transform; } /* --- Disable parallax on mobile to prevent gaps --- */ @media (max-width: 900px) { #hero-section::before, .bg-what::before, .rogers-cup::before { transform: none !important; } } /* --- NAVBAR SCROLL SHRINK --- */ .navbar { transition: padding 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; } .navbar.mp-scrolled { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; background: rgba(10, 38, 68, 0.97) !important; backdrop-filter: blur(8px); box-shadow: 0 2px 20px rgba(0,0,0,0.3); } /* --- PARALLAX PSEUDO-ELEMENT TRANSFORMS (driven by JS CSS vars) --- */ #hero-section::before { transform: translateY(var(--mp-parallax-y, 0px)); } .rogers-cup::before { transform: translateY(var(--mp-section-parallax, 0px)); } /* ============================================= WORK PAGE ============================================= */ /* --- WORK HERO --- */ .bg-work { position: relative; overflow: hidden; background-image: none !important; min-height: 60vh; display: flex; align-items: flex-end; } .bg-work img.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 30%; will-change: transform; z-index: 0; transition: transform 0.05s linear; } .bg-work::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%); z-index: 1; pointer-events: none; } .bg-work > *:not(img) { position: relative; z-index: 2; } /* --- PROJECT IMAGE HOVER --- */ .work-img-wrap { overflow: hidden; border-radius: 4px; } .work-img-wrap img { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease; display: block; width: 100%; } .work-img-wrap:hover img { transform: scale(1.03); box-shadow: 0 20px 50px rgba(0,0,0,0.2) !important; } /* --- PROJECT BLOCK ACCENT BAR --- */ .work-project { position: relative; padding-left: 0; transition: padding-left 0.3s ease; } .work-project::before { content: ''; position: absolute; left: -1rem; top: 0.4rem; width: 3px; height: 0; background: var(--blue); border-radius: 2px; transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .work-project:hover::before { height: 2.5rem; } /* --- WORK ILLUSTRATION FLOAT --- */ .work-ill { width: 100%; animation: workIllFloat 4s ease-in-out infinite; } @keyframes workIllFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ============================================= CONTACT PAGE ============================================= */ /* --- CONTACT HERO --- */ .bg-contact { position: relative; overflow: hidden; background-image: none !important; min-height: 60vh; } .bg-contact img.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 30%; will-change: transform; z-index: 0; transition: transform 0.05s linear; } .bg-contact::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 100%); z-index: 1; pointer-events: none; } .bg-contact > *:not(img) { position: relative; z-index: 2; } /* --- FORM FIELD FOCUS ANIMATION --- */ .form-control { transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease; } .form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 0.2rem rgba(17, 52, 90, 0.15); transform: translateY(-1px); } .form-control.is-valid { border-color: #198754; } .form-control.is-invalid { border-color: #dc3545; } /* --- SUBMIT BUTTON --- */ .submit-btn { transition: transform 0.2s ease, box-shadow 0.2s ease; } .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(17, 52, 90, 0.3); } .submit-btn:active { transform: translateY(0); } /* --- THANKYOU HERO --- */ .bg-thankyou { position: relative; overflow: hidden; background-image: none !important; min-height: 60vh; } .bg-thankyou::before { content: ''; position: absolute; top: -50%; left: 0; right: 0; bottom: -50%; background: url('../img/cover-5.webp') center center / cover no-repeat; will-change: transform; z-index: 0; } .bg-thankyou > * { position: relative; z-index: 1; }