diff --git a/css/style.css b/css/style.css index c93e8c3..ce506d1 100644 --- a/css/style.css +++ b/css/style.css @@ -6,34 +6,45 @@ } :root { - --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); + --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; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; - color: var(--dark); - background-color: var(--white); + color: var(--text); + background-color: var(--cream); line-height: 1.6; + min-height: 100vh; } .container { - max-width: 1200px; + max-width: var(--max-width); margin: 0 auto; - padding: 0 20px; + padding: 0 1.5rem; } /* ===== Header ===== */ .site-header { - background-color: var(--white); - border-bottom: 1px solid var(--gray-100); + background: linear-gradient(135deg, var(--miami-red) 0%, var(--miami-red-dark) 100%); + color: var(--white); position: sticky; top: 0; z-index: 100; @@ -43,27 +54,34 @@ body { display: flex; justify-content: space-between; align-items: center; - padding: 1rem 20px; + padding: 0.75rem 1.5rem; } .logo { font-size: 1.5rem; font-weight: 700; - color: var(--primary); + color: var(--white); + letter-spacing: -0.02em; } .nav a { margin-left: 2rem; - color: var(--dark); + color: rgba(255,255,255,0.85); 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(--primary); + color: var(--white); + border-bottom-color: rgba(255,255,255,0.5); } +/* ===== Staging Banner ===== */ +.staging-banner { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; text-align: center; @@ -79,15 +97,31 @@ body { /* ===== Hero Section ===== */ .hero { - background: linear-gradient(135deg, var(--primary) 0%, #1e40af 100%); + background: linear-gradient(135deg, var(--miami-red) 0%, var(--miami-red-dark) 100%); color: var(--white); - padding: 4rem 0; + padding: 5rem 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 { @@ -95,6 +129,7 @@ body { opacity: 0.9; max-width: 600px; margin: 0 auto; + position: relative; } /* ===== Section ===== */ @@ -104,9 +139,10 @@ body { .section h3 { text-align: center; - font-size: 1.875rem; + font-size: 1.75rem; + font-weight: 700; margin-bottom: 3rem; - color: var(--dark); + color: var(--dark-gray); } /* ===== Values Grid ===== */ @@ -120,22 +156,28 @@ body { .value-item { text-align: center; padding: 2rem; - border-radius: 8px; - background: var(--gray-50); + border-radius: var(--radius); + background: var(--white); + box-shadow: var(--shadow); transition: transform 0.2s, box-shadow 0.2s; } .value-item:hover { - transform: translateY(-4px); - box-shadow: var(--shadow); + transform: translateY(-3px); + box-shadow: var(--shadow-hover); } .value-item h4 { - color: var(--primary); + color: var(--miami-red); 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)); @@ -146,32 +188,33 @@ body { .step { text-align: center; padding: 2rem; - border-radius: 8px; - background: var(--white); - border: 1px solid var(--gray-100); + border-radius: var(--radius); + background: var(--cream); box-shadow: var(--shadow); } .step-number { width: 48px; height: 48px; - background: var(--primary); + background: linear-gradient(135deg, var(--miami-red) 0%, var(--miami-red-dark) 100%); 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(--gray-50); + background: var(--cream); text-align: center; padding: 4rem 0; } @@ -179,6 +222,7 @@ body { .cta h2 { margin-bottom: 2rem; font-size: 2rem; + color: var(--dark-gray); } .cta-buttons { @@ -199,49 +243,71 @@ body { border: none; cursor: pointer; font-size: 1rem; + font-family: inherit; } .btn-primary { - background: var(--primary); + background: var(--miami-red); color: white; } .btn-primary:hover { - background: var(--primary-dark); + background: var(--miami-red-dark); transform: translateY(-2px); + box-shadow: var(--shadow-hover); } .btn-secondary { background: transparent; - color: var(--primary); - border: 2px solid var(--primary); + color: var(--miami-red); + border: 2px solid var(--miami-red); } .btn-secondary:hover { - background: var(--primary); + background: var(--miami-red); 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; } .form-intro { text-align: center; - margin-bottom: 3rem; + margin-bottom: 2rem; } .form-intro h3 { font-size: 1.5rem; - margin-bottom: 1rem; + margin-bottom: 0.5rem; + color: var(--miami-red); } .contact-form { background: var(--white); padding: 2rem; - border-radius: 8px; + border-radius: var(--radius); box-shadow: var(--shadow); } @@ -260,7 +326,8 @@ body { display: block; margin-bottom: 0.5rem; font-weight: 600; - color: var(--dark); + color: var(--dark-gray); + font-size: 0.9rem; } .form-group input, @@ -268,26 +335,29 @@ body { .form-group textarea { width: 100%; padding: 0.75rem; - border: 1px solid var(--gray-100); - border-radius: 6px; + border: 2px solid var(--light-gray); + border-radius: 8px; font-family: inherit; font-size: 1rem; - transition: border-color 0.2s; + background: var(--cream); + transition: border-color 0.2s, background-color 0.2s; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; - border-color: var(--primary); + border-color: var(--miami-red); + background-color: var(--white); } /* ===== Footer ===== */ .site-footer { - background: var(--dark); - color: var(--white); + background: var(--dark-gray); + color: rgba(255,255,255,0.7); text-align: center; padding: 2rem 0; + font-size: 0.85rem; } /* ===== Responsive ===== */ @@ -296,10 +366,20 @@ 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; } @@ -319,26 +399,21 @@ body { grid-template-columns: 1fr; } - .site-header .container { - flex-direction: column; - gap: 1rem; + .section { + padding: 3rem 0; } } @media (max-width: 480px) { .container { - padding: 0 15px; + padding: 0 1rem; } .section { padding: 2rem 0; } - .hero { - padding: 2rem 0; + .hero h2 { + font-size: 1.6rem; } - - .form-container { - padding: 0 10px; - } -} \ No newline at end of file +} diff --git a/favicon.png b/favicon.png index bb980d1..aa900c8 100644 Binary files a/favicon.png and b/favicon.png differ