/* Modern DayViewer Landing Page Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-600: #3b82f6;
--primary-600-rgb: 59, 130, 246;
--primary-700: #2563eb;
--primary-100: #dbeafe;
--success-600: #059669;
--neutral-50: #f9fafb;
--neutral-100: #f3f4f6;
--neutral-200: #e5e7eb;
--neutral-600: #4b5563;
--neutral-800: #1f2937;
--neutral-900: #111827;
--neutral-0: #ffffff;
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-headings: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
--border-radius: 12px;
--border-radius-lg: 20px;
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}
body {
font-family: var(--font-primary);
line-height: 1.6;
color: var(--neutral-800);
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
overflow-x: hidden;
padding-top: 0 !important;
min-height: 100vh;
}
/* Prevent layout shifts and overlapping */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Container constraints */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Ensure proper z-index stacking */
.header {
position: relative;
z-index: 100;
}
.main-content {
position: relative;
z-index: 1;
}
/* Prevent content from jumping under fixed elements */
#header-container {
position: relative;
}
#footer-container {
position: relative;
z-index: 1;
}
/* Header Styles */
.header {
position: static;
background: #ffffff;
border-bottom: 1px solid var(--neutral-200);
transition: all 0.3s ease;
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-headings);
font-size: 1.5rem;
font-weight: 700;
color: var(--neutral-900);
text-decoration: none;
}
.logo img {
height: 32px;
width: auto;
}
/* Desktop Navigation */
.desktop-nav {
display: flex;
align-items: center;
}
.desktop-nav ul {
display: flex;
gap: 2rem;
list-style: none;
margin: 0;
padding: 0;
}
.desktop-nav li {
position: relative;
}
.desktop-nav a {
color: var(--neutral-600);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
position: relative;
display: block;
padding: 0.5rem 0;
}
.desktop-nav a:hover {
color: var(--primary-600);
}
.desktop-nav a::after {
content: '';
position: absolute;
bottom: -0.5rem;
left: 0;
width: 0;
height: 2px;
background: var(--primary-600);
transition: width 0.3s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a.active::after {
width: 100%;
}
.desktop-nav a.active {
color: var(--primary-600);
font-weight: 600;
}
/* Desktop CTA */
.desktop-cta {
display: flex;
gap: 1rem;
align-items: center;
}
/* Mobile Menu Button */
.mobile-menu-btn {
display: none;
flex-direction: column;
cursor: pointer;
padding: 0.5rem;
gap: 4px;
background: none;
border: none;
}
.hamburger-line {
width: 25px;
height: 3px;
background: var(--neutral-600);
border-radius: 2px;
transition: all 0.3s ease;
}
.mobile-menu-btn.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.mobile-menu-btn.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* Mobile Dropdown Menu */
.mobile-dropdown {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 1000;
}
.mobile-dropdown.show {
display: block;
}
.mobile-menu-content {
background: #ffffff;
border: 1px solid var(--neutral-200);
border-radius: 0 0 12px 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
padding: 1.5rem;
}
.mobile-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav li {
margin-bottom: 0.5rem;
}
.mobile-nav a {
display: block;
padding: 0.75rem 1rem;
color: var(--neutral-700);
text-decoration: none;
font-weight: 500;
border-radius: 8px;
transition: all 0.3s ease;
}
.mobile-nav a:hover {
background: var(--neutral-100);
color: var(--primary-600);
}
.mobile-cta {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--neutral-200);
}
.mobile-signin {
width: 100%;
text-align: center;
padding: 0.875rem 1.5rem;
}
/* Article Navigation Styles */
.article-nav {
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid var(--neutral-200);
margin-top: 80px; /* Account for fixed header */
position: sticky;
top: 80px;
z-index: 900;
backdrop-filter: blur(10px);
}
.article-nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0.75rem 2rem;
}
.article-nav-breadcrumb {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
font-size: 0.875rem;
}
.breadcrumb-home {
color: var(--neutral-600);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.breadcrumb-home:hover {
color: var(--primary-600);
}
.breadcrumb-separator {
color: var(--neutral-400);
font-size: 0.75rem;
}
.breadcrumb-current {
color: var(--neutral-800);
font-weight: 600;
}
.article-categories {
display: flex;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
flex-wrap: wrap;
}
.category-item {
flex-shrink: 0;
}
.category-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: var(--neutral-50);
border: 1px solid var(--neutral-200);
border-radius: var(--border-radius);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
color: var(--neutral-600);
transition: all 0.3s ease;
}
.category-link:hover {
background: var(--primary-100);
border-color: var(--primary-600);
color: var(--primary-600);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.category-link.active {
background: var(--primary-600);
border-color: var(--primary-600);
color: white;
}
.category-icon {
font-size: 1rem;
line-height: 1;
}
.category-name {
white-space: nowrap;
}
.category-count {
background: rgba(255, 255, 255, 0.9);
color: var(--neutral-600);
font-size: 0.75rem;
font-weight: 600;
padding: 0.125rem 0.375rem;
border-radius: 12px;
line-height: 1;
}
.category-link:hover .category-count {
background: rgba(59, 130, 246, 0.1);
color: var(--primary-600);
}
.category-link.active .category-count {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: var(--border-radius);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
color: white;
box-shadow: var(--shadow-md);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.btn-secondary {
background: var(--neutral-0);
color: var(--neutral-600);
border: 2px solid var(--neutral-200);
}
.btn-secondary:hover {
background: var(--neutral-50);
border-color: var(--primary-600);
color: var(--primary-600);
}
/* Mobile responsiveness for article nav */
@media (max-width: 768px) {
.article-nav {
margin-top: 70px;
top: 70px;
}
.article-nav-container {
padding: 0.5rem 1rem;
}
.article-nav-breadcrumb {
margin-bottom: 0.5rem;
}
.article-categories {
gap: 0.375rem;
}
.category-link {
padding: 0.375rem 0.5rem;
font-size: 0.8rem;
}
.category-name {
display: none;
}
.category-item:hover .category-name {
display: inline;
}
.category-count {
font-size: 0.7rem;
padding: 0.1rem 0.3rem;
}
}
/* Hero Section */
.hero {
padding: 8rem 2rem 4rem;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
min-height: 100vh;
}
.hero-content h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-family: var(--font-headings);
color: var(--neutral-900);
margin-bottom: 1rem;
line-height: 1.2;
-webkit-text-fill-color: transparent;
background: linear-gradient(45deg, var(--neutral-900) 30%, var(--neutral-600) 100%);
-webkit-background-clip: text;
background-clip: text;
}
.hero-content h3 {
margin-bottom: 1.5rem;
font-size: 1.25rem;
font-weight: 500;
color: var(--neutral-600);
}
.hero-content p {
font-size: 1.125rem;
line-height: 1.6;
color: var(--neutral-600);
max-width: 65ch;
margin: 0 auto 1.5rem auto;
}
.hero-cta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.hero-stats {
display: flex;
gap: 2rem;
align-items: center;
font-size: 0.875rem;
color: var(--neutral-600);
}
.hero-visual {
position: relative;
}
.hero-image {
width: 100%;
height: auto;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-xl);
background: var(--neutral-0);
transform: perspective(1000px) rotateY(-5deg) rotateX(2deg);
transition: transform 0.3s ease;
}
.hero-image:hover {
transform: perspective(1000px) rotateY(-2deg) rotateX(1deg);
}
.floating-element {
position: absolute;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
border-radius: var(--border-radius);
padding: 1rem;
box-shadow: var(--shadow-lg);
animation: float 6s ease-in-out infinite;
}
.floating-element-1 {
top: 10%;
right: -10%;
animation-delay: 0s;
}
.floating-element-2 {
bottom: 20%;
left: -15%;
animation-delay: 2s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* Features Section */
.features {
padding: 6rem 2rem;
background: var(--neutral-0);
border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
margin-top: -2rem;
position: relative;
z-index: 10;
}
.features-container {
max-width: 1200px;
margin: 0 auto;
}
.features-header {
text-align: center;
margin-bottom: 4rem;
}
.features-header span {
display: inline-block;
background: var(--primary-100);
color: var(--primary-600);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
}
.features-header h2 {
font-family: var(--font-headings);
font-size: 2.5rem;
font-weight: 700;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: var(--neutral-50);
border-radius: var(--border-radius-lg);
padding: 2rem;
text-align: center;
transition: all 0.3s ease;
border: 1px solid var(--neutral-200);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
background: var(--neutral-0);
}
.feature-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 24px;
color: white;
}
.feature-card h3 {
font-family: var(--font-headings);
font-size: 1.25rem;
font-weight: 600;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.feature-card p {
color: var(--neutral-600);
line-height: 1.6;
}
/* CTA Section */
.cta-section {
padding: 6rem 2rem;
background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.cta-container {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 10;
}
.cta-section h2 {
font-family: var(--font-headings);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.cta-section p {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-white {
background: white;
color: var(--primary-600);
}
.btn-white:hover {
background: var(--neutral-100);
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-outline:hover {
background: rgba(255, 255, 255, 0.1);
border-color: white;
}
/* Footer Styles */
.footer {
background: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 100%);
color: var(--neutral-200);
padding: 4rem 0 0;
position: relative;
overflow: hidden;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, var(--primary-500), transparent);
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
/* Footer Brand Section */
.footer-brand {
padding-right: 2rem;
}
.footer-logo {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.footer-logo-img {
width: 48px;
height: 48px;
border-radius: var(--border-radius);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.footer-brand-text h3 {
font-family: var(--font-headings);
font-size: 1.5rem;
font-weight: 700;
color: white;
margin: 0;
line-height: 1.2;
}
.footer-brand-text span {
font-size: 0.875rem;
color: var(--primary-300);
font-weight: 500;
}
.footer-description {
color: var(--neutral-300);
line-height: 1.6;
margin-bottom: 2rem;
font-size: 0.95rem;
}
/* Footer CTA */
.footer-cta {
margin-bottom: 2rem;
}
.btn-footer-primary {
background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
color: white;
padding: 0.875rem 1.5rem;
border-radius: var(--border-radius);
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.btn-footer-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}
.btn-footer-primary span {
font-size: 1.1em;
}
/* Social Links */
.footer-social {
display: flex;
gap: 1rem;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: var(--border-radius);
color: var(--neutral-300);
text-decoration: none;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.social-link:hover {
background: var(--primary-600);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
/* Footer Links */
.footer-links {
display: contents;
}
.footer-column h4 {
font-family: var(--font-headings);
font-weight: 600;
color: white;
margin-bottom: 1.5rem;
font-size: 1rem;
position: relative;
}
.footer-column h4::after {
content: '';
position: absolute;
bottom: -0.5rem;
left: 0;
width: 30px;
height: 2px;
background: var(--primary-500);
border-radius: 1px;
}
.footer-column ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-column ul li {
margin-bottom: 0.75rem;
}
.footer-column ul li a {
color: var(--neutral-300);
text-decoration: none;
transition: all 0.3s ease;
font-size: 0.9rem;
position: relative;
padding-left: 0;
}
.footer-column ul li a:hover {
color: var(--primary-300);
padding-left: 0.5rem;
}
.footer-column ul li a::before {
content: '';
position: absolute;
left: -12px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background: var(--primary-500);
border-radius: 50%;
opacity: 0;
transition: opacity 0.3s ease;
}
.footer-column ul li a:hover::before {
opacity: 1;
}
/* Footer Bottom */
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem 0;
background: rgba(0, 0, 0, 0.2);
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.footer-bottom p {
color: var(--neutral-400);
margin: 0;
font-size: 0.875rem;
}
.footer-tagline {
color: var(--neutral-500);
font-size: 0.875rem;
font-style: italic;
}
.footer-tagline span {
opacity: 0.8;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.header-container {
padding: 1rem;
position: relative;
}
/* Hide desktop navigation on mobile */
.desktop-nav {
display: none;
}
/* Hide desktop CTA on mobile */
.desktop-cta {
display: none;
}
/* Show mobile menu button */
.mobile-menu-btn {
display: flex;
}
.hero {
grid-template-columns: 1fr;
padding: 6rem 1rem 2rem;
gap: 2rem;
text-align: center;
}
.hero-content h1 {
font-size: 2.5rem;
}
.hero-cta {
justify-content: center;
}
.hero-stats {
justify-content: center;
}
.features {
padding: 4rem 1rem;
}
.features-header h2 {
font-size: 2rem;
}
.cta-section {
padding: 4rem 1rem;
}
.cta-section h2 {
font-size: 2rem;
}
.footer {
padding: 3rem 0 0;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2.5rem;
margin-bottom: 2rem;
}
.footer-brand {
padding-right: 0;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 2rem;
margin-bottom: 1rem;
}
.footer-logo {
justify-content: center;
}
.footer-cta {
display: flex;
justify-content: center;
}
.footer-social {
justify-content: center;
}
.footer-bottom-content {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.footer-column h4 {
margin-bottom: 1rem;
}
.floating-element {
display: none;
}
}
/* Features Carousel Section */
.features-carousel {
padding: 6rem 2rem;
background: linear-gradient(135deg, var(--neutral-50), var(--neutral-100));
}
.carousel-container {
max-width: 1200px;
margin: 0 auto;
}
.carousel-header {
text-align: center;
margin-bottom: 4rem;
}
.carousel-header span {
display: inline-block;
background: var(--primary-100);
color: var(--primary-600);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
}
.carousel-header h2 {
font-family: var(--font-headings);
font-size: 2.5rem;
font-weight: 700;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.carousel-header p {
color: var(--neutral-600);
font-size: 1.125rem;
}
.carousel-wrapper {
position: relative;
background: var(--neutral-0);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
}
.carousel-slide {
min-width: 100%;
display: none;
transition: opacity 0.5s ease;
}
.carousel-slide.active {
display: block;
opacity: 1;
}
.slide-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
padding: 3rem;
align-items: center;
min-height: 400px;
}
.slide-image {
display: flex;
align-items: center;
justify-content: center;
min-height: 300px;
}
.slide-image img {
width: 100%;
height: auto;
border-radius: var(--border-radius);
box-shadow: var(--shadow-md);
}
.slide-text h3 {
font-family: var(--font-headings);
font-size: 2rem;
font-weight: 700;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.slide-text p {
color: var(--neutral-600);
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 1.5rem;
}
.slide-text ul {
list-style: none;
padding: 0;
}
.slide-text ul li {
color: var(--neutral-600);
margin-bottom: 0.75rem;
padding-left: 1.5rem;
position: relative;
}
.slide-text ul li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--success-600);
font-weight: bold;
}
.carousel-controls {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 3rem;
background: var(--neutral-50);
border-top: 1px solid var(--neutral-200);
}
.carousel-btn {
background: var(--neutral-0);
border: 2px solid var(--neutral-200);
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
color: var(--neutral-600);
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-btn:hover {
background: var(--primary-600);
color: white;
border-color: var(--primary-600);
}
.carousel-indicators {
display: flex;
gap: 0.5rem;
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background: var(--neutral-300);
cursor: pointer;
transition: all 0.3s ease;
}
.indicator.active {
background: var(--primary-600);
}
.indicator:hover {
background: var(--primary-600);
}
/* Use Cases Section */
.use-cases-section {
padding: 6rem 2rem;
background: var(--neutral-0);
}
.use-cases-container {
max-width: 1200px;
margin: 0 auto;
}
.use-cases-header {
text-align: center;
margin-bottom: 4rem;
}
.use-cases-header span {
display: inline-block;
background: var(--success-600);
color: white;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
}
.use-cases-header h2 {
font-family: var(--font-headings);
font-size: 2.5rem;
font-weight: 700;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.use-cases-header p {
color: var(--neutral-600);
font-size: 1.125rem;
}
.use-cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2.5rem;
}
.use-case-card {
background: var(--neutral-50);
border-radius: var(--border-radius-lg);
padding: 2.5rem;
border: 1px solid var(--neutral-200);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.use-case-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-600), var(--success-600));
transform: scaleX(0);
transition: transform 0.3s ease;
}
.use-case-card:hover::before {
transform: scaleX(1);
}
.use-case-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
background: var(--neutral-0);
}
.use-case-icon {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
margin-bottom: 1.5rem;
}
.use-case-card h3 {
font-family: var(--font-headings);
font-size: 1.5rem;
font-weight: 600;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.use-case-card p {
color: var(--neutral-600);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.use-case-card ul {
list-style: none;
padding: 0;
}
.use-case-card ul li {
color: var(--neutral-600);
margin-bottom: 0.75rem;
padding-left: 1.5rem;
position: relative;
font-size: 0.95rem;
}
.use-case-card ul li::before {
content: '→';
position: absolute;
left: 0;
color: var(--primary-600);
font-weight: bold;
}
/* Benefits Section */
.benefits-section {
padding: 6rem 2rem;
background: var(--neutral-900);
color: white;
}
.benefits-container {
max-width: 1200px;
margin: 0 auto;
}
.benefits-header {
text-align: center;
margin-bottom: 4rem;
}
.benefits-header span {
display: inline-block;
background: rgba(255, 255, 255, 0.1);
color: var(--primary-100);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
}
.benefits-header h2 {
font-family: var(--font-headings);
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
.benefits-header p {
color: var(--neutral-300);
font-size: 1.125rem;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 3rem;
}
.benefit-item {
text-align: center;
padding: 2rem;
background: rgba(255, 255, 255, 0.05);
border-radius: var(--border-radius-lg);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.benefit-item:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.1);
}
.benefit-stat {
font-family: var(--font-headings);
font-size: 3rem;
font-weight: 800;
color: var(--primary-100);
margin-bottom: 1rem;
}
.benefit-item h3 {
font-family: var(--font-headings);
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.benefit-item p {
color: var(--neutral-300);
line-height: 1.6;
}
/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
.features-carousel {
padding: 4rem 1rem;
}
.carousel-header h2 {
font-size: 2rem;
}
.slide-content {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem;
text-align: center;
}
.slide-text h3 {
font-size: 1.5rem;
}
.carousel-controls {
padding: 1rem 2rem;
}
.use-cases-section {
padding: 4rem 1rem;
}
.use-cases-header h2 {
font-size: 2rem;
}
.use-cases-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.use-case-card {
padding: 2rem;
}
.use-case-card h3 {
font-size: 1.25rem;
}
.benefits-section {
padding: 4rem 1rem;
}
.benefits-header h2 {
font-size: 2rem;
}
.benefits-grid {
gap: 2rem;
}
.benefit-stat {
font-size: 2.5rem;
}
}
/* Smooth scrolling and animations */
html {
scroll-behavior: smooth;
}
.fade-in {
opacity: 0;
transform: translateY(30px);
animation: fadeInUp 0.8s ease forwards;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-delay-1 { animation-delay: 0.2s; }
.fade-in-delay-2 { animation-delay: 0.4s; }
.fade-in-delay-3 { animation-delay: 0.6s; }
/* Team Page Specific Styles */
.team-page {
background: var(--neutral-0);
}
.main {
padding-top: 80px; /* Account for fixed header */
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Team Page Hero Section */
.team-page .hero {
padding: 8rem 0 6rem;
background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
position: relative;
overflow: hidden;
min-height: 70vh;
display: flex;
align-items: center;
}
.team-page .hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.team-page .hero-content {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.team-page .hero-subtitle {
color: var(--primary-600);
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.team-page .hero-title {
font-family: var(--font-headings);
font-size: 3rem;
font-weight: 800;
line-height: 1.1;
color: var(--neutral-900);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--neutral-900), var(--primary-600));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.team-page .hero-description {
font-size: 1.5rem;
font-weight: 600;
color: var(--neutral-700);
margin-bottom: 1.5rem;
line-height: 1.3;
}
.team-page .hero-paragraph {
font-size: 1.125rem;
color: var(--neutral-600);
line-height: 1.6;
margin-bottom: 2.5rem;
}
.team-page .hero-cta {
margin-bottom: 2rem;
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.team-page .hero-image {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
}
.team-page .hero-img {
width: 100%;
max-width: 600px;
height: auto;
min-height: 350px;
object-fit: cover;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-xl);
transform: perspective(1000px) rotateY(-3deg) rotateX(1deg) scale(1.05);
transition: all 0.3s ease;
background: var(--neutral-100);
}
.team-page .hero-img:hover {
transform: perspective(1000px) rotateY(-1deg) rotateX(0.5deg) scale(1.08);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
/* Features Section */
.features-section {
padding: 6rem 0;
background: var(--neutral-0);
}
.feature-block {
margin-bottom: 6rem;
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease;
}
.feature-block.animate {
opacity: 1;
transform: translateY(0);
}
.feature-block:last-child {
margin-bottom: 0;
}
.feature-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.feature-block.reverse .feature-content {
direction: rtl;
}
.feature-block.reverse .feature-text {
direction: ltr;
}
.feature-subtitle {
color: var(--primary-600);
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 1rem;
}
.feature-title {
font-family: var(--font-headings);
font-size: 2.5rem;
font-weight: 700;
color: var(--neutral-900);
margin-bottom: 2rem;
line-height: 1.2;
}
.feature-paragraph {
font-size: 1.125rem;
color: var(--neutral-600);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.feature-list {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list li {
color: var(--neutral-600);
font-size: 1.125rem;
line-height: 1.7;
margin-bottom: 1.5rem;
padding-left: 2rem;
position: relative;
}
.feature-list li::before {
content: '✓';
position: absolute;
left: 0;
top: 0;
color: var(--success-600);
font-weight: bold;
font-size: 1.2em;
}
.feature-image {
position: relative;
}
.feature-img {
width: 100%;
height: auto;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
transition: transform 0.3s ease;
}
.feature-img:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
/* Video Player Styling */
.feature-video {
position: relative;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.feature-video-player {
width: 100%;
height: auto;
border-radius: var(--border-radius-lg);
transition: transform 0.3s ease;
}
.feature-video:hover .feature-video-player {
transform: scale(1.02);
}
/* CTA Section for Team Page */
.team-page .cta-section {
padding: 6rem 0;
background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.team-page .cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.cta-content {
position: relative;
z-index: 1;
}
.cta-title {
font-family: var(--font-headings);
font-size: 3rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: white;
}
.cta-description {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.btn-large {
padding: 1rem 2rem;
font-size: 1.125rem;
font-weight: 600;
}
/* Team Page Floating Elements */
.team-page .floating-element {
position: absolute;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: var(--border-radius);
padding: 0.75rem 1rem;
box-shadow: var(--shadow-lg);
animation: float 6s ease-in-out infinite;
z-index: 2;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Plans Page Styles */
.plans-page {
background: var(--neutral-0);
}
/* Pricing Hero Section */
.pricing-hero {
padding: 8rem 0 4rem;
background: linear-gradient(135deg, var(--neutral-50) 0%, var(--neutral-100) 100%);
text-align: center;
position: relative;
overflow: hidden;
}
.pricing-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.pricing-hero .hero-content {
position: relative;
z-index: 1;
}
.pricing-hero .hero-subtitle {
display: inline-block;
background: var(--primary-100);
color: var(--primary-600);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
}
.pricing-hero .hero-title {
font-family: var(--font-headings);
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
color: var(--neutral-900);
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--neutral-900), var(--primary-600));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.pricing-hero .hero-description {
font-size: 1.25rem;
color: var(--neutral-600);
margin-bottom: 3rem;
line-height: 1.6;
}
/* Billing Toggle */
.billing-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin-bottom: 2rem;
}
.billing-label {
font-weight: 500;
color: var(--neutral-700);
transition: color 0.3s ease, opacity 0.3s ease;
opacity: 1;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 48px;
height: 28px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
/* Gray out Yearly label by default */
#billing-toggle ~ .billing-label {
opacity: 0.5;
}
/* Gray out Monthly label when toggle is checked */
#billing-toggle:checked ~ .billing-label {
opacity: 1;
}
#billing-toggle:checked + .toggle-slider + .billing-label {
opacity: 1;
}
#billing-toggle:not(:checked) + .toggle-slider + .billing-label {
opacity: 0.5;
}
#billing-toggle:checked ~ span:first-of-type {
opacity: 0.5;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--neutral-300);
transition: 0.4s;
border-radius: 28px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 4px;
bottom: 4px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
input:checked + .toggle-slider {
background-color: var(--primary-600);
}
input:checked + .toggle-slider:before {
transform: translateX(20px);
}
.savings-badge {
background: var(--success-100);
color: var(--success-600);
padding: 0.25rem 0.5rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
margin-left: 0.5rem;
}
/* Pricing Plans Section */
.pricing-plans {
padding: 4rem 0;
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
}
.plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
max-width: 900px;
margin: 0 auto;
}
.pricing-card {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: 2.5rem;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
position: relative;
transition: all 0.3s ease;
}
.pricing-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(59, 130, 246, 0.15);
}
.pricing-card.featured {
border: 2px solid var(--primary-500);
transform: scale(1.05);
}
.featured-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
color: white;
padding: 0.5rem 1.5rem;
border-radius: var(--border-radius-full);
font-size: 0.875rem;
font-weight: 600;
}
.plan-header {
text-align: center;
margin-bottom: 2rem;
}
.plan-name {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.plan-price {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: 1rem;
}
.currency {
font-size: 1.25rem;
color: var(--text-secondary);
}
.amount {
font-size: 3rem;
font-weight: 800;
color: var(--primary-600);
margin: 0 0.25rem;
}
.period {
font-size: 1rem;
color: var(--text-secondary);
}
.yearly-note {
font-size: 0.875rem;
color: var(--text-secondary);
margin-top: 0.5rem;
}
.plan-description {
color: var(--text-secondary);
font-size: 1rem;
line-height: 1.5;
}
.plan-features {
margin-bottom: 2rem;
}
.plan-features ul {
list-style: none;
padding: 0;
margin: 0;
}
.plan-features li {
padding: 0.75rem 0;
border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
display: flex;
align-items: center;
font-size: 0.95rem;
line-height: 1.4;
}
.plan-features li:last-child {
border-bottom: none;
}
.plan-features li.limitation {
color: var(--text-secondary);
font-style: italic;
background: rgba(251, 191, 36, 0.1);
padding: 0.75rem 1rem;
border-radius: var(--border-radius);
border: 1px solid rgba(251, 191, 36, 0.2);
margin: 0.5rem 0;
}
.plan-features li.limitation:last-child {
border-bottom: 1px solid rgba(251, 191, 36, 0.2);
}
.plan-cta {
text-align: center;
}
.team-pricing {
display: flex;
flex-direction: column;
align-items: center;
}
.pricing-tier {
display: flex;
flex-direction: column;
align-items: center;
}
.pricing-tier small {
font-size: 0.75rem;
color: var(--text-secondary);
margin-top: 0.25rem;
}
.team-pricing-details {
margin: 1.5rem 0;
width: 100%;
}
.pricing-breakdown {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.pricing-tier-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: var(--bg-secondary);
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
}
.tier-size {
font-size: 0.875rem;
color: var(--text-secondary);
}
.tier-price {
font-weight: 600;
color: var(--primary-600);
}
.trial-info {
text-align: center;
margin-top: 3rem;
padding: 1.5rem;
background: rgba(59, 130, 246, 0.1);
border-radius: var(--border-radius-lg);
border: 1px solid rgba(59, 130, 246, 0.2);
}
.trial-info p {
margin: 0;
color: var(--text-primary);
font-size: 1rem;
}
/* Features Comparison */
.features-comparison {
padding: 6rem 0;
background: var(--neutral-50);
}
.comparison-header {
text-align: center;
margin-bottom: 3rem;
}
.comparison-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.comparison-header p {
font-size: 1.125rem;
color: var(--neutral-600);
}
.table-container {
overflow-x: auto;
background: var(--neutral-0);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
}
.comparison-table table {
width: 100%;
border-collapse: collapse;
}
.comparison-table th,
.comparison-table td {
padding: 1.5rem 1rem;
text-align: center;
border-bottom: 1px solid var(--neutral-200);
}
.comparison-table th {
background: var(--neutral-50);
font-weight: 600;
color: var(--neutral-900);
}
.comparison-table .feature-col,
.comparison-table .feature-name {
text-align: left;
}
.comparison-table .featured-col {
background: var(--primary-50);
border-left: 2px solid var(--primary-600);
border-right: 2px solid var(--primary-600);
}
.comparison-table tbody tr:hover {
background: var(--neutral-25);
}
/* FAQ Section */
.pricing-faq {
padding: 6rem 0;
background: var(--neutral-0);
}
.faq-header {
text-align: center;
margin-bottom: 3rem;
}
.faq-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.faq-header p {
font-size: 1.125rem;
color: var(--neutral-600);
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
}
.faq-item {
background: var(--neutral-50);
border-radius: var(--border-radius);
padding: 2rem;
transition: all 0.3s ease;
}
.faq-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.faq-item h3 {
font-size: 1.125rem;
font-weight: 600;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.faq-item p {
color: var(--neutral-600);
line-height: 1.6;
}
/* CTA Section */
.pricing-cta {
padding: 6rem 0;
background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
color: white;
text-align: center;
}
.pricing-cta .cta-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: white;
}
.pricing-cta .cta-content p {
font-size: 1.125rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.trust-indicators {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.trust-item {
display: flex;
align-items: center;
gap: 0.5rem;
opacity: 0.9;
}
.trust-icon {
font-size: 1.25rem;
}
.team-page .floating-element-1 {
top: 15%;
right: -5%;
animation-delay: 0s;
}
.team-page .floating-element-2 {
bottom: 20%;
left: -8%;
animation-delay: 3s;
}
/* Mobile Responsiveness for Team Page */
@media (max-width: 768px) {
.team-page .hero-content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.team-page .hero-image {
min-height: 300px;
order: -1;
}
.team-page .hero-img {
max-width: 100%;
min-height: 250px;
transform: none;
}
.team-page .hero-img:hover {
transform: scale(1.02);
}
.team-page .floating-element {
display: none;
}
.team-page .hero {
min-height: 60vh;
padding: 6rem 0 4rem;
}
.team-page .hero-cta {
justify-content: center;
}
.team-page .hero-title {
font-size: 2.5rem;
}
.team-page .hero-description {
font-size: 1.25rem;
}
.feature-content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.feature-block.reverse .feature-content {
direction: ltr;
}
.feature-title {
font-size: 2rem;
}
.cta-title {
font-size: 2.5rem;
}
.container {
padding: 0 1rem;
}
/* Pricing Page Mobile Styles */
.pricing-hero {
padding: 6rem 0 3rem;
}
.pricing-hero .hero-title {
font-size: 2.5rem;
}
.pricing-hero .hero-description {
font-size: 1.125rem;
}
.billing-toggle {
flex-direction: column;
gap: 0.75rem;
}
.plans-grid {
grid-template-columns: 1fr;
max-width: 100%;
}
.pricing-card.featured {
transform: none;
}
.pricing-card:hover {
transform: translateY(-2px);
}
.plan-price .amount {
font-size: 2.5rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn {
width: 100%;
max-width: 300px;
}
.trust-indicators {
flex-direction: column;
gap: 1rem;
}
.comparison-header h2 {
font-size: 2rem;
}
.faq-grid {
grid-template-columns: 1fr;
}
.pricing-cta .cta-content h2 {
font-size: 2rem;
}
.table-container {
font-size: 0.875rem;
}
.comparison-table th,
.comparison-table td {
padding: 1rem 0.5rem;
}
}
/* Pricing Clarification Section */
.pricing-clarification {
padding: 4rem 0;
background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
position: relative;
overflow: hidden;
}
.pricing-clarification::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='7' cy='7' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
opacity: 0.3;
}
.clarification-content {
position: relative;
z-index: 2;
}
.clarification-card {
max-width: 800px;
margin: 0 auto;
text-align: center;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: var(--border-radius-xl);
padding: 3rem 2.5rem;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.clarification-card h2 {
font-size: 2.25rem;
font-weight: 800;
color: var(--text-primary);
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--primary-600), var(--primary-500));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.clarification-text {
font-size: 1.125rem;
line-height: 1.7;
color: var(--text-secondary);
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.clarification-highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.highlight-item {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 1rem;
background: rgba(59, 130, 246, 0.1);
border-radius: var(--border-radius-lg);
border: 1px solid rgba(59, 130, 246, 0.2);
transition: all 0.3s ease;
}
.highlight-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
}
.highlight-icon {
font-size: 1.25rem;
flex-shrink: 0;
}
.highlight-text {
font-weight: 600;
color: var(--text-primary);
font-size: 0.95rem;
}
.clarification-cta {
margin-top: 2rem;
}
.clarification-cta .btn-large {
padding: 1rem 2.5rem;
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 1rem;
}
.cta-note {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0;
font-style: italic;
}
@media (max-width: 768px) {
.clarification-card {
padding: 2rem 1.5rem;
}
.clarification-card h2 {
font-size: 1.875rem;
}
.clarification-text {
font-size: 1rem;
}
.clarification-highlights {
grid-template-columns: 1fr;
gap: 1rem;
}
.highlight-item {
flex-direction: column;
text-align: center;
gap: 0.5rem;
}
}
/* Team Room Section */
.team-room-section {
padding: 4rem 0;
background: var(--bg-secondary);
border-top: 1px solid var(--border-color);
}
.team-room-header {
text-align: center;
margin-bottom: 3rem;
}
.team-room-header h2 {
font-size: 2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.team-room-header p {
font-size: 1.125rem;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
.team-room-card {
max-width: 1000px;
margin: 0 auto;
background: var(--card-bg);
border-radius: var(--border-radius-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-color);
overflow: hidden;
}
.team-room-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 400px;
}
.team-room-info {
padding: 2.5rem;
background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-600) 100%);
color: white;
display: flex;
flex-direction: column;
justify-content: center;
}
.team-room-info h3 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1rem;
}
.team-room-description {
font-size: 1rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.team-features {
display: flex;
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
.feature-item {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
font-size: 1rem;
font-weight: 600;
color: #1f2937;
background: rgba(255, 255, 255, 0.95);
padding: 0.875rem 1.25rem;
border-radius: var(--border-radius);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
width: 100%;
text-align: left;
transition: all 0.3s ease;
}
.feature-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.feature-item span:not(.feature-icon) {
color: #1f2937;
font-weight: 600;
line-height: 1.4;
flex: 1;
}
.feature-icon {
font-size: 1.5rem;
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 0.25rem;
}
.team-room-pricing {
padding: 2.5rem;
background: var(--card-bg);
display: flex;
flex-direction: column;
justify-content: center;
}
.team-room-pricing h4 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1.5rem;
text-align: center;
}
.pricing-tiers {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.tier {
background: var(--bg-secondary);
border-radius: var(--border-radius);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
}
.tier:hover {
transform: translateX(5px);
box-shadow: var(--shadow-md);
border-color: var(--primary-300);
}
.tier-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.25rem;
}
.tier-members {
font-weight: 600;
color: var(--text-primary);
}
.tier-price {
font-size: 1.125rem;
font-weight: 700;
color: var(--primary-600);
}
.tier-price small {
font-size: 0.75rem;
font-weight: 400;
color: var(--text-secondary);
}
.team-room-cta {
text-align: center;
}
.team-room-cta .btn {
width: 100%;
margin-bottom: 1rem;
padding: 1rem 2rem;
font-weight: 600;
}
.team-note {
font-size: 0.875rem;
color: var(--text-secondary);
margin: 0;
font-style: italic;
}
@media (max-width: 768px) {
.team-room-content {
grid-template-columns: 1fr;
}
.team-room-info,
.team-room-pricing {
padding: 2rem 1.5rem;
}
.team-room-info h3 {
font-size: 1.5rem;
}
.team-room-header h2 {
font-size: 1.75rem;
}
.team-room-header p {
font-size: 1rem;
}
}
/* Article Page Styles */
.article-page {
padding-top: 80px; /* Account for fixed header */
}
.article-main {
min-height: 100vh;
padding: 2rem 0;
}
.article-container {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}
.article-header {
text-align: center;
margin-bottom: 4rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--neutral-200);
}
.article-meta {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
align-items: center;
}
.article-category {
background: var(--primary-100);
color: var(--primary-700);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.article-date,
.article-reading-time {
color: var(--text-muted);
font-size: 0.875rem;
}
.article-title {
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.2;
margin-bottom: 1rem;
color: var(--heading-color);
}
.article-description {
font-size: 1.25rem;
color: var(--text-muted);
line-height: 1.6;
}
.article-content {
max-width: 800px;
margin: 0 auto 3rem;
line-height: 1.8;
font-size: 1.1rem;
padding-top: 3rem;
}
.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
margin-top: 2.5rem;
margin-bottom: 1rem;
color: var(--heading-color);
line-height: 1.3;
}
.article-content h1 {
font-size: 2.5rem;
border-bottom: 2px solid var(--primary-200);
padding-bottom: 0.5rem;
}
.article-content h2 {
font-size: 2rem;
color: var(--primary-700);
}
.article-content h3 {
font-size: 1.5rem;
}
.article-content p {
margin-bottom: 1.5rem;
}
.article-content ul,
.article-content ol {
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.article-content li {
margin-bottom: 0.5rem;
}
.article-content ul li::marker {
color: var(--primary-600);
}
.article-content strong {
color: var(--heading-color);
font-weight: 600;
}
.article-content a {
color: var(--primary-600);
text-decoration: underline;
text-decoration-color: var(--primary-200);
text-underline-offset: 3px;
transition: all 0.2s ease;
}
.article-content a:hover {
color: var(--primary-700);
text-decoration-color: var(--primary-600);
}
.article-footer {
border-top: 1px solid rgba(0,0,0,0.1);
padding-top: 2rem;
margin-bottom: 3rem;
}
.article-tags {
margin-bottom: 2rem;
}
.article-tag {
display: inline-block;
background: var(--neutral-100);
color: var(--text-color);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
margin-right: 0.5rem;
margin-bottom: 0.5rem;
text-decoration: none;
transition: background 0.2s ease;
}
.article-tag:hover {
background: var(--primary-100);
color: var(--primary-700);
}
.article-author {
display: flex;
align-items: center;
gap: 1rem;
}
.author-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.author-name {
font-weight: 600;
color: var(--heading-color);
}
.author-date,
.author-updated {
font-size: 0.875rem;
color: var(--text-muted);
}
.related-articles {
margin-bottom: 3rem;
}
.related-articles h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: var(--heading-color);
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.related-card {
background: white;
border: 1px solid var(--neutral-200);
border-radius: 8px;
padding: 1.5rem;
transition: all 0.2s ease;
}
.related-card:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.related-card h4 {
margin-bottom: 0.75rem;
}
.related-card h4 a {
color: var(--heading-color);
text-decoration: none;
font-size: 1.125rem;
line-height: 1.3;
}
.related-card h4 a:hover {
color: var(--primary-600);
}
.related-card p {
color: var(--text-muted);
margin-bottom: 0.75rem;
font-size: 0.95rem;
line-height: 1.5;
}
.related-category {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--primary-600);
font-weight: 600;
}
.article-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--primary-600);
text-decoration: none;
font-weight: 500;
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
border-radius: 6px;
background: rgba(var(--primary-600-rgb), 0.08);
transition: all 0.2s ease;
}
.article-cta:hover {
background: rgba(var(--primary-600-rgb), 0.12);
transform: translateY(-1px);
}
/* Responsive Design for Articles */
@media (max-width: 768px) {
.article-container {
padding: 0 1rem;
}
.article-content {
font-size: 1rem;
}
.article-meta {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.related-grid {
grid-template-columns: 1fr;
}
.article-cta {
padding: 2rem 1rem;
}
}
/* ==========================================================================
CATEGORY PAGE STYLES
========================================================================== */
.category-main {
padding: 2rem 0;
min-height: 60vh;
}
.category-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* Category Header */
.category-header {
text-align: center;
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--accent-light);
}
.category-breadcrumb {
font-size: 0.9rem;
color: var(--text-light);
margin-bottom: 1rem;
}
.category-breadcrumb a {
color: var(--primary-color);
text-decoration: none;
}
.category-breadcrumb a:hover {
text-decoration: underline;
}
.category-title {
font-size: 2.5rem;
color: var(--text-dark);
margin: 1rem 0;
font-weight: 700;
}
.category-description {
font-size: 1.1rem;
color: var(--text-medium);
max-width: 600px;
margin: 0 auto 1.5rem;
line-height: 1.6;
}
.category-stats {
display: flex;
justify-content: center;
gap: 2rem;
font-size: 0.9rem;
color: var(--text-light);
}
/* Featured Article */
.featured-article {
margin-bottom: 3rem;
position: relative;
}
.featured-badge {
position: absolute;
top: -10px;
left: 20px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
z-index: 1;
}
.featured-card {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border: 1px solid var(--accent-light);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.featured-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.featured-content h2 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: var(--text-dark);
}
.featured-content h2 a {
color: inherit;
text-decoration: none;
}
.featured-content h2 a:hover {
color: var(--primary-color);
}
.featured-excerpt {
font-size: 1.1rem;
color: var(--text-medium);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.featured-meta {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
font-size: 0.9rem;
color: var(--text-light);
}
.featured-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--primary-600);
text-decoration: none;
font-weight: 500;
font-size: 0.9rem;
padding: 0.5rem 1rem;
border-radius: 6px;
background: rgba(var(--primary-600-rgb), 0.08);
transition: all 0.2s ease;
}
.featured-cta:hover {
background: rgba(var(--primary-600-rgb), 0.12);
transform: translateY(-1px);
}
/* Articles Section */
.articles-section {
margin-bottom: 3rem;
}
.section-title {
font-size: 2rem;
color: var(--text-dark);
margin-bottom: 2rem;
text-align: center;
}
.articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.article-card {
background: white;
border-radius: 12px;
border: 1px solid var(--accent-light);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.article-card-content {
padding: 1.5rem;
}
.article-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
font-size: 0.85rem;
color: var(--text-light);
}
.article-title {
font-size: 1.3rem;
margin-bottom: 1rem;
line-height: 1.4;
}
.article-title a {
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.article-title a:hover {
color: var(--primary-color);
}
.article-excerpt {
color: var(--text-medium);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.article-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.article-tag {
background: var(--accent-light);
color: var(--text-medium);
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 500;
}
.article-cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--primary-600);
text-decoration: none;
font-weight: 500;
font-size: 0.85rem;
padding: 0.4rem 0.8rem;
border-radius: 6px;
background: rgba(var(--primary-600-rgb), 0.08);
transition: all 0.2s ease;
}
.article-cta:hover {
background: rgba(var(--primary-600-rgb), 0.12);
transform: translateY(-1px);
}
/* Category CTA */
.category-cta {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 3rem 2rem;
border-radius: 12px;
text-align: center;
margin-bottom: 3rem;
}
.cta-content h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: white;
}
.cta-content p {
font-size: 1.1rem;
margin-bottom: 2rem;
opacity: 0.9;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
.cta-button {
display: inline-block;
background: white;
color: var(--primary-color);
padding: 1rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cta-button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
/* Topics Section */
.topics-section {
text-align: center;
}
.topics-section h3 {
font-size: 1.8rem;
color: var(--text-dark);
margin-bottom: 2rem;
}
.topics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.topic-card {
background: white;
border: 1px solid var(--accent-light);
border-radius: 12px;
padding: 1.5rem;
text-decoration: none;
color: var(--text-dark);
transition: all 0.3s ease;
text-align: center;
}
.topic-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: var(--primary-color);
}
.topic-card.active {
background: linear-gradient(135deg, #1e40af, #1e3a8a);
color: white;
border-color: #1e40af;
}
.topic-icon {
font-size: 2rem;
margin-bottom: 1rem;
}
.topic-card h4 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
color: inherit;
}
.topic-card p {
font-size: 0.9rem;
color: inherit;
opacity: 0.8;
margin: 0;
}
/* Responsive Design */
@media (max-width: 768px) {
.category-container {
padding: 0 1rem;
}
.category-title {
font-size: 2rem;
}
.category-stats {
flex-direction: column;
gap: 0.5rem;
}
.articles-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.featured-card,
.category-cta {
padding: 1.5rem;
}
.topics-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}
}
@media (max-width: 480px) {
.category-main {
padding: 1rem 0;
}
.category-header {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
}
.category-title {
font-size: 1.8rem;
}
.featured-card,
.category-cta {
padding: 1rem;
}
.article-card-content {
padding: 1rem;
}
}
.coming-soon-section {
text-align: center;
padding: 4rem 2rem;
background: linear-gradient(135deg, var(--primary-100) 0%, var(--neutral-100) 100%);
border-radius: 16px;
margin: 3rem 0;
}
.coming-soon-content h2 {
font-size: 2rem;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.coming-soon-content p {
font-size: 1.1rem;
color: var(--neutral-700);
max-width: 600px;
margin: 0 auto 2rem;
line-height: 1.6;
}
.coming-soon-cta {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.coming-soon-cta .btn {
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
}
.coming-soon-cta .btn-primary {
background: var(--primary-600);
color: white;
}
.coming-soon-cta .btn-primary:hover {
background: var(--primary-700);
transform: translateY(-1px);
}
.coming-soon-cta .btn-secondary {
background: white;
color: var(--primary-600);
border: 2px solid var(--primary-600);
}
.coming-soon-cta .btn-secondary:hover {
background: var(--primary-600);
color: white;
transform: translateY(-1px);
}
@media (max-width: 768px) {
.coming-soon-section {
padding: 3rem 1.5rem;
margin: 2rem 0;
}
.coming-soon-content h2 {
font-size: 1.5rem;
}
.coming-soon-cta {
flex-direction: column;
align-items: center;
}
.coming-soon-cta .btn {
width: 100%;
max-width: 280px;
}
}
/* Dropdown Menu Styles */
.dropdown {
position: relative;
}
.dropdown-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
}
.dropdown-arrow {
font-size: 0.75rem;
transition: transform 0.3s ease;
}
.dropdown:hover .dropdown-arrow {
transform: rotate(180deg);
}
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
box-shadow: none;
border: none;
background: var(--neutral-50);
border-radius: 8px;
margin-top: 0.5rem;
min-width: auto;
padding: 0.5rem;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: none;
}
.dropdown-section {
padding: 0;
margin-bottom: 0.5rem;
}
.dropdown-header {
font-size: 0.7rem;
margin-bottom: 0.25rem;
}
.dropdown-section a {
padding: 0.375rem 0.5rem;
font-size: 0.8rem;
border-radius: 6px;
}
.dropdown-section a:hover {
margin: 0;
padding: 0.375rem 0.5rem;
}
.article-count {
font-size: 0.7rem;
padding: 0.125rem 0.25rem;
}
/* Override WordPress positioning classes for headers */
/* Override WordPress positioning classes for headers */
header.has-position-absolute,
header.wp-block-template-part.has-position-absolute,
.wp-block-template-part.has-position-absolute {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
z-index: auto !important;
}
/* Hide old WordPress site content that might render below footer */
.site-footer.wp-block-template-part,
footer.wp-block-template-part {
display: none !important;
}
/* Hide old WordPress header content */
header.wp-block-template-part.site-header {
display: none !important;
}
/* Ensure our modern footer containers are visible */
#footer-container {
display: block !important;
}
/* Ensure body doesn't have padding for fixed headers */
body {
padding-top: 0 !important;
}
/* About Page Styles */
.about-page {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
min-height: 100vh;
}
.about-main {
padding: 2rem 0 4rem;
}
.about-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.page-header {
text-align: center;
margin-bottom: 4rem;
padding: 3rem 0;
}
.page-header h1 {
font-family: var(--font-headings);
font-size: 3rem;
font-weight: 700;
color: var(--neutral-900);
margin-bottom: 1rem;
line-height: 1.2;
}
.page-subtitle {
font-size: 1.25rem;
color: var(--neutral-600);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.about-content {
margin-bottom: 4rem;
}
.content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: start;
}
.content-main h2 {
font-family: var(--font-headings);
font-size: 2rem;
font-weight: 600;
color: var(--neutral-900);
margin-bottom: 1.5rem;
line-height: 1.3;
}
.content-main h3 {
font-family: var(--font-headings);
font-size: 1.5rem;
font-weight: 600;
color: var(--neutral-800);
margin: 2rem 0 1rem;
line-height: 1.4;
}
.content-main h4 {
font-family: var(--font-headings);
font-size: 1.25rem;
font-weight: 600;
color: var(--neutral-800);
margin: 1.5rem 0 1rem;
}
.content-main p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--neutral-700);
margin-bottom: 1.5rem;
}
.key-features {
background: var(--neutral-0);
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
margin: 2rem 0;
}
.key-features ul {
list-style: none;
margin: 1rem 0;
}
.key-features ul li {
padding: 0.75rem 0;
border-bottom: 1px solid var(--neutral-100);
font-size: 1rem;
line-height: 1.6;
color: var(--neutral-700);
}
.key-features ul li:last-child {
border-bottom: none;
}
.key-features ul li strong {
color: var(--primary-600);
font-weight: 600;
}
.content-sidebar {
display: flex;
flex-direction: column;
gap: 2rem;
}
.stats-card,
.cta-card {
background: var(--neutral-0);
padding: 2rem;
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
border: 1px solid var(--neutral-100);
}
.stats-card h3,
.cta-card h4 {
font-family: var(--font-headings);
font-size: 1.25rem;
font-weight: 600;
color: var(--neutral-900);
margin-bottom: 1.5rem;
text-align: center;
}
.stat-item {
text-align: center;
padding: 1rem 0;
border-bottom: 1px solid var(--neutral-100);
}
.stat-item:last-child {
border-bottom: none;
}
.stat-number {
font-family: var(--font-headings);
font-size: 2rem;
font-weight: 700;
color: var(--primary-600);
line-height: 1;
}
.stat-label {
font-size: 0.875rem;
color: var(--neutral-600);
margin-top: 0.25rem;
}
.cta-card p {
font-size: 1rem;
line-height: 1.6;
color: var(--neutral-600);
margin-bottom: 1.5rem;
text-align: center;
}
.team-section {
margin: 4rem 0;
padding: 3rem 0;
background: var(--neutral-0);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-lg);
}
.team-header {
text-align: center;
margin-bottom: 3rem;
}
.team-header h2 {
font-family: var(--font-headings);
font-size: 2.5rem;
font-weight: 700;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.team-header p {
font-size: 1.125rem;
color: var(--neutral-600);
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
}
.commitment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
padding: 0 2rem;
}
.commitment-item {
text-align: center;
padding: 2rem;
background: var(--neutral-50);
border-radius: var(--border-radius);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.commitment-item:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.commitment-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
.commitment-item h3 {
font-family: var(--font-headings);
font-size: 1.25rem;
font-weight: 600;
color: var(--neutral-900);
margin-bottom: 1rem;
}
.commitment-item p {
font-size: 1rem;
line-height: 1.6;
color: var(--neutral-600);
}
.contact-cta {
margin: 4rem 0;
padding: 3rem;
background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
border-radius: var(--border-radius-lg);
text-align: center;
color: var(--neutral-0);
}
.cta-content h2 {
font-family: var(--font-headings);
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--neutral-0);
}
.cta-content p {
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Responsive About Page */
@media (max-width: 768px) {
.about-container {
padding: 0 1rem;
}
.page-header {
margin-bottom: 2rem;
padding: 2rem 0;
}
.page-header h1 {
font-size: 2rem;
}
.page-subtitle {
font-size: 1.125rem;
}
.content-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.content-main h2 {
font-size: 1.75rem;
}
.content-main h3 {
font-size: 1.25rem;
}
.team-header h2 {
font-size: 2rem;
}
.commitment-grid {
grid-template-columns: 1fr;
padding: 0 1rem;
}
.contact-cta {
padding: 2rem 1rem;
}
.cta-content h2 {
font-size: 1.75rem;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-buttons .btn {
width: 100%;
max-width: 300px;
}
}
/* Original header fix */
header.has-position-absolute,
header.wp-block-template-part.has-position-absolute {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
z-index: auto !important;
}
/* Version stamp for cache busting */
/* v2024.01.11 */
/* Legal Page Styles */
.legal-page {
background: #f8fafc;
min-height: 100vh;
}
.legal-main {
padding: 2rem 0 4rem;
}
.legal-container {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem;
}
.legal-content {
background: white;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
padding: 3rem;
margin-top: 2rem;
}
.legal-section {
margin-bottom: 3rem;
}
.legal-section:last-child {
margin-bottom: 0;
}
.legal-section h2 {
font-family: var(--font-headings);
font-size: 1.5rem;
font-weight: 600;
color: var(--neutral-900);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--blue-100);
}
.legal-section h3 {
font-family: var(--font-headings);
font-size: 1.25rem;
font-weight: 600;
color: var(--neutral-800);
margin: 2rem 0 1rem;
}
.legal-section p {
font-size: 1rem;
line-height: 1.6;
color: var(--neutral-700);
margin-bottom: 1rem;
}
.legal-section ul {
margin: 1rem 0 1rem 1.5rem;
list-style-type: disc;
}
.legal-section li {
font-size: 1rem;
line-height: 1.6;
color: var(--neutral-700);
margin-bottom: 0.5rem;
}
.contact-info {
background: var(--neutral-50);
padding: 1.5rem;
border-radius: 8px;
margin-top: 1rem;
}
.contact-info p {
margin-bottom: 0.5rem;
}
.contact-info p:last-child {
margin-bottom: 0;
}
.contact-info strong {
color: var(--neutral-900);
}
/* iubenda Policy Styling */
.iubenda-policy-container {
font-family: var(--font-body);
line-height: 1.6;
color: var(--neutral-700);
}
.iubenda-policy-container h1,
.iubenda-policy-container h2,
.iubenda-policy-container h3,
.iubenda-policy-container h4 {
font-family: var(--font-headings);
color: var(--neutral-900);
margin-top: 2rem;
margin-bottom: 1rem;
}
.iubenda-policy-container h1 {
font-size: 2rem;
font-weight: 700;
border-bottom: 2px solid var(--blue-100);
padding-bottom: 0.5rem;
}
.iubenda-policy-container h2 {
font-size: 1.5rem;
font-weight: 600;
border-bottom: 2px solid var(--blue-100);
padding-bottom: 0.5rem;
}
.iubenda-policy-container h3 {
font-size: 1.25rem;
font-weight: 600;
}
.iubenda-policy-container ul,
.iubenda-policy-container ol {
margin: 1rem 0 1rem 1.5rem;
}
.iubenda-policy-container li {
margin-bottom: 0.5rem;
}
.iubenda-policy-container p {
margin-bottom: 1rem;
}
.iubenda-policy-container a {
color: var(--primary-600);
text-decoration: none;
}
.iubenda-policy-container a:hover {
text-decoration: underline;
}
/* Legal page responsive */
@media (max-width: 768px) {
.legal-container {
padding: 1rem;
}
.legal-content {
margin: 2rem 0;
}
.legal-section h2 {
font-size: 1.5rem;
}
.legal-section h3 {
font-size: 1.25rem;
}
.iubenda-policy-container h1 {
font-size: 1.75rem;
}
.iubenda-policy-container h2 {
font-size: 1.5rem;
}
.iubenda-policy-container h3 {
font-size: 1.25rem;
}
}
/* ========================================================================
WordPress Block Styles for Restored Article Content
======================================================================== */
/* Main Content Wrapper */
.main-content {
background: #ffffff;
min-height: 100vh;
padding: 0;
}
/* WordPress Block - Post Terms (Category Tags) */
.wp-block-post-terms {
text-align: center;
margin: 2rem 0 1rem;
padding: 0.5rem 0;
}
.wp-block-post-terms a {
display: inline-block;
background: var(--primary-100);
color: var(--primary-600);
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
transition: all 0.3s ease;
}
.wp-block-post-terms a:hover {
background: var(--primary-600);
color: white;
transform: translateY(-1px);
}
.taxonomy-category.is-style-sub-heading {
border-bottom: 1px solid var(--neutral-200);
margin-bottom: 2rem;
padding-bottom: 1rem;
}
/* WordPress Block - Post Title */
.wp-block-post-title {
font-family: var(--font-headings);
font-size: 2.5rem;
font-weight: 800;
color: var(--neutral-900);
line-height: 1.2;
margin: 2rem auto;
max-width: 800px;
padding: 0 2rem;
}
.has-text-align-center {
text-align: center;
}
/* WordPress Block - Post Content Container */
.entry-content,
.wp-block-post-content {
max-width: 800px;
margin: 0 auto;
padding: 0 2rem 4rem;
line-height: 1.8;
}
.is-layout-constrained {
max-width: 800px;
margin: 0 auto;
}
/* WordPress Block - Headings */
.wp-block-heading {
font-family: var(--font-headings);
color: var(--neutral-900);
margin: 2.5rem 0 1.5rem;
line-height: 1.3;
}
.wp-block-heading:first-child {
margin-top: 0;
}
.entry-content h1.wp-block-heading {
font-size: 2.25rem;
font-weight: 800;
border-bottom: 3px solid var(--primary-100);
padding-bottom: 0.5rem;
margin-bottom: 2rem;
}
.entry-content h2.wp-block-heading {
font-size: 1.875rem;
font-weight: 700;
color: var(--neutral-800);
position: relative;
padding-left: 1rem;
}
.entry-content h2.wp-block-heading::before {
content: '';
position: absolute;
left: 0;
top: 0.25rem;
width: 4px;
height: 1.5rem;
background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
border-radius: 2px;
}
.entry-content h3.wp-block-heading {
font-size: 1.5rem;
font-weight: 600;
color: var(--neutral-700);
margin: 2rem 0 1rem;
}
.entry-content h4.wp-block-heading {
font-size: 1.25rem;
font-weight: 600;
margin: 1.5rem 0 1rem;
}
/* WordPress Block - Paragraphs */
.wp-block-paragraph {
margin: 1.5rem 0;
font-size: 1.125rem;
line-height: 1.8;
color: var(--neutral-700);
}
.wp-block-paragraph:first-child {
margin-top: 0;
}
.wp-block-paragraph:last-child {
margin-bottom: 0;
}
/* WordPress Block - Links */
.wp-block-paragraph a,
.entry-content a {
color: var(--primary-600);
text-decoration: underline;
text-decoration-color: var(--primary-300);
text-underline-offset: 3px;
transition: all 0.3s ease;
}
.wp-block-paragraph a:hover,
.entry-content a:hover {
color: var(--primary-700);
text-decoration-color: var(--primary-600);
text-decoration-thickness: 2px;
}
/* WordPress Block - Lists */
.wp-block-list,
.entry-content ul,
.entry-content ol {
margin: 1.5rem 0;
padding-left: 2rem;
}
.wp-block-list li,
.entry-content li {
margin: 0.75rem 0;
font-size: 1.125rem;
line-height: 1.7;
color: var(--neutral-700);
}
.entry-content ul li::marker {
color: var(--primary-600);
font-size: 1.25em;
}
/* WordPress Block - Buttons */
.wp-block-buttons {
display: flex;
gap: 1rem;
margin: 2rem 0;
flex-wrap: wrap;
}
.wp-block-button {
display: inline-block;
}
.wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--success-600);
color: white;
padding: 1rem 2rem;
border-radius: var(--border-radius);
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.wp-block-button__link:hover {
background: #047857;
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.is-style-large .wp-block-button__link {
padding: 1.25rem 2.5rem;
font-size: 1.125rem;
}
/* WordPress Block - Groups and Columns */
.wp-block-group {
margin: 2rem 0;
}
.wp-block-columns {
display: flex;
gap: 2rem;
margin: 2rem 0;
flex-wrap: wrap;
}
.wp-block-column {
flex: 1;
min-width: 300px;
}
.is-stacked-on-mobile .wp-block-column {
min-width: 100%;
}
.are-vertically-aligned-center {
align-items: center;
}
.is-vertically-aligned-center {
align-self: center;
}
/* WordPress Block - Video */
.wp-block-video {
margin: 2rem 0;
text-align: center;
}
.wp-block-video video {
max-width: 100%;
height: auto;
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
}
.wp-block-video figcaption,
.wp-element-caption {
margin-top: 1rem;
font-size: 0.875rem;
color: var(--neutral-600);
font-style: italic;
text-align: center;
}
/* WordPress Block - Images */
.wp-block-image {
margin: 2rem 0;
text-align: center;
}
.wp-block-image img {
max-width: 100%;
height: auto;
border-radius: var(--border-radius);
box-shadow: var(--shadow-md);
}
.has-aspect-ratio-16\/9 img {
aspect-ratio: 16/9;
object-fit: cover;
}
.has-object-fit-cover img {
object-fit: cover;
}
/* WordPress Block - Separator */
.wp-block-separator {
border: none;
border-top: 2px solid var(--neutral-200);
margin: 3rem auto;
width: 60%;
max-width: 200px;
}
.has-alpha-channel-opacity {
opacity: 0.6;
}
/* WordPress Spacing Variables */
:root {
--wp--preset--spacing--xs: 1rem;
--wp--preset--spacing--sm: 1.5rem;
--wp--preset--spacing--md: 2rem;
--wp--preset--spacing--lg: 3rem;
--wp--preset--spacing--xl: 4rem;
--wp--preset--spacing--xxl: 6rem;
--wp--preset--font-size--52: 3.25rem;
--wp--preset--font-size--28: 1.75rem;
--wp--preset--color--primary-500: var(--primary-600);
--wp--preset--color--success-600: var(--success-600);
--wp--preset--color--neutral-400: var(--neutral-600);
}
/* WordPress Block - Sub-heading Style */
.is-style-sub-heading {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--primary-600);
}
/* WordPress Block - Utility Classes */
.has-text-color {
color: inherit;
}
.has-primary-500-color {
color: var(--primary-600) !important;
}
.has-success-600-background-color {
background-color: var(--success-600) !important;
}
.has-neutral-400-color {
color: var(--neutral-600) !important;
}
.has-background {
padding: 1rem;
border-radius: var(--border-radius);
}
.has-link-color a {
color: inherit;
}
.has-52-font-size {
font-size: 3.25rem;
}
.has-28-font-size {
font-size: 1.75rem;
}
.alignfull {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.alignwide {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.aligncenter {
text-align: center;
margin-left: auto;
margin-right: auto;
}
/* WordPress Block - Container Layouts */
.is-layout-flex {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.is-layout-flow > * + * {
margin-top: 1.5rem;
}
.is-layout-constrained {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* WordPress Block - Position Utilities */
.has-position-relative {
position: relative;
}
.has-position-static {
position: static;
}
.has-overflow-hidden {
overflow: hidden;
}
/* WordPress Block - Order Utilities */
.has-order {
order: var(--order-mobile, 0);
}
.is-reverse-on-mobile .wp-block-column:first-child {
order: 2;
}
.is-reverse-on-mobile .wp-block-column:last-child {
order: 1;
}
/* WordPress Block - Embedded iFrames */
iframe {
max-width: 100%;
border-radius: var(--border-radius);
box-shadow: var(--shadow-md);
}
/* WordPress Block - Strong Text */
.wp-block-paragraph strong,
.entry-content strong {
font-weight: 700;
color: var(--neutral-900);
}
/* Responsive Design for WordPress Blocks */
@media (max-width: 768px) {
.wp-block-post-title {
font-size: 2rem;
padding: 0 1rem;
}
.entry-content,
.wp-block-post-content {
padding: 0 1rem 3rem;
}
.entry-content h1.wp-block-heading {
font-size: 1.875rem;
}
.entry-content h2.wp-block-heading {
font-size: 1.5rem;
padding-left: 0.75rem;
}
.entry-content h2.wp-block-heading::before {
width: 3px;
height: 1.25rem;
}
.entry-content h3.wp-block-heading {
font-size: 1.25rem;
}
.wp-block-paragraph {
font-size: 1rem;
}
.wp-block-columns {
flex-direction: column;
gap: 1rem;
}
.wp-block-column {
min-width: 100%;
}
.wp-block-buttons {
flex-direction: column;
align-items: center;
}
.wp-block-button {
width: 100%;
text-align: center;
}
.has-52-font-size {
font-size: 2rem;
}
.has-28-font-size {
font-size: 1.5rem;
}
.alignfull,
.alignwide {
margin-left: -1rem;
margin-right: -1rem;
width: calc(100% + 2rem);
}
}
@media (max-width: 480px) {
.wp-block-post-title {
font-size: 1.75rem;
}
.entry-content h1.wp-block-heading {
font-size: 1.5rem;
}
.entry-content h2.wp-block-heading {
font-size: 1.25rem;
}
.wp-block-paragraph {
font-size: 0.9375rem;
line-height: 1.7;
}
.has-52-font-size {
font-size: 1.75rem;
}
.has-28-font-size {
font-size: 1.25rem;
}
}
/* Article Call-to-Action Sections */
.cta-section {
position: relative;
overflow: hidden;
}
.cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
pointer-events: none;
}
.cta-section .wp-block-button__link {
position: relative;
transition: all 0.3s ease;
text-shadow: none;
}
.cta-section .wp-block-button__link:hover {
background: rgba(255, 255, 255, 0.95) !important;
color: var(--primary-700) !important;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
}
.cta-section h2 {
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.cta-section .wp-block-paragraph {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.billing-toggle span:first-of-type {
opacity: 1;
transition: opacity 0.3s ease;
}
.billing-toggle span:last-of-type {
opacity: 0.5;
transition: opacity 0.3s ease;
}
#billing-toggle:checked ~ span:first-of-type {
opacity: 0.5;
}
#billing-toggle:checked ~ span:last-of-type {
opacity: 1;
}
/* Default State: Monthly is active */
.billing-toggle .billing-label:first-of-type {
opacity: 1;
}
.billing-toggle .billing-label:last-of-type {
opacity: 0.5;
}
/* Active State: Yearly is active */
.billing-toggle.yearly-billing-active .billing-label:first-of-type {
opacity: 0.5;
}
.billing-toggle.yearly-billing-active .billing-label:last-of-type {
opacity: 1;
}