/* Abhaya Libre / Fanwood Text are loaded once via in each page's own (faster than @import, which blocks on an extra round trip). ========================================================== */ /* ========================================================================== About page (about.html) Bio + contacts box on the left, cascading photo gallery on the right — same dynamic layout as .project-gallery on the project pages, in its own scrolling pane on desktop (same technique as .project-right). ======================================================= */ /* --- Base / scrollbar --- */ body.about { margin: 0; position: relative; } /* The bio text can make this page taller than the viewport, so it scrolls — but a visible scrollbar would eat into the fixed video's right-hand margin (its width isn't counted the same way for position:fixed elements), throwing off the right vs. bottom gap. Hidden here for pixel-accurate margins, not just aesthetics. */ html:has(body.about), body.about { scrollbar-width: none; -ms-overflow-style: none; } html:has(body.about)::-webkit-scrollbar, body.about::-webkit-scrollbar { display: none; } /* Same fade-to-white gradient technique (and same stops) used on home/work/project/calendar, so the header reads identically here too — fixed, full-bleed, edge to edge. */ .about-fade-top, .about-fade-bottom { position: fixed; left: 0; right: 0; z-index: 3; pointer-events: none; } .about-fade-top { top: 0; height: 20vh; background: linear-gradient( to bottom, rgba(253, 253, 253, 1) 0%, rgba(253, 253, 253, 0.987) 8.1%, rgba(253, 253, 253, 0.951) 15.5%, rgba(253, 253, 253, 0.896) 22.5%, rgba(253, 253, 253, 0.825) 29%, rgba(253, 253, 253, 0.741) 35.3%, rgba(253, 253, 253, 0.648) 41.2%, rgba(253, 253, 253, 0.55) 47.1%, rgba(253, 253, 253, 0.45) 52.9%, rgba(253, 253, 253, 0.352) 58.8%, rgba(253, 253, 253, 0.259) 64.7%, rgba(253, 253, 253, 0.175) 71%, rgba(253, 253, 253, 0.104) 77.5%, rgba(253, 253, 253, 0.049) 84.5%, rgba(253, 253, 253, 0.013) 91.9%, rgba(253, 253, 253, 0) 100% ); } .about-fade-bottom { bottom: 0; height: 20vh; background: linear-gradient( to top, rgba(253, 253, 253, 1) 0%, rgba(253, 253, 253, 0.987) 8.1%, rgba(253, 253, 253, 0.951) 15.5%, rgba(253, 253, 253, 0.896) 22.5%, rgba(253, 253, 253, 0.825) 29%, rgba(253, 253, 253, 0.741) 35.3%, rgba(253, 253, 253, 0.648) 41.2%, rgba(253, 253, 253, 0.55) 47.1%, rgba(253, 253, 253, 0.45) 52.9%, rgba(253, 253, 253, 0.352) 58.8%, rgba(253, 253, 253, 0.259) 64.7%, rgba(253, 253, 253, 0.175) 71%, rgba(253, 253, 253, 0.104) 77.5%, rgba(253, 253, 253, 0.049) 84.5%, rgba(253, 253, 253, 0.013) 91.9%, rgba(253, 253, 253, 0) 100% ); } /* --- Topbar (site title + nav), reused from home.css --- */ body.about .home-topbar { position: fixed; background: transparent; z-index: 5; } /* --- Bio + contacts box --- */ .about-main { margin: 96px 24px 24px; } /* Bio + Contacts share one box, back to back, separated only by a single divider line — same pattern as the credits/dates box on the project pages. */ .about-box { background: #fdfdfd; border: 0.5px solid #23241f; border-radius: 12px; overflow: hidden; } .about-box section { padding: 1rem; } .about-box section + section { border-top: 0.5px solid #23241f; } .about-box p { margin: 0 0 1em; line-height: 1.4; } .about-box p:last-child { margin-bottom: 0; } .about-box a { color: inherit; text-decoration: underline; } .about-box h2 { font-family: "Abhaya Libre", serif; font-weight: 400; font-size: 1.8rem; margin: 1.2em 0 0.6em; } .about-box h2 + p { margin-top: 0; } .about-box section > h2:first-child { margin-top: 0; } .about-contacts p { margin: 0; } .about-signature { text-align: center; } /* --- Photo gallery: same cascading/overlapping treatment as .project-gallery on the project pages (varied widths, negative margins pulling each photo up over the last) — same at every breakpoint, not just desktop. --- */ .about-gallery { position: relative; } .about-gallery img { display: block; position: relative; z-index: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); } .about-gallery img:nth-child(1) { width: 62%; } .about-gallery img:nth-child(2) { width: 46%; margin-top: -12%; margin-left: 42%; } .about-gallery img:nth-child(3) { width: 50%; margin-top: -10%; margin-left: 6%; } .about-gallery img:nth-child(4) { width: 48%; margin-top: -10%; margin-left: 46%; } /* --- Mobile / stacked layout (<=1100px): bio+contacts box first, photo gallery after. --- */ @media (max-width: 1100px) { .about-main { margin-top: 60px; } .about-layout { display: flex; flex-direction: column; gap: 24px; } .about-left { order: 1; } .about-right { order: 2; } /* Spacing between the box and gallery now comes from .about-layout's gap, matching the 24px side margin — this margin would otherwise add extra space above the gallery. */ .about-gallery { margin: 0; } } /* --- Desktop layout (>1100px) --- */ @media (min-width: 1101px) { .about-fade-top { height: 220px; } .about-fade-bottom { height: 140px; } .about-main { margin: 88px 40px 80px; } .about-left { width: 540px; position: relative; z-index: 2; } /* Same fixed-pane technique as .project-right: its own independently scrolling column, sized to the viewport, so the cascading gallery can run taller than the screen without pushing the page itself into a second scrollbar. Left edge starts clear of .about-left (40 margin + 540 box width + 40 gap) — unlike the old video, these are opaque photos, so the pane can't overlap under the box the way the video used to. */ .about-right { position: fixed; top: 88px; right: 40px; bottom: 40px; left: 620px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; z-index: 1; } .about-right::-webkit-scrollbar { display: none; } }