/* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ /* ========= PBP Blog Header (WordPress-look) ========= */ /* BODY + PARAGRAPHS */ body, .hs-richtext { font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; font-size: 18px !important; /* base body size */ line-height: 1.65 !important; color: #000; } p, .hs-richtext p { margin: 0 0 1em !important; font-size: 18px !important; } /* HEADINGS (Montserrat) */ h1, .hs-richtext h1 { font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important; font-weight: 900 !important; font-size: clamp(2.5rem, 4vw, 3.5rem) !important; line-height: 1.15 !important; margin: 0 0 .5em !important; } h2, .hs-richtext h2 { font-family: "Montserrat", ui-sans-serif !important; font-weight: 800 !important; font-size: clamp(2.0rem, 3vw, 3.0rem) !important; line-height: 1.2 !important; margin: 0 0 .5em !important; } h3, .hs-richtext h3 { font-family: "Montserrat", ui-sans-serif !important; font-weight: 700 !important; font-size: clamp(1.6rem, 2.2vw, 2.2rem) !important; line-height: 1.25 !important; margin: 0 0 .5em !important; } h4, .hs-richtext h4 { font-family: "Montserrat", ui-sans-serif !important; font-weight: 700 !important; font-size: clamp(1.35rem, 1.6vw, 1.8rem) !important; line-height: 1.3 !important; margin: 0 0 .4em !important; } h5, .hs-richtext h5 { font-family: "Montserrat", ui-sans-serif !important; font-weight: 600 !important; font-size: clamp(1.15rem, 1.1vw, 1.35rem) !important; line-height: 1.35 !important; margin: 0 0 .35em !important; } h6, .hs-richtext h6 { font-family: "Montserrat", ui-sans-serif !important; font-weight: 600 !important; font-size: clamp(1.0rem, 0.9vw, 1.125rem) !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: #6C6C6C !important; margin: 0 0 .3em !important; } .hs-elevate-button { text-transform: uppercase !important; } /* If Montserrat isn't already loaded in HubSpot, add a Google Fonts link in . Since you asked for "replace whole thing", I'm keeping this CSS-only. */ .pbp-blog-header{ --pbp-ink: #09152B; --pbp-gold: #A89870; --pbp-bg: #ffffff; --pbp-shadow: 0 12px 34px rgba(0,0,0,.14); --pbp-font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--pbp-bg); } /* 3-column layout prevents wrapping: logo | nav | login */ .pbp-blog-header__inner{ max-width: 1320px; margin: 0 auto; padding: 16px 22px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: 18px; } /* Logo size */ .pbp-blog-header__logo img{ height: 44px; width: auto; display: block; } /* Nav center */ .pbp-blog-header__nav{ min-width: 0; display: flex; justify-content: center; } /* Top level menu layout */ .pbp-blog-menu{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; white-space: nowrap; gap: 12px; /* FIX: gap between buttons */ } /* Top items */ .pbp-blog-menu__item{ position: relative; margin: 0; padding: 0; } /* Top links: Montserrat Bold + ALL CAPS */ .pbp-blog-menu__link{ font-family: var(--pbp-font); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pbp-ink); text-decoration: none; padding: 8px 2px; /* tighter width */ line-height: 1; display: inline-flex; align-items: center; } .pbp-blog-menu__link--span{ cursor: default; } /* Hover */ .pbp-blog-menu__link:hover{ color: var(--pbp-gold); } /* Caret (simple CSS triangle) */ .pbp-blog-menu__caret{ display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--pbp-ink); margin-left: 4px; transform: translateY(1px); } /* Caret hover color */ .pbp-blog-menu__item--has-children:hover .pbp-blog-menu__caret{ border-top-color: var(--pbp-gold); } /* Dropdown panel */ .pbp-blog-menu__submenu{ display: none; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); background: #fff; box-shadow: var(--pbp-shadow); border-radius: 2px; padding: 16px 0; min-width: 300px; z-index: 9999; list-style: none; margin: 0; } .pbp-blog-menu__submenu--wide{ min-width: 340px; } /* Show dropdown on hover/focus */ .pbp-blog-menu__item--has-children:hover > .pbp-blog-menu__submenu, .pbp-blog-menu__item--has-children:focus-within > .pbp-blog-menu__submenu{ display: block; } /* Submenu links */ .pbp-blog-menu__sublink{ font-family: var(--pbp-font); font-weight: 500; font-size: 14px; letter-spacing: 0; text-transform: none; color: #222; text-decoration: none; display: block; padding: 12px 22px; line-height: 1.25; } .pbp-blog-menu__sublink:hover{ background: rgba(168,152,112,.10); color: var(--pbp-ink); } /* Login button (WP style) */ .pbp-blog-login{ font-family: var(--pbp-font); font-weight: 700; font-size: 14px; color: var(--pbp-ink); text-decoration: none; border: 2px solid var(--pbp-ink); border-radius: 4px; background: transparent; padding: 9px 14px; /* tighter so menu doesn’t wrap */ display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .pbp-blog-login:hover{ color: var(--pbp-gold); border-color: var(--pbp-gold); } .pbp-blog-login__icon{ display: inline-flex; align-items: center; justify-content: center; } /* Simple responsive fallback */ @media (max-width: 1100px){ .pbp-blog-menu{ gap: 10px; } .pbp-blog-header__logo img{ height: 40px; } }