/manifest.json -- see build-slideshow-
manifest.js. Stacks over the static image and crossfades between
whatever's listed; collapsing the card clears it back to empty, so
the static image is what's left showing. Silently stays empty if
the project has no slideshow folder yet. */
.work-media-slideshow { position: absolute; inset: 0; }
.work-media-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease;
}
.work-media-slide.is-active { opacity: 1; z-index: 1; }
.work-heading {
padding: var(--space-md) var(--space-md) 0.2em;
}
.work-heading h3 {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: -0.01em;
}
/* The card's description: one truncated, ellipsis'd line while
closed, typed out in full (see main.js) when it opens -- one
element carrying the real copy throughout rather than a duplicate
teaser + full-paragraph pair, so there's a single padding to keep
in sync and nothing to keep in sync between two copies of the same
text. .is-typing (added by main.js for the duration of the type-out)
drops the truncation so the growing text can wrap normally. */
.work-desc {
padding: 0 var(--space-md) var(--space-sm);
color: var(--muted);
font-size: 0.92rem;
max-width: 65ch;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
/* main.js drives this with an explicit inline max-height (measured
up front, not grown step-by-step as text arrives) so the card's
height animates as one smooth motion on its own fixed timeline,
independent of however fast the type-out itself is going. Duration
here is just the fallback -- main.js sets its own inline
transition-duration per direction (opening lingers, closing is
twice as fast), overriding only that one longhand. */
transition: max-height 0.4s var(--ease-out-expo);
}
.work-desc.is-typing {
white-space: normal;
}
/* Line 2 onward, built as one span per word by main.js -- present
(and so already counted toward the box's height) from the moment
the card opens, just invisible until its word-reveal timer reaches
it. Eased rather than an instant snap -- words land close enough
together that consecutive fades overlap into one soft cascade
rather than reading as separate individual pops. */
.work-desc-word {
opacity: 0;
transition: opacity 0.3s var(--ease-out-expo);
}
.work-desc-word.is-shown {
opacity: 1;
}
.work-desc strong { color: var(--ink); font-weight: 700; }
/* Always-visible footer: the tag row plus the +/- icon, sitting below
.work-detail (the collapsible description + enquire button) rather
than inside .work-toggle -- it has its own click handler in main.js
(toggleCard, shared with the header button) so the tags area is
just as clickable as the header, not dead space underneath it. */
/* Tags column + icon sit side by side, bottom-aligned -- the icon is
a fixed-size sibling (not a flex item inside .work-tags itself), so
.work-tags only ever gets the remaining width after it (min-width:0
lets it actually shrink/wrap instead of overflowing) and its pills
can never run into or past the icon's own column on any line, only
ever wrap earlier onto a new one. */
.work-foot {
display: flex;
align-items: flex-end;
gap: 0.6em;
padding: 0 var(--space-md) var(--space-md);
cursor: pointer;
}
.work-tags {
flex: 1 1 auto;
min-width: 0;
/* .tags li's own left padding (0.8em at its 0.75rem font-size = 0.6rem)
otherwise reads as extra indent versus .work-desc's text starting
right at the same left edge above it -- pull the row back by
exactly that much so the first pill's *text*, not its pill
background, lines up with the description. */
margin-left: -0.6rem;
}
/* Closed: a single row that overflows horizontally rather than
wrapping -- flex-wrap:nowrap plus flex-shrink:0 on the pills
themselves (below) stops the last one from either dropping to a
hidden second line or getting squeezed to fit, so it instead runs
past the row's own width and gets clipped mid-pill by
overflow:hidden. The mask fades that cut edge to transparent over
its last ~1.75rem instead of a hard chop, reading as "more tags,
scroll/expand for them" rather than a ragged edge -- harmless when
everything actually fits, since the fade then just falls across
empty space with nothing under it to fade. The icon (a flex
sibling, not part of this row) sits beside that single line via
.work-foot's align-items:flex-end above. Open: none of this
applies, so the box is however tall the full, potentially
multi-line tag list actually needs. */
.work-card:not(:has(.work-toggle[aria-expanded="true"])) .work-tags {
flex-wrap: nowrap;
overflow: hidden;
mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.75rem), transparent);
}
.work-tags li {
flex-shrink: 0;
}
/* Down-caret disclosure indicator -- two short bars meeting in a "v"
at rest; expanding rotates the whole icon 180° so the same two bars
point up instead, reading as "collapse" without needing separate
icon assets. Teal by default (not the muted grey the tag pills use)
so it reads as the card's live control rather than another tag;
inverts to a solid navy circle with teal bars once open. */
.work-toggle-icon {
position: relative;
flex-shrink: 0;
width: 28px;
height: 28px;
border: 1.5px solid var(--teal);
border-radius: 50%;
background: #fff;
transition: background-color 0.3s var(--ease-out-expo), transform 0.3s var(--ease-back);
}
/* Goes solid teal and grows slightly when the *card* is hovered or --
on touch, where nothing can hover -- most centered in view
(.is-scroll-active, see main.js), not just when the pointer is
directly over the icon itself. No rotation here -- that's reserved
for the open/close state below, where it actually means something;
this is just the bouncy overshoot-and-settle pop below. */
.work-card:hover:not(:has(.work-toggle[aria-expanded="true"])) .work-toggle-icon,
.work-card.is-scroll-active:not(:has(.work-toggle[aria-expanded="true"])) .work-toggle-icon {
background: var(--teal);
/* Two animations on the same property, in sequence -- toggle-pop's
forwards holds it scaled from 0.5s onward, but toggle-pulse's own
active period *also* starts right at that 0.5s mark (its delay),
and a later-listed animation wins control of a shared property
over an earlier one once both are active -- so it seamlessly
takes over from there, nudging the icon again every couple of
seconds for as long as the card stays hovered/active instead of
it going motionless after the initial pop. */
animation:
toggle-pop 0.5s var(--ease-out-expo) forwards,
toggle-pulse 2s var(--ease-out-expo) 0.5s infinite;
}
@keyframes toggle-pop {
0% { transform: scale(1); }
40% { transform: scale(1.35); }
65% { transform: scale(1.05); }
85% { transform: scale(1.2); }
100% { transform: scale(1.15); }
}
/* Starts and ends each cycle at scale(1.15) -- exactly where toggle-pop
above leaves off -- so the handoff between the two, and every loop
after, is seamless. Holds there for the back half of the cycle
(60%-100%) rather than looping the bounce back-to-back, so repeats
read as an occasional nudge, not a constant jitter. */
@keyframes toggle-pulse {
0%, 60%, 100% { transform: scale(1.15); }
15% { transform: scale(1.35); }
30% { transform: scale(1.1); }
45% { transform: scale(1.22); }
}
.work-toggle-icon::before,
.work-toggle-icon::after {
content: '';
position: absolute;
/* The two bars share a pivot (their meeting point, at the icon's
horizontal center) that rotate() below also uses as its origin --
but a "v"'s vertex isn't its own visual center, its arms only
extend one way from it. Offsetting the pivot down by half the
arms' vertical reach (8px bars at 45° => ~5.66px tall => 2.83px
half) centers the whole chevron shape -- not just its vertex -- on
the icon's true center (14px), so rotating it 180° swaps a
centered "v" for a centered "^" instead of visibly drifting. */
top: 15.83px;
width: 8px;
height: 2px;
background: var(--navy);
transition: background-color 0.3s var(--ease-out-expo);
}
.work-toggle-icon::before { left: 6px; transform-origin: right center; transform: rotate(45deg); }
.work-toggle-icon::after { right: 6px; transform-origin: left center; transform: rotate(-45deg); }
/* The icon lives outside .work-toggle (see .work-foot), so its
expanded state keys off the card as a whole rather than a
.work-toggle descendant selector. Rotating the icon itself (rather
than re-angling each bar individually) carries the "v" along with
it, flipping it to point up. */
.work-card:has(.work-toggle[aria-expanded="true"]) .work-toggle-icon {
background: var(--navy);
transform: rotate(180deg);
}
.work-card:has(.work-toggle[aria-expanded="true"]) .work-toggle-icon::before,
.work-card:has(.work-toggle[aria-expanded="true"]) .work-toggle-icon::after { background: var(--teal); }
/* Description & the enquire CTA -- collapsed to zero height by
default via the 0fr/1fr grid-row trick (animatable, unlike
height:auto) rather than hidden entirely, so expanding never has to
wait on layout/display swaps. */
.work-detail {
display: grid;
grid-template-rows: 0fr;
overflow: hidden;
/* A CSS transition takes its duration/timing-function from whichever
rule the animated property is transitioning *into* -- so this
(the closed/base state) is what runs when the card is minimising.
Linear rather than ease-out-expo: ease-out's whole point is a slow
tail as it settles, which just reads as sluggish on the way down. */
transition: grid-template-rows 0.5s linear;
cursor: pointer;
}
/* .work-detail is no longer the immediate next sibling of
.work-toggle (see .work-desc in between, added for the description
type-out), so this keys off the card as a whole rather than a "+"
adjacent-sibling selector -- a plain "+" here would just silently
never match. */
.work-card:has(.work-toggle[aria-expanded="true"]) .work-detail {
grid-template-rows: 1fr;
transition: grid-template-rows 0.5s var(--ease-out-expo);
}
.work-detail-inner {
min-height: 0;
display: flex;
flex-direction: column;
gap: 0.5em;
padding: 0 var(--space-md) var(--space-md);
opacity: 0;
transition: opacity 0.3s var(--ease-out-expo);
}
/* With box-sizing:border-box, an element can't shrink below its own
padding no matter what min-height says -- so .work-detail-inner's
own bottom padding was silently flooring the "collapsed" .work-detail
row at var(--space-md) instead of the true 0 the 0fr trick above is
going for (invisible since this box is opacity:0 while closed, but
still real layout height, stacking on top of the .work-desc/.work-tags
gap this whole file section is about). Dropping it only while closed
-- restored the instant the card opens, for its normal breathing
room above the enquire button. */
.work-card:not(:has(.work-toggle[aria-expanded="true"])) .work-detail-inner {
padding-bottom: 0;
}
.work-card:has(.work-toggle[aria-expanded="true"]) .work-detail-inner {
opacity: 1;
transition-delay: 0.15s;
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 0.4em;
}
.tags li {
font-size: 0.75rem;
color: var(--muted);
background: var(--surface-2);
padding: 0.3em 0.8em;
border-radius: 999px;
font-weight: 600;
}
.work-enquire {
display: inline-flex;
align-self: flex-start;
align-items: center;
gap: 0.5em;
margin-top: 0.3em;
padding: 0.65em 0.9em;
border-radius: 999px;
/* Flat fill, plus a black border whose own alpha fades top-to-bottom
-- see the comment on .btn-primary for the double-background-clip
trick and why background-color's own backstop matters here. */
background:
linear-gradient(var(--yellow), var(--yellow)) padding-box,
linear-gradient(to top, oklch(0 0 0 / 0.10), oklch(0 0 0 / 0.06)) border-box;
background-color: var(--yellow);
border: 0.15rem solid transparent;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: var(--navy);
cursor: pointer;
transition: transform 0.25s var(--ease-back);
}
.work-enquire svg {
/* Visually first without touching DOM/reading order -- the icon
stays aria-hidden and after the label in markup, order:-1 just
flips where it paints in this flex row. */
order: -1;
width: 20px;
height: 20px;
flex-shrink: 0;
transition: transform 0.25s var(--ease-out-expo);
}
.work-enquire:hover, .work-enquire:focus-visible {
transform: translateY(-2px);
}
/* Nudges left (away from the label) rather than right now that the
icon leads instead of trails -- reads as the envelope "sending"
off to the side instead of drifting back into the text. */
.work-enquire:hover svg, .work-enquire:focus-visible svg { transform: translateX(-3px); }
/* A work-card's inner horizontal breathing room (.work-heading,
.work-desc, .work-foot, .work-detail-inner) all share var(--space-md)
-- 2rem, tuned for the grid's desktop card width. On phones the card
is nearly the full viewport width, so that same 2rem reads as
proportionally too much inset; tightened to 1.75rem here rather than
touching --space-md itself, which plenty of unrelated spacing
elsewhere also depends on. */
@media (max-width: 600px) {
.work-heading { padding: 1.75rem 1.75rem 0.2em; }
.work-desc { padding: 0 1.75rem var(--space-sm); }
.work-foot { padding: 0 1.75rem 1.75rem; }
/* padding-bottom here is moot while the card's closed -- the
existing .work-card:not(:has(...)) .work-detail-inner rule (higher
specificity, see its own comment above) still zeroes it out
regardless of this value, same as at desktop widths. */
.work-detail-inner { padding: 0 1.75rem 1.75rem; }
}
/* ── About ───────────────────────────────────────────────────────────── */
.about-lede {
font-size: 1.15rem;
line-height: 1.75;
max-width: 70ch;
}
.about-lede strong { color: var(--teal-ink); font-weight: 700; }
/* ── Showreel ────────────────────────────────────────────────────────── */
/* Floats as a control bar over the vertical center of the slideshow
rather than sitting in its own row above the frame -- each tab
doubles as that category's play button (see js/main.js), so a dark,
blurred backdrop keeps the pill legible over whatever photo happens
to be showing. top:50% + translateY(-50%) centers it regardless of
its own height; on play, .is-playing swaps both to slide the whole
bar up and out above the frame instead, clearing it so the Vimeo
iframe underneath is unobstructed -- .reel-stage has no
overflow:hidden of its own, so the bar is free to travel past the
frame's top edge rather than getting clipped. */
.reel-tabs {
position: absolute;
left: var(--space-sm);
right: var(--space-sm);
top: 50%;
transform: translateY(-50%);
z-index: 2;
display: flex;
justify-content: center;
gap: 0.6em;
flex-wrap: wrap;
transition: top 0.5s var(--ease-out-expo), transform 0.5s var(--ease-out-expo);
}
.reel-tabs.is-playing {
top: 0;
transform: translateY(calc(-100% - var(--space-md) - var(--space-sm)));
}
.reel-tab {
display: inline-flex;
align-items: center;
flex-shrink: 0;
gap: 0.6em;
font-family: inherit;
font-size: 1.3rem;
font-weight: 700;
text-shadow: 1px 1px 7px rgba(0, 0, 0, 0.5);
white-space: nowrap;
padding: 0.75em 1.5em 0.75em 1.1em;
border-radius: 999px;
border: 1.5px solid oklch(1 0 0 / 0.25);
border: 4px solid rgb(0 173 181 / 50%);
background: oklch(0.2 0.03 230 / 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #fff;
cursor: pointer;
transition: transform 0.25s var(--ease-back), background-color 0.2s var(--ease-out-expo), border-color 0.2s var(--ease-out-expo), color 0.2s var(--ease-out-expo), font-size 0.5s var(--ease-out-expo), padding 0.5s var(--ease-out-expo);
}
.reel-tab-play {
flex-shrink: 0;
width: 18px;
height: 18px;
border-radius: 50%;
background: oklch(1 0 0 / 0.18);
padding: 6px;
box-sizing: content-box;
transition: background-color 0.2s var(--ease-out-expo), width 0.5s var(--ease-out-expo), height 0.5s var(--ease-out-expo), padding 0.5s var(--ease-out-expo);
}
.reel-tab:hover {
transform: scale(1.06);
border: 4px solid rgb(0 173 181 / 80%);}
.reel-tab:hover .reel-tab-play { background: var(--teal); }
.reel-tab.is-active {
background: var(--teal);
border-color: var(--teal);
color: var(--navy);
}
.reel-tab.is-active .reel-tab-play { background: oklch(1 0 0 / 0.3); }
/* Once playback moves the bar up out of the frame (.is-playing above),
shrink the tabs -- they're no longer the focal control, just a small
category switcher sitting above the video. */
.reel-tabs.is-playing .reel-tab {
font-size: 1rem;
padding: 0.55em 1.1em 0.55em 0.85em;
}
.reel-tabs.is-playing .reel-tab-play {
width: 14px;
height: 14px;
padding: 5px;
}
/* Below ~600px the frame itself is short (16:9 at phone width), so
floating the tab bar over its vertical center -- or sliding it up
just above the frame once playing -- leaves too little room: three
pills at this size either overflow the frame's edges or crowd right
up against the section heading above. Simplest fix is to stop
overlaying altogether and let the bar sit in normal flow right
above the frame instead (see the markup order in index.html), in
both states. */
@media (max-width: 600px) {
/* flex:1 on each pill below is what actually guarantees the row
fills 100% of the width, growing/shrinking the three pills to
divide up whatever space exists -- font-size here (not on
.reel-tab) is just for readability across the range now, not
doing double duty as the thing that has to add up to "fits the
row" the way it did before (padding/vw-tuning could get close but
always left a gap once the font hit its clamp() ceiling and
stopped growing while the available width kept climbing). Still in
em below (gap, padding, .reel-tab-play's size) so the whole bar
scales together off this one value. */
.reel-tabs,
.reel-tabs.is-playing {
position: static;
transform: none;
margin-bottom: var(--space-sm);
font-size: clamp(0.8rem, 4.2vw, 1.3rem);
gap: 0.18em;
/* Break out of the section's own horizontal padding to 95% of the
viewport, rather than sitting inset with the heading/frame above
and below it -- width:95vw plus this margin (the standard
"center a vw-wide element regardless of its padded parent" pair)
instead of the negative-margin trick .reel-frame uses further
down, since that one specifically targets 100% edge-to-edge and
cares about scrollbar-width drift; 95vw has slack to spare. */
width: 95vw;
margin-left: calc(50% - 47.5vw);
}
.reel-tab,
.reel-tabs.is-playing .reel-tab {
/* flex-basis:auto (the "1 1 auto" shorthand below), not 0 -- each
pill starts from its own content width (so "Events" stays
narrower than "Education") and only the leftover space beyond
that gets split, equally in *amount* added to each rather than
forcing all three to the same final width. Padding is one shared
value across all three (below), so once width isn't artificially
equalized, the padding actually looks even too instead of
"Events" reading as more padded than the longer words. */
flex: 1 1 auto;
justify-content: center;
/* .reel-tab has its own font-size at every other breakpoint (1.3rem
base, 1rem once playing) -- inherit here specifically so it picks
up .reel-tabs' clamp() above instead of one of those fixed values. */
font-size: inherit;
gap: 0.16em;
padding: 0.7em 0.3em;
}
/* Bare triangle at this size -- no circle badge -- both to match the
request and because the badge's own padding was most of what
wouldn't let all three pills fit on one line. em-sized so it scales
with the rest of the bar (see above) instead of a fixed px value. */
.reel-tab-play,
.reel-tabs.is-playing .reel-tab-play {
width: 1.15em;
height: 1.15em;
background: none;
padding: 0;
}
/* Less clearance before the tab row than the desktop default (--space-lg,
4rem) -- that much gap between the intro text and the Events/
Education/Animation buttons reads as too much empty space on a
short phone viewport. */
.reel > .section-head { margin-bottom: var(--space-md); }
/* The tab bar never overlays the frame at this width (see above), so
it never needs the extra clearance .reel.is-playing reserves above. */
.reel.is-playing > .section-head { margin-bottom: var(--space-lg); }
/* Break the frame out of the section's own side padding so it runs
full-bleed edge to edge. Cancels out --section-pad-x with an equal
negative margin rather than the more common 100vw +
translateX(-50%) trick -- 100vw includes the scrollbar's width,
which the section's own padding-driven layout doesn't, so that
trick overshoots and drifts the frame sideways on any page with a
vertical scrollbar (this one). Heading text and the tabs/share
button below keep the normal inset; only the video goes edge to
edge. */
.reel-frame {
margin-inline: calc(-1 * var(--section-pad-x));
border-radius: 0;
}
}
.reel-stage {
position: relative;
z-index: 1;
}
.reel-frame {
position: relative;
z-index: 1;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
overflow: hidden;
background: var(--navy);
border: 1px solid oklch(1 0 0 / 0.12);
/* Before anything's playing, clicking anywhere on the poster/
slideshow starts the first tab (see the reelFrame click handler
in main.js) -- the tabs floating on top are still the more
deliberate pick target, but the frame itself is clickable too at
every width now, not just below the ~600px breakpoint where they
stop overlaying it. */
cursor: pointer;
}
.reel-poster {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Fading slideshow filling the frame, with the tab bar (play buttons)
floating on top -- built from whatever images main.js finds listed
in the current tab's data-slideshow folder manifest (see
scripts/build-slideshow-manifest.js; falls back to the plain static
poster above if no manifest loads). Each .reel-slide is a full .reel-
poster image absolutely stacked on the others; .is-active crossfades
it in via opacity while the rest sit at 0. */
.reel-slideshow {
position: relative;
width: 100%;
height: 100%;
}
.reel-slide {
position: absolute;
inset: 0;
opacity: 0;
z-index: 0;
transition: opacity 1.2s ease;
}
.reel-slide.is-active {
opacity: 1;
z-index: 1;
}
/* Covers the preloaded-but-paused iframe (see playReel() in main.js)
so Vimeo's own transport bar stays hidden until playback starts --
the iframe underneath keeps loading regardless, so this is purely
visual, not a delay. */
.reel-play-cover {
position: absolute;
inset: 0;
z-index: 1;
/* A , not an actual button/link, so the global a/button rule
near the top of this file doesn't reach it -- but main.js gives it
a click handler and cursor:pointer, so it needs the same treatment. */
-webkit-tap-highlight-color: transparent;
}
/* The centered play button (main.js builds it with the exact same
markup as an inactive reel-tab -- icon + label) is a literal
duplicate of e.g. the "Education" pill above, just scaled up and
centered over the frame -- transform:scale keeps every proportion
(padding, icon, text) identical to the tab it's copying rather than
re-deriving sizing by hand. Starts in the tabs' resting (not
.is-active) look and lights up teal on hover -- keyed off the whole
frame/slideshow, not just the button, so mousing over the preview
image itself is enough to invite the click. */
.reel-play {
position: absolute;
inset: 0;
z-index: 2;
margin: auto;
width: max-content;
height: max-content;
transform: scale(1.6);
}
.reel-frame:hover .reel-play {
transform: scale(1.7);
background: var(--teal);
border-color: var(--teal);
color: var(--navy);
}
.reel-frame:hover .reel-play .reel-tab-play {
background: oklch(1 0 0 / 0.3);
}
.reel-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.reel-link {
position: relative;
z-index: 1;
display: inline-block;
margin-top: var(--space-sm);
color: var(--teal);
font-size: 0.9rem;
font-weight: 700;
transition: opacity 0.25s var(--ease-out-expo);
}
.reel-link:hover, .reel-link:focus-visible { opacity: 0.7; }
/* Enquire + share, side by side once a reel's playing -- sits below
the frame, centred as its own row so it reads as a deliberate pair
of calls to action rather than a footnote link. */
/* Collapsed to zero height by default (0fr/1fr grid-row trick, same
idea as .work-detail) rather than just opacity:0 on the buttons
themselves -- there's nothing to enquire about or share until a
reel's actually playing (see .reel.is-playing, set by main.js once
playback starts), so the space below the frame stays tight until
then instead of reserving full button height for something that
doesn't exist yet. Grows open only once playback starts. */
.reel-share-wrap {
display: grid;
grid-template-rows: 0fr;
/* A grid item's margin still counts toward its track's rendered
size even with min-height:0 on the item (min-height:0 only drops
the *content*-driven automatic minimum -- see the .work-detail-inner
comment above for the same gotcha with padding) -- so the
var(--space-md) gap above the row lives here, on the wrapper's own
padding-top, instead of as the row's margin-top. Padding on the
wrapper is independent of the row-track sizing, so it only grows
in step with grid-template-rows via its own transition, rather
than permanently flooring the collapsed height. */
padding-top: 0;
overflow: hidden;
/* overflow itself doesn't need to (and, being a discrete property,
can't smoothly) animate -- 0s duration with a delay matching the
grid-row grow above just holds it clipped throughout that
animation, then flips to visible right as it finishes, same
technique commonly used to delay a visibility:hidden switch. */
transition: grid-template-rows 0.4s var(--ease-out-expo), padding-top 0.4s var(--ease-out-expo), overflow 0s 0.4s;
}
.reel.is-playing .reel-share-wrap {
grid-template-rows: 1fr;
padding-top: var(--space-md);
/* Once open there's nothing left to enforce the 0fr collapse trick
against, so nothing needs clipping any more -- switching to
visible here is what stops .reel-enquire/.reel-share's own hover
scale(1.06) (see below) from getting its bottom edge (border
included) shaved off by this wrapper's overflow, since the row
was otherwise sized to fit them at exactly their un-scaled size
with zero headroom to grow into on hover. */
overflow: visible;
}
.reel-actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.75em;
/* The grid item .reel-share-wrap actually collapses (see above) --
needs the same min-height:0 override itself, one level down, or
its own automatic content-driven minimum would floor the row
short of true 0 same as everything else on this page's collapse
tricks. */
min-height: 0;
}
.reel-enquire,
.reel-share {
position: relative;
z-index: 1;
display: flex;
width: fit-content;
align-items: center;
gap: 0.6em;
/* Vertical padding is each button's own remaining contribution to
.reel-share-wrap's collapsed height (a border-box element can't
shrink below its own padding regardless of any ancestor's
min-height -- same gotcha as the wrapper's margin above), so it's
0 by default and only opens up once playing, same as the
wrapper's grid-row/padding-top. Horizontal padding stays fixed --
it doesn't affect the row's height either way. */
padding: 0 1.1em;
border-radius: 999px;
font-family: inherit;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: transform 0.25s var(--ease-back), box-shadow 0.25s var(--ease-out-expo), opacity 0.3s var(--ease-out-expo), padding 0.4s var(--ease-out-expo), background-color 0.2s var(--ease-out-expo), border-color 0.2s var(--ease-out-expo);
}
.reel.is-playing .reel-enquire,
.reel.is-playing .reel-share {
padding-top: 0.8em;
padding-bottom: 0.8em;
opacity: 1;
pointer-events: auto;
}
/* Primary -- same yellow pill as a work-card's own "Enquire about
this" (.work-enquire, reused here for its data-project click
handler in main.js too, see the click handler up near the top of
this file's ── Buttons ── section), so it reads as the same action
wherever it appears on the page. */
.reel-enquire {
/* Cancels out .work-enquire's own align-self/margin-top (this
button carries that class too, purely so main.js's generic
data-project click handler picks it up -- see the comment above)
which would otherwise misalign it against .reel-share in this
centred row. */
align-self: auto;
margin: 0;
/* Flat fill, plus a black border whose own alpha fades top-to-bottom
-- see the comment on .btn-primary. Overrides .work-enquire's own
copy of this (same border-radius/border still apply from there,
since this rule doesn't touch those properties). */
background:
linear-gradient(var(--yellow), var(--yellow)) padding-box,
linear-gradient(to bottom, oklch(0 0 0 / 0.28), oklch(0 0 0 / 0.06)) border-box;
background-color: var(--yellow);
color: var(--navy);
box-shadow: 0 6px 16px -6px oklch(0 0 0 / 0.4);
}
.reel-enquire:hover, .reel-enquire:focus-visible {
transform: scale(1.06);
box-shadow: 0 10px 24px -6px oklch(0 0 0 / 0.5);
}
/* Secondary -- a ghost pill (same idea as .btn-ghost) rather than a
second solid yellow fill sitting right next to the first: two
identical bright CTAs side by side would leave neither reading as
the primary one. */
.reel-share {
border: 1.5px solid oklch(1 0 0 / 0.5);
background: transparent;
color: #fff;
}
.reel-share:hover, .reel-share:focus-visible {
transform: scale(1.06);
border-color: #fff;
background: oklch(1 0 0 / 0.08);
}
/* ── Services ────────────────────────────────────────────────────────── */
.service-list {
border-top: 1px solid var(--surface-2);
}
.service-row {
display: grid;
grid-template-columns: 1.1fr 1.4fr auto;
gap: var(--space-md);
align-items: center;
padding: var(--space-md) 0;
border-bottom: 1px solid var(--surface-2);
border-left: 3px solid transparent;
transition: padding-left 0.3s var(--ease-out-expo), background-color 0.3s var(--ease-out-expo), border-left-color 0.3s var(--ease-out-expo);
}
.service-row:hover {
padding-left: var(--space-sm);
background: var(--surface);
border-left-color: var(--pink);
}
.service-row h3 {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.01em;
}
.service-row p {
color: var(--muted);
font-size: 0.95rem;
max-width: 50ch;
}
.service-row .tags { justify-content: flex-end; margin-top: 0; }
.service-row .tags li { color: var(--pink-ink); background: var(--pink-tint); }
@media (max-width: 760px) {
.service-row {
grid-template-columns: 1fr;
gap: 0.6em;
}
.service-row .tags { justify-content: flex-start; }
}
/* ── Contact ─────────────────────────────────────────────────────────── */
.contact {
position: relative;
overflow: hidden;
text-align: center;
background: linear-gradient(180deg, oklch(0.69 0.12 200), var(--teal) 45%);
color: #fff;
border-radius: var(--radius-lg);
margin: 0 clamp(var(--space-sm), 6vw, var(--space-xl)) var(--section-pad-y);
/* The fixed nav (~60px tall) would otherwise sit flush over the
rounded top edge when jumping straight to #contact -- this clears
it with room to spare so the curve lands fully below the bar. */
scroll-margin-top: 5.5rem;
}
@media (max-width: 780px) {
/* Full-bleed on narrow screens -- the side margins and rounded
corners just read as wasted padding once the box is nearly as
wide as the viewport anyway. Heading/copy/email button switch to
left-aligned at the same point -- centered text over a
near-full-width block reads oddly once it's this close to the
viewport edges, unlike on desktop where the box is visibly
inset. The form further down (.contact-form) already sets its
own text-align and isn't affected by this. */
.contact {
margin-left: 0;
margin-right: 0;
border-radius: 0;
text-align: left;
/* The base 5.5rem exists to clear the rounded top corner (see its
own comment above) -- moot here since border-radius is 0 at this
width anyway, so it was just leaving a large gap of plain
background between the nav and the heading for no reason. Tight
enough to clear the nav itself (~57px) with a small gap -- minus
another ~10px on top of that (matching .reel/.work's own mobile
adjustment), landed a little high otherwise. */
scroll-margin-top: calc(4rem - 10px);
}
}
.contact h2 {
font-size: clamp(2rem, 5vw, 3.4rem);
font-weight: 800;
letter-spacing: -0.02em;
}
.contact p {
color: oklch(1 0 0 / 0.9);
max-width: 46ch;
margin: var(--space-sm) auto 0;
font-weight: 500;
}
@media (max-width: 780px) {
/* margin:auto centers the paragraph as a block regardless of the
parent's text-align (see .contact's own left-align above) --
needs its own override, placed after the base rule above so it
actually wins the cascade at this width. */
.contact p { margin-left: 0; margin-right: 0; }
}
.contact-links {
display: flex;
gap: var(--space-md);
justify-content: center;
font-size: 0.9rem;
font-weight: 600;
color: oklch(1 0 0 / 0.85);
}
.contact-links a { transition: opacity 0.25s var(--ease-out-expo); }
.contact-links a:hover, .contact-links a:focus-visible { opacity: 0.7; }
/* ── Contact form ────────────────────────────────────────────────────── */
/* Flip card: front face is the live form, back face is a "Posted"
thank-you revealed by rotating the whole card 180° on submit (see
main.js flipToThankYou()). JS sets an explicit height on
.contact-flip before flipping so the card doesn't jump (the back
face is absolutely positioned, so it can't otherwise size itself). */
.contact-flip {
position: relative;
z-index: 1;
margin: var(--space-sm) auto 0;
max-width: 560px;
perspective: 1800px;
}
.contact-flip-inner {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.9s var(--ease-back);
}
.contact-flip.is-sent .contact-flip-inner { transform: rotateY(180deg); }
.contact-flip-front,
.contact-flip-back {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.contact-flip-back {
position: absolute;
inset: 0;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.4em;
background: var(--bg);
color: var(--ink);
border-radius: var(--radius-lg);
padding: var(--space-md);
box-shadow: 0 30px 60px -20px oklch(0.2 0.03 230 / 0.35);
}
.postmark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 84px;
height: 84px;
border: 3px dashed var(--teal);
border-radius: 50%;
color: var(--teal-ink);
font-weight: 800;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.04em;
transform: rotate(-12deg) scale(0);
margin-bottom: 0.2em;
}
.contact-flip.is-sent .postmark {
animation: postmark-stamp 0.5s var(--ease-back) 0.55s forwards;
}
@keyframes postmark-stamp {
to { transform: rotate(-12deg) scale(1); }
}
.flip-thanks {
font-size: clamp(1.8rem, 4vw, 2.4rem);
font-weight: 800;
}
.flip-thanks .letter {
display: inline-block;
opacity: 0;
transform: translateY(14px);
}
.contact-flip.is-sent .flip-thanks .letter {
animation: letter-rise 0.5s var(--ease-back) forwards;
animation-delay: calc(0.75s + var(--i, 0) * 45ms);
}
@keyframes letter-rise {
to { opacity: 1; transform: translateY(0); }
}
.contact-flip-back p {
color: var(--muted);
max-width: 32ch;
}
.contact-form {
position: relative;
text-align: left;
background: var(--bg);
color: var(--ink);
border-radius: var(--radius-lg);
padding: var(--space-md);
display: flex;
flex-direction: column;
gap: var(--space-sm);
box-shadow: 0 30px 60px -20px oklch(0.2 0.03 230 / 0.35);
}
@media (max-width: 600px) {
/* --space-sm is half of --space-md -- the form's own sides don't
need to double up on the section's mobile-reduced side padding. */
.contact-form { padding-left: var(--space-sm); padding-right: var(--space-sm); }
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-sm);
}
@media (max-width: 800px) {
.form-row { grid-template-columns: 1fr; }
}
.form-field {
display: flex;
flex-direction: column;
gap: 0.35em;
font-size: 0.85rem;
font-weight: 700;
text-align: left;
}
.form-field span { color: var(--muted); }
.form-field input,
.form-field select,
.form-field textarea {
font-family: inherit;
font-size: 0.95rem;
font-weight: 500;
color: var(--ink);
background: var(--surface);
border: 1.5px solid var(--surface-2);
border-radius: var(--radius-sm);
padding: 0.7em 0.9em;
transition: border-color 0.2s var(--ease-out-expo);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
outline: none;
border-color: var(--teal);
}
.form-field textarea { resize: vertical; }
.form-field input.is-invalid,
.form-field textarea.is-invalid {
border-color: var(--pop-red);
}
.field-error {
font-size: 0.8rem;
font-weight: 600;
color: var(--pop-red);
}
.field-error:empty { display: none; }
.iron-triangle {
border: 0;
border-radius: var(--radius-md);
padding: var(--space-sm) 0;
text-align: center;
}
.iron-triangle-body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.iron-triangle legend {
font-size: 0.85rem;
font-weight: 700;
color: var(--muted);
padding: 0 0.3em;
margin: 0 auto;
}
.iron-triangle-options {
display: flex;
gap: 0.6em;
flex-wrap: wrap;
justify-content: center;
}
.iron-toggle {
font-family: inherit;
font-size: 0.9rem;
font-weight: 700;
padding: 0.55em 1.1em 0.65em 0.66em;
border-radius: 999px;
border: 3px solid var(--surface-2);
background: var(--surface);
color: var(--ink);
cursor: pointer;
transition: transform 0.25s var(--ease-back), background-color 0.2s var(--ease-out-expo), border-color 0.2s var(--ease-out-expo), color 0.2s var(--ease-out-expo);
}
/* scale(), not translateY() -- a vertical lift physically moves the
button away from a cursor parked near its bottom edge, un-hovering
it, which drops it back onto the cursor and re-triggers hover in a
jittering loop. Scaling from center never moves an edge away from
the pointer that's already over it. */
.iron-toggle:hover { transform: scale(1.06); }
.iron-toggle.is-selected {
background: var(--pink);
border-color: var(--pink);
color: #fff;
}
.iron-toggle.is-bounce { animation: iron-bounce 0.35s var(--ease-back); }
@keyframes iron-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px) rotate(-4deg); }
}
/* Hidden until a third pick is attempted, then slides open -- see
main.js (adds .is-revealed on the bump path). The grid-template-rows
0fr -> 1fr trick animates smoothly to the content's natural height
without needing to measure it in JS. */
.iron-triangle-note-wrap {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.5s var(--ease-back);
}
.iron-triangle-note-wrap.is-revealed { grid-template-rows: 1fr; }
.iron-triangle-note-wrap .iron-triangle-note {
overflow: hidden;
min-height: 0;
margin: 0.6em 0 0;
font-size: 0.85rem;
font-weight: 600;
color: var(--muted);
}
/* .contact-form's own flex gap (see above) inserts the usual
--space-sm above every child including this one -- pull it back out
specifically here so the submit button sits flush under whatever
precedes it instead. */
.form-submit {
align-self: center;
margin-top: calc(-1 * var(--space-sm));
/* Overrides .btn-accent's own shadow (both resting and hover) --
scoped to this button specifically so the hero CTA sharing that
class keeps its shadow. */
box-shadow: none;
}
.form-submit:hover { box-shadow: none; }
/* Filled in by main.js, not this markup -- see the comment there for
why (keeping the literal address out of the page source deters the
simple regex-scraping bots that most email harvesting relies on). */
.contact-email {
align-self: center;
color: var(--muted);
font-size: 0.85rem;
font-weight: 600;
}
.contact-email:hover, .contact-email:focus-visible { color: var(--teal-ink); }
.form-status {
text-align: center;
font-size: 0.9rem;
font-weight: 600;
}
.form-status.is-success { color: var(--teal-ink); }
.form-status.is-error { color: var(--pop-red); }
/* ── Footer ──────────────────────────────────────────────────────────── */
.site-footer {
text-align: center;
padding: var(--space-md) var(--space-sm) var(--space-lg);
}
/* Photo + bio as one centred row -- text-align:left inside so the
copy wraps naturally next to the photo rather than re-centering
itself line by line under the site-footer's own centered text. */
.footer-bio {
display: flex;
/* stretch (the flex default, spelled out here since it'd otherwise
read as an oversight) is what makes .footer-bio-photo match the
text's own height below -- align-items:center would instead give
the photo only its own intrinsic (width-driven) height. */
align-items: stretch;
gap: var(--space-sm);
max-width: 52ch;
margin: 0 auto var(--space-md);
text-align: left;
}
.footer-bio-photo {
position: relative;
flex-shrink: 0;
width: 110px;
/* No explicit height -- stretch (above) sizes it to match
.footer-bio-text's own height instead, however many lines that
ends up being. */
border-radius: var(--radius-md);
overflow: hidden;
background: var(--surface-2);
}
/* Fading photo slideshow, same idea as .reel-slide/.work-media-slide --
each slide stacks absolutely over the others; .is-active crossfades
it in via opacity while the rest sit at 0. Cycled by main.js. */
.footer-bio-slide {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 1.2s ease;
}
.footer-bio-slide.is-active { opacity: 1; }
.footer-bio-text {
color: var(--ink);
font-size: 0.95rem;
font-weight: 500;
line-height: 1.6;
}
@media (max-width: 480px) {
/* The row still fits two-up at phone widths (the photo's small and
the text wraps), just tighter -- only drops to a smaller photo
rather than stacking, so the bio still reads as one connected
unit instead of a photo sitting orphaned above a paragraph. */
.footer-bio-photo { width: 84px; }
}
.footer-copy {
color: var(--muted);
font-size: 0.8rem;
font-weight: 500;
}