commit 85d0536a908613bf28e4b2d770dc4b0139cfa1fd Author: Ozzy (AI Assistant) Date: Mon Jul 27 18:33:56 2026 +0000 Deploy to gh-pages diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html new file mode 100644 index 0000000..238d172 --- /dev/null +++ b/index.html @@ -0,0 +1,273 @@ + + + + + + Miami Alumni Chicagoland Business Directory + + + + + + + + + + +
+

Miami Alumni
Chicagoland Business Directory

+

Supporting Miami University alumni–owned businesses in the greater Chicago area

+ Love & Honor 🤍❤️ +
+ + + + + +
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..7b35e3c --- /dev/null +++ b/style.css @@ -0,0 +1,376 @@ +/* ===== Miami University (OH) Alumni Business Directory ===== */ +/* Color scheme: Miami Red #C41E3A, White, Cream background */ + +: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; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + background-color: var(--cream); + color: var(--text); + line-height: 1.6; + min-height: 100vh; +} + +/* ===== Header ===== */ +.site-header { + background: linear-gradient(135deg, var(--miami-red) 0%, var(--miami-red-dark) 100%); + color: var(--white); + padding: 3rem 1.5rem 2.5rem; + text-align: center; + position: relative; + overflow: hidden; +} + +.site-header::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; +} + +.site-header h1 { + font-size: 2.25rem; + font-weight: 700; + letter-spacing: -0.02em; + margin-bottom: 0.5rem; + position: relative; +} + +.site-header .subtitle { + font-size: 1.1rem; + opacity: 0.9; + font-weight: 400; + position: relative; +} + +.site-header .miami-badge { + display: inline-block; + margin-top: 1rem; + padding: 0.35rem 1.25rem; + border: 2px solid rgba(255,255,255,0.35); + border-radius: 100px; + font-size: 0.85rem; + font-weight: 600; + letter-spacing: 0.05em; + text-transform: uppercase; + position: relative; +} + +/* ===== Navigation / Filters ===== */ +.filter-bar { + background: var(--white); + border-bottom: 1px solid var(--light-gray); + padding: 1rem 1.5rem; + position: sticky; + top: 0; + z-index: 100; +} + +.filter-bar-inner { + max-width: var(--max-width); + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + flex-wrap: wrap; +} + +.filter-bar .stats { + font-size: 0.9rem; + color: var(--medium-gray); + font-weight: 500; +} + +.filter-bar .stats strong { + color: var(--miami-red); +} + +.filter-bar .search-wrapper { + flex: 1; + max-width: 400px; + min-width: 200px; +} + +.filter-bar input[type="text"] { + width: 100%; + padding: 0.6rem 1rem 0.6rem 2.5rem; + border: 2px solid var(--light-gray); + border-radius: 8px; + font-size: 0.9rem; + font-family: inherit; + background: var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8580' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 0.8rem center no-repeat; + transition: border-color 0.2s; +} + +.filter-bar input[type="text"]:focus { + outline: none; + border-color: var(--miami-red); + background-color: var(--white); +} + +.filter-bar .industry-filters { + display: flex; + gap: 0.4rem; + flex-wrap: wrap; +} + +.filter-bar .industry-btn { + padding: 0.4rem 0.8rem; + border: 1.5px solid var(--light-gray); + border-radius: 6px; + background: var(--white); + font-size: 0.78rem; + font-family: inherit; + font-weight: 500; + color: var(--medium-gray); + cursor: pointer; + transition: all 0.15s; +} + +.filter-bar .industry-btn:hover { + border-color: var(--miami-red-light); + color: var(--miami-red); +} + +.filter-bar .industry-btn.active { + background: var(--miami-red); + border-color: var(--miami-red); + color: var(--white); +} + +/* ===== Main Content ===== */ +main { + max-width: var(--max-width); + margin: 0 auto; + padding: 2rem 1.5rem 4rem; +} + +.directory-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); + gap: 1.5rem; +} + +/* ===== Business Card ===== */ +.business-card { + background: var(--white); + border-radius: var(--radius); + box-shadow: var(--shadow); + transition: transform 0.2s ease, box-shadow 0.2s ease; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.business-card:hover { + transform: translateY(-3px); + box-shadow: var(--shadow-hover); +} + +.card-accent { + height: 4px; + background: linear-gradient(90deg, var(--miami-red), var(--miami-red-light)); +} + +.card-body { + padding: 1.5rem; + flex: 1; + display: flex; + flex-direction: column; +} + +.card-company { + font-size: 1.2rem; + font-weight: 700; + color: var(--dark-gray); + margin-bottom: 0.3rem; + line-height: 1.3; +} + +.card-alumni { + font-size: 0.9rem; + color: var(--miami-red); + font-weight: 600; + margin-bottom: 0.75rem; + display: flex; + align-items: center; + gap: 0.4rem; +} + +.card-alumni::before { + content: '🎓'; + font-size: 0.85rem; +} + +.card-tags { + display: flex; + gap: 0.4rem; + margin-bottom: 0.75rem; + flex-wrap: wrap; +} + +.card-tag { + display: inline-block; + padding: 0.2rem 0.6rem; + border-radius: 4px; + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.02em; +} + +.card-tag.industry { + background: #FFF0F2; + color: var(--miami-red); +} + +.card-tag.location { + background: #EDE9E2; + color: #6B655E; +} + +.card-description { + font-size: 0.9rem; + color: #5A5550; + line-height: 1.55; + margin-bottom: 1rem; + flex: 1; +} + +.card-contact { + border-top: 1px solid var(--light-gray); + padding-top: 0.85rem; + margin-top: auto; +} + +.card-contact .contact-item { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.85rem; + color: var(--medium-gray); + margin-bottom: 0.3rem; +} + +.card-contact .contact-item:last-child { + margin-bottom: 0; +} + +.card-contact a { + color: var(--miami-red); + text-decoration: none; + font-weight: 500; + transition: color 0.15s; +} + +.card-contact a:hover { + color: var(--miami-red-dark); + text-decoration: underline; +} + +/* ===== Empty State ===== */ +.no-results { + grid-column: 1 / -1; + text-align: center; + padding: 3rem; + color: var(--medium-gray); +} + +.no-results h3 { + font-size: 1.2rem; + margin-bottom: 0.5rem; + color: var(--dark-gray); +} + +/* ===== Footer ===== */ +.site-footer { + background: var(--dark-gray); + color: rgba(255,255,255,0.7); + text-align: center; + padding: 2rem 1.5rem; + font-size: 0.85rem; + line-height: 1.8; +} + +.site-footer a { + color: var(--miami-red-light); + text-decoration: none; +} + +.site-footer a:hover { + text-decoration: underline; +} + +.site-footer .footer-love { + margin-top: 0.5rem; + font-size: 0.8rem; + opacity: 0.6; +} + +/* ===== Responsive ===== */ +@media (max-width: 768px) { + .site-header h1 { + font-size: 1.6rem; + } + .site-header { + padding: 2rem 1rem 1.75rem; + } + .directory-grid { + grid-template-columns: 1fr; + gap: 1rem; + } + .filter-bar-inner { + flex-direction: column; + align-items: stretch; + } + .filter-bar .search-wrapper { + max-width: none; + } + .filter-bar .industry-filters { + justify-content: center; + } + main { + padding: 1rem 1rem 3rem; + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .directory-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +/* Print styles */ +@media print { + .filter-bar { display: none; } + .business-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; } + .site-header { break-after: avoid; padding: 1rem; } +} \ No newline at end of file