/* christmas-theme.css
Version renforcée — prête à copier/coller.
- Garlande en overlay (aucune barre blanche)
- Neige CSS multi-couches fortement désynchronisée pour continuité
- Ajoute .layer et .micro optionnels (si tu veux plus de profondeur)
USAGE:
1) Remplace /static/css/christmas-theme.css par ce contenu.
2) Ajoute dans :
*/
/* ---------- Variables ---------- */
:root{
--garland-height: 96px;
--xmas-bg-top: #fffdf6;
--xmas-bg-bottom: #f0f7ff;
--flake-1: rgba(255,255,255,0.98);
--flake-2: rgba(255,255,255,0.9);
--flake-3: rgba(255,255,255,0.82);
--snow-z: 180;
--garland-overlap: 0px;
}
/* ---------- Reset minimal ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
position: relative;
height: 100%;
}
/* ---------- Theme background ---------- */
body.xmas-theme {
background: linear-gradient(180deg, var(--xmas-bg-top) 0%, var(--xmas-bg-bottom) 100%) fixed;
color: #222;
overflow-x: hidden;
}
/* ---------- Garland (absolute overlay at top of body) ---------- */
.xmas-garland {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: var(--garland-height);
pointer-events: none;
background-repeat: no-repeat;
background-position: top center;
background-size: contain;
z-index: 220;
transform-origin: top center;
margin: 0;
padding: 0;
transform: translateY(calc(var(--garland-overlap) * -1));
background-image: url("data:image/svg+xml;utf8,\
\
\
\
");
}
/* Push header content so it isn't hidden under the garland */
header {
position: relative;
z-index: 200;
margin: 0;
padding-top: var(--garland-height);
}
/* Remove possible top margins that could create gaps */
h1, h2, h3, .site-title { margin-top: 0; }
.header-flex, .container.header-flex { margin-top: 0 !important; padding-top: 0 !important; }
/* ---------- SNOW: continuous, desynchronized layers ---------- */
.xmas-snow {
position: fixed;
inset: 0;
pointer-events: none;
z-index: var(--snow-z);
overflow: hidden;
will-change: transform, opacity, background-position;
transform: translateZ(0);
backface-visibility: hidden;
/* fine base layer */
background-image:
radial-gradient(circle at 3% 7%, var(--flake-1) 0.7px, rgba(255,255,255,0) 1px),
radial-gradient(circle at 24% 32%, var(--flake-2) 1.1px, rgba(255,255,255,0) 1px),
radial-gradient(circle at 46% 12%, var(--flake-1) 0.9px, rgba(255,255,255,0) 1px);
background-size: 120px 120px, 180px 180px, 140px 140px;
opacity: 0.78;
/* Combined animations: vertical movement + slow drift (desynced) */
animation:
snowVerticalMain 58s linear infinite,
snowDriftMain 46s linear infinite;
animation-delay: -13s, -7s;
animation-fill-mode: both;
}
/* middle flakes */
.xmas-snow::before {
content: "";
position: absolute;
left: 0; top: 0;
width: 240%; height: 240%;
background-image:
radial-gradient(circle at 12% 18%, var(--flake-1) 2.8px, rgba(255,255,255,0) 4px),
radial-gradient(circle at 38% 46%, var(--flake-2) 2.4px, rgba(255,255,255,0) 4px),
radial-gradient(circle at 72% 24%, var(--flake-1) 3.2px, rgba(255,255,255,0) 5px);
background-size: 360px 360px, 340px 340px, 420px 420px;
opacity: 0.95;
filter: blur(0.12px);
animation:
snowVerticalMid 83s linear infinite,
snowDriftMid 61s linear infinite;
animation-delay: -23s, -17s;
animation-fill-mode: both;
}
/* large, slow flakes */
.xmas-snow::after {
content: "";
position: absolute;
left: 0; top: 0;
width: 300%; height: 300%;
background-image:
radial-gradient(circle at 10% 60%, var(--flake-1) 5.2px, rgba(255,255,255,0) 7px),
radial-gradient(circle at 46% 22%, var(--flake-2) 4.4px, rgba(255,255,255,0) 6px);
background-size: 560px 560px, 520px 520px;
opacity: 0.92;
filter: blur(0.45px);
animation:
snowVerticalLarge 131s linear infinite,
snowDriftLarge 97s linear infinite;
animation-delay: -41s, -29s;
animation-fill-mode: both;
}
/* optional inner layers (if HTML contains
) */
.xmas-snow .layer {
position: absolute;
left: 0; top: 0;
width: 220%; height: 220%;
background-image:
radial-gradient(circle at 6% 36%, var(--flake-2) 1.0px, rgba(255,255,255,0) 2px),
radial-gradient(circle at 29% 8%, var(--flake-1) 0.9px, rgba(255,255,255,0) 2px);
background-size: 160px 160px, 180px 180px;
opacity: 0.46;
mix-blend-mode: screen;
animation:
snowVerticalLayer 47s linear infinite,
snowDriftLayer 33s linear infinite;
animation-delay: -5s, -3s;
animation-fill-mode: both;
}
.xmas-snow .micro {
position: absolute;
left: 0; top: 0;
width: 160%; height: 160%;
background-image:
radial-gradient(circle at 8% 28%, var(--flake-3) 0.8px, rgba(255,255,255,0) 1.6px);
background-size: 120px 120px;
opacity: 0.36;
animation:
snowVerticalMicro 29s linear infinite,
snowDriftMicro 21s linear infinite;
animation-delay: -2s, -1s;
animation-fill-mode: both;
}
/* ---------- Keyframes: vertical travel long distance (no visible reset) ---------- */
@keyframes snowVerticalMain {
0% { transform: translate3d(-6%, -220vh, 0); }
100% { transform: translate3d(6%, 420vh, 0); }
}
@keyframes snowVerticalMid {
0% { transform: translate3d(10%, -260vh, 0); }
100% { transform: translate3d(-8%, 520vh, 0); }
}
@keyframes snowVerticalLarge {
0% { transform: translate3d(-12%, -320vh, 0); }
100% { transform: translate3d(10%, 640vh, 0); }
}
@keyframes snowVerticalLayer {
0% { transform: translate3d(4%, -200vh, 0); }
100% { transform: translate3d(-4%, 360vh, 0); }
}
@keyframes snowVerticalMicro {
0% { transform: translate3d(-8%, -160vh, 0); }
100% { transform: translate3d(8%, 320vh, 0); }
}
/* ---------- Keyframes: drift (background-position + small translateX) ---------- */
@keyframes snowDriftMain {
0% { background-position: 0 0; transform: translate3d(-6%, -220vh, 0) translateX(0); }
25% { background-position: 20% 60vh; transform: translate3d(-2%, -40vh, 0) translateX(8px); }
50% { background-position: 40% 180vh; transform: translate3d(2%, 40vh, 0) translateX(-6px); }
75% { background-position: 60% 300vh; transform: translate3d(-1%, 140vh, 0) translateX(4px); }
100% { background-position: 100% 420vh; transform: translate3d(6%, 420vh, 0) translateX(0); }
}
@keyframes snowDriftMid {
0% { background-position: 0 0; transform: translate3d(10%, -260vh, 0) translateX(0); }
33% { background-position: 30% 80vh; transform: translate3d(6%, -40vh, 0) translateX(12px); }
66% { background-position: 60% 200vh; transform: translate3d(-6%, 60vh, 0) translateX(-8px); }
100% { background-position: 100% 520vh; transform: translate3d(-8%, 520vh, 0) translateX(0); }
}
@keyframes snowDriftLarge {
0% { background-position: 0 0; transform: translate3d(-12%, -320vh, 0) translateX(0); }
50% { background-position: 50% 240vh; transform: translate3d(2%, 120vh, 0) translateX(18px); }
100% { background-position: 100% 640vh; transform: translate3d(10%, 640vh, 0) translateX(0); }
}
@keyframes snowDriftLayer {
0% { background-position: 0 0; transform: translate3d(4%, -200vh, 0) translateX(0); }
50% { background-position: 50% 60vh; transform: translate3d(-4%, 30vh, 0) translateX(10px); }
100% { background-position: 100% 360vh; transform: translate3d(-4%, 360vh, 0) translateX(0); }
}
@keyframes snowDriftMicro {
0% { background-position: 0 0; transform: translate3d(-8%, -160vh, 0) translateX(0); }
50% { background-position: 40% 80vh; transform: translate3d(8%, 40vh, 0) translateX(6px); }
100% { background-position: 100% 320vh; transform: translate3d(8%, 320vh, 0) translateX(0); }
}
/* ---------- Accessibility: respect prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
.xmas-snow, .xmas-snow::before, .xmas-snow::after, .xmas-snow .layer, .xmas-snow .micro {
animation: none !important;
opacity: 0.06 !important;
}
}
/* ---------- Responsive tuning ---------- */
@media (max-width: 900px) {
:root { --garland-height: 80px; }
header { padding-top: var(--garland-height); }
}
@media (max-width: 640px) {
:root { --garland-height: 64px; }
header { padding-top: var(--garland-height); }
.xmas-snow::after { display: none; }
.xmas-snow .layer { display: none; }
.xmas-snow { opacity: 0.9; }
}
/* ---------- UI decorations ---------- */
.card-prod { border-radius: 14px; box-shadow: 0 10px 28px rgba(30,12,40,0.08); border:1px solid rgba(200,30,30,0.04); background: linear-gradient(180deg,#fff 0%, #fffaf7 100%); transition: transform .18s ease; }
.card-prod:hover { transform: translateY(-6px); }
.card-prod.xmas-ribbon::before { content:""; position:absolute; left:12px; top:12px; width:72px; height:24px; background: linear-gradient(90deg, #c92a2a, #d9b24a); border-radius:14px; transform:rotate(-6deg); box-shadow:0 4px 10px rgba(0,0,0,0.12); z-index:12; }
.card-prod.xmas-ribbon::after { content:"NOËL"; position:absolute; left:20px; top:8px; color:#fff; font-weight:800; font-size:12px; z-index:13; }
.logo-badge { position: relative; display:inline-block; }
.logo-badge::after { content:""; position:absolute; right:-6px; top:-6px; width:44px; height:28px; z-index:1600; background-image: url("data:image/svg+xml;utf8,\
\
"); background-size:contain; pointer-events:none; transform:rotate(-12deg); filter:drop-shadow(0 4px 10px rgba(0,0,0,0.12)); }
body:not(.xmas-theme) .logo-badge::after { display:none; }
/* End of file */