/* Copyright (c) Pawan Nayar · LLOS.ai · 2026 — Original pedagogy, voice, and design — all rights reserved. */ /* ═══════════════════════════════════════════════════════════════════════════════════════════ GITA v2 — the page's own thin layer. Everything else comes from the house skin. [2026-09-02] REWRITTEN. The first version of this file was the mistake Pawan named: a contrast patch laid over the old page, which kept the Tailwind CDN, the twilight palette and the Inter/Merriweather pairing. It changed nothing about the look and feel — it was still his page. This version exists only because ONE component the hub needs is not in the shared skin: the audio player bar. Everything else on the page — .wrap .hero .eyebrow .hero-sub .bigsearch .ac-panel .try-row .hub-stats .sec-head .chapter-list .chapter-card .serie .ladder .rung .faq .copyr .status — is used exactly as subjects/common/subject-hub.css already defines it. Every colour below is a token from assets/shell/tokens.css. There is not one raw hex in this file, and not one raw font size — the type roles do that work. If a value here is wrong, it is wrong in the token, and it gets fixed once, for every page. ═══════════════════════════════════════════════════════════════════════════════════════════ */ /* ═══ THE PLAYER ════════════════════════════════════════════════════════════════════════════ [2026-09-02] REDESIGNED after Pawan: "mobile the bottom bar has so much height and is fixed. and in desktop it is confused with strange alignment and gaps." MEASURED, the version he was looking at: 106px of fixed bar plus 16px reserved = 122px gone from every screen, always, playing or not. On a 567px phone that is 21% of the viewport spent on three transport buttons and three option chips — on a page built to be read. Two states. At REST the page reserves nothing and the whole thing is one circle. PLAYING, it is a slim row on the rail. The markup is in gita-player.js so the three pages cannot drift. */ .gp{ position:fixed; left:0; right:0; bottom:0; z-index:60; pointer-events:none } /* The contents ride the SAME rail as the page — 1200 with the 1.5/2.5/5.5/7rem ladder. A bar hard against the window edge under a hero that sits on the rail is what read as "strange alignment". */ .gp-rail{ max-width:var(--hub-grid-max); margin:0 auto; /* --gp-lift is set in JS from the live height of the shell's consent bar, so the player never lands on Accept. Measured, because the bar's class is the shell's to change, not ours. */ padding:0 1.5rem calc(var(--space-4) + var(--gp-lift, 0px)); display:flex; justify-content:flex-end; position:relative; } @media(min-width:640px){ .gp-rail{ padding-inline:2.5rem } } @media(min-width:1024px){ .gp-rail{ padding-inline:5.5rem } } @media(min-width:1440px){ .gp-rail{ padding-inline:7rem } } /* ── AT REST — one control, because there is exactly one thing to say: start. ───────────────── */ .gp-cue{ /* [2026-09-03] Pawan: "is Listen button too dominating???? I feel so? Do apps have such buttons" No, they do not, and it was breaking the one law I keep quoting at myself. MEASURED: 120x52, solid --primary, the word LISTEN in caps mono, plus a heavy orange shadow. That is a decision-page CTA — the treatment you give a sign-up — floating over scripture, for an action taken roughly once a sitting. UI volume follows frequency, and this was at maximum. What audio apps actually do: play lives ON the item (a small circle on the row or the artwork), and a bar appears only once something is playing. Nobody floats a coloured pill that says LISTEN. So this is an affordance now, not a call to action: icon only, no word, a white surface with the accent carried by the icon and a hairline, at the 44px target. It is still the easiest thing to hit on the page; it just stops shouting. */ pointer-events:auto; display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; border-radius:50%; background:var(--card); border:1px solid var(--border); color:var(--primary); cursor:pointer; font-size:var(--fs-h3); line-height:1; box-shadow:0 6px 18px -8px rgba(0,0,0,.28); transition:border-color .15s, background .15s, transform .12s var(--spring); } .gp-cue:hover{ border-color:var(--primary); background:var(--accent-soft) } .gp-cue:active{ transform:scale(.96) } /* the word is gone; the label lives in aria-label where a screen reader still gets it */ .gp-cue-tx{ display:none } .gp[data-state="live"] .gp-cue{ display:none } /* ── PLAYING — one line, 56px, and it says what is playing before it offers a control. ──────── */ .gp-live{ display:none } .gp[data-state="live"] .gp-live{ pointer-events:auto; display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:56px; padding:.5rem .6rem .5rem .5rem; background:var(--card); border:1px solid var(--border); border-radius:999px; box-shadow:0 12px 34px -16px rgba(120,72,20,.45); } .gp-meta{ display:flex; flex-direction:column; min-width:0; flex:1; gap:.05rem } .gp-title{ font-family:'Playfair Display',serif; font-weight:700; font-size:var(--fs-body); color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* MEASURED at 390 on the live site: "CHAPTER 1 / 18" broke into three lines. A counter never wraps. */ .gp-counter{ font-family:'JetBrains Mono',monospace; font-size:var(--fs-micro); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gp-transport{ display:flex; gap:.15rem; flex:0 0 auto } .gp-btn{ width:var(--target-pref); height:var(--target-pref); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; border:0; background:none; color:var(--text-secondary); font-size:var(--fs-h3); line-height:1; cursor:pointer; transition:background .15s, color .15s; } /* Hover moves the surface, never the ink — svg_icon_blender.html:70-77, measured. */ .gp-btn:hover{ background:var(--accent-soft) } .gp-play{ background:var(--primary); color:#fff; font-size:var(--fs-h4) } .gp-play:hover{ background:var(--primary-deep); color:#fff } .gp-ghost{ font-size:var(--fs-h3) } .gp-close{ font-size:var(--fs-h3); color:var(--text-muted) } /* ── SETTINGS behind one mark. Language is chosen about once a session; it does not belong in the reading light beside a control pressed every verse. ── */ .gp-sheet{ pointer-events:auto; position:absolute; right:1.5rem; bottom:calc(100% - .5rem); min-width:210px; background:var(--card); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow-lg); padding:.4rem; z-index:2; } @media(min-width:640px){ .gp-sheet{ right:2.5rem } } @media(min-width:1024px){ .gp-sheet{ right:5.5rem } } @media(min-width:1440px){ .gp-sheet{ right:7rem } } .gp-srow{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); padding:.35rem .5rem } .gp-sk{ font-size:var(--fs-ui); color:var(--text-secondary) } .gp-opt{ min-width:76px; height:36px; padding:0 .7rem; border-radius:9px; border:1px solid var(--border); background:var(--card); font-family:'JetBrains Mono',monospace; font-size:var(--fs-meta); font-weight:700; color:var(--text-primary); cursor:pointer; transition:border-color .15s, background .15s; } .gp-opt:hover{ border-color:var(--primary); background:var(--accent-soft) } /* Progress reports; it does not ask. A hairline across the very bottom of the window. */ .gp-bar{ position:fixed; left:0; right:0; bottom:0; height:2px; background:transparent } .gp[data-state="live"] .gp-bar{ background:var(--border-soft) } .gp-bar i{ display:block; height:100%; width:0; background:var(--primary); transition:width .25s linear } /* On a phone the row keeps the play button, the title and the transport. The counter is the thing that goes, because the title already says where you are. */ @media(max-width:560px){ .gp-rail{ padding-bottom:calc(var(--space-3) + var(--gp-lift, 0px)) } .gp[data-state="live"] .gp-live{ gap:var(--space-2); padding:.4rem .45rem } .gp-counter{ display:none } .gp-title{ font-size:var(--fs-ui) } .gp-btn{ width:40px; height:40px } .gp-play{ width:var(--target-pref); height:var(--target-pref) } } /* ═══ SEARCH — the design/glossary/viewer.html treatment, which Pawan named as the reference ════ [2026-09-02] Pawan: "search looks sick when selected". subject-hub.css:175 puts a 5px orange halo AND a 38px orange drop shadow under .bigsearch form:focus-within. On a cream ground that is a smear, not a focus state. design/glossary/viewer.html:72 does the entire job in one line: the border takes the accent, and nothing else moves. */ .gitahub .bigsearch form{ border-width:1.5px; border-color:var(--border); box-shadow:var(--shadow); transition:border-color .2s; } .gitahub .bigsearch form:focus-within{ border-color:var(--primary); box-shadow:var(--shadow); /* the halo is gone, deliberately */ } /* The panel opens and closes outright — display, not a fade. A suggestion list that dissolves is still on screen while it is dissolving, which is what "doesn't roll up" looks like. */ .gitahub .ac-panel{ display:none; opacity:1; visibility:visible; transform:none; border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); overflow:hidden } .gitahub .ac-panel.open{ display:block } .gitahub .ac-item.sel, .gitahub .ac-item:hover{ background:var(--accent-soft); color:var(--primary-deep) } .gitahub .ac-empty{ padding:.85rem .9rem; font-size:var(--fs-ui); color:var(--text-muted) } /* [2026-09-02] The SERP collapse, from design/glossary/viewer.html:62-68. Once you are searching, the hero furniture folds away so the answers are the page rather than something below it. */ .gitahub .hero{ transition:padding .35s ease } .gitahub .hero .hub-stats, .gitahub .hero .try-row{ overflow:hidden; max-height:200px; opacity:1; transition:max-height .4s var(--spring), opacity .3s ease, margin .35s ease } body.searching .gitahub .hero .hub-stats, body.searching.gitahub .hero .hub-stats, body.searching.gitahub .hero .try-row{ max-height:0; opacity:0; margin:0 } body.searching.gitahub .hero-sub{ display:none } /* [2026-09-02] Two faults visible the moment the panel opened: 1. "Karma YogaCHAPTER 3 · 43 VERSES" — .ac-label and .ac-type are both inline in the shared skin, which is right when the type sits in its own column and wrong when it follows the label. The name goes on its own line; the metadata sits under it, quieter. 2. A second focus ring INSIDE the field. The form already takes the accent border on focus-within, and .gitahub :focus-visible was drawing an outline on the input as well, so focusing the search produced a box inside a box. design/glossary/viewer.html:73 settles it: .searchbox input{border:0;outline:0} — the CONTAINER shows focus, the input never does. */ .gitahub .ac-item{ display:block; padding:.6rem .9rem; text-decoration:none; border-bottom:1px solid var(--border-light,var(--border-soft)) } .gitahub .ac-item:last-child{ border-bottom:0 } .gitahub .ac-tx{ display:block; min-width:0 } .gitahub .ac-label{ display:block; font-size:var(--fs-body); font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .gitahub .ac-type{ display:block; margin-top:.15rem; font-family:'JetBrains Mono',monospace; font-size:var(--fs-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted) } .gitahub .bigsearch input:focus-visible, .gitahub .bigsearch input:focus{ outline:0 !important; box-shadow:none !important } /* ═══ THE FOLD ══════════════════════════════════════════════════════════════════════════════ [2026-09-02] MEASURED on a 567px-tall window: the eyebrow pill wrapped to two lines, the h1 ran to three, the subtitle to four — and the first chapter was nowhere near the screen. A page about a book showed no book above the fold. The hero keeps its voice and loses its padding. */ .gitahub .hero-top{ padding-top:var(--space-5); padding-bottom:var(--space-5) } .gitahub .eyebrow{ white-space:nowrap } .gitahub .hero h1{ font-size:clamp(1.65rem,4.6vw,3rem); line-height:1.06; margin:.5rem 0 .45rem } .gitahub .hero-sub{ max-width:46ch; margin-bottom:var(--space-5) } @media(max-width:639px){ .gitahub .hero-top{ padding-top:var(--space-3); padding-bottom:var(--space-4) } .gitahub .hero h1{ font-size:clamp(1.5rem,7vw,2rem) } .gitahub .hero-sub{ font-size:var(--fs-ui); margin-bottom:var(--space-4) } .gitahub .try-row{ margin-top:var(--space-3) } .gitahub .hub-stats{ margin-top:var(--space-4) } } /* ═══ THE GAP UNDER THE HERO ═════════════════════════════════════════════════════════════════ [2026-09-02] Pawan: "strange alignment and gaps". The hero band ends in a 3px accent rule and then the first section opened its own --sp-xl on top of it — two separate spaces stacked into one hole. The section after the hero starts tight; the rhythm resumes below it. */ .gitahub .hero + main .v2-sec:first-of-type{ margin-top:var(--sp-md) } @media(max-width:639px){ .gitahub .hero + main .v2-sec:first-of-type{ margin-top:var(--sp-sm) } } /* [2026-09-02] THE TITLE WAS TRUNCATING TO "Arjuna Vish…". On a 390px row the transport, the settings mark and the close were taking 4 x 40px before the name got a look in. The controls step down to 38px on a phone — still over the 24px WCAG floor, and the play button, the one that matters, keeps its full 44. That returns ~24px to the name. */ @media(max-width:560px){ .gp-ghost{ width:38px; height:38px; font-size:var(--fs-h4) } .gp-close{ width:34px; height:34px; font-size:var(--fs-body) } .gp-transport{ gap:0 } .gp-title{ font-size:var(--fs-meta) } } /* ═══ CONTINUE READING (82, 83) ═══════════════════════════════════════════════════════════════ [2026-09-03] Pawan: "ensure they are always one carousal row and they also need expressive shapes, some visual feel." ALWAYS one row: nowrap plus flex:0 0 auto on the card, so it can never become a wrapping grid however many marks accumulate. It scrolls sideways with snap points and the next card peeks, which is what tells a thumb there is more. And each card carries its chapter's matched shape - the same one the gateway uses - so a resumed chapter is recognisable by its mark before the words are read. */ .gitahub .backrow{ display:flex; flex-wrap:nowrap; gap:var(--space-3); overflow-x:auto; overflow-y:hidden; padding-bottom:.45rem; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; } .gitahub .backrow::-webkit-scrollbar{ height:4px } .gitahub .backrow::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px } .gitahub .backcard{ flex:0 0 auto; width:clamp(210px, 62vw, 268px); scroll-snap-align:start; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); border-radius:14px; border:1px solid var(--border); background:var(--card); text-decoration:none; transition:border-color .15s, background .15s; } .gitahub .backcard:hover{ border-color:var(--primary); background:var(--accent-soft) } .gitahub .backcard.lead{ border-color:var(--primary); background:var(--accent-soft) } .gitahub .bshape{ width:44px; height:44px; flex:0 0 auto; border-radius:11px; overflow:hidden; background:#fff; border:1px solid var(--border); display:inline-flex; align-items:center; justify-content:center; } .gitahub .bshape svg{ width:100%; height:100%; display:block } .gitahub .btx{ min-width:0; display:flex; flex-direction:column; gap:.05rem } .gitahub .backcard .bk{ font-family:'JetBrains Mono',monospace; font-size:var(--fs-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--primary-deep) } .gitahub .backcard .bt{ font-family:'Playfair Display',serif; font-weight:700; font-size:var(--fs-body); color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .gitahub .backcard .bs{ font-size:var(--fs-meta); color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } /* ═══ THE POLL'S ANSWER ══════════════════════════════════════════════════════════════════════ [2026-09-02] MEASURED on live: choosing an option changed nothing at all, while the page promised "choose one to reveal a verse tailored for your journey". A poll that swallows the answer is worse than no poll. The reply uses .rung, the component already on the page. */ #pollAnswer .rung{ background:var(--accent-soft) } #pollOpts .rung{ cursor:pointer; text-align:left; font:inherit; width:100% } #pollOpts .rung:hover{ border-color:var(--primary) } /* ═══ FOCUS — visible on every ground on this page ═══════════════════════════════════════════ */ .gitahub :focus-visible{ outline:2px solid var(--primary); outline-offset:2px; border-radius:6px } /* [2026-09-06] The v2 mark is gone with the eyebrow it hung off. It existed so a sandbox would not be mistaken for the live page - a note from me to me, printed above the fold for everyone. */ /* ═══ THE FOLD, CUT TO SIZE ═════════════════════════════════════════════════════════════════ [2026-09-03] Pawan: "we definitely need to reduce white space and text size so that vp1 is meaningful even with image." MEASURED before: desktop hero 531px with the first chapter card at 758 of a 900 viewport, so a reader saw a title and a search box and no book. Mobile hero 520px, first card at 711, and the byline was still rendering at 53px tall because an earlier hide rule lost to a later one. Every value below is a cut, not a redesign - same elements, same order, less air. Appended last so nothing can quietly win over it, which is how the byline survived the first attempt. */ .gitahub .hero-top{ padding-top:var(--space-3); padding-bottom:var(--space-4) } .gitahub .eyebrow{ font-size:var(--fs-micro); padding:.22rem .6rem } .gitahub .gita-title{ margin:.3rem 0 .25rem } .gitahub .gita-title .t-sans{ font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.2 } .gitahub .gita-title .t-latin{ font-size:clamp(1.1rem,2.2vw,1.6rem) } .gitahub .hero-sub{ font-size:var(--fs-ui); line-height:1.45; max-width:52ch; margin:0 auto var(--space-2) } .gitahub .hero-byline{ font-size:var(--fs-meta); margin:0 0 var(--space-3) } .gitahub .lang-pick{ margin:0 auto var(--space-3); padding:.2rem } .gitahub .lang-btn{ min-height:36px; padding:0 .95rem; font-size:var(--fs-meta) } .gitahub .bigsearch form{ padding:.45rem .5rem .45rem .9rem } .gitahub .try-row{ margin-top:var(--space-3) } .gitahub .hub-stats{ margin-top:var(--space-3); gap:1.4rem } .gitahub .hub-stats .st b{ font-size:var(--fs-h4) } .gitahub .hub-stats .st span{ font-size:var(--fs-micro) } .gitahub .hero + main .v2-sec:first-of-type{ margin-top:var(--space-5) } @media(max-width:639px){ .gitahub .hero-top{ padding-top:var(--space-2); padding-bottom:var(--space-3) } .gitahub .gita-title .t-sans{ font-size:1.75rem } .gitahub .gita-title .t-latin{ font-size:1.05rem } .gitahub .hero-sub{ font-size:var(--fs-meta); line-height:1.4; max-width:38ch } /* the byline is a flourish and the line above already says what the page is */ .gitahub .hero-byline{ display:none !important } .gitahub .try-row{ margin-top:var(--space-2) } .gitahub .hub-stats{ margin-top:var(--space-2); gap:1rem } .gitahub .hero + main .v2-sec:first-of-type{ margin-top:var(--space-3) } } /* ═══ RESTORED 2026-09-03 ════════════════════════════════════════════════════════════════════ Everything below was deleted by a marker-splice in this file and is put back verbatim. Appended at the end deliberately: no more inserting before a marker. */ /* ── SHAPE FRAMES ────────────────────────────────────────────────────────────────────────── White frame, never amber or cream: an amber ground eats the amber half of a dual-tone shape (EXPRESSIVE_SHAPES_GUIDE §4). overflow:hidden is the invisible boundary for peak motion. */ .ch-shape, .gs{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; } .ch-shape svg, .gs svg{ display:block; width:100%; height:100% } /* ── THE GATEWAY CARD ────────────────────────────────────────────────────────────────────── The chapter's own painting leads; the matched shape sits on it as a small mark; the number steps back to a label. */ .gitahub .chapter-card{ position:relative; flex-direction:column; align-items:stretch; padding:0; overflow:hidden; gap:0; } .gitahub .ch-thumb{ width:100%; height:auto; display:block; aspect-ratio:640/349; object-fit:cover } .gitahub .chapter-card > .ch-shape{ position:absolute; left:12px; top:12px; width:44px; height:44px; box-shadow:0 4px 14px rgba(0,0,0,.18); } .gitahub .chapter-info{ padding:var(--space-4) } .gitahub .chapter-num{ position:absolute; right:12px; top:12px; width:auto; height:auto; background:rgba(255,255,255,.92); border-radius:999px; padding:.2rem .5rem; font-size:var(--fs-micro); color:var(--text-secondary); flex-direction:row; gap:.2rem; } .gitahub .chapter-actions{ position:absolute; right:10px; bottom:10px; align-self:auto } @media(max-width:639px){ /* [2026-09-06] 34 -> 44. Pawan walked the page: half the badges read as black blobs. Measured amber said they were fine, and they were - what fails at 34px is the FORM, not the colour. A diya at 34px is a smudge whatever its palette. */ .gitahub .chapter-card > .ch-shape{ width:44px; height:44px; left:8px; top:8px } .gitahub .chapter-info{ padding:var(--space-3) } } /* ── THE CHAPTER BAND ────────────────────────────────────────────────────────────────────── The painting with the title as a layer ON it (Pawan's fix), sized in vh so both land inside the first screen. */ .gitach .ch-crumb{ padding:var(--space-3) 0 var(--space-2) } .gitach .ch-band{ position:relative; margin:0 0 var(--space-4); border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--bg-warm); line-height:0; /* [2026-09-18] Pawan, on chapter 5 at his own window: "whatever you did never fixed anything". The height used to be clamp(240px,38vh,400px) - FIXED while the width grew, so the frame's shape ran away with the screen. MEASURED across real widths: 1.44 at 360, 2.47 at 600, 2.01 at 768, 2.99 at 1280, 2.85 from 1440 up - against a painting that is 1.83. At 2.99 only 61% of the painting's height survives, which is how the sages in 5 lost their heads and the man in 14 disappeared. Per-chapter focal points could not fix that; they only chose which part to lose. The frame now holds a shape close to the art it carries, so every chapter keeps 80%+ at every width. */ width:100%; aspect-ratio:22/10; height:auto; max-height:min(60vh, 470px); } /* [2026-09-13] Pawan: "how do we improve wide image in chapter 2 such that krishna head is not cut". MEASURED at 1440: the band is 976x342, the painting renders 976x533 under cover, so 191px of it is cut. At 50% 62% that took 118px off the TOP - which is where every one of these paintings puts its faces. The desert and the ground at the foot of the frame carry nothing, so the window moves up: 22% cuts 42px from the top and 149 from the bottom. */ .gitach .ch-band img{ width:100%; height:100%; object-fit:cover; object-position:50% 22%; display:block; } .gitach .ch-band.no-art{ display:none } /* The plate is as wide as its words and SOLID - white at 93% over a warm painting reads as dirty grey, which is the "dark" Pawan saw. */ .gitach .ch-plate{ position:absolute; left:var(--space-4); bottom:var(--space-4); width:max-content; max-width:min(62%, 560px); display:flex; align-items:center; gap:var(--space-3); padding:.7rem 1rem; background:#fff; border:1px solid var(--border); border-radius:12px; line-height:normal; box-shadow:0 8px 24px -14px rgba(0,0,0,.4); } .gitach .ch-plate-tx{ min-width:0 } .gitach .ch-plate .ch-kicker{ margin-bottom:.1rem; font-size:var(--fs-micro) } .gitach .ch-plate h1{ margin:0; font-size:clamp(1.15rem, 2.4vw, 1.7rem); line-height:1.12 } .gitach .ch-plate .ch-sans{ font-size:var(--fs-ui); line-height:1.4 } .gitach .ch-hero-shape{ margin:0; flex:0 0 auto; width:52px; height:52px } .gitach .ch-sum{ max-width:var(--content-reading-max); margin:0 0 var(--space-5); font-size:var(--fs-body); line-height:1.5; color:var(--text-secondary); } /* On a phone the plate splits: solid behind the shape, .78 behind the words, painting showing through as a feeler. Both columns are painted on the PLATE, because the child would not stretch. Measured: ink on .78 white over the darkest banner tone is 9.0:1. */ @media(max-width:639px){ /* [2026-09-18] a height here would fight the aspect-ratio above and make the frame WIDER than the phone (measured: 528px of band inside a 390px screen). The phone keeps its own shape instead, closer to the painting's own 1.83 so almost nothing is lost on the smallest screen. */ .gitach .ch-band{ aspect-ratio:18/10; height:auto; max-height:none; border-radius:12px; margin-bottom:var(--space-3) } .gitach .ch-plate{ left:8px; right:8px; bottom:8px; width:auto; max-width:none; gap:0; padding:0; border-radius:10px; background:linear-gradient(to right, #fff 0, #fff 58px, rgba(255,255,255,.78) 58px, rgba(255,255,255,.78) 100%); border:0; box-shadow:0 8px 22px -14px rgba(0,0,0,.5); overflow:hidden; display:grid; grid-template-columns:58px 1fr; align-items:center; } .gitach .ch-plate .ch-hero-shape{ background:transparent; border:0; border-radius:0; width:auto; height:auto !important; padding:.4rem; display:flex; align-items:center; justify-content:center; } .gitach .ch-plate .ch-hero-shape svg{ width:42px; height:42px } .gitach .ch-plate-tx{ min-width:0; padding:.45rem .6rem; background:transparent; display:flex; flex-direction:column; justify-content:center; } .gitach .ch-plate .ch-kicker{ font-size:9px; letter-spacing:.08em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .gitach .ch-plate h1{ font-size:1.05rem; line-height:1.15 } .gitach .ch-plate .ch-sans{ display:none } .gitach .ch-sum{ font-size:var(--fs-ui); line-height:1.45 } } /* ── THE PEOPLE ROW ──────────────────────────────────────────────────────────────────────── The characters a chapter actually names, measured from its verses. */ .gitach .people{ display:flex; gap:var(--space-4); overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x proximity; } .gitach .people::-webkit-scrollbar{ height:4px } .gitach .people::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px } .gitach .person{ flex:0 0 auto; width:112px; scroll-snap-align:start; text-align:center; margin:0; display:block; text-decoration:none; color:inherit } .gitach .person:hover img{ border-color:var(--primary) } .gitach .person:hover b{ color:var(--primary-deep) } .gitach .person img{ width:96px; height:96px; border-radius:50%; object-fit:cover; border:1px solid var(--border); background:var(--card); } .gitach .person figcaption, .gitach .person .pcap{ display:block; margin-top:.45rem; line-height:1.3 } .gitach .person .mark{ width:96px; height:96px; border-radius:50%; border:1px solid var(--border); background:var(--card); display:flex; align-items:center; justify-content:center; font-size:1.9rem; margin:0 auto } .gitach .person:hover .mark{ border-color:var(--primary) } .gitach .person b{ display:block; font-family:'Playfair Display',serif; font-weight:700; font-size:var(--fs-ui); color:var(--text-primary) } .gitach .person span{ display:block; font-size:var(--fs-micro); color:var(--text-muted) } @media(max-width:639px){ .gitach .person{ width:88px } .gitach .person img{ width:76px; height:76px } .gitach .person .mark{ width:76px; height:76px; font-size:1.5rem } } /* ── The verse cards' leading, also lost in the splice. ── */ .gitach .vsans{ line-height:1.62 } .gitach .vtr{ line-height:1.5 } .gitach .vtrans{ line-height:1.5 } @media(max-width:639px){ .gitach .vcard{ gap:var(--space-2) } .gitach .vsans{ font-size:var(--fs-body); line-height:1.6 } .gitach .vtr{ font-size:var(--fs-ui); line-height:1.45 } } /* ── Skeleton, and the chapter tools (progress, resume, per-verse mark). ── */ .gitach .sk, .gitach .skel{ background:linear-gradient(90deg,var(--border-soft) 25%,var(--bg-warm) 37%,var(--border-soft) 63%); background-size:400% 100%; animation:skel 1.3s ease infinite; border-radius:8px; height:1em; margin:.45rem 0; } @keyframes skel{ 0%{background-position:100% 50%} 100%{background-position:0 50%} } .gitach .vcard.heard{ border-left:3px solid var(--primary) } .gitach .vhead{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2) } .gitach .vmark{ width:36px; height:36px; border:0; background:none; cursor:pointer; border-radius:50%; font-size:var(--fs-h4); line-height:1; color:var(--text-muted); transition:background .15s, color .15s; } .gitach .vmark:hover{ background:var(--accent-soft) } .gitach .vmark.on{ color:var(--primary) } .gitach .ch-tools{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; margin:var(--space-4) 0 0 } .gitach .ch-prog{ flex:1 1 160px; max-width:280px; height:4px; border-radius:999px; background:var(--border-soft); overflow:hidden } .gitach .ch-prog i{ display:block; height:100%; background:var(--primary) } .gitach .ch-tool{ display:inline-flex; align-items:center; min-height:var(--target-pref); padding:0 .9rem; border:1px solid var(--border); border-radius:10px; background:var(--card); font:inherit; font-size:var(--fs-ui); font-weight:700; color:var(--text-secondary); cursor:pointer; text-decoration:none; transition:border-color .15s, background .15s; } .gitach .ch-tool:hover{ border-color:var(--primary); background:var(--accent-soft) } .gitach .ch-tool.quiet{ font-weight:600; color:var(--text-muted) } /* ═══ ALSO RESTORED 2026-09-03 ═══════════════════════════════════════════════════════════════ Three more blocks the same splice removed. Only their later size overrides had survived, which is why the title ran on one line and the language buttons lost their pill. */ /* ── THE TITLE. Devanagari leads, the Latin name under it. ── */ .gitahub .gita-title{ display:flex; flex-direction:column; align-items:center; gap:.1rem; margin:.5rem 0; } .gitahub .gita-title .t-sans{ font-family:'Noto Sans Devanagari','Playfair Display',serif; font-weight:700; line-height:1.25; color:var(--text-primary); letter-spacing:-.01em; } .gitahub .gita-title .t-latin{ font-family:'Playfair Display',serif; font-weight:800; letter-spacing:-.02em; line-height:1.1; color:var(--primary-deep); } /* ── THE LANGUAGE DOOR. Each button written in the language it selects. ── */ .gitahub .lang-pick{ display:inline-flex; gap:.25rem; padding:.25rem; margin:0 auto var(--space-5); background:var(--card); border:1px solid var(--border); border-radius:999px; } .gitahub .lang-btn{ min-height:40px; padding:0 1.1rem; border:0; border-radius:999px; background:none; font-family:inherit; font-size:var(--fs-ui); font-weight:700; color:var(--text-secondary); cursor:pointer; transition:background .15s, color .15s; } .gitahub .lang-btn[lang="hi"]{ font-family:'Noto Sans Devanagari',sans-serif } .gitahub .lang-btn:hover{ background:var(--accent-soft) } .gitahub .lang-btn.is-on{ background:var(--primary); color:#fff } /* ── THE TOOLBAR. Drawn icons at a fixed optical size; every control on its own surface. ── */ .gp-btn svg{ width:20px; height:20px; display:block; pointer-events:none } .gp-play svg{ width:22px; height:22px } .gp-cue-ico svg{ width:20px; height:20px; display:block } .gp-cue-ico{ display:flex; align-items:center; justify-content:center } .gp-ghost{ background:var(--bg-warm); color:var(--text-secondary); border:1px solid var(--border-soft) } .gp-ghost:hover{ background:var(--accent-soft); border-color:var(--primary); color:var(--primary-deep) } .gp-ghost:active{ transform:scale(.94) } .gp .gp-close{ background:transparent; border-color:transparent; color:var(--text-muted) } .gp .gp-close:hover{ background:var(--bg-warm); border-color:var(--border-soft); color:var(--text-secondary) } .gp-play{ box-shadow:0 4px 12px -4px rgba(184,92,18,.55) } @media (max-width:560px){ .gp-ghost{ width:44px; height:44px } .gp-btn svg{ width:19px; height:19px } .gp-close{ width:38px; height:38px } .gp-close svg{ width:16px; height:16px } } /* ═══ VERSES AS TASK CARDS ═══════════════════════════════════════════════════════════════════ [2026-09-03] Component from career/prompt_studio/careers/g/geneticist.html:105-118, the file the shelf names for it. The lesson it carries: a grid of collapsible cards reflows every time one opens and the page jumps under the reader; letting the open card take the WHOLE ROW keeps every other card where it was. My grid before this was the failure the shelf records against the 72-card tool grid - every one of 47 to 78 verses at full weight, no filter, no ordering signal. A wall. */ .gitach .verses{ display:grid; grid-template-columns:1fr; gap:.7rem; margin:var(--sp-lg) 0; } @media(min-width:760px){ .gitach .verses{ grid-template-columns:repeat(2,minmax(0,1fr)) } } @media(min-width:1200px){ .gitach .verses{ grid-template-columns:repeat(3,minmax(0,1fr)) } } .gitach details.task{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:0; transition:box-shadow .2s, border-color .2s; } /* THE RULE: an open card spans the row, so nothing else moves. */ .gitach details.task[open]{ grid-column:1/-1; box-shadow:var(--shadow-lg); border-color:var(--primary-light); } .gitach .tsum{ list-style:none; cursor:pointer; padding:var(--space-4); display:grid; grid-template-columns:auto 1fr auto; gap:.35rem .6rem; align-items:baseline; } .gitach .tsum::-webkit-details-marker{ display:none } /* [2026-09-16] Only where a pointer can actually hover. Seen on a phone: every verse card that had been touched kept a cream patch, inset from the card's own edge, because a touch leaves :hover switched on until the next touch elsewhere. On a mouse the highlight is unchanged. */ @media (hover:hover){ .gitach .tsum:hover{ background:var(--bg-warm); border-radius:16px } } .gitach .tsum .tmark{ order:3; color:var(--primary-deep); font-weight:700; font-size:var(--fs-h4); /* [2026-09-18] 800 -> 700 */ line-height:1; align-self:center; } .gitach details.task[open] .tsum .tmark{ display:none } .gitach .tsum .vnum{ order:1 } .gitach .tsum .vmark{ order:2; justify-self:start } .gitach .tsum .vname{ order:4; grid-column:1/-1; font-family:'Playfair Display',serif; font-weight:700; font-size:var(--fs-h4); color:var(--text-primary); line-height:1.2; } /* Collapsed, the Sanskrit is ONE line - it identifies the verse without being the whole card. */ .gitach .tsum .vsans-line{ order:5; grid-column:1/-1; font-family:'Noto Sans Devanagari',serif; font-size:var(--fs-ui); line-height:1.7; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gitach details.task[open] .tsum .vsans-line{ display:none } /* the body carries it in full */ .gitach .tbody{ padding:0 var(--space-4) var(--space-4) } /* Open, the card owns the row - so prose finally gets the house reading measure. */ .gitach details.task[open] .vtr{ max-width:var(--content-reading-max) } .gitach details.task[open] .vsans{ font-size:var(--fs-h3); line-height:1.75 } @media(max-width:639px){ .gitach .tsum{ padding:var(--space-3) } .gitach .tsum .vname{ font-size:var(--fs-body) } .gitach .tbody{ padding:0 var(--space-3) var(--space-3) } .gitach details.task[open] .vsans{ font-size:var(--fs-h4); line-height:1.65 } } /* ═══ THE ACTIVE VERSE CARD ══════════════════════════════════════════════════════════════════ [2026-09-03] An open card gets what only an open card can use: its own shape, and a way to step to the neighbour without going back to the bar. Both are inside the disclosure, so a collapsed grid stays a clean list of references - the controls appear with the content they belong to, which is §4.5's rule about a shape living inside the thing it belongs to. */ .gitach .tbody-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin-bottom:var(--space-3); } .gitach .vshape{ width:52px; height:52px; border-radius:13px; flex:0 0 auto } .gitach .vwalk{ display:flex; align-items:center; gap:.4rem } .gitach .vstep{ width:36px; height:36px; border-radius:50%; border:1px solid var(--border); background:var(--card); color:var(--text-secondary); cursor:pointer; font-size:var(--fs-h4); line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:border-color .15s, background .15s; } .gitach .vstep:hover:not(:disabled){ border-color:var(--primary); background:var(--accent-soft); color:var(--primary-deep) } .gitach .vstep:disabled{ opacity:.35; cursor:default } .gitach .vpos{ font-family:'JetBrains Mono',monospace; font-size:var(--fs-micro); font-weight:700; letter-spacing:.08em; color:var(--text-muted); min-width:52px; text-align:center; } @media(max-width:639px){ .gitach .vshape{ width:44px; height:44px; border-radius:11px } /* [2026-09-07] 34 -> 44. This rule made the ONLY control smaller on the device where fingers are the input. MEASURED across home, chapter and verse at 390: vstep 34x34, vmark 36x36, vbtn 35 tall, try-chip 28 tall, concept chip 36 - every one under the 44px the house asks for. The frequency law says a control used constantly gets QUIETER, not smaller: volume comes off the surface, never off the hit area. So these keep their look and grow their target. */ .gitach .vstep{ width:44px; height:44px } } /* ═══ THE LISTEN CUE ON A WHITE GROUND ══════════════════════════════════════════════════════ [2026-09-03] Pawan: "how do we change background style of this button so that it doesnt seem lost on white on white scenario." It was a white disc with a hairline border, floating over cards that are also white. Against the cream page it read fine; against a card it vanished into it - the only thing separating them was a 1px #e7e2d8 line and a soft shadow. Three changes, none of which take it back to being a CTA: · the surface is the warm ground, not white, so it is never the same colour as what it floats on · the border is the accent at low weight - present on any ground, still quiet · a wider, softer shadow lifts it off whatever is behind it rather than relying on the edge The glyph stays the accent, so the button still reads as play and not as a decision. */ .gp-cue{ background:var(--bg-warm); border:1.5px solid var(--primary-light); box-shadow:0 4px 10px -2px rgba(120,72,20,.18), 0 10px 28px -10px rgba(120,72,20,.45); } .gp-cue:hover{ background:var(--accent-soft); border-color:var(--primary); box-shadow:0 4px 12px -2px rgba(120,72,20,.24), 0 12px 32px -10px rgba(120,72,20,.55); } /* ═══ SECTION RHYTHM ═════════════════════════════════════════════════════════════════════════ [2026-09-03] Pawan: "each section so much wasted space?" MEASURED on the hub at 1440: every section carried margin 48px top AND 48px bottom, and the section head another 22.4px below it. Between two sections that is 96px of nothing, then 22 more before the content - and the resume card, 97px tall, sat in a 262px section. The 8pt scale has the answer and I was not using it: --sp-lg (2rem) between sections, --sp-sm under a head. Section margins no longer stack, because only the top margin is set. */ .gitahub .v2-sec, .gitahub main section{ margin:var(--sp-lg) 0 0 } .gitahub .sec-head{ margin-bottom:var(--sp-sm) } .gitahub #backSec{ margin-top:var(--sp-md) } @media(max-width:639px){ .gitahub .v2-sec, .gitahub main section{ margin-top:var(--sp-md) } .gitahub .sec-head{ margin-bottom:var(--space-3) } } /* ═══ THE HERO'S OWN PADDING ═════════════════════════════════════════════════════════════════ [2026-09-03] Pawan: "2 row space after header". MEASURED: .hero padded 40px and .hero-top another 12px before the eyebrow - 53px of nothing between the site header and the first word. */ .gitahub .hero{ padding-top:var(--space-3) } .gitahub .hero-top{ padding-top:0 } @media(max-width:639px){ .gitahub .hero{ padding-top:var(--space-2) } } /* ═══ THE SEARCH, GIVEN ITS FACE BACK ════════════════════════════════════════════════════════ [2026-09-03] Pawan: "confused characterless search". Fixing the focus glow earlier I took the border down to a 1px hairline - and removed the field's identity along with the halo. The house ruler (subject-hub.css .bigsearch) is a 2px PRIMARY border: the field is meant to look like the way in. The rule stays that focus does not add a halo; it deepens the border it already has. */ .gitahub .bigsearch form{ border:2px solid var(--primary); box-shadow:var(--shadow) } .gitahub .bigsearch form:focus-within{ border-color:var(--primary-deep); box-shadow:var(--shadow) } /* ═══ THE COPYRIGHT, TO THE RULER ════════════════════════════════════════════════════════════ [2026-09-03] Pawan: "copyright font and spacing have style never followed." The ruler is career/prompt_studio/careers/g/geneticist.html:96 - the file REFERENCE_PAGES.md names for copyright alignment and size: .copyr{margin:2rem 0 1rem; font:600 .62rem 'JetBrains Mono',monospace; color:var(--soft); text-align:center} Mine was inheriting subject-hub's .copyr instead: bigger, Playfair, with a bold lead line. */ .gitahub .copyr, .gitach .copyr, .gitav .copyr, .gitacon .copyr, .gitaart .copyr{ margin:2rem 0 1rem; font:600 .62rem 'JetBrains Mono',monospace; color:var(--muted); text-align:center; background:none; border:0; padding:0; max-width:none; line-height:1.7; } .gitahub .copyr b, .gitach .copyr b, .gitav .copyr b, .gitacon .copyr b, .gitaart .copyr b{ font-weight:600; color:var(--muted); } /* ═══ VERSE OF THE DAY ═══════════════════════════════════════════════════════════════════════ [2026-09-03] The bwhub split card: art on one side, the line on the other. This is what stops the first view being typography on cream - a painting and a real sentence of the Gita, above the fold, before anything asks you to scroll. */ .gitahub .vod{ display:grid; grid-template-columns:minmax(0,168px) 1fr; align-items:stretch; max-width:660px; margin:0 auto var(--space-4); text-align:left; background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; text-decoration:none; transition:border-color .15s, box-shadow .15s; } .gitahub .vod:hover{ border-color:var(--primary); box-shadow:var(--shadow) } .gitahub .vod-art{ display:block; line-height:0; background:var(--bg-warm) } .gitahub .vod-art img{ width:100%; height:100%; object-fit:cover; object-position:50% 55%; display:block } .gitahub .vod-tx{ display:flex; flex-direction:column; justify-content:center; gap:.3rem; padding:var(--space-4) var(--space-5) } .gitahub .vod-kick{ font-family:'JetBrains Mono',monospace; font-size:var(--fs-micro); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary-deep) } .gitahub .vod-line{ font-family:'Playfair Display',serif; font-size:var(--fs-body); line-height:1.45; color:var(--text-primary) } .gitahub .vod-ref{ font-size:var(--fs-meta); color:var(--text-muted) } @media(max-width:639px){ .gitahub .vod{ grid-template-columns:100px 1fr; margin-bottom:var(--space-3) } .gitahub .vod-tx{ padding:var(--space-3) var(--space-4) } .gitahub .vod-line{ font-size:var(--fs-ui) } } /* ═══ THE WISDOM CIRCLE, ON THE HUB ══════════════════════════════════════════════════════════ Pawan's original had it; v2 dropped it. The cast is measured - the people the most chapters actually name - not a list I picked. */ .gitahub .people{ display:flex; gap:var(--space-4); overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x proximity } .gitahub .people::-webkit-scrollbar{ height:4px } .gitahub .people::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px } .gitahub .person{ flex:0 0 auto; width:104px; scroll-snap-align:start; text-align:center; margin:0 } .gitahub .person img{ width:88px; height:88px; border-radius:50%; object-fit:cover; border:1px solid var(--border); background:var(--card) } .gitahub .person figcaption{ margin-top:.4rem; line-height:1.3 } .gitahub .person b{ display:block; font-family:'Playfair Display',serif; font-weight:700; font-size:var(--fs-ui); color:var(--text-primary) } .gitahub .person span{ display:block; font-size:var(--fs-micro); color:var(--text-muted) } @media(max-width:639px){ .gitahub .person{ width:84px } .gitahub .person img{ width:72px; height:72px } } /* ═══ THE HUB QUIZ ═══════════════════════════════════════════════════════════════════════════ One question, answered once, a reflection rather than a score - the same contract the verse page uses, so the two never disagree about what a quiz is here. */ .gitahub .quizbox{ background:var(--bg-warm); border:1px solid var(--border); border-radius:16px; padding:var(--space-5); max-width:var(--content-reading-max); text-align:left } .gitahub .quiz-q{ font-size:var(--fs-body); font-weight:600; color:var(--text-primary); margin-bottom:var(--space-4); line-height:1.45 } .gitahub .qopt{ display:block; width:100%; text-align:left; margin-bottom:var(--space-2); min-height:var(--target-pref); padding:.7rem 1rem; border:1px solid var(--border); border-radius:11px; background:var(--card); font:inherit; font-size:var(--fs-ui); color:var(--text-secondary); cursor:pointer; transition:border-color .15s, background .15s } .gitahub .qopt:hover:not(:disabled){ border-color:var(--primary); background:var(--accent-soft) } .gitahub .qopt.right{ border-color:#2f855a; background:#e7f3e9; color:var(--text-primary) } .gitahub .qopt.wrong{ border-color:var(--primary-deep); background:var(--accent-soft) } .gitahub .qref{ margin-top:var(--space-4); font-family:'Playfair Display',serif; font-style:italic; font-size:var(--fs-ui); line-height:1.6; color:var(--text-secondary) } .gitahub .qgo{ font-style:normal; font-weight:700; color:var(--primary-deep); white-space:nowrap } .gitahub .qfoot{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-4) } .gitahub .qwhere{ font-family:'JetBrains Mono',monospace; font-size:var(--fs-micro); letter-spacing:.08em; color:var(--text-muted) } .gitahub .qnext{ min-height:var(--target-pref); padding:0 1rem; border:1px solid var(--primary); border-radius:11px; background:var(--card); font:inherit; font-size:var(--fs-ui); font-weight:700; color:var(--primary-deep); cursor:pointer } .gitahub .qnext:hover{ background:var(--accent-soft) } /* ═══ THE LAST THREE ═════════════════════════════════════════════════════════════════════════ [2026-09-03] Pawan: "any reason you give still not done rather than doing that". None. */ /* [2026-09-06] Shapes on the Articles pair and the poll rungs. These now come from Pawan's own picker export like everything else on this page - the cyan creature that was sitting on poll rung 3 came from my semantic match, and he found it by walking the page. Sized up with the chapter badges for the same reason: below about 44px these forms stop reading. */ .gitahub .s-shape{ width:56px; height:56px; border-radius:12px; flex:0 0 auto } .gitahub .r-shape{ width:48px; height:48px; border-radius:10px; margin-bottom:var(--space-2); display:block } .gitahub #pollOpts .rung{ display:flex; flex-direction:column; align-items:flex-start } /* PERSONA DOORS - beyond_words_hub.html:164-167, classes and treatment as written there. */ .gitahub .doors-label{ text-align:center; margin:var(--space-4) 0 .5rem; font-size:var(--fs-meta); color:var(--text-secondary); font-weight:600 } .gitahub .doors{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; max-width:780px; margin:0 auto var(--space-4) } .gitahub .door{ font-size:var(--fs-ui); font-weight:600; color:var(--text-secondary); background:var(--card); border:1px solid var(--border); border-radius:999px; padding:.46rem .85rem; cursor:pointer; text-decoration:none; transition:color .16s var(--spring), border-color .16s var(--spring), background .16s var(--spring), transform .16s var(--spring) } .gitahub .door:hover, .gitahub .door.on{ color:var(--primary); border-color:var(--primary); background:var(--accent-soft); transform:translateY(-1px) } /* THE COPYBAR - tools/index.html:310-311, verbatim, on this page's tokens. */ .gitahub .copybar, .gitach .copybar, .gitav .copybar{ border-top:1px solid var(--border); text-align:center; font-size:.74rem; color:var(--text-muted); padding:1rem; line-height:1.7; margin-top:var(--sp-lg); } .gitahub .copybar a, .gitach .copybar a{ color:var(--primary); font-weight:600 } /* ═══ THE LAMP HERO ═══════════════════════════════════════════════════════════ [2026-09-06] The band is .ch-band's geometry, taken from the chapter pages that already use it - rounded 16, one hairline border, overflow hidden, line-height 0 so the art has no descender gap under it. Only the height differs: a chapter page's band is the whole first view, this one has a search box and five doors to sit above the fold with it. */ .gitahub .gita-lamp{ position:relative; margin:.35rem 0 var(--space-4); border-radius:16px; overflow:hidden; border:1px solid var(--border); background:var(--bg-warm); line-height:0; height:clamp(196px, 26vh, 272px); } .gitahub .gita-lamp svg{ width:100%; height:100%; display:block } /* The name is in the art, so its size is in USER UNITS and scales with the band - there is no clamp() to keep in step with anything. Family and weight are the same two the title stack used, so nothing about the typography changed, only where it sits. */ .gitahub .gita-lamp .gl-sans{ font-family:'Noto Sans Devanagari','Playfair Display',serif; font-weight:700; font-size:74px; fill:var(--text-primary); letter-spacing:-.01em; } .gitahub .gita-lamp .gl-latin{ /* [2026-09-06] 33 -> 29 and the baseline 6 units lower. Devanagari matras and the d-conjunct descender of भगवद्‌गीता reach well below the baseline, and at 33 they were landing on the Latin caps at every width. */ font-family:'Playfair Display',serif; font-weight:800; font-size:29px; fill:var(--primary-deep); letter-spacing:.02em; } @media(max-width:639px){ /* [2026-09-06] Band height is the ZOOM control here, not just a size. slice scales by max(w/960, h/300), and on a phone the height wins - so a taller band crops HARDER and the title ends up flush against the border with the halo touching the other edge. MEASURED at 177px: 14px of left margin and the glow clipped by the right edge. At 160 the scale drops to .53, 642 user units are visible instead of 566, and both sides breathe. */ .gitahub .gita-lamp{ height:clamp(146px, 19vh, 168px); border-radius:12px; margin-bottom:var(--space-3) } } /* [2026-09-06] The lamp is LIT, not cycling. All that is left of the notification's animation is the flicker it was drawn with, and a slow breath on the glow - both continuous, so there is no frame in which the hero is dark. */ .gitahub .gl .flame{transform-box:fill-box;transform-origin:center bottom;animation:flick-gl .9s ease-in-out infinite} .gitahub .gl .halo{transform-box:fill-box;transform-origin:center;animation:breathe-gl 7s ease-in-out infinite} @keyframes flick-gl{0%,100%{transform:scaleY(1) scaleX(1) translateX(0)}50%{transform:scaleY(1.09) scaleX(.94) translateX(.5px)}} @keyframes breathe-gl{0%,100%{opacity:.88}50%{opacity:1}} @media(prefers-reduced-motion:reduce){ .gitahub .gl *{animation:none!important} } /* ═══ WHAT THE PAGE WALK FOUND ════════════════════════════════════════════════ [2026-09-06] Pawan: "playwright means every viewport seen in desktop and mobile - EVERY viewport". Seventeen screens later, these are the layout faults that were sitting there while four-viewport measurements kept coming back clean. NOTHING BELOW THE CHAPTERS SAT ON THE RAIL. Measured at 1440: rail 976 from x=232, and then the quiz card 720 wide, the FAQ 787, the Articles grid holding two cards in three columns. Each was pinned to the left edge with a dead column beside it, so the page looked like it had lost its right-hand side. THE WIDTHS ARE NOT THE FAULT AND ARE NOT TOUCHED. .faq{max-width:78ch} is subject-hub.css:385, an approved reading measure, and 720 is the reading column. A narrow column inside a wider rail is a legal page type - CENTRED is not misaligned. What was wrong is that they were narrow AND left-aligned, which reads as breakage rather than as a column. */ .gitahub main .quizbox, .gitahub main .faq{ margin-inline:auto } /* Two essays in a three-column grid left the third column empty. auto-fill keeps the empty track; auto-fit collapses it so the two cards share the rail. The shelf's own .series (subject-hub.css :296) is untouched - this is a local override, because that grid is right for a page with six. */ .gitahub main .series{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) } /* The floating player cue sat on top of "Site map & links" in the footer at both widths, and on the Today's verse card on a phone. It is position:fixed, so no amount of page padding moves it - it has to step aside when the footer arrives. Hiding a fixed element changes no layout, so this cannot feed back into the scroll position that triggers it (#flutter_loop). */ /* [2026-09-13] unscoped: every page has a footer the cue must not sit on, not only the hub. */ .gp-cue.near-foot{ opacity:0; pointer-events:none; transform:translateY(8px) } .gp-cue{ transition:opacity .18s ease, transform .18s ease } /* [2026-09-06] The chapter titles were still coming out as "Arjuna Vish…" and "Jnana Karm…". The clamp is in the shared component: subject-hub.css:349-350 sets white-space:nowrap with text-overflow:ellipsis on .chapter-info h4. That is right for a hub whose cards say "Fractions" or "Photosynthesis"; it is wrong here, where every title is a Sanskrit compound of three words. The component is NOT changed - it has thousands of consumers and its assumption holds for them. This page overrides it for itself, and clamps at two lines so the cards still line up. */ .gitahub .chapter-info h4{ white-space:normal; overflow:hidden; text-overflow:clip; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.22; } @media(max-width:639px){ /* Two lines still ellipsised "Jnana Karma Sanyaasa…" in a half-width card. Three fits every one of the eighteen - checked against the longest, Shraddhatraya Vibhaga Yoga. */ .gitahub .chapter-info h4{ -webkit-line-clamp:3 } } /* [2026-09-06] "Chapter 2 . verse 61 . Devotion as" - the verse reference ran off the right edge of its card on a phone. .vod-tx is a flex child, so it needs min-width:0 before its text will wrap at all; without it the longest line sets the width and the card clips the rest. Same shape of bug as the chapter titles, in a different component. */ .gitahub .vod-tx{ min-width:0 } .gitahub .vod-ref, .gitahub .vod-line{ overflow-wrap:anywhere } /* [2026-09-06] The dead space between sections. MEASURED at 1440: the section margin is only 32px and head-to-body only 16, but every section carried a 40px empty tail below its last child, so the real distance from the end of one section's content to the next heading was 72px plus the heading's own leading - which is what reads as a hole. The tail is inherited padding that no section here uses. Removed on this page only. */ .gitahub main .v2-sec{ padding-bottom:0 } /* ═══ THE FAQ MEASURE ════════════════════════════════════════════════════════════════════════ [2026-09-07] Pawan: "any reason desktop faq is not aligned well". It is not misaligned so much as a THIRD measure. MEASURED at 1440, left edge and width of every block on the page: rail (chapters, people, articles, poll, copybar) 232 -> 1208 976 wide quiz 360 -> 1080 720 wide, centred FAQ 326 -> 1114 787 wide, centred Three left edges on one page. 787 is subject-hub.css's .faq{max-width:78ch} - a perfectly good reading measure, but it is not one of ours, and a reader's eye lands on 232, then 360, then 326. The house allows exactly two: the 1200 rail, and 720 centred for reading columns. So the FAQ joins the quiz on 720. Two edges, not three, and the two centred blocks now share one. */ .gitahub .faq{ max-width:var(--content-reading-max, 720px); margin-inline:auto } /* ═══ TAP TARGETS ════════════════════════════════════════════════════════════════════════════ [2026-09-07] Every control on the three pages, measured at 390 with Playwright, then brought to 44px without changing how any of them look. The chips keep their padding and type size; the height comes from min-height, and the star and the steppers grow their box, not their glyph. */ .gitach .vmark{ width:44px; height:44px } .gitach .vstep{ width:44px; height:44px } .gitach .vbtn, .gitav .vbtn{ min-height:44px; display:inline-flex; align-items:center } .gitahub .try-chip{ min-height:40px; display:inline-flex; align-items:center } /* min-height does nothing on an inline box - these are inline-flex so the height can take. */ .gitav .chip, .gitacon .chip, .gitahub .chip, .gitach .chip{ min-height:44px; display:inline-flex; align-items:center } .gitav .vbtn, .gitach .vbtn, .gitacon .vbtn{ min-height:44px; display:inline-flex; align-items:center } .gitahub .door{ min-height:44px; display:inline-flex; align-items:center } /* The two the shelf sizes below our minimum: the card's play button (subject-hub.css:353, 30px) and the search field itself (its bar is tall, the input inside it was 21px of hit area). */ .gitahub .act-btn{ width:44px; height:44px } .gitahub .bigsearch input{ min-height:44px } .gitav .vbtn{ min-height:44px; display:inline-flex; align-items:center } /* ═══ THE GLYPHS ON THE CHAPTER PAGE ═════════════════════════════════════════════════════════ [2026-09-12] Pawan: "Go" on the verse and chapter marks. The glyphs from assets/js/llos-gita-glyphs.js carry their own cream tile, so the frame steps back to size only - a tile inside a frame is a double frame. The hero wears the chapter's A and B side by side. Breaks if removed: double frames and a pair stacked on top of each other. */ .gitach .ch-hero-shape.glyph, .gitach .vshape.glyph{ padding:0; background:none; border:0; overflow:visible } .gitach .ch-hero-shape.glyph svg, .gitach .vshape.glyph svg{ display:block; width:100%; height:100% } .gitach .ch-pair{ display:flex; gap:6px; flex:0 0 auto; align-items:center } @media(max-width:639px){ /* the plate's first column was 58px for one shape; two 40px glyphs need 92 */ .gitach .ch-plate{ grid-template-columns:92px 1fr; background:linear-gradient(to right, #fff 0, #fff 92px, rgba(255,255,255,.78) 92px, rgba(255,255,255,.78) 100%) } .gitach .ch-plate .ch-pair{ padding:.4rem .3rem; gap:4px; justify-content:center } .gitach .ch-plate .ch-hero-shape.glyph{ width:40px; height:40px !important; padding:0 } .gitach .ch-plate .ch-hero-shape.glyph svg{ width:40px; height:40px } } /* ═══ THE BAR AT NARROW WIDTHS ═══════════════════════════════════════════════════════════════ [2026-09-12] Pawan: "Go, fix". Walked at 390 x 150% (260 CSS px) the close X was off the right edge and at 125% it touched it: five controls at 40-44px plus the rail padding do not fit in 260. Below 340 CSS px the controls step to 36 and the rail padding to .5rem. */ @media(max-width:340px){ .gp-rail{padding-inline:.5rem} .gp[data-state="live"] .gp-live{gap:.2rem;padding:.3rem .35rem} .gp-btn,.gp-ghost,.gp-close,.gp-play{width:36px;height:36px} .gp-btn svg{width:17px;height:17px} .gp-transport{gap:0} } /* ═══ THE OPEN CARD'S RIGHT COLUMN ═══════════════════════════════════════════════════════════ [2026-09-13] Pawan: "the cards are becoming larger in desktop and right side seems too empty". MEASURED at 1440: the open card spans the 976 rail, the verse sits in its 720 measure, and the mark + stepper row ran the full width with 256px of nothing on the right. The verse page's own lesson fills it: the one line and the concept marks. Desktop: two columns. Phone: the aside follows the buttons, in flow. The half-open "next" card hides it with the rest of its body. */ .gitach .vaside{display:flex;flex-direction:column;gap:var(--space-3);margin-top:var(--space-3)} /* [2026-09-18] Pawan: "chapter template has too many font sizes and italics and bold". MEASURED on the rendered chapter page: 24 distinct type treatments, four families, sizes 9.9 to 30px, weights 400-800. The card already carries one serif (the verse name); the one-liner was a SECOND serif at a third size, so it now uses the page's own text font and size. */ .gitach .voneline{font-family:inherit;font-size:var(--fs-ui);line-height:1.55; color:var(--text-primary);border-left:3px solid var(--primary);padding:.2rem 0 .2rem var(--space-3);margin:0} .gitach .chips{display:flex;flex-wrap:wrap;gap:var(--space-2)} .gitach .chip{display:inline-flex;align-items:center;min-height:44px;padding:0 .8rem 0 .3rem;border-radius:999px; border:1px solid var(--border);background:var(--card);font-size:var(--fs-ui);font-weight:600; color:var(--text-secondary);text-decoration:none;transition:border-color .15s,background .15s} .gitach .chip:hover{border-color:var(--primary);background:var(--accent-soft);color:var(--primary-deep)} .gitach .chip-gs.glyph{width:32px;height:32px;border-radius:8px;margin-right:.4rem;overflow:hidden;flex:0 0 auto} .gitach .chip-gs.glyph svg{display:block;width:100%;height:100%} .gitach .task.is-next .tbody .vaside{display:none} @media(min-width:1024px){ .gitach details.task[open] .tbody{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px); column-gap:var(--space-8);align-items:start} .gitach details.task[open] .vaside{margin-top:0;padding-top:var(--space-2)} } /* ═══ THE PLAYER ON A PHONE — A LAST ROW, NOT A RAFT ═════════════════════════════════════════ [2026-09-13] Pawan: "when i see the viewer i should never see text below it, its the last row" and "see footer how i make in gold shells and follow that style for mobile single row". MEASURED: playing, the bar was a floating pill inset from the bottom by --space-4, so a strip of the page showed underneath it and read as text sliding behind a button. The shell's own footer (.lsh-fbar, shell-inject.js:170) is a full-width bar on an opaque ground, flush to its edge. Same here: below 640 the playing bar loses its inset and its lower corners and becomes the last row of the screen, with the page padded by exactly its height so nothing can sit under it. */ @media(max-width:639px){ .gp-rail{ padding:0 0 var(--gp-lift, 0px) } .gp[data-state="live"] .gp-live{ width:100%; border-radius:14px 14px 0 0; border-bottom:0; padding:.45rem .6rem calc(.45rem + env(safe-area-inset-bottom, 0px)); box-shadow:0 -8px 24px -14px rgba(120,72,20,.5); } /* at rest the glyph keeps its own inset - it is a button, not a bar */ .gp[data-state="rest"] .gp-rail{ padding:0 1rem calc(1rem + var(--gp-lift, 0px)) } } /* ═══ NAVIGATION IS ONE ROW ═══════════════════════════════════════════════════════════════════ [2026-09-13] Pawan: "this should be one row in mobile - all navigation always one row, never multiple" and "maybe 2 col invisible table one has glyph other has 2 rows". Previous and next sit side by side at every width, and each is that two-column table: the mark of where it goes, then the label over the name. The name clamps to two lines so the pair can never grow into two stacked cards again. */ .gitav .vnav, .gitach .chnav{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin:var(--sp-lg) 0 var(--sp-md); } .gitav .vnav a, .gitach .chnav a{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); align-items:center; padding:var(--space-3); border:1px solid var(--border); border-radius:14px; background:var(--card); text-decoration:none; flex:none; min-width:0; } .gitav .vnav a.nx, .gitach .chnav a.nx{ text-align:left } .gitav .nav-gs, .gitach .nav-gs{ width:32px; height:32px; border-radius:8px; overflow:hidden; flex:0 0 auto } .gitav .nav-gs svg, .gitach .nav-gs svg{ display:block; width:100%; height:100% } .gitav .vnav .k, .gitach .chnav .k{ display:block; /* an inline box cannot ellipsis - it just gets clipped by its parent */ font-family:'JetBrains Mono',monospace; font-size:var(--fs-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gitav .vnav .t, .gitach .chnav .t{ font-family:'Playfair Display',serif; font-weight:700; font-size:var(--fs-ui); color:var(--text-primary); line-height:1.25; margin-top:.1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .gitav .vnav > span, .gitach .chnav > span{ display:block } /* [2026-09-13] the text column needs min-width:0 or its nowrap kicker refuses to shrink and runs straight through the card's right border - which is what "← PREVIOUS VERS" was. */ .gitav .vnav a > span:last-child, .gitach .chnav a > span:last-child{ display:block; min-width:0; overflow:hidden } /* display:block, or overflow does nothing on an inline box */ @media(max-width:639px){ .gitav .vnav a, .gitach .chnav a{ padding:var(--space-2); gap:var(--space-2) } .gitav .nav-gs, .gitach .nav-gs{ width:26px; height:26px; border-radius:7px } } /* ═══ THE SECONDARY PAGES JOIN THE SAME STYLE ══════════════════════════════════════════════════ [2026-09-13] Pawan: "can you now ensure v2 is updated in the new style across board - book, chapter, verse, any associated page characters and all". The two reading articles and the how-tos page were built before the verse page was reworked, so they carried their own .a-nav that wrapped into two rows on a phone and had no line back to the chapter list. They now inherit the crumb and the one-row nav from the verse page instead of keeping private copies. Remove these selectors and those three pages lose their way back and their navigation stacks again below 640px. */ .gitaart .crumb, .gitahow .crumb{padding:.7rem 0 0;font-size:.76rem;color:var(--soft)} .gitaart .crumb a, .gitahow .crumb a{color:var(--muted);font-weight:600;text-decoration:none} .gitaart .crumb a:hover, .gitahow .crumb a:hover{color:var(--primary)} .gitaart .crumb .sep, .gitahow .crumb .sep{margin:0 .4rem;opacity:.5} .gitaart .crumb .sep::before, .gitahow .crumb .sep::before{content:'/'} .gitaart .vnav, .gitahow .vnav{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin:var(--sp-lg) 0 var(--sp-md); } .gitaart .vnav a, .gitahow .vnav a{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); align-items:center; padding:var(--space-3); border:1px solid var(--border); border-radius:14px; background:var(--card); text-decoration:none; min-width:0; } .gitaart .vnav a:hover, .gitahow .vnav a:hover{border-color:var(--primary)} .gitaart .nav-gs, .gitahow .nav-gs{width:32px;height:32px;border-radius:8px;overflow:hidden;flex:0 0 auto} .gitaart .nav-gs svg, .gitahow .nav-gs svg{display:block;width:100%;height:100%} .gitaart .vnav .k, .gitahow .vnav .k{ display:block; font-family:'JetBrains Mono',monospace; font-size:var(--fs-micro); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .gitaart .vnav .t, .gitahow .vnav .t{ font-family:'Playfair Display',serif; font-weight:700; font-size:var(--fs-ui); color:var(--text-primary); line-height:1.25; margin-top:.1rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .gitaart .vnav a > span:last-child, .gitahow .vnav a > span:last-child{ display:block; min-width:0; overflow:hidden } @media(max-width:639px){ .gitaart .vnav a, .gitahow .vnav a{padding:var(--space-2);gap:var(--space-2)} .gitaart .nav-gs, .gitahow .nav-gs{width:26px;height:26px;border-radius:7px} } /* ═══ HIDDEN MEANS HIDDEN ═══════════════════════════════════════════════════════════════════════ [2026-09-13] Pawan: "when you have Also Called i assume there wold be some names/text if 0 why so we have a heading." The pages already set the hidden attribute on a block with nothing in it. It did nothing. The browser's own [hidden]{display:none} is one selector strong, and every one of these blocks is styled by a two-selector rule that sets display:flex or grid - so the class always won and the empty label kept its heading and its rule line. This puts the attribute back in charge across the whole of v2. Remove it and empty headings return on every page at once. */ .gitahub [hidden], .gitach [hidden], .gitav [hidden], .gitacon [hidden], .gitaart [hidden], .gitahow [hidden]{display:none !important} /* [2026-09-14] F-117: the article byline. Two bare paragraphs used to sit here, one of them a visible year on a lesson page. Quiet and labelled, above the footer, never a banner. */ .gitaart .byline{ margin-top:var(--space-5); font-size:var(--fs-meta); color:var(--text-muted) } /* [2026-09-14] Translation note - sits under the translation it explains, on 2.21 and 2.50. */ .gitav .vnote{ margin:var(--space-3) 0 0; padding-top:var(--space-3); border-top:1px solid var(--border); font-size:var(--fs-meta); color:var(--text-muted); line-height:1.55; max-width:var(--content-reading-max) } /* [2026-09-14] LESSON SHAPE - Pawan: "the lesson should be verse-independent; the verse should be its witness, not its container." Opening and turn read as ordinary prose; the verses sit under them as a scannable list; the question closes without answering itself. */ .gitacon .ec-lead{ margin:var(--space-4) 0 var(--space-2); color:var(--text-muted); font-size:var(--fs-meta) } .gitacon .echoes{ list-style:none; margin:0 0 var(--space-4); padding:0 } .gitacon .echoes li{ padding:var(--space-2) 0; border-top:1px solid var(--border) } .gitacon .echoes li:first-child{ border-top:0 } .gitacon .echoes .ec-ref{ font-variant-numeric:tabular-nums; font-size:var(--fs-meta); margin-right:var(--space-2) } .gitacon .echoes .ec-t{ } .gitacon .ec-q{ margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--border); font-weight:600 } /* [2026-09-15] F-119: where a quotation actually comes from. Quiet, under the card, and only on the 18 that verified to a work and a locatable place inside it. */ .gitav .card .cite{ margin-top:var(--space-2); font-size:var(--fs-micro); color:var(--text-muted) } /* [2026-09-16] THE READING-LANGUAGE SWITCHER, and the disabled transport button. Pawan: "English and Hindi switcher on all pages, book chapter verse correct? And concepts?" and "if you are in the last page then you can't have next, if you are in the first page you can't have previous ... my actual version one in Bhagavad Gita had that smartness." The shape is v1's segmented pair (index.html:467-486 .m-seg): two buttons in one rounded well, the chosen one filled. v1's own colours are NOT carried over - it hardcoded #f97316 and a Tailwind slate ramp; every value here is a token, so the pair matches whatever the page wears. */ .gp-langpick{ display:inline-flex; flex:0 0 auto; gap:2px; padding:3px; border:1px solid var(--border); border-radius:.6rem; background:var(--card); } .gp-langpick button{ min-height:var(--target-min); padding:.3rem .7rem; border:0; border-radius:.45rem; background:none; color:var(--text-secondary); font-family:inherit; font-size:var(--fs-micro); font-weight:800; letter-spacing:.06em; line-height:1; cursor:pointer; white-space:nowrap; transition:background .15s, color .15s; } .gp-langpick button:hover{ background:var(--accent-soft); color:var(--text-primary) } .gp-langpick button.is-on{ background:var(--primary); color:#fff } .gp-langpick button.is-on:hover{ background:var(--primary-deep); color:#fff } .gp-langpick button[lang="hi"]{ font-family:'Noto Sans Devanagari',inherit; letter-spacing:0 } /* A button at the end of the book is OFF, not merely quiet - it must not read as pressable. Same treatment v1 used (index.html:396 .gp-btn:disabled). */ .gp-btn:disabled{ opacity:.28; cursor:default } .gp-btn:disabled:hover{ background:none } /* The chapter steps carry a bigger jump, so they sit a shade quieter than the verse steps beside them - the pair a reader uses most stays the loudest thing in the group. */ .gp-ch{ font-size:var(--fs-h4) } .gp-ch svg{ width:18px; height:18px } /* [2026-09-16] The row the crumb and the language switcher share. Each page declares its own .crumb in its own