/* ========================================================================== base.css · casca comum a todas as páginas reset, tipografia base, acentos, sidebar off-canvas e regras de impressão ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-print-color-adjust: exact; print-color-adjust: exact; } body { background: #0A0A0A; color: #F2F2EF; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* -------------------------------------------------------------------------- Acentos Cada página escolhe sua identidade com uma classe no . --jc cor do acento · --js fundo translúcido · --jb borda translúcida -------------------------------------------------------------------------- */ .accent-green { --jc: #3FA37C; --js: rgba(63,163,124,0.10); --jb: rgba(63,163,124,0.45); } .accent-indigo { --jc: #5465FF; --js: rgba(84,101,255,0.10); --jb: rgba(84,101,255,0.45); } /* -------------------------------------------------------------------------- Sidebar off-canvas · CSS puro, sem JavaScript O irmão anterior controla o estado aberto/fechado. -------------------------------------------------------------------------- */ .nav-toggle { position: absolute; opacity: 0; pointer-events: none; } .sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 216px; background: #000; border-right: 1px solid #1E1E1E; padding: 28px 20px; z-index: 50; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .25s ease; } .nav-toggle:checked ~ .sidebar { transform: translateX(0); } .sidebar .brand { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; color: #fff; text-decoration: none; display: block; } .sidebar .brand span { color: #3FA37C; } .sidebar .brand-sub { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; color: #6E7B72; margin: 6px 0 26px; } .sidebar a.nav-item { display: block; text-decoration: none; color: #A9B3AC; font-size: 13px; padding: 10px 12px; border-radius: 9px; margin-bottom: 4px; border-left: 3px solid transparent; transition: background .12s ease, color .12s ease; } .sidebar a.nav-item:hover { background: #141414; color: #fff; } .sidebar a.nav-item.active { background: #141414; color: #fff; border-left-color: #3FA37C; font-weight: 700; } .sidebar .side-foot { margin-top: auto; font-size: 9.5px; color: #55605A; line-height: 1.6; } .nav-btn { position: fixed; top: 14px; left: 14px; z-index: 60; width: 40px; height: 40px; border-radius: 10px; background: #000; border: 1.5px solid #262B26; color: #3FA37C; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s ease, color .12s ease, left .25s ease; } .nav-btn:hover { background: #151715; } .nav-btn svg { width: 20px; height: 20px; } .nav-toggle:checked ~ .nav-btn { left: 184px; color: #F2F2EF; } @media print { .sidebar, .nav-btn { display: none; } }