SuperAdmin1: Create modern homepage CSS with gradients and animations

2025-10-19T08:43:21Z

Create modern homepage CSS with gradients and animations

New page

/* CEO.wiki Homepage Styles - Modern, Professional Design */

.homepage-container {
max-width: 1200px;
margin: 0 auto;
padding: 0;
}

/* Hero Section */
.homepage-hero {
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 50%, #60a5fa 100%);
color: #ffffff;
padding: 80px 40px;
border-radius: 20px;
margin: -20px 0 40px 0;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 20px 60px rgba(30, 58, 138, 0.4);
animation: fadeIn 0.8s ease-out;
}

.homepage-hero::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
animation: heroShimmer 8s infinite;
}

@keyframes heroShimmer {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
50% { transform: translate(20px, 20px) rotate(180deg); }
}

.hero-content {
position: relative;
z-index: 1;
}

.hero-title {
font-size: 64px;
font-weight: 900;
margin: 0 0 20px 0;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
letter-spacing: -1px;
}

.hero-subtitle {
font-size: 28px;
font-weight: 600;
margin: 0 0 15px 0;
opacity: 0.95;
}

.hero-description {
font-size: 18px;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}

/* Feature Cards */
.homepage-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin: 50px 0;
}

.feature-card {
background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
padding: 30px 25px;
border-radius: 16px;
text-align: center;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.08),
0 2px 8px rgba(0, 0, 0, 0.04);
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid #e5e7eb;
animation: fadeInUp 0.6s ease-out;
animation-fill-mode: both;
}

.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }
.feature-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

.feature-card:hover {
transform: translateY(-8px);
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.12),
0 4px 12px rgba(0, 0, 0, 0.06);
}

.feature-icon {
font-size: 48px;
margin-bottom: 15px;
display: block;
}

.feature-card h3 {
font-size: 20px;
font-weight: 700;
color: #1e3a8a;
margin: 0 0 12px 0;
}

.feature-card p {
font-size: 15px;
color: #6b7280;
line-height: 1.6;
margin: 0;
text-align: center;
}

/* Section Styles */
.homepage-section {
margin: 60px 0;
padding: 40px;
background: linear-gradient(145deg, #ffffff 0%, #f9fafb 100%);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.section-title {
font-size: 36px;
font-weight: 800;
color: #1e3a8a;
text-align: center;
margin: 0 0 40px 0;
position: relative;
padding-bottom: 20px;
}

.section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 4px;
background: linear-gradient(90deg, transparent 0%, #3b82f6 50%, transparent 100%);
border-radius: 2px;
}

/* Content Grid */
.content-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}

.content-card {
background: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
border-left: 4px solid #3b82f6;
transition: transform 0.2s ease;
}

.content-card:hover {
transform: translateX(4px);
}

.content-card h3 {
font-size: 22px;
font-weight: 700;
color: #1e3a8a;
margin: 0 0 20px 0;
border-bottom: 2px solid #e5e7eb;
padding-bottom: 12px;
}

.content-card ul {
list-style: none;
padding: 0;
margin: 0;
}

.content-card li {
margin-bottom: 12px;
padding-left: 20px;
position: relative;
}

.content-card li::before {
content: '→';
position: absolute;
left: 0;
color: #3b82f6;
font-weight: 700;
}

.content-card a {
color: #3b82f6;
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
}

.content-card a:hover {
color: #1e40af;
}

/* Difference Grid */
.difference-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}

.difference-item {
background: #ffffff;
padding: 25px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.difference-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.difference-item h4 {
font-size: 18px;
font-weight: 700;
color: #1e3a8a;
margin: 0 0 12px 0;
}

.difference-item p {
font-size: 15px;
color: #6b7280;
line-height: 1.6;
margin: 0;
text-align: justify;
}

/* Highlight Section */
.highlight-section {
background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
border: 2px solid #3b82f6;
}

/* Search Container */
.search-container {
max-width: 700px;
margin: 0 auto;
}

.homepage-search {
display: flex;
gap: 15px;
align-items: center;
}

.search-input {
flex: 1;
padding: 18px 24px;
font-size: 16px;
border: 2px solid #e5e7eb;
border-radius: 12px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
background: #ffffff;
}

.search-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.search-button {
padding: 18px 36px;
font-size: 16px;
font-weight: 700;
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
color: #ffffff;
border: none;
border-radius: 12px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.search-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

/* Footer */
.homepage-footer {
text-align: center;
padding: 40px 20px;
color: #6b7280;
border-top: 2px solid #e5e7eb;
margin-top: 60px;
}

.homepage-footer p {
margin: 10px 0;
line-height: 1.8;
}

.homepage-footer a {
color: #3b82f6;
text-decoration: none;
font-weight: 500;
}

.homepage-footer a:hover {
color: #1e40af;
}

/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
.homepage-hero {
padding: 50px 20px;
}

.hero-title {
font-size: 42px;
}

.hero-subtitle {
font-size: 20px;
}

.hero-description {
font-size: 16px;
}

.homepage-section {
padding: 25px 20px;
}

.section-title {
font-size: 28px;
}

.homepage-search {
flex-direction: column;
}

.search-button {
width: 100%;
}
}

/* Print Styles */
@media print {
.homepage-hero {
background: #1e3a8a !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}

.feature-card,
.content-card,
.difference-item {
box-shadow: none;
border: 1px solid #e5e7eb;
}
}

CEO.wiki:Homepage.css - Revision history

SuperAdmin1: Create modern homepage CSS with gradients and animations