/* ========================================================== HERO SECTION ========================================================== */ .btp-hero{ position:relative; overflow:hidden; background:linear-gradient(135deg,#0E1116 0%,#1B1F27 100%); padding:56px 0 100px; min-height:100vh; display:flex; align-items:flex-start; } /* ========================================================== HERO GRID ========================================================== */ .btp-hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; align-items:flex-start; gap:80px; } /* ========================================================== LEFT CONTENT ========================================================== */ .btp-hero-content{ position:relative; z-index:5; max-width:620px; padding-top:50px; } /* ========================================================== BADGE ========================================================== */ .btp-hero-badge{ display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:999px; background:rgba(255,45,122,.12); border:1px solid rgba(255,45,122,.25); color:#FF2D7A; font-size:14px; font-weight:700; margin-bottom:28px; } .btp-hero-badge svg{ width:18px; height:18px; } /* ========================================================== TITLE ========================================================== */ .btp-hero-title{ font-family:var(--font-heading); font-size:72px; line-height:1.05; font-weight:700; color:#FFFFFF; margin:0 0 28px; } .btp-hero-title span{ display:block; color:#FF2D7A; } /* ========================================================== DESCRIPTION ========================================================== */ .btp-hero-text{ font-size:18px; line-height:1.9; color:rgba(255,255,255,.75); margin-bottom:42px; max-width:560px; } /* ========================================================== BUTTONS ========================================================== */ .btp-hero-buttons{ display:flex; align-items:center; gap:18px; margin-bottom:60px; } .btp-hero-buttons .btp-btn{ height:58px; padding:0 34px; border-radius:999px; font-size:15px; font-weight:700; } .btp-btn-outline{ background:transparent; border:1px solid rgba(255,255,255,.15); color:#FFFFFF; } .btp-btn-outline:hover{ border-color:#FF2D7A; color:#FF2D7A; } /* ========================================================== STATS ========================================================== */ .btp-hero-stats{ display:flex; gap:60px; } .btp-stat{ display:flex; flex-direction:column; } .btp-stat strong{ font-size:42px; font-weight:700; color:#FFFFFF; line-height:1; } .btp-stat span{ margin-top:10px; font-size:14px; color:rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:.08em; } /* ========================================================== RIGHT GALLERY WRAPPER ========================================================== */ .btp-hero-gallery{ position:relative; display:grid; grid-template-columns:repeat(2,1fr); gap:24px; height:760px; overflow:hidden; } /* top & bottom fade */ .btp-hero-gallery::before, .btp-hero-gallery::after{ content:""; position:absolute; left:0; width:100%; height:100px; z-index:20; pointer-events:none; } .btp-hero-gallery::before{ top:0; background:linear-gradient(to bottom,#0E1116 0%,transparent); } .btp-hero-gallery::after{ bottom:0; background:linear-gradient(to top,#0E1116 0%,transparent); } /* ========================================================== GALLERY COLUMN ========================================================== */ .btp-gallery-column{ position:relative; overflow:hidden; height:100%; } .btp-gallery-track{ display:flex; flex-direction:column; gap:24px; will-change:transform; } /* ========================================================== LEFT COLUMN ========================================================== */ .btp-gallery-up .btp-gallery-track{ animation:btpGalleryUp 24s linear infinite; } /* ========================================================== RIGHT COLUMN ========================================================== */ .btp-gallery-down .btp-gallery-track{ animation:btpGalleryDown 24s linear infinite; } /* ========================================================== PAUSE ON HOVER ========================================================== */ .btp-hero-gallery:hover .btp-gallery-track{ animation-play-state:paused; } /* ========================================================== CARD ========================================================== */ .btp-gallery-card{ position:relative; overflow:hidden; border-radius:28px; background:#1B1F27; height:300px; box-shadow: 0 20px 45px rgba(0,0,0,.18); transition: transform .35s ease, box-shadow .35s ease; } /* ========================================================== IMAGE ========================================================== */ .btp-gallery-card img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .45s ease; } /* ========================================================== HOVER ========================================================== */ .btp-gallery-card:hover{ transform:translateY(-6px); box-shadow: 0 30px 60px rgba(0,0,0,.30); } .btp-gallery-card:hover img{ transform:scale(1.06); } /* ========================================================== LEFT ANIMATION ========================================================== */ @keyframes btpGalleryUp{ 0%{ transform:translateY(0); } 100%{ transform:translateY(-50%); } } /* ========================================================== RIGHT ANIMATION ========================================================== */ @keyframes btpGalleryDown{ 0%{ transform:translateY(-50%); } 100%{ transform:translateY(0); } } /* ========================================================== LAPTOP (1400px) ========================================================== */ @media (max-width:1400px){ .btp-hero{ padding:48px 0 90px; } .btp-hero-grid{ gap:60px; } .btp-hero-title{ font-size:64px; } .btp-hero-gallery{ height:700px; } } /* ========================================================== TABLET ========================================================== */ @media (max-width:1024px){ .btp-hero{ min-height:auto; padding:90px 0; } .btp-hero-grid{ grid-template-columns:1fr; gap:60px; } .btp-hero-content{ max-width:100%; text-align:center; } .btp-hero-text{ margin-inline:auto; } .btp-hero-buttons{ justify-content:center; } .btp-hero-stats{ justify-content:center; } .btp-hero-gallery{ height:560px; max-width:700px; margin:auto; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width:767px){ .btp-hero{ padding:80px 0 60px; } .btp-hero-title{ font-size:42px; line-height:1.1; } .btp-hero-text{ font-size:16px; line-height:1.8; } .btp-hero-buttons{ flex-direction:column; gap:16px; } .btp-hero-buttons .btp-btn{ width:100%; justify-content:center; } .btp-hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; text-align:center; } .btp-stat strong{ font-size:30px; } .btp-stat span{ font-size:12px; } /* Single Column Slider */ .btp-hero-gallery{ grid-template-columns:1fr; height:420px; gap:0; margin-top:20px; } /* Hide second column */ .btp-gallery-down{ display:none; } } /* ========================================================== SMALL MOBILE ========================================================== */ @media (max-width:480px){ .btp-hero{ padding:70px 0 50px; } .btp-hero-title{ font-size:34px; } .btp-hero-badge{ font-size:13px; padding:8px 16px; } .btp-hero-gallery{ height:340px; } .btp-gallery-card{ border-radius:20px; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ .btp-gallery-track{ animation:none !important; } .btp-gallery-card img{ transition:none; } } /* ========================================================== GPU OPTIMIZATION ========================================================== */ .btp-gallery-track{ transform:translate3d(0,0,0); backface-visibility:hidden; } .btp-gallery-card img{ backface-visibility:hidden; }