/* * ╔══════════════════════════════════════════════════════════════════════════╗ * ║ TYPO-LANG FRAMEWORK v3 — Gamata.lk ║ * ║ English (en) · Sinhala (si) · Tamil (ta) ║ * ╠══════════════════════════════════════════════════════════════════════════╣ * ║ ║ * ║ SUPPORTED SCREENS ║ * ║ Desktop ≥ 1024px ║ * ║ Tablet 768px – 1023px ║ * ║ Phone 480px – 767px ║ * ║ Small Phone < 480px ║ * ║ ║ * ╠══════════════════════════════════════════════════════════════════════════╣ * ║ ║ * ║ CLASS PATTERN tl-{role}-{size} ║ * ║ ║ * ║ ROLES ║ * ║ display decorative hero titles ║ * ║ heading section headings ║ * ║ subheading secondary headings ║ * ║ lead intro / hero paragraphs ║ * ║ body regular paragraph text ║ * ║ caption image captions, metadata ║ * ║ label buttons, nav links, tags ║ * ║ tiny footnotes, legal, copyright ║ * ║ ║ * ╠══════════════════════════════════════════════════════════════════════════╣ * ║ ║ * ║ SIZE TOKENS (logical names → px resolved per [lang]) ║ * ║ ║ * ║ xs sm md lg xl 2xl 3xl 4xl 5xl 6xl 7xl ║ * ║ ║ * ║ EN base px: 10 12 14 16 18 20 22 24 26 28 30 ║ * ║ SI base px: 12 14 16 18 20 22 24 26 28 30 32 (+2 scale up) ║ * ║ TA base px: 11 13 15 17 19 21 23 25 27 29 31 (+1 scale up) ║ * ║ ║ * ║ WHY DIFFERENT SIZES PER LANG? ║ * ║ Sinhala (Abhaya Libre) has a taller x-height and denser ║ * ║ glyph structure than Latin. At the same px value, Sinhala ║ * ║ appears visually SMALLER and harder to read. Scaling SI ║ * ║ up by +2px compensates for this optical difference. ║ * ║ Tamil (Mukta Malar) sits between EN and SI, so +1px. ║ * ║ ║ * ╠══════════════════════════════════════════════════════════════════════════╣ * ║ ║ * ║ UTILITIES (stack alongside any tl-* class) ║ * ║ ║ * ║ Font weight (resolves to lang-aware values via variables) ║ * ║ tl-bold tl-semibold tl-medium tl-regular tl-light ║ * ║ ║ * ║ NOTE: tl-light on [lang="si"] resolves to weight 400, not 300, ║ * ║ because Abhaya Libre 300 is too thin for Sinhala script. ║ * ║ The variable handles this automatically — no class changes needed. ║ * ║ ║ * ║ Line height ║ * ║ tl-tight tl-snug tl-normal tl-relaxed tl-loose ║ * ║ ║ * ║ Letter spacing ║ * ║ tl-ls-tight tl-ls-normal tl-ls-wide tl-ls-wider ║ * ║ ║ * ╠══════════════════════════════════════════════════════════════════════════╣ * ║ ║ * ║ HOW LANG-AWARE SIZING WORKS ║ * ║ ║ * ║ Each [lang] block defines its own size tokens: ║ * ║ --tl-size-xs through --tl-size-7xl ║ * ║ ║ * ║ Each role class reads the token for its step: ║ * ║ .tl-display-5xl { font-size: var(--tl-size-5xl) } ║ * ║ ║ * ║ When is set, the token values automatically ║ * ║ switch to SI values. You never change any class on any element. ║ * ║ ║ * ║ USAGE EXAMPLE ║ * ║ ║ * ║ ║ * ║

║ * ║ Hello, Welcome to Gamata.lk ║ * ║

║ * ║ ║ * ║ ║ * ║

║ * ║ Hello, Welcome to Gamata.lk ║ * ║

║ * ║ ║ * ║

║ * ║ Hello, Welcome to Gamata.lk ║ * ║

║ * ║ ║ * ╠══════════════════════════════════════════════════════════════════════════╣ * ║ ║ * ║ FONTS (imported in master blade) ║ * ║ en → Roboto ║ * ║ si → Abhaya Libre ║ * ║ ta → Mukta Malar ║ * ║ ║ * ║ NOTE Safe to link in master blade — nothing changes on the page ║ * ║ until you explicitly add a tl-* class to an element. ║ * ║ ║ * ╠══════════════════════════════════════════════════════════════════════════╣ * ║ ║ * ║ RESPONSIVE — HOW BREAKPOINTS + LANG WORK TOGETHER ║ * ║ ║ * ║ Breakpoint blocks redefine the --tl-size-* tokens per lang. ║ * ║ Because .tl-* classes reference tokens, all three languages ║ * ║ automatically get their correct scaled values at every breakpoint. ║ * ║ You do NOT need separate [lang] rules inside each media query. ║ * ║ ║ * ╠══════════════════════════════════════════════════════════════════════════╣ * ║ ║ * ║ Version 3.0 ║ * ║ Design & Developed by Suranga Prabash ║ * ║ ║ * ╚══════════════════════════════════════════════════════════════════════════╝ */ /* ═══════════════════════════════════════════════════════════════════ SECTION 1 — CSS VARIABLES ───────────────────────────────────────────────────────────────── Each [lang] block defines: 1. --tl-font → typeface for that language 2. --tl-weight-* → numeric weight values (SI light = 400) 3. --tl-lh-* → line-height (SI/TA need taller values) 4. --tl-ls-* → letter-spacing (SI/TA avoid negatives) 5. --tl-size-* → px per step, scaled per language ═══════════════════════════════════════════════════════════════════ */ /* ─── ENGLISH ─────────────────────────────────────────────────── */ :root, [lang="en"] { --tl-font: "Roboto", sans-serif; /* weight — Roboto supports all 5 weights cleanly */ --tl-weight-light: 300; --tl-weight-regular: 400; --tl-weight-medium: 500; --tl-weight-semibold: 600; --tl-weight-bold: 700; /* line-height — Latin is compact, tight values work well */ --tl-lh-tight: 1.15; --tl-lh-snug: 1.3; --tl-lh-normal: 1.5; --tl-lh-relaxed: 1.65; --tl-lh-loose: 1.9; /* letter-spacing — Latin benefits from negative tracking at large sizes */ --tl-ls-tight: -0.03em; --tl-ls-normal: 0em; --tl-ls-wide: 0.04em; --tl-ls-wider: 0.1em; /* size tokens — EN base scale (10px → 30px) */ --tl-size-xs: 10px; --tl-size-sm: 12px; --tl-size-md: 14px; --tl-size-lg: 16px; --tl-size-xl: 18px; --tl-size-2xl: 20px; --tl-size-3xl: 22px; --tl-size-4xl: 24px; --tl-size-5xl: 26px; --tl-size-6xl: 28px; --tl-size-7xl: 30px; } /* ─── SINHALA ─────────────────────────────────────────────────── */ [lang="si"] { --tl-font: "Abhaya Libre", serif; /* weight — Abhaya Libre 300 is too thin for Sinhala script. Map light → 400 so tl-light still reads comfortably. Developers use the same class; the variable handles it. */ --tl-weight-light: 400; --tl-weight-regular: 400; --tl-weight-medium: 500; --tl-weight-semibold: 600; --tl-weight-bold: 700; /* line-height — Sinhala ascenders/descenders are tall. Minimum tight = 1.4 to prevent glyph clipping. */ --tl-lh-tight: 1.4; --tl-lh-snug: 1.55; --tl-lh-normal: 1.75; --tl-lh-relaxed: 1.9; --tl-lh-loose: 2.1; /* letter-spacing — Sinhala glyphs are wider. Never use negative tracking; use slight positive. */ --tl-ls-tight: 0em; --tl-ls-normal: 0.01em; --tl-ls-wide: 0.04em; --tl-ls-wider: 0.08em; /* size tokens — SI = EN + 2px Abhaya Libre renders optically smaller than Roboto at same px. +2px brings visual weight in line with the EN layout. */ --tl-size-xs: 12px; --tl-size-sm: 14px; --tl-size-md: 16px; --tl-size-lg: 18px; --tl-size-xl: 20px; --tl-size-2xl: 22px; --tl-size-3xl: 24px; --tl-size-4xl: 26px; --tl-size-5xl: 28px; --tl-size-6xl: 30px; --tl-size-7xl: 32px; } /* ─── TAMIL ───────────────────────────────────────────────────── */ [lang="ta"] { --tl-font: "Mukta Malar", sans-serif; /* weight — Mukta Malar supports all weights, same as EN */ --tl-weight-light: 300; --tl-weight-regular: 400; --tl-weight-medium: 500; --tl-weight-semibold: 600; --tl-weight-bold: 700; /* line-height — Tamil script is slightly taller than Latin */ --tl-lh-tight: 1.4; --tl-lh-snug: 1.55; --tl-lh-normal: 1.75; --tl-lh-relaxed: 1.9; --tl-lh-loose: 2.1; /* letter-spacing — Tamil glyphs are moderately wide */ --tl-ls-tight: -0.01em; --tl-ls-normal: 0.01em; --tl-ls-wide: 0.04em; --tl-ls-wider: 0.08em; /* size tokens — TA = EN + 1px Mukta Malar renders close to Roboto but Tamil glyphs sit slightly smaller at identical px, so +1px balances them. */ --tl-size-xs: 11px; --tl-size-sm: 13px; --tl-size-md: 15px; --tl-size-lg: 17px; --tl-size-xl: 19px; --tl-size-2xl: 21px; --tl-size-3xl: 23px; --tl-size-4xl: 25px; --tl-size-5xl: 27px; --tl-size-6xl: 29px; --tl-size-7xl: 31px; } /* ═══════════════════════════════════════════════════════════════════ SECTION 2 — DISPLAY (decorative hero titles) ═══════════════════════════════════════════════════════════════════ */ .tl-display-7xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-7xl) !important; font-weight: var(--tl-weight-bold) !important; line-height: var(--tl-lh-tight) !important; letter-spacing: var(--tl-ls-tight) !important; } .tl-display-6xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-6xl) !important; font-weight: var(--tl-weight-bold) !important; line-height: var(--tl-lh-tight) !important; letter-spacing: var(--tl-ls-tight) !important; } .tl-display-5xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-5xl) !important; font-weight: var(--tl-weight-bold) !important; line-height: var(--tl-lh-tight) !important; letter-spacing: var(--tl-ls-tight) !important; } .tl-display-4xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-4xl) !important; font-weight: var(--tl-weight-bold) !important; line-height: var(--tl-lh-tight) !important; letter-spacing: var(--tl-ls-tight) !important; } .tl-display-3xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-3xl) !important; font-weight: var(--tl-weight-bold) !important; line-height: var(--tl-lh-tight) !important; letter-spacing: var(--tl-ls-tight) !important; } /* ═══════════════════════════════════════════════════════════════════ SECTION 3 — HEADING ═══════════════════════════════════════════════════════════════════ */ .tl-heading-7xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-7xl) !important; font-weight: var(--tl-weight-semibold) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-tight) !important; } .tl-heading-6xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-6xl) !important; font-weight: var(--tl-weight-semibold) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-tight) !important; } .tl-heading-5xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-5xl) !important; font-weight: var(--tl-weight-semibold) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-tight) !important; } .tl-heading-4xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-4xl) !important; font-weight: var(--tl-weight-semibold) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-tight) !important; } .tl-heading-3xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-3xl) !important; font-weight: var(--tl-weight-semibold) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-normal) !important; } .tl-heading-2xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-2xl) !important; font-weight: var(--tl-weight-semibold) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-normal) !important; } .tl-heading-xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-xl) !important; font-weight: var(--tl-weight-semibold) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-normal) !important; } /* ═══════════════════════════════════════════════════════════════════ SECTION 4 — SUBHEADING ═══════════════════════════════════════════════════════════════════ */ .tl-subheading-xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-xl) !important; font-weight: var(--tl-weight-medium) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-normal) !important; } .tl-subheading-lg { font-family: var(--tl-font) !important; font-size: var(--tl-size-lg) !important; font-weight: var(--tl-weight-medium) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-normal) !important; } .tl-subheading-md { font-family: var(--tl-font) !important; font-size: var(--tl-size-md) !important; font-weight: var(--tl-weight-medium) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-normal) !important; } /* ═══════════════════════════════════════════════════════════════════ SECTION 5 — LEAD (intro paragraphs, hero sub-text) ═══════════════════════════════════════════════════════════════════ */ .tl-lead-xl { font-family: var(--tl-font) !important; font-size: var(--tl-size-xl) !important; font-weight: var(--tl-weight-light) !important; line-height: var(--tl-lh-relaxed) !important; letter-spacing: var(--tl-ls-normal) !important; } .tl-lead-lg { font-family: var(--tl-font) !important; font-size: var(--tl-size-lg) !important; font-weight: var(--tl-weight-light) !important; line-height: var(--tl-lh-relaxed) !important; letter-spacing: var(--tl-ls-normal) !important; } .tl-lead-md { font-family: var(--tl-font) !important; font-size: var(--tl-size-md) !important; font-weight: var(--tl-weight-light) !important; line-height: var(--tl-lh-relaxed) !important; letter-spacing: var(--tl-ls-normal) !important; } /* ═══════════════════════════════════════════════════════════════════ SECTION 6 — BODY ═══════════════════════════════════════════════════════════════════ */ .tl-body-lg { font-family: var(--tl-font) !important; font-size: var(--tl-size-lg) !important; font-weight: var(--tl-weight-regular) !important; line-height: var(--tl-lh-normal) !important; letter-spacing: var(--tl-ls-normal) !important; } .tl-body-md { font-family: var(--tl-font) !important; font-size: var(--tl-size-md) !important; font-weight: var(--tl-weight-regular) !important; line-height: var(--tl-lh-normal) !important; letter-spacing: var(--tl-ls-normal) !important; } .tl-body-sm { font-family: var(--tl-font) !important; font-size: var(--tl-size-sm) !important; font-weight: var(--tl-weight-regular) !important; line-height: var(--tl-lh-normal) !important; letter-spacing: var(--tl-ls-normal) !important; } /* ═══════════════════════════════════════════════════════════════════ SECTION 7 — CAPTION ═══════════════════════════════════════════════════════════════════ */ .tl-caption-md { font-family: var(--tl-font) !important; font-size: var(--tl-size-md) !important; font-weight: var(--tl-weight-regular) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-wide) !important; } .tl-caption-sm { font-family: var(--tl-font) !important; font-size: var(--tl-size-sm) !important; font-weight: var(--tl-weight-regular) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-wide) !important; } .tl-caption-xs { font-family: var(--tl-font) !important; font-size: var(--tl-size-xs) !important; font-weight: var(--tl-weight-regular) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-wide) !important; } /* ═══════════════════════════════════════════════════════════════════ SECTION 8 — LABEL (nav links, buttons, tags, badges) ═══════════════════════════════════════════════════════════════════ */ .tl-label-lg { font-family: var(--tl-font) !important; font-size: var(--tl-size-lg) !important; font-weight: var(--tl-weight-medium) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-wide) !important; } .tl-label-md { font-family: var(--tl-font) !important; font-size: var(--tl-size-md) !important; font-weight: var(--tl-weight-medium) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-wide) !important; } .tl-label-sm { font-family: var(--tl-font) !important; font-size: var(--tl-size-sm) !important; font-weight: var(--tl-weight-medium) !important; line-height: var(--tl-lh-snug) !important; letter-spacing: var(--tl-ls-wider) !important; } /* ═══════════════════════════════════════════════════════════════════ SECTION 9 — TINY (footnotes, legal, copyright text) ═══════════════════════════════════════════════════════════════════ */ .tl-tiny-sm { font-family: var(--tl-font) !important; font-size: var(--tl-size-sm) !important; font-weight: var(--tl-weight-light) !important; line-height: var(--tl-lh-normal) !important; letter-spacing: var(--tl-ls-normal) !important; } .tl-tiny-xs { font-family: var(--tl-font) !important; font-size: var(--tl-size-xs) !important; font-weight: var(--tl-weight-light) !important; line-height: var(--tl-lh-normal) !important; letter-spacing: var(--tl-ls-normal) !important; } /* ═══════════════════════════════════════════════════════════════════ SECTION 10 — RESPONSIVE BREAKPOINTS ───────────────────────────────────────────────────────────────── Token values are redefined per lang at each breakpoint. Classes stay unchanged — they always read var(--tl-size-*). The correct lang offset (+2 for SI, +1 for TA) is preserved at every breakpoint automatically. ═══════════════════════════════════════════════════════════════════ */ /* ─── TABLET 768–1023px ──────────────────────────────────────── */ @media (max-width: 1023px) and (min-width: 768px) { :root, [lang="en"] { --tl-size-xs: 10px; --tl-size-sm: 12px; --tl-size-md: 13px; --tl-size-lg: 14px; --tl-size-xl: 16px; --tl-size-2xl: 18px; --tl-size-3xl: 20px; --tl-size-4xl: 22px; --tl-size-5xl: 24px; --tl-size-6xl: 26px; --tl-size-7xl: 28px; } [lang="si"] { --tl-size-xs: 12px; --tl-size-sm: 14px; --tl-size-md: 15px; --tl-size-lg: 16px; --tl-size-xl: 18px; --tl-size-2xl: 20px; --tl-size-3xl: 22px; --tl-size-4xl: 24px; --tl-size-5xl: 26px; --tl-size-6xl: 28px; --tl-size-7xl: 30px; } [lang="ta"] { --tl-size-xs: 11px; --tl-size-sm: 13px; --tl-size-md: 14px; --tl-size-lg: 15px; --tl-size-xl: 17px; --tl-size-2xl: 19px; --tl-size-3xl: 21px; --tl-size-4xl: 23px; --tl-size-5xl: 25px; --tl-size-6xl: 27px; --tl-size-7xl: 29px; } } /* ─── PHONE 480–767px ────────────────────────────────────────── */ @media (max-width: 767px) and (min-width: 480px) { :root, [lang="en"] { --tl-size-xs: 10px; --tl-size-sm: 11px; --tl-size-md: 12px; --tl-size-lg: 13px; --tl-size-xl: 14px; --tl-size-2xl: 16px; --tl-size-3xl: 18px; --tl-size-4xl: 20px; --tl-size-5xl: 22px; --tl-size-6xl: 24px; --tl-size-7xl: 26px; } [lang="si"] { --tl-size-xs: 12px; --tl-size-sm: 13px; --tl-size-md: 14px; --tl-size-lg: 15px; --tl-size-xl: 16px; --tl-size-2xl: 18px; --tl-size-3xl: 20px; --tl-size-4xl: 22px; --tl-size-5xl: 24px; --tl-size-6xl: 26px; --tl-size-7xl: 28px; } [lang="ta"] { --tl-size-xs: 11px; --tl-size-sm: 12px; --tl-size-md: 13px; --tl-size-lg: 14px; --tl-size-xl: 15px; --tl-size-2xl: 17px; --tl-size-3xl: 19px; --tl-size-4xl: 21px; --tl-size-5xl: 23px; --tl-size-6xl: 25px; --tl-size-7xl: 27px; } } /* ─── SMALL PHONE < 480px ────────────────────────────────────── */ @media (max-width: 479px) { :root, [lang="en"] { --tl-size-xs: 10px; --tl-size-sm: 10px; --tl-size-md: 11px; --tl-size-lg: 12px; --tl-size-xl: 13px; --tl-size-2xl: 14px; --tl-size-3xl: 16px; --tl-size-4xl: 18px; --tl-size-5xl: 20px; --tl-size-6xl: 22px; --tl-size-7xl: 24px; } [lang="si"] { --tl-size-xs: 12px; --tl-size-sm: 12px; --tl-size-md: 13px; --tl-size-lg: 14px; --tl-size-xl: 15px; --tl-size-2xl: 16px; --tl-size-3xl: 18px; --tl-size-4xl: 20px; --tl-size-5xl: 22px; --tl-size-6xl: 24px; --tl-size-7xl: 26px; } [lang="ta"] { --tl-size-xs: 11px; --tl-size-sm: 11px; --tl-size-md: 12px; --tl-size-lg: 13px; --tl-size-xl: 14px; --tl-size-2xl: 15px; --tl-size-3xl: 17px; --tl-size-4xl: 19px; --tl-size-5xl: 21px; --tl-size-6xl: 23px; --tl-size-7xl: 25px; } } /* ═══════════════════════════════════════════════════════════════════ SECTION 11 — UTILITY CLASSES (stack on any tl-* class) ───────────────────────────────────────────────────────────────── All utilities read lang-aware variables. tl-light on [lang="si"] gives 400 automatically — no extra class. ═══════════════════════════════════════════════════════════════════ */ /* weight */ .tl-bold { font-weight: var(--tl-weight-bold) !important; } .tl-semibold { font-weight: var(--tl-weight-semibold) !important; } .tl-medium { font-weight: var(--tl-weight-medium) !important; } .tl-regular { font-weight: var(--tl-weight-regular) !important; } .tl-light { font-weight: var(--tl-weight-light) !important; } /* line-height */ .tl-tight { line-height: var(--tl-lh-tight) !important; } .tl-snug { line-height: var(--tl-lh-snug) !important; } .tl-normal { line-height: var(--tl-lh-normal) !important; } .tl-relaxed { line-height: var(--tl-lh-relaxed) !important; } .tl-loose { line-height: var(--tl-lh-loose) !important; } /* letter-spacing */ .tl-ls-tight { letter-spacing: var(--tl-ls-tight) !important; } .tl-ls-normal { letter-spacing: var(--tl-ls-normal) !important; } .tl-ls-wide { letter-spacing: var(--tl-ls-wide) !important; } .tl-ls-wider { letter-spacing: var(--tl-ls-wider) !important; }