/* ═══════════════════════════════════════════════════════════════ MOBILE.CSS — Responsive fixes for all sections Add LAST in ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { /* ── BANNER ──────────────────────────────────────────────────── */ #avail-banner { font-size: 0.72rem; padding: 10px 2.5rem 10px 1rem; line-height: 1.5; text-align: left; } /* ── HERO ────────────────────────────────────────────────────── */ .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { text-align: center; justify-content: center; } .hero-stats { gap: 1.25rem; padding-top: 1.5rem; } .contact-strip { padding: 1rem; gap: 0.5rem 1rem; font-size: 0.8rem; } .scroll-indicator { display: none; } /* ── MARQUEE ─────────────────────────────────────────────────── */ .marquee-track { font-size: 0.75rem; } /* ── ABOUT GRID ──────────────────────────────────────────────── */ .about-grid { grid-template-columns: 1fr; gap: 2rem; } .about-photo-wrap { max-width: 160px; margin: 0 auto 1rem; } /* ── NOW CARD / BUILDING CARD ────────────────────────────────── */ .now-card, .building-card { padding: 0.875rem 1rem; } .now-pills { gap: 0.35rem; } /* ── GITHUB WIDGET ───────────────────────────────────────────── */ .github-widget, .github-heatmap-card { padding: 1rem; } .heatmap-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .heatmap-title-row { flex-wrap: wrap; gap: 0.5rem; } /* ── SPOTIFY WIDGET ──────────────────────────────────────────── */ .spotify-card { padding: 0.875rem 1rem; } .spotify-album-art { width: 44px; height: 44px; } .spotify-title { font-size: 0.82rem; } .spotify-artist { font-size: 0.72rem; } /* ── TIMELINE ────────────────────────────────────────────────── */ /* Collapse the 3-col grid (date | track | body) into a simple left-border card layout on mobile */ .timeline-entry { display: block; /* drop the grid entirely */ position: relative; padding-left: 1.5rem; /* space for the left border accent */ padding-bottom: 2.5rem; border-left: 2px solid var(--border); } .timeline-entry:last-child { padding-bottom: 0; border-left-color: transparent; } /* Hide the separate date column and the centre track column; we'll show the period inline above the role instead */ .timeline-date-col, .timeline-track { display: none; } /* Show period info as a small label above the role */ .timeline-body { width: 100%; } .timeline-body::before { content: attr(data-period); /* populated by JS – see note below */ display: block; font-size: 0.72rem; font-family: var(--font-mono); color: var(--text-muted); margin-bottom: 0.35rem; letter-spacing: 0.02em; } /* Dot on the left border */ .timeline-entry::before { content: ""; position: absolute; left: -5px; top: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--bg-root); box-shadow: 0 0 0 2px var(--accent); } .timeline-role { font-size: 1.05rem; } .timeline-company { font-size: 0.82rem; margin-bottom: 0.6rem; } .timeline-bullets li { font-size: 0.82rem; } .timeline-tags { gap: 0.3rem; flex-wrap: wrap; } /* Prevent tag pills from overflowing */ .tag, .timeline-tags .tag { font-size: 0.68rem; padding: 0.2rem 0.5rem; white-space: nowrap; } /* ── PROJECTS GRID ───────────────────────────────────────────── */ /* ── PROJECTS GRID ───────────────────────────────────────────── */ .projects-grid { grid-template-columns: 1fr; gap: 1rem; } .project-card { padding: 1.5rem 1.25rem; } .project-card--featured { grid-column: span 1; } .project-title { font-size: 1.15rem; } .project-desc { font-size: 0.84rem; } .project-tags { gap: 0.3rem; } /* Stack action buttons vertically on small screens */ .project-card-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; } .project-casestudy-btn { margin-right: 0; } .project-card-actions .btn { text-align: center; justify-content: center; width: 100%; } /* Header right cluster: don't let period wrap under badge */ .project-card-header-right { flex-wrap: nowrap; gap: 0.3rem; } .project-period { font-size: 0.65rem; } .project-live-badge { font-size: 0.62rem; padding: 0.15rem 0.4rem 0.15rem 0.3rem; } .star-count { font-size: 0.65rem; padding: 0.15rem 0.4rem; } /* ── SKILLS ──────────────────────────────────────────────────── */ .skills-grid { grid-template-columns: 1fr; gap: 1rem; } .skill-group { padding: 1.1rem; } .skill-items { gap: 0.3rem; } /* ── EDUCATION ───────────────────────────────────────────────── */ .edu-grid { grid-template-columns: 1fr; gap: 1rem; } .edu-card { padding: 1.25rem; } /* ── CERTIFICATIONS ──────────────────────────────────────────── */ .cert-grid { grid-template-columns: 1fr; gap: 1rem; } .cert-card { padding: 1.25rem; } /* ── BLOG ────────────────────────────────────────────────────── */ .blog-grid { grid-template-columns: 1fr; gap: 1rem; } .blog-card { padding: 1.25rem; } /* ── CONTACT ─────────────────────────────────────────────────── */ .contact-section-inner { grid-template-columns: 1fr; gap: 2rem; } .contact-form-card { padding: 1.25rem; } /* ── MODAL ───────────────────────────────────────────────────── */ #modal-backdrop { padding: 0; align-items: flex-end; } .modal-box { max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; width: 100%; } .modal-body { padding: 0.5rem 1.25rem 2rem; } /* ── FOOTER ──────────────────────────────────────────────────── */ .footer-inner { flex-direction: column; align-items: flex-start; gap: 1rem; } .footer-links { flex-wrap: wrap; gap: 0.75rem 1.25rem; } /* ── SECTION TITLES ──────────────────────────────────────────── */ .section__title { font-size: clamp(1.7rem, 7vw, 2.5rem); margin-bottom: 1.5rem; } .section__subtitle { font-size: 0.92rem; } /* ── TOAST ───────────────────────────────────────────────────── */ #toast { bottom: 1rem; right: 1rem; left: 1rem; text-align: center; } } /* ── SMALL PHONES (max 480px) ─────────────────────────────────── */ @media (max-width: 480px) { .hero-greeting { font-size: 0.68rem; padding: 6px 12px; } .hero-name { font-size: clamp(2.4rem, 11vw, 3.5rem); } .hero-stats { grid-template-columns: repeat(2, 1fr); display: grid; gap: 1rem; } .btn { padding: 10px 20px; font-size: 0.85rem; } .nav-logo { font-size: 1.2rem; } .projects-grid, .skills-grid, .cert-grid, .blog-grid, .edu-grid { grid-template-columns: 1fr; } /* Extra tightening for very small phones */ .project-card { padding: 1.25rem 1rem; } .project-title { font-size: 1.05rem; } .project-metric { font-size: 0.78rem; } .project-card-header { flex-wrap: wrap; gap: 0.4rem; } .spotify-album-art { width: 40px; height: 40px; } .building-meta { flex-direction: column; align-items: flex-start; } }