/*
* ============================================================
* SONGBOOK — Custom Theme
* Aplicar APÓS o bootstrap.css (ou bootstrap.min.css)
*
* Ordem recomendada no _Host.cshtml / index.html:
*
*
*
* Google Fonts (adicionar no antes dos CSS):
*
* ============================================================
*/
/* ============================================================
1. DESIGN TOKENS — variáveis CSS globais
============================================================ */
:root {
/* Paleta principal */
--sb-bg: #0d0d1a;
--sb-bg-surface: rgba(13, 13, 26, 0.75);
--sb-accent-orange: #ff8c42;
--sb-accent-red: #d62828;
--sb-accent-yellow: #ffd93d;
--sb-accent-cyan: #6bcbff;
/* Glass */
--sb-glass-bg: rgba(255, 255, 255, 0.05);
--sb-glass-border: rgba(255, 255, 255, 0.12);
--sb-glass-blur: blur(16px);
/* Texto */
--sb-text: #f0eeff;
--sb-text-muted: rgba(240, 238, 255, 0.5);
/* Tipografia */
--sb-font-display: 'Syne', sans-serif;
--sb-font-body: 'DM Sans', sans-serif;
--sb-font-mono: 'Inter', sans-serif;
/* Bordas */
--sb-radius-sm: 8px;
--sb-radius-md: 12px;
--sb-radius-lg: 16px;
/* Sombras */
--sb-shadow-glow-orange: 0 4px 20px rgba(255, 140, 66, 0.3);
--sb-shadow-glow-red: 0 0 20px rgba(214, 40, 40, 0.4);
--sb-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
/* Sobrescreve variáveis nativas do Bootstrap 5 */
--bs-body-bg: #0d0d1a;
--bs-body-color: #f0eeff;
--bs-body-font-family: 'DM Sans', sans-serif;
--bs-border-color: rgba(255, 255, 255, 0.12);
--bs-border-radius: 12px;
--bs-border-radius-sm: 8px;
--bs-border-radius-lg: 16px;
--bs-primary: #ff8c42;
--bs-primary-rgb: 255, 140, 66;
--bs-secondary: rgba(255, 255, 255, 0.05);
--bs-secondary-rgb: 255, 255, 255;
--bs-danger: #d62828;
--bs-danger-rgb: 214, 40, 40;
--bs-info: #6bcbff;
--bs-info-rgb: 107, 203, 255;
--bs-warning: #ffd93d;
--bs-warning-rgb: 255, 217, 61;
--bs-link-color: #ff8c42;
--bs-link-hover-color: #d62828;
}
/* ============================================================
2. BASE — body, tipografia global
============================================================ */
body {
font-family: var(--sb-font-body) !important;
background-color: var(--sb-bg) !important;
color: var(--sb-text) !important;
min-height: 100vh;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--sb-font-display) !important;
color: var(--sb-text) !important;
font-weight: 600 !important;
}
p, span, label, li, td, th {
color: var(--sb-text) !important;
}
a {
color: var(--sb-accent-orange) !important;
text-decoration: none !important;
transition: color 0.2s;
}
a:hover {
color: var(--sb-accent-red) !important;
}
code, pre, .font-monospace {
font-family: var(--sb-font-mono), monospace !important;
}
hr {
border-color: var(--sb-glass-border) !important;
opacity: 1 !important;
}
::selection {
background: rgba(255, 140, 66, 0.25);
color: var(--sb-text);
}
/* ============================================================
3. LAYOUT — navbar, sidebar (usando classes Bootstrap)
============================================================ */
/* Navbar */
.navbar {
background: var(--sb-bg-surface) !important;
backdrop-filter: var(--sb-glass-blur) !important;
-webkit-backdrop-filter: var(--sb-glass-blur) !important;
border-bottom: 1px solid var(--sb-glass-border) !important;
}
.navbar-brand {
font-family: var(--sb-font-display) !important;
font-size: 16px !important;
font-weight: 700 !important;
color: var(--sb-text) !important;
letter-spacing: 0.2px !important;
}
.navbar-brand:hover { color: var(--sb-text) !important; }
.navbar-nav .nav-link {
font-size: 14px !important;
color: var(--sb-text-muted) !important;
border-radius: var(--sb-radius-md) !important;
padding: 8px 14px !important;
border: 1px solid transparent !important;
transition: all 0.2s !important;
}
.navbar-nav .nav-link:hover {
background: var(--sb-glass-bg) !important;
border-color: var(--sb-glass-border) !important;
color: var(--sb-text) !important;
}
.navbar-nav .nav-link.active {
background: linear-gradient(135deg, rgba(214,40,40,0.15), rgba(255,140,66,0.1)) !important;
border-color: rgba(214, 40, 40, 0.3) !important;
color: var(--sb-text) !important;
font-weight: 500 !important;
}
.navbar-toggler {
border-color: var(--sb-glass-border) !important;
}
.navbar-toggler-icon {
filter: invert(1) !important;
}
/* Sidebar (usando .offcanvas ou lista nav vertical) */
.sidebar,
.offcanvas {
background: var(--sb-bg-surface) !important;
backdrop-filter: var(--sb-glass-blur) !important;
border-right: 1px solid var(--sb-glass-border) !important;
}
.nav-pills .nav-link {
font-size: 14px !important;
color: var(--sb-text-muted) !important;
border-radius: var(--sb-radius-md) !important;
border: 1px solid transparent !important;
transition: all 0.2s !important;
}
.nav-pills .nav-link:hover {
background: var(--sb-glass-bg) !important;
border-color: var(--sb-glass-border) !important;
color: var(--sb-text) !important;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
background: linear-gradient(135deg, rgba(214,40,40,0.15), rgba(255,140,66,0.1)) !important;
border-color: rgba(214, 40, 40, 0.3) !important;
color: var(--sb-text) !important;
font-weight: 500 !important;
}
/* ============================================================
4. CARDS
============================================================ */
.card {
background: var(--sb-glass-bg) !important;
backdrop-filter: var(--sb-glass-blur) !important;
-webkit-backdrop-filter: var(--sb-glass-blur) !important;
border: 1px solid var(--sb-glass-border) !important;
border-radius: var(--sb-radius-lg) !important;
color: var(--sb-text) !important;
box-shadow: var(--sb-shadow-card) !important;
transition: transform 0.25s, box-shadow 0.25s !important;
}
.card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.card-header {
background: rgba(255, 255, 255, 0.04) !important;
border-bottom: 1px solid var(--sb-glass-border) !important;
font-family: var(--sb-font-display) !important;
font-weight: 600 !important;
color: var(--sb-text) !important;
}
.card-footer {
background: rgba(255, 255, 255, 0.03) !important;
border-top: 1px solid var(--sb-glass-border) !important;
}
/* ============================================================
5. BOTÕES
============================================================ */
/* Primary */
.btn-primary {
background: linear-gradient(135deg, var(--sb-accent-orange) 0%, var(--sb-accent-red) 100%) !important;
border: none !important;
color: #fff !important;
font-family: var(--sb-font-body) !important;
font-weight: 600 !important;
border-radius: var(--sb-radius-md) !important;
box-shadow: var(--sb-shadow-glow-orange) !important;
transition: transform 0.25s, box-shadow 0.25s !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
background: linear-gradient(135deg, var(--sb-accent-orange) 0%, var(--sb-accent-red) 100%) !important;
transform: translateY(-2px) !important;
box-shadow: 0 8px 28px rgba(255, 140, 66, 0.45) !important;
color: #fff !important;
}
/* Secondary */
.btn-secondary {
background: var(--sb-glass-bg) !important;
border: 1px solid var(--sb-glass-border) !important;
color: var(--sb-text) !important;
font-family: var(--sb-font-body) !important;
font-weight: 500 !important;
border-radius: var(--sb-radius-md) !important;
transition: all 0.2s !important;
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.1) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
color: var(--sb-text) !important;
}
/* Danger */
.btn-danger {
background: rgba(214, 40, 40, 0.12) !important;
border: 1px solid rgba(214, 40, 40, 0.25) !important;
color: var(--sb-accent-red) !important;
font-weight: 600 !important;
border-radius: var(--sb-radius-md) !important;
transition: all 0.2s !important;
}
.btn-danger:hover {
background: rgba(214, 40, 40, 0.22) !important;
color: var(--sb-accent-red) !important;
}
/* Info */
.btn-info {
background: rgba(107, 203, 255, 0.12) !important;
border: 1px solid rgba(107, 203, 255, 0.25) !important;
color: var(--sb-accent-cyan) !important;
font-weight: 600 !important;
border-radius: var(--sb-radius-md) !important;
transition: all 0.2s !important;
}
.btn-info:hover {
background: rgba(107, 203, 255, 0.22) !important;
color: var(--sb-accent-cyan) !important;
}
/* Outline variants */
.btn-outline-primary {
border-color: var(--sb-accent-orange) !important;
color: var(--sb-accent-orange) !important;
border-radius: var(--sb-radius-md) !important;
}
.btn-outline-primary:hover {
background: var(--sb-accent-orange) !important;
color: #fff !important;
}
/* Tamanhos */
.btn-sm {
padding: 5px 12px !important;
font-size: 12px !important;
border-radius: var(--sb-radius-sm) !important;
}
.btn-lg {
padding: 12px 28px !important;
font-size: 16px !important;
border-radius: var(--sb-radius-lg) !important;
}
/* ============================================================
6. FORMULÁRIOS — inputs, selects, textareas
============================================================ */
.form-control,
.form-select {
background: var(--sb-glass-bg) !important;
border: 1px solid var(--sb-glass-border) !important;
border-radius: var(--sb-radius-md) !important;
color: var(--sb-text) !important;
font-family: var(--sb-font-body) !important;
font-size: 14px !important;
padding: 10px 16px !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
}
.form-control::placeholder {
color: var(--sb-text-muted) !important;
}
.form-control:focus,
.form-select:focus {
background: var(--sb-glass-bg) !important;
border-color: rgba(255, 140, 66, 0.5) !important;
box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.12) !important;
color: var(--sb-text) !important;
outline: none !important;
}
.form-select option {
background: #1a1a2e !important;
color: var(--sb-text) !important;
}
.form-label {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--sb-text-muted) !important;
margin-bottom: 6px !important;
}
.form-check-input {
background-color: var(--sb-glass-bg) !important;
border-color: var(--sb-glass-border) !important;
}
.form-check-input:checked {
background-color: var(--sb-accent-orange) !important;
border-color: var(--sb-accent-orange) !important;
}
.form-check-input:focus {
box-shadow: 0 0 0 3px rgba(255, 140, 66, 0.2) !important;
}
.input-group-text {
background: var(--sb-glass-bg) !important;
border: 1px solid var(--sb-glass-border) !important;
color: var(--sb-text-muted) !important;
}
.form-text {
color: var(--sb-text-muted) !important;
font-size: 12px !important;
}
.invalid-feedback { color: var(--sb-accent-red) !important; }
.valid-feedback { color: #4ade80 !important; }
.is-invalid .form-control,
.form-control.is-invalid {
border-color: var(--sb-accent-red) !important;
}
/* ============================================================
7. TABELAS
============================================================ */
.table {
color: var(--sb-text) !important;
border-color: rgba(255, 255, 255, 0.06) !important;
}
.table > :not(caption) > * > * {
background-color: transparent !important;
border-color: rgba(255, 255, 255, 0.06) !important;
color: var(--sb-text) !important;
padding: 14px 16px !important;
}
.table thead th {
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: var(--sb-text-muted) !important;
border-bottom: 1px solid var(--sb-glass-border) !important;
}
.table tbody tr {
transition: background 0.2s !important;
}
.table tbody tr:hover > * {
background-color: rgba(255, 255, 255, 0.04) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
background-color: rgba(255, 255, 255, 0.02) !important;
}
/* ============================================================
8. BADGES
============================================================ */
.badge {
font-family: var(--sb-font-body) !important;
font-weight: 500 !important;
font-size: 11px !important;
padding: 4px 10px !important;
border-radius: 20px !important;
}
.badge.bg-primary,
.badge.text-bg-primary {
background: rgba(255, 140, 66, 0.15) !important;
color: var(--sb-accent-orange) !important;
border: 1px solid rgba(255, 140, 66, 0.25) !important;
}
.badge.bg-danger,
.badge.text-bg-danger {
background: rgba(214, 40, 40, 0.15) !important;
color: var(--sb-accent-red) !important;
border: 1px solid rgba(214, 40, 40, 0.25) !important;
}
.badge.bg-info,
.badge.text-bg-info {
background: rgba(107, 203, 255, 0.15) !important;
color: var(--sb-accent-cyan) !important;
border: 1px solid rgba(107, 203, 255, 0.25) !important;
}
.badge.bg-warning,
.badge.text-bg-warning {
background: rgba(255, 217, 61, 0.15) !important;
color: var(--sb-accent-yellow) !important;
border: 1px solid rgba(255, 217, 61, 0.25) !important;
}
.badge.bg-secondary,
.badge.text-bg-secondary {
background: rgba(255, 255, 255, 0.08) !important;
color: var(--sb-text-muted) !important;
border: 1px solid var(--sb-glass-border) !important;
}
/* ============================================================
9. MODAIS
============================================================ */
.modal-content {
background: var(--sb-bg-surface) !important;
backdrop-filter: var(--sb-glass-blur) !important;
border: 1px solid var(--sb-glass-border) !important;
border-radius: var(--sb-radius-lg) !important;
color: var(--sb-text) !important;
box-shadow: var(--sb-shadow-card) !important;
}
.modal-header {
border-bottom: 1px solid var(--sb-glass-border) !important;
}
.modal-footer {
border-top: 1px solid var(--sb-glass-border) !important;
}
.modal-title {
font-family: var(--sb-font-display) !important;
font-weight: 600 !important;
color: var(--sb-text) !important;
}
.modal-backdrop {
background-color: rgba(0, 0, 0, 0.7) !important;
}
.btn-close {
filter: invert(1) opacity(0.5) !important;
transition: opacity 0.2s !important;
}
.btn-close:hover { filter: invert(1) opacity(1) !important; }
/* ============================================================
10. DROPDOWNS
============================================================ */
.dropdown-menu {
background: var(--sb-bg-surface) !important;
backdrop-filter: var(--sb-glass-blur) !important;
border: 1px solid var(--sb-glass-border) !important;
border-radius: var(--sb-radius-md) !important;
box-shadow: var(--sb-shadow-card) !important;
padding: 6px !important;
}
.dropdown-item {
color: var(--sb-text-muted) !important;
border-radius: var(--sb-radius-sm) !important;
font-size: 14px !important;
transition: all 0.15s !important;
padding: 8px 12px !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
background: var(--sb-glass-bg) !important;
color: var(--sb-text) !important;
}
.dropdown-item.active {
background: rgba(255, 140, 66, 0.15) !important;
color: var(--sb-accent-orange) !important;
}
.dropdown-divider {
border-color: var(--sb-glass-border) !important;
}
/* ============================================================
11. ALERTAS / TOASTS
============================================================ */
.alert {
background: var(--sb-glass-bg) !important;
border: 1px solid var(--sb-glass-border) !important;
border-radius: var(--sb-radius-md) !important;
backdrop-filter: var(--sb-glass-blur) !important;
color: var(--sb-text) !important;
}
.alert-primary {
border-color: rgba(255, 140, 66, 0.3) !important;
background: rgba(255, 140, 66, 0.08) !important;
}
.alert-danger {
border-color: rgba(214, 40, 40, 0.3) !important;
background: rgba(214, 40, 40, 0.08) !important;
}
.alert-info {
border-color: rgba(107, 203, 255, 0.3) !important;
background: rgba(107, 203, 255, 0.08) !important;
}
.alert-warning {
border-color: rgba(255, 217, 61, 0.3) !important;
background: rgba(255, 217, 61, 0.08) !important;
}
.alert-success {
border-color: rgba(74, 222, 128, 0.3) !important;
background: rgba(74, 222, 128, 0.08) !important;
}
.toast {
background: var(--sb-bg-surface) !important;
border: 1px solid var(--sb-glass-border) !important;
border-radius: var(--sb-radius-md) !important;
backdrop-filter: var(--sb-glass-blur) !important;
color: var(--sb-text) !important;
}
.toast-header {
background: rgba(255, 255, 255, 0.04) !important;
border-bottom: 1px solid var(--sb-glass-border) !important;
color: var(--sb-text) !important;
}
/* ============================================================
12. PAGINAÇÃO
============================================================ */
.pagination .page-link {
background: var(--sb-glass-bg) !important;
border: 1px solid var(--sb-glass-border) !important;
color: var(--sb-text-muted) !important;
border-radius: var(--sb-radius-sm) !important;
margin: 0 2px !important;
transition: all 0.2s !important;
}
.pagination .page-link:hover {
background: rgba(255, 255, 255, 0.1) !important;
color: var(--sb-text) !important;
border-color: rgba(255, 255, 255, 0.2) !important;
}
.pagination .page-item.active .page-link {
background: linear-gradient(135deg, var(--sb-accent-orange), var(--sb-accent-red)) !important;
border-color: transparent !important;
color: #fff !important;
}
.pagination .page-item.disabled .page-link {
opacity: 0.3 !important;
}
/* ============================================================
13. TABS
============================================================ */
.nav-tabs {
border-bottom: 1px solid var(--sb-glass-border) !important;
}
.nav-tabs .nav-link {
color: var(--sb-text-muted) !important;
border: none !important;
border-bottom: 2px solid transparent !important;
border-radius: 0 !important;
font-size: 14px !important;
font-weight: 500 !important;
padding: 10px 16px !important;
transition: all 0.2s !important;
}
.nav-tabs .nav-link:hover {
color: var(--sb-text) !important;
border-color: rgba(255, 140, 66, 0.3) !important;
background: transparent !important;
}
.nav-tabs .nav-link.active {
color: var(--sb-accent-orange) !important;
border-color: var(--sb-accent-orange) !important;
background: transparent !important;
font-weight: 600 !important;
}
.tab-content {
padding-top: 20px !important;
}
/* ============================================================
14. ACCORDION
============================================================ */
.accordion-item {
background: var(--sb-glass-bg) !important;
border: 1px solid var(--sb-glass-border) !important;
border-radius: var(--sb-radius-md) !important;
margin-bottom: 8px !important;
overflow: hidden !important;
}
.accordion-button {
background: transparent !important;
color: var(--sb-text) !important;
font-family: var(--sb-font-body) !important;
font-weight: 500 !important;
box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
color: var(--sb-accent-orange) !important;
background: rgba(255, 140, 66, 0.05) !important;
}
.accordion-button::after {
filter: invert(1) opacity(0.5) !important;
}
.accordion-button:not(.collapsed)::after {
filter: invert(60%) sepia(80%) saturate(500%) hue-rotate(340deg) !important;
}
.accordion-body {
color: var(--sb-text) !important;
}
/* ============================================================
15. SCROLLBAR customizada
============================================================ */
::-webkit-scrollbar {
width: 6px;
height: 6px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(255, 140, 66, 0.3);
border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(255, 140, 66, 0.55);
}
/* ============================================================
16. UTILITÁRIOS CUSTOM do Songbook
(classes extras que podem ser usadas no markup)
============================================================ */
/* Efeito glass genérico */
.sb-glass {
background: var(--sb-glass-bg) !important;
backdrop-filter: var(--sb-glass-blur) !important;
border: 1px solid var(--sb-glass-border) !important;
border-radius: var(--sb-radius-lg) !important;
}
/* Orbs animados de fundo — adicionar no layout raiz */
.sb-bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.sb-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.22; animation: sb-float 8s ease-in-out infinite; }
.sb-orb-1 { width: 500px; height: 500px; background: #d62828; top: -100px; left: -100px; animation-delay: 0s; }
.sb-orb-2 { width: 400px; height: 400px; background: #ff8c42; bottom: 100px; right: -80px; animation-delay: -3s; }
.sb-orb-3 { width: 350px; height: 350px; background: #0ea5e9; top: 40%; left: 40%; animation-delay: -5s; }
.sb-orb-4 { width: 300px; height: 300px; background: #ffd93d; bottom: -80px; left: 30%; animation-delay: -2s; }
@keyframes sb-float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, -20px) scale(1.05); }
66% { transform: translate(-15px, 15px) scale(0.97); }
}
/* Fade-up de entrada */
.sb-fade-up {
animation: sb-fadeUp 0.5s ease backwards;
}
@keyframes sb-fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
/* Texto muted no tema */
.sb-text-muted { color: var(--sb-text-muted) !important; }
/* Gradiente no texto */
.sb-gradient-text {
background: linear-gradient(135deg, var(--sb-accent-orange), var(--sb-accent-red));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Tags de categoria */
.sb-tag {
display: inline-block;
padding: 3px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 500;
}
.sb-tag-orange { background: rgba(255,140,66,0.15); color: var(--sb-accent-orange); border: 1px solid rgba(255,140,66,0.25); }
.sb-tag-red { background: rgba(214,40,40,0.15); color: var(--sb-accent-red); border: 1px solid rgba(214,40,40,0.25); }
.sb-tag-cyan { background: rgba(107,203,255,0.15);color: var(--sb-accent-cyan); border: 1px solid rgba(107,203,255,0.25); }
.sb-tag-yellow { background: rgba(255,217,61,0.15); color: var(--sb-accent-yellow); border: 1px solid rgba(255,217,61,0.25); }
.sb-tag-muted { background: rgba(255,255,255,0.07);color: var(--sb-text-muted); border: 1px solid var(--sb-glass-border); }
/* Números de destaque (stat cards) */
.sb-stat-num {
font-family: 'Inter', sans-serif !important;
font-size: 18px !important;
font-weight: 300 !important;
line-height: 1 !important;
letter-spacing: 0.5px !important;
color: var(--sb-text) !important;
}