Moved old project components to this new project
This commit is contained in:
@@ -0,0 +1,236 @@
|
||||
/* --- Page Layout & Height Logic --- */
|
||||
.services-page {
|
||||
padding: 40px 4rem;
|
||||
background-color: var(--bar-bg);
|
||||
/* CALC: Viewport height minus header (92px) and footer (50px) */
|
||||
min-height: calc(100vh - 142px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.services-page {
|
||||
padding: 40px 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Header Section --- */
|
||||
.services-header {
|
||||
text-align: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.services-header h1 {
|
||||
font-size: 3rem;
|
||||
color: var(--brand-blue);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.payoff-text {
|
||||
color: var(--payoff-color);
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* --- Category Navigation --- */
|
||||
.category-nav {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 50px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 500;
|
||||
padding: 10px 20px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
color: var(--payoff-color);
|
||||
}
|
||||
|
||||
.nav-btn.active {
|
||||
color: var(--brand-blue);
|
||||
text-shadow: 0 0 15px rgba(0, 150, 199, 0.5);
|
||||
}
|
||||
|
||||
/* The animated underline */
|
||||
.nav-btn.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -11px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: var(--brand-blue);
|
||||
box-shadow: 0 0 10px var(--brand-blue);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* --- Services Grid Logic --- */
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 30px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
align-items: start; /* Precents cards from stretching vertically */
|
||||
animation: fadeIn 0.4s ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* --- Service Card (Core Styling) --- */
|
||||
.service-card {
|
||||
background: rgba(10, 25, 41, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
padding: 30px; /* Text doesn't touch borders */
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* The standard hover "lift" effect */
|
||||
.service-card:not(.spotlight):hover {
|
||||
transform: translateY(-10px);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Typography Spacing */
|
||||
.service-card h3 {
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.4rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
color: var(--brand-blue);
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 25px; /* Space between description and benefits */
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* The inline SVG icons */
|
||||
.service-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
flex-shrink: 0; /* Prevents squishing */
|
||||
}
|
||||
|
||||
/* --- Color Variances by Category --- */
|
||||
|
||||
/* 1. Software Development (Default palette) */
|
||||
.icon-dev {
|
||||
fill: #48cae4;
|
||||
filter: drop-shadow(0 0 5px #48cae4);
|
||||
}
|
||||
|
||||
.border-dev:hover {
|
||||
border-color: #0096c7;
|
||||
box-shadow: 0 10px 30px rgba(0, 150, 199, 0.15);
|
||||
}
|
||||
|
||||
.icon-dev + .benefit-arrow {
|
||||
color: #0096c7;
|
||||
text-shadow: 0 0 5px #0096c7;
|
||||
}
|
||||
|
||||
/* 2. Infrastructure (Green palette) */
|
||||
.icon-infra {
|
||||
fill: #06d6a0;
|
||||
filter: drop-shadow(0 0 5px #06d6a0);
|
||||
}
|
||||
|
||||
.border-infra:hover {
|
||||
border-color: #06d6a0;
|
||||
box-shadow: 0 10px 30px rgba(6, 214, 160, 0.15);
|
||||
}
|
||||
|
||||
/* 3. Expert (Purple palette) */
|
||||
.icon-expert {
|
||||
fill: #f72585;
|
||||
filter: drop-shadow(0 0 5px #f72585);
|
||||
}
|
||||
|
||||
.border-expert:hover {
|
||||
border-color: #b5179e;
|
||||
box-shadow: 0 10px 30px rgba(181, 23, 158, 0.15);
|
||||
}
|
||||
|
||||
/* --- Spotlight Card (Enterprise Turn-Key) --- */
|
||||
.spotlight {
|
||||
border: 1px solid #ffd700;
|
||||
background: linear-gradient(145deg, rgba(255, 215, 0, 0.05), rgba(0, 18, 25, 1));
|
||||
}
|
||||
|
||||
.spotlight:hover {
|
||||
box-shadow: 0 15px 35px rgba(255, 215, 0, 0.15);
|
||||
}
|
||||
|
||||
.spotlight h3 {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.icon-gold {
|
||||
fill: #ffd700;
|
||||
filter: drop-shadow(0 0 8px #ffd700);
|
||||
}
|
||||
|
||||
/* --- Refactored Bullet Point Logic --- */
|
||||
.service-benefits {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-top: 20px;
|
||||
margin-top: auto; /* Pushes list to the bottom */
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.service-benefits li {
|
||||
font-size: 0.9rem;
|
||||
color: var(--payoff-color);
|
||||
margin-bottom: 12px;
|
||||
padding-left: 25px; /* Creates gutter for the absolute bullet */
|
||||
/* FIX: Set positioning context to ensure ::before stays inside the li */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Custom glowing bullet point */
|
||||
.service-benefits li::before {
|
||||
content: '→';
|
||||
position: absolute;
|
||||
left: 0; /* Aligns within the li gutter */
|
||||
top: 0; /* Vertically aligns with text start */
|
||||
/* These specific colors should match the card category (set via JS if needed) */
|
||||
color: var(--brand-blue);
|
||||
font-weight: bold;
|
||||
text-shadow: 0 0 5px var(--brand-blue);
|
||||
}
|
||||
|
||||
/* Specific color override for the Spotlight card bullets */
|
||||
.spotlight .service-benefits li::before {
|
||||
color: #ffd700;
|
||||
text-shadow: 0 0 5px #ffd700;
|
||||
}
|
||||
Reference in New Issue
Block a user