/* pitta.css — the Pitta 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 both pages load first, so a layout fix is made once and reaches all three doshas. Kapha will be a third file of the same shape. 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 p- name. Assets take the same names with a p- prefix: images/p-hero.jpg for images/hero.jpg. Exported from the Pitta Mobile and Pitta Desktop sections of the Figma file (1636:28 and 1636:534). */ /* The accent. --vata is the token name the shared file uses for "the dosha colour"; only its value changes here. Vata is #000F9F, Pitta is #9D0033, taken from the Figma frames and the email templates. */ :root { --vata: #9D0033; } /* ---------- photographs, phone ---------- */ .bg-hero { background-image: url(/ritual/images/p-hero.jpg?v=3a2fcc15); } .bg-fork { background-image: url(/ritual/images/p-mode-fork.jpg?v=b0c154fa); } .bg-step1 { background-image: url(/ritual/images/p-step-01.jpg?v=7f751139); } .bg-step2 { background-image: url(/ritual/images/p-step-02.jpg?v=a8759de7); } .bg-step3 { background-image: url(/ritual/images/p-step-03.jpg?v=9508c267); } .bg-summary { background-image: url(/ritual/images/p-summary.jpg?v=9d0cf69a); } .bg-bundle { background-image: url(/ritual/images/p-bundle.jpg?v=e900097d); } .bg-academy { background-image: url(/ritual/images/p-academy.jpg?v=f8962297); } .wc-state-1, .wc-state-2 { background-image: url(/ritual/images/p-what-changes-a.jpg?v=c96b8909); } .wc-state-3 { background-image: url(/ritual/images/p-what-changes-b.jpg?v=377ba8c8); } /* ONE LAYER HERE, NOT TWO — and that is a fact about the Pitta 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. Pitta's Figma frame carries no such split: the desktop what-changes frame (1636:670) holds a single frame-sized fill, "image 100", and none of the raw images in that subtree has a transparent pixel. So there is no near layer to export. 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 p-wc-clouds.jpg, not .png: with no alpha to preserve, a PNG of a photograph costs several times the bytes for nothing. */ html.js #what-changes .wc-sky { background-image: url(/ritual/images/p-wc-clouds.jpg?v=c9a293f9); } 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 Pitta 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 { /* CHANGES 4 photograph, from Nothing_stand_v2.png (3× = 1206×2622), saved as JPEG: the PNG was 2.6MB of fully opaque pixels, which is a lot to decode mid-scroll on a pinned section */ background-image: url(/ritual/images/p-body-mind-senses-v2.jpg?v=33ba2348); } .herb-state { background-image: url(/ritual/images/p-herb-story.jpg?v=c1b6f7e1); } /* ============ HERO HERB PHOTOGRAPHS ============ Both supplied and both real: Manjistha for Sunrise, Haridra for Moonlight. The Sunrise copy said Brahmi until 2026-08-14; the PHOTOGRAPH was always the red root, so the picture is what confirmed which of the two was wrong. */ .herb-bg-sunrise { background-image: url(/ritual/images/p-herb-sunrise.jpg?v=a71b975d); } .herb-bg-moonlight { background-image: url(/ritual/images/p-herb-moonlight.jpg?v=23dc9913); } /* ============ 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/p-evening-step-01.jpg?v=cdeec019); } html[data-mode="moonlight"] .bg-step2 { background-image: url(/ritual/images/p-evening-step-02.jpg?v=cc077e4e); } html[data-mode="moonlight"] .bg-step3 { background-image: url(/ritual/images/p-evening-step-03.jpg?v=3f92963c); } html[data-mode="moonlight"] .bg-summary { background-image: url(/ritual/images/p-evening-summary.jpg?v=42bc031e); } /* the evening bundle is its own night photograph (exported from the Figma evening frame 1636:471 — 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/p-evening-bundle.jpg?v=7d691cf9); } /* ============ THE BUNDLE PINS ============ Pitta's own. Until now this page inherited style.css's coordinates, which are measurements of VATA's arrangement — that is why most of them sat on rock, and why two were bound to the wrong jar: Vata's m2 (tea) landed over Pitta's supplement and Vata's m3 (supplement) over Pitta's tea, so tapping either opened the other one's card. Each pin is placed on ITS OWN product, read off the photograph by the printed ĒTHA wordmark. Worth saying because the marked-up screenshots point pins at whichever product is nearest, and following that literally would have bound the skin card to the candle. `.bundle-pin` carries `margin: -22px 0 0 -22px`, so left/top are the mark's centre. The phone photographs map 1:1 onto their panels, so an image fraction is a panel percentage. Only the morning tea needed moving off its wordmark: at 48.6% it grazed the copy, which ends at 46.4%, so it rides at 50% on the jar. */ .pin-m1 { left: 38.6%; top: 65.5%; } /* candle — Fire of Ambition */ .pin-m2 { left: 73.7%; top: 49.4%; } /* tea — Revitalize Start */ .pin-m3 { left: 57.7%; top: 55.8%; } /* supplement — Inner Calm Mind */ .pin-m4 { left: 18.3%; top: 63.5%; } /* skin — Iced Kiss Face Serum */ .pin-e1 { left: 17.1%; top: 67.5%; } /* candle — Grace of Water */ .pin-e2 { left: 62.4%; top: 55.0%; } /* tea — Evening Tranquility */ .pin-e3 { left: 37.3%; top: 59.1%; } /* supplement — Night Veil */ .pin-e4 { left: 41.6%; top: 76.5%; } /* skin — Gentle Breeze Cream */ /* ============ 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/p-closing-v2.jpg?v=bd434e37); } /* 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/p-d-herb-sunrise.jpg?v=61aab519); } .herb-bg-moonlight { background-image: url(/ritual/images/p-d-herb-moonlight.jpg?v=7e1bd60b); } /* ---------- 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/p-d-hero.jpg?v=21ff33eb); } .bg-fork { background-image: url(/ritual/images/p-d-mode-fork.jpg?v=1550863b); } .bg-step1 { background-image: url(/ritual/images/p-d-step-01.jpg?v=609a209e); } .bg-step2 { background-image: url(/ritual/images/p-d-step-02.jpg?v=6e17c72c); } .bg-step3 { background-image: url(/ritual/images/p-d-step-03.jpg?v=fc541db2); } .bg-summary { background-image: url(/ritual/images/p-d-step-03.jpg?v=fc541db2); } .bg-bundle { background-image: url(/ritual/images/p-d-bundle.jpg?v=8822c24e); } .bg-academy { background-image: url(/ritual/images/p-d-academy.jpg?v=ca3dc7dd); } html[data-mode="moonlight"] .bg-step1 { background-image: url(/ritual/images/p-d-evening-step-01.jpg?v=2eb78b4d); } html[data-mode="moonlight"] .bg-step2 { background-image: url(/ritual/images/p-d-evening-step-02.jpg?v=393536f2); } html[data-mode="moonlight"] .bg-step3 { background-image: url(/ritual/images/p-d-evening-step-03.jpg?v=05987723); } html[data-mode="moonlight"] .bg-summary { background-image: url(/ritual/images/p-d-evening-step-03.jpg?v=05987723); } html[data-mode="moonlight"] .bg-bundle { background-image: url(/ritual/images/p-d-bundle-evening.jpg?v=3b87a630); } /* 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/p-d-bundle.jpg?v=8822c24e), linear-gradient(to bottom, #967E8B 0%, #1E1914 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. */ /* --- the bundle pins, desktop --- Same method, read off the desktop photographs. The copy here is not one block but three narrow bands — measured off the page at 1440x1016 they sit at y 45.2-50.3, 56.5-61.6 and 64.5-66.2 — so most wordmarks clear them and only two pins had to move. Both candles' wordmarks fall inside the middle band, so they ride down to just under the lowest one; the morning serum sits in the gap between the first two bands. Tuned at 1440x1016, where the photograph fills its panel. The panel pins the image's WIDTH, so on a shorter, wider window it is cropped top and bottom and every fixed percentage drifts — true of all three doshas, a property of the layout rather than of these numbers. */ .pin-m1 { left: 33.2%; top: 71.5%; } /* candle — below the hint band */ .pin-m2 { left: 91.0%; top: 44.8%; } /* tea */ .pin-m3 { left: 60.7%; top: 59.5%; } /* supplement */ .pin-m4 { left: 18.5%; top: 52.3%; } /* skin — in the copy gap */ .pin-e1 { left: 19.6%; top: 75.8%; } /* candle — below the hint band */ .pin-e2 { left: 90.5%; top: 43.5%; } /* tea */ .pin-e3 { left: 54.7%; top: 55.8%; } /* supplement */ .pin-e4 { left: 39.4%; top: 75.0%; } /* skin */ html[data-mode="moonlight"] #bundle .panel.bg-bundle { background-image: url(/ritual/images/p-d-bundle-evening.jpg?v=3b87a630), linear-gradient(to bottom, #0F1729 0%, #070709 100%); /* 100px up at 1920x900, where the overflow below the panel is 352px — as a percentage rather than pixels for the same reason as Vata's: at the 1440 design width this photograph nearly fits and 28% of that overflow is a couple of pixels, where -100px would have opened a gap. style.css now carries Vata's 55% on this selector, so this has to be restated. */ background-position: center 28%, center top; } #body-mind-senses .pin-stage { background-image: url(/ritual/images/p-d-body-mind-senses.jpg?v=72e38c70); } /* 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/p-d-closing.jpg?v=148961cc); /* `cover` at `center` split the overflow top and bottom and took her head off. `top` gives the whole 82px of it back to the top edge, which is every pixel this photograph has — see NOTES.md item 25: the desktop export itself is cropped at her crown, so the head cannot come fully into frame without a new export. */ background-position: center top; } /* #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/p-d-herb-story.jpg?v=ebae14e4); } /* 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/p-wc-clouds.jpg?v=c9a293f9); } /* --- 4 · herb story --- */ } /* 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 Pitta 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 pitta.html carries the academy