/* ============================================================ Zeke Lares — Portfolio Design system: "Engineering Exec" Space Grotesk (display) · IBM Plex Sans (body) · JetBrains Mono (data) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ---------- Tokens ---------- */ :root { --font-display: 'Space Grotesk', system-ui, sans-serif; --font-body: 'IBM Plex Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Dark theme (default) */ --bg: #0b0c0f; --bg-2: #101217; --surface: #14161c; --surface-2: #181b22; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --text: #f3f4f6; --text-muted: #9aa0ac; --text-faint: #5f6573; /* Accent — electric blue */ --accent-h: 255; --accent: oklch(0.68 0.13 var(--accent-h)); --accent-bright: oklch(0.76 0.14 var(--accent-h)); --accent-dim: oklch(0.68 0.13 var(--accent-h) / 0.14); --accent-line: oklch(0.68 0.13 var(--accent-h) / 0.35); --accent-contrast: #08090c; --maxw: 1180px; --pad: clamp(20px, 5vw, 64px); --radius: 14px; --radius-sm: 9px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } [data-theme="light"] { /* Theme is locked to dark + blue; light palette retained but unused. */ --bg: #f4f2ec; --bg-2: #eceae1; --surface: #fbfaf6; --surface-2: #f4f2ec; --border: rgba(20, 18, 14, 0.12); --border-strong: rgba(20, 18, 14, 0.22); --text: #161512; --text-muted: #5d5950; --text-faint: #908a7e; --accent: oklch(0.55 0.15 var(--accent-h)); --accent-bright: oklch(0.48 0.16 var(--accent-h)); --accent-dim: oklch(0.55 0.15 var(--accent-h) / 0.12); --accent-line: oklch(0.55 0.15 var(--accent-h) / 0.4); --accent-contrast: #ffffff; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; /* Paint the themed canvas on with priority: some preview hosts inject `html, body { background: transparent }`, which would otherwise let a dark backdrop show through. */ background: var(--bg) !important; transition: background 0.5s var(--ease); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; transition: background 0.5s var(--ease), color 0.5s var(--ease); } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--accent); color: var(--accent-contrast); } /* ---------- Layout helpers ---------- */ .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } .section { padding-block: clamp(72px, 11vw, 150px); position: relative; } .section--tight { padding-block: clamp(56px, 8vw, 110px); } .eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 12px; } .eyebrow .idx { color: var(--accent); } .eyebrow::after { content: ""; width: clamp(28px, 8vw, 64px); height: 1px; background: var(--border-strong); } .section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: clamp(40px, 6vw, 72px); } .section-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 5vw, 50px); letter-spacing: -0.02em; line-height: 1.05; max-width: 18ch; } .section-head p { color: var(--text-muted); max-width: 56ch; font-size: 17px; } /* ---------- Reveal animation ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.16s; } .reveal[data-delay="3"] { transition-delay: 0.24s; } .reveal[data-delay="4"] { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================ NAV ============================================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 16px var(--pad); background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); border-bottom: 1px solid transparent; transition: border-color 0.4s var(--ease), background 0.4s var(--ease); } .nav.scrolled { border-bottom-color: var(--border); } .nav__brand { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 11px; } .nav__brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-dim); } .nav__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 1px solid var(--border-strong); box-shadow: 0 0 0 3px var(--accent-dim); } .nav__links { display: flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 13px; } .nav__links a { color: var(--text-muted); padding: 8px 14px; border-radius: 7px; white-space: nowrap; transition: color 0.2s, background 0.2s; } .nav__links a:hover { color: var(--text); background: var(--surface); } .nav__right { display: flex; align-items: center; gap: 10px; } .nav__burger { display: none; width: 38px; height: 38px; place-items: center; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } /* Mobile drawer */ .mobile-drawer { position: fixed; inset: 0; z-index: 99; background: var(--bg); display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: var(--pad); transform: translateX(100%); transition: transform 0.45s var(--ease); } .mobile-drawer.open { transform: none; } .mobile-drawer a { font-family: var(--font-display); font-weight: 600; font-size: clamp(30px, 9vw, 46px); letter-spacing: -0.02em; color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--border); } .mobile-drawer a:active { color: var(--accent); } @media (max-width: 880px) { .nav__links { display: none; } .nav__burger { display: grid; } } /* ============================================================ HERO ============================================================ */ .hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding-top: 88px; overflow: hidden; } #thermal { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: 0.9; } .hero::after { /* vignette so text stays legible over the grid */ content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(120% 80% at 18% 40%, color-mix(in srgb, var(--bg) 30%, transparent) 0%, var(--bg) 72%), linear-gradient(to bottom, transparent 60%, var(--bg) 100%); pointer-events: none; } .hero__inner { position: relative; z-index: 2; width: 100%; } .hero__text { min-width: 0; } .hero__status { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.06em; color: var(--text-muted); padding: 7px 14px 7px 12px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); margin-bottom: 34px; } .hero__status .pulse { width: 8px; height: 8px; border-radius: 50%; background: oklch(0.78 0.16 150); box-shadow: 0 0 0 0 oklch(0.78 0.16 150 / 0.6); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 oklch(0.78 0.16 150 / 0.55); } 70% { box-shadow: 0 0 0 9px oklch(0.78 0.16 150 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.78 0.16 150 / 0); } } .hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(46px, 9.5vw, 128px); line-height: 0.92; letter-spacing: -0.035em; margin-bottom: 28px; } .hero h1 .line { display: block; overflow: hidden; } .hero h1 .accent { color: var(--accent); } .hero__lead { font-size: clamp(18px, 2.4vw, 24px); color: var(--text-muted); max-width: 46ch; line-height: 1.45; margin-bottom: 40px; } .hero__lead strong { color: var(--text); font-weight: 600; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 13.5px; letter-spacing: 0.02em; padding: 13px 20px; border-radius: 9px; border: 1px solid var(--border-strong); color: var(--text); background: var(--surface); cursor: pointer; transition: transform 0.18s var(--ease), background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; } .btn:hover { transform: translateY(-2px); border-color: var(--text-faint); } .btn--primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); font-weight: 500; } .btn--primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); } .btn svg { width: 16px; height: 16px; } .hero__scroll { position: absolute; bottom: 30px; left: var(--pad); z-index: 2; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); display: flex; align-items: center; gap: 12px; } .hero__scroll .bar { width: 1px; height: 40px; background: linear-gradient(var(--accent), transparent); } /* ============================================================ METRICS / IMPACT ============================================================ */ .metrics { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); } .metrics__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); } .metric { background: var(--bg-2); padding: clamp(28px, 4vw, 48px) clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 10px; transition: background 0.3s; } .metric:hover { background: var(--surface); } .metric__num { font-family: var(--font-display); font-weight: 600; font-size: clamp(38px, 5.5vw, 64px); letter-spacing: -0.03em; line-height: 1; color: var(--text); } .metric__num .suffix { color: var(--accent); } .metric__label { font-size: 14px; color: var(--text-muted); line-height: 1.4; } .metric__from { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); letter-spacing: 0.04em; margin-top: 2px; } @media (max-width: 880px) { .metrics__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .metrics__grid { grid-template-columns: 1fr; } } /* ============================================================ ABOUT ============================================================ */ .about__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(40px, 7vw, 88px); align-items: start; } .about__body p { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.55; letter-spacing: -0.01em; color: var(--text); } .about__body p + p { margin-top: 26px; } .about__body .muted { color: var(--text-muted); font-size: clamp(17px, 2vw, 19px); } .about__body em { color: var(--accent); font-style: normal; } .about__meta { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; } .about__meta .row { display: flex; justify-content: space-between; gap: 12px; padding: 13px 16px; font-family: var(--font-mono); font-size: 13px; border-bottom: 1px solid var(--border); } .about__meta .row:last-child { border-bottom: none; } .about__meta .row .k { color: var(--text-faint); } .about__meta .row .v { color: var(--text); text-align: right; } @media (max-width: 820px) { .about__grid { grid-template-columns: 1fr; } } /* ============================================================ TIMELINE ============================================================ */ .timeline { position: relative; display: flex; flex-direction: column; } .job { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px); padding: clamp(28px, 4vw, 44px) 0; border-top: 1px solid var(--border); position: relative; } .job:last-child { border-bottom: 1px solid var(--border); } .job__meta { flex: 0 0 230px; display: flex; flex-direction: column; gap: 8px; } .job__years { font-family: var(--font-mono); font-size: 13px; color: var(--accent); letter-spacing: 0.04em; } .job__co { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -0.01em; } .job__role { font-size: 14.5px; color: var(--text-muted); } .job__tag { align-self: flex-start; margin-top: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); background: var(--accent-dim); padding: 4px 9px; border-radius: 6px; } .job__points { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; max-width: 640px; } .job__point { position: relative; padding-left: 22px; font-size: 16px; color: var(--text-muted); line-height: 1.55; } .job__point::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; border-radius: 2px; background: var(--border-strong); transition: background 0.25s; } .job:hover .job__point::before { background: var(--accent); } .job__point strong { color: var(--text); font-weight: 600; } .job__point .data { font-family: var(--font-mono); color: var(--text); font-size: 14.5px; } @media (max-width: 760px) { .job { gap: 18px; } .job__meta { flex-basis: 100%; } } /* ============================================================ SKILLS ============================================================ */ .skills__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; } .skillset { border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; background: var(--surface); transition: border-color 0.3s, transform 0.3s var(--ease); } .skillset:hover { border-color: var(--border-strong); transform: translateY(-3px); } .skillset__title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; display: flex; align-items: center; gap: 9px; } .skillset__title::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { font-family: var(--font-mono); font-size: 13px; padding: 7px 12px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); transition: border-color 0.2s, color 0.2s, background 0.2s; white-space: nowrap; } .skillset:hover .chip { border-color: var(--border-strong); } /* ============================================================ BOOK / RESEARCH ============================================================ */ .book { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .book__grid { display: grid; grid-template-columns: 340px 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; } .book__cover { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; border: 1px solid var(--border-strong); background: linear-gradient(155deg, var(--surface-2), var(--surface)), var(--bg); box-shadow: -22px 26px 60px -20px rgba(0,0,0,0.6), inset 0 0 0 1px var(--border); padding: 30px 26px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; transform: perspective(1400px) rotateY(-11deg) rotateX(2deg); transition: transform 0.6s var(--ease); } .book__cover:hover { transform: perspective(1400px) rotateY(-4deg) rotateX(1deg); } .book__cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: linear-gradient(to right, rgba(0,0,0,0.32), transparent); } .book__cover .spine-accent { position: absolute; left: 12px; top: 0; bottom: 0; width: 3px; background: var(--accent); } .book__cover .cover-top { display: flex; flex-direction: column; gap: 16px; } .book__cover .cover-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); } .book__cover .cover-title { font-family: var(--font-display); font-weight: 600; font-size: 25px; line-height: 1.12; letter-spacing: -0.02em; color: var(--text); } .book__cover .cover-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; opacity: 0.55; } .book__cover .cover-grid i { aspect-ratio: 1; border-radius: 2px; background: var(--accent); display: block; } .book__cover .cover-foot { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); display: flex; justify-content: space-between; } .book__body h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 18px; } .book__body > p { color: var(--text-muted); font-size: 17px; max-width: 60ch; margin-bottom: 26px; } .book__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 28px; } .book__stat { background: var(--bg-2); padding: 18px 16px; } .book__stat .n { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 3vw, 30px); letter-spacing: -0.02em; } .book__stat .l { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; margin-top: 4px; } .book__note { font-size: 13px; color: var(--text-faint); font-style: italic; margin-bottom: 24px; max-width: 60ch; } @media (max-width: 760px) { .book__grid { grid-template-columns: 1fr; gap: 44px; } .book__cover { max-width: 280px; margin: 0 auto; } .book__stats { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ OPEN SOURCE / PROJECTS ============================================================ */ .projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; } .project-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 30px 28px; position: relative; overflow: hidden; transition: border-color 0.3s, transform 0.3s var(--ease), background 0.3s; } .project-card::after { /* faint mono "binary" texture in the corner — systems vibe */ content: "010110\A 110100\A 001011"; white-space: pre; position: absolute; top: 18px; right: -6px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.1em; color: var(--text); opacity: 0.05; text-align: right; pointer-events: none; } .project-card:hover { border-color: var(--border-strong); transform: translateY(-4px); background: var(--surface-2); } .project-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .project-card__name { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; } .project-card__name .gh { width: 19px; height: 19px; color: var(--text-faint); } .project-card__arrow { width: 19px; height: 19px; color: var(--text-faint); transition: transform 0.25s var(--ease), color 0.2s; } .project-card:hover .project-card__arrow { transform: translate(3px, -3px); color: var(--accent); } .project-card__tagline { font-size: 15.5px; color: var(--text); font-weight: 500; line-height: 1.4; margin-bottom: 14px; } .project-card__desc { font-size: 14.5px; color: var(--text-muted); line-height: 1.58; flex: 1; margin-bottom: 22px; } .project-card__foot { display: flex; flex-direction: column; gap: 14px; } .project-card__tags { display: flex; flex-wrap: wrap; gap: 7px; } .project-card__tags .chip { font-size: 12px; padding: 5px 10px; } .project-card__status { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); letter-spacing: 0.03em; display: flex; align-items: center; gap: 9px; } .project-card__status i { width: 7px; height: 7px; border-radius: 50%; background: oklch(0.78 0.16 150); flex-shrink: 0; } .project-card__status.is-spec i { background: oklch(0.80 0.15 80); } /* ============================================================ PRESS ============================================================ */ .press__card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: clamp(34px, 5vw, 60px); position: relative; overflow: hidden; } .press__card::before { content: "\201C"; position: absolute; top: -30px; right: 24px; font-family: var(--font-display); font-size: 200px; line-height: 1; color: var(--accent-dim); } .press__meta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); margin-bottom: 26px; } .press__meta .pill { border: 1px solid var(--border); border-radius: 6px; padding: 4px 10px; color: var(--text-muted); } .press__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 3.2vw, 34px); line-height: 1.32; letter-spacing: -0.02em; max-width: 30ch; margin-bottom: 24px; position: relative; } .press__attr { font-size: 15px; color: var(--text-muted); } .press__attr a { color: var(--accent); } .press__attr a:hover { text-decoration: underline; } /* ============================================================ BLOG ============================================================ */ .posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; } .post-card { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 28px 26px; min-height: 250px; transition: border-color 0.3s, transform 0.3s var(--ease), background 0.3s; position: relative; } .post-card:hover { border-color: var(--border-strong); transform: translateY(-4px); } .post-card__top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); letter-spacing: 0.04em; margin-bottom: 22px; } .post-card__tag { color: var(--accent); } .post-card__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.18; letter-spacing: -0.015em; margin-bottom: 12px; } .post-card__excerpt { font-size: 15px; color: var(--text-muted); line-height: 1.55; flex: 1; } .post-card__cta { margin-top: 22px; font-family: var(--font-mono); font-size: 13px; color: var(--accent); display: inline-flex; align-items: center; gap: 8px; } .post-card__cta svg { width: 14px; height: 14px; transition: transform 0.25s var(--ease); } .post-card:hover .post-card__cta svg { transform: translateX(4px); } .post-card.is-soon { opacity: 0.74; } .post-card.is-soon .post-card__cta { color: var(--text-faint); } /* ============================================================ CONTACT / FOOTER ============================================================ */ .contact { text-align: center; } .contact h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 7vw, 78px); letter-spacing: -0.03em; line-height: 1; margin-bottom: 24px; } .contact p { color: var(--text-muted); max-width: 50ch; margin: 0 auto 38px; font-size: 18px; } .contact__links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .contact__link { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-mono); font-size: 14px; padding: 14px 22px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); transition: border-color 0.2s, transform 0.2s var(--ease), background 0.2s; } .contact__link:hover { border-color: var(--accent-line); transform: translateY(-3px); background: var(--surface-2); } .contact__link svg { width: 18px; height: 18px; color: var(--text-muted); } .contact__link:hover svg { color: var(--accent); } .footer { border-top: 1px solid var(--border); padding: 36px var(--pad); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); } .footer a { color: var(--text-muted); } .footer a:hover { color: var(--accent); } /* ============================================================ BLOG POST PAGE ============================================================ */ .post-hero { padding-top: 130px; padding-bottom: 30px; } .post-back { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 9px; margin-bottom: 40px; } .post-back:hover { color: var(--accent); } .post-back { white-space: nowrap; } .post-back svg { width: 15px; height: 15px; } .post-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); margin-bottom: 26px; } .post-meta .tag { color: var(--accent); } .post-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 6vw, 64px); line-height: 1.03; letter-spacing: -0.03em; max-width: 20ch; margin-bottom: 26px; } .post-dek { font-size: clamp(19px, 2.4vw, 23px); color: var(--text-muted); max-width: 60ch; line-height: 1.5; } .post-body { max-width: 720px; margin: 0 auto; padding-bottom: 100px; } .post-body > * + * { margin-top: 26px; } .post-body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 3.4vw, 32px); letter-spacing: -0.02em; margin-top: 56px; line-height: 1.15; } .post-body h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; margin-top: 36px; } .post-body p { font-size: 18px; line-height: 1.7; color: var(--text); } .post-body p.muted { color: var(--text-muted); } .post-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .post-body ul { padding-left: 4px; list-style: none; display: flex; flex-direction: column; gap: 12px; } .post-body ul li { position: relative; padding-left: 30px; font-size: 18px; line-height: 1.6; color: var(--text-muted); } .post-body ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); } .post-body strong { color: var(--text); font-weight: 600; } .post-body blockquote { border-left: 2px solid var(--accent); padding: 6px 0 6px 24px; font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--text); } .post-body pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 22px 24px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; color: var(--text-muted); } .post-body pre .c { color: var(--text-faint); } .post-body pre .k { color: var(--accent); } .post-body figure.callout { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 26px 28px; } .post-body figure.callout .label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .post-body figure.callout p { font-size: 16px; margin: 0; } .post-rule { height: 1px; background: var(--border); border: none; margin: 56px 0; } .post-next { display: flex; align-items: center; justify-content: space-between; gap: 20px; border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; background: var(--surface); transition: border-color 0.3s; } .post-next:hover { border-color: var(--border-strong); } .post-next .lbl { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); letter-spacing: 0.06em; } .post-next .ttl { font-family: var(--font-display); font-weight: 600; font-size: 19px; margin-top: 6px; } .post-next svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; } /* Page intro for blog index */ .page-hero { padding-top: 150px; padding-bottom: 20px; } .page-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 8vw, 86px); letter-spacing: -0.035em; line-height: 0.96; margin-bottom: 22px; } .page-hero p { color: var(--text-muted); max-width: 54ch; font-size: 19px; }