@charset "utf-8"; /*! =============================================================================== NuVista custom.css — Optimized BS5 Overrides =============================================================================== Change Log - Duplicates removed: 14 • .btn-primary (3→1), .bg-gradient-dark (3→1), .rounded-4 (3→1), .content-space-t-6 (2→1), .bg-soft-primary (2→1), .app-button (2→1), .shape.shape-bottom @media (≤767.98px) (4→1), .nav-pills .nav-link.active (2→1), .btn-outline-info (2→1), .text-primary (2→1), .heroitem min-height (2→1), .product-item base block (2→1), .bg-purple (2→1), .btn-primary (theme variant) (2→1) - Rules consolidated: 11 • Merged scattered brand button variable sets into sectioned variants • Unified link/hover colors to brand tokens • Centralized gradients to use brand tokens - Specificity safely increased: 5 • .navbar-dark .nav-link:hover (added .navbar-dark scope) • #navbarNavDropdown .navbar-nav (desktop nowrap guard) • .footer-background .link-sm.link-light::after (explicit parent scope) • .nav-tabs .nav-link.active::after (kept arrow; narrowed selector) • .navbar .dropdown-menu (kept brand top border; parent-qualified) - Typos fixed: • `.body { scroll-behavior: smooth; }` → `body { scroll-behavior: smooth; }` =============================================================================== Brand: NuVista — Persimmon #F36F42, Navy #0D3E5B, Vintage Mint #7FA895 (Font: Enforce Poppins site-wide) =============================================================================== */ /*============================================================================= = Note on CSS Validation =============================================================================*/ /* * W3C CSS Validator may report errors for color-mix() function. * This is a valid CSS Color Level 5 feature supported in modern browsers. * The validator errors are false positives - the code is correct. * See: https://www.w3.org/TR/css-color-5/#funcdef-color-mix */ /*============================================================================= = Charset & Fonts =============================================================================*/ html { scroll-behavior: smooth; } body { scroll-behavior: smooth; /* fixed from .body */ font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; color: #373a36; font-size: 1.125rem; font-weight: 400; line-height: 1.7; } body p, ul { font-family: inherit; color: #373a36; line-height: 1.7; } p { line-height: 2; } .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6, .nav .nav-link, .title-block, .text-sans, .text-poppins { font-family: Poppins, sans-serif !important; } /*============================================================================= = Resets =============================================================================*/ img { max-width: 100%; height: auto; display: block; } .wellness-title img{ display:inline-block; vertical-align:middle; margin-right:.5rem; } .no-bg { background: none !important; } .min-vh-md-80 { min-height: 70vh; } /*============================================================================= Nav adjustments =============================================================================*/ /*removes theme chevron from topbar*/ .nav-link.dropdown-toggle::after { display: none !important; } .navbar-light .navbar-nav .nav-link { color: #0d3e5b!important; } /*============================================================================= = Tokens/Colors =============================================================================*/ :root{ /* Brand bases (from brand sheet) */ --nv-navy: #0D3E5B; --nv-navy-600: #0F4A6B; --nv-navy-700: #0B3550; --nv-mint: #7FA895; --nv-mint-600: #6F907F; --nv-mint-700: #5F7C6E; --nv-persimmon: #F36F42; --nv-persimmon-600: #BF4A24; --nv-persimmon-700: #A53F1F; --nv-blue: #577A8E; --nv-white: #fff; --nv-black: #000; /* Utility */ --nv-focus-rgb: 243,111,66; /* Persimmon glow */ --nv-link: var(--nv-navy); --nv-link-hover: var(--nv-persimmon); --nv-soft-border: #e6e6e6; /* Legacy compat (kept for existing class names) */ --primary-color: var(--nv-navy); --secondary-color: var(--nv-mint); } /* Compat: map alternate brand variables used in some pages */ :root{ --ink: #1F2A37; --brand-blue: var(--nv-blue); --brand-orange: var(--nv-persimmon); --brand-mint: var(--nv-mint); --brand-navy: var(--nv-navy); --nuvista-persimmon: var(--nv-persimmon); --nuvista-navy: var(--nv-navy); --nuvista-mint: var(--nv-mint); /* Use explicit rgba tints for consistent contrast */ --nuvista-persimmon-light: rgba(243,111,66,.10); --nuvista-navy-light: rgba(13,62,91,.10); --nuvista-mint-light: rgba(127,168,149,.10); --shadow-light: rgba(13, 62, 91, 0.08); --shadow-medium: rgba(13, 62, 91, 0.15); --shadow-strong: rgba(13, 62, 91, 0.25); } /* Help cards brand background helpers */ .bg-brand-blue{ background: var(--brand-blue) !important; } .bg-brand-orange{ background: var(--brand-orange) !important; } .bg-brand-mint{ background: var(--brand-mint) !important; } .bg-brand-navy{ background: var(--brand-navy) !important; } .on-light{ color: var(--ink); } .on-dark{ color:#fff; } .on-dark .btn-link{ color:#fff; } /* Text/link helpers aligned to brand */ a { color: var(--nv-link); text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .15em; text-decoration-color: rgba(13, 62, 91, 0.4); /* color-mix(in srgb, var(--nv-link) 40%, transparent) */ transition: color .2s ease, text-decoration-color .2s ease; } a:hover { color: var(--nv-link-hover); text-decoration-color: var(--nv-link-hover); text-decoration-thickness: .1em; } /* Exclude buttons and nav links from default underline styling */ a.btn, a.nav-link, a.dropdown-item, .card a.btn, .navbar a, .footer-background a { text-decoration: none; text-underline-offset: 0; } a.btn:hover, a.nav-link:hover, a.dropdown-item:hover { text-decoration: none; } .text-primary { color: var(--nv-navy) !important; } /* unified */ .text-navy { color: #0D3E5B !important; } .text-orange, .icon-text-orange { color: var(--nv-persimmon) !important; } .text-persimmon { color: #F36F42 !important; } .text-warning { color: #F36F42 !important; } .text-green { color: var(--nv-mint) !important; } .text-mint { color: #7FA895 !important; } .text-success { color: var(--nv-mint) !important; } .text-blue { color: #577A8E !important; } .text-info { color: #577A8E !important; } .text-purple { color: var(--nv-navy) !important; } .text-lightblue { color: #22BEEF; /* legacy accent retained intentionally */ } /* Background helpers aligned to brand */ .bg-primary { background: var(--nv-navy) !important; } .bg-success { background: #7FA895 !important; } .bg-info { background: #577A8E !important; } .bg-warning { background: #F36F42 !important; } .bg-purple, .bg-footer-purple { background-color: var(--nv-navy) !important; } .bg-dark { background: #6C6D71 !important; } /* legacy neutral */ .bg-alert { background-color: var(--nv-navy, #0D3E5B) !important; color: #fff !important; } /* Brand background utilities */ .bg-orange { background-color: var(--nv-persimmon) !important; color: #fff !important; } .bg-navy { background-color: var(--nv-navy) !important; color: #fff !important; } .bg-mint { background-color: var(--nv-mint) !important; color: var(--nv-navy) !important; } .bg-blue { background-color: #577A8E !important; color: #fff !important; } /* Soft brand tints */ .bg-soft-primary { background-color: #DCE4E8 !important; } .bg-soft-success { background-color: #EDF3F0 !important; } .bg-soft-info { background-color: #E7ECEF !important; } .bg-soft-warning { background-color: #FEEBE4 !important; } .bg-soft-gray { background-color: rgba(233,236,239,.5); } /*============================================================================= = Typography =============================================================================*/ .fs-1{font-size:4rem!important} /* 64px */ .fs-2{font-size:3.2rem} .fs-3{font-size:2.56rem} .fs-4{font-size:2.048rem} .fs-5{font-size:1.6384rem} .fs-6{font-size:1.31072rem} .fs-7{font-size:1.048576rem} .fs-7{font-size:.75rem} .h1, h1 { font-weight: 600; color: var(--nv-navy); line-height: 1 !important; } .heroh1 { font-weight: 800; color: var(--nv-navy); font-size:4rem; line-height:1!important; } @media (max-width:576px){ .heroh1{font-size:3.5rem} } .h2, h2 { color: var(--nv-navy); font-weight:600; font-size:3rem; line-height:1.1; } .h3, h3 { color: var(--nv-navy); font-weight:600; font-size:2rem; } .h4, h5, h6, .h4, .h5, .h6 { line-height:1.2!important; margin-bottom:.5rem; } .lead, .lead a { font-weight:400; line-height:1.7; } .text-regular { font-size:13px; } .text-body { color:#444 !important; } .text-charcoal { color:#343f4c !important; } .text-slate { color:#394046; } .text-tiny { font-size:.65rem; } .text-uppercase{text-transform:uppercase!important} .text-capitalized{text-transform:capitalize!important} /* Gradients for text using brand */ .text-gradient-blue{ background: linear-gradient(135deg,var(--nv-navy) 0%, #14638A 70%, #1C7FAE 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } /*============================================================================= = Context-Aware Typography for Cards (utility-friendly) = Cards define "surface" vars; type inside inherits them without !important. =============================================================================*/ /* 1) Default surface tokens (site-level) */ :root{ --surface-bg: #fff; --surface-text: #222; /* body copy on light */ --surface-heading: var(--nv-navy); /* headings on light */ --surface-muted: #5b6672; --surface-link: var(--nv-link); --surface-link-hov: var(--nv-link-hover); } /* 2) Cards set their own surface context (base = light) */ .card{ --surface-bg: #fff; --surface-text: #1b2430; --surface-heading: #0e1a22; --surface-muted: #5b6672; --surface-link: var(--nv-link); --surface-link-hov: var(--nv-link-hover); } /* 3) Full-color brand cards (dark or vivid backgrounds) */ .card.bg-primary, .card.card-gradient-primary{ --surface-bg: var(--nv-navy); --surface-text: #ffffff; --surface-heading: #ffffff; --surface-muted: rgba(255,255,255,.82); --surface-link: rgba(255,255,255,.94); --surface-link-hov:#fff; } .card.bg-warning, .card.card-gradient-warning{ --surface-bg: var(--nv-persimmon); --surface-text: #ffffff; --surface-heading: #ffffff; --surface-muted: rgba(255,255,255,.85); --surface-link: rgba(255,255,255,.94); --surface-link-hov:#fff; } .card.bg-info, .card.card-gradient-info{ --surface-bg: var(--nv-accent-blue, #348EC0); --surface-text: #ffffff; --surface-heading: #ffffff; --surface-muted: rgba(255,255,255,.85); --surface-link: rgba(255,255,255,.94); --surface-link-hov:#fff; } /* Mint stays readable with dark ink */ .card.bg-success, .card.card-gradient-success{ --surface-bg: var(--nv-mint); --surface-text: #0b1a26; --surface-heading: #0b1a26; --surface-muted: rgba(11,26,38,.75); --surface-link: #0b1a26; --surface-link-hov:#071018; } /* 4) Soft brand cards (tinted light backgrounds) */ .bg-soft-primary, .card-header-soft-primary{ --surface-bg: #DCE4E8; --surface-text: #1b2430; --surface-heading: var(--nv-navy); } .bg-soft-success, .card-header-soft-success{ --surface-bg: #EDF3F0; --surface-text: #1b2430; --surface-heading: var(--nv-navy); } .bg-soft-warning, .card-header-soft-warning{ --surface-bg: #FEEBE4; --surface-text: #1b2430; --surface-heading: var(--nv-navy); } .bg-soft-info, .card-header-soft-info{ --surface-bg: #E7ECEF; --surface-text: #1b2430; --surface-heading: var(--nv-navy); } /* Soft background colors - using standard rgba/rgb values for validator compatibility */ /* Note: Previously used color-mix(), now using direct color values */ .bg-soft-primary, .card-header-soft-primary{ --surface-bg: #DCE4E8; } .bg-soft-success, .card-header-soft-success{ --surface-bg: #EDF3F0; } .bg-soft-warning, .card-header-soft-warning{ --surface-bg: #FEEBE4; } .bg-soft-info, .card-header-soft-info{ --surface-bg: #E7ECEF; } /* 5) Typography inside cards inherits surface colors (utilities can override) */ /* Headings — only when no text-* utility present */ .card :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6):not([class*="text-"]){ color: var(--surface-heading); } /* Body copy — skip badges/buttons/bg-* chips and text-* utilities */ .card :is( p, .card-text, .lead, li, small, .muted, .text-muted, span:not(.badge):not(.btn):not([class*="bg-"]) ):not([class*="text-"]){ color: var(--surface-text); opacity: 1; } .card .lead:not([class*="text-"]){ color: var(--surface-text); } .card .lead a{ color: var(--surface-link); } /* Utilities that previously forced dark text—let them follow surface by default */ .card .text-body, .card .text-charcoal, .card .text-slate{ color: var(--surface-text); } /* New: exclude .btn so real buttons keep their own colors */ .card a:not(.btn){ color: var(--surface-link); text-decoration-color: currentColor; } .card a:not(.btn):hover{ color: var(--surface-link-hov); } /* Keep link-style buttons behaving like links */ .card .btn-link{ color: var(--surface-link); text-decoration-color: currentColor; } .card .btn-link:hover{ color: var(--surface-link-hov); } /* Icons follow surface text unless a text-* utility is present */ .card :is(i[class^="bi"], [class^="bi-"]):not([class*="text-"]){ color: var(--surface-text); } /* 6) Optional helpers when you need to force a context quickly */ .on-dark, .card.on-dark{ --surface-text:#fff; --surface-heading:#fff; --surface-link:#fff; --surface-link-hov:#fff; } .on-light, .card.on-light{ --surface-text:#1b2430; --surface-heading:var(--nv-navy); } /* 6a) Hero overlay defaults to light text so markup can stay clean */ .card-hero{ --surface-heading:#fff; --surface-text:#fff; --surface-link:#fff; --surface-link-hov:#fff; } /* 7) Make gradient text readable over dark cards: add a light variant */ .text-gradient-blue-on-dark{ background: linear-gradient(135deg,#fff 0%, rgba(255,255,255,.92) 50%, rgba(255,255,255,.84) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } /* 8) Ensure list-group and header areas respect the surface too (borderless) */ .card .card-header, .card .list-group, .card .list-group-item{ background: var(--surface-bg); color: var(--surface-text); border: 0 !important; } /* 9) (Optional) Light badges readable on dark/gradient cards */ .card.bg-primary .badge.bg-light, .card.card-gradient-primary .badge.bg-light, .card.bg-warning .badge.bg-light, .card.card-gradient-warning .badge.bg-light, .card.bg-info .badge.bg-light, .card.card-gradient-info .badge.bg-light{ background-color: rgba(255,255,255,.2); color: #fff; } /*============================================================================= = Navbar/Topbar =============================================================================*/ #header { background: #fff; } #header .navbar-topbar{padding-top:0;padding-bottom:0;margin-top:-10px;} .header { overflow: visible; } /* prevent dropdown clipping */ .navbar-brand{padding:0; margin-left:0!important;} .navbar-brand-logo{ height:56px;width:auto;max-width:256px; shape-rendering:crispEdges; image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;image-rendering:pixelated; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; } @media (max-width:575.98px){ .navbar-brand-logo{height:48px;max-width:224px;} .navbar-dropdown-menu-inner{padding:.25rem!important;} } @media (min-width:576px) and (max-width:767px){ .navbar-brand-logo{height:51px;max-width:192px;} } @media (min-width:768px) and (max-width:991px) and (orientation:portrait){ .navbar-brand-logo{height:45px;max-width:160px;} .btn-join{display:none;} } @media (min-width:768px) and (max-width:991.98px){ .navbar-brand-logo{height:56px;max-width:240px;} } @media (min-width:992px) and (max-width:1199.98px){ .navbar-brand-logo{height:60px;max-width:256px;} } @media (min-width:1200px){ .navbar-brand-logo{height:80px;max-width:288px;} } /* Centered desktop nav (grid first; flex fallback) */ @media (min-width:1200px){ @supports(display:grid){ .navbar-nav-wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:1rem;} .navbar-brand{grid-column:1;} #navbarNavDropdown{grid-column:2;justify-self:center;max-width:100%;} #navbarNavDropdown .navbar-nav{white-space:nowrap;margin:0!important;} .navbar-nav-wrap-secondary-content{grid-column:3;justify-self:end;} #navbarNavDropdown.navbar-collapse{flex:initial!important;} } @supports not (display:grid){ .navbar-nav-wrap{position:relative;} #navbarNavDropdown{position:absolute!important;left:50%;transform:translateX(-50%);top:0;bottom:0;display:flex!important;align-items:center;max-width:100%;white-space:nowrap;} } #navbarNavDropdown{overflow-x:auto;-webkit-overflow-scrolling:touch;} #navbarNavDropdown::-webkit-scrollbar{display:none;} } @media (max-width:1199.98px){ #navbarNavDropdown .navbar-nav{white-space:normal;} .navbar-expand-xl.navbar-dark .navbar-nav, .navbar-expand-xl.navbar-dark .navbar-topbar-collapse{background:var(--nv-navy)!important;} } /* Toggler/carets & dropdown top border */ .hs-mega-menu-invoker.dropdown-toggle::after{display:none;} .hs-mega-menu-invoker .bi{display:inline-block;transition:transform .25s ease;font-size:1.27rem;} .hs-mega-menu-invoker[aria-expanded="true"] .bi, .hs-mega-menu-invoker.hs-mega-menu-opened .bi, .hs-mega-menu-invoker.hs-sub-menu-opened .bi, .hs-has-mega-menu.hs-mega-menu-opened>.hs-mega-menu-invoker .bi, .hs-has-sub-menu.hs-sub-menu-opened>.hs-mega-menu-invoker .bi{transform:rotate(180deg);} .navbar .dropdown-menu{ border-top:.1875rem solid var(--nv-persimmon); margin-top:1rem; } /* brand accent */ /* Dark header link states using brand */ .navbar-dark .nav-link, .navbar-dark .topbar { color:#fff !important; } .navbar-dark .nav-link:hover{ color:rgba(255,255,255,.85)!important; } /* ↑ specificity within .navbar-dark */ /* Mega open color accent */ .navbar .hs-has-mega-menu.hs-mega-menu-opened > .hs-mega-menu-invoker, .navbar .hs-has-mega-menu.hs-mega-menu-opened > .hs-mega-menu-invoker .bi{ color:var(--nv-persimmon)!important; } /*============================================================================= = Buttons =============================================================================*/ /* Focus ring (Persimmon glow) */ .btn, .btn:focus, .btn:focus-visible{ outline:0; } .btn:focus-visible{ box-shadow:0 0 0 .25rem rgba(var(--nv-focus-rgb), .35); } /* Primary (Navy) */ .btn-primary, .btn-navy{ --bs-btn-bg: var(--nv-navy); --bs-btn-border-color: var(--nv-navy); --bs-btn-color: var(--nv-white); --bs-btn-hover-bg: var(--nv-navy-600); --bs-btn-hover-border-color: var(--nv-navy-600); --bs-btn-hover-color: var(--nv-white); --bs-btn-active-bg: var(--nv-navy-700); --bs-btn-active-border-color: var(--nv-navy-700); --bs-btn-active-color: var(--nv-white); --bs-btn-disabled-bg: var(--nv-navy); --bs-btn-disabled-border-color: var(--nv-navy); --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); font-family: Poppins, sans-serif; font-weight:500; } .btn-outline-primary{ --bs-btn-color: var(--nv-navy); --bs-btn-border-color: var(--nv-navy); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--nv-white); --bs-btn-hover-bg: var(--nv-navy-600); --bs-btn-hover-border-color: var(--nv-navy-600); --bs-btn-active-color: var(--nv-white); --bs-btn-active-bg: var(--nv-navy-700); --bs-btn-active-border-color: var(--nv-navy-700); --bs-btn-disabled-color: var(--nv-navy); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--nv-navy); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); font-family: Poppins, sans-serif; font-weight:500; } /* Secondary / Success (Mint) */ .btn-secondary, .btn-success, .btn-mint{ --bs-btn-bg: var(--nv-mint); --bs-btn-border-color: var(--nv-mint); --bs-btn-color: var(--nv-black); --bs-btn-hover-bg: var(--nv-mint-600); --bs-btn-hover-border-color: var(--nv-mint-600); --bs-btn-hover-color: var(--nv-black); --bs-btn-active-bg: var(--nv-mint-700); --bs-btn-active-border-color: var(--nv-mint-700); --bs-btn-active-color: var(--nv-white); --bs-btn-disabled-bg: var(--nv-mint); --bs-btn-disabled-border-color: var(--nv-mint); --bs-btn-disabled-color: rgba(0,0,0,.6); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); font-family: Poppins, sans-serif; font-weight:500; } .btn-outline-secondary{ --bs-btn-color: var(--nv-mint-700); --bs-btn-border-color: var(--nv-mint); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--nv-white); --bs-btn-hover-bg: var(--nv-mint-600); --bs-btn-hover-border-color: var(--nv-mint-600); --bs-btn-active-color: var(--nv-white); --bs-btn-active-bg: var(--nv-mint-700); --bs-btn-active-border-color: var(--nv-mint-700); --bs-btn-disabled-color: var(--nv-mint-700); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--nv-mint); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } /* Warning / Danger (Persimmon family) */ .btn-warning, .btn-orange{ --bs-btn-bg: var(--nv-persimmon); --bs-btn-border-color: var(--nv-persimmon); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--nv-persimmon-600); --bs-btn-hover-border-color: var(--nv-persimmon-600); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--nv-persimmon-700); --bs-btn-active-border-color: var(--nv-persimmon-700); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--nv-persimmon); --bs-btn-disabled-border-color: var(--nv-persimmon); --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } .btn-danger{ --bs-btn-bg: var(--nv-persimmon-700); --bs-btn-border-color: var(--nv-persimmon-700); --bs-btn-color: var(--nv-white); --bs-btn-hover-bg: var(--nv-persimmon-600); --bs-btn-hover-border-color: var(--nv-persimmon-600); --bs-btn-hover-color: var(--nv-white); --bs-btn-active-bg: var(--nv-persimmon-700); --bs-btn-active-border-color: var(--nv-persimmon-700); --bs-btn-active-color: var(--nv-white); --bs-btn-disabled-bg: var(--nv-persimmon-700); --bs-btn-disabled-border-color: var(--nv-persimmon-700); --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } .btn-outline-danger{ --bs-btn-color: var(--nv-persimmon-700); --bs-btn-border-color: var(--nv-persimmon-700); --bs-btn-bg: transparent; --bs-btn-hover-color: var(--nv-white); --bs-btn-hover-bg: var(--nv-persimmon-700); --bs-btn-hover-border-color: var(--nv-persimmon-700); --bs-btn-active-color: var(--nv-white); --bs-btn-active-bg: var(--nv-persimmon-700); --bs-btn-active-border-color: var(--nv-persimmon-700); --bs-btn-disabled-color: var(--nv-persimmon-700); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--nv-persimmon-700); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } /* Info (Navy brightened) */ .btn-info{ --bs-btn-bg: #11527a; --bs-btn-border-color: #11527a; --bs-btn-color: var(--nv-white); --bs-btn-hover-bg: var(--nv-navy-600); --bs-btn-hover-border-color: var(--nv-navy-600); --bs-btn-hover-color: var(--nv-white); --bs-btn-active-bg: var(--nv-navy-700); --bs-btn-active-border-color: var(--nv-navy-700); --bs-btn-active-color: var(--nv-white); --bs-btn-disabled-bg: #11527a; --bs-btn-disabled-border-color: #11527a; --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } .btn-outline-info{ --bs-btn-color: #11527a; --bs-btn-border-color: #11527a; --bs-btn-bg: transparent; --bs-btn-hover-color: var(--nv-white); --bs-btn-hover-bg: #11527a; --bs-btn-hover-border-color: #11527a; --bs-btn-active-color: var(--nv-white); --bs-btn-active-bg: var(--nv-navy-700); --bs-btn-active-border-color: var(--nv-navy-700); --bs-btn-disabled-color: #11527a; --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: #11527a; --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } /* Outline success aligned to mint */ .btn-outline-success{ --bs-btn-color: var(--nv-mint-700, #2b5b4b); --bs-btn-border-color: var(--nv-mint); --bs-btn-bg: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nv-mint-600); --bs-btn-hover-border-color: var(--nv-mint-600); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--nv-mint-700); --bs-btn-active-border-color: var(--nv-mint-700); --bs-btn-disabled-color: var(--nv-mint-700, #2b5b4b); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--nv-mint); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } /* Outline warning aligned to persimmon */ .btn-outline-warning{ --bs-btn-color: var(--nv-persimmon); --bs-btn-border-color: var(--nv-persimmon); --bs-btn-bg: transparent; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--nv-persimmon-600); --bs-btn-hover-border-color: var(--nv-persimmon-600); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--nv-persimmon-700); --bs-btn-active-border-color: var(--nv-persimmon-700); --bs-btn-disabled-color: var(--nv-persimmon); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--nv-persimmon); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } /* Light / Dark */ .btn-light{ --bs-btn-bg: var(--nv-white); --bs-btn-border-color: var(--nv-soft-border); --bs-btn-color: var(--nv-navy); --bs-btn-hover-bg: #f6f7f8; --bs-btn-hover-border-color: #dcdcdc; --bs-btn-active-bg: #edeff1; --bs-btn-active-border-color: #d0d0d0; --bs-btn-disabled-bg: var(--nv-white); --bs-btn-disabled-border-color: var(--nv-soft-border); --bs-btn-disabled-color: rgba(13,62,91,.5); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } .btn-white{ /* alias for light */ --bs-btn-bg: var(--nv-white); --bs-btn-border-color: var(--nv-soft-border); --bs-btn-color: var(--nv-navy); --bs-btn-hover-bg: #f6f7f8; --bs-btn-hover-border-color: #dcdcdc; --bs-btn-active-bg: #edeff1; --bs-btn-active-border-color: #d0d0d0; --bs-btn-disabled-bg: var(--nv-white); --bs-btn-disabled-border-color: var(--nv-soft-border); --bs-btn-disabled-color: rgba(13,62,91,.5); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } .btn-dark{ --bs-btn-bg: var(--nv-navy-700); --bs-btn-border-color: var(--nv-navy-700); --bs-btn-color: var(--nv-white); --bs-btn-hover-bg: var(--nv-navy-600); --bs-btn-hover-border-color: var(--nv-navy-600); --bs-btn-active-bg: var(--nv-navy-700); --bs-btn-active-border-color: var(--nv-navy-700); --bs-btn-disabled-bg: var(--nv-navy-700); --bs-btn-disabled-border-color: var(--nv-navy-700); --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); } /* Link buttons */ .btn-link{ color: var(--nv-navy); } .btn-link:hover, .btn-link:focus{ color: var(--nv-navy-600); text-decoration-color: var(--nv-navy-600); } /* Special login button */ #loginbtn, #loginbtn-mobile{ --bs-btn-bg: var(--nv-persimmon); --bs-btn-border-color: var(--nv-persimmon); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--nv-persimmon-600); --bs-btn-hover-border-color: var(--nv-persimmon-600); --bs-btn-active-bg: var(--nv-persimmon-700); --bs-btn-active-border-color: var(--nv-persimmon-700); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); font-weight:600; letter-spacing:.5px; border-radius:999px; padding:.45rem 1.25rem; transition: transform .15s ease-in-out, background-color .15s; } #loginbtn:hover, #loginbtn-mobile:hover{ transform: translateY(-2px); } #loginbtn:active, #loginbtn-mobile:active{ transform: scale(.97); } /* Make all buttons have bold font weight */ .btn { font-weight: 600; border-radius: 999px; } /* Orange (Persimmon) rounded pill */ .btn-orange{ --bs-btn-bg: var(--nv-persimmon); --bs-btn-border-color: var(--nv-persimmon); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--nv-persimmon-600); --bs-btn-hover-border-color: var(--nv-persimmon-600); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--nv-persimmon-700); --bs-btn-active-border-color: var(--nv-persimmon-700); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--nv-persimmon); --bs-btn-disabled-border-color: var(--nv-persimmon); --bs-btn-disabled-color: rgba(255,255,255,.75); --bs-btn-focus-shadow-rgb: var(--nv-focus-rgb); border-radius: 999px; padding: .45rem 1.25rem; letter-spacing: .5px; transition: transform .15s ease-in-out, background-color .15s; } .btn-orange:hover{ transform: translateY(-2px); } .btn-orange:active{ transform: scale(.97); } /*============================================================================= = Mobile Quick Links – safe refinements (no behavior change) =============================================================================*/ @media (max-width: 991.98px){ /* Toggler chip */ .navbar-topbar .navbar-toggler { border-radius: 999px; padding: .35rem .75rem; border: 1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.9); } /* Vertical rhythm between items */ #topbarNavDropdown .navbar-nav { row-gap: .5rem; } /* Chevron rotates only when open */ #topbarNavDropdown .nav-link.topbar .bi.bi-chevron-down { transition: transform .2s ease; } #topbarNavDropdown .nav-link.topbar[aria-expanded="true"] .bi.bi-chevron-down { transform: rotate(180deg); } /* Open dropdown panel gets a light card look */ #topbarNavDropdown .show > .dropdown-menu { margin-top: .25rem; border-radius: .5rem; box-shadow: 0 6px 18px rgba(0,0,0,.08); border: 1px solid rgba(0,0,0,.06); overflow: hidden; } /* Item padding and hover feedback inside open menu */ #topbarNavDropdown .dropdown-menu .dropdown-item { padding: .625rem 1rem; font-weight: 600; } #topbarNavDropdown .dropdown-menu .dropdown-item:hover { background: #f7f8f9; } /* Softer divider spacing */ #topbarNavDropdown .dropdown-divider { margin: .25rem 0; opacity: .15; } /* Optional: improve legibility of routing line item */ #topbarNavDropdown .nav-item.topbar:not(.dropdown) { font-weight: 600; color: var(--nv-navy); } /* Mobile 'Search' label next to icon */ #topbarNavDropdown .topsearchlink { display: inline-flex; align-items: center; } #topbarNavDropdown .topsearchlink .bi { margin-right: .35rem; } #topbarNavDropdown .topsearchlink::after { content: "Search"; margin-left: .1rem; font-weight: 600; font-size: .9375rem; } } /*============================================================================= = Tabs/Pills =============================================================================*/ .nav-pills .nav-link.active, .nav-pills .show>.nav-link{ color:#373a36; background-color: rgba(127, 168, 149, 0.3); /* color-mix(in srgb, var(--nv-mint) 30%, transparent) */ font-size:1rem!important; font-family:Poppins, sans-serif; font-weight:600!important; border-bottom-width:.1875rem!important; border-bottom-color: var(--nv-navy)!important; } .nav:not(.nav-pills) .nav-link.active{ color:#343f4c!important; border-color:transparent transparent #b6bf00!important; } /* FinanceTab (Wellness Hub) — enforce white active text and consistent sizing */ #financeTab{ --bs-nav-pills-link-active-color:#fff; } #financeTab .nav-link.active{ color:#fff !important; } #financeTab .nav-link.active:hover, #financeTab .nav-link.active:focus{ color:#fff !important; } /* Ensure consistent tab text size across states (desktop) */ #financeTab .nav-link, #financeTab .nav-link:hover, #financeTab .nav-link:focus, #financeTab .nav-link.active{ font-size:1rem !important; } @media (max-width:768px){ #financeTab .nav-link, #financeTab .nav-link:hover, #financeTab .nav-link:focus, #financeTab .nav-link.active{ font-size:.9rem !important; } } /* Modern tabs (kept behavior; colors adjusted to brand) */ .nav-tabs{ width:100%; justify-content:space-between; border-bottom:none; } .nav-tabs .nav-link{ position:relative; display:block; border:1px solid #dee2e6; margin-bottom:-1px; border-bottom:none; background: linear-gradient(to right, #f8f9fa, #e9ecef); } .nav-tabs .nav-link.active{ color: #22BEEF !important; /* legacy accent by intent */ background-color:#fff; border-color:transparent; border-bottom-color:#22BEEF; z-index:1; font-weight:400; } .nav-tabs .nav-link i{ color: var(--nv-navy); } .nav-tabs .nav-link:hover span, .nav-tabs .nav-link.active span{ color:#22BEEF !important; } .tab-content{ border:none!important; } .nav-tabs .nav-link.active::after{ content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:10px solid #22BEEF; } /* Mobile pill radius adjustments */ @media (max-width:767.98px){ #calculatorTabs .nav-link.rounded-pill, .nav-pills .nav-item .nav-link.rounded-pill{ border-radius:0!important; } .nav-pills .nav-item:first-child .nav-link{ border-top-left-radius:.5rem!important; border-bottom-left-radius:.5rem!important; } .nav-pills .nav-item:last-child .nav-link{ border-top-right-radius:.5rem!important; border-bottom-right-radius:.5rem!important; } .nav-tabs-modern .nav-item:first-child .nav-link{ border-top-left-radius:.5rem!important; } .nav-tabs-modern .nav-item:last-child .nav-link{ border-top-right-radius:.5rem!important; } } @media (min-width:768px){ #financeTab .nav-link{ border-radius:50rem; } } /* Center contents in calculator pills */ #calculatorTabs .nav-item{ flex:1 1 0; } #calculatorTabs .nav-link{ display:flex !important; align-items:center; justify-content:center !important; text-align:center !important; width:100%; padding-left: 0.75rem; padding-right: 0.75rem; } #calculatorTabs .nav-link > i{ margin-right:.35rem; } /*============================================================================= = Hero/Overlays =============================================================================*/ .hero-container{ position:relative; height:75vh; max-height:600px; overflow:hidden; } .heroitem{ position:absolute; display:block; width:100%; height:100%; opacity:0; transition:opacity .8s ease; } .heroitem.active{ opacity:1; } .hero-container.loading .heroitem{ display:none!important; opacity:0!important; } .hero-left{ position:absolute; left:0; top:0; width:58%; height:100%; background: linear-gradient(135deg, var(--nv-persimmon) 0%, #e55a35 100%); clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%); display:flex; align-items:center; padding:0 5% 0 10%; z-index:2; animation: slideSlant .8s ease-out forwards; } /* .hero-left::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.15; background-image:url('https://www.nuvista.org/assets/img/backgrounds/hero.png'); background-size:400px 253px; background-repeat:repeat; background-position:0 0; } */ .hero-right{ position:absolute; right:0; top:0; width:52%; height:100%; background-size:cover; background-position:center; z-index:1; opacity:0; transition: opacity .8s ease; } .heroitem.active .hero-right{ opacity:1; } .hero-content{ position:relative; z-index:3; color:#fff; max-width:675px; opacity:0; animation: fadeIn 1s ease-out .3s forwards; } .hero-eyebrow{ color: var(--nv-mint); font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:2px; margin-bottom:10px; } .hero-title{ font-size: clamp(2.5rem, 5vw, 4rem); font-weight:900; line-height:1.1; margin-bottom:20px; } .hero-title .highlight{ color: var(--nv-persimmon); } .hero-subtitle{ font-size:1.25rem; line-height:1.4; margin-bottom:30px; opacity:.9; font-weight:500; } .rate-highlight{ color: var(--nv-persimmon); font-size:2rem; font-weight:800; } .hero-cta{ display:flex; gap:15px; flex-wrap:wrap; align-items:center; } @keyframes slideSlant{ from{ clip-path:polygon(0 0, 95% 0, 100% 100%, 0 100%);} to{ clip-path:polygon(0 0, 85% 0, 100% 100%, 0 100%);} } @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } } @media (max-width:768px){ .hero-left{ width:100%; clip-path:none; padding:40px 20px; animation:none; background: linear-gradient(135deg, rgba(245,111,66,.85) 0%, rgba(229,90,53,.9) 100%), var(--mobile-bg-image); background-size:cover; background-position:center; } .hero-left::before{ display:none!important; } .hero-right{ display:none; } .hero-content{ opacity:1; animation:none; } } .bg-img-hero, .bg-top{ background-repeat:no-repeat; } .bg-img-hero{ position:relative; background-size:cover; background-position:top center; } .bg-img-hero::before{ content:""; position:absolute; inset:0 auto 0 0; width:70%; height:100%; background:linear-gradient(90deg, rgba(13,62,91,.9) 0%, rgba(13,62,91,.7) 40%, rgba(13,62,91,.4) 70%, rgba(13,62,91,0) 100%); z-index:1; pointer-events:none; } .bg-img-hero .container{ position:relative; z-index:2; } /* Opt-out: remove default hero image overlay when a shaped panel is used */ .no-hero-overlay.bg-img-hero::before{ display:none !important; } /* Animated left-column gradient shape (curved right edge) */ .hero-left-shape{ position:absolute; left:0; top:0; height:100%; width:min(62%, 820px); /* Fallback painted gradient if image not present */ background: linear-gradient(135deg, var(--nv-navy) 0%, #1a4f70 45%, rgba(243, 111, 66, 0.85) 100%); /* Note: color-mix() removed for validator compatibility - rgba fallback used */ border-top-right-radius: 900px 500px; border-bottom-right-radius: 900px 500px; z-index:1; pointer-events:none; opacity:0; transform: translateX(-3%); animation: heroShapeIn .7s ease-out .05s forwards; } body.editor .cms-repeatable { overflow: visible !important; } /* CSS-only curve using SVG mask on the hero container */ .bg-img-hero.hero-curve::after{ content: ""; position:absolute; left:-16px; top:0; height:100%; width:auto; aspect-ratio: 1127 / 500; z-index:1; pointer-events:none; background: linear-gradient(135deg, var(--nv-navy) 0%, #1a4f70 45%, var(--nv-persimmon) 100%); -webkit-mask-image: url('../img/curve.svg'); -webkit-mask-position: left center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-image: url('../img/curve.svg'); mask-position: left center; mask-size: contain; mask-repeat: no-repeat; opacity:0; transform: translate3d(-48px,0,0); will-change: transform, opacity; animation: curveSlideIn 1.4s cubic-bezier(.23,1,.32,1) .12s forwards; } /* When using a provided PNG shape, remove fallback styling and place image */ .hero-left-shape.has-image{ background:none; border-top-right-radius:0; border-bottom-right-radius:0; } .hero-left-shape.has-image > img{ position:absolute; left:0; top:0; height:100%; width:auto; display:block; } @keyframes heroShapeIn{ from{ opacity:0; transform: translateX(-6%); } to{ opacity:1; transform: translateX(0); } } @keyframes heroScaleIn{ from{ transform: translateX(-6%) scale(1.12); } to{ transform: translateX(0) scale(1); } } /* Subtle slide+fade from left */ @keyframes curveSlideIn{ from{ opacity:0; transform: translate3d(-48px,0,0); } to { opacity:.8; transform: translate3d(0,0,0); } } /* Responsive sizing — ensure the curved panel fills the hero on phones */ @media (max-width: 767.98px){ .bg-img-hero.hero-curve::after{ left:0; right:0; top:0; bottom:0; width:100%; height:100%; aspect-ratio:auto; -webkit-mask-image: url('../img/curve.svg'); -webkit-mask-position: left center; -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; mask-image: url('../img/curve.svg'); mask-position: left center; mask-size: cover; mask-repeat: no-repeat; transform: translate3d(-24px,0,0); animation: curveSlideIn 1.2s cubic-bezier(.23,1,.32,1) .1s forwards; } } /* Tablets (Bootstrap md: 768px–991.98px) — also fill container */ @media (min-width: 768px) and (max-width: 991.98px){ .bg-img-hero.hero-curve::after{ left:0; right:0; top:0; bottom:0; width:100%; height:100%; aspect-ratio:auto; -webkit-mask-image: url('../img/curve.svg'); -webkit-mask-position: left center; -webkit-mask-size: cover; -webkit-mask-repeat: no-repeat; mask-image: url('../img/curve.svg'); mask-position: left center; mask-size: cover; mask-repeat: no-repeat; transform: translate3d(-20px,0,0); animation: curveSlideIn 1.2s cubic-bezier(.23,1,.32,1) .1s forwards; } } @media (max-width: 991.98px){ .hero-left-shape{ width:100%; } .bg-img-hero.hero-curve::after{ width:100%; } } .heroitem{ position:relative; display:flex; align-items:center; min-height:60vh; overflow:hidden; opacity:0; display:none; /* existing behavior: hidden until JS reveals */ transition:opacity .3s ease-in-out; } @media (max-width:991.98px){ .heroitem{ min-height:50vh; } } @media (min-width:1200px){ .heroitem .container{ padding-top:6rem!important; padding-bottom:6rem!important; } } @media (max-width:575.98px){ .heroitem{ height: clamp(350px,75vw,420px); } .heroitem .w-75{ width:75%!important; margin-left:1rem!important; padding-right:0!important; } .heroitem h1.heroh1{ font-size:2rem!important; line-height:1.2!important; } .heroitem p.fs-3{ font-size:1.125rem!important; line-height:1.4!important; } .heroitem .fs-2{ font-size:1.5rem!important; } .heroitem .container{ padding-bottom:2.5rem!important; padding-left:1rem!important; } .heroitem .col-lg-6{ padding-right:25%!important; } } /* Shape divider spacing (deduped) */ @media (max-width:767.98px){ .shape.shape-bottom{ margin-bottom:-1.49rem!important; } } /*============================================================================= = Cards/News =============================================================================*/ /*============================================================================= = NuVista Cards — Borderless, Modern, Flexible (Bootstrap 5 compatible) = Requirements hit: = - No borders anywhere = - Full + Soft brand backgrounds = - Fresh layouts (horizontal, split, glass, gradient, hero, stats, etc.) =============================================================================*/ /* ---------- Global card reset: no borders, rounded, tasteful shadow ---------- */ .card{ border: 0 !important; border-radius: 16px; overflow: hidden; background-clip: padding-box; box-shadow: 0 6px 24px rgba(0,0,0,.08); } .card .card-header, .card .list-group, .card .list-group-item{ border: 0 !important; } /* Optional elevation utilities */ .card-flat { box-shadow: none !important; } .card-soft { box-shadow: 0 4px 16px rgba(0,0,0,.06) !important; } .card-strong { box-shadow: 0 12px 32px rgba(0,0,0,.14) !important; } /* Motion polish */ .card-hover-lift{ transition: transform .28s ease, box-shadow .28s ease; } .card-hover-lift:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.16); } .card-hover-float{ transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; } .card-hover-float:hover{ transform: translateY(-2px) scale(1.01); box-shadow: 0 18px 46px rgba(0,0,0,.18); } @media (prefers-reduced-motion: reduce){ .card-hover-lift, .card-hover-float{ transition: none !important; } } /* ---------- Brand → semantic map (uses your existing tokens) ---------- */ :root{ --card-primary: var(--nv-navy); --card-success: var(--nv-mint); --card-warning: var(--nv-persimmon); --card-info: #577A8E; --card-radius: 16px; --soft-tint: 12%; /* background tint strength */ --soft-text: #1b2430; } /* ---------- Full background cards (bold, borderless, auto-contrast) ---------- */ .card.bg-primary{ background: var(--card-primary) !important; color:#fff !important; } .card.bg-warning{ background: var(--card-warning) !important; color:#fff !important; } .card.bg-info { background: var(--card-info) !important; color:#fff !important; } /* Mint reads best with dark text */ .card.bg-success{ background: var(--card-success)!important; color:#0b1a26 !important; } /* Ensure inner elements inherit proper contrast */ .card.bg-primary .card-title, .card.bg-primary .card-text, .card.bg-primary .btn, .card.bg-warning .card-title, .card.bg-warning .card-text, .card.bg-warning .btn, .card.bg-info .card-title, .card.bg-info .card-text, .card.bg-info .btn{ color:#fff; } .card.bg-success .card-title, .card.bg-success .card-text, .card.bg-success .btn{ color:#0b1a26 !important; } /* Subtle on-hover glow for full backgrounds */ .card.bg-primary.card-hover-lift:hover { box-shadow: 0 18px 48px rgba(13,62,91,.36); } .card.bg-warning.card-hover-lift:hover { box-shadow: 0 18px 48px rgba(243,111,66,.36); } .card.bg-info.card-hover-lift:hover { box-shadow: 0 18px 48px rgba(52,142,192,.36); } .card.bg-success.card-hover-lift:hover { box-shadow: 0 18px 48px rgba(127,168,149,.28); } /* ---------- Soft background cards (no borders, no lines) ---------- */ /* Note: Exact hex values are set above, these fallbacks are for older browsers */ /* Using rgba fallbacks for validator compatibility */ .bg-soft-primary{ background: #DCE4E8 !important; color: var(--soft-text) !important; } .bg-soft-success{ background: #EDF3F0 !important; color: var(--soft-text) !important; } .bg-soft-warning{ background: #FEEBE4 !important; color: var(--soft-text) !important; } .bg-soft-info { background: #E7ECEF !important; color: var(--soft-text) !important; } /* Keep leading brand icon utilities intact */ .bg-soft-primary .text-primary{ color: var(--card-primary) !important; } .bg-soft-success .text-success{ color: var(--card-success) !important; } .bg-soft-warning .text-warning{ color: var(--card-warning) !important; } .bg-soft-info .text-info { color: var(--card-info) !important; } /* ---------- Modern layout & visual variants (borderless by default) ---------- */ /* 1) Horizontal media card (image left, content right) */ .card-horizontal{ display:flex; flex-direction: row; } .card-horizontal .card-img-left{ width: 40%; min-height: 220px; object-fit: cover; } .card-horizontal .card-body{ flex:1; } @media (max-width: 991.98px){ .card-horizontal{ flex-direction: column; } .card-horizontal .card-img-left{ width:100%; height: 220px; } } /* 2) Split card (two even columns) */ .card-split{ display:grid; grid-template-columns: 1fr 1fr; gap:0; } .card-split > .card-media{ min-height: 260px; background-size: cover; background-position:center; } .card-split > .card-body{ padding: 2rem; display:flex; flex-direction:column; justify-content:center; } @media (max-width: 991.98px){ .card-split{ grid-template-columns: 1fr; } } /* 3) Hero card (full-bleed image with gradient overlay) */ .card-hero{ position:relative; color:#fff; } .card-hero .card-img-hero{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: saturate(1.05); } .card-hero::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%); } .card-hero .card-body{ position:relative; z-index:1; padding: 2.25rem; } /* 4) Glass card (frosted, perfect for image backgrounds) */ .card-glass{ background: rgba(255,255,255,.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #0e1a22; box-shadow: 0 8px 28px rgba(0,0,0,.18); } /* 5) Gradient brand cards (no borders, subtle sheen) */ .card-gradient-primary{ background: linear-gradient(135deg, rgba(13, 62, 91, 0.94) 0%, var(--card-primary) 100%); /* color-mix(in srgb, var(--card-primary) 94%, #000) */ color:#fff; } .card-gradient-warning{ background: linear-gradient(135deg, rgba(243, 111, 66, 0.92) 0%, var(--card-warning) 100%); /* color-mix(in srgb, var(--card-warning) 92%, #000) */ color:#fff; } .card-gradient-success{ background: linear-gradient(135deg, rgba(127, 168, 149, 0.88) 0%, var(--card-success) 100%); /* color-mix(in srgb, var(--card-success) 88%, #000) */ color:#0b1a26; } .card-gradient-info{ background: linear-gradient(135deg, rgba(87, 122, 142, 0.92) 0%, var(--card-info) 100%); /* color-mix(in srgb, var(--card-info) 92%, #000) */ color:#fff; } /* 6) Spotlight hover (radial highlight follows hover origin—CSS only illusion) */ .card-spotlight{ position:relative; isolation:isolate; background: radial-gradient(600px 200px at 10% -20%, rgba(255,255,255,.22), transparent 40%), var(--card-bg, #fff); } .card-spotlight:hover{ background: radial-gradient(600px 240px at 50% -20%, rgba(255,255,255,.28), transparent 46%), var(--card-bg, #fff); } /* 7) Media overlap (image pops out top) */ .card-media-overlap{ position:relative; padding-top: 72px; } .card-media-overlap .card-media{ position:absolute; top:-36px; left:50%; transform:translateX(-50%); width: 96px; height: 96px; border-radius: 20px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.18); } .card-media-overlap .card-media img{ width:100%; height:100%; object-fit:cover; } /* 8) CTA arrow card (right-chevron animates in) */ .card-cta{ position:relative; } .card-cta .card-body{ position:relative; padding-right: 3rem; } .card-cta::after{ content:""; position:absolute; right:1.25rem; top:50%; transform:translateY(-50%); width: 32px; height: 32px; border-radius: 999px; background: rgba(0,0,0,.06); -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5l8 7-8 7'/%3E%3C/svg%3E"); -webkit-mask-position: center; -webkit-mask-size: 60%; -webkit-mask-repeat: no-repeat; mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='%23000' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5l8 7-8 7'/%3E%3C/svg%3E"); mask-position: center; mask-size: 60%; mask-repeat: no-repeat; opacity:.0; transition: opacity .25s ease, transform .25s ease; } .card-cta:hover::after{ opacity:.66; transform: translateY(-50%) translateX(2px); } /* 9) Stat card */ .card-stat{ text-align:center; padding: 1.25rem 1rem; } .card-stat .stat-value{ font-size: clamp(2rem, 4.5vw, 3rem); line-height:1; font-weight: 800; } .card-stat .stat-label{ opacity:.8; } /* 10) List card (no borders; nice spacing) */ .card-list .list{ list-style:none; margin:0; padding:0; } .card-list .list li{ display:flex; align-items:flex-start; gap:.75rem; padding:.4rem 0; } .card-list .list li + li{ margin-top:.25rem; } /* 11) Pill badge in corner */ .card .badge-corner{ position:absolute; top: .9rem; right: .9rem; z-index:2; border-radius: 999px; padding:.4rem .7rem; font-weight:600; background: rgba(0,0,0,.08); color:#111; } /* 12) Bleed helpers (edge-to-edge media) */ .card-bleed .card-img-top{ border-radius: 0; } .card-bleed .card-body{ padding: 1.25rem 1.25rem 1.5rem; } /* ---------- Bootstrap 5 Card Image Best Practices - Natural Aspect Ratio ---------- */ /* Works with existing HTML - no changes needed to card markup */ .custom-card{ transition: transform .3s ease, box-shadow .3s ease; overflow: hidden; } .custom-card:hover{ transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,.14); } /* Natural aspect ratio - images maintain their original proportions */ /* Works for: directly in card */ .custom-card .card-img-top { width: 100%; height: auto; display: block; border-radius: 16px 16px 0 0; transition: transform .5s ease; /* No object-fit - let images display naturally */ } .custom-card:hover .card-img-top { transform: scale(1.08); } .custom-card .card-body{ padding-top: 20px !important; } /* Support for existing card-img-container wrapper pattern */ /* Works for:
*/ .card-img-container { position: relative; overflow: hidden; border-radius: 16px 16px 0 0; /* No fixed height - allows natural aspect ratio */ } .card-img-container .card-img-top { width: 100%; height: auto; display: block; transition: transform .5s ease; /* No object-fit - let images display naturally */ /* img-fluid class (if present) will handle max-width: 100% */ } .card-img-container:hover .card-img-top, .custom-card:hover .card-img-container .card-img-top { transform: scale(1.08); } /* Ensure img-fluid works correctly with our setup */ .card-img-container .card-img-top.img-fluid, .custom-card .card-img-top.img-fluid { max-width: 100%; height: auto; } /* Accent bar (kept, but borderless aesthetic) */ .card-accent{ height:8px; /* Brand-driven: utility classes can set --card-accent-color; gradient is fallback */ background: var(--card-accent-color, linear-gradient(90deg, var(--card-primary) 0%, var(--card-warning) 100%)); position:absolute; top:0; left:0; right:0; } /* Accent color utilities (brand tokens) */ .accent-navy{ --card-accent-color: var(--nv-navy); } .accent-mint{ --card-accent-color: var(--nv-mint); } .accent-persimmon{ --card-accent-color: var(--nv-persimmon); } .accent-blue{ --card-accent-color: var(--nv-blue, #577A8E); } /* Match top accent to each rate card's icon background color */ .auto-card .card-accent, .certificate-card .card-accent{ background: var(--nv-navy); } /* Money Market uses mint accent to match icon wrapper */ .money-market-card .card-accent{ background: var(--nv-mint); } .motorcycle-card .card-accent, .ira-card .card-accent{ background: var(--nv-persimmon); } .rv-card .card-accent{ background: var(--nv-mint); } /* Legacy color-bottom accents (still borderless) */ .card-green{ box-shadow: inset 0 -4px 0 0 var(--nv-mint); } .card-orange{ box-shadow: inset 0 -4px 0 0 var(--nv-persimmon); } .card-purple{ box-shadow: inset 0 -4px 0 0 var(--nv-navy); } .card-blue{ box-shadow: inset 0 -4px 0 0 var(--nv-accent-blue, #348EC0); } /* Text defaults */ .card-text{ color:#222!important; } /*============================================================================= = Hot Rates =============================================================================*/ .rate-card{ border:none; border-radius:16px; overflow:hidden; position:relative; box-shadow:0 10px 30px rgba(0,0,0,.05); transition: transform .3s ease, box-shadow .3s ease; } .rate-card:hover{ transform:translateY(-5px); box-shadow:0 15px 35px rgba(0,0,0,.1); } .rate-value{ font-weight:700; background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; display:inline-block; } /*============================================================================= = Product Tiles =============================================================================*/ .product-filter{ width:100%; } .product-filter .btn{ padding:.75rem 2rem; min-width:200px; } .product-filter .btn.active{ background-color: var(--nv-navy); color:#fff; border-color: var(--nv-navy); } @media (max-width:575.98px){ .product-filter .btn{ padding:.75rem 1rem; min-width:100%; } .product-filter .btn:last-child{ margin-bottom:0; } .product-filter .btn i{ width:20px; } } @media (min-width:576px){ .product-filter{ max-width:800px; margin:0 auto; } .product-filter .btn{ flex:1; } } .product-category{ display:none; opacity:0; transition:opacity .3s ease; } .product-category.active{ display:block; opacity:1; } .product-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; text-decoration:none; color: var(--bs-gray-700); background:#fff; padding:1.5rem; border-radius:1rem; height:100%; border:1px solid rgba(0,0,0,.05); min-width:120px; transition: all .3s ease; } .product-item i{ font-size:2rem; margin-bottom:.5rem; color: var(--nv-navy); } .product-item span{ font-weight:500; font-size:.9rem; } .product-item:hover, .product-item:focus{ transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,.08); color: var(--nv-navy); border-color: var(--nv-navy); text-decoration:none; outline:none; } .product-item:focus-visible{ outline:2px solid var(--nv-navy); outline-offset:2px; } @media (max-width:991.98px){ .product-item{ min-width:calc(50% - 1rem); padding:1.25rem; } .product-item i{ font-size:1.75rem; } .product-item span{ font-size:.85rem; } } @media (max-width:575.98px){ .product-item{ min-width:calc(33.333% - 1rem); padding:1rem; } .product-item i{ font-size:1.5rem; } .product-item span{ font-size:.75rem; } } /*============================================================================= = Footer =============================================================================*/ .footer-background{ background: linear-gradient(165deg, rgba(13,62,91,.9) 0%, rgba(26,77,115,.9) 40%, rgba(10,46,71,.9) 100%), url('https://www.nuvista.org/assets/img/backgrounds/bg.footer.png') center/cover no-repeat; position:relative; overflow:hidden; } :root{ --nv-orange: var(--nv-persimmon); --nv-white-70: rgba(255,255,255,.7); --nv-white-15: rgba(255,255,255,.15); --nv-white-25: rgba(255,255,255,.25); } /* Lists */ .footer-background .link-sm.link-light{ position:relative; color:var(--nv-white-70); text-decoration:none; transition:color .2s ease; } .footer-background .link-sm.link-light:hover, .footer-background .link-sm.link-light:focus{ color:#fff; } .footer-background .link-sm.link-light::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; transform:scaleX(0); transform-origin:left; background: linear-gradient(90deg, var(--nv-orange), #ffd1b0); transition: transform .25s ease; } .footer-background .link-sm.link-light:hover::after, .footer-background .link-sm.link-light:focus::after{ transform:scaleX(1); } /* Legal links */ .footer-background .nav-link-special{ position:relative; display:inline-block; text-decoration:none; color:#fff; padding-bottom:2px; opacity:.9; transition: color .2s ease, opacity .2s ease; } .footer-background .nav-link-special::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.75px; background: currentColor; transform: scaleX(.2); transform-origin:left; transition: transform .22s ease; opacity:.7; } .footer-background .nav-link-special:hover, .footer-background .nav-link-special:focus{ color: var(--nv-orange); opacity:1; } .footer-background .nav-link-special:hover::after, .footer-background .nav-link-special:focus::after{ transform: scaleX(1); } /* Social buttons */ .footer-background .btn-soft-light{ backdrop-filter: saturate(120%) blur(2px); background: var(--nv-white-15); border:1px solid var(--nv-white-25); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .footer-background .btn-soft-light:hover, .footer-background .btn-soft-light:focus{ transform: translateY(-2px); background: rgba(255,255,255,.22); box-shadow: 0 6px 18px -6px rgba(243,124,42,.35), inset 0 0 0 1px rgba(255,255,255,.25); } .footer-background .btn-soft-light:focus-visible{ outline:2px solid var(--nv-orange); outline-offset:2px; } /* Go-to top */ .js-go-to.go-to { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(180deg, #F36F42, #F36F42); /* solid persimmon */ border: 1px solid var(--nv-white-25); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .js-go-to.go-to:hover, .js-go-to.go-to:focus { transform: translateY(-2px); background: linear-gradient( 180deg, rgb(127, 168, 149), /* mint hover */ rgb(127, 168, 149) ); box-shadow: 0 10px 24px rgba(127, 168, 149, 0.7); /* mint glow */ } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .footer-background .link-sm.link-light, .footer-background .link-sm.link-light::after, .footer-background .btn-soft-light, .footer-background .nav-link-special, .footer-background .nav-link-special::after, .js-go-to.go-to, .footer-background a img[alt*="App"], .footer-background a img[alt*="Google Play"]{ transition:none!important; } } /*============================================================================= = Forms =============================================================================*/ .form-range::-webkit-slider-thumb, .form-range::-moz-range-thumb, .form-range::-ms-thumb{ background: var(--nv-navy); } .custom-range{ -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 5px; background: #e9ecef; outline: 0; padding: 0; margin: 0; } .custom-range::-webkit-slider-thumb{ -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--nv-navy); cursor: pointer; transition: all .15s ease-in-out; } .custom-range::-webkit-slider-thumb:hover{ background: var(--nv-navy-600); transform: scale(1.1); } .custom-range::-moz-range-thumb{ width:20px; height:20px; border:0; border-radius:50%; background: var(--nv-navy); cursor:pointer; transition:all .15s ease-in-out; } .custom-range::-moz-range-thumb:hover{ background: var(--nv-navy-600); transform: scale(1.1); } /* Tooltip/icon accent */ .tooltip-icon{ color: var(--nv-navy); cursor:pointer; } /*============================================================================= = Tables =============================================================================*/ .table{ width:100%; margin-bottom:1rem; color:#000; } .table td, .table th{ padding:.5rem; vertical-align:top; border-top:1px solid #dee2e6; white-space:normal; text-align:left; } .table thead th{ background-color: var(--nv-navy)!important; color:#fff!important; vertical-align:bottom; border-bottom:2px solid #dee2e6; text-transform:uppercase; letter-spacing:1px; font-weight:600!important; } .table-striped tbody tr:nth-of-type(odd){ background-color: rgba(0,0,0,.05); } .table-hover tbody tr:hover{ background-color: rgba(0,0,0,.075); } .table-responsive-sm{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .table-responsive-sm>.table{ border:0; } .table-responsive-sm>.table thead{ display:none; } .table-responsive-sm>.table tbody, .table-responsive-sm>.table td, .table-responsive-sm>.table th, .table-responsive-sm>.table tr{ display:block; width:100%; } .table-responsive-sm>.table td, .table-responsive-sm>.table th{ border:1px solid #edf0f1; border-top:none; padding:.5rem; } .table-responsive-sm>.table td[data-header]:before{ content: attr(data-header) ": "; font-weight:700; display:block; color:#005eb8; margin-bottom:.25rem; } /*============================================================================= = Utilities =============================================================================*/ .helpSwiper-wrap{ position:relative; padding-right: calc(var(--help-arrow-size, 64px) + var(--help-arrow-gap, 16px) + 6px); overflow:hidden; } .helpSwiper{ overflow:hidden; } .helpSwiper-wrap .help-next{ position:absolute; top:50%; right: var(--help-arrow-gap, 16px); transform:translateY(-50%); width: var(--help-arrow-size, 64px); height: var(--help-arrow-size, 64px); border-radius:50%; border:3px solid #7FA895; background:transparent; color:#7FA895; display:flex; align-items:center; justify-content:center; z-index:2; cursor:pointer; transition: all .3s ease; } .helpSwiper-wrap .help-next::before{ content:"\F285"; font-family:"bootstrap-icons"; font-size:28px; font-weight:700; line-height:1; } .helpSwiper-wrap .help-next:hover, .helpSwiper-wrap .help-next:focus{ background:#7FA895; color:#fff; outline:none; } .swiper-progress{ margin-top:1rem; color:#6c757d; font-size:.875rem; } @media (max-width:768px){ .helpSwiper-wrap{ padding-right:0; } .helpSwiper-wrap .help-next{ display:none; } } .mt-n12{ margin-top:-8rem!important; } .mt-n15, .my-n15{ margin-top:-7rem!important; } .opacity-8{ opacity:.7!important; } .opacity-3{ opacity:.3!important; } .rounded-4{ border-radius:1rem; } /* consolidated */ .icon-md{ width:2.6rem;height:2.6rem;line-height:2.6rem;text-align:center;font-size:.8rem; } .rounded-circle{ border-radius:50%!important; } .fw-1{font-weight:100}.fw-2{font-weight:200}.fw-3{font-weight:300} .fw-4{font-weight:400!important}.fw-5{font-weight:500}.fw-6{font-weight:600!important} .fw-7{font-weight:700}.fw-8{font-weight:800}.fw-9{font-weight:900} .f200{font-weight:200!important}.f500{font-weight:500!important} .f600{font-weight:600!important}.f400{font-weight:400!important} .fspace{ letter-spacing:1.5px; } .notd{ text-decoration:none!important; } /* Links & hovers in content sections */ a.nav-link.text-primary:hover{ color: var(--nv-persimmon)!important; } .nav-link:focus, .nav-link:hover{ color:#6c6d71!important; } /*============================================================================= = Accessibility/Motion =============================================================================*/ .sr-only{ border:0; clip:rect(0,0,0,0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; } .sr-only-focusable:active, .sr-only-focusable:focus{ clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto; } @media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms!important; transition-duration:.01ms!important; } } /* Section backgrounds */ .section-gray { background-color: #F0F0F2; } /* Corner vignettes (white -> transparent) */ .section-vignette { position: relative; background-image: radial-gradient(560px 560px at left top, rgba(255,255,255,0.9), rgba(255,255,255,0) 58%), radial-gradient(560px 560px at right top, rgba(255,255,255,0.85), rgba(255,255,255,0) 54%), radial-gradient(560px 560px at left bottom, rgba(255,255,255,0.85), rgba(255,255,255,0) 54%), radial-gradient(560px 560px at right bottom, rgba(255,255,255,0.9), rgba(255,255,255,0) 58%); background-repeat: no-repeat; } @media (max-width: 767.98px) { .section-vignette { background-image: radial-gradient(340px 340px at left top, rgba(255,255,255,0.9), rgba(255,255,255,0) 58%), radial-gradient(340px 340px at right top, rgba(255,255,255,0.85), rgba(255,255,255,0) 54%), radial-gradient(340px 340px at left bottom, rgba(255,255,255,0.85), rgba(255,255,255,0) 54%), radial-gradient(340px 340px at right bottom, rgba(255,255,255,0.9), rgba(255,255,255,0) 58%); } } /*============================================================================= = Misc (kept behavior; brand-aligned where needed) =============================================================================*/ .wellness-hero{ background: linear-gradient(135deg, #f8fafb 0%, #e8f2f4 100%); position:relative; overflow:hidden; } .wellness-hero::before{ content:""; position:absolute; top:-50%; left:-20%; width:120%; height:200%; background: radial-gradient(circle, var(--nuvista-mint-light) 0%, transparent 70%); opacity:.6; animation: float 20s ease-in-out infinite; } .wellness-hero::after{ content:""; position:absolute; bottom:-50%; right:-20%; width:100%; height:150%; background: radial-gradient(circle, var(--nuvista-persimmon-light) 0%, transparent 70%); opacity:.4; animation: float 25s ease-in-out infinite reverse; } @keyframes float{ 0%,100%{ transform: translateY(0) rotate(0); } 50%{ transform: translateY(-20px) rotate(5deg);} } .wellness-header{ position:relative; z-index:10; padding:4rem 0 2rem; } .wellness-title{ font-weight:800; color: var(--nv-navy); font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom:1rem; } .title-accent{ background: linear-gradient(135deg, var(--nv-persimmon) 0%, #e55a32 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .wellness-subtitle{ font-size:1.25rem; color: var(--nv-navy); opacity:.8; max-width:none; margin:0; } .wellness-nav{ background:#fff; border-radius:20px; padding:8px; box-shadow: 0 8px 32px var(--shadow-light); border:1px solid rgba(127,168,149,.1); margin-bottom:3rem; position:relative; z-index:5; } .wellness-nav .nav-link{ color: var(--nv-navy); font-weight:600; padding:16px 24px; border-radius:16px; transition: all .3s cubic-bezier(.4,0,.2,1); border:none; position:relative; overflow:hidden; } .wellness-nav .nav-link::before{ content:""; position:absolute; inset:0 0 0 -100%; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(243, 111, 66, 0.1), transparent); transition:left .5s; } /* color-mix(in srgb, var(--nv-persimmon) 10%, transparent) */ .wellness-nav .nav-link:hover::before{ left:100%; } .wellness-nav .nav-link:hover{ background: rgba(243, 111, 66, 0.1); color: var(--nv-persimmon); transform: translateY(-2px); } /* color-mix(in srgb, var(--nv-persimmon) 10%, transparent) */ .wellness-nav .nav-link.active{ background: linear-gradient(135deg, var(--nv-persimmon) 0%, #e55a32 100%); color:#fff; box-shadow: 0 8px 24px rgba(243,111,66,.3); transform: translateY(-2px); } .wellness-nav .nav-link:focus, .wellness-nav .nav-link:focus-visible{ color:#fff; outline:none; box-shadow:none; } .featured-hero{ background: linear-gradient(135deg, #fff 0%, #f8fafb 100%); } .featured-image{ position:relative; overflow:hidden; } .featured-image img{ transition: transform .4s ease; } .featured-image:hover img{ transform: scale(1.05); } .featured-badge{ background: linear-gradient(135deg, var(--nv-persimmon) 0%, #e55a32 100%); backdrop-filter: blur(10px); border:none; padding:8px 16px; border-radius:12px; font-weight:600; } .topic-card{ border:none; background:#fff; border-radius:16px; transition: all .3s ease; box-shadow: 0 4px 16px var(--shadow-light); } .topic-card:hover{ transform: translateY(-4px); box-shadow: 0 12px 32px var(--shadow-medium); } .topic-icon{ width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.25rem; } .tools-hero{ background: linear-gradient(135deg, var(--nv-persimmon) 0%, #e55a32 100%); position:relative; overflow:hidden; } .tools-hero::before{ content:""; position:absolute; inset:0; background: url('data:image/svg+xml,'); } .feature-card{ border-radius:20px; overflow:hidden; position:relative; background: linear-gradient(135deg, var(--nv-navy) 0%, #0a2a3e 100%); } .feature-card.mint{ background: linear-gradient(135deg, var(--nv-mint) 0%, #6a9480 100%); } .category-card{ border:none; border-radius:20px; overflow:hidden; background:#fff; transition: all .3s ease; } .category-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px var(--shadow-medium); } .category-header{ padding:1.5rem; font-weight:700; } .category-header.persimmon{ background: linear-gradient(135deg, var(--nv-persimmon) 0%, #e55a32 100%); } .category-header.navy{ background: linear-gradient(135deg, var(--nv-navy) 0%, #0a2a3e 100%); } .category-header.mint{ background: linear-gradient(135deg, var(--nv-mint) 0%, #6a9480 100%); } .tool-link{ padding:1rem 1.5rem; border:none; transition: all .3s ease; text-decoration:none; color: var(--nv-navy); } .tool-link:hover{ background: rgba(243, 111, 66, 0.1); color: var(--nv-persimmon); text-decoration:none; } /* color-mix(in srgb, var(--nv-persimmon) 10%, transparent) */ .course-card{ border:none; border-radius:20px; overflow:hidden; transition: all .4s ease; background:#fff; box-shadow: 0 4px 16px var(--shadow-light); } .course-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 48px var(--shadow-medium); } .course-image{ height:200px; object-fit:cover; transition: transform .4s ease; } .course-card:hover .course-image{ transform: scale(1.05); } .teens-hero{ background: linear-gradient(135deg, var(--nv-mint) 0%, #6a9480 100%); position:relative; } .bg-gradient-dark{ background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0)); } /* consolidated */ .banner-links, .text-orchard{ color:#b6bf00!important; } .banner-links:hover{ color:#57ccf6!important; transition:.2s ease-in-out!important; transform:translateY(-3px)!important; } /* .navbar .dropdown-menu::before - ensure mobile dropdown arrow stays white */ /* Potential duplicate kept for cascade safety: see mobile dropdown override above */ /* Empty ruleset removed - no styles needed */ .header-white-nav-links{ color: rgba(255,255,255,.9)!important; } .list-group-item-action:focus, .list-group-item-action:hover{ background-color: rgba(189,197,209,.2)!important; } #routingNumber{ cursor:pointer; color:#fff; transition:background-color .3s ease; } #routingNumber:hover{ background-color: rgba(255,255,255,.2); text-decoration:underline; } /* Swiper/layout helpers (unchanged behavior) */ .swiper{ width:100%; height:100%; } .swiper-slide{ height:auto; } .swiper-slide img{ display:block; width:100%; height:100%; object-fit:cover; } .swiper-slide .cms-editable p{ text-align:center; display:flex; justify-content:center; align-items:center; margin:0; } /* Content spacing (deduped) */ .content-space-t-6{ padding-top:14.5rem!important; } .content-space-t-7{ padding-top:18.5rem!important; } .content-space-t-8{ padding-top:22.5rem!important; } /* Go-to button legacy class */ .go-to{ background-color: rgba(255,105,120,.8)!important; color:#fff; opacity:.5; bottom:95px!important; } .go-to:hover, .go-to:focus{ color:#fff; background-color: rgb(255,105,120)!important; opacity:1; } /* Offcanvas close button accent */ .offcanvas.offcanvas-top .btn-close{ width:30px;height:30px;border:1px solid #22BEEF;border-radius:4px;padding:3px;box-sizing:border-box; background-color: #EEEFE7 !important; color:#fff!important; font-size:.75rem!important; } .offcanvas-header{ padding-top:1.5rem; padding-bottom:1.5rem; border-bottom:none!important; } .offcanvas.offcanvas-top{ height:50vh; max-height:100%; } @media (min-width:576px){ .offcanvas.offcanvas-top{ height:60vh; } } @media (min-width:768px){ .offcanvas.offcanvas-top{ height:70vh; } } .offcanvas.offcanvas-top .offcanvas-body{ overflow-y:auto; } /* Navbar topbar grid for utility (no visual change) */ #header .navbar-topbar .js-mega-menu{ display:grid; grid-template-columns:1fr auto; } #header .navbar-topbar .navbar-nav-wrap-collapse{ grid-column:2; } /* Hover cards in sliders */ .swiper-slide .card:hover{ background-color:#F2F3F6!important; } /* HelpSwiper: Restore card hover lift and keep original backgrounds */ .helpSwiper .swiper-slide .card{ transition: transform .28s ease, box-shadow .28s ease; } .helpSwiper .swiper-slide .card:hover, .helpSwiper .swiper-slide .card:focus-within{ background-color: inherit !important; /* don't wash out brand panels */ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.16); } /* Icon wrappers & effects (neutral) */ .icon-wrapper{ width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin:-40px auto 20px;position:relative;z-index:1;box-shadow:0 10px 20px rgba(0,0,0,.1); } .icon-wrapper::before{ content:""; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,0) 100%); border-radius:inherit; } .icon-wrapper{ --icon-size: 3rem; } .icon-wrapper i{ font-size: var(--icon-size) !important; line-height:1; } /* Hover “primary soft” tiles — align to brand */ .hover-bg-primary-soft{ transition: all .3s ease; } .hover-bg-primary-soft:hover{ transform: translateY(-5px); box-shadow: 0 10px 20px rgba(25,49,171,.15); background-color: rgba(13, 62, 91, 0.05) !important; /* color-mix(in srgb, var(--nv-navy) 5%, transparent) */ } .hover-bg-primary-soft:hover h6{ color: var(--nv-navy) !important; } .hover-bg-primary-soft:hover i{ transform: scale(1.2); transition: transform .3s ease; } .hover-bg-primary-soft i{ transition: transform .3s ease; } /* Alerts */ .alert-light{ font-size:1rem!important; color:#000!important; font-weight:500; border-radius:0; z-index:1050!important; } .alert-light .alert-link{ color:#000!important; font-weight:500; text-decoration:underline!important; } .alert-primary{ background-color: var(--nv-navy)!important; color:#fff!important; } /* Sitewide alert banner */ .alertbox .alert{ border-radius: 0 !important; border: 0 !important; } .alertbox p{ display: none; } .bg-alert{ background-color: var(--nv-navy, #0D3E5B) !important; color: #fff !important; font-size: .9rem; } .bg-alert .text-dark{ color: #fff !important; } .bg-alert .btn-close{ filter: invert(1) grayscale(100%) brightness(200%); } @keyframes alertSlideIn{ from{ opacity:0; max-height:0; } to{ opacity:1; max-height:5rem; } } .alertbox{ overflow: hidden; animation: alertSlideIn .4s ease-out .5s both; } .alertbox .fade.show{ opacity: inherit; transition: none; } /* Misc preserved classes that reference brand colors directly for content */ .text-bluegrey, .text-iconblue{ color:#6399ae!important; } .link-bluegrey{ color:#6399ae!important; } .link-gold{ color:#a39382!important; } .badge-primary{ color:#fff; background-color: var(--nv-navy)!important; } /* ============================================================================= Homepage Hero Styles ============================================================================= */ /* Hero container */ .hero-container { position: relative; height: 75vh; max-height: 600px; overflow: hidden; } /* Hero item base styles */ .heroitem { position: absolute; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; } .heroitem.active { opacity: 1; } /* Hide hero items during initial load to prevent flash */ .hero-container.loading .heroitem { display: none !important; opacity: 0 !important; } /* Hero split layout */ .hero-left { position: absolute; left: 0; top: 0; width: 58%; height: 100%; background: linear-gradient(135deg, var(--nv-persimmon, #F36F42) 0%, #e55a35 100%); clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%); display: flex; align-items: center; padding: 0 5% 0 10%; z-index: 2; animation: slideSlant 0.8s ease-out forwards; } .hero-right { position: absolute; right: 0; top: 0; width: 52%; height: 100%; background-size: cover; background-position: center; z-index: 1; opacity: 0; transition: opacity 0.8s ease; } .heroitem.active .hero-right { opacity: 1; } /* Hero content */ .hero-content { position: relative; z-index: 3; color: white; max-width: 675px; opacity: 0; animation: fadeIn 1s ease-out 0.3s forwards; } .hero-eyebrow { color: var(--nv-mint, #7FA895); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; } .hero-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 900; line-height: 1.1; margin-bottom: 20px; } .hero-subtitle { font-size: 1.25rem; line-height: 1.4; margin-bottom: 30px; opacity: 0.9; font-weight: 500; } .hero-cta { display: flex; gap: 15px; flex-wrap: wrap; align-items: center; } /* Hero animations */ @keyframes slideSlant { from { clip-path: polygon(0 0, 95% 0, 100% 100%, 0 100%); } to { clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Hero Controls for Accessibility */ .hero-controls { transition: opacity 0.3s ease; } .hero-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.7); background: transparent; padding: 0; cursor: pointer; transition: all 0.3s ease; } .hero-dot:hover { border-color: #fff; background: rgba(255,255,255,0.3); } .hero-dot.active { background: #fff; border-color: #fff; transform: scale(1.2); } .hero-prev, .hero-next, .hero-pause { opacity: 0.8; transition: all 0.3s ease; } .hero-prev:hover, .hero-next:hover, .hero-pause:hover { opacity: 1; transform: scale(1.1); } .hero-pause[aria-pressed="true"] i::before { content: "\F4F4"; /* bi-play-fill */ } /* Mobile hero adjustments */ @media (max-width: 768px) { .hero-left { width: 100%; clip-path: none; padding: 40px 20px; background: linear-gradient(135deg, rgba(245, 111, 66, 0.85) 0%, rgba(229, 90, 53, 0.9) 100%), var(--mobile-bg-image); background-size: cover; background-position: center; animation: none; } .hero-right { display: none; } .hero-content { opacity: 1; animation: none; } .hero-controls { bottom: 20px !important; right: auto !important; left: 50% !important; transform: translateX(-50%); } .hero-prev, .hero-next, .hero-pause { display: none !important; } } /* Help Swiper wrap */ .helpSwiper-wrap { position: relative; padding-right: calc(var(--help-arrow-size) + var(--help-arrow-gap) + 6px); overflow: hidden; } /* Swiper card radius reset */ .swiper .card, .swiper .card-img-container, .swiper .card-img-top { border-radius: 0 !important; } /* Card shadow override for homepage */ .card.shadow-soft { border: 0 !important; border-radius: 16px; overflow: hidden; box-shadow: var(--bs-card-box-shadow) !important; } /* End of file */ /* ===== Auto Loan Calculator — Compact Layout (scoped) ===== */ #calculator .card-img-top{ height: 150px; object-fit: cover; } @media (min-width: 1200px){ #calculator .card-img-top{ height: 170px; } } /* Lightly reduce header/result sizing without altering form behavior */ #calculator .card-title{ font-size: 1.15rem; padding-bottom: .5rem; margin-bottom: .75rem; } #calculator #calculationResult{ padding: 1.25rem; } #calculator #calculationResult h4{ font-size: 1rem; } #calculator #monthlyPayment{ font-size: clamp(1.6rem, 3.5vw, 2rem); line-height: 1.1; } /* ===== NuVista Typography Utilities (2025) ===== */ /* Token fallbacks keep Front-compatible and brand-agnostic */ :root{ --nv-navy: #0d3e5b; --nv-persimmon: #f36f42; --nv-mint: #7FA895; --nv-accent-blue: #11527a; } /* Gradient text (light surfaces) */ .text-gradient-blue{ background: linear-gradient(90deg, var(--nv-navy), var(--nv-accent-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Gradient text (on dark image/hero) */ .text-gradient-blue-on-dark{ background: linear-gradient(90deg, #fff, #c6e6ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Brand token text colors */ .text-nv-navy{ color: var(--nv-navy) !important; } .text-nv-persimmon{ color: var(--nv-persimmon) !important; } .text-nv-mint{ color: var(--nv-mint) !important; } .text-nv-accent-blue{ color: var(--nv-accent-blue) !important; } /* Brand token borders */ .border-nv-navy{ border-color: var(--nv-navy) !important; } .border-nv-mint{ border-color: var(--nv-mint) !important; } /* Underline accent helper (partial underline) */ .underline-accent{ position:relative; display:inline-block; padding-bottom:.25rem; } .underline-accent::after{ content:""; position:absolute; left:0; right:50%; bottom:0; height: 8px; background-color: rgba(13, 62, 91, 0.2); /* color-mix(in srgb, var(--nv-navy) 20%, transparent) */ border-radius:4px; } /* Outlined heading */ .outlined-heading{ color: #fff; -webkit-text-stroke: 1px var(--nv-navy); text-shadow: none; } /* Oversized number aesthetic */ .number-billboard{ color: rgba(13, 62, 91, 0.18); /* color-mix(in srgb, var(--nv-navy) 18%, transparent) */ font-weight: 800; line-height:1; } /* Tag pill utility */ .tag-pill{ border-radius:999px; padding:.25rem .6rem; } /* Divider gradients */ .divider-gradient-right{ height:2px; background: linear-gradient(to right, transparent, var(--nv-navy)); } .divider-gradient-left{ height:2px; background: linear-gradient(to left, transparent, var(--nv-navy)); } /* Vertical text helper */ .text-vertical-rl{ writing-mode: vertical-rl; transform: rotate(180deg); } /* Soft background chips */ .bg-nv-navy-12{ background-color: rgb(230, 234, 238); } /* color-mix(in srgb, var(--nv-navy) 12%, white) ≈ #e6eaee */ /* ===== NuVista Typography Utilities — Extended (2025) ===== */ /* Color tokens */ .text-nv-navy{ color: var(--nv-navy) !important; } .text-nv-persimmon{ color: var(--nv-persimmon) !important; } .text-nv-mint{ color: var(--nv-mint) !important; } .text-nv-accent-blue{ color: var(--nv-accent-blue) !important; } /* Background tints */ .bg-nv-navy-10{ background-color: rgb(232, 235, 238); } /* color-mix(in srgb, var(--nv-navy) 10%, white) ≈ #e8ebee */ .bg-nv-navy-12{ background-color: rgb(230, 234, 238); } /* color-mix(in srgb, var(--nv-navy) 12%, white) ≈ #e6eaee */ .bg-nv-persimmon-90{ background-color: rgba(243, 111, 66, 0.9); } /* color-mix(in srgb, var(--nv-persimmon) 90%, transparent) */ /* Borders */ .border-nv-navy{ border-color: var(--nv-navy) !important; } .border-nv-mint{ border-color: var(--nv-mint) !important; } /* Gradient text */ .text-gradient-blue{ background: linear-gradient(90deg, var(--nv-navy), var(--nv-accent-blue)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .text-gradient-blue-on-dark{ background: linear-gradient(90deg, #ffffff, #c6e6ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Underline accent */ .underline-accent{ position:relative; display:inline-block; padding-bottom:.25rem; } .underline-accent::after{ content:""; position:absolute; left:0; right:50%; bottom:0; height: 8px; background-color: rgba(13, 62, 91, 0.2); /* color-mix(in srgb, var(--nv-navy) 20%, transparent) */ border-radius:4px; } /* Outlined heading */ .outlined-heading{ color:#fff; -webkit-text-stroke:1px var(--nv-navy); text-shadow:none; } /* Jumbo backdrop type */ .display-jumbo{ font-size: 12rem; line-height: 1; } .opacity-10{ opacity:.10 !important; } .mb-n-2r{ margin-bottom: -2rem !important; } /* Number aesthetic */ .number-billboard{ color: rgba(13, 62, 91, 0.18); font-weight:800; line-height:1; } /* color-mix(in srgb, var(--nv-navy) 18%, transparent) */ /* Dividers */ .divider-gradient-right{ height:2px; background: linear-gradient(to right, transparent, var(--nv-navy)); } .divider-gradient-left{ height:2px; background: linear-gradient(to left, transparent, var(--nv-navy)); } /* Vertical text */ .text-vertical-rl{ writing-mode: vertical-rl; transform: rotate(180deg); } /* Sizes / shapes */ .size-48{ width:48px; height:48px; } .shape-80{ width:80px; height:80px; } .rounded-40{ border-radius:40%; } /* Utility widths */ .w-30{width:30px!important;} /* ===== NuVista Typography Utilities — Tags, Dividers, Copy (2025) ===== */ /* Tag system driven by CSS variables */ .tag { --tag-bg: rgb(234, 237, 239); /* color-mix(in srgb, var(--nv-navy) 6%, #fff) ≈ #eaedef */ --tag-fg: var(--nv-navy); --tag-br: rgb(35, 40, 45); /* color-mix(in srgb, var(--tag-bg) 85%, #000) - darker border */ display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: 999px; border: 1px solid var(--tag-br); background: var(--tag-bg); color: var(--tag-fg); font-weight: 600; line-height: 1; white-space: nowrap; } .tag i{font-size: .9em;} /* Brand tag presets (can be overridden per brand) */ .tag-brand { --tag-bg: rgb(232, 235, 238); --tag-fg: var(--nv-navy); } /* color-mix(in srgb, var(--nv-navy) 10%, #fff) ≈ #e8ebee */ .tag-accent { --tag-bg: rgb(237, 241, 244); --tag-fg: var(--nv-accent-blue); } /* color-mix(in srgb, var(--nv-accent-blue) 10%, #fff) ≈ #edf1f4 */ .tag-success { --tag-bg: rgb(238, 245, 241); --tag-fg: var(--bs-success); } /* color-mix(in srgb, var(--bs-success) 12%, #fff) ≈ #eef5f1 */ .tag-warning { --tag-bg: rgb(254, 245, 231); --tag-fg: #1f2937; } /* color-mix(in srgb, var(--bs-warning) 18%, #fff) ≈ #fef5e7 */ .tag-muted { --tag-bg: #f3f4f6; --tag-fg: #374151; } /* Dividers */ .divider { display:flex; align-items:center; gap:.75rem; } .divider::before, .divider::after{ content:""; flex:1 1 auto; height:2px; background: var(--bs-border-color); } .divider.thin::before, .divider.thin::after{ height:1px; } .divider.dotted::before, .divider.dotted::after{ border-top: 2px dotted var(--bs-border-color); height:0; background: none; } .divider.gradient::before{ background: linear-gradient(to right, transparent, var(--nv-navy)); } .divider.gradient::after{ background: linear-gradient(to left, transparent, var(--nv-navy)); } .divider .label{ display:inline-flex; align-items:center; gap:.5rem; padding: .25rem .75rem; border-radius: 999px; border: 1px solid var(--nv-navy); color: var(--nv-navy); background: rgb(232, 235, 238); /* color-mix(in srgb, var(--nv-navy) 10%, #fff) ≈ #e8ebee */ font-weight: 700; text-transform: none; } /* Copy button */ .block-actions{ display:flex; justify-content:flex-end; margin:-.25rem 0 .75rem; } .copy-btn{ --cbg: #fff; --cfg: #111; --cbr: rgba(0,0,0,.1); border:1px solid var(--cbr); background:var(--cbg); color:var(--cfg); border-radius: 999px; padding:.25rem .6rem; font-weight:600; font-size:.875rem; } .copy-btn:hover{ filter: brightness(.98); } .copy-toast{ position: fixed; right: 1rem; bottom: 1rem; background:#111; color:#fff; padding:.5rem .75rem; border-radius: .5rem; opacity:0; transform: translateY(10px); transition: .2s ease; pointer-events:none; } .copy-toast.show{ opacity:1; transform: translateY(0); } /* Misc */ .z-1{ z-index:1; } .z-n1{ z-index:-1; } /* ===== Copy Button & Dark Surface ===== */ .btn-copy{ --cbg:#fff; --cfg:#111; --cbr:rgba(0,0,0,.12); display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--cbr); background:var(--cbg); color:var(--cfg); border-radius:999px; padding:.15rem .5rem; font-weight:600; font-size:.75rem; line-height:1; } .btn-copy i{ font-size: .9em; } .btn-copy:hover{ filter: brightness(.98); text-decoration:none; color:inherit; } .bg-deep-navy{ background:#0b1b24 !important; } /* ===== Alerts (brand-token, surface-aware) ===== */ .alert-soft{ --alert-bg: var(--surface-bg, #fff); --alert-text: var(--surface-text, #1b2430); --alert-border: var(--bs-border-color); background-color: var(--alert-bg) !important; color: var(--alert-text) !important; border: 1px solid var(--alert-border) !important; border-radius: 12px; } .alert-soft .alert-title{ color: inherit; } /* Token-driven soft variants (no .alert-primary here to avoid overrides) */ .alert-soft-navy{ --alert-bg: rgb(230, 234, 238); /* color-mix(in srgb, var(--nv-navy) 12%, white) ≈ #e6eaee */ --alert-text: var(--nv-navy); --alert-border: rgb(200, 210, 220); /* color-mix(in srgb, var(--nv-navy) 30%, white) ≈ #c8d2dc */ } .alert-soft-accent{ --alert-bg: rgb(237, 241, 244); /* color-mix(in srgb, var(--nv-accent-blue) 12%, white) ≈ #edf1f4 */ --alert-text: var(--nv-accent-blue); --alert-border: rgb(210, 220, 230); /* color-mix(in srgb, var(--nv-accent-blue) 30%, white) ≈ #d2dce6 */ } .alert-soft-mint{ --alert-bg: rgb(238, 245, 241); /* color-mix(in srgb, var(--nv-mint) 12%, white) ≈ #eef5f1 */ --alert-text: var(--nv-mint-700, #2b5b4b); --alert-border: rgb(200, 220, 210); /* color-mix(in srgb, var(--nv-mint) 30%, white) ≈ #c8dcd2 */ } .alert-soft-persimmon{ --alert-bg: rgb(250, 238, 233); /* color-mix(in srgb, var(--nv-persimmon) 14%, white) ≈ #faeee9 */ --alert-text: var(--nv-persimmon-700, #7a2f18); --alert-border: rgb(245, 210, 195); /* color-mix(in srgb, var(--nv-persimmon) 35%, white) ≈ #f5d2c3 */ } .alert-soft-gray{ --alert-bg: #f3f5f7; --alert-text: #1f2937; --alert-border: #e3e7ee; } /* High-contrast "solid" token variants (when needed) */ .alert-solid-navy{ background-color: var(--nv-navy) !important; color: #fff !important; border: 0 !important; } .alert-solid-persimmon{ background-color: var(--nv-persimmon) !important; color: #fff !important; border: 0 !important; } /* ============================================================================ Moved from index.html — Unique utilities/components (no duplicates) ========================================================================== */ /* Tokens: UI shadow variable used by card accents */ :root{ --bs-card-box-shadow: 0 6px 20px 0 rgba(0,0,0,.19), 0 8px 17px 0 rgba(0,0,0,.20); } /* Divider variant with faded ends */ .divider.fade-ends::before{ background: linear-gradient(to right, rgba(13,62,91,0), rgba(13,62,91,0.35)); } .divider.fade-ends::after{ background: linear-gradient(to left, rgba(13,62,91,0), rgba(13,62,91,0.35)); } /* Wellness card */ .wellness-card{ border:none; border-radius:24px; overflow:hidden; box-shadow:0 8px 32px var(--shadow-light); transition: all .4s cubic-bezier(.4,0,.2,1); background:#fff; } .wellness-card:hover{ transform: translateY(-8px); box-shadow: 0 20px 48px var(--shadow-medium); } /* Ensure decorative overlays don’t block clicks */ .wellness-hero::before, .wellness-hero::after, .tools-hero::before{ pointer-events: none !important; } /* Make full-bleed media non-interactive if needed */ .featured-image img, .course-image{ pointer-events: none; } /* Teens placeholder card */ .teens-placeholder{ background: linear-gradient(135deg, #f8fafb 0%, #fff 100%); border:none; border-radius:20px; padding:2rem; text-align:center; transition: all .3s ease; } .teens-placeholder:hover{ background:#fff; transform: translateY(-4px); box-shadow: 0 12px 32px var(--shadow-medium); } /* Buttons (brand-consistent) */ .btn-nuvista-primary{ background: linear-gradient(135deg, var(--nuvista-persimmon, var(--nv-persimmon)) 0%, #e55a32 100%); border:0; color:#fff; font-weight:600; padding:12px 32px; border-radius:16px; transition: all .3s ease; } .btn-nuvista-primary:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(243,111,66,.3); color:#fff; } .btn-nuvista-outline{ border:2px solid var(--nuvista-persimmon, var(--nv-persimmon)); color: var(--nuvista-persimmon, var(--nv-persimmon)); background: transparent; font-weight:600; padding:12px 32px; border-radius:16px; transition: all .3s ease; } .btn-nuvista-outline:hover{ background: var(--nuvista-persimmon, var(--nv-persimmon)); color:#fff; transform: translateY(-2px); } .btn-white-custom{ background:#fff; color: var(--nuvista-persimmon, var(--nv-persimmon)); border:0; font-weight:600; padding:12px 32px; border-radius:16px; transition: all .3s ease; } .btn-white-custom:hover{ background:#f8f9fa; color: var(--nuvista-persimmon, var(--nv-persimmon)); transform: translateY(-2px); } /* Color utilities mapped to compat tokens already defined above */ .text-nuvista-persimmon{ color: var(--nuvista-persimmon, var(--nv-persimmon)) !important; } .text-nuvista-navy{ color: var(--nuvista-navy, var(--nv-navy)) !important; } .text-nuvista-mint{ color: var(--nuvista-mint, var(--nv-mint)) !important; } .bg-nuvista-persimmon-light{ background-color: var(--nuvista-persimmon-light, rgba(243,111,66,.10)) !important; } .bg-nuvista-navy-light{ background-color: var(--nuvista-navy-light, rgba(13,62,91,.10)) !important; } .bg-nuvista-mint-light{ background-color: var(--nuvista-mint-light, rgba(127,168,149,.10)) !important; } /* Wellness nav responsive tweaks */ @media (max-width: 768px){ .wellness-nav{ padding:4px; } .wellness-nav .nav-link{ padding:12px 16px; font-size:.9rem; } .featured-hero .row{ flex-direction: column; } } /* Generic fade-in helper (reuse existing @keyframes fadeIn) */ .fade-in{ animation: fadeIn .6s ease-out; } /* Card bottom accent stripe variants */ .card[class*="card-accent-"]{ position:relative; overflow:hidden; } .card[class*="card-accent-"]::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:12px; } .card-accent-persimmon::after{ background-color: var(--nv-persimmon); } .card-accent-navy::after{ background-color: var(--nv-navy); } .card-accent-mint::after{ background-color: var(--nv-mint); } .card-accent-blue::after{ background-color: var(--nv-blue, #577A8E); } .card-accent-persimmon:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 14px 28px rgba(0,0,0,.20), 0 10px 24px rgba(243,111,66,.12) !important; } .card-accent-navy:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 14px 28px rgba(0,0,0,.20), 0 10px 24px rgba(13,62,91,.12) !important; } .card-accent-mint:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 14px 28px rgba(0,0,0,.20), 0 10px 24px rgba(127,168,149,.10) !important; } .card-accent-blue:hover{ box-shadow: 0 8px 22px rgba(0,0,0,.22), 0 14px 28px rgba(0,0,0,.20), 0 10px 24px rgba(15,178,255,.12) !important; } /* Icon badge chips */ .icon-badge{ display:inline-flex; align-items:center; justify-content:center; width:92px; height:92px; border-radius:50%; margin-bottom:1rem; font-size:2rem; } .icon-badge-persimmon{ background-color: rgb(250, 238, 233); color: var(--nv-persimmon); } /* color-mix(in srgb, var(--nv-persimmon) 14%, #fff) ≈ #faeee9 */ .icon-badge-navy{ background-color: rgb(228, 233, 237); color: var(--nv-navy); } /* color-mix(in srgb, var(--nv-navy) 14%, #fff) ≈ #e4e9ed */ .icon-badge-mint{ background-color: rgb(238, 245, 241); color: var(--nv-mint); } /* color-mix(in srgb, var(--nv-mint) 14%, #fff) ≈ #eef5f1 */ .icon-badge-blue{ background-color: rgb(237, 241, 244); color: var(--nv-blue, #577A8E); } /* color-mix(in srgb, var(--nv-blue) 14%, #fff) ≈ #edf1f4 */ .icon-badge i{ color: currentColor !important; } .card:hover .icon-badge{ transform: scale(1.04); transition: transform .2s ease; } /* Membership (ms-*) utilities */ :root{ --ms-persimmon:#F36F42; --ms-persimmon-600:#e55a32; --ms-navy:#0D3E5B; --ms-mint:#7FA895; --ms-ink:#1F2A37; --ms-card-radius:1.25rem; } .text-gradient-persimmon{ background: linear-gradient(135deg,var(--ms-persimmon),var(--ms-persimmon-600)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .membership-section{ background: radial-gradient(1200px 600px at -20% -10%, rgba(243,111,66,.10), transparent 60%), radial-gradient(900px 500px at 120% 110%, rgba(127,168,149,.12), transparent 60%), linear-gradient(180deg, #fff 0%, #fbfcfd 100%); position:relative; } .ms-links{ position:absolute; inset:0; pointer-events:none; opacity:.08; background-image: radial-gradient(80px 80px at 10% 20%, var(--ms-navy) 12%, transparent 13%), radial-gradient(80px 80px at 14% 20%, var(--ms-navy) 12%, transparent 13%), radial-gradient(80px 80px at 70% 70%, var(--ms-persimmon) 12%, transparent 13%), radial-gradient(80px 80px at 74% 70%, var(--ms-persimmon) 12%, transparent 13%); background-repeat:no-repeat; animation: msFloat 18s ease-in-out infinite alternate; } @keyframes msFloat{ 0%{ transform: translateY(0) } 100%{ transform: translateY(-10px) } } .ms-eyebrow{ background: rgba(13,62,91,.06); color: var(--ms-navy); border-radius:999px; padding:.4rem .8rem; font-weight:600; letter-spacing:.02em; } .ms-photo-wrap{ position:relative; max-width:620px; margin:0 auto; } .ms-photo-wrap img{ border-radius:24px; } .ms-float, .ms-float-2{ position:absolute; padding:.5rem .75rem; border-radius:999px; } .ms-float{ top:8%; left:-6%; transform: rotate(-3deg); } .ms-float-2{ bottom:-1%; right:-4%; transform: rotate(2deg); } .ms-chips .chip{ display:inline-flex; align-items:center; gap:.4rem; background:#fff; color: var(--ms-navy); border:1px solid rgba(13,62,91,.12); padding:.4rem .7rem; border-radius:999px; font-weight:600; font-size:.9rem; box-shadow: 0 6px 14px rgba(13,62,91,.06); } .ms-chips .chip::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background: radial-gradient(circle at 30% 30%, var(--ms-persimmon), var(--ms-persimmon-600)); } .ms-cdfi{ border-radius: var(--ms-card-radius); } .ms-cdfi-icon{ width:42px; height:42px; border-radius:12px; flex:0 0 42px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg, rgba(243,111,66,.15), rgba(127,168,149,.15)); color: var(--ms-navy); font-size:1.1rem; } .btn-ms-primary{ --bs-btn-padding-y:.75rem; --bs-btn-padding-x:1.4rem; --bs-btn-border-radius:16px; color:#fff; font-weight:700; border:0; background: linear-gradient(135deg, var(--ms-persimmon), var(--ms-persimmon-600)); box-shadow: 0 12px 28px rgba(243,111,66,.28); } .btn-ms-primary:hover{ transform: translateY(-2px); color:#fff; } .btn-outline-ms{ --bs-btn-padding-y:.75rem; --bs-btn-padding-x:1.4rem; --bs-btn-border-radius:16px; border:2px solid var(--ms-persimmon); color: var(--ms-persimmon); font-weight:700; } .btn-outline-ms:hover{ background: var(--ms-persimmon); color:#fff; } .dot{ width:.35rem; height:.35rem; border-radius:50%; background: rgba(31,42,55,.25); display:inline-block; } @media (max-width: 991.98px){ .ms-float{ left:0; } .ms-float-2{ right:0; } } /* ----------------------------------------- Quick Nav (sticky shortcut bar) ----------------------------------------- */ .quick-nav { background-color: #f8fafc; border-top: 1px solid rgba(13,62,91,.08); border-bottom: 1px solid rgba(13,62,91,.08); z-index: 1030; } .quick-nav .quick-item { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 0; font-weight: 600; color: #364a5a; text-decoration: none; } .quick-nav .quick-item i { color: var(--nv-mint); font-size: 1.25rem; } .quick-nav .quick-item:hover { color: var(--nv-navy); background-color: rgb(234, 237, 239); /* color-mix(in srgb, var(--nv-navy) 6%, #fff) ≈ #eaedef */ text-decoration: none; } @media (max-width: 767.98px) { .quick-nav .quick-item { padding: .75rem 0; } } /* Smooth scroll + offset so anchors aren't hidden under sticky bars */ html { scroll-behavior: smooth; } .section-target { scroll-margin-top: 112px; }