/* === GLOBAL TYPOGRAPHY DEFAULTS (mirror live Nuxt body styles) === * Live (vestfin.com) applies these to via Vue scoped-style rules * (`body[data-v-*]{color:#003140;font-family:DM Sans;font-size:16px;line-height:1.5;margin:0;}`). * Tailwind CDN's preflight gives system-font + black text by default, * so any element that inherits from body (rather than carrying its own * `font-sans text-[#003140]` classes) renders with the wrong tokens. * Setting these on the bare `body` selector fixes inheritance globally * without affecting elements that already carry explicit utility classes. */ body { color: #003140; font-family: 'DM Sans', sans-serif; font-size: 16px; line-height: 1.5; margin: 0; } /* === FONT FIXES (site-specific font stacks) === */ /* Global DM Sans for all .font-sans elements */ .font-sans { font-family: 'DM Sans', sans-serif !important; } /* Footer: ALL text uses Lato */ .adviser-footer p, .adviser-footer a, .adviser-footer b, .adviser-footer strong, .adviser-footer span, .adviser-footer li { font-family: Lato !important; letter-spacing: 0.1px !important; } .adviser-footer p { line-height: 18px; } .adviser-footer b, .adviser-footer strong { font-weight: 700 !important; } /* Footer inner border color fix */ .adviser-footer__inner { border-top-color: rgb(202, 207, 200) !important; } /* === SITE-SPECIFIC LAYOUT MICRO-FIXES === */ /* Slider title letter-spacing */ /* .resource-item__title { letter-spacing: 0.2px; } */ /* Slider card text color */ .resource-item__title, .resource-item__description { color: #102F40 !important; } /* CTA fixes */ .cta h2 { font-weight: 700; } .cta p { line-height: 36px !important; } .cta__button { line-height: 30px !important; } /* Slider card height */ .resource-item__body { padding-bottom: 26px !important; } /* Line-clamp on resource items */ /* .resource-item__description { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } */ .resource-item__title span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Navbar height */ .navbar { height: 63px; } .navbar__wrapper { height: 63px; } .navbar__wrapper__container { height: 62px; } /* Homepage-only sticky navbar */ body.vestfin-front-page .navbar body.home .navbar { position: sticky; top: 0; z-index: 9998; } body.vestfin-front-page .navbar__wrapper, body.vestfin-front-page .navbar__options-wrapper, body.vestfin-front-page .mobile-navbar__top-bar, body.home .navbar__wrapper, body.home .navbar__options-wrapper, body.home .mobile-navbar__top-bar { border-bottom-color: #cacfc8 !important; } /* Footer column padding — !important required to beat Nuxt's advisor-disclaimer * scoped CSS which sets padding:15px on these classes on buffer-caps / * buffer-scenario-analyzer / other advisor-disclaimer pages. */ .adviser-footer__inner__first-column { padding: 15px 15px 15px 0px !important; } .adviser-footer__inner__second-column { padding: 15px 0px 15px 15px !important; } /* === INTERACTIVITY: Slider scroll behavior === */ /* vue3-carousel structure: .resources-slider__carousel > .carousel__viewport > .carousel__track > slides */ /* The viewport has overflow:hidden baked in; override to allow CSS scrolling */ .carousel__viewport { overflow-x: auto !important; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .carousel__viewport::-webkit-scrollbar { display: none; } /* Track must NOT be constrained to 100% width — let slides overflow */ .carousel__track { width: max-content !important; flex-wrap: nowrap; } .resources-slider__carousel__slide { scroll-snap-align: start; flex-shrink: 0; width: 33.333%; /* Width relative to viewport, not track */ width: calc((100vw - 80px) / 3) !important; } /* === INTERACTIVITY: Mobile menu === */ .mobile-navbar__top-bar__menu { align-items: center; background: transparent; border: 0; display: flex; height: 44px; justify-content: center; min-height: 44px; min-width: 24px; padding: 0; width: 24px; cursor: pointer; } /* Mobile navbar layout: logo left, hamburger right */ .mobile-navbar__top-bar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; width: 100%; } .mobile-navbar__top-bar__logo { flex-shrink: 0; } .mobile-navbar__top-bar__logo img { height: 28px; width: auto; } .mobile-navbar__top-bar__menu img { width: 24px; height: 24px; } /* Mobile drawer body */ .mobile-navbar__nav-container { width: 100%; flex: 1 1 auto; display: flex; flex-direction: column; margin: 0; background: #fff; } .mobile-navbar__nav-container.hidden { display: none; } .mobile-navbar__nav-container__actions { flex: 1 1 auto; overflow-y: auto; } .mobile-navbar__nav-container__actions__nav-items { padding: 16px 26px; } .mobile-navbar__nav-container__actions__nav-items__item { display: block; list-style: none; padding: 0; } .mobile-navbar__nav-container__actions__nav-items__item__row { border-bottom: 0 !important; min-height: 58px; padding: 16px 0 !important; } .mobile-navbar__nav-container__actions__nav-items__item__title { font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 700; line-height: 26px; margin-left: 8px; } .mobile-navbar__nav-container__actions__nav-items__item__action { margin-right: 2px; } .mobile-navbar__nav-container__actions__nav-items__item__sub { background: #fff !important; margin: 16px 0px; padding-left: 1.7rem; } .mobile-navbar__nav-container__actions__nav-items__item__sub a { color: #003140; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 24px; padding-bottom: 10px; padding-top: 10px; text-decoration: none; } .mobile-navbar__nav-container__actions__nav-items__item__sub a:hover, .mobile-navbar__nav-container__actions__nav-items__item__sub a:focus { text-decoration: underline !important; text-underline-offset: 3px; } .mobile-navbar__nav-container__actions__selected-mobile-nav-item__actions__grid-content__column__header { font-size: 16px; line-height: 24px; margin: 8px 24px 2px 0 !important; padding-top: 16px; } .mobile-navbar__nav-container__actions__selected-mobile-nav-item__actions__grid-content__column__header:not(:first-child) { border-top: 1px solid #cacfc8; } .mobile-navbar .hiring-badge { background: #ffa523; color: #003140; display: inline-block; font-size: 12px; font-weight: 700; line-height: 14px; margin-left: 10px; padding: 6px 8px; vertical-align: middle; } .mobile-navbar__nav-container__cta { margin: 8px 0 24px; padding: 0 20px !important; } .mobile-navbar__nav-container__cta .app-button { border: 2px solid #ffa523; font-size: 16px; line-height: 22px; padding: 12px 20px; } /* Desktop dropdown — show on hover via JS class, but also on :hover for pointer devices that bypass mouseenter listeners. */ .navbar__options-wrapper { top: 100%; left: 0; padding: 0; z-index: 9997; } .navbar__options-wrapper:not(.hidden) { display: block; } .navbar__wrapper__container__left-block__nav-items__item { border-bottom: 6px solid transparent; margin: 0 8px; padding: 16px 0; } .navbar__wrapper__container__left-block__nav-items__item[data-nav-active] > span { text-decoration: none; } .navbar__wrapper__container__left-block__nav-items__item[data-nav-active] { border-bottom-color: #ffa523; } .navbar__options-wrapper__options { margin-top: 16px; padding-bottom: 0 !important; padding-top: 0 !important; } .navbar__options-wrapper__options__item-container { display: flex; gap: 80px; list-style: none; margin: 0; padding: 32px 0; position: relative; } .navbar__options-wrapper__options__item-container__placeholder { background: transparent; flex: 0 0 120px; height: 40px; } .navbar__options-wrapper__options__item-container__grid-content { align-items: start; column-gap: 40px; /* `display: grid` !important required: navigation-modal-v2 Nuxt CSS * (loaded on buffer-caps / buffer-scenario-analyzer) sets display:flex * with same specificity and would otherwise win. */ display: grid !important; grid-template-columns: repeat(4, minmax(120px, max-content)) !important; justify-content: start; row-gap: 40px !important; } .navbar__options-wrapper__options__item-container__grid-content__column { display: flex; flex-direction: column; gap: 16px; width: fit-content; } .navbar__options-wrapper__options__item-container__grid-content__column__header { font-size: 16px; line-height: 24px; margin-bottom: 0 !important; } .navbar__options-wrapper__options__item-container__left { display: flex; flex-direction: column; gap: 16px; list-style: none; margin: 0; padding: 0; text-align: left; } .navbar__options-wrapper__options__item-container__left li { font-family: 'DM Sans', sans-serif; font-size: 18px; font-style: normal; font-weight: 400; line-height: 26px; padding-bottom: 0; padding-top: 0; position: relative; width: fit-content; } .navbar__options-wrapper__options__item-container__left a { color: #003140; text-decoration-color: transparent !important; text-decoration-line: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 2px; transition: text-decoration-color .3s; } .navbar__options-wrapper__options__item-container__left a:hover, .navbar__options-wrapper__options__item-container__left a:focus { text-decoration-color: #003140 !important; } .navbar__options-wrapper__options__item-container__left__badge { background: #ffa523; border-radius: 0; color: #003140; font-size: 12px !important; font-weight: 700; line-height: 14px !important; padding: 6px 8px !important; text-transform: none !important; }