/* kapha.css — the Kapha ritual page, over the shared style.css. This file holds only what differs from the Vata page: the photographs and the accent colour. Every rule of layout, motion and behaviour comes from style.css, which all three pages load first, so a layout fix is made once and reaches every dosha. This is the third file of that shape, after pitta.css. The selectors are copied verbatim from style.css and carry the same specificity, so they win on source order alone — this file is linked after it. Generated from style.css rather than typed, so no photograph can be missed. If a photograph is added there, regenerate rather than hand-edit. Photographs only. The blob button outlines, the pin drops and the drawn lines are SVG brand assets, identical for every dosha, so those rules are left to fall through to style.css rather than duplicated under a k- name. Assets take the same names with a k- prefix: images/k-hero.jpg for images/hero.jpg. Exported from the Kapha Mobile and Kapha Desktop sections of the Figma file (1640:1121 and 1640:1629). Note the desktop composite inside the latter is named " Vata Ritual Page" and several Kapha layers still hold Pitta or Vata copy — the file has been duplicated forward without relabelling. The photographs are genuinely Kapha's, which was checked rather than assumed: each export was correlated against its Pitta counterpart and all came back different pictures. */ /* NO ACCENT SET, DELIBERATELY. The Pitta file overrides --vata with a crimson; there is no Kapha equivalent to override it with. tokens.md already records that `--vata: #000F9F` "does not exist anywhere in this Figma page", and nothing in style.css, script.js or the markup reads var(--vata) — checked. So the token paints nothing today and any Kapha hex here would be a guess dressed as a decision. When it is wired up it needs a value from Kali. */ /* ---------- photographs, phone ---------- */ .bg-hero { background-image: url(/ritual/images/k-hero.jpg?v=7bb3f3ea); } .bg-fork { background-image: url(/ritual/images/k-mode-fork.jpg?v=4eb77de8); } .bg-step1 { background-image: url(/ritual/images/k-step-01.jpg?v=9680212d); } .bg-step2 { background-image: url(/ritual/images/k-step-02.jpg?v=199ae877); } .bg-step3 { background-image: url(/ritual/images/k-step-03.jpg?v=a8759de7); } .bg-summary { background-image: url(/ritual/images/k-summary.jpg?v=a8759de7); } .bg-bundle { background-image: url(/ritual/images/k-bundle.jpg?v=959ba5b0); } .bg-academy { background-image: url(/ritual/images/k-academy.jpg?v=f8962297); } .wc-state-1, .wc-state-2 { background-image: url(/ritual/images/k-what-changes-a.jpg?v=8d711c9d); } .wc-state-3 { background-image: url(/ritual/images/k-what-changes-b.jpg?v=1746fade); } /* ONE LAYER HERE, NOT TWO — and that is a fact about the Kapha artwork, not a simplification. The Vata page splits one photograph into a far half (wc-clouds) and a near half (wc-girl, with real transparency) so the two can drift apart and read as depth. Kapha's Figma carries no such split, and rather more emphatically than Pitta's did: the desktop what-changes frame (1640:1765) holds no image fill at all. Its photograph is a loose layer sitting behind it on the canvas (1705:1007), and that layer is a single opaque rectangle. There is no near layer to export because there is no cut-out anywhere near it. Pointing both layers at the same file was the obvious move and is wrong: the two transforms diverge by design, so one photograph on both would ghost against itself. The near layer is retired instead — the far layer carries the photograph and keeps its rise-and-grow, which is the parallax the design asks for. Nothing 404s and nothing is invented. The file is k-wc-clouds.jpg, not .png: with no alpha to preserve, a PNG of a photograph costs several times the bytes for nothing. It is cut straight from that loose layer's own export, which is the picture with nothing over it, so the crop is plain geometry rather than a correlation fit. */ html.js #what-changes .wc-sky { background-image: url(/ritual/images/k-wc-clouds.jpg?v=5b676b85); } html.js #what-changes .wc-girl { display: none; /* and the image cleared as well as the box hidden, so the Vata cut-out is not even named in the computed style of a Kapha page */ background-image: none; } /* ============ 3 · BODY MIND SENSES — pinned so the line draws ============ One state: the 200dvh wrapper gives the stage one extra screen of scroll during which the drawn line traces itself (--p 0→1). The default below is one plain panel with the line fully drawn — what no-JS and prefers-reduced-motion get. */ #body-mind-senses .pin-stage { /* Kapha's CHANGES 19 frame, which stacks nine variant photographs — so the visible one could not be picked by size and every candidate had to be fitted against the render. The winner corroborates the frame geometry: the fitted placement lands within 14px of where the top layer's own box predicts. */ background-image: url(/ritual/images/k-body-mind-senses-v2.jpg?v=d67d7dcc); } .herb-state { background-image: url(/ritual/images/k-herb-story.jpg?v=8c298484); } /* ============ HERO HERB PHOTOGRAPHS ============ Both supplied and both real: Chitraka for Sunrise, Nimba for Moonlight. */ .herb-bg-sunrise { background-image: url(/ritual/images/k-herb-sunrise.jpg?v=30efa9c0); } .herb-bg-moonlight { background-image: url(/ritual/images/k-herb-moonlight.jpg?v=044e734c); } /* ============ 6 · THE THREE STEPS ============ */ /* mode-aware photos: the doorway writes data-mode on . Only the applied background is fetched, so a sunrise visitor never downloads the evening photos and vice versa. */ html[data-mode="moonlight"] .bg-step1 { background-image: url(/ritual/images/k-evening-step-01.jpg?v=cdeec019); } html[data-mode="moonlight"] .bg-step2 { background-image: url(/ritual/images/k-evening-step-02.jpg?v=cc077e4e); } html[data-mode="moonlight"] .bg-step3 { background-image: url(/ritual/images/k-evening-step-03.jpg?v=3f92963c); } html[data-mode="moonlight"] .bg-summary { background-image: url(/ritual/images/k-evening-summary.jpg?v=42bc031e); } /* the evening bundle is its own night photograph (exported from the Figma evening frame 1640:1566 — the source shot behind it, not the composed frame, so no copy is burned in) */ html[data-mode="moonlight"] .bg-bundle { background-image: url(/ritual/images/k-evening-bundle.jpg?v=caa78e50); } /* The phone's evening bundle used to be translated down 31px, with a black strip filling the gap at the top, because that export sat one pin-height high. The new photograph is framed correctly and is exactly the panel's aspect, so the shift now buys nothing and the strip reads as a black band across the top of the screen — which is what it looked like on an iPhone. Both are gone; the four evening pins below came up 31px to match. NOTES.md 26. */ /* ============ THE BUNDLE PINS ============ Kapha's own, phone values here and desktop values in the media query below. These belong per-dosha and never did: a pin marks a specific jar inside a specific photograph, so style.css's coordinates are measurements of VATA's arrangement. Pitta and Kapha had been inheriting them, which is why three of the four sat on wet rock. Overriding here leaves Vata and Pitta untouched. `.bundle-pin` carries `margin: -22px 0 0 -22px`, so left/top are the mark's centre and a product centre can be used directly. Read off each photograph by its printed ĒTHA wordmark — the one feature a product has and the rock does not. Two automated passes were thrown away first: dark-mass-per-column cannot tell a glossy black jar from wet black rock, and a bright-mark detector kept locking onto leaf glints. The phone photographs map 1:1 onto their panels (image 0.4594 against panel 0.4599, so `cover` crops nothing worth counting), which makes an image fraction a panel percentage. Where a wordmark fell under the copy the pin is carried down the jar's body instead — same call as the Pitta doorway pin earlier. The morning tea jar is the one case on the phone: its wordmark sits at 47%, a hair under "Touch each piece to meet it.", so it rides at 52% on the body. First pass off measurement, not off a render — the pinned bundle section paints blank in the preview pane, so these could not be eyeballed in place. SECOND PASS, from marked-up screenshots: the ones that read high are carried down by one pin height and marked +1, so the measurement and the art direction on top of it stay separable. One pin is the drop's own diameter against the panel — 31px of 874 here, so +3.5; desktop works out at +4.7 and is applied in the media query below. */ .pin-m1 { left: 34.4%; top: 66.1%; } /* candle — Rooted Earth +1 */ .pin-m2 { left: 85.2%; top: 53.0%; } /* tea — Energizing Boost */ .pin-m3 { left: 56.9%; top: 63.2%; } /* supplement — Daybreak Blend +1 */ .pin-m4 { left: 13.0%; top: 66.7%; } /* skin — Daybreak Face Serum +1 */ .pin-e1 { left: 34.3%; top: 67.0%; } /* candle — Dance of Air */ .pin-e2 { left: 81.2%; top: 57.4%; } /* tea — Serenity Nightfall +2 */ .pin-e3 { left: 54.4%; top: 67.8%; } /* supplement — River Flow +1 */ .pin-e4 { left: 13.5%; top: 70.9%; } /* skin — Velvet Touch, 50px up */ /* SUNRISE STEP 1, 15% DARKER — asked for; that photograph reads too bright behind the copy. Same arithmetic as everywhere else on this page: a veil multiplies, so to land at 0.85 of the former luminance each point needs a' = 0.15 + 0.85a. A step panel arrives with two scrims that do not overlap — ::before is the top 34% running 0.38 to nothing, ::after the bottom 36% running 0.45 to nothing, and the 30% in the middle is bare photograph. Putting a third layer over the whole panel would double up with both of them, so the two are folded into one full-height gradient instead and ::after is emptied. Running each region through the formula: 0.38 -> 0.47 at the top, 0 -> 0.15 across the middle, 0.45 -> 0.53 at the bottom. Same shape as before, 15% deeper everywhere. Scoped to the sunrise doorway only. The panel is shared markup — the same .steps-state-1 shows Kapha's evening step 1 when data-mode is moonlight — and that photograph was not the one complained about. */ html:not([data-mode="moonlight"]) #three-steps .steps-state-1::before { height: 100%; background: linear-gradient(to bottom, rgba(28, 18, 14, 0.47) 0%, rgba(28, 18, 14, 0.15) 34%, rgba(28, 18, 14, 0.15) 64%, rgba(28, 18, 14, 0.53) 100%); } html:not([data-mode="moonlight"]) #three-steps .steps-state-1::after { background: none; } /* ============ 9 · CLOSING — pinned, staged reveal ============ Default below = one plain panel with everything visible and the line fully drawn: what no-JS and prefers-reduced-motion get. */ #closing .pin-stage { /* Outcome_v2.png (3×), saved as JPEG for the same reason */ background-image: url(/ritual/images/k-closing-v2.jpg?v=fcb9b8d2); } /* The outcome screen 15% darker, asked for directly. Same arithmetic as the bundle: a veil multiplies, so to render at 0.85 of the former luminance each point needs a' = 0.15 + 0.85a. This screen arrives carrying the page-wide .scrim-top — 0.38 at the very top easing to nothing by 34% — and bare photograph below that. Running both through the formula gives 0.47 at the top, 0.15 where the old scrim expired, and 0.15 all the way down. Which is a departure from the house rule in CLAUDE.md, "never a flat dark overlay across the whole image", and it is recorded rather than hidden: below 34% this is flat, at 0.15. Two reasons it was done anyway. The instruction was for the screen, not the copy band, and 15% everywhere cannot be delivered by a shape that falls to zero. And this is the one screen where the copy really does span the frame — heading at 27%, the two short lines at 43% and 51%, the body blocks at 58% and 69% — so a scrim tucked behind the text would have to cover almost all of it regardless. The top third stays a true gradient. Both layouts take this. The desktop block below re-points the photograph but never touches the scrim, and style.css has no desktop closing scrim to fight with, so one rule serves 402px and 1440px alike. */ #closing .pin-stage.scrim-top::before { height: 100%; background: linear-gradient(to bottom, rgba(28, 18, 14, 0.47) 0%, rgba(28, 18, 14, 0.15) 34%, rgba(28, 18, 14, 0.15) 100%); } /* ---------- photographs, desktop ---------- */ @media (min-width: 900px) { /* hero herb, desktop */ .herb-bg-sunrise { background-image: url(/ritual/images/k-d-herb-sunrise.jpg?v=3fa3a102); } .herb-bg-moonlight { background-image: url(/ritual/images/k-d-herb-moonlight.jpg?v=07671fe0); } /* ---------- photographs ---------- */ /* Every one of these is exported already cropped to its design frame, so `cover` + centre is the whole story — the hand-computed offsets that used to be here were derived from raw layer positions and were simply wrong. The doorway photograph is Figma's "image 76" (1570:501): the layer above it, "Rectangle 21", is a background blur, which is why exporting THAT one produced a sheet of flat grey. */ .bg-hero { background-image: url(/ritual/images/k-d-hero.jpg?v=3b9dfbbf); } .bg-fork { background-image: url(/ritual/images/k-d-mode-fork.jpg?v=3be4c877); } .bg-step1 { background-image: url(/ritual/images/k-d-step-01.jpg?v=6b425e51); } .bg-step2 { background-image: url(/ritual/images/k-d-step-02.jpg?v=54402d6c); } .bg-step3 { background-image: url(/ritual/images/k-d-step-03.jpg?v=6e17c72c); } .bg-summary { background-image: url(/ritual/images/k-d-step-03.jpg?v=6e17c72c); } .bg-bundle { background-image: url(/ritual/images/k-d-bundle.jpg?v=59223622); } .bg-academy { background-image: url(/ritual/images/k-d-academy.jpg?v=ca3dc7dd); } html[data-mode="moonlight"] .bg-step1 { background-image: url(/ritual/images/k-d-evening-step-01.jpg?v=2eb78b4d); } html[data-mode="moonlight"] .bg-step2 { background-image: url(/ritual/images/k-d-evening-step-02.jpg?v=393536f2); } html[data-mode="moonlight"] .bg-step3 { background-image: url(/ritual/images/k-d-evening-step-03.jpg?v=05987723); } html[data-mode="moonlight"] .bg-summary { background-image: url(/ritual/images/k-d-evening-step-03.jpg?v=05987723); } html[data-mode="moonlight"] .bg-bundle { background-image: url(/ritual/images/k-d-bundle-evening.jpg?v=c6751cf0); } /* Both bundle photographs are about 1.42 wide. `cover` only shows their whole width while the panel is wider than that; on a window taller in proportion — a tall or a zoomed one — cover scales by height instead and takes the sides off, which cuts the outermost jar, since the arrangement runs from 0.11 to 0.97 of the frame's width. So the width is pinned instead: `100% auto` always shows the whole width and spends the difference on the sky and the sand, which are the parts that can afford it. At a normal laptop shape this computes to exactly what cover already did — 1440x900 gives 1440x1013 either way — so nothing moves there. Where it would leave the panel short, a gradient behind it carries the two edge tones of the photograph itself, sampled from its top and bottom twelve rows: #AEB0B6 dune haze and #6E6462 sand for the morning, #474F68 and #585762 for the evening. A second copy of the photograph at cover was the first idea and is worse — it repeats the top rows at a second scale, which duplicates the grass stalks visibly. A tone cannot do that. */ #bundle .panel.bg-bundle { background-image: url(/ritual/images/k-d-bundle.jpg?v=59223622), linear-gradient(to bottom, #626B59 0%, #383C34 100%); } /* The evening keeps its top anchor: what vertical room there is goes on pushing the arrangement down, clear of the copy — which also puts the whole of the shortfall at the bottom edge rather than splitting it. */ html[data-mode="moonlight"] #bundle .panel.bg-bundle { background-image: url(/ritual/images/k-d-bundle-evening.jpg?v=c6751cf0), linear-gradient(to bottom, #2B3744 0%, #161B1F 100%); /* Restated rather than inherited. It was needed because the phone rule above shifted this same selector down 31px; that rule is gone now, but stating the desktop's own placement here is still the clearer of the two. */ background-position: center center, center center; background-size: 100% auto, 100% 100%; } #body-mind-senses .pin-stage { background-image: url(/ritual/images/k-d-body-mind-senses.jpg?v=52bed32f); } /* No object-position override up here on purpose. Desktop sees 90% of the film's width, and the phone's 92% pan holds her whole (visible slice 0.092-0.992 against her 0.828-0.995) where centre would clip her right edge — so one value serves both. */ #closing .pin-stage { background-image: url(/ritual/images/k-d-closing.jpg?v=84eec104); } /* #herb-story .pin-stage deliberately has NO photograph. The two .herb-bg layers are the picture; a background on the stage itself tiled through behind them at its natural size, which is the second image that showed up as a strip down the right of this section on desktop. .herb-state keeps one, because that retired panel is the stacked no-JS fallback. */ .herb-state { background-image: url(/ritual/images/k-d-herb-story.jpg?v=acaf0237); } /* the stacked no-JS panels take the desktop frame's own photograph, same file the pinned far layer uses */ .wc-state-2, .wc-state-3 { background-image: url(/ritual/images/k-wc-clouds.jpg?v=5b676b85); } /* --- 4 · herb story --- */ /* --- the bundle pins, desktop --- Read off the desktop photographs the same way, by the ĒTHA wordmarks. One caveat worth stating: the panel pins the photograph's WIDTH (`background-size: 100%`) and the shot is 1.417 wide against a panel that is only that shape at the design height. On a shorter, wider window the image is taller than the panel and gets cropped top and bottom, so every fixed percentage drifts against the products. These are tuned at the design viewport — 1440x1016, where the photograph fills its panel exactly, which is also the geometry the Figma frame shows. Vata's were fixed the same way and drift the same way; it is a property of the layout, not of these numbers. Four of the eight are carried down their jar's body to clear the copy — the desktop copy column reaches x 50% and the hint line "Touch each piece to meet it." sits right where both skin jars' wordmarks are. Second pass, from marked-up screenshots: one pin is a 48px drop against a 1016 panel, so +4.7 for the four that read high, marked +1. */ .pin-m1 { left: 36.3%; top: 66.0%; } /* candle — carried down, clears the copy */ .pin-m2 { left: 89.3%; top: 56.7%; } /* tea +1 */ .pin-m3 { left: 60.3%; top: 62.7%; } /* supplement +1 */ .pin-m4 { left: 21.3%; top: 78.0%; } /* skin — carried down, clears the hint */ .pin-e1 { left: 32.6%; top: 69.7%; } /* candle — carried down, clears the copy */ .pin-e2 { left: 85.1%; top: 47.1%; } /* tea */ .pin-e3 { left: 56.9%; top: 51.9%; } /* supplement +1 */ .pin-e4 { left: 20.3%; top: 80.6%; } /* skin — carried down, then +1 */ } /* Of the two sections that carry a film on the Vata page, this page runs one. The academy film is brand footage and is the same on every dosha — the stills settle it, since the Kapha academy still out of Figma is the same shot as the Vata one (r = 0.955) while the two body-mind-senses stills are unrelated photographs (r = -0.113). So kapha.html carries the academy