/* Modern-ish project showcase inspired by the example site */ /* CSS variables for light/dark themes */ :root { --bg: #ffffff; --text: #111317; --muted: #555; --card-bg: #ffffff; --border: #ececec; --primary: #0b5bd7; --accent: #e04646; --shadow: 0 6px 18px rgba(16, 24, 40, 0.04); --tag-bg: #f3f6ff; --tag-text: var(--primary); --tag-border: rgba(11, 91, 215, 0.08); } /* Dark theme overrides (applied with .dark on ) */ .dark { --bg: #0b0d10; --text: #e6eef8; --muted: #9aa6b3; --card-bg: #0f1720; --border: rgba(255, 255, 255, 0.06); --primary: #6ea8ff; --accent: #f08b8b; --shadow: 0 10px 30px rgba(2, 6, 23, 0.6); --tag-bg: rgba(255, 255, 255, 0.04); --tag-text: var(--primary); --tag-border: rgba(110, 150, 255, 0.08); } /* Also support data-theme attribute for JS-driven multi-theme switching */ html[data-theme="dark"] { --bg: #0b0d10; --text: #e6eef8; --muted: #9aa6b3; --card-bg: #0f1720; --border: rgba(255, 255, 255, 0.06); --primary: #6ea8ff; --accent: #f08b8b; --shadow: 0 10px 30px rgba(2, 6, 23, 0.6); --tag-bg: rgba(255, 255, 255, 0.04); --tag-text: var(--primary); --tag-border: rgba(110, 150, 255, 0.08); } html[data-theme="blue"] { --bg: #eef6ff; --text: #07203a; --muted: #3b556b; --card-bg: #ffffff; --border: #dbeafc; --primary: #0b5bd7; --accent: #0a7bd6; --shadow: 0 10px 30px rgba(11, 91, 215, 0.08); --tag-bg: #eef6ff; --tag-text: var(--primary); --tag-border: rgba(11, 91, 215, 0.08); } html[data-theme="green"] { --bg: #f3fbf7; --text: #07321f; --muted: #356a50; --card-bg: #ffffff; --border: #dff3e6; --primary: #0b8b4a; --accent: #47a66b; --shadow: 0 10px 30px rgba(11, 140, 80, 0.06); --tag-bg: #eefaf0; --tag-text: var(--primary); --tag-border: rgba(11, 140, 80, 0.06); } /* Reset */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background 0.22s ease, color 0.22s ease; } .container { max-width: 1100px; margin: 0 auto; padding: 28px; } /* Navbar */ .navbar { padding: 12px 0; border-bottom: 1px solid var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; } .brand { font-weight: 700; font-size: 18px; } .nav-links { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; } .nav-links a { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 14px; } .nav-links a:hover { text-decoration: underline; } /* Theme toggle button */ .theme-toggle { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; } .theme-toggle:hover { box-shadow: var(--shadow); } /* Hero / profile header */ .hero-section.modern { padding: 28px 0; } .hero-inner { display: flex; gap: 24px; align-items: center; } .avatar { width: 96px; height: 96px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); } .hero-right { max-width: 820px; } .hero-title { margin: 0 0 6px; font-size: 28px; font-weight: 700; } .hero-subtitle { margin: 0 0 12px; color: var(--muted); } .hero-links a { color: var(--primary); text-decoration: none; margin-right: 8px; } /* Section title - creative styling with emoji icons and animations */ .section-title { font-size: 28px; margin: 32px 0 20px; font-weight: 700; color: var(--text); padding: 12px 16px; border-radius: 12px; background: linear-gradient(135deg, var(--tag-bg), rgba(11, 91, 215, 0.04)); border-left: 4px solid var(--primary); display: inline-block; position: relative; transition: all 0.3s ease; letter-spacing: 0.5px; } .section-title:hover { transform: translateX(8px); box-shadow: 0 8px 20px rgba(11, 91, 215, 0.15); border-left-width: 6px; } /* Add emoji before section titles using ::before pseudo-element */ #products .section-title::before { content: "📦 "; margin-right: 8px; } #apps .section-title::before { content: "📱 "; margin-right: 8px; } #web .section-title::before { content: "🌐 "; margin-right: 8px; } #contact .section-title::before { content: "💬 "; margin-right: 8px; } /* Projects grid */ .projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .card { background: var(--card-bg); border: 1px solid var(--border); padding: 16px; border-radius: 8px; box-shadow: var(--shadow); transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(2, 6, 23, 0.08); } .card .thumb { width: 100%; height: 140px; object-fit: cover; border-radius: 6px; background: #f6f6f6; border: 1px solid var(--border); } .card h3 { margin: 12px 0 8px; font-size: 16px; color: var(--text); } .card p { margin: 0 0 12px; color: var(--muted); font-size: 14px; } .tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .tag { font-size: 12px; padding: 6px 8px; border-radius: 6px; background: var(--tag-bg); color: var(--tag-text); border: 1px solid var(--tag-border); } .card-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .card-links a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; color: var(--primary); text-decoration: none; font-weight: 600; margin-right: 0; background: transparent; border: 1px solid transparent; transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; } /* Primary CTA style - use for main actions */ .card-links a.primary, .card-links a[download] { background: var(--primary); color: var(--card-bg); border-color: transparent; box-shadow: 0 8px 26px rgba(11, 91, 215, 0.12); } .dark .card-links a.primary { box-shadow: 0 10px 30px rgba(110, 168, 255, 0.06); } .card-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow); text-decoration: none; } .card-links a:focus { outline: 3px solid rgba(11, 91, 215, 0.14); outline-offset: 2px; } /* Make Products prominent */ .products-highlight { border-left: 4px solid var(--primary); padding-left: 14px; } /* PDF placeholder */ .pdf-thumb { display: flex; align-items: center; justify-content: center; height: 140px; font-weight: 700; color: #fff; background: linear-gradient(180deg, var(--accent), #b43a3a); border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.06); } /* Contact card */ .contact-card { border: 1px solid var(--border); padding: 16px; border-radius: 8px; text-align: center; background: var(--card-bg); } /* Ensure CTAs inside the contact card are centered */ .contact-card .card-links { justify-content: center; margin-top: 14px; } /* Control alignment for the contact block so it lines up with other content */ .contact-wrap { max-width: 640px; margin: 0 auto; /* center the contact block in the page */ display: block; padding: 6px 12px; } @media (min-width: 960px) { /* keep a comfortable width on very wide screens */ .contact-wrap { max-width: 720px; } } @media (max-width: 720px) { .hero-inner { flex-direction: column; align-items: flex-start; } .avatar { width: 72px; height: 72px; } } /* Footer improvements: center content and style social links */ footer { padding-top: 28px; padding-bottom: 36px; } .social-links { display: flex; justify-content: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; } .social-links a { color: var(--primary); text-decoration: none; padding: 6px 10px; border-radius: 8px; font-weight: 600; border: 1px solid transparent; background: transparent; } .social-links a:hover { background: rgba(11, 91, 215, 0.06); transform: translateY(-2px); } .container.text-center p { margin: 0 0 8px; } /* Center the Get In Touch title inside the contact section */ #contact .section-title { text-align: center; margin-top: 40px; /* add breathing room above the Get In Touch heading */ } /* extra spacing for large screens so the section separates from the grid */ @media (min-width: 960px) { #contact { margin-top: 48px; } } /* Ensure any .container.text-center centers text content */ .container.text-center { text-align: center; } /* Slightly reduce footer link weight on small screens */ @media (max-width: 520px) { .social-links a { padding: 8px 12px; font-size: 14px; } } /* Mobile responsive fixes */ @media (max-width: 768px) { .container { padding: 16px; max-width: 100%; } .navbar { padding: 8px 0; } .brand { font-size: 16px; } .nav-links { gap: 12px; } .nav-links a { font-size: 13px; } .theme-toggle { padding: 4px 8px; font-size: 12px; } .hero-title { font-size: 22px; } .hero-subtitle { font-size: 14px; } .projects-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; } .card { padding: 12px; } .card h3 { font-size: 15px; } .card p { font-size: 13px; } .card .thumb { height: 120px; } .tag { font-size: 11px; padding: 4px 6px; } .card-links a { padding: 6px 10px; font-size: 13px; } .section-title { font-size: 18px; margin: 12px 0 8px; border-bottom: 2px solid var(--primary); padding-bottom: 6px; } #contact .section-title { margin-top: 20px; } .contact-wrap { max-width: 100%; padding: 4px 8px; } .contact-card { padding: 12px; } .contact-card p { font-size: 13px; } } /* Extra small screens */ @media (max-width: 520px) { .container { padding: 12px; } .nav-inner { gap: 8px; } .brand { font-size: 14px; } .nav-links { gap: 8px; } .nav-links a { font-size: 12px; } .hero-section.modern { padding: 14px 0; } .hero-inner { gap: 12px; } .avatar { width: 64px; height: 64px; } .hero-title { font-size: 18px; margin-bottom: 4px; } .hero-subtitle { font-size: 13px; margin-bottom: 8px; } .hero-links a { margin-right: 6px; font-size: 12px; } .projects-grid { grid-template-columns: 1fr; gap: 12px; } .card { padding: 10px; } .card h3 { font-size: 14px; margin: 8px 0 6px; } .card p { font-size: 12px; margin-bottom: 8px; } .card .thumb { height: 100px; margin-bottom: 6px; } .tags { gap: 6px; margin-bottom: 6px; } .tag { font-size: 10px; padding: 3px 5px; } .card-links { gap: 8px; } .card-links a { padding: 6px 10px; font-size: 12px; flex: 1; justify-content: center; text-align: center; } .section-title { font-size: 18px; margin: 18px 0 12px; border-bottom: 2px solid var(--primary); padding-bottom: 8px; } #contact .section-title { margin-top: 28px; } .contact-wrap { max-width: 100%; padding: 0; } .contact-card { padding: 10px; } .contact-card p { font-size: 12px; margin-bottom: 10px; } .contact-card .card-links { flex-direction: column; } .contact-card .card-links a { width: 100%; } .social-links { gap: 8px; } .social-links a { padding: 6px 8px; font-size: 12px; } footer { padding-top: 14px; padding-bottom: 18px; } .mb-5 { margin-bottom: 24px; } .py-4 { padding: 8px 0; } }