{% import './tools/_macros.css' %}{## Table of contents 1. Variables 1a. Containers 1b. Colors 1c. Typography 1d. Buttons 1e. Forms 1f. Tables 1g. Site header 1h. Site footer 2. Containers / Grid / DnD Areas 3. Typography 4. Buttons 5. Forms 6. Tables 7. Site header 8. Site footer 9. Blog 10. System pages 11. Modules ##}{###########################################################################}{############################ 1. Variables #############################}{###########################################################################}{% set container_width=theme.spacing.max_width~'px' %}{% set dnd_section_padding=theme.spacing.vertical_spacing~'px '~'10px' %}{% set primary_color=theme.global_colors.primary_color.color %}{% set secondary_color=theme.global_colors.secondary_color.color %}body{background-color:#f8fafc;padding-top:74px}{% set primary_font=theme.global_fonts.primary_font %}{% set secondary_font=theme.global_fonts.secondary_font %}{% set body_font=theme.typography.body_text %}{% set heading_one=theme.typography.heading_one %}{% set heading_two=theme.typography.heading_two %}{% set heading_three=theme.typography.heading_three %}{% set heading_four=theme.typography.heading_four %}{% set heading_five=theme.typography.heading_five %}{% set heading_six=theme.typography.heading_six %}{% set anchor_font_color=theme.typography.link_color.color %}{% set button_bg_color=color(theme.buttons.background_color) %}{% set button_font_color=theme.buttons.text_color.color %}{% set button_border=theme.buttons.border_width~'px solid '~theme.buttons.border_color.color %}{% set button_corner_radius=theme.buttons.border_radius~'px' %}{% set button_spacing=theme.buttons.vertical_padding~'px'~' '~theme.buttons.horizontal_padding~'px' %}{% set form_title_bg_color=color(theme.forms.header_background_color) %}{% set form_title_font_color=theme.forms.header_text_color.color %}{% set form_label_font_color=theme.forms.label_color.color %}{% set form_help_text_font_color=theme.forms.help_text_color.color %}{% set form_input_border_color=theme.forms.field_border_color.color %}{% set form_input_focus_border_color=theme.forms.field_focus_border_color.color %}{% set table_head_bg_color=color(theme.tables.header_background_color) %}{% set table_head_font_color=theme.tables.header_text_color.color %}{% set table_bg_color=color(theme.tables.body_background_color) %}{% set table_font_color=theme.tables.body_text_color.color %}{% set table_border_color=theme.tables.border_color.color %}{% set table_footer_bg_color=color(theme.tables.footer_background_color) %}{% set table_footer_font_color=theme.tables.footer_text_color.color %}{% set header_bg_color=color(theme.header.background_color) %}{% set header_nav_link_color=theme.header.menu_link_color.color %}{% set header_child_nav_border_color=theme.header.child_menu_border_color.color %}{% set footer_bg_color=color(theme.footer.background_color) %}{% set footer_font_color=theme.footer.text_color.color %}{###########################################################################}{################## 2. Containers / Grid / DnD Areas ###################}{###########################################################################}.content-wrapper{max-width:{{container_width}}}.dnd-section{padding:{{dnd_section_padding}}}.dnd-section>.row-fluid{max-width:{{container_width}}}{###########################################################################}{########################### 3. Typography #############################}{###########################################################################}html{font-size:{{body_font.size~body_font.size_unit}}}body{{{body_font.style}};color:{{body_font.color}}}p{{{body_font.style}}}a{color:{{anchor_font_color}}}a:hover,a:focus{color:{{color_variant(anchor_font_color,-40)}}}a:active{color:{{color_variant(anchor_font_color,40)}}}h1{{{heading_one.style}};color:{{heading_one.color}};font-size:{{heading_one.size~heading_one.size_unit}}}h2{{{heading_two.style}};color:{{heading_two.color}};font-size:{{heading_two.size~heading_two.size_unit}}}h3{{{heading_three.style}};color:{{heading_three.color}};font-size:{{heading_three.size~heading_three.size_unit}}}h4{{{heading_four.style}};color:{{heading_four.color}};font-size:{{heading_four.size~heading_four.size_unit}}}h5{{{heading_five.style}};color:{{heading_five.color}};font-size:{{heading_five.size~heading_five.size_unit}}}h6{{{heading_six.style}};color:{{heading_six.color}};font-size:{{heading_six.size~heading_six.size_unit}}}blockquote{border-left-color:{{secondary_color}}}{###########################################################################}{############################ 4. Buttons ###############################}{###########################################################################}button,.button{background-color:{{button_bg_color}};border:{{button_border}};border-radius:{{button_corner_radius}};color:{{button_font_color}};padding:{{button_spacing}}}button:hover,button:focus,.button:hover,.button:focus{background-color:rgba({{color_variant(theme.buttons.background_color.color,-40)|convert_rgb}},{{theme.buttons.background_color.opacity / 100}});border-color:{{color_variant(theme.buttons.border_color.color,-40)}};color:{{button_font_color}}}button:active,.button:active{background-color:rgba({{color_variant(theme.buttons.background_color.color,40)|convert_rgb}},{{theme.buttons.background_color.opacity / 100}});border-color:{{color_variant(theme.buttons.border_color.color,40)}};color:{{button_font_color}}}{###########################################################################}{############################## 5. Forms ###############################}{###########################################################################}form,.submitted-message{{{body_font}}}h3.form-title{background-color:{{form_title_bg_color}};color:{{form_title_font_color}}}form label{color:{{form_label_font_color}}}form legend{color:{{form_help_text_font_color}}}input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=file],select,textarea{border-color:{{form_input_border_color}};color:{{body_font.color}}}input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=tel]:focus,input[type=number]:focus,input[type=file]:focus,select:focus,textarea:focus{border-color:{{form_input_focus_border_color}}}::-webkit-input-placeholder,::-moz-placeholder,:-ms-input-placeholder,:-moz-placeholder,::placeholder,.hs-fieldtype-date .input .hs-dateinput:before{color:{{body_font.color}}}.fn-date-picker td.is-selected .pika-button{background:{{primary_color}}}.fn-date-picker td .pika-button:hover{background-color:{{primary_color}}!important}.fn-date-picker td.is-today .pika-button{color:{{primary_color}}}form input[type=submit],form .hs-button{background-color:{{button_bg_color}};border:{{button_border}};border-radius:{{button_corner_radius}};color:{{button_font_color}};padding:{{button_spacing}}}form input[type=submit]:hover,form input[type=submit]:focus,form .hs-button:hover,form .hs-button:focus{background-color:rgba({{color_variant(theme.buttons.background_color.color,-40)|convert_rgb}},{{theme.buttons.background_color.opacity / 100}});border-color:{{color_variant(theme.buttons.border_color.color,-40)}};color:{{button_font_color}}}form input[type=submit]:active,form .hs-button:active{background-color:rgba({{color_variant(theme.buttons.background_color.color,40)|convert_rgb}},{{theme.buttons.background_color.opacity / 100}});border-color:{{color_variant(theme.buttons.border_color.color,40)}};color:{{button_font_color}}}{###########################################################################}{############################# 6. Tables ###############################}{###########################################################################}table{background-color:{{table_bg_color}};border-color:{{table_border_color}}}th,td{border-color:{{table_border_color}};color:{{table_font_color}}}thead th,thead td{background-color:{{table_head_bg_color}};border-bottom-color:{{table_border_color}};color:{{table_head_font_color}}}tfoot td{background-color:{{table_footer_bg_color}};color:{{table_footer_font_color}}}tbody+tbody{border-top-color:{{table_border_color}}}{###########################################################################}{########################### 7. Site header ############################}{###########################################################################}.header{background-color:{{header_bg_color}}}body .navigation-primary a,.header__logo .logo-company-name,.header__language-switcher-label-current,.header__language-switcher .lang_list_class li a{color:{{header_nav_link_color}};font-family:{{body_font.font}}}body .navigation-primary a:hover,body .navigation-primary a:focus,.header__language-switcher-label-current:hover,.header__language-switcher-label-current:focus,.header__language-switcher .lang_list_class li:hover a,.header__language-switcher .lang_list_class li a:focus{color:{{color_variant(header_nav_link_color,-40)}}}body .navigation-primary a:active,body .header__language-switcher-label-current:active,body .header__language-switcher .lang_list_class li a:active{color:{{color_variant(header_nav_link_color,40)}}}body .navigation-primary .submenu.level-1>li>a.active-item:after{background-color:{{primary_color}}}body .submenu.level-2,body .header__language-switcher .lang_list_class{background-color:{{header_bg_color}};border-color:{{header_child_nav_border_color}}}body .triangle.level-2{border-color:{{header_child_nav_border_color}}}body .submenu.level-2 .menu-item .menu-link:hover,body .submenu.level-2 .menu-item .menu-link:focus,body .header__language-switcher .lang_list_class li:hover,body .submenu.level-2 .triangle-container.level-2.hover .triangle{background-color:{{header_bg_color}}}.header__language-switcher-label-current,.header__language-switcher .lang_list_class li a{font-family:{{body_font.font}}}.header__language-switcher-label-current:after{border-top-color:{{header_nav_link_color}}}@media(max-width:767px){.header__navigation{background-color:{{header_bg_color}}}.header__navigation-toggle svg,.menu-arrow svg{fill:{{header_nav_link_color}}}}{###########################################################################}{########################### 8. Site footer ############################}{###########################################################################}.footer{background-color:{{footer_bg_color}}}.footer h1,.footer h2,.footer h3,.footer h4,.footer h5,.footer h6 .footer p,.footer a,.footer div,.footer span{color:{{footer_font_color}}}{###########################################################################}{############################## 9. Blog ################################}{###########################################################################}.blog-post__date{border-color:{{body_font.color}}}.blog-tag-filter__menu-link,.blog-post__tag-link,.blog-card__tag-link,.blog-post__author-name,.blog-card__title a{color:{{body_font.color}}}.blog-card__tag-link:hover,.blog-card__title a:hover,.blog-tag-filter__menu-link:hover,.blog-post__tag-link:hover,.blog-post__author-name:hover,.blog-card__tag-link:focus,.blog-card__title a:focus,.blog-tag-filter__menu-link:focus,.blog-post__tag-link:focus,.blog-post__author-name:focus{color:{{color_variant(body_font.color,-40)}}}.blog-card__tag-link:active,.blog-card__title a:active,.blog-tag-filter__menu-link:active,.blog-post__tag-link:active,.blog-post__author-name:active{color:{{color_variant(body_font.color,40)}}}.blog-tag-filter__menu-link--active-item:after{background-color:{{primary_color}}}.blog-pagination__link{color:{{body_font.color}}}.blog-pagination__link--active:after,.blog-pagination__prev-link:after,.blog-pagination__next-link:after{background-color:{{primary_color}}}.blog-post__title{{{heading_two.style}};color:{{heading_two.color}};font-size:{{heading_two.size~heading_two.size_unit}}}.blog-post__author{background-color:{{secondary_color}}}#comments-listing .comment-reply-to{color:{{anchor_font_color}}}#comments-listing .comment-reply-to:hover,#comments-listing .comment-reply-to:focus{color:{{color_variant(anchor_font_color,-40)}}}#comments-listing .comment-reply-to:active{color:{{color_variant(anchor_font_color,40)}}}{###########################################################################}{########################## 10. System pages ###########################}{###########################################################################}{###########################################################################}{############################ 11. Modules ##############################}{###########################################################################}body .icon svg{fill:{{primary_color}}}body .tns-nav button.tns-nav-active{background-color:{{primary_color}}}body .tns-nav button:hover,body .tns-nav button:focus{background-color:{{primary_color}}}body .team-member__description{background-color:{{secondary_color}}}.hs_cos_wrapper_type_rich_text p,.hs_cos_wrapper_type_rich_text span{font-size:18px;font-family:'Brandon Grotesque',sans-serif}