/* =========================================================================== Portfolio — page styles --------------------------------------------------------------------------- Everything the design expressed as inline `style=` attributes lives here as `kp-` classes. Loaded after the Klozera tokens, so every value below is a token reference unless the design deliberately used a raw value. =========================================================================== */ /* --- Family overrides: the page runs on Geist, not the Klozera faces ------ */ :root { --font-display: "Geist", system-ui, sans-serif; --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace; } /* =========================================================================== Accent palettes --------------------------------------------------------------------------- The design applied these by writing custom properties onto from JS. Doing it in CSS instead means the chosen accent is already correct on the very first paint — no flash of design-system blue while app.js boots. Every rule is `:root[data-accent…]` (0,2,0) and this file loads after ds/tokens/*, so these win over the `:root[data-theme="dark"]` brand tokens in colors.css, which carry the same specificity. =========================================================================== */ :root[data-accent="slate"] { --kp-brand: #6683A0; --kp-brand-hover: #8AA3BB; --kp-brand-active: #516A83; --kp-g1: #3E4C5E; --kp-g2: #4A5D6E; --kp-g3: #5B7C99; --kp-g4: #33404E; } :root[data-accent="sage"] { --kp-brand: #7A9581; --kp-brand-hover: #98AD9D; --kp-brand-active: #617A67; --kp-g1: #4A5B4E; --kp-g2: #5C7360; --kp-g3: #6E8B74; --kp-g4: #3C4A3F; } :root[data-accent="clay"] { --kp-brand: #AC826A; --kp-brand-hover: #C49E88; --kp-brand-active: #8C6650; --kp-g1: #6E4E3B; --kp-g2: #8A6249; --kp-g3: #A97B60; --kp-g4: #573C2D; } :root[data-accent="indigo"] { --kp-brand: #7377AC; --kp-brand-hover: #9195C4; --kp-brand-active: #5B5F91; --kp-g1: #474A78; --kp-g2: #565A8C; --kp-g3: #6B6FA6; --kp-g4: #373959; } :root[data-accent="mauve"] { --kp-brand: #93809A; --kp-brand-hover: #AC9BB2; --kp-brand-active: #77647E; --kp-g1: #5C4C63; --kp-g2: #73607A; --kp-g3: #8A7391; --kp-g4: #463A4C; } :root[data-accent="stone"] { --kp-brand: #8E8778; --kp-brand-hover: #AAA294; --kp-brand-active: #736C5E; --kp-g1: #5C574E; --kp-g2: #726C60; --kp-g3: #8A8378; --kp-g4: #46423B; } :root[data-accent] { --brand: var(--kp-brand); --brand-hover: var(--kp-brand-hover); --brand-active: var(--kp-brand-active); --on-brand: #FFFFFF; --text-link: var(--kp-brand-hover); --brand-subtle: color-mix(in srgb, var(--kp-brand) 16%, transparent); --brand-subtle-2: color-mix(in srgb, var(--kp-brand) 26%, transparent); --shadow-brand: 0 6px 22px color-mix(in srgb, var(--kp-brand) 40%, transparent); --focus-ring: color-mix(in srgb, var(--kp-brand) 50%, transparent); } html { scroll-behavior: smooth; scroll-padding-top: 84px; } html, body { margin: 0; } body { font-family: var(--font-sans); background: var(--bg-base); color: var(--text-primary); -webkit-font-smoothing: antialiased; } a { color: var(--text-link); text-decoration: none; } a:hover { color: var(--brand-hover); text-decoration: none; } button { font-family: inherit; cursor: pointer; } ::selection { background: color-mix(in srgb, var(--brand) 26%, transparent); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- Keyframes ----------------------------------------------------------- */ /* The centring offset has to be part of the keyframe: an animated `transform` replaces the element's own, so a bare translateY here would drop the `translate(-50%, -50%)` that centres the hero card and pin it bottom-right. */ @keyframes kpFloat { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 12px)); } } @keyframes kpMesh { 0% { transform: rotate(0deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1.2); } } @keyframes kpDot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } } @keyframes kpRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .kp-rise { animation: kpRise .7s var(--ease-out) both; } /* Scroll reveal. `.is-armed` is set by JS only when motion is allowed, so a no-JS or reduced-motion visitor sees fully-rendered sections. */ [data-reveal].is-armed { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } [data-reveal].is-revealed { opacity: 1; transform: none; } /* --- Icons --------------------------------------------------------------- */ .kp-ic { display: inline-flex; flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* --- Layout -------------------------------------------------------------- */ .kp-shell { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .kp-main { max-width: 1080px; margin: 0 auto; padding: 0 24px; } /* --- Top nav ------------------------------------------------------------- */ .kp-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg-base) 78%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-subtle); } .kp-header-inner { max-width: 1080px; margin: 0 auto; height: 64px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .kp-brand { display: flex; align-items: center; gap: 10px; } .kp-mark { width: 36px; height: 36px; border-radius: 10px; display: block; flex: none; object-fit: cover; border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); } .kp-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--text-primary); letter-spacing: var(--tracking-tight); } .kp-nav { display: flex; gap: 28px; } .kp-navlink { color: var(--text-secondary); font-size: 14px; font-weight: 500; padding: 6px 2px; transition: color var(--dur-fast) var(--ease-standard); } .kp-navlink:hover { color: var(--text-primary); } .kp-header-actions { display: flex; align-items: center; gap: 10px; } .kp-searchbtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-sunken); color: var(--text-muted); font-size: 13px; } .kp-kbd { font-family: var(--font-mono); font-size: 11px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: 5px; padding: 1px 5px; } .kp-themebtn { width: 36px; height: 36px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-xs); } /* Only one of the two icons shows, depending on the active theme. */ .kp-themebtn .kp-ic-sun { display: inline-flex; } .kp-themebtn .kp-ic-moon { display: none; } :root:not([data-theme="dark"]) .kp-themebtn .kp-ic-sun { display: none; } :root:not([data-theme="dark"]) .kp-themebtn .kp-ic-moon { display: inline-flex; } /* --- Shared bits --------------------------------------------------------- */ .kp-social { width: 44px; height: 44px; border-radius: var(--radius-md); border: 1px solid var(--border-default); background: var(--surface-card); display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); box-shadow: var(--shadow-xs); transition: color var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .kp-social:hover { color: var(--brand); border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); } .kp-social .kp-ic { width: 19px; height: 19px; } /* LeetCode has no stroked UI icon — it comes from the brand sprite, which is solid-fill, so it needs the fill treatment plus the same hover colour the stroked GitHub and LinkedIn marks get. */ .kp-social .kp-brand-ic { width: 18px; height: 18px; color: inherit; } .kp-social:hover .kp-brand-ic { color: inherit; } .kp-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--radius-pill); background: var(--surface-panel); border: 1px solid var(--border-subtle); font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); white-space: nowrap; cursor: default; transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .kp-chip::before { content: ""; width: 0; height: 6px; border-radius: 3px; background: var(--brand); transition: width var(--dur-base) var(--ease-standard), margin var(--dur-base) var(--ease-standard); } .kp-chip:hover { background: var(--brand-subtle); border-color: color-mix(in srgb, var(--brand) 40%, transparent); color: var(--text-primary); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .kp-chip:hover::before { width: 6px; margin-right: 8px; } .kp-chips { display: flex; flex-wrap: wrap; gap: 8px; } .kp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: kpDot 1.6s infinite; } .kp-dot--success { background: var(--success); } /* Section headers: 01 About ————————————— */ .kp-sechead { display: flex; align-items: center; gap: 16px; } .kp-secnum { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); } .kp-sectitle { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 30px; letter-spacing: var(--tracking-tight); color: var(--text-primary); } .kp-secrule { flex: 1; height: 1px; background: var(--border-subtle); } .kp-seclink { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); } .kp-seclink:hover { color: var(--text-primary); } .kp-seclink .kp-ic { width: 14px; height: 14px; } /* --- Hero ---------------------------------------------------------------- */ .kp-hero { display: grid; grid-template-columns: 1fr 470px; gap: 48px; align-items: center; min-height: calc(100vh - 64px); padding: 40px 0; } .kp-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: var(--radius-pill); background: var(--brand-subtle); color: var(--brand); font-size: 11.5px; font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; margin-bottom: 24px; } .kp-h1 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(44px, 11vw, 72px); line-height: 0.98; letter-spacing: var(--tracking-tighter); color: var(--text-primary); } .kp-h1 em { font-style: normal; color: var(--brand); } .kp-lede { margin: 26px 0 0; max-width: 440px; font-size: 17px; line-height: var(--leading-relaxed); color: var(--text-secondary); text-wrap: pretty; } .kp-lede strong, .kp-prose strong { color: var(--text-primary); font-weight: 600; } .kp-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 30px; } .kp-cta-socials { display: flex; gap: 8px; margin-left: 4px; } .kp-hero-media { position: relative; height: 560px; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); background: var(--slate-950); } .kp-hero-mesh { position: absolute; inset: -80px; background: conic-gradient(from 0deg, var(--kp-g1), var(--kp-g2), var(--kp-g3), var(--kp-g4), var(--kp-g1)); filter: blur(64px); opacity: .5; animation: kpMesh 22s linear infinite; } .kp-hero-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 70% 8%, transparent 38%, rgba(10, 14, 22, .6) 100%); } .kp-hero-card { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%); width: 300px; height: 360px; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); box-shadow: var(--shadow-xl); animation: kpFloat 7s var(--ease-standard) infinite; } .kp-hero-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .kp-hero-tag { position: absolute; left: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 9px; border-radius: var(--radius-pill); background: rgba(15, 19, 28, .55); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .16); color: #fff; font-size: 13px; } .kp-hero-tag strong { font-weight: 600; } /* The Voxton mark is half near-black, so it needs a light chip behind it — on the tag's dark translucent pill that half would otherwise disappear. */ .kp-hero-tag-ico { width: 24px; height: 24px; border-radius: 7px; background: #fff; padding: 3px; object-fit: contain; display: block; flex: none; } .kp-hero-tag .kp-dot { width: 7px; height: 7px; background: var(--teal-300); } /* --- About --------------------------------------------------------------- */ .kp-section { padding: 96px 0 40px; } .kp-section--first { padding-top: 88px; } .kp-section--last { padding-bottom: 110px; } .kp-about-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: center; } .kp-about-lead { margin: 0 0 22px; font-family: var(--font-display); font-weight: 600; font-size: 23px; line-height: var(--leading-snug); color: var(--text-primary); letter-spacing: var(--tracking-tight); text-wrap: pretty; } .kp-prose { margin: 0 0 16px; font-size: 16px; line-height: var(--leading-relaxed); color: var(--text-secondary); text-wrap: pretty; } .kp-prose:last-child { margin-bottom: 0; } .kp-facts { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-panel); padding: 8px 22px; margin: 0; } .kp-fact { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border-subtle); } .kp-fact:last-child { border-bottom: none; } .kp-fact dt { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } .kp-fact dd { margin: 0; font-size: 14px; color: var(--text-primary); font-weight: 500; } .kp-fact dd.kp-fact-live { display: inline-flex; align-items: center; gap: 7px; color: var(--brand); font-weight: 600; } /* --- Experience ---------------------------------------------------------- */ .kp-exp-row { display: grid; grid-template-columns: 220px 1fr; gap: 44px; padding: 34px 0; border-top: 1px solid var(--border-subtle); } .kp-exp-company { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; } .kp-exp-company h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: var(--tracking-tight); color: var(--text-primary); } .kp-now { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--success); text-transform: uppercase; letter-spacing: var(--tracking-wide); } /* Marks the most recent role once it is no longer current — no live dot, and quieter than the green "Now" it replaced. */ .kp-now--past { color: var(--text-muted); border: 1px solid var(--border-default); border-radius: var(--radius-pill); padding: 2px 8px; } .kp-exp-role { font-size: 14.5px; color: var(--brand); font-weight: 500; margin-bottom: 12px; } .kp-exp-period { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); } .kp-exp-loc { font-size: 13px; color: var(--text-faint); margin-top: 3px; } .kp-exp-points { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; } .kp-exp-points li { display: flex; gap: 12px; font-size: 15px; line-height: var(--leading-normal); color: var(--text-secondary); } .kp-exp-points li::before { content: "—"; color: var(--text-faint); flex: none; } .kp-exp-points li span { text-wrap: pretty; } /* --- Projects ------------------------------------------------------------ */ .kp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 40px; } /* 2:1 rather than the design's 16:10. Screenshots run 1.87:1 to 2.18:1, so this is the ratio that shows each one whole with the least letterboxing. */ .kp-proj-frame { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); aspect-ratio: 2 / 1; position: relative; transition: border-color var(--dur-base) var(--ease-standard); } .kp-proj-media { position: absolute; inset: 0; transition: transform var(--dur-slow) var(--ease-standard); /* Stands in until a real screenshot lands in assets/projects/ — see README. */ background: radial-gradient(120% 120% at 20% 0%, color-mix(in srgb, var(--brand) 26%, transparent), transparent 60%), linear-gradient(140deg, var(--kp-g1), var(--kp-g4)); display: flex; align-items: center; justify-content: center; } .kp-proj-media::after { content: attr(data-label); font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255, 255, 255, .55); } /* `contain`, not `cover`: every screenshot shows in full, nothing cropped out. The element's own background fills the box, so the thin letterbox bars read as a mat around the shot rather than as the placeholder gradient below. */ .kp-proj-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: var(--bg-inset); } .kp-proj:hover .kp-proj-media { transform: scale(1.03); } .kp-proj:hover .kp-proj-frame { border-color: var(--border-strong); } .kp-proj-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 18px 0 8px; } .kp-proj-head h3 { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: var(--tracking-tight); color: var(--text-primary); } .kp-proj-links { display: flex; gap: 2px; } .kp-proj-desc { margin: 0 0 16px; font-size: 14.5px; line-height: var(--leading-normal); color: var(--text-secondary); text-wrap: pretty; } .kp-iconlink { width: 34px; height: 34px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); } .kp-iconlink:hover { color: var(--text-primary); background: var(--bg-subtle); } .kp-iconlink .kp-ic { width: 17px; height: 17px; } /* Only LeetFut is deployed. The rest keep the live-site icon so every card has the same anatomy, but it is a , not an — nothing to click, nothing to focus, and hidden from screen readers. */ .kp-iconlink.is-off { color: var(--text-faint); opacity: 0.4; cursor: default; pointer-events: none; } .kp-iconlink.is-off:hover { background: none; color: var(--text-faint); } /* --- Skills -------------------------------------------------------------- */ /* Hairline-separated rows on the same 220px / 1fr grid as the Experience section, so the two read as one system. No card chrome — the logos and the rules carry the structure. */ .kp-stack-row { display: grid; grid-template-columns: 220px 1fr; gap: 44px; padding: 11px 0; border-top: 1px solid var(--border-subtle); align-items: start; } .kp-stack-label { padding-top: 9px; } .kp-stack-label h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: var(--tracking-tight); color: var(--text-primary); } .kp-stack-count { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); } .kp-stack-count::after { content: " tools"; } .kp-tech { display: flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 0; list-style: none; } .kp-tech-item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 7px; width: 78px; padding: 8px 4px 7px; border-radius: var(--radius-md); font-size: 11.5px; line-height: 1.2; text-align: center; color: var(--text-muted); transition: color var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard); } .kp-tech-item:hover { color: var(--text-primary); background: var(--surface-panel); } /* Brand logos are solid-fill marks, unlike the stroked UI icons in .kp-ic. They sit monochrome until hover, when each takes its own brand colour from the --tech custom property set inline on the item. */ .kp-brand-ic { width: 21px; height: 21px; flex: none; fill: currentColor; stroke: none; color: var(--text-secondary); transition: color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); } .kp-tech-item:hover .kp-brand-ic { color: var(--tech, var(--brand)); transform: translateY(-2px); } /* A few brand colours are pale greys (C, Apple) that vanish against the light theme's panels. Those items carry a --tech-light override; everything else falls through to its single --tech value. */ :root:not([data-theme="dark"]) .kp-tech-item:hover .kp-brand-ic { color: var(--tech-light, var(--tech, var(--brand))); } /* --- Contact ------------------------------------------------------------- */ .kp-contact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding: 20px 0; } .kp-contact h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(30px, 8vw, 44px); line-height: 1.04; letter-spacing: var(--tracking-tight); color: var(--text-primary); max-width: 600px; text-wrap: balance; } .kp-contact p { margin: 0; max-width: 460px; font-size: 16px; line-height: var(--leading-relaxed); color: var(--text-muted); } .kp-contact-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 6px; } /* --- Footer -------------------------------------------------------------- */ .kp-footer { border-top: 1px solid var(--border-subtle); } .kp-footer-inner { max-width: 1080px; margin: 0 auto; padding: 36px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .kp-footer-brand { display: flex; align-items: center; gap: 10px; } .kp-footer-mark { width: 24px; height: 24px; border-radius: 7px; display: block; flex: none; object-fit: cover; border: 1px solid var(--border-subtle); } .kp-footer-brand span:last-child { font-size: 13.5px; color: var(--text-muted); } .kp-footer-links { display: flex; gap: 24px; font-size: 13.5px; } .kp-footer-links a { color: var(--text-muted); } .kp-footer-links a:hover { color: var(--text-primary); } /* --- Accent picker ------------------------------------------------------- Collapsed to a single dot showing the current accent; the swatches slide out on click. It sits over the page permanently, so at rest it should read as a quiet affordance, not a control panel. */ .kp-accents { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; align-items: center; padding: 4px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-card) 80%, transparent); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); opacity: 0.7; transition: opacity var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); } .kp-accents:hover, .kp-accents:focus-within, .kp-accents[data-open] { opacity: 1; border-color: var(--border-default); box-shadow: var(--shadow-md); } .kp-accents-toggle { width: 26px; height: 26px; padding: 0; flex: none; border: none; background: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .kp-accents-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-primary) 20%, transparent); transition: transform var(--dur-base) var(--ease-standard); } .kp-accents-toggle:hover .kp-accents-dot { transform: scale(1.12); } .kp-accents[data-open] .kp-accents-dot { transform: scale(0.86); } .kp-accents-panel { max-width: 0; overflow: hidden; opacity: 0; transition: max-width var(--dur-slow) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard), margin-left var(--dur-slow) var(--ease-standard); } .kp-accents[data-open] .kp-accents-panel { max-width: 220px; opacity: 1; margin-left: 8px; } .kp-accents-swatches { display: flex; gap: 8px; padding-right: 4px; } .kp-swatch { width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: pointer; flex: none; border: 2px solid color-mix(in srgb, var(--text-primary) 14%, transparent); transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); } .kp-swatch:hover { transform: scale(1.12); } .kp-swatch[aria-pressed="true"] { border-color: var(--text-primary); } /* --- oneko --------------------------------------------------------------- The cursor-chasing cat. Fixed to the viewport and inert: it must never eat a click meant for the page underneath it. Sits above the sticky header but below the command palette's scrim. */ #oneko { position: fixed; width: 32px; height: 32px; z-index: 70; pointer-events: none; image-rendering: pixelated; background-repeat: no-repeat; /* The sprite sheet is a white cat with a black outline. It reads on the dark theme as drawn; on the light theme it needs a shadow to stay visible. */ filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--slate-900) 35%, transparent)); } :root[data-theme="dark"] #oneko { filter: none; } /* --- Command palette ----------------------------------------------------- */ .kp-palette[hidden] { display: none; } .kp-palette { position: fixed; inset: 0; z-index: 90; background: var(--overlay); backdrop-filter: blur(3px); display: flex; align-items: flex-start; justify-content: center; padding-top: 13vh; } .kp-palette-panel { width: min(560px, 92vw); background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; } .kp-palette-search { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-subtle); } .kp-palette-search > .kp-ic { width: 18px; height: 18px; color: var(--text-muted); } .kp-palette-search input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-sans); font-size: 16px; color: var(--text-primary); } .kp-palette-search .kp-kbd { background: transparent; color: var(--text-muted); padding: 2px 6px; } /* The DS focus ring draws a hard rectangle around this borderless input. The field is auto-focused the moment the dialog opens, so tint the whole row instead — the focus stays legible without the stray box. */ .kp-palette-search input:focus-visible { box-shadow: none; } .kp-palette-search:focus-within { background: color-mix(in srgb, var(--brand) 7%, transparent); } .kp-palette-list { max-height: 340px; overflow: auto; padding: 8px; } .kp-cmd { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--radius-md); color: var(--text-primary); font-size: 14.5px; } .kp-cmd:hover, .kp-cmd:focus-visible { background: var(--bg-subtle); color: var(--text-primary); } .kp-cmd-ico { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--surface-panel); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; padding: 7px; flex: none; } .kp-cmd-ico .kp-ic { width: 100%; height: 100%; } .kp-cmd-label { flex: 1; } .kp-cmd-kind { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); } .kp-palette-empty { padding: 22px 12px; text-align: center; font-size: 14px; color: var(--text-muted); } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 880px) { .kp-main { padding: 0 18px; } .kp-nav { display: none; } .kp-hero { grid-template-columns: 1fr; gap: 28px; min-height: auto; padding: 36px 0 52px; } .kp-hero-media { height: 340px; } .kp-hero-card { width: 200px; height: 240px; } .kp-exp-row { grid-template-columns: 1fr; gap: 14px; } .kp-grid2 { grid-template-columns: 1fr; gap: 44px; } .kp-stack-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; } .kp-stack-label { padding-top: 0; } .kp-tech { margin-left: -4px; } .kp-about-grid { grid-template-columns: 1fr; gap: 28px; } .kp-section { padding: 64px 0 32px; } .kp-section--last { padding-bottom: 88px; } .kp-accents { right: 12px; bottom: 12px; } } @media (max-width: 560px) { .kp-header-inner { padding: 0 18px; gap: 12px; } .kp-searchbtn .kp-kbd { display: none; } .kp-footer-links { gap: 16px; row-gap: 10px; flex-wrap: wrap; } /* The accent picker is fixed bottom-right and lands on top of the last footer link once you reach the end of the page. Buy it some clearance. */ .kp-footer-inner { padding-bottom: 60px; } .kp-sectitle { font-size: 26px; } .kp-sechead { gap: 12px; } /* Skills: at this width only four fixed-width tiles fit per row, so a group of five or six spilled into a ragged second row and the section ran ~1000px tall. Switching to an auto-fill grid packs six across at 360px (seven on a larger phone) and stretches them to fill the row, so most groups land on a single line. min-height keeps two-line labels like "React Native" from staggering the rows. */ .kp-tech { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 2px; } .kp-tech-item { width: auto; min-height: 56px; padding: 6px 2px 5px; gap: 5px; font-size: 9.5px; letter-spacing: -0.01em; } .kp-brand-ic { width: 18px; height: 18px; } .kp-stack-label h3 { font-size: 14.5px; } .kp-stack-count { font-size: 10.5px; margin-top: 2px; } /* Hero CTAs: at 360px the pair lands within a few px of the available width, so they wrap into an uneven stack. Full width reads deliberate. */ .kp-cta { gap: 10px; } .kp-cta .klz-btn { flex: 1 0 100%; } .kp-cta-socials { margin-left: 0; } /* Same problem in contact: the email button and the GitHub icon shared a row, pushing LinkedIn and LeetCode onto a second. Give the button its own row and the three icons sit together underneath. The label is a nowrap email address, so the button grows past its own row rather than wrapping. Dialling down the DS button's own padding and font-size custom properties keeps the full address readable at 320px. */ .kp-contact-row { gap: 12px; } .kp-contact-row .klz-btn { flex: 0 0 100%; min-width: 0; --_px: var(--space-3); --_fs: var(--text-md); } /* The tag is absolutely positioned inside the hero card; without a right edge it runs past the card on narrow screens. */ .kp-hero-tag { left: 12px; right: 12px; bottom: 12px; font-size: 11.5px; padding: 7px 12px 7px 7px; gap: 7px; flex-wrap: wrap; } } /* Below ~420px the wordmark, the search button and the theme button stop fitting on one row. The search button becomes icon-only — it is also the only way to reach the nav here, since .kp-nav is hidden under 880px. */ @media (max-width: 420px) { .kp-searchbtn { width: 36px; padding: 0; justify-content: center; font-size: 0; gap: 0; } .kp-searchbtn .kp-ic { width: 16px !important; height: 16px !important; } .kp-brand-name { font-size: 17px; } .kp-mark { width: 32px; height: 32px; } .kp-main { padding: 0 14px; } .kp-fact { gap: 10px; } .kp-fact dd { font-size: 13.5px; text-align: right; } }