/** * theme-light.css * SeuEvento.Online — Tema claro, tons de azul. * * Ativação: adicione a classe "seo-tema-claro" ao da página * (feito automaticamente por admin/header_admin.php quando a página * define `$tema_claro = true;` antes do include). * * Todas as regras de componente ficam escopadas sob body.seo-tema-claro * para não afetar páginas que ainda não adotaram o tema. */ :root { --seo-primary: #1565c0; --seo-primary-dark: #0d47a1; --seo-primary-hover: #1257a6; --seo-primary-light: #e3f2fd; --seo-secondary: #42a5f5; --seo-accent: #0288d1; --seo-background: #f4f7fb; --seo-surface: #ffffff; --seo-surface-soft: #f8fafc; --seo-surface-blue: #f2f7fd; --seo-text: #1e293b; --seo-text-muted: #64748b; --seo-border: #dbe4ee; --seo-border-strong: #c7d2df; --seo-success: #198754; --seo-warning: #f59e0b; --seo-danger: #dc3545; --seo-info: #0288d1; --seo-radius-sm: 8px; --seo-radius-md: 12px; --seo-radius-lg: 18px; --seo-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06); --seo-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08); --seo-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ========================================================================== BASE ========================================================================== */ body.seo-tema-claro { background: var(--seo-background); color: var(--seo-text); font-family: var(--seo-font); } body.seo-tema-claro a:not(.btn) { color: var(--seo-primary); } body.seo-tema-claro a:not(.btn):hover { color: var(--seo-primary-hover); } body.seo-tema-claro h1, body.seo-tema-claro h2, body.seo-tema-claro h3, body.seo-tema-claro h4, body.seo-tema-claro h5, body.seo-tema-claro h6 { color: var(--seo-text); } body.seo-tema-claro .text-muted, body.seo-tema-claro .text-white-50 { color: var(--seo-text-muted) !important; } body.seo-tema-claro .container, body.seo-tema-claro .container-fluid { color: var(--seo-text); } /* ========================================================================== TOPBAR / NAVBAR ========================================================================== */ body.seo-tema-claro .seo-topbar, body.seo-tema-claro .navbar.seo-topbar { background: var(--seo-surface) !important; border-bottom: 1px solid var(--seo-border); box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04); } body.seo-tema-claro .seo-topbar .navbar-brand, body.seo-tema-claro .seo-topbar .nav-link { color: var(--seo-text) !important; } body.seo-tema-claro .seo-topbar .nav-link:hover, body.seo-tema-claro .seo-topbar .nav-link.active { color: var(--seo-primary) !important; } body.seo-tema-claro .seo-topbar .nav-link.text-info { color: var(--seo-primary) !important; } body.seo-tema-claro .seo-topbar .dropdown-menu { border: 1px solid var(--seo-border); box-shadow: var(--seo-shadow-md); } body.seo-tema-claro .seo-topbar .dropdown-item:hover, body.seo-tema-claro .seo-topbar .dropdown-item:focus { background: var(--seo-primary-light); color: var(--seo-primary-dark); } /* ========================================================================== SIDEBAR (quando existir) ========================================================================== */ body.seo-tema-claro .sidebar { background: var(--seo-surface); border-right: 1px solid var(--seo-border); } body.seo-tema-claro .sidebar .nav-link { color: var(--seo-text-muted); border-radius: 8px; margin: 2px 8px; } body.seo-tema-claro .sidebar .nav-link:hover { color: var(--seo-primary); background: var(--seo-primary-light); } body.seo-tema-claro .sidebar .nav-link.active { color: var(--seo-primary-dark); background: var(--seo-primary-light); font-weight: 600; } /* ========================================================================== CABEÇALHO DE PÁGINA (page-header) ========================================================================== */ body.seo-tema-claro .page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } body.seo-tema-claro .page-header h1, body.seo-tema-claro .page-header h2, body.seo-tema-claro .page-header h3, body.seo-tema-claro .page-header h4 { margin: 0; color: var(--seo-text); font-weight: 700; } body.seo-tema-claro .page-header p { margin: 6px 0 0; color: var(--seo-text-muted); } /* ========================================================================== CARDS ========================================================================== */ body.seo-tema-claro .seo-card, body.seo-tema-claro .card { background: var(--seo-surface); border: 1px solid var(--seo-border); border-radius: var(--seo-radius-md); box-shadow: var(--seo-shadow-sm); color: var(--seo-text); } body.seo-tema-claro .card-header { background: var(--seo-surface-soft); border-bottom: 1px solid var(--seo-border); color: var(--seo-text); font-weight: 600; } body.seo-tema-claro .card-footer { background: var(--seo-surface-soft); border-top: 1px solid var(--seo-border); } body.seo-tema-claro .card .text-muted { color: var(--seo-text-muted) !important; } /* ========================================================================== BOTÕES ========================================================================== */ body.seo-tema-claro .btn-primary { background: var(--seo-primary); border-color: var(--seo-primary); } body.seo-tema-claro .btn-primary:hover, body.seo-tema-claro .btn-primary:focus { background: var(--seo-primary-hover); border-color: var(--seo-primary-hover); } body.seo-tema-claro .btn-outline-primary { color: var(--seo-primary); border-color: var(--seo-primary); } body.seo-tema-claro .btn-outline-primary:hover { background: var(--seo-primary); border-color: var(--seo-primary); color: #fff; } body.seo-tema-claro .btn-outline-light { color: var(--seo-text); border-color: var(--seo-border-strong); } body.seo-tema-claro .btn-outline-light:hover { background: var(--seo-surface-soft); color: var(--seo-text); border-color: var(--seo-border-strong); } body.seo-tema-claro .btn-outline-secondary { color: var(--seo-text-muted); border-color: var(--seo-border-strong); } body.seo-tema-claro .btn { border-radius: var(--seo-radius-sm); } /* ========================================================================== FORMULÁRIOS ========================================================================== */ body.seo-tema-claro .form-control, body.seo-tema-claro .form-select { min-height: 42px; border: 1px solid var(--seo-border-strong); border-radius: var(--seo-radius-sm); background: var(--seo-surface); color: var(--seo-text); } body.seo-tema-claro textarea.form-control { min-height: unset; } body.seo-tema-claro .form-control::placeholder { color: var(--seo-text-muted); opacity: 1; } body.seo-tema-claro .form-control:focus, body.seo-tema-claro .form-select:focus { border-color: var(--seo-primary); box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12); } body.seo-tema-claro .form-label { color: var(--seo-text); font-weight: 600; } body.seo-tema-claro .form-text, body.seo-tema-claro .form-control ~ .text-muted { color: var(--seo-text-muted); } body.seo-tema-claro .form-check-label { color: var(--seo-text); } body.seo-tema-claro .input-group-text { background: var(--seo-surface-soft); border: 1px solid var(--seo-border-strong); color: var(--seo-text-muted); } /* ========================================================================== TABELAS ========================================================================== */ body.seo-tema-claro .table-responsive { background: var(--seo-surface); border: 1px solid var(--seo-border); border-radius: var(--seo-radius-md); box-shadow: var(--seo-shadow-sm); } body.seo-tema-claro .table { color: var(--seo-text); margin-bottom: 0; } body.seo-tema-claro .table thead th, body.seo-tema-claro .table thead.table-light th { background: var(--seo-surface-soft); color: var(--seo-text); border-bottom: 1px solid var(--seo-border); font-weight: 600; } body.seo-tema-claro .table tbody td, body.seo-tema-claro .table tbody th { color: var(--seo-text); border-color: var(--seo-border); vertical-align: middle; } body.seo-tema-claro .table-hover tbody tr:hover { background: var(--seo-surface-blue); } body.seo-tema-claro .table-bordered { border-color: var(--seo-border); } body.seo-tema-claro .table-dark { --bs-table-bg: var(--seo-surface); --bs-table-striped-bg: var(--seo-surface-soft); --bs-table-striped-color: var(--seo-text); --bs-table-active-bg: var(--seo-surface-blue); --bs-table-active-color: var(--seo-text); --bs-table-hover-bg: var(--seo-surface-blue); --bs-table-hover-color: var(--seo-text); --bs-table-color: var(--seo-text); --bs-table-border-color: var(--seo-border); color: var(--seo-text); border-color: var(--seo-border); } body.seo-tema-claro .list-group-item { background: var(--seo-surface); color: var(--seo-text); border-color: var(--seo-border); } /* ========================================================================== BADGES / STATUS ========================================================================== */ body.seo-tema-claro .badge { font-weight: 600; } body.seo-tema-claro .badge.bg-success { background-color: #e8f5ee !important; color: #146c43 !important; } body.seo-tema-claro .badge.bg-warning { background-color: #fff4d6 !important; color: #8a5b00 !important; } body.seo-tema-claro .badge.bg-danger { background-color: #fdebec !important; color: #b02a37 !important; } body.seo-tema-claro .badge.bg-secondary, body.seo-tema-claro .badge.bg-gray { background-color: #eef2f6 !important; color: #52606d !important; } body.seo-tema-claro .badge.bg-info { background-color: var(--seo-primary-light) !important; color: var(--seo-primary-dark) !important; } body.seo-tema-claro .badge.bg-dark { background-color: #eef2f6 !important; color: #334155 !important; } /* ========================================================================== ALERTAS ========================================================================== */ body.seo-tema-claro .alert { border-radius: var(--seo-radius-sm); border-width: 1px; } /* ========================================================================== MODAIS ========================================================================== */ body.seo-tema-claro .modal-content { background: var(--seo-surface); color: var(--seo-text); border: 1px solid var(--seo-border); border-radius: var(--seo-radius-md); box-shadow: var(--seo-shadow-md); } body.seo-tema-claro .modal-header, body.seo-tema-claro .modal-footer { border-color: var(--seo-border); } /* ========================================================================== CARD DE EVENTO (usado na home e em /eventos) ========================================================================== */ body.seo-tema-claro .event-chip { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .2rem .55rem; font-size: .72rem; font-weight: 700; line-height: 1.4; } body.seo-tema-claro .event-chip.tone-success { background: #e8f5ee; color: #146c43; } body.seo-tema-claro .event-chip.tone-warning { background: #fff4d6; color: #8a5b00; } body.seo-tema-claro .event-chip.tone-danger { background: #fdebec; color: #b02a37; } body.seo-tema-claro .card-chip { position: absolute; top: 8px; left: 8px; z-index: 2; } body.seo-tema-claro .card-event { background: var(--seo-surface); border: 1px solid var(--seo-border); border-radius: 10px; overflow: hidden; box-shadow: var(--seo-shadow-sm); height: 100%; position: relative; transition: transform .12s ease, box-shadow .12s ease; margin-bottom: .5rem; } body.seo-tema-claro .card-event:hover { transform: translateY(-2px); box-shadow: var(--seo-shadow-md); } body.seo-tema-claro .card-event .thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } body.seo-tema-claro .card-event .title { font-weight: 700; font-size: .85rem; margin: 0 0 .15rem; color: var(--seo-text); line-height: 1.35; } body.seo-tema-claro .card-event .meta { font-size: .75rem; color: var(--seo-text-muted); } body.seo-tema-claro .card-event .inscritos { font-size: .72rem; color: var(--seo-primary); font-weight: 600; margin-top: .25rem; } body.seo-tema-claro .card-event .card-body { padding: .75rem .85rem .9rem; } body.seo-tema-claro .card-event a.card-link { position: absolute; inset: 0; z-index: 1; text-indent: -9999px; overflow: hidden; } /* ========================================================================== RESPONSIVIDADE ========================================================================== */ @media (max-width: 767.98px) { body.seo-tema-claro .page-header { flex-direction: column; align-items: flex-start; } body.seo-tema-claro .btn { min-height: 42px; } }