Banco Ipê Neon s://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap'); :root{ --ipe-purple: #3D1F4C; --ipe-purple-deep: #2A1436; --ipe-gold: #F2A93B; --ipe-gold-soft: #F7C874; --cream: #FBF6EE; --ink: #241730; --muted: #8A7B94; --line: #E9E0EE; } *{ box-sizing:border-box; } body{ margin:0; font-family:'Manrope', sans-serif; background: #EDE3D6; display:flex; align-items:center; justify-content:center; min-height:100vh; padding: 32px 16px; } .phone{ width: 390px; max-width: 100%; background: var(--cream); border-radius: 44px; border: 10px solid var(--ipe-purple-deep); box-shadow: 0 30px 60px -20px rgba(42,20,54,0.5); overflow: hidden; position: relative; } .notch{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:22px; background:var(--ipe-purple-deep); border-radius:0 0 16px 16px; z-index:5; } .header{ background: linear-gradient(160deg, var(--ipe-purple) 0%, var(--ipe-purple-deep) 100%); padding: 38px 22px 46px; position:relative; color:#fff; } .header::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:36px; background: var(--cream); border-radius: 50% 50% 0 0 / 100% 100% 0 0; } .topbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 26px; } .user{ display:flex; align-items:center; gap:10px; } .avatar{ width:40px; height:40px; border-radius:50%; background: var(--ipe-gold); display:flex; align-items:center; justify-content:center; font-family:'Fraunces', serif; font-weight:600; color: var(--ipe-purple-deep); font-size:16px; } .user-name{ font-family:'Fraunces', serif; font-size: 16px; font-weight:500; letter-spacing:0.2px; } .sair{ display:flex; align-items:center; gap:6px; font-size:13px; color: var(--ipe-gold-soft); text-decoration:none; } .bell{ position:relative; width:20px; height:20px; } .bell::after{ content:""; position:absolute; top:-2px; right:-2px; width:8px; height:8px; background:#4CC38A; border-radius:50%; border:2px solid var(--ipe-purple); } .saldo-label{ font-size:12px; letter-spacing: 1.5px; text-transform:uppercase; color: var(--ipe-gold-soft); margin-bottom:10px; font-weight:700; } .saldo-row{ display:flex; align-items:center; justify-content:space-between; } .saldo-value-wrap{ display:flex; align-items:center; gap:14px; } .saldo-value{ font-family:'Fraunces', serif; font-size: 26px; font-weight:600; letter-spacing:0.2px; min-width: 150px; transition: filter 0.2s ease; } .saldo-value.hidden-blur{ filter: blur(7px); user-select:none; } .eye-btn{ background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff; transition: background 0.15s ease; } .eye-btn:hover{ background: rgba(255,255,255,0.22); } .eye-btn svg{ width:17px; height:17px; } .extrato-link{ font-size:13px; color: var(--ipe-gold-soft); text-decoration: underline; cursor:pointer; font-weight:600; } .search{ margin: 0 22px 0; margin-top: -18px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(6px); border-radius: 18px; padding: 13px 16px; display:flex; align-items:center; gap:10px; color:#fff; font-size:13px; position:relative; z-index:2; } .search .badge{ background: var(--ipe-gold); color: var(--ipe-purple-deep); font-weight:800; font-size:11px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .search input{ background:none; border:none; color:#fff; font-size:13px; flex:1; outline:none; font-family:'Manrope', sans-serif; } .search input::placeholder{ color: rgba(255,255,255,0.75); } .content{ padding: 28px 22px 30px; } .section-title{ font-family:'Fraunces', serif; font-size:19px; font-weight:600; color: var(--ink); margin: 0 0 16px; } .grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px 8px; margin-bottom: 30px; } .grid-item{ display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; } .grid-icon{ width:56px; height:56px; border-radius: 18px; background: #fff; border: 1px solid var(--line); display:flex; align-items:center; justify-content:center; box-shadow: 0 4px 10px rgba(61,31,76,0.05); transition: transform 0.15s ease, box-shadow 0.15s ease; } .grid-item:hover .grid-icon{ transform: translateY(-2px); box-shadow: 0 8px 16px rgba(61,31,76,0.1); } .grid-icon svg{ width:24px; height:24px; stroke: var(--ipe-purple); } .grid-item.active .grid-icon svg{ stroke: var(--ipe-gold); } .grid-item.active .grid-label{ color: var(--ipe-purple); font-weight:700; } .grid-label{ font-size:11.5px; color: var(--ink); text-align:center; font-weight:600; } .promo{ background:#fff; border-radius:18px; border:1px solid var(--line); display:flex; overflow:hidden; margin-bottom:14px; box-shadow: 0 6px 16px rgba(61,31,76,0.06); } .promo-img{ width:88px; background: linear-gradient(160deg, var(--ipe-gold-soft), var(--ipe-gold)); flex-shrink:0; } .promo-body{ padding: 16px 14px; display:flex; flex-direction:column; justify-content:center; gap:4px; flex:1; } .promo-title{ font-family:'Fraunces', serif; font-weight:600; font-size:14.5px; color: var(--ink); } .promo-sub{ font-size:12px; color: var(--muted); } .dots{ display:flex; justify-content:center; gap:6px; margin-bottom: 30px; } .dot{ width:6px; height:6px; border-radius:50%; background: var(--line); } .dot.on{ width:18px; border-radius:4px; background: var(--ipe-purple); } .benefits{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; } .benefit-card{ border-radius:18px; padding: 18px 16px; color:#fff; min-height: 110px; display:flex; flex-direction:column; justify-content:space-between; } .benefit-card.a{ background: linear-gradient(140deg, var(--ipe-purple), var(--ipe-purple-deep)); } .benefit-card.b{ background: linear-gradient(140deg, var(--ipe-gold), #E08F1F); } .benefit-title{ font-family:'Fraunces', serif; font-weight:600; font-size:14px; line-height:1.25; } .benefit-sub{ font-size:11px; opacity:0.85; margin-top:6px; } .footnote{ text-align:center; font-size:10.5px; color: var(--muted); margin-top: 22px; letter-spacing: 0.3px; } </style> </head> <body> <div class="phone"> <div class="notch"></div> <div class="header"> <div class="topbar"> <div class="user"> <div class="avatar">RC</div> <div class="user-name">Raphael Vicente Cabral</div> </div> <a class="sair" href="#"> <span class="bell"> <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zM18 16v-5a6 6 0 1 0-12 0v5l-2 2v1h16v-1l-2-2z"/></svg> </span> Sair </a> </div> <div class="saldo-label">Saldo disponível</div> <div class="saldo-row"> <div class="saldo-value-wrap"> <div class="saldo-value hidden-blur" id="saldoValue">R$ 170.556,00</div> <div class="eye-btn" id="eyeBtn" title="Mostrar/ocultar saldo"> <svg id="eyeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"> <path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/> <circle cx="12" cy="12" r="3"/> </svg> </div> </div> <div class="extrato-link">Ver extrato</div> </div> </div> <div class="search"> <div class="badge">JÁ</div> <input type="text" placeholder="Buscar serviço ou falar com a JÁ"> <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg> </div> <div class="content"> <h2 class="section-title">Favoritos</h2> <div class="grid"> <div class="grid-item"> <div class="grid-icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M17 1l4 4-4 4"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><path d="M7 23l-4-4 4-4"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg></div> <div class="grid-label">Transferências</div> </div> <div class="grid-item active"> <div class="grid-icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2l3 5-3 5-3-5z"/><path d="M12 12l3 5-3 5-3-5z"/></svg></div> <div class="grid-label">Pix</div> </div> <div class="grid-item"> <div class="grid-icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="7" width="4" height="10"/><rect x="10" y="4" width="4" height="16"/><rect x="17" y="9" width="4" height="8"/></svg></div> <div class="grid-label">Pagamentos</div> </div> <div class="grid-item"> <div class="grid-icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="5" width="20" height="14" rx="2"/><line x1="2" y1="10" x2="22" y2="10"/></svg></div> <div class="grid-label">Cartões</div> </div> <div class="grid-item"> <div class="grid-icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M9.5 9.5a2.5 2.5 0 1 1 3 2.45c-.9.2-1.5.9-1.5 1.8v.25"/><line x1="12" y1="16.5" x2="12" y2="16.5"/></svg></div> <div class="grid-label">Empréstimos</div> </div> <div class="grid-item"> <div class="grid-icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 17 9 11 13 15 21 6"/><polyline points="15 6 21 6 21 12"/></svg></div> <div class="grid-label">Investimentos</div> </div> <div class="grid-item"> <div class="grid-icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 1 0 18"/></svg></div> <div class="grid-label">Open Finance</div> </div> <div class="grid-item"> <div class="grid-icon"><svg viewBox="0 0 24 24" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="6" x2="20" y2="6"/><circle cx="9" cy="6" r="2"/><line x1="4" y1="12" x2="20" y2="12"/><circle cx="16" cy="12" r="2"/><line x1="4" y1="18" x2="20" y2="18"/><circle cx="10" cy="18" r="2"/></svg></div> <div class="grid-label">Personalizar</div> </div> </div> <div class="promo"> <div class="promo-img"></div> <div class="promo-body"> <div class="promo-title">O Pix no Ipê ficou ainda melhor</div> <div class="promo-sub">Cobertura contra golpe incluída</div> </div> </div> <div class="dots"> <div class="dot on"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <h2 class="section-title">Benefícios e parcerias</h2> <div class="benefits"> <div class="benefit-card a"> <div class="benefit-title">Mimos para você aproveitar</div> <div class="benefit-sub">Descontos, cashback e ofertas</div> </div> <div class="benefit-card b"> <div class="benefit-title">Ipê Tag de pedágio</div> <div class="benefit-sub">Com condições exclusivas</div> </div> </div> <div class="footnote">Banco Ipê — app fictício, apenas para prototipagem e estudo.</div> </div> </div> <script> const eyeBtn = document.getElementById('eyeBtn'); const saldoValue = document.getElementById('saldoValue'); const eyeIcon = document.getElementById('eyeIcon'); const eyeOpen = `<path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/>`; const eyeClosed = `<path d="M3 3l18 18"/><path d="M10.6 10.6a2 2 0 0 0 2.8 2.8"/><path d="M9.9 4.24A9.6 9.6 0 0 1 12 4c7 0 11 8 11 8a17.9 17.9 0 0 1-3.06 3.94M6.6 6.6C3.9 8.3 2 10.9 1 12c0 0 4 8 11 8 1.6 0 3.03-.36 4.28-.94"/>`; let visible = false; eyeBtn.addEventListener('click', () => { visible = !visible; if (visible) { saldoValue.classList.remove('hidden-blur'); eyeIcon.innerHTML = eyeOpen; } else { saldoValue.classList.add('hidden-blur'); eyeIcon.innerHTML = eyeClosed; } }); </script> </body> </html>