@roadtrip/css
Version:
CSS framework for Roadtrip Design System
1,766 lines (1,593 loc) • 239 kB
CSS
/*!
* Roadtrip CSS 4.12.1 (https://design.mobivia.com/)
* Copyright 2020-2025 Mobivia
* Licensed under Apache-2.0 (https://gitlab.com/mobivia-design/roadtrip/css/-/blob/master/LICENSE)
*/
/* BASE
-------------------- */
/**
* Variables
*
* List of all reusable variables (colors, breakpoints...)
* using CSS Custom properties (https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
*
*
*/
body {
/* GREYSCALE
-------------------- */
--road-grey-0: #000000;
--road-grey-100-new: #ffffff;
/**
* Blur
*/
--road-blur-light: blur(0.25rem);
--road-blur-medium: blur(0.5rem);
/**
* Shadow
*/
--road-elevation-lowest: 0 1px 2px rgba(0, 0, 0, 0.24), 0 1px 3px 1px rgba(0, 0, 0, 0.08);
--road-elevation-low: 0 1px 2px rgba(41, 44, 51, 0.16), 0 3px 5px 1px rgba(41, 44, 51, 0.12);
--road-elevation-average: 0 3px 3px rgba(0, 0, 0, 0.16), 0 6px 8px 1px rgba(41, 44, 51, 0.12);
--road-elevation-hight: 0 3px 3px rgba(0, 0, 0, 0.2), 0 10px 13px 2px rgba(41, 44, 51, 0.12);
--road-elevation-highest: 0 4px 4px rgba(0, 0, 0, 0.24), 0 12px 16px 6px rgba(41, 44, 51, 0.16);
/**
* Button destructive
*/
--road-button-destructive-primary: var(--road-danger-50);
--road-button-destructive-primary-variant: var(--road-danger-40);
--road-button-destructive-outline: var(--road-danger-50);
--road-button-destructive-secondary: var(--road-grey-100-new);
--road-button-destructive-secondary-variant: var(--road-danger-90);
--road-on-button-destructive-secondary: var(--road-danger-50);
--road-on-button-destructive-primary: var(--road-grey-100-new);
/* DECORATIVE
-------------------- */
--road-blue-klein-5: #000411;
--road-blue-klein-10: #000923;
--road-blue-klein-15: #000d34;
--road-blue-klein-20: #001146;
--road-blue-klein-30: #001a68;
--road-blue-klein-40: #00228b;
--road-blue-klein-50: #002bae;
--road-blue-klein-60: #3355be;
--road-blue-klein-70: #6680ce;
--road-blue-klein-80: #99aadf;
--road-blue-klein-85: #b3bfe7;
--road-blue-klein-90: #ccd5ef;
--road-blue-klein-95: #e6eaf7;
--road-violet-electric-5: #0e0019;
--road-violet-electric-10: #1c0032;
--road-violet-electric-15: #2a004a;
--road-violet-electric-20: #380063;
--road-violet-electric-30: #550095;
--road-violet-electric-40: #7100c6;
--road-violet-electric-50: #8d00f8;
--road-violet-electric-60: #a433f9;
--road-violet-electric-70: #bb66fb;
--road-violet-electric-80: #d199fc;
--road-violet-electric-85: #ddb2fd;
--road-violet-electric-90: #e8ccfe;
--road-violet-electric-95: #f4e5fe;
--road-green-monstera-5: #000c01;
--road-green-monstera-10: #001901;
--road-green-monstera-15: #002502;
--road-green-monstera-20: #003203;
--road-green-monstera-30: #005705;
--road-green-monstera-40: #007006;
--road-green-monstera-50: #007c07;
--road-green-monstera-60: #339639;
--road-green-monstera-70: #66b06a;
--road-green-monstera-80: #99cb9c;
--road-green-monstera-85: #b3d8b5;
--road-green-monstera-90: #cce5cd;
--road-green-monstera-95: #e6f2e6;
--road-red-pepper-5: #150000;
--road-red-pepper-10: #2a0000;
--road-red-pepper-15: #3f0000;
--road-red-pepper-20: #540000;
--road-red-pepper-30: #7f0000;
--road-red-pepper-40: #a90000;
--road-red-pepper-50: #d30000;
--road-red-pepper-60: #dc3333;
--road-red-pepper-70: #e56666;
--road-red-pepper-80: #ed9999;
--road-red-pepper-85: #f2b3b3;
--road-red-pepper-90: #f6cccc;
--road-red-pepper-95: #fbe6e6;
--road-yellow-gold-5: #130e00;
--road-yellow-gold-10: #261c00;
--road-yellow-gold-15: #3a2a00;
--road-yellow-gold-20: #4d3800;
--road-yellow-gold-30: #735400;
--road-yellow-gold-40: #9a7000;
--road-yellow-gold-50: #c08c00;
--road-yellow-gold-60: #cda333;
--road-yellow-gold-70: #d9ba66;
--road-yellow-gold-80: #e6d199;
--road-yellow-gold-85: #ecdcb2;
--road-yellow-gold-90: #f2e8cc;
--road-yellow-gold-95: #f9f4e6;
--road-yellow-mikado-5: #191401;
--road-yellow-mikado-10: #332702;
--road-yellow-mikado-15: #4c3b04;
--road-yellow-mikado-20: #664e05;
--road-yellow-mikado-30: #997607;
--road-yellow-mikado-40: #cc9d0a;
--road-yellow-mikado-50: #ffc40c;
--road-yellow-mikado-60: #ffd03d;
--road-yellow-mikado-70: #ffdc6d;
--road-yellow-mikado-80: #ffe79e;
--road-yellow-mikado-85: #ffedb6;
--road-yellow-mikado-90: #fff3ce;
--road-yellow-mikado-95: #fff9e7;
/**
* Tag
*/
--road-tag-default: var(--road-blue-klein-50);
--road-tag-ecology: var(--road-green-monstera-50);
--road-tag-exclusivity: var(--road-yellow-gold-50);
--road-tag-offer: var(--road-red-pepper-50);
--road-tag-black-friday: var(--road-grey-0);
/**
* Rating level
*/
--road-rating: var(--road-yellow-mikado-50);
/* STATUS
-------------------- */
--road-info-10: #0a1628;
--road-info-20: #142c51;
--road-info-30: #1d4379;
--road-info-40: #2759a2;
--road-info-50: #316fca;
--road-info-60: #5a8cd5;
--road-info-70: #83a9df;
--road-info-80: #adc5ea;
--road-info-90: #d6e2f4;
--road-info-95: #ebf1fa;
--road-success-10: #0d1b0e;
--road-success-20: #1a351b;
--road-success-30: #285029;
--road-success-40: #356a36;
--road-success-50: #428544;
--road-success-60: #689d69;
--road-success-70: #8eb68f;
--road-success-80: #b3ceb4;
--road-success-90: #d9e7da;
--road-success-95: #ecf3ec;
--road-warning-10: #4e3406;
--road-warning-20: #9c690d;
--road-warning-30: #ea9d13;
--road-warning-40: #fab815;
--road-warning-50: #fdc93e;
--road-warning-60: #ffd966;
--road-warning-70: #ffe38c;
--road-warning-80: #ffecb3;
--road-warning-90: #fff6d9;
--road-warning-95: #fffaec;
--road-danger-10: #240b09;
--road-danger-20: #471711;
--road-danger-30: #6b221a;
--road-danger-40: #8e2e22;
--road-danger-50: #b2392b;
--road-danger-60: #c16155;
--road-danger-70: #d18880;
--road-danger-80: #e0b0aa;
--road-danger-90: #f0d7d5;
--road-danger-95: #f7ebea;
/**
* Information
*/
--road-info-surface: var(--road-info-95);
--road-info-surface-inverse: var(--road-info-50);
--road-on-info-surface: var(--road-info-30);
--road-on-info-surface-inverse: var(--road-grey-100-new);
--road-info-outline: var(--road-info-50);
--road-info-icon: var(--road-info-50);
--road-info-icon-inverse: var(--road-grey-100-new);
--road-info-background: var(--road-info-surface);
--road-info-default: var(--road-info-surface-inverse);
--road-info-text: var(--road-on-info-surface);
--road-info-contrast: var(--road-on-info-surface-inverse);
/**
* Success
*/
--road-success-surface: var(--road-success-95);
--road-success-surface-inverse: var(--road-success-50);
--road-on-success-surface: var(--road-success-30);
--road-on-success-surface-inverse: var(--road-grey-100-new);
--road-success-outline: var(--road-success-50);
--road-success-icon: var(--road-success-50);
--road-success-icon-inverse: var(--road-grey-100-new);
--road-success-background: var(--road-success-surface);
--road-success-default: var(--road-success-surface-inverse);
--road-success-text: var(--road-on-success-surface);
--road-success-contrast: var(--road-on-success-surface-inverse);
/**
* Warning
*/
--road-warning-surface: var(--road-warning-95);
--road-warning-surface-inverse: var(--road-warning-50);
--road-on-warning-surface: var(--road-warning-20);
--road-on-warning-surface-inverse: var(--road-warning-10);
--road-warning-outline: var(--road-warning-30);
--road-warning-icon: var(--road-warning-30);
--road-warning-icon-inverse: var(--road-warning-10);
--road-warning-background: var(--road-warning-surface);
--road-warning-default: var(--road-warning-surface-inverse);
--road-warning-text: var(--road-on-warning-surface);
--road-warning-contrast: var(--road-on-warning-surface-inverse);
/**
* Danger
*/
--road-danger-surface: var(--road-danger-95);
--road-danger-surface-inverse: var(--road-danger-50);
--road-on-danger-surface: var(--road-danger-30);
--road-on-danger-surface-inverse: var(--road-grey-100-new);
--road-danger-outline: var(--road-danger-50);
--road-danger-icon: var(--road-danger-50);
--road-danger-icon-inverse: var(--road-grey-100-new);
--road-danger-background: var(--road-danger-surface);
--road-danger-default: var(--road-danger-surface-inverse);
--road-danger-text: var(--road-on-danger-surface);
--road-danger-contrast: var(--road-on-danger-surface-inverse);
/* FONT
-------------------- */
--road-font: muli, arial, sans-serif;
/* SIZE
-------------------- */
--road-font-size-75: 4.6875rem;
--road-font-size-65: 4.0625rem;
--road-font-size-57: 3.5625rem;
--road-font-size-49: 3.0625rem;
--road-font-size-43: 2.6875rem;
--road-font-size-37: 2.3125rem;
--road-font-size-32: 2rem;
--road-font-size-28: 1.75rem;
--road-font-size-24: 1.5rem;
--road-font-size-21: 1.325rem;
--road-font-size-18: 1.125rem;
--road-font-size-16: 1rem;
--road-font-size-14: 0.875rem;
--road-font-size-12: 0.75rem;
--road-font-size-10: 0.625rem;
/* OVERLINE
-------------------- */
--road-overline: var(--road-font-size-12);
/* UTILITY
-------------------- */
--road-legal-medium: var(--road-font-size-12);
--road-label-medium: var(--road-font-size-16);
--road-label-small: var(--road-font-size-12);
--road-label-extra-small: var(--road-font-size-10);
--road-caption-medium: var(--road-font-size-12);
--road-helper-medium: var(--road-font-size-14);
/* LINK
-------------------- */
--road-link-large: var(--road-font-size-18);
--road-link-medium: var(--road-font-size-16);
--road-link-small: var(--road-font-size-14);
--road-link-extra-small: var(--road-font-size-12);
/* BUTTON
-------------------- */
--road-button-medium: var(--road-font-size-16);
--road-button-small: var(--road-font-size-14);
/* FLUID
-------------------- */
--road-display-large: var(--road-font-size-57);
--road-display-medium: var(--road-font-size-49);
--road-display-small: var(--road-font-size-43);
--road-heading-01: var(--road-font-size-32);
--road-heading-02: var(--road-font-size-28);
--road-heading-03: var(--road-font-size-24);
--road-heading-04: var(--road-font-size-21);
--road-sub-heading-large: var(--road-font-size-24);
--road-sub-heading-medium: var(--road-font-size-21);
--road-sub-heading-small: var(--road-font-size-18);
/* BODY
-------------------- */
--road-body-large: var(--road-font-size-18);
--road-body-medium: var(--road-font-size-16);
--road-body-small: var(--road-font-size-14);
/* SPACING
-------------------- */
--road-spacing-01: 0.125rem;
--road-spacing-02: 0.25rem;
--road-spacing-03: 0.5rem;
--road-spacing-04: 0.75rem;
--road-spacing-05: 1rem;
--road-spacing-06: 1.5rem;
--road-spacing-07: 2rem;
--road-spacing-08: 2.5rem;
--road-spacing-09: 3rem;
--road-spacing-10: 4rem;
--road-spacing-11: 5rem;
--road-spacing-12: 6rem;
--road-spacing-13: 10rem;
/* OLD CSS VARIABLES
-------------------- */
/**
* Primary
*/
--road-primary-100: var(--road-primary-90);
--road-primary-200: var(--road-primary-80);
--road-primary-300: var(--road-primary-70);
--road-primary-400: var(--road-primary-60);
--road-primary-500: var(--road-primary-50);
--road-primary-600: var(--road-primary-40);
--road-primary-700: var(--road-primary-30);
--road-primary-800: var(--road-primary-20);
--road-primary-900: var(--road-primary-10);
--road-primary-contrast: var(--road-on-primary);
/**
* Secondary
*/
--road-secondary-100: var(--road-secondary-90);
--road-secondary-200: var(--road-secondary-80);
--road-secondary-300: var(--road-secondary-70);
--road-secondary-400: var(--road-secondary-60);
--road-secondary-500: var(--road-secondary-50);
--road-secondary-600: var(--road-secondary-40);
--road-secondary-700: var(--road-secondary-30);
--road-secondary-800: var(--road-secondary-20);
--road-secondary-900: var(--road-secondary-10);
--road-secondary-contrast: var(--road-on-secondary);
/**
* Primary
*/
--primary: var(--road-brand-primary);
--primary-hover: var(--road-grey-999);
--primary-darken: var(--road-grey-999);
--primary-lighten: var(--road-primary-100);
--primary-contrast: var(--road-grey-000);
/**
* Secondary
*/
--secondary: var(--road-primary-500);
--secondary-hover: var(--road-primary-700);
--secondary-darken: var(--road-primary-700);
--secondary-lighten: var(--road-primary-100);
--secondary-contrast: var(--road-grey-000);
/* GREYSCALE
-------------------- */
--road-grey-000: var(--road-grey-100-new);
--road-grey-100: var(--road-grey-90);
--road-grey-200: var(--road-grey-80);
--road-grey-300: var(--road-grey-70);
--road-grey-400: var(--road-grey-60);
--road-grey-500: var(--road-grey-50);
--road-grey-600: var(--road-grey-40);
--road-grey-700: var(--road-grey-30);
--road-grey-800: var(--road-grey-20);
--road-grey-900: var(--road-grey-10);
--road-grey-999: var(--road-grey-0);
--road-disabled: var(--road-surface-disabled);
/**
* Accent
*/
--accent: var(--road-secondary-500);
--accent-hover: var(--road-secondary-700);
--accent-darken: var(--road-secondary-700);
--accent-lighten: var(--road-secondary-100);
--accent-contrast: var(--road-grey-900);
/* FEEDBACK
-------------------- */
/**
* Information
*/
--info: var(--road-info-default);
--info-hover: var(--road-info-text);
--info-text: var(--road-info-text);
--info-background: var(--road-info-background);
--info-contrast: var(--road-grey-000);
/**
* Success
*/
--success: var(--road-success-default);
--success-hover: var(--road-success-text);
--success-text: var(--road-success-text);
--success-background: var(--road-success-background);
--success-contrast: var(--road-grey-000);
/**
* Warning
*/
--warning: var(--road-warning-default);
--warning-hover: var(--road-warning-text);
--warning-text: var(--road-warning-text);
--warning-background: var(--road-warning-background);
--warning-contrast: var(--road-grey-900);
/**
* Danger
*/
--danger: var(--road-danger-default);
--danger-hover: var(--road-danger-text);
--danger-text: var(--road-danger-text);
--danger-background: var(--road-danger-background);
--danger-contrast: var(--road-grey-000);
/* MONOCHROME
-------------------- */
--icon: var(--road-grey-900);
--text: var(--road-grey-900);
--text-second: var(--road-grey-600);
--text-disabled: var(--road-grey-400);
--border-form: var(--road-grey-400);
--border: var(--road-grey-300);
--background: var(--road-grey-100);
--background-second: var(--road-grey-100);
--white: var(--road-grey-000);
/* FONT
-------------------- */
--font: var(--road-font);
}
@media (min-width: 768px) {
body {
--road-display-large: var(--road-font-size-75);
--road-display-medium: var(--road-font-size-65);
--road-display-small: var(--road-font-size-57);
--road-heading-01: var(--road-font-size-49);
--road-heading-02: var(--road-font-size-37);
--road-heading-03: var(--road-font-size-32);
--road-heading-04: var(--road-font-size-28);
--road-sub-heading-large: var(--road-font-size-32);
--road-sub-heading-medium: var(--road-font-size-28);
--road-sub-heading-small: var(--road-font-size-24);
}
}
/* AUTO5
-------------------- */
.auto5-theme {
/**
* Brand Primary
*/
--road-brand-primary: #002b6f;
/**
* Primary
*/
--road-primary-10: #001638;
--road-primary-20: #002b6f;
--road-primary-30: #004293;
--road-primary-40: #005ab8;
--road-primary-50: #0071dc;
--road-primary-60: #338de3;
--road-primary-70: #66aaea;
--road-primary-80: #99c6f1;
--road-primary-90: #cce3f8;
/**
* Brand Secondary
*/
--road-brand-secondary: #e00008;
/**
* Secondary
*/
--road-secondary-10: #2d0002;
--road-secondary-20: #5a0003;
--road-secondary-30: #860005;
--road-secondary-40: #b30006;
--road-secondary-50: #e00008;
--road-secondary-60: #e63339;
--road-secondary-70: #ec666b;
--road-secondary-80: #f3999c;
--road-secondary-90: #f9ccce;
/* GREYSCALE
-------------------- */
--road-grey-0: #000000;
--road-grey-5: #11151d;
--road-grey-10: #22293a;
--road-grey-15: #2c3345;
--road-grey-20: #353c50;
--road-grey-30: #51586c;
--road-grey-40: #6d7488;
--road-grey-50: #898fa0;
--road-grey-60: #a4a9b6;
--road-grey-70: #c1c4cd;
--road-grey-80: #dddfe4;
--road-grey-85: #e9eaed;
--road-grey-90: #f4f4f6;
--road-grey-95: #fafafb;
--road-grey-100-new: #ffffff;
/**
* Header
*/
--road-header-surface: var(--road-primary-20);
--road-on-header-surface: var(--road-grey-100-new);
--road-header-surface-disabled: rgba(255, 255, 255, 0.32);
--road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);
--road-header-outline: var(--road-primary-20);
--road-header-icon: var(--road-grey-100-new);
--road-icon-header-variant: var(--road-secondary-60);
--road-header-badge: var(--road-secondary-60);
--road-on-header-badge: var(--road-grey-100-new);
/**
* Neutral Surface
*/
--road-surface: var(--road-grey-100-new);
--road-surface-inverse: var(--road-grey-90);
--road-surface-disabled: rgba(137, 143, 160, 0.24);
--road-on-surface: var(--road-grey-10);
--road-on-surface-weak: var(--road-grey-30);
--road-on-surface-extra-weak: var(--road-grey-40);
--road-on-surface-disabled: rgba(34, 41, 58, 0.32);
/**
* Brand Surface
*/
--road-primary: var(--road-primary-50);
--road-primary-variant: var(--road-primary-30);
--road-on-primary: var(--road-grey-100-new);
--road-secondary: var(--road-secondary-50);
--road-secondary-variant: var(--road-secondary-30);
--road-on-secondary: var(--road-grey-100-new);
/**
* Outline
*/
--road-outline: var(--road-grey-30);
--road-outline-weak: var(--road-grey-80);
--road-outline-variant: var(--road-primary-30);
/**
* Artwork
*/
--road-icon: var(--road-grey-10);
--road-icon-variant: var(--road-secondary-50);
--road-icon-inverse: var(--road-grey-100-new);
--road-icon-inverse-variant: var(--road-grey-70);
/**
* Overlay
*/
--road-overlay: rgba(0, 0, 0, 0.64);
--road-overlay-inverse: rgba(255, 255, 255, 0.64);
--road-on-overlay: var(--road-grey-100-new);
--road-on-overlay-inverse: var(--road-grey-10);
/**
* Buttons
*/
--road-button-primary: var(--road-primary-40);
--road-button-primary-variant: var(--road-primary-30);
--road-on-button-primary: var(--road-grey-100-new);
--road-button-secondary: var(--road-secondary-60);
--road-button-secondary-variant: var(--road-secondary-30);
--road-on-button-secondary: var(--road-grey-100-new);
--road-button-tertiary: rgba(241, 187, 205, 0);
--road-button-tertiary-variant: var(--road-primary-90);
--road-button-tertiary-outline: var(--road-primary-40);
--road-on-button-tertiary: var(--road-primary-50);
--road-button-ghost: rgba(241, 187, 205, 0);
--road-button-ghost-variant: var(--road-primary-90);
--road-on-button-ghost: var(--road-primary-40);
/**
* Fab Button
*/
--road-button-fab: var(--road-primary-50);
--road-on-button-fab: var(--road-grey-100-new);
--road-button-fab-variant: var(--road-primary-30);
/**
* Link
*/
--road-link-primary: var(--road-primary-40);
--road-link-secondary: var(--road-grey-10);
--road-link-inverse: var(--road-grey-100-new);
/**
* Forms
*/
--road-input-surface: var(--road-primary-50);
--road-input-surface-variant: var(--road-primary-30);
--road-input-outline: var(--road-grey-40);
--road-input-outline-variant: var(--road-primary-30);
/**
* Decorative
*/
--road-decorative-surface: var(--road-secondary-50);
--road-decorative-surface-variant: var(--road-primary-50);
/**
* Leading Banner
*/
--road-leading-banner: var(--road-yellow-mikado-50);
--road-on-leading-banner: var(--road-grey-10);
}
.auto5-theme .banner{
color: var(--road-grey-10);
}
.auto5-theme .banner-link{
color: var(--road-grey-10);
}
.auto5-theme .banner-close .close-icon{
fill: var(--road-grey-10);
}
/* ATU
-------------------- */
.atu-theme {
/**
* Brand Primary
*/
--road-brand-primary: #bb1e10;
/**
* Primary
*/
--road-primary-10: #250603;
--road-primary-20: #4b0b06;
--road-primary-30: #70120a;
--road-primary-40: #96180d;
--road-primary-50: #bb1e10;
--road-primary-60: #c94b40;
--road-primary-70: #d67870;
--road-primary-80: #e4a59f;
--road-primary-90: #f1d2cf;
/**
* Brand Secondary
*/
--road-brand-secondary: #bb1e10;
/**
* Secondary
*/
--road-secondary-10: #0c0a0a;
--road-secondary-20: #292727;
--road-secondary-30: #474545;
--road-secondary-40: #646262;
--road-secondary-50: #827f7f;
--road-secondary-60: #9f9c9c;
--road-secondary-70: #bcbaba;
--road-secondary-80: #dad7d7;
--road-secondary-90: #f7f4f4;
/* GREYSCALE
-------------------- */
--road-grey-0: #000000;
--road-grey-5: #060505;
--road-grey-10: #0c0a0a;
--road-grey-15: #1b1919;
--road-grey-20: #292727;
--road-grey-30: #474545;
--road-grey-40: #646262;
--road-grey-50: #827f7f;
--road-grey-60: #9f9c9c;
--road-grey-70: #bcbaba;
--road-grey-80: #dad7d7;
--road-grey-85: #e9e6e6;
--road-grey-90: #f7f4f4;
--road-grey-95: #fbfafa;
--road-grey-100-new: #ffffff;
/**
* Header
*/
--road-header-surface: var(--road-grey-90);
--road-on-header-surface: var(--road-grey-20);
--road-header-surface-disabled: rgba(130, 127, 127, 0.24);
--road-on-header-surface-disabled: rgba(41, 39, 39, 0.32);
--road-header-outline: rgba(71, 69, 69, 0.24);
--road-header-icon: var(--road-grey-20);
--road-icon-header-variant: var(--road-primary-50);
--road-header-badge: var(--road-primary-50);
--road-on-header-badge: var(--road-grey-100-new);
/**
* Neutral Surface
*/
--road-surface: var(--road-grey-100-new);
--road-surface-inverse: var(--road-grey-90);
--road-surface-disabled: rgba(137, 143, 160, 0.24);
--road-on-surface: var(--road-grey-20);
--road-on-surface-weak: var(--road-grey-20);
--road-on-surface-extra-weak: var(--road-grey-40);
--road-on-surface-disabled: rgba(34, 41, 58, 0.32);
/**
* Brand Surface
*/
--road-primary: var(--road-primary-50);
--road-primary-variant: var(--road-primary-30);
--road-on-primary: var(--road-grey-100-new);
--road-secondary: var(--road-secondary-20);
--road-secondary-variant: var(--road-secondary-10);
--road-on-secondary: var(--road-grey-100-new);
/**
* Outline
*/
--road-outline: var(--road-grey-30);
--road-outline-weak: var(--road-grey-40);
--road-outline-variant: var(--road-secondary-10);
/**
* Artwork
*/
--road-icon: var(--road-grey-20);
--road-icon-variant: var(--road-primary-50);
--road-icon-inverse: var(--road-grey-100-new);
--road-icon-inverse-variant: var(--road-secondary-60);
/**
* Overlay
*/
--road-overlay: rgba(0, 0, 0, 0.64);
--road-overlay-inverse: rgba(255, 255, 255, 0.64);
--road-on-overlay: var(--road-grey-100-new);
--road-on-overlay-inverse: var(--road-grey-20);
/**
* Buttons
*/
--road-button-primary: var(--road-primary-50);
--road-button-primary-variant: var(--road-primary-30);
--road-on-button-primary: var(--road-grey-100-new);
--road-button-secondary: var(--road-secondary-10);
--road-button-secondary-variant: var(--road-secondary-40);
--road-on-button-secondary: var(--road-grey-100-new);
--road-button-tertiary: rgba(241, 187, 205, 0);
--road-button-tertiary-variant: var(--road-primary-90);
--road-button-tertiary-outline: var(--road-primary-50);
--road-on-button-tertiary: var(--road-primary-50);
--road-button-ghost: rgba(241, 187, 205, 0);
--road-button-ghost-variant: var(--road-primary-90);
--road-on-button-ghost: var(--road-primary-40);
/**
* Fab Button
*/
--road-button-fab: var(--road-primary-50);
--road-on-button-fab: var(--road-grey-100-new);
--road-button-fab-variant: var(--road-primary-30);
/**
* Link
*/
--road-link-primary: var(--road-primary-40);
--road-link-secondary: var(--road-grey-20);
--road-link-inverse: var(--road-grey-100-new);
/**
* Forms
*/
--road-input-surface: var(--road-secondary-10);
--road-input-surface-variant: var(--road-secondary-40);
--road-input-outline: var(--road-grey-40);
--road-input-outline-variant: var(--road-secondary-10);
/**
* Decorative
*/
--road-decorative-surface: var(--road-primary-50);
--road-decorative-surface-variant: var(--road-primary-50);
/**
* Leading Banner
*/
--road-leading-banner: var(--road-secondary-10);
--road-on-leading-banner: var(--road-grey-100-new);
}
.atu-theme .banner{
color: var(--road-grey-000);
}
.atu-theme .banner-link{
color: var(--road-grey-000);
}
.atu-theme .banner-close .close-icon{
fill: var(--road-grey-000);
}
/* BYTHJUL
-------------------- */
.bythjul-theme {
/**
* Brand Primary
*/
--road-brand-primary: #103d6d;
/**
* Primary
*/
--road-primary-10: #173557;
--road-primary-20: #103d6d;
--road-primary-30: #134b85;
--road-primary-40: #16579a;
--road-primary-50: #1961ac;
--road-primary-60: #748fbf;
--road-primary-70: #a2b2d1;
--road-primary-80: #c6cfe1;
--road-primary-90: #e4e8f1;
--road-primary-95: #f2f4f8;
/**
* Brand Secondary
*/
--road-brand-secondary: #f5a973;
/**
* Secondary
*/
--road-secondary-10: #6c3f07;
--road-secondary-20: #99590a;
--road-secondary-30: #bb6c0c;
--road-secondary-40: #d87d0e;
--road-secondary-50: #f28c10;
--road-secondary-60: #f5a973;
--road-secondary-70: #f7c2a2;
--road-secondary-80: #fad8c6;
--road-secondary-90: #fcede4;
--road-secondary-95: #fef6f2;
/* GREYSCALE
-------------------- */
--road-grey-0: #000000;
--road-grey-5: #141414;
--road-grey-10: #1c1c1c;
--road-grey-15: #232323;
--road-grey-20: #282828;
--road-grey-30: #2d2d2d;
--road-grey-40: #313131;
--road-grey-50: #333333;
--road-grey-60: #828282;
--road-grey-70: #a3a3a3;
--road-grey-80: #bebebe;
--road-grey-85: #d6d6d6;
--road-grey-90: #ebebeb;
--road-grey-95: #f8f8f8;
--road-grey-100-new: #ffffff;
/**
* Header
*/
--road-header-surface: var(--road-primary-50);
--road-on-header-surface: var(--road-grey-100-new);
--road-header-surface-disabled: rgba(255, 255, 255, 0.32);
--road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);
--road-header-outline: var(--road-primary-50);
--road-header-icon: var(--road-grey-10-new);
--road-variant-icon-header: var(--road-secondary-60);
--road-header-badge: var(--road-secondary-60);
--road-on-header-badge: var(--road-grey-10);
/**
* Neutral Surface
*/
--road-surface: var(--road-grey-100-new);
--road-surface-inverse: var(--road-grey-90);
--road-surface-disabled: rgba(137, 143, 160, 0.24);
--road-on-surface: var(--road-grey-10);
--road-on-surface-weak: var(--road-grey-20);
--road-on-surface-extra-weak: var(--road-grey-40);
--road-on-surface-disabled: rgba(34, 41, 58, 0.32);
/**
* Brand Surface
*/
--road-primary: var(--road-primary-50);
--road-primary-variant: var(--road-primary-30);
--road-on-primary: var(--road-grey-100-new);
--road-secondary: var(--road-secondary-50);
--road-secondary-variant: var(--road-secondary-40);
--road-on-secondary: var(--road-grey-10);
/**
* Outline
*/
--road-outline: var(--road-grey-30);
--road-outline-weak: var(--road-grey-40);
--road-outline-variant: var(--road-primary-30);
/**
* Artwork
*/
--road-icon: var(--road-grey-10);
--road-icon-variant: var(--road-secondary-40);
--road-icon-inverse: var(--road-grey-100-new);
--road-icon-inverse-variant: var(--road-secondary-60);
/**
* Overlay
*/
--road-overlay: rgba(0, 0, 0, 0.64);
--road-overlay-inverse: rgba(255, 255, 255, 0.64);
--road-on-overlay: var(--road-grey-100-new);
--road-on-overlay-inverse: var(--road-grey-10);
/**
* Buttons
*/
--road-button-primary: var(--road-primary-50);
--road-button-primary-variant: var(--road-primary-30);
--road-on-button-primary: var(--road-grey-100-new);
--road-button-secondary: var(--road-secondary-50);
--road-button-secondary-variant: var(--road-secondary-40);
--road-on-button-secondary: var(--road-grey-10);
--road-button-tertiary: rgba(241, 187, 205, 0);
--road-button-tertiary-variant: var(--road-primary-90);
--road-button-tertiary-outline: var(--road-primary-50);
--road-on-button-tertiary: var(--road-grey-10);
--road-button-ghost: rgba(241, 187, 205, 0);
--road-button-ghost-variant: var(--road-primary-90);
--road-on-button-ghost: var(--road-grey-10);
/**
* Fab Button
*/
--road-button-fab: var(--road-secondary-50);
--road-on-button-fab: var(--road-grey-10);
--road-button-fab-variant: var(--road-secondary-40);
/**
* Link
*/
--road-link-primary: var(--road-primary-50);
--road-link-secondary: var(--road-grey-10);
--road-link-inverse: var(--road-grey-100-new);
/**
* Forms
*/
--road-input-surface: var(--road-primary-50);
--road-input-surface-variant: var(--road-primary-30);
--road-input-outline: var(--road-grey-40);
--road-input-outline-variant: var(--road-grey-0);
/**
* Decorative
*/
--road-decorative-surface: var(--road-secondary-50);
--road-decorative-surface-variant: var(--road-primary-50);
/**
* Leading Banner
*/
--road-leading-banner: var(--road-secondary-50);
--road-on-leading-banner: var(--road-grey-10);
}
/* Midas
-------------------- */
.midas-theme {
/**
* Brand Primary
*/
--road-brand-primary: #ffd300;
/**
* Primary
*/
--road-primary-10: #280f06;
--road-primary-20: #6e450d;
--road-primary-30: #b37a15;
--road-primary-40: #f9b01c;
--road-primary-50: #fcc20e;
--road-primary-60: #ffd300;
--road-primary-70: #ffde40;
--road-primary-80: #ffe980;
--road-primary-90: #fff4bf;
/**
* Brand Secondary
*/
--road-brand-secondary: #000000;
/**
* Secondary
*/
--road-secondary-10: #1a1a1a;
--road-secondary-20: #353535;
--road-secondary-30: #515151;
--road-secondary-40: #6c6c6c;
--road-secondary-50: #878787;
--road-secondary-60: #a2a2a2;
--road-secondary-70: #bebebe;
--road-secondary-80: #d9d9d9;
--road-secondary-90: #f4f4f4;
/* GREYSCALE
-------------------- */
--road-grey-0: #000000;
--road-grey-5: #0d0d0d;
--road-grey-10: #1a1a1a;
--road-grey-15: #282828;
--road-grey-20: #353535;
--road-grey-30: #515151;
--road-grey-40: #6c6c6c;
--road-grey-50: #878787;
--road-grey-60: #a2a2a2;
--road-grey-70: #bebebe;
--road-grey-80: #d9d9d9;
--road-grey-85: #e7e7e7;
--road-grey-90: #f4f4f4;
--road-grey-95: #fafafa;
--road-grey-100-new: #ffffff;
/**
* Header
*/
--road-header-surface: var(--road-secondary-20);
--road-on-header-surface: var(--road-grey-100-new);
--road-header-surface-disabled: rgba(135, 135, 135, 0.24);
--road-on-header-surface-disabled: rgba(26, 26, 26, 0.32);
--road-header-outline: rgba(162, 162, 162, 0.24);
--road-header-icon: var(--road-grey-100-new);
--road-icon-header-variant: var(--road-primary-40);
--road-header-badge: var(--road-primary-60);
--road-on-header-badge: var(--road-grey-10);
/**
* Neutral Surface
*/
--road-surface: var(--road-grey-100-new);
--road-surface-inverse: var(--road-grey-90);
--road-surface-disabled: rgba(137, 143, 160, 0.24);
--road-on-surface: var(--road-grey-10);
--road-on-surface-weak: var(--road-grey-20);
--road-on-surface-extra-weak: var(--road-grey-40);
--road-on-surface-disabled: rgba(34, 41, 58, 0.32);
/**
* Brand Surface
*/
--road-primary: var(--road-primary-60);
--road-primary-variant: var(--road-primary-40);
--road-on-primary: var(--road-grey-10);
--road-secondary: var(--road-secondary-20);
--road-secondary-variant: var(--road-secondary-10);
--road-on-secondary: var(--road-grey-100-new);
/**
* Outline
*/
--road-outline: var(--road-grey-30);
--road-outline-weak: var(--road-grey-80);
--road-outline-variant: var(--road-primary-40);
/**
* Artwork
*/
--road-icon: var(--road-grey-10);
--road-icon-variant: var(--road-primary-40);
--road-icon-inverse: var(--road-grey-100-new);
--road-icon-inverse-variant: var(--road-primary-60);
/**
* Overlay
*/
--road-overlay: rgba(0, 0, 0, 0.64);
--road-overlay-inverse: rgba(255, 255, 255, 0.64);
--road-on-overlay: var(--road-grey-100-new);
--road-on-overlay-inverse: var(--road-grey-10);
/**
* Buttons
*/
--road-button-primary: var(--road-primary-60);
--road-button-primary-variant: var(--road-primary-40);
--road-on-button-primary: var(--road-grey-10);
--road-button-secondary: var(--road-secondary-20);
--road-button-secondary-variant: var(--road-secondary-10);
--road-on-button-secondary: var(--road-grey-100-new);
--road-button-tertiary: rgba(241, 187, 205, 0);
--road-button-tertiary-variant: var(--road-primary-80);
--road-button-tertiary-outline: var(--road-primary-60);
--road-on-button-tertiary: var(--road-grey-10);
--road-button-ghost: rgba(241, 187, 205, 0);
--road-button-ghost-variant: var(--road-primary-80);
--road-on-button-ghost: var(--road-grey-10);
/**
* Fab Button
*/
--road-button-fab: var(--road-primary-60);
--road-on-button-fab: var(--road-grey-10);
--road-button-fab-variant: var(--road-primary-30);
/**
* Link
*/
--road-link-primary: var(--road-grey-10);
--road-link-secondary: var(--road-primary-30);
--road-link-inverse: var(--road-grey-100-new);
/**
* Forms
*/
--road-input-surface: var(--road-secondary-10);
--road-input-surface-variant: var(--road-secondary-20);
--road-input-outline: var(--road-grey-40);
--road-input-outline-variant: var(--road-secondary-10);
/**
* Decorative
*/
--road-decorative-surface: var(--road-primary-40);
--road-decorative-surface-variant: var(--road-secondary-20);
/**
* Leading Banner
*/
--road-leading-banner: var(--road-secondary-10);
--road-on-leading-banner: var(--road-grey-100-new);
}
.midas-theme .btn-outline-primary,
.midas-theme .btn-outline-secondary,
.midas-theme .btn-link,
.midas-theme .link {
color: var(--road-grey-900);
}
.midas-theme .btn-link:not(:disabled):focus,
.midas-theme .btn-link:not(:disabled):hover,
.midas-theme .link:focus,
.midas-theme .link:hover {
color: var(--road-grey-600);
}
/* MOBIVIA
-------------------- */
.mobivia-theme {
/**
* Brand Primary
*/
--road-brand-primary: #b40063;
/**
* Primary
*/
--road-primary-10: #2e0011;
--road-primary-20: #5c0026;
--road-primary-30: #7f003b;
--road-primary-40: #9b004f;
--road-primary-50: #b40063;
--road-primary-60: #c42674;
--road-primary-70: #d24d87;
--road-primary-80: #e282a6;
--road-primary-90: #f1bbcd;
/**
* Brand Secondary
*/
--road-brand-secondary: #f8ab00;
/**
* Secondary
*/
--road-secondary-10: #4c2800;
--road-secondary-20: #754300;
--road-secondary-30: #995e00;
--road-secondary-40: #bd7b00;
--road-secondary-50: #f8ab00;
--road-secondary-60: #ffbb21;
--road-secondary-70: #ffca42;
--road-secondary-80: #ffda70;
--road-secondary-90: #ffeaa8;
/* GREYSCALE
-------------------- */
--road-grey-0: #000000;
--road-grey-5: #141413;
--road-grey-10: #282826;
--road-grey-15: #333331;
--road-grey-20: #3d3d3c;
--road-grey-30: #565656;
--road-grey-40: #757574;
--road-grey-50: #8e8e8e;
--road-grey-60: #a9a8a7;
--road-grey-70: #c3c3c1;
--road-grey-80: #deddda;
--road-grey-85: #ebeae6;
--road-grey-90: #f8f7f3;
--road-grey-95: #fcfbf9;
--road-grey-100-new: #ffffff;
/**
* Header
*/
--road-header-surface: var(--road-primary-50);
--road-on-header-surface: var(--road-grey-100-new);
--road-header-surface-disabled: rgba(255, 255, 255, 0.32);
--road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);
--road-header-outline: var(--road-primary-50);
--road-header-icon: var(--road-grey-10-new);
--road-variant-icon-header: var(--road-secondary-60);
--road-header-badge: var(--road-secondary-60);
--road-on-header-badge: var(--road-grey-10);
/**
* Neutral Surface
*/
--road-surface: var(--road-grey-100-new);
--road-surface-inverse: var(--road-grey-90);
--road-surface-disabled: rgba(137, 143, 160, 0.24);
--road-on-surface: var(--road-grey-10);
--road-on-surface-weak: var(--road-grey-20);
--road-on-surface-extra-weak: var(--road-grey-40);
--road-on-surface-disabled: rgba(34, 41, 58, 0.32);
/**
* Brand Surface
*/
--road-primary: var(--road-primary-50);
--road-primary-variant: var(--road-primary-30);
--road-on-primary: var(--road-grey-100-new);
--road-secondary: var(--road-secondary-50);
--road-secondary-variant: var(--road-secondary-40);
--road-on-secondary: var(--road-grey-10);
/**
* Outline
*/
--road-outline: var(--road-grey-30);
--road-outline-weak: var(--road-grey-40);
--road-outline-variant: var(--road-primary-30);
/**
* Artwork
*/
--road-icon: var(--road-grey-10);
--road-icon-variant: var(--road-secondary-40);
--road-icon-inverse: var(--road-grey-100-new);
--road-icon-inverse-variant: var(--road-secondary-60);
/**
* Overlay
*/
--road-overlay: rgba(0, 0, 0, 0.64);
--road-overlay-inverse: rgba(255, 255, 255, 0.64);
--road-on-overlay: var(--road-grey-100-new);
--road-on-overlay-inverse: var(--road-grey-10);
/**
* Buttons
*/
--road-button-primary: var(--road-primary-50);
--road-button-primary-variant: var(--road-primary-30);
--road-on-button-primary: var(--road-grey-100-new);
--road-button-secondary: var(--road-secondary-50);
--road-button-secondary-variant: var(--road-secondary-40);
--road-on-button-secondary: var(--road-grey-10);
--road-button-tertiary: rgba(241, 187, 205, 0);
--road-button-tertiary-variant: var(--road-primary-90);
--road-button-tertiary-outline: var(--road-primary-50);
--road-on-button-tertiary: var(--road-grey-10);
--road-button-ghost: rgba(241, 187, 205, 0);
--road-button-ghost-variant: var(--road-primary-90);
--road-on-button-ghost: var(--road-primary-50);
/**
* Fab Button
*/
--road-button-fab: var(--road-secondary-50);
--road-on-button-fab: var(--road-grey-10);
--road-button-fab-variant: var(--road-secondary-40);
/**
* Link
*/
--road-link-primary: var(--road-primary-50);
--road-link-secondary: var(--road-grey-10);
--road-link-inverse: var(--road-grey-100-new);
/**
* Forms
*/
--road-input-surface: var(--road-primary-50);
--road-input-surface-variant: var(--road-primary-30);
--road-input-outline: var(--road-grey-40);
--road-input-outline-variant: var(--road-grey-0);
/**
* Decorative
*/
--road-decorative-surface: var(--road-secondary-50);
--road-decorative-surface-variant: var(--road-primary-50);
/**
* Leading Banner
*/
--road-leading-banner: var(--road-secondary-50);
--road-on-leading-banner: var(--road-grey-10);
}
/* NORAUTO
-------------------- */
.norauto-theme {
/* BRAND
-------------------- */
/**
* Brand Primary
*/
--road-brand-primary: #002b6f;
/**
* Primary
*/
--road-primary-10: #001638;
--road-primary-20: #002b6f;
--road-primary-30: #004293;
--road-primary-40: #005ab8;
--road-primary-50: #0071dc;
--road-primary-60: #338de3;
--road-primary-70: #66aaea;
--road-primary-80: #99c6f1;
--road-primary-90: #cce3f8;
/**
* Brand Secondary
*/
--road-brand-secondary: #fcb731;
/**
* Secondary
*/
--road-secondary-10: #9c3305;
--road-secondary-20: #b14512;
--road-secondary-30: #c4621a;
--road-secondary-40: #d67e21;
--road-secondary-50: #e99b29;
--road-secondary-60: #fcb731;
--road-secondary-70: #fdca68;
--road-secondary-80: #fdde9f;
--road-secondary-90: #fef1d6;
/* GREYSCALE
-------------------- */
--road-grey-0: #000000;
--road-grey-5: #11151d;
--road-grey-10: #22293a;
--road-grey-15: #2c3345;
--road-grey-20: #353c50;
--road-grey-30: #51586c;
--road-grey-40: #6d7488;
--road-grey-50: #898fa0;
--road-grey-60: #a4a9b6;
--road-grey-70: #c1c4cd;
--road-grey-80: #dddfe4;
--road-grey-85: #e9eaed;
--road-grey-90: #f4f4f6;
--road-grey-95: #fafafb;
--road-grey-100-new: #ffffff;
/**
* Header
*/
--road-header-surface: var(--road-primary-20);
--road-on-header-surface: var(--road-grey-100-new);
--road-header-surface-disabled: rgba(255, 255, 255, 0.32);
--road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);
--road-header-outline: var(--road-primary-20);
--road-header-icon: var(--road-grey-100-new);
--road-header-icon-variant: var(--road-secondary-60);
--road-header-badge: var(--road-secondary-60);
--road-on-header-badge: var(--road-primary-10);
/**
* Neutral Surface
*/
--road-surface: var(--road-grey-100-new);
--road-surface-inverse: var(--road-grey-90);
--road-surface-disabled: rgba(137, 143, 160, 0.24);
--road-on-surface: var(--road-grey-5);
--road-on-surface-weak: var(--road-grey-30);
--road-on-surface-extra-weak: var(--road-grey-40);
--road-on-surface-disabled: rgba(34, 41, 58, 0.32);
/**
* Brand Surface
*/
--road-primary: var(--road-primary-50);
--road-primary-variant: var(--road-primary-20);
--road-on-primary: var(--road-grey-100-new);
--road-secondary: var(--road-secondary-60);
--road-secondary-variant: var(--road-secondary-40);
--road-on-secondary: var(--road-grey-10);
/**
* Outline
*/
--road-outline: var(--road-grey-60);
--road-outline-weak: var(--road-grey-80);
--road-outline-variant: var(--road-primary-30);
/**
* Artwork
*/
--road-icon: var(--road-grey-10);
--road-icon-variant: var(--road-secondary-50);
--road-icon-inverse: var(--road-grey-100-new);
--road-icon-inverse-variant: var(--road-secondary-60);
/**
* Overlay
*/
--road-overlay: rgba(0, 0, 0, 0.64);
--road-overlay-inverse: rgba(255, 255, 255, 0.64);
--road-on-overlay: var(--road-grey-100-new);
--road-on-overlay-inverse: var(--road-grey-10);
/**
* Buttons
*/
--road-button-primary: var(--road-primary-40);
--road-button-primary-variant: var(--road-primary-30);
--road-on-button-primary: var(--road-grey-100-new);
--road-button-secondary: var(--road-secondary-60);
--road-button-secondary-variant: var(--road-secondary-40);
--road-on-button-secondary: var(--road-grey-10);
--road-button-tertiary: rgba(241, 187, 205, 0);
--road-button-tertiary-variant: var(--road-primary-90);
--road-button-tertiary-outline: var(--road-primary-40);
--road-on-button-tertiary: var(--road-primary-50);
--road-button-ghost: rgba(241, 187, 205, 0);
--road-button-ghost-variant: var(--road-primary-90);
--road-on-button-ghost: var(--road-primary-40);
/**
* Fab Button
*/
--road-button-fab: var(--road-secondary-60);
--road-on-button-fab: var(--road-grey-10);
--road-button-fab-variant: var(--road-secondary-40);
/**
* Link
*/
--road-link-primary: var(--road-primary-40);
--road-link-secondary: var(--road-grey-10);
--road-link-inverse: var(--road-grey-100-new);
/**
* Forms
*/
--road-input-surface: var(--road-primary-50);
--road-input-surface-variant: var(--road-primary-30);
--road-input-outline: var(--road-grey-40);
--road-input-outline-variant: var(--road-primary-30);
/**
* Decorative
*/
--road-decorative-surface: var(--road-secondary-50);
--road-decorative-surface-variant: var(--road-primary-50);
/**
* Leading Banner
*/
--road-leading-banner: var(--road-secondary-60);
--road-on-leading-banner: var(--road-grey-10);
}
/* SKRUVAT
-------------------- */
.skruvat-theme {
/**
* Brand Primary
*/
--road-brand-primary: #a73b0d;
/**
* Primary
*/
--road-primary-10: #471c0b;
--road-primary-20: #a73b0d;
--road-primary-30: #ff4b00;
--road-primary-40: #ff6d2f;
--road-primary-50: #d7734b;
--road-primary-60: #ffaf8f;
--road-primary-70: #ffc3ab;
--road-primary-80: #ffe9e1;
--road-primary-90: #fffbfa;
/**
* Brand Secondary
*/
--road-brand-secondary: #382e29;
/**
* Secondary
*/
--road-secondary-10: #382e29;
--road-secondary-20: #6b6868;
--road-secondary-30: #807a7a;
--road-secondary-40: #958d8c;
--road-secondary-50: #aaa2a1;
--road-secondary-60: #bebab9;
--road-secondary-70: #d3d3d3;
--road-secondary-80: #dddddd;
--road-secondary-90: #f0f0f0;
--road-secondary-95: #fafafa;
/* GREYSCALE
-------------------- */
--road-grey-0: #000000;
--road-grey-5: #19160c;
--road-grey-10: #382e29;
--road-grey-15: #565656;
--road-grey-20: #6b6868;
--road-grey-30: #807a7a;
--road-grey-40: #958d8c;
--road-grey-50: #aaa2a1;
--road-grey-60: #bebab9;
--road-grey-70: #d3d3d3;
--road-grey-80: #dddddd;
--road-grey-85: #e7e7e7;
--road-grey-90: #f0f0f0;
--road-grey-95: #fafafa;
--road-grey-100-new: #ffffff;
/**
* Header
*/
--road-header-surface: var(--road-primary-50);
--road-on-header-surface: var(--road-grey-100-new);
--road-header-surface-disabled: rgba(255, 255, 255, 0.32);
--road-on-header-surface-disabled: rgba(255, 255, 255, 0.4);
--road-header-outline: var(--road-primary-50);
--road-header-icon: var(--road-grey-10-new);
--road-variant-icon-header: var(--road-secondary-60);
--road-header-badge: var(--road-secondary-60);
--road-on-header-badge: var(--road-grey-10);
/**
* Neutral Surface
*/
--road-surface: var(--road-grey-100-new);
--road-surface-inverse: var(--road-grey-90);
--road-surface-disabled: rgba(137, 143, 160, 0.24);
--road-on-surface: var(--road-grey-10);
--road-on-surface-weak: var(--road-grey-20);
--road-on-surface-extra-weak: var(--road-grey-40);
--road-on-surface-disabled: rgba(34, 41, 58, 0.32);
/**
* Brand Surface
*/
--road-primary: var(--road-primary-50);
--road-primary-variant: var(--road-primary-30);
--road-on-primary: var(--road-grey-100-new);
--road-secondary: var(--road-secondary-50);
--road-secondary-variant: var(--road-secondary-40);
--road-on-secondary: var(--road-grey-10);
/**
* Outline
*/
--road-outline: var(--road-grey-30);
--road-outline-weak: var(--road-grey-40);
--road-outline-variant: var(--road-primary-30);
/**
* Artwork
*/
--road-icon: var(--road-grey-10);
--road-icon-variant: var(--road-secondary-40);
--road-icon-inverse: var(--road-grey-100-new);
--road-icon-inverse-variant: var(--road-secondary-60);
/**
* Overlay
*/
--road-overlay: rgba(0, 0, 0, 0.64);
--road-overlay-inverse: rgba(255, 255, 255, 0.64);
--road-on-overlay: var(--road-grey-100-new);
--road-on-overlay-inverse: var(--road-grey-10);
/**
* Buttons
*/
--road-button-primary: var(--road-primary-50);
--road-button-primary-variant: var(--road-primary-30);
--road-on-button-primary: var(--road-grey-100-new);
--road-button-secondary: var(--road-secondary-50);
--road-button-secondary-variant: var(--road-secondary-40);
--road-on-button-secondary: var(--road-grey-10);
--road-button-tertiary: rgba(241, 187, 205, 0);
--road-button-tertiary-variant: var(--road-primary-90);
--road-button-tertiary-outline: var(--road-primary-50);
--road-on-button-tertiary: var(--road-grey-10);
--road-button-ghost: rgba(241, 187, 205, 0);
--road-button-ghost-variant: var(--road-primary-90);
--road-on-button-ghost: var(--road-grey-10);
/**
* Fab Button
*/
--road-button-fab: var(--road-secondary-50);
--road-on-button-fab: var(--road-grey-10);
--road-button-fab-variant: var(--road-secondary-40);
/**
* Link
*/
--road-link-primary: var(--road-primary-50);
--road-link-secondary: var(--road-grey-10);
--road-link-inverse: var(--road-grey-100-new);
/**
* Forms
*/
--road-input-surface: var(--road-primary-50);
--road-input-surface-variant: var(--road-primary-30);
--road-input-outline: var(--road-grey-40);
--road-input-outline-variant: var(--road-grey-0);
/**
* Decorative
*/
--road-decorative-surface: var(--road-secondary-50);
--road-decorative-surface-variant: var(--road-primary-50);
/**
* Leading Banner
*/
--road-leading-banner: var(--road-secondary-50);
--road-on-leading-banner: var(--road-grey-10);
}
/* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* stylelint-disable */
/* Document
========================================================================== */
/**
* Prevent adjustments of font size after orientation changes in iOS.
*/
html {
-webkit-text-size-adjust: 100%;
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
margin: 0; /* 2 */
font-f