diff --git a/css/style.css b/css/style.css index 569ead6..c93e8c3 100644 --- a/css/style.css +++ b/css/style.css @@ -6,45 +6,34 @@ } :root { - --miami-red: #C41E3A; - --miami-red-dark: #9E182E; - --miami-red-light: #E84C65; - --white: #FFFFFF; - --cream: #F8F5F0; - --light-gray: #EAE7E0; - --medium-gray: #8A8580; - --dark-gray: #3A3530; - --text: #2A2520; - --shadow: 0 2px 12px rgba(0, 0, 0, 0.08); - --shadow-hover: 0 6px 24px rgba(196, 30, 58, 0.12); - --radius: 12px; - --max-width: 1280px; -} - -*, *::before, *::after { - box-sizing: border-box; - margin: 0; - padding: 0; + --primary: #2563eb; + --primary-dark: #1d4ed8; + --secondary: #64748b; + --light: #f8fafc; + --dark: #1e293b; + --white: #ffffff; + --gray-50: #f1f5f9; + --gray-100: #e2e8f0; + --shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; - color: var(--text); - background-color: var(--cream); + color: var(--dark); + background-color: var(--white); line-height: 1.6; - min-height: 100vh; } .container { - max-width: var(--max-width); + max-width: 1200px; margin: 0 auto; - padding: 0 1.5rem; + padding: 0 20px; } /* ===== Header ===== */ .site-header { - background: linear-gradient(135deg, var(--miami-red) 0%, var(--miami-red-dark) 100%); - color: var(--white); + background-color: var(--white); + border-bottom: 1px solid var(--gray-100); position: sticky; top: 0; z-index: 100; @@ -54,69 +43,58 @@ body { display: flex; justify-content: space-between; align-items: center; - padding: 0.75rem 1.5rem; + padding: 1rem 20px; } .logo { font-size: 1.5rem; font-weight: 700; - color: var(--white); - letter-spacing: -0.02em; + color: var(--primary); } .nav a { margin-left: 2rem; - color: rgba(255,255,255,0.85); + color: var(--dark); text-decoration: none; font-weight: 500; - font-size: 0.9rem; transition: color 0.2s; - padding: 0.25rem 0; - border-bottom: 2px solid transparent; } .nav a:hover { - color: var(--white); - border-bottom-color: rgba(255,255,255,0.5); + color: var(--primary); } - + background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); + color: white; + text-align: center; + padding: 0.5rem; + font-size: 0.875rem; + font-weight: 500; + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 999; +} /* ===== Hero Section ===== */ .hero { - background: linear-gradient(135deg, var(--miami-red) 0%, var(--miami-red-dark) 100%); + background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%); color: var(--white); - padding: 5rem 0; + padding: 4rem 0; text-align: center; - position: relative; - overflow: hidden; -} - -.hero::before { - content: ''; - position: absolute; - top: -50%; - left: -50%; - width: 200%; - height: 200%; - background: radial-gradient(circle at 30% 50%, rgba(255,255,255,0.05) 0%, transparent 50%); - pointer-events: none; } .hero h2 { font-size: 2.5rem; - font-weight: 700; - letter-spacing: -0.02em; margin-bottom: 1rem; - position: relative; } .hero p { font-size: 1.125rem; opacity: 0.9; - max-width: 720px; + max-width: 600px; margin: 0 auto; - position: relative; } /* ===== Section ===== */ @@ -126,10 +104,9 @@ body { .section h3 { text-align: center; - font-size: 1.75rem; - font-weight: 700; + font-size: 1.875rem; margin-bottom: 3rem; - color: var(--dark-gray); + color: var(--dark); } /* ===== Values Grid ===== */ @@ -143,28 +120,22 @@ body { .value-item { text-align: center; padding: 2rem; - border-radius: var(--radius); - background: var(--white); - box-shadow: var(--shadow); + border-radius: 8px; + background: var(--gray-50); transition: transform 0.2s, box-shadow 0.2s; } .value-item:hover { - transform: translateY(-3px); - box-shadow: var(--shadow-hover); + transform: translateY(-4px); + box-shadow: var(--shadow); } .value-item h4 { - color: var(--miami-red); + color: var(--primary); margin-bottom: 1rem; - font-size: 1.1rem; } /* ===== How It Works ===== */ -.how-it-works { - background: var(--white); -} - .how-it-works .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); @@ -175,33 +146,32 @@ body { .step { text-align: center; padding: 2rem; - border-radius: var(--radius); - background: var(--cream); + border-radius: 8px; + background: var(--white); + border: 1px solid var(--gray-100); box-shadow: var(--shadow); } .step-number { width: 48px; height: 48px; - background: linear-gradient(135deg, var(--miami-red) 0%, var(--miami-red-dark) 100%); + background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; - font-size: 1.2rem; margin: 0 auto 1rem; } .step h4 { margin-bottom: 1rem; - color: var(--dark-gray); } /* ===== CTA Section ===== */ .cta { - background: var(--cream); + background: var(--gray-50); text-align: center; padding: 4rem 0; } @@ -209,7 +179,6 @@ body { .cta h2 { margin-bottom: 2rem; font-size: 2rem; - color: var(--dark-gray); } .cta-buttons { @@ -230,83 +199,49 @@ body { border: none; cursor: pointer; font-size: 1rem; - font-family: inherit; } .btn-primary { - background: var(--miami-red); + background: var(--primary); color: white; } .btn-primary:hover { - background: var(--miami-red-dark); + background: var(--primary-dark); transform: translateY(-2px); - box-shadow: var(--shadow-hover); } .btn-secondary { background: transparent; - color: var(--miami-red); - border: 2px solid var(--miami-red); + color: var(--primary); + border: 2px solid var(--primary); } .btn-secondary:hover { - background: var(--miami-red); + background: var(--primary); color: white; - transform: translateY(-2px); -} - -/* ===== Page Header ===== */ -.page-header { - text-align: center; - padding: 3rem 0; -} - -.page-header h2 { - font-size: 2rem; - color: var(--dark-gray); - margin-bottom: 0.5rem; -} - -.page-header p { - color: var(--medium-gray); - font-size: 1.1rem; } /* ===== Forms ===== */ .form-container { max-width: 800px; margin: 0 auto; - padding-bottom: 4rem; -} - -.file-input { - padding: 0.5rem !important; - background: var(--white) !important; -} - -.file-hint { - display: block; - font-size: 0.8rem; - color: var(--medium-gray); - margin-top: 0.25rem; } .form-intro { text-align: center; - margin-bottom: 2rem; + margin-bottom: 3rem; } .form-intro h3 { font-size: 1.5rem; - margin-bottom: 0.5rem; - color: var(--miami-red); + margin-bottom: 1rem; } .contact-form { background: var(--white); padding: 2rem; - border-radius: var(--radius); + border-radius: 8px; box-shadow: var(--shadow); } @@ -325,8 +260,7 @@ body { display: block; margin-bottom: 0.5rem; font-weight: 600; - color: var(--dark-gray); - font-size: 0.9rem; + color: var(--dark); } .form-group input, @@ -334,29 +268,26 @@ body { .form-group textarea { width: 100%; padding: 0.75rem; - border: 2px solid var(--light-gray); - border-radius: 8px; + border: 1px solid var(--gray-100); + border-radius: 6px; font-family: inherit; font-size: 1rem; - background: var(--cream); - transition: border-color 0.2s, background-color 0.2s; + transition: border-color 0.2s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; - border-color: var(--miami-red); - background-color: var(--white); + border-color: var(--primary); } /* ===== Footer ===== */ .site-footer { - background: var(--dark-gray); - color: rgba(255,255,255,0.7); + background: var(--dark); + color: var(--white); text-align: center; padding: 2rem 0; - font-size: 0.85rem; } /* ===== Responsive ===== */ @@ -365,20 +296,10 @@ body { font-size: 2rem; } - .hero { - padding: 3rem 0; - } - .nav { display: none; } - .site-header .container { - flex-direction: column; - gap: 0.5rem; - padding: 0.75rem 1rem; - } - .form-row { grid-template-columns: 1fr; } @@ -398,21 +319,26 @@ body { grid-template-columns: 1fr; } - .section { - padding: 3rem 0; + .site-header .container { + flex-direction: column; + gap: 1rem; } } @media (max-width: 480px) { .container { - padding: 0 1rem; + padding: 0 15px; } .section { padding: 2rem 0; } - .hero h2 { - font-size: 1.6rem; + .hero { + padding: 2rem 0; } -} + + .form-container { + padding: 0 10px; + } +} \ No newline at end of file diff --git a/favicon.png b/favicon.png index aa900c8..bb980d1 100644 Binary files a/favicon.png and b/favicon.png differ diff --git a/job-seeker.html b/job-seeker.html index ba4ae44..3f066c9 100644 --- a/job-seeker.html +++ b/job-seeker.html @@ -14,6 +14,9 @@ +
+ ⚠️ STAGING SITE — RecruitmentVenture-Staging +