/* ===== RESET & VARIABLES ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img, svg, video, canvas, picture {
max-width: 100%;
height: auto;
}
:root {
--primary: #2563eb;
--primary-dark: #1d4ed8;
--secondary: #f59e0b;
--danger: #ef4444;
--dark: #1f2937;
--light: #f8fafc;
--gray: #6b7280;
--success: #10b981;
--white: #ffffff;
--shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
/* ===== THEME TOKENS (light mode defaults) ===== */
/* These power dark/light mode. Anything meant to invert between
themes should use these instead of raw hex or the literal
colors above. --white/--dark/--gray/--light above are kept
for intentionally-fixed decorative elements (e.g. the footer,
gradient buttons) that should look the same in both themes. */
--surface: #ffffff; /* page/card background */
--surface-alt: #f8fafc; /* alternate section background */
--text: #1f2937; /* primary body text */
--text-muted: #6b7280; /* secondary/help text */
--border: #e5e7eb; /* dividers, input borders */
--input-bg: #ffffff;
--overlay: rgba(15, 23, 42, 0.55);
--scrollbar-track: #f1f5f9;
--code-bg: #f1f5f9;
}
[data-theme="dark"] {
--surface: #141a26;
--surface-alt: #1b2333;
--text: #e8ebf1;
--text-muted: #a2acc2;
--border: #2c3547;
--input-bg: #1b2333;
--overlay: rgba(0, 0, 0, 0.65);
--scrollbar-track: #1b2333;
--code-bg: #1b2333;
--shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
color-scheme: dark;
}
/* Respect system preference automatically when the user hasn't
made a manual choice yet (no data-theme attribute set). */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--surface: #141a26;
--surface-alt: #1b2333;
--text: #e8ebf1;
--text-muted: #a2acc2;
--border: #2c3547;
--input-bg: #1b2333;
--overlay: rgba(0, 0, 0, 0.65);
--scrollbar-track: #1b2333;
--code-bg: #1b2333;
--shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
color-scheme: dark;
}
}
html {
background: var(--surface);
overflow-x: hidden;
}
body {
overflow-x: hidden;
max-width: 100vw;
}
body,
input,
select,
textarea,
button {
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
input,
select,
textarea {
background: var(--input-bg);
color: var(--text);
}
::placeholder {
color: var(--text-muted);
opacity: 0.8;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--text-muted);
}
/* ===== BASE STYLES ===== */
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
line-height: 1.6;
color: var(--text);
background: var(--surface);
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* ===== NAVIGATION ===== */
.navbar {
background: var(--surface);
box-shadow: var(--shadow);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
padding: 1rem 0;
transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
/* On the homepage, let the hero carousel show through the header
until the user scrolls, then swap to the normal solid navbar. */
body.has-transparent-nav .navbar:not(.scrolled) {
background: transparent;
box-shadow: none;
}
body.has-transparent-nav .navbar:not(.scrolled) .logo,
body.has-transparent-nav .navbar:not(.scrolled) .nav-links > li > a,
body.has-transparent-nav .navbar:not(.scrolled) .dropdown-caret,
body.has-transparent-nav .navbar:not(.scrolled) .theme-toggle,
body.has-transparent-nav .navbar:not(.scrolled) .hamburger {
color: var(--white);
}
body.has-transparent-nav .navbar:not(.scrolled) .theme-toggle,
body.has-transparent-nav .navbar:not(.scrolled) .hamburger {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.35);
}
body.has-transparent-nav .navbar:not(.scrolled) .hamburger span {
background: var(--white);
}
/* The slide-out mobile panel always has its own solid background, so its
links must always use normal theme text colors — never the white text
used for the transparent-over-hero navbar state. */
body.has-transparent-nav .navbar:not(.scrolled) .nav-links.nav-open > li > a {
color: var(--text);
}
body.has-transparent-nav .navbar:not(.scrolled) .nav-links.nav-open .dropdown-caret {
color: var(--text-muted);
}
.nav-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
text-decoration: none;
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
transition: color 0.3s ease;
}
.logo-img {
width: 70px;
height: 70px;
border-radius: 50%;
object-fit: contain;
display: block;
}
.logo span {
color: var(--secondary);
}
/* Responsive logo sizing */
@media (max-width: 768px) {
.logo-img {
width: 58px;
height: 58px;
}
.logo-img.rectangular {
width: 140px;
height: 48px;
}
.logo {
font-size: 1.6rem;
}
}
@media (max-width: 480px) {
.logo-img {
width: 50px;
height: 50px;
}
.logo-img.rectangular {
width: 120px;
height: 42px;
}
.logo {
font-size: 1.4rem;
gap: 0.25rem;
}
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
align-items: center;
}
.nav-links a {
text-decoration: none;
color: var(--text);
font-weight: 500;
transition: var(--transition);
position: relative;
}
.nav-links a:hover {
color: var(--primary);
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background: var(--surface);
min-width: 200px;
box-shadow: var(--shadow);
border-radius: 8px;
padding: 0.5rem 0;
top: 100%;
left: 0;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content a {
display: block;
padding: 0.75rem 1.5rem;
color: var(--text);
text-decoration: none;
transition: var(--transition);
}
.dropdown-content a:hover {
background: var(--surface-alt);
color: var(--primary);
}
.cta-button {
background: var(--primary);
color: var(--white);
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.cta-button:hover {
background: var(--primary-dark);
transform: translateY(-2px);
}
/* ===== NAV ACTIONS (theme toggle + hamburger) ===== */
.nav-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.nav-overlay {
display: none;
}
.nav-mobile-only {
display: none;
}
.nav-panel-header,
.nav-panel-footer {
display: none;
}
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
cursor: pointer;
font-size: 1rem;
transition: var(--transition);
flex-shrink: 0;
}
.theme-toggle:hover {
border-color: var(--primary);
color: var(--primary);
}
/* Show the moon in light mode (click to go dark), sun in dark mode */
.theme-toggle .theme-icon-light { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-dark { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-light { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-toggle .theme-icon-dark { display: none; }
:root:not([data-theme="light"]) .theme-toggle .theme-icon-light { display: block; }
}
.hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 42px;
height: 42px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--surface-alt);
cursor: pointer;
flex-shrink: 0;
}
.hamburger span {
display: block;
width: 20px;
height: 2px;
margin: 0 auto;
background: var(--text);
transition: var(--transition);
}
.hamburger.is-active span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.is-active span:nth-child(2) {
opacity: 0;
}
.hamburger.is-active span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.dropdown-caret {
font-size: 0.75rem;
margin-left: 0.25rem;
}
.social-icon-disabled {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--surface-alt);
color: var(--text-muted);
cursor: not-allowed;
}
@media (max-width: 768px) {
.nav-desktop-only { display: none; }
.hamburger { display: flex; }
body.nav-scroll-lock {
overflow: hidden;
}
.nav-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
z-index: 998;
}
.nav-overlay.nav-overlay-visible {
opacity: 1;
visibility: visible;
}
.nav-links {
position: fixed;
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
width: min(320px, 85vw);
background: var(--surface);
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 0 1.5rem 2rem;
transform: translateX(100%);
transition: transform 0.3s ease;
overflow-y: auto;
z-index: 999;
}
.nav-links.nav-open {
transform: translateX(0);
}
.nav-panel-header {
position: sticky;
top: 0;
background: var(--surface);
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 1.25rem 0 !important;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--border) !important;
z-index: 1;
}
.nav-panel-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--text);
}
.nav-close {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
}
.nav-close:hover {
background: var(--danger);
border-color: var(--danger);
color: var(--white);
}
.nav-links li {
width: 100%;
border-bottom: 1px solid var(--border);
}
.nav-links > li > a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
width: 100%;
}
.dropdown-content {
display: none;
position: static;
box-shadow: none;
padding: 0 0 0.5rem 1rem;
min-width: 0;
}
.dropdown.dropdown-open .dropdown-content {
display: block;
}
.nav-panel-footer {
display: block !important;
border-bottom: none !important;
margin-top: 1rem;
}
.nav-panel-footer .cta-button {
justify-content: center;
width: 100%;
padding: 0.9rem 1rem;
}
}
/* ===== HERO SECTION ===== */
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: var(--white);
padding: 160px 0 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
}
.hero-content {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
color: var(--white);
margin-bottom: 1.5rem;
backdrop-filter: blur(6px);
}
.hero-badge i {
color: var(--secondary);
}
.hero h1 {
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.hero p {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.hero-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 3rem;
margin-top: 3rem;
flex-wrap: wrap;
}
.hero-stats .stat {
text-align: center;
min-width: 120px;
}
.hero-stats .number {
display: block;
font-size: 2rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.5rem;
line-height: 1.3;
}
.hero-stats .label {
display: block;
font-size: 0.875rem;
opacity: 0.9;
color: var(--white);
line-height: 1.4;
}
/* ===== HOMEPAGE FULLSCREEN HERO CAROUSEL ===== */
.hero-fullscreen {
min-height: 100vh;
display: flex;
align-items: center;
padding: 140px 0 100px;
background: none;
}
.hero-fullscreen::before {
display: none;
}
.hero-fullscreen .container {
width: 100%;
}
.hero-carousel {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
}
.hero-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.2s ease;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.hero-slide.active {
opacity: 1;
}
.hero-slide-icon {
font-size: 18rem;
color: rgba(255, 255, 255, 0.08);
position: absolute;
right: 6%;
bottom: -2rem;
}
.hero-carousel-dots {
position: absolute;
left: 50%;
bottom: 2.5rem;
transform: translateX(-50%);
display: flex;
gap: 0.6rem;
z-index: 2;
}
.hero-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
padding: 0;
transition: var(--transition);
}
.hero-dot.active {
background: var(--white);
width: 28px;
border-radius: 6px;
}
.hero-scroll-cue {
position: absolute;
left: 50%;
bottom: 1.25rem;
transform: translateX(-50%);
color: var(--white);
font-size: 1.25rem;
opacity: 0.75;
z-index: 2;
animation: heroScrollBounce 2s infinite;
}
@keyframes heroScrollBounce {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 8px); }
}
@media (max-width: 768px) {
.hero-fullscreen {
min-height: 100svh;
padding: 110px 0 70px;
}
.hero-slide-icon {
font-size: 10rem;
}
.hero-badge {
font-size: 0.7rem;
padding: 0.4rem 0.9rem;
text-align: center;
margin-bottom: 1.25rem;
}
.hero h1 {
font-size: 1.9rem;
margin-bottom: 1rem;
}
.hero p {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.hero-buttons {
flex-direction: column;
width: 100%;
gap: 0.75rem;
}
.hero-buttons .btn {
width: 100%;
justify-content: center;
}
.hero-stats {
gap: 1.25rem 1.5rem;
margin-top: 2rem;
}
.hero-stats .stat {
flex: 0 1 calc(50% - 0.75rem);
}
.hero-stats .number {
font-size: 1.5rem;
}
.hero-stats .label {
font-size: 0.75rem;
}
.hero-carousel-dots {
bottom: 1.5rem;
}
.hero-scroll-cue {
display: none;
}
}
@media (max-width: 400px) {
.hero h1 {
font-size: 1.6rem;
}
.hero-stats .stat {
flex: 0 1 100%;
}
}
/* Trusted By Section */
.trusted-by {
background: var(--surface-alt);
padding: 3rem 0;
text-align: center;
}
.trusted-by p {
color: var(--text-muted);
margin-bottom: 1.5rem;
font-weight: 600;
}
.companies {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.companies span {
padding: 0.5rem 1rem;
background: var(--surface);
border-radius: 8px;
font-weight: 500;
color: var(--text);
box-shadow: var(--shadow);
white-space: nowrap;
}
@media (max-width: 768px) {
.trusted-by {
padding: 2rem 0;
}
.trusted-by .container {
padding: 0;
}
.trusted-by p {
padding: 0 1.25rem;
font-size: 0.9rem;
}
.companies {
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scroll-snap-type: x proximity;
gap: 0.75rem;
padding: 0.25rem 1.25rem 0.5rem;
margin: 0;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.companies::-webkit-scrollbar {
display: none;
}
.companies span {
scroll-snap-align: start;
flex: 0 0 auto;
font-size: 0.8rem;
padding: 0.5rem 0.9rem;
}
}
/* Feature List */
.feature-list {
list-style: none;
margin-top: 1rem;
}
.feature-list li {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
}
.feature-list li i {
color: var(--success);
}
/* ===== ENHANCED HOW IT WORKS SECTION ===== */
.how-it-works {
padding: 100px 0;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
position: relative;
overflow: hidden;
}
.how-it-works::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
}
.how-it-works .section-title {
text-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 1;
}
.how-it-works .section-title h2 {
font-size: 3rem;
color: var(--text);
margin-bottom: 1rem;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.how-it-works .section-title p {
font-size: 1.25rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
}
/* Enhanced Steps Grid */
.steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2.5rem;
position: relative;
z-index: 1;
}
/* Connecting Line Animation */
.steps::before {
content: '';
position: absolute;
top: 100px;
left: 10%;
right: 10%;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
var(--primary) 20%,
var(--primary) 80%,
transparent 100%);
z-index: 0;
opacity: 0.3;
}
/* Enhanced Step Cards */
.step {
background: var(--surface);
padding: 3rem 2rem;
border-radius: 20px;
box-shadow:
0 10px 25px rgba(0, 0, 0, 0.05),
0 5px 10px rgba(0, 0, 0, 0.02);
text-align: center;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
border: 1px solid rgba(255, 255, 255, 0.8);
overflow: hidden;
z-index: 1;
}
.step::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(255, 255, 255, 0.4),
transparent);
transition: left 0.6s ease;
}
.step:hover::before {
left: 100%;
}
.step:hover {
transform: translateY(-15px) scale(1.02);
box-shadow:
0 25px 50px rgba(37, 99, 235, 0.15),
0 15px 30px rgba(0, 0, 0, 0.1);
border-color: var(--primary-light);
}
.step:nth-child(1):hover {
border-left: 4px solid var(--primary);
}
.step:nth-child(2):hover {
border-left: 4px solid var(--success);
}
.step:nth-child(3):hover {
border-left: 4px solid var(--secondary);
}
.step:nth-child(4):hover {
border-left: 4px solid #8b5cf6;
}
/* Enhanced Step Numbers */
.step-number {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 700;
margin: 0 auto 2rem;
position: relative;
transition: all 0.4s ease;
box-shadow:
0 10px 20px rgba(37, 99, 235, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.step:hover .step-number {
transform: scale(1.1) rotate(5deg);
box-shadow:
0 15px 30px rgba(37, 99, 235, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.step-number::after {
content: '';
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border-radius: 50%;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
z-index: -1;
opacity: 0.3;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
opacity: 0.3;
}
50% {
transform: scale(1.1);
opacity: 0.1;
}
}
/* Step-specific number colors */
.step:nth-child(1) .step-number {
background: linear-gradient(135deg, var(--primary), #3b82f6);
}
.step:nth-child(2) .step-number {
background: linear-gradient(135deg, var(--success), #34d399);
}
.step:nth-child(3) .step-number {
background: linear-gradient(135deg, var(--secondary), #f59e0b);
}
.step:nth-child(4) .step-number {
background: linear-gradient(135deg, #8b5cf6, #a78bfa);
}
/* Enhanced Step Content */
.step h3 {
font-size: 1.5rem;
margin-bottom: 1.5rem;
color: var(--text);
position: relative;
padding-bottom: 1rem;
}
.step h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: linear-gradient(90deg, var(--primary), transparent);
border-radius: 2px;
transition: width 0.3s ease;
}
.step:hover h3::after {
width: 80px;
}
.step p {
color: var(--text-muted);
line-height: 1.7;
font-size: 1.05rem;
position: relative;
}
/* Step Icons */
.step::after {
content: '';
position: absolute;
top: -10px;
right: -10px;
width: 60px;
height: 60px;
background: var(--primary-light);
border-radius: 50%;
opacity: 0;
transform: scale(0);
transition: all 0.4s ease;
}
.step:hover::after {
opacity: 0.1;
transform: scale(1);
}
/* Step Progress Indicators */
.step-progress {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--success));
transition: width 0.8s ease;
border-radius: 0 0 20px 20px;
}
.step:hover .step-progress {
width: 100%;
}
/* Floating Animation */
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.step {
animation: float 6s ease-in-out infinite;
}
.step:nth-child(2) {
animation-delay: 0.5s;
}
.step:nth-child(3) {
animation-delay: 1s;
}
.step:nth-child(4) {
animation-delay: 1.5s;
}
/* Step Counter */
.step-counter {
position: absolute;
top: 1.5rem;
left: 1.5rem;
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 600;
opacity: 0;
transform: translateX(-10px);
transition: all 0.3s ease;
}
.step:hover .step-counter {
opacity: 1;
transform: translateX(0);
}
/* Enhanced Mobile Experience */
@media (max-width: 1024px) {
.steps {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.steps::before {
display: none;
}
}
@media (max-width: 768px) {
.how-it-works {
padding: 80px 0;
}
.how-it-works .section-title h2 {
font-size: 2.5rem;
}
.steps {
grid-template-columns: 1fr;
gap: 2rem;
max-width: 500px;
margin: 0 auto;
}
.step {
padding: 2.5rem 1.5rem;
}
.step-number {
width: 70px;
height: 70px;
font-size: 1.75rem;
}
}
@media (max-width: 480px) {
.how-it-works .section-title h2 {
font-size: 2rem;
}
.how-it-works .section-title p {
font-size: 1.125rem;
}
.step {
padding: 2rem 1.25rem;
}
.step h3 {
font-size: 1.375rem;
}
.step p {
font-size: 1rem;
}
}
/* Dark Mode Support (driven by the theme tokens so both the auto
system preference and the manual toggle in the navbar apply here) */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .how-it-works {
background: var(--surface-alt);
}
:root:not([data-theme="light"]) .step {
background: var(--surface);
border-color: var(--border);
}
:root:not([data-theme="light"]) .step h3 {
color: var(--text);
}
:root:not([data-theme="light"]) .step p {
color: var(--text-muted);
}
}
[data-theme="dark"] .how-it-works {
background: var(--surface-alt);
}
[data-theme="dark"] .step {
background: var(--surface);
border-color: var(--border);
}
[data-theme="dark"] .step h3 {
color: var(--text);
}
[data-theme="dark"] .step p {
color: var(--text-muted);
}
/* Print Styles */
@media print {
.how-it-works {
background: white !important;
padding: 50px 0 !important;
}
.step {
box-shadow: none !important;
border: 1px solid var(--border) !important;
break-inside: avoid;
}
.step:hover {
transform: none !important;
}
}
/* Testimonials */
.testimonials {
padding: 100px 0;
background: var(--surface-alt);
}
.testimonial-slider {
position: relative;
max-width: 700px;
margin: 3rem auto 0;
}
.testimonial-viewport {
overflow: hidden;
border-radius: 16px;
}
.testimonial-track {
display: flex;
width: 100%;
transition: transform 0.5s ease;
}
.testimonial-card {
box-sizing: border-box;
flex: 1 0 100%;
max-width: 100%;
width: 100%;
background: var(--surface);
padding: 2.5rem;
border-radius: 16px;
box-shadow: var(--shadow);
text-align: center;
}
.testimonial-content {
margin-bottom: 1.5rem;
min-height: 100px;
}
.testimonial-content p {
font-size: 1.05rem;
line-height: 1.7;
color: var(--text);
font-style: italic;
margin: 0;
}
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.author-avatar {
width: 50px;
height: 50px;
flex-shrink: 0;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 600;
}
.author-info {
text-align: left;
}
.author-info h4 {
margin: 0 0 0.25rem;
color: var(--text);
font-size: 1rem;
}
.author-info p {
margin: 0;
color: var(--text-muted);
font-size: 0.875rem;
}
.testimonial-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin-top: 1.75rem;
}
.testimonial-arrow {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: var(--primary);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.testimonial-arrow:hover {
background: var(--primary-dark);
}
.testimonial-dots {
display: flex;
align-items: center;
gap: 0.6rem;
}
.testimonial-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: none;
background: var(--border);
cursor: pointer;
padding: 0;
transition: var(--transition);
}
.testimonial-dot.active {
background: var(--primary);
width: 26px;
border-radius: 6px;
}
@media (max-width: 768px) {
.testimonial-card {
padding: 2rem 1.5rem;
}
.testimonial-author {
flex-direction: column;
text-align: center;
}
.author-info {
text-align: center;
}
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
padding: 80px 0;
text-align: center;
}
.cta-content h2 {
margin-bottom: 1rem;
font-size: 2.5rem;
}
.cta-content p {
margin-bottom: 2rem;
opacity: 0.9;
font-size: 1.125rem;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Social Links */
.social-links {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
background: var(--dark);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
text-decoration: none;
transition: var(--transition);
}
.social-links a:hover {
background: var(--primary);
transform: translateY(-2px);
}
/* ===== POST JOBS PAGE STYLES ===== */
/* Stats Banner */
.stats-banner {
background: linear-gradient(135deg, var(--white) 0%, #f8fafc 100%);
padding: 4rem 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
position: relative;
overflow: hidden;
}
.stats-banner::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
background-size: cover;
}
.stats-banner-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
position: relative;
z-index: 2;
}
.stat-item {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 2rem;
background: var(--surface);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow:
0 10px 40px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(255, 255, 255, 0.9);
backdrop-filter: blur(10px);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
}
.stat-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
transparent,
rgba(37, 99, 235, 0.05),
transparent);
transition: left 0.6s ease;
}
.stat-item:hover::before {
left: 100%;
}
.stat-item:hover {
transform: translateY(-8px);
box-shadow:
0 20px 60px rgba(37, 99, 235, 0.15),
0 0 0 1px rgba(37, 99, 235, 0.1);
}
.stat-item i {
font-size: 2.5rem;
color: var(--primary);
background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
padding: 1.5rem;
border-radius: 16px;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.stat-item h3 {
font-size: 1.75rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.5rem;
background: linear-gradient(135deg, var(--dark), var(--gray));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-item p {
color: var(--text-muted);
font-size: 0.875rem;
margin: 0;
font-weight: 500;
}
/* Job Posting Section */
.job-posting-section {
padding: 80px 0;
background: var(--surface-alt);
}
.posting-header {
text-align: center;
margin-bottom: 3rem;
}
.posting-header h2 {
font-size: 2.5rem;
color: var(--text);
margin-bottom: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.posting-header p {
font-size: 1.125rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
}
/* Posting Wizard */
.posting-wizard {
background: var(--surface);
border-radius: 24px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.08),
0 0 0 1px rgba(0, 0, 0, 0.02);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.8);
position: relative;
}
.wizard-progress {
padding: 2rem 2rem 1rem;
background: var(--surface-alt);
border-bottom: 1px solid var(--border);
}
.progress-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
opacity: 0.5;
transition: var(--transition);
}
.progress-step.active {
opacity: 1;
}
.step-number {
width: 40px;
height: 40px;
background: var(--border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
color: var(--text-muted);
border: 3px solid transparent;
transition: var(--transition);
}
.progress-step.active .step-number {
background: var(--primary);
color: var(--white);
border-color: #dbeafe;
}
.step-label {
font-size: 0.875rem;
font-weight: 500;
color: var(--text);
}
.progress-bar {
height: 6px;
background: var(--border);
border-radius: 3px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--primary-dark));
border-radius: 3px;
transition: width 0.3s ease;
}
/* Job Form */
.job-form {
padding: 3rem;
}
.form-step {
display: none;
max-width: 800px;
margin: 0 auto;
}
.form-step.active {
display: block;
}
.step-header {
text-align: center;
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
}
.step-header h3 {
font-size: 1.75rem;
color: var(--text);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.step-header p {
color: var(--text-muted);
font-size: 1.125rem;
}
.form-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
margin-bottom: 2rem;
}
.form-group {
display: flex;
flex-direction: column;
position: relative;
}
.form-group.full-width {
grid-column: 1 / -1;
}
.form-group label {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
font-weight: 600;
color: var(--text);
font-size: 1rem;
transition: all 0.3s ease;
}
.form-group label i {
color: var(--primary);
width: 18px;
font-size: 1.125rem;
transition: all 0.3s ease;
}
.input-tip {
font-size: 0.875rem;
color: var(--text-muted);
margin-top: 0.25rem;
font-style: italic;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 1rem 1.25rem;
border: 2px solid var(--border);
border-radius: 8px;
font-size: 1rem;
transition: var(--transition);
font-family: inherit;
background: var(--input-bg);
color: var(--text);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
/* Salary Inputs */
.salary-inputs {
display: flex;
align-items: center;
gap: 0.75rem;
}
.salary-inputs input {
flex: 1;
text-align: center;
}
.salary-separator {
color: var(--text-muted);
font-weight: 500;
}
.salary-period {
min-width: 120px;
}
/* Character Counter */
.char-counter {
text-align: right;
font-size: 0.875rem;
color: var(--text-muted);
margin-top: 0.5rem;
}
/* Skills Input */
.skills-input-container {
border: 2px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
background: var(--surface);
}
.skills-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
min-height: 42px;
}
.skill-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--primary);
color: var(--white);
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}
.tag-remove {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 0;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: var(--transition);
font-size: 1.125rem;
}
.tag-remove:hover {
background: rgba(255,255,255,0.2);
}
.skills-input-wrapper {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.skills-input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 1rem;
}
.skills-add-btn {
padding: 0.75rem 1.5rem;
background: var(--primary);
color: var(--white);
border: none;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
font-weight: 500;
}
.skills-add-btn:hover {
background: var(--primary-dark);
}
.skills-suggestions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.suggestion-tag {
padding: 0.5rem 1rem;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 20px;
font-size: 0.875rem;
color: var(--text-muted);
cursor: pointer;
transition: var(--transition);
}
.suggestion-tag:hover {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
/* Checkbox Grid */
.checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-top: 0.5rem;
}
.checkbox-option {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--surface-alt);
border: 2px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
}
.checkbox-option:hover {
border-color: var(--primary);
}
.checkbox-option input {
display: none;
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--border);
border-radius: 4px;
position: relative;
transition: var(--transition);
}
.checkbox-option input:checked + .checkmark {
background: var(--primary);
border-color: var(--primary);
}
.checkbox-option input:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--white);
font-size: 0.75rem;
font-weight: bold;
}
/* Form Actions */
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
/* Review Section */
.review-section {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 3rem;
}
.review-card {
background: var(--surface-alt);
border-radius: 12px;
padding: 2rem;
border: 1px solid var(--border);
}
.review-card h4 {
margin-bottom: 1.5rem;
color: var(--text);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.125rem;
}
.review-card h4 i {
color: var(--primary);
}
.review-content {
display: flex;
flex-direction: column;
gap: 1rem;
}
.review-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
}
.review-item:last-child {
border-bottom: none;
}
.review-item strong {
min-width: 140px;
color: var(--text);
font-weight: 600;
}
.skills-review {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.skill-preview {
padding: 0.5rem 1rem;
background: var(--surface-alt);
color: var(--primary);
border-radius: 15px;
font-size: 0.875rem;
font-weight: 500;
}
/* Pricing Options */
.pricing-options {
margin-bottom: 3rem;
}
.pricing-options h4 {
text-align: center;
margin-bottom: 2rem;
color: var(--text);
font-size: 1.5rem;
}
.pricing-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
max-width: 700px;
margin: 0 auto;
}
.pricing-card {
background: var(--surface);
border: 2px solid var(--border);
border-radius: 16px;
padding: 2.5rem;
text-align: center;
position: relative;
transition: var(--transition);
}
.pricing-card.featured {
border-color: var(--primary);
transform: scale(1.05);
box-shadow: var(--shadow);
}
.pricing-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.pricing-card.featured:hover {
transform: scale(1.05) translateY(-5px);
}
.pricing-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--white);
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pricing-header {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.pricing-header h5 {
font-size: 1.5rem;
color: var(--text);
margin-bottom: 1rem;
}
.price {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
line-height: 1;
}
.price span {
font-size: 1rem;
color: var(--text-muted);
font-weight: 400;
}
.pricing-features {
list-style: none;
margin-bottom: 2rem;
text-align: left;
}
.pricing-features li {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0;
color: var(--text);
}
.pricing-features li i {
width: 16px;
}
.pricing-features li i.fa-check {
color: var(--success);
}
.pricing-features li i.fa-times {
color: #ef4444;
}
/* Benefits Section */
.benefits-section {
padding: 80px 0;
background: var(--surface);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.benefit-card {
background: var(--surface);
padding: 2.5rem;
border-radius: 16px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
border: 1px solid #f1f5f9;
position: relative;
overflow: hidden;
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.benefit-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}
.benefit-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 2rem;
margin: 0 auto 1.5rem;
}
.benefit-card h3 {
margin-bottom: 1rem;
color: var(--text);
font-size: 1.5rem;
}
.benefit-card p {
color: var(--text-muted);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.benefit-metric {
background: var(--surface-alt);
padding: 1rem;
border-radius: 8px;
border-left: 4px solid var(--primary);
}
.metric-value {
display: block;
font-size: 1.75rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.25rem;
line-height: 1;
}
.metric-label {
font-size: 0.875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Success Stories */
.success-stories {
padding: 80px 0;
background: var(--surface-alt);
}
.stories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.story-card {
background: var(--surface);
padding: 2.5rem;
border-radius: 16px;
box-shadow: var(--shadow);
display: flex;
gap: 2rem;
border: 1px solid #f1f5f9;
transition: var(--transition);
}
.story-card:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.story-content {
flex: 1;
}
.story-avatar {
width: 60px;
height: 60px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 600;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.story-text p {
font-style: italic;
color: var(--text);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 1.125rem;
}
.story-author strong {
display: block;
color: var(--text);
margin-bottom: 0.25rem;
font-size: 1.125rem;
}
.story-author span {
color: var(--text-muted);
font-size: 0.875rem;
}
.story-stats {
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 120px;
}
.story-stat {
text-align: center;
padding: 1rem;
background: var(--surface-alt);
border-radius: 8px;
border: 1px solid var(--border);
}
.stat-number {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.25rem;
line-height: 1;
}
.stat-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* CTA Section */
.profile-cta {
padding: 80px 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
text-align: center;
}
.cta-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--white);
}
.cta-content p {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.btn-large {
padding: 1.25rem 2.5rem;
font-size: 1.125rem;
}
.cta-features {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.feature {
display: flex;
align-items: center;
gap: 0.75rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
.feature i {
color: var(--secondary);
font-size: 1.125rem;
}
/* Button Styles */
.btn-success {
background: var(--success);
color: var(--white);
border: none;
}
.btn-success:hover {
background: #059669;
transform: translateY(-2px);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
.btn:disabled:hover {
transform: none !important;
}
/* Responsive Design */
@media (max-width: 1024px) {
.form-grid {
grid-template-columns: 1fr;
}
.progress-steps {
grid-template-columns: repeat(2, 1fr);
}
.story-card {
flex-direction: column;
text-align: center;
}
.story-stats {
flex-direction: row;
justify-content: space-around;
}
}
@media (max-width: 768px) {
.job-form {
padding: 2rem 1.5rem;
}
.posting-header h2 {
font-size: 2rem;
}
.stats-banner-grid {
grid-template-columns: 1fr;
}
.stat-item {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.progress-steps {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.progress-step {
flex-direction: row;
text-align: left;
gap: 1rem;
}
.step-label {
font-size: 1rem;
}
.salary-inputs {
flex-direction: column;
gap: 0.5rem;
}
.salary-period {
min-width: auto;
width: 100%;
}
.skills-input-wrapper {
flex-direction: column;
}
.form-actions {
flex-direction: column;
gap: 1rem;
}
.form-actions .btn {
width: 100%;
}
.pricing-cards {
grid-template-columns: 1fr;
}
.pricing-card.featured {
transform: none;
}
.pricing-card.featured:hover {
transform: translateY(-5px);
}
.benefits-grid {
grid-template-columns: 1fr;
}
.stories-grid {
grid-template-columns: 1fr;
}
.cta-buttons {
flex-direction: column;
align-items: center;
}
.cta-features {
flex-direction: column;
gap: 1rem;
}
}
@media (max-width: 480px) {
.job-form {
padding: 11.5rem 1rem;
}
.checkbox-grid {
grid-template-columns: 1fr;
}
.review-item {
flex-direction: column;
gap: 0.5rem;
}
.review-item strong {
min-width: auto;
}
.pricing-card {
padding: 2rem 1.5rem;
}
}
/* ===== SKILL TRAINING PAGE STYLES ===== */
/* Training Benefits Section */
.training-benefits {
padding: 80px 0;
background: var(--surface-alt);
}
.earnings-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 900px;
margin: 0 auto;
}
.earnings-card {
background: var(--surface);
border-radius: 16px;
box-shadow: var(--shadow);
overflow: hidden;
transition: var(--transition);
border: 2px solid transparent;
}
.earnings-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.earnings-card.certified {
border-color: var(--success);
position: relative;
}
.earnings-header {
padding: 2rem;
text-align: center;
color: var(--white);
}
.earnings-header.uncertified {
background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}
.earnings-header.certified {
background: linear-gradient(135deg, var(--success) 0%, #059669 100%);
}
.earnings-header h3 {
font-size: 1.25rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.hourly-rate {
font-size: 1.75rem;
font-weight: 700;
margin-top: 0.5rem;
}
.earnings-features {
padding: 2rem;
list-style: none;
}
.earnings-features li {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem 0;
border-bottom: 1px solid #f1f5f9;
}
.earnings-features li:last-child {
border-bottom: none;
}
.earnings-features li.negative {
color: #ef4444;
}
.earnings-features li.positive {
color: var(--success);
}
.earnings-features li i {
font-size: 1.125rem;
width: 20px;
}
.increase-badge {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
background: var(--success);
color: var(--white);
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.25rem;
}
/* Skill Assessment Section */
.skill-assessment-section {
padding: 80px 0;
background: var(--surface);
}
.assessment-header {
text-align: center;
margin-bottom: 3rem;
}
.assessment-header h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--text);
}
.assessment-header p {
font-size: 1.125rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto;
}
.assessment-card {
background: var(--surface);
border-radius: 20px;
box-shadow: var(--shadow);
padding: 3rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
border: 1px solid #f1f5f9;
}
.assessment-progress {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
.progress-circle {
position: relative;
width: 200px;
height: 200px;
}
.circle-bg {
width: 100%;
height: 100%;
border: 8px solid #f1f5f9;
border-radius: 50%;
}
.circle-fill {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 8px solid var(--primary);
border-radius: 50%;
clip-path: inset(0 0 0 50%);
transform: rotate(0deg);
border-right-color: transparent;
border-bottom-color: transparent;
}
.progress-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.progress-percent {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
line-height: 1;
}
.progress-label {
font-size: 0.875rem;
color: var(--text-muted);
margin-top: 0.5rem;
}
.progress-details h3 {
margin-bottom: 0.5rem;
color: var(--text);
}
.progress-details p {
color: var(--text-muted);
margin-bottom: 1.5rem;
}
.skill-breakdown {
display: flex;
flex-direction: column;
gap: 1rem;
}
.skill-metric {
display: flex;
align-items: center;
gap: 1rem;
}
.metric-label {
min-width: 120px;
font-weight: 500;
color: var(--text);
font-size: 0.875rem;
}
.metric-bar {
flex: 1;
height: 8px;
background: var(--surface-alt);
border-radius: 4px;
overflow: hidden;
}
.metric-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--primary-dark));
border-radius: 4px;
transition: width 1s ease;
}
.metric-value {
min-width: 40px;
text-align: right;
font-weight: 600;
color: var(--primary);
font-size: 0.875rem;
}
.assessment-recommendations h4 {
margin-bottom: 1.5rem;
color: var(--text);
font-size: 1.25rem;
}
.recommendation-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.recommendation-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: var(--surface-alt);
border-radius: 12px;
border: 1px solid var(--border);
}
.rec-icon {
width: 50px;
height: 50px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.25rem;
flex-shrink: 0;
}
.rec-details {
flex: 1;
}
.rec-details h5 {
margin-bottom: 0.25rem;
color: var(--text);
font-size: 1rem;
}
.rec-details p {
color: var(--text-muted);
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
.rec-duration {
font-size: 0.75rem;
color: var(--primary);
font-weight: 500;
}
.btn-small {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.assessment-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
/* Training Programs Section */
.training-programs-section {
padding: 80px 0;
background: var(--surface-alt);
}
.program-filters {
margin-bottom: 3rem;
}
.filter-tabs {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
justify-content: center;
}
.filter-tab {
padding: 0.75rem 1.5rem;
background: var(--surface);
border: 2px solid var(--border);
border-radius: 25px;
color: var(--text-muted);
font-weight: 500;
cursor: pointer;
transition: var(--transition);
}
.filter-tab:hover {
border-color: var(--primary);
color: var(--primary);
}
.filter-tab.active {
background: var(--primary);
border-color: var(--primary);
color: var(--white);
}
.programs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.program-card {
background: var(--surface);
border-radius: 16px;
box-shadow: var(--shadow);
padding: 2rem;
position: relative;
border: 1px solid #f1f5f9;
transition: var(--transition);
}
.program-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.program-badge {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.program-badge.popular {
background: var(--secondary);
color: var(--text);
}
.program-badge.new {
background: var(--primary);
color: var(--white);
}
.program-header {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.program-icon {
width: 60px;
height: 60px;
background: var(--primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.5rem;
flex-shrink: 0;
}
.program-info {
flex: 1;
}
.program-info h3 {
margin-bottom: 0.5rem;
color: var(--text);
font-size: 1.25rem;
}
.program-provider {
color: var(--primary);
font-weight: 600;
margin-bottom: 0.75rem;
font-size: 0.875rem;
}
.program-rating {
display: flex;
align-items: center;
gap: 0.5rem;
}
.stars {
color: var(--secondary);
}
.rating-text {
font-size: 0.875rem;
color: var(--text-muted);
}
.program-description {
margin-bottom: 1.5rem;
line-height: 1.6;
color: var(--text);
}
.program-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1.5rem;
background: var(--surface-alt);
border-radius: 12px;
}
.detail-item {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--text);
}
.detail-item i {
color: var(--primary);
width: 16px;
}
.program-outcomes {
margin-bottom: 2rem;
}
.program-outcomes h4 {
margin-bottom: 1rem;
color: var(--text);
font-size: 1rem;
}
.program-outcomes ul {
list-style: none;
padding-left: 0;
}
.program-outcomes li {
padding: 0.25rem 0;
color: var(--text-muted);
font-size: 0.875rem;
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.program-outcomes li:before {
content: '✓';
color: var(--success);
font-weight: 600;
flex-shrink: 0;
}
.program-actions {
display: flex;
gap: 0.5rem;
}
/* Financing Section */
.financing-section {
padding: 80px 0;
background: var(--surface);
}
.financing-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: start;
}
.financing-text h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--text);
}
.financing-text p {
font-size: 1.125rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
}
.financing-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.financing-option {
text-align: center;
padding: 1.5rem;
background: var(--surface-alt);
border-radius: 12px;
border: 1px solid var(--border);
}
.financing-option i {
font-size: 2.5rem;
color: var(--primary);
margin-bottom: 1rem;
}
.financing-option h4 {
margin-bottom: 0.5rem;
color: var(--text);
}
.financing-option p {
font-size: 0.875rem;
color: var(--text-muted);
margin-bottom: 0;
}
.financing-cta {
position: sticky;
top: 2rem;
}
.cta-card {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
padding: 2.5rem;
border-radius: 16px;
text-align: center;
}
.cta-card h3 {
margin-bottom: 1rem;
font-size: 1.5rem;
}
.cta-card p {
margin-bottom: 2rem;
opacity: 0.9;
}
.btn-large {
padding: 1rem 2rem;
font-size: 1.125rem;
}
.cta-note {
margin-top: 1rem;
font-size: 0.875rem;
opacity: 0.8;
}
/* Responsive Design for Training Page */
@media (max-width: 1024px) {
.assessment-card {
grid-template-columns: 1fr;
gap: 2rem;
}
.financing-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.financing-cta {
position: static;
}
}
@media (max-width: 768px) {
.earnings-comparison {
grid-template-columns: 1fr;
}
.programs-grid {
grid-template-columns: 1fr;
}
.program-details {
grid-template-columns: 1fr;
}
.program-actions {
flex-direction: column;
}
.assessment-progress {
text-align: center;
}
.skill-metric {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.metric-label {
min-width: auto;
}
.recommendation-item {
flex-direction: column;
text-align: center;
}
.filter-tabs {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.program-header {
flex-direction: column;
text-align: center;
}
.program-icon {
align-self: center;
}
}
@media (max-width: 480px) {
.assessment-card {
padding: 1.5rem;
}
.progress-circle {
width: 150px;
height: 150px;
}
.progress-percent {
font-size: 2rem;
}
.cta-card {
padding: 2rem 1.5rem;
}
}
/* ===== ABOUT PAGE ENHANCEMENTS ===== */
.about-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: start;
}
.about-text h2 {
margin-bottom: 1.5rem;
color: var(--text);
}
.about-text p {
margin-bottom: 1.5rem;
line-height: 1.8;
color: var(--text-muted);
}
.about-stats {
display: grid;
gap: 1rem;
}
.stat-card {
background: var(--surface);
padding: 1.5rem;
border-radius: 12px;
box-shadow: var(--shadow);
text-align: center;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.5rem;
}
.stat-label {
color: var(--text-muted);
font-size: 0.875rem;
}
/* Mission & Vision */
.mission-vision {
padding: 80px 0;
background: var(--surface-alt);
}
.mv-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.mv-card {
background: var(--surface);
padding: 2.5rem;
border-radius: 12px;
box-shadow: var(--shadow);
text-align: center;
}
.mv-icon {
width: 80px;
height: 80px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 2rem;
margin: 0 auto 1.5rem;
}
.mv-card h3 {
margin-bottom: 1rem;
color: var(--text);
}
.mv-card p {
color: var(--text-muted);
line-height: 1.6;
}
/* Team Section */
.team-section {
padding: 80px 0;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.team-member {
text-align: center;
padding: 2rem;
}
.member-avatar {
width: 100px;
height: 100px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 2rem;
font-weight: 600;
margin: 0 auto 1.5rem;
}
.team-member h3 {
margin-bottom: 0.5rem;
color: var(--text);
}
.member-role {
color: var(--primary);
font-weight: 600;
margin-bottom: 1rem;
}
.member-bio {
color: var(--text-muted);
line-height: 1.6;
}
/* Impact Section */
.impact-section {
padding: 80px 0;
background: var(--surface-alt);
}
.impact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.impact-card {
background: var(--surface);
padding: 2rem;
border-radius: 12px;
box-shadow: var(--shadow);
text-align: center;
}
.impact-card i {
font-size: 3rem;
color: var(--primary);
margin-bottom: 1rem;
}
.impact-card h3 {
margin-bottom: 0.5rem;
color: var(--text);
}
.impact-card p {
color: var(--text-muted);
}
/* ===== ADMIN DASHBOARD STYLES ===== */
.admin-dashboard {
padding: 80px 0;
background: var(--surface-alt);
min-height: 100vh;
}
.dashboard-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.stat-card {
background: var(--surface);
padding: 1.5rem;
border-radius: 12px;
box-shadow: var(--shadow);
display: flex;
align-items: center;
gap: 1rem;
}
.stat-icon {
width: 60px;
height: 60px;
background: var(--primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.5rem;
}
.stat-info {
flex: 1;
}
.stat-number {
font-size: 2rem;
font-weight: 700;
color: var(--text);
line-height: 1;
}
.stat-label {
color: var(--text-muted);
font-size: 0.875rem;
}
.stat-trend {
padding: 0.25rem 0.5rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
.stat-trend.up {
background: #dcfce7;
color: #166534;
}
.stat-trend.down {
background: #fee2e2;
color: #dc2626;
}
/* Dashboard Tabs */
.dashboard-tabs {
background: var(--surface);
border-radius: 12px;
box-shadow: var(--shadow);
overflow: hidden;
}
.tab-header {
display: flex;
background: var(--surface-alt);
border-bottom: 1px solid var(--border);
}
.tab-button {
padding: 1rem 2rem;
background: none;
border: none;
font-weight: 500;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: var(--transition);
position: relative;
}
.tab-button.active {
color: var(--primary);
background: var(--surface);
border-bottom: 2px solid var(--primary);
}
.tab-button:hover {
color: var(--primary);
}
.badge {
background: var(--primary);
color: var(--white);
border-radius: 10px;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
font-weight: 600;
}
.tab-content {
display: none;
padding: 2rem;
}
.tab-content.active {
display: block;
}
/* Table Styles */
.table-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.table-actions {
display: flex;
gap: 0.5rem;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
background: var(--surface-alt);
padding: 1rem;
text-align: left;
font-weight: 600;
color: var(--text);
border-bottom: 1px solid var(--border);
}
.data-table td {
padding: 1rem;
border-bottom: 1px solid #f1f5f9;
}
.worker-info {
display: flex;
align-items: center;
gap: 1rem;
}
.worker-avatar {
width: 40px;
height: 40px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 600;
font-size: 0.875rem;
}
.worker-name {
font-weight: 600;
color: var(--text);
}
.worker-contact {
font-size: 0.875rem;
color: var(--text-muted);
}
.status-badge {
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
.status-badge.active {
background: #dcfce7;
color: #166534;
}
.performance {
display: flex;
align-items: center;
gap: 0.5rem;
}
.stars {
color: var(--secondary);
}
.rating {
font-size: 0.875rem;
color: var(--text-muted);
}
.action-buttons {
display: flex;
gap: 0.25rem;
}
.btn-action {
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.btn-action.view {
background: #dbeafe;
color: var(--primary);
}
.btn-action.message {
background: #f0fdf4;
color: var(--success);
}
.btn-action.edit {
background: #fef3c7;
color: var(--secondary);
}
.btn-action.complete {
background: #dcfce7;
color: #166534;
}
.btn-action:hover {
transform: translateY(-1px);
}
/* Pending Actions */
.pending-actions-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.pending-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: var(--surface-alt);
border-radius: 8px;
border-left: 4px solid var(--primary);
}
.pending-icon {
width: 50px;
height: 50px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.25rem;
}
.pending-details {
flex: 1;
}
.pending-details h4 {
margin-bottom: 0.5rem;
color: var(--text);
}
.pending-details p {
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.pending-time {
font-size: 0.875rem;
color: var(--text-muted);
}
.pending-actions {
display: flex;
gap: 0.5rem;
}
/* Analytics */
.analytics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.analytics-card {
background: var(--surface-alt);
padding: 2rem;
border-radius: 12px;
border: 2px dashed var(--border);
}
.analytics-card h4 {
margin-bottom: 1rem;
color: var(--text);
}
.chart-placeholder {
height: 200px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--text-muted);
}
.chart-placeholder i {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-stats {
gap: 1.5rem;
}
.hero-stats .number {
font-size: 1.5rem;
}
.about-content {
grid-template-columns: 1fr;
}
.dashboard-stats {
grid-template-columns: 1fr;
}
.tab-header {
flex-direction: column;
}
.table-header {
flex-direction: column;
gap: 1rem;
align-items: stretch;
}
.table-actions {
justify-content: center;
}
.data-table {
display: block;
overflow-x: auto;
}
.pending-item {
flex-direction: column;
text-align: center;
}
.pending-actions {
justify-content: center;
}
}
.btn {
padding: 1rem 2rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
display: inline-block;
}
.btn-primary {
background: var(--secondary);
color: var(--text);
}
.btn-primary:hover {
background: #eab308;
transform: translateY(-2px);
}
.btn-danger {
background: var(--danger);
color: var(--white);
}
.btn-secondary {
background: transparent;
color: var(--white);
border: 2px solid var(--white);
}
.btn-secondary:hover {
background: var(--surface);
color: var(--primary);
transform: translateY(-2px);
}
/* ===== FEATURES SECTION ===== */
.features {
padding: 100px 0;
background: var(--surface-alt);
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title h2 {
font-size: 2.5rem;
color: var(--text);
margin-bottom: 1rem;
}
.section-title p {
color: var(--text-muted);
font-size: 1.125rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.feature-card {
background: var(--surface);
padding: 2.5rem;
border-radius: 12px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
width: 80px;
height: 80px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: var(--white);
font-size: 2rem;
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
color: var(--text);
}
.feature-card p {
color: var(--text-muted);
line-height: 1.6;
}
/* ===== STATS SECTION ===== */
.stats {
padding: 80px 0;
background: var(--primary);
color: var(--white);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
text-align: center;
}
.stat-item h3 {
font-size: 3rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.stat-item p {
opacity: 0.9;
font-size: 1.125rem;
}
/* ===== BLOG STYLES ===== */
.blog-section {
padding: 80px 0;
}
/* Featured post */
.blog-featured-post {
margin-bottom: 4rem;
}
.blog-featured-card {
background: var(--surface);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
min-height: 400px;
transition: var(--transition);
}
.blog-featured-card:hover {
transform: translateY(-2px);
}
.blog-featured-content {
padding: 3rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.blog-featured-tag {
background: var(--primary);
color: var(--white);
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
display: inline-block;
margin-bottom: 1rem;
width: fit-content;
}
.blog-featured-content h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--text);
}
.blog-featured-content p {
color: var(--text-muted);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.blog-featured-media {
background: linear-gradient(45deg, #2563eb, #1d4ed8);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.5rem;
font-weight: 600;
min-height: 220px;
}
/* Author row (shared by featured post + cards) */
.blog-author-row {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.blog-author-avatar {
width: 40px;
height: 40px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 600;
flex-shrink: 0;
}
.blog-author-avatar-sm {
width: 32px;
height: 32px;
font-size: 0.75rem;
}
.blog-author-name {
font-weight: 600;
color: var(--text);
}
.blog-author-meta {
color: var(--text-muted);
font-size: 0.875rem;
}
/* Category filter pills */
.blog-category-filter {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 3rem;
}
.blog-filter-pill {
padding: 0.75rem 1.5rem;
background: var(--surface-alt);
color: var(--text);
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: var(--transition);
white-space: nowrap;
}
.blog-filter-pill.active {
background: var(--primary);
color: var(--white);
}
.blog-filter-pill:hover:not(.active) {
background: var(--border);
}
/* Blog grid + cards */
.blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 2rem;
}
.blog-card {
background: var(--surface);
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow);
transition: var(--transition);
display: flex;
flex-direction: column;
}
.blog-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.blog-card-image {
height: 200px;
background: linear-gradient(45deg, var(--primary), var(--primary-dark));
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 600;
flex-shrink: 0;
}
.blog-card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.blog-card-tags {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.blog-card-tag {
color: var(--white);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
}
.blog-card-tag-trending {
background: var(--secondary);
color: var(--dark);
}
.blog-card-body h3 {
font-size: 1.25rem;
margin-bottom: 1rem;
color: var(--text);
line-height: 1.4;
}
.blog-card-body > p {
color: var(--text-muted);
margin-bottom: 1.5rem;
line-height: 1.6;
font-size: 0.875rem;
flex: 1;
}
.blog-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.blog-author-meta-block {
font-size: 0.875rem;
}
.blog-read-link {
color: var(--primary);
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
white-space: nowrap;
}
.blog-empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 3rem;
}
.blog-empty-state h3 {
color: var(--text-muted);
margin-bottom: 1rem;
}
.blog-empty-state p {
color: var(--text-muted);
}
/* Pagination */
.blog-pagination {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-top: 3rem;
gap: 0.5rem;
}
/* Newsletter */
.blog-newsletter {
background: var(--primary);
color: var(--white);
padding: 3rem;
border-radius: 12px;
margin-top: 4rem;
text-align: center;
}
.blog-newsletter h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--white);
}
.blog-newsletter p {
margin-bottom: 2rem;
opacity: 0.9;
}
.blog-newsletter-form {
display: flex;
gap: 1rem;
justify-content: center;
max-width: 400px;
margin: 0 auto;
}
.blog-newsletter-form input {
flex: 1;
min-width: 0;
padding: 0.75rem 1rem;
border: none;
border-radius: 8px;
font-size: 1rem;
}
.blog-newsletter-btn {
background: var(--secondary);
color: var(--dark);
border: none;
white-space: nowrap;
}
.blog-newsletter input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.3);
}
/* Responsive blog grid */
@media (max-width: 768px) {
.blog-section {
padding: 50px 0;
}
.blog-featured-card {
grid-template-columns: 1fr;
min-height: 0;
}
.blog-featured-content {
padding: 2rem 1.5rem;
}
.blog-featured-content h2 {
font-size: 1.5rem;
}
.blog-featured-media {
min-height: 180px;
order: -1;
}
.blog-category-filter {
flex-wrap: nowrap;
overflow-x: auto;
justify-content: flex-start;
margin: 0 -1.25rem 2rem;
padding: 0 1.25rem 0.5rem;
scrollbar-width: none;
}
.blog-category-filter::-webkit-scrollbar {
display: none;
}
.blog-filter-pill {
flex: 0 0 auto;
}
.blog-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.blog-newsletter {
padding: 2rem 1.25rem;
}
.blog-newsletter h2 {
font-size: 1.5rem;
}
.blog-newsletter-form {
flex-direction: column;
}
}
/* Blog categories */
.category-tag {
background: var(--surface-alt);
color: var(--primary);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
}
/* ===== ENHANCED CONTACT PAGE STYLES ===== */
/* Support Options Section */
.support-options {
padding: 80px 0;
background: var(--surface);
}
.support-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.support-card {
background: var(--surface);
padding: 2.5rem;
border-radius: 16px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
border: 2px solid #f1f5f9;
position: relative;
}
.support-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.support-card.featured {
border-color: var(--primary);
transform: scale(1.05);
}
.support-card.featured:hover {
transform: scale(1.05) translateY(-5px);
}
.support-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--primary);
color: var(--white);
padding: 0.5rem 1.5rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.support-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 2rem;
margin: 0 auto 1.5rem;
}
.support-card h3 {
margin-bottom: 1rem;
color: var(--text);
font-size: 1.5rem;
}
.support-card p {
color: var(--text-muted);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.support-features {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 2rem;
}
.feature {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text);
font-size: 0.875rem;
}
.feature i {
color: var(--success);
width: 16px;
}
.agent-status {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
}
.status-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success);
}
.status-indicator.online {
background: var(--success);
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}
/* Enhanced Contact Section */
.contact-enhanced {
padding: 80px 0;
background: var(--surface-alt);
}
.contact-grid-enhanced {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: start;
}
.contact-info-enhanced {
display: flex;
flex-direction: column;
gap: 3rem;
}
.contact-header h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--text);
}
.contact-header p {
font-size: 1.125rem;
color: var(--text-muted);
line-height: 1.6;
}
.contact-methods {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-method-card {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 2rem;
background: var(--surface);
border-radius: 12px;
box-shadow: var(--shadow);
border: 1px solid #f1f5f9;
transition: var(--transition);
}
.contact-method-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.method-icon {
width: 60px;
height: 60px;
background: var(--primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.5rem;
flex-shrink: 0;
}
.method-content {
flex: 1;
}
.method-content h4 {
margin-bottom: 0.75rem;
color: var(--text);
font-size: 1.25rem;
}
.method-content p {
color: var(--text-muted);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.contact-details {
margin-bottom: 1rem;
}
.contact-details strong {
display: block;
color: var(--text);
margin-bottom: 0.25rem;
font-size: 1.125rem;
}
.contact-details span {
color: var(--text-muted);
font-size: 0.875rem;
line-height: 1.4;
}
.business-hours {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
font-size: 0.875rem;
margin-top: 1rem;
}
.business-hours i {
color: var(--primary);
}
/* Social Contact */
.social-contact {
padding: 2rem;
background: var(--surface);
border-radius: 12px;
box-shadow: var(--shadow);
border: 1px solid #f1f5f9;
}
.social-contact h4 {
margin-bottom: 0.5rem;
color: var(--text);
}
.social-contact p {
color: var(--text-muted);
margin-bottom: 1.5rem;
font-size: 0.875rem;
}
.social-links {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.75rem;
}
.social-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 8px;
color: var(--text);
text-decoration: none;
transition: var(--transition);
font-size: 0.875rem;
font-weight: 500;
cursor: not-allowed;
}
.social-link:hover {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
transform: translateY(-1px);
}
/* Enhanced Contact Form */
.contact-form-enhanced {
background: var(--surface);
padding: 3rem;
border-radius: 16px;
box-shadow: var(--shadow);
border: 1px solid #f1f5f9;
position: sticky;
top: 2rem;
}
.form-header {
text-align: center;
margin-bottom: 2.5rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border);
}
.form-header h3 {
font-size: 1.75rem;
color: var(--text);
margin-bottom: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.form-header p {
color: var(--text-muted);
font-size: 1rem;
}
.enhanced-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.enhanced-form .form-group {
margin-bottom: 0;
}
.enhanced-form .form-group label {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
font-weight: 600;
color: var(--text);
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.enhanced-form .form-group label i {
color: var(--primary);
width: 16px;
font-size: 0.875rem;
}
.enhanced-form input,
.enhanced-form select,
.enhanced-form textarea {
width: 100%;
padding: 1rem 1.25rem;
border: 2px solid var(--border);
border-radius: 8px;
font-size: 1rem;
transition: var(--transition);
font-family: inherit;
background: var(--surface);
}
.enhanced-form input:focus,
.enhanced-form select:focus,
.enhanced-form textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
background: var(--surface-alt);
}
.enhanced-form textarea {
resize: vertical;
min-height: 120px;
line-height: 1.5;
}
/* Audience Selector */
.audience-selector {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.75rem;
}
.audience-option {
cursor: pointer;
}
.audience-option input {
display: none;
}
.option-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1.5rem 1rem;
background: var(--surface-alt);
border: 2px solid var(--border);
border-radius: 8px;
transition: var(--transition);
text-align: center;
}
.audience-option input:checked + .option-content {
background: #dbeafe;
border-color: var(--primary);
color: var(--primary);
}
.audience-option:hover .option-content {
border-color: var(--primary);
}
.option-content i {
font-size: 1.5rem;
margin-bottom: 0.25rem;
}
.option-content span {
font-weight: 600;
font-size: 0.875rem;
}
/* ===== ENHANCED URGENCY SELECTOR ===== */
.urgency-selector {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 0.5rem;
}
.urgency-option {
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.urgency-option input[type="radio"] {
display: none;
}
.urgency-option input[type="radio"]:checked + .option-content {
border-color: var(--primary);
background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15);
transform: translateY(-2px);
}
.urgency-option input[type="radio"]:checked + .option-content::after {
content: '✓';
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 20px;
height: 20px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: bold;
}
.urgency-option .option-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 1.5rem 1rem;
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
border: 2px solid var(--border);
border-radius: 16px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.urgency-option .option-content::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
transition: left 0.6s ease;
}
.urgency-option:hover .option-content::before {
left: 100%;
}
.urgency-option:hover .option-content {
transform: translateY(-2px);
border-color: #cbd5e1;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.urgency-option input:checked + .option-content {
border-color: var(--primary);
background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%);
box-shadow: 0 8px 25px rgba(37, 99, 235, 0.15);
transform: translateY(-2px);
}
/* Urgency Dot with Animation */
.urgency-dot {
width: 16px;
height: 16px;
border-radius: 50%;
position: relative;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.urgency-dot::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
opacity: 0.8;
}
.urgency-dot.low {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}
.urgency-dot.medium {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}
.urgency-dot.high {
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
animation: pulse-high 2s infinite;
}
@keyframes pulse-high {
0%, 100% {
box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
}
70% {
box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
}
}
.urgency-option input:checked + .option-content .urgency-dot {
transform: scale(1.2);
}
.urgency-option input:checked + .option-content .urgency-dot.low {
animation: pulse-low 3s infinite;
}
.urgency-option input:checked + .option-content .urgency-dot.medium {
animation: pulse-medium 2.5s infinite;
}
@keyframes pulse-low {
0%, 100% {
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}
50% {
box-shadow: 0 2px 16px rgba(16, 185, 129, 0.6);
}
}
@keyframes pulse-medium {
0%, 100% {
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
50% {
box-shadow: 0 2px 16px rgba(245, 158, 11, 0.6);
}
}
/* Urgency Label Styling */
.urgency-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
text-align: center;
}
.urgency-label span:first-child {
font-weight: 700;
font-size: 1rem;
color: var(--text);
transition: color 0.3s ease;
}
.urgency-label small {
font-size: 0.75rem;
color: var(--text-muted);
transition: color 0.3s ease;
}
.urgency-option input:checked + .option-content .urgency-label span:first-child {
color: var(--primary);
}
.urgency-option input:checked + .option-content .urgency-label small {
color: var(--text-muted);
font-weight: 500;
}
/* Selected State Icon */
.urgency-option input:checked + .option-content::after {
content: '✓';
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 20px;
height: 20px;
background: var(--primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: bold;
animation: checkmark 0.3s ease;
}
@keyframes checkmark {
0% {
transform: scale(0) rotate(-180deg);
opacity: 0;
}
100% {
transform: scale(1) rotate(0);
opacity: 1;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.urgency-selector {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.urgency-option .option-content {
flex-direction: row;
padding: 1.25rem;
gap: 1rem;
text-align: left;
}
.urgency-label {
align-items: flex-start;
flex: 1;
}
.urgency-label span:first-child {
font-size: 1.125rem;
}
.urgency-label small {
font-size: 0.875rem;
}
}
@media (max-width: 480px) {
.urgency-selector {
gap: 0.5rem;
}
.urgency-option .option-content {
padding: 1rem;
}
.urgency-dot {
width: 14px;
height: 14px;
}
.urgency-dot::after {
width: 6px;
height: 6px;
}
}
/* File Upload */
.file-upload-label {
display: block;
padding: 2rem;
border: 2px dashed var(--border);
border-radius: 8px;
text-align: center;
cursor: pointer;
transition: var(--transition);
background: var(--surface-alt);
}
.file-upload-label:hover {
border-color: var(--primary);
background: var(--surface-alt);
}
.file-upload-label input {
display: none;
}
.file-upload-text {
display: block;
font-weight: 600;
color: var(--text);
margin-bottom: 0.5rem;
}
.file-types {
font-size: 0.875rem;
color: var(--text-muted);
}
.file-preview {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin-top: 1rem;
}
.file-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 0.875rem;
}
.file-item i {
color: var(--primary);
}
.file-remove {
background: none;
border: none;
color: #ef4444;
cursor: pointer;
padding: 0.25rem;
margin-left: auto;
border-radius: 4px;
transition: var(--transition);
}
.file-remove:hover {
background: #fee2e2;
}
/* Form Footer */
.form-footer {
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
.form-note {
font-size: 0.875rem;
color: var(--text-muted);
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.form-note i {
color: var(--success);
}
/* FAQ Section */
.faq-section {
padding: 80px 0;
background: var(--surface);
}
.faq-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 3rem;
margin-top: 3rem;
}
.faq-category h3 {
margin-bottom: 1.5rem;
color: var(--text);
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.faq-category h3 i {
color: var(--primary);
}
.faq-item {
margin-bottom: 1rem;
border: 1px solid var(--border);
border-radius: 8px;
overflow: hidden;
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
background: var(--surface-alt);
cursor: pointer;
transition: var(--transition);
}
.faq-question:hover {
background: var(--surface-alt);
}
.faq-question span {
font-weight: 600;
color: var(--text);
font-size: 1rem;
}
.faq-question i {
color: var(--primary);
transition: var(--transition);
}
.faq-answer {
display: none;
padding: 1.5rem;
background: var(--surface);
border-top: 1px solid var(--border);
}
.faq-answer p {
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.faq-cta {
text-align: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.faq-cta p {
margin-bottom: 1rem;
color: var(--text-muted);
font-size: 1.125rem;
}
/* Live Chat Widget */
.live-chat-widget {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 350px;
background: var(--surface);
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
border: 1px solid var(--border);
z-index: 1000;
transform: translateY(100px);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.live-chat-widget.active {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.chat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem;
background: var(--primary);
color: var(--white);
border-radius: 12px 12px 0 0;
}
.chat-agent {
display: flex;
align-items: center;
gap: 0.75rem;
}
.agent-avatar {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.agent-info strong {
display: block;
font-size: 0.875rem;
}
.agent-info .status {
font-size: 0.75rem;
opacity: 0.9;
}
.chat-close {
background: none;
border: none;
color: var(--white);
cursor: pointer;
padding: 0.25rem;
border-radius: 4px;
transition: var(--transition);
}
.chat-close:hover {
background: rgba(255, 255, 255, 0.1);
}
.chat-messages {
height: 300px;
padding: 1.25rem;
overflow-y: auto;
background: var(--surface-alt);
}
.message {
margin-bottom: 1rem;
}
.message-content {
padding: 0.75rem 1rem;
border-radius: 12px;
max-width: 80%;
}
.agent-message .message-content {
background: var(--surface);
border: 1px solid var(--border);
}
.message-time {
display: block;
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.25rem;
}
.chat-input {
display: flex;
gap: 0.5rem;
padding: 1rem;
border-top: 1px solid var(--border);
background: var(--surface);
}
.chat-input input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 20px;
font-size: 0.875rem;
}
.send-btn {
width: 40px;
height: 40px;
background: var(--primary);
color: var(--white);
border: none;
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.send-btn:hover {
background: var(--primary-dark);
transform: scale(1.05);
}
/* Responsive Design */
@media (max-width: 1024px) {
.contact-grid-enhanced {
grid-template-columns: 1fr;
gap: 3rem;
}
.contact-form-enhanced {
position: static;
}
.form-row {
grid-template-columns: 1fr;
}
.audience-selector {
grid-template-columns: repeat(3, 1fr);
}
.urgency-selector {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
@media (max-width: 768px) {
.support-cards {
grid-template-columns: 1fr;
}
.support-card.featured {
transform: none;
}
.support-card.featured:hover {
transform: translateY(-5px);
}
.contact-method-card {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.method-icon {
align-self: center;
}
.social-links {
grid-template-columns: 1fr 1fr;
}
.faq-grid {
grid-template-columns: 1fr;
}
.live-chat-widget {
width: calc(100vw - 2rem);
right: 1rem;
bottom: 1rem;
}
}
@media (max-width: 480px) {
.contact-form-enhanced {
padding: 2rem 1.5rem;
}
.contact-method-card {
padding: 1.5rem;
}
.file-upload-label {
padding: 1.25rem 1rem;
}
.file-upload-text {
font-size: 0.9rem;
}
.file-types {
font-size: 0.8rem;
}
.urgency-selector {
grid-template-columns: 1fr;
}
.audience-selector {
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem;
}
.audience-selector .option-content {
padding: 0.85rem 0.4rem;
gap: 0.35rem;
}
.audience-selector .option-content i {
font-size: 1.1rem;
margin-bottom: 0;
}
.audience-selector .option-content span {
font-size: 0.75rem;
}
.faq-question {
padding: 1.25rem;
}
.faq-answer {
padding: 1.25rem;
}
}
/* ===== ENHANCED WORKER PAGES STYLES ===== */
/* Job Search Section */
.job-search-section {
padding: 80px 0;
background: var(--surface-alt);
}
.search-container {
background: var(--surface);
border-radius: 16px;
box-shadow: var(--shadow);
overflow: hidden;
}
.search-header {
padding: 2rem;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
text-align: center;
}
.search-header h2 {
margin-bottom: 0.5rem;
font-size: 1.5rem;
}
.filter-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
padding: 2rem;
border-bottom: 1px solid var(--border);
}
.filter-group {
display: flex;
flex-direction: column;
}
.filter-group label {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text);
display: flex;
align-items: center;
gap: 0.5rem;
}
.search-input, .filter-select {
padding: 0.75rem 1rem;
border: 2px solid var(--border);
border-radius: 8px;
font-size: 1rem;
transition: var(--transition);
background: var(--input-bg);
color: var(--text);
}
.search-input:focus, .filter-select:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.advanced-filters {
padding: 1.5rem 2rem;
border-bottom: 1px solid var(--border);
}
.filter-row {
margin-bottom: 1.5rem;
}
.filter-row:last-child {
margin-bottom: 0;
}
.filter-chips {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.chip {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--surface-alt);
border: 2px solid var(--border);
border-radius: 20px;
cursor: pointer;
transition: var(--transition);
font-size: 0.875rem;
}
.chip:hover {
border-color: var(--primary);
}
.chip input[type="checkbox"]:checked + .chip-label {
background: var(--primary);
color: var(--white);
}
.search-actions {
padding: 1.5rem 2rem;
display: flex;
gap: 1rem;
justify-content: center;
}
.btn-large {
padding: 1rem 2rem;
font-size: 1.125rem;
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: var(--white);
}
/* Categories Section */
.categories-section {
padding: 80px 0;
overflow: hidden;
}
.categories-marquee {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.categories-track {
display: flex;
gap: 2rem;
width: max-content;
animation: categoriesScroll 40s linear infinite;
}
.categories-marquee:hover .categories-track {
animation-play-state: paused;
}
@keyframes categoriesScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.categories-track {
animation: none;
}
.categories-marquee {
overflow-x: auto;
}
}
.category-card {
background: var(--surface);
padding: 2rem;
border-radius: 12px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
border: 1px solid var(--border);
width: 280px;
flex-shrink: 0;
}
.category-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.category-icon {
width: 80px;
height: 80px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 2rem;
margin: 0 auto 1.5rem;
}
.category-card h3 {
margin-bottom: 0.5rem;
color: var(--text);
}
.job-count {
color: var(--primary);
font-weight: 600;
margin-bottom: 0.25rem;
}
.avg-pay {
color: var(--success);
font-weight: 600;
margin-bottom: 1rem;
}
.category-skills {
list-style: none;
margin-bottom: 1.5rem;
}
.category-skills li {
padding: 0.25rem 0;
color: var(--text-muted);
font-size: 0.875rem;
}
.category-link {
color: var(--primary);
text-decoration: none;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* ===== JOB SHOP: sidebar filters + job grid ===== */
.job-shop-section {
padding: 60px 0 80px;
background: var(--surface-alt);
scroll-margin-top: 90px;
}
.job-shop-layout {
display: grid;
grid-template-columns: 280px 1fr;
gap: 2rem;
align-items: start;
}
.job-filters-sidebar {
background: var(--surface);
border-radius: 12px;
box-shadow: var(--shadow);
padding: 1.5rem;
position: sticky;
top: 100px;
}
.filters-sidebar-header {
display: none;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.filters-sidebar-header h2 {
font-size: 1.1rem;
color: var(--text);
margin: 0;
}
.filters-close-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--text);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.filter-block {
margin-bottom: 1.25rem;
}
.filter-block label {
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--text);
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.filter-block .search-input,
.filter-block .filter-select {
width: 100%;
}
.filter-block .filter-chips {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.filter-block .chip {
width: 100%;
}
.filter-sidebar-actions {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 1.5rem;
}
.job-shop-main {
min-width: 0;
}
.listings-header-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.listings-header-top h2 {
font-size: 1.4rem;
color: var(--text);
margin: 0;
}
.filters-toggle-btn {
display: none;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-weight: 600;
cursor: pointer;
}
.filters-overlay {
display: none;
}
@media (max-width: 992px) {
.job-shop-layout {
grid-template-columns: 1fr;
}
.filters-sidebar-header {
display: flex;
}
.filters-toggle-btn {
display: flex;
}
.job-filters-sidebar {
position: fixed;
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
width: min(320px, 85vw);
z-index: 1001;
border-radius: 0;
overflow-y: auto;
transform: translateX(100%);
transition: transform 0.3s ease;
}
.job-filters-sidebar.filters-open {
transform: translateX(0);
}
.filters-overlay {
display: block;
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease;
z-index: 1000;
}
.filters-overlay.filters-overlay-visible {
opacity: 1;
visibility: visible;
}
}
/* Job Listings */
.job-listings-section {
padding: 80px 0;
background: var(--surface-alt);
}
.listings-header {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.listings-controls {
display: flex;
gap: 1.5rem;
align-items: center;
}
.sort-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.sort-select {
padding: 0.5rem 1rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
}
.job-listings-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
@media (max-width: 1200px) {
.job-listings-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 992px) {
.job-listings-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.job-listings-grid {
grid-template-columns: 1fr;
}
}
.job-listings-grid .job-header {
flex-direction: column;
align-items: stretch;
padding-right: 0;
min-height: 0;
gap: 0.75rem;
}
.job-listings-grid .job-salary {
text-align: left;
margin-left: 0;
padding-left: 0;
display: flex;
align-items: center;
gap: 0.75rem;
}
.job-listings-grid .job-card {
display: flex;
flex-direction: column;
height: 100%;
padding: 1.5rem;
}
.job-listings-grid .job-description {
flex: 1;
}
.job-listings-grid .job-badge {
top: 1rem;
right: 1rem;
bottom: auto;
left: auto;
}
.job-card {
background: var(--surface);
border-radius: 12px;
box-shadow: var(--shadow);
padding: 2rem;
position: relative;
border: 1px solid var(--border);
transition: var(--transition);
min-width: 0;
}
.job-card:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.job-card.featured {
border-left: 4px solid var(--secondary);
}
.job-card.urgent {
border-left: 4px solid #ef4444;
}
.job-badge {
position: absolute;
bottom: 10px;
right: 10px;
padding: 0.3rem 0.85rem;
background: var(--secondary);
color: var(--text);
border-radius: 20px;
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 2;
white-space: nowrap;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.urgent-badge {
background: #ef4444;
color: var(--white);
}
.job-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1.5rem;
position: relative;
padding-right: 120px;
min-height: 80px;
}
.company-info {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.company-logo {
width: 60px;
height: 60px;
flex-shrink: 0;
background: var(--primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 600;
font-size: 1.25rem;
}
.job-details {
flex: 1;
min-width: 0;
}
.job-title {
font-size: 1.25rem;
margin-bottom: 0.5rem;
color: var(--text);
overflow-wrap: break-word;
word-break: break-word;
}
.job-title a {
color: var(--text);
text-decoration: none;
transition: var(--transition);
}
.job-title a:hover {
color: var(--primary);
text-decoration: underline;
}
.company-name {
color: var(--primary);
font-weight: 600;
margin-bottom: 0.75rem;
}
.job-meta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
padding-top: 1rem;
margin-top: 0.5rem;
border-top: 1px solid var(--border);
}
.job-meta span {
display: flex;
align-items: center;
gap: 0.35rem;
color: var(--text-muted);
font-size: 0.8rem;
}
.job-meta i {
color: var(--primary);
}
.job-salary {
text-align: right;
position: relative;
z-index: 1;
margin-left: auto;
padding-left: 1rem;
}
.salary {
font-size: 1.5rem;
font-weight: 700;
color: var(--success);
display: block;
line-height: 1.2;
}
.benefits {
font-size: 0.875rem;
color: var(--text-muted);
display: block;
margin-top: 0.25rem;
}
.job-description {
margin-bottom: 1.5rem;
line-height: 1.6;
color: var(--text);
}
.job-requirements h4 {
margin-bottom: 0.75rem;
color: var(--text);
}
.requirements-list {
display: flex;
gap: 0.5rem;
flex-wrap: nowrap;
overflow-x: auto;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
scrollbar-width: thin;
}
.requirements-list::-webkit-scrollbar {
height: 4px;
}
.requirement {
padding: 0.25rem 0.75rem;
background: var(--surface-alt);
border-radius: 15px;
font-size: 0.875rem;
color: var(--text);
white-space: nowrap;
flex-shrink: 0;
}
.job-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-top: auto;
padding-top: 0.5rem;
}
.job-actions .btn {
flex: 1 1 auto;
justify-content: center;
white-space: nowrap;
}
.job-actions .btn-secondary {
background: var(--surface-alt);
color: var(--text);
border: 2px solid var(--border);
}
.job-actions .btn-secondary:hover {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
transform: translateY(-2px);
}
.btn-apply, .btn-save, .btn-share {
display: flex;
align-items: center;
gap: 0.5rem;
}
.btn-save.is-saved {
background: var(--secondary);
color: var(--white);
border-color: var(--secondary);
}
.btn-tertiary {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
padding: 0.75rem;
}
.load-more-section {
text-align: center;
margin-top: 3rem;
}
.showing-text {
margin-top: 1rem;
color: var(--text-muted);
}
/* Job Alerts */
.job-alerts-section {
padding: 80px 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
}
.alerts-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.alerts-text h2 {
margin-bottom: 1rem;
font-size: 2rem;
}
.alerts-form .form-group {
display: flex;
gap: 0.5rem;
}
.email-input {
flex: 1;
padding: 1rem;
border: none;
border-radius: 8px;
font-size: 1rem;
}
.form-note {
margin-top: 0.5rem;
font-size: 0.875rem;
opacity: 0.8;
}
/* Profile Builder Styles */
.profile-builder-section {
padding: 80px 0;
}
.builder-header {
text-align: center;
margin-bottom: 3rem;
}
.profile-form-container {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3rem;
max-width: 100%;
}
.profile-form {
background: var(--surface);
padding: 2rem;
border-radius: 12px;
box-shadow: var(--shadow);
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.profile-preview {
min-width: 0;
max-width: 100%;
}
.form-section {
display: none;
}
.form-section.active {
display: block;
}
.section-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border);
}
.section-header h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text);
}
.skills-input-container {
border: 2px solid var(--border);
border-radius: 8px;
padding: 1rem;
}
.skills-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.skill-tag {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--primary);
color: var(--white);
border-radius: 20px;
font-size: 0.875rem;
}
.skills-input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border);
border-radius: 6px;
margin-bottom: 0.5rem;
}
.skills-suggestions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.suggestion {
padding: 0.25rem 0.75rem;
background: var(--surface-alt);
border-radius: 15px;
font-size: 0.875rem;
color: var(--text-muted);
cursor: pointer;
}
.certifications-list {
margin-bottom: 1rem;
}
.certification-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--surface-alt);
border-radius: 8px;
margin-bottom: 0.5rem;
}
.cert-info h4 {
margin-bottom: 0.25rem;
color: var(--text);
}
.cert-info p {
font-size: 0.875rem;
color: var(--text-muted);
}
.cert-actions {
display: flex;
gap: 0.5rem;
}
.btn-edit, .btn-remove {
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.btn-edit {
background: #dbeafe;
color: var(--primary);
}
.btn-remove {
background: #fee2e2;
color: #ef4444;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 0.5rem;
}
.tool-checkbox {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
background: var(--surface-alt);
border-radius: 6px;
cursor: pointer;
}
.form-actions {
display: flex;
justify-content: space-between;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border);
}
/* ===== ENHANCED PROFILE BUILDER STYLES ===== */
/* Stats Banner */
.stats-banner {
background: var(--surface);
padding: 3rem 0;
border-bottom: 1px solid var(--border);
}
.stats-banner-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.stat-item {
display: flex;
align-items: center;
gap: 1rem;
}
.stat-item i {
font-size: 2.5rem;
color: var(--primary);
background: #dbeafe;
padding: 1rem;
border-radius: 12px;
}
.stat-item h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.25rem;
}
.stat-item p {
color: var(--text-muted);
font-size: 0.875rem;
}
/* Benefits Section Enhancements */
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.benefit-card {
background: var(--surface);
padding: 2rem;
border-radius: 12px;
box-shadow: var(--shadow);
text-align: center;
transition: var(--transition);
border: 1px solid #f1f5f9;
}
.benefit-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.benefit-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 2rem;
margin: 0 auto 1.5rem;
}
.benefit-card h3 {
margin-bottom: 1rem;
color: var(--text);
}
.benefit-card p {
color: var(--text-muted);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.benefit-metric {
background: var(--surface-alt);
padding: 1rem;
border-radius: 8px;
border-left: 4px solid var(--primary);
}
.metric-value {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.25rem;
}
.metric-label {
font-size: 0.875rem;
color: var(--text-muted);
}
/* Success Stories */
.success-stories {
padding: 80px 0;
background: var(--surface-alt);
}
.stories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 2rem;
}
.story-card {
background: var(--surface);
padding: 2rem;
border-radius: 12px;
box-shadow: var(--shadow);
display: flex;
gap: 1.5rem;
}
.story-content {
flex: 1;
}
.story-avatar {
width: 60px;
height: 60px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 600;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.story-text p {
font-style: italic;
color: var(--text);
line-height: 1.6;
margin-bottom: 1rem;
}
.story-author strong {
display: block;
color: var(--text);
margin-bottom: 0.25rem;
}
.story-author span {
color: var(--text-muted);
font-size: 0.875rem;
}
.story-stats {
display: flex;
flex-direction: column;
gap: 1rem;
}
.story-stat {
text-align: center;
padding: 1rem;
background: var(--surface-alt);
border-radius: 8px;
}
.stat-number {
display: block;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.875rem;
color: var(--text-muted);
}
/* Enhanced Progress Tracker */
.progress-tracker {
background: var(--surface);
padding: 2.5rem;
border-radius: 16px;
box-shadow: var(--shadow);
margin-bottom: 3rem;
border: 1px solid var(--border);
}
.tracker-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 2rem;
}
.tracker-step {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border-radius: 12px;
background: var(--surface-alt);
transition: var(--transition);
position: relative;
}
.tracker-step.completed {
background: rgba(16, 185, 129, 0.1);
border: 1px solid var(--success);
}
.tracker-step.active {
background: var(--primary);
color: var(--white);
border: 1px solid var(--primary);
}
.tracker-step.completed .step-number {
background: var(--success);
color: var(--white);
}
.tracker-step.active .step-number {
background: var(--surface);
color: var(--primary);
}
.step-number {
width: 40px;
height: 40px;
background: var(--border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1rem;
flex-shrink: 0;
}
.step-info {
flex: 1;
min-width: 0;
}
.step-title {
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
}
.step-status {
font-size: 0.75rem;
opacity: 0.8;
}
.progress-bar {
height: 8px;
background: var(--surface-alt);
border-radius: 4px;
margin-bottom: 1rem;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--primary-dark));
border-radius: 4px;
transition: width 0.3s ease;
position: relative;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
animation: shimmer 2s infinite;
}
@keyframes shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.progress-text {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
}
.progress-text strong {
color: var(--primary);
font-size: 1rem;
}
.completion-reward {
color: var(--success);
font-weight: 500;
}
/* Enhanced Form Styles */
.section-header {
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border);
}
.section-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--primary);
color: var(--white);
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1rem;
}
.section-header h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text);
font-size: 1.5rem;
}
.section-header p {
color: var(--text-muted);
line-height: 1.6;
}
.form-label {
display: block;
margin-bottom: 0.75rem;
font-weight: 600;
color: var(--text);
}
.label-tip {
display: block;
font-weight: 400;
color: var(--text-muted);
font-size: 0.875rem;
margin-top: 0.25rem;
}
/* Enhanced Skills Input */
.skills-input-container {
border: 2px solid var(--border);
border-radius: 12px;
padding: 1.5rem;
background: var(--surface);
}
.skills-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.skill-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--primary);
color: var(--white);
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}
.tag-remove {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 0;
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: var(--transition);
}
.tag-remove:hover {
background: rgba(255,255,255,0.2);
}
.skills-input-wrapper {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.skills-input {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 1rem;
}
.skills-add-btn {
padding: 0.75rem 1.5rem;
background: var(--primary);
color: var(--white);
border: none;
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
}
.skills-add-btn:hover {
background: var(--primary-dark);
}
.skills-suggestions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.suggestion-tag {
padding: 0.5rem 1rem;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: 20px;
font-size: 0.875rem;
color: var(--text-muted);
cursor: pointer;
transition: var(--transition);
}
.suggestion-tag:hover {
background: var(--primary);
color: var(--white);
border-color: var(--primary);
}
/* Experience Levels */
.experience-levels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
}
.experience-option {
border: 2px solid var(--border);
border-radius: 12px;
padding: 1.5rem 1rem;
cursor: pointer;
transition: var(--transition);
text-align: center;
}
.experience-option.selected {
border-color: var(--primary);
background: #dbeafe;
}
.experience-option input {
display: none;
}
.option-title {
display: block;
font-weight: 600;
color: var(--text);
margin-bottom: 0.25rem;
}
.option-desc {
font-size: 0.875rem;
color: var(--text-muted);
}
/* Enhanced Certifications */
.certification-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: var(--surface-alt);
border-radius: 12px;
margin-bottom: 1rem;
border: 1px solid var(--border);
}
.certification-item.verified {
border-color: var(--success);
background: #f0fdf4;
}
.cert-icon {
width: 50px;
height: 50px;
background: var(--primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.25rem;
flex-shrink: 0;
}
.cert-info {
flex: 1;
}
.cert-info h4 {
margin-bottom: 0.25rem;
color: var(--text);
}
.cert-info p {
font-size: 0.875rem;
color: var(--text-muted);
margin-bottom: 0.5rem;
}
.cert-status {
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 600;
}
.cert-status.verified {
background: #dcfce7;
color: #166534;
}
.cert-status.pending {
background: #fef3c7;
color: #92400e;
}
.cert-actions {
display: flex;
gap: 0.5rem;
}
/* Enhanced Tools Grid */
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
}
.tool-checkbox {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--surface-alt);
border: 2px solid var(--border);
border-radius: 8px;
cursor: pointer;
transition: var(--transition);
}
.tool-checkbox:hover {
border-color: var(--primary);
}
.tool-checkbox input:checked + .checkmark + .tool-label {
color: var(--primary);
font-weight: 600;
}
.tool-checkbox input:checked ~ .tool-label {
color: var(--primary);
}
.checkmark {
width: 20px;
height: 20px;
border: 2px solid var(--border);
border-radius: 4px;
position: relative;
}
.tool-checkbox input:checked + .checkmark {
background: var(--primary);
border-color: var(--primary);
}
.tool-checkbox input:checked + .checkmark::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--white);
font-size: 0.75rem;
font-weight: bold;
}
.tool-label {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text);
}
/* Specializations */
.specializations {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.specialization-chip {
padding: 0.75rem 1.5rem;
background: var(--surface-alt);
border: 2px solid var(--border);
border-radius: 25px;
cursor: pointer;
transition: var(--transition);
font-size: 0.875rem;
}
.specialization-chip:hover {
border-color: var(--primary);
}
.specialization-chip input:checked + span {
color: var(--primary);
font-weight: 600;
}
.specialization-chip input {
display: none;
}
/* Enhanced Form Actions */
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--border);
}
.action-group {
display: flex;
gap: 1rem;
}
/* Enhanced Profile Preview */
.preview-card {
background: var(--surface);
border-radius: 16px;
box-shadow: var(--shadow);
padding: 2rem;
border: 1px solid #f1f5f9;
margin-bottom: 2rem;
}
.preview-header {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.preview-avatar {
position: relative;
flex-shrink: 0;
}
.preview-basic {
flex: 1;
min-width: 0;
}
.preview-basic h3 {
margin-bottom: 0.5rem;
color: var(--text);
overflow-wrap: break-word;
}
.preview-title {
color: var(--primary);
font-weight: 600;
margin-bottom: 0.75rem;
}
.preview-meta {
display: flex;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.875rem;
color: var(--text-muted);
}
.avatar-image {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--primary);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-weight: 600;
font-size: 1.5rem;
position: relative;
}
.online-status {
position: absolute;
bottom: 5px;
right: 5px;
width: 16px;
height: 16px;
background: var(--success);
border: 2px solid var(--white);
border-radius: 50%;
}
.preview-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1.5rem;
background: var(--surface-alt);
border-radius: 12px;
}
.preview-stat {
text-align: center;
}
.stat-value {
display: block;
font-size: 1.25rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.25rem;
}
.stat-label {
font-size: 0.75rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.preview-skills, .preview-certifications, .preview-availability {
margin-bottom: 1.5rem;
}
.preview-skills h4, .preview-certifications h4, .preview-availability h4 {
margin-bottom: 0.75rem;
color: var(--text);
font-size: 1rem;
}
.skills-preview {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.skill-preview {
padding: 0.5rem 1rem;
background: var(--surface-alt);
color: var(--primary);
border-radius: 15px;
font-size: 0.875rem;
font-weight: 500;
}
.skill-preview-more {
padding: 0.5rem 1rem;
background: var(--surface-alt);
color: var(--text-muted);
border-radius: 15px;
font-size: 0.875rem;
}
.certs-preview {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.cert-preview {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
background: var(--surface-alt);
border-radius: 8px;
font-size: 0.875rem;
}
.cert-preview.verified {
background: rgba(16, 185, 129, 0.12);
color: var(--success);
}
.cert-preview.pending {
background: rgba(245, 158, 11, 0.12);
color: var(--secondary);
}
.availability-status {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: rgba(16, 185, 129, 0.12);
color: var(--success);
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
}
.availability-status.available i {
color: var(--success);
}
.preview-completion {
background: var(--surface-alt);
padding: 1.5rem;
border-radius: 12px;
margin-bottom: 1.5rem;
}
.completion-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.completion-percent {
font-weight: 700;
color: var(--primary);
font-size: 1.125rem;
}
.completion-bar {
height: 8px;
background: var(--border);
border-radius: 4px;
margin-bottom: 1rem;
overflow: hidden;
}
.completion-fill {
height: 100%;
background: linear-gradient(90deg, var(--primary), var(--primary-dark));
border-radius: 4px;
transition: width 0.3s ease;
}
.completion-tips p {
font-size: 0.875rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.5rem;
}
.preview-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.preview-actions .btn {
flex: 1 1 auto;
justify-content: center;
white-space: nowrap;
}
/* Preview Tips */
.preview-tips {
background: var(--surface);
border-radius: 12px;
box-shadow: var(--shadow);
padding: 1.5rem;
border: 1px solid var(--border);
}
.preview-tips h4 {
margin-bottom: 1rem;
color: var(--text);
}
.tip-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--border);
}
.tip-item:last-child {
border-bottom: none;
}
.tip-item i {
color: var(--success);
font-size: 0.875rem;
}
.tip-item span {
font-size: 0.875rem;
color: var(--text-muted);
}
/* Enhanced Verification Section */
.verification-section {
padding: 80px 0;
background: linear-gradient(135deg, #1e3a8a 0%, #3730a3 100%);
color: var(--white);
}
.verification-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 4rem;
align-items: center;
}
.verification-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.5rem;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 25px;
font-size: 0.875rem;
font-weight: 600;
margin-bottom: 1.5rem;
}
.verification-text h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.verification-text p {
font-size: 1.125rem;
opacity: 0.9;
margin-bottom: 2rem;
line-height: 1.6;
}
.verification-benefits {
list-style: none;
margin-bottom: 2.5rem;
}
.verification-benefits li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(255,255,255,0.1);
}
.verification-benefits li:last-child {
border-bottom: none;
}
.verification-benefits li i {
color: var(--secondary);
font-size: 1.25rem;
margin-top: 0.25rem;
}
.verification-benefits strong {
display: block;
margin-bottom: 0.25rem;
font-size: 1.125rem;
}
.verification-benefits span {
opacity: 0.8;
font-size: 0.875rem;
}
.verification-cta {
text-align: center;
}
.cta-note {
margin-top: 1rem;
font-size: 0.875rem;
opacity: 0.8;
}
.verification-badges {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.badge-card {
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: 16px;
padding: 2rem;
text-align: center;
backdrop-filter: blur(10px);
transition: var(--transition);
}
.badge-card.verified {
background: rgba(34, 197, 94, 0.2);
border-color: rgba(34, 197, 94, 0.4);
}
.badge-card:hover {
transform: translateY(-5px);
background: rgba(255,255,255,0.15);
}
.badge-icon {
width: 80px;
height: 80px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 2rem;
margin: 0 auto 1rem;
}
.badge-title {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
font-size: 1.125rem;
}
.badge-desc {
font-size: 0.875rem;
opacity: 0.8;
}
/* Profile CTA Section */
.profile-cta {
padding: 80px 0;
background: var(--surface-alt);
text-align: center;
}
.cta-content h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
color: var(--text);
}
.cta-content p {
font-size: 1.125rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.cta-features {
display: flex;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
}
.feature {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--text-muted);
font-weight: 500;
}
.feature i {
color: var(--primary);
font-size: 1.25rem;
}
/* Footer Social */
.footer-social {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.footer-social a {
width: 40px;
height: 40px;
background: #374151;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
text-decoration: none;
transition: var(--transition);
}
.footer-social a:hover {
background: var(--primary);
transform: translateY(-2px);
}
/* Responsive Design */
@media (max-width: 1024px) {
.profile-form-container {
grid-template-columns: 1fr;
gap: 2rem;
}
.verification-content {
grid-template-columns: 1fr;
text-align: center;
}
.tracker-steps {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.stories-grid {
grid-template-columns: 1fr;
}
.story-card {
flex-direction: column;
}
.story-stats {
flex-direction: row;
justify-content: space-around;
}
.tools-grid {
grid-template-columns: 1fr;
}
.experience-levels {
grid-template-columns: 1fr;
}
.form-actions {
flex-direction: column;
gap: 1rem;
}
.action-group {
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.75rem;
}
.action-group .btn {
flex: 1 1 auto;
justify-content: center;
white-space: nowrap;
}
.form-actions .btn {
width: 100%;
justify-content: center;
}
.preview-stats {
grid-template-columns: repeat(2, 1fr);
}
.cta-features {
flex-direction: column;
gap: 1rem;
}
}
/* Training Programs Styles */
.training-benefits {
padding: 80px 0;
}
.earnings-comparison {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 800px;
margin: 0 auto;
}
.earnings-card {
background: var(--surface);
border-radius: 12px;
box-shadow: var(--shadow);
overflow: hidden;
}
.earnings-card.certified {
position: relative;
border: 2px solid var(--success);
}
.earnings-header {
padding: 1.5rem;
text-align: center;
color: var(--white);
}
.earnings-header.uncertified {
background: var(--gray);
}
.earnings-header.certified {
background: var(--success);
}
.hourly-rate {
font-size: 1.5rem;
font-weight: 700;
margin-top: 0.5rem;
}
.earnings-features {
padding: 1.5rem;
list-style: none;
}
.earnings-features li {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
}
.earnings-features li.negative {
color: #ef4444;
}
.earnings-features li.positive {
color: var(--success);
}
.increase-badge {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
background: var(--success);
color: var(--white);
border-radius: 20px;
font-size: 0.875rem;
font-weight: 600;
}
/* Add more training-specific styles as needed */
/* Responsive Design */
@media (max-width: 768px) {
.filter-grid {
grid-template-columns: 1fr;
}
.job-header {
flex-direction: column;
gap: 1rem;
}
.job-salary {
text-align: left;
}
.alerts-content {
grid-template-columns: 1fr;
text-align: center;
}
.alerts-form .form-group {
flex-direction: column;
}
.profile-form-container {
grid-template-columns: 1fr;
}
.tracker-steps {
grid-template-columns: 1fr;
}
.earnings-comparison {
grid-template-columns: 1fr;
}
}
/* ===== ERROR PAGES ===== */
.error-page {
max-width: 640px;
margin: 0 auto;
text-align: center;
padding: 4rem 1rem 6rem;
}
.error-page .error-code {
font-size: 6rem;
font-weight: 800;
line-height: 1;
background: linear-gradient(135deg, var(--primary), var(--secondary));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.error-page h1 {
font-size: 1.75rem;
color: var(--text);
margin: 1rem 0;
}
.error-page p {
color: var(--text-muted);
margin-bottom: 2rem;
font-size: 1.05rem;
}
.error-page .error-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.error-page .error-actions .btn-secondary {
background: var(--surface-alt);
color: var(--text);
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
border: 1px solid var(--border);
transition: var(--transition);
}
.error-page .error-actions .btn-secondary:hover {
border-color: var(--primary);
color: var(--primary);
}
/* ===== LEGAL PAGES ===== */
.legal-page {
max-width: 820px;
margin: 0 auto;
padding-bottom: 60px;
}
.legal-page h1 {
font-size: 2.25rem;
color: var(--text);
margin-bottom: 0.5rem;
}
.legal-page .legal-updated {
color: var(--text-muted);
margin-bottom: 2rem;
}
.legal-page h2 {
font-size: 1.25rem;
color: var(--text);
margin: 2rem 0 0.75rem;
}
.legal-page p {
color: var(--text-muted);
line-height: 1.8;
margin-bottom: 0.5rem;
}
.legal-page a {
color: var(--primary);
}
/* ===== FOOTER ===== */
.footer {
background: var(--dark);
color: var(--white);
padding: 60px 0 30px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 3rem;
margin-bottom: 3rem;
}
.footer-column h4 {
font-size: 1.25rem;
margin-bottom: 1.5rem;
color: var(--white);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: #d1d5db;
text-decoration: none;
transition: var(--transition);
}
.footer-links a:hover {
color: var(--white);
}
.footer-bottom {
text-align: center;
padding-top: 2rem;
border-top: 1px solid #374151;
color: #9ca3af;
}
@media (max-width: 640px) {
.footer {
padding: 40px 0 20px;
}
.footer-grid {
gap: 0;
margin-bottom: 1.5rem;
}
.footer-column-collapsible {
border-bottom: 1px solid #374151;
}
.footer-column-toggle {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 1rem 0;
margin-bottom: 0;
}
.footer-toggle-icon {
font-size: 0.85rem;
transition: transform 0.25s ease;
}
.footer-column-open .footer-toggle-icon {
transform: rotate(180deg);
}
.footer-column-collapsible .footer-links {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.footer-column-open .footer-links {
max-height: 300px;
padding-bottom: 1rem;
}
}
/* ===== UTILITY CLASSES ===== */
.text-center { text-align: center; }
.mb-1 { margin-bottom: 1rem; }
.mb-2 { margin-bottom: 2rem; }
.mt-2 { margin-top: 2rem; }
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
.features-grid {
grid-template-columns: 1fr;
}
.contact-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
}