2 lines
7.1 KiB
CSS
2 lines
7.1 KiB
CSS
:root{--bg:#f6f8fc;--white:#fff;--text:#142238;--muted:#68778b;--blue:#2563eb;--green:#10b981;--border:#e5eaf1;--shadow:0 25px 70px #10264d16;--radius:22px;--max:1180px}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}a{text-decoration:none;color:inherit}.container{width:min(var(--max),calc(100% - 40px));margin:auto}.header{position:fixed;z-index:10;top:0;width:100%;background:#ffffffd9;backdrop-filter:blur(15px);border-bottom:1px solid #e5eaf1aa}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:9px;font-weight:800}.brand>span:last-child{color:var(--blue)}.mark{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:var(--blue);color:#fff!important}.links{display:flex;gap:30px;color:#526177;font-size:.9rem;font-weight:600}.links a:hover{color:var(--blue)}.menu{display:none;border:0;background:none;font-size:1.5rem}.hero{min-height:760px;padding:150px 0 100px;position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#0a1b35,#123f79 48%,#176a72)}.orb{position:absolute;border-radius:50%;filter:blur(5px);opacity:.25}.one{width:450px;height:450px;right:-100px;top:100px;background:#38bdf8}.two{width:380px;height:380px;left:-180px;bottom:-170px;background:#22c55e}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:65px}.eyebrow{display:inline-block;color:#2d72ed;font-size:.72rem;font-weight:800;letter-spacing:.14em;margin-bottom:13px}.hero .eyebrow{color:#8bd7ff}h1{font-size:clamp(3rem,5vw,5.1rem);line-height:1.03;letter-spacing:-.055em}h1 em{font-style:normal;color:#7de2c4}.hero-copy>p{max-width:610px;margin:25px 0;color:#d4e1f0;font-size:1.08rem}.actions{display:flex;gap:13px;flex-wrap:wrap}.btn{border:0;border-radius:13px;padding:14px 21px;font:inherit;font-weight:700;cursor:pointer;display:inline-flex;justify-content:center;gap:10px;transition:.2s}.btn.primary{background:var(--blue);color:#fff;box-shadow:0 10px 30px #0b2b6640}.btn.primary:hover{transform:translateY(-2px);filter:brightness(1.08)}.btn.outline{border:1px solid #ffffff40;color:#fff}.trust{margin-top:27px;color:#bfd0e5;font-size:.76rem}.visual{min-height:450px;display:grid;place-items:center;position:relative}.dashboard{width:min(470px,100%);padding:28px;border:1px solid #ffffff25;border-radius:28px;background:#ffffff13;box-shadow:0 35px 90px #0005;backdrop-filter:blur(16px)}.dash-top,.dash-bottom{display:flex;justify-content:space-between;color:#bfd0e5;font-size:.77rem}.dash-top b{color:#4ade80}.dashboard>strong{display:block;font-size:2.35rem;margin:8px 0}.mini{height:180px}.mini svg{width:100%;height:100%}.line{fill:none;stroke:#78e4c1;stroke-width:5;stroke-linecap:round}.fill{fill:#78e4c120}.dash-bottom{color:#7de2c4}.float{position:absolute;display:flex;align-items:center;gap:11px;background:#fff;color:var(--text);padding:13px 17px;border-radius:15px;box-shadow:var(--shadow)}.float small{display:block;color:var(--muted);font-size:.65rem}.float b{display:block;font-size:.85rem}.goal{right:0;top:45px}.saved{left:0;bottom:45px}.section{padding:105px 0}.heading{max-width:720px;margin-bottom:45px}.heading h2,.sim-copy h2{font-size:clamp(2rem,3.5vw,3.1rem);line-height:1.12;letter-spacing:-.04em}.heading p,.sim-copy>p{color:var(--muted);margin-top:14px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.card{padding:30px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);transition:.25s}.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}.icon{font-size:2rem;margin-bottom:20px}.card small{color:#9aa7b7;font-weight:800;font-size:.7rem}.card h3{font-size:1.35rem;margin:5px 0}.card p{color:var(--muted);font-size:.9rem}.sim-section{padding:105px 0;background:#edf4fb}.sim-grid,.goal-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:center}.tip{display:flex;gap:12px;margin-top:28px;padding:17px;background:#fff;border:1px solid var(--border);border-radius:16px}.tip p{color:var(--muted);font-size:.75rem;margin-top:3px}.sim-card{background:#fff;border:1px solid var(--border);border-radius:26px;padding:30px;box-shadow:var(--shadow)}.inputs{display:grid;grid-template-columns:1fr 1fr;gap:18px}.inputs label{font-size:.75rem;font-weight:700;color:#506076}.input{display:flex;align-items:center;margin-top:7px;padding:0 11px;border:1px solid #dce3ec;border-radius:11px;background:#fbfcfe}.input span{color:#8996a7;font-size:.74rem}.input input{width:100%;padding:12px 7px;border:0;outline:0;background:none;font:inherit;color:var(--text)}.full{width:100%;margin-top:22px}.results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:24px}.results>div{padding:15px;border-radius:14px;background:#f5f7fa}.results small{display:block;color:var(--muted);font-size:.65rem}.results b{display:block;margin-top:4px}.results .highlight{background:#eaf8f2}.highlight b{color:#079669}.sim-card canvas{width:100%;height:190px;margin-top:15px;border-top:1px solid var(--border)}.goal-card{padding:30px;background:#fff;border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow)}.goal-head,.goal-values,.goal-foot{display:flex;justify-content:space-between;align-items:center}.goal-head strong{color:var(--blue)}.progress{height:12px;margin:20px 0 8px;background:#edf1f6;border-radius:20px;overflow:hidden}.progress span{display:block;width:64%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),#25b99a);transition:.7s}.goal-values,.goal-foot{font-size:.76rem;color:var(--muted)}.goal-foot{margin-top:24px}.goal-foot button{border:0;background:none;color:var(--blue);font-weight:700;cursor:pointer}.quote{padding:70px 0;background:#fff;text-align:center}.quote div{max-width:800px}.quote span{font-size:5rem;color:#bdd5ff;line-height:.7}.quote p{font-size:1.4rem;font-weight:600}footer{padding:50px 0;background:#0d1b30;color:#aebed1}.footer{display:grid;grid-template-columns:1.5fr 1fr auto;gap:30px;align-items:end}.footer .brand{color:#fff}.footer p{font-size:.78rem;margin-top:10px}.footer-links{display:flex;gap:22px;font-size:.8rem}.footer-links a:hover{color:#fff}footer small{font-size:.7rem}.reveal{opacity:0;transform:translateY(25px);transition:.7s}.reveal.visible{opacity:1;transform:none}.delay1{transition-delay:.12s}.delay2{transition-delay:.24s}@media(max-width:900px){.hero-grid,.sim-grid,.goal-grid{grid-template-columns:1fr}.hero{padding-top:125px}.cards{grid-template-columns:1fr}.links{display:none}.menu{display:block}.nav.open .links{display:flex;position:absolute;top:76px;left:0;right:0;background:#fff;padding:20px;flex-direction:column;gap:16px;border-bottom:1px solid var(--border)}.footer{grid-template-columns:1fr}.footer-links{order:3}}@media(max-width:560px){.container{width:calc(100% - 28px)}h1{font-size:2.8rem}.hero{min-height:auto;padding-bottom:70px}.visual{min-height:340px}.dashboard{padding:20px}.float{padding:10px 12px}.goal{right:-3px}.saved{left:-3px}.section,.sim-section{padding:75px 0}.inputs,.results{grid-template-columns:1fr}.quote p{font-size:1.15rem}}
|