carries tabindex="-1" so the skip link genuinely moves focus — Chrome and Firefox set the sequential-focus point without it, Safari and several screen readers do not. It is not a control, though, and ringing the entire page content reads as a rendering bug, so the ring is suppressed here only. The visitor's confirmation is that the next Tab lands inside the content rather than back in the header. */ #main:focus, #main:focus-visible { outline: none; } .skip-link { position: absolute; left: var(--space-4); top: -4rem; z-index: 50; padding: var(--space-3) var(--space-4); background: var(--color-accent); color: var(--color-accent-text); border-radius: var(--radius-sm); text-decoration: none; transition: top .2s; } .skip-link:focus { top: var(--space-4); } /* ── device safe areas ─────────────────────────────────── Reported on a Dynamic Island iPhone: the page scrolled under the status bar while the sticky header anchored below it, so content stayed visible in the strip above the header. Measured off the screenshot -- 692px wide at a 2.168 ratio is a 393pt iPhone Pro, and the header's top edge sat at 59.6 CSS px, which is exactly that device's safe-area inset. The site had no safe-area handling at all and no viewport-fit, so it got whatever Safari decided. viewport-fit=cover in the meta takes that back: the page owns the whole screen, sticky top:0 means the real top, and the header's own padding holds its contents clear of the status bar while its blurred background covers the strip. Naming them as properties rather than repeating env() five times is what makes this testable -- override these four on :root and every dependent calc moves, which is how it was verified without an iPhone to hand. Everywhere else -- desktop, Android, any browser that reports no insets -- they resolve to the 0px fallback and every calc below reduces to exactly what it was. */ :root { --inset-top: env(safe-area-inset-top, 0px); --inset-right: env(safe-area-inset-right, 0px); --inset-bottom: env(safe-area-inset-bottom, 0px); --inset-left: env(safe-area-inset-left, 0px); } /* ── container tints ────────────────────────────────────────────────────── Measured at their borders, every screenshot in this portfolio is COOLER than the paper it sits on. Warmth here is R-B: paper is +12, and the covers run from 0 (Fissa3, pure white) through -16 (InstaDeep) and -24 (Groupado) to -143 (Fixerloop's saturated blue). Not one is warm. That is why an untinted image reads as pasted on rather than placed -- it is a systematic mismatch, not a bad screenshot here and there. The screenshots cannot be recoloured; they are product UI and repainting them would misrepresent the work. So the container does the reconciling. Each project names a tint close to its own image's hue, the image floats INSET inside that tint, and the eye crosses two short steps -- paper to tint, tint to image -- instead of one long one. The tint is NOT the matching hero-card colour, and that was the first attempt. The cool tint sat as far from paper as the cover it was meant to reconcile, so the frame still read as a cool panel dropped on warm paper. What actually governs this is direction, not distance. A tone that is FARTHER from paper but warmer reads as the same paper under more ink; the identical distance travelled cool reads as a different material. So every media tint keeps warmth (R-B) above zero and simply leans: mediaSand #EDE9E1 warmth +12 luma 233.3 mediaClay #EEE8E8 warmth +6 luma 233.8 mediaAsh #EAE9E7 warmth +3 luma 233.1 (paper: +1, luma 250.9) The family was sand/teal/sky until the accent moved from teal to ember. A cool tint under a warm accent is precisely the failure described above, so teal became clay and sky became ash: the same three slots at the same luma, with the hues re-solved into the warm half of the wheel. Luma is held flat across the family on purpose -- 0.7 of spread -- so hue is the only thing that changes between two projects and the work page does not visibly brighten and dim as you scroll it. The hero cards keep the saturated card* tokens: those are meant to read as distinct objects, which is the opposite of what a frame has to do. */ [data-tint="sand"] { --tint: var(--color-media-sand); } [data-tint="clay"] { --tint: var(--color-media-clay); } [data-tint="ash"] { --tint: var(--color-media-ash); } /* The inline insets are not optional once viewport-fit=cover is set: in landscape the notch eats into the content column, and .shell is the one place that column's edges are defined. */ .shell { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: calc(var(--gutter) + var(--inset-left)) calc(var(--gutter) + var(--inset-right)); } .prose { max-width: var(--prose-width); } /* ── header / footer ─────────────────────────────── */ .site-head { position: sticky; top: 0; z-index: 20; /* Padding, not margin: the blurred background has to extend up behind the status bar while the name and nav stay below it. */ padding-top: var(--inset-top); background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: blur(10px); } .site-head__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); } .site-head__name { font-weight: var(--font-weight-bold); text-decoration: none; letter-spacing: -0.01em; } .site-head nav { display: flex; gap: var(--space-6); } /* The nav was 15px text at 6.47:1 against the page -- legible, and past WCAG AA -- so "make it brighter" was never the fix. Two real problems: Nothing marked the current page. `aria-current` appeared nowhere on the site, so a visitor on /about saw a nav identical to the homepage's; the only is-current rule in the stylesheet was the project-page TOC. It is marked with the accent, the colour this site already uses for "here". And the hit area was the text box -- 24px tall with zero padding, the bare WCAG 2.5.8 minimum and well under the 44px platform norm. The padding grows the target to 48px and the negative margin cancels it in layout, so the header stays 76px and nothing moves. */ .site-head nav a { color: var(--color-text-muted); text-decoration: none; font-size: var(--font-size-sm); padding: var(--space-2) var(--space-4); /* The negative margin is GONE, and deliberately. It existed to cancel the padding in layout so the flat header bar stayed 76px tall while the hit area grew to 48. The links sit inside a pill now, and a negative margin there pulls each link into its neighbour and under the pill's own padding -- the target the margin was protecting ends up overlapping the thing drawn around it. The pill supplies its own spacing, so the padding can just be padding. */ border-radius: var(--radius-full); transition: color .25s var(--ease-out), background-color .25s var(--ease-out); } .site-head nav a:hover { color: var(--color-text); } /* A filled pill rather than a colour change: the current page reads at a glance instead of on comparison with its neighbour. */ .site-head nav a[aria-current="page"] { background: var(--color-accent-soft); /* accent-BRIGHT, not accent. Both sit on the accent-soft wash, and on the dark theme the plain accent measures 4.44:1 against it -- under AA, and it passed 227 tests without anyone noticing, because the contrast sweep never pairs the accent with its own wash. The bright variant is 6.24 on dark and 7.47 on light. See the test. */ color: var(--color-accent-bright); font-weight: var(--font-weight-medium); } /* ── contextual cursor label ────────────────────────────────────────────── What replaced the trail, and deliberately not the same kind of thing. The trail was always on, drew under the pointer wherever it went, and at 6% of the ink under a 9px blur it left grey smudges across the hero. This renders NOTHING at rest. It appears only over an element whose click is not self-evident -- a screenshot, a row in the work rail -- and says what the click does. Offset down-right of the pointer, never under it, so it cannot sit on top of the thing you are reading. The native cursor is untouched: this adds a label beside it rather than replacing it, so a failure here costs a hint, not the ability to see where you are pointing. Fixed and pointer-events:none, so it can never take a click or change what is underneath. */ .cursor-label { position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none; /* The pill is drawn down-right of the hotspot; translate3d carries the pointer position and this carries the offset, so the two never fight. */ margin: 14px 0 0 16px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--color-bg-inverse); color: var(--color-text-inverse); font-family: var(--font-sans); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); letter-spacing: 0.01em; white-space: nowrap; /* Hidden state. visibility (not display) so the transform keeps updating while it is away and it does not fly in from the last place it was. */ opacity: 0; visibility: hidden; transform-origin: 0 0; scale: 0.9; transition: opacity .18s var(--ease-out), scale .18s var(--ease-out), visibility 0s linear .18s; } .cursor-label.is-on { opacity: 1; visibility: visible; scale: 1; transition: opacity .18s var(--ease-out), scale .18s var(--ease-out), visibility 0s; } /* The label is information, so it still appears -- it just stops easing in. Following the pointer is the pointer's own movement, not an animation. */ @media (prefers-reduced-motion: reduce) { .cursor-label, .cursor-label.is-on { transition: none; scale: 1; } } /* ══════════════════════════════════════════════════════════ SCROLL-DRIVEN MOTION ══════════════════════════════════════════════════════════ MOTION_INTENSITY 8, on the work rather than on the chrome. Every block below answers §5's question -- what does this animation communicate -- in one line, or it would not be here. Native `animation-timeline`, not JavaScript. Scroll handlers were the reason scroll effects used to cost frames; this runs off the main thread and nothing has to be cleaned up. It is also why there is no library. Two guards wrap all of it, and both matter: @supports (animation-timeline: view()) A browser without it must not be left holding an element at opacity 0 forever. Outside the guard every element is in its FINAL state, so an unsupporting browser simply shows the page. prefers-reduced-motion: no-preference Scroll-linked movement is movement the visitor did not ask for. The order is deliberate: the rule sets the resting state, and only then does the guarded block animate toward it. ══════════════════════════════════════════════════════════ */ /* The spine, drawn segment by segment. Communicates: chronology. The rail IS a timeline, and a line that builds as you descend says so better than a column of loose dots. Per entry rather than one long line, because view() on a 5500px element has no useful range -- a segment is one row tall and reads naturally. */ @media (min-width: 900px) { .entry { position: relative; } .entry::before { content: ""; position: absolute; /* the dot is 12px wide at the column's left edge, so its centre is 6; the line is 1px, so 5 puts it dead centre under the dot */ left: 5px; top: 0; bottom: 0; width: 1px; background: var(--color-border-strong); transform-origin: top center; } } /* Covers arrive rather than being there already. Communicates: sequence. Five projects down one column read as a list; arriving one at a time reads as a walk through the work. */ @keyframes rail-media-in { from { opacity: 0; transform: translateY(20px) scale(0.985); } } /* Case-study screens, same reason, tighter range: there are up to nine in a section and a long range would leave the last ones still arriving. */ @keyframes shot-in { from { opacity: 0; transform: translateY(14px); } } @keyframes spine-draw { from { transform: scaleY(0); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { @media (min-width: 900px) { .entry::before { animation: spine-draw linear both; animation-timeline: view(); /* drawn while the row enters, finished before it is being read */ animation-range: entry 0% entry 85%; } } .entry__media { animation: rail-media-in linear both; animation-timeline: view(); animation-range: entry 5% entry 75%; } .shot { animation: shot-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; } } } /* The hero, on load rather than on scroll: there is nothing to scroll yet. Communicates: hierarchy. It walks the eye down in reading order instead of dropping five elements at once, which is the difference between a page that arrives and a page that is just suddenly there. `both` holds the end state, so nothing snaps back. The cascade is short on purpose: a hero a visitor has to WAIT through is a hero they resent. */ @keyframes hero-step-in { from { opacity: 0; transform: translateY(14px); } } /* THESE FOUR SELECTORS USED TO NAME NOTHING. .opening__status, __support, __actions and __facts were the old hero's status row, supporting paragraph, button row and four stat blocks -- every one of them deleted when the hero was cut back to a greeting, a headline and an ask. The keyframes and the four delays stayed behind, so the stylesheet described a hero cascade that animated zero elements and the hero arrived with no motion at all. Checked with a grep for each class against index.html: 0, 0, 0, 0. That is most of the reason the first impression read as flat. The fix is not new motion, it is pointing the motion that was already written at the elements that are actually there. A test below now fails if any name in this block leaves the markup again. */ /* :not(.hook-on):not(.hook-done) -- the first visit of a session plays the hook instead, and the hook owns this cascade from the moment the claim is built. Without the guard both would run: these would arrive on load, while the claim was still a set of outlines waiting to be filled, which is the one order the sequence cannot be in. .hook-done keeps them off afterwards, so removing .hook-on does not play the whole cascade a second time. */ @media (prefers-reduced-motion: no-preference) { html:not(.hook-on):not(.hook-done) .opening__portrait, html:not(.hook-on):not(.hook-done) .opening__greeting, html:not(.hook-on):not(.hook-done) .opening__meta, html:not(.hook-on):not(.hook-done) .ask, html:not(.hook-on):not(.hook-done) .opening__worked { animation: hero-step-in .55s var(--ease-out) both; } .opening__portrait { animation-delay: 0s; } .opening__greeting { animation-delay: .06s; } .opening__meta { animation-delay: .34s; } .ask { animation-delay: .42s; } .opening__worked { animation-delay: .48s; } } /* ── cross-document view transitions ───────────────────────────────────── MOTION_INTENSITY 6, and motivated rather than decorative: it communicates a state transition. Clicking a case study currently blanks the page and repaints it, which is the one moment a static site feels like a stack of documents instead of a product. This crossfades the old page into the new one instead. Native and declarative. No JavaScript, no library, and nothing to clean up. Browsers without cross-document view transitions ignore the at-rule entirely and navigate exactly as they do today, so there is no fallback to write. The wordmark is given a transition name so it is treated as the SAME element across the navigation: it holds still while everything around it changes, which is what makes the two pages read as one site rather than two documents. Only one element gets this. Naming several is how view transitions start to feel like a slideshow. Durations are short on purpose. A page transition the visitor has to wait through is a page transition they will resent by the fourth click. */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out .18s var(--ease-out) both; } ::view-transition-new(root) { animation: vt-in .26s var(--ease-out) both; } @keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } } .site-head__name { view-transition-name: wordmark; } /* WCAG 2.3.3: a transition driven by navigation is motion the visitor did not ask for. Under reduced motion the pages still swap, just instantly. `navigation: none` would also disable it, but keeping the transition and zeroing the animation leaves the named element working, which avoids a layout jump on the wordmark. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } /* ── theme toggle ───────────────────────────────────────────────────────── The page follows the system. This is for the visitor whose machine says dark but who wants to see the paper, which is most of what this site's identity is, and for the reverse. The mark is a circle whose right half fills, which is the shape every operating system uses for this. No icon library ships here, and one control is not worth hand-drawing SVG paths for. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; /* 44px is the platform touch minimum; the dial inside is 18. */ width: 44px; height: 44px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: color-mix(in srgb, var(--color-bg-raised) 72%, transparent); backdrop-filter: blur(10px); color: var(--color-text); cursor: pointer; flex: none; transition: border-color .25s var(--ease-out), background .25s var(--ease-out); } .theme-toggle:hover { border-color: var(--color-border-strong); } .theme-toggle:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } .theme-toggle__dial { width: 18px; height: 18px; border-radius: var(--radius-full); border: 2px solid currentColor; /* The fill is an inset shadow rather than a second element: one box, and the half-moon is just a very large horizontal spread. */ box-shadow: inset 9px 0 0 0 currentColor; transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out); } /* Pressed means "you have overridden the system", so the dial flips to show the other half. The state is on the button, not the html element, because the button is what the visitor is operating. */ .theme-toggle[aria-pressed="true"] .theme-toggle__dial { box-shadow: inset -9px 0 0 0 currentColor; transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle__dial { transition: none; } } /* No margin. 128px here, on top of the closing band's own 48px of bottom padding, put 176px of empty page between the last thing anyone reads and the rule under it. The border is what separates the footer; it does not need a screen of air as well. */ .site-foot { margin-top: 0; border-top: 1px solid var(--color-border); } .site-foot__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); /* The bottom inset is the home indicator -- also not optional once the page covers the full screen. */ padding-block: var(--space-8) calc(var(--space-8) + var(--inset-bottom)); } .site-foot__note { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); } .site-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-6); } /* min-width so the short ones are not fiddly. "CV" is two characters and came out 17x24, the smallest target on the site. It already CONFORMS to WCAG 2.5.8: the criterion exempts an undersized target whose 24px diameter circle does not reach another target, and tested against every other target's box on the page, this one's does not -- the nearest footer link is more than 48px away centre to centre. So this is not a conformance fix, it is just a kinder target for anyone with an unsteady pointer, at the cost of 3.5px of padding either side. */ .site-foot__links a { color: var(--color-text-muted); text-decoration: none; font-size: var(--font-size-sm); display: inline-block; min-width: 24px; text-align: center; } .site-foot__links a:hover { color: var(--color-text); } /* ── hero ────────────────────────────────────────── */ /* ── bands + grids ───────────────────────────────── */ /* 48px, down from 64. At 64 the gap between two sections was 128px -- a full phone screen of nothing between the end of one list and the title of the next, which is most of what "a lot of lost space" was pointing at. 96px still separates them; it just no longer takes a scroll to cross. */ .band { padding-block: var(--space-12); } .band__head { margin-bottom: var(--space-12); } .band__head h2 { font-family: var(--font-display); font-weight: var(--font-weight-regular); margin: 0; font-size: var(--font-size-2xl); line-height: var(--line-height-tight); letter-spacing: -0.02em; } .band__head p { margin: var(--space-2) 0 0; color: var(--color-text-muted); } /* The card is a container, not a link -- see project_card in build.py for why. .card__title a carries the href and an ::after that covers the whole card, so the entire surface is still clickable while only the title names the destination. position: relative is what that overlay resolves against. */ /* Keyboard focus has to show on the card, not on the few words of the title: the overlay is what a pointer hits, so it is what an outline should describe. */ /* Covers ship untreated, on request. A grayscale-and-scrim treatment and then a blue duotone were both tried here and both removed -- see the two commits before this one for the measurements, if the covers ever need to be pulled back toward the page again. The bare numbers: they run 87x to 587x the background's luminance, and the eight of them span 7.2x between lightest and darkest. */ /* Year, domain and role. Deliberately quieter than the tagline: it is reference information a visitor scans, not copy they read. */ /* ── buttons ─────────────────────────────────────── */ .btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); } /* inline-flex, not inline-block: the buttons carry a mark beside the label now, and inline-block would sit the image on the text baseline with a descender gap under it rather than centred against the word. */ /* The first six declarations undo the browser, not the design. .btn dresses an and a