/* theme-xmas-dark.css */ /* Minimalist Dark Christmas Theme for HealthyLife */ /* Activating this theme requires adding data-theme="xmas-dark" to the or tag */ [data-theme="xmas-dark"] { /* Backgrounds: Deep Pine/Charcoal */ --color-bg-page: #0A100D; /* Extremely dark pine green/black */ --color-bg-card: #131A16; /* Slightly lighter for cards */ --color-bg-nav: #0E1511; /* Navbar */ --color-bg-footer: #080C0A; /* Footer */ /* Accents: Elegant Crimson Red & Soft Gold */ --color-accent-primary: #C62828; /* Deep elegant red */ --color-accent-hover: #D32F2F; /* Slightly brighter red for hover */ --color-link: #D4AF37; /* Metallic gold for links */ --color-link-hover: #F4D03F; /* Brighter gold */ /* Typography */ --color-text-main: #F0F4F2; /* Crisp off-white */ --color-text-muted: #84968B; /* Muted frosted green-gray */ /* Structural / Borders */ --color-border-subtle: #1E2B24; /* Dark pine border */ --color-border-focus: #2E4537; } /* ========================================= */ /* Overrides for Bootstrap Utilities */ /* ========================================= */ [data-theme="xmas-dark"] .text-dark { color: var(--color-text-main) !important; } [data-theme="xmas-dark"] .text-success { color: var(--color-accent-primary) !important; } [data-theme="xmas-dark"] .text-muted, [data-theme="xmas-dark"] .text-secondary { color: var(--color-text-muted) !important; } [data-theme="xmas-dark"] .bg-light, [data-theme="xmas-dark"] .bg-white { background-color: var(--color-bg-card) !important; } /* ========================================= */ /* Components */ /* ========================================= */ [data-theme="xmas-dark"] .card { background-color: var(--color-bg-card) !important; border-color: var(--color-border-subtle) !important; } [data-theme="xmas-dark"] .border-light-subtle { border-color: var(--color-border-subtle) !important; } /* Buttons (Red accents) */ [data-theme="xmas-dark"] .btn-success { background-color: var(--color-accent-primary); border-color: var(--color-accent-primary); color: #FFFFFF; } [data-theme="xmas-dark"] .btn-success:hover, [data-theme="xmas-dark"] .btn-success:focus, [data-theme="xmas-dark"] .btn-success:active { background-color: var(--color-accent-hover) !important; border-color: var(--color-accent-hover) !important; color: #FFFFFF !important; box-shadow: 0 0 12px rgba(198, 40, 40, 0.4); /* Subtle red glow */ } [data-theme="xmas-dark"] .btn-outline-success { color: var(--color-accent-primary); border-color: var(--color-accent-primary); } [data-theme="xmas-dark"] .btn-outline-success:hover, [data-theme="xmas-dark"] .btn-outline-success:focus, [data-theme="xmas-dark"] .btn-outline-success:active { background-color: var(--color-accent-primary) !important; border-color: var(--color-accent-primary) !important; color: #FFFFFF !important; } /* Forms */ [data-theme="xmas-dark"] .form-control, [data-theme="xmas-dark"] .form-select { background-color: var(--color-bg-card); border-color: var(--color-border-subtle); color: var(--color-text-main); } [data-theme="xmas-dark"] .form-control:focus { background-color: var(--color-bg-card); border-color: var(--color-accent-primary); color: var(--color-text-main); box-shadow: 0 0 0 0.25rem rgba(198, 40, 40, 0.25); } [data-theme="xmas-dark"] .form-control::placeholder { color: var(--color-text-muted); } /* Navbar */ [data-theme="xmas-dark"] .navbar-light .navbar-nav .nav-link { color: var(--color-text-muted); } [data-theme="xmas-dark"] .navbar-light .navbar-nav .nav-link:hover, [data-theme="xmas-dark"] .navbar-light .navbar-nav .nav-link.active { color: var(--color-link); /* Gold for active/hover */ text-shadow: 0 0 8px rgba(212, 175, 55, 0.3); /* Subtle gold glow */ } [data-theme="xmas-dark"] .navbar-brand, [data-theme="xmas-dark"] .site-title a { color: var(--color-text-main); } /* Dropdowns */ [data-theme="xmas-dark"] .dropdown-menu { background-color: var(--color-bg-nav); border-color: var(--color-border-subtle); } [data-theme="xmas-dark"] .dropdown-item { color: var(--color-text-main); } [data-theme="xmas-dark"] .dropdown-item:hover { background-color: var(--color-bg-card); color: var(--color-link); } [data-theme="xmas-dark"] hr { border-color: var(--color-border-subtle) !important; } [data-theme="xmas-dark"] .carousel-control-prev-icon, [data-theme="xmas-dark"] .carousel-control-next-icon { filter: invert(1) sepia(100%) saturate(500%) hue-rotate(330deg) brightness(1.5) !important; } /* ========================================= */ /* Minimalist Snowfall Effect */ /* ========================================= */ @keyframes snowFall { 0% { background-position: 0px 0px, 0px 0px, 0px 0px; } 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; } } [data-theme="xmas-dark"] body { /* Minimalist snow effect: tiny dots moving slowly in the background */ background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 100px 100px, 50px 50px; background-position: 0 0, 25px 25px; animation: snowFall 60s linear infinite; }