/* site.css — generated by build.js. DO NOT EDIT BY HAND.
Edit fonts.css, colors.css, sizes.css, styles.css, sections.css and re-run build.bat. */
/* ===== fonts.css ===== */
/* fonts.css — generated: Google Fonts @font-face rules, inlined so the
browser starts downloading the fonts without first fetching a
stylesheet from fonts.googleapis.com. The font files themselves still
come from Google's CDN (fast). Regenerate with: build.bat --fonts */
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtGmSq17w.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3ZmX5slCNuHLi8bLeY9MK7whWMhyjYrEtImSo.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYp3tKgS4.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtK.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwhsk.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'JetBrains Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJuktqQ4E.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/outfit/v15/QGYvz_MVcBeNP4NJtEtq.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===== colors.css ===== */
/* ============================================================================
COLORS — single source of truth for every visual color on the site
============================================================================
Edit any value below and the entire site updates on save+refresh.
Every other CSS file and React component reads from these CSS variables.
Each color is a CSS custom property (a "variable"). To use a color in CSS:
background: var(--lilac);
To reference it in inline JSX styles:
style={{ background: "var(--lilac)" }}
Sections:
1. Brand palette — the headline colors (lilac, pink, peach, mint, sky)
2. Day mode — light, pastel surfaces & text
3. Night mode — deep lavender surfaces & soft glow text
4. Deep-purple stops — used in dark gradients (stream box, jam card, etc.)
5. On-dark text — text painted onto deep-purple backgrounds
6. Polaroid pins — colored pushpins on the gallery polaroids
7. Special accents — the twitch "LIVE" red dot, etc.
============================================================================ */
/* ─── 1. BRAND PALETTE (shared between day and night) ─────────────────────── */
:root {
--lilac: #b7a8ff; /* main brand color */
--lilac-deep: #8a78e0;
--lilac-pale: #c9bcff;
--pink: #ffb6d2;
--pink-hot: #ff9ec7;
--peach: #ffd2a8;
--peach-soft: #ffeac0;
--mint: #b6ecd3;
--sky: #a8dcff;
--cyan-glow: #8be3ff;
--sparkle-day-extra: #a08aff; /* third sparkle color in day mode */
}
/* ─── 2. DAY MODE ─────────────────────────────────────────────────────────── */
:root, .theme-day {
--bg: #f5d2d2; /* page background (very pale butter) */
--bg-tint: #fff2dc;
--bg-warm: #ffe8c8;
--bg-mint: #fff7d8;
--bg-pink: #ffeaf0;
--surface: #ffffff; /* cards */
--surface-2: #fff6e6; /* secondary cards / hover */
--ink: #292133; /* main text */
--ink-soft: #6b4f5c; /* softer text */
--ink-mute: #a08894; /* muted text */
--line: #f7e3c6; /* hairlines */
--line-strong: #ecb19a; /* stronger hairlines */
--accent: var(--lilac);
--accent-deep: var(--lilac-deep);
--accent-soft: #fce8d2;
/* sparkle-cursor colors (day) */
--sparkle-a: var(--lilac);
--sparkle-b: var(--pink);
--sparkle-c: var(--peach);
/* sparkle-cursor inline palette (used at runtime by app.jsx) */
--sparkle-cursor-1: var(--lilac-deep);
--sparkle-cursor-2: var(--lilac);
--sparkle-cursor-3: var(--sparkle-day-extra);
color-scheme: light;
}
/* ─── 3. NIGHT MODE ───────────────────────────────────────────────────────── */
.theme-night {
--bg: #0f0a1f;
--bg-tint: #161033;
--bg-warm: #1a1138;
--surface: #18122e;
--surface-2: #221a40;
--ink: #efe8ff;
--ink-soft: #b9aee0;
--ink-mute: #786a9e;
--line: #2a2152;
--line-strong: #3d2f78;
--accent: var(--lilac-pale);
--accent-deep: var(--lilac);
--accent-soft: #2a205a;
--sparkle-a: var(--lilac-pale);
--sparkle-b: var(--pink-hot);
--sparkle-c: var(--cyan-glow);
--sparkle-cursor-1: var(--lilac-pale);
--sparkle-cursor-2: var(--pink-hot);
--sparkle-cursor-3: var(--cyan-glow);
--footer-bg: #0a0716; /* footer is deeper than the page bg at night */
color-scheme: dark;
}
/* day footer matches page tint */
:root, .theme-day { --footer-bg: var(--bg-tint); }
/* ─── 4. DEEP-PURPLE STOPS (dark gradients used in both themes) ─────────── */
:root {
--grad-purple-1: #1d1638;
--grad-purple-2: #2a1f5a;
--grad-purple-3: #3d2f78;
--grad-purple-4: #2a205a;
--grad-purple-5: #221a40;
--grad-purple-6: #1c1538;
--grad-pink-deep: #3a1f4a;
--grad-blue-mid: #5a3d7a; /* mid-purple used inside SVG stream art */
}
/* ─── 5. ON-DARK TEXT ─────────────────────────────────────────────────────── */
:root {
--on-dark: #0f0a1f; /* text on lilac buttons (night mode) */
--on-pink-deep: #4a1f3a; /* text on the pink "stream community" chip */
}
/* ─── 6. POLAROID PIN COLORS ─────────────────────────────────────────────── */
:root {
--pin-red-1: #ff7a9a;
--pin-red-2: #c2335a;
--pin-red-3: #7a1b3b;
--pin-lilac-1: var(--lilac);
--pin-lilac-2: #6d57c4;
--pin-lilac-3: #2a2052;
--pin-peach-1: var(--peach);
--pin-peach-2: #c08240;
--pin-peach-3: #5a3a16;
--polaroid-night-bg: #1a1432;
}
/* ─── 7. SPECIAL ACCENTS ─────────────────────────────────────────────────── */
:root {
--live-red: #ff5577; /* twitch live indicator dot */
/* project-card illustrations */
--art-stroke: #5a3d7a; /* the dark purple outline on the project SVGs */
--lilac-faint: #e7daff; /* the very pale lilac UI strip in the browser illustration */
}
/* ===== sizes.css ===== */
/* ============================================================================
SIZES — single source of truth for every text size, spacing, and position
============================================================================
Edit any value below and the entire site updates on save+refresh.
styles.css and sections.css both reference these CSS variables.
Most values use clamp(MIN, FLUID, MAX) so they scale smoothly with screen
width — no media queries needed.
MIN = the smallest size (mobile)
FLUID = how it grows with the viewport (vw = % of screen width)
MAX = the biggest size (desktop)
Example: clamp(40px, 6vw, 84px) → never below 40px, never above 84px,
in between it equals 6% of the screen width.
Sections:
1. Type scale — every text size on the site
2. Spacing — page padding, section gaps, element margins
3. Radii — border-radius scale
4. Nav — top bar
5. Hero — title, portrait size & inset position
6. About — image, decorations, facts, paragraph
7. Projects — card, illustration, modal
8. Streaming — feature box, watch button, schedule, clips
9. Press / Community — dual cards, collab list, quotes
10. Contact — form, email line
11. Gallery (polaroids) — grid, photo, captions
12. Footer — mega wordmark, columns
13. Floating widgets — sound toggle, music toggle, keyboard hint
============================================================================ */
/* ─── 1. TYPE SCALE ────────────────────────────────────────────────────────── */
:root {
/* base body text */
--fs-body: 17px;
--lh-body: 1.55;
/* hero h1 (the giant top-of-page title) */
--fs-hero: clamp(44px, 7.2vw, 77px);
--lh-hero: 1.02;
/* section titles (the big italic h2 on each section) */
--fs-section-title: clamp(40px, 6vw, 100px);
--lh-section-title: 1;
/* lead paragraph (used under section titles) */
--fs-lead: clamp(18px, 1.5vw, 22px);
/* about-section paragraphs */
--fs-about-prose: clamp(18px, 1.6vw, 22px);
/* small/meta text */
--fs-eyebrow: 13px; /* small uppercase tags above titles */
--fs-btn: 15px; /* button label */
--fs-chip: 13px; /* pill-shaped chips */
--fs-nav-link: 15px; /* top nav links */
--fs-kbd: 11px; /* keyboard hint key */
--fs-micro: 11px; /* tiny mono labels, badges */
--fs-mono-sm: 12px; /* small mono text */
--fs-mono-md: 13px; /* medium mono text */
}
/* ─── 2. SPACING ──────────────────────────────────────────────────────────── */
:root {
/* horizontal page padding (left/right gutter) */
--pad-x: clamp(20px, 5vw, 80px);
/* vertical breathing room between sections */
--section-y: clamp(80px, 12vw, 160px);
/* common gaps */
--gap-xs: 8px;
--gap-sm: 14px;
--gap-md: 24px;
--gap-lg: 32px;
--gap-xl: 56px;
}
/* ─── 3. RADII ────────────────────────────────────────────────────────────── */
:root {
--r-sm: 10px;
--r-md: 18px;
--r-lg: 28px;
--r-xl: 44px;
}
/* ─── 4. NAV ──────────────────────────────────────────────────────────────── */
:root {
--nav-pad-y: 18px; /* top/bottom padding of the fixed nav bar */
--nav-brand-fs: 24px; /* "akynna" wordmark in the nav */
--nav-brand-mark: 36px; /* the round avatar mark next to it */
--nav-brand-mark-fs: 18px; /* letter inside the avatar mark (fallback) */
--nav-gap: 28px; /* gap between nav links */
--toggle-w: 56px; /* theme toggle pill width */
--toggle-h: 30px; /* theme toggle pill height */
--toggle-knob: 22px; /* the round knob inside the toggle */
}
/* ─── 5. HERO ─────────────────────────────────────────────────────────────── */
:root {
--hero-pad-top: 140px; /* space below nav before hero starts */
--hero-pad-bot: 80px;
--hero-grid-gap: 60px; /* gap between text column and portrait */
--hero-tag-fs: 14px; /* "based in MTL" etc. pill text */
--hero-tag-pad: 9px 16px;
--hero-meta-gap: 14px; /* gap between the hero pills */
--hero-meta-mt: 28px; /* space above the pills row */
--hero-cta-gap: 14px;
--hero-cta-mt: 36px;
/* main portrait */
--hero-portrait-max: 400px; /* max width of the round portrait */
/* the smaller "inset" portrait that floats in the corner */
--hero-inset-w: 42%; /* width relative to the main portrait */
--hero-inset-bottom: -7%; /* how far it pokes below */
--hero-inset-right: -7%; /* how far it pokes to the right */
--hero-inset-pad: 7px; /* gradient ring thickness */
--hero-inset-border: 4px; /* outer page-colored ring */
/* labels handwritten on/near the portrait */
--portrait-label-fs: 27px;
--portrait-label-pad:4px 14px;
/* tiny orbit-style mono tags */
--orbit-tag-fs: 17px;
--orbit-tag-pad: 9px 15px;
/* scroll cue at the bottom of the hero */
--scroll-cue-bottom: 40px;
--scroll-cue-fs: 12px;
--scroll-cue-line-h: 40px;
}
/* ─── 6. ABOUT ────────────────────────────────────────────────────────────── */
:root {
--about-grid-gap: 80px; /* gap between photo and prose */
--about-img-sticky: 100px; /* how far below the viewport top the photo sticks */
--about-stat-fs: clamp(44px, 6vw, 92px); /* the giant "8y" number on the photo */
--about-sig-fs: 22px; /* handwritten signature on the photo */
--about-sig-offset: 22px; /* its top/right distance */
--about-badge-fs: 11px; /* "studied 2y at..." ribbon */
--about-badge-pad: 8px 18px;
--about-badge-top: -22px;
--about-float-fs: 12px; /* small floating mono tags around the photo */
--about-float-pad: 7px 12px;
--about-it-fs: 1.1em; /* italic accent words inside paragraphs */
/* facts grid below the prose */
--facts-gap: 16px;
--facts-mt: 40px;
--fact-pad: 22px;
--fact-num-fs: 48px; /* the big italic number */
--fact-lbl-fs: 14px;
}
/* ─── 7. PROJECTS ─────────────────────────────────────────────────────────── */
:root {
--proj-head-mb: 8px; /* space below the projects header */
--proj-grid-gap: 28px;
--proj-pad: 28px; /* inner padding of each card */
--proj-min-h: 420px; /* min height of each card */
--proj-art-h: 200px; /* height of the illustration on each card */
--proj-art-mb: 24px;
--proj-title-fs: 32px;
--proj-desc-fs: 15px;
/* case-study modal that pops up when you click a card */
--modal-max-w: 880px;
--modal-pad: 40px;
--modal-close-size: 36px;
/* itch.io / game jams promo card */
--jam-pad: 40px 44px;
--jam-pad-sm: 32px;
--jam-h3-fs: clamp(28px, 3.4vw, 46px);
--jam-link-fs: 14px;
--jam-r-h: 220px; /* right-side decorative stack height */
--jam-r-h-sm: 200px;
--jam-tile-w: 130px;
--jam-tile-h: 160px;
}
/* ─── 8. STREAMING ────────────────────────────────────────────────────────── */
:root {
--stream-grid-gap: 32px;
--stream-title-fs: 28px; /* h3 in the feature box */
--stream-sub-fs: 14px;
--stream-title-pad: 24px; /* its bottom/left padding from feature edge */
--watch-btn-size: 80px; /* the round play button on the stream feature */
/* schedule card on the right */
--sched-pad: 24px;
--sched-h4-fs: 22px;
--sched-h4-mb: 16px;
--sched-day-fs: 13px;
--sched-time-fs: 15px;
/* clip thumbnails row */
--clips-gap: 20px;
--clips-mt: 32px;
--clip-title-fs: 15px;
--clip-views-fs: 12px;
--clip-play-size: 28px;
}
/* ─── 9. PRESS / COMMUNITY (dual cards) ──────────────────────────────────── */
:root {
--dual-gap: 40px;
--dual-gap-sm: 32px;
--dual-pad: 36px;
--dual-head-mb: 28px;
--dual-tag-fs: 11px;
--dual-tag-pad: 6px 12px;
--dual-h-fs: clamp(28px, 3.2vw, 40px);
/* collaborators list */
--collab-row-pad-y: 18px;
--collab-row-gap: 18px;
--collab-name-fs: 24px;
--collab-role-fs: 11px;
--collab-note-fs: 14px;
/* stream community quotes */
--quote-gap: 16px;
--quote-pad: 18px 20px;
--quote-fs: 17px;
--quote-who-fs: 11px;
--quote-mark-fs: 42px;
}
/* ─── 10. CONTACT ─────────────────────────────────────────────────────────── */
:root {
--contact-gap: 60px;
--contact-p-fs: 18px;
--contact-email-fs: 28px;
--contact-email-mt: 28px;
/* form card */
--form-pad: 32px;
--form-gap: 16px;
--field-label-fs: 12px;
--field-input-pad: 14px 16px;
--field-input-fs: 15px;
--textarea-min-h: 120px;
--topic-chip-fs: 14px;
--topic-chip-pad: 9px 16px;
--form-success-pad: 32px;
--form-success-check:56px;
--form-success-h-fs: 28px;
}
/* ─── 11. GALLERY (polaroids) ────────────────────────────────────────────── */
:root {
--gallery-stage-pad: 56px 32px 40px;
--gallery-stage-pad-sm: 56px 16px 32px;
--gallery-ribbon-fs: 11px;
--gallery-ribbon-pad: 9px 22px;
--polaroid-gap: 32px 24px;
--polaroid-gap-sm: 28px 18px;
--polaroid-grid-pad: 28px 8px 12px;
--polaroid-grid-pad-sm: 22px 4px 4px;
--polaroid-pad: 12px 12px 0;
--pin-size: 14px; /* the round pushpin at the top */
--polaroid-glyph-fs: 56px; /* the big ✿ symbol on the placeholder */
--polaroid-cap-fs: 15px;
--polaroid-cap-r-fs: 11px;
--polaroid-placeholder-fs: 10px;
--gallery-foot-fs: 12px;
--gallery-foot-mt: 18px;
}
/* ─── 12. FOOTER ──────────────────────────────────────────────────────────── */
:root {
--footer-pad: 80px var(--pad-x) 32px;
--footer-grid-gap: 40px;
--footer-brand-fs: 64px; /* the "akynna" wordmark at the top of the footer */
--footer-col-h-fs: 12px; /* column heading */
--footer-col-a-fs: 15px; /* column links */
--footer-bottom-fs: 13px;
--footer-bottom-mt: 60px;
--footer-mega-fs: clamp(120px, 22vw, 280px); /* gigantic background "akynna" */
}
/* ─── 13. FLOATING WIDGETS ───────────────────────────────────────────────── */
:root {
--sound-toggle-size: 44px; /* round sound on/off button bottom-left */
--music-toggle-h: 44px;
--music-toggle-left: 80px;
--music-wave-h: 14px;
--kb-hint-pad: 12px 16px;
--kb-hint-fs: 12px;
--section-head-mb: 8px;
--section-head-r-fs: 14px;
}
/* ===== styles.css ===== */
/* ===========================================================
akynna — typography, motion, base styles
(COLORS → colors.css · SIZES & SPACING → sizes.css)
=========================================================== */
:root {
/* type families */
--font-display: "Cormorant Garamond", "Playfair Display", Georgia, serif;
--font-sans: "Outfit", "Manrope", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
/* motion */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
/* -------- DAY shadows + glow -------- */
:root, .theme-day {
--glow: 0 0 0 rgba(0,0,0,0);
--shadow-sm: 0 2px 6px rgba(94, 71, 165, 0.08);
--shadow-md: 0 12px 32px -12px rgba(94, 71, 165, 0.22);
--shadow-lg: 0 40px 80px -30px rgba(94, 71, 165, 0.35);
}
/* -------- NIGHT shadows + glow -------- */
.theme-night {
--glow: 0 0 24px rgba(183, 168, 255, 0.45);
--shadow-sm: 0 0 12px rgba(183, 168, 255, 0.12);
--shadow-md: 0 0 32px rgba(183, 168, 255, 0.18);
--shadow-lg: 0 0 80px rgba(183, 168, 255, 0.28);
}
/* -------- reset / base -------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-feature-settings: "ss01", "cv11";
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
transition: background-color 600ms var(--ease-out), color 600ms var(--ease-out);
position: relative;
}
/* soft pastel washes behind everything (day) */
body::before {
content: "";
position: fixed; inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(1100px 900px at 5% 0%, color-mix(in oklab, var(--bg-pink) 85%, transparent), transparent 60%),
radial-gradient(1000px 900px at 100% 8%, color-mix(in oklab, var(--bg-tint) 90%, transparent), transparent 60%),
radial-gradient(1200px 1000px at 8% 50%, color-mix(in oklab, var(--bg-mint) 70%, transparent), transparent 55%),
radial-gradient(1100px 1000px at 100% 60%, color-mix(in oklab, var(--bg-warm) 75%, transparent), transparent 55%),
radial-gradient(900px 800px at 40% 100%, color-mix(in oklab, var(--bg-pink) 75%, transparent), transparent 60%),
radial-gradient(900px 800px at 90% 100%, color-mix(in oklab, var(--bg-tint) 80%, transparent), transparent 60%);
opacity: var(--bg-wash-opacity, 0.95);
transition: opacity 600ms var(--ease-out);
}
.theme-night body::before,
html.theme-night body::before { opacity: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
/* selection */
::selection { background: var(--accent); color: var(--on-dark); }
.theme-night ::selection { background: var(--accent-deep); color: var(--on-dark); }
/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; }
/* Generic image helper — used wherever a content image replaces a placeholder
(project cards, modal cover, stream feature, clip thumbnails, polaroids).
Fills the parent box, crops cleanly, and inherits its rounded corners. */
.img-fill {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
}
/* =========================================================
layout primitives
========================================================= */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 var(--pad-x); }
.wrap-tight { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad-x); }
section { position: relative; padding: var(--section-y) 0; z-index: 1; }
/* eyebrow */
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-mono);
font-size: var(--fs-eyebrow); letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ink-soft);
}
.eyebrow::before {
content: ""; width: 24px; height: 1px;
background: currentColor; opacity: 0.6;
}
/* display heading */
.display {
font-family: var(--font-display);
font-weight: 500;
font-style: italic;
letter-spacing: -0.01em;
line-height: 0.95;
margin: 0;
text-wrap: balance;
}
.display em { font-style: normal; }
.display .lil {
font-style: italic;
color: var(--accent-deep);
font-size: 0.6em;
position: relative;
top: -0.2em;
margin-right: 0.05em;
letter-spacing: -0.02em;
}
h2.section-title {
font-family: var(--font-display);
font-weight: 500;
font-size: var(--fs-section-title);
line-height: var(--lh-section-title);
margin: 16px 0 var(--gap-xl);
letter-spacing: -0.015em;
}
h2.section-title .it { font-style: italic; color: var(--accent-deep); }
/* paragraph */
.lead {
font-size: var(--fs-lead);
color: var(--ink-soft);
max-width: 56ch;
text-wrap: pretty;
}
/* buttons */
.btn {
display: inline-flex; align-items: center; gap: 10px;
background: var(--ink);
color: var(--bg);
padding: 14px 22px;
border: none;
border-radius: 999px;
font-weight: 500;
font-size: var(--fs-btn);
letter-spacing: 0.01em;
transition: transform 220ms var(--ease-out), background 220ms, box-shadow 220ms, color 220ms;
position: relative;
overflow: hidden;
}
.theme-night .btn { background: var(--accent-deep); color: var(--on-dark); box-shadow: var(--glow); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost {
background: transparent;
color: var(--ink);
border: 1px solid var(--line-strong);
}
.theme-night .btn-ghost { color: var(--ink); border-color: var(--line-strong); box-shadow: none; }
.btn-ghost:hover { background: var(--surface-2); }
/* chips / tags */
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 13px;
border-radius: 999px;
background: var(--accent-soft);
color: var(--ink);
font-size: var(--fs-chip);
font-family: var(--font-mono);
letter-spacing: 0.03em;
}
/* card */
.card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
transition: transform 320ms var(--ease-out), box-shadow 320ms, border-color 320ms;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
border-color: var(--line-strong);
}
.theme-night .card:hover { box-shadow: 0 0 40px rgba(183, 168, 255, 0.18); }
/* glow ring (night) */
.glow-ring {
position: relative;
isolation: isolate;
}
.theme-night .glow-ring::before {
content: "";
position: absolute; inset: -1px;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg, rgba(183,168,255,0.6), rgba(255,158,199,0.4), rgba(139,227,255,0.4));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor; mask-composite: exclude;
pointer-events: none;
opacity: 0.7;
}
/* divider line */
.divider {
height: 1px;
background: var(--line);
width: 100%;
}
/* underline link */
.ulink {
position: relative;
display: inline-block;
}
.ulink::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -3px;
height: 1px; background: currentColor;
transform: scaleX(1); transform-origin: right;
transition: transform 360ms var(--ease-out);
}
.ulink:hover::after { transform: scaleX(0); transform-origin: left; }
/* shimmer */
@keyframes shimmer { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
.shimmer {
background: linear-gradient(90deg, var(--accent-deep), var(--pink), var(--peach), var(--accent-deep));
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text;
color: transparent;
animation: shimmer 8s linear infinite;
}
.theme-night .shimmer {
background: linear-gradient(90deg, var(--lilac), var(--pink-hot), var(--cyan-glow), var(--lilac));
background-size: 200% 100%;
-webkit-background-clip: text; background-clip: text;
color: transparent;
}
/* sparkles */
.sparkle {
position: absolute;
pointer-events: none;
width: 14px; height: 14px;
background: radial-gradient(circle, var(--sparkle-a) 0%, transparent 60%);
filter: blur(0.3px);
}
.sparkle.s2 { background: radial-gradient(circle, var(--sparkle-b) 0%, transparent 60%); }
.sparkle.s3 { background: radial-gradient(circle, var(--sparkle-c) 0%, transparent 60%); }
@keyframes drift {
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
50% { transform: translateY(-14px) rotate(180deg); opacity: 1; }
}
.float { animation: drift 7s ease-in-out infinite; }
/* blob backgrounds */
.blob {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.55;
pointer-events: none;
z-index: 0;
}
.theme-night .blob { opacity: 0.35; filter: blur(100px); }
/* reveal — fade + rise + subtle scale as elements scroll into view */
.reveal {
opacity: 0;
transform: translateY(26px) scale(0.99);
transition: opacity 760ms var(--ease-out), transform 760ms var(--ease-out);
will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
/* directional variants for a richer, layered scroll feel */
.reveal-l { transform: translateX(-34px); }
.reveal-r { transform: translateX(34px); }
.reveal-l.in, .reveal-r.in { transform: none; }
/* respect users who prefer reduced motion — show everything immediately */
@media (prefers-reduced-motion: reduce) {
.reveal, .reveal-l, .reveal-r { transition: none; opacity: 1; transform: none; }
}
/* keyboard hint key */
.kbd {
display: inline-grid; place-items: center;
min-width: 22px; height: 22px; padding: 0 6px;
border-radius: 6px;
border: 1px solid var(--line-strong);
background: var(--surface-2);
font-family: var(--font-mono);
font-size: var(--fs-kbd);
color: var(--ink-soft);
}
/* utility */
.col { display: flex; flex-direction: column; }
.row { display: flex; }
.grow { flex: 1; }
.center { display: grid; place-items: center; }
.muted { color: var(--ink-mute); }
.softc { color: var(--ink-soft); }
/* ===== sections.css ===== */
/* ===========================================================
akynna — section styles
=========================================================== */
/* =================== NAV =================== */
.nav {
position: fixed; top: 0; left: 0; right: 0;
z-index: 50;
padding: var(--nav-pad-y) var(--pad-x);
display: flex; align-items: center; justify-content: space-between;
transition: backdrop-filter 300ms, background 300ms;
}
.nav.scrolled {
background: color-mix(in oklab, var(--bg) 78%, transparent);
backdrop-filter: blur(16px) saturate(140%);
-webkit-backdrop-filter: blur(16px) saturate(140%);
border-bottom: 1px solid var(--line);
}
.brand {
display: flex; align-items: center; gap: 12px;
font-family: var(--font-display);
font-style: italic;
font-size: var(--nav-brand-fs);
letter-spacing: -0.01em;
}
.brand-mark {
width: var(--nav-brand-mark); height: var(--nav-brand-mark);
border-radius: 50%;
background: linear-gradient(135deg, var(--lilac), var(--pink));
display: grid; place-items: center;
color: white;
font-family: var(--font-display);
font-style: italic;
font-size: var(--nav-brand-mark-fs);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; }
.nav-links {
display: flex; align-items: center; gap: var(--nav-gap);
font-size: var(--fs-nav-link);
font-weight: 500;
}
.nav-links a {
color: var(--ink-soft);
transition: color 200ms;
position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); }
.nav-links a.active::before {
content: "✦";
position: absolute;
left: -14px; top: 50%;
transform: translateY(-50%);
font-size: 10px;
color: var(--accent-deep);
}
@media (max-width: 760px) {
.nav-links a:not(.toggle-wrap) { display: none; }
}
/* theme toggle */
.theme-toggle {
width: var(--toggle-w); height: var(--toggle-h);
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line-strong);
padding: 3px;
display: flex; align-items: center;
position: relative;
cursor: pointer;
transition: background 300ms;
}
.theme-toggle .knob {
width: var(--toggle-knob); height: var(--toggle-knob);
border-radius: 50%;
background: var(--accent-deep);
display: grid; place-items: center;
color: var(--bg);
font-size: 12px;
transition: transform 380ms var(--ease-out), background 300ms;
box-shadow: var(--shadow-sm);
}
.theme-night .theme-toggle .knob {
transform: translateX(26px);
box-shadow: var(--glow);
}
/* language pill (EN · FR) */
.lang-toggle {
display: inline-flex;
align-items: center;
height: var(--toggle-h);
padding: 3px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line-strong);
gap: 2px;
}
.lang-toggle .lang-opt {
appearance: none;
border: 0;
background: transparent;
color: var(--ink-soft);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
padding: 0 10px;
height: calc(var(--toggle-h) - 8px);
border-radius: 999px;
cursor: pointer;
transition: color 200ms, background 300ms;
}
.lang-toggle .lang-opt:hover { color: var(--ink); }
.lang-toggle .lang-opt.on {
background: var(--accent-deep);
color: var(--bg);
box-shadow: var(--shadow-sm);
}
.theme-night .lang-toggle .lang-opt.on { box-shadow: var(--glow); }
@media (max-width: 760px) {
.lang-toggle .lang-opt { padding: 0 8px; font-size: 10px; }
}
/* =================== HERO =================== */
.hero {
min-height: 100vh;
padding-top: var(--hero-pad-top);
padding-bottom: var(--hero-pad-bot);
display: flex; align-items: center;
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1fr 0.95fr;
gap: var(--hero-grid-gap);
align-items: center;
width: 100%;
position: relative; z-index: 2;
}
@media (max-width: 920px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
}
.hero h1 {
font-size: var(--fs-hero);
line-height: var(--lh-hero);
}
.hero h1 .line { display: block; }
.hero h1 .line + .line { margin-top: 0.05em; }
.hero h1 .amp {
font-style: italic;
color: var(--accent-deep);
font-weight: 400;
}
.hero-meta {
display: flex; flex-wrap: wrap; gap: var(--hero-meta-gap);
margin-top: var(--hero-meta-mt);
}
.hero-tag {
display: inline-flex; align-items: center; gap: 8px;
padding: var(--hero-tag-pad);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
font-size: var(--hero-tag-fs);
color: var(--ink-soft);
}
.hero-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-deep); }
.hero-tag .dot.live { background: var(--live-red); box-shadow: 0 0 0 4px rgba(255,85,119,0.18); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(255,85,119,0.18); } 50% { box-shadow: 0 0 0 8px rgba(255,85,119,0.04); } }
.hero-cta { display: flex; align-items: center; gap: 9px; margin-top: var(--hero-cta-mt); flex-wrap: wrap; }
/* keep the two secondary buttons together so they wrap as a pair if ever needed */
.hero-cta-group { display: flex; gap: 9px; flex-wrap: wrap; }
/* compact the hero buttons so all three fit side by side on one desktop line */
.hero-cta .btn { padding: 11px 15px; font-size: 13px; white-space: nowrap; }
.hero-cta .btn-ghost { gap: 7px; }
.hero-cta .btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
@media (max-width: 380px) { .hero-cta-group { width: 100%; } }
.hero-portrait {
position: relative;
aspect-ratio: 1;
max-width: var(--hero-portrait-max);
margin-left: auto;
border-radius: var(--r-xl);
overflow: visible;
}
.hero-portrait .frame {
position: relative;
width: 100%; height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, var(--lilac) 0%, var(--pink) 50%, var(--peach) 100%);
display: grid; place-items: center;
box-shadow:
0 0 0 1px rgba(255,255,255,0.6) inset,
0 30px 80px -20px rgba(183,168,255,0.55),
0 0 90px rgba(255,182,210,0.55),
0 0 140px rgba(183,168,255,0.45);
overflow: hidden;
animation: heroHalo 7s ease-in-out infinite;
}
@keyframes heroHalo {
0%, 100% {
box-shadow:
0 0 0 1px rgba(255,255,255,0.6) inset,
0 30px 80px -20px rgba(183,168,255,0.55),
0 0 90px rgba(255,182,210,0.55),
0 0 140px rgba(183,168,255,0.45);
}
50% {
box-shadow:
0 0 0 1px rgba(255,255,255,0.7) inset,
0 30px 80px -20px rgba(183,168,255,0.7),
0 0 110px rgba(255,182,210,0.7),
0 0 170px rgba(183,168,255,0.55);
}
}
.theme-night .hero-portrait .frame {
background: linear-gradient(135deg, var(--grad-purple-2) 0%, var(--grad-purple-3) 50%, var(--grad-purple-1) 100%);
box-shadow: 0 0 100px rgba(183,168,255,0.45);
animation: heroHaloNight 7s ease-in-out infinite;
}
@keyframes heroHaloNight {
0%, 100% { box-shadow: 0 0 100px rgba(183,168,255,0.45); }
50% { box-shadow: 0 0 140px rgba(183,168,255,0.65), 0 0 60px rgba(255,158,199,0.35); }
}
.hero-portrait .frame img {
width: 92%; height: 92%;
object-fit: cover;
border-radius: 50%;
position: relative;
z-index: 2;
}
/* dual portrait: main + smaller inset */
.hero-portrait.dual .frame-main {
position: relative;
width: 100%; height: 100%;
}
.hero-portrait.dual .frame-main img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
}
.hero-portrait.dual .frame-inset {
position: absolute;
bottom: var(--hero-inset-bottom);
right: var(--hero-inset-right);
width: var(--hero-inset-w);
height: auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: linear-gradient(135deg, var(--lilac), var(--pink));
padding: var(--hero-inset-pad);
display: grid; place-items: center;
box-shadow: var(--shadow-md);
z-index: 5;
border: var(--hero-inset-border) solid var(--bg);
animation: floatY 6s ease-in-out infinite;
box-sizing: border-box;
}
.theme-night .hero-portrait.dual .frame-inset {
background: linear-gradient(135deg, var(--grad-purple-3), var(--grad-purple-2));
border-color: var(--surface);
box-shadow: 0 0 32px rgba(183,168,255,0.5);
}
.hero-portrait.dual .frame-inset img {
width: 100%; height: 100%;
object-fit: cover;
border-radius: 50%;
}
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* The two "tim" / "akynna" name tags. Styled to pop more than the decorative
mono orbit tags: bolder display font, vivid gradient fill, white text and a
soft glowing ring so they read as the hero's identity badges. */
.portrait-label {
position: absolute;
z-index: 6;
font-family: var(--font-display);
font-style: italic;
font-weight: 600;
font-size: var(--portrait-label-fs);
color: #fff;
border: 2px solid var(--surface);
border-radius: 12px; /* rounded-rectangle sticker — distinct from the round orbit tags */
padding: 5px 16px;
white-space: nowrap;
}
.portrait-label.main-label {
top: 36%; left: -14%;
transform: rotate(-10deg);
background: linear-gradient(135deg, var(--lilac-deep), var(--pink-hot));
box-shadow: var(--shadow-md), 0 0 0 4px color-mix(in oklab, var(--lilac) 35%, transparent);
}
.portrait-label.inset-label {
bottom: -2%; right: -10%;
transform: translate(40%, 40%) rotate(8deg);
background: linear-gradient(135deg, var(--pink-hot), var(--peach));
box-shadow: var(--shadow-md), 0 0 0 4px color-mix(in oklab, var(--pink-hot) 35%, transparent);
}
.theme-night .portrait-label {
border-color: color-mix(in oklab, var(--surface) 70%, transparent);
box-shadow: var(--glow), 0 0 22px rgba(255,158,199,0.4);
}
.orbit {
position: absolute;
inset: -8%;
border-radius: 50%;
border: 1px dashed var(--line-strong);
animation: spin 60s linear infinite;
opacity: 0.6;
}
.orbit.o2 { inset: -16%; animation-duration: 90s; animation-direction: reverse; opacity: 0.35; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.orbit-tag {
position: absolute;
z-index: 7; /* sit on top of the portrait + inset chibi */
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: 999px;
padding: var(--orbit-tag-pad);
font-size: var(--orbit-tag-fs);
font-family: var(--font-mono);
color: var(--ink);
box-shadow: var(--shadow-sm);
white-space: nowrap;
}
.theme-night .orbit-tag {
background: var(--surface-2);
box-shadow: 0 0 18px rgba(183,168,255,0.25);
}
/* Interactive tags (those with a `funny` field in content.js) — wiggle and
swap to a joke text on hover/focus/tap. */
.orbit-tag.is-interactive {
cursor: pointer;
user-select: none;
transition:
transform 260ms var(--ease-out),
background 220ms var(--ease-out),
border-color 220ms var(--ease-out),
color 220ms var(--ease-out),
box-shadow 220ms var(--ease-out);
}
.orbit-tag.is-interactive:focus { outline: none; }
.orbit-tag.is-interactive.is-open {
background: var(--accent-soft);
border-color: var(--accent-deep);
color: var(--accent-deep);
box-shadow: 0 10px 28px rgba(183,168,255,0.45);
transform: translateX(var(--shift, 0px)) scale(1.10);
animation: orbit-tag-wiggle 520ms var(--ease-out);
}
.theme-night .orbit-tag.is-interactive.is-open {
box-shadow: 0 0 26px rgba(183,168,255,0.55);
}
@keyframes orbit-tag-wiggle {
0% { transform: translateX(var(--shift, 0px)) scale(1) rotate(0deg); }
18% { transform: translateX(var(--shift, 0px)) scale(1.18) rotate(-8deg); }
36% { transform: translateX(var(--shift, 0px)) scale(1.10) rotate(6deg); }
54% { transform: translateX(var(--shift, 0px)) scale(1.14) rotate(-4deg); }
72% { transform: translateX(var(--shift, 0px)) scale(1.08) rotate(3deg); }
100% { transform: translateX(var(--shift, 0px)) scale(1.10) rotate(0deg); }
}
.scroll-cue {
position: absolute;
bottom: var(--scroll-cue-bottom); left: 50%;
transform: translateX(-50%);
font-family: var(--font-mono);
font-size: var(--scroll-cue-fs);
letter-spacing: 0.2em;
color: var(--ink-mute);
display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-cue .line-down {
width: 1px; height: var(--scroll-cue-line-h);
background: linear-gradient(to bottom, var(--accent-deep), transparent);
animation: drop 2s ease-in-out infinite;
}
@keyframes drop { 0%, 100% { transform: scaleY(0.3); transform-origin: top; opacity: 0.5; } 50% { transform: scaleY(1); opacity: 1; } }
/* =================== ABOUT =================== */
.about .section-head { gap: 8px; margin-bottom: 12px; }
.about .section-head h2.section-title { margin: 2px 0 8px; }
.about-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--about-grid-gap);
align-items: start;
}
@media (max-width: 860px) {
.about-grid { grid-template-columns: 1fr; gap: 40px; }
}
.about-img {
position: sticky; top: var(--about-img-sticky);
aspect-ratio: 3 / 4;
border-radius: var(--r-lg);
background: linear-gradient(160deg, var(--lilac) 0%, var(--pink) 100%);
overflow: hidden;
position: relative;
}
.theme-night .about-img {
background: linear-gradient(160deg, var(--grad-purple-2), var(--grad-purple-1));
}
.about-img .av {
position: absolute; bottom: 0; left: 50%;
transform: translateX(-50%);
width: 80%;
z-index: 2;
}
.about-img .av-real {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.about-img .av-real + * { position: relative; z-index: 3; }
.about-img::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(34, 26, 58, 0.4) 100%);
z-index: 2;
pointer-events: none;
}
.about-stat {
font-family: var(--font-display);
font-style: italic;
font-size: var(--about-stat-fs);
line-height: 1;
color: rgba(255,255,255,0.65);
position: absolute;
bottom: 14px;
left: 0; right: 0;
text-align: center;
pointer-events: none;
z-index: 4;
letter-spacing: -0.02em;
text-shadow: 0 4px 24px rgba(34, 26, 58, 0.35);
}
.theme-night .about-stat { color: rgba(255,255,255,0.5); }
/* fancy decorations around the about photo */
.about-img { isolation: isolate; }
.about-img::before {
content: "";
position: absolute;
inset: -14px;
border: 1px dashed var(--line-strong);
border-radius: calc(var(--r-lg) + 14px);
pointer-events: none;
z-index: 5;
opacity: 0.65;
}
.theme-night .about-img::before { opacity: 0.35; }
/* curved badge with ribbon copy around the photo (top) */
.about-badge {
position: absolute;
top: var(--about-badge-top); left: 50%;
transform: translateX(-50%) rotate(-2deg);
background: var(--ink);
color: var(--bg);
font-family: var(--font-mono);
font-size: var(--about-badge-fs);
letter-spacing: 0.18em;
text-transform: uppercase;
padding: var(--about-badge-pad);
border-radius: 999px;
white-space: nowrap;
z-index: 7;
box-shadow: var(--shadow-md);
overflow: hidden;
max-width: 88%;
}
.theme-night .about-badge { background: var(--accent-deep); color: var(--on-dark); box-shadow: var(--glow); }
.about-badge-inner {
display: inline-block;
white-space: nowrap;
animation: ribbonScroll 22s linear infinite;
}
@keyframes ribbonScroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* handwritten signature on the photo */
.about-sig {
position: absolute;
top: var(--about-sig-offset); right: var(--about-sig-offset);
font-family: var(--font-display);
font-style: italic;
font-size: var(--about-sig-fs);
color: rgba(255,255,255,0.9);
z-index: 5;
transform: rotate(-6deg);
text-shadow: 0 2px 12px rgba(0,0,0,0.35);
letter-spacing: 0.01em;
}
/* small handwritten float tags around the photo */
.about-float {
position: absolute;
font-family: var(--font-mono);
font-size: var(--about-float-fs);
letter-spacing: 0.06em;
padding: var(--about-float-pad);
border-radius: 999px;
background: var(--surface);
border: 1px solid var(--line-strong);
color: var(--ink);
box-shadow: var(--shadow-sm);
z-index: 6;
animation: floatY 6s ease-in-out infinite;
white-space: nowrap;
}
.theme-night .about-float { background: var(--surface-2); }
.about-float-1 { top: 38%; right: -22px; transform: rotate(6deg); animation-delay: 0s; }
.about-float-2 { bottom: 22%; left: -28px; transform: rotate(-6deg); animation-delay: 1.2s; }
.about-float-3 { top: 16%; left: -18px; transform: rotate(-10deg); animation-delay: 2.4s; color: var(--accent-deep); }
@media (max-width: 860px) {
.about-float-1 { right: -10px; }
.about-float-2 { left: -10px; }
.about-float-3 { left: -10px; top: 8%; }
}
.about-prose p {
font-size: var(--fs-about-prose);
line-height: 1.55;
color: var(--ink-soft);
margin: 0 0 24px;
text-wrap: pretty;
}
.about-prose p .hl { color: var(--ink); font-weight: 500; }
.about-prose p .it { font-family: var(--font-display); font-style: italic; color: var(--accent-deep); font-size: var(--about-it-fs); }
/* framed highlight around the "mon intention" statement */
.about-prose p .intent-frame {
display: block;
margin-top: 12px;
padding: 14px 20px 14px 22px;
border-left: 4px solid var(--accent-deep);
border-radius: 4px 16px 16px 4px;
background: linear-gradient(
105deg,
color-mix(in oklab, var(--accent) 24%, var(--surface)) 0%,
color-mix(in oklab, var(--accent) 6%, var(--surface)) 60%,
transparent 100%);
}
.facts {
display: grid;
grid-template-columns: repeat(4, 1fr); /* unfolded full-width row below the grid */
gap: var(--facts-gap);
margin-top: var(--facts-mt);
}
@media (max-width: 640px) {
.facts { grid-template-columns: repeat(2, 1fr); } /* fall back on narrow screens */
}
.fact {
padding: var(--fact-pad);
border-radius: var(--r-md);
background: var(--surface);
border: 1px solid var(--line);
}
.fact .num {
font-family: var(--font-display);
font-style: italic;
font-size: var(--fact-num-fs);
line-height: 1;
color: var(--accent-deep);
}
.fact .lbl {
font-size: var(--fact-lbl-fs);
color: var(--ink-soft);
margin-top: 8px;
}
/* =================== ABOUT — JOURNEY TIMELINE =================== */
/* The About column is narrower (.wrap-tight) than the rest of the site, so the
timeline breaks out to the full site width and re-centres in the viewport —
using margins only, so the reveal transform stays intact. */
.timeline {
margin-top: 40px;
--tl-w: min(1140px, calc(100vw - 2 * var(--pad-x)));
width: var(--tl-w);
margin-left: calc((100% - var(--tl-w)) / 2);
/* the two career colours: soft light purple (dev) vs Twitch purple (stream) */
--tl-dev: #b3a1f2;
--tl-dev-ink: var(--accent-deep);
--tl-stream: #9146ff;
}
.timeline-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 24px;
margin-bottom: 10px;
}
.timeline-heading {
font-family: var(--font-mono);
text-transform: uppercase;
font-weight: 500;
font-size: 0.95rem;
letter-spacing: 0.06em;
color: var(--accent-deep);
}
/* legend: which coloured line is which career */
.tl-legend { display: flex; gap: 18px; }
.tl-legend-item {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-mono);
font-size: 0.78rem;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--ink-soft);
}
.tl-legend-dot { width: 11px; height: 11px; border-radius: 50%; }
.tl-legend-dev .tl-legend-dot { background: var(--tl-dev); }
.tl-legend-stream .tl-legend-dot { background: var(--tl-stream); }
/* viewport holds the track + the two nav arrows; the side padding is the
gutter the arrows live in, so they never overlap the timeline line. */
.timeline-viewport { position: relative; padding: 0 52px; }
@media (max-width: 560px) { .timeline-viewport { padding: 0 40px; } }
/* horizontal track — scrolls sideways via the arrows or by grabbing it; never
vertically. touch-action keeps the browser's native horizontal swipe (with
momentum) on mobile while still letting a vertical swipe scroll the page. */
.timeline-track {
position: relative;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* old edge */
touch-action: pan-x pan-y;
cursor: grab;
overscroll-behavior-x: contain; /* no back-swipe navigation at the ends */
}
.timeline-track::-webkit-scrollbar { display: none; } /* chrome / safari */
/* mid-drag: closed fist, no text selection, and bubbles stay down so they
don't flash past under the cursor while the track slides. */
.timeline-track.is-dragging,
.timeline-track.is-dragging .tl2-card,
.timeline-track.is-dragging .tl2-dot { cursor: grabbing; user-select: none; }
.timeline-track.is-dragging .tl2-card:hover .tl2-bubble {
opacity: 0;
visibility: hidden;
}
/* fixed-size canvas everything is absolutely placed on */
.tl2 { position: relative; }
/* period spans — dev hugs just above the axis, stream just below, so two
overlapping periods read as both colours straddling the line. */
.tl2-span {
position: absolute;
height: 6px;
border-radius: 999px;
z-index: 1;
}
.tl2-span-dev { background: var(--tl-dev); }
.tl2-span-stream { background: var(--tl-stream); }
/* their labels sit just outside the dots (dev above, stream below) */
.tl2-span-lbl {
position: absolute;
transform: translateX(-50%);
white-space: nowrap;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.02em;
z-index: 2;
}
.tl2-span-lbl-dev { color: var(--tl-dev-ink); }
.tl2-span-lbl-stream { color: var(--tl-stream); }
/* short connector stem from a node out to its card — tinted to its career */
.tl2-stem {
position: absolute;
width: 2px;
transform: translateX(-50%);
z-index: 1;
}
.tl2-stem-dev { background: var(--tl-dev); }
.tl2-stem-stream { background: var(--tl-stream); }
/* node — a small circle carrying the event's emoji, sitting on the axis */
.tl2-dot {
position: absolute;
width: 24px; height: 24px;
transform: translate(-50%, -50%);
border-radius: 50%;
display: grid; place-items: center;
font-size: 12px; line-height: 1;
background: var(--surface);
border: 2px solid var(--tl-dev);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--tl-dev) 26%, transparent);
cursor: pointer;
z-index: 3;
}
.tl2-dot-stream {
border-color: var(--tl-stream);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--tl-stream) 22%, transparent);
}
/* event card branching off the lane (up for dev, down for stream) */
.tl2-card {
position: absolute;
width: 108px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
cursor: pointer;
z-index: 2;
}
.tl2-card:hover, .tl2-card.is-pinned { z-index: 7; } /* lift above neighbours when its bubble is up */
.tl2-card:focus-visible { outline: none; }
.tl2-card:focus-visible .tl2-title { text-decoration: underline; }
.tl2-card-up { flex-direction: column-reverse; } /* year ends up nearest the line */
.tl2-year {
font-family: var(--font-mono);
font-weight: 500;
font-size: 0.72rem;
white-space: nowrap; /* keep "Décembre 2023" on one line */
color: var(--tl-dev-ink);
}
.tl2-card-down .tl2-year { color: var(--tl-stream); }
.tl2-card-down .tl2-year { margin-bottom: 2px; }
.tl2-card-up .tl2-year { margin-top: 2px; }
.tl2-title {
font-family: var(--font-mono);
font-weight: 500;
text-transform: uppercase;
font-size: 0.71rem;
line-height: 1.2;
letter-spacing: 0.03em;
color: var(--ink);
margin-top: 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* description speech bubble — hidden until the card is hovered or pinned */
.tl2-bubble {
position: absolute;
left: 50%;
width: max-content;
/* wider than the card so long descriptions wrap to 3 lines instead of 5 —
the track clips vertically, so bubble height is the budget here. */
min-width: 110px;
max-width: 172px;
padding: 9px 12px;
border-radius: 16px;
background: var(--surface);
border: 2px solid var(--line-strong);
box-shadow: var(--shadow-md);
color: var(--ink-soft);
font-size: 0.72rem;
line-height: 1.45;
text-align: center;
text-wrap: balance;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: 8;
transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}
/* dev cards open upward, stream cards downward */
.tl2-card-up .tl2-bubble { bottom: calc(100% + 11px); transform: translateX(-50%) translateY(6px) scale(0.96); }
.tl2-card-down .tl2-bubble { top: calc(100% + 11px); transform: translateX(-50%) translateY(-6px) scale(0.96); }
.tl2-card:hover .tl2-bubble,
.tl2-card:focus-visible .tl2-bubble,
.tl2-card.is-pinned .tl2-bubble {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0) scale(1);
}
/* a little tail pointing back to the event */
.tl2-bubble::after {
content: "";
position: absolute;
left: 50%;
width: 12px; height: 12px;
background: var(--surface);
border: 2px solid var(--line-strong);
transform: translateX(-50%) rotate(45deg);
}
.tl2-card-up .tl2-bubble::after { bottom: -6px; border-top: none; border-left: none; } /* points down */
.tl2-card-down .tl2-bubble::after { top: -6px; border-bottom: none; border-right: none; } /* points up */
/* pinned bubbles get an accent edge so it's clear they're "kept open" */
.tl2-card.is-pinned .tl2-bubble-dev { border-color: var(--tl-dev); }
.tl2-card.is-pinned .tl2-bubble-dev::after { border-color: var(--tl-dev); }
.tl2-card.is-pinned .tl2-bubble-stream { border-color: var(--tl-stream); }
.tl2-card.is-pinned .tl2-bubble-stream::after { border-color: var(--tl-stream); }
/* side navigation arrows — tall carousel-style pills in the gutters, centred
on the lane stack, tinted in the brand accent. */
.tl-arrow {
position: absolute;
transform: translateY(-50%);
z-index: 4;
width: 34px; height: 76px;
display: grid; place-items: center;
border-radius: 14px;
border: none;
background: var(--accent-soft);
color: var(--accent-deep);
box-shadow: var(--shadow-md);
cursor: pointer;
transition: background 200ms, color 200ms, opacity 220ms, transform 200ms var(--ease-out);
}
.tl-arrow:hover {
background: var(--accent-deep);
color: var(--bg);
transform: translateY(-50%) scale(1.06);
}
.theme-night .tl-arrow { background: var(--surface-2); }
.theme-night .tl-arrow:hover { background: var(--accent-deep); color: var(--on-dark); }
.tl-arrow svg { width: 20px; height: 20px; }
.tl-arrow-l { left: 0; }
.tl-arrow-r { right: 0; }
.tl-arrow-l svg { transform: scaleX(-1); } /* flip the right-pointing arrow */
.tl-arrow.is-hidden { opacity: 0; pointer-events: none; }
/* =================== PROJECTS =================== */
.projects-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 4px 40px; /* tiny vertical gap when title + subtitle stack */
margin-bottom: var(--proj-head-mb);
flex-wrap: wrap;
}
/* --- featured / upcoming project spotlight -------------------------------- */
/* One project pulled out of the grid and given the middle of the section to
itself: screenshots on the left, the pitch + launch CTA on the right. */
.feat-project {
position: relative;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 34px;
align-items: center;
margin-bottom: var(--proj-grid-gap, 28px);
padding: 30px;
border-radius: var(--r-lg);
border: 1px solid var(--line-strong);
background:
linear-gradient(135deg,
color-mix(in oklab, var(--lilac) 34%, var(--surface)) 0%,
color-mix(in oklab, var(--pink) 26%, var(--surface)) 52%,
color-mix(in oklab, var(--peach) 24%, var(--surface)) 100%);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
@media (max-width: 900px) {
.feat-project { grid-template-columns: 1fr; gap: 26px; padding: 22px; }
}
.feat-media {
position: relative;
display: block; /* definite width for the frame's % sizing */
padding: 6px 0;
}
.feat-media > svg { width: 60%; height: auto; margin: 0 auto; display: block; }
/* phone mockup — the screenshots are from a mobile game, so they're shown in
a device frame with its own island + side buttons. */
.phone-showcase { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* the frame plus the gutters its prev/next arrows sit in */
.phone-stage {
position: relative;
width: 100%;
display: flex;
justify-content: center;
}
.phone-nav {
width: 38px; height: 38px;
z-index: 3;
}
.phone-nav svg { width: 16px; height: 16px; }
.phone-nav-prev { left: 0; }
.phone-nav-prev svg { transform: rotate(180deg); }
.phone-nav-next { right: 0; }
@media (max-width: 420px) {
/* no room for outside gutters — tuck the arrows over the bezel */
.phone-nav-prev { left: -6px; }
.phone-nav-next { right: -6px; }
}
.phone-frame {
position: relative;
width: min(250px, 70%);
max-width: 100%;
flex: none;
padding: 9px;
border-radius: 42px;
background: linear-gradient(155deg, #3a3155 0%, #1b1630 46%, #0f0c1c 100%);
box-shadow:
0 26px 60px rgba(34, 26, 58, 0.38),
0 2px 0 rgba(255, 255, 255, 0.18) inset,
0 0 0 1.5px rgba(255, 255, 255, 0.12) inset;
}
.phone-screen {
position: relative;
width: 100%;
/* matches the screenshots' own ratio, so nothing gets cropped and the
frame's height follows from the artwork instead of a guessed device size */
aspect-ratio: 375 / 670;
border-radius: 34px;
overflow: hidden;
background: #06050c;
}
.phone-shot {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 620ms var(--ease-out);
}
.phone-shot.on { opacity: 1; }
/* dynamic-island style pill */
.phone-island {
position: absolute;
top: 10px; left: 50%;
transform: translateX(-50%);
width: 32%; height: 16px;
border-radius: 999px;
background: #06050c;
z-index: 2;
}
/* side buttons */
.phone-btn {
position: absolute;
width: 3px;
border-radius: 3px;
background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
}
.phone-btn-power { right: -2px; top: 27%; height: 11%; }
.phone-btn-vol-up { left: -2px; top: 20%; height: 7%; }
.phone-btn-vol-dn { left: -2px; top: 29%; height: 7%; }
.phone-dots { display: flex; justify-content: center; gap: 8px; }
.phone-dot {
width: 8px; height: 8px;
border-radius: 50%;
border: 1px solid var(--line-strong);
background: transparent;
cursor: pointer;
padding: 0;
transition: background 220ms, transform 220ms var(--ease-out);
}
.phone-dot.on { background: var(--accent-deep); border-color: var(--accent-deep); transform: scale(1.15); }
.feat-body { position: relative; z-index: 2; }
.feat-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.feat-status {
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.68rem;
color: var(--bg);
background: var(--ink);
border-radius: 999px;
padding: 5px 11px;
white-space: nowrap;
}
.theme-night .feat-status { background: var(--accent-deep); color: var(--on-dark); }
.feat-title {
font-family: var(--font-display);
font-size: clamp(34px, 4.6vw, 58px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
margin: 12px 0 8px;
}
.feat-tagline {
font-family: var(--font-display);
font-style: italic;
font-size: 1.15rem;
color: var(--accent-deep);
margin: 0 0 14px;
text-wrap: pretty;
}
.feat-desc {
margin: 0;
color: var(--ink-soft);
font-size: 1rem;
line-height: 1.6;
text-wrap: pretty;
max-width: 54ch;
}
.feat-points {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 9px;
}
.feat-points li {
display: grid;
grid-template-columns: 22px 1fr;
gap: 10px;
align-items: start;
color: var(--ink);
font-size: 0.94rem;
line-height: 1.45;
text-wrap: pretty;
}
.feat-point-icon { font-size: 15px; line-height: 1.45; }
.feat-tags { margin-top: 18px; }
.feat-cta { margin-top: 24px; }
.feat-stores-label {
display: block;
margin-bottom: 10px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.72rem;
color: var(--ink-soft);
}
/* official store badges — Apple's and Google's own artwork, so no restyling
beyond size. Google's asset ships with built-in clear space, hence the
larger height + negative margins that make both buttons read the same. */
.store-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.store-badge { display: inline-flex; transition: transform 220ms var(--ease-out); }
.store-badge:hover { transform: translateY(-2px); }
.store-badge img { display: block; width: auto; }
.store-badge-apple img { height: 44px; }
.store-badge-google img { height: 65px; margin: -10.5px -9px; }
.feat-meta {
display: block;
margin-top: 16px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.68rem;
color: var(--ink-mute);
}
.proj-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--proj-grid-gap);
}
@media (max-width: 800px) { .proj-grid { grid-template-columns: 1fr; } }
/* The "VR / past work" career card spans the full grid width. On desktop it
lays the art and meta side-by-side so the wide banner doesn't get a giant
square of empty illustration. */
.proj.proj-wide {
grid-column: 1 / -1;
/* bolder gradient shade — lilac → pink → peach, blended with the surface so
it's clearly visible while keeping text readable. */
background:
linear-gradient(135deg,
color-mix(in oklab, var(--lilac) 42%, var(--surface)) 0%,
color-mix(in oklab, var(--pink) 34%, var(--surface)) 48%,
color-mix(in oklab, var(--peach) 44%, var(--surface)) 100%);
border-color: var(--line-strong);
}
.theme-night .proj.proj-wide {
background:
linear-gradient(135deg,
color-mix(in oklab, var(--lilac) 30%, var(--grad-purple-4)) 0%,
var(--grad-purple-1) 50%,
color-mix(in oklab, var(--pink-hot) 22%, var(--grad-purple-5)) 100%);
}
@media (min-width: 801px) {
.proj.proj-wide {
display: grid;
grid-template-columns: minmax(320px, 0.85fr) 1.15fr;
gap: 32px;
align-items: center;
}
.proj.proj-wide .proj-art { height: 100%; min-height: var(--proj-art-h); margin-bottom: 0; }
.proj.proj-wide .proj-meta { align-self: center; }
}
.proj {
position: relative;
padding: var(--proj-pad);
border-radius: var(--r-lg);
background: var(--surface);
border: 1px solid var(--line);
overflow: hidden;
cursor: pointer;
transition: transform 360ms var(--ease-out), box-shadow 360ms, border-color 360ms;
min-height: var(--proj-min-h);
display: flex; flex-direction: column; justify-content: space-between;
}
.proj:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
border-color: var(--line-strong);
}
.theme-night .proj:hover { box-shadow: 0 0 40px rgba(183,168,255,0.18); }
.proj-cover {
position: absolute; inset: 0;
background: linear-gradient(135deg, var(--accent-soft) 0%, transparent 60%);
pointer-events: none;
z-index: 0;
}
.proj.feat-pink .proj-cover { background: linear-gradient(135deg, var(--pink) 0%, var(--accent-soft) 50%, transparent 80%); opacity: 0.5; }
.proj.feat-peach .proj-cover { background: linear-gradient(135deg, var(--peach) 0%, var(--accent-soft) 50%, transparent 80%); opacity: 0.5; }
.proj.feat-mint .proj-cover { background: linear-gradient(135deg, var(--mint) 0%, var(--accent-soft) 50%, transparent 80%); opacity: 0.5; }
.proj.feat-sky .proj-cover { background: linear-gradient(135deg, var(--sky) 0%, var(--accent-soft) 50%, transparent 80%); opacity: 0.5; }
.theme-night .proj-cover { opacity: 0.18 !important; }
.proj-art {
position: relative;
height: var(--proj-art-h);
border-radius: var(--r-md);
margin-bottom: var(--proj-art-mb);
overflow: hidden;
background: var(--surface-2);
display: grid; place-items: center;
z-index: 1;
}
.proj-art svg { width: 70%; height: 70%; }
/* Collage preview for the career ("VR / past work") card — a tidy grid of each
game's cover image instead of a single illustration. data-count sets the
layout: 1 fills, 2 side-by-side, 3 = banner + two, 4 = 2x2. */
.proj-art-collage {
position: absolute; inset: 0;
display: grid;
gap: 3px;
width: 100%; height: 100%;
}
.proj-art-collage[data-count="1"] { grid-template-columns: 1fr; }
.proj-art-collage[data-count="2"] { grid-template-columns: 1fr 1fr; }
.proj-art-collage[data-count="3"],
.proj-art-collage[data-count="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.proj-art-collage[data-count="3"] .collage-cell:first-child { grid-column: 1 / -1; }
.collage-cell { position: relative; overflow: hidden; }
.collage-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.proj-meta { position: relative; z-index: 1; }
.proj-title {
font-family: var(--font-display);
font-size: var(--proj-title-fs);
font-weight: 500;
line-height: 1.1;
margin: 12px 0 8px;
}
.proj-title .it { font-style: italic; color: var(--accent-deep); }
.proj-desc { color: var(--ink-soft); font-size: var(--proj-desc-fs); margin: 0 0 16px; }
.proj-tags { display: flex; flex-wrap: wrap; gap: 6px; }
/* case study modal */
.modal-back {
position: fixed; inset: 0;
background: color-mix(in oklab, var(--bg) 60%, transparent);
backdrop-filter: blur(8px);
z-index: 100;
display: grid; place-items: center;
padding: 24px;
opacity: 0;
pointer-events: none;
transition: opacity 300ms;
}
.modal-back.open { opacity: 1; pointer-events: auto; }
.modal {
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
max-width: var(--modal-max-w);
width: 100%;
max-height: 86vh;
overflow-y: auto;
padding: var(--modal-pad);
box-shadow: var(--shadow-lg);
transform: translateY(20px) scale(0.98);
transition: transform 300ms var(--ease-out);
}
.modal-back.open .modal { transform: none; }
/* tiny floating lavender pill scrollbar — the track is kept well clear of
the modal's rounded corners so all four corners read as round. the thumb
itself is super thin (visible width = scrollbar width − 2 × transparent
border) so it feels like a delicate floating pill rather than a rail. */
.modal {
scrollbar-width: thin;
scrollbar-color: var(--accent-deep) transparent;
}
.modal::-webkit-scrollbar {
width: 14px;
}
.modal::-webkit-scrollbar-track {
background: transparent;
margin: calc(var(--r-lg) + 4px) 0;
}
.modal::-webkit-scrollbar-thumb {
background-color: var(--accent-deep);
border: 5px solid transparent;
background-clip: padding-box;
border-radius: 999px;
min-height: 60px;
transition: background-color 200ms;
}
.modal::-webkit-scrollbar-thumb:hover {
background-color: var(--pink-hot);
background-clip: padding-box;
}
.modal-close {
position: absolute; top: 20px; right: 20px;
width: var(--modal-close-size); height: var(--modal-close-size); border-radius: 50%;
background: var(--surface-2); border: 1px solid var(--line);
display: grid; place-items: center;
}
.modal-close:hover { background: var(--accent-soft); }
.modal-art {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--r-md);
margin: 20px 0 32px;
display: grid; place-items: center;
overflow: hidden;
}
/* project image carousel (inside .modal-art) */
.carousel-backdrop {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: blur(36px) saturate(1.4) brightness(0.95);
transform: scale(1.12); /* hide the blurred edge bleed */
z-index: 0;
pointer-events: none;
user-select: none;
}
.theme-night .carousel-backdrop { filter: blur(36px) saturate(1.2) brightness(0.7); }
.carousel-img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: contain; /* applies to ![]()
/