c97746fd83
Right column shows a looping cause-and-effect animation: cladm console selects projects one by one, then Claude Code terminals cascade in with spring-bounce animation showing the real welcome screen. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
134 lines
3.0 KiB
CSS
134 lines
3.0 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme inline {
|
|
--color-bg: #0f0f0f;
|
|
--color-surface: #1a1a1a;
|
|
--color-surface-2: #222222;
|
|
--color-border: #333333;
|
|
--color-accent: #e07850;
|
|
--color-accent-dark: #c45e3a;
|
|
--color-text: #e8e8e8;
|
|
--color-dim: #777777;
|
|
--color-green: #73daca;
|
|
--color-yellow: #e0af68;
|
|
--color-cyan: #7dcfff;
|
|
--color-magenta: #bb9af7;
|
|
--font-pixel: "Silkscreen", monospace;
|
|
--font-mono: "JetBrains Mono", "Geist Mono", monospace;
|
|
}
|
|
|
|
body {
|
|
background: #0f0f0f;
|
|
color: #e8e8e8;
|
|
}
|
|
|
|
/* Pixel-perfect rendering */
|
|
.pixel-render {
|
|
image-rendering: pixelated;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: crisp-edges;
|
|
}
|
|
|
|
/* Brutalist scrollbar */
|
|
::-webkit-scrollbar { width: 12px; }
|
|
::-webkit-scrollbar-track { background: #0f0f0f; border-left: 3px solid #333; }
|
|
::-webkit-scrollbar-thumb { background: #e07850; border: 3px solid #0f0f0f; }
|
|
|
|
/* Scanline overlay */
|
|
.scanlines {
|
|
position: relative;
|
|
}
|
|
.scanlines::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(
|
|
0deg, transparent, transparent 2px,
|
|
rgba(0,0,0,0.06) 2px, rgba(0,0,0,0.06) 4px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Pixel border using box-shadow */
|
|
.pixel-border {
|
|
box-shadow:
|
|
4px 0 0 0 #333, -4px 0 0 0 #333,
|
|
0 4px 0 0 #333, 0 -4px 0 0 #333,
|
|
4px 4px 0 0 #333, -4px 4px 0 0 #333,
|
|
4px -4px 0 0 #333, -4px -4px 0 0 #333;
|
|
}
|
|
.pixel-border-accent {
|
|
box-shadow:
|
|
4px 0 0 0 #e07850, -4px 0 0 0 #e07850,
|
|
0 4px 0 0 #e07850, 0 -4px 0 0 #e07850,
|
|
4px 4px 0 0 #e07850, -4px 4px 0 0 #e07850,
|
|
4px -4px 0 0 #e07850, -4px -4px 0 0 #e07850;
|
|
}
|
|
|
|
/* Blinking cursor */
|
|
@keyframes blink {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0; }
|
|
}
|
|
.cursor-blink { animation: blink 1s step-end infinite; }
|
|
|
|
/* Float for mascots */
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0px); }
|
|
50% { transform: translateY(-8px); }
|
|
}
|
|
.float { animation: float 3s ease-in-out infinite; }
|
|
.float-delay { animation: float 3s ease-in-out 0.7s infinite; }
|
|
.float-delay-2 { animation: float 3s ease-in-out 1.4s infinite; }
|
|
|
|
/* Terminal cascade */
|
|
@keyframes cascadeIn {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(50px) scale(0.88);
|
|
}
|
|
65% {
|
|
opacity: 1;
|
|
transform: translateY(-6px) scale(1.015);
|
|
}
|
|
82% {
|
|
transform: translateY(2px) scale(0.997);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0) scale(1);
|
|
}
|
|
}
|
|
@keyframes cascadeGlow {
|
|
0%, 100% { border-color: #333333; }
|
|
50% { border-color: #e07850; }
|
|
}
|
|
@keyframes flash {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
.cascade-flash {
|
|
animation: flash 0.3s ease-in-out 2;
|
|
}
|
|
.cascade-in {
|
|
animation: cascadeIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
|
|
}
|
|
.cascade-glow {
|
|
animation: cascadeIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both,
|
|
cascadeGlow 2s ease-in-out 1.2s infinite;
|
|
}
|
|
|
|
/* Key cap */
|
|
.keycap {
|
|
display: inline-block;
|
|
padding: 1px 7px;
|
|
background: #1a1a1a;
|
|
border: 2px solid #333;
|
|
border-bottom-width: 4px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.7rem;
|
|
line-height: 1.5;
|
|
color: #e8e8e8;
|
|
}
|