/* AI Rankia Dark Theme Homepage Styles */
/* Global Dark Theme Variables */
:root {
–ai-dark-bg: #0a0a0a;
–ai-dark-secondary: #1a1a2e;
–ai-dark-accent: #16213e;
–ai-primary-blue: #4A90E2;
–ai-accent-purple: #7B68EE;
–ai-text-primary: #ffffff;
–ai-text-secondary: #b8c4ce;
–ai-gradient-primary: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
–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%);
}
/* Body and Global Styles */
body {
background: var(–ai-dark-bg);
color: var(–ai-text-primary);
font-family: ‘Segoe UI’, ‘Inter’, -apple-system, BlinkMacSystemFont, sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
/* Header Styles */
.wp-site-header,
header {
background: rgba(10, 10, 10, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
padding: 1rem 2rem;
}
/* Logo Styles */
.wp-site-title,
.site-title {
color: var(–ai-text-primary) !important;
font-size: 1.5rem;
font-weight: 700;
text-decoration: none !important;
}
.wp-site-title:before,
.site-title:before {
content: “⚡ “;
color: var(–ai-primary-blue);
}
/* Navigation Styles */
.wp-navigation,
nav {
display: flex;
align-items: center;
gap: 2rem;
}
.wp-navigation a,
nav a {
color: var(–ai-text-secondary) !important;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.wp-navigation a:hover,
nav a:hover {
color: var(–ai-primary-blue) !important;
}
/* Hero Section Styles */
.wp-block-group.hero-section,
.hero-section,
.wp-block-cover {
background: var(–ai-gradient-hero), var(–ai-dark-bg);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 2rem;
position: relative;
overflow: hidden;
}
/* Hero Background Animation */
.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;
}
/* Main Heading */
.wp-block-heading,
h1, h2 {
color: var(–ai-text-primary) !important;
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #ffffff 0%, #b8c4ce 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Subheading */
.wp-block-paragraph.lead,
.lead {
color: var(–ai-text-secondary);
font-size: clamp(1.2rem, 2.5vw, 1.5rem);
font-weight: 400;
line-height: 1.6;
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* CTA Button */
.wp-block-button,
.cta-button {
margin: 2rem 0;
}
.wp-block-button__link,
.cta-button a {
background: linear-gradient(135deg, var(–ai-primary-blue) 0%, var(–ai-accent-purple) 100%);
color: white !important;
padding: 1rem 2.5rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
border: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3);
position: relative;
overflow: hidden;
}
.wp-block-button__link:hover,
.cta-button a:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(74, 144, 226, 0.4);
}
.wp-block-button__link:before,
.cta-button a:before {
content: ”;
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.wp-block-button__link:hover:before,
.cta-button a:hover:before {
left: 100%;
}
/* Dashboard Preview Section */
.dashboard-preview {
margin-top: 4rem;
position: relative;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.dashboard-image {
width: 100%;
border-radius: 12px;
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.3),
0 0 80px rgba(74, 144, 226, 0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Features Section */
.features-section {
padding: 6rem 2rem;
background: var(–ai-dark-secondary);
position: relative;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 2rem;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(74, 144, 226, 0.2);
border-color: rgba(74, 144, 226, 0.3);
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(–ai-primary-blue), var(–ai-accent-purple));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.feature-title {
color: var(–ai-text-primary);
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.feature-description {
color: var(–ai-text-secondary);
line-height: 1.6;
}
/* Stats Section */
.stats-section {
padding: 4rem 2rem;
background: var(–ai-dark-accent);
text-align: center;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 800px;
margin: 2rem auto;
}
.stat-item {
padding: 1rem;
}
.stat-number {
color: var(–ai-primary-blue);
font-size: 2.5rem;
font-weight: 700;
display: block;
}
.stat-label {
color: var(–ai-text-secondary);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 0.5rem;
}
/* Footer */
.wp-site-footer,
footer {
background: var(–ai-dark-bg);
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 3rem 2rem 1rem;
text-align: center;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
}
.footer-links {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.footer-links a {
color: var(–ai-text-secondary) !important;
text-decoration: none;
font-size: 0.9rem;
transition: color 0.3s ease;
}
.footer-links a:hover {
color: var(–ai-primary-blue) !important;
}
.footer-copyright {
color: var(–ai-text-secondary);
font-size: 0.8rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Responsive Design */
@media (max-width: 768px) {
.wp-site-header,
header {
padding: 1rem;
}
.hero-section {
padding: 1rem;
min-height: 80vh;
}
.wp-block-heading,
h1, h2 {
font-size: 2rem;
}
.features-grid {
grid-template-columns: 1fr;
}
.footer-links {
flex-direction: column;
gap: 1rem;
}
}
/* 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;
}
.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 WordPress default colors */
.wp-block-group,
.wp-block-cover,
.wp-block-columns {
background: transparent !important;
}
/* Ensure all text is visible on dark background */
p, span, div {
color: var(–ai-text-secondary);
}
h1, h2, h3, h4, h5, h6 {
color: var(–ai-text-primary) !important;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(–ai-dark-bg);
}
::-webkit-scrollbar-thumb {
background: var(–ai-primary-blue);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(–ai-accent-purple);
}