.page-content { position: relative; min-height: 100vh; background: url("../images/8-keajaiban-sawit-1.png") center/cover no-repeat; overflow: hidden; } .page-content::before { content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: center; filter: blur(10px) saturate(.95); transform: scale(1.1); z-index: 0; pointer-events: none; opacity: 0.95; } .page-content::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0.35); z-index: 1; pointer-events: none; } /* system dark preference */ @media (prefers-color-scheme: dark) { .page-content::after { background: rgba(0,0,0,0.45); } .page-content::before { filter: blur(10px) brightness(.6) saturate(.9); } } /* support explicit dark-mode classes used by some themes */ body.dark .page-content::after, body.dark-mode .page-content::after, .dark-mode .page-content::after, .dark .page-content::after { background: rgba(0,0,0,0.45); } /* support theme toggle via data-bs-theme on (app.js toggles this) */ html[data-bs-theme="dark"] .page-content::after, [data-bs-theme="dark"] .page-content::after { background: rgba(0,0,0,0.45); } html[data-bs-theme="dark"] .page-content::before, [data-bs-theme="dark"] .page-content::before { filter: blur(10px) brightness(.6) saturate(.9); } html[data-bs-theme="light"] .page-content::after, [data-bs-theme="light"] .page-content::after { background: rgba(255, 255, 255, 0.45); } html[data-bs-theme="light"] .page-content::before, [data-bs-theme="light"] .page-content::before { filter: blur(10px) brightness(1.05) saturate(.95); } .page-content > * { position: relative; z-index: 2; } .footer { position: relative; z-index: 3; } /* footer fix – keep at bottom and span full width regardless of sidebar */ .footer.fixed-bottom { left: 0 !important; right: 0 !important; width: 100% !important; } .container-fluid { background: transparent !important; }