/* /work — the evidence page. It shares the tube with the hero on purpose: this is an internal page, so it belongs to the machine. /resume.html deliberately does NOT, because its job is to be parsed by ATS software and skimmed in ten seconds, and a CRT is the wrong costume for that. The tier rule still holds. Pixels are the machine (the back arrow, the HUD light). Mono is what it says (keys, eyebrows, tags). Type is what Juan says (the headings and every line of prose). No body copy is ever pixels. */ .doc { min-height: 100%; } /* the hero scrolls nothing; this page is a document and scrolls normally */ .doc__head { padding-block: 12vh 6vh; } .doc__main { padding-block: 0 4vh; } .doc__foot { padding-block: 6vh 16vh; border-top: 1px solid rgba(220, 230, 221, .09); } .back { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-dim); text-decoration: none; margin-bottom: 40px; } .back i { width: 7px; height: 7px; background: var(--amber); border-radius: 1px; box-shadow: 0 0 10px rgba(240, 168, 60, .8); transition: transform .25s cubic-bezier(.2, .8, .25, 1); } .back:hover { color: var(--amber); } .back:hover i { transform: translateX(-4px); } /* 10.5px of uppercase mono is a 17px-tall target, and this is the only way back out of a case-study page — the one link on the page that must not be fiddly. Padded rather than enlarged, so the type keeps its size, and the padding is pulled back out of the left margin so the text stays flush with the column above it instead of stepping in by 10px. */ @media (pointer: coarse) { .back { padding: 12px 10px; margin-left: -10px; } } .doc__h1 { font-size: clamp(30px, 5.4vw, 58px); line-height: 1.02; letter-spacing: -.022em; font-weight: 800; margin: 6px 0 22px; max-width: 16ch; color: var(--fg); } .doc__lede { margin: 0; max-width: 56ch; font-size: clamp(15px, 1.5vw, 17.5px); line-height: 1.62; color: var(--fg-dim); } /* ------------------------------------------------------------------ items */ .item { padding-block: clamp(38px, 6vh, 62px); border-top: 1px solid rgba(220, 230, 221, .09); max-width: 62ch; /* anchored from the icon row, so leave room under a sticky-free header */ scroll-margin-top: 8vh; } .item:first-child { border-top: none; } .item__k { margin: 0 0 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); } .item__h { margin: 0 0 18px; font-size: clamp(21px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -.014em; font-weight: 800; color: var(--fg); } .item p { margin: 0 0 14px; font-size: clamp(14.5px, 1.45vw, 16.5px); line-height: 1.68; color: var(--fg-dim); } .item em { font-style: italic; color: var(--fg); } /* the line that makes this a portfolio rather than a list */ .item__cost { border-left: 2px solid rgba(240, 168, 60, .45); padding-left: 16px; margin-block: 20px 18px !important; } .item__cost b { color: var(--amber); font-weight: 600; } .tags { font-family: var(--mono); font-size: 10.5px !important; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); opacity: .7; margin-bottom: 18px !important; } .item__go { margin: 0 !important; } @media (max-width: 620px) { .doc__head { padding-block: 8vh 4vh; } .back { margin-bottom: 28px; } .item__cost { padding-left: 12px; } } /* the human block — the same page, a different job. It reads as an aside rather than a sixth project, so the "five things" count still means the work. The research is blunt that this is the part that decides whether someone wants to work with you, and equally blunt that it should be short. */ .item--human { border-top-width: 1px; } .item--human .item__k { color: var(--cool, #2FD9C5); } .item--human .item__h { font-size: clamp(19px, 2.2vw, 25px); } /* ===================================================== LEAD MARK + STATS === The page was a wall of prose. The research on portfolio pages is blunt about why that fails: recruiters scroll a case study in SECONDS looking for visual proof, and visuals "convey complex information far more efficiently than words." So every project now opens with a mark and carries its numbers where a scan will hit them, with the prose demoted to the layer that has to stand up in an interview rather than the layer that has to survive a skim. A CAROUSEL was considered and rejected — see the README. Short version: in the Notre Dame study only 1% of visitors clicked a carousel at all and 84% of those clicks were the FIRST slide, so four of these five projects would have been invisible. */ .item__lead { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); margin-bottom: 20px; } .item__lead .item__k { margin-bottom: 6px; } .item__lead .item__h { margin-bottom: 0; } /* the mark is the SAME pixel sprite the hero icons use, at hero size — which is what keeps this page reading as the same machine as the front door */ .plate { flex: none; display: grid; grid-template-columns: repeat(8, var(--pp)); grid-auto-rows: var(--pp); gap: calc(var(--pp) * .18); --pp: clamp(5px, 0.85vw, 8px); padding: calc(var(--pp) * 1.5); border: 1px solid rgba(240, 168, 60, .16); border-radius: 4px; background: rgba(240, 168, 60, .028); } .plate i { background: transparent; border-radius: 1px; } .plate i.on { background: var(--amber); box-shadow: 0 0 7px rgba(240, 168, 60, .55); } /* the numbers. Display type for the figure, mono for the label — the figure is Juan's fact, the label is the machine annotating it. */ .stats { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: clamp(20px, 3.4vw, 42px); } .stats li { display: flex; flex-direction: column; gap: 4px; } .stats b { font-size: clamp(20px, 2.6vw, 30px); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--fg); text-shadow: 0 0 22px rgba(240, 168, 60, .30); } .stats span { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); } @media (max-width: 560px) { .item__lead { gap: 14px; } .stats { gap: 18px 26px; } } /* the one real photograph on the site, and the only place a face belongs: the hero is a machine whose face is the eyes, so a person appears here — beside the block that says who is behind the work. */ .me { display: block; width: clamp(150px, 19vw, 250px); height: auto; /* sit it in the tube's palette rather than letting a bright studio blue punch a hole in the screen */ filter: saturate(.72) contrast(1.04) brightness(.9); /* FEATHERED, not framed. A hard-edged rectangle with a border reads as a photo pasted ONTO the screen; the whole conceit here is that the viewport IS the tube, so a photograph should look like it is being displayed BY the phosphor — emerging out of the black rather than sitting on top of it. A radial mask does that in one property and costs nothing: it is composited on the GPU, there is no second asset, no cut-out PNG with a baked edge that would break the moment the background colour changed, and the source JPEG stays a plain rectangle. Opaque through the middle 52% so the face is never touched, then a long falloff so there is no visible edge anywhere. The border and radius are gone deliberately — a frame around a feathered edge is the one combination that looks like a mistake. */ -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,.55) 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,.55) 76%, transparent 100%); } .item__lead--me { align-items: center; } /* ================================================== PANELS, VERTICAL AGAIN == ⚠️ THE HORIZONTAL RAIL IS REVERTED, and the reason is a real conflict rather than a change of taste: on a trackpad a two-finger horizontal swipe IS the browser's back/forward gesture. A full-width horizontal scroll container sits directly on top of that, so moving between projects and moving through history become the same motion — you either navigate when you meant to browse or fight the page when you meant to go back. Juan hit it immediately. There is no way to have both. The gesture belongs to the browser, so the panels give it up and go back to scrolling down. Everything that made these not-a-carousel still holds: nothing auto-advances, no panel is hidden, every one stays in the DOM and the accessibility tree, the index names all six and shows where you are, and the browser owns the physics. PROXIMITY, not mandatory — a panel taller than the viewport must never trap anyone mid-scroll, and mandatory also breaks programmatic scrolling outright (measured: scrollTo with behavior:'smooth' moved this container zero pixels). */ html { scroll-snap-type: y proximity; } #rail { display: block; padding-block: 0; } #rail > .item { min-height: 100svh; display: grid; align-content: center; scroll-snap-align: center; padding: 10vh 7vw; max-width: none; border-top: none; } /* ⚠️ .lead__grid is exempt on purpose: it is a TWO-COLUMN container, and a 62ch cap collapses it into one measure. Stated in the exclusion list rather than fought with a specificity tie further down the file. */ #rail > .item > *:not(.item__lead):not(.rig):not(.lead__grid):not(.vid) { max-width: 62ch; } #rail > .item .item__lead { max-width: 62ch; } .doc__head, .doc__foot { padding-block: 0; border: none; } .item--intro .back { margin-bottom: 32px; } .item--end { border-top: 1px solid rgba(220, 230, 221, .09); } /* the cue that there is more below — the affordance a full-screen panel needs, now pointing the way the page actually moves */ .item--intro { position: relative; } .item--intro::after { content: ""; position: absolute; left: 7vw; bottom: 12vh; width: 1px; height: 38px; background: linear-gradient(to bottom, var(--amber), transparent); animation: rail-cue 2.4s cubic-bezier(.55, 0, .45, 1) infinite; } @keyframes rail-cue { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 70%, 100% { transform: translateY(22px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .item--intro::after { animation: none; opacity: .7; } } /* ------------------------------------------------------------ the kova cups --- Two SKUs overlapped rather than sat side by side, because side by side reads as a comparison ("which one?") and overlapping reads as a line ("these are the product"). The back cup is smaller and dimmer, which is the same depth language the film memories use — nearer is brighter and larger. ⚠️ THE STILLS ARE SQUARE AND MOSTLY EMPTY. Both sources are 2048x2048 with the cup floating in a wide cream margin, so laying them out by their BOX leaves a large hole; the negative margin is pulling the boxes together, not the cups. Change the photography and this number has to be re-measured, not adjusted by feel. */ .kova-cups { display: flex; align-items: flex-end; justify-content: center; gap: 0; } /* ⚠️ NO MASK AND NO BRIGHTNESS CUT ANY MORE — THE FILES CARRY REAL ALPHA. These were feathered and dimmed because the studio sweep was baked into the photographs and they landed on a near-black page as two glaring rectangles. The background is genuinely gone now (HiggsField's matting model, not a colour key — a key was rejected outright because the vanilla scoops are the same cream as the sweep behind them and keying would have punched holes straight through the product), so there is no rectangle left to hide and nothing to compensate for. Masking a cutout only eats the subject. ⇒ If these are ever replaced with images that have a background again, the feather has to come back with them. The treatment belongs to the ASSET, not to the layout. */ .kova-cups__cup { display: block; width: min(250px, 40vw); height: auto; /* ⚠️ A BOTTOM FADE, AND ONLY THE BOTTOM. The mound runs off the bottom of the original frame, so the cutout's alpha ends in a dead-straight horizontal line where the photograph was cropped rather than where the ice cream actually stops — visible on device as a hard shelf under both cups. Fading the last 12% turns that crop into the pile continuing out of view. The other three sides are left alone on purpose: the matte follows the real silhouette there, and feathering a good edge is what made the pre-cutout version look like a soft rectangle. */ -webkit-mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,.55) 92%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, rgba(0,0,0,.55) 92%, transparent 100%); } /* the second SKU sits behind: smaller, dimmer, lower — the same depth language the film memories use, so the pair reads as one line rather than as two things being compared. The dimming stays because it is DEPTH, not background compensation. */ .kova-cups__cup--back { width: min(210px, 34vw); margin-left: -13%; filter: brightness(.72) saturate(.9); transform: translateY(7%); } @media (max-width: 760px) { .kova-cups { margin-bottom: 6px; } } /* ------------------------------------------------------------------ lockup --- The brand holding the top-left after the first section, on Juan's ask. It is the SAME pixel sprite the page already uses at .plate and .page-mark, at a smaller pitch — a new mark drawn specially for this would be a second brand. ⚠️ Fixed, and therefore a sibling of .hud rather than a child of .phosphor — see the note in sipful.html. A filter ancestor captures fixed children. It starts hidden and is revealed by a class, so with no JS nothing appears over the copy and nothing is lost: the page's own

is the real identity and this only ever restates it. */ .lockup { position: fixed; z-index: 45; top: calc(18px + env(safe-area-inset-top, 0px)); left: 4vw; display: flex; align-items: center; gap: 9px; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .34s ease, transform .34s cubic-bezier(.2, .8, .25, 1); } .lockup.is-on { opacity: 1; transform: none; } .lockup__mark { display: grid; grid-template-columns: repeat(8, var(--lp)); grid-auto-rows: var(--lp); gap: calc(var(--lp) * .2); --lp: 2.5px; } .lockup__mark i { background: transparent; border-radius: 1px; } .lockup__mark i.on { background: var(--amber); box-shadow: 0 0 6px rgba(240, 168, 60, .6); } .lockup__word { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-dim); /* the same dark halo the HUD carries, for the same reason: this sits over whatever the page happens to be showing behind it */ text-shadow: 0 0 2px rgba(0, 0, 0, .95), 0 0 6px rgba(0, 0, 0, .8); } @media (max-width: 760px) { .lockup { top: calc(14px + env(safe-area-inset-top, 0px)); left: 7vw; } .lockup__mark { --lp: 2px; } } @media (prefers-reduced-motion: reduce) { .lockup { transition: none; } } /* ---------------------------------------------------------------- index --- */ .index { position: fixed; z-index: 44; right: max(2vw, 14px); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); } .index a { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 3px; text-decoration: none; color: var(--fg-dim); font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .5; transition: opacity .3s ease, color .3s ease; } .index a b { font-weight: 400; color: var(--amber); opacity: .6; } .index a span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .35s cubic-bezier(.2, .8, .25, 1); } .index:hover a, .index a:focus-visible { opacity: .9; } .index:hover a span, .index a:focus-visible span { max-width: 130px; } .index a.is-here { opacity: 1; } .index a.is-here b { opacity: 1; } .index a.is-here span { max-width: 130px; } @media (max-width: 760px) { /* `bottom: 8px` put this row exactly on top of .hud, which is a fixed 50px band along the bottom edge. The collision was invisible for as long as the nav was mis-parented into .phosphor and rendering thousands of px down the document — fixing the containing block is what surfaced it. It clears the HUD now instead of sharing its band. */ .index { right: auto; left: 50%; top: auto; /* clears .hud's band, and .hud itself now grows by the safe-area inset because the page runs under the home indicator (viewport-fit=cover) */ bottom: calc(62px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); flex-direction: row; gap: 6px; } /* ⚠️ NOT display:none. Seven items cannot show their words at 390px, so the rail collapses to numbers — but display:none also removes the word from the accessibility tree, and the link's whole accessible name becomes "01". A screen reader then reads this nav as "01 02 03 04 05 06 07". The .vh technique (os.css) hides it from the eye and keeps it for the ear, which is the same trade every other hidden label on this site makes. */ .index a span { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 6px of padding made a 27x27 target. WCAG 2.2 asks 24x24 as the floor and a thumb wants more, so the padding grows and the gap grows with it — a bigger target that still touches its neighbour is a mis-tap, not a fix. */ .index { gap: 10px; } .index a { padding: 12px 11px; } /* ⚠️ DO NOT GROW THIS TO "STOP TEXT RUNNING UNDER THE HUD". That was tried on Aug 31 and reverted the same hour: the overlap is not a padding shortfall, it is a `position: fixed` HUD painting over a panel that is simply taller than the phone viewport. Padding cannot move content out from under a fixed bar — it only makes the panel taller and pushes the copy further up. The overlap is site-wide and by design; the HUD carries a text-shadow (os.css) so it stays legible over whatever is behind it. */ #rail > .item { padding: 12vh 7vw 14vh; } } /* ====================================================== THE TURNTABLE ====== A 360° rotation of the portrait, baked from a 3D lift of the same headshot and played back as a sprite sheet. The reference was an idle game-character screen, where the whole turnaround is visible. NO WEBGL. A GLB on the page needs a viewer, and a viewer is a dependency this site does not have. The mesh was rendered to 24 frames ONCE, offline, and steps() walks them: zero JS per frame, zero runtime 3D, 121KB for the whole rotation at 2x — less than most hero images. It is also how a game shipped a character turnaround before real-time 3D was cheap, so the method matches the costume. The frame count lives in ONE place. --turn-n is used by the background-size, by the keyframe distance and by the step count, so changing the bake means changing one number rather than finding three that must agree. */ .me-wrap { position: relative; flex: none; line-height: 0; } /* ⚠️ THE ONE PHOTOREAL THING ON THE SITE, so it gets the tube's treatment or it reads as an asset borrowed from somewhere else. Juan asked whether to give it a holographic look; the answer is YES but restrained — the conceit is that the viewport IS the tube, so a rotating head should look like the phosphor is DISPLAYING it, not like a render dropped on top. What that means concretely: scanlines, a slight chromatic fringe, a duotone pull toward the amber, and the feather the still already had. What it does NOT mean is the sci-fi version — blue wireframes, glitch bars, a floating grid. That is costume, it fights the palette, and it is the same instinct the README already rejected when it cut burn-in: a theatrical effect on a hiring page reads as a gimmick rather than as a machine. */ .turn { --turn-n: 24; position: absolute; inset: 0; background-image: url("/assets/img/juan-turn.webp"); background-repeat: no-repeat; background-size: calc(100% * var(--turn-n)) 100%; background-position: 0 0; /* pulled toward the tube's amber and lifted in contrast, so it sits in the phosphor's colour rather than in a studio's */ filter: saturate(.62) contrast(1.12) brightness(.92) sepia(.18) hue-rotate(-8deg); -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,.55) 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,.55) 76%, transparent 100%); /* hidden until the sheet has actually decoded — see contact/index.js. Until then the still underneath is what shows, which is why there is never a gap. */ opacity: 0; transition: opacity .6s ease; } /* ⚠️ THE STILL GETS OUT OF THE WAY once the rotation is live. The turntable is layered OVER the photograph — the photo is the base, the fallback and the alt text — but leaving it lit underneath meant the render was sitting on top of a different image of the same face, which is what Juan was seeing. It stays in the DOM and in the accessibility tree; it simply stops being drawn. */ .me-wrap:has(.turn.is-on) .me { opacity: 0; } .me-wrap .me { transition: opacity .5s ease; } .turn.is-on { opacity: 1; animation: turn-spin 9s steps(var(--turn-n)) infinite; } /* the scanlines and the halation, drawn OVER the sprite. A pseudo-element rather than a second image: it costs nothing, scales with the element, and cannot fall out of sync with the frame underneath. */ .turn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px), radial-gradient(70% 70% at 50% 42%, rgba(240, 168, 60, .16), transparent 70%); mix-blend-mode: screen; -webkit-mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,.55) 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 52%, rgba(0,0,0,.55) 76%, transparent 100%); } /* the chromatic edge — the same red-right/blue-left fringing the tube's SVG filter does to text, at a fraction of the strength so a face stays a face */ .me-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 1px 0 0 rgba(255, 60, 60, .12), inset -1px 0 0 rgba(60, 120, 255, .12); border-radius: 50%; } /* ⚠️ THIS WAS BROKEN AND THE BREAK WAS INVISIBLE TO EVERY DOM CHECK. It read `to { background-position-x: calc(-100% * var(--turn-n)) }` — i.e. -2400% — on the assumption that a percentage background-position is a linear pixel offset. It is not. A percentage positions the image PROPORTIONALLY: pos = p × (containerWidth − imageWidth) and with a 2400%-wide sheet that is p × (−23W). So -100% pushes the image TWENTY-THREE container widths to the right, off-screen, and with no-repeat you see nothing at all. The turntable showed frame 0 and then went BLANK for the other 23/24 of every loop. Nothing caught it: the class was on, the animation name was right, the sheet had fetched, computed values changed frame to frame. It only appeared when the frames themselves were rendered side by side and 7 of 8 came back empty. The standard formula for an n-frame sheet is `100% / (n − 1)` per frame, so the run must end at 100%. `steps(n)` divides the range into n jumps, which means the keyframe target has to be 100% × n/(n−1) for step i to land exactly on i/(n−1) × 100%. */ @keyframes turn-spin { to { background-position-x: calc(100% * var(--turn-n) / (var(--turn-n) - 1)); } } /* A head that spins forever is precisely what this setting exists to stop. The turntable still loads and still replaces the still — it simply holds on frame zero, which is the front-facing view. */ @media (prefers-reduced-motion: reduce) { .turn.is-on { animation: none; background-position: 0 0; } } /* ============================================================ THE RIG ====== Four systems, one at a time, as centred tree diagrams. ⚠️ THIS SECTION WAS SILENTLY DELETED ONCE by a range replacement that ran between two other section headers while the rig sat between them — nothing errored, the file still parsed, the braces still balanced, and the diagram rendered as a default bulleted list. It is deliberately the LAST section for that reason. If a block here ever "stops applying", check for that before debugging the rules. NO BOXES. Juan's call and it is the right one: every node used to sit in its own bordered chip inside one big amber-bordered container, which is two layers of chrome around content that needed none. Stripping both makes the MARKS the objects and leaves the connector lines as the only structure — which is what a tree diagram actually is. It also means the amber container is gone: on a page whose entire job is this diagram, the page IS the container. The one thing the boxes were carrying is the "this part is Juan's own work" signal, which the gate node needs. That now rides on COLOUR alone — an amber mark and an amber name, against everything else in --fg. Same information, no chrome. */ .rig { margin: 0; } /* ---------------------------------------------------------------- tabs --- */ /* the position indicator — four marks, no labels. It is the smallest thing that still answers "how many are there and which am I on", which is the one job a rotating set cannot do without. */ .rig__dots { display: flex; justify-content: center; gap: 9px; margin-bottom: clamp(24px, 3.6vh, 40px); } .rig__dots button { padding: 6px; border: none; background: none; cursor: pointer; line-height: 0; } .rig__dots i { display: block; width: 6px; height: 6px; border-radius: 1px; background: rgba(220, 230, 221, .26); transition: background .3s ease, box-shadow .3s ease, transform .3s ease; } .rig__dots button:hover i { background: rgba(220, 230, 221, .5); } /* 6px dot + 6px padding = an 18x18 target, which a mouse hits and a thumb does not — and this is the ONLY way to reach systems 2-4, so missing it means the other three panels are unreachable on a phone. Grown on coarse pointers only, so the desktop rail keeps the small precise mark it was drawn as. The dot itself does not change size; only the invisible box around it does. */ @media (pointer: coarse) { .rig__dots { gap: 4px; } .rig__dots button { padding: 15px 13px; } } .rig__dots button.is-on i { background: var(--amber); box-shadow: 0 0 8px rgba(240, 168, 60, .8); transform: scale(1.18); } /* the lesson sits WITH its diagram, not below the fold. The research is blunt that this is the part hiring managers care about most — "the outcomes and lessons are arguably the most important part of your case study" — and one shared lesson for four different systems was not saying anything about three of them. */ .rig__lesson { margin: clamp(14px, 2vh, 20px) auto 0 !important; max-width: 62ch; text-align: left; border-left: 2px solid rgba(240, 168, 60, .45); padding-left: 15px; font-size: 13px !important; line-height: 1.6; color: var(--fg-dim); } .rig__lesson b { color: var(--amber); font-weight: 600; } /* --------------------------------------------------------------- trees --- */ /* ⚠️ A HORIZONTAL SCROLLER, CONTAINED. Juan wanted to swipe between trees, and he was right about the condition: it must not leak into the browser's back/forward gesture, which is the same two-finger horizontal swipe and the reason /work gave its rail up. `overscroll-behavior-x: contain` is the property that makes that possible — it stops scroll CHAINING, so a swipe that starts in this box stays in this box and never becomes a history navigation, even when the track hits its end. Scoped to the trees exactly as he asked. PROXIMITY, not mandatory: mandatory breaks programmatic scrolling outright here — measured earlier on /work, where scrollTo with behavior:'smooth' moved a mandatory container zero pixels. Nothing is hidden any more, which is why the tab/tabpanel roles are gone: in a scroller every tree is present and reachable, so announcing them as tabs would have described a show/hide that no longer happens. The dots are plain buttons that scroll to a tree. */ .rig__track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; -ms-overflow-style: none; } .rig__track::-webkit-scrollbar { display: none; } .rig__panel { scroll-snap-align: center; min-width: 0; } .rig__panel:focus-visible { outline: 1px solid rgba(240, 168, 60, .5); outline-offset: 8px; } .rig__tree { display: grid; justify-items: center; } .rig__row { display: flex; justify-content: center; } /* a node is now a mark with a name under it, and nothing else */ .rig__node { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0; } .rig__node b { font-size: 15px; font-weight: 700; letter-spacing: -.01em; color: var(--fg); display: block; } .rig__node > span:not(.rig__glyph) { display: block; margin-top: 3px; font-family: var(--mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim); } /* Juan's own work, said in colour rather than in a box */ .rig__node--gate b { color: var(--amber); } .rig__node--gate > span:not(.rig__glyph) { color: rgba(240, 168, 60, .75); } .rig__mark { width: 24px; height: 24px; flex: none; fill: var(--fg); opacity: .9; } .rig__glyph { --pp: 3.4px; flex: none; display: grid; grid-template-columns: repeat(8, var(--pp)); grid-auto-rows: var(--pp); gap: calc(var(--pp) * .2); } .rig__glyph i { background: transparent; border-radius: .5px; } .rig__glyph i.on { background: var(--amber); box-shadow: 0 0 6px rgba(240, 168, 60, .85); } /* -------------------------------------------------------------- trunk --- */ .rig__link { position: relative; width: 1px; height: 30px; background: linear-gradient(to bottom, rgba(240, 168, 60, .45), rgba(240, 168, 60, .16)); } .rig__link i { position: absolute; left: -1.5px; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(240, 168, 60, .9); animation: rig-pulse 2.6s cubic-bezier(.55, 0, .45, 1) infinite; } .rig__link:nth-of-type(2) i { animation-delay: .5s; } @keyframes rig-pulse { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 70%, 100% { transform: translateY(30px); opacity: 0; } } .rig__row--two { display: grid; gap: 14px; justify-items: center; } .rig__guards { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; text-align: center; } .rig__guards li { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); opacity: .8; } /* ------------------------------------------------------------ the fan --- */ /* ⚠️ THE CROSSBAR HAS TO KNOW HOW MANY LEAVES THERE ARE. It used to be a fixed `left: 9%; right: 9%` while the leaves were flex-CENTRED, so it could never line up with the outer two: with six leaves it stopped 14px SHORT of them, so Shopify and Cloudflare hung off stubs that connected to nothing, and with two or three it ran up to 36px PAST them, leaving a line poking out into space on either side. Wrong in one direction when the set was full and the other when it was small. A GRID fixes it exactly. With `repeat(var(--n), 1fr)` every leaf sits in an equal column, so the first column's centre is `50%/n` from the left edge and the last is the same from the right — which is precisely where the bar has to start and stop. Each fan declares its own --n inline, because only the markup knows how many leaves it has. */ .rig__sys { list-style: none; margin: 0; padding: 22px 0 0; position: relative; display: grid; --gap: clamp(6px, 1vw, 16px); grid-template-columns: repeat(var(--n, 3), 1fr); gap: 22px var(--gap); width: 100%; } /* the inset has to account for the GAP, or it is off by (n-1)·gap/2n — which measured as a consistent 3px before this: small, but it is the difference between a stub that meets the bar and one that nearly does. A column is (100% - (n-1)·gap) / n wide, so its centre is half that from the edge. */ .rig__sys::before { content: ""; position: absolute; top: 0; left: calc((100% - (var(--n, 3) - 1) * var(--gap)) / var(--n, 3) / 2); right: calc((100% - (var(--n, 3) - 1) * var(--gap)) / var(--n, 3) / 2); height: 1px; background: rgba(240, 168, 60, .26); } .rig__sys li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0; border: none; background: none; } .rig__sys li::before { content: ""; position: absolute; top: -22px; left: 50%; width: 1px; height: 22px; background: rgba(240, 168, 60, .26); } .rig__sys b { font-size: 13.5px; font-weight: 700; color: var(--fg); letter-spacing: -.008em; } .rig__sys > li > span:not(.rig__glyph) { display: block; margin-top: 2px; font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-dim); opacity: .75; } /* Narrow screens: six equal columns stop being readable long before they stop fitting, and any wrap breaks the crossbar geometry the grid just fixed. So below this the fan becomes a stacked list on a left rail — a shape that is correct for ANY number of leaves, because nothing has to line up with anything. */ @media (max-width: 720px) { .rig__sys { grid-template-columns: 1fr; gap: 12px; padding: 0 0 0 20px; width: auto; justify-items: start; border-left: 1px solid rgba(240, 168, 60, .26); } .rig__sys::before { display: none; } .rig__sys li { flex-direction: row; align-items: center; gap: 10px; text-align: left; } .rig__sys li::before { top: 50%; left: -20px; width: 14px; height: 1px; } } .rig__cap { margin: clamp(26px, 4vh, 40px) auto 0 !important; max-width: 64ch; text-align: center; font-size: 13px !important; line-height: 1.6; color: var(--fg-dim); } .rig__cap b { color: var(--amber); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .rig__link i { animation: none; opacity: .9; top: 13px; } .rig__dots i { transition: none; } } /* ⚠️ .page-mark carries `margin-inline: auto`, which is right on /code, /film, /music and /off — their headers are centred, so the mark centres with them. In a left-aligned copy column it centred against left-aligned type and read as a misplaced element. Scoped to the panel-style intros so the four centred pages are untouched. (The morph flies the eyes to this element, so it stays put rather than being removed.) */ .item--intro .page-mark { margin-inline: 0; } /* ─── THE OBJECT PANEL ──────────────────────────────────────────────────────── Juan's call: the product is centred and it is the ONLY thing on that screen. `#rail > .item` is already min-height:100svh with align-content:center, so this adds the horizontal half and the centring of the text under it. The back link is lifted out of the flow so it does not count as a second thing in the panel — it is the only exit from the page, since the HUD carries no navigation. */ #rail > .item--object { justify-items: center; text-align: center; position: relative; } .back--float { position: absolute; top: 8vh; left: 7vw; margin: 0; } .prod-stage { display: grid; justify-items: center; gap: 18px; margin: 0; } /* sized off viewport HEIGHT, not width: this is a tall object alone on a full-height panel, so height is the axis that runs out first. */ .prod-wrap { position: relative; margin-inline: auto; /* ⚠️ BOUNDED BY WIDTH AS WELL AS HEIGHT. This was `clamp(260px, 72vh, 860px)`, sized off viewport HEIGHT because on a desktop landscape panel height is what runs out first. On a PORTRAIT phone that inverts: 72vh of an 844px screen is 608px on a 390px viewport, so the stage hung 198px off the side of the page. Measured, not guessed — _lab's mobile probe reported scrollWidth 588 vs clientWidth 390 with .prod-wrap as the widest offender. min() of all three bounds means whichever axis is scarcer wins. */ /* ⚠️ THE WIDTH HAS TO PAY FOR THE ROTATION. `.prod-wrap--float` rests at about 21deg, and a rotated square's bounding box is wider than the square by cos21 + sin21 = 1.29. So at 88vw the box measured 417px on a 390px viewport and hung off the page — the width was right and the TRANSFORM overflowed. 66vw x 1.29 = 85vw, which fits with margin. Desktop is unaffected: 72vh is the smaller bound there, and it was already winning. */ width: min(72vh, 66vw, 860px); aspect-ratio: 1; } /* ─── FLOAT ─────────────────────────────────────────────────────────────────── The reference Juan shot this against is a tilted floating product shot, so the resting state is tilted and the drift oscillates around it. The transform is on the WRAPPER, never on .turn — .turn animates background-position and a transform there would be a second animation on the same element fighting the first. ⚠️ Reduced motion kills the drift but KEEPS the tilt: the tilt is composition, the movement is the thing the setting is asking us to stop. */ /* ⚠️ THE RESTING ANGLE IS COPIED FROM JUAN'S OWN PROTOTYPE RENDER: the cup leans top-RIGHT at roughly 21 degrees, not the small left lean this had before. CSS rotate() is clockwise-positive, so the sign flips as well as the magnitude. */ @keyframes prod-float { 0%, 100% { transform: translateY(-11px) rotate(19deg); } 50% { transform: translateY(11px) rotate(23deg); } } .prod-wrap--float { animation: prod-float 7.5s ease-in-out infinite; will-change: transform; } @media (prefers-reduced-motion: reduce) { .prod-wrap--float { animation: none; transform: rotate(21deg); } } /* ⚠️ THE TIERS START HIDDEN, WHICH IS THE OPPOSITE OF HOW THIS BEGAN. Painting the still and then the sprite and then the model meant a visible flash of two stand-ins before the real thing — Juan's note, and he is right that it reads as a glitch rather than as progressive loading. So nothing paints until something has actually loaded: `.is-3d` reveals the model, and `.no-3d` (set by product3d.js only when 3D genuinely cannot load) brings the stand-ins back. ⚠️ WITH NO JS NEITHER CLASS IS EVER SET, so the