/* THEME TOKENS */ /*global scope*/ :root { /*WHOLE PAGE*/ --page-bg: #f7f6f3; /*background color for the whole page.*/ --text: #0f172a; /*default text color.*/ --glow-blue: rgba(139, 221, 228, 0.37); --glow-warm: rgba(245, 179, 112, 0.397); --glow-green: rgba(114, 240, 189, 0.192); --glow-purple: rgba(179, 70, 223, 0.103); --glow-tech-gold: rgba(179, 163, 105, 0); --glow-red: rgba(255, 255, 255, 0); --glow-purple-2: rgba(255, 255, 255, 0); --glow-blue-2: rgba(255, 255, 255, 0); --glow-base-top: rgba(255,255,255,.92); --glow-base-bot: rgba(255,255,255,.55); --grid-line: rgba(228, 228, 228, 0.411); --grid-size: 60px; /* Section 1 */ --g1-x: 80px; --g1-y: 120px; --g1-size-x: 950px; --g1-size-y: 680px; --g1-color: var(--glow-blue); --g2-x: 1800px; --g2-y: 120px; --g2-size-x: 1200px; --g2-size-y: 650px; --g2-color: var(--glow-warm); --g3-x: 1000px; --g3-y: 800px; --g3-size-x: 900px; --g3-size-y: 650px; --g3-color: var(--glow-green); /* Section 2 */ --g4-x: 930px; --g4-y: 1810px; --g4-size-x: 1200px; --g4-size-y: 650px; --g4-color: var(--glow-purple); /* Section 3 */ --g5-x: 1250px; --g5-y: 2540px; --g5-size-x: 500px; --g5-size-y: 250px; --g5-color: var(--glow-tech-gold); --g6-x: 1250px; --g6-y: 3140px; --g6-size-x: 500px; --g6-size-y: 350px; --g6-color: var(--glow-red); --g7-x: 1250px; --g7-y: 3475px; --g7-size-x: 400px; --g7-size-y: 250px; --g7-color: var(--glow-purple-2); --g8-x: 600px; --g8-y: 2800px; --g8-size-x: 400px; --g8-size-y: 250px; --g8-color: var(--glow-blue-2); } html[data-theme="dark"] { /*WHOLE PAGE*/ --page-bg: rgb(18, 28, 33); /* rgb(18,28,33) */ --text: #f6f2ea; /* close to his rgb(246,242,234) */ --glow-blue: rgba(139, 221, 228, 0.205); /* */ --glow-warm: rgba(245, 179, 112, 0.205); --glow-green: rgba(2, 94, 57, 0.205); --glow-purple: rgba(225, 137, 235, 0.11); --glow-tech-gold: rgba(179, 163, 105, 0.151); --glow-red: rgba(172, 0, 0, 0.233); --glow-purple-2: rgba(226, 170, 217, 0.199); --glow-blue-2: rgba(100, 98, 218, 0.288); --glow-base-top: rgba(255,255,255,.06); --glow-base-bot: rgba(255,255,255,.02); --grid-line: rgba(255, 255, 255, 0.034); } * { box-sizing: border-box; scroll-behavior: smooth; } html, body { min-height: 100%;} body { height: auto; /* key: allow body to grow with content */ min-height: 100vh; /* at least a viewport */ position: relative; /* anchor for body::before absolute */ margin: 0; background-color: var(--page-bg); color: var(--text); } /* GLOBAL BACKGROUND (glows + base wash) - fixed => stays perfectly continuous across all sections (no seams) - if you want it to scroll with the page instead, tell me and I’ll flip it */ body::before { content: ""; position: absolute; /* was: fixed */ inset: 0; height: 100%; z-index: -2; pointer-events: none; background: /* Section 1 */ radial-gradient(var(--g1-size-x) var(--g1-size-y) at var(--g1-x) var(--g1-y), var(--g1-color), transparent 62%), radial-gradient(var(--g2-size-x) var(--g2-size-y) at var(--g2-x) var(--g2-y), var(--g2-color), transparent 62%), radial-gradient(var(--g3-size-x) var(--g3-size-y) at var(--g3-x) var(--g3-y), var(--g3-color), transparent 65%), /* Section 2 */ radial-gradient(var(--g4-size-x) var(--g4-size-y) at var(--g4-x) var(--g4-y), var(--g4-color), transparent 90%), /* Section 3 */ radial-gradient(var(--g5-size-x) var(--g5-size-y) at var(--g5-x) var(--g5-y), var(--g5-color), transparent 50%), radial-gradient(var(--g6-size-x) var(--g6-size-y) at var(--g6-x) var(--g6-y), var(--g6-color), transparent 50%), radial-gradient(var(--g7-size-x) var(--g7-size-y) at var(--g7-x) var(--g7-y), var(--g7-color), transparent 50%), radial-gradient(var(--g8-size-x) var(--g8-size-y) at var(--g8-x) var(--g8-y), var(--g8-color), transparent 50%), linear-gradient(180deg, var(--glow-base-top), var(--glow-base-bot)); } /* GLOBAL GRID */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, var(--grid-line) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); } /* ---------- SECTION SYSTEM ---------- */ .section { min-height: 100vh; width: 100%; /* critical: don’t paint over the global background */ background: transparent; /* optional: makes building easy */ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 64px 24px; } .section-3, .section-4{ position: relative; /* <-- makes .timeline absolute relative to section 3 */ justify-content: flex-start; /* optional: don’t center the line vertically */ overflow: visible; } .section-4 { margin-bottom: 10px; } /* optional: snap scrolling like “pages” */ body.snap { scroll-snap-type: y mandatory; } body.snap > .section { scroll-snap-align: start; } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* apply to any element you want */ .reveal { opacity: 0; /* start hidden */ animation: riseIn 700ms ease forwards; } .reveal.d1 { animation-delay: 80ms; } .reveal.d2 { animation-delay: 160ms; } .reveal.d3 { animation-delay: 240ms; } .reveal.d4 { animation-delay: 290ms; } @media (max-width: 900px) { :root{ /* Section 1 */ --g1-x: 50%; --g1-y: 120px; --g1-size-x: 950px; --g1-size-y: 680px; --g1-color: var(--glow-blue); --g2-x: 50%; --g2-y: 350px; --g2-size-x: 800px; --g2-size-y: 600px; --g2-color: var(--glow-warm); --g3-x: 50%; --g3-y: 940px; --g3-size-x: 900px; --g3-size-y: 500px; --g3-color: var(--glow-green); /* Section 2 */ --g4-x: 50%; --g4-y: 2000px; --g4-size-x: 900px; --g4-size-y: 500px; --g4-color: rgba(255, 255, 255, 0); /* Section 3 */ --g5-x: 55%; --g5-y: 2900px; --g5-size-x: 350px; --g5-size-y: 250px; --g5-color: rgba(255, 255, 255, 0); --g6-x: 1250px; --g6-y: 3100px; --g6-size-x: 500px; --g6-size-y: 350px; --g6-color: rgba(255, 255, 255, 0); --g7-x: 1250px; --g7-y: 3420px; --g7-size-x: 400px; --g7-size-y: 250px; --g7-color: rgba(255, 255, 255, 0); } }