:root {
--primary: #104cba;
--primary-light: #3a6fd8;
--primary-dark: #0a3a9c;
--secondary: #6b7280;
--accent: #10b981;
--highlight: #f59e0b;
--light: #ffffff;
--dark: #1f2937;
--gray-light: #f9fafb;
--gray-medium: #e5e7eb;
--border: #e5e7eb;
--shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-3d: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
--radius: 8px;
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
--glass: rgba(255, 255, 255, 0.1);
--glass-border: rgba(255, 255, 255, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, sans-serif;
}
html {
scroll-behavior: smooth;
}
body {
color: var(--dark);
line-height: 1.6;
background-color: var(--light);
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5 {
font-family: "Playfair Display", serif;
font-weight: 600;
line-height: 1.3;
margin-bottom: 1rem;
color: var(--primary);
}
h1 {
font-size: 3.5rem;
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
font-size: 2.8rem;
}
h3 {
font-size: 1.8rem;
}
p {
margin-bottom: 1rem;
color: var(--secondary);
}
li {
list-style: none !important;
}
a {
text-decoration: none !important;
color: var(--primary);
transition: var(--transition);
}
a:hover {
color: var(--primary-dark);
}
.container {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border: none;
text-align: center;
position: relative;
overflow: hidden;
z-index: 1;
gap: 0.5rem;
font-size: 1rem;
font-family: inherit;
}
.btn::before {
content: "";
color: var(--light);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-light) 100%);
z-index: -1;
transition: var(--transition);
opacity: 0.9;
}
.btn::after {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent);
transition: left 0.7s;
z-index: -1;
}
.btn:not(.nav-actions .btn),
.btn:not(.nav-actions .btn):link,
.btn:not(.nav-actions .btn):visited,
.btn:not(.nav-actions .btn):hover,
.btn:not(.nav-actions .btn):active,
.btn:not(.nav-actions .btn):focus {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
text-decoration: none;
}
/* icons inside non-navbar buttons */
.btn:not(.nav-actions .btn) i,
.btn:not(.nav-actions .btn) svg,
.btn:not(.nav-actions .btn) .icon {
color: #ffffff !important;
fill: #ffffff !important;
}
.btn:hover::after {
left: 100%;
}
.btn-primary {
background: transparent;
color: var(--light);
box-shadow: 0 10px 20px rgba(16, 76, 186, 0.3);
}
.btn-primary:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 30px rgba(16, 76, 186, 0.4);
}
.btn-secondary {
background: white;
color: var(--primary);
border: 1px solid var(--primary);
}
.btn-secondary:hover {
background: var(--primary);
color: white;
}
.btn-outline {
background: transparent;
color: var(--primary);
border: 1px solid var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
.text-primary {
color: var(--primary) !important;
}
.text-dark {
color: var(--dark) !important;
}
.section {
padding: 7rem 0;
position: relative;
z-index: 1;
}
.section-header {
text-align: center;
max-width: 800px;
margin: 0 auto 4rem;
}
.card {
background: var(--light);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 2rem;
transition: var(--transition);
position: relative;
overflow: hidden;
transform-style: preserve-3d;
}
.card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.card:hover {
transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
box-shadow: var(--shadow-3d);
}
.card:hover::before {
transform: scaleX(1);
}
/* Header & Navigation */
header {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
transition: var(--transition);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 0;
}
.logo {
display: flex;
align-items: center;
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
}
.logo i {
margin-right: 0.5rem;
color: var(--primary);
font-size: 2rem;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 2rem;
position: relative;
list-style: none;
}
.nav-links>li>a {
color: var(--primary);
font-weight: 500;
padding: 0.5rem 0;
display: flex;
align-items: center;
}
.nav-links>li>a:hover {
color: var(--primary-light);
}
.nav-links>li>a i {
margin-left: 0.3rem;
font-size: 0.8rem;
transition: transform 0.3s ease;
}
.nav-links>li:hover>a i {
transform: rotate(180deg);
}
.nav-actions {
display: flex;
gap: 1rem;
}
.mobile-dropdown-toggle {
position: relative;
cursor: pointer;
}
.mobile-dropdown-toggle.active::after {
/* Optional: Add indicator for active state
content: "▾"; */
margin-left: 5px;
}
.mobile-dropdown-toggle+.mobile-dropdown {
display: none;
padding-left: 20px;
}
.mobile-dropdown-toggle.active+.mobile-dropdown {
display: block !important;
}
/* Fixed Mega Menu */
.mega-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(15px);
width: 900px;
background: var(--light);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 2rem;
opacity: 0;
visibility: hidden;
transition: var(--transition);
z-index: 100;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.nav-links li:hover .mega-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.mega-menu-column h4 {
font-size: 1.1rem;
margin-bottom: 1rem;
color: var(--primary);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--gray-medium);
}
.mega-menu-links {
list-style: none;
}
.mega-menu-links li {
margin-bottom: 0.7rem;
}
.mega-menu-links a {
padding: 0.5rem 0;
display: flex;
align-items: center;
color: var(--secondary);
transition: var(--transition);
border-left: 3px solid transparent;
}
.mega-menu-links a:hover {
color: var(--primary);
border-left-color: var(--primary);
padding-left: 10px;
}
.mega-menu-links i {
margin-right: 0.7rem;
width: 16px;
text-align: center;
}
/* Dropdown Menus */
.dropdown {
position: absolute;
top: 100%;
left: 0;
width: 240px;
background: var(--light);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
padding: 0.5rem 0;
opacity: 0;
visibility: hidden;
transform: translateY(15px);
transition: var(--transition);
z-index: 100;
}
.nav-links li:hover .dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown li {
margin: 0;
width: 100%;
}
.dropdown a {
display: flex;
align-items: center;
padding: 0.8rem 1.5rem;
color: var(--secondary);
font-weight: 500;
width: 100%;
border-left: 3px solid transparent;
}
.dropdown a:hover {
background-color: var(--gray-light);
color: var(--primary);
border-left-color: var(--primary);
}
.dropdown i {
margin-right: 0.7rem;
width: 16px;
text-align: center;
}
.mobile-menu-btn {
display: none;
font-size: 1.5rem;
cursor: pointer;
color: var(--primary);
z-index: 1001;
transition: var(--transition);
}
.mobile-menu-btn.active {
transform: rotate(90deg);
}
/* Mobile Menu Overlay */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(16, 76, 186, 0.95);
z-index: 999;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
@media (max-width: 414px) {
.mobile-nav {
margin-top: 6rem !important;
}
/* Additional mobile menu styles for 414px screens */
.mobile-menu-overlay {
width: 100%;
max-width: 414px;
}
.mobile-nav {
padding: 0 1.5rem;
}
.mobile-nav-links li {
margin-bottom: 1rem;
}
.mobile-nav-links a {
font-size: 1.1rem;
padding: 0.8rem 0;
display: block;
}
.mobile-dropdown-toggle {
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-dropdown-toggle::after {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.mobile-dropdown-toggle.active::after {
transform: rotate(90deg);
}
.dropdown {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding-left: 1rem;
}
.dropdown.active {
max-height: 500px;
}
.dropdown li {
margin-bottom: 0.5rem;
}
.dropdown a {
font-size: 1rem;
padding: 0.6rem 0;
opacity: 0.8;
}
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.mobile-nav {
text-align: center;
width: 90%;
max-width: 500px;
}
.mobile-nav-links {
list-style: none;
margin-bottom: 2rem;
}
.mobile-nav-links li {
margin-bottom: 1.5rem;
}
.mobile-nav-links a {
color: var(--light);
font-size: 1.5rem;
font-weight: 500;
display: block;
padding: 0.5rem 0;
transition: var(--transition);
}
.mobile-nav-links a:hover {
color: var(--accent);
transform: translateX(10px);
}
.mobile-dropdown {
list-style: none;
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
margin-top: 0.5rem;
}
.mobile-dropdown.active {
max-height: 300px;
}
.mobile-dropdown li {
margin-bottom: 0.8rem;
}
.mobile-dropdown a {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
}
.mobile-dropdown-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.mobile-dropdown-toggle i {
transition: transform 0.3s ease;
}
.mobile-dropdown-toggle.active i {
transform: rotate(180deg);
}
.mobile-nav-actions {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.close-menu {
position: absolute;
top: 2rem;
right: 2rem;
font-size: 2rem;
color: var(--light);
cursor: pointer;
transition: var(--transition);
}
.close-menu:hover {
color: var(--accent);
transform: rotate(90deg);
}
/* Hero Section */
.hero {
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-dark) 100%);
color: var(--light);
padding: 8rem 0 6rem;
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
}
.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.hero-content {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
}
.hero-text {
flex: 1;
padding-right: 3rem;
}
.hero h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
line-height: 1.2;
color: var(--light);
background: linear-gradient(135deg,
var(--light) 0%,
rgba(255, 255, 255, 0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hero p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.3rem;
margin-bottom: 2.5rem;
max-width: 600px;
}
.hero-actions {
display: flex;
gap: 1.5rem;
justify-content: center;
}
.justify-left {
justify-content: left !important;
}
.hero-image {
flex: 1;
text-align: center;
position: relative;
}
/* Enhanced Dashboard Preview */
.dashboard-container {
perspective: 1500px;
transform-style: preserve-3d;
}
.dashboard-preview {
background: linear-gradient(145deg, #ffffff, #f0f0f0);
border-radius: 20px;
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
padding: 2rem;
max-width: 600px;
margin: 0 auto;
transform: rotateX(12deg) rotateY(-8deg);
transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
.dashboard-preview::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg,
rgba(16, 76, 186, 0.05) 0%,
rgba(245, 158, 11, 0.05) 100%);
z-index: -1;
}
.dashboard-preview:hover {
transform: rotateX(8deg) rotateY(0deg) translateY(-15px);
}
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
margin-bottom: 1.5rem;
}
.dashboard-tabs {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
background: var(--gray-light);
border-radius: 12px;
padding: 0.5rem;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.dashboard-tab {
padding: 0.7rem 1.2rem;
border-radius: 8px;
font-size: 0.85rem;
font-weight: 500;
color: var(--primary);
cursor: pointer;
transition: var(--transition);
flex: 1;
text-align: center;
}
.dashboard-tab.active {
background: var(--primary);
color: var(--light);
box-shadow: 0 4px 8px rgba(16, 76, 186, 0.3);
}
.dashboard-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.dashboard-widget {
background: var(--light);
border-radius: 12px;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: var(--transition);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.dashboard-widget::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
}
.dashboard-widget:hover {
transform: translateY(-8px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.widget-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.widget-title {
font-size: 0.8rem;
font-weight: 600;
color: var(--secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.widget-value {
font-size: 2rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.5rem;
}
.widget-footer {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
}
.widget-change {
display: flex;
align-items: center;
gap: 0.3rem;
font-weight: 600;
}
.positive {
color: var(--accent);
}
.negative {
color: #ef4444;
}
.dashboard-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.8rem;
margin-top: 1.5rem;
}
.stat-item {
text-align: center;
padding: 0.8rem;
background: var(--gray-light);
border-radius: 8px;
transition: var(--transition);
}
.stat-item:hover {
transform: translateY(-3px);
background: var(--light);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}
.stat-value {
font-size: 1.2rem;
font-weight: 700;
color: var(--primary);
}
.stat-label {
font-size: 0.65rem;
color: var(--secondary);
margin-top: 0.3rem;
}
/* Services Section */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
}
.service-card {
text-align: center;
padding: 2.5rem 2rem;
position: relative;
overflow: hidden;
}
.service-card::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background: linear-gradient(135deg,
rgba(16, 76, 186, 0.1) 0%,
rgba(245, 158, 11, 0.1) 100%);
transition: height 0.5s ease;
z-index: -1;
}
.service-card:hover::after {
height: 100%;
}
.service-icon {
width: 80px;
height: 80px;
background: rgba(16, 76, 186, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.service-icon::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary) 0%, var(--highlight) 100%);
opacity: 0;
transition: opacity 0.4s ease;
border-radius: 50%;
}
.service-card:hover .service-icon {
transform: scale(1.15) rotateY(180deg);
}
.service-card:hover .service-icon::before {
opacity: 0.1;
}
.service-icon i {
font-size: 2rem;
color: var(--primary);
transition: var(--transition);
position: relative;
z-index: 1;
}
.service-card:hover .service-icon i {
transform: rotateY(-180deg);
color: var(--primary-dark);
}
/* Service Detail Sections */
.service-detail {
padding: 5rem 0;
}
.service-detail:nth-child(even) {
background: var(--gray-light);
}
.service-detail-content {
display: flex;
align-items: center;
gap: 4rem;
}
.service-detail-text {
flex: 1;
}
.service-detail-image {
flex: 1;
text-align: center;
}
.service-detail-image img {
max-width: 100%;
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
}
.feature-list {
list-style: none;
margin: 2rem 0;
}
.feature-list li {
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
}
.feature-list i {
color: var(--accent);
margin-right: 1rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
.use-cases {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.use-case-card {
background: var(--light);
border-radius: var(--radius);
padding: 1.5rem;
box-shadow: var(--shadow);
transition: var(--transition);
}
.use-case-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.use-case-icon {
width: 50px;
height: 50px;
background: rgba(16, 76, 186, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.use-case-icon i {
color: var(--primary);
font-size: 1.2rem;
}
/* API Section */
.api-section {
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-dark) 100%);
color: var(--light);
position: relative;
overflow: hidden;
}
.api-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.api-content {
display: flex;
align-items: center;
gap: 4rem;
position: relative;
z-index: 1;
}
.api-text {
flex: 1;
}
.api-text h2 {
color: var(--light);
}
.api-text p {
color: rgba(255, 255, 255, 0.85);
}
.api-code {
flex: 1;
background: rgba(0, 0, 0, 0.2);
border-radius: var(--radius);
padding: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.code-block {
background: #1e293b;
border-radius: var(--radius);
padding: 1.5rem;
font-family: "Courier New", monospace;
color: #e2e8f0;
overflow-x: auto;
margin-bottom: 1.5rem;
}
.code-comment {
color: #94a3b8;
}
.code-keyword {
color: #f472b6;
}
.code-string {
color: #86efac;
}
.code-function {
color: #7dd3fc;
}
/* Responsive Design for Services Page */
@media (max-width: 1200px) {
.service-detail-content,
.api-content {
flex-direction: column;
gap: 2rem;
}
}
@media (max-width: 768px) {
.services-hero h1 {
font-size: 3rem;
}
}
@media (max-width: 576px) {
.services-hero {
padding: 6rem 0 3rem;
}
.services-hero h1 {
font-size: 2.5rem;
}
.services-hero p {
font-size: 1.1rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.use-cases {
grid-template-columns: 1fr;
}
}
/* Features Section */
.features {
background: linear-gradient(135deg, var(--gray-light) 0%, #f0f4f8 100%);
position: relative;
overflow: hidden;
}
.features::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2.5rem;
position: relative;
z-index: 1;
}
.feature-card {
display: flex;
align-items: flex-start;
padding: 2rem;
background: var(--light);
border-radius: 12px;
box-shadow: var(--shadow);
transition: var(--transition);
}
.feature-card:hover {
transform: translateY(-10px) rotateX(5deg);
box-shadow: var(--shadow-3d);
}
.feature-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
background: rgba(16, 76, 186, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.5rem;
transition: var(--transition);
}
.feature-card:hover .feature-icon {
transform: rotateY(180deg);
background: rgba(16, 76, 186, 0.2);
}
.feature-icon i {
color: var(--primary);
font-size: 1.5rem;
transition: var(--transition);
}
.feature-card:hover .feature-icon i {
transform: rotateY(-180deg);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.feature-item {
background: var(--light);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow);
transition: var(--transition);
text-align: center;
}
.feature-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.feature-icon {
width: 60px;
height: 60px;
background: rgba(16, 76, 186, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.feature-icon i {
color: var(--primary);
font-size: 1.5rem;
}
.pricing-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.pricing-option {
background: var(--light);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
}
.pricing-option:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.price {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin: 1rem 0;
}
.price span {
font-size: 1rem;
color: var(--secondary);
}
.integration-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.step {
text-align: center;
position: relative;
}
/* Getting Started Section */
.getting-started-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.step-card {
background: var(--light);
border-radius: var(--radius);
padding: 2.5rem 2rem;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
position: relative;
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.step-number {
width: 60px;
height: 60px;
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-light) 100%);
color: var(--light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
margin: 0 auto 1.5rem;
box-shadow: 0 10px 20px rgba(16, 76, 186, 0.3);
}
.step-card h3 {
margin-bottom: 1rem;
color: var(--primary);
}
.step-card p {
color: var(--secondary);
margin-bottom: 1.5rem;
}
.step-number {
width: 50px;
height: 50px;
background: var(--primary);
color: var(--light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin: 0 auto 1rem;
}
.step:not(:last-child)::after {
content: "";
position: absolute;
top: 25px;
right: -25px;
width: 50px;
height: 2px;
background: var(--primary);
opacity: 0.3;
}
@media (max-width: 768px) {
.step:not(:last-child)::after {
display: none;
}
}
/* Guides Section */
.guides-section {
background: var(--gray-light);
}
.guides-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.guide-card {
background: var(--light);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.guide-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
transform: scaleY(0);
transform-origin: top;
transition: transform 0.5s ease;
}
.guide-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.guide-card:hover::before {
transform: scaleY(1);
}
.guide-category {
display: inline-block;
background: rgba(16, 76, 186, 0.1);
color: var(--primary);
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1rem;
}
.guide-card h3 {
margin-bottom: 1rem;
}
.guide-card h3 a {
color: var(--dark);
text-decoration: none;
transition: var(--transition);
}
.guide-card h3 a:hover {
color: var(--primary);
}
.guide-card p {
color: var(--secondary);
margin-bottom: 1.5rem;
}
.guide-meta {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--secondary);
}
.guide-meta span {
display: flex;
align-items: center;
gap: 0.3rem;
}
/* Testimonial Section */
.testimonials-section {
background: linear-gradient(135deg, var(--gray-light) 0%, #f0f4f8 100%);
position: relative;
overflow: hidden;
}
.testimonials-container {
position: relative;
width: 100%;
overflow: hidden;
padding: 2rem 0;
}
.testimonials-track {
display: flex;
transition: transform 0.5s ease;
width: 200%;
}
.testimonial-slide {
display: flex;
width: 50%;
gap: 2rem;
padding: 0 1rem;
box-sizing: border-box;
}
.testimonial-card {
flex: 1;
background: var(--light);
border-radius: 20px;
box-shadow: var(--shadow-lg);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 0;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.testimonial-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
}
.testimonial-content {
padding: 3rem;
position: relative;
z-index: 1;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.testimonial-quote {
position: absolute;
top: 20px;
right: 30px;
font-size: 120px;
color: rgba(16, 76, 186, 0.05);
line-height: 1;
z-index: 0;
font-family: "Playfair Display", serif;
}
.testimonial-rating {
display: flex;
gap: 0.3rem;
margin-bottom: 1.5rem;
}
.testimonial-rating i {
color: var(--highlight);
font-size: 1.2rem;
}
.testimonial-text {
font-style: italic;
margin-bottom: 2rem;
position: relative;
z-index: 1;
font-size: 1.2rem;
line-height: 1.6;
color: var(--dark);
flex-grow: 1;
}
.testimonial-author {
display: flex;
align-items: center;
margin-top: auto;
}
.author-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-light) 100%);
margin-right: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
color: var(--light);
font-weight: bold;
font-size: 1.5rem;
box-shadow: var(--shadow);
flex-shrink: 0;
}
.author-info {
flex-grow: 1;
}
.author-info h4 {
margin-bottom: 0.3rem;
color: var(--primary);
}
.author-info p {
color: var(--secondary);
margin-bottom: 0;
font-size: 0.9rem;
}
.author-company {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.3rem;
font-size: 0.85rem;
color: var(--secondary);
}
.author-company i {
color: var(--primary);
}
/* Testimonial Navigation */
.testimonial-nav {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem;
gap: 1rem;
}
.testimonial-dots {
display: flex;
gap: 0.8rem;
}
.testimonial-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--gray-medium);
cursor: pointer;
transition: var(--transition);
border: 2px solid transparent;
}
.testimonial-dot.active {
background: var(--primary);
transform: scale(1.3);
border-color: var(--primary-light);
}
.testimonial-dot:hover {
background: var(--primary-light);
transform: scale(1.2);
}
.testimonial-arrows {
display: flex;
gap: 0.8rem;
}
.testimonial-arrow {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--light);
border: 2px solid var(--border);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
box-shadow: var(--shadow);
}
.testimonial-arrow:hover {
background: var(--primary);
color: var(--light);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: var(--primary);
}
/* Pricing Section */
.pricing {
background: var(--gray-light);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.pricing-card {
background: var(--light);
border-radius: var(--radius);
padding: 2.5rem;
text-align: center;
transition: var(--transition);
position: relative;
overflow: hidden;
}
.pricing-card.featured {
transform: scale(1.05);
border: 2px solid var(--primary);
box-shadow: 0 10px 30px rgba(16, 76, 186, 0.2);
}
.pricing-card.featured::before {
content: "Most Popular";
position: absolute;
top: 20px;
right: -30px;
background: var(--primary);
color: var(--light);
padding: 0.5rem 3rem;
transform: rotate(45deg);
font-size: 0.8rem;
font-weight: 600;
}
.pricing-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-3d);
}
.pricing-card.featured:hover {
transform: scale(1.05) translateY(-10px);
}
.pricing-price {
font-size: 3rem;
font-weight: 700;
color: var(--primary);
margin: 1rem 0;
}
.pricing-features {
list-style: none;
margin: 2rem 0;
text-align: left;
}
.pricing-features li {
margin-bottom: 0.8rem;
display: flex;
align-items: center;
}
.pricing-features li i {
color: var(--primary);
margin-right: 0.5rem;
}
/* CTA Section */
.cta {
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-dark) 100%);
color: var(--light);
text-align: center;
padding: 6rem 0;
position: relative;
overflow: hidden;
}
.cta::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.cta h2 {
color: var(--light);
margin-bottom: 1.5rem;
position: relative;
z-index: 1;
font-size: 3rem;
}
.cta p {
color: rgba(255, 255, 255, 0.85);
max-width: 700px;
margin: 0 auto 3rem;
position: relative;
z-index: 1;
font-size: 1.3rem;
}
/* Footer */
footer {
background: var(--dark);
color: var(--light);
padding: 5rem 0 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-col h4 {
color: var(--light);
margin-bottom: 1.5rem;
font-size: 1.3rem;
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 1rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
transition: var(--transition);
}
.footer-links a:hover {
color: var(--primary-light);
padding-left: 5px;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}
/* Trusted By Section */
.integrations {
background: var(--light);
overflow: hidden;
}
.integrations-container {
position: relative;
width: 100%;
overflow: hidden;
}
.integrations-track {
display: flex;
width: max-content;
animation: scroll 40s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.integrations-grid {
display: flex;
gap: 3rem;
padding: 1rem 0;
}
.integration-logo {
background: var(--light);
border-radius: var(--radius);
padding: 1.5rem 2.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
box-shadow: var(--shadow);
flex-shrink: 0;
min-width: 180px;
}
.integration-logo:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
/* Resources Hero Section - FIXED */
.resources-hero {
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-dark) 100%);
color: var(--light);
padding: 8rem 0 4rem;
position: relative;
overflow: visible;
z-index: 900;
}
.resources-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.resources-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.resources-hero h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
line-height: 1.2;
color: var(--light);
background: linear-gradient(135deg,
var(--light) 0%,
rgba(255, 255, 255, 0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.resources-hero p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.3rem;
margin-bottom: 2.5rem;
}
/* Enhanced Search Dropdown Styles - FIXED */
.search-dropdown-container {
position: relative;
max-width: 600px;
margin: 0 auto;
z-index: 1001;
}
.search-dropdown {
display: flex;
background: rgba(255, 255, 255, 0.15);
border-radius: 50px;
padding: 0.5rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
position: relative;
transition: var(--transition);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.search-dropdown:focus-within {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.5);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.search-dropdown input {
flex: 1;
background: transparent;
border: none;
padding: 1rem 1.5rem;
color: var(--light);
font-size: 1rem;
outline: none;
}
.search-dropdown input::placeholder {
color: rgba(255, 255, 255, 0.8);
}
.search-dropdown button {
background: var(--light);
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
color: var(--primary);
}
.search-dropdown button:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--light);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
margin-top: 0.8rem;
max-height: 450px;
overflow-y: auto;
z-index: 1002;
display: none;
border: 1px solid var(--border);
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.search-results.active {
display: block;
}
.search-result-category {
padding: 1rem 1.5rem;
background: var(--gray-light);
font-weight: 600;
color: var(--primary);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 10;
}
.search-result-item {
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
gap: 1rem;
text-decoration: none;
color: inherit;
}
.search-result-item:last-child {
border-bottom: none;
}
.search-result-item:hover {
background: rgba(16, 76, 186, 0.08);
transform: translateX(5px);
}
.search-result-icon {
width: 36px;
height: 36px;
background: rgba(16, 76, 186, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: var(--transition);
}
.search-result-item:hover .search-result-icon {
background: rgba(16, 76, 186, 0.2);
transform: scale(1.1);
}
.search-result-icon i {
color: var(--primary);
font-size: 0.9rem;
}
.search-result-content {
flex: 1;
}
.search-result-title {
font-weight: 600;
color: var(--dark);
margin-bottom: 0.3rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-result-description {
font-size: 0.85rem;
color: var(--secondary);
text-align: justify;
}
.search-result-type {
display: inline-block;
padding: 0.2rem 0.6rem;
background: var(--primary);
color: var(--light);
border-radius: 4px;
font-size: 0.7rem;
font-weight: 600;
margin-right: 0.5rem;
}
.no-results {
padding: 2rem;
text-align: center;
color: var(--secondary);
}
.search-highlight {
background: rgba(245, 158, 11, 0.3);
padding: 0.1rem 0.2rem;
border-radius: 2px;
font-weight: 600;
}
/* Documentation Layout */
.documentation-layout {
display: flex;
gap: 3rem;
margin: 2rem 0;
}
.docs-sidebar {
flex: 0 0 300px;
position: sticky;
top: 120px;
height: calc(100vh - 140px);
overflow-y: auto;
}
.docs-content {
flex: 1;
max-width: 800px;
}
.sidebar-section {
margin-bottom: 2rem;
}
.sidebar-section h3 {
font-size: 1.1rem;
margin-bottom: 1rem;
color: var(--primary);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--border);
}
.sidebar-links {
list-style: none;
}
.sidebar-links li {
margin-bottom: 0.5rem;
}
.sidebar-links a {
display: block;
padding: 0.5rem 0;
color: var(--secondary);
text-decoration: none;
transition: var(--transition);
border-left: 3px solid transparent;
padding-left: 1rem;
}
.sidebar-links a:hover,
.sidebar-links a.active {
color: var(--primary);
border-left-color: var(--primary);
background: rgba(16, 76, 186, 0.05);
}
.docs-section {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
}
.docs-section:last-child {
border-bottom: none;
}
.docs-section li {
list-style-type: disc !important;
}
.endpoint-card {
background: var(--light);
border-radius: var(--radius);
padding: 1.5rem;
margin: 1.5rem 0;
border-left: 4px solid var(--primary);
box-shadow: var(--shadow);
}
.endpoint-method {
display: inline-block;
padding: 0.3rem 0.8rem;
background: var(--primary);
color: var(--light);
border-radius: 4px;
font-weight: 600;
margin-right: 1rem;
}
.endpoint-path {
font-family: "Courier New", monospace;
color: var(--dark);
font-weight: 500;
}
.parameter-table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
.parameter-table th,
.parameter-table td {
padding: 0.8rem;
text-align: left;
border-bottom: 1px solid var(--border);
}
td {
word-break: break-all !important;
}
.parameter-table th {
background: var(--gray-light);
font-weight: 600;
color: var(--primary);
}
.code-tabs {
margin: 1.5rem 0;
}
.code-tab-buttons {
display: flex;
border-bottom: 1px solid var(--border);
margin-bottom: 0;
}
.code-tab-button {
padding: 0.8rem 1.5rem;
background: none;
border: none;
cursor: pointer;
font-weight: 500;
color: var(--secondary);
border-bottom: 2px solid transparent;
transition: var(--transition);
}
.code-tab-button.active {
color: var(--primary);
border-bottom-color: var(--primary);
}
.code-tab-content {
display: none;
}
.code-tab-content.active {
display: block;
}
/* API Code Styling */
.api-code {
background: rgba(0, 0, 0, 0.2);
border-radius: var(--radius);
padding: 2rem;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.code-block {
background: #1e293b;
border-radius: var(--radius);
padding: 1.5rem;
font-family: "Courier New", monospace;
color: #e2e8f0;
overflow-x: auto;
margin-bottom: 1.5rem;
}
.code-comment {
color: #94a3b8;
}
.code-keyword {
color: #f472b6;
}
.code-string {
color: #86efac;
}
.code-function {
color: #7dd3fc;
}
/* Responsive Design */
@media (max-width: 1200px) {
.hero-content {
flex-direction: column;
}
.hero-text {
padding-right: 0;
margin-bottom: 4rem;
text-align: center;
}
.hero-actions {
justify-content: center;
}
.pricing-card.featured {
transform: scale(1);
}
.pricing-card.featured:hover {
transform: translateY(-10px);
}
.mega-menu {
width: 700px;
}
.service-detail-content,
.api-content {
flex-direction: column;
gap: 2rem;
}
}
@media (max-width: 992px) {
h1 {
font-size: 3rem;
}
h2 {
font-size: 2.5rem;
}
.hero h1 {
font-size: 3.5rem;
}
.resources-hero h1 {
font-size: 3.5rem;
}
.documentation-layout {
flex-direction: column;
}
.docs-sidebar {
position: static;
height: auto;
flex: none;
}
}
@media (max-width: 768px) {
.nav-links,
.nav-actions {
display: none;
}
.mobile-menu-btn {
display: block;
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
.hero h1 {
font-size: 3rem;
}
.cta h2 {
font-size: 2.5rem;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
.mega-menu {
width: 90vw;
grid-template-columns: 1fr;
}
.hero-actions .btn {
width: 100%;
max-width: 300px;
}
.testimonials-track {
width: 400%;
}
.testimonial-slide {
width: 25%;
flex-direction: column;
}
.testimonial-content {
padding: 2rem;
}
.testimonial-text {
font-size: 1.1rem;
}
.testimonial-author {
flex-direction: column;
text-align: center;
}
.author-avatar {
margin-right: 0;
margin-bottom: 1rem;
}
.testimonial-nav {
flex-direction: column;
gap: 1.5rem;
}
.testimonial-arrows {
order: -1;
}
.testimonial-quote {
font-size: 80px;
top: 10px;
right: 20px;
}
.integrations-track {
animation-duration: 25s;
}
.services-hero h1 {
font-size: 3rem;
}
.resources-hero h1 {
font-size: 3rem;
}
.quick-links-grid {
grid-template-columns: 1fr;
}
.getting-started-steps {
grid-template-columns: 1fr;
}
.guides-grid {
grid-template-columns: 1fr;
}
/* SDKs Section */
.sdks-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.sdk-card {
background: var(--light);
border-radius: var(--radius);
padding: 2rem;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
border: 1px solid var(--border);
}
.sdk-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: var(--primary-light);
}
.sdk-icon {
width: 80px;
height: 80px;
background: rgba(16, 76, 186, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: var(--transition);
}
.sdk-card:hover .sdk-icon {
transform: scale(1.1);
background: rgba(16, 76, 186, 0.2);
}
.sdk-icon i {
color: var(--primary);
font-size: 2.5rem;
}
.sdk-card h3 {
margin-bottom: 1rem;
color: var(--primary);
}
.sdk-card p {
color: var(--secondary);
margin-bottom: 1.5rem;
}
.sdk-actions {
display: flex;
gap: 0.5rem;
justify-content: center;
}
.sdk-actions .btn {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
.sdks-grid {
grid-template-columns: 1fr;
}
.community-grid {
grid-template-columns: 1fr;
}
/* Community Section */
.community-section {
background: var(--gray-light);
}
.community-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.community-card {
background: var(--light);
border-radius: var(--radius);
padding: 2.5rem 2rem;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
}
.community-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.community-icon {
width: 80px;
height: 80px;
background: rgba(16, 76, 186, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: var(--transition);
}
.community-card:hover .community-icon {
transform: scale(1.1);
background: rgba(16, 76, 186, 0.2);
}
.community-icon i {
color: var(--primary);
font-size: 2rem;
}
.community-card h3 {
margin-bottom: 1rem;
color: var(--primary);
}
.community-card p {
color: var(--secondary);
margin-bottom: 1.5rem;
}
.community-card ul {
list-style: none;
text-align: left;
margin-bottom: 2rem;
}
.community-card ul li {
margin-bottom: 0.5rem;
padding-left: 1.5rem;
position: relative;
}
.community-card ul li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--accent);
font-weight: bold;
}
.search-dropdown {
flex-direction: column;
border-radius: var(--radius);
padding: 1rem;
}
.search-dropdown input {
margin-bottom: 1rem;
text-align: center;
}
.search-results {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-height: 70vh;
margin-top: 0;
z-index: 1003;
}
}
@media (max-width: 576px) {
.section {
padding: 4rem 0;
}
.hero {
padding: 6rem 0 4rem;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.dashboard-content {
grid-template-columns: 1fr;
}
.services-grid,
.features-grid {
grid-template-columns: 1fr;
}
.pricing-grid {
grid-template-columns: 1fr;
}
.integration-logo {
min-width: 150px;
padding: 1rem 1.5rem;
}
.testimonial-content {
padding: 1.5rem;
}
.testimonial-text {
font-size: 1rem;
}
.testimonial-quote {
font-size: 60px;
}
.services-hero {
padding: 6rem 0 3rem;
}
.services-hero h1 {
font-size: 2.5rem;
}
.services-hero p {
font-size: 1.1rem;
}
.services-grid {
grid-template-columns: 1fr;
}
.use-cases {
grid-template-columns: 1fr;
}
.resources-hero {
padding: 6rem 0 3rem;
}
.resources-hero h1 {
font-size: 2.5rem;
}
.resources-hero p {
font-size: 1.1rem;
}
.sdk-actions {
flex-direction: column;
}
}
/* Services Hero Section */
.services-hero {
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-dark) 100%);
color: var(--light);
padding: 8rem 0 4rem;
position: relative;
overflow: hidden;
}
.services-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.services-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.services-hero h1,
.page-hero h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
line-height: 1.2;
color: var(--light);
background: linear-gradient(135deg,
var(--light) 0%,
rgba(255, 255, 255, 0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.services-hero p,
.page-hero p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.3rem;
margin-bottom: 2.5rem;
}
/* Service-specific styles */
.service-hero {
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-dark) 100%);
color: var(--light);
padding: 8rem 0 4rem;
position: relative;
overflow: hidden;
}
.service-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.service-hero-content {
text-align: center;
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.service-hero h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
line-height: 1.2;
color: var(--light);
background: linear-gradient(135deg,
var(--light) 0%,
rgba(255, 255, 255, 0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.service-hero p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.3rem;
margin-bottom: 2.5rem;
}
.service-icon-large {
width: 120px;
height: 120px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
}
.service-icon-large i {
font-size: 3.5rem;
color: var(--light);
}
/* Quick Links Section */
.quick-links-section {
background: var(--gray-light);
}
.quick-links-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.quick-link-card {
background: var(--light);
border-radius: var(--radius);
padding: 2.5rem 2rem;
text-align: center;
transition: var(--transition);
box-shadow: var(--shadow);
position: relative;
overflow: hidden;
display: block;
color: inherit;
}
.quick-link-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--primary-light));
transform: scaleX(0);
transform-origin: left;
transition: transform 0.5s ease;
}
.quick-link-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-3d);
color: inherit;
text-decoration: none;
}
.quick-link-card:hover::before {
transform: scaleX(1);
}
.quick-link-icon {
width: 80px;
height: 80px;
background: rgba(16, 76, 186, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
transition: var(--transition);
}
.quick-link-card:hover .quick-link-icon {
transform: scale(1.1);
background: rgba(16, 76, 186, 0.2);
}
.quick-link-icon i {
color: var(--primary);
font-size: 2rem;
}
.quick-link-card h3 {
margin-bottom: 1rem;
color: var(--primary);
}
.quick-link-card p {
color: var(--secondary);
margin-bottom: 1.5rem;
}
.link-arrow {
color: var(--primary);
font-size: 1.2rem;
transition: var(--transition);
}
.quick-link-card:hover .link-arrow {
transform: translateX(5px);
}
/* Text Center Utility */
.text-center {
text-align: center !important;
}
/* Pricing Hero Section */
.pricing-hero {
background: linear-gradient(135deg, #0066FF 0%, #0052CC 100%);
color: white;
padding: 6rem 0;
text-align: center;
}
.pricing-hero-content {
max-width: 800px;
margin: 0 auto;
}
.pricing-hero h1 {
font-size: 3.5rem;
margin-bottom: 1.5rem;
color: white;
}
.pricing-hero p {
font-size: 1.3rem;
margin-bottom: 2rem;
opacity: 0.9;
}
/* Billing Toggle */
.billing-toggle {
display: flex;
align-items: center;
justify-content: center;
margin: 2rem 0;
gap: 1rem;
}
.toggle-label {
font-weight: 500;
color: white;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 30px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(255, 255, 255, 0.3);
transition: .4s;
border-radius: 34px;
}
.toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked+.toggle-slider {
background-color: rgba(255, 255, 255, 0.5);
}
input:checked+.toggle-slider:before {
transform: translateX(30px);
}
.discount-badge {
background: var(--success);
color: white;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
/* Pricing Plans */
.pricing-plans {
padding: 5rem 0;
}
.plans-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.plan-card {
background: white;
border-radius: 12px;
padding: 2.5rem 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s, box-shadow 0.3s;
border: 1px solid var(--border);
position: relative;
display: flex;
flex-direction: column;
}
.plan-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.plan-card.popular {
border: 2px solid var(--primary);
transform: scale(1.05);
}
.plan-card.popular:hover {
transform: scale(1.05) translateY(-5px);
}
.popular-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
}
.plan-header {
text-align: center;
margin-bottom: 2rem;
border-bottom: 1px solid var(--border);
padding-bottom: 1.5rem;
}
.plan-name {
font-size: 1.5rem;
margin-bottom: 0.5rem;
color: var(--dark);
}
.plan-description {
color: var(--gray);
margin-bottom: 1rem;
}
.plan-price {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.5rem;
}
.price-amount {
font-size: 3rem;
font-weight: 700;
color: var(--dark);
}
.price-period {
color: var(--gray);
margin-left: 0.5rem;
}
.price-note {
color: var(--gray);
font-size: 0.9rem;
text-align: center;
}
.price-use-case {
color: var(--dark) !important;
font-size: 1rem;
text-align: left;
}
.plan-features {
flex: 1;
margin-bottom: 2rem;
}
.feature-list {
list-style: none;
}
.feature-list li {
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
}
.feature-list i {
color: var(--success);
margin-right: 0.8rem;
margin-top: 0.2rem;
}
.feature-list .not-included {
color: var(--gray-light);
}
.feature-list .not-included i {
color: var(--gray-light);
}
.plan-button {
display: block;
text-align: center;
padding: 1rem;
background: var(--primary);
color: white;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: background 0.3s;
margin-top: auto;
}
.plan-button:hover {
background: var(--primary-dark);
}
.plan-button.secondary {
background: transparent;
color: var(--primary);
border: 1px solid var(--primary);
}
.plan-button.secondary:hover {
background: rgba(0, 102, 255, 0.1);
}
/* Feature Comparison */
.feature-comparison {
background: var(--light);
padding: 5rem 0;
}
.comparison-container {
max-width: 1200px;
margin: 0 auto;
}
.comparison-table {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.comparison-header {
display: grid;
grid-template-columns: 1fr repeat(4, 1fr);
background: var(--primary);
color: white;
}
.comparison-header-cell {
padding: 1.5rem;
text-align: center;
font-weight: 600;
}
.comparison-header-cell:first-child {
text-align: left;
}
.comparison-row {
display: grid;
grid-template-columns: 1fr repeat(4, 1fr);
border-bottom: 1px solid var(--border);
}
.comparison-row:last-child {
border-bottom: none;
}
.comparison-row-header {
padding: 1.5rem;
font-weight: 600;
background: var(--light);
}
.comparison-cell {
padding: 1.5rem;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.feature-category {
background: var(--dark);
color: white;
font-weight: 600;
padding: 1rem 1.5rem;
}
.checkmark {
color: var(--success);
font-size: 1.2rem;
}
.cross {
color: var(--danger);
font-size: 1.2rem;
}
.limited {
color: var(--warning);
font-weight: 600;
}
/* FAQ Section */
.faq-section {
padding: 5rem 0;
}
.faq-container {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
margin-bottom: 1.5rem;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.faq-question {
padding: 1.5rem;
background: white;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
font-weight: 600;
transition: background 0.3s;
}
.faq-question:hover {
background: var(--light);
}
.faq-question i {
transition: transform 0.3s;
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s, padding 0.3s;
background: var(--light);
}
.faq-item.active .faq-answer {
padding: 1.5rem;
max-height: 500px;
}
/* Responsive Design */
@media (max-width: 1024px) {
.plan-card.popular {
transform: scale(1);
}
.plan-card.popular:hover {
transform: translateY(-5px);
}
.comparison-header,
.comparison-row {
grid-template-columns: 1fr repeat(3, 1fr);
}
.comparison-header-cell:nth-child(5),
.comparison-cell:nth-child(5) {
display: none;
}
}
@media (max-width: 768px) {
.pricing-hero h1 {
font-size: 2.5rem;
}
.section-header h2 {
font-size: 2rem;
}
.plans-container {
grid-template-columns: 1fr;
}
.comparison-header,
.comparison-row {
grid-template-columns: 1fr 1fr;
}
.comparison-header-cell:nth-child(3),
.comparison-header-cell:nth-child(4),
.comparison-cell:nth-child(3),
.comparison-cell:nth-child(4) {
display: none;
}
.mega-menu {
width: 300px;
grid-template-columns: 1fr;
}
}
/* --- appended overrides --- */
/* ======= User overrides: Simplify nav action buttons with outline ======= */
.nav-actions .btn {
background: transparent !important;
color: var(--primary) !important;
border: 1px solid var(--primary) !important;
padding: 0.5rem 1rem !important;
border-radius: 6px !important;
box-shadow: none !important;
gap: 0.4rem !important;
font-weight: 600 !important;
transform: none !important;
overflow: visible !important;
}
.nav-actions .btn::before,
.nav-actions .btn::after {
display: none !important;
content: none !important;
}
/* Hover state: subtle filled look */
.nav-actions .btn:hover {
background: var(--primary) !important;
color: var(--light) !important;
transform: translateY(0) !important;
/* remove fancy transform */
box-shadow: 0 4px 10px rgba(16, 76, 186, 0.15) !important;
}
/* Make nav actions adapt on small screens */
@media (max-width: 768px) {
.nav-actions {
gap: 0.5rem;
}
.nav-actions .btn {
padding: 0.6rem 0.9rem !important;
border-radius: 8px !important;
font-size: 0.95rem;
}
}
/* ======= Make pricing-hero identical to services-hero ======= */
/* Copy of .services-hero styles to ensure both sections look and behave the same */
.pricing-hero {
background: linear-gradient(135deg,
var(--primary) 0%,
var(--primary-dark) 100%) !important;
color: var(--light) !important;
padding: 8rem 0 4rem !important;
position: relative !important;
overflow: hidden !important;
z-index: 900;
}
.pricing-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,') !important;
background-size: cover !important;
z-index: -1 !important;
}
.pricing-hero-content {
text-align: center !important;
max-width: 800px !important;
margin: 0 auto !important;
position: relative !important;
z-index: 1 !important;
}
.pricing-hero h1 {
font-size: 4rem !important;
margin-bottom: 1.5rem !important;
line-height: 1.2 !important;
color: var(--light) !important;
background: linear-gradient(135deg,
var(--light) 0%,
rgba(255, 255, 255, 0.8) 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
}
.pricing-hero p {
color: rgba(255, 255, 255, 0.85) !important;
font-size: 1.3rem !important;
margin-bottom: 2.5rem !important;
}
/* Ensure services-hero and pricing-hero share identical inner layout
If there are any differences elsewhere, this override will harmonize them */
.services-hero,
.pricing-hero {
display: block;
box-sizing: border-box;
}
/* small-screen adjustments to keep parity */
@media (max-width: 576px) {
.pricing-hero h1,
.services-hero h1 {
font-size: 2.5rem !important;
}
.pricing-hero p,
.services-hero p {
font-size: 1.1rem !important;
}
}
/* --- discount badge overrides --- */
/* ======= Discount badge effect ======= */
/* Basic badge */
.discount-badge {
position: absolute;
top: 12px;
right: 12px;
background: linear-gradient(135deg, var(--highlight) 0%, var(--primary) 100%);
color: var(--light);
padding: 0.35rem 0.65rem;
border-radius: 12px;
font-weight: 800;
font-size: 0.85rem;
letter-spacing: 0.4px;
text-transform: uppercase;
box-shadow: 0 6px 18px rgba(16, 76, 186, 0.12);
transform-origin: center;
transform: translateZ(0);
display: inline-block;
z-index: 2000;
transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
cursor: default;
animation: db-float 3.2s ease-in-out infinite, db-pulse 2.6s ease-in-out infinite;
}
/* Optional small/large modifiers */
.discount-badge.small {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
border-radius: 10px;
}
.discount-badge.large {
padding: 0.6rem 0.9rem;
font-size: 1rem;
border-radius: 14px;
}
/* Subtle floating motion */
@keyframes db-float {
0% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-6px) scale(1.02);
}
100% {
transform: translateY(0) scale(1);
}
}
/* Gentle pulsing glow */
@keyframes db-pulse {
0% {
box-shadow: 0 6px 18px rgba(16, 76, 186, 0.08);
}
40% {
box-shadow: 0 12px 28px rgba(16, 76, 186, 0.14);
}
70% {
box-shadow: 0 18px 38px rgba(16, 76, 186, 0.18);
}
100% {
box-shadow: 0 6px 18px rgba(16, 76, 186, 0.08);
}
}
/* Hover state gives a pop and brighter glow */
.discount-badge:hover {
transform: translateY(-10px) scale(1.06);
box-shadow: 0 24px 60px rgba(16, 76, 186, 0.22);
opacity: 1;
animation-play-state: paused;
/* pause background animation while hovering for a crisp pop */
}
/* Decorative ribbon notch (optional) */
.discount-badge.ribbon {
padding-right: 1rem;
position: relative;
}
.discount-badge.ribbon::after {
content: "";
position: absolute;
right: -10px;
bottom: 0;
width: 18px;
height: 18px;
background: inherit;
transform: rotate(45deg);
box-shadow: inherit;
border-bottom-left-radius: 3px;
z-index: -1;
opacity: 0.98;
}
/* Accessibility: reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
.discount-badge,
.discount-badge.small,
.discount-badge.large {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* --- inline-billing + mascot overrides --- */
/* ===== Keep discount badge aligned with annual billing (same level as billing toggle) ===== */
/* Ensure billing toggle is a stable horizontal container */
.billing-toggle {
position: relative;
display: inline-flex;
/* keep it inline so it sits naturally in headings/sections */
align-items: center;
gap: 0.75rem;
}
/* If the discount badge is used inside or next to billing-toggle, keep it level (no absolute offset) */
.billing-toggle .discount-badge,
.discount-badge.billing-inline {
position: relative;
top: 0;
right: 0;
transform: none;
margin-left: 0.5rem;
margin-top: 0;
box-shadow: 0 8px 22px rgba(16, 76, 186, 0.12);
animation: db-float 3.2s ease-in-out infinite, db-pulse 2.6s ease-in-out infinite;
vertical-align: middle;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Make sure notch/ribbon doesn't push layout - keep it visually inline */
.discount-badge.ribbon::after {
right: -8px;
bottom: 6px;
width: 12px;
height: 12px;
transform: rotate(45deg);
}
/* Responsive tweak: smaller badge on narrow screens while inline with the toggle */
@media (max-width: 576px) {
.billing-toggle .discount-badge,
.discount-badge.billing-inline {
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
border-radius: 10px;
margin-left: 0.4rem;
}
}
/* ===== Mascot ===== */
/* Provide a lightweight mascot container. Place the mascot inside the billing-toggle or pricing hero as needed.
Example usage inside markup (inline within the same container):
...-30%...SVG...
*/
.mascot {
width: 56px;
height: 56px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 0.6rem;
border-radius: 50%;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.06));
box-shadow: 0 6px 18px rgba(16, 76, 186, 0.08);
overflow: hidden;
flex-shrink: 0;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
/* mascot hover gives a little wink/tilt */
.mascot:hover {
transform: translateY(-4px) rotate(-6deg) scale(1.04);
box-shadow: 0 18px 48px rgba(16, 76, 186, 0.16);
}
/* Simple accessible fallback for text-only mascots */
.mascot .emoji {
font-size: 1.5rem;
line-height: 1;
}
/* Larger mascot variant (for hero area) */
.mascot.hero {
width: 120px;
height: 120px;
margin-left: 1rem;
border-radius: 16px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
box-shadow: 0 20px 60px rgba(16, 76, 186, 0.12);
}
/* Accessibility - reduce motion */
@media (prefers-reduced-motion: reduce) {
.billing-toggle .discount-badge,
.discount-badge.billing-inline,
.mascot,
.mascot.hero {
animation: none !important;
transition: none !important;
transform: none !important;
}
}
/* Authentication Section */
.auth-section {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 120px);
padding: 4rem 0;
}
.auth-container {
width: 100%;
max-width: 450px;
}
.auth-header {
text-align: center;
margin-bottom: 2rem;
}
.auth-header h1 {
color: var(--primary);
margin-bottom: 0.5rem;
font-size: 2rem;
}
.auth-header p {
color: var(--gray);
}
.auth-form {
width: 100%;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 500;
color: var(--dark);
}
.form-input {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--primary-light);
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.form-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(16, 76, 186, 0.1);
}
.form-input.error {
border-color: var(--error);
}
.form-text {
display: block;
margin-top: 0.5rem;
font-size: 0.875rem;
color: var(--gray);
}
.form-check {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.form-check input {
width: auto;
}
.form-textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--primary);
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
font-family: inherit;
}
.form-textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(16, 76, 186, 0.1);
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
.form-select {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--primary);
border-radius: 6px;
font-size: 1rem;
background-color: white;
cursor: pointer;
}
.auth-footer {
margin-top: 2rem;
text-align: center;
color: var(--gray);
}
.auth-footer a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
}
.auth-footer a:hover {
text-decoration: underline;
}
.divider {
display: flex;
align-items: center;
margin: 2rem 0;
}
.divider::before,
.divider::after {
content: "";
flex: 1;
height: 1px;
background-color: var(--gray-light);
}
.divider-text {
padding: 0 1rem;
color: var(--gray);
font-size: 0.875rem;
}
.social-auth {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.social-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem;
border: 1px solid var(--primary);
border-radius: 6px;
background: white;
color: var(--dark);
cursor: pointer;
transition: all 0.3s ease;
}
.social-btn:hover {
background-color: var(--gray-light);
}
.social-btn.google {
color: #DB4437;
}
.social-btn.github {
color: #333;
}
/* Verification Styles */
.verification-container {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 1.5rem;
}
.verification-inputs {
display: flex;
gap: 0.5rem;
width: 100%;
max-width: 360px;
justify-content: space-between;
}
.verification-input {
flex: 1;
min-width: 0;
height: 60px;
text-align: center;
font-size: 1.5rem;
font-weight: 600;
border: 1px solid var(--primary);
border-radius: 6px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
aspect-ratio: 1/1;
}
.verification-input:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(16, 76, 186, 0.1);
}
.verification-input.active {
border-color: var(--primary);
}
.resend-code {
text-align: center;
margin-top: 1.5rem;
}
.resend-code a {
color: var(--primary);
text-decoration: none;
font-weight: 500;
}
.resend-code a:hover {
text-decoration: underline;
}
.countdown {
color: var(--gray);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.verification-inputs {
max-width: 320px;
}
.verification-input {
height: 55px;
font-size: 1.4rem;
}
}
@media (max-width: 576px) {
.verification-inputs {
max-width: 300px;
gap: 0.4rem;
}
.verification-input {
height: 50px;
font-size: 1.3rem;
}
}
@media (max-width: 400px) {
.verification-inputs {
max-width: 280px;
}
.verification-input {
height: 45px;
font-size: 1.2rem;
}
}
/* Success Message */
.success-message {
background-color: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--success);
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 0 4px 4px 0;
}
.success-message i {
color: var(--success);
margin-right: 0.5rem;
}
.social-links {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.1);
color: white;
transition: background-color 0.3s ease;
}
.social-links a:hover {
background-color: var(--primary);
}
/* Responsive Styles */
@media (max-width: 992px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.nav-links,
.nav-actions {
display: none;
}
.auth-container {
padding: 0 1rem;
}
.social-auth {
flex-direction: column;
}
}
@media (max-width: 576px) {
.footer-grid {
grid-template-columns: 1fr;
}
.verification-inputs {
gap: 0.5rem;
}
.verification-input {
height: 50px;
font-size: 1.25rem;
}
}
/* Password Input Wrapper */
.password-wrapper {
position: relative;
}
.toggle-password {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--gray);
cursor: pointer;
padding: 4px;
transition: color 0.3s ease;
}
.toggle-password:hover {
color: var(--primary);
}
/* Legal Content */
.legal-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: white;
padding: 6rem 0 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.legal-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
z-index: 1;
}
.legal-hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
.legal-hero h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
line-height: 1.2;
color: var(--light);
background: linear-gradient(135deg,
var(--light) 0%,
rgba(255, 255, 255, 0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.legal-hero p {
max-width: 700px;
opacity: 0.9;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
font-size: 1.3rem;
margin-bottom: 2.5rem;
}
.legal-content {
padding: 4rem 0;
background-color: white;
word-wrap: break-word;
}
.legal-container {
max-width: 900px;
margin: 0 auto;
}
.legal-section {
margin-bottom: 1.5rem;
}
.legal-section h2 {
color: var(--primary);
border-bottom: 2px solid var(--gray-light);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
font-size: 2rem;
}
.legal-section h3 {
color: var(--dark);
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.legal-section p {
margin-bottom: 1rem;
color: var(--dark);
}
.legal-section ul,
.legal-section ol {
margin-left: 1.5rem;
margin-bottom: 1.5rem;
}
.legal-section li {
list-style: disc inside !important;
margin-bottom: 0.5rem;
}
.last-updated {
background-color: var(--gray-light);
padding: 1rem;
border-radius: 6px;
margin-bottom: 2rem;
font-style: italic;
}
@media (max-width: 768px) {
.legal-hero {
padding: 5rem 0 3rem;
}
.legal-hero h1 {
font-size: 2.5rem;
}
.legal-hero p {
font-size: 1.1rem;
}
}
@media (max-width: 576px) {
.legal-hero h1 {
font-size: 2rem;
}
}
/* Hero Section */
.page-hero {
background: linear-gradient(135deg, rgba(16, 76, 186, 0.9) 0%, rgba(58, 110, 214, 0.9) 100%);
color: white;
padding: 6rem 0 4rem;
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(120, 119, 198, 0.2) 0%, transparent 50%);
z-index: 1;
}
.page-hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}
/* About Content */
.about-content {
padding: 4rem 0;
background-color: white;
}
.stats-section {
background-color: var(--light);
padding: 4rem 0;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
text-align: center;
}
.stat-card {
padding: 2rem;
}
.stat-number {
font-size: 3rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.5rem;
}
.stat-label {
color: var(--gray);
font-weight: 500;
}
.team-section {
padding: 4rem 0;
}
.team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.team-card {
text-align: center;
padding: 2rem;
}
.team-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
margin: 0 auto 1.5rem;
background-color: var(--gray-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: var(--primary);
}
.team-name {
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.team-role {
color: var(--primary);
margin-bottom: 1rem;
font-weight: 500;
}
.values-section {
background-color: var(--light);
padding: 4rem 0;
}
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.value-card {
text-align: center;
padding: 2rem;
}
.value-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: rgba(16, 76, 186, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: var(--primary);
font-size: 2rem;
}
/* Responsive Styles */
@media (max-width: 992px) {
.stats-grid,
.team-grid,
.values-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.page-hero {
padding: 5rem 0 3rem;
}
.page-hero h1 {
font-size: 2.5rem;
}
.page-hero p {
font-size: 1.1rem;
}
}
@media (max-width: 576px) {
.stats-grid,
.team-grid,
.values-grid {
grid-template-columns: 1fr;
}
.page-hero h1 {
font-size: 2rem;
}
}
/* Contact Content */
.contact-content {
padding: 4rem 0;
background-color: white;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.contact-info {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-method {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.contact-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(16, 76, 186, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.25rem;
flex-shrink: 0;
}
.contact-details h3 {
margin-bottom: 0.5rem;
}
.contact-details p {
color: var(--gray);
margin-bottom: 0.25rem;
}
/* Responsive Styles */
@media (max-width: 992px) {
.contact-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* Careers Content */
.careers-content {
padding: 4rem 0;
background-color: white;
}
.benefits-section {
background-color: var(--light);
padding: 4rem 0;
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.benefit-card {
text-align: center;
padding: 2rem;
}
.benefit-icon {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: rgba(16, 76, 186, 0.1);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: var(--primary);
font-size: 2rem;
}
.open-positions {
padding: 4rem 0;
}
.positions-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-top: 2rem;
}
.position-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
border-bottom: 1px solid var(--gray-light);
}
.position-card:last-child {
border-bottom: none;
}
.position-info h3 {
margin-bottom: 0.5rem;
}
.position-meta {
display: flex;
gap: 1rem;
color: var(--gray);
font-size: 0.9rem;
}
.position-type {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.type-remote {
background-color: rgba(16, 185, 129, 0.1);
color: var(--secondary);
}
.type-hybrid {
background-color: rgba(245, 158, 11, 0.1);
color: var(--warning);
}
.type-onsite {
background-color: rgba(59, 130, 246, 0.1);
color: var(--primary);
}
/* Culture Section */
.culture-section {
padding: 4rem 0;
background-color: var(--light);
}
.culture-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 3rem;
align-items: center;
}
.culture-image {
background-color: var(--gray-light);
height: 400px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--gray);
font-size: 1.25rem;
}
.culture-content h2 {
margin-bottom: 1.5rem;
}
.culture-content ul {
margin-left: 1.5rem;
margin-bottom: 1.5rem;
}
.culture-content li {
margin-bottom: 0.5rem;
}
/* Responsive Styles */
@media (max-width: 992px) {
.benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
.culture-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.position-card {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
@media (max-width: 576px) {
.benefits-grid {
grid-template-columns: 1fr;
}
}
.job-meta {
display: flex;
gap: 2rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.job-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 20px;
font-size: 0.9rem;
}
/* Application Content */
.application-content {
padding: 3rem 0;
background-color: white;
}
.application-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 3rem;
}
.application-form {
margin-bottom: 2rem;
}
.form-section {
margin-bottom: 2.5rem;
}
.form-section h3 {
border-bottom: 2px solid var(--gray-light);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.file-upload {
border: 2px dashed var(--gray-light);
border-radius: 6px;
padding: 2rem;
text-align: center;
transition: border-color 0.3s ease;
cursor: pointer;
}
.file-upload:hover {
border-color: var(--primary);
}
.file-upload input {
display: none;
}
.file-upload-icon {
font-size: 2rem;
color: var(--primary);
margin-bottom: 1rem;
}
.file-info {
margin-top: 1rem;
font-size: 0.9rem;
color: var(--gray);
}
.checkbox-group {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.checkbox-group input {
margin-top: 0.25rem;
}
.checkbox-label {
font-size: 0.9rem;
color: var(--gray);
}
.checkbox-label a {
color: var(--primary);
text-decoration: none;
}
.checkbox-label a:hover {
text-decoration: underline;
}
/* Job Summary */
.job-summary {
position: sticky;
top: 2rem;
}
.job-details {
margin-bottom: 2rem;
}
.detail-item {
display: flex;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid var(--gray-light);
}
.detail-item:last-child {
border-bottom: none;
}
.detail-label {
color: var(--gray);
}
.detail-value {
font-weight: 500;
}
/* Process Steps */
.process-steps {
margin-top: 3rem;
}
.step-content h4 {
margin-bottom: 0.5rem;
}
.step-content p {
color: var(--gray);
font-size: 0.9rem;
}
/* Responsive Styles */
@media (max-width: 992px) {
.application-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.job-meta {
gap: 1rem;
}
.dashboard-container {
display: none !important;
}
}
/* Job Details Content */
.job-details-content {
padding: 3rem 0;
background-color: white;
}
.job-details-grid {
display: grid;
grid-template-columns: 1fr 400px;
gap: 3rem;
}
.job-description {
margin-bottom: 2rem;
}
.section h2 {
color: var(--light);
border-bottom: 2px solid var(--gray-light);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
.section h3 {
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.section p {
margin-bottom: 1rem;
color: var(--light);
}
.section ul,
.section ol {
margin-left: 1.5rem;
margin-bottom: 1.5rem;
}
.section li {
margin-bottom: 0.5rem;
position: relative;
}
.highlight-box {
background-color: rgba(16, 76, 186, 0.05);
border-left: 4px solid var(--primary);
padding: 1.5rem;
border-radius: 0 6px 6px 0;
margin: 2rem 0;
}
/* Similar Positions */
.similar-positions {
background-color: var(--light);
padding: 4rem 0;
}
.details-section {
margin-bottom: 2.5rem;
}
.details-section h2 {
color: var(--primary);
border-bottom: 2px solid var(--gray-light);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
.details-section h3 {
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.details-section p {
margin-bottom: 1rem;
color: var(--dark);
}
.details-section ul,
.details-section ol {
margin-left: 1.5rem;
margin-bottom: 1.5rem;
}
.details-section li {
margin-bottom: 0.5rem;
position: relative;
list-style: disc inside !important;
}
.data-table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.data-table th,
.data-table td {
border: 1px solid var(--primary-light);
padding: 0.75rem;
text-align: left;
}
.data-table th {
background-color: var(--light);
font-weight: 600;
}
.positions-grid-similar {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
.position-card-similar {
padding: 2rem;
height: 100%;
display: flex;
flex-direction: column;
}
.position-type-similar {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1rem;
align-self: flex-start;
}
.type-remote-similar {
background-color: rgba(16, 185, 129, 0.1);
color: var(--secondary);
}
.type-hybrid-similar {
background-color: rgba(245, 158, 11, 0.1);
color: var(--warning);
}
.type-onsite-similar {
background-color: rgba(59, 130, 246, 0.1);
color: var(--primary);
}
.position-meta-similar {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: auto;
padding-top: 1.5rem;
}
.meta-item-similar {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--gray);
font-size: 0.9rem;
}
/* Responsive Styles */
@media (max-width: 992px) {
.positions-grid-similar {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.job-meta-similar {
gap: 1rem;
}
}
@media (max-width: 576px) {
.positions-grid-similar {
grid-template-columns: 1fr;
}
.job-details-grid {
grid-template-columns: 1fr;
}
}
/* Process Steps */
.process-steps-similar {
margin-top: 3rem;
}
.step-similar {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
}
.step-number-similar {
width: 32px;
height: 32px;
border-radius: 50%;
background-color: var(--primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
flex-shrink: 0;
}
.step-content-similar h4 {
margin-bottom: 0.5rem;
}
.step-content-similar p {
color: var(--gray);
font-size: 0.9rem;
}
.mt-3 {
margin-top: 2rem !important;
}
/* Search box in hero */
.search-box {
display: flex;
gap: .5rem;
max-width: 680px;
width: 100%;
margin-bottom: 3rem;
}
.search-box input {
flex: 1;
padding: .9rem 1rem;
border-radius: 999px;
border: none;
background: rgba(255, 255, 255, 0.12);
color: var(--light);
outline: none;
margin-bottom: 0;
}
.search-box input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.search-box button {
border-radius: 999px;
border: none;
padding: .7rem 1.5rem;
cursor: pointer;
background: var(--light);
color: var(--primary);
font-weight: 600;
transition: var(--transition);
margin-bottom: 0;
}
.search-box button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Quick links (top cards) */
.quick-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin: 3rem 0 4rem 0;
}
.quick-link-card {
background: var(--light);
border-radius: 12px;
padding: 2rem 1.5rem;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
margin-bottom: 0;
}
.quick-link-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.quick-link-icon {
width: 60px;
height: 60px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: linear-gradient(135deg, rgba(16, 76, 186, 0.1), rgba(16, 76, 186, 0.05));
color: var(--primary);
font-size: 1.4rem;
transition: var(--transition);
}
.quick-link-card:hover .quick-link-icon {
transform: scale(1.1);
background: linear-gradient(135deg, rgba(16, 76, 186, 0.15), rgba(16, 76, 186, 0.1));
}
.quick-link-title {
margin: 0 0 0.75rem 0;
color: var(--dark);
font-size: 1.2rem;
font-weight: 600;
}
.quick-link-description {
color: var(--secondary);
margin-bottom: 1.5rem;
line-height: 1.5;
font-size: 0.95rem;
}
.quick-link-button {
display: inline-block;
margin-top: 0.5rem;
padding: 0.6rem 1.2rem;
border-radius: 8px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: var(--light);
font-weight: 600;
text-decoration: none;
transition: var(--transition);
border: none;
cursor: pointer;
}
.quick-link-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 76, 186, 0.3);
}
/* Guides grid / cards */
.guides-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
margin-bottom: 4rem;
}
.guide-card {
background: var(--light);
border-radius: var(--radius);
padding: 2rem;
box-shadow: 0 8px 24px rgba(16, 76, 186, 0.08);
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
margin-bottom: 0;
height: 100%;
display: flex;
flex-direction: column;
}
.guide-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(16, 76, 186, 0.12);
}
.guide-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--primary), var(--primary-light));
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease;
}
.guide-card:hover::before {
transform: scaleY(1);
}
.guide-image {
font-size: 1.8rem;
color: var(--primary);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(16, 76, 186, 0.08);
margin-bottom: 1rem;
transition: var(--transition);
}
.guide-card:hover .guide-image {
transform: scale(1.1);
background: rgba(16, 76, 186, 0.12);
}
.guide-content {
flex: 1;
display: flex;
flex-direction: column;
}
.guide-category {
display: inline-block;
background: rgba(16, 76, 186, 0.1);
color: var(--primary);
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.8rem;
margin-bottom: 1rem;
align-self: flex-start;
}
.guide-title {
margin: 0 0 0.75rem 0;
color: var(--dark);
font-size: 1.15rem;
font-weight: 600;
line-height: 1.4;
}
.guide-description {
color: var(--secondary);
margin-bottom: 1.5rem;
line-height: 1.5;
font-size: 0.95rem;
flex: 1;
}
.guide-meta {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
color: var(--secondary);
gap: 1rem;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.guide-meta span {
display: flex;
align-items: center;
gap: 0.3rem;
}
/* Getting started steps */
.getting-started {
margin: 3rem 0 4rem 0;
}
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.step-card {
background: var(--light);
padding: 2rem 1.5rem;
border-radius: 12px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
margin-bottom: 0;
}
.step-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.step-number {
width: 50px;
height: 50px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: var(--light);
font-weight: 700;
margin-bottom: 1rem;
font-size: 1.2rem;
transition: var(--transition);
}
.step-card:hover .step-number {
transform: scale(1.1);
}
.step-title {
margin: 0 0 0.75rem 0;
color: var(--dark);
font-size: 1.1rem;
font-weight: 600;
}
.step-description {
color: var(--secondary);
margin-bottom: 1.5rem;
line-height: 1.5;
font-size: 0.95rem;
}
.step-button {
display: inline-block;
padding: 0.6rem 1.2rem;
border-radius: 8px;
background: var(--primary);
color: var(--light);
font-weight: 600;
text-decoration: none;
transition: var(--transition);
border: none;
cursor: pointer;
margin-bottom: 0;
}
.step-button:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 76, 186, 0.3);
}
/* SDKs & Community sections */
.sdk-section,
.community-section {
margin: 3rem 0 4rem 0;
}
.sdk-grid,
.community-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin-top: 2rem;
margin-bottom: 1rem;
}
.sdk-card,
.community-card {
background: var(--light);
padding: 2rem 1.5rem;
border-radius: 12px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
margin-bottom: 0;
}
.sdk-card:hover,
.community-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.sdk-icon,
.community-icon {
width: 70px;
height: 70px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
background: rgba(16, 76, 186, 0.08);
color: var(--primary);
font-size: 1.8rem;
transition: var(--transition);
}
.sdk-card:hover .sdk-icon,
.community-card:hover .community-icon {
transform: scale(1.1);
background: rgba(16, 76, 186, 0.12);
}
.sdk-title,
.community-title {
margin: 0 0 0.75rem 0;
color: var(--dark);
font-size: 1.15rem;
font-weight: 600;
}
.sdk-description,
.community-description {
color: var(--secondary);
margin-bottom: 1.5rem;
line-height: 1.5;
font-size: 0.95rem;
}
.sdk-links {
display: flex;
gap: 0.5rem;
justify-content: center;
margin-top: 1rem;
margin-bottom: 0;
}
.sdk-link {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 6px;
background: var(--primary);
color: var(--light);
text-decoration: none;
font-weight: 600;
font-size: 0.85rem;
transition: var(--transition);
margin-bottom: 0;
}
.sdk-link:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
.community-button {
display: inline-block;
padding: 0.6rem 1.2rem;
border-radius: 8px;
background: var(--primary);
color: var(--light);
font-weight: 600;
text-decoration: none;
transition: var(--transition);
border: none;
cursor: pointer;
margin-bottom: 0;
}
.community-button:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(16, 76, 186, 0.3);
}
/* Section header improvements */
.section-header {
margin-bottom: 3rem;
}
.section-title {
margin-bottom: 1rem;
color: var(--primary);
}
.section-description {
margin-bottom: 0;
color: var(--secondary);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Responsive improvements */
@media (max-width: 768px) {
.search-box {
flex-direction: column;
gap: .8rem;
margin-bottom: 2rem;
}
.search-box input {
padding: .8rem 1rem;
border-radius: 12px;
}
.search-box button {
width: 100%;
border-radius: 12px;
padding: 0.8rem;
}
.quick-links {
grid-template-columns: 1fr;
gap: 1rem;
margin: 2rem 0 3rem 0;
}
.guides-grid {
grid-template-columns: 1fr;
gap: 1rem;
margin-bottom: 3rem;
}
.steps {
grid-template-columns: 1fr;
gap: 1rem;
}
.sdk-grid,
.community-cards {
grid-template-columns: 1fr;
gap: 1rem;
}
.section-header {
margin-bottom: 2rem;
}
}
@media (max-width: 480px) {
.guide-card,
.step-card,
.sdk-card,
.community-card {
padding: 1.5rem 1rem;
}
.guide-meta {
flex-direction: column;
gap: 0.5rem;
align-items: flex-start;
}
}
/* Status Content */
.status-content {
padding: 4rem 0;
background-color: var(--light);
}
.status-overview {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-bottom: 3rem;
}
.status-card {
text-align: center;
padding: 2rem 1rem;
transition: var(--transition);
margin-bottom: 0;
}
.status-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
}
.status-indicators {
color: var(--dark);
display: flex;
flex-direction: row;
}
.status-indicators .status-dot {
background-color: var(--accent);
width: 10px;
height: 10px;
border-radius: 100%;
position: relative;
top: 4px;
}
.status-indicator {
width: 12px;
height: 12px;
border-radius: 50%;
margin: 0 auto 1rem;
position: relative;
}
.status-indicator::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 50%;
background: inherit;
opacity: 0.3;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.5);
opacity: 0.1;
}
100% {
transform: scale(1);
opacity: 0.3;
}
}
.status-dot {
background-color: var(--accent);
}
.status-operational {
background-color: var(--accent);
box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
}
.status-degraded {
background-color: var(--highlight);
box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}
.status-outage {
background-color: #ef4444;
box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
}
.status-maintenance {
background-color: var(--primary);
box-shadow: 0 0 10px rgba(16, 76, 186, 0.3);
}
.status-name {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--dark);
font-size: 1.1rem;
}
.status-description {
color: var(--secondary);
font-size: 0.9rem;
margin-bottom: 0;
}
/* Incidents Section */
.incidents-section {
margin-bottom: 3rem;
}
.incident-timeline {
margin-top: 2rem;
position: relative;
}
.incident-timeline::before {
content: '';
position: absolute;
left: 60px;
top: 0;
bottom: 0;
width: 2px;
background: var(--border);
}
.incident-item {
display: flex;
gap: 1.5rem;
padding: 1.5rem 0;
position: relative;
margin-bottom: 0;
}
.incident-item:last-child {
border-bottom: none;
}
.incident-date {
min-width: 120px;
font-weight: 600;
color: var(--primary);
text-align: right;
}
.incident-details {
flex: 1;
padding-left: 2rem;
position: relative;
}
.incident-details::before {
content: '';
position: absolute;
left: -31px;
top: 25px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--primary);
border: 3px solid var(--light);
box-shadow: 0 0 0 2px var(--primary);
}
.incident-details h3 {
margin-bottom: 0.5rem;
color: var(--dark);
font-size: 1.2rem;
}
.incident-status {
display: inline-block;
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.status-resolved {
background-color: rgba(16, 185, 129, 0.1);
color: var(--accent);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.status-monitoring {
background-color: rgba(245, 158, 11, 0.1);
color: var(--highlight);
border: 1px solid rgba(245, 158, 11, 0.2);
}
.status-investigating {
background-color: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.2);
}
.incident-details p {
color: var(--secondary);
line-height: 1.6;
margin-bottom: 0;
}
/* Systems Section */
.systems-section {
margin-bottom: 3rem;
}
.systems-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
margin-top: 2rem;
}
.system-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
transition: var(--transition);
margin-bottom: 0;
}
.system-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.system-info h3 {
margin-bottom: 0.5rem;
color: var(--dark);
font-size: 1.1rem;
}
.system-info p {
color: var(--secondary);
margin-bottom: 0;
font-size: 0.9rem;
}
.system-status {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
}
.system-status span {
color: var(--dark);
font-size: 0.9rem;
}
/* Subscribe Section Improvements */
.status-subscribe {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: var(--light);
padding: 2.5rem;
border-radius: var(--radius);
margin-top: 2rem;
}
.status-subscribe h2 {
color: var(--light);
margin-bottom: 1rem;
}
.status-subscribe p {
color: rgba(255, 255, 255, 0.9);
margin-bottom: 1.5rem;
}
.subscribe-form {
display: flex;
gap: 1rem;
margin-top: 1.5rem;
}
.subscribe-input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 6px;
background: rgba(255, 255, 255, 0.1);
color: var(--light);
font-size: 1rem;
outline: none;
transition: var(--transition);
}
.subscribe-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.subscribe-input:focus {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
}
.subscribe-btn {
background: var(--light);
color: var(--primary);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.subscribe-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Status Page Specific Responsive Styles */
@media (max-width: 992px) {
.status-overview {
grid-template-columns: repeat(2, 1fr);
}
.systems-grid {
grid-template-columns: 1fr;
}
.incident-timeline::before {
left: 30px;
}
.incident-date {
min-width: 100px;
text-align: left;
}
.incident-details::before {
left: -21px;
}
}
@media (max-width: 768px) {
.status-content {
padding: 3rem 0;
}
.incident-item {
flex-direction: column;
gap: 0.5rem;
padding: 1.5rem 0;
}
.incident-date {
text-align: left;
font-size: 0.9rem;
}
.incident-details {
padding-left: 0;
}
.incident-details::before {
display: none;
}
.incident-timeline::before {
display: none;
}
.subscribe-form {
flex-direction: column;
}
.subscribe-btn {
width: 100%;
}
}
@media (max-width: 576px) {
.status-overview {
grid-template-columns: 1fr;
gap: 1rem;
}
.status-card {
padding: 1.5rem 1rem;
}
.systems-grid {
gap: 1rem;
}
.system-card {
padding: 1.25rem;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.system-status {
align-self: flex-end;
}
.status-subscribe {
padding: 2rem 1.5rem;
}
}
/* Additional Utility Classes for Status Page */
.status-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
}
.badge-operational {
background: rgba(16, 185, 129, 0.1);
color: var(--accent);
border: 1px solid rgba(16, 185, 129, 0.2);
}
.badge-degraded {
background: rgba(245, 158, 11, 0.1);
color: var(--highlight);
border: 1px solid rgba(245, 158, 11, 0.2);
}
.badge-outage {
background: rgba(239, 68, 68, 0.1);
color: #ef4444;
border: 1px solid rgba(239, 68, 68, 0.2);
}
/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
.status-indicator::after {
animation: none;
}
.status-card:hover,
.system-card:hover,
.subscribe-btn:hover {
transform: none;
}
}
/* 404 Hero Styles */
.error-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--light);
padding: 8rem 0 6rem;
position: relative;
overflow: hidden;
min-height: 70vh;
display: flex;
align-items: center;
}
.error-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.error-content {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
z-index: 1;
gap: 4rem;
}
.error-text {
flex: 1;
}
.error-text h1 {
font-size: 8rem;
margin-bottom: 1rem;
line-height: 1;
color: var(--light);
background: linear-gradient(135deg, var(--light) 0%, rgba(255, 255, 255, 0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.error-text h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
color: var(--light);
}
.error-text p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.3rem;
margin-bottom: 2.5rem;
max-width: 500px;
}
.error-actions {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.error-illustration {
flex: 1;
position: relative;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
/* Floating Elements */
.floating-elements {
position: absolute;
width: 100%;
height: 100%;
}
.floating-element {
transform-style: preserve-3d;
animation: float 8s ease-in-out infinite;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotateX(0) rotateY(0);
}
25% {
transform: translateY(-20px) rotateX(5deg) rotateY(5deg);
}
50% {
transform: translateY(-10px) rotateX(0) rotateY(10deg);
}
75% {
transform: translateY(-15px) rotateX(5deg) rotateY(5deg);
}
}
.floating-element-404 {
position: absolute;
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--light);
font-size: 1.5rem;
animation: float-404 6s ease-in-out infinite;
}
.element-1 {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.element-2 {
top: 60%;
right: 15%;
animation-delay: 2s;
}
.element-3 {
bottom: 20%;
left: 20%;
animation-delay: 4s;
}
@keyframes float-404 {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(10deg);
}
}
/* Error Graphic */
.error-graphic {
position: relative;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.graphic-circle {
position: absolute;
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
animation: pulse 2s ease-in-out infinite;
}
.circle-1 {
width: 200px;
height: 200px;
animation-delay: 0s;
}
.circle-2 {
width: 250px;
height: 250px;
animation-delay: 0.5s;
}
.circle-3 {
width: 300px;
height: 300px;
animation-delay: 1s;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.1);
opacity: 0.7;
}
}
.error-number {
font-size: 5rem;
font-weight: 700;
color: var(--light);
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* Responsive Design */
@media (max-width: 992px) {
.error-content {
flex-direction: column;
text-align: center;
}
.error-text h1 {
font-size: 6rem;
}
.error-text h2 {
font-size: 2rem;
}
.error-actions {
justify-content: center;
}
.error-illustration {
height: 300px;
}
.error-graphic {
width: 250px;
height: 250px;
}
.error-number {
font-size: 4rem;
}
}
@media (max-width: 768px) {
.error-hero {
padding: 6rem 0 4rem;
min-height: 60vh;
}
.error-text h1 {
font-size: 4rem;
}
.error-text h2 {
font-size: 1.8rem;
}
.error-text p {
font-size: 1.1rem;
}
.error-actions {
flex-direction: column;
align-items: center;
}
.error-actions .btn {
width: 100%;
max-width: 300px;
}
.error-illustration {
height: 250px;
}
.error-graphic {
width: 200px;
height: 200px;
}
.error-number {
font-size: 3rem;
}
.floating-element-404 {
width: 40px;
height: 40px;
font-size: 1.2rem;
}
}
@media (max-width: 576px) {
.error-text h1 {
font-size: 3rem;
}
.error-text h2 {
font-size: 1.5rem;
}
.error-text p {
font-size: 1rem;
}
.error-graphic {
width: 150px;
height: 150px;
}
.error-number {
font-size: 2.5rem;
}
}
/* Coming Soon Hero Section */
.coming-soon-hero {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--light);
padding: 8rem 0 6rem;
position: relative;
overflow: hidden;
min-height: 100vh;
display: flex;
align-items: center;
text-align: center;
}
.coming-soon-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml;utf8,');
background-size: cover;
}
.coming-soon-content {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.coming-soon-hero h1 {
font-size: 4rem;
margin-bottom: 1.5rem;
line-height: 1.2;
color: var(--light);
background: linear-gradient(135deg, var(--light) 0%, rgba(255, 255, 255, 0.8) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.coming-soon-hero p {
color: rgba(255, 255, 255, 0.85);
font-size: 1.3rem;
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
/* Countdown Timer */
.countdown-container {
margin: 3rem 0;
}
.countdown {
display: flex;
justify-content: center;
gap: 1.5rem;
margin-bottom: 2rem;
}
.countdown-item {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 1.5rem;
min-width: 100px;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.countdown-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--light);
margin-bottom: 0.5rem;
font-family: "Playfair Display", serif;
}
.countdown-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
text-transform: uppercase;
letter-spacing: 1px;
}
/* Notify Form */
.notify-form {
max-width: 500px;
margin: 0 auto;
}
.form-input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.form-input:focus {
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.5);
}
.form-note {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 1rem;
}
/* Feature Preview */
.feature-preview {
padding: 5rem 0;
background: var(--gray-light);
}
.feature-card h3 {
margin-bottom: 1rem;
color: var(--primary);
}
.feature-card p {
color: var(--secondary);
margin-bottom: 1.5rem;
}
/* Responsive Design for Coming Soon Page */
@media (max-width: 1200px) {
.coming-soon-hero h1 {
font-size: 3.5rem;
}
}
@media (max-width: 992px) {
.coming-soon-hero {
padding: 6rem 0 4rem;
}
.coming-soon-hero h1 {
font-size: 3rem;
}
.countdown {
gap: 1rem;
}
.countdown-item {
min-width: 80px;
padding: 1.25rem;
}
.countdown-number {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.countdown {
flex-wrap: wrap;
}
.countdown-item {
flex: 1;
min-width: 70px;
}
.feature-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.coming-soon-hero {
padding: 5rem 0 3rem;
}
.coming-soon-hero h1 {
font-size: 2.5rem;
}
.coming-soon-hero p {
font-size: 1.1rem;
}
.countdown {
gap: 0.5rem;
}
.countdown-item {
padding: 1rem;
}
.countdown-number {
font-size: 1.5rem;
}
}
.use-case-card li {
list-style-type: disc !important;
}
/* Booking Content */
.booking-content {
padding: 4rem 0;
background-color: white;
}
.booking-grid {
display: grid;
/*grid-template-columns: 1fr 1fr;*/
grid-template-columns: 3.2fr 1fr;
gap: 3rem;
}
.booking-form {
background: var(--light);
border-radius: var(--radius);
padding: 2.5rem;
box-shadow: var(--shadow-lg);
}
.form-section {
margin-bottom: 2.5rem;
}
.form-section h3 {
border-bottom: 2px solid var(--gray-light);
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
.checkbox-label {
font-size: 0.9rem;
color: var(--secondary);
}
.checkbox-label a {
color: var(--primary);
text-decoration: none;
}
.checkbox-label a:hover {
text-decoration: underline;
}
/* Calendar Section */
.calendar-section {
margin-bottom: 2.5rem;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.calendar-nav {
display: flex;
gap: 0.5rem;
}
.calendar-nav-btn {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-light);
border: none;
cursor: pointer;
transition: var(--transition);
}
.calendar-nav-btn:hover {
background: var(--primary-light);
color: white;
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.calendar-day-header {
text-align: center;
font-weight: 600;
color: var(--primary);
padding: 0.5rem;
font-size: 0.9rem;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
font-weight: 500;
}
.calendar-day:hover {
background: var(--gray-light);
}
.calendar-day.selected {
background: var(--primary);
color: white;
}
.calendar-day.disabled {
color: var(--gray-medium);
cursor: not-allowed;
}
.calendar-day.disabled:hover {
background: transparent;
}
.calendar-day.today {
border: 2px solid var(--primary);
}
/* Time Slots */
.time-slots {
margin-top: 1.5rem;
}
.time-slots h4 {
margin-bottom: 1rem;
}
.time-slots-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.time-slot {
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: 6px;
text-align: center;
cursor: pointer;
transition: var(--transition);
font-weight: 500;
}
.time-slot:hover {
border-color: var(--primary);
background: rgba(16, 76, 186, 0.05);
}
.time-slot.selected {
background: var(--primary);
color: white;
border-color: var(--primary);
}
.time-slot.disabled {
color: var(--gray-medium);
cursor: not-allowed;
background: var(--gray-light);
}
.time-slot.disabled:hover {
border-color: var(--border);
background: var(--gray-light);
}
/* Demo Summary */
.demo-summary {
background: var(--gray-light);
border-radius: var(--radius);
padding: 2.5rem;
height: fit-content;
position: sticky;
top: 2rem;
}
.demo-summary h2 {
margin-bottom: 1.5rem;
}
.demo-features {
list-style: none;
margin: 2rem 0;
}
.demo-features li {
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
}
.demo-features i {
color: var(--accent);
margin-right: 1rem;
margin-top: 0.2rem;
flex-shrink: 0;
}
.summary-details {
background: white;
border-radius: var(--radius);
padding: 1.5rem;
margin-top: 2rem;
box-shadow: var(--shadow);
}
.summary-item {
display: flex;
justify-content: space-between;
padding: 1rem 0;
border-bottom: 1px solid var(--gray-light);
}
.summary-item:last-child {
border-bottom: none;
}
.summary-label {
color: var(--secondary);
}
.summary-value {
font-weight: 600;
}
/* Success Message */
.success-message {
background-color: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--accent);
padding: 1rem;
margin-bottom: 1.5rem;
border-radius: 0 4px 4px 0;
display: none;
}
.success-message i {
color: var(--accent);
margin-right: 0.5rem;
}
/* Responsive Design for Booking Page */
@media (max-width: 992px) {
.booking-grid {
grid-template-columns: 1fr;
}
.demo-summary {
position: static;
}
.form-row {
grid-template-columns: 1fr;
}
.time-slots-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.booking-form {
padding: 2rem;
margin-left: -20px;
}
.time-slots-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 576px) {
.booking-content {
padding: 2rem 0;
}
.booking-form {
padding: 1.5rem;
margin-left: -20px;
}
.calendar-grid {
gap: 0.25rem;
}
}