/* =========================================================== rust.quest — A study in oxidation Five-stage vertical timeline; progressive corrosion of UI =========================================================== */ :root { /* Oxidation Spectrum — exact hex values from DESIGN.md */ --gunmetal: #2C2C34; --deep-loam: #1A1208; --oxide-orange: #D4740E; --patina-copper: #B87333; --aged-amber: #C68E3C; --weathered-cream: #E8DFD0; --steel-silver: #C0C0C8; --dried-blood: #6B2D2D; --terracotta: #A0522D; /* Atmosphere variables — shifted by stage class on */ --atmos-bg: var(--gunmetal); --atmos-text: var(--weathered-cream); --atmos-heading: var(--steel-silver); --atmos-accent: var(--oxide-orange); --atmos-meta: var(--patina-copper); --atmos-rule: rgba(192, 192, 200, 0.25); --atmos-formula: rgba(184, 115, 51, 0.4); /* Type scale */ --type-display: 'Bebas Neue', 'Impact', sans-serif; --type-serif: 'Source Serif 4', 'Lora', Georgia, serif; --type-mono: 'JetBrains Mono', 'Space Mono', 'Courier New', monospace; /* Layout */ --gutter: 20%; --gutter-tight: 10%; } /* ---------- Reset / base ---------- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--atmos-bg); color: var(--atmos-text); font-family: var(--type-serif); font-weight: 400; font-size: 19px; line-height: 1.7; overflow-x: hidden; transition: background-color 1.2s ease-in-out, color 1.2s ease-in-out; } p { margin: 0 0 1.4em; } /* Stage-driven atmosphere shifts on */ body.stage-1 { --atmos-bg: #2C2C34; --atmos-text: #E8DFD0; --atmos-heading: #C0C0C8; --atmos-accent: #C0C0C8; --atmos-meta: rgba(184, 115, 51, 0.7); --atmos-rule: rgba(192, 192, 200, 0.3); --atmos-formula: rgba(192, 192, 200, 0.35); } body.stage-2 { --atmos-bg: #2C2C34; --atmos-text: #E8DFD0; --atmos-heading: #B87333; --atmos-accent: #C68E3C; --atmos-meta: rgba(184, 115, 51, 0.75); --atmos-rule: rgba(184, 115, 51, 0.32); --atmos-formula: rgba(184, 115, 51, 0.45); } body.stage-3 { --atmos-bg: #A0522D; --atmos-text: #E8DFD0; --atmos-heading: #1A1208; --atmos-accent: #D4740E; --atmos-meta: rgba(232, 223, 208, 0.8); --atmos-rule: rgba(232, 223, 208, 0.32); --atmos-formula: rgba(26, 18, 8, 0.55); } body.stage-4 { --atmos-bg: #6B2D2D; --atmos-text: #E8DFD0; --atmos-heading: #D4740E; --atmos-accent: #C68E3C; --atmos-meta: rgba(232, 223, 208, 0.7); --atmos-rule: rgba(212, 116, 14, 0.3); --atmos-formula: rgba(184, 115, 51, 0.55); } body.stage-5 { --atmos-bg: #1A1208; --atmos-text: #C68E3C; --atmos-heading: #D4740E; --atmos-accent: #C68E3C; --atmos-meta: rgba(184, 115, 51, 0.75); --atmos-rule: rgba(198, 142, 60, 0.28); --atmos-formula: rgba(198, 142, 60, 0.5); } /* ---------- SVG defs (kept off-flow) ---------- */ .svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; } /* ---------- Brand mark ---------- */ .brandmark { position: fixed; top: 28px; left: 36px; z-index: 50; display: flex; flex-direction: column; gap: 2px; pointer-events: none; mix-blend-mode: normal; } .brand-name { font-family: var(--type-display); font-size: 22px; letter-spacing: 0.18em; color: var(--atmos-heading); text-transform: uppercase; transition: color 1.2s ease-in-out; } .brand-dot { color: var(--atmos-accent); margin: 0 1px; transition: color 1.2s ease-in-out; } .brand-sub { font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.22em; color: var(--atmos-meta); text-transform: uppercase; transition: color 1.2s ease-in-out; } /* ---------- Progress rail (right side) ---------- */ .progress-rail { position: fixed; top: 50%; right: 28px; transform: translateY(-50%); z-index: 50; display: flex; align-items: center; pointer-events: none; } .rail-track { position: absolute; right: 5px; top: 4px; bottom: 4px; width: 1px; background: linear-gradient( to bottom, rgba(192, 192, 200, 0.28), rgba(184, 115, 51, 0.5), rgba(212, 116, 14, 0.6), rgba(107, 45, 45, 0.5), rgba(198, 142, 60, 0.4) ); } .rail-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 38px; align-items: flex-end; } .rail-mark { display: flex; align-items: center; gap: 12px; font-family: var(--type-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--atmos-meta); text-transform: uppercase; opacity: 0.55; transition: opacity 0.6s ease-in-out, color 1.2s ease-in-out; } .rail-label { transform: translateX(-2px); } .rail-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; border: 1px solid var(--atmos-meta); transition: all 0.6s ease-in-out; box-shadow: 0 0 0 0 rgba(212, 116, 14, 0); } .rail-mark.is-active { opacity: 1; } .rail-mark.is-active .rail-dot { background: var(--atmos-accent); border-color: var(--atmos-accent); box-shadow: 0 0 14px 2px rgba(212, 116, 14, 0.55); } /* ---------- Timeline / stages ---------- */ .oxidation-timeline { width: 100%; } .stage { position: relative; min-height: 100vh; padding: 12vh var(--gutter) 12vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; isolation: isolate; transition: background-color 1.2s ease-in-out; } /* Per-stage local backgrounds (the section keeps its own color even while the global atmosphere also shifts) */ .stage.stage-1 { background: linear-gradient(118deg, rgba(255,255,255,0.025) 0%, rgba(0,0,0,0) 35%, rgba(255,255,255,0.02) 70%, rgba(0,0,0,0.18) 100%), linear-gradient(180deg, #32323b 0%, #2C2C34 50%, #25252c 100%); } .stage.stage-2 { background: radial-gradient(ellipse 380px 280px at 18% 30%, rgba(184, 115, 51, 0.18), rgba(184, 115, 51, 0) 60%), radial-gradient(ellipse 460px 320px at 78% 68%, rgba(184, 115, 51, 0.14), rgba(184, 115, 51, 0) 55%), radial-gradient(ellipse 280px 220px at 62% 18%, rgba(160, 82, 45, 0.13), rgba(160, 82, 45, 0) 60%), linear-gradient(180deg, #2C2C34 0%, #2a2530 60%, #2c2730 100%); } .stage.stage-3 { background: radial-gradient(ellipse 600px 420px at 80% 20%, rgba(212, 116, 14, 0.18), rgba(212, 116, 14, 0) 65%), radial-gradient(ellipse 520px 380px at 12% 78%, rgba(107, 45, 45, 0.32), rgba(107, 45, 45, 0) 65%), linear-gradient(180deg, #a85a32 0%, #A0522D 50%, #8a4524 100%); } .stage.stage-4 { background: radial-gradient(ellipse 720px 480px at 22% 30%, rgba(212, 116, 14, 0.22), rgba(212, 116, 14, 0) 60%), radial-gradient(ellipse 540px 420px at 80% 78%, rgba(160, 82, 45, 0.32), rgba(160, 82, 45, 0) 60%), linear-gradient(180deg, #6B2D2D 0%, #5a2626 55%, #401a1a 100%); } .stage.stage-5 { background: radial-gradient(ellipse 800px 540px at 50% 35%, rgba(198, 142, 60, 0.18), rgba(198, 142, 60, 0) 65%), radial-gradient(ellipse 520px 380px at 82% 82%, rgba(160, 82, 45, 0.22), rgba(160, 82, 45, 0) 60%), linear-gradient(180deg, #1A1208 0%, #15100a 55%, #0e0a05 100%); } /* ---------- Stage noise overlays (uses SVG filter via background) ---------- */ .stage-noise { position: absolute; inset: 0; z-index: 0; pointer-events: none; mix-blend-mode: overlay; opacity: 0; transition: opacity 1.4s ease-in-out; } .stage-noise[data-noise="soft"] { background-image: url("data:image/svg+xml;utf8,"); background-size: 320px 320px; } .stage-noise[data-noise="rough"] { background-image: url("data:image/svg+xml;utf8,"); background-size: 340px 340px; } .stage-noise[data-noise="dense"] { background-image: url("data:image/svg+xml;utf8,"); background-size: 360px 360px; } /* Progressive opacity per stage */ .stage-1 .stage-noise[data-noise="soft"] { opacity: 0.05; } .stage-2 .stage-noise[data-noise="soft"] { opacity: 0.08; } .stage-3 .stage-noise[data-noise="rough"] { opacity: 0.12; mix-blend-mode: multiply; } .stage-4 .stage-noise[data-noise="rough"] { opacity: 0.16; mix-blend-mode: multiply; } .stage-4 .stage-noise[data-noise="dense"] { opacity: 0.10; mix-blend-mode: overlay; } .stage-5 .stage-noise[data-noise="dense"] { opacity: 0.22; mix-blend-mode: multiply; } .stage-5 .stage-noise[data-noise="rough"] { opacity: 0.14; mix-blend-mode: overlay; } /* ---------- Hairline fracture lines (Stage 1) ---------- */ .fracture-lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0.85; } /* ---------- Floating chemical formulae ---------- */ .formula { position: absolute; font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--atmos-formula); transform: rotate(90deg); transform-origin: left top; white-space: nowrap; z-index: 2; pointer-events: none; text-transform: uppercase; transition: color 1.2s ease-in-out; } .formula-tl { top: 14%; left: 5%; } .formula-tr { top: 14%; right: 5%; transform: rotate(-90deg); transform-origin: right top; } .formula-bl { bottom: 14%; left: 5%; } .formula-br { bottom: 14%; right: 5%; transform: rotate(-90deg); transform-origin: right bottom; } /* ---------- Stage-2 amber spots ---------- */ .amber-spots { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .spot { position: absolute; border-radius: 50%; filter: blur(2px); opacity: 0.85; } .spot-a { top: 22%; left: 18%; width: 220px; height: 220px; background: radial-gradient(circle, rgba(184, 115, 51, 0.32), rgba(184, 115, 51, 0) 65%); } .spot-b { top: 64%; left: 70%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(160, 82, 45, 0.28), rgba(160, 82, 45, 0) 65%); } .spot-c { top: 14%; left: 62%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(212, 116, 14, 0.22), rgba(212, 116, 14, 0) 60%); } /* ---------- Bloom field (Stage 3+) ---------- */ .bloom-field { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .bloom { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); transform: translate(-50%, -50%) scale(0); transform-origin: center center; opacity: 0; transition: transform 1.6s cubic-bezier(0.2, 0.8, 0.3, 1.0), opacity 1.6s ease-out; } .bloom.is-bloomed { transform: translate(-50%, -50%) scale(1); opacity: 1; } /* ---------- Stage inner content column ---------- */ .stage-inner { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; width: 100%; } .stage-inner-final { text-align: center; } .stage-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; font-family: var(--type-mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--atmos-meta); transition: color 1.2s ease-in-out; } .stage-inner-final .stage-meta { justify-content: center; } .meta-rule { flex: 1; height: 1px; background: var(--atmos-rule); max-width: 240px; transition: background-color 1.2s ease-in-out; } .meta-tag { color: var(--atmos-accent); transition: color 1.2s ease-in-out; } .stage-title { font-family: var(--type-display); font-weight: 400; font-size: clamp(96px, 14vw, 168px); line-height: 0.92; letter-spacing: 0.02em; margin: 0 0 24px; color: var(--atmos-heading); text-transform: uppercase; transition: color 1.2s ease-in-out, text-shadow 1.2s ease-in-out; } /* Stage-specific heading colors (independent of body atmosphere) */ .stage-1 .stage-title { color: #C0C0C8; } .stage-2 .stage-title { color: #B87333; text-shadow: 0 0 0.5px rgba(212, 116, 14, 0.45), 0 1px 0 rgba(0,0,0,0.25); } .stage-3 .stage-title { color: #1A1208; text-shadow: 0 0 1px rgba(212, 116, 14, 0.4), 1px 1px 0 rgba(0,0,0,0.15); } .stage-4 .stage-title { color: #D4740E; text-shadow: 0 0 1.5px rgba(198, 142, 60, 0.5), 1px 1px 0 rgba(0,0,0,0.3); } .stage-5 .stage-title { color: #D4740E; text-shadow: 0 0 6px rgba(212, 116, 14, 0.18), 0 1px 0 rgba(0,0,0,0.4); } .stage-kicker { font-family: var(--type-serif); font-style: italic; font-size: 22px; line-height: 1.55; margin: 0 0 36px; color: var(--weathered-cream); max-width: 620px; opacity: 0.92; } .stage-inner-final .stage-kicker { margin-left: auto; margin-right: auto; color: var(--aged-amber); } .stage-body { font-size: 19px; line-height: 1.75; color: var(--weathered-cream); } .stage-body p { margin: 0 0 1.4em; } .stage-3 .stage-body, .stage-4 .stage-body { color: #F0E7D6; } .stage-5 .stage-body { color: #C68E3C; font-size: 22px; line-height: 1.8; } .stage-body-sparse { text-align: center; margin-top: 24px; font-style: italic; } /* Pull quotes (break into the margin) */ .pull-quote { position: relative; margin: 36px -10% 36px -10%; padding: 28px 32px 28px 56px; font-family: var(--type-serif); font-style: italic; font-size: 24px; line-height: 1.5; color: var(--aged-amber); border-left: 2px solid var(--atmos-accent); background: linear-gradient(95deg, rgba(212, 116, 14, 0.06), rgba(212, 116, 14, 0) 80%); } .pull-quote p { margin: 0 0 12px; } .pull-quote cite { display: block; font-style: normal; font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--patina-copper); margin-top: 14px; } .pull-quote .quote-mark { position: absolute; top: 4px; left: 14px; font-family: var(--type-display); font-size: 64px; line-height: 1; color: var(--oxide-orange); opacity: 0.7; } .pull-quote-deep { color: var(--weathered-cream); background: linear-gradient(95deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0) 75%); border-left-color: var(--aged-amber); } .pull-quote-deep .quote-mark { color: var(--aged-amber); } /* Ragged blocks (Stage 3 + 4 — wabi-sabi clip-path borders) */ .ragged-block { padding: 22px 28px; margin: 0 0 22px; background: rgba(26, 18, 8, 0.18); border-left: 1px solid rgba(232, 223, 208, 0.18); clip-path: polygon( 0 4px, 6% 0, 18% 3px, 32% 0, 51% 4px, 70% 1px, 88% 0, 100% 3px, 100% calc(100% - 5px), 92% 100%, 76% calc(100% - 4px), 58% 100%, 42% calc(100% - 3px), 24% 100%, 8% calc(100% - 4px), 0 100% ); } .ragged-block p { margin: 0; } .ragged-block-alt { background: rgba(212, 116, 14, 0.08); margin-left: 6%; border-left-color: rgba(212, 116, 14, 0.35); clip-path: polygon( 0 0, 12% 4px, 28% 0, 46% 5px, 64% 0, 82% 3px, 100% 0, 100% calc(100% - 4px), 86% 100%, 68% calc(100% - 3px), 48% 100%, 30% calc(100% - 5px), 14% 100%, 0 calc(100% - 3px) ); } /* ---------- Stage-1 specific decorative ---------- */ .stage-foot { margin-top: 48px; display: flex; align-items: center; gap: 12px; font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--steel-silver); opacity: 0.7; } .foot-arrow { display: inline-block; animation: drift 2.4s ease-in-out infinite; font-size: 14px; } @keyframes drift { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(6px); opacity: 1; } } /* ---------- Colophon (Stage 5 footer) ---------- */ .colophon { margin-top: 80px; display: flex; flex-direction: column; align-items: center; gap: 12px; font-family: var(--type-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--patina-copper); opacity: 0.85; } .colophon-mark { font-family: var(--type-display); font-size: 18px; letter-spacing: 0.32em; color: var(--oxide-orange); } .colophon-formula { font-size: 13px; color: var(--aged-amber); letter-spacing: 0.22em; } /* ---------- Section reveal on scroll ---------- */ .stage .stage-inner > * { opacity: 0; transform: translateY(18px); transition: opacity 1.0s ease-out, transform 1.0s ease-out; } .stage.is-revealed .stage-inner > * { opacity: 1; transform: translateY(0); } .stage.is-revealed .stage-inner > *:nth-child(1) { transition-delay: 0.05s; } .stage.is-revealed .stage-inner > *:nth-child(2) { transition-delay: 0.18s; } .stage.is-revealed .stage-inner > *:nth-child(3) { transition-delay: 0.32s; } .stage.is-revealed .stage-inner > *:nth-child(4) { transition-delay: 0.46s; } .stage.is-revealed .stage-inner > *:nth-child(5) { transition-delay: 0.6s; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .stage { padding-left: var(--gutter-tight); padding-right: var(--gutter-tight); } .pull-quote { margin-left: -4%; margin-right: -4%; } .progress-rail { right: 14px; } .rail-label { display: none; } } @media (max-width: 720px) { body { font-size: 17px; } .stage { padding: 14vh 8% 14vh; min-height: 100vh; } .stage-title { font-size: clamp(72px, 18vw, 110px); } .stage-kicker { font-size: 18px; } .stage-body { font-size: 17px; } .pull-quote { margin: 28px 0; padding: 22px 22px 22px 44px; font-size: 19px; } .pull-quote .quote-mark { font-size: 48px; left: 8px; } .brandmark { top: 18px; left: 18px; } .brand-name { font-size: 18px; } .brand-sub { display: none; } .progress-rail { display: none; } .formula { font-size: 9px; } .formula-tl, .formula-tr { top: 8%; } .formula-bl, .formula-br { bottom: 8%; } .ragged-block-alt { margin-left: 0; } }