@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono/JetBrainsMono-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/JetBrainsMono/JetBrainsMono-ExtraBold.woff2') format('woff2'); font-weight: 800; /* Distinct weight for ExtraBold */ font-style: normal; font-display: swap; } /* --- Design Tokens --- Two palettes, swapped by [data-theme] on : Dark (default) uses Thistle / Lavender Purple / Deep Lilac / Deep Space Blue / Evergreen; Light uses Lavender Veil / Lavender Veil / Mauve / Wisteria / Dusty Lavender. Every rule in this file reads these custom properties instead of a literal color, so the two blocks below are the only places a theme is actually defined. Roles stay constant across both themes: --color-bg / --color-panel surfaces (page vs. elevated card) --color-text / --color-text-dim body copy vs. de-emphasized text --color-text-strong max-contrast text (headings, job titles) --color-accent readable accent text (~4.5:1+): h2, nav, labels --color-accent-muted decorative-only accent (borders, glows, hover fills) - only needs ~3:1 --color-accent-soft secondary decorative accent (border-left bars, dividers) --color-accent (dark) is a lightened tint of --color-accent-muted; in light mode it's a darkened, saturated Wisteria so it stays legible against the pale surfaces. --color-text / --color-text-dim are similarly derived tints of the palette, tuned so body copy clears AA on both surface colors in each theme. NOTE: .status-item .accent-text (the maroon "UMass" highlight) is intentionally hardcoded to #c2294f, not a token - it must not change between themes. ---------------------------------- */ :root { --color-bg: #031211; --color-panel: #081621; --color-panel-tint: rgba(16, 43, 63, 0.4); --color-hover-bg: #1c2f4f; --color-text: #9494ad; --color-text-dim: #7a7690; --color-text-strong: #e2cfea; --color-accent: #b185da; --color-accent-muted: #a06cd5; --color-accent-soft: #6247aa; --color-accent-tint: rgba(160, 108, 213, 0.1); --color-border: rgba(160, 108, 213, 0.18); --color-border-strong: rgba(160, 108, 213, 0.4); --color-glow: rgba(160, 108, 213, 0.3); } :root[data-theme="light"] { --color-bg: #f3e0ec; --color-panel: #ead5e6; --color-panel-tint: rgba(202, 156, 225, 0.22); --color-hover-bg: #f2befc; --color-text: #5b5466; --color-text-dim: #685f74; --color-text-strong: #3d3547; --color-accent: #6b3fa0; --color-accent-muted: #ca9ce1; --color-accent-soft: #685f74; --color-accent-tint: rgba(202, 156, 225, 0.22); --color-border: rgba(104, 95, 116, 0.22); --color-border-strong: rgba(104, 95, 116, 0.45); --color-glow: rgba(202, 156, 225, 0.4); } /* --- Reset --- */ * { margin: 0; padding: 0; box-sizing: border-box; } /* --- Base --- */ body { background-color: var(--color-bg); color: var(--color-text); font-family: 'JetBrains Mono', 'Courier New', Courier, monospace; line-height: 1.7; padding: 4rem 2rem; } html { scroll-behavior: smooth; } /* --- Theme Toggle --- Fixed to the viewport's top-right corner so it stays reachable regardless of scroll position or which two-column breakpoint is active. The icon is a single circle split down the middle, filled on the left; flipping [data-theme] mirrors it horizontally so the filled half swaps sides, showing at a glance which half (dark/light) is currently active. ---------------------------------- */ .theme-toggle { position: fixed; top: 1.5rem; right: 2rem; z-index: 1001; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--color-panel); border: 1px solid var(--color-border-strong); border-radius: 50%; color: var(--color-accent); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--color-accent-muted); color: var(--color-text-strong); background-color: var(--color-hover-bg); } .theme-toggle:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: 2px; } .theme-toggle-icon { width: 20px; height: 20px; transition: transform 0.4s ease; } [data-theme="light"] .theme-toggle-icon { transform: scaleX(-1); } @media (max-width: 900px) { .theme-toggle { position: static; /* Drops out of the fixed corner to flow inline with the social icons */ } } /* --- Layout --- */ .portfolio-layout { display: grid; grid-template-columns: 300px 1fr; gap: 6rem; width: 95%; max-width: 1500px; margin: 0 auto 0 0; padding-left: 2rem; } /* --- Sidebar --- */ .sidebar { position: fixed; width: 348px; /* Widened so the scrollbar lines up with .sidebar-divider-line; content stays pinned to 300px via .sidebar-inner below */ height: calc(100vh - 5rem); top: 4rem; left: 2rem; box-sizing: border-box; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; } .sidebar-inner { width: 300px; /* Original sidebar content width - nothing inside moves or resizes */ height: 100%; padding-bottom: 10px; box-sizing: border-box; display: flex; flex-direction: column; } .sidebar::-webkit-scrollbar { width: 4px; } .sidebar::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 2px; } .sidebar::-webkit-scrollbar-track { background: transparent; } /* --- Sidebar: Profile & Name --- */ .profile-frame { width: 90px; height: 90px; flex-shrink: 0; background-color: var(--color-panel); border: 1px solid var(--color-accent-muted); box-shadow: 0 0 15px var(--color-glow); border-radius: 4px; overflow: hidden; } .profile-frame img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(20%); } /* Row container: photo sits beside the name instead of stacked above it */ .sidebar-header { display: flex; align-items: flex-start; gap: 1.2rem; margin-bottom: clamp(0.5rem, 3vh, 2rem); } .sidebar-footer { margin-top: auto; /* The anchor trick! Pushes this whole block to the bottom edge */ display: flex; flex-direction: column; /* Stacks the icons cleanly above the clock text */ gap: 12px; /* Creates some breathing space between icons and text */ } .name-block { flex: 1; } .sidebar h1 { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 1.9rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; color: var(--color-text-strong); margin-bottom: 0.8rem; } .sidebar h1 span { display: block; color: var(--color-text-dim); /* Muted second line, like the reference */ } /* Small divider line under the name, matching the reference layout */ .name-divider { width: 28px; height: 2px; background-color: var(--color-accent-soft); } /* --- Sidebar: Status & Nav --- */ .status-tags { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px dashed var(--color-border); } .status-item { display: block; margin-bottom: 0.4rem; color: var(--color-text); } /* Inline emphasis for proper nouns within the status line (e.g. "UMass Amherst") */ .status-item .accent-text { color: #c2294f; font-weight: bold; text-shadow: 0 0 6px rgba(194, 41, 79, 0.5); /* fixed maroon glow - stays identical in both themes, not a token */ } /* Mobile-only copyright line, styled to match .accent-text above; desktop already shows a copyright in the sidebar footer so this stays hidden there. */ .mobile-copyright { display: block; text-align: right; font-size: 0.85rem; font-weight: bold; color: #c2294f; text-shadow: 0 0 6px rgba(194, 41, 79, 0.5); } .sidebar-nav { margin-top: clamp(0.75rem, 5vh, 3rem); padding-top: clamp(0.5rem, 2.5vh, 1.5rem); } .sidebar-nav a { display: block; color: var(--color-text-dim); text-decoration: none; font-size: 0.9rem; text-transform: uppercase; margin-bottom: clamp(0.25rem, 1.3vh, 0.8rem); transition: color 0.2s; } .sidebar-nav a:hover, .sidebar-nav a:focus-visible, .sidebar-nav a.active { color: var(--color-accent); } .sidebar-nav a:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: 3px; border-radius: 2px; } /* --- Sidebar: Travel Status --- */ .travel-status { margin: 25px 0; padding: 12px 15px; background-color: var(--color-panel-tint); border-left: 3px solid var(--color-accent-soft); margin-top: clamp(0.75rem, 5vh, 3rem); } .travel-header { font-size: 0.85rem; color: var(--color-text-dim); margin-bottom: 6px; } .travel-location { font-size: 1.1rem; font-weight: bold; color: var(--color-text-strong); display: flex; align-items: center; } .travel-date { font-size: 0.85rem; color: var(--color-text-strong); margin-top: 4px; } .travel-itinerary { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--color-border); } .itinerary-item { font-size: 0.85rem; color: var(--color-text); line-height: 1.5; } /* --- Sidebar: Contact Form --- */ .email-header { font-size: 0.85rem; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-top: clamp(0.75rem, 3.5vh, 2rem); margin-bottom: 6px; } .sidebar-email-box { margin-top: clamp(6px, 2.5vh, 15px); margin-bottom: clamp(0.75rem, 3vh, 1.5rem); background-color: var(--color-panel-tint); border: 1px solid var(--color-border); border-radius: 4px; padding: 10px; } .email-input-wrapper { display: flex; gap: 6px; margin-bottom: 6px; } .sidebar-email-box input, .sidebar-email-box textarea, .email-modal-content input, .email-modal-content textarea { width: 100%; background-color: var(--color-panel); border: 1px solid var(--color-border-strong); color: var(--color-text-strong); font-family: 'JetBrains Mono', 'Courier New', Courier, monospace; font-size: 0.8rem; padding: 6px 8px; border-radius: 4px; } .sidebar-email-box input:focus, .sidebar-email-box textarea:focus, .email-modal-content input:focus, .email-modal-content textarea:focus { outline: none; border-color: var(--color-accent-muted); box-shadow: 0 0 8px var(--color-glow); } .sidebar-email-box textarea { resize: none; margin-bottom: 8px; line-height: 1.4; } .btn-send { width: 100%; background: none; color: var(--color-text-strong); border: 1px solid var(--color-border-strong); font-family: 'JetBrains Mono', 'Courier New', Courier, monospace; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 0; border-radius: 4px; cursor: pointer; transition: all 0.2s ease; } .btn-send:hover, .btn-send:focus-visible { border-color: var(--color-accent-muted); color: var(--color-accent); background-color: var(--color-hover-bg); } .btn-send:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: 2px; } .btn-expand { background-color: var(--color-panel); border: 1px solid var(--color-border-strong); border-radius: 4px; padding: 0 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-text-dim); transition: all 0.2s ease; } .btn-expand:hover, .btn-expand:focus-visible { color: var(--color-accent); border-color: var(--color-accent-muted); } .btn-expand:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: 2px; } /* Smooth transition animation for the success button state */ .btn-send.success-state, .btn-send-large.success-state { background-color: #2e7d32 !important; /* Universal "success" green - kept independent of the decorative palette */ color: #ffffff !important; border-color: #2e7d32 !important; font-weight: bold; animation: buttonPulse 0.4s ease-in-out; } @keyframes buttonPulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } /* --- Contact Modal --- */ .email-modal-overlay { display: none; /* Hidden by default, toggled through JS */ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(6, 39, 38, 0.92); /* Evergreen-tinted overlay */ backdrop-filter: blur(4px); z-index: 10000; align-items: center; justify-content: center; } .email-modal-overlay.is-active { display: flex; } .email-modal-content { background-color: var(--color-panel); border: 1px solid var(--color-border); padding: 3rem; width: 90%; max-width: 600px; border-radius: 4px; position: relative; box-shadow: 0 0 30px rgba(0, 0, 0, 0.6); } .email-modal-content h2 { border-bottom: 1px dashed var(--color-border-strong); margin-bottom: 2rem; } .email-modal-content input, .email-modal-content textarea { font-size: 0.9rem; padding: 10px 12px; margin-bottom: 1.2rem; } .btn-send-large { text-decoration: none; color: var(--color-text-strong); background-color: var(--color-panel); border: 1px solid var(--color-border-strong); width: 100%; padding: 0.8rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; font-family: 'JetBrains Mono', 'Courier New', Courier, monospace; cursor: pointer; transition: all 0.2s ease; } .btn-send-large:hover, .btn-send-large:focus-visible { border-color: var(--color-accent-muted); color: var(--color-accent); background-color: var(--color-hover-bg); } .btn-send-large:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: 2px; } .btn-close-modal { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--color-text-dim); font-size: 1.8rem; cursor: pointer; line-height: 1; transition: color 0.2s ease; } .btn-close-modal:hover, .btn-close-modal:focus-visible { color: var(--color-accent); } .btn-close-modal:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: 2px; border-radius: 2px; } /* --- Sidebar: Footer & Social --- */ .social-links { display: flex; align-items: center; gap: 14px; } .social-links a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 4px; /* Bigger tap target than the raw 14px glyph */ margin: -4px; /* ...without changing the visual gap between icons */ border-radius: 4px; } .social-links svg { width: 14px; height: 14px; fill: var(--color-text-dim); transition: fill 0.2s ease-in-out, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); } /* The LeetCode brand mark doesn't fill its viewBox as fully as the others, so it reads visually smaller at matched pixel dimensions; nudged up to compensate. No fill here - it inherits from .social-links svg above so hover stays in sync. */ .leetcode-link svg { width: 16px; height: 16px; } .social-links a:hover svg, .social-links a:focus-visible svg { fill: var(--color-accent-muted); transform: scale(1.15); } .social-links a:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: 2px; } .footer-metadata { padding: 5px 0; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; /* Keeps layout clean if the screen shrinks */ font-size: 0.65rem; color: var(--color-text-dim); } .meta-copyright, .visitor-counter { color: var(--color-text-dim); } #visitor-count { color: var(--color-accent); font-weight: 600; } .meta-slash { margin: 0 15px; color: var(--color-accent-muted); font-weight: normal; } /* --- Sidebar Divider --- */ .sidebar-divider-line { position: fixed; /* Moved out of .sidebar so its own overflow-x:hidden can't clip this */ top: 4rem; left: calc(2rem + 348px); /* sidebar left offset + sidebar width - lines up exactly with the scrollbar */ width: 1px; height: 55vh; background: linear-gradient(to bottom, transparent 0%, var(--color-border-strong) 15%, var(--color-border-strong) 85%, transparent 100%); pointer-events: none; } /* --- Main Content / Typography --- */ .main-content { grid-column-start: 2; padding-top: 6rem; } section { margin-bottom: 4rem; scroll-margin-top: 4rem; /* breathing room above header when jumped to via sidebar anchor links */ } /* Classy, minimal section headers */ h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 4px; color: var(--color-accent); margin-bottom: 1.5rem; font-weight: bold; border-bottom: 1px solid var(--color-border); padding-bottom: 0.5rem; } p { color: var(--color-text); margin-bottom: 1.5rem; font-size: 0.95rem; max-width: 100%; } .text-extrabold { font-weight: 800; color: var(--color-text-strong); } /* --- About --- */ .skills-group { margin-bottom: 1.5rem; } .list-header { color: var(--color-accent); font-size: 0.9rem; margin-bottom: 0.5rem; letter-spacing: 1px; } .tech-list { display: flex; flex-wrap: wrap; gap: 1.5rem; color: var(--color-text-strong); font-size: 0.9rem; margin-top: 1rem; } .tech-node::before { content: "// "; color: var(--color-accent); } /* --- Experience / Timeline --- .time-header / .job-title / .job-date / .company-name / .job-desc are the shared entry primitives, reused as-is by the Athletics & Guitar sections below so every activity entry on the site reads as one consistent system. ---------------------------------- */ .timeline { display: flex; flex-direction: column; gap: 2.2rem; margin-top: 1.5rem; padding-left: 1.5rem; border-left: 2px solid var(--color-border); } .timeline-item { position: relative; } .timeline-item::before { content: ""; position: absolute; left: -1.6rem; top: 0.35rem; width: 9px; height: 9px; border-radius: 50%; background-color: var(--color-accent-muted); box-shadow: 0 0 6px var(--color-glow); } .time-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 1rem; margin-bottom: 0.4rem; } .job-title { color: var(--color-text-strong); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; } .job-date { color: var(--color-text); font-size: 0.8rem; font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; } .company-name { font-size: 0.8rem; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.6rem; } .job-desc { margin-bottom: 0; } /* --- Academic --- */ .academic-tabs { display: flex; gap: 2rem; margin-bottom: 1.5rem; } .academic-tab { background: none; border: none; font-family: inherit; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-text-dim); padding: 0 0 0.5rem; cursor: pointer; transition: color 0.2s; } .academic-tab:hover, .academic-tab:focus-visible { color: var(--color-text-strong); } .academic-tab:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: 2px; } .academic-tab.active { color: var(--color-accent); border-bottom: 2px solid var(--color-accent-muted); } .academic-group { display: none; } .academic-group.active { display: block; } .term-accordion { display: flex; flex-direction: column; border-top: 1px solid var(--color-border); } .term-item { border-bottom: 1px solid var(--color-border); } .term-header { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--color-text); font-family: 'JetBrains Mono', 'Courier New', Courier, monospace; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; padding: 1rem 1.5rem 1rem 0; cursor: pointer; position: relative; transition: color 0.2s; } .term-header::after { content: "+"; position: absolute; right: 0.2rem; top: 1rem; color: var(--color-accent); font-weight: bold; transition: transform 0.3s ease; } .term-header.open::after { transform: rotate(45deg); /* turns the + into an x to show it's expanded */ } .term-header:hover, .term-header:focus-visible, .term-header.open { color: var(--color-text-strong); } .term-header:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: -2px; } .term-body { max-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.9rem; transition: max-height 0.35s ease, padding 0.35s ease; padding-bottom: 0; } .term-body .course-row:first-child { margin-top: 0.5rem; } .term-header.open + .term-body { padding-bottom: 1.2rem; } .course-row { display: flex; flex-wrap: wrap; gap: 1rem; } .course-code { color: var(--color-accent); font-weight: bold; font-size: 0.85rem; flex: 0 0 190px; /* This locks the code width cleanly without stretching rows */ } .course-name { color: var(--color-text); font-size: 0.85rem; } .course-empty { color: var(--color-text-dim); font-style: italic; font-size: 0.85rem; } .course-note { color: var(--color-text-dim); font-style: italic; font-size: 0.8rem; margin-bottom: 0.8rem; } /* --- Athletics & Guitar (shared media layout) --- .media-entry / .media-frame / .media-info / .media-col are the shared, activity-agnostic layout primitives; .guitar-* classes below are additive modifiers scoped to the Guitar section only. ---------------------------------- */ .media-entry { display: flex; gap: 2rem; align-items: flex-start; } .media-col { flex: 0 0 280px; } .media-frame { border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; background-color: var(--color-panel); } .media-frame img { width: 100%; height: 100%; display: block; object-fit: cover; } .media-info { flex: 1; min-width: 0; } .media-caption { margin-top: 0.6rem; margin-bottom: 0; font-size: 0.8rem; font-style: italic; color: var(--color-text-dim); text-align: center; } /* Gives stacked photos within the same .media-col (e.g. Squash's two images) breathing room */ .media-caption + .media-frame { margin-top: 1.5rem; } /* Small citation-style callout under a .job-desc, e.g. an award writeup */ .award-note { margin-top: 0.5rem; padding: 12px 15px; background-color: var(--color-panel-tint); border-left: 3px solid var(--color-accent-soft); } .award-note .list-header { margin-bottom: 0.4rem; } .award-desc { font-size: 0.85rem; font-style: italic; color: var(--color-text); margin-bottom: 0; } /* Guitar section: clip row sits above the write-up, full width, instead of beside it */ .guitar-layout { display: flex; flex-direction: column; gap: 1.5rem; } /* Clips are portrait phone recordings (9:16), laid out side by side; wraps on narrow screens */ .guitar-videos { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.5rem; } .guitar-video-block { flex: 0 1 220px; max-width: 220px; } .guitar-video video { width: 100%; aspect-ratio: 9 / 16; display: block; background-color: #000000; } /* --- Projects --- */ .projects-container { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; } .nav-arrow { background: none; border: none; color: var(--color-accent); font-size: 1.8rem; cursor: pointer; padding: 1rem; transition: color 0.2s ease; } .nav-arrow:hover, .nav-arrow:focus-visible { color: var(--color-text-strong); } .nav-arrow:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: 2px; border-radius: 4px; } .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; width: 100%; } .project-card { background-color: var(--color-panel); border: 1px solid var(--color-border); border-radius: 4px; padding: 1.5rem; min-height: 200px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.2s ease; } .project-card:hover { border-color: var(--color-accent-muted); box-shadow: 0 0 10px var(--color-glow); transform: translateY(-2px); } .project-card h3 { font-size: 1rem; color: var(--color-text-strong); margin-bottom: 0.6rem; text-transform: uppercase; letter-spacing: 1px; } .project-card p { font-size: 0.8rem; color: var(--color-text-dim); line-height: 1.5; } .project-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-accent); background-color: var(--color-accent-tint); border: 1px solid var(--color-border); border-radius: 3px; padding: 3px 8px; } .project-links { margin-top: 1rem; } /* --- Buttons --- */ .btn-primary { display: inline-block; text-decoration: none; color: var(--color-accent); background-color: transparent; border: 1px solid var(--color-border-strong); padding: 0.6rem 1.4rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; border-radius: 4px; transition: all 0.2s ease; } .btn-primary:hover, .btn-primary:focus-visible { border-color: var(--color-accent-muted); color: var(--color-text-strong); background-color: var(--color-hover-bg); } .btn-primary:focus-visible { outline: 2px solid var(--color-accent-muted); outline-offset: 2px; } /* --- Responsive --- */ @media (max-width: 1150px) and (min-width: 901px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 900px) { .media-entry { flex-direction: column; } .media-col { flex-basis: auto; width: 100%; max-width: 320px; } .portfolio-layout { display: flex; /* Switches from grid to flex to support the sidebar's sticky-footer trick when it's no longer position:fixed */ flex-direction: column; gap: 2rem; padding-left: 0; min-height: 100vh; /* Forces the layout wrapper to stretch the full height of the phone */ } .sidebar-divider-line { display: none; } .sidebar { position: relative; width: 100%; display: flex; flex-direction: column; height: auto; top: 0; left: 0; border-right: none; } .sidebar-inner { width: 100%; /* Desktop pins this to 300px for the scrollbar trick; mobile just wants full width */ height: auto; display: flex; flex-direction: column; } /* Hidden on mobile: nav links, travel status, and the contact form all drop out so the icon row (next visible child after status-tags) sits directly under the status line instead of at the bottom of the screen. */ .sidebar-nav, .travel-status, #unifiedEmailForm { display: none; } .sidebar-footer { margin-top: 1.5rem; /* No longer pinned to the screen bottom - just breathing room under status-tags */ padding-bottom: 1.5rem; gap: 16px; } .social-links { gap: 26px; } .social-links svg { width: 22px; height: 22px; } .leetcode-link svg { width: 24px; height: 24px; } .meta-copyright, .meta-slash:has(+ .meta-copyright) { display: none; } .main-content { margin-top: 0 !important; padding-top: 0; /* Desktop's 6rem offset (to clear the fixed sidebar) leaves dead space now that the sidebar is compact */ } .footer-metadata{ font-size: 0.85rem; } .projects-grid { grid-template-columns: 1fr; } body { padding: 2rem 1.25rem; } }