/* Yajña Today — the landing page. ──────────────────────────────────────────────────────────────────────────────────────────── The theme tokens are lifted verbatim from the app's own src/style.css, which draws them from branding/yajna-logo-kit/BRAND.md, so the site and the app are one palette rather than two that nearly match. Dark is the default (:root) because dark is the app's default; light is an override on [data-theme="light"], set by the inline script in and by the toggle. Do not retune a value here on its own. If one moves, it moves in the app first and this file follows — the whole point is that a visitor who downloads the app recognises the screen. The layout half below is Saṅkalpa Today's landing page, which is the closest sibling: one static column, a sticky bar, an auto-fit grid. Four blocks are this page's own and each says why where it stands: the two-audience `.side` cards (no sister site has two audiences), the `.legend` swatches (which have to be the app's calendar colours, not near-misses), the `.reasons` list under Privacy, and the whole `.fb-*` form (neither sister site posts anything from the page at all). ── The trap this family keeps re-learning ────────────────────────────────────────────────── **A class that sets `display` silently defeats the `hidden` attribute**, because a class-level declaration outranks the UA's `[hidden] { display: none }` rule. Every class here that sets `display` and is also hidden by attribute therefore carries its own `[hidden]` companion. `.dl-version` is the one that was actually wrong: both sister sites declare `display: inline-block` on it with no re-assert, so an empty version chip is a bordered pill with nothing in it whenever `VERSION` is unset. Fixed here — see the note at that rule. */ :root { color-scheme: dark; /* native controls (the select's glyph, scrollbars) follow the theme */ /* The app's dark ramp: night #2F4665 warmed and taken down with the warm-black ink #2A1F17, so the ramp gets warmer as it gets deeper — the right direction for an app whose subject is a fire. BRAND.md reserves #22314A and #1A2538 for the brand sheet's own chrome and says in as many words that nothing shipped may use them, which is why this ramp is not Saṅkalpa's. */ --bg: #1D2839; --surface: #263449; --surface-2: #2F4665; /* the brand's night exactly — the ground the mark is drawn on */ --border: #3C5273; /* night lightened; a rule, not a highlight */ --text: #F2E9D8; /* the family cream */ --muted: #C3B8A6; /* the cream desaturated to a warm grey */ /* The fire is the accent, and it changes with the ground because a single value cannot serve both: #F98601 is unusable as text on cream (2.06:1) and #682E0D is unusable on night (1.40:1). So the light theme moves to the ember below — the same fire, lower down. **Both hexes outlived the artwork they were named from, and that is on purpose.** They were quotations from a drawing two redraws back, whose flame was the flat #F98601 and whose ember role was #682E0D. Nothing since carries either: the mark is tonally modelled, its fire is the gold family (#e07329 / #fd9617 / #fdb22d, with #f43304 at the arch tips and #fed449 as the flame's highest highlight) and its browns are the hair and skin families, and BRAND.md's palette contains neither of these two. They stay anyway, because they are UI values in the family's hue rather than samples of the mark, and because the app's own src/style.css still declares exactly these two — this page follows the app, not the kit. If the app ever re-derives its accent from the new gold family, this file follows it there and not before. The ratios are consequently measured here rather than read out of BRAND.md, which no longer states them: 5.96:1 for --accent on --bg, 8.78:1 for the light theme's on cream. No retune for this page beyond that. The sister sites both shift --accent off the app's value because the app's accent fails as *link text* (My Sādhana's #7C5CFF is 4.31:1 / 3.97:1), and that is the only sanctioned reason to diverge. Here the numbers are already good, so the app's values are used unchanged. */ --accent: #F98601; /* the fire, at a value that reads on the dark ramp */ --accent-ink: #2A1F17; /* what may be written on an --accent fill; 6.46:1. Never white */ /* The calendar's two verdict colours. They are here because the legend in the When section shows them, and they are the app's own values so the swatch and the cell match. Neither is ever text: they are fills with var(--text) written over them. */ --good: #7CBB88; /* auspicious */ --bad: #F2A0AE; /* inauspicious. A rose rather than a red, so it cannot be confused with the orange accent above it */ /* Card and toast shadows. Warm-black rather than neutral black, because a neutral shadow greys cream paper. */ --shadow-ink: rgba(20, 14, 9, .55); --radius: 14px; /* The wordmark's face. BRAND.md pins Palatino for the outlined lockups and forbids a display or script face, so the live-text wordmark is set in the same family, with the metric compatible clones next in line for Linux and Georgia as the last resort that still carries the ñ. Also used for the headings, as Saṅkalpa's does. */ --serif: "Palatino Linotype", Palatino, "Book Antiqua", "URW Palladio L", P052, Georgia, "Noto Serif", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* This page's own two, and they are layout rather than colour. The bar is 60px here against the app's 52px: the app's is a phone chrome bar over a full-height view, this one carries seven nav links and a brand wordmark on a desktop page. */ --topbar-h: 60px; --page: 1120px; /* content column; the bands are centred inside it */ } [data-theme="light"] { color-scheme: light; --bg: #F2E9D8; /* cream — the family ground */ --surface: #FBF7EF; /* the kit's off-white. Never pure #FFF. It used to be named here as "the line role"; the redraw has no `line` role, and #FBF7EF is now the declared substitute for the puṇḍras' pure #fff — same value, same rule, different thing in the drawing */ --surface-2: #EADFC9; /* the paper mid-tone, shared with Saṅkalpa Today by rule */ --border: #DCCBA9; /* the kit's tile edge, used as the page's rule */ --text: #2A1F17; /* the warm black. Never pure #000 */ --muted: #6B6152; /* The same fire as the accent above, low enough to read on paper. See the note there: this is the old drawing's ember value kept as a UI token, not a colour sampled from the mark. */ --accent: #682E0D; --accent-ink: #F2E9D8; --good: #2F6B41; --bad: #A6273E; --shadow-ink: rgba(42, 31, 23, .16); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; } /* Anchored sections must not slide under the sticky bar. */ :target, section[id] { scroll-margin-top: calc(var(--topbar-h) + 12px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } /* Theme-aware scrollbars (the default track is white, which glares in dark mode). */ * { scrollbar-color: var(--border) transparent; } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--surface-2); border: 3px solid var(--bg); border-radius: 8px; } a { color: var(--accent); } a:hover { text-decoration: none; } h1, h2, h3 { line-height: 1.25; } img { max-width: 100%; } /* Visually hidden but readable by assistive tech. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--accent); color: var(--accent-ink); padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 600; text-decoration: none; } .skip-link:focus { top: 0; } /* Keyboard focus, once, in one place — every control below inherits it. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ── The brand ───────────────────────────────────────── */ /* The mark plus the name as live text, and `--mark` is the one number a slot sets: the gap and both type sizes follow from it. Copied from the app's own stylesheet so the two match. **The floor is 87 px and it is not negotiable.** It has survived two redraws unchanged, but what it is protecting changed again, so the numbers here are the current drawing's — one purohita facing a household of four across the fire. BRAND.md renders the committed vector at every size and looks: at 87 px the mark is 78 × 48 px of its tile and everything still reads, and that is "the number to plan around"; by 60 px each ūrdhva-puṇḍra has dropped to a single tick and the children's faces to dots, though four heads on the right are still four; by 48 px the children merge into the adults and the household reads as a mass of about three; by 40 px it is a cluster you can tell is more than one person and cannot count. It is a tableau of small objects, not a monogram. **And this mark is paler again than the one it replaces, which makes the floor matter more rather than less.** The drawing is contained rather than cropped — the owner's instruction, that the whole scene be visible in the icon — so 45% of the tile is ground and BRAND.md measures **6.21% dark ink at 87 px against the previous cut's 14.74%**, under half, with the tile 36.3% covered where it was 54.1%. What improved is the *shape* of the decay: dark-ink share is flat across six doublings (retention 109%, against 73% for the cut it replaces), because the 0.55-unit contour is sub-pixel below 473 px and holds the silhouette's weight constant all the way down. It reads smaller everywhere; it does not collapse anywhere. So `--mark` is 112px in the hero and 96px on a phone, and it never follows Saṅkalpa's 84/64 ramp, whose mark holds its ink flat and can. The two lockup files in assets/ are consequently not placed on this page at all, and that is the same rule applied one step further: BRAND.md's floor for the horizontal lockup is 520px and for the stacked one 320px — set by the tagline inside them, not by the mark — and this page has no slot that is unconditionally that wide on a 360px phone. Its instruction for exactly that case is "below 520 px use the mark alone", which is what the hero does. */ .brand { --mark: 40px; display: flex; align-items: center; gap: calc(var(--mark) * .37); text-decoration: none; color: inherit; } /* NOT square, and `--mark` is a WIDTH. The cuts are `yajna-mark-plain-*` — the artwork with no ground and the box cropped to it, 234.502 × 144.069, aspect 1.6277 — so pinning both dimensions to one number would squash the drawing to 68% of its height. `aspect-ratio` rather than `height: auto`, and the markup still pins both attributes, because these files are ~256 kB of path data and a row that reflows when the mark lands is what the pinned pair existed to prevent. **This row gains far less from the crop than the app's column does, and that is worth knowing before copying a number across.** The tiled cut's dead margins were 13.299 units at the sides against 63.196 under the art (`SCENE_BASE` seats the vedī at 0.7569 of the tile height). The app stacks its wordmark UNDER the mark, so it was eating the big one — 48 px of apparent gap at a 96 px slot against the 25 px asked for. Here the wordmark sits BESIDE the mark, so the crop recovers only the 5.1% side margin: about 6 px at this size. The gap below is therefore left alone rather than retuned to match the app's. */ .brand-mark { width: var(--mark); height: auto; aspect-ratio: 234.502 / 144.069; display: block; flex: none; } /* Theme-matched art: the night cut is the default, light swaps in the cream one. **The night cut *is* the cream one on a dark tile**, and that reverses what once stood here. An early drawing had to lighten its ember role to #C79A6E on night, because ember on night is 1.10:1 and the figures would not have been there at all. The rule since is "only the tile changes": every object keeps the colour it was drawn in, and BRAND.md walks all 76 colour fields demanding equality. It holds because the four shapes that own the ink box's edges measure 8.23, 5.30, 5.08 and 2.59 to one on night, so the silhouette is the most legible thing on the tile — and because the values that *do* lose contrast there (the mālā and the necklaces, six of them under 1.3:1) are all interior: removing the whole hair role costs 97 px of a 2048px silhouette, 0.010%. The one declared exception is the puṇḍras, which go #FBF7EF → #F2ECDF so five small marks do not read as light leaks. What is genuinely lost is the vedī's modelling — on cream three stepped courses, on night one mass with a lit top edge. **Both files are still needed even though neither carries a tile any more**, and the reason is no longer the ground — it is the puṇḍras above and the contour. The light cut carries #351505 at 0.55 units because `cloth-4`/`cloth-5` measure 1.03:1 against cream and the figure would have no outer edge without it; the night cut carries none, because the same boundary sweep gives 4.5% under 1.50:1 there against 25.8% on cream. Two cuts, two contour rules, one swap. */ .brand-mark-light { display: none; } [data-theme="light"] .brand-mark-dark { display: none; } [data-theme="light"] .brand-mark-light { display: block; } /* Live text, not artwork: assistive tech reads "Yajña Today", the ñ cannot be lost to a rasteriser, and the name is selectable — which is what My Sādhana's all-artwork lockup gives up. The caps are a `text-transform` for the same reason: the DOM keeps the real spelling. Serif, regular weight, with the tracking build_brand.py gives the kit's own wordmarks. `display: block` because this is a

in the hero and a inside the header's link. */ .brand-words { display: block; margin: 0; font-family: var(--serif); font-weight: 400; font-size: max(15px, calc(var(--mark) * .235)); line-height: 1.1; } /* Tracking adds its space after the last letter too; the negative margin takes that back. */ .brand-name { display: block; text-transform: uppercase; letter-spacing: .16em; margin-right: -.16em; } /* The one place gold appears on this page. BRAND.md allows #D69A2C as a typographic accent and nothing else — it is 2.05:1 on cream, so it can never be body copy — and a wordmark's second line is precisely that use. Written as a literal rather than tokenised so it cannot spread to anything a reader has to act on. */ .brand-sub { display: block; text-transform: uppercase; letter-spacing: .26em; margin-right: -.26em; font-size: max(11px, .62em); color: #D69A2C; } /* The bar carries the wordmark alone: 87px of mark will not fit a 60px row, and every lockup cut has a floor wider than the slot. `--mark` here sizes the type and nothing else — the same trick, and the same number, as the app's `.topbar-words`. ONE ROW, and at ONE SIZE, which is what the app's bar does and is why both are stated here rather than inherited. Everywhere the wordmark sits under artwork — this page's hero, the app's drawer, splash and gates — `.brand-name` and `.brand-sub` stack and the sub is `.62em`, a second line subordinate to the name above it. In a bar there is no second line: two runs on one baseline at two sizes read as a name with something appended rather than as one wordmark, and two stacked lines spend the whole 60px on type. Side by side at one size they are one object. `align-items: baseline`, not `center`: a wordmark set on two optical centres is the thing that looks accidental. `font-size: inherit` rather than a literal so it tracks `.brand-words`' own max(15px, --mark * .235) and cannot drift from the run beside it. The tracking stays UNEQUAL — .26em against the name's .16em. With the size drop gone that difference, plus the gold, is what keeps TODAY subordinate; equalising both would give two identical runs and lose the hierarchy. The negative right margins are doing more work here than stacked: without them the gap would be .42em plus YAJÑA's trailing .16em, and the row would sit left of centre by half of TODAY's trailing .26em. */ .brand-row { --mark: 68px; } .brand-row .brand-words { display: flex; align-items: baseline; gap: .42em; } .brand-row .brand-name, .brand-row .brand-sub { display: inline; } .brand-row .brand-sub { font-size: inherit; } /* ── Top bar ─────────────────────────────────────────── */ #topbar { position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; gap: 16px; padding: 0 max(16px, calc((100% - var(--page)) / 2)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* `color-mix` is recent enough to want a floor: an opaque bar is a fine outcome without it. */ @supports not (background: color-mix(in srgb, red 50%, transparent)) { #topbar { background: var(--bg); } } .topnav { display: flex; gap: 4px; margin-left: auto; } .topnav a { color: var(--muted); text-decoration: none; font-size: 14px; padding: 8px 12px; border-radius: 10px; white-space: nowrap; } .topnav a:hover { background: var(--surface-2); color: var(--text); } .topbar-controls { display: flex; align-items: center; gap: 8px; } /* ── The language picker ─────────────────────────────── */ .lang { position: relative; } /* Flag only when closed, which is why this is a hand-built listbox and not a