/* ========================================================================= OmniCredo — дизайн токени Извлечени от omnicredo_frontend_v28.5.html. Единственият източник на цветове, шрифтове и движение за сайта, клиентския кабинет и приложението. Правило: в кода не се пишат hex стойности и не се пишат времена на анимации. Всичко минава оттук, за да не се разминат трите фронтенда. ========================================================================= */ :root{ /* --- ОСНОВНИ (както са в прототипа) ------------------------------------ */ --accent: #1A3A7A; /* тъмносиньо — бутони, връзки, акценти */ --text: #1A2B5E; /* основен текст */ --bg: #F0F2F7; /* фон на секции и ленти */ --selected: #D4DFF5; /* избрано състояние */ --completed: #2E9E6B; /* успех, завършено */ --error: #C0392B; /* грешка */ --border: rgba(26,43,94,.15); --subtext: rgba(26,43,94,.45); /* --- ПРОИЗВОДНИ ОТ ОСНОВНИТЕ ------------------------------------------- */ --accent-dark: #132D60; /* hover / натиснато */ --accent-ink: #0D2639; /* тъмни блокове, футър */ --surface: #FFFFFF; --surface-alt: #F4F6FB; /* редуващи се редове, леки карти */ --surface-tint: #EAF0FA; /* акцентна светла подложка */ --page: #E9ECF3; /* фон на цялата страница */ --warning: #D97706; --warning-dark: #B45309; /* --- ОЩЕ ЦВЕТОВЕ ОТ ПРОТОТИПА (v28.5, извлечени при преноса на CSS) ---- */ --white: #FFFFFF; /* текст върху акцент, бели повърхности */ --ink-dark: #1C2030; /* най-тъмен текст, тъмни ленти */ --text-muted: #4A5578; --text-soft: #6B7693; --muted: #9AA6C4; /* неактивни икони, placeholder */ --surface-2: #F4F7FC; --surface-3: #EEF1F7; --surface-4: #FAFBFE; --surface-5: #F6F8FC; --surface-6: #EEF2FA; --surface-7: #E9EDF4; --surface-8: #E4E9F2; --border-2: #E4E8F1; --border-3: #D8E0EC; --selected-2: #DCE5F7; --warning-deep: #C4520A; --warning-text: #92400E; --warning-ink: #8A3800; --orange: #E05A2B; --error-dark: #991B1B; --error-deep: #D62612; --completed-dark:#0F6E56; --completed-deep:#1D7A52; --completed-ink: #1A6B47; --completed-soft:#7FD0A8; --completed-alt: #00966E; --accent-soft: #6B9FE4; --accent-mid: #5166A4; --accent-deep: #15306A; /* прозрачности върху акцента */ --accent-04: rgba(26,58,122,.04); --accent-05: rgba(26,58,122,.05); --accent-06: rgba(26,58,122,.06); --accent-07: rgba(26,58,122,.07); --accent-08: rgba(26,58,122,.08); --accent-09: rgba(26,58,122,.09); --accent-10: rgba(26,58,122,.10); --accent-20: rgba(26,58,122,.20); --accent-25: rgba(26,58,122,.25); --accent-30: rgba(26,58,122,.30); --accent-35: rgba(26,58,122,.35); --completed-08: rgba(46,158,107,.08); --completed-12: rgba(46,158,107,.12); /* RGB тройки за прозрачности с произволна алфа: rgba(var(--ink-rgb), .22) */ --ink-rgb: 26,43,94; --accent-rgb: 26,58,122; --completed-rgb: 46,158,107; --error-rgb: 192,57,43; --warning-rgb: 217,119,6; --warning-deep-rgb: 196,82,10; --accent-soft-rgb: 107,159,228; --text-muted-rgb: 74,85,120; --slate-rgb: 15,23,42; --white-rgb: 255,255,255; --black-rgb: 0,0,0; /* прозрачности върху текстовия цвят — за разредени нива */ --ink-06: rgba(26,43,94,.06); --ink-08: rgba(26,43,94,.08); --ink-10: rgba(26,43,94,.10); --ink-12: rgba(26,43,94,.12); --ink-15: rgba(26,43,94,.15); --ink-30: rgba(26,43,94,.30); --ink-40: rgba(26,43,94,.40); --ink-50: rgba(26,43,94,.50); --ink-60: rgba(26,43,94,.60); --ink-05: rgba(26,43,94,.05); --ink-18: rgba(26,43,94,.18); --ink-20: rgba(26,43,94,.20); --ink-25: rgba(26,43,94,.25); --ink-35: rgba(26,43,94,.35); --ink-42: rgba(26,43,94,.42); --ink-45: rgba(26,43,94,.45); --ink-55: rgba(26,43,94,.55); /* --- ДОБАВЕНО ЗА ПАНЕЛА НА ОПЕРАТОРИТЕ (omnicredo_backoffice_v3) -------- */ --rail: #16306B; /* фон на лявото меню */ --rail-accent: #7FA8E8; /* активен елемент и бадж в менюто */ --assess: #7C5CBF; /* оценка от консултанта */ --assess-rgb: 124,92,191; /* --- ШРИФТ ------------------------------------------------------------- */ /* Прототипът НЕ зарежда външни шрифтове — само системния стек. Запазено както е: нула килобайта, нула искане към чужд сървър, нула изместване на текста при зареждане. */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Типографска стълба за САЙТ (прототипът е с телефонни размери 10–15px; тук същият характер е мащабиран за екран, а не за приложение) */ --t-hero: clamp(34px, 5.2vw, 60px); --t-h1: clamp(28px, 3.6vw, 42px); --t-h2: clamp(22px, 2.6vw, 30px); --t-h3: 20px; --t-lead: clamp(17px, 1.5vw, 20px); --t-body: 16px; --t-small: 14px; --t-micro: 12.5px; --w-normal: 400; --w-medium: 600; --w-bold: 700; /* прототипът ползва 700 за всичко подчертано */ --lh-tight: 1.15; --lh-head: 1.25; --lh-body: 1.6; /* --- ФОРМА ------------------------------------------------------------- */ --r-sm: 8px; --r-md: 11px; --r-lg: 14px; --r-xl: 16px; /* бутони */ --r-pill: 999px; --sh-card: 0 1px 5px rgba(26,43,94,.06); --sh-raised: 0 3px 12px rgba(26,43,94,.05); --sh-lift: 0 6px 20px rgba(26,43,94,.08); --sh-button: 0 2px 8px rgba(26,58,122,.25); --sh-modal: 0 24px 70px rgba(0,0,0,.18); /* --- ДВИЖЕНИЕ ----------------------------------------------------------- */ /* Двете криви са дословно от прототипа и са неговият почерк: --ease е леко превишаване, --spring е подчертано пружиниране. */ --ease: cubic-bezier(.34, 1.1, .64, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); --d-fast: .15s; /* състояния: hover, цвят, рамка */ --d-base: .2s; --d-slow: .3s; /* поява на елемент */ --d-panel: .4s; /* разгъване, панели */ --d-press: .1s; /* натискане */ --d-mid: .25s; --d-long: .5s; --d-shake: .35s; --d-xlong: .8s; --width: 1080px; /* най-широкият контейнер в прототипа */ --gutter: 20px; } /* ========================================================================= ДВИЖЕНИЕТО НА ПРОТОТИПА Пет жеста, които се повтарят навсякъде. Сайтът ползва същите, за да е разпознаваемо едно и също приложение. ========================================================================= */ /* 1. Поява: избледняване с 6px нагоре. Основният вход на всичко. */ @keyframes oc-in{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:translateY(0) } } .oc-in{ animation:oc-in var(--d-slow) var(--ease) both } /* 2. Изскачане: за модали, карти и всичко, което идва „отгоре" на екрана */ @keyframes oc-pop{ from{ opacity:0; transform:scale(.9) } to{ opacity:1; transform:scale(1) } } .oc-pop{ animation:oc-pop var(--d-slow) var(--spring) both } /* 3. Подскок: когато стойност се променя пред очите на потребителя */ @keyframes oc-bump{ 0%{transform:scale(1)} 50%{transform:scale(1.12)} 100%{transform:scale(1)} } .oc-bump{ animation:oc-bump var(--d-slow) var(--spring) } /* 4. Треперене: отказ, невалидно поле */ @keyframes oc-shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} } .oc-shake{ animation:oc-shake .35s ease } /* 5. Пулс: чака се нещо */ @keyframes oc-pulse{ 0%,100%{opacity:1} 50%{opacity:.75} } .oc-pulse{ animation:oc-pulse 1.6s ease infinite } /* Въртене за индикатор за зареждане */ @keyframes oc-spin{ to{ transform:rotate(360deg) } } .oc-spin{ animation:oc-spin 1s linear infinite } /* Натискане — в прототипа е на всеки бутон и е част от усещането */ .oc-press{ transition:transform .1s var(--spring) } .oc-press:active{ transform:scale(.98) } /* Появяване при скрол — състояние по подразбиране, JS маха .is-off */ .oc-reveal{ opacity:0; transform:translateY(14px); transition:opacity var(--d-panel) ease, transform var(--d-panel) var(--ease) } .oc-reveal.is-on{ opacity:1; transform:translateY(0) } /* Уважава системната настройка. Задължително — иначе анимациите са проблем за хора с вестибуларни нарушения, а и е изискване по достъпност. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .oc-reveal{ opacity:1; transform:none } } /* ========================================================================= БАЗА ========================================================================= */ *,*::before,*::after{ box-sizing:border-box } html{ color-scheme:light } body{ margin:0; font-family:var(--font); font-size:var(--t-body); line-height:var(--lh-body); color:var(--text); background:var(--page); -webkit-font-smoothing:antialiased; } h1,h2,h3{ line-height:var(--lh-head); font-weight:var(--w-bold); margin:0 0 .5em } h1{ font-size:var(--t-h1) } h2{ font-size:var(--t-h2) } h3{ font-size:var(--t-h3) } p{ margin:0 0 1em } a{ color:var(--accent); text-decoration:none } a:hover{ text-decoration:underline } :focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px } .oc-wrap{ width:100%; max-width:var(--width); margin:0 auto; padding:0 var(--gutter) } /* Бутон — точните стойности на прототипа */ .oc-btn{ display:inline-block; border:none; cursor:pointer; background:var(--accent); color:#fff; font-family:inherit; font-size:15px; font-weight:var(--w-bold); padding:15px 28px; border-radius:var(--r-xl); box-shadow:var(--sh-button); transition:background-color var(--d-fast), transform .1s var(--spring); } .oc-btn:hover{ background:var(--accent-dark); text-decoration:none } .oc-btn:active{ transform:scale(.98) } .oc-btn--ghost{ background:transparent; color:var(--accent); border:1.5px solid var(--ink-15); box-shadow:none; } .oc-btn--ghost:hover{ background:var(--surface-tint); border-color:var(--accent) } .oc-card{ background:var(--surface); border:1px solid var(--ink-12); border-radius:var(--r-lg); box-shadow:var(--sh-card); }