/* ===================================================================== TGL — Mobile UX Precision Corrections (v4.3.27) --------------------------------------------------------------------- 1. Increased padding for Trending, Recent Songs, Popular Songs, and Continue Reading sections on mobile. 2. Lyrics font size adjustment for readability. ===================================================================== */ @media (max-width: 768px) { /* ---- 0. Mobile type scale — SIX sizes, one place -------------------- The audit found 37 distinct px and 49 distinct rem font-sizes across the loaded stylesheets. This file loads LAST, so the scale below is the mobile authority. Telugu is never reduced: lyrics stay at 19px, body copy at 18px — both above the 17-18px floor. Vertical space is reclaimed from LEADING and MARGINS, not from glyph size. */ :root { --tgl-m-title: 27px; /* post title */ --tgl-m-h2: 22px; /* section headings */ --tgl-m-h3: 20px; /* sub headings */ /* Superseded by --tgl-m-content (section 2). Kept as aliases so any future rule referencing them cannot drift from the unified value. */ --tgl-m-lyric: var(--tgl-m-content); --tgl-m-body: var(--tgl-m-content); --tgl-m-meta: 16px; /* metadata */ --tgl-m-small: 14px; /* secondary text */ } /* ---- 1. Section rhythm --------------------------------------------- Gutter unified to 12px (was 15px here vs 0/10px in mobile-padding.css — the two files held opposite policies, which is audit finding N). Section margins 32px -> 20px: on a 360px viewport a 64px stack per rail was costing roughly a fifth of the fold. */ .tgl-home-rail, .tgl-discovery, .tgl-continue, .tgl-recently-viewed, #trending, #popular-songs, #recent-posts { /* v6.3 — gutter moved to the shell (global-alignment.css). Paying it here as well was the double-padding the audit reported. */ padding-left: 0 !important; padding-right: 0 !important; margin-top: 20px !important; margin-bottom: 20px !important; box-sizing: border-box !important; } /* Adjust internal song list inside these rails to not double-pad if they were previously full-bleed. */ .tgl-home-rail .tgl-ts-songlist, .tgl-discovery .tgl-discovery__list, .tgl-continue .tgl-discovery__list { padding-left: 0 !important; padding-right: 0 !important; } /* ---- 2. Unified mobile content typography + alignment --------------- AUDIT RESULT. Before this pass the mobile cascade held two different content metrics — lyrics at 17.5px/1.55 and prose at 18px/1.65 — plus an inherited line-height:2.2 on .lgenx-text from lyrics.css. Reviewed rather than preserved, per brief. ONE size and ONE leading now serve every content surface: --tgl-m-content: 17.5px --tgl-m-leading: 1.62 Why 1.62 and not the previous 1.55: justified text plus Telugu needs slightly more vertical room than left-aligned text, because matras sit above and virama/vowel marks below the baseline, and justification widens inter-word gaps which makes tight leading read as collision. 1.62 is a deliberate loosening of lyrics from 1.55 and a marginal tightening of prose from 1.65 — converging on one value. THREE ALIGNMENT RULES: section headings -> center normal content -> justify lyrics -> left (declared LAST so it wins) */ :root { --tgl-m-content: 17.5px; --tgl-m-leading: 1.62; } .tgl-single .tgl-content { --tgl-lyric-size: var(--tgl-m-content) !important; --tgl-lyric-leading: var(--tgl-m-leading) !important; } /* 2a. ONE size / ONE leading for all content surfaces. */ .tgl-single .tgl-content p, .tgl-single .tgl-content li, .tgl-content .lgenx-text, .tgl-lyrics, .tgl-content .tgl-lyrics, .tgl-lyrics-wrap p, .tgl-faq-answer, .lgenx-faq p, .tgl-bible-verse, .tgl-explore-intro, .lgenx-explore-intro { font-size: var(--tgl-m-content) !important; line-height: var(--tgl-m-leading) !important; } /* 2b. SECTION HEADINGS -> CENTER. Font-size, weight, colour and family are deliberately NOT touched here. */ .tgl-single .tgl-content h2, .tgl-single .tgl-content h3, .tgl-single .tgl-content h4, .tgl-article .tgl-content h2, .tgl-article .tgl-content h3, .tgl-section-heading, .tgl-faq-title, .lgenx-faq-title, .lgenx-explore-heading { text-align: center !important; } /* 2c. NORMAL CONTENT -> JUSTIFY. `text-align-last: left` stops the final line of a paragraph being stretched. `hyphens: none` is required: Telugu has no reliable hyphenation dictionary, so automatic breaks would split conjuncts. `overflow-wrap: break-word` prevents a single long Telugu compound from forcing horizontal overflow at 360px. */ .tgl-single .tgl-content p, .tgl-single .tgl-content li, .tgl-faq-answer, .lgenx-faq p, .tgl-bible-verse, .tgl-explore-intro, .lgenx-explore-intro, .tgl-section--meaning p { text-align: justify !important; text-align-last: left !important; hyphens: none !important; -webkit-hyphens: none !important; overflow-wrap: break-word !important; word-break: normal !important; } /* 2d. LYRICS -> LEFT. Declared after 2c so it wins on source order for any element matched by both. Lyrics are never justified: forced inter-word gaps destroy the metre of a sung line. */ .tgl-lyrics, .tgl-content .tgl-lyrics, .tgl-article .tgl-content .tgl-lyrics, .tgl-content .lgenx-text, .lgenx-lyrics, .tgl-lyrics-wrap, .tgl-lyrics-wrap p { text-align: left !important; text-align-last: left !important; } /* 2e. FAQ questions stay left, not centred — they are numbered items, not section headings. Only the FAQ section title is centred (2b). */ .tgl-faq-question, .lgenx-faq strong { text-align: left !important; } /* 2f. Spacing: compact but still separated. */ .tgl-single .tgl-content p { margin: 0 0 10px !important; } .tgl-content .tgl-lyrics { margin-bottom: 10px !important; } .tgl-lyrics-wrap { margin: 0 0 8px !important; } .tgl-lyrics-wrap p { margin: 0 0 6px !important; } .tgl-single .tgl-content .lgenx-text { margin-bottom: 10px !important; } .tgl-faq-item { margin-bottom: 10px !important; } /* ---- 3. Heading scale + tightened heading margins ------------------ */ .tgl-content h2, .tgl-article h2 { font-size: var(--tgl-m-h2) !important; line-height: 1.3 !important; } .tgl-content h3, .tgl-article h3 { font-size: var(--tgl-m-h3) !important; line-height: 1.35 !important; } .tgl-content h2, .tgl-content h3, .tgl-article h2, .tgl-article h3 { margin-top: 22px !important; margin-bottom: 10px !important; } /* ---- 4. Metadata / secondary text ---------------------------------- */ .tgl-meta, .tgl-summary, .tgl-breadcrumb { font-size: var(--tgl-m-meta) !important; } .tgl-pcard__excerpt, .tgl-chip, .tgl-badge { font-size: var(--tgl-m-small) !important; } /* ---- 5. Radius + shadow consistency -------------------------------- The audit found five competing radii in real use (10/12/999/8/4px) and 136 box-shadow declarations. On mobile every surface that is still rounded uses ONE token, and card shadows collapse to one hairline. Pills (.tgl-btn) keep their 999px shape — that is intentional brand. */ .tgl-pcard, .tgl-listing, .tgl-summary, .tgl-toc, .tgl-ts-catcard, .tgl-faq-item { box-shadow: 0 1px 2px rgba(0, 27, 68, .06) !important; } /* ---- 6. Touch targets preserved ------------------------------------ */ .tgl-btn, .tgl-chip, .tgl-pagination a { min-height: var(--tgl-touch, 44px) !important; display: inline-flex !important; align-items: center !important; } }