:root {
/* default height; JS below will auto-calc on load/resizes */
--nav-h: 64px;
/* Primitive Color Tokens */
--color-white: rgba(255, 255, 255, 1);
--color-black: rgba(0, 0, 0, 1);
--color-cream-50: rgba(252, 252, 249, 1);
--color-cream-100: rgba(255, 255, 253, 1);
--color-gray-200: rgba(245, 245, 245, 1);
--color-gray-300: rgba(167, 169, 169, 1);
--color-gray-400: rgba(119, 124, 124, 1);
--color-slate-500: rgba(98, 108, 113, 1);
--color-brown-600: rgba(94, 82, 64, 1);
--color-charcoal-700: rgba(31, 33, 33, 1);
--color-charcoal-800: rgba(38, 40, 40, 1);
--color-slate-900: rgba(19, 52, 59, 1);
--color-teal-300: rgba(96, 165, 250, 1);
--color-teal-400: rgba(59, 130, 246, 1);
--color-teal-500: rgba(29, 78, 216, 1);
--color-teal-600: rgba(30, 64, 175, 1);
--color-teal-700: rgba(30, 58, 138, 1);
--color-teal-800: rgba(23, 37, 84, 1);
--color-red-400: rgba(255, 84, 89, 1);
--color-red-500: rgba(192, 21, 47, 1);
--color-orange-400: rgba(230, 129, 97, 1);
--color-orange-500: rgba(168, 75, 47, 1);
/* RGB versions for opacity control */
--color-brown-600-rgb: 94, 82, 64;
--color-teal-500-rgb: 29, 78, 216;
--color-slate-900-rgb: 19, 52, 59;
--color-slate-500-rgb: 98, 108, 113;
--color-red-500-rgb: 192, 21, 47;
--color-red-400-rgb: 255, 84, 89;
--color-orange-500-rgb: 168, 75, 47;
--color-orange-400-rgb: 230, 129, 97;
--color-primary-rgb: 29, 78, 216;
/* Background color tokens (Light Mode) */
--color-bg-1: rgba(59, 130, 246, 0.08);
/* Light blue */
--color-bg-2: rgba(245, 158, 11, 0.08);
/* Light yellow */
--color-bg-3: rgba(34, 197, 94, 0.08);
/* Light green */
--color-bg-4: rgba(239, 68, 68, 0.08);
/* Light red */
--color-bg-5: rgba(147, 51, 234, 0.08);
/* Light purple */
--color-bg-6: rgba(249, 115, 22, 0.08);
/* Light orange */
--color-bg-7: rgba(236, 72, 153, 0.08);
/* Light pink */
--color-bg-8: rgba(6, 182, 212, 0.08);
/* Light cyan */
/* Semantic Color Tokens (Light Mode) */
--color-background: var(--color-cream-50);
--color-surface: var(--color-cream-100);
--color-text: var(--color-slate-900);
--color-text-secondary: var(--color-slate-500);
--color-text-light: var(--color-slate-900);
--color-text-dark: var(--color-slate-900);
--color-primary: var(--color-teal-500);
--color-primary-hover: var(--color-teal-600);
--color-primary-active: var(--color-teal-700);
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
--color-btn-primary-text: var(--color-cream-50);
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
--color-error: var(--color-red-500);
--color-success: var(--color-teal-500);
--color-warning: var(--color-orange-500);
--color-info: var(--color-slate-500);
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
--color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);
/* Common style patterns */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--focus-outline: 2px solid var(--color-primary);
--status-bg-opacity: 0.15;
--status-border-opacity: 0.25;
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
/* RGB versions for opacity control */
--color-success-rgb: 29, 78, 216;
--color-error-rgb: 192, 21, 47;
--color-warning-rgb: 168, 75, 47;
--color-info-rgb: 98, 108, 113;
/* Typography */
--font-family-base: "FKGroteskNeue", "Geist", "Inter", -apple-system,
BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-family-mono: "Berkeley Mono", ui-monospace, SFMono-Regular, Menlo,
Monaco, Consolas, monospace;
--font-size-xs: clamp(10px, 2vw, 11px);
--font-size-sm: clamp(11px, 2.5vw, 12px);
--font-size-base: clamp(12px, 3vw, 14px);
--font-size-md: clamp(12px, 3vw, 14px);
--font-size-lg: clamp(14px, 3.5vw, 16px);
--font-size-xl: clamp(16px, 4vw, 18px);
--font-size-2xl: clamp(18px, 4.5vw, 20px);
--font-size-3xl: clamp(20px, 5vw, 24px);
--font-size-4xl: clamp(24px, 6vw, 30px);
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 550;
--font-weight-bold: 600;
--line-height-tight: 1.2;
--line-height-normal: 1.5;
--letter-spacing-tight: -0.01em;
/* Fluid Spacing */
--space-0: 0;
--space-1: 1px;
--space-2: 2px;
--space-4: clamp(3px, 1vw, 4px);
--space-6: clamp(4px, 1.5vw, 6px);
--space-8: clamp(6px, 2vw, 8px);
--space-10: clamp(8px, 2.5vw, 10px);
--space-12: clamp(10px, 3vw, 12px);
--space-14: clamp(12px, 3.5vw, 14px);
--space-16: clamp(12px, 4vw, 16px);
--space-18: clamp(14px, 4.5vw, 18px);
--space-20: clamp(16px, 5vw, 20px);
--space-22: clamp(18px, 5.5vw, 22px);
--space-24: clamp(20px, 6vw, 24px);
--space-28: clamp(24px, 7vw, 28px);
--space-32: clamp(28px, 8vw, 32px);
/* Border Radius */
--radius-sm: 6px;
--radius-base: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-full: 9999px;
/* Shadows */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
0 2px 4px -1px rgba(0, 0, 0, 0.02);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
0 4px 6px -2px rgba(0, 0, 0, 0.02);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
inset 0 -1px 0 rgba(0, 0, 0, 0.03);
/* Animation */
--duration-fast: 150ms;
--duration-normal: 250ms;
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
/* Layout */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
/* Navigation Colors */
--nav-bg: #1f2937;
--nav-text: #ffffff;
--nav-text-hover: #f3f4f6;
--nav-border: #374151;
--nav-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Dark mode colors */
@media (prefers-color-scheme: dark) {
:root {
/* RGB versions for opacity control (Dark Mode) */
--color-gray-400-rgb: 119, 124, 124;
--color-teal-300-rgb: 96, 165, 250;
--color-gray-300-rgb: 167, 169, 169;
--color-gray-200-rgb: 245, 245, 245;
--color-primary-rgb: 96, 165, 250;
/* Background color tokens (Dark Mode) */
--color-bg-1: rgba(29, 78, 216, 0.15);
/* Dark blue */
--color-bg-2: rgba(180, 83, 9, 0.15);
/* Dark yellow */
--color-bg-3: rgba(21, 128, 61, 0.15);
/* Dark green */
--color-bg-4: rgba(185, 28, 28, 0.15);
/* Dark red */
--color-bg-5: rgba(107, 33, 168, 0.15);
/* Dark purple */
--color-bg-6: rgba(194, 65, 12, 0.15);
/* Dark orange */
--color-bg-7: rgba(190, 24, 93, 0.15);
/* Dark pink */
--color-bg-8: rgba(8, 145, 178, 0.15);
/* Dark cyan */
/* Semantic Color Tokens (Dark Mode) */
--color-background: var(--color-charcoal-700);
--color-surface: var(--color-charcoal-800);
--color-text: var(--color-gray-200);
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.9);
--color-text-light: var(--color-gray-200);
--color-text-dark: var(--color-gray-200);
--color-primary: var(--color-teal-300);
--color-primary-hover: var(--color-teal-400);
--color-primary-active: var(--color-teal-800);
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
--color-error: var(--color-red-400);
--color-success: var(--color-teal-300);
--color-warning: var(--color-orange-400);
--color-info: var(--color-gray-300);
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
--color-btn-primary-text: var(--color-slate-900);
--color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
--button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
/* Common style patterns - updated for dark mode */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--focus-outline: 2px solid var(--color-primary);
--status-bg-opacity: 0.15;
--status-border-opacity: 0.25;
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
/* RGB versions for dark mode */
--color-success-rgb: var(--color-teal-300-rgb);
--color-error-rgb: var(--color-red-400-rgb);
--color-warning-rgb: var(--color-orange-400-rgb);
--color-info-rgb: var(--color-gray-300-rgb);
}
}
/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
/* RGB versions for opacity control (dark mode) */
--color-gray-400-rgb: 119, 124, 124;
--color-teal-300-rgb: 96, 165, 250;
--color-gray-300-rgb: 167, 169, 169;
--color-gray-200-rgb: 245, 245, 245;
/* Colorful background palette - Dark Mode */
--color-bg-1: rgba(29, 78, 216, 0.15);
/* Dark blue */
--color-bg-2: rgba(180, 83, 9, 0.15);
/* Dark yellow */
--color-bg-3: rgba(21, 128, 61, 0.15);
/* Dark green */
--color-bg-4: rgba(185, 28, 28, 0.15);
/* Dark red */
--color-bg-5: rgba(107, 33, 168, 0.15);
/* Dark purple */
--color-bg-6: rgba(194, 65, 12, 0.15);
/* Dark orange */
--color-bg-7: rgba(190, 24, 93, 0.15);
/* Dark pink */
--color-bg-8: rgba(8, 145, 178, 0.15);
/* Dark cyan */
/* Semantic Color Tokens (Dark Mode) */
--color-background: var(--color-charcoal-700);
--color-surface: var(--color-charcoal-800);
--color-text: var(--color-gray-200);
--color-text-secondary: rgba(var(--color-gray-300-rgb), 0.9);
--color-text-light: var(--color-gray-200);
--color-text-dark: var(--color-gray-200);
--color-primary: var(--color-teal-300);
--color-primary-hover: var(--color-teal-400);
--color-primary-active: var(--color-teal-800);
--color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
--color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
--color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
--color-border: rgba(var(--color-gray-400-rgb), 0.3);
--color-error: var(--color-red-400);
--color-success: var(--color-teal-300);
--color-warning: var(--color-orange-400);
--color-info: var(--color-gray-300);
--color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
--color-btn-primary-text: var(--color-slate-900);
--color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
--color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
--shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
inset 0 -1px 0 rgba(0, 0, 0, 0.15);
--color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
--color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);
/* Common style patterns - updated for dark mode */
--focus-ring: 0 0 0 3px var(--color-focus-ring);
--focus-outline: 2px solid var(--color-primary);
--status-bg-opacity: 0.15;
--status-border-opacity: 0.25;
--select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
--select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
/* RGB versions for dark mode */
--color-success-rgb: var(--color-teal-300-rgb);
--color-error-rgb: var(--color-red-400-rgb);
--color-warning-rgb: var(--color-orange-400-rgb);
--color-info-rgb: var(--color-gray-300-rgb);
}
[data-color-scheme="light"] {
/* RGB versions for opacity control (light mode) */
--color-brown-600-rgb: 94, 82, 64;
--color-teal-500-rgb: 29, 78, 216;
--color-slate-900-rgb: 19, 52, 59;
/* Semantic Color Tokens (Light Mode) */
--color-background: var(--color-cream-50);
--color-surface: var(--color-cream-100);
--color-text: var(--color-slate-900);
--color-text-secondary: var(--color-slate-500);
--color-primary: var(--color-teal-500);
--color-primary-hover: var(--color-teal-600);
--color-primary-active: var(--color-teal-700);
--color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
--color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
--color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
--color-border: rgba(var(--color-brown-600-rgb), 0.2);
--color-btn-primary-text: var(--color-cream-50);
--color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
--color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
--color-error: var(--color-red-500);
--color-success: var(--color-teal-500);
--color-warning: var(--color-orange-500);
--color-info: var(--color-slate-500);
--color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
/* RGB versions for light mode */
--color-success-rgb: var(--color-teal-500-rgb);
--color-error-rgb: var(--color-red-500-rgb);
--color-warning-rgb: var(--color-orange-500-rgb);
--color-info-rgb: var(--color-slate-500-rgb);
}
/* Base styles */
html {
font-size: var(--font-size-base);
font-family: var(--font-family-base);
line-height: var(--line-height-normal);
color: var(--color-text);
background-color: var(--color-background);
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Remove body padding-top to eliminate space between navbar and hero */
#app-main {
padding-top: 0;
/* Keep smooth anchor jumps with fixed header */
scroll-padding-top: var(--nav-h);
flex: 1;
display: flex;
flex-direction: column;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* Performance optimizations */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* High contrast support */
@media (prefers-contrast: high) {
.professional-card {
border-width: 2px;
border-color: var(--color-text);
}
.btn {
border-width: 2px;
}
}
/* Dark mode support detection */
@media (prefers-color-scheme: dark) {
:root {
--color-white: rgba(30, 30, 30, 1);
}
}
/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
color: var(--color-text);
letter-spacing: var(--letter-spacing-tight);
}
h1 {
font-size: var(--font-size-4xl);
}
h2 {
font-size: var(--font-size-3xl);
}
h3 {
font-size: var(--font-size-2xl);
}
h4 {
font-size: var(--font-size-xl);
}
h5 {
font-size: var(--font-size-lg);
}
h6 {
font-size: var(--font-size-md);
}
/* ===== Apple-Style Navigation ===== */
/* FIXED NAVBAR */
#site-nav,
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10000;
background: #0b0b0b;
box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0;
height: 64px;
width: 100vw;
/* Ensure navbar stays fixed and visible */
position: fixed !important;
top: 0 !important;
z-index: 10000 !important;
}
/* Navigation is now always visible and sticky */
/* Optional: account for iOS notch */
@supports (padding: max(0px)) {
#site-nav {
padding-top: env(safe-area-inset-top);
}
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin: 0;
padding: 0 32px;
max-width: 1400px;
margin: 0 auto;
}
.logo {
font-weight: 700;
font-size: 24px;
letter-spacing: 1px;
text-decoration: none;
color: #fff;
}
/* Hamburger button container */
.hamburger-btn {
position: relative;
width: 35px;
height: 30px;
cursor: pointer;
border: none;
background: none;
display: none;
align-items: center;
justify-content: center;
z-index: 1100;
}
/* Hamburger lines */
.hamburger-btn .line {
position: absolute;
width: 30px;
height: 3px;
background-color: #fff;
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Positions for hamburger lines */
.line1 {
top: 6px;
}
.line2 {
top: 14px;
}
.line3 {
top: 22px;
}
/* Transform hamburger lines to X on active */
.hamburger-btn.active .line1 {
transform: rotate(45deg) translate(6px, 6px);
}
.hamburger-btn.active .line2 {
opacity: 0;
}
.hamburger-btn.active .line3 {
transform: rotate(-45deg) translate(6px, -6px);
}
.nav-menu {
list-style: none;
display: flex;
gap: 32px;
margin: 0;
padding: 0;
}
.nav-menu li a {
text-decoration: none;
color: #fff;
font-size: 16px;
font-weight: 500;
padding: 8px 18px;
border-radius: 6px;
transition: background 0.22s, color 0.22s;
}
.nav-menu li a:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--color-primary);
}
.nav-menu li a.active {
background: rgba(255, 255, 255, 0.08);
color: var(--color-primary);
}
.nav-link {
transition: color 0.2s, background 0.2s;
}
.nav-link:hover {
color: #1cbfff;
background: #222;
}
/* Mobile Responsive */
@media (max-width: 800px) {
.navbar {
padding: 0;
}
.nav-container {
padding: 0 20px;
}
.logo {
font-size: 20px;
}
/* Ensure navigation is always visible on mobile for better UX */
.navbar.nav-hidden {
top: 0;
}
.hamburger-btn {
display: flex;
}
/* Dropdown menu styling */
.nav-menu {
position: fixed;
top: 64px;
left: 0;
right: 0;
width: 100%;
max-height: calc(100vh - 64px);
background-color: #0b0b0b;
border-top: 1px solid rgba(255, 255, 255, 0.1);
overflow-y: auto;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
z-index: 1500;
flex-direction: column;
padding: 0;
gap: 0;
}
.nav-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Menu item styles */
.nav-menu li a {
display: block;
padding: 16px 24px;
color: #fff;
font-weight: 500;
font-size: 16px;
text-decoration: none;
transition: background-color 0.2s ease;
text-align: left;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-menu li a:hover,
.nav-menu li a:focus {
background-color: rgba(255, 255, 255, 0.05);
color: var(--color-primary);
outline: none;
}
.nav-menu li a.active {
background-color: rgba(var(--color-primary-rgb), 0.1);
color: var(--color-primary);
}
/* Overlay behind menu */
.menu-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
z-index: 1400;
}
.menu-overlay.active {
opacity: 1;
visibility: visible;
}
}
/* Extra small screens */
@media (max-width: 480px) {
.navbar {
padding: 0;
}
.nav-container {
padding: 0 16px;
}
.logo {
font-size: 18px;
}
.nav-menu li a {
padding: 14px 20px;
font-size: 15px;
}
}
p {
margin: 0 0 var(--space-16) 0;
}
a {
color: var(--color-primary);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-standard);
}
a:hover {
color: var(--color-primary-hover);
}
code,
pre {
font-family: var(--font-family-mono);
font-size: calc(var(--font-size-base) * 0.95);
background-color: var(--color-secondary);
border-radius: var(--radius-sm);
}
code {
padding: var(--space-1) var(--space-4);
}
pre {
padding: var(--space-16);
margin: var(--space-16) 0;
overflow: auto;
border: 1px solid var(--color-border);
}
pre code {
background: none;
padding: 0;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--space-8) var(--space-16);
border-radius: var(--radius-base);
font-size: var(--font-size-base);
font-weight: 500;
line-height: 1.5;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-standard);
border: none;
text-decoration: none;
position: relative;
}
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.btn--primary {
background: var(--color-primary);
color: var(--color-btn-primary-text);
}
.btn--primary:hover {
background: var(--color-primary-hover);
}
.btn--primary:active {
background: var(--color-primary-active);
}
/* Hero CTA Button - Custom Blue Color and Compact Size */
/* Hero CTA Button - Custom Blue Color and Compact Size */
.btn--hero-join {
background: #1d4ed8 !important;
color: #ffffff !important;
padding: 0.75rem 1.5rem !important;
/* Compact padding */
font-size: 15px !important;
border-radius: 9999px !important;
/* Full rounded corners (pill shape) */
white-space: nowrap;
box-shadow: 0 4px 6px -1px rgba(29, 78, 216, 0.3), 0 2px 4px -1px rgba(29, 78, 216, 0.15);
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn--hero-join:hover {
background: #1e40af !important;
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(29, 78, 216, 0.4), 0 4px 6px -2px rgba(29, 78, 216, 0.2);
}
.btn--hero-join:active {
background: #1e3a8a !important;
transform: translateY(0);
}
/* Responsive: Even more compact on mobile */
@media (max-width: 768px) {
.btn--hero-join {
padding: 0.6rem 1.25rem !important;
font-size: 14px !important;
}
}
.btn--secondary {
background: rgba(var(--color-primary-rgb, 6, 182, 212), 0.08);
color: var(--color-primary);
border: 1px solid rgba(var(--color-primary-rgb, 6, 182, 212), 0.2);
font-weight: var(--font-weight-medium);
transition: all var(--duration-normal) var(--ease-standard);
}
.btn--secondary:hover {
background: rgba(var(--color-primary-rgb, 6, 182, 212), 0.12);
border-color: rgba(var(--color-primary-rgb, 6, 182, 212), 0.4);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 6, 182, 212), 0.15);
}
.btn--secondary:active {
background: var(--color-secondary-active);
}
.btn--outline {
background: transparent;
border: 1px solid var(--color-border);
color: var(--color-text);
}
.btn--outline:hover {
background: var(--color-secondary);
}
.btn--sm {
padding: var(--space-4) var(--space-12);
font-size: var(--font-size-sm);
border-radius: var(--radius-sm);
}
.btn--lg {
padding: var(--space-10) var(--space-20);
font-size: var(--font-size-lg);
border-radius: var(--radius-md);
}
.btn--full-width {
width: 100%;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Form elements */
.form-control {
display: block;
width: 100%;
padding: var(--space-8) var(--space-12);
font-size: var(--font-size-md);
line-height: 1.5;
color: var(--color-text);
background-color: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-base);
transition: border-color var(--duration-fast) var(--ease-standard),
box-shadow var(--duration-fast) var(--ease-standard);
}
textarea.form-control {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
}
select.form-control {
padding: var(--space-8) var(--space-12);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: var(--select-caret-light);
background-repeat: no-repeat;
background-position: right var(--space-12) center;
background-size: 16px;
padding-right: var(--space-32);
}
/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
select.form-control {
background-image: var(--select-caret-dark);
}
}
/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
background-image: var(--select-caret-dark);
}
[data-color-scheme="light"] select.form-control {
background-image: var(--select-caret-light);
}
.form-control:focus {
border-color: var(--color-primary);
outline: var(--focus-outline);
}
.form-label {
display: block;
margin-bottom: var(--space-8);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
}
.form-group {
margin-bottom: var(--space-16);
}
/* Compact form groups for filters */
.filters .form-group {
margin-bottom: 0;
}
/* Card component */
.card {
background-color: var(--color-surface);
border-radius: var(--radius-lg);
border: 1px solid var(--color-card-border);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--duration-normal) var(--ease-standard);
}
.card:hover {
box-shadow: var(--shadow-md);
}
.card__body {
padding: var(--space-16);
}
.card__header,
.card__footer {
padding: var(--space-16);
border-bottom: 1px solid var(--color-card-border-inner);
}
/* Status indicators - simplified with CSS variables */
.status {
display: inline-flex;
align-items: center;
padding: var(--space-6) var(--space-12);
border-radius: var(--radius-full);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
}
.status--success {
background-color: rgba(var(--color-success-rgb, 33, 128, 141),
var(--status-bg-opacity));
color: var(--color-success);
border: 1px solid rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}
.status--error {
background-color: rgba(var(--color-error-rgb, 192, 21, 47),
var(--status-bg-opacity));
color: var(--color-error);
border: 1px solid rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}
.status--warning {
background-color: rgba(var(--color-warning-rgb, 168, 75, 47),
var(--status-bg-opacity));
color: var(--color-warning);
border: 1px solid rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}
.status--info {
background-color: rgba(var(--color-info-rgb, 98, 108, 113),
var(--status-bg-opacity));
color: var(--color-info);
border: 1px solid rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}
/* Fluid Container System */
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
padding-right: clamp(1rem, 4vw, 2rem);
padding-left: clamp(1rem, 4vw, 2rem);
max-width: 1400px;
}
.container--wide {
max-width: 1600px;
}
.container--narrow {
max-width: 800px;
}
.container--fluid {
max-width: none;
padding-right: clamp(0.5rem, 2vw, 1rem);
padding-left: clamp(0.5rem, 2vw, 1rem);
}
/* Responsive container breakpoints */
@media (min-width: 640px) {
.container {
max-width: min(640px, 100vw - 2rem);
}
}
@media (min-width: 768px) {
.container {
max-width: min(768px, 100vw - 2rem);
}
}
@media (min-width: 1024px) {
.container {
max-width: min(1024px, 100vw - 4rem);
}
}
@media (min-width: 1280px) {
.container {
max-width: min(1280px, 100vw - 4rem);
}
}
@media (min-width: 1536px) {
.container {
max-width: min(1400px, 100vw - 6rem);
}
}
/* Utility classes */
.flex {
display: flex;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-4 {
gap: var(--space-4);
}
.gap-8 {
gap: var(--space-8);
}
.gap-16 {
gap: var(--space-16);
}
.m-0 {
margin: 0;
}
.mt-8 {
margin-top: var(--space-8);
}
.mb-8 {
margin-bottom: var(--space-8);
}
.mx-8 {
margin-left: var(--space-8);
margin-right: var(--space-8);
}
.my-8 {
margin-top: var(--space-8);
margin-bottom: var(--space-8);
}
.p-0 {
padding: 0;
}
.py-8 {
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.px-8 {
padding-left: var(--space-8);
padding-right: var(--space-8);
}
.py-16 {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
.px-16 {
padding-left: var(--space-16);
padding-right: var(--space-16);
}
.block {
display: block;
}
.hidden {
display: none;
}
/* Accessibility */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
:focus-visible {
outline: var(--focus-outline);
outline-offset: 2px;
}
/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
border: 1px solid var(--color-border-secondary);
}
@font-face {
font-family: 'FKGroteskNeue';
src: url('https://r2cdn.perplexity.ai/fonts/FKGroteskNeue.woff2') format('woff2');
}
/* END PERPLEXITY DESIGN SYSTEM */
/* Modern Dark Theme with Blue Gradients - Clean Interface */
/* Custom CSS Variables for Modern Design */
:root {
/* Override design system colors for dark theme */
--color-background: #0b1020;
--color-surface: rgba(10, 14, 26, 0.85);
--color-card-bg: rgba(14, 20, 36, 0.7);
--color-glass: rgba(255, 255, 255, 0.05);
--color-glass-border: rgba(255, 255, 255, 0.1);
--color-text: #e5e7eb;
--color-text-secondary: #9aa4b2;
--color-primary: #6366f1;
/* Indigo */
--color-primary-hover: #4f46e5;
--color-primary-active: #4338ca;
--color-accent: #22d3ee;
/* Cyan */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
/* Gradients */
--gradient-primary: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
--gradient-secondary: linear-gradient(135deg, #0b1020 0%, #111827 100%);
--gradient-card: linear-gradient(135deg, rgba(14, 20, 36, 0.8) 0%, rgba(11, 17, 31, 0.6) 100%);
/* Shadows */
--shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.3);
--shadow-glow: 0 0 20px rgba(99, 102, 241, 0.35);
--shadow-button: 0 4px 16px rgba(99, 102, 241, 0.25);
/* Backdrop blur */
--blur-glass: blur(20px);
--blur-strong: blur(40px);
}
/* Base Styles */
html {
background: var(--color-background);
overflow-x: hidden;
}
body {
background: var(--color-background);
color: var(--color-text);
position: relative;
overflow-x: hidden;
}
/* Background Pattern */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.12) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(34, 211, 238, 0.10) 0%, transparent 50%),
radial-gradient(circle at 40% 60%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
z-index: -1;
pointer-events: none;
opacity: var(--bg-pattern-opacity, 1);
transition: opacity var(--duration-normal) var(--ease-standard);
}
/* Light-on-scroll theme overrides */
body.scroll-light {
--color-background: #ffffff;
--color-surface: #ffffff;
--color-card-bg: #ffffff;
--color-text: #0f172a;
/* slate-900 */
--color-text-secondary: #475569;
/* slate-600 */
--color-glass-border: rgba(15, 23, 42, 0.08);
--gradient-card: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
--shadow-glass: 0 8px 32px rgba(2, 6, 23, 0.06);
--bg-pattern-opacity: 0;
/* fade out background pattern smoothly */
}
/* body::before already transitions using --bg-pattern-opacity */
/* Persistent white theme with subtle moving gradients */
body.white-theme {
--color-background: #ffffff;
--color-surface: #ffffff;
--color-card-bg: #ffffff;
--color-text: #0f172a;
--color-text-secondary: #475569;
--color-glass-border: rgba(15, 23, 42, 0.08);
--shadow-glass: 0 8px 32px rgba(2, 6, 23, 0.06);
--bg-pattern-opacity: 1;
}
body.white-theme::before {
background:
radial-gradient(circle at var(--g1x, 20%) var(--g1y, 20%), rgba(248, 250, 252, 0.9) 0%, rgba(248, 250, 252, 0.6) 25%, transparent 55%),
radial-gradient(circle at var(--g2x, 80%) var(--g2y, 80%), rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.7) 22%, transparent 52%),
radial-gradient(circle at var(--g3x, 40%) var(--g3y, 60%), rgba(241, 245, 249, 0.8) 0%, rgba(241, 245, 249, 0.5) 20%, transparent 50%);
opacity: 1;
}
body.white-theme .header {
background: rgba(15, 20, 25, 0.35);
border-bottom: 1px solid var(--color-glass-border);
}
body.white-theme .nav__brand h1 a {
color: #ffffff;
}
body.white-theme .nav__link {
color: #ffffff;
}
body.white-theme .nav__link:hover,
body.white-theme .nav__link.active {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
/* Removed scroll-light header override for consistent styling */
/* Glass Card Component */
.glass-card {
background: var(--color-card-bg);
backdrop-filter: var(--blur-glass);
-webkit-backdrop-filter: var(--blur-glass);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-glass);
transition: all var(--duration-normal) var(--ease-standard);
}
.glass-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glass), var(--shadow-glow);
border-color: rgba(99, 102, 241, 0.35);
}
/* Header Navigation - Dark Theme */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(15, 23, 42, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
transition: all var(--duration-normal) var(--ease-standard);
box-shadow: 0 1px 20px rgba(0, 0, 0, 0.3);
width: 100%;
min-height: 60px;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem clamp(1.5rem, 4vw, 2.5rem);
max-width: none;
/* allow full-width background */
margin: 0;
/* remove centering to let header span full width */
width: 100%;
/* Keep fixed positioning from #site-nav, .navbar rule above */
min-height: 70px;
}
/* Clean Logo Text */
.navbar-logo {
margin-right: auto;
/* push menu to the right */
}
.navbar-logo {
color: #ffffff;
font-size: clamp(1.25rem, 4vw, 1.75rem);
font-weight: var(--font-weight-bold);
text-decoration: none;
letter-spacing: -0.025em;
transition: all var(--duration-fast) var(--ease-standard);
white-space: nowrap;
display: block;
padding: 0.5rem 0;
position: relative;
}
.navbar-logo:hover {
color: #06b6d4;
transform: translateY(-1px);
}
/* Clean Navigation Links */
.navbar-menu {
display: flex;
gap: 2rem;
align-items: center;
}
.navbar-menu a {
color: #ffffff;
text-decoration: none;
font-weight: var(--font-weight-medium);
padding: 0.75rem 1.25rem;
border-radius: var(--radius-base);
transition: all var(--duration-fast) var(--ease-standard);
position: relative;
font-size: 0.95rem;
white-space: nowrap;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
background: transparent;
letter-spacing: 0.01em;
}
.navbar-menu a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}
.navbar-menu a.active {
color: #06b6d4;
background: rgba(6, 182, 212, 0.15);
border-color: rgba(6, 182, 212, 0.3);
font-weight: var(--font-weight-semibold);
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}
/* Mobile Menu */
.mobile-menu {
display: none;
flex-direction: column;
background: rgba(15, 23, 42, 0.98);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 2rem 1.5rem;
gap: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
position: fixed;
top: 100%;
left: 0;
right: 0;
z-index: 999;
min-height: 70vh;
overflow-y: auto;
}
.mobile-menu a {
padding: 1rem 1.25rem;
color: #ffffff;
text-decoration: none;
text-align: center;
border-radius: var(--radius-base);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all var(--duration-fast) var(--ease-standard);
min-height: 52px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
position: relative;
overflow: hidden;
}
.mobile-menu a:hover,
.mobile-menu a.active {
background: rgba(6, 182, 212, 0.15);
color: #06b6d4;
border-color: rgba(6, 182, 212, 0.3);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(6, 182, 212, 0.3);
}
.mobile-menu a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s ease;
}
.mobile-menu a:hover::before {
left: 100%;
}
/* Mobile navigation toggle */
.hamburger {
display: none;
font-size: 1.5rem;
cursor: pointer;
background: none;
border: none;
color: #ffffff;
padding: 0.5rem;
border-radius: var(--radius-base);
transition: all var(--duration-fast) var(--ease-standard);
}
.hamburger:hover {
background: rgba(255, 255, 255, 0.08);
transform: scale(1.05);
}
/* Tablet navigation - maintain horizontal layout but adjust spacing */
@media (max-width: 1024px) and (min-width: 769px) {
.navbar {
padding: 0 clamp(1rem, 3vw, 1.5rem);
}
.navbar-menu {
gap: 1.5rem;
}
.navbar-menu a {
padding: clamp(0.4rem, 1.5vw, 0.6rem) clamp(0.6rem, 2vw, 0.8rem);
font-size: clamp(0.8rem, 2vw, 0.9rem);
}
}
/* Medium tablets and smaller laptops */
@media (max-width: 768px) and (min-width: 601px) {
.navbar {
padding: 0 clamp(1rem, 3vw, 1.5rem);
}
.navbar-menu {
gap: 1rem;
}
.navbar-menu a {
padding: clamp(0.4rem, 1.5vw, 0.6rem) clamp(0.6rem, 2vw, 0.8rem);
font-size: clamp(0.75rem, 2vw, 0.85rem);
}
.hamburger {
display: none;
}
.navbar-logo {
font-size: clamp(1rem, 3.5vw, 1.25rem);
}
}
/* Mobile phones - hamburger menu */
@media (max-width: 600px) {
.navbar {
padding: 0 clamp(1rem, 4vw, 1.5rem);
min-height: 60px;
}
.navbar-logo {
margin-right: auto;
}
.navbar-menu {
display: none;
}
.hamburger {
display: block;
z-index: 1001;
}
}
/* Extra small devices - optimize for tiny screens */
@media (max-width: 360px) {
.navbar {
padding: 0 clamp(0.75rem, 3vw, 1rem);
}
.navbar-logo {
font-size: clamp(0.95rem, 4vw, 1.125rem);
}
.mobile-menu {
padding: 1.5rem 1rem;
gap: 0.5rem;
}
.mobile-menu a {
padding: 0.875rem 1rem;
font-size: 0.9rem;
min-height: 48px;
}
}
.mobile-menu {
padding: 1.5rem 1rem;
gap: 0.5rem;
}
.mobile-menu a {
padding: 0.875rem 1rem;
font-size: 0.9rem;
min-height: 48px;
}
/* ✅ Add this part */
.mobile-menu.active {
display: flex;
/* show the menu when active */
flex-direction: column;
animation: slideDown 0.3s ease forwards;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Page Management */
.page {
display: none;
min-height: 100vh;
padding-top: 0;
/* Ensure page content doesn't get hidden behind navbar */
margin-top: 0;
/* Add additional top padding for all pages */
padding-top: 100px;
}
.page.active {
display: block;
animation: fadeInUp 0.6s var(--ease-standard);
}
/* Back Button */
.back-button {
margin-bottom: var(--space-16);
font-size: var(--font-size-base);
padding: var(--space-8) var(--space-16);
display: inline-flex;
align-items: center;
gap: var(--space-8);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-base);
color: #fff;
text-decoration: none;
transition: all var(--duration-fast) var(--ease-standard);
backdrop-filter: blur(10px);
}
.back-button:hover {
transform: translateX(-2px);
background: rgba(255, 255, 255, 0.15);
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Form Page Styling */
.form-page {
max-width: 900px;
margin: 0 auto;
padding: var(--space-32);
background: var(--color-card-bg);
backdrop-filter: var(--blur-glass);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-glass);
/* Ensure content doesn't get hidden behind navbar */
margin-top: calc(var(--nav-h) + var(--space-32));
}
/* Two Column Form Layout */
.form-page-two-column {
max-width: 1200px;
margin: 0 auto;
margin-top: calc(var(--nav-h) + var(--space-32));
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(20px);
border-radius: var(--radius-lg);
border: 1px solid var(--color-glass-border);
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.professional-form-two-column {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 600px;
}
.form-left-section {
background: #ffffff;
padding: var(--space-32);
display: flex;
flex-direction: column;
gap: var(--space-20);
}
.form-right-section {
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
padding: var(--space-32);
display: flex;
flex-direction: column;
gap: var(--space-20);
color: white;
}
.section-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-24);
color: inherit;
}
.form-left-section .section-title {
color: #1f2937;
}
.form-right-section .section-title {
color: white;
}
/* Form Controls in Two Column Layout */
.form-left-section .form-control {
background: #ffffff;
border: 1px solid #d1d5db;
color: #374151;
}
.form-left-section .form-control:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.form-right-section .form-control {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
backdrop-filter: blur(10px);
}
.form-right-section .form-control:focus {
border-color: rgba(255, 255, 255, 0.6);
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}
.form-right-section .form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.form-left-section .form-label {
color: #374151;
font-weight: var(--font-weight-medium);
}
.form-right-section .form-label {
color: white;
font-weight: var(--font-weight-medium);
}
/* On mobile, stack the cards in a single column */
@media (max-width: 767px) {
.work-requests__grid {
/* Change to a 2-column grid for a modular view on mobile */
grid-template-columns: repeat(2, 1fr);
gap: clamp(0.5rem, 2vw, 0.75rem);
/* Reduce gap for a tighter grid */
}
}
/* Form Rows */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
}
/* Availability Grid in Right Section */
.form-right-section .availability-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--space-8);
max-width: 100%;
}
.form-right-section .availability-day {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: var(--space-12) var(--space-8);
border-radius: var(--radius-base);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
transition: all var(--duration-fast) var(--ease-standard);
color: white;
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
text-align: center;
min-height: 48px;
}
.form-right-section .availability-day:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.6);
transform: translateY(-1px);
}
.form-right-section .availability-day input[type="checkbox"]:checked+span {
color: #fbbf24;
}
.form-right-section .availability-day input[type="checkbox"]:checked {
background: rgba(251, 191, 36, 0.2);
border-color: #fbbf24;
}
.form-right-section .availability-day input[type="checkbox"] {
margin: 0;
accent-color: #fbbf24;
width: 16px;
height: 16px;
margin-right: var(--space-8);
}
/* File Uploads */
.file-uploads {
display: flex;
flex-direction: column;
gap: var(--space-16);
}
.file-preview {
margin-top: var(--space-8);
padding: var(--space-12);
background: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-base);
border: 1px solid rgba(255, 255, 255, 0.3);
color: white;
font-size: var(--font-size-sm);
}
/* Terms Checkbox */
.terms-checkbox {
margin: var(--space-20) 0;
}
.checkbox-label {
display: flex;
align-items: center;
gap: var(--space-12);
cursor: pointer;
color: white;
font-size: var(--font-size-sm);
}
.checkbox-label input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #fbbf24;
}
.terms-link {
color: #fbbf24;
text-decoration: underline;
}
.terms-link:hover {
color: #f59e0b;
}
/* Register Button */
.btn-register {
background: #ffffff;
color: #6366f1;
border: none;
padding: var(--space-16) var(--space-24);
border-radius: var(--radius-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-standard);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.btn-register:hover {
background: #f8fafc;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.btn-register:active {
transform: translateY(0);
}
/* Responsive Design for Two Column Form */
@media (max-width: 768px) {
.professional-form-two-column {
grid-template-columns: 1fr;
}
.form-left-section,
.form-right-section {
padding: var(--space-24);
}
.form-row {
grid-template-columns: 1fr;
gap: var(--space-12);
}
.form-right-section .availability-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-8);
}
}
@media (max-width: 480px) {
.form-right-section .availability-grid {
grid-template-columns: repeat(3, 1fr);
}
.form-left-section,
.form-right-section {
padding: var(--space-20);
}
}
/* Hero Section - Two Column Layout */
.hero {
position: relative;
padding: 0 0 var(--space-10) 0;
overflow: hidden;
min-height: 90vh;
display: flex;
align-items: flex-start;
background: transparent;
/* Ensure hero starts immediately below navbar */
margin-top: 0;
padding-top: 0;
/* Ensure content is not hidden behind navbar */
min-height: calc(100vh - var(--nav-h));
/* Add top margin to prevent navbar overlap */
margin-top: var(--nav-h);
}
/* Trim space between NAV ↔ HERO and HERO ↔ SERVICES */
.hero-section {
margin-top: 0;
padding-top: 0;
}
.services-section {
margin-top: 0;
padding-top: 0;
}
.hero__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 30% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
radial-gradient(circle at 70% 80%, rgba(6, 182, 212, 0.06) 0%, transparent 50%);
z-index: 1;
overflow: hidden;
}
.hero__bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px);
background-size: 60px 60px;
z-index: 2;
}
.hero__bg::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
z-index: 3;
opacity: 0.6;
}
.hero__waves {
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 200px;
z-index: 2;
pointer-events: none;
}
.hero__waves svg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.hero__wave-1 {
animation: waveFloat1 8s ease-in-out infinite;
opacity: 0.4;
}
.hero__wave-2 {
animation: waveFloat2 10s ease-in-out infinite;
opacity: 0.3;
}
.hero__wave-3 {
animation: waveFloat3 12s ease-in-out infinite;
opacity: 0.25;
}
.hero__wave-4 {
animation: waveFloat1 14s ease-in-out infinite reverse;
opacity: 0.2;
}
@keyframes waveFloat1 {
0%, 100% { transform: translateX(0) translateY(0); }
25% { transform: translateX(-5%) translateY(3px); }
50% { transform: translateX(-2%) translateY(-5px); }
75% { transform: translateX(-7%) translateY(2px); }
}
@keyframes waveFloat2 {
0%, 100% { transform: translateX(0) translateY(0); }
33% { transform: translateX(3%) translateY(-4px); }
66% { transform: translateX(-4%) translateY(3px); }
}
@keyframes waveFloat3 {
0%, 100% { transform: translateX(0) translateY(0); }
20% { transform: translateX(-3%) translateY(2px); }
40% { transform: translateX(-6%) translateY(-3px); }
60% { transform: translateX(-2%) translateY(4px); }
80% { transform: translateX(-5%) translateY(-2px); }
}
.hero__floating-dots {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
pointer-events: none;
overflow: hidden;
}
.hero__dot {
position: absolute;
width: 4px;
height: 4px;
background: rgba(59, 130, 246, 0.15);
border-radius: 50%;
animation: dotFloat 6s ease-in-out infinite;
}
.hero__dot:nth-child(1) { left: 10%; top: 20%; animation-delay: 0s; }
.hero__dot:nth-child(2) { left: 25%; top: 60%; animation-delay: 1s; animation-duration: 7s; }
.hero__dot:nth-child(3) { left: 45%; top: 30%; animation-delay: 2s; animation-duration: 5s; }
.hero__dot:nth-child(4) { left: 65%; top: 70%; animation-delay: 0.5s; animation-duration: 8s; }
.hero__dot:nth-child(5) { left: 80%; top: 40%; animation-delay: 1.5s; animation-duration: 6s; }
.hero__dot:nth-child(6) { left: 15%; top: 80%; animation-delay: 3s; animation-duration: 7s; }
.hero__dot:nth-child(7) { left: 55%; top: 15%; animation-delay: 2.5s; animation-duration: 5s; }
.hero__dot:nth-child(8) { left: 85%; top: 85%; animation-delay: 4s; animation-duration: 8s; }
@keyframes dotFloat {
0%, 100% { transform: translateY(0) scale(1); opacity: 0.15; }
50% { transform: translateY(-20px) scale(1.2); opacity: 0.3; }
}
.hero__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: flex-start;
position: relative;
z-index: 2;
width: 100%;
min-height: 40vh;
/* Reduced padding to move hero closer to navbar */
padding-top: calc(64px + 40px);
}
/* Hero Left Side */
.hero__left {
text-align: left;
padding-right: var(--space-16);
padding-top: var(--space-8);
}
/* Hero Right Side */
.hero__right {
display: flex;
flex-direction: column;
gap: var(--space-12);
padding-top: 0;
}
.hero__right .section-header {
text-align: center;
margin-bottom: var(--space-0);
}
.hero__right .section-title {
font-size: var(--font-size-2xl);
color: #1f2937;
font-weight: var(--font-weight-bold);
margin-bottom: 0;
line-height: 1.3;
}
#sectionTitle {
font-size: clamp(1.3rem, 4vw, 1.85rem);
line-height: 1.2;
white-space: nowrap;
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero__badge {
display: inline-block;
background: rgba(99, 102, 241, 0.2);
color: var(--color-primary);
padding: var(--space-8) var(--space-20);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border: 1px solid rgba(99, 102, 241, 0.35);
margin-bottom: var(--space-20);
backdrop-filter: var(--blur-glass);
position: relative;
overflow: hidden;
}
.hero__badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--radius-full);
padding: 1px;
background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
animation: borderRotate 3s linear infinite;
}
.hero__badge {
display: inline-block;
background: rgba(99, 102, 241, 0.2);
color: var(--color-primary);
padding: var(--space-8) var(--space-20);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
border: 1px solid rgba(99, 102, 241, 0.35);
margin-bottom: var(--space-20);
backdrop-filter: var(--blur-glass);
position: relative;
overflow: hidden;
}
.hero__badge::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: var(--radius-full);
padding: 1px;
background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
animation: borderRotate 3s linear infinite;
}
.hero__title {
font-size: clamp(3.5rem, 10vw, 6rem);
font-weight: var(--font-weight-bold);
line-height: 1.1;
margin-bottom: var(--space-20);
letter-spacing: -0.02em;
word-wrap: break-word;
overflow-wrap: break-word;
overflow: visible;
color: #1f2937;
padding: 0;
}
.hero__title--one-line {
display: inline-flex;
align-items: baseline;
flex-wrap: nowrap;
gap: 0.32ch;
white-space: nowrap;
font-size: clamp(3.8rem, 8.8vw, 6.2rem);
}
.hero__title--one-line .title-accent {
display: inline-block;
white-space: nowrap;
}
.title-accent {
background: linear-gradient(
to right,
#1e40af, /* Deep Blue */
#2563eb, /* Royal Blue */
#06b6d4, /* Cyan */
#60a5fa, /* Electric Blue */
#0ea5e9, /* Sky Blue */
#2563eb, /* Royal Blue */
#1e40af /* Deep Blue */
);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
padding-right: 0.15em;
margin-right: -0.1em;
animation: gradientFlow 5s ease-in-out infinite;
filter: drop-shadow(0 0 1px rgba(37, 99, 235, 0.1));
}
@keyframes gradientFlow {
0% {
background-position: 0% center;
}
100% {
background-position: -200% center;
}
}
.title-italic {
font-style: italic;
}
.hero__subtitle {
font-size: var(--font-size-xl);
color: #6b7280;
margin-bottom: var(--space-24);
line-height: 1.6;
max-width: 600px;
}
.hero__actions {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-10);
}
.hero__additional-text {
font-size: var(--font-size-sm);
color: #6b7280;
line-height: 1.5;
margin-top: var(--space-8);
text-align: left;
max-width: 400px;
}
.hero__link {
color: var(--color-primary);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-standard);
font-weight: var(--font-weight-medium);
}
.hero__link:hover {
color: var(--color-primary-hover);
text-decoration: underline;
}
/* Hero Categories Grid - 2x3 layout for 6 cards */
.hero-categories__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
/* Keep 2 columns */
gap: var(--space-16);
width: 100%;
max-width: 500px;
margin: 0 auto;
margin-top: var(--space-8);
}
/* Responsive Hero Layout */
@media (max-width: 768px) {
.hero__content {
grid-template-columns: 1fr;
gap: var(--space-24);
text-align: center;
/* Reduced padding to move hero closer to navbar on mobile */
padding-top: calc(64px + 20px);
}
.hero__left {
text-align: center;
padding-right: 0;
padding-top: var(--space-4);
order: 1;
}
.hero__right {
order: 2;
padding-top: 0;
}
.hero__actions {
align-items: center;
}
.hero__additional-text {
text-align: center;
max-width: 100%;
}
.hero-categories__grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: var(--space-12);
max-width: 400px;
margin-top: var(--space-8);
}
.hero {
min-height: auto;
padding: var(--space-20) 0 var(--space-24) 0;
}
}
.hero__cta {
position: relative;
overflow: hidden;
background: var(--gradient-primary);
font-size: var(--font-size-lg);
padding: var(--space-20) var(--space-32);
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: var(--font-weight-bold);
border: none;
box-shadow: var(--shadow-button);
}
.hero__cta:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-button), var(--shadow-glow);
}
.btn__shimmer {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: shimmer 2s infinite;
}
/* Modern Button Styles - Responsive */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: clamp(0.5rem, 3vw, 0.75rem) clamp(1rem, 4vw, 1.5rem);
border-radius: var(--radius-base);
font-size: clamp(0.75rem, 3vw, 0.875rem);
font-weight: var(--font-weight-medium);
line-height: 1.5;
cursor: pointer;
transition: all var(--duration-normal) var(--ease-standard);
min-height: 44px;
/* iOS touch target minimum */
min-width: 44px;
touch-action: manipulation;
border: none;
text-decoration: none;
position: relative;
overflow: hidden;
}
.btn--primary {
background: var(--gradient-primary);
color: white;
box-shadow: var(--shadow-button);
}
.btn--primary:hover {
transform: translateY(-1px);
box-shadow: 0 8px 25px rgba(99, 102, 241, 0.45);
}
.btn--secondary {
background: var(--color-card-bg);
color: var(--color-text);
border: 1px solid var(--color-glass-border);
backdrop-filter: var(--blur-glass);
}
.btn--secondary:hover {
background: rgba(30, 41, 51, 0.8);
border-color: var(--color-primary);
transform: translateY(-1px);
}
.btn--outline {
background: transparent;
color: var(--color-text);
border: 1px solid var(--color-glass-border);
backdrop-filter: var(--blur-glass);
}
.btn--outline:hover {
background: var(--color-card-bg);
border-color: var(--color-primary);
color: var(--color-primary);
}
.btn--lg {
padding: var(--space-16) var(--space-32);
font-size: var(--font-size-lg);
border-radius: var(--radius-md);
}
/* Section Headers */
.section-header {
text-align: center;
margin-bottom: var(--space-32);
}
.section-title {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-16);
letter-spacing: -0.02em;
}
.section-subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
max-width: 600px;
margin: 0 auto;
}
/* Registration Options */
.registration-options {
padding: var(--space-32) 0;
/* Ensure content doesn't get hidden behind navbar */
padding-top: calc(var(--space-32) + var(--space-32));
}
.registration-options__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-24);
margin-top: var(--space-24);
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
@media (max-width: 768px) {
.registration-options__grid {
grid-template-columns: 1fr;
gap: var(--space-20);
max-width: 500px;
}
.registration-option {
min-height: 240px;
padding: var(--space-24);
}
.registration-option__icon {
font-size: 2.5rem;
margin-bottom: var(--space-16);
}
.registration-option h4 {
font-size: var(--font-size-lg);
margin-bottom: var(--space-12);
}
.registration-option p {
font-size: var(--font-size-base);
margin-bottom: var(--space-20);
}
}
.registration-option {
padding: var(--space-32);
text-align: center;
transition: all var(--duration-normal) var(--ease-standard);
background: var(--color-card-bg);
backdrop-filter: var(--blur-glass);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-glass);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 280px;
position: relative;
overflow: hidden;
}
.registration-option:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.registration-option:active {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}
.registration-option::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-primary);
transform: scaleX(0);
transition: transform var(--duration-normal) var(--ease-standard);
}
.registration-option:hover::before {
transform: scaleX(1);
}
.registration-option__icon {
font-size: 3rem;
margin-bottom: var(--space-20);
display: block;
}
.registration-option h4 {
margin-bottom: var(--space-16);
font-size: var(--font-size-xl);
color: var(--color-text);
font-weight: var(--font-weight-semibold);
}
.registration-option p {
margin-bottom: var(--space-24);
color: var(--color-text-secondary);
line-height: 1.5;
flex-grow: 1;
}
.page-title {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-8);
margin-top: var(--space-32);
letter-spacing: -0.02em;
}
.page-subtitle {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
}
/* Service Categories - Hidden since now part of hero */
.categories {
display: none;
}
/* Segmented Control Switch Styles */
.toggle-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin-bottom: 24px;
}
.toggle-hint {
display: block;
margin-top: var(--space-8);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
text-align: center;
opacity: 0.8;
}
.toggle-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
padding: 0 20px;
}
.toggle-switch {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
background: var(--color-primary, #06b6d4);
/* Use theme primary color */
border: none;
border-radius: 24px;
padding: 4px;
width: 280px;
height: 48px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(6, 182, 212, 0.2);
overflow: hidden;
}
.toggle-switch:hover {
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
transform: translateY(-1px);
}
.toggle-input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-slider {
position: absolute;
top: 4px;
left: 4px;
width: 136px;
height: 40px;
background: #ffffff;
border-radius: 20px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
z-index: 1;
border: none;
}
.toggle-input:not(:checked)+.toggle-slider {
transform: translateX(136px);
background: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.toggle-label {
position: relative;
z-index: 2;
font-size: 14px;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex: 1;
text-align: center;
padding: 12px 0;
min-width: 136px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
}
.toggle-label-on {
color: var(--color-primary, #06b6d4);
/* Theme primary color for selected state */
opacity: 1;
transform: translateX(0);
}
.toggle-label-off {
color: rgba(255, 255, 255, 0.85);
/* Semi-transparent white for unselected state */
opacity: 0;
transform: translateX(-10px);
}
.toggle-input:not(:checked)~.toggle-label-on {
opacity: 0;
transform: translateX(10px);
color: rgba(255, 255, 255, 0.85);
}
.toggle-input:not(:checked)~.toggle-label-off {
opacity: 1;
transform: translateX(0);
color: var(--color-primary, #06b6d4);
}
/* Trusted By Section - Minimalist Design */
.trusted {
padding: 80px 0;
background: #ffffff;
color: #333333;
position: relative;
overflow: hidden;
}
.trusted .section-header {
text-align: center;
margin-bottom: 60px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.trusted .section-title {
color: #333333;
font-size: 36px;
font-weight: 700;
margin-bottom: 20px;
line-height: 1.2;
letter-spacing: -0.02em;
}
.trusted__partners {
width: 100%;
overflow: hidden;
position: relative;
-webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}
.partner-container {
display: inline-flex;
/* Changed from flex */
flex-wrap: nowrap;
/* Ensure items stay in one line */
align-items: center;
/* Vertically center items */
gap: var(--space-24);
/* Increase gap for better spacing */
padding: var(--space-12) 0;
/* Apply the scrolling animation */
animation: scrollPartners 40s linear infinite;
}
.partners-carousel {
display: flex;
width: fit-content;
animation: scrollPartners 40s linear infinite;
}
.partner-item {
display: flex;
align-items: center;
gap: var(--space-12);
padding: var(--space-12) var(--space-24);
height: 90px;
/* Set a fixed height */
margin: 0 var(--space-12);
background: #f8f9fa;
border-radius: var(--radius-base);
border: 1px solid #e9ecef;
white-space: nowrap;
flex-shrink: 0;
}
.partner-logo {
font-size: var(--font-size-lg);
}
.partner-name {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: #495057;
}
@keyframes scrollPartners {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
@media (max-width: 768px) {
.partners-carousel {
animation-duration: 30s;
}
.partner-item {
padding: var(--space-8) var(--space-16);
}
.partner-name {
font-size: var(--font-size-sm);
}
.partner-container {
animation-duration: 30s;
/* Speed up animation on smaller screens */
gap: var(--space-16);
}
}
/* Add margin-top to push the section down on short pages */
.page:last-child .trusted:last-child {
padding-bottom: 40px !important;
margin-top: 0 !important;
}
.section-separator {
width: 100px;
height: 1px;
background: #e5e5e5;
margin: 0 auto 60px auto;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scrollPartners {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Enhanced partner animations */
@keyframes fadeInPartner {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.partner-item {
animation: fadeInPartner 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
animation-delay: calc(var(--partner-index, 0) * 0.1s);
}
.categories__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-16);
max-width: 600px;
margin: 0 auto;
}
.category-card,
.hero-categories__grid .category-card {
background: #ffffff;
border-radius: var(--radius-lg);
padding: var(--space-20);
text-align: center;
transition: all var(--duration-normal) var(--ease-standard);
cursor: pointer;
position: relative;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(0, 0, 0, 0.1);
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
animation: fadeInUp 0.6s ease-out forwards;
opacity: 0;
transform: translateY(20px);
}
.category-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.category-card:active {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.category-card__icon {
font-size: 2.5rem;
margin-bottom: var(--space-16);
display: block;
}
.category-card__name {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-8);
color: #1f2937;
line-height: 1.2;
}
.category-card__description {
color: #6b7280;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 1.4;
margin: 0;
margin-bottom: 16px;
}
/* Category Data Items */
.category-data {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.data-item {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 12px;
transition: all 0.2s ease;
}
.data-item:hover {
background: #f1f5f9;
border-color: #cbd5e1;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.item-name {
font-size: 14px;
font-weight: 600;
color: #1e293b;
margin: 0 0 4px 0;
line-height: 1.3;
}
.item-skills,
.item-job {
font-size: 12px;
color: #64748b;
margin: 0 0 2px 0;
font-weight: 500;
}
.item-experience,
.item-description,
.item-location,
.item-budget {
font-size: 11px;
color: #94a3b8;
margin: 0 0 8px 0;
line-height: 1.4;
}
.view-profile-btn {
font-size: 11px;
padding: 6px 12px;
margin-top: 4px;
width: 100%;
}
/* Sections */
.featured,
.work-requests-preview,
.trusted-old-rule-removed {
/* Renamed to disable */
padding: var(--space-32) 0;
}
.featured__placeholder,
.work-requests-preview__placeholder {
text-align: center;
padding: var(--space-32);
max-width: 600px;
margin: 0 auto;
}
/* Simplified app notice (no icon/card) */
.featured__notice {
text-align: center;
max-width: 720px;
margin: 0 auto;
padding: var(--space-24) 0;
}
.featured__text {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
margin-bottom: var(--space-16);
}
.placeholder-icon {
font-size: 3rem;
margin-bottom: var(--space-16);
opacity: 0.8;
}
.featured__placeholder h4,
.work-requests-preview__placeholder h4 {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-16);
color: var(--color-text);
}
.partner-logo {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #666666;
margin-bottom: 8px;
}
/* Special styling for MARUTI SUZUKI ARENA */
.partner-item[data-partner="MARUTI SUZUKI ARENA"] .partner-logo {
display: none;
}
.partner-item[data-partner="MARUTI SUZUKI ARENA"] .partner-name {
font-size: 18px;
font-weight: 700;
color: #000000;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.partner-name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
white-space: nowrap;
}
/* Page Layouts */
.page-header {
text-align: center;
margin-bottom: var(--space-24);
padding: var(--space-20) 0;
/* Ensure content doesn't get hidden behind navbar */
padding-top: calc(64px + var(--space-20));
}
.filters {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-12);
margin-bottom: var(--space-24);
padding: var(--space-20);
}
.filters--compact {
display: flex;
flex-wrap: wrap;
gap: var(--space-8);
padding: var(--space-16);
margin-bottom: var(--space-20);
max-width: 100%;
background: var(--color-card-bg);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-lg);
backdrop-filter: blur(20px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all var(--duration-normal) var(--ease-standard);
position: relative;
overflow: hidden;
}
/* Add subtle background pattern */
.filters--compact::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(var(--color-primary-rgb, 6, 182, 212), 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(var(--color-primary-rgb, 6, 182, 212), 0.02) 0%, transparent 50%);
pointer-events: none;
z-index: 0;
}
.filters--compact .form-group {
position: relative;
z-index: 1;
}
.filters--compact:hover {
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
border-color: rgba(var(--color-primary-rgb, 6, 182, 212), 0.3);
}
.filters--compact .form-group {
margin-bottom: 0;
min-width: 140px;
flex: 1 1 auto;
max-width: 180px;
position: relative;
}
/* Add subtle labels for better UX */
.filters--compact .form-group::before {
content: '';
position: absolute;
top: -2px;
left: var(--space-8);
right: var(--space-8);
height: 2px;
background: linear-gradient(90deg, transparent, rgba(var(--color-primary-rgb, 6, 182, 212), 0.3), transparent);
border-radius: var(--radius-full);
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-standard);
}
.filters--compact .form-group:focus-within::before {
opacity: 1;
}
.filters--compact .form-control {
padding: var(--space-6) var(--space-8);
font-size: var(--font-size-sm);
height: 38px;
border-radius: var(--radius-base);
border: 1px solid var(--color-glass-border);
background: var(--color-surface);
color: var(--color-text);
transition: all var(--duration-normal) var(--ease-standard);
width: 100%;
font-weight: var(--font-weight-medium);
}
/* Style search inputs differently from selects */
.filters--compact input.form-control {
cursor: text;
}
.filters--compact select.form-control {
cursor: pointer;
}
/* Style select dropdowns in filters */
.filters--compact select.form-control {
background-image: var(--select-caret-light);
background-repeat: no-repeat;
background-position: right var(--space-8) center;
background-size: 14px;
padding-right: var(--space-24);
cursor: pointer;
}
/* Dark mode select caret for filters */
@media (prefers-color-scheme: dark) {
.filters--compact select.form-control {
background-image: var(--select-caret-dark);
}
}
.filters--compact .form-control:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 6, 182, 212), 0.1);
transform: translateY(-1px);
background: var(--color-surface);
}
.filters--compact .form-control:hover {
border-color: rgba(var(--color-primary-rgb, 6, 182, 212), 0.5);
background: var(--color-surface);
}
/* Add focus ring animation */
.filters--compact .form-control:focus {
animation: focusPulse 0.3s var(--ease-standard);
}
@keyframes focusPulse {
0% {
transform: translateY(-1px) scale(1);
}
50% {
transform: translateY(-1px) scale(1.02);
}
100% {
transform: translateY(-1px) scale(1);
}
}
/* Responsive filter adjustments */
@media (max-width: 768px) {
.filters--compact {
flex-direction: column;
gap: var(--space-10);
padding: var(--space-16);
}
.filters--compact .form-group {
min-width: 100%;
max-width: 100%;
}
.filters--compact .form-control {
width: 100%;
height: 42px;
}
}
@media (max-width: 480px) {
.filters--compact {
padding: var(--space-12);
gap: var(--space-8);
margin-bottom: var(--space-16);
}
.filters--compact .form-control {
height: 44px;
font-size: var(--font-size-base);
}
}
/* Tablet optimization */
@media (min-width: 769px) and (max-width: 1024px) {
.filters--compact {
gap: var(--space-10);
padding: var(--space-14);
}
.filters--compact .form-group {
min-width: 150px;
max-width: 160px;
}
}
.search-group {
display: flex;
align-items: center;
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-base);
background: var(--color-surface);
transition: all var(--duration-normal) var(--ease-standard);
overflow: hidden;
/* Ensures button border radius is clean */
}
.search-group:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 6, 182, 212), 0.1);
}
.search-group .form-control {
border: none;
background: transparent;
box-shadow: none;
flex-grow: 1;
height: 100%;
padding-right: 0;
}
.search-group .form-control:focus {
box-shadow: none;
outline: none;
}
.search-go-btn {
background: transparent;
border: none;
color: var(--color-text-secondary);
padding: 0 var(--space-12);
cursor: pointer;
transition: color var(--duration-fast);
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.search-go-btn:hover {
color: var(--color-primary);
}
.empty-state {
text-align: center;
padding: var(--space-32);
max-width: 600px;
margin: 0 auto;
}
/* Work Requests Page */
.work-requests-container {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-24);
margin-top: var(--space-16);
/* Ensure content doesn't get hidden behind navbar */
padding-top: var(--space-32);
}
.work-requests-browse h3 {
margin-bottom: var(--space-16);
font-size: var(--font-size-xl);
color: var(--color-text);
}
#workRequestsPageSubtitle {
font-size: 0.85rem;
line-height: 1.2;
white-space: nowrap;
text-wrap: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@media (max-width: 992px) {
.work-requests-container {
grid-template-columns: 1fr;
}
}
.work-requests-browse {
flex: 1;
}
.work-requests-post {
padding: var(--space-24);
height: fit-content;
background: var(--color-card-bg);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-lg);
}
.work-requests-post h3 {
margin-top: 0;
margin-bottom: var(--space-16);
}
.work-requests-post p {
margin-bottom: var(--space-24);
color: var(--color-text-secondary);
}
/* Jobs list */
.jobs__list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-20);
max-width: 100%;
align-items: start;
}
.jobs__list .job-card {
justify-self: stretch;
}
.job-card {
background: var(--color-card-bg);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-lg);
padding: var(--space-20);
height: fit-content;
min-height: 200px;
display: flex;
flex-direction: column;
gap: var(--space-12);
}
.job-card h4 {
margin-bottom: var(--space-8);
}
.job-card p {
margin-bottom: var(--space-8);
color: var(--color-text);
}
.empty-state__icon {
font-size: 4rem;
margin-bottom: var(--space-16);
opacity: 0.6;
}
.empty-state h3 {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-16);
color: var(--color-text);
}
.empty-state p {
color: var(--color-text);
margin-bottom: var(--space-24);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
}
/* How It Works */
.steps {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-24);
margin-bottom: var(--space-32);
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.step {
text-align: center;
padding: var(--space-32);
background: var(--color-card-bg);
backdrop-filter: var(--blur-glass);
border-radius: var(--radius-lg);
border: 1px solid var(--color-glass-border);
transition: all var(--duration-normal) var(--ease-standard);
position: relative;
overflow: hidden;
width: 100%;
max-width: 400px;
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.step:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-glass), var(--shadow-glow);
}
.step__number {
width: 72px;
height: 72px;
background: var(--gradient-primary);
color: white;
border-radius: var(--radius-full);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xl);
margin: 0 auto var(--space-24) auto;
box-shadow: var(--shadow-button);
position: relative;
z-index: 2;
}
.step__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-16);
color: var(--color-text);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.step__description {
color: var(--color-text-secondary);
margin: 0;
line-height: 1.7;
font-size: var(--font-size-lg);
max-width: 320px;
}
/* Steps separator styling */
.steps-separator {
text-align: center;
margin: var(--space-32) 0;
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-text-secondary);
position: relative;
padding: var(--space-16) 0;
width: 100%;
}
.steps-separator::before,
.steps-separator::after {
content: '';
position: absolute;
top: 50%;
width: 25%;
height: 2px;
background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}
.steps-separator::before {
left: 0;
}
.steps-separator::after {
right: 0;
}
/* Register step special styling */
.step--register {
max-width: 400px;
margin: 0 auto;
}
/* Steps row styling */
.steps-row {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-32);
margin-bottom: var(--space-32);
}
/* Ensure all steps have consistent dimensions */
.step {
box-sizing: border-box;
}
/* Enhanced hover effects for professional appearance */
.step:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-glass), var(--shadow-glow), 0 20px 40px rgba(0, 0, 0, 0.1);
}
.how-it-works__sections {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: var(--space-24);
margin-bottom: var(--space-24);
/* Ensure content doesn't get hidden behind navbar */
padding-top: var(--space-32);
}
.how-it-works__section {
padding: var(--space-24);
}
.section-icon {
font-size: 3rem;
margin-bottom: var(--space-20);
display: block;
}
.how-it-works__section h3 {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-20);
color: var(--color-text);
font-weight: var(--font-weight-semibold);
}
.how-it-works__section ul {
list-style: none;
padding: 0;
margin: 0 0 var(--space-24) 0;
}
.how-it-works__section li {
padding: var(--space-12) 0 var(--space-12) var(--space-24);
position: relative;
color: var(--color-text);
line-height: 1.6;
font-weight: var(--font-weight-medium);
}
.how-it-works__section li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--color-success);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.benefits__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--space-24);
}
.benefit {
text-align: center;
padding: var(--space-24);
}
.benefit__icon {
font-size: 3rem;
margin-bottom: var(--space-16);
display: block;
}
.benefit h4 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-12);
color: var(--color-text);
font-weight: var(--font-weight-semibold);
}
.benefit p {
color: var(--color-text);
margin: 0;
line-height: 1.6;
font-weight: var(--font-weight-medium);
}
/* --- START: NEW HOW IT WORKS PAGE STYLES --- */
#how-it-works {
padding-top: 0;
/* Override default page padding */
margin-top: 0;
background: linear-gradient(135deg, #1a2a6c, #2a3a7c, #3a4a8c);
color: white;
line-height: 1.3;
overflow-x: hidden;
position: relative;
}
#how-it-works .scrollDist {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#how-it-works .parallax-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1;
overflow: hidden;
}
#how-it-works .parallax-layer {
position: absolute;
width: 110%;
height: 120%;
background-size: cover;
background-position: center;
left: -5%;
}
#how-it-works .sky {
background: linear-gradient(to bottom, #1a2a6c, #2a3a7c, #3a4a8c);
z-index: 1;
}
#how-it-works .mountBg {
background: linear-gradient(to bottom, transparent 30%, #162a43 100%);
z-index: 2;
}
#how-it-works .mountMg {
background: linear-gradient(to bottom, transparent 40%, #0f1f33 100%);
z-index: 3;
}
#how-it-works .cloud1 {
background: url('https://assets.codepen.io/721952/cloud1.png') center/cover no-repeat;
z-index: 15;
width: 140%;
left: -20%;
height: 120%;
top: -10%;
opacity: 0.9;
filter: brightness(1.2);
}
#how-it-works .cloud2 {
background: url('https://assets.codepen.io/721952/cloud2.png') center/cover no-repeat;
z-index: 16;
width: 140%;
left: -20%;
height: 120%;
top: -15%;
opacity: 0.8;
filter: brightness(1.1);
}
#how-it-works .cloud3 {
background: url('https://assets.codepen.io/721952/cloud3.png') center/cover no-repeat;
z-index: 17;
width: 140%;
left: -20%;
height: 120%;
top: -20%;
opacity: 0.7;
}
#how-it-works .cloud4 {
background: url('https://assets.codepen.io/721952/cloud1.png') center/cover no-repeat;
z-index: 4;
width: 120%;
left: -10%;
height: 110%;
top: 5%;
opacity: 0.6;
transform: scaleX(-1);
}
/* Flipped horizontally */
#how-it-works .cloud5 {
background: url('https://assets.codepen.io/721952/cloud2.png') center/cover no-repeat;
z-index: 6;
width: 130%;
left: -15%;
height: 115%;
top: 10%;
opacity: 0.5;
}
#how-it-works .cloud6 {
background: url('https://assets.codepen.io/721952/cloud1.png') center/cover no-repeat;
z-index: 18;
width: 150%;
left: -25%;
height: 130%;
top: -25%;
opacity: 0.6;
filter: brightness(1.1) blur(1px);
}
#how-it-works .cloud7 {
background: url('https://assets.codepen.io/721952/cloud3.png') center/cover no-repeat;
z-index: 19;
width: 160%;
left: -30%;
height: 140%;
top: -30%;
opacity: 0.5;
transform: scale(1.1);
filter: blur(2px);
}
#how-it-works .buildingsBg {
background: linear-gradient(to bottom, transparent 50%, #0a1522 100%);
z-index: 7;
}
#how-it-works .buildingsMg {
background: linear-gradient(to bottom, transparent 60%, #07111b 100%);
z-index: 8;
}
#how-it-works .buildingsFg {
background: linear-gradient(to bottom, transparent 70%, #050c14 100%);
z-index: 9;
}
#how-it-works .edge-mask {
position: fixed;
top: 0;
width: 5%;
height: 100vh;
z-index: 10;
background: linear-gradient(to right, #1a2a6c, transparent);
pointer-events: none;
}
#how-it-works .edge-mask-left {
left: 0;
}
#how-it-works .edge-mask-right {
right: 0;
background: linear-gradient(to left, #1a2a6c, transparent);
}
#how-it-works .background-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: radial-gradient(ellipse at center, rgba(26, 42, 108, 0.2) 0%, rgba(26, 42, 108, 0.5) 40%, rgba(10, 21, 34, 0.9) 100%);
z-index: 11;
pointer-events: none;
}
#how-it-works .hero-fade-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: radial-gradient(circle at center 70%, transparent 0%, transparent 30%, rgba(26, 42, 108, 0.3) 50%, rgba(26, 42, 108, 0.6) 70%, rgba(26, 42, 108, 0.9) 90%, rgba(26, 42, 108, 1) 100%);
z-index: 18;
pointer-events: none;
}
#how-it-works .hero {
min-height: 85vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
z-index: 20;
padding: 0 15px;
}
#how-it-works .hero-content {
position: relative;
z-index: 21;
max-width: 800px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 40px;
}
#how-it-works .hero-tagline {
font-size: 0.9rem;
font-weight: 400;
margin-bottom: 1.5rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.95);
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
#how-it-works .text-container {
position: relative;
height: 100px;
overflow: visible;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
#how-it-works .scroll-text {
position: absolute;
width: 100%;
text-align: center;
font-size: 2.2rem;
font-weight: 800;
line-height: 1.1;
color: white;
text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7);
opacity: 0;
transform: translateY(100%);
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#how-it-works .scroll-text.active {
opacity: 1;
transform: translateY(0);
}
#how-it-works .scroll-text.inactive {
opacity: 0;
transform: translateY(-100%);
}
#how-it-works .arrow-btn {
display: inline-block;
margin-top: 1.5rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 21;
}
#how-it-works .arrow {
fill: white;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}
#how-it-works .arrow-btn:hover .arrow {
transform: translateY(4px);
}
#how-it-works .content-section {
position: relative;
z-index: 30;
margin-top: -30px;
}
#how-it-works .content-blur-container {
background: #000000;
position: relative;
width: 100%;
margin: 0;
padding-bottom: 80px;
/* Ensures the container has a layout and pushes the footer down */
}
/* Mobile: Ensure black background extends fully */
@media (max-width: 768px) {
#how-it-works .content-blur-container {
padding-bottom: 100px;
min-height: 100vh;
}
}
#how-it-works .container {
max-width: 900px;
margin: 0 auto;
padding: 0 15px;
}
#how-it-works .section-header {
text-align: center;
margin-bottom: 60px;
padding-top: 60px;
}
#how-it-works .section-title-wrapper {
display: inline-block;
overflow: hidden;
position: relative;
}
#how-it-works .section-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1rem;
color: white;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
position: relative;
display: inline-block;
line-height: 1.1;
}
#how-it-works .title-line {
display: block;
overflow: hidden;
}
#how-it-works .title-word {
display: inline-block;
transform: translateY(100%);
opacity: 0;
}
#how-it-works .section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, #6c63ff, #00d4ff);
border-radius: 2px;
}
#how-it-works .section-subtitle {
font-size: 1.1rem;
color: rgba(255, 255, 255, 0.9);
max-width: 500px;
margin: 20px auto 0;
line-height: 1.4;
font-weight: 400;
}
#how-it-works .cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
padding: 20px 30px 40px;
max-width: 1200px;
margin: 0 auto;
}
#how-it-works .step-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
padding: 30px 25px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #333;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
min-height: 280px;
position: relative;
overflow: hidden;
text-align: left;
}
#how-it-works .step-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 6px;
background: linear-gradient(90deg, #6c63ff, #00d4ff, #6c63ff);
background-size: 200% 100%;
animation: gradientShift 3s ease infinite;
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
#how-it-works .step-card:hover {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(108, 99, 255, 0.25);
}
#how-it-works .step-number {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background: linear-gradient(135deg, #6c63ff, #4a44b5);
color: white;
border-radius: 12px;
font-size: 1.3rem;
font-weight: 800;
margin: 0 0 20px 0;
box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3);
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
z-index: 2;
}
#how-it-works .step-card:hover .step-number {
transform: scale(1.05);
}
#how-it-works .step-title {
font-size: 1.4rem;
color: #2d3748;
font-weight: 700;
line-height: 1.2;
margin-bottom: 12px;
text-align: left;
width: 100%;
position: relative;
}
#how-it-works .step-description {
font-size: 0.95rem;
color: #718096;
line-height: 1.6;
text-align: left;
width: 100%;
font-weight: 400;
}
#how-it-works .user-types {
padding: 80px 0;
position: relative;
}
/* ===== Updated Flip Card Styles (Maintaining Flip Functionality) ===== */
.flip-card-front,
.flip-card-back {
background: var(--gradient-card, linear-gradient(135deg, rgba(14, 20, 36, 0.8) 0%, rgba(11, 17, 31, 0.6) 100%));
/* Dark, glassy gradient */
border: 1px solid rgba(255, 255, 255, 0.1);
/* Optional subtle border */
color: white;
/* White text */
backdrop-filter: blur(10px);
/* Glass effect */
box-shadow: var(--shadow-glass);
/* Use existing variable if defined, or define: 0 8px 32px rgba(0, 0, 0, 0.2); */
transition: all 0.3s ease;
/* Smooth transition for hover */
}
.flip-card-front:hover,
.flip-card-back:hover {
transform: translateY(-5px);
/* Slight lift on hover */
box-shadow: var(--shadow-lg), 0 10px 20px rgba(0, 0, 0, 0.1);
/* Add stronger shadow on hover */
}
/* New Grid for the two static cards */
.user-cards-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
/* Tighter gap for mobile */
max-width: 900px;
/* Reduced max-width for compact look */
margin: 0 auto;
}
@media (min-width: 768px) {
.user-cards-grid {
grid-template-columns: 1fr 1fr;
gap: 20px;
/* Reduced desktop gap */
}
}
/* Styles for the new static cards */
/* Styles for the new static cards */
.static-card {
border-radius: 16px;
padding: 0;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
height: 100%;
display: flex;
flex-direction: column;
backdrop-filter: blur(12px);
/* Glassmorphism */
-webkit-backdrop-filter: blur(12px);
}
/* Professional Card - Light Blue Theme (Black Text) */
.static-card.professional-card {
background: linear-gradient(135deg, #e0f2fe 0%, #bfdbfe 100%);
/* Light Blue Gradient */
border: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
/* Professional Card Typography Overrides */
.static-card.professional-card .card-title {
color: #0f172a;
/* Slate 900 (Black) */
}
.static-card.professional-card .benefits-intro {
color: #334155;
/* Slate 700 */
}
.static-card.professional-card .card-benefits li {
color: #1e293b;
/* Slate 800 */
}
.static-card.professional-card .card-benefits li::before {
color: #0f172a;
/* Black Bullets */
}
/* Professional Card Icon Override */
.static-card.professional-card .card-icon-wrapper {
background: rgba(0, 0, 0, 0.1);
/* Dark transparent */
}
.static-card.professional-card .card-icon-wrapper .material-symbols-outlined {
color: #000000;
}
/* Professional Card Button Override (Black Button) */
.static-card.professional-card .btn {
background: #000000;
/* Black Background */
color: #ffffff;
/* White Text */
}
.static-card.professional-card .btn:hover {
background: #1e293b;
/* Dark Slate Hover */
}
/* Business Card - Transparent Lighter Glass */
.static-card.business-card {
background: rgba(30, 41, 59, 0.6);
/* Slate 800 with opacity */
border: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
.static-card:hover {
transform: translateY(-3px);
/* Subtler lift */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}
.card-content {
padding: 30px;
/* Reduced desktop padding */
display: flex;
flex-direction: column;
height: 100%;
text-align: left;
}
/* Icon Wrapper */
.card-icon-wrapper {
width: 40px;
/* Smaller icon wrapper */
height: 40px;
background: rgba(255, 255, 255, 0.08);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
/* Reduced margin */
}
.card-icon-wrapper .material-symbols-outlined {
font-size: 20px;
/* Smaller icon */
color: #fff;
}
.card-header-group {
margin-bottom: 20px;
/* Reduced spacing */
}
.card-title {
font-size: 24px;
/* Scaled down title */
font-weight: 700;
color: white;
margin: 0;
letter-spacing: -0.01em;
line-height: 1.2;
}
/* Benefits Section */
.card-benefits {
flex-grow: 1;
margin-bottom: 30px;
/* Reduced margin */
}
.benefits-intro {
font-size: 14px;
/* Reduced size */
color: #94a3b8;
/* Slate 400 */
margin-bottom: 12px;
font-weight: 500;
}
.card-benefits ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.card-benefits li {
font-size: 15px;
color: #cbd5e1;
/* Slate 300 */
line-height: 1.6;
padding-left: 18px;
position: relative;
}
/* Custom Bullet Points */
.card-benefits li::before {
content: "•";
position: absolute;
left: 0;
color: #64748b;
font-weight: bold;
top: 1px;
}
/* Buttons */
.card-actions {
margin-top: auto;
}
.btn {
width: 100%;
padding: 12px 20px;
/* Compact button padding */
border-radius: 8px;
/* Slightly less rounded for professional feel, or keep pill? Let's try uniform rounded-lg */
border-radius: 9999px;
/* Keeping pill for consistency with UI */
font-weight: 600;
font-size: 14px;
/* Smaller button text */
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border: none;
height: 44px;
/* Fixed height for consistency */
}
/* White Button (Professionals) */
.btn--white {
background: #ffffff;
color: #0f172a;
}
.btn--white:hover {
background: #f8fafc;
}
/* Cyan Button (Businesses) */
.btn--cyan {
background: linear-gradient(135deg, #06b6d4 0%, #0ea5e9 100%);
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.btn--cyan:hover {
filter: brightness(1.1);
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}
.arrow-icon {
margin-left: 6px;
width: 16px;
/* Smaller arrow */
height: 16px;
transition: transform 0.2s;
}
.btn:hover .arrow-icon {
transform: translateX(3px);
}
/* Responsive adjustments - Compact Mobile Grid */
@media (max-width: 768px) {
.user-cards-grid {
grid-template-columns: 1fr;
/* Stacked layout */
gap: 20px;
padding: 0 15px;
}
.card-content {
padding: 24px 20px;
/* More spacious padding */
}
.card-icon-wrapper {
width: 36px;
height: 36px;
margin-bottom: 16px;
}
.card-icon-wrapper .material-symbols-outlined {
font-size: 20px;
}
.card-title {
font-size: 20px;
/* Larger title */
margin-bottom: 4px;
}
.card-header-group {
margin-bottom: 16px;
}
.card-benefits {
margin-bottom: 24px;
}
.benefits-intro {
font-size: 13px;
margin-bottom: 8px;
line-height: 1.4;
}
.card-benefits ul {
gap: 12px;
}
.card-benefits li {
font-size: 14px;
padding-left: 16px;
line-height: 1.5;
}
.btn {
padding: 0 16px;
font-size: 13px;
height: 42px;
/* Standard button height */
}
.static-card {
border-radius: 16px;
}
}
/* Remove old flip card styles that are now replaced */
#how-it-works .flip-card-front::before,
#how-it-works .flip-card-back::before,
#how-it-works .flip-card-container,
#how-it-works .flip-card,
#how-it-works .flip-card-front,
#how-it-works .flip-card-back,
#how-it-works .toggle-container {
display: none;
/* Hide all old flip card and toggle elements */
}
/* Refactored Toggle Switch using a proper label and checkbox */
#how-it-works .toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* The track of the switch */
#how-it-works .toggle-switch::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(10, 21, 34, 0.5);
border-radius: 34px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* The thumb of the switch */
#how-it-works .toggle-switch::after {
content: "";
position: absolute;
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background: linear-gradient(135deg, #8a85ff, #6c63ff);
border-radius: 50%;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
/* Active state styles */
#how-it-works .toggle-switch.active::before {
background-color: rgba(34, 211, 238, 0.2);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 8px rgba(34, 211, 238, 0.3);
}
#how-it-works .toggle-switch.active::after {
transform: translateX(26px);
background: linear-gradient(135deg, #22d3ee, #00d4ff);
}
#how-it-works .why-choose {
padding: 80px 0;
position: relative;
}
#how-it-works .benefits-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
padding: 0 20px;
max-width: 1200px;
margin: 0 auto;
}
#how-it-works .benefit-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 30px 25px;
text-align: center;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #333;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
min-height: 220px;
}
#how-it-works .benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #6c63ff, #00d4ff);
}
#how-it-works .benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 25px rgba(108, 99, 255, 0.25);
}
#how-it-works .benefit-icon {
font-size: 2.2rem;
margin-bottom: 15px;
color: #00d4ff;
text-align: left;
}
#how-it-works .benefit-title {
font-size: clamp(1.6rem, 4vw, 2.1rem);
margin-bottom: 12px;
color: #333;
line-height: 1.2;
text-align: left;
font-weight: 700;
text-transform: uppercase;
}
#how-it-works .benefit-description {
color: #555;
line-height: 1.5;
font-size: clamp(1.1rem, 3.5vw, 1.2rem);
text-align: left;
font-weight: 400;
}
/* --- Benefit Card Text Alignment & Size --- */
#how-it-works .progress-dot::after {
content: attr(data-label);
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: white;
color: #6c63ff;
padding: 3px 6px;
border-radius: 3px;
font-size: 0.65rem;
white-space: nowrap;
opacity: 0;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: none;
}
#how-it-works .progress-dot:hover::after {
opacity: 1;
}
@media (max-width: 768px) {
#how-it-works .cards-container {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 20px 15px 40px;
}
#how-it-works .step-card {
min-height: 260px;
padding: 25px 20px;
}
#how-it-works .step-number {
width: 45px;
height: 45px;
font-size: 1.2rem;
margin-bottom: 15px;
}
#how-it-works .step-title {
font-size: 1.2rem;
margin-bottom: 10px;
}
#how-it-works .step-description {
font-size: 0.9rem;
line-height: 1.5;
}
#how-it-works .flip-card-container {
max-width: 380px;
height: 380px;
}
#how-it-works .flip-card-front,
#how-it-works .flip-card-back {
padding: 20px 15px;
}
#how-it-works .flip-icon {
font-size: 2rem;
}
#how-it-works .flip-title {
font-size: 1.3rem;
}
#how-it-works .flip-features li {
font-size: 0.8rem;
}
#how-it-works .benefits-container {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 15px;
}
#how-it-works .benefit-card {
min-height: auto;
padding: 25px 20px;
}
#how-it-works .benefit-icon {
font-size: 2rem;
text-align: left;
}
#how-it-works .benefit-title {
font-size: clamp(1.8rem, 6vw, 2.5rem);
}
#how-it-works .benefit-description {
font-size: clamp(1.2rem, 4.5vw, 1.4rem);
}
/* --- Benefit Card Text Alignment & Size --- */
#how-it-works .benefit-card {
text-align: left;
/* Left-align all content in the card */
align-items: flex-start;
/* Align items to the start */
justify-content: center;
/* Center content vertically */
flex-grow: 1;
/* Allow card to grow */
}
#how-it-works .benefit-title {
text-align: left;
font-size: clamp(1.8rem, 6vw, 2.5rem);
/* Larger fluid font size for mobile */
text-transform: uppercase;
/* Ensure uppercase on mobile too */
line-height: 1.15;
/* Tighten line height */
margin-bottom: 12px;
/* Adjust space between title and description */
font-weight: 700;
/* Ensure title is bold */
}
#how-it-works .benefit-description {
text-align: left;
font-size: clamp(1.2rem, 4.5vw, 1.4rem);
/* Larger fluid font size for mobile */
line-height: 1.5;
/* Adjust line height for readability */
color: #4a5568;
/* Slightly darker text for better contrast */
}
}
@media (max-width: 480px) {
#how-it-works .cards-container {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
padding: 20px 10px 40px;
}
#how-it-works .step-card {
min-height: 240px;
padding: 20px 15px;
}
#how-it-works .step-number {
width: 40px;
height: 40px;
font-size: 1.1rem;
margin-bottom: 12px;
}
#how-it-works .step-title {
font-size: 1.1rem;
}
#how-it-works .step-description {
font-size: 0.85rem;
}
#how-it-works .flip-card-container {
max-width: 340px;
height: 360px;
}
#how-it-works .flip-card-front,
#how-it-works .flip-card-back {
padding: 18px 12px;
}
#how-it-works .flip-icon {
font-size: 1.8rem;
}
#how-it-works .flip-title {
font-size: 1.2rem;
}
#how-it-works .flip-features li {
font-size: 0.75rem;
}
#how-it-works .benefits-container {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 10px;
}
#how-it-works .benefit-card {
min-height: auto;
padding: 20px 15px;
}
#how-it-works .benefit-icon {
font-size: 1.8rem;
text-align: left;
}
#how-it-works .benefit-title {
font-size: clamp(1.6rem, 5vw, 2rem);
}
#how-it-works .benefit-description {
font-size: clamp(1.1rem, 4vw, 1.3rem);
}
}
@media (max-width: 360px) {
.user-cards-grid {
grid-template-columns: 1fr;
gap: 15px;
padding: 20px 10px 40px;
}
.step-card {
min-height: 220px;
padding: 18px 12px;
}
#how-it-works .step-number {
width: 35px;
height: 35px;
font-size: 1rem;
}
#how-it-works .step-title {
font-size: 1rem;
}
#how-it-works .step-description {
font-size: 0.8rem;
}
}
/* Rename the new how-it-works class to avoid conflict with the page ID */
.how-it-works-new {
/* This class is used on the inner section to distinguish it from the page wrapper */
}
/* --- END: NEW HOW IT WORKS PAGE STYLES --- */
/* ===== Solid Fix: Remove Whitespace on How It Works Page ===== */
/* Target the main How It Works page container */
#how-it-works.page {
padding-top: 0;
padding-bottom: 0;
}
/* Target the specific sections inside the page to remove vertical space */
#how-it-works .how-it-works-new,
#how-it-works .user-types,
#how-it-works .why-choose {
margin-top: 0;
margin-bottom: 0;
padding-top: 30px;
/* Keep some padding for breathing room, but remove large gaps */
padding-bottom: 30px;
}
/* ===== Solid Fix: Remove Mobile Scroll Flickering (How It Works Page) ===== */
#how-it-works .parallax-container,
#how-it-works .cards-container,
#how-it-works .flip-card-container,
#how-it-works .step-card,
#how-it-works .flip-card,
#how-it-works .flip-card-front,
#how-it-works .flip-card-back,
#how-it-works .section-title,
#how-it-works .section-subtitle {
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Optimize rendering */
will-change: transform, opacity;
}
/* Target the cards container or flip card container */
#how-it-works .cards-container,
/* For the grid of 4 cards */
#how-it-works .flip-card-container {
/* For the join community flip card */
/* Force Hardware Acceleration */
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
/* Optimize rendering */
will-change: transform, opacity;
}
/* Target the individual cards */
#how-it-works .step-card,
/* For the grid cards */
#how-it-works .flip-card {
/* For the flip card */
/* Optimize rendering */
will-change: transform, opacity;
}
/* Target the flip card's front and back faces if they have complex styles */
#how-it-works .flip-card-front,
#how-it-works .flip-card-back {
/* Optimize rendering */
will-change: transform;
}
/* If you have the scroll-triggered text animations, target them too */
#how-it-works .section-title,
#how-it-works .section-subtitle {
/* Optimize rendering */
will-change: transform, opacity;
}
/* If the parallax container from your HTML is within #how-it-works, target it */
#how-it-works .parallax-container {
/* Optimize rendering */
will-change: transform;
}
/* Target the section headers to reduce space around them */
#how-it-works .section-header {
margin-top: 0;
margin-bottom: 30px;
/* Reduced from 60px */
padding-top: 0;
padding-bottom: 0;
}
#how-it-works .cards-container {
padding-top: 0;
/* Remove padding above the cards */
}
/* Mobile Responsive Styles for How It Works Section */
@media (max-width: 768px) {
.how-it-works-new .container {
padding: 0 0.75rem !important;
}
.how-it-works-new .mb-10 {
margin-bottom: 1.5rem !important;
}
.how-it-works-new h1 {
font-size: 1.75rem !important;
margin-bottom: 1rem;
}
/* Make grid cards more compact */
.how-it-works-new .grid {
gap: 0.75rem !important;
}
.how-it-works-new .lg\:col-span-2 {
gap: 0.75rem !important;
}
/* Reduce card heights for mobile */
.how-it-works-new .h-72 {
height: 12rem !important;
}
.how-it-works-new .h-48 {
height: 10rem !important;
}
.how-it-works-new .min-h-\[496px\] {
min-height: 14rem !important;
}
/* Reduce padding inside cards */
.how-it-works-new .p-6 {
padding: 1rem !important;
}
.how-it-works-new .p-8 {
padding: 1.25rem !important;
}
/* Smaller text on mobile */
.how-it-works-new h3 {
font-size: 1.125rem !important;
}
.how-it-works-new .text-2xl {
font-size: 1.25rem !important;
}
.how-it-works-new .text-3xl {
font-size: 1.5rem !important;
}
/* Compact "Join the Revolution" card */
.how-it-works-new .col-span-1.lg\:col-span-3>div {
padding: 1.25rem !important;
}
}
/* ===== BENTO GRID SYSTEM FOR WHY CHOOSE SECTION ===== */
/* Bento Grid Base Styles */
.bento-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
width: 100%;
}
/* Pattern Utilities */
.pattern-dots {
background-image: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 20px 20px;
}
.pattern-lines {
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
linear-gradient(180deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
background-size: 30px 30px;
}
/* Gradient Text */
.gradient-text {
background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #ec4899 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Desktop Grid Layout (Default - 12 column grid) */
.bento-grid>div {
min-height: 200px;
}
/* Card 1: No Commission Fees - Large card */
.bento-grid>div:nth-child(1) {
grid-column: span 8;
grid-row: span 2;
}
/* Card 2: Quality Assurance - Tall card */
.bento-grid>div:nth-child(2) {
grid-column: span 4;
grid-row: span 3;
}
/* Card 3: Local Network - Wide card */
.bento-grid>div:nth-child(3) {
grid-column: span 8;
grid-row: span 1;
}
/* Tablet Breakpoint (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
.bento-grid {
gap: 1.25rem;
}
.bento-grid>div:nth-child(1) {
grid-column: span 7;
grid-row: span 2;
}
.bento-grid>div:nth-child(2) {
grid-column: span 5;
grid-row: span 2;
}
.bento-grid>div:nth-child(3) {
grid-column: span 12;
grid-row: span 1;
}
/* Reduce padding on cards */
.bento-grid>div {
padding: 2rem !important;
}
/* Scale down text */
.bento-grid h3 {
font-size: 2rem !important;
}
}
/* Mobile Breakpoint (≤768px) */
@media (max-width: 768px) {
.bento-grid {
display: flex;
flex-direction: column;
gap: 1rem;
}
.bento-grid>div {
grid-column: span 12 !important;
grid-row: span 1 !important;
min-height: auto !important;
}
/* Stack cards vertically */
.bento-grid>div:nth-child(1) {
order: 1;
}
.bento-grid>div:nth-child(2) {
order: 2;
}
.bento-grid>div:nth-child(3) {
order: 3;
}
}
/* ===== END BENTO GRID SYSTEM ===== */
/* Additional Why Choose Section Mobile Optimizations */
@media (max-width: 768px) {
/* Container and section spacing */
section:has(.bento-grid) {
padding: 2rem 0 !important;
}
section:has(.bento-grid) .max-w-7xl {
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* Header compact styling */
section:has(.bento-grid) .mb-20 {
margin-bottom: 2rem !important;
}
section:has(.bento-grid) h2 {
font-size: 0.65rem !important;
letter-spacing: 0.3em !important;
}
section:has(.bento-grid) h1 {
font-size: 1.75rem !important;
line-height: 1.2 !important;
}
section:has(.bento-grid) p.max-w-md {
font-size: 0.875rem !important;
line-height: 1.5 !important;
}
/* Card-specific refinements */
.bento-grid>div {
padding: 1.5rem !important;
border-radius: 1.5rem !important;
}
.bento-grid>div:nth-child(1) h3 {
font-size: 2rem !important;
}
.bento-grid>div:nth-child(2) h3 {
font-size: 1.75rem !important;
}
.bento-grid>div:nth-child(3) h3 {
font-size: 1.5rem !important;
}
/* Optimize spacing within cards */
.bento-grid .space-y-6 {
row-gap: 1rem !important;
}
}
/* Extra small devices */
@media (max-width: 480px) {
section:has(.bento-grid) h1 {
font-size: 1.5rem !important;
}
.bento-grid>div {
padding: 1.25rem !important;
}
.bento-grid>div:nth-child(1) h3 {
font-size: 1.75rem !important;
}
.bento-grid>div:nth-child(2) h3 {
font-size: 1.5rem !important;
}
.bento-grid>div:nth-child(3) h3 {
font-size: 1.25rem !important;
}
}
/* --- Refactored How It Works Section --- */
#how-it-works {
padding-top: 0;
padding-bottom: 0;
background:
radial-gradient(circle at 10% 10%, rgba(56, 189, 248, 0.18), transparent 40%),
radial-gradient(circle at 90% 15%, rgba(59, 130, 246, 0.12), transparent 36%),
linear-gradient(160deg, #020617 0%, #0f172a 44%, #1e293b 100%);
color: #e2e8f0;
}
#how-it-works .how-it-works-shell {
position: relative;
z-index: 2;
padding-bottom: 4.5rem;
}
#how-it-works .how-it-works-shell .container {
max-width: 1120px;
margin: 0 auto;
padding: 0 1.25rem;
}
#how-it-works .hiw-hero {
padding: 5.5rem 0 2.75rem;
text-align: center;
}
#how-it-works .hiw-eyebrow {
display: inline-block;
margin: 0 0 0.9rem 0;
padding: 0.35rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(148, 163, 184, 0.35);
background: rgba(15, 23, 42, 0.45);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #cbd5e1;
}
#how-it-works .hiw-title {
margin: 0;
font-size: clamp(2rem, 4.8vw, 3.45rem);
line-height: 1.08;
font-weight: 800;
color: #f8fafc;
}
#how-it-works .hiw-lead {
margin: 1rem auto 0;
max-width: 700px;
font-size: clamp(1rem, 2vw, 1.2rem);
color: #cbd5e1;
line-height: 1.6;
}
#how-it-works .hiw-steps {
padding: 0.5rem 0 2rem;
}
#how-it-works .hiw-step-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
}
#how-it-works .hiw-step-card {
border-radius: 1rem;
padding: 1.4rem;
background: rgba(15, 23, 42, 0.68);
border: 1px solid rgba(148, 163, 184, 0.24);
box-shadow: 0 16px 38px rgba(2, 6, 23, 0.35);
height: 100%;
}
#how-it-works .hiw-step-number {
width: 2.1rem;
height: 2.1rem;
border-radius: 0.65rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 0.9rem;
font-size: 0.95rem;
font-weight: 700;
color: #0f172a;
background: linear-gradient(135deg, #38bdf8, #60a5fa);
}
#how-it-works .hiw-step-title {
margin: 0;
color: #f8fafc;
font-size: 1.25rem;
line-height: 1.3;
font-weight: 700;
}
#how-it-works .hiw-step-text {
margin: 0.7rem 0 0;
color: #cbd5e1;
line-height: 1.65;
font-size: 0.96rem;
}
#how-it-works .hiw-user-types {
padding: 0.75rem 0 1.2rem;
}
#how-it-works .hiw-user-header {
text-align: center;
margin-bottom: 1.4rem;
}
#how-it-works .hiw-user-title {
margin: 0;
font-size: clamp(1.5rem, 3.4vw, 2.35rem);
line-height: 1.2;
color: #f8fafc;
font-weight: 800;
}
#how-it-works .hiw-user-subtitle {
margin: 0.7rem auto 0;
max-width: 700px;
font-size: 1rem;
line-height: 1.65;
color: #cbd5e1;
}
#how-it-works .hiw-role-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
#how-it-works .hiw-role-card {
display: flex;
flex-direction: column;
height: 100%;
border-radius: 1rem;
padding: 1.5rem;
border: 1px solid rgba(148, 163, 184, 0.25);
box-shadow: 0 16px 35px rgba(2, 6, 23, 0.33);
}
#how-it-works .hiw-role-card--customer {
background: linear-gradient(155deg, #e0f2fe 0%, #bfdbfe 100%);
}
#how-it-works .hiw-role-card--professional {
background: linear-gradient(160deg, rgba(15, 23, 42, 0.84) 0%, rgba(30, 41, 59, 0.88) 100%);
}
#how-it-works .hiw-role-top {
display: flex;
align-items: center;
gap: 0.75rem;
}
#how-it-works .hiw-role-icon {
width: 2.45rem;
height: 2.45rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
}
#how-it-works .hiw-role-card--customer .hiw-role-icon {
background: rgba(15, 23, 42, 0.12);
}
#how-it-works .hiw-role-card--professional .hiw-role-icon {
background: rgba(148, 163, 184, 0.14);
}
#how-it-works .hiw-role-card--customer .hiw-role-icon .material-symbols-outlined {
color: #0f172a;
}
#how-it-works .hiw-role-card--professional .hiw-role-icon .material-symbols-outlined {
color: #22d3ee;
}
#how-it-works .hiw-role-name {
margin: 0;
font-size: 1.38rem;
font-weight: 700;
}
#how-it-works .hiw-role-card--customer .hiw-role-name {
color: #0f172a;
}
#how-it-works .hiw-role-card--professional .hiw-role-name {
color: #f8fafc;
}
#how-it-works .hiw-role-list {
list-style: none;
margin: 1rem 0 1.25rem;
padding: 0;
display: grid;
gap: 0.65rem;
flex: 1 1 auto;
}
#how-it-works .hiw-role-list li {
position: relative;
padding-left: 1rem;
line-height: 1.6;
}
#how-it-works .hiw-role-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.55rem;
width: 0.35rem;
height: 0.35rem;
border-radius: 999px;
}
#how-it-works .hiw-role-card--customer .hiw-role-list li {
color: #1e293b;
}
#how-it-works .hiw-role-card--customer .hiw-role-list li::before {
background: #0f172a;
}
#how-it-works .hiw-role-card--professional .hiw-role-list li {
color: #d1d5db;
}
#how-it-works .hiw-role-card--professional .hiw-role-list li::before {
background: #22d3ee;
}
#how-it-works .hiw-role-actions {
margin-top: auto;
}
#how-it-works .hiw-role-actions .btn,
#how-it-works .hiw-cta-actions .btn {
width: auto;
min-width: 220px;
}
#how-it-works .hiw-role-actions .material-symbols-outlined {
margin-left: 0.5rem;
font-size: 1.2rem;
}
#how-it-works .hiw-cta-wrap {
padding-top: 1rem;
}
#how-it-works .hiw-cta {
border-radius: 1rem;
border: 1px solid rgba(148, 163, 184, 0.28);
background: linear-gradient(160deg, rgba(30, 64, 175, 0.94), rgba(30, 58, 138, 0.95));
padding: 1.35rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.25rem;
box-shadow: 0 20px 40px rgba(2, 6, 23, 0.3);
}
#how-it-works .hiw-cta-eyebrow {
margin: 0;
font-size: 0.74rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: rgba(219, 234, 254, 0.92);
font-weight: 700;
}
#how-it-works .hiw-cta-title {
margin: 0.35rem 0 0;
color: #f8fafc;
font-size: clamp(1.2rem, 3vw, 1.75rem);
line-height: 1.25;
font-weight: 800;
}
#how-it-works .hiw-cta-actions {
display: flex;
gap: 0.65rem;
flex-wrap: wrap;
}
@media (max-width: 992px) {
#how-it-works .hiw-step-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#how-it-works .hiw-role-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
#how-it-works .hiw-step-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
#how-it-works .how-it-works-shell {
padding-bottom: 3rem;
}
#how-it-works .hiw-hero {
padding: 4.25rem 0 2rem;
}
#how-it-works .hiw-role-actions .btn,
#how-it-works .hiw-cta-actions .btn {
width: 100%;
min-width: 0;
}
#how-it-works .hiw-cta {
flex-direction: column;
align-items: flex-start;
}
#how-it-works .hiw-cta-actions {
width: 100%;
}
}
/* Form Styles */
.form-section {
margin-bottom: var(--space-24);
}
.form-section h4 {
margin-bottom: var(--space-20);
color: var(--color-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
border-bottom: 2px solid rgba(99, 102, 241, 0.25);
padding-bottom: var(--space-8);
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-16);
}
.form-group {
margin-bottom: var(--space-20);
}
.form-label {
display: block;
margin-bottom: var(--space-8);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
color: var(--color-text);
}
.form-control {
display: block;
width: 100%;
padding: clamp(0.75rem, 3vw, 0.875rem) clamp(1rem, 4vw, 1.125rem);
font-size: clamp(0.875rem, 3vw, 1rem);
line-height: 1.5;
color: #000000;
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-base);
transition: all var(--duration-fast) var(--ease-standard);
min-height: 44px;
/* iOS touch target minimum */
touch-action: manipulation;
backdrop-filter: var(--blur-glass);
}
.form-control:focus {
border-color: var(--color-primary);
background: rgba(255, 255, 255, 1);
outline: none;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
color: #000000;
}
/* Enhanced Form Validation Styles */
.form-control.error {
border-color: var(--color-error);
background-color: rgba(var(--color-error-rgb), 0.05);
}
.form-control.error:focus {
border-color: var(--color-error);
box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.2);
}
.field-error {
display: block;
font-size: var(--font-size-xs);
color: var(--color-error);
margin-top: var(--space-4);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
}
/* Enhanced Button Styles */
.btn-spinner {
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Form Actions */
.form-actions {
display: flex;
gap: var(--space-16);
justify-content: flex-end;
margin-top: var(--space-32);
padding-top: var(--space-24);
border-top: 1px solid var(--color-border);
}
@media (max-width: 768px) {
.form-actions {
flex-direction: column-reverse;
gap: var(--space-12);
}
}
/* Enhanced Mobile Responsiveness */
@media (max-width: 768px) {
.form-page {
padding: var(--space-20);
margin: var(--space-16);
border-radius: var(--radius-md);
}
.page-title {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-8);
}
.page-subtitle {
font-size: var(--font-size-base);
margin-bottom: var(--space-16);
}
.form-section h4 {
font-size: var(--font-size-lg);
margin-bottom: var(--space-16);
}
.form-row {
grid-template-columns: 1fr;
gap: var(--space-12);
}
.form-group {
margin-bottom: var(--space-16);
}
.form-control {
font-size: var(--font-size-base);
padding: var(--space-12) var(--space-14);
}
.btn {
width: 100%;
justify-content: center;
padding: var(--space-12) var(--space-20);
}
.form-progress {
margin-bottom: var(--space-20);
}
.form-note {
padding: var(--space-12);
margin: var(--space-16) 0;
}
.keyword-chips {
gap: var(--space-4);
}
.keyword-chip {
font-size: var(--font-size-xs);
padding: var(--space-3) var(--space-8);
}
}
@media (max-width: 480px) {
.form-page {
padding: var(--space-16);
margin: var(--space-8);
border-radius: var(--radius-sm);
}
.page-header {
margin-bottom: var(--space-24);
}
.page-title {
font-size: var(--font-size-2xl);
line-height: var(--line-height-tight);
}
.page-subtitle {
font-size: var(--font-size-sm);
}
.form-section {
margin-bottom: var(--space-24);
padding-bottom: var(--space-16);
}
.form-section h4 {
font-size: var(--font-size-base);
margin-bottom: var(--space-12);
}
.form-control {
padding: var(--space-10) var(--space-12);
font-size: var(--font-size-sm);
min-height: 48px;
/* Larger touch target */
}
.form-label {
font-size: var(--font-size-xs);
margin-bottom: var(--space-4);
}
.form-group small {
font-size: var(--font-size-xs);
margin-top: var(--space-2);
}
.btn {
padding: var(--space-12) var(--space-16);
font-size: var(--font-size-sm);
min-height: 48px;
}
.form-actions {
margin-top: var(--space-24);
padding-top: var(--space-16);
}
.back-button {
margin-bottom: var(--space-16);
font-size: var(--font-size-xs);
padding: var(--space-8) var(--space-12);
}
.form-progress-text {
font-size: var(--font-size-xs);
top: -20px;
}
.notification-container {
top: calc(var(--nav-h) + var(--space-8));
right: var(--space-8);
left: var(--space-8);
}
.notification {
padding: var(--space-12) var(--space-16);
}
.notification-content {
font-size: var(--font-size-xs);
}
}
/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
.form-page {
padding: var(--space-16);
margin: var(--space-8);
}
.page-header {
margin-bottom: var(--space-16);
}
.form-section {
margin-bottom: var(--space-16);
}
.form-actions {
margin-top: var(--space-16);
}
}
/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.form-control {
border-width: 1px;
}
.btn {
border-width: 1px;
}
}
/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.form-progress-bar {
transition: none;
}
.notification {
transition: none;
}
.btn {
transition: none;
}
.form-control {
transition: none;
}
}
/* Form Note */
.form-note {
background-color: rgba(var(--color-info-rgb), 0.1);
border: 1px solid rgba(var(--color-info-rgb), 0.2);
border-radius: var(--radius-base);
padding: var(--space-16);
margin: var(--space-24) 0;
}
.form-note p {
margin: 0;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-normal);
}
/* Enhanced File Input Styles */
.form-control[type="file"] {
padding: var(--space-8) var(--space-12);
background-color: var(--color-surface);
border: 2px dashed var(--color-border);
cursor: pointer;
}
.form-control[type="file"]:hover {
border-color: var(--color-primary);
background-color: rgba(var(--color-primary-rgb), 0.05);
}
.form-control[type="file"]:focus {
border-style: solid;
border-color: var(--color-primary);
}
/* Screen Reader Only */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Form Progress Indicator */
.form-progress {
position: relative;
width: 100%;
height: 8px;
background-color: rgba(var(--color-primary-rgb), 0.1);
border-radius: var(--radius-full);
margin-bottom: var(--space-24);
overflow: hidden;
}
.form-progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
border-radius: var(--radius-full);
transition: width var(--duration-normal) var(--ease-standard);
position: relative;
}
.form-progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.form-progress-text {
position: absolute;
top: -24px;
right: 0;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.form-progress.complete .form-progress-bar {
background: linear-gradient(90deg, var(--color-success), var(--color-success));
}
.form-progress.complete .form-progress-text {
color: var(--color-success);
font-weight: var(--font-weight-semibold);
}
/* Enhanced Notification System */
.notification-container {
position: fixed;
top: calc(var(--nav-h) + var(--space-16));
right: var(--space-16);
z-index: 1000;
display: flex;
flex-direction: column;
gap: var(--space-12);
max-width: 400px;
pointer-events: none;
}
.notification {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-16) var(--space-20);
box-shadow: var(--shadow-lg);
display: flex;
align-items: center;
gap: var(--space-12);
opacity: 0;
transform: translateX(100%);
transition: all var(--duration-normal) var(--ease-standard);
pointer-events: auto;
backdrop-filter: var(--blur-glass);
}
.notification.show {
opacity: 1;
transform: translateX(0);
}
.notification.success {
border-color: var(--color-success);
background-color: rgba(var(--color-success-rgb), 0.1);
}
.notification.error {
border-color: var(--color-error);
background-color: rgba(var(--color-error-rgb), 0.1);
}
.notification.warning {
border-color: var(--color-warning);
background-color: rgba(var(--color-warning-rgb), 0.1);
}
.notification.info {
border-color: var(--color-info);
background-color: rgba(var(--color-info-rgb), 0.1);
}
.notification-icon {
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.notification-content {
flex: 1;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text);
line-height: var(--line-height-normal);
}
.notification-close {
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: var(--space-4);
border-radius: var(--radius-sm);
transition: all var(--duration-fast) var(--ease-standard);
flex-shrink: 0;
}
.notification-close:hover {
background-color: rgba(var(--color-text-secondary-rgb), 0.1);
color: var(--color-text);
}
@media (max-width: 768px) {
.notification-container {
top: calc(var(--nav-h) + var(--space-12));
right: var(--space-12);
left: var(--space-12);
max-width: none;
}
}
.form-control::placeholder {
color: #666666;
opacity: 0.8;
}
textarea.form-control {
resize: vertical;
min-height: 100px;
}
select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-16) center;
background-size: 16px;
padding-right: var(--space-32);
}
.form-group small {
color: var(--color-text);
font-size: var(--font-size-xs);
margin-top: var(--space-4);
display: block;
font-weight: var(--font-weight-medium);
opacity: 0.9;
}
/* Compact image preview for profile picture */
.image-preview {
margin-top: var(--space-12);
display: none;
width: 120px;
height: 120px;
border-radius: var(--radius-md);
overflow: hidden;
border: 2px solid var(--color-primary);
background: rgba(255, 255, 255, 0.06);
position: relative;
box-shadow: var(--shadow-md);
transition: all var(--duration-normal) var(--ease-standard);
}
.image-preview:hover {
transform: scale(1.02);
box-shadow: var(--shadow-lg);
}
.image-preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.image-preview::after {
content: '✓';
position: absolute;
top: var(--space-4);
right: var(--space-4);
background: var(--color-success);
color: white;
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
box-shadow: var(--shadow-sm);
}
/* File Label Styles */
.file-label {
display: block;
margin-top: var(--space-8);
font-size: var(--font-size-sm);
color: var(--color-primary);
font-weight: var(--font-weight-medium);
padding: var(--space-6) var(--space-8);
background: rgba(var(--color-primary-rgb), 0.1);
border-radius: var(--radius-sm);
border: 1px solid rgba(var(--color-primary-rgb), 0.2);
transition: all var(--duration-fast) var(--ease-standard);
}
.file-label:hover {
background: rgba(var(--color-primary-rgb), 0.15);
border-color: rgba(var(--color-primary-rgb), 0.3);
}
/* Optional Label Styling */
.optional-label {
color: var(--color-text-secondary);
font-weight: var(--font-weight-normal);
font-size: var(--font-size-xs);
font-style: italic;
}
/* Phone Input Group Styling */
.phone-input-group {
display: flex;
align-items: center;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-base);
overflow: hidden;
transition: all var(--duration-fast) var(--ease-standard);
}
.phone-input-group:focus-within {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}
.country-code {
background: rgba(var(--color-primary-rgb), 0.1);
color: var(--color-primary);
padding: var(--space-12) var(--space-16);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
border-right: 1px solid var(--color-glass-border);
white-space: nowrap;
user-select: none;
}
.phone-input-group .form-control {
border: none;
background: transparent;
flex: 1;
padding-left: var(--space-12);
}
.phone-input-group .form-control:focus {
box-shadow: none;
outline: none;
}
/* Keyword suggestions */
.keyword-suggestion {
margin-top: var(--space-8);
}
.keyword-suggestion__label {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--space-6);
font-weight: var(--font-weight-medium);
}
.keyword-chips {
display: flex;
flex-wrap: wrap;
gap: var(--space-6);
align-items: center;
}
.keyword-chip {
background: rgba(99, 102, 241, 0.1) !important;
color: #6366f1 !important;
border: 1px solid rgba(99, 102, 241, 0.2) !important;
padding: var(--space-4) var(--space-10);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
cursor: pointer;
user-select: none;
transition: all var(--duration-fast) var(--ease-standard);
backdrop-filter: blur(10px);
letter-spacing: 0.01em;
}
.keyword-chip:hover {
background: rgba(99, 102, 241, 0.15) !important;
border-color: rgba(99, 102, 241, 0.3) !important;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.15);
}
.keyword-chip:active {
transform: translateY(0);
}
.keyword-chip:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}
.availability-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--space-8);
max-width: 500px;
margin-top: var(--space-8);
}
.availability-day {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
padding: var(--space-12) var(--space-8);
border-radius: var(--radius-base);
background: rgba(255, 255, 255, 0.05);
border: 2px solid var(--color-border);
transition: all var(--duration-fast) var(--ease-standard);
color: var(--color-text);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
text-align: center;
min-height: 60px;
position: relative;
}
.availability-day:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--color-primary);
color: var(--color-text);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.availability-day input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.availability-day input[type="checkbox"]:checked+span {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}
.availability-day input[type="checkbox"]:checked {
background: rgba(var(--color-primary-rgb), 0.1);
border-color: var(--color-primary);
}
/* Mobile responsiveness for availability grid */
@media (max-width: 768px) {
.availability-grid {
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
max-width: 100%;
}
.availability-day {
min-height: 50px;
padding: var(--space-8) var(--space-6);
font-size: var(--font-size-xs);
}
}
@media (max-width: 480px) {
.availability-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.availability-day {
min-height: 45px;
padding: var(--space-6) var(--space-4);
font-size: var(--font-size-xs);
}
}
.time-range-group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
align-items: end;
max-width: 400px;
}
.form-group-inline {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.form-group-inline label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
}
.day-availability label {
display: flex;
align-items: center;
gap: var(--space-8);
cursor: pointer;
padding: var(--space-12);
border-radius: var(--radius-base);
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-glass-border);
transition: all var(--duration-fast) var(--ease-standard);
color: var(--color-text);
font-weight: var(--font-weight-medium);
}
.day-availability label:hover {
background: rgba(255, 255, 255, 0.12);
border-color: var(--color-primary);
color: var(--color-text);
}
.day-availability input[type="checkbox"]:checked+span {
color: var(--color-primary);
}
.form-note {
padding: var(--space-20);
border-radius: var(--radius-lg);
margin: var(--space-32) auto var(--space-24);
max-width: 600px;
background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.15));
border: 1px solid rgba(99, 102, 241, 0.3);
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
backdrop-filter: blur(10px);
text-align: center;
position: relative;
z-index: 1;
}
.form-note p {
margin: 0;
color: var(--color-text);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: 1.6;
text-align: center;
}
.form-actions {
display: flex;
gap: var(--space-16);
justify-content: flex-end;
margin-top: var(--space-32);
padding-top: var(--space-24);
border-top: 1px solid var(--color-glass-border);
}
/* Notification System */
.notification {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
z-index: 10001;
padding: 24px 32px;
border-radius: 16px;
color: white;
font-weight: 500;
font-size: 16px;
line-height: 1.5;
max-width: 500px;
min-width: 300px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
backdrop-filter: blur(20px);
opacity: 0;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
border: 1px solid rgba(255, 255, 255, 0.2);
text-align: center;
}
.notification.show {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
/* Notification overlay background */
.notification::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(4px);
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.notification.show::before {
opacity: 1;
}
.notification--success {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.9), rgba(16, 185, 129, 0.9));
border-color: rgba(34, 197, 94, 0.3);
}
.notification--error {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.9), rgba(220, 38, 38, 0.9));
border-color: rgba(239, 68, 68, 0.3);
}
.notification--info {
background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9));
border-color: rgba(59, 130, 246, 0.3);
}
.notification--warning {
background: linear-gradient(135deg, rgba(245, 158, 11, 0.9), rgba(217, 119, 6, 0.9));
border-color: rgba(245, 158, 11, 0.3);
}
.welcome-notification {
position: fixed !important;
top: 50% !important;
left: 50% !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
transform: translate(-50%, -50%) !important;
opacity: 1;
display: flex;
flex-direction: column;
align-items: stretch;
overflow: hidden;
padding: 0 !important;
min-width: 0 !important;
width: min(520px, calc(100vw - 12px));
max-width: 520px;
text-align: left;
background: linear-gradient(175deg, rgba(3, 20, 36, 0.98), rgba(5, 36, 58, 0.97));
border: 1px solid rgba(125, 211, 252, 0.42);
box-shadow: 0 30px 72px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(125, 211, 252, 0.12);
transition: none;
border-radius: 22px;
}
.welcome-art {
position: relative;
width: 100%;
min-height: 350px;
background:
linear-gradient(180deg, rgba(6, 16, 28, 0.08), rgba(4, 18, 30, 0.18)),
url('/images/categories/nagaland_no_star.png'),
url('/images/og-image.png');
background-size: cover;
background-position: center 40%;
background-repeat: no-repeat;
border-bottom: 1px solid rgba(125, 211, 252, 0.22);
filter: brightness(1.16) contrast(1.08) saturate(1.08);
}
.welcome-art::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(7, 17, 30, 0.03) 0%, rgba(7, 17, 30, 0.14) 100%);
}
.welcome-notification .notification-content {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 22px 26px;
}
.welcome-notification .welcome-brand {
color: rgba(186, 230, 253, 0.88);
font-size: 0.75rem;
letter-spacing: 0.16em;
font-weight: 700;
text-transform: uppercase;
}
.welcome-notification .welcome-title {
color: #ecfeff;
font-size: 2rem;
letter-spacing: 0.06em;
font-weight: 800;
line-height: 1.05;
margin: 0;
}
.welcome-notification .welcome-text {
color: rgba(236, 254, 255, 0.86);
font-size: 0.98rem;
line-height: 1.55;
margin: 0;
max-width: 38ch;
}
.welcome-close {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 800;
line-height: 1;
color: rgba(7, 30, 50, 0.95);
background: rgba(224, 242, 254, 0.9);
border: 1px solid rgba(186, 230, 253, 0.92);
box-shadow: 0 8px 20px rgba(2, 12, 27, 0.3);
transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.welcome-close:hover {
transform: scale(1.05);
background: #ffffff;
color: #05253f;
}
.welcome-close:focus-visible {
outline: 2px solid rgba(125, 211, 252, 0.95);
outline-offset: 2px;
}
.welcome-notification::before {
display: none;
}
.welcome-overlay {
position: fixed;
inset: 0;
z-index: 10040;
display: grid;
place-items: center;
min-height: 100vh;
min-height: 100dvh;
padding: 10px;
background: rgba(2, 8, 18, 0.36);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.16s ease;
}
.welcome-overlay.show {
opacity: 1;
}
/* Mobile notification styles */
@media (max-width: 768px) {
.notification {
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
max-width: 90vw;
min-width: 280px;
padding: 20px 24px;
font-size: 15px;
}
.notification.show {
transform: translate(-50%, -50%) scale(1);
}
.welcome-notification {
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: min(520px, calc(100vw - 10px));
max-width: 520px;
border-radius: 20px;
}
.welcome-art {
min-height: 300px;
border-bottom: 1px solid rgba(125, 211, 252, 0.2);
background-position: center 42%;
filter: brightness(1.13) contrast(1.06) saturate(1.04);
}
.welcome-notification .notification-content {
padding: 18px 16px 20px;
gap: 6px;
}
.welcome-notification .welcome-brand {
font-size: 0.7rem;
letter-spacing: 0.12em;
}
.welcome-notification .welcome-title {
font-size: 1.85rem;
}
.welcome-notification .welcome-text {
font-size: 0.92rem;
line-height: 1.48;
}
.welcome-close {
top: 8px;
right: 8px;
width: 38px;
height: 38px;
font-size: 1rem;
}
}
/* Progress Notification Styles - Modern & Professional */
.progress-notification {
background: linear-gradient(135deg, rgba(30, 30, 40, 0.98), rgba(20, 20, 30, 0.98)) !important;
border: 1px solid rgba(255, 255, 255, 0.15) !important;
padding: 24px 28px !important;
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}
.progress-title {
font-size: 17px;
font-weight: 600;
color: #ffffff;
margin-bottom: 18px;
letter-spacing: -0.2px;
display: flex;
align-items: center;
gap: 10px;
}
.progress-title::before {
content: '';
width: 3px;
height: 18px;
background: linear-gradient(180deg, #3b82f6, #1d4ed8);
border-radius: 2px;
}
.progress-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.progress-step {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.04);
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-step.pending {
opacity: 0.6;
}
.progress-step.success {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(16, 185, 129, 0.08));
border-color: rgba(34, 197, 94, 0.3);
animation: successPulse 0.6s ease-out;
}
.progress-step.error {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(220, 38, 38, 0.08));
border-color: rgba(239, 68, 68, 0.3);
animation: shake 0.5s ease-in-out;
}
@keyframes successPulse {
0% {
transform: scale(0.98);
opacity: 0.8;
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
opacity: 1;
}
}
@keyframes shake {
0%,
100% {
transform: translateX(0);
}
25% {
transform: translateX(-4px);
}
75% {
transform: translateX(4px);
}
}
.progress-spinner {
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-top-color: #3b82f6;
border-radius: 50%;
animation: spin 0.8s linear infinite;
flex-shrink: 0;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.progress-icon {
font-size: 18px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.progress-step.success .progress-icon {
animation: scaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes scaleIn {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
opacity: 1;
}
}
.progress-text {
flex: 1;
font-size: 14px;
font-weight: 500;
color: rgba(255, 255, 255, 0.9);
letter-spacing: -0.1px;
}
.progress-step.pending .progress-text {
color: rgba(255, 255, 255, 0.6);
}
.progress-step.success .progress-text {
color: #10b981;
}
.progress-step.error .progress-text {
color: #ef4444;
}
/* Button spinner for submit button */
.btn-spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #ffffff;
border-radius: 50%;
animation: spin 0.7s linear infinite;
vertical-align: middle;
margin-right: 8px;
}
/* Error States */
.form-control.error {
border-color: var(--color-error);
background: rgba(239, 68, 68, 0.1);
}
.error-message {
color: var(--color-error);
font-size: var(--font-size-sm);
margin-top: var(--space-4);
}
.success-message {
color: var(--color-success);
font-size: var(--font-size-sm);
margin-top: var(--space-4);
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes shimmer {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
@keyframes borderRotate {
0% {
background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
}
25% {
background: linear-gradient(225deg, #6366f1 0%, #22d3ee 100%);
}
50% {
background: linear-gradient(315deg, #6366f1 0%, #22d3ee 100%);
}
75% {
background: linear-gradient(45deg, #6366f1 0%, #22d3ee 100%);
}
100% {
background: linear-gradient(135deg, #6366f1 0%, #22d3ee 100%);
}
}
/* Status Notifications */
.status {
display: inline-flex;
align-items: center;
padding: var(--space-12) var(--space-20);
border-radius: var(--radius-full);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
backdrop-filter: var(--blur-glass);
}
.status--success {
background: rgba(16, 185, 129, 0.2);
color: var(--color-success);
border: 1px solid rgba(16, 185, 129, 0.3);
}
.status--error {
background: rgba(239, 68, 68, 0.2);
color: var(--color-error);
border: 1px solid rgba(239, 68, 68, 0.3);
}
.status--warning {
background: rgba(245, 158, 11, 0.2);
color: var(--color-warning);
border: 1px solid rgba(245, 158, 11, 0.3);
}
/* Mobile Navigation Toggle */
.nav__toggle {
display: none;
flex-direction: column;
cursor: pointer;
gap: var(--space-4);
padding: 0.5rem;
background: none;
border: none;
order: 3;
}
.nav__toggle span {
width: 24px;
height: 2px;
background-color: #6b7280;
transition: all var(--duration-fast) var(--ease-standard);
border-radius: var(--radius-full);
}
/* Responsive Design - Additional screen size optimizations */
@media (max-width: 768px) {
.hero__title {
font-size: clamp(2.5rem, 8vw, 3.5rem);
}
.title-accent {
display: block;
}
.hero__title--one-line {
font-size: clamp(2.4rem, 8.4vw, 3.4rem);
}
.hero__title--one-line .title-accent {
display: inline-block;
}
.hero__subtitle {
font-size: var(--font-size-lg);
}
.categories__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-12);
max-width: 100%;
}
.filters {
grid-template-columns: 1fr;
}
.filters--compact {
flex-direction: column;
gap: var(--space-8);
}
.filters--compact .form-group {
min-width: 100%;
}
.steps {
grid-template-columns: 1fr;
}
.steps-row {
grid-template-columns: 1fr !important;
gap: var(--space-20) !important;
margin-bottom: var(--space-24) !important;
}
.steps-separator {
font-size: var(--font-size-xl) !important;
margin: var(--space-24) 0 !important;
}
.step--register {
max-width: 100% !important;
}
.step {
min-height: 240px !important;
padding: var(--space-24) !important;
}
.step__number {
width: 64px !important;
height: 64px !important;
font-size: var(--font-size-xl) !important;
}
.step__title {
font-size: var(--font-size-xl) !important;
}
.step__description {
font-size: var(--font-size-base) !important;
}
.how-it-works__sections {
grid-template-columns: 1fr;
}
.benefits__grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.form-actions {
flex-direction: column-reverse;
}
.availability-grid {
grid-template-columns: repeat(2, 1fr);
}
.trusted__partners {
height: 60px;
}
.trusted__partners::before,
.trusted__partners::after {
width: 60px;
}
.partners-carousel {
gap: var(--space-20);
}
.partner-item {
min-width: 120px;
height: 50px;
padding: var(--space-12) var(--space-16);
}
.partner-logo {
width: 24px;
height: 24px;
font-size: 1.2rem;
}
.partner-name {
font-size: var(--font-size-xs);
}
.form-page {
margin: var(--space-16);
padding: var(--space-24);
}
/* Adaptive cards spacing */
.category-card,
.step,
.benefit,
.featured__placeholder,
.work-requests-preview__placeholder {
padding: var(--space-24);
}
}
@media (max-width: 480px) {
.container {
padding-left: var(--space-16);
padding-right: var(--space-16);
}
.categories__grid {
gap: var(--space-8);
}
.category-card {
padding: var(--space-20);
min-height: 140px;
}
.category-card__icon {
font-size: 2rem;
margin-bottom: var(--space-12);
}
.category-card__name {
font-size: var(--font-size-base);
margin-bottom: var(--space-6);
}
.category-card__description {
font-size: var(--font-size-xs);
}
.category-card {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.hero {
padding: var(--space-24) 0;
min-height: 70vh;
}
.categories,
.featured,
.work-requests-preview,
.trusted {
padding: var(--space-24) 0;
}
.page-header {
padding: calc(64px + var(--space-16)) 0 var(--space-16) 0;
}
.hero__cta {
font-size: var(--font-size-base);
padding: var(--space-16) var(--space-24);
}
.trusted__partners {
height: 60px;
}
.partners-carousel {
gap: var(--space-20);
}
.partner-item {
min-width: 120px;
height: 50px;
padding: var(--space-12) var(--space-16);
}
.partner-logo {
width: 24px;
height: 24px;
font-size: 1.2rem;
}
.partner-name {
font-size: var(--font-size-xs);
}
.trusted {
padding: var(--space-20) 0;
}
.trusted__partners {
height: 50px;
}
.trusted__partners::before,
.trusted__partners::after {
width: 40px;
}
.partners-carousel {
gap: var(--space-16);
}
.partner-item {
min-width: 100px;
height: 40px;
padding: var(--space-8) var(--space-12);
}
.partner-logo {
width: 20px;
height: 20px;
font-size: 1rem;
}
.partner-name {
font-size: var(--font-size-xs);
}
/* Footer mobile optimizations */
.footer__content {
flex-direction: column;
text-align: center;
gap: var(--space-20);
}
.footer__links {
gap: var(--space-16);
}
.how-it-works__sections {
grid-template-columns: 1fr;
}
.form-page {
margin: var(--space-8);
padding: var(--space-20);
}
.hero__badge {
font-size: var(--font-size-xs);
}
.section-title {
font-size: var(--font-size-3xl);
}
.section-subtitle {
font-size: var(--font-size-base);
}
.categories .section-header {
margin-bottom: var(--space-24);
}
.categories .section-title {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-12);
}
.categories .section-subtitle {
font-size: var(--font-size-sm);
line-height: 1.4;
}
.registration-options__grid {
gap: var(--space-16);
}
.registration-option {
min-height: 200px;
padding: var(--space-20);
}
.registration-option__icon {
font-size: 2rem;
margin-bottom: var(--space-12);
}
.registration-option h4 {
font-size: var(--font-size-base);
margin-bottom: var(--space-8);
}
.registration-option p {
font-size: var(--font-size-sm);
margin-bottom: var(--space-16);
}
.registration-option {
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
}
/* Larger screens */
@media (min-width: 1440px) {
.container {
max-width: 1280px;
}
.hero {
min-height: calc(100vh - var(--nav-h));
}
}
/* Motion preferences: reduce where requested */
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
/* Desktop navigation adaptations */
@media (min-width: 1024px) {
.nav__menu {
gap: var(--space-24);
}
.nav__link {
font-size: var(--font-size-md);
padding: var(--space-8) var(--space-12);
}
body.white-theme .nav__link {
color: #334155;
}
body.white-theme .nav__link:hover,
body.white-theme .nav__link.active {
background: rgba(15, 23, 42, 0.06);
color: var(--color-primary);
}
body.scroll-light .nav__link {
color: #334155;
}
body.scroll-light .nav__link:hover,
body.scroll-light .nav__link.active {
background: rgba(15, 23, 42, 0.06);
color: var(--color-primary);
}
}
/* Legal Pages */
.legal-content {
max-width: 800px;
margin: 0 auto;
padding: var(--space-24);
}
.legal-section {
margin-bottom: var(--space-24);
}
.legal-section:last-child {
margin-bottom: 0;
}
.legal-section h3 {
color: var(--color-text);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--space-16) 0;
padding-bottom: var(--space-8);
border-bottom: 2px solid rgba(var(--color-primary-rgb, 6, 182, 212), 0.1);
position: relative;
}
.legal-section h3::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 40px;
height: 2px;
background: var(--color-primary);
border-radius: var(--radius-full);
}
.legal-section p {
color: var(--color-text);
font-size: var(--font-size-base);
line-height: 1.6;
margin: 0 0 var(--space-12) 0;
opacity: 0.9;
}
.legal-section ul {
margin: var(--space-16) 0;
padding-left: var(--space-20);
}
.legal-section li {
color: var(--color-text);
font-size: var(--font-size-base);
line-height: 1.6;
margin-bottom: var(--space-8);
opacity: 0.85;
}
.legal-section strong {
color: var(--color-primary);
font-weight: var(--font-weight-semibold);
}
/* Footer */
.footer {
background: rgba(15, 23, 42, 0.5);
/* Semi-transparent dark background */
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-top: 1px solid var(--color-glass-border);
padding: var(--space-24) 0;
color: var(--color-text-secondary);
position: relative;
/* Ensure footer is properly layered */
z-index: 50;
/* Higher z-index to appear above parallax elements */
flex-shrink: 0;
/* Prevent footer from shrinking */
margin-top: 0;
/* Remove any top margin */
}
.footer__content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-24);
}
.footer__copyright {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
}
.footer__social {
display: flex;
gap: var(--space-20);
}
.footer__social-link {
color: var(--color-text-secondary);
text-decoration: none;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
transition: all var(--duration-fast) var(--ease-standard);
display: flex;
align-items: center;
gap: var(--space-8);
}
.footer__social-link:hover {
color: var(--color-primary);
transform: translateY(-1px);
}
.footer__links {
display: flex;
gap: var(--space-24);
}
.footer__link {
color: var(--color-text-secondary);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
transition: all var(--duration-fast) var(--ease-standard);
position: relative;
}
.footer__link:hover {
color: var(--color-primary);
text-decoration: underline;
text-decoration-color: var(--color-primary);
}
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
::-webkit-scrollbar-thumb {
background: rgba(99, 102, 241, 0.5);
border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(99, 102, 241, 0.7);
}
/* Subtle glossy overlay + ambient lights */
body::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: -1;
background:
/* Glossy top sheen */
linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 10%, rgba(255, 255, 255, 0) 24%),
/* Ambient button-color glows (indigo + cyan) */
radial-gradient(600px 300px at 10% 75%, rgba(99, 102, 241, 0.05) 0%, rgba(99, 102, 241, 0) 70%),
radial-gradient(600px 300px at 90% 25%, rgba(34, 211, 238, 0.045) 0%, rgba(34, 211, 238, 0) 70%);
}
/* Professional Card Styles - Responsive */
.professional-card {
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--radius-lg);
padding: clamp(1rem, 4vw, 1.5rem);
transition: all var(--duration-normal) var(--ease-standard);
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
gap: clamp(0.75rem, 3vw, 1rem);
align-self: stretch;
height: fit-content;
min-height: clamp(280px, 40vw, 340px);
cursor: pointer;
touch-action: manipulation;
}
/* Ensure professional cards are always white by using high specificity */
body.white-theme .professional-card {
background: #ffffff;
color: #1f2937;
}
/* Add subtle background pattern */
.professional-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent,
rgba(var(--color-primary-rgb, 6, 182, 212), 0.3),
transparent);
opacity: 0;
transition: opacity var(--duration-normal) var(--ease-standard);
}
.professional-card:hover::before {
opacity: 1;
}
/* Responsive hover states */
@media (hover: hover) {
.professional-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border-color: rgba(var(--color-primary-rgb, 6, 182, 212), 0.3);
}
}
/* Touch device interactions */
@media (hover: none) {
.professional-card:active {
transform: scale(0.98);
transition: transform 0.1s ease;
}
}
/* Focus states for accessibility */
.professional-card:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.professional-card__header {
display: flex;
align-items: flex-start;
gap: var(--space-16);
margin-bottom: var(--space-12);
}
.professional-card__avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
color: var(--color-btn-primary-text);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 6, 182, 212), 0.2);
border: 2px solid rgba(255, 255, 255, 0.1);
}
.professional-card__identity h4 {
margin: 0 0 var(--space-6) 0;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: #1f2937;
line-height: 1.3;
letter-spacing: -0.01em;
}
.professional-card__role {
color: #6b7280;
font-size: var(--font-size-sm);
margin: 0;
line-height: 1.4;
display: flex;
align-items: center;
gap: var(--space-8);
font-weight: var(--font-weight-medium);
}
.professional-card__role::after {
content: '';
width: 3px;
height: 3px;
background: var(--color-text-secondary);
opacity: 0.5;
border-radius: 50%;
}
.professional-card__meta {
display: flex;
gap: var(--space-12);
margin-bottom: var(--space-16);
flex-wrap: wrap;
}
.professional-card__badge {
background: rgba(99, 102, 241, 0.1);
color: #6366f1;
padding: var(--space-5) var(--space-10);
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
border: 1px solid rgba(99, 102, 241, 0.2);
backdrop-filter: blur(10px);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.professional-card__bio {
color: #374151;
font-size: var(--font-size-sm);
line-height: 1.5;
margin: 0 0 var(--space-16) 0;
font-weight: var(--font-weight-normal);
flex: 1;
min-height: 60px;
}
.professional-card__skills {
display: flex;
gap: var(--space-8);
margin-bottom: var(--space-16);
flex-wrap: wrap;
min-height: 32px;
align-items: flex-start;
}
.professional-card__actions {
display: flex;
justify-content: flex-end;
margin-top: auto;
padding-top: var(--space-12);
}
/* Professionals grouped sections */
.professionals__sections {
display: flex;
flex-direction: column;
gap: var(--space-32);
/* Ensure content doesn't get hidden behind navbar */
padding-top: var(--space-24);
}
.professionals__section {
background: transparent;
}
.professionals__section-title {
margin: 0 0 var(--space-20) 0;
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-text);
padding-bottom: var(--space-8);
border-bottom: 2px solid rgba(var(--color-primary-rgb, 6, 182, 212), 0.1);
position: relative;
}
.professionals__section-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 60px;
height: 2px;
background: var(--color-primary);
border-radius: var(--radius-full);
}
/* Professionals list - Modern Grid */
.professionals__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
/* Flexible columns, min 280px wide */
gap: clamp(1rem, 4vw, 1.5rem);
margin-bottom: var(--space-24);
max-width: 100%;
align-items: start;
padding: 0 clamp(0.25rem, 1vw, 0.5rem);
}
/* Container query for responsive cards */
@container (min-width: 768px) {
.professionals__list {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(1.25rem, 3vw, 1.75rem);
}
}
@container (min-width: 1200px) {
.professionals__list {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: clamp(1.5rem, 2vw, 2rem);
}
}
.professionals__list .professional-card {
justify-self: stretch;
}
/* Improve grid alignment on larger screens */
@media (min-width: 1200px) {
.professionals__list,
.jobs__list {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-20);
max-width: 1000px;
margin: 0 auto var(--space-32) auto;
padding: 0;
}
.jobs__list {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-20);
}
}
/* Extra large screens - maintain optimal spacing */
@media (min-width: 1400px) {
.professionals__list,
.jobs__list {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-28);
max-width: 1100px;
margin: 0 auto var(--space-32) auto;
}
.jobs__list {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-28);
max-width: 1400px;
margin: 0 auto var(--space-32) auto;
}
}
/* Mobile optimization - Fluid responsive */
@media (max-width: 768px) {
.professionals__list {
grid-template-columns: repeat(2, 1fr);
/* Force 2 columns on mobile */
gap: clamp(0.75rem, 3vw, 1rem);
padding: 0 clamp(0.25rem, 2vw, 0.5rem);
}
.jobs__list {
grid-template-columns: repeat(2, 1fr);
gap: clamp(0.75rem, 3vw, 1rem);
}
.professional-card {
padding: clamp(0.75rem, 4vw, 1rem);
gap: clamp(0.5rem, 3vw, 0.75rem);
min-height: clamp(160px, 25vw, 180px);
text-align: center;
align-items: center;
justify-content: flex-start;
}
.professional-card__header {
flex-direction: column;
align-items: center;
gap: var(--space-8);
margin-bottom: var(--space-8);
}
.professional-card__avatar {
width: clamp(40px, 8vw, 48px);
height: clamp(40px, 8vw, 48px);
font-size: clamp(1rem, 4vw, 1.125rem);
margin-bottom: clamp(0.25rem, 1vw, 0.5rem);
}
.professional-card__identity {
text-align: center;
flex: 1;
}
.professional-card__identity h4 {
font-size: var(--font-size-base);
margin-bottom: var(--space-4);
font-weight: var(--font-weight-bold);
}
.professional-card__role {
font-size: var(--font-size-xs);
color: #6b7280;
margin: 0;
line-height: 1.3;
}
.professional-card__role::after {
display: none;
}
.professional-card__bio {
font-size: var(--font-size-xs);
min-height: auto;
margin-bottom: var(--space-8);
text-align: center;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ===== MOBILE-FRIENDLY WORK REQUEST CARD FIX ===== */
@media (max-width: 767px) {
.work-request-card__description {
display: none;
}
}
.professional-card__meta {
display: none;
}
.professional-card__skills {
display: none;
}
.professional-card__actions {
margin-top: 0;
padding-top: 0;
justify-content: center;
}
.keyword-chip {
padding: var(--space-2) var(--space-6);
font-size: 9px;
}
}
/* Very small screens - maintain 2 columns but more compact */
@media (max-width: 480px) {
.professionals__list {
grid-template-columns: repeat(2, 1fr);
/* Force 2 columns on very small screens */
gap: var(--space-8);
padding: 0 var(--space-4);
}
.professional-card {
padding: var(--space-12);
gap: var(--space-8);
min-height: 160px;
}
.professional-card__header {
gap: var(--space-6);
}
.professional-card__avatar {
width: 40px;
height: 40px;
font-size: var(--font-size-lg);
margin-bottom: var(--space-2);
}
.professional-card__identity h4 {
font-size: var(--font-size-sm);
margin-bottom: var(--space-2);
}
.professional-card__role {
font-size: 10px;
}
.professional-card__bio {
font-size: 10px;
line-height: 1.3;
-webkit-line-clamp: 2;
}
}
/* Tablet optimization - maintain 2-column layout */
@media (min-width: 769px) and (max-width: 1199px) {
.professionals__list {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-18);
padding: 0 var(--space-8);
}
.jobs__list {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-18);
}
}
/* Modal */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 11000;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: all var(--duration-normal) var(--ease-standard);
padding: 10px;
}
.modal {
width: min(600px, 92vw);
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
background: #ffffff;
border: 1px solid #f1f5f9;
border-radius: 16px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transform: scale(0.95);
opacity: 0;
transition: all var(--duration-normal) var(--ease-standard);
position: relative;
margin: 20px;
scrollbar-width: thin;
scrollbar-color: #cbd5e1 #f1f5f9;
}
.modal::-webkit-scrollbar {
width: 8px;
}
.modal::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.modal::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.modal::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
.modal-overlay.show .modal {
transform: scale(1);
opacity: 1;
}
.modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 24px 28px;
border-bottom: 1px solid #f1f5f9;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border-radius: 16px 16px 0 0;
}
.modal__title {
font-size: 22px;
font-weight: 700;
color: #1e293b;
margin: 0;
line-height: 1.3;
letter-spacing: -0.025em;
}
.modal__close {
background: #f1f5f9;
border: none;
font-size: 20px;
color: #475569;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--duration-fast) var(--ease-standard);
font-weight: 500;
position: absolute;
top: 16px;
right: 16px;
z-index: 10;
}
.modal__close:hover {
background: #e2e8f0;
color: #1e293b;
transform: scale(1.05);
}
/* Enhanced Modal Content Styles */
.modal__content {
padding: 20px 24px;
}
/* Profile Summary */
.profile-summary {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px 24px;
border-bottom: 1px solid #f1f5f9;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
.profile-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 600;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.profile-summary__main {
flex: 1;
}
.modal__title {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin: 0 0 8px 0;
line-height: 1.2;
}
.modal__subtitle {
color: #64748b;
font-size: 16px;
margin: 0 0 16px 0;
font-weight: 500;
}
/* Availability Section */
.modal__availability {
padding: 16px 24px;
border-bottom: 1px solid #f1f5f9;
}
.modal__section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.modal__section-title {
font-size: 18px;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.modal__section-toggle {
font-size: 20px;
color: #64748b;
cursor: pointer;
font-weight: 300;
}
.modal__availability-text {
color: #64748b;
font-size: 14px;
margin: 0;
line-height: 1.5;
}
/* Main Content - Two Column Layout */
.modal__main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 20px 24px;
}
.modal__col {
display: flex;
flex-direction: column;
gap: 20px;
}
.modal__content-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
}
.modal__card-title {
font-size: 16px;
font-weight: 600;
color: #1e293b;
margin: 0 0 16px 0;
padding-bottom: 8px;
border-bottom: 2px solid #e2e8f0;
}
.modal__card-text {
color: #64748b;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.modal__skills-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.skill-tag {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
padding: 4px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
border: 1px solid rgba(59, 130, 246, 0.2);
}
/* Contact Section */
.modal__contact-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #e2e8f0;
}
.modal__contact-row:last-child {
border-bottom: none;
}
.modal__contact-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.modal__contact-label {
font-weight: 600;
color: #475569;
font-size: 14px;
min-width: 70px;
}
.modal__contact-value {
color: #1e293b;
font-size: 14px;
flex: 1;
}
.modal__contact-action {
background: #3b82f6;
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.modal__contact-action:hover {
background: #2563eb;
transform: translateY(-1px);
}
/* Action Buttons */
.modal__actions {
display: flex;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid #f1f5f9;
background: #f8fafc;
border-radius: 0 0 16px 16px;
}
.modal__action-btn {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.modal__action-btn--primary {
background: #3b82f6;
color: white;
}
.modal__action-btn--primary:hover {
background: #2563eb;
transform: translateY(-1px);
}
.modal__action-btn--secondary {
background: #f1f5f9;
color: #475569;
border: 1px solid #e2e8f0;
}
.modal__action-btn--secondary:hover {
background: #e2e8f0;
color: #1e293b;
}
/* WhatsApp Icon Styles */
.whatsapp-icon {
width: 16px;
height: 16px;
display: inline-block;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
vertical-align: middle;
position: relative;
}
.whatsapp-icon::before {
content: "📱";
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
/* Mobile Responsive Modal Styles */
@media (max-width: 768px) {
.modal-overlay {
padding: 8px;
}
.modal {
width: 95vw;
max-height: 95vh;
margin: 10px;
border-radius: 12px;
}
/* Profile Summary - Mobile */
.profile-summary {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 20px 16px;
}
.profile-avatar {
width: 60px;
height: 60px;
font-size: 20px;
}
.modal__title {
font-size: 20px;
margin: 0 0 6px 0;
}
.modal__subtitle {
font-size: 14px;
margin: 0 0 12px 0;
}
.profile-badges {
justify-content: center;
gap: 6px;
}
.badge {
padding: 3px 10px;
font-size: 11px;
}
/* Availability Section - Mobile */
.modal__availability {
padding: 16px;
}
.modal__section-title {
font-size: 16px;
}
.modal__availability-text {
font-size: 13px;
}
/* Main Content - Mobile Single Column */
.modal__main-content {
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
}
.modal__col {
gap: 16px;
}
.modal__content-card {
padding: 16px;
}
.modal__card-title {
font-size: 15px;
margin: 0 0 12px 0;
}
.modal__card-text {
font-size: 13px;
}
.modal__skills-grid {
gap: 6px;
}
.skill-tag {
padding: 3px 10px;
font-size: 11px;
}
/* Contact Section - Mobile */
.modal__contact-row {
flex-wrap: wrap;
gap: 8px;
padding: 10px 0;
}
.modal__contact-icon {
width: 18px;
height: 18px;
font-size: 12px;
}
.modal__contact-label {
font-size: 13px;
min-width: 60px;
}
.modal__contact-value {
font-size: 13px;
flex: 1;
min-width: 120px;
}
.modal__contact-action {
padding: 5px 10px;
font-size: 11px;
width: 100%;
margin-top: 4px;
}
/* Action Buttons - Mobile */
.modal__actions {
flex-direction: column;
gap: 8px;
padding: 16px;
}
.modal__action-btn {
padding: 12px 16px;
font-size: 14px;
}
}
/* Small Mobile Devices */
@media (max-width: 480px) {
.modal-overlay {
padding: 4px;
}
.modal {
width: 98vw;
max-height: 98vh;
margin: 5px;
border-radius: 8px;
}
.profile-summary {
padding: 16px 12px;
gap: 12px;
}
.profile-avatar {
width: 50px;
height: 50px;
font-size: 18px;
}
.modal__title {
font-size: 18px;
}
.modal__subtitle {
font-size: 13px;
}
.badge {
padding: 2px 8px;
font-size: 10px;
}
.modal__availability {
padding: 12px;
}
.modal__main-content {
padding: 12px;
gap: 12px;
}
.modal__content-card {
padding: 12px;
}
.modal__card-title {
font-size: 14px;
}
.modal__card-text {
font-size: 12px;
}
.skill-tag {
padding: 2px 8px;
font-size: 10px;
}
.modal__contact-row {
padding: 8px 0;
}
.modal__contact-label {
font-size: 12px;
min-width: 50px;
}
.modal__contact-value {
font-size: 12px;
}
.modal__contact-action {
padding: 4px 8px;
font-size: 10px;
}
.modal__actions {
padding: 12px;
}
.modal__action-btn {
padding: 10px 14px;
font-size: 13px;
}
}
/* Extra Small Mobile Devices */
@media (max-width: 360px) {
.modal {
width: 99vw;
margin: 2px;
}
.profile-summary {
padding: 12px 8px;
}
.profile-avatar {
width: 45px;
height: 45px;
font-size: 16px;
}
.modal__title {
font-size: 16px;
}
.modal__subtitle {
font-size: 12px;
}
.modal__availability {
padding: 8px;
}
.modal__main-content {
padding: 8px;
}
.modal__content-card {
padding: 8px;
}
.modal__actions {
padding: 8px;
}
}
/* Work Request Page Styles - Same as Professionals */
.work-requests__sections {
display: flex;
flex-direction: column;
gap: var(--space-32);
margin-top: var(--space-24);
}
.work-requests__section {
background: var(--color-card-bg);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-lg);
padding: var(--space-24);
box-shadow: var(--shadow-sm);
}
.work-requests__section-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin: 0 0 var(--space-20) 0;
padding-bottom: var(--space-12);
border-bottom: 2px solid var(--color-primary);
}
.work-requests__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--space-20);
}
/* Work Request Card Styles - Same as Professional Cards */
.work-request-card {
background: var(--color-surface);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-lg);
padding: var(--space-20);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--shadow-sm);
}
.work-request-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.work-request-card__header {
display: flex;
align-items: flex-start;
gap: var(--space-12);
margin-bottom: var(--space-16);
}
.work-request-card__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
flex-shrink: 0;
}
.work-request-card__identity {
flex: 1;
min-width: 0;
}
.work-request-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin: 0 0 var(--space-4) 0;
line-height: 1.3;
}
.work-request-card__requester {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin: 0;
font-weight: var(--font-weight-medium);
}
.work-request-card__meta {
display: flex;
align-items: center;
gap: var(--space-12);
margin-bottom: var(--space-16);
flex-wrap: wrap;
}
.work-request-card__budget {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: white;
padding: var(--space-6) var(--space-12);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
white-space: nowrap;
}
.work-request-card__location {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: var(--space-4);
font-weight: var(--font-weight-medium);
}
.work-request-card__description {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0 0 var(--space-16) 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.work-request-card__actions {
display: flex;
justify-content: flex-end;
}
/* Work Request Modal Styles */
.work-requests-list {
display: flex;
flex-direction: column;
gap: 16px;
max-height: 60vh;
overflow-y: auto;
}
.work-request-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
}
.work-request-card:hover {
background: #f1f5f9;
border-color: #cbd5e1;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.work-request-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 12px;
}
.work-request-title {
font-size: 18px;
font-weight: 600;
color: #1e293b;
margin: 0;
line-height: 1.3;
flex: 1;
}
.work-request-budget {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.work-request-meta {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.work-request-requester {
font-size: 14px;
color: #64748b;
font-weight: 500;
}
.work-request-location {
font-size: 14px;
color: #64748b;
display: flex;
align-items: center;
gap: 4px;
}
.work-request-description {
font-size: 14px;
color: #475569;
line-height: 1.5;
margin: 0 0 16px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.work-request-btn {
width: 100%;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
border: 2px solid #3b82f6;
color: #3b82f6;
background: transparent;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-request-btn:hover {
background: #3b82f6;
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
/* Empty State for Work Requests */
.empty-state {
text-align: center;
padding: 40px 20px;
}
.empty-state__icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.6;
}
.empty-state h4 {
font-size: 20px;
font-weight: 600;
color: #1e293b;
margin: 0 0 8px 0;
}
.empty-state p {
font-size: 16px;
color: #64748b;
margin: 0 0 24px 0;
line-height: 1.5;
}
/* Mobile Responsive Work Request Styles */
@media (max-width: 768px) {
.work-requests__list {
grid-template-columns: 1fr;
gap: var(--space-16);
}
.work-requests__section {
padding: var(--space-20);
}
.work-request-card {
padding: var(--space-16);
}
.work-request-card__header {
gap: var(--space-10);
}
.work-request-card__avatar {
width: 40px;
height: 40px;
font-size: var(--font-size-base);
}
.work-request-card__title {
font-size: var(--font-size-base);
}
.work-request-card__meta {
gap: var(--space-8);
}
.work-request-card__budget {
font-size: var(--font-size-xs);
padding: var(--space-4) var(--space-8);
}
.work-request-card__description {
font-size: var(--font-size-sm);
margin-bottom: var(--space-12);
}
/* Modal styles */
.work-request-card {
padding: 16px;
}
.work-request-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.work-request-title {
font-size: 16px;
}
.work-request-budget {
font-size: 12px;
padding: 4px 10px;
}
.work-request-meta {
gap: 4px;
}
.work-request-requester,
.work-request-location {
font-size: 13px;
}
.work-request-description {
font-size: 13px;
margin-bottom: 12px;
}
.work-request-btn {
padding: 8px 14px;
font-size: 13px;
}
.work-requests-list {
max-height: 50vh;
}
}
@media (max-width: 480px) {
.work-request-card {
padding: 12px;
}
.work-request-title {
font-size: 15px;
}
.work-request-description {
font-size: 12px;
margin-bottom: 10px;
}
.work-request-btn {
padding: 6px 12px;
font-size: 12px;
}
.empty-state {
padding: 30px 16px;
}
.empty-state__icon {
font-size: 40px;
}
.empty-state h4 {
font-size: 18px;
}
.empty-state p {
font-size: 14px;
}
}
.modal__content {
padding: 24px;
}
.modal__subtitle {
color: #666;
margin-bottom: 12px;
font-size: 14px;
}
.modal__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-12);
margin-bottom: var(--space-16);
}
.modal__row {
display: flex;
justify-content: space-between;
gap: var(--space-8);
}
.modal__label {
color: var(--color-text-secondary);
}
.modal__value {
font-weight: var(--font-weight-medium);
}
/* Section cards */
.modal__section {
background: #fafafa;
border: 1px solid #eee;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 16px;
}
.modal__section h4 {
font-size: 14px;
font-weight: 600;
color: #007bff;
margin-bottom: 8px;
}
.modal__section p,
.modal__section span {
font-size: 14px;
color: #333;
}
/* Skill chips */
.skill-chip {
display: inline-block;
background: #e8f1ff;
color: #007bff;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
margin: 4px 6px 0 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal__list {
margin: 0;
padding-left: 18px;
list-style: none;
}
.modal__list li {
margin-bottom: var(--space-8);
}
.modal__list a {
color: var(--color-primary);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: color var(--duration-normal) var(--ease-standard);
}
.modal__list a:hover {
color: var(--color-primary-hover);
text-decoration: underline;
}
@media (max-width: 480px) {
.modal {
width: 96vw;
max-height: 92vh;
margin: 10px;
}
.trusted {
padding: 60px 0;
}
.trusted .section-header {
margin-bottom: 40px;
padding: 0 20px;
}
.trusted .section-title {
font-size: 28px;
}
.trusted .section-subtitle {
font-size: 14px;
}
.trusted__partners {
height: 100px;
padding: 0 20px;
}
.partner-item {
min-width: 160px;
height: 80px;
padding: 16px 20px;
}
.partner-logo {
width: 36px;
height: 36px;
font-size: 1.5rem;
margin-bottom: 6px;
}
.partner-name {
font-size: 14px;
margin-bottom: 2px;
}
.partner-location {
font-size: 10px;
}
.partner-item[data-partner="MARUTI SUZUKI ARENA"] .partner-name {
font-size: 14px;
margin-bottom: 2px;
}
.partner-item[data-partner="MARUTI SUZUKI ARENA"] .partner-location {
font-size: 10px;
}
.modal__content {
padding: 16px;
}
.modal__availability {
padding: 0 12px;
margin-bottom: 12px;
}
.modal__main-content {
padding: 0 12px;
gap: 8px;
}
.modal__content-card {
padding: 10px;
}
.modal__card-title {
font-size: 13px;
margin-bottom: 8px;
}
.modal__card-text {
font-size: 12px;
}
.skill-tag {
font-size: 10px;
padding: 3px 6px;
}
.modal__contact-row {
padding: 8px 0;
}
.modal__contact-icon {
font-size: 14px;
}
.modal__contact-label {
font-size: 11px;
}
.modal__contact-value {
font-size: 11px;
}
.modal__contact-action {
padding: 3px 6px;
font-size: 9px;
}
.modal__actions {
padding: 12px;
}
.modal__action-btn {
padding: 8px 16px;
font-size: 12px;
min-width: 80px;
}
}
/* Profile modal layout */
.profile-summary {
display: grid;
grid-template-columns: 70px 1fr;
gap: 16px;
align-items: flex-start;
margin-bottom: 20px;
padding: 20px;
background: #f8fafc;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.profile-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 2px solid #ffffff;
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
font-size: 20px;
font-weight: 600;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.profile-avatar span {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xl);
}
.profile-summary__main {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.profile-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 16px;
}
.profile-badges .badge {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: #ffffff;
border: none;
border-radius: 20px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
transition: all var(--duration-fast) var(--ease-standard);
}
.profile-badges .badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}
.badge {
background: #e8f1ff;
color: #007bff;
border: 1px solid #007bff;
border-radius: 12px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
margin-right: 8px;
}
.modal__split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
margin-top: var(--space-16);
}
.modal__col {
min-width: 0;
}
.modal__row {
display: flex;
justify-content: space-between;
gap: var(--space-8);
padding: var(--space-12);
background: rgba(255, 255, 255, 0.02);
border-radius: var(--radius-base);
border: 1px solid var(--color-glass-border);
margin-bottom: var(--space-16);
}
.modal__label {
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
}
.modal__value {
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
/* Availability section */
.modal__availability {
margin-bottom: 20px;
padding: 0 24px;
}
.modal__section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.modal__section-title {
font-size: 14px;
font-weight: 600;
color: #3b82f6;
margin: 0;
}
.modal__section-toggle {
font-size: 18px;
color: #64748b;
cursor: pointer;
font-weight: 300;
}
.modal__availability-text {
font-size: 13px;
color: #64748b;
margin: 0;
}
/* Main content layout */
.modal__main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 0 24px;
margin-bottom: 20px;
}
.modal__col {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Content cards */
.modal__content-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all var(--duration-fast) var(--ease-standard);
}
.modal__content-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.modal__card-title {
font-size: 16px;
font-weight: 700;
color: #1e293b;
margin: 0 0 16px 0;
letter-spacing: -0.025em;
}
.modal__card-text {
font-size: 13px;
color: #475569;
line-height: 1.5;
margin: 0;
}
/* Skills grid */
.modal__skills-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.skill-tag {
background: #dbeafe;
color: #1e40af;
border: none;
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
}
/* Contact rows */
.modal__contact-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid #f1f5f9;
}
.modal__contact-row:last-child {
border-bottom: none;
}
.modal__contact-icon {
font-size: 16px;
width: 20px;
text-align: center;
}
.whatsapp-icon {
width: 16px;
height: 16px;
display: inline-block;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
vertical-align: middle;
position: relative;
}
.whatsapp-icon::before {
content: "📱";
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.modal__contact-label {
font-size: 12px;
color: #64748b;
font-weight: 500;
min-width: 60px;
}
.modal__contact-value {
flex: 1;
font-size: 12px;
color: #475569;
font-weight: 500;
}
.modal__contact-action {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: #ffffff;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-standard);
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}
.modal__contact-action:hover {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}
/* Contact grid styling */
.modal__contact-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
/* Modal action buttons */
.modal__actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 24px;
padding: 20px 24px;
border-top: 1px solid #f1f5f9;
background: #ffffff;
border-radius: 0 0 12px 12px;
}
.modal__action-btn {
padding: 10px 20px;
font-size: 13px;
font-weight: 500;
border-radius: 6px;
transition: all var(--duration-fast) var(--ease-standard);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: none;
cursor: pointer;
min-width: 100px;
}
.modal__action-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.modal__action-btn--primary {
background: #1e293b;
color: #ffffff;
}
.modal__action-btn--primary:hover {
background: #0f172a;
box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3);
}
.modal__action-btn--secondary {
background: #ffffff;
color: #475569;
border: 1px solid #d1d5db;
}
.modal__action-btn--secondary:hover {
background: #f8fafc;
border-color: #9ca3af;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.modal {
width: 94vw;
max-height: 88vh;
margin: 15px;
}
.modal__main-content {
grid-template-columns: 1fr;
gap: 12px;
padding: 0 16px;
}
.modal__availability {
padding: 0 16px;
margin-bottom: 16px;
}
.modal__content-card {
padding: 12px;
}
.modal__contact-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 10px 0;
}
.modal__contact-action {
align-self: flex-end;
margin-top: 4px;
}
.modal__actions {
flex-direction: column;
gap: 8px;
padding: 16px;
}
.modal__action-btn {
width: 100%;
}
}
/* --- Dark Theme Professional Card --- */
.professional-card--dark {
background: linear-gradient(135deg, #0f1419 0%, #0a0e12 50%, #05080b 100%);
border-radius: 16px;
padding: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
color: white;
overflow: hidden;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.professional-card--dark:hover {
transform: translateY(-5px);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
}
.professional-card--dark .professional-card__header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.professional-card--dark .professional-card__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #007bff;
background-color: #1a202c;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 24px;
font-weight: bold;
color: white;
}
.professional-card--dark .professional-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.professional-card--dark .professional-card__identity {
flex-grow: 1;
}
.professional-card--dark .professional-card__name {
font-size: 20px;
font-weight: bold;
margin: 0 0 5px 0;
color: white;
}
.professional-card--dark .professional-card__role {
font-size: 14px;
margin: 0;
color: #9aa4b2;
}
.professional-card--dark .professional-card__bio {
color: #e5e7eb;
}
.professional-card--dark .professional-card__badge {
background: rgba(0, 123, 255, 0.15);
color: #007bff;
border-color: rgba(0, 123, 255, 0.3);
}
.professional-card--dark .keyword-chip {
background: rgba(255, 255, 255, 0.1);
color: #cbd5e1;
border-color: rgba(255, 255, 255, 0.2);
}
.professional-card--dark .btn--secondary {
background: #007bff;
color: white;
border: none;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.professional-card--dark .btn--secondary:hover {
background: #0056b3;
box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
}
/* Override white theme styles for the dark card */
body.white-theme .professional-card--dark,
body.white-theme .professional-card--dark .professional-card__name,
body.white-theme .professional-card--dark .professional-card__bio {
background: linear-gradient(135deg, #0f1419 0%, #0a0e12 50%, #05080b 100%);
color: white;
}
body.white-theme .professional-card--dark .professional-card__role {
color: #9aa4b2;
}
body.white-theme .professional-card--dark .btn--secondary {
background: #007bff;
color: white;
}
/* --- NEW WORK REQUEST MODAL STYLES (from React component) --- */
.modal--work-request {
background-color: #ffffff;
border-radius: 12px;
/* rounded-xl */
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
/* shadow-2xl */
width: 100%;
max-width: 42rem;
/* max-w-2xl */
padding: 24px;
/* p-6 */
position: relative;
overflow-y: auto;
max-height: 90vh;
border: 1px solid #f3f4f6;
/* border-gray-100 */
}
.modal__close--work-request {
position: absolute;
top: 16px;
/* top-4 */
right: 16px;
/* right-4 */
color: #9ca3af;
/* text-gray-400 */
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
.modal__close--work-request:hover {
color: #4b5563;
/* hover:text-gray-600 */
}
.modal__work-request-title {
font-size: 20px;
/* text-xl */
font-weight: 700;
/* font-bold */
color: #111827;
/* text-gray-900 */
margin-bottom: 16px;
/* mb-4 */
}
.modal__work-request-description {
font-size: 14px;
/* text-sm */
color: #4b5563;
/* text-gray-600 */
margin-bottom: 24px;
/* mb-6 */
line-height: 1.6;
/* leading-relaxed */
}
.modal__work-request-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
/* gap-6 */
font-size: 14px;
/* text-sm */
}
@media (min-width: 768px) {
.modal__work-request-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.modal__work-request-grid-h4 {
font-weight: 600;
/* font-semibold */
color: #374151;
/* text-gray-700 */
margin-bottom: 4px;
/* mb-1 */
}
.modal__work-request-grid-p {
margin: 0;
padding: 0;
line-height: 1.5;
}
.modal__work-request-actions {
margin-top: 32px;
/* mt-8 */
display: grid;
grid-template-columns: 1fr;
gap: 16px;
/* gap-4 */
}
@media (min-width: 640px) {
.modal__work-request-actions {
grid-template-columns: repeat(2, 1fr);
}
}
.modal__work-request-btn-primary,
.modal__work-request-btn-secondary {
width: 100%;
padding: 12px 16px;
/* px-4 py-3 */
border-radius: 8px;
/* rounded-lg */
font-weight: 500;
/* font-medium */
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
/* shadow-sm */
font-size: 14px;
/* text-sm */
transition: background-color 0.3s ease;
border: none;
cursor: pointer;
}
.modal__work-request-btn-primary {
background-color: #4f46e5;
/* bg-indigo-600 */
color: #ffffff;
}
.modal__work-request-btn-primary:hover {
background-color: #4338ca;
/* hover:bg-indigo-700 */
}
.modal__work-request-btn-primary:disabled,
.modal__work-request-btn-secondary:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.modal__work-request-btn-secondary {
background-color: #f3f4f6;
/* bg-gray-100 */
color: #1f2937;
/* text-gray-800 */
}
.modal__work-request-btn-secondary:hover {
background-color: #e5e7eb;
/* hover:bg-gray-200 */
}
.modal__work-request-footer {
margin-top: 24px;
/* mt-6 */
font-size: 12px;
/* text-xs */
color: #9ca3af;
/* text-gray-400 */
border-top: 1px solid #e5e7eb;
/* border-t */
padding-top: 16px;
/* pt-4 */
line-height: 1.5;
}
.professional-card__bio {
color: #374151;
font-size: var(--font-size-sm);
line-height: 1.5;
}
.professional-card__skills {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.badge {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
border: 1px solid rgba(59, 130, 246, 0.2);
}
/* Availability Section */
.modal__availability {
padding: 16px 24px;
border-bottom: 1px solid #f1f5f9;
}
.modal__section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.modal__section-title {
font-size: 18px;
font-weight: 600;
color: #1e293b;
margin: 0;
}
.modal__section-toggle {
font-size: 20px;
color: #64748b;
cursor: pointer;
font-weight: 300;
}
.modal__availability-text {
color: #64748b;
font-size: 14px;
margin: 0;
line-height: 1.5;
}
/* Main Content - Two Column Layout */
.modal__main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
padding: 20px 24px;
}
.modal__col {
display: flex;
flex-direction: column;
gap: 20px;
}
.modal__content-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
}
.modal__card-title {
font-size: 16px;
font-weight: 600;
color: #1e293b;
margin: 0 0 16px 0;
padding-bottom: 8px;
border-bottom: 2px solid #e2e8f0;
}
.modal__card-text {
color: #64748b;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.modal__skills-grid {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.skill-tag {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
padding: 4px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
border: 1px solid rgba(59, 130, 246, 0.2);
}
/* Contact Section */
.modal__contact-row {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid #e2e8f0;
}
.modal__contact-row:last-child {
border-bottom: none;
}
.modal__contact-icon {
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.modal__contact-label {
font-weight: 600;
color: #475569;
font-size: 14px;
min-width: 70px;
}
.modal__contact-value {
color: #1e293b;
font-size: 14px;
flex: 1;
}
.modal__contact-action {
background: #3b82f6;
color: white;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.modal__contact-action:hover {
background: #2563eb;
transform: translateY(-1px);
}
/* Action Buttons */
.modal__actions {
display: flex;
gap: 12px;
padding: 16px 24px;
border-top: 1px solid #f1f5f9;
background: #f8fafc;
border-radius: 0 0 16px 16px;
}
.modal__action-btn {
flex: 1;
padding: 12px 20px;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.modal__action-btn--primary {
background: #3b82f6;
color: white;
}
.modal__action-btn--primary:hover {
background: #2563eb;
transform: translateY(-1px);
}
.modal__action-btn--secondary {
background: #f1f5f9;
color: #475569;
border: 1px solid #e2e8f0;
}
.modal__action-btn--secondary:hover {
background: #e2e8f0;
color: #1e293b;
}
/* WhatsApp Icon Styles */
.whatsapp-icon {
width: 16px;
height: 16px;
display: inline-block;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
vertical-align: middle;
position: relative;
}
.whatsapp-icon::before {
content: "📱";
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
/* Mobile Responsive Modal Styles */
@media (max-width: 768px) {
.modal-overlay {
padding: 8px;
}
.modal {
width: 95vw;
max-height: 95vh;
margin: 10px;
border-radius: 12px;
}
/* Profile Summary - Mobile */
.profile-summary {
flex-direction: column;
align-items: center;
text-align: center;
gap: 16px;
padding: 20px 16px;
}
.profile-avatar {
width: 60px;
height: 60px;
font-size: 20px;
}
.modal__title {
font-size: 20px;
margin: 0 0 6px 0;
}
.modal__subtitle {
font-size: 14px;
margin: 0 0 12px 0;
}
.profile-badges {
justify-content: center;
gap: 6px;
}
.badge {
padding: 3px 10px;
font-size: 11px;
}
/* Availability Section - Mobile */
.modal__availability {
padding: 16px;
}
.modal__section-title {
font-size: 16px;
}
.modal__availability-text {
font-size: 13px;
}
/* Main Content - Mobile Single Column */
.modal__main-content {
grid-template-columns: 1fr;
gap: 16px;
padding: 16px;
}
.modal__col {
gap: 16px;
}
.modal__content-card {
padding: 16px;
}
.modal__card-title {
font-size: 15px;
margin: 0 0 12px 0;
}
.modal__card-text {
font-size: 13px;
}
.modal__skills-grid {
gap: 6px;
}
.skill-tag {
padding: 3px 10px;
font-size: 11px;
}
/* Contact Section - Mobile */
.modal__contact-row {
flex-wrap: wrap;
gap: 8px;
padding: 10px 0;
}
.modal__contact-icon {
width: 18px;
height: 18px;
font-size: 12px;
}
.modal__contact-label {
font-size: 13px;
min-width: 60px;
}
.modal__contact-value {
font-size: 13px;
flex: 1;
min-width: 120px;
}
.modal__contact-action {
padding: 5px 10px;
font-size: 11px;
width: 100%;
margin-top: 4px;
}
/* Action Buttons - Mobile */
.modal__actions {
flex-direction: column;
gap: 8px;
padding: 16px;
}
.modal__action-btn {
padding: 12px 16px;
font-size: 14px;
}
}
/* Small Mobile Devices */
@media (max-width: 480px) {
.modal-overlay {
padding: 4px;
}
.modal {
width: 98vw;
max-height: 98vh;
margin: 5px;
border-radius: 8px;
}
.profile-summary {
padding: 16px 12px;
gap: 12px;
}
.profile-avatar {
width: 50px;
height: 50px;
font-size: 18px;
}
.modal__title {
font-size: 18px;
}
.modal__subtitle {
font-size: 13px;
}
.badge {
padding: 2px 8px;
font-size: 10px;
}
.modal__availability {
padding: 12px;
}
.modal__main-content {
padding: 12px;
gap: 12px;
}
.modal__content-card {
padding: 12px;
}
.modal__card-title {
font-size: 14px;
}
.modal__card-text {
font-size: 12px;
}
.skill-tag {
padding: 2px 8px;
font-size: 10px;
}
.modal__contact-row {
padding: 8px 0;
}
.modal__contact-label {
font-size: 12px;
min-width: 50px;
}
.modal__contact-value {
font-size: 12px;
}
.modal__contact-action {
padding: 4px 8px;
font-size: 10px;
}
.modal__actions {
padding: 12px;
}
.modal__action-btn {
padding: 10px 14px;
font-size: 13px;
}
}
/* Extra Small Mobile Devices */
@media (max-width: 360px) {
.modal {
width: 99vw;
margin: 2px;
}
.profile-summary {
padding: 12px 8px;
}
.profile-avatar {
width: 45px;
height: 45px;
font-size: 16px;
}
.modal__title {
font-size: 16px;
}
.modal__subtitle {
font-size: 12px;
}
.modal__availability {
padding: 8px;
}
.modal__main-content {
padding: 8px;
}
.modal__content-card {
padding: 8px;
}
.modal__actions {
padding: 8px;
}
}
/* Work Request Page Styles - Same as Professionals */
.work-requests__sections {
display: flex;
flex-direction: column;
gap: var(--space-32);
margin-top: var(--space-24);
}
.work-requests__section {
background: var(--color-card-bg);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-lg);
padding: var(--space-24);
box-shadow: var(--shadow-sm);
}
.work-requests__section-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin: 0 0 var(--space-20) 0;
padding-bottom: var(--space-12);
border-bottom: 2px solid var(--color-primary);
}
.work-requests__list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: var(--space-20);
}
/* Work Request Card Styles - Same as Professional Cards */
.work-request-card {
background: var(--color-surface);
border: 1px solid var(--color-glass-border);
border-radius: var(--radius-lg);
padding: var(--space-20);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: var(--shadow-sm);
}
.work-request-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--color-primary);
}
.work-request-card__header {
display: flex;
align-items: flex-start;
gap: var(--space-12);
margin-bottom: var(--space-16);
}
.work-request-card__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
flex-shrink: 0;
}
.work-request-card__identity {
flex: 1;
min-width: 0;
}
.work-request-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-text);
margin: 0 0 var(--space-4) 0;
line-height: 1.3;
}
.work-request-card__requester {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin: 0;
font-weight: var(--font-weight-medium);
}
.work-request-card__meta {
display: flex;
align-items: center;
gap: var(--space-12);
margin-bottom: var(--space-16);
flex-wrap: wrap;
}
.work-request-card__budget {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: white;
padding: var(--space-6) var(--space-12);
border-radius: var(--radius-full);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
white-space: nowrap;
}
.work-request-card__location {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
display: flex;
align-items: center;
gap: var(--space-4);
font-weight: var(--font-weight-medium);
}
.work-request-card__description {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0 0 var(--space-16) 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.work-request-card__actions {
display: flex;
justify-content: flex-end;
}
/* Work Request Modal Styles */
.work-requests-list {
display: flex;
flex-direction: column;
gap: 16px;
max-height: 60vh;
overflow-y: auto;
}
.work-request-card {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
cursor: pointer;
}
.work-request-card:hover {
background: #f1f5f9;
border-color: #cbd5e1;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.work-request-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 12px;
gap: 12px;
}
.work-request-title {
font-size: 18px;
font-weight: 600;
color: #1e293b;
margin: 0;
line-height: 1.3;
flex: 1;
}
.work-request-budget {
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: white;
padding: 6px 12px;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
flex-shrink: 0;
}
.work-request-meta {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.work-request-requester {
font-size: 14px;
color: #64748b;
font-weight: 500;
}
.work-request-location {
font-size: 14px;
color: #64748b;
display: flex;
align-items: center;
gap: 4px;
}
.work-request-description {
font-size: 14px;
color: #475569;
line-height: 1.5;
margin: 0 0 16px 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Mobile Responsive Work Request Card */
@media (max-width: 768px) {
.work-request-card {
padding: var(--space-12);
gap: var(--space-8);
}
.work-request-card__header {
margin-bottom: var(--space-8);
}
.work-request-card__title {
font-size: var(--font-size-sm);
-webkit-line-clamp: 2;
}
.work-request-card__requester {
font-size: var(--font-size-xs);
}
.work-request-card__body {
display: none;
/* Hide description on mobile to save space */
}
.work-request-card__meta-item {
font-size: 11px;
}
.work-request-card__actions {
margin-top: var(--space-8);
}
}
/* Mobile Responsive Work Request Card for Modular Grid */
@media (max-width: 768px) {
.work-request-card {
padding: var(--space-12);
gap: var(--space-8);
}
.work-request-card__header {
margin-bottom: var(--space-8);
}
.work-request-card__title {
font-size: var(--font-size-sm);
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.work-request-card__requester {
font-size: var(--font-size-xs);
}
.work-request-card__body {
display: none;
/* Hide description on mobile to save space */
}
.work-request-card__meta-item {
font-size: 11px;
}
}
/* ===== NEW WORK REQUEST CARD STYLES (Responsive) ===== */
.work-request-card {
position: relative;
/* Needed for absolute positioning of checkmark */
background: #ffffff;
/* White background */
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
/* Ensure cards in a row have the same height */
}
.work-request-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
border-color: #c7d2fe;
}
.work-request-card__header {
margin-bottom: 12px;
}
.work-request-card__title {
font-size: 18px;
font-weight: bold;
color: #1e293b;
margin: 0 0 4px 0;
line-height: 1.3;
}
.work-request-card__requester {
font-size: 13px;
color: #64748b;
margin: 0;
}
.work-request-card__status svg {
width: 20px;
height: 20px;
stroke: #10b981;
/* Green stroke */
}
.work-request-card__body {
flex-grow: 1;
/* Allows the description to take up available space */
margin-bottom: 16px;
}
.work-request-card__description {
font-size: 14px;
color: #475569;
line-height: 1.5;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.work-request-card__footer {
margin-top: auto;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
display: flex;
flex-direction: column;
gap: 8px;
}
.work-request-card__meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.work-request-card__meta-item {
font-size: 12px;
color: #475569;
}
.work-request-card__updated-date {
display: block;
text-align: right;
font-size: 12px;
color: #64748b;
}
.work-request-card__actions {
margin-top: 8px;
}
.work-request-card__view-btn {
width: 100%;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
background: #4f46e5;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.work-request-card__view-btn:hover {
background: #4338ca;
}
/* ===== NEW WORK REQUEST CARD STYLES (from user request) ===== */
.work-request-card {
background: #f8fafc;
/* Light blue background */
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
display: flex;
flex-direction: column;
height: 100%;
}
.work-request-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
border-color: #c7d2fe;
}
.work-request-card__footer {
margin-top: auto;
padding-top: 16px;
border-top: 1px solid #f1f5f9;
}
.work-request-card__view-btn {
width: 100%;
padding: 12px 16px;
font-size: 14px;
font-weight: 600;
color: #ffffff;
/* White text */
background: linear-gradient(135deg, #3b82f6, #2563eb);
/* Blue gradient */
border: none;
border-radius: 24px;
/* Rounded pill shape */
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}
.work-request-card__view-btn:hover {
background: linear-gradient(135deg, #2563eb, #1d4ed8);
/* Darker blue on hover */
transform: translateY(-1px);
box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4);
}
/* ===== RESPONSIVENESS ===== */
@media (max-width: 768px) {
.work-request-card {
padding: 16px;
}
.work-request-card__title {
font-size: 16px;
}
.work-request-card__requester,
.work-request-card__description,
.work-request-card__meta-item,
.work-request-card__updated-date {
font-size: 12px;
}
.work-request-card__view-btn {
padding: 10px 12px;
font-size: 12px;
border-radius: 20px;
}
}
.work-request-btn {
width: 100%;
padding: 10px 16px;
font-size: 14px;
font-weight: 600;
border: 2px solid #3b82f6;
color: #3b82f6;
background: transparent;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.work-request-btn:hover {
background: #3b82f6;
color: white;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
/* Empty State for Work Requests */
.empty-state {
text-align: center;
padding: 40px 20px;
}
.empty-state__icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.6;
}
.empty-state h4 {
font-size: 20px;
font-weight: 600;
color: #1e293b;
margin: 0 0 8px 0;
}
.empty-state p {
font-size: 16px;
color: #64748b;
margin: 0 0 24px 0;
line-height: 1.5;
}
/* Mobile Responsive Work Request Styles */
@media (max-width: 768px) {
.work-requests__list {
grid-template-columns: 1fr;
gap: var(--space-16);
}
.work-requests__section {
padding: var(--space-20);
}
.work-request-card {
padding: var(--space-16);
}
.work-request-card__header {
gap: var(--space-10);
}
.work-request-card__avatar {
width: 40px;
height: 40px;
font-size: var(--font-size-base);
}
.work-request-card__title {
font-size: var(--font-size-base);
}
.work-request-card__meta {
gap: var(--space-8);
}
.work-request-card__budget {
font-size: var(--font-size-xs);
padding: var(--space-4) var(--space-8);
}
.work-request-card__description {
font-size: var(--font-size-sm);
margin-bottom: var(--space-12);
}
/* Modal styles */
.work-request-card {
padding: 16px;
}
.work-request-header {
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.work-request-title {
font-size: 16px;
}
.work-request-budget {
font-size: 12px;
padding: 4px 10px;
}
.work-request-meta {
gap: 4px;
}
.work-request-requester,
.work-request-location {
font-size: 13px;
}
.work-request-description {
font-size: 13px;
margin-bottom: 12px;
}
.work-request-btn {
padding: 8px 14px;
font-size: 13px;
}
.work-requests-list {
max-height: 50vh;
}
}
@media (max-width: 480px) {
.work-request-card {
padding: 12px;
}
.work-request-title {
font-size: 15px;
}
.work-request-description {
font-size: 12px;
margin-bottom: 10px;
}
.work-request-btn {
padding: 6px 12px;
font-size: 12px;
}
.empty-state {
padding: 30px 16px;
}
.empty-state__icon {
font-size: 40px;
}
.empty-state h4 {
font-size: 18px;
}
.empty-state p {
font-size: 14px;
}
}
.modal__content {
padding: 24px;
}
.modal__subtitle {
color: #666;
margin-bottom: 12px;
font-size: 14px;
}
.modal__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-12);
margin-bottom: var(--space-16);
}
.modal__row {
display: flex;
justify-content: space-between;
gap: var(--space-8);
}
.modal__label {
color: var(--color-text-secondary);
}
.modal__value {
font-weight: var(--font-weight-medium);
}
/* Section cards */
.modal__section {
background: #fafafa;
border: 1px solid #eee;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 16px;
}
.modal__section h4 {
font-size: 14px;
font-weight: 600;
color: #007bff;
margin-bottom: 8px;
}
.modal__section p,
.modal__section span {
font-size: 14px;
color: #333;
}
/* Skill chips */
.skill-chip {
display: inline-block;
background: #e8f1ff;
color: #007bff;
padding: 4px 10px;
border-radius: 12px;
font-size: 12px;
margin: 4px 6px 0 0;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal__list {
margin: 0;
padding-left: 18px;
list-style: none;
}
.modal__list li {
margin-bottom: var(--space-8);
}
.modal__list a {
color: var(--color-primary);
text-decoration: none;
font-weight: var(--font-weight-medium);
transition: color var(--duration-normal) var(--ease-standard);
}
.modal__list a:hover {
color: var(--color-primary-hover);
text-decoration: underline;
}
@media (max-width: 480px) {
.modal {
width: 96vw;
max-height: 92vh;
margin: 10px;
}
.trusted {
padding: 60px 0;
}
.trusted .section-header {
margin-bottom: 40px;
padding: 0 20px;
}
.trusted .section-title {
font-size: 28px;
}
.trusted .section-subtitle {
font-size: 14px;
}
.trusted__partners {
height: 100px;
padding: 0 20px;
}
.partner-item {
min-width: 160px;
height: 80px;
padding: 16px 20px;
}
.partner-logo {
width: 36px;
height: 36px;
font-size: 1.5rem;
margin-bottom: 6px;
}
.partner-name {
font-size: 14px;
margin-bottom: 2px;
}
.partner-location {
font-size: 10px;
}
.partner-item[data-partner="MARUTI SUZUKI ARENA"] .partner-name {
font-size: 14px;
margin-bottom: 2px;
}
.partner-item[data-partner="MARUTI SUZUKI ARENA"] .partner-location {
font-size: 10px;
}
.modal__content {
padding: 16px;
}
.modal__availability {
padding: 0 12px;
margin-bottom: 12px;
}
.modal__main-content {
padding: 0 12px;
gap: 8px;
}
.modal__content-card {
padding: 10px;
}
.modal__card-title {
font-size: 13px;
margin-bottom: 8px;
}
.modal__card-text {
font-size: 12px;
}
.skill-tag {
font-size: 10px;
padding: 3px 6px;
}
.modal__contact-row {
padding: 8px 0;
}
.modal__contact-icon {
font-size: 14px;
}
.modal__contact-label {
font-size: 11px;
}
.modal__contact-value {
font-size: 11px;
}
.modal__contact-action {
padding: 3px 6px;
font-size: 9px;
}
.modal__actions {
padding: 12px;
}
.modal__action-btn {
padding: 8px 16px;
font-size: 12px;
min-width: 80px;
}
}
/* Profile modal layout */
.profile-summary {
display: grid;
grid-template-columns: 70px 1fr;
gap: 16px;
align-items: flex-start;
margin-bottom: 20px;
padding: 20px;
background: #f8fafc;
border-radius: 10px;
border: 1px solid #e2e8f0;
}
.profile-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #3b82f6, #1d4ed8);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 2px solid #ffffff;
box-shadow: 0 3px 10px rgba(59, 130, 246, 0.3);
font-size: 20px;
font-weight: 600;
}
.profile-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.profile-avatar span {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-2xl);
}
.profile-summary__main {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.profile-badges {
display: flex;
gap: 8px;
/* Adjust spacing as needed */
flex-wrap: wrap;
align-items: center;
/* Vertically center items */
justify-content: flex-start;
/* Align items to the start */
margin-top: 12px;
}
.profile-badges .badge {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: #ffffff;
border: none;
border-radius: 20px;
padding: 6px 12px;
font-size: 12px;
font-weight: 600;
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
white-space: nowrap;
/* Prevent text from breaking */
display: inline-flex;
/* Ensure they behave as inline elements */
align-items: center;
/* Vertically center icon and text */
gap: 4px;
/* Space between icon and text */
}
.modal__split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-16);
margin-top: var(--space-16);
}
.modal__col {
min-width: 0;
}
.modal__row {
display: flex;
justify-content: space-between;
gap: var(--space-8);
padding: var(--space-12);
background: rgba(255, 255, 255, 0.02);
border-radius: var(--radius-base);
border: 1px solid var(--color-glass-border);
margin-bottom: var(--space-16);
}
.modal__label {
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
}
.modal__value {
font-weight: var(--font-weight-semibold);
color: var(--color-text);
}
/* Availability section */
.modal__availability {
margin-bottom: 20px;
padding: 0 24px;
}
.modal__section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.modal__section-title {
font-size: 14px;
font-weight: 600;
color: #3b82f6;
margin: 0;
}
.modal__section-toggle {
font-size: 18px;
color: #64748b;
cursor: pointer;
font-weight: 300;
}
.modal__availability-text {
font-size: 13px;
color: #64748b;
margin: 0;
}
/* Main content layout */
.modal__main-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
padding: 0 24px;
margin-bottom: 20px;
}
.modal__col {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Content cards */
.modal__content-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 20px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: all var(--duration-fast) var(--ease-standard);
}
.modal__content-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
}
.modal__card-title {
font-size: 16px;
font-weight: 700;
color: #1e293b;
margin: 0 0 16px 0;
letter-spacing: -0.025em;
}
.modal__card-text {
font-size: 13px;
color: #475569;
line-height: 1.5;
margin: 0;
}
/* Skills grid */
.modal__skills-grid {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.skill-tag {
background: #dbeafe;
color: #1e40af;
border: none;
padding: 4px 8px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
}
/* Contact rows */
.modal__contact-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 0;
border-bottom: 1px solid #f1f5f9;
}
.modal__contact-row:last-child {
border-bottom: none;
}
.modal__contact-icon {
font-size: 16px;
width: 20px;
text-align: center;
}
.whatsapp-icon {
width: 16px;
height: 16px;
display: inline-block;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
vertical-align: middle;
position: relative;
}
.whatsapp-icon::before {
content: "📱";
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.modal__contact-label {
font-size: 12px;
color: #64748b;
font-weight: 500;
min-width: 60px;
}
.modal__contact-value {
flex: 1;
font-size: 12px;
color: #475569;
font-weight: 500;
}
.modal__contact-action {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: #ffffff;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-standard);
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}
.modal__contact-action:hover {
background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}
/* Mobile Responsiveness for Contact Items */
@media (max-width: 768px) {
.modal__contact-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 8px 12px;
}
.modal__contact-label {
min-width: auto;
width: 100%;
}
.modal__contact-value {
width: 100%;
word-break: break-word;
}
.modal__contact-action {
align-self: flex-end;
margin-top: 4px;
padding: 4px 8px;
font-size: 10px;
}
}
/* Contact grid styling */
.modal__contact-grid {
display: flex;
flex-direction: column;
gap: 10px;
}
.modal__contact-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 14px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
transition: all var(--duration-fast) var(--ease-standard);
}
.modal__contact-item:hover {
background: #f8fafc;
border-color: #3b82f6;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}
.modal__contact-label {
display: flex;
align-items: center;
gap: 4px;
color: var(--color-text-secondary);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
min-width: 80px;
white-space: nowrap;
}
.modal__contact-value {
flex: 1;
color: var(--color-text);
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
overflow-wrap: anywhere;
word-break: break-all;
min-width: 0;
}
.modal__contact-action {
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
color: #ffffff;
border: none;
padding: 6px 12px;
border-radius: 6px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-standard);
box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
white-space: nowrap;
}
.modal__contact-btn:hover {
background: #2563eb;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
/* Modal action buttons */
.modal__actions {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 24px;
padding: 20px 24px;
border-top: 1px solid #f1f5f9;
background: #ffffff;
border-radius: 0 0 12px 12px;
}
.modal__action-btn {
padding: 10px 20px;
font-size: 13px;
font-weight: 500;
border-radius: 6px;
transition: all var(--duration-fast) var(--ease-standard);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
border: none;
cursor: pointer;
min-width: 100px;
}
.modal__action-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.modal__action-btn--primary {
background: #1e293b;
color: #ffffff;
}
.modal__action-btn--primary:hover {
background: #0f172a;
box-shadow: 0 4px 12px rgba(30, 41, 59, 0.3);
}
.modal__action-btn--secondary {
background: #ffffff;
color: #475569;
border: 1px solid #d1d5db;
}
.modal__action-btn--secondary:hover {
background: #f8fafc;
border-color: #9ca3af;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.modal {
width: 94vw;
max-height: 88vh;
margin: 15px;
}
.modal__main-content {
grid-template-columns: 1fr;
gap: 12px;
padding: 0 16px;
}
.modal__availability {
padding: 0 16px;
margin-bottom: 16px;
}
.modal__content-card {
padding: 12px;
}
.modal__contact-row {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 10px 0;
}
.modal__contact-action {
align-self: flex-end;
margin-top: 4px;
}
.modal__actions {
flex-direction: column;
gap: 8px;
padding: 16px;
}
.modal__action-btn {
width: 100%;
}
}
/* --- Dark Theme Professional Card --- */
.professional-card--dark {
background: linear-gradient(135deg, #0f1419 0%, #0a0e12 50%, #05080b 100%);
border-radius: 16px;
padding: 20px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
color: white;
overflow: hidden;
position: relative;
transition: transform 0.3s ease, box-shadow 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.professional-card--dark:hover {
transform: translateY(-5px);
box-shadow: 0 12px 48px rgba(0, 0, 0, 0.7);
}
.professional-card--dark .professional-card__header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.professional-card--dark .professional-card__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #007bff;
background-color: #1a202c;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 24px;
font-weight: bold;
color: white;
}
.professional-card--dark .professional-card__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.professional-card--dark .professional-card__identity {
flex-grow: 1;
}
.professional-card--dark .professional-card__name {
font-size: 20px;
font-weight: bold;
margin: 0 0 5px 0;
color: white;
}
.professional-card--dark .professional-card__role {
font-size: 14px;
margin: 0;
color: #9aa4b2;
}
.professional-card--dark .professional-card__bio {
color: #e5e7eb;
}
.professional-card--dark .professional-card__badge {
background: rgba(0, 123, 255, 0.15);
color: #007bff;
border-color: rgba(0, 123, 255, 0.3);
}
.professional-card--dark .keyword-chip {
background: rgba(255, 255, 255, 0.1);
color: #cbd5e1;
border-color: rgba(255, 255, 255, 0.2);
}
.professional-card--dark .btn--secondary {
background: #007bff;
color: white;
border: none;
box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.professional-card--dark .btn--secondary:hover {
background: #0056b3;
box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
}
/* Override white theme styles for the dark card */
body.white-theme .professional-card--dark,
body.white-theme .professional-card--dark .professional-card__name,
body.white-theme .professional-card--dark .professional-card__bio {
background: linear-gradient(135deg, #0f1419 0%, #0a0e12 50%, #05080b 100%);
color: white;
}
body.white-theme .professional-card--dark .professional-card__role {
color: #9aa4b2;
}
body.white-theme .professional-card--dark .btn--secondary {
background: #007bff;
color: white;
}
.professional-card__bio {
color: #374151;
font-size: var(--font-size-sm);
line-height: 1.5;
}
/* ===== EXACT DESIGN MATCH FOR PROFESSIONAL CARD (Responsive) ===== */
body .professional-card {
display: flex;
flex-direction: column;
width: 100%;
/* Allow grid to control width */
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
background: #ffffff;
border: 1px solid #e2e8f0;
padding: clamp(10px, 2vw, 12px);
/* Fluid padding */
}
body .professional-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}
.professional-card__image-container {
position: relative;
width: 100%;
padding-top: 66.67%;
/* 3:2 Aspect Ratio */
border-radius: 12px;
overflow: hidden;
background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
}
.professional-card__image-container {
/* Styles moved from professional-card__avatar */
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
font-weight: bold;
color: #4f46e5;
}
.professional-card__avatar-img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.professional-card__content-container {
padding: 16px 4px 4px 4px;
display: flex;
flex-direction: column;
gap: 8px;
}
.professional-card__name-row {
display: flex;
align-items: center;
gap: 8px;
}
.professional-card__name {
font-size: 20px;
font-weight: bold;
color: #1e293b;
margin: 0;
}
.professional-card__verified-icon {
background: #10b981;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.professional-card__role {
font-size: 12px;
font-weight: bold;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0;
/* These properties are now set via inline styles in app.js for the fade-out effect */
/* white-space: nowrap; */
/* overflow: hidden; */
/* text-overflow: ellipsis; */
}
.professional-card__role::after {
content: '';
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 40px;
/* Adjust width of the fade effect */
background: linear-gradient(to right, transparent, #ffffff 80%);
}
.professional-card__bio {
font-size: 14px;
color: #475569;
line-height: 1.5;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
min-height: 63px;
/* 14px * 1.5 * 3 lines */
/* Add these lines to handle long words */
word-break: break-word;
overflow-wrap: break-word;
hyphens: auto;
}
.professional-card__footer-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
margin-top: auto;
/* Push footer to the bottom */
/* Ensure rate elements don't overflow */
min-width: 0;
/* Allows flex children to shrink */
}
.professional-card__rate-container {
text-align: left;
}
.professional-card__rate-label {
font-size: 12px;
color: #64748b;
}
.professional-card__rate-amount {
font-size: 16px;
font-weight: bold;
color: #1e293b;
}
.professional-card__view-btn {
background: #4f46e5;
color: white;
border: none;
border-radius: 8px;
padding: 8px 16px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
transition: all 0.2s ease;
}
.professional-card__view-btn:hover {
background: #4338ca;
transform: translateY(-1px);
}
@media (max-width: 768px) {
body .professional-card {
max-width: 280px;
padding: 10px;
}
.professional-card__name {
font-size: 18px;
}
.professional-card__bio {
font-size: 13px;
-webkit-line-clamp: 2;
/* Reduce lines on smaller screens */
min-height: 39px;
/* 13px * 1.5 * 2 lines */
}
.professional-card__role-wrapper {
/* Ensure the wrapper doesn't cause overflow on mobile */
max-width: 100%;
}
/* ===== NEW WORK REQUEST CARD STYLES ===== */
.work-request-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 16px;
padding: 16px;
display: flex;
flex-direction: column;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
cursor: pointer;
height: 100%;
/* Ensure cards in a row have the same height */
}
.work-request-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
border-color: #c7d2fe;
}
.work-request-card__header {
margin-bottom: 12px;
}
.work-request-card__title {
font-size: 18px;
font-weight: bold;
color: #1e293b;
margin: 0 0 4px 0;
line-height: 1.3;
}
.work-request-card__requester {
font-size: 13px;
color: #64748b;
margin: 0;
}
.work-request-card__body {
flex-grow: 1;
/* Allows the description to take up available space */
margin-bottom: 16px;
}
.work-request-card__description {
font-size: 14px;
color: #475569;
line-height: 1.5;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.work-request-card__footer {
margin-top: auto;
/* Pushes footer to the bottom */
padding-top: 12px;
border-top: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
}
.work-request-card__meta {
display: flex;
flex-direction: column;
gap: 4px;
}
.work-request-card__meta-item {
font-size: 12px;
color: #64748b;
font-weight: 500;
}
.work-request-card__view-btn {
background: #4f46e5;
color: white;
border: none;
border-radius: 8px;
padding: 8px 14px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s ease;
}
.work-request-card__view-btn:hover {
background: #4338ca;
}
.professional-card__rate-label {
font-size: 11px;
}
.professional-card__rate-amount {
font-size: 14px;
}
.professional-card__view-btn {
font-size: 12px;
padding: 6px 12px;
}
}
@media (max-width: 480px) {
body .professional-card {
max-width: 100%;
/* Allow it to be full width on small screens */
width: 100%;
padding: 10px;
}
.professional-card__image-container {
padding-top: 75%;
/* Adjust for smaller screens */
}
.professional-card__name {
font-size: 16px;
}
.professional-card__role {
font-size: 10px;
}
.professional-card__bio {
font-size: 12px;
-webkit-line-clamp: 2;
min-height: 36px;
/* 12px * 1.5 * 2 lines */
}
.professional-card__rate-label {
font-size: 10px;
}
.professional-card__rate-amount {
font-size: 12px;
}
.professional-card__view-btn {
font-size: 11px;
padding: 5px 10px;
}
}
/* ===== MOBILE-FRIENDLY WORK REQUEST CARD FIX ===== */
@media (max-width: 768px) {
.work-request-card {
padding: 16px;
gap: 12px;
min-height: auto;
/* Allow natural height on mobile */
}
.work-request-card__header {
margin-bottom: 10px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.work-request-card__title {
font-size: 17px;
line-height: 1.3;
-webkit-line-clamp: 2;
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.work-request-card__requester {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
}
.work-request-card__by-text {
color: #64748b;
/* Match secondary text color */
margin-right: 4px;
}
.work-request-card__requester-name {
font-weight: 600;
color: #374151;
}
.work-request-card__budget-info {
color: #16a34a;
/* Green color for budget */
font-weight: 600;
background: rgba(22, 163, 74, 0.1);
padding: 2px 6px;
border-radius: 4px;
}
.work-request-card__verified-badge {
font-size: 11px;
padding: 2px 6px;
}
.work-request-card__body {
margin-bottom: 12px;
}
.work-request-card__description {
font-size: 13px;
line-height: 1.4;
-webkit-line-clamp: 2;
min-height: 36px;
/* Ensures consistent spacing even if text is short */
}
.work-request-card__footer {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 12px;
border-top: 1px solid #f1f5f9;
}
.work-request-card__meta {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
}
/* --- Work Request Card Meta & Requester Styling --- */
.work-request-card__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
/* Left-align items */
gap: 4px;
/* Reduce gap for compactness */
}
.work-request-card__requester {
font-size: 13px;
/* Make "by name" smaller */
color: #64748b;
/* Use secondary text color */
margin-top: 4px;
font-weight: 500;
/* Add flex properties for proper alignment */
display: flex;
align-items: center;
}
.work-request-card__verified-badge {
display: inline-flex;
align-items: center;
margin-left: 4px;
vertical-align: middle;
}
.professional-card__role-wrapper::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40px;
/* Adjust width of the fade */
background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 80%);
}
/* ===== END EXACT DESIGN MATCH ===== */
/* Join Our Community Section - Mobile Font Size */
@media (max-width: 768px) {
#user-types .section-title {
font-size: 2.5rem !important;
line-height: 1.1;
}
#user-types .title-word {
font-size: 2.5rem !important;
}
}
@media (max-width: 480px) {
#user-types .section-title {
font-size: 2rem !important;
line-height: 1.1;
}
#user-types .title-word {
font-size: 2rem !important;
}
}
/* Arrow Animation for Get Started Button */
@keyframes arrow-slide {
0%,
100% {
transform: translateX(0);
}
50% {
transform: translateX(4px);
}
}
.arrow-animate {
animation: arrow-slide 1.5s ease-in-out infinite;
}
/* Pause animation on hover and move arrow further */
.group:hover .arrow-animate {
animation: none;
transform: translateX(6px);
transition: transform 0.3s ease;
transform: translateX(6px);
transition: transform 0.3s ease;
}
/* --- Join Us Button Adjustments --- */
/* This controls the size of the join use see how it works button */
button.btn--hero-join {
padding: 0.5rem 1.25rem !important;
/* Smaller padding for compact look */
font-size: 0.875rem !important;
/* Adjusted font size (14px) */
border-radius: 9999px !important;
/* Full pill shape */
min-height: unset !important;
/* Reset any minimum height */
line-height: 1.2;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* AI Intent Input Styles */
.intent-input-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-4);
width: 100%;
max-width: 450px;
margin-top: var(--space-8);
}
.intent-input-container {
display: flex;
align-items: center;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 100%);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid transparent;
background-image:
linear-gradient(white, white),
linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #06b6d4 100%);
background-origin: padding-box, border-box;
background-clip: padding-box, border-box;
border-radius: 9999px;
/* Pill shape */
padding: 8px;
width: 100%;
box-shadow:
0 4px 20px -5px rgba(29, 78, 216, 0.2),
0 10px 40px -10px rgba(59, 130, 246, 0.15),
inset 0 1px 2px rgba(255, 255, 255, 0.8);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.intent-input-container::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(29, 78, 216, 0.1), transparent);
transition: left 0.5s ease;
}
.intent-input-container:hover::before {
left: 100%;
}
.intent-input-container:focus-within {
background-image:
linear-gradient(white, white),
linear-gradient(135deg, #1d4ed8 0%, #3b82f6 30%, #06b6d4 70%, #0ea5e9 100%);
background-origin: padding-box, border-box;
background-clip: padding-box, border-box;
box-shadow:
0 8px 30px -10px rgba(29, 78, 216, 0.35),
0 15px 60px -15px rgba(59, 130, 246, 0.25),
inset 0 1px 3px rgba(255, 255, 255, 0.9),
0 0 0 4px rgba(29, 78, 216, 0.08);
transform: translateY(-3px) scale(1.01);
}
#aiIntentInput {
flex: 1;
border: none;
outline: none;
padding: 14px 20px;
font-size: 16px;
color: var(--color-slate-900);
background: transparent;
font-family: inherit;
min-width: 0;
/* Flexbox fix */
font-weight: 500;
}
#aiIntentInput:focus {
outline: none !important;
box-shadow: none !important;
}
#aiIntentInput::placeholder {
color: #94a3b8;
opacity: 1;
font-weight: 400;
}
#aiIntentBtn {
background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #2563eb 100%);
color: white;
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
flex-shrink: 0;
box-shadow:
0 4px 12px -2px rgba(29, 78, 216, 0.4),
inset 0 1px 2px rgba(255, 255, 255, 0.3);
position: relative;
overflow: hidden;
}
#aiIntentBtn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.2));
opacity: 0;
transition: opacity 0.3s ease;
}
#aiIntentBtn:hover::before {
opacity: 1;
}
#aiIntentBtn:hover {
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 50%, #1e40af 100%);
transform: scale(1.08) rotate(5deg);
box-shadow:
0 6px 20px -3px rgba(29, 78, 216, 0.5),
inset 0 1px 3px rgba(255, 255, 255, 0.4);
}
#aiIntentBtn:active {
transform: scale(0.97) rotate(0deg);
box-shadow:
0 2px 8px -1px rgba(29, 78, 216, 0.4),
inset 0 1px 2px rgba(0, 0, 0, 0.2);
}
#aiIntentBtn .material-symbols-outlined {
font-size: 22px;
font-weight: 600;
position: relative;
z-index: 1;
}
.intent-helper-text {
font-size: 13px;
color: #64748b;
/* Slate 500 */
padding-left: 12px;
font-weight: 500;
}
.intent-feedback {
display: block;
min-height: 1.65rem;
padding: 0.42rem 0.8rem;
border-radius: 999px;
background: rgba(239, 246, 255, 0.98);
border: 1px solid rgba(59, 130, 246, 0.18);
color: #1e3a8a;
font-size: 0.92rem;
line-height: 1.35;
font-weight: 600;
letter-spacing: -0.01em;
box-shadow: 0 8px 22px rgba(59, 130, 246, 0.1);
opacity: 0;
transform: translateY(-4px);
transition: opacity 0.18s ease, transform 0.18s ease;
}
.intent-feedback:not([hidden]) {
opacity: 1;
transform: translateY(0);
}
.intent-feedback::before {
content: 'Search tip';
display: inline-block;
margin-right: 0.45rem;
padding: 0.18rem 0.5rem;
border-radius: 999px;
background: rgba(59, 130, 246, 0.12);
color: #1d4ed8;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
vertical-align: middle;
}
.intent-feedback[data-tone="warning"] {
background: rgba(255, 251, 235, 0.98);
border-color: rgba(245, 158, 11, 0.22);
color: #92400e;
}
.intent-feedback[data-tone="warning"]::before {
background: rgba(245, 158, 11, 0.12);
color: #b45309;
}
.intent-feedback:empty::before {
display: none;
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.intent-input-wrapper {
align-items: center;
margin: var(--space-8) auto 0;
}
.intent-input-container {
width: 100%;
}
.intent-helper-text {
text-align: center;
padding-left: 0;
}
.intent-feedback {
text-align: center;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
/* ===== Hero/Nav UI match (requested) ===== */
body {
background: #edf0f3;
}
:root {
--site-nav-top: 16px;
--content-gap-after-nav: 36px;
--hero-desktop-left-col: 580px;
--hero-desktop-right-col: 520px;
--hero-desktop-gap: clamp(50px, 2.3vw, 34px);
}
body::before,
body.white-theme::before {
display: none !important;
}
#app-main>.page {
padding-top: calc(var(--nav-h) + var(--site-nav-top) + var(--content-gap-after-nav));
}
#home.page {
padding-top: 0 !important;
background: #edf0f3;
}
#site-nav.navbar {
position: fixed !important;
top: var(--site-nav-top) !important;
left: 50%;
right: auto;
transform: translateX(-50%);
width: min(1180px, calc(100% - 64px));
height: 64px;
min-height: 64px;
padding: 0 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.82);
background: linear-gradient(180deg, rgba(207, 216, 237, 0.96) 0%, rgba(191, 202, 230, 0.94) 100%);
box-shadow: 0 14px 35px rgba(15, 23, 42, 0.16);
z-index: 10000;
}
#site-nav.navbar .nav-container {
height: 100%;
width: 100%;
max-width: none;
margin: 0;
padding: 0 16px;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 14px;
}
#site-nav .logo {
color: #0f172a;
font-size: clamp(1.45rem, 2.1vw, 1.8rem);
font-weight: 800;
letter-spacing: -0.02em;
white-space: nowrap;
}
#site-nav .nav-menu {
justify-self: center;
display: flex;
align-items: center;
gap: clamp(18px, 2vw, 34px);
list-style: none;
margin: 0;
padding: 0;
}
#site-nav .nav-menu li {
display: flex;
align-items: center;
}
#site-nav .nav-menu li a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
color: #263042;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.72rem;
font-weight: 700;
line-height: 1.15;
padding: 0 10px;
border-radius: 0;
background: none;
}
#site-nav .nav-menu li a:hover,
#site-nav .nav-menu li a.active {
color: #263042;
background: none;
border-radius: 0;
}
#site-nav .nav-actions {
display: inline-flex;
align-items: center;
gap: 10px;
}
#site-nav .nav-menu .mobile-only-nav-action {
display: none;
}
@media (min-width: 801px) {
.mobile-only-nav-action {
display: none !important;
}
}
#site-nav .btn-pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
border-radius: 999px;
padding: 0 18px;
font-size: 0.88rem;
font-weight: 700;
line-height: 1;
border: 1px solid transparent;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
white-space: nowrap;
}
#site-nav .btn-pill:hover {
transform: translateY(-1px);
}
#site-nav .btn-pill-dark {
background: #0f1f42;
color: #ffffff;
box-shadow: 0 7px 16px rgba(15, 31, 66, 0.26);
}
#site-nav .btn-pill-light {
background: rgba(255, 255, 255, 0.92);
border-color: rgba(17, 24, 39, 0.12);
color: #1f2937;
}
#site-nav .profile-pill {
display: inline-flex;
align-items: center;
gap: 8px;
height: 40px;
padding: 0 12px 0 8px;
border-radius: 999px;
border: 1px solid rgba(17, 24, 39, 0.18);
background: rgba(255, 255, 255, 0.9);
color: #0f172a;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#site-nav .profile-pill:hover {
transform: translateY(-1px);
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
#site-nav .profile-pill__avatar {
width: 24px;
height: 24px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
color: #ffffff;
font-size: 0.72rem;
font-weight: 800;
text-transform: uppercase;
}
#site-nav .profile-pill__label {
font-size: 0.8rem;
font-weight: 700;
white-space: nowrap;
}
#site-nav .hamburger-btn {
display: none;
}
.hero {
margin-top: 0 !important;
min-height: auto;
padding: 210px 0 56px;
align-items: flex-start;
}
.hero__bg {
display: none;
}
.hero__content {
grid-template-columns: minmax(420px, 1.06fr) minmax(430px, 0.94fr);
gap: clamp(28px, 4vw, 62px);
align-items: start;
min-height: auto;
padding-top: 0 !important;
}
.hero__left {
padding-top: 4px;
}
.hero__title {
font-size: clamp(3.2rem, 7.1vw, 5rem);
line-height: 1.08;
margin-bottom: 16px;
color: #1e293b;
}
.hero__title--one-line {
font-size: clamp(2.7rem, 5.4vw, 4.2rem);
}
.hero__subtitle {
margin-bottom: 12px;
font-size: clamp(1.18rem, 1.65vw, 1.42rem);
color: #66758f;
max-width: 560px;
}
.intent-input-wrapper {
max-width: 500px;
}
.intent-input-container {
padding: 6px;
box-shadow: 0 6px 24px rgba(34, 95, 197, 0.14);
}
#aiIntentInput {
padding: 12px 16px;
}
#aiIntentBtn {
width: 46px;
height: 46px;
}
.hero__right .section-header {
margin-bottom: 12px;
}
.hero__right .section-title {
margin-top: 12px;
font-size: 1.98rem;
color: #233047;
}
.toggle-container {
margin-bottom: 12px;
}
.toggle-switch {
width: 288px;
height: 46px;
border-radius: 999px;
background: linear-gradient(96deg, #6168ee 0%, #5267de 52%, #4f65d3 100%);
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 10px 22px rgba(57, 89, 190, 0.23);
}
.toggle-slider {
width: 138px;
height: 36px;
top: 4px;
left: 4px;
border-radius: 999px;
box-shadow: 0 4px 12px rgba(17, 24, 39, 0.14);
}
.toggle-input:not(:checked)+.toggle-slider {
transform: translateX(142px);
}
.toggle-label {
min-width: 142px;
font-size: 13px;
font-weight: 700;
}
.toggle-hint {
font-size: 11px;
color: #8a97ab;
}
.hero-categories__grid {
width: 100%;
max-width: 560px;
gap: 12px;
margin-top: 0;
}
.skilled-worker-card {
aspect-ratio: 1.18 / 1 !important;
border-radius: 10px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
.skilled-worker-card__content {
bottom: 0.55rem;
left: 0.62rem;
right: 0.62rem;
}
.skilled-worker-card__title {
font-size: 15px;
letter-spacing: -0.01em;
}
.skilled-worker-card__content p {
color: rgba(255, 255, 255, 0.85);
font-size: 10px;
line-height: 1.3;
margin: 0;
}
/* Home toggle category card flip animation */
.hero-categories__grid {
perspective: 1500px;
}
.skilled-worker-card {
transform-origin: center center;
transform-style: preserve-3d;
backface-visibility: hidden;
}
.skilled-worker-card.animate-flip-in {
animation: categoryCardFlipIn 540ms cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: var(--flip-delay, 0ms);
will-change: transform, opacity, filter;
}
@keyframes categoryCardFlipIn {
0% {
opacity: 0;
transform: rotateY(-34deg) translateY(6px) scale(0.985);
filter: saturate(0.92);
}
70% {
opacity: 1;
transform: rotateY(4deg) translateY(0) scale(1);
filter: saturate(1);
}
100% {
opacity: 1;
transform: rotateY(0deg) translateY(0) scale(1);
filter: saturate(1);
}
}
.skilled-worker-card.animate-flip-out {
animation: categoryCardFlipOut 200ms cubic-bezier(0.4, 0, 1, 1) both;
animation-delay: var(--flip-out-delay, 0ms);
will-change: transform, opacity, filter;
}
@keyframes categoryCardFlipOut {
0% {
opacity: 1;
transform: rotateY(0deg) translateY(0) scale(1);
}
100% {
opacity: 0;
transform: rotateY(14deg) translateY(-4px) scale(0.99);
filter: saturate(0.94);
}
}
@media (prefers-reduced-motion: reduce) {
.skilled-worker-card.animate-flip-in,
.skilled-worker-card.animate-flip-out {
animation: none;
}
}
@media (min-width: 1025px) {
.hero__content {
grid-template-columns: minmax(0, var(--hero-desktop-left-col)) minmax(0, var(--hero-desktop-right-col));
column-gap: var(--hero-desktop-gap);
justify-content: center;
align-items: start;
}
.hero__left {
justify-self: end;
max-width: var(--hero-desktop-left-col);
}
.hero__right {
justify-self: start;
margin-left: 0;
width: 100%;
max-width: var(--hero-desktop-right-col);
}
.hero__right .section-title {
font-size: 1.1rem;
line-height: 1.2;
white-space: nowrap;
}
.hero-categories__grid {
width: 100%;
max-width: 520px;
gap: 10px;
}
.skilled-worker-card {
aspect-ratio: 1.24 / 1 !important;
}
.skilled-worker-card__title {
font-size: 14px;
}
.skilled-worker-card__content p {
font-size: 9px;
}
}
@media (max-width: 1024px) {
:root {
--site-nav-top: 10px;
--content-gap-after-nav: 32px;
}
#site-nav.navbar {
width: calc(100% - 34px);
top: var(--site-nav-top) !important;
}
#site-nav.navbar .nav-container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
#site-nav .nav-actions {
display: none;
}
#site-nav .hamburger-btn {
display: flex;
width: 40px;
height: 40px;
margin-left: auto;
position: relative;
z-index: 1300;
align-items: center;
justify-content: center;
border: 0;
background: transparent;
box-shadow: none;
padding: 0;
border-radius: 0;
}
#site-nav .hamburger-btn:focus,
#site-nav .hamburger-btn:focus-visible {
outline: none;
box-shadow: none;
background: transparent;
}
#site-nav .hamburger-btn .line {
width: 22px;
height: 2.5px;
border-radius: 999px;
background-color: #1f2937;
left: 50%;
top: 50%;
transition: transform 0.28s ease, opacity 0.2s ease, background-color 0.2s ease;
}
#site-nav .hamburger-btn .line1 {
transform: translate(-50%, -7px);
}
#site-nav .hamburger-btn .line2 {
transform: translate(-50%, 0);
}
#site-nav .hamburger-btn .line3 {
transform: translate(-50%, 7px);
}
#site-nav .hamburger-btn.active .line1 {
transform: translate(-50%, 0) rotate(45deg);
}
#site-nav .hamburger-btn.active .line2 {
opacity: 0;
transform: translate(-50%, 0) scaleX(0.6);
}
#site-nav .hamburger-btn.active .line3 {
transform: translate(-50%, 0) rotate(-45deg);
}
#site-nav .nav-menu {
position: fixed;
top: 76px;
left: 16px;
right: 16px;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
background: #f7f9fd;
border: 1px solid #d9e1ee;
border-radius: 16px;
box-shadow: 0 20px 38px rgba(15, 23, 42, 0.17);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-10px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
z-index: 1200;
padding: 14px 12px;
}
#site-nav .nav-menu.show {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateY(0);
}
#site-nav .nav-menu li a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 42px;
font-size: 0.8rem;
color: #1e2b42;
text-align: center;
line-height: 1.2;
padding: 10px 14px;
width: 100%;
box-sizing: border-box;
}
#site-nav .nav-menu li {
width: 100%;
}
#site-nav .nav-menu .mobile-only-nav-action {
display: flex;
width: 100%;
margin-top: 4px;
}
#site-nav .nav-menu .mobile-only-nav-action--pro {
margin-top: 14px;
}
#site-nav .nav-menu .mobile-only-nav-action a {
justify-content: center;
min-height: 42px;
padding: 0 34px;
border-radius: 18px;
width: 100%;
min-width: 0;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
text-transform: none;
}
#site-nav .nav-menu .mobile-only-nav-action--pro a,
#site-nav .nav-menu .mobile-only-nav-action--pro a:hover,
#site-nav .nav-menu .mobile-only-nav-action--pro a.active {
color: #ffffff;
background: #0f1f42;
border: 1px solid #0f1f42;
border-radius: 18px;
}
#site-nav .nav-menu .mobile-only-nav-action--post a,
#site-nav .nav-menu .mobile-only-nav-action--post a:hover,
#site-nav .nav-menu .mobile-only-nav-action--post a.active {
color: #1f2937;
background: #ffffff;
border: 1px solid rgba(17, 24, 39, 0.16);
border-radius: 18px;
}
#site-nav .nav-menu .mobile-only-nav-action--profile a,
#site-nav .nav-menu .mobile-only-nav-action--profile a:hover,
#site-nav .nav-menu .mobile-only-nav-action--profile a.active {
color: #ffffff;
background: linear-gradient(135deg, #2563eb, #1d4ed8);
border: 1px solid rgba(37, 99, 235, 0.85);
border-radius: 18px;
}
.hero {
padding-top: 136px;
}
.hero__content {
grid-template-columns: 1fr;
gap: 24px;
}
.hero__left,
.hero__right,
.hero__right .section-header {
text-align: center;
padding-right: 0;
}
.intent-input-wrapper {
margin-left: auto;
margin-right: auto;
}
.hero-categories__grid {
max-width: 500px;
}
.menu-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.35);
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
z-index: 1100;
}
.menu-overlay.active {
opacity: 1;
visibility: visible;
}
}
@media (max-width: 620px) {
#site-nav.navbar {
height: 56px;
min-height: 56px;
}
#site-nav .logo {
font-size: 1.28rem;
}
.hero {
padding: 122px 0 34px;
}
.hero__title {
font-size: clamp(2.25rem, 11vw, 3.1rem);
}
.hero__title--one-line {
font-size: clamp(2.1rem, 8vw, 2.85rem);
}
.hero__subtitle {
font-size: 1rem;
}
.toggle-switch {
width: 260px;
}
.toggle-slider {
width: 124px;
}
.toggle-input:not(:checked)+.toggle-slider {
transform: translateX(128px);
}
.toggle-label {
min-width: 128px;
}
.hero-categories__grid {
gap: 10px;
}
}
/* Footer mobile layout fix */
@media (max-width: 768px) {
.footer {
padding: 18px 0;
}
.footer__content {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 12px;
}
.footer__social {
justify-content: center;
}
.footer__social-link {
font-size: 0.9rem;
}
.footer__links {
width: 100%;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 12px;
justify-items: center;
align-items: start;
}
.footer__link {
font-size: 0.82rem;
line-height: 1.25;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
max-width: 92px;
}
}
/* Work request card refresh (inspired compact marketplace cards) */
#work-requests #jobsList {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
align-items: stretch;
}
#work-requests .work-request-card {
border: 1px solid #d8e1ee !important;
border-radius: 18px !important;
background: #ffffff !important;
overflow: hidden !important;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08) !important;
padding: 0 !important;
display: flex;
flex-direction: column;
height: 250px;
}
#work-requests .work-request-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12) !important;
}
#work-requests .work-request-card__top {
padding: 12px 14px;
background: #f4e1d1;
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
flex: 1 1 auto;
min-height: 0;
}
#work-requests .work-request-card[data-tone="peach"] .work-request-card__top {
background: #f3dcc8;
}
#work-requests .work-request-card[data-tone="mint"] .work-request-card__top {
background: #d7ebe4;
}
#work-requests .work-request-card[data-tone="lavender"] .work-request-card__top {
background: #ddd7ef;
}
#work-requests .work-request-card__topbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
#work-requests .work-request-card__date {
display: inline-flex;
align-items: center;
height: 30px;
padding: 0 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.85);
color: #111827;
font-size: 12px;
font-weight: 600;
}
#work-requests .work-request-card__bookmark {
width: 30px;
height: 30px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.85);
color: #0f172a;
font-size: 18px;
line-height: 1;
}
#work-requests .work-request-card__requester-brand {
margin: 0 0 4px;
color: #1f2937;
font-size: 13px;
font-weight: 600;
}
#work-requests .work-request-card__title {
margin: 0;
color: #0f172a;
font-size: 1.42rem;
line-height: 1.2;
font-weight: 700;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
#work-requests .work-request-card__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
#work-requests .work-request-card__chip {
display: inline-flex;
align-items: center;
height: 28px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(15, 23, 42, 0.22);
color: #1f2937;
font-size: 12px;
font-weight: 500;
background: rgba(255, 255, 255, 0.35);
}
#work-requests .work-request-card__footer {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: 12px;
padding: 12px 14px;
}
#work-requests .work-request-card__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 4px;
min-width: 0;
}
#work-requests .work-request-card__budget {
margin: 0;
color: #0f172a;
font-size: 1.02rem;
font-weight: 700;
line-height: 1.2;
text-align: left;
}
#work-requests .work-request-card__location {
margin: 0;
color: #6b7280;
font-size: 13px;
line-height: 1.25;
text-align: left;
}
#work-requests .work-request-card__actions {
display: flex;
align-items: center;
justify-content: flex-end;
}
#work-requests .work-request-card__view-btn {
height: 38px;
min-width: 108px;
padding: 0 18px;
border-radius: 999px;
border: none;
background: #0f172a;
color: #ffffff;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
#work-requests .work-request-card__view-btn:hover {
background: #1e293b;
}
@media (min-width: 480px) and (max-width: 767px) {
#work-requests .work-request-card {
height: 280px;
}
}
@media (min-width: 768px) {
#work-requests .work-request-card {
height: 400px;
}
}
@media (min-width: 1024px) {
#work-requests #jobsList {
grid-template-columns: repeat(3, minmax(0, 1fr));
justify-items: center;
}
#work-requests .work-request-card {
width: min(100%, 300px);
}
}
@media (min-width: 1280px) {
#work-requests #jobsList {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
/* Modal Refresh */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.45);
backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.show {
opacity: 1;
visibility: visible;
}
.modal {
background: #ffffff;
border-radius: 24px;
width: min(90vw, 600px);
max-height: 90vh;
overflow-y: auto;
position: relative;
padding: 32px;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
transform: scale(0.95) translateY(10px);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal-overlay.show .modal {
transform: scale(1) translateY(0);
}
.modal__close {
position: absolute;
top: 20px;
right: 20px;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #f1f5f9;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-weight: 700;
transition: all 0.2s ease;
}
.modal__close:hover {
background: #e2e8f0;
color: #0f172a;
transform: rotate(90deg);
}
.modal__work-request-title {
font-size: 1.75rem;
font-weight: 800;
color: #0f172a;
margin: 0 0 12px;
line-height: 1.2;
letter-spacing: -0.02em;
}
.modal__work-request-description {
font-size: 1.05rem;
line-height: 1.6;
color: #475569;
margin-bottom: 24px;
}
.modal__work-request-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 24px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 20px;
margin-bottom: 24px;
}
.modal__work-request-grid-h4 {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #64748b;
margin: 0 0 4px;
font-weight: 700;
}
.modal__work-request-grid-p {
font-size: 1rem;
font-weight: 600;
color: #1e293b;
margin: 0;
}
/* Special styling for Requested By in grid */
.modal__work-request-grid div:first-child {
grid-column: 1 / -1;
background: #eff6ff;
margin: -12px -12px 0;
padding: 12px;
border-radius: 12px;
border: 1px solid #dbeafe;
}
.modal__work-request-grid div:first-child .modal__work-request-grid-p {
color: #2563eb;
font-size: 1.1rem;
}
.modal__work-request-actions {
display: flex;
gap: 12px;
margin-bottom: 16px;
}
.modal__work-request-btn-primary {
flex: 1;
height: 48px;
background: #2563eb;
color: #ffffff;
border: none;
border-radius: 14px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.modal__work-request-btn-primary:hover {
background: #1d4ed8;
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}
.modal__work-request-btn-secondary {
height: 48px;
background: #ffffff;
color: #1e293b;
border: 1px solid #e2e8f0;
border-radius: 14px;
font-weight: 700;
padding: 0 24px;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.modal__work-request-btn-secondary:hover {
background: #f8fafc;
border-color: #cbd5e1;
}
.modal__work-request-footer {
font-size: 0.85rem;
color: #94a3b8;
text-align: center;
margin: 0;
}
@media (max-width: 640px) {
#work-requests #jobsList {
gap: 10px;
}
#work-requests .work-request-card {
border-radius: 14px !important;
height: auto;
min-height: 240px;
}
#work-requests .work-request-card__top {
padding: 10px 10px;
}
#work-requests .work-request-card__title {
font-size: 1.15rem;
}
#work-requests .work-request-card__requester-brand {
font-size: 11px;
}
#work-requests .work-request-card__chip {
height: 24px;
padding: 0 8px;
font-size: 11px;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#work-requests .work-request-card__chip:nth-child(n+3) {
display: none;
}
#work-requests .work-request-card__footer {
padding: 10px;
grid-template-columns: 1fr;
align-items: stretch;
gap: 8px;
}
#work-requests .work-request-card__budget {
font-size: 0.98rem;
}
#work-requests .work-request-card__location {
font-size: 12px;
}
#work-requests .work-request-card__actions {
width: 100%;
justify-content: stretch;
}
#work-requests .work-request-card__view-btn {
height: 34px;
min-width: 0;
width: 100%;
padding: 0 14px;
font-size: 12px;
}
.modal {
padding: 24px;
width: 95vw;
}
.modal__work-request-grid {
grid-template-columns: 1fr;
padding: 16px;
}
}
@media (max-width: 390px) {
#work-requests #jobsList {
grid-template-columns: 1fr;
}
}
@media (max-width: 460px) {
.footer__links {
gap: 8px 10px;
}
.footer__link {
font-size: 0.78rem;
max-width: 86px;
}
}
/* Landing SYNCSYNC section */
#home .home-syncsync {
padding: 6px 0 24px;
}
#home .home-syncsync__shell {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
border-radius: 24px;
border: 1px solid rgba(37, 99, 235, 0.26);
padding: clamp(18px, 3vw, 28px);
background:
radial-gradient(circle at 5% 5%, rgba(96, 165, 250, 0.25), transparent 46%),
linear-gradient(135deg, #ffffff 0%, #f2f7ff 100%);
box-shadow: 0 20px 34px -30px rgba(15, 23, 42, 0.9);
}
#home .home-syncsync__content {
max-width: 66ch;
}
#home .home-syncsync__eyebrow {
margin: 0 0 6px;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #1d4ed8;
}
#home .home-syncsync__title {
margin: 0;
font-size: clamp(1.45rem, 2.6vw, 2rem);
letter-spacing: -0.02em;
color: #0f172a;
}
#home .home-syncsync__text {
margin: 10px 0 0;
color: #475569;
font-size: 0.97rem;
line-height: 1.62;
}
#home .home-syncsync__cta {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 176px;
min-height: 46px;
padding: 0 20px;
border-radius: 999px;
text-decoration: none;
font-size: 0.9rem;
font-weight: 700;
color: #ffffff;
border: 1px solid rgba(30, 64, 175, 0.2);
background: linear-gradient(135deg, #0f172a, #1d4ed8);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#home .home-syncsync__cta:hover {
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 10px 22px -15px rgba(29, 78, 216, 0.9);
}
#home .home-syncsync__cta.is-coming-soon {
border-color: rgba(30, 41, 59, 0.28);
background: linear-gradient(135deg, #334155, #0f172a);
}
#home .home-syncsync__cta.is-coming-soon:hover {
transform: none;
box-shadow: none;
}
/* Landing feedback section and footer refresh */
#home .home-feedback {
padding: 12px 0 76px;
}
#home .home-feedback__shell {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
gap: clamp(18px, 3vw, 28px);
border-radius: 26px;
border: 1px solid rgba(37, 99, 235, 0.2);
background:
radial-gradient(circle at 0% 0%, rgba(96, 165, 250, 0.2), transparent 52%),
linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 255, 0.97));
padding: clamp(22px, 4vw, 36px);
box-shadow: 0 24px 45px -30px rgba(15, 23, 42, 0.42);
}
#home .home-feedback__intro {
display: flex;
flex-direction: column;
gap: 14px;
}
#home .home-feedback__eyebrow {
margin: 0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #1d4ed8;
}
#home .home-feedback__title {
margin: 0;
font-size: clamp(1.55rem, 3vw, 2.1rem);
color: #0f172a;
}
#home .home-feedback__text {
margin: 0;
font-size: 0.98rem;
line-height: 1.64;
color: #475569;
max-width: 57ch;
}
#home .home-feedback__channels {
display: grid;
gap: 10px;
margin-top: 6px;
}
#home .home-feedback__channel {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
text-decoration: none;
color: #1f2937;
font-weight: 600;
padding: 8px 14px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.75);
border: 1px solid rgba(148, 163, 184, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
#home .home-feedback__channel:hover {
transform: translateY(-1px);
border-color: rgba(37, 99, 235, 0.45);
box-shadow: 0 10px 22px -16px rgba(15, 23, 42, 0.7);
}
#home .home-feedback__channel .material-symbols-outlined {
font-size: 18px;
color: #1d4ed8;
}
#home .home-feedback__form {
border-radius: 18px;
border: 1px solid rgba(148, 163, 184, 0.3);
background: rgba(255, 255, 255, 0.9);
padding: clamp(16px, 2.6vw, 24px);
display: grid;
gap: 12px;
}
#home .home-feedback__form-row {
display: grid;
gap: 6px;
}
#home .home-feedback__form-row label {
font-size: 0.8rem;
font-weight: 700;
color: #334155;
}
#home .home-feedback__form-row input,
#home .home-feedback__form-row select,
#home .home-feedback__form-row textarea {
width: 100%;
border: 1px solid rgba(148, 163, 184, 0.55);
border-radius: 12px;
background: #ffffff;
color: #0f172a;
font-size: 0.95rem;
padding: 11px 13px;
font-family: inherit;
}
#home .home-feedback__form-row textarea {
resize: vertical;
min-height: 132px;
}
#home .home-feedback__form-row input:focus,
#home .home-feedback__form-row select:focus,
#home .home-feedback__form-row textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.14);
}
#home .home-feedback__submit {
border: 0;
border-radius: 12px;
min-height: 44px;
font-size: 0.93rem;
font-weight: 700;
color: #ffffff;
background: linear-gradient(135deg, #1d4ed8, #2563eb);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#home .home-feedback__submit:hover {
transform: translateY(-1px);
box-shadow: 0 12px 22px -14px rgba(29, 78, 216, 0.8);
}
#home .home-feedback__form-note {
margin: 0;
font-size: 0.78rem;
color: #64748b;
line-height: 1.4;
}
.footer {
position: relative;
margin-top: 0;
padding: 58px 0 24px;
color: #0f172a;
border-top: 1px solid rgba(148, 163, 184, 0.35);
background:
radial-gradient(circle at 0% 0%, rgba(147, 197, 253, 0.3), transparent 38%),
radial-gradient(circle at 100% 0%, rgba(186, 230, 253, 0.35), transparent 45%),
linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
overflow: hidden;
}
.footer .container {
position: relative;
z-index: 1;
display: grid;
gap: clamp(18px, 2.5vw, 32px);
}
.footer__content {
display: grid;
grid-template-columns: minmax(230px, 1.4fr) repeat(4, minmax(120px, 1fr));
gap: 20px 30px;
align-items: start;
justify-items: stretch;
text-align: left;
}
.footer__brand {
max-width: 420px;
}
.footer__logo {
display: inline-block;
text-decoration: none;
color: #0f172a;
font-size: 1.15rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 800;
}
.footer__tagline {
margin: 10px 0 0;
color: #0f172a;
font-size: clamp(1.45rem, 3.4vw, 2.2rem);
line-height: 1.1;
max-width: 18ch;
letter-spacing: -0.02em;
font-weight: 600;
}
.footer__brand>.footer__tagline:first-child {
margin-top: 0;
}
.footer__meta {
padding-top: 8px;
text-align: center;
}
.footer__copyright {
margin: 0;
font-size: 0.78rem;
letter-spacing: 0.04em;
color: #64748b;
}
.footer__group {
display: grid;
gap: 10px;
align-content: start;
}
.footer__heading {
margin: 0 0 2px;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #64748b;
}
.footer__link {
text-decoration: none;
color: #0f172a;
font-size: 0.9rem;
line-height: 1.35;
max-width: none;
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
transition: color 0.2s ease;
}
.footer__link:hover {
color: #1d4ed8;
text-decoration: none;
}
.footer__wordmark {
margin: 2px 0 0;
font-size: clamp(3.2rem, 16vw, 13.6rem);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.82;
color: #020617;
text-transform: none;
text-align: center;
overflow-wrap: anywhere;
}
.footer__subbrand {
margin: 10px 0 0;
text-align: center;
font-size: clamp(0.72rem, 1.2vw, 0.82rem);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #64748b;
}
.footer__legal-note {
margin: 12px 0 0;
text-align: center;
font-size: clamp(0.7rem, 1.1vw, 0.78rem);
font-weight: 500;
letter-spacing: 0.04em;
color: #64748b;
opacity: 0.88;
}
@media (max-width: 1120px) {
.footer__content {
grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
}
.footer__group--contact {
grid-column: 2 / -1;
}
}
@media (max-width: 900px) {
#home .home-syncsync__shell {
flex-direction: column;
align-items: flex-start;
}
#home .home-syncsync__cta {
width: 100%;
}
#home .home-feedback__shell {
grid-template-columns: 1fr;
}
.footer__content {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 18px;
}
.footer__brand {
grid-column: 1 / -1;
max-width: none;
}
.footer__group--contact {
grid-column: auto;
}
.footer__wordmark {
font-size: clamp(3rem, 20vw, 7rem);
line-height: 0.86;
}
}
@media (max-width: 560px) {
#home .home-syncsync {
padding: 2px 0 18px;
}
#home .home-syncsync__shell {
border-radius: 18px;
padding: 16px;
}
#home .home-feedback {
padding: 8px 0 52px;
}
#home .home-feedback__shell {
border-radius: 18px;
padding: 16px;
}
#home .home-feedback__channel {
width: 100%;
justify-content: flex-start;
}
.footer__content {
grid-template-columns: 1fr;
gap: 16px;
}
.footer__tagline {
font-size: clamp(1.25rem, 8vw, 1.7rem);
}
.footer__wordmark {
font-size: clamp(2.5rem, 18vw, 4rem);
}
}
/* Independent scrolling for category explorer pages */
body:has(#work-requests.page.active),
body:has(#skilled-workers-category-page.page.active) {
overflow: hidden;
}
#work-requests.page.active,
#skilled-workers-category-page.page.active {
overflow: hidden;
}
#work-requests .market-scroll-shell,
#skilled-workers-category-page .workers-category-shell {
display: flex;
flex-direction: column;
min-height: 0;
height: calc(100vh - (var(--nav-h, 64px) + var(--site-nav-top, 16px) + var(--content-gap-after-nav, 36px) + 20px));
height: calc(100dvh - (var(--nav-h, 64px) + var(--site-nav-top, 16px) + var(--content-gap-after-nav, 36px) + 20px));
}
#work-requests .market-scroll-fixed,
#skilled-workers-category-page .workers-category-top,
#skilled-workers-category-page .workers-explorer-fixed {
flex: 0 0 auto;
}
#work-requests .market-scroll-cards,
#skilled-workers-category-page .workers-category-list-shell,
#skilled-workers-category-page .workers-explorer-scroll {
flex: 1 1 auto;
min-height: 0;
}
#work-requests .market-scroll-cards,
#skilled-workers-category-page .workers-explorer-scroll {
overflow-y: auto;
overflow-x: hidden;
padding-right: 4px;
}
#work-requests #jobsList,
#skilled-workers-category-page #workersGridContainer {
align-content: start;
}
#skilled-workers-category-page .workers-category-list-shell {
display: flex;
flex-direction: column;
}
@media (max-width: 768px) {
#work-requests .market-scroll-shell,
#skilled-workers-category-page .workers-category-shell {
height: calc(100vh - (var(--nav-h, 56px) + var(--site-nav-top, 10px) + var(--content-gap-after-nav, 32px) + 10px));
height: calc(100dvh - (var(--nav-h, 56px) + var(--site-nav-top, 10px) + var(--content-gap-after-nav, 32px) + 10px));
}
#work-requests .market-scroll-cards,
#skilled-workers-category-page .workers-explorer-scroll {
padding-right: 2px;
}
}
/* ===== SkillSync Login Modal ===== */
.login-modal-overlay {
position: fixed;
inset: 0;
background:
radial-gradient(circle at 18% 12%, rgba(43, 137, 255, 0.28), transparent 38%),
radial-gradient(circle at 82% 88%, rgba(59, 130, 246, 0.22), transparent 36%),
rgba(6, 16, 36, 0.76);
backdrop-filter: blur(6px);
z-index: 300000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
.login-modal-overlay.show {
opacity: 1;
visibility: visible;
}
.login-modal-container {
width: min(780px, 92vw);
min-height: 410px;
display: flex;
overflow: hidden;
border-radius: 12px;
border: 1px solid rgba(184, 204, 238, 0.65);
background: #f4f7fc;
box-shadow:
0 30px 70px rgba(4, 12, 30, 0.52),
0 1px 0 rgba(255, 255, 255, 0.42) inset;
transform: translateY(18px) scale(0.985);
transition: transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.login-modal-overlay.show .login-modal-container {
transform: translateY(0) scale(1);
}
.login-sidebar {
width: 40%;
position: relative;
padding: 28px 22px;
color: #eef5ff;
display: flex;
display: flex;
flex-direction: column;
justify-content: space-between;
border-right: 1px solid rgba(184, 208, 248, 0.38);
background:
radial-gradient(500px 260px at 10% 5%, rgba(73, 140, 255, 0.36), transparent 65%),
linear-gradient(164deg, #0f2b63 0%, #0a1d44 52%, #08142f 100%);
}
.login-sidebar-tag {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #d9e8ff;
border: 1px solid rgba(148, 198, 255, 0.45);
background: rgba(9, 34, 78, 0.55);
padding: 6px 10px;
border-radius: 999px;
margin-bottom: 12px;
}
.login-sidebar::after {
content: '';
position: absolute;
inset: 0;
background:
repeating-radial-gradient(circle at 16% 80%, rgba(105, 173, 255, 0.18) 0 1px, transparent 1px 24px),
linear-gradient(115deg, transparent 40%, rgba(92, 170, 255, 0.16) 50%, transparent 62%);
pointer-events: none;
}
.login-sidebar>* {
position: relative;
z-index: 1;
}
.login-sidebar h2 {
margin: 0 0 12px;
font-size: 34px;
font-weight: 800;
letter-spacing: -0.02em;
color: #f4f8ff !important;
text-transform: uppercase;
}
.login-sidebar p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: #c5d7f3;
max-width: 240px;
}
.login-sidebar-image {
display: inline-flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
border-radius: 999px;
border: 1px solid rgba(148, 198, 255, 0.45);
background: rgba(7, 27, 64, 0.54);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.15),
0 10px 24px rgba(1, 8, 27, 0.45);
}
.login-sidebar-image span {
font-size: 36px;
color: #cfe2ff;
}
.login-form-area {
width: 60%;
position: relative;
padding: 22px 26px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background:
radial-gradient(360px 180px at 95% 0%, rgba(117, 162, 255, 0.16), transparent 62%),
linear-gradient(180deg, #f6f8fc 0%, #eff3f9 100%);
}
.close-login-modal {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border: 1px solid rgba(42, 88, 162, 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.78);
color: #4b5f80;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.18s ease;
}
.close-login-modal:hover {
color: #15294a;
border-color: rgba(31, 112, 236, 0.44);
background: #ffffff;
}
.login-options {
margin: 12px auto 0;
width: min(410px, 100%);
display: flex;
flex-direction: column;
gap: 12px;
}
.login-auth-tabs {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.login-auth-tab {
min-height: 38px;
border-radius: 10px;
border: 1px solid rgba(106, 146, 209, 0.44);
background: #eef3fb;
color: #344e76;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.02em;
cursor: pointer;
transition: all 0.18s ease;
}
.login-auth-tab.active {
background: linear-gradient(135deg, #1f70ec 0%, #2f86ff 100%);
border-color: rgba(48, 122, 240, 0.86);
color: #f8fbff;
box-shadow: 0 8px 18px rgba(31, 112, 236, 0.28);
}
.login-auth-message {
border-radius: 10px;
border: 1px solid rgba(87, 124, 180, 0.36);
background: rgba(255, 255, 255, 0.9);
color: #29446a;
padding: 8px 10px;
font-size: 12px;
line-height: 1.4;
}
.login-auth-message.is-error {
border-color: rgba(220, 38, 38, 0.4);
background: rgba(254, 242, 242, 0.95);
color: #991b1b;
}
.login-auth-message.is-success {
border-color: rgba(5, 150, 105, 0.45);
background: rgba(236, 253, 245, 0.95);
color: #065f46;
}
.login-auth-form {
display: flex;
flex-direction: column;
gap: 9px;
}
.login-password-wrap {
position: relative;
width: 100%;
display: flex;
align-items: center;
border-radius: 14px;
}
.login-auth-field {
width: 100%;
min-height: 42px;
border-radius: 14px !important;
border: 1px solid rgba(164, 186, 221, 0.64);
background: rgba(255, 255, 255, 0.96);
color: #17335b;
font-size: 13px;
font-weight: 500;
padding: 0 12px;
outline: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login-password-wrap .login-auth-field {
padding-right: 64px;
border-radius: 14px !important;
}
.login-password-toggle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
border: 1px solid rgba(126, 154, 196, 0.62);
background: #f4f8ff;
color: #35537d;
border-radius: 8px;
font-size: 11px;
font-weight: 700;
line-height: 1;
padding: 7px 8px;
cursor: pointer;
transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.login-password-toggle:hover {
border-color: rgba(59, 119, 206, 0.8);
color: #1f3f6d;
background: #eef5ff;
}
.login-password-toggle:focus-visible {
outline: 2px solid rgba(37, 99, 235, 0.42);
outline-offset: 1px;
}
.login-auth-field::placeholder {
color: #7a8ead;
}
.login-auth-field:focus {
border-color: rgba(37, 99, 235, 0.78);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.login-auth-terms {
display: inline-flex;
align-items: flex-start;
gap: 8px;
color: #506b94;
font-size: 11px;
line-height: 1.45;
}
.login-auth-terms input[type="checkbox"] {
width: 14px;
height: 14px;
margin-top: 2px;
accent-color: #2563eb;
flex-shrink: 0;
}
.login-auth-terms a {
color: #1f70ec;
font-weight: 700;
text-decoration: none;
}
.login-auth-terms a:hover {
text-decoration: underline;
}
.login-btn-wrap {
width: 100%;
}
.login-fast-note {
margin: 8px 4px 0;
font-size: 11px;
line-height: 1.35;
color: #5f7aa5;
text-align: center;
letter-spacing: 0.01em;
}
.login-inline-link-btn {
align-self: flex-start;
border: 0;
background: transparent;
color: #5c78a3;
font-size: 12px;
font-weight: 700;
line-height: 1.2;
padding: 2px 0 0;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.login-inline-link-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
}
.login-inline-link-btn:hover {
color: #2e5f9d;
}
.login-btn {
width: 100%;
min-height: 46px;
border-radius: 12px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
text-decoration: none !important;
}
.login-btn-primary {
border: 1px solid rgba(52, 129, 255, 0.7);
color: #f8fbff !important;
background: linear-gradient(135deg, #1f70ec 0%, #2f86ff 100%);
box-shadow:
0 10px 22px rgba(29, 103, 217, 0.35),
inset 0 1px 0 rgba(214, 234, 255, 0.22);
}
.login-btn-primary:hover {
transform: translateY(-1px);
filter: brightness(1.04);
box-shadow:
0 14px 24px rgba(29, 103, 217, 0.42),
inset 0 1px 0 rgba(214, 234, 255, 0.26);
}
.login-btn-google {
border: 1px solid rgba(167, 185, 215, 0.52);
color: #1d345c !important;
background: linear-gradient(180deg, #ffffff 0%, #f4f7fd 100%);
box-shadow: 0 6px 16px rgba(16, 44, 90, 0.1);
}
.login-btn-google:hover {
transform: translateY(-1px);
border-color: rgba(31, 112, 236, 0.48);
box-shadow: 0 8px 16px rgba(16, 44, 90, 0.12);
}
.login-divider {
display: flex;
align-items: center;
text-align: center;
margin: 6px 0 2px;
color: #6f83a8;
font-size: 12px;
letter-spacing: 0.05em;
font-weight: 700;
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid rgba(87, 124, 180, 0.34);
}
.login-divider:not(:empty)::before {
margin-right: .65em;
}
.login-divider:not(:empty)::after {
margin-left: .65em;
}
.login-modal-footer {
margin-top: 18px;
padding-top: 10px;
font-size: 12px;
color: #5d7195;
text-align: center;
}
.login-modal-footer a {
color: #1f70ec;
font-weight: 700;
text-decoration: none;
}
.login-modal-footer a:hover {
text-decoration: underline;
}
@media (max-width: 760px) {
.login-modal-container {
flex-direction: column;
width: 100%;
min-height: unset;
border-radius: 20px 20px 0 0;
position: fixed;
left: 0;
right: 0;
bottom: 0;
transform: translateY(100%);
}
.login-modal-overlay.show .login-modal-container {
transform: translateY(0);
}
.login-sidebar,
.login-form-area {
width: 100%;
}
.login-sidebar {
min-height: 152px;
padding: 26px 22px 18px;
}
.login-sidebar h2 {
font-size: 26px;
}
.login-sidebar p {
max-width: none;
font-size: 14px;
}
.login-sidebar-image {
display: none;
}
.login-form-area {
padding: 24px 20px 22px;
justify-content: flex-start;
align-items: stretch;
}
.login-options {
margin-top: 22px;
width: 100%;
}
.login-auth-tab {
min-height: 36px;
font-size: 11px;
}
.login-auth-field {
min-height: 40px;
font-size: 13px;
border-radius: 12px !important;
}
}