soliq-design-system 1.0.2

package/dist/SessionExpired/SessionExpired.styles.js

@@ -0,0 +1,355 @@
+export const styles = `
+.session-expired {
+  --bg: #f8fafc;
+  --panel: #ffffff;
+  --title: #0f172a;
+  --muted: #64748b;
+  --primary: #0b4f8a;
+  --primary-hover: #0a4578;
+  --action-bg: rgba(233, 241, 252, 0.92);
+  --action-bg-hover: rgba(224, 235, 249, 0.96);
+  --action-text: #0b4f8a;
+  --action-border: rgba(11, 79, 138, 0.34);
+  --line: rgba(15, 23, 42, 0.14);
+  --soft-line: rgba(11, 79, 138, 0.2);
+  --halo: rgba(11, 79, 138, 0.16);
+  --chip: rgba(15, 23, 42, 0.04);
+  --chip-border: rgba(15, 23, 42, 0.1);
+  --shadow: rgba(15, 23, 42, 0.16);
+  width: 100%;
+  min-height: 560px;
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% 42%, var(--halo), transparent 42%),
+    var(--bg);
+  font-family: Inter, system-ui, sans-serif;
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.session-expired--fullscreen {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  height: 100vh;
+  min-height: 100vh;
+  z-index: 9998;
+}
+
+.session-expired--hidden {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.session-expired[data-mode="dark"] {
+  --bg: #020f25;
+  --panel: rgba(5, 20, 42, 0.58);
+  --title: #d7e5f4;
+  --muted: #7f97b5;
+  --primary: #2f73bb;
+  --primary-hover: #3f83ca;
+  --action-bg: rgba(23, 43, 75, 0.88);
+  --action-bg-hover: rgba(25, 48, 84, 0.92);
+  --action-text: #8bb5e2;
+  --action-border: rgba(74, 122, 184, 0.45);
+  --line: rgba(130, 167, 210, 0.2);
+  --soft-line: rgba(130, 167, 210, 0.22);
+  --halo: rgba(19, 73, 138, 0.26);
+  --chip: rgba(129, 167, 209, 0.09);
+  --chip-border: rgba(129, 167, 209, 0.16);
+  --shadow: rgba(0, 0, 0, 0.36);
+}
+
+@media (prefers-color-scheme: dark) {
+  .session-expired[data-mode="auto"] {
+    --bg: #020f25;
+    --panel: rgba(5, 20, 42, 0.58);
+    --title: #d7e5f4;
+    --muted: #7f97b5;
+    --primary: #2f73bb;
+    --primary-hover: #3f83ca;
+    --action-bg: rgba(23, 43, 75, 0.88);
+    --action-bg-hover: rgba(25, 48, 84, 0.92);
+    --action-text: #8bb5e2;
+    --action-border: rgba(74, 122, 184, 0.45);
+    --line: rgba(130, 167, 210, 0.2);
+    --soft-line: rgba(130, 167, 210, 0.22);
+    --halo: rgba(19, 73, 138, 0.26);
+    --chip: rgba(129, 167, 209, 0.09);
+    --chip-border: rgba(129, 167, 209, 0.16);
+    --shadow: rgba(0, 0, 0, 0.36);
+  }
+}
+
+.session-expired__top {
+  position: absolute;
+  top: 18px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: grid;
+  place-items: center;
+  gap: 4px;
+  z-index: 2;
+  opacity: 0;
+  transform: translate(-50%, -10px);
+  animation: session-expired-top-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 180ms forwards;
+}
+
+.session-expired__logo {
+  width: 30px;
+  height: auto;
+  opacity: 0.9;
+  margin-bottom: 5px;
+}
+
+.session-expired__brand {
+  margin: 0;
+  color: var(--muted);
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.session-expired__center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: min(340px, calc(100vw - 40px));
+  text-align: center;
+}
+
+.session-expired__halo {
+  position: absolute;
+  inset: -70px -40px -30px;
+  border-radius: 50%;
+  background: radial-gradient(circle, var(--halo), transparent 70%);
+  filter: blur(4px);
+  pointer-events: none;
+}
+
+.session-expired__lock-wrap {
+  position: relative;
+  margin: 0 auto 18px;
+  width: 198px;
+  height: 198px;
+  display: grid;
+  place-items: center;
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: session-expired-drop-in 760ms cubic-bezier(0.22, 1, 0.36, 1) 420ms forwards;
+}
+
+.session-expired__rings {
+  position: absolute;
+  inset: 0;
+  animation: fade-in 0.8s ease both;
+}
+
+.session-expired__ring-inner {
+  transform-origin: 99px 99px;
+  animation: spin-ccw 20s linear infinite;
+}
+
+.session-expired__ring-outer {
+  transform-origin: 99px 99px;
+  animation: spin-cw 32s linear infinite;
+}
+
+.session-expired__lock-orb {
+  width: 82px;
+  height: 82px;
+  border-radius: 999px;
+  border: 1px solid var(--soft-line);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
+  display: grid;
+  place-items: center;
+  box-shadow: 0 10px 22px var(--shadow);
+  animation: orb-pulse 2.6s ease-in-out infinite;
+}
+
+.session-expired__icon {
+  width: 34px;
+  height: 34px;
+  color: var(--title);
+}
+
+.session-expired__title {
+  margin: 0;
+  color: var(--title);
+  font-size: 24px;
+  line-height: 1.25;
+  font-weight: 620;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: session-expired-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 680ms forwards;
+}
+
+.session-expired__subtitle {
+  margin: 8px 0 0;
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+  max-width: 300px;
+  margin-left: auto;
+  margin-right: auto;
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: session-expired-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 920ms forwards;
+}
+
+.session-expired__actions {
+  margin-top: 18px;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: session-expired-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 1140ms forwards;
+}
+
+.session-expired__action {
+  border: 1px solid var(--action-border);
+  border-radius: 8px;
+  padding: 8px 12px;
+  width: auto;
+  font-size: clamp(10px, 1.5vw, 12px);
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  color: var(--action-text);
+  background: var(--action-bg);
+  cursor: pointer;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  line-height: 1;
+  transition: border-color 160ms ease, background-color 160ms ease, transform 140ms ease;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+.session-expired__action:hover {
+  border-color: var(--primary-hover);
+  background: var(--action-bg-hover);
+  transform: translateY(-1px);
+}
+
+.session-expired__action:active {
+  transform: translateY(0);
+}
+
+.session-expired__action:focus-visible {
+  outline: 2px solid #8bb5de;
+  outline-offset: 2px;
+}
+
+.session-expired__action-icon {
+  width: clamp(12px, 1.5vw, 16px);
+  height: clamp(12px, 1.5vw, 16px);
+  display: inline-block;
+}
+
+.session-expired__countdown {
+  margin: 14px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  opacity: 0;
+  transform: translateY(-8px);
+  animation: session-expired-drop-in 720ms cubic-bezier(0.22, 1, 0.36, 1) 1360ms forwards;
+}
+
+.session-expired__countdown-dot {
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: conic-gradient(
+    from -90deg,
+    var(--muted) calc(var(--countdown-progress, 0) * 1%),
+    rgba(130, 167, 210, 0.28) 0
+  );
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
+  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
+  position: relative;
+}
+
+.session-expired__countdown-dot::before {
+  content: "";
+  position: absolute;
+  inset: 5px;
+  border-radius: 999px;
+  background: #d8c1aa;
+  opacity: 0.9;
+}
+
+@keyframes spin-cw {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes spin-ccw {
+  to { transform: rotate(-360deg); }
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes session-expired-drop-in {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes session-expired-top-drop-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -10px);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0);
+  }
+}
+
+@keyframes orb-pulse {
+  0%, 100% {
+    box-shadow:
+      0 10px 22px var(--shadow),
+      0 0 0 0 rgba(47, 115, 187, 0.22);
+  }
+  50% {
+    box-shadow:
+      0 12px 26px var(--shadow),
+      0 0 0 10px rgba(47, 115, 187, 0.06);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .session-expired__top,
+  .session-expired__lock-wrap,
+  .session-expired__title,
+  .session-expired__subtitle,
+  .session-expired__actions,
+  .session-expired__countdown {
+    animation: none !important;
+    opacity: 1;
+    transform: none;
+  }
+}
+`;

package/dist/SessionExpired/index.d.ts

@@ -0,0 +1 @@
+export * from "./SessionExpired";

package/dist/SessionExpired/index.js

@@ -0,0 +1 @@
+export * from "./SessionExpired";

package/dist/SessionExpired.d.ts

@@ -0,0 +1 @@
+export * from "./SessionExpired/index";

package/dist/SessionExpired.js

@@ -0,0 +1 @@
+export * from "./SessionExpired/index";

package/dist/SoliqLoader/SoliqLoader.d.ts

@@ -0,0 +1,10 @@
+type LoaderMode = "light" | "dark" | "auto";
+export interface SoliqLoaderProps {
+    mode?: LoaderMode;
+    fullScreen?: boolean;
+    className?: string;
+    visible?: boolean;
+    fadeDurationMs?: number;
+}
+export declare function SoliqLoader({ mode, fullScreen, className, visible, fadeDurationMs }: SoliqLoaderProps): import("react").JSX.Element;
+export {};

package/dist/SoliqLoader/SoliqLoader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import logoUrl from "../assets/images/logo.svg";
+import { styles } from "./SoliqLoader.styles";
+export function SoliqLoader({ mode = "auto", fullScreen = true, className, visible = true, fadeDurationMs = 380 }) {
+    const fullClass = fullScreen ? " soliq-loader--fullscreen" : "";
+    const userClass = className ? ` ${className}` : "";
+    const hiddenClass = visible ? "" : " soliq-loader--hidden";
+    const fadeStyle = {
+        "--loader-fade-duration": `${fadeDurationMs}ms`
+    };
+    return (_jsxs("div", { className: `soliq-loader${fullClass}${hiddenClass}${userClass}`, "data-mode": mode, role: "status", "aria-live": "polite", "aria-hidden": !visible, style: fadeStyle, children: [_jsx("style", { children: styles }), _jsx("div", { className: "soliq-loader__glow" }), _jsxs("div", { className: "soliq-loader__pulse-wrap", "aria-hidden": "true", children: [_jsx("span", { className: "soliq-loader__pulse soliq-loader__pulse--1" }), _jsx("span", { className: "soliq-loader__pulse soliq-loader__pulse--2" }), _jsx("span", { className: "soliq-loader__pulse soliq-loader__pulse--3" })] }), _jsxs("svg", { className: "soliq-loader__rings", width: "196", height: "196", viewBox: "0 0 196 196", fill: "none", "aria-hidden": "true", children: [_jsx("circle", { className: "soliq-loader__ring-inner", cx: "98", cy: "98", r: "76", stroke: "var(--ring)", strokeWidth: "0.9", strokeDasharray: "4 12" }), _jsx("circle", { className: "soliq-loader__ring-outer", cx: "98", cy: "98", r: "88", stroke: "var(--ring)", strokeWidth: "0.7", strokeDasharray: "2 22" })] }), _jsxs("div", { className: "soliq-loader__card", children: [_jsx("div", { className: "soliq-loader__logo-wrap", children: _jsx("div", { className: "soliq-loader__logo-clip", children: _jsx("img", { className: "soliq-loader__mark", src: logoUrl, alt: "\u0414\u0421\u049A \u043B\u043E\u0433\u043E\u0442\u0438\u043F\u0438" }) }) }), _jsx("div", { className: "soliq-loader__divider" }), _jsx("p", { className: "soliq-loader__title", children: "\u0414\u0410\u0412\u041B\u0410\u0422 \u0421\u041E\u041B\u0418\u049A \u049A\u040E\u041C\u0418\u0422\u0410\u0421\u0418" }), _jsx("p", { className: "soliq-loader__subtitle", children: "\u0420\u0410\u049A\u0410\u041C\u041B\u0418 \u0425\u0418\u0417\u041C\u0410\u0422\u041B\u0410\u0420 \u041F\u041B\u0410\u0422\u0424\u041E\u0420\u041C\u0410\u0421\u0418" }), _jsxs("div", { className: "soliq-loader__dots", "aria-hidden": "true", children: [_jsx("span", { className: "soliq-loader__dot" }), _jsx("span", { className: "soliq-loader__dot" }), _jsx("span", { className: "soliq-loader__dot" })] })] }), _jsx("div", { className: "soliq-loader__progress-track", "aria-hidden": "true", children: _jsx("div", { className: "soliq-loader__progress-fill" }) })] }));
+}

package/dist/SoliqLoader/SoliqLoader.styles.d.ts

@@ -0,0 +1 @@
+export declare const styles = "\n.soliq-loader {\n  --bg: #F8FAFC;\n  --primary: #0B4F8A;\n  --gold: #D8C1AA;\n  --ring: rgba(11, 79, 138, 0.22);\n  --text: #0B4F8A;\n  --sub: rgba(11, 79, 138, 0.45);\n  --divider: rgba(11, 79, 138, 0.12);\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 420px;\n  width: 100%;\n  overflow: hidden;\n  background: var(--bg);\n  transition: background 0.4s;\n  font-family: Outfit, Inter, system-ui, sans-serif;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  opacity: 1;\n  visibility: visible;\n  pointer-events: auto;\n  transition: opacity var(--loader-fade-duration, 380ms) ease, visibility 0s linear 0s;\n}\n\n.soliq-loader--fullscreen {\n  position: fixed;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n  min-height: 100vh;\n  z-index: 9999;\n  border: none;\n  border-radius: 0;\n}\n\n.soliq-loader--hidden {\n  opacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n  transition: opacity var(--loader-fade-duration, 380ms) ease, visibility 0s linear var(--loader-fade-duration, 380ms);\n}\n\n.soliq-loader[data-mode=\"dark\"] {\n  --bg: #020F25;\n  --primary: #5B7FBF;\n  --gold: #D8C1AA;\n  --ring: rgba(216, 193, 170, 0.25);\n  --text: #CBD5E1;\n  --sub: rgba(203, 213, 225, 0.45);\n  --divider: rgba(216, 193, 170, 0.18);\n}\n\n@media (prefers-color-scheme: dark) {\n  .soliq-loader[data-mode=\"auto\"] {\n    --bg: #020F25;\n    --primary: #5B7FBF;\n    --gold: #D8C1AA;\n    --ring: rgba(216, 193, 170, 0.25);\n    --text: #CBD5E1;\n    --sub: rgba(203, 213, 225, 0.45);\n    --divider: rgba(216, 193, 170, 0.18);\n  }\n}\n\n.soliq-loader__glow {\n  position: absolute;\n  width: 460px;\n  height: 460px;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(11, 79, 138, 0.12) 0%, transparent 70%);\n  pointer-events: none;\n}\n\n.soliq-loader[data-mode=\"dark\"] .soliq-loader__glow {\n  background: radial-gradient(circle, rgba(11, 79, 138, 0.16) 0%, transparent 70%);\n}\n\n@media (prefers-color-scheme: dark) {\n  .soliq-loader[data-mode=\"auto\"] .soliq-loader__glow {\n    background: radial-gradient(circle, rgba(11, 79, 138, 0.16) 0%, transparent 70%);\n  }\n}\n\n.soliq-loader__pulse-wrap {\n  position: absolute;\n  width: 180px;\n  height: 180px;\n  top: 50%;\n  left: 50%;\n  margin-top: -90px;\n  margin-left: -90px;\n  pointer-events: none;\n}\n\n.soliq-loader__pulse {\n  position: absolute;\n  inset: 0;\n  border-radius: 50%;\n  border: 1px solid var(--ring);\n  animation: pulse 2.8s ease-out infinite;\n  opacity: 0;\n}\n\n.soliq-loader__pulse--1 { animation-delay: 0.8s; }\n.soliq-loader__pulse--2 { animation-delay: 1.6s; }\n.soliq-loader__pulse--3 { animation-delay: 2.4s; }\n\n.soliq-loader__rings {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  animation: fade-in 0.8s 0.4s both;\n}\n\n.soliq-loader__ring-inner {\n  animation: spin-ccw 18s linear infinite;\n  transform-origin: 98px 98px;\n}\n\n.soliq-loader__ring-outer {\n  animation: spin-cw 28s linear infinite;\n  transform-origin: 98px 98px;\n}\n\n.soliq-loader__card {\n  position: relative;\n  z-index: 3;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  animation: card-in 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n}\n\n.soliq-loader__logo-wrap {\n  width: 96px;\n  height: 84px;\n  position: relative;\n  overflow: hidden;\n  animation: logo-scale 0.7s 0.15s cubic-bezier(0.25, 0.1, 0.25, 1) both;\n}\n\n.soliq-loader__mark {\n  width: 96px;\n  height: 84px;\n  display: block;\n}\n\n.soliq-loader__logo-clip {\n  animation: reveal-down 1.1s 0.35s cubic-bezier(0.4, 0, 0.2, 1) both;\n}\n\n.soliq-loader__divider {\n  width: 1px;\n  height: 20px;\n  background: var(--divider);\n  margin: 15px 0;\n  animation: divider-in 0.5s 1.4s both;\n  transform-origin: top;\n}\n\n.soliq-loader__title {\n  margin: 0 0 5px;\n  color: var(--text);\n  font-family: Outfit, sans-serif;\n  font-size: 13px;\n  font-weight: 500;\n  letter-spacing: 0.06em;\n  text-transform: uppercase;\n  animation: text-in 0.6s 1.5s ease-out both;\n}\n\n.soliq-loader__subtitle {\n  color: var(--sub);\n  font-family: Inter, sans-serif;\n  font-size: 10px;\n  font-weight: 400;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  margin-top: 6px;\n  animation: text-in 0.6s 1.85s ease-out both;\n}\n\n.soliq-loader__dots {\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-top: 24px;\n}\n\n.soliq-loader__dot {\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: var(--ring);\n  animation: dot-pulse 1.4s ease-in-out infinite both;\n}\n\n.soliq-loader__dot:nth-child(1) { animation-delay: 2s; }\n.soliq-loader__dot:nth-child(2) { animation-delay: 2.18s; }\n.soliq-loader__dot:nth-child(3) { animation-delay: 2.36s; }\n\n.soliq-loader__progress-track {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.soliq-loader[data-mode=\"dark\"] .soliq-loader__progress-track {\n  background: rgba(255, 255, 255, 0.04);\n}\n\n@media (prefers-color-scheme: dark) {\n  .soliq-loader[data-mode=\"auto\"] .soliq-loader__progress-track {\n    background: rgba(255, 255, 255, 0.04);\n  }\n}\n\n.soliq-loader__progress-fill {\n  height: 100%;\n  width: 0;\n  background: linear-gradient(90deg, transparent, var(--gold), var(--primary));\n  animation: progress-fill 3.5s 0.1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;\n}\n\n@keyframes card-in {\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes logo-scale {\n  from {\n    opacity: 0;\n    transform: scale(0.88);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes reveal-down {\n  from { clip-path: inset(0 0 100% 0); }\n  to { clip-path: inset(0 0 0 0); }\n}\n\n@keyframes divider-in {\n  from {\n    opacity: 0;\n    transform: scaleY(0);\n  }\n  to {\n    opacity: 1;\n    transform: scaleY(1);\n  }\n}\n\n@keyframes text-in {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes dot-pulse {\n  0%, 100% {\n    opacity: 0.3;\n    transform: scale(0.7);\n  }\n  50% {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n\n@keyframes pulse {\n  0% {\n    transform: scale(0.6);\n    opacity: 0.85;\n  }\n  100% {\n    transform: scale(1.6);\n    opacity: 0;\n  }\n}\n\n@keyframes fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes spin-cw {\n  to { transform: rotate(360deg); }\n}\n\n@keyframes spin-ccw {\n  to { transform: rotate(-360deg); }\n}\n\n@keyframes progress-fill {\n  from { width: 0; }\n  to { width: 100%; }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .soliq-loader__pulse,\n  .soliq-loader__ring-inner,\n  .soliq-loader__ring-outer,\n  .soliq-loader__card,\n  .soliq-loader__logo-wrap,\n  .soliq-loader__logo-clip,\n  .soliq-loader__divider,\n  .soliq-loader__title,\n  .soliq-loader__subtitle,\n  .soliq-loader__dot,\n  .soliq-loader__progress-fill {\n    animation: none !important;\n    transition: none !important;\n  }\n\n  .soliq-loader__logo-clip,\n  .soliq-loader__title,\n  .soliq-loader__subtitle,\n  .soliq-loader__divider,\n  .soliq-loader__card,\n  .soliq-loader__logo-wrap {\n    opacity: 1;\n  }\n}\n";