/* =========================== TEMA BASE / VARIÁVEIS =========================== */ :root{ /* Paleta Facebook / Portal */ --fb-primary:#1877f2; --fb-primary-dark:#0b5ed7; --fb-bg:#e9ebf5; /* Tema claro (default) */ --bg-body:#e4e6eb; --bg-card:#ffffff; --text-main:#111827; --text-muted:#6b7280; --nav-bg:#1877f2; --nav-border:transparent; } /* Tema escuro (global) – controlado pelo data-theme no */ [data-theme="dark"]{ --bg-body:#020617; --bg-card:#0f172a; --text-main:#e5e7eb; --text-muted:#9ca3af; --nav-bg:#1877f2; /* mantém barra azul */ --nav-border:transparent; } /* =========================== GLOBAL =========================== */ *{ box-sizing:border-box; } html, body{ min-height:100vh; margin:0; padding:0; } body{ padding-top:90px; /* por causa da navbar fixa */ font-family:system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--text-main); background-color:var(--bg-body); background-image: url('../back/bg_portal_default.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } /* camada de transparência */ body::before{ content:""; position:fixed; inset:0; background:#006dfb00; /*rgba(0,0,0,0.65);*/ pointer-events:none; z-index:-1; } /* modo dark → escurece um pouco menos */ [data-theme="dark"]::before{ background:rgba(0,0,0,0.45); } .text-muted{ color:var(--text-muted) !important; } /* Wrapper pra telas internas (ex: boletim) */ .container-wrapper{ min-height:100vh; } /* Rodapé fixo/estilo */ .fixed-footer{ font-size:0.8rem; color:var(--text-muted); } /* =========================== NAVBAR – ESTILO FACEBOOK =========================== */ .navbar{ min-height:80px; background: linear-gradient(90deg,#1877f2,#166fe5,#1558b3); border-bottom:none; box-shadow:0 2px 8px rgba(0,0,0,.35); } .navbar .navbar-brand, .navbar .navbar-brand span, .navbar .nav-link, .navbar .portal-tagline, .navbar .navbar-brand small{ color:#ffffff !important; } .navbar .nav-link:hover{ color:#dbeafe !important; } .navbar-toggler{ border-color:rgba(255,255,255,.5); } .navbar-toggler-icon{ filter:invert(1); } .navbar-brand span{ font-weight:800; letter-spacing:0.05em; text-transform:uppercase; font-size:0.9rem; } /* Frasinha do topo (“Conexão escola + família…”) */ .portal-tagline{ font-size:0.85rem; color:#fff; opacity:.85; } /* =========================== HERO / ÁREA ESQUERDA INDEX =========================== */ .hero{ padding:40px 0 10px; } .hero-left{ position:relative; border-radius:18px; padding:24px; overflow:hidden; background:rgba(255,255,255,.9); } [data-theme="dark"] .hero-left{ background:rgba(15,23,42,.92); } .hero-left-inner{ position:relative; z-index:2; } .hero-title{ font-size:2.2rem; font-weight:800; color:var(--text-main); } .hero-subtitle{ font-size:1rem; color:var(--text-muted); max-width:520px; } .badge-escola{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.09em; border-radius:999px; padding:5px 12px; background:#ffffff; color:#1d4ed8; font-weight:700; } /* =========================== LOGIN CARD =========================== */ .card-login{ border-radius:20px; box-shadow:0 18px 40px rgba(15,23,42,.18); border:none; background:var(--bg-card); color:var(--text-main); } [data-theme="dark"] .card-login{ box-shadow:0 18px 40px rgba(0,0,0,.5); } .card-login .form-control{ border-radius:999px; padding-left:45px; background:var(--bg-card); color:var(--text-main); border-color:rgba(148,163,184,.6); } [data-theme="dark"] .card-login .form-control{ background:#020617; border-color:#374151; color:var(--text-main); } .form-icon{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#9ca3af; } /* Pills de papéis (Aluno / Responsável / Professor) */ .pill-role{ font-size:0.75rem; border-radius:999px; padding:5px 10px; margin-right:6px; } .pill-role i{ margin-right:3px; } /* =========================== DASHBOARD CARDS =========================== */ .dash-card{ border-radius:16px; border:none; box-shadow:0 10px 25px rgba(15,23,42,.15); background:var(--bg-card); color:var(--text-main); } [data-theme="dark"] .dash-card{ box-shadow:0 10px 25px rgba(0,0,0,.65); } .dash-card-icon{ font-size:2rem; opacity:.9; } .dash-card a{ text-decoration:none; font-weight:600; } /* =========================== BOTÕES / TEMA TOGGLE =========================== */ /* Botão PRINCIPAL degradê (login, entrar) */ .btn-primary{ background: linear-gradient(135deg,#1b74e4,#166fe5); border:none; box-shadow:0 4px 14px rgba(23,95,224,.45); color:#fff!important; } .btn-primary:hover{ filter:brightness(1.05); } .btn-primary:active{ transform:scale(.97); } /* Botões degradê extra */ .btn-success{ background: linear-gradient(135deg,#0f9d58,#0b7541); border:none; color:#fff!important; box-shadow:0 4px 14px rgba(4,120,87,.45); } .btn-danger{ background: linear-gradient(135deg,#d93025,#a10c05); border:none; color:#fff!important; box-shadow:0 4px 14px rgba(185,28,28,.45); } /* Botão de tema (Light/Dark) – versão única */ .theme-toggle-btn{ border-radius:20px; border:none; padding:6px 12px; display:flex; align-items:center; gap:4px; font-size:0.8rem; background:rgba(255,255,255,.18); color:#ffffff; cursor:pointer; } .theme-toggle-btn:hover{ background:rgba(255,255,255,.25); } [data-theme="dark"] .theme-toggle-btn{ background:rgba(15,23,42,0.4); color:#f9fafb; } /* Efeito glass */ .glass{ backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); background:rgb(0 118 243 / 0%); border-radius:18px; border:1px solid rgba(255,255,255,.4); } [data-theme="dark"] .glass{ background:rgba(15,23,42,.55); border-color:rgba(255,255,255,.08); } /* =========================== BOLETIM – TABELA =========================== */ .card-boletim{ border-radius:18px; box-shadow:0 14px 30px rgba(15,23,42,.18); border:none; background:#fffefe21; } /* container com scroll horizontal */ .table-wrap{ overflow:auto; max-width:100%; border:1px solid rgba(0,0,0,.08); border-radius:12px; } table.grade-notas{ table-layout:fixed; min-width:1100px; margin:0; background:#ffffff; } .grade-notas th{ font-size:12px; text-transform:uppercase; padding:7px 6px; white-space:nowrap; } .grade-notas td{ padding:6px 6px; vertical-align:middle; font-size:12px; } /* Coluna da disciplina “sticky” */ .disc-col{ width:260px; min-width:260px; max-width:260px; position:sticky; left:0; background:#fff; z-index:3; } .disc-badge{ display:inline-block; max-width:230px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Cores SUB / TOTAL / MÉDIA */ .td-sub{ background:#ffd24f !important; /* amarelo */ color:#fff !important; font-weight:900; text-align:center; } .td-total{ background:#10b7a9 !important; /* verde água */ color:#fff !important; font-weight:900; text-align:center; } .td-media{ background:#e37373 !important; /* vermelho suave */ color:#fff !important; font-weight:900; text-align:center; } .badge-ano{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; } /* =========================== NAVBAR VIVA / LOGO =========================== */ .viva-navbar{ height:80px; background:#1877f2; /* azul facebook */ display:flex; align-items:center; box-shadow:0 4px 10px rgba(0,0,0,.15); z-index:1000; } /* LOGO redonda */ .viva-logo{ width:48px; height:48px; object-fit:cover; border-radius:50%; /* redondo */ border:2px solid rgba(255,255,255,.7); background:#fff; } /* título portal */ .viva-title{ font-weight:600; font-size:15px; line-height:1.1; } /* ======================== NAVBAR MOBILE (SANFONA) ======================== */ @media (max-width: 991.98px) { #navPortal{ background:#000; /* Fundo preto tipo app */ padding:12px 10px; border-radius:0 0 12px 12px; box-shadow:0 8px 24px rgba(0,0,0,.6); } #navPortal .nav-item{ margin-bottom:6px; } #navPortal .btn, #navPortal .badge, #navPortal button{ width:100%; text-align:center; } #navPortal .portal-tagline{ color:#fff!important; opacity:.8; } }