/* QuickFund — brand tone tokens + slider + animations. Default = Reassuring Teal; = original baseline. */ :root{ --brand-50:240 253 250; --brand-100:204 251 241; --brand-200:153 246 228; --brand-300:94 234 212; --brand-400:45 212 191; --brand-500:20 184 166; --brand-600:15 118 110; --brand-700:17 94 89; --brand-800:19 78 74; --brand-rgb:20 184 166; } html[data-tone="blue"]{ --brand-50:239 246 255; --brand-100:219 234 254; --brand-200:191 219 254; --brand-300:147 197 253; --brand-400:96 165 250; --brand-500:59 130 246; --brand-600:37 99 235; --brand-700:29 78 216; --brand-800:30 64 175; --brand-rgb:59 130 246; } html{ scroll-behavior:smooth; } .qf-slider{ -webkit-appearance:none; appearance:none; background:transparent; } .qf-slider::-webkit-slider-runnable-track{ background:transparent; height:6px; } .qf-slider::-moz-range-track{ background:transparent; height:6px; } .qf-slider::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; height:22px; width:22px; border-radius:9999px; background:#fff; border:2px solid rgb(var(--brand-600)); box-shadow:0 4px 12px -2px rgb(var(--brand-rgb)/0.4), 0 0 0 4px rgb(var(--brand-rgb)/0.08); cursor:grab; margin-top:-8px; transition:transform .15s ease, box-shadow .15s ease; } .qf-slider::-webkit-slider-thumb:active{ cursor:grabbing; transform:scale(1.08); } .qf-slider::-moz-range-thumb{ height:22px; width:22px; border-radius:9999px; background:#fff; border:2px solid rgb(var(--brand-600)); box-shadow:0 4px 12px -2px rgb(var(--brand-rgb)/0.4), 0 0 0 4px rgb(var(--brand-rgb)/0.08); cursor:grab; } @keyframes qf-fadein{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} } .qf-fadein{ animation:qf-fadein .35s cubic-bezier(.22,.61,.36,1) both; }