/* ========================================================= ATOSY ERP — LIQUID FINAL FINAL VISUAL OVERRIDE Dark Navy Liquid + High Contrast ========================================================= */ /* ========================================================= 0. DESIGN TOKENS ========================================================= */ :root { --lf-bg-0: #03122c; --lf-bg-1: #06275d; --lf-bg-2: #0753bd; --lf-glass-1: rgba(11, 35, 83, .56); --lf-glass-2: rgba(13, 46, 108, .42); --lf-glass-3: rgba(255,255,255,.07); --lf-border: rgba(165, 210, 255, .24); --lf-border-strong: rgba(210, 232, 255, .34); --lf-text: #ffffff; --lf-text-2: rgba(238, 246, 255, .84); --lf-text-3: rgba(215, 230, 255, .66); --lf-text-4: rgba(194, 216, 249, .52); --lf-blue: #2f91ff; --lf-cyan: #32d8f1; --lf-purple: #9b5cff; --lf-green: #28d990; --lf-orange: #ff9f3f; --lf-red: #ff526a; --lf-shadow: 0 20px 55px rgba(0, 10, 42, .34), inset 0 1px 0 rgba(255,255,255,.14); --lf-shadow-hover: 0 28px 65px rgba(0, 12, 52, .45), 0 0 35px rgba(47,145,255,.10), inset 0 1px 0 rgba(255,255,255,.20); } /* ========================================================= 1. GLOBAL BACKGROUND ========================================================= */ html, body { min-height: 100%; background: radial-gradient( 900px 650px at 85% 5%, rgba(39, 129, 255, .38), transparent 62% ), radial-gradient( 700px 500px at 15% 8%, rgba(37, 202, 255, .14), transparent 58% ), radial-gradient( 850px 600px at 78% 92%, rgba(105, 69, 255, .15), transparent 60% ), linear-gradient( 135deg, var(--lf-bg-0) 0%, var(--lf-bg-1) 44%, var(--lf-bg-2) 100% ) !important; background-attachment: fixed !important; } body, .app-shell, .app-main, .app-background { background: transparent !important; } /* ========================================================= 2. PRIMARY DARK GLASS SURFACES ========================================================= */ .dashboard-v2-hero, .dashboard-v2-kpi, .dashboard-v2-card, .dashboard-v2-panel, .bpmn-liquid-hero, .bpmn-canvas-shell, .bpmn-detail-shell, .bpmn-summary, .module-card { position: relative; isolation: isolate; background: linear-gradient( 145deg, rgba(15, 48, 112, .54) 0%, rgba(7, 30, 78, .58) 56%, rgba(7, 25, 63, .66) 100% ) !important; border: 1px solid var(--lf-border) !important; box-shadow: var(--lf-shadow) !important; backdrop-filter: blur(30px) saturate(165%) !important; -webkit-backdrop-filter: blur(30px) saturate(165%) !important; overflow: hidden; } /* reflective top edge */ .dashboard-v2-hero::before, .dashboard-v2-kpi::before, .dashboard-v2-card::before, .dashboard-v2-panel::before, .bpmn-liquid-hero::before, .bpmn-canvas-shell::before, .bpmn-detail-shell::before, .bpmn-summary::before, .module-card::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient( 180deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.035) 18%, transparent 42% ); } /* subtle colored refraction */ .dashboard-v2-card::after, .dashboard-v2-panel::after, .bpmn-canvas-shell::after, .bpmn-detail-shell::after, .module-card::after { content: ""; position: absolute; width: 55%; height: 55%; right: -18%; bottom: -30%; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient( circle, rgba(74, 145, 255, .16), rgba(102, 67, 255, .06) 46%, transparent 72% ); filter: blur(20px); } /* content above glass layers */ .dashboard-v2-hero > *, .dashboard-v2-kpi > *, .dashboard-v2-card > *, .dashboard-v2-panel > *, .bpmn-liquid-hero > *, .bpmn-canvas-shell > *, .bpmn-detail-shell > *, .bpmn-summary > *, .module-card > * { position: relative; z-index: 2; } /* ========================================================= 3. TYPOGRAPHY — FORCE HIGH CONTRAST ========================================================= */ .dashboard-v2-hero h1, .dashboard-v2-hero h2, .dashboard-v2-hero h3, .dashboard-v2-kpi h1, .dashboard-v2-kpi h2, .dashboard-v2-kpi h3, .dashboard-v2-kpi strong, .dashboard-v2-card h1, .dashboard-v2-card h2, .dashboard-v2-card h3, .dashboard-v2-card h4, .dashboard-v2-card strong, .dashboard-v2-panel h1, .dashboard-v2-panel h2, .dashboard-v2-panel h3, .dashboard-v2-panel strong, .bpmn-liquid-hero h1, .bpmn-liquid-hero h2, .bpmn-liquid-hero h3, .bpmn-liquid-hero strong, .bpmn-canvas-shell h1, .bpmn-canvas-shell h2, .bpmn-canvas-shell h3, .bpmn-detail-shell h1, .bpmn-detail-shell h2, .bpmn-detail-shell h3, .bpmn-summary strong, .module-card h1, .module-card h2, .module-card h3, .module-card strong { color: var(--lf-text) !important; text-shadow: 0 1px 2px rgba(0,0,0,.18); } .dashboard-v2-hero p, .dashboard-v2-card p, .dashboard-v2-panel p, .dashboard-v2-panel span, .dashboard-v2-kpi span, .dashboard-v2-kpi small, .bpmn-liquid-hero p, .bpmn-canvas-shell p, .bpmn-detail-shell p, .bpmn-detail-shell span, .bpmn-summary span, .module-card p, .module-card span { color: var(--lf-text-2) !important; } /* tertiary descriptions */ .dashboard-v2-card-copy p, .dashboard-v2-activity-copy span, .bpmn-canvas-heading p { color: var(--lf-text-3) !important; } /* ========================================================= 4. DASHBOARD KPI ========================================================= */ .dashboard-v2-kpi { min-height: 104px !important; } .dashboard-v2-kpi-label { color: var(--lf-text-2) !important; } .dashboard-v2-kpi strong { color: #fff !important; font-size: 30px !important; } .dashboard-v2-kpi small { color: var(--lf-text-3) !important; } .dashboard-v2-kpi-icon { color: #fff !important; background: linear-gradient( 145deg, rgba(72,151,255,.38), rgba(255,255,255,.09) ) !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 22px rgba(0,10,50,.18) !important; } /* ========================================================= 5. DASHBOARD FUNCTION CARDS ========================================================= */ .dashboard-v2-card { border-radius: 27px !important; transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important; } .dashboard-v2-card:hover { transform: translateY(-5px) !important; border-color: rgba(207,230,255,.38) !important; background: linear-gradient( 145deg, rgba(20, 61, 135, .60), rgba(8, 34, 83, .66) ) !important; box-shadow: var(--lf-shadow-hover) !important; } .dashboard-v2-card-footer { color: #5db3ff !important; } .dashboard-v2-card-footer > span:first-child { color: #5db3ff !important; } /* ========================================================= 6. MINI CARDS — THEY MUST STAND OUT ========================================================= */ .dashboard-v2-mini, .bpmn-detail-stat, .bpmn-related-card, .bpmn-svoa-mini { background: linear-gradient( 145deg, rgba(255,255,255,.105), rgba(255,255,255,.055) ) !important; border: 1px solid rgba(201,225,255,.18) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 8px 20px rgba(0,12,50,.16) !important; backdrop-filter: blur(16px) saturate(145%) !important; -webkit-backdrop-filter: blur(16px) saturate(145%) !important; } .dashboard-v2-mini span, .bpmn-detail-stat span, .bpmn-related-card span { color: rgba(218,233,255,.69) !important; } .dashboard-v2-mini strong, .bpmn-detail-stat strong, .bpmn-related-card b { color: #ffffff !important; } /* ========================================================= 7. SEARCH — REMOVE UGLY RECTANGULAR INPUT ========================================================= */ .dashboard-v2-search { height: 48px !important; padding: 0 17px !important; border-radius: 999px !important; background: rgba(7, 26, 67, .42) !important; border: 1px solid rgba(184,216,255,.22) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 12px 28px rgba(0,10,45,.18) !important; backdrop-filter: blur(20px) saturate(160%) !important; -webkit-backdrop-filter: blur(20px) saturate(160%) !important; overflow: hidden; } .dashboard-v2-search input { width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; outline: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; appearance: none !important; -webkit-appearance: none !important; color: #fff !important; font-size: 14px !important; } .dashboard-v2-search input:focus { background: transparent !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; } .dashboard-v2-search input::placeholder { color: rgba(220,234,255,.60) !important; } /* ========================================================= 8. BPMN CANVAS — REMOVE MILKY WHITE ========================================================= */ .bpmn-canvas-shell { background: linear-gradient( 145deg, rgba(8, 38, 91, .60), rgba(5, 27, 69, .66) ) !important; } .bpmn-canvas { background: radial-gradient( circle, rgba(117,183,255,.15) 1px, transparent 1px ), linear-gradient( 145deg, rgba(8, 35, 83, .22), rgba(9, 50, 119, .18) ) !important; background-size: 18px 18px, auto !important; } .bpmn-canvas-header { background: rgba(5, 25, 63, .23) !important; border-bottom: 1px solid rgba(176,211,255,.13) !important; } .bpmn-canvas-heading h2 { color: #fff !important; } .bpmn-canvas-heading p { color: var(--lf-text-3) !important; } /* ========================================================= 9. BPMN NODE — DARK GLASS, NOT WHITE ========================================================= */ .bpmn-node { background: linear-gradient( 145deg, rgba(255,255,255,.115), rgba(255,255,255,.055) ) !important; border: 1px solid rgba(190,220,255,.20) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 15px 30px rgba(0,10,45,.22) !important; backdrop-filter: blur(18px) saturate(150%) !important; -webkit-backdrop-filter: blur(18px) saturate(150%) !important; color: #fff !important; } .bpmn-node:hover { transform: translateY(-5px) !important; background: linear-gradient( 145deg, rgba(255,255,255,.17), rgba(86,148,255,.09) ) !important; border-color: rgba(190,220,255,.34) !important; box-shadow: 0 20px 36px rgba(0,10,45,.30), inset 0 1px 0 rgba(255,255,255,.18) !important; } .bpmn-node.is-selected { border: 1px solid rgba(157,111,255,.82) !important; background: linear-gradient( 145deg, rgba(137,83,255,.22), rgba(255,255,255,.08) ) !important; box-shadow: 0 0 0 3px rgba(137,83,255,.12), 0 18px 38px rgba(54,26,135,.34), inset 0 1px 0 rgba(255,255,255,.18) !important; } .bpmn-node-title { color: #ffffff !important; text-shadow: 0 1px 2px rgba(0,0,0,.22); } .bpmn-node-count { color: #70bcff !important; } /* ========================================================= 10. BPMN STATUS PILLS ========================================================= */ .bpmn-node-status { color: #79f0b2 !important; background: rgba(24,185,107,.16) !important; border: 1px solid rgba(65,220,144,.20) !important; } .bpmn-node-status.orange { color: #ffc96c !important; background: rgba(255,158,55,.15) !important; border: 1px solid rgba(255,181,78,.18) !important; } .bpmn-node-status.purple { color: #c7a7ff !important; background: rgba(137,88,255,.17) !important; border: 1px solid rgba(177,137,255,.20) !important; } /* ========================================================= 11. BPMN DETAIL PANEL ========================================================= */ .bpmn-detail-shell { background: linear-gradient( 145deg, rgba(12, 45, 105, .58), rgba(7, 28, 71, .68) ) !important; } .bpmn-detail-header { border-bottom: 1px solid rgba(190,220,255,.13) !important; } .bpmn-detail-header h3, .bpmn-detail-title { color: #ffffff !important; } .bpmn-related-title { color: rgba(230,240,255,.84) !important; } .bpmn-empty-detail strong { color: #ffffff !important; } .bpmn-empty-detail p { color: rgba(221,234,255,.70) !important; } /* ========================================================= 12. BPMN TOOL BUTTONS ========================================================= */ .bpmn-tool { color: #ffffff !important; background: rgba(255,255,255,.09) !important; border: 1px solid rgba(205,229,255,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 8px 18px rgba(0,10,45,.14) !important; } .bpmn-tool:hover { background: rgba(255,255,255,.15) !important; border-color: rgba(218,235,255,.28) !important; } /* ========================================================= 13. LEGEND ========================================================= */ .bpmn-legend { border-top: 1px solid rgba(190,220,255,.11) !important; color: rgba(221,234,255,.72) !important; } /* ========================================================= 14. SVOA MINI ========================================================= */ .bpmn-svoa-mini { color: rgba(226,238,255,.80) !important; background: rgba(255,255,255,.07) !important; } .bpmn-svoa-mini:hover { background: rgba(255,255,255,.13) !important; border-color: rgba(195,222,255,.28) !important; } /* ========================================================= 15. ROUTE HINT ========================================================= */ .route-hint, .dashboard-v2-card-footer .route-hint { color: rgba(235,244,255,.88) !important; background: rgba(255,255,255,.10) !important; border: 1px solid rgba(255,255,255,.13) !important; } /* ========================================================= 16. SECTION HEADINGS ========================================================= */ .dashboard-v2-section-title h2 { color: #ffffff !important; } .dashboard-v2-section-title span { color: rgba(220,234,255,.67) !important; } /* ========================================================= 17. ACTIVITY LIST ========================================================= */ .dashboard-v2-activity { border-bottom: 1px solid rgba(189,217,255,.09) !important; } .dashboard-v2-activity-copy strong { color: #ffffff !important; } .dashboard-v2-activity-copy span { color: rgba(217,232,255,.66) !important; } /* ========================================================= 18. OVERRIDE OLD GLOBAL INPUT RULE ========================================================= */ .dashboard-v2-search input, .dashboard-v2-search input[type="text"], .dashboard-v2-search input[type="search"] { background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } /* ========================================================= 19. SCROLLBAR ========================================================= */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: rgba(3,15,42,.30); } ::-webkit-scrollbar-thumb { background: rgba(171,207,255,.22); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; } /* ========================================================= 20. FINAL CONTRAST SAFETY ========================================================= */ .dashboard-v2-card *, .dashboard-v2-panel *, .dashboard-v2-kpi *, .bpmn-canvas-shell *, .bpmn-detail-shell * { -webkit-font-smoothing: antialiased; } /* ========================================================= ATOSY BPMN LAYOUT FIX Fix start node hidden + excessive spacing ========================================================= */ /* ===== CANVAS ===== */ .bpmn-canvas { min-height: 0 !important; height: auto !important; padding: 64px 28px 52px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-behavior: smooth; box-sizing: border-box; } /* ===== FLOW ===== */ .bpmn-flow { width: max-content !important; min-width: max-content !important; max-width: none !important; min-height: 210px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; margin: 0 !important; padding: 0 24px !important; box-sizing: border-box; } /* ===== START / END ===== */ .bpmn-start, .bpmn-end { width: 52px !important; height: 52px !important; min-width: 52px !important; flex: 0 0 52px !important; position: relative; z-index: 3; } .bpmn-start { margin-left: 0 !important; background: linear-gradient( 145deg, rgba(35,220,132,.32), rgba(18,132,86,.28) ) !important; border: 2px solid rgba(79,235,159,.82) !important; color: #7dffc0 !important; box-shadow: 0 0 0 5px rgba(40,217,144,.08), 0 8px 24px rgba(0,75,47,.26), inset 0 1px 0 rgba(255,255,255,.20) !important; } .bpmn-end { margin-right: 0 !important; background: linear-gradient( 145deg, rgba(255,82,106,.27), rgba(133,26,54,.24) ) !important; border: 2px solid rgba(255,96,121,.85) !important; color: #ff9aab !important; box-shadow: 0 0 0 5px rgba(255,82,106,.07), 0 8px 24px rgba(83,8,30,.25), inset 0 1px 0 rgba(255,255,255,.18) !important; } /* ===== PROCESS NODES ===== */ .bpmn-node { width: 150px !important; min-width: 150px !important; max-width: 150px !important; min-height: 176px !important; flex: 0 0 150px !important; padding: 16px 12px !important; box-sizing: border-box; } /* ===== ARROWS ===== */ .bpmn-arrow { width: 48px !important; min-width: 48px !important; flex: 0 0 48px !important; height: 2px !important; margin: 0 8px !important; background: linear-gradient( 90deg, rgba(64,144,255,.60), rgba(72,174,255,.95) ) !important; box-shadow: 0 0 10px rgba(47,145,255,.24); } .bpmn-arrow::after { right: -1px !important; border-left-color: #5caaff !important; } /* ===== LEGEND ===== */ .bpmn-legend { min-height: 52px; padding: 12px 20px !important; box-sizing: border-box; } /* ===== REMOVE EXCESS VERTICAL SPACE ===== */ .bpmn-canvas-shell { min-height: auto !important; } .bpmn-work-area { align-items: stretch !important; } .bpmn-detail-shell { min-height: 100% !important; } .bpmn-detail-body { min-height: 0 !important; } /* ===== SCROLLBAR FOR FLOW ===== */ .bpmn-canvas::-webkit-scrollbar { height: 8px; } .bpmn-canvas::-webkit-scrollbar-track { background: rgba(255,255,255,.035); border-radius: 999px; } .bpmn-canvas::-webkit-scrollbar-thumb { background: rgba(117,183,255,.30); border: 2px solid transparent; background-clip: padding-box; border-radius: 999px; } /* ===== RESPONSIVE ===== */ @media (max-width: 1180px) { .bpmn-flow { padding-right: 36px !important; } } /* ========================================================= ATOSY LOGIN — LIQUID INPUT UPGRADE ========================================================= */ /* ===== INPUT WRAPPER ===== */ .login-field, .auth-field, .form-field { margin-bottom: 18px; } /* ===== LABEL ===== */ .login-field label, .auth-field label, .form-field label { display: block; margin-bottom: 8px; color: #274b7e !important; font-size: 13px; font-weight: 800; letter-spacing: .01em; } /* ===== INPUT ===== */ .login-field input, .auth-field input, .form-field input, #login-email, #login-password, input[type="email"], input[type="password"] { width: 100%; height: 56px; padding: 0 18px; border-radius: 18px !important; border: 1px solid rgba(95, 140, 205, .18) !important; background: linear-gradient( 145deg, rgba(255,255,255,.70), rgba(232,242,255,.46) ) !important; color: #123d7b !important; font-size: 15px; font-weight: 650; outline: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.88), inset 0 -1px 0 rgba(98,145,210,.08), 0 8px 22px rgba(28,71,135,.07) !important; backdrop-filter: blur(16px) saturate(145%); -webkit-backdrop-filter: blur(16px) saturate(145%); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 160ms ease; } /* ===== PLACEHOLDER ===== */ .login-field input::placeholder, .auth-field input::placeholder, .form-field input::placeholder, #login-email::placeholder, #login-password::placeholder { color: rgba(71, 104, 154, .42) !important; font-weight: 500; } /* ===== FOCUS ===== */ .login-field input:focus, .auth-field input:focus, .form-field input:focus, #login-email:focus, #login-password:focus, input[type="email"]:focus, input[type="password"]:focus { border-color: rgba(54, 132, 255, .64) !important; background: linear-gradient( 145deg, rgba(255,255,255,.88), rgba(236,245,255,.68) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.96), 0 0 0 4px rgba(49,133,255,.10), 0 12px 30px rgba(26,91,196,.14) !important; transform: translateY(-1px); } /* ===== AUTOFILL ===== */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: #123d7b !important; -webkit-box-shadow: 0 0 0 1000px rgba(239,246,255,.92) inset !important; transition: background-color 9999s ease-in-out 0s; } /* ===== PASSWORD WRAPPER ===== */ .password-wrapper, .password-field, .login-password-wrap { position: relative; } /* ===== LOGIN CARD SLIGHTLY MORE PREMIUM ===== */ .login-card, .auth-card { border: 1px solid rgba(255,255,255,.72) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.94), 0 28px 70px rgba(0,24,79,.28), 0 8px 24px rgba(0,45,120,.10) !important; } /* ===== LOGIN BUTTON ===== */ .login-button, .auth-submit, #login-button, button[type="submit"] { min-height: 56px; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.18) !important; background: linear-gradient( 135deg, #2c8cff, #0e6ce8 ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 10px 0 rgba(0,70,160,.28), 0 16px 30px rgba(0,81,200,.22) !important; color: #fff !important; font-weight: 800 !important; transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease; } .login-button:hover, .auth-submit:hover, #login-button:hover, button[type="submit"]:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 11px 0 rgba(0,70,160,.26), 0 20px 36px rgba(0,81,200,.28) !important; } /* ========================================================= ATOSY LOGIN BUTTON — PREMIUM LIQUID REBUILD ========================================================= */ .login-button, .auth-submit, #login-button, button[type="submit"], .login-card button, .auth-card button { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; padding: 0 22px; border: 1px solid rgba(255,255,255,.24) !important; border-radius: 20px !important; cursor: pointer; overflow: hidden; isolation: isolate; background: linear-gradient( 180deg, #49a3ff 0%, #2d8cff 48%, #116eea 100% ) !important; color: #ffffff !important; font-size: 17px !important; font-weight: 800 !important; letter-spacing: .01em; text-shadow: 0 1px 1px rgba(0, 40, 120, .25); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(8,57,154,.38), 0 12px 26px rgba(7, 76, 184, .30), 0 4px 0 rgba(5, 61, 150, .72) !important; transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease, background 160ms ease; } /* glossy highlight */ .login-button::before, .auth-submit::before, #login-button::before, button[type="submit"]::before, .login-card button::before, .auth-card button::before { content: ""; position: absolute; inset: 1px 1px auto 1px; height: 52%; border-radius: 19px 19px 14px 14px; background: linear-gradient( 180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.10) 55%, rgba(255,255,255,0) 100% ); pointer-events: none; z-index: 0; } /* soft inner glow */ .login-button::after, .auth-submit::after, #login-button::after, button[type="submit"]::after, .login-card button::after, .auth-card button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient( circle at 50% 0%, rgba(255,255,255,.18), transparent 48% ); pointer-events: none; z-index: 0; } .login-button > *, .auth-submit > *, #login-button > *, button[type="submit"] > *, .login-card button > *, .auth-card button > * { position: relative; z-index: 1; } .login-button:hover, .auth-submit:hover, #login-button:hover, button[type="submit"]:hover, .login-card button:hover, .auth-card button:hover { transform: translateY(-1px); filter: brightness(1.03) saturate(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(8,57,154,.42), 0 16px 30px rgba(7, 76, 184, .34), 0 5px 0 rgba(5, 61, 150, .70) !important; } .login-button:active, .auth-submit:active, #login-button:active, button[type="submit"]:active, .login-card button:active, .auth-card button:active { transform: translateY(3px); filter: brightness(.98); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(8,57,154,.34), 0 7px 16px rgba(7, 76, 184, .22), 0 1px 0 rgba(5, 61, 150, .68) !important; } .login-button:focus-visible, .auth-submit:focus-visible, #login-button:focus-visible, button[type="submit"]:focus-visible, .login-card button:focus-visible, .auth-card button:focus-visible { outline: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.38), inset 0 -1px 0 rgba(8,57,154,.40), 0 0 0 4px rgba(76, 159, 255, .26), 0 14px 28px rgba(7, 76, 184, .34), 0 4px 0 rgba(5, 61, 150, .72) !important; } .login-button:disabled, .auth-submit:disabled, #login-button:disabled, button[type="submit"]:disabled, .login-card button:disabled, .auth-card button:disabled { opacity: .62; cursor: not-allowed; transform: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 6px 16px rgba(7, 76, 184, .14) !important; } /* Optional: make the login card spacing cleaner */ .login-card .login-button, .auth-card .auth-submit, .login-card button[type="submit"], .auth-card button[type="submit"] { margin-top: 14px; } /* ========================================================= ATOSY LOGIN BUTTON — MODERN PROFESSIONAL V3 ========================================================= */ #login-button, .login-button, .auth-submit, .login-card button[type="submit"], .auth-card button[type="submit"] { position: relative !important; width: 100% !important; height: 58px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 58px 0 24px !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.24) !important; background: linear-gradient( 180deg, rgba(43,140,255,.96) 0%, rgba(26,117,238,.96) 100% ) !important; color: #fff !important; font-size: 16px !important; font-weight: 750 !important; letter-spacing: .005em !important; text-shadow: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 8px 22px rgba(20,86,184,.20) !important; overflow: hidden !important; cursor: pointer !important; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease !important; } /* bỏ hoàn toàn hiệu ứng glossy cũ */ #login-button::before, .login-button::before, .auth-submit::before, .login-card button[type="submit"]::before, .auth-card button[type="submit"]::before { content: "" !important; position: absolute !important; inset: 0 !important; border-radius: inherit !important; background: linear-gradient( 180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42% ) !important; pointer-events: none !important; } /* vòng tròn arrow bên phải */ #login-button::after, .login-button::after, .auth-submit::after, .login-card button[type="submit"]::after, .auth-card button[type="submit"]::after { content: "→" !important; position: absolute !important; right: 14px !important; top: 50% !important; width: 30px !important; height: 30px !important; display: flex !important; align-items: center !important; justify-content: center !important; transform: translateY(-50%) !important; border-radius: 999px !important; background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.18) !important; color: rgba(255,255,255,.96) !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important; transition: transform .16s ease, background .16s ease !important; } /* hover */ #login-button:hover, .login-button:hover, .auth-submit:hover, .login-card button[type="submit"]:hover, .auth-card button[type="submit"]:hover { transform: translateY(-1px) !important; background: linear-gradient( 180deg, rgba(49,147,255,.98) 0%, rgba(30,123,244,.98) 100% ) !important; border-color: rgba(255,255,255,.32) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 28px rgba(20,86,184,.25) !important; } #login-button:hover::after, .login-button:hover::after, .auth-submit:hover::after, .login-card button[type="submit"]:hover::after, .auth-card button[type="submit"]:hover::after { transform: translate(2px,-50%) !important; background: rgba(255,255,255,.20) !important; } /* active */ #login-button:active, .login-button:active, .auth-submit:active, .login-card button[type="submit"]:active, .auth-card button[type="submit"]:active { transform: translateY(0) scale(.995) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 5px 14px rgba(20,86,184,.17) !important; } /* keyboard focus */ #login-button:focus-visible, .login-button:focus-visible, .auth-submit:focus-visible, .login-card button[type="submit"]:focus-visible, .auth-card button[type="submit"]:focus-visible { outline: 2px solid rgba(68,150,255,.92) !important; outline-offset: 3px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 0 0 5px rgba(50,132,255,.12), 0 10px 24px rgba(20,86,184,.22) !important; } /* disabled / loading */ #login-button:disabled, .login-button:disabled, .auth-submit:disabled, .login-card button[type="submit"]:disabled, .auth-card button[type="submit"]:disabled { opacity: .58 !important; cursor: not-allowed !important; transform: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 5px 14px rgba(20,86,184,.10) !important; } /* ========================================================= LOGIN CARD SPACING REFINEMENT ========================================================= */ .login-card, .auth-card { padding-bottom: 34px !important; } .login-card button[type="submit"], .auth-card button[type="submit"] { margin-top: 18px !important; } /* ========================================================= ATOSY LOGIN — LIQUID PROFESSIONAL FINAL Clean button + custom validation ========================================================= */ /* --------------------------------------------------------- LOGIN BUTTON — remove decorative arrow completely --------------------------------------------------------- */ #login-button, .login-button, .auth-submit, .login-card button[type="submit"], .auth-card button[type="submit"] { position: relative !important; width: 100% !important; height: 58px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 24px !important; border-radius: 18px !important; border: 1px solid rgba(255,255,255,.20) !important; background: linear-gradient( 180deg, rgba(49,145,255,.96) 0%, rgba(26,116,238,.97) 100% ) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 760 !important; letter-spacing: -.01em !important; text-shadow: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 10px 24px rgba(14,84,190,.20) !important; overflow: hidden !important; cursor: pointer !important; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, filter .16s ease !important; } /* very subtle glass reflection only */ #login-button::before, .login-button::before, .auth-submit::before, .login-card button[type="submit"]::before, .auth-card button[type="submit"]::before { content: "" !important; position: absolute !important; inset: 1px 1px auto 1px !important; height: 46% !important; border-radius: 17px 17px 12px 12px !important; background: linear-gradient( 180deg, rgba(255,255,255,.10), rgba(255,255,255,0) ) !important; pointer-events: none !important; } /* REMOVE ARROW / CIRCLE FROM OLD VERSION */ #login-button::after, .login-button::after, .auth-submit::after, .login-card button[type="submit"]::after, .auth-card button[type="submit"]::after { content: none !important; display: none !important; } /* hover */ #login-button:hover, .login-button:hover, .auth-submit:hover, .login-card button[type="submit"]:hover, .auth-card button[type="submit"]:hover { transform: translateY(-1px) !important; filter: brightness(1.025) !important; border-color: rgba(255,255,255,.30) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 14px 30px rgba(14,84,190,.25) !important; } /* click */ #login-button:active, .login-button:active, .auth-submit:active, .login-card button[type="submit"]:active, .auth-card button[type="submit"]:active { transform: scale(.995) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 6px 16px rgba(14,84,190,.16) !important; } /* keyboard focus */ #login-button:focus-visible, .login-button:focus-visible, .auth-submit:focus-visible, .login-card button[type="submit"]:focus-visible, .auth-card button[type="submit"]:focus-visible { outline: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 4px rgba(55,142,255,.14), 0 12px 28px rgba(14,84,190,.23) !important; } /* ========================================================= LIQUID VALIDATION ========================================================= */ .atosy-field-error { margin-top: 8px; padding: 9px 12px; display: flex; align-items: center; gap: 8px; border-radius: 13px; border: 1px solid rgba(255,93,113,.18); background: linear-gradient( 135deg, rgba(255,92,113,.095), rgba(255,255,255,.38) ); color: #b83b50; font-size: 12px; font-weight: 650; line-height: 1.35; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 18px rgba(123,36,54,.06); backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); animation: atosyValidationIn .18s ease-out; } .atosy-field-error::before { content: "!"; width: 19px; height: 19px; flex: 0 0 19px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: #fff; background: linear-gradient( 135deg, #ff667b, #ee4761 ); font-size: 11px; font-weight: 900; box-shadow: 0 4px 10px rgba(224,58,84,.16); } .atosy-input-error { border-color: rgba(238,77,101,.38) !important; background: linear-gradient( 145deg, rgba(255,255,255,.88), rgba(255,241,244,.62) ) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 4px rgba(238,77,101,.075), 0 8px 22px rgba(177,52,75,.06) !important; } .atosy-input-valid { border-color: rgba(49,151,114,.24) !important; } @keyframes atosyValidationIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* overall login error, e.g. invalid credentials */ .atosy-login-message { margin: 10px 0 2px; padding: 10px 13px; border-radius: 14px; border: 1px solid rgba(255,89,111,.17); background: rgba(255,245,247,.72); color: #b63b50; font-size: 12px; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255,255,255,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ========================================================= SUBJECT MENU ROUTE MICRO INTERACTION ========================================================= */ .atosy-route-pressed { transform: translateY(-1px) scale(.985) !important; filter: brightness(1.12) !important; transition: transform 120ms ease, filter 120ms ease !important; } /* ========================================================= ATOSY SINGLE WORKSPACE SAFETY ========================================================= */ body.atosy-view-subject #bpmn-page, body.atosy-view-subject #bpmn-view, body.atosy-view-subject #bpmn-workspace, body.atosy-view-subject .bpmn-page, body.atosy-view-subject .bpmn-view, body.atosy-view-subject .bpmn-workspace, body.atosy-view-subject .bpmn-shell { display: none !important; }