/* ============================================================ THE ROOM'S LIGHT A cream television above the footer, its power knob on a drag lever. Pull it and the room's own daylight drains out or floods back in — see the CRT set section further down for how the tube itself answers that change rather than causing it. THIS IS NOT A THEME SWAP, AND THE DISTINCTION IS THE WHOLE DESIGN ---------------------------------------------------------------- Every object on this page is a physical thing: cassettes, a tape deck, paper. A cassette does not become a different colour when you turn the lights off — it receives less light. So: surfaces and text change, because they are the room objects do NOT change colour, they are DIMMED the hardware's own lamps track whatever THEIR OWN power state is, not a fixed relationship to the room The pilot lamps are the point. The REC lamp is barely there in daylight and brightest at night — the recorder is always running, so it just gets easier to see in the dark. The CRT's own pilot is the opposite: it tracks its tube, which is lit BY day, so it comes up with the daylight rather than against it. Same device, same amber (already in audit-styles.css, commented "warm phosphor amber, lights not links"), opposite phase — because what each lamp answers to is different, and a lamp that ignored what it was actually attached to would be the theme-swap this whole approach exists to avoid. It is also far cheaper than a palette swap. Measured before writing a line: the landing page's own rules contain ZERO hardcoded `color:` values — every piece of text already routes through --ink, --ink-muted or --ink-faint — while all 56 of their hardcoded hex values sit on object materials, which by the above must not change. ============================================================ */ /* The token system this file used to define — @property --lit, the day/night pairs, the --ink-lit crossover curve and the nav/footer chrome overrides — now lives in theme.css, because it stopped being the landing page's private business the moment the case studies and About had to honour it too. What stays here is only what is genuinely local to this page: the objects that sit in this room, and the television that switches it. */ .home-page { color: var(--ink); } /* ---------- the objects are dimmed, never recoloured ---------- */ /* A cassette shell keeps its cream, its green, its tosca. It does not become a different colour when the lights go out — it is lit by a tungsten bulb instead of by daylight, so it goes slightly darker and distinctly WARMER. That is what sepia() is doing here, and it is the difference between an object in a lit room and a grey slab. They are barely dimmed at all, and that took two wrong answers to arrive at. Dimming the shells to 0.30 put their paper labels at 2.2:1 against the printing on them — the project names, which ARE the page's content, were unreadable in the dark. Lifting to 0.56 only reached 3.2:1. Both were solving it backwards. The lamp hangs OVER these objects. Light from it falls on them, so they are the LIT things and the room is the dark thing — which is exactly how the Cave is arranged: the books in the pool are at full colour and full brightness, and it is the room around them that is black. Nothing on a lit shelf is dimmed. So the objects only warm, because tungsten is warmer than daylight, and every label stays as readable at night as it is at noon. */ .home-page .mixtape__shell, .home-page .recorder__unit { filter: brightness(calc(0.88 + 0.12 * var(--lit))) saturate(calc(0.92 + 0.08 * var(--lit))) sepia(calc(0.20 * (1 - var(--lit)))); } /* The CRT gets its OWN, much wider range — see the dedicated rule further down, in the CRT set section. Those two keep this mild range because their printed labels have to stay readable at both ends; the CRT has no type on it and its whole point is a screen that is plainly LIT by day and plainly DARK by night, so it earns a stronger swing than the shared one here. */ /* ---------- and the hardware's own lamps come up ---------- */ /* The REC lamp is barely there in daylight and is the brightest thing in the room at night, which is exactly how a pilot lamp behaves. Nothing here is a "glow" bolted onto a shape: it is a small light source in a dark room, so the cast is tight and warm and it never traces the element's outline. */ .home-page .recorder__lamp { opacity: calc(0.45 + 0.55 * (1 - var(--lit))); box-shadow: 0 0 calc(6px * (1 - var(--lit))) calc(1px * (1 - var(--lit))) var(--led-glow), 0 0 calc(14px * (1 - var(--lit))) rgba(255, 168, 92, calc(0.5 * (1 - var(--lit)))); } /* ---------- the chrome ---------- The nav and footer overrides that used to live here moved to theme.css and lost their .home-page scope on the way, which is precisely what lets the case studies and About inherit them. What stays is the one piece that is genuinely local: this page's footer needs `isolation` because the television physically stands on it and casts light onto it, and nothing else on the site has a television. */ .home-page .site-footer { position: relative; isolation: isolate; /* contains the light-spill pseudo below its own content, without a z-index war with .lights (which needs z-index: 2 for an unrelated reason) */ } /* The set stands directly on this floor now (see .lights' padding), so its screen ought to actually light the patch of floor it stands on — a real cast from a real source, not a decorative bloom parked behind an object for atmosphere. Anchored to where the screen itself sits (centred, right at the seam between the two sections), sized wider than the cabinet so it reads as spill rather than a spotlight, and driven by the same --lit the tube's own glow uses: full warmth when the picture is lit, nothing at all once it's off, because a dark tube casts no light on the floor beneath it either. This is what makes the boundary between the object and the footer read as one continuous, lit surface instead of a hard seam where the room stops and the footer's own flat colour begins. */ .home-page .site-footer::before { content: ""; position: absolute; left: 50%; top: 0; width: clamp(520px, 58vw, 860px); height: 300px; transform: translate(-50%, -62%); background: radial-gradient(50% 50% at 50% 50%, rgba(247, 242, 230, calc(0.5 * var(--lit))) 0%, rgba(255, 200, 140, calc(0.22 * var(--lit))) 38%, transparent 72%); z-index: -1; pointer-events: none; } /* ---------- the CRT set ---------------------------------------- A cream-plastic television, synced to the room rather than causing it. Pull the slider up into daylight and the tube wakes — static, then a settle into a plain lit screen, the way any idle glass looks once there is enough light in the room to read it by. Pull it down into the dark and the tube has nothing left to answer for, so it quietly powers down (the same bright-dot collapse a real set does) and stays off — a screen left alone in the dark just sleeps. The room's own daylight is still driven straight off the lever, exactly as before; the screen's on/off state is a second, honest reading of the same value, not the cause of it. This is the SECOND pass at the object itself, and the difference between the two is the whole lesson worth keeping on record. The first was covered in hardware tells: four corner screws, a badge plate, a vent grille, printed foot marks, and the switch built as a whole separate mechanical assembly — a bracket, a track, printed marks — bolted onto the cabinet's outside edge. Every one of those was a reasonable idea on its own (the cassettes DO have screws, the DL-6 DOES have a badge), and stacked onto one small object they added up to a hardware replica trying to prove its own detail rather than a clean object. A real television this size is a screen and a control, cut from the same moulded shell — nothing bolted to it, nothing printed on it. So: one screen that dominates the face, one control that lives IN the shell instead of hanging off it, and nothing else. The base below IS still part of that shell, not an exception to it — a real set's plinth is moulded as one piece with the cabinet the way its screen and control are, so it belongs here for the same reason they do. What made the first pass's feet a tell wasn't that feet existed, it was that everything read as a SEPARATE part fastened on. One dark plinth the cream body visibly sits on and overlaps into is a foundation, not a fastener. */ .lights { position: relative; /* z-index 2, and it is load-bearing rather than defensive. The negative margin below pulls this section up under the work section, whose `.wrap` carries `position: relative; z-index: 1` — without this the whole set paints BEHIND it and the slider is unreachable. Measured, not guessed: elementFromPoint at the control's own centre returned SECTION.section on the first version of this object. */ z-index: 2; margin-top: clamp(-96px, -7vw, -54px); /* padding-top pushes the SET down away from the mixtapes above, independent of the negative margin above it — that margin is spoken for (it's what keeps the section's stacking order correct, see the comment above) so the set's own vertical position within the section is tuned here instead, not by touching that number. padding-bottom is almost nothing on purpose — the set stands directly on the footer floor, the way a real television sits low against a wall rather than floating mid-room. The footer's own generous padding-top is what actually keeps its content clear of the object; this number is only about the object's own position. */ padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(4px, 0.6vw, 10px); display: flex; justify-content: center; } .crt { display: flex; flex-direction: column; align-items: center; } /* ---------- the base ---------- */ /* Comes AFTER the cabinet in source order, since a plain flex column lays children out top to bottom in DOM order — the base has to be the second child to sit visually below the screen and control, not above them. But paint order follows DOM order too, and a later, lower element would paint OVER the cabinet's bottom edge it overlaps — exactly backwards from a cream body sitting in front of its own plinth. So the cabinet gets an explicit stacking order (flex items can take z-index even while position: static) to win that overlap regardless of which one is later in the markup. */ .crt__feet { /* matched to .crt__cabinet's own width at each breakpoint rather than a percentage — .crt has no explicit width of its own (it shrinks to the cabinet's), and a percentage on a flex-column child of a shrink-to-fit container is exactly the kind of thing that resolves differently across engines. A hardcoded pair is one more number to keep in sync but never ambiguous. */ width: 272px; height: 21px; margin-top: -13px; border-radius: 0 0 13px 13px; position: relative; z-index: 0; /* darker, plainer wood-brown than the cream shell or the taupe collar — a different material doing a different job, the way a real set's base is often a heavier, less finished plastic than its face. Dimmed/warmed by the same dedicated rule as the cabinet, further down. */ background: linear-gradient(180deg, #6e5b44 0%, #4c3d2d 100%); box-shadow: 0 5px 8px rgba(20, 14, 8, 0.3); } /* the moulded slot every base like this has — a speaker vent or a nameplate groove, it doesn't matter which; what matters is that a flat plinth with nothing on it reads unfinished */ .crt__feet::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 48%; height: 7px; transform: translateX(-50%); border-radius: 3px; background: #362b1f; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); } /* ---------- the cabinet ---------- */ .crt__cabinet { position: relative; z-index: 1; /* wins the overlap with .crt__feet below — see its comment */ width: 360px; height: 226px; border-radius: 37px; padding: 18px; display: flex; align-items: stretch; gap: 14px; /* Cream moulded plastic — the cassette shells' own material, not a new one, but a smoother cut of it. The cassettes and the DL-6 want a worn, textured, handled surface; this object wants to read as a clean, confident toy, so the visible grain and the 4-stop shading that gave those two their tactile feel are gone here — three soft stops and no printed texture. Warmed/dimmed at night by the dedicated rule further down, exactly like the base below it. */ background: linear-gradient(165deg, #f6f0e3 0%, #e6dbc4 55%, #d5c9ab 100%); /* the specular line a moulded gloss top edge actually throws — one hairline of near-white right at the rim, on top of the ordinary lift shadow. Without it the cream reads as a flat fill; with it the top edge reads as a surface catching light. */ box-shadow: var(--lift-2), inset 0 1px 0 rgba(255, 255, 255, 0.65); } /* The CRT's own day/night swing — deliberately much wider than the cassette shells' and the recorder's shared rule above. Those two are held mild because their printed labels have to stay legible at both ends; nothing here is printed on, so there is no legibility floor stopping the body from going properly dark at night the way the room around it does. Both cabinet and base take it, so the object reads as one material going dark together rather than a bright body on a base that didn't get the memo. */ .home-page .crt__cabinet, .home-page .crt__feet { filter: brightness(calc(0.58 + 0.42 * var(--lit))) saturate(calc(0.82 + 0.18 * var(--lit))) sepia(calc(0.3 * (1 - var(--lit)))); } /* ---------- the collar, the bezel, and the tube ---------- Three nested layers, not two — this is the exact thing the first cut of this object was missing, and it is most of why it read flat. Cream cabinet, straight to near-black well, straight to glass: two steps of contrast. A real set's face has three: the moulded shell, a sunk COLLAR of a completely different material (a mid-tone, slightly warm plastic or rubber trim the tube sits in), then the near-black bezel painted around the glass itself, then the glass. Skipping the collar is what made the old well look like a hole punched in the cabinet rather than a part built to hold a tube. */ .crt__well { flex: 1; border-radius: 25px; padding: 7px; /* the collar: a warm taupe, lit diagonally like the cabinet is, so it reads as its own sloped surface rather than a shadow of the bezel beneath it. Thin light ring at the seam where the cream shell meets it — the trim's own edge catching light, not a drawn outline. */ background: linear-gradient(158deg, #a89478 0%, #8e7c62 42%, #6f6150 100%); box-shadow: var(--press), inset 0 0 0 1px rgba(255, 244, 227, 0.4); } .crt__bezel { height: 100%; border-radius: 19px; padding: 6px; /* the near-black paint around the glass — what .crt__well used to be, moved one layer deeper now that the collar exists above it */ background: linear-gradient(174deg, #1a1712 0%, #0e0c09 100%); box-shadow: var(--press); } /* ---------- the tube's state is a FUNCTION of the handle ---------- This used to be a class-driven state machine: JS added `is-warming`, waited 380ms on a timer, swapped to `is-on`, and a keyframe played a fixed 200ms collapse or expand. It looked right on a tap and was wrong on a drag, which is the gesture this object is actually built around — you could haul the handle halfway down, hold it there, and the tube would sit fully lit as though nothing were happening, because a keyframe has no idea where your finger is. Everything below replaces that with arithmetic on --lit, so the picture closes and opens continuously under the handle, at exactly the rate you move it, and holding mid-travel holds the tube mid-collapse. The timers, the three state classes and both keyframes are gone entirely — and with them the whole class of cascade and ordering bugs they kept producing. Nothing here needs a JS hook: the spring already writes --lit every frame for the tap and the settle, and the drag already writes it 1:1, so all three paths drive the tube for free. This is the "feedback must be continuous DURING the interaction, not just at the end" rule applied to the one part of the object that was still ignoring it. The bands, in the order you meet them dragging the handle down. They deliberately OVERLAP rather than running end to end: a real set's picture degrades while it is collapsing, not politely before it. The first cut of these numbers ran them strictly in sequence and the tube did not begin closing until the handle was already 55% of the way down — most of the throw did nothing to the screen, which is the same unresponsiveness the state machine had, just with smaller numbers. Spread wide and overlapped, the picture is visibly closing from about a quarter of the way down. --lit 1.00 → 0.85 full picture, idle grain 0.85 → 0.50 signal breaks up, static floods in 0.62 → 0.10 the tube collapses vertically to a line 0.10 → 0.00 the line shrinks to a dot and goes out */ .crt__screen { position: relative; width: 100%; height: 100%; /* how far the picture has opened VERTICALLY: 0 is the flat line, 1 is the full frame */ --tube-open: clamp(0, calc((var(--lit) - 0.10) / 0.52), 1); /* how far that line has spread HORIZONTALLY: 0 is the dot, 1 is full width. Runs entirely below where --tube-open bottoms out, which is what makes the two read as consecutive stages of one collapse rather than the picture just scaling down as a whole. */ --tube-wide: clamp(0, calc(var(--lit) / 0.10), 1); /* the last sliver, so the dot goes OUT rather than snapping off */ --tube-live: clamp(0, calc(var(--lit) / 0.04), 1); /* how badly the signal is breaking up: none in full daylight, total well before the tube is finished closing */ --tube-fuzz: clamp(0, calc((0.85 - var(--lit)) / 0.35), 1); /* rounder than a cabinet corner on purpose — glass bulges, plastic doesn't, and the gap between the two radii is what sells "this is a curved tube set into a square hole" rather than one shape */ border-radius: 31px; overflow: hidden; /* the glass itself — constant, because glass is glass whether the room is lit or not. Only the picture inside it moves. */ background: radial-gradient(120% 100% at 50% 38%, #211c17 0%, #0b0906 76%); /* the bleed: a bright screen throws light onto the bezel it sits in, which `overflow: hidden` above does NOT clip — that property only clips this element's own overflowing content, never its own box- shadow, so the bloom spills onto the dark bezel exactly as it should. One light source (the screen itself), tight and close, not a soft halo floating behind the object — the difference between a lit screen and a poster with a glow bolted on. No transition on it, deliberately: it is recomputed from --lit every frame, so a transition would only make the bloom lag the handle it is supposed to be reporting. */ box-shadow: 0 0 calc(31px * var(--tube-live)) calc(4px * var(--tube-live)) rgba(247, 242, 230, calc(0.55 * var(--tube-live))); } /* The picture itself. One transform on one wrapper, so the glow, the static and the scanlines collapse together as a single emitted image — which is what they are. Scaling them as three separate siblings would let them drift apart by a subpixel mid-collapse. The brightness ramp is the part that sells it: a real tube dumps the same energy into a smaller and smaller area as it collapses, so the line is far brighter than the full frame was. It peaks exactly when --tube-open hits 0, which is the moment the picture is a line. */ .crt__picture { position: absolute; inset: 0; /* Clips the static's -20% bleed to the same rectangle the glow occupies. Without this the noise layer, being larger than the lit area by design, stayed larger through the collapse and hung out above and below it as two grey fringes — a band of picture with noise spilling past its own edges, which is not a thing a tube does. The -20% still does its job (the jitter never exposes an edge); it is simply cropped now instead of visible. */ overflow: hidden; transform: scaleX(calc(0.02 + 0.98 * var(--tube-wide))) scaleY(calc(0.03 + 0.97 * var(--tube-open))); filter: brightness(calc(1 + 1.8 * (1 - var(--tube-open)))); opacity: var(--tube-live); } /* The lit surface itself — a plain, even white, the way an idle tube looks whenever there's nothing on but a blank channel. A flat fill on purpose, not a radial bloom: a projected glow behind an object is the exact "glow" this house style flags as a tell, and it fought with the vignette below it besides — two different devices both trying to fake the same curvature. One flat layer plus the vignette is the honest version. Fully opaque and CONSTANT. It does not dim with the room, because a tube is a light source, not a surface being lit by one — the wrapper above is what takes the picture away, by collapsing it. */ .crt__glow { position: absolute; inset: 0; background: #f7f2e6; } /* Static. A tileable noise field, flickered by jumping its own background-position on a step timer rather than by animating anything the compositor has to repaint from scratch. Two jobs in one layer, and --tube-fuzz slides between them: the fine grain a working tube always has playing across it (0.14, slow), and the interference of a signal breaking up (0.94, fast). The cadence is interpolated as well as the strength — a