/* Theme Name: Hawaii Virtual Care Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash Template: hello-elementor Author: Elementor Team Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash Description: A plain-vanilla & lightweight theme for Elementor page builder Tags: flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready Version: 2.5.0.1648664395 Updated: 2023-04-24 18:19:55 */ /* =Custom Site-wide Font/Image Style CSS -------------------------------------------------------------- */ .bottomalign .elementor-widget-wrap { flex-direction: column; } .bottomalign .elementor-widget-wrap div:last-child { margin-top: auto; } #footer .phone {color: #fff !important;} .bold {font-weight: bold !important;} .semibold {font-weight: 600 !important;} .normal {font-weight: 400 !important;} .thin {font-weight: 300 !important;} .italic {font-style: italic !important;} .uppercase {text-transform: uppercase !important;} .block {display: block !important;} .sixteen {font-size: 16px !important;} .eighteen {font-size: 18px !important;} .twenty {font-size: 20px !important;} .twentyfour {font-size: 24px !important;} .thirty {font-size: 30px !important;} .forty {font-size: 40px !important;} .fifty {font-size: 50px !important;} .sixty {font-size: 60px !important;} .clicknum {color: inherit !important; text-decoration: none;} .fullwidth {width: 100%;} .black {color: #000 !important;} .white {color: #fff !important;} .blue {color: #052C58 !important;} .maroon {color: #6b0034 !important;} .bluebg {background-color: #052C58 !important;} .maroonbg {background-color: #6b0034 !important;} .graybg {background-color: #f1f1f1 !important;} .block {display: block !important;} .nosidepadding {padding-left: 0 !important; padding-right: 0 !important;} .nopadding {padding: 0 !important;} .nomargin, .nomargin h1, .nomargin h2, .nomargin h3, .nomargin h4 {margin: 0 !important;} .nogap {margin-bottom: -56px;} .margintop {margin-top: 24px !important;} .inline {display: inline !important;} .center {text-align: center; display: block !important;} .lrmargin {margin-left: 12px !important; margin-right: 12px !important;} .three-col-list {-moz-column-count: 3;-webkit-column-count: 3;column-count: 3;} /* Two columns on desktop/laptop, one on tablet and below. Pair with .orangelist on the same text widget. */ @media (min-width: 1025px) { .two-col-list ul { column-count: 2; column-gap: 2.5rem; } .two-col-list ul li { break-inside: avoid; -webkit-column-break-inside: avoid; } } .clearfixspacedouble {width: 100%; margin: 0 auto; height: 80px; clear: both;} .clearfixspace {width: 100%; margin: 0 auto; height: 40px; clear: both;} .clearfix {width: 100%; margin: 0 auto; height: 1px; clear: both;} ul.checklistfa {list-style-type: none !important;} ul.checklistfa li:before {font-family: 'Font Awesome 5 Free'; content: '\f00c'; font-weight: 600 !important; margin: 0 10px 0 -30px;} ul.checklistimg {list-style-type: none; } ul.checklistimg li { line-height: 2; margin-bottom: 6px !important; background-image: url(imageurlhere); background-size: 36px 36px; background-position: top left; position: relative; background-repeat: no-repeat; padding: 0 0 0 40px;} .single-post .elementor-widget-theme-post-content img {margin: 24px 0;} .single-post .elementor-widget-theme-post-content img.aligncenter {margin: 24px auto;} .elementor-widget-container, .entry-summary, .mu_register { overflow-wrap: break-word; } .elementor-widget-container p, .entry-summary p, .comment-content p, .mu_register p { overflow-wrap: break-word; } .elementor-widget-container ul ul, .comment-content ul ul, .elementor-widget-container ol ol, .comment-content ol ol, .elementor-widget-container ul ol, .comment-content ul ol, .elementor-widget-container ol ul, .comment-content ol ul { margin-bottom: 0; } .elementor-widget-text-editor ul, .elementor-widget-text-editor ol, .comment-content ul, .mu_register ul { margin: 0 0 24px 0 !important; } .elementor-widget-container ol, .comment-content ol { list-style: decimal outside; } .elementor-widget-container li, .comment-content li, .mu_register li { margin: 0 0 0 36px; } blockquote, .comment-content blockquote { margin-bottom:36px; padding: 24px; font-style: italic; border-left: 4px solid var( --e-global-color-primary ); } blockquote p:last-child, .comment-content blockquote p:last-child { margin-bottom: 0; } .elementor-widget-container code, .comment-content code { font-family: Consolas, Monaco, Lucida Console, monospace; font-size: 12px; line-height: 2; } #inthead h1 {margin: 0 auto;} .page header .elementor-nav-menu {margin-bottom: 0 !important;} .elementor-accordion .elementor-tab-title {display: flex !important; align-items: center !important;} .su-spoiler-title p {margin: 0;} .su-spoiler-title, .su-spoiler-title h3, .su-spoiler-title h2 {margin: 0; padding: 0; color: var(--e-global-color-primary) !important; font-weight: 400 !important; font-size: 18px !important;} .su-spoiler-title {padding: 30px 50px 30px 15px !Important; background-color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.1); border-radius: 3px; } .su-spoiler-icon { position: absolute; right: 14px !important; left: auto !important; top: 30px !important;} .su-accordion .su-spoiler { margin-bottom: 30px !important; } .su-spoiler.su-spoiler-closed > .su-spoiler-content{ padding: 0px 0 0 0 !important; } .su-spoiler-style-default > .su-spoiler-content { padding: 30px 5% 0 5% !important; } .su-spoiler-icon-plus.su-spoiler-closed .su-spoiler-icon:before { content: "\f078" !important; color: #333 !important;} .su-spoiler-icon-plus .su-spoiler-icon:before { content: "\f077" !important;color: #333 !important;} .dvteamgrid .dv-member-desc { font-style: normal !important;} .dv-panel-inner p {margin: 0 0 24px 0;} a[href="#noclick"]{ pointer-events: none; } /* menu anchor offset */ body:not(.elementor-editor-active) .elementor-widget-menu-anchor { position: relative; z-index: -1; } body:not(.elementor-editor-active) .elementor-menu-anchor:before { content: ""; display: block; height: 180px !important; margin: -180px 0 0 !important; visibility: hidden; pointer-events: none; } .elementor-post-navigation span.elementor-post-navigation__link__next, .elementor-post-navigation span.elementor-post-navigation__link__prev {width: 85%;} .elementor-post-navigation .post-navigation__prev--title {margin-right: 40px;} .elementor-post-navigation .post-navigation__next--title {margin-left: 40px;} .sidebarbtn {background-color: var(--e-global-color-primary); color: #fff !important; padding: 15px 30px;font-size: 15px; text-transform: uppercase; text-decoration: none; border-radius: 4px; display: block; text-align: center; transition: all .2s ease-in-out; line-height: 1.5; font-weight: 400;} .sidebarbtn:hover {background-color: #A4CF5E; color: #fff; transform: scale(1.1);} [type=submit] {border: none;} .grecaptcha-badge {z-index:999;} .tlp-single-container {padding: 60px 15px 40px 15px;} .elementor-kit-141 input[type="submit"] { line-height: 26px !important; letter-spacing: 0 !important; padding: 12px 36px !important; border: none !important;} .elementor-kit-141 input[type=search] {padding: 10px;} /* Gravity Customizations */ .gform_required_legend {display: none !important;} .gform_wrapper input, .gform_wrapper select, .gform_wrapper textarea {padding: 10px !important; border: 1px solid #ccc !important; border-radius: 4px;} .gform_wrapper input[type="submit"] {background-color: var(--e-global-color-primary) !important; color: #fff; padding: 10px 30px !important; border: 0 !important; font-size: 18px; text-transform: uppercase; text-decoration: none; border-radius: 4px; display: inline-block;} .gform_wrapper .gform_footer { padding: 0px !important;} .gform_wrapper .top_label .gfield_label { color: var(--e-global-color-primary) ;} .gform_wrapper input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) {border-radius: 4px;} .search-submit {margin-left: 14px;} .e-n-accordion-item-title {align-items: flex-start !important;} /* Blog Feed */ .elementor-widget-text-editor :is(h2, h3, h4, h5, h6):not(:first-child), .elementor-widget-theme-post-content :is(h2, h3, h4, h5, h6):not(:first-child) { margin-top: 20px; margin-bottom: 20px; } .blog-grid .elementor-widget-heading .elementor-heading-title { display: -webkit-box; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: 0 !important;} /* = Column Shortcode Fix -------------------------------------------------------------- */ .one_half { width: 48% !important; margin-right: 4% !important; } .one_half.last_column { width: 48% !important; margin-right: 0px !important; } .one_third { width: 31% !important; margin-right: 3% !important; } .one_third.last_column { width: 31% !important; margin-right: 0px !important; } .two_third { width: 66% !important; margin-right: 2% !important; } .two_third.last_column { width: 66% !important; margin-right: 0px !important; } .one_fourth { width: 23.5% !important; margin-right: 2% !important; } .one_fourth.last_column { width: 23.5% !important; margin-right: 0px !important; } .three_fourth { width: 74.5% !important; margin-right: 2% !important; } .three_fourth.last_column { width: 74.5% !important; margin-right: 0px !important; } .one_fifth { width: 18.4% !important; margin-right: 2% !important; } .one_fifth.last_column { width: 18.4% !important; margin-right: 0px !important; } .two_fifth { width: 39% !important; margin-right: 2% !important; } .two_fifth.last_column { width: 39% !important; margin-right: 0px !important; } .three_fifth { width: 59% !important; margin-right: 2% !important; } .three_fifth.last_column { width: 59% !important; margin-right: 0px !important; } .four_fifth { width: 79.6% !important; margin-right: 2% !important; } .four_fifth.last_column { width: 79.6% !important; margin-right: 0px !important; } .one_sixth { width: 15% !important; margin-right: 2% !important; } .one_sixth.last_column { width: 15% !important; margin-right: 0px !important; } .five_sixth { width: 82.4% !important;; } /* Maximum width of 1024 pixels. */ @media screen and (max-width: 1024px) { .elementor-post__text { min-height: auto; padding-bottom: 2%;} .elementor-post__read-more { margin: 24px auto; position: relative; bottom: 0px;} body:not(.elementor-editor-active) .elementor-menu-anchor:before { height: 144px !important; margin: -144px 0 0 !important; } } /* Maximum width of 1024 pixels. */ @media screen and (max-width: 1024px) { .logged-in .elementor-location-header {margin-top: 46px;} /* = Column Shortcode Fix for Mobile -------------------------------------------------------------- */ .one_half { width: 100% !important; margin-right: 0% !important; } .one_half.last_column { width: 100% !important; margin-right: 0% !important; } .one_third { width: 100% !important; margin-right: 0% !important; } .one_third.last_column { width: 100% !important; margin-right: 0% !important; } .two_third { width: 100% !important; margin-right: 0% !important; } .two_third.last_column { width: 100% !important; margin-right: 0% !important; } .one_fourth { width: 100% !important; margin-right: 0% !important; } .one_fourth.last_column { width: 100% !important; margin-right: 0% !important; } .three_fourth { width: 100% !important; margin-right: 0% !important; } .three_fourth.last_column { width: 100% !important; margin-right: 0% !important; } .one_fifth { width: 100% !important; margin-right: 0% !important; text-align: center; } .one_fifth.last_column { width: 100% !important; margin-right: 0% !important; text-align: center; } .two_fifth { width: 100% !important; margin-right: 0% !important; } .two_fifth.last_column { width: 100% !important; margin-right: 0% !important; } .three_fifth { width: 100% !important; margin-right: 0% !important; } .three_fifth.last_column { width: 100% !important; margin-right: 0% !important; } .four_fifth { width: 100% !important; margin-right: 0% !important; text-align: center; } .four_fifth.last_column { width: 100% !important; margin-right: 0% !important; text-align: center; } .one_sixth { width: 100% !important; margin-right: 0% !important; } .one_sixth.last_column { width: 100% !important; margin-right: 0% !important; } .three-col-list {-moz-column-count: 1;-webkit-column-count: 1;column-count: 1;} } /* Maximum width of 767 pixels. */ @media screen and (max-width: 767px) { .elementor-text-editor .alignright, .elementor-text-editor .alignleft, .elementor-widget-text-editor .alignright, .elementor-widget-text-editor .alignleft { float: none; margin: 0 auto 14px; display: block;} /* mobile blog nav */ .elementor-post-navigation { flex-direction: column;} .elementor-post-navigation .elementor-post-navigation__link { width: calc(100%) !important;} .elementor-post-navigation span.elementor-post-navigation__link__next { text-align: left !important;} .elementor-post-navigation .elementor-post-navigation__link a { justify-content: center !important;} .elementor-post-navigation .post-navigation__arrow-wrapper { display: none !important;} .elementor-post-navigation span.elementor-post-navigation__link__next, .elementor-post-navigation span.elementor-post-navigation__link__prev { width: 100% !important;} .elementor-post-navigation .elementor-post-navigation__next { padding-top: 14px !important;} .elementor-post-navigation .post-navigation__prev--title {margin-right: 0px;} .elementor-post-navigation .post-navigation__next--title {margin-left: 0px;} } /* HVC specific styling */ /* ============================================================================ HAWAII VIRTUAL CARE — residual custom CSS ---------------------------------------------------------------------------- Everything that CANNOT be set through Elementor's UI. Colors, typography, buttons, cards, grounds, bullets, accordions and section padding now live in Site Settings and on the widgets themselves — do not re-add them here. Consolidated from the original brand-tokens.css + chrome.css. Dropped deliberately: the .hvc-on-dark context system (dark sections are now styled per widget), .hvc-form-spec (placeholder), and the global widget margin reset. ── ACCESSIBILITY CONTRACT ────────────────────────────────────────────────── The original Next.js build enforced these at build time. WordPress does not. These are now rules a human holds: ink on sand 12.67:1 AAA display headlines deep on sand 11.57:1 AAA body copy lagoon on sand 5.26:1 AA secondary copy white on deep 13.10:1 AAA reversed sections coral on sand 2.90:1 FAIL ⚠ CORAL IS NEVER TEXT. Graphic only. ink on coral 4.37:1 UI passes for an icon glyph, FAILS for text sea-glass on sand 2.22:1 FAIL decorative shapes only, never type sea-glass on photo 3.38:1 FAIL ⚠ banned over photography entirely Legibility floor is 14px; the 13px eyebrow is the ONE documented exception. Text over photography needs a 0.85 scrim or it drops below AA. Over photos the eyebrow is white and secondary copy is mist, never sea-glass. ========================================================================== */ /* ── Tokens ──────────────────────────────────────────────────────────────── Aliased to the Elementor globals so Site Settings stays the single source of truth; the hex fallbacks apply only if a global is missing or renamed. VERIFY the --e-global-color-* names against the rendered CSS — Elementor sometimes keeps a generated ID after a global colour is renamed. ------------------------------------------------------------------------- */ :root { /* grounds */ --hvc-sand: var(--e-global-color-hvc_sand, #f6f0e8); --hvc-sand-light: var(--e-global-color-hvc_sand_light, #fbf8f3); /* teal ramp */ --hvc-deep: var(--e-global-color-hvc_deep, #003548); --hvc-deep-teal: var(--e-global-color-hvc_deep_teal, #0f434d); --hvc-lagoon: var(--e-global-color-hvc_lagoon, #2d6c78); --hvc-sea-glass: var(--e-global-color-hvc_sea_glass, #75adad); --hvc-mist: var(--e-global-color-hvc_mist, #aacccb); /* accent — graphic use only, never type on light grounds */ --hvc-coral: var(--e-global-color-hvc_coral, #f25e26); --hvc-coral-soft: var(--e-global-color-hvc_coral_soft, #f5744c); /* type colour */ --hvc-ink: var(--e-global-color-hvc_ink, #102e35); --hvc-font-display: "Figtree", ui-sans-serif, system-ui, sans-serif; --hvc-font-body: "Inter", ui-sans-serif, system-ui, sans-serif; --hvc-radius-card: 24px; --hvc-shell-x: clamp(1.25rem, 5vw, 5.5rem); /* Stacked depth. Elementor's box-shadow UI takes a single shadow, so the four-layer version stays here and is applied via .hvc-shadow-soft. */ --hvc-shadow-soft: 0 1px 2px rgba(16, 46, 53, 0.07), 0 4px 10px rgba(0, 53, 72, 0.07), 0 16px 32px rgba(0, 53, 72, 0.09), 0 36px 64px rgba(0, 53, 72, 0.08); --hvc-edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.92); } /* Optional helper: add this class to any container/image that needs the real stacked shadow rather than Elementor's single-layer approximation. */ .hvc-shadow-soft { box-shadow: var(--hvc-shadow-soft), var(--hvc-edge-light); } /* ── Header residuals ────────────────────────────────────────────────────── Everything else (border, padding, logo size, CTA) is on the widgets. ------------------------------------------------------------------------- */ /* Elementor has no separate style panel for the sticky state. */ .hvc-header.elementor-sticky--effects { box-shadow: 0 8px 28px rgba(0, 53, 72, 0.10); } /* ── Nav residuals ───────────────────────────────────────────────────────── Panel typography, colours, padding and hover are all in the Nav widget's Style tab. These three things are not exposed there. ------------------------------------------------------------------------- */ /* SmartMenus writes an inline min-width on the panels. */ .hvc-nav ul.sub-menu.elementor-nav-menu--dropdown { min-width: 17rem !important; } .hvc-nav ul.sub-menu.elementor-nav-menu--dropdown ul.sub-menu { min-width: 15rem !important; } /* Fold arrow stays on the label's line. */ /*.hvc-nav .elementor-nav-menu--main .sub-arrow { font-size: 0.55rem; margin-left: 0.35rem; opacity: 0.8; } .hvc-nav .elementor-nav-menu--dropdown a.has-submenu { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .hvc-nav .elementor-nav-menu--dropdown .sub-arrow { margin: 0; }*/ /* Third level sits inside the same panel card, indented rather than flown out. */ .hvc-nav .elementor-nav-menu--dropdown .elementor-nav-menu--dropdown { margin: 0.25rem 0 0.25rem 0.75rem; min-width: 15rem; box-shadow: none; border-color: rgba(0, 53, 72, 0.10); } /* ============================================================================ HERO Ported verbatim. The subject is positioned in PERCENTAGES OF THE ART BOX; the art is driven off HEIGHT with aspect-ratio deriving width. Do not substitute pixel values — the geometry was measured against the live site. ⚠ RESOLVE BEFORE SHIPPING: the two art blocks below are alternatives, not a pair. Elementor 4 renders HTML widgets WITHOUT .elementor-widget-container (the widget element IS the art box); earlier versions wrap it. Check which your build emits, keep that block, delete the other. ========================================================================== */ .hvc-hero { position: relative; overflow: hidden; background: var(--hvc-sand); } .hvc-hero.e-con { padding: 0 !important; } .hvc-hero > .e-con-inner, .hvc-hero .e-con-inner { max-width: none; } .hvc-hero-inner { position: relative; width: 100%; } .hvc-hero .elementor-widget-html, .hvc-hero .elementor-widget-html .elementor-widget-container { position: static; } @media (min-width: 768px) { .hvc-hero-inner { display: flex; flex-direction: row; align-items: center; gap: 1rem; } } @media (min-width: 1024px) { .hvc-hero-inner { display: block; height: min(80vh, 920px); min-height: 580px; overflow: hidden; } } /* ── desktop plate — bottom/right anchored, sized off height ──────────────── */ /* BLOCK A — wrapped markup (.elementor-widget-container present) */ .hvc-hero-art { display: none; } @media (min-width: 1024px) { .hvc-hero-art, .hvc-hero .elementor-widget.hvc-hero-art > .elementor-widget-container { display: block; position: absolute; bottom: 0; right: 0; height: 100%; aspect-ratio: 2048 / 1345; width: auto; max-width: 100%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 100%); } .hvc-hero .elementor-widget.hvc-hero-art { position: static; } } /* BLOCK B — Elementor 4 markup (widget element IS the art box) */ .hvc-hero .elementor-widget.hvc-hero-art { display: none; } @media (min-width: 1024px) { .hvc-hero .elementor-widget.hvc-hero-art { display: block; position: absolute; bottom: 0; right: 0; top: auto; left: auto; height: 100%; aspect-ratio: 2048 / 1345; width: auto; max-width: 100%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 100%); mask-image: linear-gradient(to right, transparent 0%, #000 9%, #000 100%); } } .hvc-hero-art img[data-plate], .hvc-hero-plate img[data-plate] { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; } .hvc-hero-art img[data-plate="front"], .hvc-hero-plate img[data-plate="front"] { pointer-events: none; } .hvc-hero-art [data-portrait] { position: absolute; object-fit: contain; left: 49.707%; top: 13.7167%; width: 43.9453%; height: 80.8922%; -webkit-mask-image: linear-gradient(to bottom, #000 90%, rgba(0,0,0,0.35) 96%, transparent 100%); mask-image: linear-gradient(to bottom, #000 90%, rgba(0,0,0,0.35) 96%, transparent 100%); } /* ── portrait plate — 11% top crop, fixed, never vh ───────────────────────── */ /* The art box is either the widget itself (Elementor 4, no wrapper) or its .elementor-widget-container (earlier markup). Both are targeted so the aspect-ratio box exists either way — without it, .hvc-hero-plate has no positioned parent and escapes to cover the whole hero. */ .hvc-hero .elementor-widget.hvc-hero-art-mobile, .hvc-hero .elementor-widget.hvc-hero-art-mobile > .elementor-widget-container { position: relative; margin-inline: auto; aspect-ratio: 1080 / 1202; width: 100%; max-width: 26rem; overflow: hidden; } .hvc-hero-plate { position: absolute; inset-inline: 0; bottom: 0; aspect-ratio: 1080 / 1350; width: 100%; } @media (min-width: 768px) { /* widget-level: sits beside the copy */ .hvc-hero .elementor-widget.hvc-hero-art-mobile { order: 2; width: 42%; max-width: 22rem; flex-shrink: 0; } /* box-level: taller ratio, masks allowed to bleed */ .hvc-hero .elementor-widget.hvc-hero-art-mobile, .hvc-hero .elementor-widget.hvc-hero-art-mobile > .elementor-widget-container { margin-inline: 0; aspect-ratio: 1080 / 1350; overflow: visible; } /* the wrapper, when present, fills the widget rather than constraining it */ .hvc-hero .elementor-widget.hvc-hero-art-mobile > .elementor-widget-container { width: 100%; max-width: none; } .hvc-hero-plate { position: static; height: 100%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 100%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 90%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, #000 13%, #000 100%), linear-gradient(to bottom, transparent 0%, #000 9%, #000 90%, transparent 100%); -webkit-mask-composite: source-in; mask-composite: intersect; } } @media (min-width: 1024px) { .hvc-hero .elementor-widget.hvc-hero-art-mobile { display: none; } } .hvc-hero-plate [data-portrait] { position: absolute; object-fit: contain; left: 19.4444%; top: 25.4222%; width: 75.9259%; height: 73.3333%; -webkit-mask-image: linear-gradient(to bottom, #000 90%, rgba(0,0,0,0.35) 96%, transparent 100%); mask-image: linear-gradient(to bottom, #000 90%, rgba(0,0,0,0.35) 96%, transparent 100%); } /* ── hero copy — normal flow below lg, absolute overlay from lg ───────────── */ .hvc-hero-copy { padding-inline: var(--hvc-shell-x); padding-top: 1.5rem; padding-bottom: 3.5rem; width: 100%; } .hvc-hero-copy-inner { max-width: 34rem; } @media (min-width: 768px) { .hvc-hero-copy { order: 1; min-width: 0; flex: 1; padding-top: 2rem; padding-bottom: 2.5rem; } } @media (min-width: 1024px) { .hvc-hero-copy { position: absolute; top: min(calc(100% * 0.1573), calc(100% - 26rem)); left: clamp(0px, calc((100vw - 1280px) * 0.55), 460px); width: min(52%, 46rem); padding: 0 1.5rem 0 0; z-index: 2; } } @media (min-width: 1280px) { .hvc-hero-copy { width: min(56%, 48rem); padding-right: 2rem; } .hvc-hero-copy-inner { max-width: 41rem; } } /* The hero H1 stays here rather than in global typography because it is overlaid on the art and sized against the plate, not the page. Original value: clamp(2.6rem, 3.4vw, 4.2rem) — pure vw does not respond to browser zoom (WCAG 1.4.4). The rem component below preserves the scaling curve while keeping the text zoomable. */ .hvc-hero .hvc-hero-h1 .elementor-heading-title, .hvc-hero h1 { font-family: var(--hvc-font-display); font-weight: 700; letter-spacing: -0.033em; line-height: 0.98; text-wrap: balance; color: var(--hvc-ink); font-size: clamp(2.6rem, 1.3rem + 1.7vw, 4.2rem); margin: 0; } /* The coral full stop. Graphic, not text — it carries no meaning, so its 2.90:1 against sand is acceptable where a word would not be. */ .hvc-stop { color: var(--hvc-coral); } .hvc-hero .hvc-hero-lead, .hvc-hero .hvc-hero-lead p { margin-top: 0.75rem; max-width: 36rem; font-size: 1.05rem; line-height: 1.375; color: var(--hvc-lagoon); } .hvc-hero .hvc-hero-lead p { margin-bottom: 0; } /* .hvc-hero-features { margin: 1.25rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.375rem; } .hvc-hero-features li { display: flex; align-items: center; gap: 0.75rem; } .hvc-hero-features .chip { display: grid; place-items: center; height: 2.25rem; width: 2.25rem; flex-shrink: 0; border-radius: 999px; } .hvc-hero-features .chip svg { height: 18px; width: 18px; } .hvc-hero-features .chip-deep { background: var(--hvc-deep); color: #fff; } .hvc-hero-features .chip-mist { background: var(--hvc-mist); color: var(--hvc-deep); } /*.hvc-hero-features .chip-coral { background: var(--hvc-coral); color: var(--hvc-ink); } /* glyph only — 4.37:1 */ /*.hvc-hero-features span:last-child { font-size: 0.95rem; font-weight: 700; color: var(--hvc-ink); } */ .hvc-hero-cta { margin-top: 1.5rem; } .hvc-hero-cta .elementor-widget-button.hvc-btn-primary .elementor-button { padding: 0.875rem 1.75rem; font-size: 0.875rem; letter-spacing: 0.12em; } .hvc-hero-cta a.hvc-hero-textlink { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875rem; font-weight: 600; color: var(--hvc-deep); text-decoration: underline; text-decoration-color: var(--hvc-coral); text-decoration-thickness: 2px; text-underline-offset: 6px; } /* the plates breathe — 1.2% over 28s */ .hvc-hero-shapes { filter: brightness(1.035) saturate(1.05); animation: hvc-shape-breathe 28s ease-in-out infinite alternate; will-change: transform; } @keyframes hvc-shape-breathe { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.012) translate3d(0.35%, -0.3%, 0); } } @media (prefers-reduced-motion: reduce) { .hvc-hero-shapes { animation: none; } } /* ============================================================================ COMPONENTS — not expressible through the Elementor UI ========================================================================== */ /* ── Icon chips ───────────────────────────────────────────────────────────── */ /* Round sprite badges on cards and feature rows. Coral chips carry an icon GLYPH only: ink on coral is 4.37:1 — fine for a glyph, never for text. */ .hvc-chip { display: grid; place-items: center; height: 2.75rem; width: 2.75rem; border-radius: 999px; } .hvc-chip svg { height: 20px; width: 20px; } .hvc-chip-deep { background: var(--hvc-deep); } .hvc-chip-mist { background: var(--hvc-mist); } .hvc-chip-coral { background: var(--hvc-coral); } .hvc-chip-sand { background: var(--hvc-sand); } .hvc-chip-sand-light { background: var(--hvc-sand-light); } .hvc-chip-white { background: #fff; } .hvc-chip-fg-white { color: #fff; } .hvc-chip-fg-deep { color: var(--hvc-deep); } .hvc-chip-fg-ink { color: var(--hvc-ink); } .hvc-chip-fg-lagoon { color: var(--hvc-lagoon); } /* ── Composed question mark ───────────────────────────────────────────────── */ /* A "?" whose lower 30% is coral — two clipped copies stacked. */ .hvc-qstop { position: relative; display: inline-block; } .hvc-qstop > span:first-child { clip-path: inset(0 0 30% 0); } .hvc-qstop .hvc-qstop-dot { position: absolute; inset: 0; color: var(--hvc-coral); clip-path: inset(70% 0 0 0); } .hvc-qstop .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* ── Definition list (insurance glossary) ─────────────────────────────────── */ .hvc-deflist { display: grid; gap: 2rem 3rem; margin: 0; max-width: 62rem; } @media (min-width: 768px) { .hvc-deflist { grid-template-columns: 1fr 1fr; } } .hvc-deflist dt { font-size: 1.125rem; font-weight: 700; line-height: 1.556; color: var(--hvc-ink); } .hvc-deflist dd { margin: 0.5rem 0 0; line-height: 1.7; color: var(--hvc-lagoon); } /* ── Comparison table ─────────────────────────────────────────────────────── */ .hvc-table-scroll { overflow-x: auto; } .hvc-table { width: 100%; min-width: 42rem; border-collapse: collapse; text-align: left; } .hvc-table thead th { padding: 1rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; background: var(--hvc-lagoon); } /* The middle column is the one being sold; it gets the darker ground. */ .hvc-table thead th:nth-child(3) { background: var(--hvc-deep); } .hvc-table tbody tr { border-bottom: 1px solid rgba(0, 53, 72, 0.15); } .hvc-table tbody th { padding: 1rem; font-size: 0.875rem; font-weight: 700; color: var(--hvc-ink); } .hvc-table tbody td { padding: 1rem; color: var(--hvc-deep); } .hvc-table tbody td:nth-child(3) { background: var(--hvc-sand); font-weight: 600; } /* ── Pre-numbered step lists ──────────────────────────────────────────────── */ /* ⚠️ NO CSS COUNTER HERE, deliberately. Every ordered list on this site bakes its own "01"…"04" into the content, so a counter() would render the number twice. If a future list needs generated numbering, add a separate class. */ .hvc-steps ol { list-style: none; padding-left: 0; margin: 0; } .hvc-steps ol li { margin-bottom: 1.5rem; color: var(--hvc-deep); line-height: 1.7; } /* ── Grid row ordering ────────────────────────────────────────────────────── */ /* Split `flip`: photo first on desktop, copy first below it. */ .hvc-grid > .e-con { min-width: 0; } @media (min-width: 1025px) { .hvc-grid-flip > .e-con.hvc-col-0 { order: 2; } } .hvc-col .hvc-figure { width: 100%; }