├── css ├── theme │ ├── print.css │ ├── local-theme.css │ ├── menu-shapes.css │ ├── image-shapes.css │ ├── button-shapes.css │ ├── utility.css │ ├── color-red.css │ ├── color-yellow.css │ ├── color-green.css │ ├── color-orange.css │ ├── color-blue.css │ ├── color-local.css │ ├── color-pink.css │ ├── color-purple.css │ ├── color-gray.css │ ├── color-turquoise.css │ ├── form-shapes.css │ └── base-color.css ├── base │ ├── local-base.css │ └── elements.css ├── components │ ├── local-components.css │ ├── site-branding.css │ ├── menu.css │ ├── extra-home.css │ ├── breadcrumb.css │ ├── node-view-mode-card.css │ └── buttons.css └── layout │ └── layout.css ├── screenshot.png ├── templates └── breadcrumb.html.twig ├── config ├── install │ ├── block.block.corporateclean_local_actions.yml │ ├── block.block.corporateclean_page_title.yml │ ├── block.block.corporateclean_content.yml │ ├── block.block.corporateclean_local_tasks.yml │ ├── block.block.corporateclean_breadcrumbs.yml │ ├── block.block.corporateclean_messages.yml │ ├── block.block.corporateclean_branding.yml │ ├── block.block.corporateclean_main_menu.yml │ ├── block.block.corporateclean_tools.yml │ ├── block.block.corporateclean_account_menu.yml │ └── corporateclean.settings.yml └── optional │ └── block.block.corporateclean_footer.yml ├── Makefile ├── corporateclean.theme ├── theme-settings.php ├── logo.svg ├── README.md ├── corporateclean.info.yml ├── corporateclean.libraries.yml └── licence.txt /css/theme/print.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/theme/local-theme.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/morethanthemes/corporateclean/HEAD/screenshot.png -------------------------------------------------------------------------------- /css/base/local-base.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Use this CSS file to override base CSS rules 4 | */ 5 | -------------------------------------------------------------------------------- /css/components/local-components.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Use this CSS file to override components CSS rules 4 | */ 5 | -------------------------------------------------------------------------------- /css/components/site-branding.css: -------------------------------------------------------------------------------- 1 | .site-name a { 2 | font-size: 1.25rem; 3 | font-weight: 700; 4 | line-height: 1.6; 5 | } 6 | -------------------------------------------------------------------------------- /css/layout/layout.css: -------------------------------------------------------------------------------- 1 | .footer__section { 2 | padding: 5rem 0; 3 | } 4 | .footer__section p { 5 | font-size: 1rem; 6 | } 7 | .subfooter__container { 8 | padding: 1.5rem 0; 9 | } 10 | .subfooter__section p { 11 | font-size: 0.9rem; 12 | } 13 | -------------------------------------------------------------------------------- /templates/breadcrumb.html.twig: -------------------------------------------------------------------------------- 1 | {# 2 | /** 3 | * @file 4 | * Theme override for a breadcrumb trail. 5 | * 6 | * Available variables: 7 | * - breadcrumb: Breadcrumb trail items. 8 | */ 9 | #} 10 | {% extends "@basecore/breadcrumb.html.twig" %} 11 | {% block subtheme_libraries %} 12 | {{ attach_library('corporateclean/breadcrumb') }} 13 | {% endblock %} 14 | 15 | 16 | -------------------------------------------------------------------------------- /config/install/block.block.corporateclean_local_actions.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | theme: 5 | - corporateclean 6 | id: corporateclean_local_actions 7 | theme: corporateclean 8 | region: content 9 | weight: -17 10 | provider: null 11 | plugin: local_actions_block 12 | settings: 13 | id: local_actions_block 14 | label: 'Primary admin actions' 15 | provider: core 16 | label_display: '0' 17 | visibility: {} 18 | -------------------------------------------------------------------------------- /config/install/block.block.corporateclean_page_title.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | module: 5 | - system 6 | theme: 7 | - corporateclean 8 | id: corporateclean_page_title 9 | theme: corporateclean 10 | region: hero_top 11 | weight: -7 12 | provider: null 13 | plugin: page_title_block 14 | settings: 15 | id: page_title_block 16 | label: 'Page title' 17 | provider: core 18 | label_display: '0' 19 | visibility: {} 20 | -------------------------------------------------------------------------------- /config/install/block.block.corporateclean_content.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | module: 5 | - system 6 | theme: 7 | - corporateclean 8 | id: corporateclean_content 9 | theme: corporateclean 10 | region: content 11 | weight: -15 12 | provider: null 13 | plugin: system_main_block 14 | settings: 15 | id: system_main_block 16 | label: 'Main page content' 17 | provider: system 18 | label_display: '0' 19 | visibility: {} 20 | -------------------------------------------------------------------------------- /config/install/block.block.corporateclean_local_tasks.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | theme: 5 | - corporateclean 6 | id: corporateclean_local_tasks 7 | theme: corporateclean 8 | region: content 9 | weight: -16 10 | provider: null 11 | plugin: local_tasks_block 12 | settings: 13 | id: local_tasks_block 14 | label: Tabs 15 | provider: core 16 | label_display: '0' 17 | primary: true 18 | secondary: true 19 | visibility: {} 20 | -------------------------------------------------------------------------------- /config/install/block.block.corporateclean_breadcrumbs.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | module: 5 | - system 6 | theme: 7 | - corporateclean 8 | id: corporateclean_breadcrumbs 9 | theme: corporateclean 10 | region: hero_top 11 | weight: -14 12 | provider: null 13 | plugin: system_breadcrumb_block 14 | settings: 15 | id: system_breadcrumb_block 16 | label: Breadcrumbs 17 | provider: system 18 | label_display: '0' 19 | visibility: {} 20 | -------------------------------------------------------------------------------- /config/install/block.block.corporateclean_messages.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | module: 5 | - system 6 | theme: 7 | - corporateclean 8 | id: corporateclean_messages 9 | theme: corporateclean 10 | region: system_messages 11 | weight: -16 12 | provider: null 13 | plugin: system_messages_block 14 | settings: 15 | id: system_messages_block 16 | label: 'Status messages' 17 | provider: system 18 | label_display: '0' 19 | visibility: {} 20 | -------------------------------------------------------------------------------- /config/install/block.block.corporateclean_branding.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | module: 5 | - system 6 | theme: 7 | - corporateclean 8 | id: corporateclean_branding 9 | theme: corporateclean 10 | region: header_first 11 | weight: -6 12 | provider: null 13 | plugin: system_branding_block 14 | settings: 15 | id: system_branding_block 16 | label: 'Site branding' 17 | provider: system 18 | label_display: '0' 19 | use_site_logo: true 20 | use_site_name: true 21 | use_site_slogan: true 22 | visibility: {} 23 | -------------------------------------------------------------------------------- /config/optional/block.block.corporateclean_footer.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | config: 5 | - system.menu.footer 6 | module: 7 | - system 8 | theme: 9 | - corporateclean 10 | id: corporateclean_footer 11 | theme: corporateclean 12 | region: footer_second 13 | weight: -8 14 | provider: null 15 | plugin: 'system_menu_block:footer' 16 | settings: 17 | id: 'system_menu_block:footer' 18 | label: Legal 19 | label_display: visible 20 | provider: system 21 | level: 1 22 | depth: 0 23 | expand_all_items: false 24 | visibility: {} 25 | -------------------------------------------------------------------------------- /config/install/block.block.corporateclean_main_menu.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | config: 5 | - system.menu.main 6 | module: 7 | - system 8 | theme: 9 | - corporateclean 10 | id: corporateclean_main_menu 11 | theme: corporateclean 12 | region: header 13 | weight: -22 14 | provider: null 15 | plugin: 'system_menu_block:main' 16 | settings: 17 | id: 'system_menu_block:main' 18 | label: 'Main navigation' 19 | label_display: '0' 20 | provider: system 21 | level: 1 22 | depth: 1 23 | expand_all_items: false 24 | visibility: {} 25 | -------------------------------------------------------------------------------- /config/install/block.block.corporateclean_tools.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | config: 5 | - system.menu.tools 6 | module: 7 | - system 8 | theme: 9 | - corporateclean 10 | id: corporateclean_tools 11 | theme: corporateclean 12 | region: hidden_blocks_collection 13 | weight: -23 14 | provider: null 15 | plugin: 'system_menu_block:tools' 16 | settings: 17 | id: 'system_menu_block:tools' 18 | label: Tools 19 | provider: system 20 | label_display: visible 21 | level: 1 22 | depth: 0 23 | expand_all_items: false 24 | visibility: {} 25 | -------------------------------------------------------------------------------- /config/install/block.block.corporateclean_account_menu.yml: -------------------------------------------------------------------------------- 1 | langcode: en 2 | status: true 3 | dependencies: 4 | config: 5 | - system.menu.account 6 | module: 7 | - system 8 | theme: 9 | - corporateclean 10 | id: corporateclean_account_menu 11 | theme: corporateclean 12 | region: header_top_highlighted_second 13 | weight: -41 14 | provider: null 15 | plugin: 'system_menu_block:account' 16 | settings: 17 | id: 'system_menu_block:account' 18 | label: 'User account menu' 19 | provider: system 20 | label_display: '0' 21 | level: 1 22 | depth: 1 23 | expand_all_items: false 24 | visibility: {} 25 | -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- 1 | SRC_REPO = . 2 | TARGET_REPO = ../corporateclean/ 3 | RSYNC_OPTIONS = -av --delete --exclude='.git' --exclude='Makefile' 4 | 5 | .PHONY: help sync 6 | 7 | help: 8 | @echo "Available Makefile tasks:" 9 | @echo " sync - Synchronize files from corporateclean-src/ to corporateplus/" 10 | @echo " help - Show this help message" 11 | 12 | sync: 13 | @echo "Syncing from $(SRC_REPO) to $(TARGET_REPO)" 14 | @read -p "Are you sure you want to proceed? (y/yes): " confirm; \ 15 | if [ "$$confirm" = "y" ] || [ "$$confirm" = "yes" ]; then \ 16 | rsync $(RSYNC_OPTIONS) $(SRC_REPO)/ $(TARGET_REPO); \ 17 | else \ 18 | echo "Sync canceled."; \ 19 | fi -------------------------------------------------------------------------------- /css/components/menu.css: -------------------------------------------------------------------------------- 1 | .header-container ul.menu > li > a, 2 | .header-container ul.menu > li > span { 3 | color: rgba(44, 53, 57, 0.65); 4 | font-weight: 500; 5 | text-transform: uppercase; 6 | letter-spacing: 1px; 7 | font-size: 0.9rem; 8 | padding: 0.5rem; 9 | } 10 | .header-container ul.menu > li > a:hover, 11 | .header-container ul.menu > li > span:hover { 12 | color: var(--mt-color-primary); 13 | } 14 | .header-container ul.menu a.is-active { 15 | color: var(--mt-color-primary); 16 | } 17 | .footer__section ul.menu li a, 18 | .footer__section ul.menu li > span { 19 | padding: 0; 20 | font-size: 1rem; 21 | margin: 0.8rem 0; 22 | } 23 | -------------------------------------------------------------------------------- /css/components/extra-home.css: -------------------------------------------------------------------------------- 1 | .hero h1 { 2 | font-size: 3.5rem; 3 | font-weight: 700; 4 | letter-spacing: -1px; 5 | line-height: 1.2; 6 | } 7 | .hero p { 8 | font-size: 1.25rem; 9 | font-weight: 300; 10 | max-width: 600px; 11 | } 12 | .service-card { 13 | padding: 0 2rem; 14 | border: none; 15 | transition: transform 0.15s ease-in-out; 16 | } 17 | .service-card:hover { 18 | transform: translateY(-2%); 19 | } 20 | .service-card h3 { 21 | font-size: 1.75rem; 22 | font-weight: 800; 23 | margin-bottom: 0.5rem; 24 | margin-top: 0; 25 | } 26 | .form-control { 27 | border-radius: 4px; 28 | } 29 | @media (max-width: 768px) { 30 | .hero h1 { 31 | font-size: 2.5rem; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /corporateclean.theme: -------------------------------------------------------------------------------- 1 | 'select', 19 | '#title' => t('Color Schemes'), 20 | '#description' => t('From the drop-down menu, select the color scheme you prefer.'), 21 | '#default_value' => theme_get_setting('color_scheme'), 22 | '#options' => array( 23 | 'blue' => t('Blue'), 24 | 'gray' => t('Gray'), 25 | 'green' => t('Green'), 26 | 'orange' => t('Orange'), 27 | 'pink' => t('Pink'), 28 | 'purple' => t('Purple'), 29 | 'red' => t('Red'), 30 | 'turquoise' => t('Turquoise'), 31 | 'yellow' => t('Yellow'), 32 | 'local' => t('Local'), 33 | ), 34 | ); 35 | 36 | } 37 | -------------------------------------------------------------------------------- /logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /css/theme/menu-shapes.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Styles for Corporate Clean's buttons. 4 | */ 5 | .mt-style-sharp .sf-menu ul { 6 | -webkit-border-radius: 0; 7 | -moz-border-radius: 0; 8 | border-radius: 0; 9 | } 10 | .mt-style-oval .sf-menu ul { 11 | -webkit-border-radius: 12px; 12 | -moz-border-radius: 12px; 13 | border-radius: 12px; 14 | } 15 | .mt-style-oval .sf-accordion ul > li:first-child > a, 16 | .mt-style-oval .sf-accordion ul > li:last-child > a, 17 | .mt-style-oval .sf-accordion ul { 18 | -webkit-border-radius: 0; 19 | -moz-border-radius: 0; 20 | border-radius: 0; 21 | } 22 | .mt-style-rounded .sf-menu ul { 23 | -webkit-border-radius: 4px; 24 | -moz-border-radius: 4px; 25 | border-radius: 4px; 26 | } 27 | .mt-style-menu-sharp .sf-menu ul { 28 | -webkit-border-radius: 0; 29 | -moz-border-radius: 0; 30 | border-radius: 0; 31 | } 32 | .mt-style-menu-oval .sf-menu ul { 33 | -webkit-border-radius: 12px; 34 | -moz-border-radius: 12px; 35 | border-radius: 12px; 36 | } 37 | .mt-style-menu-rounded .sf-menu ul { 38 | -webkit-border-radius: 4px; 39 | -moz-border-radius: 4px; 40 | border-radius: 4px; 41 | } 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CorporateClean Theme 2 | 3 | CorporateClean is a responsive and modern theme for Drupal CMS. It is designed to provide a clean and professional look for corporate websites. 4 | 5 | ## Features 6 | 7 | - Fully responsive design 8 | - Customizable color schemes 9 | - Multiple layout options 10 | 11 | ## Installation 12 | 13 | 1. Download the CorporateClean theme from the Drupal repository. 14 | 2. Extract the downloaded file and place it in the `themes/contrib` directory of your Drupal installation. 15 | 3. Navigate to the Appearance section in your Drupal admin panel. 16 | 4. Enable the CorporateClean theme. 17 | 5. Customize the theme settings as per your requirements. 18 | 19 | ## Customization 20 | 21 | To customize the CorporateClean theme, you can: 22 | 23 | - Modify the local-\* CSS files located in the `css` directory. 24 | - Override the template files in the `templates` directory. 25 | - Use the theme settings page in the Drupal admin panel to change colors, fonts, and other options. 26 | 27 | ## Dependecies 28 | 29 | CorporateClean is a sub-theme of the BaseCore theme. 30 | 31 | For support and questions, please open an issue in the repository. 32 | -------------------------------------------------------------------------------- /css/theme/image-shapes.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Styles for Corporate Clean's images. 4 | */ 5 | /*global styles*/ 6 | .mt-style-sharp, 7 | :root .mt-style-image-sharp { 8 | --mt-image-border-radius: 0; 9 | } 10 | .mt-style-oval, 11 | :root .mt-style-image-oval { 12 | --mt-image-border-radius: 10px; 13 | } 14 | .mt-style-rounded, 15 | :root .mt-style-image-rounded { 16 | --mt-image-border-radius: 4px; 17 | } 18 | 19 | /*global styles*/ 20 | img, 21 | .overlay, 22 | .in-page-images-carousel .slides li a:after, 23 | .video-item > a:before, 24 | .slider-revolution-video-gallery .tp-revslider-slidesli, 25 | .tp-thumbs .tp-thumb-image, 26 | .tp-thumbs .tp-thumb-over, 27 | .field--name-field-mt-hft-feature .field--name-field-mt-highlight-image, 28 | .field--name-field-mt-hft-feature .field--name-field-mt-highlight-image img, 29 | .field--name-field-mt-hft-feature .field--name-field-mt-highlight-image .overlay, 30 | .node--view-mode-mt-teaser-tile-image, 31 | .node--view-mode-mt-featured-teaser { 32 | -webkit-border-radius: var(--mt-image-border-radius); 33 | -moz-border-radius: var(--mt-image-border-radius); 34 | border-radius: var(--mt-image-border-radius); 35 | } 36 | .feature-item__image .overlay-inner { 37 | border-bottom-right-radius: var(--mt-image-border-radius); 38 | border-bottom-left-radius: var(--mt-image-border-radius); 39 | } 40 | -------------------------------------------------------------------------------- /css/base/elements.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --mt-link-border: rgba(0, 0, 0, 0.4); 3 | --mt-link-border-hover: #000; 4 | } 5 | .region--dark-colored-background, 6 | .region--colored-background, 7 | .region--shade-background, 8 | .region--dark-background { 9 | --mt-link-border: rgba(255, 255, 255, 0.4); 10 | --mt-link-border-hover: #fff; 11 | } 12 | .klaro.klaro-theme-corporateclean { 13 | --klaro-link-decoration-line-hover: none; 14 | } 15 | a, 16 | a:not([class]) { 17 | text-decoration: none; 18 | } 19 | a:hover { 20 | text-decoration: none; 21 | } 22 | p a { 23 | color: inherit; 24 | text-decoration: none; 25 | position: relative; 26 | display: inline; 27 | border-bottom: 1px dotted var(--mt-link-border); 28 | background-image: linear-gradient( 29 | transparent calc(100% - 1px), 30 | var(--mt-link-border-hover) calc(100% - 1px), 31 | var(--mt-link-border-hover) 100%, 32 | transparent 100% 33 | ); 34 | background-repeat: no-repeat; 35 | background-size: 0% 100%; 36 | background-position: 50% 100%; 37 | padding-bottom: 1px; 38 | transition: background-size 0.3s ease, border-bottom 0.2s ease; 39 | } 40 | p a:hover { 41 | color: inherit; 42 | background-size: 100% 100%; 43 | border-bottom-color: transparent; 44 | } 45 | .klaro.klaro-theme-corporateclean p a:hover { 46 | background-image: linear-gradient( 47 | transparent calc(100% - 1px), 48 | var(--mt-link-border-hover) calc(100% - 0px), 49 | var(--mt-link-border-hover) 100%, 50 | transparent 100% 51 | ); 52 | } 53 | .footer__section h4.title, 54 | .footer__section h2.title, 55 | .footer__section nav > h2, 56 | .footer__section .block-search > h2 { 57 | font-size: 1.2rem; 58 | margin-bottom: 1.5rem; 59 | font-weight: 500; 60 | } 61 | -------------------------------------------------------------------------------- /corporateclean.info.yml: -------------------------------------------------------------------------------- 1 | name: Corporate Clean 2 | type: theme 3 | base theme: basecore 4 | description: A flexible theme with a responsive, mobile-first layout. 5 | core_version_requirement: ^10 || ^11 6 | libraries: 7 | - corporateclean/global-styling 8 | - corporateclean/local-stylesheets 9 | regions: 10 | slideout: 'Slideout' 11 | header_top_highlighted_first: 'Header Top Highlighted First' 12 | header_top_highlighted_second: 'Header Top Highlighted Second' 13 | header_top_first: 'Header Top First' 14 | header_top_second: 'Header Top Second' 15 | header_first: 'Header First' 16 | header: 'Header Second' 17 | header_third: 'Header Third' 18 | banner: 'Banner' 19 | hero_top: 'Hero Top' 20 | hero_first: 'Hero First' 21 | hero_second: 'Hero Second' 22 | hero_third: 'Hero Third' 23 | system_messages: 'System Messages' 24 | content_top: 'Content Top' 25 | content_top_highlighted: 'Content Top Highlighted' 26 | content: 'Content' 27 | sidebar_first: 'Sidebar First' 28 | sidebar_second: 'Sidebar Second' 29 | commerce_product_sidebar: 'Commerce Product Sidebar' 30 | content_bottom_first: 'Content Bottom First' 31 | content_bottom_second: 'Content Bottom Second' 32 | content_bottom_highlighted: 'Content Bottom Highlighted' 33 | featured_top: 'Featured Top' 34 | featured: 'Featured' 35 | featured_bottom: 'Featured Bottom' 36 | sub_featured: 'Sub Featured' 37 | highlighted_top: 'Highlighted Top' 38 | highlighted: 'Highlighted' 39 | footer_top_first: 'Footer Top First' 40 | footer_top_second: 'Footer Top Second' 41 | footer_first: 'Footer First' 42 | footer_second: 'Footer Second' 43 | footer_third: 'Footer Third' 44 | footer_fourth: 'Footer Fourth' 45 | footer_fifth: 'Footer Fifth' 46 | footer_bottom_first: 'Footer Bottom First' 47 | footer_bottom_second: 'Footer Bottom Second' 48 | footer_bottom_third: 'Footer Bottom Third' 49 | footer_bottom_fourth: 'Footer Bottom Fourth' 50 | sub_footer_top_first: 'Subfooter Top First' 51 | sub_footer_top_second: 'Subfooter Top Second' 52 | sub_footer_top_third: 'Subfooter Top Third' 53 | sub_footer_first: 'Subfooter First' 54 | footer: 'Subfooter Second' 55 | sticky_footer: 'Sticky Footer' 56 | mobile_menu_widget: 'Mobile Menu Widget' 57 | hidden_blocks_collection: 'Hidden blocks collection' 58 | -------------------------------------------------------------------------------- /css/components/buttons.css: -------------------------------------------------------------------------------- 1 | .klaro.klaro-theme-corporateclean { 2 | --klaro-button-border: solid none; 3 | --klaro-button-padding: 1rem 2rem; 4 | --klaro-button-font-weight: 400; 5 | --klaro-button-border-hover: none; 6 | } 7 | a.mt-button, 8 | .mt-button > a, 9 | button.mt-button, 10 | input[type='submit'], 11 | input[type='reset'], 12 | input[type='button'], 13 | .btn { 14 | padding: 1rem 2rem; 15 | text-transform: uppercase; 16 | letter-spacing: 1px; 17 | transition: all 0.25s ease-in-out; 18 | font-weight: 400; 19 | } 20 | .cm-btn { 21 | text-transform: uppercase; 22 | letter-spacing: 1px; 23 | } 24 | .cm-btn:hover { 25 | transform: scale(0.98); 26 | } 27 | a.mt-button:hover, 28 | .mt-button > a:hover, 29 | button.mt-button:hover, 30 | .btn:hover { 31 | padding: 1rem 2rem; 32 | } 33 | a.mt-button:hover, 34 | .mt-button > a:hover, 35 | .btn:hover, 36 | button.mt-button:hover, 37 | input[type='submit']:hover, 38 | input[type='reset']:hover, 39 | input[type='button']:hover { 40 | color: var(--mt-color-primary-contrast); 41 | transform: scale(0.98); 42 | } 43 | a.mt-button:after, 44 | .mt-button > a:after, 45 | button.mt-button:after { 46 | opacity: 0; 47 | content: ''; 48 | } 49 | a.mt-button.mt-button--outline, 50 | .mt-button.mt-button--outline > a, 51 | input[type='submit'].mt-button--outline, 52 | input[type='reset'].mt-button--outline, 53 | input[type='button'].mt-button--outline { 54 | padding: 1rem 2rem; 55 | } 56 | a.mt-button.mt-button--external-link, 57 | .mt-button.mt-button.mt-button--external-link > a, 58 | button.mt-button.mt-button.mt-button--external-link { 59 | position: relative; 60 | padding-left: 24px; 61 | padding-right: 24px; 62 | } 63 | a.mt-button.mt-button--link, 64 | .mt-button.mt-button--link > a, 65 | button.mt-button.mt-button--link, 66 | a.button { 67 | text-transform: uppercase; 68 | letter-spacing: 1px; 69 | font-weight: 400; 70 | line-height: 1.125; 71 | color: inherit; 72 | text-decoration: none; 73 | position: relative; 74 | background-image: linear-gradient( 75 | transparent calc(100% - 1px), 76 | var(--mt-link-border-hover) calc(100% - 1px), 77 | var(--mt-link-border-hover) 100%, 78 | transparent 100% 79 | ); 80 | background-repeat: no-repeat; 81 | background-size: 0% 100%; 82 | background-position: 50% 100%; 83 | transition: background-size 0.3s ease, border-bottom 0.2s ease; 84 | padding-top: 1rem; 85 | padding-bottom: 1rem; 86 | } 87 | a.mt-button.mt-button--link:hover, 88 | .mt-button.mt-button--link > a:hover, 89 | button.mt-button.mt-button--link:hover, 90 | a.button:hover { 91 | text-decoration: none; 92 | background-color: transparent; 93 | color: inherit; 94 | background-size: calc(100% - 48px) 100%; 95 | transform: none; 96 | } 97 | -------------------------------------------------------------------------------- /css/theme/button-shapes.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Styles for Corporate Clean's buttons. 4 | */ 5 | .mt-style-sharp, 6 | :root .mt-style-button-sharp { 7 | --mt-button-border-radius: 0; 8 | --mt-button-collapsible-border-radius: 0; 9 | --mt-button-card-border-radius: 0; 10 | --mt-button-icon-border-radius: 0; 11 | --mt-button-overlay-icon-border-radius: 0; 12 | --mt-button-to-top-border-radius: 0; 13 | } 14 | .mt-style-oval, 15 | :root .mt-style-button-oval { 16 | --mt-button-border-radius: 50px; 17 | --mt-button-collapsible-border-radius: 4px 4px 0 0; 18 | --mt-button-card-border-radius: 25px; 19 | --mt-button-icon-border-radius: 4px; 20 | --mt-button-overlay-icon-border-radius: 100px; 21 | --mt-button-to-top-border-radius: 100px; 22 | } 23 | .mt-style-rounded, 24 | :root .mt-style-button-rounded { 25 | --mt-button-border-radius: 0.25rem; 26 | --mt-button-collapsible-border-radius: 0.25rem 0.25rem 0 0; 27 | --mt-button-card-border-radius: 0.25rem; 28 | --mt-button-icon-border-radius: 0.25rem; 29 | --mt-button-overlay-icon-border-radius: 100px; 30 | --mt-button-to-top-border-radius: 0.25rem; 31 | } 32 | 33 | /*global styles*/ 34 | a.mt-button, 35 | .mt-button > a, 36 | button.mt-button, 37 | input[type='submit'], 38 | input[type='reset'], 39 | input[type='button'], 40 | .mt-count-down__button, 41 | .col-12 .view > .more-link a, 42 | .product-content .flag-anon-message > span, 43 | .menu.cta-active > li:last-child > a, 44 | .mt-collapse-button, 45 | a.mt-button:before, 46 | .mt-button > a:before, 47 | button.mt-button:before, 48 | .menu.cta-active > li:last-child > a:before { 49 | -webkit-border-radius: var(--mt-button-border-radius); 50 | -moz-border-radius: var(--mt-button-border-radius); 51 | border-radius: var(--mt-button-border-radius); 52 | } 53 | .mt-collapse .card { 54 | -webkit-border-radius: var(--mt-button-card-border-radius); 55 | -moz-border-radius: var(--mt-button-card-border-radius); 56 | border-radius: var(--mt-button-card-border-radius); 57 | } 58 | .collapsible-sticky-footer-trigger .mt-button, 59 | .collapsible-block__trigger a { 60 | -webkit-border-radius: var(--mt-button-collapsible-border-radius); 61 | -moz-border-radius: var(--mt-button-collapsible-border-radius); 62 | border-radius: var(--mt-button-collapsible-border-radius); 63 | } 64 | .overlay-icon { 65 | -webkit-border-radius: var(--mt-button-overlay-icon-border-radius); 66 | -moz-border-radius: var(--mt-button-overlay-icon-border-radius); 67 | border-radius: var(--mt-button-overlay-icon-border-radius); 68 | } 69 | ul.icons-list.icons-list--bordered li a { 70 | -webkit-border-radius: var(--mt-button-icon-border-radius); 71 | -moz-border-radius: var(--mt-button-icon-border-radius); 72 | border-radius: var(--mt-button-icon-border-radius); 73 | } 74 | .to-top { 75 | -webkit-border-radius: var(--mt-button-to-top-border-radius); 76 | -moz-border-radius: var(--mt-button-to-top-border-radius); 77 | border-radius: var(--mt-button-to-top-border-radius); 78 | } 79 | -------------------------------------------------------------------------------- /css/theme/utility.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * utility classes for Corporate Clean's . 4 | */ 5 | .mt-style-sharp, 6 | :root .mt-style-custom-sharp { 7 | --mt-custom-element-border-radius: 0px; 8 | --mt-custom-element-border-radius-large: 0px; 9 | } 10 | .mt-style-oval, 11 | :root .mt-style-custom-oval { 12 | --mt-custom-element-border-radius: 20px; 13 | --mt-custom-element-border-radius-large: 100px; 14 | } 15 | .mt-style-rounded, 16 | :root .mt-style-custom-rounded { 17 | --mt-custom-element-border-radius: 0.25rem; 18 | --mt-custom-element-border-radius-large: 15px; 19 | } 20 | 21 | /*global styles*/ 22 | .mt-style-custom-all { 23 | -webkit-border-radius: var(--mt-custom-element-border-radius); 24 | -moz-border-radius: var(--mt-custom-element-border-radius); 25 | border-radius: var(--mt-custom-element-border-radius); 26 | } 27 | .mt-style-custom-tl { 28 | -webkit-border-top-left-radius: var(--mt-custom-element-border-radius); 29 | -moz-border-top-left-radius: var(--mt-custom-element-border-radius); 30 | border-top-left-radius: var(--mt-custom-element-border-radius); 31 | } 32 | .mt-style-custom-tr { 33 | -webkit-border-top-right-radius: var(--mt-custom-element-border-radius); 34 | -moz-border-top-right-radius: var(--mt-custom-element-border-radius); 35 | border-top-right-radius: var(--mt-custom-element-border-radius); 36 | } 37 | .mt-style-custom-bl { 38 | -webkit-border-bottom-left-radius: var(--mt-custom-element-border-radius); 39 | -moz-border-bottom-left-radius: var(--mt-custom-element-border-radius); 40 | border-bottom-left-radius: var(--mt-custom-element-border-radius); 41 | } 42 | .mt-style-custom-br { 43 | -webkit-border-bottom-right-radius: var(--mt-custom-element-border-radius); 44 | -moz-border-bottom-right-radius: var(--mt-custom-element-border-radius); 45 | border-bottom-right-radius: var(--mt-custom-element-border-radius); 46 | } 47 | .mt-style-custom-all-large { 48 | -webkit-border-radius: var(--mt-custom-element-border-radius-large); 49 | -moz-border-radius: var(--mt-custom-element-border-radius-large); 50 | border-radius: var(--mt-custom-element-border-radius-large); 51 | } 52 | .mt-style-custom-tl-large { 53 | -webkit-border-top-left-radius: var(--mt-custom-element-border-radius-large); 54 | -moz-border-top-left-radius: var(--mt-custom-element-border-radius-large); 55 | border-top-left-radius: var(--mt-custom-element-border-radius-large); 56 | } 57 | .mt-style-custom-tr-large { 58 | -webkit-border-top-right-radius: var(--mt-custom-element-border-radius-large); 59 | -moz-border-top-right-radius: var(--mt-custom-element-border-radius-large); 60 | border-top-right-radius: var(--mt-custom-element-border-radius-large); 61 | } 62 | .mt-style-custom-bl-large { 63 | -webkit-border-bottom-left-radius: var( 64 | --mt-custom-element-border-radius-large 65 | ); 66 | -moz-border-bottom-left-radius: var(--mt-custom-element-border-radius-large); 67 | border-bottom-left-radius: var(--mt-custom-element-border-radius-large); 68 | } 69 | .mt-style-custom-br-large { 70 | -webkit-border-bottom-right-radius: var( 71 | --mt-custom-element-border-radius-large 72 | ); 73 | -moz-border-bottom-right-radius: var(--mt-custom-element-border-radius-large); 74 | border-bottom-right-radius: var(--mt-custom-element-border-radius-large); 75 | } 76 | -------------------------------------------------------------------------------- /corporateclean.libraries.yml: -------------------------------------------------------------------------------- 1 | # Main theme library. 2 | global-styling: 3 | version: VERSION 4 | css: 5 | base: 6 | css/base/elements.css: { weight: 1 } 7 | component: 8 | css/components/extra-home.css: {} 9 | css/components/buttons.css: {} 10 | css/components/site-branding.css: {} 11 | css/components/menu.css: {} 12 | layout: 13 | css/layout/layout.css: {} 14 | theme: 15 | css/theme/print.css: { media: print } 16 | 17 | local-stylesheets: 18 | version: VERSION 19 | css: 20 | base: 21 | css/base/local-base.css: { weight: 100 } 22 | component: 23 | css/components/local-components.css: { weight: 100 } 24 | theme: 25 | css/theme/button-shapes.css: { weight: 100 } 26 | css/theme/form-shapes.css: { weight: 100 } 27 | css/theme/utility.css: { weight: 100 } 28 | css/theme/image-shapes.css: { weight: 100 } 29 | css/theme/local-theme.css: { weight: 150 } 30 | 31 | node-view-mode-card: 32 | version: VERSION 33 | css: 34 | component: 35 | css/components/node-view-mode-card.css: {} 36 | 37 | breadcrumb: 38 | version: VERSION 39 | css: 40 | component: 41 | css/components/breadcrumb.css: {} 42 | 43 | ##################### 44 | # Color Schemes # 45 | ##################### 46 | base-color: 47 | version: VERSION 48 | css: 49 | theme: 50 | css/theme/base-color.css: { weight: 90 } 51 | 52 | color-blue: 53 | version: VERSION 54 | css: 55 | theme: 56 | css/theme/color-blue.css: { weight: 100 } 57 | dependencies: 58 | - corporateclean/base-color 59 | - basecore/base-color 60 | 61 | color-gray: 62 | version: VERSION 63 | css: 64 | theme: 65 | css/theme/color-gray.css: { weight: 100 } 66 | dependencies: 67 | - corporateclean/base-color 68 | - basecore/base-color 69 | 70 | color-green: 71 | version: VERSION 72 | css: 73 | theme: 74 | css/theme/color-green.css: { weight: 100 } 75 | dependencies: 76 | - corporateclean/base-color 77 | - basecore/base-color 78 | 79 | color-orange: 80 | version: VERSION 81 | css: 82 | theme: 83 | css/theme/color-orange.css: { weight: 100 } 84 | dependencies: 85 | - corporateclean/base-color 86 | - basecore/base-color 87 | 88 | color-pink: 89 | version: VERSION 90 | css: 91 | theme: 92 | css/theme/color-pink.css: { weight: 100 } 93 | dependencies: 94 | - corporateclean/base-color 95 | - basecore/base-color 96 | 97 | color-purple: 98 | version: VERSION 99 | css: 100 | theme: 101 | css/theme/color-purple.css: { weight: 100 } 102 | dependencies: 103 | - corporateclean/base-color 104 | - basecore/base-color 105 | 106 | color-red: 107 | version: VERSION 108 | css: 109 | theme: 110 | css/theme/color-red.css: { weight: 100 } 111 | dependencies: 112 | - corporateclean/base-color 113 | - basecore/base-color 114 | 115 | color-turquoise: 116 | version: VERSION 117 | css: 118 | theme: 119 | css/theme/color-turquoise.css: { weight: 100 } 120 | dependencies: 121 | - corporateclean/base-color 122 | - basecore/base-color 123 | 124 | color-yellow: 125 | version: VERSION 126 | css: 127 | theme: 128 | css/theme/color-yellow.css: { weight: 100 } 129 | dependencies: 130 | - corporateclean/base-color 131 | - basecore/base-color 132 | 133 | color-local: 134 | version: VERSION 135 | css: 136 | theme: 137 | css/theme/color-local.css: { weight: 100 } 138 | dependencies: 139 | - corporateclean/base-color 140 | - basecore/base-color 141 | -------------------------------------------------------------------------------- /css/theme/color-red.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Red color styling for Directory+ for Drupal 8. 4 | */ 5 | :root { 6 | /*base color*/ 7 | --mt-color-base: #555; 8 | --mt-color-base-dark: #323232; 9 | --mt-color-base-light: #555; 10 | --mt-color-base-contrast: #F6F9FC; 11 | --mt-color-base-value: 50, 50, 50; 12 | --mt-color-base-contrast-value: 246, 249, 252; 13 | 14 | /*primary color*/ 15 | --mt-color-primary: hsl(0, 65%, 40%); 16 | --mt-color-primary-dark: hsl(0, 65%, 30%); 17 | --mt-color-primary-light: hsl(0, 65%, 45%); 18 | --mt-color-primary-contrast: var(--mt-color-base-contrast); 19 | --mt-color-primary-value: 0, 65%, 40%; 20 | --mt-color-primary-dark-value: 0, 65%, 30%; 21 | --mt-color-primary-light-value: 0, 65%, 45%; 22 | --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); 23 | --mt-color-primary-filter: invert(15%) sepia(70%) saturate(5183%) hue-rotate(354deg) brightness(73%) contrast(81%); 24 | 25 | /*accent color*/ 26 | --mt-color-accent: #eee; 27 | --mt-color-accent-dark: #f8f9fb; 28 | --mt-color-accent-light: #f8f9fb; 29 | --mt-color-accent-contrast: var(--mt-color-base); 30 | --mt-color-accent-contrast-value: var(--mt-color-base-value); 31 | 32 | /*secondary color*/ 33 | --mt-color-secondary: hsl(0, 65%, 40%); 34 | --mt-color-secondary-dark: hsl(0, 65%, 30%); 35 | --mt-color-secondary-light: hsl(0, 65%, 80%); 36 | --mt-color-secondary-contrast: var(--mt-color-base-contrast); 37 | --mt-color-secondary-value: 0, 65%, 40%; 38 | 39 | /*tint background*/ 40 | --mt-color-tint: #f6f6f6; 41 | --mt-color-tint-contrast: var(--mt-color-base); 42 | --mt-color-tint-contrast-value: var(--mt-color-base-value); 43 | 44 | /*shade background*/ 45 | --mt-color-shade: hsl(225, 6%, 13%); 46 | --mt-color-shade-contrast: var(--mt-color-base-contrast); 47 | --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); 48 | 49 | /*dark colored background*/ 50 | --mt-color-dark-colored: hsl(0, 65%, 30%); 51 | --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); 52 | --mt-color-dark-colored-value: 0, 65%, 30%; 53 | --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); 54 | 55 | /*colored background*/ 56 | --mt-color-colored: var(--mt-color-primary); 57 | --mt-color-colored-light: var(--mt-color-primary-light); 58 | --mt-color-colored-contrast: var(--mt-color-primary-contrast); 59 | --mt-color-colored-value: var(--mt-color-primary-value); 60 | --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); 61 | 62 | /*bright background*/ 63 | --mt-color-bright: #ffffff; 64 | --mt-color-bright-contrast: var(--mt-color-base); 65 | --mt-color-bright-value: 255, 255, 255; 66 | --mt-color-bright-contrast-value: var(--mt-color-base-value); 67 | 68 | /*dark background*/ 69 | --mt-color-dark: #000000; 70 | --mt-color-dark-contrast: var(--mt-color-base-contrast); 71 | --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); 72 | 73 | /*pattern background*/ 74 | --mt-color-pattern: #ffffff; 75 | --mt-color-pattern-contrast: var(--mt-color-base); 76 | --mt-color-pattern-contrast-value: var(--mt-color-base-value); 77 | 78 | /*default background*/ 79 | --mt-color-default: #ffffff; 80 | --mt-color-default-light: #ffffff; 81 | --mt-color-default-contrast: var(--mt-color-base); 82 | --mt-color-default-value: 252, 242, 242; 83 | --mt-color-default-contrast-value: var(--mt-color-base-value); 84 | 85 | /*success*/ 86 | --mt-color-success: #3E9300; 87 | --mt-color-success-dark: #547f1f; 88 | --mt-color-success-contrast: #ffffff; 89 | 90 | /*danger*/ 91 | --mt-color-danger: #CC0000; 92 | --mt-color-danger-dark: #980a00; 93 | --mt-color-danger-contrast: #ffffff; 94 | 95 | /*warning*/ 96 | --mt-color-warning: #EA9900; 97 | --mt-color-warning-dark: #e2630b; 98 | --mt-color-warning-contrast: #ffffff; 99 | 100 | /*forms*/ 101 | --mt-form-border: rgba(var(--mt-color-base-value), 0.2); 102 | --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); 103 | --mt-form-border-focus: var(--mt-color-primary); 104 | --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); 105 | --mt-form-color: var(--mt-color-base); 106 | --mt-form-color-contrast: var(--mt-color-base-contrast); 107 | --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); 108 | --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.5); 109 | --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.5); 110 | --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); 111 | } 112 | -------------------------------------------------------------------------------- /css/theme/color-yellow.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Yellow color styling for Corporate Clean. 4 | */ 5 | :root { 6 | /*base color*/ 7 | --mt-color-base: #555; 8 | --mt-color-base-dark: #323232; 9 | --mt-color-base-light: #555; 10 | --mt-color-base-contrast: #F6F9FC; 11 | --mt-color-base-value: 50, 50, 50; 12 | --mt-color-base-contrast-value: 246, 249, 252; 13 | 14 | /*primary color*/ 15 | --mt-color-primary: #977202; 16 | --mt-color-primary-dark: hsl(45, 97%, 25%); 17 | --mt-color-primary-light: hsl(45, 97%, 35%); 18 | --mt-color-primary-contrast: var(--mt-color-base-contrast); 19 | --mt-color-primary-value: 45, 97%, 30%; 20 | --mt-color-primary-dark-value: 45, 97%, 25%; 21 | --mt-color-primary-light-value: 45, 97%, 35%; 22 | --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); 23 | --mt-color-primary-filter: invert(38%) sepia(99%) saturate(538%) hue-rotate(12deg) brightness(94%) contrast(98%); 24 | 25 | /*accent color*/ 26 | --mt-color-accent: #eee; 27 | --mt-color-accent-dark: #f8f9fb; 28 | --mt-color-accent-light: #f8f9fb; 29 | --mt-color-accent-contrast: var(--mt-color-base); 30 | --mt-color-accent-contrast-value: var(--mt-color-base-value); 31 | 32 | /*secondary color*/ 33 | --mt-color-secondary: hsl(45, 97%, 30%); 34 | --mt-color-secondary-dark: hsl(45, 97%, 25%); 35 | --mt-color-secondary-light: hsl(45, 97%, 80%); 36 | --mt-color-secondary-contrast: var(--mt-color-base-contrast); 37 | --mt-color-secondary-value: 45, 97%, 30%; 38 | 39 | /*tint background*/ 40 | --mt-color-tint: #f6f6f6; 41 | --mt-color-tint-contrast: var(--mt-color-base); 42 | --mt-color-tint-contrast-value: var(--mt-color-base-value); 43 | 44 | /*shade background*/ 45 | --mt-color-shade: hsl(225, 6%, 13%); 46 | --mt-color-shade-contrast: var(--mt-color-base-contrast); 47 | --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); 48 | 49 | /*dark colored background*/ 50 | --mt-color-dark-colored: hsl(45, 97%, 25%); 51 | --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); 52 | --mt-color-dark-colored-value: 45, 97%, 25%; 53 | --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); 54 | 55 | /*colored background*/ 56 | --mt-color-colored: var(--mt-color-primary); 57 | --mt-color-colored-light: var(--mt-color-primary-light); 58 | --mt-color-colored-contrast: var(--mt-color-primary-contrast); 59 | --mt-color-colored-value: var(--mt-color-primary-value); 60 | --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); 61 | 62 | /*bright background*/ 63 | --mt-color-bright: #ffffff; 64 | --mt-color-bright-contrast: var(--mt-color-base); 65 | --mt-color-bright-value: 255, 255, 255; 66 | --mt-color-bright-contrast-value: var(--mt-color-base-value); 67 | 68 | /*dark background*/ 69 | --mt-color-dark: #000000; 70 | --mt-color-dark-contrast: var(--mt-color-base-contrast); 71 | --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); 72 | 73 | /*pattern background*/ 74 | --mt-color-pattern: #ffffff; 75 | --mt-color-pattern-contrast: var(--mt-color-base); 76 | --mt-color-pattern-contrast-value: var(--mt-color-base-value); 77 | 78 | /*default background*/ 79 | --mt-color-default: #ffffff; 80 | --mt-color-default-light: #ffffff; 81 | --mt-color-default-contrast: var(--mt-color-base); 82 | --mt-color-default-value: 255, 251, 240; 83 | --mt-color-default-contrast-value: var(--mt-color-base-value); 84 | 85 | /*success*/ 86 | --mt-color-success: #3E9300; 87 | --mt-color-success-dark: #547f1f; 88 | --mt-color-success-contrast: #ffffff; 89 | 90 | /*danger*/ 91 | --mt-color-danger: #CC0000; 92 | --mt-color-danger-dark: #980a00; 93 | --mt-color-danger-contrast: #ffffff; 94 | 95 | /*warning*/ 96 | --mt-color-warning: #EA9900; 97 | --mt-color-warning-dark: #e2630b; 98 | --mt-color-warning-contrast: #ffffff; 99 | 100 | /*forms*/ 101 | --mt-form-border: rgba(var(--mt-color-base-value), 0.2); 102 | --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); 103 | --mt-form-border-focus: var(--mt-color-primary); 104 | --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); 105 | --mt-form-color: var(--mt-color-base); 106 | --mt-form-color-contrast: var(--mt-color-base-contrast); 107 | --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); 108 | --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.5); 109 | --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.5); 110 | --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); 111 | } 112 | -------------------------------------------------------------------------------- /css/theme/color-green.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Green color styling for Corporate Clean for Drupal 8. 4 | */ 5 | :root { 6 | /*base color*/ 7 | --mt-color-base: #555; 8 | --mt-color-base-dark: #323232; 9 | --mt-color-base-light: #555; 10 | --mt-color-base-contrast: #F6F9FC; 11 | --mt-color-base-value: 50, 50, 50; 12 | --mt-color-base-contrast-value: 246, 249, 252; 13 | 14 | /*primary color*/ 15 | --mt-color-primary: #197630; 16 | --mt-color-primary-dark: hsl(135, 65%, 28%); 17 | --mt-color-primary-light: hsl(135, 65%, 35%); 18 | --mt-color-primary-contrast: var(--mt-color-base-contrast); 19 | --mt-color-primary-value: 135, 65%, 28%; 20 | --mt-color-primary-dark-value: 135, 65%, 28%; 21 | --mt-color-primary-light-value: 135, 65%, 35%; 22 | --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); 23 | --mt-color-primary-filter: invert(20%) sepia(89%) saturate(2243%) hue-rotate(129deg) brightness(93%) contrast(80%); 24 | 25 | /*accent color*/ 26 | --mt-color-accent: #eee; 27 | --mt-color-accent-dark: #f8f9fb; 28 | --mt-color-accent-light: #f8f9fb; 29 | --mt-color-accent-contrast: var(--mt-color-base); 30 | --mt-color-accent-contrast-value: var(--mt-color-base-value); 31 | 32 | /*secondary color*/ 33 | --mt-color-secondary: hsl(135, 65%, 28%); 34 | --mt-color-secondary-dark: hsl(135, 65%, 28%); 35 | --mt-color-secondary-light: hsl(135, 65%, 90%); 36 | --mt-color-secondary-contrast: var(--mt-color-base-contrast); 37 | --mt-color-secondary-value: 135, 65%, 28%; 38 | 39 | /*tint background*/ 40 | --mt-color-tint: #f6f6f6; 41 | --mt-color-tint-contrast: var(--mt-color-base); 42 | --mt-color-tint-contrast-value: var(--mt-color-base-value); 43 | 44 | /*shade background*/ 45 | --mt-color-shade: hsl(225, 6%, 13%); 46 | --mt-color-shade-contrast: var(--mt-color-base-contrast); 47 | --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); 48 | 49 | /*dark colored background*/ 50 | --mt-color-dark-colored: hsl(135, 65%, 25%); 51 | --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); 52 | --mt-color-dark-colored-value: 135, 65%, 25%; 53 | --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); 54 | 55 | /*colored background*/ 56 | --mt-color-colored: var(--mt-color-primary); 57 | --mt-color-colored-light: var(--mt-color-primary-light); 58 | --mt-color-colored-contrast: var(--mt-color-primary-contrast); 59 | --mt-color-colored-value: var(--mt-color-primary-value); 60 | --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); 61 | 62 | /*bright background*/ 63 | --mt-color-bright: #ffffff; 64 | --mt-color-bright-contrast: var(--mt-color-base); 65 | --mt-color-bright-value: 255, 255, 255; 66 | --mt-color-bright-contrast-value: var(--mt-color-base-value); 67 | 68 | /*dark background*/ 69 | --mt-color-dark: #000000; 70 | --mt-color-dark-contrast: var(--mt-color-base-contrast); 71 | --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); 72 | 73 | /*pattern background*/ 74 | --mt-color-pattern: #ffffff; 75 | --mt-color-pattern-contrast: var(--mt-color-base); 76 | --mt-color-pattern-contrast-value: var(--mt-color-base-value); 77 | 78 | /*default background*/ 79 | --mt-color-default: #ffffff; 80 | --mt-color-default-light: #ffffff; 81 | --mt-color-default-contrast: var(--mt-color-base); 82 | --mt-color-default-value: 242, 252, 245; 83 | --mt-color-default-contrast-value: var(--mt-color-base-value); 84 | 85 | /*success*/ 86 | --mt-color-success: #3E9300; 87 | --mt-color-success-dark: #547f1f; 88 | --mt-color-success-contrast: #ffffff; 89 | 90 | /*danger*/ 91 | --mt-color-danger: #CC0000; 92 | --mt-color-danger-dark: #980a00; 93 | --mt-color-danger-contrast: #ffffff; 94 | 95 | /*warning*/ 96 | --mt-color-warning: #EA9900; 97 | --mt-color-warning-dark: #e2630b; 98 | --mt-color-warning-contrast: #ffffff; 99 | 100 | /*forms*/ 101 | --mt-form-border: rgba(var(--mt-color-base-value), 0.2); 102 | --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); 103 | --mt-form-border-focus: var(--mt-color-primary); 104 | --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); 105 | --mt-form-color: var(--mt-color-base); 106 | --mt-form-color-contrast: var(--mt-color-base-contrast); 107 | --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); 108 | --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.5); 109 | --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.5); 110 | --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); 111 | } 112 | -------------------------------------------------------------------------------- /css/theme/color-orange.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Orange color styling for Corporate Clean for Drupal 8. 4 | */ 5 | :root { 6 | /*base color*/ 7 | --mt-color-base: #555; 8 | --mt-color-base-dark: #323232; 9 | --mt-color-base-light: #555; 10 | --mt-color-base-contrast: #F6F9FC; 11 | --mt-color-base-value: 50, 50, 50; 12 | --mt-color-base-contrast-value: 246, 249, 252; 13 | 14 | /*primary color*/ 15 | --mt-color-primary: hsl(25, 95%, 45%); 16 | --mt-color-primary-dark: hsl(25, 95%, 40%); 17 | --mt-color-primary-light: hsl(25, 95%, 50%); 18 | --mt-color-primary-contrast: var(--mt-color-base-contrast); 19 | --mt-color-primary-value: 25, 95%, 45%; 20 | --mt-color-primary-dark-value: 25, 95%, 40%; 21 | --mt-color-primary-light-value: 25, 95%, 50%; 22 | --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); 23 | --mt-color-primary-filter: invert(49%) sepia(64%) saturate(5392%) hue-rotate(10deg) brightness(98%) contrast(95%); 24 | 25 | /*accent color*/ 26 | --mt-color-accent: #eee; 27 | --mt-color-accent-dark: #f8f9fb; 28 | --mt-color-accent-light: #f8f9fb; 29 | --mt-color-accent-contrast: var(--mt-color-base); 30 | --mt-color-accent-contrast-value: var(--mt-color-base-value); 31 | 32 | /*secondary color*/ 33 | --mt-color-secondary: hsl(25, 95%, 45%); 34 | --mt-color-secondary-dark: hsl(25, 95%, 40%); 35 | --mt-color-secondary-light: hsl(25, 95%, 80%); 36 | --mt-color-secondary-contrast: var(--mt-color-base-contrast); 37 | --mt-color-secondary-value: 25, 95%, 45%; 38 | 39 | /*tint background*/ 40 | --mt-color-tint: #f6f6f6; 41 | --mt-color-tint-contrast: var(--mt-color-base); 42 | --mt-color-tint-contrast-value: var(--mt-color-base-value); 43 | 44 | /*shade background*/ 45 | --mt-color-shade: hsl(225, 6%, 13%); 46 | --mt-color-shade-contrast: var(--mt-color-base-contrast); 47 | --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); 48 | 49 | /*dark colored background*/ 50 | --mt-color-dark-colored: hsl(25, 95%, 30%); 51 | --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); 52 | --mt-color-dark-colored-value: 18, 100%, 24%; 53 | --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); 54 | 55 | /*colored background*/ 56 | --mt-color-colored: var(--mt-color-primary); 57 | --mt-color-colored-light: var(--mt-color-primary-light); 58 | --mt-color-colored-contrast: var(--mt-color-primary-contrast); 59 | --mt-color-colored-value: var(--mt-color-primary-value); 60 | --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); 61 | 62 | /*bright background*/ 63 | --mt-color-bright: #ffffff; 64 | --mt-color-bright-contrast: var(--mt-color-base); 65 | --mt-color-bright-value: 255, 255, 255; 66 | --mt-color-bright-contrast-value: var(--mt-color-base-value); 67 | 68 | /*dark background*/ 69 | --mt-color-dark: #000000; 70 | --mt-color-dark-contrast: var(--mt-color-base-contrast); 71 | --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); 72 | 73 | /*pattern background*/ 74 | --mt-color-pattern: #ffffff; 75 | --mt-color-pattern-contrast: var(--mt-color-base); 76 | --mt-color-pattern-contrast-value: var(--mt-color-base-value); 77 | 78 | /*default background*/ 79 | --mt-color-default: #ffffff; 80 | --mt-color-default-light: #ffffff; 81 | --mt-color-default-contrast: var(--mt-color-base); 82 | --mt-color-default-value: 255, 246, 240; 83 | --mt-color-default-contrast-value: var(--mt-color-base-value); 84 | 85 | /*success*/ 86 | --mt-color-success: #3E9300; 87 | --mt-color-success-dark: #547f1f; 88 | --mt-color-success-contrast: #ffffff; 89 | 90 | /*danger*/ 91 | --mt-color-danger: #CC0000; 92 | --mt-color-danger-dark: #980a00; 93 | --mt-color-danger-contrast: #ffffff; 94 | 95 | /*warning*/ 96 | --mt-color-warning: #EA9900; 97 | --mt-color-warning-dark: #e2630b; 98 | --mt-color-warning-contrast: #ffffff; 99 | 100 | /*forms*/ 101 | --mt-form-border: rgba(var(--mt-color-base-value), 0.2); 102 | --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); 103 | --mt-form-border-focus: var(--mt-color-primary); 104 | --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); 105 | --mt-form-color: var(--mt-color-base); 106 | --mt-form-color-contrast: var(--mt-color-base-contrast); 107 | --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); 108 | --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.5); 109 | --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.5); 110 | --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); 111 | } 112 | -------------------------------------------------------------------------------- /css/theme/color-blue.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Blue color styling for Corporate Clean for Drupal 8. 4 | */ 5 | :root { 6 | /*base color*/ 7 | --mt-color-base: #555; 8 | --mt-color-base-dark: #323232; 9 | --mt-color-base-light: #555; 10 | --mt-color-base-contrast: #F6F9FC; 11 | --mt-color-base-value: 50, 50, 50; 12 | --mt-color-base-contrast-value: 246, 249, 252; 13 | 14 | /*primary color*/ 15 | --mt-color-primary: hsl(214, 100%, 47%); 16 | --mt-color-primary-dark: hsl(214, 100%, 40%); 17 | --mt-color-primary-light: hsl(214, 100%, 57%); 18 | --mt-color-primary-contrast: var(--mt-color-base-contrast); 19 | --mt-color-primary-value: 214, 100%, 47%; 20 | --mt-color-primary-dark-value: 214, 100%, 40%; 21 | --mt-color-primary-light-value: 214, 100%, 57%; 22 | --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); 23 | --mt-color-primary-filter: invert(17%) sepia(84%) saturate(5637%) hue-rotate(250deg) brightness(100%) contrast(100%); 24 | 25 | /*accent color*/ 26 | --mt-color-accent: #eee; 27 | --mt-color-accent-dark: #f8f9fb; 28 | --mt-color-accent-light: #f8f9fb; 29 | --mt-color-accent-contrast: var(--mt-color-base); 30 | --mt-color-accent-contrast-value: var(--mt-color-base-value); 31 | 32 | /*secondary color*/ 33 | --mt-color-secondary: hsl(214, 100%, 47%); 34 | --mt-color-secondary-dark: hsl(214, 100%, 40%); 35 | --mt-color-secondary-light: hsl(214, 100%, 90%); 36 | --mt-color-secondary-contrast: var(--mt-color-base-contrast); 37 | --mt-color-secondary-value: 214, 100%, 47%; 38 | 39 | /*tint background*/ 40 | --mt-color-tint: #f6f6f6; 41 | --mt-color-tint-contrast: var(--mt-color-base); 42 | --mt-color-tint-contrast-value: var(--mt-color-base-value); 43 | 44 | /*shade background*/ 45 | --mt-color-shade: hsl(225, 6%, 13%); 46 | --mt-color-shade-contrast: var(--mt-color-base-contrast); 47 | --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); 48 | 49 | /*dark colored background*/ 50 | --mt-color-dark-colored: hsl(214, 100%, 37%); 51 | --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); 52 | --mt-color-dark-colored-value: 214, 100%, 37%; 53 | --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); 54 | 55 | /*colored background*/ 56 | --mt-color-colored: var(--mt-color-primary); 57 | --mt-color-colored-light: var(--mt-color-primary-light); 58 | --mt-color-colored-contrast: var(--mt-color-primary-contrast); 59 | --mt-color-colored-value: var(--mt-color-primary-value); 60 | --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); 61 | 62 | /*bright background*/ 63 | --mt-color-bright: #ffffff; 64 | --mt-color-bright-contrast: var(--mt-color-base); 65 | --mt-color-bright-value: 255, 255, 255; 66 | --mt-color-bright-contrast-value: var(--mt-color-base-value); 67 | 68 | /*dark background*/ 69 | --mt-color-dark: #000000; 70 | --mt-color-dark-contrast: var(--mt-color-base-contrast); 71 | --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); 72 | 73 | /*pattern background*/ 74 | --mt-color-pattern: #ffffff; 75 | --mt-color-pattern-contrast: var(--mt-color-base); 76 | --mt-color-pattern-contrast-value: var(--mt-color-base-value); 77 | 78 | /*default background*/ 79 | --mt-color-default: #ffffff; 80 | --mt-color-default-light: #ffffff; 81 | --mt-color-default-contrast: var(--mt-color-base); 82 | --mt-color-default-value: 234, 241, 245; 83 | --mt-color-default-contrast-value: var(--mt-color-base-value); 84 | 85 | /*success*/ 86 | --mt-color-success: #3E9300; 87 | --mt-color-success-dark: #547f1f; 88 | --mt-color-success-contrast: #ffffff; 89 | 90 | /*danger*/ 91 | --mt-color-danger: #CC0000; 92 | --mt-color-danger-dark: #980a00; 93 | --mt-color-danger-contrast: #ffffff; 94 | 95 | /*warning*/ 96 | --mt-color-warning: #EA9900; 97 | --mt-color-warning-dark: #e2630b; 98 | --mt-color-warning-contrast: #ffffff; 99 | 100 | /*forms*/ 101 | --mt-form-border: rgba(var(--mt-color-base-value), 0.2); 102 | --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); 103 | --mt-form-border-focus: var(--mt-color-primary); 104 | --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); 105 | --mt-form-color: var(--mt-color-base); 106 | --mt-form-color-contrast: var(--mt-color-base-contrast); 107 | --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); 108 | --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.5); 109 | --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.5); 110 | --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); 111 | } 112 | -------------------------------------------------------------------------------- /css/theme/color-local.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Blue color styling for Corporate Clean for Drupal 8. 4 | */ 5 | :root { 6 | /*base color*/ 7 | --mt-color-base: #555; 8 | --mt-color-base-dark: #323232; 9 | --mt-color-base-light: #555; 10 | --mt-color-base-contrast: #F6F9FC; 11 | --mt-color-base-value: 50, 50, 50; 12 | --mt-color-base-contrast-value: 246, 249, 252; 13 | 14 | /*primary color*/ 15 | --mt-color-primary: hsl(214, 100%, 47%); 16 | --mt-color-primary-dark: hsl(214, 100%, 40%); 17 | --mt-color-primary-light: hsl(214, 100%, 57%); 18 | --mt-color-primary-contrast: var(--mt-color-base-contrast); 19 | --mt-color-primary-value: 214, 100%, 47%; 20 | --mt-color-primary-dark-value: 214, 100%, 40%; 21 | --mt-color-primary-light-value: 214, 100%, 57%; 22 | --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); 23 | --mt-color-primary-filter: invert(17%) sepia(84%) saturate(5637%) hue-rotate(250deg) brightness(100%) contrast(100%); 24 | 25 | /*accent color*/ 26 | --mt-color-accent: #eee; 27 | --mt-color-accent-dark: #f8f9fb; 28 | --mt-color-accent-light: #f8f9fb; 29 | --mt-color-accent-contrast: var(--mt-color-base); 30 | --mt-color-accent-contrast-value: var(--mt-color-base-value); 31 | 32 | /*secondary color*/ 33 | --mt-color-secondary: hsl(214, 100%, 47%); 34 | --mt-color-secondary-dark: hsl(214, 100%, 40%); 35 | --mt-color-secondary-light: hsl(214, 100%, 90%); 36 | --mt-color-secondary-contrast: var(--mt-color-base-contrast); 37 | --mt-color-secondary-value: 214, 100%, 47%; 38 | 39 | /*tint background*/ 40 | --mt-color-tint: #f6f6f6; 41 | --mt-color-tint-contrast: var(--mt-color-base); 42 | --mt-color-tint-contrast-value: var(--mt-color-base-value); 43 | 44 | /*shade background*/ 45 | --mt-color-shade: hsl(225, 6%, 13%); 46 | --mt-color-shade-contrast: var(--mt-color-base-contrast); 47 | --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); 48 | 49 | /*dark colored background*/ 50 | --mt-color-dark-colored: hsl(214, 100%, 37%); 51 | --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); 52 | --mt-color-dark-colored-value: 214, 100%, 37%; 53 | --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); 54 | 55 | /*colored background*/ 56 | --mt-color-colored: var(--mt-color-primary); 57 | --mt-color-colored-light: var(--mt-color-primary-light); 58 | --mt-color-colored-contrast: var(--mt-color-primary-contrast); 59 | --mt-color-colored-value: var(--mt-color-primary-value); 60 | --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); 61 | 62 | /*bright background*/ 63 | --mt-color-bright: #ffffff; 64 | --mt-color-bright-contrast: var(--mt-color-base); 65 | --mt-color-bright-value: 255, 255, 255; 66 | --mt-color-bright-contrast-value: var(--mt-color-base-value); 67 | 68 | /*dark background*/ 69 | --mt-color-dark: #000000; 70 | --mt-color-dark-contrast: var(--mt-color-base-contrast); 71 | --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); 72 | 73 | /*pattern background*/ 74 | --mt-color-pattern: #ffffff; 75 | --mt-color-pattern-contrast: var(--mt-color-base); 76 | --mt-color-pattern-contrast-value: var(--mt-color-base-value); 77 | 78 | /*default background*/ 79 | --mt-color-default: #ffffff; 80 | --mt-color-default-light: #ffffff; 81 | --mt-color-default-contrast: var(--mt-color-base); 82 | --mt-color-default-value: 234, 241, 245; 83 | --mt-color-default-contrast-value: var(--mt-color-base-value); 84 | 85 | /*success*/ 86 | --mt-color-success: #3E9300; 87 | --mt-color-success-dark: #547f1f; 88 | --mt-color-success-contrast: #ffffff; 89 | 90 | /*danger*/ 91 | --mt-color-danger: #CC0000; 92 | --mt-color-danger-dark: #980a00; 93 | --mt-color-danger-contrast: #ffffff; 94 | 95 | /*warning*/ 96 | --mt-color-warning: #EA9900; 97 | --mt-color-warning-dark: #e2630b; 98 | --mt-color-warning-contrast: #ffffff; 99 | 100 | /*forms*/ 101 | --mt-form-border: rgba(var(--mt-color-base-value), 0.2); 102 | --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); 103 | --mt-form-border-focus: var(--mt-color-primary); 104 | --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); 105 | --mt-form-color: var(--mt-color-base); 106 | --mt-form-color-contrast: var(--mt-color-base-contrast); 107 | --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); 108 | --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.5); 109 | --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.5); 110 | --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); 111 | } 112 | -------------------------------------------------------------------------------- /css/theme/color-pink.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Pink color styling for Corporate Clean for Drupal 8. 4 | */ 5 | :root { 6 | /*base color*/ 7 | --mt-color-base: #555; 8 | --mt-color-base-dark: #323232; 9 | --mt-color-base-light: #555; 10 | --mt-color-base-contrast: #F6F9FC; 11 | --mt-color-base-value: 50, 50, 50; 12 | --mt-color-base-contrast-value: 246, 249, 252; 13 | 14 | /*primary color*/ 15 | --mt-color-primary: hsl(330, 100%, 38%); 16 | --mt-color-primary-dark: hsl(330, 100%, 30%); 17 | --mt-color-primary-light: hsl(330, 100%, 43%); 18 | --mt-color-primary-contrast: var(--mt-color-base-contrast); 19 | --mt-color-primary-value: 330, 100%, 38%; 20 | --mt-color-primary-dark-value: 330, 100%, 30%; 21 | --mt-color-primary-light-value: 330, 100%, 43%; 22 | --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); 23 | --mt-color-primary-filter: invert(10%) sepia(92%) saturate(4950%) hue-rotate(321deg) brightness(103%) contrast(106%); 24 | 25 | /*accent color*/ 26 | --mt-color-accent: #eee; 27 | --mt-color-accent-dark: #f8f9fb; 28 | --mt-color-accent-light: #f8f9fb; 29 | --mt-color-accent-contrast: var(--mt-color-base); 30 | --mt-color-accent-contrast-value: var(--mt-color-base-value); 31 | 32 | /*secondary color*/ 33 | --mt-color-secondary: hsl(330, 100%, 38%); 34 | --mt-color-secondary-dark: hsl(330, 100%, 30%); 35 | --mt-color-secondary-light: hsl(330, 100%, 80%); 36 | --mt-color-secondary-contrast: var(--mt-color-base-contrast); 37 | --mt-color-secondary-value: 330, 100%, 38%; 38 | 39 | /*tint background*/ 40 | --mt-color-tint: #f6f6f6; 41 | --mt-color-tint-contrast: var(--mt-color-base); 42 | --mt-color-tint-contrast-value: var(--mt-color-base-value); 43 | 44 | /*shade background*/ 45 | --mt-color-shade: hsl(225, 6%, 13%); 46 | --mt-color-shade-contrast: var(--mt-color-base-contrast); 47 | --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); 48 | 49 | /*dark colored background*/ 50 | --mt-color-dark-colored: hsl(330, 100%, 30%); 51 | --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); 52 | --mt-color-dark-colored-value: 249, 99%, 35%; 53 | --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); 54 | 55 | /*colored background*/ 56 | --mt-color-colored: var(--mt-color-primary); 57 | --mt-color-colored-light: var(--mt-color-primary-light); 58 | --mt-color-colored-contrast: var(--mt-color-primary-contrast); 59 | --mt-color-colored-value: var(--mt-color-primary-value); 60 | --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); 61 | 62 | /*bright background*/ 63 | --mt-color-bright: #ffffff; 64 | --mt-color-bright-contrast: var(--mt-color-base); 65 | --mt-color-bright-value: 255, 255, 255; 66 | --mt-color-bright-contrast-value: var(--mt-color-base-value); 67 | 68 | /*dark background*/ 69 | --mt-color-dark: #000000; 70 | --mt-color-dark-contrast: var(--mt-color-base-contrast); 71 | --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); 72 | 73 | /*pattern background*/ 74 | --mt-color-pattern: #ffffff; 75 | --mt-color-pattern-contrast: var(--mt-color-base); 76 | --mt-color-pattern-contrast-value: var(--mt-color-base-value); 77 | 78 | /*default background*/ 79 | --mt-color-default: #ffffff; 80 | --mt-color-default-light: #ffffff; 81 | --mt-color-default-contrast: var(--mt-color-base); 82 | --mt-color-default-value: 255, 240, 247; 83 | --mt-color-default-contrast-value: var(--mt-color-base-value); 84 | 85 | /*success*/ 86 | --mt-color-success: #3E9300; 87 | --mt-color-success-dark: #547f1f; 88 | --mt-color-success-contrast: #ffffff; 89 | 90 | /*danger*/ 91 | --mt-color-danger: #CC0000; 92 | --mt-color-danger-dark: #980a00; 93 | --mt-color-danger-contrast: #ffffff; 94 | 95 | /*warning*/ 96 | --mt-color-warning: #EA9900; 97 | --mt-color-warning-dark: #e2630b; 98 | --mt-color-warning-contrast: #ffffff; 99 | 100 | /*forms*/ 101 | --mt-form-border: rgba(var(--mt-color-base-value), 0.2); 102 | --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); 103 | --mt-form-border-focus: var(--mt-color-primary); 104 | --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); 105 | --mt-form-color: var(--mt-color-base); 106 | --mt-form-color-contrast: var(--mt-color-base-contrast); 107 | --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); 108 | --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.5); 109 | --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.5); 110 | --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); 111 | } 112 | -------------------------------------------------------------------------------- /css/theme/color-purple.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Purple color styling for Corporate Clean for Drupal 8. 4 | */ 5 | :root { 6 | /*base color*/ 7 | --mt-color-base: #555; 8 | --mt-color-base-dark: #323232; 9 | --mt-color-base-light: #555; 10 | --mt-color-base-contrast: #F6F9FC; 11 | --mt-color-base-value: 50, 50, 50; 12 | --mt-color-base-contrast-value: 246, 249, 252; 13 | 14 | /*primary color*/ 15 | --mt-color-primary: #8d5aff; 16 | --mt-color-primary-dark: hsl(258.5, 100%, 62.6%); 17 | --mt-color-primary-light: hsl(258.5, 100%, 70%); 18 | --mt-color-primary-contrast: var(--mt-color-base-contrast); 19 | --mt-color-primary-value: 258.5, 100%, 67.6%; 20 | --mt-color-primary-dark-value: 258.5, 100%, 62.6%; 21 | --mt-color-primary-light-value: 258.5, 100%, 70%; 22 | --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); 23 | --mt-color-primary-filter: invert(49%) sepia(61%) saturate(6072%) hue-rotate(238deg) brightness(101%) contrast(102%); 24 | 25 | /*accent color*/ 26 | --mt-color-accent: #eee; 27 | --mt-color-accent-dark: #f8f9fb; 28 | --mt-color-accent-light: #f8f9fb; 29 | --mt-color-accent-contrast: var(--mt-color-base); 30 | --mt-color-accent-contrast-value: var(--mt-color-base-value); 31 | 32 | /*secondary color*/ 33 | --mt-color-secondary: hsl(258.5, 100%, 67.6%); 34 | --mt-color-secondary-dark: hsl(258.5, 100%, 57.6%); 35 | --mt-color-secondary-light: hsl(258.5, 100%, 85%); 36 | --mt-color-secondary-contrast: var(--mt-color-base-contrast); 37 | --mt-color-secondary-value: 258.5, 100%, 67.6%; 38 | 39 | /*tint background*/ 40 | --mt-color-tint: #f6f6f6; 41 | --mt-color-tint-contrast: var(--mt-color-base); 42 | --mt-color-tint-contrast-value: var(--mt-color-base-value); 43 | 44 | /*shade background*/ 45 | --mt-color-shade: hsl(225, 6%, 13%); 46 | --mt-color-shade-contrast: var(--mt-color-base-contrast); 47 | --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); 48 | 49 | /*dark colored background*/ 50 | --mt-color-dark-colored: hsl(258.5, 100%, 35%); 51 | --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); 52 | --mt-color-dark-colored-value: 258.5, 100%, 35%; 53 | --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); 54 | 55 | /*colored background*/ 56 | --mt-color-colored: var(--mt-color-primary); 57 | --mt-color-colored-light: var(--mt-color-primary-light); 58 | --mt-color-colored-contrast: var(--mt-color-primary-contrast); 59 | --mt-color-colored-value: var(--mt-color-primary-value); 60 | --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); 61 | 62 | /*bright background*/ 63 | --mt-color-bright: #ffffff; 64 | --mt-color-bright-contrast: var(--mt-color-base); 65 | --mt-color-bright-value: 255, 255, 255; 66 | --mt-color-bright-contrast-value: var(--mt-color-base-value); 67 | 68 | /*dark background*/ 69 | --mt-color-dark: #000000; 70 | --mt-color-dark-contrast: var(--mt-color-base-contrast); 71 | --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); 72 | 73 | /*pattern background*/ 74 | --mt-color-pattern: #ffffff; 75 | --mt-color-pattern-contrast: var(--mt-color-base); 76 | --mt-color-pattern-contrast-value: var(--mt-color-base-value); 77 | 78 | /*default background*/ 79 | --mt-color-default: #ffffff; 80 | --mt-color-default-light: #ffffff; 81 | --mt-color-default-contrast: var(--mt-color-base); 82 | --mt-color-default-value: 245, 240, 255; 83 | --mt-color-default-contrast-value: var(--mt-color-base-value); 84 | 85 | /*success*/ 86 | --mt-color-success: #3E9300; 87 | --mt-color-success-dark: #547f1f; 88 | --mt-color-success-contrast: #ffffff; 89 | 90 | /*danger*/ 91 | --mt-color-danger: #CC0000; 92 | --mt-color-danger-dark: #980a00; 93 | --mt-color-danger-contrast: #ffffff; 94 | 95 | /*warning*/ 96 | --mt-color-warning: #EA9900; 97 | --mt-color-warning-dark: #e2630b; 98 | --mt-color-warning-contrast: #ffffff; 99 | 100 | /*forms*/ 101 | --mt-form-border: rgba(var(--mt-color-base-value), 0.2); 102 | --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); 103 | --mt-form-border-focus: var(--mt-color-primary); 104 | --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); 105 | --mt-form-color: var(--mt-color-base); 106 | --mt-form-color-contrast: var(--mt-color-base-contrast); 107 | --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); 108 | --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.5); 109 | --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.5); 110 | --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); 111 | } 112 | -------------------------------------------------------------------------------- /css/theme/color-gray.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Gray color styling for Corporate Clean for Drupal 8. 4 | */ 5 | :root { 6 | /*base color*/ 7 | --mt-color-base: #2c3539; 8 | --mt-color-base-dark: #202629; 9 | --mt-color-base-light: #555; 10 | --mt-color-base-contrast: #f6f9fc; 11 | --mt-color-base-value: 44, 53, 57; 12 | --mt-color-base-contrast-value: 246, 249, 252; 13 | 14 | /*primary color*/ 15 | --mt-color-primary: hsl(198, 13%, 20%); 16 | --mt-color-primary-dark: hsl(198, 13%, 0%); 17 | --mt-color-primary-light: hsl(198, 13%, 25%); 18 | --mt-color-primary-contrast: var(--mt-color-base-contrast); 19 | --mt-color-primary-value: 198, 13%, 20%; 20 | --mt-color-primary-dark-value: 198, 13%, 0%; 21 | --mt-color-primary-light-value: 198, 13%, 25%; 22 | --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); 23 | --mt-color-primary-filter: invert(47%) sepia(13%) saturate(274%) 24 | hue-rotate(215deg) brightness(87%) contrast(86%); 25 | 26 | /*accent color*/ 27 | --mt-color-accent: #f6f6f6; 28 | --mt-color-accent-dark: #e0e0e1; 29 | --mt-color-accent-light: #e0e0e1; 30 | --mt-color-accent-contrast: var(--mt-color-base); 31 | --mt-color-accent-contrast-value: var(--mt-color-base-value); 32 | 33 | /*secondary color*/ 34 | --mt-color-secondary: hsl(198, 13%, 20%); 35 | --mt-color-secondary-dark: hsl(198, 13%, 0%); 36 | --mt-color-secondary-light: hsl(198, 13%, 50%); 37 | --mt-color-secondary-contrast: var(--mt-color-base-contrast); 38 | --mt-color-secondary-value: 198, 13%, 22%; 39 | 40 | /*tint background*/ 41 | --mt-color-tint: #e8e9eb; 42 | --mt-color-tint-contrast: var(--mt-color-base); 43 | --mt-color-tint-contrast-value: var(--mt-color-base-value); 44 | 45 | /*shade background*/ 46 | --mt-color-shade: hsl(198, 16%, 12%); 47 | --mt-color-shade-contrast: var(--mt-color-base-contrast); 48 | --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); 49 | 50 | /*dark colored background*/ 51 | --mt-color-dark-colored: hsl(198, 13%, 0%); 52 | --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); 53 | --mt-color-dark-colored-value: 198, 13%, 0%; 54 | --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); 55 | 56 | /*colored background*/ 57 | --mt-color-colored: var(--mt-color-primary); 58 | --mt-color-colored-light: var(--mt-color-primary-light); 59 | --mt-color-colored-contrast: var(--mt-color-primary-contrast); 60 | --mt-color-colored-value: var(--mt-color-primary-value); 61 | --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); 62 | 63 | /*bright background*/ 64 | --mt-color-bright: #ffffff; 65 | --mt-color-bright-contrast: var(--mt-color-base); 66 | --mt-color-bright-value: 255, 255, 255; 67 | --mt-color-bright-contrast-value: var(--mt-color-base-value); 68 | 69 | /*dark background*/ 70 | --mt-color-dark: #000000; 71 | --mt-color-dark-contrast: var(--mt-color-base-contrast); 72 | --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); 73 | 74 | /*pattern background*/ 75 | --mt-color-pattern: #ffffff; 76 | --mt-color-pattern-contrast: var(--mt-color-base); 77 | --mt-color-pattern-contrast-value: var(--mt-color-base-value); 78 | 79 | /*default background*/ 80 | --mt-color-default: #ffffff; 81 | --mt-color-default-light: #ffffff; 82 | --mt-color-default-contrast: var(--mt-color-base); 83 | --mt-color-default-value: 247, 247, 248; 84 | --mt-color-default-contrast-value: var(--mt-color-base-value); 85 | 86 | /*success*/ 87 | --mt-color-success: #3e9300; 88 | --mt-color-success-dark: #547f1f; 89 | --mt-color-success-contrast: #ffffff; 90 | 91 | /*danger*/ 92 | --mt-color-danger: #cc0000; 93 | --mt-color-danger-dark: #980a00; 94 | --mt-color-danger-contrast: #ffffff; 95 | 96 | /*warning*/ 97 | --mt-color-warning: #ea9900; 98 | --mt-color-warning-dark: #e2630b; 99 | --mt-color-warning-contrast: #ffffff; 100 | 101 | /*forms*/ 102 | --mt-form-border: rgba(var(--mt-color-base-value), 0.2); 103 | --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); 104 | --mt-form-border-focus: var(--mt-color-primary); 105 | --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); 106 | --mt-form-color: var(--mt-color-base); 107 | --mt-form-color-contrast: var(--mt-color-base-contrast); 108 | --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); 109 | --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.5); 110 | --mt-form-placeholder-contrast: rgba( 111 | var(--mt-color-base-contrast-value), 112 | 0.5 113 | ); 114 | --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); 115 | } 116 | -------------------------------------------------------------------------------- /css/theme/color-turquoise.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Purple turquoise color styling for Corporate Clean for Drupal 8. 4 | * 5 | * Base color: #007989 6 | */ 7 | :root { 8 | /*base color*/ 9 | --mt-color-base: #555; 10 | --mt-color-base-dark: #323232; 11 | --mt-color-base-light: #555; 12 | --mt-color-base-contrast: #F6F9FC; 13 | --mt-color-base-value: 50, 50, 50; 14 | --mt-color-base-contrast-value: 246, 249, 252; 15 | 16 | /*primary color*/ 17 | --mt-color-primary: #007e8f; 18 | --mt-color-primary-dark: hsl(187, 100%, 24%); 19 | --mt-color-primary-light: hsl(187, 100%, 33%); 20 | --mt-color-primary-contrast: var(--mt-color-base-contrast); 21 | --mt-color-primary-value: 187, 100%, 28%; 22 | --mt-color-primary-dark-value: 187, 100%, 24%; 23 | --mt-color-primary-light-value: 187, 100%, 33%; 24 | --mt-color-primary-contrast-value: var(--mt-color-base-contrast-value); 25 | --mt-color-primary-filter: invert(23%) sepia(96%) saturate(1969%) hue-rotate(167deg) brightness(97%) contrast(101%); 26 | 27 | /*accent color*/ 28 | --mt-color-accent: #eee; 29 | --mt-color-accent-dark: #f8f9fb; 30 | --mt-color-accent-light: #f8f9fb; 31 | --mt-color-accent-contrast: var(--mt-color-base); 32 | --mt-color-accent-contrast-value: var(--mt-color-base-value); 33 | 34 | /*secondary color*/ 35 | --mt-color-secondary: hsl(187, 100%, 28%); 36 | --mt-color-secondary-dark: hsl(187, 100%, 24%); 37 | --mt-color-secondary-light: hsl(187, 100%, 70%); 38 | --mt-color-secondary-contrast: var(--mt-color-base-contrast); 39 | --mt-color-secondary-value: 187, 100%, 28%; 40 | 41 | /*tint background*/ 42 | --mt-color-tint: #f6f6f6; 43 | --mt-color-tint-contrast: var(--mt-color-base); 44 | --mt-color-tint-contrast-value: var(--mt-color-base-value); 45 | 46 | /*shade background*/ 47 | --mt-color-shade: hsl(225, 6%, 13%); 48 | --mt-color-shade-contrast: var(--mt-color-base-contrast); 49 | --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value); 50 | 51 | /*dark colored background*/ 52 | --mt-color-dark-colored: hsl(187, 100%, 20%); 53 | --mt-color-dark-colored-contrast: var(--mt-color-base-contrast); 54 | --mt-color-dark-colored-value: 187, 100%, 20%; 55 | --mt-color-dark-colored-contrast-value: var(--mt-color-base-contrast-value); 56 | 57 | /*colored background*/ 58 | --mt-color-colored: var(--mt-color-primary); 59 | --mt-color-colored-light: var(--mt-color-primary-light); 60 | --mt-color-colored-contrast: var(--mt-color-primary-contrast); 61 | --mt-color-colored-value: var(--mt-color-primary-value); 62 | --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value); 63 | 64 | /*bright background*/ 65 | --mt-color-bright: #ffffff; 66 | --mt-color-bright-contrast: var(--mt-color-base); 67 | --mt-color-bright-value: 255, 255, 255; 68 | --mt-color-bright-contrast-value: var(--mt-color-base-value); 69 | 70 | /*dark background*/ 71 | --mt-color-dark: #000000; 72 | --mt-color-dark-contrast: var(--mt-color-base-contrast); 73 | --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value); 74 | 75 | /*pattern background*/ 76 | --mt-color-pattern: #ffffff; 77 | --mt-color-pattern-contrast: var(--mt-color-base); 78 | --mt-color-pattern-contrast-value: var(--mt-color-base-value); 79 | 80 | /*default background*/ 81 | --mt-color-default: #ffffff; 82 | --mt-color-default-light: #ffffff; 83 | --mt-color-default-contrast: var(--mt-color-base); 84 | --mt-color-default-value: 240, 253, 255; 85 | --mt-color-default-contrast-value: var(--mt-color-base-value); 86 | 87 | /*success*/ 88 | --mt-color-success: #3E9300; 89 | --mt-color-success-dark: #547f1f; 90 | --mt-color-success-contrast: #ffffff; 91 | 92 | /*danger*/ 93 | --mt-color-danger: #CC0000; 94 | --mt-color-danger-dark: #980a00; 95 | --mt-color-danger-contrast: #ffffff; 96 | 97 | /*warning*/ 98 | --mt-color-warning: #EA9900; 99 | --mt-color-warning-dark: #e2630b; 100 | --mt-color-warning-contrast: #ffffff; 101 | 102 | /*forms*/ 103 | --mt-form-border: rgba(var(--mt-color-base-value), 0.2); 104 | --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.4); 105 | --mt-form-border-focus: var(--mt-color-primary); 106 | --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1); 107 | --mt-form-color: var(--mt-color-base); 108 | --mt-form-color-contrast: var(--mt-color-base-contrast); 109 | --mt-form-label-color: rgba(var(--mt-color-base-value), 0.9); 110 | --mt-form-placeholder: rgba(var(--mt-color-base-value), 0.5); 111 | --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.5); 112 | --mt-active-cell: hsla(var(--mt-color-primary-value), 0.12); 113 | } 114 | -------------------------------------------------------------------------------- /css/theme/form-shapes.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Styles for Corporate Clean's buttons. 4 | */ 5 | :root { 6 | --mt-oval-radius: 30px; 7 | --mt-rounded-radius: 4px; 8 | } 9 | .mt-style-sharp input.form-text, 10 | .mt-style-sharp .collapse-group, 11 | .mt-style-sharp input.form-tel, 12 | .mt-style-sharp input.form-email, 13 | .mt-style-sharp input.form-url, 14 | .mt-style-sharp input.form-search, 15 | .mt-style-sharp input.form-file, 16 | .mt-style-sharp input.form-number, 17 | .mt-style-sharp input.form-color, 18 | .mt-style-sharp input.form-date, 19 | .mt-style-sharp input.form-time, 20 | .mt-style-sharp input[type='checkbox'], 21 | .mt-style-sharp textarea, 22 | .mt-style-sharp fieldset, 23 | .mt-style-sharp details, 24 | .mt-style-sharp select, 25 | .mt-style-sharp table, 26 | .mt-style-sharp .progress, 27 | .mt-style-sharp .table-responsive, 28 | .mt-style-sharp .cart-block--contents__items, 29 | .mt-style-sharp .block-mailchimp-signup .form-actions input[type='submit'], 30 | .mt-style-sharp .block-search .form-actions:after { 31 | -webkit-border-radius: 0; 32 | -moz-border-radius: 0; 33 | border-radius: 0; 34 | } 35 | .mt-style-sharp table tbody tr:last-child th:first-child { 36 | -webkit-border-bottom-left-radius: 0; 37 | -moz-border-bottom-left-radius: 0; 38 | border-bottom-left-radius: 0; 39 | } 40 | .mt-style-oval input.form-text, 41 | .mt-style-oval .collapse-group, 42 | .mt-style-oval input.form-tel, 43 | .mt-style-oval input.form-email, 44 | .mt-style-oval input.form-url, 45 | .mt-style-oval input.form-search, 46 | .mt-style-oval input.form-file, 47 | .mt-style-oval input.form-number, 48 | .mt-style-oval input.form-color, 49 | .mt-style-oval input.form-date, 50 | .mt-style-oval input.form-time, 51 | .mt-style-oval input[type='checkbox'], 52 | .mt-style-oval select, 53 | .mt-style-oval .progress, 54 | .mt-style-oval .block-mailchimp-signup .form-actions input[type='submit'], 55 | .mt-style-oval .block-search .form-actions:after, 56 | .mt-style-oval textarea { 57 | -webkit-border-radius: var(--mt-oval-radius); 58 | -moz-border-radius: var(--mt-oval-radius); 59 | border-radius: var(--mt-oval-radius); 60 | } 61 | .mt-style-oval table tbody tr:last-child th:first-child { 62 | -webkit-border-bottom-left-radius: var(--mt-rounded-radius); 63 | -moz-border-bottom-left-radius: var(--mt-rounded-radius); 64 | border-bottom-left-radius: var(--mt-rounded-radius); 65 | } 66 | .mt-style-oval input.form-text, 67 | .mt-style-oval input.form-tel, 68 | .mt-style-oval input.form-email, 69 | .mt-style-oval input.form-url, 70 | .mt-style-oval input.form-search, 71 | .mt-style-oval input.form-file, 72 | .mt-style-oval input.form-number, 73 | .mt-style-oval input.form-color, 74 | .mt-style-oval input.form-date, 75 | .mt-style-oval input.form-time, 76 | .mt-style-oval select, 77 | .mt-style-oval textarea { 78 | padding-left: 20px; 79 | padding-right: 20px; 80 | } 81 | .mt-style-oval fieldset, 82 | .mt-style-oval table, 83 | .mt-style-oval .table-responsive, 84 | .mt-style-oval .cart-block--contents__items, 85 | .mt-style-oval details { 86 | -webkit-border-radius: var(--mt-rounded-radius); 87 | -moz-border-radius: var(--mt-rounded-radius); 88 | border-radius: var(--mt-rounded-radius); 89 | } 90 | .mt-style-rounded input.form-text, 91 | .mt-style-rounded .collapse-group, 92 | .mt-style-rounded input.form-tel, 93 | .mt-style-rounded input.form-email, 94 | .mt-style-rounded input.form-url, 95 | .mt-style-rounded input.form-search, 96 | .mt-style-rounded input.form-file, 97 | .mt-style-rounded input.form-number, 98 | .mt-style-rounded input.form-color, 99 | .mt-style-rounded input.form-date, 100 | .mt-style-rounded input.form-time, 101 | .mt-style-rounded input[type='checkbox'], 102 | .mt-style-rounded textarea, 103 | .mt-style-rounded fieldset, 104 | .mt-style-rounded details, 105 | .mt-style-rounded select, 106 | .mt-style-rounded table, 107 | .mt-style-rounded .progress, 108 | .mt-style-rounded .table-responsive, 109 | .mt-style-rounded .cart-block--contents__items, 110 | .mt-style-rounded .block-mailchimp-signup .form-actions input[type='submit'], 111 | .mt-style-rounded .block-search .form-actions:after { 112 | -webkit-border-radius: var(--mt-rounded-radius); 113 | -moz-border-radius: var(--mt-rounded-radius); 114 | border-radius: var(--mt-rounded-radius); 115 | } 116 | .mt-style-rounded table tbody tr:last-child th:first-child { 117 | -webkit-border-bottom-left-radius: var(--mt-rounded-radius); 118 | -moz-border-bottom-left-radius: var(--mt-rounded-radius); 119 | border-bottom-left-radius: var(--mt-rounded-radius); 120 | } 121 | .mt-style-form-sharp input.form-text, 122 | .mt-style-form-sharp .collapse-group, 123 | .mt-style-form-sharp input.form-tel, 124 | .mt-style-form-sharp input.form-email, 125 | .mt-style-form-sharp input.form-url, 126 | .mt-style-form-sharp input.form-search, 127 | .mt-style-form-sharp input.form-file, 128 | .mt-style-form-sharp input.form-number, 129 | .mt-style-form-sharp input.form-color, 130 | .mt-style-form-sharp input.form-date, 131 | .mt-style-form-sharp input.form-time, 132 | .mt-style-form-sharp input[type='checkbox'], 133 | .mt-style-form-sharp textarea, 134 | .mt-style-form-sharp fieldset, 135 | .mt-style-form-sharp details, 136 | .mt-style-form-sharp select, 137 | .mt-style-form-sharp table, 138 | .mt-style-form-sharp .progress, 139 | .mt-style-form-sharp .table-responsive, 140 | .mt-style-form-sharp .cart-block--contents__items, 141 | .mt-style-form-sharp .block-mailchimp-signup .form-actions input[type='submit'], 142 | .mt-style-form-sharp .block-search .form-actions:after { 143 | -webkit-border-radius: 0; 144 | -moz-border-radius: 0; 145 | border-radius: 0; 146 | } 147 | .mt-style-form-sharp table tbody tr:last-child th:first-child { 148 | -webkit-border-bottom-left-radius: 0; 149 | -moz-border-bottom-left-radius: 0; 150 | border-bottom-left-radius: 0; 151 | } 152 | .mt-style-form-oval input.form-text, 153 | .mt-style-form-oval .collapse-group, 154 | .mt-style-form-oval input.form-tel, 155 | .mt-style-form-oval input.form-email, 156 | .mt-style-form-oval input.form-url, 157 | .mt-style-form-oval input.form-search, 158 | .mt-style-form-oval input.form-file, 159 | .mt-style-form-oval input.form-number, 160 | .mt-style-form-oval input.form-color, 161 | .mt-style-form-oval input.form-date, 162 | .mt-style-form-oval input.form-time, 163 | .mt-style-form-oval input[type='checkbox'], 164 | .mt-style-form-oval select, 165 | .mt-style-form-oval .progress, 166 | .mt-style-form-oval .block-mailchimp-signup .form-actions input[type='submit'], 167 | .mt-style-form-oval .block-search .form-actions:after, 168 | .mt-style-form-oval textarea { 169 | -webkit-border-radius: var(--mt-oval-radius); 170 | -moz-border-radius: var(--mt-oval-radius); 171 | border-radius: var(--mt-oval-radius); 172 | } 173 | .mt-style-form-oval input.form-text, 174 | .mt-style-form-oval input.form-tel, 175 | .mt-style-form-oval input.form-email, 176 | .mt-style-form-oval input.form-url, 177 | .mt-style-form-oval input.form-search, 178 | .mt-style-form-oval input.form-file, 179 | .mt-style-form-oval input.form-number, 180 | .mt-style-form-oval input.form-color, 181 | .mt-style-form-oval input.form-date, 182 | .mt-style-form-oval input.form-time, 183 | .mt-style-form-oval select, 184 | .mt-style-form-oval textarea { 185 | padding-left: 20px; 186 | padding-right: 20px; 187 | } 188 | .mt-style-form-oval table tbody tr:last-child th:first-child { 189 | -webkit-border-bottom-left-radius: var(--mt-rounded-radius); 190 | -moz-border-bottom-left-radius: var(--mt-rounded-radius); 191 | border-bottom-left-radius: var(--mt-rounded-radius); 192 | } 193 | .mt-style-form-oval fieldset, 194 | .mt-style-form-oval table, 195 | .mt-style-form-oval .table-responsive, 196 | .mt-style-form-oval .cart-block--contents__items, 197 | .mt-style-form-oval details { 198 | -webkit-border-radius: var(--mt-rounded-radius); 199 | -moz-border-radius: var(--mt-rounded-radius); 200 | border-radius: var(--mt-rounded-radius); 201 | } 202 | .mt-style-form-rounded input.form-text, 203 | .mt-style-form-rounded .collapse-group, 204 | .mt-style-form-rounded input.form-tel, 205 | .mt-style-form-rounded input.form-email, 206 | .mt-style-form-rounded input.form-url, 207 | .mt-style-form-rounded input.form-search, 208 | .mt-style-form-rounded input.form-file, 209 | .mt-style-form-rounded input.form-number, 210 | .mt-style-form-rounded input.form-color, 211 | .mt-style-form-rounded input.form-date, 212 | .mt-style-form-rounded input.form-time, 213 | .mt-style-form-rounded input[type='checkbox'], 214 | .mt-style-form-rounded textarea, 215 | .mt-style-form-rounded fieldset, 216 | .mt-style-form-rounded details, 217 | .mt-style-form-rounded select, 218 | .mt-style-form-rounded table, 219 | .mt-style-form-rounded .progress, 220 | .mt-style-form-rounded .table-responsive, 221 | .mt-style-form-rounded .cart-block--contents__items, 222 | .mt-style-form-rounded .block-mailchimp-signup .form-actions input[type='submit'], 223 | .mt-style-form-rounded .block-search .form-actions:after { 224 | -webkit-border-radius: var(--mt-rounded-radius); 225 | -moz-border-radius: var(--mt-rounded-radius); 226 | border-radius: var(--mt-rounded-radius); 227 | } 228 | .mt-style-form-rounded table tbody tr:last-child th:first-child { 229 | -webkit-border-bottom-left-radius: var(--mt-rounded-radius); 230 | -moz-border-bottom-left-radius: var(--mt-rounded-radius); 231 | border-bottom-left-radius: var(--mt-rounded-radius); 232 | } 233 | -------------------------------------------------------------------------------- /config/install/corporateclean.settings.yml: -------------------------------------------------------------------------------- 1 | sticky_side: 1 2 | animations_state: 0 3 | background_pattern: none 4 | banner_background_color: region--bright-background 5 | banner_blocks_paddings: 1 6 | banner_id: banner 7 | banner_layout_container: container-fluid 8 | banner_region_paddings: 1 9 | bootstrap_remote_type: local 10 | breadcrumb_separator: fa-angle-right 11 | breaking_effect: fade 12 | breaking_effect_time: '5' 13 | color_scheme: gray 14 | global_corner_style: mt-style-rounded 15 | button_corner_style: mt-style-button-global 16 | form_corner_style: mt-style-form-global 17 | image_corner_style: mt-style-image-global 18 | menu_corner_style: mt-style-menu-global 19 | custom_elements_corner_style: mt-style-custom-global 20 | links_style: mt-link-style-normal 21 | content_bottom_animation_effect: fadeIn 22 | content_bottom_background_color: region--accent-background 23 | content_bottom_blocks_paddings: 0 24 | content_bottom_id: content-bottom 25 | content_bottom_layout_container: container 26 | content_bottom_region_paddings: 0 27 | content_bottom_separator: region--no-separator 28 | content_top_animation_effect: fadeIn 29 | content_top_background_color: region--bright-background 30 | content_top_blocks_paddings: 0 31 | content_top_highlighted_animation_effect: fadeIn 32 | content_top_highlighted_background_color: region--accent-background 33 | content_top_highlighted_blocks_paddings: 0 34 | content_top_highlighted_id: content-top-highlighted 35 | content_top_highlighted_layout_container: container-fluid 36 | content_top_highlighted_region_paddings: 1 37 | content_top_highlighted_separator: region--no-separator 38 | content_bottom_highlighted_animation_effect: fadeIn 39 | content_bottom_highlighted_background_color: region--bright-background 40 | content_bottom_highlighted_blocks_paddings: 0 41 | content_bottom_highlighted_id: content-bottom-highlighted 42 | content_bottom_highlighted_layout_container: container 43 | content_bottom_highlighted_region_paddings: 1 44 | content_bottom_highlighted_separator: region--no-separator 45 | content_top_id: content-top 46 | content_top_layout_container: container 47 | content_top_region_paddings: 0 48 | featured_animation_effect: fadeIn 49 | featured_background_color: region--tint-background 50 | featured_blocks_paddings: 1 51 | featured_bottom_animation_effect: no-animation 52 | featured_bottom_background_color: region--bright-background 53 | featured_bottom_blocks_paddings: 0 54 | featured_bottom_id: featured-bottom 55 | featured_bottom_layout_container: container-fluid 56 | featured_bottom_region_paddings: 0 57 | featured_bottom_separator: region--no-separator 58 | featured_id: featured 59 | featured_layout_container: container 60 | featured_region_paddings: 0 61 | featured_separator: region--no-separator 62 | featured_top_animation_effect: fadeIn 63 | featured_top_background_color: region--accent-background 64 | featured_top_blocks_paddings: 0 65 | featured_top_id: featured-top 66 | featured_top_layout_container: container 67 | featured_top_region_paddings: 0 68 | featured_top_separator: region--no-separator 69 | fixed_header: 1 70 | fixed_header_behavior: fixed-header-enabled--scroll-up 71 | font_resize: 1 72 | footer_animation_effect: no-animation 73 | footer_background_color: region--colored-background 74 | footer_blocks_paddings: 0 75 | footer_bottom_background_color: region--tint-background 76 | footer_bottom_blocks_paddings: 0 77 | footer_bottom_id: footer-bottom 78 | footer_bottom_layout_container: container 79 | footer_bottom_region_paddings: 0 80 | footer_bottom_separator: region--no-separator 81 | footer_id: footer 82 | footer_layout_container: container 83 | footer_region_paddings: 0 84 | footer_separator: region--no-separator 85 | footer_top_animation_effect: no-animation 86 | footer_top_background_color: region--tint-background 87 | footer_top_blocks_paddings: 0 88 | footer_top_id: footer-top 89 | footer_top_layout_container: container 90 | footer_top_region_paddings: 0 91 | footer_top_separator: region--no-separator 92 | hero_top_animation_effect: no-animation 93 | hero_top_background_color: region--tint-background 94 | hero_top_blocks_paddings: 0 95 | hero_top_id: hero-top 96 | hero_top_layout_container: container 97 | hero_top_region_paddings: 0 98 | hero_animation_effect: no-animation 99 | hero_background_color: region--bright-background 100 | hero_blocks_paddings: 1 101 | hero_id: hero 102 | hero_layout_container: container 103 | hero_region_paddings: 1 104 | sticky_footer_layout_container: container 105 | sticky_footer_background_color: region--tint-background 106 | sticky_footer_blocks_paddings: 0 107 | sticky_footer_region_paddings: 0 108 | sticky_footer_trigger_text: '' 109 | google_maps_key: your_google_maps_key 110 | header_background_color: region--bright-background 111 | header_background_image_state: 0 112 | header_blocks_paddings: 0 113 | header_layout_container: container 114 | header_region_paddings: 1 115 | header_top_animation_effect: no-animation 116 | header_top_background_color: region--bright-background 117 | header_top_blocks_paddings: 0 118 | header_top_highlighted_animation_effect: fadeIn 119 | header_top_highlighted_background_color: region--bright-background 120 | header_top_highlighted_blocks_paddings: 0 121 | header_top_highlighted_layout_container: container 122 | header_top_highlighted_region_paddings: 1 123 | header_top_layout_container: container 124 | header_top_region_paddings: 0 125 | headings_font_family: hff-54 126 | headings_wide_spacing: 0 127 | highlighted_animation_effect: fadeIn 128 | highlighted_background_color: region--bright-background 129 | highlighted_blocks_paddings: 0 130 | highlighted_id: highlighted 131 | highlighted_layout_container: container 132 | highlighted_region_paddings: 0 133 | highlighted_separator: region--no-separator 134 | highlighted_top_animation_effect: fadeIn 135 | highlighted_top_background_color: region--accent-background 136 | highlighted_top_blocks_paddings: 0 137 | highlighted_top_id: highlighted-top 138 | highlighted_top_layout_container: container 139 | highlighted_top_region_paddings: 0 140 | highlighted_top_separator: region--no-separator 141 | in_page_navigation_offset: '69' 142 | in_page_slider_effect: fade 143 | flexslider_main_effect: fade 144 | flexslider_main_effect_time: '5' 145 | inverted_header_state: 1 146 | isotope_filters_text: All 147 | isotope_layout_mode: fitRows 148 | layout_mode: wide 149 | main_content_layout_container: container 150 | main_content_animation_effect: no-animation 151 | main_content_blocks_paddings: 0 152 | main_content_id: main-content 153 | main_content_region_paddings: 0 154 | main_content_separator: region--no-separator 155 | main_content_background_color: region--bright-background 156 | owl_albums_autoplay: 1 157 | owl_albums_effect_time: '5' 158 | owl_articles_autoplay: 1 159 | owl_articles_effect_time: '5' 160 | owl_collections_autoplay: 0 161 | owl_collections_effect_time: '5' 162 | owl_products_autoplay: 1 163 | owl_products_effect_time: '5' 164 | owl_promoted_posts_autoplay: false 165 | owl_promoted_posts_effect_time: '5' 166 | owl_related_nodes_autoplay: 0 167 | owl_related_nodes_effect_time: '5' 168 | owl_team_members_autoplay: 1 169 | owl_team_members_effect_time: '5' 170 | owl_testimonials_autoplay: 1 171 | owl_testimonials_effect_time: '5' 172 | page_container_border: 0 173 | paragraph_font_family: pff-54 174 | paragraph_responsive_typography: 0 175 | post_progress: 1 176 | print_button: 1 177 | reading_time: 1 178 | rs_slideshow_background_opacity: '50' 179 | rs_slideshow_boxedwidth_bullets_position: center 180 | rs_slideshow_boxedwidth_effect: random 181 | rs_slideshow_boxedwidth_effect_time: '10' 182 | rs_slideshow_boxedwidth_initial_height: '500' 183 | rs_slideshow_boxedwidth_auto_height: 0 184 | rs_slideshow_boxedwidth_navigation_style: bullets 185 | rs_slideshow_boxedwidth_touch_swipe: 1 186 | rs_slideshow_caption_opacity: '0' 187 | rs_slideshow_fullscreen_bullets_position: right 188 | rs_slideshow_fullscreen_effect: random 189 | rs_slideshow_fullscreen_effect_time: '10' 190 | rs_slideshow_fullscreen_navigation_style: bullets 191 | rs_slideshow_fullscreen_touch_swipe: 1 192 | rs_slideshow_fullwidth_bullets_position: right 193 | rs_slideshow_fullwidth_effect: random 194 | rs_slideshow_fullwidth_effect_time: '10' 195 | rs_slideshow_fullwidth_initial_height: '500' 196 | rs_slideshow_fullwidth_auto_height: 0 197 | rs_slideshow_fullwidth_navigation_style: bullets 198 | rs_slideshow_fullwidth_touch_swipe: 1 199 | rs_slideshow_internal_banner_bullets_position: left 200 | rs_slideshow_internal_bullets_position: left 201 | rs_slideshow_internal_carousel_bullets_position: center 202 | rs_slideshow_internal_carousel_effect: fade 203 | rs_slideshow_internal_carousel_initial_height: '540' 204 | rs_slideshow_internal_carousel_touch_swipe: 1 205 | rs_slideshow_internal_effect: fade 206 | rs_slideshow_internal_effect_time: '10' 207 | rs_slideshow_internal_initial_height: '450' 208 | rs_slideshow_internal_auto_height: 0 209 | rs_slideshow_internal_navigation_style: bullets 210 | rs_slideshow_internal_touch_swipe: 1 211 | scroll_to_top_display: 1 212 | scroll_to_top_icon: fa-angles-up 213 | share_links: 1 214 | share_links_print_position: bottom 215 | sidebar_first_animation_effect: fadeIn 216 | sidebar_first_blocks_paddings: 0 217 | sidebar_first_region_paddings: 0 218 | sidebar_second_animation_effect: fadeIn 219 | sidebar_second_blocks_paddings: 0 220 | sidebar_second_region_paddings: 0 221 | sitename_font_family: sff-54 222 | slideout_background_color: region--bright-background 223 | slideout_mobile_menu_display: 0 224 | slideout_blocks_paddings: 0 225 | slideout_region_paddings: 0 226 | slideout_side: right 227 | slideout_touch_swipe: 0 228 | slogan_font_family: slff-54 229 | sub_featured_animation_effect: no-animation 230 | sub_featured_background_color: region--accent-background 231 | sub_featured_blocks_paddings: 0 232 | sub_featured_id: sub-featured 233 | sub_featured_layout_container: container 234 | sub_featured_region_paddings: 0 235 | sub_featured_separator: region--no-separator 236 | subfooter_background_color: region--shade-background 237 | subfooter_blocks_paddings: 0 238 | subfooter_bottom_blocks_paddings: false 239 | subfooter_bottom_region_paddings: false 240 | subfooter_id: subfooter 241 | subfooter_layout_container: container 242 | subfooter_region_paddings: 0 243 | subfooter_separator: region--no-separator 244 | subfooter_top_background_color: region--tint-background 245 | subfooter_top_blocks_paddings: 0 246 | subfooter_top_id: subfooter-top 247 | subfooter_top_layout_container: container 248 | subfooter_top_region_paddings: 0 249 | subfooter_top_separator: region--no-separator 250 | transparent_header_opacity: '0' 251 | transparent_header_state: 1 252 | total_node_views: 1 253 | purechat_key: '' 254 | purechat_display: 0 255 | mobile_menu_widget_display: 1 256 | mobile_menu_widget_sticky: 1 257 | rs_slideshow_internal_layout: fullscreen 258 | header_horizontal_paddings: 1 259 | font_title: '' 260 | enable_pwa: 0 261 | -------------------------------------------------------------------------------- /licence.txt: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 2, June 1991 3 | 4 | Copyright (C) 1989, 1991 Free Software Foundation, Inc., 5 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA 6 | Everyone is permitted to copy and distribute verbatim copies 7 | of this license document, but changing it is not allowed. 8 | 9 | Preamble 10 | 11 | The licenses for most software are designed to take away your 12 | freedom to share and change it. By contrast, the GNU General Public 13 | License is intended to guarantee your freedom to share and change free 14 | software--to make sure the software is free for all its users. This 15 | General Public License applies to most of the Free Software 16 | Foundation's software and to any other program whose authors commit to 17 | using it. (Some other Free Software Foundation software is covered by 18 | the GNU Lesser General Public License instead.) You can apply it to 19 | your programs, too. 20 | 21 | When we speak of free software, we are referring to freedom, not 22 | price. Our General Public Licenses are designed to make sure that you 23 | have the freedom to distribute copies of free software (and charge for 24 | this service if you wish), that you receive source code or can get it 25 | if you want it, that you can change the software or use pieces of it 26 | in new free programs; and that you know you can do these things. 27 | 28 | To protect your rights, we need to make restrictions that forbid 29 | anyone to deny you these rights or to ask you to surrender the rights. 30 | These restrictions translate to certain responsibilities for you if you 31 | distribute copies of the software, or if you modify it. 32 | 33 | For example, if you distribute copies of such a program, whether 34 | gratis or for a fee, you must give the recipients all the rights that 35 | you have. You must make sure that they, too, receive or can get the 36 | source code. And you must show them these terms so they know their 37 | rights. 38 | 39 | We protect your rights with two steps: (1) copyright the software, and 40 | (2) offer you this license which gives you legal permission to copy, 41 | distribute and/or modify the software. 42 | 43 | Also, for each author's protection and ours, we want to make certain 44 | that everyone understands that there is no warranty for this free 45 | software. If the software is modified by someone else and passed on, we 46 | want its recipients to know that what they have is not the original, so 47 | that any problems introduced by others will not reflect on the original 48 | authors' reputations. 49 | 50 | Finally, any free program is threatened constantly by software 51 | patents. We wish to avoid the danger that redistributors of a free 52 | program will individually obtain patent licenses, in effect making the 53 | program proprietary. To prevent this, we have made it clear that any 54 | patent must be licensed for everyone's free use or not licensed at all. 55 | 56 | The precise terms and conditions for copying, distribution and 57 | modification follow. 58 | 59 | GNU GENERAL PUBLIC LICENSE 60 | TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION 61 | 62 | 0. This License applies to any program or other work which contains 63 | a notice placed by the copyright holder saying it may be distributed 64 | under the terms of this General Public License. The "Program", below, 65 | refers to any such program or work, and a "work based on the Program" 66 | means either the Program or any derivative work under copyright law: 67 | that is to say, a work containing the Program or a portion of it, 68 | either verbatim or with modifications and/or translated into another 69 | language. (Hereinafter, translation is included without limitation in 70 | the term "modification".) Each licensee is addressed as "you". 71 | 72 | Activities other than copying, distribution and modification are not 73 | covered by this License; they are outside its scope. The act of 74 | running the Program is not restricted, and the output from the Program 75 | is covered only if its contents constitute a work based on the 76 | Program (independent of having been made by running the Program). 77 | Whether that is true depends on what the Program does. 78 | 79 | 1. You may copy and distribute verbatim copies of the Program's 80 | source code as you receive it, in any medium, provided that you 81 | conspicuously and appropriately publish on each copy an appropriate 82 | copyright notice and disclaimer of warranty; keep intact all the 83 | notices that refer to this License and to the absence of any warranty; 84 | and give any other recipients of the Program a copy of this License 85 | along with the Program. 86 | 87 | You may charge a fee for the physical act of transferring a copy, and 88 | you may at your option offer warranty protection in exchange for a fee. 89 | 90 | 2. You may modify your copy or copies of the Program or any portion 91 | of it, thus forming a work based on the Program, and copy and 92 | distribute such modifications or work under the terms of Section 1 93 | above, provided that you also meet all of these conditions: 94 | 95 | a) You must cause the modified files to carry prominent notices 96 | stating that you changed the files and the date of any change. 97 | 98 | b) You must cause any work that you distribute or publish, that in 99 | whole or in part contains or is derived from the Program or any 100 | part thereof, to be licensed as a whole at no charge to all third 101 | parties under the terms of this License. 102 | 103 | c) If the modified program normally reads commands interactively 104 | when run, you must cause it, when started running for such 105 | interactive use in the most ordinary way, to print or display an 106 | announcement including an appropriate copyright notice and a 107 | notice that there is no warranty (or else, saying that you provide 108 | a warranty) and that users may redistribute the program under 109 | these conditions, and telling the user how to view a copy of this 110 | License. (Exception: if the Program itself is interactive but 111 | does not normally print such an announcement, your work based on 112 | the Program is not required to print an announcement.) 113 | 114 | These requirements apply to the modified work as a whole. If 115 | identifiable sections of that work are not derived from the Program, 116 | and can be reasonably considered independent and separate works in 117 | themselves, then this License, and its terms, do not apply to those 118 | sections when you distribute them as separate works. But when you 119 | distribute the same sections as part of a whole which is a work based 120 | on the Program, the distribution of the whole must be on the terms of 121 | this License, whose permissions for other licensees extend to the 122 | entire whole, and thus to each and every part regardless of who wrote it. 123 | 124 | Thus, it is not the intent of this section to claim rights or contest 125 | your rights to work written entirely by you; rather, the intent is to 126 | exercise the right to control the distribution of derivative or 127 | collective works based on the Program. 128 | 129 | In addition, mere aggregation of another work not based on the Program 130 | with the Program (or with a work based on the Program) on a volume of 131 | a storage or distribution medium does not bring the other work under 132 | the scope of this License. 133 | 134 | 3. You may copy and distribute the Program (or a work based on it, 135 | under Section 2) in object code or executable form under the terms of 136 | Sections 1 and 2 above provided that you also do one of the following: 137 | 138 | a) Accompany it with the complete corresponding machine-readable 139 | source code, which must be distributed under the terms of Sections 140 | 1 and 2 above on a medium customarily used for software interchange; or, 141 | 142 | b) Accompany it with a written offer, valid for at least three 143 | years, to give any third party, for a charge no more than your 144 | cost of physically performing source distribution, a complete 145 | machine-readable copy of the corresponding source code, to be 146 | distributed under the terms of Sections 1 and 2 above on a medium 147 | customarily used for software interchange; or, 148 | 149 | c) Accompany it with the information you received as to the offer 150 | to distribute corresponding source code. (This alternative is 151 | allowed only for noncommercial distribution and only if you 152 | received the program in object code or executable form with such 153 | an offer, in accord with Subsection b above.) 154 | 155 | The source code for a work means the preferred form of the work for 156 | making modifications to it. For an executable work, complete source 157 | code means all the source code for all modules it contains, plus any 158 | associated interface definition files, plus the scripts used to 159 | control compilation and installation of the executable. However, as a 160 | special exception, the source code distributed need not include 161 | anything that is normally distributed (in either source or binary 162 | form) with the major components (compiler, kernel, and so on) of the 163 | operating system on which the executable runs, unless that component 164 | itself accompanies the executable. 165 | 166 | If distribution of executable or object code is made by offering 167 | access to copy from a designated place, then offering equivalent 168 | access to copy the source code from the same place counts as 169 | distribution of the source code, even though third parties are not 170 | compelled to copy the source along with the object code. 171 | 172 | 4. You may not copy, modify, sublicense, or distribute the Program 173 | except as expressly provided under this License. Any attempt 174 | otherwise to copy, modify, sublicense or distribute the Program is 175 | void, and will automatically terminate your rights under this License. 176 | However, parties who have received copies, or rights, from you under 177 | this License will not have their licenses terminated so long as such 178 | parties remain in full compliance. 179 | 180 | 5. You are not required to accept this License, since you have not 181 | signed it. However, nothing else grants you permission to modify or 182 | distribute the Program or its derivative works. These actions are 183 | prohibited by law if you do not accept this License. Therefore, by 184 | modifying or distributing the Program (or any work based on the 185 | Program), you indicate your acceptance of this License to do so, and 186 | all its terms and conditions for copying, distributing or modifying 187 | the Program or works based on it. 188 | 189 | 6. Each time you redistribute the Program (or any work based on the 190 | Program), the recipient automatically receives a license from the 191 | original licensor to copy, distribute or modify the Program subject to 192 | these terms and conditions. You may not impose any further 193 | restrictions on the recipients' exercise of the rights granted herein. 194 | You are not responsible for enforcing compliance by third parties to 195 | this License. 196 | 197 | 7. If, as a consequence of a court judgment or allegation of patent 198 | infringement or for any other reason (not limited to patent issues), 199 | conditions are imposed on you (whether by court order, agreement or 200 | otherwise) that contradict the conditions of this License, they do not 201 | excuse you from the conditions of this License. If you cannot 202 | distribute so as to satisfy simultaneously your obligations under this 203 | License and any other pertinent obligations, then as a consequence you 204 | may not distribute the Program at all. For example, if a patent 205 | license would not permit royalty-free redistribution of the Program by 206 | all those who receive copies directly or indirectly through you, then 207 | the only way you could satisfy both it and this License would be to 208 | refrain entirely from distribution of the Program. 209 | 210 | If any portion of this section is held invalid or unenforceable under 211 | any particular circumstance, the balance of the section is intended to 212 | apply and the section as a whole is intended to apply in other 213 | circumstances. 214 | 215 | It is not the purpose of this section to induce you to infringe any 216 | patents or other property right claims or to contest validity of any 217 | such claims; this section has the sole purpose of protecting the 218 | integrity of the free software distribution system, which is 219 | implemented by public license practices. Many people have made 220 | generous contributions to the wide range of software distributed 221 | through that system in reliance on consistent application of that 222 | system; it is up to the author/donor to decide if he or she is willing 223 | to distribute software through any other system and a licensee cannot 224 | impose that choice. 225 | 226 | This section is intended to make thoroughly clear what is believed to 227 | be a consequence of the rest of this License. 228 | 229 | 8. If the distribution and/or use of the Program is restricted in 230 | certain countries either by patents or by copyrighted interfaces, the 231 | original copyright holder who places the Program under this License 232 | may add an explicit geographical distribution limitation excluding 233 | those countries, so that distribution is permitted only in or among 234 | countries not thus excluded. In such case, this License incorporates 235 | the limitation as if written in the body of this License. 236 | 237 | 9. The Free Software Foundation may publish revised and/or new versions 238 | of the General Public License from time to time. Such new versions will 239 | be similar in spirit to the present version, but may differ in detail to 240 | address new problems or concerns. 241 | 242 | Each version is given a distinguishing version number. If the Program 243 | specifies a version number of this License which applies to it and "any 244 | later version", you have the option of following the terms and conditions 245 | either of that version or of any later version published by the Free 246 | Software Foundation. If the Program does not specify a version number of 247 | this License, you may choose any version ever published by the Free Software 248 | Foundation. 249 | 250 | 10. If you wish to incorporate parts of the Program into other free 251 | programs whose distribution conditions are different, write to the author 252 | to ask for permission. For software which is copyrighted by the Free 253 | Software Foundation, write to the Free Software Foundation; we sometimes 254 | make exceptions for this. Our decision will be guided by the two goals 255 | of preserving the free status of all derivatives of our free software and 256 | of promoting the sharing and reuse of software generally. 257 | 258 | NO WARRANTY 259 | 260 | 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY 261 | FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN 262 | OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES 263 | PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED 264 | OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 265 | MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS 266 | TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE 267 | PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, 268 | REPAIR OR CORRECTION. 269 | 270 | 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 271 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR 272 | REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, 273 | INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING 274 | OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED 275 | TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY 276 | YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER 277 | PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE 278 | POSSIBILITY OF SUCH DAMAGES. 279 | 280 | END OF TERMS AND CONDITIONS 281 | 282 | How to Apply These Terms to Your New Programs 283 | 284 | If you develop a new program, and you want it to be of the greatest 285 | possible use to the public, the best way to achieve this is to make it 286 | free software which everyone can redistribute and change under these terms. 287 | 288 | To do so, attach the following notices to the program. It is safest 289 | to attach them to the start of each source file to most effectively 290 | convey the exclusion of warranty; and each file should have at least 291 | the "copyright" line and a pointer to where the full notice is found. 292 | 293 | 294 | Copyright (C) 295 | 296 | This program is free software; you can redistribute it and/or modify 297 | it under the terms of the GNU General Public License as published by 298 | the Free Software Foundation; either version 2 of the License, or 299 | (at your option) any later version. 300 | 301 | This program is distributed in the hope that it will be useful, 302 | but WITHOUT ANY WARRANTY; without even the implied warranty of 303 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 304 | GNU General Public License for more details. 305 | 306 | You should have received a copy of the GNU General Public License along 307 | with this program; if not, write to the Free Software Foundation, Inc., 308 | 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. 309 | 310 | Also add information on how to contact you by electronic and paper mail. 311 | 312 | If the program is interactive, make it output a short notice like this 313 | when it starts in an interactive mode: 314 | 315 | Gnomovision version 69, Copyright (C) year name of author 316 | Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 317 | This is free software, and you are welcome to redistribute it 318 | under certain conditions; type `show c' for details. 319 | 320 | The hypothetical commands `show w' and `show c' should show the appropriate 321 | parts of the General Public License. Of course, the commands you use may 322 | be called something other than `show w' and `show c'; they could even be 323 | mouse-clicks or menu items--whatever suits your program. 324 | 325 | You should also get your employer (if you work as a programmer) or your 326 | school, if any, to sign a "copyright disclaimer" for the program, if 327 | necessary. Here is a sample; alter the names: 328 | 329 | Yoyodyne, Inc., hereby disclaims all copyright interest in the program 330 | `Gnomovision' (which makes passes at compilers) written by James Hacker. 331 | 332 | , 1 April 1989 333 | Ty Coon, President of Vice 334 | 335 | This General Public License does not permit incorporating your program into 336 | proprietary programs. If your program is a subroutine library, you may 337 | consider it more useful to permit linking proprietary applications with the 338 | library. If this is what you want to do, use the GNU Lesser General 339 | Public License instead of this License. -------------------------------------------------------------------------------- /css/theme/base-color.css: -------------------------------------------------------------------------------- 1 | /** 2 | * @file 3 | * Color styling rules for Corporate Clean. 4 | * 5 | */ 6 | 7 | /* base: elements */ 8 | body { 9 | background-color: var(--mt-color-bright); 10 | color: var(--mt-color-bright-contrast); 11 | } 12 | a.link--bordered, 13 | .link--bordered a { 14 | border-color: var(--mt-color-secondary); 15 | } 16 | .text--colored { 17 | color: var(--mt-color-colored); 18 | } 19 | .region--colored-background .text--colored { 20 | color: var(--mt-color-colored-contrast); 21 | } 22 | .link--hover-style-3 { 23 | background-image: linear-gradient(hsla(var(--mt-color-secondary-value), 0.5) 0%, hsla(var(--mt-color-secondary-value), 0.5) 100%); 24 | } 25 | .link--hover-style-3:hover, 26 | .link--hover-style-3:focus { 27 | background-image: linear-gradient(var(--mt-color-secondary) 0%, var(--mt-color-secondary) 100%); 28 | } 29 | .region--colored-background .link--hover-style-3:hover, 30 | .region--colored-background .link--hover-style-3:focus { 31 | color: var(--mt-color-colored); 32 | } 33 | .mt-link-style-animated-underline-1 .mt-link-stylable:after { 34 | background-color: var(--mt-color-secondary); 35 | } 36 | .mt-link-style-animated-underline-2 .mt-link-stylable:after { 37 | background-color: var(--mt-color-secondary); 38 | } 39 | .mt-link-style-animated-underline-3 .mt-link-stylable:before { 40 | background-color: var(--mt-color-secondary); 41 | } 42 | .mt-link-style-animated-background-1 .mt-link-stylable:before { 43 | background-color: var(--mt-color-secondary); 44 | } 45 | .mt-link-style-animated-background-2 .mt-link-stylable:after { 46 | background-color: var(--mt-color-secondary); 47 | } 48 | .mt-link-style-animated-background-3 .mt-link-stylable:before { 49 | background-color: var(--mt-color-secondary); 50 | } 51 | .block-title.block-title--border { 52 | border-color: var(--mt-color-secondary); 53 | } 54 | .region--colored-background .block-title.block-title--border { 55 | border-color: var(--mt-color-colored-contrast); 56 | } 57 | .sidebar__section h4.title:before, 58 | .sidebar__section h2.title:before, 59 | .sidebar__section nav > h2:before, 60 | .sidebar__section .block-search > h2:before { 61 | background-color: var(--mt-color-colored); 62 | } 63 | :root { 64 | --mt-region-color: var(--mt-color-default); 65 | --mt-region-contrast-color: var(--mt-color-default-contrast); 66 | --mt-link-color: var(--mt-color-secondary); 67 | --mt-dark-link-color: var(--mt-color-primary-dark); 68 | --mt-link-border-color: var(--mt-color-default-contrast); 69 | --mt-link-outline-color: var(--mt-color-default-contrast); 70 | --mt-link-color-hover: var(--mt-color-secondary-dark); 71 | --mt-dark-link-color-hover: var(--mt-color-primary); 72 | --mt-border-color: rgba(var(--mt-color-default-contrast-value), 0.2); 73 | } 74 | /* base: layout */ 75 | .region--default-background { 76 | --mt-region-color: var(--mt-color-default); 77 | --mt-region-contrast-color: var(--mt-color-default-contrast); 78 | --mt-link-color: var(--mt-color-secondary); 79 | --mt-dark-link-color: var(--mt-color-primary-dark); 80 | --mt-link-border-color: var(--mt-color-default-contrast); 81 | --mt-link-outline-color: var(--mt-color-default-contrast); 82 | --mt-link-color-hover: var(--mt-color-secondary-dark); 83 | --mt-dark-link-color-hover: var(--mt-color-primary); 84 | --mt-border-color: rgba(var(--mt-color-default-contrast-value), 0.2); 85 | } 86 | .region--dark-colored-background { 87 | --mt-region-color: var(--mt-color-dark-colored); 88 | --mt-region-contrast-color: var(--mt-color-dark-colored-contrast); 89 | --mt-link-color: var(--mt-color-secondary-light); 90 | --mt-dark-link-color: var(--mt-color-secondary-light); 91 | --mt-link-border-color: var(--mt-color-dark-colored-contrast); 92 | --mt-link-outline-color: var(--mt-color-dark-colored-contrast); 93 | --mt-link-color-hover: var(--mt-color-dark-colored-contrast); 94 | --mt-dark-link-color-hover: var(--mt-color-dark-colored-contrast); 95 | --mt-border-color: rgba(var(--mt-color-dark-colored-contrast-value), 0.1); 96 | } 97 | .region--colored-background { 98 | --mt-region-color: var(--mt-color-colored); 99 | --mt-region-contrast-color: var(--mt-color-colored-contrast); 100 | --mt-link-color: var(--mt-color-secondary-light); 101 | --mt-dark-link-color: var(--mt-color-secondary-light); 102 | --mt-link-border-color: var(--mt-color-colored-contrast); 103 | --mt-link-outline-color: var(--mt-color-colored-contrast); 104 | --mt-link-color-hover: var(--mt-color-colored-contrast); 105 | --mt-dark-link-color-hover: var(--mt-color-colored-contrast); 106 | --mt-border-color: rgba(var(--mt-color-colored-contrast-value), 0.1); 107 | } 108 | .region--accent-background { 109 | --mt-region-color: var(--mt-color-accent); 110 | --mt-region-contrast-color: var(--mt-color-accent-contrast); 111 | --mt-link-color: var(--mt-color-secondary); 112 | --mt-dark-link-color: var(--mt-color-primary-dark); 113 | --mt-link-border-color: var(--mt-color-accent-contrast); 114 | --mt-link-outline-color: var(--mt-color-accent-contrast); 115 | --mt-link-color-hover: var(--mt-color-secondary-dark); 116 | --mt-dark-link-color-hover: var(--mt-color-primary); 117 | --mt-border-color: rgba(var(--mt-color-accent-contrast-value), 0.2); 118 | } 119 | .region--tint-background { 120 | --mt-region-color: var(--mt-color-tint); 121 | --mt-region-contrast-color: var(--mt-color-tint-contrast); 122 | --mt-link-color: var(--mt-color-secondary); 123 | --mt-dark-link-color: var(--mt-color-primary-dark); 124 | --mt-link-border-color: var(--mt-color-tint-contrast); 125 | --mt-link-outline-color: var(--mt-color-tint-contrast); 126 | --mt-link-color-hover: var(--mt-color-secondary-dark); 127 | --mt-dark-link-color-hover: var(--mt-color-primary); 128 | --mt-border-color: rgba(var(--mt-color-tint-contrast-value), 0.2); 129 | } 130 | .region--shade-background { 131 | --mt-region-color: var(--mt-color-shade); 132 | --mt-region-contrast-color: var(--mt-color-shade-contrast); 133 | --mt-link-color: var(--mt-color-secondary-light); 134 | --mt-dark-link-color: var(--mt-color-secondary-light); 135 | --mt-link-border-color: var(--mt-color-shade-contrast); 136 | --mt-link-outline-color: var(--mt-color-shade-contrast); 137 | --mt-link-color-hover: var(--mt-color-shade-contrast); 138 | --mt-dark-link-color-hover: var(--mt-color-shade-contrast); 139 | --mt-border-color: rgba(var(--mt-color-shade-contrast-value), 0.1); 140 | } 141 | .region--bright-background { 142 | --mt-region-color: var(--mt-color-bright); 143 | --mt-region-contrast-color: var(--mt-color-bright-contrast); 144 | --mt-link-color: var(--mt-color-secondary); 145 | --mt-dark-link-color: var(--mt-color-primary-dark); 146 | --mt-link-border-color: var(--mt-color-bright-contrast); 147 | --mt-link-outline-color: var(--mt-color-bright-contrast); 148 | --mt-link-color-hover: var(--mt-color-secondary-dark); 149 | --mt-dark-link-color-hover: var(--mt-color-primary); 150 | --mt-border-color: rgba(var(--mt-color-bright-contrast-value), 0.2); 151 | } 152 | .region--pattern { 153 | --mt-region-color: var(--mt-color-pattern); 154 | --mt-region-contrast-color: var(--mt-color-pattern-contrast); 155 | --mt-link-color: var(--mt-color-secondary); 156 | --mt-dark-link-color: var(--mt-color-primary-dark); 157 | --mt-link-border-color: var(--mt-color-pattern-contrast); 158 | --mt-link-outline-color: var(--mt-color-pattern-contrast); 159 | --mt-link-color-hover: var(--mt-color-secondary-dark); 160 | --mt-dark-link-color-hover: var(--mt-color-primary); 161 | --mt-border-color: rgba(var(--mt-color-pattern-contrast-value), 0.2); 162 | } 163 | .region--dark-background { 164 | --mt-region-color: var(--mt-color-dark); 165 | --mt-region-contrast-color: var(--mt-color-dark-contrast); 166 | --mt-link-color: var(--mt-color-secondary-light); 167 | --mt-dark-link-color: var(--mt-color-secondary-light); 168 | --mt-link-border-color: var(--mt-color-dark-contrast); 169 | --mt-link-outline-color: var(--mt-color-dark-contrast); 170 | --mt-link-color-hover: var(--mt-color-dark-contrast); 171 | --mt-dark-link-color-hover: var(--mt-color-dark-contrast); 172 | --mt-border-color: rgba(var(--mt-color-dark-contrast-value), 0.3); 173 | } 174 | a { 175 | color: var(--mt-link-color); 176 | border-color: var(--mt-link-border-color); 177 | outline-color: var(--mt-link-outline-color); 178 | } 179 | a:hover, 180 | a:focus { 181 | color: var(--mt-link-color-hover); 182 | text-decoration: none; 183 | } 184 | .region--default-background, 185 | #drupal-off-canvas-wrapper label.region--default-background { 186 | background-color: var(--mt-color-default); 187 | color: var(--mt-color-default-contrast); 188 | border-color: var(--mt-border-color); 189 | --mt-color-high-contrast: var(--mt-color-base-dark); 190 | } 191 | .region--default-background input[type="submit"], 192 | .region--default-background input[type="reset"], 193 | .region--default-background input[type="button"] { 194 | outline-color: var(--mt-color-default-contrast); 195 | } 196 | .main-content.region--default-background, 197 | .featured-bottom.region--default-background { 198 | background-color: var(--mt-color-default-light); 199 | } 200 | .region--bright-background, 201 | #drupal-off-canvas-wrapper label.region--bright-background { 202 | background-color: var(--mt-color-bright); 203 | color: var(--mt-color-bright-contrast); 204 | border-color: var(--mt-border-color); 205 | --mt-color-high-contrast: var(--mt-color-base-dark); 206 | } 207 | .region--bright-background input[type="submit"], 208 | .region--bright-background input[type="reset"], 209 | .region--bright-background input[type="button"] { 210 | outline-color: var(--mt-color-bright-contrast); 211 | } 212 | .region--dark-colored-background, 213 | #drupal-off-canvas-wrapper label.region--dark-colored-background { 214 | background-color: var(--mt-color-dark-colored); 215 | color: var(--mt-color-dark-colored-contrast); 216 | border-color: var(--mt-border-color); 217 | --mt-color-high-contrast: var(--mt-color-dark-colored-contrast); 218 | } 219 | .region--dark-colored-background input[type="submit"], 220 | .region--dark-colored-background input[type="reset"], 221 | .region--dark-colored-background input[type="button"] { 222 | outline-color: var(--mt-color-dark-colored-contrast); 223 | } 224 | .region--colored-background, 225 | #drupal-off-canvas-wrapper label.region--colored-background { 226 | background-color: var(--mt-color-colored); 227 | color: var(--mt-color-colored-contrast); 228 | border-color: var(--mt-border-color); 229 | --mt-color-high-contrast: var(--mt-color-colored-contrast); 230 | } 231 | .region--colored-background input[type="submit"], 232 | .region--colored-background input[type="reset"], 233 | .region--colored-background input[type="button"] { 234 | outline-color: var(--mt-color-colored-contrast); 235 | } 236 | .region--accent-background, 237 | #drupal-off-canvas-wrapper label.region--accent-background { 238 | background-color: var(--mt-color-accent); 239 | color: var(--mt-color-accent-contrast); 240 | border-color: var(--mt-border-color); 241 | --mt-color-high-contrast: var(--mt-color-base-dark); 242 | } 243 | .region--accent-background input[type="submit"], 244 | .region--accent-background input[type="reset"], 245 | .region--accent-background input[type="button"] { 246 | outline-color: var(--mt-color-accent-contrast); 247 | } 248 | .region--tint-background, 249 | #drupal-off-canvas-wrapper label.region--tint-background { 250 | background-color: var(--mt-color-tint); 251 | color: var(--mt-color-tint-contrast); 252 | border-color: var(--mt-border-color); 253 | --mt-color-high-contrast: var(--mt-color-base-dark); 254 | } 255 | .region--tint-background input[type="submit"], 256 | .region--tint-background input[type="reset"], 257 | .region--tint-background input[type="button"] { 258 | outline-color: var(--mt-color-tint-contrast); 259 | } 260 | .region--shade-background, 261 | #drupal-off-canvas-wrapper label.region--shade-background { 262 | background-color: var(--mt-color-shade); 263 | color: var(--mt-color-shade-contrast); 264 | border-color: var(--mt-border-color); 265 | --mt-color-high-contrast: var(--mt-color-shade-contrast); 266 | } 267 | .region--shade-background input[type="submit"], 268 | .region--shade-background input[type="reset"], 269 | .region--shade-background input[type="button"] { 270 | outline-color: var(--mt-color-shade-contrast); 271 | } 272 | .region--pattern, 273 | #drupal-off-canvas-wrapper label.region--pattern { 274 | background-color: var(--mt-color-pattern); 275 | color: var(--mt-color-pattern-contrast); 276 | border-color: var(--mt-border-color); 277 | --mt-color-high-contrast: var(--mt-color-base-dark); 278 | } 279 | .region--pattern input[type="submit"], 280 | .region--pattern input[type="reset"], 281 | .region--pattern input[type="button"] { 282 | outline-color: var(--mt-color-pattern-contrast); 283 | } 284 | .region--dark-background, 285 | #drupal-off-canvas-wrapper label.region--dark-background { 286 | background-color: var(--mt-color-dark); 287 | color: var(--mt-color-dark-contrast); 288 | border-color: var(--mt-border-color); 289 | --mt-color-high-contrast: var(--mt-color-dark-contrast); 290 | } 291 | .region--dark-background input[type="submit"], 292 | .region--dark-background input[type="reset"], 293 | .region--dark-background input[type="button"] { 294 | outline-color: var(--mt-color-dark-contrast); 295 | } 296 | .region--bright-dark-colored-background { 297 | background: var(--mt-color-bright); 298 | background: -moz-linear-gradient(top, var(--mt-color-bright) 35%, var(--mt-color-dark-colored) 35%); 299 | background: -webkit-linear-gradient(top, var(--mt-color-bright) 35%, var(--mt-color-dark-colored) 35%); 300 | background: linear-gradient(to bottom, var(--mt-color-bright) 35%, var(--mt-color-dark-colored) 35%); 301 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--mt-color-bright)', endColorstr='var(--mt-color-dark-colored)',GradientType=0 ); 302 | } 303 | .region--tint-background + .region--bright-dark-colored-background { 304 | background: var(--mt-color-tint); 305 | background: -moz-linear-gradient(top, var(--mt-color-tint) 35%, var(--mt-color-dark-colored) 35%); 306 | background: -webkit-linear-gradient(top, var(--mt-color-tint) 35%, var(--mt-color-dark-colored) 35%); 307 | background: linear-gradient(to bottom, var(--mt-color-tint) 35%, var(--mt-color-dark-colored) 35%); 308 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--mt-color-tint)', endColorstr='var(--mt-color-dark-colored)',GradientType=0 ); 309 | } 310 | .region--bright-colored-background { 311 | background: var(--mt-color-bright); 312 | background: -moz-linear-gradient(top, var(--mt-color-bright) 35%, var(--mt-color-colored) 35%); 313 | background: -webkit-linear-gradient(top, var(--mt-color-bright) 35%, var(--mt-color-colored) 35%); 314 | background: linear-gradient(to bottom, var(--mt-color-bright) 35%, var(--mt-color-colored) 35%); 315 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--mt-color-bright)', endColorstr='var(--mt-color-colored)',GradientType=0 ); 316 | } 317 | .region--tint-background + .region--bright-colored-background { 318 | background: var(--mt-color-tint); 319 | background: -moz-linear-gradient(top, var(--mt-color-tint) 35%, var(--mt-color-colored) 35%); 320 | background: -webkit-linear-gradient(top, var(--mt-color-tint) 35%, var(--mt-color-colored) 35%); 321 | background: linear-gradient(to bottom, var(--mt-color-tint) 35%, var(--mt-color-colored) 35%); 322 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='var(--mt-color-tint)', endColorstr='var(--mt-color-colored)',GradientType=0 ); 323 | } 324 | .region--dark-colored-background + .region--separator-incline-diagonal:before { 325 | background: linear-gradient(to bottom right, var(--mt-color-dark-colored) 49.5%, transparent 50%); 326 | } 327 | .region--colored-background + .region--separator-incline-diagonal:before { 328 | background: linear-gradient(to bottom right, var(--mt-color-colored) 49.5%, transparent 50%); 329 | } 330 | .region--dark-colored-background + .region--separator-decline-diagonal:before { 331 | background: linear-gradient(to bottom left, var(--mt-color-dark-colored) 49.5%, transparent 50%); 332 | } 333 | .region--colored-background + .region--separator-decline-diagonal:before { 334 | background: linear-gradient(to bottom left, var(--mt-color-colored) 49.5%, transparent 50%); 335 | } 336 | .page-container-border-enabled .page-container { 337 | border-color: var(--mt-color-primary); 338 | } 339 | 340 | /* components: buttons */ 341 | a.mt-button, 342 | .mt-button > a, 343 | button.mt-button, 344 | input[type='submit'], 345 | input[type='reset'], 346 | input[type='button'], 347 | .btn.btn-primary { 348 | border-color: var(--mt-color-primary); 349 | background-color: var(--mt-color-primary); 350 | color: var(--mt-color-primary-contrast); 351 | } 352 | a.mt-button:hover, 353 | .mt-button > a:hover, 354 | button.mt-button:hover, 355 | input[type='submit']:hover, 356 | input[type='reset']:hover, 357 | input[type='button']:hover, 358 | .btn.btn-primary:hover { 359 | background-color: var(--mt-color-primary-dark); 360 | border-color: var(--mt-color-primary-dark); 361 | } 362 | a.mt-button:active, 363 | .mt-button > a:active, 364 | button.mt-button:active, 365 | input[type='submit']:active, 366 | input[type='reset']:active, 367 | input[type='button']:active, 368 | .btn.btn-primary:active, 369 | a.mt-button.mt-button--outline:active, 370 | .mt-button.mt-button--outline > a:active, 371 | input[type='submit'].mt-button--outline:active, 372 | input[type='reset'].mt-button--outline:active, 373 | input[type='button'].mt-button--outline:active { 374 | background-color: var(--mt-color-primary); 375 | border-color: var(--mt-color-primary); 376 | } 377 | a.mt-button:before, 378 | .mt-button > a:before, 379 | button.mt-button:before { 380 | background-color: var(--mt-color-primar-dark); 381 | } 382 | .region--colored-background a.mt-button:hover, 383 | .region--colored-background .mt-button > a:hover, 384 | .region--colored-background button.mt-button:hover, 385 | .region--colored-background input[type='submit']:hover, 386 | .region--colored-background input[type='reset']:hover, 387 | .region--colored-background input[type='button']:hover, 388 | .region--colored-background a.mt-button:active, 389 | .region--colored-background .mt-button > a:active, 390 | .region--colored-background button.mt-button:active, 391 | .region--colored-background input[type='submit']:active, 392 | .region--colored-background input[type='reset']:active, 393 | .region--colored-background input[type='button']:active { 394 | color: var(--mt-color-colored); 395 | } 396 | .region--dark-colored-background a.mt-button:hover, 397 | .region--dark-colored-background .mt-button > a:hover, 398 | .region--dark-colored-background button.mt-button:hover, 399 | .region--dark-colored-background input[type='submit']:hover, 400 | .region--dark-colored-background input[type='reset']:hover, 401 | .region--dark-colored-background input[type='button']:hover, 402 | .region--dark-colored-background a.mt-button:active, 403 | .region--dark-colored-background .mt-button > a:active, 404 | .region--dark-colored-background button.mt-button:active, 405 | .region--dark-colored-background input[type='submit']:active, 406 | .region--dark-colored-background input[type='reset']:active, 407 | .region--dark-colored-background input[type='button']:active { 408 | color: var(--mt-color-dark-colored); 409 | } 410 | .region--default-background a.mt-button.mt-button--hover-style-2:before, 411 | .region--default-background .mt-button.mt-button--hover-style-2 > a:before { 412 | background-color: var(--mt-color-default); 413 | } 414 | .region--bright-background a.mt-button.mt-button--hover-style-2:before, 415 | .region--bright-background .mt-button.mt-button--hover-style-2 > a:before { 416 | background-color: var(--mt-bright-default); 417 | } 418 | .region--pattern a.mt-button.mt-button--hover-style-2:before, 419 | .region--pattern .mt-button.mt-button--hover-style-2 > a:before { 420 | background-color: var(--mt-color-pattern); 421 | } 422 | .region--accent-background a.mt-button.mt-button--hover-style-2:before, 423 | .region--accent-background .mt-button.mt-button--hover-style-2 > a:before { 424 | background-color: var(--mt-color-accent); 425 | } 426 | .region--tint-background a.mt-button.mt-button--hover-style-2:before, 427 | .region--tint-background .mt-button.mt-button--hover-style-2 > a:before { 428 | background-color: var(--mt-color-tint); 429 | } 430 | .region--shade-background a.mt-button.mt-button--hover-style-2:before, 431 | .region--shade-background .mt-button.mt-button--hover-style-2 > a:before { 432 | background-color: var(--mt-color-shade); 433 | } 434 | .region--colored-background a.mt-button.mt-button--hover-style-2:before, 435 | .region--colored-background .mt-button.mt-button--hover-style-2 > a:before { 436 | background-color: var(--mt-color-colored); 437 | } 438 | .region--dark-colored-background a.mt-button.mt-button--hover-style-2:before, 439 | .region--dark-colored-background .mt-button.mt-button--hover-style-2 > a:before { 440 | background-color: var(--mt-color-dark-colored); 441 | } 442 | .region--dark-background a.mt-button.mt-button--hover-style-2:before, 443 | .region--dark-background .mt-button.mt-button--hover-style-2 > a:before { 444 | background-color: var(--mt-color-dark); 445 | } 446 | 447 | /* components: collapsible block */ 448 | .collapsible-block__trigger a { 449 | background-color: var(--mt-color-primary); 450 | color: var(--mt-color-primary-contrast); 451 | } 452 | .collapsible-block__trigger a:hover, 453 | .collapsible-block__trigger a:focus { 454 | background-color: var(--mt-color-primary-dark); 455 | color: var(--mt-color-primary-contrast); 456 | } 457 | .region--colored-background .collapsible-block__trigger a { 458 | background-color: var(--mt-color-primary-dark); 459 | text-decoration: none; 460 | } 461 | .region--colored-background .collapsible-block__trigger a:hover { 462 | background-color: hsla(var(--mt-color-primary-value), 0.8); 463 | } 464 | 465 | /* components: dropdowns */ 466 | .region--colored-background .dropdown-menu { 467 | background-color: hsla(var(--mt-color-colored-value), 0.95); 468 | } 469 | .region--dark-colored-background .dropdown-menu { 470 | background-color: hsla(var(--mt-color-dark-colored-value), 0.95); 471 | } 472 | 473 | /* components: fancy block */ 474 | .region--dark-colored-background .fancy-block-text { 475 | background-color: var(--mt-color-dark-colored); 476 | } 477 | .region--colored-background .fancy-block-text { 478 | background-color: var(--mt-color-colored); 479 | } 480 | 481 | /* components: fancy linked images block */ 482 | .clip-path-support .clip-pentagon-container { 483 | background-color: var(--mt-color-primary-dark); 484 | } 485 | .clip-path-support .clip-circle-container { 486 | background-color: var(--mt-color-primary-dark); 487 | } 488 | .clip-path-support .clip-rectangle-container:before { 489 | border-color: var(--mt-color-primary-dark); 490 | } 491 | 492 | /* CSS rules only for FF*/ 493 | @-moz-document url-prefix() { 494 | .clip-pentagon-container { 495 | background-color: var(--mt-color-primary-dark); 496 | } 497 | .clip-circle-container { 498 | background-color: var(--mt-color-primary-dark); 499 | } 500 | .clip-rectangle-container:before { 501 | border-color: var(--mt-color-primary-dark); 502 | } 503 | } 504 | 505 | /* components: forms */ 506 | input.form-text:hover, 507 | input.form-tel:hover, 508 | input.form-email:hover, 509 | input.form-url:hover, 510 | input.form-search:hover, 511 | input.form-file:hover, 512 | input.form-number:hover, 513 | input.form-color:hover, 514 | input.form-date:hover, 515 | input.form-time:hover, 516 | textarea:hover, 517 | select:hover, 518 | input.form-text:focus, 519 | input.form-tel:focus, 520 | input.form-email:focus, 521 | input.form-url:focus, 522 | input.form-search:focus, 523 | input.form-file:focus, 524 | input.form-number:focus, 525 | input.form-color:focus, 526 | input.form-date:focus, 527 | input.form-time:focus, 528 | textarea:focus, 529 | select:focus { 530 | border-color: var(--mt-form-border-focus); 531 | } 532 | .region--colored-background input.form-text:hover, 533 | .region--colored-background input.form-tel:hover, 534 | .region--colored-background input.form-email:hover, 535 | .region--colored-background input.form-url:hover, 536 | .region--colored-background input.form-search:hover, 537 | .region--colored-background input.form-file:hover, 538 | .region--colored-background input.form-number:hover, 539 | .region--colored-background input.form-color:hover, 540 | .region--colored-background input.form-date:hover, 541 | .region--colored-background input.form-time:hover, 542 | .region--colored-background textarea:hover, 543 | .region--colored-background select:hover, 544 | .region--colored-background input.form-text:focus, 545 | .region--colored-background input.form-tel:focus, 546 | .region--colored-background input.form-email:focus, 547 | .region--colored-background input.form-url:focus, 548 | .region--colored-background input.form-search:focus, 549 | .region--colored-background input.form-file:focus, 550 | .region--colored-background input.form-number:focus, 551 | .region--colored-background input.form-color:focus, 552 | .region--colored-background input.form-date:focus, 553 | .region--colored-background input.form-time:focus, 554 | .region--colored-background textarea:focus, 555 | .region--colored-background select:focus { 556 | border-color: var(--mt-form-border-focus-contrast); 557 | } 558 | 559 | /* components: content front page background */ 560 | @media (max-width: 767px) { 561 | .background-image-area.region--colored-background .header { 562 | background-color: var(--mt-color-colored); 563 | } 564 | .background-image-area.region--dark-colored-background .header { 565 | background-color: var(--mt-color-dark-colored); 566 | } 567 | } 568 | 569 | /* components: field taxonomy term */ 570 | .field--entity-reference-target-type-taxonomy-term:before, 571 | .field--entity-reference-target-type-taxonomy-term.field__item:before { 572 | color: var(--mt-color-primary); 573 | } 574 | .internal-banner-container--fullscreen .field--entity-reference-target-type-taxonomy-term:before, 575 | .internal-banner-container--fullscreen .field--entity-reference-target-type-taxonomy-term.field__item:before { 576 | color: var(--mt-color-secondary-light); 577 | } 578 | 579 | /* components: frontpage cover block */ 580 | .cta-button { 581 | border-color: var(--mt-color-primary); 582 | } 583 | .cta-button:hover, 584 | .cta-button:focus { 585 | background-color: hsla(var(--mt-color-primary-value), 0.15); 586 | } 587 | .cta-button span { 588 | background-color: var(--mt-color-primary); 589 | } 590 | 591 | /* components: hero */ 592 | .region--dark-colored-background .hero-caption { 593 | background-color: var(--mt-color-dark-colored); 594 | } 595 | .region--colored-background .hero-caption { 596 | background-color: var(--mt-color-colored); 597 | } 598 | 599 | /* components: how it works */ 600 | .region--default-background .field--name-field-mt-hiw-item .field__item .how-it-works__badge { 601 | background-color: var(--mt-color-default); 602 | } 603 | .region--bright-background .field--name-field-mt-hiw-item .field__item .how-it-works__badge { 604 | background-color: var(--mt-color-bright); 605 | } 606 | .region--pattern .field--name-field-mt-hiw-item .field__item .how-it-works__badge { 607 | background-color: var(--mt-color-pattern); 608 | } 609 | .region--accent-background .field--name-field-mt-hiw-item .field__item .how-it-works__badge { 610 | background-color: var(--mt-color-accent); 611 | } 612 | .region--tint-background .field--name-field-mt-hiw-item .field__item .how-it-works__badge { 613 | background-color: var(--mt-color-tint); 614 | } 615 | .region--shade-background .field--name-field-mt-hiw-item .field__item .how-it-works__badge { 616 | background-color: var(--mt-color-shade); 617 | } 618 | .region--colored-background .field--name-field-mt-hiw-item .field__item .how-it-works__badge { 619 | background-color: var(--mt-color-colored); 620 | } 621 | .region--dark-colored-background .field--name-field-mt-hiw-item .field__item .how-it-works__badge { 622 | background-color: var(--mt-color-dark-colored); 623 | } 624 | .region--dark-background .field--name-field-mt-hiw-item .field__item .how-it-works__badge { 625 | background-color: var(--mt-color-dark); 626 | } 627 | 628 | /* components: icons feature */ 629 | .paragraph--type--mt-icon-features:hover { 630 | color: var(--mt-color-primary-contrast); 631 | background-color: var(--mt-color-primary); 632 | } 633 | .feature__icon { 634 | color: var(--mt-color-primary-light); 635 | } 636 | .paragraph--type--mt-icon-features .feature__icon .fontawesome-icon { 637 | background-color: hsla(var(--mt-color-primary-light-value), 0.1); 638 | } 639 | .paragraph--type--mt-icon-features:hover .feature__icon .fontawesome-icon { 640 | background-color: var(--mt-color-primary-contrast); 641 | } 642 | .paragraph--type--mt-icon-features:hover .feature__icon { 643 | color: var(--mt-color-primary); 644 | } 645 | .paragraph--type--mt-icon-features:hover .feature__link a { 646 | color: var(--mt-color-primary-contrast); 647 | } 648 | .mt-link-style-animated-background-2 .paragraph--type--mt-icon-features:hover .feature__link a:after { 649 | background-color: var(--mt-color-primary-contrast); 650 | } 651 | 652 | /* components: icons list */ 653 | .region--bright-background ul.icons-list.icons-list--bordered li a:hover { 654 | color: var(--mt-color-primary); 655 | border-color: var(--mt-color-primary); 656 | } 657 | 658 | /* components: image overlay */ 659 | .overlay--colored { 660 | background-color: hsla(var(--mt-color-primary-dark-value), 0.5); 661 | } 662 | .overlay--visible:hover { 663 | background-color: hsla(var(--mt-color-primary-dark-value), 0.6); 664 | } 665 | .overlay-icon:hover, 666 | .overlay-icon:focus { 667 | color: var(--mt-color-primary-dark); 668 | } 669 | .overlay-icon--button { 670 | color: var(--mt-color-primary-dark); 671 | } 672 | 673 | /* components: image with overlaid text */ 674 | .region--colored-background .image-with-overlaid-text__text { 675 | background-color: hsla(var(--mt-color-colored-value), 0.75); 676 | } 677 | .region--dark-colored-background .image-with-overlaid-text__text { 678 | background-color: hsla(var(--mt-color-dark-colored-value), 0.75); 679 | } 680 | 681 | /* components: in page navigation */ 682 | .header-container ul.in-page-navigation li a.active, 683 | .header-container ul.in-page-navigation li a:hover, 684 | .header-container ul.in-page-navigation li a:focus { 685 | color: var(--mt-color-primary); 686 | } 687 | .header-container .region--colored-background ul.in-page-navigation li a.active, 688 | .header-container .region--colored-background ul.in-page-navigation li a:hover, 689 | .header-container .region--colored-background ul.in-page-navigation li a:focus { 690 | color: rgba(var(--mt-color-primary-contrast-value), 0.6); 691 | } 692 | 693 | /* components: language switcher */ 694 | .block-language ul li .is-active { 695 | color: var(--mt-color-primary); 696 | } 697 | .region--colored-background .block-language ul li .is-active { 698 | color: rgba(var(--mt-color-colored-contrast-value), 0.6); 699 | } 700 | 701 | /* components: menu */ 702 | ul.menu a.is-active { 703 | color: var(--mt-color-primary); 704 | } 705 | 706 | /* components: header menu */ 707 | .region--default-background { 708 | --mt-menu-item-color: var(--mt-color-default-contrast); 709 | --mt-submenu-background-color: var(--mt-color-default-light); 710 | } 711 | .region--tint-background { 712 | --mt-menu-item-color: var(--mt-color-tint-contrast); 713 | --mt-submenu-background-color: var(--mt-color-tint); 714 | } 715 | .region--shade-background { 716 | --mt-menu-item-color: var(--mt-color-shade-contrast); 717 | --mt-submenu-background-color: var(--mt-color-shade); 718 | } 719 | .region--dark-colored-background { 720 | --mt-menu-item-color: var(--mt-color-dark-colored-contrast); 721 | --mt-submenu-background-color: var(--mt-color-dark-colored); 722 | } 723 | .region--colored-background { 724 | --mt-menu-item-color: var(--mt-color-colored-contrast); 725 | --mt-submenu-background-color: var(--mt-color-colored); 726 | --mt-menu-item-opacity: 0.75; 727 | --mt-menu-item-hover-opacity: 1; 728 | } 729 | .region--bright-background { 730 | --mt-menu-item-color: var(--mt-color-bright-contrast); 731 | --mt-submenu-background-color: var(--mt-color-bright); 732 | } 733 | .region--dark-background { 734 | --mt-menu-item-color: var(--mt-color-dark-contrast); 735 | --mt-submenu-background-color: var(--mt-color-dark); 736 | } 737 | .region--accent-background { 738 | --mt-menu-item-color: var(--mt-color-accent-contrast); 739 | --mt-submenu-background-color: var(--mt-color-accent); 740 | } 741 | .region--pattern { 742 | --mt-menu-item-color: var(--mt-color-pattern-contrast); 743 | --mt-submenu-background-color: var(--mt-color-pattern); 744 | } 745 | .header-container .sf-menu.menu ul { 746 | background-color: var(--mt-submenu-background-color); 747 | } 748 | ul.menu li a, 749 | ul.menu li > span { 750 | color: var(--mt-menu-item-color); 751 | opacity: var(--mt-menu-item-opacity); 752 | } 753 | ul.menu li a:hover { 754 | opacity: var(--mt-menu-item-hover-opacity); 755 | } 756 | .header-container .sf-menu ul li.sfHover > a, 757 | .header-container .sf-menu ul li a:hover, 758 | .header-container .sf-menu ul li > a.is-active, 759 | .header-container .sf-menu ul li.active-trail > a { 760 | opacity: 0.8; 761 | } 762 | @media (min-width: 992px) { 763 | /* .header-container .sf-menu > li.sfHover > a, 764 | .header-container .sf-menu > li > a:hover, 765 | .header-container .sf-menu > li > a:focus, 766 | .header-container .sf-menu > li.active-trail > a, 767 | .header-container .sf-menu > li > a.active { 768 | border-top-color: var(--mt-color-primary); 769 | } */ 770 | } 771 | /* .header-container .region--colored-background .sf-menu ul li.sfHover > a, 772 | .header-container .region--colored-background .sf-menu ul li a:hover, 773 | .header-container .region--colored-background .sf-menu ul li > a.is-active, 774 | .header-container .region--colored-background .sf-menu ul li.active-trail > a { 775 | background-color: var(--mt-color-colored-contrast); 776 | color: var(--mt-color-colored); 777 | } */ 778 | @media (min-width: 992px) { 779 | /* .header-container .region--colored-background .sf-menu > li.sfHover > a, 780 | .header-container .region--colored-background .sf-menu > li > a:hover, 781 | .header-container .region--colored-background .sf-menu > li > a:focus, 782 | .header-container .region--colored-background .sf-menu > li.active-trail > a, 783 | .header-container .region--colored-background .sf-menu > li > a.active { 784 | border-top-color: var(--mt-color-colored-contrast); 785 | } 786 | .header-container .region--dark-colored-background .sf-menu > li.sfHover > a, 787 | .header-container .region--dark-colored-background .sf-menu > li > a:hover, 788 | .header-container .region--dark-colored-background .sf-menu > li > a:focus, 789 | .header-container .region--dark-colored-background .sf-menu > li.active-trail > a, 790 | .header-container .region--dark-colored-background .sf-menu > li > a.active { 791 | border-top-color: var(--mt-color-dark-colored-contrast); 792 | } */ 793 | } 794 | .menu.cta-active > li:last-child > a, 795 | .menu.cta-active > li:last-child > a.is-active { 796 | background-color: var(--mt-color-primary); 797 | border-color: var(--mt-color-primary); 798 | color: var(--mt-color-primary-contrast); 799 | } 800 | .menu.cta-active > li:last-child > a:hover, 801 | .menu.cta-active > li:last-child > a.is-active:hover, 802 | .menu.cta-active > li:last-child > a:focus, 803 | .menu.cta-active > li:last-child > a.is-active:focus { 804 | background-color: var(--mt-color-primary-light); 805 | border-color: var(--mt-color-primary-light); 806 | } 807 | .menu.cta-active > li:last-child > a:hover:before, 808 | .menu.cta-active > li:last-child > a:focus:before, 809 | .menu.cta-active > li:last-child > a.is-active:hover:before, 810 | .menu.cta-active > li:last-child > a.is-active:focus:before { 811 | background-color: var(--mt-color-primary-light); 812 | } 813 | .region--colored-background .menu.cta-active > li:last-child > a, 814 | .region--colored-background .menu.cta-active > li:last-child > a.is-active { 815 | color: var(--mt-color-colored); 816 | } 817 | .region--colored-background .menu.cta-active > li:last-child > a:hover:before, 818 | .region--colored-background .menu.cta-active > li:last-child > a:focus:before, 819 | .region--colored-background .menu.cta-active > li:last-child > a.is-active:hover:before, 820 | .region--colored-background .menu.cta-active > li:last-child > a.is-active:focus:before { 821 | background: none; 822 | } 823 | .region--dark-colored-background .menu.cta-active > li:last-child > a, 824 | .region--dark-colored-background .menu.cta-active > li:last-child > a.is-active { 825 | color: var(--mt-color-dark-colored); 826 | } 827 | .region--dark-colored-background .menu.cta-active > li:last-child > a:hover:before, 828 | .region--dark-colored-background .menu.cta-active > li:last-child > a:focus:before, 829 | .region--dark-colored-background .menu.cta-active > li:last-child > a.is-active:hover:before, 830 | .region--dark-colored-background .menu.cta-active > li:last-child > a.is-active:focus:before { 831 | background: none; 832 | } 833 | 834 | /* components: footer menu */ 835 | .footer-top__section ul.menu li a:hover, 836 | .footer-bottom__section ul.menu li a:focus, 837 | .footer-bottom__section ul.menu li a:hover, 838 | .footer-bottom__section ul.menu li a:focus, 839 | .subfooter-top__section ul.menu li a:hover, 840 | .subfooter-top__section ul.menu li a:focus, 841 | .subfooter__section ul.menu li a:hover, 842 | .subfooter__section ul.menu li a:focus { 843 | border-bottom-color: var(--mt-color-primary); 844 | } 845 | .region--colored-background .footer-top__section ul.menu li a:hover, 846 | .region--colored-background .footer-bottom__section ul.menu li a:focus, 847 | .region--colored-background .footer-bottom__section ul.menu li a:hover, 848 | .region--colored-background .footer-bottom__section ul.menu li a:focus, 849 | .region--colored-background .subfooter-top__section ul.menu li a:hover, 850 | .region--colored-background .subfooter-top__section ul.menu li a:focus, 851 | .region--colored-background .subfooter__section ul.menu li a:hover, 852 | .region--colored-background .subfooter__section ul.menu li a:focus { 853 | border-bottom-color: var(--mt-color-colored-contrast); 854 | } 855 | 856 | /* components: modal block */ 857 | header.header .block-type--mt-modal .modal-icon-button { 858 | color: var(--mt-color-primary); 859 | } 860 | 861 | /* components: mt count down */ 862 | .mt-count-down-block.mt-count-down-theme .mt-count-down__button { 863 | border-color: var(--mt-color-primary); 864 | background-color: var(--mt-color-primary); 865 | color: var(--mt-color-primary-contrast); 866 | } 867 | .mt-count-down-block.mt-count-down-theme .mt-count-down__button:hover, 868 | .mt-count-down-block.mt-count-down-theme .mt-count-down__button:focus { 869 | background-color: var(--mt-color-primary-light); 870 | border-color: var(--mt-color-primary-light); 871 | } 872 | 873 | /* components: node article*/ 874 | .node--view-mode-teaser.node--type-article .node__header h2 a:hover { 875 | color: var(--mt-color-primary-dark); 876 | } 877 | 878 | /* components: node images */ 879 | .image-caption h4 { 880 | background-color: hsla(var(--mt-color-primary-value), 0.8); 881 | } 882 | 883 | /* components: node post */ 884 | .node--type-mt-post .share-links ul li a:hover, 885 | .node--type-mt-post .share-links ul li a:focus { 886 | border-color: var(--mt-color-primary-dark); 887 | color: var(--mt-color-primary-dark); 888 | } 889 | 890 | /* components: node product */ 891 | .page-node-type-mt-product .field--name-field-mt-prd-price { 892 | background-color: hsla(var(--mt-color-primary-light-value), 0.1); 893 | color: var(--mt-color-primary); 894 | } 895 | 896 | /* components: node view mode teaser */ 897 | .node--view-mode-teaser .promoted-label { 898 | background-color: hsla(var(--mt-color-primary-light-value), 0.1); 899 | color: var(--mt-color-primary); 900 | } 901 | .node--view-mode-teaser .teaser-pre-content-second > .field { 902 | background-color: hsla(var(--mt-color-primary-light-value), 0.1); 903 | color: var(--mt-color-primary); 904 | } 905 | 906 | /* components: node view mode featured teaser */ 907 | .node--view-mode-mt-featured-teaser-2 .quote-icon:after { 908 | color: hsla(var(--mt-color-primary-light-value), 0.2); 909 | } 910 | .node--view-mode-mt-featured-teaser .promoted-label { 911 | background-color: hsla(var(--mt-color-primary-light-value), 0.1); 912 | color: var(--mt-color-primary); 913 | } 914 | 915 | /* components: node view mode teaser tile */ 916 | .node--view-mode-mt-teaser-tile .teaser-tile-subtitle > .field { 917 | background-color: hsla(var(--mt-color-primary-light-value), 0.1); 918 | color: var(--mt-color-primary); 919 | } 920 | 921 | /* components: node view mode teaser tile text */ 922 | .node--view-mode-mt-teaser-tile-text { 923 | border-bottom-color: var(--mt-color-primary); 924 | } 925 | .region--colored-background .node--view-mode-mt-teaser-tile-text { 926 | border-bottom-color: var(--mt-color-colored-contrast); 927 | } 928 | .node--view-mode-mt-teaser-tile-text .region--default-background a:hover, 929 | .node--view-mode-mt-teaser-tile-text .region--default-background a:focus { 930 | color: var(--mt-color-secondary-dark); 931 | } 932 | .node--view-mode-mt-teaser-tile-text-2 .teaser-tile-text-content:after { 933 | color: hsla(var(--mt-color-primary-light-value), 0.2); 934 | } 935 | 936 | /* components: node view mode metro tile */ 937 | .node--view-mode-mt-metro-tile .caption-text-first .field--entity-reference-target-type-taxonomy-term a, 938 | .node--view-mode-mt-metro-tile .caption-text-second .field--entity-reference-target-type-taxonomy-term a { 939 | color: var(--mt-color-secondary-light); 940 | } 941 | .node--view-mode-mt-metro-tile .caption-text-first .field--entity-reference-target-type-taxonomy-term .field__item a:after, 942 | .node--view-mode-mt-metro-tile .caption-text-second .field--entity-reference-target-type-taxonomy-term .field__item a:after { 943 | background-color: rgba(var(--mt-color-base-contrast-value), 0.7); 944 | } 945 | .node--view-mode-mt-metro-tile .field--entity-reference-target-type-taxonomy-term:before, 946 | .node--view-mode-mt-metro-tile .field--entity-reference-target-type-taxonomy-term.field__item:before { 947 | color: var(--mt-color-secondary-light); 948 | } 949 | 950 | /* components: owl carousel global */ 951 | .owl-dot.active span { 952 | border-color: var(--mt-color-primary); 953 | background-color: var(--mt-color-primary); 954 | } 955 | .owl-dot:hover span { 956 | border-color: var(--mt-color-primary-dark); 957 | background-color: var(--mt-color-primary-dark); 958 | } 959 | .region--colored-background .owl-dot.active span { 960 | border-color: var(--mt-color-dark-colored); 961 | background-color: var(--mt-color-dark-colored); 962 | } 963 | .region--colored-background .owl-dot:hover span { 964 | border-color: var(--mt-color-dark-colored); 965 | background-color: var(--mt-color-dark-colored); 966 | } 967 | 968 | /* components: pager */ 969 | li.pager__item.is-active a, 970 | li.pager__item.is-active a:hover, 971 | li.pager__item.is-active a:focus { 972 | border-color: var(--mt-color-primary); 973 | } 974 | li.pager__item a:not(.mt-button):hover, 975 | li.pager__item a:not(.mt-button):focus { 976 | background-color: var(--mt-color-primary); 977 | color: var(--mt-color-primary-contrast); 978 | } 979 | .region--colored-background li.pager__item a:not(.mt-button):hover, 980 | .region--colored-background li.pager__item a:not(.mt-button):focus { 981 | color: var(--mt-color-colored); 982 | } 983 | 984 | /* components: post progress */ 985 | .post-progress__bar { 986 | background-color: var(--mt-color-primary); 987 | } 988 | 989 | /* components: pills */ 990 | .nav-pills > li > a.nav-link { 991 | border-color: var(--mt-color-primary); 992 | } 993 | .nav-pills > li > a.nav-link:focus, 994 | .nav-pills > li > a.nav-link:hover, 995 | .nav-pills > li > a.nav-link.active { 996 | background-color: var(--mt-color-primary-light); 997 | border-color: var(--mt-color-primary-light); 998 | color: var(--mt-color-primary-contrast); 999 | } 1000 | 1001 | /* components: progress bars */ 1002 | .progress-bar-default { 1003 | background-color: var(--mt-color-primary); 1004 | } 1005 | 1006 | /* components: search */ 1007 | .block-search .form-actions:after { 1008 | border-color: var(--mt-color-primary); 1009 | background-color: var(--mt-color-primary); 1010 | color: var(--mt-color-primary-contrast); 1011 | } 1012 | .block-search .form-actions:after:hover { 1013 | background-color: var(--mt-color-primary-light); 1014 | border-color: var(--mt-color-primary-light); 1015 | } 1016 | .region--colored-background .block-search .form-actions:after { 1017 | color: var(--mt-color-colored); 1018 | } 1019 | .region--dark-colored-background .block-search .form-actions:after { 1020 | color: var(--mt-color-dark-colored); 1021 | } 1022 | .region--colored-background .block-search .form-actions:after:hover { 1023 | color: var(--mt-color-colored); 1024 | } 1025 | .region--dark-colored-background .block-search .form-actions:after:hover { 1026 | color: var(--mt-color-dark-colored); 1027 | } 1028 | 1029 | /* components: separators */ 1030 | .separator { 1031 | background: var(--mt-color-primary); 1032 | } 1033 | 1034 | /* components: share links */ 1035 | .js-share-links-fixed .share-links ul li a:hover { 1036 | background-color: var(--mt-color-primary-dark); 1037 | } 1038 | 1039 | /* components: site branding */ 1040 | .site-name a { 1041 | color: var(--mt-color-primary); 1042 | } 1043 | 1044 | /* components: slideout */ 1045 | .slideout-toggle { 1046 | background-color: var(--mt-color-primary-dark); 1047 | } 1048 | 1049 | /* components: slideout filters */ 1050 | @media (max-width: 991px) { 1051 | .region--default-background .view-filters--slideout { 1052 | background-color: var(--mt-color-default); 1053 | } 1054 | .region--bright-background .view-filters--slideout { 1055 | background-color: var(--mt-color-bright); 1056 | } 1057 | .region--pattern .view-filters--slideout { 1058 | background-color: var(--mt-color-pattern); 1059 | } 1060 | .region--accent-background .view-filters--slideout { 1061 | background-color: var(--mt-color-accent); 1062 | } 1063 | .region--tint-background .view-filters--slideout { 1064 | background-color: var(--mt-color-tint); 1065 | } 1066 | .region--shade-background .view-filters--slideout { 1067 | background-color: var(--mt-color-shade); 1068 | } 1069 | .region--colored-background .view-filters--slideout { 1070 | background-color: var(--mt-color-colored); 1071 | } 1072 | .region--dark-colored-background .view-filters--slideout { 1073 | background-color: var(--mt-color-dark-colored); 1074 | } 1075 | .region--dark-background .view-filters--slideout { 1076 | background-color: var(--mt-color-dark); 1077 | } 1078 | @supports ((position: -webkit-sticky) or (position: sticky)) { 1079 | .region--default-background .view-filters--slideout .form-actions { 1080 | background-color: var(--mt-color-default); 1081 | } 1082 | .region--bright-background .view-filters--slideout .form-actions { 1083 | background-color: var(--mt-color-bright); 1084 | } 1085 | .region--pattern .view-filters--slideout .form-actions { 1086 | background-color: var(--mt-color-pattern); 1087 | } 1088 | .region--accent-background .view-filters--slideout .form-actions { 1089 | background-color: var(--mt-color-accent); 1090 | } 1091 | .region--tint-background .view-filters--slideout .form-actions { 1092 | background-color: var(--mt-color-tint); 1093 | } 1094 | .region--shade-background .view-filters--slideout .form-actions { 1095 | background-color: var(--mt-color-shade); 1096 | } 1097 | .region--colored-background .view-filters--slideout .form-actions { 1098 | background-color: var(--mt-color-colored); 1099 | } 1100 | .region--dark-colored-background .view-filters--slideout .form-actions { 1101 | background-color: var(--mt-color-dark-colored); 1102 | } 1103 | .region--dark-background .view-filters--slideout .form-actions { 1104 | background-color: var(--mt-color-dark); 1105 | } 1106 | } 1107 | } 1108 | 1109 | /* components: slider revolution global */ 1110 | .tp-tabs { 1111 | background-color: hsla(var(--mt-color-primary-value), 0.93) !important; 1112 | } 1113 | .tp-tabs .tp-tab.selected, 1114 | .tp-tabs .tp-tab:hover { 1115 | background-color: var(--mt-color-primary); 1116 | } 1117 | 1118 | /* components: sticky footer */ 1119 | .collapsible-sticky-footer-trigger .region--default-background.mt-button { 1120 | background-color: var(--mt-color-default); 1121 | border-bottom-color: var(--mt-color-default); 1122 | } 1123 | .collapsible-sticky-footer-trigger .region--bright-background.mt-button { 1124 | background-color: var(--mt-color-bright); 1125 | border-bottom-color: var(--mt-color-bright); 1126 | } 1127 | .collapsible-sticky-footer-trigger .region--pattern.mt-button { 1128 | background-color: var(--mt-color-pattern); 1129 | border-bottom-color: var(--mt-color-pattern); 1130 | } 1131 | .collapsible-sticky-footer-trigger .region--accent-background.mt-button { 1132 | background-color: var(--mt-color-accent); 1133 | border-bottom-color: var(--mt-color-accent); 1134 | } 1135 | .collapsible-sticky-footer-trigger .region--tint-background.mt-button { 1136 | background-color: var(--mt-color-tint); 1137 | border-bottom-color: var(--mt-color-tint); 1138 | } 1139 | .collapsible-sticky-footer-trigger .region--shade-background.mt-button { 1140 | background-color: var(--mt-color-shade); 1141 | border-bottom-color: var(--mt-color-shade); 1142 | } 1143 | .collapsible-sticky-footer-trigger .region--colored-background.mt-button { 1144 | background-color: var(--mt-color-colored); 1145 | border-bottom-color: var(--mt-color-colored); 1146 | } 1147 | .collapsible-sticky-footer-trigger .region--dark-colored-background.mt-button { 1148 | background-color: var(--mt-color-dark-colored); 1149 | border-bottom-color: var(--mt-color-dark-colored); 1150 | } 1151 | .collapsible-sticky-footer-trigger .region--dark-background.mt-button { 1152 | background-color: var(--mt-color-dark); 1153 | border-bottom-color: var(--mt-color-dark); 1154 | } 1155 | 1156 | /* components: tabs */ 1157 | .nav-tabs a.nav-link.active, 1158 | .nav-tabs a.nav-link.active:focus, 1159 | .nav-tabs a.nav-link.active:hover, 1160 | .nav-tabs a.nav-link:hover, 1161 | .nav-tabs a.nav-link:focus { 1162 | border-color: var(--mt-color-primary); 1163 | color: var(--mt-color-primary-contrast); 1164 | background-color: var(--mt-color-primary); 1165 | } 1166 | .region--colored-background .nav-tabs { 1167 | border-color: var(--mt-color-colored-contrast); 1168 | } 1169 | .region--colored-background .nav-tabs a.nav-link, 1170 | .region--colored-background .nav-tabs a.nav-link { 1171 | border-bottom-color: var(--mt-color-colored-contrast); 1172 | } 1173 | .region--colored-background .nav-tabs a.nav-link.active, 1174 | .region--colored-background .nav-tabs a.nav-link.active:focus, 1175 | .region--colored-background .nav-tabs a.nav-link.active:hover, 1176 | .region--colored-background .nav-tabs a.nav-link:hover, 1177 | .region--colored-background .nav-tabs a.nav-link:focus { 1178 | border-color: var(--mt-color-colored-contrast); 1179 | color: var(--mt-color-colored); 1180 | background-color: var(--mt-color-colored-contrast); 1181 | } 1182 | .nav-tabs.nav-tabs--vertical a.nav-link.active, 1183 | .nav-tabs.nav-tabs--vertical a.nav-link:hover, 1184 | .nav-tabs.nav-tabs--vertical a.nav-link:focus { 1185 | border-bottom-color: var(--mt-color-primary); 1186 | } 1187 | .region--colored-background .nav-tabs.nav-tabs--vertical a.nav-link.active, 1188 | .region--colored-background .nav-tabs.nav-tabs--vertical a.nav-link:hover, 1189 | .region--colored-background .nav-tabs.nav-tabs--vertical a.nav-link:focus { 1190 | border-bottom-color: var(--mt-color-colored-contrast); 1191 | } 1192 | .region--colored-background .nav-tabs.nav-tabs--vertical a.nav-link, 1193 | .region--colored-background .nav-tabs.nav-tabs--vertical a.nav-link:hover, 1194 | .region--colored-background .nav-tabs.nav-tabs--vertical a.nav-link:focus, 1195 | .region--colored-background .nav-tabs.nav-tabs--vertical a.active.nav-link, 1196 | .region--colored-background .nav-tabs.nav-tabs--vertical a.active.nav-link:focus, 1197 | .region--colored-background .nav-tabs.nav-tabs--vertical a.active.nav-link:hover { 1198 | border-right-color: var(--mt-color-colored-contrast); 1199 | } 1200 | .nav-tabs.nav-tabs--fancy a.nav-link { 1201 | border-bottom-color: transparent; 1202 | } 1203 | .nav-tabs.nav-tabs--fancy a.nav-link.active, 1204 | .nav-tabs.nav-tabs--fancy a.nav-link.active:focus, 1205 | .nav-tabs.nav-tabs--fancy a.nav-link.active:hover { 1206 | border-color: var(--mt-color-primary); 1207 | } 1208 | .region--colored-background .nav-tabs.nav-tabs--fancy a.nav-link.active, 1209 | .region--colored-background .nav-tabs.nav-tabs--fancy a.nav-link.active:focus, 1210 | .region--colored-background .nav-tabs.nav-tabs--fancy a.nav-link.active:hover, 1211 | .region--colored-background .nav-tabs.nav-tabs--fancy a.nav-link:focus, 1212 | .region--colored-background .nav-tabs.nav-tabs--fancy a.nav-link:hover { 1213 | border-color: var(--mt-color-colored-contrast); 1214 | color: var(--mt-color-colored); 1215 | } 1216 | .nav-tabs.nav-tabs--enriched a.nav-link:focus, 1217 | .nav-tabs.nav-tabs--enriched a.nav-link:hover { 1218 | border-bottom-color: var(--mt-color-primary); 1219 | } 1220 | .nav-tabs.nav-tabs--enriched a.nav-link.active span, 1221 | .nav-tabs.nav-tabs--enriched a.nav-link.active:focus span, 1222 | .nav-tabs.nav-tabs--enriched a.nav-link.active:hover span, 1223 | .nav-tabs.nav-tabs--enriched a.nav-link:hover span, 1224 | .nav-tabs.nav-tabs--enriched a.nav-link:focus span { 1225 | color: var(--mt-color-primary); 1226 | } 1227 | .region--colored-background .nav-tabs.nav-tabs--enriched a.nav-link.active, 1228 | .region--colored-background .nav-tabs.nav-tabs--enriched a.nav-link.active:focus, 1229 | .region--colored-background .nav-tabs.nav-tabs--enriched a.nav-link.active:hover, 1230 | .region--colored-background .nav-tabs.nav-tabs--enriched a.nav-link:focus, 1231 | .region--colored-background .nav-tabs.nav-tabs--enriched a.nav-link:hover { 1232 | color: var(--mt-color-colored-contrast); 1233 | background-color: transparent; 1234 | border-left-color: transparent; 1235 | border-right-color: transparent; 1236 | border-top-color: transparent; 1237 | border-bottom-color: var(--mt-color-colored-contrast); 1238 | } 1239 | .region--colored-background .nav-tabs.nav-tabs--enriched a.nav-link.active span, 1240 | .region--colored-background .nav-tabs.nav-tabs--enriched a.nav-link.active:focus span, 1241 | .region--colored-background .nav-tabs.nav-tabs--enriched a.nav-link.active:hover span, 1242 | .region--colored-background .nav-tabs.nav-tabs--enriched a.nav-link:hover span, 1243 | .region--colored-background .nav-tabs.nav-tabs--enriched a.nav-link:focus span { 1244 | color: var(--mt-color-primary-contrast); 1245 | } 1246 | 1247 | /* components: timeline */ 1248 | .region--default-background .field--name-field-mt-tml-timeline-item .field__item .timeline__badge { 1249 | background-color: var(--mt-color-default); 1250 | } 1251 | .region--bright-background .field--name-field-mt-tml-timeline-item .field__item .timeline__badge { 1252 | background-color: var(--mt-color-bright); 1253 | } 1254 | .region--pattern .field--name-field-mt-tml-timeline-item .field__item .timeline__badge { 1255 | background-color: var(--mt-color-pattern); 1256 | } 1257 | .region--accent-background .field--name-field-mt-tml-timeline-item .field__item .timeline__badge { 1258 | background-color: var(--mt-color-accent); 1259 | } 1260 | .region--tint-background .field--name-field-mt-tml-timeline-item .field__item .timeline__badge { 1261 | background-color: var(--mt-color-tint); 1262 | } 1263 | .region--shade-background .field--name-field-mt-tml-timeline-item .field__item .timeline__badge { 1264 | background-color: var(--mt-color-shade); 1265 | } 1266 | .region--colored-background .field--name-field-mt-tml-timeline-item .field__item .timeline__badge { 1267 | background-color: var(--mt-color-colored); 1268 | } 1269 | .region--dark-colored-background .field--name-field-mt-tml-timeline-item .field__item .timeline__badge { 1270 | background-color: var(--mt-color-dark-colored); 1271 | } 1272 | .region--dark-background .field--name-field-mt-tml-timeline-item .field__item .timeline__badge { 1273 | background-color: var(--mt-color-dark); 1274 | } 1275 | 1276 | /* components: view articles list 2 */ 1277 | .view-articles-list-2 .views-row:after { 1278 | color: var(--mt-color-primary); 1279 | } 1280 | .region--colored-background .view-articles-list-2 .views-row:after { 1281 | color: var(--mt-color-colored-contrast); 1282 | } 1283 | 1284 | /* components: view pricing tables */ 1285 | .views-field-field-mt-prd-most-popular span { 1286 | background-color: var(--mt-color-secondary-light); 1287 | } 1288 | 1289 | /* components: view team members masonry */ 1290 | .view-team-members-masonry .masonry-grid-item .overlay__text:after { 1291 | background-color: var(--mt-color-primary); 1292 | } 1293 | --------------------------------------------------------------------------------