/* ========================================================================= Peachy — Data Scientist Portfolio Design language inspired by dottxt.ai: warm cream canvas, technical minimalism, mono accents, numbered sections, restrained motion. All design tokens live in :root — change the brand here. ========================================================================= */ :root { /* ---- Palette ---- */ --cream: #F4F1EA; /* primary background */ --cream-alt: #ECE7DC; /* alternating section background */ --paper: #FBFAF6; /* raised surfaces (cards, terminal) */ --ink: #17150F; /* near-black text */ --ink-soft: #4B463B; /* body text */ --muted: #8A8272; /* labels, meta */ --line: #DED8C9; /* hairline borders */ --peach: #E79CB6; /* brand accent (Peachy!) */ --peach-deep: #D97FA0; /* accent hover / emphasis */ --gold: #BD932F; /* ---- Type ---- */ --font-sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* ---- Layout ---- */ --maxw: 1180px; --gutter: clamp(1.25rem, 4vw, 3rem); --radius: 14px; /* ---- Motion ---- */ --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ---------------------------------------------------------------- dark theme Same token names, inverted lightness, warm (not cold-gray) so the "peachy" grain survives; the peach accents stay put. Applied when is set (JS toggle + the anti-FOUC script in ). Because backgrounds/text/borders/gradients all flow through these tokens — and the ASCII animations inherit --ink via .ascii-screen — the whole page, including every animation, recolors from this one block. Landmine fixes for the few hardcoded colors (closer, card shadow) live next to their rules. */ [data-theme="dark"] { --cream: #17150F; /* base background (was the ink near-black) */ --cream-alt: #1E1B14; /* alternating section background */ --paper: #23201A; /* raised surfaces (cards) */ --ink: #F1ECE0; /* primary text — also drives .ascii-screen */ --ink-soft: #C9C2B3; /* body text */ --muted: #9A9384; /* labels, meta */ --line: #332F26; /* hairline borders */ --peach: #E79CB6; /* brand accent — reads well on dark, kept as-is */ --peach-deep: #EDA9C1; /* accent / emphasis — lightened for dark contrast */ } /* ---------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } /* overflow-x: hidden on the root too (not just body) — iOS Safari's root scroller is , so clamping x here is what actually stops sideways panning of off-screen content (e.g. the shifted .stage behind an open plane). `hidden` (not `clip`) is deliberate: it makes overflow-y compute to `auto`, so vertical scrolling keeps working — `clip` here would leave overflow-y `visible` and disable vertical scroll entirely. */ html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; } p { margin: 0; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } strong { font-weight: 600; } img { max-width: 100%; display: block; } .container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } /* ---- shared: highlight word + typewriter caret ---- */ .hl { color: var(--peach-deep); position: relative; white-space: nowrap; } .hl__caret { color: currentColor; font-weight: 400; animation: blink 0.8s step-end infinite; } /* ---- shared: buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.01em; padding: 0.72rem 1.15rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn--primary { background: var(--ink); color: var(--cream); } .btn--primary:hover { background: var(--peach-deep); color: var(--ink); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { border-color: var(--ink); } /* ================================================================= NAV */ .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.4) blur(10px); background: color-mix(in srgb, var(--cream) 82%, transparent); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .nav.is-scrolled { border-bottom-color: var(--line); } .nav__inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .nav__brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; } .nav__logo { display: inline-flex; align-items: center; line-height: 1; color: var(--ink); } .nav__logo svg { width: 22px; height: 22px; display: block; } .nav__name { position: relative; display: inline-block; font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: -0.02em; } .nav__dot { color: var(--peach-deep); } /* elias ⇄ saile easter egg: hover reflects the wordmark across a peach axis */ .nav__axis { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: var(--peach); opacity: 0; transition: opacity 0.3s var(--ease); pointer-events: none; } .nav__word { display: inline-block; transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .nav__word--saile { position: absolute; left: 0; top: 0; opacity: 0; transform: translateX(8px); color: var(--peach-deep); } .nav__brand:hover .nav__word--elias, .footer__brand .nav__name:hover .nav__word--elias { opacity: 0; transform: translateX(-8px); } .nav__brand:hover .nav__word--saile, .footer__brand .nav__name:hover .nav__word--saile { opacity: 1; transform: translateX(0); } .nav__brand:hover .nav__axis, .footer__brand .nav__name:hover .nav__axis { opacity: 0.5; } .nav__links { display: flex; gap: 2rem; font-family: var(--font-mono); font-size: 0.85rem; } .nav__links a { position: relative; color: var(--ink-soft); transition: color 0.2s; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 1.5px; width: 0; background: var(--peach-deep); transition: width 0.3s var(--ease); } .nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { width: 100%; } .nav__cta { display: inline-flex; } .nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; } .nav__burger span { width: 22px; height: 2px; background: var(--ink); transition: transform 0.3s var(--ease), opacity 0.3s; } .nav__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__burger.is-open span:nth-child(2) { opacity: 0; } .nav__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__drawer { display: none; flex-direction: column; gap: 0.25rem; padding: 1rem var(--gutter) 1.5rem; border-bottom: 1px solid var(--line); background: var(--cream); } .nav__drawer a { font-family: var(--font-mono); padding: 0.6rem 0; color: var(--ink-soft); } .nav__drawer .btn { margin-top: 0.5rem; justify-content: center; } /* ---- theme toggle (sun/moon) ---- */ /* Icon-only in the top bar; a labelled row in the mobile drawer. Only one of the sun/moon glyphs (and one drawer label) shows per theme, via display. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 0.35rem; flex: none; background: none; border: 1px solid transparent; border-radius: 999px; color: var(--ink-soft); font-size: 1.05rem; line-height: 1; cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); } .theme-toggle:hover { color: var(--ink); border-color: var(--line); } .theme-toggle__moon { display: none; } .theme-toggle__sun { display: inline; } [data-theme="dark"] .theme-toggle__sun { display: none; } [data-theme="dark"] .theme-toggle__moon { display: inline; } /* drawer variant: left-aligned icon + swapping text label, like a drawer link */ .theme-toggle__label { display: none; } .theme-toggle--drawer { width: auto; height: auto; justify-content: flex-start; gap: 0.6rem; margin: 0; padding: 0.6rem 0; border: 0; border-radius: 0; font-family: var(--font-mono); font-size: 0.95rem; color: var(--ink-soft); } .theme-toggle--drawer .theme-toggle__label--to-dark { display: inline; } .theme-toggle--drawer .theme-toggle__label--to-light { display: none; } [data-theme="dark"] .theme-toggle--drawer .theme-toggle__label--to-dark { display: none; } [data-theme="dark"] .theme-toggle--drawer .theme-toggle__label--to-light { display: inline; } /* ================================================================= HERO */ .hero { padding: clamp(3rem, 8vw, 6rem) 0 0; } .hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .eyebrow__tick { width: 8px; height: 8px; border-radius: 50%; background: var(--peach); box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach) 35%, transparent); } .hero__title { font-size: clamp(2.6rem, 6.5vw, 5rem); margin: 1.2rem 0 1.4rem; } .hero__lede { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--ink-soft); max-width: 34ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2rem; } /* ---- terminal ---- */ .terminal { background: #1c1a15; color: #ece7dc; border-radius: var(--radius); border: 1px solid #2c2920; box-shadow: 0 30px 60px -30px rgba(23, 21, 15, 0.45), 0 2px 0 rgba(255,255,255,0.02) inset; overflow: hidden; font-family: var(--font-mono); } .terminal__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.9rem; background: #24211a; border-bottom: 1px solid #333025; } .terminal__dot { width: 11px; height: 11px; border-radius: 50%; background: #4a463a; } .terminal__dot:nth-child(1) { background: #E79CB6; } .terminal__dot:nth-child(2) { background: #d4b25a; } .terminal__dot:nth-child(3) { background: #7fb08a; } .terminal__file { margin-left: 0.6rem; font-size: 0.72rem; color: #8a8272; } .terminal__tabs { display: flex; gap: 2px; background: #24211a; border-bottom: 1px solid #333025; padding: 0 0.5rem; overflow-x: auto; } .terminal__tab { appearance: none; background: transparent; border: 0; color: #8a8272; font-family: var(--font-mono); font-size: 0.72rem; white-space: nowrap; padding: 0.5rem 0.7rem; cursor: pointer; border-bottom: 2px solid transparent; transition: color .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease); } .terminal__tab:hover { color: #cfc8b8; } .terminal__tab.is-active { color: #ece7dc; background: #1c1a15; border-bottom-color: #E79CB6; } .terminal__body { margin: 0; padding: 1.2rem 1.3rem 1.5rem; font-size: 0.82rem; line-height: 1.7; white-space: pre-wrap; word-break: break-word; min-height: 300px; } .terminal__body .tok-prompt { color: #E79CB6; } .terminal__body .tok-comment { color: #6f6a5b; } .terminal__body .tok-kw { color: #d4b25a; } .terminal__body .tok-str { color: #9ecb9e; } .terminal__body .tok-out { color: #cfc8b8; } .terminal__body .tok-num { color: #e79cb6; } .terminal__body .tok-cmd { color: #ece7dc; } .terminal__body .tok-celebrate { color: #7fb08a; } /* the terminal invites clicking so visitors can type at the prompt (easter egg) */ .terminal__body { cursor: text; } /* subtle affordance while input mode is active */ .terminal--input { box-shadow: 0 0 0 1px #E79CB6 inset, 0 30px 60px -30px rgba(23, 21, 15, 0.45); } .cursor { display: inline-block; color: #E79CB6; animation: blink 0.8s step-end infinite; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ================================================================= MARQUEE */ .marquee { margin-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.1rem 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; gap: 3rem; width: max-content; animation: scroll var(--dur, 32s) linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { font-family: var(--font-mono); font-size: 0.95rem; color: var(--muted); display: inline-flex; align-items: center; gap: 3rem; white-space: nowrap; } .marquee__item::after { content: "◇"; color: var(--peach); font-size: 0.7rem; } @keyframes scroll { to { transform: translateX(-50%); } } /* ================================================================= SECTIONS */ .section { padding: clamp(4rem, 9vw, 7.5rem) 0; } .section--alt { background: var(--cream-alt); } .section__grid { display: grid; grid-template-columns: 200px 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); } .section__content { min-width: 0; } /* let the 1fr track clip the carousel instead of blowing out */ .section__label { display: flex; flex-direction: column; gap: 0.3rem; position: sticky; top: 100px; align-self: start; } .section__num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--peach-deep); } .section__kicker { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; } .section__title { font-size: clamp(1.8rem, 3.6vw, 2.9rem); max-width: 20ch; } .section__lede { font-size: clamp(1.05rem, 1.5vw, 1.15rem); color: var(--ink-soft); max-width: 58ch; margin-top: 1.2rem; } /* ---- stats ---- */ .stat-row { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 2.6rem; } .stat { display: flex; flex-direction: column; } .stat__num { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1; } .stat__unit { display: inline; color: var(--peach-deep); } .stat .stat__num { display: inline; } /* num + unit share a line; .stat__unit inline is set above */ .stat__label { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; } /* ---- work cards ---- */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-top: 2.6rem; } .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.5rem 1.7rem; transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--peach); box-shadow: 0 24px 40px -28px rgba(23,21,15,0.35); } [data-theme="dark"] .card:hover { box-shadow: 0 24px 40px -28px rgba(0,0,0,0.75); } .card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.1rem; } .card__tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--peach-deep); text-transform: uppercase; letter-spacing: 0.06em; } .card__year { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); } .card__title { font-size: 1.3rem; margin-bottom: 0.6rem; } .card__body { color: var(--ink-soft); font-size: 0.98rem; } .card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; } .card__meta li { font-family: var(--font-mono); font-size: 0.72rem; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem 0.65rem; } /* ---- work carousel ---- */ .carousel { margin-top: 2.6rem; } .cards--carousel { display: grid; /* overrides the base .cards grid */ grid-template-columns: none; grid-auto-flow: column; /* fill down each column, then across */ grid-template-rows: repeat(2, 1fr); /* two stacked rows per column */ grid-auto-columns: clamp(210px, 32%, 260px); gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0.25rem 0.25rem 1rem; scrollbar-width: thin; scrollbar-color: var(--peach) transparent; } .cards--carousel:focus-visible { outline: 2px solid var(--peach-deep); outline-offset: 3px; } .cards--carousel::-webkit-scrollbar { height: 6px; } .cards--carousel::-webkit-scrollbar-thumb { background: var(--peach); border-radius: 999px; } .cards--carousel .card { scroll-snap-align: start; padding: 1.1rem 1.15rem 1.2rem; /* tighter than the default card for a shorter card */ /* opacity is driven by JS as cards clip past the track edges */ transition: opacity 0.45s var(--ease), transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease); } .cards--carousel .card:active { cursor: grabbing; } /* compact internal spacing so the two rows sit shorter */ .cards--carousel .card__top { margin-bottom: 0.7rem; } .cards--carousel .card__title { font-size: 1.12rem; margin-bottom: 0.4rem; } .cards--carousel .card__body { font-size: 0.9rem; } .cards--carousel .card__meta { margin-top: 0.8rem; } .cards--carousel .card__open { margin-top: 0.8rem; } .carousel__ctrl { display: flex; align-items: center; gap: 1rem; margin-top: 0.4rem; } .carousel__arrow { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); font-family: var(--font-mono); font-size: 1rem; color: var(--peach-deep); cursor: pointer; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease); } .carousel__arrow:hover:not(:disabled) { border-color: var(--peach); transform: translateY(-2px); } .carousel__arrow:disabled { opacity: 0.35; cursor: default; } .carousel__dots { display: flex; gap: 0.45rem; margin: 0 auto; flex-wrap: wrap; justify-content: center; } .carousel__dot { /* content-box + padding keeps the visible dot 7px while the tap target is ~23px */ box-sizing: content-box; width: 7px; height: 7px; border-radius: 999px; border: 0; padding: 8px; background-color: var(--line); background-clip: content-box; cursor: pointer; transition: background-color 0.3s var(--ease), transform 0.3s var(--ease); } .carousel__dot.is-active { background-color: var(--peach-deep); transform: scale(1.35); } /* ---- skills ---- */ .skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.6rem; } .skills__head { font-family: var(--font-mono); font-size: 0.85rem; color: var(--peach-deep); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--line); } .skills__list li { padding: 0.5rem 0; color: var(--ink-soft); border-bottom: 1px dashed var(--line); font-size: 0.97rem; } .skills__list li:last-child { border-bottom: 0; } /* ---- writing ---- */ .posts { margin-top: 2.4rem; border-top: 1px solid var(--line); } .post__link { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.35rem 0.5rem; border-bottom: 1px solid var(--line); transition: padding 0.3s var(--ease), background 0.3s var(--ease); } .post__link:hover { padding-left: 1.4rem; background: linear-gradient(90deg, color-mix(in srgb, var(--peach) 14%, transparent), transparent); } .post__title { font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 500; } .post__meta { display: flex; align-items: center; gap: 1rem; font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); white-space: nowrap; } .post__arrow { transition: transform 0.3s var(--ease); color: var(--peach-deep); } .post__link:hover .post__arrow { transform: translateX(5px); } /* ---- closer ---- */ .closer { background: var(--ink); color: var(--cream); position: relative; overflow: hidden; } .closer .container { position: relative; z-index: 1; } /* content sits above the plasma backdrop */ /* In dark mode the closer stays a dark band (its identity on the light site) instead of inverting with the page: re-pin its LOCAL ink/cream so the bg + gradient scrims stay dark and the copy stays light. Its hardcoded tints (#d7cfbd / #9c9484 / #c9c2b3 / #3a372e below) already suit a dark band, and the plasma inherits the dark-tuned #d7cfbd tint — so nothing else changes. */ [data-theme="dark"] .closer { --ink: #100E09; --cream: #F1ECE0; } /* full-bleed ASCII plasma field behind the content */ .closer__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } /* ASCII.mount() adds `ascii-screen` (color:var(--ink)); scope our tint more specifically so it wins. Muted cream at low opacity → a faint moving texture. */ .closer__bg .ascii-screen, .closer__ascii { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); line-height: 1; white-space: pre; color: #d7cfbd; opacity: 0.32; } /* scrim: darken just behind the (left-anchored) heading + buttons so the copy stays legible, while letting the plasma read boldly across the rest */ .closer__bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 55% 75% at 30% 50%, var(--ink) 0%, color-mix(in srgb, var(--ink) 40%, transparent) 50%, transparent 82%), linear-gradient(var(--ink), transparent 16%, transparent 84%, var(--ink)); } .closer .section__num, .closer .section__kicker { color: color-mix(in srgb, var(--peach) 80%, var(--cream)); } .closer .section__kicker { color: #9c9484; } .closer__title { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 16ch; } .closer .section__lede { color: #c9c2b3; } .closer .btn--ghost { color: var(--cream); border-color: #3a372e; } .closer .btn--ghost:hover { border-color: var(--cream); } .closer .hl { color: var(--peach); } /* ================================================================= FOOTER */ .footer { background: var(--cream-alt); border-top: 1px solid var(--line); padding: 3.5rem 0 2rem; } .footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 2.5rem; } .footer__brand { display: flex; flex-direction: column; gap: 0.4rem; } .footer__brand .nav__logo { display: inline-flex; align-self: flex-start; } .footer__brand .nav__name { display: inline-block; align-self: flex-start; } .footer__tag { color: var(--muted); font-size: 0.92rem; margin-top: 0.5rem; } .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .footer__col { display: flex; flex-direction: column; gap: 0.6rem; } .footer__head { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.3rem; } .footer__col a { color: var(--ink-soft); font-size: 0.92rem; transition: color 0.2s; } .footer__col a:hover { color: var(--peach-deep); } .footer__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); } /* ---- work card as a link/button ---- */ .card--link { cursor: pointer; } .card--link:focus-visible { outline: 2px solid var(--peach-deep); outline-offset: 3px; } .card__open { display: inline-block; margin-top: 1.2rem; font-family: var(--font-mono); font-size: 0.78rem; color: var(--peach-deep); opacity: 0; transform: translateX(-4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .card--link:hover .card__open, .card--link:focus-visible .card__open { opacity: 1; transform: none; } /* ================================================================= REVEAL */ [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } [data-reveal].is-in { opacity: 1; transform: none; } /* ================================================================= PROJECT PLANES */ /* The main site shifts back like a plane as a detail view slides in over it. */ /* base = the state we return to when a plane closes → slower "back" animation. The is-planed state below keeps the faster duration for opening. */ .stage { transition: transform 0.9s var(--ease), opacity 0.9s var(--ease); } body.is-planed { overflow: hidden; } body.is-planed .stage { transform: translateX(-8%) scale(0.985); opacity: 0.35; transition: transform 0.5s var(--ease), opacity 0.5s var(--ease); } .planes { position: absolute; } /* just a container; planes are fixed */ .plane { position: fixed; inset: 0; z-index: 80; background: var(--cream); color: var(--ink); overflow-y: auto; overflow-x: clip; /* clip (not hidden) = no x-axis scroll container, so no side-pan on mobile */ touch-action: pan-y pinch-zoom; /* touch: only vertical panning (+ pinch-zoom); blocks left/right drag on the plane */ transform: translateX(100%); visibility: hidden; /* closing (returning to this base state) slides out slower; the visibility delay matches the duration so the plane stays visible for the full slide */ transition: transform 0.9s var(--ease), visibility 0s linear 0.9s; } .plane.is-open { transform: none; visibility: visible; transition: transform 0.5s var(--ease); } /* --- project→project navigation (see script.js navigateTo) --- The next plane slides in ON TOP of the (stationary) current one, so the dimmed main page is never revealed — a seamless plane-to-plane hop. `--incoming` lifts it above the outgoing plane; `--from-left` parks it left so a "prev" hop enters from the left instead of the right. */ .plane--incoming { z-index: 90; } .plane--from-left { transform: translateX(-100%); } /* --- mirror variant (personal-works planes) --- A horizontal mirror of the work planes: the detail view slides in from the LEFT, the ASCII graphic sits on the RIGHT, and the prev/next nav group moves to the LEFT of the bar (back button to the right). Everything else is shared. `.plane.is-open` (two classes) still beats these single-class rules, so the open state resolves to transform:none as usual. */ .plane--mirror { transform: translateX(-100%); } /* parked off-screen LEFT */ .plane--from-right { transform: translateX(100%); } /* mirror "prev" enters from the right */ .plane--mirror .plane__grid { grid-template-columns: 1.05fr 0.95fr; } .plane--mirror .plane__content { order: 1; } /* text on the LEFT */ .plane--mirror .plane__media { order: 2; transform: translate(1.75rem, 2.5rem); } /* graphic RIGHT, nudged toward the right edge */ .plane--mirror .plane__bar-inner { flex-direction: row-reverse; } /* nav LEFT, back RIGHT */ body.is-planed--mirror .stage { transform: translateX(8%) scale(0.985); } /* page shifts RIGHT */ /* --- data-story planes (.plane--story) --- The personal-works planes carry an SVG data story: a TL;DR panel + a hero chart in .plane__media. Charts (.ds-*) are styled by side-projects/ds-charts.css; these rules cover the story chrome the toolkit stylesheet leaves to the host. */ .plane--story .plane__content { max-width: 62ch; } /* The header's soft bottom-fade (.plane__head::after) is meant to dissolve plain scrolling text as it passes under the pinned heading. On a story plane the first thing under the header is the boxed TL;DR, and dissolving a bordered panel reads as "blending", so drop the fade here — content then clips crisply under the solid header instead. This only removes a visual overlay; the header/media sticky offsets are untouched, so the pinned title still releases cleanly at the bottom. */ .plane--story .plane__head::after { display: none; } /* give the TL;DR the same top clearance a first .plane__block gets (the adjacent sibling here is .plane__tldr, so the base .plane__head + .plane__block rule misses it) */ .plane--story .plane__head + .plane__tldr { margin-top: 2.5rem; } /* TL;DR is a native
disclosure: collapsed to a clickable summary bar, click to reveal the takeaways. No JS — the browser handles open/close. */ .plane--story .plane__tldr { background: var(--cream-alt); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 2rem; overflow: hidden; } .plane__tldr__summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 1rem; padding: 0.95rem 1.3rem; } .plane__tldr__summary::-webkit-details-marker { display: none; } /* Safari's default triangle */ .plane__tldr__summary:focus-visible { outline: 2px solid var(--peach-deep); outline-offset: -2px; border-radius: var(--radius); } .plane__tldr__label { font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); transition: color 0.2s var(--ease); } .plane__tldr__summary:hover .plane__tldr__label { color: var(--ink); } .plane__tldr__hint { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--peach-deep); } .plane__tldr__hint::after { content: "▸"; display: inline-block; margin-left: .45rem; transition: transform 0.2s var(--ease); } .plane--story .plane__tldr[open] .plane__tldr__hint::after { transform: rotate(90deg); } .plane__tldr__body { padding: 0 1.3rem 1.15rem; } .plane__tldr__body ul { margin: 0; padding-left: 1.2rem; } .plane__tldr__body li { margin: .3rem 0; color: var(--ink-soft); } /* bar: prev/next + "back to home" cluster (right, via the mirror row-reverse) with the crumb + a theme toggle on the other side (the nav toggle is hidden behind the full-screen plane, so the plane carries its own) */ .plane__bar-end { display: flex; align-items: center; gap: 0.8rem; } .plane__bar-end .theme-toggle { flex: none; } /* a second "Next project" call-to-action at the foot of the story (same data-dir, so it's auto-wired to navigateTo like the bar buttons) */ .plane__next { margin-top: clamp(2rem, 5vw, 3.5rem); padding-top: 1.6rem; border-top: 1px solid var(--line); } .plane__next-btn { cursor: pointer; padding: 0.75rem 1.3rem; font-size: 0.9rem; } .ds-hero-panel { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem 1.3rem; } .ds-hero-cap { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-top: .6rem; } /* sticky top bar with back button */ .plane__bar { position: sticky; top: 0; z-index: 5; backdrop-filter: saturate(1.4) blur(10px); background: color-mix(in srgb, var(--cream) 82%, transparent); border-bottom: 1px solid var(--line); } .plane__bar-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .plane__back { cursor: pointer; } .plane__crumb { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } /* prev/next project controls, grouped opposite the back button */ .plane__bar-nav { display: flex; align-items: center; gap: 0.6rem; } .plane__nav-btn { cursor: pointer; padding: 0.5rem 0.85rem; font-size: 0.8rem; } .plane__bar-nav .plane__crumb { margin-left: 0.4rem; } /* two columns: pinned graphic | scrolling text */ .plane__grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(1.5rem, 4vw, 3.5rem); /* keep the trailing space modest so the pinned graphic/heading stay put to the very bottom instead of unsticking early over a tall empty gap */ padding: clamp(2rem, 5vw, 4rem) var(--gutter) clamp(3rem, 7vw, 5rem); } .plane__media { /* `top` matches the media's natural resting offset (bar 69px + grid top padding) — same as .plane__head — so the graphic pins exactly where it starts and never slides up before sticking. */ position: sticky; top: calc(69px + clamp(2rem, 5vw, 4rem)); align-self: start; /* nudge the graphic left toward the page edge and down so it reads as vertically balanced against the tall text column (transform is purely visual — it doesn't affect the sticky math) */ transform: translate(-1.75rem, 2.5rem); } /* let both columns shrink below their content's intrinsic width so the wide ASCII 
 and the long heading can't force horizontal overflow on mobile */
.plane__media, .plane__content { min-width: 0; }

/* animation sits directly on the page — no card, same background as the page.
   Height is capped to the viewport (minus the pinned bar + breathing room) so
   the graphic always fits on screen and lets go in step with the heading at the
   very bottom, instead of over-scrolling up while the heading stays pinned. */
.ascii-panel {
  background: var(--cream);
  overflow: hidden;
  height: min(720px, calc(100vh - 220px));
  height: min(720px, calc(100dvh - 220px));
  display: flex; flex-direction: column;
}
.ascii-screen {
  flex: 1; min-width: 0; max-width: 100%; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); line-height: 1; white-space: pre;
  color: var(--ink);
  overflow: hidden;
}

/* text column: heading pins, only the body blocks scroll.
   `top` matches the head's natural resting offset — bar (69px incl. border) +
   the grid's top padding — so it pins exactly where it starts and never
   visibly slides up before sticking. */
.plane__head {
  position: sticky; top: calc(69px + clamp(2rem, 5vw, 4rem)); z-index: 4;
  background: var(--cream);
  padding: 1.4rem 0 1.6rem;
}
/* stack pills sit under the title inside the pinned header */
.plane__head .plane__meta { margin-top: 1.15rem; }
/* the head pins below a gap (the grid's top padding); fill that gap with the
   page colour so body text scrolling up doesn't peek between bar and heading */
.plane__head::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: calc(clamp(2rem, 5vw, 4rem) + 2px);
  background: var(--cream);
  pointer-events: none;
}
/* soft fade so scrolling text dissolves as it passes under the pinned heading */
.plane__head::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 1rem;
  background: linear-gradient(var(--cream), transparent);
  pointer-events: none;
}
.plane__tag { font-family: var(--font-mono); font-size: 0.78rem; color: var(--peach-deep); text-transform: uppercase; letter-spacing: 0.06em; }
.plane__title { font-size: clamp(2rem, 5vw, 3.4rem); margin: 0.7rem 0 0; max-width: 18ch; }
/* the whole title lives inside .hl (which is nowrap for short inline phrases) —
   let it wrap here so long titles don't overflow narrow screens */
.plane__title .hl { white-space: normal; }
.plane__block { margin-bottom: clamp(2.4rem, 6vw, 4rem); max-width: 56ch; }
/* clear the header's fade so the first block's heading isn't dimmed at rest
   (the head is the first child, so target the block right after it) */
.plane__head + .plane__block { margin-top: 2.5rem; }
.plane__block h2 { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin-bottom: 0.7rem; }
.plane__block p { color: var(--ink-soft); font-size: 1.02rem; }
.plane__list { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.plane__list li { position: relative; padding-left: 1.4rem; color: var(--ink-soft); }
.plane__list li::before { content: "→"; position: absolute; left: 0; color: var(--peach-deep); }
.plane__meta { margin-top: 0.5rem; }

/* plane reveal (mirrors the global reveal, but plane-scoped) */
.plane__block[data-plane-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.plane__block.is-in { opacity: 1; transform: none; }

/* ================================================================= RESPONSIVE */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .terminal { order: 2; }
  .section__grid { grid-template-columns: 1fr; }
  .section__label { position: static; flex-direction: row; gap: 0.8rem; align-items: center; }
  .cards { grid-template-columns: 1fr; }
  .cards--carousel { grid-template-columns: none; }   /* stay a horizontal scroll row */
  .skills { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .plane__grid { grid-template-columns: 1fr; }
  .plane__media { position: static; transform: none; }
  /* Mirror planes: restate the single-column collapse here (the .plane--mirror
     rules ~477-479 out-specify the plain .plane__grid collapse above) AND splice
     the hero chart in directly UNDER the title — not above everything, not below
     everything (the old bug). .plane__head is nested inside .plane__content, so
     promote the content's children into the grid (display:contents) and order
     them: title, then chart, then the rest of the story. row-gap:0 lets the story
     blocks' own margins stay the single source of vertical rhythm (blocks
     self-cap at 56ch, so losing the content wrapper's 62ch max-width doesn't
     matter). */
  .plane--mirror .plane__grid { grid-template-columns: 1fr; row-gap: 0; }
  .plane--mirror .plane__content { display: contents; }
  /* min-width:0 mirrors line ~579: the content wrapper's box (which carried it)
     is gone under display:contents, so restore it on the promoted children to
     keep wide charts from forcing horizontal overflow */
  .plane--mirror .plane__content > * { order: 3; min-width: 0; }   /* story body, below the chart */
  .plane--mirror .plane__head { order: 1; }               /* title first */
  .plane--mirror .plane__media { order: 2; transform: none; margin: 2rem 0; }  /* chart under the title */
  .plane__head { position: static; padding: 0 0 0.5rem; }
  .plane__head::after { display: none; }
  .ascii-panel { height: 320px; }
  /* clip chart labels/callouts that paint outside the viewBox (ds-charts.css sets
     overflow:visible for desktop overhang) so they can't bleed past the narrow
     column and become a side-scroll. End-labels sit inside each chart's reserved
     right margin, so nothing intended is cut off. */
  .plane .ds-chart svg { overflow: hidden; }
}
@media (max-width: 720px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav__drawer.is-open { display: flex; }
  .footer__cols { grid-template-columns: 1fr 1fr; }
  .cards--carousel { grid-auto-columns: clamp(200px, 70%, 250px); }   /* next column peeks */
  .hl { white-space: normal; }   /* allow highlight phrases to wrap on narrow screens */
  /* condense the plane bar so it fits: drop the crumb + the back button's long
     text ("Back → " instead of "Back to home → "), tighten gaps */
  .plane__crumb { display: none; }
  .plane__back-full { display: none; }
  .plane__nav-btn { padding: 0.5rem 0.7rem; }
  .plane__back { padding-left: 0.9rem; padding-right: 0.9rem; }
  /* tighten the side-projects (story/mirror) plane's horizontal margins on phones
     so charts + text use more of the narrow screen (was up to var(--gutter) 3rem) */
  .plane--mirror .plane__grid,
  .plane--story  .plane__grid { padding-left: 1rem; padding-right: 1rem; }
}

/* ================================================================= A11Y */
:focus-visible { outline: 2px solid var(--peach-deep); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .cursor { animation: none; }
  .cards--carousel { scroll-behavior: auto; }
  .plane__block[data-plane-reveal] { opacity: 1; transform: none; }
  body.is-planed .stage { transform: none; opacity: 1; }
  /* keep the wordmark static — no saile flip on hover */
  .nav__brand:hover .nav__word--elias, .footer__brand .nav__name:hover .nav__word--elias { opacity: 1; transform: none; }
  .nav__brand:hover .nav__word--saile, .footer__brand .nav__name:hover .nav__word--saile { opacity: 0; }
  .nav__brand:hover .nav__axis, .footer__brand .nav__name:hover .nav__axis { opacity: 0; }
}