/* ============================================================================ LS Fabrication — TYPE ROLES The type system for the whole site. Every heading level, text role, label, price, input and eyebrow is defined here once, on the tokens in style.css. Rules of the house: - This is the only sheet (with style.css tokens and fonts.css) that may set a font-size. Component sheets say WHICH role an element is, not how big. - Two families: Barlow Condensed (600/700) for display, Inter for reading. - Barlow Condensed never below 18px in mixed case. Under that it is either the caps label (uppercase, .06em) or it is Inter. - Three trackings: 0, --ls-tracking-caps (.06em), --ls-tracking-eyebrow / --ls-tracking-button (.12em). One line-height per role. - Nothing on the site under --ls-caption (12px). Every input is 16px so iOS Safari does not zoom on focus. Selectors carry a `body` / `html body` prefix on purpose: Divi prints its Theme Options CSS late in , so a bare element selector here would lose the tie. One extra element beats Divi without out-ranking a component class, so component sheets can still say ".ls-card__title { role: h4 }". ========================================================================= */ /* --- Body ---------------------------------------------------------------- */ html body { font-family: var(--ls-font-body); font-size: var(--ls-body); line-height: var(--ls-leading-body); } /* Divi's Theme Options drop body copy to 14px between 768 and 980px. Body copy is 16px at every width. */ @media (max-width: 980px) { html body { font-size: var(--ls-body); } } /* --- Headings ------------------------------------------------------------ */ body h1, body h2, body h3, body h4, body h5, body h6 { font-family: var(--ls-font-display); color: var(--ls-text); letter-spacing: 0; text-transform: none; text-wrap: balance; } body h1 { font-size: var(--ls-h1); font-weight: 600; line-height: var(--ls-leading-h1); } body h2 { font-size: var(--ls-h2); font-weight: 700; line-height: var(--ls-leading-tight); } body h3 { font-size: var(--ls-h3); font-weight: 700; line-height: var(--ls-leading-h3); } body h4 { font-size: var(--ls-h4); font-weight: 600; line-height: var(--ls-leading-h4); } body h5, body h6 { font-weight: 700; line-height: 1; text-transform: uppercase; letter-spacing: var(--ls-tracking-caps); } body h5 { font-size: var(--ls-h5); } body h6 { font-size: var(--ls-h6); } /* Divi shrinks headings inside 1/3, 1/4, 1/5, 1/6 and 2/5 columns (.et_pb_column_1_3 h3 { font-size: 20px } and so on). A heading is the same size wherever it sits, so those five column widths are named here at one notch higher specificity than Divi's rule. */ body .et_pb_column_1_3 h1, body .et_pb_column_1_4 h1, body .et_pb_column_1_5 h1, body .et_pb_column_1_6 h1, body .et_pb_column_2_5 h1 { font-size: var(--ls-h1); } body .et_pb_column_1_3 h2, body .et_pb_column_1_4 h2, body .et_pb_column_1_5 h2, body .et_pb_column_1_6 h2, body .et_pb_column_2_5 h2 { font-size: var(--ls-h2); } body .et_pb_column_1_3 h3, body .et_pb_column_1_4 h3, body .et_pb_column_1_5 h3, body .et_pb_column_1_6 h3, body .et_pb_column_2_5 h3 { font-size: var(--ls-h3); } body .et_pb_column_1_3 h4, body .et_pb_column_1_4 h4, body .et_pb_column_1_5 h4, body .et_pb_column_1_6 h4, body .et_pb_column_2_5 h4 { font-size: var(--ls-h4); } body .et_pb_column_1_3 h5, body .et_pb_column_1_4 h5, body .et_pb_column_1_5 h5, body .et_pb_column_1_6 h5, body .et_pb_column_2_5 h5 { font-size: var(--ls-h5); } body .et_pb_column_1_3 h6, body .et_pb_column_1_4 h6, body .et_pb_column_1_5 h6, body .et_pb_column_1_6 h6, body .et_pb_column_2_5 h6 { font-size: var(--ls-h6); } /* --- Text roles ---------------------------------------------------------- */ .ls-display { font-family: var(--ls-font-display); font-size: var(--ls-display); font-weight: 700; line-height: var(--ls-leading-display); letter-spacing: 0; } .ls-lede { font-size: var(--ls-lede); line-height: var(--ls-leading-body); } .ls-small, body small { font-size: var(--ls-small); line-height: var(--ls-leading-small); } .ls-caption { font-size: var(--ls-caption); font-weight: 600; line-height: var(--ls-leading-snug); } /* Eyebrow: the small uppercase label above a heading, a field or a total. One style for all of them. */ .ls-eyebrow, .ls-label { display: block; font-family: var(--ls-font-body); font-size: var(--ls-micro); font-weight: 600; line-height: 1.3; letter-spacing: var(--ls-tracking-eyebrow); text-transform: uppercase; color: var(--ls-text-soft); } /* Caps label: the only way Barlow Condensed appears under 18px. Footer column heads, facet titles, section kickers. */ .ls-caps { font-family: var(--ls-font-display); font-size: var(--ls-h5); font-weight: 700; line-height: 1; letter-spacing: var(--ls-tracking-caps); text-transform: uppercase; } /* Prices: Inter, tabular, one size per context. */ .ls-price { font-family: var(--ls-font-body); font-size: var(--ls-price-card); font-weight: 700; line-height: 1.2; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--ls-text); } .ls-price--product { font-family: var(--ls-font-display); font-size: var(--ls-price-product); line-height: 1; } .ls-price--total { font-size: var(--ls-price-total); } .ls-price__from { font-size: var(--ls-small); font-weight: 400; color: var(--ls-text-muted); } /* Measure: prose never runs past ~70 characters. */ .ls-prose, .ls-prose > p, .ls-prose > ul, .ls-prose > ol { max-width: var(--ls-measure); } /* --- Forms --------------------------------------------------------------- */ html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]):not([type="hidden"]), html body select, html body textarea { font-family: var(--ls-font-body); font-size: var(--ls-body); line-height: 1.4; } body label, body legend { font-family: var(--ls-font-body); } /* --- Rhythm --------------------------------------------------------------- One vertical rhythm for headings and paragraphs wherever a component does not set its own. Divi's `padding-bottom: 10px` on headings is retired. */ body h1, body h2, body h3, body h4, body h5, body h6 { padding-bottom: 0; } body h2:not(:first-child) { margin-top: var(--ls-space-7); } body h3:not(:first-child) { margin-top: var(--ls-space-6); } body h4:not(:first-child) { margin-top: var(--ls-space-5); } body h2 { margin-bottom: var(--ls-space-4); } body h3 { margin-bottom: var(--ls-space-3); } body h4 { margin-bottom: var(--ls-space-2); } body h5, body h6 { margin-bottom: var(--ls-space-2); } /* Currency suffix printed after prices by the "USD on product page" snippet. */ .ls-price__cur { font-family: var(--ls-font-body); font-size: var(--ls-caption); font-weight: 600; letter-spacing: var(--ls-tracking-eyebrow); text-transform: uppercase; vertical-align: middle; color: var(--ls-text-soft); }