/** * ============================================================================ * TYPOGRAPHY SYSTEM * Priya Glam Studio & Academy * ============================================================================ * * Purpose: * - Establish frontend typography hierarchy * - Provide readable body typography * - Define semantic heading defaults * - Provide reusable text utilities * * Font files are loaded by the frontend layout. * Do NOT use @import here. * * Typography hierarchy: * Display → Cormorant Garamond * Heading → Poppins * Body → Inter * Accent → Sacramento * ============================================================================ */ /* ============================================================================ ROOT TYPOGRAPHY BEHAVIOUR ============================================================================ */ html { font-synthesis: none; text-rendering: optimizeLegibility; } /* ============================================================================ BODY TYPOGRAPHY ============================================================================ */ body { font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--font-weight-regular); line-height: 1.7; letter-spacing: -0.01em; color: var(--color-neutral-700); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ============================================================================ HEADINGS - SHARED FOUNDATION ============================================================================ */ h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--color-neutral-900); text-wrap: balance; font-style: normal; } /* ============================================================================ DISPLAY HEADINGS ============================================================================ */ h1, h2, h3 { font-family: var(--font-display); font-weight: var(--font-weight-semibold); line-height: 1.15; letter-spacing: -0.025em; } h1 { font-size: var(--text-5xl); font-weight: var(--font-weight-bold); line-height: 1.08; letter-spacing: -0.035em; } h2 { font-size: var(--text-4xl); } h3 { font-size: var(--text-3xl); } /* ============================================================================ SUPPORTING HEADINGS ============================================================================ */ h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-weight-semibold); line-height: 1.3; letter-spacing: -0.015em; color: var(--color-neutral-800); } h4 { font-size: var(--text-2xl); } h5 { font-size: var(--text-xl); } h6 { font-size: var(--text-lg); } /* ============================================================================ PARAGRAPHS ============================================================================ */ p { margin: 0; color: var(--color-neutral-600); line-height: 1.75; text-wrap: pretty; } /* Lead / introductory paragraph */ .lead, p.lead { font-size: var(--text-lg); font-weight: var(--font-weight-regular); line-height: 1.8; color: var(--color-neutral-600); } /* ============================================================================ CONTENT FLOW ============================================================================ */ /** * Applies vertical rhythm only when explicitly using `.prose`. * * This prevents global heading/paragraph margins from interfering with * hero sections, cards, carousels, navigation or custom components. */ .prose > * + * { margin-top: var(--spacing-lg); } .prose > h2 { margin-top: var(--spacing-3xl); } .prose > h3 { margin-top: var(--spacing-2xl); } .prose > h4, .prose > h5, .prose > h6 { margin-top: var(--spacing-xl); } /* ============================================================================ DECORATIVE ACCENT TYPOGRAPHY ============================================================================ */ .text-accent { font-family: var(--font-accent); font-weight: var(--font-weight-regular); color: var(--color-primary-500); } /* ============================================================================ EYEBROW / SECTION LABEL ============================================================================ */ .eyebrow { display: inline-block; margin-bottom: var(--spacing-sm); font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--font-weight-semibold); line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary-500); } /* ============================================================================ TEXT GRADIENT ============================================================================ */ .text-gradient { display: inline-block; color: var(--color-primary-500); background: var(--gradient-rose-gold); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* ============================================================================ TEXT SHADOW UTILITIES ============================================================================ */ .text-shadow-sm { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.10); } .text-shadow-md { text-shadow: 0 2px 6px rgba(0, 0, 0, 0.14); } /* ============================================================================ LINKS ============================================================================ */ /** * Only unclassed links receive default article-style link treatment. * * Buttons, navigation links and custom CTA components have their own * styles and must not be overridden here. */ a:not([class]) { color: var(--color-primary-600); text-decoration-line: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.18em; text-decoration-color: rgba(245, 66, 117, 0.45); transition: color var(--transition-fast), text-decoration-color var(--transition-fast); } a:not([class]):hover { color: var(--color-primary-700); text-decoration-color: currentColor; } /* ============================================================================ EMPHASIS ============================================================================ */ strong, b { font-weight: var(--font-weight-semibold); } /** * Do not style every element globally. * * Font Awesome uses for icons: * */ em { font-style: italic; } /* Semantic elements without a class may still use italic styling. */ i:not([class]) { font-style: italic; } /* ============================================================================ SMALL TEXT ============================================================================ */ small { font-size: var(--text-sm); line-height: 1.5; color: var(--color-neutral-500); } /* ============================================================================ HIGHLIGHTED TEXT ============================================================================ */ mark { padding: 0.125em 0.3em; background: var(--color-primary-100); color: var(--color-primary-800); border-radius: var(--radius-sm); } /* ============================================================================ BLOCKQUOTE ============================================================================ */ blockquote { position: relative; margin: var(--spacing-2xl) 0; padding-left: var(--spacing-xl); border-left: 4px solid var(--color-primary-500); font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--font-weight-medium); font-style: italic; line-height: 1.6; color: var(--color-neutral-700); } blockquote p { color: inherit; } blockquote cite { display: block; margin-top: var(--spacing-md); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--font-weight-medium); font-style: normal; color: var(--color-neutral-500); } /* ============================================================================ INLINE CODE ============================================================================ */ code, kbd, samp { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Monaco, "Courier New", monospace; } code { padding: 0.125em 0.375em; background: var(--color-neutral-100); color: var(--color-primary-700); border-radius: var(--radius-sm); font-size: 0.9em; } /* ============================================================================ CODE BLOCKS ============================================================================ */ pre { max-width: 100%; margin: var(--spacing-xl) 0; padding: var(--spacing-lg); overflow-x: auto; background: var(--color-neutral-900); color: var(--color-neutral-100); border-radius: var(--radius-lg); line-height: 1.6; tab-size: 4; -webkit-overflow-scrolling: touch; } pre code { padding: 0; background: transparent; color: inherit; border-radius: 0; font-size: inherit; } /* ============================================================================ TEXT SELECTION ============================================================================ */ ::selection { background: var(--color-primary-200); color: var(--color-neutral-900); } /* ============================================================================ RESPONSIVE TYPOGRAPHY ============================================================================ */ @media (max-width: 767px) { body { line-height: 1.65; } blockquote { margin: var(--spacing-xl) 0; padding-left: var(--spacing-lg); font-size: var(--text-lg); } .eyebrow { letter-spacing: 0.1em; } }