/*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* Hubspot POWER Template V1.0 */ /* by maka Ageny */ /* */ /* STYLE SETTINGS V1.1 */ /* */ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /*********************************************/ /****************************************************************************/ /* */ /* With this file we provide you with some comfortable options to adjust */ /* some global style aspects of the POWER template to your needs. */ /* */ /* DON'T PANIC, it's way easier than it looks ;) We will guide you */ /* through the different configuration possibilities. */ /* */ /****************************************************************************/ /***************************************************************************** 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 *****************************************************************************/ /* ========================================================================== 1. BASIC COLOR DEFINITIONS #bcd These colors are used throughout the POWER template. The colors are configured in the HEX format. You can find or convert your color with the help of a tool like Photoshop, Gimp or online tools like colorpicker.com A color in the HEX format looks like this: #2254FE Change the HEX values inside the single quotation marks: ========================================================================== */ /* This color represents e.g. background color for dark-mode, dark text color, * is base for dark borders, ... * Theme default: #171B25, Standard black would be #000000 */ /* This color represents e.g. dark accent background color for boxes in front * of dark background (baseColorDark) * Theme default: #282B34 */ /* This color represents e.g. background color for light-mode, * light text color, is base for light borders, ... * Theme default: #FFFFFF (white) */ /* This color represents e.g. light accent background color for boxes in * front of light background (baseColorLight) * Theme default: #F4F6FA */ /* This color represents your primary brand color, e.g. * Accents / Hightlights, Hovers, Buttons, ... * Theme default: #2254FE */ /* ========================================================================== 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. You can either set HEX values like above or use the variable names on the left to reuse colors you have already defined. The latter is done by default and you can already save and have a look how your previous color changes affect your site. ========================================================================== */ /* Dark / Light 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) */ /* Dark / Light Link-Colors for 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) */ /* Social Icon color used for Header Top (light), Author Page, Media Content Split module * Theme default: #C4C8D3 */ /* Form error messages color * Theme default: #F2545B */ /* ========================================================================== 3. FONT AND FONT-SIZES #fs In this section you can configure the web-font(s) you would like to use. A lot of free and commonly used fonts are available at Google Fonts https://fonts.google.com/ There you can select the font and font-weights and use the suggested @import statement here 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 You'll find examples for both cases below ========================================================================== */ /* Google Fonts via @import */ /*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap'); */ /*@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');*/ /*@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');*/ /* 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; } */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @font-face { font-family: "McClatchy Serif"; src: url("https://21456545.fs1.hubspotusercontent-na1.net/hubfs/21456545/fonts/McClatchy_Sans-Regular.woff2") format("woff2"), font-weight: 400; font-style: normal; } @font-face { font-family: "McClatchy Serif"; src: url("https://21456545.fs1.hubspotusercontent-na1.net/hubfs/21456545/fonts/McClatchy-Serif-Medium.woff2") format("woff2"), font-weight: 500; font-style: normal; } @font-face { font-family: "McClatchy Serif"; src: url("https://21456545.fs1.hubspotusercontent-na1.net/hubfs/21456545/fonts/McClatchy_Sans-Semibold.woff2") format("woff2"), font-weight: 600; font-style: bold; } @font-face { font-family: "McClatchy Serif"; src: url("https://21456545.fs1.hubspotusercontent-na1.net/hubfs/21456545/fonts/McClatchy-Serif-Bold.woff2") format("woff2"), font-weight: 700; font-style: bold; } @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); /* Font family to use in the template * * You can set the names of the fonts you have imported via @import or * @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 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-weights */ /* Font weight used in the body */ /* Font weight used in headings */ /* Font weight used in hero title */ /* Font weight for buttons */ /* Font weight Header Top */ /* Font weight Header / Burger */ /* Font weight Footer Titles & Reduced */ /* Font weight Footer Links */ /* 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 checkboxes (max 5px) */ /* Round edges on dropdowns */ /* Round edges on boxes */ /* Round edges on images */ /* ========================================================================== 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 */ /* Section padding in pixel * Relates to 'padding top' and 'padding bottom' setting in modules */ /* 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% */