/** * Typography Scale * * Usage (single page): * Controller: $this->_view_data['typographyScale'] = true; * $this->_view_data['typographyHasBanner'] = true; // or false * $this->_view_data['pageCss']['frontend/css/typography-scale.css'] = 'false'; * * Usage (project-wide later): * Enable typographyScale in template/controller defaults, or add class to : * * * Modifiers: * .typography-scale--with-banner Pages with banner / hero banner * .typography-scale--no-banner Pages without banner * * Utility classes: * .ts-h1, .ts-h2, .ts-h3 Heading sizes without semantic tags * .ts-lead Intro paragraph (20px desktop on banner pages) * .ts-para Body paragraph (16px) * .ts-pointers List / bullet text (14px) */ .typography-scale { --ts-h1: 32px; --ts-h1-lh: 1.2; --ts-h2: 26px; --ts-h2-lh: 1.25; --ts-h3: 20px; --ts-h3-lh: 1.3; --ts-para: 16px; --ts-para-lh: 1.6; --ts-para-lead: 16px; --ts-para-lead-lh: 1.6; --ts-pointers: 14px; --ts-pointers-lh: 1.5; } .typography-scale--with-banner { --ts-h1: 40px; --ts-h1-lh: 1.15; --ts-para-lead: 20px; --ts-para-lead-lh: 1.6; } /* Headings */ .typography-scale h1, .typography-scale .ts-h1 { font-size: var(--ts-h1); line-height: var(--ts-h1-lh); } .typography-scale h2, .typography-scale .ts-h2, .typography-scale .main-heading { font-size: var(--ts-h2); line-height: var(--ts-h2-lh); } .typography-scale h3, .typography-scale .ts-h3 { font-size: var(--ts-h3); line-height: var(--ts-h3-lh); } .typography-scale h4, .typography-scale h5, .typography-scale h6 { font-size: var(--ts-h3); line-height: var(--ts-h3-lh); } /* Paragraphs */ .typography-scale p, .typography-scale .ts-para { font-size: var(--ts-para); line-height: var(--ts-para-lh); } .typography-scale .ts-lead, .typography-scale--with-banner h1 + p, .typography-scale--with-banner .sub-heading + p { font-size: var(--ts-para-lead); line-height: var(--ts-para-lead-lh); } .typography-scale--no-banner .ts-lead { font-size: var(--ts-para); line-height: var(--ts-para-lh); } /* Pointers / lists */ .typography-scale ul, .typography-scale ol, .typography-scale .icon-listing, .typography-scale .icon-listing li, .typography-scale .ts-pointers, .typography-scale .disclaimer, .typography-scale .panel-body { font-size: var(--ts-pointers); line-height: var(--ts-pointers-lh); } .typography-scale .faqs h3.panel-title { font-size: var(--ts-h3); line-height: var(--ts-h3-lh); } .typography-scale h2.sub-heading, .typography-scale h2.main-heading, .typography-scale .sub-heading.ts-h2 { font-size: var(--ts-h2); line-height: var(--ts-h2-lh); } .typography-scale h1.sub-heading, .typography-scale h1.main-heading { font-size: var(--ts-h1); line-height: var(--ts-h1-lh); } /* Property tour page components */ .typography-scale .pt-hero__title { font-size: var(--ts-h1); line-height: var(--ts-h1-lh); } .typography-scale .pt-hero__desc { font-size: var(--ts-para-lead); line-height: var(--ts-para-lead-lh); } .typography-scale--no-banner .pt-hero__desc { font-size: var(--ts-para); line-height: var(--ts-para-lh); } .typography-scale .pt-hero__form-title, .typography-scale .pt-trust__title, .typography-scale .pt-beyond__title { font-size: var(--ts-h2); line-height: var(--ts-h2-lh); } .typography-scale .pt-trust__card-title{ font-size: var(--ts-para); line-height: var(--ts-para-lh); } .typography-scale .pt-beyond__form-title { font-size: var(--ts-h3); line-height: var(--ts-h3-lh); } .typography-scale .pt-beyond__desc, .typography-scale .pt-trust__card-text, .typography-scale .pt-hero__form-subtitle { font-size: var(--ts-para); line-height: var(--ts-para-lh); } .typography-scale .pt-beyond__info p { font-size: var(--ts-pointers); line-height: var(--ts-pointers-lh); } /* Mobile */ @media screen and (max-width: 767px) { .typography-scale { --ts-h1: 30px; --ts-h2: 22px; --ts-h3: 18px; } .typography-scale--with-banner { --ts-para-lead: 18px; } }