/* AI Rankia Dark Theme – Complete Homepage Transformation */
/* CSS Variables for Dark Theme */
:root {
–ai-dark-primary: #0a0a0a;
–ai-dark-secondary: #1a1a2e;
–ai-dark-accent: #16213e;
–ai-blue-primary: #4A90E2;
–ai-purple-accent: #7B68EE;
–ai-text-light: #ffffff;
–ai-text-muted: #b8c4ce;
–ai-gradient-hero: radial-gradient(ellipse at center, rgba(123, 104, 238, 0.3) 0%, rgba(74, 144, 226, 0.2) 35%, rgba(10, 10, 10, 0.9) 70%);
}
/* Global Body Styles */
body {
background: var(–ai-dark-primary) !important;
color: var(–ai-text-light) !important;
font-family: ‘Inter’, ‘Segoe UI’, -apple-system, sans-serif !important;
overflow-x: hidden;
}
/* Header and Navigation */
header, .wp-site-header {
background: rgba(10, 10, 10, 0.95) !important;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
padding: 1rem 2rem;
}
.site-title, .wp-site-title {
color: var(–ai-text-light) !important;
font-size: 1.5rem;
font-weight: 700;
text-decoration: none !important;
}
.site-title:before, .wp-site-title:before {
content: ‘⚡ ‘;
color: var(–ai-blue-primary);
}
/* Hero Section Transformation */
.hero-section {
background: var(–ai-gradient-hero), var(–ai-dark-primary) !important;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 8rem 2rem 4rem;
position: relative;
overflow: hidden;
}
.hero-section:before {
content: ”;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(123, 104, 238, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(74, 144, 226, 0.1) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(138, 43, 226, 0.05) 0%, transparent 50%);
animation: floating 8s ease-in-out infinite;
}
@keyframes floating {
0%, 100% { transform: translate(0, 0) rotate(0deg); }
33% { transform: translate(30px, -30px) rotate(1deg); }
66% { transform: translate(-20px, 20px) rotate(-1deg); }
}
/* Hero Content */
.hero-content {
position: relative;
z-index: 2;
max-width: 1000px;
margin: 0 auto;
}
.hero-title {
color: var(–ai-text-light) !important;
font-size: clamp(2.5rem, 5vw, 4rem) !important;
font-weight: 700 !important;
line-height: 1.2 !important;
margin-bottom: 1.5rem !important;
background: linear-gradient(135deg, #ffffff 0%, #b8c4ce 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
color: var(–ai-text-muted) !important;
font-size: clamp(1.2rem, 2.5vw, 1.5rem) !important;
font-weight: 400 !important;
line-height: 1.6 !important;
margin-bottom: 2.5rem !important;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* CTA Buttons */
.btn, .wp-block-button__link {
background: linear-gradient(135deg, var(–ai-blue-primary) 0%, var(–ai-purple-accent) 100%) !important;
color: white !important;
padding: 1rem 2.5rem !important;
border-radius: 50px !important;
text-decoration: none !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
border: none !important;
transition: all 0.3s ease !important;
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3) !important;
position: relative;
overflow: hidden;
display: inline-block;
margin: 0.5rem;
}
.btn:hover, .wp-block-button__link:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 25px rgba(74, 144, 226, 0.4) !important;
color: white !important;
}
/* Dashboard Image */
.dashboard-image, .dashboard-mockup img {
width: 100% !important;
max-width: 1200px !important;
border-radius: 12px !important;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 80px rgba(74, 144, 226, 0.1) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
margin-top: 3rem !important;
}
/* Sections */
.features-section, .analysis-section, .pricing-section {
background: var(–ai-dark-secondary) !important;
padding: 6rem 2rem !important;
position: relative;
}
.dark-bg {
background: var(–ai-dark-accent) !important;
}
/* Text Colors */
h1, h2, h3, h4, h5, h6 {
color: var(–ai-text-light) !important;
}
.white-text {
color: var(–ai-text-light) !important;
}
p, span, div {
color: var(–ai-text-muted) !important;
}
/* Feature Cards */
.feature-card, .service-card, .pricing-card, .insight-card {
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
padding: 2rem !important;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
margin-bottom: 2rem;
}
.feature-card:hover, .service-card:hover, .pricing-card:hover, .insight-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 10px 30px rgba(74, 144, 226, 0.2) !important;
border-color: rgba(74, 144, 226, 0.3) !important;
}
/* Icons */
.feature-icon, .service-icon, .insight-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(–ai-blue-primary), var(–ai-purple-accent)) !important;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
/* Platform Items */
.platform-item, .company-item {
background: rgba(255, 255, 255, 0.1) !important;
color: var(–ai-text-light) !important;
padding: 0.5rem 1rem !important;
border-radius: 6px !important;
margin: 0.25rem !important;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Navigation Links */
a {
color: var(–ai-text-muted) !important;
transition: color 0.3s ease;
}
a:hover {
color: var(–ai-blue-primary) !important;
}
/* Footer */
.site-footer, footer {
background: var(–ai-dark-primary) !important;
border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 3rem 2rem 1rem !important;
color: var(–ai-text-muted) !important;
}
/* Pricing Cards Special Styles */
.pricing-card.featured {
border-color: var(–ai-blue-primary) !important;
box-shadow: 0 0 30px rgba(74, 144, 226, 0.3) !important;
}
.plan-badge {
background: var(–ai-blue-primary) !important;
color: white !important;
padding: 0.5rem 1rem !important;
border-radius: 20px !important;
font-size: 0.8rem !important;
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-section {
padding: 6rem 1rem 2rem !important;
min-height: 80vh !important;
}
.hero-title {
font-size: 2rem !important;
}
header, .wp-site-header {
padding: 1rem !important;
}
}
/* Animation for page load */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-content > * {
animation: fadeInUp 0.8s ease forwards;
opacity: 0;
}
.hero-content > *:nth-child(1) { animation-delay: 0.2s; }
.hero-content > *:nth-child(2) { animation-delay: 0.4s; }
.hero-content > *:nth-child(3) { animation-delay: 0.6s; }
.hero-content > *:nth-child(4) { animation-delay: 0.8s; }
/* Override all WordPress defaults */
.wp-block-group,
.wp-block-cover,
.wp-block-columns {
background: transparent !important;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(–ai-dark-primary);
}
::-webkit-scrollbar-thumb {
background: var(–ai-blue-primary);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(–ai-purple-accent);
}