/*==================== SECTIONS — bands, chapter lines, entrances ==================== Home page only. Replaces the 3px black rules between sections (design: "B+C 3"). Bands Sections alternate paper / fog. Each band starts with a 24px ordered-dither ramp in the previous band's colour (75% -> 50% -> 25%, 2px cells), so the tone steps over instead of cutting. The ramp is an SVG mask filled with --ramp-from; the footer's own ramp picks up from the last band (--ft-from). Chapters "03 JOURNEY ········ of 06" above each heading; decorative (aria-hidden), the heading under it carries the name. Entrances Each time a part scrolls into view (from below or, scrolling up, from above); it resets once fully off screen. The head script in index.html adds .js-reveal to (only where IntersectionObserver exists, so without it nothing is hidden) and .is-in to each trigger once it is ~8% up the screen: the chapter line (with the heading and subtitle) and the content block. element role start length motion chapter label decoration 0ms 400ms fade in place leader decoration 60ms 800ms draws left -> right (ease-in-out) heading lead 100ms 700ms fade + 16px rise (ease-out) subtitle support 220ms 600ms fade + 10px rise "of 06" decoration 640ms 300ms lands as the leader reaches it content block support own trigger, 60ms + 700ms, fade + 28px rise, one entrance per container Static the bands and ramps; the cards, rows and Career Line stops inside a block (the block carries them; the stops keep their own reveal). Reduced everything fades in together, no movement, no delays. ==================================================================================== */ :root { --band-paper: var(--body-color); --band-fog: #ececec; --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1); } /* ---- bands ---- */ .main > .band { position: relative; border-top: 0; padding: 3.5rem 0 5rem; } .band--paper { background-color: var(--band-paper); --ramp-from: var(--band-fog); } .band--fog { background-color: var(--band-fog); --ramp-from: var(--band-paper); } .band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 24px; background-color: var(--ramp-from); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h4v2H0zM2 2h2v2H2zM0 4h4v2H0zM2 6h2v2H2zM0 8h2v2H0zM2 10h2v2H2zM0 12h2v2H0zM2 14h2v2H2zM0 16h2v2H0zM0 20h2v2H0z'/%3E%3C/svg%3E") 0 0 / 4px 24px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='24' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h4v2H0zM2 2h2v2H2zM0 4h4v2H0zM2 6h2v2H2zM0 8h2v2H0zM2 10h2v2H2zM0 12h2v2H0zM2 14h2v2H2zM0 16h2v2H0zM0 20h2v2H0z'/%3E%3C/svg%3E") 0 0 / 4px 24px repeat-x; pointer-events: none; } /* grey subtitles keep 4.5:1 on fog */ .band--fog .section__subtitle, .main .band--fog .section__subtitle.sk-sub { color: #666666; } /* the footer ramp continues from the last band */ .band + .modern-footer { margin-top: 0; } .band--fog + .modern-footer { --ft-from: var(--band-fog); } /* Skills terminal: dithered lift instead of the solid offset shadow (as on the canvas) */ .band .sk-wrap { position: relative; isolation: isolate; } .band .sk-wrap::before { content: ""; position: absolute; z-index: -1; top: 8px; bottom: -8px; left: calc(1rem + 8px); right: calc(1rem - 8px); background-image: repeating-conic-gradient(var(--first-color-dark) 0 25%, transparent 0 50%); background-size: 4px 4px; pointer-events: none; } .band .sk-term { box-shadow: none; } /* ---- chapter lines ---- */ .chapter { display: flex; align-items: center; gap: 1rem; max-width: 1000px; margin: 0 auto 2.5rem; padding: 0 1.5rem; font-family: var(--mono-font); } .chapter .chapter__num { flex: none; font-weight: 700; font-size: 2.15rem; line-height: 1; letter-spacing: -.04em; font-style: normal; color: var(--first-color-dark); } .chapter .chapter__name { flex: none; font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; font-style: normal; color: var(--first-color-dark); } .chapter .chapter__lead { flex: 1; min-width: 1.5rem; height: 2px; background-image: repeating-conic-gradient(#b5b5b5 0 25%, transparent 0 50%); background-size: 4px 4px; } .chapter .chapter__of { flex: none; font-size: .8rem; font-style: normal; color: #6b6b6b; } @media screen and (max-width: 767px) { .main > .band { padding: 2.75rem 0 3.5rem; } .chapter { gap: .75rem; margin-bottom: 1.75rem; padding: 0 1.25rem; } .chapter .chapter__num { font-size: 1.7rem; } .chapter .chapter__name, .chapter .chapter__of { font-size: .72rem; } } /* ---- entrances (only when .js-reveal is on ) ---- Two triggers per section, each fired when IT is on screen (index.html head script): the chapter line (it carries the heading and subtitle after it), and the content block on its own, so a block far below its heading never plays out of sight. */ .js-reveal .band .chapter__num, .js-reveal .band .chapter__name { opacity: 0; transition: opacity 400ms var(--ease-out); } .js-reveal .band .chapter__lead { clip-path: inset(0 100% 0 0); transition: clip-path 800ms var(--ease-in-out) 60ms; } .js-reveal .band .chapter__of { opacity: 0; transition: opacity 300ms var(--ease-out) 640ms; } .js-reveal .band .chapter ~ .section__title { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out) 100ms, transform 700ms var(--ease-out) 100ms; } .js-reveal .band .chapter ~ .section__subtitle { opacity: 0; transform: translateY(10px); transition: opacity 600ms var(--ease-out) 220ms, transform 600ms var(--ease-out) 220ms; } /* one entrance per container; what is inside rides along */ .js-reveal .band :is(.sk-wrap, .pr, .modern-grid) { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-out) 60ms, transform 700ms var(--ease-out) 60ms; } /* the terminal's own load-time entrance would be a second layer */ .js-reveal .band .sk-term { animation: none; } /* coming back while scrolling up: the same moves, from above (before the .is-in rules, which share their specificity and must win) */ .js-reveal .band .chapter.from-above ~ .section__title { transform: translateY(-16px); } .js-reveal .band .chapter.from-above ~ .section__subtitle { transform: translateY(-10px); } .js-reveal .band :is(.sk-wrap, .pr, .modern-grid).from-above { transform: translateY(-28px); } .js-reveal .band .chapter.is-in :is(.chapter__num, .chapter__name, .chapter__of) { opacity: 1; } .js-reveal .band .chapter.is-in .chapter__lead { clip-path: inset(0 0 0 0); } .js-reveal .band .chapter.is-in ~ :is(.section__title, .section__subtitle) { opacity: 1; transform: none; } .js-reveal .band :is(.sk-wrap, .pr, .modern-grid).is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .band :is(.chapter__num, .chapter__name, .chapter__of, .sk-wrap, .pr, .modern-grid), .js-reveal .band .chapter ~ :is(.section__title, .section__subtitle) { transform: none !important; /* beats the from-above offsets too */ transition: opacity 200ms ease; } .js-reveal .band .chapter__lead { clip-path: none; opacity: 0; transition: opacity 200ms ease; } .js-reveal .band .chapter.is-in .chapter__lead { opacity: 1; } } @media print { .js-reveal .band * { opacity: 1 !important; transform: none !important; clip-path: none !important; } }