/* * Karama Yoga Studio - Global Tenant Fonts & Brand Styles * * Loaded globally by the TenantFonts component across all Karama pages * (landing, booking, auth, profile, etc.). * Do NOT add page-specific styles here — use styles.css for that. * * Design: Bright white canvas, MWH + Sculpt Society inspired. * Brand colors (teal/purple/pink) are used as accents only — never as * full-page backgrounds. Cormorant Garamond carries the editorial display * headings; DM Sans carries body + UI. Cairo covers Arabic text. */ /* Cormorant Garamond (display serif) + DM Sans (body/UI) — Latin, via Google. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap'); /* Cairo — variable weight, self-hosted (OFL). Carries Arabic glyphs; listed after DM Sans / Cormorant in the font-family stacks so Latin renders in those and Arabic falls through to Cairo. Vendored (not @import'd) to avoid a render-blocking third-party request, matching the delta tenant pattern. */ @font-face { font-family: 'Cairo'; src: url('/landing-pages/karama/fonts/Cairo-VariableFont_slnt,wght.ttf') format('truetype-variations'); font-weight: 200 1000; font-style: normal; font-display: swap; } /* Brand Colors */ :root { /* Tri-color brand accents */ --karama-teal: #18b5c5; --karama-teal-dark: #14a0af; --karama-purple: #8f2ab3; --karama-purple-dark: #7a2399; --karama-pink: #ec2187; /* Primary brand = purple (used by header/footer/account CTAs). Kept under the original --karama-primary* names so existing components don't break. */ --karama-primary: #8f2ab3; --karama-primary-dark: #7a2399; --karama-primary-light: #a94fc9; /* Neutrals */ --karama-secondary: #1c1c1c; /* Headings / strong text */ --karama-muted: #6b6b6b; /* Body / secondary text */ --karama-accent: #faf9f7; /* Soft off-white panel background */ --karama-surface: #ffffff; --karama-dark: #1c1c1c; --karama-success: #25d366; /* WhatsApp green */ } /* Override default body font for ALL Karama tenant pages */ body { font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--karama-secondary); -webkit-font-smoothing: antialiased; } /* Font utility classes */ .font-karama-heading { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600 !important; line-height: 1.05; letter-spacing: -0.01em; } .font-karama-body { font-family: 'DM Sans', 'Cairo', system-ui, sans-serif !important; font-weight: 400 !important; } .font-karama-label { font-family: 'DM Sans', 'Cairo', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: 0.18em; text-transform: uppercase; } /* * Arabic overrides — when [dir="rtl"] is on , Arabic text needs: * 1. Cairo as the primary font (not Cormorant which has no Arabic) * 2. Relaxed line-height (Arabic ascenders/descenders are taller than Latin) * 3. No letter-spacing (Arabic is a cursive script — spacing breaks ligatures) * 4. No text-transform (uppercase has no meaning in Arabic) */ [dir='rtl'] .font-karama-heading { /* Cormorant has no Arabic glyphs — remap Arabic headings to Cairo so they don't silently fall back to the serif default. */ font-family: 'Cairo', system-ui, sans-serif !important; line-height: 1.4; letter-spacing: 0; } [dir='rtl'] .font-karama-label { /* Prefer Cairo first for Arabic labels (DM Sans has no Arabic glyphs). */ font-family: 'Cairo', 'DM Sans', system-ui, sans-serif !important; letter-spacing: 0; text-transform: none; }