/*
* Quote Valley Design Refresh — v2 (full visual redesign)
* Presentation-only layer (colors, spacing, type, layout via CSS/JS).
* Does not alter URLs, content/copy, or database data.
* Design direction: QVI lockup colors (sky cyan, wordmark teal, sun gold),
* generous whitespace, and soft depth rather than flat Elementor defaults.
* Built from scratch against the site's actual 20-section homepage
* structure (surveyed section-by-section) rather than patched piecemeal.
*/
:root {
/* Core brand palette — user-specified QVI blue #2596be */
--qv-navy: #2596be;
--qv-navy-dark: #1c718f;
--qv-navy-mid: #2084a8;
--qv-navy-light: #e8f4f8;
--qv-navy-rgb: 37, 150, 190;
--qv-yellow: #f4bc04;
--qv-yellow-dark: #d9a600;
--qv-ink-900: #165a72;
--qv-ink-800: #0e3d4e;
--qv-indigo: var(--qv-navy);
--qv-indigo-dark: var(--qv-navy-dark);
--qv-indigo-light: var(--qv-navy-light);
--qv-cyan: #2596be;
--qv-cyan-light: #d4eef5;
--qv-teal: #54bcb8;
--qv-coral: #f4bc04;
--qv-coral-dark: #d9a600;
--qv-gold: #f4bc04;
--qv-gold-dark: #d9a600;
--qv-ink: #1a1a1a;
--qv-heading: #2596be;
--qv-muted: #4b5563;
--qv-link: #2596be;
--qv-link-hover: #1c718f;
--qv-bg: #ffffff;
--qv-bg-alt: #f3f9fb;
--qv-card: #ffffff;
--qv-border: #e5e7eb;
--qv-input-border: #e9f0f6;
/* Radii — reference uses a notably TIGHT 6px on cards/tiles and a full
pill (9999px) only on buttons. Earlier versions used 14-28px, which is
a large part of why this site read as softer/busier than the
benchmark. */
--qv-radius-xl: 8px;
--qv-radius-lg: 6px;
--qv-radius-md: 6px;
--qv-radius-sm: 4px;
--qv-radius-pill: 9999px;
/* Shadows — reference cards are near-flat: a hairline border does the
separating work, not a drop shadow. */
--qv-shadow-sm: 0 1px 2px rgba(10, 20, 40, .05);
--qv-shadow: 0 4px 12px rgba(10, 20, 40, .08);
--qv-shadow-hover: 0 8px 20px rgba(10, 20, 40, .12);
--qv-shadow-color: 0 8px 20px rgba(37, 150, 190, .16);
/* ---- Measured from the reference (healthforcalifornia.com) ---- */
--qv-header-h: 112px; /* reference header row height */
--qv-header-h-mobile: 64px;
--qv-container: 1280px; /* reference .container at xl */
--qv-gutter: 24px;
--qv-text-col: 928px; /* reference body/section text column */
--qv-hero-col: 780px; /* longer QVI headline needs more than the reference's 593px */
--qv-hero-min-h: calc(100vh - var(--qv-header-h)); /* reference min-h-[calc(100vh-112px)] */
/* Type scale — reference: H1 60/60/700, section headings 30/36/500,
body 16/24. Section headings being weight 500 (not 700+) is the
single biggest reason the reference reads calm rather than shouty. */
/* Reference H1 is 60px/1.0 for a 30-character headline that sets in 2
lines and fills ~21% of its hero. Our headline is ~62 characters —
more than double — so a literal 60px sets 5 lines and swallows ~38%
of the hero, which reads as unbalanced rather than as a match. We
therefore match the reference's PROPORTION (a dominant H1 at roughly
a fifth to a quarter of hero height, 3 lines) rather than its literal
pixel value, and widen the text column to suit the longer string. */
--qv-fs-h1: 48px;
--qv-lh-h1: 1.05;
--qv-fw-h1: 700;
--qv-fs-h2: 30px;
--qv-lh-h2: 36px;
--qv-fw-h2: 500;
--qv-fs-h3: 24px;
--qv-lh-h3: 32px;
--qv-fs-body: 16px;
--qv-lh-body: 24px;
--qv-heading-mb: 20px;
/* Controls — reference buttons h-10 (40px), inputs 3.5rem (56px) */
--qv-btn-h: 40px;
--qv-btn-pad-x: 24px;
--qv-btn-fs: 14px;
--qv-btn-fw: 600;
--qv-input-h: 56px;
--qv-nav-fs: 14px;
--qv-nav-fw: 500;
--qv-nav-pad-x: 16px;
/* Rhythm — reference py-16/py-20 (~64–80px) */
--qv-section-pad-y: 80px;
--qv-section-pad-y-tablet: 56px;
--qv-section-pad-y-mobile: 40px;
--qv-grid-gap: 20px;
--qv-font: Montserrat, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html.qv-modern.elementor-kit-6,
html.qv-modern body.elementor-kit-6 {
--e-global-color-accent: var(--qv-navy);
}
/* ---------------------------------------------------------------- */
/* Base */
/* ---------------------------------------------------------------- */
html.qv-modern,
html.qv-modern body {
overflow-x: hidden;
max-width: 100%;
}
/* Guard against accidental horizontal scrolling at any width: nothing
inside a section may exceed its container, and long unbroken strings
(URLs, "1095a-3895 Corrections", email addresses) wrap instead of
pushing the page sideways. */
.qv-modern .elementor-top-section,
.qv-modern .elementor-container,
.qv-modern .elementor-column,
.qv-modern .elementor-widget-wrap {
max-width: 100%;
min-width: 0;
}
.qv-modern p,
.qv-modern li,
.qv-modern h1,
.qv-modern h2,
.qv-modern h3,
.qv-modern a {
overflow-wrap: break-word;
}
html.qv-modern body {
color: var(--qv-ink);
background: #fff;
font-family: var(--qv-font);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.qv-modern h1,
.qv-modern h2,
.qv-modern h3,
.qv-modern h4,
.qv-modern h5,
.qv-modern h6 {
letter-spacing: -.02em;
}
/* Default heading/paragraph color is dark ink — but sections with a
colored/dark background (flagged with .qv-on-dark by JS, based on
actual computed background luminance) flip to light text instead.
This fixes the old bug where global dark headings were unreadable on
the site's own purple/teal gradient sections. */
/* Typography hierarchy matched to the measured reference: ONE dominant
H1 (60px/1.0/700) and deliberately restrained section headings
(30px/36px/500). The previous 750 weight on every heading is what made
this site read louder and busier than the benchmark. */
.qv-modern .elementor-widget-heading .elementor-heading-title,
.qv-modern h1.elementor-heading-title,
.qv-modern h2.elementor-heading-title,
.qv-modern h3.elementor-heading-title {
color: var(--qv-heading);
font-weight: var(--qv-fw-h2);
font-family: var(--qv-font);
}
.qv-modern p,
.qv-modern li {
color: var(--qv-muted);
font-size: var(--qv-fs-body);
line-height: var(--qv-lh-body);
}
.qv-modern a {
color: var(--qv-link);
}
.qv-modern a:hover {
color: var(--qv-link-hover);
}
.qv-modern img {
max-width: 100%;
height: auto;
}
* {
-webkit-tap-highlight-color: transparent;
}
/* Sections flagged by JS as having a dark/colored background get light
text across the board — EXCEPT inside a nested white/light card box
(icon-box, image-box, CTA, price-table, or anything explicitly given
its own background), which keeps normal dark text since the card's
own background is light regardless of the section behind it. This is
what the :not() exclusions below are for; without them, cards that
float on a dark/colored section background (e.g. the teal "Health
Insurance / Financial Help / Enrollment Help" cards) go invisible —
white text on their own white card background. */
.qv-modern .qv-on-dark .elementor-heading-title,
.qv-modern .qv-on-dark h1,
.qv-modern .qv-on-dark h2,
.qv-modern .qv-on-dark h3 {
color: #fff !important;
}
.qv-modern .qv-on-dark p,
.qv-modern .qv-on-dark li,
.qv-modern .qv-on-dark .elementor-widget-text-editor {
color: rgba(255, 255, 255, .86) !important;
}
.qv-modern .qv-on-dark a:not(.elementor-button) {
color: #fff;
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, .5);
}
/* Opt back OUT of forced white text inside any card-like widget that
has its own light background, since those sit visually "on top of"
the dark section rather than directly against it. */
.qv-modern .qv-on-dark .elementor-widget-icon-box .elementor-heading-title,
.qv-modern .qv-on-dark .elementor-widget-icon-box h1,
.qv-modern .qv-on-dark .elementor-widget-icon-box h2,
.qv-modern .qv-on-dark .elementor-widget-icon-box h3,
.qv-modern .qv-on-dark .elementor-widget-icon-box p,
.qv-modern .qv-on-dark .elementor-widget-icon-box li,
.qv-modern .qv-on-dark .elementor-widget-image-box .elementor-heading-title,
.qv-modern .qv-on-dark .elementor-widget-image-box h1,
.qv-modern .qv-on-dark .elementor-widget-image-box h2,
.qv-modern .qv-on-dark .elementor-widget-image-box h3,
.qv-modern .qv-on-dark .elementor-widget-image-box p,
.qv-modern .qv-on-dark .elementor-widget-call-to-action .elementor-heading-title,
.qv-modern .qv-on-dark .elementor-widget-call-to-action h1,
.qv-modern .qv-on-dark .elementor-widget-call-to-action h2,
.qv-modern .qv-on-dark .elementor-widget-call-to-action h3,
.qv-modern .qv-on-dark .elementor-widget-call-to-action p,
.qv-modern .qv-on-dark .elementor-widget-price-table .elementor-heading-title,
.qv-modern .qv-on-dark .elementor-widget-eael-info-box .elementor-heading-title,
.qv-modern .qv-on-dark .elementor-widget-eael-info-box h1,
.qv-modern .qv-on-dark .elementor-widget-eael-info-box h2,
.qv-modern .qv-on-dark .elementor-widget-eael-info-box h3,
.qv-modern .qv-on-dark .elementor-widget-eael-info-box p,
.qv-modern .qv-on-dark .elementor-widget-shortcode .elementor-heading-title,
.qv-modern .qv-on-dark .elementor-widget-shortcode h1,
.qv-modern .qv-on-dark .elementor-widget-shortcode h2,
.qv-modern .qv-on-dark .elementor-widget-shortcode h3,
.qv-modern .qv-on-dark .elementor-widget-shortcode p,
.qv-modern .qv-on-dark .elementor-widget-shortcode li,
.qv-modern .qv-on-dark form .elementor-heading-title,
.qv-modern .qv-on-dark form label,
.qv-modern .qv-on-dark form p {
color: var(--qv-ink-900) !important;
}
.qv-modern .qv-on-dark .elementor-widget-icon-box p,
.qv-modern .qv-on-dark .elementor-widget-image-box p,
.qv-modern .qv-on-dark .elementor-widget-call-to-action p,
.qv-modern .qv-on-dark .elementor-widget-eael-info-box p,
.qv-modern .qv-on-dark .elementor-widget-shortcode p,
.qv-modern .qv-on-dark .elementor-widget-shortcode li {
color: var(--qv-muted) !important;
}
/* ---------------------------------------------------------------- */
/* Header / navigation (HFE nav menu widget) */
/* ---------------------------------------------------------------- */
.qv-modern header {
position: sticky;
top: 0;
z-index: 9999;
background: #fff;
box-shadow: 0 1px 0 rgba(11, 17, 48, .06);
}
.qv-modern header .elementor-container,
.qv-modern header .e-con-inner {
min-height: var(--qv-header-h);
}
/* Utility bar (language switcher row): slim strip. */
.qv-modern header .elementor-section:first-of-type {
min-height: 0;
}
.qv-modern header .elementor-section:first-of-type .elementor-container {
min-height: 34px;
padding-top: 4px;
padding-bottom: 4px;
border-bottom: 1px solid var(--qv-border);
}
.qv-modern header .elementor-section:first-of-type .gtranslate_wrapper {
transform: scale(.92);
transform-origin: right center;
}
/* Primary nav links — reference measures 14px / weight 500 / brand blue,
with 16px horizontal padding on each link and the link filling the
full header height (so the whole strip is the hit target). */
.qv-modern .hfe-nav-menu .menu-item > a,
.qv-modern .hfe-nav-menu-item > a {
font-weight: var(--qv-nav-fw);
font-size: var(--qv-nav-fs);
letter-spacing: .01em;
color: var(--qv-navy) !important;
padding-left: var(--qv-nav-pad-x);
padding-right: var(--qv-nav-pad-x);
transition: color .2s ease;
white-space: nowrap;
}
.qv-modern .hfe-nav-menu .menu-item > a:hover,
.qv-modern .hfe-nav-menu .menu-item.current-menu-item > a {
color: var(--qv-link-hover) !important;
}
.qv-modern .hfe-nav-menu.hfe-layout-horizontal > .menu-item {
margin-left: 0;
margin-right: 0;
}
/* Phone number: icon + pill treatment, sized to the same 40px control
height as the header CTA so the two chips align. */
.qv-modern header a[href^="tel:"] {
font-weight: 600;
font-size: var(--qv-btn-fs);
color: var(--qv-navy) !important;
white-space: nowrap;
display: inline-flex !important;
align-items: center;
gap: 7px;
height: var(--qv-btn-h);
padding: 0 16px;
border-radius: var(--qv-radius-pill);
background: var(--qv-navy-light);
margin-left: 8px;
}
.qv-modern header a[href^="tel:"]::before {
content: "";
width: 15px;
height: 15px;
flex: 0 0 auto;
background-color: var(--qv-indigo);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.qv-modern header a[href^="tel:"]:hover {
background: var(--qv-navy-light);
}
/* Header CTA ("Service Areas") — reference CTA measures 40px tall with
24px horizontal padding and a full pill radius. */
.qv-modern .hfe-nav-menu .menu-item.hfe-button-wrapper > a.elementor-button {
min-height: var(--qv-btn-h) !important;
height: var(--qv-btn-h);
display: inline-flex !important;
align-items: center;
padding: 0 var(--qv-btn-pad-x) !important;
font-size: var(--qv-btn-fs) !important;
font-weight: var(--qv-btn-fw) !important;
border-radius: var(--qv-radius-pill) !important;
box-shadow: none !important;
margin-left: 12px;
background: var(--qv-navy) !important;
}
.qv-modern .hfe-nav-menu .menu-item.hfe-button-wrapper > a.elementor-button:hover {
background: var(--qv-navy-dark) !important;
}
/* "1095a-3895", "Blog" and "Corrections" are relocated into the
Resources dropdown by regroupNavIntoDropdowns() in design-refresh.js
(same links/labels, just one click deeper) so the visible row stays
to Home / Plans / Products / Resources / About us / Contact us +
phone + Service Areas — a clean single row like the reference site,
instead of 11 competing items. */
.qv-modern .qv-moved-to-dropdown {
order: 99;
}
/* One of the relocated links ("...Corrections") carries an
.elementor-button class in the source markup, so the global button
rule rendered it as a filled pill floating inside the dropdown. Inside
a submenu every entry should read as a plain menu row. */
.qv-modern .sub-menu a.elementor-button,
.qv-modern .sub-menu a.hfe-menu-item.elementor-button {
background: transparent !important;
color: var(--qv-ink) !important;
border-radius: 0 !important;
padding: 15px !important;
min-height: 0 !important;
height: auto;
font-size: var(--qv-nav-fs);
font-weight: var(--qv-nav-fw);
justify-content: flex-start;
box-shadow: none !important;
}
.qv-modern .sub-menu a.elementor-button:hover {
background: var(--qv-bg-alt) !important;
color: var(--qv-navy) !important;
}
/* Hamburger toggle (native HFE element) */
.qv-modern .hfe-nav-menu__toggle {
border-radius: var(--qv-radius-sm);
transition: background .15s ease;
}
.qv-modern .hfe-nav-menu__toggle:hover {
background: var(--qv-indigo-light);
}
.qv-modern .hfe-nav-menu-icon svg,
.qv-modern .hfe-nav-menu-icon i {
color: var(--qv-ink-900);
font-size: 24px;
}
.qv-modern .hfe-nav-menu__layout-dropdown .hfe-nav-menu,
.qv-modern .hfe-nav-menu-layout.dropdown {
background: #fff;
border-top: 1px solid var(--qv-border);
box-shadow: var(--qv-shadow);
}
.qv-modern .hfe-nav-menu__layout-dropdown .hfe-nav-menu .menu-item > a,
.qv-modern .hfe-nav-menu-layout.dropdown .menu-item > a {
padding-top: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--qv-border);
font-size: 16px;
}
/* ------------------------------------------------------------------ */
/* Single clean nav row (>=1140px) — after regroupNavIntoDropdowns() */
/* folds "1095a-3895"/"Blog"/"Corrections" into the Resources dropdown */
/* (see design-refresh.js), only 7 top-level items + phone + button */
/* remain, which fit comfortably on one line — matching the reference */
/* site's single-row header instead of the old two-row/hamburger hack. */
/* ------------------------------------------------------------------ */
@media (min-width: 1140px) {
.qv-modern .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu {
/* wrap, not nowrap: before regroupNavIntoDropdowns() runs there are
still 11 top-level items, and nowrap made them overflow leftwards
across the logo for the first moment of every page load. Wrapping
degrades to a brief second row instead of an overlap, and keeps
every link reachable even if the JS never runs. */
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: 2px;
}
/* Reference header row measures 112px tall with the nav links filling
that full height. */
.qv-modern header .elementor-section:nth-of-type(2) .elementor-container {
min-height: var(--qv-header-h);
align-items: center;
padding-top: 0;
padding-bottom: 0;
}
/* The header row measured 132px because the builder adds 10px of
column padding top and bottom on top of the 112px min-height. */
.qv-modern header .elementor-section:nth-of-type(2) .elementor-column > .elementor-widget-wrap {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.qv-modern header .elementor-section:nth-of-type(2) .elementor-widget-nav-menu,
.qv-modern header .elementor-section:nth-of-type(2) .hfe-nav-menu__breakpoint-tablet {
margin-bottom: 0;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet ul.hfe-nav-menu > li > a {
display: flex;
align-items: center;
min-height: var(--qv-header-h);
}
/* The button and phone pill are vertically centred chips, not
full-height strips. */
.qv-modern .hfe-nav-menu__breakpoint-tablet ul.hfe-nav-menu > li.hfe-button-wrapper > a,
.qv-modern .hfe-nav-menu__breakpoint-tablet ul.hfe-nav-menu > li > a[href^="tel:"] {
min-height: var(--qv-btn-h);
}
.qv-modern .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal {
display: block !important;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__toggle {
display: none !important;
}
}
/* ------------------------------------------------------------------ */
/* Hamburger fallback for narrow tablet/small-desktop (768-1139px) */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1139px) {
.qv-modern header .elementor-section:nth-of-type(2) .elementor-container {
min-height: 64px;
align-items: center;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet {
display: flex;
align-items: center;
min-height: 0;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet .elementor-widget-container {
display: flex;
align-items: center;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet .hfe-nav-menu__toggle {
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
margin-left: auto;
width: 44px;
height: 44px;
align-items: center;
justify-content: center;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal {
display: none;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet.qv-nav-open .hfe-nav-menu__toggle {
background: var(--qv-indigo-light);
}
.qv-modern .hfe-nav-menu__breakpoint-tablet.qv-nav-open nav.hfe-nav-menu__layout-horizontal {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid var(--qv-border);
box-shadow: var(--qv-shadow);
max-height: calc(100vh - 60px);
overflow-y: auto;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal ul.hfe-nav-menu {
flex-direction: column;
align-items: stretch;
width: min(100%, 480px);
margin: 0 auto;
padding: 6px 20px 18px;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal .menu-item > a {
padding-top: 13px;
padding-bottom: 13px;
border-bottom: 1px solid var(--qv-border);
min-height: 44px;
display: flex;
align-items: center;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal .sub-menu {
display: none;
position: static !important;
box-shadow: none !important;
width: 100% !important;
padding-left: 12px;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal .menu-item.qv-submenu-open > .sub-menu {
display: block !important;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal .hfe-menu-toggle.sub-arrow {
transition: transform .15s ease;
}
.qv-modern .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal .menu-item.qv-submenu-open > .hfe-has-submenu-container .hfe-menu-toggle.sub-arrow,
.qv-modern .hfe-nav-menu__breakpoint-tablet nav.hfe-nav-menu__layout-horizontal .menu-item.qv-submenu-open .hfe-has-submenu-container .hfe-menu-toggle.sub-arrow {
transform: rotate(180deg);
}
}
/* ---------------------------------------------------------------- */
/* Layout width & section rhythm */
/* ---------------------------------------------------------------- */
/* Container matched to the reference: 1210px outer with 24px gutters,
giving a 1162px content measure. */
.qv-modern .elementor-top-section > .elementor-container,
.qv-modern .e-con-inner {
width: 100%;
/* !important: Elementor's own boxed-section rule sets a competing
max-width that otherwise widens this to 1260px. */
max-width: var(--qv-container) !important;
padding-left: var(--qv-gutter);
padding-right: var(--qv-gutter);
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
.qv-modern .elementor-top-section {
position: relative;
}
/* Give every content section (below the header) generous, consistent
vertical breathing room instead of Elementor's cramped defaults. */
.qv-modern .elementor-top-section.qv-section-spaced {
padding-top: var(--qv-section-pad-y);
padding-bottom: var(--qv-section-pad-y);
}
/* Section heading pattern: centered eyebrow + heading + short intro,
used across most content sections for a consistent rhythm. */
/* Section headings: reference measures a flat 30px/36px at weight 500,
with a ~928px text column and 20px space beneath. No fluid clamp —
the reference holds one size across desktop and steps down only on
small screens (see the mobile block). */
/* NOTE: this deliberately uses the SAME selector shape as the responsive
overrides further down. An earlier version also listed a much more
specific compound selector here; because both carry !important, that
higher specificity silently outranked every mobile step, pinning
section headings at 30px on phones. Keep one selector shape per
element so the breakpoints can actually take effect. */
.qv-modern .elementor-top-section > .elementor-container > .elementor-column:only-child .elementor-widget-heading h2.elementor-heading-title {
/* !important for the same reason as the hero H1: Elementor's
per-page stylesheet pins these at a fixed size with ID-scoped
specificity, which would otherwise also block the mobile steps. */
font-size: var(--qv-fs-h2) !important;
line-height: var(--qv-lh-h2) !important;
font-weight: var(--qv-fw-h2) !important;
text-align: center;
max-width: var(--qv-text-col);
margin-left: auto;
margin-right: auto;
margin-bottom: var(--qv-heading-mb);
}
.qv-modern .elementor-widget-heading h2.elementor-heading-title {
font-size: var(--qv-fs-h2) !important;
line-height: var(--qv-lh-h2) !important;
font-weight: var(--qv-fw-h2) !important;
color: var(--qv-heading);
}
/* Inner-page titles: pages without a hero were inheriting whatever size
the builder happened to set per page (30px on About, 40px elsewhere).
Normalise them to one page-title size so every page in the site reads
as the same design family. */
.qv-modern .elementor-top-section:not(.qv-hero) h1.elementor-heading-title {
font-size: 40px !important;
line-height: 1.15 !important;
font-weight: var(--qv-fw-h1) !important;
}
/* Card / subsection headings */
.qv-modern .elementor-widget-heading h3.elementor-heading-title {
font-size: var(--qv-fs-h3) !important;
line-height: var(--qv-lh-h3) !important;
font-weight: var(--qv-fw-h2) !important;
}
/* Body copy sits in the reference's ~928px reading column, centered
under centered section headings. */
.qv-modern .elementor-top-section > .elementor-container > .elementor-column:only-child > .elementor-widget-wrap > .elementor-widget-text-editor {
max-width: var(--qv-text-col);
margin-left: auto;
margin-right: auto;
}
/* ---------------------------------------------------------------- */
/* HERO (qv-section-4) — full redesign */
/* ---------------------------------------------------------------- */
/* Hero — reference measures a 581px-tall content band on a left-to-right
deep-blue gradient (rgb(15,49,78) -> rgb(30,101,160)). That gradient is
subtle enough to read as a flat field but gives the panel direction. */
.qv-modern .elementor-top-section.qv-hero {
position: relative;
background: #fff !important;
background-image: none !important;
overflow: hidden;
display: flex;
align-items: center;
min-height: 0;
padding-top: 48px !important;
padding-bottom: 56px !important;
border-bottom: 1px solid var(--qv-border);
}
.qv-modern .elementor-top-section.qv-hero > .elementor-container {
width: 100%;
}
/* The hero's right-hand column carries a builder-set frame (transparent
fill + drop shadow) around the Lottie panel. Until the Lottie player
hydrates, that frame paints as a solid purple rectangle with only the
Apply button inside. Kill the frame and hide the empty Lottie host so
the column is just the navy hero field. */
.qv-modern .elementor-top-section.qv-hero .elementor-column > .elementor-widget-wrap,
.qv-modern .elementor-top-section.qv-hero .elementor-column > .elementor-element-populated {
border: 0 !important;
box-shadow: none !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
.qv-modern .elementor-top-section.qv-hero .elementor-column > .elementor-widget-wrap > .elementor-background-overlay,
.qv-modern .elementor-top-section.qv-hero .elementor-column > .elementor-element-populated > .elementor-background-overlay {
display: none !important;
}
.qv-modern .elementor-top-section.qv-hero .premium-lottie-animation {
position: relative;
display: block;
width: min(420px, 100%);
max-width: 100%;
margin: 0 auto;
z-index: 1;
overflow: visible;
background: transparent !important;
background-color: transparent !important;
opacity: 1 !important;
visibility: visible !important;
aspect-ratio: 1 / 1;
}
/* Static Covered California mark so the right column is never blank
while the Lottie player is still lazy-loading. */
.qv-modern .elementor-top-section.qv-hero .premium-lottie-animation:not(:has(svg)):not(:has(canvas))::after {
content: "";
display: block;
width: 100%;
height: 100%;
min-height: 220px;
background-color: var(--qv-navy);
-webkit-mask: url("/wp-content/uploads/2024/01/cc_icon.svg") center / contain no-repeat;
mask: url("/wp-content/uploads/2024/01/cc_icon.svg") center / contain no-repeat;
}
.qv-modern .elementor-top-section.qv-hero .premium-lottie-animation > a {
position: absolute;
inset: 0;
z-index: 2;
}
.qv-modern .elementor-top-section.qv-hero .premium-lottie-animation svg,
.qv-modern .elementor-top-section.qv-hero .premium-lottie-animation canvas {
display: block;
margin: 0 auto;
width: 100% !important;
max-width: 100%;
height: auto !important;
}
.qv-modern .elementor-top-section.qv-hero .premium-lottie-animation svg ~ svg,
.qv-modern .elementor-top-section.qv-hero .premium-lottie-animation canvas ~ canvas {
display: none !important;
}
/* Recolor the Covered California Lottie to brand blue #2596be.
JSON fills are also updated; this keeps SVG output in sync if a
cached player still paints the old indigo. */
.qv-modern .qv-hero .premium-lottie-animation svg path,
.qv-modern .qv-hero .premium-lottie-animation svg g,
body.page-id-329 .premium-lottie-animation svg path,
body.page-id-329 .premium-lottie-animation svg g {
fill: #2596be !important;
}
.qv-modern .elementor-top-section.qv-hero .elementor-widget-premium-lottie {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
min-height: 360px;
overflow: visible;
}
@media (max-width: 767px) {
.qv-modern .elementor-top-section.qv-hero .elementor-widget-premium-lottie {
min-height: 220px;
}
}
/* Ring lives on the Lottie itself (not the hero section) so it stays
centered on the logo regardless of column width or the CTA below. */
.qv-modern .elementor-top-section.qv-hero::before {
display: none !important;
}
/* Decorative ring is a real element (.qv-hero-ring) placed on the logo. */
.qv-modern .elementor-top-section.qv-hero .premium-lottie-animation::before {
display: none !important;
}
.qv-modern .elementor-top-section.qv-hero .qv-hero-ring {
position: absolute;
border-radius: 50%;
border: 3px solid rgba(37, 150, 190, .55);
box-sizing: border-box;
pointer-events: none;
z-index: 3;
}
.qv-modern .elementor-top-section.qv-hero > .elementor-background-overlay {
display: none !important;
}
.qv-modern .elementor-top-section.qv-hero .elementor-container {
position: relative;
z-index: 1;
}
/* H1 — reference: 60px, line-height 60px (exactly 1.0), weight 700,
held to a 581px column so it breaks into short, deliberate lines
instead of running the full container width. */
/* !important is required on these specific properties only: Elementor's
generated per-page stylesheet (post-8.css) carries ID-scoped rules
(.elementor-8 .elementor-element.elementor-element- ...) that
otherwise win the cascade and hold the H1 at 39px/64px/600. */
.qv-modern .elementor-top-section.qv-hero h1.elementor-heading-title {
color: var(--qv-heading) !important;
font-size: var(--qv-fs-h1) !important;
line-height: var(--qv-lh-h1) !important;
font-weight: var(--qv-fw-h1) !important;
letter-spacing: -.02em;
text-align: left !important;
max-width: var(--qv-hero-col);
margin-bottom: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.qv-modern .elementor-top-section.qv-hero h1 .qv-hero-heading {
display: block;
font-size: inherit !important;
line-height: inherit !important;
font-weight: inherit !important;
color: inherit;
}
/* Second line of the H1 ("Serving the Central Valley") — a true
subheading: smaller, lighter, not shouting with the H1. */
.qv-modern .elementor-top-section.qv-hero h1 .qv-hero-subhead {
display: block;
font-size: 22px !important;
line-height: 1.35 !important;
font-weight: 400 !important;
letter-spacing: .04em;
text-transform: none;
color: var(--qv-muted) !important;
}
/* Supporting line under the subheading ("Get Free Help…"). */
.qv-modern .elementor-top-section.qv-hero .elementor-widget-heading h2.elementor-heading-title {
color: var(--qv-muted) !important;
font-weight: 400 !important;
font-size: 16px !important;
line-height: 24px !important;
text-align: left !important;
max-width: var(--qv-hero-col);
margin: 0 0 20px;
}
/* The hero's sub-headline sat indented relative to the H1 because its
own widget carries left padding from the page builder — zero it so
both start on the same optical left edge, as in the reference. */
.qv-modern .elementor-top-section.qv-hero .elementor-widget-heading > .elementor-widget-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
.qv-modern .elementor-top-section.qv-hero p {
color: var(--qv-muted);
}
/* Quick-link tiles inside the hero — flattened from elevated glass
cards into simple flat pill buttons in a single row (reference-style
restraint: plain white pills on the dark hero, no blur/shadow/hover
lift theatrics). image-box markup is unchanged — same 4 real links,
same labels/icons — only the container styling is simplified. */
.qv-modern .elementor-top-section.qv-hero .elementor-widget-image-box {
height: 100%;
}
/* Hero quick-link tiles — reference measures 160x144 squarish white
tiles at a tight 6px radius, 20px apart, label 14px/500 in brand
blue. Min-height rather than fixed height so longer two-line labels
in our own copy don't clip. */
.qv-modern .elementor-top-section.qv-hero .elementor-widget-image-box > .elementor-widget-container {
height: 100%;
min-height: 144px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: var(--qv-navy-light);
border-radius: var(--qv-radius-lg) !important;
padding: 16px 12px !important;
box-shadow: none !important;
border: 1px solid var(--qv-border);
transition: border-color .15s ease;
text-align: center;
}
.qv-modern .elementor-top-section.qv-hero .elementor-widget-image-box:hover > .elementor-widget-container {
border-color: var(--qv-cyan);
background: #fff;
}
.qv-modern .elementor-top-section.qv-hero .elementor-image-box-img {
max-width: 34px;
margin: 0 auto;
}
.qv-modern .elementor-top-section.qv-hero .elementor-image-box-content {
margin: 0;
}
.qv-modern .elementor-top-section.qv-hero .elementor-image-box-title {
color: var(--qv-navy);
font-weight: var(--qv-nav-fw);
font-size: var(--qv-nav-fs);
line-height: 1.35;
margin: 0;
}
.qv-modern .elementor-top-section.qv-hero .elementor-image-box-title a {
color: inherit;
}
/* Hero side panel: Lottie + Apply button stacked and centered together. */
@media (min-width: 768px) {
.qv-modern .elementor-top-section.qv-hero > .elementor-container {
display: flex;
align-items: center;
gap: 24px;
}
.qv-modern .elementor-top-section.qv-hero > .elementor-container > .elementor-column {
width: 50% !important;
max-width: 50% !important;
flex: 1 1 0;
min-width: 0;
}
}
.qv-modern .elementor-top-section.qv-hero > .elementor-container > .elementor-column:last-child {
position: relative;
}
.qv-modern .elementor-top-section.qv-hero > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 12px;
}
.qv-modern .elementor-top-section.qv-hero .elementor-widget-image-box > .elementor-widget-container {
position: relative;
}
.qv-modern .elementor-top-section.qv-hero > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap > .elementor-widget-premium-lottie,
.qv-modern .elementor-top-section.qv-hero > .elementor-container > .elementor-column:last-child > .elementor-widget-wrap > .elementor-widget-button {
width: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
align-self: center;
}
.qv-modern .elementor-top-section.qv-hero .elementor-widget-button .elementor-button-wrapper {
display: flex;
justify-content: center;
}
.qv-modern .elementor-top-section.qv-hero .elementor-widget-button > .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
}
.qv-modern .elementor-top-section.qv-hero a.elementor-button {
background: var(--qv-navy) !important;
color: #fff !important;
box-shadow: none;
border: none !important;
margin: 0 auto;
}
.qv-modern .elementor-top-section.qv-hero a.elementor-button:hover {
background: var(--qv-navy-dark) !important;
color: #fff !important;
}
/* ---------------------------------------------------------------- */
/* Content sections — cards, icon boxes, feature panels */
/* ---------------------------------------------------------------- */
/* Give every content section consistent generous padding by default;
the hero and a few full-bleed sections override this individually. */
.qv-modern .elementor-top-section:not(.qv-hero):not(:first-of-type):not(:nth-of-type(2)) {
padding-top: var(--qv-section-pad-y);
padding-bottom: var(--qv-section-pad-y);
}
/* A heading section immediately followed by one or more headingless
icon-box "row" sections (see markSectionGroups() in design-refresh.js)
is really one visual group — trim the heading's bottom padding and the
continuation rows' top padding so the whole group reads as a single
section with one card grid, not several stacked sections with huge
gaps between them. */
/* !important here for the same specificity reason as the headings: the
generic section-padding rule above uses several :not() pseudo-classes,
which makes it MORE specific than these group rules — so without it a
card row that should butt up against its heading kept a full 72px of
top padding, leaving a ~220px blank band before the first card. */
.qv-modern .elementor-top-section.qv-section-group-start {
padding-bottom: 36px !important;
}
.qv-modern .elementor-top-section.qv-section-continuation {
padding-top: 0 !important;
}
/* Sections that render no content at all (see markEmptySections() in
design-refresh.js) collapse completely instead of contributing a band
of blank page. */
.qv-modern .elementor-top-section.qv-empty-section,
.qv-modern .e-con.qv-empty-section {
padding-top: 0 !important;
padding-bottom: 0 !important;
min-height: 0 !important;
}
.qv-modern .qv-empty-section > .elementor-container {
min-height: 0 !important;
}
/* Zero the builder's default column padding and widget margins inside a
collapsed section too, otherwise ~50px of blank band survives. */
.qv-modern .qv-empty-section .elementor-column,
.qv-modern .qv-empty-section .elementor-widget-wrap,
.qv-modern .qv-empty-section .elementor-widget,
.qv-modern .qv-empty-section .elementor-widget-container {
padding: 0 !important;
margin: 0 !important;
min-height: 0 !important;
}
.qv-modern .elementor-top-section.qv-section-continuation + .elementor-top-section.qv-section-continuation {
padding-top: 0;
}
@media (max-width: 767px) {
.qv-modern .elementor-top-section.qv-section-group-start {
padding-bottom: 20px !important;
}
}
/* Standard card treatment for icon-box / image-box / CTA / price-table
widgets used as feature cards throughout the page. */
/* Card system — reference cards are near-flat: hairline border, 6px
radius, minimal shadow, and equal height so rows align cleanly. */
.qv-modern .qv-modern-card > .elementor-widget-container,
.qv-modern .elementor-widget-image-box > .elementor-widget-container,
.qv-modern .elementor-widget-call-to-action > .elementor-widget-container,
.qv-modern .elementor-widget-price-table > .elementor-widget-container {
height: 100%;
padding: 24px;
background: var(--qv-card);
border: 1px solid var(--qv-border);
border-radius: var(--qv-radius-lg);
box-shadow: var(--qv-shadow-sm);
transition: box-shadow .18s ease, border-color .18s ease;
}
.qv-modern .qv-modern-card:hover > .elementor-widget-container,
.qv-modern .elementor-widget-image-box:hover > .elementor-widget-container {
box-shadow: var(--qv-shadow);
border-color: var(--qv-navy);
}
/* Equal-height rows: stretch columns so cards in a row match, which is
what keeps the reference's grids reading as tidy bands. */
.qv-modern .elementor-top-section > .elementor-container {
align-items: stretch;
}
.qv-modern .elementor-column > .elementor-widget-wrap {
align-content: flex-start;
}
.qv-modern .elementor-widget-icon-list .elementor-icon-list-icon {
color: var(--qv-indigo);
}
.qv-modern .elementor-view-default .elementor-icon {
color: var(--qv-navy);
}
.qv-modern .qv-on-dark .elementor-view-default .elementor-icon {
color: #fff;
}
.qv-modern .elementor-widget-image-box .elementor-image-box-title {
color: var(--qv-ink-900);
font-weight: 750;
}
.qv-modern .elementor-widget-image img,
.qv-modern .elementor-widget-image-box img {
border-radius: 16px;
}
/* eael-info-box widget (used in "Why Choose Covered California" and
"Why Choose Quote Valley Insurance" sections) — flat card treatment,
consistent with the rest of the flattened palette. */
.qv-modern .elementor-widget-eael-info-box .eael-info-box {
border-radius: var(--qv-radius-lg) !important;
box-shadow: var(--qv-shadow-sm) !important;
}
.qv-modern .elementor-widget-eael-info-box .eael-info-box-content-wrap {
border-radius: var(--qv-radius-lg) !important;
}
/* Trust / partner logo strip */
.qv-modern .qv-logo-strip,
.qv-modern .elementor-widget-image-carousel {
padding-top: 8px;
padding-bottom: 8px;
}
.qv-modern .elementor-widget-image-carousel img {
filter: grayscale(35%);
opacity: .85;
transition: filter .2s ease, opacity .2s ease;
}
.qv-modern .elementor-widget-image-carousel img:hover {
filter: grayscale(0%);
opacity: 1;
}
/* Sections that previously used ad-hoc indigo/cyan gradient
background-images (surveyed: qv-section-3, 10, 12, 14, 17) — flattened
to solid colors (reference-style: flat navy-tinted panel / flat white
/ flat pale panel, no gradients) instead of the old mismatched hues. */
.qv-modern .qv-section-10,
.qv-modern .qv-section-17 {
background: var(--qv-bg-alt) !important;
}
/* Two elementor-widget-image widgets inside this section (the
"Covered California" / "Medicare" split panels) carry their own
Elementor-native gradient "background" style
(linear-gradient(90deg, #4f63f9, #17b8ca)) baked in behind the logo
image — same pattern as the Elementor-native box-shadow found on the
quote-form widget. Flatten to solid navy so no gradient survives
anywhere on the page. */
.qv-modern .qv-section-10 .elementor-widget-image > .elementor-widget-container {
background: var(--qv-navy) !important;
}
.qv-modern .qv-section-11,
.qv-modern .qv-section-12,
.qv-modern .qv-section-14 {
/* Flat light-gray instead of white so this panel still reads as a
distinct band in the page rhythm (reference alternates flat white
and flat light-gray sections rather than a colored gradient).
qv-section-11 ("Helping Californians Find Affordable Health
Insurance") still had its old solid cyan (#17b8ca) background —
the qv-section-N numbering shifted by one position at some point
after this rule was first written; verified directly against the
live DOM rather than assumed. */
background: var(--qv-bg-alt) !important;
}
/* Elementor's own generated per-page stylesheet (post-8.css) also has a
leftover per-widget rule forcing this section's heading to white text,
set back when the section had its old cyan background. .qv-on-dark
can't fix this since it's a more specific ID-scoped Elementor
selector, not something this plugin's CSS originally added. Override
it directly now that the section is flat light gray. */
.qv-modern .qv-section-11 h1.elementor-heading-title,
.qv-modern .qv-section-11 h2.elementor-heading-title,
.qv-modern .qv-section-11 h3.elementor-heading-title {
color: var(--qv-ink-900) !important;
}
.qv-modern .qv-section-11 > .elementor-background-overlay,
.qv-modern .qv-section-12 > .elementor-background-overlay,
.qv-modern .qv-section-14 > .elementor-background-overlay,
.qv-modern .qv-section-10 > .elementor-background-overlay,
.qv-modern .qv-section-17 > .elementor-background-overlay {
display: none !important;
}
/* "About Quote Valley Insurance" section (qv-section-13) — this was the
original readability bug: dark navy headings on a solid indigo/purple
background. Flat navy fill (matching the reference site's flat dark
panels, no gradient) and forced light text (also handled generically
by .qv-on-dark, this is belt and suspenders since it's prominent). */
.qv-modern .qv-section-13 {
background: var(--qv-navy) !important;
}
.qv-modern .qv-section-13 .elementor-heading-title,
.qv-modern .qv-section-13 h1,
.qv-modern .qv-section-13 h2,
.qv-modern .qv-section-13 h3 {
color: #fff !important;
}
.qv-modern .qv-section-13 p,
.qv-modern .qv-section-13 .elementor-widget-text-editor,
.qv-modern .qv-section-13 li {
color: rgba(255, 255, 255, .86) !important;
}
.qv-modern .qv-section-13 strong,
.qv-modern .qv-section-13 b {
color: #fff !important;
}
/* Quote form section (qv-section-17) contact-info tiles */
.qv-modern .qv-section-17 .elementor-widget-icon-box > .elementor-widget-container {
background: rgba(255, 255, 255, .55);
border: 1px solid rgba(37, 150, 190, .18);
}
/* ---------------------------------------------------------------- */
/* Buttons (site-wide, outside hero) */
/* ---------------------------------------------------------------- */
/* Button system — one consistent control: 40px tall, 24px side padding,
pill radius, 14px/600, matching the reference's measured CTA. */
.qv-modern a.elementor-button,
.qv-modern button.elementor-button,
.qv-modern input[type="submit"],
.qv-modern input.wpcf7-submit {
min-height: var(--qv-btn-h);
display: inline-flex;
align-items: center;
justify-content: center;
border: 0 !important;
border-radius: var(--qv-radius-pill) !important;
padding: 0 var(--qv-btn-pad-x) !important;
background: var(--qv-navy) !important;
color: #fff !important;
font-size: var(--qv-btn-fs);
font-weight: var(--qv-btn-fw);
letter-spacing: .01em;
box-shadow: none;
transition: background .15s ease;
}
.qv-modern a.elementor-button:hover,
.qv-modern button.elementor-button:hover,
.qv-modern input[type="submit"]:hover,
.qv-modern input.wpcf7-submit:hover {
background: var(--qv-navy-dark) !important;
color: #fff !important;
}
.qv-modern a.elementor-button.qv-smart-cta {
background: var(--qv-cyan) !important;
color: #fff !important;
box-shadow: none;
}
.qv-modern a.elementor-button.qv-smart-cta:hover {
background: #1298a8 !important;
}
.qv-modern a.elementor-button.qv-smart-cta:hover {
filter: brightness(1.05);
color: #fff !important;
}
/* ---------------------------------------------------------------- */
/* Forms (Contact Form 7 + Elementor forms) */
/* ---------------------------------------------------------------- */
.qv-modern form.wpcf7-form,
.qv-modern .elementor-form {
float: none;
width: 100%;
}
.qv-modern form.wpcf7-form input,
.qv-modern form.wpcf7-form select,
.qv-modern form.wpcf7-form textarea,
.qv-modern .elementor-form input,
.qv-modern .elementor-form select,
.qv-modern .elementor-form textarea {
box-sizing: border-box;
float: none;
width: 100%;
max-width: 100%;
border: 1px solid var(--qv-border) !important;
border-radius: var(--qv-radius-lg);
background: #fff;
color: var(--qv-ink) !important;
font-size: var(--qv-fs-body);
box-shadow: none;
transition: border-color .18s ease, box-shadow .18s ease;
}
.qv-modern form.wpcf7-form input,
.qv-modern form.wpcf7-form select,
.qv-modern .elementor-form input,
.qv-modern .elementor-form select {
min-height: var(--qv-input-h);
}
.qv-modern form.wpcf7-form textarea,
.qv-modern .elementor-form textarea {
min-height: 140px;
padding: 12px !important;
}
.qv-modern form.wpcf7-form input:focus,
.qv-modern form.wpcf7-form select:focus,
.qv-modern form.wpcf7-form textarea:focus,
.qv-modern .elementor-form input:focus,
.qv-modern .elementor-form select:focus,
.qv-modern .elementor-form textarea:focus {
border-color: var(--qv-indigo) !important;
outline: none;
box-shadow: 0 0 0 4px rgba(37, 150, 190, .14);
}
.qv-modern form.wpcf7-form .full p label {
color: var(--qv-ink) !important;
font-weight: 650;
}
.qv-modern .full,
.qv-modern .half-l,
.qv-modern .half-r,
.qv-modern .half-l .half-ll,
.qv-modern .half-l .half-lr {
box-sizing: border-box;
}
/* Quote-request form card (qv-section-17) gets its own elevated card
treatment instead of a flat panel. */
/* Only the OUTER wrapper gets the card treatment — applying it to both
the wrapper AND the