/* ==========================================================================
ZIKA COSTA — HALLOWEEN SEASON SKIN (October 2026) v2
--------------------------------------------------------------------------
A reversible LAYER, not a rewrite. Original theme untouched.
Rollback = remove the block from the page bodies; or restore the theme
from _bak/site-theme-orig-1010.tar.gz.
Palette: horror + candy. Pumpkin, blood, poison green, candy pink, bone.
========================================================================== */
:root {
--bg: #0a0611;
--bg-soft: #120a1a;
--card: #170d22;
--line: #33203f;
--amber: #ff7a1a; /* pumpkin */
--amber-hot: #ffa24d;
--cream: #f2e8d5; /* bone */
--muted: #b6a7c2;
--hw-pumpkin: #ff7a1a;
--hw-pumpkin-hot: #ffa24d;
--hw-blood: #c1121f;
--hw-poison: #74dd8b;
--hw-candy: #ff4fa3;
--hw-violet: #8b5cf6;
--hw-bone: #f2e8d5;
}
html { color-scheme: dark; }
/* ---------- body atmosphere: fog, embers, cobwebbed corners ---------- */
body {
background-color: var(--bg);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23e9dcc3' stroke-opacity='0.22' stroke-width='1.3'%3E%3Cpath d='M0 0L240 240M0 0L240 72M0 0L72 240M0 100Q70 108 132 132M100 0Q108 70 132 132M0 46Q46 46 84 84M46 0Q46 46 84 84'/%3E%3Cpath d='M44 0A44 44 0 0 1 0 44M88 0A88 88 0 0 1 0 88M132 0A132 132 0 0 1 0 132M176 0A176 176 0 0 1 0 176'/%3E%3C/g%3E%3C/svg%3E"),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 240 240'%3E%3Cg transform='translate(240,0) scale(-1,1)' fill='none' stroke='%23e9dcc3' stroke-opacity='0.18' stroke-width='1.3'%3E%3Cpath d='M0 0L240 240M0 0L240 72M0 0L72 240M0 100Q70 108 132 132M100 0Q108 70 132 132M0 46Q46 46 84 84M46 0Q46 46 84 84'/%3E%3Cpath d='M44 0A44 44 0 0 1 0 44M88 0A88 88 0 0 1 0 88M132 0A132 132 0 0 1 0 132M176 0A176 176 0 0 1 0 176'/%3E%3C/g%3E%3C/svg%3E"),
radial-gradient(3px 3px at 18% 22%, rgba(255,170,90,0.55), transparent 55%),
radial-gradient(2px 2px at 72% 12%, rgba(255,120,60,0.45), transparent 55%),
radial-gradient(2px 2px at 88% 62%, rgba(255,180,120,0.32), transparent 55%),
radial-gradient(2px 2px at 32% 78%, rgba(255,140,80,0.28), transparent 55%),
radial-gradient(2px 2px at 56% 40%, rgba(255,160,100,0.22), transparent 55%),
radial-gradient(1200px 620px at 50% -8%, rgba(255,122,26,0.16), transparent 70%),
radial-gradient(1000px 560px at 88% 6%, rgba(139,92,246,0.18), transparent 70%),
radial-gradient(1100px 720px at 8% 98%, rgba(193,18,31,0.16), transparent 72%);
background-repeat: no-repeat;
background-size: 300px 300px, 300px 300px, 100% 100%, 100% 100%, 100% 100%,
100% 100%, 100% 100%, cover, cover, cover;
background-attachment: fixed;
}
/* ---------- season ribbon (injected at top of body) ---------- */
.hw-ribbon {
display: flex; align-items: center; justify-content: center; gap: 12px;
background: linear-gradient(90deg, #1c0409, #3a0a14 50%, #1c0409);
color: #ffd9a8;
font: 600 12px/1 var(--sans, -apple-system, Helvetica, Arial, sans-serif);
letter-spacing: 0.20em; text-transform: uppercase;
padding: 9px 14px;
border-bottom: 1px solid rgba(255, 122, 26, 0.40);
position: relative; z-index: 60;
}
.hw-ribbon b { color: #ffb347; font-weight: 700; }
.hw-ribbon .hw-jack { display: inline-flex; filter: drop-shadow(0 0 6px rgba(255,122,26,0.7)); }
.hw-ribbon a { color: #ffd9a8; text-decoration: none; border-bottom: 1px solid rgba(255,211,168,0.5); }
@media (max-width: 640px) {
.hw-ribbon { font-size: 10px; letter-spacing: 0.12em; padding: 8px 10px; gap: 8px; }
}
/* ---------- header ---------- */
.site-head {
background: rgba(10, 6, 17, 0.94);
border-bottom: 1px solid rgba(255, 122, 26, 0.35);
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.55);
}
.site-head::after {
content: "";
display: block; height: 3px;
background: linear-gradient(90deg,
var(--hw-blood), var(--hw-pumpkin), #ffb347, var(--hw-bone),
#ffb347, var(--hw-pumpkin), var(--hw-blood));
opacity: 0.95;
animation: hwFlicker 5s ease-in-out infinite;
}
@keyframes hwFlicker {
0%, 100% { opacity: 0.95; }
46% { opacity: 0.72; }
54% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .site-head::after { animation: none; } }
.wordmark { color: var(--cream); text-shadow: 0 0 18px rgba(255, 122, 26, 0.5); }
.head-nav a:hover { color: var(--hw-pumpkin-hot); }
.ai-badge {
border-color: rgba(255, 122, 26, 0.75);
color: #ffd9a8;
background: rgba(255, 122, 26, 0.08);
}
/* ---------- news ribbon: blood + candy ---------- */
.newsbar {
background: linear-gradient(90deg, #2a0710 0%, #6d0f1c 50%, #2a0710 100%);
border-bottom: 1px solid rgba(255, 122, 26, 0.40);
}
.newsbar .nb-tag {
background: linear-gradient(180deg, #ff9a3c, #ff6a00);
color: #1a0e04;
}
/* ---------- hero ---------- */
.hero-img { filter: saturate(1.08) contrast(1.03); }
.hero-shade {
background: linear-gradient(180deg,
rgba(10,6,17,0.34) 0%, rgba(52,10,44,0.24) 40%, rgba(10,6,17,0.95) 100%);
}
.hero-copy h1 {
text-shadow: 0 2px 34px rgba(255, 122, 26, 0.45), 0 2px 24px rgba(0, 0, 0, 0.6);
}
.hero-badge { box-shadow: 0 0 22px rgba(255, 122, 26, 0.25); }
/* ---------- buttons ---------- */
.btn-primary {
background: linear-gradient(180deg, #ff9a3c, #ff6a00);
color: #1a0e04; font-weight: 700;
box-shadow: 0 6px 22px rgba(255, 106, 0, 0.30);
}
.btn-primary:hover {
background: linear-gradient(180deg, #ffb25e, #ff7d1a);
box-shadow: 0 0 26px rgba(255, 122, 26, 0.55);
}
.btn-ghost { border-color: rgba(242, 232, 213, 0.45); color: var(--cream); }
.btn-ghost:hover { border-color: var(--hw-pumpkin); color: var(--hw-pumpkin-hot); }
/* ---------- sections & headings ---------- */
section h2 { text-shadow: 0 0 26px rgba(255, 122, 26, 0.26); }
section h2::after {
content: ""; display: block; width: 68px; height: 3px; margin: 14px auto 0;
border-radius: 3px;
background: linear-gradient(90deg, var(--hw-pumpkin), var(--hw-candy), var(--hw-violet));
}
.lede { color: var(--muted); }
.connect { background: var(--bg-soft); border-color: var(--line); }
.connect-form input:focus,
.comment-form input:focus, .comment-form textarea:focus,
.order-form input:focus, .order-form select:focus, .order-form textarea:focus {
border-color: var(--hw-pumpkin);
}
/* ---------- cards: candy-corn cap ---------- */
.card, .print-card { background: var(--card); border-color: var(--line); }
.card { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.card::before { display: none; }
.grid .card, .prints-grid .print-card { position: relative; overflow: hidden; }
.grid .card::before, .prints-grid .print-card::before {
content: ""; display: block; position: absolute; top: 0; left: 0; right: 0;
height: 3px; z-index: 3;
background: linear-gradient(90deg, var(--hw-blood), var(--hw-pumpkin), #ffb347, var(--hw-violet));
}
.card:hover { border-color: rgba(255, 122, 26, 0.6); box-shadow: 0 0 34px rgba(255, 122, 26, 0.16); }
.like-btn:hover, .like-btn.liked { border-color: var(--hw-pumpkin); color: var(--hw-pumpkin-hot); }
/* footer candy rule */
.site-foot { border-top: none; position: relative; }
.site-foot::before {
content: ""; display: block; height: 4px; margin-bottom: 34px;
background: linear-gradient(90deg,
var(--hw-blood), var(--hw-pumpkin), #ffb347, var(--hw-bone),
#ffb347, var(--hw-pumpkin), var(--hw-blood));
opacity: 0.9;
}
.foot-social a:hover, .foot-nav a:hover { color: var(--hw-pumpkin-hot); }
/* ---------- bot lane: cool the maroon toward pumpkin/violet ---------- */
.botnav { background: rgba(10, 6, 17, 0.94); border-color: var(--line); }
.botnav .bn-links a.on,
.botnav .bn-links a.bn-game { color: var(--hw-pumpkin-hot); }
.botnav .bn-bell .bn-dot { background: var(--hw-candy); }
.bot-tile, .bot-card, .bl-demo, .bl-step, .bl-can,
.create-band, .preview-bar, .bz-post, .bz-nudge, .bz-cbox {
background: var(--card);
border-color: var(--line);
}
.bl-price { background: #1e0f14; border-color: #4a1f26; }
.chat, .bc-face { background: #0f0818; border-color: var(--line); }
.bc-bar::after { background: linear-gradient(90deg, var(--hw-pumpkin), var(--hw-violet)); }
.bl-note { border-left-color: var(--hw-pumpkin); }
.bz-cta .btn, .bz-cform button { background: linear-gradient(180deg, #ff9a3c, #ff6a00); color: #1a0e04; }