/* ═══════════════════════════════════════════════════════════ PECS · CAA Sistema — Design System v2.1 Shared stylesheet: animations, dark mode, skeletons, utils CORREÇÕES v2.1: removida transição wildcard que quebrava transforms; dark mode público; responsividade top-nav. ═══════════════════════════════════════════════════════════ */ /* ── Prefers Reduced Motion (Acessibilidade: utilizadores neurodivergentes / motion sickness) ── */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-delay: -1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; background-attachment: initial !important; scroll-behavior: auto !important; transition-duration: 0s !important; transition-delay: 0s !important; } } /* ── Reveal on Scroll ── */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1) !important; } .reveal.visible { opacity: 1; transform: none; } .reveal-d1 { transition-delay: 0.08s !important; } .reveal-d2 { transition-delay: 0.16s !important; } .reveal-d3 { transition-delay: 0.24s !important; } .reveal-d4 { transition-delay: 0.32s !important; } .reveal-d5 { transition-delay: 0.40s !important; } .reveal-d6 { transition-delay: 0.48s !important; } /* ── Page Enter Animation ── */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .fade-in-up { animation: fadeInUp 0.42s cubic-bezier(.4,0,.2,1) both; } .fade-in-up.d1 { animation-delay: 0.07s; } .fade-in-up.d2 { animation-delay: 0.14s; } .fade-in-up.d3 { animation-delay: 0.21s; } .fade-in-up.d4 { animation-delay: 0.28s; } /* ── Skeleton Loading ── */ @keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton { background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.6s infinite linear; border-radius: 6px; color: transparent !important; pointer-events: none; user-select: none; } .skeleton * { visibility: hidden; } .sk-line { height: 14px; margin-bottom: 8px; border-radius: 4px; } .sk-line.w75 { width: 75%; } .sk-line.w50 { width: 50%; } .sk-line.w40 { width: 40%; } .sk-circle { border-radius: 50%; } .sk-title { height: 22px; margin-bottom: 12px; border-radius: 5px; } /* ── Card Hover Lift ── */ .card-lift { transition: transform 0.22s ease, box-shadow 0.22s ease !important; } .card-lift:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(0,0,0,.10) !important; } /* ── Button Micro-interactions ── */ .btn { transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.18s ease; } .btn:active { transform: scale(0.97); } /* ── Focus ring ── */ :focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 3px; } /* ── Custom Scrollbar ── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ══════════════════════════════════════════════ DARK MODE Applied via Saved in localStorage as "caa_theme" ══════════════════════════════════════════════ */ /* Admin panel dark mode */ [data-theme="dark"] { --bg: #0f172a; --surface: #1e293b; --border: #334155; --text-primary: #f1f5f9; --text-secondary: #94a3b8; --sidebar-bg: #080f1e; --sidebar-border: #1e293b; } [data-theme="dark"] body { background: var(--bg, #0f172a) !important; color: var(--text-primary, #f1f5f9) !important; } [data-theme="dark"] #topbar { background: var(--surface, #1e293b) !important; border-bottom-color: var(--border, #334155) !important; } [data-theme="dark"] #content { background: var(--bg, #0f172a); } /* Cards */ [data-theme="dark"] .card { background: var(--surface, #1e293b) !important; border-color: var(--border, #334155) !important; } [data-theme="dark"] .card .text-muted, [data-theme="dark"] .card small { color: var(--text-secondary, #94a3b8) !important; } [data-theme="dark"] .card .fw-bold, [data-theme="dark"] .card h5, [data-theme="dark"] .card h6 { color: var(--text-primary, #f1f5f9) !important; } /* Tables */ [data-theme="dark"] .table { color: var(--text-primary, #f1f5f9); --bs-table-bg: transparent; } [data-theme="dark"] .table th { background: #080f1e; border-color: var(--border, #334155); color: var(--text-secondary, #94a3b8); } [data-theme="dark"] .table td { border-color: var(--border, #334155); } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,.025); color: var(--text-primary, #f1f5f9); } [data-theme="dark"] .table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(255,255,255,.04); color: var(--text-primary, #f1f5f9); } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background: #0f172a; border-color: var(--border, #334155); color: var(--text-primary, #f1f5f9); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background: #0f172a; color: var(--text-primary, #f1f5f9); } [data-theme="dark"] .form-control::placeholder { color: #475569; } [data-theme="dark"] .input-group-text { background: #0f172a; border-color: var(--border, #334155); color: var(--text-secondary, #94a3b8); } /* Modals */ [data-theme="dark"] .modal-content { background: var(--surface, #1e293b); border-color: var(--border, #334155); color: var(--text-primary, #f1f5f9); } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--border, #334155); } /* Dropdowns */ [data-theme="dark"] .dropdown-menu { background: var(--surface, #1e293b); border-color: var(--border, #334155); } [data-theme="dark"] .dropdown-item { color: var(--text-primary, #f1f5f9); } [data-theme="dark"] .dropdown-item:hover { background: #334155; } [data-theme="dark"] .dropdown-divider { border-color: var(--border, #334155); } /* Misc */ [data-theme="dark"] .text-muted { color: var(--text-secondary, #94a3b8) !important; } [data-theme="dark"] .border { border-color: var(--border, #334155) !important; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-light { background: var(--surface, #1e293b) !important; } [data-theme="dark"] .list-group-item { background: var(--surface, #1e293b); border-color: var(--border, #334155); color: var(--text-primary, #f1f5f9); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--text-secondary, #94a3b8); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link.active { background: var(--surface, #1e293b); border-color: var(--border, #334155); color: var(--text-primary, #f1f5f9); } [data-theme="dark"] .badge.bg-light { background: #334155 !important; color: #e2e8f0 !important; } [data-theme="dark"] .alert-info { background: #1e3a5f; border-color: #1d4ed8; color: #93c5fd; } /* Scrollbar dark */ [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* Skeleton dark */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%); background-size: 200% 100%; } /* Dark toggle btn */ [data-theme="dark"] #darkToggle:hover { background: #334155 !important; color: #f1f5f9 !important; } /* ══════════════════════════════════════════════════════════ RESPONSIVIDADE — TOP-NAV (public/index.php) ══════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .top-nav { padding: 14px 20px !important; flex-wrap: wrap; gap: 10px; } .nav-btn { padding: 7px 14px !important; font-size: .78rem !important; } } @media (max-width: 480px) { .top-nav { padding: 12px 14px !important; flex-direction: column; align-items: flex-start; gap: 8px; } .top-nav > div { width: 100%; flex-wrap: wrap; gap: 6px !important; } .nav-btn { flex: 1; text-align: center; justify-content: center; } } /* ══════════════════════════════════════════════════════════ DARK MODE — PÁGINA PÚBLICA (public/index.php) Seções com fundo branco/cinza claro ══════════════════════════════════════════════════════════ */ /* Base */ [data-theme="dark"] body { background: #0a0f1e !important; } /* Elementos compartilhados de texto */ [data-theme="dark"] .section-h2 { color: #93c5fd !important; } [data-theme="dark"] .section-tag { background: #1e3a5f !important; color: #93c5fd !important; } /* Seção Sobre */ [data-theme="dark"] #sobre { background: #0f172a !important; } [data-theme="dark"] #sobre .text-muted { color: #94a3b8 !important; } [data-theme="dark"] #sobre strong { color: #e2e8f0 !important; } [data-theme="dark"] .about-tile { background: #1e293b !important; } [data-theme="dark"] .about-tile .tile-sub { color: #94a3b8 !important; } /* Seção Fases */ [data-theme="dark"] .phases-wrap { background: #080f1e !important; } [data-theme="dark"] .phase-card { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .phase-card:hover { border-color: #3b82f6 !important; box-shadow: 0 14px 44px rgba(59,130,246,.15) !important; } [data-theme="dark"] .phase-title { color: #93c5fd !important; } [data-theme="dark"] .phase-desc { color: #94a3b8 !important; } [data-theme="dark"] .phase-num { color: #1e293b !important; } [data-theme="dark"] .text-muted { color: #94a3b8 !important; } /* Seção Benefícios (como transformar vidas) */ [data-theme="dark"] .benefit-item { background: #1e293b !important; box-shadow: 0 2px 12px rgba(0,0,0,.35) !important; } [data-theme="dark"] .benefit-item > div > div:first-child { color: #93c5fd !important; } [data-theme="dark"] .benefit-item > div > div:last-child { color: #94a3b8 !important; } /* Seções com fundo branco entre as demais */ [data-theme="dark"] section[style*="background:#fff"], [data-theme="dark"] section[style*="background: #fff"] { background: #0f172a !important; } /* Profile cards (lista de alunos) */ [data-theme="dark"] .profile-card { background: #1e293b !important; border-color: #334155 !important; } [data-theme="dark"] .profile-card:hover { border-color: #3b82f6 !important; } [data-theme="dark"] .profile-name { color: #93c5fd !important; } [data-theme="dark"] .profile-age { color: #94a3b8 !important; } /* PIN Modal */ [data-theme="dark"] #pinModal > div { background: #1e293b !important; } [data-theme="dark"] #pinModal [id="pinName"] { color: #93c5fd !important; } [data-theme="dark"] #pinModal button:not([onclick*="closePin"]):not([disabled]) { background: #1e3a5f !important; color: #93c5fd !important; box-shadow: 0 2px 8px rgba(59,130,246,.2) !important; } [data-theme="dark"] .pin-dot { background: #334155 !important; border-color: #475569 !important; } /* Overlay de carregamento */ [data-theme="dark"] #pageOverlay .ov-card, [data-theme="dark"] #pageOverlay .ov-box { background: #1e293b !important; } [data-theme="dark"] #pageOverlay .ov-label { color: #93c5fd !important; } [data-theme="dark"] #pageOverlay .ov-ring { border-color: #334155 !important; border-top-color: #3b82f6 !important; } /* Footer público */ [data-theme="dark"] footer.site-footer { background: #04060f !important; }