/** * VeltoStudio × BuzzBuild theme bridge * Maps VT design tokens to BuzzBuild CI (cyan / navy). * Use: */ [data-ci="buzzbuild"] { --vt-font: var(--font-family); } [data-ci="buzzbuild"][data-theme="dark"], [data-ci="buzzbuild"]:not([data-theme]) { --vt-bg: var(--color-navy-deep); --vt-bg-card: rgba(5, 48, 114, 0.55); --vt-bg-elevated: var(--color-navy-mid); --vt-bg-input: rgba(7, 23, 39, 0.72); --vt-text: var(--color-ice); --vt-text-secondary: var(--text-muted); --vt-text-muted: var(--text-muted); --vt-text-placeholder: rgba(218, 234, 255, 0.35); --vt-text-heading: var(--white); --vt-border: var(--border); --vt-border-subtle: var(--border); --vt-border-focus: var(--border-hover); --vt-primary: var(--color-primary); --vt-primary-hover: var(--accent-secondary); --vt-primary-alpha-04: rgba(19, 208, 255, 0.04); --vt-primary-alpha-06: rgba(19, 208, 255, 0.06); --vt-primary-alpha-08: var(--accent-dim); --vt-primary-alpha-10: var(--accent-dim); --vt-primary-alpha-12: rgba(19, 208, 255, 0.14); --vt-primary-alpha-15: rgba(19, 208, 255, 0.16); --vt-primary-alpha-20: rgba(19, 208, 255, 0.2); --vt-primary-alpha-25: rgba(19, 208, 255, 0.25); --vt-primary-alpha-30: rgba(19, 208, 255, 0.3); --vt-accent: var(--color-secondary); --vt-accent-hover: var(--color-primary); --vt-accent-alpha-10: rgba(73, 167, 237, 0.12); --vt-accent-alpha-15: rgba(73, 167, 237, 0.15); --vt-accent-alpha-20: rgba(73, 167, 237, 0.2); --vt-gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); --vt-disabled-bg: rgba(75, 85, 99, 0.3); --vt-disabled-text: rgba(218, 234, 255, 0.35); --vt-toggle-bg: rgba(75, 85, 99, 0.4); --vt-overlay: rgba(7, 23, 39, 0.72); --vt-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3); --vt-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45); --vt-shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5); --vt-shadow-focus: 0 0 0 3px var(--accent-dim); --vt-shadow-primary: 0 4px 20px rgba(19, 208, 255, 0.35); --vt-bg-section: linear-gradient(145deg, rgba(5, 48, 114, 0.45), rgba(7, 23, 39, 0.95)); --vt-bg-hover: rgba(19, 208, 255, 0.08); --vt-navbar-bg: rgba(7, 23, 39, 0.9); --vt-footer-bg: var(--color-navy-deep); --vt-success: #2dd4bf; --vt-error: var(--danger); --vt-warning: #fbbf24; --vt-info: var(--color-secondary); } /* * VT select bridge — EJS/JS use .vt-select-options + [data-vt-select].vt-open * but compiled vt.css only defines .vt-select-dropdown + .vt-select-trigger.vt-select-open */ [data-vt-select] { position: relative; display: block; width: 100%; } [data-vt-select] .vt-select-options { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 0; background: var(--vt-bg-card); border: 1px solid var(--vt-border-subtle); border-radius: 10px; box-shadow: var(--vt-shadow-md); z-index: 80; overflow: hidden; max-height: 200px; overflow-y: auto; } [data-vt-select].vt-open .vt-select-options { display: block; } [data-vt-select].vt-open .vt-select-trigger, .vt-select-trigger.vt-select-open { border-color: var(--vt-primary); box-shadow: var(--vt-shadow-focus); } [data-vt-select].vt-open .vt-select-chevron, .vt-select-open .vt-select-chevron { transform: rotate(180deg); } .vt-select-option.vt-active, .vt-select-option--active { background: var(--vt-primary-alpha-10); color: var(--vt-primary); font-weight: 600; } /* Contact modal field labels — spacing in vt-contact.css */ .modal--contact .vt-field-label { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-dim); margin-bottom: 0; } .modal--contact .vt-field-label em { color: var(--accent); font-style: normal; } /* Admin shell: VT components inside legacy adm layout */ .adm.vt-scope, body.adm[data-ci="buzzbuild"] .adm-content { color: var(--vt-text); } body.adm[data-ci="buzzbuild"] .vt-login-card { width: min(400px, 100%); }