/* ========================================================================= CoinZap — clean modern crypto converter Theming via [data-theme] on . Auto follows OS via prefers-color-scheme. ========================================================================= */ :root { --brand-1: #6c5ce7; --brand-2: #00b8d9; --radius: 18px; --radius-sm: 12px; --ease: cubic-bezier(.16, 1, .3, 1); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ---------- Light (default) ---------- */ :root, [data-theme="light"] { --bg: #f4f5fb; --bg-grad-1: #eef0fc; --bg-grad-2: #f7f9ff; --surface: #ffffff; --surface-2: #f6f7fb; --surface-3: #eef0f6; --border: #e6e8f0; --border-strong: #d6d9e6; --text: #1a1c2b; --text-soft: #5b5f76; --text-faint: #9094ab; --accent: #6c5ce7; --accent-soft: rgba(108, 92, 231, .12); --up: #16b364; --down: #ef4444; --shadow: 0 22px 50px -28px rgba(33, 36, 71, .35); --shadow-sm: 0 4px 16px -8px rgba(33, 36, 71, .25); --chart-line: #6c5ce7; } /* ---------- Dark ---------- */ [data-theme="dark"] { --bg: #0d0f1a; --bg-grad-1: #14172a; --bg-grad-2: #0a0b14; --surface: #161a2c; --surface-2: #1d2238; --surface-3: #262c46; --border: #262c44; --border-strong: #343c5c; --text: #eef0fa; --text-soft: #a3a9c4; --text-faint: #6b7196; --accent: #8b7cf0; --accent-soft: rgba(139, 124, 240, .16); --up: #2dd47f; --down: #ff5d5d; --shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); --shadow-sm: 0 6px 20px -10px rgba(0, 0, 0, .6); --chart-line: #8b7cf0; } /* ---------- Warp (neon) ---------- */ [data-theme="warp"] { --bg: #05010f; --bg-grad-1: #1a0938; --bg-grad-2: #02010a; --surface: #120a2b; --surface-2: #1b1040; --surface-3: #261658; --border: #2c1a5e; --border-strong: #4324a0; --text: #f3eaff; --text-soft: #b9a6ff; --text-faint: #7c6bc0; --accent: #ff3df0; --accent-soft: rgba(255, 61, 240, .15); --brand-1: #ff3df0; --brand-2: #18e0ff; --up: #1dffa8; --down: #ff4d8d; --shadow: 0 30px 80px -28px rgba(120, 0, 255, .55); --shadow-sm: 0 8px 30px -12px rgba(120, 0, 255, .5); --chart-line: #18e0ff; } /* ---------- Auto: dark vars when OS is dark ---------- */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg: #0d0f1a; --bg-grad-1: #14172a; --bg-grad-2: #0a0b14; --surface: #161a2c; --surface-2: #1d2238; --surface-3: #262c46; --border: #262c44; --border-strong: #343c5c; --text: #eef0fa; --text-soft: #a3a9c4; --text-faint: #6b7196; --accent: #8b7cf0; --accent-soft: rgba(139, 124, 240, .16); --up: #2dd47f; --down: #ff5d5d; --shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); --shadow-sm: 0 6px 20px -10px rgba(0, 0, 0, .6); --chart-line: #8b7cf0; } } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); color: var(--text); background: var(--bg); background-image: radial-gradient(1100px 600px at 15% -8%, var(--bg-grad-1), transparent 60%), radial-gradient(900px 600px at 100% 0%, var(--bg-grad-2), transparent 55%); background-attachment: fixed; min-height: 100vh; overflow-x: hidden; /* contain the full-bleed chart */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .app { max-width: 560px; margin: 0 auto; padding: 18px 18px 0; /* Full-height column so the chart can be pinned to the bottom of the page. */ min-height: 100vh; display: flex; flex-direction: column; } .stage { display: flex; flex-direction: column; flex: 1 1 auto; } /* ===================== Topbar ===================== */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px 22px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); } .brand__mark { display: inline-flex; filter: drop-shadow(0 6px 14px var(--accent-soft)); } .brand__name { font-weight: 800; font-size: 20px; letter-spacing: -.02em; } .topbar__actions { display: flex; gap: 8px; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text-soft); cursor: pointer; transition: transform .15s var(--ease), color .15s, border-color .15s, background .15s; } .iconbtn:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); } .iconbtn:active { transform: translateY(0); } /* ===================== Converter ===================== */ .converter { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; } .field { position: relative; } .field + .field { margin-top: 6px; } .field__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-faint); margin: 0 2px 8px; text-transform: uppercase; letter-spacing: .06em; } .field__row { display: flex; align-items: center; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 10px 10px 16px; transition: border-color .15s, box-shadow .15s; } .field__row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .field__input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text); font-size: 30px; font-weight: 700; letter-spacing: -.02em; padding: 6px 0; outline: none; font-variant-numeric: tabular-nums; } .field__input::placeholder { color: var(--text-faint); } .field__sub { margin: 7px 2px 0; font-size: 13px; color: var(--text-faint); } /* Picker button */ .picker { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 8px 12px 8px 10px; cursor: pointer; font-weight: 700; font-size: 15px; flex-shrink: 0; transition: border-color .15s, transform .15s var(--ease), background .15s; } .picker:hover { border-color: var(--border-strong); transform: translateY(-1px); } .picker__icon { width: 24px; height: 24px; border-radius: 50%; background: var(--surface-3); object-fit: cover; } .picker__flag { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 13px; } .picker__sym { letter-spacing: .01em; } .picker__chev { color: var(--text-faint); margin-left: -2px; } /* Swap button (overlaps the gap between fields) */ .swap { position: absolute; left: 50%; top: calc(50% - 16px); transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 14px; border: 4px solid var(--surface); background: var(--accent); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease), filter .15s; z-index: 2; } .swap:hover { filter: brightness(1.05); } .swap:active { transform: translate(-50%, -50%) scale(.92) rotate(180deg); } /* Rate line */ .rateline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border); flex-wrap: wrap; } .rateline__main { font-size: 14.5px; font-weight: 600; color: var(--text-soft); font-variant-numeric: tabular-nums; } .rateline__meta { display: inline-flex; align-items: center; gap: 10px; } .rateline__updated { font-size: 12px; color: var(--text-faint); } .chip { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; } .chip--up { color: var(--up); background: color-mix(in srgb, var(--up) 14%, transparent); } .chip--down { color: var(--down); background: color-mix(in srgb, var(--down) 14%, transparent); } .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 70%, transparent); animation: pulse 1.8s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } /* ===================== Chart ===================== */ .chartcard { /* Full-bleed: break out of the centered column to span the whole viewport. */ /* margin-top:auto pushes the chart to the bottom of the full-height column. */ margin-top: auto; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 clamp(16px, 4vw, 56px); background: none; border: none; box-shadow: none; } .chartcard__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; } .chartcard__title { display: inline-flex; align-items: baseline; gap: 10px; font-weight: 800; font-size: 16px; } .chartcard__src { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .04em; } .ranges { display: inline-flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 999px; } .range { border: none; background: transparent; color: var(--text-soft); font-weight: 700; font-size: 12.5px; padding: 6px 11px; border-radius: 999px; cursor: pointer; transition: color .15s, background .15s; } .range:hover { color: var(--text); } .range.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .chartcard__canvaswrap { position: relative; height: clamp(220px, 30vw, 380px); } .chartcard__canvaswrap canvas { width: 100% !important; height: 100% !important; } .chartcard__empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 13px; pointer-events: none; } .disclaimer { margin: 22px 6px 0; font-size: 11.5px; line-height: 1.6; color: var(--text-faint); text-align: center; } /* ===================== Overlays (picker + settings) ===================== */ .overlay { position: fixed; inset: 0; background: color-mix(in srgb, #05060f 55%, transparent); backdrop-filter: blur(4px); display: flex; z-index: 50; animation: fade .18s var(--ease); } /* `hidden` must win over the author `display:flex` above. */ .overlay[hidden] { display: none; } @keyframes fade { from { opacity: 0; } } /* Picker sheet (centered) */ .sheet { margin: auto; width: min(440px, calc(100vw - 32px)); max-height: min(70vh, 620px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; animation: pop .22s var(--ease); } @keyframes pop { from { transform: translateY(10px) scale(.98); opacity: 0; } } .sheet__head { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--border); } .sheet__search { flex: 1; border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; padding: 11px 14px; font-size: 15px; color: var(--text); outline: none; font-family: var(--font); } .sheet__search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .sheet__list { overflow-y: auto; padding: 6px; } .option { display: flex; align-items: center; gap: 12px; width: 100%; border: none; background: transparent; color: var(--text); padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left; transition: background .12s; } .option:hover, .option.is-active { background: var(--surface-2); } .option__icon { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-3); flex-shrink: 0; object-fit: cover; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--accent); } .option__text { display: flex; flex-direction: column; min-width: 0; } .option__sym { font-weight: 700; font-size: 14.5px; } .option__name { font-size: 12.5px; color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .option__check { margin-left: auto; color: var(--accent); } .sheet__empty { padding: 30px; text-align: center; color: var(--text-faint); font-size: 14px; } /* Settings drawer (slides from right) */ .drawer { margin-left: auto; width: min(380px, 100vw); height: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow); padding: 18px; overflow-y: auto; animation: slide .26s var(--ease); } @keyframes slide { from { transform: translateX(24px); opacity: .6; } } .drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .drawer__title { font-size: 18px; font-weight: 800; margin: 0; } .setblock { padding: 18px 0; border-bottom: 1px solid var(--border); } .setblock:last-child { border-bottom: none; } .setblock__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); margin-bottom: 10px; } .setblock__hint { margin: 10px 0 0; font-size: 12px; color: var(--text-faint); line-height: 1.6; } .setblock__hint kbd { background: var(--surface-3); border-radius: 5px; padding: 1px 6px; font-family: ui-monospace, monospace; font-size: 11px; border: 1px solid var(--border); } .segmented { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 12px; } .segmented--wrap { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); } .segmented button { border: none; background: transparent; color: var(--text-soft); font-weight: 700; font-size: 13px; padding: 9px 6px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; } .segmented button:hover { color: var(--text); } .segmented button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .select { width: 100%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 10px; padding: 11px 12px; font-size: 14px; font-family: var(--font); outline: none; cursor: pointer; } .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); transition: border-color .15s, transform .15s var(--ease), background .15s; } .btn:hover { border-color: var(--border-strong); transform: translateY(-1px); } .btn--ghost { background: var(--surface-2); } /* Toast */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(10px); background: var(--text); color: var(--surface); padding: 11px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); z-index: 60; opacity: 0; transition: opacity .2s, transform .2s var(--ease); } .toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); } @media (max-width: 480px) { .field__input { font-size: 26px; } .app { padding-top: 12px; } }