/* ========================================================= UniversalLook — SCOPED вариант за DNN портала. ГЕНЕРИРАН от scripts/build-universallook-scoped.js — НЕ редактирай ръчно. Източник: UniversalLook.Design/universallook.css Всяко правило важи само под `.ul-scope`, защото скинът Dalsia ползва 46 от същите имена на класове и иначе двата CSS-а се бият. ========================================================= */ /* ========================================================= UniversalLook — Bundled distribution (development version) Автоматично генериран от scripts/bundle.js — НЕ редактирай ръчно. Включва: fonts (Sofia Sans @font-face) + tokens + components. Относителни пътища: очакват `fonts/` subfolder редом с този файл. ========================================================= */ /* ========================================================= Sofia Sans — Self-hosted variable font Weights: 300, 400, 500, 600, 700 (covered by single variable WOFF2 per subset) Subsets: cyrillic + cyrillic-ext + latin + latin-ext Total ≈ 87KB across 4 files. ========================================================= */ /* cyrillic-ext */ @font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('./fonts/sofia-sans-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('./fonts/sofia-sans-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('./fonts/sofia-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Sofia Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('./fonts/sofia-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================= UniversalLook — Design Tokens Source of truth for colors, typography, spacing, radii. Извлечени от dalsia_portal_prototype 2.html (corporate theme). ========================================================= */ /* ---------- BASE / DEFAULT ---------- */.ul-scope { /* Brand */ --navy: #0A2A57; --navy-light: #1D5886; --red: #C41E3A; --red-dark: #9B1B30; --blue-sky: #139FDA; /* Surfaces */ --bg: #F2F3F7; --card: #FFFFFF; /* Text */ --text: #131A22; --text-light: #6B7280; --text-muted: #9CA3AF; --border: #E5E7EB; /* Status */ --success: #10B981; --warning: #F59E0B; --danger: #EF4444; /* Geometry */ --radius: 12px; --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); --shadow-lg: 0 4px 16px rgba(0,0,0,0.08); /* Typography */ --font-sans: 'Sofia Sans', system-ui, 'Segoe UI', sans-serif; --font-base: 17px; --line-base: 1.5; /* Spacing — стълба за padding/margin/gap (не хардкодвай px) */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-2xl: 32px; /* Z-index — слоеве (по-голямо = отгоре) */ --z-dropdown: 50; --z-nav: 99; --z-header: 100; --z-modal: 200; --z-toast: 300; /* Breakpoints — за справка/JS; CSS @media не чете var(), използвай стойностите директно */ --bp-sm: 600px; --bp-md: 768px; --bp-lg: 900px; /* Motion — продължителности на transition/animation */ --dur-fast: 0.15s; --dur-base: 0.2s; --dur-slow: 0.4s; /* Burgundy — акцент (override-ва се в dramatic; тук е fallback) */ --burgundy: #7B1E3A; --burgundy-light:#9C2A4D; --burgundy-pale: #F5E1E8; /* Layout */ --content-max: 1280px; } /* ---------- CORPORATE THEME (default-применен look — dalsia.com style) ---------- */.ul-scope[data-theme="corporate"] { --bg: #F0F0F0; --card: #FFFFFF; --text: #1A1A2E; --text-light: #4A5568; --text-muted: #8896A6; --border: #C8D0DC; --navy: #0A2A57; --navy-light: #1D5886; --red: #EF1734; --red-dark: #CD253B; --blue-sky: #1D5886; --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --shadow: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03); --shadow-lg: 0 2px 8px rgba(10,26,57,0.08); --radius: 14px; } /* ---------- DARK THEME ---------- */.ul-scope[data-theme="dark"] { --bg: #0B1D3A; --card: #102647; --text: #E1E8F0; --text-light: #94A7C0; --text-muted: #637894; --border: #1B3A63; --shadow: 0 1px 3px rgba(5,15,35,0.4), 0 1px 2px rgba(5,15,35,0.3); --shadow-lg: 0 4px 16px rgba(5,15,35,0.5); } /* ---------- DRAMATIC THEME ---------- */.ul-scope[data-theme="dramatic"] { --bg: #E8ECF4; --card: #FFFFFF; --text: #0A1628; --text-light: #3D4F6A; --text-muted: #687890; --border: #B8C4D8; --shadow: 0 2px 8px rgba(10,26,57,0.10), 0 1px 3px rgba(10,26,57,0.08); --shadow-lg: 0 8px 32px rgba(10,26,57,0.16), 0 2px 8px rgba(10,26,57,0.10); --radius: 14px; --burgundy: #7B1E3A; --burgundy-light:#9C2A4D; --burgundy-pale:#F5E1E8; } /* ========================================================= UniversalLook — Components Reusable UI components extracted from dalsia_portal_prototype. Зависи от tokens.css. Темите ('corporate' default, 'dark', 'dramatic') се прилагат чрез [data-theme="..."] атрибут върху . ========================================================= */ /* ---------- Reset / base ---------- */.ul-scope * { margin: 0; padding: 0; box-sizing: border-box; } .ul-scope { font-family: var(--font-sans); background: var(--bg); color: var(--text); font-size: var(--font-base); line-height: var(--line-base); min-height: 100vh; } .ul-scope a { color: var(--navy-light); text-decoration: none; } .ul-scope a:hover { color: var(--red); } /* ---------- Layout: Header ---------- */.ul-scope .header { background: var(--card); border-bottom: 1px solid var(--border); padding: 0 24px; height: 76px; display: flex; align-items: center; gap: 20px; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,0.04); } .ul-scope .logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; } .ul-scope .logo img { height: 40px; width: auto; } .ul-scope .partida-selector { flex: 1; max-width: 480px; position: relative; } .ul-scope .partida-btn { display: flex; align-items: center; gap: 10px; background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 8px 14px; cursor: pointer; transition: all 0.2s; width: 100%; } .ul-scope .partida-btn:hover { border-color: var(--navy-light); } .ul-scope .partida-btn .icon { font-size: 18px; } .ul-scope .partida-btn .info { flex: 1; text-align: left; } .ul-scope .partida-btn .address { font-size: 16px; font-weight: 400; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ul-scope .partida-btn .itn { font-size: 14px; color: var(--text-muted); } .ul-scope .partida-btn .arrow { color: var(--text-muted); font-size: 15px; transition: transform 0.2s; } .ul-scope .header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; } .ul-scope .notif-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px; transition: all 0.2s; } .ul-scope .notif-btn:hover { background: #e8e9ed; } .ul-scope .notif-badge { position: absolute; top: -2px; right: -2px; background: var(--red); color: white; font-size: 12px; font-weight: 400; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--card); } .ul-scope .user-btn { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 10px 4px 4px; border-radius: 20px; transition: background 0.2s; } .ul-scope .user-btn:hover { background: var(--bg); } .ul-scope .user-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--navy); color: white; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 400; } .ul-scope .user-name { font-size: 15px; font-weight: 400; } /* ---------- Layout: Main nav ---------- */.ul-scope .main-nav { background: var(--card); border-bottom: 1px solid var(--border); padding-left: 24px; padding-right: 24px; display: flex; gap: 2px; position: sticky; top: 76px; z-index: 99; } .ul-scope .nav-link { padding: 14px 18px; font-size: 17px; font-weight: 400; color: var(--text-light); cursor: pointer; border-bottom: 3px solid transparent; transition: all 0.2s; display: flex; align-items: center; gap: 6px; white-space: nowrap; position: relative; } .ul-scope .nav-link:hover { color: var(--text); background: var(--bg); } .ul-scope .nav-link.active { color: var(--red); border-bottom-color: var(--red); } .ul-scope .nav-link .arrow { font-size: 12px; } .ul-scope .nav-link .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--card); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-lg); min-width: 200px; z-index: 50; padding: 6px; } .ul-scope .nav-link:hover .sub-menu { display: block; } .ul-scope .sub-menu a { display: block; padding: 10px 14px; font-size: 15px; font-weight: 500; color: var(--text); border-radius: 6px; } .ul-scope .sub-menu a:hover { background: var(--bg); color: var(--red); } /* ---------- Layout: Content ---------- */.ul-scope .content { max-width: var(--content-max); margin: 0 auto; padding: 24px; } .ul-scope .page { display: none; } .ul-scope .page.active { display: block; } .ul-scope .page-title { font-size: 26px; font-weight: 400; color: var(--text); margin-bottom: 20px; } /* ---------- Dashboard grid + Widget ---------- */.ul-scope .dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ul-scope .dash-grid .full { grid-column: 1 / -1; } .ul-scope .dash-grid .span2 { grid-column: span 2; } .ul-scope .widget { background: var(--card); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); border: 1px solid var(--border); transition: box-shadow 0.2s, transform 0.2s; } .ul-scope .widget:hover { box-shadow: var(--shadow-lg); } .ul-scope .w-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .ul-scope .w-title { font-size: 15px; font-weight: 400; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; display: flex; align-items: center; gap: 8px; } .ul-scope .w-title .icon { font-size: 18px; } .ul-scope .w-badge { font-size: 12px; padding: 2px 8px; border-radius: 10px; font-weight: 400; } .ul-scope .w-badge.green { background: #D1FAE5; color: #065F46; } .ul-scope .w-badge.red { background: #FEE2E2; color: #991B1B; } .ul-scope .w-badge.blue { background: #DBEAFE; color: #1E40AF; } .ul-scope .w-badge.orange { background: #DBEAFE; color: #1E40AF; } .ul-scope .w-value { font-size: 32px; font-weight: 400; color: var(--text); line-height: 1.2; } .ul-scope .w-label { font-size: 14px; color: var(--text-muted); margin-top: 2px; } .ul-scope .w-action { margin-top: 14px; } .ul-scope .w-action a, .ul-scope .btn-sm { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 400; color: white; padding: 6px 12px; border-radius: 8px; background: var(--navy); border: 1px solid var(--navy); transition: all 0.2s; cursor: pointer; text-decoration: none; } .ul-scope .w-action a:hover, .ul-scope .btn-sm:hover { background: var(--navy-light); border-color: var(--navy-light); color: white; } /* ---------- Charts (simple bar) ---------- */.ul-scope .chart { display: flex; align-items: flex-end; gap: 8px; height: 120px; padding: 10px 0; } .ul-scope .chart-bar-group { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; } .ul-scope .chart-bar { width: 100%; max-width: 36px; border-radius: 4px 4px 0 0; transition: opacity 0.2s; cursor: pointer; } .ul-scope .chart-bar:hover { opacity: 0.8; } .ul-scope .chart-bar.current { background: var(--red); } .ul-scope .chart-bar.prev { background: var(--navy); opacity: 0.3; } .ul-scope .chart-label { font-size: 12px; color: var(--text-muted); font-weight: 500; } .ul-scope .chart-val { font-size: 11px; color: var(--text-light); font-weight: 400; } /* ---------- Device list mini ---------- */.ul-scope .device-mini { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .ul-scope .device-mini:last-child { border-bottom: none; } .ul-scope .device-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .ul-scope .device-dot.green { background: var(--success); } .ul-scope .device-dot.yellow { background: var(--warning); } .ul-scope .device-dot.red { background: var(--danger); } .ul-scope .device-mini .info { flex: 1; font-size: 14px; } .ul-scope .device-mini .name { font-weight: 400; color: var(--text); } .ul-scope .device-mini .meta { color: var(--text-muted); font-size: 13px; } /* ---------- Schedule callout ---------- */.ul-scope .schedule-callout { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); border: 1px solid #93C5FD; border-radius: 10px; padding: 16px; display: flex; align-items: center; gap: 14px; } .ul-scope .schedule-callout .date-box { background: var(--card); border-radius: 10px; padding: 10px 14px; text-align: center; box-shadow: var(--shadow); min-width: 70px; } .ul-scope .schedule-callout .date-box .month { font-size: 12px; color: var(--red); font-weight: 400; text-transform: uppercase; } .ul-scope .schedule-callout .date-box .day { font-size: 28px; font-weight: 400; color: var(--text); } .ul-scope .schedule-callout .date-box .time { font-size: 13px; color: var(--text-muted); } /* ---------- Tables ---------- */.ul-scope .data-table { width: 100%; border-collapse: collapse; } .ul-scope .data-table th { text-align: left; padding: 12px 16px; font-size: 13px; font-weight: 400; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border); background: var(--bg); } .ul-scope .data-table td { padding: 14px 16px; font-size: 15px; border-bottom: 1px solid var(--border); } .ul-scope .data-table tr:hover td { background: #F9FAFB; } .ul-scope .pdf-link { display: inline-flex; align-items: center; gap: 4px; color: var(--red); font-weight: 400; font-size: 14px; } .ul-scope .pdf-link:hover { color: var(--red-dark); } .ul-scope .status { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 400; padding: 3px 10px; border-radius: 10px; } .ul-scope .status.active { background: #D1FAE5; color: #065F46; } .ul-scope .status.pending { background: #DBEAFE; color: #1E40AF; } .ul-scope .status.done { background: #DBEAFE; color: #1E40AF; } .ul-scope .status.inactive { background: #F3F4F6; color: #4B5563; } .ul-scope .status.warning { background: #FEF3C7; color: #92400E; } .ul-scope .status.danger { background: #FEE2E2; color: #991B1B; } /* ---------- Forms ---------- */.ul-scope .form-group { margin-bottom: 16px; } .ul-scope .form-label { display: block; font-size: 14px; font-weight: 400; color: var(--text-light); margin-bottom: 6px; } .ul-scope .form-required { color: var(--danger); margin-left: 2px; } .ul-scope .form-help { display: block; margin-top: 4px; font-size: 13px; color: var(--text-muted); } .ul-scope .form-error { display: block; margin-top: 4px; font-size: 13px; color: var(--danger); } .ul-scope .form-input, .ul-scope .form-select, .ul-scope .form-textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 15px; font-family: inherit; background: var(--card); transition: border-color 0.2s; } .ul-scope .form-input:focus, .ul-scope .form-select:focus, .ul-scope .form-textarea:focus { outline: none; border-color: var(--navy-light); box-shadow: 0 0 0 3px rgba(29,88,134,0.1); } .ul-scope .form-input.is-invalid, .ul-scope .form-select.is-invalid, .ul-scope .form-textarea.is-invalid { border-color: var(--danger); } .ul-scope .form-input.is-invalid:focus, .ul-scope .form-select.is-invalid:focus, .ul-scope .form-textarea.is-invalid:focus { box-shadow: 0 0 0 3px rgba(239,68,68,0.12); } .ul-scope .form-input:disabled, .ul-scope .form-select:disabled, .ul-scope .form-textarea:disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; } .ul-scope .form-textarea { min-height: 80px; resize: vertical; } /* numeric input с suffix */.ul-scope .form-numeric-wrap { position: relative; display: flex; align-items: stretch; } .ul-scope .form-numeric { padding-right: 48px; } .ul-scope .form-numeric-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 14px; font-weight: 400; color: var(--text-muted); pointer-events: none; } /* ---------- Checkbox (UlCheckbox) ---------- */.ul-scope .ul-checkbox { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; margin-bottom: 4px; } .ul-scope .ul-checkbox.is-disabled { cursor: not-allowed; opacity: 0.6; } .ul-scope .ul-checkbox-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .ul-scope .ul-checkbox-box { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--border); border-radius: 5px; background: var(--card); transition: border-color 0.15s, background 0.15s; flex-shrink: 0; } .ul-scope .ul-checkbox-input:checked + .ul-checkbox-box { background: var(--navy); border-color: var(--navy); } .ul-scope .ul-checkbox-input:checked + .ul-checkbox-box::after { content: ''; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); } .ul-scope .ul-checkbox-input:focus-visible + .ul-checkbox-box { box-shadow: 0 0 0 3px rgba(29,88,134,0.15); } .ul-scope .ul-checkbox-label { font-size: 15px; color: var(--text); } /* ---------- Menu (UlMenu / UlNavMenu) ---------- */.ul-scope .ul-menu { display: flex; gap: 4px; font-family: var(--font-sans); } .ul-scope .ul-menu.is-vertical { flex-direction: column; min-width: 200px; } .ul-scope .ul-menu.is-horizontal { flex-direction: row; align-items: center; flex-wrap: wrap; } .ul-scope .ul-menu-item { position: relative; } .ul-scope .ul-menu.is-vertical .ul-menu-item { width: 100%; } .ul-scope .ul-menu-link { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 400; cursor: pointer; transition: background 0.15s, color 0.15s; } .ul-scope .ul-menu-link:hover { background: var(--bg); color: var(--navy); } .ul-scope .ul-menu-item.is-active > .ul-menu-link { background: var(--bg); color: var(--navy); font-weight: 500; } .ul-scope .ul-menu-item.is-disabled > .ul-menu-link { opacity: 0.5; cursor: not-allowed; pointer-events: none; } .ul-scope .ul-menu-icon { font-size: 16px; line-height: 1; flex-shrink: 0; } .ul-scope .ul-menu-text { flex: 1; } .ul-scope .ul-menu-caret { font-size: 11px; opacity: 0.6; transition: transform 0.2s; } .ul-scope .ul-menu-item:hover > .ul-menu-link .ul-menu-caret { transform: rotate(180deg); } /* Vertical: children indent inline */.ul-scope .ul-menu.is-vertical .ul-menu-children { padding-left: 24px; display: flex; flex-direction: column; gap: 2px; } /* Horizontal: children float as dropdown panel on hover */.ul-scope .ul-menu.is-horizontal .ul-menu-children { position: absolute; top: 100%; left: 0; min-width: 200px; padding: 6px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); display: none; z-index: 100; flex-direction: column; gap: 2px; } .ul-scope .ul-menu.is-horizontal .ul-menu-item:hover > .ul-menu-children { display: flex; } .ul-scope .ul-menu.is-horizontal .ul-menu-children .ul-menu-item { width: 100%; } .ul-scope .ul-menu.is-horizontal .ul-menu-children .ul-menu-children { position: static; padding: 0 0 0 16px; border: none; box-shadow: none; display: flex; background: transparent; } /* ---------- Alert (UlAlert) ---------- */.ul-scope .ul-alert { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 10px; border-left: 4px solid; background: var(--card); margin-bottom: 16px; font-size: 15px; line-height: 1.5; } .ul-scope .ul-alert-icon { flex-shrink: 0; font-size: 18px; line-height: 1; margin-top: 2px; } .ul-scope .ul-alert-content { flex: 1; } .ul-scope .ul-alert-title { font-weight: 600; margin-bottom: 2px; } .ul-scope .ul-alert-close { flex-shrink: 0; background: transparent; border: none; color: inherit; opacity: 0.6; cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px; } .ul-scope .ul-alert-close:hover { opacity: 1; } /* ---------- DataGrid (UlDataGrid) ---------- */.ul-scope .ul-grid { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-sans); } .ul-scope .ul-grid-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ul-scope .ul-grid-toolbar-spacer { flex: 1; } .ul-scope .ul-grid-search { max-width: 280px; } .ul-scope .form-input-sm { padding: 6px 10px; font-size: 13px; } .ul-scope .ul-grid-table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); } .ul-scope .ul-grid .data-table { margin: 0; border-collapse: collapse; } .ul-scope .ul-grid-sortable { cursor: pointer; user-select: none; } .ul-scope .ul-grid-sortable:hover { background: var(--bg); } .ul-scope .ul-grid-sort-caret { margin-left: 4px; font-size: 10px; opacity: 0.7; } .ul-scope .ul-grid-filter-row th { padding: 6px 8px !important; background: #FAFBFC; } .ul-scope .ul-grid-empty { text-align: center; color: var(--text-muted); padding: 32px !important; } .ul-scope .ul-grid .data-table tr.is-selected td { background: rgba(29,88,134,0.08); } .ul-scope .ul-grid .data-table tr.is-editing td { background: #FFFBEB; } .ul-scope .ul-grid .data-table tr.is-dirty td { background: #FEF3C7; } .ul-scope .ul-grid-select-cell { width: 36px; text-align: center; } .ul-scope .ul-grid-commands-cell { width: 1%; white-space: nowrap; text-align: right; } .ul-scope .ul-grid-commands-cell .btn-sm { margin-left: 4px; } .ul-scope .ul-grid-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .ul-scope .ul-grid-page-btn { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--border); background: var(--card); border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--text); } .ul-scope .ul-grid-page-btn:hover:not(:disabled) { border-color: var(--navy-light); color: var(--navy); } .ul-scope .ul-grid-page-btn.is-current { background: var(--navy); color: white; border-color: var(--navy); } .ul-scope .ul-grid-page-btn:disabled { opacity: 0.4; cursor: not-allowed; } .ul-scope .ul-grid-pager-info { margin-left: 12px; font-size: 13px; color: var(--text-muted); } /* ---------- Toast (UlToast / window.UlToast) ---------- */.ul-scope .ul-toast-container { position: fixed; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 9999; pointer-events: none; max-width: 380px; } .ul-scope .ul-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 10px; background: var(--card); box-shadow: var(--shadow-lg); border-left: 4px solid var(--text-light); font-size: 14px; line-height: 1.4; opacity: 0; transform: translateX(20px); transition: opacity 0.25s, transform 0.25s; } .ul-scope .ul-toast.is-shown { opacity: 1; transform: translateX(0); } .ul-scope .ul-toast.is-hiding { opacity: 0; transform: translateX(20px); } .ul-scope .ul-toast-icon { flex-shrink: 0; font-size: 16px; line-height: 1; margin-top: 2px; } .ul-scope .ul-toast-body { flex: 1; min-width: 0; } .ul-scope .ul-toast-title { font-weight: 600; margin-bottom: 2px; } .ul-scope .ul-toast-message { color: var(--text); } .ul-scope .ul-toast-close { flex-shrink: 0; background: transparent; border: none; color: var(--text-muted); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 2px; } .ul-scope .ul-toast-close:hover { color: var(--text); } .ul-scope .ul-toast-success { border-left-color: var(--success); } .ul-scope .ul-toast-success .ul-toast-icon { color: var(--success); } .ul-scope .ul-toast-info { border-left-color: var(--blue-sky); } .ul-scope .ul-toast-info .ul-toast-icon { color: var(--blue-sky); } .ul-scope .ul-toast-warning { border-left-color: var(--warning); } .ul-scope .ul-toast-warning .ul-toast-icon { color: var(--warning); } .ul-scope .ul-toast-danger { border-left-color: var(--danger); } .ul-scope .ul-toast-danger .ul-toast-icon { color: var(--danger); } .ul-scope .ul-alert.is-success { background: #ECFDF5; border-color: var(--success); color: #065F46; } .ul-scope .ul-alert.is-info { background: #EFF6FF; border-color: var(--blue-sky); color: #1E40AF; } .ul-scope .ul-alert.is-warning { background: #FFFBEB; border-color: var(--warning); color: #92400E; } .ul-scope .ul-alert.is-danger { background: #FEF2F2; border-color: var(--danger); color: #991B1B; } /* ---------- Buttons ---------- */.ul-scope .btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: 10px; font-size: 15px; font-weight: 400; cursor: pointer; border: none; transition: all 0.2s; font-family: inherit; } .ul-scope .btn-red { background: var(--navy); color: white; } .ul-scope .btn-red:hover { background: var(--navy-light); } .ul-scope .btn-navy { background: var(--navy); color: white; } .ul-scope .btn-navy:hover { background: var(--navy-light); } .ul-scope .btn-outline { background: var(--card); color: var(--navy); border: 1.5px solid var(--navy); } .ul-scope .btn-outline:hover { background: var(--navy); color: white; } .ul-scope .btn-primary { background: var(--navy) !important; color: white !important; border-color: var(--navy) !important; } .ul-scope .btn-primary:hover { background: var(--navy-light) !important; } /* ---------- Product cards ---------- */.ul-scope .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ul-scope .product-card { background: var(--card); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 20px; text-align: center; transition: all 0.2s; } .ul-scope .product-card:hover { border-color: var(--red); box-shadow: var(--shadow-lg); } .ul-scope .product-card .p-icon { font-size: 44px; margin-bottom: 10px; } .ul-scope .product-card .p-name { font-size: 15px; font-weight: 400; color: var(--text); margin-bottom: 4px; } .ul-scope .product-card .p-desc { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; } .ul-scope .product-card .p-price { font-size: 20px; font-weight: 400; color: var(--red); } .ul-scope .product-card .p-price span { font-size: 13px; font-weight: 500; color: var(--text-muted); } .ul-scope .qty-control { display: inline-flex; align-items: center; gap: 0; margin-top: 10px; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; } .ul-scope .qty-control button { width: 32px; height: 32px; border: none; background: var(--bg); cursor: pointer; font-size: 18px; font-weight: 400; color: var(--text); } .ul-scope .qty-control button:hover { background: #ddd; } .ul-scope .qty-control .qty { width: 36px; text-align: center; font-size: 16px; font-weight: 400; border: none; background: white; } /* ---------- Tabs ---------- */.ul-scope .tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg); padding: 4px; border-radius: 10px; } .ul-scope .tab { padding: 10px 18px; font-size: 15px; font-weight: 400; color: var(--text-light); cursor: pointer; border-radius: 8px; transition: all 0.2s; } .ul-scope .tab.active { background: var(--card); color: var(--text); box-shadow: var(--shadow); } .ul-scope .tab:hover:not(.active) { color: var(--text); } /* ---------- Notifications panel ---------- */.ul-scope .notif-item { display: flex; gap: 12px; padding: 14px; border-bottom: 1px solid var(--border); transition: background 0.2s; cursor: pointer; } .ul-scope .notif-item:hover { background: var(--bg); } .ul-scope .notif-item.unread { background: #F0F7FF; } .ul-scope .notif-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .ul-scope .notif-icon.bill { background: #DBEAFE; } .ul-scope .notif-icon.schedule { background: #DBEAFE; } .ul-scope .notif-icon.device { background: #FEE2E2; } .ul-scope .notif-icon.request { background: #D1FAE5; } .ul-scope .notif-text { flex: 1; } .ul-scope .notif-text .title { font-size: 15px; font-weight: 400; } .ul-scope .notif-text .desc { font-size: 14px; color: var(--text-muted); margin-top: 2px; } .ul-scope .notif-text .time { font-size: 13px; color: var(--text-muted); margin-top: 4px; } /* ---------- Doc list ---------- */.ul-scope .doc-card { display: flex; align-items: center; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 10px; transition: all 0.2s; } .ul-scope .doc-card:hover { border-color: var(--navy-light); box-shadow: var(--shadow); } .ul-scope .doc-card .doc-icon { font-size: 32px; } .ul-scope .doc-card .doc-info { flex: 1; } .ul-scope .doc-card .doc-title { font-size: 16px; font-weight: 400; } .ul-scope .doc-card .doc-desc { font-size: 14px; color: var(--text-muted); } .ul-scope .doc-card .doc-actions { display: flex; gap: 8px; } /* ---------- Footer ---------- */.ul-scope .footer { background: var(--navy); color: rgba(255,255,255,0.7); padding: 48px 24px 0; margin-top: 40px; font-size: 14px; } .ul-scope .footer a { color: rgba(255,255,255,0.75); text-decoration: none; transition: color 0.2s; } .ul-scope .footer a:hover { color: white; } .ul-scope .footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; max-width: var(--content-max); margin: 0 auto; padding-bottom: 32px; } .ul-scope .footer-logo-text { font-size: 22px; font-weight: 700; color: white; margin-bottom: 10px; letter-spacing: 1px; } .ul-scope .footer-tagline { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.6; margin-bottom: 16px; } .ul-scope .footer-phone { font-size: 20px; font-weight: 500; color: white; margin-bottom: 2px; } .ul-scope .footer-phone-desc { font-size: 12px; color: rgba(255,255,255,0.5); } .ul-scope .footer-bank { margin-top: 14px; font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.6; } .ul-scope .footer-bank-title { font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.75); margin-bottom: 2px; } .ul-scope .footer-col { display: flex; flex-direction: column; gap: 8px; } .ul-scope .footer-col-title { font-size: 13px; font-weight: 500; color: white; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 4px; } .ul-scope .footer-col a { font-size: 13px; } .ul-scope .footer-bottom { display: flex; align-items: center; justify-content: space-between; max-width: var(--content-max); margin: 0 auto; padding: 20px 0; border-top: 1px solid rgba(255,255,255,0.12); font-size: 12px; color: rgba(255,255,255,0.4); } .ul-scope .footer-links { display: flex; gap: 20px; } /* ---------- Header utilities (theme/lang/mode toggles) ---------- */.ul-scope .lang-toggle { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; font-weight: 400; letter-spacing: 0.5px; color: var(--text); transition: all 0.2s; user-select: none; } .ul-scope .lang-toggle:hover { background: var(--border); } .ul-scope .theme-toggle { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: all 0.2s; } .ul-scope .theme-toggle:hover { background: var(--border); } .ul-scope .mode-switch { display: flex; align-items: center; background: var(--bg); border: 1.5px solid var(--border); border-radius: 20px; padding: 2px; gap: 0; } .ul-scope .mode-btn { padding: 5px 12px; border-radius: 16px; font-size: 13px; font-weight: 400; cursor: pointer; transition: all 0.2s; border: none; background: transparent; color: var(--text-muted); font-family: inherit; } .ul-scope .mode-btn.active { background: var(--navy); color: white; } .ul-scope .mode-btn:hover:not(.active) { color: var(--text); } /* ---------- FAQ accordion ---------- */.ul-scope .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; } .ul-scope .faq-q { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; font-size: 16px; font-weight: 400; color: var(--text); transition: background 0.2s; } .ul-scope .faq-q:hover { background: var(--bg); } .ul-scope .faq-q .faq-arrow { font-size: 14px; color: var(--text-muted); transition: transform 0.3s; } .ul-scope .faq-item.open .faq-q .faq-arrow { transform: rotate(180deg); } .ul-scope .faq-item.open .faq-q { color: var(--red); background: var(--bg); } .ul-scope .faq-a { display: none; padding: 0 20px 16px; font-size: 15px; line-height: 1.7; color: var(--text-light); border-top: 1px solid var(--border); } .ul-scope .faq-item.open .faq-a { display: block; padding-top: 14px; } /* ---------- Bill guide ---------- */.ul-scope .bill-guide-section { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; } .ul-scope .bill-guide-section h3 { font-size: 17px; font-weight: 400; color: var(--navy); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .ul-scope .bill-guide-section p { font-size: 15px; line-height: 1.7; color: var(--text-light); margin-bottom: 8px; } .ul-scope .bill-field { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border); } .ul-scope .bill-field:last-child { border-bottom: none; } .ul-scope .bill-field .field-num { width: 28px; height: 28px; border-radius: 50%; background: var(--red); color: white; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 400; flex-shrink: 0; } .ul-scope .bill-field .field-info { flex: 1; } .ul-scope .bill-field .field-name { font-size: 15px; font-weight: 400; color: var(--text); } .ul-scope .bill-field .field-desc { font-size: 14px; color: var(--text-muted); margin-top: 2px; } /* ---------- Contact cards ---------- */.ul-scope .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; } .ul-scope .contact-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; text-align: center; transition: all 0.2s; } .ul-scope .contact-card:hover { border-color: var(--navy-light); box-shadow: var(--shadow-lg); } .ul-scope .contact-card .c-icon { font-size: 32px; margin-bottom: 10px; } .ul-scope .contact-card .c-title { font-size: 16px; font-weight: 400; color: var(--text); margin-bottom: 6px; } .ul-scope .contact-card .c-detail { font-size: 15px; color: var(--navy-light); font-weight: 400; } .ul-scope .contact-card .c-hours { font-size: 13px; color: var(--text-muted); margin-top: 4px; } /* ---------- Glossary ---------- */.ul-scope .glossary-item { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); } .ul-scope .glossary-item:last-child { border-bottom: none; } .ul-scope .glossary-term { min-width: 200px; font-size: 16px; font-weight: 400; color: var(--navy); } .ul-scope .glossary-def { font-size: 15px; color: var(--text-light); line-height: 1.6; } .ul-scope .glossary-search { display: flex; gap: 10px; margin-bottom: 20px; } .ul-scope .glossary-search input { flex: 1; } /* ---------- Guide steps ---------- */.ul-scope .guide-step { display: flex; gap: 20px; margin-bottom: 16px; } .ul-scope .guide-step-num { width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: white; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; flex-shrink: 0; } .ul-scope .guide-step-content { flex: 1; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; } .ul-scope .guide-step-content h3 { font-size: 17px; font-weight: 400; color: var(--text); margin-bottom: 8px; } .ul-scope .guide-step-content p { font-size: 15px; color: var(--text-light); line-height: 1.7; } .ul-scope .guide-step-content ul { margin: 8px 0 0 20px; font-size: 15px; color: var(--text-light); line-height: 1.8; } .ul-scope .guide-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .ul-scope .guide-nav a { padding: 8px 16px; background: var(--card); border: 1px solid var(--border); border-radius: 8px; font-size: 15px; font-weight: 400; color: var(--text); transition: all 0.2s; cursor: pointer; } .ul-scope .guide-nav a:hover { border-color: var(--navy); color: var(--navy); } /* ---------- Dropdown panel ---------- */.ul-scope .dropdown-panel { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--card); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); z-index: 60; padding: 8px; max-height: 300px; overflow-y: auto; } .ul-scope .dropdown-panel.show { display: block; } .ul-scope .dropdown-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; cursor: pointer; transition: background 0.15s; } .ul-scope .dropdown-item:hover { background: var(--bg); } .ul-scope .dropdown-item.active { background: #EFF6FF; border: 1px solid var(--navy-light); } .ul-scope .dropdown-item .addr { font-size: 15px; font-weight: 400; } .ul-scope .dropdown-item .itn { font-size: 13px; color: var(--text-muted); } /* ---------- UlModal (HTML5 ) ---------- */.ul-scope .ul-modal { border: none; padding: 0; border-radius: var(--radius); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); background: var(--card); color: var(--text); max-width: min(640px, calc(100vw - 32px)); width: 100%; font-family: var(--font-sans); /* Restore native :modal centering — Bootstrap reboot overrides it with position:relative + margin:.5rem + transform. */ position: fixed; inset: 0; margin: auto; } .ul-scope .ul-modal::backdrop { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); } .ul-scope .ul-modal.ul-modal-sm { max-width: min(420px, calc(100vw - 32px)); } .ul-scope .ul-modal.ul-modal-lg { max-width: min(840px, calc(100vw - 32px)); } .ul-scope .ul-modal.ul-modal-xl { max-width: min(1080px, calc(100vw - 32px)); } .ul-scope .ul-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--border); } .ul-scope .ul-modal-title { font-weight: 600; color: var(--text); font-size: 16px; } .ul-scope .ul-modal-close { background: none; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; } .ul-scope .ul-modal-close:hover { color: var(--text); } .ul-scope .ul-modal-body { padding: 20px; max-height: calc(100vh - 200px); overflow-y: auto; } .ul-scope .ul-modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg); border-radius: 0 0 var(--radius) var(--radius); } /* ---------- Choices.js theming (UlComboBox) ---------- */.ul-scope .choices__inner { background: var(--card) !important; border: 1.5px solid var(--border) !important; border-radius: 8px !important; min-height: 38px !important; padding: 4px 10px !important; font-family: var(--font-sans) !important; font-size: 15px !important; color: var(--text) !important; } .ul-scope .choices.is-focused .choices__inner { border-color: var(--navy) !important; box-shadow: 0 0 0 3px rgba(10, 42, 87, 0.08) !important; } .ul-scope .choices__list--dropdown, .ul-scope .choices__list[aria-expanded] { border-color: var(--border) !important; box-shadow: var(--shadow-lg) !important; border-radius: 8px !important; background: var(--card) !important; color: var(--text) !important; } .ul-scope .choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--bg) !important; color: var(--navy) !important; } .ul-scope .choices__placeholder { color: var(--text-muted) !important; opacity: 1 !important; } /* ---------- flatpickr theming (UlDatePicker) ---------- */.ul-scope .flatpickr-calendar { font-family: var(--font-sans) !important; box-shadow: var(--shadow-lg) !important; border-radius: var(--radius) !important; } .ul-scope .flatpickr-day.selected, .ul-scope .flatpickr-day.selected:hover { background: var(--navy) !important; border-color: var(--navy) !important; } .ul-scope .flatpickr-day.today { border-color: var(--red) !important; } .ul-scope .flatpickr-months .flatpickr-month, .ul-scope .flatpickr-current-month, .ul-scope .flatpickr-weekdays { color: var(--text) !important; } .ul-scope .flatpickr-monthDropdown-months, .ul-scope .numInput.cur-year { color: var(--text) !important; font-family: var(--font-sans) !important; } /* ---------- Aurora background (used by dark/dramatic themes) ---------- */.ul-scope .aurora-container { display: none; } .ul-scope .aurora-blob { position: absolute; border-radius: 50%; filter: blur(120px); } .ul-scope .aurora-blob-1 { width: 600px; height: 600px; top: -15%; left: -10%; } .ul-scope .aurora-blob-2 { width: 500px; height: 500px; top: 25%; right: -12%; } .ul-scope .aurora-blob-3 { width: 650px; height: 500px; bottom: -10%; left: 20%; } @keyframes auroraMove1 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(100px, 80px) scale(1.2); } 100% { transform: translate(40px, -40px) scale(0.9); } } @keyframes auroraMove2 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-80px, -60px) scale(1.15); } 100% { transform: translate(-30px, 50px) scale(1.05); } } @keyframes auroraMove3 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(70px, -50px) scale(1.15); } 100% { transform: translate(-40px, 30px) scale(0.95); } } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .ul-scope .dash-grid { grid-template-columns: 1fr 1fr; } .ul-scope .product-grid { grid-template-columns: 1fr 1fr; } .ul-scope .partida-selector { max-width: 280px; }} @media (max-width: 768px) { .ul-scope .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; } .ul-scope .contact-grid { grid-template-columns: 1fr 1fr; }} @media (max-width: 600px) { .ul-scope .dash-grid { grid-template-columns: 1fr; } .ul-scope .product-grid { grid-template-columns: 1fr; } .ul-scope .main-nav { overflow-x: auto; } .ul-scope .header { padding: 0 12px; gap: 10px; } .ul-scope .content { padding: 16px; } .ul-scope .contact-grid { grid-template-columns: 1fr; }} @media (max-width: 480px) { .ul-scope .footer-top { grid-template-columns: 1fr; }} /* ========================================================= THEME OVERRIDES — corporate (dalsia.com style) ========================================================= */.ul-scope[data-theme="corporate"] .aurora-container { display: none; } .ul-scope[data-theme="corporate"] body { background: var(--bg); } /* Header */.ul-scope[data-theme="corporate"] .header { background: #FFFFFF; border-bottom: none; box-shadow: none; padding-left: calc((100% - 1280px) / 2 + 24px); padding-right: calc((100% - 1280px) / 2 + 24px); height: 76px; } .ul-scope[data-theme="corporate"] .header .partida-btn { background: var(--bg); border-color: var(--border); padding: 6px 14px; } .ul-scope[data-theme="corporate"] .partida-btn .itn { display: none; } .ul-scope[data-theme="corporate"] .partida-btn .address { font-weight: 600; } .ul-scope[data-theme="corporate"] .header .theme-toggle, .ul-scope[data-theme="corporate"] .header .lang-toggle { background: var(--bg); border-color: var(--border); color: var(--navy); } .ul-scope[data-theme="corporate"] .header .theme-toggle:hover, .ul-scope[data-theme="corporate"] .header .lang-toggle:hover { background: var(--navy); color: white; } .ul-scope[data-theme="corporate"] .header .notif-btn { color: var(--navy); background: var(--bg); border-color: var(--border); } .ul-scope[data-theme="corporate"] .header .notif-btn:hover { background: var(--navy); color: white; } .ul-scope[data-theme="corporate"] .header .mode-switch { background: var(--bg); border-color: var(--border); } .ul-scope[data-theme="corporate"] .header .mode-btn { color: var(--text-muted); } .ul-scope[data-theme="corporate"] .header .mode-btn.active { background: var(--navy); color: white; } .ul-scope[data-theme="corporate"] .user-name { font-weight: 600; } /* Nav */.ul-scope[data-theme="corporate"] .main-nav { background: #FFFFFF; border-bottom: none; border-top: none; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding-left: calc((100% - 1280px) / 2 + 24px); padding-right: calc((100% - 1280px) / 2 + 24px); padding-top: 0; padding-bottom: 0; gap: 4px; } .ul-scope[data-theme="corporate"] .nav-link { color: #374151; font-size: 16px; font-weight: 500; padding: 16px 20px; border-bottom: 3px solid transparent; } .ul-scope[data-theme="corporate"] .nav-link:hover { color: var(--red); background: transparent; } .ul-scope[data-theme="corporate"] .nav-link.active { color: var(--red); border-bottom-color: var(--red); } .ul-scope[data-theme="corporate"] .sub-menu { background: #FFFFFF; border: 1px solid var(--border); box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-radius: 8px; } .ul-scope[data-theme="corporate"] .sub-menu a { color: #374151; font-size: 15px; font-weight: 400; padding: 10px 16px; } .ul-scope[data-theme="corporate"] .sub-menu a:hover { background: var(--bg); color: var(--red); } /* Cards */.ul-scope[data-theme="corporate"] .widget { border: 1.5px solid var(--border); box-shadow: var(--shadow); border-radius: var(--radius); background: #FFFFFF; } .ul-scope[data-theme="corporate"] .widget:hover { box-shadow: var(--shadow-lg); transform: none; border-color: #B0BACA; } /* Buttons — pill */.ul-scope[data-theme="corporate"] .btn, .ul-scope[data-theme="corporate"] .btn-sm, .ul-scope[data-theme="corporate"] .btn-red, .ul-scope[data-theme="corporate"] .btn-navy, .ul-scope[data-theme="corporate"] .btn-outline, .ul-scope[data-theme="corporate"] .w-action a { border-radius: 50px; background: #FFFFFF; color: #374151; border: 1.5px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .ul-scope[data-theme="corporate"] .btn:hover, .ul-scope[data-theme="corporate"] .btn-sm:hover, .ul-scope[data-theme="corporate"] .btn-red:hover, .ul-scope[data-theme="corporate"] .btn-navy:hover, .ul-scope[data-theme="corporate"] .btn-outline:hover, .ul-scope[data-theme="corporate"] .w-action a:hover { background: #FFFFFF; border-color: #C0C7D1; color: #1A1A2E; box-shadow: 0 2px 8px rgba(0,0,0,0.08); transform: none; } /* Red CTA arrow circle — affordance за "води някъде", затова само за навигационни бутони: (UlButton с Href) или изрично маркиран .btn-arrow.