:root { --primary-red: #B71C1C; --accent-gold: #FFD700; --bg-light: #FFF8F8; --sidebar-bg: #FFFFFF; } body { font-family: 'Inter', "Microsoft YaHei", sans-serif; background-color: var(--bg-light); color: #212529; position: relative; overflow-x: hidden; } /* Watermark */ .watermark { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; opacity: 0.05; display: flex; flex-wrap: wrap; justify-content: space-around; align-content: space-around; } .watermark-text { font-size: 3rem; font-weight: 900; transform: rotate(-30deg); color: var(--primary-red); white-space: nowrap; user-select: none; margin: 50px; } /* Sidebar Styling */ #sidebar { height: 100vh; box-shadow: 2px 0 10px rgba(0,0,0,0.1); background-color: var(--sidebar-bg) !important; border-right: 2px solid var(--primary-red); z-index: 100; } #sidebar .nav-link { font-weight: 600; color: #495057; padding: 12px 20px; border-radius: 8px; margin: 5px 15px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #sidebar .nav-link:hover { background-color: #fce4e4; color: var(--primary-red); transform: translateX(5px); } #sidebar .nav-link.active { background-color: var(--primary-red); color: var(--accent-gold) !important; box-shadow: 0 4px 6px rgba(183, 28, 28, 0.3); } .sidebar-heading { font-size: 0.8rem; font-weight: 800; color: var(--primary-red) !important; letter-spacing: 0.15rem; padding: 0 2rem; margin-top: 2rem !important; } /* Content Area */ main { background-color: var(--bg-light); } #content-area { min-height: 85vh; line-height: 1.8; background: white; padding: 2.5rem !important; border: none !important; box-shadow: 0 10px 30px rgba(0,0,0,0.05); border-radius: 15px; } #content-area h3 { color: var(--primary-red); font-weight: 800; margin-bottom: 1.5rem; padding-left: 15px; border-left: 5px solid var(--accent-gold); } #content-area h4 { color: var(--primary-red); font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; } #content-area h5 { color: #333; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.8rem; } /* Buttons */ .btn-primary { background-color: #0088cc !important; border: none; transition: transform 0.2s; } .btn-primary:hover { transform: scale(1.1); } .btn-danger { background-color: var(--primary-red) !important; border: none; } /* Footer */ .footer { background-color: var(--primary-red); color: var(--accent-gold); padding: 1rem 0; margin-top: 2rem; font-weight: 600; text-align: center; } /* Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: var(--primary-red); border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #880000; } /* Responsive adjustments */ @media (max-width: 767.98px) { #sidebar { height: auto; border-right: none; border-bottom: 2px solid var(--primary-red); } } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }