/* * Classic Macintosh (System 6) theme: 1-bit, black on white. * ChicagoFLF is a public-domain recreation of the original Chicago UI font * (via the system.css project), self-hosted so nothing render-blocking loads * from a CDN. */ @font-face { font-family: 'ChicagoFLF'; src: url('assets/fonts/ChicagoFLF.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* CSS Variables for theming */ :root { /* * Light theme: "aged Macintosh" warm paper. The desktop is the beige of * a Macintosh 128K's plastic, the ink is the sepia of a faded printed * manual, and window surfaces are warm paper-white. One spot color — a * burnt rainbow-logo-era red — carries the primary buttons. */ --bg-primary: #ece4d3; --bg-secondary: #fbf7ee; --text-primary: #33291f; --text-secondary: #5c5245; --accent-primary: #33291f; --accent-secondary: #33291f; --border-color: #33291f; --shadow-color: transparent; --card-bg: #fbf7ee; --toggle-bg: #fbf7ee; --accent-cta: #c14524; --accent-cta-press: #a03619; --on-cta: #fbf7ee; /* Chicago is a single-weight face; Geneva's closest web stand-in is Verdana. */ --font-ui: 'ChicagoFLF', 'Chicago', Geneva, Verdana, sans-serif; --font-body: Geneva, Verdana, 'DejaVu Sans', sans-serif; } /* Dark theme: the same design on warm brown-black, beige ink. */ body.dark-theme { --bg-primary: #221c15; --bg-secondary: #2a231b; --text-primary: #ece4d3; --text-secondary: #c9bfae; --accent-primary: #ece4d3; --accent-secondary: #ece4d3; --border-color: #ece4d3; --shadow-color: transparent; --card-bg: #221c15; --toggle-bg: #221c15; --accent-cta: #c14524; --accent-cta-press: #d95a37; --on-cta: #fbf7ee; } #theme-toggle { position: fixed; top: 0.5rem; right: 0.75rem; background: var(--bg-primary); border: 1.5px solid var(--border-color); color: var(--text-primary); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; z-index: 1001; font-size: 1rem; } #theme-toggle:hover { background: var(--text-primary); color: var(--bg-primary); } /* Reset and base styles */ * { margin: 0; padding: 0; box-sizing: border-box; } /* * Only may scroll. * * `height: 100%` + `overflow-y: scroll` used to be set on html AND body, which * turned into its own nested scroll container: html.scrollHeight stayed * at the viewport height while body.scrollHeight grew to the full page. The * page still scrolled, but window.scrollY was pinned at 0, so anything reading * the window scroll position silently did nothing. * * overflow-y: scroll stays on html to keep the scrollbar gutter reserved and * avoid a horizontal shift on short pages. */ html { height: 100%; scroll-behavior: smooth; overflow-y: scroll; } body { min-height: 100%; font-family: var(--font-body); color: var(--text-primary); font-size: 16px; line-height: 1.6; background-color: var(--bg-primary); /* The classic desktop: a chunky 50% dither pattern behind the windows. */ background-image: repeating-conic-gradient(var(--border-color) 0% 25%, var(--bg-primary) 0% 50%); background-size: 4px 4px; transition: color 0.3s ease; } /* Inline SVG icons, sized from the parent's font-size like the old webfont. */ .icon { width: 1em; height: 1em; fill: currentColor; vertical-align: -0.125em; flex: none; } /* Layout */ header, nav, section, footer { max-width: 1200px; margin: auto; } header { text-align: center; padding-top: 4rem; position: relative; } /* Old Header removed */ /* Navigation — the Macintosh menu bar. */ nav { display: flex; justify-content: flex-start; align-items: center; gap: 0; padding: 0 0.75rem; margin: 0; position: sticky; top: 0; z-index: 1000; width: 100%; max-width: none; background: var(--bg-primary); border-bottom: 2px solid var(--border-color); font-family: var(--font-ui); } .menu-title { padding: 0.35rem 0.9rem; font-size: 0.95rem; letter-spacing: 1px; } nav a { text-decoration: none; color: var(--text-primary); font-size: 0.95rem; padding: 0.35rem 0.9rem; } /* Menu highlight: instant video-invert, like pulling down a real menu. */ nav a:hover, nav a.active { color: var(--bg-primary); background: var(--text-primary); } /* * Sections are classic Mac windows: hard black frame, striped title bar, * a hard 1-bit drop shadow, sitting on the dithered desktop. */ section { /* Clears the sticky menu bar. */ scroll-margin-top: 4rem; margin: 2.5rem auto; padding: 0 2rem 2.5rem; width: 90%; background: var(--card-bg); border: 2px solid var(--border-color); box-shadow: 2px 2px 0 var(--border-color); } /* The window title bar: centered title between racing stripes. */ section h2 { display: flex; align-items: center; gap: 0.75rem; margin: 0 -2rem 2rem; padding: 0.45rem 0.75rem; border-bottom: 2px solid var(--border-color); font-family: var(--font-ui); font-size: 1.15rem; font-weight: 400; color: var(--text-primary); } section h2::before, section h2::after { content: ''; flex: 1; height: 11px; background: repeating-linear-gradient(to bottom, var(--border-color) 0 1px, transparent 1px 3px); } /* * The close box: an 11px square floating in the left stripe run, drawn as * layered backgrounds (inner fill, box border, a whiteout gap that clears * the stripes around it) on top of the stripes themselves. */ section h2::before { background: linear-gradient(var(--card-bg), var(--card-bg)) 8px 50% / 7px 7px no-repeat, linear-gradient(var(--border-color), var(--border-color)) 6px 50% / 11px 11px no-repeat, linear-gradient(var(--card-bg), var(--card-bg)) 0 50% / 21px 100% no-repeat, repeating-linear-gradient(to bottom, var(--border-color) 0 1px, transparent 1px 3px); } ul li { margin-bottom: 1rem; } /* Footer — a little status window on the desktop. */ footer { text-align: center; font-size: 0.85rem; font-family: var(--font-ui); color: var(--text-primary); background: var(--bg-primary); border: 2px solid var(--border-color); box-shadow: 2px 2px 0 var(--border-color); width: fit-content; padding: 0.4rem 1.5rem; margin: 0 auto 2.5rem; } .footer-note { font-size: 0.72rem; font-family: var(--font-body); margin-top: 2px; } /* * Button — classic Mac push-button shape, carrying the one spot color. * The retro red is the only non-monochrome thing on the page, so primary * actions are unmissable in both themes. */ .button { display: inline-block; margin-top: 1rem; padding: 0.5rem 1.5rem; border-radius: 10px; background: var(--accent-cta); color: var(--on-cta); border: 1.5px solid var(--border-color); box-shadow: 2px 2px 0 var(--border-color); font-family: var(--font-ui); font-weight: 400; text-decoration: none; transition: none; } .button:hover { background: var(--accent-cta-press); color: var(--on-cta); } .button { white-space: nowrap; } /* Hero Section — styled like the "Welcome to Macintosh" dialog. */ .hero-section { min-height: 70vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 3rem 2rem; } /* Single centered column now that the hero photo is gone. */ .hero-content { display: grid; grid-template-columns: 1fr; justify-items: center; align-items: center; width: 100%; } .hero-text { text-align: center; max-width: 800px; } /* Chicago is single-weight: no faux bold, no negative tracking. */ .gradient-text { font-family: var(--font-ui); font-size: 3.25rem; font-weight: 400; line-height: 1.15; margin-bottom: 1rem; color: var(--text-primary); } .hero-subtitle { font-size: 1.15rem; font-family: 'Monaco', 'Courier New', monospace; color: var(--text-primary); margin-bottom: 1.5rem; font-weight: 400; } .hero-description { font-size: 1.15rem; color: var(--text-secondary); margin: 0 auto 2.5rem; max-width: 90%; } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 2rem; } /* Social Links */ .social-links { display: flex; gap: 1.5rem; } .social-links a { font-size: 1.5rem; color: var(--text-secondary); transition: all 0.3s ease; } .social-links a:hover { opacity: 0.55; } /* Animations */ .fade-in { opacity: 0; animation: fadeIn 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Section windows genie open, rising out of a pinched funnel. */ .slide-up { opacity: 0; transform-origin: 50% 100%; animation: genieIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* Project cards genie open too, staggered below. */ .project-card { opacity: 0; transform-origin: 50% 100%; animation: genieIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards; } /* * The Mac OS genie effect, approximated in CSS: a clip-path funnel that * pinches the window toward a point below while it scales up from the * bottom edge. The final polygon extends past the border box so the hard * drop shadow is not clipped once the animation settles. */ @keyframes genieIn { 0% { opacity: 1; transform: translateY(44px) scale(0.5, 0.08); clip-path: polygon(30% 0%, 70% 0%, 60% 55%, 55% 100%, 45% 100%, 40% 55%); } 45% { opacity: 1; transform: translateY(14px) scale(0.85, 0.55); clip-path: polygon(0% 0%, 100% 0%, 94% 55%, 86% 100%, 14% 100%, 6% 55%); } 100% { opacity: 1; transform: translateY(0) scale(1, 1); clip-path: polygon(-5% -5%, 105% -5%, 105% 50%, 105% 105%, -5% 105%, -5% 50%); } } /* * Stagger is done here rather than by setting --card-index from JS, so the * cards still appear correctly if the script never runs. */ .project-card-link:nth-child(1) .project-card { animation-delay: 0s; } .project-card-link:nth-child(2) .project-card { animation-delay: 0.1s; } .project-card-link:nth-child(3) .project-card { animation-delay: 0.2s; } .project-card-link:nth-child(4) .project-card { animation-delay: 0.3s; } .project-card-link:nth-child(5) .project-card { animation-delay: 0.4s; } .project-card-link:nth-child(6) .project-card { animation-delay: 0.5s; } .project-card-link:nth-child(7) .project-card { animation-delay: 0.6s; } .project-card-link:nth-child(8) .project-card { animation-delay: 0.7s; } .project-card-link:nth-child(9) .project-card { animation-delay: 0.8s; } .project-card-link:nth-child(n + 10) .project-card { animation-delay: 0.9s; } /* Set by the project filter buttons. */ .project-card-link.is-hidden { display: none; } @keyframes fadeIn { to { opacity: 1; } } /* Floating animation for header */ header h1 { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /* Enhanced hover effects - now handled by parent link */ /* Loader styles */ #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--bg-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; transition: background-color 0.3s ease; /* * Failsafe. If script.js never runs (parse error, blocked request, old * browser) this clears the overlay anyway, so a JS failure can never leave * the visitor staring at a spinner over content that is already there. */ animation: loaderFailsafe 0s linear 3s forwards; } /* The normal path: script.js reveals the page as soon as it is ready. */ body.loaded #loader { opacity: 0; visibility: hidden; pointer-events: none; animation: none; transition: opacity 0.35s ease, visibility 0.35s ease; } @keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } } .logo-container { position: relative; width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; } .logo-text { font-size: 2.25rem; font-weight: 400; color: var(--text-primary); font-family: var(--font-ui); z-index: 2; animation: pulseText 2s ease-in-out infinite; } .logo-ring { position: absolute; width: 100%; height: 100%; border: 4px solid transparent; border-top-color: var(--accent-primary); border-right-color: var(--accent-secondary); border-bottom-color: var(--accent-primary); border-radius: 50%; animation: spinRing 1.5s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite; } .logo-ring::before { content: ''; position: absolute; top: 4px; left: 4px; right: 4px; bottom: 4px; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--accent-secondary); animation: spinRing 2s linear infinite reverse; } @keyframes spinRing { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulseText { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(0.95); } } /* * Scroll snapping removed. * * `scroll-snap-type: y mandatory` forces the scroll position to a section * start, but Experience (1650px) and Projects (1456px) are both far taller * than a typical viewport. Mandatory snapping made it impossible to rest the * scroll inside them — the browser kept yanking back to a section boundary, * so scrolling through the project grid fought the user the whole way. */ #snap-scroll { scroll-snap-type: none; } /* Filter Buttons */ .filter-container { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .filter-btn { background: var(--bg-primary); border: 1.5px solid var(--border-color); padding: 0.35rem 1.1rem; border-radius: 10px; font-size: 0.85rem; color: var(--text-primary); font-family: var(--font-ui); } .filter-btn:hover, .filter-btn.active { background: var(--text-primary); color: var(--bg-primary); } /* --- SURFACE CARD --- */ /* An inner Mac panel: hard frame, hard shadow. */ .glass-card { background: var(--card-bg); border: 2px solid var(--border-color); box-shadow: 2px 2px 0 var(--border-color); overflow: hidden; position: relative; } /* --- EXPERIENCE TIMELINE --- */ .timeline { position: relative; max-width: 800px; margin: 0 auto; } .timeline::after { content: ''; position: absolute; width: 2px; background: var(--border-color); top: 0; bottom: 0; left: 20px; /* Center of 60px icon is 30px, minus 10px offset = 20px. Wait, left is -10px. Width 60px. Center is -10 + 30 = 20px. Line is at left: 20px. Matches! */ margin-left: -1px; } .timeline-item { padding: 10px 40px 10px 90px; /* Increased left padding for 80px icon */ position: relative; background-color: inherit; width: 100%; margin-bottom: 2rem; } /* Square desk-accessory icon; logos render 1-bit-ish via grayscale. */ .timeline-icon { position: absolute; left: -20px; top: 5px; width: 80px; height: 80px; background: #ffffff; border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; z-index: 10; overflow: hidden; } .timeline-icon img { width: 100%; height: 100%; object-fit: contain; padding: 15px; filter: grayscale(1) contrast(1.15); } .timeline-content { padding: 1.5rem; background: var(--card-bg); border: 1.5px solid var(--border-color); box-shadow: 2px 2px 0 var(--border-color); } .timeline-date { font-size: 0.8rem; color: var(--text-primary); font-family: var(--font-ui); font-weight: 400; margin-bottom: 0.5rem; display: block; text-transform: uppercase; letter-spacing: 1px; } .timeline-title { font-size: 1.15rem; font-family: var(--font-ui); font-weight: 400; margin-bottom: 0.25rem; color: var(--text-primary); } .timeline-company { font-size: 1rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 1rem; } /* * The custom '▹' marker below is drawn with ::before, so the native list * marker has to be switched off — otherwise every item renders two bullets. * The global `* { padding: 0 }` reset hid this on some browsers by pulling the * native marker outside the visible box, but it still painted. */ .timeline-description { list-style: none; } .timeline-description li { margin-bottom: 0.5rem; font-size: 0.95rem; color: var(--text-secondary); padding-left: 1.2rem; position: relative; } .timeline-description li::before { content: '▹'; position: absolute; left: 0; color: var(--accent-primary); } /* --- PROJECTS OVERHAUL --- */ /* (Reusing existing Grid but enhancing cards) */ .project-card { /* Reset previous styles if needed, but mostly extending */ border: 1px solid var(--border-color); /* Slightly transparent */ } /* Fix flicker: make link the hover target */ .project-card-link { display: block; text-decoration: none; height: 100%; position: relative; /* Enable z-index */ z-index: 1; width: 100%; /* Ensure it fits the grid cell */ box-sizing: border-box; } .project-card-link:hover { z-index: 10; /* Bring to front on hover */ } /* Apply hover effect when parent link is hovered: the window comes forward. */ .project-card-link:hover .project-card { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--border-color); } /* Disable self-hover on the inner card to prevent conflict/flicker */ /* The lift above is driven by the parent link only; the card must not define its own :hover or the two rules cancel out at equal specificity. */ /* * Each project card is a Mac window. Its h3 is the title bar: pinstripes * flanking the centered title, a close box in the left run, and collapse * (minimize) + zoom (enlarge) boxes in the right run — all drawn with * layered backgrounds, no extra markup. */ .project-card h3 { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-ui); font-size: 0.92rem; font-weight: 400; margin: 0; padding: 0.4rem 0.6rem; border-bottom: 1.5px solid var(--border-color); color: var(--text-primary); text-align: center; } .project-card h3::before, .project-card h3::after { content: ''; flex: 1; height: 11px; background: repeating-linear-gradient(to bottom, var(--border-color) 0 1px, transparent 1px 3px); } /* Left run: the close box (empty square). */ .project-card h3::before { min-width: 24px; background: linear-gradient(var(--card-bg), var(--card-bg)) 4px 50% / 7px 7px no-repeat, linear-gradient(var(--border-color), var(--border-color)) 2px 50% / 11px 11px no-repeat, linear-gradient(var(--card-bg), var(--card-bg)) 0 50% / 17px 100% no-repeat, repeating-linear-gradient(to bottom, var(--border-color) 0 1px, transparent 1px 3px); } /* Right run: the collapse box (bar glyph); the zoom box is the real button. */ .project-card h3::after { min-width: 24px; background: /* collapse glyph: horizontal bar inside the box */ linear-gradient(var(--border-color), var(--border-color)) right 4px top 50% / 7px 2px no-repeat, linear-gradient(var(--card-bg), var(--card-bg)) right 2px top 50% / 7px 7px no-repeat, linear-gradient(var(--border-color), var(--border-color)) right 0 top 50% / 11px 11px no-repeat, linear-gradient(var(--card-bg), var(--card-bg)) right 0 top 50% / 15px 100% no-repeat, repeating-linear-gradient(to bottom, var(--border-color) 0 1px, transparent 1px 3px); } /* * The zoom (open) box is a real button so it can open the floating project * window. `order: 1` places it after the h3's ::after stripes, making it the * rightmost control like a real Mac zoom box. */ .open-btn { order: 1; flex: none; width: 22px; height: 22px; margin: 0; padding: 0; background: none; border: none; display: grid; place-items: center; position: relative; } .open-btn::before { content: ''; width: 11px; height: 11px; box-sizing: border-box; border: 1.5px solid var(--border-color); background: var(--card-bg); } .open-btn::after { content: ''; position: absolute; width: 5px; height: 5px; box-sizing: border-box; border: 1.5px solid var(--border-color); /* nested-square glyph nudged to the top-left, like the real zoom box */ transform: translate(-1px, -1px); } .open-btn:hover::before, .open-btn:focus-visible::before { background: var(--text-primary); } .open-btn:hover::after, .open-btn:focus-visible::after { border-color: var(--bg-primary); } /* * The floating project window. Fixed near the top of the viewport, centred * via margin (not transform) so the genie animation owns `transform`. */ .floating-window { position: fixed; z-index: 2000; top: 14vh; left: 50%; width: min(520px, 92vw); margin-left: calc(min(520px, 92vw) / -2); background: var(--card-bg); border: 2px solid var(--border-color); box-shadow: 4px 4px 0 var(--border-color); transform-origin: 50% 100%; } .floating-window.genie { animation: genieIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .floating-titlebar { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.75rem; border-bottom: 2px solid var(--border-color); font-family: var(--font-ui); font-size: 1rem; user-select: none; -webkit-user-select: none; touch-action: none; } .floating-titlebar::before, .floating-titlebar::after { content: ''; flex: 1; height: 11px; background: repeating-linear-gradient(to bottom, var(--border-color) 0 1px, transparent 1px 3px); } /* Keep the close box at the far left, before the first stripe run. */ .floating-titlebar .close-btn { order: -1; flex: none; width: 22px; height: 22px; margin: 0; padding: 0; background: none; border: none; display: grid; place-items: center; } .close-btn::before { content: ''; width: 11px; height: 11px; box-sizing: border-box; border: 1.5px solid var(--border-color); background: var(--card-bg); } .close-btn:hover::before, .close-btn:focus-visible::before { background: var(--text-primary); } .floating-body { padding: 1.25rem; } .floating-body p { font-size: 0.95rem; line-height: 1.55; margin-bottom: 0.25rem; } .floating-body .button { margin-top: 1.25rem; } /* --- EDUCATION SECTION --- */ .education-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .edu-card { display: flex; gap: 1.5rem; align-items: flex-start; padding: 2rem; } .edu-icon { font-size: 2.5rem; color: var(--accent-primary); opacity: 0.8; } .edu-details h3 { font-size: 1.2rem; margin-bottom: 0.5rem; } .edu-details .edu-degree { font-weight: 600; color: var(--text-primary); margin-bottom: 0.25rem; display: block; } .edu-details .edu-year { font-size: 0.9rem; color: var(--accent-secondary); margin-bottom: 1rem; display: block; } /* --- CONTACT SECTION --- */ #contact { text-align: center; max-width: 900px; } .contact-card { padding: 3rem; text-align: center; } /* The removed email link used to supply this gap above the icons. */ .contact-card .social-links { margin-top: 2rem; } /* Scroll Indicator */ .scroll-indicator { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; color: var(--accent-primary); font-size: 1.5rem; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } .project-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; padding: 10px; /* Add padding to container to prevent edge clipping */ } /* Skills Tags */ .skills-container { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } .skill-tag { background: var(--bg-primary); padding: 0.2rem 0.7rem; font-size: 0.78rem; font-weight: 400; color: var(--text-primary); border: 1px solid var(--border-color); } /* Mobile Responsiveness */ @media (max-width: 768px) { /* * The nav leads the page now, so it has to stay thin. Wrapping five links at * phone width cost three rows and ~200px before the hero. Keep it to one row * and let it scroll sideways if the labels do not fit. */ nav { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; justify-content: flex-start; gap: 0; padding: 0 0.25rem; width: 100%; max-width: none; margin: 0; top: 0; } nav::-webkit-scrollbar { display: none; } /* * The menu bar spans the whole width at the top, so drop the fixed theme * toggle to the bottom-right, in easy thumb reach. */ #theme-toggle { top: auto; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); right: 1rem; width: 40px; height: 40px; } .menu-title { padding: 0.35rem 0.5rem; font-size: 0.8rem; } nav a { padding: 0.35rem 0.5rem; font-size: 0.8rem; white-space: nowrap; } section { padding: 0 1.25rem 2rem; width: 95%; } section h2 { margin: 0 -1.25rem 1.5rem; } /* The welcome dialog hugs its content instead of forcing 70vh of empty window on a phone screen. */ .hero-section { min-height: 0; padding: 2.5rem 1.25rem; } /* Stack the button above the social icons; side by side they forced the button label to wrap. */ .hero-actions { flex-direction: column; gap: 1.25rem; } /* * Compact timeline: the 80px icons hanging outside the content column * squeezed the cards to ~200px. Pull the icons inside and shrink them. */ .timeline::after { left: 24px; } .timeline-item { padding: 8px 0 8px 62px; } .timeline-icon { left: 0; top: 8px; width: 48px; height: 48px; } .timeline-icon img { padding: 8px; } .timeline-content { padding: 1rem; } .contact-card { padding: 1.5rem 1rem; } .about-content { flex-direction: column-reverse; text-align: center; } .about-image img { width: 180px; height: 180px; } /* Hero Mobile */ .gradient-text { font-size: 2.5rem; } .project-grid { grid-template-columns: 1fr; } } /* Narrow phones (iPhone SE and similar, 320px). */ @media (max-width: 380px) { nav { padding: 0.3rem 0.15rem; } nav a { padding: 0.3rem 0.27rem; font-size: 0.68rem; } .gradient-text { font-size: 2.1rem; } } .project-card { background: var(--card-bg); /* The title bar spans edge to edge; body content pads itself below. */ padding: 0 0 1.25rem; box-shadow: 2px 2px 0 var(--border-color); border: 1.5px solid var(--border-color); position: relative; height: 100%; /* Fill the anchor tag */ width: 100%; /* Fill the anchor tag */ box-sizing: border-box; /* Include padding in width */ margin: 0; /* Ensure no external margins */ } /* Project card hover effects are handled by the parent link. */ /* * Reduced motion. * * The looping animations on this page (spinning loader rings, pulsing logo * text) are decorative and are stopped entirely here. The entrance * animations cannot simply be switched off, because their elements start at * opacity 0 and only the animation brings them in — so each one is pinned to * its final state instead. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } html, body { scroll-behavior: auto; } /* Elements that are invisible until their entrance animation runs. */ .fade-in, .slide-up, .project-card { opacity: 1 !important; transform: none !important; clip-path: none !important; } /* Keep the failsafe working: clear the loader immediately instead of at 4s. */ #loader { animation-delay: 0s !important; } /* Purely decorative motion — no final state to preserve. */ .logo-ring, .logo-ring::before, .logo-text, .scroll-indicator, header h1 { animation: none !important; } } .project-card p { font-size: 0.95rem; color: var(--text-primary); line-height: 1.5; margin: 1rem 1.25rem 0; } .project-card .skills-container { margin: 1rem 1.25rem 0; } /* * The classic Macintosh arrow cursor, on devices with a real pointer. * Declared last so it also wins over the earlier cursor: pointer rules. */ @media (pointer: fine) { html, body, a, button, .filter-btn, .open-btn, .close-btn, #theme-toggle { cursor: url('assets/cursor-mac.png') 0 0, auto; } } /* * Touch devices: no custom cursor (the rule above is pointer: fine only), * and the tiny window controls get finger-sized tap targets. The drawn * glyphs stay 11px; only the invisible hit area grows. */ @media (pointer: coarse) { .open-btn, .close-btn { width: 38px; height: 38px; } }