/* ============================================================ ServerNet UI (سرورنت فرایند) — the servernet.cloud design system ------------------------------------------------------------ Tokens, background stage, and component polish lifted from the corporate site so the product reads as one family. Loads AFTER servernet-base.css (RTL + font) and servernet-dark.css (dark skin), and deliberately owns only presentation: colour, depth, motion. Both themes are first-class. The site is dark-first; this product is light-first (business users work in daylight), so the light palette is the default and .sn-dark opts into the site's night palette. ============================================================ */ /* ---------- design tokens: light (default) ---------- */ :root, html.sn-light { --sn-bg: #F3F5FB; --sn-bg2: #FFFFFF; --sn-surface: rgba(15,23,42,.035); --sn-surface-2: rgba(15,23,42,.06); --sn-line: rgba(15,23,42,.10); --sn-line-2: rgba(15,23,42,.17); --sn-text: #0B1220; --sn-muted: #45506B; --sn-dim: #828CA6; --sn-grad-txt: linear-gradient(100deg,#2563EB 0%,#0891B2 55%,#7C3AED 100%); --sn-blob-op: .22; --sn-grid-ink: rgba(15,23,42,.045); --sn-card-bg: #FFFFFF; } /* ---------- design tokens: dark (site's native palette) ---------- */ html.sn-dark { --sn-bg: #05070F; --sn-bg2: #080B16; --sn-surface: rgba(255,255,255,.035); --sn-surface-2: rgba(255,255,255,.06); --sn-line: rgba(255,255,255,.08); --sn-line-2: rgba(255,255,255,.14); --sn-text: #E6EAF3; --sn-muted: #8A94AC; --sn-dim: #5B6478; --sn-grad-txt: linear-gradient(100deg,#60A5FA 0%,#22D3EE 55%,#A78BFA 100%); --sn-blob-op: .50; --sn-grid-ink: rgba(255,255,255,.024); --sn-card-bg: #0B0F1D; } /* shared across both themes */ :root { --sn-blue: #3B82F6; --sn-cyan: #22D3EE; --sn-violet: #8B5CF6; --sn-green: #34D399; --sn-amber: #F59E0B; --sn-red: #EF4444; --sn-grad: linear-gradient(100deg,#3B82F6,#22D3EE); --sn-r: 18px; --sn-r-lg: 24px; --sn-r-btn: 13px; --sn-ease: cubic-bezier(.22,1,.36,1); } /* ============================================================ 1. Background stage — the site's aurora + grid, behind everything ============================================================ */ /* Painted on ::before/::after so no markup change is needed and the modeler canvas / Monaco keep their own opaque surfaces on top. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(46rem 30rem at 82% -8%, rgba(59,130,246,var(--sn-blob-op)), transparent 62%), radial-gradient(40rem 26rem at 8% 108%, rgba(139,92,246,calc(var(--sn-blob-op) * .8)), transparent 62%), radial-gradient(34rem 22rem at 98% 92%, rgba(34,211,238,calc(var(--sn-blob-op) * .55)), transparent 62%), var(--sn-bg); filter: blur(0.5px); animation: sn-drift 26s var(--sn-ease) infinite alternate; } /* 56px engineering grid, masked so it fades away from the top */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--sn-grid-ink) 1px, transparent 1px), linear-gradient(90deg, var(--sn-grid-ink) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(90% 55% at 50% 0%, #000 38%, transparent 100%); mask-image: radial-gradient(90% 55% at 50% 0%, #000 38%, transparent 100%); } @keyframes sn-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(38px, -26px) scale(1.06); } 100% { transform: translate(-28px, 32px) scale(.97); } } /* the stage must not bleed through the BPMN canvas or the code editors */ .paper, .modeler-container, .monaco-editor, .CodeMirror { position: relative; z-index: 0; } /* ============================================================ 2. Buttons — the site's pill with the signature shine sweep ============================================================ */ .btn { border-radius: var(--sn-r-btn); font-weight: 600; transition: transform .22s var(--sn-ease), box-shadow .22s var(--sn-ease), filter .22s var(--sn-ease); } .btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning { position: relative; overflow: hidden; border: none; } /* the sweep: a skewed highlight that crosses the button on hover */ .btn-primary::after, .btn-success::after, .btn-danger::after { content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .6s var(--sn-ease); pointer-events: none; } .btn-primary:hover::after, .btn-success:hover::after, .btn-danger:hover::after { left: 130%; } .btn-primary:hover, .btn-success:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(34,211,238,.35); } .btn-danger:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(239,68,68,.32); } .btn:active { transform: translateY(0) scale(.985); } .btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger { border-radius: var(--sn-r-btn); border-color: var(--sn-line-2); } .btn-outline-primary:hover, .btn-outline-secondary:hover { transform: translateY(-1px); border-color: var(--sn-blue); } /* ============================================================ 3. Cards & panels — glass surfaces with the site's radius ============================================================ */ .card { border-radius: var(--sn-r); border: 1px solid var(--sn-line); transition: transform .28s var(--sn-ease), box-shadow .28s var(--sn-ease), border-color .28s var(--sn-ease); } /* lift only where a card is an actionable tile, never on data panels — a table that jumps under the cursor reads as broken, not lively */ .sn-report-card:hover, .card.process-card:hover, .card-catalogue:hover { transform: translateY(-3px); border-color: var(--sn-line-2); box-shadow: 0 18px 44px -20px rgba(15,23,42,.35); } html.sn-dark .sn-report-card:hover, html.sn-dark .card.process-card:hover, html.sn-dark .card-catalogue:hover { box-shadow: 0 20px 50px -18px rgba(0,0,0,.7); border-color: rgba(34,211,238,.35); } /* gradient headline treatment, used sparingly on section titles */ .sn-grad-text { background: var(--sn-grad-txt); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% auto; animation: sn-shine 6s linear infinite; } @keyframes sn-shine { to { background-position: 200% center; } } /* ============================================================ 4. Forms — the piece the user called out specifically ============================================================ */ .form-control, .custom-select, .multiselect__tags, textarea.form-control { border-radius: 12px; border: 1px solid var(--sn-line-2); transition: border-color .2s var(--sn-ease), box-shadow .2s var(--sn-ease), background .2s var(--sn-ease); } .form-control:focus, .custom-select:focus, textarea.form-control:focus, .multiselect--active .multiselect__tags { border-color: rgba(59,130,246,.65); box-shadow: 0 0 0 4px rgba(59,130,246,.15); outline: none; } .form-control::placeholder { color: var(--sn-dim); opacity: 1; } /* labels read as quiet captions above their field */ .form-group > label, label.small { font-weight: 600; font-size: 13px; color: var(--sn-muted); margin-bottom: .4rem; } /* input groups keep one continuous pill in RTL */ .input-group > .form-control { border-radius: 12px; } [dir="rtl"] .input-group > .form-control:not(:first-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } [dir="rtl"] .input-group > .form-control:not(:last-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } /* checkboxes / switches get the brand gradient when on */ .custom-control-input:checked ~ .custom-control-label::before { background: var(--sn-grad); border-color: transparent; box-shadow: 0 2px 8px rgba(59,130,246,.35); } .custom-switch .custom-control-label::before { transition: background .25s var(--sn-ease); } /* ============================================================ 5. Chrome — navbar, sidebar, tabs, badges, modals ============================================================ */ .navbar, .main-header { -webkit-backdrop-filter: saturate(150%) blur(14px); backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--sn-line); } /* active nav item carries the brand underline */ .navbar-nav .nav-item.active > .nav-link, .navbar-nav .nav-link.active { position: relative; font-weight: 600; } .navbar-nav .nav-item.active > .nav-link::after, .navbar-nav .nav-link.active::after { content: ""; position: absolute; inset-inline: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--sn-grad); } .badge { border-radius: 8px; font-weight: 600; padding: .35em .6em; } .badge-success { background: rgba(52,211,153,.16); color: #0F9D6E; } .badge-danger { background: rgba(239,68,68,.16); color: #DC2626; } .badge-warning { background: rgba(245,158,11,.18); color: #B45309; } html.sn-dark .badge-success { color: var(--sn-green); } html.sn-dark .badge-danger { color: #FCA5A5; } html.sn-dark .badge-warning { color: #FCD34D; } .modal-content { border-radius: var(--sn-r-lg); border: 1px solid var(--sn-line); overflow: hidden; } .modal-header { border-bottom: 1px solid var(--sn-line); } .modal-footer { border-top: 1px solid var(--sn-line); } /* nav-tabs as segmented pills, matching the site's control styling */ .nav-tabs { border-bottom: 1px solid var(--sn-line); gap: 4px; } .nav-tabs .nav-link { border: none; border-radius: 10px 10px 0 0; font-weight: 600; color: var(--sn-muted); transition: color .2s var(--sn-ease), background .2s var(--sn-ease); } .nav-tabs .nav-link:hover { background: var(--sn-surface); color: var(--sn-text); } .nav-tabs .nav-link.active { color: var(--sn-blue); background: transparent; box-shadow: inset 0 -2px 0 0 var(--sn-blue); } /* alerts as soft tinted panels rather than flat blocks */ .alert { border-radius: 14px; border: 1px solid transparent; } .alert-success { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); } .alert-danger { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.28); } .alert-info { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.28); } .alert-warning { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); } /* ============================================================ 6. Motion — entrance, and a hard stop for reduced-motion users ============================================================ */ @keyframes sn-pane-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .container-fluid > .row > [class^="col"] > .card, .container > .row > [class^="col"] > .card { animation: sn-pane-in .45s var(--sn-ease) both; } /* stagger the first few so a grid of cards assembles rather than pops */ .row > [class^="col"]:nth-child(1) > .card { animation-delay: .02s; } .row > [class^="col"]:nth-child(2) > .card { animation-delay: .06s; } .row > [class^="col"]:nth-child(3) > .card { animation-delay: .10s; } .row > [class^="col"]:nth-child(4) > .card { animation-delay: .14s; } /* live status dot, as used on the site's uptime badges */ .sn-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--sn-green); animation: sn-pulse-ring 2s var(--sn-ease) infinite; } @keyframes sn-pulse-ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,.6); } 50% { box-shadow: 0 0 0 6px rgba(52,211,153,0); } } /* scrollbars in the brand's key, not the OS default */ * { scrollbar-width: thin; scrollbar-color: var(--sn-line-2) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--sn-line-2); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--sn-blue); background-clip: content-box; } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } .btn-primary::after, .btn-success::after, .btn-danger::after { transition: none; } .sn-grad-text, .sn-pulse { animation: none; } .container-fluid > .row > [class^="col"] > .card, .container > .row > [class^="col"] > .card { animation: none; } .btn:hover, .card:hover { transform: none !important; } }