/* ============================================================================ Gump Wang — personal homepage Editorial minimalism with a light programmer accent. Sharp corners (radius 0), monochrome zinc + a single blue accent, restrained micro-motion. Theming via CSS custom properties; [data-theme="dark"] on . ============================================================================ */ /* ---- Design tokens -------------------------------------------------------- */ :root { /* Light theme (default) */ --bg: #fafafa; --surface: #f4f4f5; /* zinc-100 — hover wash for rows */ --fg: #18181b; /* zinc-900 — primary text */ --fg-muted: #52525b; /* zinc-600 — secondary text (AA on --bg) */ --fg-subtle: #a1a1aa; /* zinc-400 — tertiary / numerals / icons */ --border: #e4e4e7; /* zinc-200 */ --border-strong: #18181b; --accent: #2563eb; /* blue-600 */ --accent-fg: #ffffff; --ring: #18181b; /* Type */ --font-display: "Space Grotesk", "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "PingFang SC", monospace; --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.1875rem; --text-xl: 1.375rem; /* Spacing (4 / 8 rhythm) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --container: 720px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 200ms; } [data-theme="dark"] { --bg: #09090b; /* zinc-950 */ --surface: #18181b; /* zinc-900 — hover wash */ --fg: #fafafa; --fg-muted: #a1a1aa; /* zinc-400 (>=4.5:1 on --bg) */ --fg-subtle: #52525b; /* zinc-600 */ --border: #27272a; /* zinc-800 */ --border-strong: #fafafa; --accent: #60a5fa; /* blue-400 — brighter for dark surfaces */ --accent-fg: #09090b; --ring: #fafafa; } /* ---- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100dvh; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } svg { display: block; flex-shrink: 0; } :focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 0; } /* ---- Layout --------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); } /* ---- Top bar (theme + language) ------------------------------------------ */ .topbar { position: sticky; top: 0; z-index: 40; display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); } .ctrl { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding-inline: var(--space-3); border: 1px solid var(--border); border-radius: 0; background: transparent; color: var(--fg-muted); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .ctrl:hover { color: var(--fg); border-color: var(--border-strong); } .ctrl:active { background: var(--surface); } /* Sun/moon swap driven by theme */ .ctrl .icon-sun { display: none; } [data-theme="dark"] .ctrl .icon-sun { display: block; } [data-theme="dark"] .ctrl .icon-moon { display: none; } /* ---- Hero ----------------------------------------------------------------- */ .hero { padding-top: var(--space-16); padding-bottom: var(--space-12); } .hero__head { display: flex; align-items: center; gap: var(--space-5); } .hero__avatar { width: 76px; height: 76px; border-radius: 0; object-fit: cover; border: 1px solid var(--border-strong); flex-shrink: 0; } .hero__name { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.04em; } .hero__tagline { margin-top: var(--space-5); font-size: var(--text-xl); color: var(--fg); letter-spacing: -0.02em; } .hero__intro { margin-top: var(--space-3); font-family: var(--font-mono); font-size: var(--text-base); color: var(--fg-muted); } /* Blinking block cursor — the one explicitly "programmer" flourish */ .hero__intro::after { content: ""; display: inline-block; width: 0.55em; height: 1.05em; margin-left: 0.2em; background: var(--accent); vertical-align: text-bottom; animation: blink 1.1s steps(1, end) infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* Social links — sharp ghost buttons */ .social { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-10); } .social__link { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding-inline: var(--space-4); border: 1px solid var(--border); border-radius: 0; font-size: var(--text-sm); font-weight: 500; color: var(--fg-muted); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .social__link svg { width: 17px; height: 17px; } .social__link:hover { color: var(--fg); border-color: var(--border-strong); background: var(--surface); } /* ---- Works ---------------------------------------------------------------- */ .works { padding-top: var(--space-12); padding-bottom: var(--space-20); } /* Slash-separated nav — items divided by a quiet "/", read like a path. The active item takes the accent; the others stay muted until hovered. */ .tabs { display: flex; gap: var(--space-3); margin-bottom: var(--space-6); } .tab { padding: var(--space-1) 0; border: 0; background: transparent; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 500; color: var(--fg-subtle); cursor: pointer; transition: color var(--dur) var(--ease); } /* Decorative "/" separator before every item except the first */ .tab:not(:first-child)::before { content: "/"; margin-right: var(--space-3); color: var(--border); } .tab:not([aria-selected="true"]):hover { color: var(--fg); } .tab[aria-selected="true"] { color: var(--accent); } /* Empty-tab placeholder, styled as a code comment */ .works__empty { padding: var(--space-8) var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-subtle); } .works__empty::before { content: "// "; color: var(--accent); } /* Numbered work rows (not cards) */ .work { position: relative; display: grid; grid-template-columns: 2.25rem 1fr; grid-template-areas: "no main" ". meta"; align-items: start; gap: var(--space-3) var(--space-5); padding: var(--space-5) var(--space-4); border-top: 1px solid var(--border); transition: background var(--dur) var(--ease); } .work:last-child { border-bottom: 1px solid var(--border); } /* Editor-style accent bar that grows in on hover/focus */ .work::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transition: transform var(--dur) var(--ease); } .work.is-link { cursor: pointer; } .work.is-link:hover, .work:has(.work__meta a:focus-visible) { background: var(--surface); } .work.is-link:hover::before, .work:has(.work__meta a:focus-visible)::before { transform: scaleY(1); } /* Stretched hit layer; real links live in .work__meta (keyboard reachable) */ .work__hit { position: absolute; inset: 0; z-index: 0; } .work__no { grid-area: no; align-self: start; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-subtle); transition: color var(--dur) var(--ease); } .work.is-link:hover .work__no { color: var(--accent); } .work__main { grid-area: main; min-width: 0; } .work__name { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; } .work__icon { display: inline-flex; color: var(--fg-subtle); transition: color var(--dur) var(--ease); } .work__icon svg { width: 18px; height: 18px; } .work.is-link:hover .work__icon { color: var(--accent); } .work__desc { margin-top: var(--space-1); font-size: var(--text-sm); line-height: 1.55; color: var(--fg-muted); } .work__meta { grid-area: meta; position: relative; z-index: 1; display: flex; gap: var(--space-4); } .work__meta a { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; color: var(--fg-subtle); transition: color var(--dur) var(--ease); } .work__meta a:hover { color: var(--accent); } .work__meta .arrow { display: inline-block; transition: transform var(--dur) var(--ease); } .work__meta a:hover .arrow { transform: translateX(3px); } @media (max-width: 600px) { .work { grid-template-columns: 2rem 1fr; } } /* ---- Footer --------------------------------------------------------------- */ .footer { padding-block: var(--space-10); border-top: 1px solid var(--border); } .footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-muted); } .footer a:hover { color: var(--fg); } /* ---- Entrance animation --------------------------------------------------- CSS-only, gated behind (prefers-reduced-motion: no-preference). Nothing has opacity:0 by default, so content stays visible without JS and under reduced motion. */ @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: no-preference) { .hero__avatar, .hero__name, .hero__tagline, .hero__intro, .social, .tabs, .work { opacity: 0; animation: fade-up 600ms var(--ease) forwards; } .hero__avatar { animation-delay: 40ms; } .hero__name { animation-delay: 100ms; } .hero__tagline { animation-delay: 170ms; } .hero__intro { animation-delay: 220ms; } .social { animation-delay: 290ms; } .tabs { animation-delay: 80ms; } .work { animation-delay: 120ms; } .work:nth-child(2) { animation-delay: 190ms; } .work:nth-child(3) { animation-delay: 260ms; } .work:nth-child(4) { animation-delay: 330ms; } .work:nth-child(n + 5) { animation-delay: 380ms; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } /* keep the cursor as a static block rather than a vanished one */ .hero__intro::after { animation: none; opacity: 1; } }