/** * @file * Blue color styling for Base+ – M4 Digital Group (m4digitalgroup.com). * * Colours measured from the live site: * Navy #164471 headings, icon squares, footer and breadcrumb band * Navy centre #2D486A lighter centre of the footer / band gradient * Orange #FF6824 links, outline buttons, icons * Red #F93546 start of the button gradient * Text #424242 body text and main menu * Text light #575757 secondary text * Page grey #F3F3F3 page background * White #FFFFFF header, cards, form fields * * Primary/secondary are the orange accent (buttons, links, icons); * headings use base-dark (navy) through --mt-color-high-contrast. */ :root { /*base color*/ --mt-color-base: #424242; --mt-color-base-dark: #164471; --mt-color-base-light: #575757; --mt-color-base-contrast: #FFFFFF; --mt-color-base-value: 66, 66, 66; --mt-color-base-contrast-value: 255, 255, 255; /*primary color*/ --mt-color-primary: hsl(19, 100%, 57%); --mt-color-primary-dark: hsl(16, 85%, 48%); --mt-color-primary-light: hsl(19, 100%, 67%); --mt-color-primary-contrast: var(--mt-color-base-contrast); --mt-color-primary-value: 19, 100%, 57%; --mt-color-primary-dark-value: 16, 85%, 48%; --mt-color-primary-light-value: 19, 100%, 67%; --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); --mt-color-primary-filter: invert(78%) sepia(78%) saturate(5159%) hue-rotate(336deg) brightness(98%) contrast(127%); /*accent color*/ --mt-color-accent: #E8EDF3; --mt-color-accent-dark: #D5DEE8; --mt-color-accent-light: #F3F6F9; --mt-color-accent-contrast: var(--mt-color-base); --mt-color-accent-contrast-value: var(--mt-color-base-value); /*secondary color (links)*/ --mt-color-secondary: hsl(19, 100%, 57%); --mt-color-secondary-dark: hsl(16, 85%, 48%); --mt-color-secondary-light: hsl(19, 100%, 75%); --mt-color-secondary-contrast: var(--mt-color-base-contrast); --mt-color-secondary-value: 19, 100%, 57%; /*tint background (page grey)*/ --mt-color-tint: #F3F3F3; --mt-color-tint-contrast: var(--mt-color-base); --mt-color-tint-contrast-value: var(--mt-color-base-value); /*shade background*/ --mt-color-shade: #0F2F4F; --mt-color-shade-contrast: var(--mt-color-base-contrast); --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); /*dark colored background (footer, bands)*/ --mt-color-dark-colored: #164471; --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); --mt-color-dark-colored-value: 210, 67%, 26%; --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); /*colored background*/ --mt-color-colored: var(--mt-color-primary); --mt-color-colored-light: var(--mt-color-primary-light); --mt-color-colored-contrast: var(--mt-color-primary-contrast); --mt-color-colored-value: var(--mt-color-primary-value); --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); /*bright background (header, white sections)*/ --mt-color-bright: #ffffff; --mt-color-bright-contrast: var(--mt-color-base); --mt-color-bright-value: 255, 255, 255; --mt-color-bright-contrast-value: var(--mt-color-base-value); /*dark background*/ --mt-color-dark: #0B2238; --mt-color-dark-contrast: var(--mt-color-base-contrast); --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); /*pattern background*/ --mt-color-pattern: #ffffff; --mt-color-pattern-contrast: var(--mt-color-base); --mt-color-pattern-contrast-value: var(--mt-color-base-value); /*default background (cards white, main content grey)*/ --mt-color-default: #ffffff; --mt-color-default-light: #F3F3F3; --mt-color-default-contrast: var(--mt-color-base); --mt-color-default-value: 243, 243, 243; --mt-color-default-contrast-value: var(--mt-color-base-value); /*success*/ --mt-color-success: #3E9300; --mt-color-success-dark: #547f1f; --mt-color-success-contrast: #ffffff; /*danger*/ --mt-color-danger: #CC0000; --mt-color-danger-dark: #980a00; --mt-color-danger-contrast: #ffffff; /*warning*/ --mt-color-warning: #EA9900; --mt-color-warning-dark: #e2630b; --mt-color-warning-contrast: #ffffff; /*forms*/ --mt-form-border: #E1E1E1; --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); --mt-form-border-focus: #164471; --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); --mt-form-color: var(--mt-color-base); --mt-form-color-contrast: var(--mt-color-base-contrast); --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.75); --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.6); --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); /* ------------------------------------------------------------------ M4 tokens, used by css/theme/local-theme.css ------------------------------------------------------------------ */ --m4-navy: #164471; --m4-navy-value: 22, 68, 113; --m4-navy-centre: #2D486A; --m4-blue: #2E7BB8; --m4-orange: #FF6824; --m4-red: #F93546; --m4-text: #424242; --m4-text-light: #575757; --m4-grey-dark: #333333; --m4-grey-mid: #5A5A5A; --m4-page-bg: #F3F3F3; --m4-white: #FFFFFF; --m4-line: #E1E1E1; --m4-line-on-dark: rgba(255, 255, 255, 0.15); --m4-text-on-dark-soft: rgba(255, 255, 255, 0.78); /* buttons and round "to top" button: red to orange */ --m4-button-gradient: linear-gradient(90deg, #F93546 0%, #FE6328 100%); --m4-button-gradient-hover: linear-gradient(90deg, #E82A3B 0%, #F2561C 100%); /* footer and breadcrumb band: navy with a slightly lighter centre */ --m4-band-gradient: radial-gradient(ellipse at center, #2D486A 0%, #22466D 45%, #164471 100%); /* page title banner: dark navy veil over the network photo */ --m4-title-overlay: linear-gradient(rgba(10, 30, 55, 0.35), rgba(10, 30, 55, 0.35)); --m4-title-fallback: linear-gradient(135deg, #0F2F4F 0%, #164471 60%, #2E7BB8 100%); --m4-shadow-card: 0 3px 10px rgba(0, 0, 0, 0.12); --m4-shadow-card-hover: 0 10px 24px rgba(var(--m4-navy-value), 0.18); --m4-shadow-button: 0 8px 18px -8px rgba(249, 53, 70, 0.6); --m4-shadow-header: 0 2px 14px rgba(0, 0, 0, 0.08); } .ui-dialog .ui-dialog-titlebar { background-color: var(--mt-color-tint); border-color: var(--mt-color-tint); }