1424 lines
28 KiB
CSS
1424 lines
28 KiB
CSS
/**
|
|
* VIBE BRUTALISM - Neo-Brutalist Component Library
|
|
* A bold, unapologetic UI framework inspired by brutalist design
|
|
* Version: 2.0.0
|
|
* WCAG 2.1 AA & Section 508 Compliant
|
|
*/
|
|
|
|
/* ============================================
|
|
CSS VARIABLES & DESIGN TOKENS
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Primary Colors */
|
|
--vb-primary: #FFD700;
|
|
--vb-secondary: #FF6B9D;
|
|
--vb-accent: #00F5FF;
|
|
--vb-success: #00FF88;
|
|
--vb-warning: #FFB800;
|
|
--vb-danger: #FF3366;
|
|
--vb-info: #6B9DFF;
|
|
|
|
/* Neutral Colors */
|
|
--vb-white: #FFFFFF;
|
|
--vb-black: #000000;
|
|
--vb-gray-100: #F5F5F5;
|
|
--vb-gray-200: #E0E0E0;
|
|
--vb-gray-300: #CCCCCC;
|
|
--vb-gray-800: #333333;
|
|
|
|
/* Border */
|
|
--vb-border-width: 3px;
|
|
--vb-border-color: var(--vb-black);
|
|
--vb-border: var(--vb-border-width) solid var(--vb-border-color);
|
|
|
|
/* Shadows (offset effect) */
|
|
--vb-shadow-sm: 4px 4px 0 var(--vb-black);
|
|
--vb-shadow-md: 6px 6px 0 var(--vb-black);
|
|
--vb-shadow-lg: 8px 8px 0 var(--vb-black);
|
|
--vb-shadow-xl: 12px 12px 0 var(--vb-black);
|
|
|
|
/* Typography */
|
|
--vb-font-family: 'Space Grotesk', 'Arial Black', sans-serif;
|
|
--vb-font-size-sm: 0.875rem;
|
|
--vb-font-size-base: 1rem;
|
|
--vb-font-size-lg: 1.25rem;
|
|
--vb-font-size-xl: 1.5rem;
|
|
--vb-font-size-2xl: 2rem;
|
|
--vb-font-size-3xl: 3rem;
|
|
|
|
/* Spacing */
|
|
--vb-space-1: 0.25rem;
|
|
--vb-space-2: 0.5rem;
|
|
--vb-space-3: 0.75rem;
|
|
--vb-space-4: 1rem;
|
|
--vb-space-5: 1.5rem;
|
|
--vb-space-6: 2rem;
|
|
--vb-space-8: 3rem;
|
|
|
|
/* Border Radius */
|
|
--vb-radius-none: 0;
|
|
--vb-radius-sm: 4px;
|
|
--vb-radius-md: 8px;
|
|
|
|
/* Transitions */
|
|
--vb-transition: all 0.15s ease;
|
|
|
|
/* Z-Index Scale */
|
|
--vb-z-dropdown: 100;
|
|
--vb-z-sticky: 200;
|
|
--vb-z-fixed: 300;
|
|
--vb-z-modal-backdrop: 1000;
|
|
--vb-z-modal: 1001;
|
|
--vb-z-toast: 9999;
|
|
--vb-z-skip-link: 10000;
|
|
}
|
|
|
|
/* ============================================
|
|
RESET & BASE STYLES
|
|
============================================ */
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--vb-font-family);
|
|
font-size: var(--vb-font-size-base);
|
|
line-height: 1.6;
|
|
color: var(--vb-black);
|
|
background-color: var(--vb-white);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Reduce motion for users who prefer it */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
scroll-behavior: auto !important;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
BUTTONS
|
|
============================================ */
|
|
|
|
.vb-btn {
|
|
display: inline-block;
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: var(--vb-font-size-base);
|
|
font-weight: 700;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
text-transform: uppercase;
|
|
border: var(--vb-border);
|
|
background-color: var(--vb-white);
|
|
color: var(--vb-black);
|
|
cursor: pointer;
|
|
transition: var(--vb-transition);
|
|
box-shadow: var(--vb-shadow-md);
|
|
position: relative;
|
|
user-select: none;
|
|
}
|
|
|
|
.vb-btn:hover {
|
|
transform: translate(2px, 2px);
|
|
box-shadow: 4px 4px 0 var(--vb-black);
|
|
}
|
|
|
|
.vb-btn:active {
|
|
transform: translate(6px, 6px);
|
|
box-shadow: 0 0 0 var(--vb-black);
|
|
}
|
|
|
|
.vb-btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
transform: none;
|
|
}
|
|
|
|
/* Button Variants */
|
|
.vb-btn-primary {
|
|
background-color: var(--vb-primary);
|
|
color: var(--vb-black);
|
|
}
|
|
|
|
.vb-btn-secondary {
|
|
background-color: var(--vb-secondary);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
.vb-btn-accent {
|
|
background-color: var(--vb-accent);
|
|
color: var(--vb-black);
|
|
}
|
|
|
|
.vb-btn-success {
|
|
background-color: var(--vb-success);
|
|
color: var(--vb-black);
|
|
}
|
|
|
|
.vb-btn-danger {
|
|
background-color: var(--vb-danger);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
.vb-btn-warning {
|
|
background-color: var(--vb-warning);
|
|
color: var(--vb-black);
|
|
}
|
|
|
|
.vb-btn-info {
|
|
background-color: var(--vb-info);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
.vb-btn-outline {
|
|
background-color: var(--vb-white);
|
|
color: var(--vb-black);
|
|
}
|
|
|
|
/* Button Sizes */
|
|
.vb-btn-sm {
|
|
padding: 0.5rem 1rem;
|
|
font-size: var(--vb-font-size-sm);
|
|
}
|
|
|
|
.vb-btn-lg {
|
|
padding: 1rem 2rem;
|
|
font-size: var(--vb-font-size-lg);
|
|
}
|
|
|
|
.vb-btn-block {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
/* ============================================
|
|
CARDS
|
|
============================================ */
|
|
|
|
.vb-card {
|
|
background-color: var(--vb-white);
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-lg);
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-card:hover {
|
|
transform: translate(3px, 3px);
|
|
box-shadow: 5px 5px 0 var(--vb-black);
|
|
}
|
|
|
|
.vb-card-header {
|
|
padding: var(--vb-space-4);
|
|
border-bottom: var(--vb-border);
|
|
background-color: var(--vb-gray-100);
|
|
font-weight: 700;
|
|
font-size: var(--vb-font-size-lg);
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.vb-card-body {
|
|
padding: var(--vb-space-5);
|
|
}
|
|
|
|
.vb-card-footer {
|
|
padding: var(--vb-space-4);
|
|
border-top: var(--vb-border);
|
|
background-color: var(--vb-gray-100);
|
|
}
|
|
|
|
/* Card Variants */
|
|
.vb-card-primary {
|
|
background-color: var(--vb-primary);
|
|
}
|
|
|
|
.vb-card-secondary {
|
|
background-color: var(--vb-secondary);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
.vb-card-accent {
|
|
background-color: var(--vb-accent);
|
|
}
|
|
|
|
.vb-card-flat {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.vb-card-flat:hover {
|
|
transform: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ============================================
|
|
FORMS & INPUTS
|
|
============================================ */
|
|
|
|
.vb-form-group {
|
|
margin-bottom: var(--vb-space-5);
|
|
}
|
|
|
|
.vb-label {
|
|
display: block;
|
|
margin-bottom: var(--vb-space-2);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
font-size: var(--vb-font-size-sm);
|
|
}
|
|
|
|
.vb-input,
|
|
.vb-textarea,
|
|
.vb-select {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
font-size: var(--vb-font-size-base);
|
|
font-family: var(--vb-font-family);
|
|
border: var(--vb-border);
|
|
background-color: var(--vb-white);
|
|
box-shadow: var(--vb-shadow-sm);
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-input:focus,
|
|
.vb-textarea:focus,
|
|
.vb-select:focus {
|
|
outline: none;
|
|
box-shadow: var(--vb-shadow-md);
|
|
transform: translate(-2px, -2px);
|
|
}
|
|
|
|
.vb-textarea {
|
|
min-height: 120px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.vb-input::placeholder,
|
|
.vb-textarea::placeholder {
|
|
color: var(--vb-gray-300);
|
|
}
|
|
|
|
.vb-checkbox,
|
|
.vb-radio {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border: var(--vb-border);
|
|
cursor: pointer;
|
|
margin-right: var(--vb-space-2);
|
|
}
|
|
|
|
.vb-form-check {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: var(--vb-space-3);
|
|
}
|
|
|
|
.vb-form-check label {
|
|
margin-bottom: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ============================================
|
|
ALERTS
|
|
============================================ */
|
|
|
|
.vb-alert {
|
|
padding: var(--vb-space-4);
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-md);
|
|
margin-bottom: var(--vb-space-4);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.vb-alert-success {
|
|
background-color: var(--vb-success);
|
|
color: var(--vb-black);
|
|
}
|
|
|
|
.vb-alert-warning {
|
|
background-color: var(--vb-warning);
|
|
color: var(--vb-black);
|
|
}
|
|
|
|
.vb-alert-danger {
|
|
background-color: var(--vb-danger);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
.vb-alert-info {
|
|
background-color: var(--vb-info);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
/* ============================================
|
|
BADGES
|
|
============================================ */
|
|
|
|
.vb-badge {
|
|
display: inline-block;
|
|
padding: 0.25rem 0.75rem;
|
|
font-size: var(--vb-font-size-sm);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
border: 2px solid var(--vb-black);
|
|
background-color: var(--vb-white);
|
|
box-shadow: 3px 3px 0 var(--vb-black);
|
|
}
|
|
|
|
.vb-badge-primary {
|
|
background-color: var(--vb-primary);
|
|
}
|
|
|
|
.vb-badge-secondary {
|
|
background-color: var(--vb-secondary);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
.vb-badge-success {
|
|
background-color: var(--vb-success);
|
|
}
|
|
|
|
.vb-badge-danger {
|
|
background-color: var(--vb-danger);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
/* ============================================
|
|
NAVIGATION
|
|
============================================ */
|
|
|
|
.vb-nav {
|
|
display: flex;
|
|
list-style: none;
|
|
border: var(--vb-border);
|
|
background-color: var(--vb-white);
|
|
box-shadow: var(--vb-shadow-md);
|
|
}
|
|
|
|
.vb-nav-item {
|
|
flex: 1;
|
|
}
|
|
|
|
.vb-nav-link {
|
|
display: block;
|
|
padding: var(--vb-space-4);
|
|
text-decoration: none;
|
|
color: var(--vb-black);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
text-align: center;
|
|
border-right: var(--vb-border);
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-nav-item:last-child .vb-nav-link {
|
|
border-right: none;
|
|
}
|
|
|
|
.vb-nav-link:hover {
|
|
background-color: var(--vb-primary);
|
|
}
|
|
|
|
.vb-nav-link.active {
|
|
background-color: var(--vb-black);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
/* Navbar */
|
|
.vb-navbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: var(--vb-space-4);
|
|
border-bottom: var(--vb-border);
|
|
background-color: var(--vb-white);
|
|
box-shadow: 0 6px 0 var(--vb-black);
|
|
}
|
|
|
|
.vb-navbar-brand {
|
|
font-size: var(--vb-font-size-xl);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
color: var(--vb-black);
|
|
}
|
|
|
|
.vb-navbar-menu {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: var(--vb-space-4);
|
|
}
|
|
|
|
.vb-navbar-link {
|
|
text-decoration: none;
|
|
color: var(--vb-black);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
padding: var(--vb-space-2) var(--vb-space-4);
|
|
border: var(--vb-border);
|
|
background-color: var(--vb-white);
|
|
box-shadow: 3px 3px 0 var(--vb-black);
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-navbar-link:hover {
|
|
transform: translate(1px, 1px);
|
|
box-shadow: 2px 2px 0 var(--vb-black);
|
|
}
|
|
|
|
/* ============================================
|
|
MODALS
|
|
============================================ */
|
|
|
|
.vb-modal {
|
|
display: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
z-index: var(--vb-z-modal-backdrop);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.vb-modal.active {
|
|
display: flex;
|
|
}
|
|
|
|
.vb-modal-content {
|
|
background-color: var(--vb-white);
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-xl);
|
|
max-width: 600px;
|
|
width: 90%;
|
|
max-height: 90vh;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.vb-modal-header {
|
|
padding: var(--vb-space-5);
|
|
border-bottom: var(--vb-border);
|
|
background-color: var(--vb-black);
|
|
color: var(--vb-white);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.vb-modal-title {
|
|
font-size: var(--vb-font-size-xl);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
margin: 0;
|
|
}
|
|
|
|
.vb-modal-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--vb-white);
|
|
font-size: 2rem;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 32px;
|
|
height: 32px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.vb-modal-body {
|
|
padding: var(--vb-space-5);
|
|
}
|
|
|
|
.vb-modal-footer {
|
|
padding: var(--vb-space-4);
|
|
border-top: var(--vb-border);
|
|
background-color: var(--vb-gray-100);
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--vb-space-3);
|
|
}
|
|
|
|
/* ============================================
|
|
DROPDOWNS
|
|
============================================ */
|
|
|
|
.vb-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.vb-dropdown-toggle {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.vb-dropdown-menu {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
margin-top: var(--vb-space-2);
|
|
background-color: var(--vb-white);
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-lg);
|
|
min-width: 200px;
|
|
z-index: var(--vb-z-dropdown);
|
|
}
|
|
|
|
.vb-dropdown.active .vb-dropdown-menu {
|
|
display: block;
|
|
}
|
|
|
|
.vb-dropdown-item {
|
|
display: block;
|
|
padding: var(--vb-space-3) var(--vb-space-4);
|
|
text-decoration: none;
|
|
color: var(--vb-black);
|
|
border-bottom: var(--vb-border);
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-dropdown-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.vb-dropdown-item:hover {
|
|
background-color: var(--vb-primary);
|
|
}
|
|
|
|
/* ============================================
|
|
TABS
|
|
============================================ */
|
|
|
|
.vb-tabs {
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-md);
|
|
}
|
|
|
|
.vb-tab-list {
|
|
display: flex;
|
|
list-style: none;
|
|
background-color: var(--vb-white);
|
|
border-bottom: var(--vb-border);
|
|
}
|
|
|
|
.vb-tab-button {
|
|
flex: 1;
|
|
padding: var(--vb-space-4);
|
|
background-color: var(--vb-white);
|
|
border: none;
|
|
border-right: var(--vb-border);
|
|
font-family: var(--vb-font-family);
|
|
font-size: var(--vb-font-size-base);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-tab-button:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.vb-tab-button:hover {
|
|
background-color: var(--vb-gray-100);
|
|
}
|
|
|
|
.vb-tab-button.active {
|
|
background-color: var(--vb-primary);
|
|
}
|
|
|
|
.vb-tab-content {
|
|
display: none;
|
|
padding: var(--vb-space-5);
|
|
}
|
|
|
|
.vb-tab-content.active {
|
|
display: block;
|
|
}
|
|
|
|
/* ============================================
|
|
ACCORDION
|
|
============================================ */
|
|
|
|
.vb-accordion {
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-md);
|
|
}
|
|
|
|
.vb-accordion-item {
|
|
border-bottom: var(--vb-border);
|
|
}
|
|
|
|
.vb-accordion-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.vb-accordion-header {
|
|
width: 100%;
|
|
padding: var(--vb-space-4);
|
|
background-color: var(--vb-white);
|
|
border: none;
|
|
font-family: var(--vb-font-family);
|
|
font-size: var(--vb-font-size-base);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
transition: var(--vb-transition);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.vb-accordion-header:hover {
|
|
background-color: var(--vb-gray-100);
|
|
}
|
|
|
|
.vb-accordion-header.active {
|
|
background-color: var(--vb-primary);
|
|
}
|
|
|
|
.vb-accordion-icon {
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-accordion-header.active .vb-accordion-icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.vb-accordion-body {
|
|
display: none;
|
|
padding: var(--vb-space-5);
|
|
background-color: var(--vb-white);
|
|
}
|
|
|
|
.vb-accordion-body.active {
|
|
display: block;
|
|
}
|
|
|
|
/* ============================================
|
|
PROGRESS BAR
|
|
============================================ */
|
|
|
|
.vb-progress {
|
|
width: 100%;
|
|
height: 2rem;
|
|
background-color: var(--vb-white);
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-sm);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vb-progress-bar {
|
|
height: 100%;
|
|
background-color: var(--vb-primary);
|
|
border-right: var(--vb-border);
|
|
transition: width 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: var(--vb-font-size-sm);
|
|
}
|
|
|
|
.vb-progress-bar-success {
|
|
background-color: var(--vb-success);
|
|
}
|
|
|
|
.vb-progress-bar-warning {
|
|
background-color: var(--vb-warning);
|
|
}
|
|
|
|
.vb-progress-bar-danger {
|
|
background-color: var(--vb-danger);
|
|
}
|
|
|
|
/* ============================================
|
|
GRID SYSTEM
|
|
============================================ */
|
|
|
|
.vb-container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 var(--vb-space-4);
|
|
}
|
|
|
|
.vb-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 0 calc(var(--vb-space-4) * -1);
|
|
}
|
|
|
|
.vb-col {
|
|
flex: 1;
|
|
padding: var(--vb-space-4);
|
|
}
|
|
|
|
.vb-col-1 { flex: 0 0 8.333%; max-width: 8.333%; padding: var(--vb-space-4); }
|
|
.vb-col-2 { flex: 0 0 16.666%; max-width: 16.666%; padding: var(--vb-space-4); }
|
|
.vb-col-3 { flex: 0 0 25%; max-width: 25%; padding: var(--vb-space-4); }
|
|
.vb-col-4 { flex: 0 0 33.333%; max-width: 33.333%; padding: var(--vb-space-4); }
|
|
.vb-col-5 { flex: 0 0 41.666%; max-width: 41.666%; padding: var(--vb-space-4); }
|
|
.vb-col-6 { flex: 0 0 50%; max-width: 50%; padding: var(--vb-space-4); }
|
|
.vb-col-7 { flex: 0 0 58.333%; max-width: 58.333%; padding: var(--vb-space-4); }
|
|
.vb-col-8 { flex: 0 0 66.666%; max-width: 66.666%; padding: var(--vb-space-4); }
|
|
.vb-col-9 { flex: 0 0 75%; max-width: 75%; padding: var(--vb-space-4); }
|
|
.vb-col-10 { flex: 0 0 83.333%; max-width: 83.333%; padding: var(--vb-space-4); }
|
|
.vb-col-11 { flex: 0 0 91.666%; max-width: 91.666%; padding: var(--vb-space-4); }
|
|
.vb-col-12 { flex: 0 0 100%; max-width: 100%; padding: var(--vb-space-4); }
|
|
|
|
/* ============================================
|
|
UTILITY CLASSES
|
|
============================================ */
|
|
|
|
/* Spacing */
|
|
.vb-m-0 { margin: 0; }
|
|
.vb-m-1 { margin: var(--vb-space-1); }
|
|
.vb-m-2 { margin: var(--vb-space-2); }
|
|
.vb-m-3 { margin: var(--vb-space-3); }
|
|
.vb-m-4 { margin: var(--vb-space-4); }
|
|
.vb-m-5 { margin: var(--vb-space-5); }
|
|
.vb-m-6 { margin: var(--vb-space-6); }
|
|
|
|
.vb-mt-4 { margin-top: var(--vb-space-4); }
|
|
.vb-mb-4 { margin-bottom: var(--vb-space-4); }
|
|
.vb-ml-4 { margin-left: var(--vb-space-4); }
|
|
.vb-mr-4 { margin-right: var(--vb-space-4); }
|
|
|
|
.vb-p-0 { padding: 0; }
|
|
.vb-p-1 { padding: var(--vb-space-1); }
|
|
.vb-p-2 { padding: var(--vb-space-2); }
|
|
.vb-p-3 { padding: var(--vb-space-3); }
|
|
.vb-p-4 { padding: var(--vb-space-4); }
|
|
.vb-p-5 { padding: var(--vb-space-5); }
|
|
.vb-p-6 { padding: var(--vb-space-6); }
|
|
|
|
/* Text Alignment */
|
|
.vb-text-left { text-align: left; }
|
|
.vb-text-center { text-align: center; }
|
|
.vb-text-right { text-align: right; }
|
|
|
|
/* Text Transform */
|
|
.vb-text-uppercase { text-transform: uppercase; }
|
|
.vb-text-lowercase { text-transform: lowercase; }
|
|
|
|
/* Font Weight */
|
|
.vb-font-bold { font-weight: 700; }
|
|
.vb-font-normal { font-weight: 400; }
|
|
|
|
/* Display */
|
|
.vb-d-block { display: block; }
|
|
.vb-d-inline { display: inline; }
|
|
.vb-d-inline-block { display: inline-block; }
|
|
.vb-d-flex { display: flex; }
|
|
.vb-d-none { display: none; }
|
|
|
|
/* Flex utilities */
|
|
.vb-flex-row { flex-direction: row; }
|
|
.vb-flex-column { flex-direction: column; }
|
|
.vb-justify-center { justify-content: center; }
|
|
.vb-justify-between { justify-content: space-between; }
|
|
.vb-align-center { align-items: center; }
|
|
.vb-gap-4 { gap: var(--vb-space-4); }
|
|
|
|
/* Width */
|
|
.vb-w-full { width: 100%; }
|
|
.vb-w-half { width: 50%; }
|
|
|
|
/* Background colors */
|
|
.vb-bg-primary { background-color: var(--vb-primary); }
|
|
.vb-bg-secondary { background-color: var(--vb-secondary); }
|
|
.vb-bg-accent { background-color: var(--vb-accent); }
|
|
.vb-bg-white { background-color: var(--vb-white); }
|
|
.vb-bg-black { background-color: var(--vb-black); color: var(--vb-white); }
|
|
|
|
/* Typography */
|
|
.vb-h1,
|
|
.vb-h2,
|
|
.vb-h3,
|
|
.vb-h4,
|
|
.vb-h5,
|
|
.vb-h6 {
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
margin-bottom: var(--vb-space-4);
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.vb-h1 { font-size: var(--vb-font-size-3xl); }
|
|
.vb-h2 { font-size: var(--vb-font-size-2xl); }
|
|
.vb-h3 { font-size: var(--vb-font-size-xl); }
|
|
.vb-h4 { font-size: var(--vb-font-size-lg); }
|
|
.vb-h5 { font-size: var(--vb-font-size-base); }
|
|
.vb-h6 { font-size: var(--vb-font-size-sm); }
|
|
|
|
/* ============================================
|
|
HAMBURGER MENU (RESPONSIVE NAVIGATION)
|
|
============================================ */
|
|
|
|
.vb-navbar-toggle {
|
|
display: none;
|
|
background-color: var(--vb-white);
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-sm);
|
|
padding: var(--vb-space-3);
|
|
cursor: pointer;
|
|
width: 48px;
|
|
height: 48px;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-navbar-toggle:hover {
|
|
background-color: var(--vb-primary);
|
|
}
|
|
|
|
.vb-navbar-toggle:focus {
|
|
outline: 3px solid var(--vb-black);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.vb-navbar-toggle-bar {
|
|
width: 100%;
|
|
height: 3px;
|
|
background-color: var(--vb-black);
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-navbar-toggle.active .vb-navbar-toggle-bar:nth-child(1) {
|
|
transform: rotate(45deg) translate(8px, 8px);
|
|
}
|
|
|
|
.vb-navbar-toggle.active .vb-navbar-toggle-bar:nth-child(2) {
|
|
opacity: 0;
|
|
}
|
|
|
|
.vb-navbar-toggle.active .vb-navbar-toggle-bar:nth-child(3) {
|
|
transform: rotate(-45deg) translate(8px, -8px);
|
|
}
|
|
|
|
/* ============================================
|
|
CAROUSEL
|
|
============================================ */
|
|
|
|
.vb-carousel {
|
|
position: relative;
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-lg);
|
|
background-color: var(--vb-white);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.vb-carousel-inner {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
touch-action: pan-y pinch-zoom;
|
|
}
|
|
|
|
.vb-carousel-track {
|
|
display: flex;
|
|
transition: transform 0.4s ease;
|
|
will-change: transform;
|
|
}
|
|
|
|
.vb-carousel-item {
|
|
min-width: 100%;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.vb-carousel-item img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
border: none;
|
|
}
|
|
|
|
.vb-carousel-item-card {
|
|
padding: var(--vb-space-5);
|
|
}
|
|
|
|
/* Carousel Controls */
|
|
.vb-carousel-control {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background-color: var(--vb-white);
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-md);
|
|
padding: var(--vb-space-3);
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-carousel-control:hover {
|
|
background-color: var(--vb-primary);
|
|
transform: translateY(-50%) scale(1.1);
|
|
}
|
|
|
|
.vb-carousel-control:focus {
|
|
outline: 3px solid var(--vb-black);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.vb-carousel-control:active {
|
|
transform: translateY(-50%) scale(0.95);
|
|
}
|
|
|
|
.vb-carousel-control-prev {
|
|
left: var(--vb-space-4);
|
|
}
|
|
|
|
.vb-carousel-control-next {
|
|
right: var(--vb-space-4);
|
|
}
|
|
|
|
/* Carousel Indicators */
|
|
.vb-carousel-indicators {
|
|
position: absolute;
|
|
bottom: var(--vb-space-4);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: var(--vb-space-2);
|
|
z-index: 10;
|
|
}
|
|
|
|
.vb-carousel-indicator {
|
|
width: 12px;
|
|
height: 12px;
|
|
background-color: var(--vb-white);
|
|
border: var(--vb-border);
|
|
box-shadow: 2px 2px 0 var(--vb-black);
|
|
cursor: pointer;
|
|
transition: var(--vb-transition);
|
|
padding: 0;
|
|
}
|
|
|
|
.vb-carousel-indicator:hover {
|
|
background-color: var(--vb-gray-200);
|
|
}
|
|
|
|
.vb-carousel-indicator:focus {
|
|
outline: 2px solid var(--vb-black);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.vb-carousel-indicator.active {
|
|
background-color: var(--vb-primary);
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
/* Carousel Caption */
|
|
.vb-carousel-caption {
|
|
position: absolute;
|
|
bottom: var(--vb-space-6);
|
|
left: var(--vb-space-4);
|
|
right: var(--vb-space-4);
|
|
background-color: var(--vb-white);
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-md);
|
|
padding: var(--vb-space-4);
|
|
text-align: center;
|
|
}
|
|
|
|
/* ============================================
|
|
TOAST NOTIFICATIONS
|
|
============================================ */
|
|
|
|
.vb-toast-container {
|
|
position: fixed;
|
|
z-index: var(--vb-z-toast);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.vb-toast-container.top-right {
|
|
top: var(--vb-space-4);
|
|
right: var(--vb-space-4);
|
|
}
|
|
|
|
.vb-toast-container.top-left {
|
|
top: var(--vb-space-4);
|
|
left: var(--vb-space-4);
|
|
}
|
|
|
|
.vb-toast-container.bottom-right {
|
|
bottom: var(--vb-space-4);
|
|
right: var(--vb-space-4);
|
|
}
|
|
|
|
.vb-toast-container.bottom-left {
|
|
bottom: var(--vb-space-4);
|
|
left: var(--vb-space-4);
|
|
}
|
|
|
|
.vb-toast-container.top-center {
|
|
top: var(--vb-space-4);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.vb-toast {
|
|
pointer-events: auto;
|
|
background-color: var(--vb-white);
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-lg);
|
|
padding: var(--vb-space-4);
|
|
margin-bottom: var(--vb-space-3);
|
|
min-width: 300px;
|
|
max-width: 400px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--vb-space-3);
|
|
animation: vb-toast-slide-in 0.3s ease;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.vb-toast.removing {
|
|
animation: vb-toast-slide-out 0.3s ease;
|
|
}
|
|
|
|
@keyframes vb-toast-slide-in {
|
|
from {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes vb-toast-slide-out {
|
|
from {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
transform: translateX(400px);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.vb-toast-icon {
|
|
flex-shrink: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.vb-toast-content {
|
|
flex: 1;
|
|
}
|
|
|
|
.vb-toast-close {
|
|
background: none;
|
|
border: none;
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 1;
|
|
color: var(--vb-black);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.vb-toast-close:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.vb-toast-close:focus {
|
|
outline: 2px solid var(--vb-black);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Toast Variants */
|
|
.vb-toast-success {
|
|
background-color: var(--vb-success);
|
|
color: var(--vb-black);
|
|
}
|
|
|
|
.vb-toast-warning {
|
|
background-color: var(--vb-warning);
|
|
color: var(--vb-black);
|
|
}
|
|
|
|
.vb-toast-danger {
|
|
background-color: var(--vb-danger);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
.vb-toast-info {
|
|
background-color: var(--vb-info);
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
.vb-toast-danger .vb-toast-close {
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
.vb-toast-info .vb-toast-close {
|
|
color: var(--vb-white);
|
|
}
|
|
|
|
/* ============================================
|
|
SNACKBAR
|
|
============================================ */
|
|
|
|
.vb-snackbar {
|
|
position: fixed;
|
|
bottom: var(--vb-space-4);
|
|
left: 50%;
|
|
transform: translateX(-50%) translateY(200px);
|
|
background-color: var(--vb-black);
|
|
color: var(--vb-white);
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-xl);
|
|
padding: var(--vb-space-4) var(--vb-space-5);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--vb-space-4);
|
|
min-width: 300px;
|
|
max-width: 600px;
|
|
z-index: var(--vb-z-toast);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.vb-snackbar.show {
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
|
|
.vb-snackbar-message {
|
|
flex: 1;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.vb-snackbar-action {
|
|
background-color: var(--vb-primary);
|
|
color: var(--vb-black);
|
|
border: none;
|
|
padding: var(--vb-space-2) var(--vb-space-4);
|
|
font-family: var(--vb-font-family);
|
|
font-size: var(--vb-font-size-sm);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
transition: var(--vb-transition);
|
|
}
|
|
|
|
.vb-snackbar-action:hover {
|
|
background-color: var(--vb-accent);
|
|
}
|
|
|
|
.vb-snackbar-action:focus {
|
|
outline: 2px solid var(--vb-white);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.vb-snackbar-close {
|
|
background: none;
|
|
border: none;
|
|
color: var(--vb-white);
|
|
font-size: 1.5rem;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
width: 24px;
|
|
height: 24px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.vb-snackbar-close:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.vb-snackbar-close:focus {
|
|
outline: 2px solid var(--vb-white);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* ============================================
|
|
ACCESSIBILITY UTILITIES
|
|
============================================ */
|
|
|
|
/* Screen reader only content */
|
|
.vb-sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
|
|
/* Skip to main content link */
|
|
.vb-skip-link {
|
|
position: absolute;
|
|
top: -100px;
|
|
left: var(--vb-space-4);
|
|
background-color: var(--vb-primary);
|
|
color: var(--vb-black);
|
|
padding: var(--vb-space-3) var(--vb-space-5);
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
border: var(--vb-border);
|
|
box-shadow: var(--vb-shadow-md);
|
|
z-index: var(--vb-z-skip-link);
|
|
}
|
|
|
|
.vb-skip-link:focus {
|
|
top: var(--vb-space-4);
|
|
}
|
|
|
|
/* Focus visible styles for keyboard navigation */
|
|
.vb-btn:focus-visible,
|
|
.vb-input:focus-visible,
|
|
.vb-textarea:focus-visible,
|
|
.vb-select:focus-visible,
|
|
.vb-navbar-link:focus-visible,
|
|
.vb-navbar-toggle:focus-visible,
|
|
.vb-dropdown-toggle:focus-visible,
|
|
.vb-tab-button:focus-visible,
|
|
.vb-accordion-header:focus-visible,
|
|
.vb-carousel-control:focus-visible,
|
|
.vb-carousel-indicator:focus-visible {
|
|
outline: 3px solid var(--vb-black);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* High Contrast Mode Support */
|
|
@media (prefers-contrast: high) {
|
|
.vb-btn,
|
|
.vb-card,
|
|
.vb-input,
|
|
.vb-textarea,
|
|
.vb-select,
|
|
.vb-modal-content,
|
|
.vb-dropdown-menu,
|
|
.vb-toast,
|
|
.vb-snackbar {
|
|
border-width: 4px;
|
|
}
|
|
|
|
.vb-btn:focus-visible,
|
|
.vb-input:focus-visible,
|
|
.vb-textarea:focus-visible,
|
|
.vb-select:focus-visible {
|
|
outline-width: 4px;
|
|
}
|
|
}
|
|
|
|
/* Print Styles */
|
|
@media print {
|
|
.vb-navbar-toggle,
|
|
.vb-skip-link,
|
|
.vb-modal,
|
|
.vb-toast-container,
|
|
.vb-snackbar,
|
|
.vb-dropdown-menu,
|
|
.vb-carousel-control,
|
|
.vb-carousel-indicators {
|
|
display: none !important;
|
|
}
|
|
|
|
.vb-card,
|
|
.vb-alert,
|
|
.vb-accordion {
|
|
box-shadow: none;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
body {
|
|
background: white;
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
RESPONSIVE DESIGN
|
|
============================================ */
|
|
|
|
@media (max-width: 768px) {
|
|
.vb-navbar {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.vb-navbar-toggle {
|
|
display: flex;
|
|
}
|
|
|
|
.vb-navbar-menu {
|
|
display: none;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
gap: 0;
|
|
margin-top: var(--vb-space-4);
|
|
border-top: var(--vb-border);
|
|
padding-top: var(--vb-space-4);
|
|
}
|
|
|
|
.vb-navbar-menu.active {
|
|
display: flex;
|
|
}
|
|
|
|
.vb-navbar-link {
|
|
width: 100%;
|
|
text-align: center;
|
|
margin-bottom: var(--vb-space-2);
|
|
}
|
|
|
|
.vb-row {
|
|
flex-direction: column;
|
|
}
|
|
|
|
[class*="vb-col-"] {
|
|
flex: 0 0 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.vb-tab-list {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.vb-tab-button {
|
|
border-right: none;
|
|
border-bottom: var(--vb-border);
|
|
}
|
|
|
|
.vb-tab-button:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|