117 lines
2.8 KiB
CSS
117 lines
2.8 KiB
CSS
/* CGI Studio Custom Styling */
|
|
:root {
|
|
--bg-deep: #0a0a0c;
|
|
--bg-card: #141417;
|
|
--accent-cyan: #00e5ff;
|
|
--accent-purple: #7000ff;
|
|
--text-muted: #888891;
|
|
--glass-bg: rgba(10, 10, 12, 0.8);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg-deep);
|
|
color: #f8f9fa;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.text-cyan { color: var(--accent-cyan); }
|
|
.text-purple { color: var(--accent-purple); }
|
|
|
|
.studio-navbar {
|
|
background: var(--glass-bg);
|
|
backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
padding: 1rem 0;
|
|
}
|
|
|
|
.hero-section {
|
|
padding: 140px 0 100px;
|
|
background:
|
|
radial-gradient(circle at 10% 20%, rgba(0, 229, 255, 0.05) 0%, transparent 40%),
|
|
radial-gradient(circle at 90% 80%, rgba(112, 0, 255, 0.05) 0%, transparent 40%);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.display-3 {
|
|
font-weight: 800;
|
|
letter-spacing: -2px;
|
|
}
|
|
|
|
.btn-cyan {
|
|
background: var(--accent-cyan);
|
|
color: #000;
|
|
font-weight: 700;
|
|
border: none;
|
|
padding: 14px 32px;
|
|
border-radius: 12px;
|
|
text-transform: uppercase;
|
|
font-size: 0.9rem;
|
|
letter-spacing: 0.5px;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.btn-cyan:hover {
|
|
background: #4df1ff;
|
|
box-shadow: 0 0 30px rgba(0, 229, 255, 0.4);
|
|
transform: translateY(-2px);
|
|
color: #000;
|
|
}
|
|
|
|
.project-card {
|
|
background: var(--bg-card);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
border-radius: 24px;
|
|
padding: 32px;
|
|
transition: all 0.4s ease;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.project-card:hover {
|
|
border-color: rgba(0, 229, 255, 0.3);
|
|
background: #1a1a1f;
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.stats-card {
|
|
background: rgba(255, 255, 255, 0.02);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
padding: 28px;
|
|
border-radius: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
.pipeline-badge {
|
|
padding: 6px 14px;
|
|
border-radius: 30px;
|
|
font-size: 0.7rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.badge-pre { background: rgba(136, 136, 145, 0.1); color: #888891; border: 1px solid rgba(136, 136, 145, 0.2); }
|
|
.badge-prod { background: rgba(112, 0, 255, 0.1); color: #b780ff; border: 1px solid rgba(112, 0, 255, 0.2); }
|
|
.badge-post { background: rgba(0, 229, 255, 0.1); color: #00e5ff; border: 1px solid rgba(0, 229, 255, 0.2); }
|
|
.badge-done { background: rgba(0, 255, 149, 0.1); color: #00ff95; border: 1px solid rgba(0, 255, 149, 0.2); }
|
|
|
|
.progress {
|
|
height: 8px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.progress-bar {
|
|
background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.section-title {
|
|
font-weight: 800;
|
|
margin-bottom: 2rem;
|
|
}
|