/* style.css --------- This file intentionally stays small and readable. How theming works: - We define colors as CSS variables in :root (light theme). - When is set, we override those variables. - The rest of the CSS NEVER hard-codes colors; it uses the variables. Layout goal: - Match the reference site: a narrow centered column with generous padding. - The clock + theme toggle are fixed to the top-right of the viewport. */ /* ---------------------------------------- Theme variables (LIGHT defaults) ---------------------------------------- */ :root { --font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; /* Light theme (matches reference: white background, neutral grays) */ --bg-color: #ffffff; --text-color: #111111; --text-muted: #525252; --border-color: #eaeaea; --hover-bg: #fafafa; --icon-bg: #fafafa; /* Card/overlay */ --card-bg: #ffffff; --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); } /* ---------------------------------------- Theme variables (DARK overrides) - Pitch-black background as requested ---------------------------------------- */ [data-theme="dark"] { --bg-color: #000000; --text-color: #ffffff; --text-muted: #a3a3a3; --border-color: #262626; --hover-bg: #121212; --icon-bg: #121212; --card-bg: #000000; --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.50); } /* ---------------------------------------- Base reset - box-sizing makes sizing predictable ---------------------------------------- */ * { box-sizing: border-box; } /* html/body background is set so the viewport always matches the theme. This prevents odd "strips" if the page is shorter than the viewport. */ html { background-color: var(--bg-color); color: var(--text-color); } /* Global typography defaults */ body { min-height: 100vh; margin: 0; background-color: var(--bg-color); color: var(--text-color); font-family: var(--font-family); font-size: 14px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Keep transitions subtle and consistent. NOTE: Only color/border/shadow transitions are enabled globally. */ *, *::before, *::after { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } /* ---------------------------------------- Layout container - max-width matches Tailwind's `max-w-md` (448px) - padding matches Tailwind's `p-8` (32px) ---------------------------------------- */ .container { max-width: 448px; margin: 0 auto; padding: 2rem; } /* ---------------------------------------- Header utilities (clock + theme toggle) - fixed so it stays at the top-right while scrolling ---------------------------------------- */ header { position: fixed; top: 2rem; right: 2rem; display: flex; align-items: center; gap: 0.75rem; color: var(--text-muted); z-index: 1000; } /* The live clock text */ .time { font-size: 0.85rem; } /* Theme toggle button - small round button - uses variables so it looks correct in both themes */ #theme-toggle { width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid var(--border-color); background-color: var(--icon-bg); color: var(--text-color); cursor: pointer; display: grid; place-items: center; } #theme-toggle:hover { background-color: var(--hover-bg); } /* ---------------------------------------- Profile section ---------------------------------------- */ .profile { display: flex; align-items: center; gap: 1.25rem; margin: 0; } /* Avatar image */ .avatar { width: 56px; height: 56px; border-radius: 999px; object-fit: cover; } /* Main name/title */ .profile-text h1 { margin: 0; font-size: 1.1rem; font-weight: 500; color: var(--text-color); } /* One-line subtitle under the name */ .profile-text .subtitle { margin: 0.2rem 0 0; color: var(--text-muted); font-size: 0.85rem; } /* Section titles like CURRENTLY / ABOUT / PROJECTS */ h2 { margin: 2rem 0 0.75rem; font-size: 0.85rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } /* ---------------------------------------- CURRENTLY section ---------------------------------------- */ .role-header { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; } .role-header h3 { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--text-color); } /* Muted secondary text used for dates/locations */ .date { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--text-muted); } .prev-roles-section { margin-top: 0.75rem; } /* Clickable label that toggles the collapsible previous roles */ .prev-roles-toggle { margin: 0; color: var(--text-muted); font-size: 0.85rem; cursor: pointer; user-select: none; } /* Collapsible content container (accordion) */ .prev-roles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-left: 1.25rem; margin: 0.75rem 0 0; border-left: 1px solid var(--border-color); max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.35s ease, opacity 0.35s ease; } .prev-roles-grid.expanded { max-height: 200px; opacity: 1; } .role-col h4 { margin: 0; font-size: 0.95rem; font-weight: 500; color: var(--text-color); } .text-right { text-align: left; } /* ---------------------------------------- ABOUT section ---------------------------------------- */ .about p { margin: 0; color: var(--text-color); font-size: 0.95rem; } /* ---------------------------------------- PROJECTS list ---------------------------------------- */ .project-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.25rem; } .project-list li a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.4rem 0.5rem; margin: 0 -0.5rem; border-radius: 8px; text-decoration: none; color: var(--text-color); } .project-list li a:hover { background-color: var(--hover-bg); } .project-left { display: inline-flex; align-items: center; gap: 0.75rem; } /* Small square icon background (emoji/mini-icon) */ .icon-box { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background-color: var(--icon-bg); border: 1px solid var(--border-color); font-size: 0.9rem; } /* Small arrow button on the right */ .arrow-box { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background-color: var(--border-color); color: var(--text-color); font-size: 0.8rem; } .project-list li a:hover .arrow-box { background-color: var(--text-color); color: var(--bg-color); } /* ---------------------------------------- Social links row ---------------------------------------- */ .socials { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2.5rem; } .socials a { position: relative; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); } .socials a:hover { color: var(--text-color); } /* Tooltip: small label shown when hovering a social icon */ .socials a::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-6px); background-color: var(--text-color); color: var(--bg-color); padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; } .socials a:hover::after { opacity: 1; } /* ---------------------------------------- Hover card (project preview) - script.js sets display/opacity/position ---------------------------------------- */ #hover-card { position: fixed; display: none; opacity: 0; width: 320px; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--card-shadow); overflow: hidden; pointer-events: none; z-index: 9999; transform: translateY(-50%) scale(0.95); transition: opacity 0.2s ease, transform 0.2s ease; } #hover-card-img { width: 100%; height: 180px; object-fit: cover; display: block; border-bottom: 1px solid var(--border-color); } .hover-card-content { padding: 1rem; } .hover-card-title { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-weight: 500; color: var(--text-color); } #hover-card-desc { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; } /* Small-screen polish: reduce padding and tuck header in */ @media (max-width: 520px) { .container { padding: 1.5rem; } header { top: 1.5rem; right: 1.5rem; } }