/* ═══════════════════════════════════════════════════════════════════════════ VIPentest — wspólny system designu portalu zgłoszeń. To jest port języka wizualnego Portalu Klienta z CRM (src/app/portal/ portal-theme.css + src/app/fx.css) na czysty CSS, bez Tailwinda. Te same tokeny, ten sam promień, ta sama typografia, ta sama choreografia ruchu — dzięki temu ankieta publiczna, panel admina i portal klienta wyglądają jak jedna aplikacja. Używany przez: • frontend/index.html (publiczna ankieta) • backend/views/_styles.ejs (panel /notregularloginpanel) Motyw: klasa `dark` na (jak next-themes w CRM, attribute="class"). Domyślnie „system" — patrz assets/theme.js. Aliasy starych zmiennych (--accent/--line/--card2/--text/--fg) są utrzymane celowo: istniejące widoki EJS i generator HTML w ankiecie odwołują się do nich inline. Nowy kod używa tokenów semantycznych (--primary/--border/…). ═══════════════════════════════════════════════════════════════════════ */ /* ── Tokeny ──────────────────────────────────────────────────────────────── */ :root{ --background:#f5f7fa; --foreground:#0d1626; --card:#ffffff; --card-foreground:#0d1626; --popover:#ffffff; --primary:#2f6bff; --primary-foreground:#ffffff; --secondary:#eef1f6; --secondary-foreground:#33415c; --muted:#eef1f6; --muted-foreground:#647089; --accent-soft:#e9eefb; --border:#e6eaf1; --input:#e6eaf1; --ring:#2f6bff; --destructive:#e5484d; --success:#0f9d76; --warning:#c2740a; --accent2:#0bb8d6; --accent2-glow:rgba(11,184,214,.30); --radius:0.8rem; --shadow-sm:0 1px 2px rgba(13,22,38,.06); --shadow:0 10px 30px -18px rgba(13,22,38,.35), 0 2px 8px -4px rgba(13,22,38,.12); --shadow-lg:0 28px 60px -28px rgba(13,22,38,.42); /* aliasy zgodności ze starą warstwą widoków */ --bg:var(--background); --card2:var(--secondary); --text:var(--foreground); --fg:var(--foreground); --line:var(--border); --accent:var(--primary); --danger:var(--destructive); --ok:var(--success); --blue:#3b7ddd; } html.dark{ --background:#080d18; --foreground:#e9eefb; --card:#0f1729; --card-foreground:#e9eefb; --popover:#101a2e; --primary:#5b8cff; --primary-foreground:#ffffff; --secondary:#16213a; --secondary-foreground:#e9eefb; --muted:#141d31; --muted-foreground:#8f9bb3; --accent-soft:#1a2740; --border:rgba(255,255,255,.09); --input:rgba(255,255,255,.13); --ring:#5b8cff; --destructive:#fb5a72; --success:#34d399; --warning:#fbbf24; --accent2:#3ee3f6; --accent2-glow:rgba(62,227,246,.40); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 14px 34px -20px rgba(0,0,0,.75), 0 2px 10px -6px rgba(0,0,0,.6); --shadow-lg:0 30px 70px -30px rgba(0,0,0,.85); --blue:#7ba9ff; } /* ── Baza ────────────────────────────────────────────────────────────────── */ *, *::before, *::after{ box-sizing:border-box } html{ -webkit-text-size-adjust:100%; color-scheme:light } html.dark{ color-scheme:dark } body{ margin:0; min-height:100vh; font-family:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; font-size:14px; line-height:1.55; color:var(--foreground); background:var(--background); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } h1,h2,h3,h4,h5{ margin:0; font-weight:700; letter-spacing:-.018em; line-height:1.2 } p{ margin:0 } a{ color:var(--primary); text-decoration:none } a:hover{ text-decoration:underline } img{ max-width:100%; height:auto } code, .mono{ font-family:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace } :focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:6px } ::selection{ background:color-mix(in srgb, var(--primary) 26%, transparent) } /* Pasek przewijania spójny z motywem (WebKit + Firefox). */ *{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--muted-foreground) 40%, transparent) transparent } *::-webkit-scrollbar{ width:10px; height:10px } *::-webkit-scrollbar-track{ background:transparent } *::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--muted-foreground) 32%, transparent); border-radius:999px; border:3px solid transparent; background-clip:content-box; } *::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--muted-foreground) 55%, transparent); background-clip:content-box } /* ═══ FX kit — jeden język wizualny z CRM ════════════════════════════════ */ /* Ambientowa zorza pod całą stroną. */ .fx-aurora{ position:fixed; inset:-12%; z-index:0; pointer-events:none; background: radial-gradient(36% 32% at 16% 10%, color-mix(in srgb, var(--primary) 15%, transparent), transparent 72%), radial-gradient(32% 30% at 85% 15%, color-mix(in srgb, var(--accent2) 13%, transparent), transparent 72%), radial-gradient(46% 40% at 60% 98%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 72%); filter:blur(34px) saturate(1.05); opacity:.5; will-change:transform; animation:aurora-drift 36s ease-in-out infinite alternate; } html.dark .fx-aurora{ opacity:.4 } @keyframes aurora-drift{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(0,-3%,0) scale(1.08) rotate(1.2deg) } } /* Delikatne ziarno — powierzchnia zamiast płaskiego tła. */ .fx-grain{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.04; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } html.dark .fx-grain{ opacity:.06 } /* Pole DNA (canvas rysowany przez assets/dna.js). */ .fx-dna{ position:fixed; inset:0; z-index:0; pointer-events:none; width:100%; height:100% } .fx-dna--local{ position:absolute } /* Winieta ekranu logowania — DNA czyta się w obu motywach. */ .login-bg{ background: radial-gradient(78% 60% at 50% 40%, transparent 52%, rgba(41,52,92,0.14) 100%), radial-gradient(130% 95% at 50% 32%, #f3f6fd 0%, #e7ecf8 46%, #d5ddee 100%); } html.dark .login-bg{ background: radial-gradient(80% 62% at 50% 40%, transparent 48%, rgba(0,0,0,0.6) 100%), radial-gradient(135% 105% at 50% 36%, #0c1428 0%, #070b16 52%, #04050b 100%); } .login-scan{ position:absolute; left:0; right:0; height:32%; pointer-events:none; background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--primary) 8%, transparent), transparent); animation:portal-scan 7.5s linear infinite; } @keyframes portal-scan{ 0%{top:-2%;opacity:0} 12%{opacity:.6} 86%{opacity:.35} 100%{top:102%;opacity:0} } /* Warstwy hero — te same co w CRM: siatka pod maską, przesuwający się skan i radar. Kładzione jako wewnątrz karty hero. */ .hero-grid{ position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:34px 34px; -webkit-mask:radial-gradient(130% 120% at 92% -10%, #000, transparent 66%); mask:radial-gradient(130% 120% at 92% -10%, #000, transparent 66%); } .hero-radar{ position:absolute; right:-70px; top:-96px; width:280px; height:280px; border-radius:50%; pointer-events:none; opacity:.4; background:conic-gradient(from 0deg, transparent 0 300deg, var(--accent2-glow) 350deg, transparent 360deg); -webkit-mask:radial-gradient(circle, transparent 38%, #000 39%, #000 70%, transparent 72%); mask:radial-gradient(circle, transparent 38%, #000 39%, #000 70%, transparent 72%); animation:portal-radar 7s linear infinite; } @keyframes portal-radar{ to{ transform:rotate(360deg) } } .hero-scan{ position:absolute; left:0; right:0; top:-2%; height:2px; pointer-events:none; background:linear-gradient(90deg, transparent, var(--accent2), transparent); box-shadow:0 0 14px var(--accent2-glow); animation:portal-scan 5.5s linear infinite; } /* Nagłówek z gradientem (atrament → primary → cyan). */ .title-grad{ background:linear-gradient(94deg, var(--foreground), color-mix(in srgb, var(--foreground) 52%, var(--primary)) 76%, var(--accent2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; width:fit-content; } /* Wejście treści przy nawigacji. */ .portal-enter{ animation:fadeInUp .45s cubic-bezier(.16,1,.3,1) both } @keyframes fadeInUp{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } } .pop{ animation:portal-pop .42s cubic-bezier(.16,1,.3,1) both } @keyframes portal-pop{ from{opacity:0;transform:scale(.9)} to{opacity:1;transform:none} } /* Wejście przy scrollu (JS dokłada .in). */ .reveal{ opacity:0; transform:translateY(14px); transition:opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1) } .reveal.in{ opacity:1; transform:none } /* Sekwencyjne wejście listy. */ .stagger > *{ animation:fadeInUp .5s cubic-bezier(.16,1,.3,1) both } .stagger > *:nth-child(1){ animation-delay:.02s } .stagger > *:nth-child(2){ animation-delay:.06s } .stagger > *:nth-child(3){ animation-delay:.10s } .stagger > *:nth-child(4){ animation-delay:.14s } .stagger > *:nth-child(5){ animation-delay:.18s } .stagger > *:nth-child(6){ animation-delay:.22s } .stagger > *:nth-child(7){ animation-delay:.26s } .stagger > *:nth-child(8){ animation-delay:.30s } /* Uniesienie karty / wiersza pod kursorem. */ .lift{ transition:transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, border-color .28s ease } .lift:hover{ transform:translateY(-3px) } /* Reflektor podążający za kursorem. */ .spotlight{ position:relative; isolation:isolate } .spotlight::before{ content:""; position:absolute; inset:0; border-radius:inherit; opacity:0; z-index:0; pointer-events:none; transition:opacity .3s ease; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%); } .spotlight:hover::before{ opacity:1 } .spotlight > *{ position:relative; z-index:1 } /* Przesunięcie połysku na hover. */ .sheen{ position:relative; overflow:hidden } .sheen::after{ content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; opacity:0; pointer-events:none; background:linear-gradient(100deg, transparent, color-mix(in srgb, var(--primary) 18%, transparent), transparent); transform:skewX(-18deg); } .sheen:hover::after{ animation:sheen-sweep .85s ease } @keyframes sheen-sweep{ 0%{left:-70%;opacity:0} 15%{opacity:1} 100%{left:130%;opacity:0} } /* Włos gradientowy na górnej krawędzi karty. */ .hairline{ position:relative } .hairline::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 60%, transparent), transparent); } .hairline-anim::before{ background-size:220% 100%; animation:hairline-slide 4.5s linear infinite } @keyframes hairline-slide{ to{ background-position:220% 0 } } /* Wzrost paska (postęp / segmenty). */ .bar-grow{ transform-origin:left; animation:barGrow .85s cubic-bezier(.16,1,.3,1) both } @keyframes barGrow{ from{transform:scaleX(0)} to{transform:scaleX(1)} } /* Oddech pustego stanu. */ .breathe{ animation:fx-breathe 3.2s ease-in-out infinite } @keyframes fx-breathe{ 0%,100%{ transform:scale(1); opacity:.8 } 50%{ transform:scale(1.06); opacity:1 } } /* Pulsujący pierścień „wymaga uwagi". */ .attn-ring{ position:relative } .attn-ring::before{ content:""; position:absolute; inset:-3px; border-radius:inherit; pointer-events:none; animation:attn 2.4s ease-out infinite; } @keyframes attn{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--destructive) 45%, transparent) } 70%,100%{ box-shadow:0 0 0 9px transparent } } /* Kropka „na żywo". */ .live-dot{ position:relative } .live-dot::after{ content:""; position:absolute; inset:-3px; border-radius:9999px; border:1.5px solid currentColor; opacity:.6; animation:live-ping 2.2s ease-out infinite; } @keyframes live-ping{ 0%{ transform:scale(.8); opacity:.6 } 70%,100%{ transform:scale(1.8); opacity:0 } } /* Szkło + gradient marki. */ .glass{ background:color-mix(in srgb, var(--background) 72%, transparent); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2) } .glass-card{ background:color-mix(in srgb, var(--card) 86%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px) } .brand-grad{ background:linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 40%, var(--accent2))) } /* Hover wiersza tabeli/listy — bez skoku układu. */ .row-hover{ transition:background-color .18s ease, box-shadow .18s ease } .row-hover:hover{ background:color-mix(in srgb, var(--primary) 6%, transparent); box-shadow:inset 2px 0 0 var(--primary) } /* ═══ Szkielet aplikacji (rail + topbar + treść) ═════════════════════════ */ .vp-shell{ position:relative; z-index:1; display:flex; width:100%; min-height:100vh } .vp-rail{ position:sticky; top:0; align-self:flex-start; display:none; flex-direction:column; gap:4px; width:250px; flex-shrink:0; height:100vh; height:100svh; padding:14px; border-right:1px solid var(--border); background:color-mix(in srgb, var(--background) 60%, transparent); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); } @media (min-width:1024px){ .vp-rail{ display:flex } } .vp-brand{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:8px 8px 16px; margin-bottom:4px; border-bottom:1px solid color-mix(in srgb, var(--border) 60%, transparent); text-decoration:none; } .vp-brand:hover{ text-decoration:none } .vp-brand img{ height:56px; width:auto; max-width:100%; object-fit:contain } .vp-brand__mark--light{ display:block } .vp-brand__mark--dark{ display:none } html.dark .vp-brand__mark--light{ display:none } html.dark .vp-brand__mark--dark{ display:block } .vp-eyebrow{ font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.22em; color:var(--primary); text-align:center; } .vp-rail__nav{ display:flex; flex-direction:column; gap:2px; padding-top:4px } .vp-rail__nav--bottom{ margin-top:auto; border-top:1px solid var(--border); padding-top:8px } .vp-rail__scroll{ flex:1 1 auto; overflow-y:auto; min-height:0 } .vp-rail__label{ padding:12px 10px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-foreground); } .vp-link{ position:relative; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; overflow:hidden; font-size:13px; font-weight:500; color:var(--muted-foreground); text-decoration:none; border:none; background:none; width:100%; text-align:left; cursor:pointer; font-family:inherit; transition:background-color .2s ease, color .2s ease; } .vp-link::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; border-radius:999px; background:var(--primary); transform:scaleY(0); transform-origin:center; transition:transform .3s cubic-bezier(.16,1,.3,1); } .vp-link:hover{ background:var(--muted); color:var(--foreground); text-decoration:none } .vp-link.is-active{ background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary) } .vp-link.is-active::before{ transform:scaleY(1) } .vp-link__icon{ flex:0 0 auto; width:16px; height:16px } .vp-link__text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .vp-main{ display:flex; min-width:0; flex:1; flex-direction:column } .vp-topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px; padding:10px 16px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--background) 75%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); } @media (min-width:640px){ .vp-topbar{ padding:10px 24px } } @media (min-width:1024px){ .vp-topbar{ padding:10px 32px } } .vp-crumb{ display:flex; min-width:0; flex-wrap:wrap; align-items:center; gap:6px; font-size:12.5px; color:var(--muted-foreground); } .vp-crumb__sep{ color:color-mix(in srgb, var(--muted-foreground) 45%, transparent) } .vp-crumb__current{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--foreground) } .vp-topbar__actions{ margin-left:auto; display:flex; flex-shrink:0; align-items:center; gap:10px } .vp-avatar{ display:grid; place-items:center; height:32px; width:32px; flex-shrink:0; border-radius:9999px; font-size:11px; font-weight:700; color:#fff; background:linear-gradient(135deg, var(--primary), #7c5cff); box-shadow:var(--shadow-sm); transition:transform .3s ease; } .vp-avatar:hover{ transform:scale(1.05) } .vp-who{ display:none; text-align:right; line-height:1.25 } @media (min-width:768px){ .vp-who{ display:block } } .vp-who__name{ font-size:12px; font-weight:500 } .vp-who__role{ font-size:10px; color:var(--muted-foreground) } /* Pasek mobilny — te same cele nawigacji co rail. */ .vp-mobilenav{ display:flex; align-items:center; gap:6px; overflow-x:auto; padding:8px 16px; border-bottom:1px solid var(--border); } @media (min-width:1024px){ .vp-mobilenav{ display:none } } .vp-chip{ display:inline-flex; flex-shrink:0; align-items:center; gap:6px; border:1px solid var(--border); border-radius:999px; padding:5px 12px; font-size:12px; color:var(--muted-foreground); background:var(--card); text-decoration:none; cursor:pointer; font-family:inherit; transition:color .2s ease, border-color .2s ease, background-color .2s ease; } .vp-chip:hover{ color:var(--foreground); text-decoration:none } .vp-chip.is-active{ border-color:color-mix(in srgb, var(--primary) 40%, transparent); background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary); } .vp-content{ width:100%; flex:1; padding:24px 16px } @media (min-width:640px){ .vp-content{ padding:24px } } @media (min-width:1024px){ .vp-content{ padding:28px 32px } } .container{ max-width:1200px; margin:0 auto; width:100% } .container--wide{ max-width:1440px } .vp-footer{ border-top:1px solid var(--border); padding:16px 24px; text-align:center; font-size:11.5px; color:var(--muted-foreground); } .vp-footer a{ color:var(--muted-foreground) } .vp-footer a:hover{ color:var(--primary) } /* ═══ Przełącznik motywu (1:1 z CRM: pigułka trzech opcji) ═══════════════ */ .vp-theme{ display:inline-flex; align-items:center; gap:0; border:1px solid var(--border); border-radius:999px; padding:2px; background:var(--card); box-shadow:var(--shadow-sm); } .vp-theme button{ display:inline-flex; align-items:center; justify-content:center; height:26px; width:26px; border:none; border-radius:9999px; background:transparent; color:var(--muted-foreground); cursor:pointer; padding:0; transition:background-color .3s ease, color .3s ease; } .vp-theme button:hover{ color:var(--foreground) } .vp-theme button svg{ width:14px; height:14px; transition:transform .5s cubic-bezier(.16,1,.3,1) } .vp-theme button:hover svg{ transform:scale(1.1) rotate(-12deg) } .vp-theme button[aria-pressed="true"]{ background:var(--primary); color:var(--primary-foreground); box-shadow:var(--shadow-sm) } .vp-theme button[aria-pressed="true"] svg{ transform:scale(1.1) } /* Przełącznik języka. */ .vp-lang{ display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; padding:2px; background:var(--card); box-shadow:var(--shadow-sm); } .vp-lang button{ border:none; background:transparent; cursor:pointer; font-family:inherit; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.04em; color:var(--muted-foreground); transition:background-color .25s ease, color .25s ease; } .vp-lang button:hover{ color:var(--foreground) } .vp-lang button[aria-pressed="true"]{ background:var(--primary); color:var(--primary-foreground) } /* ═══ Komponenty ════════════════════════════════════════════════════════ */ /* — Karty — */ .card{ position:relative; background:var(--card); color:var(--card-foreground); border:1px solid var(--border); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); } .card--flush{ padding:0 } .card--soft{ background:var(--secondary); box-shadow:none } .card__title{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--foreground); margin-bottom:6px; } .card__desc{ font-size:12.5px; color:var(--muted-foreground); margin-bottom:16px; line-height:1.5 } /* — Przyciski — */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:8px 15px; border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--foreground); font-family:inherit; font-size:13px; font-weight:600; line-height:1.3; cursor:pointer; text-decoration:none; white-space:nowrap; box-shadow:var(--shadow-sm); transition:transform .16s cubic-bezier(.16,1,.3,1), background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; } .btn:hover{ text-decoration:none; border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); transform:translateY(-1px) } .btn:active{ transform:translateY(0) scale(.985) } .btn:disabled, .btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none } .btn-primary, .btn.primary{ background:linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 78%, var(--accent2))); border-color:transparent; color:var(--primary-foreground); box-shadow:0 8px 22px -12px color-mix(in srgb, var(--primary) 80%, transparent); } .btn-primary:hover, .btn.primary:hover{ border-color:transparent; filter:brightness(1.06) } .btn-ok, .btn.success{ background:color-mix(in srgb, var(--success) 14%, var(--card)); border-color:color-mix(in srgb, var(--success) 45%, transparent); color:color-mix(in srgb, var(--success) 78%, var(--foreground)); } .btn-ok:hover, .btn.success:hover{ border-color:var(--success) } .btn-danger, .btn.danger{ background:color-mix(in srgb, var(--destructive) 12%, var(--card)); border-color:color-mix(in srgb, var(--destructive) 42%, transparent); color:color-mix(in srgb, var(--destructive) 82%, var(--foreground)); } .btn-danger:hover, .btn.danger:hover{ border-color:var(--destructive) } .btn-ghost{ background:transparent; box-shadow:none; color:var(--muted-foreground) } .btn-ghost:hover{ background:var(--muted); color:var(--foreground) } .btn-sm, .btn.xs{ padding:5px 11px; font-size:12px; border-radius:8px } .btn-lg{ padding:12px 22px; font-size:14.5px; border-radius:12px } .btn-block{ width:100% } .btn-icon{ padding:0; width:32px; height:32px; border-radius:9px; flex:0 0 auto } .btn svg{ width:15px; height:15px; flex:0 0 auto } /* — Pola formularza — */ input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="date"], input[type="url"], input[type="search"], input[type="tel"], textarea, select{ width:100%; font-family:inherit; font-size:13px; color:var(--foreground); background-color:var(--card); border:1px solid var(--input); border-radius:10px; padding:9px 12px; outline:none; transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } html.dark input[type="text"], html.dark input[type="number"], html.dark input[type="email"], html.dark input[type="password"], html.dark input[type="date"], html.dark input[type="url"], html.dark input[type="search"], html.dark input[type="tel"], html.dark textarea, html.dark select{ background-color:color-mix(in srgb, var(--background) 55%, var(--card)); } input::placeholder, textarea::placeholder{ color:color-mix(in srgb, var(--muted-foreground) 78%, transparent) } input:focus, textarea:focus, select:focus{ border-color:var(--ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); outline:none; } input:disabled, textarea:disabled, select:disabled{ opacity:.6; cursor:not-allowed } textarea{ min-height:92px; resize:vertical; line-height:1.55 } select{ appearance:none; -webkit-appearance:none; padding-right:32px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23647089' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px 16px; } html.dark select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238f9bb3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; background-size:16px 16px; } input[type="checkbox"], input[type="radio"]{ accent-color:var(--primary); width:15px; height:15px; cursor:pointer; flex:0 0 auto } input[type="file"]{ width:100%; font-family:inherit; font-size:12.5px; color:var(--muted-foreground); border:1px dashed color-mix(in srgb, var(--border) 90%, var(--muted-foreground)); border-radius:10px; padding:9px 12px; background:transparent; cursor:pointer; transition:border-color .18s ease, background-color .18s ease; } input[type="file"]:hover{ border-color:color-mix(in srgb, var(--primary) 50%, transparent); background:color-mix(in srgb, var(--primary) 4%, transparent) } input[type="file"]::file-selector-button{ font-family:inherit; font-size:12px; font-weight:600; margin-right:10px; padding:5px 11px; cursor:pointer; border:1px solid var(--border); border-radius:8px; background:var(--secondary); color:var(--foreground); } label{ display:block; font-size:13px; font-weight:600; margin-bottom:7px; color:var(--foreground) } .field-hint, .hint{ display:block; font-size:12px; color:var(--muted-foreground); margin-top:6px; line-height:1.5 } .reqMark{ color:var(--destructive); margin-left:5px; font-weight:800 } /* Chipy wyboru (radio/checkbox jako pigułki). */ .radioRow, .checkRow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px } .opt{ display:inline-flex; gap:8px; align-items:center; padding:7px 13px; margin:0; border:1px solid var(--border); border-radius:999px; background:var(--card); color:var(--foreground); font-size:12.5px; font-weight:500; cursor:pointer; user-select:none; transition:border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s cubic-bezier(.16,1,.3,1); } .opt:hover{ border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); transform:translateY(-1px) } .opt:has(input:checked){ border-color:color-mix(in srgb, var(--primary) 55%, transparent); background:color-mix(in srgb, var(--primary) 11%, transparent); color:var(--primary); font-weight:600; } .opt:has(input:focus-visible){ box-shadow:0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent) } /* — Odznaki — */ .badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; border:1px solid var(--border); background:var(--secondary); font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--muted-foreground); white-space:nowrap; } .badge-new, .badge.warn{ border-color:color-mix(in srgb, var(--primary) 35%, transparent); background:color-mix(in srgb, var(--primary) 12%, transparent); color:var(--primary); } .badge-reviewed{ border-color:color-mix(in srgb, var(--accent2) 42%, transparent); background:color-mix(in srgb, var(--accent2) 12%, transparent); color:color-mix(in srgb, var(--accent2) 82%, var(--foreground)); } .badge-quoted, .badge.ok{ border-color:color-mix(in srgb, var(--success) 38%, transparent); background:color-mix(in srgb, var(--success) 12%, transparent); color:color-mix(in srgb, var(--success) 80%, var(--foreground)); } .badge-archived{ opacity:.75 } .badge.req, .badge-req{ border-color:color-mix(in srgb, var(--destructive) 38%, transparent); background:color-mix(in srgb, var(--destructive) 10%, transparent); color:var(--destructive); } .badge-uppercase{ text-transform:uppercase; letter-spacing:.06em; font-size:10px } /* Pigułka informacyjna (metryka w pasku). */ .pill{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--border); border-radius:999px; padding:5px 12px; background:var(--card); color:var(--muted-foreground); font-size:12px; white-space:nowrap; } .pill strong{ color:var(--foreground); font-weight:700 } .kbd{ display:inline-block; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:11px; padding:2px 7px; border-radius:6px; border:1px solid var(--border); background:var(--secondary); color:var(--muted-foreground); } /* — Kafelki statystyk — */ .stats-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin-bottom:20px } .stat-card{ position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow); transition:transform .28s cubic-bezier(.16,1,.3,1), border-color .28s ease; } .stat-card:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--primary) 32%, var(--border)) } .stat-number{ font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1.1; color:var(--foreground) } .stat-label{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-foreground); margin-top:4px } .stat-card--primary .stat-number{ color:var(--primary) } .stat-card--cyan .stat-number{ color:color-mix(in srgb, var(--accent2) 85%, var(--foreground)) } .stat-card--ok .stat-number{ color:color-mix(in srgb, var(--success) 85%, var(--foreground)) } /* — Tabele — */ .table-wrap{ width:100%; overflow-x:auto; border-radius:var(--radius) } table{ width:100%; border-collapse:collapse } th, td{ padding:11px 13px; text-align:left; font-size:13px; border-bottom:1px solid var(--border); vertical-align:middle } th{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-foreground); white-space:nowrap; background:color-mix(in srgb, var(--secondary) 55%, transparent); } tbody tr{ transition:background-color .18s ease, box-shadow .18s ease } tbody tr:hover{ background:color-mix(in srgb, var(--primary) 5%, transparent); box-shadow:inset 2px 0 0 var(--primary) } tbody tr:last-child td{ border-bottom:none } /* — Paginacja — */ .pagination{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:20px; flex-wrap:wrap } .pagination a, .pagination span{ display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; padding:0 10px; border-radius:9px; border:1px solid var(--border); background:var(--card); font-size:12.5px; font-weight:600; color:var(--muted-foreground); text-decoration:none; transition:color .18s ease, border-color .18s ease, background-color .18s ease; } .pagination a:hover{ color:var(--foreground); border-color:color-mix(in srgb, var(--primary) 45%, var(--border)); text-decoration:none } .pagination .active{ background:var(--primary); border-color:transparent; color:var(--primary-foreground) } /* — Pasek filtrów — */ .filter-row{ display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap } @media (max-width:640px){ .filter-row{ flex-direction:column; align-items:stretch } } /* — Karty sekcji (rozwijane) — */ .section-card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; box-shadow:var(--shadow-sm); } .section-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px; cursor:pointer; font-size:13.5px; font-weight:700; color:var(--foreground); transition:background-color .18s ease; } .section-header:hover{ background:color-mix(in srgb, var(--primary) 5%, transparent) } .section-header .ti{ font-size:10px; color:var(--muted-foreground); transition:transform .28s cubic-bezier(.16,1,.3,1) } .section-body{ display:none; padding:0 16px 16px } .section-body.open{ display:block; animation:fadeInUp .32s cubic-bezier(.16,1,.3,1) both } .field-row{ display:flex; gap:14px; padding:8px 0; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent) } .field-row:last-child{ border-bottom:none } .field-label{ flex:0 0 auto; min-width:210px; font-size:12px; color:var(--muted-foreground) } .field-value{ font-size:13px; word-break:break-word; min-width:0 } @media (max-width:768px){ .field-row{ flex-direction:column; gap:2px } .field-label{ min-width:auto } } /* — Toast — */ .toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px); z-index:10000; max-width:min(92vw, 460px); padding:11px 18px; border-radius:12px; border:1px solid var(--border); background:var(--popover); color:var(--foreground); font-size:13px; font-weight:500; white-space:pre-wrap; text-align:center; box-shadow:var(--shadow-lg); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1); } .toast.show{ opacity:1; transform:translateX(-50%) translateY(0) } .toast-ok{ border-color:color-mix(in srgb, var(--success) 45%, transparent) } .toast-error{ border-color:color-mix(in srgb, var(--destructive) 50%, transparent) } .toast::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; border-radius:12px 12px 0 0; background:linear-gradient(90deg, transparent, var(--primary), transparent); } .toast-error::before{ background:linear-gradient(90deg, transparent, var(--destructive), transparent) } .toast-ok::before{ background:linear-gradient(90deg, transparent, var(--success), transparent) } /* — Modal — */ .modal-overlay, .modalOverlay{ position:fixed; inset:0; z-index:10000; display:none; align-items:center; justify-content:center; padding:16px; background:color-mix(in srgb, var(--background) 55%, rgba(4,7,15,.55)); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fade-in .24s ease both; } .modal-overlay.open, .modalOverlay.is-open{ display:flex } @keyframes fade-in{ from{opacity:0} to{opacity:1} } .modal-card, .modalCard{ position:relative; width:min(560px, 94vw); max-height:86vh; overflow:auto; background:var(--popover); color:var(--foreground); border:1px solid var(--border); border-radius:16px; padding:22px; box-shadow:var(--shadow-lg); animation:modal-rise .38s cubic-bezier(.16,1,.3,1) both; } @keyframes modal-rise{ from{ opacity:0; transform:translateY(14px) scale(.97) } to{ opacity:1; transform:none } } .modal-card::before, .modalCard::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 60%, transparent), transparent); } .modalHeader{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px } .modalHeader h3{ font-size:16px; color:var(--foreground) } .modalBody{ display:flex; flex-direction:column; gap:10px; font-size:13px; color:var(--foreground); line-height:1.6 } .modalList{ margin:0; padding-left:20px; color:var(--muted-foreground); display:flex; flex-direction:column; gap:7px } .modalClose{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:9px; padding:6px 11px; background:var(--card); color:var(--muted-foreground); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:color .18s ease, border-color .18s ease; } .modalClose:hover{ color:var(--foreground); border-color:color-mix(in srgb, var(--primary) 45%, var(--border)) } /* — Dialog eksportu (dokowany w rogu) — */ .export-dialog{ /* Ponad bąblem wsparcia (prawy dolny róg), żeby się nie przykrywały. */ position:fixed; right:20px; bottom:96px; z-index:10001; min-width:290px; max-width:340px; padding:16px 18px; border-radius:14px; border:1px solid var(--border); background:var(--popover); color:var(--foreground); box-shadow:var(--shadow-lg); opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .25s ease, transform .25s cubic-bezier(.16,1,.3,1); } .export-dialog.show{ opacity:1; transform:none; pointer-events:auto } .export-dialog h4{ margin:0 0 6px; font-size:13.5px; color:var(--foreground) } .export-dialog p{ margin:0 0 14px; font-size:12px; color:var(--muted-foreground); line-height:1.5 } .export-dialog .dialog-btns{ display:flex; gap:8px } .export-dialog .dialog-btns button{ flex:1; padding:8px 10px; border-radius:9px; cursor:pointer; font-family:inherit; font-size:12px; font-weight:600; border:1px solid var(--border); background:var(--card); color:var(--muted-foreground); transition:color .18s ease, border-color .18s ease, filter .18s ease; } .export-dialog .btn-no:hover{ color:var(--foreground); border-color:color-mix(in srgb, var(--primary) 45%, var(--border)) } .export-dialog .btn-yes{ background:linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 78%, var(--accent2))); border-color:transparent; color:var(--primary-foreground); } .export-dialog .btn-yes:hover{ filter:brightness(1.07) } /* — Alerty inline — */ .alert{ display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-radius:11px; font-size:13px; line-height:1.55; border:1px solid var(--border); background:var(--secondary); color:var(--foreground); } .alert-error, .error{ border-color:color-mix(in srgb, var(--destructive) 38%, transparent); background:color-mix(in srgb, var(--destructive) 9%, transparent); color:color-mix(in srgb, var(--destructive) 88%, var(--foreground)); } .alert-ok, .success{ border-color:color-mix(in srgb, var(--success) 34%, transparent); background:color-mix(in srgb, var(--success) 9%, transparent); color:color-mix(in srgb, var(--success) 82%, var(--foreground)); } /* Bloki komunikatów walidacji — domyślnie ukryte, JS ustawia display:block. Selektor jest zawężony do
, bo goła `.success` zabijałaby też przycisk z klasą `btn success` (display nie jest tam deklarowany, więc by wygrała). */ div.error, div.success{ display:none; margin-top:10px; padding:11px 14px; border-radius:11px; font-size:13px; white-space:pre-wrap; border-width:1px; border-style:solid; } /* — Blok kodu / puste stany — */ .codeBlock{ padding:12px 14px; border-radius:11px; overflow:auto; border:1px solid var(--border); background:var(--secondary); color:var(--foreground); font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; line-height:1.6; } .empty-state{ display:flex; flex-direction:column; align-items:center; gap:10px; padding:48px 20px; text-align:center; color:var(--muted-foreground); } .empty-state__glyph{ display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:color-mix(in srgb, var(--primary) 10%, transparent); color:var(--primary); } .mutedSmall, .muted-sm{ color:var(--muted-foreground); font-size:12px; line-height:1.55 } /* ═══ Ograniczenie ruchu ════════════════════════════════════════════════ */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .fx-aurora, .login-scan, .hero-scan, .hero-radar, .hairline-anim::before, .breathe, .attn-ring::before, .live-dot::after, .sheen::after{ animation:none } .login-scan, .hero-scan{ display:none } .reveal{ opacity:1; transform:none } .lift:hover, .stat-card:hover, .btn:hover, .opt:hover{ transform:none } } /* ═══ Druk ══════════════════════════════════════════════════════════════ */ @media print{ .fx-aurora, .fx-grain, .fx-dna, .vp-rail, .vp-topbar, .vp-mobilenav, .toast, .export-dialog, .vp-theme, .vp-lang{ display:none !important } body{ background:#fff; color:#000 } .card, .section-card{ box-shadow:none; border-color:#ccc } } /* ═══ Pływający widżet kontaktu (Support) ═══════════════════════════════ Odpowiednik PortalContactWidget z Portalu Klienta: bąbel w prawym dolnym rogu, po kliknięciu karta z telefonem i mailem. W ankiecie kontakt jest stały (support@vipentest.com), więc nie ma listy opiekunów — reszta zachowania (klik poza, Escape, ping wokół bąbla) jest ta sama. */ .vp-fabwrap{ position:fixed; right:20px; bottom:24px; z-index:60; display:flex; flex-direction:column; align-items:flex-end; gap:12px; } @media print{ .vp-fabwrap{ display:none } } .vp-fab{ position:relative; display:grid; place-items:center; width:56px; height:56px; border:none; border-radius:9999px; background:linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--accent2))); color:var(--primary-foreground); cursor:pointer; padding:0; /* Halo w kolorze tła odcina bąbel od treści pod nim — bez niego zlewał się z niebieskim przyciskiem akcji, nad którym przelatywał przy scrollu. */ box-shadow:0 0 0 5px var(--background), 0 14px 34px -12px color-mix(in srgb, var(--primary) 85%, transparent); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; } .vp-fab:hover{ transform:scale(1.06); box-shadow:0 0 0 5px var(--background), 0 18px 42px -12px color-mix(in srgb, var(--primary) 95%, transparent); } .vp-fab:active{ transform:scale(.95) } .vp-fab svg{ width:24px; height:24px; transition:transform .3s cubic-bezier(.16,1,.3,1) } .vp-fab:hover svg{ transform:scale(1.1) } /* Ping wokół zamkniętego bąbla — sygnał „jest tu pomoc". */ .vp-fab::after{ content:""; position:absolute; inset:0; border-radius:9999px; pointer-events:none; background:color-mix(in srgb, var(--primary) 40%, transparent); animation:vp-fab-ping 2.4s cubic-bezier(0,0,.2,1) infinite; } .vp-fab[aria-expanded="true"]::after{ display:none } @keyframes vp-fab-ping{ 75%,100%{ transform:scale(1.7); opacity:0 } } .vp-contact{ width:320px; max-width:calc(100vw - 40px); overflow:hidden; transform-origin:bottom right; border:1px solid var(--border); border-radius:16px; background:var(--card); box-shadow:var(--shadow-lg); animation:vp-contact-in .26s cubic-bezier(.16,1,.3,1) both; } @keyframes vp-contact-in{ from{ opacity:0; transform:scale(.94) translateY(8px) } to{ opacity:1; transform:none } } .vp-contact[hidden]{ display:none } .vp-contact__head{ position:relative; display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid var(--border); background:color-mix(in srgb, var(--primary) 6%, transparent); } .vp-contact__head::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; opacity:.7; pointer-events:none; background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--primary) 65%, transparent), transparent); background-size:220% 100%; animation:hairline-slide 4.5s linear infinite; } .vp-contact__logo{ display:flex; align-items:center; flex:0 0 auto } .vp-contact__logo img{ height:26px; width:auto; object-fit:contain; display:block } .vp-contact__logo .vp-brand__mark--dark{ display:none } html.dark .vp-contact__logo .vp-brand__mark--light{ display:none } html.dark .vp-contact__logo .vp-brand__mark--dark{ display:block } /* Cienka kreska oddziela znak marki od etykiety, zamiast wpychać oba w kółko. */ .vp-contact__logo::after{ content:""; width:1px; height:26px; margin-left:12px; background:color-mix(in srgb, var(--border) 130%, transparent); } .vp-contact__eyebrow{ font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted-foreground) } .vp-contact__name{ font-size:14px; font-weight:700 } .vp-contact__close{ margin-left:auto; display:grid; place-items:center; width:28px; height:28px; flex:0 0 auto; border:none; border-radius:9999px; background:none; color:var(--muted-foreground); cursor:pointer; padding:0; transition:background-color .2s ease, color .2s ease, transform .15s ease; } .vp-contact__close:hover{ background:var(--muted); color:var(--foreground) } .vp-contact__close:active{ transform:scale(.9) } .vp-contact__close svg{ width:16px; height:16px } .vp-contact__body{ display:flex; flex-direction:column; gap:10px; padding:14px } .vp-contact__intro{ font-size:12px; color:var(--muted-foreground); line-height:1.55 } .vp-contact__btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 16px; border-radius:11px; font-size:13.5px; font-weight:600; text-decoration:none; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease, background-color .3s ease, border-color .3s ease; } .vp-contact__btn:hover{ text-decoration:none; transform:translateY(-1px) } .vp-contact__btn:active{ transform:translateY(0) scale(.99) } .vp-contact__btn svg{ width:16px; height:16px; transition:transform .3s cubic-bezier(.16,1,.3,1) } .vp-contact__btn--call{ background:var(--primary); color:var(--primary-foreground); box-shadow:0 6px 18px -8px color-mix(in srgb, var(--primary) 90%, transparent); } .vp-contact__btn--call:hover{ box-shadow:0 12px 26px -10px color-mix(in srgb, var(--primary) 95%, transparent) } .vp-contact__btn--call:hover svg{ transform:rotate(12deg) } .vp-contact__btn--mail{ border:1px solid color-mix(in srgb, var(--primary) 32%, transparent); color:var(--primary); background:transparent; } .vp-contact__btn--mail:hover{ border-color:color-mix(in srgb, var(--primary) 52%, transparent); background:color-mix(in srgb, var(--primary) 6%, transparent); } .vp-contact__btn--mail:hover svg{ transform:translateY(-1px) } @media (prefers-reduced-motion:reduce){ .vp-fab::after{ animation:none; display:none } .vp-contact{ animation:none } .vp-fab:hover, .vp-contact__btn:hover{ transform:none } }