/*! * Theme Name: Lagom WHMCS Client Theme * Author: RS Studio (https://rsstudio.net) * Theme URL: https://lagom.rsstudio.net/ * Terms of Service: https://lagom.rsstudio.net/legal/terms-of-service/ * * This file is part of a licensed product. Unauthorized redistribution, modification, * or use outside of the licensed environment is strictly prohibited. * * © RS Studio. All rights reserved. */ :root { /* Name: Typography; Index: 1 */ /* Section: Font Family */ --font-family-base: Roboto; /* name: Use Google Font Face; type: font; */ --font-family-custom: unset; /*name: Use Custom Font Face; type: custom-font; overwrite: --font-family-base;*/ --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --font-family-icons-medium: 'lagom-medium-icons'; --font-family-icons-small: 'lagom-small-icons'; /* Section: Font Color */ --text-body-color: var(--gray-base); /* name: Base; group: Font Color; type: select-colors; */ --text-lighter-color: var(--gray-lighter); /* name: Lighter; group: Font Color; type: select-colors; */ --text-faded-color: var(--gray-lighter-2); /* name: Faded; group: Font Color; type: select-colors; */ --text-heading-color: var(--gray-darker); /* name: Heading; group: Font Color; type: select-colors; */ --text-primary-color: var(--brand-primary-lighter); /* name: Primary; group: Font Color; type: select-colors; */ --text-success-color: var(--brand-success-lighter); /* name: Success; group: Font Color; type: select-colors; */ --text-warning-color: var(--brand-warning-lighter); /* name: Warning; group: Font Color; type: select-colors; */ --text-danger-color: var(--brand-danger-lighter); /* name: Danger; group: Font Color; type: select-colors; */ /* Section: Link Colors */ --link-color: var(--text-lighter-color); /* name: Link; group: Font Color; type: select-colors; */ --link-hover-color: var(--text-body-color); /* name: Link Hover; group: Font Color; type: select-colors; */ --ui-nav-link-color: var(--text-heading-color); /* name: Nav Link; group: Font Color; type: select-colors; */ --ui-nav-link-hover-color: var(--text-body-color); /* name: Nav Link - Hover; group: Font Color; type: select-colors; */ --ui-nav-link-active-color: var(--text-heading-color); /* name: Nav Link - Active; group: Font Color; type: select-colors; */ --ui-nav-link-icon-color: var(--gray-icons); /* name: Nav Link Icon; group: Font Color; type: select-colors; */ --ui-nav-link-icon-hover-color: var(--gray-icons-hover); /* name: Nav Link Icon - Hover; group: Font Color; type: select-colors; */ --ui-nav-link-icon-active-color: var(--text-lighter-color); /* name: Nav Link Icon - Active; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-color: var(--text-body-color); /* name: Sub Nav Link; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-hover-color: var(--text-heading-color); /* name: Sub Nav Link - Hover; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-active-color: var(--text-heading-color); /* name: Sub Nav Link - Active; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-icon-color: var(--gray-icons); /* name: Sub Nav Link Icon; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-icon-hover-color: var(--text-heading-color); /* name: Sub Nav Link Icon - Hover; group: Font Color; type: select-colors; */ --ui-nav-secondary-link-icon-active-color: var(--text-heading-color); /* name: Sub Nav Link Icon - Active; group: Font Color; type: select-colors; */ /* Section: Font Size */ --font-size-xxs: 11px; /* name: Extra Extra Small; group: Font Size; type: size; append: px;*/ --font-size-xs: 12px; /* name: Extra Small; group: Font Size; type: size; append: px;*/ --font-size-sm: 13px; /* name: Small; group: Font Size; type: size; append: px;*/ --font-size-base: 14px; /* name: Base; group: Font Size; type: size; append: px;*/ --font-size-md: 15px; /* name: Medium; group: Font Size; type: size; append: px;*/ --font-size-lg: 17px; /* name: Large; group: Font Size; type: size; append: px;*/ --font-size-xlg: 20px; /* name: Extra Large; group: Font Size; type: size; append: px;*/ --font-size-xxlg: 24px; /* name: Super Large; group: Font Size; type: size; append: px;*/ --font-size-h9: 12px; /* name: Heading "h9"; group_name: H9; group: Font Size; type: size; append: px;*/ --font-size-h8: 14px; /* name: Heading "h8"; group_name: H8; group: Font Size; type: size; append: px;*/ --font-size-h7: 16px; /* name: Heading "h7"; group_name: H7; group: Font Size; type: size; append: px;*/ --font-size-h6: 18px; /* name: Heading "h6"; group_name: H6; group: Font Size; type: size; append: px;*/ --font-size-h5: 20px; /* name: Heading "h5"; group_name: H5; group: Font Size; type: size; append: px;*/ --font-size-h4: 26px; /* name: Heading "h4"; group_name: H4; group: Font Size; type: size; append: px;*/ --font-size-h3: 36px; /* name: Heading "h3"; group_name: H3; group: Font Size; type: size; append: px;*/ --font-size-h2: 40px; /* name: Heading "h2"; group_name: H2; group: Font Size; type: size; append: px;*/ --font-size-h1: 48px; /* name: Heading "h1"; group_name: H1; group: Font Size; type: size; append: px;*/ /* Section: Font Line Height */ --line-height-xxs: 16px; /* name: Extra Extra Small; group: Line Height; type: size; append: px;*/ --line-height-xs: 18px; /* name: Extra Small; group: Line Height; type: size; append: px;*/ --line-height-sm: 20px; /* name: Small; group: Line Height; type: size; append: px;*/ --line-height-base: 24px; /* name: Base; group: Line Height; type: size; append: px;*/ --line-height-md: 24px; /* name: Medium; group: Line Height; type: size; append: px;*/ --line-height-lg: 28px; /* name: Large; group: Line Height; type: size; append: px;*/ --line-height-xlg: 32px; /* name: Extra Large; group: Line Height; type: size; append: px;*/ --line-height-xxlg: 40px; /* name: Super Large; group: Line Height; type: size; append: px;*/ --line-height-h9: 16px; /* name: Heading "h9"; group_name: H9; group: Line Height; type: size; append: px;*/ --line-height-h8: 18px; /* name: Heading "h8"; group_name: H8; group: Line Height; type: size; append: px;*/ --line-height-h7: 22px; /* name: Heading "h7"; group_name: H7; group: Line Height; type: size; append: px;*/ --line-height-h6: 24px; /* name: Heading "h6"; group_name: H6; group: Line Height; type: size; append: px;*/ --line-height-h5: 28px; /* name: Heading "h5"; group_name: H5; group: Line Height; type: size; append: px;*/ --line-height-h4: 34px; /* name: Heading "h4"; group_name: H4; group: Line Height; type: size; append: px;*/ --line-height-h3: 46px; /* name: Heading "h3"; group_name: H3; group: Line Height; type: size; append: px;*/ --line-height-h2: 52px; /* name: Heading "h2"; group_name: H2; group: Line Height; type: size; append: px;*/ --line-height-h1: 56px; /* name: Heading "h1"; group_name: H1; group: Line Height; type: size; append: px;*/ /* Section: Font Weight */ --font-weight-light: 300; /* name: Light; group: Font Weight;*/ --font-weight-base: 400; /* name: Base; group: Font Weight;*/ --font-weight-medium: 500; /* name: Medium; group: Font Weight;*/ --font-weight-bold: 700; /* name: Bold; group: Font Weight;*/ --font-weight-black: 900; /* name: Black; group: Font Weight;*/ --font-weight-bolder: bolder; --font-weight-h8: var(--font-weight-base); /* name: Heading "h8"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h7: var(--font-weight-base); /* name: Heading "h7"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h6: var(--font-weight-medium); /* name: Heading "h6"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h5: var(--font-weight-base); /* name: Heading "h5"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h4: var(--font-weight-light); /* name: Heading "h4"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h3: var(--font-weight-bold); /* name: Heading "h3"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h2: var(--font-weight-light); /* name: Heading "h2"; var_group: Font Weight; group: Font Weight;*/ --font-weight-h1: var(--font-weight-black); /* name: Heading "h1"; var_group: Font Weight; group: Font Weight;*/ --paragraph-margin-bottom: var(--spacing-2x); --headings-margin-bottom: var(--spacing-2x); --link-decoration: none; --article-font-color: var(--text-body-color); --article-font-size-base: var(--font-size-lg); --article-font-weight-base: var(--font-weight-base); --article-line-height-base: var(--line-height-lg); --article-h1-margin-top: var(--spacing-2x); --article-h1-margin-bottom: var(--spacing-2x); --article-h2-margin-top: 12px; --article-h2-margin-bottom: 12px; --article-h3-margin-top: 10px; --article-h3-margin-bottom: 10px; --article-h4-margin-top: 8px; --article-h4-margin-bottom: 8px; --article-h5-margin-top: 6px; --article-h5-margin-bottom: 6px; --article-h6-margin-top: 6px; --article-h6-margin-bottom: 6px; --markdown-font-color: var(--text-body-color); --markdown-font-size-base: var(--font-size-lg); --markdown-font-weight-base: var(--font-weight-base); --markdown-line-height-base: var(--line-height-lg); --markdown-paragraph-padding-bottom: 12px; --markdown-h1-padding-top: var(--spacing-2x); --markdown-h1-padding-bottom: var(--spacing-2x); --markdown-h2-padding-top: 12px; --markdown-h2-padding-bottom: 12px; --markdown-h3-padding-top: 10px; --markdown-h3-padding-bottom: 10px; --markdown-h4-padding-top: 8px; --markdown-h4-padding-bottom: 8px; --markdown-h5-padding-top: 6px; --markdown-h5-padding-bottom: 6px; --markdown-h6-padding-top: 6px; --markdown-h6-padding-bottom: 6px; --markdown-blockquote-padding-bottom: 12px; --markdown-code-padding-bottom: 12px; } @media (max-width: 767px) { :root { --font-size-xs: 11px; --font-size-sm: 12px; --font-size-base: 14px; --font-size-md: 14px; --font-size-lg: 16px; --font-size-xlg: 18px; --font-size-xxlg: 21px; --font-size-h6: 16px; --font-size-h5: 18px; --font-size-h4: 21px; --font-size-h3: 26px; --font-size-h2: 32px; --font-size-h1: 40px; --line-height-xs: 16px; --line-height-sm: 18px; --line-height-base: 24px; --line-height-md: 24px; --line-height-lg: 26px; --line-height-xlg: 30px; --line-height-xxlg: 40px; --line-height-h6: 22px; --line-height-h5: 28px; --line-height-h4: 30px; --line-height-h3: 34px; --line-height-h2: 40px; --line-height-h1: 48px; } }