/* My MAB */ /* Core */ /* Font code */ :root { /* Swatches */ /* Colours */ --meta-swatch-colour-1: #F26A2C; --meta-swatch-colour-2: #67686B; --meta-swatch-colour-3: #EAEAEA; --meta-swatch-colour-4: #4763ac; --meta-swatch-colour-5: #4fbece; --meta-swatch-colour-6: #ffe7c3; --meta-swatch-colour-7: #fbbc41; --meta-swatch-colour-8: #00154D; --meta-swatch-colour-9: #fff8ea; --meta-swatch-colour-10: #faa74a; --meta-swatch-colour-11: #e7f4f6; --meta-swatch-colour-12: #668891; --meta-swatch-colour-13: #C61310; /* Monos */ --meta-swatch-mono-1: #000000; --meta-swatch-mono-2: #454b5d; --meta-swatch-mono-3: #E1DBD5; --meta-swatch-mono-4: #E8E8E8; --meta-swatch-mono-5: #ffffff; /* Translucents */ --meta-swatch-dark-2: 0, 0, 0, 75; --meta-swatch-dark-3: 0, 0, 0, 0.63; --meta-swatch-dark-4: 0, 0, 0, 0.4; --meta-swatch-dark-5: 0, 0, 0, 0.2; --meta-swatch-dark-6: 0, 0, 0, 0.1; --meta-swatch-light-2: 255, 255, 255, 0.75; --meta-swatch-light-3: 255, 255, 255, 0.63; --meta-swatch-light-4: 255, 255, 255, 0.4; --meta-swatch-light-5: 255, 255, 255, 0.2; --meta-swatch-light-6: 255, 255, 255, 0.1; /* Gradients */ --meta-swatch-gradient-1: linear-gradient(180deg, #E1193C 0%, #F78A53 100%); --meta-swatch-gradient-2: linear-gradient(180deg, #F78A53 0%, #FFBC9A 100%); --meta-swatch-gradient-3: linear-gradient(180deg, #FFB31D 0%, #FFC85B 100%); --meta-swatch-gradient-4: linear-gradient(180deg, #FFC85B 0%, #FFE1A6 100%); --meta-swatch-gradient-5: linear-gradient(180deg, #2AB994 0%, #67D9C2 100%); --meta-swatch-gradient-6: linear-gradient(180deg, #67D9C2 0%, #B6F1E5 100%); /* Check if these can be deleted */ /* Content zone */ --swatch-content-bg: var(--meta-swatch-mono-5); --swatch-content-bg-transparent: var(--meta-swatch-light-5); --swatch-content-text-strong: var(--meta-swatch-mono-1); --swatch-content-text-subtle: var(--meta-swatch-mono-2); --swatch-content-text-headings: var(--meta-swatch-mono-1); --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-1); --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: var(--meta-swatch-mono-5); --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-1); --swatch-card-indicator-on: var(--meta-swatch-colour-1); --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-1); --swatch-card-icon-warning: var(--meta-swatch-colour-1); --swatch-card-keylines: var(--meta-swatch-mono-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-5); --swatch-dataviz-icon-bg: var(--meta-swatch-colour-4); --swatch-dataviz-icon: var(--meta-swatch-mono-5); --swatch-dataviz-status-indicator: var(--meta-swatch-colour-1); /* 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-1); --swatch-coach-link-bg: transparent; --swatch-coach-text-link-hover: var(--meta-swatch-colour-1); --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-1); --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)); /* Patterns */ /* Global typography */ /* & */ --typo-strong-font-weight: 400; --typo-em-font-style: italic; /* Global */ --pattern-letter-spacing-body: 0.8px; --pattern-form-label-margin-bottom: 8px; /* Headings */ /* Heading 3XL */ /* Heading 2XL */ /* Heading XL */ --typo-h-xlarge-colour: var(--pattern-headings-colour); --typo-h-xlarge-font-face: 'body'; --typo-h-xlarge-font-size: 60px; --typo-h-xlarge-font-weight: 400; --typo-h-xlarge-font-style: normal; --typo-h-xlarge-line-height: 1.8; --typo-h-xlarge-letter-spacing: var(--pattern-letter-spacing-body); --typo-h-xlarge-text-transform: none; --typo-h-xlarge-text-align: center; --typo-h-xlarge-margin: 0 0 20px 0; /* Heading L */ --typo-h-large-colour: var(--pattern-headings-colour); --typo-h-large-font-face: 'body'; --typo-h-large-font-size: 35px; --typo-h-large-font-weight: 400; --typo-h-large-font-style: normal; --typo-h-large-line-height: 45px; --typo-h-large-letter-spacing: var(--pattern-letter-spacing-body); --typo-h-large-text-transform: none; --typo-h-large-text-align: center; --typo-h-large-margin: 0 0 20px 0; /* Heading M */ --typo-h-medium-colour: var(--pattern-headings-colour); --typo-h-medium-font-face: 'body'; --typo-h-medium-font-size: 30px; --typo-h-medium-font-weight: 400; --typo-h-medium-font-style: normal; --typo-h-medium-line-height: 38px; --typo-h-medium-letter-spacing: var(--pattern-letter-spacing-body); --typo-h-medium-text-transform: none; --typo-h-medium-text-align: center; --typo-h-medium-margin: 0 0 20px 0; /* Heading S */ --typo-h-small-colour: var(--pattern-headings-colour); --typo-h-small-font-face: 'body'; --typo-h-small-font-size: 18px; --typo-h-small-font-weight: 400; --typo-h-small-font-style: normal; --typo-h-small-line-height: 1.2; --typo-h-small-letter-spacing: var(--pattern-letter-spacing-body); --typo-h-small-text-transform: none; --typo-h-small-text-align: center; --typo-h-small-margin: 0 0 20px 0; /* Heading XS */ --typo-h-xs-colour: var(--pattern-headings-colour); /* 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 */ /* Paragraph L */ --typo-p-large-colour: var(--meta-swatch-mono-1); --typo-p-large-font-face: 'body'; --typo-p-large-font-size: 20px; --typo-p-large-font-weight: 200; --typo-p-large-font-style: normal; --typo-p-large-line-height: 1.8; --typo-p-large-letter-spacing: var(--pattern-letter-spacing-body); --typo-p-large-text-transform: none; --typo-p-large-text-align: center; --typo-p-large-margin: 0 0 20px 0; /* Paragraph M */ --typo-p-medium-colour: var(--meta-swatch-mono-1); --typo-p-medium-font-face: 'body'; --typo-p-medium-font-size: 16px; --typo-p-medium-font-weight: 200; --typo-p-medium-font-style: normal; --typo-p-medium-line-height: 30px; --typo-p-medium-letter-spacing: var(--pattern-letter-spacing-body); --typo-p-medium-text-transform: none; --typo-p-medium-text-align: center; --typo-p-medium-margin: 0 0 0.7rem 0; /* Paragraph S */ --typo-p-small-colour: var(--meta-swatch-mono-1); --typo-p-small-font-face: 'body'; --typo-p-small-font-size: 14px; --typo-p-small-font-weight: 200; --typo-p-small-font-style: normal; --typo-p-small-line-height: 1.8; --typo-p-small-letter-spacing: var(--pattern-letter-spacing-body); --typo-p-small-text-transform: none; --typo-p-small-text-align: center; --typo-p-small-margin: 0 0 20px 0; /* Paragraph XS */ /*

"concluding" */ --typo-p-concluding-colour: var(--typo-p-medium-colour); --typo-p-concluding-font-face: var(--typo-p-medium-font-face); --typo-p-concluding-font-size: 11px; --typo-p-concluding-font-weight: var(--typo-p-medium-font-weight); --typo-p-concluding-font-style: var(--typo-p-medium-font-style); --typo-p-concluding-line-height: 2; --typo-p-concluding-letter-spacing: var(--typo-p-medium-letter-spacing); --typo-p-concluding-text-transform: var(--typo-p-medium-text-transform); --typo-p-concluding-text-align: var(--typo-p-medium-text-align); --typo-p-concluding-margin: var(--typo-p-medium-text-align); /*

"article-intro" */ --template-articles-intro-colour: var(--typo-p-medium-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: var(--typo-p-medium-font-style); --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(--pattern-strong-text-colour); --typo-p-cta-font-face: 'body'; --typo-p-cta-font-size: 18px; --typo-p-cta-font-weight: 400; --typo-p-cta-font-style: normal; --typo-p-cta-line-height: 1.8; --typo-p-cta-letter-spacing: var(--pattern-letter-spacing-body); --typo-p-cta-text-transform: none; --typo-p-cta-text-align: center; --typo-p-cta-margin: 0 0 20px 0; /* Labels */ /* Label 2XL */ /* Label XL */ /* Label L */ --typo-data-label-l-colour: var(--meta-swatch-mono-1); --typo-data-label-l-font-face: 'body'; --typo-data-label-l-font-size: 16px; --typo-data-label-l-font-weight: 200; --typo-data-label-l-font-style: normal; --typo-data-label-l-line-height: 1.8; --typo-data-label-l-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-label-l-text-transform: none; --typo-data-label-l-text-align: center; --typo-data-label-l-margin-bottom: 0 0 20px 0; /* Label M */ --typo-data-label-m-colour: var(--meta-swatch-mono-1); --typo-data-label-m-font-face: 'body'; --typo-data-label-m-font-size: 14px; --typo-data-label-m-font-weight: 200; --typo-data-label-m-font-style: normal; --typo-data-label-m-line-height: 30px; --typo-data-label-m-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-label-m-text-transform: none; --typo-data-label-m-text-align: center; --typo-data-label-m-margin-bottom: 0 0 20px 0; /* Label S */ --typo-data-label-s-colour: var(--meta-swatch-mono-1); --typo-data-label-s-font-face: 'body'; --typo-data-label-s-font-size: 12px; --typo-data-label-s-font-weight: 200; --typo-data-label-s-font-style: normal; --typo-data-label-s-line-height: 1.8; --typo-data-label-s-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-label-s-text-transform: none; --typo-data-label-s-text-align: center; --typo-data-label-s-margin-bottom: 0 0 20px 0; /* Label XS */ --typo-data-label-xs-colour: var(--meta-swatch-mono-1); --typo-data-label-xs-font-face: 'body'; --typo-data-label-xs-font-size: 11px; --typo-data-label-xs-font-weight: 200; --typo-data-label-xs-font-style: normal; --typo-data-label-xs-line-height: 1.8; --typo-data-label-xs-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-label-xs-text-transform: none; --typo-data-label-xs-text-align: center; --typo-data-label-xs-margin-bottom: 0 0 20px 0; /* Label 2XS */ /* Data */ /* Data 2XL */ --typo-data-2xl-colour: var(--meta-swatch-mono-1); --typo-data-2xl-font-face: 'body'; --typo-data-2xl-font-size: 32px; --typo-data-2xl-font-weight: 400; --typo-data-2xl-font-style: normal; --typo-data-2xl-line-height: 1.8; --typo-data-2xl-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-2xl-text-transform: none; --typo-data-2xl-text-align: center; --typo-data-2xl-margin-bottom: 0 0 20px 0; /* Data XL */ --typo-data-xl-colour: var(--meta-swatch-mono-1); --typo-data-xl-font-face: 'body'; --typo-data-xl-font-size: 24px; --typo-data-xl-font-weight: 400; --typo-data-xl-font-style: normal; --typo-data-xl-line-height: 1.8; --typo-data-xl-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-xl-text-transform: none; --typo-data-xl-text-align: center; --typo-data-xl-margin-bottom: 0 0 20px 0; /* Data L */ --typo-data-l-colour: var(--meta-swatch-mono-1); --typo-data-l-font-face: 'body'; --typo-data-l-font-size: 20px; --typo-data-l-font-weight: 400; --typo-data-l-font-style: normal; --typo-data-l-line-height: 1.8; --typo-data-l-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-l-text-transform: none; --typo-data-l-text-align: center; --typo-data-l-margin-bottom: 0 0 20px 0; /* Data M */ --typo-data-m-colour: var(--meta-swatch-mono-1); --typo-data-m-font-face: 'body'; --typo-data-m-font-size: 16px; --typo-data-m-font-weight: 400; --typo-data-m-font-style: normal; --typo-data-m-line-height: 1.8; --typo-data-m-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-m-text-transform: none; --typo-data-m-text-align: center; --typo-data-m-margin-bottom: 0 0 20px 0; /* Data S */ --typo-data-s-colour: var(--meta-swatch-mono-1); --typo-data-s-font-face: 'body'; --typo-data-s-font-size: 14px; --typo-data-s-font-weight: 400; --typo-data-s-font-style: normal; --typo-data-s-line-height: 1.8; --typo-data-s-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-s-text-transform: none; --typo-data-s-text-align: center; --typo-data-s-margin-bottom: 0 0 20px 0; /* Data XS */ --typo-data-xs-colour: var(--meta-swatch-mono-1); --typo-data-xs-font-face: 'body'; --typo-data-xs-font-size: 12px; --typo-data-xs-font-weight: 400; --typo-data-xs-font-style: normal; --typo-data-xs-line-height: 1.8; --typo-data-xs-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-xs-text-transform: none; --typo-data-xs-text-align: center; --typo-data-xs-margin-bottom: 0 0 20px 0; /* Data 2XS */ --typo-data-2xs-colour: var(--meta-swatch-mono-1); --typo-data-2xs-font-face: 'body'; --typo-data-2xs-font-size: 11px; --typo-data-2xs-font-weight: 400; --typo-data-2xs-font-style: normal; --typo-data-2xs-line-height: 1.8; --typo-data-2xs-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-2xs-text-transform: none; --typo-data-2xs-text-align: center; --typo-data-2xs-margin-bottom: 0 0 20px 0; /* Data 3XS */ --typo-data-3xs-colour: var(--meta-swatch-mono-1); --typo-data-3xs-font-face: 'body'; --typo-data-3xs-font-size: 16px; --typo-data-3xs-font-weight: 400; --typo-data-3xs-font-style: normal; --typo-data-3xs-line-height: 1.8; --typo-data-3xs-letter-spacing: var(--pattern-letter-spacing-body); --typo-data-3xs-text-transform: none; --typo-data-3xs-text-align: center; --typo-data-3xs-margin-bottom: 0 0 20px 0; /* Forms */ /* Labels */ --typo-form-label-colour: var(--pattern-strong-text-colour); --typo-form-label-font-face: 'body'; --typo-form-label-font-size: 15px; --typo-form-label-font-weight: 400; --typo-form-label-font-style: normal; --typo-form-label-line-height: 1; --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(--pattern-strong-text-colour); --typo-form-value-font-face: 'body'; --typo-form-value-font-size: 16px; --typo-form-value-font-weight: 400; --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: 16px; --pattern-layout-spacer-sections-s: 40px; --pattern-layout-spacer-components-s: 16px; --pattern-layout-spacer-content-s: 8px; --pattern-layout-spacer-bottom-s: 24px; --pattern-layout-spacer-top-ml: 16px; --pattern-layout-spacer-sections-ml: 48px; --pattern-layout-spacer-components-ml: 24px; --pattern-layout-spacer-content-ml: 8px; --pattern-layout-spacer-bottom-ml: 32px; --layout-icon-size: 24px; --pattern-icon-size: 24px; --layout-sub-width: 100%; /* Colour */ --pattern-accent-bg: var(--meta-swatch-colour-7); --pattern-accent-foreground: var(--meta-swatch-colour-8); --pattern-interaction-colour: var(--meta-swatch-colour-1); --pattern-negative-colour: var(--meta-swatch-colour-1); --pattern-headings-colour: var(--meta-swatch-colour-8); --pattern-strong-text-colour: var(--meta-swatch-mono-2); --pattern-subtle-text-colour: var(--meta-swatch-mono-2); --pattern-disabled-opacity: 0.3; --pattern-hover-colour: var(--meta-swatch-colour-1); --pattern-keyline-colour: var(--meta-swatch-mono-4); --pattern-card-bg-colour: var(--meta-swatch-mono-4); --pattern-data-colour: var(--meta-swatch-colour-4); --pattern-indicator-colour: var(--meta-swatch-colour-1); --pattern-data-value-colour: var(--meta-swatch-colour-1); --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: var(--meta-swatch-mono-1); --pattern-border-radius-m: 16px; --effect-card-border-radius: 10px; --effect-keyline-width: 1px; --effect-keyline-width-menu: 1px; --effect-forms-border-width: 1px; --effects-indicator-width: 4px; --pattern-elevation-low: 0px 3px 4px rgba(0, 0, 0, 0.12); --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-4); --pattern-keyline-width: 1px; --navbar-icons-bg-border-radius: 50%; /* Vars to check if we can delete */ /*

*/ --typo-figcaption-colour: var(--pattern-strong-text-colour); --typo-figcaption-font-face: 'body'; --typo-figcaption-font-size: 14px; --typo-figcaption-font-weight: 300; --typo-figcaption-font-style: normal; --typo-figcaption-line-height: 1.2; --typo-figcaption-letter-spacing: 0; --typo-figcaption-text-transform: none; --typo-figcaption-margin-bottom: 8px; /* Old vars */ /* Body */ --face-body: 'body'; --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: 400; --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: 'body'; --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: 'body'; --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: 400; --forms-input-label-size: 16px; --forms-input-label-weight: normal; --forms-input-option-size: 18px; --forms-input-option-weight: normal; /* Navigation */ --face-navigation: 'body'; --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: 'body'; --letter-spacing-data-label: -0.03rem; --line-height-data-label: 1.2; --text-transform-data-label: none; --data-label-s-size: 14px; --data-label-s-weight: 300; --data-label-s-size: 16px; --data-label-s-weight: 300; --data-label-l-size: 18px; --data-label-l-weight: 300; /* Data output */ --par-margin-data-output: 0rem; --face-data-output: 'body'; --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: 400; --data-output-s-size: 24px; --data-output-s-weight: 400; --data-output-l-size: 32px; --data-output-l-weight: 400; /* 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: none; --template-dashboard-adverts-bottom-spacer-display: block; /* Advert block container */ --advert-border: none; --advert-border-radius: 16px; --advert-padding: 16px; --advert-margin: 16px 0; /* Heading */ --advert-heading-colour: var(--meta-swatch-mono-5); --advert-heading-font-family: var(--typo-h-large-font-face); --advert-heading-font-size: var(--typo-h-large-font-size); --advert-heading-font-weight: var(--typo-h-large-font-weight); --advert-heading-font-style: var(--typo-h-large-font-style); --advert-heading-line-height: var(--typo-h-large-line-height); --advert-heading-letter-spacing: var(--typo-h-large-letter-spacing); --advert-heading-text-transform: var(--typo-h-large-text-transform); --advert-heading-text-align: var(--typo-h-large-text-align); /* Paragraph */ --advert-paragraph-colour: var(--meta-swatch-mono-5); --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); /* Button block overrides */ --advert-button-margin: 0 auto; --advert-button-min-width: 240px; --advert-button-max-width: 400px; /* Article read */ /* Icon */ --template-articles-done-icon-colour: var(--meta-swatch-mono-5); --template-articles-done-icon-size: 32px; /* Icon background */ --template-articles-done-icon-bg-size: 48px; --template-articles-done-icon-bg-colour: var(--pattern-interaction-colour); --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: transparent; --typo-quote-colour: var(--pattern-strong-text-colour); --typo-quote-font-face: 'body'; --typo-quote-font-size: 24px; --typo-quote-font-weight: 200; --typo-quote-font-style: italic; --typo-quote-line-height: 1.5; --typo-quote-letter-spacing: var(--pattern-letter-spacing-body); --typo-quote-text-transform: none; --typo-quote-text-align: center; --typo-quote-padding: 2rem 0; --typo-quote-margin: 0; --typo-quote-max-width: 100%; --typo-quote-border-top: 1px solid var(--meta-swatch-mono-3); --typo-quote-border-bottom: 1px solid var(--meta-swatch-mono-3); /* */ --type-quote-cite-colour: var(--pattern-strong-text-colour); --type-quote-cite-font-face: 'body'; --type-quote-cite-font-size: 18px; --type-quote-cite-font-weight: 400; --type-quote-cite-font-style: italic; --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: center; /* Body */ /* Callout */ /* Container */ /* Header */ /* Icon */ /* Headings */ /* Paragraphs */ /* Coach explainer */ /* Block container */ /* Icon */ /* Content / Paragraph */ /* Content / List items */ /* Cover */ /* 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: 0.5rem; --cover-text-spacer-ml: 0.5rem; /* Buttons */ /* Donut */ --pie-chart-whole-fill: transparent; --pie-chart-whole-stroke: var(--meta-swatch-mono-4); --pie-chart-value-fill: transparent; --pie-chart-value-stroke: var(--meta-swatch-colour-5); --pie-chart-value-stroke-linecap: round; --pie-chart-marker-fill: white; /* Image */ /* Align left */ /* Align right */ /* Align center */ /* Caption */ /* Introducer Banner */ /* Block */ /* Container */ /* Text */ /* Logo container */ /* Logo */ /* In page message */ /* Job card */ /* Container */ /* Found indicator */ /* Logo */ /* Logo background colors */ /* Logo text colors */ /* Time range label */ /* Body */ /* Header container */ /* Employer heading */ /* Difficulty indicator */ /* Card icons */ /* Info row */ /* Info row label */ /* Info row data */ /* Button container */ /* Letter Link */ /* Property card */ /* Container */ --property-header-container-background: #ffffff; --property-header-container-border-radius: 10px; --property-header-container-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25); --property-header-container-padding: 0; --property-header-container-direction: column; --property-header-container-align-items-ml: stretch; --property-header-container-direction-ml: row; /* Image */ --property-header-image-border-radius: none; --property-header-image-height: 128px; --property-header-image-width: 100%; --property-header-image-height-ml: 100%; --property-header-image-width-ml: 200px; /* Information icon container */ --property-header-info-container-padding: 4px; --property-header-info-container-margin: 6px 0 0 0; --property-header-info-container-bg-color: var(--meta-swatch-colour-10); --property-header-info-container-padding-ml: 4px; --property-header-info-container-margin-ml: 0; /* Info icon */ --property-header-info-icon-color: #fff; --property-header-info-icon-size: 26px; /* Property card on portfolio */ --property-card-container-background: #ffffff; --property-card-container-border-radius: 10px; --property-card-container-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25); --property-card-container-padding: 20px; --property-card-container-direction: column; /* Section */ --property-card-section-margin: 12px 0 0 0; --property-card-section-border-width: 1px; --property-card-section-border-color: #545454; --property-card-section-border-style: solid; /* Action btn */ --property-card-action-btn-container-direction: row; --property-card-action-btn-container-align-items: center; --property-card-action-btn-container-justify-content: space-between; /* Action btn label */ /* Action btn icon */ --property-card-action-btn-icon-size: 24px; --property-card-action-btn-icon-color: #545454; /* Property CTA */ /* Container */ --property-cta-min-height: 48px; --property-cta-background: #ffffff; --property-cta-border: 2px solid #FAA74A; --property-cta-border-radius: 34px; --property-cta-box-shadow: none; --property-cta-padding: 9px 16px; /* Label */ --property-cta-label-colour: var(--typo-data-label-s-colour); --property-cta-label-font-face: var(--typo-data-label-s-font-face); --property-cta-label-font-size: var(--typo-data-label-s-font-size); --property-cta-label-font-weight: var(--typo-data-label-s-font-weight); --property-cta-label-font-style: var(--typo-data-label-s-font-style); --property-cta-label-line-height: var(--typo-data-label-s-line-height); --property-cta-label-letter-spacing: var(--typo-data-label-s-letter-spacing); --property-cta-label-text-transform: var(--typo-data-label-s-text-transform); --property-cta-label-text-align: center; /* Property Stats */ /* Container */ --property-stats-container-columns: 3; --property-stats-container-columns-gap: 0px; /* Item container */ --property-stats-item-container-padding: 16px 0 0 0; --property-stats-item-container-direction: column; --property-stats-item-container-align-items: center; --property-stats-item-container-justify-content: flex-start; /*Icon */ --property-stats-icon-height: var(--pattern-icon-size); --property-stats-icon-width: var(--pattern-icon-size); --property-stats-icon-margin: 0 0 10px 0; --property-stats-icon-color: var(--meta-swatch-colour-8); --property-stats-icon-order: 1; /* Value */ --property-stats-value-colour: var(--meta-swatch-colour-8); --property-stats-value-font-size: 18px; --property-stats-value-font-weight: bold; --property-stats-value-order: 2; /* Label */ --property-stats-label-colour: var(--meta-swatch-colour-8); --property-stats-label-font-face: var(--typo-data-label-s-font-face); --property-stats-label-font-size: var(--typo-data-label-s-font-size); --property-stats-label-font-weight: var(--typo-data-label-s-font-weight); --property-stats-label-font-style: var(--typo-data-label-s-font-style); --property-stats-label-line-height: 1.5; --property-stats-label-label-spacing: var(--typo-data-label-s-letter-spacing); --property-stats-label-text-transform: var(--typo-data-label-s-text-transform); --property-stats-label-text-align: center; --property-stats-label-margin: 0; --property-stats-label-order: 3; /* Property Id */ /* Container */ --property-id-container-direction: row; --property-id-container-align-items: center; --property-id-container-justify-content: flex-start; /* Label container */ --property-id-label-margin: 0 0 0 16px; /* Label */ --property-id-label-colour: var(--typo-data-label-s-colour); --property-id-label-font-face: var(--typo-data-label-s-font-face); --property-id-label-font-size: var(--typo-data-label-s-font-size); --property-id-label-font-weight: var(--typo-data-label-s-font-weight); --property-id-label-font-style: var(--typo-data-label-s-font-style); --property-id-label-line-height: 1.5; --property-id-label-label-spacing: var(--typo-data-label-s-letter-spacing); --property-id-label-text-transform: var(--typo-data-label-s-text-transform); --property-id-label-text-align: var(--typo-data-label-s-text-align); /*Image */ --property-id-image-display: block; --property-id-image-border-radius: 5px; --property-id-image-width: 54px; --property-id-image-height: 54px; /* Media & Text */ --media-text-content-display: flex; --media-text-content-flex-direction: column; --media-text-content-justify-content: center; /* Block container */ /* Text container */ /* Image container */ /* Block container */ /* Text container */ /* Image container */ /* 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-8); /* 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: 16px; --template-articles-metabox-bg-colour: var(--meta-swatch-mono-5); --template-articles-metabox-border: var(--pattern-card-border); --template-articles-metabox-border-radius: var(--pattern-border-radius-m); --template-articles-metabox-box-shadow: var(--pattern-elevation-low); /* Text */ --template-articles-metabox-colour: var(--pattern-subtle-text-colour); --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: column; --template-articles-metabox-list-margin: 0; --template-articles-metabox-list-padding: 0; /* Item */ --template-articles-metabox-item-margin: 0; --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(102, 136, 145, 0.9); --effect-overlay-border-radius: 0; /* Block Container */ --modal-content-bg: var(--meta-swatch-mono-5); --modal-dimmer-color: rgba(102, 136, 145, 0.9); --modal-border-radius: 10px 10px 0px 0px; --modal-border-radius-m: 10px 10px 10px 10px; --modal-border-radius-l: 10px 10px 10px 10px; --modal-width-m: 720px; --modal-width-l: 1024px; /* Modal body */ --modal-body-padding: 16px; --modal-body-padding-m: 16px; --modal-body-padding-l: 16px; --modal-body-gap: 8px; --modal-body-gap-m: 8px; --modal-body-gap-l: 8px; /* Header Container */ --modal-header-background-color: var(--meta-swatch-mono-5); --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(--meta-swatch-mono-2); --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: 16px; --modal-header-padding: 16px 16px 0; --modal-header-padding-m: 16px 16px 0; --modal-header-padding-l: 16px 16px 0; /* Modal footer */ --modal-footer-margin: 0; --modal-footer-text-colour: var(--meta-swatch-mono-5); --modal-footer-text-font-family: var(--typo-p-small-font-family); --modal-footer-text-font-size: var(--typo-p-small-font-size); --modal-footer-text-font-weight: var(--typo-p-small-font-weight); --modal-footer-text-font-style: var(--typo-p-small-font-style); --modal-footer-text-line-height: var(--typo-p-small-line-height); --modal-footer-text-font-spacing: var(--typo-p-small-letter-spacing); --modal-footer-text-text-align: left; --modal-footer-text-padding: 16px; /* Cookies modal overrides */ /* Page Header */ /* Container */ --theme-page-header-bg-colour: var(--meta-swatch-colour-8); /* Keylines */ --theme-page-header-keyline: none; /* Icon */ --theme-page-header-icon-colour: transparent; /* Content inner container */ /* Back Icon */ /* Identifier container */ --page-header-category-margin: 0 auto 12px; --page-header-category-margin-m: 0 auto 12px; --page-header-category-margin-l: 0 auto 12px; --page-header-category-padding: 6px 16px; --page-header-category-background: var(--meta-swatch-mono-4); --page-header-category-border: none; --page-header-category-border-radius: 40px; /* Identifier label */ --page-header-category-label-colour: var(--meta-swatch-colour-8); --page-header-category-label-font-family: 'body'; --page-header-category-label-font-size: 14px; --page-header-category-label-font-size-m: 16px; --page-header-category-label-font-size-l: 16px; --page-header-category-label-font-weight: 400; --page-header-category-label-font-style: normal; --page-header-category-label-line-height: 1; --page-header-category-label-text-align: center; /* Heading */ --theme-page-header-heading-colour: var(--meta-swatch-mono-5); --page-header-heading-face: var(--typo-h-large-font-face); --page-header-heading-size: var(--typo-h-large-font-size); --page-header-heading-size-m: var(--typo-h-large-font-size); --page-header-heading-size-l: var(--typo-h-large-font-size); --page-header-heading-weight: var(--typo-h-large-font-weight); --page-header-heading-font-style: var(--typo-h-large-font-style); --page-header-heading-line-height: 1.4; --page-header-heading-letter-spacing: var(--typo-h-large-letter-spacing); --page-header-heading-text-transform: var(--typo-h-large-text-transform); --page-header-heading-text-align: var(--typo-h-large-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-5); --page-header-sub-heading-face: var(--typo-p-medium-font-face); --page-header-sub-heading-size: var(--typo-p-medium-font-size); --page-header-sub-heading-weight: var(--typo-p-medium-font-weight); --page-header-sub-heading-font-style: var(--typo-p-medium-font-style); --page-header-sub-heading-line-height: var(--typo-p-medium-line-height); --page-header-sub-heading-letter-spacing: var(--typo-p-medium-letter-spacing); --page-header-sub-heading-text-transform: var(--typo-p-medium-text-transform); --page-header-sub-heading-text-align: var(--typo-p-medium-text-align); /* Spacing */ --page-header-spacer-top: 24px; --page-header-spacer-below-heading: 8px; --page-header-spacer-bottom: 24px; --page-header-spacer-top-m: 24px; --page-header-spacer-below-heading-m: 8px; --page-header-spacer-bottom-m: 24px; --page-header-spacer-top-l: 24px; --page-header-spacer-below-heading-l: 8px; --page-header-spacer-bottom-l: 24px; /* Content Grid Layout */ /* Block type: Image */ /* Progress Indicator */ --app-progress-bar-height: 48px; --app-progress-bar-height-m: 48px; --app-progress-bar-height-l: 48px; /* Wrapper - to set the bg color*/ --progress-indicator-wrapper-background: var(--meta-swatch-colour-8); /* Items parent container */ /* Items */ --progress-indicator-container-justify-content: space-between; --progress-indicator-container-max-width: 100%; --progress-indicator-container-margin: 0 0 16px; --progress-indicator-container-gap: 8px; /* Keyline*/ /* Item layout */ --progress-indicator-height: 12px; --progress-indicator-width: 100%; --progress-indicator-max-width: 240px; --progress-indicator-border-radius: 16px; --progress-indicator-margin: 0 4px; /* Text description */ /* Icon */ --progress-indicator-icon-height: 18px; --progress-indicator-icon-width: 18px; /* Item states */ /* Before */ --progress-indicator-background-before: var(--meta-swatch-colour-7); --progress-indicator-border-before: 0; --progress-indicator-text-color-before: var(--meta-swatch-mono-5); --progress-indicator-icon-color-before: var(--meta-swatch-mono-5); --progress-indicator-border-radius-before: 20px; /* Current */ --progress-indicator-background-current: var(--meta-swatch-mono-4); --progress-indicator-border-current: 3px solid var(--meta-swatch-colour-7); --progress-indicator-text-color-current: var(--meta-swatch-mono-1); --progress-indicator-icon-color-current: var(--meta-swatch-mono-1); --progress-indicator-border-radius-current: 20px; /* After */ --progress-indicator-background-after: var(--meta-swatch-mono-4); --progress-indicator-border-after: 0; --progress-indicator-text-color-after: var(--meta-swatch-mono-1); --progress-indicator-icon-color-after: var(--meta-swatch-mono-1); --progress-indicator-border-radius-after: 20px; /* Label */ /* Progress Loader Bar */ /* Container */ --loader-bar-container-background: #CCCCCC; --loader-bar-container-height: 15px; --loader-bar-container-border-radius: 20px; --loader-bar-container-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3); /* Filler */ --loader-bar-progress-border-radius: 20px 8px 8px 20px; --loader-bar-progress-background: var(--meta-swatch-colour-5); /* Animation */ --loader-bar-animation-background-size: 50px 50px; --loader-bar-animation-speed: 50px 50px; /* Share menu */ /* Container */ --share-heading-colour: var(--typo-h-small-colour); --share-heading-font-family: var(--typo-h-small-font-face); --share-heading-font-size: var(--typo-h-small-font-size); --share-heading-font-weight: var(--typo-h-small-font-weight); --share-heading-font-style: var(--typo-h-small-font-style); --share-heading-line-height: var(--typo-h-small-line-height); --share-heading-letter-spacing: var(--typo-h-small-letter-spacing); --share-heading-text-transform: var(--typo-h-small-text-transform); --share-heading-text-align: var(--typo-h-small-text-align); /* 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-4); --share-network-button-border: none; --share-network-button-border-radius: 24px; --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: 'body'; --share-network-button-label-font-size: 14px; --share-network-button-label-font-weight: 400; --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: 0 8px 0 0; /* URL container */ --share-url-flex-direction: row; --share-url-background-colour: var(--meta-swatch-mono-4); --share-url-border: none; --share-url-border-radius: 3px; --share-url-box-shadow: none; --share-url-padding: 16px 8px; /* URL text */ --share-url-text-colour: var(--meta-swatch-mono-2); --share-url-text-font-family: 'body'; --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: 2px 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-2); --share-url-button-off-label-font-family: 'body'; --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: 'body'; --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 */ /* Both Article Containers */ /* Grid Container */ /* Text Container */ /* Image Container */ /* Container 1 */ /* Container 2 */ /* Image */ /* Split heading */ /* Split emphasis */ /* Split buttons */ /* Split List */ /* Text - Headings */ /* Container */ /* Heading */ --page-template-heading-colour: var(--meta-swatch-colour-8); --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-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); /*

*/ --typo-h1-colour: var(--pattern-headings-colour); --typo-h1-font-face: 'body'; --typo-h1-font-size: 35px; --typo-h1-font-weight: 400; --typo-h1-font-style: normal; --typo-h1-line-height: 45px; --typo-h1-letter-spacing: var(--pattern-letter-spacing-body); --typo-h1-text-transform: none; --typo-h1-text-align: center; --typo-h1-margin: 0 0 20px 0; /*

*/ --typo-h2-colour: var(--pattern-headings-colour); --typo-h2-font-face: 'body'; --typo-h2-font-size: 30px; --typo-h2-font-weight: 400; --typo-h2-font-style: normal; --typo-h2-line-height: 38px; --typo-h2-letter-spacing: var(--pattern-letter-spacing-body); --typo-h2-text-transform: none; --typo-h2-text-align: center; --typo-h2-margin: 0 0 20px 0; /*

*/ --typo-h3-colour: var(--pattern-headings-colour); --typo-h3-font-face: 'body'; --typo-h3-font-size: 22px; --typo-h3-font-weight: 400; --typo-h3-font-style: normal; --typo-h3-line-height: 1.2; --typo-h3-letter-spacing: var(--pattern-letter-spacing-body); --typo-h3-text-transform: none; --typo-h3-text-align: center; --typo-h3-margin: 0 0 20px 0; /*

*/ --typo-h4-colour: var(--pattern-headings-colour); --typo-h4-font-face: 'body'; --typo-h4-font-size: 16px; --typo-h4-font-weight: 400; --typo-h4-font-style: normal; --typo-h4-line-height: 1.2; --typo-h4-letter-spacing: var(--pattern-letter-spacing-body); --typo-h4-text-transform: none; --typo-h4-text-align: center; --typo-h4-margin: 1.5rem 0 0.7rem; /*

*/ --typo-h5-colour: var(--pattern-headings-colour); --typo-h5-font-face: 'body'; --typo-h5-font-size: 16px; --typo-h5-font-weight: 400; --typo-h5-font-style: normal; --typo-h5-line-height: 1.2; --typo-h5-letter-spacing: var(--pattern-letter-spacing-body); --typo-h5-text-transform: none; --typo-h5-text-align: center; --typo-h5-margin: 0 0 20px 0; /*
*/ --typo-h6-colour: var(--pattern-headings-colour); --typo-h6-font-face: 'body'; --typo-h6-font-size: 16px; --typo-h6-font-weight: 400; --typo-h6-font-style: normal; --typo-h6-line-height: 1.2; --typo-h6-letter-spacing: var(--pattern-letter-spacing-body); --typo-h6-text-transform: none; --typo-h6-text-align: center; --typo-h6-margin: 0 0 20px 0; /* Text - Links */ /* */ --typo-a-link-border-radius: 0; --typo-a-link-bg-colour: transparent; --typo-a-link-colour: var(--meta-swatch-colour-1); --typo-a-link-font-weight: inherit; --typo-a-link-font-style: inherit; --typo-a-link-letter-spacing: inherit; --typo-a-link-text-decoration: none; --typo-a-link-text-transform: inherit; --typo-a-link-padding-bottom: 0.1rem; --typo-a-link-border-bottom: 1px solid var(--meta-swatch-colour-1); --typo-a-link-position-top: 0; /* :hover */ --typo-a-hover-border-radius: 0; --typo-a-hover-bg-colour: var(--meta-swatch-colour-1); --typo-a-hover-colour: var(--meta-swatch-mono-1); --typo-a-hover-font-weight: inherit; --typo-a-hover-font-style: inherit; --typo-a-hover-letter-spacing: inherit; --typo-a-hover-text-decoration: none; --typo-a-hover-text-transform: inherit; --typo-a-hover-padding-bottom: 0.1rem; --typo-a-hover-border-bottom: 1px solid var(--meta-swatch-colour-1); --typo-a-hover-position-top: 0; /* :active */ --typo-a-active-border-radius: 0; --typo-a-active-bg-colour: var(--meta-swatch-colour-1); --typo-a-active-colour: var(--meta-swatch-mono-1); --typo-a-active-font-weight: inherit; --typo-a-active-font-style: inherit; --typo-a-active-letter-spacing: inherit; --typo-a-active-text-decoration: none; --typo-a-active-text-transform: inherit; --typo-a-active-padding-bottom: 0.1rem; --typo-a-active-border-bottom: 1px solid var(--meta-swatch-colour-1); --typo-a-active-position-top: 2px; /* :visited */ --typo-a-visited-border-radius: 0; --typo-a-visited-bg-colour: transparent; --typo-a-visited-colour: var(--meta-swatch-colour-1); --typo-a-visited-font-weight: inherit; --typo-a-visited-font-style: inherit; --typo-a-visited-letter-spacing: inherit; --typo-a-visited-text-decoration: none; --typo-a-visited-text-transform: inherit; --typo-a-visited-padding-bottom: 0.1rem; --typo-a-visited-border-bottom: 1px solid var(--meta-swatch-colour-1); --typo-a-visited-position-top: 0; /* Text - Lists */ /*
    */ --typo-ul-colour: var(--pattern-strong-text-colour); --typo-ul-font-face: 'body'; --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; /*
      */ --typo-ol-colour: var(--pattern-strong-text-colour); --typo-ol-font-face: 'body'; --typo-ol-font-size: 18px; --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: 'body'; --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-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: var(--typo-p-medium-margin); /* 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-5); --toast-border: 1px solid var(--meta-swatch-colour-4); --toast-border-radius: 12px; --toast-margin: 10px; --toast-padding: 24px 16px; /* Comms icon */ --toast-comms-icon-display: none; --toast-comms-icon-colour: var(--meta-swatch-mono-2); --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-2); --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: 'body'; --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: center; /* Tooltip */ --tooltip-padding: 8px; --tooltip-border-radius: 4px; --tooltip-background: var(--meta-swatch-mono-5); --tooltip-border: 1px solid var(--meta-swatch-mono-3); --tooltip-box-shadow: 0px 4px 10px -3px rgba(0, 0, 0, 0.16); --tooltip-text-color: var(--meta-swatch-mono-2); --tooltip-text-font-family: var(--typo-data-label-xs-font-face); --tooltip-text-font-size: 12px; --tooltip-text-font-weight: 300; --tooltip-text-font-style: var(--typo-data-label-xs-font-style); --tooltip-text-line-height: var(--typo-data-label-xs-line-height); --tooltip-text-letter-spacing: var(--typo-data-label-xs-letter-spacing); --tooltip-text-text-transform: var(--typo-data-label-xs-text-transform); --tooltip-text-text-align: var(--typo-data-label-xs-text-align); /* Video embed */ --wp-block-embed-margin: 0 0 24px 0; /* Video overlay */ /* Block container */ --video-dimmer-background: var(--meta-swatch-mono-5); --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 72px; --video-container-padding-l: 48px 0 48px 72px; /* 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: 8px; --video-close-icon-bg-background: var(--meta-swatch-colour-1); --video-close-icon-bg-border: none; --video-close-icon-bg-border-radius: 50%; --video-close-icon-bg-box-shadow: none; --video-close-icon-size: var(--pattern-icon-size); --video-close-icon-color: var(--meta-swatch-mono-5); /* Forms */ /* Accessibility */ --global-focus-outline: none; --global-focus-outline-offset: 0; --global-focus-box-shadow: 0 0 0 4px black; /* Button */ /* All types - Main container */ --btn-align: center; --btn-width: 100%; --btn-max-width: 472px; --btn-height: 48px; --btn-height-m: 48px; --btn-height-l: 48px; --btn-margin: 0; --btn-padding: 4px 8px; --btn-border-radius: 24px; --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: 3px 8px 0; --btn-label-text-transform: var(--typo-p-medium-text-transform); --btn-label-face: var(--typo-p-small-font-face); --btn-label-font-size: 16px; --btn-label-font-weight: normal; --btn-label-letter-spacing: var(--pattern-letter-spacing-body); --btn-label-text-align: center; /* Major */ --btn-major-background: var(--meta-swatch-colour-8); --btn-major-border: none; --btn-major-box-shadow: 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-5); --btn-major-label-font-weight: normal; /* Minor */ --btn-minor-background: transparent; --btn-minor-border: 5px solid var(--meta-swatch-colour-8); --btn-minor-box-shadow: none; --btn-minor-icon-color: transparent; --btn-minor-icon-bg-color: transparent; --btn-minor-icon-border: none; --btn-minor-label-color: var(--meta-swatch-colour-8); --btn-minor-label-font-weight: 400; /* Diminished */ --btn-diminished-height: 24px; --btn-diminished-background: transparent; --btn-diminished-border: none; --btn-diminished-box-shadow: none; --btn-diminished-icon-color: transparent; --btn-diminished-icon-bg-color: transparent; --btn-diminished-icon-border: none; --btn-diminished-label-color: var(--meta-swatch-colour-8); --btn-diminished-label-font-weight: normal; --btn-diminished-label-text-decoration: underline; /* Negative */ --btn-negative-background: transparent; --btn-negative-border: 5px solid var(--meta-swatch-colour-13); --btn-negative-box-shadow: none; --btn-negative-icon-color: transparent; --btn-negative-icon-bg-color: transparent; --btn-negative-icon-border: none; --btn-negative-label-color: var(--meta-swatch-colour-13); --btn-negative-label-font-weight: 400; /* Destructive */ --btn-destructive-background: var(--meta-swatch-colour-13); --btn-destructive-border: none; --btn-destructive-box-shadow: 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-5); --btn-destructive-label-font-weight: normal; /* Special */ --btn-special-background: var(--meta-swatch-colour-8); --btn-special-border: none; --btn-special-box-shadow: 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-5); --btn-special-label-font-weight: normal; /* Temporary link styles */ /* Checkbox */ /* Checkbox group label */ /* Outer container */ /* Container */ --input-checkbox-container-padding: 8px 0; --input-checkbox-container-direction: row; --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; --input-checkbox-label-justify-content: flex-start; --input-checkbox-label-align-items: center; /* Image */ /* 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 8px 0 0; /*Sub label*/ /* Label opt 2 */ /* Option explainer */ /* Info icon */ --input-checkbox-informer-margin: 0 8px 0 0; /* Field */ --input-checkbox-off-background-colour: transparent; --input-checkbox-off-border: 1px solid var(--meta-swatch-mono-2); --input-checkbox-off-icon-colour: transparent; --input-checkbox-off-icon-size: 24px; --input-checkbox-off-border-radius: 0; --input-checkbox-off-box-shadow: none; --input-checkbox-on-background-colour: var(--meta-swatch-mono-5); --input-checkbox-on-border: 1px solid var(--meta-swatch-mono-2); --input-checkbox-on-icon-colour: var(--meta-swatch-colour-1); --input-checkbox-on-icon-size: 24px; --input-checkbox-on-border-radius: 0; --input-checkbox-on-box-shadow: none; --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-margin: 0; --forms-error-padding: 8px 0 0 0; --forms-error-background-color: transparent; /* Label */ --forms-error-label-colour: var(--meta-swatch-mono-2); --forms-error-label-font-family: 'body'; --forms-error-label-font-size: 12px; --forms-error-label-font-weight: 300; --forms-error-label-font-style: normal; --forms-error-label-line-height: 1.2; --forms-error-label-letter-spacing: 0; --forms-error-label-text-transform: none; --forms-error-label-text-align: left; /* Icon */ --forms-error-icon-display: none; --forms-error-icon-size: 24px; --forms-error-icon-colour: var(--meta-swatch-mono-2); --forms-error-icon-margin: 0 4px 0 0; /* Explainer message */ /* Container */ /* Label */ /* 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 */ --form-container-max-width: var(--btn-max-width); --form-container-max-width-m: var(--btn-max-width); --form-container-max-width-l: var(--btn-max-width); --form-container-margin: 0 auto; --form-container-margin-m: 0 auto; --form-container-margin-l: 0 auto; /* Input group */ --input-group-align: center; --input-group-max-width: 100%; --input-group-spacer: 24px; --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-1); --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-4); --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-4); --forms-input-menu-item-label-colour: var(--meta-swatch-mono-2); --forms-input-menu-item-label-font-family: 'body'; --forms-input-menu-item-label-font-size: 14px; --forms-input-menu-item-label-font-weight: normal; --forms-input-menu-item-label-font-style: normal; --forms-input-menu-item-label-line-height: 1.2; --forms-input-menu-item-label-letter-spacing: 0; --forms-input-menu-item-label-text-transform: none; --forms-input-menu-item-label-text-align: left; /* Popover */ /* Option container */ /* Option */ /* Option label */ /* Hover */ /* Popover menu */ /* Container */ --popover-menu-padding: 0; --popover-menu-max-height: 220px; --popover-menu-border-width: 1px; --popover-menu-border-style: solid; --popover-menu-border-color: var(--meta-swatch-mono-2); --popover-menu-background-color: var(--meta-swatch-mono-5); --popover-menu-border-radius: 3px; --popover-menu-box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1); /* 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(--meta-swatch-mono-1); --popover-menu-item-label-font-family: 'body'; --popover-menu-item-label-font-size: 17px; --popover-menu-item-label-font-weight: 400; --popover-menu-item-label-font-style: normal; --popover-menu-item-label-line-height: 1.2; --popover-menu-item-label-letter-spacing: 0; --popover-menu-item-label-text-transform: none; --popover-menu-item-label-text-align: left; --popover-menu-item-label-margin: 0 8px 0 0; /*Label overrides */ /* Hover overrides */ --popover-menu-item-background-color-hover: var(--meta-swatch-mono-4); --popover-menu-item-label-color-hover: var(--meta-swatch-mono-1); /* Focus overrides */ --popover-menu-item-background-color-focus: var(--meta-swatch-mono-4); --popover-menu-item-label-color-focus: var(--meta-swatch-mono-1); /* Icon */ --popover-menu-item-icon-size: 24px; --popover-menu-item-icon-margin: 0; --popover-menu-item-icon-colour: var(--meta-swatch-colour-5); /* Quick feedback */ /* Container */ --feedback-block-padding: 24px 0; --feedback-block-padding-m: 24px 0; --feedback-block-padding-l: 24px 0; --feedback-block-background: var(--meta-swatch-colour-3); --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-small-colour); --feedback-heading-font-family: var(--typo-h-small-font-face); --feedback-heading-font-size: var(--typo-h-small-font-size); --feedback-heading-font-weight: var(--typo-h-small-font-weight); --feedback-heading-font-style: var(--typo-h-small-font-style); --feedback-heading-line-height: var(--typo-h-small-line-height); --feedback-heading-letter-spacing: var(--typo-h-small-letter-spacing); --feedback-heading-text-transform: var(--typo-h-small-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-colour-2); /* 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-colour-7); --feedback-unanswered-icon-colour: var(--meta-swatch-colour-8); /* Answered */ --feedback-answered-icon-container-bg-colour: #dddddd; --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-colour-8); /* Radio buttons */ /* Outer container */ /* Container */ --input-radio-container-padding: 8px 0; --input-radio-container-direction: row; --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; --input-radio-label-justify-content: flex-start; --input-radio-label-align-items: center; /* Image */ /* Labels container */ /* 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: var(--typo-p-medium-font-size); --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 12px 0 0; /*Sub label*/ /* Label opt 2 */ /* Option explainer */ /* Info icon */ --input-radio-informer-margin: 0 8px 0 0; /* Field */ --input-radio-off-background-colour: transparent; --input-radio-off-border: 1px solid var(--meta-swatch-mono-2); --input-radio-off-icon-colour: transparent; --input-radio-off-icon-size: 24px; --input-radio-off-border-radius: 50%; --input-radio-off-box-shadow: none; --input-radio-on-background-colour: var(--meta-swatch-mono-5); --input-radio-on-border: 1px solid var(--meta-swatch-mono-2); --input-radio-on-icon-colour: var(--meta-swatch-colour-1); --input-radio-on-icon-size: 24px; --input-radio-on-border-radius: 50%; --input-radio-on-box-shadow: none; /* Link */ /* Required indicator */ /* Segmented button */ /* Container */ --forms-segmented-btn-height: unset; --forms-segmented-btn-box-shadow: none; --forms-segmented-btn-border: none; --forms-segmented-btn-border-radius: 3px; --forms-segmented-btn-bg-colour: var(--meta-swatch-mono-2); --forms-segmented-btn-padding: 1px; --forms-segmented-btn-width: 100%; --forms-segmented-btn-flex-direction: row; --forms-segmented-btn-flex-direction-m: row; --forms-segmented-btn-flex-direction-l: row; /* Item layout */ --forms-segmented-btn-item-height: 48px; --forms-segmented-btn-item-padding: 0px 4px; --forms-segmented-btn-item-margin: 1px; --forms-segmented-btn-item-margin-m: 1px; --forms-segmented-btn-item-margin-l: 1px; /* Item common props */ --forms-segmented-btn-item-label-face: var(--typo-form-label-font-face); --forms-segmented-btn-item-label-font-size: var(--typo-form-label-font-size); /* Item off */ --forms-segmented-btn-item-off-outer-radius: 0; --forms-segmented-btn-item-off-inner-radius: 0; --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: none; --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: 0; --forms-segmented-btn-item-on-inner-radius: 0; --forms-segmented-btn-item-on-bg-colour: transparent; --forms-segmented-btn-item-on-border: none; --forms-segmented-btn-item-on-box-shadow: var(--pattern-elevation-low); --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 */ /* Select menu */ /* Field */ --select-field-padding: 8px 16px; --select-field-border-width: 1px; --select-field-border-style: solid; --select-field-border-color: var(--meta-swatch-mono-2); --select-field-background-color: var(--meta-swatch-mono-5); --select-field-border-radius: 3px; --select-field-box-shadow: none; /* Label */ --select-label-colour: var(--meta-swatch-mono-2); --select-label-font-family: 'body'; --select-label-font-size: 12px; --select-label-font-weight: normal; --select-label-font-style: normal; --select-label-line-height: 1.2; --select-label-letter-spacing: -0.03rem; --select-label-text-transform: none; --select-label-text-align: left; /* Value */ --select-value-colour: var(--meta-swatch-mono-1); --select-value-font-family: 'body'; --select-value-font-size: 17px; --select-value-font-weight: 400; --select-value-font-style: normal; --select-value-line-height: 1.2; --select-value-letter-spacing: 0; --select-value-text-transform: none; --select-value-text-align: left; /* Icon */ --select-icon-size: 24px; --select-icon-colour: var(--meta-swatch-colour-1); --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-colour-3); --input-switch-off-body-border: none; --input-switch-off-body-box-shadow: none; --input-switch-off-handle-bg-colour: var(--meta-swatch-mono-5); --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: none; --input-switch-on-handle-bg-colour: var(--meta-swatch-mono-5); --input-switch-on-handle-border: none; --input-switch-on-handle-box-shadow: none; /* Body mandatory */ --input-switch-mandatory-body-background: var(--meta-swatch-colour-10); --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: var(--typo-p-medium-font-size); --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); --input-switch-disallowed-body-background: var(--meta-swatch-mono-4); --input-switch-disallowed-body-label-colour: var(--meta-swatch-mono-2); /* Label */ --input-switch-label-direction: row; --input-switch-label-justify-content: flex-start; --input-switch-label-align-items: center; --input-switch-label-colour: var(--typo-p-medium-colour); --input-switch-label-font-family: var(--typo-p-medium-font-face); --input-switch-label-font-size: var(--typo-p-medium-font-size); --input-switch-label-font-weight: 400; --input-switch-label-font-style: var(--typo-p-medium-font-style); --input-switch-label-line-height: var(--typo-p-medium-line-height); --input-switch-label-letter-spacing: var(--typo-p-medium-letter-spacing); --input-switch-label-text-transform: var(--typo-p-medium-text-transform); --input-switch-label-text-align: left; --input-switch-label-margin: 0 8px 0 0; --input-switch-informer-margin: 0 8px 0 0; /* Text area */ /* Container */ /* Field container */ --forms-textarea-padding: 8px; --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-2); --forms-textarea-background-color: var(--meta-swatch-mono-5); --forms-textarea-border-radius: 3px; --forms-textarea-box-shadow: none; /* Label */ --forms-textarea-label-colour: var(--meta-swatch-mono-2); --forms-textarea-label-font-family: 'body'; --forms-textarea-label-font-size: 12px; --forms-textarea-label-font-weight: 400; --forms-textarea-label-font-style: normal; --forms-textarea-label-line-height: 1.2; --forms-textarea-label-letter-spacing: 0; --forms-textarea-label-text-transform: none; --forms-textarea-label-text-align: center; --forms-textarea-label-margin: 0 0 8px 0; /* Informer */ /* Placeholder */ --forms-textarea-placeholder-colour: var(--meta-swatch-mono-2); --forms-textarea-placeholder-font-family: 'body'; --forms-textarea-placeholder-font-size: 17px; --forms-textarea-placeholder-font-weight: 400; --forms-textarea-placeholder-font-style: normal; --forms-textarea-placeholder-line-height: 1.2; --forms-textarea-placeholder-letter-spacing: 0; --forms-textarea-placeholder-text-transform: none; --forms-textarea-placeholder-text-align: left; /* Value */ --forms-textarea-value-colour: var(--meta-swatch-mono-1); --forms-textarea-value-font-family: 'body'; --forms-textarea-value-font-size: 17px; --forms-textarea-value-font-weight: 400; --forms-textarea-value-font-style: normal; --forms-textarea-value-line-height: 1.2; --forms-textarea-value-letter-spacing: 0; --forms-textarea-value-text-transform: none; --forms-textarea-value-text-align: left; /* Text input */ /* Layout order */ /* Container */ /* Field container */ --forms-input-padding: 0 8px; --forms-input-width: 100%; --forms-input-height: 48px; --forms-input-border-width: 1px; --forms-input-border-style: solid; --forms-input-border-color: var(--meta-swatch-mono-2); --forms-input-background-color: var(--meta-swatch-mono-5); --forms-input-border-radius: 3px; --forms-input-box-shadow: none; /* Label */ --forms-input-label-colour: var(--meta-swatch-colour-8); --forms-input-label-font-family: 'body'; --forms-input-label-font-size: 12px; --forms-input-label-font-weight: 400; --forms-input-label-font-style: normal; --forms-input-label-line-height: 1.2; --forms-input-label-letter-spacing: 0.8; --forms-input-label-text-transform: none; --forms-input-label-text-align: left; /* Informer */ /* Placeholder */ --forms-input-placeholder-colour: var(--meta-swatch-mono-3); --forms-input-placeholder-font-family: 'body'; --forms-input-placeholder-font-size: 17px; --forms-input-placeholder-font-weight: normal; --forms-input-placeholder-font-style: normal; --forms-input-placeholder-line-height: 1.2; --forms-input-placeholder-letter-spacing: 0.8; --forms-input-placeholder-text-transform: none; --forms-input-placeholder-text-align: left; /* Value */ --forms-input-value-colour: var(--meta-swatch-colour-8); --forms-input-value-font-family: 'body'; --forms-input-value-font-size: 24px; --forms-input-value-font-weight: normal; --forms-input-value-font-style: normal; --forms-input-value-line-height: 1.2; --forms-input-value-letter-spacing: 0.8; --forms-input-value-text-transform: none; --forms-input-value-text-align: left; /* Password validation */ /* These are currently in use but... */ --account-password-tick-off-colour: var(--meta-swatch-mono-4); --account-password-tick-on-colour: var(--meta-swatch-colour-1); --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: 24px; --swatch-forms-tick-bg-on: transparent; --swatch-forms-tick-border-on: none; --swatch-forms-tick-icon-on: var(--meta-swatch-colour-8); --swatch-forms-tick-bg-off: transparent; --swatch-forms-tick-border-off: none; --swatch-forms-tick-icon-off: var(--meta-swatch-colour-3); --effect-forms-tick-border-radius: none; /* Block container */ --password-validation-gap: 4px; --password-validation-gap-m: 4px; --password-validation-gap-l: 4px; /* Heading */ --password-validation-heading-font-family: var(--typo-p-medium-font-face); --password-validation-heading-font-size: var(--typo-p-medium-font-size); --password-validation-heading-colour: var(--typo-p-medium-colour); --password-validation-heading-font-weight: var(--typo-p-medium-font-weight); --password-validation-heading-font-style: var(--typo-p-medium-font-style); --password-validation-heading-line-height: var(--typo-p-medium-line-height); --password-validation-heading-letter-spacing: var(--typo-p-medium-letter-spacing); --password-validation-heading-text-transform: var(--typo-p-medium-text-transform); --password-validation-heading-text-align: left; /* Tick list */ --password-validation-tick-list-padding: 0 0 8px 0; --password-validation-tick-list-padding-m: 0 0 8px 0; --password-validation-tick-list-padding-l: 0 0 8px 0; /* Tick row */ --password-validation-tick-row-direction: row-reverse; --password-validation-tick-row-align-items: center; --password-validation-tick-row-justify-content: flex-end; /* Tick Row Label */ /* Tick Row Icon */ --password-validation-icon-size: 18px; --password-validation-icon-fill-off: var(--meta-swatch-mono-3); --password-validation-icon-fill-on: var(--meta-swatch-colour-1); /* Wheel input */ /* Container */ --forms-wheel-container-max-width: 100%; --forms-wheel-text-margin-bottom: 8px; --forms-wheel-label-width: 27.5%; --forms-wheel-value-width: 45%; /* Grips */ --forms-wheel-grip-container-height: 48px; --forms-wheel-grip-container-bg-colour: transparent; --forms-wheel-grip-container-bg-gradient: linear-gradient(90.2deg, #EEEEF0 0.03%, #FFFFFF 49.75%, #EEEEF0 99.97%); --forms-wheel-grip-container-border: 1px solid var(--meta-swatch-mono-3); --forms-wheel-grip-container-border-radius: 24px; --forms-wheel-grip-container-shadow: none; --forms-wheel-grips-height: 24px; --forms-wheel-grips-width: 2px; --forms-wheel-grips-colour: var(--meta-swatch-mono-3); --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: 24px; --forms-wheel-stepper-icon-on-colour: var(--meta-swatch-colour-10); --forms-wheel-stepper-icon-off-colour: var(--meta-swatch-mono-2); --forms-wheel-stepper-disabled-opacity: 0.3; /* Frame */ --forms-wheel-frame-display: none; --forms-wheel-fade-colour: none; /* Value indicator */ --forms-wheel-indicator-on-colour: var(--meta-swatch-colour-10); --forms-wheel-indicator-off-colour: var(--meta-swatch-colour-10); --forms-wheel-indicator-width: 4px; --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(--meta-swatch-mono-2); --forms-wheel-label-font-face: 'body'; --forms-wheel-label-font-size: 15px; --forms-wheel-label-font-weight: normal; --forms-wheel-label-font-style: normal; --forms-wheel-label-line-height: 1; --forms-wheel-label-letter-spacing: 0.8; --forms-wheel-label-text-transform: none; --forms-wheel-label-text-align: left; --forms-wheel-value-colour: var(--meta-swatch-mono-1); --forms-wheel-value-font-face: 'body'; --forms-wheel-value-font-size: 18px; --forms-wheel-value-font-weight: 400; --forms-wheel-value-font-style: normal; --forms-wheel-value-line-height: 1; --forms-wheel-value-letter-spacing: 0.8; --forms-wheel-value-text-transform: none; --forms-wheel-value-text-align: center; --forms-wheel-computed-colour: var(--meta-swatch-mono-2); --forms-wheel-computed-font-face: 'body'; --forms-wheel-computed-font-size: 15px; --forms-wheel-computed-font-weight: normal; --forms-wheel-computed-font-style: normal; --forms-wheel-computed-line-height: 1; --forms-wheel-computed-letter-spacing: 0.8; --forms-wheel-computed-text-transform: none; --forms-wheel-computed-text-align: right; --forms-wheel-computed-width: 27.5%; /* Navigation */ /* Accordion (Current) */ /* Block Container */ /*

        List Container */ --accordion-v2-padding: 0; --accordion-v2-border: none; --accordion-v2-border-radius: 0; --accordion-v2-item-keyline: none; /*
      • Accordion item */ /* Item Header */ --accordion-v2-header-direction: row; --accordion-v2-header-align: center; --accordion-v2-header-justify: space-between; --accordion-v2-header-padding: 16px 0; --accordion-v2-header-margin: 0; --accordion-v2-header-bg-color: transparent; --accordion-v2-header-bg-color-open: var(--accordion-v2-header-bg-color); /* Item Header > label */ --accordion-v2-title-colour: var(--meta-swatch-mono-1); --accordion-v2-title-font-family: var(--typo-h-medium-font-face); --accordion-v2-title-font-size: 14px; --accordion-v2-title-font-weight: 300; --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: left; --accordion-v2-title-colour-open: var(--accordion-v2-title-colour); /* Item Header > icon */ --accordion-v2-icon-bg-border: none; --accordion-v2-icon-bg-color: transparent; --accordion-v2-icon-color: var(--meta-swatch-colour-1); --accordion-v2-icon-bg-border-open: none; --accordion-v2-icon-bg-color-open: transparent; --accordion-v2-icon-color-open: var(--accordion-v2-icon-color); /* Item Header > Action container (Select menu) */ /* Item Header > Select menu (in Sus Coach) */ /* Item Content */ /* Block container */ /* Words container */ /* Accordion (Upcoming) */ /* Accordion */ /* Heading */ /* Sub heading */ /* List
          */ --acc-list-padding: 0; --acc-list-border: none; --acc-list-border-radius: 0; --accordion-v2-item-keyline: none; /* Item
        • */ /* Item header */ /* Item header main */ --acc-item-header-main-direction: row; --acc-item-header-main-align-items: center; --acc-item-header-main-justify-content: space-between; --acc-item-header-main-padding: 16px 0; --acc-item-header-main-margin: 0; --acc-item-header-main-bg-color: transparent; --acc-item-header-main-bg-color-open: var(--accordion-v2-header-bg-color); /* Item header label group */ /* Item header status icon */ /* Item header heading */ --acc-item-header-heading-color: var(--meta-swatch-mono-1); --acc-item-header-heading-font-family: var(--typo-h-medium-font-face); --acc-item-header-heading-font-size: 14px; --acc-item-header-heading-font-weight: 300; --acc-item-header-heading-line-height: var(--typo-h-medium-line-height); --acc-item-header-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --acc-item-header-heading-text-transform: var(--typo-h-medium-text-transform); --acc-item-header-heading-text-align: left; --acc-item-header-heading-color-open: var(--accordion-v2-title-colour); /* Item header subheading */ /* Item header input */ /* An inner layer that has a flex direction var */ /* Item header action icon */ --acc-item-header-action-icon-bg-border: none; --acc-item-header-action-icon-bg-color: transparent; --acc-item-header-action-icon-color: var(--meta-swatch-colour-1); --acc-item-header-action-bg-border-open: none; --acc-item-header-action-bg-color-open: transparent; --acc-item-header-action-color-open: var(--accordion-v2-icon-color); /* Item body */ /* AI Coach (Ask Me) */ /* Container */ --ask-padding: 24px 0; --ask-padding-m: 32px 0; --ask-padding-l: 48px 0; --ask-gap: 0; --ask-gap-m: 0; --ask-gap-l: 0; --ask-background: transparent; /* Thinking Avatar */ --ask-avatar-opacity-low: 0.25; --ask-avatar-opacity-high: .75; /* Coach block overrides */ --ask-coach-padding-top: 0; --ask-coach-padding-bottom: 0; --ask-coach-padding-top-m: 0; --ask-coach-padding-bottom-m: 0; --ask-coach-padding-top-l: 0; --ask-coach-padding-bottom-l: 0; /* Form */ --ask-form-background: var(--meta-swatch-mono-5); --ask-form-padding: 8px 0 16px; --ask-form-padding-top: 8px; --ask-form-padding-right: 0; --ask-form-padding-bottom: 16px; --ask-form-padding-left: 0; --ask-form-bottom: 49px; --ask-form-bottom-m: 49px; --ask-form-bottom-l: 0; /* Actions row */ --ask-actions-padding: 0 0 24px; --ask-actions-gap: 0; --ask-actions-justify-content: start; /* Action icons */ --ask-action-size: 32px; --ask-action-icon-size: 18px; --ask-action-border-radius: 50%; --ask-action-background: transparent; --ask-action-border: none; --ask-action-icon-fill: var(--meta-swatch-colour-2); --ask-action-hover-background: var(--meta-swatch-colour-2); --ask-action-hover-border: none; --ask-action-hover-icon-fill: var(--meta-swatch-mono-5); --ask-action-highlighted-background: var(--meta-swatch-colour-1); --ask-action-highlighted-border: none; --ask-action-highlighted-icon-fill: var(--meta-swatch-mono-5); /* Breadcrumb */ /* Container */ /*Link Label*/ /*Delimiter*/ /* Category links */ /* Block Container */ /* Content Container */ /* Heading */ /* Sub heading */ /* Link */ /* Items Container */ /* Item container */ /* Item label */ /* Item sub label */ /* Item icon */ /* Checklist Sections Container */ /* Checklist Section Container */ /* Checklist Item */ /* Container */ --checklist-item-bg-colour: #C7F0EB; /* Indicator */ --checklist-item-indicator-width: var(--pattern-indicator-width); --checklist-item-indicator-on-colour: var(--pattern-indicator-colour); --checklist-item-indicator-off-colour: transparent; --checklist-item-indicator-hover-colour: var(--pattern-hover-colour); /* Checklist Item image */ /* Keylines */ --checklist-item-keyline: 0px solid var(--meta-swatch-mono-5); --checklist-item-keyline-last: var(--checklist-item-keyline); --checklist-item-keyline-margin: 0; --checklist-item-keyline-max-width: 720px; /* Button */ --checklist-item-btn-height: 70px; --checklist-item-btn-max-width: 720px; --checklist-item-btn-min-width: 100%; --checklist-item-btn-margin: 1px 0 0 0; --checklist-item-btn-padding: 19px 16px 19px 12px; --checklist-item-btn-bg-colour: var(--meta-swatch-colour-3); --checklist-item-btn-border: none; --checklist-item-btn-border-radius-first: 0; --checklist-item-btn-border-radius: 0; --checklist-item-btn-border-radius-last: 0; --checklist-item-btn-box-shadow: none; /* Button items ordering */ /* Labels container */ --checklist-item-labels-padding: 0; /* 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: 16px; --checklist-item-label-font-weight: 400; --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: left; --checklist-item-label-padding: 0; /* 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: 32px; --checklist-item-action-bg-width: 24px; --checklist-item-action-bg-margin: auto 0px auto 8px; --checklist-item-action-icon-color: var(--meta-swatch-colour-10); --checklist-item-action-icon-size: 24px; /* Status */ --checklist-item-checkbox-bg-height: 32px; --checklist-item-checkbox-bg-width: 32px; --checklist-item-checkbox-bg-margin: auto 8px 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 8px auto 0px; --checklist-item-status-icon-border-radius: 50%; --checklist-item-status-icon-size: 24px; /* Old hardcoded statuses */ --checklist-item-checkbox-to-do-bg-colour: transparent; --checklist-item-checkbox-to-do-border: none; --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-mono-2); --checklist-item-checkbox-snoozed-bg-colour: transparent; --checklist-item-checkbox-snoozed-border: none; --checklist-item-checkbox-snoozed-icon-colour: var(--meta-swatch-mono-2); --checklist-item-checkbox-paused-bg-colour: transparent; --checklist-item-checkbox-paused-border: none; --checklist-item-checkbox-paused-icon-colour: var(--meta-swatch-mono-2); --checklist-item-checkbox-na-bg-colour: var(--meta-swatch-colour-2); --checklist-item-checkbox-na-border: none; --checklist-item-checkbox-na-icon-colour: var(--meta-swatch-mono-5); --checklist-item-checkbox-not-keen-bg-colour: var(--meta-swatch-colour-10); --checklist-item-checkbox-not-keen-border: none; --checklist-item-checkbox-not-keen-icon-colour: var(--meta-swatch-colour-8); --checklist-item-checkbox-already-bg-colour: var(--meta-swatch-colour-10); --checklist-item-checkbox-already-border: none; --checklist-item-checkbox-already-icon-colour: var(--meta-swatch-colour-8); --checklist-item-checkbox-done-bg-colour: var(--meta-swatch-colour-10); --checklist-item-checkbox-done-border: none; --checklist-item-checkbox-done-icon-colour: var(--meta-swatch-colour-8); /* New dynamic statuses */ --checklist-item-checkbox-bg-colour: transparent; --checklist-item-checkbox-border: none; --checklist-item-checkbox-icon-colour: transparent; --checklist-item-checkbox-notstarted-bg-colour: transparent; --checklist-item-checkbox-notstarted-border: none; --checklist-item-checkbox-notstarted-icon-colour: transparent; --checklist-item-checkbox-seen-bg-colour: transparent; --checklist-item-checkbox-seen-border: none; --checklist-item-checkbox-seen-icon-colour: var(--meta-swatch-mono-2); --checklist-item-checkbox-inprogress-bg-colour: transparent; --checklist-item-checkbox-inprogress-border: none; --checklist-item-checkbox-inprogress-icon-colour: var(--meta-swatch-mono-2); --checklist-item-checkbox-snooze-bg-colour: transparent; --checklist-item-checkbox-snooze-border: none; --checklist-item-checkbox-snooze-icon-colour: var(--meta-swatch-mono-2); --checklist-item-checkbox-pause-bg-colour: transparent; --checklist-item-checkbox-pause-border: none; --checklist-item-checkbox-pause-icon-colour: var(--meta-swatch-mono-2); --checklist-item-checkbox-notapplicable-bg-colour: var(--meta-swatch-colour-2); --checklist-item-checkbox-notapplicable-border: none; --checklist-item-checkbox-notapplicable-icon-colour: var(--meta-swatch-mono-5); --checklist-item-checkbox-notkeen-bg-colour: var(--meta-swatch-colour-10); --checklist-item-checkbox-notkeen-border: none; --checklist-item-checkbox-notkeen-icon-colour: var(--meta-swatch-colour-8); --checklist-item-checkbox-alreadyhaveone-bg-colour: var(--meta-swatch-colour-10); --checklist-item-checkbox-alreadyhaveone-border: none; --checklist-item-checkbox-alreadyhaveone-icon-colour: var(--meta-swatch-colour-8); --checklist-item-checkbox-completed-bg-colour: var(--meta-swatch-colour-10); --checklist-item-checkbox-completed-border: none; --checklist-item-checkbox-completed-icon-colour: var(--meta-swatch-colour-8); --checklist-item-checkbox-externallink-bg-colour: transparent; --checklist-item-checkbox-externallink-border: none; --checklist-item-checkbox-externallink-icon-colour: var(--meta-swatch-mono-2); --checklist-item-status-icon-bg-colour: transparent; --checklist-item-status-icon-border: none; --checklist-item-status-icon-colour: transparent; --checklist-item-status-icon-notstarted-bg-colour: transparent; --checklist-item-status-icon-notstarted-border: none; --checklist-item-status-icon-notstarted-icon-colour: transparent; --checklist-item-status-icon-seen-bg-colour: transparent; --checklist-item-status-icon-seen-border: none; --checklist-item-status-icon-seen-icon-colour: var(--meta-swatch-mono-2); --checklist-item-status-icon-inprogress-bg-colour: transparent; --checklist-item-status-icon-inprogress-border: none; --checklist-item-status-icon-inprogress-icon-colour: var(--meta-swatch-mono-2); --checklist-item-status-icon-snooze-bg-colour: transparent; --checklist-item-status-icon-snooze-border: none; --checklist-item-status-icon-snooze-icon-colour: var(--meta-swatch-mono-2); --checklist-item-status-icon-pause-bg-colour: transparent; --checklist-item-status-icon-pause-border: none; --checklist-item-status-icon-pause-icon-colour: var(--meta-swatch-mono-2); --checklist-item-status-icon-notapplicable-bg-colour: var(--meta-swatch-colour-2); --checklist-item-status-icon-notapplicable-border: none; --checklist-item-status-icon-notapplicable-icon-colour: var(--meta-swatch-mono-5); --checklist-item-status-icon-notkeen-bg-colour: var(--meta-swatch-colour-10); --checklist-item-status-icon-notkeen-border: none; --checklist-item-status-icon-notkeen-icon-colour: var(--meta-swatch-colour-8); --checklist-item-status-icon-alreadyhaveone-bg-colour: var(--meta-swatch-colour-10); --checklist-item-status-icon-alreadyhaveone-border: none; --checklist-item-status-icon-alreadyhaveone-icon-colour: var(--meta-swatch-colour-8); --checklist-item-status-icon-completed-bg-colour: var(--meta-swatch-colour-10); --checklist-item-status-icon-completed-border: none; --checklist-item-status-icon-completed-icon-colour: var(--meta-swatch-colour-8); --checklist-item-status-icon-externallink-bg-colour: transparent; --checklist-item-status-icon-externallink-border: none; --checklist-item-status-icon-externallink-icon-colour: var(--meta-swatch-mono-2); /* Checklist Section Header */ /* Container */ --checklist-section-margin: 0 0 8px 0; --checklist-section-bg-colour: var(--meta-swatch-mono-5); --checklist-section-min-height: 70px; /* Keylines */ --checklist-section-keyline-top-margin: 0px; --checklist-section-keyline-top-first: 1px solid var(--meta-swatch-colour-2); --checklist-section-keyline-top: 1px solid var(--meta-swatch-colour-2); --checklist-section-keyline-bottom-margin: 0px; --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-colour-1); --checklist-toggle-open-bg-colour: transparent; --checklist-toggle-open-border: none; --checklist-toggle-close-icon-colour: var(--meta-swatch-colour-1); --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: 20px; --checklist-section-heading-weight: 400; --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(--typo-p-small-colour); --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: 10px; --checklist-section-spacer-middle: 0; --checklist-section-spacer-bottom: 8px; /* 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; /* Avatar */ --theme-coach-avatar-display: block; --coach-avatar-width: 39px; --coach-avatar-height: 47px; --coach-avatar-border-radius: 0; --coach-spacer-avatar: 0; --coach-avatar-padding: 8px 0; --coach-avatar-justify-content: center; --coach-avatar-align: center; /* Message bubbles container */ /* Message */ --coach-message-bg-colour: transparent; --coach-message-background: transparent; --coach-message-img-display: none; --coach-message-margin-right: 0; --coach-message-border-radius: 24px; --coach-message-border: none; --coach-message-box-shadow: none; --coach-message-padding: 8px 12px; --coach-message-text-colour: var(--meta-swatch-mono-1); --coach-message-text-color: var(--meta-swatch-mono-1); --coach-message-font-family: var(--typo-p-medium-font-face); --coach-message-text-size: var(--typo-p-medium-font-size); --coach-message-text-weight: 300; --coach-message-text-style: var(--typo-p-medium-font-style); --coach-message-letter-spacing: var(--typo-p-medium-letter-spacing); --coach-message-line-height: 1.4; --coach-message-text-transform: var(--typo-p-medium-text-transform); --coach-message-text-align: center; --coach-message-par-margin: 0.4rem; --coach-message-word-break: break-word; --coach-message-link-color: var(--meta-swatch-colour-1); --coach-message-link-decoration: underline; --coach-message-link-weight: inherit; --coach-message-link-style: inherit; --coach-message-link-hover-color: var(--meta-swatch-colour-2); --coach-message-link-hover-decoration: underline; --coach-message-link-hover-weight: inherit; --coach-message-link-hover-style: inherit; --coach-message-link-active-color: var(--meta-swatch-colour-1); --coach-message-link-active-decoration: underline; --coach-message-link-active-weight: inherit; --coach-message-link-active-style: inherit; --coach-message-link-visited-color: var(--meta-swatch-colour-1); --coach-message-link-visited-decoration: underline; --coach-message-link-visited-weight: inherit; --coach-message-link-visited-style: inherit; --coach-link-weight: inherit; --coach-link-style: inherit; --coach-link-bg-radius: 0; --coach-link-underline-width: 2px; --coach-link-bg-padding: 0 0 2px; --coach-link-underline-width-hover: 2px; /* User Message */ --coach-usermsg-background: transparent; --coach-usermsg-align-self: flex-end; --coach-usermsg-align-items: center; --coach-usermsg-max-width: fit-content; --coach-usermsg-max-width-m: fit-content; --coach-usermsg-max-width-l: fit-content; --coach-usermsg-img-display: none; --coach-usermsg-margin: 0 0 0 64px; --coach-usermsg-border-radius: 20px; --coach-usermsg-border: 1px solid var(--meta-swatch-mono-3); --coach-usermsg-box-shadow: none; --coach-usermsg-padding: 12px 16px; --coach-usermsg-before-border-radius: none; --coach-usermsg-before-background: 0; --coach-usermsg-text-colour: var(--meta-swatch-mono-1); --coach-usermsg-text-color: var(--meta-swatch-mono-1); --coach-usermsg-font-family: var(--typo-p-medium-font-face); --coach-usermsg-text-size: var(--typo-p-medium-font-size); --coach-usermsg-text-weight: 300; --coach-usermsg-text-style: var(--typo-p-medium-font-style); --coach-usermsg-letter-spacing: var(--typo-p-medium-letter-spacing); --coach-usermsg-line-height: 1.4; --coach-usermsg-text-transform: var(--typo-p-medium-text-transform); --coach-usermsg-text-align: left; --coach-usermsg-par-margin: 0.4rem; --coach-usermsg-word-break: break-word; --coach-usermsg-link-color: var(--meta-swatch-colour-1); --coach-usermsg-link-decoration: underline; --coach-usermsg-link-weight: inherit; --coach-usermsg-link-style: inherit; --coach-usermsg-link-hover-color: var(--meta-swatch-colour-8); --coach-usermsg-link-hover-decoration: underline; --coach-usermsg-link-hover-weight: inherit; --coach-usermsg-link-hover-style: inherit; --coach-usermsg-link-active-color: var(--meta-swatch-colour-1); --coach-usermsg-link-active-decoration: underline; --coach-usermsg-link-active-weight: inherit; --coach-usermsg-link-active-style: inherit; --coach-usermsg-link-visited-color: var(--meta-swatch-colour-1); --coach-usermsg-link-visited-decoration: underline; --coach-usermsg-link-visited-weight: inherit; --coach-usermsg-link-visited-style: inherit; /* Motion */ /* Spacing */ --coach-spacer-par: 12px; --coach-spacer-group: 12px; --coach-spacer-input: 12px; --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 */ --template-dashboard-dc-heading-colour: var(--page-template-heading-colour); --template-dashboard-dc-heading-font-family: var(--page-template-heading-font-family); --template-dashboard-dc-heading-font-size: var(--page-template-heading-font-size); --template-dashboard-dc-heading-font-weight: var(--page-template-heading-font-weight); --template-dashboard-dc-heading-font-style: var(--page-template-heading-font-style); --template-dashboard-dc-heading-line-height: var(--page-template-heading-line-height); --template-dashboard-dc-heading-letter-spacing: var(--page-template-heading-letter-spacing); --template-dashboard-dc-heading-text-transform: var(--page-template-heading-text-transform); --template-dashboard-dc-heading-text-align: var(--page-template-heading-text-align); /* DC widget */ /* Container */ /* Icon */ /* Coach dataviz (Poll is in here) */ /* Block container */ /* Poll container */ /* Bars container */ --coach-bars-padding: 16px 0 0; --coach-bars-margin: 0 0 24px; --coach-bars-row-gap: 12px; /* Row container */ /* Value */ --coach-bars-value-colour: var(--meta-swatch-mono-1); --coach-bars-value-font-size: var(--typo-p-medium-font-size); --coach-bars-value-font-family: var(--typo-p-medium-font-face); --coach-bars-value-font-weight: var(--typo-p-medium-font-weight); --coach-bars-value-font-style: var(--typo-p-medium-font-style); --coach-bars-value-line-height: var(--typo-p-medium-line-height); --coach-bars-value-letter-spacing: var(--typo-p-medium-letter-spacing); --coach-bars-value-text-transform: var(--typo-p-medium-text-transform); --coach-bars-value-margin: 0 8px; --coach-bars-value-padding: 0; --coach-bars-label-text-align: left; /* Bar container */ --coach-bars-bar-height: auto; --coach-bars-bar-background: transparent; --coach-bars-bar-border: none; --coach-bars-bar-border-radius: 100px; /* Labels */ --coach-bars-label-colour: var(--meta-swatch-colour-8); --coach-bars-label-font-size: var(--typo-p-medium-font-size); --coach-bars-label-font-family: var(--typo-p-medium-font-family); --coach-bars-label-font-weight: var(--typo-p-medium-font-weight); --coach-bars-label-font-style: var(--typo-p-medium-font-style); --coach-bars-label-line-height: 24px; --coach-bars-label-letter-spacing: var(--typo-p-medium-letter-spacing); --coach-bars-label-text-transform: var(--typo-p-medium-text-transform); --coach-bars-label-margin: auto 16px; --coach-bars-label-padding: 8px 4px; /* Bar value */ --coach-bars-bar-value-background: var(--meta-swatch-mono-4); --coach-bars-bar-value-border: 1px solid var(--meta-swatch-mono-4); --coach-bars-bar-value-border-radius: 40px; --coach-bars-bar-value-winner-background: var(--meta-swatch-colour-7); --coach-bars-bar-value-winner-border: none; --coach-bars-bar-value-winner-border-radius: 40px; --coach-bars-label-winner-colour: var(--meta-swatch-colour-8); /* Content */ /* Editorial card */ /* Container */ --card-editorial-bg-colour: var(--meta-swatch-mono-5); --card-editorial-border-radius: var(--pattern-border-radius-m); --card-editorial-box-shadow: var(--pattern-elevation-low); --card-editorial-border: none; --card-editorial-padding: 24px; /* Heading */ --card-editorial-heading-display: block; --card-editorial-heading-colour: var(--pattern-headings-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(--pattern-strong-text-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-font-style: var(--typo-p-medium-font-style); --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(--pattern-strong-text-colour); --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(--pattern-interaction-colour); --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: var(--meta-swatch-mono-5); --template-dashboard-editorial-padding: 32px 0; --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 */ /* Grid container */ /* Heading block overrides */ /* Button container */ /* Button block overrides */ /* Filter toggle */ /* Block container */ --filter-toggle-width: fit-content; --filter-toggle-padding: 10px 16px; --filter-toggle-margin: 16px 0; --filter-toggle-background: var(--meta-swatch-mono-5); --filter-toggle-border: 1px solid var(--meta-swatch-colour-1); --filter-toggle-border-radius: 40px; --filter-toggle-box-shadow: none; /* Label */ --filter-toggle-label-colour: var(--meta-swatch-colour-8); --filter-toggle-label-font-size: 12px; --filter-toggle-label-font-family: 'body'; --filter-toggle-label-font-weight: normal; --filter-toggle-label-font-style: normal; --filter-toggle-label-line-height: 1; --filter-toggle-label-letter-spacing: 0; --filter-toggle-label-margin: 0 0 0 4px; /* Icon container */ --filter-toggle-icon-bg-height: var(--pattern-icon-size); --filter-toggle-icon-bg-width: var(--pattern-icon-size); /* Icon */ --filter-toggle-icon-size: var(--pattern-icon-size); --filter-toggle-icon-colour: var(--meta-swatch-colour-1); /* State overrides */ --filter-toggle-background-on: var(--meta-swatch-mono-5); --filter-toggle-border-on: 1px solid var(--meta-swatch-colour-1); --filter-toggle-label-colour-on: var(--meta-swatch-colour-8); --filter-toggle-icon-colour-on: var(--meta-swatch-colour-1); /* Footer - Main */ /* Container */ --footer-bg-colour: var(--meta-swatch-colour-2); --footer-align: center; --footer-group-min-width: 320px; --footer-group-max-width: 720px; /* 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-5); --footer-header-font-face: var(--typo-p-small-font-face); --footer-header-font-size: 16px; --footer-header-font-weight: 400; --footer-header-font-style: var(--typo-p-small-font-style); --footer-header-line-height: var(--typo-p-small-line-height); --footer-header-letter-spacing: var(--typo-p-small-letter-spacing); --footer-header-header-transform: var(--typo-p-small-text-transform); --footer-header-text-align: center; /* Social group */ --footer-social-group-margin: 8px 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-mono-5); --footer-social-icons-margin: 0 8px 0 0; --footer-social-icons-size: var(--pattern-icon-size); /* Logo Container */ --footer-logo-container-align: center; --footer-logo-container-justify-content: center; --footer-logo-container-padding: 8px 0; --footer-logo-container-text-align: center; /* Logo */ --footer-logo-width: 115px; --footer-logo-height: 28px; /* Buttons */ --footer-btn-group-margin: 0; --footer-btn-group-padding: 24px 0; --footer-btn-group-columns: 2; --footer-btn-group-columns-m: 2; --footer-btn-group-columns-l: 2; --footer-btn-group-gutter: 16px 32px; --footer-btn-group-row-gutter: 8px; --footer-btn-group-column-gutter: 8px; --footer-btn-height: 100%; --footer-btn-margin: 0; --footer-btn-padding: 6px 4px; --footer-btn-bg-color: transparent; --footer-btn-align: center; --footer-btn-border: 1px solid rgba(255,255,255,0.3); --footer-btn-border-bottom: 1px solid rgba(255,255,255,0.3); --footer-btn-border-radius: 6px; --footer-btn-label-padding: 0px; --footer-btn-label-color: var(--meta-swatch-mono-5); --footer-btn-label-font-face: var(--typo-p-medium-font-face); --footer-btn-label-font-size: 14px; --footer-btn-label-font-weight: var(--typo-p-medium-font-weight); --footer-btn-label-font-style: var(--typo-p-medium-font-style); --footer-btn-label-line-height: var(--typo-p-medium-line-height); --footer-btn-label-letter-spacing: var(--typo-p-medium-letter-spacing); --footer-btn-label-text-transform: var(--typo-p-medium-text-transform); --footer-btn-label-text-decoration: var(--typo-a-link-text-decoration); /* Text container */ --footer-text-container-margin: 24px 0; /* Text

          elements */ --footer-text-colour: var(--meta-swatch-mono-5); --footer-text-font-face: var(--typo-p-small-font-face); --footer-text-font-size: 11px; --footer-text-font-weight: 300; --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-colour-2); /* Text */ --footer-legal-text-margin: 0 auto 0.7rem; --footer-legal-text-max-width: 720px; --footer-legal-text-colour: var(--meta-swatch-mono-5); --footer-legal-text-font-face: var(--typo-p-small-font-face); --footer-legal-text-font-size: 11px; --footer-legal-text-font-weight: 300; --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-4); /* Knowledge Section Container */ /* Knowledge Item */ /* Container */ --knowledge-item-bg-colour: var(--meta-swatch-mono-5); /* Indicator */ --knowledge-item-indicator-width: 0; --knowledge-item-indicator-on-colour: transparent; --knowledge-item-indicator-off-colour: transparent; --knowledge-item-indicator-hover-colour: transparent; /* Keylines */ --knowledge-item-keyline: 12px solid transparent; --knowledge-item-keyline-last: none; --knowledge-item-keyline-margin: 0 16px; --knowledge-item-keyline-max-width: 720px; /* Button */ --knowledge-item-btn-min-height: 70px; --knowledge-item-btn-max-width: 720px; --knowledge-item-btn-margin: 0; --knowledge-item-btn-padding: 12px 8px 12px 12px; --knowledge-item-btn-bg-colour: var(--meta-swatch-mono-5); --knowledge-item-btn-border: 1px solid var(--pattern-keyline-colour); --knowledge-item-btn-border-radius-first: var(--knowledge-item-btn-border-radius); --knowledge-item-btn-border-radius: 6px; --knowledge-item-btn-border-radius-last: var(--knowledge-item-btn-border-radius); --knowledge-item-btn-box-shadow: none; /* 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: 16px; --knowledge-item-label-weight: 400; --knowledge-item-label-font-weight: 400; --knowledge-item-label-font-style: var(--typo-p-small-font-style); --knowledge-item-label-line-height: 1.5; --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: left; --knowledge-item-label-text-align: left; --knowledge-item-label-padding: 0; /* Status label */ --knowledge-item-status-label-display: none; /* Action icon */ --knowledge-item-action-bg-height: 24px; --knowledge-item-action-bg-width: 24px; --knowledge-item-action-bg-margin: auto 0px auto 8px; --knowledge-item-action-icon-color: var(--pattern-interaction-colour); --knowledge-item-action-icon-size: var(--pattern-icon-size); /* Time stamp container */ /* Time label */ /* Time icon */ /* Knowledge Section Header */ /* Container */ --knowledge-section-margin: 0; /* Keylines */ --knowledge-section-keyline-top-margin: 0px 16px; --knowledge-section-keyline-top-first: none; --knowledge-section-keyline-top: none; --knowledge-section-keyline-bottom-margin: 0px 16px; --knowledge-section-keyline-bottom: none; /* Icon */ --knowledge-section-icon-display: none; /* Heading */ --knowledge-section-heading-colour: var(--typo-h-small-colour); --knowledge-section-heading-font-family: var(--typo-h-small-font-face); --knowledge-section-heading-size: var(--typo-h-small-font-size); --knowledge-section-heading-font-weight: var(--typo-h-small-font-weight); --knowledge-section-heading-font-style: var(--typo-h-small-font-style); --knowledge-section-heading-line-height: var(--typo-h-small-line-height); --knowledge-section-heading-letter-spacing: var(--typo-h-small-letter-spacing); --knowledge-section-heading-text-transform: var(--typo-h-small-text-transform); --knowledge-section-heading-text-align: left; /* Sub heading */ --knowledge-section-sub-heading-colour: var(--meta-swatch-mono-2); --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: left; /* Spacing */ --knowledge-section-spacer-top: 16px; --knowledge-section-spacer-middle: 0; --knowledge-section-spacer-bottom: 8px; /* Marketplace */ /* Container */ --marketplace-container-background: var(--meta-swatch-colour-11); --marketplace-container-padding: 24px 0 40px; /* 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: 0; --marketplace-grid-container-padding-ml: 16px 48px 0px; --marketplace-grid-container-border-radius-ml: 24px; /* Grid */ --marketplace-grid-columns: 2; --marketplace-grid-rows: 2; --marketplace-grid-column-gap: 16px; --marketplace-grid-row-gap: 16px; --marketplace-grid-columns-ml: 2; --marketplace-grid-rows-ml: 2; --marketplace-grid-column-gap-ml: 16px; --marketplace-grid-row-gap-ml: 24px; /* Headings container */ --marketplace-headings-container-background: transparent; --marketplace-headings-container-padding: 0; /* Heading */ --marketplace-heading-colour: var(--meta-swatch-colour-8); --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: 12px 0 0 0; --marketplace-grid-item-image-border-radius: 0; --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: 16px 0 0 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: none; --marketplace-grid-item-image-partner-box-shadow: none; /* Image container - Group */ --marketplace-grid-item-image-group-background: transparent; --marketplace-grid-item-image-group-border: none; --marketplace-grid-item-image-group-box-shadow: none; /* 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: var(--typo-p-small-font-weight); --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: var(--typo-p-small-font-weight); --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: 600; --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: 600; --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-partner-description-colour: var(--meta-swatch-mono-1); --marketplace-grid-partner-description-font-family: var(--typo-p-small-font-face); --marketplace-grid-partner-description-font-size: var(--typo-p-small-font-size); --marketplace-grid-partner-description-font-weight: var(--typo-p-small-font-weight); --marketplace-grid-partner-description-font-style: var(--typo-p-small-font-style); --marketplace-grid-partner-description-line-height: 1; --marketplace-grid-partner-description-letter-spacing: var(--typo-p-small-letter-spacing); --marketplace-grid-partner-description-text-transform: var(--typo-p-small-text-transform); --marketplace-grid-partner-description-text-align: center; --marketplace-grid-partner-description-margin: 4px 0 4px 0; /* Marketplace Grid Badge */ /* Container */ --marketplace-grid-badge-padding: 4px 6px; --marketplace-grid-badge-border-radius: 6px; /* Icon */ --marketplace-grid-badge-icon-size: 18px; --marketplace-grid-badge-icon-margin: 0 4px 0 0; /* Label */ --marketplace-grid-badge-label-font-size: 11px; --marketplace-grid-badge-label-font-face: var(--typo-p-small-font-face); --marketplace-grid-badge-label-font-weight: 400; --marketplace-grid-badge-label-font-style: var(--typo-p-small-font-style); --marketplace-grid-badge-label-line-height: 1.2; --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 0 2px; /* State - Positive */ --marketplace-grid-badge-positive-background: var(--meta-swatch-colour-5); --marketplace-grid-badge-positive-border: none; --marketplace-grid-badge-positive-box-shadow: none; --marketplace-grid-badge-positive-icon-color: var(--meta-swatch-mono-5); --marketplace-grid-badge-label-positive-colour: var(--meta-swatch-mono-5); /* State - Negative */ --marketplace-grid-badge-negative-background: var(--meta-swatch-colour-1); --marketplace-grid-badge-negative-border: none; --marketplace-grid-badge-negative-box-shadow: none; --marketplace-grid-badge-negative-icon-color: var(--meta-swatch-mono-5); --marketplace-grid-badge-label-negative-colour: var(--meta-swatch-mono-5); /* State - Unknown */ --marketplace-grid-badge-unknown-background: var(--meta-swatch-colour-4); --marketplace-grid-badge-unknown-border: none; --marketplace-grid-badge-unknown-box-shadow: none; --marketplace-grid-badge-unknown-icon-color: var(--meta-swatch-mono-5); --marketplace-grid-badge-label-unknown-colour: var(--meta-swatch-mono-5); /* Marketplace Modal Badge */ /* Container */ --marketplace-modal-badge-padding: 4px 6px; --marketplace-modal-badge-border-radius: 6px; /* Icon */ --marketplace-modal-badge-icon-size: 18px; --marketplace-modal-badge-icon-margin: 0 4px 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: 400; --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 2px; /* State - Positive */ --marketplace-modal-badge-positive-background: var(--meta-swatch-colour-5); --marketplace-modal-badge-positive-border: none; --marketplace-modal-badge-positive-box-shadow: none; --marketplace-modal-badge-positive-icon-color: var(--meta-swatch-mono-5); --marketplace-modal-badge-label-positive-colour: var(--meta-swatch-mono-5); /* State - Negative */ --marketplace-modal-badge-negative-background: var(--meta-swatch-colour-1); --marketplace-modal-badge-negative-border: none; --marketplace-modal-badge-negative-box-shadow: none; --marketplace-modal-badge-negative-icon-color: var(--meta-swatch-mono-5); --marketplace-modal-badge-label-negative-colour: var(--meta-swatch-mono-5); /* State - Unknown */ --marketplace-modal-badge-unknown-background: var(--meta-swatch-colour-4); --marketplace-modal-badge-unknown-border: none; --marketplace-modal-badge-unknown-box-shadow: none; --marketplace-modal-badge-unknown-icon-color: var(--meta-swatch-mono-5); --marketplace-modal-badge-label-unknown-colour: var(--meta-swatch-mono-5); /* 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: var(--meta-swatch-mono-5); --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: 16px; --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: left; --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: 1.3; --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: left; --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: 133px; --nav-top-logo-height: auto; /* Top background */ --theme-nav-top-bg-colour: var(--meta-swatch-colour-7); /* Top keyline */ --theme-nav-top-keyline: none; /* Top indicator */ --theme-nav-top-indicator-off-colour: transparent; --theme-nav-top-indicator-on-colour: transparent; --theme-nav-top-indicator-hover-colour: transparent; /* 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-8); --theme-nav-top-icon-on-colour: var(--meta-swatch-colour-1); /* Top labels */ --nav-top-label-position: 40px; --nav-top-label-font-family: 'body'; --nav-top-label-font-size: 12px; --nav-top-label-font-weight: 300; --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-colour-8); --theme-nav-top-label-on-colour: var(--meta-swatch-colour-1); /* Bottom background */ --theme-nav-bottom-bg-colour: var(--meta-swatch-mono-5); /* Bottom keyline */ --theme-nav-bottom-keyline: var(--pattern-keyline-width) solid var(--pattern-keyline-colour); /* Bottom indicator */ --theme-nav-bottom-indicator-off-colour: transparent; --theme-nav-bottom-indicator-on-colour: transparent; --theme-nav-bottom-indicator-hover-colour: transparent; /* 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-colour-8); --theme-nav-bottom-icon-on-colour: var(--meta-swatch-colour-1); /* Bottom labels */ --nav-bottom-label-position: 31px; --nav-bottom-label-font-family: 'body'; --nav-bottom-label-font-size: 12px; --nav-bottom-label-font-weight: 300; --nav-bottom-label-font-style: normal; --nav-bottom-label-line-height: 1; --nav-bottom-label-letter-spacing: 0; --nav-bottom-label-text-transform: none; --nav-bottom-label-text-align: center; --theme-nav-bottom-label-off-colour: var(--meta-swatch-colour-8); --theme-nav-bottom-label-on-colour: var(--meta-swatch-colour-1); /* Nav bar - Web */ /* Block container */ /* Content */ /* Logo */ /* Icons container */ /* Icons -> Profile */ /* Profile text */ /* Icons -> Icon */ /* Links container */ /* Links container collapsed*/ /* Link container */ /* Link label */ /* Page Actions */ /* Container */ --page-actions-margin: 0 0 12px; --page-actions-margin-m: 0 0 12px; --page-actions-margin-l: 0 0 12px; --page-actions-border-top: none; --page-actions-border-bottom: none; --page-actions-gap: 12px; /* Label */ --page-actions-label-colour: var(--typo-h-small-colour); --page-actions-label-font-size: var(--typo-h-small-font-face); --page-actions-label-font-size-m: var(--typo-h-small-font-size); --page-actions-label-font-size-l: var(--typo-h-small-font-size); --page-actions-label-font-family: var(--typo-h-small-font-size); --page-actions-label-font-weight: var(--typo-h-small-font-weight); --page-actions-label-font-style: var(--typo-h-small-font-style); --page-actions-label-line-height: var(--typo-h-small-line-height); --page-actions-label-letter-spacing: var(--typo-h-small-letter-spacing); --page-actions-label-text-transform: var(--typo-h-small-text-transform); --page-actions-label-text-align: var(--typo-h-small-text-align); /* Buttons container */ --page-actions-buttons-flex-direction: column; --page-actions-buttons-flex-direction-m: row; --page-actions-buttons-align-items: center; --page-actions-buttons-align-items-m: center; --page-actions-buttons-align-items-l: center; /* Button */ --page-actions-button-padding: var(--btn-padding); --page-actions-button-margin: 12px 0 0; --page-actions-button-margin-m: 12px 0 0; --page-actions-button-margin-l: 12px 0 0; --page-actions-button-height: var(--btn-height); --page-actions-button-height-m: var(--btn-height-m); --page-actions-button-height-l: var(--btn-height-l); --page-actions-button-background: var(--btn-minor-background); --page-actions-button-border: var(--btn-minor-border); --page-actions-button-border-radius: var(--btn-border-radius); --page-actions-button-box-shadow: var(--btn-minor-box-shadow); --page-actions-button-flex-direction: row; --page-actions-button-gap: 12px; --page-actions-button-align-self: stretch; /* Button label */ --page-actions-button-label-colour: var(--btn-minor-label-color); --page-actions-button-label-font-size: var(--btn-label-font-size); --page-actions-button-label-font-size-m: var(--btn-label-font-size-m); --page-actions-button-label-font-size-l: var(--btn-label-font-size-l); --page-actions-button-label-font-family: var(--btn-label-face); --page-actions-button-label-font-weight: var(--btn-minor-label-font-weight); --page-actions-button-label-font-style: var(--btn-minor-label-font-style); --page-actions-button-label-line-height: 1.2; --page-actions-button-label-letter-spacing: var(--btn-label-letter-spacing); --page-actions-button-label-text-transform: var(--btn-label-text-transform); --page-actions-button-label-text-align: var(--btn-label-text-align); --page-actions-button-label-padding: var(--btn-label-padding); /* Button icon */ --page-actions-button-icon-size: 0px; --page-actions-button-icon-colour: none; /* Pager indicators */ /* Repeater */ /* Block Container */ --repeater-padding: 24px 0 24px; --repeater-margin: 0; /* Content Container */ /* Heading */ --repeater-heading-font-size: var(--typo-h-medium-font-size); --repeater-heading-font-family: 'body'; --repeater-heading-font-weight: 400; --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 24px; --repeater-heading-text-margin: 0 0 16px; --repeater-heading-text-align: center; /* Sub heading */ --repeater-sub-heading-font-size: 17px; --repeater-sub-heading-font-family: 'body'; --repeater-sub-heading-font-weight: 300; --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 24px; /* Empty state paragraph */ --empty-p-colour: var(--meta-swatch-mono-1); --empty-p-font-size: 16px; --empty-p-font-family: 'body'; --empty-p-font-weight: 300; --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: 12px 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-1); --repeater-link-font-size: 16px; --repeater-link-font-family: 'body'; --repeater-link-font-weight: 400; --repeater-link-font-style: normal; --repeater-link-line-height: 1.2; --repeater-link-letter-spacing: 0; --repeater-link-text-transform: none; --repeater-link-margin: 16px 16px 0; --repeater-link-padding: 20px 0; /* Carousel Container */ --repeater-carousel-container-padding: 16px 16px 8px 16px; /* 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-slick-list-padding: 16px 0; /* Item */ --repeater-item-margin: 0 6px; --repeater-item-slider-gap: 12px; /* Button icon */ /* Option 1 */ /* Black / Navy on White */ --opt1-block-border-radius: var(--card-border-radius); --opt1-block-border-radius-m: var(--card-border-radius); --opt1-block-border-radius-l: var(--card-border-radius); --opt1-block-background: var(--meta-swatch-mono-5); --opt1-content-background: transparent; --opt1-heading-color: var(--meta-swatch-colour-8); --opt1-sub-heading-color: var(--meta-swatch-colour-8); --opt1-empty-p-colour: var(--meta-swatch-mono-1); --opt1-empty-p-background: transparent; --opt1-link-color: var(--meta-swatch-mono-5); --opt1-link-background: var(--meta-swatch-colour-8); --opt1-link-border: none; --opt1-pager-icons-color: var(--meta-swatch-colour-8); --opt1-pager-dot-on-color: var(--meta-swatch-colour-8); --opt1-pager-dot-off-color: rgba(0, 0, 0, 0.3); /* Option 2 */ /* White on blue */ --opt2-block-background: var(--meta-swatch-colour-4); --opt2-content-background: transparent; --opt2-heading-color: var(--meta-swatch-mono-5); --opt2-sub-heading-color: var(--meta-swatch-mono-5); --opt2-empty-p-colour: var(--meta-swatch-mono-5); --opt2-empty-p-background: transparent; --opt2-link-color: var(--meta-swatch-colour-8); --opt2-link-background: var(--meta-swatch-mono-5); --opt2-link-border: 5px solid var(--meta-swatch-colour-8); --opt2-pager-icons-color: var(--meta-swatch-mono-5); --opt2-pager-dot-on-color: var(--meta-swatch-mono-5); --opt2-pager-dot-off-color: rgba(255, 255, 255, 0.3); /* Option 3 */ /* Option 4 */ /* Option 5 */ /* Repeater Card */ /* Block container */ --card-background: var(--meta-swatch-mono-5); --card-border-radius: 20px; --card-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.16); /* Image wrapper */ --card-image-wrapper-height: auto; --card-image-wrapper-height-m: auto; --card-image-wrapper-height-l: auto; /* Image */ --card-image-width: 100%; --card-image-height: 220px; --card-image-width-m: 100%; --card-image-height-m: 220px; --card-image-width-l: 100%; --card-image-height-l: 220px; --card-image-object-fit: cover; --card-image-border-radius: 8px; --card-image-border-radius-m: 24px; --card-image-border-radius-l: 24px; /* Play icon */ --card-play-icon-size: 80px; --card-play-icon-color: rgba(255,255,255,0.8); /* Content */ /* Body */ --card-body-padding: 16px 16px 0 16px; --card-heading-colour: var(--meta-swatch-colour-8); --card-heading-font-family: 'body'; --card-heading-font-size: 24px; --card-heading-font-weight: 400; --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: center; --card-heading-padding: 0 0 12px; --card-excerpt-colour: var(--typo-p-medium-colour); --card-excerpt-font-family: 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; /* Badge */ --card-footer-badge-label-colour: var(--meta-swatch-colour-8); --card-footer-badge-label-font-family: 'body'; --card-footer-badge-label-font-size: 12px; --card-footer-badge-label-font-weight: normal; --card-footer-badge-label-font-style: normal; --card-footer-badge-label-line-height: 1.3; --card-footer-badge-label-spacing: 0; --card-footer-badge-label-text-transform: none; --card-footer-badge-label-text-align: left; --card-footer-badge-label-padding: 0 4px; /* Icon */ --card-label-icon-size: var(--pattern-icon-size); --card-label-icon-color: var(--meta-swatch-colour-8); /* Label */ --card-label-colour: var(--meta-swatch-colour-8); --card-label-font-family: 'body'; --card-label-font-size: 12px; --card-label-font-weight: normal; --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 4px; /* Indicator */ --card-action-icon-size: var(--pattern-icon-size); --card-action-icon-color: var(--meta-swatch-colour-1); /* Share Save */ /* 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: none; /* Table List */ /* Item */ --tl-icon-margin: 0; --tl-icon-padding: 22px 0; --tl-icon-keyline: 1px solid var(--meta-swatch-mono-4); --tl-item-margin: 0; --tl-item-padding: 16px 0; --tl-item-keyline: 1px solid var(--meta-swatch-mono-4); --tl-item-border-width: 0 0 1px 0; --tl-item-border-color: var(--meta-swatch-mono-4); --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(--meta-swatch-colour-8); --tl-item-label-font-family: var(--typo-p-medium-font-face); --tl-item-label-font-size: 17px; --tl-item-label-font-weight: 400px; --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 */ --tl-item-sub-title-colour: var(--meta-swatch-colour-2); --tl-item-sub-title-font-size: 12px; --tl-item-sub-title-font-family: var(--typo-p-medium-font-size); --tl-item-sub-title-font-weight: 200px; --tl-item-sub-title-font-style: var(--typo-p-medium-font-style); --tl-item-sub-title-line-height: var(--typo-p-medium-line-height); --tl-item-sub-title-letter-spacing: var(--typo-p-medium-letter-spacing); --tl-item-sub-title-text-transform: var(--typo-p-medium-text-transform); --tl-item-sub-title-text-align: left; /* Label Info */ /* Value */ /* Icon */ --tl-item-icon-bg-size: 24px; --tl-item-icon-padding: 0; --tl-item-icon-margin: 0; --tl-item-icon-border-radius: 0; --tl-item-icon-bg-colour: transparent; --tl-item-icon-colour: var(--meta-swatch-colour-1); --tl-item-icon-size: 24px; /* Tabs */ /* Tabs */ /* Tab - off */ /* Tab - on */ /* Targeted Links */ /* Block container */ /* Grid container */ /* Heading block overrides */ /* Carousel Nav */ /* Whole block style options */ /* Option 1 */ /* Option 2 */ /* Option 3 */ /* Item styles (old, but still in use) */ /* Item container */ /* Cover image */ /* Body */ /* Header */ /* Icon */ /* Heading */ /* Paragraph */ /* Inline image */ /* Buttons container */ /* Button block overrides */ /* Item style option overrides */ /* Option 1 */ /* Option 2 */ --targeted-links-item-background-opt2: url(/config/images/tile-teal.svg) repeat top center / 50px 50px var(--meta-swatch-colour-12); --targeted-links-item-heading-colour-opt2: var(--meta-swatch-mono-5); --targeted-links-item-p-colour-opt2: var(--meta-swatch-mono-5); /* Option 3 */ --targeted-links-item-background-opt3: url(/config/images/tile-turquoise.svg) repeat top center / 50px 50px var(--meta-swatch-colour-5); --targeted-links-item-heading-colour-opt3: var(--meta-swatch-mono-5); --targeted-links-item-p-colour-opt3: var(--meta-swatch-mono-5); /* Option 4 */ --targeted-links-item-background-opt4: url(/config/images/tile-amber.svg) repeat top center / 50px 50px var(--meta-swatch-colour-7); --targeted-links-item-heading-colour-opt4: var(--meta-swatch-colour-8); --targeted-links-item-p-colour-opt4: var(--meta-swatch-colour-8); /* Option 5 */ --targeted-links-item-background-opt5: var(--meta-swatch-mono-5); --targeted-links-item-heading-colour-opt5: var(--meta-swatch-colour-8); --targeted-links-item-p-colour-opt5: var(--meta-swatch-colour-8); /* Targeted Links Item */ /* Option 1 */ /* New external container */ /* Item container */ --targeted-links-item-opt1-background: var(--meta-swatch-mono-5); --targeted-links-item-opt1-border-radius: 20px; --targeted-links-item-opt1-box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); /* Cover image */ /* Body */ --targeted-links-item-body-opt1-padding: 0 16px 16px; --targeted-links-item-body-opt1-padding-m: 0 16px 16px; --targeted-links-item-body-opt1-padding-l: 0 16px 16px; --targeted-links-item-body-opt1-gap: 0; --targeted-links-item-body-opt1-gap-m: 0; --targeted-links-item-body-opt1-gap-l: 0; /* Header */ --targeted-links-item-header-opt1-padding: 16px; --targeted-links-item-header-opt1-padding-m: 16px; --targeted-links-item-header-opt1-padding-l: 16px; /* Icon */ /* External Heading */ /* Heading */ --targeted-links-item-heading-opt1-color: var(--meta-swatch-mono-5); --targeted-links-item-heading-opt1-font-family: var(--typo-h-medium-font-face); --targeted-links-item-heading-opt1-font-weight: var(--typo-h-medium-font-weight); --targeted-links-item-heading-opt1-font-style: var(--typo-h-medium-font-style); --targeted-links-item-heading-opt1-line-height: var(--typo-h-medium-line-height); --targeted-links-item-heading-opt1-letter-spacing: var(--typo-h-medium-letter-spacing); --targeted-links-item-heading-opt1-text-transform: var(--typo-h-medium-text-transform); --targeted-links-item-heading-opt1-font-size: 27px; --targeted-links-item-heading-opt1-font-size-m: 27px; --targeted-links-item-heading-opt1-font-size-l: 27px; /* Paragraph */ --targeted-links-item-p-opt1-color: var(--meta-swatch-mono-5); --targeted-links-item-p-opt1-font-family: var(--typo-p-medium-font-face); --targeted-links-item-p-opt1-font-weight: var(--typo-p-medium-font-weight); --targeted-links-item-p-opt1-font-style: var(--typo-p-medium-font-style); --targeted-links-item-p-opt1-line-height: var(--typo-p-medium-line-height); --targeted-links-item-p-opt1-letter-spacing: var(--typo-p-medium-letter-spacing); --targeted-links-item-p-opt1-text-transform: var(--typo-p-medium-text-transform); --targeted-links-item-p-opt1-font-size: 17px; --targeted-links-item-p-opt1-font-size-m: 17px; --targeted-links-item-p-opt1-font-size-l: 17px; --targeted-links-item-p-opt1-padding: 0 0 16px; --targeted-links-item-p-opt1-padding-m: 0 0 16px; --targeted-links-item-p-opt1-padding-l: 0 0 16px; /* Paragraph links */ /* Inline image */ --targeted-links-item-inline-image-opt1-height: 200px; --targeted-links-item-inline-image-opt1-height-m: 200px; --targeted-links-item-inline-image-opt1-height-l: 200px; /* Buttons container */ --targeted-links-item-buttons-align-opt1-items: center; --targeted-links-item-buttons-align-opt1-items-m: center; --targeted-links-item-buttons-align-opt1-items-l: center; /* Button block overrides */ /* Option 2 */ /* New external container */ /* Item container */ --targeted-links-item-opt2-background: var(--meta-swatch-mono-5); --targeted-links-item-opt2-border-radius: 20px; --targeted-links-item-opt2-box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); --targeted-links-item-opt2-padding: 0 16px 16px; --targeted-links-item-opt2-padding-m: 0 16px 16px; --targeted-links-item-opt2-padding-l: 0 16px 16px; /* Cover image */ /* Body */ --targeted-links-item-body-opt2-padding: 0; --targeted-links-item-body-opt2-padding-m: 0; --targeted-links-item-body-opt2-padding-l: 0; --targeted-links-item-body-opt2-gap: 0; --targeted-links-item-body-opt2-gap-m: 0; --targeted-links-item-body-opt2-gap-l: 0; /* Header */ --targeted-links-item-header-opt2-padding: 16px; --targeted-links-item-header-opt2-padding-m: 16px; --targeted-links-item-header-opt2-padding-l: 16px; /* Icon */ /* External Heading */ /* Heading */ --targeted-links-item-heading-opt2-color: var(--meta-swatch-mono-5); --targeted-links-item-heading-opt2-font-family: var(--typo-h-medium-font-face); --targeted-links-item-heading-opt2-font-weight: var(--typo-h-medium-font-weight); --targeted-links-item-heading-opt2-font-style: var(--typo-h-medium-font-style); --targeted-links-item-heading-opt2-line-height: var(--typo-h-medium-line-height); --targeted-links-item-heading-opt2-letter-spacing: var(--typo-h-medium-letter-spacing); --targeted-links-item-heading-opt2-text-transform: var(--typo-h-medium-text-transform); --targeted-links-item-heading-opt2-font-size: 27px; --targeted-links-item-heading-opt2-font-size-m: 27px; --targeted-links-item-heading-opt2-font-size-l: 27px; /* Paragraph */ --targeted-links-item-p-opt2-color: var(--meta-swatch-mono-5); --targeted-links-item-p-opt2-font-family: var(--typo-p-medium-font-face); --targeted-links-item-p-opt2-font-weight: var(--typo-p-medium-font-weight); --targeted-links-item-p-opt2-font-style: var(--typo-p-medium-font-style); --targeted-links-item-p-opt2-line-height: var(--typo-p-medium-line-height); --targeted-links-item-p-opt2-letter-spacing: var(--typo-p-medium-letter-spacing); --targeted-links-item-p-opt2-text-transform: var(--typo-p-medium-text-transform); --targeted-links-item-p-opt2-font-size: 17px; --targeted-links-item-p-opt2-font-size-m: 17px; --targeted-links-item-p-opt2-font-size-l: 17px; --targeted-links-item-p-opt2-padding: 0 0 16px; --targeted-links-item-p-opt2-padding-m: 0 0 16px; --targeted-links-item-p-opt2-padding-l: 0 0 16px; /* Paragraph links */ /* Inline image */ --targeted-links-item-inline-image-opt2-height: 200px; --targeted-links-item-inline-image-opt2-height-m: 200px; --targeted-links-item-inline-image-opt2-height-l: 200px; /* Buttons container */ --targeted-links-item-buttons-align-opt2-items: center; --targeted-links-item-buttons-align-opt2-items-m: center; --targeted-links-item-buttons-align-opt2-items-l: center; /* Button block overrides */ /* Option 3 */ /* New external container */ /* Item container */ --targeted-links-item-opt3-background: var(--meta-swatch-colour-4); --targeted-links-item-opt3-border-radius: 20px; --targeted-links-item-opt3-box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); /* Cover image */ /* Body */ --targeted-links-item-body-opt3-padding: 16px; --targeted-links-item-body-opt3-padding-m: 16px; --targeted-links-item-body-opt3-padding-l: 16px; /* Header */ /* Icon */ /* External Heading */ /* Heading */ --targeted-links-item-heading-opt3-color: var(--meta-swatch-mono-5); --targeted-links-item-heading-opt3-font-family: var(--typo-h-medium-font-face); --targeted-links-item-heading-opt3-font-weight: var(--typo-h-medium-font-weight); --targeted-links-item-heading-opt3-font-style: var(--typo-h-medium-font-style); --targeted-links-item-heading-opt3-line-height: var(--typo-h-medium-line-height); --targeted-links-item-heading-opt3-letter-spacing: var(--typo-h-medium-letter-spacing); --targeted-links-item-heading-opt3-text-transform: var(--typo-h-medium-text-transform); --targeted-links-item-heading-opt3-text-align: center; --targeted-links-item-heading-opt3-font-size: 27px; --targeted-links-item-heading-opt3-font-size-m: 27px; --targeted-links-item-heading-opt3-font-size-l: 27px; /* Paragraph */ --targeted-links-item-p-opt3-color: var(--meta-swatch-mono-5); --targeted-links-item-p-opt3-font-family: var(--typo-p-medium-font-face); --targeted-links-item-p-opt3-font-weight: var(--typo-p-medium-font-weight); --targeted-links-item-p-opt3-font-style: var(--typo-p-medium-font-style); --targeted-links-item-p-opt3-line-height: var(--typo-p-medium-line-height); --targeted-links-item-p-opt3-letter-spacing: var(--typo-p-medium-letter-spacing); --targeted-links-item-p-opt3-text-transform: var(--typo-p-medium-text-transform); --targeted-links-item-p-opt3-text-align: center; --targeted-links-item-p-opt3-font-size: 17px; --targeted-links-item-p-opt3-font-size-m: 17px; --targeted-links-item-p-opt3-font-size-l: 17px; --targeted-links-item-p-opt3-padding: 0 0 16px; --targeted-links-item-p-opt3-padding-m: 0 0 16px; --targeted-links-item-p-opt3-padding-l: 0 0 16px; /* Paragraph links */ /* Inline image */ --targeted-links-item-inline-image-opt3-height: 100px; --targeted-links-item-inline-image-opt3-height-m: 100px; --targeted-links-item-inline-image-opt3-height-l: 100px; /* Buttons container */ --targeted-links-item-buttons-opt3-gap: 8px; --targeted-links-item-buttons-opt3-gap-m: 8px; --targeted-links-item-buttons-opt3-gap-l: 8px; --targeted-links-item-buttons-align-opt3-items: center; --targeted-links-item-buttons-align-opt3-items-m: center; --targeted-links-item-buttons-align-opt3-items-l: center; /* Button block overrides */ /* Option 4 */ /* New external container */ /* Item container */ --targeted-links-item-opt4-background: var(--meta-swatch-colour-4); --targeted-links-item-opt4-border-radius: 20px; --targeted-links-item-opt4-box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1); /* Cover image */ /* Body */ --targeted-links-item-body-opt4-padding: 16px; --targeted-links-item-body-opt4-padding-m: 16px; --targeted-links-item-body-opt4-padding-l: 16px; /* Header */ /* Icon */ /* External Heading */ /* Heading */ --targeted-links-item-heading-opt4-color: var(--meta-swatch-colour-8); --targeted-links-item-heading-opt4-font-family: var(--typo-h-medium-font-face); --targeted-links-item-heading-opt4-font-weight: var(--typo-h-medium-font-weight); --targeted-links-item-heading-opt4-font-style: var(--typo-h-medium-font-style); --targeted-links-item-heading-opt4-line-height: var(--typo-h-medium-line-height); --targeted-links-item-heading-opt4-letter-spacing: var(--typo-h-medium-letter-spacing); --targeted-links-item-heading-opt4-text-transform: var(--typo-h-medium-text-transform); --targeted-links-item-heading-opt4-text-align: center; --targeted-links-item-heading-opt4-font-size: 27px; --targeted-links-item-heading-opt4-font-size-m: 27px; --targeted-links-item-heading-opt4-font-size-l: 27px; /* Paragraph */ --targeted-links-item-p-opt4-color: var(--meta-swatch-mono-1); --targeted-links-item-p-opt4-font-family: var(--typo-p-medium-font-face); --targeted-links-item-p-opt4-font-weight: var(--typo-p-medium-font-weight); --targeted-links-item-p-opt4-font-style: var(--typo-p-medium-font-style); --targeted-links-item-p-opt4-line-height: var(--typo-p-medium-line-height); --targeted-links-item-p-opt4-letter-spacing: var(--typo-p-medium-letter-spacing); --targeted-links-item-p-opt4-text-transform: var(--typo-p-medium-text-transform); --targeted-links-item-p-opt4-text-align: center; --targeted-links-item-p-opt4-font-size: 17px; --targeted-links-item-p-opt4-font-size-m: 17px; --targeted-links-item-p-opt4-font-size-l: 17px; --targeted-links-item-p-opt4-padding: 0 0 16px; --targeted-links-item-p-opt4-padding-m: 0 0 16px; --targeted-links-item-p-opt4-padding-l: 0 0 16px; /* Paragraph links */ /* Inline image */ --targeted-links-item-inline-image-opt4-height: 100px; --targeted-links-item-inline-image-opt4-height-m: 100px; --targeted-links-item-inline-image-opt4-height-l: 100px; /* Buttons container */ --targeted-links-item-buttons-opt4-gap: 8px; --targeted-links-item-buttons-opt4-gap-m: 8px; --targeted-links-item-buttons-opt4-gap-l: 8px; --targeted-links-item-buttons-align-opt4-items: center; --targeted-links-item-buttons-align-opt4-items-m: center; --targeted-links-item-buttons-align-opt4-items-l: center; /* 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 */ --bp-result-padding: 0 16px 16px; --bp-result-padding-m: 0 0 24px; --bp-result-padding-l: 0 0 24px; --bp-result-gap: 0; --bp-result-gap-m: 0; --bp-result-gap-l: 0; --bp-result-background: transparent; --bp-result-background-m: transparent; --bp-result-background-l: transparent; /* Inner container */ --bp-result-inner-padding: 0; --bp-result-inner-padding-m: 0 30px; --bp-result-inner-padding-l: 0 30px; --bp-result-inner-background: transparent; --bp-result-inner-background-m: transparent; --bp-result-inner-background-l: transparent; --bp-result-inner-max-width: 100%; --bp-result-inner-max-width-m: 720px; --bp-result-inner-max-width-l: 720px; /* Content container */ --bp-result-content-padding: 0; --bp-result-content-padding-m: 0; --bp-result-content-padding-l: 0; --bp-result-content-border-radius: none; --bp-result-content-border-radius-m: none; --bp-result-content-border-radius-l: none; --bp-result-content-background: transparent; --bp-result-content-background-m: transparent; --bp-result-content-background-l: transparent; /* Columns container */ --bp-result-columns-flex-direction: column; --bp-result-columns-flex-direction-m: row; --bp-result-columns-flex-direction-l: row; --bp-result-columns-gap: 16px; --bp-result-columns-gap-m: 24px; --bp-result-columns-gap-l: 24px; /* Dataviz */ --bp-result-dataviz-background: var(--meta-swatch-mono-5); --bp-result-dataviz-border-bottom: none; --bp-result-dataviz-sticky-box-shadow: none; --bp-result-dataviz-sticky-border-radius: none; --bp-result-dataviz-sticky-border-radius-m: none; --bp-result-dataviz-sticky-border-radius-l: none; --bp-result-dataviz-gap: 16px; --bp-result-dataviz-gap-m: 24px; --bp-result-dataviz-gap-l: 24px; /* Dataviz icons */ --bp-result-dataviz-icons-size: 28px; --bp-result-dataviz-icons-size-m: 28px; --bp-result-dataviz-icons-size-l: 28px; --bp-result-dataviz-icons-color: var(--meta-swatch-colour-2); --bp-result-dataviz-icons-bg-padding: 4px; --bp-result-dataviz-icons-bg-padding-m: 4px; --bp-result-dataviz-icons-bg-padding-l: 4px; --bp-result-dataviz-icons-bg-border-radius: none; --bp-result-dataviz-icons-bg-background: transparent; --bp-result-dataviz-icons-bg-border: none; /* Dataviz labels */ --bp-result-dataviz-labels-label-colour: var(--typo-h-3xs-colour); --bp-result-dataviz-labels-label-font-family: var(--typo-h-3xs-font-face); --bp-result-dataviz-labels-label-font-size: var(--typo-h-3xs-font-size); --bp-result-dataviz-labels-label-font-size-m: var(--typo-h-3xs-font-size); --bp-result-dataviz-labels-label-font-size-l: var(--typo-h-3xs-font-size); --bp-result-dataviz-labels-label-font-weight: var(--typo-h-3xs-font-weight); --bp-result-dataviz-labels-label-font-style: var(--typo-h-3xs-font-style); --bp-result-dataviz-labels-label-line-height: var(--typo-h-3xs-line-height); --bp-result-dataviz-labels-label-letter-spacing: var(--typo-h-3xs-letter-spacing); --bp-result-dataviz-labels-label-text-transform: var(--typo-h-3xs-text-transform); --bp-result-dataviz-labels-label-text-align: center; --bp-result-dataviz-labels-label-margin: var(--typo-h-3xs-margin); /* Dataviz values */ --bp-result-dataviz-value-colour: var(--typo-h-2xs-colour); --bp-result-dataviz-value-font-face: var(--typo-h-2xs-font-face); --bp-result-dataviz-value-font-size: var(--typo-h-2xs-font-size); --bp-result-dataviz-value-font-size-m: var(--typo-h-s-font-size); --bp-result-dataviz-value-font-size-l: var(--typo-h-s-font-size); --bp-result-dataviz-value-font-weight: var(--typo-h-2xs-font-weight); --bp-result-dataviz-value-font-style: var(--typo-h-2xs-font-style); --bp-result-dataviz-value-line-height: var(--typo-h-2xs-line-height); --bp-result-dataviz-value-letter-spacing: var(--typo-h-2xs-letter-spacing); --bp-result-dataviz-value-text-transform: var(--typo-h-2xs-text-transform); --bp-result-dataviz-value-text-align: center; --bp-result-dataviz-value-margin: var(--typo-h-2xs-margin); /* Breakdown heading */ --bp-result-breakdown-heading-colour: var(--typo-h-medium-colour); --bp-result-breakdown-heading-font-face: var(--typo-h-medium-font-face); --bp-result-breakdown-heading-font-size: var(--typo-h-medium-font-size); --bp-result-breakdown-heading-font-size-m: var(--typo-h-medium-font-size); --bp-result-breakdown-heading-font-size-l: var(--typo-h-medium-font-size); --bp-result-breakdown-heading-font-weight: var(--typo-h-medium-font-weight); --bp-result-breakdown-heading-font-style: var(--typo-h-medium-font-style); --bp-result-breakdown-heading-line-height: var(--typo-h-medium-line-height); --bp-result-breakdown-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --bp-result-breakdown-heading-text-transform: var(--typo-h-medium-text-transform); --bp-result-breakdown-heading-text-align: var(--typo-h-medium-text-align); --bp-result-breakdown-heading-margin: var(--typo-h-medium-margin); /* Also style Sub block / Breakdown card */ /* Controls container */ --bp-result-controls-gap: 0; --bp-result-controls-gap-m: 0; --bp-result-controls-gap-l: 0; /* Controls heading */ --bp-result-controls-heading-colour: var(--typo-h-medium-colour); --bp-result-controls-heading-font-face: var(--typo-h-medium-font-face); --bp-result-controls-heading-font-size: var(--typo-h-medium-font-size); --bp-result-controls-heading-font-size-m: var(--typo-h-medium-font-size); --bp-result-controls-heading-font-size-l: var(--typo-h-medium-font-size); --bp-result-controls-heading-font-weight: var(--typo-h-medium-font-weight); --bp-result-controls-heading-font-style: var(--typo-h-medium-font-style); --bp-result-controls-heading-line-height: var(--typo-h-medium-line-height); --bp-result-controls-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --bp-result-controls-heading-text-transform: var(--typo-h-medium-text-transform); --bp-result-controls-heading-text-align: center; --bp-result-controls-heading-margin: var(--typo-h-medium-margin); /* Controls list */ --bp-result-controls-list-gap: 16px; --bp-result-controls-list-gap-m: 24px; --bp-result-controls-list-gap-l: 24px; /* Segmented label */ --bp-result-segmented-label-colour: var(--typo-data-label-s-colour); --bp-result-segmented-label-font-face: var(--typo-data-label-s-font-face); --bp-result-segmented-label-font-size: var(--typo-data-label-s-font-size); --bp-result-segmented-label-font-size-m: var(--typo-data-label-s-font-size); --bp-result-segmented-label-font-size-l: var(--typo-data-label-s-font-size); --bp-result-segmented-label-font-style: var(--typo-data-label-s-font-style); --bp-result-segmented-label-font-weight: var(--typo-data-label-s-font-weight); --bp-result-segmented-label-letter-spacing: var(--typo-data-label-s-letter-spacing); --bp-result-segmented-label-line-height: var(--typo-data-label-s-line-height); --bp-result-segmented-label-text-align: center; --bp-result-segmented-label-text-transform: var(--typo-data-label-s-text-transform); /* 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(--meta-swatch-mono-2); --chart-value-font-face: 'body'; --chart-value-font-size: 14px; --chart-value-font-weight: normal; --chart-value-font-style: normal; --chart-value-line-height: 1; --chart-value-letter-spacing: 0; --chart-value-text-transform: none; --chart-value-text-align: left; --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-3); --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 */ /* Checklist Widget */ /* 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 */ --db-result-padding: 0; --db-result-padding-m: 0; --db-result-padding-l: 0; --db-result-gap: 0; --db-result-gap-m: 0; --db-result-gap-l: 0; --db-result-background: transparent; --db-result-background-m: transparent; --db-result-background-l: transparent; /* Inner container */ --db-result-inner-padding: 32px 0; --db-result-inner-padding-m: 32px 0; --db-result-inner-padding-l: 32px 0; --db-result-inner-background: var(--meta-swatch-colour-14); --db-result-inner-background-m: transparent; --db-result-inner-background-l: transparent; --db-result-inner-max-width: 100%; --db-result-inner-max-width-m: 100%; --db-result-inner-max-width-l: 950px; --db-result-inner-gap: 24px; --db-result-inner-gap-m: 24px; --db-result-inner-gap-l: 24px; /* Block Container */ /* Chart container */ --db-result-chart-container-gap: 24px; --db-result-chart-container-gap-m: 24px; --db-result-chart-container-gap-l: 24px; /* FF Messages Widget */ /* Block container */ /* Content container */ /* Grid container */ /* Icon layout */ /* Labels */ /* Positive message */ /* Negative message */ /* FF Scorecards Widget */ /* Section container */ /* Section heading overrides */ /* Section paragraph */ /* Score card containers */ /* Scorecard label top */ /* Scorecard label bottom */ /* Scorecard value */ /* Scorecard donut */ /* Donut Info icon */ /* Donut label */ /* Scorecard pursuits icon */ /* 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 */ /* Content container */ /* Item container */ /* Text container */ /* Heading */ /* Sub heading */ /* Detail container */ /* Indicator layout */ /* Indicator ON */ /* Indicator OFF */ /* Goal Scorecard Widget */ /* Block container */ /* Scores container */ /* Score item container */ /* Score item label */ /* Label off state overrides */ /* Score indicator layout */ /* Score indicator ON */ /* Score indicator off */ /* Update container */ /* Update label */ /* Healthscore Widget */ /* High Priority Goals Widget */ /* Block container */ /* Content container */ /* Header container */ /* Heading */ /* Sub heading */ /* 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 */ --mortgage-tool-widget-background: #FEF5E2; /* Image */ --mortgage-tool-image-padding: 8px 0 0 0; --mortgage-tool-image-object-fit: contain; --mortgage-tool-image-width: 100%; --mortgage-tool-image-height: 250px; --mortgage-tool-image-margin-bottom: -35px; /* Body */ --mortgage-tool-body-padding: 40px 0 24px 0; /* Heading */ /* Sub heading */ /* Cards container */ --mortgage-tool-cards-padding: 16px 0; --mortgage-tool-cards-gap: 16px; --mortgage-tool-cards-gap-m: 16px; --mortgage-tool-cards-gap-l: 20px; --mortgage-tool-cards-columns: 1; --mortgage-tool-cards-columns-m: 2; --mortgage-tool-cards-columns-l: 2; /* Card */ --mortgage-tool-card-background: #FFFFFF; --mortgage-tool-card-padding: 0 16px; --mortgage-tool-card-border-radius: 5px; --mortgage-tool-card-box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.16); /* Card Heading */ --mortgage-tool-card-heading-colour: var(--typo-p-small-colour); --mortgage-tool-card-heading-font-face: var(--typo-p-small-font-face); --mortgage-tool-card-heading-font-size: 16px; --mortgage-tool-card-heading-font-weight: 400; --mortgage-tool-card-heading-font-style: var(--typo-p-small-font-style); --mortgage-tool-card-heading-line-height: var(--typo-p-small-line-height); --mortgage-tool-card-heading-label-spacing: var(--typo-p-small-letter-spacing); --mortgage-tool-card-heading-text-transform: var(--typo-p-small-text-transform); --mortgage-tool-card-heading-text-align: left; --mortgage-tool-card-heading-margin: 0; --mortgage-tool-card-heading-padding: 16px 0; /* Metrics container */ --mortgage-tool-metrics-gap: 8px; /* Metric */ --mortgage-tool-metric-border-radius: 0px 10px 10px 0px; --mortgage-tool-metric-gap: 7px; --mortgage-tool-metric-padding: 12px 15px; --mortgage-tool-metric-width: 90%; --mortgage-tool-metric-option-1-background: #FEF5E2; --mortgage-tool-metric-option-1-border: 15px solid #FAA74A; --mortgage-tool-metric-option-2-background: #EDF8FA; --mortgage-tool-metric-option-2-border: 15px solid #4FBECE; --mortgage-tool-metric-option-3-background: #EEEEF8; --mortgage-tool-metric-option-3-border: 15px solid #00154D; /* Metric Label */ --mortgage-tool-metric-label-colour: var(--typo-p-small-colour); --mortgage-tool-metric-label-font-face: var(--typo-p-small-font-face); --mortgage-tool-metric-label-font-size: 16px; --mortgage-tool-metric-label-font-weight: 400; --mortgage-tool-metric-label-font-style: var(--typo-p-small-font-style); --mortgage-tool-metric-label-line-height: 1.2; --mortgage-tool-metric-label-label-spacing: var(--typo-p-small-letter-spacing); --mortgage-tool-metric-label-text-transform: var(--typo-p-small-text-transform); --mortgage-tool-metric-label-text-align: left; --mortgage-tool-metric-label-margin: 0; --mortgage-tool-metric-label-padding: 0; /* Metric Value */ --mortgage-tool-metric-value-colour: var(--typo-p-small-colour); --mortgage-tool-metric-value-font-face: var(--typo-p-small-font-face); --mortgage-tool-metric-value-font-size: 16px; --mortgage-tool-metric-value-font-weight: 400; --mortgage-tool-metric-value-font-style: var(--typo-p-small-font-style); --mortgage-tool-metric-value-line-height: 1.2; --mortgage-tool-metric-value-label-spacing: var(--typo-p-small-letter-spacing); --mortgage-tool-metric-value-text-transform: var(--typo-p-small-text-transform); --mortgage-tool-metric-value-text-align: left; --mortgage-tool-metric-value-margin: 0; --mortgage-tool-metric-value-padding: 0; /* Button */ --mortgage-tool-button-padding: 16px 0; /* Button Label */ --mortgage-tool-button-label-colour: var(--typo-p-small-colour); --mortgage-tool-button-label-font-face: var(--typo-p-small-font-face); --mortgage-tool-button-label-font-size: 16px; --mortgage-tool-button-label-font-weight: 400; --mortgage-tool-button-label-font-style: var(--typo-p-small-font-style); --mortgage-tool-button-label-line-height: var(--typo-p-small-line-height); --mortgage-tool-button-label-label-spacing: var(--typo-p-small-letter-spacing); --mortgage-tool-button-label-text-transform: var(--typo-p-small-text-transform); --mortgage-tool-button-label-text-align: left; --mortgage-tool-button-label-margin: 0; --mortgage-tool-button-label-padding: 0; /* Button Icon */ --mortgage-tool-button-icon-size: 24px; --mortgage-tool-button-icon-color: var(--meta-swatch-colour-10); --mortgage-tool-metric-info-icon-colour: var(--meta-swatch-colour-4); --mortgage-tool-metric-info-icon-size: 24px; /* Positive Impact Widget */ /* Block container */ /* Content container */ /* Points breakdown*/ /* Profile Result */ --profile-result-button-justify-content: ; /* Profile Widget */ /* Block container */ /* My profile heading (My profile) */ /* My profile current */ /* My profile current heading */ /* My profile card - ON */ /* My profile card header container */ /* My profile card heading */ /* My profile card icon */ /* My profile card body text */ /* My profile card - OFF */ /* My profile card header container */ /* My profile card heading */ /* My profile card icon */ /* My profile card body text */ /* Other profiles container */ /* Other profiles accordion item */ /* Header container */ /* Text container */ /* Accordion icon */ /* Image */ /* Body container */ /* Property Breakdown */ /* Container */ --property-breakdown-padding: 15px; --property-breakdown-background: #EEEEEE; --property-breakdown-border-radius: 15px; --property-breakdown-box-shadow: none; /* Header */ --property-breakdown-header-margin: 0 0 10px 0; /* Heading */ --property-breakdown-heading-text-align: center; /* Row */ --property-breakdown-row-min-height: 34px; --property-breakdown-row-padding: 8px 0; --property-breakdown-row-keyline: 1px solid #F26A2C; --property-breakdown-row-icon-size: 24px; --property-breakdown-row-icon-colour: #00154D; /* 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 */ --imp-widg-container-padding: 16px; --imp-widg-container-border-max-width: 450px; /* Indicator icon */ --imp-widg-indic-icon-bg-size: 100px; --imp-widg-indic-icon-margin: 8px; --imp-widg-indic-icon-border-radius: 50%; --imp-widg-indic-icon-border: 1px solid transparent; --imp-widg-indic-success-icon-colour: #66C607; --imp-widg-indic-fail-icon-colour: #FF0000; --imp-widg-indic-pending-icon-colour: var(--meta-swatch-colour-10); --imp-widg-indic-icon-size: 35px; /* Heading */ --imp-widg-heading-font-size: 26px; --imp-widg-heading-font-weight: 600; --imp-widg-heading-text-align: center; --imp-widg-heading-padding: 16px 0; /* Sub heading */ /* Data icon */ --imp-widg-data-icon-padding: 8px; --imp-widg-data-icon-colour: #00154D; /* Savings Plan Result */ /* Block Container */ --sp-result-padding: 0 16px 16px; --sp-result-padding-m: 0 0 24px; --sp-result-padding-l: 0 0 24px; --sp-result-gap: 0; --sp-result-gap-m: 0; --sp-result-gap-l: 0; --sp-result-background: transparent; --sp-result-background-m: transparent; --sp-result-background-l: transparent; /* Inner container */ --sp-result-inner-padding: 0; --sp-result-inner-padding-m: 0; --sp-result-inner-padding-l: 0; --sp-result-inner-background: transparent; --sp-result-inner-background-m: transparent; --sp-result-inner-background-l: transparent; --sp-result-inner-max-width: 100%; --sp-result-inner-max-width-m: 720px; --sp-result-inner-max-width-l: 720px; /* Content container */ --sp-result-content-max-width: 100%; --sp-result-content-max-width-m: 100%; --sp-result-content-max-width-l: 950px; --sp-result-content-padding: 0; --sp-result-content-padding-m: 0; --sp-result-content-padding-l: 0; --sp-result-content-border-radius: none; --sp-result-content-border-radius-m: none; --sp-result-content-border-radius-l: none; --sp-result-content-background: transparent; --sp-result-content-background-m: transparent; --sp-result-content-background-l: transparent; /* Content heading */ /* Content subheading */ /* Columns container */ --sp-result-columns-flex-direction: column; --sp-result-columns-flex-direction-m: row; --sp-result-columns-flex-direction-l: row; --sp-result-columns-gap: 16px; --sp-result-columns-gap-m: 24px; --sp-result-columns-gap-l: 24px; /* Dataviz */ --sp-result-dataviz-background: var(--meta-swatch-mono-5); --sp-result-dataviz-border-bottom: none; --sp-result-dataviz-sticky-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4); --sp-result-dataviz-padding: 16px 0; --sp-result-dataviz-padding-m: 16px 0; --sp-result-dataviz-padding-l: 16px 0; --sp-result-dataviz-gap: 16px; --sp-result-dataviz-gap-m: 24px; --sp-result-dataviz-gap-l: 24px; /* Dataviz item */ --sp-result-dataviz-item-gap: 16px; --sp-result-dataviz-item-gap-m: 24px; --sp-result-dataviz-item-gap-l: 24px; /* Donuts */ --sp-result-donut-whole-color: var(--meta-swatch-mono-4); --sp-result-donut-value-color: var(--meta-swatch-colour-4); --sp-result-donut-max-size: 228px; --sp-result-donut-words-padding: 0 0 8px; --sp-result-donut-words-padding-m: 0 0 16px; --sp-result-donut-words-padding-l: 0 0 16px; --sp-result-donut-words-gap: 4px; --sp-result-donut-words-gap-m: 12px; --sp-result-donut-words-gap-l: 12px; /* Dataviz headings */ --sp-result-dataviz-headings-colour: var(--typo-h-xs-colour); --sp-result-dataviz-headings-font-family: var(--typo-h-xs-font-face); --sp-result-dataviz-headings-font-size: var(--typo-h-xs-font-size); --sp-result-dataviz-headings-font-size-m: var(--typo-h-xs-font-size); --sp-result-dataviz-headings-font-size-l: var(--typo-h-xs-font-size); --sp-result-dataviz-headings-font-weight: var(--typo-h-xs-font-weight); --sp-result-dataviz-headings-font-style: var(--typo-h-xs-font-style); --sp-result-dataviz-headings-line-height: var(--typo-h-xs-line-height); --sp-result-dataviz-headings-letter-spacing: var(--typo-h-xs-letter-spacing); --sp-result-dataviz-headings-text-transform: var(--typo-h-xs-text-transform); --sp-result-dataviz-headings-text-align: var(--typo-h-xs-text-align); --sp-result-dataviz-headings-margin: var(--typo-h-xs-margin); /* Dataviz labels */ --sp-result-dataviz-labels-colour: var(--typo-label-s-colour); --sp-result-dataviz-labels-font-face: var(--typo-label-s-font-face); --sp-result-dataviz-labels-font-size: var(--typo-label-s-font-size); --sp-result-dataviz-labels-font-size-m: var(--typo-label-s-font-size); --sp-result-dataviz-labels-font-size-l: var(--typo-label-s-font-size); --sp-result-dataviz-labels-font-weight: var(--typo-label-s-font-weight); --sp-result-dataviz-labels-font-style: var(--typo-label-s-font-style); --sp-result-dataviz-labels-line-height: var(--typo-label-s-line-height); --sp-result-dataviz-labels-letter-spacing: var(--typo-label-s-letter-spacing); --sp-result-dataviz-labels-text-transform: var(--typo-label-s-text-transform); --sp-result-dataviz-labels-text-align: var(--typo-label-s-text-align); --sp-result-dataviz-labels-margin: var(--typo-label-s-margin); /* Dataviz values */ --sp-result-dataviz-value-colour: var(--typo-data-xl-colour); --sp-result-dataviz-value-font-face: var(--typo-data-xl-font-face); --sp-result-dataviz-value-font-size: var(--typo-data-xl-font-size); --sp-result-dataviz-value-font-size-m: var(--typo-data-xl-font-size); --sp-result-dataviz-value-font-size-l: var(--typo-data-xl-font-size); --sp-result-dataviz-value-font-weight: var(--typo-data-xl-font-weight); --sp-result-dataviz-value-font-style: var(--typo-data-xl-font-style); --sp-result-dataviz-value-line-height: var(--typo-data-xl-line-height); --sp-result-dataviz-value-letter-spacing: var(--typo-data-xl-letter-spacing); --sp-result-dataviz-value-text-transform: var(--typo-data-xl-text-transform); --sp-result-dataviz-value-text-align: var(--typo-data-xl-text-align); --sp-result-dataviz-value-margin: var(--typo-data-xl-margin); /* Dataviz suffix */ /* Breakdown heading */ --sp-result-breakdown-heading-colour: var(--typo-h-medium-colour); --sp-result-breakdown-heading-font-face: var(--typo-h-medium-font-face); --sp-result-breakdown-heading-font-size: var(--typo-h-medium-font-size); --sp-result-breakdown-heading-font-size-m: var(--typo-h-medium-font-size); --sp-result-breakdown-heading-font-size-l: var(--typo-h-medium-font-size); --sp-result-breakdown-heading-font-weight: var(--typo-h-medium-font-weight); --sp-result-breakdown-heading-font-style: var(--typo-h-medium-font-style); --sp-result-breakdown-heading-line-height: var(--typo-h-medium-line-height); --sp-result-breakdown-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --sp-result-breakdown-heading-text-transform: var(--typo-h-medium-text-transform); --sp-result-breakdown-heading-text-align: center; --sp-result-breakdown-heading-margin: var(--typo-h-medium-margin); /* Also style Sub block / Breakdown card */ /* Controls container */ --sp-result-controls-gap: 0; --sp-result-controls-gap-m: 0; --sp-result-controls-gap-l: 0; /* Controls heading */ --sp-result-controls-heading-colour: var(--typo-h-medium-colour); --sp-result-controls-heading-font-face: var(--typo-h-medium-font-face); --sp-result-controls-heading-font-size: var(--typo-h-medium-font-size); --sp-result-controls-heading-font-size-m: var(--typo-h-medium-font-size); --sp-result-controls-heading-font-size-l: var(--typo-h-medium-font-size); --sp-result-controls-heading-font-weight: var(--typo-h-medium-font-weight); --sp-result-controls-heading-font-style: var(--typo-h-medium-font-style); --sp-result-controls-heading-line-height: var(--typo-h-medium-line-height); --sp-result-controls-heading-letter-spacing: var(--typo-h-medium-letter-spacing); --sp-result-controls-heading-text-transform: var(--typo-h-medium-text-transform); --sp-result-controls-heading-text-align: center; --sp-result-controls-heading-margin: var(--typo-h-medium-margin); /* Controls list */ --sp-result-controls-list-gap: 24px; --sp-result-controls-list-gap-m: 24px; --sp-result-controls-list-gap-l: 24px; /* 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 */ /* Goal Indicator */ /* Pursuit Indicator */ /* FF KPI Detail */ /* Item */ /* Icon */ /* Label */ /* Mortgage Passport */ /* Container */ --mortgage-passport-container-background: transparent; /* Widget Wrapper */ --mortgage-passport-wrapper-padding: 16px 0; --mortgage-passport-wrapper-background: transparent; --mortgage-passport-wrapper-gap: 0; /* Item */ --mortgage-passport-item-padding: 8px 0; --mortgage-passport-item-border-bottom: 1px solid var(--meta-swatch-colour-7); /* Icon */ --mortgage-passport-icon-wrapper-size: 45px; --mortgage-passport-icon-wrapper-background: #54D3C2; --mortgage-passport-icon-wrapper-margin: 0 8px 0 0; --mortgage-passport-icon-wrapper-margin-md: 0 0 12px 0; --mortgage-passport-icon-size: 32px; --mortgage-passport-icon-colour: #251543; /* Label */ --mortgage-passport-label-colour: var(--meta-swatch-colour-8); --mortgage-passport-label-font-family: 'body'; --mortgage-passport-label-font-size: 12px; --mortgage-passport-label-font-style: normal; --mortgage-passport-label-font-weight: 300; --mortgage-passport-label-line-height: 1.2; --mortgage-passport-label-text-transform: none; --mortgage-passport-label-margin: 0 0 4px 0; /* Value */ --mortgage-passport-value-colour: var(--meta-swatch-colour-8); --mortgage-passport-value-font-family: 'body'; --mortgage-passport-value-font-size: 24px; --mortgage-passport-value-font-style: normal; --mortgage-passport-value-font-weight: 400; --mortgage-passport-value-line-height: 1.2; --mortgage-passport-value-text-transform: none; --mortgage-passport-value-margin: 0; /* Sub blocks */ /* Account info */ --account-info-block-gap: 4px; --account-info-block-padding: 16px 0; /* Account info title */ --account-info-title-colour: var(--meta-swatch-colour-8); --account-info-title-font-size: 17px; --account-info-title-font-family: var(--typo-p-medium-font-family); --account-info-title-font-weight: 500; --account-info-title-font-style: var(--typo-p-medium-font-style); --account-info-title-line-height: var(--typo-p-medium-font-height); --account-info-title-letter-spacing: var(--typo-p-medium-font-spacing); --account-info-title-text-transform: var(--typo-p-medium-font-transform); --account-info-title-text-align: left; /* Account info sub title */ --account-info-sub-title-colour: var(--meta-swatch-colour-2); --account-info-sub-title-font-size: 12px; --account-info-sub-title-font-family: var(--typo-p-small-font-family); --account-info-sub-title-font-weight: 300; --account-info-sub-title-font-style: var(--typo-p-small-font-style); --account-info-sub-title-line-height: 120%; --account-info-sub-title-letter-spacing: var(--typo-p-small-font-spacing); --account-info-sub-title-text-transform: var(--typo-p-small-font-transform); --account-info-sub-title-text-align: left; /* Bar chart */ /* Bar Chart Container */ /* Bar Chart Legend */ /* Breakdown card */ /* Container */ --breakdown-rows-padding: 0; --breakdown-rows-margin: 0; --breakdown-rows-gap: 1px; --breakdown-rows-background: var(--meta-swatch-colour-5); --breakdown-rows-border: none; --breakdown-rows-border-radius: 5px; --breakdown-rows-box-shadow: 0px 4px 18px rgba(0, 0, 0, 0.16); /* Data row */ --breakdown-data-row-padding: 12px 8px; --breakdown-data-row-background: var(--meta-swatch-mono-5); --breakdown-data-row-gap: 5px; --breakdown-data-row-border-bottom: none; --breakdown-data-row-border-bottom-last: none; /* Operator icon */ --breakdown-data-row-operator-icon-size: var(--pattern-icon-size); --breakdown-data-row-operator-icon-size-m: var(--pattern-icon-size); --breakdown-data-row-operator-icon-size-l: var(--pattern-icon-size); --breakdown-data-row-operator-icon-color: var(--meta-swatch-colour-2); --breakdown-data-row-operator-icon-bg-padding: none; --breakdown-data-row-operator-icon-bg-border-radius: none; --breakdown-data-row-operator-icon-bg-background: transparent; --breakdown-data-row-operator-icon-bg-border: none; /* Label value */ --breakdown-data-row-label-value-colour: var(--typo-data-label-s-colour); --breakdown-data-row-label-value-font-face: var(--typo-data-label-s-font-face); --breakdown-data-row-label-value-font-size: var(--typo-data-label-s-font-size); --breakdown-data-row-label-value-font-size-m: var(--typo-data-label-s-font-size); --breakdown-data-row-label-value-font-size-l: var(--typo-data-label-s-font-size); --breakdown-data-row-label-value-font-weight: var(--typo-data-label-s-font-weight); --breakdown-data-row-label-value-font-style: var(--typo-data-label-s-font-style); --breakdown-data-row-label-value-line-height: var(--typo-data-label-s-line-height); --breakdown-data-row-label-value-letter-spacing: var(--typo-data-label-s-letter-spacing); --breakdown-data-row-label-value-text-transform: var(--typo-data-label-s-text-transform); --breakdown-data-row-label-value-text-align: var(--typo-data-label-s-text-align); --breakdown-data-row-label-value-margin: var(--typo-data-label-s-margin); /* Label */ --breakdown-data-row-label-colour: var(--typo-data-label-xs-colour); --breakdown-data-row-label-font-face: var(--typo-data-label-xs-font-face); --breakdown-data-row-label-font-size: var(--typo-data-label-xs-font-size); --breakdown-data-row-label-font-size-m: var(--typo-data-label-xs-font-size); --breakdown-data-row-label-font-size-l: var(--typo-data-label-xs-font-size); --breakdown-data-row-label-font-weight: var(--typo-data-label-xs-font-weight); --breakdown-data-row-label-font-style: var(--typo-data-label-xs-font-style); --breakdown-data-row-label-line-height: var(--typo-data-label-xs-line-height); --breakdown-data-row-label-letter-spacing: var(--typo-data-label-xs-letter-spacing); --breakdown-data-row-label-text-transform: var(--typo-data-label-xs-text-transform); --breakdown-data-row-label-text-align: var(--typo-data-label-xs-text-align); --breakdown-data-row-label-margin: var(--typo-data-label-xs-margin); /* Calc value */ --breakdown-data-row-calc-value-colour: var(--typo-data-s-colour); --breakdown-data-row-calc-value-font-face: var(--typo-data-s-font-face); --breakdown-data-row-calc-value-font-size: var(--typo-data-s-font-size); --breakdown-data-row-calc-value-font-size-m: var(--typo-data-s-font-size); --breakdown-data-row-calc-value-font-size-l: var(--typo-data-s-font-size); --breakdown-data-row-calc-value-font-weight: var(--typo-data-s-font-weight); --breakdown-data-row-calc-value-font-style: var(--typo-data-s-font-style); --breakdown-data-row-calc-value-line-height: var(--typo-data-s-line-height); --breakdown-data-row-calc-value-letter-spacing: var(--typo-data-s-letter-spacing); --breakdown-data-row-calc-value-text-transform: var(--typo-data-s-text-transform); --breakdown-data-row-calc-value-text-align: var(--typo-data-s-text-align); --breakdown-data-row-calc-value-margin: var(--typo-data-s-margin); /* Info icon */ --breakdown-data-row-info-icon-size: var(--pattern-icon-size); --breakdown-data-row-info-icon-size-m: var(--pattern-icon-size); --breakdown-data-row-info-icon-size-l: var(--pattern-icon-size); --breakdown-data-row-info-icon-color: var(--meta-swatch-colour-2); --breakdown-data-row-info-icon-bg-padding: none; --breakdown-data-row-info-icon-bg-border-radius: none; --breakdown-data-row-info-icon-bg-background: transparent; --breakdown-data-row-info-icon-bg-border: none; /* Total row */ --breakdown-total-row-padding: 12px 8px; --breakdown-total-row-background: var(--meta-swatch-mono-5); --breakdown-total-row-gap: 5px; --breakdown-total-row-border-bottom: none; /* Total row - value */ --breakdown-total-row-value-colour: var(--typo-data-l-colour); --breakdown-total-row-value-font-face: var(--typo-data-l-font-face); --breakdown-total-row-value-font-size: var(--typo-data-l-font-size); --breakdown-total-row-value-font-size-m: var(--typo-data-l-font-size); --breakdown-total-row-value-font-size-l: var(--typo-data-l-font-size); --breakdown-total-row-value-font-weight: var(--typo-data-l-font-weight); --breakdown-total-row-value-font-style: var(--typo-data-l-font-style); --breakdown-total-row-value-line-height: var(--typo-data-l-line-height); --breakdown-total-row-value-letter-spacing: var(--typo-data-l-letter-spacing); --breakdown-total-row-value-text-transform: var(--typo-data-l-text-transform); --breakdown-total-row-value-text-align: var(--typo-data-l-text-align); --breakdown-total-row-value-margin: var(--typo-data-l-margin); /* Total row - label */ --breakdown-total-row-label-colour: var(--typo-data-label-xs-colour); --breakdown-total-row-label-font-face: var(--typo-data-label-xs-font-face); --breakdown-total-row-label-font-size: var(--typo-data-label-xs-font-size); --breakdown-total-row-label-font-size-m: var(--typo-data-label-xs-font-size); --breakdown-total-row-label-font-size-l: var(--typo-data-label-xs-font-size); --breakdown-total-row-label-font-weight: var(--typo-data-label-xs-font-weight); --breakdown-total-row-label-font-style: var(--typo-data-label-xs-font-style); --breakdown-total-row-label-line-height: var(--typo-data-label-xs-line-height); --breakdown-total-row-label-letter-spacing: var(--typo-data-label-xs-letter-spacing); --breakdown-total-row-label-text-transform: var(--typo-data-label-xs-text-transform); --breakdown-total-row-label-text-align: var(--typo-data-label-xs-text-align); --breakdown-total-row-label-margin: var(--typo-data-label-xs-margin); /* Total row operator icon */ --breakdown-total-row-operator-icon-size: var(--pattern-icon-size); --breakdown-total-row-operator-icon-size-m: var(--pattern-icon-size); --breakdown-total-row-operator-icon-size-l: var(--pattern-icon-size); --breakdown-total-row-operator-icon-color: var(--meta-swatch-colour-2); --breakdown-total-row-operator-icon-bg-padding: none; --breakdown-total-row-operator-icon-bg-border-radius: none; --breakdown-total-row-operator-icon-bg-background: transparent; --breakdown-total-row-operator-icon-bg-border: none; /* Property Goal Breakdown */ /* Container */ /* Row */ /* Row value */ /* Row value suffix */ /* Row link */ /* Total */ /* Vars to help it look right */ /* Goal Row Header */ /* Block container */ /* Detail container */ /* Icon */ /* Label & Icon containers */ /* Labels */ /* Deposit Builder Chart */ /* Container */ --db-chart-container-background: var(--meta-swatch-mono-5); --db-chart-container-bg-color: var(--meta-swatch-mono-5); --db-chart-container-border: none; --db-chart-container-border-radius: 10px; --db-chart-container-box-shadow: var(--pattern-elevation-low); --db-chart-container-padding: 16px; /* Account colours */ /* Account cards */ --swatch-account-1: #ec5f5d; --swatch-account-2: var(--meta-swatch-colour-1); --swatch-account-3: #247ba1; --swatch-account-4: var(--meta-swatch-colour-3); --swatch-account-5: #70c1b3; --swatch-account-6: var(--meta-swatch-colour-4); --swatch-account-7: var(--meta-swatch-mono-2); /* Account buttons */ --btn-account-htb-isa-color: var(--swatch-account-1); --btn-account-lisa-color: var(--swatch-account-2); --btn-account-regular-savings-color: var(--swatch-account-3); --btn-account-cash-isa-color: var(--swatch-account-4); --btn-account-stock-and-shares-isa-color: var(--swatch-account-5); --btn-account-current-color: var(--swatch-account-6); --btn-account-others-color: var(--swatch-account-7); /* Headings */ --db-chart-headings-colour: var(--meta-swatch-mono-1); --db-chart-headings-font-family: 'body'; --db-chart-headings-font-size: 16px; --db-chart-headings-font-weight: 400; --db-chart-headings-font-style: normal; --db-chart-headings-line-height: 1; --db-chart-headings-letter-spacing: -0.03%; --db-chart-headings-text-transform: none; --db-chart-headings-text-align: left; /* Legend */ --db-chart-legend-label-colour: var(--meta-swatch-mono-2); --db-chart-legend-label-font-family: 'body'; --db-chart-legend-label-font-size: 14px; --db-chart-legend-label-font-weight: 300; --db-chart-legend-label-font-style: normal; --db-chart-legend-label-line-height: 1.2; --db-chart-legend-label-letter-spacing: -0.03%; --db-chart-legend-label-text-transform: capitalize; --db-chart-legend-label-text-align: left; /* Balances */ --db-chart-balances-colour: var(--meta-swatch-mono-1); --db-chart-balances-font-family: 'body'; --db-chart-balances-font-size: 16px; --db-chart-balances-font-weight: 400; --db-chart-balances-font-style: normal; --db-chart-balances-line-height: 1; --db-chart-balances-letter-spacing: -0.03%; --db-chart-balances-text-transform: none; --db-chart-balances-text-align: left; /* Totals */ --db-chart-totals-colour: var(--meta-swatch-mono-1); --db-chart-totals-font-family: 'body'; --db-chart-totals-font-size: 18px; --db-chart-totals-font-weight: 400; --db-chart-totals-font-style: normal; --db-chart-totals-line-height: 1; --db-chart-totals-letter-spacing: -0.03%; --db-chart-totals-text-transform: normal; --db-chart-totals-text-align: left; /* Difference label */ --db-chart-difference-label-colour: var(--meta-swatch-mono-2); --db-chart-difference-label-font-family: 'body'; --db-chart-difference-label-font-size: 14px; --db-chart-difference-label-font-weight: 300; --db-chart-difference-label-font-style: normal; --db-chart-difference-label-line-height: 1; --db-chart-difference-label-letter-spacing: -0.03%; --db-chart-difference-label-text-transform: none; --db-chart-difference-label-text-align: center; /* Difference */ --db-chart-difference-colour: var(--meta-swatch-mono-1); --db-chart-difference-font-family: 'body'; --db-chart-difference-font-size: 24px; --db-chart-difference-font-weight: 400; --db-chart-difference-font-style: normal; --db-chart-difference-line-height: 1; --db-chart-difference-letter-spacing: -0.03%; --db-chart-difference-text-transform: none; --db-chart-difference-text-align: center; /* Indicator */ --db-chart-indicator-size: 32px; --db-chart-indicator-border: none; --db-chart-indicator-border-radius: 50%; --db-chart-indicator-icon-size: 24px; --db-chart-indicator-on-bg-color: var(--meta-swatch-colour-5); --db-chart-indicator-on-icon-color: var(--meta-swatch-mono-5); --db-chart-indicator-off-bg-color: transparent; --db-chart-indicator-off-icon-color: transparent; /* Keylines */ --db-chart-keylines: 1px solid var(--meta-swatch-mono-3); /* Deposit Builder Breakdown */ /* Container */ --db-breakdown-container-background: var(--meta-swatch-mono-5); --db-breakdown-container-bg-color: var(--meta-swatch-mono-5); --db-breakdown-container-border: none; --db-breakdown-container-border-radius: 10px; --db-breakdown-container-box-shadow: var(--pattern-elevation-low); --db-breakdown-container-padding: 16px 16px 0; /* Headings */ --db-breakdown-headings-colour: var(--meta-swatch-mono-1); --db-breakdown-headings-font-family: 'body'; --db-breakdown-headings-font-size: 14px; --db-breakdown-headings-font-weight: 300; --db-breakdown-headings-font-style: normal; --db-breakdown-headings-line-height: 1; --db-breakdown-headings-letter-spacing: -0.03%; --db-breakdown-headings-text-transform: none; --db-breakdown-row-headings-text-align: left; --db-breakdown-column-headings-text-align: right; /* Balances */ --db-breakdown-data-colour: var(--meta-swatch-mono-1); --db-breakdown-data-font-family: 'body'; --db-breakdown-data-font-size: 16px; --db-breakdown-data-font-weight: 400; --db-breakdown-data-font-style: normal; --db-breakdown-data-line-height: 1; --db-breakdown-data-letter-spacing: -0.03%; --db-breakdown-data-text-transform: none; --db-breakdown-data-text-align: right; /* Translate numbers */ --db-breakdown-text-container-gap: 16px; --db-breakdown-text-container-gap-m: 16px; --db-breakdown-text-container-gap-l: 16px; --db-breakdown-paragraph-container-gap: 12px; --db-breakdown-paragraph-container-gap-m: 12px; --db-breakdown-paragraph-container-gap-l: 12px; --db-breakdown-tran-h-color: var(--typo-h-xs-colour); --db-breakdown-tran-h-font-family: var(--typo-h-xs-font-face); --db-breakdown-tran-h-font-size: var(--typo-h-xs-font-size); --db-breakdown-tran-h-weight: var(--typo-h-xs-font-weight); --db-breakdown-tran-h-style: var(--typo-h-xs-font-style); --db-breakdown-tran-h-line-height: var(--typo-h-xs-line-height); --db-breakdown-tran-h-letter-spacing: var(--typo-h-xs-letter-spacing); --db-breakdown-tran-h-text-transform: var(--typo-h-xs-text-transform); --db-breakdown-tran-h-text-align: var(--typo-h-xs-text-align); --db-breakdown-tran-p-color: var(--typo-p-medium-colour); --db-breakdown-tran-p-font-family: var(--typo-p-medium-font-face); --db-breakdown-tran-p-font-size: var(--typo-p-medium-font-size); --db-breakdown-tran-p-weight: var(--typo-p-medium-font-weight); --db-breakdown-tran-p-style: var(--typo-p-medium-font-style); --db-breakdown-tran-p-line-height: var(--typo-p-medium-line-height); --db-breakdown-tran-p-letter-spacing: var(--typo-p-medium-letter-spacing); --db-breakdown-tran-p-text-transform: var(--typo-p-medium-text-transform); --db-breakdown-tran-p-text-align: var(--typo-p-medium-text-align); /* Account tables */ --db-breakdown-account-table-padding: 0 0 24px; --db-breakdown-account-table-gap: 4px; /* Account table heading */ --db-breakdown-account-table-h-color: var(--typo-h-s-colour); --db-breakdown-account-table-h-font-family: var(--typo-h-s-font-face); --db-breakdown-account-table-h-font-size: var(--typo-h-s-font-size); --db-breakdown-account-table-h-font-size-m: var(--typo-h-s-font-size); --db-breakdown-account-table-h-font-size-l: var(--typo-h-s-font-size); --db-breakdown-account-table-h-font-weight: var(--typo-h-s-font-weight); --db-breakdown-account-table-h-font-style: var(--typo-h-s-font-style); --db-breakdown-account-table-h-line-height: var(--typo-h-s-line-height); --db-breakdown-account-table-h-letter-spacing: var(--typo-h-s-letter-spacing); --db-breakdown-account-table-h-text-transform: var(--typo-h-s-text-transform); --db-breakdown-account-table-h-text-align: var(--typo-h-s-text-align); /* Icons */ --db-breakdown-icon-size: 24px; --db-breakdown-icon-color: var(--meta-swatch-colour-2); /* Keylines */ --db-breakdown-keylines: 1px solid var(--meta-swatch-mono-3); /* Deposit Builder Confirmation */ /* Container */ --db-confirmation-flex-direction: row; /* Icon Container */ --db-confirmation-icon-container-align-items: center; --db-confirmation-icon-container-justify-content: center; --db-confirmation-icon-container-background: var(--meta-swatch-colour-10.); --db-confirmation-icon-container-border: none; --db-confirmation-icon-container-height: 40px; --db-confirmation-icon-container-width: 40px; --db-confirmation-icon-container-border-radius: 50%; --db-confirmation-icon-container-padding: 0 0 2px 0; --db-confirmation-icon-container-padding: 0; /* Icon */ --db-confirmation-icon-size: 24px; --db-confirmation-icon-colour: var(--meta-swatch-mono-1); /* Message */ --db-confirmation-message-bg-color: transparent; --db-confirmation-message-colour: var(--typo-p-medium-colour); --db-confirmation-message-font-family: var(--typo-p-medium-font-face); --db-confirmation-message-font-size: var(--typo-p-medium-font-size); --db-confirmation-message-font-weight: var(--typo-p-medium-font-weight); --db-confirmation-message-font-style: var(--typo-p-medium-font-style); --db-confirmation-message-line-height: var(--typo-p-medium-line-height); --db-confirmation-message-letter-spacing: var(--typo-p-medium-letter-spacing); --db-confirmation-message-text-transform: var(--typo-p-medium-text-transform); --db-confirmation-message-text-align: var(--typo-p-medium-text-align); --db-confirmation-message-margin: 0; --db-confirmation-message-padding: 12px 8px 12px 16px; /* Deposit Builder Timeline */ /* Container */ --db-timeline-container-background: var(--meta-swatch-mono-5); --db-timeline-container-bg-color: var(--meta-swatch-mono-5); --db-timeline-container-border: none; --db-timeline-container-border-radius: 10px; --db-timeline-container-box-shadow: var(--pattern-elevation-low); --db-timeline-container-padding: 16px; /* Headings */ --db-timeline-headings-colour: var(--meta-swatch-mono-1); --db-timeline-headings-font-family: 'body'; --db-timeline-headings-font-size: 14px; --db-timeline-headings-font-weight: 300; --db-timeline-headings-font-style: normal; --db-timeline-headings-line-height: 1; --db-timeline-headings-letter-spacing: -0.03%; --db-timeline-headings-text-transform: none; --db-timeline-headings-text-align: left; /* Values */ --db-timeline-values-colour: var(--meta-swatch-mono-1); --db-timeline-values-font-family: 'body'; --db-timeline-values-font-size: 14px; --db-timeline-values-font-weight: 400; --db-timeline-values-font-style: normal; --db-timeline-values-line-height: 1; --db-timeline-values-letter-spacing: -0.03%; --db-timeline-values-text-transform: none; --db-timeline-values-text-align: right; /* Lines */ --db-timeline-line-bg-color: var(--meta-swatch-mono-3); --db-timeline-line-1-color: var(--meta-swatch-colour-4); --db-timeline-line-2-color: var(--meta-swatch-colour-5); /* Goal row */ /* Block container */ /* Text container */ /* Heading */ /* Sub Heading */ /* Detail container */ /* Score container */ /* Low Priority container */ /* Low Priority label */ /* Action container */ /* Score indicator layout */ /* Score indicator ON */ /* Score indicator OFF */ /* Badge container */ /* Badge label */ /* LifeScore Dataviz */ /* Block container */ /* Item */ /* Icon BGs */ /* Icon */ /* Words containers */ /* Labels */ /* Values */ /* Left colors */ /* Right colors */ /* Multiple widget */ /* Container */ /* Pension finder dataviz */ /* Savings Plan Breakdown */ /* Container */ --plan-breakdown-margin: 0; --plan-breakdown-padding: 8px 16px; --plan-breakdown-background: var(--meta-swatch-mono-5); --plan-breakdown-bg-colour: var(--meta-swatch-mono-5); --plan-breakdown-border: none; --plan-breakdown-border-radius: var(--effect-card-border-radius); --plan-breakdown-box-shadow: var(--pattern-elevation-low); /* Row */ --plan-breakdown-row-min-height: 40px; --plan-breakdown-row-padding: 8px 0; --plan-breakdown-row-keyline: none; --plan-breakdown-row-icon-size: 24px; --plan-breakdown-row-icon-colour: var(--meta-swatch-mono-3); --plan-breakdown-row-info-icon-size: 24px; --plan-breakdown-row-info-icon-colour: var(--meta-swatch-colour-1); /* Row value */ --plan-breakdown-row-value-colour: var(--meta-swatch-mono-1); --plan-breakdown-row-value-font-face: 'body'; --plan-breakdown-row-value-font-size: 16px; --plan-breakdown-row-value-font-weight: 400; --plan-breakdown-row-value-font-style: normal; --plan-breakdown-row-value-line-height: 1; --plan-breakdown-row-value-letter-spacing: 0.8; --plan-breakdown-row-value-text-transform: none; --plan-breakdown-row-value-text-align: left; /* Row value suffix */ --plan-breakdown-row-value-suffix-colour: var(--meta-swatch-mono-1); --plan-breakdown-row-value-suffix-font-face: 'body'; --plan-breakdown-row-value-suffix-font-size: 14px; --plan-breakdown-row-value-suffix-font-weight: 200; --plan-breakdown-row-value-suffix-font-style: normal; --plan-breakdown-row-value-suffix-line-height: 1; --plan-breakdown-row-value-suffix-letter-spacing: 0.8; --plan-breakdown-row-value-suffix-text-transform: none; --plan-breakdown-row-value-suffix-text-align: left; /* Row link */ --plan-breakdown-row-link-colour: inherit; --plan-breakdown-row-link-font-face: 'body'; --plan-breakdown-row-link-font-size: 14px; --plan-breakdown-row-link-font-weight: 400; --plan-breakdown-row-link-font-style: normal; --plan-breakdown-row-link-line-height: 1; --plan-breakdown-row-link-letter-spacing: 0.8; --plan-breakdown-row-link-text-transform: none; --plan-breakdown-row-link-text-align: right; /* Total */ --plan-breakdown-total-colour: var(--meta-swatch-mono-1); --plan-breakdown-total-font-face: 'body'; --plan-breakdown-total-font-size: 22px; --plan-breakdown-total-font-weight: 400; --plan-breakdown-total-font-style: normal; --plan-breakdown-total-line-height: 1; --plan-breakdown-total-letter-spacing: 0.8; --plan-breakdown-total-text-transform: none; --plan-breakdown-total-text-align: left; /* Savings Plan Dataviz */ /* Container */ --plan-dataviz-bg-colour: var(--meta-swatch-mono-5); /* Dataviz widget */ /* Label */ --plan-dataviz-data-label-colour: var(--pattern-strong-text-colour); --plan-dataviz-data-label-font-face: 'body'; --plan-dataviz-data-label-font-size: 12px; --plan-dataviz-data-label-font-weight: 300; --plan-dataviz-data-label-font-style: normal; --plan-dataviz-data-label-line-height: 1; --plan-dataviz-data-label-letter-spacing: 0.8; --plan-dataviz-data-label-text-transform: none; --plan-dataviz-data-label-text-align: center; --plan-dataviz-data-label-margin: 0; /* Value */ --plan-dataviz-data-value-colour: var(--pattern-data-colour); --plan-dataviz-data-value-font-face: 'body'; --plan-dataviz-data-value-font-size: 24px; --plan-dataviz-data-value-font-weight: 400; --plan-dataviz-data-value-font-style: normal; --plan-dataviz-data-value-line-height: 1.8; --plan-dataviz-data-value-letter-spacing: 0.8; --plan-dataviz-data-value-text-transform: none; --plan-dataviz-data-value-text-align: center; /* Value suffix */ --plan-dataviz-data-value-suffix-colour: var(--pattern-data-colour); --plan-dataviz-data-value-suffix-font-face: 'body'; --plan-dataviz-data-value-suffix-font-size: 12px; --plan-dataviz-data-value-suffix-font-weight: 300; --plan-dataviz-data-value-suffix-font-style: normal; --plan-dataviz-data-value-suffix-line-height: 1; --plan-dataviz-data-value-suffix-letter-spacing: 0.8; --plan-dataviz-data-value-suffix-text-transform: none; --plan-dataviz-data-value-suffix-text-align: center; /* Property Card */ --mab-property-searching-cta-background: #dddddd; --mab-property-searching-cta-border: 2px solid transparent; --mab-property-dormant-cta-background: #dddddd; --mab-property-dormant-cta-border: 2px solid transparent; /* 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 */ --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-5); --theme-bg-attachment: fixed; --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-5); --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-icon-colour: var(--meta-swatch-mono-1); --template-checkpoint-icon-size: 32px; --template-checkpoint-label-colour: var(--meta-swatch-mono-1); --template-checkpoint-label-face: 'body'; --template-checkpoint-label-size: 18px; --template-checkpoint-label-weight: 400; --template-checkpoint-label-line-height: 1.2; --template-checkpoint-label-letter-spacing: 0.8; --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-section-body-padding: 4px 0; /* Checklist */ /* Articles list */ /* Article */ /* Result */ --template-result-page-heading-align: left; --template-result-par-heading-align: left; /* Dashboard */ /* 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 */ --template-property-heading-text-align: left; /* MAB Affordability result */ /* OVERVIEW SECTION */ --affordability-overview-section-padding: 18px 0; --affordability-overview-section-background: var(--meta-swatch-colour-6); /*CARD*/ /*CARD CONTAINER*/ --affordability-overview-card-background: #ffffff; --affordability-overview-card-border: 1px solid rgba(0, 0, 0, 0.25); --affordability-overview-card-border-radius: 20px; --affordability-overview-card-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25); --affordability-overview-card-padding: 18px 12px 18px 24px; /*INFO ICON CONTAINER*/ /*LOAN DEPOSIT DIFFERENCE */ --affordability-overview-card-difference-colour: #FAA74A; --affordability-overview-card-difference-font-size: 24px; --affordability-overview-card-difference-font-weight: 500; --affordability-overview-card-difference-letter-spacing: -0.03em; --affordability-overview-card-difference-line-height: 1.2; --affordability-overview-card-difference-margin: 8px 0px 0px; /*ICON*/ --affordability-overview-card-info-icon-colour: #FAA74A; --affordability-overview-card-info-bottom: -6px; --affordability-overview-card-info-right: 0px; /*PARAGRAPH*/ --affordability-overview-card-paragraph-colour: var(--typo-p-medium-colour); --affordability-overview-card-paragraph-font-face: var(--typo-p-medium-font-face); --affordability-overview-card-paragraph-font-size: var(--typo-p-medium-font-size); --affordability-overview-card-paragraph-font-style: normal; --affordability-overview-card-paragraph-font-weight: var(--typo-p-medium-font-weight); --affordability-overview-card-paragraph-line-height: 1.2; --affordability-overview-card-paragraph-margin: 10px 0 0; /*VALUE*/ --affordability-overview-card-value-colour: rgb(37, 21, 67); --affordability-overview-card-value-font-family: var(--typo-data-2xl-font-face); --affordability-overview-card-value-font-size: var(--typo-data-2xl-font-size); --affordability-overview-card-value-font-style: var(--typo-data-2xl-font-style); --affordability-overview-card-value-font-weight: 500; --affordability-overview-card-value-letter-spacing: -0.03em; --affordability-overview-card-value-line-height: 1.2; --affordability-overview-card-value-margin: 4px 0 0 0; /*DOUGHNUT*/ --affordability-overview-doughnut-whole-colour: var(--meta-swatch-mono-4); --affordability-overview-doughnut-size: 90px; --affordability-overview-doughnut-maximum-colour: var(--meta-swatch-colour-5); --affordability-overview-doughnut-second-colour: var(--meta-swatch-colour-5); --affordability-overview-doughnut-minimum-colour: var(--meta-swatch-colour-5); /*LTV DOUGHNUT*/ --affordability-ltv-doughnut-color: var(--meta-swatch-colour-5); --affordability-ltv-doughnut-size: 110px; --affordability-ltv-doughnut-value-font-size: 24px; /*DOUGHNUT VALUE*/ --affordability-overview-doughnut-value-font-face: var(--typo-data-l-font-face); --affordability-overview-doughnut-value-font-size: 20px; --affordability-overview-doughnut-value-font-style: normal; --affordability-overview-doughnut-value-font-weight: 700; --affordability-overview-doughnut-value-line-height: 1.2; /*DOUGHNUT LABEL*/ --affordability-overview-doughnut-label-font-face: var(--typo-data-label-s-font-face); --affordability-overview-doughnut-label-font-size: 14px; --affordability-overview-doughnut-label-font-style: normal; --affordability-overview-doughnut-label-line-height: 1; /*DOUGHNUT LABEL*/ --affordability-overview-doughnut-icon-size: 18px; --affordability-overview-doughnut-icon-colour: #808080FF; /* EDIT SECTION */ --affordability-edit-section-padding: 0px; --affordability-edit-section-background: #ffffff; /* BUTTONS */ --affordability-edit-buttons-gap: 16px; --affordability-edit-button-border-radius: 40px; --affordability-edit-button-padding: 13px 16px 14px; --affordability-edit-button-background: var(--btn-minor-background); --affordability-edit-button-border: 5px solid #00154D; --affordability-edit-button-label-color: var(--btn-minor-label-color); --affordability-edit-button-max-width: 100%; --affordability-edit-button-max-width-m: 100%; --affordability-edit-button-max-width-l: 100%; --affordability-edit-button-highlight-background: var(--btn-minor-background); /* MODAL */ /* IMAGE */ /* TITLE */ --affordability-section-modal-item-title-text-align: left; /* ICON CONTAINER */ --affordability-section-modal-icon-container-size: 64px; /* ICON */ --affordability-section-modal-icon-size: 24px; --affordability-section-modal-icon-colour: var(--meta-swatch-colour-10); --affordability-overview-icon-color: var(--meta-swatch-colour-4); /* Feed */ /* Content container */ /* Grid */ --pt-feed-content-grid-template-columns: 1; --pt-feed-content-grid-template-columns-m: 2; --pt-feed-content-grid-template-columns-l: 2; --pt-feed-content-column-gap: 16px; --pt-feed-content-column-gap-m: 24px; --pt-feed-content-column-gap-l: 24px; --pt-feed-content-row-gap: 16px; --pt-feed-content-row-gap-m: 24px; --pt-feed-content-row-gap-l: 24px; /* Grid items */ /* Filters container */ /* Each individual filter */ /* Empty state paragraph */ --pt-feed-empty-p-colour: var(--typo-p-medium-colour); --pt-feed-empty-p-font-size: var(--typo-p-medium-font-face); --pt-feed-empty-p-font-family: var(--typo-p-medium-font-size); --pt-feed-empty-p-font-weight: var(--typo-p-medium-font-weight); --pt-feed-empty-p-font-style: var(--typo-p-medium-font-style); --pt-feed-empty-p-line-height: var(--typo-p-medium-line-height); --pt-feed-empty-p-letter-spacing: var(--typo-p-medium-letter-spacing); --pt-feed-empty-p-text-transform: var(--typo-p-medium-text-transform); --pt-feed-empty-p-text-align: center; --pt-feed-empty-p-padding: 48px 0; --pt-feed-empty-p-border-radius: 16px; /* Guidance */ /* Story */ --pt-story-slides-aspect-ratio: unset; --pt-story-slides-aspect-ratio-m: 10/16; --pt-story-slides-aspect-ratio-l: 10/16; --pt-story-stepper-prev-left: 20px; --pt-story-stepper-next-right: 20px; --pt-story-stepper-top: calc(100% - 8px); --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-colour-1); --pt-story-stepper-border: 2px solid var(--meta-swatch-colour-1); --pt-story-stepper-box-shadow: var(--pattern-button-box-shadow); --pt-story-stepper-icon-size: 24px; --pt-story-stepper-icon-color: var(--meta-swatch-mono-5); --story-slide-background: var(--meta-swatch-colour-9); --story-slide-border-radius: 0; --story-slide-box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1); --story-slide-padding: 0 0 16px; --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: 49px; --story-slide-spacer-bottom-m: 16px; --story-slide-spacer-bottom-l: 16px; /* Video in story slide */ /* Video */ --template-video-padding: 16px; --template-video-padding-m: 24px; --template-video-padding-l: 24px; } /* Do not remove! */ /* Themes */ :root.dashboard { /* All types - Main container */ --pattern-layout-spacer-components-s: 40px; } :root.checklist { --pattern-layout-spacer-top-s: 0px; } :root.articles { --pattern-layout-spacer-content-s: 16px; } :root.feed { } :root.question { --theme-template-align-content: end; --coach-avatar-width: auto; --coach-avatar-height: 32px; --coach-avatar-padding: 24px 0 0; --coach-spacer-group: 0; --coach-spacer-par: 0; --page-header-category-margin: 0 auto 8px; --page-header-spacer-top: 8px; --page-header-spacer-below-heading: 4px; --page-header-spacer-bottom: 8px; --progress-indicator-container-margin: 16px 0; --progress-indicator-container-gap: 4px; --progress-indicator-container-gap-m: 8px; --progress-indicator-container-gap-l: 8px; --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; --page-header-heading-size: 24px; --page-header-category-margin: 0 auto; --pattern-layout-spacer-top-s: 4px; /* Segmented buttons */ } :root.article { /* 12 Column Content Grid */ --coach-padding-top: 16px; --coach-padding-bottom: 32px; --page-header-spacer-bottom: 0; --typo-h1-text-align: left; --typo-h2-text-align: left; --typo-h3-text-align: left; --typo-h4-text-align: left; --typo-h5-text-align: left; --typo-h6-text-align: left; --typo-p-text-align: left; --typo-h-xlarge-text-align: left; --typo-h-large-text-align: left; --typo-h-medium-text-align: left; --typo-h-small-text-align: left; --typo-p-large-text-align: left; --typo-p-medium-text-align: left; --typo-p-small-text-align: left; --typo-p-concluding-text-align: left; --typo-p-cta-text-align: left; --typo-h2-margin: 2rem 0 0.5rem 0; --typo-h3-margin: 2rem 0 0.5rem 0; --typo-h4-margin: 2rem 0 0.5rem 0; --theme-page-header-bg-colour: var(--meta-swatch-mono-5); --page-header-category-background: var(--meta-swatch-mono-4); --page-header-category-border: var(--meta-swatch-colour-8); --page-header-category-label-colour: var(--meta-swatch-colour-8); --theme-page-header-heading-colour: var(--meta-swatch-colour-8); --theme-page-header-sub-heading-colour: var(--meta-swatch-colour-8); } :root.blog { } :root.help { --typo-h2-margin: 0 0 15px 0; --typo-h1-text-align: left; --typo-h2-text-align: left; --typo-h3-text-align: left; --typo-h4-text-align: left; --typo-h5-text-align: left; --typo-h6-text-align: left; --typo-p-text-align: left; --typo-h-xlarge-text-align: left; --typo-h-large-text-align: left; --typo-h-medium-text-align: left; --typo-h-small-text-align: left; --typo-p-large-text-align: left; --typo-p-medium-text-align: left; --typo-p-small-text-align: left; --typo-p-concluding-text-align: left; --typo-p-cta-text-align: left; --typo-ul-line-height: 30px; } :root.checkpoint { --theme-bg-colour: var(--meta-swatch-colour-7); } :root.account-complete { } :root.tour { } :root.tour1 { } :root.tour2 { } :root.tour3 { } :root.tour4 { } :root.tour5 { } :root.start { --typo-h1-text-align: left; --typo-h2-text-align: left; --typo-h3-text-align: left; --typo-h4-text-align: left; --typo-h5-text-align: left; --typo-h6-text-align: left; --typo-p-text-align: left; --typo-h-xlarge-text-align: left; --typo-h-large-text-align: center; --typo-h-medium-text-align: left; --typo-h-small-text-align: left; --typo-p-large-text-align: left; --typo-p-medium-text-align: left; --typo-p-small-text-align: left; --theme-page-header-bg-colour: var(--meta-swatch-mono-5); --page-header-category-background: var(--meta-swatch-mono-4); --page-header-category-border: var(--meta-swatch-colour-8); --page-header-category-label-colour: var(--meta-swatch-colour-8); --theme-page-header-heading-colour: var(--meta-swatch-colour-8); --theme-page-header-sub-heading-colour: var(--meta-swatch-colour-8); --page-header-spacer-bottom: 0; --page-header-spacer-bottom-m: 0; --page-header-spacer-bottom-l: 0; } :root.result { --theme-template-bg-colour: var(--meta-swatch-mono-5); --pattern-layout-spacer-top-ml: 24px; --typo-h1-text-align: left; --typo-h2-text-align: left; --typo-h3-text-align: left; --typo-h4-text-align: left; --typo-h5-text-align: left; --typo-h6-text-align: left; --typo-p-text-align: left; --typo-h-xlarge-text-align: left; --typo-h-large-text-align: center; --typo-h-medium-text-align: left; --typo-h-small-text-align: left; --typo-p-large-text-align: left; --typo-p-medium-text-align: left; --typo-p-small-text-align: left; --typo-p-concluding-text-align: left; --typo-p-cta-text-align: left; --credit-score-edit-button-margin: 16px 0; } :root.my-plan { } :root.landing { --typo-h1-margin: 0.07rem 0; --typo-h2-margin: 0.07rem 0; --typo-h3-margin: 0.07rem 0; } :root.landing1 { } :root.account-signup { --typo-p-text-align: left; } :root.account-login { --typo-p-text-align: left; } :root.account-signin { } :root.account-reset-password { } :root.account-home { --page-template-heading-font-weight: 500; --pattern-layout-spacer-top-s: 0px; --pattern-layout-spacer-top-ml: 0px; --pattern-layout-spacer-sections-s: 16px; --pattern-layout-spacer-sections-ml: 24px; /* 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 { } :root.vm-wiwr { } :root.vm-plan { } :root.vm-deposit-builder { } :root.vm-lifescore-home { } :root.property-page { --accordion-v2-header-padding: 16px 0 6px 0; --accordion-v2-title-font-size: 16px; --property-id-image-border-radius: 16px 16px 0 0; --property-id-image-width: 100%; --property-id-image-height: 128px; --property-id-image-width-md: 100%; --property-id-image-width-lg: 200px; --property-card-section-margin: 4px 0 0 0; --property-card-section-border-width: 0; --property-card-section-border-style: solid; --property-card-section-on-md-margin: 0 0 0 4px; --property-card-section-on-md-border-width: 0 2px 0 0; --property-card-container-padding: 0; --property-card-container-on-md-padding: 0; --property-card-container-on-md-direction: row; --property-card-container-on-md-align-items: stretch; --property-card-container-on-md-justify-content: flex-start; --property-card-info-background: var(--meta-swatch-colour-10); --property-card-info-padding: 4px; --property-card-info-margin: 6px 0 0 0; --property-card-info-on-md-padding: 4px; --property-card-info-on-md-margin: 0; --page-header-spacer-top: 28px; --page-header-spacer-bottom: 0; /* Property header*/ } :root.inflation-poll { } :root.investor-quiz { } :root.story { --body-padding: 0; --theme-bg-colour: var(--meta-swatch-colour-9); --page-header-category-padding: 12px 16px; --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-colour-8); --theme-page-header-heading-colour: var(--meta-swatch-mono-5); --theme-page-header-sub-heading-colour: var(--meta-swatch-mono-5); --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-p-text-align: left; --typo-p-colour: var(--meta-swatch-colour-8); --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: 32px; --page-header-heading-size-m: 32px; --page-header-heading-size-l: 32px; --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; --progress-indicator-wrapper-background: var(--meta-swatch-colour-7); --progress-indicator-container-padding: 8px 0; --progress-indicator-container-padding-m: 48px 0; --progress-indicator-container-padding-l: 48px 0; /* Before */ --progress-indicator-background-before: var(--meta-swatch-colour-8); --progress-indicator-border-before: 0; --progress-indicator-text-color-before: var(--meta-swatch-mono-5); --progress-indicator-icon-color-before: var(--meta-swatch-mono-5); --progress-indicator-border-radius-before: 20px; /* Current */ --progress-indicator-background-current: var(--meta-swatch-colour-8); --progress-indicator-border-current: none; --progress-indicator-text-color-current: var(--meta-swatch-mono-1); --progress-indicator-icon-color-current: var(--meta-swatch-mono-1); --progress-indicator-border-radius-current: 20px; /* After */ --progress-indicator-background-after: var(--meta-swatch-mono-5); --progress-indicator-border-after: 0; --progress-indicator-text-color-after: var(--meta-swatch-mono-1); --progress-indicator-icon-color-after: var(--meta-swatch-mono-1); --progress-indicator-border-radius-after: 20px; --page-header-category-background: var(--meta-swatch-mono-5); --page-header-category-label-colour: var(--meta-swatch-colour-8); --typo-h2-text-align: left; } /* DO NOT remove space in next selector */ :root .story1 { /* Slide container */ --story-slide-background: url(/config/images/story-bg-light.png) center center / cover var(--meta-swatch-mono-5); /* 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 { } :root.onboarding { } :root.goal-prioritisation { } :root.goal-performance { } :root.positive-impact { } :root.coins { } :root.engaged { /* Indicator */ /* Keylines */ /* Button */ /* Labels container */ /* Activity Label */ /* Status Label */ /* Status */ /* Action icon */ /* New dynamic statuses */ } :root.video { } :root.ai { --coach-avatar-justify-content: start; --coach-message-background: transparent; --coach-message-align-self: start; --coach-message-align-items: start; --coach-message-max-width: fit-content; --coach-message-max-width-m: fit-content; --coach-message-max-width-l: fit-content; --coach-message-img-display: none; --coach-message-margin-right: 0; --coach-message-border-radius: 20px; --coach-message-border: 1px solid var(--meta-swatch-colour-1); --coach-message-box-shadow: none; --coach-message-padding: 12px 16px; --coach-message-text-align: left; --input-group-spacer: 8px; --input-explainer-label-font-size: 11px; }