/* =============================================================
santiWeb - Santiago Olais
Plain CSS · Dark + Light themes via [data-theme] on
============================================================= */
/* ---------- TOKENS ---------- */
:root {
--accent: #f5901c;
--accent-fg: #0a0a0a;
--accent-2: #ff4f1f;
--accent-3: #ffd166;
/* RGB triplet for use inside rgba() neon glows so opacity is tweakable */
--accent-rgb: 245, 144, 28;
--font-sans: "Inter", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif;
--font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
--pad-section-y: clamp(4rem, 8vw, 9rem);
--pad-page-x: clamp(1.2rem, 4vw, 4rem);
--max-w: 1400px;
--header-h: 64px;
--header-h-condensed: 48px;
/* Height of the `.scroll-progress` bar - referenced by the mobile
drawer so it can sit BELOW the progress strip instead of covering
it. Single source of truth for both rules. */
--scroll-progress-h: 2px;
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-snap: cubic-bezier(0.7, 0, 0.2, 1);
}
:root[data-theme="dark"] {
--bg: #0a0a0a;
--bg-alt: #111111;
--bg-panel: #161616;
--bg-elev: #1c1c1c;
--bg-inset: #1f1f1f;
--fg: #f5f5f5;
/* RGB triplet mirror of --fg (same pattern as --accent-rgb) so
canvas/effect code can inject it into rgba() without a runtime
hex->rgb parse. Inverse of --bg by definition, so effects that
want "opposite of the theme" just read this. */
--fg-rgb: 245, 245, 245;
--fg-mute: #a3a3a3;
--fg-dim: #6b6b6b;
--line: #2a2a2a;
--line-strong: #3d3d3d;
--line-fg: #f5f5f5;
/* hard brutalist offset - in dark mode the shadow uses the same fg
off-white as the body text, mirroring the light-mode convention of a
solid black offset on light bg */
--shadow: 5px 5px 0 0 #f5f5f5;
--grain-opacity: 0.06;
color-scheme: dark;
}
:root[data-theme="light"] {
--bg: #f9f8f5;
--bg-alt: #f1f0eb;
--bg-panel: #ffffff;
--bg-elev: #ffffff;
--bg-inset: #f4f2ed;
--fg: #0a0a0a;
/* Mirror of --fg for rgba() consumers — see dark theme note. */
--fg-rgb: 10, 10, 10;
--fg-mute: #3a3a3a;
--fg-dim: #6b6b6b;
--line: #0a0a0a;
--line-strong: #0a0a0a;
--line-fg: #0a0a0a;
--shadow: 5px 5px 0 0 #0a0a0a;
--grain-opacity: 0.04;
color-scheme: light;
}
/* ---------- VIEW TRANSITIONS (theme swap) ----------
Modern Chromium / Safari 18+ run the theme swap through the View
Transitions API: the browser snapshots the page before/after the
swap and cross-fades them on the GPU compositor in a single pass,
so per-element color/border/shadow transitions don't all fire at
once, and the cursor + DOOM iframe stay live during the fade.
Engines without the API (mostly Firefox right now) fall back to an
instant swap in JS - a snappy repaint reads cleaner than the global
`*` color tween we used to run there. */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 380ms;
animation-timing-function: var(--ease);
}
/* Live overlays opt out of being snapshot - they keep painting in
real time on top of the cross-fade so the cursor doesn't freeze
and the DOOM frame keeps drawing. */
.cursor-canvas,
.cursor-core,
.doom-modal {
view-transition-name: none;
}
/* ---------- RESET ---------- */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
background: var(--bg);
scrollbar-width: thin;
scrollbar-color: var(--line-strong) var(--bg);
scroll-padding-top: calc(var(--header-h) + 16px);
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
body {
min-height: 100vh;
font-family: var(--font-sans);
font-weight: 400;
font-size: 16px;
line-height: 1.6;
background: transparent;
color: var(--fg);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: "ss01", "cv11";
}
/* Form controls (button, input, textarea, select) don't reliably
inherit -webkit-font-smoothing / -moz-osx-font-smoothing from body
in Chromium / Firefox, so re-state them here. Without this, button
labels and input text can render slightly heavier than surrounding
copy and look subtly out of place. */
button,
input,
textarea,
select {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* hide native cursor on pointer:fine devices once custom cursor is up */
body.has-custom-cursor,
body.has-custom-cursor * {
cursor: none !important;
}
@media (pointer: coarse) {
body.has-custom-cursor,
body.has-custom-cursor * {
cursor: auto !important;
}
}
a {
color: inherit;
text-decoration: none;
}
img,
svg,
iframe {
display: block;
max-width: 100%;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
input,
textarea {
font: inherit;
color: inherit;
}
ul,
ol {
list-style: none;
}
::selection {
background: var(--accent);
color: var(--accent-fg);
}
/* keyboard focus - high-contrast accent ring on every focusable element.
We rely on :focus-visible so it never appears for mouse clicks. */
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.skip:focus-visible,
.header__nav__link:focus-visible,
input:focus-visible,
textarea:focus-visible {
outline: none;
}
.main:focus-visible {
outline: none;
}
/* webkit scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--bg);
}
::-webkit-scrollbar-thumb {
background: var(--line-strong);
border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
background: var(--accent);
}
/* ---------- UTIL ---------- */
.brut-label {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.dot {
display: inline-block;
width: 8px;
height: 8px;
background: var(--fg-dim);
flex-shrink: 0;
}
.dot--live {
background: var(--accent);
/* dual layered glow: an inner solid halo + the outward pulse ring */
box-shadow:
0 0 6px rgba(var(--accent-rgb), 0.85),
0 0 14px rgba(var(--accent-rgb), 0.45),
0 0 0 0 rgba(var(--accent-rgb), 0.7);
animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
0% {
box-shadow:
0 0 6px rgba(var(--accent-rgb), 0.85),
0 0 14px rgba(var(--accent-rgb), 0.45),
0 0 0 0 rgba(var(--accent-rgb), 0.7);
}
70% {
box-shadow:
0 0 6px rgba(var(--accent-rgb), 0.85),
0 0 14px rgba(var(--accent-rgb), 0.45),
0 0 0 9px rgba(var(--accent-rgb), 0);
}
100% {
box-shadow:
0 0 6px rgba(var(--accent-rgb), 0.85),
0 0 14px rgba(var(--accent-rgb), 0.45),
0 0 0 0 rgba(var(--accent-rgb), 0);
}
}
/* ---------- NEON ACCENT GLOW ----------
A single breathing keyframe re-used across accent surfaces (hero name,
section `//` prefix, work title underline) so the orange feels electric and
alive without overwhelming the brutalist surfaces. */
@keyframes accentBreathe {
0%, 100% {
text-shadow:
0 0 8px rgba(var(--accent-rgb), 0.32),
0 0 22px rgba(var(--accent-rgb), 0.18);
}
50% {
text-shadow:
0 0 14px rgba(var(--accent-rgb), 0.55),
0 0 36px rgba(var(--accent-rgb), 0.32);
}
}
/* Glow-pulse for the small orange cap blocks at the right edge of each
section line. Same layered shadow recipe as `.dot--live` (a stable
inner halo + an outward expanding ring that fades out) but stretched
to a 3.2s cadence - the section caps are larger and more spread out
across the page than the tiny live dot, so a slower rhythm reads as
"breathing HUD accent" rather than "alarm light". */
@keyframes sectionCapPulse {
0% {
box-shadow:
0 0 8px rgba(var(--accent-rgb), 0.85),
0 0 18px rgba(var(--accent-rgb), 0.45),
0 0 0 0 rgba(var(--accent-rgb), 0.7);
}
70% {
box-shadow:
0 0 8px rgba(var(--accent-rgb), 0.85),
0 0 18px rgba(var(--accent-rgb), 0.45),
0 0 0 10px rgba(var(--accent-rgb), 0);
}
100% {
box-shadow:
0 0 8px rgba(var(--accent-rgb), 0.85),
0 0 18px rgba(var(--accent-rgb), 0.45),
0 0 0 0 rgba(var(--accent-rgb), 0);
}
}
@media (prefers-reduced-motion: reduce) {
/* keep glows but stop the breathing */
.hero__title__line--accent > span,
.section__title::before,
.section__line::after,
.work__item__title h3::after {
animation: none !important;
}
}
/* ---------- GRAIN OVERLAY ---------- */
.grain {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9998;
opacity: var(--grain-opacity);
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
background-size: 220px;
}
/* ---------- NUCLEUS ----------
A scoped 3-blob warm gradient cluster injected behind specific titles
(hero accent + every section title). Each blob orbits on a different
prime-ish period and the whole cluster slowly rotates - the effect is
a small, elegant "merging nucleus" of warm light, not a global wash.
No blend modes: solid translucent gradients so it reads consistently
on both dark and light themes. */
.nucleus {
position: absolute;
--n-size: 220px;
width: var(--n-size);
height: var(--n-size);
pointer-events: none;
z-index: -1;
filter: saturate(1.7) brightness(1.2);
opacity: 0.7;
}
.nucleus__core {
position: absolute;
inset: 0;
animation: nucleusSpin 32s linear infinite;
will-change: transform;
}
@keyframes nucleusSpin {
to { transform: rotate(360deg); }
}
.nucleus__core > i {
position: absolute;
top: 22%;
left: 22%;
width: 56%;
height: 56%;
border-radius: 50%;
/* heavy blur so the orbs lose all shape and read as a pure neon halo
of warm light spilling outward - relative to nucleus size so it
scales correctly between hero and section titles.
Intentionally no `will-change: transform` here - the parent
`.nucleus__core` is already promoted to its own compositor layer
(for the 32s spin), and the three orbs share that layer instead of
each getting their own. With ~6 title nuclei on the page that saved
~18 extra GPU layers (18 heavy blurs) with no visual difference. */
filter: blur(calc(var(--n-size) * 0.32));
}
.nucleus__core > i:nth-child(1) {
background: radial-gradient(circle, hsla(22, 100%, 62%, 1), hsla(22, 100%, 62%, 0) 70%);
animation: nucleusOrbit1 7s ease-in-out var(--n-delay, 0s) infinite;
}
.nucleus__core > i:nth-child(2) {
background: radial-gradient(circle, hsla(40, 100%, 64%, 0.95), hsla(40, 100%, 64%, 0) 70%);
animation: nucleusOrbit2 11s ease-in-out var(--n-delay, 0s) infinite;
}
.nucleus__core > i:nth-child(3) {
background: radial-gradient(circle, hsla(10, 100%, 58%, 0.95), hsla(10, 100%, 58%, 0) 70%);
animation: nucleusOrbit3 13s ease-in-out var(--n-delay, 0s) infinite;
}
@keyframes nucleusOrbit1 {
0%, 100% { transform: translate(-14%, -8%) scale(1); }
33% { transform: translate(8%, 6%) scale(1.2); }
66% { transform: translate(2%, -10%) scale(0.85); }
}
@keyframes nucleusOrbit2 {
0%, 100% { transform: translate(10%, 8%) scale(1.05); }
40% { transform: translate(-8%, -6%) scale(0.9); }
75% { transform: translate(4%, 12%) scale(1.25); }
}
@keyframes nucleusOrbit3 {
0%, 100% { transform: translate(-4%, 10%) scale(0.95); }
50% { transform: translate(10%, -8%) scale(1.2); }
}
:root[data-theme="light"] .nucleus {
opacity: 0.55;
filter: saturate(1.5);
}
@media (prefers-reduced-motion: reduce) {
.nucleus { display: none; }
}
/* placement variants - kept here so the JS only needs to inject one
.nucleus span and the CSS handles per-target sizing & positioning */
.section__title { position: relative; isolation: isolate; }
.section__title .nucleus {
--n-size: clamp(60px, 6vw, 100px);
/* centered on the // glyph so the halo bleeds out from behind it */
left: 0;
top: 50%;
transform: translate(-15%, -50%);
}
.hero__title { isolation: isolate; }
.hero__title .nucleus {
--n-size: clamp(70px, 9vw, 130px);
/* anchored over the SANTI! accent line, centered on the "S" */
left: 5%;
bottom: 12%;
transform: translateX(-50%);
}
/* ---------- CUSTOM CURSOR ---------- */
.cursor-canvas {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9996;
mix-blend-mode: screen;
opacity: 1;
}
:root[data-theme="light"] .cursor-canvas {
mix-blend-mode: multiply;
opacity: 0.9;
}
.cursor-core {
position: fixed;
top: 0;
left: 0;
width: 26px;
height: 26px;
pointer-events: none;
z-index: 9999;
transform: translate3d(-100px, -100px, 0);
will-change: transform;
mix-blend-mode: difference;
}
.cursor-core__ring {
position: absolute;
inset: 0;
border: 2px solid #fff;
transform-origin: center;
}
.cursor-core__dot {
position: absolute;
top: 50%;
left: 50%;
width: 4px;
height: 4px;
background: #fff;
transform: translate(-50%, -50%);
}
@media (pointer: coarse), (hover: none) {
.cursor-canvas,
.cursor-core {
display: none;
}
}
/* ---------- BOOT LOADER ---------- */
.boot {
position: fixed;
inset: 0;
z-index: 10000;
background: var(--bg);
display: grid;
place-items: center;
transition: opacity 500ms var(--ease), visibility 500ms var(--ease);
}
.boot.is-done {
opacity: 0;
visibility: hidden;
}
.boot__inner {
width: min(360px, 80vw);
text-align: left;
}
.boot__brand {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(2rem, 6vw, 3rem);
letter-spacing: -0.04em;
line-height: 1;
}
.boot__brand span {
color: var(--accent);
}
.boot__bar {
margin-top: 24px;
height: 6px;
background: var(--bg-inset);
border: 1.5px solid var(--line-strong);
position: relative;
overflow: hidden;
}
.boot__bar span {
position: absolute;
inset: 0;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 80ms linear;
}
.boot__meta {
margin-top: 12px;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg-mute);
display: flex;
justify-content: space-between;
}
.boot__meta .boot__pct {
color: var(--accent);
}
/* ---------- SKIP LINK ----------
Hidden off-screen by default, slides into view when tab-focused.
Click sends the user past the header straight to the first content section. */
.skip {
position: fixed;
top: 12px;
left: 12px;
padding: 10px 16px;
background: var(--accent);
color: var(--accent-fg);
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
border: 2px solid var(--line-fg);
box-shadow: 4px 4px 0 0 var(--line-fg);
z-index: 10001;
transform: translateY(calc(-100% - 24px));
opacity: 0;
transition:
transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 220ms var(--ease);
}
.skip:focus-visible,
.skip:focus {
transform: translateY(0);
opacity: 1;
outline: none;
}
.skip:hover {
background: var(--fg);
color: var(--bg);
}
/* ---------- SCROLL PROGRESS ---------- */
.scroll-progress {
position: fixed;
top: var(--header-h);
left: 0;
right: 0;
height: var(--scroll-progress-h);
background: var(--accent);
transform: scaleX(0);
transform-origin: left center;
z-index: 99;
pointer-events: none;
will-change: transform;
/* Follow the header as it shrinks/expands. The transition timing is
tuned to match the header height transition below so the bar never
visually detaches from the header bottom edge. */
transition: top 320ms var(--ease);
}
:root.is-header-condensed .scroll-progress {
top: var(--header-h-condensed);
}
/* ---------- HEADER ---------- */
.header {
/* `sticky` keeps the header in the document flow (so the hero starts
right below it instead of having to reserve `--header-h` of top
padding), and pins it to the top of the viewport once you scroll
past its natural position. */
position: sticky;
top: 0;
height: var(--header-h);
padding: 0 var(--pad-page-x);
display: flex;
align-items: center;
gap: 32px;
z-index: 100;
background: var(--bg);
border-bottom: 1.5px solid var(--line);
/* Smoothly morph between full and condensed HUD states. Height,
padding, background and border are all animated together. The
timings stay short enough to feel snappy but long enough to read
as a deliberate "mode change" rather than a flicker. */
transition:
height 320ms var(--ease),
background-color 280ms var(--ease),
border-color 200ms var(--ease),
box-shadow 280ms var(--ease);
}
/* Faint hairline upgrade once the user has scrolled at all. Pre-existing
behavior, kept so the header doesn't visually float at scrollY=0. */
.header.is-scrolled {
border-bottom-color: var(--line-strong);
}
/* HUD reticle brackets at the far edges. Hidden offscreen and faded out
in the resting state; they slide inward and fade up once the header
condenses. Pure decoration — `aria-hidden` is implicit on pseudos. */
.header::before,
.header::after {
content: "";
position: absolute;
top: 50%;
width: 6px;
height: 14px;
border: 1.5px solid var(--accent);
opacity: 0;
pointer-events: none;
transition:
transform 360ms var(--ease-snap),
opacity 240ms var(--ease);
}
.header::before {
left: calc(var(--pad-page-x) - 16px);
border-right: none;
transform: translate(-12px, -50%);
}
.header::after {
right: calc(var(--pad-page-x) - 16px);
border-left: none;
transform: translate(12px, -50%);
}
.header.is-condensed::before,
.header.is-condensed::after {
opacity: 0.85;
transform: translate(0, -50%);
}
/* ---- CONDENSED MODE ---------------------------------------------------
When the user scrolls past the hero the header shifts into a tighter,
translucent HUD readout: smaller height, glass background, an accent
underline that gains a faint neon halo, and a section badge that
reveals itself next to the (now collapsed) logo. */
.header.is-condensed {
height: var(--header-h-condensed);
background: var(--bg);
/* Keep the hairline border in its usual subtle tone instead of
switching to accent - the scroll-progress bar immediately under
the header is the only accent-colored strip, which keeps it
readable as the true scroll-progress indicator rather than a
decorative HUD line. */
border-bottom-color: var(--line-strong);
box-shadow: 0 8px 24px -20px rgba(0, 0, 0, 0.45);
}
.header__logo {
font-family: var(--font-display);
font-weight: 700;
font-size: 22px;
letter-spacing: -0.04em;
display: inline-flex;
align-items: baseline;
gap: 1px;
user-select: none;
position: relative;
}
.header__logo__a {
display: inline-block;
padding: 2px 6px;
background: var(--fg);
color: var(--bg);
transition: transform 200ms var(--ease-snap), background 200ms;
}
.header__logo__b,
.header__logo__c {
/* Both spans collapse smoothly when the header condenses. We animate
`max-width` (with overflow hidden on the parent flex item) AND
opacity so the morph reads as the WEB tag retracting into the
boxed SO mark, like a HUD label dropping its descriptor. */
display: inline-block;
overflow: hidden;
max-width: 4ch;
opacity: 1;
transition:
max-width 320ms var(--ease),
opacity 200ms var(--ease),
margin 320ms var(--ease);
}
.header__logo__b {
color: var(--accent);
font-weight: 500;
margin: 0 1px;
}
.header__logo__c {
color: var(--fg);
font-size: 14px;
letter-spacing: 0.04em;
font-weight: 600;
max-width: 6ch;
}
.header.is-condensed .header__logo__b,
.header.is-condensed .header__logo__c {
max-width: 0;
opacity: 0;
margin-left: 0;
margin-right: 0;
}
.header__logo:hover .header__logo__a {
transform: translate(-2px, -2px);
background: var(--accent);
color: var(--accent-fg);
}
/* Section readout badge - reveals next to the collapsed logo once the
header condenses, acts as a live HUD indicator of which section the
reader is currently in. Updated by the scroll-spy in scripts.js. */
.header__section {
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding: 0 8px;
border: 1px solid var(--line-strong);
background: color-mix(in srgb, var(--bg-panel) 60%, transparent);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fg);
/* Hidden by default - slides in from the left and fades up when
condensed. `max-width: 0` lets us animate the gap closure too. */
max-width: 0;
opacity: 0;
overflow: hidden;
white-space: nowrap;
transform: translateX(-6px);
margin-left: 0;
transition:
max-width 360ms var(--ease),
opacity 220ms var(--ease),
transform 360ms var(--ease-snap),
margin-left 360ms var(--ease),
border-color 200ms var(--ease),
background 200ms var(--ease);
}
.header.is-condensed .header__section {
/* Sized to comfortably fit the widest localized label ("EXPERIENCIA"
in ES at 11 chars) PLUS caret + gap + padding. `ch` only measures
glyph advance width, so we need generous headroom on top of the
raw char count to cover the extra letter-spacing tracking. */
max-width: 28ch;
opacity: 1;
transform: translateX(0);
margin-left: 14px;
border-color: var(--accent);
}
/* When the HUD has no active section (e.g. user scrolled back into the
hero), collapse the pill entirely even in condensed mode - we don't
want a lonely caret floating next to the logo with no label. */
.header.is-condensed .header__section.is-empty {
max-width: 0;
opacity: 0;
transform: translateX(-6px);
margin-left: 0;
border-color: transparent;
}
.header__section__caret {
/* Brutalist HUD data block - a solid accent rectangle that echoes
the same motif as the section-line end caps and the PROFILE.SYS
live dot. Uses a separate, dialed-back pulse (`sectionBadgePulse`)
because the badge sits inside the tight condensed header and a
full-strength pulse reads as agitated in such a small container.
Sized 6x6 so it looks like a data marker next to the 10px readout
text rather than a full-height block crowding the label.
`flex-shrink: 0` keeps it from squashing when the label hits its
`text-overflow: ellipsis` width cap. */
display: inline-block;
width: 6px;
height: 6px;
flex-shrink: 0;
background: var(--accent);
animation: sectionBadgePulse 3.6s ease-out infinite;
}
/* Toned-down twin of `sectionCapPulse` - smaller halos, a shorter ring
throw (6px instead of 10px), and lower peak alphas. Reads as a calm
breath rather than a flashing beacon, which is the right tone for a
marker sitting inside the condensed-header chrome. */
@keyframes sectionBadgePulse {
0% {
box-shadow:
0 0 4px rgba(var(--accent-rgb), 0.55),
0 0 10px rgba(var(--accent-rgb), 0.25),
0 0 0 0 rgba(var(--accent-rgb), 0.4);
}
70% {
box-shadow:
0 0 4px rgba(var(--accent-rgb), 0.55),
0 0 10px rgba(var(--accent-rgb), 0.25),
0 0 0 6px rgba(var(--accent-rgb), 0);
}
100% {
box-shadow:
0 0 4px rgba(var(--accent-rgb), 0.55),
0 0 10px rgba(var(--accent-rgb), 0.25),
0 0 0 0 rgba(var(--accent-rgb), 0);
}
}
@media (prefers-reduced-motion: reduce) {
.header__section__caret { animation: none; }
}
.header__section__name {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
/* Smooth content-swap animation when the active section changes. */
transition: opacity 180ms var(--ease), transform 180ms var(--ease);
}
.header__section.is-changing .header__section__name {
opacity: 0;
transform: translateY(-2px);
}
.header__nav {
display: flex;
align-items: center;
gap: 28px;
margin-left: auto;
/* Animate the inter-link gap so the nav tightens slightly in
condensed mode, reinforcing the "compressed HUD" feel. */
transition: gap 280ms var(--ease);
}
.header.is-condensed .header__nav {
gap: 22px;
}
.header__nav__link {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
position: relative;
padding: 6px 0;
color: var(--fg-mute);
transition:
color 180ms var(--ease),
font-size 280ms var(--ease),
letter-spacing 280ms var(--ease);
}
.header.is-condensed .header__nav__link {
font-size: 10px;
letter-spacing: 0.14em;
}
.header__nav__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background: var(--accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 220ms var(--ease);
}
.header__nav__link:hover,
.header__nav__link:focus-visible,
.header__nav__link.is-active {
color: var(--fg);
outline: none;
}
.header__nav__link:hover::after,
.header__nav__link:focus-visible::after,
.header__nav__link.is-active::after {
transform: scaleX(1);
}
.header__actions {
display: flex;
align-items: stretch;
gap: 12px;
}
.lang-toggle {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.16em;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border: 1.5px solid var(--line-strong);
background: transparent;
color: var(--fg-mute);
transition: border-color 180ms;
}
.lang-toggle:hover {
border-color: var(--accent);
}
.lang-toggle__opt {
transition: color 180ms;
}
.lang-toggle__opt.is-active {
color: var(--accent);
}
.lang-toggle__sep {
color: var(--fg-dim);
}
.theme-toggle {
width: 36px;
height: 36px;
border: 1.5px solid var(--line-strong);
display: grid;
place-items: center;
position: relative;
overflow: hidden;
transition: border-color 180ms, background 180ms;
}
.theme-toggle:hover {
border-color: var(--accent);
background: var(--bg-elev);
}
/* the icons live inside this wrapper so we can spin just them
(not the whole brutalist button frame) on theme swap */
.theme-toggle__icons {
position: absolute;
inset: 0;
display: block;
transform-origin: 50% 50%;
}
.theme-toggle.is-spinning .theme-toggle__icons {
animation: themeToggleSpin 520ms var(--ease-snap);
}
@keyframes themeToggleSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.theme-toggle svg {
width: 16px;
height: 16px;
position: absolute;
inset: 0;
margin: auto;
transition: transform 350ms var(--ease-snap), opacity 220ms;
}
:root[data-theme="dark"] .theme-toggle__sun {
transform: translateY(120%) rotate(90deg);
opacity: 0;
}
:root[data-theme="dark"] .theme-toggle__moon {
transform: translateY(0) rotate(0);
opacity: 1;
}
:root[data-theme="light"] .theme-toggle__sun {
transform: translateY(0) rotate(0);
opacity: 1;
}
:root[data-theme="light"] .theme-toggle__moon {
transform: translateY(-120%) rotate(-90deg);
opacity: 0;
}
.burger {
display: none;
width: 36px;
height: 36px;
border: 1.5px solid var(--line-strong);
position: relative;
}
/* All three bars are anchored to the exact vertical center of the
button (top: 50%, then `margin-top: -1px` pulls them up by half their
own 2px height). The closed state shifts bars 1 and 3 up/down with a
transform; the open state simply removes that shift and rotates -
both rotating bars share the SAME center of rotation, so the X is
symmetric by construction (no translate math to get wrong). */
.burger span {
position: absolute;
left: 8px;
right: 8px;
top: 50%;
height: 2px;
margin-top: -1px;
background: var(--fg);
transition: transform 220ms var(--ease-snap), opacity 220ms;
}
.burger span:nth-child(1) { transform: translateY(-7px); }
.burger span:nth-child(2) { transform: translateY(0); }
.burger span:nth-child(3) { transform: translateY(7px); }
.burger.is-open span:nth-child(1) { transform: rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: rotate(-45deg); }
/* ---------- HERO ---------- */
.hero {
position: relative;
/* Hero fills exactly the remaining viewport below the (sticky, in-flow)
header so the bottom-anchored marquee always lands on the fold.
`100vh` is the fallback for engines without dynamic viewport units;
`100dvh` wins in modern browsers (and on mobile it shrinks/grows
with the URL bar instead of overflowing). */
height: calc(100vh - var(--header-h));
height: calc(100dvh - var(--header-h));
padding: 80px var(--pad-page-x) 120px;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
max-width: var(--max-w);
margin: 0 auto;
width: 100%;
}
.hero__grid {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(to right, var(--line) 1px, transparent 1px),
linear-gradient(to bottom, var(--line) 1px, transparent 1px);
background-size: 80px 80px;
background-position: center;
mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 70%);
-webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 70%);
/* per-theme opacity - dark theme gets a softer grid since the dark bg
already creates contrast; light theme gets a stronger grid because
light bg + low-contrast lines wash out otherwise */
opacity: var(--hero-grid-opacity, 0.5);
animation: gridDrift 60s linear infinite;
}
/* dark needs both higher opacity AND a lighter line color since the
default --line is so close to the bg it disappears at low opacity. */
:root[data-theme="dark"] .hero__grid {
--hero-grid-opacity: 0.6;
background-image:
linear-gradient(to right, var(--line-strong) 1px, transparent 1px),
linear-gradient(to bottom, var(--line-strong) 1px, transparent 1px);
}
:root[data-theme="light"] .hero__grid { --hero-grid-opacity: 0.1; }
/* Seamless drift: both endpoints are tile-aligned (the pattern repeats
every 80px), so iteration N ends pixel-identically to where
iteration N+1 begins - no snap on loop. Declaring an explicit `from`
is critical; without it CSS fills the implicit start from the
static `background-position: center`, which resolves to an arbitrary
pixel offset tied to the hero's current size and won't line up with
the `to` endpoint. Negative offsets drift the pattern up-left;
using 10 tiles (-800px) over 30s preserves the original visible
pace while still landing on an exact tile boundary for the loop. */
@keyframes gridDrift {
from { background-position: 0 0; }
to { background-position: -800px -800px; }
}
/* ---- ANIMATED HERO CELLS ----
JS sprinkles small accent shapes at random snapped 80px grid cells, each
playing one of several brutalist micro-animations. Lives in its own layer
(sibling of .hero__grid) so cell opacity isn't multiplied by the line
layer's per-theme opacity. */
.hero__cells {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse at 30% 50%, #000 0%, transparent 75%);
z-index: 0;
}
.hero__cells__cell {
position: absolute;
width: 80px;
height: 80px;
pointer-events: none;
perspective: 320px;
will-change: transform, opacity;
}
/* All five twinkle variants share the same on/off rhythm (idle, peak at
44%, back to idle by 88%, idle through 100%). Previously that lived
as five near-duplicate @keyframes rules; consolidated here into a
single `heroCellTick` keyframe that reads the per-variant peak
transform and peak opacity from CSS custom properties. Each variant
below just sets `--cell-rest`, `--cell-peak` and `--cell-op`. JS
already drives `--cell-dur` and `--cell-delay` per cell via
inline styles, so the timing story is unchanged. */
.hero__cells__cell::before {
content: "";
position: absolute;
inset: 28px;
transform-origin: 50% 50%;
opacity: 0;
animation: heroCellTick var(--cell-dur, 5s) ease-in-out var(--cell-delay, 0s) infinite;
will-change: transform, opacity, background-color;
}
@keyframes heroCellTick {
0%, 88%, 100% {
transform: var(--cell-rest, none);
opacity: 0;
}
44% {
transform: var(--cell-peak, none);
opacity: var(--cell-op, 0.3);
}
}
/* variant 1: orange fill flash (no transform, opacity-only) */
.hero__cells__cell--fill::before {
inset: 8px;
background: var(--accent);
--cell-op: 0.22;
}
/* variant 2: small dot scales up and out */
.hero__cells__cell--pulse::before {
inset: 32px;
background: var(--fg);
border-radius: 0;
--cell-rest: scale(0.4);
--cell-peak: scale(1.2);
--cell-op: 0.28;
}
/* variant 3: outlined accent square spins 180deg */
.hero__cells__cell--spin::before {
inset: 18px;
border: 1.5px solid var(--accent);
background: transparent;
--cell-rest: rotate(0deg);
--cell-peak: rotate(180deg);
--cell-op: 0.4;
}
/* variant 4: 3D Y-axis flip - outlined fg */
.hero__cells__cell--flipy::before {
inset: 14px;
border: 1.5px solid var(--fg);
background: transparent;
--cell-rest: rotateY(0deg);
--cell-peak: rotateY(360deg);
--cell-op: 0.32;
}
/* variant 5: 3D X-axis flip - solid accent */
.hero__cells__cell--flipx::before {
inset: 22px;
background: var(--accent);
--cell-rest: rotateX(0deg);
--cell-peak: rotateX(360deg);
--cell-op: 0.28;
}
/* respect reduced motion - drop the cell layer entirely */
@media (prefers-reduced-motion: reduce) {
.hero__cells { display: none; }
}
/* ---- HERO RIFT (easter egg) ----
A Half-Life-meets-cyberpunk reality tear triggered by clicking a
"suspicious" grid cell. Two pieces:
.hero__rift - full-hero overlay