/* ============================================================ NAKSHATRAHUB — GLOBAL TYPOGRAPHY CONFIG (single source of truth) ------------------------------------------------------------ Change ANY value here and it flows to the entire site. Every element type has 3 controls: SIZE, COLOR, FONT. Linked in the of every page. Nothing is hardcoded in templates — they use the classes below. ============================================================ */ :root{ /* ---- FONT FAMILIES (change a font once, site-wide) ---- */ --font-serif: 'Cinzel', Georgia, serif; /* headings / titles */ --font-elegant: 'Cormorant Garamond', serif; /* quotes / accents */ --font-body: 'Manrope', system-ui, sans-serif; /* everything else */ /* ---- 1. HERO TITLE ---- */ --hero-title-size: 56px; --hero-title-color: #fef3c7; --hero-title-font: var(--font-serif); /* ---- 2. HERO SUBTITLE ---- */ --hero-subtitle-size: 28px; --hero-subtitle-color: #e2e8f0; --hero-subtitle-font: var(--font-body); /* ---- 3. SECTION HEADING ---- */ --section-heading-size: 36px; --section-heading-color: #fef3c7; --section-heading-font: var(--font-serif); /* ---- 4. CARD TITLE ---- */ --card-title-size: 28px; --card-title-color: #fef3c7; --card-title-font: var(--font-serif); /* ---- 5. BODY TEXT ---- */ --body-size: 24px; --body-color: #e2e8f0; --body-font: var(--font-body); /* ---- 6. FORM LABELS ---- */ --label-size: 20px; --label-color: #c9a84c; --label-font: var(--font-body); /* ---- 7. BUTTON TEXT ---- */ --button-size: 20px; --button-color: inherit; --button-font: var(--font-body); /* ---- 8. FOOTER / CAPTION TEXT (18px = hard floor) ---- */ --footer-size: 18px; --footer-color: rgba(226,232,240,0.65); --footer-font: var(--font-body); } /* ============================================================ SEMANTIC CLASSES — apply these in templates (no inline sizes) ============================================================ */ .fs-hero-title{ font-size:var(--hero-title-size); color:var(--hero-title-color); font-family:var(--hero-title-font); } .fs-hero-subtitle{font-size:var(--hero-subtitle-size); color:var(--hero-subtitle-color); font-family:var(--hero-subtitle-font); } .fs-section{ font-size:var(--section-heading-size);color:var(--section-heading-color);font-family:var(--section-heading-font); } .fs-card-title{ font-size:var(--card-title-size); color:var(--card-title-color); font-family:var(--card-title-font); } .fs-body{ font-size:var(--body-size); color:var(--body-color); font-family:var(--body-font); } .fs-label{ font-size:var(--label-size); color:var(--label-color); font-family:var(--label-font); } .fs-button{ font-size:var(--button-size); font-family:var(--button-font); } .fs-footer{ font-size:var(--footer-size); color:var(--footer-color); font-family:var(--footer-font); } /* ============================================================ ELEMENT DEFAULTS — so even un-classed elements obey the config (templates can override by adding a .fs-* class) ============================================================ */ body { font-size:var(--body-size); font-family:var(--font-body); color:var(--body-color); } h1 { font-size:var(--hero-title-size); font-family:var(--hero-title-font); color:var(--hero-title-color); } h2 { font-size:var(--section-heading-size);font-family:var(--section-heading-font);color:var(--section-heading-color); } h3 { font-size:var(--card-title-size); font-family:var(--card-title-font); color:var(--card-title-color); } button, .btn, .btn-g, .btn-o { font-size:var(--button-size); font-family:var(--button-font); } label, .label { font-size:var(--label-size); font-family:var(--label-font); } small, .caption, footer { font-size:var(--footer-size); font-family:var(--footer-font); } /* ============================================================ LEGACY UTILITY ALIASES — older pages use Tailwind-style .text-* classes. Bind them to the SAME config variables so there is ONE source of truth. Small sizes floor at footer (18px). ============================================================ */ .text-xs { font-size:var(--footer-size); } /* was 0.75rem -> 18px floor */ .text-sm { font-size:var(--footer-size); } /* was 0.875rem -> 18px floor */ .text-base { font-size:var(--body-size); } /* 24px */ .text-lg { font-size:var(--body-size); } /* 24px */ .text-xl { font-size:var(--label-size); } /* 20px */ .text-2xl { font-size:var(--card-title-size); } /* 28px */ .text-3xl { font-size:var(--card-title-size); } /* 28px */ .text-4xl { font-size:var(--section-heading-size); } /* 36px */ /* ============================================================ HARD FLOOR — nothing below 18px anywhere. Guaranteed structurally: the smallest bucket (footer) IS 18px, so as long as elements use a bucket class or the element defaults above, nothing renders smaller than 18px. No global override hack needed (those cause unpredictable cascade/inheritance bugs). One source of truth, predictable. ============================================================ */