/*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* Hubspot POWER THEME V1.1.4 */ /* by maka Ageny */ /* */ /* STYLE SETTINGS V1.0 */ /* */ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /*********************************************/ /****************************************************************************/ /* */ /* With this file we provide you with comfortable options to adjust */ /* some global style aspects of the POWER theme to your needs. */ /* */ /* Please clone the theme to be able to edit the code files if you need */ /* to do so. */ /* */ /****************************************************************************/ /***************************************************************************** INDEX: 1. BASIC COLOR DEFINITIONS #bcd 2. SPECIFIC COLOR DEFINITIONS #scd - Background - Accent Background - Text - Titles - Links - Buttons - Navigation - Social Icons & Form Errors - Blog 3. FONT-SETTINGS #fs - Basic and accent font types - Font smooting - Font sizes - Font weights 4. ROUND EDGES #re 5. EFFECTS #eff - 3D box effect - Button hover effect 6. LAYOUT #lay - Main header menu position - Content width - Section padding - Responsive breakpoints - Mobile responsiveness size reduction factors 7. STYLING #sty - Slider Bullet Styles *****************************************************************************/ /* ========================================================================== 1. BASIC COLOR DEFINITIONS #bcd These colors are used throughout the POWER template. ========================================================================== */ /* This color represents e.g. background color for dark-mode, dark text color, * is base for dark borders, ... */ /* This color represents e.g. dark accent background color for boxes in front * of dark background (baseColorDark) */ /* This color represents e.g. background color for light-mode, * light text color, is base for light borders, ... */ /* This color represents e.g. light accent background color for boxes in * front of light background (baseColorLight) */ /* This color represents your primary brand color, e.g. * Accents / Hightlights, Hovers, Buttons, ... */ /* ========================================================================== 2. SPECIFIC COLOR DEFINITIONS #scd In this section you have the possibility to set more specific colors for common elements like text, titles, buttons, etc. ========================================================================== */ /* Background Colors */ /* Dark / Light accent background colors */ /* Dark / Light text colors */ /* Dark / Light intro title and title colors * For section intro + title, hero title, author page posts title and * blog overview (layout: 1 column) */ /* Link-Colors */ /* Dark / Light Link-Colors for POWER rich-text fields */ /* Primary / Dark / Light button background + text colors */ /* Dark / Light font color for navigation (Header / Footer) */ /* Hover opacity value for top-level navigation items (0 invisible, 1 fully visible) */ /* Hover background and font color for sub-level menu items (Dropdown, Mega-Menu, Burger-Menu) */ /* Boxed Elements Hover Colors */ /* Social Icon color used for Header Top (light), Author Page, Media Content Split module */ /* Colors for HubSpot's form module */ /* Colors for POWER's form modules */ /* Blog */ /* ========================================================================== 3. FONT AND FONT-SIZES #fs If you have a custom or purchased font, upload the files via file-manager and reference the font format(s) in the @font-face statement Please note, that you have to clone the theme before to be able to edit the code files of the theme. ========================================================================== */ /* Custom / Purchased fonts configured via @font-face * * @font-face properties explained: * font-family -> Official / Configured name of the font - this can be overwritten * by the function local within src-attribute if a custom name is desired. * src -> Here the links to the different font-formats uploaded in file-manager * are referenced * *.woff2 - format for all modern browsers * *.woff - format for IE 11 * *.eot - format for IE 6 - IE 8 * *.ttf - format for Safari, Android, iOS * *.svg - format for older iOS devices * font-weight -> Font weight as number (e.g. 700) or name (e.g. bold) * font-style -> Font style e.g. italic * */ /* @font-face { font-family: 'internal_font_name'; src: local('How_you_want_to_call_and_use_the_font'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.woff') format('woff'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.eot?#iefix') format('embedded-opentype'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.ttf') format('truetype'), url('https://cdn2.hubspot.net/hubfs/YOUR_HUBSPOT_ID/internal_font_name.svg#svgFontName') format('svg'); font-weight: normal; font-style: normal; font-display: swap; } */ /************ CUSTOM FONT SETUP - maka JN - 30.3.22*********************************/ @font-face { font-family: 'gilroy-extrabold'; src: local('gilroy-extrabold'), url("https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/01-Brand-Assets/Fonts/Gilroy-ExtraBold.otf") format("otf"), url("https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/01-Brand-Assets/Fonts/gilroy-extrabold-webfont.woff2") format("woff2"), url("https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/01-Brand-Assets/Fonts/gilroy-extrabold-webfont.woff") format("woff"); font-weight: 700; font-style: bold; font-display: swap; } /* * Legal Disclaimer * * These Fonts are licensed only for use on these domains and their subdomains: * linkfire.com * * It is illegal to download or use them on other websites. * * While the @font-face statements below may be modified by the client, this * disclaimer may not be removed. * * Lineto.com, 2016 */ /* Complete */ @font-face { font-family: 'Akkurat'; src: local('Akkurat-Bold'), url("https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/01-Brand-Assets/Fonts/Akkurat-Bold.otf") format("otf"), url("https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/01-Brand-Assets/Fonts/lineto-akkurat-pro-bold.woff2") format("woff2"), url("https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/01-Brand-Assets/Fonts/lineto-akkurat-pro-bold.woff") format("woff"); font-weight: 700; font-style: bold; font-display: swap; } @font-face { font-family: 'Akkurat'; src: local('Akkurat-Regular'), url("https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/01-Brand-Assets/Fonts/Akkurat.otf") format("otf"), url("https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/01-Brand-Assets/Fonts/lineto-akkurat-pro-regular.woff2") format("woff2"), url("https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/01-Brand-Assets/Fonts/lineto-akkurat-pro-regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } /* Font family to use in the template * * You can set the names of the fonts you have imported via * @font-face above and optionally configure fall-back fonts (comma-separated) * */ /* You can use a different accent font-family for titles, CTAs, Menu, ... */ /* Switch font smoothing on (true) or off (false) */ /* * Font-sizes IN PIXELS */ /* Font size used in the body and in rich-text fields */ /* Font size used for paragraphs in the body and in rich-text fields */ /* Font size used in the blog post body */ /* Font-size for intro title in section modules */ /* Font-size for text description in section modules */ /* Font-size for buttons */ /* Font-sizes for headings */ /* Font-sizes for navigation (header and footer) - we recommend small variations from the default value */ /* Font-size for forms */ /* * Font-weights */ /* Font weight used in the body */ /* Font weight used in paragraphs */ /* Font weight used in the blog post body */ /* Font weight for intro title in section modules */ /* Font weight for text description in section modules */ /* Font weight used for headings */ /* Font weight for buttons */ /* Font weights Header */ /* Font weights for forms */ /* * Line-heights TRANSFORMED TO EM */ /* Line height used in the body */ /* Line height used in paragraphs */ /* Line height used in the blog post body */ /* Line height for intro title in section modules */ /* Line height for text description in section modules */ /* Line height for headings */ /* * Letter-spacings IN PIXELS */ /* Letter-spacing used in the body */ /* Letter-spacing used in paragraphs */ /* Letter-spacing used in the blog post body */ /* Letter-spacing for intro title in section modules */ /* Letter-spacing for text description in section modules */ /* Letter-spacing used for headings */ /* Letter-spacing for buttons */ /* Letter-spacing Header */ /* Letter-spacing for forms */ /* Accent text-property for e.g. titles, button-texts, menu, ... * Standard value -> text-transform: uppercase. To deactivate, use empty single quotation */ /* ========================================================================== 4. ROUND EDGES #re 0px is rectangular and 25px already pretty round ========================================================================== */ /* Round edges on buttons */ /* Round edges on inputs */ /* Round edges on dropdowns */ /* Round edges on boxes */ /* Round edges on images */ /* Round edges on checkboxes (max 6px) */ /* ========================================================================== 5. EFFECTS #eff ========================================================================== */ /* Switch 3D box effect on (true) or off (false) */ /* Switch button hover effect on (true) or off (false) */ /* ========================================================================== 6. LAYOUT #lay ========================================================================== */ /* * Main header menu position * * Position in percent. * Automatically centered if header is full-width */ /* Content width in pixel */ /* Vertical section padding in pixel * Relates to 'padding top' and 'padding bottom' setting in modules */ /* Horizontal section padding in pixel */ /* Header Breakpoint (when does it change to a burger menu...) */ /* Responsive Breakpoints */ /* Mobile responsiveness size reduction factors used by macros */ /* reduces font-sizes for mobile where applicable - by factor e.g. .25 => 25% */ /* Not smaller than ... pixel */ /* Reduces margins, paddings, etc. - by factor e.g. .25 => 25% */ /* ========================================================================== 7. STYLING #sty ========================================================================== */ /* * Slider Bullet Styles */ :root { --sl-pag-bullet-horizontal-gap: 5.0px; --sl-pag-bullet-inactive-opacity: 0.4; --sl-pag-bullet-inactive-height: 3px; --sl-pag-height: 3px; --sl-pag-bullet-inactive-width: 32px; --sl-pag-bullet-inactive-border-radius: 0px; --sl-pag-bullet-active-height: 3px; --sl-pag-bullet-active-width: 32px; --sl-pag-bullet-active-border-radius: 0px; } /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ /* Blocking logo hyperlink */ a#hs-link-lp_page_logo{ pointer-events: none; } /***** Change INTRO TITLE to UPPPERCASE *****/ .pwr--dark .pwr-sec__title-intro { text-transform: uppercase; font-family: 'Akkurat', sans-serif !important; font-weight:700; } .pwr--light .pwr-sec__title-intro { text-transform: uppercase; font-family: 'Akkurat', sans-serif !important; font-weight:700; } /***** Tweaks for buttons *****/ .cta_button { letter-spacing: 1.8px; } .cta_button:hover { -webkit-filter: brightness(90%)!important; filter: brightness(90%)!important; } /*** Tweaks for Navigation ***/ .pwr-header { font-size: 13px; letter-spacing: 1.8px; } /*** Checkmark for bulletted lists .hs_cos_wrapper_type_post_filter ul li, .hs_cos_wrapper_type_post_listing ul li, .hs_cos_wrapper_type_rich_text ul:not(.inputs-list) li, .pwr-rich-text ul li { list-style-image: url("https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/icons/check.svg"); text-indent: 0; margin-bottom: 0.8rem; padding-left: .5rem; line-height: 1.8rem; } .hs_cos_wrapper_type_post_filter ul li, .hs_cos_wrapper_type_post_listing ul li, .hs_cos_wrapper_type_rich_text ul:not(.inputs-list) li, .pwr-rich-text ul { -webkit-padding-start: 20px; padding-inline-start: 20px; } .hs_cos_wrapper_type_post_filter ul li::before, .hs_cos_wrapper_type_post_listing ul li::before, .hs_cos_wrapper_type_rich_text ul:not(.inputs-list) li::before, .pwr-rich-text ul li::before { display:none; } **/ /** Unordered lists fixes */ .pwr-rich-text ul li::before { width:16px; left: -32px; } .pwr-rich-text ul li { line-height: 1.8rem; } .pwr-rich-text ul { -webkit-padding-start: 32px; padding-inline-start: 32px; } /***** maka jn - hide tick marks on pricing table *****/ /*.pwr-price-table-features__icon { display: none; } .pwr-price-table-features__text { padding-left: 0; }*/ /* maka mz - Center ReCaptcha in Sec Form */ .pwr-sec-form__content.pwr--align-c .grecaptcha-badge { margin-left: auto; margin-right: auto; } /* FAQ Accordion color changes */ .pwr-accordion.active .pwr-accordion__desc { background-color: #252837 !important; color: #fff !important; } .pwr-accordion.active .pwr-accordion__title { background-color: #252837 !important; color: #fff !important; } .pwr-accordion:hover .pwr-accordion__title { background-color: #252837 !important; color: #fff; } /* Homepage wave boxes - text fix */ .pwr-team-member__job-title { font-family: akkurat; } /*Smaller Intro text for mobile */ @media (max-width: 767px) .pwr-sec__title-intro { font-size: 13px !important; margin-bottom: 12px; } /*Less padding on timeline items*/ .pwr-timeline-item__content { padding: 16px 24px; } .pwr-timeline-item__title { margin: 0 0 4px; } /* Blog post fixes */ .pwr-post-featured--small { height: 170px; margin: auto; margin-top: auto; margin-top: 32px; } .pwr-post-item__date, .pwr-post-item__name { color: #8694a3; display: inline-block; font-family: 'Akkurat', sans-serif !important; font-weight:700; font-size: 12px; margin-bottom: 0px; letter-spacing: 1.7px; text-decoration: none; text-transform: uppercase; } .pwr-post-item__n-min-read { color: #8694a3; display: inline-block; font-family: 'Akkurat', sans-serif !important; font-weight:700; font-size: 12px; margin-bottom: 4px; letter-spacing: 1.7px; text-decoration: none; text-transform: uppercase; } .pwr-post-featured__title { max-width: 734px; text-align:center; margin: auto; } .pwr-post-featured__info-box { text-align: center; top: 10%; } .pwr-post-header__title--reduced { font-size: 48px; } .pwr-sec-prev-next-nav { display: none; } .pwr-post-content p img:first-of-type{ border-radius: 4px; max-width: 110%; display: block; margin-left: -5%; margin-right: auto; padding: 24px; } .pwr-post-body { padding-top: 44px; } .pwr-header__menu.pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-2>a , .pwr-header__menu .hs-menu-wrapper.flyouts li:not(.hs-menu-depth-1):first-child > a , .pwr-header__menu .hs-menu-wrapper ul li > ul li a { cursor: pointer; padding: 0; margin: 0; } .pwr-header__menu .hs-menu-wrapper ul li > ul li a { font-weight: 700; color: #121925; font-size: 1.125rem; line-height: 1.61111; font-family: Akkurat; text-transform: initial; } .pwr-header__menu .hs-menu-wrapper ul li > ul li { cursor: pointer; -webkit-transition: background-color .25s ease,padding .25s ease; transition: background-color .25s ease,padding .25s ease; display: block; padding: 24px 18px; border-bottom: 0.0625rem solid #d7dadf; } .pwr-header__menu .hs-menu-wrapper ul li > ul { top: calc(100% - 10px) !important; position: relative; min-width: 282px; display: block !important; box-shadow: 0 2px 10px 0 rgb(18 25 37 / 10%); border: 0.0625rem solid #d7dadf; background: #fff; border-radius: 0.125rem; } .pwr-header__menu .hs-menu-wrapper ul li > ul li a span { width: 100%; display:block; color: #8694a3; font-size: .75rem; font-weight: 400; } .pwr-header__menu.pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-1 > ul.hs-menu-children-wrapper { display: block !important; } .pwr-header__menu.pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-2 { display: block; } .pwr-header__menu .hs-menu-wrapper ul li > ul:before { position: absolute; z-index: -1; top: -8px; left: 50%; transform: translateX(-50%) rotate(45deg); content: ''; border-top: 1px solid #d7dadf; border-left: 1px solid #d7dadf; margin-left: -0.6875rem; left: 50%; display: block; background-color: #fff; height: 15px; width: 15px; } .pwr-header__menu .hs-menu-wrapper ul li > ul li:last-child { border-bottom: 0; } .pwr-header__menu.pwr-header__menu--mega-menu .hs-menu-wrapper li.hs-menu-depth-2:not(:last-child):after { display: none; } .pwr-header__menu .hs-menu-wrapper ul li > ul li:hover { background-color: #f9fafb; padding-left: 1.75rem; } .pwr-cta--small .cta_button:not(.pwr-cta--hubspot-style) { font-size: .75rem; padding: 0.875rem 1.5625rem; } .cta_button:not(.pwr-cta--hubspot-style), .hs-submit { font-size: .875rem; font-weight: 800; letter-spacing: .125rem; -webkit-transition: -webkit-filter .2s linear , padding .2s linear; transition: -webkit-filter .2s linear , padding .2s linear; transition: filter .2s linear , padding .2s linear; transition: filter .2s linear,-webkit-filter .2s linear , padding .2s linear; padding: 1.125rem 3rem; } .pwr-cta--small .cta_button:not(.pwr-cta--hubspot-style):after, .cta_button:not(.pwr-cta--hubspot-style):after { display: inline-block; left: auto; content: ""; position: absolute; top: 50%; right: 3rem; width: 0; height: 0.5625rem; opacity: 0; -webkit-transition: width .2s linear,opacity .2s linear,right .2s linear; transition: width .2s linear,opacity .2s linear,right .2s linear; background-color: transparent !important; background: url('https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/arrow-right-white.svg') 100%/contain no-repeat; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .pwr-cta--small .cta_button:not(.pwr-cta--hubspot-style):hover:after , .cta_button:not(.pwr-cta--hubspot-style):hover:after { right: 2.5625rem; width: 0.875rem; opacity: 1; } .cta_button:not(.pwr-cta--hubspot-style):hover { -webkit-filter: brightness(90%); filter: brightness(90%); color: #fff !important; } /* .pwr-cta--small .cta_button:not(.pwr-cta--hubspot-style) , .cta_button:not(.pwr-cta--hubspot-style) span { position: relative; left: 0; -webkit-transition: left .2s linear; transition: left .2s linear; } */ .pwr-cta--small .cta_button:not(.pwr-cta--hubspot-style):hover:after { right: 1.125rem; } .cta_button:not(.pwr-cta--hubspot-style):hover { padding: 1.125rem 4rem 1.125rem 2rem; color: #fff; } .pwr-cta--small .cta_button:not(.pwr-cta--hubspot-style):hover { padding: .875rem 1.8rem .875rem 1.3260rem; } .pwr-cta--regular-solid-primary-background .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):after { display: inline-block; left: auto; content: ""; position: absolute; top: 50%; right: 3rem; width: 0; height: 0.5625rem; opacity: 0; -webkit-transition: width .2s linear,opacity .2s linear,right .2s linear; transition: width .2s linear,opacity .2s linear,right .2s linear; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-color: transparent !important; background: url('https://25446013.fs1.hubspotusercontent-eu1.net/hubfs/25446013/arrow-right-black.svg') 100%/contain no-repeat; } .pwr-btn--regular-solid-primary-background .hs-submit:hover:after, .pwr-cta--regular-solid-primary-background .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style):hover:after { background-color: transparent; right: 2.5625rem; width: 0.875rem; opacity: 1;} .pwr-cta--regular-solid-primary-background .cta_button:not(.pwr-cta):not(.pwr-cta--hubspot-style) { color: #181721 !important; } .cta_button.pwr-cta--long:hover, .hs-submit .hs-button.large:hover, .pwr-btn--long .hs-submit .hs-button:hover, .pwr-cta--long .cta_button:not(.pwr-cta--hubspot-style):hover { padding-left: 31px; padding-right: 51px; } @media(max-width: 1200px){ .pwr-burger__menu .hs-menu-wrapper ul li > ul li a span { display: none; } } @media (max-width: 575px) { .pwr-post-featured__info-box { bottom: auto; margin: 12px 10px 8px !important; } .pwr-post-body { padding-top: 0px; } .pwr-post-header__title--reduced { font-size: 36px; } .pwr-post-featured, .pwr-post-featured--small { min-height: 0; } .pwr-post-content, .pwr-post-content p { font-size:15px; } /* for ctas to not load half*/ .pwr-mh--wrapper{ height:inherit !important; }