/* ============================================================
about.css
Styles scoped to .page--about (about/index.html).
Overrides the viewport-locked base layout so the page scrolls,
then builds the section cards using the overlay design tokens.
Space background layer:
.about-starfield - fixed full-viewport container (z 0)
.starfield__star - star ![]()
elements with twinkle animation
.starfield__nebula - nebula ![]()
elements with breathe animation
.starfield__shooting-star - shooting star ![]()
, spawned via JS
============================================================ */
/* ── Space background layer ──────────────────────────────────────────────
Fixed full-viewport div inserted by js/space-background.js as the first
child of . Holds all star / nebula / shooting-star ![]()
elements.
pointer-events: none keeps it from intercepting clicks or hovers. */
.about-starfield {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
/* Background colour lives on html.page--about body below */
}
/* All space elements are absolutely positioned within the fixed layer. */
.starfield__star,
.starfield__nebula,
.starfield__shooting-star {
position: absolute;
display: block;
user-select: none;
/* Remove default img border/outline just in case */
border: none;
outline: none;
}
/* ──────────────────────────────────────────────────────────────────────── */
/* ANIMATIONS */
/* ──────────────────────────────────────────────────────────────────────── */
/* Stars: gentle twinkle that respects the per-element --star-opacity token
set inline by JS. CSS custom properties are readable inside keyframes. */
@keyframes star-twinkle {
0%,
100% { opacity: var(--star-opacity, 0.7); }
50% { opacity: calc(var(--star-opacity, 0.7) * 0.25); }
}
.starfield__star {
/* Duration and delay also overridden inline by JS for variation. */
animation: star-twinkle var(--twinkle-dur, 4s) ease-in-out infinite;
}
/* Nebulas: slow, barely-perceptible breathing / rotation.
Gives the impression of swirling gas without being distracting. */
@keyframes nebula-breathe {
0%,
100% { transform: scale(1) rotate(0deg); }
33% { transform: scale(1.04) rotate(0.5deg); }
66% { transform: scale(0.97) rotate(-0.4deg); }
}
.starfield__nebula {
transform-origin: center;
animation: nebula-breathe var(--nebula-dur, 11s) ease-in-out infinite;
/* Blur softens the gradient edges into a genuinely diffuse gas-cloud look. */
filter: blur(40px);
}
/* Shooting stars: streak from off-screen, cross the viewport, then fade.
The SVG has the bright head on the RIGHT and tail fading LEFT.
Rotation is baked into the keyframe transform as rotate(N) translate(d, 0).
Because CSS applies rotate() THEN translate() in that order, the element
travels exactly along the axis it points — the head always leads and the
tail always trails with no mismatch.
clip-path starts showing only the head (rightmost ~5% of the SVG in local
space), then expands leftward to reveal the tail as the element moves.
rotate(28deg) translate(d, 0) → moves lower-right (head = right = leading)
rotate(152deg) translate(d, 0) → moves lower-left (head = right → lower-left = leading) */
@keyframes shoot-right {
/* Only the head is visible; element spawns off the left edge */
0% {
opacity: 1;
clip-path: inset(0 0 0 95%);
transform: rotate(28deg) translate(0, 0);
}
/* Full streak revealed; element is mid-flight across the viewport */
60% {
opacity: 1;
clip-path: inset(0 0 0 0);
transform: rotate(28deg) translate(55vw, 0);
}
/* Fades out as it exits off the right/bottom edge */
100% {
opacity: 0;
clip-path: inset(0 0 0 0);
transform: rotate(28deg) translate(75vw, 0);
}
}
@keyframes shoot-left {
/* Only the head is visible; element spawns off the right edge */
0% {
opacity: 1;
clip-path: inset(0 0 0 95%);
transform: rotate(152deg) translate(0, 0);
}
/* Full streak revealed; element is mid-flight across the viewport */
60% {
opacity: 1;
clip-path: inset(0 0 0 0);
transform: rotate(152deg) translate(55vw, 0);
}
/* Fades out as it exits off the left/bottom edge */
100% {
opacity: 0;
clip-path: inset(0 0 0 0);
transform: rotate(152deg) translate(75vw, 0);
}
}
/* No separate rotate: property needed — rotation lives inside the keyframes. */
.starfield__shooting-star--dir-right {
animation: shoot-right 2.2s ease-out forwards;
}
.starfield__shooting-star--dir-left {
animation: shoot-left 2.2s ease-out forwards;
}
/* ── Suppress landing-page blur layer ─────────────────────────────────── */
/* layout.css adds a body::after backdrop-filter: blur(4px) layer (z-index 5)
to soften the mockup panels on the landing page. Space-background pages
have no panels, so remove it to keep the starfield and cards sharp. */
html.has-space-bg body::after {
display: none;
}
/* ── Page-level: unlock scrolling ─────────────────────────────────────── */
/* base.css locks html + body to overflow: hidden for the fixed-panel
landing page. Reset both here so space-background pages can scroll. */
html.has-space-bg,
html.has-space-bg body {
overflow: auto;
}
html.has-space-bg body {
background-color: #080416; /* matches --overlay-card-bg base hue, solid */
color: var(--overlay-text);
min-height: 100vh;
}
/* ── Layout: constrained content column ───────────────────────────────── */
.has-space-bg .site-wrapper {
/* Sit above the fixed starfield layer (z-index: 0). */
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.has-space-bg main {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-xl);
padding: var(--space-xl) var(--space-md);
max-width: 52rem;
margin-inline: auto;
width: 100%;
}
/* ── Shared card shell ─────────────────────────────────────────────────── */
.about-hero__card,
.about-section__card,
.about-cta__card {
background: var(--overlay-card-bg);
border: 1px solid var(--overlay-card-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
}
/* ── Hero section ─────────────────────────────────────────────────────── */
.about-hero__eyebrow {
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--overlay-accent);
margin-bottom: var(--space-sm);
}
.about-hero__heading {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--overlay-text);
line-height: 1.15;
margin-bottom: var(--space-md);
}
.about-hero__body {
font-size: 1.0625rem;
line-height: 1.75;
color: var(--overlay-text-dim);
max-width: 40rem;
}
/* ── Content sections ─────────────────────────────────────────────────── */
.about-section__heading {
font-size: clamp(1.25rem, 3vw, 1.625rem);
font-weight: 600;
letter-spacing: -0.02em;
color: var(--overlay-text);
margin-bottom: var(--space-md);
/* Subtle accent rule beneath the heading */
padding-bottom: var(--space-sm);
border-bottom: 1px solid var(--overlay-divider-faint);
}
.about-section__body {
font-size: 1rem;
line-height: 1.75;
color: var(--overlay-text-dim);
}
/* ── CTA section ──────────────────────────────────────────────────────── */
.about-cta__card {
text-align: center;
/* Slightly more prominent than plain sections */
border-color: var(--overlay-border-dim);
}
.about-cta__heading {
font-size: clamp(1.375rem, 3.5vw, 1.875rem);
font-weight: 600;
letter-spacing: -0.025em;
color: var(--overlay-text);
margin-bottom: var(--space-lg);
}
.about-cta__btn {
display: inline-block;
padding: 0.75rem 2rem;
background: var(--overlay-accent);
color: var(--color-white);
font-size: 0.9375rem;
font-weight: 600;
border-radius: var(--radius-full);
text-decoration: none;
letter-spacing: 0.02em;
transition: background 0.2s ease, transform 0.2s ease;
}
.about-cta__btn:hover,
.about-cta__btn:focus-visible {
background: var(--overlay-accent-hover);
transform: scale(1.03);
outline: none;
}
/* ── Typer: blinking cursor ──────────────────────────────────────────── */
/* Thin vertical bar that blinks when idle, stays solid while typing */
.about-typer__cursor {
display: inline-block;
width: 3px;
height: 0.82em;
background: var(--overlay-accent);
vertical-align: middle;
margin-left: 1px;
border-radius: 1px;
animation: typer-cursor-blink 0.9s step-end infinite;
}
/* Solid (no blink) while a character is being typed or deleted */
.about-typer__cursor--typing {
animation: none;
opacity: 1;
}
@keyframes typer-cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ── Typer: IME composing underline ──────────────────────────────────── */
/* Replicates the underline IMEs draw under in-progress pinyin input */
.about-typer__composing {
text-decoration: underline;
text-underline-offset: 5px;
text-decoration-thickness: 2px;
text-decoration-color: var(--overlay-accent);
}
/* ── Typer: IME candidate bar ────────────────────────────────────────── */
/* Floats just below the heading like a system IME popup.
Hidden by default; .about-typer__ime-bar--visible shows it. */
.about-typer__ime-bar {
display: none;
align-items: center;
flex-wrap: wrap;
gap: 0.15rem 0.6rem;
margin-top: 0.5rem;
padding: 0.3rem 0.75rem;
width: fit-content;
/* Light popup style so it reads as a system overlay against the dark bg */
background: rgba(240, 240, 245, 0.96);
color: #1a1a1a;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: 5px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
/* Reset heading typographic styles — it should look like a system popup */
font-family: 'Inter', sans-serif;
font-size: 0.875rem;
font-weight: 400;
letter-spacing: 0;
line-height: 1.5;
}
.about-typer__ime-bar--visible {
display: flex;
}
/* Each candidate item */
.about-typer__ime-bar span {
padding: 0.1rem 0.25rem;
border-radius: 3px;
white-space: nowrap;
}
/* Highlighted / selected candidate */
.about-typer__ime-selected {
background: #3d7ecb;
color: #fff;
}
/* ── Accessibility: reduced-motion ───────────────────────────────────── */
/* Pause all starfield animations for users who request reduced motion.
Shooting stars are hidden entirely since their purpose is movement. */
@media (prefers-reduced-motion: reduce) {
.starfield__star,
.starfield__nebula {
animation: none;
}
.starfield__shooting-star {
display: none;
}
.about-typer__cursor {
animation: none;
}
}
/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
.has-space-bg main {
padding: var(--space-lg) var(--space-sm);
gap: var(--space-lg);
}
.about-hero__card,
.about-section__card,
.about-cta__card {
padding: var(--space-lg);
}
}