Телефонът трябва да е с код +359.
*/ .bg-input--invalid, .bg-input[aria-invalid="true"], .bg-select[aria-invalid="true"], .bg-textarea[aria-invalid="true"] { border-color: var(--danger-on-navy); box-shadow: inset 0 0 0 1px var(--danger-on-navy); } .bg-input--invalid:focus, .bg-input[aria-invalid="true"]:focus { border-color: var(--danger-on-navy); } .on-cream .bg-input--invalid, .on-cream .bg-input[aria-invalid="true"], .on-cream .bg-select[aria-invalid="true"], .on-cream .bg-textarea[aria-invalid="true"] { border-color: var(--danger-ink); box-shadow: inset 0 0 0 1px var(--danger-ink); } .bg-field-error { display: flex; align-items: center; gap: 6px; font-family: var(--font-caption); font-size: var(--fs-13); color: var(--danger-on-navy); /* 4.56:1 на navy */ } .bg-field-error::before { content: "!"; font-weight: 700; } .on-cream .bg-field-error { color: var(--danger-ink); } /* 4.51:1 на cream */ .bg-field-hint { font-family: var(--font-caption); font-size: var(--fs-13); color: var(--fg-2); } .on-cream .bg-field-hint { color: var(--ink-2); } /* Search field — pill with leading icon */ .bg-search { display: flex; align-items: center; gap: var(--space-3); padding: 10px 18px; border: 1px solid var(--navy-line-strong); border-radius: var(--radius-pill); background: rgba(255,255,255,0.04); transition: border-color var(--dur-fast); } .bg-search:focus-within { border-color: var(--gold); } .bg-search input { all: unset; flex: 1; font-family: var(--font-body); font-size: var(--fs-16); color: inherit; } .bg-search input::placeholder { color: var(--fg-3); } .on-cream .bg-search { background: var(--white); border-color: var(--cream-line-strong); color: var(--ink); } .on-cream .bg-search:focus-within { border-color: var(--gold-ink); } .on-cream .bg-search input::placeholder { color: var(--ink-3); } /* ============ DIVIDER + ORNAMENTS ============ */ .bg-rule { height: 1px; background: linear-gradient(to right, transparent, var(--gold) 50%, transparent); border: 0; margin: var(--space-8) 0; } .bg-rule--solid { background: var(--navy-line); } .on-cream .bg-rule--solid { background: var(--cream-line); } /* Декорация (WCAG я освобождава от праг), но --gold на крем е 1.78:1 и линията практически изчезваше. --gold-deep е 2.61:1 — вижда се, без да натежава. */ .on-cream .bg-rule { background: linear-gradient(to right, transparent, var(--gold-deep) 50%, transparent); } /* Tagline ornament — used as decorative section dividers */ .bg-ornament { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-tagline); text-transform: uppercase; letter-spacing: var(--ls-tag); color: var(--gold); font-size: var(--fs-12); } .bg-ornament::before, .bg-ornament::after { content: ""; height: 1px; width: 48px; background: currentColor; opacity: 0.55; } /* Орнаментът носи ТЕКСТ, не е чиста декорация — иска 4.5:1 и на светло. */ .on-cream .bg-ornament { color: var(--gold-ink); } /* ============ LINK TREATMENTS ============ */ .bg-link { color: var(--gold); text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--dur-base) var(--ease-out), color var(--dur-fast); } .bg-link:hover { background-size: 100% 1px; color: var(--gold-light); } /* Линк в златно върху крем беше 1.78:1 — най-често срещаният счупен текст в системата (телефон, имейл, „виж имота"). --gold-ink е 4.51:1. На hover ПОДЧЕРТАВАНЕТО е носителят на състоянието, не цветът — затова тук се потъмнява, а не изсветлява: --gold-light на cream е 1.62:1. */ .on-cream .bg-link { color: var(--gold-ink); } .on-cream .bg-link:hover { color: var(--ink); } /* ============ NAV ============ */ .bg-navlink { font-family: var(--font-caption); font-size: var(--fs-13); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-2); text-decoration: none; padding: 8px 0; position: relative; transition: color var(--dur-fast); } .bg-navlink:hover, .bg-navlink--active { color: var(--gold); } .bg-navlink--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold); } /* --fg-2 е 78% бяло — навигацията беше невидима върху крем. */ .on-cream .bg-navlink { color: var(--ink-2); } .on-cream .bg-navlink:hover, .on-cream .bg-navlink--active { color: var(--gold-ink); } .on-cream .bg-navlink--active::after { background: var(--gold-ink); } /* ============ HOVER MEDIA ============ */ .bg-media-zoom { overflow: hidden; } .bg-media-zoom > img { transition: transform var(--dur-slow) var(--ease-out); } .bg-media-zoom:hover > img { transform: scale(1.06); } /* ============ BRAND PATTERNS ============ */ /* Usage: add class to any surface element. Combine with brand bg colors. */ .bg-pattern-diamond { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0L24 12L12 24L0 12Z' fill='none' stroke='%23cbb26a' stroke-width='0.7' opacity='0.35'/%3E%3C/svg%3E"); } .bg-pattern-dots { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23cbb26a' opacity='0.28'/%3E%3C/svg%3E"); } .bg-pattern-arch { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40C10 18 30 18 40 40' fill='none' stroke='%23cbb26a' stroke-width='0.8' opacity='0.32'/%3E%3C/svg%3E"); } .bg-pattern-diagonal { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cline x1='0' y1='10' x2='10' y2='0' stroke='%23cbb26a' stroke-width='0.55' opacity='0.22'/%3E%3C/svg%3E"); } .bg-pattern-ogee { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 0C7 14 21 14 28 0' fill='none' stroke='%23cbb26a' stroke-width='0.7' opacity='0.32'/%3E%3Cpath d='M0 28C7 14 21 14 28 28' fill='none' stroke='%23cbb26a' stroke-width='0.7' opacity='0.32'/%3E%3C/svg%3E"); } /* On cream: darker gold for visibility */ .on-cream .bg-pattern-diamond { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0L24 12L12 24L0 12Z' fill='none' stroke='%23a8924f' stroke-width='0.7' opacity='0.3'/%3E%3C/svg%3E"); } .on-cream .bg-pattern-dots { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23a8924f' opacity='0.3'/%3E%3C/svg%3E"); } .on-cream .bg-pattern-arch { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 40C10 18 30 18 40 40' fill='none' stroke='%23a8924f' stroke-width='0.8' opacity='0.28'/%3E%3C/svg%3E"); } .on-cream .bg-pattern-diagonal { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cline x1='0' y1='10' x2='10' y2='0' stroke='%23a8924f' stroke-width='0.55' opacity='0.22'/%3E%3C/svg%3E"); } .on-cream .bg-pattern-ogee { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M0 0C7 14 21 14 28 0' fill='none' stroke='%23a8924f' stroke-width='0.7' opacity='0.28'/%3E%3Cpath d='M0 28C7 14 21 14 28 28' fill='none' stroke='%23a8924f' stroke-width='0.7' opacity='0.28'/%3E%3C/svg%3E"); } /* ============ BRAND TEXTURES ============ */ /* Grain/noise overlays — apply on top of brand surface colors */ .bg-texture-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"); } .bg-texture-linen { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4'%3E%3Cline x1='0' y1='0' x2='4' y2='4' stroke='%23c8b88a' stroke-width='0.3' opacity='0.15'/%3E%3C/svg%3E"); } .bg-texture-stone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.5' numOctaves='5' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E"); } /* ============ BRAND FRAMES ============ */ /* Corner marks — add to a position:relative container */ /* 2-corner minimal (top-left + bottom-right) */ .bg-frame-2corner::before, .bg-frame-2corner::after { content: ""; position: absolute; width: 10px; height: 10px; border-color: var(--gold); border-style: solid; opacity: 0.7; } .bg-frame-2corner::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; } .bg-frame-2corner::after { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; } /* 4-corner full — requires nested .bg-frame-4corner-inner element */ .bg-frame-4corner { position: relative; } .bg-frame-4corner::before, .bg-frame-4corner::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--gold); border-style: solid; opacity: 0.8; pointer-events: none; z-index: 1; } .bg-frame-4corner::before { top: 10px; left: 10px; border-width: 1.5px 0 0 1.5px; } .bg-frame-4corner::after { top: 10px; right: 10px; border-width: 1.5px 1.5px 0 0; } .bg-frame-4corner-bl::before, .bg-frame-4corner-bl::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--gold); border-style: solid; opacity: 0.8; pointer-events: none; z-index: 1; } .bg-frame-4corner-bl::before { bottom: 10px; left: 10px; border-width: 0 0 1.5px 1.5px; } .bg-frame-4corner-bl::after { bottom: 10px; right: 10px; border-width: 0 1.5px 1.5px 0; } /* Рамките са чиста декорация, но --gold на крем е 1.78:1 и ъглите изчезваха. --gold-deep (2.61:1) ги връща, без да променя тъмния облик. */ .on-cream .bg-frame-2corner::before, .on-cream .bg-frame-2corner::after, .on-cream .bg-frame-4corner::before, .on-cream .bg-frame-4corner::after, .on-cream .bg-frame-4corner-bl::before, .on-cream .bg-frame-4corner-bl::after { border-color: var(--gold-deep); } /* Full inset border */ .bg-frame-inset { box-shadow: inset 0 0 0 10px transparent, inset 0 0 0 11px rgba(203,178,106,0.35); } /* ============ СЪОБЩЕНИЯ / ALERTS ============ Дотук --success / --warning / --danger / --info бяха дефинирани в colors_and_type.css, но `grep var(--success) components.css` даваше 0 попадения — четири сирачета. Това е първият им реален компонент. ⚠️ WCAG 1.4.1: ролята не се носи от цвета. Ползвай role="status" (success/ info), role="alert" (danger) и заглавен ред с ДУМА в .bg-alert-title. */ .bg-alert { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); border-left: 3px solid currentColor; font-family: var(--font-body); font-size: var(--fs-14); line-height: var(--lh-normal); } .bg-alert-title { font-family: var(--font-caption); font-size: var(--fs-12); font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; } .bg-alert-body { color: var(--fg); } /* бяло върху тъмната подложка */ .on-cream .bg-alert-body { color: var(--ink); } .bg-alert--success { background: var(--success-wash-navy); color: var(--success-on-navy); } /* 4.63:1 */ .bg-alert--warning { background: var(--warning-wash-navy); color: var(--warning); } /* 5.43:1 */ .bg-alert--danger { background: var(--danger-wash-navy); color: var(--danger-on-navy); } /* 4.79:1 */ .bg-alert--info { background: var(--info-wash-navy); color: var(--info-on-navy); } /* 4.65:1 */ .on-cream .bg-alert--success { background: var(--success-wash); color: var(--success-ink); } /* 4.63:1 */ .on-cream .bg-alert--warning { background: var(--warning-wash); color: var(--warning-ink); } /* 4.76:1 */ .on-cream .bg-alert--danger { background: var(--danger-wash); color: var(--danger-ink); } /* 4.52:1 — най-тясната двойка в системата */ .on-cream .bg-alert--info { background: var(--info-wash); color: var(--info-ink); } /* 4.56:1 */ /* ============ ТАБЛИЦА ============ Дотук в системата нямаше таблица изобщо и всяка следваща се измисляше ad hoc. Зебра, sticky header, hover ред, разделители над 3:1. */ .bg-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: var(--fs-14); color: var(--fg); } .bg-table caption { text-align: left; padding-bottom: var(--space-3); font-family: var(--font-caption); font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--fg-2); } .bg-table thead th { position: sticky; top: 0; z-index: 2; background: var(--navy-deep); color: var(--gold); /* 8.11:1 върху navy-deep */ font-family: var(--font-caption); font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--navy-line-strong); } .bg-table tbody td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--navy-line-strong); vertical-align: middle; } .bg-table tbody tr:nth-child(even) { background: rgba(255,255,255,0.04); } .bg-table tbody tr:hover { background: var(--navy-soft); } .bg-table tfoot td { padding: var(--space-3) var(--space-4); font-weight: 600; border-top: 2px solid var(--navy-line-strong); } /* Цифри — винаги IBM Plex Serif, дясно подравнени, с таблични фигури. Правилото „числа никога с Italiana" от COOKBOOK важи и тук. */ .bg-table .num, .bg-table td[data-num] { text-align: right; font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; } .on-cream .bg-table { color: var(--ink); } .on-cream .bg-table caption { color: var(--ink-2); } .on-cream .bg-table thead th { background: var(--cream); color: var(--gold-ink); /* 4.51:1 върху cream */ border-bottom-color: var(--cream-line-strong); } .on-cream .bg-table tbody td, .on-cream .bg-table tfoot td { border-color: var(--cream-line-strong); } .on-cream .bg-table tbody tr:nth-child(even) { background: var(--white); } .on-cream .bg-table tbody tr:hover { background: var(--gold-tint-light); } /* ============ UTILITY ============ */ .bg-skeleton { background: linear-gradient(90deg, var(--navy-soft) 0%, var(--navy-line) 50%, var(--navy-soft) 100%); background-size: 200% 100%; animation: bg-shimmer 1.4s linear infinite; border-radius: var(--radius-sm); } /* Тъмният skeleton върху крем беше навy петно на светла страница. */ .on-cream .bg-skeleton { background: linear-gradient(90deg, var(--cream-line) 0%, var(--cream-soft) 50%, var(--cream-line) 100%); background-size: 200% 100%; } @keyframes bg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .bg-skeleton { animation: none; } }