/* * ════════════════════════════════════════════════════════════════════ * LW CAPITAL CORP — Consolidated Stylesheet * Merged from: index.html · products.html · faq.html * apply.html · checklist.html * ════════════════════════════════════════════════════════════════════ * * Order: * 1. CSS Variables & Reset * 2. Base / Typography * 3. Scrollbar * 4. Animations (@keyframes) * 5. Fade-up utility * 6. NAV * 7. Shared Buttons (btn-gold, btn-ghost) * 8. Shared Section utilities (section-tag, h2, section-lead) * 9. HERO (index + apply pages) * 10. STATS STRIP * 11. PAGE HERO (products, faq — inner-page variant) * 12. ADVANTAGES section * 13. EQUIPMENT section * 14. APPLY / PROCESS section * 15. APPLY FORM CARD + FULL APPLICATION FORM STYLES * 16. TESTIMONIALS / TRUST section * 17. WHY US / CONTACT section * 18. FOOTER * 19. FLOATING BUTTON * 20. ACTIVE NAV * 21. === products.html === specific * 22. === faq.html === specific * 23. === checklist.html === specific * 24. RESPONSIVE * ════════════════════════════════════════════════════════════════════ */ /* ─────────────────────────────────────────────────────────────────── */ /* 1. CSS VARIABLES & RESET */ /* ─────────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --navy:#0a0f1e; --navy-mid:#111827; --navy-light:#1a2235; --navy-border:#1e2d47; --gold:#c9a84c; --gold-light:#e8c96d; --gold-pale:rgba(201,168,76,.1); --gold-glow:rgba(201,168,76,.25); --slate:#64748b; --slate-light:#94a3b8; --white:#ffffff; --off-white:#f8f7f4; --text-soft:#cbd5e1; --rule:rgba(255,255,255,.07); --rule-light:rgba(201,168,76,.15); } /* ─────────────────────────────────────────────────────────────────── */ /* 2. BASE / TYPOGRAPHY */ /* ─────────────────────────────────────────────────────────────────── */ html{scroll-behavior:smooth} body{font-family:'DM Sans',sans-serif;background:var(--navy);color:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased} /* ─────────────────────────────────────────────────────────────────── */ /* 3. SCROLLBAR */ /* ─────────────────────────────────────────────────────────────────── */ ::-webkit-scrollbar{width:4px} ::-webkit-scrollbar-thumb{background:var(--gold);border-radius:2px} /* ─────────────────────────────────────────────────────────────────── */ /* 4. ANIMATIONS (@keyframes) */ /* ─────────────────────────────────────────────────────────────────── */ @keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}} @keyframes lineGrow{from{width:0}to{width:100%}} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes pulse{0%,100%{opacity:.6}50%{opacity:1}} @keyframes countUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /* ── IMAGE ANIMATIONS ── */ @keyframes kenBurns{0%{transform:scale(1) translate(0,0)}100%{transform:scale(1.08) translate(-2%,-1%)}} @keyframes kenBurnsAlt{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1) translate(2%,1%)}} @keyframes floatImg{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-10px) rotate(.5deg)}66%{transform:translateY(-5px) rotate(-.3deg)}} @keyframes revealLeft{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0% 0 0)}} @keyframes revealUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}} @keyframes imgFadeIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}} @keyframes panRight{0%{object-position:0% center}100%{object-position:100% center}} @keyframes shimmerBorder{0%,100%{box-shadow:0 0 0 1px rgba(201,168,76,.2)}50%{box-shadow:0 0 0 2px rgba(201,168,76,.5),0 8px 32px rgba(201,168,76,.15)}} /* ─────────────────────────────────────────────────────────────────── */ /* 5. FADE-UP UTILITY */ /* ─────────────────────────────────────────────────────────────────── */ /* index.html / apply.html / checklist.html version (cubic-bezier) */ .fade-up{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)} .fade-up.visible{opacity:1;transform:translateY(0)} /* ─────────────────────────────────────────────────────────────────── */ /* 6. NAV */ /* ─────────────────────────────────────────────────────────────────── */ nav{position:fixed;top:0;left:0;right:0;z-index:500;height:72px;display:flex;align-items:center;background:rgba(10,15,30,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--rule)} .nav-inner{width:100%;max-width:1280px;margin:0 auto;padding:0 5vw;display:flex;align-items:center;justify-content:space-between} .nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none} .nav-logo-mark{width:40px;height:40px;background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-weight:700;font-size:1rem;color:var(--navy)} .nav-wordmark{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:700;color:var(--white);letter-spacing:.02em} .nav-wordmark span{color:var(--gold)} .nav-links{display:flex;align-items:center;gap:2rem} .nav-link{font-size:.975rem;font-weight:500;color:var(--slate-light);text-decoration:none;transition:color .2s;letter-spacing:.02em} .nav-link:hover{color:var(--gold)} .nav-cta{font-size:.85rem;font-weight:600;color:var(--navy);background:var(--gold);padding:10px 24px;border-radius:6px;text-decoration:none;letter-spacing:.03em;transition:background .2s,transform .15s,box-shadow .2s} .nav-cta:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 6px 20px var(--gold-glow)} /* ─────────────────────────────────────────────────────────────────── */ /* 7. SHARED BUTTONS */ /* ─────────────────────────────────────────────────────────────────── */ .btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy);font-size:.95rem;font-weight:700;padding:16px 32px;border-radius:6px;text-decoration:none;letter-spacing:.03em;transition:background .2s,transform .15s,box-shadow .2s} .btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 10px 30px var(--gold-glow)} .btn-ghost{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--text-soft);font-size:.95rem;font-weight:500;padding:15px 28px;border-radius:6px;border:1px solid rgba(255,255,255,.15);text-decoration:none;transition:border-color .2s,color .2s} .btn-ghost:hover{border-color:var(--gold);color:var(--gold)} /* ─────────────────────────────────────────────────────────────────── */ /* 8. SHARED SECTION UTILITIES */ /* ─────────────────────────────────────────────────────────────────── */ section{padding:7rem 0} .section-inner{max-width:1280px;margin:0 auto;width:100%;padding:0 5vw} /* index.html / apply.html / checklist.html version (with ::before line) */ .section-tag{display:inline-flex;align-items:center;gap:8px;font-size:.825rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:1rem} .section-tag::before{content:"";display:block;width:20px;height:1px;background:var(--gold)} h2{font-family:'Playfair Display',serif;font-size:clamp(1.8rem,2.8vw,2.6rem);font-weight:700;line-height:1.12;letter-spacing:-.02em;color:var(--white);margin-bottom:1rem} h2 em{font-style:italic;color:var(--gold)} .section-lead{font-size:1.225rem;color:var(--text-soft);line-height:1.8;font-weight:300;max-width:540px} /* ─────────────────────────────────────────────────────────────────── */ /* 9. HERO (index.html + apply.html — full-height hero) */ /* ─────────────────────────────────────────────────────────────────── */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding-top:72px;background:var(--navy)} .hero-bg{position:absolute;inset:0;pointer-events:none} .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);background-size:60px 60px} .hero-glow1{position:absolute;width:800px;height:800px;top:-200px;right:-200px;background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 60%);filter:blur(60px)} .hero-glow2{position:absolute;width:600px;height:600px;bottom:-200px;left:-100px;background:radial-gradient(circle,rgba(59,130,246,.06) 0%,transparent 60%);filter:blur(80px)} .hero-diag{position:absolute;bottom:0;left:0;right:0;height:120px;background:linear-gradient(to bottom right,transparent 49%,var(--navy-mid) 50%)} .hero-inner{position:relative;z-index:10;max-width:1280px;margin:0 auto;width:100%;padding:6vh 5vw;display:grid;grid-template-columns:1fr 480px;gap:6rem;align-items:center} .hero-badge{display:inline-flex;align-items:center;gap:8px;background:var(--gold-pale);border:1px solid var(--rule-light);padding:6px 14px;border-radius:100px;margin-bottom:1.8rem;animation:fadeUp .6s .1s both} .hero-badge-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:pulse 2s ease-in-out infinite} .hero-badge-text{font-size:.845rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)} h1{font-family:'Playfair Display',serif;font-size:clamp(2.4rem,4vw,3.8rem);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--white);margin-bottom:1.2rem;animation:fadeUp .8s .2s both} h1 em{font-style:italic;color:var(--gold)} .hero-sub{font-size:1.275rem;font-weight:300;color:var(--text-soft);line-height:1.8;max-width:500px;margin-bottom:2.5rem;animation:fadeUp .7s .35s both} .hero-ctas{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;animation:fadeUp .6s .5s both} .hero-trust{display:flex;align-items:center;gap:1.5rem;margin-top:2rem;padding-top:2rem;border-top:1px solid var(--rule);animation:fadeUp .6s .65s both} .htag{font-size:.95rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);white-space:nowrap} .hticks{display:flex;flex-wrap:wrap;gap:.6rem} .htick{display:flex;align-items:center;gap:5px;font-size:1.03rem;color:var(--text-soft)} .htick::before{content:"✓";color:var(--gold);font-weight:700;font-size:.75rem} /* Hero card */ .hero-card{background:var(--navy-light);border:1px solid var(--navy-border);border-radius:16px;overflow:hidden;animation:fadeUp .9s .4s both;box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 0 1px rgba(201,168,76,.08)} .hcard-header{background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.05));border-bottom:1px solid var(--rule-light);padding:1.4rem 1.8rem;display:flex;align-items:center;justify-content:space-between} .hcard-title{font-size:.845rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)} .hcard-badge{font-size:.795rem;font-weight:600;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.3);color:var(--gold);padding:3px 10px;border-radius:100px;letter-spacing:.06em;text-transform:uppercase} .hcard-body{padding:1.8rem} .range-row{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.6rem} .range-label{font-size:.845rem;color:var(--slate-light);letter-spacing:.06em;text-transform:uppercase;font-weight:500} .range-value{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:700;color:var(--white);line-height:1} .range-value span{font-size:1.125rem;color:var(--gold);font-family:'DM Sans',sans-serif;font-weight:500;margin-left:4px} .hcard-divider{height:1px;background:var(--rule);margin:1.4rem 0} .hcard-features{display:flex;flex-direction:column;gap:.85rem} .hcard-feat{display:flex;align-items:center;gap:10px;font-size:1.005rem;color:var(--text-soft)} /* index.html version uses SVG icons; apply.html/checklist use emoji — both supported */ .hcard-feat-icon{width:28px;height:28px;border-radius:6px;background:var(--gold-pale);border:1px solid var(--rule-light);display:flex;align-items:center;justify-content:center;flex-shrink:0} .hcard-feat-icon svg{width:14px;height:14px;stroke:var(--gold);stroke-width:2;fill:none} .hcard-foot{background:rgba(201,168,76,.06);border-top:1px solid var(--rule-light);padding:1.2rem 1.8rem;display:flex;align-items:center;gap:.6rem} .hcard-foot-text{font-size:1.05rem;color:var(--text-soft);line-height:1.5} .hcard-foot-text strong{color:var(--gold)} .hcard-foot-contact a{font-size:.85rem;font-weight:600;color:var(--gold,#b79143);text-decoration:none;margin-bottom:6px} .hcard-foot-icon{display:inline-flex;align-items:center;flex-shrink:0} .hcard-foot-icon svg{width:16px;height:16px;stroke:var(--gold);stroke-width:2;fill:none} /* ── HERO IMAGE MOSAIC (reserved, display:none by default) ── */ .hero-img-mosaic{position:absolute;right:0;top:0;bottom:0;width:42%;pointer-events:none;overflow:hidden;display:none} /* ── APPLY PAGE HERO (apply.html — compact, non-fullscreen) ── */ .apply-page-hero{padding:7rem 0 3rem;background:var(--navy);position:relative;overflow:hidden} .apply-page-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.04) 1px,transparent 1px);background-size:60px 60px;pointer-events:none} .apply-page-hero-inner{max-width:1280px;margin:0 auto;padding:0 5vw} .apply-page-back{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;color:var(--slate-light);text-decoration:none;margin-bottom:1.5rem;transition:color .2s} .apply-page-back:hover{color:var(--gold)} .apply-page-back::before{content:"←"} /* ─────────────────────────────────────────────────────────────────── */ /* 10. STATS STRIP */ /* ─────────────────────────────────────────────────────────────────── */ .stats-strip{background:var(--navy-mid);border-top:1px solid var(--navy-border);border-bottom:1px solid var(--navy-border)} .stats-inner{max-width:1280px;margin:0 auto;display:flex} .stat-item{flex:1;padding:2.2rem 1.5rem;text-align:center;border-right:1px solid var(--navy-border);position:relative;overflow:hidden} .stat-item:last-child{border-right:none} .stat-item::after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--gold);transition:width .4s ease} .stat-item:hover::after{width:60%} .stat-n{font-family:'Playfair Display',serif;font-size:2rem;font-weight:700;color:var(--gold);line-height:1;margin-bottom:.4rem} .stat-l{font-size:.905rem;color:var(--slate-light);line-height:1.4;font-weight:400} /* ─────────────────────────────────────────────────────────────────── */ /* 11. PAGE HERO (products.html + faq.html — inner pages) */ /* ─────────────────────────────────────────────────────────────────── */ .page-hero{position:relative;padding:140px 0 80px;background:var(--dark,#0a0a0f);overflow:hidden} .page-hero-bg{position:absolute;inset:0;pointer-events:none} .page-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:60px 60px} .page-hero-glow{position:absolute;width:600px;height:400px;background:radial-gradient(ellipse,rgba(183,145,67,.18) 0%,transparent 70%);top:-80px;left:50%;transform:translateX(-50%)} /* products.html uses max-width:900px; faq.html uses max-width:760px */ .page-hero-inner{max-width:900px;margin:0 auto;padding:0 32px;position:relative;z-index:1;text-align:center} .page-hero-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(183,145,67,.12);border:1px solid rgba(183,145,67,.3);color:var(--gold,#b79143);font-size:.8rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:6px 16px;border-radius:100px;margin-bottom:28px} .page-hero h1{font-family:'Playfair Display',serif;font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;line-height:1.15;color:#fff;margin-bottom:20px} .page-hero h1 em{font-style:italic;color:var(--gold,#b79143)} .page-hero-sub{font-size:1.1rem;color:rgba(255,255,255,.62);line-height:1.75;max-width:640px;margin:0 auto 40px} /* ─────────────────────────────────────────────────────────────────── */ /* 12. ADVANTAGES SECTION */ /* ─────────────────────────────────────────────────────────────────── */ .adv-sec{background:var(--navy)} .adv-grid{display:grid;grid-template-columns:1fr 420px;gap:5rem;align-items:start} .adv-list{display:flex;flex-direction:column;gap:1rem;margin-top:2.5rem} .adv-item{display:flex;gap:1.2rem;padding:1.4rem;background:var(--navy-light);border:1px solid var(--navy-border);border-radius:12px;transition:border-color .2s,box-shadow .2s,transform .2s;cursor:default} .adv-item:hover{border-color:rgba(201,168,76,.3);box-shadow:0 8px 32px rgba(0,0,0,.3);transform:translateX(4px)} /* index.html uses SVG icons; apply.html/checklist use emoji font-size */ .adv-icon{width:44px;height:44px;border-radius:10px;background:var(--gold-pale);border:1px solid var(--rule-light);display:flex;align-items:center;justify-content:center;flex-shrink:0} .adv-icon svg{width:22px;height:22px;stroke:var(--gold);stroke-width:1.75;fill:none} .adv-title{font-size:1.25rem;font-weight:600;color:var(--white);margin-bottom:.3rem;letter-spacing:-.01em} .adv-desc{font-size:1.13rem;color:var(--text-soft);line-height:1.65} /* Right side visual */ .adv-visual{background:var(--navy-light);border:1px solid var(--navy-border);border-radius:20px;padding:2.4rem;position:relative;overflow:hidden} .adv-visual::before{content:"";position:absolute;top:-80px;right:-80px;width:300px;height:300px;background:radial-gradient(circle,rgba(201,168,76,.1) 0%,transparent 60%);pointer-events:none} .adv-photo{width:100%;height:220px;border-radius:12px;object-fit:cover;margin-bottom:1.8rem;border:1px solid var(--navy-border);display:block} .offer-title{font-size:.825rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:1.6rem;display:flex;align-items:center;gap:8px} .offer-title::before{content:"";display:block;width:16px;height:1px;background:var(--gold)} .offer-list{display:flex;flex-direction:column;gap:.8rem;margin-bottom:2rem} .offer-item{display:flex;align-items:flex-start;gap:10px;font-size:1.045rem;color:var(--text-soft);line-height:1.5} .offer-check{width:20px;height:20px;border-radius:50%;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.3);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--gold);flex-shrink:0;margin-top:1px} .offer-divider{height:1px;background:var(--rule);margin:1.6rem 0} .founded-badge{display:inline-flex;align-items:center;gap:10px;background:var(--gold-pale);border:1px solid var(--rule-light);border-radius:10px;padding:1rem 1.4rem} .founded-year{font-family:'Playfair Display',serif;font-size:1.8rem;font-weight:700;color:var(--gold);line-height:1} .founded-text{font-size:.925rem;color:var(--text-soft);line-height:1.4} .founded-text strong{color:var(--white);font-weight:600;display:block} /* ── ADVANTAGES IMAGE PANEL ── */ .adv-img-panel{position:relative;border-radius:20px;overflow:hidden;height:560px;box-shadow:0 32px 80px rgba(0,0,0,.5);flex-shrink:0} .adv-img-panel img{width:100%;height:100%;object-fit:cover;animation:kenBurns 14s ease-in-out infinite alternate} .adv-img-panel-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,15,30,.7) 0%,transparent 50%)} .adv-img-badge{position:absolute;bottom:1.6rem;left:1.6rem;right:1.6rem;background:rgba(10,15,30,.85);backdrop-filter:blur(12px);border:1px solid rgba(201,168,76,.3);border-radius:12px;padding:1rem 1.2rem;display:flex;align-items:center;gap:1rem} .adv-img-badge-icon{width:40px;height:40px;background:var(--gold);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .adv-img-badge-icon svg{width:20px;height:20px;stroke:var(--navy);stroke-width:2;fill:none} .adv-img-badge-text strong{display:block;font-size:1.15rem;font-weight:700;color:var(--white)} .adv-img-badge-text span{font-size:1.03rem;color:var(--text-soft)} /* ─────────────────────────────────────────────────────────────────── */ /* 13. EQUIPMENT SECTION */ /* ─────────────────────────────────────────────────────────────────── */ .equip-sec{background:var(--navy-mid)} .equip-photo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:3rem;margin-bottom:2rem} .equip-photo-item{position:relative;border-radius:14px;overflow:hidden;height:160px;border:1px solid var(--navy-border)} .equip-photo-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .equip-photo-item:hover img{transform:scale(1.05)} .equip-photo-label{position:absolute;bottom:0;left:0;right:0;padding:.7rem 1rem;background:linear-gradient(to top,rgba(10,15,30,.9) 0%,transparent 100%);font-size:.875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)} .equip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--navy-border);border:1px solid var(--navy-border);border-radius:16px;overflow:hidden;margin-top:3.5rem} .equip-item{background:var(--navy-light);padding:1.8rem;transition:background .2s} .equip-item:hover{background:rgba(201,168,76,.06)} /* index.html uses SVG icons (height:2rem wrapper); apply.html/checklist use emoji */ .equip-icon{margin-bottom:1rem;height:2rem;display:flex;align-items:center} .equip-icon svg{width:28px;height:28px;stroke:var(--gold);stroke-width:1.5;fill:none} .equip-name{font-size:1.125rem;font-weight:600;color:var(--white);margin-bottom:.4rem;letter-spacing:-.01em} .equip-desc{font-size:.955rem;color:var(--slate-light);line-height:1.6} /* ── EQUIPMENT PHOTO GRID ── */ .equip-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:3rem 0 2rem} .epg-item{position:relative;border-radius:14px;overflow:hidden;height:190px;cursor:default;border:1px solid var(--navy-border);animation:shimmerBorder 4s ease-in-out infinite} .epg-item:nth-child(2){animation-delay:1.3s} .epg-item:nth-child(3){animation-delay:2.6s} .epg-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,1,.36,1)} .epg-item:hover img{transform:scale(1.08)} .epg-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(10,15,30,.92) 0%,rgba(10,15,30,.4) 60%,transparent 100%);padding:1.4rem 1rem .9rem;display:flex;align-items:flex-end;gap:.5rem} .epg-label-text{font-size:.925rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--white)} .epg-label-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex-shrink:0;margin-bottom:2px;animation:pulse 2s ease-in-out infinite} /* ── FLOATING INDUSTRY IMAGES (equipment section decoration) ── */ .equip-float-row{display:flex;gap:1rem;margin-top:1.2rem;overflow-x:auto;padding-bottom:.5rem;scrollbar-width:thin;scrollbar-color:var(--gold) transparent} .efl-item{position:relative;border-radius:10px;overflow:hidden;flex:0 0 140px;height:100px;border:1px solid var(--navy-border)} .efl-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .efl-item:nth-child(odd) img{animation:floatImg 7s ease-in-out infinite} .efl-item:nth-child(even) img{animation:floatImg 8s ease-in-out infinite reverse} .efl-item:hover img{transform:scale(1.1) !important;animation-play-state:paused} /* ─────────────────────────────────────────────────────────────────── */ /* 14. APPLY / PROCESS SECTION */ /* ─────────────────────────────────────────────────────────────────── */ .apply-sec{background:var(--navy)} .apply-grid{display:grid;grid-template-columns:1fr 580px;gap:5rem;align-items:start} .steps{display:flex;flex-direction:column;gap:0;margin-top:2.5rem} .step{display:grid;grid-template-columns:52px 1fr;gap:1.2rem;padding:1.6rem 0;position:relative} .step:not(:last-child)::before{content:"";position:absolute;left:25px;top:52px;bottom:0;width:1px;background:var(--rule)} .step-num{width:52px;height:52px;border-radius:12px;background:var(--gold-pale);border:1px solid var(--rule-light);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:1.1rem;font-weight:700;color:var(--gold);flex-shrink:0;position:relative;z-index:1} .step-title{font-size:1.05rem;font-weight:600;color:var(--white);margin-bottom:.3rem;padding-top:.6rem} .step-desc{font-size:1.005rem;color:var(--text-soft);line-height:1.65} .step-tag{display:inline-block;font-size:.785rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-light);background:rgba(255,255,255,.05);border:1px solid var(--rule);border-radius:100px;padding:2px 8px;margin-top:.5rem} /* ── APPLY SECTION — SIDE IMAGE STACK ── */ .apply-img-stack{display:flex;flex-direction:column;gap:1rem;margin-top:2.5rem} .apply-img-card{position:relative;border-radius:14px;overflow:hidden;height:160px;border:1px solid var(--navy-border);animation:imgFadeIn .8s ease both} .apply-img-card:nth-child(2){animation-delay:.3s} .apply-img-card:nth-child(3){animation-delay:.6s} .apply-img-card img{width:100%;height:100%;object-fit:cover;animation:kenBurnsAlt 16s ease-in-out infinite alternate} .apply-img-card:nth-child(2) img{animation-name:kenBurns;animation-duration:12s} .apply-img-card-caption{position:absolute;bottom:.8rem;left:.8rem;font-size:.845rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);background:rgba(10,15,30,.75);backdrop-filter:blur(6px);padding:.3rem .7rem;border-radius:100px;border:1px solid rgba(201,168,76,.25)} /* ── APPLY CTA CARD (index.html right-column card) ── */ .apply-cta-card{position:relative;background:linear-gradient(145deg,var(--navy-light),rgba(201,168,76,.07));border:1px solid var(--rule-light);border-radius:24px;overflow:hidden;position:sticky;top:90px} .apply-cta-glow{position:absolute;top:-80px;right:-80px;width:320px;height:320px;background:radial-gradient(circle,rgba(201,168,76,.12) 0%,transparent 65%);pointer-events:none} .apply-cta-inner{position:relative;z-index:1;padding:2.8rem 2.4rem} .apply-cta-badge{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:var(--gold-pale);border:1px solid var(--rule-light);padding:5px 13px;border-radius:100px;margin-bottom:1.4rem} .apply-cta-heading{font-family:'Playfair Display',serif;font-size:1.9rem;font-weight:700;color:var(--white);line-height:1.15;letter-spacing:-.02em;margin-bottom:.9rem} .apply-cta-heading em{font-style:italic;color:var(--gold)} .apply-cta-body{font-size:1rem;color:var(--text-soft);line-height:1.75;font-weight:300;margin-bottom:1.6rem} .apply-cta-features{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:1.8rem} .apply-cta-feat{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--text-soft)} .apply-cta-check{color:var(--gold);font-weight:700;font-size:.85rem;flex-shrink:0} .apply-cta-footer{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--rule);font-size:.85rem;color:var(--slate)} .apply-cta-footer a{color:var(--gold);text-decoration:none;font-weight:500} .apply-cta-footer a:hover{text-decoration:underline} /* ─────────────────────────────────────────────────────────────────── */ /* 15. APPLY FORM CARD + FULL APPLICATION FORM STYLES */ /* ─────────────────────────────────────────────────────────────────── */ /* Apply form card */ .apply-card{background:var(--navy-light);border:1px solid var(--navy-border);border-radius:20px;overflow:hidden;position:sticky;top:90px;box-shadow:0 32px 80px rgba(0,0,0,.4)} .apply-card-header{background:linear-gradient(135deg,var(--gold),var(--gold-light));padding:1.8rem 2rem} .apply-card-title{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:700;color:var(--navy);margin-bottom:.3rem} .apply-card-sub{font-size:.955rem;color:rgba(10,15,30,.7);font-weight:500} .apply-card-body{padding:2rem} .form-group{margin-bottom:1.2rem} .form-label{display:block;font-size:.875rem;font-weight:600;color:var(--text-soft);letter-spacing:.08em;text-transform:uppercase;margin-bottom:.5rem} .form-input{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--navy-border);border-radius:8px;padding:12px 14px;font-size:1.045rem;color:var(--white);font-family:'DM Sans',sans-serif;outline:none;transition:border-color .2s,background .2s} .form-input:focus{border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.04)} .form-input::placeholder{color:var(--slate)} select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-color:rgba(255,255,255,.04);cursor:pointer} select.form-input option{background:var(--navy-mid);color:var(--white)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .form-submit{width:100%;background:var(--gold);color:var(--navy);font-size:.95rem;font-weight:700;padding:16px;border-radius:8px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;letter-spacing:.04em;transition:background .2s,transform .15s,box-shadow .2s;margin-top:.4rem} .form-submit:hover{background:var(--gold-light);transform:translateY(-1px);box-shadow:0 8px 24px var(--gold-glow)} .form-note{font-size:.855rem;color:var(--slate);text-align:center;margin-top:.9rem;line-height:1.5} .form-note a{color:var(--gold);text-decoration:none} /* ── FORM SUBMISSION STATES ── */ .form-status{display:none;border-radius:10px;padding:1rem 1.2rem;margin-top:1rem;font-size:.9rem;line-height:1.6;text-align:center} .form-status.success{display:block;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#86efac} .form-status.error{display:block;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5} .form-status-icon{font-size:1.8rem;display:block;margin-bottom:.4rem} .form-status strong{display:block;font-size:1rem;margin-bottom:.3rem} .form-submit.loading{opacity:.7;cursor:not-allowed;pointer-events:none} .form-submit.loading::after{content:" ⟳";display:inline-block;animation:spin .8s linear infinite} .field-error{border-color:rgba(239,68,68,.6) !important;background:rgba(239,68,68,.05) !important} .field-error-msg{font-size:.72rem;color:#fca5a5;margin-top:.25rem;display:block} /* ── FULL APPLICATION FORM STYLES ── */ .form-tabs{display:flex;border-bottom:1px solid var(--navy-border);background:rgba(255,255,255,.02)} .form-tab{flex:1;padding:.9rem 1rem;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--slate-light);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:color .2s,border-color .2s;font-family:'DM Sans',sans-serif} .form-tab:hover{color:var(--gold)} .form-tab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(201,168,76,.04)} .tab-panel{display:none} .tab-panel.active{display:block} .form-section-title{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:1.6rem 0 .9rem;padding-bottom:.5rem;border-bottom:1px solid var(--rule-light);display:flex;align-items:center;gap:8px} .form-section-title::before{content:"";display:block;width:14px;height:1px;background:var(--gold)} .form-subsection-label{font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-light);margin:.9rem 0 .5rem} .form-row3{display:grid;grid-template-columns:1fr .6fr 1fr;gap:.8rem} .form-input-sm{font-size:.8rem !important;padding:8px 10px !important} .radio-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:.3rem} .radio-label{display:flex;align-items:center;gap:.45rem;font-size:.88rem;color:var(--text-soft);cursor:pointer} .radio-label input[type=radio]{accent-color:var(--gold);width:15px;height:15px;cursor:pointer} .guarantor-grid{display:grid;grid-template-columns:110px 1fr 1fr 1fr;gap:.5rem;align-items:center;margin-bottom:.5rem} .gcol-head{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);text-align:center;padding:.3rem 0} .grow-label{font-size:.75rem;font-weight:600;color:var(--slate-light);letter-spacing:.04em;padding-right:.5rem;line-height:1.3} .credit-release-text{font-size:.82rem;color:var(--slate-light);line-height:1.75;background:rgba(255,255,255,.03);border:1px solid var(--rule);border-radius:8px;padding:1rem 1.1rem;margin-bottom:.8rem} .doc-download-row{display:flex;align-items:center;gap:.8rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--rule);flex-wrap:wrap} .doc-download-label{font-size:.78rem;color:var(--slate);flex-shrink:0} .doc-download-link{font-size:.82rem;font-weight:600;color:var(--gold);text-decoration:none;border:1px solid rgba(201,168,76,.3);border-radius:6px;padding:.35rem .8rem;transition:background .2s,border-color .2s} .doc-download-link:hover{background:rgba(201,168,76,.1);border-color:var(--gold)} .auth-header-block{background:rgba(201,168,76,.06);border:1px solid var(--rule-light);border-radius:10px;padding:1rem 1.2rem;margin-bottom:.5rem} .auth-logo-line{font-size:.8rem;color:var(--text-soft);line-height:1.8} /* ─────────────────────────────────────────────────────────────────── */ /* 16. TESTIMONIALS / TRUST SECTION */ /* ─────────────────────────────────────────────────────────────────── */ .trust-sec{background:var(--navy-mid)} .trust-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.4rem;margin-top:3.5rem} .tcard{background:var(--navy-light);border:1px solid var(--navy-border);border-radius:14px;padding:1.8rem;transition:border-color .2s,transform .2s} .tcard:hover{border-color:rgba(201,168,76,.25);transform:translateY(-3px)} .tcard-quote{font-size:2rem;color:rgba(201,168,76,.3);line-height:1;margin-bottom:.8rem;font-family:'Playfair Display',serif} .tcard-text{font-size:1.045rem;color:var(--text-soft);line-height:1.75;margin-bottom:1.2rem;font-style:italic} .tcard-author{font-size:.925rem;font-weight:600;color:var(--white)} .tcard-role{font-size:.875rem;color:var(--slate-light);margin-top:2px} /* ─────────────────────────────────────────────────────────────────── */ /* 17. WHY US / CONTACT SECTION */ /* ─────────────────────────────────────────────────────────────────── */ .why-sec{background:var(--navy)} .why-inner-grid{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center} .why-list{display:flex;flex-direction:column;gap:1.6rem;margin-top:2.5rem} .why-item{display:flex;gap:1rem;align-items:flex-start} .why-num{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:700;color:rgba(201,168,76,.25);line-height:1;flex-shrink:0;width:52px;text-align:right} .why-content h3{font-size:1.05rem;font-weight:600;color:var(--white);margin-bottom:.3rem} .why-content p{font-size:1.005rem;color:var(--text-soft);line-height:1.7} /* CTA block */ .why-cta-block{background:linear-gradient(135deg,var(--navy-light),rgba(201,168,76,.06));border:1px solid var(--rule-light);border-radius:20px;padding:3rem;position:relative;overflow:hidden} .why-cta-block::before{content:"";position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(201,168,76,.08) 0%,transparent 65%);pointer-events:none} .why-cta-photo{width:100%;height:180px;object-fit:cover;border-radius:12px;margin-bottom:1.8rem;border:1px solid var(--navy-border);display:block} .why-cta-block h3{font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:700;color:var(--white);line-height:1.2;margin-bottom:.8rem} .why-cta-block h3 em{font-style:italic;color:var(--gold)} .why-cta-block p{font-size:1.075rem;color:var(--text-soft);line-height:1.75;margin-bottom:1.8rem;font-weight:300} .contact-rows{display:flex;flex-direction:column;gap:.8rem;margin-bottom:1.8rem} .contact-row{display:flex;align-items:center;gap:10px;font-size:1.025rem;color:var(--text-soft)} /* index.html uses SVG icons; apply.html/checklist use emoji font-size */ .contact-icon{width:34px;height:34px;background:var(--gold-pale);border:1px solid var(--rule-light);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0} .contact-icon svg{width:16px;height:16px;stroke:var(--gold);stroke-width:2;fill:none} .contact-row a{color:var(--gold);text-decoration:none} .contact-row a:hover{text-decoration:underline} /* ── WHY/CONTACT LOCATION IMAGE ── */ .why-location-img{width:100%;height:200px;object-fit:cover;border-radius:14px;margin-bottom:1.6rem;display:block;border:1px solid var(--navy-border);animation:imgFadeIn 1s ease both} /* ─────────────────────────────────────────────────────────────────── */ /* 18. FOOTER */ /* ─────────────────────────────────────────────────────────────────── */ footer{background:var(--navy-mid);border-top:1px solid var(--navy-border);padding:3rem 0} .footer-inner{max-width:1280px;margin:0 auto;padding:0 5vw;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem} .footer-logo{display:flex;align-items:center;gap:10px;text-decoration:none} .footer-copy{font-size:.905rem;color:var(--slate);line-height:1.6;text-align:left} .footer-links{display:flex;gap:1.5rem} .footer-link{font-size:.925rem;color:var(--slate-light);text-decoration:none;transition:color .2s} .footer-link:hover{color:var(--gold)} /* ─────────────────────────────────────────────────────────────────── */ /* 19. FLOATING HOME / SCROLL-UP BUTTON */ /* ─────────────────────────────────────────────────────────────────── */ .float-btn{position:fixed;bottom:2rem;right:2rem;z-index:999;display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease;transform:translateY(12px)} .float-btn.visible{opacity:1;pointer-events:all;transform:translateY(0)} /* index.html uses a