88 lines
5.5 KiB
CSS
88 lines
5.5 KiB
CSS
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
:root {
|
|
--bg: #0b0d0f;
|
|
--surface: #111417;
|
|
--surface-2: #171b1f;
|
|
--text: #e7ebe8;
|
|
--muted: #99a39e;
|
|
--line: #29302e;
|
|
--accent: #8fe388;
|
|
--accent-dark: #162319;
|
|
--max: 1120px;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; }
|
|
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,system-ui,sans-serif; line-height:1.7; }
|
|
a { color:var(--text); text-decoration:none; }
|
|
a:hover { color:var(--accent); }
|
|
.container { width:min(calc(100% - 40px), var(--max)); margin:auto; }
|
|
.site-header { border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(11,13,15,.94); backdrop-filter:blur(12px); z-index:10; }
|
|
.nav { min-height:70px; display:flex; align-items:center; gap:28px; }
|
|
.brand { font:500 15px "IBM Plex Mono",monospace; white-space:nowrap; }
|
|
.brand strong, .brand span { color:var(--accent); }
|
|
.nav nav { display:flex; gap:20px; margin-left:auto; }
|
|
.nav nav a, .nav-links a { font:400 12px "IBM Plex Mono",monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
|
|
.nav-links { display:flex; gap:12px; padding-left:12px; border-left:1px solid var(--line); }
|
|
.hero { padding:110px 0 80px; max-width:900px; }
|
|
.eyebrow, .status, .project-index { font:500 11px "IBM Plex Mono",monospace; color:var(--accent); text-transform:uppercase; letter-spacing:.12em; }
|
|
.hero h1 { font-size:clamp(42px,8vw,82px); line-height:1; margin:12px 0; letter-spacing:-.055em; }
|
|
.hero-role { font-size:clamp(25px,4vw,42px); margin:0; font-weight:600; }
|
|
.hero-subtitle { font:500 14px "IBM Plex Mono",monospace; color:var(--accent); margin:12px 0 25px; }
|
|
.hero-copy { max-width:760px; color:var(--muted); font-size:18px; }
|
|
.hero-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
|
|
.button { display:inline-block; border:1px solid var(--line); padding:10px 15px; font:500 12px "IBM Plex Mono",monospace; text-transform:uppercase; }
|
|
.button:hover { border-color:var(--accent); }
|
|
.button-primary { background:var(--accent); color:#0b0d0f; border-color:var(--accent); }
|
|
.button-primary:hover { color:#0b0d0f; }
|
|
.prose { color:#c9cfcb; max-width:800px; }
|
|
.prose h2 { margin-top:48px; color:var(--text); }
|
|
.prose h3 { color:var(--text); margin-top:30px; }
|
|
.prose code, pre { font-family:"IBM Plex Mono",monospace; }
|
|
.prose code { background:var(--surface-2); padding:2px 5px; }
|
|
.prose pre { background:#070809; border:1px solid var(--line); padding:20px; overflow:auto; }
|
|
.prose blockquote { margin:30px 0; padding:15px 20px; border-left:2px solid var(--accent); color:var(--muted); background:var(--surface); }
|
|
.page-header { padding:75px 0 45px; border-bottom:1px solid var(--line); margin-bottom:45px; }
|
|
.page-header h1 { font-size:clamp(40px,6vw,64px); line-height:1.05; margin:8px 0; letter-spacing:-.04em; }
|
|
.lead { color:var(--muted); font-size:18px; max-width:760px; }
|
|
.engineering-grid, .project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:25px 0 65px; }
|
|
.engineering-grid article, .project-card, .lab-card { border:1px solid var(--line); background:var(--surface); padding:22px; }
|
|
.engineering-grid span { font:12px "IBM Plex Mono",monospace; color:var(--accent); }
|
|
.engineering-grid h3 { margin:10px 0 4px; }
|
|
.engineering-grid p, .project-card p, .lab-card p { color:var(--muted); margin:0; }
|
|
.project-card { min-height:230px; display:flex; flex-direction:column; }
|
|
.project-top { display:flex; justify-content:space-between; margin-bottom:25px; }
|
|
.project-index { color:#59635e; }
|
|
.project-card h2 { font-size:22px; margin:0 0 8px; }
|
|
.project-card p { margin-bottom:18px; }
|
|
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
|
|
.tags span { font:11px "IBM Plex Mono",monospace; color:#aab3ae; border:1px solid var(--line); padding:3px 7px; }
|
|
.tags-large { margin:20px 0; }
|
|
.project-link { font:12px "IBM Plex Mono",monospace; color:var(--accent); margin-top:16px; }
|
|
.timeline { border-left:1px solid var(--line); }
|
|
.timeline-item { display:grid; grid-template-columns:230px 1fr; gap:35px; padding:30px 0 30px 28px; position:relative; }
|
|
.timeline-item:before { content:""; width:7px; height:7px; background:var(--accent); position:absolute; left:-4px; top:39px; }
|
|
.timeline-item h2 { margin:0 0 3px; }
|
|
.muted { color:var(--muted); }
|
|
.notes-list { display:grid; gap:0; }
|
|
.notes-list article { display:grid; grid-template-columns:140px 1fr; gap:20px; padding:22px 0; border-bottom:1px solid var(--line); }
|
|
.notes-list span { font:11px "IBM Plex Mono",monospace; color:var(--muted); }
|
|
.notes-list h2 { margin:0; font-size:20px; }
|
|
.notes-list p { grid-column:2; margin:0; color:var(--muted); }
|
|
.site-footer { margin-top:100px; border-top:1px solid var(--line); }
|
|
.footer-inner { min-height:80px; display:flex; justify-content:space-between; align-items:center; color:var(--muted); font:11px "IBM Plex Mono",monospace; }
|
|
@media(max-width:850px) {
|
|
.nav nav { display:none; }
|
|
.nav-links { margin-left:auto; }
|
|
.engineering-grid, .project-grid { grid-template-columns:1fr 1fr; }
|
|
.timeline-item { grid-template-columns:1fr; gap:5px; }
|
|
.notes-list article { grid-template-columns:1fr; }
|
|
.notes-list p { grid-column:auto; }
|
|
}
|
|
@media(max-width:560px) {
|
|
.container { width:min(calc(100% - 28px), var(--max)); }
|
|
.hero { padding:75px 0 55px; }
|
|
.engineering-grid, .project-grid { grid-template-columns:1fr; }
|
|
.footer-inner { flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; }
|
|
}
|
