/* Lifezum – Christmas Theme (final) Scope: add class "theme-christmas" on to activate. Strong but tasteful changes: evergreen headers, berry accents, warm-gold highlights, gentle paper-like sections, and optional falling snow (canvas) living behind content. */ /* 1) Color system overrides */ body.theme-christmas { --brand-primary: #0e5a3a; /* Evergreen */ --brand-primary-ink: #083322; --brand-accent: #b2262e; /* Berry red */ --brand-accent-ink: #6d0f14; --brand-gold: #caa75a; /* Warm gold */ --brand-ink: #0f1a16; --brand-black: #0c0f0e; --dawn-rose: #f5e9ea; --dawn-sun: #f0e0b8; --dawn-peach: #f4e4dc; --dawn-sea: #e3f0e9; --dawn-stone: #ecebe6; --dawn-tint: #eaf3e8; --bg: #f7f7f2; /* paper */ --line: #d8d6cf; --muted: #5a655f; --muted-ink: #3b433f; } /* 2) Page background & header */ body.theme-christmas { background: radial-gradient(1200px 700px at 10% -10%, #eef6f3 0%, #f7f7f2 40%, #f7f7f2 100%); color: var(--brand-ink); } body.theme-christmas header.site-header, body.theme-christmas .site-header { background: linear-gradient(180deg, rgba(14,90,58,0.96) 0%, rgba(14,90,58,0.90) 70%, rgba(14,90,58,0.85) 100%); color: #fff; border-bottom: 1px solid rgba(255,255,255,0.12); backdrop-filter: saturate(120%) blur(4px); } body.theme-christmas .site-header a, body.theme-christmas .site-header .nav a { color: #fff; } body.theme-christmas .site-header .nav a.cta, body.theme-christmas nav a.cta { background: var(--brand-gold); color: #1f1406; border-radius: 999px; padding: .45rem .9rem; } /* 3) Headings and links */ body.theme-christmas h1, body.theme-christmas h2, body.theme-christmas h3 { color: var(--brand-primary); } body.theme-christmas a { color: var(--brand-accent); } body.theme-christmas a:hover { color: #8f1e25; } /* 4) Cards & sections */ body.theme-christmas section { margin-block: clamp(24px, 4vw, 44px); } body.theme-christmas .card { background: #fffdfa; border: 1px solid var(--line); box-shadow: 0 6px 22px rgba(18, 34, 29, 0.08); } body.theme-christmas .card.feature.--brand { background: linear-gradient(180deg, #0e5a3a 0%, #0c4c31 100%); color: #fdfcf9; border-color: rgba(255,255,255,0.18); } /* 5) Buttons */ body.theme-christmas .btn { background: var(--brand-accent); color: #fff; border: 1px solid #9c1f26; } body.theme-christmas .btn:hover { filter: brightness(0.95); } body.theme-christmas .btn.out { background: transparent; color: var(--brand-accent); border-color: currentColor; } body.theme-christmas .btn.out:hover { background: rgba(178,38,46,0.08); } /* 6) Feature pills, badges */ body.theme-christmas .pill { background: rgba(202,167,90,0.18); color: #5a420e; border: 1px solid rgba(202,167,90,0.5); } /* 7) Footer */ body.theme-christmas footer.site-footer, body.theme-christmas .site-footer { background: linear-gradient(180deg, #0a3f29 0%, #072a1c 100%); color: #e9efe9; border-top: 1px solid rgba(255,255,255,0.12); } body.theme-christmas .site-footer a { color: #e9efe9; } body.theme-christmas .site-footer .muted { color: #cfe1d7; } /* 8) Night-anim accents */ body.theme-christmas .na-seg.--on { background: var(--brand-primary); } body.theme-christmas .na-seg.--motion { background: #b2262e; } body.theme-christmas .na-axis .tick { background: rgba(14,90,58,0.18); } body.theme-christmas .na-axis .tick-label { color: var(--muted); } /* 9) Snow canvas lives behind all content */ #snow-layer { position: fixed; z-index: 0; /* behind sections but above body background */ inset: 0; pointer-events: none; opacity: 0.9; } /* ensure stacking context – push content above */ body.theme-christmas #app-root, body.theme-christmas main, body.theme-christmas .wrap, body.theme-christmas section, body.theme-christmas header, body.theme-christmas footer { position: relative; z-index: 1; } /* 10) Reduce motion */ @media (prefers-reduced-motion: reduce) { #snow-layer { display: none !important; } } /* === CHRISTMAS THEME === */ .theme-christmas, section.theme-christmas { /* brand + base */ --brand-primary: #0b5a3b; /* deep pine */ --brand-primary-contrast: #ffffff; --brand-accent: #b91c1c; /* holly red */ --bg: #f6f7f4; /* page bg */ --card-bg: #faf9f6; --line: rgba(0,0,0,.12); /* subtle tints used in cards/sections (yours already use these vars) */ --dawn-rose: #f2e8e6; --dawn-sun: #f4e1b5; --dawn-peach: #f5e4d9; --dawn-sea: #e0efe9; --dawn-stone: #e9eadf; --dawn-tint: #e9f2e7; } /* Buttons, pills, links pick up theme vars */ .theme-christmas .btn:not(.out), section.theme-christmas .btn:not(.out) { background: var(--brand-primary); color: var(--brand-primary-contrast); } .theme-christmas .btn.out, section.theme-christmas .btn.out { border-color: var(--brand-primary); color: var(--brand-primary); } .theme-christmas a, section.theme-christmas a { color: var(--brand-primary); } /* Cards and feature surfaces lean warmer in christmas */ .theme-christmas .card, section.theme-christmas .card { background: var(--card-bg); border: 1px solid var(--line); } /* Optional: a very soft section backdrop gradient */ section.theme-christmas { background: linear-gradient(180deg, rgba(11,90,59,0.05), rgba(185,28,28,0.05)); } .lz-snow-host { position: relative; } .lz-snow-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; /* behind content */ } .lz-snow-content { position: relative; z-index: 1; /* your normal content wrapper */ } /* Julekampanje */ .xmas-campaign .wrap { display:grid; gap:10px; } .xmas-banner { width:100%; aspect-ratio: 16/6; border-radius:16px; background: center/cover no-repeat var(--dawn-tint); box-shadow: 0 6px 20px rgba(0,0,0,.08); } .xmas-promo { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; border-radius:12px; background: linear-gradient(90deg,var(--brand-primary), var(--brand-primary-2, #2aa4)); color:#fff; font-weight:700; } .xmas-promo.--emph { filter: saturate(1.2) contrast(1.05); } .xmas-promo .disc { background: rgba(255,255,255,.14); padding:4px 8px; border-radius:999px; } .xmas-promo .code { background:#fff; color:#111; padding:4px 8px; border-radius:8px; } .xmas-promo .txt { opacity:.95; } .xmas-countdown { font-variant-numeric: tabular-nums; font-weight:800; color:var(--brand-primary); } .xmas-cta { margin-top:6px; } .xmas-cta .btn { min-width: 200px; }