/*
Theme Name: My Custom Theme
Description: A custom WordPress theme
Version: 1.0
Author: Your Name
Text Domain: my-custom-theme
*/
/* WooCommerce Products Header Title - Show only on Category Pages */
.woocommerce-products-header__title {
display: none !important;
}
.tax-product_cat .woocommerce-products-header__title,
.tax-product_tag .woocommerce-products-header__title {
display: block !important;
}
/* Single Product Full Width */
body.single-product {
overflow-x: hidden;
}
body.single-product #page {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
body.single-product #primary.site-main.single-product-wrapper {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
float: none !important;
clear: both !important;
}
body.single-product #primary.site-main .row,
body.single-product #primary.site-main .woocommerce {
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
}
body.single-product #primary.site-main .col-12,
body.single-product #primary.site-main .product {
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Override any container styles */
body.single-product .container,
body.single-product .container-fluid,
body.single-product .content-area,
body.single-product .woocommerce,
body.single-product .woocommerce-page,
body.single-product .woocommerce #content,
body.single-product .woocommerce-page #content {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
/* Ensure product images and content are full width */
body.single-product .woocommerce-product-gallery,
body.single-product .summary.entry-summary,
body.single-product div.product div.images,
body.single-product div.product div.summary {
width: 100% !important;
max-width: 100% !important;
float: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Hide product meta section */
.product-meta.mt-4,
.product-summary {
display: none !important;
}
/* Hide WooCommerce tab titles but keep content */
.woocommerce-tabs .wc-tabs,
.woocommerce-Tabs-panel h2:first-child,
.woocommerce-Reviews-title,
#reviews #comments,
#review_form_wrapper {
display: none !important;
}
.woocommerce-Tabs-panel {
display: block !important;
padding: 0 !important;
border: none !important;
}
.woocommerce-tabs .panel,
.woocommerce-tabs {
margin: 0 !important;
}
/* WooCommerce Related Products - 4 Columns */
.related.products ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.related.products ul.products li.product {
width: 100% !important;
margin: 0 !important;
padding: 15px !important;
float: none !important;
clear: none !important;
max-width: 100% !important;
flex: 0 0 calc(25% - 15px) !important;
box-sizing: border-box !important;
}
/* Reset any column classes that might be interfering */
.related.products ul.products.columns-4,
.related.products ul.products.columns-3,
.related.products ul.products.columns-2,
.related.products ul.products.columns-1 {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
}
/* Style for individual product items */
.related.products .product {
margin-bottom: 0 !important;
padding: 20px !important;
text-align: center;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
/* Style for product short description in related products */
.related.products .product .product-short-description {
margin: 10px !important;
font-size: small;
}
/* WooCommerce Category/Tag Archive - 4 Columns */
body.woocommerce.tax-product_cat ul.products,
body.woocommerce.tax-product_tag ul.products,
body.woocommerce-page.tax-product_cat ul.products,
body.woocommerce-page.tax-product_tag ul.products {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
width: 100% !important;
}
body.woocommerce.tax-product_cat ul.products li.product,
body.woocommerce.tax-product_tag ul.products li.product,
body.woocommerce-page.tax-product_cat ul.products li.product,
body.woocommerce-page.tax-product_tag ul.products li.product {
width: 100% !important;
height: 220px !important;
margin: 0 !important;
padding: 15px !important;
box-sizing: border-box !important;
float: none !important;
clear: none !important;
max-width: 100% !important;
flex: 0 0 calc(25% - 15px) !important;
}
/* Responsive adjustments */
@media (max-width: 1200px) {
body.woocommerce.tax-product_cat ul.products,
body.woocommerce.tax-product_tag ul.products,
body.woocommerce-page.tax-product_cat ul.products,
body.woocommerce-page.tax-product_tag ul.products {
grid-template-columns: repeat(3, 1fr) !important;
}
body.woocommerce.tax-product_cat ul.products li.product,
body.woocommerce.tax-product_tag ul.products li.product,
body.woocommerce-page.tax-product_cat ul.products li.product,
body.woocommerce-page.tax-product_tag ul.products li.product {
flex: 0 0 calc(33.333% - 14px) !important;
}
}
@media (max-width: 768px) {
body.woocommerce.tax-product_cat ul.products,
body.woocommerce.tax-product_tag ul.products,
body.woocommerce-page.tax-product_cat ul.products,
body.woocommerce-page.tax-product_tag ul.products {
grid-template-columns: repeat(2, 1fr) !important;
}
body.woocommerce.tax-product_cat ul.products li.product,
body.woocommerce.tax-product_tag ul.products li.product,
body.woocommerce-page.tax-product_cat ul.products li.product,
body.woocommerce-page.tax-product_tag ul.products li.product {
flex: 0 0 calc(50% - 10px) !important;
}
}
@media (max-width: 480px) {
body.woocommerce.tax-product_cat ul.products,
body.woocommerce.tax-product_tag ul.products,
body.woocommerce-page.tax-product_cat ul.products,
body.woocommerce-page.tax-product_tag ul.products {
grid-template-columns: 1fr !important;
}
body.woocommerce.tax-product_cat ul.products li.product,
body.woocommerce.tax-product_tag ul.products li.product,
body.woocommerce-page.tax-product_cat ul.products li.product,
body.woocommerce-page.tax-product_tag ul.products li.product {
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* WooCommerce Breadcrumb - Full Width Background with Contained Content */
.woocommerce-breadcrumb {
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
position: relative !important;
left: 50% !important;
right: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
padding: 12px 0 !important;
background: #694A70 !important;
box-sizing: border-box !important;
text-align: left !important;
font-size: 14px !important;
}
/* Breadcrumb Inner Content */
.woocommerce-breadcrumb .container {
max-width: 1200px !important;
width: 100% !important;
padding: 0 20px !important;
margin: 0 auto !important;
}
/* Breadcrumb Links */
.woocommerce-breadcrumb a {
color: #666 !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
}
.woocommerce-breadcrumb a:hover {
color: #000 !important;
text-decoration: underline !important;
}
/* Breadcrumb Separator */
.woocommerce-breadcrumb .delimiter {
margin: 0 8px !important;
color: #999 !important;
font-weight: normal !important;
}
/* Remove any max-width from parent containers */
.woocommerce-breadcrumb,
.woocommerce-breadcrumb > *,
.woocommerce-breadcrumb > * > * {
max-width: none !important;
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #333;
}
/* Header Styles */
.site-header {
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.site-header:hover {
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
position: relative;
}
/* Mobile Menu Toggle */
.mobile-menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
background: none;
border: none;
cursor: pointer;
padding: 8px;
z-index: 1001;
width: 44px;
height: 44px;
position: relative;
}
.hamburger-line {
width: 25px;
height: 3px;
background-color: #333;
margin: 2px 0;
transition: all 0.3s ease;
border-radius: 2px;
display: block;
}
/* Hamburger Animation */
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Navigation */
.main-navigation {
transition: all 0.3s ease;
}
.main-navigation ul {
list-style: none;
display: flex;
gap: 30px;
margin: 0;
padding: 0;
}
.main-navigation a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s;
padding: 10px 0;
}
.main-navigation a:hover {
color: #007cba;
}
/* Main Content */
.site-main {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.content-area {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
}
/* Hero Section */
.hero-section {
color: white;
padding: 100px 0;
text-align: center;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.hero-title {
font-size: 3rem;
margin-bottom: 20px;
font-weight: 700;
}
.hero-subtitle {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.cta-button {
display: inline-block;
background: #fff;
color: #333;
padding: 15px 30px;
text-decoration: none;
border-radius: 5px;
font-weight: 600;
transition: transform 0.3s;
}
.cta-button:hover {
transform: translateY(-2px);
}
/* Footer */
.site-footer {
background: #333;
color: white;
text-align: center;
padding: 40px 20px;
}
/* Responsive Styles */
/* Large screens and tablets */
@media (max-width: 1200px) {
.header-container {
padding: 0 20px;
}
}
@media (max-width: 1024px) {
.header-container {
padding: 0 15px;
}
.main-navigation ul {
gap: 20px;
}
}
/* Tablets and mobile */
@media (max-width: 768px) {
.header-container {
height: 60px;
padding: 0 15px;
}
.mobile-menu-toggle {
display: flex;
}
.main-navigation {
position: fixed;
top: 60px;
left: 0;
right: 0;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999;
padding: 20px;
max-height: calc(100vh - 60px);
overflow-y: auto;
}
.main-navigation.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.main-navigation ul {
flex-direction: column;
gap: 0;
text-align: center;
}
.main-navigation a {
display: block;
padding: 15px 20px;
font-size: 16px;
border-bottom: 1px solid #eee;
width: 100%;
}
.main-navigation li:last-child a {
border-bottom: none;
}
.site-logo img.logo-img {
max-height: 35px;
}
.site-title {
font-size: 16px;
}
/* Content adjustments */
.content-area {
grid-template-columns: 1fr;
}
.hero-title {
font-size: 2rem;
}
}
/* Small mobile devices */
@media (max-width: 480px) {
.header-container {
height: 55px;
padding: 0 10px;
}
.site-logo img.logo-img {
max-height: 30px;
}
.site-title {
font-size: 14px;
}
.mobile-menu-toggle {
padding: 3px;
}
.hamburger-line {
width: 20px;
height: 2px;
}
.main-navigation {
top: 55px;
padding: 15px;
}
.main-navigation a {
padding: 12px 15px;
font-size: 15px;
}
}
/* Desktop styles */
@media (min-width: 769px) {
.mobile-menu-toggle {
display: none;
}
.main-navigation {
position: static;
transform: none;
opacity: 1;
visibility: visible;
background: transparent;
box-shadow: none;
padding: 0;
max-height: none;
overflow: visible;
}
.main-navigation ul {
flex-direction: row;
text-align: left;
gap: 30px;
}
.main-navigation a {
padding: 10px 0;
border-bottom: none;
width: auto;
}
}
/* Agent Stats */
.agent-stats {
display: flex;
justify-content: space-between;
margin-top: 20px;
padding: 15px 0;
border-top: 1px solid var(--border-gray);
}
.agent-stats .stat {
text-align: center;
}
.agent-stats .stat-value {
font-size: 18px;
font-weight: 700;
color: var(--primary-purple);
display: block;
margin-bottom: 4px;
}
.agent-stats .stat-label {
font-size: 12px;
color: var(--medium-gray);
display: block;
}
/* home */
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-purple: #714b67;
--purple-dark: #5d3e54;
--purple-light: #8b6b81;
--teal: #00a09d;
--ai-blue: #2c5aa0;
--success: #28a745;
--warning: #ffc107;
--error: #dc3545;
--dark-gray: #343a40;
--medium-gray: #6c757d;
--light-gray: #adb5bd;
--border-gray: #dee2e6;
--bg-gray: #f8f9fa;
--white: #ffffff;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: var(--dark-gray);
overflow-x: hidden;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Navigation */
.main-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 999;
padding: 16px 0;
border-bottom: 1px solid var(--border-gray);
transform: translateY(-100%);
transition: transform 0.3s ease;
}
.main-nav.visible {
transform: translateY(0);
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo-text {
font-size: 24px;
font-weight: 800;
background: linear-gradient(135deg, var(--primary-purple), var(--ai-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-links {
display: flex;
list-style: none;
gap: 32px;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--dark-gray);
font-weight: 500;
transition: color 0.3s ease;
}
.nav-links a:hover {
color: var(--primary-purple);
}
.nav-cta {
background: var(--primary-purple) !important;
color: white !important;
padding: 8px 16px;
border-radius: 6px;
}
.nav-cta:hover {
background: var(--purple-dark) !important;
}
/* CTA Button */
.cta-button {
background: var(--primary-purple);
color: white;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
border: none;
cursor: pointer;
display: inline-block;
}
.cta-button:hover {
background: var(--purple-dark);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(113, 75, 103, 0.3);
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 120px 0 80px;
position: relative;
overflow: hidden;
width: 100%;
}
.hero .container {
max-width: 100%;
padding: 0 24px;
}
.hero-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 48px;
}
.hero-stats {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
padding: 0 24px;
}
@media (max-width: 1024px) {
.hero-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 16px;
}
}
.hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 48px;
}
.hero-text h1 {
font-size: 48px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
background: linear-gradient(135deg, var(--primary-purple), var(--ai-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-text p {
font-size: 20px;
color: var(--medium-gray);
margin-bottom: 32px;
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.btn-primary {
background: var(--primary-purple);
color: white;
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-primary:hover {
background: var(--purple-dark);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(113, 75, 103, 0.3);
}
.btn-secondary {
background: transparent;
color: var(--primary-purple);
border: 2px solid var(--primary-purple);
padding: 14px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.btn-secondary:hover {
background: var(--primary-purple);
color: white;
}
.hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.stat-item {
text-align: center;
padding: 20px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.stat-number {
font-size: 32px;
font-weight: 700;
color: var(--primary-purple);
display: block;
}
.stat-label {
font-size: 14px;
color: var(--medium-gray);
margin-top: 8px;
}
.hero-visual {
position: relative;
height: 400px;
background: linear-gradient(135deg, var(--primary-purple), var(--ai-blue));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
/* Removed animation-related properties from the main container */
}
.floating-elements {
position: absolute;
width: 100%;
height: 100%;
/* Removed 3D transform to stop floating effect */
}
.floating-card {
position: absolute;
background: white;
border-radius: 12px;
padding: 16px;
box-shadow: 0 8px 30px rgba(0,0,0,0.15);
animation: float 6s ease-in-out infinite;
min-width: 120px;
text-align: center;
transform: translateZ(0); /* Force hardware acceleration */
will-change: transform; /* Optimize for animations */
backface-visibility: hidden; /* Prevent flickering */
z-index: 1; /* Ensure cards stay above background */
}
.floating-card:nth-child(1) {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.floating-card:nth-child(2) {
top: 60%;
right: 15%;
animation-delay: 2s;
}
.floating-card:nth-child(3) {
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% {
transform: translate3d(0, 0, 0) rotate(0deg);
}
50% {
transform: translate3d(0, -20px, 0) rotate(2deg);
}
}
/* Prevent layout shifts during scroll */
.hero {
overflow: hidden;
position: relative;
}
/* Ensure smooth scrolling behavior */
html {
scroll-behavior: smooth;
}
/* Section Headers */
.section-header {
text-align: center;
margin-bottom: 64px;
}
.section-title {
font-size: 40px;
font-weight: 700;
margin-bottom: 16px;
color: var(--dark-gray);
}
.section-subtitle {
font-size: 18px;
color: var(--medium-gray);
max-width: 600px;
margin: 0 auto;
}
/* Framework Section */
.framework-section {
padding: 80px 0;
background: white;
}
.framework-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.step-card {
background: white;
border: 2px solid var(--border-gray);
border-radius: 16px;
padding: 32px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.step-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary-purple), var(--ai-blue));
}
.step-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
border-color: var(--primary-purple);
}
.step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-purple), var(--ai-blue));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
font-weight: 700;
margin: 0 auto 24px;
}
.step-title {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
color: var(--dark-gray);
}
.step-description {
color: var(--medium-gray);
line-height: 1.6;
}
/* Agents Section */
.agents-section {
padding: 80px 0;
background: var(--bg-gray);
}
.agents-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-bottom: 48px;
}
.agents-cta {
text-align: center;
}
.agent-card {
background: white;
border-radius: 16px;
padding: 24px;
border: 1px solid var(--border-gray);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.agent-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--teal), var(--ai-blue));
}
.agent-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}
.agent-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--teal), var(--ai-blue));
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
margin-bottom: 16px;
}
.agent-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--dark-gray);
}
.agent-description {
color: var(--medium-gray);
font-size: 14px;
line-height: 1.5;
margin-bottom: 16px;
}
.agent-stats {
display: flex;
justify-content: space-between;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border-gray);
}
.stat {
text-align: center;
flex: 1;
}
.stat-value {
font-weight: 600;
color: var(--primary-purple);
font-size: 16px;
display: block;
}
.stat-label {
font-size: 12px;
color: var(--medium-gray);
margin-top: 4px;
}
/* How It Works Timeline */
.how-it-works-section {
padding: 80px 0;
background: white;
}
.methodology-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.methodology-timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--border-gray);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: 64px;
}
.timeline-item:nth-child(odd) .timeline-content {
margin-right: 60%;
text-align: left;
}
.timeline-item:nth-child(even) .timeline-content {
margin-left: 60%;
text-align: left;
}
.timeline-marker {
position: absolute;
left: 50%;
top: 20px;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--primary-purple), var(--ai-blue));
color: white;
padding: 12px 20px;
border-radius: 25px;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
z-index: 2;
}
.timeline-content {
background: var(--bg-gray);
padding: 32px;
border-radius: 16px;
border: 1px solid var(--border-gray);
}
.timeline-content h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
color: var(--dark-gray);
}
.timeline-content p {
color: var(--medium-gray);
margin-bottom: 20px;
line-height: 1.6;
}
.timeline-features {
list-style: none;
margin-bottom: 24px;
}
.timeline-features li {
position: relative;
padding-left: 24px;
margin-bottom: 8px;
color: var(--medium-gray);
}
.timeline-features li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--success);
font-weight: 600;
}
.timeline-metric {
background: white;
padding: 16px;
border-radius: 8px;
border: 1px solid var(--border-gray);
}
.metric-label {
font-size: 14px;
color: var(--medium-gray);
display: block;
}
.metric-value {
font-size: 16px;
font-weight: 600;
color: var(--primary-purple);
}
/* Industry Solutions */
.industry-section {
padding: 80px 0;
background: var(--bg-gray);
}
.industry-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
}
.industry-card {
background: white;
border-radius: 16px;
padding: 32px;
border: 1px solid var(--border-gray);
transition: all 0.3s ease;
}
.industry-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.industry-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;
}
.industry-card h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
color: var(--dark-gray);
}
.industry-card > p {
color: var(--medium-gray);
margin-bottom: 24px;
line-height: 1.6;
}
.industry-features {
margin-bottom: 24px;
}
.feature-item {
display: flex;
align-items: center;
margin-bottom: 12px;
padding: 8px 0;
}
.feature-icon {
margin-right: 12px;
font-size: 16px;
}
.industry-results {
display: flex;
justify-content: space-between;
padding-top: 24px;
border-top: 1px solid var(--border-gray);
}
.result-stat {
text-align: center;
flex: 1;
}
.result-stat .stat-number {
display: block;
font-size: 24px;
font-weight: 700;
color: var(--primary-purple);
}
.result-stat .stat-label {
font-size: 12px;
color: var(--medium-gray);
margin-top: 4px;
}
/* ROI Calculator */
.roi-section {
padding: 80px 0;
background: white;
}
.roi-calculator {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-top: 48px;
background: var(--bg-gray);
border-radius: 20px;
padding: 40px;
}
.calculator-inputs h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 24px;
color: var(--dark-gray);
}
.input-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 32px;
}
.input-group {
display: flex;
flex-direction: column;
}
.input-group label {
font-weight: 500;
margin-bottom: 8px;
color: var(--dark-gray);
}
.calculator-input {
padding: 12px 16px;
border: 1px solid var(--border-gray);
border-radius: 8px;
background: white;
font-size: 14px;
color: var(--dark-gray);
}
.calculator-input:focus {
outline: none;
border-color: var(--primary-purple);
box-shadow: 0 0 0 3px rgba(113, 75, 103, 0.1);
}
.calculator-results {
background: white;
border-radius: 16px;
padding: 32px;
border: 1px solid var(--border-gray);
}
.calculator-results h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 24px;
color: var(--dark-gray);
}
.roi-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-bottom: 32px;
}
.roi-metric {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: var(--bg-gray);
border-radius: 12px;
}
.metric-icon {
font-size: 24px;
}
.metric-content .metric-value {
display: block;
font-size: 24px;
font-weight: 700;
color: var(--primary-purple);
}
.metric-content .metric-label {
font-size: 12px;
color: var(--medium-gray);
}
.roi-breakdown {
border-top: 1px solid var(--border-gray);
padding-top: 24px;
}
.roi-breakdown h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: var(--dark-gray);
}
.breakdown-items {
display: flex;
flex-direction: column;
gap: 12px;
}
.breakdown-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
}
.breakdown-label {
color: var(--medium-gray);
}
.breakdown-value {
font-weight: 600;
color: var(--primary-purple);
}
/* Success Stories */
.success-section {
padding: 80px 0;
background: var(--bg-gray);
}
.case-studies {
display: flex;
flex-direction: column;
gap: 48px;
margin-top: 48px;
}
.case-study {
background: white;
border-radius: 20px;
padding: 40px;
border: 1px solid var(--border-gray);
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.case-study-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--border-gray);
}
.company-info h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
color: var(--dark-gray);
}
.company-info p {
color: var(--medium-gray);
font-size: 14px;
}
.case-study-metric {
text-align: right;
}
.case-study-metric .metric-value {
font-size: 32px;
font-weight: 700;
color: var(--primary-purple);
display: block;
}
.case-study-metric .metric-label {
font-size: 14px;
color: var(--medium-gray);
}
.case-study-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
margin-bottom: 32px;
}
.challenge h4,
.solution h4,
.results h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 16px;
color: var(--dark-gray);
}
.challenge p,
.solution ul {
color: var(--medium-gray);
line-height: 1.6;
}
.solution ul {
list-style: none;
padding: 0;
}
.solution li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
}
.solution li::before {
content: '•';
position: absolute;
left: 0;
color: var(--primary-purple);
font-weight: 600;
}
.result-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.result-item {
text-align: center;
padding: 16px;
background: var(--bg-gray);
border-radius: 8px;
}
.result-number {
display: block;
font-size: 20px;
font-weight: 700;
color: var(--primary-purple);
}
.result-label {
font-size: 12px;
color: var(--medium-gray);
margin-top: 4px;
}
.case-study-quote {
background: var(--bg-gray);
padding: 24px;
border-radius: 12px;
border-left: 4px solid var(--primary-purple);
}
.case-study-quote p {
font-size: 16px;
font-style: italic;
color: var(--dark-gray);
margin-bottom: 16px;
line-height: 1.6;
}
.quote-author {
display: flex;
align-items: center;
gap: 12px;
}
.quote-author .author-avatar {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--primary-purple), var(--ai-blue));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 14px;
}
.quote-author .author-info h4 {
font-weight: 600;
color: var(--dark-gray);
margin: 0;
}
.quote-author .author-info p {
color: var(--medium-gray);
font-size: 12px;
margin: 0;
}
/* Platform Features */
.platform-section {
padding: 80px 0;
background: white;
}
.platform-features {
margin-top: 48px;
}
.feature-category {
margin-bottom: 64px;
}
.feature-category h3 {
font-size: 28px;
font-weight: 600;
margin-bottom: 32px;
color: var(--dark-gray);
text-align: center;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.features-grid .feature-item {
background: white;
padding: 24px;
border-radius: 12px;
border: 1px solid var(--border-gray);
transition: all 0.3s ease;
display: flex;
align-items: flex-start;
gap: 16px;
}
.features-grid .feature-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}
.features-grid .feature-icon {
font-size: 24px;
margin-right: 0;
flex-shrink: 0;
}
.feature-content h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
color: var(--dark-gray);
}
.feature-content p {
color: var(--medium-gray);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
/* CTA Section */
.cta-section {
padding: 80px 0;
background: linear-gradient(135deg, var(--primary-purple), var(--ai-blue));
color: white;
text-align: center;
}
.cta-content h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 16px;
}
.cta-content p {
font-size: 18px;
margin-bottom: 32px;
opacity: 0.9;
}
.cta-section .btn-primary {
background: white;
color: var(--primary-purple);
}
.cta-section .btn-primary:hover {
background: var(--bg-gray);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255,255,255,0.3);
}
.cta-section .btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-section .btn-secondary:hover {
background: white;
color: var(--primary-purple);
}
/* Loading Animation */
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid var(--border-gray);
border-top: 4px solid var(--primary-purple);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Smooth scroll */
html {
scroll-behavior: smooth;
}
/* Accessibility improvements */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus styles */
a:focus,
button:focus,
.calculator-input:focus {
outline: 2px solid var(--primary-purple);
outline-offset: 2px;
}
/* ===== RESPONSIVE STYLES ===== */
/* Large tablets and small desktops */
@media (max-width: 1024px) {
.container {
padding: 0 32px;
}
.hero-text h1 {
font-size: 42px;
}
.section-title {
font-size: 36px;
}
.agents-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.industry-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
}
/* Tablets */
@media (max-width: 768px) {
.container {
padding: 0 20px;
}
/* Hero Section */
.hero {
padding: 100px 0 60px;
}
.hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.hero-text h1 {
font-size: 36px;
}
.hero-text p {
font-size: 18px;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 16px;
}
.hero-visual {
height: 300px;
}
.floating-card {
min-width: 100px;
padding: 12px;
font-size: 14px;
}
/* Sections */
.section-title {
font-size: 32px;
}
.section-subtitle {
font-size: 16px;
}
/* Framework Steps */
.framework-steps {
grid-template-columns: 1fr;
gap: 24px;
}
.step-title {
font-size: 20px;
}
/* Timeline */
.methodology-timeline::before {
left: 30px;
}
.timeline-item:nth-child(odd) .timeline-content,
.timeline-item:nth-child(even) .timeline-content {
margin-left: 60px;
margin-right: 0;
text-align: left;
}
.timeline-marker {
left: 30px;
transform: translateX(-50%);
font-size: 12px;
padding: 8px 16px;
}
/* ROI Calculator */
.roi-calculator {
grid-template-columns: 1fr;
gap: 32px;
padding: 24px;
}
.input-grid {
grid-template-columns: 1fr;
}
.roi-metrics {
grid-template-columns: 1fr;
}
/* Case Studies */
.case-study {
padding: 24px;
}
.case-study-header {
flex-direction: column;
gap: 16px;
text-align: center;
}
.case-study-content {
grid-template-columns: 1fr;
gap: 24px;
}
.result-metrics {
grid-template-columns: 1fr 1fr;
}
/* Features Grid */
.features-grid {
grid-template-columns: 1fr;
}
/* Industry Results */
.industry-results {
flex-direction: column;
gap: 16px;
text-align: center;
}
/* CTA Buttons */
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-content h2 {
font-size: 28px;
}
}
/* Mobile phones */
@media (max-width: 480px) {
.container {
padding: 0 16px;
}
/* Hero */
.hero {
padding: 80px 0 40px;
}
.hero-text h1 {
font-size: 28px;
}
.hero-text p {
font-size: 16px;
margin-bottom: 24px;
}
.hero-visual {
height: 250px;
}
.floating-card {
min-width: 80px;
padding: 8px;
font-size: 12px;
}
.floating-card strong {
font-size: 12px;
}
.floating-card p {
font-size: 10px;
margin: 4px 0 0 0;
}
/* Sections */
.section-title {
font-size: 28px;
}
.section-subtitle {
font-size: 15px;
}
/* Step Cards */
.step-card {
padding: 24px;
}
.step-title {
font-size: 18px;
}
.step-description {
font-size: 14px;
}
/* Agent Cards */
.agent-card {
padding: 20px;
}
.agent-stats {
flex-direction: column;
gap: 12px;
}
/* Timeline */
.timeline-marker {
position: static;
transform: none;
margin-bottom: 16px;
display: inline-block;
}
.timeline-content {
padding: 24px;
}
.timeline-content h3 {
font-size: 20px;
}
/* ROI Calculator */
.calculator-inputs h3,
.calculator-results h3 {
font-size: 20px;
}
.roi-metric {
padding: 16px;
flex-direction: column;
text-align: center;
gap: 8px;
}
.metric-content .metric-value {
font-size: 20px;
}
/* Case Studies */
.case-study-metric .metric-value {
font-size: 24px;
}
.company-info h3 {
font-size: 20px;
}
.result-metrics {
grid-template-columns: 1fr;
gap: 12px;
}
/* Industry Cards */
.industry-card {
padding: 24px;
}
.industry-card h3 {
font-size: 20px;
}
.feature-item {
flex-direction: column;
text-align: center;
gap: 8px;
}
/* Platform Features */
.features-grid .feature-item {
flex-direction: column;
text-align: center;
gap: 12px;
}
.feature-category h3 {
font-size: 24px;
}
/* CTA Section */
.cta-content h2 {
font-size: 24px;
}
.cta-content p {
font-size: 16px;
}
.btn-primary,
.btn-secondary {
padding: 12px 24px;
font-size: 14px;
width: 100%;
max-width: 280px;
}
.cta-button {
padding: 10px 20px;
font-size: 14px;
}
}
/* Very small screens */
@media (max-width: 360px) {
.hero-text h1 {
font-size: 24px;
}
.section-title {
font-size: 24px;
}
.step-number {
width: 50px;
height: 50px;
font-size: 20px;
}
.agent-icon {
width: 40px;
height: 40px;
font-size: 18px;
}
.case-study,
.industry-card,
.step-card {
padding: 16px;
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.hero::before {
background-size: 50px 50px;
}
}
/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
.hero {
padding: 60px 0 40px;
}
.hero-visual {
height: 200px;
}
.floating-card {
min-width: 60px;
padding: 6px;
font-size: 10px;
}
}
/* platform */
/* Platform Overview CSS - Built on AgenticOdoo Design System */
/* Import base styles and variables from main stylesheet */
@import url('responsive_css.css');
/* Additional CSS Variables for Platform Page */
:root {
--gradient-primary: linear-gradient(135deg, var(--primary-purple), var(--ai-blue));
--gradient-secondary: linear-gradient(135deg, var(--teal), var(--ai-blue));
--gradient-accent: linear-gradient(135deg, var(--purple-light), var(--primary-purple));
--shadow-elevated: 0 20px 40px rgba(0,0,0,0.1);
--shadow-floating: 0 8px 25px rgba(113, 75, 103, 0.15);
--border-radius-large: 20px;
--border-radius-medium: 16px;
--border-radius-small: 12px;
--animation-duration: 0.6s;
--animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Breadcrumb Navigation */
.breadcrumb-nav {
background: var(--bg-gray);
padding: 12px 0;
border-bottom: 1px solid var(--border-gray);
margin-top: 80px;
}
.breadcrumb {
list-style: none;
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
font-size: 14px;
}
.breadcrumb li {
color: var(--medium-gray);
}
.breadcrumb li:not(:last-child)::after {
content: '›';
margin-left: 8px;
color: var(--light-gray);
}
.breadcrumb a {
color: var(--primary-purple);
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb a:hover {
color: var(--purple-dark);
}
/* Platform Hero Section */
.platform-hero {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.platform-hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.platform-hero .hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.platform-hero .hero-text h1 {
font-size: 52px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.platform-hero .hero-subtitle {
font-size: 20px;
color: var(--medium-gray);
margin-bottom: 40px;
line-height: 1.6;
}
.platform-hero .hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.platform-hero .stat-item {
text-align: center;
padding: 20px;
background: white;
border-radius: var(--border-radius-medium);
box-shadow: var(--shadow-floating);
border: 1px solid var(--border-gray);
}
.platform-hero .stat-number {
font-size: 28px;
font-weight: 700;
color: var(--primary-purple);
display: block;
margin-bottom: 4px;
}
.platform-hero .stat-label {
font-size: 12px;
color: var(--medium-gray);
font-weight: 500;
}
.platform-hero .hero-cta {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
/* Platform Diagram */
.hero-visual {
position: relative;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.platform-diagram {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.central-hub {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120px;
height: 120px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
z-index: 3;
box-shadow: var(--shadow-elevated);
}
.central-hub .hub-icon {
font-size: 32px;
margin-bottom: 8px;
}
.central-hub span {
font-size: 12px;
text-align: center;
}
.agent-nodes {
position: relative;
width: 100%;
height: 100%;
}
.agent-node {
position: absolute;
width: 80px;
height: 80px;
background: white;
border: 2px solid var(--primary-purple);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
text-align: center;
color: var(--primary-purple);
box-shadow: var(--shadow-floating);
animation: float 4s ease-in-out infinite;
z-index: 2;
}
.agent-node .node-icon {
font-size: 20px;
margin-bottom: 4px;
}
.agent-node.sales {
top: 20%;
left: 15%;
animation-delay: 0s;
}
.agent-node.inventory {
top: 10%;
right: 20%;
animation-delay: 0.5s;
}
.agent-node.manufacturing {
bottom: 15%;
right: 10%;
animation-delay: 1s;
}
.agent-node.support {
bottom: 20%;
left: 10%;
animation-delay: 1.5s;
}
.agent-node.finance {
top: 50%;
left: 5%;
animation-delay: 2s;
}
.agent-node.hr {
top: 50%;
right: 5%;
animation-delay: 2.5s;
}
.connection-lines {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.connection-lines::before,
.connection-lines::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
border: 2px dashed var(--purple-light);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0.3;
animation: rotate 20s linear infinite;
}
.connection-lines::after {
width: 300px;
height: 300px;
animation-direction: reverse;
animation-duration: 30s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
@keyframes rotate {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
/* What Is Section */
.what-is-section {
padding: 100px 0;
background: white;
}
.what-is-content .content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
margin-top: 60px;
}
.content-text h3 {
font-size: 32px;
font-weight: 700;
margin-bottom: 24px;
color: var(--dark-gray);
}
.content-text > p {
font-size: 18px;
color: var(--medium-gray);
line-height: 1.7;
margin-bottom: 40px;
}
.key-differentiators {
display: flex;
flex-direction: column;
gap: 32px;
}
.differentiator {
display: flex;
gap: 20px;
align-items: flex-start;
}
.diff-icon {
font-size: 32px;
background: var(--gradient-primary);
border-radius: var(--border-radius-small);
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.diff-content h4 {
font-size: 20px;
font-weight: 600;
margin-bottom: 8px;
color: var(--dark-gray);
}
.diff-content p {
color: var(--medium-gray);
line-height: 1.6;
}
/* Transformation Diagram */
.transformation-diagram {
background: var(--bg-gray);
border-radius: var(--border-radius-large);
padding: 40px;
border: 1px solid var(--border-gray);
}
.before-after {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 40px;
align-items: center;
}
.before h4, .after h4 {
text-align: center;
font-size: 20px;
font-weight: 600;
margin-bottom: 24px;
color: var(--dark-gray);
}
.traditional-features, .agentic-features {
display: flex;
flex-direction: column;
gap: 16px;
}
.transformation-diagram .feature-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: var(--border-radius-small);
font-size: 14px;
font-weight: 500;
}
.traditional-features .feature-item {
background: #fee;
color: #c53030;
border: 1px solid #feb2b2;
}
.agentic-features .feature-item {
background: #f0fff4;
color: #22543d;
border: 1px solid #9ae6b4;
}
.arrow {
font-size: 32px;
color: var(--primary-purple);
font-weight: bold;
}
/* Capabilities Section */
.capabilities-section {
padding: 100px 0;
background: var(--bg-gray);
}
.capabilities-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 60px;
}
.capability-category {
background: white;
border-radius: var(--border-radius-large);
overflow: hidden;
box-shadow: var(--shadow-floating);
border: 1px solid var(--border-gray);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.capability-category:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-elevated);
}
.category-header {
background: var(--gradient-primary);
color: white;
padding: 32px;
text-align: center;
}
.category-icon {
font-size: 48px;
margin-bottom: 16px;
display: block;
}
.category-header h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
}
.category-header p {
opacity: 0.9;
font-size: 14px;
}
.capability-list {
padding: 32px;
display: flex;
flex-direction: column;
gap: 24px;
}
.capability-item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.capability-icon {
font-size: 24px;
background: var(--bg-gray);
border-radius: var(--border-radius-small);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 2px solid var(--border-gray);
}
.capability-content h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--dark-gray);
}
.capability-content p {
color: var(--medium-gray);
line-height: 1.6;
margin-bottom: 12px;
font-size: 14px;
}
.capability-metrics {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.capability-metrics .metric {
background: var(--primary-purple);
color: white;
padding: 4px 8px;
border-radius: 16px;
font-size: 11px;
font-weight: 500;
}
/* Architecture Section */
.architecture-section {
padding: 100px 0;
background: white;
}
.architecture-content {
margin-top: 60px;
}
.architecture-diagram {
display: flex;
flex-direction: column;
gap: 24px;
margin-bottom: 60px;
}
.architecture-layer {
background: var(--bg-gray);
border-radius: var(--border-radius-medium);
padding: 24px;
border: 1px solid var(--border-gray);
transition: all 0.3s ease;
}
.architecture-layer:hover {
background: white;
box-shadow: var(--shadow-floating);
}
.architecture-layer h4 {
font-size: 20px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 16px;
text-align: center;
}
.layer-components {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 16px;
}
.component {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px;
background: white;
border-radius: var(--border-radius-small);
border: 1px solid var(--border-gray);
font-size: 12px;
font-weight: 500;
text-align: center;
color: var(--dark-gray);
transition: all 0.3s ease;
}
.component:hover {
background: var(--primary-purple);
color: white;
transform: translateY(-2px);
}
.component-icon {
font-size: 20px;
}
.architecture-layer.presentation {
border-left: 4px solid var(--teal);
}
.architecture-layer.application {
border-left: 4px solid var(--primary-purple);
}
.architecture-layer.intelligence {
border-left: 4px solid var(--ai-blue);
}
.architecture-layer.integration {
border-left: 4px solid var(--success);
}
.architecture-layer.data {
border-left: 4px solid var(--warning);
}
.architecture-features .feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.arch-feature {
background: var(--bg-gray);
padding: 24px;
border-radius: var(--border-radius-medium);
text-align: center;
border: 1px solid var(--border-gray);
transition: all 0.3s ease;
}
.arch-feature:hover {
background: white;
box-shadow: var(--shadow-floating);
transform: translateY(-4px);
}
.arch-feature .feature-icon {
font-size: 32px;
margin-bottom: 16px;
display: block;
}
.arch-feature h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--dark-gray);
}
.arch-feature p {
color: var(--medium-gray);
font-size: 14px;
line-height: 1.6;
}
/* Advantages Section */
.advantages-section {
padding: 100px 0;
background: var(--bg-gray);
}
.advantages-content {
margin-top: 60px;
}
.comparison-table {
background: white;
border-radius: var(--border-radius-large);
overflow: hidden;
box-shadow: var(--shadow-floating);
margin-bottom: 60px;
}
.table-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
background: var(--gradient-primary);
color: white;
font-weight: 600;
font-size: 14px;
}
.table-header > div {
padding: 20px;
text-align: center;
}
.feature-column {
text-align: left !important;
border-right: 1px solid rgba(255,255,255,0.2);
}
.table-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
border-bottom: 1px solid var(--border-gray);
}
.table-row:last-child {
border-bottom: none;
}
.feature-cell {
padding: 24px;
border-right: 1px solid var(--border-gray);
}
.feature-cell h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
color: var(--dark-gray);
}
.feature-cell p {
font-size: 12px;
color: var(--medium-gray);
}
.competitor-cell, .agenticodoo-cell {
padding: 24px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
}
.competitor-cell {
border-right: 1px solid var(--border-gray);
}
.agenticodoo-cell {
background: #f0fff4;
border-left: 3px solid var(--success);
}
.value {
font-weight: 600;
font-size: 14px;
}
.value.positive {
color: var(--success);
}
.value.negative {
color: var(--error);
}
.value.neutral {
color: var(--warning);
}
.description {
font-size: 11px;
color: var(--medium-gray);
}
.key-differentiators-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
}
.differentiator-card {
background: white;
padding: 32px;
border-radius: var(--border-radius-large);
box-shadow: var(--shadow-floating);
text-align: center;
border: 1px solid var(--border-gray);
transition: all 0.3s ease;
}
.differentiator-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-elevated);
}
.differentiator-card .card-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;
}
.differentiator-card h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
color: var(--dark-gray);
}
.differentiator-card p {
color: var(--medium-gray);
line-height: 1.6;
margin-bottom: 20px;
}
.advantage-metrics {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.advantage-metrics .metric {
background: var(--primary-purple);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
/* Demo Section */
.demo-section {
padding: 100px 0;
background: white;
}
.demo-content {
margin-top: 60px;
}
.demo-video-container {
margin-bottom: 60px;
}
.video-wrapper {
position: relative;
border-radius: var(--border-radius-large);
overflow: hidden;
box-shadow: var(--shadow-elevated);
}
.video-placeholder {
position: relative;
width: 100%;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.video-placeholder:hover {
transform: scale(1.02);
}
.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-purple) 0%, var(--ai-blue) 100%);
opacity: 0.9;
}
.play-button {
position: relative;
z-index: 3;
transition: all 0.3s ease;
filter: drop-shadow(0 8px 20px rgba(0,0,0,0.3));
}
.play-button:hover {
transform: scale(1.1);
}
.video-info {
position: absolute;
bottom: 32px;
left: 32px;
color: white;
z-index: 3;
}
.video-info h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
}
.video-info p {
font-size: 14px;
opacity: 0.9;
}
.video-controls {
margin-top: 24px;
}
.control-tabs {
display: flex;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
}
.tab-button {
padding: 12px 24px;
border: 2px solid var(--border-gray);
background: white;
color: var(--medium-gray);
border-radius: 25px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.tab-button:hover {
border-color: var(--primary-purple);
color: var(--primary-purple);
}
.tab-button.active {
background: var(--primary-purple);
border-color: var(--primary-purple);
color: white;
}
.demo-highlights {
margin-bottom: 60px;
}
.demo-highlights h3 {
font-size: 28px;
font-weight: 600;
margin-bottom: 32px;
text-align: center;
color: var(--dark-gray);
}
.highlights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.highlight-item {
background: var(--bg-gray);
padding: 24px;
border-radius: var(--border-radius-medium);
border: 1px solid var(--border-gray);
transition: all 0.3s ease;
position: relative;
}
.highlight-item:hover {
background: white;
box-shadow: var(--shadow-floating);
transform: translateY(-4px);
}
.highlight-icon {
font-size: 32px;
margin-bottom: 16px;
display: block;
}
.highlight-content h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--dark-gray);
}
.highlight-content p {
color: var(--medium-gray);
line-height: 1.6;
margin-bottom: 12px;
font-size: 14px;
}
.timestamp {
position: absolute;
top: 16px;
right: 16px;
background: var(--primary-purple);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 600;
}
.demo-cta {
text-align: center;
background: var(--bg-gray);
padding: 40px;
border-radius: var(--border-radius-large);
border: 1px solid var(--border-gray);
}
.demo-cta h3 {
font-size: 28px;
font-weight: 600;
margin-bottom: 12px;
color: var(--dark-gray);
}
.demo-cta p {
font-size: 16px;
color: var(--medium-gray);
margin-bottom: 24px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.demo-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* Enhanced CTA Section */
.cta-section {
padding: 100px 0;
background: var(--gradient-primary);
color: white;
text-align: center;
}
.cta-content h2 {
font-size: 40px;
font-weight: 700;
margin-bottom: 16px;
}
.cta-content > p {
font-size: 18px;
margin-bottom: 40px;
opacity: 0.9;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.cta-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin: 40px 0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.cta-stats .stat-item {
background: rgba(255,255,255,0.1);
padding: 24px;
border-radius: var(--border-radius-medium);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
}
.cta-stats .stat-number {
font-size: 32px;
font-weight: 700;
display: block;
margin-bottom: 8px;
}
.cta-stats .stat-label {
font-size: 14px;
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 24px;
}
.cta-section .btn-primary {
background: white;
color: var(--primary-purple);
}
.cta-section .btn-primary:hover {
background: var(--bg-gray);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255,255,255,0.3);
}
.cta-section .btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-section .btn-secondary:hover {
background: white;
color: var(--primary-purple);
}
.cta-guarantee {
font-size: 14px;
opacity: 0.8;
margin-top: 16px;
}
/* Back to Home */
.back-to-home {
background: var(--bg-gray);
padding: 24px 0;
border-top: 1px solid var(--border-gray);
}
.back-link {
color: var(--primary-purple);
text-decoration: none;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 0.3s ease;
}
.back-link:hover {
color: var(--purple-dark);
transform: translateX(-4px);
}
/* Navigation Active State */
.nav-links a.active {
color: var(--primary-purple);
font-weight: 600;
}
/* Loading Animation for Video */
.video-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 4;
}
.loading-spinner {
width: 40px;
height: 40px;
border: 4px solid rgba(255,255,255,0.3);
border-top: 4px solid white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
/* Accessibility Improvements */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus Styles */
.tab-button:focus,
.video-placeholder:focus {
outline: 2px solid var(--primary-purple);
outline-offset: 2px;
}
/* ===== RESPONSIVE STYLES ===== */
/* Large tablets and small desktops */
@media (max-width: 1024px) {
.platform-hero .hero-content {
gap: 60px;
}
.platform-hero .hero-text h1 {
font-size: 46px;
}
.content-grid {
gap: 60px;
}
.capabilities-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.cta-stats {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* Tablets */
@media (max-width: 768px) {
.breadcrumb-nav {
margin-top: 70px;
}
.platform-hero {
padding: 60px 0;
}
.platform-hero .hero-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.platform-hero .hero-text h1 {
font-size: 36px;
}
.platform-hero .hero-subtitle {
font-size: 18px;
}
.platform-hero .hero-stats {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.hero-visual {
height: 350px;
}
.central-hub {
width: 100px;
height: 100px;
}
.central-hub .hub-icon {
font-size: 28px;
}
.agent-node {
width: 60px;
height: 60px;
font-size: 9px;
}
.agent-node .node-icon {
font-size: 16px;
}
.content-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.before-after {
grid-template-columns: 1fr;
gap: 24px;
}
.arrow {
transform: rotate(90deg);
justify-self: center;
}
.table-header,
.table-row {
grid-template-columns: 1fr;
}
.table-header > div {
display: none;
}
.table-header .feature-column {
display: block;
}
.competitor-cell,
.agenticodoo-cell {
border-right: none;
border-bottom: 1px solid var(--border-gray);
}
.feature-cell {
border-right: none;
border-bottom: 1px solid var(--border-gray);
}
.video-placeholder {
height: 250px;
}
.video-info {
bottom: 16px;
left: 16px;
}
.video-info h3 {
font-size: 18px;
}
.highlights-grid {
grid-template-columns: 1fr;
}
.control-tabs {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 8px;
}
.tab-button {
flex-shrink: 0;
padding: 10px 20px;
font-size: 13px;
}
}
/* Mobile phones */
@media (max-width: 480px) {
.platform-hero .hero-text h1 {
font-size: 28px;
}
.platform-hero .hero-subtitle {
font-size: 16px;
}
.platform-hero .hero-stats {
grid-template-columns: 1fr;
}
.platform-hero .hero-cta {
flex-direction: column;
align-items: center;
}
.btn-primary,
.btn-secondary {
width: 100%;
max-width: 280px;
}
.hero-visual {
height: 250px;
}
.central-hub {
width: 80px;
height: 80px;
}
.central-hub .hub-icon {
font-size: 20px;
margin-bottom: 4px;
}
.central-hub span {
font-size: 10px;
}
.agent-node {
width: 50px;
height: 50px;
font-size: 8px;
}
.agent-node .node-icon {
font-size: 14px;
margin-bottom: 2px;
}
.section-title {
font-size: 28px;
}
.section-subtitle {
font-size: 15px;
}
.content-text h3 {
font-size: 24px;
}
.content-text > p {
font-size: 16px;
}
.differentiator {
flex-direction: column;
text-align: center;
}
.diff-icon {
width: 50px;
height: 50px;
font-size: 24px;
align-self: center;
}
.capability-category {
margin-bottom: 20px;
}
.category-header {
padding: 24px;
}
.category-icon {
font-size: 36px;
}
.capability-list {
padding: 24px;
}
.capability-item {
flex-direction: column;
text-align: center;
gap: 12px;
}
.layer-components {
grid-template-columns: 1fr;
}
.key-differentiators-grid {
grid-template-columns: 1fr;
}
.differentiator-card {
padding: 24px;
}
.video-placeholder {
height: 200px;
}
.play-button svg {
width: 60px;
height: 60px;
}
.demo-buttons {
flex-direction: column;
align-items: center;
}
.cta-content h2 {
font-size: 28px;
}
.cta-content > p {
font-size: 16px;
}
}
/* Very small screens */
@media (max-width: 360px) {
.platform-hero .hero-text h1 {
font-size: 24px;
}
.section-title {
font-size: 24px;
}
.category-header,
.capability-list,
.arch-feature,
.differentiator-card {
padding: 16px;
}
.hero-visual {
height: 200px;
}
.central-hub {
width: 60px;
height: 60px;
}
.agent-node {
width: 40px;
height: 40px;
font-size: 7px;
}
.agent-node .node-icon {
font-size: 12px;
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.platform-hero::before {
background-size: 50px 50px;
}
}
/* Print styles */
@media print {
.mobile-menu-toggle,
.main-nav,
.breadcrumb-nav,
.video-placeholder,
.cta-section,
.back-to-home {
display: none;
}
.platform-hero {
background: white !important;
color: black !important;
}
.hero-visual {
display: none;
}
.platform-hero .hero-content {
grid-template-columns: 1fr;
}
}
/* no-code-builder */
/* No-Code Builder CSS - Enhanced AgenticOdoo Design System */
/* Additional CSS Variables for Builder Page */
:root {
--builder-bg: #fafbfc;
--builder-border: #e1e8ed;
--builder-shadow: 0 2px 8px rgba(0,0,0,0.04);
--builder-shadow-hover: 0 4px 16px rgba(0,0,0,0.08);
--builder-primary: var(--primary-purple);
--builder-secondary: var(--ai-blue);
--builder-success: #00d4aa;
--builder-warning: #ffb020;
--builder-danger: #ff6b6b;
--node-bg: #ffffff;
--node-border: #e1e8ed;
--connection-color: #8b5a9f;
--grid-color: #f0f3f6;
--code-font: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;
}
/* Breadcrumb Navigation */
.breadcrumb-nav {
background: var(--bg-gray);
padding: 12px 0;
border-bottom: 1px solid var(--border-gray);
margin-top: 80px;
}
/* Builder Hero Section */
.builder-hero {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.builder-hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.builder-hero .hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, var(--builder-success), var(--builder-secondary));
color: white;
padding: 8px 16px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
margin-bottom: 24px;
}
.builder-hero .hero-text h1 {
font-size: 52px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
background: linear-gradient(135deg, var(--primary-purple), var(--ai-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.builder-hero .hero-subtitle {
font-size: 20px;
color: var(--medium-gray);
margin-bottom: 40px;
line-height: 1.6;
}
.builder-hero .hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-bottom: 40px;
}
.builder-hero .stat-item {
text-align: center;
padding: 20px;
background: white;
border-radius: 16px;
box-shadow: var(--builder-shadow);
border: 1px solid var(--builder-border);
transition: all 0.3s ease;
}
.builder-hero .stat-item:hover {
transform: translateY(-2px);
box-shadow: var(--builder-shadow-hover);
}
.builder-hero .stat-number {
font-size: 28px;
font-weight: 700;
color: var(--primary-purple);
display: block;
margin-bottom: 4px;
}
.builder-hero .stat-label {
font-size: 12px;
color: var(--medium-gray);
font-weight: 500;
}
/* Builder Mockup */
.hero-visual {
position: relative;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.builder-mockup {
width: 100%;
height: 450px;
background: white;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
border: 1px solid var(--builder-border);
overflow: hidden;
}
.mockup-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: var(--builder-bg);
border-bottom: 1px solid var(--builder-border);
}
.mockup-controls {
display: flex;
gap: 8px;
}
.control {
width: 12px;
height: 12px;
border-radius: 50%;
}
.control.red { background: #ff5f57; }
.control.yellow { background: #ffbd2e; }
.control.green { background: #28ca42; }
.mockup-title {
font-size: 14px;
font-weight: 600;
color: var(--dark-gray);
}
.mockup-content {
display: flex;
height: calc(100% - 49px);
}
/* Builder Sidebar */
.builder-sidebar {
width: 200px;
background: var(--builder-bg);
border-right: 1px solid var(--builder-border);
padding: 16px;
}
.sidebar-section h4 {
font-size: 12px;
font-weight: 600;
color: var(--medium-gray);
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.component-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
background: white;
border: 1px solid var(--builder-border);
margin-bottom: 8px;
cursor: grab;
transition: all 0.2s ease;
font-size: 12px;
}
.component-item:hover {
background: var(--primary-purple);
color: white;
transform: translateX(4px);
}
.component-item:active {
cursor: grabbing;
}
.component-icon {
font-size: 14px;
}
/* Builder Canvas */
.builder-canvas {
flex: 1;
background: white;
position: relative;
background-image:
radial-gradient(circle, var(--grid-color) 1px, transparent 1px);
background-size: 20px 20px;
padding: 20px;
}
.workflow-node {
position: absolute;
background: var(--node-bg);
border: 2px solid var(--node-border);
border-radius: 8px;
min-width: 120px;
box-shadow: var(--builder-shadow);
transition: all 0.3s ease;
}
.workflow-node:hover {
box-shadow: var(--builder-shadow-hover);
transform: translateY(-2px);
}
.workflow-node.start-node {
top: 20px;
left: 20px;
border-color: var(--builder-success);
}
.workflow-node.process-node {
top: 120px;
left: 20px;
border-color: var(--builder-secondary);
}
.workflow-node.ai-node {
top: 220px;
left: 20px;
border-color: var(--primary-purple);
}
.workflow-node.action-node {
top: 320px;
left: 20px;
border-color: var(--builder-warning);
}
.node-header {
display: flex;
align-items: center;
gap: 8px;
padding: 12px;
border-bottom: 1px solid var(--builder-border);
background: var(--builder-bg);
font-weight: 600;
font-size: 14px;
}
.node-icon {
font-size: 16px;
}
.node-body {
padding: 12px;
}
.node-setting {
font-size: 12px;
color: var(--medium-gray);
background: var(--builder-bg);
padding: 4px 8px;
border-radius: 4px;
border: 1px solid var(--builder-border);
}
.workflow-connection {
position: absolute;
width: 2px;
height: 60px;
background: var(--connection-color);
left: 80px;
}
.workflow-connection:nth-of-type(2) { top: 80px; }
.workflow-connection:nth-of-type(4) { top: 180px; }
.workflow-connection:nth-of-type(6) { top: 280px; }
/* Builder Properties */
.builder-properties {
width: 250px;
background: var(--builder-bg);
border-left: 1px solid var(--builder-border);
padding: 16px;
}
.properties-header h4 {
font-size: 14px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 16px;
}
.property-group {
margin-bottom: 16px;
}
.property-group label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--dark-gray);
margin-bottom: 6px;
}
.property-group select {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--builder-border);
border-radius: 6px;
background: white;
font-size: 12px;
color: var(--dark-gray);
}
/* Interface Section */
.interface-section {
padding: 100px 0;
background: white;
}
.interface-showcase {
margin-top: 60px;
}
.interface-tabs {
display: flex;
gap: 8px;
margin-bottom: 40px;
justify-content: center;
flex-wrap: wrap;
}
.tab-btn {
padding: 12px 24px;
border: 2px solid var(--builder-border);
background: white;
color: var(--medium-gray);
border-radius: 25px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.tab-btn:hover {
border-color: var(--primary-purple);
color: var(--primary-purple);
}
.tab-btn.active {
background: var(--primary-purple);
border-color: var(--primary-purple);
color: white;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.feature-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.showcase-content h3 {
font-size: 32px;
font-weight: 700;
margin-bottom: 16px;
color: var(--dark-gray);
}
.showcase-content p {
font-size: 18px;
color: var(--medium-gray);
line-height: 1.6;
margin-bottom: 32px;
}
/* Canvas Demo */
.canvas-demo {
background: white;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
overflow: hidden;
}
.canvas-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: var(--builder-bg);
border-bottom: 1px solid var(--builder-border);
}
.toolbar-group {
display: flex;
gap: 8px;
}
.tool-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--builder-border);
background: white;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.tool-btn:hover {
background: var(--builder-bg);
}
.tool-btn.primary {
background: var(--primary-purple);
color: white;
border-color: var(--primary-purple);
}
.tool-btn.success {
background: var(--builder-success);
color: white;
border-color: var(--builder-success);
}
.tool-btn .icon {
font-size: 14px;
}
.canvas-workspace {
height: 300px;
background: white;
position: relative;
background-image:
radial-gradient(circle, var(--grid-color) 1px, transparent 1px);
background-size: 16px 16px;
}
.workflow-grid {
position: relative;
width: 100%;
height: 100%;
}
.grid-node {
position: absolute;
}
.node {
background: white;
border: 2px solid var(--builder-border);
border-radius: 8px;
padding: 12px;
min-width: 100px;
text-align: center;
box-shadow: var(--builder-shadow);
transition: all 0.3s ease;
}
.node:hover {
transform: translateY(-2px);
box-shadow: var(--builder-shadow-hover);
}
.node.trigger-node { border-color: var(--builder-success); }
.node.data-node { border-color: var(--builder-secondary); }
.node.ai-node { border-color: var(--primary-purple); }
.node.action-node { border-color: var(--builder-warning); }
.node-icon {
font-size: 20px;
margin-bottom: 8px;
display: block;
}
.node-title {
font-size: 12px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 4px;
}
.node-subtitle {
font-size: 10px;
color: var(--medium-gray);
}
.connection-point {
position: absolute;
width: 8px;
height: 8px;
background: var(--connection-color);
border-radius: 50%;
border: 2px solid white;
}
.connection-point.out {
bottom: -4px;
right: 50%;
transform: translateX(50%);
}
.connection-point.in {
top: -4px;
right: 50%;
transform: translateX(50%);
}
.connection-line {
position: absolute;
height: 2px;
background: var(--connection-color);
}
/* Components Library */
.components-library {
background: white;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
overflow: hidden;
height: 400px;
}
.library-search {
display: flex;
padding: 16px;
border-bottom: 1px solid var(--builder-border);
background: var(--builder-bg);
}
.search-input {
flex: 1;
padding: 8px 12px;
border: 1px solid var(--builder-border);
border-radius: 6px 0 0 6px;
font-size: 14px;
}
.search-btn {
padding: 8px 12px;
border: 1px solid var(--builder-border);
border-left: none;
border-radius: 0 6px 6px 0;
background: white;
cursor: pointer;
}
.library-categories {
display: flex;
gap: 8px;
padding: 16px;
border-bottom: 1px solid var(--builder-border);
background: var(--builder-bg);
overflow-x: auto;
}
.category {
padding: 6px 12px;
border: 1px solid var(--builder-border);
border-radius: 16px;
background: white;
font-size: 12px;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s ease;
}
.category:hover,
.category.active {
background: var(--primary-purple);
color: white;
border-color: var(--primary-purple);
}
.components-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
padding: 16px;
height: calc(100% - 140px);
overflow-y: auto;
}
.component-card {
background: white;
border: 1px solid var(--builder-border);
border-radius: 8px;
padding: 12px;
text-align: center;
cursor: grab;
transition: all 0.3s ease;
position: relative;
}
.component-card:hover {
transform: translateY(-2px);
box-shadow: var(--builder-shadow-hover);
border-color: var(--primary-purple);
}
.component-card:active {
cursor: grabbing;
}
.card-icon {
font-size: 24px;
margin-bottom: 8px;
display: block;
}
.card-title {
font-size: 12px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 4px;
}
.card-description {
font-size: 10px;
color: var(--medium-gray);
line-height: 1.4;
}
.card-badge {
position: absolute;
top: 4px;
right: 4px;
background: var(--builder-success);
color: white;
padding: 2px 6px;
border-radius: 8px;
font-size: 8px;
font-weight: 600;
}
.card-badge.new {
background: var(--builder-warning);
}
/* Feature Lists */
.feature-list {
display: flex;
flex-direction: column;
gap: 20px;
}
.feature-item {
display: flex;
gap: 16px;
align-items: flex-start;
}
.feature-icon {
font-size: 24px;
background: var(--builder-bg);
border-radius: 8px;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 2px solid var(--builder-border);
}
.feature-text strong {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 4px;
}
.feature-text p {
color: var(--medium-gray);
font-size: 14px;
line-height: 1.5;
margin: 0;
}
.library-stats {
display: flex;
gap: 32px;
margin-bottom: 32px;
}
.stat-group {
text-align: center;
}
.stat-number {
font-size: 32px;
font-weight: 700;
color: var(--primary-purple);
display: block;
}
.stat-label {
font-size: 14px;
color: var(--medium-gray);
}
.component-features {
display: flex;
flex-direction: column;
gap: 12px;
}
.component-features .feature-item {
align-items: center;
}
.component-features .feature-icon {
width: 32px;
height: 32px;
font-size: 16px;
}
.component-features strong {
display: inline;
margin-right: 8px;
}
/* Properties Panel */
.properties-panel {
background: white;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
overflow: hidden;
height: 400px;
}
.panel-header {
padding: 16px;
background: var(--builder-bg);
border-bottom: 1px solid var(--builder-border);
}
.panel-header h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 4px;
}
.component-type {
font-size: 12px;
color: var(--medium-gray);
background: white;
padding: 4px 8px;
border-radius: 4px;
border: 1px solid var(--builder-border);
}
.properties-content {
padding: 16px;
height: calc(100% - 80px);
overflow-y: auto;
}
.property-section {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid var(--builder-border);
}
.property-section:last-child {
border-bottom: none;
}
.property-section h5 {
font-size: 14px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 12px;
}
.property-field {
margin-bottom: 12px;
}
.property-field label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--dark-gray);
margin-bottom: 6px;
}
.property-input,
.property-textarea,
.property-select {
width: 100%;
padding: 8px 12px;
border: 1px solid var(--builder-border);
border-radius: 6px;
background: white;
font-size: 12px;
color: var(--dark-gray);
font-family: inherit;
}
.property-textarea {
resize: vertical;
min-height: 60px;
}
.slider-container {
display: flex;
align-items: center;
gap: 12px;
}
.property-slider {
flex: 1;
}
.slider-value {
font-size: 12px;
font-weight: 600;
color: var(--primary-purple);
min-width: 40px;
}
.field-mapping {
display: flex;
flex-direction: column;
gap: 8px;
}
.mapping-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
background: var(--builder-bg);
border-radius: 6px;
border: 1px solid var(--builder-border);
}
.field-name {
font-family: var(--code-font);
font-size: 11px;
color: var(--dark-gray);
}
.field-type {
font-size: 10px;
color: var(--medium-gray);
background: white;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--builder-border);
}
.property-actions {
display: flex;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--builder-border);
}
/* Testing Suite */
.testing-suite {
background: white;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
overflow: hidden;
height: 400px;
}
.testing-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
background: var(--builder-bg);
border-bottom: 1px solid var(--builder-border);
}
.testing-header h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark-gray);
}
.test-controls {
display: flex;
gap: 8px;
}
.test-btn {
padding: 6px 12px;
border: 1px solid var(--builder-border);
background: white;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
}
.test-btn.primary {
background: var(--builder-success);
color: white;
border-color: var(--builder-success);
}
.testing-content {
padding: 16px;
height: calc(100% - 64px);
overflow-y: auto;
}
.test-scenario h5 {
font-size: 14px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 12px;
}
.test-data {
display: flex;
flex-direction: column;
gap: 4px;
margin-top: 8px;
}
.data-field {
font-family: var(--code-font);
font-size: 11px;
color: var(--dark-gray);
background: var(--builder-bg);
padding: 4px 8px;
border-radius: 4px;
border: 1px solid var(--builder-border);
}
.test-execution {
margin: 16px 0;
}
.execution-step {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 12px;
border-radius: 8px;
margin-bottom: 8px;
transition: all 0.3s ease;
}
.execution-step.completed {
background: #f0fff4;
border: 1px solid #9ae6b4;
}
.execution-step.running {
background: #fffbf0;
border: 1px solid #f6e05e;
}
.execution-step.pending {
background: var(--builder-bg);
border: 1px solid var(--builder-border);
}
.step-icon {
font-size: 16px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.step-content {
flex: 1;
}
.step-content strong {
display: block;
font-size: 14px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 4px;
}
.step-content p {
font-size: 12px;
color: var(--medium-gray);
margin: 0;
}
.step-time {
font-size: 10px;
color: var(--medium-gray);
float: right;
}
.test-results {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--builder-border);
}
.result-summary {
display: flex;
justify-content: space-between;
align-items: center;
}
.result-status {
font-size: 14px;
font-weight: 600;
padding: 4px 8px;
border-radius: 4px;
}
.result-status.success {
background: var(--builder-success);
color: white;
}
.result-time {
font-size: 12px;
color: var(--medium-gray);
}
/* Properties Features */
.properties-features {
display: flex;
flex-direction: column;
gap: 16px;
}
.properties-features .feature-item {
align-items: flex-start;
}
.properties-features .feature-icon {
width: 40px;
height: 40px;
font-size: 18px;
}
.testing-features {
display: flex;
flex-direction: column;
gap: 16px;
}
.testing-features .feature-item {
align-items: flex-start;
}
.testing-features .feature-icon {
width: 40px;
height: 40px;
font-size: 18px;
}
/* Drag and Drop Section */
.dragdrop-section {
padding: 100px 0;
background: var(--bg-gray);
}
.dragdrop-demo {
margin-top: 60px;
}
.demo-container {
display: grid;
grid-template-columns: 300px 1fr;
gap: 24px;
margin-bottom: 60px;
}
.demo-sidebar {
background: white;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
padding: 20px;
height: fit-content;
}
.demo-sidebar h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 20px;
}
.component-palette {
display: flex;
flex-direction: column;
gap: 16px;
}
.palette-category h5 {
font-size: 12px;
font-weight: 600;
color: var(--medium-gray);
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.draggable-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-radius: 8px;
background: var(--builder-bg);
border: 1px solid var(--builder-border);
cursor: grab;
transition: all 0.3s ease;
margin-bottom: 6px;
}
.draggable-item:hover {
background: var(--primary-purple);
color: white;
transform: translateX(4px);
}
.draggable-item:active {
cursor: grabbing;
}
.item-icon {
font-size: 16px;
}
.demo-workspace {
background: white;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
overflow: hidden;
}
.workspace-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: var(--builder-bg);
border-bottom: 1px solid var(--builder-border);
}
.workspace-header h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark-gray);
}
.workspace-tools {
display: flex;
gap: 8px;
}
.drop-zone {
height: 400px;
background: white;
background-image:
radial-gradient(circle, var(--grid-color) 1px, transparent 1px);
background-size: 20px 20px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.drop-zone.drag-over {
background-color: rgba(113, 75, 103, 0.05);
border: 2px dashed var(--primary-purple);
}
.drop-hint {
text-align: center;
color: var(--medium-gray);
}
.hint-icon {
font-size: 48px;
display: block;
margin-bottom: 16px;
}
.drop-hint p {
font-size: 18px;
margin-bottom: 8px;
}
.hint-sub {
font-size: 14px;
opacity: 0.7;
}
.dragdrop-features {
margin-top: 40px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.feature-card {
background: white;
padding: 24px;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
text-align: center;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: var(--builder-shadow-hover);
}
.feature-card .feature-icon {
font-size: 32px;
margin-bottom: 16px;
display: block;
}
.feature-card h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--dark-gray);
}
.feature-card p {
color: var(--medium-gray);
font-size: 14px;
line-height: 1.6;
}
/* Templates Section */
.templates-section {
padding: 100px 0;
background: white;
}
.templates-content {
margin-top: 60px;
}
.templates-filters {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
gap: 20px;
flex-wrap: wrap;
}
.filter-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.filter-btn {
padding: 8px 16px;
border: 2px solid var(--builder-border);
background: white;
color: var(--medium-gray);
border-radius: 20px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.filter-btn:hover {
border-color: var(--primary-purple);
color: var(--primary-purple);
}
.filter-btn.active {
background: var(--primary-purple);
border-color: var(--primary-purple);
color: white;
}
.search-group {
display: flex;
gap: 8px;
}
.template-search {
padding: 8px 16px;
border: 1px solid var(--builder-border);
border-radius: 20px;
background: white;
font-size: 14px;
min-width: 200px;
}
.templates-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
margin-bottom: 40px;
}
.template-card {
background: white;
border-radius: 16px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
overflow: hidden;
transition: all 0.3s ease;
}
.template-card:hover {
transform: translateY(-4px);
box-shadow: var(--builder-shadow-hover);
}
.template-preview {
height: 120px;
background: var(--builder-bg);
display: flex;
align-items: center;
justify-content: center;
border-bottom: 1px solid var(--builder-border);
}
.preview-workflow {
display: flex;
align-items: center;
gap: 12px;
}
.preview-node {
width: 40px;
height: 40px;
background: white;
border: 2px solid var(--builder-border);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
box-shadow: var(--builder-shadow);
}
.preview-arrow {
font-size: 16px;
color: var(--connection-color);
font-weight: bold;
}
.template-content {
padding: 20px;
}
.template-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
}
.template-header h4 {
font-size: 18px;
font-weight: 600;
color: var(--dark-gray);
}
.template-badge {
background: var(--builder-success);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
}
.template-badge.popular {
background: var(--primary-purple);
}
.template-badge.new {
background: var(--builder-warning);
}
.template-content p {
color: var(--medium-gray);
font-size: 14px;
line-height: 1.5;
margin-bottom: 16px;
}
.template-stats {
display: flex;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.stat {
font-size: 12px;
color: var(--medium-gray);
display: block;
align-items: center;
gap: 4px;
}
.template-actions {
display: flex;
gap: 8px;
}
.template-actions .btn-primary,
.template-actions .btn-secondary {
flex: 1;
text-align: center;
padding: 8px 16px;
font-size: 14px;
}
.templates-cta {
text-align: center;
color: var(--medium-gray);
}
.link-primary {
color: var(--primary-purple);
text-decoration: none;
font-weight: 500;
}
.link-primary:hover {
text-decoration: underline;
}
/* Workflow Section */
.workflow-section {
padding: 100px 0;
background: var(--bg-gray);
}
.workflow-content {
margin-top: 60px;
}
.workflow-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 24px;
margin-bottom: 60px;
}
.category-card {
background: white;
padding: 32px;
border-radius: 16px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
text-align: center;
transition: all 0.3s ease;
}
.category-card:hover {
transform: translateY(-8px);
box-shadow: var(--builder-shadow-hover);
}
.category-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;
}
.category-card h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 12px;
color: var(--dark-gray);
}
.category-card p {
color: var(--medium-gray);
line-height: 1.6;
margin-bottom: 20px;
}
.category-features {
display: block;
gap: 8px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 20px;
}
.feature-tag {
background: var(--builder-bg);
color: var(--medium-gray);
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
border: 1px solid var(--builder-border);
}
.category-btn {
background: var(--primary-purple);
color: white;
padding: 8px 20px;
border-radius: 20px;
border: none;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.category-btn:hover {
background: var(--purple-dark);
transform: translateY(-2px);
}
/* Workflow Showcase */
.workflow-showcase {
background: white;
border-radius: 16px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
padding: 32px;
}
.showcase-header {
text-align: center;
margin-bottom: 32px;
}
.showcase-header h3 {
font-size: 28px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 8px;
}
.showcase-header p {
color: var(--medium-gray);
font-size: 16px;
}
.workflow-diagram {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}
.workflow-step {
background: white;
border: 2px solid var(--builder-border);
border-radius: 12px;
padding: 20px;
min-width: 200px;
text-align: center;
box-shadow: var(--builder-shadow);
transition: all 0.3s ease;
}
.workflow-step:hover {
transform: translateY(-4px);
box-shadow: var(--builder-shadow-hover);
}
.workflow-step[data-type="trigger"] {
border-color: var(--builder-success);
}
.workflow-step[data-type="condition"] {
border-color: var(--builder-warning);
}
.workflow-step[data-type="action"] {
border-color: var(--primary-purple);
}
.workflow-step[data-type="loop"] {
border-color: var(--builder-secondary);
}
.step-icon {
font-size: 32px;
margin-bottom: 12px;
display: block;
}
.step-content h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 4px;
}
.step-content p {
font-size: 12px;
color: var(--medium-gray);
margin: 0;
}
.workflow-arrow {
font-size: 24px;
color: var(--connection-color);
font-weight: bold;
}
.workflow-branch {
display: flex;
gap: 40px;
align-items: flex-start;
margin: 16px 0;
}
.branch-left,
.branch-right {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.branch-label {
background: var(--builder-bg);
color: var(--medium-gray);
padding: 4px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 600;
border: 1px solid var(--builder-border);
}
/* Deployment Section */
.deployment-section {
padding: 100px 0;
background: white;
}
.deployment-content {
margin-top: 60px;
}
.deployment-stages {
display: flex;
align-items: center;
justify-content: center;
gap: 32px;
margin-bottom: 80px;
flex-wrap: wrap;
}
.stage-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 250px;
}
.stage-number {
width: 60px;
height: 60px;
background: var(--primary-purple);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 700;
margin-bottom: 16px;
}
.stage-content h3 {
font-size: 20px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 8px;
}
.stage-content p {
color: var(--medium-gray);
font-size: 14px;
line-height: 1.5;
margin-bottom: 12px;
}
.stage-features {
display: flex;
flex-direction: column;
gap: 6px;
}
.stage-features .feature {
background: var(--builder-bg);
color: var(--medium-gray);
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
border: 1px solid var(--builder-border);
}
.stage-arrow {
font-size: 32px;
color: var(--connection-color);
font-weight: bold;
}
.testing-tools {
background: var(--bg-gray);
border-radius: 16px;
padding: 40px;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.tool-card {
background: white;
padding: 24px;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
transition: all 0.3s ease;
}
.tool-card:hover {
transform: translateY(-4px);
box-shadow: var(--builder-shadow-hover);
}
.tool-icon {
font-size: 32px;
margin-bottom: 16px;
display: block;
}
.tool-card h4 {
font-size: 18px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 8px;
}
.tool-card p {
color: var(--medium-gray);
font-size: 14px;
line-height: 1.6;
margin-bottom: 16px;
}
.tool-features {
list-style: none;
padding: 0;
margin: 0;
}
.tool-features li {
font-size: 12px;
color: var(--medium-gray);
padding: 4px 0;
position: relative;
padding-left: 16px;
}
.tool-features li::before {
content: '•';
position: absolute;
left: 0;
color: var(--primary-purple);
font-weight: bold;
}
/* Version Control Section */
.version-control-section {
padding: 100px 0;
background: var(--bg-gray);
}
.version-control-content {
margin-top: 60px;
}
.vc-features {
margin-bottom: 60px;
}
.vc-main {
background: white;
border-radius: 16px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
overflow: hidden;
margin-bottom: 40px;
}
.version-timeline {
display: flex;
flex-direction: column;
}
.timeline-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: var(--builder-bg);
border-bottom: 1px solid var(--builder-border);
}
.timeline-header h3 {
font-size: 18px;
font-weight: 600;
color: var(--dark-gray);
}
.timeline-controls {
display: flex;
gap: 8px;
}
.vc-btn {
padding: 6px 12px;
border: 1px solid var(--builder-border);
background: white;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.vc-btn:hover {
background: var(--builder-bg);
}
.vc-btn.primary {
background: var(--primary-purple);
color: white;
border-color: var(--primary-purple);
}
.timeline-items {
padding: 24px;
max-height: 400px;
overflow-y: auto;
}
.timeline-item {
display: flex;
gap: 16px;
align-items: flex-start;
padding: 16px;
border-radius: 8px;
margin-bottom: 12px;
transition: all 0.3s ease;
border: 1px solid transparent;
}
.timeline-item:hover {
background: var(--builder-bg);
border-color: var(--builder-border);
}
.timeline-item.current {
background: #f0fff4;
border-color: var(--builder-success);
}
.commit-avatar {
width: 32px;
height: 32px;
background: var(--primary-purple);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 14px;
flex-shrink: 0;
}
.commit-content {
flex: 1;
}
.commit-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.commit-header strong {
font-size: 14px;
color: var(--dark-gray);
}
.commit-hash {
font-family: var(--code-font);
font-size: 11px;
color: var(--medium-gray);
background: var(--builder-bg);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--builder-border);
}
.commit-meta {
display: flex;
gap: 12px;
margin-bottom: 8px;
font-size: 12px;
color: var(--medium-gray);
}
.commit-author {
font-weight: 500;
}
.commit-branch {
background: var(--builder-bg);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--builder-border);
font-family: var(--code-font);
}
.commit-changes {
display: flex;
gap: 8px;
font-size: 11px;
}
.change-added {
color: var(--builder-success);
font-weight: 600;
}
.change-removed {
color: var(--builder-danger);
font-weight: 600;
}
.change-files {
color: var(--medium-gray);
}
.commit-actions {
display: flex;
flex-direction: column;
gap: 4px;
}
.action-btn {
padding: 4px 8px;
border: 1px solid var(--builder-border);
background: white;
border-radius: 4px;
font-size: 10px;
cursor: pointer;
transition: all 0.2s ease;
}
.action-btn:hover {
background: var(--builder-bg);
}
.vc-sidebar {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.branch-manager,
.merge-requests {
background: white;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
padding: 20px;
}
.branch-manager h4,
.merge-requests h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 16px;
}
.branch-list,
.pr-list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.branch-item,
.pr-item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
background: var(--builder-bg);
border: 1px solid var(--builder-border);
transition: all 0.2s ease;
}
.branch-item:hover,
.pr-item:hover {
background: white;
border-color: var(--primary-purple);
}
.branch-item.active {
background: var(--primary-purple);
color: white;
border-color: var(--primary-purple);
}
.branch-icon {
font-size: 14px;
}
.branch-name {
flex: 1;
font-size: 12px;
font-weight: 500;
font-family: var(--code-font);
}
.branch-status,
.branch-commits {
font-size: 10px;
color: var(--medium-gray);
background: white;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--builder-border);
}
.branch-item.active .branch-status,
.branch-item.active .branch-commits {
background: rgba(255,255,255,0.2);
border-color: rgba(255,255,255,0.3);
color: white;
}
.pr-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.pr-header strong {
font-size: 12px;
color: var(--dark-gray);
}
.pr-status {
font-size: 10px;
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
}
.pr-status.open {
background: var(--builder-success);
color: white;
}
.pr-status.review {
background: var(--builder-warning);
color: white;
}
.pr-meta {
font-size: 10px;
color: var(--medium-gray);
display: flex;
gap: 8px;
}
.vc-capabilities {
margin-top: 40px;
}
.capability-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.capability-item {
background: white;
padding: 24px;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
text-align: center;
transition: all 0.3s ease;
}
.capability-item:hover {
transform: translateY(-4px);
box-shadow: var(--builder-shadow-hover);
}
.capability-icon {
font-size: 32px;
margin-bottom: 16px;
display: block;
}
.capability-item h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 8px;
}
.capability-item p {
color: var(--medium-gray);
font-size: 14px;
line-height: 1.6;
}
/* Interactive Demo Section */
.demo-section {
padding: 100px 0;
background: white;
}
.interactive-demo {
margin-top: 60px;
}
.demo-tabs {
display: flex;
gap: 8px;
justify-content: center;
margin-bottom: 40px;
flex-wrap: wrap;
}
.demo-tab {
padding: 12px 24px;
border: 2px solid var(--builder-border);
background: white;
color: var(--medium-gray);
border-radius: 25px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-size: 14px;
}
.demo-tab:hover {
border-color: var(--primary-purple);
color: var(--primary-purple);
}
.demo-tab.active {
background: var(--primary-purple);
border-color: var(--primary-purple);
color: white;
}
.demo-content {
display: none;
}
.demo-content.active {
display: block;
}
.demo-instructions {
background: var(--builder-bg);
border-radius: 12px;
padding: 24px;
margin-bottom: 24px;
border: 1px solid var(--builder-border);
}
.demo-instructions h3 {
font-size: 24px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 12px;
}
.demo-instructions p {
color: var(--medium-gray);
margin-bottom: 16px;
}
.instruction-list {
color: var(--dark-gray);
padding-left: 20px;
}
.instruction-list li {
margin-bottom: 8px;
font-size: 14px;
}
.demo-builder {
display: grid;
grid-template-columns: 200px 1fr;
gap: 24px;
background: white;
border-radius: 12px;
border: 1px solid var(--builder-border);
box-shadow: var(--builder-shadow);
overflow: hidden;
min-height: 400px;
}
.demo-palette {
background: var(--builder-bg);
padding: 20px;
border-right: 1px solid var(--builder-border);
}
.demo-palette h4 {
font-size: 14px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 16px;
}
.demo-components {
display: flex;
flex-direction: column;
gap: 8px;
}
.demo-component {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 6px;
background: white;
border: 1px solid var(--builder-border);
cursor: grab;
transition: all 0.3s ease;
font-size: 12px;
}
.demo-component:hover {
background: var(--primary-purple);
color: white;
transform: translateX(4px);
}
.demo-component:active {
cursor: grabbing;
}
.comp-icon {
font-size: 14px;
}
.demo-canvas {
position: relative;
background: white;
background-image:
radial-gradient(circle, var(--grid-color) 1px, transparent 1px);
background-size: 20px 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.demo-canvas.drag-over {
background-color: rgba(113, 75, 103, 0.05);
}
.canvas-hint {
text-align: center;
color: var(--medium-gray);
}
.demo-controls {
grid-column: 1 / -1;
display: flex;
justify-content: center;
gap: 12px;
padding: 16px;
background: var(--builder-bg);
border-top: 1px solid var(--builder-border);
}
.demo-btn {
padding: 8px 16px;
border: 1px solid var(--builder-border);
background: white;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 6px;
}
.demo-btn:hover {
background: var(--builder-bg);
}
.demo-btn.primary {
background: var(--primary-purple);
color: white;
border-color: var(--primary-purple);
}
/* Template Picker */
.template-picker {
margin-top: 24px;
}
.template-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.template-option {
background: white;
border: 1px solid var(--builder-border);
border-radius: 12px;
padding: 20px;
text-align: center;
transition: all 0.3s ease;
cursor: pointer;
}
.template-option:hover {
border-color: var(--primary-purple);
box-shadow: var(--builder-shadow-hover);
}
.template-preview-mini {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 16px;
}
.mini-node {
width: 24px;
height: 24px;
background: var(--builder-bg);
border: 1px solid var(--builder-border);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.mini-arrow {
font-size: 12px;
color: var(--connection-color);
}
.template-option h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 8px;
}
.template-option p {
color: var(--medium-gray);
font-size: 12px;
margin-bottom: 16px;
}
.template-btn {
background: var(--primary-purple);
color: white;
padding: 8px 16px;
border-radius: 6px;
border: none;
font-size: 12px;
cursor: pointer;
transition: all 0.3s ease;
}
.template-btn:hover {
background: var(--purple-dark);
}
/* Demo Results */
.demo-results {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border-radius: 16px;
border: 1px solid var(--builder-border);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
z-index: 1000;
min-width: 400px;
max-width: 90vw;
max-height: 80vh;
overflow: hidden;
}
.results-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 24px;
background: var(--builder-bg);
border-bottom: 1px solid var(--builder-border);
}
.results-header h3 {
font-size: 18px;
font-weight: 600;
color: var(--dark-gray);
}
.close-results {
background: none;
border: none;
font-size: 18px;
cursor: pointer;
color: var(--medium-gray);
padding: 4px;
}
.close-results:hover {
color: var(--dark-gray);
}
.results-content {
padding: 24px;
max-height: 60vh;
overflow-y: auto;
}
.result-summary {
margin-bottom: 24px;
}
.summary-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: 14px;
}
.summary-item.success {
color: var(--builder-success);
}
.summary-icon {
font-size: 16px;
}
.execution-log h4 {
font-size: 16px;
font-weight: 600;
color: var(--dark-gray);
margin-bottom: 12px;
}
.log-entries {
background: var(--builder-bg);
border-radius: 8px;
padding: 12px;
border: 1px solid var(--builder-border);
}
.log-entry {
display: flex;
gap: 12px;
padding: 4px 0;
font-size: 12px;
font-family: var(--code-font);
}
.log-time {
color: var(--medium-gray);
min-width: 60px;
}
.log-level {
min-width: 50px;
font-weight: 600;
}
.log-level.info {
color: var(--builder-secondary);
}
.log-level.success {
color: var(--builder-success);
}
.log-message {
color: var(--dark-gray);
}
/* CTA Section Enhancements */
.cta-section {
padding: 100px 0;
background: linear-gradient(135deg, var(--primary-purple), var(--ai-blue));
color: white;
text-align: center;
}
.cta-content h2 {
font-size: 40px;
font-weight: 700;
margin-bottom: 16px;
}
.cta-content > p {
font-size: 18px;
margin-bottom: 32px;
opacity: 0.9;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.cta-benefits {
display: flex;
justify-content: center;
gap: 32px;
margin: 32px 0;
flex-wrap: wrap;
}
.benefit-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
opacity: 0.9;
}
.benefit-icon {
font-size: 16px;
}
.cta-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px;
}
.cta-section .btn-primary {
background: white;
color: var(--primary-purple);
}
.cta-section .btn-primary:hover {
background: var(--bg-gray);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(255,255,255,0.3);
}
.cta-section .btn-secondary {
background: transparent;
color: white;
border: 2px solid white;
}
.cta-section .btn-secondary:hover {
background: white;
color: var(--primary-purple);
}
.cta-testimonial {
background: rgba(255,255,255,0.1);
border-radius: 16px;
padding: 24px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.2);
max-width: 600px;
margin: 0 auto;
}
.testimonial-content p {
font-size: 16px;
font-style: italic;
margin-bottom: 16px;
opacity: 0.95;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
}
.author-avatar {
width: 40px;
height: 40px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
border: 2px solid rgba(255,255,255,0.3);
}
.author-info {
text-align: left;
}
.author-info strong {
display: block;
font-size: 14px;
margin-bottom: 2px;
}
.author-info span {
font-size: 12px;
opacity: 0.8;
}
/* Responsive Design */
@media (max-width: 1024px) {
.builder-hero .hero-content {
gap: 60px;
}
.builder-hero .hero-text h1 {
font-size: 46px;
}
.feature-showcase {
gap: 40px;
}
.demo-container {
grid-template-columns: 1fr;
gap: 16px;
}
.demo-sidebar {
order: 2;
}
.vc-sidebar {
grid-template-columns: 1fr;
}
.cta-benefits {
gap: 20px;
}
}
@media (max-width: 768px) {
.breadcrumb-nav {
margin-top: 70px;
}
.builder-hero {
padding: 60px 0;
}
.builder-hero .hero-content {
grid-template-columns: 1fr;
gap: 40px;
text-align: center;
}
.builder-hero .hero-text h1 {
font-size: 36px;
}
.builder-hero .hero-subtitle {
font-size: 18px;
}
.builder-hero .hero-stats {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.hero-visual {
height: 350px;
}
.builder-mockup {
height: 300px;
}
.mockup-content {
flex-direction: column;
}
.builder-sidebar {
width: 100%;
height: 120px;
overflow-x: auto;
}
.component-item {
display: inline-flex;
margin-right: 8px;
margin-bottom: 0;
white-space: nowrap;
}
.interface-tabs {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 8px;
}
.tab-btn {
flex-shrink: 0;
padding: 10px 20px;
font-size: 13px;
}
.feature-showcase {
grid-template-columns: 1fr;
gap: 32px;
}
.showcase-visual {
order: 2;
}
.demo-builder {
grid-template-columns: 1fr;
min-height: 300px;
}
.demo-palette {
border-right: none;
border-bottom: 1px solid var(--builder-border);
padding: 16px;
}
.demo-components {
flex-direction: row;
overflow-x: auto;
gap: 12px;
}
.demo-component {
flex-shrink: 0;
white-space: nowrap;
}
.templates-filters {
flex-direction: column;
align-items: stretch;
}
.filter-group {
order: 2;
justify-content: center;
}
.search-group {
order: 1;
margin-bottom: 16px;
}
.template-search {
width: 100%;
min-width: auto;
}
.workflow-categories {
grid-template-columns: 1fr;
}
.deployment-stages {
flex-direction: column;
gap: 24px;
}
.stage-arrow {
transform: rotate(90deg);
}
.timeline-header {
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.timeline-controls {
justify-content: center;
}
.demo-tabs {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 8px;
}
.demo-tab {
flex-shrink: 0;
padding: 10px 20px;
font-size: 13px;
}
.cta-benefits {
flex-direction: column;
gap: 16px;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.btn-primary,
.btn-secondary {
width: 100%;
max-width: 280px;
}
.testimonial-author {
flex-direction: column;
text-align: center;
}
.author-info {
text-align: center;
}
}
@media (max-width: 480px) {
.builder-hero .hero-text h1 {
font-size: 28px;
}
.builder-hero .hero-subtitle {
font-size: 16px;
}
.builder-hero .hero-stats {
grid-template-columns: 1fr;
}
.hero-visual {
height: 250px;
}
.builder-mockup {
height: 200px;
}
.section-title {
font-size: 28px;
}
.section-subtitle {
font-size: 15px;
}
.showcase-content h3 {
font-size: 24px;
}
.showcase-content p {
font-size: 16px;
}
.feature-grid {
grid-template-columns: 1fr;
}
.workflow-branch {
flex-direction: column;
gap: 16px;
}
.template-options {
grid-template-columns: 1fr;
}
.tools-grid {
grid-template-columns: 1fr;
}
.capability-grid {
grid-template-columns: 1fr;
}
.demo-results {
min-width: 320px;
margin: 20px;
max-width: calc(100vw - 40px);
}
.cta-content h2 {
font-size: 28px;
}
.cta-content > p {
font-size: 16px;
}
}
/* ===== AI AGENTS CATALOG CSS ===== */
/* Reset and Base Styles */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Brand Colors */
--catalog-primary: #714b67;
--catalog-primary-dark: #5d3e54;
--catalog-primary-light: #8b6b81;
--catalog-accent: #00a09d;
--catalog-blue: #2c5aa0;
--catalog-success: #28a745;
--catalog-warning: #ffc107;
--catalog-danger: #dc3545;
/* Neutral Colors */
--catalog-dark: #1a1d23;
--catalog-medium: #4a5568;
--catalog-light: #718096;
--catalog-border: #e2e8f0;
--catalog-background: #f7fafc;
--catalog-white: #ffffff;
/* Gradients */
--catalog-gradient-primary: linear-gradient(135deg, var(--catalog-primary), var(--catalog-blue));
--catalog-gradient-accent: linear-gradient(135deg, var(--catalog-accent), var(--catalog-blue));
--catalog-gradient-soft: linear-gradient(135deg, #f7fafc, #edf2f7);
/* Shadows */
--catalog-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
--catalog-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
--catalog-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
--catalog-shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.15);
/* Spacing */
--catalog-space-xs: 0.25rem;
--catalog-space-sm: 0.5rem;
--catalog-space-md: 1rem;
--catalog-space-lg: 1.5rem;
--catalog-space-xl: 2rem;
--catalog-space-xxl: 3rem;
--catalog-space-xxxl: 4rem;
/* Typography */
--catalog-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--catalog-font-size-xs: 0.75rem;
--catalog-font-size-sm: 0.875rem;
--catalog-font-size-base: 1rem;
--catalog-font-size-lg: 1.125rem;
--catalog-font-size-xl: 1.25rem;
--catalog-font-size-2xl: 1.5rem;
--catalog-font-size-3xl: 1.875rem;
--catalog-font-size-4xl: 2.25rem;
--catalog-font-size-5xl: 3rem;
/* Border Radius */
--catalog-radius-sm: 4px;
--catalog-radius-md: 8px;
--catalog-radius-lg: 12px;
--catalog-radius-xl: 16px;
--catalog-radius-xxl: 24px;
/* Transitions */
--catalog-transition-fast: 0.15s ease;
--catalog-transition-base: 0.3s ease;
--catalog-transition-slow: 0.5s ease;
}
/* Base Typography */
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--catalog-font-family);
line-height: 1.6;
color: var(--catalog-dark);
background-color: var(--catalog-white);
overflow-x: hidden;
}
/* Mobile Navigation Toggle */
.nav-mobile-trigger {
display: none;
position: fixed;
top: var(--catalog-space-lg);
right: var(--catalog-space-lg);
z-index: 1000;
background: var(--catalog-primary);
border: none;
border-radius: var(--catalog-radius-md);
width: 48px;
height: 48px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
transition: var(--catalog-transition-base);
box-shadow: var(--catalog-shadow-lg);
}
.nav-mobile-trigger:hover {
background: var(--catalog-primary-dark);
transform: scale(1.05);
}
.trigger-line {
width: 20px;
height: 2px;
background: var(--catalog-white);
transition: var(--catalog-transition-base);
border-radius: 1px;
}
.nav-mobile-trigger.active .trigger-line:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.nav-mobile-trigger.active .trigger-line:nth-child(2) {
opacity: 0;
}
.nav-mobile-trigger.active .trigger-line:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* Header Navigation */
.catalog-header {
position: sticky;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
z-index: 998;
border-bottom: 1px solid var(--catalog-border);
transition: var(--catalog-transition-base);
}
.header-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--catalog-space-xl);
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--catalog-space-lg) 0;
}
.brand-logo {
display: flex;
flex-direction: column;
gap: var(--catalog-space-xs);
}
.brand-name {
font-size: var(--catalog-font-size-2xl);
font-weight: 800;
background: var(--catalog-gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
}
.brand-subtitle {
font-size: var(--catalog-font-size-sm);
color: var(--catalog-medium);
font-weight: 500;
}
.primary-navigation {
display: flex;
}
.nav-menu {
display: flex;
list-style: none;
gap: var(--catalog-space-xl);
align-items: center;
}
.nav-menu a {
text-decoration: none;
color: var(--catalog-dark);
font-weight: 500;
font-size: var(--catalog-font-size-base);
transition: var(--catalog-transition-base);
padding: var(--catalog-space-sm) var(--catalog-space-md);
border-radius: var(--catalog-radius-md);
}
.nav-menu a:hover {
color: var(--catalog-primary);
background: rgba(113, 75, 103, 0.05);
}
.nav-action-btn {
background: var(--catalog-primary) !important;
color: var(--catalog-white) !important;
padding: var(--catalog-space-md) var(--catalog-space-lg) !important;
border-radius: var(--catalog-radius-md) !important;
font-weight: 600 !important;
}
.nav-action-btn:hover {
background: var(--catalog-primary-dark) !important;
transform: translateY(-2px);
box-shadow: var(--catalog-shadow-md);
}
/* Hero Banner */
.catalog-hero {
background: var(--catalog-gradient-soft);
padding: var(--catalog-space-xxxl) 0;
position: relative;
overflow: hidden;
}
.catalog-hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.hero-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--catalog-space-xl);
position: relative;
z-index: 2;
}
.hero-content {
display: grid;
grid-template-columns: 1fr;
gap: var(--catalog-space-xxl);
text-align: center;
}
.hero-main-title {
font-size: var(--catalog-font-size-5xl);
font-weight: 800;
line-height: 1.1;
margin-bottom: var(--catalog-space-lg);
background: var(--catalog-gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.hero-description {
font-size: var(--catalog-font-size-xl);
color: var(--catalog-medium);
margin-bottom: var(--catalog-space-xxl);
max-width: 700px;
margin-left: auto;
margin-right: auto;
line-height: 1.7;
}
/* Search Control Panel */
.search-control-panel {
max-width: 800px;
margin: 0 auto var(--catalog-space-xxl);
}
.primary-search-box {
margin-bottom: var(--catalog-space-lg);
}
.search-input-group {
position: relative;
display: flex;
align-items: center;
background: var(--catalog-white);
border: 2px solid var(--catalog-border);
border-radius: var(--catalog-radius-xl);
padding: var(--catalog-space-sm);
box-shadow: var(--catalog-shadow-lg);
transition: var(--catalog-transition-base);
}
.search-input-group:focus-within {
border-color: var(--catalog-primary);
box-shadow: 0 0 0 4px rgba(113, 75, 103, 0.1);
}
.search-icon {
font-size: var(--catalog-font-size-lg);
margin: 0 var(--catalog-space-md);
color: var(--catalog-medium);
}
.search-field {
flex: 1;
border: none;
outline: none;
font-size: var(--catalog-font-size-lg);
padding: var(--catalog-space-md);
background: transparent;
color: var(--catalog-dark);
}
.search-field::placeholder {
color: var(--catalog-light);
}
.search-submit-btn {
background: var(--catalog-gradient-primary);
color: var(--catalog-white);
border: none;
padding: var(--catalog-space-md) var(--catalog-space-xl);
border-radius: var(--catalog-radius-lg);
font-weight: 600;
font-size: var(--catalog-font-size-base);
cursor: pointer;
transition: var(--catalog-transition-base);
}
.search-submit-btn:hover {
transform: translateY(-2px);
box-shadow: var(--catalog-shadow-md);
}
/* Quick Filter Tags */
.quick-filter-tags {
display: flex;
gap: var(--catalog-space-md);
flex-wrap: wrap;
justify-content: center;
}
.filter-tag {
background: var(--catalog-white);
border: 1px solid var(--catalog-border);
padding: var(--catalog-space-sm) var(--catalog-space-lg);
border-radius: var(--catalog-radius-xl);
font-size: var(--catalog-font-size-sm);
font-weight: 500;
cursor: pointer;
transition: var(--catalog-transition-base);
color: var(--catalog-medium);
}
.filter-tag:hover {
border-color: var(--catalog-primary);
color: var(--catalog-primary);
background: rgba(113, 75, 103, 0.05);
}
.filter-tag.active {
background: var(--catalog-primary);
color: var(--catalog-white);
border-color: var(--catalog-primary);
}
/* Hero Metrics Grid */
.hero-metrics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--catalog-space-lg);
max-width: 600px;
margin: 0 auto;
}
.metric-card {
background: var(--catalog-white);
padding: var(--catalog-space-xl);
border-radius: var(--catalog-radius-xl);
text-align: center;
box-shadow: var(--catalog-shadow-md);
border: 1px solid var(--catalog-border);
transition: var(--catalog-transition-base);
}
.metric-card:hover {
transform: translateY(-4px);
box-shadow: var(--catalog-shadow-lg);
}
.metric-figure {
display: block;
font-size: var(--catalog-font-size-3xl);
font-weight: 700;
color: var(--catalog-primary);
margin-bottom: var(--catalog-space-sm);
}
.metric-description {
color: var(--catalog-medium);
font-size: var(--catalog-font-size-sm);
font-weight: 500;
}
/* Main Content Layout */
.catalog-main-content {
padding: var(--catalog-space-xxxl) 0;
background: var(--catalog-white);
}
.content-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--catalog-space-xl);
display: grid;
grid-template-columns: 280px 1fr;
gap: var(--catalog-space-xxl);
}
/* Filters Sidebar */
.filters-sidebar {
background: var(--catalog-background);
border-radius: var(--catalog-radius-xl);
padding: var(--catalog-space-xl);
height: fit-content;
position: sticky;
top: 120px;
border: 1px solid var(--catalog-border);
}
.sidebar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--catalog-space-xl);
padding-bottom: var(--catalog-space-lg);
border-bottom: 1px solid var(--catalog-border);
}
.sidebar-title {
font-size: var(--catalog-font-size-xl);
font-weight: 600;
color: var(--catalog-dark);
}
.filter-reset-btn {
background: none;
border: 1px solid var(--catalog-border);
color: var(--catalog-medium);
padding: var(--catalog-space-sm) var(--catalog-space-md);
border-radius: var(--catalog-radius-md);
font-size: var(--catalog-font-size-sm);
cursor: pointer;
transition: var(--catalog-transition-base);
}
.filter-reset-btn:hover {
border-color: var(--catalog-primary);
color: var(--catalog-primary);
}
/* Filter Groups */
.filter-group {
margin-bottom: var(--catalog-space-xl);
}
.filter-group-title {
font-size: var(--catalog-font-size-lg);
font-weight: 600;
color: var(--catalog-dark);
margin-bottom: var(--catalog-space-lg);
}
.filter-options {
display: flex;
flex-direction: column;
gap: var(--catalog-space-md);
}
.filter-option {
display: flex;
align-items: center;
cursor: pointer;
padding: var(--catalog-space-sm);
border-radius: var(--catalog-radius-md);
transition: var(--catalog-transition-fast);
}
.filter-option:hover {
background: rgba(113, 75, 103, 0.05);
}
.filter-checkbox {
margin-right: var(--catalog-space-md);
accent-color: var(--catalog-primary);
}
.filter-label {
font-size: var(--catalog-font-size-sm);
color: var(--catalog-dark);
flex: 1;
}
.count {
color: var(--catalog-light);
font-size: var(--catalog-font-size-xs);
font-family: monospace;
display:none !important;
}
/* Results Area */
.results-area {
min-height: 100vh;
}
/* Results Header */
.results-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--catalog-space-xxl);
padding-bottom: var(--catalog-space-lg);
border-bottom: 1px solid var(--catalog-border);
}
.results-title {
font-size: var(--catalog-font-size-3xl);
font-weight: 700;
color: var(--catalog-dark);
margin-bottom: var(--catalog-space-sm);
}
.results-count {
color: var(--catalog-medium);
font-size: var(--catalog-font-size-base);
}
.results-controls {
display: flex;
gap: var(--catalog-space-lg);
align-items: center;
}
/* View Toggle */
.view-toggle {
display: flex;
background: var(--catalog-background);
border-radius: var(--catalog-radius-md);
border: 1px solid var(--catalog-border);
overflow: hidden;
}
.view-btn {
background: none;
border: none;
padding: var(--catalog-space-md) var(--catalog-space-lg);
cursor: pointer;
display: flex;
align-items: center;
gap: var(--catalog-space-sm);
font-size: var(--catalog-font-size-sm);
color: var(--catalog-medium);
transition: var(--catalog-transition-fast);
}
.view-btn.active {
background: var(--catalog-primary);
color: var(--catalog-white);
}
.view-btn:hover:not(.active) {
background: rgba(113, 75, 103, 0.1);
color: var(--catalog-primary);
}
/* Sort Dropdown */
.sort-dropdown {
padding: var(--catalog-space-md);
border: 1px solid var(--catalog-border);
border-radius: var(--catalog-radius-md);
background: var(--catalog-white);
color: var(--catalog-dark);
font-size: var(--catalog-font-size-sm);
cursor: pointer;
}
.sort-dropdown:focus {
outline: none;
border-color: var(--catalog-primary);
box-shadow: 0 0 0 3px rgba(113, 75, 103, 0.1);
}
/* Featured Showcase */
.featured-showcase {
margin-bottom: var(--catalog-space-xxxl);
}
.showcase-title {
font-size: var(--catalog-font-size-2xl);
font-weight: 600;
color: var(--catalog-dark);
margin-bottom: var(--catalog-space-xl);
display: flex;
align-items: center;
gap: var(--catalog-space-md);
}
.featured-agent-card:hover {
transform: translateY(-8px);
box-shadow: var(--catalog-shadow-xl);
}
.featured-agent-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--catalog-gradient-primary);
}
.agent-badge {
position: absolute;
top: var(--catalog-space-lg);
right: var(--catalog-space-lg);
background: var(--catalog-gradient-accent);
color: var(--catalog-white);
padding: var(--catalog-space-sm) var(--catalog-space-md);
border-radius: var(--catalog-radius-xl);
font-size: var(--catalog-font-size-xs);
font-weight: 600;
z-index: 2;
}
.agent-visual {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: var(--catalog-space-lg);
}
.agent-icon {
width: 60px;
height: 60px;
background: var(--catalog-gradient-primary);
border-radius: var(--catalog-radius-xl);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--catalog-font-size-xl);
color: var(--catalog-white);
box-shadow: var(--catalog-shadow-md);
}
.performance-indicator {
text-align: right;
}
.performance-score {
display: block;
font-size: var(--catalog-font-size-2xl);
font-weight: 700;
color: var(--catalog-primary);
}
.performance-label {
font-size: var(--catalog-font-size-xs);
color: var(--catalog-medium);
font-weight: 500;
}
.agent-details {
flex: 1;
}
.agent-name {
font-size: var(--catalog-font-size-xl);
font-weight: 600;
color: var(--catalog-dark);
margin-bottom: var(--catalog-space-md);
}
.agent-summary {
color: var(--catalog-medium);
font-size: var(--catalog-font-size-sm);
line-height: 1.6;
margin-bottom: var(--catalog-space-lg);
}
.agent-metrics {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--catalog-space-lg);
margin-bottom: var(--catalog-space-lg);
padding: var(--catalog-space-lg);
background: var(--catalog-background);
border-radius: var(--catalog-radius-lg);
}
.metric-item {
text-align: center;
}
.metric-value {
display: block;
font-size: var(--catalog-font-size-lg);
font-weight: 700;
color: var(--catalog-primary);
}
.metric-label {
font-size: var(--catalog-font-size-xs);
color: var(--catalog-medium);
margin-top: var(--catalog-space-xs);
}
.agent-actions {
display: flex;
gap: var(--catalog-space-md);
}
.action-btn {
flex: 1;
padding: var(--catalog-space-md);
border-radius: var(--catalog-radius-md);
font-size: var(--catalog-font-size-sm);
font-weight: 600;
cursor: pointer;
transition: var(--catalog-transition-base);
border: none;
}
.action-btn.primary {
background: var(--catalog-primary);
color: var(--catalog-white);
}
.action-btn.primary:hover {
background: var(--catalog-primary-dark);
transform: translateY(-2px);
}
.action-btn.secondary {
background: transparent;
color: var(--catalog-primary);
border: 1px solid var(--catalog-border);
}
.action-btn.secondary:hover {
background: var(--catalog-primary);
color: var(--catalog-white);
border-color: var(--catalog-primary);
}
/* Agents Directory Grid */
.agents-directory {
margin-top: var(--catalog-space-xl);
}
.directory-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--catalog-space-xl);
margin-bottom: var(--catalog-space-xxl);
}
/* Agent Cards */
.agent-card {
background: var(--catalog-white);
border-radius: var(--catalog-radius-xl);
border: 1px solid var(--catalog-border);
overflow: hidden;
transition: var(--catalog-transition-base);
position: relative;
}
.agent-card:hover {
transform: translateY(-6px);
box-shadow: var(--catalog-shadow-lg);
border-color: var(--catalog-primary);
}
.card-header {
padding: var(--catalog-space-lg);
background: var(--catalog-background);
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--catalog-border);
}
.card-header .agent-icon {
width: 48px;
height: 48px;
background: var(--catalog-gradient-primary);
border-radius: var(--catalog-radius-lg);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--catalog-font-size-lg);
color: var(--catalog-white);
}
.agent-category {
background: var(--catalog-white);
color: var(--catalog-primary);
padding: var(--catalog-space-sm) var(--catalog-space-md);
border-radius: var(--catalog-radius-xl);
font-size: var(--catalog-font-size-xs);
font-weight: 600;
border: 1px solid var(--catalog-border);
}
.card-content {
padding: var(--catalog-space-lg);
}
.agent-title {
font-size: var(--catalog-font-size-lg);
font-weight: 600;
color: var(--catalog-dark);
margin-bottom: var(--catalog-space-md);
}
.agent-description {
color: var(--catalog-medium);
font-size: var(--catalog-font-size-sm);
line-height: 1.6;
margin-bottom: var(--catalog-space-lg);
}
.agent-benefits {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--catalog-space-md);
margin-bottom: var(--catalog-space-lg);
padding: var(--catalog-space-lg);
background: var(--catalog-background);
border-radius: var(--catalog-radius-lg);
}
.benefit-item {
text-align: center;
}
.benefit-value {
display: block;
font-size: var(--catalog-font-size-lg);
font-weight: 700;
color: var(--catalog-primary);
}
.benefit-label {
font-size: var(--catalog-font-size-xs);
color: var(--catalog-medium);
margin-top: var(--catalog-space-xs);
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--catalog-space-lg);
padding-top: var(--catalog-space-lg);
border-top: 1px solid var(--catalog-border);
}
.setup-info {
font-size: var(--catalog-font-size-xs);
color: var(--catalog-medium);
display: flex;
align-items: center;
gap: var(--catalog-space-sm);
}
.setup-time {
background: var(--catalog-background);
padding: var(--catalog-space-sm) var(--catalog-space-md);
border-radius: var(--catalog-radius-md);
font-weight: 500;
}
.card-actions {
display: flex;
gap: var(--catalog-space-sm);
}
.compare-btn,
.details-btn {
padding: var(--catalog-space-sm) var(--catalog-space-md);
border-radius: var(--catalog-radius-md);
font-size: var(--catalog-font-size-xs);
font-weight: 600;
cursor: pointer;
transition: var(--catalog-transition-base);
border: none;
}
.compare-btn {
background: var(--catalog-primary);
color: var(--catalog-white);
}
.compare-btn:hover {
background: var(--catalog-primary-dark);
transform: translateY(-1px);
}
.details-btn {
background: transparent;
color: var(--catalog-primary);
border: 1px solid var(--catalog-border);
}
.details-btn:hover {
background: var(--catalog-primary);
color: var(--catalog-white);
border-color: var(--catalog-primary);
}
/* Load More Section */
.load-more-section {
text-align: center;
padding: var(--catalog-space-xxl) 0;
}
.load-more-btn {
background: var(--catalog-gradient-primary);
color: var(--catalog-white);
border: none;
padding: var(--catalog-space-lg) var(--catalog-space-xxl);
border-radius: var(--catalog-radius-xl);
font-size: var(--catalog-font-size-base);
font-weight: 600;
cursor: pointer;
transition: var(--catalog-transition-base);
margin-bottom: var(--catalog-space-md);
}
.load-more-btn:hover {
transform: translateY(-2px);
box-shadow: var(--catalog-shadow-lg);
}
.load-more-info {
color: var(--catalog-medium);
font-size: var(--catalog-font-size-sm);
}
/* Comparison Panel */
.comparison-panel {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--catalog-white);
border-top: 1px solid var(--catalog-border);
box-shadow: var(--catalog-shadow-xl);
transform: translateY(100%);
transition: var(--catalog-transition-base);
z-index: 999;
max-height: 40vh;
overflow-y: auto;
}
.comparison-panel.active {
transform: translateY(0);
}
.panel-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--catalog-space-lg) var(--catalog-space-xl);
border-bottom: 1px solid var(--catalog-border);
background: var(--catalog-background);
}
.panel-title {
font-size: var(--catalog-font-size-lg);
font-weight: 600;
color: var(--catalog-dark);
}
.panel-close-btn {
background: none;
border: none;
font-size: var(--catalog-font-size-2xl);
color: var(--catalog-medium);
cursor: pointer;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--catalog-radius-md);
transition: var(--catalog-transition-fast);
}
.panel-close-btn:hover {
background: var(--catalog-border);
color: var(--catalog-dark);
}
.comparison-content {
padding: var(--catalog-space-xl);
}
.comparison-placeholder {
text-align: center;
color: var(--catalog-medium);
padding: var(--catalog-space-xl);
}
.panel-actions {
display: flex;
gap: var(--catalog-space-md);
padding: var(--catalog-space-lg) var(--catalog-space-xl);
border-top: 1px solid var(--catalog-border);
background: var(--catalog-background);
}
.compare-action-btn {
padding: var(--catalog-space-md) var(--catalog-space-xl);
border-radius: var(--catalog-radius-md);
font-weight: 600;
cursor: pointer;
transition: var(--catalog-transition-base);
border: none;
}
.compare-action-btn.primary {
background: var(--catalog-primary);
color: var(--catalog-white);
flex: 1;
}
.compare-action-btn.primary:hover:not(:disabled) {
background: var(--catalog-primary-dark);
}
.compare-action-btn.primary:disabled {
background: var(--catalog-light);
cursor: not-allowed;
}
.compare-action-btn.secondary {
background: transparent;
color: var(--catalog-medium);
border: 1px solid var(--catalog-border);
}
.compare-action-btn.secondary:hover {
background: var(--catalog-border);
color: var(--catalog-dark);
}
/* Mobile Filter Toggle */
.mobile-filter-toggle {
display: none;
position: fixed;
bottom: var(--catalog-space-xl);
right: var(--catalog-space-xl);
background: var(--catalog-primary);
color: var(--catalog-white);
border: none;
border-radius: var(--catalog-radius-xl);
padding: var(--catalog-space-lg);
box-shadow: var(--catalog-shadow-lg);
cursor: pointer;
z-index: 997;
gap: var(--catalog-space-sm);
align-items: center;
font-weight: 600;
transition: var(--catalog-transition-base);
}
.mobile-filter-toggle:hover {
background: var(--catalog-primary-dark);
transform: scale(1.05);
}
/* Footer CTA */
.catalog-footer-cta {
background: var(--catalog-gradient-primary);
color: var(--catalog-white);
padding: var(--catalog-space-xxxl) 0;
text-align: center;
}
.cta-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 var(--catalog-space-xl);
}
.cta-title {
font-size: var(--catalog-font-size-4xl);
font-weight: 700;
margin-bottom: var(--catalog-space-lg);
line-height: 1.2;
}
.cta-description {
font-size: var(--catalog-font-size-xl);
margin-bottom: var(--catalog-space-xxl);
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-actions {
display: flex;
gap: var(--catalog-space-lg);
justify-content: center;
flex-wrap: wrap;
}
.cta-action-btn {
padding: var(--catalog-space-lg) var(--catalog-space-xxl);
border-radius: var(--catalog-radius-xl);
font-size: var(--catalog-font-size-base);
font-weight: 600;
cursor: pointer;
transition: var(--catalog-transition-base);
border: none;
min-width: 220px;
}
.cta-action-btn.primary {
background: var(--catalog-white);
color: var(--catalog-primary);
}
.cta-action-btn.primary:hover {
background: var(--catalog-background);
transform: translateY(-2px);
box-shadow: var(--catalog-shadow-lg);
}
.cta-action-btn.secondary {
background: transparent;
color: var(--catalog-white);
border: 2px solid var(--catalog-white);
}
.cta-action-btn.secondary:hover {
background: var(--catalog-white);
color: var(--catalog-primary);
}
/* List View Styles */
.directory-grid.list-view {
grid-template-columns: 1fr;
gap: var(--catalog-space-lg);
}
.directory-grid.list-view .agent-card {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--catalog-space-lg);
align-items: center;
padding: var(--catalog-space-lg);
}
.directory-grid.list-view .card-header {
padding: 0;
background: none;
border: none;
flex-direction: column;
gap: var(--catalog-space-md);
}
.directory-grid.list-view .card-content {
padding: 0;
}
.directory-grid.list-view .agent-benefits {
display: flex;
gap: var(--catalog-space-lg);
margin: var(--catalog-space-md) 0;
padding: var(--catalog-space-md);
}
.directory-grid.list-view .card-footer {
margin: 0;
padding: 0;
border: none;
flex-direction: column;
gap: var(--catalog-space-md);
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus Styles */
button:focus,
input:focus,
select:focus,
a:focus {
outline: 2px solid var(--catalog-primary);
outline-offset: 2px;
}
.filter-option:focus-within {
background: rgba(113, 75, 103, 0.1);
border-radius: var(--catalog-radius-md);
}
/* WooCommerce Product Rating - Completely hidden */
.woocommerce-product-rating,
.woocommerce-Reviews .woocommerce-product-rating,
.woocommerce .star-rating,
.woocommerce .star-rating::before,
.woocommerce .star-rating span,
.woocommerce .star-rating span::before,
.woocommerce-review-link,
.woocommerce-product-rating .star-rating,
.woocommerce-product-rating .star-rating::before,
.woocommerce-product-rating .star-rating span,
.woocommerce-product-rating .star-rating span::before {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Remove any spacing that might be left */
.woocommerce-product-rating,
.woocommerce-Reviews .woocommerce-product-rating {
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
}
.woocommerce-Reviews .woocommerce-product-rating,
.woocommerce-product-rating {
position: relative;
display: inline-block;
line-height: 1;
margin: 0;
padding: 0;
overflow: hidden;
}
/* Hide all text content */
.woocommerce-Reviews .woocommerce-product-rating *,
.woocommerce-product-rating * {
font-size: 0 !important;
line-height: 0 !important;
color: transparent !important;
display: none;
}
/* Show only the stars */
.woocommerce-Reviews .star-rating,
.woocommerce-product-rating .star-rating {
float: none;
display: inline-block;
position: relative;
margin: 0;
font-family: star !important;
font-size: 1em !important;
line-height: 1 !important;
width: 5.4em;
height: 1em;
overflow: hidden;
}
/* Star rating base (empty stars) */
.woocommerce-Reviews .star-rating::before,
.woocommerce-product-rating .star-rating::before {
content: '\53\53\53\53\53';
float: left;
position: absolute;
top: 0;
left: 0;
color: #d3ced2;
font-family: star;
letter-spacing: 0.2em;
font-size: 1em !important;
line-height: 1 !important;
display: block !important;
}
/* Filled stars */
.woocommerce-Reviews .star-rating span,
.woocommerce-product-rating .star-rating span {
display: block !important;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
height: 100%;
}
.woocommerce-Reviews .star-rating span::before,
.woocommerce-product-rating .star-rating span::before {
content: '\53\53\53\53\53';
color: #f9a825;
font-family: star;
letter-spacing: 0.2em;
font-size: 1em !important;
line-height: 1 !important;
position: absolute;
top: 0;
left: 0;
display: block !important;
}
/* Hide any text that might appear below the stars */
.woocommerce-Reviews .woocommerce-review-link,
.woocommerce-Reviews .woocommerce-review-link *,
.woocommerce-Reviews .woocommerce-review-link + *,
.woocommerce-product-rating > a,
.woocommerce-product-rating > span:not(.star-rating) {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px) !important;
-webkit-clip-path: inset(50%) !important;
clip-path: inset(50%) !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
}
/* Hide any text that might appear */
.woocommerce-product-rating::after,
.woocommerce-Reviews .woocommerce-product-rating::after {
content: none !important;
}
.woocommerce-Reviews .woocommerce-product-rating a.woocommerce-review-link {
font-size: 0.9em;
color: #666;
text-decoration: none;
}
.woocommerce-Reviews .woocommerce-product-rating a.woocommerce-review-link:hover {
text-decoration: underline;
color: #000;
}
/* ===== HERO SECTION ===== */
.hero-section {
padding: 80px 0;
background: #f8fafc;
}
.hero-section .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.hero-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 40px;
margin-bottom: 60px;
}
.hero-content h1 {
font-size: 3rem;
font-weight: 700;
line-height: 1.2;
color: #1e293b;
margin-bottom: 24px;
}
.hero-subtitle {
font-size: 1.25rem;
color: #475569;
line-height: 1.6;
margin-bottom: 32px;
max-width: 90%;
}
.hero-cta {
display: flex;
gap: 16px;
margin-top: 32px;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
border-radius: 6px;
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
border: 1px solid transparent;
}
.btn-primary {
background: #714b67;
color: white;
}
.btn-primary:hover {
background: #5d3e54;
transform: translateY(-1px);
}
.btn-outline {
background: white;
color: #714b67;
border: 1px solid #cbd5e1;
}
.btn-outline:hover {
border-color: #94a3b8;
background: #f8fafc;
}
.hero-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
align-content: start;
}
.feature-card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid #e2e8f0;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.card-icon {
font-size: 28px;
margin-bottom: 16px;
}
.feature-card h3 {
font-size: 1.125rem;
color: #1e293b;
margin-bottom: 8px;
}
.feature-card p {
color: #64748b;
font-size: 0.9375rem;
line-height: 1.5;
margin: 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
padding: 32px 0;
border-top: 1px solid #e2e8f0;
margin-top: 32px;
}
.stat-item {
text-align: center;
padding: 20px;
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: #714b67;
line-height: 1.2;
margin-bottom: 8px;
}
.stat-label {
color: #64748b;
font-size: 1rem;
font-weight: 500;
}
/* ===== HERO RESPONSIVE STYLES ===== */
/* Tablets */
@media (max-width: 1024px) {
.hero-content h1 {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.125rem;
}
.hero-cards {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
}
/* Large Phones */
@media (max-width: 768px) {
.hero-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.hero-content h1 {
font-size: 2.25rem;
text-align: center;
}
.hero-subtitle {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.hero-cta {
justify-content: center;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.stat-item {
padding: 0;
}
}
/* Small Phones */
@media (max-width: 480px) {
.hero-section {
padding: 60px 0;
}
.hero-content h1 {
font-size: 1.875rem;
}
.hero-cta {
flex-direction: column;
gap: 12px;
}
.btn {
width: 100%;
text-align: center;
}
.stats-grid {
padding: 24px 0;
}
}
/* ===== RESPONSIVE STYLES ===== */
/* Large Tablets and Small Desktops */
@media (max-width: 1200px) {
.content-wrapper {
grid-template-columns: 250px 1fr;
gap: var(--catalog-space-xl);
padding: 0 var(--catalog-space-lg);
}
.hero-wrapper {
padding: 0 var(--catalog-space-lg);
}
.header-wrapper {
padding: 0 var(--catalog-space-lg);
}
.hero-main-title {
font-size: var(--catalog-font-size-4xl);
}
.directory-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.featured-agents-grid {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
}
/* Tablets */
@media (max-width: 768px) {
/* Navigation */
.nav-mobile-trigger {
display: flex;
}
.primary-navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--catalog-white);
transform: translateX(-100%);
transition: var(--catalog-transition-base);
z-index: 999;
padding: var(--catalog-space-xxxl) var(--catalog-space-xl);
}
.primary-navigation.active {
transform: translateX(0);
}
.nav-menu {
flex-direction: column;
gap: var(--catalog-space-xl);
width: 100%;
}
.nav-menu a {
font-size: var(--catalog-font-size-xl);
padding: var(--catalog-space-lg);
width: 100%;
text-align: center;
}
/* Layout */
.content-wrapper {
grid-template-columns: 1fr;
gap: var(--catalog-space-lg);
padding: 0 var(--catalog-space-md);
}
.filters-sidebar {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 996;
transform: translateX(-100%);
transition: var(--catalog-transition-base);
background: var(--catalog-white);
overflow-y: auto;
border-radius: 0;
border: none;
}
.filters-sidebar.active {
transform: translateX(0);
}
.mobile-filter-toggle {
display: flex;
}
/* Hero */
.catalog-hero {
padding: var(--catalog-space-xxl) 0;
}
.hero-main-title {
font-size: var(--catalog-font-size-3xl);
}
.hero-description {
font-size: var(--catalog-font-size-lg);
}
.hero-metrics-grid {
grid-template-columns: 1fr;
gap: var(--catalog-space-md);
}
/* Search */
.search-input-group {
flex-direction: column;
gap: var(--catalog-space-md);
}
.search-field {
order: 1;
}
.search-submit-btn {
order: 2;
width: 100%;
}
.quick-filter-tags {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: var(--catalog-space-sm);
}
.filter-tag {
white-space: nowrap;
flex-shrink: 0;
}
/* Cards */
.directory-grid {
grid-template-columns: 1fr;
}
.featured-agents-grid {
grid-template-columns: 1fr;
}
.agent-benefits,
.agent-metrics {
grid-template-columns: 1fr;
}
/* Results Header */
.results-header {
flex-direction: column;
gap: var(--catalog-space-lg);
align-items: stretch;
}
.results-controls {
justify-content: space-between;
}
/* CTA */
.cta-title {
font-size: var(--catalog-font-size-3xl);
}
.cta-actions {
flex-direction: column;
align-items: center;
}
.cta-action-btn {
width: 100%;
max-width: 300px;
}
/* Comparison Panel */
.panel-actions {
flex-direction: column;
}
.compare-action-btn {
width: 100%;
}
}
/* Mobile Phones */
@media (max-width: 480px) {
:root {
--catalog-space-xl: 1rem;
--catalog-space-xxl: 1.5rem;
--catalog-space-xxxl: 2rem;
}
.hero-wrapper,
.header-wrapper,
.content-wrapper,
.cta-wrapper {
padding: 0 var(--catalog-space-md);
}
.hero-main-title {
font-size: var(--catalog-font-size-2xl);
}
.hero-description {
font-size: var(--catalog-font-size-base);
}
.catalog-hero {
padding: var(--catalog-space-xl) 0;
}
.catalog-main-content {
padding: var(--catalog-space-xl) 0;
}
.catalog-footer-cta {
padding: var(--catalog-space-xl) 0;
}
.results-title {
font-size: var(--catalog-font-size-2xl);
}
.cta-title {
font-size: var(--catalog-font-size-2xl);
}
.featured-agent-card,
.agent-card {
margin: 0 calc(-1 * var(--catalog-space-md));
border-radius: 0;
border-left: none;
border-right: none;
}
.search-control-panel {
margin-bottom: var(--catalog-space-lg);
}
.primary-search-box {
margin-bottom: var(--catalog-space-md);
}
.agent-actions,
.card-actions {
flex-direction: column;
gap: var(--catalog-space-sm);
}
.action-btn,
.compare-btn,
.details-btn {
width: 100%;
}
.card-footer {
flex-direction: column;
gap: var(--catalog-space-md);
align-items: stretch;
}
.mobile-filter-toggle {
bottom: var(--catalog-space-md);
right: var(--catalog-space-md);
padding: var(--catalog-space-md);
}
}
/* Very Small Screens */
@media (max-width: 360px) {
.hero-main-title {
font-size: var(--catalog-font-size-xl);
}
.brand-name {
font-size: var(--catalog-font-size-xl);
}
.results-title {
font-size: var(--catalog-font-size-xl);
}
.cta-title {
font-size: var(--catalog-font-size-xl);
}
.agent-icon {
width: 40px;
height: 40px;
font-size: var(--catalog-font-size-base);
}
.card-header .agent-icon {
width: 40px;
height: 40px;
font-size: var(--catalog-font-size-base);
}
}
/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.catalog-hero::before {
background-size: 40px 40px;
}
}
/* Landscape Orientation on Mobile */
@media (max-width: 768px) and (orientation: landscape) {
.catalog-hero {
padding: var(--catalog-space-lg) 0;
}
.hero-metrics-grid {
grid-template-columns: repeat(3, 1fr);
max-width: none;
}
.hero-main-title {
font-size: var(--catalog-font-size-2xl);
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
:root {
--catalog-dark: #f7fafc;
--catalog-medium: #a0aec0;
--catalog-light: #718096;
--catalog-border: #2d3748;
--catalog-background: #1a202c;
--catalog-white: #2d3748;
}
.catalog-hero {
background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
}
.search-input-group {
background: var(--catalog-white);
border-color: var(--catalog-border);
}
}
/* Print Styles */
@media print {
.nav-mobile-trigger,
.mobile-filter-toggle,
.comparison-panel,
.catalog-footer-cta {
display: none !important;
}
.agent-card,
.featured-agent-card {
break-inside: avoid;
box-shadow: none;
border: 1px solid #ccc;
}
.content-wrapper {
grid-template-columns: 1fr;
}
.filters-sidebar {
display: none;
}
}s-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--catalog-space-xl);
}
.featured-agent-card {
background: var(--catalog-white);
border-radius: var(--catalog-radius-xl);
padding: var(--catalog-space-xl);
border: 1px solid var(--catalog-border);
box-shadow: var(--catalog-shadow-md);
transition: var(--catalog-transition-base);
position: relative;
overflow: hidden;
}
/* resources */
/* ===== RESOURCES PAGE CSS ===== */
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--resources-primary-purple: #714b67;
--resources-purple-dark: #5d3e54;
--resources-purple-light: #8b6b81;
--resources-teal: #00a09d;
--resources-ai-blue: #2c5aa0;
--resources-success: #28a745;
--resources-warning: #ffc107;
--resources-error: #dc3545;
--resources-dark-gray: #343a40;
--resources-medium-gray: #6c757d;
--resources-light-gray: #adb5bd;
--resources-border-gray: #dee2e6;
--resources-bg-gray: #f8f9fa;
--resources-white: #ffffff;
--resources-shadow-light: 0 2px 10px rgba(0,0,0,0.05);
--resources-shadow-medium: 0 4px 20px rgba(0,0,0,0.1);
--resources-shadow-heavy: 0 8px 30px rgba(0,0,0,0.15);
--resources-gradient-primary: linear-gradient(135deg, var(--resources-primary-purple), var(--resources-ai-blue));
--resources-gradient-secondary: linear-gradient(135deg, var(--resources-teal), var(--resources-ai-blue));
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: var(--resources-dark-gray);
overflow-x: hidden;
scroll-behavior: smooth;
}
.resources-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* ===== ACCESSIBILITY ===== */
.resources-skip-link {
position: absolute;
top: -40px;
left: 6px;
background: var(--resources-primary-purple);
color: white;
padding: 8px 16px;
text-decoration: none;
border-radius: 4px;
z-index: 100000;
font-weight: 600;
}
.resources-skip-link:focus {
top: 6px;
}
.resources-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ===== NAVIGATION ===== */
.resources-navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 16px 0;
border-bottom: 1px solid var(--resources-border-gray);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.resources-nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.resources-nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.resources-logo a {
text-decoration: none;
}
.resources-logo-text {
font-size: 24px;
font-weight: 800;
background: var(--resources-gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.resources-nav-menu {
display: flex;
list-style: none;
gap: 32px;
align-items: center;
margin: 0;
}
.resources-nav-menu a {
text-decoration: none;
color: var(--resources-dark-gray);
font-weight: 500;
font-size: 16px;
transition: color 0.3s ease;
position: relative;
}
.resources-nav-menu a:hover {
color: var(--resources-primary-purple);
}
.resources-nav-menu a[aria-current="page"] {
color: var(--resources-primary-purple);
font-weight: 600;
}
.resources-nav-menu a[aria-current="page"]::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 2px;
background: var(--resources-primary-purple);
}
.resources-nav-cta {
background: var(--resources-primary-purple) !important;
color: white !important;
padding: 10px 20px !important;
border-radius: 6px !important;
font-weight: 600 !important;
}
.resources-nav-cta:hover {
background: var(--resources-purple-dark) !important;
transform: translateY(-1px);
}
/* Mobile Menu Toggle */
.resources-mobile-toggle {
display: none;
position: fixed;
top: 20px;
right: 20px;
z-index: 1001;
background: var(--resources-primary-purple);
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
transition: all 0.3s ease;
}
.resources-hamburger-line {
width: 20px;
height: 2px;
background: white;
transition: all 0.3s ease;
}
.resources-mobile-active .resources-hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.resources-mobile-active .resources-hamburger-line:nth-child(2) {
opacity: 0;
}
.resources-mobile-active .resources-hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* ===== BREADCRUMB ===== */
.resources-breadcrumb {
background: var(--resources-bg-gray);
padding: 100px 0 20px;
border-bottom: 1px solid var(--resources-border-gray);
}
.resources-breadcrumb-list {
display: flex;
list-style: none;
gap: 8px;
align-items: center;
font-size: 14px;
}
.resources-breadcrumb-list li {
color: var(--resources-medium-gray);
}
.resources-breadcrumb-list li:not(:last-child)::after {
content: '/';
margin-left: 8px;
color: var(--resources-light-gray);
}
.resources-breadcrumb-list a {
color: var(--resources-primary-purple);
text-decoration: none;
}
.resources-breadcrumb-list a:hover {
text-decoration: underline;
}
/* ===== HERO SECTION ===== */
.resources-hero-section {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.resources-hero-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.resources-hero-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
position: relative;
z-index: 1;
}
.resources-hero-title {
font-size: 48px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
background: var(--resources-gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.resources-hero-description {
font-size: 20px;
color: var(--resources-medium-gray);
margin-bottom: 32px;
line-height: 1.6;
max-width: 600px;
}
.resources-hero-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 500px;
}
.resources-stat-item {
text-align: center;
padding: 20px;
background: white;
border-radius: 12px;
box-shadow: var(--resources-shadow-light);
transition: transform 0.3s ease;
}
.resources-stat-item:hover {
transform: translateY(-4px);
}
.resources-stat-number {
font-size: 32px;
font-weight: 700;
color: var(--resources-primary-purple);
display: block;
}
.resources-stat-label {
font-size: 14px;
color: var(--resources-medium-gray);
margin-top: 8px;
}
.resources-hero-visual {
position: relative;
height: 400px;
background: var(--resources-gradient-primary);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.resources-visual-elements {
position: relative;
width: 100%;
height: 100%;
}
.resources-floating-card {
position: absolute;
background: white;
border-radius: 12px;
padding: 16px;
box-shadow: var(--resources-shadow-medium);
min-width: 120px;
text-align: center;
animation: resources-float 6s ease-in-out infinite;
}
.resources-card-1 {
top: 15%;
left: 10%;
animation-delay: 0s;
}
.resources-card-2 {
top: 60%;
right: 15%;
animation-delay: 2s;
}
.resources-card-3 {
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
.resources-card-icon {
font-size: 24px;
margin-bottom: 8px;
}
.resources-card-title {
font-weight: 600;
font-size: 14px;
color: var(--resources-dark-gray);
display: block;
}
.resources-card-subtitle {
font-size: 12px;
color: var(--resources-medium-gray);
margin-top: 4px;
}
@keyframes resources-float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
25% { transform: translateY(-15px) rotate(1deg); }
50% { transform: translateY(-20px) rotate(0deg); }
75% { transform: translateY(-10px) rotate(-1deg); }
}
/* ===== SECTION HEADERS ===== */
.resources-section-header {
text-align: center;
margin-bottom: 64px;
}
.resources-section-title {
font-size: 40px;
font-weight: 700;
margin-bottom: 16px;
color: var(--resources-dark-gray);
line-height: 1.2;
}
.resources-section-subtitle {
font-size: 18px;
color: var(--resources-medium-gray);
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.resources-categories-header {
text-align: center;
margin-bottom: 64px;
}
/* ===== CATEGORIES SECTION ===== */
.resources-categories-section {
padding: 80px 0;
background: white;
}
.resources-category-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
}
.resources-category-card {
background: white;
border-radius: 20px;
padding: 32px;
border: 2px solid var(--resources-border-gray);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
text-align: center;
}
.resources-category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--resources-gradient-secondary);
transition: height 0.3s ease;
}
.resources-category-card:hover {
transform: translateY(-8px);
box-shadow: var(--resources-shadow-heavy);
border-color: var(--resources-primary-purple);
}
.resources-category-card:hover::before {
height: 6px;
}
.resources-category-icon {
font-size: 48px;
margin-bottom: 20px;
display: block;
}
.resources-category-title {
font-size: 24px;
font-weight: 700;
margin-bottom: 16px;
color: var(--resources-dark-gray);
}
.resources-category-description {
color: var(--resources-medium-gray);
line-height: 1.6;
margin-bottom: 20px;
font-size: 15px;
}
.resources-category-count {
font-weight: 600;
color: var(--resources-primary-purple);
font-size: 14px;
margin-bottom: 24px;
}
.resources-category-link {
background: var(--resources-primary-purple);
color: white;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.resources-category-link:hover {
background: var(--resources-purple-dark);
transform: translateY(-2px);
}
/* ===== CASE STUDIES SECTION ===== */
.resources-case-studies-section {
padding: 80px 0;
background: var(--resources-bg-gray);
}
.resources-case-studies-grid {
display: flex;
flex-direction: column;
gap: 48px;
}
.resources-case-study-card {
background: white;
border-radius: 20px;
padding: 40px;
border: 1px solid var(--resources-border-gray);
box-shadow: var(--resources-shadow-light);
transition: all 0.3s ease;
}
.resources-case-study-card:hover {
transform: translateY(-4px);
box-shadow: var(--resources-shadow-medium);
}
.resources-case-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid var(--resources-border-gray);
}
.resources-case-industry {
background: var(--resources-gradient-secondary);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 16px;
display: inline-block;
}
.resources-company-name {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
color: var(--resources-dark-gray);
}
.resources-company-details {
color: var(--resources-medium-gray);
font-size: 14px;
}
.resources-case-result {
text-align: right;
}
.resources-result-value {
font-size: 32px;
font-weight: 700;
color: var(--resources-primary-purple);
display: block;
}
.resources-result-label {
font-size: 14px;
color: var(--resources-medium-gray);
}
.resources-case-content {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
margin-bottom: 32px;
}
.resources-case-subtitle {
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
color: var(--resources-dark-gray);
}
.resources-case-challenge p {
color: var(--resources-medium-gray);
line-height: 1.6;
font-size: 15px;
}
.resources-solution-list {
list-style: none;
padding: 0;
}
.resources-solution-list li {
position: relative;
padding-left: 20px;
margin-bottom: 8px;
color: var(--resources-medium-gray);
font-size: 15px;
line-height: 1.5;
}
.resources-solution-list li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--resources-success);
font-weight: 700;
}
.resources-results-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.resources-result-metric {
text-align: center;
padding: 16px;
background: var(--resources-bg-gray);
border-radius: 12px;
transition: transform 0.3s ease;
}
.resources-result-metric:hover {
transform: translateY(-2px);
}
.resources-metric-number {
font-weight: 700;
color: var(--resources-primary-purple);
font-size: 20px;
display: block;
line-height: 1;
}
.resources-metric-label {
font-size: 12px;
color: var(--resources-medium-gray);
margin-top: 4px;
line-height: 1.2;
}
.resources-case-quote {
background: var(--resources-bg-gray);
padding: 24px;
border-radius: 12px;
border-left: 4px solid var(--resources-primary-purple);
margin: 32px 0;
}
.resources-case-quote p {
font-size: 16px;
font-style: italic;
color: var(--resources-dark-gray);
margin-bottom: 16px;
line-height: 1.6;
}
.resources-quote-attribution {
display: flex;
align-items: center;
gap: 12px;
}
.resources-quote-avatar {
width: 40px;
height: 40px;
background: var(--resources-gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 14px;
}
.resources-author-name {
font-weight: 600;
color: var(--resources-dark-gray);
font-style: normal;
margin: 0;
display: block;
}
.resources-author-title {
color: var(--resources-medium-gray);
font-size: 12px;
margin: 0;
}
.resources-case-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
border-top: 1px solid var(--resources-border-gray);
}
.resources-case-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.resources-tag {
background: var(--resources-bg-gray);
color: var(--resources-medium-gray);
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.resources-download-btn {
background: var(--resources-primary-purple);
color: white;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
}
.resources-download-btn:hover {
background: var(--resources-purple-dark);
transform: translateY(-2px);
}
/* ===== BLOG SECTION ===== */
.resources-blog-section {
padding: 80px 0;
background: white;
}
.resources-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
margin-bottom: 48px;
}
.resources-blog-card {
background: white;
border-radius: 16px;
border: 1px solid var(--resources-border-gray);
overflow: hidden;
transition: all 0.3s ease;
position: relative;
}
.resources-blog-card:hover {
transform: translateY(-6px);
box-shadow: var(--resources-shadow-medium);
}
.resources-featured-post {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.resources-blog-image {
position: relative;
height: 200px;
background: var(--resources-gradient-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.resources-featured-post .resources-blog-image {
height: auto;
min-height: 300px;
}
.resources-placeholder-image {
font-size: 48px;
color: white;
}
.resources-blog-category {
position: absolute;
top: 16px;
left: 16px;
background: white;
color: var(--resources-primary-purple);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.resources-blog-content {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.resources-blog-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: var(--resources-dark-gray);
line-height: 1.3;
}
.resources-featured-post .resources-blog-title {
font-size: 28px;
margin-bottom: 16px;
}
.resources-blog-excerpt {
color: var(--resources-medium-gray);
line-height: 1.6;
margin-bottom: 20px;
font-size: 15px;
flex: 1;
}
.resources-blog-meta {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.resources-author-info {
display: flex;
align-items: center;
gap: 12px;
}
.resources-author-avatar {
width: 32px;
height: 32px;
background: var(--resources-gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
font-size: 12px;
}
.resources-author-details {
display: flex;
flex-direction: column;
}
.resources-author-name {
font-weight: 600;
font-size: 14px;
color: var(--resources-dark-gray);
}
.resources-publish-date {
font-size: 12px;
color: var(--resources-medium-gray);
}
.resources-read-time {
font-size: 12px;
color: var(--resources-medium-gray);
font-weight: 500;
}
.resources-blog-link {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-decoration: none;
z-index: 1;
}
.resources-blog-footer {
text-align: center;
}
.resources-view-all-btn {
background: transparent;
color: var(--resources-primary-purple);
border: 2px solid var(--resources-primary-purple);
padding: 12px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.resources-view-all-btn:hover {
background: var(--resources-primary-purple);
color: white;
transform: translateY(-2px);
}
/* ===== WHITEPAPERS SECTION ===== */
.resources-whitepapers-section {
padding: 80px 0;
background: var(--resources-bg-gray);
}
.resources-whitepapers-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
}
.resources-whitepaper-card {
background: white;
border-radius: 16px;
padding: 32px;
border: 1px solid var(--resources-border-gray);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.resources-whitepaper-card:hover {
transform: translateY(-6px);
box-shadow: var(--resources-shadow-medium);
}
.resources-whitepaper-type {
background: var(--resources-gradient-secondary);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
margin-bottom: 20px;
display: inline-block;
align-self: flex-start;
}
.resources-whitepaper-content {
flex: 1;
}
.resources-whitepaper-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: var(--resources-dark-gray);
line-height: 1.3;
}
.resources-whitepaper-description {
color: var(--resources-medium-gray);
line-height: 1.6;
margin-bottom: 20px;
font-size: 15px;
}
.resources-whitepaper-details {
display: flex;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.resources-detail-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--resources-medium-gray);
}
.resources-detail-icon {
font-size: 14px;
}
.resources-whitepaper-topics {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.resources-topic-tag {
background: var(--resources-bg-gray);
color: var(--resources-medium-gray);
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
}
.resources-whitepaper-footer {
padding-top: 20px;
border-top: 1px solid var(--resources-border-gray);
}
.resources-download-link {
background: var(--resources-primary-purple);
color: white;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
display: inline-block;
}
.resources-download-link:hover {
background: var(--resources-purple-dark);
transform: translateY(-2px);
}
/* ===== VIDEOS SECTION ===== */
.resources-videos-section {
padding: 80px 0;
background: white;
}
.resources-videos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 32px;
margin-bottom: 48px;
}
.resources-video-card {
background: white;
border-radius: 16px;
border: 1px solid var(--resources-border-gray);
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.resources-video-card:hover {
transform: translateY(-6px);
box-shadow: var(--resources-shadow-medium);
}
.resources-video-thumbnail {
position: relative;
height: 180px;
background: var(--resources-gradient-secondary);
display: flex;
align-items: center;
justify-content: center;
}
.resources-video-placeholder {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.6));
}
.resources-play-button {
font-size: 48px;
color: white;
opacity: 0.9;
transition: all 0.3s ease;
}
.resources-video-card:hover .resources-play-button {
transform: scale(1.1);
opacity: 1;
}
.resources-video-duration {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0,0,0,0.8);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
}
.resources-video-category {
position: absolute;
top: 12px;
left: 12px;
background: white;
color: var(--resources-primary-purple);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
}
.resources-video-content {
padding: 20px;
}
.resources-video-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--resources-dark-gray);
line-height: 1.3;
}
.resources-video-description {
color: var(--resources-medium-gray);
line-height: 1.5;
margin-bottom: 16px;
font-size: 14px;
}
.resources-video-meta {
display: flex;
justify-content: space-between;
align-items: center;
}
.resources-video-stats {
display: flex;
gap: 12px;
font-size: 12px;
color: var(--resources-medium-gray);
}
.resources-video-tags {
display: flex;
gap: 6px;
}
.resources-video-tag {
background: var(--resources-bg-gray);
color: var(--resources-medium-gray);
padding: 3px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 500;
}
.resources-videos-footer {
text-align: center;
}
/* ===== NEWSLETTER SECTION ===== */
.resources-newsletter-section {
padding: 80px 0;
background: var(--resources-gradient-primary);
color: white;
}
.resources-newsletter-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
}
.resources-newsletter-title {
font-size: 36px;
font-weight: 700;
margin-bottom: 16px;
line-height: 1.2;
}
.resources-newsletter-description {
font-size: 18px;
margin-bottom: 24px;
opacity: 0.9;
line-height: 1.6;
}
.resources-newsletter-benefits {
display: flex;
flex-direction: column;
gap: 12px;
}
.resources-benefit-item {
display: flex;
align-items: center;
gap: 12px;
}
.resources-benefit-icon {
font-size: 20px;
}
.resources-benefit-text {
font-size: 16px;
font-weight: 500;
}
.resources-subscription-form {
background: white;
padding: 32px;
border-radius: 16px;
}
.resources-form-group {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.resources-email-input {
flex: 1;
padding: 12px 16px;
border: 1px solid var(--resources-border-gray);
border-radius: 8px;
font-size: 16px;
color: var(--resources-dark-gray);
}
.resources-email-input:focus {
outline: none;
border-color: var(--resources-primary-purple);
box-shadow: 0 0 0 3px rgba(113, 75, 103, 0.1);
}
.resources-subscribe-btn {
background: var(--resources-primary-purple);
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.resources-subscribe-btn:hover {
background: var(--resources-purple-dark);
transform: translateY(-1px);
}
.resources-privacy-note {
font-size: 12px;
color: var(--resources-medium-gray);
text-align: center;
margin: 0;
}
.resources-privacy-note a {
color: var(--resources-primary-purple);
text-decoration: none;
}
.resources-privacy-note a:hover {
text-decoration: underline;
}
/* ===== CTA SECTION ===== */
.resources-cta-section {
padding: 80px 0;
background: var(--resources-bg-gray);
text-align: center;
}
.resources-cta-title {
font-size: 36px;
font-weight: 700;
margin-bottom: 16px;
color: var(--resources-dark-gray);
line-height: 1.2;
}
.resources-cta-description {
font-size: 18px;
color: var(--resources-medium-gray);
margin-bottom: 32px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
}
.resources-cta-actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.resources-primary-cta {
background: var(--resources-primary-purple);
color: white;
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.resources-primary-cta:hover {
background: var(--resources-purple-dark);
transform: translateY(-2px);
box-shadow: var(--resources-shadow-medium);
}
.resources-secondary-cta {
background: transparent;
color: var(--resources-primary-purple);
border: 2px solid var(--resources-primary-purple);
padding: 14px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.resources-secondary-cta:hover {
background: var(--resources-primary-purple);
color: white;
transform: translateY(-2px);
}
/* ===== FOOTER ===== */
.resources-footer {
background: var(--resources-dark-gray);
color: white;
padding: 40px 0;
text-align: center;
}
.resources-footer-text {
font-size: 14px;
opacity: 0.8;
}
.resources-footer-text a {
color: white;
text-decoration: none;
}
.resources-footer-text a:hover {
text-decoration: underline;
}
/* ===== ANIMATIONS ===== */
.resources-animate-in {
animation: resources-slideInUp 0.6s ease-out;
}
@keyframes resources-slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== FOCUS STYLES ===== */
a:focus,
button:focus,
input:focus,
.resources-primary-cta:focus,
.resources-secondary-cta:focus {
outline: 2px solid var(--resources-primary-purple);
outline-offset: 2px;
}
/* ===== RESPONSIVE DESIGN ===== */
/* Large tablets and small desktops */
@media (max-width: 1024px) {
.resources-container {
padding: 0 32px;
}
.resources-hero-title {
font-size: 42px;
}
.resources-section-title {
font-size: 36px;
}
.resources-hero-content {
gap: 48px;
}
.resources-case-content {
grid-template-columns: 1fr;
gap: 24px;
}
.resources-newsletter-content {
gap: 48px;
}
}
/* Tablets */
@media (max-width: 768px) {
.resources-container {
padding: 0 20px;
}
/* Mobile Navigation */
.resources-mobile-toggle {
display: flex;
}
.resources-nav-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
flex-direction: column;
justify-content: center;
gap: 40px;
transform: translateX(-100%);
transition: transform 0.3s ease;
z-index: 999;
}
.resources-nav-active {
transform: translateX(0);
}
.resources-nav-menu a {
font-size: 24px;
}
.resources-nav-open {
overflow: hidden;
}
/* Hero Section */
.resources-hero-section {
padding: 60px 0 40px;
}
.resources-hero-content {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.resources-hero-title {
font-size: 36px;
}
.resources-hero-description {
font-size: 18px;
}
.resources-hero-stats {
grid-template-columns: 1fr;
gap: 16px;
max-width: 400px;
margin: 0 auto;
}
.resources-hero-visual {
height: 300px;
}
.resources-floating-card {
min-width: 100px;
padding: 12px;
font-size: 12px;
}
/* Sections */
.resources-section-title {
font-size: 32px;
}
.resources-section-subtitle {
font-size: 16px;
}
/* Categories */
.resources-category-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.resources-category-card {
padding: 24px;
}
/* Case Studies */
.resources-case-study-card {
padding: 24px;
}
.resources-case-header {
flex-direction: column;
gap: 16px;
text-align: center;
}
.resources-case-content {
grid-template-columns: 1fr;
gap: 24px;
}
.resources-results-grid {
grid-template-columns: 1fr 1fr;
}
.resources-case-footer {
flex-direction: column;
gap: 16px;
text-align: center;
}
/* Blog */
.resources-blog-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.resources-featured-post {
grid-template-columns: 1fr;
grid-column: 1;
}
.resources-featured-post .resources-blog-image {
min-height: 200px;
}
/* Whitepapers */
.resources-whitepapers-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.resources-whitepaper-card {
padding: 24px;
}
.resources-whitepaper-details {
gap: 12px;
}
/* Videos */
.resources-videos-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.resources-video-card {
max-width: 500px;
margin: 0 auto;
}
/* Newsletter */
.resources-newsletter-content {
grid-template-columns: 1fr;
gap: 32px;
text-align: center;
}
.resources-form-group {
flex-direction: column;
}
.resources-subscribe-btn {
width: 100%;
}
/* CTA */
.resources-cta-title {
font-size: 28px;
}
.resources-cta-description {
font-size: 16px;
}
.resources-cta-actions {
flex-direction: column;
align-items: center;
}
}
/* Mobile phones */
@media (max-width: 480px) {
.resources-container {
padding: 0 16px;
}
/* Hero */
.resources-hero-section {
padding: 50px 0 30px;
}
.resources-hero-title {
font-size: 28px;
}
.resources-hero-description {
font-size: 16px;
margin-bottom: 24px;
}
.resources-hero-visual {
height: 250px;
}
.resources-floating-card {
min-width: 80px;
padding: 8px;
font-size: 10px;
}
.resources-card-title {
font-size: 12px;
}
.resources-card-subtitle {
font-size: 10px;
}
/* Sections */
.resources-section-title {
font-size: 28px;
}
.resources-section-subtitle {
font-size: 15px;
}
/* Categories */
.resources-category-card {
padding: 20px;
}
.resources-category-title {
font-size: 20px;
}
.resources-category-description {
font-size: 14px;
}
/* Case Studies */
.resources-case-study-card {
padding: 20px;
}
.resources-company-name {
font-size: 20px;
}
.resources-company-details {
font-size: 13px;
}
.resources-result-value {
font-size: 24px;
}
.resources-case-subtitle {
font-size: 16px;
}
.resources-results-grid {
grid-template-columns: 1fr;
gap: 12px;
}
.resources-metric-number {
font-size: 18px;
}
.resources-metric-label {
font-size: 11px;
}
/* Blog */
.resources-blog-card {
margin: 0;
}
.resources-blog-content {
padding: 20px;
}
.resources-blog-title {
font-size: 18px;
}
.resources-featured-post .resources-blog-title {
font-size: 24px;
}
.resources-blog-excerpt {
font-size: 14px;
}
/* Whitepapers */
.resources-whitepaper-card {
padding: 20px;
}
.resources-whitepaper-title {
font-size: 18px;
}
.resources-whitepaper-description {
font-size: 14px;
}
.resources-whitepaper-details {
flex-direction: column;
gap: 8px;
}
/* Videos */
.resources-video-content {
padding: 16px;
}
.resources-video-title {
font-size: 16px;
}
.resources-video-description {
font-size: 13px;
}
/* Newsletter */
.resources-newsletter-title {
font-size: 28px;
}
.resources-newsletter-description {
font-size: 16px;
}
.resources-subscription-form {
padding: 24px;
}
.resources-benefit-item {
font-size: 14px;
}
/* CTA */
.resources-cta-title {
font-size: 24px;
}
.resources-cta-description {
font-size: 15px;
}
.resources-primary-cta,
.resources-secondary-cta {
padding: 12px 24px;
font-size: 14px;
width: 100%;
max-width: 280px;
}
}
/* Very small screens */
@media (max-width: 360px) {
.resources-hero-title {
font-size: 24px;
}
.resources-section-title {
font-size: 24px;
}
.resources-category-icon {
font-size: 36px;
}
.resources-case-study-card,
.resources-category-card,
.resources-whitepaper-card {
padding: 16px;
}
.resources-subscription-form {
padding: 20px;
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.resources-hero-section::before {
background-size: 50px 50px;
}
}
/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
.resources-hero-section {
padding: 40px 0 30px;
}
.resources-hero-visual {
height: 200px;
}
.resources-floating-card {
min-width: 60px;
padding: 6px;
font-size: 9px;
}
}
/* Print styles */
@media print {
.resources-navigation,
.resources-mobile-toggle,
.resources-newsletter-section,
.resources-cta-section,
.resources-footer {
display: none;
}
.resources-hero-section {
padding: 20px 0;
}
.resources-case-study-card,
.resources-blog-card,
.resources-whitepaper-card {
break-inside: avoid;
margin-bottom: 20px;
}
* {
background: transparent !important;
color: black !important;
box-shadow: none !important;
text-shadow: none !important;
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.resources-case-study-card,
.resources-category-card,
.resources-blog-card,
.resources-whitepaper-card,
.resources-video-card {
border-width: 2px;
border-color: var(--resources-dark-gray);
}
.resources-primary-cta,
.resources-secondary-cta,
.resources-subscribe-btn {
border-width: 2px;
}
}
/* solutions */
/* Solutions Page - Complete CSS Styles */
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--solutions-primary-purple: #714b67;
--solutions-purple-dark: #5d3e54;
--solutions-purple-light: #8b6b81;
--solutions-teal: #00a09d;
--solutions-ai-blue: #2c5aa0;
--solutions-success: #28a745;
--solutions-warning: #ffc107;
--solutions-error: #dc3545;
--solutions-dark-gray: #343a40;
--solutions-medium-gray: #6c757d;
--solutions-light-gray: #adb5bd;
--solutions-border-gray: #dee2e6;
--solutions-bg-gray: #f8f9fa;
--solutions-white: #ffffff;
--solutions-gradient-primary: linear-gradient(135deg, #714b67, #2c5aa0);
--solutions-gradient-secondary: linear-gradient(135deg, #00a09d, #2c5aa0);
--solutions-shadow-light: 0 4px 20px rgba(0,0,0,0.05);
--solutions-shadow-medium: 0 8px 30px rgba(0,0,0,0.1);
--solutions-shadow-heavy: 0 12px 40px rgba(0,0,0,0.15);
--solutions-transition: all 0.3s ease;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: var(--solutions-dark-gray);
overflow-x: hidden;
background: var(--solutions-white);
}
/* Container */
.solutions-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Mobile Menu Toggle */
.solutions-mobile-toggle {
display: none;
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
background: var(--solutions-primary-purple);
border: none;
border-radius: 8px;
width: 50px;
height: 50px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
cursor: pointer;
transition: var(--solutions-transition);
box-shadow: var(--solutions-shadow-medium);
}
.solutions-mobile-toggle span {
width: 20px;
height: 2px;
background: white;
transition: var(--solutions-transition);
}
.solutions-mobile-toggle.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}
.solutions-mobile-toggle.active span:nth-child(2) {
opacity: 0;
}
.solutions-mobile-toggle.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}
/* Hero Banner */
.solutions-hero-banner {
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
padding: 120px 0 80px;
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
}
.solutions-hero-banner::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.solutions-hero-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 48px;
}
.solutions-hero-content h1 {
font-size: 52px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
background: var(--solutions-gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.solutions-hero-content p {
font-size: 20px;
color: var(--solutions-medium-gray);
margin-bottom: 32px;
line-height: 1.6;
}
.solutions-hero-buttons {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.solutions-primary-btn {
background: var(--solutions-primary-purple);
color: white;
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: var(--solutions-transition);
display: inline-block;
}
.solutions-primary-btn:hover {
background: var(--solutions-purple-dark);
transform: translateY(-2px);
box-shadow: var(--solutions-shadow-medium);
}
.solutions-secondary-btn {
background: transparent;
color: var(--solutions-primary-purple);
border: 2px solid var(--solutions-primary-purple);
padding: 14px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: var(--solutions-transition);
display: inline-block;
}
.solutions-secondary-btn:hover {
background: var(--solutions-primary-purple);
color: white;
}
.solutions-hero-visual {
position: relative;
height: 500px;
background: var(--solutions-gradient-primary);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.solutions-floating-icons {
position: absolute;
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 20px;
padding: 40px;
}
.solutions-icon-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: var(--solutions-shadow-medium);
animation: solutionsFloat 8s ease-in-out infinite;
min-width: 120px;
text-align: center;
cursor: pointer;
transition: var(--solutions-transition);
}
.solutions-icon-card:nth-child(1) { animation-delay: 0s; }
.solutions-icon-card:nth-child(2) { animation-delay: 1.3s; }
.solutions-icon-card:nth-child(3) { animation-delay: 2.6s; }
.solutions-icon-card:nth-child(4) { animation-delay: 3.9s; }
.solutions-icon-card:nth-child(5) { animation-delay: 5.2s; }
.solutions-icon-card:nth-child(6) { animation-delay: 6.5s; }
@keyframes solutionsFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
25% { transform: translateY(-15px) rotate(1deg); }
50% { transform: translateY(-10px) rotate(-1deg); }
75% { transform: translateY(-20px) rotate(0.5deg); }
}
.solutions-icon {
font-size: 24px;
margin-bottom: 8px;
display: block;
}
.solutions-icon-card span {
font-size: 12px;
font-weight: 600;
color: var(--solutions-dark-gray);
}
.solutions-hero-metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.solutions-metric-box {
text-align: center;
padding: 24px;
background: white;
border-radius: 12px;
box-shadow: var(--solutions-shadow-light);
transition: var(--solutions-transition);
}
.solutions-metric-box:hover {
transform: translateY(-4px);
box-shadow: var(--solutions-shadow-medium);
}
.solutions-metric-number {
font-size: 36px;
font-weight: 700;
color: var(--solutions-primary-purple);
display: block;
margin-bottom: 8px;
}
.solutions-metric-text {
font-size: 14px;
color: var(--solutions-medium-gray);
}
/* Overview Section */
.solutions-overview-section {
padding: 100px 0;
background: white;
}
.solutions-overview-header {
text-align: center;
margin-bottom: 64px;
}
.solutions-overview-title {
font-size: 42px;
font-weight: 700;
margin-bottom: 16px;
color: var(--solutions-dark-gray);
}
.solutions-overview-subtitle {
font-size: 18px;
color: var(--solutions-medium-gray);
max-width: 600px;
margin: 0 auto;
}
.solutions-grid-layout {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 32px;
}
.solutions-card {
background: white;
border: 2px solid var(--solutions-border-gray);
border-radius: 16px;
padding: 32px;
transition: var(--solutions-transition);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(30px);
}
.solutions-card.solutions-animate-in {
opacity: 1;
transform: translateY(0);
}
.solutions-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: var(--solutions-gradient-secondary);
}
.solutions-card:hover {
transform: translateY(-8px);
box-shadow: var(--solutions-shadow-heavy);
border-color: var(--solutions-primary-purple);
}
.solutions-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.solutions-card-icon {
width: 60px;
height: 60px;
background: var(--solutions-gradient-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.solutions-card-badge {
background: var(--solutions-bg-gray);
color: var(--solutions-medium-gray);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.solutions-card-title {
font-size: 22px;
font-weight: 600;
margin-bottom: 16px;
color: var(--solutions-dark-gray);
}
.solutions-card-description {
color: var(--solutions-medium-gray);
line-height: 1.6;
margin-bottom: 24px;
}
.solutions-card-benefits {
margin-bottom: 24px;
}
.solutions-benefit-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
padding: 8px 0;
}
.solutions-benefit-icon {
font-size: 16px;
}
.solutions-card-link {
color: var(--solutions-primary-purple);
text-decoration: none;
font-weight: 600;
transition: var(--solutions-transition);
}
.solutions-card-link:hover {
color: var(--solutions-purple-dark);
}
/* Detail Sections */
.solutions-detail-section {
padding: 100px 0;
background: var(--solutions-bg-gray);
}
.solutions-detail-section:nth-child(even) {
background: white;
}
.solutions-detail-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 48px;
}
.solutions-detail-header {
text-align: center;
margin-bottom: 48px;
}
.solutions-detail-icon {
width: 80px;
height: 80px;
background: var(--solutions-gradient-primary);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
margin: 0 auto 24px;
}
.solutions-detail-header h2 {
font-size: 36px;
font-weight: 700;
margin-bottom: 16px;
color: var(--solutions-dark-gray);
}
.solutions-detail-header p {
font-size: 18px;
color: var(--solutions-medium-gray);
max-width: 600px;
margin: 0 auto;
}
.solutions-process-flow {
margin-bottom: 48px;
}
.solutions-process-flow h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 32px;
color: var(--solutions-dark-gray);
}
.solutions-process-steps {
display: flex;
flex-direction: column;
gap: 24px;
}
.solutions-step {
display: flex;
gap: 20px;
align-items: flex-start;
opacity: 0;
transform: translateX(-30px);
transition: var(--solutions-transition);
}
.solutions-step.solutions-animate-in {
opacity: 1;
transform: translateX(0);
}
.solutions-step-number {
width: 50px;
height: 50px;
background: var(--solutions-gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: 700;
flex-shrink: 0;
}
.solutions-step-content h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
color: var(--solutions-dark-gray);
}
.solutions-step-content p {
color: var(--solutions-medium-gray);
line-height: 1.6;
}
.solutions-use-cases h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 32px;
color: var(--solutions-dark-gray);
}
.solutions-use-case-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 24px;
}
.solutions-use-case-item {
background: white;
padding: 24px;
border-radius: 12px;
border: 1px solid var(--solutions-border-gray);
transition: var(--solutions-transition);
opacity: 0;
transform: translateY(20px);
}
.solutions-use-case-item.solutions-animate-in {
opacity: 1;
transform: translateY(0);
}
.solutions-use-case-item:hover {
transform: translateY(-4px);
box-shadow: var(--solutions-shadow-medium);
}
.solutions-use-case-icon {
font-size: 24px;
margin-bottom: 16px;
display: block;
}
.solutions-use-case-item h4 {
font-size: 16px;
font-weight: 600;
margin-bottom: 8px;
color: var(--solutions-dark-gray);
}
.solutions-use-case-item p {
color: var(--solutions-medium-gray);
font-size: 14px;
line-height: 1.5;
}
/* Sidebar */
.solutions-detail-sidebar {
display: flex;
flex-direction: column;
gap: 32px;
}
.solutions-roi-box,
.solutions-implementation-box {
background: white;
border-radius: 16px;
padding: 32px;
border: 1px solid var(--solutions-border-gray);
box-shadow: var(--solutions-shadow-light);
}
.solutions-roi-box h3,
.solutions-implementation-box h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 24px;
color: var(--solutions-dark-gray);
}
.solutions-roi-metrics {
display: flex;
flex-direction: column;
gap: 20px;
}
.solutions-roi-item {
text-align: center;
padding: 20px;
background: var(--solutions-bg-gray);
border-radius: 12px;
}
.solutions-roi-value {
display: block;
font-size: 28px;
font-weight: 700;
color: var(--solutions-primary-purple);
margin-bottom: 8px;
}
.solutions-roi-label {
font-size: 12px;
color: var(--solutions-medium-gray);
}
.solutions-timeline-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--solutions-border-gray);
}
.solutions-timeline-item:last-child {
border-bottom: none;
}
.solutions-timeline-duration {
font-weight: 600;
color: var(--solutions-primary-purple);
}
.solutions-timeline-task {
color: var(--solutions-medium-gray);
}
.solutions-feature-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.solutions-feature-item {
font-size: 14px;
color: var(--solutions-medium-gray);
padding: 8px 0;
}
/* Comparison Table */
.solutions-comparison-section {
padding: 100px 0;
background: white;
}
.solutions-comparison-header {
text-align: center;
margin-bottom: 64px;
}
.solutions-comparison-title {
font-size: 42px;
font-weight: 700;
margin-bottom: 16px;
color: var(--solutions-dark-gray);
}
.solutions-comparison-subtitle {
font-size: 18px;
color: var(--solutions-medium-gray);
max-width: 600px;
margin: 0 auto;
}
.solutions-comparison-table {
background: white;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--solutions-border-gray);
box-shadow: var(--solutions-shadow-light);
}
.solutions-table-header,
.solutions-table-row {
display: grid;
grid-template-columns: 2fr 1.5fr 1fr 1fr 1fr;
gap: 16px;
padding: 20px 24px;
}
.solutions-table-header {
background: var(--solutions-bg-gray);
font-weight: 600;
color: var(--solutions-dark-gray);
}
.solutions-table-row {
border-bottom: 1px solid var(--solutions-border-gray);
transition: var(--solutions-transition);
}
.solutions-table-row:last-child {
border-bottom: none;
}
.solutions-table-row:hover {
background: var(--solutions-bg-gray);
}
.solutions-table-cell {
display: flex;
align-items: center;
font-size: 14px;
color: var(--solutions-medium-gray);
}
.solutions-table-feature {
display: flex;
align-items: center;
gap: 12px;
font-weight: 600;
color: var(--solutions-dark-gray);
}
.solutions-table-icon {
font-size: 20px;
}
.solutions-complexity-bar {
width: 60px;
height: 8px;
background: var(--solutions-border-gray);
border-radius: 4px;
overflow: hidden;
margin-right: 8px;
}
.solutions-complexity-fill {
height: 100%;
background: var(--solutions-gradient-primary);
transition: width 0.3s ease;
}
/* Roadmap Section */
.solutions-roadmap-section {
padding: 100px 0;
background: var(--solutions-bg-gray);
}
.solutions-roadmap-header {
text-align: center;
margin-bottom: 64px;
}
.solutions-roadmap-title {
font-size: 42px;
font-weight: 700;
margin-bottom: 16px;
color: var(--solutions-dark-gray);
}
.solutions-roadmap-subtitle {
font-size: 18px;
color: var(--solutions-medium-gray);
max-width: 600px;
margin: 0 auto;
}
.solutions-roadmap-timeline {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.solutions-roadmap-timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: var(--solutions-border-gray);
transform: translateX(-50%);
}
.solutions-roadmap-phase {
position: relative;
margin-bottom: 64px;
}
.solutions-roadmap-phase:nth-child(odd) .solutions-phase-content {
margin-right: 55%;
text-align: right;
}
.solutions-roadmap-phase:nth-child(even) .solutions-phase-content {
margin-left: 55%;
text-align: left;
}
.solutions-phase-marker {
position: absolute;
left: 50%;
top: 20px;
transform: translateX(-50%);
background: var(--solutions-gradient-primary);
color: white;
padding: 16px 24px;
border-radius: 30px;
font-weight: 600;
text-align: center;
z-index: 2;
min-width: 120px;
}
.solutions-phase-number {
display: block;
font-size: 14px;
margin-bottom: 4px;
}
.solutions-phase-duration {
display: block;
font-size: 12px;
opacity: 0.9;
}
.solutions-phase-content {
background: white;
padding: 32px;
border-radius: 16px;
border: 1px solid var(--solutions-border-gray);
box-shadow: var(--solutions-shadow-light);
opacity: 0;
transform: translateY(30px);
transition: var(--solutions-transition);
}
.solutions-phase-content.solutions-animate-in {
opacity: 1;
transform: translateY(0);
}
.solutions-phase-content h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
color: var(--solutions-dark-gray);
}
.solutions-phase-content p {
color: var(--solutions-medium-gray);
margin-bottom: 20px;
line-height: 1.6;
}
.solutions-phase-items {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 20px;
}
.solutions-phase-item {
background: var(--solutions-bg-gray);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
color: var(--solutions-dark-gray);
font-weight: 500;
}
.solutions-phase-outcome {
background: var(--solutions-bg-gray);
padding: 16px;
border-radius: 8px;
border-left: 4px solid var(--solutions-primary-purple);
font-size: 14px;
color: var(--solutions-medium-gray);
}
/* CTA Section */
.solutions-cta-section {
padding: 100px 0;
background: var(--solutions-gradient-primary);
color: white;
text-align: center;
}
.solutions-cta-content h2 {
font-size: 40px;
font-weight: 700;
margin-bottom: 16px;
}
.solutions-cta-content p {
font-size: 18px;
margin-bottom: 32px;
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.solutions-cta-buttons {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.solutions-cta-primary {
background: white;
color: var(--solutions-primary-purple);
padding: 16px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: var(--solutions-transition);
}
.solutions-cta-primary:hover {
background: var(--solutions-bg-gray);
transform: translateY(-2px);
box-shadow: var(--solutions-shadow-medium);
}
.solutions-cta-secondary {
background: transparent;
color: white;
border: 2px solid white;
padding: 14px 32px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: var(--solutions-transition);
}
.solutions-cta-secondary:hover {
background: white;
color: var(--solutions-primary-purple);
}
.solutions-cta-guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
background: rgba(255, 255, 255, 0.1);
padding: 20px;
border-radius: 12px;
max-width: 400px;
margin: 0 auto;
}
.solutions-guarantee-icon {
font-size: 24px;
}
.solutions-guarantee-text {
text-align: left;
}
.solutions-guarantee-text strong {
display: block;
font-size: 16px;
margin-bottom: 4px;
}
.solutions-guarantee-text span {
font-size: 14px;
opacity: 0.9;
}
/* Smooth scroll */
html {
scroll-behavior: smooth;
}
/* Accessibility */
.solutions-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus styles */
a:focus,
button:focus {
outline: 2px solid var(--solutions-primary-purple);
outline-offset: 2px;
}
/* Animation classes */
@keyframes solutionsFadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.solutions-animate-in {
animation: solutionsFadeInUp 0.6s ease forwards;
}
/* ===== RESPONSIVE STYLES ===== */
/* Large tablets and small desktops */
@media (max-width: 1024px) {
.solutions-container {
padding: 0 32px;
}
.solutions-hero-content h1 {
font-size: 46px;
}
.solutions-overview-title,
.solutions-comparison-title,
.solutions-roadmap-title {
font-size: 38px;
}
.solutions-detail-header h2 {
font-size: 32px;
}
.solutions-grid-layout {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.solutions-detail-layout {
gap: 32px;
}
.solutions-floating-icons {
gap: 15px;
padding: 30px;
}
.solutions-icon-card {
min-width: 100px;
padding: 16px;
}
}
/* Tablets */
@media (max-width: 768px) {
.solutions-container {
padding: 0 20px;
}
/* Mobile menu */
.solutions-mobile-toggle {
display: flex;
}
/* Hero adjustments */
.solutions-hero-banner {
padding: 100px 0 60px;
min-height: auto;
}
.solutions-hero-wrapper {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.solutions-hero-content h1 {
font-size: 40px;
}
.solutions-hero-content p {
font-size: 18px;
}
.solutions-hero-visual {
height: 400px;
}
.solutions-floating-icons {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 20px;
}
.solutions-icon-card {
min-width: 90px;
padding: 12px;
}
.solutions-icon {
font-size: 20px;
}
.solutions-icon-card span {
font-size: 11px;
}
.solutions-hero-metrics {
grid-template-columns: 1fr;
gap: 16px;
}
/* Section titles */
.solutions-overview-title,
.solutions-comparison-title,
.solutions-roadmap-title {
font-size: 34px;
}
.solutions-detail-header h2 {
font-size: 28px;
}
/* Grid layouts */
.solutions-grid-layout {
grid-template-columns: 1fr;
gap: 24px;
}
.solutions-detail-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.solutions-use-case-grid {
grid-template-columns: 1fr;
}
/* Process steps */
.solutions-process-steps {
gap: 20px;
}
.solutions-step {
flex-direction: column;
text-align: center;
gap: 12px;
}
/* Comparison table */
.solutions-comparison-table {
overflow-x: auto;
}
.solutions-table-header,
.solutions-table-row {
grid-template-columns: 200px 120px 80px 80px 100px;
min-width: 580px;
}
.solutions-table-cell {
font-size: 13px;
}
/* Roadmap timeline */
.solutions-roadmap-timeline::before {
left: 30px;
}
.solutions-roadmap-phase:nth-child(odd) .solutions-phase-content,
.solutions-roadmap-phase:nth-child(even) .solutions-phase-content {
margin-left: 70px;
margin-right: 0;
text-align: left;
}
.solutions-phase-marker {
left: 30px;
transform: translateX(-50%);
min-width: 100px;
padding: 12px 16px;
}
.solutions-phase-items {
flex-direction: column;
gap: 8px;
}
/* CTA section */
.solutions-cta-content h2 {
font-size: 32px;
}
.solutions-cta-buttons {
flex-direction: column;
align-items: center;
}
.solutions-cta-guarantee {
flex-direction: column;
text-align: center;
gap: 12px;
}
.solutions-guarantee-text {
text-align: center;
}
}
/* Mobile phones */
@media (max-width: 480px) {
.solutions-container {
padding: 0 16px;
}
/* Hero section */
.solutions-hero-banner {
padding: 80px 0 40px;
}
.solutions-hero-content h1 {
font-size: 32px;
}
.solutions-hero-content p {
font-size: 16px;
margin-bottom: 24px;
}
.solutions-hero-visual {
height: 300px;
}
.solutions-floating-icons {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 15px;
}
.solutions-icon-card {
min-width: 70px;
padding: 8px;
}
.solutions-icon {
font-size: 16px;
margin-bottom: 4px;
}
.solutions-icon-card span {
font-size: 9px;
}
/* Section titles */
.solutions-overview-title,
.solutions-comparison-title,
.solutions-roadmap-title {
font-size: 28px;
}
.solutions-detail-header h2 {
font-size: 24px;
}
.solutions-detail-header p {
font-size: 16px;
}
/* Cards */
.solutions-card {
padding: 24px;
}
.solutions-card-title {
font-size: 20px;
}
.solutions-benefit-item {
gap: 8px;
font-size: 14px;
}
/* Detail sections */
.solutions-detail-icon {
width: 60px;
height: 60px;
font-size: 24px;
}
.solutions-process-flow h3,
.solutions-use-cases h3 {
font-size: 20px;
}
.solutions-step-number {
width: 40px;
height: 40px;
font-size: 16px;
}
.solutions-step-content h4 {
font-size: 16px;
}
/* Sidebar */
.solutions-roi-box,
.solutions-implementation-box {
padding: 24px;
}
.solutions-roi-value {
font-size: 24px;
}
/* Comparison table */
.solutions-table-header,
.solutions-table-row {
grid-template-columns: 150px 100px 70px 70px 80px;
min-width: 470px;
padding: 16px 20px;
}
.solutions-table-cell {
font-size: 12px;
}
.solutions-table-feature {
gap: 8px;
}
.solutions-table-icon {
font-size: 16px;
}
.solutions-complexity-bar {
width: 40px;
height: 6px;
}
/* Roadmap */
.solutions-phase-marker {
min-width: 80px;
padding: 10px 12px;
font-size: 12px;
}
.solutions-phase-content {
padding: 24px;
}
.solutions-phase-content h3 {
font-size: 20px;
}
/* CTA section */
.solutions-cta-section {
padding: 80px 0;
}
.solutions-cta-content h2 {
font-size: 28px;
}
.solutions-cta-content p {
font-size: 16px;
}
.solutions-cta-primary,
.solutions-cta-secondary {
padding: 12px 24px;
font-size: 14px;
width: 100%;
max-width: 280px;
}
}
/* Very small screens */
@media (max-width: 360px) {
.solutions-hero-content h1 {
font-size: 26px;
}
.solutions-overview-title,
.solutions-comparison-title,
.solutions-roadmap-title {
font-size: 24px;
}
.solutions-detail-header h2 {
font-size: 22px;
}
.solutions-floating-icons {
grid-template-columns: repeat(2, 1fr);
}
.solutions-icon-card {
min-width: 60px;
padding: 6px;
}
.solutions-card,
.solutions-roi-box,
.solutions-implementation-box,
.solutions-phase-content {
padding: 16px;
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.solutions-hero-banner::before {
background-size: 50px 50px;
}
}
/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
.solutions-hero-banner {
padding: 60px 0 40px;
}
.solutions-hero-visual {
height: 250px;
}
.solutions-floating-icons {
grid-template-columns: repeat(3, 1fr);
gap: 8px;
padding: 15px;
}
.solutions-icon-card {
min-width: 60px;
padding: 6px;
}
.solutions-icon {
font-size: 14px;
}
.solutions-icon-card span {
font-size: 8px;
}
}
/* Print styles */
@media print {
.solutions-mobile-toggle,
.solutions-floating-icons,
.solutions-cta-section {
display: none;
}
.solutions-hero-banner {
background: white;
color: black;
}
.solutions-card,
.solutions-detail-section {
break-inside: avoid;
}
}
/* aboutus */
/* About Us Page - Custom Styles */
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--brand-purple: #714b67;
--purple-darker: #5d3e54;
--purple-lighter: #8b6b81;
--accent-teal: #00a09d;
--tech-blue: #2c5aa0;
--success-green: #28a745;
--warning-amber: #ffc107;
--danger-red: #dc3545;
--text-dark: #343a40;
--text-medium: #6c757d;
--text-light: #adb5bd;
--border-light: #dee2e6;
--background-light: #f8f9fa;
--pure-white: #ffffff;
--shadow-subtle: 0 2px 10px rgba(0,0,0,0.05);
--shadow-medium: 0 4px 20px rgba(0,0,0,0.1);
--shadow-strong: 0 8px 30px rgba(0,0,0,0.15);
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: var(--text-dark);
overflow-x: hidden;
}
.content-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
/* Navigation */
.primary-navigation {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
z-index: 999;
padding: 16px 0;
border-bottom: 1px solid var(--border-light);
}
.navigation-content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.brand-text {
font-size: 24px;
font-weight: 800;
background: linear-gradient(135deg, var(--brand-purple), var(--tech-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.navigation-menu {
display: flex;
list-style: none;
gap: 32px;
align-items: center;
}
.navigation-menu a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
transition: color 0.3s ease;
}
.navigation-menu a:hover {
color: var(--brand-purple);
}
/* About Hero Banner */
.about-hero-banner {
background: linear-gradient(135deg, var(--background-light) 0%, #e9ecef 100%);
padding: 140px 0 80px;
position: relative;
overflow: hidden;
}
.about-hero-banner::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.4;
}
.hero-banner-content {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 64px;
align-items: center;
margin-bottom: 48px;
}
.hero-text-content h1 {
font-size: 48px;
font-weight: 800;
line-height: 1.1;
margin-bottom: 24px;
background: linear-gradient(135deg, var(--brand-purple), var(--tech-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-tagline {
font-size: 20px;
color: var(--text-medium);
margin-bottom: 40px;
line-height: 1.6;
}
.company-metrics {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.metric-item {
text-align: center;
padding: 20px;
background: var(--pure-white);
border-radius: 12px;
box-shadow: var(--shadow-subtle);
transition: transform 0.3s ease;
}
.metric-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
}
.metric-figure {
font-size: 28px;
font-weight: 700;
color: var(--brand-purple);
display: block;
}
.metric-description {
font-size: 13px;
color: var(--text-medium);
margin-top: 8px;
}
.visual-representation {
position: relative;
height: 380px;
background: linear-gradient(135deg, var(--brand-purple), var(--tech-blue));
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.animated-elements {
position: absolute;
width: 100%;
height: 100%;
}
.element-card {
position: absolute;
background: var(--pure-white);
border-radius: 12px;
padding: 16px;
box-shadow: var(--shadow-strong);
animation: gentleFloat 6s ease-in-out infinite;
min-width: 120px;
text-align: center;
}
.element-one {
top: 15%;
left: 10%;
animation-delay: 0s;
}
.element-two {
top: 55%;
right: 15%;
animation-delay: 2s;
}
.element-three {
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
@keyframes gentleFloat {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(1deg); }
}
/* Section Headers */
.area-header {
text-align: center;
margin-bottom: 64px;
}
.area-heading {
font-size: 40px;
font-weight: 700;
margin-bottom: 16px;
color: var(--text-dark);
}
.area-description {
font-size: 18px;
color: var(--text-medium);
max-width: 650px;
margin: 0 auto;
line-height: 1.6;
}
/* Mission & Vision */
.mission-vision-area {
padding: 80px 0;
background: var(--pure-white);
}
.purpose-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
}
.purpose-block {
background: var(--background-light);
border-radius: 20px;
padding: 40px;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.purpose-block::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--brand-purple), var(--tech-blue));
}
.purpose-block:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-strong);
}
.purpose-icon {
font-size: 48px;
margin-bottom: 24px;
display: block;
}
.purpose-title {
font-size: 28px;
font-weight: 600;
margin-bottom: 20px;
color: var(--text-dark);
}
.purpose-text {
color: var(--text-medium);
margin-bottom: 24px;
line-height: 1.7;
font-size: 16px;
}
.purpose-highlights {
list-style: none;
padding: 0;
}
.purpose-highlights li {
position: relative;
padding-left: 24px;
margin-bottom: 12px;
color: var(--text-medium);
font-size: 15px;
}
.purpose-highlights li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--success-green);
font-weight: 600;
}
/* Company Journey */
.company-journey {
padding: 80px 0;
background: var(--background-light);
}
.journey-timeline {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.timeline-track {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, var(--brand-purple), var(--tech-blue));
transform: translateX(-50%);
}
.timeline-milestone {
position: relative;
margin-bottom: 80px;
display: flex;
align-items: flex-start;
}
.timeline-milestone:nth-child(even) {
flex-direction: row-reverse;
}
.milestone-marker {
position: absolute;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--brand-purple), var(--tech-blue));
color: var(--pure-white);
padding: 12px 20px;
border-radius: 25px;
font-weight: 600;
font-size: 14px;
white-space: nowrap;
z-index: 2;
box-shadow: var(--shadow-medium);
}
.milestone-details {
background: var(--pure-white);
padding: 32px;
border-radius: 16px;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-subtle);
width: 45%;
margin-top: 20px;
}
.milestone-reverse .milestone-details {
margin-left: auto;
text-align: right;
}
.milestone-details h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
color: var(--text-dark);
}
.milestone-details p {
color: var(--text-medium);
margin-bottom: 20px;
line-height: 1.6;
}
.milestone-achievement {
background: var(--background-light);
padding: 16px;
border-radius: 8px;
border-left: 4px solid var(--brand-purple);
}
.achievement-label {
font-size: 14px;
color: var(--text-medium);
display: block;
}
.achievement-value {
font-size: 16px;
font-weight: 600;
color: var(--brand-purple);
}
/* Company Principles */
.company-principles {
padding: 80px 0;
background: var(--pure-white);
}
.principles-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 32px;
}
.principle-card {
background: var(--background-light);
border-radius: 20px;
padding: 32px;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
text-align: center;
position: relative;
overflow: hidden;
}
.principle-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--accent-teal), var(--tech-blue));
}
.principle-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-strong);
}
.principle-visual {
margin-bottom: 24px;
}
.principle-symbol {
font-size: 48px;
display: block;
margin-bottom: 16px;
}
.principle-name {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
color: var(--text-dark);
}
.principle-definition {
color: var(--text-medium);
margin-bottom: 24px;
line-height: 1.6;
}
.principle-examples {
display: flex;
flex-direction: column;
gap: 12px;
}
.example-item {
display: flex;
align-items: center;
gap: 12px;
padding: 8px 0;
font-size: 14px;
color: var(--text-medium);
}
.example-icon {
font-size: 16px;
}
/* Leadership Showcase */
.leadership-showcase {
padding: 80px 0;
background: var(--background-light);
}
.leadership-profiles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 32px;
}
.leader-profile {
background: var(--pure-white);
border-radius: 20px;
padding: 32px;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
box-shadow: var(--shadow-subtle);
}
.leader-profile:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
}
.profile-image {
text-align: center;
margin-bottom: 24px;
}
.profile-avatar {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--brand-purple), var(--tech-blue));
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--pure-white);
font-weight: 700;
font-size: 24px;
}
.leader-name {
font-size: 24px;
font-weight: 600;
margin-bottom: 8px;
color: var(--text-dark);
}
.leader-position {
color: var(--brand-purple);
font-weight: 500;
margin-bottom: 16px;
font-size: 16px;
}
.leader-bio {
color: var(--text-medium);
margin-bottom: 20px;
line-height: 1.6;
font-size: 15px;
}
.leader-expertise {
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.expertise-tag {
background: var(--background-light);
color: var(--text-medium);
padding: 4px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
border: 1px solid var(--border-light);
}
.leader-achievements {
display: flex;
flex-direction: column;
gap: 8px;
}
.achievement-highlight {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-medium);
}
.highlight-icon {
font-size: 16px;
}
/* Global Presence */
.global-presence {
padding: 80px 0;
background: var(--pure-white);
}
.offices-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 32px;
}
.office-location {
background: var(--background-light);
border-radius: 20px;
padding: 32px;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.primary-office {
border: 2px solid var(--brand-purple);
}
.primary-office::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--brand-purple), var(--tech-blue));
}
.office-location:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
}
.location-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.location-flag {
font-size: 32px;
}
.location-name {
font-size: 24px;
font-weight: 600;
color: var(--text-dark);
flex: 1;
}
.office-type {
background: var(--brand-purple);
color: var(--pure-white);
padding: 4px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
}
.location-details {
display: grid;
gap: 24px;
}
.office-address {
color: var(--text-medium);
margin-bottom: 12px;
line-height: 1.5;
}
.office-contact {
font-size: 14px;
line-height: 1.6;
}
.contact-type {
font-weight: 500;
color: var(--text-dark);
}
.office-highlights {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.highlight-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-medium);
}
.highlight-icon {
font-size: 16px;
}
.office-specialties {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.specialty-tag {
background: var(--pure-white);
color: var(--text-medium);
padding: 6px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
border: 1px solid var(--border-light);
}
/* Contact Engagement */
.contact-engagement {
padding: 80px 0;
background: var(--background-light);
}
.contact-options {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 64px;
margin-top: 48px;
}
.contact-methods {
display: flex;
flex-direction: column;
gap: 24px;
}
.contact-method-card {
background: var(--pure-white);
border-radius: 16px;
padding: 24px;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
}
.contact-method-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
}
.method-icon {
font-size: 32px;
margin-bottom: 16px;
display: block;
}
.method-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 12px;
color: var(--text-dark);
}
.method-description {
color: var(--text-medium);
margin-bottom: 16px;
line-height: 1.5;
}
.method-details {
display: flex;
flex-direction: column;
gap: 8px;
}
.detail-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-medium);
}
.detail-icon {
font-size: 16px;
}
/* Contact Form */
.inquiry-form-container {
background: var(--pure-white);
border-radius: 20px;
padding: 40px;
border: 1px solid var(--border-light);
box-shadow: var(--shadow-subtle);
}
.form-heading {
font-size: 28px;
font-weight: 600;
margin-bottom: 32px;
color: var(--text-dark);
text-align: center;
}
.form-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 32px;
}
.form-field-group {
display: flex;
flex-direction: column;
}
.form-field-wide {
grid-column: span 2;
}
.field-label {
font-weight: 500;
margin-bottom: 8px;
color: var(--text-dark);
font-size: 14px;
}
.form-input,
.form-select,
.form-textarea {
padding: 12px 16px;
border: 1px solid var(--border-light);
border-radius: 8px;
background: var(--pure-white);
font-size: 14px;
color: var(--text-dark);
font-family: inherit;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
outline: none;
border-color: var(--brand-purple);
box-shadow: 0 0 0 3px rgba(113, 75, 103, 0.1);
}
.form-textarea {
resize: vertical;
min-height: 120px;
}
.checkbox-group {
display: flex;
align-items: flex-start;
gap: 12px;
}
.checkbox-group input[type="checkbox"] {
margin-top: 4px;
flex-shrink: 0;
}
.checkbox-label {
font-size: 14px;
color: var(--text-medium);
line-height: 1.5;
cursor: pointer;
}
.checkbox-label a {
color: var(--brand-purple);
text-decoration: none;
}
.checkbox-label a:hover {
text-decoration: underline;
}
.form-actions {
text-align: center;
}
.submit-inquiry-btn {
background: var(--brand-purple);
color: var(--pure-white);
padding: 16px 48px;
border-radius: 8px;
border: none;
font-weight: 600;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
margin-bottom: 16px;
min-width: 200px;
}
.submit-inquiry-btn:hover:not(:disabled) {
background: var(--purple-darker);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(113, 75, 103, 0.3);
}
.submit-inquiry-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.form-note {
font-size: 13px;
color: var(--text-light);
margin: 0;
}
/* Animations */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.principle-card,
.leader-profile,
.office-location,
.contact-method-card {
animation: slideInUp 0.6s ease forwards;
}
/* ===== RESPONSIVE STYLES ===== */
/* Large tablets and small desktops */
@media (max-width: 1024px) {
.content-wrapper {
padding: 0 32px;
}
.hero-text-content h1 {
font-size: 42px;
}
.area-heading {
font-size: 36px;
}
.company-metrics {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.purpose-grid {
gap: 32px;
}
.leadership-profiles {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.offices-showcase {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
}
/* Tablets */
@media (max-width: 768px) {
.content-wrapper {
padding: 0 20px;
}
.navigation-content {
padding: 0 20px;
}
.navigation-menu {
gap: 20px;
}
/* Hero Section */
.about-hero-banner {
padding: 120px 0 60px;
}
.hero-banner-content {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.hero-text-content h1 {
font-size: 36px;
}
.hero-tagline {
font-size: 18px;
}
.company-metrics {
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.visual-representation {
height: 300px;
}
.element-card {
min-width: 100px;
padding: 12px;
font-size: 14px;
}
/* Sections */
.area-heading {
font-size: 32px;
}
.area-description {
font-size: 16px;
}
/* Purpose Grid */
.purpose-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.purpose-block {
padding: 32px;
}
.purpose-title {
font-size: 24px;
}
/* Timeline */
.timeline-track {
left: 30px;
}
.timeline-milestone,
.timeline-milestone:nth-child(even) {
flex-direction: row;
}
.milestone-details,
.milestone-reverse .milestone-details {
margin-left: 60px;
margin-right: 0;
text-align: left;
width: auto;
}
.milestone-marker {
left: 30px;
transform: translateX(-50%);
font-size: 12px;
padding: 8px 16px;
}
/* Principles */
.principles-showcase {
grid-template-columns: 1fr;
gap: 24px;
}
.principle-card {
padding: 24px;
}
.principle-name {
font-size: 20px;
}
/* Leadership */
.leadership-profiles {
grid-template-columns: 1fr;
}
.leader-profile {
padding: 24px;
}
.leader-name {
font-size: 20px;
}
/* Offices */
.offices-showcase {
grid-template-columns: 1fr;
}
.office-location {
padding: 24px;
}
.location-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.office-highlights {
flex-direction: column;
gap: 12px;
}
/* Contact */
.contact-options {
grid-template-columns: 1fr;
gap: 40px;
}
.inquiry-form-container {
padding: 32px;
}
.form-layout {
grid-template-columns: 1fr;
gap: 20px;
}
.form-field-wide {
grid-column: span 1;
}
.form-heading {
font-size: 24px;
}
}
/* Mobile phones */
@media (max-width: 480px) {
.content-wrapper {
padding: 0 16px;
}
.navigation-content {
padding: 0 16px;
}
.brand-text {
font-size: 20px;
}
.navigation-menu {
gap: 16px;
}
.navigation-menu a {
font-size: 14px;
}
/* Hero */
.about-hero-banner {
padding: 100px 0 40px;
}
.hero-text-content h1 {
font-size: 28px;
}
.hero-tagline {
font-size: 16px;
margin-bottom: 32px;
}
.company-metrics {
grid-template-columns: 1fr;
gap: 16px;
}
.metric-item {
padding: 16px;
}
.metric-figure {
font-size: 24px;
}
.visual-representation {
height: 250px;
}
.element-card {
min-width: 80px;
padding: 8px;
font-size: 12px;
}
.element-card strong {
font-size: 12px;
}
.element-card p {
font-size: 10px;
margin: 4px 0 0 0;
}
/* Sections */
.area-heading {
font-size: 28px;
}
.area-description {
font-size: 15px;
}
/* Purpose */
.purpose-block {
padding: 24px;
}
.purpose-title {
font-size: 20px;
}
.purpose-text {
font-size: 15px;
}
/* Timeline */
.milestone-marker {
position: static;
transform: none;
margin-bottom: 16px;
display: inline-block;
}
.milestone-details {
padding: 24px;
margin-left: 0;
width: 100%;
}
.milestone-details h3 {
font-size: 20px;
}
/* Principles */
.principle-card {
padding: 20px;
}
.principle-symbol {
font-size: 40px;
}
.principle-name {
font-size: 18px;
}
.example-item {
flex-direction: column;
text-align: center;
gap: 4px;
}
/* Leadership */
.leader-profile {
padding: 20px;
}
.profile-avatar {
width: 60px;
height: 60px;
font-size: 20px;
}
.leader-name {
font-size: 18px;
}
.leader-position {
font-size: 14px;
}
.leader-bio {
font-size: 14px;
}
.leader-expertise {
justify-content: center;
}
.achievement-highlight {
flex-direction: column;
text-align: center;
gap: 4px;
}
/* Offices */
.office-location {
padding: 20px;
}
.location-flag {
font-size: 24px;
}
.location-name {
font-size: 20px;
}
.office-highlights {
gap: 8px;
}
.highlight-item {
flex-direction: column;
text-align: center;
gap: 4px;
}
/* Contact */
.contact-method-card {
padding: 20px;
}
.method-title {
font-size: 18px;
}
.inquiry-form-container {
padding: 24px;
}
.form-heading {
font-size: 20px;
margin-bottom: 24px;
}
.submit-inquiry-btn {
padding: 14px 32px;
font-size: 14px;
width: 100%;
}
.detail-item {
flex-direction: column;
text-align: center;
gap: 4px;
}
}
/* Very small screens */
@media (max-width: 360px) {
.hero-text-content h1 {
font-size: 24px;
}
.area-heading {
font-size: 24px;
}
.purpose-icon,
.principle-symbol {
font-size: 36px;
}
.profile-avatar {
width: 50px;
height: 50px;
font-size: 18px;
}
.milestone-details,
.principle-card,
.leader-profile,
.office-location,
.contact-method-card {
padding: 16px;
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.about-hero-banner::before {
background-size: 50px 50px;
}
}
/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
.about-hero-banner {
padding: 80px 0 40px;
}
.visual-representation {
height: 200px;
}
.element-card {
min-width: 60px;
padding: 6px;
font-size: 10px;
}
}
/* Print styles */
@media print {
.primary-navigation,
.contact-engagement {
display: none;
}
.about-hero-banner {
background: none;
padding: 40px 0;
}
.visual-representation {
display: none;
}
.area-heading {
color: #000;
page-break-after: avoid;
}
.purpose-block,
.principle-card,
.leader-profile,
.office-location {
page-break-inside: avoid;
box-shadow: none;
border: 1px solid #ccc;
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.element-card,
.principle-card,
.leader-profile,
.office-location,
.contact-method-card {
animation: none;
}
.gentleFloat {
animation: none;
}
* {
transition-duration: 0.01ms !important;
}
}
/* Focus styles for better accessibility */
a:focus,
button:focus,
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
input[type="checkbox"]:focus {
outline: 2px solid var(--brand-purple);
outline-offset: 2px;
}
/* Screen reader only content */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}