placidefinance-jinguel.html

[Placide224]

<title>PlacideFinance (PF) • Signature</title> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

    :root {
        --bg: #0A0A0A;
        --accent: #9F1239;
    }
    
    body {
        margin: 0;
        background: var(--bg);
        color: white;
        font-family: 'Inter', sans-serif;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .container { position: relative; width: 100%; height: 100%; }
    
    .phase {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        opacity: 0;
        transition: opacity 1.2s ease;
    }
    
    .text {
        font-size: 3.8rem;
        font-weight: 600;
        letter-spacing: -0.02em;
        opacity: 0;
        transform: scale(0.9);
        filter: blur(6px);
        transition: all 1.8s cubic-bezier(0.23, 1, 0.32, 1);
        margin: 20px 0;
    }
    
    .text.active {
        opacity: 1;
        transform: scale(1);
        filter: blur(0);
    }
    
    .signature {
        font-size: 6.5rem;
        font-weight: 700;
        letter-spacing: -0.05em;
        opacity: 0;
        transform: scale(0.85);
        transition: all 2.4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    .signature.active { opacity: 1; transform: scale(1); }
    
    .subtitle {
        font-size: 1.9rem;
        font-weight: 500;
        letter-spacing: 0.1em;
        margin-top: 30px;
        opacity: 0;
        transition: opacity 2s ease;
    }
    
    .subtitle.active { opacity: 0.9; }
    
    .line {
        position: absolute;
        bottom: 15%;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, transparent, var(--accent), transparent);
        box-shadow: 0 0 20px var(--accent);
        transition: width 4s cubic-bezier(0.23, 1, 0.32, 1);
    }
    
    .line.active {
        width: 480px;
        left: 50%;
        margin-left: -240px;
    }
</style>

Start from nothing.

Build systems, not ideas.

Turn problems into solutions.

Execution over motivation.

    <!-- Phase 2 -->
    <div id="phase2" class="phase">
        <div id="brand" class="signature">PLACIDEFINANCE</div>
        <div style="font-size:3rem; font-weight:600; margin-top:-15px;">(PF)</div>
        <div id="sub" class="subtitle">Systems over noise.</div>
        <div class="line" id="line"></div>
    </div>
</div>

<script>
    const texts = [document.getElementById('t1'), document.getElementById('t2'), document.getElementById('t3'), document.getElementById('t4')];
    let index = 0;

    function startPhase1() {
        document.getElementById('phase1').style.opacity = 1;
        texts.forEach(t => t.classList.remove('active'));
        index = 0;
        showText();
    }

    function showText() {
        if (index > 0) texts[index-1].classList.remove('active');
        if (index < texts.length) {
            texts[index].classList.add('active');
            index++;
            setTimeout(showText, 3800);
        } else {
            setTimeout(() => {
                document.getElementById('phase1').style.opacity = 0;
                setTimeout(() => {
                    document.getElementById('phase1').style.display = 'none';
                    document.getElementById('phase2').style.display = 'flex';
                    document.getElementById('phase2').style.opacity = 1;
                    startPhase2();
                }, 1000);
            }, 1500);
        }
    }

    function startPhase2() {
        document.getElementById('brand').classList.add('active');
        document.getElementById('line').classList.add('active');
        setTimeout(() => document.getElementById('sub').classList.add('active'), 1400);
        setTimeout(resetAll, 8000);
    }

    function resetAll() {
        document.getElementById('phase2').style.opacity = 0;
        setTimeout(() => {
            document.getElementById('phase2').style.display = 'none';
            document.getElementById('brand').classList.remove('active');
            document.getElementById('line').classList.remove('active');
            document.getElementById('sub').classList.remove('active');
            startPhase1();
        }, 1200);
    }

    window.onload = startPhase1;

    // Appuie sur R pour relancer
    document.addEventListener('keydown', e => { if (e.key.toLowerCase() === 'r') resetAll(); });
</script>