/********************/ /* MARK: Variables /********************/ :root { /* ********** */ /* Typography */ /* ********** */ /* size */ --typography-family: Roboto, sans-serif; --typography-size-xxxl: clamp(1.375rem, 1.125rem + 0.8333vi, 1.75rem); --typography-size-xxl: clamp(1.25rem, 1.0833rem + 0.5556vi, 1.5rem); --typography-size-xl: clamp(1.125rem, 1.0417rem + 0.2778vi, 1.25rem); --typography-size-l: clamp(1rem, 0.9167rem + 0.2778vi, 1.125rem); --typography-size-m: 1rem; --typography-size-s: 0.875rem; --typography-size-xs: 0.75rem; /* line height */ --typography-leading-l: 1.5; --typography-leading-m: 1.25; --typography-leading-s: 1; /* weight */ --typography-weight-normal: 400; --typography-weight-medium: 500; --typography-weight-bold: 700; /***************/ /* text colors */ /***************/ /* for primary text and icons */ --color-content-default: #252528; /* content on high contrast backgrounds */ --color-content-default-inverse: #FFFFFF; /* for headings and more emphasis */ --color-content-emphasis: #0B3680; /* for secondary content like help text */ --color-content-subtle: #73747A; /* for placeholder content */ --color-content-placeholder: #919198; /* links and secondary buttons */ --color-content-interactive-default: #0062D1; /* links and secondary buttons on high contrast background */ --color-content-interactive-default-inverse: #FFFFFF; /* hover state for interactive elements */ --color-content-interactive-hover: #0C44A1; /* pressed/active state for interactive elements */ --color-content-interactive-pressed: #0B3680; /* selected state for tabs and menu items in navigation */ --color-content-selected: #0062D1; /* informative content, like inline messages */ --color-content-info: #0062D1; /* content that reflects a positive outcome, messages inline */ --color-content-success: #3D7F67; /* a warning, like a message inline */ --color-content-warning: #F05C00; /* an error, or a critical communication */ --color-content-error: #CE092D; /* an error on high contrast background */ --color-content-error-inverse: #FF9495; /* for content that reflects critical information or actions, like destructive buttons and list items */ --color-content-destructive-default: #CE092D; /* hover state for color.content.destructive */ --color-content-destructive-hover: #B30424; /* pressed/active state for color.content.destructive */ --color-content-destructive-pressed: #9A031E; /* color for content on subtle color.accent backgrounds */ --color-content-on-accent-subtle: #4D4D50; /* for logo */ --color-content-logo: #0B3680; /**************/ /* MARK: Background /**************/ /* default background */ --color-background-default: #FFFFFF; /* backgrounds with high contrast, like tooltips */ --color-background-default-inverse: #333438; /* use as alternative background tint */ --color-background-emphasis-primary: #EBF5FF; --color-background-emphasis-secondary: #F0F1F3; /* brand colors */ --color-background-brand-primary: #FEC611; --color-background-brand-secondary: #0B3680; /* hover state */ --color-background-hover: #F0F1F3; --color-background-hover-inverse: #FDFDFD; /* pressed state */ --color-background-pressed: #E4E5E8; --color-background-pressed-inverse: #FFFFFF; /* selected states, chips, table rows, menu items */ --color-background-selected-default:#DBEAFF; --color-background-selected-hover: #C4DBF7; --color-background-selected-pressed: #9AC4F1; /* background for selected states with extra emphasis, like filter chips */ --color-background-selected-emphasis-default: #0062D1; --color-background-selected-emphasis-hover: #0A347C; --color-background-selected-emphasis-pressed: #19335E; /* background buttons and interactive elements */ --color-background-interactive-default: #0062D1; --color-background-interactive-default-inverse: #FFFFFF; --color-background-interactive-hover: #0B4099; --color-background-interactive-hover-inverse: #EEEFF1; --color-background-interactive-pressed: #0C357E; --color-background-interactive-pressed-inverse: #DDDEE0; /* FORM ELEMENTS, checkboxes, inputs, radio-buttons */ --color-background-input: #FFFFFF; /* more notable backgrounds which should be compatible with multiple backgrounds, like toggles */ --color-background-alpha-default: #C2C2C7; --color-background-alpha-hover: #C4C4C9; --color-background-alpha-pressed: #B5B5BA; /* for subtle backgrounds that have to be compatible with multiple backgrounds, like skeletons */ --color-background-alpha-subtle: #E2E3E6; /* overlay behind dialogs */ --color-background-overlay: #727379; /* for more notable informative backgrounds, like a message bar */ --color-background-overlay-default: #0060CC; --color-background-overlay-hover: #0D43A0; --color-background-overlay-pressed: #0A357D; /* for subtle informative backgrounds, like a message inline */ --color-background-overlay-subtle: #EBF5FF; /* backgrounds that reflect a positiv outcome, like a message bar */ --color-background-success-default: #3D7F67; --color-background-success-hover: #2F6354; --color-background-success-pressed: #234A40; /* inline message */ --color-background-success-subtle: #D7F8EC; /* background warning */ --color-background-warning-default: #F05C00; --color-background-warning-hover: #C74E00; --color-background-warning-pressed: #9E3D04; --color-background-warning-subtle: #FBF1E7; /* background error */ --color-background-error-default: #CE092D; --color-background-error-hover: #B30424; --color-background-error-pressed: #92051D; --color-background-error-subtle: #F5E2E4; /* backgrounds that reflect critical information or actions, like destructive primary buttons */ --color-background-destructive-default: #CE092D; --color-background-destructive-hover: #B10523; --color-background-destructive-pressed: #99041E; /* backgrounds that have no meaning attached to the color, like tags */ --color-background-accent-gray-default: #727379; --color-background-accent-gray-subtle: #E3E4E7; --color-background-accent-blue-default: #005FCB; --color-background-accent-blue-subtle: #DBEAFF; --color-background-accent-orange-default: #F05C00; --color-background-accent-orange-subtle: #EEE1CC; --color-background-accent-green-default: #3A7761; --color-background-accent-green-subtle: #B2EBD3; --color-background-accent-red-default: #EB0E39; --color-background-accent-red-subtle: #F8DADA; --color-background-accent-yellow-default: #EFBA0E; --color-background-accent-yellow-subtle: #FCEFC4; --color-background-accent-purple-default: #885DD0; --color-background-accent-purple-subtle: #EBDEFC; --color-background-accent-pink-default: #D53483; --color-background-accent-pink-subtle: #FDD9EE; /***********/ /* MARK: Border /***********/ --color-border-default: #E4E5E8; /* high contrast backgrounds */ --color-border-default-inverse: #FDFDFD; /* borders that need more subtlety */ --color-border-subtle: #EBECEF; --color-border-emphasis: #B6B6BB; /* interactive borders, like secondary buttons */ --color-border-interactive-default: #0062D0; --color-border-interactive-default-inverse: #FFFFFF; --color-border-interactive-hover: #0D439F; --color-border-interactive-pressed: #0B3680; /* FORMS, inputs, checkboxes, radio buttons */ --color-border-input-default: #919198; --color-border-input-hover: #73747A; /* informative borders, like a message inline */ --color-border-info: #0062D1; /* success */ --color-border-success: #3D7F67; /* warning */ --color-border-warning: #F05C00; /* error */ --color-border-error: #CE092D; /* destructive */ --color-border-destructive-default: #CE092D; --color-border-destructive-hover: #B30424; --color-border-destructive-pressed: #9A031E; /* logo */ --color-border-logo: transparent; /* selected state, like tabs, menu item, navigation bar */ --color-border-selected-default: #0062D1; /* a selected state that needs extra emphasis */ --color-border-selected-emphasis: #0B3680; /* the outline in focus states */ --color-border-focus: #0062D1; /* ***************** */ /* Container padding */ /* ***************** */ --spacing-inset-xs: 8px; --spacing-inset-s: 12px; --spacing-inset-m: 16px; --spacing-inset-l: 16px; /* ********************* */ /* Container breakpoints */ /* ********************* */ --breakpoint-xs: 480px; --breakpoint-s: 768px; --breakpoint-m: 1024px; --breakpoint-l: 1200px; --input-height: 4.5em; --input-width: clamp(20em, 40vw, 35em); } /* if breakpoint L or bigger */ @media (width > 1024px) { :root { --spacing-inset-l: 24px; } } /* ****** */ /* MARK: Darkmode /* ****** */ html:has(#darkmode-slider:checked) { /*******************/ /* COLORS DARKMODE */ /*******************/ /***************/ /* text colors */ /***************/ /* for primary text and icons */ --color-content-default: #C4C5CB; /* content on high contrast backgrounds */ --color-content-default-inverse: #252528; /* for headings and more emphasis */ --color-content-emphasis: #E4E5E8; /* for secondary content like help text */ --color-content-subtle: #979798; /* for placeholder content */ --color-content-placeholder: #757677; /* links and secondary buttons */ --color-content-interactive-default: #5D9FEA; /* links and secondary buttons on high contrast background */ --color-content-interactive-default-inverse: #0C44A1; /* hover state for interactive elements */ --color-content-interactive-hover: #9AC4F1; /* pressed/active state for interactive elements */ --color-content-interactive-pressed: #C4DBF7; /* selected state for tabs and menu items in navigation */ --color-content-selected: #FFFFFF; /* informative content, like inline messages */ --color-content-info: #5D9FEA; /* content that reflects a positive outcome, messages inline */ --color-content-success: #4FCDA6; /* a warning, like a message inline */ --color-content-warning: #FF9544; /* an error, or a critical communication */ --color-content-error: #FF9495; /* an error on high contrast background */ --color-content-error-inverse: #B30424; /* for content that reflects critical information or actions, like destructive buttons and list items */ --color-content-destructive-default: #FF9495; /* hover state for color.content.destructive */ --color-content-destructive-hover: #FFBDBE; /* pressed/active state for color.content.destructive */ --color-content-destructive-pressed: #FADCDC; /* color for content on subtle color.accent backgrounds */ --color-content-on-accent-subtle: #FFFFFF; /* for logo */ --color-content-logo: #FED651; /* default background */ --color-background-default: #0D0E10; /* backgrounds with high contrast, like tooltips */ --color-background-default-inverse: #D6D7DD; /* use as alternative background tint */ --color-background-emphasis-primary: #1E2C42; --color-background-emphasis-secondary: #333438; /* brand colors */ --color-background-brand-primary: #252528; --color-background-brand-secondary: #9AC4F1; /* hover state */ --color-background-hover: #202123; --color-background-hover-inverse: #0C0E12; /* pressed state */ --color-background-pressed: #343536; --color-background-pressed-inverse: #0D0E13; /* selected states, chips, table rows, menu items */ --color-background-selected-default: #343536; --color-background-selected-hover: #454647; --color-background-selected-pressed: #5B5B5D; /* background for selected states with extra emphasis, like filter chips */ --color-background-selected-emphasis-default: #5D9FEA; --color-background-selected-emphasis-hover: #9AC4F1; --color-background-selected-emphasis-pressed: #C4DBF7; /* background buttons and interactive elements */ --color-background-interactive-default: #5D9FEA; --color-background-interactive-default-inverse: #1B3460; --color-background-interactive-hover: #9AC4F1; --color-background-interactive-hover-inverse: #0B368; --color-background-interactive-pressed: #C4DBF7; --color-background-interactive-pressed-inverse: #0C44A1; /* FORM ELEMENTS, checkboxes, inputs, radio-buttons */ --color-background-input: #000000; /* more notable backgrounds which should be compatible with multiple backgrounds, like toggles */ --color-background-alpha-default: #5B5B5D; --color-background-alpha-hover: #5B5B5D; --color-background-alpha-pressed: #5B5B5D; /* for subtle backgrounds that have to be compatible with multiple backgrounds, like skeletons */ --color-background-alpha-subtle: #28282A; /* overlay behind dialogs */ --color-background-overlay: #06070E; /* for more notable informative backgrounds, like a message bar */ --color-background-overlay-default: #5D9FEA; --color-background-overlay-hover: #9AC4F1; --color-background-overlay-pressed: #C4DBF7; /* for subtle informative backgrounds, like a message inline */ --color-background-overlay-subtle: #28282A; /* backgrounds that reflect a positiv outcome, like a message bar */ --color-background-success-default: #4FCDA6; --color-background-success-hover: #9AE0C4; --color-background-success-pressed: #B9F4DB; /* inline message */ --color-background-success-subtle: #28282A; /* background warning */ --color-background-warning-default: #FF9544; --color-background-warning-hover: #FFBB7A; --color-background-warning-pressed: #F7D7B1; --color-background-warning-subtle: #28282A; /* background error */ --color-background-error-default: #FF9495; --color-background-error-hover: #FFBDBE; --color-background-error-pressed: #FADCDC; --color-background-error-subtle: #28282A; /* backgrounds that reflect critical information or actions, like destructive primary buttons */ --color-background-destructive-default: #FF9495; --color-background-destructive-hover: #FFBDBE; --color-background-destructive-pressed: #FADCDC; /* backgrounds that have no meaning attached to the color, like tags */ --color-background-accent-gray-default: #979798; --color-background-accent-gray-subtle: #343536; --color-background-accent-blue-default: #5D9FEA; --color-background-accent-blue-subtle: #1B3460; --color-background-accent-orange-default: #FF9544; --color-background-accent-orange-subtle: #6A3718; --color-background-accent-green-default: #47BD99; --color-background-accent-green-subtle: #244C40; --color-background-accent-red-default: #EF6666; --color-background-accent-red-subtle: #9A031E; --color-background-accent-yellow-default: #FED651; --color-background-accent-yellow-subtle: #8C7321; --color-background-accent-purple-default: #A780EF; --color-background-accent-purple-subtle: #472F6F; --color-background-accent-pink-default: #EA66AA; --color-background-accent-pink-subtle: #84244B; /***********/ /* Border */ /***********/ --color-border-default: #343536; /* high contrast backgrounds */ --color-border-default-inverse: #0D0E13; /* borders that need more subtlety */ --color-border-subtle: #28282A; --color-border-emphasis: #5B5B5D; /* interactive borders, like secondary buttons */ --color-border-interactive-default: #5D9FEA; --color-border-interactive-default-inverse: #0C44A1; --color-border-interactive-hover: #9AC4F1; --color-border-interactive-pressed: #C4DBF7; /* FORMS, inputs, checkboxes, radio buttons */ --color-border-input-default: #757677; --color-border-input-hover: #979798; /* informative borders, like a message inline */ --color-border-info: #5D9FEA; /* success */ --color-border-success: #4FCDA6; /* warning */ --color-border-warning: #FF9544; /* error */ --color-border-error: #FF9495; /* destructive */ --color-border-destructive-default: #FF9495; --color-border-destructive-hover: #FFBDBE; --color-border-destructive-pressed: #FADCDC; /* logo */ --color-border-logo: #343536; /* selected state, like tabs, menu item, navigation bar */ --color-border-selected-default: #FED651; /* a selected state that needs extra emphasis */ --color-border-selected-emphasis: #FED651; /* the outline in focus states */ --color-border-focus: #5D9FEA; } @media (prefers-color-scheme: dark) { html:not(:has(#darkmode-slider:checked)) { /*******************/ /* COLORS DARKMODE */ /*******************/ /***************/ /* text colors */ /***************/ /* for primary text and icons */ --color-content-default: #C4C5CB; /* content on high contrast backgrounds */ --color-content-default-inverse: #252528; /* for headings and more emphasis */ --color-content-emphasis: #E4E5E8; /* for secondary content like help text */ --color-content-subtle: #979798; /* for placeholder content */ --color-content-placeholder: #757677; /* links and secondary buttons */ --color-content-interactive-default: #5D9FEA; /* links and secondary buttons on high contrast background */ --color-content-interactive-default-inverse: #0C44A1; /* hover state for interactive elements */ --color-content-interactive-hover: #9AC4F1; /* pressed/active state for interactive elements */ --color-content-interactive-pressed: #C4DBF7; /* selected state for tabs and menu items in navigation */ --color-content-selected: #FFFFFF; /* informative content, like inline messages */ --color-content-info: #5D9FEA; /* content that reflects a positive outcome, messages inline */ --color-content-success: #4FCDA6; /* a warning, like a message inline */ --color-content-warning: #FF9544; /* an error, or a critical communication */ --color-content-error: #FF9495; /* an error on high contrast background */ --color-content-error-inverse: #B30424; /* for content that reflects critical information or actions, like destructive buttons and list items */ --color-content-destructive-default: #FF9495; /* hover state for color.content.destructive */ --color-content-destructive-hover: #FFBDBE; /* pressed/active state for color.content.destructive */ --color-content-destructive-pressed: #FADCDC; /* color for content on subtle color.accent backgrounds */ --color-content-on-accent-subtle: #FFFFFF; /* for logo */ --color-content-logo: #FED651; /* default background */ --color-background-default: #0D0E10; /* backgrounds with high contrast, like tooltips */ --color-background-default-inverse: #D6D7DD; /* use as alternative background tint */ --color-background-emphasis-primary: #1E2C42; --color-background-emphasis-secondary: #333438; /* brand colors */ --color-background-brand-primary: #252528; --color-background-brand-secondary: #9AC4F1; /* hover state */ --color-background-hover: #202123; --color-background-hover-inverse: #0C0E12; /* pressed state */ --color-background-pressed: #343536; --color-background-pressed-inverse: #0D0E13; /* selected states, chips, table rows, menu items */ --color-background-selected-default: #343536; --color-background-selected-hover: #454647; --color-background-selected-pressed: #5B5B5D; /* background for selected states with extra emphasis, like filter chips */ --color-background-selected-emphasis-default: #5D9FEA; --color-background-selected-emphasis-hover: #9AC4F1; --color-background-selected-emphasis-pressed: #C4DBF7; /* background buttons and interactive elements */ --color-background-interactive-default: #5D9FEA; --color-background-interactive-default-inverse: #1B3460; --color-background-interactive-hover: #9AC4F1; --color-background-interactive-hover-inverse: #0B368; --color-background-interactive-pressed: #C4DBF7; --color-background-interactive-pressed-inverse: #0C44A1; /* FORM ELEMENTS, checkboxes, inputs, radio-buttons */ --color-background-input: #000000; /* more notable backgrounds which should be compatible with multiple backgrounds, like toggles */ --color-background-alpha-default: #5B5B5D; --color-background-alpha-hover: #5B5B5D; --color-background-alpha-pressed: #5B5B5D; /* for subtle backgrounds that have to be compatible with multiple backgrounds, like skeletons */ --color-background-alpha-subtle: #28282A; /* overlay behind dialogs */ --color-background-overlay: #06070E; /* for more notable informative backgrounds, like a message bar */ --color-background-overlay-default: #5D9FEA; --color-background-overlay-hover: #9AC4F1; --color-background-overlay-pressed: #C4DBF7; /* for subtle informative backgrounds, like a message inline */ --color-background-overlay-subtle: #28282A; /* backgrounds that reflect a positiv outcome, like a message bar */ --color-background-success-default: #4FCDA6; --color-background-success-hover: #9AE0C4; --color-background-success-pressed: #B9F4DB; /* inline message */ --color-background-success-subtle: #28282A; /* background warning */ --color-background-warning-default: #FF9544; --color-background-warning-hover: #FFBB7A; --color-background-warning-pressed: #F7D7B1; --color-background-warning-subtle: #28282A; /* background error */ --color-background-error-default: #FF9495; --color-background-error-hover: #FFBDBE; --color-background-error-pressed: #FADCDC; --color-background-error-subtle: #28282A; /* backgrounds that reflect critical information or actions, like destructive primary buttons */ --color-background-destructive-default: #FF9495; --color-background-destructive-hover: #FFBDBE; --color-background-destructive-pressed: #FADCDC; /* backgrounds that have no meaning attached to the color, like tags */ --color-background-accent-gray-default: #979798; --color-background-accent-gray-subtle: #343536; --color-background-accent-blue-default: #5D9FEA; --color-background-accent-blue-subtle: #1B3460; --color-background-accent-orange-default: #FF9544; --color-background-accent-orange-subtle: #6A3718; --color-background-accent-green-default: #47BD99; --color-background-accent-green-subtle: #244C40; --color-background-accent-red-default: #EF6666; --color-background-accent-red-subtle: #9A031E; --color-background-accent-yellow-default: #FED651; --color-background-accent-yellow-subtle: #8C7321; --color-background-accent-purple-default: #A780EF; --color-background-accent-purple-subtle: #472F6F; --color-background-accent-pink-default: #EA66AA; --color-background-accent-pink-subtle: #84244B; /***********/ /* Border */ /***********/ --color-border-default: #343536; /* high contrast backgrounds */ --color-border-default-inverse: #0D0E13; /* borders that need more subtlety */ --color-border-subtle: #28282A; --color-border-emphasis: #5B5B5D; /* interactive borders, like secondary buttons */ --color-border-interactive-default: #5D9FEA; --color-border-interactive-default-inverse: #0C44A1; --color-border-interactive-hover: #9AC4F1; --color-border-interactive-pressed: #C4DBF7; /* FORMS, inputs, checkboxes, radio buttons */ --color-border-input-default: #757677; --color-border-input-hover: #979798; /* informative borders, like a message inline */ --color-border-info: #5D9FEA; /* success */ --color-border-success: #4FCDA6; /* warning */ --color-border-warning: #FF9544; /* error */ --color-border-error: #FF9495; /* destructive */ --color-border-destructive-default: #FF9495; --color-border-destructive-hover: #FFBDBE; --color-border-destructive-pressed: #FADCDC; /* logo */ --color-border-logo: #343536; /* selected state, like tabs, menu item, navigation bar */ --color-border-selected-default: #FED651; /* a selected state that needs extra emphasis */ --color-border-selected-emphasis: #FED651; /* the outline in focus states */ --color-border-focus: #5D9FEA; } html:has(#darkmode-slider:checked) { /***************/ /* text colors */ /***************/ /* for primary text and icons */ --color-content-default: #252528; /* content on high contrast backgrounds */ --color-content-default-inverse: #FFFFFF; /* for headings and more emphasis */ --color-content-emphasis: #0B3680; /* for secondary content like help text */ --color-content-subtle: #73747A; /* for placeholder content */ --color-content-placeholder: #919198; /* links and secondary buttons */ --color-content-interactive-default: #0062D1; /* links and secondary buttons on high contrast background */ --color-content-interactive-default-inverse: #FFFFFF; /* hover state for interactive elements */ --color-content-interactive-hover: #0C44A1; /* pressed/active state for interactive elements */ --color-content-interactive-pressed: #0B3680; /* selected state for tabs and menu items in navigation */ --color-content-selected: #0062D1; /* informative content, like inline messages */ --color-content-info: #0062D1; /* content that reflects a positive outcome, messages inline */ --color-content-success: #3D7F67; /* a warning, like a message inline */ --color-content-warning: #F05C00; /* an error, or a critical communication */ --color-content-error: #CE092D; /* an error on high contrast background */ --color-content-error-inverse: #FF9495; /* for content that reflects critical information or actions, like destructive buttons and list items */ --color-content-destructive-default: #CE092D; /* hover state for color.content.destructive */ --color-content-destructive-hover: #B30424; /* pressed/active state for color.content.destructive */ --color-content-destructive-pressed: #9A031E; /* color for content on subtle color.accent backgrounds */ --color-content-on-accent-subtle: #4D4D50; /* for logo */ --color-content-logo: #0B3680; /* default background */ --color-background-default: #FFFFFF; /* backgrounds with high contrast, like tooltips */ --color-background-default-inverse: #333438; /* use as alternative background tint */ --color-background-emphasis-primary: #EBF5FF; --color-background-emphasis-secondary: #F0F1F3; /* brand colors */ --color-background-brand-primary: #FEC611; --color-background-brand-secondary: #0B3680; /* hover state */ --color-background-hover: #F0F1F3; --color-background-hover-inverse: #FDFDFD; /* pressed state */ --color-background-pressed: #E4E5E8; --color-background-pressed-inverse: #FFFFFF; /* selected states, chips, table rows, menu items */ --color-background-selected-default:#DBEAFF; --color-background-selected-hover: #C4DBF7; --color-background-selected-pressed: #9AC4F1; /* background for selected states with extra emphasis, like filter chips */ --color-background-selected-emphasis-default: #0062D1; --color-background-selected-emphasis-hover: #0A347C; --color-background-selected-emphasis-pressed: #19335E; /* background buttons and interactive elements */ --color-background-interactive-default: #0062D1; --color-background-interactive-default-inverse: #FFFFFF; --color-background-interactive-hover: #0B4099; --color-background-interactive-hover-inverse: #EEEFF1; --color-background-interactive-pressed: #0C357E; --color-background-interactive-pressed-inverse: #DDDEE0; /* FORM ELEMENTS, checkboxes, inputs, radio-buttons */ --color-background-input: #FFFFFF; /* more notable backgrounds which should be compatible with multiple backgrounds, like toggles */ --color-background-alpha-default: #C2C2C7; --color-background-alpha-hover: #C4C4C9; --color-background-alpha-pressed: #B5B5BA; /* for subtle backgrounds that have to be compatible with multiple backgrounds, like skeletons */ --color-background-alpha-subtle: #E2E3E6; /* overlay behind dialogs */ --color-background-overlay: #727379; /* for more notable informative backgrounds, like a message bar */ --color-background-overlay-default: #0060CC; --color-background-overlay-hover: #0D43A0; --color-background-overlay-pressed: #0A357D; /* for subtle informative backgrounds, like a message inline */ --color-background-overlay-subtle: #EBF5FF; /* backgrounds that reflect a positiv outcome, like a message bar */ --color-background-success-default: #3D7F67; --color-background-success-hover: #2F6354; --color-background-success-pressed: #234A40; /* inline message */ --color-background-success-subtle: #D7F8EC; /* background warning */ --color-background-warning-default: #F05C00; --color-background-warning-hover: #C74E00; --color-background-warning-pressed: #9E3D04; --color-background-warning-subtle: #FBF1E7; /* background error */ --color-background-error-default: #CE092D; --color-background-error-hover: #B30424; --color-background-error-pressed: #92051D; --color-background-error-subtle: #F5E2E4; /* backgrounds that reflect critical information or actions, like destructive primary buttons */ --color-background-destructive-default: #CE092D; --color-background-destructive-hover: #B10523; --color-background-destructive-pressed: #99041E; /* backgrounds that have no meaning attached to the color, like tags */ --color-background-accent-gray-default: #727379; --color-background-accent-gray-subtle: #E3E4E7; --color-background-accent-blue-default: #005FCB; --color-background-accent-blue-subtle: #DBEAFF; --color-background-accent-orange-default: #F05C00; --color-background-accent-orange-subtle: #EEE1CC; --color-background-accent-green-default: #3A7761; --color-background-accent-green-subtle: #B2EBD3; --color-background-accent-red-default: #EB0E39; --color-background-accent-red-subtle: #F8DADA; --color-background-accent-yellow-default: #EFBA0E; --color-background-accent-yellow-subtle: #FCEFC4; --color-background-accent-purple-default: #885DD0; --color-background-accent-purple-subtle: #EBDEFC; --color-background-accent-pink-default: #D53483; --color-background-accent-pink-subtle: #FDD9EE; --color-border-default: #E4E5E8; /* high contrast backgrounds */ --color-border-default-inverse: #FDFDFD; /* borders that need more subtlety */ --color-border-subtle: #EBECEF; --color-border-emphasis: #B6B6BB; /* interactive borders, like secondary buttons */ --color-border-interactive-default: #0062D0; --color-border-interactive-default-inverse: #FFFFFF; --color-border-interactive-hover: #0D439F; --color-border-interactive-pressed: #0B3680; /* FORMS, inputs, checkboxes, radio buttons */ --color-border-input-default: #919198; --color-border-input-hover: #73747A; /* informative borders, like a message inline */ --color-border-info: #0062D1; /* success */ --color-border-success: #3D7F67; /* warning */ --color-border-warning: #F05C00; /* error */ --color-border-error: #CE092D; /* destructive */ --color-border-destructive-default: #CE092D; --color-border-destructive-hover: #B30424; --color-border-destructive-pressed: #9A031E; /* logo */ --color-border-logo: transparent; /* selected state, like tabs, menu item, navigation bar */ --color-border-selected-default: #0062D1; /* a selected state that needs extra emphasis */ --color-border-selected-emphasis: #0B3680; /* the outline in focus states */ --color-border-focus: #0062D1; } } /* ****** */ /* MARK: algemene styling /* ****** */ * { font-family: var(--typography-family); } body { margin: 0; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { color: var(--color-content-emphasis) } /* algemene classes */ .hidden { display: none; } .content, form { max-width: var(--breakpoint-l); } input { color: var(--color-content-default); padding: 0; border: 1px solid var(--color-border-input-default); border-radius: 4px; min-height: 44px; min-width: 44px; height: var(--input-height); width: var(--input-width); font-size: medium; padding-left: 1rem; background-color: var(--color-background-input); &:hover { background-color: var(--color-background-hover-inverse); } } input:not(.invalid), input:not(:invalid){ &:hover { border-color: var(--color-border-input-hover); } } .content { width: clamp(1rem, 100%, var(--breakpoint-l)); } /* ****** */ /* MARK: Progressive disclosure /* ****** */ .skip-questions ~ .question, .radio-wrapper:has(#notary-yes) ~ #kopie-aagifte-container { display: none; } .skip-questions:has(.show:checked) ~ .question, .radio-wrapper:has(#notary-yes:checked) ~ #kopie-aagifte-container { display: block; } .skip-questions:has(.skip:checked) ~ .question { display: none; } /* .skip-questions:has(.skip:checked) ~ .question, #notary-no:checked ~ #kopie-aagifte-container { display: none; } */ /* ****** */ /* MARK: Validity /* ****** */ .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .input-wrapper{ width: max-content; position: relative; display: flex; align-items: center; &::after { right: 0; position: absolute; display: inline-block; width: 1.5rem; height:1.5rem; margin-right: -2rem; } &:has(input:user-valid), &:has(input.valid) { &::after { position: absolute; right: 0; top: 25%; content: ""; margin-left: 0.5rem; display: inline-block; width: 2rem; height: 2rem; margin-left: 0.5rem; background-color: var(--color-border-success); transition: 0.2s; -webkit-mask: url("images/icons/check.svg") no-repeat center; mask: url("images/icons/check.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } } &:has(input:user-invalid), &:has(input.invalid) { &::after { position: absolute; right: 0; top: 25%; content: ""; margin-left: 0.5rem; display: inline-block; width: 2rem; height: 2rem; margin-left: 0.5rem; background-color: var(--color-border-error); transition: 0.2s; -webkit-mask: url("images/icons/error.svg") no-repeat center; mask: url("images/icons/error.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } } } input:not(.custom-error):user-invalid, input:not(.custom-error):user-invalid, .invalid { border: 1px solid var(--color-border-error); border-left: 5px solid var(--color-border-error); &:focus-visible { border: 2px solid; border-color: var(--color-border-focus); height: calc(var(--input-height) - 2px); width: calc(var(--input-width) - 2px); } } input:not(.custom-error):user-valid, .valid { border: 1px solid var(--color-border-success); &:not(:focus-visible):hover { border-color: var(--color-border-success); } &:focus-visible { border: 2px solid; border-color: var(--color-border-focus); height: calc(var(--input-height) - 2px); width: calc(var(--input-width) - 2px); } } input:focus-visible { border: 2px solid; border-color: var(--color-border-focus); height: calc(var(--input-height) - 2px); width: calc(var(--input-width) - 2px); outline: none; &:hover { border-color: var(--color-border-focus); } } .error-message { color: var(--color-content-error); margin: 0; } fieldset:not(:has(.error-message.hidden)) .radio-wrapper:not(:has(input:checked)) input { border-left: 5px solid var(--color-border-error); } fieldset:has(>.radio-wrapper input:checked) > .error-message { display: none; } /* ****** */ /* MARK: Header /* ****** */ header { background: var(--color-background-default); padding: 0; display: grid; max-height: max-content; border-bottom: 2px solid var(--color-border-default); width: 100vw; p { margin: 0; color: inherit; } >div { --width: calc(100vw - var(--spacing-inset-xs)*2); padding: var(--spacing-inset-xs); display: flex; justify-content: center; width: var(--width); } .warning-assignment{ background: var(--color-background-destructive-default); color: var(--color-content-default-inverse); display: flex; border-bottom: 1px solid var(--color-border-emphasis); .content { display: flex; justify-content: space-between; div:first-of-type { display: flex; align-items: center; height: max-content; gap: 0.5em; svg { width: auto; height: 1.5rem; padding-left: 2rem; } } /* slider/toggle light dark */ div:nth-of-type(2) { input { margin-right: 1rem; appearance: none; background: var(--color-background-alpha-default); min-width: 0px; min-height: 0px; width: 2.8rem; height: 1.5rem; border-radius: 2rem; display: flex; align-items: center; padding: 2px; position: relative; color: white; border-color: var(--color-background-alpha-default); /* bolletje */ &::before { content: ""; display: block; position: absolute; transition: right 0.2s; height: 1.2rem; aspect-ratio: 1; border-radius: 99rem; background-color: white; right: 1.4rem; } &:checked::before { right:0.2rem; } /* x of haakje */ &::after { content: ""; margin-left: 0.5rem; display: inline-block; width: 1rem; height: 1rem; background-color: currentColor; transition: 0.2s; position: absolute; right: 0.3rem; -webkit-mask: url("images/icons/close.svg") no-repeat center; mask: url("images/icons/close.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } &:checked::after { left: -0.3rem; -webkit-mask: url("images/icons/check.svg") no-repeat center; mask: url("images/icons/check.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } &:checked, &:hover, &:focus-visible { border-color: var(--color-background-alpha-default); } &:checked { background-color: var(--color-background-accent-green-default); border-color: var(--color-background-accent-green-default); } } } } } .info-uni { display: flex; padding-left: 2rem; gap: 2rem; align-items: center; a { color: var(--color-content-emphasis); text-decoration: none; margin: 0; font-weight: 700; } img { width: auto; height: 1rem; } } } /* ****** */ /* MARK: Main /* ****** */ main { display: grid; justify-items: center; background: var(--color-background-accent-gray-subtle); min-height: 100vh; .content { display: grid; } /* section toelichting */ .toelichting { background: var(--color-background-brand-primary); padding: var(--spacing-inset-l); margin: var(--spacing-inset-m); border-bottom: 2px solid var(--color-border-default); color: var(--color-content-default); } /* error overview */ .error-overview { max-height: max-content; padding: var(--spacing-inset-m); margin: var(--spacing-inset-m); background: var(--color-background-error-default); color: var(--color-content-default-inverse); width: clamp(4rem, 80%, 200rem); justify-self: center; div { display: flex; align-items: center; h2 { color: inherit; } } ul { color: var(--color-content-default-inverse); padding: var(--spacing-inset-m); display: grid; gap: 0.5em; font-weight: bold; margin: 0; a { color: inherit; text-decoration: none; } } svg { height: 2rem; width: 2rem; margin-right: 1rem; } } fieldset { border: none; } form { background: var(--color-background-input); padding: var(--spacing-inset-m); margin: var(--spacing-inset-m); border-bottom: 2px solid var(--color-border-input-default); border-left: 6px solid var(--color-background-brand-primary); details { height: max-content; /* border-right: 6px solid var(--color-border-interactive-default); */ border-bottom: 2px solid var(--color-border-emphasis); &:first-of-type { border-top: 2px solid var(--color-border-emphasis); } summary { font-size: x-large; background: var(--color-background-accent-blue-subtle); list-style: none; display: flex; align-items: center; cursor: pointer; color: var(--color-content-interactive-default); padding: var(--spacing-inset-s); position: sticky; top: 0; z-index: 1000; height: 3rem; position: relative; span { font-weight: bolder; margin-right: 0.5rem; font-size: xx-large; } &:hover, &:focus-visible { color: var(--color-content-interactive-hover); &::after { margin-left: 0.7rem; } } &:focus-visible { outline: none; border: 2px solid var(--color-border-interactive-hover); } &::-webkit-details-marker { display: none; } &::after { content: ""; margin-left: 0.5rem; display: inline-block; width: 2rem; height: 2rem; margin-left: 0.5rem; background-color: currentColor; transition: 0.2s; position: absolute; right: 3rem; -webkit-mask: url("images/icons/chevron-right.svg") no-repeat center; mask: url("images/icons/chevron-right.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } } &:not(:first-of-type) { border-top: 0; } } details[open] { padding-bottom: 2rem; border-bottom: 2px solid var(--color-border-emphasis); summary { &::after { -webkit-mask: url("images/icons/chevron-down.svg") no-repeat center; mask: url("images/icons/chevron-down.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } } } /* all buttons */ button { min-width: 80px; } /* primary button*/ >button { margin-top: 40px; border: none; border-bottom: 2px solid var(--color-background-interactive-hover); border-radius: 4px; background: var(--color-background-interactive-default); color: var(--color-content-interactive-default-inverse); padding: var(--spacing-inset-m); position: relative; width: clamp(150px, 30%, 12rem); &::before { content: ""; position: absolute; width: 100%; height: 0; background: var(--color-background-interactive-hover); transform-origin: bottom; transition: height 0.2s ease; bottom: 0; left: 0; z-index: 0; border-radius: 4px; } &:hover::before, &:focus-visible::before { height: 100%; } > * { position: relative; z-index: 1; } &:focus-visible { outline: none; border: 2px solid var(--color-border-selected-default) } } /* radio buttons */ .radio-wrapper { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; align-items: center; gap: 0.5em; input { appearance: none; border-color: var(--color-border-input-default); background: var(--color-background-input); margin: 0; height: calc(var(--input-height) + 4px); &:first-of-type{ width: 80%; grid-column: 1/2; grid-row: 1/2; } &:nth-of-type(2) { width: 80%; grid-column: 1/2; grid-row: 2/3; } &:hover { border-color: var(--color-border-input-hover); background: var(--color-background-hover-inverse); } &:checked { border-color: var(--color-border-selected-default); background-color: var(--color-background-selected-default); } &:focus-visible { border: 4px solid; border-color: var(--color-border-focus); } } label { position: relative; z-index: 2; margin-left: 1rem; &:first-of-type{ width: 80%; grid-column: 1/2; grid-row: 1/2; } &:nth-of-type(2) { width: 80%; grid-column: 1/2; grid-row: 2/3; } } } } #question-five { margin-left: 1rem; } } /* legends */ details > fieldset > legend { margin-top: 2rem; margin-bottom: 16px; font-size: large; width: 100%; border-bottom: 2px solid var(--color-border-emphasis); height: 2rem; place-content: center; height: 2rem; background-color: var(--color-background-input); color: var(--color-content-emphasis); span:first-of-type { font-size: x-large; } } fieldset > fieldset > legend { font-weight: bolder; color: var(--color-content-emphasis); } fieldset > fieldset > fieldset { padding: 0; } /* inputs (not radios) */ /* label styling */ .input-wrapper, .radio-wrapper, #kopie-aangifte { margin: 1rem 0 24px 0; } label { font-weight: bolder; color: var(--color-content-emphasis); } form p { margin: 0; color: var(--color-content-subtle); } .error-message { position: absolute; } /* section 3 */ #section-three-a, #section-three-b, #section-three-c { legend { height: max-content; padding-bottom: 0.5rem; } } #section-three-a, #section-three-c { .input-container { display: grid; grid-template-columns: 4rem 1fr; align-items: center; padding: 0 12px; label { grid-row: 1/2; grid-column: 2/3; } input { display: flex; justify-content: center; align-items: center; appearance: none; grid-row: 1/2; grid-column: 1/2; height: 4rem; width: 4rem; padding: 1rem; border: none; border-radius: 99em; &:hover, &:focus-visible { background-color: var(--color-background-default); } &::after { display: block; content: ""; height: 1rem; width: 1rem; border: 1px solid var(--color-border-input-default); border-radius: 99em; } &:hover::after, &:focus-visible::after { background-color: var(--color-background-hover-inverse); } &:checked::after { border-color: var(--color-border-selected-default); box-shadow: inset 0 0 0 0.25em var(--color-border-success); } &:focus-visible::after { border-color: var(--color-border-interactive-hover); box-shadow: inset 0 0 0 0.25em var(--color-border-success), 0 0 0 0.1em var(--color-border-interactive-hover); } } } } /* verkrijgers */ .verkrijgers-fieldset { > legend { font-size: large; } .verkrijger{ legend { font-size: large; } margin: 0; border: 1px solid var(--color-border-default); padding: var(--spacing-inset-m); margin-bottom: 16px; } .verwijder-button-container { legend { color: var(--color-content-emphasis); font-weight: bold; } display: flex; justify-content: space-between; align-items: center; width: 100%; } } /* random styling */ #receiver-input-group { padding: var(--spacing-inset-l); } #section-three-c { position: relative; } #err33 { top: -0.4rem; left: 2rem; } /* buttons */ .secondary-button { background-color: var(--color-background-input); border: 1px solid var(--color-border-interactive-default); padding: var(--spacing-inset-m); color: var(--color-border-interactive-default); border-radius: 4px; max-width: 10rem; &:hover, &:focus-visible { color: var(--color-content-interactive-hover); border-color: var(--color-border-interactive-hover); background-color: var(--color-background-hover-inverse); outline: none; } &:focus-visible { border: 2px solid var(--color-border-interactive-hover); } } .destructive-button { background-color: var(--color-background-destructive-default); color: var(--color-content-default-inverse); border: 1px solid var(--color-border-interactive-default); padding: var(--spacing-inset-xs); border-radius: 4px; position: relative; display: flex; align-items: center; justify-content: space-evenly; border-color: var(--color-border-destructive-default); &:hover, &:focus-visible { background-color: var(--color-background-destructive-hover); border-color: var(--color-border-destructive-hover); } &:focus-visible { outline: none; border: 2px solid var(--color-border-interactive-hover); } &::before { position: relative; content: ""; display: inline-block; width: 1.5rem; height: 1.5rem; background-color: currentColor; transition: 0.2s; -webkit-mask: url("images/icons/trash.svg") no-repeat center; mask: url("images/icons/trash.svg") no-repeat center; -webkit-mask-size: contain; mask-size: contain; } &.hidden { display: none; } } /* ********** */ /* MARK: Footer /* ********** */