/* ═══════════════════════════════════════════════════════════════════
CAMPFIRE THEME — shared pixel-art aesthetic
═══════════════════════════════════════════════════════════════════
Knight-resting-by-a-fire mood: cool teal night + warm orange bloom.
Used by: login.html, index.html, lab.html.
HOW TO EXTEND
─────────────
New page? Do this:
1.
2.
3.
...your content here...
To add just the scene backdrop (no stage wrapper): omit .cf-stage.
To use palette/components only (no scene): omit .cf-scene block.
═══════════════════════════════════════════════════════════════════ */
:root {
/* ─── CAMPFIRE PALETTE ─── */
--cf-night-0: #0a1420; /* deep night, near-black teal */
--cf-night-1: #132032; /* midnight blue base */
--cf-night-2: #1d3048; /* lighter night (sky band) */
--cf-night-3: #2a4260; /* night highlight (moonlit stone) */
--cf-stone-0: #3a3329; /* stone shadow */
--cf-stone-1: #554a38; /* stone mid (block fill) */
--cf-stone-2: #6e604a; /* stone highlight (top of block) */
--cf-stone-3: #8a7858; /* stone bright edge (firelight-lit) */
--cf-grass-0: #0f2010; /* grass shadow */
--cf-grass-1: #1d3a1e; /* grass mid */
--cf-grass-2: #2e5a2e; /* grass bright (near fire) */
--cf-bark-0: #2a1810; /* tree bark shadow */
--cf-bark-1: #4a2e1a; /* tree bark */
--cf-leaves-0: #183018; /* leaf shadow */
--cf-leaves-1: #2a5028; /* leaf mid */
--cf-leaves-2: #3d7038; /* leaf highlight */
--cf-fire-core: #fff6c8; /* white-hot center */
--cf-fire-hot: #ffc050; /* yellow flame */
--cf-fire-mid: #ff8020; /* orange flame */
--cf-fire-cool: #d04020; /* red flame edge */
--cf-ember: #ff6020; /* ember spark */
--cf-window: #ff9040; /* tower window glow */
--cf-star: #e8e8ff; /* star white-blue */
/* ─── UI TOKENS ─── */
--cf-bg: var(--cf-night-1);
--cf-surface: rgba(20, 30, 46, 0.85); /* panel bg over scene */
--cf-surface-2: rgba(30, 44, 64, 0.9);
--cf-border: #5a4a30; /* firelit bronze */
--cf-border-2: #8a6b3a; /* firelit gold */
--cf-gold: #e2b96f; /* warm gold text */
--cf-gold-hot: #ffcf80; /* highlight gold */
--cf-text: #f0e6d3; /* parchment */
--cf-muted: #8a7a60; /* weathered */
--cf-accent: #ff9f43; /* ember accent */
--cf-danger: #c0392b;
--cf-success: #5ab87a;
--cf-arcane: #9b6dff; /* lab/arcane purple */
--cf-font: 'Press Start 2P', ui-monospace, monospace;
}
/* ═══════════════════════════════════════════════════════════════════
BASE
═══════════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
.cf-body {
min-height: 100vh;
background: var(--cf-night-0);
color: var(--cf-text);
font-family: var(--cf-font);
image-rendering: pixelated;
overflow-x: hidden;
position: relative;
}
.cf-stage {
position: relative;
z-index: 2;
min-height: 100vh;
}
/* Pixelated canvases globally */
.cf-body canvas { image-rendering: pixelated; }
/* ═══════════════════════════════════════════════════════════════════
SCENE — fixed pixel-art backdrop
═══════════════════════════════════════════════════════════════════
Two modes:
(1) CANVAS SCENE (preferred) — JS engine renders to .cf-scene-canvas.
Pages use:
+
(2) CSS FALLBACK — legacy div-based scene if JS disabled. Elements
below (.cf-stars, .cf-tower, .cf-ruins, etc) still work.
═══════════════════════════════════════════════════════════════════ */
/* Canvas-rendered scene (fills viewport, sits behind all content) */
.cf-scene-canvas {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 0;
pointer-events: none;
image-rendering: pixelated;
image-rendering: crisp-edges;
background: var(--cf-night-0); /* shown while engine loads */
}
/* Legacy CSS scene wrapper (fallback / transitional) */
.cf-scene {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
background:
/* ground band */
linear-gradient(
to bottom,
var(--cf-night-0) 0%,
var(--cf-night-1) 45%,
var(--cf-night-2) 60%,
var(--cf-grass-0) 62%,
var(--cf-grass-1) 100%
);
}
/* Ambient firelight glow — warm radial bloom from center-bottom */
.cf-scene::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 900px;
height: 600px;
transform: translateX(-50%);
background: radial-gradient(
ellipse at center,
rgba(255, 140, 40, 0.35) 0%,
rgba(255, 100, 30, 0.18) 25%,
rgba(255, 80, 20, 0.06) 50%,
transparent 75%
);
animation: cf-bloom 3.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes cf-bloom {
0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}
/* Distant pine tree silhouettes (upper background) */
.cf-scene::after {
content: '';
position: absolute;
left: 0; right: 0; top: 35%;
height: 80px;
background-image:
/* jagged pine silhouettes via repeating triangles */
linear-gradient(135deg, transparent 46%, #081418 46%, #081418 54%, transparent 54%),
linear-gradient(45deg, transparent 46%, #081418 46%, #081418 54%, transparent 54%);
background-size: 60px 80px, 60px 80px;
background-position: 0 100%, 30px 100%;
background-repeat: repeat-x;
opacity: 0.85;
pointer-events: none;
}
/* ─── STARS ─── */
.cf-stars {
position: absolute;
inset: 0 0 55% 0;
background-image:
radial-gradient(1px 1px at 5% 15%, var(--cf-star), transparent),
radial-gradient(1px 1px at 12% 32%, var(--cf-star), transparent),
radial-gradient(1px 1px at 22% 8%, var(--cf-star), transparent),
radial-gradient(1px 1px at 33% 22%, rgba(232,232,255,0.6), transparent),
radial-gradient(1px 1px at 44% 4%, var(--cf-star), transparent),
radial-gradient(1px 1px at 56% 18%, var(--cf-star), transparent),
radial-gradient(1px 1px at 66% 35%, rgba(232,232,255,0.5), transparent),
radial-gradient(1px 1px at 77% 10%, var(--cf-star), transparent),
radial-gradient(1px 1px at 88% 26%, var(--cf-star), transparent),
radial-gradient(1px 1px at 95% 5%, var(--cf-star), transparent),
radial-gradient(1px 1px at 15% 40%, rgba(232,232,255,0.4), transparent),
radial-gradient(1px 1px at 72% 42%, rgba(232,232,255,0.6), transparent);
animation: cf-twinkle 4s ease-in-out infinite alternate;
}
@keyframes cf-twinkle {
0% { opacity: 0.55; }
100% { opacity: 1; }
}
/* ─── TOWER (right side, with glowing window) ─── */
.cf-tower {
position: absolute;
right: 8%;
bottom: 36%;
width: 88px;
height: 180px;
background:
/* battlements (tiny blocks on top) */
linear-gradient(to right,
var(--cf-stone-1) 0 12px, transparent 12px 24px,
var(--cf-stone-1) 24px 36px, transparent 36px 48px,
var(--cf-stone-1) 48px 60px, transparent 60px 72px,
var(--cf-stone-1) 72px 88px) top/100% 12px no-repeat,
/* stone texture */
repeating-linear-gradient(0deg,
var(--cf-stone-1) 0 15px,
var(--cf-stone-0) 15px 16px),
repeating-linear-gradient(90deg,
transparent 0 20px,
rgba(0,0,0,0.25) 20px 21px);
box-shadow:
inset 2px 0 0 var(--cf-stone-2), /* left edge highlight (firelit) */
inset -2px 0 0 var(--cf-stone-0),
4px 0 0 rgba(0,0,0,0.4);
image-rendering: pixelated;
}
/* Tower window (glowing) */
.cf-tower::before {
content: '';
position: absolute;
top: 45px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 22px;
background: var(--cf-window);
border-radius: 7px 7px 0 0;
box-shadow:
0 0 12px var(--cf-window),
0 0 24px rgba(255, 144, 64, 0.6),
0 0 40px rgba(255, 120, 40, 0.3);
animation: cf-window-flicker 2.8s ease-in-out infinite;
}
@keyframes cf-window-flicker {
0%, 100% { opacity: 1; }
45% { opacity: 0.88; }
55% { opacity: 1; }
78% { opacity: 0.92; }
}
/* ─── RUINS (low stone wall, left-center behind fire) ─── */
.cf-ruins {
position: absolute;
left: 50%;
bottom: 30%;
width: 280px;
height: 80px;
transform: translateX(-65%);
background:
/* uneven top edge — broken wall */
linear-gradient(to right,
var(--cf-stone-1) 0 40px, transparent 40px 50px,
var(--cf-stone-1) 50px 110px, transparent 110px 125px,
var(--cf-stone-1) 125px 200px, transparent 200px 215px,
var(--cf-stone-1) 215px 280px) top/100% 10px no-repeat,
/* stone block texture */
repeating-linear-gradient(0deg,
var(--cf-stone-1) 0 16px,
var(--cf-stone-0) 16px 18px),
repeating-linear-gradient(90deg,
transparent 0 32px,
rgba(0,0,0,0.28) 32px 34px);
box-shadow:
inset 0 2px 0 var(--cf-stone-2),
inset 0 -3px 0 var(--cf-stone-0);
/* Warm firelight tint on the side facing fire */
filter: brightness(1.05);
}
/* Firelit highlight on the fire-facing edge of ruins */
.cf-ruins::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
ellipse at 30% 100%,
rgba(255, 140, 50, 0.28) 0%,
transparent 55%
);
pointer-events: none;
}
/* ─── TREES (foreground silhouettes) ─── */
.cf-tree {
position: absolute;
bottom: 0;
width: 140px;
height: 90%;
pointer-events: none;
}
.cf-tree--left { left: -30px; }
.cf-tree--right { right: -30px; transform: scaleX(-1); }
/* Trunk */
.cf-tree::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 28px;
height: 70%;
transform: translateX(-50%);
background:
linear-gradient(to right,
var(--cf-bark-0) 0 6px,
var(--cf-bark-1) 6px 22px,
var(--cf-bark-0) 22px 28px);
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
/* Foliage (layered blob) */
.cf-tree::after {
content: '';
position: absolute;
left: 50%;
top: 0;
width: 140px;
height: 60%;
transform: translateX(-50%);
background:
radial-gradient(ellipse at 30% 60%, var(--cf-leaves-1) 0 30%, transparent 32%),
radial-gradient(ellipse at 70% 40%, var(--cf-leaves-2) 0 25%, transparent 28%),
radial-gradient(ellipse at 50% 70%, var(--cf-leaves-1) 0 35%, transparent 38%),
radial-gradient(ellipse at 20% 30%, var(--cf-leaves-0) 0 22%, transparent 25%),
radial-gradient(ellipse at 80% 65%, var(--cf-leaves-0) 0 20%, transparent 23%);
filter: contrast(1.1);
}
/* ─── GRASS (foreground) ─── */
.cf-grass {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 30%;
background:
linear-gradient(to bottom,
transparent 0%,
var(--cf-grass-0) 15%,
var(--cf-grass-1) 60%,
var(--cf-grass-0) 100%);
pointer-events: none;
}
/* Flower/ember pixels scattered in grass */
.cf-grass::before {
content: '';
position: absolute;
inset: 20% 0 0 0;
background-image:
radial-gradient(1px 1px at 8% 40%, var(--cf-ember), transparent),
radial-gradient(1px 1px at 18% 70%, #ffcc60, transparent),
radial-gradient(1px 1px at 28% 55%, var(--cf-ember), transparent),
radial-gradient(1px 1px at 38% 80%, #ffdd80, transparent),
radial-gradient(1px 1px at 62% 65%, var(--cf-ember), transparent),
radial-gradient(1px 1px at 72% 45%, #ffcc60, transparent),
radial-gradient(1px 1px at 84% 75%, var(--cf-ember), transparent),
radial-gradient(1px 1px at 92% 50%, #ffdd80, transparent),
radial-gradient(2px 1px at 48% 90%, var(--cf-grass-2), transparent),
radial-gradient(2px 1px at 55% 60%, var(--cf-grass-2), transparent);
opacity: 0.8;
}
/* ═══════════════════════════════════════════════════════════════════
CAMPFIRE — animated flame + sparks
═══════════════════════════════════════════════════════════════════ */
.cf-fire {
position: absolute;
left: 50%;
bottom: 14%;
width: 60px;
height: 60px;
transform: translateX(-50%);
pointer-events: none;
}
/* Log pile base (rocks) */
.cf-fire::before {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 64px;
height: 14px;
transform: translateX(-50%);
background:
radial-gradient(ellipse at 15% 50%, #3a3028 0 30%, transparent 32%),
radial-gradient(ellipse at 45% 60%, #4a3a28 0 30%, transparent 32%),
radial-gradient(ellipse at 75% 50%, #3a3028 0 30%, transparent 32%);
}
/* Ground scorch glow */
.cf-fire::after {
content: '';
position: absolute;
left: 50%;
bottom: -8px;
width: 110px;
height: 24px;
transform: translateX(-50%);
background: radial-gradient(
ellipse at center,
rgba(255, 160, 60, 0.6) 0%,
rgba(255, 100, 30, 0.25) 40%,
transparent 70%
);
filter: blur(1px);
}
/* Inner bright glow */
.cf-fire__glow {
position: absolute;
left: 50%;
bottom: 6px;
width: 42px;
height: 34px;
transform: translateX(-50%);
background: radial-gradient(
circle at center,
var(--cf-fire-core) 0%,
var(--cf-fire-hot) 30%,
var(--cf-fire-mid) 55%,
transparent 80%
);
border-radius: 50%;
animation: cf-glow-pulse 0.6s ease-in-out infinite alternate;
filter: blur(0.5px);
}
@keyframes cf-glow-pulse {
0% { transform: translateX(-50%) scale(1); opacity: 1; }
100% { transform: translateX(-50%) scale(1.08); opacity: 0.92; }
}
/* Flame shapes — CSS triangles with flicker */
.cf-fire__flame {
position: absolute;
left: 50%;
bottom: 8px;
width: 20px;
height: 30px;
transform: translateX(-50%);
background: linear-gradient(
to top,
var(--cf-fire-cool) 0%,
var(--cf-fire-mid) 30%,
var(--cf-fire-hot) 60%,
var(--cf-fire-core) 100%
);
border-radius: 50% 50% 20% 20% / 60% 60% 20% 20%;
clip-path: polygon(50% 0%, 85% 45%, 75% 100%, 25% 100%, 15% 45%);
animation: cf-flicker 0.35s ease-in-out infinite alternate;
filter: blur(0.6px);
}
.cf-fire__flame--2 {
width: 12px;
height: 22px;
bottom: 14px;
animation-duration: 0.22s;
animation-delay: 0.1s;
opacity: 0.85;
}
@keyframes cf-flicker {
0% {
transform: translateX(-50%) scaleY(1) scaleX(1);
filter: blur(0.6px) hue-rotate(0deg);
}
50% {
transform: translateX(-48%) scaleY(1.12) scaleX(0.92);
filter: blur(0.8px) hue-rotate(-4deg);
}
100% {
transform: translateX(-52%) scaleY(0.94) scaleX(1.06);
filter: blur(0.5px) hue-rotate(3deg);
}
}
/* Rising sparks — multiple pixel dots traveling up */
.cf-fire__sparks {
position: absolute;
left: 50%;
bottom: 20px;
width: 60px;
height: 80px;
transform: translateX(-50%);
pointer-events: none;
}
.cf-fire__sparks::before,
.cf-fire__sparks::after {
content: '';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
background-image:
radial-gradient(1px 1px at 30% 90%, var(--cf-ember), transparent),
radial-gradient(1px 1px at 55% 90%, #ffcc60, transparent),
radial-gradient(1px 1px at 70% 90%, var(--cf-ember), transparent),
radial-gradient(1px 1px at 45% 90%, #ffdd80, transparent);
animation: cf-sparks 2.4s linear infinite;
}
.cf-fire__sparks::after {
background-image:
radial-gradient(1px 1px at 20% 90%, #ffcc60, transparent),
radial-gradient(1px 1px at 40% 90%, var(--cf-ember), transparent),
radial-gradient(1px 1px at 60% 90%, #ffdd80, transparent),
radial-gradient(1px 1px at 80% 90%, var(--cf-ember), transparent);
animation-duration: 3s;
animation-delay: 1.2s;
}
@keyframes cf-sparks {
0% { transform: translateY(0) translateX(0); opacity: 0; }
10% { opacity: 1; }
80% { opacity: 0.6; }
100% { transform: translateY(-90px) translateX(6px); opacity: 0; }
}
/* ═══════════════════════════════════════════════════════════════════
UI COMPONENTS — panels, buttons, inputs
═══════════════════════════════════════════════════════════════════ */
/* Panel — firelit parchment feel */
.cf-panel {
background: var(--cf-surface);
border: 3px solid var(--cf-border);
border-radius: 2px;
padding: 24px;
box-shadow:
0 0 0 2px var(--cf-night-0), /* dark outer */
inset 0 0 0 1px rgba(255, 180, 100, 0.08), /* inner firelight */
0 8px 32px rgba(0, 0, 0, 0.6),
0 0 80px rgba(255, 120, 40, 0.15); /* warm bloom */
position: relative;
}
.cf-panel--ornate {
border-color: var(--cf-border-2);
box-shadow:
0 0 0 2px var(--cf-night-0),
inset 0 0 0 1px rgba(255, 200, 120, 0.12),
0 8px 32px rgba(0, 0, 0, 0.6),
0 0 100px rgba(255, 140, 50, 0.2);
}
/* Title text — firelit gold */
.cf-title {
font-family: var(--cf-font);
color: var(--cf-gold);
text-shadow:
2px 2px 0 #000,
0 0 12px rgba(255, 160, 60, 0.5);
letter-spacing: 2px;
line-height: 1.4;
}
.cf-muted { color: var(--cf-muted); }
.cf-accent { color: var(--cf-accent); }
/* Button */
.cf-btn {
display: inline-block;
font-family: var(--cf-font);
font-size: 9px;
color: var(--cf-gold);
background: var(--cf-night-1);
border: 2px solid var(--cf-border-2);
padding: 10px 18px;
cursor: pointer;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
transition: background 0.15s, color 0.15s, transform 0.08s, box-shadow 0.2s;
image-rendering: pixelated;
-webkit-appearance: none;
}
.cf-btn:hover {
background: var(--cf-border-2);
color: #000;
box-shadow: 0 0 16px rgba(255, 160, 60, 0.4);
}
.cf-btn:active { transform: translateY(1px); }
.cf-btn--primary {
background: var(--cf-border-2);
color: #000;
box-shadow: 0 0 12px rgba(255, 160, 60, 0.35);
}
.cf-btn--primary:hover {
background: var(--cf-gold-hot);
box-shadow: 0 0 20px rgba(255, 200, 100, 0.6);
}
.cf-btn--ghost {
background: transparent;
color: var(--cf-muted);
border-color: var(--cf-border);
}
.cf-btn--ghost:hover {
color: var(--cf-danger);
border-color: var(--cf-danger);
background: transparent;
box-shadow: none;
}
/* Input — rune slot style */
.cf-input {
font-family: var(--cf-font);
font-size: 10px;
background: var(--cf-night-0);
border: 2px solid var(--cf-border);
color: var(--cf-text);
padding: 12px 14px;
width: 100%;
outline: none;
letter-spacing: 1px;
transition: border-color 0.15s, box-shadow 0.15s;
-webkit-appearance: none;
border-radius: 0;
}
.cf-input:focus {
border-color: var(--cf-border-2);
box-shadow: 0 0 12px rgba(255, 160, 60, 0.25);
}
/* Error banner */
.cf-error {
background: rgba(192, 57, 43, 0.12);
border: 2px solid rgba(192, 57, 43, 0.5);
color: #ff8070;
font-size: 8px;
padding: 10px 14px;
text-align: center;
letter-spacing: 1px;
line-height: 1.6;
}
/* Horizontal rule — weathered */
.cf-hr {
border: none;
height: 2px;
background:
linear-gradient(to right, transparent, var(--cf-border) 20%, var(--cf-border) 80%, transparent);
margin: 20px 0;
}
/* Scrollbar */
.cf-body ::-webkit-scrollbar { width: 8px; height: 8px; }
.cf-body ::-webkit-scrollbar-track { background: var(--cf-night-0); }
.cf-body ::-webkit-scrollbar-thumb { background: var(--cf-border); }
.cf-body ::-webkit-scrollbar-thumb:hover { background: var(--cf-border-2); }
/* Reduced-motion friendliness */
@media (prefers-reduced-motion: reduce) {
.cf-scene::before,
.cf-stars,
.cf-tower::before,
.cf-fire__glow,
.cf-fire__flame,
.cf-fire__sparks::before,
.cf-fire__sparks::after {
animation: none !important;
}
}
/* Small screens — scale down scene elements */
@media (max-width: 600px) {
.cf-tower { right: 4%; width: 64px; height: 130px; bottom: 40%; }
.cf-ruins { width: 200px; height: 60px; transform: translateX(-60%); }
.cf-tree { width: 100px; }
.cf-fire { width: 50px; height: 50px; bottom: 12%; }
}