/*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* CUSTOM STYLE OVERWRITES */ /* */ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /*********************************************/ /*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* 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 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, ... */ /*old value: theme.colors.brand_colors.base_color_dark.color */ /* This color represents e.g. dark accent background color for boxes in front * of dark background (baseColorDark) */ /*old value: theme.colors.brand_colors.accent_color_dark.color */ /* 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 */ /* old value: theme.colors.power.dark_scheme.background.background_color.color*/ /* Dark / Light accent background colors */ /* Dark / Light text colors */ /*old value: theme.colors.power.dark_scheme.text.text_color.color*/ /*old value: theme.colors.power.light_scheme.text.text_color.color*/ /* Dark / Light intro title and title colors * For section intro + title, hero title, author page posts title and * blog overview (layout: 1 column) */ /* old value: theme.colors.power.dark_scheme.titles.title_color.color*/ /* Link-Colors */ /*old value: theme.colors.hs.html.links.link_color.color*/ /*old value: theme.colors.hs.html.links.link_hover_color.color */ /* 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) */ /*old value: .66*/ /*old value: .8*/ /* Hover background and font color for sub-level menu items (Dropdown, Mega-Menu, Burger-Menu) */ /* 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 */ /* ========================================================================== 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; } */ /* roboto-regular - latin */ /* @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; src: local('Roboto'), local('roboto'), url('https://7466322.fs1.hubspotusercontent-na1.net/hubfs/7466322/POWER_child_Code%20Intelligence/roboto-v29-latin-regular.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */ /* font-display: swap; */ } */ /* roboto-700 - latin */ /* @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: local('Roboto'), local('roboto'), url('https://7466322.fs1.hubspotusercontent-na1.net/hubfs/7466322/POWER_child_Code%20Intelligence/roboto-v29-latin-700.woff2') format('woff2'); /* Chrome 26+, Opera 23+, Firefox 39+ */ /* 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-size: 5px; --sl-pag-height: 5px; --sl-pag-bullet-inactive-border-radius: 0px; --sl-pag-bullet-inactive-border-radius: 50%; --sl-pag-bullet-active-size: 5px; --sl-pag-bullet-active-border-radius: 0px; --sl-pag-bullet-active-border-radius: 50%; } /****************************************************************************/ /* */ /* IF YOU WOULD LIKE TO OVERWRITE CSS STYLE SETTINGS TO FURTHER CUSTOMIZE */ /* THE TEMPLATE TO YOUR NEEDS, PLEASE USE child.css */ /* */ /****************************************************************************/