109 lines
1.9 KiB
CSS
109 lines
1.9 KiB
CSS
/*
|
|
BB Web Solutions - Custom Styles
|
|
*/
|
|
|
|
/* --- General & Typography --- */
|
|
body {
|
|
background-color: #111827; /* Dark base */
|
|
color: #F9FAFB; /* Off-white text */
|
|
font-family: 'Inter', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
h1, h2, h3, .navbar-brand {
|
|
font-family: 'Poppins', sans-serif;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.lead {
|
|
font-weight: 400;
|
|
color: rgba(249, 250, 251, 0.8);
|
|
}
|
|
|
|
/* --- Layout & Spacing --- */
|
|
.page-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1140px;
|
|
}
|
|
|
|
/* --- Header / Navbar --- */
|
|
.navbar-brand {
|
|
font-size: 1.75rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* --- Hero Section --- */
|
|
.hero-section {
|
|
padding: 8rem 0;
|
|
background: linear-gradient(170deg, #111827 0%, #1a253a 100%);
|
|
}
|
|
|
|
.hero-section .display-3 {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.hero-section .lead {
|
|
margin-bottom: 2rem;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
|
|
/* --- Buttons --- */
|
|
.btn-primary {
|
|
background-color: #3B82F6; /* Vibrant Blue */
|
|
border-color: #3B82F6;
|
|
padding: 0.75rem 2rem;
|
|
font-weight: 600;
|
|
font-family: 'Poppins', sans-serif;
|
|
transition: background-color 0.2s ease-in-out, transform 0.2s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #2563EB;
|
|
border-color: #2563EB;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* --- Services Section --- */
|
|
.services-section {
|
|
background-color: #1a253a;
|
|
color: #F9FAFB;
|
|
}
|
|
|
|
.services-section h2 {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.service-card {
|
|
background-color: #111827;
|
|
padding: 2.5rem 2rem;
|
|
border-radius: 0.5rem;
|
|
height: 100%;
|
|
border: 1px solid rgba(255,255,255,0.05);
|
|
}
|
|
|
|
.service-card h3 {
|
|
color: #10B981; /* Emerald Green Highlight */
|
|
font-weight: 600;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
|
|
/* --- Contact Section --- */
|
|
.contact-section {
|
|
background-color: #111827;
|
|
}
|
|
|
|
.contact-section .contact-number {
|
|
font-size: 2.5rem;
|
|
font-weight: 700;
|
|
color: #3B82F6; /* Vibrant Blue */
|
|
} |