/* ========================================================================== ElevatorPlus Typography System ========================================================================== Font: Poppins (loaded via Google Fonts in page ) Weights loaded: 300, 400, 500, 600, 700, 800 Naming: ep-display-*, ep-heading-*, ep-body-*, ep-caption-* Prefixed to avoid collision with theme.css .text-* utilities. Usage:

Hero headline

Section header

Body text

========================================================================== */ /* ---------- Type Tokens ---------- */ :root { --ep-font: "Poppins", sans-serif; /* Scale (desktop) — 1.25 ratio */ --ep-display-xl: 3rem; /* 48px */ --ep-display-lg: 2.5rem; /* 40px */ --ep-display-md: 2rem; /* 32px */ --ep-heading-xl: 1.5rem; /* 24px */ --ep-heading-lg: 1.25rem; /* 20px */ --ep-heading-md: 1.125rem; /* 18px */ --ep-heading-sm: 1rem; /* 16px */ --ep-body: 1rem; /* 16px */ --ep-body-sm: 0.875rem; /* 14px */ --ep-caption: 0.75rem; /* 12px */ /* Weights */ --ep-fw-regular: 400; --ep-fw-medium: 500; --ep-fw-semibold: 600; --ep-fw-bold: 700; /* Line heights */ --ep-lh-tight: 1.2; /* display / large headings */ --ep-lh-snug: 1.3; /* headings */ --ep-lh-normal: 1.6; /* body */ --ep-lh-relaxed: 1.75; /* long-form body */ /* Letter spacing */ --ep-ls-tight: -0.02em; /* display sizes */ --ep-ls-normal: 0; /* headings / body */ --ep-ls-wide: 0.02em; /* captions, overlines */ /* Colors — reuse existing theme vars */ --ep-color-heading: #1a1a2e; --ep-color-body: var(--default, #777); --ep-color-muted: #999; --ep-color-accent: var(--primary, #2665C4); } /* ---------- Display ---------- For hero headlines and page-level headers. ========================================================================== */ .ep-display-xl { font-family: var(--ep-font); font-size: var(--ep-display-xl); font-weight: var(--ep-fw-bold); line-height: var(--ep-lh-tight); letter-spacing: var(--ep-ls-tight); color: var(--ep-color-heading); } .ep-display-lg { font-family: var(--ep-font); font-size: var(--ep-display-lg); font-weight: var(--ep-fw-bold); line-height: var(--ep-lh-tight); letter-spacing: var(--ep-ls-tight); color: var(--ep-color-heading); } .ep-display-md { font-family: var(--ep-font); font-size: var(--ep-display-md); font-weight: var(--ep-fw-bold); line-height: var(--ep-lh-snug); letter-spacing: var(--ep-ls-tight); color: var(--ep-color-heading); } /* ---------- Headings ---------- For section headers, card titles, sidebar labels. ========================================================================== */ .ep-heading-xl { font-family: var(--ep-font); font-size: var(--ep-heading-xl); font-weight: var(--ep-fw-semibold); line-height: var(--ep-lh-snug); letter-spacing: var(--ep-ls-normal); color: var(--ep-color-heading); } .ep-heading-lg { font-family: var(--ep-font); font-size: var(--ep-heading-lg); font-weight: var(--ep-fw-semibold); line-height: var(--ep-lh-snug); letter-spacing: var(--ep-ls-normal); color: var(--ep-color-heading); } .ep-heading-md { font-family: var(--ep-font); font-size: var(--ep-heading-md); font-weight: var(--ep-fw-semibold); line-height: var(--ep-lh-snug); letter-spacing: var(--ep-ls-normal); color: var(--ep-color-heading); } .ep-heading-sm { font-family: var(--ep-font); font-size: var(--ep-heading-sm); font-weight: var(--ep-fw-medium); line-height: var(--ep-lh-snug); letter-spacing: var(--ep-ls-normal); color: var(--ep-color-heading); } /* ---------- Body ---------- For paragraphs and general content. ========================================================================== */ .ep-body { font-family: var(--ep-font); font-size: var(--ep-body); font-weight: var(--ep-fw-regular); line-height: var(--ep-lh-normal); letter-spacing: var(--ep-ls-normal); color: var(--ep-color-body); } .ep-body-sm { font-family: var(--ep-font); font-size: var(--ep-body-sm); font-weight: var(--ep-fw-regular); line-height: var(--ep-lh-normal); letter-spacing: var(--ep-ls-normal); color: var(--ep-color-body); } .ep-body-lg { font-family: var(--ep-font); font-size: var(--ep-heading-md); font-weight: var(--ep-fw-regular); line-height: var(--ep-lh-relaxed); letter-spacing: var(--ep-ls-normal); color: var(--ep-color-body); } /* ---------- Caption & Overline ---------- For labels, meta info, timestamps, badges. ========================================================================== */ .ep-caption { font-family: var(--ep-font); font-size: var(--ep-caption); font-weight: var(--ep-fw-regular); line-height: var(--ep-lh-normal); letter-spacing: var(--ep-ls-wide); color: var(--ep-color-muted); } .ep-overline { font-family: var(--ep-font); font-size: var(--ep-caption); font-weight: var(--ep-fw-semibold); line-height: var(--ep-lh-normal); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ep-color-accent); } /* ---------- Accent Span ---------- For highlighted words inside headings. Usage:

Powering Elevator Businesses

========================================================================== */ .ep-accent { color: var(--ep-color-accent); } /* ---------- Responsive Scale ---------- Fluid reduction at smaller viewports. ========================================================================== */ @media (max-width: 991px) { :root { --ep-display-xl: 2.5rem; /* 40px */ --ep-display-lg: 2rem; /* 32px */ --ep-display-md: 1.75rem; /* 28px */ --ep-heading-xl: 1.375rem; /* 22px */ } } @media (max-width: 575px) { :root { --ep-display-xl: 2rem; /* 32px */ --ep-display-lg: 1.75rem; /* 28px */ --ep-display-md: 1.5rem; /* 24px */ --ep-heading-xl: 1.25rem; /* 20px */ --ep-heading-lg: 1.125rem; /* 18px */ } } /* ---------- Reduced Motion ---------- */ @media (prefers-reduced-motion: reduce) { .ep-display-xl, .ep-display-lg, .ep-display-md, .ep-heading-xl, .ep-heading-lg, .ep-heading-md, .ep-heading-sm { transition: none; } }