<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Lambda Favicon Concepts</title>
<style>
body {
background: #121212;
font-family: 'JetBrains Mono', monospace, monospace;
color: #ccc;
display: flex;
gap: 48px;
padding: 48px;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.concept {
width: 128px;
height: 128px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
gap: 16px;
}
.icon {
width: 64px;
height: 64px;
display: flex;
justify-content: center;
align-items: center;
font-size: 48px;
user-select: none;
}
/* 1. Deep Dive Lambda */
.deep-dive {
background-color: #0A192F;
border-radius: 8px;
color: #00CED1;
font-weight: 700;
box-shadow:
0 0 4px #00CED1,
0 0 12px #00CED1;
}
/* 2. Ghost Lambda */
.ghost {
background-color: #F0F8FFCC; /* semi-transparent AliceBlue */
border-radius: 8px;
color: #008B8B;
font-weight: 800;
text-shadow:
0 0 1px rgba(0,0,0,0.2);
}
/* 3. Circle of Logic */
.circle {
background-color: #1E90FF;
border-radius: 50%;
color: #E0FFFF;
font-weight: 600;
}
.label {
font-size: 0.875rem;
text-align: center;
max-width: 128px;
line-height: 1.2;
user-select: none;
}
</style>
</head>
<body>
<div class="concept">
<div class="icon deep-dive">λ</div>
<div class="label">Deep Dive Lambda<br><small>Dark navy background, glowing cyan λ</small></div>
</div>
<div class="concept">
<div class="icon ghost">λ</div>
<div class="label">Ghost Lambda<br><small>Light transparent background, solid cyan λ</small></div>
</div>
<div class="concept">
<div class="icon circle">λ</div>
<div class="label">Circle of Logic<br><small>Blue circle, white/light cyan λ</small></div>
</div>
</body>
</html>
