/* Shared HCWF component styles. * Sites that load this file in set HCWF_HEAD_COMPONENT_STYLES=True; * component templates retain their inline fallback for unmigrated sites. */ .hcwf-navbar .container-fluid { display: flex; align-items: center; justify-content: space-between; } .hcwf-navbar .navbar-brand { flex: 0 0 min(350px, calc(100% - 84px)); min-width: 0; width: min(350px, calc(100% - 84px)); max-width: min(350px, calc(100% - 84px)); margin-right: .75rem; overflow: visible; padding: 0; } .hcwf-navbar .hcwf-brand-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .hcwf-navbar .hcwf-logo-link { display: block; width: 350px; max-width: 100%; line-height: 0; } .hcwf-navbar .navbar-brand img { width: 350px !important; max-width: 100% !important; height: auto; max-height: none; object-fit: contain; object-position: left center; display: block; } .hcwf-navbar .hcwf-support-phone { align-items: center; color: var(--hcwf-navbar-text, #FFFFFF) !important; display: flex; font-size: .875rem; font-weight: 600; justify-content: center; line-height: 1.2; min-height: 44px; opacity: .9; padding: .25rem .5rem; text-decoration: none; text-align: center; white-space: nowrap; width: 100%; } .hcwf-navbar .hcwf-support-phone:hover { opacity: 1; text-decoration: underline; } .hcwf-navbar .navbar-toggler { flex: 0 0 58px; width: 58px; height: 58px; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-color: rgba(255,255,255,.35); color: var(--hcwf-navbar-text, #FFFFFF) !important; } .hcwf-navbar .navbar-toggler i, .hcwf-navbar .navbar-toggler .bi, .hcwf-navbar .nav-link { color: var(--hcwf-navbar-text, #FFFFFF) !important; } .hcwf-navbar .nav-link.hcwf-nav-cta, nav.hcwf-navbar .navbar-nav > .nav-item > .nav-link.hcwf-nav-cta { color: var(--mm-accent-text, var(--hcwf-navbar-text, #FFFFFF)) !important; } .hcwf-reviews-strip .hcwf-review-card { background: rgba(127,127,127,0.06); border: 1px solid rgba(127,127,127,0.25) !important; color: inherit; } .hcwf-reviews-strip .hcwf-review-card blockquote, .hcwf-reviews-strip .hcwf-review-card a.text-body { color: inherit; } .hcwf-reviews-strip .hcwf-review-card .hcwf-review-avatar-fallback { background: rgba(127,127,127,0.15); color: inherit; opacity: .7; } .hcwf-reviews-strip .text-muted { color: inherit !important; opacity: .7; } .hcwf-stats-strip .text-muted { color: inherit !important; opacity: .7; } :where(.hcwf-stats-strip) { --hcwf-stat-accent: #a97d20; } .hcwf-stats-strip .hcwf-stat-value { color: var(--hcwf-stat-accent); line-height: 1; } .hcwf-media-card { color: inherit; background: rgba(127,127,127,0.06); border-color: rgba(127,127,127,0.25) !important; transition: background .15s ease,border-color .15s ease,transform .15s ease; } .hcwf-media-card:hover { color: inherit; background: rgba(127,127,127,0.12); border-color: rgba(127,127,127,0.45) !important; transform: translateY(-1px); } .hcwf-media-card .hcwf-media-icon { color: var(--bs-primary,#0d6efd); } .hcwf-media-card .hcwf-media-sub { opacity: .7; } .hcwf-media-strip .text-muted { color: inherit !important; opacity: .7; } @media (min-width: 75rem) { .hcwf-navbar .navbar-toggler { display: none !important; } } @media (max-width: 74.9375rem) { .hcwf-navbar .container-fluid { flex-wrap: nowrap !important; gap: .5rem; } .hcwf-navbar .navbar-brand { flex-basis: calc(100% - 74px); width: calc(100% - 74px); max-width: calc(100% - 74px); } .hcwf-navbar .navbar-brand img { width: 100%; max-width: 350px !important; } .hcwf-navbar .navbar-collapse { position: absolute; top: 100%; left: 0; right: 0; background: var(--mm-navbar-bg, var(--primary-color, #2c3e50)); padding: .75rem 1rem 1rem; border-top: 1px solid rgba(255,255,255,.08); box-shadow: 0 12px 24px rgba(0,0,0,.22); } .hcwf-navbar .navbar-nav { align-items: flex-start !important; } } @media (max-width: 767px) { .hcwf-navbar { padding-top: 6px !important; padding-bottom: 6px !important; } .hcwf-navbar .container-fluid { gap: .35rem; } .hcwf-navbar .navbar-brand { flex-basis: calc(100% - 66px); width: calc(100% - 66px); max-width: calc(100% - 66px); margin-right: .35rem; } .hcwf-navbar .navbar-brand img { max-width: min(350px, 100%) !important; } .hcwf-navbar .hcwf-support-phone { font-size: .875rem; } .hcwf-navbar .navbar-toggler { flex-basis: 52px; width: 52px; height: 52px; } }