/* ============================================================
THANH DIEP — PORTFOLIO
Design study inspired by cinematic athlete-site patterns.
Vanilla CSS3 only. Original palette, type scale and artwork.
TABLE OF CONTENTS
1. Design tokens (custom properties)
2. Reset & base
3. Utilities (container, eyebrow, buttons, reveal system)
4. Loader
5. Header / sticky nav / overlay menu
6. Hero
7. Marquee strips
8. Statement section
9. Horizontal scroll gallery
10. Teaser panels
11. Hall of Fame grid (hover-swap cards)
12. Stats band
13. Skills / toolbox
14. Page hero (inner pages) + project grid + about page
15. Contact CTA + footer
16. Responsive breakpoints
17. Reduced motion
============================================================ */
/* ---------- 1. DESIGN TOKENS -------------------------------
╔═══════════════════════════════════════════════════════════╗
║ ★ THEME CONFIG — CHANGE THE WHOLE SITE'S LOOK HERE ★ ║
║ ║
║ Every color on the site flows from the tokens below. ║
║ Two ways to re-theme: ║
║ ║
║ A) Edit the 8 color tokens + 5 --flip-* tokens in :root. ║
║ (--flip-* is the palette the page crossfades to ║
║ during the mid-scroll theme flip.) ║
║ ║
║ B) Use a prebuilt theme: add data-theme to the ║
║ tag of each page, e.g. ║
║ ║
║ Available: "apex" (default) · "royal" · "noir" · ║
║ "mint" — defined right after :root. ║
║ ║
║ Fonts: swap --font-display / --font-body below AND the ║
║ Google Fonts in each HTML . ║
╚═══════════════════════════════════════════════════════════╝ */
:root {
/* ── APEX (default) — motorsport-poster scheme:
near-black with a green cast · silver · racing teal.
The mid-scroll flip lands on the poster's silver half. ── */
--base-bg: #0b0f0e; /* page background */
--base-bg-alt: #131917; /* raised surfaces (cards, loader) */
--base-line: #263230; /* hairline borders */
--base-ink: #f4f6f5; /* main text — silver white */
--base-ink-dim: #9fb0ac; /* secondary text — muted silver */
--accent: #00d2be; /* primary accent — racing teal */
--accent-2: #cfd8d6; /* supporting accent — silver */
--on-accent: #04110f; /* text placed ON the accent color */
/* Live tokens resolve from the base set; the scroll-gradient
system (below) blends them toward --flip-* via --fm */
--bg: var(--base-bg);
--bg-alt: var(--base-bg-alt);
--line: var(--base-line);
--ink: var(--base-ink);
--ink-dim: var(--base-ink-dim);
/* Palette the page blends toward around the flip section */
--flip-bg: #e9ecec;
--flip-bg-alt: #dde2e2;
--flip-line: #c3cbca;
--flip-ink: #0c1110;
--flip-ink-dim: #4d5a57;
/* Type: heavy poster-grade display + refined grotesque body */
--font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
--font-body: "Manrope", "Segoe UI", system-ui, sans-serif;
/* Fluid spacing scale — clamp() means spacing scales with
the viewport, so sections breathe on desktop and tighten
on mobile without extra media queries. */
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: clamp(1.5rem, 3vw, 2.5rem);
--space-4: clamp(2.5rem, 5vw, 4.5rem);
--space-5: clamp(4rem, 8vw, 7rem);
--space-6: clamp(6rem, 12vw, 11rem);
--container: 74rem;
--radius: 12px;
/* One easing curve used everywhere = cohesive motion */
--ease: cubic-bezier(0.22, 1, 0.36, 1);
/* ease-IN-OUT — used by the neon line wipes */
--ease-io: cubic-bezier(0.65, 0.05, 0.35, 1);
--dur: 0.8s;
--nav-h: 4.5rem;
}
/* ── PREBUILT ALTERNATE THEMES ─────────────────────────────────
Activate by setting data-theme on in each page.
Copy one of these blocks to invent your own theme. */
/* ROYAL — deep navy + coral + pale gold + light blue */
html[data-theme="royal"] {
--base-bg: #24305E;
--base-bg-alt: #2b3866;
--base-line: #3d4a86;
--base-ink: #f7f5ea;
--base-ink-dim: #A8D0E6;
--accent: #F76C6C;
--accent-2: #F8E9A1;
--on-accent: #24305E;
--flip-bg: #A8D0E6;
--flip-bg-alt: #99c5de;
--flip-line: #7fa9c6;
--flip-ink: #24305E;
--flip-ink-dim: #374785;
}
/* NOIR — charcoal + champagne gold + sage (moody luxury) */
html[data-theme="noir"] {
--base-bg: #0d0b09;
--base-bg-alt: #161310;
--base-line: #332b21;
--base-ink: #f0e9db;
--base-ink-dim: #a89e8c;
--accent: #d7b46a;
--accent-2: #93b39f;
--on-accent: #141005;
--flip-bg: #efe9dc;
--flip-bg-alt: #e5ddcb;
--flip-line: #d2c6ad;
--flip-ink: #171310;
--flip-ink-dim: #5b5344;
}
/* MINT — slate + electric mint + violet (technical, energetic) */
html[data-theme="mint"] {
--base-bg: #0e1116;
--base-bg-alt: #151a22;
--base-line: #2a3140;
--base-ink: #f2efe8;
--base-ink-dim: #9aa3b2;
--accent: #3ee6c4;
--accent-2: #8b7bff;
--on-accent: #0b0e13;
--flip-bg: #eceae2;
--flip-bg-alt: #e0ddd2;
--flip-line: #cbc6b8;
--flip-ink: #13171e;
--flip-ink-dim: #4c5462;
}
/* ---------- 2. RESET & BASE -------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
/* Smooth scrolling for same-page anchors (CSS-native) */
scroll-behavior: smooth;
scroll-padding-top: var(--nav-h);
}
body {
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: clip; /* full-bleed sections can't cause sideways scroll */
}
/* SCROLL-GRADIENT THEME BLEND ---------------------------------
JS writes --fm (0 → 1) each frame based on scroll proximity to
the [data-theme-section] band, and color-mix blends every token
continuously — the background *travels* between palettes as you
scroll instead of snapping. In light mode the blend inverts. */
body {
--bg: color-mix(in oklab, var(--flip-bg) calc(var(--fm, 0) * 100%), var(--base-bg));
--bg-alt: color-mix(in oklab, var(--flip-bg-alt) calc(var(--fm, 0) * 100%), var(--base-bg-alt));
--line: color-mix(in oklab, var(--flip-line) calc(var(--fm, 0) * 100%), var(--base-line));
--ink: color-mix(in oklab, var(--flip-ink) calc(var(--fm, 0) * 100%), var(--base-ink));
--ink-dim: color-mix(in oklab, var(--flip-ink-dim) calc(var(--fm, 0) * 100%), var(--base-ink-dim));
}
html.mode-light body {
--bg: color-mix(in oklab, var(--base-bg) calc(var(--fm, 0) * 100%), var(--flip-bg));
--bg-alt: color-mix(in oklab, var(--base-bg-alt) calc(var(--fm, 0) * 100%), var(--flip-bg-alt));
--line: color-mix(in oklab, var(--base-line) calc(var(--fm, 0) * 100%), var(--flip-line));
--ink: color-mix(in oklab, var(--base-ink) calc(var(--fm, 0) * 100%), var(--flip-ink));
--ink-dim: color-mix(in oklab, var(--base-ink-dim) calc(var(--fm, 0) * 100%), var(--flip-ink-dim));
}
/* Lock scroll while the overlay menu or loader is open */
body.no-scroll { overflow: hidden; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
/* Accessibility: always-visible focus for keyboard users */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
border-radius: 2px;
}
::selection { background: var(--accent); color: var(--on-accent); }
/* Skip link — hidden until focused (a11y best practice) */
.skip-link {
position: absolute;
top: -100%;
left: 1rem;
z-index: 300;
padding: 0.75rem 1.25rem;
background: var(--accent);
color: var(--on-accent);
font-weight: 700;
border-radius: 0 0 var(--radius) var(--radius);
transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; }
/* ---------- 3. UTILITIES ------------------------------------ */
.container {
width: min(100% - 2 * var(--space-3), var(--container));
margin-inline: auto;
}
.section { padding-block: var(--space-6); }
/* Small uppercase label above headings — big tracking, tiny size */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6em;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-dim);
}
.eyebrow::before {
content: "";
width: 2rem;
height: 1px;
background: var(--accent);
}
/* Display headings — scale contrast does the visual work */
.display {
font-family: var(--font-display);
font-size: clamp(2.4rem, 6vw, 4.8rem);
line-height: 0.95;
text-transform: uppercase;
letter-spacing: -0.01em;
}
/* Accent highlight inside sentences (concept: single energetic
color woven through copy) */
.hl { color: var(--accent); }
.hl-2 { color: var(--accent-2); }
/* --- Animated button ---------------------------------------
A sliding "fill" pseudo-element sweeps in on hover.
transform-only => runs on the compositor (cheap). */
.btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.6em;
padding: 0.9em 1.8em;
border: 1px solid var(--accent);
border-radius: 999px;
font-weight: 700;
font-size: 0.9rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
overflow: hidden;
isolation: isolate; /* keeps the ::before z-index local */
transition: color 0.35s var(--ease);
}
.btn::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--accent);
transform: translateX(-101%);
transition: transform 0.45s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--on-accent); }
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn .arrow { transition: transform 0.35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn--solid { background: var(--accent); color: var(--on-accent); }
.btn--solid::before { background: var(--ink); }
/* hover fill is --ink, so hover text must be --bg (always the
opposite pole of --ink) — fixes invisible text in light mode */
.btn--solid:hover,
.btn--solid:focus-visible { color: var(--bg); }
/* --- Scroll-reveal system ----------------------------------
Elements start shifted/transparent; JS adds .is-visible via
IntersectionObserver. --i staggers siblings. */
.reveal {
opacity: 0;
transform: translateY(2.5rem);
transition:
opacity var(--dur) var(--ease),
transform var(--dur) var(--ease);
transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Image "curtain" reveal: a panel un-scales to unveil the image */
.img-reveal { position: relative; overflow: hidden; }
.img-reveal::after {
content: "";
position: absolute;
inset: 0;
background: var(--bg-alt);
transform-origin: right;
transition: transform 0.9s var(--ease);
transition-delay: calc(var(--i, 0) * 90ms);
}
.img-reveal img {
transform: scale(1.15);
transition: transform 1.2s var(--ease);
}
.img-reveal.is-visible::after { transform: scaleX(0); }
.img-reveal.is-visible img { transform: scale(1); }
/* ---------- 4. LOADER --------------------------------------- */
.loader {
position: fixed;
inset: 0;
z-index: 400;
display: grid;
place-content: center;
gap: var(--space-2);
background: var(--bg);
transition: opacity 0.6s var(--ease), visibility 0.6s;
}
.loader__word {
font-family: var(--font-display);
font-size: clamp(1.6rem, 5vw, 3rem);
text-transform: uppercase;
animation: loader-pulse 1.2s ease-in-out infinite alternate;
}
.loader__bar {
height: 3px;
background: var(--line);
border-radius: 2px;
overflow: hidden;
}
.loader__bar::after {
content: "";
display: block;
height: 100%;
background: var(--accent);
transform-origin: left;
animation: loader-fill 1.4s var(--ease) infinite;
}
@keyframes loader-pulse { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes loader-fill {
0% { transform: scaleX(0); }
60% { transform: scaleX(1); transform-origin: left; }
61% { transform-origin: right; }
100% { transform: scaleX(0); transform-origin: right; }
}
/* JS adds this once window "load" fires — scales out like a lens */
.loader { transition: opacity 0.6s var(--ease), visibility 0.6s, scale 0.6s var(--ease); }
.loader.is-done { opacity: 0; visibility: hidden; scale: 1.08; }
/* ---------- 5. HEADER / NAV --------------------------------- */
.site-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
height: var(--nav-h);
display: flex;
align-items: center;
transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
/* JS toggles this class after a small scroll distance */
.site-header.nav--scrolled {
background: color-mix(in srgb, var(--bg) 80%, transparent);
backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--line);
}
.site-header__inner {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: var(--font-display);
font-size: 1.15rem;
letter-spacing: 0.02em;
}
.logo .hl { transition: color 0.3s; }
.logo:hover .hl { color: var(--accent-2); }
/* Hamburger — a real