/*********************************************/ /* =^..^= =^..^= =^..^= =^..^= =^..^= =^..^= */ /* */ /* 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 *****************************************************************************/ /* ========================================================================== 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) */ /* 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; } */ /* 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% */ /****************************************************************************/ /* */ /* IF YOU WOULD LIKE TO OVERWRITE CSS STYLE SETTINGS TO FURTHER CUSTOMIZE */ /* THE TEMPLATE TO YOUR NEEDS, PLEASE USE THIS FILE */ /* */ /****************************************************************************/ /* EXAMPLE - Landing Page Overwrites */ /* LP Heading - Lineheight */ .lp-squeeze-wrapper h1, .lp-basic-wrapper h1 { line-height: 1.2em; } /* LP Horizontal Box - Left Content Vertical Top alignment */ .lp-premium-content-wrapper .pwr-sec-form__content--v-align { align-items: initial; } /* EXAMPLE - ENTRY PAGE OF DEMO SITE */ /* Common */ .pwr-entry-wrapper .pwr-sec__title { line-height: 1.3em; } /* Hero */ .pwr-entry-wrapper .pwr-hero { height: 700px; } .pwr-entry-wrapper .pwr-hero__title { font-size: 130px; max-width: 950px; } .pwr-entry-wrapper .pwr-hero__desc { max-width: 100%; } @media (max-width: 1100px ) { .pwr-entry-wrapper .pwr-hero__title { font-size: 110px; line-height: 1em; } } @media (max-width: 576px ) { .pwr-entry-wrapper .pwr-hero__title { font-size: 66px; } } /* List of Templates */ .pwr-entry-wrapper .pwr-image-box--smaller .pwr-image-box__title { font-size: 15px; } .pwr-entry-wrapper .pwr-image-box.pwr-image-box--4cols.pwr-image-box--one-by-one .pwr-image-box__img { height: 214px; } .pwr-entry-wrapper .pwr-image-box__below { padding: 25px 0; } /* CTA module titles */ .pwr-entry-wrapper .pwr-sec-cta__title { max-width: 880px; } /* Template Features */ .pwr-entry-wrapper .pwr-sec-txt .pwr-sec-txt__title-intro { margin-bottom: 5px; } .pwr-entry-wrapper .pwr-sec-steps .pwr-step__desc { line-height: 1.8em; } .pwr-entry-wrapper .pwr-sec-steps:not(.pwr-sec-steps--with-intro) .pwr-step { padding: 40px 20px; border-radius: 7px; border: 1px solid rgba(0,0,0,0.2); margin: 10px; } @media (max-width: 575px) { .pwr-entry-wrapper .pwr-sec-steps .pwr-step { margin-left: 0; margin-right: 0; } } /* Mockup and layout variant sections */ .pwr-entry-wrapper .pwr-sec-mockup .pwr-sec-mockup__title-intro, .pwr-entry-wrapper .pwr-sec-steps--with-intro .pwr-sec-steps__title-intro { color: #003B87; font-size: 100px; font-weight: 800; margin-bottom: 0px; line-height: 1em; } .pwr-entry-wrapper .pwr-sec-mockup .pwr-sec-mockup_title, .pwr-entry-wrapper .pwr-sec-steps--with-intro .pwr-sec-steps__title { line-height: 1.3em; } .pwr-entry-wrapper .pwr-sec-steps .pwr-sec__title + .pwr-sec__desc { margin-top: 15px; } .pwr-entry-wrapper .pwr-sec-mockup .pwr-sec-mockup__desc, .pwr-entry-wrapper .pwr-sec-steps--with-intro .pwr-sec-steps__desc { line-height: 1.8em; } .pwr-entry-wrapper .pwr-sec-steps--with-intro .pwr-step__img { height: auto; margin-bottom: 20px; } .pwr-entry-wrapper .pwr-sec-steps--with-intro .pwr-step { margin: 0 10px 10px; padding: 0; } @media (max-width: 575px) { .pwr-entry-wrapper .pwr-sec-steps .pwr-step { margin-left: 0 !important; margin-right: 0 !important; } } /* Modules and cross-browser section */ .pwr-entry-wrapper .pwr-sec-maintenance-error__img--bottom { margin-top: 60px; @media (min-width: 768px) and (max-width: 1024px) { .pwr-image-box-smaller .pwr-image-box__title { font-size: 20px; /* Ajusta según sea necesario */ } .pwr-image-box-4cols .pwr-image-box-one-by-one .pwr-image-box__img { height: auto; /* Ajusta el alto para que no sea fijo */ width: 100% !important; /* Asegura que las imágenes no se desborden */ } .pwr-image-box_below { padding: 15px 0; /* Ajusta el espaciado */ } } @media (min-width: 768px) and (max-width: 1139px) { .row-fluid { display: flex; flex-wrap: wrap; justify-content: center; /* Centra los cuadros */ } .row-fluid [class*="span"] { width: calc(50% - 20px); /* Dos cuadros por fila */ min-height: auto; /* Evita que se estiren */ margin: 10px; /* Espaciado entre cuadros */ } } @media (min-width: 768px) and (max-width: 819px) { .row-fluid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; } .row-fluid [class*="span"] { width: calc(50% - 20px) !important; /* Fuerza a dos columnas */ min-height: auto !important; margin: 10px !important; } } ..pwr-abs-full { background-size: contain !important; background-repeat: no-repeat !important; background-position: center center !important; width: 100% !important; height: auto !important; max-width: 100% !important; min-height: 300px !important; /* Ajusta el alto mínimo según la necesidad */ }