/* ========================================== FALLEN LANDING PAGE ========================================== */ .fallen-landing{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; /* FIX NAVBAR OVERLAP */ padding-top:180px; padding-bottom:80px; } .fallen-bg{ position:absolute; inset:0; background-image: url('/assets/images/fallen/fallen-comrades-bg-en.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; } .fallen-overlay{ position:absolute; inset:0; background: linear-gradient( rgba(0,12,36,.65), rgba(0,12,36,.88) ); } .fallen-content{ position:relative; z-index:5; width:100%; max-width:1200px; padding:0 20px; text-align:center; } /* ========================================== HEADER ========================================== */ .gallery-header{ margin-bottom:25px; } .gallery-header h4{ color:#60a5fa; font-size:13px; letter-spacing:6px; font-weight:700; margin-bottom:15px; } .gallery-header h1{ color:#fff; font-weight:900; line-height:.95; /* REDUCED SIZE */ font-size:clamp(3rem,6vw,5.5rem); } .text-gradient{ background: linear-gradient( 90deg, #3b82f6, #06b6d4 ); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .title-line{ width:120px; height:4px; margin:25px auto; background:#3b82f6; border-radius:20px; } /* ========================================== QUOTE IMAGE ========================================== */ .quote-wrap{ margin:35px auto; } .quote-image{ width:100%; max-width:550px; display:block; margin:auto; filter: drop-shadow( 0 15px 25px rgba(0,0,0,.35) ); } /* ========================================== DESCRIPTION ========================================== */ .fallen-description{ max-width:750px; margin:auto; } .fallen-description p{ color:#e5e7eb; font-size:1.1rem; line-height:2; } /* ========================================== BUTTON ========================================== */ .btn-wrap{ margin-top:40px; } .fallen-btn{ display:inline-flex; align-items:center; justify-content:center; padding:18px 45px; color:#fff; text-decoration:none; font-weight:800; letter-spacing:3px; text-transform:uppercase; border-radius:999px; background: linear-gradient( 135deg, #2563eb, #0891b2 ); transition:.3s; box-shadow: 0 0 35px rgba(37,99,235,.4); } .fallen-btn:hover{ transform:translateY(-4px); box-shadow: 0 0 50px rgba(37,99,235,.75); } /* ========================================== FOOTER ========================================== */ .footer-text{ margin-top:40px; color:#94a3b8; font-size:12px; letter-spacing:5px; text-transform:uppercase; } /* ========================================== MOBILE ========================================== */ @media(max-width:991px){ .fallen-landing{ padding-top:150px; } .gallery-header h4{ font-size:11px; letter-spacing:4px; } .quote-image{ max-width:420px; } .fallen-description p{ font-size:15px; line-height:1.8; } .fallen-btn{ padding:16px 30px; font-size:13px; } } @media(max-width:576px){ .fallen-landing{ padding-top:130px; padding-bottom:60px; } .gallery-header h1{ font-size:3rem; } .quote-image{ max-width:300px; } .fallen-btn{ width:100%; max-width:320px; } .footer-text{ letter-spacing:3px; font-size:10px; } }