/* ============ THEME & TOKENS ============ */ :root { /* Dark as baseline */ --bg: #0b0f14; --panel: #111722; --panel-2: #121826; --text: #e9eef5; --muted: #a7b0be; --brand: #5b9dff; --accent: #4de0c6; --ring: #27456b; --card: #0f1520; --border: rgba(255, 255, 255, .08); --shadow: 0 0.625rem 1.5625rem rgba(0, 0, 0, .35); --radius: 1rem; --radius-sm: 0.75rem; --maxw: 68.75rem; /* UA hint for form controls/scrollbars */ color-scheme: dark; } /* System light mode (only if there is NO manual override on :root) */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #f8fafc; --panel: #ffffff; --panel-2: #f8fafc; --text: #0b1321; --muted: #485062; --brand: #2c6bed; --accent: #15b39a; --ring: #cfe0ff; --card: #ffffff; --border: rgba(0, 0, 0, .08); --shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, .12); color-scheme: light; } } /* Manual overrides driven by JS via */ :root[data-theme="light"] { --bg: #f8fafc; --panel: #ffffff; --panel-2: #f8fafc; --text: #0b1321; --muted: #485062; --brand: #2c6bed; --accent: #15b39a; --ring: #cfe0ff; --card: #ffffff; --border: rgba(0, 0, 0, .08); --shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, .12); color-scheme: light; } :root[data-theme="dark"] { /* vars already match baseline; this keeps UA bits aligned */ color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font: 1rem/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; color: var(--text); background: radial-gradient(75rem 37.5rem at 10% -10%, rgba(91, 157, 255, .12), transparent 60%), radial-gradient(62.5rem 31.25rem at 110% 10%, rgba(77, 224, 198, .10), transparent 60%), var(--bg); } /* ============ LAYOUT ============ */ .wrap { display: grid; grid-template-columns: 17.5rem 1fr; gap: 1.75rem; max-width: calc(var(--maxw) + 17.5rem + 1.75rem); margin: 0 auto; padding: 1.75rem; } aside { position: sticky; top: 1.25rem; height: fit-content; } main { min-width: 0; } /* Sidebar */ .card { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .sidebar { padding: 1.375rem; } .avatar { width: 5.25rem; height: 5.25rem; border-radius: 1.5rem; background: linear-gradient(135deg, var(--brand), var(--accent)); display: inline-grid; place-items: center; color: white; font-weight: 700; letter-spacing: 0.03125rem; } .name { font-size: 1.3rem; margin: 0.875rem 0 0.375rem; } .role { color: var(--muted); margin: 0 0 0.875rem; } .contact { display: grid; gap: 0.625rem; margin: 1.125rem 0; } .contact { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--text); padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: 0.75rem; background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .02)); } nav { margin-top: 1.125rem; display: grid; gap: 0.375rem; } #toc div { cursor: pointer; padding: 0.5rem; } .active { border-bottom: 10px white; background: var(--text); color: var(--card); font-weight: bold; } .theme-toggle { margin-top: 1.125rem; display: flex; gap: 0.625rem; align-items: center; } .switch { position: relative; width: 3rem; height: 1.75rem; background: #00000033; border: 1px solid var(--border); border-radius: 50rem; cursor: pointer; } .switch .dot { position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.375rem; height: 1.375rem; background: white; border-radius: 50%; transition: transform .25s ease; } .switch.active .dot { transform: translateX(1.25rem); } /* Header (mobile) */ .mobile-top { display: none; } /* Content */ section { scroll-margin-top: 5.625rem; } .section { padding: 1.625rem; margin-bottom: 1.5rem; } .section h2 { margin: 0 0 0.375rem; } .kicker { color: var(--muted); margin: 0 0 1.125rem; font-size: .95rem; } .grid { display: grid; gap: 1rem; } .project { display: inline-block; grid-column: span 4; padding: 1.125rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: linear-gradient(180deg, var(--card), transparent); margin: 0.5rem 0 0.5rem 0; width: 100%; } .project h3 { margin: 0 0 0.375rem; font-size: 1.05rem; } .badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.625rem; } .badge { font-size: .85rem; padding: 0.375rem 0.625rem; border-radius: 50rem; border: 1px solid var(--border); background: rgba(255, 255, 255, .04); } .row { display: flex; gap: 0.875rem; align-items: flex-start; } .muted { color: var(--muted); } /* Timeline */ .timeline { position: relative; padding-left: 1.625rem; } .timeline:before { content: ""; position: absolute; left: 0.625rem; top: 0.25rem; bottom: 0.25rem; width: 0.125rem; background: linear-gradient(var(--brand), var(--accent)); } .t-item { position: relative; padding: 0.75rem; margin-bottom: 0.625rem; border: 1px solid var(--border); background: linear-gradient(180deg, var(--card), transparent); border-radius: 0.75rem; } /* Utilities */ .pill { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--border); padding: 0.375rem 0.625rem; border-radius: 50rem; background: rgba(255, 255, 255, .04); } .actions { display: flex; gap: 0.625rem; flex-wrap: wrap; } /* Footer */ footer { opacity: .7; text-align: center; padding: 1.125rem; } /* Responsive */ @media (max-width: 64rem) { .wrap { grid-template-columns: 15rem 1fr; } } @media (max-width: 53.75rem) { .wrap { grid-template-columns: 1fr; gap: 1.125rem; padding: 1.125rem; } aside { position: static; } .mobile-top { position: fixed; display: flex; width: 100%; top: 0; z-index: 50; background: var(--panel); border: 1px solid var(--border); border-radius: 0.875rem; padding: 0.625rem 0.75rem; align-items: center; gap: 0.625rem; } main { margin-top: 9rem; } .mobile-top .title { font-weight: 700; } .mobile-top .spacer { flex: 1; } .drawer { display: block; position: fixed; top: 0; right: 0; z-index: 1000; width: 100%; } .drawer.open { display: block; margin-top: 0.75rem; } nav { display: block; margin: 0; } .active { border-bottom: 1rem var(--text); background: none; text-decoration: underline; color: var(--text); font-weight: bold; } #toc div { display: inline-flex; padding: 0.5rem; cursor: pointer; } #toc { margin: 0.2rem 0 0 0; text-align: center; } .avatar { width: 4rem; height: 4rem; border-radius: 1.125rem; } .theme-toggle { margin-top: 1.125rem; position: fixed; top: 0; right: 1rem; align-items: center; } .name { font-size: 1rem; margin: 0; } .role { margin: 0; } .pill { font-size: 0.8rem; display: inline; align-items: center; border: none; padding: 0; background: none; } #header { border-radius: 0; } } .tag { display: inline-block; margin: 0.1rem; } img { border: 1px solid var(--border); width: 100%; max-width: 40rem; } .firstSection { margin-top: 3rem; }