diff --git a/assets/css/custom.css b/assets/css/custom.css index f6f7bad..7e104cc 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -51,22 +51,44 @@ img[src$='#floatright']{ float:right; margin: 0.7rem; } -/* Apply shared background to Project Cards and set card color */ +/* Page background with Diffusion Layer */ +body.has-bg::before { + content: ""; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url('/images/backgrounds/default.gif'); + background-size: cover; + background-position: center; + background-attachment: fixed; + background-repeat: no-repeat; + z-index: -10; + /* Diffusion / Overlay layer */ + background-color: rgba(0, 0, 0, 0.6); + background-blend-mode: overlay; + filter: blur(5px); /* This adds the diffusion */ + transform: scale(1.05); /* Avoid white edges from blur */ +} + +/* Ensure background sits behind everything */ +body.has-bg { + position: relative; + z-index: 1; +} + +/* Card background color (Default Dark Web style) */ article.relative.flex.flex-col.h-full.overflow-hidden.rounded-lg.border.border-neutral-300 { - background-image: url('/images/backgrounds/default.gif') !important; - background-size: cover !important; - background-position: center !important; - background-repeat: no-repeat !important; - /* Card background color with transparency for readability */ - background-color: rgba(255, 255, 255, 0.15) !important; - background-blend-mode: overlay !important; - border: 1px solid rgba(255, 255, 255, 0.2) !important; + background-image: none !important; /* Revert gif from cards */ + background-color: rgba(26, 26, 26, 0.9) !important; /* Dark web color */ + border: 1px solid rgba(255, 255, 255, 0.1) !important; } /* Dark mode adjustment for card background */ .dark article.relative.flex.flex-col.h-full.overflow-hidden.rounded-lg.border.border-neutral-300 { - background-color: rgba(0, 0, 0, 0.3) !important; - border: 1px solid rgba(255, 255, 255, 0.1) !important; + background-color: rgba(13, 17, 23, 0.9) !important; + border: 1px solid rgba(255, 255, 255, 0.05) !important; }