/* ============================================================ Modern / soft personal site Edit the CSS variables below to re-theme quickly. ============================================================ */ :root { --accent: #6366f1; /* indigo accent */ --accent-soft: #eef0ff; --bg: #fbfbfd; --surface: #ffffff; --text: #1c1c22; --text-muted: #6b6b78; --border: #ececf1; --sidebar-w: 240px; --radius: 14px; --shadow: 0 1px 2px rgba(20, 20, 40, 0.04), 0 8px 24px rgba(20, 20, 40, 0.05); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Dark theme — applied when */ html[data-theme="dark"] { --accent: #8b8dfb; --accent-soft: #23233a; --bg: #0e0e12; --surface: #16161c; --text: #ededf2; --text-muted: #9a9aa8; --border: #26262f; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } html, body { transition: background 0.2s ease, color 0.2s ease; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* ==================== SIDEBAR ==================== */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh; padding: 2rem 1.5rem; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; } .brand { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; margin-bottom: 2.5rem; padding: 0 0.75rem; } .sidebar nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .sidebar nav a { display: block; padding: 0.5rem 0.75rem; border-radius: 10px; color: var(--text-muted); font-weight: 500; transition: background 0.15s ease, color 0.15s ease; } .sidebar nav a:hover { background: var(--accent-soft); color: var(--accent); } .sidebar nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: 0.4rem; padding-top: 1.5rem; border-top: 1px solid var(--border); font-size: 0.9rem; } .sidebar-footer a { color: var(--text-muted); transition: color 0.15s ease; } .sidebar-footer a:hover { color: var(--accent); } .theme-toggle { position: fixed; top: 1.25rem; right: 1.5rem; z-index: 50; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-muted); cursor: pointer; box-shadow: var(--shadow); transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle svg { width: 18px; height: 18px; } .colophon { margin-top: 1.25rem; font-size: 0.78rem; color: var(--text-muted); opacity: 0.8; } /* ==================== INTRO (centered) ==================== */ .intro { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; align-items: center; padding: 4rem 4rem; } .intro-inner { width: 100%; max-width: 600px; text-align: left; } .avatar { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; object-position: 30% center; background: var(--accent-soft); margin-bottom: 1.5rem; } .intro h1 { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 1.25rem; } .tagline { margin: 0.2rem 0; color: var(--text-muted); } .tagline .label { color: var(--text); font-weight: 600; } /* content blocks */ .block { text-align: left; margin-top: 2rem; } .block h2 { font-size: 1.15rem; font-weight: 600; text-transform: lowercase; letter-spacing: 0; color: var(--accent); margin: 0 0 0.75rem; } .block ul { margin: 0; padding-left: 1.1rem; } .block li { margin: 0.35rem 0; } /* link row */ .links { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: flex-start; } .links a { font-size: 0.9rem; font-weight: 500; color: var(--text-muted); transition: color 0.15s ease; } .links a:hover { color: var(--accent); } /* ==================== SECONDARY PAGES ==================== */ .page { margin-left: var(--sidebar-w); min-height: 100vh; padding: 4rem 4rem; display: flex; justify-content: flex-start; } .page-inner { width: 100%; max-width: 680px; } .page-inner h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.25rem; } .page-inner h1::after { content: ""; display: block; width: 48px; height: 3px; border-radius: 3px; background: var(--accent); margin: 0.75rem 0 2rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); margin-bottom: 1rem; transition: transform 0.15s ease, box-shadow 0.15s ease; } .card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,20,40,0.05), 0 12px 32px rgba(20,20,40,0.08); } .card h3 { margin: 0 0 0.35rem; font-size: 1.15rem; } .card .meta { color: var(--text-muted); font-size: 0.85rem; margin: 0 0 0.5rem; } .card p { margin: 0; color: var(--text-muted); } /* ==================== MOBILE NAV ==================== */ .nav-toggle { display: none; position: fixed; top: 1rem; left: 1rem; z-index: 50; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; padding: 0; flex-direction: column; gap: 4px; align-items: center; justify-content: center; } .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; } @media (max-width: 720px) { .nav-toggle { display: flex; } .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; z-index: 40; box-shadow: var(--shadow); } .sidebar.open { transform: translateX(0); } .intro, .page { margin-left: 0; } .intro { padding-top: 5rem; } .page { padding-top: 5rem; } }