/* ========================================================================== himanshutejwani.com — single stylesheet 1. Tokens 5. Layout primitives 9. Portfolio 2. Reset & base 6. Header / footer 10. Blog & gallery 3. Typography 7. Home chooser 11. Forms 4. Motion 8. Resume timeline 12. Utilities ========================================================================== */ /* 1. TOKENS ================================================================ */ :root { /* Accent comes from data/site.json at runtime. The -user variables are set on by render.js; the literals here are the fallback if JS is off. */ --accent: var(--accent-user, #0a66c2); --accent-strong: var(--accent-strong-user, #08529b); --btn-primary-fg: #ffffff; /* Light theme — designed as its own palette, not a default */ --bg: #fbfbfa; --bg-sunken: #f4f4f2; --surface: #ffffff; --surface-2: #f7f7f5; --text: #111113; --text-2: #55555c; --text-3: #85858d; --border: #e3e3df; --border-strong: #cfcfc9; --shadow-sm: 0 1px 2px rgba(17, 17, 19, 0.05); --shadow: 0 2px 14px rgba(17, 17, 19, 0.07); --selection: rgba(10, 102, 194, 0.16); --overlay: rgba(251, 251, 250, 0.86); --scrim: rgba(17, 17, 19, 0.92); /* Type scale — clamp-driven, no media queries needed */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --fs-hero: clamp(2.75rem, 9vw, 5.25rem); --fs-1: clamp(2rem, 4.6vw, 3.25rem); --fs-2: clamp(1.5rem, 3vw, 2.125rem); --fs-3: clamp(1.25rem, 2vw, 1.5rem); --fs-4: 1.125rem; --fs-body: 1.0625rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.6; --ls-hero: -0.035em; --ls-1: -0.028em; --ls-2: -0.02em; --ls-3: -0.012em; /* Spacing — 4px base */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6.5rem; --sp-12: 8rem; /* Layout */ --container: 68rem; --container-wide: 78rem; --container-narrow: 44rem; --measure: 68ch; --gutter: clamp(1.25rem, 5vw, 3rem); --header-h: 4rem; --r-sm: 6px; --r: 10px; --r-lg: 16px; --r-full: 999px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 200ms; --dur: 300ms; --dur-slow: 400ms; } /* Dark theme — deliberately warmer and lower-contrast than an inversion. Surfaces rise by lightness rather than by shadow. */ :root[data-theme="dark"] { --bg: #0c0c0d; --bg-sunken: #08080a; --surface: #141416; --surface-2: #1a1a1d; --text: #f1f1ef; --text-2: #a2a2a9; --text-3: #6f6f78; --border: #26262a; --border-strong: #3a3a40; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 2px 18px rgba(0, 0, 0, 0.55); --selection: rgba(94, 169, 245, 0.24); --overlay: rgba(12, 12, 13, 0.86); --scrim: rgba(4, 4, 5, 0.94); /* Dark needs a lighter accent to clear 4.5:1 on a near-black ground, and a dark foreground on the filled button rather than white. */ --accent: var(--accent-user-dark, #5ea9f5); --accent-strong: var(--accent-strong-user-dark, #8cc2fa); --btn-primary-fg: #0c0c0d; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0c0c0d; --bg-sunken: #08080a; --surface: #141416; --surface-2: #1a1a1d; --text: #f1f1ef; --text-2: #a2a2a9; --text-3: #6f6f78; --border: #26262a; --border-strong: #3a3a40; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 2px 18px rgba(0, 0, 0, 0.55); --selection: rgba(94, 169, 245, 0.24); --overlay: rgba(12, 12, 13, 0.86); --scrim: rgba(4, 4, 5, 0.94); --accent: var(--accent-user-dark, #5ea9f5); --accent-strong: var(--accent-strong-user-dark, #8cc2fa); --btn-primary-fg: #0c0c0d; } } /* 2. RESET & BASE ========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-synthesis-weight: none; text-rendering: optimizeLegibility; overflow-x: hidden; } ::selection { background: var(--selection); } img, svg, video { display: block; max-width: 100%; height: auto; } /* is only a wrapper for source selection; letting the inherit the parent's layout box keeps sizing rules like .gallery-item img working. */ picture { display: contents; } button, input, select, textarea { font: inherit; color: inherit; } h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; } ul[class], ol[class] { list-style: none; padding: 0; } a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease); } a:hover { text-decoration-color: currentColor; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } :focus:not(:focus-visible) { outline: none; } hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-8) 0; } /* 3. TYPOGRAPHY ============================================================ */ .t-hero { font-size: var(--fs-hero); line-height: var(--lh-tight); letter-spacing: var(--ls-hero); font-weight: 600; } h1, .t-1 { font-size: var(--fs-1); line-height: var(--lh-tight); letter-spacing: var(--ls-1); font-weight: 600; } h2, .t-2 { font-size: var(--fs-2); line-height: var(--lh-snug); letter-spacing: var(--ls-2); font-weight: 600; } h3, .t-3 { font-size: var(--fs-3); line-height: var(--lh-snug); letter-spacing: var(--ls-3); font-weight: 600; } h4, .t-4 { font-size: var(--fs-4); line-height: 1.4; font-weight: 600; } .lead { font-size: clamp(1.125rem, 2vw, 1.375rem); line-height: 1.5; letter-spacing: -0.011em; color: var(--text-2); max-width: 34ch; } .prose { max-width: var(--measure); color: var(--text-2); } .prose > * + * { margin-top: var(--sp-4); } .prose h2 { margin-top: var(--sp-8); color: var(--text); } .prose h3 { margin-top: var(--sp-6); color: var(--text); } .prose ul, .prose ol { padding-left: 1.25em; } .prose li + li { margin-top: var(--sp-2); } .prose img { border-radius: var(--r); margin: var(--sp-6) 0; } .prose blockquote { border-left: 2px solid var(--border-strong); padding-left: var(--sp-4); color: var(--text-3); font-style: normal; } .prose code { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 0.1em 0.35em; } .prose pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); padding: var(--sp-4); overflow-x: auto; } .prose pre code { background: none; border: 0; padding: 0; } .eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .muted { color: var(--text-2); } .dim { color: var(--text-3); } .mono { font-family: var(--font-mono); font-size: 0.9em; font-variant-numeric: tabular-nums; } /* 4. MOTION ================================================================ */ .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; will-change: auto; } @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; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* 5. LAYOUT PRIMITIVES ===================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--container-wide); } .container--narrow { max-width: var(--container-narrow); } .section { padding-block: var(--sp-10); } .section--tight { padding-block: var(--sp-8); } .section--lead { padding-block: var(--sp-11) var(--sp-9); } .section + .section { padding-top: 0; } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); } .stack > * + * { margin-top: var(--sp-4); } .stack-lg > * + * { margin-top: var(--sp-6); } .rule { border-top: 1px solid var(--border); } .skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 200; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); text-decoration: none; transition: top var(--dur-fast) var(--ease); } .skip-link:focus { top: var(--sp-4); } /* Buttons ------------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: 0.7rem 1.35rem; border-radius: var(--r-full); border: 1px solid var(--border-strong); background: transparent; color: var(--text); font-size: var(--fs-sm); font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .btn:hover { background: var(--surface-2); border-color: var(--text-3); } .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--btn-primary-fg); } .btn--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--btn-primary-fg); } .btn--quiet { border-color: transparent; padding-inline: var(--sp-3); } .btn--quiet:hover { background: var(--surface-2); border-color: transparent; } .btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); } /* Link with arrow --------------------------------------------------------- */ .link-arrow { display: inline-flex; align-items: center; gap: 0.4em; font-weight: 500; text-decoration: none; } .link-arrow::after { content: "→"; transition: transform var(--dur-fast) var(--ease); } .link-arrow:hover::after { transform: translateX(3px); } /* Tags -------------------------------------------------------------------- */ .tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); } .tag { display: inline-block; font-size: var(--fs-xs); line-height: 1.5; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: 0.2rem 0.65rem; white-space: nowrap; } .filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-7); } .filter { font-size: var(--fs-sm); color: var(--text-2); background: transparent; border: 1px solid var(--border); border-radius: var(--r-full); padding: 0.35rem 0.9rem; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .filter:hover { border-color: var(--border-strong); color: var(--text); } .filter[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); } /* Cards ------------------------------------------------------------------- */ .card { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-5); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow); } .card__title { font-size: var(--fs-4); letter-spacing: -0.01em; } .card__title a { color: inherit; text-decoration: none; } /* Stretched link keeps the whole card clickable without nesting anchors */ .card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .card__meta { font-size: var(--fs-sm); color: var(--text-3); } .card__body { font-size: var(--fs-sm); color: var(--text-2); margin: 0; } .card__cover { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; border-radius: var(--r); background: var(--surface-2); } .grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); } .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); } /* An empty state inside a grid should span it, not sit in one cell. */ .grid > .empty-state, .gallery-grid > .empty-state { grid-column: 1 / -1; } .empty-state { border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--text-3); font-size: var(--fs-sm); } /* 6. HEADER / FOOTER ======================================================= */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--overlay); -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease); } .site-header.is-stuck { border-bottom-color: var(--border); } .site-header__inner { display: flex; align-items: center; gap: var(--sp-4); min-height: var(--header-h); } .brand { font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.01em; color: var(--text); text-decoration: none; white-space: nowrap; } .brand span { color: var(--text-3); font-weight: 400; } .nav { display: flex; align-items: center; gap: var(--sp-1); margin-left: auto; } .nav a { color: var(--text-2); text-decoration: none; font-size: var(--fs-sm); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm); transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .nav a:hover { color: var(--text); background: var(--surface-2); } .nav a[aria-current="page"] { color: var(--text); font-weight: 500; } .nav__toggle { display: none; background: none; border: 0; padding: var(--sp-2); cursor: pointer; color: var(--text); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--r-full); border: 1px solid var(--border); background: transparent; cursor: pointer; color: var(--text-2); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); } .theme-toggle svg { width: 1rem; height: 1rem; } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } } @media (max-width: 44rem) { .nav__toggle { display: inline-flex; margin-left: auto; } .nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: var(--sp-3) var(--gutter) var(--sp-5); background: var(--bg); border-bottom: 1px solid var(--border); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .nav.is-open { transform: none; opacity: 1; pointer-events: auto; } .nav a { padding: var(--sp-3) 0; font-size: var(--fs-4); border-radius: 0; } .nav a:hover { background: none; } .nav .theme-toggle { margin-top: var(--sp-3); align-self: flex-start; } } .site-footer { border-top: 1px solid var(--border); margin-top: var(--sp-11); padding-block: var(--sp-7) var(--sp-8); color: var(--text-3); font-size: var(--fs-sm); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-6); align-items: center; justify-content: space-between; } .site-footer a { color: var(--text-2); text-decoration: none; } .site-footer a:hover { color: var(--text); } .social-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; } .social-row a { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); } .social-row svg { width: 1.05rem; height: 1.05rem; flex: none; } /* 7. HOME CHOOSER ========================================================== */ body.home { overflow: hidden; height: 100svh; } .chooser { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 100svh; isolation: isolate; transition: grid-template-columns var(--dur-slow) var(--ease); } .chooser__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--border); z-index: 2; transition: left var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); } .world { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--gutter); padding-bottom: clamp(2rem, 7vh, 4.5rem); text-decoration: none; color: var(--text); overflow: hidden; transition: background var(--dur-slow) var(--ease); } .world--personal { background: var(--bg); } .world--professional { background: var(--bg-sunken); } .world__inner { display: block; transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease); transform-origin: left bottom; max-width: 24rem; } .world--professional .world__inner { margin-left: auto; transform-origin: right bottom; text-align: right; } .world__label { font-size: clamp(1.5rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: var(--ls-2); line-height: 1.1; margin-bottom: var(--sp-3); } .world__line { font-size: var(--fs-sm); color: var(--text-2); margin: 0; max-width: 26ch; opacity: 0.85; transition: opacity var(--dur) var(--ease); } .world--professional .world__line { margin-left: auto; } .world__enter { display: inline-flex; align-items: center; gap: 0.4em; margin-top: var(--sp-4); font-size: var(--fs-sm); font-weight: 500; color: var(--accent); opacity: 0; transform: translateY(4px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .world:hover .world__enter, .world:focus-visible .world__enter { opacity: 1; transform: none; } /* Hover expansion */ @media (hover: hover) and (min-width: 46rem) { .chooser[data-hover="personal"] { grid-template-columns: 1.22fr 0.78fr; } .chooser[data-hover="professional"] { grid-template-columns: 0.78fr 1.22fr; } .chooser[data-hover="personal"] .chooser__divider { left: 61%; } .chooser[data-hover="professional"] .chooser__divider { left: 39%; } .chooser[data-hover="personal"] .world--personal .world__inner, .chooser[data-hover="professional"] .world--professional .world__inner { transform: scale(1.06); } .chooser[data-hover="personal"] .world--professional .world__inner, .chooser[data-hover="professional"] .world--personal .world__inner { opacity: 0.42; transform: scale(0.98); } } /* Centred name */ .chooser__identity { position: absolute; z-index: 6; /* above the intro panels, which are 5 */ top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; width: min(92vw, 60rem); padding-inline: var(--gutter); } .chooser__name { font-size: var(--fs-hero); font-weight: 600; letter-spacing: var(--ls-hero); line-height: var(--lh-tight); margin: 0; color: var(--text); } .chooser__role { margin-top: var(--sp-3); font-size: clamp(0.875rem, 1.5vw, 1.0625rem); color: var(--text-2); letter-spacing: -0.01em; } .chooser__hint { position: absolute; bottom: clamp(1rem, 3vh, 1.75rem); left: 50%; transform: translateX(-50%); z-index: 3; font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); pointer-events: none; transition: opacity var(--dur) var(--ease); } .chooser[data-hover] .chooser__hint { opacity: 0; } /* Home utility rail (theme toggle) */ .home-rail { position: fixed; z-index: 20; top: var(--sp-4); right: var(--gutter); display: flex; gap: var(--sp-2); } .home-rail .theme-toggle { background: var(--overlay); } /* Intro animation — runs once per session. Lives inside .chooser so it shares that stacking context: the panels cover the two halves (z-index 1) but pass under the centred name (z-index 6). */ .intro { position: fixed; inset: 0; z-index: 5; pointer-events: none; display: none; } body.home.is-intro .intro { display: block; } .intro__panel { position: absolute; top: 0; bottom: 0; width: 50.2%; background: var(--bg); } .intro__panel--l { left: 0; animation: intro-slide-l 900ms 620ms var(--ease-out) forwards; } .intro__panel--r { right: 0; animation: intro-slide-r 900ms 620ms var(--ease-out) forwards; } @keyframes intro-slide-l { to { transform: translateX(-101%); } } @keyframes intro-slide-r { to { transform: translateX(101%); } } body.home.is-intro .chooser__identity { animation: intro-name 620ms var(--ease) both; } @keyframes intro-name { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } } body.home.is-intro .world__inner, body.home.is-intro .chooser__hint, body.home.is-intro .home-rail { animation: intro-fade-up 600ms 1150ms var(--ease) both; } @keyframes intro-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Skipping the intro settles everything immediately */ body.home.is-intro-skipped .intro { display: none; } body.home.is-intro-skipped .chooser__identity, body.home.is-intro-skipped .world__inner, body.home.is-intro-skipped .chooser__hint, body.home.is-intro-skipped .home-rail { animation: none !important; opacity: 1; transform: none; } body.home.is-intro-skipped .chooser__identity { transform: translate(-50%, -50%); } body.home.is-intro-skipped .world--professional .world__inner { margin-left: auto; } /* Mobile: two stacked full-bleed cards */ @media (max-width: 46rem) { body.home { overflow: auto; height: auto; } .chooser { grid-template-columns: 1fr; grid-template-rows: auto 1fr 1fr; height: auto; min-height: 100svh; } .chooser__divider, .chooser__hint { display: none; } .chooser__identity { position: static; transform: none; width: auto; padding: clamp(4.5rem, 14vh, 7rem) var(--gutter) var(--sp-7); text-align: left; grid-row: 1; } body.home.is-intro .chooser__identity, body.home.is-intro-skipped .chooser__identity { transform: none; } .world { justify-content: center; min-height: 32svh; padding-block: var(--sp-7); border-top: 1px solid var(--border); } .world__inner, .world--professional .world__inner { transform: none; text-align: left; margin-left: 0; max-width: none; } .world--professional .world__line { margin-left: 0; } .world__enter { opacity: 1; transform: none; } /* Sliding panels only make sense either side of a vertical divider, so on the stacked layout the intro becomes a staggered fade instead. */ body.home.is-intro .intro { display: none; } body.home.is-intro .chooser__identity { animation: intro-fade-up 600ms var(--ease) both; } body.home.is-intro .world__inner { animation: intro-fade-up 600ms 240ms var(--ease) both; } body.home.is-intro .home-rail { animation: intro-fade-up 600ms 400ms var(--ease) both; } } @media (prefers-reduced-motion: reduce) { body.home.is-intro .intro { display: none; } body.home.is-intro .chooser__identity, body.home.is-intro .world__inner, body.home.is-intro .chooser__hint, body.home.is-intro .home-rail { animation: none; opacity: 1; } } /* 8. PAGE HERO & RESUME TIMELINE =========================================== */ .page-hero { padding-block: clamp(3.5rem, 10vh, 6.5rem) var(--sp-7); } .page-hero h1 { max-width: 18ch; } .page-hero .lead { margin-top: var(--sp-4); } .hero-figure { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; } .avatar { width: 5.5rem; height: 5.5rem; border-radius: var(--r-full); object-fit: cover; background: var(--surface-2); border: 1px solid var(--border); flex: none; } .avatar--mono { display: grid; place-items: center; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text-2); } .stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-8); padding-block: var(--sp-6); } .stat__value { font-size: var(--fs-2); font-weight: 600; letter-spacing: var(--ls-2); line-height: 1.1; } .stat__label { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-1); } /* Timeline ---------------------------------------------------------------- */ .timeline { position: relative; padding-left: var(--sp-6); } .timeline::before { content: ""; position: absolute; left: 0; top: 0.55rem; bottom: 0.55rem; width: 1px; background: var(--border); } .role { position: relative; padding-bottom: var(--sp-8); } .role:last-child { padding-bottom: 0; } .role::before { content: ""; position: absolute; left: calc(var(--sp-6) * -1); top: 0.5rem; width: 7px; height: 7px; border-radius: var(--r-full); background: var(--border-strong); transform: translateX(-3px); } .role--current::before { background: var(--accent); } .role__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); } .role__company { font-size: var(--fs-3); font-weight: 600; letter-spacing: var(--ls-3); } .role__dates { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; } .role__title { font-size: var(--fs-4); color: var(--text-2); margin-top: var(--sp-1); } .role__location { font-size: var(--fs-sm); color: var(--text-3); margin-top: var(--sp-1); } .role__bullets { margin-top: var(--sp-4); padding-left: 1.15em; color: var(--text-2); font-size: var(--fs-sm); max-width: var(--measure); } .role__bullets li + li { margin-top: var(--sp-3); } .role__bullets::marker { color: var(--text-3); } /* Skills ------------------------------------------------------------------ */ .skill-group { padding-block: var(--sp-5); border-top: 1px solid var(--border); display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); } .skill-group:first-child { border-top: 0; } .skill-group__name { font-size: var(--fs-sm); font-weight: 600; color: var(--text); padding-top: 0.15rem; } @media (max-width: 40rem) { .skill-group { grid-template-columns: 1fr; gap: var(--sp-2); } } /* Education & achievements ------------------------------------------------ */ .entry { display: grid; gap: var(--sp-1) var(--sp-5); grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); padding-block: var(--sp-5); border-top: 1px solid var(--border); } .entry:first-child { border-top: 0; } .entry__when { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; } .entry__what { font-weight: 600; } .entry__sub { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-1); } @media (max-width: 40rem) { .entry { grid-template-columns: 1fr; } } /* 9. PORTFOLIO ============================================================= */ .project-card__client { font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); } .project-card.is-hidden { display: none; } /* Detail pages build their own hero in JS rather than using .page-hero. */ #project-root .lead, #post-root .lead { margin-top: var(--sp-4); } .project-detail__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); align-items: center; color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--sp-4); } .detail-block { padding-block: var(--sp-6); border-top: 1px solid var(--border); display: grid; gap: var(--sp-3) var(--sp-6); grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); } .detail-block__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); padding-top: 0.3rem; } .detail-block__body { color: var(--text-2); max-width: var(--measure); } @media (max-width: 44rem) { .detail-block { grid-template-columns: 1fr; } } .back-link { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--fs-sm); color: var(--text-3); text-decoration: none; margin-bottom: var(--sp-5); } .back-link::before { content: "←"; } .back-link:hover { color: var(--text); } /* 10. BLOG & GALLERY ======================================================= */ .post-list { border-top: 1px solid var(--border); } .post-item { position: relative; display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--sp-2) var(--sp-5); padding-block: var(--sp-6); border-bottom: 1px solid var(--border); transition: background var(--dur-fast) var(--ease); } .post-item:hover { background: var(--surface-2); } .post-item__date { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; padding-top: 0.2rem; } .post-item__title { font-size: var(--fs-3); letter-spacing: var(--ls-3); } .post-item__title a { color: var(--text); text-decoration: none; } .post-item__title a::after { content: ""; position: absolute; inset: 0; } .post-item__excerpt { margin-top: var(--sp-2); color: var(--text-2); font-size: var(--fs-sm); max-width: var(--measure); } .post-item__tags { margin-top: var(--sp-3); } .post-item .draft-flag { display: inline-block; font-size: var(--fs-xs); color: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-full); padding: 0 0.5rem; margin-left: var(--sp-2); vertical-align: middle; } @media (max-width: 40rem) { .post-item { grid-template-columns: 1fr; } } .pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-8); } .pagination__status { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; } .post-header { padding-block: clamp(3rem, 8vh, 5rem) var(--sp-6); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-8); } .post-header__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); align-items: center; color: var(--text-3); font-size: var(--fs-sm); margin-top: var(--sp-4); } .post-cover { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; border-radius: var(--r-lg); margin-bottom: var(--sp-7); background: var(--surface-2); } /* Gallery ----------------------------------------------------------------- */ .gallery-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); } .gallery-item { position: relative; padding: 0; border: 0; background: var(--surface-2); border-radius: var(--r); overflow: hidden; cursor: zoom-in; aspect-ratio: 1; display: block; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); } .gallery-item:hover img { transform: scale(1.03); } .gallery-item__caption { position: absolute; inset: auto 0 0 0; padding: var(--sp-5) var(--sp-3) var(--sp-3); font-size: var(--fs-xs); color: #fff; text-align: left; background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent); opacity: 0; transition: opacity var(--dur) var(--ease); } .gallery-item:hover .gallery-item__caption, .gallery-item:focus-visible .gallery-item__caption { opacity: 1; } /* Lightbox ---------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: var(--scrim); padding: var(--sp-5); } .lightbox[open], .lightbox.is-open { display: grid; } .lightbox__figure { margin: 0; width: 100%; max-width: min(96vw, 74rem); max-height: 88svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); } /* Explicit min-width:0 and a definite parent keep the image from collapsing to zero in the shrink-to-fit chain. */ .lightbox__img { max-width: 100%; max-height: 78svh; width: auto; height: auto; min-width: 0; object-fit: contain; border-radius: var(--r); } .lightbox__caption { color: #d8d8d8; font-size: var(--fs-sm); text-align: center; margin: 0; } .lightbox__btn { position: absolute; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; width: 2.75rem; height: 2.75rem; border-radius: var(--r-full); display: grid; place-items: center; cursor: pointer; transition: background var(--dur-fast) var(--ease); } .lightbox__btn:hover { background: rgba(255, 255, 255, 0.18); } .lightbox__btn--close { top: var(--sp-4); right: var(--sp-4); } .lightbox__btn--prev { left: var(--sp-4); top: 50%; transform: translateY(-50%); } .lightbox__btn--next { right: var(--sp-4); top: 50%; transform: translateY(-50%); } body.lightbox-open { overflow: hidden; } /* 11. FORMS ================================================================ */ .form { display: grid; gap: var(--sp-5); max-width: 34rem; } .field { display: grid; gap: var(--sp-2); } .field label { font-size: var(--fs-sm); font-weight: 500; } .field input, .field textarea, .field select { width: 100%; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r); padding: 0.7rem 0.85rem; font-size: var(--fs-body); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); } .field textarea { min-height: 9rem; resize: vertical; } .field__error { font-size: var(--fs-sm); color: #c0392b; min-height: 1.2em; } :root[data-theme="dark"] .field__error { color: #ff8a7a; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field__error { color: #ff8a7a; } } .field.has-error input, .field.has-error textarea { border-color: #c0392b; } /* Honeypot — hidden from humans, visible to naive bots */ .hp-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .form-status { font-size: var(--fs-sm); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); background: var(--surface-2); display: none; } .form-status.is-visible { display: block; } .form-status.is-success { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); } .form-status.is-error { border-color: #c0392b; color: #c0392b; } :root[data-theme="dark"] .form-status.is-error { color: #ff8a7a; border-color: #ff8a7a; } .contact-grid { display: grid; gap: var(--sp-9); grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: start; } @media (max-width: 52rem) { .contact-grid { grid-template-columns: 1fr; gap: var(--sp-7); } } .contact-list { display: grid; gap: var(--sp-4); } .contact-list dt { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .contact-list dd { margin: var(--sp-1) 0 0; } /* 12. UTILITIES ============================================================ */ .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } [hidden] { display: none !important; } .no-js-note { padding: var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface-2); font-size: var(--fs-sm); margin-block: var(--sp-5); } .loading-shim { min-height: 30svh; } @media print { .site-header, .site-footer, .btn, .filter-bar, .theme-toggle { display: none !important; } body { background: #fff; color: #000; } .reveal { opacity: 1; transform: none; } }