/* ========================================================================== COLOR SYSTEM - BENCON THEME PALETTE ========================================================================== */ /* The CSS custom properties are generated dynamically by PHP and injected in the via the bencon_color_css_vars() function. Available CSS variables: - --color-primary - --color-primary-light - --color-primary-dark - --color-secondary - --color-secondary-light - --color-secondary-dark - --color-accent - --color-accent-light - --color-accent-dark */ /* ========================================================================== TEXT COLOR UTILITIES ========================================================================== */ .text-primary { color: var(--color-primary) !important; } .text-primary-light { color: var(--color-primary-light) !important; } .text-primary-dark { color: var(--color-primary-dark) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-secondary-light { color: var(--color-secondary-light) !important; } .text-secondary-dark { color: var(--color-secondary-dark) !important; } .text-accent { color: var(--color-accent) !important; } .text-accent-light { color: var(--color-accent-light) !important; } .text-accent-dark { color: var(--color-accent-dark) !important; } /* ========================================================================== BACKGROUND COLOR UTILITIES ========================================================================== */ .bg-primary { background-color: var(--color-primary) !important; } .bg-primary-light { background-color: var(--color-primary-light) !important; } .bg-primary-dark { background-color: var(--color-primary-dark) !important; } .bg-secondary { background-color: var(--color-secondary) !important; } .bg-secondary-light { background-color: var(--color-secondary-light) !important; } .bg-secondary-dark { background-color: var(--color-secondary-dark) !important; } .bg-accent { background-color: var(--color-accent) !important; } .bg-accent-light { background-color: var(--color-accent-light) !important; } .bg-accent-dark { background-color: var(--color-accent-dark) !important; } /* ========================================================================== BORDER COLOR UTILITIES ========================================================================== */ .border-primary { border-color: var(--color-primary) !important; } .border-primary-light { border-color: var(--color-primary-light) !important; } .border-primary-dark { border-color: var(--color-primary-dark) !important; } .border-secondary { border-color: var(--color-secondary) !important; } .border-secondary-light { border-color: var(--color-secondary-light) !important; } .border-secondary-dark { border-color: var(--color-secondary-dark) !important; } .border-accent { border-color: var(--color-accent) !important; } .border-accent-light { border-color: var(--color-accent-light) !important; } .border-accent-dark { border-color: var(--color-accent-dark) !important; } /* ========================================================================== BUTTON VARIANTS ========================================================================== */ .btn-primary-custom { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .btn-primary-custom:hover, .btn-primary-custom:focus { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #ffffff; } .btn-outline-primary-custom { color: var(--color-primary); border-color: var(--color-primary); background-color: transparent; } .btn-outline-primary-custom:hover, .btn-outline-primary-custom:focus { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .btn-secondary-custom { background-color: var(--color-secondary); border-color: var(--color-secondary); color: #ffffff; } .btn-secondary-custom:hover, .btn-secondary-custom:focus { background-color: var(--color-secondary-dark); border-color: var(--color-secondary-dark); color: #ffffff; } .btn-outline-secondary-custom { color: var(--color-secondary); border-color: var(--color-secondary); background-color: transparent; } .btn-outline-secondary-custom:hover, .btn-outline-secondary-custom:focus { background-color: var(--color-secondary); border-color: var(--color-secondary); color: #ffffff; } /* ========================================================================== LINK STYLES ========================================================================== */ .link-primary-custom { color: var(--color-primary); text-decoration: none; } .link-primary-custom:hover, .link-primary-custom:focus { color: var(--color-primary-dark); text-decoration: underline; } .link-secondary-custom { color: var(--color-secondary); text-decoration: none; } .link-secondary-custom:hover, .link-secondary-custom:focus { color: var(--color-secondary-dark); text-decoration: underline; } /* ========================================================================== GRADIENT UTILITIES ========================================================================== */ .bg-gradient-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); } .bg-gradient-secondary { background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%); } .bg-gradient-primary-secondary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); } /* ========================================================================== OVERLAY UTILITIES ========================================================================== */ .overlay-primary { position: relative; } .overlay-primary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-primary); opacity: 0.8; z-index: 1; } .overlay-secondary { position: relative; } .overlay-secondary::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-secondary); opacity: 0.8; z-index: 1; } .overlay-content { position: relative; z-index: 2; } /* ========================================================================== HOVER EFFECTS ========================================================================== */ .hover-primary:hover { color: var(--color-primary) !important; transition: color 0.3s ease; } .hover-bg-primary:hover { background-color: var(--color-primary) !important; transition: background-color 0.3s ease; } .hover-secondary:hover { color: var(--color-secondary) !important; transition: color 0.3s ease; } .hover-bg-secondary:hover { background-color: var(--color-secondary) !important; transition: background-color 0.3s ease; } /* ========================================================================== COMPONENT STYLES ========================================================================== */ .navbar-brand-custom { color: var(--color-primary) !important; font-weight: var(--font-weight-demi, 700); } .navbar-brand-custom:hover { color: var(--color-primary-dark) !important; } .card-primary { border-color: var(--color-primary); } .card-primary .card-header { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .card-secondary { border-color: var(--color-secondary); } .card-secondary .card-header { background-color: var(--color-secondary); border-color: var(--color-secondary); color: #ffffff; } /* ========================================================================== WORDPRESS EDITOR STYLES ========================================================================== */ .has-primary-color { color: var(--color-primary) !important; } .has-primary-background-color { background-color: var(--color-primary) !important; } .has-secondary-color { color: var(--color-secondary) !important; } .has-secondary-background-color { background-color: var(--color-secondary) !important; } .has-accent-color { color: var(--color-accent) !important; } .has-accent-background-color { background-color: var(--color-accent) !important; } /* ========================================================================== RESPONSIVE ADJUSTMENTS ========================================================================== */ @media (max-width: 768px) { .btn-primary-custom, .btn-secondary-custom { padding: 0.75rem 1.5rem; font-size: 1rem; } } /* ========================================================================== ACCESSIBILITY ========================================================================== */ @media (prefers-contrast: high) { .text-primary, .link-primary-custom { color: var(--color-primary-dark) !important; } .text-secondary, .link-secondary-custom { color: var(--color-secondary-dark) !important; } } /* ========================================================================== PRINT STYLES ========================================================================== */ @media print { .bg-primary, .bg-secondary, .bg-accent { background-color: transparent !important; color: #000 !important; } }