/* ============================================ 1. RESET & BASE ============================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } html { /* This one line is what makes clicking a nav link glide to the section instead of jumping instantly. */ scroll-behavior: smooth; /* Without this, phones in system dark mode render the page's unstyled canvas (the overscroll/bounce area beyond the body, and anything before the stylesheet paints) black instead of this site's light design — color-scheme tells the browser this page is light-only, so it stops following the OS setting there. The tag in each page's does the same thing before the CSS has even loaded. */ color-scheme: light; background-color: #faf9f6; } body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #1a1a1a; background-color: #faf9f6; /* Delicate dot-grain texture: a single 1px dot per tile, repeated every 22px, at low opacity — reads as a subtle paper texture rather than a visible pattern. Pure CSS (no image file), so it stays crisp at any zoom/density and tiles seamlessly down the page. */ background-image: radial-gradient(circle at 1px 1px, rgba(26, 26, 26, 0.06) 1px, transparent 0); background-size: 22px 22px; line-height: 1.6; } /* ============================================ 2. COLOR & TYPE TOKENS Change these once, and the whole site updates. ============================================ */ :root { --ink: #1a1a1a; --ink-hover: #4e4e4e; --paper: #faf9f6; --index: #eeece6; --accent: #2455e6; /* deep pine green — swap for your brand color */ --muted: #6b6b66; --button: rgba(250, 249, 246, 0.3); --button-hover: rgba(250, 249, 246, 0.5); --link: #2455e6; --link-hover: #143bae; --display-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --carousel-bg-plots:#363636; --carousel-bg-white:#FFFFFF; --carousel-bg-grey:#E6E6E6; --image-radius: 4px; /* project cards, hero/figure/carousel images, lightbox */ } /* ============================================ 3. HEADER + INDEX NAV ============================================ */ /* Hides text visually but keeps it for screen readers + SEO. Used on the H1/H2 that the logo image now visually replaces. */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .site-header { position: sticky; top: 0; /* Above the About page's hovered badges and tooltips (z-index 30-40 in their own blocks), so they slide behind the header, not over it. Still below the lightbox and toast (100). */ z-index: 50; background-color: rgba(250, 249, 246, 0.75); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); padding: 1.25rem 1.5rem; box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.06); /* .scrolled is toggled by script.js once you're past the very top — shrinks the header (and the logo, below) so it takes up less room while you're reading, then relaxes back to full size at the top. */ transition: padding 0.25s ease; } .site-header.scrolled { padding: 0.4rem 1.5rem; } @media (prefers-reduced-motion: reduce) { .site-header { transition: none; } } /* Frosted glass needs a solid fallback for reduced-transparency and for browsers without backdrop-filter support, so content underneath never reads illegibly through the header. */ @supports not (backdrop-filter: blur(1px)) { .site-header { background-color: var(--paper); } } @media (prefers-reduced-transparency: reduce) { .site-header { background-color: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid #e4e2db; } } .header-row { position: relative; display: flex; align-items: center; min-height: 40px; } .index-nav { display: flex; align-items: center; margin-left: auto; } .nav-links { list-style: none; display: flex; align-items: center; gap: 3rem; flex-wrap: wrap; margin-right: 3rem; } .index-nav a { position: relative; display: inline-block; color: var(--ink); text-decoration: none; font-weight: 400; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; padding-bottom: 2px; transition: color 0.2s ease; } /* Hovering (or keyboard-focusing) any top-menu link turns it the dark link blue, on top of the underline sweep. */ .index-nav a:hover, .index-nav a:focus-visible { color: var(--link-hover); } /* The top-menu link for the page you're already on: a little bolder (600 renders as bold in fonts without a semi-bold, so it reads on any device). Clicking it scrolls back to the top — see script.js. Hover color is shared by every top-menu link, see .index-nav a:hover. */ .index-nav a[aria-current="page"] { font-weight: 500; } .highlight-link{ color: var(--accent) !important; } /* The accent color above is !important, so the hover color has to be too (and more specific) or it never shows. Every highlight link — "About me →", "← Projects", "Next project: …", "Next case study: …" — turns the same dark link blue as the top-menu links on hover/focus, with the underline sweep in that blue as well. */ .highlight-link { transition: color 0.2s ease; } .highlight-link:hover, .highlight-link:focus-visible { color: var(--link-hover) !important; } .highlight-link .underline-hover-overlay { color: var(--link-hover); } /* Logo stays perfectly centered regardless of how wide the nav is. Stays position: absolute at every width (rather than switching to static on mobile) specifically so left/transform can transition smoothly as the viewport crosses the 900px breakpoint — animating between two different position values isn't possible, but animating left/transform within the same positioning scheme is. */ .logo-link { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: left 0.3s ease, transform 0.3s ease; } @media (prefers-reduced-motion: reduce) { .logo-link { transition: none; } } .site-logo { width: clamp(130px, 40vw, 190px); height: auto; display: block; transition: width 0.25s ease; } .site-header.scrolled .site-logo { width: clamp(95px, 30vw, 135px); } @media (prefers-reduced-motion: reduce) { .site-logo { transition: none; } } /* Hamburger button: hidden on desktop, shown only on mobile (see media query) */ .menu-toggle { display: none; background: none; border: none; padding: 0.25rem; cursor: pointer; color: var(--ink); position: relative; z-index: 11; transition: transform 0.1s ease-out; } .menu-toggle:active { transform: scale(0.88); } .menu-toggle .material-symbols-outlined { font-size: 28px; display: block; } .menu-toggle .menu-icon-close { display: none; } .menu-toggle[aria-expanded="true"] .menu-icon-open { display: none; } .menu-toggle[aria-expanded="true"] .menu-icon-close { display: block; } /* Mobile: no hamburger/dropdown — Projects and About stay visible inline, same as desktop. Logo moves to the left (out of its desktop centered position) and the nav links sit on the right. */ @media (max-width: 1300px) { .menu-toggle { display: none; } .logo-link { left: 1rem; transform: translateY(-50%); } .nav-links { gap: 2rem; margin-right: 1rem; } } @media (max-width: 520px) { .logo-link { left: 0rem; } .nav-links { margin-right: 0rem; } } /* Very narrow screens (under 320px): there's no room for Projects and About inline next to the logo, so they collapse into the hamburger. script.js toggles .open on .nav-links. The dropdown is a full-width glass panel hanging off the header's bottom edge (1.25rem is the header's bottom padding, 0.4rem once it has shrunk on scroll; the -1.5rem left/right cancel the header's side padding so it spans the whole screen). It's hidden with visibility as well as opacity so its links aren't tabbable while closed. A backdrop-filter element only blurs what's behind it *up to* the nearest ancestor that itself has a backdrop-filter — so with the glass on .site-header, the dropdown inside it would blur nothing but the header. To let it blur the page, the header's own glass moves onto a ::before layer here (which isn't an ancestor of the dropdown). */ @media (max-width: 319.98px) { .site-header { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: rgba(250, 249, 246, 0.75); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); } .menu-toggle { display: block; } .nav-links { position: absolute; top: calc(100% + 1.25rem); left: -1.5rem; right: -1.5rem; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0.5rem 0; background-color: rgba(250, 249, 246, 0.75); backdrop-filter: blur(12px) saturate(180%); -webkit-backdrop-filter: blur(12px) saturate(180%); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.06); /* Closed state, and the closing transition: the links fade first (see .nav-links a), then the panel retracts up into the header with a short delay. Revealed/retracted with clip-path rather than just fading, so it reads as unrolling from the header. */ opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); transform: translateY(-8px); transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.06s, opacity 0.4s ease 0.12s, transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.06s, visibility 0s linear 0.56s; } .site-header.scrolled .nav-links { top: calc(100% + 0.4rem); } /* Opening: a longer, softer ease-out. Same curve family as the site's scroll reveals (0.2, 0.8, 0.2, 1). */ .nav-links.open { opacity: 1; visibility: visible; clip-path: inset(0 0 0 0); transform: translateY(0); transition: clip-path 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s; } .nav-links a { display: block; padding: 0.9rem 1.5rem; opacity: 0; transform: translateY(-8px); transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* The links settle in one after the other, just behind the panel. */ .nav-links.open a { opacity: 1; transform: translateY(0); transition: opacity 0.45s ease 0.12s, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s; } .nav-links.open li:nth-child(2) a { transition-delay: 0.2s; } } @media (max-width: 319.98px) and (prefers-reduced-motion: reduce) { .nav-links, .nav-links.open, .nav-links a, .nav-links.open a { transition: none; } } /* Same solid fallbacks as the header's, for the layers that carry the glass at this width. */ @supports not (backdrop-filter: blur(1px)) { @media (max-width: 319.98px) { .site-header::before, .nav-links { background-color: var(--paper); } } } @media (max-width: 319.98px) and (prefers-reduced-transparency: reduce) { .site-header::before, .nav-links { background-color: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; } } /* ============================================ 4. SECTIONS scroll-margin-top keeps a section from being hidden under a fixed header when jumped to — increase this if you add a sticky nav bar later. ============================================ */ .section { max-width: 1200px; /* 960px */ margin: 0 auto; /*padding: 5rem 1.5rem;*/ scroll-margin-top: 2rem; /*padding-bottom: 1.5rem;*/ /* Horizontal gutter — was folded into the (now commented-out) shorthand above, so it disappeared along with it. Doesn't show at wide viewports since max-width already centers the section with room to spare, but below ~1200px the section fills the full width and content ran edge-to-edge without this. */ padding-left: 1.5rem; padding-right: 1.5rem; } .section-about { padding-top: 2rem; } .section h2 { font-family: var(--display-font); font-size: 2rem; line-height: 1.15; margin-bottom: 2rem; } /* Homepage tagline: types out "I love creating !" on load, then loops — backspacing only the word (never the fixed "I love creating" part) and typing the next one in from script.js's TYPEWRITER_WORDS. aria-hidden since a screen reader reading out every keystroke would be unusable; the .visually-hidden sibling right after it in the markup gives screen readers the same sentence as a single static read instead. */ .typewriter-cursor { animation: typewriter-blink 1s step-end infinite; } @keyframes typewriter-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .typewriter-cursor { animation: none; } } /* ============================================ 5. PROJECT GRID ============================================ */ .project-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .project-card a { display: block; text-decoration: none; color: var(--ink); } .project-image { position: relative; overflow: hidden; border-radius: var(--image-radius); aspect-ratio: 1 / 1; background-color: #ece9e2; /* shows while the image loads */ } .project-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } /* A card's cover can also be a short video: it sits over the picture, invisible, and fades in (and plays, see script.js) while the card is hovered. Mirrors the picture's hover zoom so the two move together. */ .cover-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .project-card a:hover .cover-video, .project-card a:focus-visible .cover-video { opacity: 1; } /* Holds the picture and the video. Unlike the other cards this one has no hover zoom: the video fades in over the still at the same size, so nothing appears to move except the video itself. */ .cover-media { position: relative; display: block; width: 100%; height: 100%; } /* No zoom on this card's picture (this needs to out-rank the plain-card rule that zooms .project-image img on hover). */ .project-card a .project-image .cover-media img, .project-card a:hover .project-image .cover-media img, .project-card a:focus-visible .project-image .cover-media img { transform: none; } /* Phones and touch screens have no hover, so the video is always showing and script.js plays it while the card is on screen. It sits exactly over the picture, which shows until the first frame is ready. */ @media (hover: none), (max-width: 680px) { .cover-video { opacity: 1; border-radius: var(--image-radius); } } @media (prefers-reduced-motion: reduce) { .cover-video { display: none; } } /* The caption sits on top of the image, invisible until hovered */ .project-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.5) 60%, rgba(0, 0, 0, 0) 95%); opacity: 0; transition: opacity 0.3s ease; } /* Below 680px there's no hover to reveal the caption, so it moves from an absolutely-positioned overlay ON the image (clipped to a fixed aspect-ratio box) to plain content BELOW it instead — the aspect-ratio moves from the wrapping div onto the image itself so the image stays square while the div's height goes back to auto, letting the caption sit underneath in normal flow rather than being clipped by the div's own overflow:hidden. */ @media (max-width: 680px) { .project-image { aspect-ratio: auto; /*aspect-ratio: 5 / 4;*/ overflow: visible; border-radius: 0; } .project-image img { /*aspect-ratio: 1 / 1;*/ aspect-ratio: 5 / 4; height: auto; border-radius: var(--image-radius); } .project-overlay { position: static; display: block; padding: 0.8rem 0 0.5rem; background: var(--paper); opacity: 1; } } .project-overlay h3 { font-family: var(--display-font); font-size: 1.15rem; color: #fff; } .project-overlay .project-meta { font-size: 0.85rem; color: #f0efe9; margin-top: 0.25rem; } /* White text made sense on the dark image-gradient overlay above — once the caption moves below the image as plain page content, it needs to switch to the site's normal dark-on-light text colors instead. Declared after the white base rules above (same specificity either way) so this wins at ≤680px. */ @media (max-width: 680px) { .project-overlay h3 { color: var(--ink); } .project-overlay .project-meta { color: var(--muted); } } .divider { padding-bottom: 2rem; border-bottom: 1px solid rgb(228, 226, 219); } .project-card a:hover .project-image img, .project-card a:focus-visible .project-image img { transform: scale(1.02); } .project-card a:hover .project-overlay, .project-card a:focus-visible .project-overlay { opacity: 1; } /* Homepage cards and Civi's case-study cards: while a card is hovered its cover drifts a little away from the pointer (script.js sets --mx / --my, in px), like a picture sitting slightly behind the frame. The extra scale keeps the edges from showing as it slides. The Motion card is left out: its video already moves, and its picture (inside .cover-media) is kept still below. */ @media (hover: hover) and (min-width: 681px) { .section-projects .project-card .project-image img, .case-study-card .project-image img { transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .section-projects .project-card a:hover .project-image img, .section-projects .project-card a:focus-visible .project-image img, .case-study-card a:hover .project-image img, .case-study-card a:focus-visible .project-image img { transform: translate(var(--mx, 0px), var(--my, 0px)) scale(1.06); } /* The Motion card's picture stays put. */ .section-projects .project-card a:hover .project-image .cover-media img, .section-projects .project-card a:focus-visible .project-image .cover-media img { transform: none; } } @media (prefers-reduced-motion: reduce) { .project-image img, .cover-media, .project-overlay { transition: none; } } /* Case-study index cards (e.g. Civi's "Case Studies" section): reuses .project-card/.project-image for the thumbnail + hover zoom, but the title/description sit as plain visible text below the image instead of .project-overlay's hover-only caption — these are meant to be scanned and read directly, not discovered on hover. Fixed 3-column layout (vs. the homepage grid's auto-fill) since this always shows the same fixed set of cards, collapsing to fewer columns as the project page's content column narrows. */ .case-study-grid { grid-template-columns: repeat(3, 1fr); margin-top: 3rem !important; } @media (max-width: 900px) { .case-study-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .case-study-grid { grid-template-columns: 1fr; } } /* 3:2 instead of .project-image's default square — reads better for screenshots/diagrams than a 1:1 crop. Overrides the mobile rule below 680px too, which otherwise switches .project-image to aspect-ratio: auto and puts a different ratio on the image itself. */ .case-study-card .project-image, .case-study-card .project-image img { aspect-ratio: 5 / 4; } .case-study-card h3 { margin-top: 0.8rem; font-size: 1.05rem; } .case-study-card p { margin-top: 0.35rem; font-size: 0.9rem; color: var(--muted); } /* ============================================ 6. FOOTER ============================================ */ .site-footer { text-align: center; padding: 2rem; color: var(--muted); font-size: clamp(0.9rem, 3vw, 1rem) !important; } .site-footer-small { font-size: clamp(0.7rem, 3vw, 0.8rem) !important; /* Lighter than the credit line above it (which keeps --muted) — same grey, just faded, so the copyright/rights line reads as the least important text on the page. */ color: rgba(107, 107, 102, 0.6); } .footer-line-break{ display: none; } @media (max-width: 700px) { .footer-line-break{ display: block; } } /* Social icons sit above the credit lines (markup lives in footer.js). The 16px padding on each icon's box (see .social-links a) reaches past the row, so the bottom margin is a little larger than it looks. */ .site-footer .social-links { margin-bottom: 2.5rem; } @media (max-width: 760px) { .site-footer { align-items: left; text-align: left; padding-right: 5rem; } /* Follows the left-aligned text, still starting flush with it. More breathing room between icons than before (2rem) — the row reclaims the padding-right above (which is only there to clear the back-to-top button) as extra width, so the wider gap has room to spread into on the right without wrapping to a second line. */ .site-footer .social-links { justify-content: flex-start; gap: 3rem; width: calc(100% + 5rem); } } /* ============================================ 7a. LIGHTBOX (click-to-zoom on project images) ============================================ */ .project-hero img, .project-figure img { cursor: zoom-in; } .lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.92); padding: 4.5rem 1.5rem; opacity: 0; visibility: hidden; /* Nothing in here is meant to be text-selected — a stray click-drag (easy to do reaching for the zoom/nav buttons) was highlighting the image in the browser's selection blue instead of doing anything useful. */ user-select: none; -webkit-user-select: none; /* Hands every touch gesture inside the lightbox (pinch, drag, swipe) to our own touchstart/move/end handlers in script.js instead of the browser's native page-zoom/scroll — without this, a pinch here zoomed the whole page (dragging the fixed backdrop/buttons along with it) and a drag could scroll the page behind the overlay. */ touch-action: none; /* visibility has its own 0s transition, delayed until the opacity fade finishes closing — without this, visibility (which can't be animated) snaps to hidden the instant .open is removed, cutting off the fade-out (backdrop, controls and image) before it gets a chance to actually play. */ transition: opacity 0.45s ease, visibility 0s linear 0.45s; } .lightbox.open { opacity: 1; visibility: visible; transition: opacity 0.35s ease, visibility 0s linear 0s; } .lightbox-img-wrap { width: 100%; height: 100%; display: flex; /* "safe center" keeps the image centered while it fits, but falls back to start-aligned once it's bigger than the wrap — so zooming in doesn't clip the overflow on the far side out of scroll reach. Declared twice: browsers that don't understand "safe" (an older Safari) ignore that whole line and keep the plain "center" above it instead of dropping alignment entirely. */ align-items: center; align-items: safe center; justify-content: center; justify-content: safe center; overflow: auto; } .lightbox-img-wrap img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--image-radius); cursor: zoom-in; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); -webkit-user-drag: none; /* transform/opacity: grow-from-thumbnail on open, shrink-back on close, and the prev/next slide — script.js drives all three by setting a starting transform/opacity and clearing it. Zoom level changes (width/height) are intentionally NOT in this list — they apply instantly rather than animating. */ transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), clip-path 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease; } /* Some source images (icon sheets, diagram GIFs) have a genuinely transparent background rather than a solid one — on the dark lightbox backdrop that reads as a hole. script.js toggles this class on/off per image, driven by data-lightbox-bg="white" on the original in the page. */ .lightbox-img-wrap img.lightbox-img-on-white { background-color: #ffffff; } @media (prefers-reduced-motion: reduce) { .lightbox-img-wrap img { transition: none; } } /* Zoomed-in state: the image is sized above its fit-to-screen size (script.js sets explicit width/height). display/overflow don't need to change here anymore — the wrap is always flex + overflow: auto (see above) — this just swaps the cursor and lets the explicit size exceed the fit-to-screen max-width/max-height. Switching display between flex and block here used to be the bug behind the "jumps to a corner" zoom animation: display isn't animatable, so centering vanished the instant you zoomed, before the width/height had actually finished growing. */ /* Set by script.js while a zoom animation runs, so the image scaled past its final size doesn't briefly add scrollbars. */ .lightbox-img-wrap.zoom-animating { overflow: hidden; } .lightbox-img-wrap.zoomed img { max-width: none; max-height: none; cursor: zoom-out; } .lightbox-caption { position: absolute; bottom: 1.25rem; left: 0; right: 0; text-align: center; color: #f0efe9; font-size: 0.85rem; padding: 0 4.5rem; /* Its box spans the full width even though the text is centered and padded — without this, it sits on top of (and swallows clicks on) anything sharing this row, like the zoom controls on desktop. */ pointer-events: none; } /* Shared round icon-button look, used by the lightbox controls (close, prev/next, zoom in/out) and the carousel's prev/next — a translucent frosted-glass circle rather than a flat/bare icon, so every "button floating over an image" on the site reads as the same kind of control. Dark ink icon on a light frosted pill reads clearly against both the lightbox's near-black overlay and the carousel's dark viewport background. */ .lightbox-btn, .carousel-prev, .carousel-next { width: 44px; height: 44px; position: relative; border: none; background-color: var(--button); backdrop-filter: blur(8px) saturate(180%); -webkit-backdrop-filter: blur(8px) saturate(180%); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); transition: transform 0.1s ease-out, background-color 0.2s ease; /* The close button gets focused programmatically on open (for keyboard users tabbing through afterward), which was showing the browser's default blue focus ring even though nobody "selected" it — the background-color change on :focus-visible below is already a clear enough focus indicator on its own. */ outline: none; } /* Square corners to match the logo's mark (see .back-to-top, .carousel-dot and .lightbox-zoom for the same treatment). */ .lightbox-btn, .carousel-prev, .carousel-next { border-radius: var(--image-radius); } .lightbox-btn:hover, .carousel-prev:hover, .carousel-next:hover { background-color: var(--button-hover); color: var(--ink-hover); } /* Carousel prev/next specifically (not the lightbox's own buttons, which keep the plain frosted look above): dark-blue fill with a white icon — the animated hover-stroke-overlay's border picks up the same white for free via currentColor. */ .carousel-prev:hover, .carousel-next:hover { background-color: var(--link-hover); color: #fff; } .lightbox-btn:active, .carousel-prev:active, .carousel-next:active { transform: scale(0.9); } .lightbox-btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; } .lightbox-btn svg, .carousel-prev svg, .carousel-next svg { width: 20px; height: 20px; display: block; } @supports not (backdrop-filter: blur(1px)) { .lightbox-btn, .carousel-prev, .carousel-next { background-color: rgba(250, 249, 246, 0.92); } } /* The close and prev buttons sit before .lightbox-img-wrap in the DOM (see script.js), so without a z-index a wide or tall image — which paints after them — would cover the button underneath it. */ .lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 1; } .lightbox-prev { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); z-index: 1; } .lightbox-prev:active { transform: translateY(-50%) scale(0.9); } .lightbox-next { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); z-index: 1; } .lightbox-next:active { transform: translateY(-50%) scale(0.9); } @media (max-width: 640px) { /* Hidden in favor of swipe-to-navigate (see touchstart/move/end in script.js) — the buttons aren't needed once swipe covers the same job, and they'd otherwise sit awkwardly close to the thumb. */ .lightbox-prev, .lightbox-next { display: none; } } /* Zoom controls: bottom-center on narrow/mobile screens (centered is easiest to reach with a thumb); bottom-right on desktop, out of the way of the centered caption. Both stay above the caption's row. */ .lightbox-zoom { position: absolute; bottom: 4.5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.75rem; background-color: rgba(0, 0, 0, 0.35); backdrop-filter: blur(8px) saturate(180%); -webkit-backdrop-filter: blur(8px) saturate(180%); padding: 0.4rem 0.75rem; border-radius: var(--image-radius); } @media (min-width: 900px) { .lightbox-zoom { /* Same bottom offset as .lightbox-caption, so the zoom pill (right corner) and the caption (centered) sit on the same row instead of the pill floating above it. */ bottom: 1.25rem; left: auto; right: 1.5rem; transform: none; } } @media (max-width: 640px) { /* No zoom controls on mobile at all — the click-to-zoom toggle is also disabled in script.js to match. */ .lightbox-zoom { display: none; } } .lightbox-zoom-level { color: #fff; font-size: 0.8rem; min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; } .lightbox-zoom .lightbox-btn { width: 32px; height: 32px; } .lightbox-zoom .lightbox-btn svg { width: 16px; height: 16px; } /* ============================================ 7b. BACK-TO-TOP (project pages only, added by script.js) ============================================ */ .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 20; width: 44px; height: 44px; border-radius: var(--image-radius); border: none; /* Same frosted-glass treatment as the carousel arrows/lightbox controls, rather than the solid ink fill this used to have. */ background-color: var(--button); backdrop-filter: blur(8px) saturate(180%); -webkit-backdrop-filter: blur(8px) saturate(180%); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s ease, color 0.2s ease; } @supports not (backdrop-filter: blur(1px)) { .back-to-top { background-color: rgba(250, 249, 246, 0.92); } } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover, .back-to-top:focus-visible { /* Blue/purple hover, distinct from the plain glass-brightening hover the other frosted buttons use — the icon flips to a light color to stay visible against it. Solid, not translucent — tried as glass and it didn't read well here. */ background-color: var(--link-hover); color: var(--paper); /* Same lift-and-deepen-shadow hover as .badge-specs/the carousel controls — comes after .visible in source order so it wins their tied specificity and overrides its translateY(0). */ transform: translateY(-2px); box-shadow: 0 10px 16px -6px rgba(0, 0, 0, 0.18); } .back-to-top.visible:active { transform: translateY(0) scale(0.9); } .back-to-top svg { width: 20px; height: 20px; } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } } /* ============================================ 7. ACCESSIBILITY ============================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ============================================ 8. PROJECT PAGE (used by files inside /projects/) ============================================ */ .project-header { max-width: 1200px; /* 720px */ margin: 0 auto; padding: 3rem 1.5rem 2rem; } .project-header-about{ padding: 2rem 1.5rem 0 !important; } .project-header h1 { font-family: var(--display-font); font-size: clamp(2.5rem, 5vw, 3rem); line-height: 1.15; } /* The page H1 uses the same fade-up as the body text (.p-reveal) and the section H2s, so every piece of text on a page arrives the same way. Toggled by the same IntersectionObserver in script.js, so it replays every time the title scrolls out of view and back in, not just on first load. */ .h1-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .h1-reveal.in-view { opacity: 1; transform: translateY(0); } /* Section H2s get the same fade-up as the page H1 above and the body copy below (.p-reveal) — same motion, same 0.8s — so all text on a page arrives one way. script.js adds .h2-reveal itself (rather than it living in the base h2 rule) so a heading only ever starts hidden once JS has actually confirmed it can reveal it again — if the script fails to load, h2s simply render normally with no animation, instead of staying invisible. */ .h2-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .h2-reveal.in-view { opacity: 1; transform: translateY(0); } /* Same left-to-right reveal as the H1/H2 headings above, applied to each timeline logo on the About page instead — same 0.7s speed as the H2s, toggled by the same repeat-on-scroll IntersectionObserver in script.js. */ .timeline-logo-reveal { opacity: 0; transform: translateX(-24px); transition: opacity 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); } .timeline-logo-reveal.in-view { opacity: 1; transform: translateX(0); } /* Same reveal as the H1 next to it, since they sit in the same opening row on the About page — same 1.6s speed, same repeat-on- scroll IntersectionObserver in script.js. */ .about-portrait-reveal { opacity: 0; /*transform: translateX(-24px);*/ transition: opacity 2s cubic-bezier(0.2, 0.8, 0.2, 1), transform 2s cubic-bezier(0.2, 0.8, 0.2, 1); /*transition-delay: 0.2s;*/ } .about-portrait-reveal.in-view { opacity: 1; /*transform: translateX(0);*/ } /* Body copy (paragraphs and Problem/Solution-style sub-headings) fades up from below — the same motion as the H1 and H2s above, so all text reads as settling into place rather than arriving from off-screen. Same repeat-on-scroll IntersectionObserver in script.js adds/removes .in-view, and the same script-only setup keeps text visible by default if it never runs. */ .p-reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } .p-reveal.in-view { opacity: 1; transform: translateY(0); } /* Images — hero shots, case-study figures, and the project/case-study grid cards — get the same fade-up as body copy, just a touch slower since they're heavier visual elements. Grid cards in the same row naturally land in view together, so they read as a row arriving at once rather than one at a time. */ .image-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); } .image-reveal.in-view { opacity: 1; transform: translateY(0); } /* Homepage only (index.html sets .js-reveal in its ): hide the project cards from the very first paint. Their .image-reveal class is added by script.js at the end of the page, which can run after the browser has already painted — the cards would flash visible and skip the entrance animation. Same look as .image-reveal, and released the moment a card gets .in-view. */ @media (prefers-reduced-motion: no-preference) { html.js-reveal .project-card:not(.in-view) { opacity: 0; transform: translateY(28px); } } /* About and project pages (each adds .js-reveal-all to in its ): the same first-paint hiding as the project cards above, for everything the opening animation covers. Each rule matches the hidden state of the element's own reveal class (.about-portrait-reveal, .h1-reveal, .h2-reveal, .p-reveal) exactly, so nothing jumps when script.js adds those classes. */ @media (prefers-reduced-motion: no-preference) { html.js-reveal-all .about-portrait:not(.in-view) { opacity: 0; } html.js-reveal-all .project-header h1:not(.visually-hidden):not(.in-view) { opacity: 0; transform: translateY(24px); } html.js-reveal-all .project-header .project-meta:not(.in-view), html.js-reveal-all .project-header .badge-block:not(.in-view), html.js-reveal-all .project-header .project-index:not(.in-view), html.js-reveal-all .project-header-content > .project-nav:not(.in-view), html.js-reveal-all main h2:not(.visually-hidden):not(.in-view), html.js-reveal-all main.project-body p:not(.in-view), html.js-reveal-all main.project-body h3:not(.in-view), html.js-reveal-all main.project-body h4:not(.in-view), html.js-reveal-all .toolkit-category:not(.in-view), html.js-reveal-all #specs-about-desktop .badge-block:not(.in-view), html.js-reveal-all #specs-about-mobile .badge-block:not(.in-view) { opacity: 0; transform: translateY(24px); } html.js-reveal-all .project-hero:not(.in-view), html.js-reveal-all .project-hero-static:not(.in-view), html.js-reveal-all .project-figure:not(.in-view) { opacity: 0; transform: translateY(28px); } html.js-reveal-all .project-carousel:not(.in-view) { opacity: 0; transform: translateY(32px); } } /* Experience and Education timelines: each entry's blocks (date badges, logo, text) fade up one after another when the entry scrolls into view — script.js adds .timeline-part to them and toggles .in-view. The id selectors make these win over the elements' own transition rules, which come later in this file (e.g. .timeline-logo-link's hover fade). */ #experience .timeline-part, #education .timeline-part { opacity: 0; transform: translateY(24px); transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); } #experience .timeline-part.in-view, #education .timeline-part.in-view { opacity: 1; transform: translateY(0); } /* The logo's dim-on-hover, which the rules above would otherwise override. */ #experience .timeline-logo-link.timeline-part.in-view:hover, #education .timeline-logo-link.timeline-part.in-view:hover { opacity: 0.8; } /* Carousels get the slowest, heaviest fade-up of the three — they're the largest single block on a page, so settling in a beat slower than the images above keeps the whole page's reveal rhythm feeling like it's building up in weight rather than everything moving at an identical speed. */ .carousel-reveal { opacity: 0; transform: translateY(32px); transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1); } .carousel-reveal.in-view { opacity: 1; transform: translateY(0); } /* An element that left through the top of the screen hides shifted up, not down — see the exit branch of headingObserver in script.js. Sliding down into place is also the natural direction when scrolling back up. */ .reveal-from-top:not(.in-view) { transform: translateY(-24px); } .project-header .project-meta { margin-top: 0.75rem; font-size: 1rem; color: var(--muted); font-size: clamp(1rem, 2vw, 1.1rem); } @media (max-width: 700px) { .project-meta-grid { grid-template-columns: 1fr; gap: 2rem; } } /* Quick-facts list (role, team, timeline, tool) under the H1 */ /* Flexbox, not grid: a CSS Grid column track (even capped with fit-content(N)) is sized up to its max limit whenever the grid has room for it, regardless of how little the wrapped badge-grid inside actually uses — so a short Timeline block and a long Role block both got stretched to their track's ceiling, leaving wildly different leftover whitespace before the next column despite an identical declared column-gap. A flex item's auto width genuinely hugs its content instead (shrink-to-fit), so switching to flex makes the visual gap between Role/Tool/Timeline match the declared gap exactly, every time — no per-project column-width tuning needed, which is why the old per-page modifier classes below are gone. Each block still wraps its own badges independently (rather than the whole block dropping to a new line) via the max-width on the child rule just below. */ .project-specs { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 2rem 40px; /* row-gap column-gap — 100px between Role/Tool/Timeline */ } .project-specs > div { /*flex: 0 1 auto;*/ max-width: 260px; } /* Float-based alternative to .project-specs' flexbox, same goal: each block hugs its own content and wraps internally, with a fixed 100px gap to the next block. A floated element's width defaults to shrink-to-fit — the same intrinsic sizing a flex item's auto width gets — so .badge-block never needs a track/basis to be told to hug its content. Its .badge-specs children are inline-flex, which behaves like inline-block for line-wrapping: they flow and wrap within .badge-block's max-width on their own, no flex-wrap needed. */ /* Role/Tools/Timeline badges inside a page section (Motion Graphics has six of these). Their .badge-block children float, so without this the row collapses to zero height and the content after it — e.g. the .two-columns text + animation — gets wrapped into the thin space beside the floats instead of sitting below them. Scoped to .project-body so the header's spec blocks are unaffected. */ .project-body .project-specs-new { display: flow-root; width: 100%; } .badge-block { position: relative; float: left; margin-right: 3rem; margin-bottom: 1rem; /* A float never shrinks below its own declared width — if the specs column gets narrower than a block's fixed px width (the header starts losing room to the "On this page" box well before the 900px full-stack fallback below), the float just overflows past the column's edge instead of wrapping, which is what was reading as content "cut off". max-width caps it at whatever room is actually left, letting the float shrink like a normal block would; badges then wrap inside a narrower row instead of spilling out. Omnitrack's own #id widths already have dedicated breakpoints for this, so this is mostly a safety net there. */ max-width: 100%; /*background-color: #ff0000;*/ } #specs-about-desktop{ display: flow-root; /* contains the floated .badge-block children so this element doesn't collapse to zero height */ width: 100%; } #specs-about-mobile{ display: none; } /* ABOUT PAGE*/ #about-based-in, #about-based-in-mobile{ width: 259px; } #about-availability, #about-availability-mobile{ width: 194px; } #about-languages, #about-languages-mobile{ width: 300px; } #about-contact, #about-contact-mobile{ width: 210px; } /* Email badge: combines the .badge-specs pill look with the click-to-copy behavior of .copy-email-btn (see script.js). It's a