/* kerim.one — personal links page 2026 redesign. Themes via [data-theme] on ; defaults to the visitor's system setting, overridable with the footer toggle. */ *, *::before, *::after { box-sizing: border-box; } :root { /* dark palette (default / no-JS / no preference) */ color-scheme: dark; --bg: oklch(0.18 0.022 260); --text: oklch(0.96 0.008 255); --muted: oklch(0.74 0.02 255); --muted2: oklch(0.60 0.02 255); --accent: oklch(0.70 0.15 290); --zh: oklch(0.70 0.02 255); --strong: oklch(0.86 0.01 255); --host: oklch(0.58 0.02 255); --line: oklch(0.96 0.008 255 / 0.12); --line2: oklch(0.96 0.008 255 / 0.1); --tint-bg: oklch(0.70 0.15 290 / 0.14); --hover-bg: oklch(0.70 0.15 290 / 0.12); --icon: brightness(0) invert(1); --blob-a: oklch(0.70 0.15 290); --blob-b: oklch(0.78 0.13 200); --blob-a-op: 0.22; --blob-b-op: 0.16; --on-accent: oklch(0.16 0.02 260); } /* light palette */ :root[data-theme="light"] { color-scheme: light; --bg: oklch(0.975 0.005 250); --text: oklch(0.27 0.02 260); --muted: oklch(0.46 0.02 260); --muted2: oklch(0.55 0.02 260); --accent: oklch(0.52 0.17 290); --zh: oklch(0.50 0.04 290); --strong: oklch(0.34 0.02 260); --host: oklch(0.55 0.02 260); --line: oklch(0.27 0.02 260 / 0.16); --line2: oklch(0.27 0.02 260 / 0.1); --tint-bg: oklch(0.52 0.17 290 / 0.10); --hover-bg: oklch(0.52 0.17 290 / 0.07); --icon: brightness(0); --blob-a: oklch(0.62 0.16 290); --blob-b: oklch(0.72 0.13 200); --blob-a-op: 0.10; --blob-b-op: 0.08; --on-accent: oklch(0.98 0.005 250); } /* auto light when the system asks and the visitor hasn't chosen */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: oklch(0.975 0.005 250); --text: oklch(0.27 0.02 260); --muted: oklch(0.46 0.02 260); --muted2: oklch(0.55 0.02 260); --accent: oklch(0.52 0.17 290); --zh: oklch(0.50 0.04 290); --strong: oklch(0.34 0.02 260); --host: oklch(0.55 0.02 260); --line: oklch(0.27 0.02 260 / 0.16); --line2: oklch(0.27 0.02 260 / 0.1); --tint-bg: oklch(0.52 0.17 290 / 0.10); --hover-bg: oklch(0.52 0.17 290 / 0.07); --icon: brightness(0); --blob-a: oklch(0.62 0.16 290); --blob-b: oklch(0.72 0.13 200); --blob-a-op: 0.10; --blob-b-op: 0.08; --on-accent: oklch(0.98 0.005 250); } } body { margin: 0; min-height: 100vh; position: relative; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: "Hanken Grotesk", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; } /* soft background glows */ .blob { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; } .blob--a { bottom: -80px; left: -60px; width: 320px; height: 320px; background: var(--blob-a); opacity: var(--blob-a-op); } .blob--b { top: -90px; right: -60px; width: 300px; height: 300px; background: var(--blob-b); opacity: var(--blob-b-op); } .page { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: clamp(28px, 7cqi, 64px) clamp(22px, 6cqi, 52px); container-type: inline-size; } /* header: name block + avatar */ .intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .intro__text { flex: 1; min-width: 0; } .eyebrow { font-family: "Space Mono", monospace; font-size: clamp(10px, 2.6cqi, 12px); letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin: 0 0 clamp(12px, 3cqi, 20px); } .name { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(34px, 9cqi, 54px); line-height: 0.98; letter-spacing: -0.03em; margin: 0; } .name-zh { font-family: "Space Grotesk", sans-serif; font-size: clamp(19px, 5cqi, 26px); color: var(--zh); margin: 8px 0 0; } .avatar { flex: none; width: clamp(58px, 15cqi, 84px); height: clamp(58px, 15cqi, 84px); border-radius: 50%; object-fit: cover; border: 2px solid var(--accent); } .tagline { font-size: clamp(14px, 3.6cqi, 16px); line-height: 1.6; color: var(--muted); max-width: 440px; margin: clamp(18px, 4cqi, 26px) 0 clamp(22px, 5cqi, 32px); } .tagline span { color: var(--strong); } /* link list */ .links { border-top: 1px solid var(--line); } .link { display: flex; align-items: center; gap: clamp(12px, 3cqi, 18px); padding: clamp(13px, 3.4cqi, 17px) clamp(4px, 2cqi, 12px); text-decoration: none; color: var(--text); border-bottom: 1px solid var(--line2); transition: background 0.22s, transform 0.22s, padding 0.22s; } .link:hover, .link:focus-visible { background: var(--hover-bg); transform: translateX(6px); padding-left: 18px; } .link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .link__icon { flex: none; width: clamp(30px, 8cqi, 36px); height: clamp(30px, 8cqi, 36px); border-radius: 10px; display: grid; place-items: center; background: var(--tint-bg); } .link__icon img { width: clamp(15px, 3.8cqi, 18px); height: clamp(15px, 3.8cqi, 18px); filter: var(--icon); opacity: 0.9; } .link__title { flex: 1; font-family: "Space Grotesk", sans-serif; font-weight: 500; font-size: clamp(17px, 4.6cqi, 22px); letter-spacing: -0.01em; } .link__host { flex: none; font-family: "Space Mono", monospace; font-size: 12px; color: var(--host); } .link__arrow { flex: none; color: var(--accent); font-size: 18px; } /* footer: contact line + theme toggle */ .foot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: clamp(22px, 5cqi, 30px); } .foot__contact { flex: 1; min-width: 200px; margin: 0; font-size: clamp(12px, 3cqi, 13px); line-height: 1.6; color: var(--muted2); } .theme-toggle { display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px; background: var(--tint-bg); border: 1px solid var(--line); flex: none; } .theme-toggle__btn { display: grid; place-items: center; width: 34px; height: 28px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--muted2); transition: background 0.2s, color 0.2s; } .theme-toggle__btn.is-active { background: var(--accent); color: var(--on-accent); } .theme-toggle__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .theme-toggle__btn svg { width: 15px; height: 15px; display: block; } /* hide the small host labels on narrow screens, like the mockup */ @container (max-width: 470px) { .link__host { display: none; } } @media (prefers-reduced-motion: reduce) { .link, .theme-toggle__btn { transition: none; } .link:hover, .link:focus-visible { transform: none; } }