/* Life Moments */ /* Core */ /* Font code */ @font-face { font-family: 'rubik'; font-weight: 300; font-style: normal; src: url('fonts/300-rubik-light-italic.woff') format('woff'); } @font-face { font-family: 'rubik'; font-weight: 300; font-style: italic; src: url('fonts/300-rubik-light-italic.woff') format('woff'); } @font-face { font-family: 'rubik'; font-weight: 400; font-style: normal; src: url('fonts/400-rubik-regular.woff') format('woff'); } @font-face { font-family: 'rubik'; font-weight: 400; font-style: italic; src: url('fonts/400-rubik-italic.woff') format('woff'); } @font-face { font-family: 'rubik'; font-weight: 500; font-style: normal; src: url('fonts/500-rubik-medium.woff') format('woff'); } @font-face { font-family: 'rubik'; font-weight: 500; font-style: italic; src: url('fonts/500-medium-italic.woff') format('woff'); } @font-face { font-family: 'rubik'; font-weight: 700; font-style: normal; src: url('fonts/700-rubik-bold.woff') format('woff'); } @font-face { font-family: 'rubik'; font-weight: 700; font-style: italic; src: url('fonts/700-rubik-bold-italic.woff') format('woff'); } :root { /* Swatches */ /* Colours */ --meta-swatch-colour-1: #D61F5C; --meta-swatch-colour-2: #0D9DBC; --meta-swatch-colour-3: #F57D1D; --meta-swatch-colour-4: #66C607; /* Monos */ --meta-swatch-mono-1: #222222; --meta-swatch-mono-2: #343434; --meta-swatch-mono-3: #DDDDDD; --meta-swatch-mono-4: #F8F8F8; --meta-swatch-mono-5: #FFFFFF; --meta-swatch-mono-6: #F1F1F1; /* Translucents */ --meta-swatch-dark-1: rgba(0, 0, 0, 0.5); --meta-swatch-dark-2: rgba(0, 0, 0, 0.1); --meta-swatch-dark-3: rgba(0, 0, 0, 0.05); --meta-swatch-light-1: 255, 255, 255, 1; --meta-swatch-light-2: 255, 255, 255, 0.63; --meta-swatch-light-3: 255, 255, 255, 0.12; --meta-swatch-light-4: ; --meta-swatch-light-5: 255, 255, 255, 0; /* Gradients */ --meta-swatch-gradient-1: linear-gradient(135deg, #0EB004 0%, #E3E40A 100%); --meta-swatch-gradient-2: linear-gradient(135deg, #F54E25 0%, #F5AE13 100%); --meta-swatch-gradient-3: linear-gradient(135deg, #0783F4 0%, #2CBA55 100%); --meta-swatch-gradient-4: linear-gradient(135deg, #CB22A0 0%, #F63D29 100%); --meta-swatch-gradient-5: linear-gradient(180deg, #2D2D2D 0%, #222222 100%); --meta-swatch-gradient-6: linear-gradient(180deg, #F2F2F2 0%, #E6E6E6 100%); --meta-swatch-gradient-7: linear-gradient(180deg, #F2F2F2 0%, #CCCCCC 100%); /* Check if these can be deleted */ /* Content zone */ --swatch-content-bg: var(--meta-swatch-mono-10); --swatch-content-bg-transparent: var(--meta-swatch-light-5); --swatch-content-text-strong: var(--meta-swatch-mono-3); --swatch-content-text-subtle: var(--meta-swatch-mono-5); --swatch-content-text-headings: var(--meta-swatch-mono-3); --swatch-content-text-link: var(--meta-swatch-colour-1); --swatch-content-link-underline: var(--meta-swatch-colour-1); --swatch-content-link-bg: transparent; --swatch-content-link-hover: var(--meta-swatch-colour-1); --swatch-content-link-underline-hover: var(--meta-swatch-colour-1); --swatch-content-link-hover-bg: var(--meta-swatch-colour-1); --swatch-content-indicator-on: var(--meta-swatch-colour-1); --swatch-content-indicator-off: transparent; --swatch-content-indicator-hover: var(--meta-swatch-mono-3); --swatch-content-text-strong-bg: transparent; --swatch-content-text-emphasis-bg: transparent; --swatch-content-icon-bg: rgba(var(--meta-swatch-dark-4)); --swatch-content-icon-link: var(--meta-swatch-colour-1); --swatch-content-icon-warning: var(--meta-swatch-colour-4); --swatch-content-keylines: rgba(var(--meta-swatch-dark-3)); --swatch-content-icon: var(--meta-swatch-mono-2); --swatch-content-icon-bg: transparent; /* Card zone */ --swatch-card-bg: rgba(var(--meta-swatch-dark-4)); --swatch-card-text-strong: var(--meta-swatch-mono-1); --swatch-card-text-subtle: rgba(var(--meta-swatch-dark-2)); --swatch-card-text-headings: var(--meta-swatch-mono-1); --swatch-card-text-link: var(--meta-swatch-colour-5); --swatch-card-indicator-on: var(--meta-swatch-colour-5); --swatch-card-indicator-off: rgba(var(--meta-swatch-dark-3)); --swatch-card-indicator-hover: rgba(var(--meta-swatch-dark-3)); --swatch-card-link-bg: transparent; --swatch-card-text-link-hover: var(--meta-swatch-mono-5); --swatch-card-link-hover-bg: var(--meta-swatch-colour-1); --swatch-card-text-strong-bg: transparent; --swatch-card-text-emphasis-bg: transparent; --swatch-card-icon-bg: rgba(var(--meta-swatch-dark-4)); --swatch-card-icon-link: var(--meta-swatch-colour-5); --swatch-card-icon-warning: var(--meta-swatch-colour-4); --swatch-card-keylines: rgba(var(--meta-swatch-dark-3)); --swatch-card-icons-inactive: var(--meta-swatch-mono-2); /* Hero zone */ --swatch-hero-bg: var(--meta-swatch-colour-1); --swatch-hero-text-headings: var(--meta-swatch-mono-5); --swatch-hero-text-strong: var(--meta-swatch-mono-5); --swatch-hero-text-subtle: var(--meta-swatch-mono-5); --swatch-hero-text-link: var(--meta-swatch-mono-5); --swatch-hero-icon-bg: transparent; --swatch-hero-icon-link: var(--meta-swatch-mono-5); --swatch-hero-icon-warning: var(--meta-swatch-mono-5); --swatch-hero-keylines: var(--meta-swatch-light-3); /* Dataviz */ --swatch-dataviz-bar-whole: var(--meta-swatch-mono-4); --swatch-dataviz-bar-value: var(--meta-swatch-colour-3); --swatch-dataviz-icon-bg: var(--meta-swatch-colour-3); --swatch-dataviz-icon: var(--meta-swatch-mono-5); --swatch-dataviz-status-indicator: var(--meta-swatch-colour-4); /* Coach */ --swatch-coach-question-bg: var(--meta-swatch-mono-4); --swatch-coach-question-text: var(--meta-swatch-mono-1); --swatch-coach-question-text-link: var(--meta-swatch-colour-5); --swatch-coach-link-bg: transparent; --swatch-coach-text-link-hover: var(--meta-swatch-colour-5); --swatch-coach-link-hover-bg: transparent; --swatch-coach-answer-bg: var(--meta-swatch-colour-1); --swatch-coach-answer-text: var(--meta-swatch-mono-5); /* Forms */ --swatch-forms-label: var(--meta-swatch-mono-2); --swatch-forms-value: var(--meta-swatch-mono-1); --swatch-forms-indicator-off: rgba(var(--meta-swatch-dark-3)); --swatch-forms-indicator-hover: rgba(var(--meta-swatch-dark-3)); --swatch-forms-input-bg: var(--meta-swatch-mono-4); --swatch-forms-error-bg: var(--meta-swatch-mono-5); --swatch-forms-error-text: var(--meta-swatch-mono-2); --swatch-forms-error-icon: var(--meta-swatch-colour-4); --swatch-forms-validated-highlight: var(--meta-swatch-colour-1); --swatch-forms-option-bg-color: var(--meta-swatch-mono-4); --swatch-forms-option: rgba(var(--meta-swatch-dark-2)); --swatch-forms-tick-icon-off: transparent; --swatch-forms-tick-icon-on: var(--meta-swatch-colour-1); /* Patterns */ /* Global typography */ /* & */ --typo-strong-font-weight: 500; --typo-em-font-style: italic; /* Global */ --pattern-letter-spacing-display: 0; --pattern-letter-spacing-body: 0; --pattern-form-label-margin-bottom: 8px; /* Headings */ /* Heading 3XL */ /* Heading 2XL */ --typo-h-2xl-colour: var(--meta-swatch-mono-1); --typo-h-2xl-font-face: 'rubik'; --typo-h-2xl-font-size: 40px; --typo-h-2xl-font-weight: 500; --typo-h-2xl-font-style: normal; --typo-h-2xl-line-height: 1.2; --typo-h-2xl-letter-spacing: var(--pattern-letter-spacing-display); --typo-h-2xl-text-transform: none; --typo-h-2xl-text-align: left; --typo-h-2xl-margin: 1.5rem 0 0.7rem; /* Heading XL */ --typo-h-xlarge-colour: var(--meta-swatch-mono-1); --typo-h-xlarge-font-face: 'rubik'; --typo-h-xlarge-font-size: 32px; --typo-h-xlarge-font-weight: 500; --typo-h-xlarge-font-style: normal; --typo-h-xlarge-line-height: 1.2; --typo-h-xlarge-letter-spacing: var(--pattern-letter-spacing-display); --typo-h-xlarge-text-transform: none; --typo-h-xlarge-text-align: left; --typo-h-xlarge-margin: 1.5rem 0 0.7rem; /* Heading L */ --typo-h-large-colour: var(--meta-swatch-mono-1); --typo-h-large-font-face: 'rubik'; --typo-h-large-font-size: 28px; --typo-h-large-font-weight: 500; --typo-h-large-font-style: normal; --typo-h-large-line-height: 1.2; --typo-h-large-letter-spacing: var(--pattern-letter-spacing-display); --typo-h-large-text-transform: none; --typo-h-large-text-align: left; --typo-h-large-margin: 1.5rem 0 0.7rem; /* Heading M */ --typo-h-medium-colour: var(--meta-swatch-mono-1); --typo-h-medium-font-face: 'rubik'; --typo-h-medium-font-size: 24px; --typo-h-medium-font-weight: 500; --typo-h-medium-font-style: normal; --typo-h-medium-line-height: 1.2; --typo-h-medium-letter-spacing: var(--pattern-letter-spacing-display); --typo-h-medium-text-transform: none; --typo-h-medium-text-align: left; --typo-h-medium-margin: 1.5rem 0 0.7rem; /* Heading S */ --typo-h-small-colour: var(--meta-swatch-mono-1); --typo-h-small-font-face: 'rubik'; --typo-h-small-font-size: 18px; --typo-h-small-font-weight: 500; --typo-h-small-font-style: normal; --typo-h-small-line-height: 1.2; --typo-h-small-letter-spacing: var(--pattern-letter-spacing-display); --typo-h-small-text-transform: none; --typo-h-small-text-align: left; --typo-h-small-margin: 1.5rem 0 0.7rem; /* Heading XS */ --typo-h-xs-colour: var(--meta-swatch-mono-1); --typo-h-xs-font-face: 'rubik'; --typo-h-xs-font-size: 16px; --typo-h-xs-font-weight: 500; --typo-h-xs-font-style: normal; --typo-h-xs-line-height: 1.2; --typo-h-xs-letter-spacing: var(--pattern-letter-spacing-display); --typo-h-xs-text-transform: none; --typo-h-xs-text-align: left; --typo-h-xs-margin: 1.5rem 0 0.7rem; /* Heading 2XS */ /* Heading 3XS */ /* Sub Headings */ /* Sub heading 3XL */ /* Sub heading 2XL */ /* Sub heading XL */ /* Sub heading L */ /* Sub heading M */ /* Sub heading S */ /* Sub heading XS */ /* Sub heading 2XS */ /* Sub heading 3XS */ /* Paragraphs */ /* Paragraph XL */ --typo-p-xl-colour: var(--meta-swatch-mono-2); --typo-p-xl-font-face: 'rubik'; --typo-p-xl-font-size: 24px; --typo-p-xl-font-weight: 400; --typo-p-xl-font-style: normal; --typo-p-xl-line-height: 1.5; --typo-p-xl-letter-spacing: var(--pattern-letter-spacing-body); --typo-p-xl-text-transform: none; --typo-p-xl-text-align: left; --typo-p-xl-margin: 0 0 0.7rem; /* Paragraph L */ --typo-p-large-colour: var(--meta-swatch-mono-2); --typo-p-large-font-face: 'rubik'; --typo-p-large-font-size: 20px; --typo-p-large-font-weight: 400; --typo-p-large-font-style: normal; --typo-p-large-line-height: 1.5; --typo-p-large-letter-spacing: var(--pattern-letter-spacing-body); --typo-p-large-text-transform: none; --typo-p-large-text-align: left; --typo-p-large-margin: 0 0 0.7rem; /* Paragraph M */ --typo-p-medium-colour: var(--meta-swatch-mono-2); --typo-p-medium-font-face: 'rubik'; --typo-p-medium-font-size: 18px; --typo-p-medium-font-weight: 400; --typo-p-medium-font-style: normal; --typo-p-medium-line-height: 1.5; --typo-p-medium-letter-spacing: var(--pattern-letter-spacing-body); --typo-p-medium-text-transform: none; --typo-p-medium-text-align: left; --typo-p-medium-margin: 0 0 0.7rem; /* Paragraph S */ --typo-p-small-colour: var(--meta-swatch-mono-2); --typo-p-small-font-face: 'rubik'; --typo-p-small-font-size: 16px; --typo-p-small-font-weight: 400; --typo-p-small-font-style: normal; --typo-p-small-line-height: 1.5; --typo-p-small-letter-spacing: var(--pattern-letter-spacing-body); --typo-p-small-text-transform: none; --typo-p-small-text-align: left; --typo-p-small-margin: 0 0 0.7rem; /* Paragraph XS */ /*

"concluding" */ --typo-p-concluding-colour: var(--meta-swatch-mono-1); --typo-p-concluding-font-face: 'rubik'; --typo-p-concluding-font-size: 18px; --typo-p-concluding-font-weight: 400; --typo-p-concluding-font-style: normal; --typo-p-concluding-line-height: 1.5; --typo-p-concluding-letter-spacing: var(--pattern-letter-spacing-body); --typo-p-concluding-text-transform: none; --typo-p-concluding-text-align: left; --typo-p-concluding-margin: 2.5rem 0 0.7rem; /*

"article-intro" */ --template-articles-intro-colour: var(--pattern-subtle-text-colour); --template-articles-intro-font-face: var(--typo-p-medium-font-face); --template-articles-intro-font-size: var(--typo-p-medium-font-size); --template-articles-intro-font-weight: var(--typo-p-medium-font-weight); --template-articles-intro-font-style: italic; --template-articles-intro-line-height: var(--typo-p-medium-line-height); --template-articles-intro-letter-spacing: var(--typo-p-medium-letter-spacing); --template-articles-intro-text-transform: var(--typo-p-medium-text-transform); --template-articles-intro-text-align: var(--typo-p-medium-text-align); /*

"cta" */ --typo-p-cta-colour: var(--meta-swatch-mono-1); --typo-p-cta-font-face: 'rubik'; --typo-p-cta-font-size: 16px; --typo-p-cta-font-weight: inherit; --typo-p-cta-font-style: inherit; --typo-p-cta-line-height: 1.5; --typo-p-cta-letter-spacing: var(--pattern-letter-spacing-body); --typo-p-cta-text-transform: none; --typo-p-cta-text-align: left; --typo-p-cta-margin: 2.5rem 0 0.7rem; /* Labels */ /* Label 2XL */ /* Label XL */ /* Label L */ --typo-data-label-l-colour: var(--meta-swatch-mono-5); --typo-data-label-l-font-face: 'rubik'; --typo-data-label-l-font-size: 20px; --typo-data-label-l-font-weight: 400; --typo-data-label-l-font-style: normal; --typo-data-label-l-line-height: 1; --typo-data-label-l-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-label-l-text-transform: none; --typo-data-label-l-text-align: left; --typo-data-label-l-margin-bottom: 0 0 0.7rem; /* Label M */ --typo-data-label-m-colour: var(--meta-swatch-mono-5); --typo-data-label-m-font-face: 'rubik'; --typo-data-label-m-font-size: 16px; --typo-data-label-m-font-weight: 400; --typo-data-label-m-font-style: normal; --typo-data-label-m-line-height: 1; --typo-data-label-m-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-label-m-text-transform: none; --typo-data-label-m-text-align: left; --typo-data-label-m-margin-bottom: 0 0 0.7rem; /* Label S */ --typo-data-label-s-colour: var(--meta-swatch-mono-5); --typo-data-label-s-font-face: 'rubik'; --typo-data-label-s-font-size: 13px; --typo-data-label-s-font-weight: 400; --typo-data-label-s-font-style: normal; --typo-data-label-s-line-height: 1; --typo-data-label-s-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-label-s-text-transform: none; --typo-data-label-s-text-align: left; --typo-data-label-s-margin-bottom: 0 0 0.7rem; /* Label XS */ /* Label 2XS */ /* Data */ /* Data 2XL */ /* Data XL */ /* Data L */ --typo-data-l-colour: var(--meta-swatch-mono-3); --typo-data-l-font-face: 'rubik'; --typo-data-l-font-size: 28px; --typo-data-l-font-weight: 300; --typo-data-l-font-style: italic; --typo-data-l-line-height: 1; --typo-data-l-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-l-text-transform: none; --typo-data-l-text-align: left; --typo-data-l-margin-bottom: 0 0 0.7rem; /* Data M */ --typo-data-m-colour: var(--meta-swatch-mono-3); --typo-data-m-font-face: 'rubik'; --typo-data-m-font-size: 16px; --typo-data-m-font-weight: 300; --typo-data-m-font-style: italic; --typo-data-m-line-height: 1; --typo-data-m-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-m-text-transform: none; --typo-data-m-text-align: left; --typo-data-m-margin-bottom: 0 0 0.7rem; /* Data S */ --typo-data-s-colour: var(--meta-swatch-mono-3); --typo-data-s-font-face: 'rubik'; --typo-data-s-font-size: 13px; --typo-data-s-font-weight: 300; --typo-data-s-font-style: italic; --typo-data-s-line-height: 1; --typo-data-s-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-s-text-transform: none; --typo-data-s-text-align: left; --typo-data-s-margin-bottom: 0 0 0.7rem; /* Data XS */ /* Data 2XS */ /* Data 3XS */ /* Forms */ /* Labels */ --typo-form-label-colour: var(--meta-swatch-mono-5); --typo-form-label-font-face: 'rubik'; --typo-form-label-font-size: 13px; --typo-form-label-font-weight: 400; --typo-form-label-font-style: normal; --typo-form-label-line-height: 1.2; --typo-form-label-letter-spacing: var(--pattern-letter-spacing-body); --typo-form-label-text-transform: none; --typo-form-label-margin-bottom: 8px; /* Values */ --typo-form-value-colour: var(--meta-swatch-mono-3); --typo-form-value-font-face: 'rubik'; --typo-form-value-font-size: 16px; --typo-form-value-font-weight: 500; --typo-form-value-font-style: normal; --typo-form-value-line-height: 1.2; --typo-form-value-letter-spacing: var(--pattern-letter-spacing-body); --typo-form-value-text-transform: none; --typo-form-value-margin-bottom: 8px; /* Fields */ /* Layout */ --pattern-layout-spacer-top-s: 0; --pattern-layout-spacer-sections-s: 24px; --pattern-layout-spacer-components-s: 16px; --pattern-layout-spacer-bottom-s: 0; --pattern-layout-spacer-top-ml: 0; --pattern-layout-spacer-sections-ml: 48px; --pattern-layout-spacer-components-ml: 24px; --pattern-layout-spacer-content-ml: 8px; --pattern-layout-spacer-bottom-ml: 48px; --layout-icon-size: 24px; --pattern-icon-size: 24px; --layout-sub-width: 100%; --pattern-col-span-l: span 8; /* Colour */ --pattern-interaction-colour: var(--meta-swatch-colour-1); --pattern-negative-colour: var(--meta-swatch-colour-2); --pattern-strong-text-colour: var(--meta-swatch-mono-1); --pattern-subtle-text-colour: var(--meta-swatch-mono-2); --pattern-disabled-opacity: 0.2; --pattern-hover-colour: var(--meta-swatch-colour-3); --pattern-keyline-colour: var(--meta-swatch-mono-8); --pattern-card-bg-colour: var(--meta-swatch-mono-5); --pattern-indicator-colour: var(--meta-swatch-colour-5); --pattern-data-value-colour: var(--meta-swatch-gradient-3); --pattern-data-whole-colour: var(--meta-swatch-mono-4); /* Motion */ --motion-hover-transition-duration: 150ms; --motion-page-transition-duration: 250ms; --motion-expand-transition-duration: 150ms; --motion-curve-ease-out: ease-out; --motion-curve-ease-in-out-back: cubic-bezier(0.530, 0.005, 0.180, 1.410); /* Effects */ --effect-card-border: none; --pattern-border-radius-m: 8px; --effect-card-border-radius: 24px; --effect-keyline-width: 1px; --effect-keyline-width-menu: 1px; --effect-forms-border-width: 1px; --effects-indicator-width: 4px; --pattern-elevation-low: 0px 2px 12px 1px rgba(0, 0, 0, 0.10); --pattern-depression-low: inset 0px 2px 6px rgba(0, 0, 0, 0.1); --pattern-indicator-width: 2px; --pattern-card-border: 1px solid var(--meta-swatch-mono-8); --pattern-keyline-width: 1px; --navbar-icons-bg-border-radius: 50%; --pattern-button-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.08); /* Vars to check if we can delete */ /*

*/ --typo-figcaption-colour: var(--meta-swatch-mono-3); --typo-figcaption-font-face: 'rubik'; --typo-figcaption-font-size: 15px; --typo-figcaption-font-weight: 400; --typo-figcaption-font-style: italic; --typo-figcaption-line-height: 1.5; --typo-figcaption-letter-spacing: var(--pattern-letter-spacing-body); --typo-figcaption-text-transform: none; --typo-figcaption-text-align: left; --typo-figcaption-margin-bottom: 0 0 0.7rem; /* Old vars */ /* Body */ --face-body: 'face1'; --line-height-body: 1.5; --letter-spacing-body: -0.03rem; --par-margin-body: 0.7rem; --text-transform-body: none; --body-paragraph-s-size: 18px; --body-paragraph-s-weight: normal; --body-paragraph-s-size: 16px; --body-paragraph-s-weight: normal; --body-paragraph-xs-size: 14px; --body-paragraph-xs-weight: normal; --body-quote-size: 24px; --body-quote-weight: normal; --body-quote-style: italic; --body-quote-padding: 32px; --body-strong-weight: bold; --body-strong-style: inherit; --body-strong-bg-padding: 0; --body-emphasis-weight: normal; --body-emphasis-style: italic; --body-emphasis-bg-padding: 0; --body-link-weight: inherit; --body-link-style: inherit; --body-link-bg-radius: 2px; --body-link-underline-width: 1px; --body-link-bg-padding: 0 0.2rem 2px; --body-link-underline-width-hover: 1px; /* Headings */ --face-heading: 'face1'; --line-height-heading: 1.2; --letter-spacing-heading: -0.03rem; --par-margin-heading: 0.7rem; --text-transform-heading: none; --heading-page-title-size: 40px; --heading-page-title-weight: 800; --heading-paragraph-s-size: 24px; --heading-paragraph-s-weight: 800; /* Forms */ --face-forms: 'face1'; --line-height-forms: 1; --letter-spacing-forms: -0.03rem; --par-margin-forms: 0rem; --text-transform-forms: none; --forms-input-value-size: 18px; --forms-input-value-weight: bold; --forms-input-label-size: 16px; --forms-input-label-weight: normal; --forms-input-option-size: 18px; --forms-input-option-weight: normal; /* Navigation */ --face-navigation: 'face1'; --line-height-navigation: 1; --letter-spacing-navigation: -0.03rem; --text-transform-navigation: none; --par-margin-navigation: 0rem; /* Menu label */ --line-height-menu-label: 1.2; --letter-spacing-menu-label: -0.03rem; --par-margin-menu-label: 0rem; --text-transform-menu-label: none; /* Data label */ --par-margin-data-label: 0rem; --face-data-label: var(--typo-p-medium-font-face); --letter-spacing-data-label: var(--typo-p-medium-letter-spacing); --line-height-data-label: var(--typo-p-medium-line-height); --text-transform-data-label: var(--typo-p-medium-text-transform); --data-label-s-size: var(--typo-p-medium-font-size); --data-label-s-weight: var(--typo-p-medium-font-weight); --data-label-s-size: var(--typo-p-medium-font-size); --data-label-s-weight: var(--typo-p-medium-font-weight); --data-label-l-size: var(--typo-p-medium-font-size); --data-label-l-weight: var(--typo-p-medium-font-weight); /* Data output */ --par-margin-data-output: 0rem; --face-data-output: 'face1'; --letter-spacing-data-output: -0.03rem; --line-height-data-output: 1.2; --text-transform-data-output: none; --data-output-s-size: 18px; --data-output-s-weight: bold; --data-output-s-size: 24px; --data-output-s-weight: bold; --data-output-l-size: 32px; --data-output-l-weight: bold; /* Blocks */ /* Content */ /* Activity Progress */ /* Container */ /* Content container */ /* Label */ /* Items container */ /* Single Item */ /* Advert */ /* Section container */ --template-dashboard-adverts-cards-columns: 1; --template-dashboard-adverts-cards-gap-row: 16px; --template-dashboard-adverts-cards-gap-column: 0; --template-dashboard-adverts-bg-color: transparent; --template-dashboard-adverts-top-spacer-display: block; --template-dashboard-adverts-top-spacer-keyline: solid; --template-dashboard-adverts-bottom-spacer-display: block; /* Advert block container */ --advert-background-colour: var(--meta-swatch-mono-10); --advert-background-image-repeat: no-repeat; --advert-background-image-size: cover; --advert-background-image-position: center center; --advert-border: none; --advert-border-radius: var(--pattern-border-radius-m); --advert-padding: 16px; --advert-margin: 20px 16px; /* Heading */ --advert-heading-colour: var(--meta-swatch-mono-1); --advert-heading-font-family: var(--typo-h-medium-font-face); --advert-heading-font-size: var(--typo-h-medium-font-size); --advert-heading-font-weight: var(--typo-h-medium-font-weight); --advert-heading-font-style: var(--typo-h-medium-font-style); --advert-heading-line-height: var(--typo-h-medium-line-height); --advert-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --advert-heading-text-transform: var(--typo-h-medium-text-transform); --advert-heading-text-align: var(--typo-h-medium-text-align); --advert-heading-margin: 0; /* Paragraph */ --advert-paragraph-colour: var(--meta-swatch-mono-1); --advert-paragraph-font-family: var(--typo-p-medium-font-face); --advert-paragraph-font-size: var(--typo-p-medium-font-size); --advert-paragraph-font-weight: var(--typo-p-medium-font-weight); --advert-paragraph-font-style: var(--typo-p-medium-font-style); --advert-paragraph-line-height: var(--typo-p-medium-line-height); --advert-paragraph-letter-spacing: var(--typo-p-medium-letter-spacing); --advert-paragraph-text-transform: var(--typo-p-medium-text-transform); --advert-paragraph-text-align: var(--typo-p-medium-text-align); --advert-paragraph-margin: 0 0 0.7rem 0; /* Button block overrides */ --advert-button-margin: 0 0 0 auto; --advert-button-min-width: 240px; --advert-button-max-width: none; /* Article read */ /* Icon */ --template-articles-done-icon-colour: var(--meta-swatch-mono-10); --template-articles-done-icon-size: 32px; /* Icon background */ --template-articles-done-icon-bg-size: 48px; --template-articles-done-icon-bg-colour: var(--meta-swatch-colour-11); --template-articles-done-icon-bg-border-radius: 50%; --template-articles-done-icon-bg-border: none; /* Keyline */ --template-articles-done-keyline: 1px solid var(--pattern-keyline-colour); --template-articles-done-keyline-gutter: 12px; /* Blockquote */ /*
*/ --typo-quote-bg-colour: var(--meta-swatch-mono-5); --typo-quote-colour: var(--meta-swatch-mono-2); --typo-quote-font-face: 'rubik'; --typo-quote-font-size: 18px; --typo-quote-font-weight: 300; --typo-quote-font-style: italic; --typo-quote-line-height: 1.8; --typo-quote-letter-spacing: var(--pattern-letter-spacing-body); --typo-quote-text-transform: none; --typo-quote-text-align: left; --typo-quote-padding: 24px; --typo-quote-margin: 0; --typo-quote-max-width: 100%; --typo-quote-border-top: 1px solid var(--meta-swatch-mono-8); --typo-quote-border-bottom: 1px solid var(--meta-swatch-mono-8); --typo-quote-border-radius: 18px; --typo-quote-border: 1px solid var(--meta-swatch-mono-3); /* */ --type-quote-cite-colour: var(--meta-swatch-mono-2); --type-quote-cite-font-face: 'rubik'; --type-quote-cite-font-size: 18px; --type-quote-cite-font-weight: 400; --type-quote-cite-font-style: normal; --type-quote-cite-line-height: 1.5; --type-quote-cite-letter-spacing: var(--pattern-letter-spacing-body); --type-quote-cite-text-transform: none; --type-quote-cite-text-align: left; /* Body */ --body-block-padding: 16px 0; --body-block-gap: 16px; --body-block-image-padding: 0; --body-block-flex-direction: column-reverse; --body-block-flex-direction-m: row; --body-block-flex-direction-l: row; --body-block-image-height: auto; --body-block-flex-direction-opt1: column-reverse; --body-block-flex-direction-s-opt1: row-reverse; --body-block-flex-direction-l-opt1: row-reverse; /* Callout */ /* Container */ --callout-padding: 16px; --callout-padding-m: 24px; --callout-padding-l: 24px; --callout-gap: 8px; --callout-gap-m: 8px; --callout-gap-l: 8px; --callout-background: var(--meta-swatch-mono-5); --callout-border: 1px solid var(--meta-swatch-mono-3); --callout-border-radius: 18px; /* Header */ --callout-header-padding: 0; --callout-header-padding-m: 0; --callout-header-padding-l: 0; --callout-header-gap: 8px; --callout-header-gap-m: 8px; --callout-header-gap-l: 8px; /* Icon */ --callout-icon-color: var(--meta-swatch-colour-1); --callout-icon-size: 32px; /* Headings */ --callout-h-colour: var(--typo-h-xs-colour); --callout-h-font-face: var(--typo-h-xs-font-face); --callout-h-font-size: 18px; --callout-h-font-size-m: 20px; --callout-h-font-size-l: 20px; --callout-h-font-weight: var(--typo-h-xs-font-weight); --callout-h-font-style: var(--typo-h-xs-font-style); --callout-h-line-height: var(--typo-h-xs-line-height); --callout-h-letter-spacing: var(--typo-h-xs-letter-spacing); --callout-h-text-transform: var(--typo-h-xs-text-transform); --callout-h-text-align: var(--typo-h-xs-text-align); /* Paragraphs */ --callout-p-colour: var(--meta-swatch-mono-1); --callout-p-font-face: var(--typo-p-medium-font-face); --callout-p-font-size: 16px; --callout-p-font-size-m: var(--typo-p-medium-font-size); --callout-p-font-size-l: var(--typo-p-medium-font-size); --callout-p-font-weight: var(--typo-p-medium-font-weight); --callout-p-font-style: var(--typo-p-medium-font-style); --callout-p-line-height: var(--typo-p-medium-line-height); --callout-p-letter-spacing: var(--typo-p-medium-letter-spacing); --callout-p-text-transform: var(--typo-p-medium-text-transform); --callout-p-text-align: var(--typo-p-medium-text-align); --callout-p-margin: 0 0 8px 40px; /* Coach explainer */ /* Block container */ /* Icon */ /* Content / Paragraph */ /* Content / List items */ /* Cover */ --cover-img-object-position: bottom center; --cover-img-object-border-radius: 12px; /* Heading */ --cover-heading-face: var(--typo-h-large-font-face); --cover-heading-size-s: var(--typo-h-large-font-size); --cover-heading-size-ml: var(--typo-h-xlarge-font-size); --cover-heading-weight: var(--typo-h-large-font-weight); --cover-heading-font-style: var(--typo-h-large-font-style); --cover-heading-line-height: var(--typo-h-large-line-height); --cover-heading-letter-spacing: var(--typo-h-large-letter-spacing); --cover-heading-text-transform: var(--typo-h-large-text-transform); /* Sub heading */ --cover-sub-heading-face: var(--typo-p-medium-font-face); --cover-sub-heading-size-s: var(--typo-p-medium-font-size); --cover-sub-heading-size-ml: var(--typo-p-large-font-size); --cover-sub-heading-weight: var(--typo-p-medium-font-weight); --cover-sub-heading-font-style: var(--typo-p-medium-font-style); --cover-sub-heading-line-height: var(--typo-p-medium-line-height); --cover-sub-heading-letter-spacing: var(--typo-p-medium-letter-spacing); --cover-sub-heading-text-transform: var(--typo-p-medium-text-transform); /* Body text */ /* Spacing */ --cover-text-spacer-s: 1rem; --cover-text-spacer-ml: 1rem; /* Buttons */ /* Donut */ --pie-chart-whole-fill: transparent; --pie-chart-whole-stroke: var(--swatch-dataviz-bar-whole); --pie-chart-value-fill: transparent; --pie-chart-value-stroke: var(--swatch-dataviz-bar-value); --pie-chart-value-stroke-linecap: round; --pie-chart-marker-fill: ; /* Image */ --image-border-radius: 18px; --image-featured-border-radius: 18px; /* Align left */ --image-align-left-max-width: 100%; --image-align-left-margin: 0 0 24px 0; --image-align-left-shape-margin: 24px; --image-align-left-max-width-m: 50%; --image-align-left-margin-m: 0 24px 24px 0; --image-align-left-shape-margin-m: 24px; --image-align-left-max-width-l: 50%; --image-align-left-margin-l: 0 24px 24px 0; --image-align-left-shape-margin-l: 24px; /* Align right */ --image-align-right-max-width: 100%; --image-align-right-margin: 0 0 24px 0; --image-align-right-shape-margin: 24px; --image-align-right-max-width-m: 50%; --image-align-right-margin-m: 0 0 24px 24px; --image-align-right-shape-margin-m: 24px; --image-align-right-max-width-l: 50%; --image-align-right-margin-l: 0 0 24px 24px; --image-align-right-shape-margin-l: 24px; /* Align center */ --image-align-center-max-width: 100%; --image-align-center-margin: 24px; --image-align-center-shape-margin: 24px; --image-align-center-max-width-m: 50%; --image-align-center-margin-m: 24px; --image-align-center-shape-margin-m: 24px; --image-align-center-max-width-l: 50%; --image-align-center-margin-l: 24px; --image-align-center-shape-margin-l: 24px; /* Caption */ --image-caption-colour: var(--meta-swatch-mono-2); --image-caption-font-family: 'rubik'; --image-caption-font-size: 14px; --image-caption-font-weight: normal; --image-caption-font-style: normal; --image-caption-line-height: 1.5; --image-caption-letter-spacing: 0; --image-caption-text-transform: none; --image-caption-text-align: center; --image-caption-margin: 16px 0 0 0; /* Introducer Banner */ /* Block */ /* Container */ /* Text */ /* Logo container */ /* Logo */ /* In page message */ --in-page-message-margin: 0; --in-page-message-padding: 16px; --in-page-message-bg-colour: transparent; --in-page-message-colour: var(--typo-p-medium-colour); --in-page-message-font-family: var(--typo-p-medium-font-face); --in-page-message-font-size: var(--typo-p-medium-font-size); --in-page-message-font-weight: var(--typo-p-medium-font-weight); --in-page-message-font-style: var(--typo-p-medium-font-style); --in-page-message-line-height: var(--typo-p-medium-line-height); --in-page-message-letter-spacing: var(--typo-p-medium-letter-spacing); --in-page-message-text-transform: var(--typo-p-medium-text-transform); /* Job card */ /* Container */ --job-card-container-background-color: var(--meta-swatch-mono-10); --job-card-container-padding: 0; --job-card-container-border: none; --job-card-container-border-radius: 12px; --job-card-container-box-shadow: var(--pattern-elevation-low); /* Found indicator */ --job-card-found-indicator-width: 0px; --job-card-found-indicator-border-radius: 0; --job-card-found-indicator-margin: 0; --job-card-found-indicator-known-color: transparent; --job-card-found-indicator-known-border: none; --job-card-found-indicator-unknown-color: transparent; --job-card-found-indicator-unknown-border: none; /* Logo */ --job-card-logo-margin-right: 8px; --job-card-logo-height: 48px; --job-card-logo-width: 48px; --job-card-logo-border: none; --job-card-logo-border-radius: 6px; /* Logo background colors */ /* Logo text colors */ /* Time range label */ --job-card-time-range-label-colour: var(--typo-form-label-colour); --job-card-time-range-label-font-family: var(--typo-form-label-font-face); --job-card-time-range-label-font-size: var(--typo-form-label-font-size); --job-card-time-range-label-font-weight: var(--typo-form-label-font-weight); --job-card-time-range-label-font-style: var(--typo-form-label-font-style); --job-card-time-range-label-line-height: var(--typo-form-label-line-height); --job-card-time-range-label-letter-spacing: var(--typo-form-label-letter-spacing); --job-card-time-range-label-text-align: var(--typo-form-label-text-align); --job-card-time-range-label-margin: 0; /* Body */ --job-card-body-padding: 16px; /* Header container */ --job-card-header-container-margin-bottom: 16px; /* Employer heading */ --job-card-employer-heading-colour: var(--typo-h-small-colour); --job-card-employer-heading-font-family: var(--typo-h-small-font-face); --job-card-employer-heading-font-size: var(--typo-h-small-font-size); --job-card-employer-heading-font-weight: var(--typo-h-small-font-weight); --job-card-employer-heading-font-style: var(--typo-h-small-font-style); --job-card-employer-heading-line-height: var(--typo-h-small-line-height); --job-card-employer-heading-letter-spacing: var(--typo-h-small-letter-spacing); --job-card-employer-heading-text-transform: var(--typo-h-small-text-transform); --job-card-employer-heading-text-align: var(--typo-h-small-text-align); --job-card-employer-heading-margin: 0; /* Difficulty indicator */ --job-card-difficulty-icon-color-hard: var(--meta-swatch-colour-12); --job-card-difficulty-icon-color-easy: var(--meta-swatch-colour-9); --job-card-difficulty-icon-color-medium: var(--meta-swatch-colour-11); --job-card-difficulty-icon-size: var(--pattern-icon-size); --job-card-difficulty-label-colour: var(--typo-form-label-colour); --job-card-difficulty-label-font-family: var(--typo-form-label-font-face); --job-card-difficulty-label-font-size: var(--typo-form-label-font-size); --job-card-difficulty-label-font-weight: var(--typo-form-label-font-weight); --job-card-difficulty-label-font-style: var(--typo-form-label-font-style); --job-card-difficulty-label-line-height: var(--typo-form-label-line-height); --job-card-difficulty-label-letter-spacing: var(--typo-form-label-letter-spacing); --job-card-difficulty-label-text-transform: var(--typo-form-label-text-transform); --job-card-difficulty-label-text-align: var(--typo-form-label-text-align); --job-card-difficulty-label-margin: 20px 0 20px 12px; /* Card icons */ --job-card-card-icons-color: var(--meta-swatch-mono-12); --job-card-card-icons-size: var(--pattern-icon-size); --job-card-card-icons-margin-left: 4px; /* Info row */ --job-card-info-row-min-height: 32px; --job-card-info-row-border-top: 1px solid light grey; /* Info row label */ --job-card-info-row-label-colour: var(--typo-form-label-colour); --job-card-info-row-label-font-family: var(--typo-form-label-font-face); --job-card-info-row-label-font-size: var(--typo-form-label-font-size); --job-card-info-row-label-font-weight: var(--typo-form-label-font-weight); --job-card-info-row-label-font-style: var(--typo-form-label-font-style); --job-card-info-row-label-line-height: var(--typo-form-label-line-height); --job-card-info-row-label-letter-spacing: var(--typo-form-label-letter-spacing); --job-card-info-row-label-text-transform: var(--typo-form-label-text-transform); --job-card-info-row-label-text-align: var(--typo-form-label-text-align); --job-card-info-row-label-margin: none; /* Info row data */ --job-card-info-row-data-colour: var(--typo-data-s-colour); --job-card-info-row-data-font-family: var(--typo-data-s-font-face); --job-card-info-row-data-font-size: var(--typo-data-s-font-size); --job-card-info-row-data-font-weight: var(--typo-data-s-font-weight); --job-card-info-row-data-font-style: var(--typo-data-s-font-style); --job-card-info-row-data-line-height: var(--typo-data-s-line-height); --job-card-info-row-data-letter-spacing: var(--typo-data-s-letter-spacing); --job-card-info-row-data-text-transform: var(--typo-data-s-text-transform); --job-card-info-row-data-text-align: var(--typo-data-s-text-align); --job-card-info-row-data-margin: none; /* Button container */ --job-card-button-container-margin-top: 0px; /* Letter Link */ --job-card-letter-link-colour: var(--typo-p-medium-colour); --job-card-letter-link-font-family: var(--typo-p-medium-font-face); --job-card-letter-link-font-size: var(--typo-p-medium-font-size); --job-card-letter-link-font-weight: var(--typo-p-medium-font-weight); --job-card-letter-link-font-style: var(--typo-p-medium-font-style); --job-card-letter-link-line-height: var(--typo-p-medium-line-height); --job-card-letter-link-letter-spacing: var(--typo-p-medium-letter-spacing); --job-card-letter-link-text-transform: var(--typo-p-medium-text-transform); /* Property card */ /* Container */ /* Image */ /* Information icon container */ /* Info icon */ /* Property card on portfolio */ /* Section */ /* Action btn */ /* Action btn label */ /* Action btn icon */ /* Property CTA */ /* Container */ /* Label */ /* Property Stats */ /* Container */ /* Item container */ /*Icon */ /* Value */ /* Label */ /* Property Id */ /* Container */ /* Label container */ /* Label */ /*Image */ /* Media & Text */ --media-text-content-display: flex; --media-text-content-flex-direction: column; --media-text-content-justify-content: center; /* Block container */ --mt-flex-direction: column-reverse; --mt-flex-media-right-direction: column; --mt-flex-direction-m: row; --mt-flex-direction-l: row; --mt-promo-small-flex-direction: row; --mt-promo-small-flex-direction-m: row; --mt-promo-small-flex-direction-l: row; --mt-promo-medium-flex-direction: row; --mt-promo-medium-flex-direction-m: row; --mt-promo-medium-flex-direction-l: row; --mt-promo-large-flex-direction: column; --mt-promo-large-media-right-flex-direction: column-reverse; --mt-promo-large-flex-direction-m: row; --mt-promo-large-flex-direction-l: row; --mt-margin: 0 0 32px; --mt-margin-m: 0 0 48px; --mt-margin-l: 0 0 64px; /* Text container */ --mt-text-justify-content: center; --mt-text-justify-content-m: center; --mt-text-justify-content-l: center; --mt-text-padding: 0 0 16px; --mt-text-padding-m: 0 0 0 24px; --mt-text-padding-l: 0 0 0 24px; --mt-text-onright-padding: 0 0 16px; --mt-text-onright-padding-m: 0 24px 0 0; --mt-text-onright-padding-l: 0 24px 0 0; --mt-text-heading-margin-top: 16px; --mt-text-heading-margin-top-m: 0; /* Image container */ --mt-image-flex-basis: 100%; --mt-image-flex-basis-m: 50%; --mt-image-flex-basis-l: 50%; --mt-image-promo-small-flex-basis: 32px; --mt-image-promo-small-height: 32px; --mt-image-promo-small-flex-basis-m: 48px; --mt-image-promo-small-height-m: 48px; --mt-image-promo-small-flex-basis-l: 64px; --mt-image-promo-small-height-l: 64px; --mt-image-promo-medium-flex-basis: 80px; --mt-image-promo-medium-height: 80px; --mt-image-promo-medium-flex-basis-m: 128px; --mt-image-promo-medium-height-m: 128px; --mt-image-promo-medium-flex-basis-l: 160px; --mt-image-promo-medium-height-l: 160px; --mt-image-promo-large-flex-basis: 288px; --mt-image-promo-large-height: 288px; --mt-image-promo-large-flex-basis-m: 348px; --mt-image-promo-large-height-m: 348px; --mt-image-promo-large-flex-basis-l: 400px; --mt-image-promo-large-height-l: 400px; /* Block container */ --mt-flex-direction: column-reverse; --mt-flex-media-right-direction: column; --mt-flex-direction-m: row; --mt-flex-direction-l: row; --mt-small-flex-direction: row; --mt-small-flex-direction-m: row; --mt-small-flex-direction-l: row; --mt-medium-flex-direction: row; --mt-medium-flex-direction-m: row; --mt-medium-flex-direction-l: row; --mt-large-flex-direction: column-reverse; --mt-large-media-right-flex-direction: column; --mt-large-flex-direction-m: row; --mt-large-flex-direction-l: row; --mt-margin: 0 0 32px; --mt-margin-m: 0 0 48px; --mt-margin-l: 0 0 64px; /* Text container */ --mt-text-justify-content: center; --mt-text-justify-content-m: center; --mt-text-justify-content-l: center; --mt-text-padding: 0 0 16px; --mt-text-padding-m: 0 24px 0 0; --mt-text-onright-padding: 0 16px 0 0; --mt-text-onright-padding-m: 0 24px 0 0; --mt-text-onright-padding-l: 0 24px 0 0; /* Image container */ --mt-image-flex-basis: 100%; --mt-image-flex-basis-m: 50%; --mt-image-small-flex-basis: 40px; --mt-image-small-height: 40px; --mt-image-small-flex-basis-m: 64px; --mt-image-small-height-m: 64px; --mt-image-small-flex-basis-l: 80px; --mt-image-small-height-l: 80px; --mt-image-medium-flex-basis: 80px; --mt-image-medium-height: 80px; --mt-image-medium-flex-basis-m: 128px; --mt-image-medium-height-m: 128px; --mt-image-medium-flex-basis-l: 160px; --mt-image-medium-height-l: 160px; --mt-image-large-flex-basis: 288px; --mt-image-large-height: 288px; --mt-image-large-flex-basis-m: 343px; --mt-image-large-height-m: 343px; --mt-image-large-flex-basis-l: 348px; --mt-image-large-height-l: 348px; /* Block container */ /* Text container */ /* Image container */ /* Block container */ /* Text container */ /* Image container */ /* Mortgage Deal */ /* Container */ /* Informer */ /* Body */ /* Label Container */ /* Label */ /* Stats */ /* Stat */ /* Stat Container */ /* Stat Value */ /* Stat Emphasised Value */ /* Stat Label */ /* Highlight background colour */ /* Mortgage Deal NEW */ /* Translation text*/ /* Altmort Container */ /* Altmort Switch row */ /* Container */ /* Label */ /* Control layout */ /* Body off */ /* Body on */ /* All Stats Container */ /* Altmort-highlights */ /* Highlight Container */ /* Highlight Stat */ /* Highlight Value */ /* Highlight Label */ /* Highlight Icon */ /* Altmort-datafacts */ /* Container */ /* Stat Row */ /* Datafact stat */ /* Datafact Value */ /* Datafact Label */ /* Altmort Contact*/ /* Container */ /* Contact btn */ /* Contact Label */ /* Contact Icon*/ /* Loading spinner icon */ --spinner: var(--meta-swatch-colour-1); /* Metabox */ /* Container */ --template-articles-metabox-display: flex; --template-articles-metabox-direction: row; --template-articles-metabox-align: center; --template-articles-metabox-justify: space-between; --template-articles-metabox-padding: 0; --template-articles-metabox-bg-colour: none; --template-articles-metabox-border: none; --template-articles-metabox-border-radius: var(--pattern-border-radius-m); --template-articles-metabox-box-shadow: none; /* Text */ --template-articles-metabox-colour: var(--meta-swatch-mono-2); --template-articles-metabox-font-family: var(--typo-p-small-font-face); --template-articles-metabox-font-size: var(--typo-p-small-font-size); --template-articles-metabox-font-weight: var(--typo-p-small-font-weight); --template-articles-metabox-font-style: var(--typo-p-small-font-style); --template-articles-metabox-line-height: var(--typo-p-small-line-height); --template-articles-metabox-letter-spacing: var(--typo-p-small-letter-spacing); --template-articles-metabox-text-transform: var(--typo-p-small-text-transform); /* Back icon */ --template-articles-metabox-back-display: flex; --template-articles-metabox-back-icon-colour: var(--meta-swatch-mono-2); --template-articles-metabox-back-icon-size: var(--layout-icon-size); /* Layout */ --template-articles-metabox-list-display: flex; --template-articles-metabox-list-direction: row; --template-articles-metabox-list-margin: 0; --template-articles-metabox-list-padding: 0; /* Item */ --template-articles-metabox-item-margin: 0 0 0 24px; --template-articles-metabox-item-padding: 0; --template-articles-metabox-item-border: 0; --template-articles-metabox-item-border-colour: none; /* Modal Dialog */ --swatch-general-dimmer: rgba(var(--meta-swatch-dark-3)); --effect-overlay-border-radius: 16px; /* Block Container */ --modal-content-bg: var(--meta-swatch-mono-5); --modal-dimmer-color: rgba(var(--meta-swatch-dark-3)); --modal-border-radius: 16px; --modal-width-m: 720px; --modal-width-l: 1024px; --modal-box-shadow: var(--pattern-button-box-shadow); /* Modal body */ --modal-body-padding: 16px; --modal-body-padding-m: 16px; --modal-body-padding-l: 16px; /* Header Container */ --modal-header-background-color: transparent; --modal-header-keyline-bottom: none; /* Left Icon */ /* Close Icon */ --modal-header-icon-bg-border: none; --modal-header-icon-bg-border-radius: 0; --modal-header-icon-bg-padding: 12px 0; --modal-header-icon-bg-margin: 0; --modal-header-icon-bg-color: transparent; --modal-header-icon-color: var(--meta-swatch-mono-2); --modal-header-icon-height: 24px; --modal-header-icon-width: 24px; /* Heading */ --modal-header-heading-colour: var(--typo-h-small-colour); --modal-header-heading-font-family: var(--typo-h-small-font-face); --modal-header-heading-font-size: var(--typo-h-small-font-size); --modal-header-heading-font-weight: var(--typo-h-small-font-weight); --modal-header-heading-font-style: var(--typo-h-small-font-style); --modal-header-heading-line-height: var(--typo-h-small-line-height); --modal-header-heading-letter-spacing: var(--typo-h-small-letter-spacing); --modal-header-heading-text-transform: var(--typo-h-small-text-transform); --modal-header-heading-text-align: left; /* Sub heading */ --modal-header-sub-heading-colour: var(--typo-p-small-colour); --modal-header-sub-heading-font-family: var(--typo-p-small-font-face); --modal-header-sub-heading-font-size: var(--typo-p-small-font-size); --modal-header-sub-heading-font-weight: var(--typo-p-small-font-weight); --modal-header-sub-heading-font-style: var(--typo-p-small-font-style); --modal-header-sub-heading-line-height: var(--typo-p-small-line-height); --modal-header-sub-heading-letter-spacing: var(--typo-p-small-letter-spacing); --modal-header-sub-heading-text-transform: var(--typo-p-small-text-transform); --modal-header-sub-heading-text-align: left; /* Spacing */ --modal-header-spacer-top: 16px; --modal-header-spacer-below-heading: 0; --modal-header-spacer-bottom: 0; --modal-header-padding: 16px 16px 0; --modal-header-padding-m: 16px 16px 0; --modal-header-padding-l: 16px 16px 0; /* Modal footer */ --modal-footer-background: var(--meta-swatch-mono-5); --modal-footer-margin: 16px 0; --modal-footer-text-colour: var(--meta-swatch-colour-1); --modal-footer-text-font-family: var(--typo-p-small-font-face); --modal-footer-text-font-size: 14px; --modal-footer-text-font-weight: var(--typo-p-small-font-weight); --modal-footer-text-font-style: none; --modal-footer-text-text-align: left; --modal-footer-text-padding: 16px 0; /* Cookies modal overrides */ /* Page Header */ /* Container */ --theme-page-header-bg-colour: var(--meta-swatch-mono-4); --page-header-body-max-width: 500px; /* Keylines */ --theme-page-header-keyline: none; /* Icon */ --theme-page-header-icon-colour: var(--meta-swatch-mono-2); /* Content inner container */ /* Back Icon */ /* Identifier container */ --page-header-category-margin: 0 0 16px 16px; --page-header-category-margin-m: 0 0 24px 24px; --page-header-category-margin-l: 0 0 24px 0; --page-header-category-padding: 6px 16px; --page-header-category-background: var(--meta-swatch-mono-10); --page-header-category-border: none; --page-header-category-border-radius: 40px; /* Identifier label */ --page-header-category-label-colour: var(--meta-swatch-colour-12); --page-header-category-label-font-family: var(--typo-h-small-font-face); --page-header-category-label-font-size: var(--typo-h-small-font-size); --page-header-category-label-font-size-m: var(--typo-h-small-font-size); --page-header-category-label-font-size-l: var(--typo-h-small-font-size); --page-header-category-label-font-weight: var(--typo-h-small-font-weight); --page-header-category-label-font-style: var(--typo-h-small-font-style); --page-header-category-label-line-height: var(--typo-h-small-line-height); --page-header-category-label-letter-spacing: var(--typo-h-small-letter-spacing); --page-header-category-label-text-transform: var(--typo-h-small-text-transform); --page-header-category-label-text-align: center; /* Heading */ --theme-page-header-heading-colour: var(--meta-swatch-mono-1); --page-header-heading-face: var(--typo-h-xlarge-font-face); --page-header-heading-size: 32px; --page-header-heading-size-m: var(--typo-h-2xl-font-size); --page-header-heading-size-l: var(--typo-h-2xl-font-size); --page-header-heading-weight: var(--typo-h-xlarge-font-weight); --page-header-heading-font-style: var(--typo-h-xlarge-font-style); --page-header-heading-line-height: var(--typo-h-xlarge-line-height); --page-header-heading-letter-spacing: var(--typo-h-xlarge-letter-spacing); --page-header-heading-text-transform: var(--typo-h-xlarge-text-transform); --page-header-heading-text-align: var(--typo-h-xlarge-text-align); /* Identifier variants */ /* Option 1 */ /* Option 2 */ /* Option 3 */ /* Option 4 */ /* Option 5 */ /* Sub heading */ --theme-page-header-sub-heading-colour: var(--meta-swatch-mono-2); --page-header-sub-heading-face: var(--typo-p-large-font-face); --page-header-sub-heading-size: var(--typo-p-large-font-size); --page-header-sub-heading-size-m: var(--typo-p-large-font-size); --page-header-sub-heading-size-l: var(--typo-p-large-font-size); --page-header-sub-heading-weight: var(--typo-p-large-font-weight); --page-header-sub-heading-font-style: var(--typo-p-large-font-style); --page-header-sub-heading-line-height: var(--typo-p-large-line-height); --page-header-sub-heading-letter-spacing: var(--typo-p-large-letter-spacing); --page-header-sub-heading-text-transform: var(--typo-p-large-text-transform); --page-header-sub-heading-text-align: var(--typo-p-large-text-align); /* Spacing */ --page-header-spacer-top: 32px; --page-header-spacer-below-heading: 12px; --page-header-spacer-bottom: 32px; --page-header-spacer-top-m: 64px; --page-header-spacer-below-heading-m: 16px; --page-header-spacer-bottom-m: 64px; --page-header-spacer-top-l: 64px; --page-header-spacer-below-heading-l: 16px; --page-header-spacer-bottom-l: 64px; /* Content Grid Layout */ /* Block type: Image */ --page-header-vm-bf-background: linear-gradient(143.19deg, #34C264 0%, #3425FE 155.73%); --page-header-vm-bf-words-padding: 24px 16px; --page-header-vm-bf-words-padding-m: 48px 24px; --page-header-vm-bf-words-padding-l: 64px; /* Progress Indicator */ --app-progress-bar-height: 40px; /* Wrapper - to set the bg color*/ --progress-indicator-wrapper-background: var(--meta-swatch-mono-4); --progress-indicator-container-padding: 24px 0; --progress-indicator-container-padding-m: 48px 0; --progress-indicator-container-padding-l: 48px 0; /* Items parent container */ /* Items */ --progress-indicator-container-border-radius: 10px; --progress-indicator-container-border-radius-m: 10px; --progress-indicator-container-border-radius-l: 10px; --progress-indicator-container-justify-content: space-between; --progress-indicator-container-max-width: 100%; --progress-indicator-container-margin: 16px 0; --progress-indicator-container-gap: -4px; --progress-indicator-container-gap-m: -4px; --progress-indicator-container-gap-l: -4px; /* Keyline*/ --progress-indicator-keyline-background: var(--meta-swatch-mono-5); /* Item layout */ --progress-indicator-height: 8px; --progress-indicator-width: 100%; --progress-indicator-max-width: 100%; --progress-indicator-border-radius: 16px; --progress-indicator-margin: 0 4px; /* Text description */ /* Icon */ /* Item states */ /* Before */ --progress-indicator-background-before: var(--meta-swatch-colour-1); --progress-indicator-border-before: none; /* Current */ --progress-indicator-background-current: var(--meta-swatch-colour-1); --progress-indicator-border-current: none; --progress-indicator-border-radius-current: 0 5px 5px 0; /* After */ --progress-indicator-background-after: var(--meta-swatch-mono-3); --progress-indicator-border-after: none; /* Label */ --progress-indicator-label-colour: var(--meta-swatch-mono-2); --progress-indicator-label-font-family: var(--typo-data-label-l-font-face); --progress-indicator-label-font-size: var(--typo-data-label-m-font-size); --progress-indicator-label-font-size-m: var(--typo-data-label-l-font-size); --progress-indicator-label-font-size-l: var(--typo-data-label-l-font-face); --progress-indicator-label-font-weight: var(--typo-data-label-l-font-weight); --progress-indicator-label-font-style: var(--typo-data-label-l-font-style); --progress-indicator-label-line-height: var(--typo-data-label-l-line-height); --progress-indicator-label-letter-spacing: var(--typo-data-label-l-letter-spacing); --progress-indicator-label-text-transform: var(--typo-data-label-l-text-transform); --progress-indicator-label-text-align: var(--typo-data-label-l-text-align); /* Progress Loader Bar */ /* Container */ /* Filler */ /* Animation */ /* Share menu */ /* Container */ --share-heading-colour: var(--meta-swatch-mono-1); --share-heading-font-family: 'rubik'; --share-heading-font-size: 24px; --share-heading-font-weight: 500; --share-heading-font-style: normal; --share-heading-line-height: 1.2; --share-heading-letter-spacing: 0; --share-heading-text-transform: none; --share-heading-text-align: left; /* Button container */ --share-network-button-icon-size: 24px; --share-btn-group-columns: 2; --share-btn-group-gutter: 16px; /* Button background */ --share-network-button-flex-direction: row; --share-network-button-padding: 8px; --share-network-button-background-color: var(--meta-swatch-mono-9); --share-network-button-border: none; --share-network-button-border-radius: 12px; --share-network-button-box-shadow: none; --share-network-button-width: 100%; /* Button label */ --share-network-button-label-colour: var(--meta-swatch-mono-1); --share-network-button-label-font-family: 'rubik'; --share-network-button-label-font-size: 14px; --share-network-button-label-font-weight: bold; --share-network-button-label-font-style: normal; --share-network-button-label-line-height: 1.2; --share-network-button-label-letter-spacing: 0; --share-network-button-label-text-transform: none; --share-network-button-justify-content: center; --share-network-button-label-margin: 6 8px 0 0; /* URL container */ --share-url-flex-direction: row; --share-url-background-colour: var(--meta-swatch-mono-3); --share-url-border: none; --share-url-border-radius: 0; --share-url-box-shadow: none; --share-url-padding: 16px 8px; /* URL text */ --share-url-text-colour: var(--meta-swatch-mono-1); --share-url-text-font-family: 'rubik'; --share-url-text-font-size: 14px; --share-url-text-font-weight: normal; --share-url-text-font-style: normal; --share-url-text-line-height: 1.2; --share-url-text-letter-spacing: 0; --share-url-text-text-transform: none; --share-url-text-text-align: left; /* URL button OFF */ --share-url-button-off-margin: 0; --share-url-button-off-padding: 8px; --share-url-button-off-background-color: transparent; --share-url-button-off-border: 8 px var(--meta-swatch-colour-1); --share-url-button-off-border-radius: 12px; --share-url-button-off-box-shadow: none; --share-url-button-off-width: auto; --share-url-button-off-label-colour: var(--meta-swatch-mono-3); --share-url-button-off-label-font-family: 'rubik'; --share-url-button-off-label-font-size: 14px; --share-url-button-off-label-font-weight: bold; --share-url-button-off-label-font-style: normal; --share-url-button-off-label-line-height: 1.2; --share-url-button-off-label-letter-spacing: 0; --share-url-button-off-label-text-transform: none; /* URL button ON */ --share-url-button-on-margin: 0; --share-url-button-on-padding: 8px; --share-url-button-on-background-color: var(--meta-swatch-colour-1); --share-url-button-on-border: none; --share-url-button-on-border-radius: 12px; --share-url-button-on-box-shadow: none; --share-url-button-on-width: auto; --share-url-button-on-label-colour: var(--meta-swatch-mono-5); --share-url-button-on-label-font-family: 'rubik'; --share-url-button-on-label-font-size: 14px; --share-url-button-on-label-font-weight: bold; --share-url-button-on-label-font-style: normal; --share-url-button-on-label-line-height: 1.2; --share-url-button-on-label-letter-spacing: 0; --share-url-button-on-label-text-transform: none; /* Smart banner */ /* Container */ /* Icon */ /* Image */ /* Text container */ /* Button */ /* iOS */ /* Android */ /* Split */ /* Block Container */ --split-container-width: 100%; --split-container-max-width: 100%; --split-container-background: var(--meta-swatch-mono-10); /* Both Article Containers */ --split-article-container-alignment: flex-end; /* Grid Container */ /* Text Container */ /* Image Container */ /* Container 1 */ /* Container 2 */ /* Image */ /* Split heading */ /* Split emphasis */ /* Split buttons */ /* Split List */ /* Text - Headings */ /* Container */ --page-template-heading-container-bg-colour: transparent; --page-template-heading-container-padding: 0 0 12px; --page-template-heading-container-padding-m: 0 0 16px; --page-template-heading-container-padding-l: 0 0 24px; --page-template-heading-container-border: none; --page-template-heading-container-border-radius: 0px; --page-template-heading-container-box-shadow: none; /* Heading */ --page-template-heading-colour: var(--typo-h-medium-colour); --page-template-heading-font-family: var(--typo-h-medium-font-face); --page-template-heading-font-face: var(--page-template-heading-font-family); --page-template-heading-font-size: var(--typo-h-medium-font-size); --page-template-heading-font-size-m: var(--typo-h-medium-font-size); --page-template-heading-font-size-l: var(--typo-h-medium-font-size); --page-template-heading-font-weight: var(--typo-h-medium-font-weight); --page-template-heading-font-style: var(--typo-h-medium-font-style); --page-template-heading-line-height: var(--typo-h-medium-line-height); --page-template-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --page-template-heading-text-transform: var(--typo-h-medium-text-transform); --page-template-heading-text-align: var(--typo-h-medium-text-align); --page-template-heading-margin: 0 0 24px; --page-template-par-heading-colour: var(--meta-swatch-mono-1); --page-template-par-heading-font-family: 'rubik'; --page-template-par-heading-font-face: 'rubik'; --page-template-par-heading-font-size: var(--typo-p-medium-font-size); --page-template-par-heading-font-weight: var(--typo-p-medium-font-weight); --page-template-par-heading-font-style: var(--typo-p-medium-font-style); --page-template-par-heading-line-height: var(--typo-p-medium-line-height); --page-template-par-heading-letter-spacing: var(--typo-p-medium-letter-spacing); --page-template-par-heading-text-transform: var(--typo-p-medium-text-transform); --page-template-par-heading-text-align: var(--typo-p-medium-text-align); --page-template-par-heading-margin: 0 0 16px; /*

*/ --typo-h1-colour: var(--meta-swatch-mono-1); --typo-h1-font-face: 'rubik'; --typo-h1-font-size: 32px; --typo-h1-font-weight: 500; --typo-h1-font-style: normal; --typo-h1-line-height: 1.2; --typo-h1-letter-spacing: var(--pattern-letter-spacing-display); --typo-h1-text-transform: none; --typo-h1-text-align: left; --typo-h1-margin: 1.5rem 0 0.7rem; /*

*/ --typo-h2-colour: var(--meta-swatch-mono-1); --typo-h2-font-face: 'rubik'; --typo-h2-font-size: 24px; --typo-h2-font-weight: 500; --typo-h2-font-style: normal; --typo-h2-line-height: 1.2; --typo-h2-letter-spacing: var(--pattern-letter-spacing-display); --typo-h2-text-transform: none; --typo-h2-text-align: left; --typo-h2-margin: 1.5rem 0 1rem; /*

*/ --typo-h3-colour: var(--meta-swatch-mono-1); --typo-h3-font-face: 'rubik'; --typo-h3-font-size: 20px; --typo-h3-font-weight: 500; --typo-h3-font-style: normal; --typo-h3-line-height: 1.2; --typo-h3-letter-spacing: var(--pattern-letter-spacing-display); --typo-h3-text-transform: none; --typo-h3-text-align: left; --typo-h3-margin: 1.5rem 0 0.7rem; /*

*/ --typo-h4-colour: var(--meta-swatch-mono-1); --typo-h4-font-face: 'rubik'; --typo-h4-font-size: 16px; --typo-h4-font-weight: 500; --typo-h4-font-style: normal; --typo-h4-line-height: 1.2; --typo-h4-letter-spacing: var(--pattern-letter-spacing-display); --typo-h4-text-transform: none; --typo-h4-text-align: left; --typo-h4-margin: 1.5rem 0 0.7rem; /*

*/ --typo-h5-colour: var(--meta-swatch-mono-1); --typo-h5-font-face: 'rubik'; --typo-h5-font-size: 16px; --typo-h5-font-weight: 500; --typo-h5-font-style: normal; --typo-h5-line-height: 1.2; --typo-h5-letter-spacing: var(--pattern-letter-spacing-display); --typo-h5-text-transform: none; --typo-h5-text-align: left; --typo-h5-margin: 1.5rem 0 0.7rem; /*
*/ --typo-h6-colour: var(--meta-swatch-mono-1); --typo-h6-font-face: 'rubik'; --typo-h6-font-size: 16px; --typo-h6-font-weight: 500; --typo-h6-font-style: normal; --typo-h6-line-height: 1.2; --typo-h6-letter-spacing: var(--pattern-letter-spacing-display); --typo-h6-text-transform: none; --typo-h6-text-align: left; --typo-h6-margin: 1.5rem 0 0.7rem; /* Text - Links */ /* */ --typo-a-link-border-radius: 0; --typo-a-link-bg-colour: transparent; --typo-a-link-colour: var(--meta-swatch-colour-12); --typo-a-link-font-weight: inherit; --typo-a-link-font-style: inherit; --typo-a-link-letter-spacing: inherit; --typo-a-link-text-decoration: underline; --typo-a-link-text-transform: inherit; --typo-a-link-padding-bottom: none; --typo-a-link-border-bottom: none; --typo-a-link-position-top: 0; /* :hover */ --typo-a-hover-border-radius: 0; --typo-a-hover-bg-colour: transparent; --typo-a-hover-colour: var(--meta-swatch-colour-12); --typo-a-hover-font-weight: inherit; --typo-a-hover-font-style: inherit; --typo-a-hover-letter-spacing: inherit; --typo-a-hover-text-decoration: inherit; --typo-a-hover-text-transform: inherit; --typo-a-hover-padding-bottom: inherit; --typo-a-hover-border-bottom: inherit; --typo-a-hover-position-top: 0; /* :active */ --typo-a-active-border-radius: 0; --typo-a-active-bg-colour: transparent; --typo-a-active-colour: var(--meta-swatch-colour-12); --typo-a-active-font-weight: inherit; --typo-a-active-font-style: inherit; --typo-a-active-letter-spacing: inherit; --typo-a-active-text-decoration: inherit; --typo-a-active-text-transform: inherit; --typo-a-active-padding-bottom: inherit; --typo-a-active-border-bottom: inherit; --typo-a-active-position-top: 0; /* :visited */ --typo-a-visited-border-radius: 0; --typo-a-visited-bg-colour: transparent; --typo-a-visited-colour: var(--meta-swatch-colour-12); --typo-a-visited-font-weight: inherit; --typo-a-visited-font-style: inherit; --typo-a-visited-letter-spacing: inherit; --typo-a-visited-text-decoration: inherit; --typo-a-visited-text-transform: inherit; --typo-a-visited-padding-bottom: inherit; --typo-a-visited-border-bottom: none; --typo-a-visited-position-top: 0; /* Text - Lists */ /*
    */ --typo-ul-colour: var(--meta-swatch-mono-1); --typo-ul-font-face: 'rubik'; --typo-ul-font-size: inherit; --typo-ul-font-weight: inherit; --typo-ul-font-style: normal; --typo-ul-line-height: 1.5; --typo-ul-letter-spacing: inherit; --typo-ul-text-transform: none; --typo-ul-text-align: left; --typo-ul-margin: 0; --typo-ul-padding: 0 0 0 1.4rem; --typo-ul-style-type: disc; --typo-ul-style-position: outside; --typo-ul-list-style-image: none; --typo-ul-list-item-margin: 0 0 0.7rem 0; --typo-ul-list-item-padding: 0 8px 0 0; /*
      */ --typo-ol-colour: inherit; --typo-ol-font-face: 'rubik'; --typo-ol-font-size: inherit; --typo-ol-font-weight: inherit; --typo-ol-font-style: normal; --typo-ol-line-height: 1.5; --typo-ol-letter-spacing: inherit; --typo-ol-text-transform: none; --typo-ol-text-align: left; --typo-ol-margin: 0; --typo-ol-padding: 0 0 0 1.4rem; --typo-ol-style-type: lower-alpha; --typo-ol-style-position: outside; --typo-ol-list-style-image: none; --typo-ol-list-item-margin: 0 0 0.7rem 0; --typo-ol-list-item-padding: 0; /* Text - Paragraphs */ /*

      & */ --font-family: 'rubik'; --typo-p-colour: var(--typo-p-medium-colour); --typo-p-font-face: var(--typo-p-medium-font-face); --typo-p-font-size: var(--typo-p-medium-font-size); --typo-p-font-size-m: var(--typo-p-medium-font-size); --typo-p-font-size-l: var(--typo-p-medium-font-size); --typo-p-font-weight: var(--typo-p-medium-font-weight); --typo-p-font-style: var(--typo-p-medium-font-style); --typo-p-line-height: var(--typo-p-medium-line-height); --typo-p-letter-spacing: var(--typo-p-medium-letter-spacing); --typo-p-text-transform: var(--typo-p-medium-text-transform); --typo-p-text-align: var(--typo-p-medium-text-align); --typo-p-margin: 0 0 16px 0; /* Trust card */ /* Content container */ /* Header container */ /* Body container */ /* Header image */ /* Partner container */ /* Header paragraph */ /* Header heading */ /* Item */ /* Item header */ /* Item icon*/ /* Item heading */ /* Item body */ /* Toast */ /* Container */ --toast-position-s: top; --toast-position-ml: right top; --toast-height: 64px; --toast-width: 100%; --toast-bg-colour: var(--meta-swatch-mono-10); --toast-border: 1px solid var(--meta-swatch-colour-1); --toast-border-radius: 24px; --toast-margin: 16px; --toast-padding: 8px; /* Comms icon */ --toast-comms-icon-display: none; --toast-comms-icon-colour: var(--meta-swatch-mono-4); --toast-comms-icon-size: 24px; --toast-comms-icon-margin: none; --toast-comms-icon-position: flex-start; /* Dismiss icon */ --toast-dismiss-icon-display: flex; --toast-dismiss-icon-colour: var(--meta-swatch-mono-4); --toast-dismiss-icon-size: 24px; --toast-dismiss-icon-margin: none; --toast-dismiss-icon-position: flex-end; /* Message text */ --toast-message-colour: var(--meta-swatch-mono-1); --toast-message-font-family: 'rubik'; --toast-message-font-size: 16px; --toast-message-font-weight: normal; --toast-message-font-style: normal; --toast-message-line-height: 1.2; --toast-message-letter-spacing: 0; --toast-message-text-transform: none; --toast-message-text-align: left; /* Video embed */ --wp-block-embed-margin: 0 0 24px 0; /* Video overlay */ /* Block container */ --video-dimmer-background: rgba(0, 0, 0, 0.8); --video-flex-direction: column; --video-flex-direction-m: row; --video-flex-direction-l: row; /* Video container */ --video-container-padding: 16px; --video-container-padding-m: 48px 0 48px 88px; --video-container-padding-l: 48px 0 48px 88px; /* Close container */ --video-close-padding: 0 0 16px; --video-close-padding-m: 40px 16px; --video-close-padding-l: 40px 16px; --video-close-justify-content: center; --video-close-justify-content-m: flex-end; --video-close-justify-content-l: flex-end; --video-close-align-items: center; --video-close-align-items-m: start; --video-close-align-items-l: start; /* Close icon */ --video-close-icon-bg-padding: 16px; --video-close-icon-bg-background: var(--meta-swatch-mono-5); --video-close-icon-bg-border: 1.5px solid var(--meta-swatch-colour-1); --video-close-icon-bg-border-radius: 50%; --video-close-icon-bg-box-shadow: var(--pattern-button-box-shadow); --video-close-icon-size: var(--pattern-icon-size); --video-close-icon-color: var(--meta-swatch-colour-1); /* Forms */ /* Button */ /* All types - Main container */ --btn-align: center; --btn-width: 100%; --btn-max-width: 100%; --btn-max-width-m: 360px; --btn-max-width-l: 360px; --btn-height: 56px; --btn-margin: 0; --btn-padding: 4px 8px; --btn-border-radius: 10px; --btn-border: 1.5px solid var(--meta-swatch-colour-1); --btn-effect-disabled: var(--pattern-disabled-opacity); /* All types - Companion */ --btn-companion-height: var(--btn-height); --btn-companion-width: var(--btn-height); --btn-companion-margin: 0 0 0 8px; /* All types - Icon container */ --btn-icon-display: none; --btn-icon-border-radius: var(--pattern-border-radius-m); --btn-icon-width: var(--btn-companion-width); --btn-icon-height: var(--btn-companion-height); --btn-icon-margin: 0; /* All types - SVG */ --btn-svg-size: var(--pattern-icon-size); /* All types - label */ --btn-label-padding: 0 8px 0 0; --btn-label-text-transform: none; --btn-label-face: 'rubik'; --btn-label-font-size: 16px; --btn-label-font-size-m: 18px; --btn-label-font-size-l: 18px; --btn-label-font-weight: 500; --btn-label-letter-spacing: var(--pattern-letter-spacing-body); --btn-label-text-align: center; /* Major */ --btn-major-background: var(--meta-swatch-mono-5); --btn-major-border: 2px solid var(--meta-swatch-colour-1); --btn-major-box-shadow: var(--pattern-button-box-shadow); --btn-major-icon-display: none; --btn-major-icon-color: transparent; --btn-major-icon-bg-color: transparent; --btn-major-icon-border: none; --btn-major-label-color: var(--meta-swatch-mono-1); --btn-major-label-font-weight: 500; /* Minor */ --btn-minor-background: var(--meta-swatch-mono-5); --btn-minor-border: none; --btn-minor-box-shadow: var(--pattern-elevation-low); --btn-minor-icon-display: none; --btn-minor-icon-color: transparent; --btn-minor-icon-bg-color: transparent; --btn-minor-icon-border: none; --btn-minor-label-color: var(--meta-swatch-mono-1); --btn-minor-label-font-weight: var(--btn-label-font-weight); /* Diminished */ --btn-diminished-background: transparent; --btn-diminished-border: none; --btn-diminished-box-shadow: none; --btn-diminished-icon-display: flex; --btn-diminished-icon-color: var(--meta-swatch-colour-12); --btn-diminished-icon-bg-color: transparent; --btn-diminished-icon-border: none; --btn-diminished-label-color: var(--meta-swatch-colour-12); --btn-diminished-label-font-weight: 500; /* Negative */ --btn-negative-background: var(--meta-swatch-mono-10); --btn-negative-border: 1.5px solid var(--meta-swatch-mono-7); --btn-negative-box-shadow: var(--pattern-elevation-low); --btn-negative-icon-display: none; --btn-negative-icon-color: transparent; --btn-negative-icon-bg-color: transparent; --btn-negative-icon-border: none; --btn-negative-label-color: var(--meta-swatch-mono-3); --btn-negative-label-font-weight: var(--btn-label-font-weight); /* Destructive */ --btn-destructive-background: var(--meta-swatch-mono-5); --btn-destructive-border: 1.5px solid var(--meta-swatch-mono-3); --btn-destructive-box-shadow: var(--pattern-elevation-low); --btn-destructive-icon-display: none; --btn-destructive-icon-color: transparent; --btn-destructive-icon-bg-color: transparent; --btn-destructive-icon-border: none; --btn-destructive-label-color: var(--meta-swatch-mono-1); --btn-destructive-label-font-weight: var(--btn-label-font-weight); /* Special */ --btn-special-background: var(--meta-swatch-mono-10); --btn-special-border: 1.5px solid var(--meta-swatch-mono-7); --btn-special-box-shadow: var(--pattern-elevation-low); --btn-special-icon-display: none; --btn-special-icon-color: transparent; --btn-special-icon-bg-color: transparent; --btn-special-icon-border: none; --btn-special-label-color: var(--meta-swatch-mono-3); --btn-special-label-font-weight: var(--btn-label-font-weight); /* Temporary link styles */ /* Checkbox */ /* Outer container */ /* Container */ --input-checkbox-container-padding: 8px 0; --input-checkbox-container-direction: row-reverse; --input-checkbox-container-align-items: center; --input-checkbox-container-justify-content: space-between; --input-checkbox-container-border-width: 0; --input-checkbox-container-border-style: none; --input-checkbox-container-border-color: transparent; /* Label & info icon container */ --input-checkbox-label-direction: row-reverse; --input-checkbox-label-justify-content: space-between; --input-checkbox-label-align-items: center; /* Image */ --input-checkbox-image-size: 56px; --input-checkbox-image-size-m: 56px; --input-checkbox-image-size-l: 56px; --input-checkbox-image-border-radius: 8px; --input-checkbox-image-margin: 0 12px 0 0; --input-checkbox-image-margin-m: 0 12px 0 0; --input-checkbox-image-margin-l: 0 12px 0 0; /* Labels container */ /* Label */ --input-checkbox-label-colour: var(--typo-p-medium-colour); --input-checkbox-label-font-family: var(--typo-p-medium-font-face); --input-checkbox-label-font-size: var(--typo-p-medium-font-size); --input-checkbox-label-font-weight: var(--typo-p-medium-font-weight); --input-checkbox-label-font-style: var(--typo-p-medium-font-style); --input-checkbox-label-line-height: var(--typo-p-medium-line-height); --input-checkbox-label-letter-spacing: var(--typo-p-medium-letter-spacing); --input-checkbox-label-text-transform: var(--typo-p-medium-text-transform); --input-checkbox-label-text-align: left; --input-checkbox-label-margin: 0 0 0 16px; /*Sub label*/ /* Label opt 2 */ /* Option explainer */ /* Info icon */ --input-checkbox-informer-margin: 0 0 0 8px; /* Field */ --input-checkbox-off-background-colour: var(--meta-swatch-mono-5); --input-checkbox-off-border: 1px solid var(--meta-swatch-mono-3); --input-checkbox-off-background-size: 32px; --input-checkbox-off-icon-colour: transparent; --input-checkbox-off-border-radius: 6px; --input-checkbox-off-box-shadow: var(--pattern-button-box-shadow); --input-checkbox-on-background-colour: var(--meta-swatch-colour-1); --input-checkbox-on-border: none; --input-checkbox-on-background-size: 32px; --input-checkbox-on-icon-colour: var(--meta-swatch-mono-5); --input-checkbox-on-icon-size: 18px; --input-checkbox-on-border-radius: 6px; --swatch-forms-checkbox-bg-on: var(--meta-swatch-colour-1); --swatch-forms-checkbox-border-on: 1px solid var(--meta-swatch-colour-1); --swatch-forms-checkbox-icon-on: var(--meta-swatch-mono-5); --swatch-forms-checkbox-bg-off: transparent; --swatch-forms-checkbox-border-off: 1px solid var(--meta-swatch-mono-2); --swatch-forms-checkbox-icon-off: var(--meta-swatch-mono-2); --effect-forms-checkbox-border-radius: 50%; /* Error message */ /* Container */ --forms-error-padding: 8px 0 0 0; --forms-error-background-color: transparent; /* Label */ --forms-error-label-colour: var(--meta-swatch-colour-1); --forms-error-label-font-family: var(--typo-form-label-font-face); --forms-error-label-font-size: 16px; --forms-error-label-font-weight: var(--typo-form-label-font-weight); --forms-error-label-font-style: var(--typo-form-label-font-style); --forms-error-label-line-height: var(--typo-form-label-line-height); --forms-error-label-letter-spacing: var(--typo-form-label-letter-spacing); --forms-error-label-text-transform: var(--typo-form-label-text-transform); --forms-error-label-text-align: var(--typo-form-label-text-align); /* Icon */ --forms-error-icon-display: none; --forms-error-icon-size: var(--pattern-icon-size); --forms-error-icon-colour: var(--meta-swatch-colour-1); --forms-error-icon-margin: 0 4px 0 0; /* Explainer message */ /* Container */ /* Label */ --forms-explainer-label-colour: var(--typo-p-small-colour); --forms-explainer-label-font-family: var(--typo-p-small-font-face); --forms-explainer-label-font-size: 14px; --forms-explainer-label-font-size-m: 14px; --forms-explainer-label-font-size-l: 14px; --forms-explainer-label-font-weight: var(--typo-p-small-font-weight); --forms-explainer-label-font-style: var(--typo-p-small-font-style); --forms-explainer-label-letter-spacing: var(--typo-p-small-letter-spacing); --forms-explainer-label-line-height: var(--typo-p-small-line-height); --forms-explainer-label-text-transform: var(--typo-p-small-text-transform); --forms-explainer-label-text-align: left; /* Container */ --input-explainer-margin: 0 8px 0 0; --input-explainer-padding: 0; --input-explainer-background-color: transparent; --input-explainer-label-colour: var(--typo-p-small-colour); --input-explainer-label-font-family: var(--typo-p-small-font-face); --input-explainer-label-font-size: var(--typo-p-small-font-size); --input-explainer-label-font-weight: var(--typo-p-small-font-weight); --input-explainer-label-font-style: var(--typo-p-small-font-style); --input-explainer-label-letter-spacing: var(--typo-p-small-letter-spacing); --input-explainer-label-line-height: var(--typo-p-small-line-height); --input-explainer-label-text-transform: var(--typo-p-small-text-transform); --input-explainer-label-text-align: left; /* Informer */ /* Block container */ /* Icon */ /* Content / Paragraph */ /* Content / List items */ /* Button */ /* Block container */ /* Icon */ /* Content / Paragraph */ /* Content / List items */ /* Button */ /* Input Group & Labels */ /* Form container */ /* Input group */ --input-group-max-width: 100%; --input-group-spacer: 12px; --input-container-direction: column; --input-container-align-items: normal; --input-container-justify-content: normal; --input-container-padding: 0; --input-container-border-width: 0; --input-container-border-style: none; --input-container-border-color: transparent; --input-label-margin: 0 0 8px 0; --input-label-direction: row; --input-label-justify-content: flex-start; --input-label-align-items: center; --input-informer-margin: 0 8px 0 0; --input-informer-padding: 0; --input-informer-border: none; --input-informer-border-radius: none; --input-informer-background-color: transparent; --input-informer-box-shadow: none; --input-informer-icon-size: 24px; --input-informer-icon-colour: var(--meta-swatch-colour-4); --input-explainer-label-margin: 8px 0 0 0; --input-label-block-margin: 0 0 4px 0; --input-label-block-direction: row; --input-label-block-justify-content: flex-start; --input-label-block-align-items: center; --input-label-inline-margin: 0 4px 0 0; --input-label-inline-direction: row; --input-label-inline-justify-content: flex-start; --input-label-inline-align-items: center; --input-informer-block-margin: 0 4px 0 0; --input-informer-inline-margin: 0 4px 0 0; /* Input menu */ /* Container */ --forms-input-menu-margin: 0; --forms-input-menu-padding: 0; --forms-input-menu-border-width: 0; --forms-input-menu-background-color: var(--meta-swatch-mono-9); --forms-input-menu-border-radius: 0 8px 8px 0; --forms-input-menu-box-shadow: none; /* Item */ --forms-input-menu-item-padding: 8px; --forms-input-menu-item-keyline: 1px solid var(--meta-swatch-mono-8); --forms-input-menu-item-label-colour: var(--typo-form-label-colour); --forms-input-menu-item-label-font-family: var(--typo-form-label-font-face); --forms-input-menu-item-label-font-size: var(--typo-form-label-font-size); --forms-input-menu-item-label-font-weight: var(--typo-form-label-font-weight); --forms-input-menu-item-label-font-style: var(--typo-form-label-font-style); --forms-input-menu-item-label-line-height: var(--typo-form-label-line-height); --forms-input-menu-item-label-letter-spacing: var(--typo-form-label-letter-spacing); --forms-input-menu-item-label-text-transform: var(--typo-form-label-text-transform); --forms-input-menu-item-label-text-align: var(--typo-form-label-text-align); /* Popover */ /* Option container */ --popover-padding: 0; --popover-bg-colour: var(--meta-swatch-mono-9); --popover-border: none; --popover-border-radius: 12px; --popover-box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.24); /* Option */ --popover-option-min-height: 40px; --popover-option-padding: 8px; --popover-option-margin: 0; --popover-option-keyline: 1px solid var(--meta-swatch-mono-8); /* Option label */ --popover-option-label-colour: var(--typo-p-medium-colour); --popover-option-label-font-face: var(--typo-p-medium-font-face); --popover-option-label-font-size: var(--typo-p-medium-font-size); --popover-option-label-font-weight: var(--typo-p-medium-font-weight); --popover-option-label-font-style: var(--typo-p-medium-font-style); --popover-option-label-line-height: var(--typo-p-medium-line-height); --popover-option-label-letter-spacing: var(--typo-p-medium-letter-spacing); --popover-option-label-text-transform: var(--typo-p-medium-text-transform); --popover-option-label-text-align: left; --popover-option-label-margin: 0; /* Hover */ --popover-option-hover-bg-colour: var(--meta-swatch-mono-8); --popover-option-hover-label-colour: var(--meta-swatch-mono-1); /* Popover menu */ /* Container */ --popover-menu-padding: 0; --popover-menu-max-height: 220px; --popover-menu-border-width: 0px; --popover-menu-background-color: var(--meta-swatch-mono-9); --popover-menu-border-radius: 12px; --popover-menu-box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.24); /* Popover menu item */ /* Container */ --popover-menu-item-padding: 8px 8px 8px 16px; --popover-menu-item-height: 40px; --popover-menu-item-border-width: 0; --popover-menu-item-background-color: transparent; --popover-menu-item-border-radius: 0; --popover-menu-item-box-shadow: none; /* Label */ --popover-menu-item-label-colour: var(--typo-p-medium-colour); --popover-menu-item-label-font-family: var(--typo-p-medium-font-face); --popover-menu-item-label-font-size: var(--typo-p-medium-font-size); --popover-menu-item-label-font-weight: var(--typo-p-medium-font-weight); --popover-menu-item-label-font-style: var(--typo-p-medium-font-style); --popover-menu-item-label-line-height: var(--typo-p-medium-line-height); --popover-menu-item-label-letter-spacing: var(--typo-p-medium-letter-spacing); --popover-menu-item-label-text-transform: var(--typo-p-medium-text-transform); --popover-menu-item-label-text-align: var(--typo-p-medium-text-align); --popover-menu-item-label-margin: 0 8px 0 0; /*Label overrides */ /* Hover overrides */ --popover-menu-item-background-color-hover: var(--meta-swatch-mono-8); --popover-menu-item-label-color-hover: var(--meta-swatch-mono-1); /* Focus overrides */ --popover-menu-item-background-color-focus: var(--meta-swatch-mono-8); --popover-menu-item-label-color-focus: var(--meta-swatch-mono-1); /* Icon */ --popover-menu-item-icon-size: var(--pattern-icon-size); --popover-menu-item-icon-margin: 0; --popover-menu-item-icon-colour: var(--meta-swatch-colour-12); /* Quick feedback */ /* Container */ --feedback-block-padding: 0 0 40px 0; --feedback-block-padding-m: 0 0 64px 0; --feedback-block-padding-l: 0 0 64px 0; --feedback-block-margin: 0; --feedback-block-margin-m: 0; --feedback-block-margin-l: 0; --feedback-block-background: var(--meta-swatch-mono-4); --feedback-block-border: none; --feedback-block-border-radius: none; --feedback-block-box-shadow: none; /* Content container */ /* Header container */ --feedback-heading-margin: 0 auto 24px; /* Heading */ --feedback-heading-colour: var(--typo-h-medium-colour); --feedback-heading-font-family: var(--typo-h-medium-font-face); --feedback-heading-font-size: var(--typo-h-medium-font-size); --feedback-heading-font-weight: var(--typo-h-medium-font-weight); --feedback-heading-font-style: var(--typo-h-medium-font-style); --feedback-heading-line-height: var(--typo-h-medium-line-height); --feedback-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --feedback-heading-text-transform: var(--typo-h-medium-text-transform); --feedback-heading-text-align: center; /* Items container */ --feedback-items-flex-direction: row-reverse; --feedback-items-align-items: center; --feedback-items-justify-content: center; /* Item */ --feedback-item-flex-direction: column-reverse; --feedback-item-align-items: center; --feedback-item-justify-content: center; --feedback-item-background: transparent; /* Icon container */ --feedback-icon-container-height: 64px; --feedback-icon-container-width: 64px; --feedback-icon-container-margin: 0 0 12px; --feedback-icon-container-border-radius: 50%; /* Icon*/ --feedback-icon-colour: var(--meta-swatch-mono-5); /* Label */ --feedback-item-label-colour: var(--typo-p-medium-colour); --feedback-item-label-font-family: var(--typo-p-medium-font-face); --feedback-item-label-font-size: var(--typo-p-medium-font-size); --feedback-item-label-font-weight: var(--typo-p-medium-font-weight); --feedback-item-label-font-style: var(--typo-p-medium-font-style); --feedback-item-label-line-height: var(--typo-p-medium-line-height); --feedback-item-label-letter-spacing: var(--typo-p-medium-letter-spacing); --feedback-item-label-text-transform: var(--typo-p-medium-text-transform); --feedback-item-label-text-align: center; /*ICON STATE OVERRIDES*/ /* Unanswered */ --feedback-unanswered-icon-container-bg-colour: var(--meta-swatch-mono-5); --feedback-unanswered-icon-colour: var(--meta-swatch-colour-1); --feedback-unanswered-icon-border: 1.5px solid var(--meta-swatch-colour-1); /* Answered */ --feedback-answered-icon-container-bg-colour: var(--meta-swatch-dark-3); --feedback-answered-icon-colour: var(--meta-swatch-mono-5); /* Selected */ --feedback-selected-icon-container-bg-colour: var(--meta-swatch-colour-1); --feedback-selected-icon-colour: var(--meta-swatch-mono-5); /* Radio buttons */ /* Outer container */ /* Container */ --input-radio-container-padding: 8px 0; --input-radio-container-direction: row-reverse; --input-radio-container-justify-content: space-between; --input-radio-container-align-items: center; --input-radio-container-border-width: 0; --input-radio-container-border-style: none; --input-radio-container-border-color: transparent; /* Label & info icon container */ --input-radio-label-direction: row-reverse; --input-radio-label-justify-content: space-between; --input-radio-label-align-items: center; /* Image */ /* Labels container */ --input-radio-labels-container-gap: 16px; --input-radio-labels-container-gap-m: 16px; --input-radio-labels-container-gap-l: 16px; /* Label */ --input-radio-label-colour: var(--typo-p-medium-colour); --input-radio-label-font-family: var(--typo-p-medium-font-face); --input-radio-label-font-size: 16px; --input-radio-label-font-size-m: 18px; --input-radio-label-font-size-l: 18px; --input-radio-label-font-weight: var(--typo-p-medium-font-weight); --input-radio-label-font-style: var(--typo-p-medium-font-style); --input-radio-label-line-height: var(--typo-p-medium-line-height); --input-radio-label-letter-spacing: var(--typo-p-medium-letter-spacing); --input-radio-label-text-transform: var(--typo-p-medium-text-transform); --input-radio-label-text-align: left; --input-radio-label-margin: 0 0 0 16px; /*Sub label*/ /* Label opt 2 */ /* Option explainer */ /* Info icon */ --input-radio-informer-margin: 0 0 0 8px; /* Field */ --input-radio-off-background-colour: var(--meta-swatch-mono-5); --input-radio-off-border: 1px solid var(--meta-swatch-mono-3); --input-radio-off-icon-colour: transparent; --input-radio-off-icon-size: 32px; --input-radio-off-border-radius: 50%; --input-radio-off-box-shadow: var(--pattern-button-box-shadow); --input-radio-on-background-colour: var(--meta-swatch-colour-1); --input-radio-on-border: 1px solid var(--meta-swatch-colour-1); --input-radio-on-icon-colour: var(--meta-swatch-mono-5); --input-radio-on-icon-size: 32px; --input-radio-on-border-radius: 50%; --input-radio-on-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.24); /* Link */ /* Required indicator */ /* Segmented button */ /* Container */ --forms-segmented-btn-padding: 1px; --forms-segmented-btn-width: 100%; --forms-segmented-btn-flex-direction: column; --forms-segmented-btn-flex-direction-m: row; --forms-segmented-btn-flex-direction-l: row; --forms-segmented-btn-gap: 8px; --forms-segmented-btn-gap-m: 8px; --forms-segmented-btn-gap-l: 8px; /* Item layout */ --forms-segmented-btn-item-height: 46px; --forms-segmented-btn-item-height-m: 46px; --forms-segmented-btn-item-height-l: 46px; --forms-segmented-btn-item-padding: 0px 8px; --forms-segmented-btn-item-margin: none; --forms-segmented-btn-item-margin-m: none; --forms-segmented-btn-item-margin-l: none; /* Item common props */ --forms-segmented-btn-item-label-face: 'rubik'; --forms-segmented-btn-item-label-font-size: 16px; --forms-segmented-btn-item-label-font-size: 18px; --forms-segmented-btn-item-label-font-size-l: 18px; /* Item off */ --forms-segmented-btn-item-off-outer-radius: 10px; --forms-segmented-btn-item-off-inner-radius: 10px; --forms-segmented-btn-item-off-bg-colour: var(--meta-swatch-mono-5); --forms-segmented-btn-item-off-border: none; --forms-segmented-btn-item-off-box-shadow: var(--pattern-button-box-shadow); --forms-segmented-btn-item-off-label-colour: var(--meta-swatch-mono-1); --forms-segmented-btn-item-off-label-weight: var(--typo-form-label-font-weight); --forms-segmented-btn-item-off-label-font-style: var(--typo-form-label-font-style); --forms-segmented-btn-item-off-label-line-height: var(--typo-form-label-line-height); --forms-segmented-btn-item-off-label-letter-spacing: var(--typo-form-label-letter-spacing); --forms-segmented-btn-item-off-label-text-transform: var(--typo-form-label-text-transform); /* Item on */ --forms-segmented-btn-item-on-outer-radius: 10px; --forms-segmented-btn-item-on-inner-radius: 10px; --forms-segmented-btn-item-on-bg-colour: var(--meta-swatch-colour-1); --forms-segmented-btn-item-on-border: none; --forms-segmented-btn-item-on-box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.24); --forms-segmented-btn-item-on-label-colour: var(--meta-swatch-mono-5); --forms-segmented-btn-item-on-label-weight: var(--typo-form-label-font-weight); --forms-segmented-btn-item-on-label-font-style: var(--typo-form-label-font-style); --forms-segmented-btn-item-on-label-line-height: var(--typo-form-label-line-height); --forms-segmented-btn-item-on-label-letter-spacing: var(--typo-form-label-letter-spacing); --forms-segmented-btn-item-on-label-text-transform: var(--typo-form-label-text-transform); /* Label */ --forms-segmented-btn-item-label-size: 16px; --forms-segmented-btn-item-label-size-m: 18px; --forms-segmented-btn-item-label-size-l: 18px; /* Select menu */ --select-container-padding: 16px 0; /* Field */ --select-field-padding: 8px 8px 8px 16px; --select-field-border-width: 1px; --select-field-border-style: solid; --select-field-border-color: var(--meta-swatch-mono-8); --select-field-background-color: var(--meta-swatch-mono-9); --select-field-border-radius: 8px; --select-field-box-shadow: none; /* Label */ --select-label-colour: var(--typo-form-label-colour); --select-label-font-family: var(--typo-form-label-font-face); --select-label-font-size: 13px; --select-label-font-weight: var(--typo-form-label-font-weight); --select-label-font-style: var(--typo-form-label-font-style); --select-label-line-height: var(--typo-form-label-line-height); --select-label-letter-spacing: var(--typo-form-label-letter-spacing); --select-label-text-transform: var(--typo-form-label-text-transform); --select-label-text-align: var(--typo-form-label-text-align); /* Value */ --select-value-colour: var(--typo-form-value-colour); --select-value-font-family: var(--typo-form-value-font-face); --select-value-font-size: var(--typo-form-value-font-size); --select-value-font-weight: var(--typo-form-value-font-weight); --select-value-font-style: var(--typo-form-value-font-style); --select-value-line-height: var(--typo-form-value-line-height); --select-value-letter-spacing: var(--typo-form-value-letter-spacing); --select-value-text-transform: var(--typo-form-value-text-transform); --select-value-text-align: var(--typo-form-value-text-align); /* Icon */ --select-icon-size: var(--pattern-icon-size); --select-icon-colour: var(--meta-swatch-mono-5); --select-icon-margin: 0; /* Switch */ /* Container */ --input-switch-container-padding: 8px 0; --input-switch-container-direction: row; --input-switch-container-justify-content: space-between; --input-switch-container-justify-align-items: center; --input-switch-container-border-width: 0; --input-switch-container-border-style: none; --input-switch-container-border-color: transparent; /* Control layout */ --input-switch-body-width: 56px; --input-switch-body-height: 28px; --input-switch-body-padding: 2px; --input-switch-body-border-radius: 16px; --input-switch-handle-size: 28px; /* Body off */ --input-switch-off-body-bg-colour: var(--meta-swatch-mono-8); --input-switch-off-body-border: none; --input-switch-off-body-box-shadow: none; --input-switch-off-handle-bg-colour: var(--meta-swatch-mono-10); --input-switch-off-handle-border: none; --input-switch-off-handle-box-shadow: none; /* Body on */ --input-switch-on-body-bg-colour: var(--meta-swatch-colour-1); --input-switch-on-body-border: none; --input-switch-on-body-box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.08); --input-switch-on-handle-bg-colour: var(--meta-swatch-mono-10); --input-switch-on-handle-border: none; --input-switch-on-handle-box-shadow: none; /* Body mandatory */ --input-switch-mandatory-body-background: var(--meta-swatch-colour-1); --input-switch-mandatory-body-border-radius: 24px; --input-switch-mandatory-body-padding: 0 12px; /* Body label */ --input-switch-mandatory-body-label-colour: var(--meta-swatch-mono-5); --input-switch-mandatory-body-label-font-family: var(--typo-p-medium-font-face); --input-switch-mandatory-body-label-font-size: 16px; --input-switch-mandatory-body-label-font-weight: 500; --input-switch-mandatory-body-label-font-style: var(--typo-p-medium-font-style); --input-switch-mandatory-body-label-line-height: var(--typo-p-medium-line-height); --input-switch-mandatory-body-label-letter-spacing: var(--typo-p-medium-letter-spacing); --input-switch-mandatory-body-label-text-transform: var(--typo-p-medium-text-transform); /* Label */ --input-switch-label-direction: row; --input-switch-label-justify-content: flex-start; --input-switch-label-align-items: center; --input-switch-label-colour: var(--meta-swatch-mono-1); --input-switch-label-font-family: var(--typo-form-label-font-face); --input-switch-label-font-size: 16px; --input-switch-label-font-weight: 500; --input-switch-label-font-style: var(--typo-form-label-font-style); --input-switch-label-line-height: var(--typo-form-label-line-height); --input-switch-label-letter-spacing: var(--typo-form-label-letter-spacing); --input-switch-label-text-transform: var(--typo-form-label-text-transform); --input-switch-label-text-align: var(--typo-form-label-text-align); --input-switch-label-margin: 0 8px 0 0; --input-switch-informer-margin: 0 8px 0 0; /* Text area */ /* Container */ /* Field container */ --forms-textarea-padding: 16px; --forms-textarea-width: 100%; --forms-textarea-height: auto; --forms-textarea-border-width: 1px; --forms-textarea-border-style: solid; --forms-textarea-border-color: var(--meta-swatch-mono-3); --forms-textarea-background-color: var(--meta-swatch-mono-5); --forms-textarea-border-radius: 10px; --forms-textarea-box-shadow: none; /* Label */ --forms-textarea-label-colour: var(--typo-form-label-colour); --forms-textarea-label-font-family: var(--typo-form-label-font-face); --forms-textarea-label-font-size: var(--typo-form-label-font-size); --forms-textarea-label-font-weight: var(--typo-form-label-font-weight); --forms-textarea-label-font-style: var(--typo-form-label-font-style); --forms-textarea-label-line-height: var(--typo-form-label-line-height); --forms-textarea-label-letter-spacing: var(--typo-form-label-letter-spacing); --forms-textarea-label-text-transform: var(--typo-form-label-text-transform); --forms-textarea-label-text-align: var(--typo-form-label-text-align); --forms-textarea-label-margin: 0 0 8px 0; /* Informer */ /* Placeholder */ --forms-textarea-placeholder-colour: var(--meta-swatch-mono-2); --forms-textarea-placeholder-font-family: var(--typo-form-value-font-face); --forms-textarea-placeholder-font-size: 16px; --forms-textarea-placeholder-font-size-m: 18px; --forms-textarea-placeholder-font-size-l: 18px; --forms-textarea-placeholder-font-weight: var(--typo-form-value-font-weight); --forms-textarea-placeholder-font-style: var(--typo-form-value-font-style); --forms-textarea-placeholder-line-height: var(--typo-form-value-line-height); --forms-textarea-placeholder-letter-spacing: var(--typo-form-value-letter-spacing); --forms-textarea-placeholder-text-transform: var(--typo-form-value-text-transform); --forms-textarea-placeholder-text-align: var(--typo-form-value-text-align); /* Value */ --forms-textarea-value-colour: var(--meta-swatch-mono-2); --forms-textarea-value-font-family: var(--typo-form-value-font-face); --forms-textarea-value-font-size: 16px; --forms-textarea-value-font-size-m: 18px; --forms-textarea-value-font-size-l: 18px; --forms-textarea-value-font-weight: 400; --forms-textarea-value-font-style: var(--typo-form-value-font-style); --forms-textarea-value-line-height: var(--typo-form-value-line-height); --forms-textarea-value-letter-spacing: var(--typo-form-value-letter-spacing); --forms-textarea-value-text-transform: var(--typo-form-value-text-transform); --forms-textarea-value-text-align: var(--typo-form-value-text-align); /* Text input */ /* Layout order */ --forms-input-text-order-label: 1; --forms-input-text-order-explainer: 3; --forms-input-text-order-field: 2; --forms-input-text-order-error: 4; /* Container */ --forms-input-container-direction: column; /* Field container */ --forms-input-padding: 16px; --forms-input-width: 100%; --forms-input-height: 56px; --forms-input-border-width: 0 0 1px 0; --forms-input-border-style: solid; --forms-input-border-color: var(--meta-swatch-mono-3); --forms-input-background-color: var(--meta-swatch-mono-5); --forms-input-border-radius: 10px; --forms-input-box-shadow: none; /* Label */ --forms-input-label-colour: var(--meta-swatch-mono-1); --forms-input-label-font-family: var(--typo-form-label-font-face); --forms-input-label-font-size: 16px; --forms-input-label-font-size-m: 18px; --forms-input-label-font-size-l: 18px; --forms-input-label-font-weight: var(--typo-form-label-font-weight); --forms-input-label-font-style: var(--typo-form-label-font-style); --forms-input-label-line-height: var(--typo-form-label-line-height); --forms-input-label-letter-spacing: var(--typo-form-label-letter-spacing); --forms-input-label-text-transform: var(--typo-form-label-text-transform); --forms-input-label-text-align: var(--typo-form-label-text-align); /* Informer */ /* Placeholder */ --forms-input-placeholder-colour: var(--meta-swatch-mono-2); --forms-input-placeholder-font-family: var(--typo-form-value-font-face); --forms-input-placeholder-font-size: 18px; --forms-input-placeholder-font-weight: 400; --forms-input-placeholder-font-style: var(--typo-form-value-font-style); --forms-input-placeholder-line-height: var(--typo-form-value-line-height); --forms-input-placeholder-letter-spacing: var(--typo-form-value-letter-spacing); --forms-input-placeholder-text-transform: var(--typo-form-value-text-transform); --forms-input-placeholder-text-align: var(--typo-form-value-text-align); /* Value */ --forms-input-value-colour: var(--meta-swatch-mono-1); --forms-input-value-font-family: var(--typo-form-value-font-face); --forms-input-value-font-size: 18px; --forms-input-value-font-weight: 400; --forms-input-value-font-style: var(--typo-form-value-font-style); --forms-input-value-line-height: var(--typo-form-value-line-height); --forms-input-value-letter-spacing: var(--typo-form-value-letter-spacing); --forms-input-value-text-transform: var(--typo-form-value-text-transform); --forms-input-value-text-align: var(--typo-form-value-text-align); /* Password validation */ /* These are currently in use but... */ --account-password-tick-off-colour: rgba(85, 85, 85, 0.1); --account-password-tick-on-colour: var(--meta-swatch-colour-12); --input-tick-container-padding: 0; --input-tick-container-direction: row-reverse; --input-tick-container-align-items: center; --input-tick-container-justify-content: flex-end; --input-tick-container-border-width: 0; --input-tick-container-border-style: none; --input-tick-container-border-color: transparent; --input-tick-label-direction: row; --input-tick-label-justify-content: flex-start; --input-tick-label-align-items: center; --input-tick-label-colour: var(--typo-p-medium-colour); --input-tick-label-font-face: var(--typo-p-medium-font-face); --input-tick-label-font-family: var(--typo-p-medium-font-face); --input-tick-label-font-size: var(--typo-p-medium-font-size); --input-tick-label-font-weight: var(--typo-p-medium-font-weight); --input-tick-label-font-style: var(--typo-p-medium-font-style); --input-tick-label-line-height: var(--typo-p-medium-line-height); --input-tick-label-letter-spacing: var(--typo-p-medium-letter-spacing); --input-tick-label-text-transform: var(--typo-p-medium-text-transform); --input-tick-label-text-align: left; --input-tick-label-margin: 0 0 0 8px; --forms-wheel-informer-margin: 0 8px 0 0; /* These should be the new controls */ --swatch-forms-tick-size: var(--pattern-icon-size); --swatch-forms-tick-icon-on: var(--meta-swatch-colour-3); /* Block container */ /* Heading */ /* Tick list */ /* Tick row */ /* Tick Row Label */ /* Tick Row Icon */ /* Wheel input */ /* Container */ --forms-wheel-container-max-width: var(--btn-max-width); --forms-wheel-text-margin-bottom: var(--pattern-form-label-margin-bottom); --forms-wheel-label-width: 27.5%; --forms-wheel-value-width: 45%; /* Grips */ --forms-wheel-grip-container-height: 48px; --forms-wheel-grip-container-bg-colour: var(--meta-swatch-mono-8); --forms-wheel-grip-container-border: none; --forms-wheel-grip-container-border-radius: 6px; --forms-wheel-grip-container-shadow: var(--pattern-depression-low); --forms-wheel-grips-height: 32px; --forms-wheel-grips-width: 2px; --forms-wheel-grips-colour: var(--meta-swatch-mono-7); --forms-wheel-grips-vertical-position: center; /* Stepper buttons */ --forms-wheel-stepper-width: 24px; --forms-wheel-stepper-height: 48px; --forms-wheel-stepper-margin: 12px; --forms-wheel-stepper-bg-colour: transparent; --forms-wheel-stepper-border: none; --forms-wheel-stepper-border-radius: 0; --forms-wheel-stepper-icon-size: var(--pattern-icon-size); --forms-wheel-stepper-icon-on-colour: var(--meta-swatch-mono-12); --forms-wheel-stepper-icon-off-colour: var(--meta-swatch-mono-7); --forms-wheel-stepper-disabled-opacity: var(--pattern-disabled-opacity); /* Frame */ --forms-wheel-frame-display: none; --forms-wheel-fade-colour: none; /* Value indicator */ --forms-wheel-indicator-on-colour: transparent; --forms-wheel-indicator-off-colour: transparent; --forms-wheel-indicator-width: 2px; --forms-wheel-indicator-arrowhead-display: none; --forms-wheel-indicator-height: 100%; --forms-wheel-indicator-align: 0; /* Label */ --forms-wheel-label-direction: row; --forms-wheel-label-justify-content: flex-start; --forms-wheel-label-align-items: center; --forms-wheel-label-colour: var(--typo-form-label-colour); --forms-wheel-label-font-face: var(--typo-form-label-font-face); --forms-wheel-label-font-size: var(--typo-form-label-font-size); --forms-wheel-label-font-weight: var(--typo-form-label-font-weight); --forms-wheel-label-font-style: var(--typo-form-label-font-style); --forms-wheel-label-line-height: var(--typo-form-label-line-height); --forms-wheel-label-letter-spacing: var(--typo-form-label-letter-spacing); --forms-wheel-label-text-transform: var(--typo-form-label-text-transform); --forms-wheel-value-colour: var(--typo-form-value-colour); --forms-wheel-value-font-face: var(--typo-form-value-font-face); --forms-wheel-value-font-size: var(--typo-form-value-font-size); --forms-wheel-value-font-weight: var(--typo-form-value-font-weight); --forms-wheel-value-font-style: var(--typo-form-value-font-style); --forms-wheel-value-line-height: var(--typo-form-value-line-height); --forms-wheel-value-letter-spacing: var(--typo-form-value-letter-spacing); --forms-wheel-value-text-transform: var(--typo-form-value-text-transform); --forms-wheel-value-text-align: center; --forms-wheel-computed-colour: var(--typo-form-value-colour); --forms-wheel-computed-font-face: var(--typo-form-value-font-face); --forms-wheel-computed-font-size: var(--typo-form-value-font-size); --forms-wheel-computed-font-weight: var(--typo-form-value-font-weight); --forms-wheel-computed-font-style: var(--typo-form-value-font-style); --forms-wheel-computed-line-height: var(--typo-form-value-line-height); --forms-wheel-computed-letter-spacing: var(--typo-form-value-letter-spacing); --forms-wheel-computed-text-transform: var(--typo-form-value-text-transform); /* Navigation */ /* Accordion */ /*

        List Container */ --accordion-v2-padding: 0; --accordion-v2-border: none; --accordion-v2-border-radius: none; --accordion-v2-item-keyline: none; /* Accordion title container */ /* Accordion title */ --accordion-v2-title-colour: var(--meta-swatch-mono-3); --accordion-v2-title-font-family: 'rubik'; --accordion-v2-title-font-size: 18px; --accordion-v2-title-font-weight: 500; --accordion-v2-title-font-style: normal; --accordion-v2-title-line-height: 1.2; --accordion-v2-title-letter-spacing: 0; --accordion-v2-title-text-transform: none; --accordion-v2-title-text-align: left; /* Header container */ --accordion-v2-header-direction: row; --accordion-v2-header-justify: space-between; --accordion-v2-header-padding: 16px 0; --accordion-v2-header-margin: 0; --accordion-v2-header-bg-color: transparent; /* Header label */ --accordion-v2-title-colour: var(--typo-h-medium-colour); --accordion-v2-title-font-family: var(--typo-h-medium-font-face); --accordion-v2-title-font-size: var(--typo-h-medium-font-size); --accordion-v2-title-font-weight: var(--typo-h-medium-font-weight); --accordion-v2-title-font-style: var(--typo-h-medium-font-style); --accordion-v2-title-line-height: var(--typo-h-medium-line-height); --accordion-v2-title-letter-spacing: var(--typo-h-medium-letter-spacing); --accordion-v2-title-text-transform: var(--typo-h-medium-text-transform); --accordion-v2-title-text-align: var(--typo-h-medium-text-align); /* Content */ /* Header icon */ --accordion-v2-icon-bg-border: none; --accordion-v2-icon-bg-color: transparent; --accordion-v2-icon-color: var(--meta-swatch-colour-12); /* Open overrides */ --accordion-v2-header-bg-color-open: var(--accordion-v2-header-bg-color); --accordion-v2-title-colour-open: var(--accordion-v2-title-colour); --accordion-v2-icon-bg-border-open: var(--accordion-v2-icon-bg-border); --accordion-v2-icon-bg-color-open: var(--accordion-v2-icon-bg-color); --accordion-v2-icon-color-open: var(--accordion-v2-icon-color); /* Block container */ --accordion-flex-direction: row; --accordion-flex-direction-m: row-reverse; --accordion-flex-direction-l: row-reverse; --accordion-padding: 0; --accordion-padding-m: 0; --accordion-padding-l: 0; --accordion-margin: 0; --accordion-background: transparent; --accordion-border-top: 1px solid var(--meta-swatch-mono-3); /* Content container */ --accordion-content-flex-direction: column; --accordion-content-flex-direction-m: row; --accordion-content-flex-direction-l: row; --accordion-content-gap: 16px; --accordion-content-justify-content: flex-start; --accordion-content-justify-content-m: space-between; --accordion-content-justify-content-l: space-between; /* Words container */ --accordion-words-gap: 4px; --accordion-words-gap-m: 4px; --accordion-words-gap-l: 4px; --accordion-words-grow: 1; --accordion-words-grow-m: 1; --accordion-words-grow-l: 1; /* Action container */ --accordion-action-grow: 1; --accordion-action-grow-m: 0; --accordion-action-grow-l: 0; --accordion-action-basis: 165px; --accordion-action-shrink: 0; /* Nested Checkbox */ --accordion-checkbox-container-direction: row; --accordion-checkbox-container-direction-m: row; --accordion-checkbox-container-direction-l: row; --accordion-checkbox-field-size: 32px; --accordion-checkbox-label-colour-off: var(--meta-swatch-colour-12); --accordion-checkbox-label-colour-on: var(--meta-swatch-mono-3); --accordion-checkbox-label-font-family: 'rubik'; --accordion-checkbox-label-font-size: 18px; --accordion-checkbox-label-font-weight: 500; --accordion-checkbox-label-font-style: normal; --accordion-checkbox-label-line-height: 1.2; --accordion-checkbox-label-letter-spacing: 0; --accordion-checkbox-label-text-transform: none; --accordion-checkbox-label-text-align: left; --accordion-checkbox-label-margin: 0; /* Breadcrumb */ /* Container */ /*Link Label*/ /*Delimiter*/ /* Repeater Card */ /* Block container */ --card-background: var(--meta-swatch-mono-5); --card-border-radius: 18px; --card-box-shadow: var(--pattern-button-box-shadow); /* Header */ --card-play-icon-size: 80px; --card-play-icon-color: rgba(255,255,255,0.8); /* Image */ --card-image-object-fit: cover; /* Body */ --card-body-padding: 20px 16px; --card-heading-colour: var(--meta-swatch-mono-1); --card-heading-font-family: var(--typo-h-medium-font-family); --card-heading-font-size: 20px; --card-heading-font-weight: 500; --card-heading-font-style: normal; --card-heading-line-height: 1.3; --card-heading-letter-spacing: 0; --card-heading-text-transform: none; --card-heading-text-align: left; --card-heading-padding: 0 0 16px 0; --card-heading-padding-m: 0 0 16px 0; --card-heading-padding-l: 0 0 16px 0; --card-excerpt-colour: var(--typo-p-medium-colour); --card-excerpt-font-face: var(--typo-p-medium-font-face); --card-excerpt-font-size: var(--typo-p-medium-font-size); --card-excerpt-font-weight: var(--typo-p-medium-font-weight); --card-excerpt-font-style: var(--typo-p-medium-font-style); --card-excerpt-line-height: var(--typo-p-medium-line-height); --card-excerpt-label-spacing: var(--typo-p-medium-letter-spacing); --card-excerpt-text-transform: var(--typo-p-medium-text-transform); --card-excerpt-text-align: var(--typo-p-medium-text-align); --card-excerpt-padding: 0; /* Footer */ --card-footer-padding: 0 16px 16px; --card-label-icon-size: var(--pattern-icon-size); --card-label-icon-color: var(--meta-swatch-colour-1); --card-label-colour: var(--meta-swatch-mono-2); --card-label-font-family: 'rubik'; --card-label-font-size: var(--typo-data-label-s-font-size); --card-label-font-weight: 400; --card-label-font-style: normal; --card-label-line-height: 1.3; --card-label-label-spacing: 0; --card-label-text-transform: none; --card-label-text-align: left; --card-label-padding: 0 8px; --card-action-icon-size: var(--pattern-icon-size); --card-action-icon-color: var(--meta-swatch-colour-12); /* Category links */ /* Block Container */ --cat-links-padding: 64px 0; --cat-links-background: linear-gradient(107.01deg, #F2F2F2 13.88%, #DEDEDE 89.14%); /* Content Container */ /* Heading */ --cat-links-heading-colour: var(--meta-swatch-mono-3); --cat-links-heading-font-size: 24px; --cat-links-heading-font-family: 'rubik'; --cat-links-heading-font-weight: 500; --cat-links-heading-font-style: normal; --cat-links-heading-line-height: 1.2; --cat-links-heading-letter-spacing: var(--pattern-letter-spacing-body); --cat-links-heading-text-transform: none; /* Sub heading */ --cat-links-sub-heading-colour: var(--meta-swatch-mono-3); --cat-links-sub-heading-font-size: 16px; --cat-links-sub-heading-font-family: 'rubik'; --cat-links-sub-heading-font-weight: 400; --cat-links-sub-heading-font-style: normal; --cat-links-sub-heading-line-height: 1.2; --cat-links-sub-heading-letter-spacing: var(--pattern-letter-spacing-body); --cat-links-sub-heading-text-transform: none; /* Link */ /* Items Container */ --cat-links-items-margin: 0 0 24px; --cat-links-items-margin-m: 0 0 24px; --cat-links-items-margin-l: 0 0 24px; --cat-links-items-col-gap: 16px; --cat-links-items-row-gap: 16px; /* Item container */ --cat-links-item-background: var(--meta-swatch-mono-10); --cat-links-item-padding: 8px 12px; --cat-links-item-border: none; --cat-links-item-border-radius: 8px; --cat-links-item-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15); /* Item label */ --cat-links-item-label-colour: var(--meta-swatch-mono-3); --cat-links-item-label-font-size: 18px; --cat-links-item-label-font-family: 'rubik'; --cat-links-item-label-font-weight: 500; --cat-links-item-label-font-style: normal; --cat-links-item-label-line-height: 1.2; --cat-links-item-label-letter-spacing: var(--pattern-letter-spacing-body); --cat-links-item-label-text-transform: none; /* Item sub label */ /* Item icon */ --cat-links-icon-colour: var(--meta-swatch-colour-11); --cat-links-icon-size: 40px; --cat-links-icon-font-size: 40px; --cat-links-icon-margin: 0 12px 0 0; /* Checklist Sections Container */ /* Checklist Section Container */ --checklist-section-container-padding: 24px 0; --checklist-section-gap: 12px; --checklist-section-gap-m: 12px; --checklist-section-gap-l: 12px; --checklist-widget-list-gap: 12px; --checklist-widget-list-gap-m: 12px; --checklist-widget-list-gap-l: 12px; /* Checklist Item */ /* Container */ --checklist-item-bg-colour: transparent; /* Indicator */ --checklist-item-indicator-width: var(--pattern-indicator-width); --checklist-item-indicator-on-colour: var(--meta-swatch-colour-11); --checklist-item-indicator-off-colour: transparent; --checklist-item-indicator-hover-colour: var(--meta-swatch-mono-9); /* Checklist Item image */ /* Keylines */ --checklist-item-keyline: none; --checklist-item-keyline-last: none; --checklist-item-keyline-margin: 0 16px; --checklist-item-keyline-max-width: none; /* Button */ --checklist-item-btn-height: 48px; --checklist-item-btn-max-width: 720px; --checklist-item-btn-margin: 0 16px; --checklist-item-btn-padding: 0px 16px; --checklist-item-btn-bg-colour: var(--meta-swatch-mono-10); --checklist-item-btn-border: none; --checklist-item-btn-border-radius-first: var(--btn-border-radius); --checklist-item-btn-border-radius: var(--btn-border-radius); --checklist-item-btn-border-radius-last: var(--btn-border-radius); --checklist-item-btn-box-shadow: var(--pattern-elevation-low); /* Button items ordering */ /* Labels container */ --checklist-item-labels-gap: 16px; --checklist-item-labels-gap-m: 16px; --checklist-item-labels-gap-l: 16px; --checklist-item-labels-padding: 0 8px; /* Labels order */ /* Activity Label */ --checklist-item-label-colour: var(--typo-p-small-colour); --checklist-item-label-font-family: var(--typo-p-small-font-face); --checklist-item-label-font-size: var(--typo-p-small-font-size); --checklist-item-label-font-weight: var(--typo-p-small-font-weight); --checklist-item-label-font-style: var(--typo-p-small-font-style); --checklist-item-label-line-height: var(--typo-p-small-line-height); --checklist-item-label-letter-spacing: var(--typo-p-small-letter-spacing); --checklist-item-label-text-transform: var(--typo-p-small-text-transform); --checklist-item-label-align: var(--typo-p-small-text-align); --checklist-item-label-padding: 0 0 0 4px; /* Description Label */ /* Badge container */ /* Badge label */ /* BADGE OPTIONS */ /* Option 1 */ /* Option 2 */ /* Option 3 */ /* Option 4 */ /* Option 5 */ /* Status Label */ --checklist-item-status-label-display: none; /* Action icon */ --checklist-item-action-bg-height: 64px; --checklist-item-action-bg-width: 64px; --checklist-item-action-bg-margin: auto 0px auto 8px; --checklist-item-action-bg-colour: transparent; --checklist-item-action-bg-border: none; --checklist-item-action-bg-border-radius: none; --checklist-item-action-icon-color: var(--meta-swatch-colour-1); --checklist-item-action-icon-size: var(--layout-icon-size); /* Status */ --checklist-item-checkbox-bg-height: 32px; --checklist-item-checkbox-bg-width: 32px; --checklist-item-checkbox-bg-margin: auto 4px auto 0px; --checklist-item-checkbox-border-radius: 50%; --checklist-item-status-icon-height: 32px; --checklist-item-status-icon-width: 32px; --checklist-item-status-icon-margin: auto 4px auto 0px; --checklist-item-status-icon-border-radius: 50%; --checklist-item-status-icon-size: var(--pattern-icon-size); /* Old hardcoded statuses */ --checklist-item-checkbox-to-do-bg-colour: transparent; --checklist-item-checkbox-to-do-border: 2px solid var(--meta-swatch-colour-11); --checklist-item-checkbox-to-do-icon-colour: transparent; --checklist-item-checkbox-in-progress-bg-colour: transparent; --checklist-item-checkbox-in-progress-border: none; --checklist-item-checkbox-in-progress-icon-colour: var(--meta-swatch-colour-12); --checklist-item-checkbox-snoozed-bg-colour: transparent; --checklist-item-checkbox-snoozed-border: none; --checklist-item-checkbox-snoozed-icon-colour: var(--meta-swatch-colour-11); --checklist-item-checkbox-paused-bg-colour: transparent; --checklist-item-checkbox-paused-border: none; --checklist-item-checkbox-paused-icon-colour: var(--meta-swatch-colour-11); --checklist-item-checkbox-na-bg-colour: var(--meta-swatch-colour-11); --checklist-item-checkbox-na-border: none; --checklist-item-checkbox-na-icon-colour: var(--meta-swatch-mono-10); --checklist-item-checkbox-not-keen-bg-colour: var(--meta-swatch-colour-11); --checklist-item-checkbox-not-keen-border: none; --checklist-item-checkbox-not-keen-icon-colour: var(--meta-swatch-mono-10); --checklist-item-checkbox-already-bg-colour: var(--meta-swatch-colour-11); --checklist-item-checkbox-already-border: none; --checklist-item-checkbox-already-icon-colour: var(--meta-swatch-mono-10); --checklist-item-checkbox-done-bg-colour: var(--meta-swatch-colour-11); --checklist-item-checkbox-done-border: none; --checklist-item-checkbox-done-icon-colour: var(--meta-swatch-mono-10); /* New dynamic statuses */ --checklist-item-checkbox-bg-colour: transparent; --checklist-item-checkbox-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-icon-colour: var(--meta-swatch-colour-1); --checklist-item-checkbox-notstarted-bg-colour: transparent; --checklist-item-checkbox-notstarted-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-notstarted-icon-colour: transparent; --checklist-item-checkbox-seen-bg-colour: transparent; --checklist-item-checkbox-seen-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-seen-icon-colour: var(--meta-swatch-colour-1); --checklist-item-checkbox-inprogress-bg-colour: transparent; --checklist-item-checkbox-inprogress-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-inprogress-icon-colour: var(--meta-swatch-colour-1); --checklist-item-checkbox-snooze-bg-colour: transparent; --checklist-item-checkbox-snooze-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-snooze-icon-colour: var(--meta-swatch-colour-1); --checklist-item-checkbox-pause-bg-colour: transparent; --checklist-item-checkbox-pause-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-pause-icon-colour: var(--meta-swatch-colour-1); --checklist-item-checkbox-notapplicable-bg-colour: transparent; --checklist-item-checkbox-notapplicable-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-notapplicable-icon-colour: var(--meta-swatch-colour-1); --checklist-item-checkbox-notkeen-bg-colour: transparent; --checklist-item-checkbox-notkeen-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-notkeen-icon-colour: var(--meta-swatch-colour-1); --checklist-item-checkbox-alreadyhaveone-bg-colour: transparent; --checklist-item-checkbox-alreadyhaveone-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-alreadyhaveone-icon-colour: var(--meta-swatch-colour-1); --checklist-item-checkbox-completed-bg-colour: transparent; --checklist-item-checkbox-completed-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-completed-icon-colour: var(--meta-swatch-colour-1); --checklist-item-checkbox-externallink-bg-colour: transparent; --checklist-item-checkbox-externallink-border: 2px solid var(--meta-swatch-colour-1); --checklist-item-checkbox-externallink-icon-colour: var(--meta-swatch-colour-1); /* Checklist Section Header */ /* Container */ --checklist-section-margin: 0 0 8px 16px; --checklist-section-bg-colour: none; --checklist-section-min-height: 70px; /* Keylines */ --checklist-section-keyline-top-margin: none; --checklist-section-keyline-top-first: none; --checklist-section-keyline-top: none; --checklist-section-keyline-bottom-margin: none; --checklist-section-keyline-bottom: none; /* Toggle */ --checklist-toggle-height: 40px; --checklist-toggle-width: 40px; --checklist-toggle-icon-size: var(--layout-icon-size); --checklist-toggle-border-radius: 0; --checklist-toggle-margin: 0 0 auto 8px; --checklist-toggle-open-icon-colour: var(--meta-swatch-mono-7); --checklist-toggle-open-bg-colour: transparent; --checklist-toggle-open-border: none; --checklist-toggle-close-icon-colour: var(--meta-swatch-mono-7); --checklist-toggle-close-bg-colour: transparent; --checklist-toggle-close-border: none; /* Icon */ --checklist-section-icon-display: none; /* Heading */ --checklist-section-heading-colour: var(--typo-h-medium-colour); --checklist-section-heading-family: var(--typo-h-medium-font-face); --checklist-section-heading-size: var(--typo-h-medium-font-size); --checklist-section-heading-weight: var(--typo-h-medium-font-weight); --checklist-section-heading-line-height: var(--typo-h-medium-line-height); --checklist-section-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --checklist-section-heading-text-transform: var(--typo-h-medium-text-transform); --checklist-section-heading-text-align: left; /* Sub heading */ --checklist-section-sub-heading-colour: var(--meta-swatch-mono-5); --checklist-section-sub-heading-family: var(--typo-p-small-font-face); --checklist-section-sub-heading-size: var(--typo-p-small-font-size); --checklist-section-sub-heading-weight: var(--typo-p-small-font-weight); --checklist-section-sub-heading-line-height: var(--typo-p-small-line-height); --checklist-section-sub-heading-letter-spacing: var(--typo-p-small-letter-spacing); --checklist-section-sub-heading-text-transform: var(--typo-p-small-text-transform); --checklist-section-sub-heading-text-align: left; /* Spacing */ --checklist-section-spacer-top: 8px; --checklist-section-spacer-middle: 8px; --checklist-section-spacer-bottom: 16px; /* Motion */ --checklist-accordion-duration: var(--motion-expand-transition-duration); --checklist-accordion-motion-curve: ease-out; /* Coach */ /* Container */ --theme-coach-bg-color: transparent; --theme-coach-bg-image-url: unset; --theme-coach-bg-image-repeat: unset; --theme-coach-bg-image-size: unset; --theme-coach-bg-image-position: unset; --coach-padding-top: 16px; --coach-padding-bottom: 16px; --coach-padding-top-m: 48px; --coach-padding-bottom-m: 48px; --coach-padding-top-l: 64px; --coach-padding-bottom-l: 64px; /* Avatar */ --theme-coach-avatar-display: block; --coach-avatar-width: 64px; --coach-avatar-height: 64px; --coach-avatar-border-radius: 0; --coach-spacer-avatar: 0; --coach-avatar-padding: 0 0 12px 0; --coach-avatar-justify-content: left; --coach-avatar-align: left; /* Message bubbles container */ /* Message bubble */ --coach-message-img-display: none; --coach-message-margin-right: 0; --coach-message-border-radius: 0 18px 18px 18px; --coach-message-border: 1.5px solid var(--meta-swatch-mono-3); --coach-message-box-shadow: none; --coach-message-padding: 18px 16px; --coach-message-bg-colour: var(--meta-swatch-mono-5); /* Message text */ --coach-message-text-colour: var(--meta-swatch-mono-1); --coach-message-font-family: var(--typo-p-medium-font-face); --coach-message-text-size: 16px; --coach-message-text-size-m: 18px; --coach-message-text-size-l: 18px; --coach-message-text-weight: var(--typo-p-medium-text-weight); --coach-message-text-style: var(--typo-p-medium-text-style); --coach-message-letter-spacing: var(--typo-p-medium-letter-spacing); --coach-message-line-height: var(--typo-p-medium-line-height); --coach-message-text-transform: var(--typo-p-medium-text-transform); --coach-message-text-align: var(--typo-p-medium-text-align); --coach-message-par-margin: 0.4rem; --coach-message-word-break: break-word; --coach-link-weight: 500; --coach-link-style: inherit; --coach-link-bg-radius: 0; --coach-link-underline-width: 1px; --coach-link-bg-padding: 0 0 2px; --coach-link-underline-width-hover: 1px; /* Answer bubble */ /* Answer text */ --coach-answer-text-size: 16px; --coach-answer-text-weight: normal; --coach-answer-text-style: normal; /* Motion */ /* Spacing */ --coach-spacer-par: 12px; --coach-spacer-group: 24px; --coach-spacer-input: 16px; --coach-spacer-input-m: 16px; --coach-spacer-input-l: 16px; --coach-input-h-gap: 8px; /* All types - Main container */ /* All types - Icon container */ /* All types - SVG */ /* All button types - label */ /* Button block overrides - Major type */ /* Button block overrides - Minor type */ /* Headings when on Dashboard */ --coach-reload-icon-color: var(--meta-swatch-colour-1); /* DC widget */ /* Container */ /* Icon */ /* Coach dataviz (Poll is in here) */ /* Block container */ /* Poll container */ /* Bars container */ --coach-bars-margin: 0 0 24px; --coach-bars-row-gap: 16px; /* Row container */ /* Value */ --coach-bars-value-colour: var(--meta-swatch-mono-1); --coach-bars-value-font-size: 16px; --coach-bars-value-font-family: 'rubik'; --coach-bars-value-font-weight: normal; --coach-bars-value-font-style: normal; --coach-bars-value-line-height: 1.2; --coach-bars-value-letter-spacing: 0; --coach-bars-value-text-transform: none; --coach-bars-value-margin: 0 8px; --coach-bars-value-padding: 0; /* Bar container */ --coach-bars-bar-height: 38px; --coach-bars-bar-background: transparent; --coach-bars-bar-border: none; --coach-bars-bar-border-radius: 8px; /* Labels */ --coach-bars-label-colour: var(--meta-swatch-mono-1); --coach-bars-label-font-size: 16px; --coach-bars-label-font-family: 'rubik'; --coach-bars-label-font-weight: normal; --coach-bars-label-font-style: normal; --coach-bars-label-line-height: 1.25; --coach-bars-label-letter-spacing: 0; --coach-bars-label-text-transform: none; --coach-bars-label-margin: auto 16px; --coach-bars-label-padding: 0; /* Bar value */ --coach-bars-bar-value-background: var(--meta-swatch-dark-2); --coach-bars-bar-value-border: none; --coach-bars-bar-value-border-radius: 40px; --coach-bars-bar-value-winner-background: var(--meta-swatch-colour-1); --coach-bars-bar-value-winner-border: none; --coach-bars-bar-value-winner-border-radius: 40px; --coach-bars-label-winner-colour: var(--meta-swatch-mono-5); /* Content */ /* Editorial card */ /* Container */ --card-editorial-bg-colour: var(--meta-swatch-mono-10); --card-editorial-border-radius: var(--pattern-border-radius-m); --card-editorial-box-shadow: var(--pattern-elevation-low); --card-editorial-border: var(--pattern-card-border); --card-editorial-padding: 12px; /* Heading */ --card-editorial-heading-display: block; --card-editorial-heading-colour: var(--typo-h-medium-colour); --card-editorial-heading-font-face: var(--typo-h-medium-font-face); --card-editorial-heading-font-size: var(--typo-h-medium-font-size); --card-editorial-heading-font-weight: var(--typo-h-medium-font-weight); --card-editorial-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --card-editorial-heading-line-height: var(--typo-h-medium-line-height); --card-editorial-heading-text-transform: var(--typo-h-medium-text-transform); /* Paragraph */ --card-editorial-paragraph-display: block; --card-editorial-paragraph-colour: var(--typo-p-medium-colour); --card-editorial-paragraph-font-face: var(--typo-p-medium-font-face); --card-editorial-paragraph-font-size: var(--typo-p-medium-font-size); --card-editorial-paragraph-font-weight: var(--typo-p-medium-font-weight); --card-editorial-paragraph-letter-spacing: var(--typo-p-medium-letter-spacing); --card-editorial-paragraph-line-height: var(--typo-p-medium-line-height); --card-editorial-paragraph-text-transform: var(--typo-p-medium-text-transform); /* Label */ --card-editorial-label-colour: var(--meta-swatch-mono-2); --card-editorial-label-font-face: var(--typo-p-small-font-face); --card-editorial-label-font-size: var(--typo-p-small-font-size); --card-editorial-label-font-weight: var(--typo-p-small-font-weight); --card-editorial-label-letter-spacing: var(--typo-p-small-letter-spacing); --card-editorial-label-line-height: var(--typo-p-small-line-height); --card-editorial-label-text-transform: var(--typo-p-small-text-transform); /* Icon */ --card-editorial-icon-display: block; --card-editorial-icon-colour: var(--meta-swatch-colour-12); --card-editorial-icon-size: var(--pattern-icon-size); /* Footer label */ /* Footer value */ /* Featured articles */ /* Old vars */ --template-dashboard-editorial-cards-columns: 2; --template-dashboard-editorial-cards-gap-row: 16px; --template-dashboard-editorial-cards-gap-column: 16px; --template-dashboard-editorial-bg-color: transparent; --template-dashboard-editorial-spacer-display: block; --template-dashboard-editorial-spacer-keyline: none; /* New vars */ /* Block container */ /* Grid container */ /* Heading block overrides */ /* Button container */ /* Button block overrides */ /* Featured tools */ /* Block container */ --featured-tools-padding: 0 0 64px; /* Grid container */ /* Heading block overrides */ /* Button container */ /* Button block overrides */ /* Filter toggle */ /* Block container */ /* Label */ /* Icon container */ /* Icon */ /* State overrides */ /* Footer - Main */ /* Container */ --footer-bg-colour: var(--meta-swatch-mono-5); --footer-align: center; --footer-group-min-width: 320px; --footer-group-max-width: 400px; --footer-padding: 32px 0; --footer-padding-m: 32px 0; --footer-padding-l: 32px 0; --footer-box-shadow: var(--pattern-button-box-shadow); /* Section layout */ --footer-header-flex-order: 1; --footer-social-icons-flex-order: 2; --footer-logo-flex-order: 3; --footer-buttons-flex-order: 4; --footer-text-flex-order: 5; /* Header */ --footer-header-display: block; --footer-header-margin: 0; --footer-header-padding: 24px 0 8px; --footer-header-colour: var(--meta-swatch-mono-3); --footer-header-font-face: var(--typo-h-small-font-face); --footer-header-font-size: var(--typo-h-small-font-size); --footer-header-font-weight: var(--typo-h-small-font-weight); --footer-header-font-style: var(--typo-h-small-font-style); --footer-header-line-height: var(--typo-h-small-line-height); --footer-header-letter-spacing: var(--typo-h-small-letter-spacing); --footer-header-header-transform: var(--typo-h-small-text-transform); --footer-header-text-align: var(--typo-h-small-text-align); /* Social group */ --footer-social-group-margin: 0; --footer-social-group-align: center; --footer-social-group-direction: row; --footer-social-group-justify-content: center; /* Social Icon */ --footer-social-icons-color: var(--meta-swatch-colour-1); --footer-social-icons-margin: 0 16px 0 0; --footer-social-icons-size: 24px; /* Logo Container */ --footer-logo-container-align: center; --footer-logo-container-justify-content: center; --footer-logo-container-padding: 24px 0 24px 0; --footer-logo-container-text-align: center; /* Logo */ --footer-logo-width: 40px; --footer-logo-height: auto; /* Buttons */ --footer-btn-group-margin: 0; --footer-btn-group-columns: 3; --footer-btn-group-columns-m: 3; --footer-btn-group-columns-l: 3; --footer-btn-group-gutter: 16px 16px; --footer-btn-group-row-gutter: 16px; --footer-btn-group-column-gutter: 16px; --footer-btn-height: 100%; --footer-btn-margin: 0; --footer-btn-padding: 0; --footer-btn-bg-color: var(--meta-swatch-mono-10); --footer-btn-align: center; --footer-btn-border: none; --footer-btn-border-radius: var(--btn-border-radius); --footer-btn-label-padding: 4px; --footer-btn-label-color: var(--meta-swatch-colour-1); --footer-btn-label-font-face: var(--btn-label-face); --footer-btn-label-font-size: 13px; --footer-btn-label-font-weight: 400; --footer-btn-label-font-style: var(--btn-label-font-style); --footer-btn-label-line-height: var(--btn-label-line-height); --footer-btn-label-letter-spacing: var(--btn-label-letter-spacing); --footer-btn-label-text-transform: var(--btn-label-text-transform); --footer-btn-label-text-decoration: none; /* Text container */ --footer-text-container-margin: 24px 0; /* Text

        elements */ --footer-text-colour: var(--meta-swatch-mono-1); --footer-text-font-face: var(--typo-p-small-font-face); --footer-text-font-size: var(--typo-p-small-font-size); --footer-text-font-weight: var(--typo-p-small-font-weight); --footer-text-font-style: var(--typo-p-small-font-style); --footer-text-line-height: var(--typo-p-small-line-height); --footer-text-letter-spacing: var(--typo-p-small-letter-spacing); --footer-text-text-transform: var(--typo-p-small-text-transform); --footer-text-text-align: center; --footer-text-margin: 0 0 24px 0; /* Footer - Legal */ /* Container */ --footer-legal-padding: 24px 0; --footer-legal-padding-m: 48px 0; --footer-legal-padding-l: 64px 0; --footer-legal-background: var(--meta-swatch-mono-9); /* Text */ --footer-legal-text-margin: 0 auto 0.7rem; --footer-legal-text-colour: var(--meta-swatch-mono-1); --footer-legal-text-font-face: var(--typo-p-small-font-face); --footer-legal-text-font-size: var(--typo-p-small-font-size); --footer-legal-text-font-weight: var(--typo-p-small-font-weight); --footer-legal-text-font-style: var(--typo-p-small-font-style); --footer-legal-text-line-height: var(--typo-p-small-line-height); --footer-legal-text-letter-spacing: var(--typo-p-small-letter-spacing); --footer-legal-text-text-transform: var(--typo-p-small-text-transform); --footer-legal-text-text-align: center; --footer-legal-link-color: var(--meta-swatch-colour-12); /* Knowledge Section Container */ --knowledge-section-container-margin: 0 0 12px; /* Knowledge Item */ /* Container */ --knowledge-item-bg-colour: transparent; /* Indicator */ --knowledge-item-indicator-width: var(--pattern-indicator-width); --knowledge-item-indicator-on-colour: var(--meta-swatch-colour-11); --knowledge-item-indicator-off-colour: transparent; --knowledge-item-indicator-hover-colour: var(--meta-swatch-mono-9); /* Keylines */ --knowledge-item-keyline: none; --knowledge-item-keyline-last: none; --knowledge-item-keyline-margin: none; --knowledge-item-keyline-max-width: none; /* Button */ --knowledge-item-btn-height: 64px; --knowledge-item-btn-min-height: 64px; --knowledge-item-btn-max-width: 720px; --knowledge-item-btn-margin: 0 16px 12px 8px; --knowledge-item-btn-padding: 0 8px 0 16px; --knowledge-item-btn-bg-colour: var(--meta-swatch-mono-10); --knowledge-item-btn-border: none; --knowledge-item-btn-border-radius-first: var(--pattern-border-radius-m); --knowledge-item-btn-border-radius: var(--pattern-border-radius-m); --knowledge-item-btn-border-radius-last: var(--pattern-border-radius-m); --knowledge-item-btn-box-shadow: var(--pattern-elevation-low); /* Description */ /* Graphics layout */ /* Image layout */ /* Status icon layout */ /* Dynamic statuses (colours) */ /* Labels container */ --knowledge-item-labels-padding: 0; /* Label */ --knowledge-item-label-colour: var(--typo-p-small-colour); --knowledge-item-label-font-family: var(--typo-p-small-font-face); --knowledge-item-label-font-size: var(--typo-p-small-font-size); --knowledge-item-label-weight: var(--typo-p-small-font-weight); --knowledge-item-label-font-weight: var(--typo-p-small-font-weight); --knowledge-item-label-font-style: var(--typo-p-small-font-style); --knowledge-item-label-line-height: var(--typo-p-small-line-height); --knowledge-item-label-letter-spacing: var(--typo-p-small-letter-spacing); --knowledge-item-label-text-transform: var(--typo-p-small-text-transform); --knowledge-item-label-align: var(--typo-p-small-text-align); --knowledge-item-label-text-align: var(--typo-p-small-text-align); --knowledge-item-label-padding: 0; /* Status label */ --knowledge-item-status-label-display: none; /* Action icon */ --knowledge-item-action-bg-height: 32px; --knowledge-item-action-bg-width: 24px; --knowledge-item-action-bg-margin: auto 0px auto 12px; --knowledge-item-action-icon-color: var(--meta-swatch-colour-11); --knowledge-item-action-icon-size: var(--pattern-icon-size); /* Time stamp container */ /* Time label */ /* Time icon */ /* Knowledge Section Header */ /* Container */ --knowledge-section-margin: none; /* Keylines */ --knowledge-section-keyline-top-margin: none; --knowledge-section-keyline-top-first: none; --knowledge-section-keyline-top: none; --knowledge-section-keyline-bottom-margin: none; --knowledge-section-keyline-bottom: none; /* Icon */ --knowledge-section-icon-display: none; /* Heading */ --knowledge-section-heading-colour: var(--typo-h-medium-colour); --knowledge-section-heading-font-family: var(--typo-h-medium-font-face); --knowledge-section-heading-size: var(--typo-h-medium-font-size); --knowledge-section-heading-font-weight: var(--typo-h-medium-font-weight); --knowledge-section-heading-font-style: var(--typo-h-medium-font-style); --knowledge-section-heading-line-height: var(--typo-h-medium-line-height); --knowledge-section-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --knowledge-section-heading-text-transform: var(--typo-h-medium-text-transform); --knowledge-section-heading-text-align: var(--typo-h-medium-text-align); /* Sub heading */ --knowledge-section-sub-heading-colour: var(--meta-swatch-mono-5); --knowledge-section-sub-heading-font-family: var(--typo-p-small-font-face); --knowledge-section-sub-heading-size: var(--typo-p-small-font-size); --knowledge-section-sub-heading-font-weight: var(--typo-p-small-font-weight); --knowledge-section-sub-heading-font-style: var(--typo-p-small-font-style); --knowledge-section-sub-heading-line-height: var(--typo-p-small-line-height); --knowledge-section-sub-heading-letter-spacing: var(--typo-p-small-letter-spacing); --knowledge-section-sub-heading-text-transform: var(--typo-p-small-text-transform); --knowledge-section-sub-heading-text-align: var(--typo-p-small-text-align); /* Spacing */ --knowledge-section-spacer-top: 0; --knowledge-section-spacer-middle: 8px; --knowledge-section-spacer-bottom: 8px; /* Marketplace */ /* Container */ --marketplace-container-background: transparent; --marketplace-container-padding: 16px 0 0; /* Content container */ --marketplace-content-container-background: transparent; --marketplace-content-container-padding: 0; /* Grid container */ --marketplace-grid-container-background: transparent; --marketplace-grid-container-padding: 16px; --marketplace-grid-container-border-radius: 24px; --marketplace-grid-container-padding-ml: 48px 90px; --marketplace-grid-container-border-radius-ml: 24px; /* Grid */ --marketplace-grid-columns: 3; --marketplace-grid-rows: 3; --marketplace-grid-column-gap: 16px; --marketplace-grid-row-gap: 24px; --marketplace-grid-columns-ml: 3; --marketplace-grid-rows-ml: 3; --marketplace-grid-column-gap-ml: 90px; --marketplace-grid-row-gap-ml: 24px; /* Headings container */ --marketplace-headings-container-background: transparent; --marketplace-headings-container-padding: 0; /* Heading */ --marketplace-heading-colour: var(--typo-h-medium-colour); --marketplace-heading-font-face: var(--typo-h-medium-font-face); --marketplace-heading-font-size: var(--typo-h-medium-font-size); --marketplace-heading-font-weight: var(--typo-h-medium-font-weight); --marketplace-heading-font-style: var(--typo-h-medium-font-style); --marketplace-heading-line-height: var(--typo-h-medium-line-height); --marketplace-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --marketplace-heading-text-transform: var(--typo-h-medium-text-transform); --marketplace-heading-text-align: var(--typo-h-medium-text-align); --marketplace-heading-margin: var(--typo-h-medium-margin); /* Sub heading */ --marketplace-sub-heading-colour: var(--typo-p-medium-colour); --marketplace-sub-heading-font-face: var(--typo-p-medium-font-face); --marketplace-sub-heading-font-size: var(--typo-p-medium-font-size); --marketplace-sub-heading-font-weight: var(--typo-p-medium-font-weight); --marketplace-sub-heading-font-style: var(--typo-p-medium-font-style); --marketplace-sub-heading-line-height: var(--typo-p-medium-line-height); --marketplace-sub-heading-letter-spacing: var(--typo-p-medium-letter-spacing); --marketplace-sub-heading-text-transform: var(--typo-p-medium-text-transform); --marketplace-sub-heading-text-align: var(--typo-p-medium-text-align); --marketplace-sub-heading-margin: var(--typo-p-medium-margin); /* Marketplace Grid Item */ /* Image container */ --marketplace-grid-item-image-width: 79px; --marketplace-grid-item-image-height: auto; --marketplace-grid-item-image-padding: 0; --marketplace-grid-item-image-border-radius: 12px; --marketplace-grid-item-image-margin: 0; --marketplace-grid-item-image-width-ml: 60%; --marketplace-grid-item-image-height-ml: auto; --marketplace-grid-item-image-padding-ml: 0; --marketplace-grid-item-image-border-radius-ml: 0; /* Image container - Partner */ --marketplace-grid-item-image-partner-background: transparent; --marketplace-grid-item-image-partner-border: 4px solid var(--meta-swatch-mono-10); --marketplace-grid-item-image-partner-box-shadow: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4)); /* Image container - Group */ --marketplace-grid-item-image-group-background: transparent; --marketplace-grid-item-image-group-border: 4px solid var(--meta-swatch-mono-10); --marketplace-grid-item-image-group-box-shadow: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4)); /* Label */ --marketplace-grid-item-label-colour: var(--meta-swatch-mono-1); --marketplace-grid-item-label-font-family: var(--typo-p-small-font-face); --marketplace-grid-item-label-font-size: var(--typo-p-small-font-size); --marketplace-grid-item-label-font-weight: 500; --marketplace-grid-item-label-font-style: var(--typo-p-small-font-style); --marketplace-grid-item-label-line-height: 1.2; --marketplace-grid-item-label-letter-spacing: var(--typo-p-small-letter-spacing); --marketplace-grid-item-label-text-transform: var(--typo-p-small-text-transform); --marketplace-grid-item-label-text-align: center; --marketplace-grid-item-label-margin: 8px 0 0 0; --marketplace-grid-item-label-text-shadow: none; --marketplace-grid-item-label-ml-colour: var(--meta-swatch-mono-1); --marketplace-grid-item-label-ml-font-family: var(--typo-p-small-font-face); --marketplace-grid-item-label-ml-font-size: 16px; --marketplace-grid-item-label-ml-font-weight: 500; --marketplace-grid-item-label-ml-font-style: var(--typo-p-small-font-style); --marketplace-grid-item-label-ml-line-height: 1.2; --marketplace-grid-item-label-ml-letter-spacing: var(--typo-p-small-letter-spacing); --marketplace-grid-item-label-ml-text-transform: var(--typo-p-small-text-transform); --marketplace-grid-item-label-ml-text-align: center; --marketplace-grid-item-label-ml-margin: 8px 0 0 0; --marketplace-grid-item-label-ml-text-shadow: none; /* Partner Label */ --marketplace-grid-partner-colour: var(--meta-swatch-mono-1); --marketplace-grid-partner-font-family: var(--typo-p-small-font-face); --marketplace-grid-partner-font-size: var(--typo-p-medium-font-size); --marketplace-grid-partner-font-weight: 500; --marketplace-grid-partner-font-style: var(--typo-p-small-font-style); --marketplace-grid-partner-line-height: 1.2; --marketplace-grid-partner-letter-spacing: var(--typo-p-small-letter-spacing); --marketplace-grid-partner-text-transform: var(--typo-p-small-text-transform); --marketplace-grid-partner-text-align: center; --marketplace-grid-partner-margin: 8px 0 0 0; --marketplace-grid-partner-text-shadow: none; --marketplace-grid-partner-ml-colour: var(--meta-swatch-mono-1); --marketplace-grid-partner-ml-font-family: var(--typo-p-small-font-face); --marketplace-grid-partner-ml-font-size: var(--typo-p-small-font-size); --marketplace-grid-partner-ml-font-weight: 500; --marketplace-grid-partner-ml-font-style: var(--typo-p-small-font-style); --marketplace-grid-partner-ml-line-height: 1.2; --marketplace-grid-partner-ml-letter-spacing: var(--typo-p-small-letter-spacing); --marketplace-grid-partner-ml-text-transform: var(--typo-p-small-text-transform); --marketplace-grid-partner-ml-text-align: center; --marketplace-grid-partner-ml-margin: 8px 0 0 0; --marketplace-grid-partner-ml-text-shadow: none; /* Partner Description */ /* Marketplace Grid Badge */ /* Container */ --marketplace-grid-badge-padding: 0 4px 0 2px; --marketplace-grid-badge-border-radius: 12px; /* Icon */ --marketplace-grid-badge-icon-size: 18px; --marketplace-grid-badge-icon-margin: 0 2px 0 0; /* Label */ --marketplace-grid-badge-label-font-size: var(--typo-p-small-font-size); --marketplace-grid-badge-label-font-face: var(--typo-p-small-font-face); --marketplace-grid-badge-label-font-weight: var(--typo-p-small-font-weight); --marketplace-grid-badge-label-font-style: var(--typo-p-small-font-style); --marketplace-grid-badge-label-line-height: 1; --marketplace-grid-badge-label-letter-spacing: var(--typo-p-small-letter-spacing); --marketplace-grid-badge-label-text-transform: var(--typo-p-small-text-transform); --marketplace-grid-badge-label-text-align: left; --marketplace-grid-badge-label-padding: 0; /* State - Positive */ --marketplace-grid-badge-positive-background: var(--meta-swatch-mono-10); --marketplace-grid-badge-positive-border: none; --marketplace-grid-badge-positive-box-shadow: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4)); --marketplace-grid-badge-positive-icon-color: var(--meta-swatch-colour-9); --marketplace-grid-badge-label-positive-colour: var(--meta-swatch-mono-10); /* State - Negative */ --marketplace-grid-badge-negative-background: var(--meta-swatch-mono-10); --marketplace-grid-badge-negative-border: none; --marketplace-grid-badge-negative-box-shadow: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4)); --marketplace-grid-badge-negative-icon-color: var(--meta-swatch-colour-12); --marketplace-grid-badge-label-negative-colour: var(--meta-swatch-mono-10); /* State - Unknown */ --marketplace-grid-badge-unknown-background: var(--meta-swatch-mono-10); --marketplace-grid-badge-unknown-border: none; --marketplace-grid-badge-unknown-box-shadow: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.4)); --marketplace-grid-badge-unknown-icon-color: var(--meta-swatch-colour-11); --marketplace-grid-badge-label-unknown-colour: var(--meta-swatch-mono-10); /* Marketplace Modal Badge */ /* Container */ --marketplace-modal-badge-padding: 0 4px 0 2px; --marketplace-modal-badge-border-radius: 12px; /* Icon */ --marketplace-modal-badge-icon-size: 18px; --marketplace-modal-badge-icon-margin: 0 2px 0 0; /* Label */ --marketplace-modal-badge-label-font-size: var(--typo-p-small-font-size); --marketplace-modal-badge-label-font-face: var(--typo-p-small-font-face); --marketplace-modal-badge-label-font-weight: var(--typo-p-small-font-weight); --marketplace-modal-badge-label-font-style: var(--typo-p-small-font-style); --marketplace-modal-badge-label-line-height: 1; --marketplace-modal-badge-label-letter-spacing: var(--typo-p-small-letter-spacing); --marketplace-modal-badge-label-text-transform: var(--typo-p-small-text-transform); --marketplace-modal-badge-label-text-align: left; --marketplace-modal-badge-label-padding: 0 0 3px 0; /* State - Positive */ --marketplace-modal-badge-positive-background: var(--meta-swatch-mono-5); --marketplace-modal-badge-positive-border: 1px solid var(--meta-swatch-colour-3); --marketplace-modal-badge-positive-box-shadow: none; --marketplace-modal-badge-positive-icon-color: var(--meta-swatch-colour-9); --marketplace-modal-badge-label-positive-colour: var(--meta-swatch-mono-10); /* State - Negative */ --marketplace-modal-badge-negative-background: var(--meta-swatch-mono-5); --marketplace-modal-badge-negative-border: 1px solid var(--meta-swatch-colour-4); --marketplace-modal-badge-negative-box-shadow: none; --marketplace-modal-badge-negative-icon-color: var(--meta-swatch-colour-12); --marketplace-modal-badge-label-negative-colour: var(--meta-swatch-mono-10); /* State - Unknown */ --marketplace-modal-badge-unknown-background: var(--meta-swatch-mono-5); --marketplace-modal-badge-unknown-border: 1px solid var(--meta-swatch-colour-1); --marketplace-modal-badge-unknown-box-shadow: none; --marketplace-modal-badge-unknown-icon-color: var(--meta-swatch-colour-11); --marketplace-modal-badge-label-unknown-colour: var(--meta-swatch-mono-10); /* Marketplace Group Item */ /* Container */ --marketplace-group-item-background: transparent; --marketplace-group-item-padding: 8px 16px; /* Image */ --marketplace-group-item-image-width: 32px; --marketplace-group-item-image-height: 32px; --marketplace-group-item-image-size: cover; --marketplace-group-item-image-background: transparent; --marketplace-group-item-image-border-radius: 16px; --marketplace-group-item-image-border: none; --marketplace-group-item-image-margin: 0 12px 0 0; /* Heading */ --marketplace-group-item-heading-colour: var(--typo-h-small-colour); --marketplace-group-item-heading-font-size: var(--typo-h-small-font-size); --marketplace-group-item-heading-font-face: var(--typo-h-small-font-face); --marketplace-group-item-heading-font-weight: var(--typo-h-small-font-weight); --marketplace-group-item-heading-font-style: var(--typo-h-small-font-style); --marketplace-group-item-heading-line-height: var(--typo-h-small-line-height); --marketplace-group-item-heading-letter-spacing: var(--typo-h-small-letter-spacing); --marketplace-group-item-heading-text-transform: var(--typo-h-small-text-transform); --marketplace-group-item-heading-text-align: var(--typo-h-small-text-align); --marketplace-group-item-heading-margin: var(--typo-h-small-margin); /* Explainer */ --marketplace-group-item-explainer-colour: var(--typo-p-small-colour); --marketplace-group-item-explainer-font-size: var(--typo-p-small-font-size); --marketplace-group-item-explainer-font-face: var(--typo-p-small-font-face); --marketplace-group-item-explainer-font-weight: var(--typo-p-small-font-weight); --marketplace-group-item-explainer-font-style: var(--typo-p-small-font-style); --marketplace-group-item-explainer-line-height: var(--typo-p-small-line-height); --marketplace-group-item-explainer-letter-spacing: var(--typo-p-small-letter-spacing); --marketplace-group-item-explainer-text-transform: var(--typo-p-small-text-transform); --marketplace-group-item-explainer-text-align: var(--typo-p-small-text-align); --marketplace-group-item-explainer-margin: var(--typo-p-small-margin); /* Nested badge block */ /* Icon container */ --marketplace-group-item-icon-container-display: flex; --marketplace-group-item-icon-container-size: 64px; --marketplace-group-item-icon-container-background: var(--btn-minor-icon-bg-color); --marketplace-group-item-icon-container-margin: 0 0 0 8px; --marketplace-group-item-icon-container-border-radius: var(--btn-icon-border-radius); --marketplace-group-item-icon-container-border: var(--btn-minor-icon-border); /* Icon */ --marketplace-group-item-icon-size: 24px; --marketplace-group-item-icon-colour: var(--btn-minor-icon-color); /* Keyline top */ /* Keyline bottom */ /* Nav bars - App */ /* Logo */ --nav-top-logo-width: auto; --nav-top-logo-height: 48px; /* Top background */ --theme-nav-top-bg-colour: var(--meta-swatch-mono-5); --app-top-nav-height: 60px; --theme-nav-top-box-shadow: var(--pattern-button-box-shadow); /* Top keyline */ --theme-nav-top-keyline: none; /* Top indicator */ --theme-nav-top-indicator-off-colour: transparent; --theme-nav-top-indicator-on-colour: var(--meta-swatch-colour-12); --theme-nav-top-indicator-hover-colour: var(--meta-swatch-colour-12); /* Top icons */ --nav-top-icon-size: var(--pattern-icon-size); --nav-top-icon-position: 10px; --theme-nav-top-icon-bg-colour: transparent; --theme-nav-top-icon-off-colour: var(--meta-swatch-colour-1); --theme-nav-top-icon-on-colour: var(--meta-swatch-colour-1); /* Top labels */ --nav-top-label-position: 35px; --nav-top-label-font-family: 'rubik'; --nav-top-label-font-size: 14px; --nav-top-label-font-weight: normal; --nav-top-label-font-style: normal; --nav-top-label-line-height: 1; --nav-top-label-letter-spacing: 0; --nav-top-label-text-transform: none; --nav-top-label-text-align: center; --theme-nav-top-label-off-colour: var(--meta-swatch-mono-6); --theme-nav-top-label-on-colour: var(--meta-swatch-colour-1); /* Bottom background */ --theme-nav-bottom-bg-colour: var(--meta-swatch-mono-3); /* Bottom keyline */ --theme-nav-bottom-keyline: none; /* Bottom indicator */ --theme-nav-bottom-indicator-off-colour: transparent; --theme-nav-bottom-indicator-on-colour: var(--meta-swatch-colour-1); --theme-nav-bottom-indicator-hover-colour: var(--meta-swatch-colour-1); /* Bottom icons */ --nav-bottom-icon-size: var(--pattern-icon-size); --nav-bottom-icon-position: 6px; --theme-nav-bottom-icon-bg-colour: transparent; --theme-nav-bottom-icon-off-colour: var(--meta-swatch-mono-6); --theme-nav-bottom-icon-on-colour: var(--meta-swatch-colour-1); /* Bottom labels */ --nav-bottom-label-position: 31px; --nav-bottom-label-font-size: 12px; --nav-bottom-label-font-style: normal; --nav-bottom-label-text-transform: none; --nav-bottom-label-text-align: center; --theme-nav-bottom-label-off-colour: var(--meta-swatch-mono-6); --theme-nav-bottom-label-on-colour: var(--meta-swatch-colour-1); /* Nav bar - Web */ /* Block container */ --nav-bar-web-background: var(--meta-swatch-mono-5); --nav-bar-web-background-m: var(--meta-swatch-mono-5); --nav-bar-web-background-l: var(--meta-swatch-mono-5); --nav-bar-web-box-shadow: var(--pattern-button-box-shadow); --nav-bar-web-border-bottom: none; --nav-bar-web-grid-max-width: 1200px; --app-top-nav-height: 60px; /* Content */ /* Logo */ --nav-bar-web-logo-height: 32px; --nav-bar-web-logo-height-m: 32px; --nav-bar-web-logo-height-l: 32px; /* Icons container */ /* Icons -> Profile */ /* Profile text */ /* Icons -> Icon */ --nav-bar-web-icon-size: var(--pattern-icon-size); --nav-bar-web-icon-menu-color: var(--meta-swatch-colour-1); --nav-bar-web-icon-close-color: var(--meta-swatch-colour-1); /* Links container */ --nav-bar-web-links-gap: 8px; --nav-bar-web-links-gap-m: 48px; --nav-bar-web-links-gap-l: 48px; /* Links container collapsed*/ /* Link container */ --nav-bar-web-link-border-bottom: 1px solid var(--meta-swatch-mono-3); --nav-bar-web-link-border-bottom-m: 1px solid var(--meta-swatch-mono-3); --nav-bar-web-link-border-bottom-l: 1px solid var(--meta-swatch-mono-3); --nav-bar-web-logo-border-bottom: none; --nav-bar-web-link-border-top: 1px solid var(--meta-swatch-mono-3); --nav-bar-web-link-border-top-m: 1px solid var(--meta-swatch-mono-3); --nav-bar-web-link-border-top-l: 1px solid var(--meta-swatch-mono-3); --nav-bar-web-link-height: 64px; /* Link label */ --nav-bar-web-link-font-size: 16px; --nav-bar-web-link-font-size-m: 16px; --nav-bar-web-link-font-size-l: 16px; --nav-bar-web-link-colour: var(--meta-swatch-mono-1); --nav-bar-web-link-colour-hover: var(--meta-swatch-colour-1); --nav-bar-web-link-text-decoration-hover: none; --nav-bar-web-link-colour-active: var(--meta-swatch-colour-1); --nav-bar-web-link-font-family: 'rubik'; --nav-bar-web-link-font-weight: 400; --nav-bar-web-link-font-style: normal; --nav-bar-web-link-line-height: 1.2; --nav-bar-web-link-letter-spacing: var(--pattern-letter-spacing-body); --nav-bar-web-link-text-transform: none; --nav-bar-web-link-current-label-colour: var(--meta-swatch-colour-1); --nav-bar-web-link-current-label-colour-hover: var(--meta-swatch-colour-1); --nav-bar-web-link-label-colour-hover: var(--meta-swatch-colour-1); /* Page Actions */ /* Container */ --page-actions-margin: 0; --page-actions-padding: 16px 0; --page-actions-border-top: none; --page-actions-border-bottom: none; --page-actions-gap: 16px; /* Label */ --page-actions-label-colour: var(--meta-swatch-mono-3); --page-actions-label-font-size: 13px; --page-actions-label-font-family: 'rubik'; --page-actions-label-font-weight: 400; --page-actions-label-font-style: normal; --page-actions-label-line-height: 1.2; --page-actions-label-letter-spacing: 0; --page-actions-label-text-transform: none; --page-actions-label-text-align: left; /* Buttons container */ --page-actions-buttons-flex-direction: column; --page-actions-buttons-flex-direction-m: row; --page-actions-buttons-align-items: flex-start; /* Button */ --page-actions-button-padding: 8px; --page-actions-button-background: var(--meta-swatch-mono-10); --page-actions-button-border: none; --page-actions-button-border-radius: 16px; --page-actions-button-box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); --page-actions-button-align-self: stretch; /* Button label */ --page-actions-button-label-colour: var(--meta-swatch-mono-3); --page-actions-button-label-font-size: 13px; --page-actions-button-label-font-family: 'rubik'; --page-actions-button-label-font-weight: 400; --page-actions-button-label-font-style: normal; --page-actions-button-label-line-height: 1.2; --page-actions-button-label-letter-spacing: 0; --page-actions-button-label-text-transform: none; --page-actions-button-label-text-align: center; /* Button icon */ --page-actions-button-icon-size: 0px; --page-actions-button-icon-colour: transparent; /* Pager indicators */ /* Repeater */ /* Block Container */ --repeater-padding: 0 0 24px; --repeater-margin: 0; --repeater-background: #F8F8F8; /* Content Container */ /* Heading */ --repeater-heading-font-size: 24px; --repeater-heading-font-family: 'rubik'; --repeater-heading-font-weight: 500; --repeater-heading-font-style: normal; --repeater-heading-line-height: 1.2; --repeater-heading-letter-spacing: 0; --repeater-heading-text-transform: none; --repeater-heading-text-padding: 0; --repeater-heading-text-margin: 0 0 24px; --repeater-heading-text-align: left; /* Sub heading */ --repeater-sub-heading-font-size: 16px; --repeater-sub-heading-font-family: 'rubik'; --repeater-sub-heading-font-weight: normal; --repeater-sub-heading-font-style: normal; --repeater-sub-heading-line-height: 1.2; --repeater-sub-heading-letter-spacing: 0; --repeater-sub-heading-text-transform: none; --repeater-sub-heading-text-padding: 0; --repeater-sub-heading-text-margin: 0 0 16px; /* Empty state paragraph */ --empty-p-colour: var(--meta-swatch-mono-3); --empty-p-font-size: 16px; --empty-p-font-family: 'rubik'; --empty-p-font-weight: normal; --empty-p-font-style: normal; --empty-p-line-height: 1.2; --empty-p-letter-spacing: 0; --empty-p-text-transform: none; --empty-p-text-align: center; --empty-p-padding: 40px 0 80px; --empty-p-background: transparent; --empty-p-border-radius: var(--pattern-border-radius); /* Dots */ --repeater-dots-padding: 24px 0 0; --repeater-dot-padding: 5px; --repeater-dot-size: 12px; /* Arrows - NEED REFACTOR AND ADD PROPER VARS */ /* Link */ --repeater-link-colour: var(--meta-swatch-mono-3); --repeater-link-font-size: 16px; --repeater-link-font-family: 'rubik'; --repeater-link-font-weight: 500; --repeater-link-font-style: normal; --repeater-link-line-height: 1.2; --repeater-link-letter-spacing: 0; --repeater-link-text-transform: none; --repeater-link-margin: 0 auto; --repeater-link-padding: 24px 0; /* Carousel Container */ --repeater-carousel-container-padding: 0; /* Items Container */ --repeater-items-padding-top: 0px; --repeater-items-padding-right: 0px; --repeater-items-padding-bottom: 0px; --repeater-items-padding-left: 0px; --repeater-items-margin: 0; --repeater-items-columns: 1; --repeater-items-col-gap: 24px; --repeater-items-row-gap: 24px; --repeater-items-columns-m: 2; --repeater-items-columns-l: 3; /* Item */ --repeater-item-margin: 0 6px; --repeater-item-slider-gap: 16px; /* Button icon */ --repeater-pager-icons-border-radius: 50%; --repeater-pager-icons-box-shadow: var(--pattern-button-box-shadow); --repeater-pager-icons-padding: 16px; --repeater-pager-icons-padding-m: 16px; --repeater-pager-icons-padding-l: 16px; /* Option 1 */ /* White on pink */ --opt1-block-background: #F8F8F8; --opt1-content-background: #F8F8F8; --opt1-heading-color: var(--meta-swatch-mono-1); --opt1-sub-heading-color: var(--meta-swatch-mono-1); --opt1-empty-p-colour: var(--meta-swatch-mono-1); --opt1-empty-p-background: var(--meta-swatch-mono-7); --opt1-link-color: var(--meta-swatch-mono-5); --opt1-pager-icons-color: var(--meta-swatch-colour-1); --opt1-pager-dot-on-color: var(--meta-swatch-colour-1); --opt1-pager-dot-off-color: var(--meta-swatch-dark-2); --opt1-pager-icons-border: 1.5px solid var(--meta-swatch-colour-1); --opt1-pager-icons-background: var(--meta-swatch-mono-5); /* Option 2 */ /* Option 3 */ /* Option 4 */ /* Option 5 */ /* Sidebar */ /* Page header */ --sidebar-page-header-keyline: var(--effect-keyline-width) solid var(--pattern-keyline-colour); --sidebar-page-template-keyline: var(--effect-keyline-width) solid var(--pattern-keyline-colour); /* Page footer */ --sidebar-page-footer-keyline: var(--effect-keyline-width) solid var(--pattern-keyline-colour); /* Table List */ /* Item */ --tl-icon-margin: 0; --tl-icon-padding: 22px 0; --tl-icon-keyline: 1px solid var(--meta-swatch-mono-8); --tl-item-margin: 0; --tl-item-padding: 20px 16px; --tl-item-keyline: 1px solid var(--meta-swatch-mono-8); --tl-item-border-width: 0 0 1px 0; --tl-item-border-color: var(--meta-swatch-mono-8); --tl-item-border-style: solid; --tl-item-direction: row; --tl-item-align-items: center; --tl-item-justify-content: space-between; /* Content container */ /* Label container */ /* Label */ --tl-item-label-colour: var(--typo-p-medium-colour); --tl-item-label-font-family: var(--typo-p-medium-font-face); --tl-item-label-font-size: var(--typo-p-medium-font-size); --tl-item-label-font-weight: var(--typo-p-medium-font-weight); --tl-item-label-font-style: var(--typo-p-medium-font-style); --tl-item-label-line-height: var(--typo-p-medium-line-height); --tl-item-label-letter-spacing: var(--typo-p-medium-letter-spacing); --tl-item-label-text-transform: var(--typo-p-medium-text-transform); --tl-item-label-text-align: left; /* Badge */ /* Sub header */ /* Label Info */ /* Value */ --tl-item-value-colour: var(--typo-p-medium-colour); --tl-item-value-font-family: var(--typo-p-medium-font-face); --tl-item-value-font-size: var(--typo-p-medium-font-size); --tl-item-value-font-weight: 500; --tl-item-value-font-style: var(--typo-p-medium-font-style); --tl-item-value-line-height: var(--typo-p-medium-line-height); --tl-item-value-letter-spacing: var(--typo-p-medium-letter-spacing); --tl-item-value-text-transform: var(--typo-p-medium-text-transform); --tl-item-value-text-align: var(--typo-p-medium-text-align); /* Icon */ --tl-item-icon-bg-size: var(--pattern-icon-size); --tl-item-icon-padding: 0; --tl-item-icon-margin: 0 0 0 8px; --tl-item-icon-border-radius: 0; --tl-item-icon-bg-colour: transparent; --tl-item-icon-colour: var(--meta-swatch-colour-11); --tl-item-icon-size: 24px; /* Targeted Links */ /* Block container */ --targeted-links-padding: 24px 0; --targeted-links-padding-m: 24px 0; --targeted-links-padding-l: 24px 0; /* Grid container */ --targeted-links-grid-columns: 1; --targeted-links-grid-col-gap: 16px; --targeted-links-grid-row-gap: 16px; --targeted-links-grid-columns-m: 3; --targeted-links-grid-col-gap-m: 16px; --targeted-links-grid-row-gap-m: 16px; --targeted-links-grid-columns-l: 3; --targeted-links-grid-col-gap-l: 16px; --targeted-links-grid-row-gap-l: 16px; --targeted-links-slider-gap: 12px; /* Heading block overrides */ /* Carousel Nav */ --targeted-links-dots-padding: 12px 0 0; --targeted-links-dots-gap: 5px; --targeted-links-dots-size: 12px; --targeted-links-dots-on-color: var(--meta-swatch-colour-11); --targeted-links-dots-off-color: var(--meta-swatch-mono-7); --targeted-links-button-border: 2px solid var(--meta-swatch-colour-1); --targeted-links-button-icon-size: var(--pattern-icon-size); --targeted-links-button-icon-color: var(--meta-swatch-colour-11); /* Whole block style options */ /* Option 1 */ --targeted-links-grid-columns-opt1: 1; /* Option 2 */ --targeted-links-background-opt2: #F6F6F6; /* Option 3 */ /* Item styles (old, but still in use) */ /* Item container */ --targeted-links-item-background: var(--meta-swatch-mono-10); --targeted-links-item-border: 1px solid var(--meta-swatch-mono-7); --targeted-links-item-border-radius: 5px; --targeted-links-item-padding: 0; --targeted-links-item-padding-m: 0; --targeted-links-item-padding-l: 0; /* Cover image */ --targeted-links-cover-image-height: auto; --targeted-links-cover-image-height-m: auto; --targeted-links-cover-image-height-l: auto; --targeted-links-item-cover-image-height: auto; --targeted-links-item-cover-image-height-m: auto; --targeted-links-item-cover-image-height-l: auto; /* Body */ /* Header */ /* Icon */ /* Heading */ --targeted-links-item-heading-colour: var(--meta-swatch-mono-3); --targeted-links-item-heading-font-family: 'rubik'; --targeted-links-item-heading-font-weight: 500; --targeted-links-item-heading-font-style: normal; --targeted-links-item-heading-line-height: 1.2; --targeted-links-item-heading-letter-spacing: -0.03rem; --targeted-links-item-heading-text-transform: none; --targeted-links-item-heading-text-align: left; --targeted-links-item-heading-font-size: 20px; --targeted-links-item-heading-font-size-m: 20px; --targeted-links-item-heading-font-size-l: 20px; --targeted-links-item-heading-padding: 0 0 16px 0; /* Paragraph */ --targeted-links-item-p-colour: var(--typo-p-medium-colour); --targeted-links-item-p-font-family: var(--typo-p-medium-font-face); --targeted-links-item-p-font-weight: var(--typo-p-medium-font-weight); --targeted-links-item-p-font-style: var(--typo-p-medium-font-style); --targeted-links-item-p-line-height: var(--typo-p-medium-line-height); --targeted-links-item-p-letter-spacing: var(--typo-p-medium-letter-spacing); --targeted-links-item-p-text-transform: var(--typo-p-medium-text-transform); --targeted-links-item-p-font-size: var(--typo-p-medium-font-size); /* Inline image */ /* Buttons container */ --targeted-links-item-buttons-align-items: left; --targeted-links-item-buttons-align-items-m: left; --targeted-links-item-buttons-align-items-l: left; /* Button block overrides */ --targeted-links-item-button-margin: 0 auto 0 0; --targeted-links-item-button-min-width: 100%; --targeted-links-item-button-max-width: 100%; --targeted-links-item-button-max-width-m: 100%; --targeted-links-item-button-max-width-l: 100%; /* Item style option overrides */ /* Option 1 */ --targeted-links-item-background-opt1: var(--meta-swatch-mono-10); --targeted-links-item-heading-colour-opt1: var(--card-heading-colour); --targeted-links-item-p-colour-opt1: var(--card-excerpt-colour); --targeted-links-image-padding-opt1: 16px; --targeted-links-image-height-opt1: auto; --targeted-links-image-object-fit-opt1: cover; --targeted-links-item-border-opt1: 1px solid var(--meta-swatch-mono-7); --targeted-links-item-border-radius-opt1: 5px; --targeted-links-item-heading-font-size-opt1: 20px; --targeted-links-item-heading-font-size-s-opt1: 20px; --targeted-links-item-heading-font-size-l-opt1: 20px; /* Option 2 */ --targeted-links-item-background-opt2: var(--meta-swatch-mono-10); --targeted-links-item-heading-colour-opt2: var(--card-heading-colour); --targeted-links-item-p-colour-opt2: var(--card-excerpt-colour); --targeted-links-image-padding-opt2: 0; --targeted-links-item-border-opt2: none; --targeted-links-item-heading-font-size-opt2: 20px; --targeted-links-item-heading-font-size-s-opt2: 20px; --targeted-links-item-heading-font-size-l-opt2: 20px; --targeted-links-item-p-font-size-opt2: 16px; --targeted-links-item-p-font-size-s-opt2: 16px; --targeted-links-item-p-font-size-l-opt2: 16px; /* Option 3 */ --targeted-links-item-background-opt3: #F6F6F6; --targeted-links-item-heading-colour-opt3: var(--card-heading-colour); --targeted-links-item-p-colour-opt3: var(--card-excerpt-colour); --targeted-links-item-heading-font-size-opt3: 20px; --targeted-links-item-heading-font-size-s-opt3: 20px; --targeted-links-item-heading-font-size-l-opt3: 20px; /* Option 4 */ /* Option 5 */ /* Targeted Links Item */ /* Option 1 */ /* New external container */ /* Item container */ /* Cover image */ /* Body */ /* Header */ /* Icon */ /* External Heading */ /* Heading */ /* Paragraph */ /* Paragraph links */ /* Inline image */ /* Buttons container */ /* Button block overrides */ /* Option 2 */ /* New external container */ /* Item container */ /* Cover image */ /* Body */ /* Header */ /* Icon */ /* External Heading */ /* Heading */ /* Paragraph */ /* Paragraph links */ /* Inline image */ /* Buttons container */ /* Button block overrides */ /* Option 3 */ /* New external container */ /* Item container */ /* Cover image */ /* Body */ /* Header */ /* Icon */ /* External Heading */ /* Heading */ /* Paragraph */ /* Paragraph links */ /* Inline image */ /* Buttons container */ /* Button block overrides */ /* Option 4 */ /* New external container */ /* Item container */ /* Cover image */ /* Body */ /* Header */ /* Icon */ /* External Heading */ /* Heading */ /* Paragraph */ /* Paragraph links */ /* Inline image */ /* Buttons container */ /* Button block overrides */ /* Option 5 */ /* New external container */ /* Item container */ /* Cover image */ /* Body */ /* Header */ /* Icon */ /* External Heading */ /* Heading */ /* Paragraph */ /* Paragraph links */ /* Inline image */ /* Buttons container */ /* Button block overrides */ /* Tools */ /* Accordion Result */ /* Heading */ /* Status indicator */ /* Button block overrides */ /* Heading */ /* Status indicator */ /* Button block overrides */ /* Borrowing Power Result */ /* Block Container */ /* Inner container */ /* Content container */ /* Columns container */ /* Dataviz */ /* Dataviz icons */ /* Dataviz labels */ /* Dataviz values */ /* Breakdown heading */ /* Also style Sub block / Breakdown card */ /* Controls container */ /* Controls heading */ /* Controls list */ /* Segmented label */ /* Brighter Smile Survey Result */ /* Description */ /* Message */ /* Total */ /* Breakdown container */ /* Breakdown item */ /* Icon container */ /* Icon */ /* Breakdown item label */ /* Breakdown item value */ /* Budget Result */ /* Block container */ /* Message */ /* Message Header */ /* Message Icon */ /* Message Heading */ /* Message Text */ /* Breakdowns */ /* Total & income */ /* Total */ /* Income */ /* Spending */ /* Table */ /* Row */ /* Row Labels */ /* Row Label */ /* Row Status */ /* Row Status Icon */ /* Row Status Label */ /* Row Values */ /* Row Value */ /* Row Calc Value */ /* Chart background defaults */ --chart-container-padding: 0; --chart-container-background-color: transparent; --chart-container-box-shadow: none; --chart-container-border: none; --chart-container-border-radius: 0; --chart-value-colour: var(--typo-form-label-colour); --chart-value-font-face: var(--typo-form-label-font-face); --chart-value-font-size: var(--typo-form-label-font-size); --chart-value-font-weight: var(--typo-form-label-font-weight); --chart-value-font-style: var(--typo-form-label-font-style); --chart-value-line-height: var(--typo-form-label-line-height); --chart-value-letter-spacing: var(--typo-form-label-letter-spacing); --chart-value-text-transform: var(--typo-form-label-text-transform); --chart-value-text-align: var(--typo-form-label-text-align); --chart-gridlines-h-container-padding: 0 4px; --chart-gridlines-v-container-padding: 4px 0; --chart-gridlines-h-container-margin: 4px; --chart-gridlines-v-container-margin: 4px; --chart-gridlines-colour: var(--meta-swatch-mono-8); --chart-gridlines-width: 1px; --chart-gridlines-dashoffset: 0; /* Carbon Calculator Result */ /* Block container */ /* Content container */ /* Dataviz container */ /* Dataviz info icon */ /* Dataviz heading */ /* Dataviz sub heading */ /* Dataviz chart container */ /* Dataviz chart label */ /* Dataviz chart value */ /* Dataviz chart bar */ /* Dataviz footer */ /* Cards container */ /* Cards heading */ /* Cards items container */ /* Card */ /* Card icon */ /* Card heading */ /* Card value */ /* Card footer */ /* Carbon Calculator Widget */ /* Block container */ /* Header */ /* Content container */ /* Cards */ /* Card */ /* Card heading */ /* Dataviz */ /* Dataviz headings */ /* Dataviz bars */ /* Dataviz values */ /* Dataviz measures */ /* Dataviz icon */ /* Message container */ /* Message words */ /* Message heading */ /* Message sub heading */ /* Message icon */ /* Climate Persona Result */ /* Block container */ /* Content container */ /* Heading */ /* Card container */ /* Card Header */ /* Card Header icon */ /* Card Heading */ /* Card Sub Heading */ /* Dataviz container */ /* Dataviz info icon */ /* Dataviz heading */ /* Dataviz sub heading */ /* Dataviz chart container */ /* Dataviz chart value */ /* Dataviz chart label */ /* Dataviz chart bar */ /* Dataviz footer */ /* Deposit Builder */ /* Block container */ /* Deposit Builder Result */ /* Block Container */ /* Inner container */ /* Block Container */ /* Chart container */ /* FF Messages Widget */ /* Block container */ /* Content container */ --message-container-flex-direction: row; --message-container-background: var(--meta-swatch-mono-10); --message-container-padding: 16px; --message-container-padding-m: 32px 0; --message-container-padding-l: 48px 0; /* Grid container */ --message-content-gap: 12px; /* Icon layout */ --message-icon-bg-padding: 12px; --message-icon-bg-align-items: center; --message-icon-bg-justify-content: flex-start; --message-icon-bg-border-radius: 10px; --message-icon-size: var(--pattern-icon-size); --message-icon-container-align-items: center; --message-icon-container-justify-content: flex-start; /* Labels */ --message-label-font-family: var(--typo-p-medium-font-face); --message-label-font-size: var(--typo-p-medium-font-size); --message-label-font-weight: var(--typo-p-medium-font-weight); --message-label-font-style: var(--typo-p-medium-font-style); --message-label-line-height: var(--typo-p-medium-line-height); --message-label-letter-spacing: var(--typo-p-medium-letter-spacing); --message-label-text-transform: var(--typo-p-medium-text-transform); --message-label-text-align: var(--typo-p-medium-text-align); --message-label-margin: 0; --message-label-padding: 10px 12px; /* Positive message */ --message-positive-icon-bg-background: var(--meta-swatch-colour-11); --message-positive-icon-color: var(--meta-swatch-mono-10); --message-positive-label-bg-color: transparent; --message-positive-label-colour: var(--meta-swatch-mono-3); --message-positive-label-font-family: var(--typo-p-medium-font-face); --message-positive-label-font-size: var(--typo-p-medium-font-size); --message-positive-label-font-weight: var(--typo-p-medium-font-weight); --message-positive-label-font-style: var(--typo-p-medium-font-style); --message-positive-label-line-height: var(--typo-p-medium-line-height); --message-positive-label-letter-spacing: var(--typo-p-medium-letter-spacing); --message-positive-label-text-transform: var(--typo-p-medium-text-transform); --message-positive-label-text-align: var(--typo-p-medium-text-align); --message-positive-label-margin: 0; --message-positive-label-padding: 12px 16px; --message-positive-icon-size: var(--pattern-icon-size); --message-positive-icon-margin: 0; --message-positive-icon-padding: 10px 12px; /* Negative message */ --message-negative-icon-bg-background: var(--meta-swatch-colour-12); --message-negative-icon-color: var(--meta-swatch-mono-10); --message-negative-label-bg-background: transparent; --message-negative-label-colour: var(--meta-swatch-mono-3); --message-negative-label-font-family: var(--typo-p-medium-font-face); --message-negative-label-font-size: var(--typo-p-medium-font-size); --message-negative-label-font-weight: var(--typo-p-medium-font-weight); --message-negative-label-font-style: var(--typo-p-medium-font-style); --message-negative-label-line-height: var(--typo-p-medium-line-height); --message-negative-label-letter-spacing: var(--typo-p-medium-letter-spacing); --message-negative-label-text-transform: var(--typo-p-medium-text-transform); --message-negative-label-text-align: var(--typo-p-medium-text-align); --message-negative-label-margin: 0; --message-negative-label-padding: 12px 16px; --message-negative-icon-size: var(--pattern-icon-size); --message-negative-icon-margin: 0; --message-negative-icon-padding: 10px 12px; /* FF Scorecards Widget */ /* Section container */ --ff-scores-section-bg-color: var(--meta-swatch-mono-9); --ff-scores-section-background: var(--meta-swatch-mono-9); --ff-scores-section-padding: 32px 0; --ff-scores-section-padding-m: 48px 0; --ff-scores-section-padding-l: 64px 0; /* Section heading overrides */ --ff-scores-section-heading-colour: var(--typo-h-medium-colour); --ff-scores-section-sub-heading-colour: var(--typo-p-medium-colour); --ff-scores-section-heading-font-family: var(--typo-h-medium-font-face); --ff-scores-section-heading-font-size: var(--typo-h-medium-font-size); --ff-scores-section-heading-font-weight: var(--typo-h-medium-font-weight); --ff-scores-section-heading-font-style: var(--typo-h-medium-font-style); --ff-scores-section-heading-line-height: 2; --ff-scores-section-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --ff-scores-section-heading-text-transform: var(--typo-h-medium-text-transform); --ff-scores-section-heading-text-align: var(--typo-h-medium-text-align); --ff-scores-section-heading-text-margin: 16px 0; /* Section paragraph */ --ff-scores-section-sub-heading-font-family: var(--typo-p-medium-font-face); --ff-scores-section-sub-heading-font-size: var(--typo-p-medium-font-size); --ff-scores-section-sub-heading-font-weight: var(--typo-p-medium-font-weight); --ff-scores-section-sub-heading-font-style: var(--typo-p-medium-font-style); --ff-scores-section-sub-heading-line-height: var(--typo-p-medium-line-height); --ff-scores-section-sub-heading-letter-spacing: var(--typo-p-medium-letter-spacing); --ff-scores-section-sub-heading-text-transform: var(--typo-p-medium-text-transform); --ff-scores-section-sub-heading-text-align: var(--typo-p-medium-text-align); --ff-scores-section-sub-heading-text-margin: 0 0 16px 0; /* Score card containers */ --ff-scores-card-bg-color: var(--meta-swatch-mono-10); --ff-scores-card-border: none; --ff-scores-card-border-radius: 32px; --ff-scores-card-box-shadow: 0px 2px 6px 1px rgba(0, 0, 0, 0.2); --ff-scores-card-margin: 0 16px 0 0; --ff-scores-card-padding: 16px; /* Scorecard label top */ --ff-scores-label-top-colour: var(--typo-h-small-colour); --ff-scores-label-top-font-family: var(--typo-h-small-font-face); --ff-scores-label-top-font-size: var(--typo-h-small-font-size); --ff-scores-label-top-font-weight: var(--typo-h-small-font-weight); --ff-scores-label-top-font-style: var(--typo-h-small-font-style); --ff-scores-label-top-line-height: var(--typo-h-small-line-height); --ff-scores-label-top-letter-spacing: var(--typo-h-small-letter-spacing); --ff-scores-label-top-text-transform: var(--typo-h-small-text-transform); --ff-scores-label-top-text-align: center; /* Scorecard label bottom */ --ff-scores-label-bottom-colour: var(--typo-p-medium-colour); --ff-scores-label-bottom-font-family: var(--typo-p-medium-font-face); --ff-scores-label-bottom-font-size: var(--typo-p-medium-font-size); --ff-scores-label-bottom-font-weight: var(--typo-p-medium-font-weight); --ff-scores-label-bottom-font-style: var(--typo-p-medium-font-style); --ff-scores-label-bottom-line-height: var(--typo-p-medium-line-height); --ff-scores-label-bottom-letter-spacing: var(--typo-p-medium-letter-spacing); --ff-scores-label-bottom-text-transform: var(--typo-p-medium-text-transform); --ff-scores-label-bottom-text-align: center; /* Scorecard value */ --ff-scores-value-colour: var(--typo-data-l-colour); --ff-scores-value-font-family: var(--typo-data-l-font-face); --ff-scores-value-font-size: 56px; --ff-scores-value-font-weight: 700; --ff-scores-value-font-style: normal; --ff-scores-value-line-height: 1.2; --ff-scores-value-letter-spacing: var(--typo-data-l-letter-spacing); --ff-scores-value-text-transform: var(--typo-data-l-text-transform); --ff-scores-value-text-align: center; --ff-scores-value-text-position-top: 50%; /* Scorecard donut */ --ff-scores-donut-whole-color: var(--meta-swatch-mono-9); --ff-inner-donut-progress-color: var(--meta-swatch-colour-12); --ff-outer-donut-progress-color: var(--meta-swatch-colour-9); --ff-scores-donut-progress-color: var(--meta-swatch-colour-9); --ff-scores-donut-size: 222px; /* Donut Info icon */ --ff-donut-info-icon-size: var(--pattern-icon-size); --ff-donut-info-icon-color: var(--meta-swatch-mono-7); --ff-donut-info-icon-postition-top: 20%; /* Donut label */ --ff-donut-label-colour: var(--meta-swatch-mono-5); --ff-donut-label-font-family: 11px; --ff-donut-label-font-size: 'rubik'; --ff-donut-label-font-weight: 400; --ff-donut-label-font-style: normal; --ff-donut-label-line-height: 1.2; --ff-donut-label-letter-spacing: 0; --ff-donut-label-text-transform: none; --ff-donut-label-padding: 12px; --ff-donut-label-text-align: center; --ff-donut-label-position-top: 75%; --goal-scorecard-update-gap: 32px; /* Scorecard pursuits icon */ --ff-scores-pursuits-icon-bg-size: 32px; --ff-scores-pursuits-icon-bg-color: var(--meta-swatch-colour-11); --ff-scores-pursuits-icon-size: var(--pattern-icon-size); --ff-scores-pursuits-icon-color: var(--meta-swatch-mono-10); --ff-scores-pursuits-icon-border-radius: 50%; --ff-scores-pursuits-size: 222px; --ff-scores-pursuits-bg-color: var(--meta-swatch-mono-9); --ff-scores-pursuits-border: none; --ff-scores-pursuits-border-radius: 50%; /* Finance Summary Widget */ /* Container */ /* Heading */ /* Subheading */ /* Card */ /* Card Info */ /* Card Info Icon */ /* Card Paragraph */ /* Card Value */ /* Card Value Icon */ /* Doughnut */ /* Doughnut Value */ /* Doughnut Label */ /* Rental Block */ /* Rental Label */ /* Rental Prime Label */ /* Flow Playback Result */ /* Block container */ --flow-playback-padding: 32px 0; /* Content container */ /* Item container */ --flow-playback-item-flex-direction: column; --flow-playback-item-align-items: flex-start; --flow-playback-item-justify-content: center; --flow-playback-item-padding: 16px 0 0 0; --flow-playback-item-flex-direction-m: row; --flow-playback-item-align-items-m: center; --flow-playback-item-padding-m: 16px 0; --flow-playback-item-flex-direction-l: row; --flow-playback-item-align-items-l: center; --flow-playback-item-padding-l: 16px 0; --flow-playback-item-border-bottom: 1px solid var(--meta-swatch-mono-9); /* Text container */ --flow-playback-text-padding: 0 8px 0 0 ; --flow-playback-text-gap: 6px; /* Heading */ --flow-playback-heading-colour: var(--meta-swatch-mono-3); --flow-playback-heading-font-size: 18px; --flow-playback-heading-font-family: 'rubik'; --flow-playback-heading-font-weight: 500; --flow-playback-heading-font-style: normal; --flow-playback-heading-line-height: 1.2; --flow-playback-heading-letter-spacing: 0; --flow-playback-heading-text-transform: none; --flow-playback-heading-margin: 0; --flow-playback-heading-padding: 0; /* Sub heading */ --flow-playback-sub-heading-colour: var(--meta-swatch-mono-5); --flow-playback-sub-heading-font-size: 13px; --flow-playback-sub-heading-font-family: 'rubik'; --flow-playback-sub-heading-font-weight: 400; --flow-playback-sub-heading-font-style: normal; --flow-playback-sub-heading-line-height: 1.2; --flow-playback-sub-heading-letter-spacing: 0; --flow-playback-sub-heading-text-transform: none; --flow-playback-sub-heading-margin: 0; --flow-playback-sub-heading-padding: 0; /* Detail container */ --flow-playback-detail-padding: 0; --flow-playback-detail-gap: 16px; --flow-playback-detail-justify-content: space-between; --flow-playback-detail-justify-content-m: flex-end; --flow-playback-detail-justify-content-l: flex-end; /* Indicator layout */ --flow-playback-indicator-padding: 8px 12px 8px 10px; --flow-playback-indicator-gap: 6px; --flow-playback-indicator-border-radius: 32px; --flow-playback-indicator-icon-padding: 2px; --flow-playback-indicator-icon-size: var(--pattern-icon-size); --flow-playback-indicator-icon-border-radius: 50%; --flow-playback-indicator-label-font-size: 10px; --flow-playback-indicator-label-font-family: 'rubik'; --flow-playback-indicator-label-font-weight: 500; --flow-playback-indicator-label-font-style: normal; --flow-playback-indicator-label-line-height: 1.2; --flow-playback-indicator-label-letter-spacing: 0; --flow-playback-indicator-label-text-transform: none; --flow-playback-indicator-label-margin: 0; --flow-playback-indicator-label-padding: 0; /* Indicator ON */ --flow-playback-indicator-background-on: linear-gradient(135deg, #0EB004 0%, #C4E40A 100%); --flow-playback-indicator-border-on: 1px solid var(--meta-swatch-mono-10); --flow-playback-indicator-box-shadow-on: none; --flow-playback-indicator-icon-background-on: transparent; --flow-playback-indicator-icon-border-on: none; --flow-playback-indicator-icon-box-shadow-on: none; --flow-playback-indicator-icon-color-on: var(--meta-swatch-mono-10); --flow-playback-indicator-label-color-on: var(--meta-swatch-mono-10); /* Indicator OFF */ --flow-playback-indicator-background-off: linear-gradient(180deg, #F2F2F2 0%, #E6E6E6 100%); --flow-playback-indicator-border-off: 1px solid var(--meta-swatch-mono-10); --flow-playback-indicator-box-shadow-off: none; --flow-playback-indicator-icon-background-off: var(--meta-swatch-mono-10); --flow-playback-indicator-icon-border-off: none; --flow-playback-indicator-icon-box-shadow-off: none; --flow-playback-indicator-icon-color-off: var(--meta-swatch-mono-5); --flow-playback-indicator-label-color-off: var(--meta-swatch-mono-5); /* Goal Scorecard Widget */ /* Block container */ --goal-scorecard-gap: 24px; --goal-scorecard-padding: 24px; --goal-scorecard-padding-m: 32px; --goal-scorecard-padding-l: 32px; --goal-scorecard-margin: 0 0 24px 0; --goal-scorecard-margin-m: 0 0 32px 0; --goal-scorecard-margin-l: 0 0 48px 0; --goal-scorecard-background: var(--meta-swatch-mono-10); --goal-scorecard-border: none; --goal-scorecard-border-radius: 20px; --goal-scorecard-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); /* Scores container */ --goal-scorecard-scores-flex-direction: column; --goal-scorecard-scores-gap: 16px; --goal-scorecard-scores-padding: 0; --goal-scorecard-scores-flex-direction-m: row; --goal-scorecard-scores-gap-m: 16px; --goal-scorecard-scores-padding-m: 0; --goal-scorecard-scores-flex-direction-l: row; --goal-scorecard-scores-gap-l: 16px; --goal-scorecard-scores-padding-l: 0; /* Score item container */ --goal-scorecard-score-item-flex-direction: row; --goal-scorecard-score-item-gap: 16px; --goal-scorecard-score-item-padding: 0; --goal-scorecard-score-item-flex-direction-m: column; --goal-scorecard-score-item-gap-m: 8px; --goal-scorecard-score-item-padding-m: 0; --goal-scorecard-score-item-flex-direction-l: column; --goal-scorecard-score-item-gap-l: 8px; --goal-scorecard-score-item-padding-l: 0; /* Score item label */ --goal-scorecard-score-item-label-colour: var(--meta-swatch-mono-3); --goal-scorecard-score-item-label-font-family: 'rubik'; --goal-scorecard-score-item-label-font-size: 14px; --goal-scorecard-score-item-label-font-weight: 500; --goal-scorecard-score-item-label-font-style: normal; --goal-scorecard-score-item-label-line-height: 1.3; --goal-scorecard-score-item-label-letter-spacing: 0; --goal-scorecard-score-item-label-text-transform: none; --goal-scorecard-score-item-label-text-align: left; --goal-scorecard-score-item-label-text-align-m: center; --goal-scorecard-score-item-label-text-align-l: center; /* Label off state overrides */ --goal-scorecard-score-item-label-colour-off: var(--meta-swatch-mono-6); --goal-scorecard-score-item-label-font-weight-off: 400; /* Score indicator layout */ --goal-scorecard-indicator-height: 8px; --goal-scorecard-indicator-width: 56px; --goal-scorecard-indicator-width-m: 100%; --goal-scorecard-indicator-width-l: 100%; --goal-scorecard-indicator-padding: 0; --goal-scorecard-indicator-border-radius: 4px; --goal-scorecard-indicator-icon-display: none; /* Score indicator ON */ --goal-scorecard-indicator-background-on: linear-gradient(135deg, #0EB004 0%, #C4E40A 100%); --goal-scorecard-indicator-border-on: none; --goal-scorecard-indicator-box-shadow-on: none; /* Score indicator off */ --goal-scorecard-indicator-background-off: transparent; --goal-scorecard-indicator-border-off: 1px solid var(--meta-swatch-mono-7); --goal-scorecard-indicator-box-shadow-off: none; /* Update container */ --goals-scores-update-flex-direction: column; --goals-scores-update-gap: 12px; --goals-scores-update-padding: 16px 0; --goal-scores-update-align-items: center; --goals-scores-update-flex-direction-m: row; --goals-scores-update-padding-m: 0; --goal-scores-update-align-items-m: center; --goal-scores-update-justify-content-m: space-between; --goals-scores-update-flex-direction-l: row; --goals-scores-update-padding-l: 0; --goal-scores-update-align-items-l: center; --goal-scores-update-justify-content-l: space-between; /* Update label */ --goal-scorecard-update-label-colour: var(--meta-swatch-mono-5); --goal-scorecard-update-label-font-family: 'rubik'; --goal-scorecard-update-label-font-size: 13px; --goal-scorecard-update-label-font-weight: 400; --goal-scorecard-update-label-font-style: normal; --goal-scorecard-update-label-line-height: 1.2; --goal-scorecard-update-label-letter-spacing: 0; --goal-scorecard-update-label-text-transform: none; --goal-scorecard-update-label-text-align: center; --goal-scorecard-update-label-text-align-m: left; --goal-scorecard-update-label-text-align-l: left; /* Healthscore Widget */ /* High Priority Goals Widget */ /* Block container */ --hpgoals-padding: 64px 0; --hpgoals-background: var(--meta-swatch-mono-10); /* Content container */ --hpgoals-content-padding: 0 0 24px 0; /* Header container */ --hpgoals-header-gap: 4px; --hpgoals-header-gap-m: 8px; --hpgoals-header-gap-l: 8px; /* Heading */ --hpgoals-heading-colour: var(--meta-swatch-mono-3); --hpgoals-heading-font-size: 24px; --hpgoals-heading-font-family: 'rubik'; --hpgoals-heading-font-weight: 500; --hpgoals-heading-font-style: normal; --hpgoals-heading-line-height: 1.2; --hpgoals-heading-letter-spacing: var(--pattern-letter-spacing-body); --hpgoals-heading-text-transform: none; /* Sub heading */ --hpgoals-sub-heading-colour: var(--meta-swatch-mono-3); --hpgoals-sub-heading-font-size: 16px; --hpgoals-sub-heading-font-family: 'rubik'; --hpgoals-sub-heading-font-weight: 400; --hpgoals-sub-heading-font-style: normal; --hpgoals-sub-heading-line-height: 1.2; --hpgoals-sub-heading-letter-spacing: var(--pattern-letter-spacing-body); --hpgoals-sub-heading-text-transform: none; /* Button container */ /* Home Buying Options Result */ /* Home Buying Readiness Result */ /* Inflation Poll Result */ /* Heading */ /* Description */ /* Label */ /* Card container */ /* Card heading */ /* Card label */ /* Card value today */ /* Card value future */ /* Value colour overrides */ /* Investor Persona */ /* Content container */ /* Words container */ /* Heading */ /* Title */ /* Description */ /* Image */ /* LifeScore Widget */ /* Block container */ /* Heading */ /* Sub Heading */ /* Body */ /* Breakdown */ /* Mortgage Tools Widget */ /* Container */ /* Image */ /* Body */ /* Heading */ /* Sub heading */ /* Cards container */ /* Card */ /* Card Heading */ /* Metrics container */ /* Metric */ /* Metric Label */ /* Metric Value */ /* Button */ /* Button Label */ /* Button Icon */ /* Positive Impact Widget */ /* Block container */ --pos-impact-padding: 32px 16px; --pos-impact-padding-m: 48px 0; --pos-impact-padding-l: 64px 0; /* Content container */ /* Points breakdownB*/ /* Property Breakdown */ /* Container */ /* Header */ /* Heading */ /* Row */ /* Row label */ /* Row value */ /* Property Goal Result */ /* Block Container */ /* Inner container */ /* Breakdown block */ /* Input container */ /* Data row */ /* Input group container */ /* Property Goal Widget (Road) */ /* Container */ /* Content Container */ /* Header Container */ /* Body Container */ /* Heading */ /* Heading */ /* Property Goal Widget (progress bar) */ /* Container */ /* Heading */ /* Dataviz */ /* Progress bar */ /* Progress bar value */ /* Savings table */ /* Savings item */ /* Property Portfolio Result */ /* Container */ /* Indicator icon */ /* Heading */ /* Sub heading */ /* Data icon */ /* Savings Plan Result */ /* Block Container */ /* Inner container */ /* Content container */ /* Content heading */ /* Content subheading */ /* Columns container */ /* Dataviz */ /* Dataviz item */ /* Donuts */ /* Dataviz headings */ /* Dataviz labels */ /* Dataviz values */ /* Dataviz suffix */ /* Breakdown heading */ /* Also style Sub block / Breakdown card */ /* Controls container */ /* Controls heading */ /* Controls list */ /* Uni Savings Result */ /* Dataviz */ /* Heading */ /* Sticky */ /* Total */ /* Total value */ /* Total label */ /* Bar container */ /* Bar */ /* Legend */ /* Cards */ /* Info */ /* Adjust your answers */ /* Segmented button and wheels container */ /* Wheel */ /* Uni Modal */ /* Uni Modal Values container */ /* Values */ /* Chart */ /* Labels */ /* VM */ /* VM What's In Reach dataviz */ /* VM plan breakdown */ /* VM plan dataviz */ /* VM plan widget */ /* VM plan page header */ /* VM points card */ /* VM points widget */ /* VM product prompt */ /* FF */ /* FF template heading overrides */ /* FF Messages spacer */ --ff-message-spacer: 12px; /* Goal Indicator */ --ff-goal-indicator-bg-border-radius: 50%; --ff-goal-indicator-bg-size: 32px; --ff-goal-indicator-icon-size: var(--pattern-icon-size); --ff-goal-indicator-off-color: transparent; --ff-goal-indicator-off-bg-color: transparent; --ff-goal-indicator-off-border: 2px solid var(--meta-swatch-colour-11); --ff-goal-indicator-on-color: var(--meta-swatch-mono-10); --ff-goal-indicator-on-bg-color: var(--meta-swatch-colour-11); --ff-goal-indicator-on-border: 2px solid var(--meta-swatch-colour-11); --ff-goal-indicator-gap: 4px; /* Pursuit Indicator */ --ff-pursuit-indicator-bg-size: var(--ff-goal-indicator-bg-size); --ff-pursuit-indicator-bg-color: var(--ff-goal-indicator-on-bg-color); --ff-pursuit-indicator-icon-size: var(--pattern-icon-size); --ff-pursuit-indicator-icon-color: var(--ff-goal-indicator-on-color); --ff-pursuit-indicator-border: var(--ff-goal-indicator-on-border); --ff-pursuit-indicator-border-radius: var(--ff-goal-indicator-bg-border-radius); --ff-pursuit-indicator-gap: var(--ff-goal-indicator-gap); /* FF KPI Detail */ /* Item */ --ff-message-kpi-flex-direction: row; --ff-message-kpi-align-items: center; --ff-message-kpi-justify-content: flex-start; --ff-message-kpi-spacer: 16px; /* Icon */ --ff-message-kpi-icon-margin: 0 12px 0 0; /* Label */ --ff-message-kpi-label-colour: var(--typo-p-medium-colour); --ff-message-kpi-label-font-family: var(--typo-p-medium-font-face); --ff-message-kpi-label-font-size: var(--typo-p-medium-font-size); --ff-message-kpi-label-font-weight: var(--typo-p-medium-font-weight); --ff-message-kpi-label-font-style: var(--typo-p-medium-font-style); --ff-message-kpi-label-line-height: var(--typo-p-medium-line-height); --ff-message-kpi-label-letter-spacing: var(--typo-p-medium-letter-spacing); --ff-message-kpi-label-text-transform: var(--typo-p-medium-text-transform); --ff-message-kpi-label-text-align: var(--typo-p-medium-text-align); --ff-message-kpi-label-margin: none; /* Mortgage Passport */ /* Container */ /* Widget Wrapper */ /* Item */ /* Icon */ /* Label */ /* Value */ /* Sub blocks */ /* Account info */ /* Account info title */ /* Account info sub title */ /* Bar chart */ /* Bar Chart Container */ /* Bar Chart Legend */ /* Breakdown card */ /* Container */ /* Data row */ /* Operator icon */ /* Label value */ /* Label */ /* Calc value */ /* Info icon */ /* Total row */ /* Total row - value */ /* Total row - label */ /* Total row operator icon */ /* Property Goal Breakdown */ /* Container */ /* Row */ /* Row value */ /* Row value suffix */ /* Row link */ /* Total */ /* Vars to help it look right */ /* Goal Row Header */ /* Block container */ --grh-padding: 16px 0; --grh-flex-direction: column; --grh-flex-direction-m: row; --grh-flex-direction-l: row; --grh-gap: 8px; --grh-gap-m: 16px; --grh-gap-l: 16px; --grh-background: transparent; --grh-border: none; --grh-border-bottom: 1px solid var(--meta-swatch-mono-6); /* Detail container */ --grh-detail-width: 100%; --grh-detail-width-m: 360px; --grh-detail-width-l: 360px; /* Icon */ --grh-icon-size: 18px; --grh-icon-color: var(--meta-swatch-mono-6); /* Label & Icon containers */ --grh-label-containers-gap: 2px; /* Labels */ --grh-label-colour: var(--typo-data-label-s-colour); --grh-label-font-family: var(--typo-data-label-s-font-face); --grh-label-font-size: var(--typo-data-label-s-font-size); --grh-label-font-weight: var(--typo-data-label-s-font-weight); --grh-label-font-style: var(--typo-data-label-s-font-style); --grh-label-line-height: var(--typo-data-label-s-line-height); --grh-label-letter-spacing: var(--typo-data-label-s-letter-spacing); --grh-label-text-transform: var(--typo-data-label-s-text-transform); /* Deposit Builder Chart */ /* Container */ /* Account colours */ /* Account cards */ /* Account buttons */ /* Headings */ /* Legend */ /* Balances */ /* Totals */ /* Difference label */ /* Difference */ /* Indicator */ /* Keylines */ /* Deposit Builder Breakdown */ /* Container */ /* Headings */ /* Balances */ /* Translate numbers */ /* Account tables */ /* Account table heading */ /* Icons */ /* Keylines */ /* Deposit Builder Confirmation */ /* Container */ /* Icon Container */ /* Icon */ /* Message */ /* Deposit Builder Timeline */ /* Container */ /* Headings */ /* Values */ /* Lines */ /* Goal row */ /* Block container */ --goal-row-flex-direction: column; --goal-row-padding: 16px 0; --goal-row-flex-direction-m: row; --goal-row-padding-m: 24px 0; --goal-row-flex-direction-l: row; --goal-row-padding-l: 24px 0; --goal-row-border-bottom: 1px solid var(--meta-swatch-mono-9); --goal-row-gap: 16px 16px; /* Text container */ --goal-row-text-gap: 6px; /* Heading */ --goal-row-heading-colour: var(--meta-swatch-mono-3); --goal-row-heading-font-size: 18px; --goal-row-heading-font-family: 'rubik'; --goal-row-heading-font-weight: 500; --goal-row-heading-font-style: normal; --goal-row-heading-line-height: 1.2; --goal-row-heading-letter-spacing: var(--pattern-letter-spacing-body); --goal-row-heading-text-transform: none; --goal-row-heading-margin: 0 0 12px; --goal-row-heading-margin-m: 0 0 12px; --goal-row-heading-margin-l: 0 0 12px; /* Sub Heading */ --goal-row-sub-heading-colour: var(--meta-swatch-mono-3); --goal-row-sub-heading-font-size: 13px; --goal-row-sub-heading-font-family: 'rubik'; --goal-row-sub-heading-font-weight: 400; --goal-row-sub-heading-font-style: normal; --goal-row-sub-heading-line-height: 1.2; --goal-row-sub-heading-letter-spacing: var(--pattern-letter-spacing-body); --goal-row-sub-heading-text-transform: none; /* Detail container */ --goal-row-detail-gap-m: 40px; --goal-row-detail-gap-l: 40px; --goal-row-detail-justify-content: space-between; --goal-row-detail-justify-content-m: center; --goal-row-detail-justify-content-l: center; /* Score container */ --goal-row-score-padding: 0; --goal-row-score-gap: 4px; /* Low Priority container */ --goal-row-lp-container-height: 24px; --goal-row-lp-container-width: 80px; --goal-row-lp-container-padding: 0 0 1px 0; --goal-row-lp-container-background: var(--meta-swatch-mono-3); --goal-row-lp-container-border: none; --goal-row-lp-container-border-radius: 12px; --goal-row-lp-container-box-shadow: none; /* Low Priority label */ --goal-row-lp-label-colour: var(--meta-swatch-mono-6); --goal-row-lp-label-font-size: var(--typo-data-label-s-font-size); --goal-row-lp-label-font-family: var(--typo-data-label-s-font-face); --goal-row-lp-label-font-weight: var(--typo-data-label-s-font-weight); --goal-row-lp-label-font-style: var(--typo-data-label-s-font-style); --goal-row-lp-label-line-height: var(--goal-row-lp-container-height); --goal-row-lp-label-letter-spacing: var(--typo-data-label-s-letter-spacing); --goal-row-lp-label-text-transform: var(--typo-data-label-s-text-transform); --goal-row-lp-label-text-align: center; /* Action container */ --goal-row-action-padding: 0; --goal-row-action-gap: 12px; /* Score indicator layout */ --goal-row-score-indicator-padding: 0; --goal-row-score-indicator-padding-m: 0; --goal-row-score-indicator-padding-l: 0; --goal-row-score-indicator-border-radius: 50%; --goal-row-score-indicator-size: 24px; --goal-row-score-indicator-icon-size: 24px; /* Score indicator ON */ --goal-row-score-indicator-background-on: linear-gradient(135deg, #0EB004 0%, #C4E40A 100%); --goal-row-score-indicator-border-on: none; --goal-row-score-indicator-box-shadow-on: none; --goal-row-score-indicator-icon-color-on: transparent; /* Score indicator OFF */ --goal-row-score-indicator-background-off: transparent; --goal-row-score-indicator-border-off: 1px solid var(--meta-swatch-mono-7); --goal-row-score-indicator-box-shadow-off: none; --goal-row-score-indicator-icon-color-off: transparent; /* Badge container */ --goal-row-badge-display: flex; --goal-row-badge-padding: 4px 12px 2px; --goal-row-badge-padding-m: 4px 12px 2px; --goal-row-badge-padding-l: 4px 12px 2px; --goal-row-badge-border-radius: 12px; --goal-row-badge-off-background: linear-gradient(141.49deg, #C31DB7 0%, #F63D29 90.95%); --goal-row-badge-on-background: var(--meta-swatch-colour-9); --goal-row-badge-border: none; --goal-row-badge-box-shadow: none; /* Badge label */ --goal-row-badge-label-colour: var(--meta-swatch-mono-10); --goal-row-badge-label-font-size: 13px; --goal-row-badge-label-font-family: 'rubik'; --goal-row-badge-label-font-weight: 400; --goal-row-badge-label-font-style: normal; --goal-row-badge-label-line-height: 1.2; --goal-row-badge-label-letter-spacing: var(--pattern-letter-spacing-body); --goal-row-badge-label-text-transform: none; --goal-row-badge-label-text-align: center; /* LifeScore Dataviz */ /* Block container */ /* Item */ /* Icon BGs */ /* Icon */ /* Words containers */ /* Labels */ /* Values */ /* Left colors */ /* Right colors */ /* Multiple widget */ /* Container */ /* Pension finder dataviz */ --pension-finder-dataviz-background-colour: rgba(0,0,0,0.05); --pension-finder-dataviz-border: 1px solid var(--meta-swatch-mono-8); --pension-finder-dataviz-border-radius: 6px; --pension-finder-dataviz-padding: 4px 0; --pension-finder-dataviz-row-gap: 4px; --pension-finder-dataviz-block-on-colour: var(--meta-swatch-colour-11); --pension-finder-dataviz-block-on-border: none; --pension-finder-dataviz-block-on-border-radius: 4px; --pension-finder-dataviz-block-on-box-shadow: none; --pension-finder-dataviz-block-on-padding: 0; --pension-finder-dataviz-block-off-colour: var(--meta-swatch-mono-6); --pension-finder-dataviz-block-off-border: none; --pension-finder-dataviz-block-off-border-radius: 4px; --pension-finder-dataviz-block-off-box-shadow: none; --pension-finder-dataviz-block-off-padding: 0; /* Savings Plan Breakdown */ /* Container */ /* Row */ /* Row value */ /* Row value suffix */ /* Row link */ /* Total */ /* Savings Plan Dataviz */ /* Container */ /* Dataviz widget */ /* Label */ /* Value */ /* Value suffix */ /* Property Card */ /* Property Goal Dataviz */ /* Property goal dataviz container */ /* Dataviz container inner */ /* Donut container */ /* Donut */ /* Donut value */ /* Donut value complete*/ /* Donut label */ /* Property goal output container */ /* Property goal output */ /* Property goal button container */ /* Property goal button */ /* Property Goal Dataviz Explainer */ /* Property goal explainer container */ /* Property goal explainer icon */ /* Property goal explainer paragraph */ /* Property goal explainer link */ /* Container */ /* Label Container */ /* Label */ /* Value Container */ /* Value */ /* Templates */ /* 12 Column Content Grid */ --app-custom-grid-max-width-xs: 100%; --app-custom-grid-max-width-sm: 100%; --app-custom-grid-max-width-md: 100%; --app-custom-grid-max-width-lg: 950px; --app-custom-grid-max-width-xl: 950px; --app-custom-grid-margin-xxs: 16px; --app-custom-grid-margin-xs: 16px; --app-custom-grid-margin-sm: 16px; --app-custom-grid-margin-md: 16px; --app-custom-grid-margin-lg: 16px; --article-body-padding: 16px 0 32px; --article-body-padding-m: 16px 0 32px; --article-body-padding-l: 16px 0 32px; /* Default */ --theme-bg-colour: var(--meta-swatch-mono-10); --theme-bg-attachment: none; --theme-bg-image-url: none; --theme-bg-image-repeat: none; --theme-bg-image-size: none; --theme-bg-image-position: none; --theme-template-bg-colour: var(--meta-swatch-mono-4); --theme-template-align-content: normal; --theme-bottom-nav-bg-colour: var(--meta-swatch-mono-5); --theme-top-nav-bg-colour: var(--meta-swatch-mono-5); --theme-top-nav-bg-image-url: var(--theme-bg-image-url); --theme-top-nav-bg-image-repeat: var(--theme-bg-image-repeat); --theme-top-nav-bg-image-size: var(--theme-bg-image-size); --theme-top-nav-bg-image-position: var(--theme-bg-image-position); /* Checkpoint (Updating & Done) */ --template-checkpoint-background: var(--meta-swatch-mono-4); --template-checkpoint-icon-colour: var(--meta-swatch-colour-1); --template-checkpoint-icon-size: 40px; --template-checkpoint-label-colour: var(--meta-swatch-mono-1); --template-checkpoint-label-face: 'rubik'; --template-checkpoint-label-size: 16px; --template-checkpoint-label-weight: 400; --template-checkpoint-label-line-height: 1.2; --template-checkpoint-label-letter-spacing: -0.03%; --template-checkpoint-label-text-transform: none; --template-checkpoint-label-text-align: center; /* Savings Plan Results */ --widget-plan-spacer-sections-s: var(--pattern-layout-spacer-sections-s); --widget-plan-spacer-components-s: var(--pattern-layout-spacer-components-s); --widget-plan-spacer-content-s: var(--pattern-layout-spacer-content-s); --widget-plan-spacer-sections-ml: var(--pattern-layout-spacer-sections-ml); --widget-plan-spacer-components-ml: var(--pattern-layout-spacer-components-ml); --widget-plan-spacer-content-ml: var(--pattern-layout-spacer-content-ml); /* Tour */ --template-tour-spacer-top-s: 16px; --template-tour-spacer-middle-upper-s: 16px; --template-tour-spacer-middle-lower-s: 16px; --template-tour-spacer-bottom-s: 16px; --template-tour-spacer-top-ml: 24px; --template-tour-spacer-middle-upper-ml: 16px; --template-tour-spacer-middle-lower-ml: 8px; --template-tour-spacer-bottom-ml: 16px; --template-tour-order-image: 1; --template-tour-order-message: 2; --template-tour-order-input: 3; /* Custom */ --template-custom-spacer-sections-s: var(--pattern-layout-spacer-sections-s); --template-custom-spacer-components-s: var(--pattern-layout-spacer-components-s); --template-custom-spacer-content-s: var(--pattern-layout-spacer-content-s); --template-custom-spacer-sections-ml: var(--pattern-layout-spacer-sections-ml); --template-custom-spacer-components-ml: var(--pattern-layout-spacer-components-ml); --template-custom-spacer-content-ml: var(--pattern-layout-spacer-content-ml); /* 12 Column Content Grid */ /* Start */ /* Question */ --question-template-body-padding: 24px 0 48px; --question-template-body-padding-m: 48px 0 64px; --question-template-body-padding-l: 48px 0 64px; /* Checklist */ /* Articles list */ /* Article */ --article-body-padding: 0 0 16px 0; /* Result */ --template-result-page-heading-align: left; --template-result-par-heading-align: left; /* Dashboard */ --app-template-dashboard-page-coach-column-end: var(--pattern-col-span-l); /* Widget bottom link */ /* Landing */ --template-landing-spacer-sections-s: var(--pattern-layout-spacer-sections-s); --template-landing-spacer-components-s: var(--pattern-layout-spacer-components-s); --template-landing-spacer-content-s: var(--pattern-layout-spacer-content-s); --template-landing-spacer-sections-ml: var(--pattern-layout-spacer-sections-ml); --template-landing-spacer-components-ml: var(--pattern-layout-spacer-components-ml); --template-landing-spacer-content-ml: var(--pattern-layout-spacer-content-ml); /* VM WIR */ /* Pension Finder Results */ /* Account Home */ --template-account-editorial-cards-columns: 2; --template-account-editorial-cards-gap-row: 16px; --template-account-editorial-cards-gap-column: 16px; /* Account Business Profiles */ /* Blog */ --template-blog-editorial-cards-columns: 2; --template-blog-editorial-cards-gap-row: 16px; --template-blog-editorial-cards-gap-column: 16px; /* Property */ /* MAB Affordability result */ /* OVERVIEW SECTION */ /*CARD*/ /*CARD CONTAINER*/ /*INFO ICON CONTAINER*/ /*LOAN DEPOSIT DIFFERENCE */ /*ICON*/ /*PARAGRAPH*/ /*VALUE*/ /*DOUGHNUT*/ /*LTV DOUGHNUT*/ /*DOUGHNUT VALUE*/ /*DOUGHNUT LABEL*/ /*DOUGHNUT LABEL*/ /* EDIT SECTION */ /* BUTTONS */ /* MODAL */ /* IMAGE */ /* TITLE */ /* ICON CONTAINER */ /* ICON */ /* Feed */ /* Content container */ /* Grid */ /* Grid items */ /* Empty state paragraph */ /* Guidance */ --guidance-content-container-padding: 32px 0; --guidance-content-container-gap: 32px; /* Story */ --pt-story-slides-aspect-ratio: unset; --pt-story-slides-aspect-ratio-m: 10/16; --pt-story-slides-aspect-ratio-l: 10/16; --app-progress-bar-height: 44px; --app-progress-bar-height-m: 44px; --app-progress-bar-height-l: 44px; --pt-story-stepper-prev-left: 20px; --pt-story-stepper-next-right: 20px; --pt-story-stepper-top: calc(100% - 15px); --pt-story-stepper-top-m: 40%; --pt-story-stepper-top-l: 40%; --pt-story-stepper-width: 50px; --pt-story-stepper-height: 50px; --pt-story-stepper-width-m: 60px; --pt-story-stepper-height-m: 60px; --pt-story-stepper-width-l: 60px; --pt-story-stepper-height-l: 60px; --pt-story-stepper-border-radius: 100px; --pt-story-stepper-background: var(--meta-swatch-mono-5); --pt-story-stepper-border: 1.5px solid var(--meta-swatch-colour-1); --pt-story-stepper-box-shadow: var(--pattern-button-box-shadow); --pt-story-stepper-icon-size: var(--pattern-icon-size); --pt-story-stepper-icon-color: var(--meta-swatch-colour-1); --story-slide-background: var(--meta-swatch-mono-5); --story-slide-border-radius: 18px; --story-slide-box-shadow: var(--pattern-button-box-shadow); --story-slide-padding: 0px; --story-slide-padding-m: 0px; --story-slide-padding-l: 0px; --story-slide-border: none; --story-slide-border-m: none; --story-slide-border-l: none; --story-slide-spacer-bottom: 0px; --story-slide-spacer-bottom-m: 16px; --story-slide-spacer-bottom-l: 16px; /* Video */ } /* Do not remove! */ /* Themes */ :root.dashboard { /* All types - Main container */ --page-header-spacer-bottom: 16px; --page-header-spacer-bottom-m: 32px; --page-header-spacer-bottom-l: 32px; --pattern-layout-spacer-top-s: 0; --pattern-layout-spacer-top-ml: 0; --page-template-heading-container-padding: 0; --page-template-heading-container-padding-m: 0; --page-template-heading-container-padding-l: 0; --coach-message-text-size: 16px; --checklist-item-btn-box-shadow: none; --checklist-item-checkbox-bg-height: 0; --checklist-item-checkbox-bg-width: 0; } :root.checklist { } :root.articles { } :root.feed { } :root.question { --theme-template-align-content: end; --page-header-spacer-bottom: 0; --page-header-spacer-bottom-m: 24px; --page-header-spacer-bottom-l: 24px; --page-actions-button-margin: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; --page-actions-button-margin-m: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; --page-actions-button-margin-l: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; /* Segmented buttons */ } :root.article { /* 12 Column Content Grid */ --article-body-padding: 0 0 32px; --article-body-padding-m: 0 0 40px; --article-body-padding-l: 0 0 40px; --pattern-layout-spacer-components-s: 16px; --pattern-layout-spacer-components-ml: 32px; --typo-h2-margin: 0; --typo-h2-margin: 2rem 0 1rem; --typo-h3-margin: 2rem 0 1rem; --typo-h4-margin: 2rem 0 1rem; --page-header-spacer-bottom: 32px; --page-header-spacer-bottom-m: 32px; --page-header-spacer-bottom-l: 32px; } :root.blog { } :root.help { } :root.checkpoint { } :root.account-complete { } :root.tour { } :root.tour1 { } :root.tour2 { } :root.tour3 { } :root.tour4 { } :root.tour5 { } :root.start { --coach-padding-top-m: 32px; --coach-padding-top-l: 32px; --coach-padding-bottom: 48px; --typo-h2-margin: 48px 0 1rem; } :root.result { --coach-padding-top-m: 32px; --coach-padding-top-l: 32px; --article-body-padding: 0; --article-body-padding-m: 0; --article-body-padding-l: 0; } :root.my-plan { } :root.landing { --typo-h1-margin: 0.1rem 0; --typo-h2-margin: 0.07rem 0; --typo-h3-margin: 0.07rem 0; } :root.landing1 { } :root.account-signup { } :root.account-login { } :root.account-signin { } :root.account-reset-password { } :root.account-home { /* Label */ /* Field */ /* Link */ /* Accordion */ } :root.account-home-option { --page-actions-button-margin: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; --page-actions-button-margin-m: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; --page-actions-button-margin-l: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; } :root.lifescore-home { } :root.lifescore-reward { } :root.vm-ff-goal { --theme-page-header-bg-colour: var(--meta-swatch-mono-10); --page-header-category-background: linear-gradient(to bottom right, #2CBA85, #355FC6); --page-header-category-label-colour: var(--meta-swatch-mono-10); --theme-page-header-heading-colour: var(--meta-swatch-mono-3); --theme-page-header-sub-heading-colour: var(--meta-swatch-mono-5); --page-header-spacer-top: 24px; --page-header-spacer-bottom: 0; --page-header-spacer-top-m: 40px; --page-header-spacer-bottom-m: 0; --page-header-spacer-top-l: 40px; --page-header-spacer-bottom-l: 0; } :root.vm-wiwr { } :root.vm-plan { } :root.vm-deposit-builder { } :root.vm-lifescore-home { } :root.property-page { /* Property header*/ } :root.inflation-poll { } :root.investor-quiz { } :root.story { --body-padding: 0; --theme-bg-colour: var(--meta-swatch-mono-4); --feedback-block-padding: 0; --feedback-block-margin: 40px 0 0; --feedback-block-background: transparent; --feedback-heading-font-family: var(--typo-h-medium-font-face); --feedback-heading-font-size: var(--typo-h-medium-font-size); --feedback-heading-font-weight: var(--typo-h-medium-font-weight); --feedback-heading-font-style: var(--typo-h-medium-font-style); --feedback-heading-line-height: var(--typo-h-medium-line-height); --feedback-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --feedback-heading-text-transform: var(--typo-h-medium-text-transform); --feedback-heading-text-align: center; --theme-page-header-bg-colour: var(--meta-swatch-mono-5); --theme-page-header-heading-colour: var(--meta-swatch-mono-1); --theme-page-header-sub-heading-colour: var(--meta-swatch-mono-1); --page-header-spacer-top: 24px; --page-header-spacer-top-m: 24px; --page-header-spacer-top-l: 24px; --page-header-spacer-below-heading: 12px; --page-header-spacer-below-heading-m: 12px; --page-header-spacer-below-heading-l: 12px; --page-header-sub-heading-margin-top: 0; --page-header-spacer-bottom: 24px; --page-header-spacer-bottom-m: 24px; --page-header-spacer-bottom-l: 24px; --typo-p-font-size: 2vh; --typo-p-font-size-m: 2vh; --typo-p-font-size-l: 2vh; --typo-p-margin: 12px 0 16px; --typo-h2-font-size: 24px; --typo-h2-font-size-m: 24px; --typo-h2-font-size-l: 24px; --typo-h2-margin: 24px 0 1.4vh; --typo-ul-padding: 0 0 1.4vh 2.8vh; --typo-ol-padding: 0 0 1.4vh 2.8vh; --btn-max-width-m: 100%; --btn-max-width-l: 100%; --page-header-heading-size: 28px; --page-header-heading-size-m: 28px; --page-header-heading-size-l: 28px; --page-header-sub-heading-size: 16px; --page-header-sub-heading-size-m: 16px; --page-header-sub-heading-size-l: 16px; --progress-indicator-container-margin: 10px 0; --page-header-category-background: var(--meta-swatch-mono-5); --page-header-category-label-colour: var(--meta-swatch-mono-1); } /* DO NOT remove space in next selector */ :root .story1 { /* Slide container */ /* Page header */ /* Words */ /* Quick feedback */ /* Text links */ } /* DO NOT remove space in next selector */ :root .story2 { /* Slide container */ /* Page header */ /* Words */ /* Quick feedback */ /* Text links */ } /* DO NOT remove space in next selector */ :root .story3 { /* Slide container */ /* Page header */ /* Words */ /* Text links */ } /* DO NOT remove space in next selector */ :root .story4 { /* Slide container */ /* Page header */ /* Words */ /* Feedback */ /* Button */ /* Quick feedback */ /* Text links */ } /* DO NOT remove space in next selector */ :root .story5 { /* Slide container */ /* Page header */ /* Words */ /* Quick feedback */ /* Text links */ } :root.goals { } :root.goal { --page-actions-button-label-colour: var(--meta-swatch-mono-10); --page-actions-button-icon-size: var(--pattern-icon-size); --page-actions-button-icon-colour: var(--meta-swatch-mono-10); } :root.onboarding { } :root.goal-prioritisation { --page-actions-button-margin: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; --page-actions-button-margin-m: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; --page-actions-button-margin-l: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; } :root.goal-performance { --page-actions-button-margin: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; --page-actions-button-margin-m: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; --page-actions-button-margin-l: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; } :root.positive-impact { --page-actions-button-margin: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; --page-actions-button-margin-m: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; --page-actions-button-margin-l: var(--coach-spacer-input) var(--coach-spacer-input) 0 0; } :root.coins { } :root.engaged { /* Indicator */ /* Keylines */ /* Button */ /* Labels container */ /* Activity Label */ /* Status Label */ /* Status */ /* Action icon */ /* New dynamic statuses */ } :root.video { }