/* =========================================================
PUCAR — The Litigant's Journey
Palette + aesthetic borrowed from pucar.org (warm, paper,
editorial), storytelling scroll mechanic inspired by
only8.org (fixed subject, scrolling world, stat beats).
========================================================= */
:root{
/* colour: PUCAR brand — warm paper base + ink, dominant accent
green #30CF8C (also the logo mark colour) with a dark-green
ink used for deep/pinned backgrounds instead of navy, and a
secondary pink accent #DA6EAA for highlights/labels.
Old variable names (--navy, --terracotta, --gold) are kept as
aliases pointing at the new brand colours so every existing
rule that referenced them repaints correctly with no renames
needed at each call site. */
--cream: #F6F1E6;
--cream-deep: #ECE2CE;
--paper: #FBF8F2;
--ink: #241E1A;
--ink-soft: #55493F;
--muted: #8A7E6E;
--green: #30CF8C; /* dominant accent — matches the logo mark */
--green-soft: #CCEBDE; /* pale tint of --green */
--pink: #DA6EAA; /* secondary accent */
--pink-soft: #F1D0E2; /* pale tint of --pink */
--forest: #111F26; /* dark teal-green background, sampled from user swatch */
--forest-deep: #0A151A; /* darkest shade of --forest */
/* aliases: keep pre-existing rules working unchanged */
--navy: var(--forest);
--navy-deep: var(--forest-deep);
--terracotta: var(--green);
--terracotta-soft: var(--green-soft);
--gold: var(--pink);
--line: rgba(36,30,26,0.12);
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--pin-pad: clamp(20px, 5vw, 72px);
}
*,*::before,*::after{ box-sizing:border-box; }
html{
scroll-behavior:smooth;
}
body{
margin:0;
background:var(--cream);
color:var(--ink);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
a{ color:inherit; }
h1,h2,h3{
font-family:var(--font-display);
margin:0;
line-height:1.05;
font-weight:500;
}
p{ margin:0; }
sup{ font-size:.55em; opacity:.6; font-style:italic; }
/* ---------------- header ---------------- */
.site-header{
/* ABSOLUTE, not fixed: the logo lives in the header flow and scrolls away
with the page (explicit request -- "the logo doesn't need to be
sticky"). The nav + CTA are pulled out and pinned separately below. */
position:absolute;
top:0; left:0; right:0;
z-index:50;
display:flex;
align-items:center;
justify-content:space-between;
padding: 18px clamp(20px,4vw,48px);
pointer-events:none;
}
/* ---- ecosystem switcher: caret beside the logo opens a dark panel
linking to the sibling Agami missions (modelled on opennyai.org's).
Pure CSS hover/focus-within; hidden on phones. ---- */
.brand-switch{
position:relative;
pointer-events:auto;
align-self:center;
/* hug the logo on the left, push the nav cluster back to the right */
margin:0 auto 0 8px;
}
.brand-switch-btn{
display:inline-flex;
align-items:center;
justify-content:center;
width:28px;
height:28px;
border:0;
border-radius:50%;
background:transparent;
color:var(--ink-soft);
cursor:pointer;
transition:background .2s ease, color .2s ease;
}
.brand-switch-btn svg{ transition:transform .25s ease; }
.brand-switch:hover .brand-switch-btn,
.brand-switch:focus-within .brand-switch-btn{ background:rgba(36,30,26,.08); }
.brand-switch:hover .brand-switch-btn svg,
.brand-switch:focus-within .brand-switch-btn svg{ transform:rotate(180deg); }
/* dark-half flip, same conditions as the logo/nav */
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .brand-switch-btn{
color:rgba(251,248,242,.85);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .brand-switch:hover .brand-switch-btn{
background:rgba(251,248,242,.14);
}
/* invisible bridge so the pointer can travel from caret to panel */
.brand-switch::after{
content:"";
position:absolute;
top:100%;
left:0;
width:100%;
height:12px;
}
.brand-menu{
position:absolute;
top:calc(100% + 10px);
left:-8px;
min-width:282px;
padding:14px 20px 10px;
background:var(--forest); /* dark panel: the sibling logos are white/colour-on-dark */
border:1px solid rgba(251,248,242,.14);
border-radius:16px;
box-shadow:0 24px 60px rgba(17,31,38,.4);
opacity:0;
translate:0 8px;
/* GRACE PERIOD on close: the panel lingers ~0.55s after the pointer
leaves (visibility waits even longer), so drifting off the caret and
back doesn't force a re-engage. Hit-testing stays on while visible,
so re-entering the panel during the grace cancels the close. */
visibility:hidden;
transition:opacity .25s ease .55s, translate .25s ease .55s, visibility 0s linear .8s;
z-index:60;
}
.brand-switch:hover .brand-menu,
.brand-switch:focus-within .brand-menu{
opacity:1;
translate:0 0;
visibility:visible;
transition:opacity .22s ease, translate .22s ease, visibility 0s;
}
.brand-menu-label{
margin:0 0 4px;
font-size:.62rem;
font-weight:800;
letter-spacing:.16em;
text-transform:uppercase;
color:var(--green);
}
.brand-menu-item{
display:block;
padding:13px 2px;
}
.brand-menu-item + .brand-menu-item{ border-top:1px solid rgba(251,248,242,.12); }
.brand-menu-item img{
display:block;
height:24px;
width:auto;
opacity:.88;
transition:opacity .2s ease, transform .2s ease;
}
.brand-menu-item:hover img,
.brand-menu-item:focus-visible img{ opacity:1; transform:translateX(2px); }
/* two-line blurb slides open under the hovered logo */
.brand-menu-desc{
display:block;
/* fills the panel width; no ch cap (it left a dead right gutter) */
font-size:.78rem;
line-height:1.45;
color:rgba(251,248,242,.65);
max-height:0;
opacity:0;
overflow:hidden;
margin-top:0;
/* EXIT: text fades first, then the space closes smoothly under it */
transition:max-height .32s cubic-bezier(.4,.1,.2,1) .05s, opacity .16s ease, margin-top .32s cubic-bezier(.4,.1,.2,1) .05s;
}
.brand-menu-item:hover .brand-menu-desc,
.brand-menu-item:focus-visible .brand-menu-desc{
max-height:6.5em; /* room for three full lines, nothing clipped */
opacity:1;
margin-top:9px;
/* ENTER: space opens first, text fades in as it lands */
transition:max-height .3s cubic-bezier(.4,.1,.2,1), opacity .24s ease .1s, margin-top .3s cubic-bezier(.4,.1,.2,1);
}
@media (max-width: 640px){
.brand-switch{ display:none; } /* not needed on phones (explicit) */
}
/* nav + CTA stay pinned: homepage wraps them in .header-right; generated
pages carry a .nav-cluster (main nav + optional page sub-nav) */
.header-right,
body.job-page .site-header > .nav-cluster{
position:fixed;
top:18px;
right:clamp(20px,4vw,48px);
z-index:50;
/* slides up with body.film-playing (the header itself no longer needs
to, the logo has scrolled away by the film) */
transition: translate .55s cubic-bezier(.4,.1,.3,1);
}
.nav-cluster{
pointer-events:auto;
display:flex;
gap:10px;
align-items:flex-start;
}
/* never wrap during the width FLIP: mid-animation widths would otherwise
fold the menu names onto a second line and balloon the pill's height */
.nav-cluster .site-nav{
flex-wrap:nowrap;
white-space:nowrap;
}
/* collapse/expand: a collapsed nav shows ONLY its burger toggle; an
expanded nav hides its toggle (you collapse it by expanding the other) */
.nav-toggle{
display:none;
align-items:center;
gap:8px;
padding:8px 15px;
border:0;
border-radius:999px;
background:transparent;
color:var(--ink-soft);
font:600 .9rem var(--font-body);
letter-spacing:.01em;
cursor:pointer;
white-space:nowrap;
}
.site-nav.is-collapsed > *:not(.nav-toggle){ display:none !important; }
.site-nav.is-collapsed > .nav-toggle{ display:inline-flex; }
/* items stay INVISIBLE until the width FLIP has finished, then fade in --
no text painting mid-animation (delay ~= the 160ms FLIP duration).
NOT the glider: it's a direct child too, and this animation's backwards
fill (opacity:0) OVERRIDES the glider's inline opacity whenever the
animation restarts -- that was the "hover pill disappears, lit text
unreadable" bug on sub-nav clicks. Its opacity is JS-driven only. */
.site-nav.just-in > *:not(.nav-toggle):not(.nav-glider){
/* SCOPED to .just-in, a one-shot class swapNavs() sets on the expanding
nav and removes 500ms later. It used to hang off :not(.is-collapsed),
which let the browser RESTART the animation outside any swap (observed
twice: gliders erased, then clicked links frozen ghost-faint at the
opacity:0 start frame) -- with backwards fill, any restart makes
children invisible. Now it can only run during a real expand. */
animation:navItemsIn .14s ease .16s backwards;
}
@keyframes navItemsIn{
from{ opacity:0; }
to{ opacity:1; }
}
/* while the pills are mid-FLIP no hover state can fire: js/nav.js sets
is-swapping for the animation's duration, which freezes pointer-events
(so :hover/gliders can't land on links that aren't in position yet) */
.nav-cluster.is-swapping .site-nav{ pointer-events:none; }
.nav-cluster.is-swapping .nav-glider{ opacity:0 !important; }
/* sub-nav up-arrow loops on hover, same as the homepage's */
.subnav-top:hover svg,
.subnav-top:focus-visible svg{
animation:navArrowUp 1s ease-in-out infinite;
}
/* sub-nav: same pill, slightly different underlying tint */
.site-nav.sub-nav{
background:rgba(210,236,220,.6);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav.sub-nav{
background:rgba(23,48,40,.62);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .nav-toggle{
color:rgba(251,248,242,.88);
}
body.film-playing .header-right{
translate:0 -120%;
pointer-events:none;
}
body.film-playing .progress-rail{
/* an ABSOLUTE distance, not a %: the rail is only ~20px tall, so the
old 200% moved it ~40px -- not even past its own bottom:28px offset,
which left it peeking over the film. 90px clears offset + height with
room to spare, and the fade covers any transition frame. */
translate:0 90px;
opacity:0;
}
.site-header .logo{
pointer-events:auto;
position:relative;
display:inline-flex;
align-items:center;
text-decoration:none;
}
.site-header .logo img{
display:block;
height:28px; /* nudged down from 34px -- read as too large in the header (footer logo, 22px, is untouched) */
width:auto;
}
/* two variants stacked in place; only one is visible at a time depending on
what's behind the fixed header (see the :has() rules below). Pages without
the scrollytelling story (job/contributor pages) never match those rules,
so they simply show the light-background mark, which is correct there
since those pages are cream throughout. */
.site-header .logo-light,
.site-header .logo-dark{
transition: opacity .6s ease; /* matches .pin's own background-color transition timing */
}
.site-header .logo-dark{
position:absolute;
left:0; top:50%;
transform:translateY(-50%);
opacity:0;
}
body:has(.pin[data-beat="4"]) .site-header .logo-light,
body:has(.pin[data-beat="5"]) .site-header .logo-light,
body:has(.pin[data-beat="6"]) .site-header .logo-light,
body:has(.pin[data-beat="7"]) .site-header .logo-light,
body:has(.pin[data-beat="8"]) .site-header .logo-light,
body:has(.pin[data-beat="9"]) .site-header .logo-light{ opacity:0; }
body:has(.pin[data-beat="4"]) .site-header .logo-dark,
body:has(.pin[data-beat="5"]) .site-header .logo-dark,
body:has(.pin[data-beat="6"]) .site-header .logo-dark,
body:has(.pin[data-beat="7"]) .site-header .logo-dark,
body:has(.pin[data-beat="8"]) .site-header .logo-dark,
body:has(.pin[data-beat="9"]) .site-header .logo-dark{ opacity:1; }
/* both the light and dark marks come in two lengths: full wordmark (+
tagline) on desktop, PUCAR-only below 640px (same breakpoint .site-nav
collapses at). Which length shows is independent of the opacity toggle
above, which only decides whether the light *or* dark colourway shows. */
.site-header .logo img.logo-light-short,
.site-header .logo img.logo-dark-short{ display:none; } /* needs the `img` to out-specify ".logo img{display:block}" above */
.site-nav{
pointer-events:auto;
display:flex;
gap:2px;
/* frosted glass: a light wash + heavy blur/saturate reads well over both
the cream hero and the dark story half; the inset highlight gives the
top edge a glass "catch" */
background:rgba(251,248,242,.52);
backdrop-filter:blur(16px) saturate(1.6);
-webkit-backdrop-filter:blur(16px) saturate(1.6);
border:1px solid rgba(26,26,26,.07);
border-radius:999px;
padding:5px;
box-shadow:
0 12px 32px rgba(17,31,38,.10),
inset 0 1px 0 rgba(255,255,255,.55);
transition:background .45s ease, border-color .45s ease, box-shadow .45s ease;
}
.site-nav a{
text-decoration:none;
font-size:.9rem; /* matches .btn / the Get in touch CTA next to it */
font-weight:600;
letter-spacing:.01em;
color:var(--ink-soft);
padding:8px 15px;
border-radius:999px;
transition:background .22s ease, color .22s ease, box-shadow .22s ease;
}
.site-nav a:hover{
background:var(--forest);
color:var(--paper);
box-shadow:0 4px 12px rgba(17,31,38,.25);
}
/* NOTE the a.nav-home specificity: the generic `.site-nav a` rule declares
its own transition (background/color/box-shadow) which would otherwise
override this one and make the reveal instant. */
.site-nav a.nav-home{
display:inline-flex;
align-items:center;
justify-content:center;
width:0;
padding:8px 0 !important; /* keep the pill height, no horizontal footprint while hidden */
opacity:0;
transform:scale(.5);
overflow:hidden;
/* slow, springy reveal: the slot opens first, then the icon fades/pops in.
On hide everything runs together (no delay) so it melts away. */
transition:width .45s cubic-bezier(.4,.1,.2,1), padding .45s cubic-bezier(.4,.1,.2,1),
opacity .3s ease, transform .45s cubic-bezier(.34,1.4,.44,1),
background .22s ease, color .22s ease;
}
.site-nav.show-home a.nav-home{
width:38px;
padding:8px 8px !important;
opacity:1;
transform:scale(1);
transition-delay:0s, 0s, .12s, .12s, 0s, 0s; /* icon arrives after the slot opens */
}
/* tooltip under the icon (content from data-tip: "Back to Top" on the
homepage arrow, "Home" on other pages' house). The button's
overflow:hidden is lifted once revealed so the tooltip can escape. */
.site-nav.show-home a.nav-home{ overflow:visible; position:relative; }
.nav-home::after{
content:attr(data-tip);
position:absolute;
top:calc(100% + 14px);
left:50%;
translate:-50% 4px;
background:var(--forest);
color:var(--paper);
font-size:.72rem;
font-weight:600;
letter-spacing:.03em;
white-space:nowrap;
padding:6px 12px;
border-radius:9px;
box-shadow:0 10px 24px rgba(17,31,38,.28);
opacity:0;
pointer-events:none;
transition:opacity .18s ease, translate .18s ease;
z-index:70;
}
.nav-home::before{ /* caret */
content:"";
position:absolute;
top:calc(100% + 3px);
left:50%;
translate:-50% 4px;
border:6px solid transparent;
border-bottom-color:var(--forest);
opacity:0;
pointer-events:none;
transition:opacity .18s ease, translate .18s ease;
z-index:70;
}
.site-nav.show-home a.nav-home:hover::after,
.site-nav.show-home a.nav-home:focus-visible::after,
.site-nav.show-home a.nav-home:hover::before,
.site-nav.show-home a.nav-home:focus-visible::before{
opacity:1;
translate:-50% 0;
}
/* the homepage up-arrow drifts upward on loop: rises, fades out at the top,
re-enters from below (#navHome is homepage-only; other pages' house icon
stays still) */
/* loop only on hover/focus -- always-on was distracting */
#navHome:hover svg,
#navHome:focus-visible svg{
animation:navArrowUp 1s ease-in-out infinite;
}
@keyframes navArrowUp{
0% { transform:translateY(5px); opacity:0; }
30% { transform:translateY(1px); opacity:1; }
70% { transform:translateY(-2px); opacity:1; }
100%{ transform:translateY(-6px); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
#navHome svg{ animation:none; }
}
/* ---- glider: a pill that slides between links on hover (homepage only,
js/script.js injects it and adds .has-glider). The plain :hover above
stays as the fallback for generated pages, which don't load script.js. */
.site-nav{ position:relative; }
/* top-level pills only -- .nav-menu-item hovers keep their own bg */
.site-nav.has-glider > a:hover,
.site-nav.has-glider > .nav-drop > a:hover{ background:transparent; box-shadow:none; }
.site-nav.has-glider > a,
.site-nav.has-glider > .nav-drop > a{ position:relative; z-index:1; }
.site-nav.has-glider .nav-drop{ position:static; }
.site-nav.has-glider .nav-drop .nav-menu{ z-index:2; }
.nav-glider{
position:absolute;
z-index:0;
border-radius:999px;
background:var(--forest);
box-shadow:0 4px 12px rgba(17,31,38,.25);
opacity:0;
transition:left .28s cubic-bezier(.5,.1,.2,1), width .28s cubic-bezier(.5,.1,.2,1),
top .28s ease, height .28s ease, opacity .2s ease;
pointer-events:none;
}
.site-nav a.is-lit{ color:var(--paper); }
/* ---- dark-half nav: over the story's dark beats the cream glass pill and
ink text lose contrast, so flip: dark glass, light text, brand-green
glider with dark text (same family as the header CTA's dark-half flip) */
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav{
background:rgba(10,21,26,.55);
border-color:rgba(251,248,242,.16);
box-shadow:0 12px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(251,248,242,.12);
}
/* generated pages: js/nav.js toggles body.nav-dark when the header floats
over a dark section, mirroring the homepage's beat-driven flip -- the
:is(...) selector lists in this block serve both. Logo flips along. */
body.nav-dark .site-header .logo-light{ opacity:0; }
body.nav-dark .site-header .logo-dark{ opacity:1; }
/* top-level pills only: the dropdown panel stays paper with ink text, so its
items must NOT inherit the light-on-dark colours */
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav > a,
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav > .nav-drop > a{
color:rgba(251,248,242,.88);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav > a:hover,
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav > .nav-drop > a:hover{
background:var(--green);
color:var(--forest);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav.has-glider > a:hover,
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav.has-glider > .nav-drop > a:hover{
background:transparent;
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .nav-glider{
background:var(--green);
box-shadow:0 4px 12px rgba(0,0,0,.35);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav > a.is-lit,
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav > .nav-drop > a.is-lit{
color:var(--forest);
}
/* the dropdown panel follows the same flip: dark panel, light text,
green glider/hover with dark text */
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .nav-menu{
background:#0E1B21; /* a step above --forest-deep so it reads as a panel */
border-color:rgba(251,248,242,.14);
box-shadow:0 22px 50px rgba(0,0,0,.5);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .nav-menu-label{
color:rgba(251,248,242,.6);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav .nav-menu-item{
color:var(--paper);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav .nav-menu-item:hover{
background:var(--green);
color:var(--forest);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav .nav-menu.has-glider .nav-menu-item:hover{
background:transparent;
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .nav-menu .menu-glider{
background:var(--green);
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .site-nav .nav-menu .nav-menu-item.is-lit{
color:var(--forest);
}
/* ---------------- Collaborate nav dropdown ---------------- */
.nav-drop{ position:relative; display:inline-flex; }
.nav-drop-trigger{
display:inline-flex;
align-items:center;
gap:6px;
}
.nav-caret{
flex:none;
opacity:.6;
transition:transform .18s ease, opacity .18s ease;
}
.nav-drop:hover .nav-caret,
.nav-drop:focus-within .nav-caret{
transform:rotate(180deg);
opacity:1;
}
.nav-menu{
position:absolute;
top:100%;
right:0;
padding:14px 6px 8px;
margin-top:8px;
min-width:300px;
background:var(--paper);
border:1px solid rgba(26,26,26,.08);
border-radius:16px;
box-shadow:0 22px 50px rgba(17,31,38,.22);
opacity:0;
visibility:hidden;
translate:0 6px;
transition:opacity .18s ease, translate .18s ease, visibility .18s,
background .45s ease, border-color .45s ease, box-shadow .45s ease;
z-index:60;
}
/* bridge the 8px gap so the menu doesn't close mid-travel */
.nav-menu::before{
content:"";
position:absolute;
top:-10px; left:0; right:0; height:10px;
}
.nav-drop:hover .nav-menu,
.nav-drop:focus-within .nav-menu{
opacity:1;
visibility:visible;
translate:0 0;
}
.nav-menu-label{
margin:6px 0 2px;
padding:0 14px;
font-size:.66rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.12em;
color:var(--ink-soft);
opacity:.7;
}
.nav-menu-label + .nav-menu-label,
.nav-menu-item + .nav-menu-label{ margin-top:14px; }
.site-nav .nav-menu-item{
display:flex;
flex-direction:column;
gap:1px;
padding:9px 14px;
border-radius:10px;
color:var(--ink);
font-size:.88rem;
}
.site-nav .nav-menu-item:hover{ background:var(--forest); color:var(--paper); }
.nav-menu-title{ font-weight:600; line-height:1.3; }
/* glider inside the dropdown: same sliding-pill trick as the main bar
(js/script.js adds .has-glider and the .menu-glider element) */
.nav-menu .menu-glider{
position:absolute;
z-index:0;
border-radius:10px;
background:var(--forest);
opacity:0;
pointer-events:none;
transition:top .24s cubic-bezier(.5,.1,.2,1), height .24s cubic-bezier(.5,.1,.2,1),
left .24s ease, width .24s ease, opacity .18s ease;
}
.nav-menu.has-glider .nav-menu-item{ position:relative; z-index:1; }
/* box-shadow too: .site-nav a:hover's shadow would otherwise pop in on the
hovered item before the glider pill has slid over to it */
.nav-menu.has-glider .nav-menu-item:hover{ background:transparent; box-shadow:none; }
.nav-menu .nav-menu-item.is-lit{ color:var(--paper); }
.nav-menu-sub{
font-size:.76rem;
line-height:1.35;
opacity:.65;
}
/* nav + the Get in touch CTA sit together on the right */
.header-right{
pointer-events:auto;
display:flex;
align-items:center;
gap:12px;
}
.header-cta{
border:none;
cursor:pointer;
font-family:var(--font-body);
background:var(--forest);
color:var(--paper);
padding:12px 22px;
transition: background .2s ease, translate .2s ease, box-shadow .2s ease;
}
.header-cta:hover{
background:#1C3540; /* lighter forest -- same hover family as .btn-primary on light */
translate:0 -1px;
box-shadow:0 6px 16px rgba(17,31,38,.3);
}
/* on the story's dark half the forest button would sink into the forest
background -- flip to the bright brand green (dark-bg only, per the
palette rule), same mechanism as the logo swap */
body:has(.pin[data-beat="4"]) .header-cta,
body:has(.pin[data-beat="5"]) .header-cta,
body:has(.pin[data-beat="6"]) .header-cta,
body:has(.pin[data-beat="7"]) .header-cta,
body:has(.pin[data-beat="8"]) .header-cta,
body:has(.pin[data-beat="9"]) .header-cta,
body.nav-dark .header-cta{
background:var(--green);
color:var(--ink);
}
body:has(.pin[data-beat="4"]) .header-cta:hover,
body:has(.pin[data-beat="5"]) .header-cta:hover,
body:has(.pin[data-beat="6"]) .header-cta:hover,
body:has(.pin[data-beat="7"]) .header-cta:hover,
body:has(.pin[data-beat="8"]) .header-cta:hover,
body:has(.pin[data-beat="9"]) .header-cta:hover{
background:#51D79E; /* lighter brand green, matching .btn-primary's dark-bg hover */
box-shadow:0 6px 16px rgba(0,0,0,.3);
}
/* ---------------- contact modal + Netlify form ---------------- */
.contact-panel{ max-width:560px; }
.contact-intro{
margin:6px 0 6px;
font-size:.98rem;
line-height:1.6;
color:var(--ink-soft);
max-width:46ch;
}
.contact-form{ margin-top:10px; }
.contact-form label{
display:flex;
flex-direction:column;
gap:7px;
margin-bottom:16px;
font-size:.85rem;
font-weight:600;
color:var(--ink-soft);
}
.contact-form input,
.contact-form textarea{
font:400 1rem var(--font-body);
color:var(--ink);
background:#fff;
border:1px solid var(--line);
border-radius:12px;
padding:12px 14px;
resize:vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
outline:2px solid var(--forest);
outline-offset:1px;
border-color:var(--forest);
}
/* themed inline validation (replaces the browser's native bubbles) */
.contact-form .is-invalid{
border-color:#B0402F;
}
.contact-form .is-invalid:focus{
outline-color:#B0402F;
border-color:#B0402F;
}
.field-error{
font-size:.8rem;
font-weight:500;
font-style:italic;
color:#B0402F;
min-height:0;
}
.field-error:empty{ display:none; }
.contact-form .cta-row{ margin-top:6px; }
.contact-form .btn{ border:none; cursor:pointer; font-family:var(--font-body); }
.contact-error{
font-size:.88rem;
color:#B0402F;
margin-bottom:8px;
}
.contact-success{
margin-top:18px;
font-size:1.08rem;
line-height:1.6;
color:var(--forest);
font-weight:600;
}
/* ---------------- mobile nav (≤640px) ----------------
The pills never fit a phone (expanded menus ran over the logo), so:
the wordmark collapses to the standalone "P" mark, the nav pills hide,
js/mobile-nav.js drops in a "Main Menu" burger pill, and tapping it
opens a full-screen tinted overlay with a vertical list that keeps the
dropdowns' hierarchy. */
.site-header .logo img.logo-p{ display:none; }
.mobile-nav-btn{ display:none; }
@media (max-width: 640px){
.site-nav{ display:none !important; }
/* Get in touch lives INSIDE the menu overlay on phones (.mnav-cta);
no room for it beside the burger */
.header-cta{ display:none !important; }
.site-header .logo img{ display:none; }
/* the green P works on the cream hero AND the dark half: no light/dark
swap needed, unlike the wordmarks */
.site-header .logo img.logo-p{
display:block;
height:36px;
width:auto;
}
.mobile-nav-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:11px 18px;
border:1px solid rgba(26,26,26,.07);
border-radius:999px;
/* same frosted glass as the desktop nav pill */
background:rgba(251,248,242,.52);
backdrop-filter:blur(16px) saturate(1.6);
-webkit-backdrop-filter:blur(16px) saturate(1.6);
box-shadow:0 12px 32px rgba(17,31,38,.10), inset 0 1px 0 rgba(255,255,255,.55);
color:var(--ink-soft);
font:600 .88rem var(--font-body);
cursor:pointer;
}
:is(body:has(.pin:is([data-beat="4"],[data-beat="5"],[data-beat="6"],[data-beat="7"],[data-beat="8"],[data-beat="9"])), body.nav-dark) .mobile-nav-btn{
background:rgba(13,26,32,.55);
border-color:rgba(251,248,242,.12);
color:rgba(251,248,242,.88);
box-shadow:0 12px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
}
}
/* the overlay itself (rendered on every viewport, opened only on mobile
since its trigger is display:none elsewhere) */
.mobile-nav-overlay{
position:fixed;
inset:0;
z-index:90;
overflow-y:auto;
padding:74px 26px 44px;
background:rgba(13,26,32,.93); /* the tint */
backdrop-filter:blur(16px) saturate(1.4);
-webkit-backdrop-filter:blur(16px) saturate(1.4);
color:var(--paper);
}
.mobile-nav-overlay[hidden]{ display:none; }
.mnav-close{
position:absolute;
top:18px;
right:18px;
width:42px;
height:42px;
border:1px solid rgba(251,248,242,.25);
border-radius:50%;
background:transparent;
color:var(--paper);
font-size:22px;
line-height:1;
cursor:pointer;
}
.mnav-list{ display:flex; flex-direction:column; max-width:420px; margin:0 auto; }
.mnav-heading{
margin:26px 0 4px;
font-size:.72rem;
font-weight:800;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--green);
}
.mnav-heading:first-child{ margin-top:0; }
.mnav-group-label{
margin:16px 0 2px;
font-size:.68rem;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(251,248,242,.45);
}
.mnav-link{
display:block;
padding:12px 2px;
border-bottom:1px solid rgba(251,248,242,.08);
color:var(--paper);
text-decoration:none;
font-size:1.06rem;
font-weight:600;
}
.mnav-link:active{ color:var(--green); }
.mnav-sub{
display:block;
margin-top:2px;
font-size:.78rem;
font-weight:400;
color:rgba(251,248,242,.55);
}
.mnav-cta{ margin-top:30px; justify-content:center; }
/* ---------------- intro hero (before the scrolly story) ----------------
A plain, static (non-sticky, non-scroll-driven) full-height section that
introduces PUCAR the organisation, separate from the litigant's
narrative that begins at beat 0 of .story below. .site-header is
position:fixed with a transparent background, so it overlays this
section the same way it already overlays .pin -- no extra top padding
needed here beyond what already clears the logo comfortably. */
.intro-hero{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:var(--cream);
padding: clamp(96px,14vh,140px) clamp(20px,5vw,72px) clamp(48px,8vh,96px);
}
/* two columns: copy LEFT-ALIGNED on the left, bulletin board on the right
(explicit instruction; used to be a single centred column) */
.intro-hero-inner{
width:100%;
max-width:1180px;
display:grid;
grid-template-columns: 1.05fr .95fr;
gap: clamp(40px, 6vw, 96px);
align-items:center;
text-align:left;
}
.intro-eyebrow{
display:block;
font-size:.78rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.16em;
color:var(--forest); /* dark-green -- this section is a light bg, see design-system rule in README */
margin-bottom:18px;
}
.intro-tagline{
font-family:var(--font-display);
font-weight:500;
font-size:clamp(1.9rem, 4.2vw, 3.1rem);
line-height:1.18;
margin:0 0 22px;
}
.intro-hook{
font-size:clamp(1.05rem, 1.6vw, 1.28rem);
line-height:1.5;
color:var(--ink-soft);
max-width:56ch;
margin:0 0 14px;
}
.intro-skip{
font-size:.92rem;
line-height:1.5;
color:var(--ink-soft); /* --muted only hits 3.5:1 on --cream, fails AA at this size; --ink-soft is 7.7:1 */
font-style:italic;
margin:0 0 32px;
}
/* .intro-hero prefix bumps specificity above the plain .cta-row rule
(defined later in this file) so margin-top:0 actually wins -- .intro-skip
above already carries its own bottom margin, so .cta-row's usual 28px
would just double up the gap before the buttons. */
.intro-hero .intro-actions{
justify-content:flex-start;
margin-top:0;
}
/* ---------------- bulletin board (hero, right column) ----------------
Reads like a notice board: a dark forest panel, slightly tilted paper
notes pinned to it (pin = ::before dot), each note a link into the
currently active work. Notes straighten and lift on hover. */
.intro-board{
position:relative;
display:flex;
flex-direction:column;
gap:18px;
background:var(--forest);
border-radius:22px;
padding:clamp(22px, 2.8vw, 36px);
box-shadow:0 26px 60px rgba(17,31,38,.3);
rotate:.5deg;
}
.board-eyebrow{
display:flex;
align-items:center;
gap:9px;
margin:0 0 2px;
font-size:.78rem;
font-weight:600;
text-transform:uppercase;
letter-spacing:.14em;
color:var(--paper);
}
.board-live{
width:9px; height:9px;
border-radius:50%;
background:var(--green);
animation: boardPulse 2s ease-in-out infinite;
}
@keyframes boardPulse{
0%,100%{ box-shadow:0 0 0 0 rgba(48,207,140,.55); }
55% { box-shadow:0 0 0 7px rgba(48,207,140,0); }
}
.board-note{
position:relative;
display:flex;
gap:14px;
align-items:flex-start;
background:var(--paper);
color:var(--ink);
text-decoration:none;
padding:20px 18px 16px;
/* uneven corners: pinned paper, not a UI card */
border-radius:4px 12px 6px 10px;
box-shadow:0 10px 22px rgba(0,0,0,.28);
rotate:-1.3deg;
/* the notes rock gently in the wind, pivoting around the pin (which
sits at top-centre, y≈-7px) -- hence the raised transform-origin.
Amplitude is deliberately tiny (±.7deg around each base tilt) so the
hover handoff below can't visibly snap. */
transform-origin:50% -6px;
animation: boardRockA 3.8s ease-in-out infinite;
transition: rotate .25s ease, translate .25s ease, box-shadow .25s ease;
}
.board-note + .board-note{
rotate:1.1deg;
animation: boardRockB 4.6s ease-in-out infinite .7s;
}
@keyframes boardRockA{
0%,100%{ rotate:-1.9deg; }
50% { rotate:-.6deg; }
}
@keyframes boardRockB{
0%,100%{ rotate:.4deg; }
50% { rotate:1.7deg; }
}
.board-note::before{ /* the pin */
content:"";
position:absolute;
top:-7px;
left:50%;
translate:-50%;
width:15px; height:15px;
border-radius:50%;
background:radial-gradient(circle at 35% 30%, #F1A6CB, var(--pink) 55%, #8E3A6B);
box-shadow:0 3px 4px rgba(0,0,0,.35);
}
.board-note:hover{
animation:none; /* stop rocking: straight and still, as before */
rotate:0deg;
translate:0 -4px;
box-shadow:0 16px 30px rgba(0,0,0,.32);
}
.board-num{
font-family:var(--font-display);
font-size:1.15rem;
color:var(--forest);
line-height:1.2;
}
.board-note-title{
display:block;
font-weight:600;
font-size:1.04rem;
line-height:1.3;
margin-bottom:5px;
}
.board-note-sub{
display:block;
font-size:.83rem;
line-height:1.45;
color:var(--ink-soft);
}
/* .btn-primary defaults to styling meant for a dark background (see the
design-system section of README) -- this section is light, so it's
folded into the same light-bg override as .job-page/.job-modal-panel
below (search "job-page .btn-primary" in this file). .btn-ghost has no
such shared override yet, so it gets its own light-bg variant here. */
.intro-hero .btn-ghost{ border:1px solid rgba(36,30,26,.32); color:var(--ink); }
.intro-hero .btn-ghost:hover{ background:rgba(36,30,26,.06); }
/* buttons that carry a little icon (beacon / arrow) */
.btn-with-icon{ gap:9px; }
/* "Tell me more" arrow: loops downward -- appears at the top, slides down,
fades out, restarts -- a running "you can scroll" hint */
.btn-arrow{
display:inline-block;
animation: arrowLoop 1.6s ease-in-out infinite;
}
@keyframes arrowLoop{
0% { translate:0 -5px; opacity:0; }
30% { translate:0 0; opacity:1; }
70% { translate:0 2px; opacity:1; }
100%{ translate:0 7px; opacity:0; }
}
/* the green beacon is shared with the bulletin board's .board-live */
/* mobile/tablet: the board stacks BELOW the copy, full width, tilts eased */
@media (max-width: 900px){
.intro-hero{ min-height:0; }
.intro-hero-inner{
grid-template-columns:1fr;
gap:44px;
}
.intro-board{ rotate:0deg; }
.board-note{ rotate:-.7deg; }
.board-note + .board-note{ rotate:.6deg; }
}
@media (max-width: 640px){
.intro-hero{ padding-top: clamp(84px,16vh,120px); }
.intro-actions{ flex-direction:column; align-items:stretch; }
.intro-actions .btn{ text-align:center; justify-content:center; }
}
/* ---------------- story / sticky pin ---------------- */
.story{
position:relative;
height:calc(var(--beats) * 100vh);
}
.pin{
position:sticky;
top:0;
height:100vh;
width:100%;
overflow:hidden;
display:grid;
grid-template-columns: 1fr 1fr;
align-items:center;
background: var(--cream);
transition: background-color .8s ease;
}
/* per-beat backdrop: exactly TWO story colours (explicit instruction with
swatches, Jul 2026) -- the whole first half up to and including the
judge is light --cream-deep; everything after him is dark --forest.
No per-beat tints any more. */
.pin[data-beat="0"]{ background:var(--cream-deep); }
.pin[data-beat="1"]{ background:var(--cream-deep); }
.pin[data-beat="2"]{ background:var(--cream-deep); }
.pin[data-beat="3"]{ background:var(--cream-deep); }
.pin[data-beat="4"]{ background:var(--forest); color:var(--paper); }
.pin[data-beat="5"]{ background:var(--forest); color:var(--paper); }
.pin[data-beat="6"]{ background:var(--forest); color:var(--paper); } /* the film beat */
.pin[data-beat="7"]{ background:var(--forest); color:var(--paper); }
.pin[data-beat="8"]{ background:var(--forest); color:var(--paper); }
.pin[data-beat="9"]{ background:var(--forest); color:var(--paper); }
.pin[data-beat="4"] .beat-body,
.pin[data-beat="5"] .beat-body,
.pin[data-beat="6"] .beat-body,
.pin[data-beat="7"] .beat-body,
.pin[data-beat="8"] .beat-body,
.pin[data-beat="9"] .beat-body{ color:rgba(251,248,242,.78); }
.pin[data-beat="4"] .beat-eyebrow,
.pin[data-beat="5"] .beat-eyebrow,
.pin[data-beat="6"] .beat-eyebrow,
.pin[data-beat="7"] .beat-eyebrow,
.pin[data-beat="8"] .beat-eyebrow,
.pin[data-beat="9"] .beat-eyebrow{ color:var(--gold); }
/* muted footnote placeholders need lifting on the dark half */
.pin[data-beat="4"] .placeholder-tag, .pin[data-beat="4"] sup,
.pin[data-beat="5"] .placeholder-tag, .pin[data-beat="5"] sup,
.pin[data-beat="6"] .placeholder-tag, .pin[data-beat="5"] sup,
.pin[data-beat="7"] .placeholder-tag, .pin[data-beat="7"] sup,
.pin[data-beat="8"] .placeholder-tag, .pin[data-beat="8"] sup,
.pin[data-beat="9"] .placeholder-tag, .pin[data-beat="9"] sup{
color:rgba(251,248,242,.55);
border-color:rgba(251,248,242,.25);
}
/* ground dots are ink-coloured -- invisible on the forest half; swap them
to paper there */
.pin[data-beat="4"] .ground-dots,
.pin[data-beat="5"] .ground-dots,
.pin[data-beat="6"] .ground-dots,
.pin[data-beat="7"] .ground-dots,
.pin[data-beat="8"] .ground-dots,
.pin[data-beat="9"] .ground-dots{
background-image:radial-gradient(var(--paper) 1.5px, transparent 1.6px);
opacity:.1;
}
/* ---------------- ground layer ---------------- */
.ground{
position:absolute;
inset:0;
z-index:0;
opacity:.55;
pointer-events:none;
}
/* top-down world: an ambient dotted floor that scrolls downward, so the
litigant (walking "up") reads as moving forward. The literal path line
lives inside .litigant-stage so it tracks the figure side→centre. */
.ground-line{ display:none; }
.ground-dots{
position:absolute;
inset:-50% 0;
background-image:
radial-gradient(var(--ink) 1.5px, transparent 1.6px);
background-size: 64px 64px;
opacity:.07;
animation: groundScroll 1.1s linear infinite;
animation-play-state:paused;
}
.pin.is-walking .ground-dots{ animation-play-state:running; }
/* she walks down → the world recedes upward */
@keyframes groundScroll{
from{ transform:translateY(0); }
to{ transform:translateY(-46px); }
}
/* ---------------- litigant stage ---------------- */
.litigant-stage{
position:relative;
z-index:5;
grid-column:1;
/* grid-row:1 is NOT optional. The judge-stage is explicitly placed at
(1,1); without an explicit row here, grid auto-placement sees cell
(1,1) occupied and silently moves this stage (and .beats after it)
down to a NEW row 2 -- splitting the 100vh pin into two stacked
half-height rows. That bug shipped once: judge floated in the top
half, litigant + text sat "at the bottom" on every beat. All three
stages/columns share row 1 on purpose; overlap is intentional. */
grid-row:1;
justify-self:center;
align-self:center;
width:clamp(230px, 30vw, 380px);
/* constant above-the-midline lift (desktop; mobile pins her to the top
row instead). This used to ride inside the JS-driven transform, but
the horizontal walk was moved off the stage onto .litigant-walker --
the stage (and the road inside it) no longer moves at all. */
translate:0 -12vh;
/* side→centre position (translate) is set continuously, every frame, by
script.js as a direct function of scroll position -- NOT by a CSS
transition triggered on a discrete beat change. A time-based CSS
transition here used to fire once at the exact scroll pixel where the
beat flipped from 1→2, animating over a fixed .9s regardless of how
fast/slow the user kept scrolling, which read as a jump-cut into an
unrelated animation rather than a motion the scroll itself was driving.
Inline styles always win over stylesheet rules, so no transform/
transition is declared here at all -- see updateLitigantPosition() in
script.js, including its own light easing (lerp) for a settled feel
once scrolling stops, instead of relying on a CSS transition. */
}
/* what actually travels side->centre: the figure, her shadow, and her
speech bubble -- NOT the road. Sliding the whole stage moved the road
along with her, which read as the scene panning rather than her
walking ("not have the whole thing move from the left to the centre").
js/script.js writes this element's transform every frame; she walks off
the road, which stays put on the left and fades (see the road-fade
rules near the judge block). */
.litigant-walker{
position:relative;
will-change:transform;
}
/* ---------------- idle speech bubbles ----------------
Purely decorative flavour text (aria-hidden). Shown/hidden by
js/script.js toggling .is-visible -- see startBubbles()/stopBubbles()/
showSpeechBubble(). Positioned relative to .litigant-stage, anchored
near the head (the figure's head sits roughly in the upper half of the
viewBox, just left of centre), with a small tail pointing down toward it.
Hand-drawn/Excalidraw-style treatment: the visible shape (fill, ink
border, shadow) lives entirely on ::before, a separate layer behind the
text, with an irregular (not equal-cornered) border-radius for a
slightly lumpy "drawn by hand" outline, a couple of degrees of rotation,
and the #speechWobble SVG filter (feTurbulence + feDisplacementMap,
defined once in index.html right after ) applied ONLY to that
layer. Keeping the filter off .speech-bubble itself means the turbulence
distorts the sketchy outline/fill but never the text sitting on top of
it -- if the filter were on the element with the text, the type would
wobble and blur along with the border, which reads as broken rendering
rather than a hand-drawn effect. */
.speech-bubble{
position:absolute;
top:4%;
left:52%;
z-index:6;
/* width:max-content, NOT auto: an abs-positioned box shrink-wraps to the
space left inside its containing block (the stage) after the `left`
offset -- on narrow stages that collapsed the balloon into a one-word-
per-line sliver. max-content sizes it to its text, capped below. */
width:max-content;
max-width:230px;
padding:13px 17px;
color:var(--ink);
font-family:'Comic Relief', var(--font-body);
font-size:.94rem;
font-weight:400;
line-height:1.42;
text-align:left;
text-wrap:balance; /* even out short Comic Relief lines instead of a ragged last word */
opacity:0;
/* translate/scale/rotate as independent properties (not one `transform`
shorthand) on purpose: it lets the position/size transition below
(translate+scale) coexist with the continuous rotate-only jitter
animation further down without the two fighting over the same
`transform` property. --bubble-tilt is a random per-appearance angle
set by js/script.js each time a bubble is shown (pickBubbleTilt()) --
the -2deg here is only a fallback for the rare frame before JS has
set it. */
translate:-28% 6px;
scale:.9;
rotate:var(--bubble-tilt, -2deg);
transform-origin:22% 100%;
transition:opacity .3s ease, translate .3s ease, scale .3s ease;
pointer-events:none;
will-change:opacity, translate, scale, rotate;
}
.speech-bubble::before{
content:"";
position:absolute;
inset:-4px;
z-index:-1;
background:var(--paper);
border:1.8px solid var(--ink);
/* the judge's balloon: WRAPPING IS NOT TRUSTED. WebKit repeatedly laid
the box out one line tall while visually wrapping the text (with
max-content, with caps, even with fixed width), spilling text past the
drawn paper. The two lines are now EXPLICIT -separated spans that
never wrap, so the box height is line-count * line-height in every
engine, full stop. */
.judge-bubble{ text-wrap:initial; }
.judge-bubble .jb-line{ white-space:nowrap; }
/* four differently-weighted corners -- a perfect 14px radius all round
reads as machine-drawn; uneven ones read as a hand-sketched balloon */
border-radius:255px 15px 225px 20px / 20px 220px 18px 255px;
box-shadow:0 10px 20px rgba(36,30,26,.16);
transform:rotate(1deg);
filter:url(#speechWobble);
}
.speech-bubble::after{
content:"";
position:absolute;
left:22%;
bottom:-9px;
width:17px;
height:17px;
background:var(--paper);
border-right:1.8px solid var(--ink);
border-bottom:1.8px solid var(--ink);
border-radius:0 0 4px 0;
transform:rotate(50deg) skew(-6deg, -3deg);
filter:url(#speechWobble);
}
.speech-bubble.is-visible{
opacity:1;
translate:-28% 0;
scale:1;
/* rotate itself isn't set here -- bubbleJitter (below) owns it entirely
while visible, oscillating around --bubble-tilt so the whole thing
reads as held-by-hand rather than perfectly still. */
animation:bubbleJitter 2.6s ease-in-out infinite;
}
/* An uneven set of keyframes (not a clean sine wave) reads more like an
unsteady hand holding a sign than a mechanical wobble. First and last
keyframes match for a seamless infinite loop. */
@keyframes bubbleJitter{
0% { rotate:calc(var(--bubble-tilt, -2deg) - 1.4deg); }
22% { rotate:calc(var(--bubble-tilt, -2deg) + 1deg); }
48% { rotate:calc(var(--bubble-tilt, -2deg) - .6deg); }
74% { rotate:calc(var(--bubble-tilt, -2deg) + 1.5deg); }
100% { rotate:calc(var(--bubble-tilt, -2deg) - 1.4deg); }
}
/* on dark pinned beats (5, 7) the paper bubble still reads fine since it's
never shown mid-scroll anyway (bubbles only appear while idle, i.e. not
actively progressing through beats) -- no per-beat override needed. */
/* scrolling "path" behind the figure, follows it side→centre */
.path{
position:absolute;
left:50%; top:50%;
width:70px; height:200vh;
margin-top:-100vh; /* centred on the stage → always spans the viewport */
margin-left:-35px;
z-index:-1;
background-image:repeating-linear-gradient(
to bottom, var(--ink) 0 20px, transparent 20px 46px);
background-size:6px 46px;
background-position:center;
background-repeat:repeat-y;
opacity:.10;
/* slow fade used by the entrance (see .pin:not(.is-revealed) .path in the
entrance block) -- a transition, NOT a keyframe animation, on purpose:
an animation shorthand here would displace pathScroll and restart it
from 0 when it ended, snapping the dash background-position -- the
"road jitters at the end" bug. */
transition:opacity 2s ease;
animation: pathScroll 1.1s linear infinite;
animation-play-state:paused;
}
.pin.is-walking .path{ animation-play-state:running; }
/* she walks down the screen, so the path recedes upward */
@keyframes pathScroll{ from{ background-position-y:0; } to{ background-position-y:-46px; } }
.shadow{
position:absolute;
left:50%;
bottom:6%;
width:70%;
height:14%;
background:radial-gradient(ellipse at center, rgba(0,0,0,.28), transparent 70%);
transform:translateX(-50%);
filter:blur(2px);
/* opacity lives HERE, not in the keyframes: shadowPulse used to animate
opacity too, which meant the (even paused) animation overrode any
opacity rule on the element -- making it impossible to hide the shadow
during the walk-in entrance (it sat visible on the ground before she
arrived). Keyframes are transform-only now; the pulse reads the same. */
opacity:.55;
transition:opacity .7s ease;
animation: shadowPulse 1.1s ease-in-out infinite;
animation-play-state:paused;
}
.pin.is-walking .shadow{ animation-play-state:running; }
@keyframes shadowPulse{
0%,100%{ transform:translateX(-50%) scaleX(1); }
50%{ transform:translateX(-50%) scaleX(.9); }
}
.litigant{
display:block;
width:100%;
height:auto;
overflow:visible;
}
/* ---- litigant illustration (uploaded asset; carries its own fills) ----
Only layout + the walk animation live here. The figure is a top-down
flat illustration (viewBox 90 140 620 530): dark bun, purple coat, pink
bag, grey skirt. Animatable groups: .leg-front (the drawn right leg),
.leg-back (a clone shifted -57px = the left leg), .arm-left/.arm-right
(the two forearms + hands), all inside .fig. */
.litigant .fig,
.litigant .leg-front,
.litigant .leg-back,
.litigant .arm-left,
.litigant .arm-right,
.litigant .head{
will-change: transform;
transform-box: view-box; /* px origins below resolve in viewBox units */
}
/* ---- walk cycle -----------------------------------------------------------
Top-down stride: each leg lengthens (foot reaching down-screen) then
foreshortens back under the skirt, in opposite phase. The whole body
swells/settles (scale) twice per stride — the bob — with a faint
weight-shift rock. Arms counter-sway a touch. Pivots are in the asset's
user units: hips sit hidden under the skirt hem (y≈508), body centre
≈(400,430). Paused at rest; runs only while the page is scrolling
(.pin.is-walking, set by js/script.js and cleared ~180ms after the last
scroll event). */
.litigant .fig { animation: figWalk 1s ease-in-out infinite paused; transform-origin:400px 430px; }
.litigant .leg-front{ animation: legFront 1s ease-in-out infinite paused; transform-origin:455px 508px; }
.litigant .leg-back { animation: legBack 1s ease-in-out infinite paused; transform-origin:363px 508px; }
.litigant .arm-left { animation: armLeft 1s ease-in-out infinite paused; transform-origin:150px 430px; }
.litigant .arm-right{ animation: armRight 1s ease-in-out infinite paused; transform-origin:592px 330px; }
.pin.is-walking .litigant .fig,
.pin.is-walking .litigant .leg-front,
.pin.is-walking .litigant .leg-back,
.pin.is-walking .litigant .arm-left,
.pin.is-walking .litigant .arm-right{ animation-play-state:running; }
/* body: subtle expand/contract (bob) on each step + faint rock */
@keyframes figWalk{
0%,100%{ transform:scale(1) rotate(-.7deg); }
25% { transform:scale(1.016) rotate(0deg); }
50% { transform:scale(1) rotate(.7deg); }
75% { transform:scale(1.016) rotate(0deg); }
}
/* legs: extend down-screen ↔ foreshorten under the body, opposite phase */
@keyframes legFront{
0%,100%{ transform:scaleY(1.02); }
50% { transform:scaleY(.62); }
}
@keyframes legBack{
0%,100%{ transform:scaleY(.62); }
50% { transform:scaleY(1.02); }
}
/* arms: gentle counter-sway from the elbows */
@keyframes armLeft{
0%,100%{ transform:rotate(2.4deg); }
50% { transform:rotate(-2.4deg); }
}
@keyframes armRight{
0%,100%{ transform:rotate(-2.4deg); }
50% { transform:rotate(2.4deg); }
}
/* ---- "running in late" entrance --------------------------------------------
Every time the active beat becomes 0 (js/script.js's setActiveBeat, after
the user has scrolled at least once), playLateEntrance() locks scroll for
~1.7s, adds .is-entrance + .is-running + .is-walking to #pin, and shows a
one-off scripted speech bubble. .is-running only speeds up the SAME
figWalk/legFront/legBack/armLeft/armRight keyframes used for ordinary
scroll-driven walking (just the animation-duration -- name, timing
function, and infinite iteration all still come from the base .litigant
rules above) so the legs/arms move at a hurried, running cadence instead
of an ordinary stroll. .is-walking (added alongside) is what actually
flips those animations from paused to running, exactly as it does for
scroll -- .is-running on its own does nothing without it. */
.pin.is-running .litigant .fig,
.pin.is-running .litigant .leg-front,
.pin.is-running .litigant .leg-back,
.pin.is-running .litigant .arm-left,
.pin.is-running .litigant .arm-right{ animation-duration:.35s; }
/* She's invisible by default -- not present at all until she "arrives."
.pin.is-revealed (added once, by js/script.js, and never removed again)
is the only thing that ever makes her visible; .pin.is-entrance layers
the walk-in animation on top of that reveal, and only while it's active.
This targets .litigant-stage's OPACITY, not its transform -- .litigant-
stage's `transform` is exclusively owned by updateLitigantPosition() in
js/script.js, rewritten inline every animation frame to drive the
scroll-linked side->centre motion, so a CSS animation/transition on THAT
property would just get stomped every frame (same reasoning as the
mobile safety-net comment further down). The vertical drop-in below uses
the independent `translate` CSS property instead of `transform` for
exactly the same reason -- `translate` and `transform` compose together
rather than overriding each other, so this can move her vertically
without disturbing the JS-driven horizontal position at all. */
.litigant-stage{ opacity:0; }
.pin.is-revealed .litigant-stage{
opacity:1;
transition:opacity .4s ease; /* only actually visible for the fallback reveal below -- an active .is-entrance animation overrides this while it's running */
}
/* Fallback: if the very first real scroll skips beat 0 entirely (see
revealLitigantPlainly() in js/script.js), .is-revealed alone reveals her
with the plain fade above -- no walk-in, since there's no "arriving at
beat 0" moment to hang one on. */
.pin.is-entrance #litigant{
/* #litigant (the original figure), NOT .litigant -- the pendency-queue
clones share the .litigant class for the walk-cycle rules and must not
inherit the walk-in translate. */
/* Targets .litigant (the