OnginjoClement/OncoBridge
Domain:
healthcareCreator:
Ong
Host:
Offering pharmaceutical care across Kenya and beyond.
OncoBridge Health Solutions - Transforming Cancer Care
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
/* Navigation */
.nav {
background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
padding: 1.2rem 5%;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.nav-content {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: bold;
color: white;
display: flex;
align-items: center;
gap: 10px;
}
.logo-icon {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
width: 45px;
height: 45px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
}
.nav-links a {
color: white;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
position: relative;
}
.nav-links a:hover {
color: #667eea;
}
.nav-links a.active {
color: #667eea;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 180px 5% 120px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml, ');
animation: float 20s linear infinite;
}
@keyframes float {
0% { transform: translateY(0); }
100% { transform: translateY(-100px); }
}
.hero-content {
position: relative;
z-index: 1;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
animation: fadeInUp 1s ease-out;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}
.hero p {
font-size: 1.4rem;
margin-bottom: 2.5rem;
opacity: 0.95;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
justify-content: center;
flex-wrap: wrap;
}
. …