@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap'); /* ========================================================= CardPulse ยท Shared UI (cardpulse-ui.css) One design system for every page. Page files stay lean. ========================================================= */ :root{ --bg:#08080d;--bg2:#0c0c15;--surf:#11111b;--card:#15151f;--line:rgba(255,255,255,.07); --ink:#ececf4;--mut:#8888a0;--accent:#7c6cff;--accent2:#9a8dff;--teal:#2dd4bf; --pos:#34d399;--neg:#fb7185;--gold:#f5b942;--red:#fb7185;--green:#34d399; --sans:"Inter",sans-serif;--disp:"Space Grotesk",sans-serif;--mono:"JetBrains Mono",monospace; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.5;min-height:100vh;display:flex;flex-direction:column} body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(ellipse 90% 50% at 50% -8%,rgba(124,108,255,.14),transparent 70%)} a{color:inherit} img,svg{max-width:100%} .wrap{max-width:1180px;margin:0 auto;padding:0 32px;width:100%} /* ---------- Holo foil signature ---------- */ .holo{background:linear-gradient(115deg,#7c6cff 0%,#2dd4bf 22%,#7c6cff 38%,#ff6bd6 58%,#f5b942 76%,#7c6cff 100%); background-size:280% 280%;animation:holoShift 7s linear infinite; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} @keyframes holoShift{0%{background-position:0% 50%}100%{background-position:280% 50%}} /* ---------- Buttons ---------- */ .btn{font-family:var(--sans);font-weight:600;font-size:14px;text-decoration:none;border-radius:10px; padding:10px 18px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px; border:1px solid transparent;transition:.18s;line-height:1.2} .btn-solid{background:var(--accent);color:#fff} .btn-solid:hover{background:var(--accent2);transform:translateY(-1px)} .btn-line{border-color:var(--line);color:var(--ink)} .btn-line:hover{border-color:var(--mut)} .btn-danger{background:transparent;border-color:rgba(251,113,133,.3);color:var(--neg)} .btn-danger:hover{background:rgba(251,113,133,.08)} .btn-lg{padding:14px 24px;font-size:15px;border-radius:12px} .btn-block{width:100%} .btn:disabled{opacity:.45;cursor:not-allowed;transform:none} .btn-foil{position:relative;color:#0a0a12;border:none;overflow:hidden;font-weight:700; background:linear-gradient(115deg,#9a8dff,#2dd4bf,#9a8dff,#ff8fe0,#f5b942,#9a8dff);background-size:280% 280%; animation:holoShift 7s linear infinite;box-shadow:0 8px 30px -8px rgba(124,108,255,.55)} .btn-foil:hover{transform:translateY(-1px);box-shadow:0 12px 40px -8px rgba(124,108,255,.8)} .btn-foil::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 4.5s ease-in-out infinite} @keyframes sheen{0%,55%{transform:translateX(-120%)}80%,100%{transform:translateX(120%)}} /* ---------- Nav (shared chrome) ---------- */ nav{position:sticky;top:0;z-index:200;backdrop-filter:blur(18px);background:rgba(8,8,13,.72);border-bottom:1px solid var(--line)} nav,.cp-nav-in{display:flex;align-items:center;justify-content:space-between} nav{padding:0} .cp-nav-in{max-width:1180px;margin:0 auto;padding:14px 32px;width:100%} /* allow simple pages that put items straight in