/*! * WSH Hawaiʻi Rebate Finder — front-end styles (CCMAC design system). * Tokens from the climate.hawaii.gov style guide. Scoped under .wsh-rbf; styles ONLY the * plugin's own components — no site header/footer/dividers (the live theme provides chrome). * Sharp corners, flat fills, no shadows. Poppins primary / Roboto fallback. */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;800&family=Roboto:wght@400;500;700&display=swap'); .wsh-rbf { --rbf-teal: #66d3d1; --rbf-navy: #051421; --rbf-ink: #333333; --rbf-white: #ffffff; --rbf-gray: #f5f5f5; --rbf-line: #d7dcde; --rbf-xs: .44rem; --rbf-sm: .67rem; --rbf-md: 1rem; --rbf-lg: 1.5rem; --rbf-xl: 2.25rem; --rbf-2xl: 3.38rem; --rbf-3xl: 5.06rem; font-family: 'Poppins', 'Roboto', sans-serif; color: var(--rbf-ink); line-height: 1.55; max-width: 980px; margin: 0 auto; } .wsh-rbf *, .wsh-rbf *::before, .wsh-rbf *::after { box-sizing: border-box; } .wsh-rbf h1, .wsh-rbf h2, .wsh-rbf h3 { font-family: 'Poppins', 'Roboto', sans-serif; } .wsh-rbf h2 { font-size: 1.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--rbf-navy); margin: 0 0 var(--rbf-sm); line-height: 1.2; } .wsh-rbf h1 { font-size: 1.9rem; font-weight: 800; text-transform: uppercase; color: var(--rbf-navy); margin: 0 0 var(--rbf-sm); } .wsh-rbf-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rbf-navy); margin-bottom: var(--rbf-sm); } .wsh-rbf-sub { color: var(--rbf-ink); font-size: .98rem; margin-bottom: var(--rbf-lg); max-width: 62ch; } .wsh-rbf a { color: var(--rbf-navy); } .wsh-rbf a:hover { color: var(--rbf-teal); } /* progress rail */ .wsh-rbf-rail { display: flex; gap: var(--rbf-xs); margin: 0 0 var(--rbf-lg); flex-wrap: wrap; } .wsh-rbf-step { flex: 1; min-width: 84px; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rbf-ink); padding: var(--rbf-sm) var(--rbf-md); background: var(--rbf-gray); border: 1px solid var(--rbf-line); display: flex; align-items: center; gap: var(--rbf-xs); } .wsh-rbf-step .n { width: 18px; height: 18px; display: grid; place-items: center; font-size: .62rem; background: var(--rbf-white); border: 1px solid var(--rbf-line); color: var(--rbf-navy); flex: none; } .wsh-rbf-step.is-active { background: var(--rbf-navy); color: var(--rbf-white); border-color: var(--rbf-navy); } .wsh-rbf-step.is-active .n { background: var(--rbf-teal); color: var(--rbf-navy); border-color: var(--rbf-teal); } .wsh-rbf-step.is-done { background: var(--rbf-teal); color: var(--rbf-navy); border-color: var(--rbf-teal); } .wsh-rbf-step.is-done .n { background: var(--rbf-navy); color: var(--rbf-white); border-color: var(--rbf-navy); } .wsh-rbf-card { background: var(--rbf-white); border: 1px solid var(--rbf-line); padding: var(--rbf-xl); } .wsh-rbf-screen { display: none; } .wsh-rbf-screen.is-on { display: block; } /* applicant options */ .wsh-rbf-opts { display: grid; gap: var(--rbf-md); } .wsh-rbf-opts.two { grid-template-columns: 1fr 1fr; } .wsh-rbf-opt { text-align: left; border: 2px solid var(--rbf-line); background: var(--rbf-white); padding: var(--rbf-md); cursor: pointer; transition: border-color .12s, background .12s; font: inherit; color: var(--rbf-ink); display: flex; gap: var(--rbf-md); align-items: flex-start; } .wsh-rbf-opt:hover { border-color: var(--rbf-teal); } .wsh-rbf-opt.is-sel { border-color: var(--rbf-teal); background: rgba(102,211,209,.1); } .wsh-rbf-opt .ico { font-size: 1.4rem; line-height: 1; flex: none; } .wsh-rbf-opt b { display: block; font-size: .98rem; font-weight: 600; color: var(--rbf-navy); margin-bottom: 2px; } .wsh-rbf-opt small { color: var(--rbf-ink); font-size: .82rem; } /* fields */ .wsh-rbf-field { margin-bottom: var(--rbf-md); } .wsh-rbf-field > label { display: block; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rbf-navy); margin-bottom: var(--rbf-xs); } .wsh-rbf-hint, .wsh-rbf-source { color: #6a7378; font-size: .78rem; margin-top: var(--rbf-xs); } .wsh-rbf-source b { color: var(--rbf-navy); } .wsh-rbf select { appearance: none; width: 100%; padding: var(--rbf-sm) var(--rbf-md); border: 2px solid var(--rbf-teal); border-radius: 0; background: var(--rbf-white); font: inherit; font-size: .95rem; color: var(--rbf-navy); cursor: pointer; } .wsh-rbf select:focus { outline: none; border-color: var(--rbf-navy); } /* chips */ .wsh-rbf-chiprow { display: flex; gap: var(--rbf-sm); flex-wrap: wrap; } .wsh-rbf-chip { display: inline-block; border: 2px solid var(--rbf-line); background: var(--rbf-white); padding: var(--rbf-sm) var(--rbf-md); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; color: var(--rbf-navy); text-decoration: none; } .wsh-rbf-chip:hover { border-color: var(--rbf-teal); } .wsh-rbf-chip.is-sel { background: var(--rbf-navy); color: var(--rbf-white); border-color: var(--rbf-navy); } .wsh-rbf-derived { background: rgba(102,211,209,.14); border-left: 4px solid var(--rbf-teal); padding: var(--rbf-sm) var(--rbf-md); font-size: .85rem; color: var(--rbf-navy); font-weight: 600; margin-top: var(--rbf-xs); } /* nav + buttons (flat, sharp, no shadow) */ .wsh-rbf-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--rbf-lg); gap: var(--rbf-md); } .wsh-rbf-btn { display: inline-block; border: 2px solid transparent; border-radius: 0; font: inherit; font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; padding: var(--rbf-sm) var(--rbf-lg); cursor: pointer; transition: background .12s, color .12s; text-decoration: none; text-align: center; } .wsh-rbf-btn.primary { background: var(--rbf-teal); color: var(--rbf-navy); border-color: var(--rbf-teal); } .wsh-rbf-btn.primary:hover { background: var(--rbf-navy); color: var(--rbf-teal); border-color: var(--rbf-navy); } .wsh-rbf-btn.secondary { background: var(--rbf-white); color: var(--rbf-navy); border-color: var(--rbf-navy); } .wsh-rbf-btn.secondary:hover { background: var(--rbf-navy); color: var(--rbf-white); } .wsh-rbf-btn:disabled { opacity: .35; cursor: not-allowed; } /* results + program cards */ .wsh-rbf-resbar { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--rbf-md); margin-bottom: var(--rbf-md); border-bottom: 2px solid var(--rbf-teal); flex-wrap: wrap; gap: var(--rbf-sm); } .wsh-rbf-resbar .count { font-size: .9rem; color: var(--rbf-ink); } .wsh-rbf-resbar .count b { color: var(--rbf-navy); font-size: 1.15rem; } .wsh-rbf-reset { font-size: .82rem; color: var(--rbf-navy); background: none; border: none; cursor: pointer; font-weight: 700; } .wsh-rbf-reset:hover { color: var(--rbf-teal); } .wsh-rbf-prog { display: block; border: 1px solid var(--rbf-line); background: var(--rbf-white); padding: var(--rbf-md); margin-bottom: var(--rbf-sm); text-decoration: none; color: inherit; transition: border-color .12s; } .wsh-rbf-prog:hover { border-color: var(--rbf-teal); } .wsh-rbf-prog .top { display: flex; justify-content: space-between; gap: var(--rbf-md); align-items: flex-start; } .wsh-rbf-prog h3 { font-size: 15px; font-weight: 600; color: var(--rbf-navy); margin: 0; } .wsh-rbf-prog .agency { color: #6a7378; font-size: .82rem; margin: var(--rbf-xs) 0; } .wsh-rbf-snippet { font-size: .82rem; color: var(--rbf-ink); margin: var(--rbf-xs) 0 var(--rbf-sm); } .wsh-rbf .tags { display: flex; gap: var(--rbf-xs); flex-wrap: wrap; margin-top: var(--rbf-xs); } .wsh-rbf .tag { font-size: .66rem; font-weight: 700; letter-spacing: .03em; padding: 3px 8px; background: var(--rbf-gray); color: var(--rbf-navy); text-transform: uppercase; } .wsh-rbf .tag.cat { background: rgba(102,211,209,.18); color: var(--rbf-navy); } .wsh-rbf .tag.island { background: rgba(102,211,209,.18); color: var(--rbf-navy); } .wsh-rbf .tag.live { background: var(--rbf-navy); color: var(--rbf-teal); } .wsh-rbf-empty { padding: var(--rbf-xl); text-align: center; color: #6a7378; border: 1px dashed var(--rbf-line); } .wsh-rbf-disclaimer { margin-top: var(--rbf-md); font-size: .8rem; color: var(--rbf-ink); background: var(--rbf-gray); padding: var(--rbf-sm) var(--rbf-md); border-left: 4px solid var(--rbf-teal); } .wsh-rbf-excluded { font-size: .8rem; color: var(--rbf-navy); margin-top: var(--rbf-md); background: rgba(102,211,209,.12); padding: var(--rbf-sm) var(--rbf-md); border-left: 4px solid var(--rbf-navy); } /* directory: sidebar + accordion + results */ .wsh-rbf-dirhead { margin-bottom: var(--rbf-md); } .wsh-rbf-url { font-family: ui-monospace, monospace; font-size: .72rem; color: var(--rbf-navy); background: var(--rbf-gray); padding: 2px 7px; } .wsh-rbf-layout { display: flex; gap: var(--rbf-lg); align-items: flex-start; } .wsh-rbf-sidebar { flex: 0 0 232px; } .wsh-rbf-results { flex: 1; min-width: 0; } .wsh-rbf-facet { border: 1px solid var(--rbf-line); margin-bottom: var(--rbf-md); background: var(--rbf-white); } .wsh-rbf-facet-head { width: 100%; text-align: left; background: var(--rbf-gray); border: none; border-bottom: 1px solid var(--rbf-line); font: inherit; font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--rbf-navy); padding: var(--rbf-sm) var(--rbf-md); cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .wsh-rbf-facet-head .ind::after { content: '+'; font-weight: 700; color: var(--rbf-teal); } .wsh-rbf-facet.is-open .wsh-rbf-facet-head .ind::after { content: '−'; } .wsh-rbf-facet-body { display: none; padding: var(--rbf-xs) 0; } .wsh-rbf-facet.is-open .wsh-rbf-facet-body { display: block; } .wsh-rbf-facet-link { display: flex; justify-content: space-between; align-items: center; padding: var(--rbf-xs) var(--rbf-md); font-size: .85rem; color: var(--rbf-navy); text-decoration: none; } .wsh-rbf-facet-link:hover { background: rgba(102,211,209,.14); color: var(--rbf-navy); } .wsh-rbf-facet-link.is-active { font-weight: 700; border-left: 3px solid var(--rbf-teal); background: rgba(102,211,209,.1); } .wsh-rbf-facet-link .cnt { font-size: .7rem; color: #6a7378; } .wsh-rbf-facet-note { font-family: 'Poppins', 'Roboto', sans-serif; font-size: .72rem; line-height: 1.4; color: #6a7378; margin: var(--rbf-xs) 0 0; padding: var(--rbf-xs) var(--rbf-md) var(--rbf-sm); } /* detail page — constrained content width */ .wsh-rbf-single { max-width: 760px; } .wsh-rbf-single .wsh-rbf-title { font-size: 1.6rem; font-weight: 700; text-transform: uppercase; color: var(--rbf-navy); margin: var(--rbf-xs) 0 var(--rbf-sm); } .wsh-rbf-crumb { font-size: .78rem; color: #6a7378; margin-bottom: var(--rbf-md); } .wsh-rbf-crumb a { color: var(--rbf-navy); text-decoration: none; font-weight: 600; } .wsh-rbf-crumb a:hover { color: var(--rbf-teal); } .wsh-rbf-terms { margin: var(--rbf-md) 0; } .wsh-rbf-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rbf-md) var(--rbf-xl); margin: var(--rbf-lg) 0; padding: var(--rbf-md) 0; border-top: 1px solid var(--rbf-line); border-bottom: 1px solid var(--rbf-line); } .wsh-rbf-detail-grid .row label { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6a7378; display: block; margin-bottom: 2px; } .wsh-rbf-detail-grid .row p { font-size: .92rem; color: var(--rbf-ink); margin: 0; } .wsh-rbf-line-items { width: 100%; border-collapse: collapse; margin: var(--rbf-md) 0; } .wsh-rbf-line-items th { text-align: left; background: var(--rbf-navy); color: var(--rbf-white); padding: var(--rbf-xs) var(--rbf-sm); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; } .wsh-rbf-line-items td { text-align: left; padding: var(--rbf-xs) var(--rbf-sm); border-bottom: 1px solid var(--rbf-line); font-size: .88rem; } .wsh-rbf-apply { margin: var(--rbf-lg) 0; display: flex; gap: var(--rbf-sm); flex-wrap: wrap; align-items: center; } .wsh-rbf-contact-fallback { background: var(--rbf-gray); padding: var(--rbf-sm) var(--rbf-md); font-weight: 600; color: var(--rbf-navy); border-left: 4px solid var(--rbf-teal); } /* ============================================================================ * Tabbed container ([rebate_finder_tabs]) — climate.hawaii.gov tabbed-box pattern. * ========================================================================== */ .wsh-rbf-tablist { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 3px solid var(--rbf-navy); margin-bottom: var(--rbf-lg); } .wsh-rbf-tab { background: var(--rbf-gray); color: var(--rbf-navy); border: 1px solid var(--rbf-line); border-bottom: none; font-family: 'Poppins', 'Roboto', sans-serif; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; padding: var(--rbf-sm) var(--rbf-lg); cursor: pointer; margin-right: 2px; } .wsh-rbf-tab:hover:not(.is-active) { background: var(--rbf-teal); color: var(--rbf-navy); } .wsh-rbf-tab.is-active { background: var(--rbf-navy); color: var(--rbf-teal); } .wsh-rbf-tabpanel { display: none; } .wsh-rbf-tabpanel.is-active { display: block; } .wsh-rbf-tabwrap > .wsh-rbf-tabpanel > .wsh-rbf { max-width: none; margin: 0; } /* inner shortcode fills the panel */ /* Browse intro message (clear, not an alert box) */ .wsh-rbf-intro { font-family: 'Poppins', 'Roboto', sans-serif; color: var(--rbf-navy); font-size: .98rem; line-height: 1.6; max-width: 70ch; margin: var(--rbf-sm) 0 0; padding-left: var(--rbf-md); border-left: 3px solid var(--rbf-teal); } .wsh-rbf-tablink { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .wsh-rbf-backrow { margin: 0 0 var(--rbf-md); } .wsh-rbf-backrow-bottom { margin: var(--rbf-lg) 0 0; } .wsh-rbf-back { font-size: .8rem; padding: var(--rbf-xs) var(--rbf-md); } /* Related programs */ .wsh-rbf-related { margin-top: var(--rbf-xl); padding-top: var(--rbf-lg); border-top: 2px solid var(--rbf-teal); } .wsh-rbf-related h2 { font-size: 1.15rem; text-transform: uppercase; color: var(--rbf-navy); margin: 0 0 var(--rbf-md); } .wsh-rbf-related-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rbf-sm); } @media (max-width: 760px) { .wsh-rbf-related-grid { grid-template-columns: 1fr; } } /* ============================================================================ * Option B — category-sectioned image cards rendered BELOW the tabbed tool * ([rebate_finder_tabs]). Categories read from wsh_rbf_category. Sharp corners, * flat fills, no shadows, no border-radius; navy/teal/gray tokens only. * ========================================================================== */ /* The tabbed tool and the card section share one wider max-width (clean centered max-width, NOT a break-out hack — if the host content column is narrower than this, the column wins). */ .wsh-rbf.wsh-rbf-tabwrap, .wsh-rbf.wsh-rbf-below { max-width: 1320px; } .wsh-rbf-below { margin-top: var(--rbf-xl); padding-top: var(--rbf-lg); border-top: 3px solid var(--rbf-teal); } .wsh-rbf-below-intro { font-family: 'Poppins', 'Roboto', sans-serif; color: var(--rbf-navy); font-size: .98rem; line-height: 1.6; max-width: 70ch; margin: 0; padding-left: var(--rbf-md); border-left: 3px solid var(--rbf-teal); } /* category jump row (defaults to All) */ .wsh-rbf-jump { display: flex; gap: var(--rbf-sm); flex-wrap: wrap; margin: var(--rbf-lg) 0 0; padding-bottom: var(--rbf-md); border-bottom: 1px solid var(--rbf-line); } .wsh-rbf-jump-btn { border: 1px solid var(--rbf-line); background: var(--rbf-white); border-radius: 0; font: inherit; font-size: .82rem; font-weight: 600; color: var(--rbf-navy); padding: var(--rbf-xs) var(--rbf-md); cursor: pointer; transition: border-color .12s, background .12s, color .12s; } .wsh-rbf-jump-btn:hover { border-color: var(--rbf-teal); } .wsh-rbf-jump-btn.is-active { background: var(--rbf-navy); color: var(--rbf-teal); border-color: var(--rbf-navy); } /* category section + heading */ .wsh-rbf-catsec { margin-top: var(--rbf-xl); } .wsh-rbf-catsec-head { display: flex; align-items: center; gap: var(--rbf-sm); margin-bottom: var(--rbf-md); flex-wrap: wrap; } .wsh-rbf-catsec-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: rgba(102, 211, 209, .22); } .wsh-rbf-catsec-head h3 { font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; color: var(--rbf-navy); margin: 0; } .wsh-rbf-catsec-count { font-size: .8rem; font-weight: 600; color: #6a7378; } /* card grid */ .wsh-rbf-cardrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--rbf-md); } .wsh-rbf-catsec .wsh-rbf-pcard.is-extra { display: none; } .wsh-rbf-catsec.is-expanded .wsh-rbf-pcard.is-extra { display: flex; } .wsh-rbf-pcard { display: flex; flex-direction: column; border: 1px solid var(--rbf-line); background: var(--rbf-white); text-decoration: none; color: inherit; overflow: hidden; transition: border-color .12s; } .wsh-rbf-pcard:hover { border-color: var(--rbf-teal); } .wsh-rbf-card-imgzone { position: relative; aspect-ratio: 16 / 10; background: var(--rbf-gray); border-bottom: 1px solid var(--rbf-line); overflow: hidden; } .wsh-rbf-card-img { width: 100%; height: 100%; object-fit: cover; display: block; } .wsh-rbf-card-imgph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--rbf-gray); } .wsh-rbf-card-imgph span { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6a7378; } .wsh-rbf-card-body { display: flex; flex-direction: column; gap: var(--rbf-xs); padding: var(--rbf-md); flex: 1; } .wsh-rbf-card-title { font-size: .95rem; font-weight: 700; line-height: 1.3; color: var(--rbf-navy); margin: 0; } /* Clamp to 2 lines so cards in a row stay uniform height regardless of description length. */ .wsh-rbf-card-desc { font-size: .8rem; line-height: 1.45; color: #6a7378; margin: 0; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wsh-rbf-card-amt { display: flex; align-items: center; gap: var(--rbf-sm); margin-top: var(--rbf-xs); padding-top: var(--rbf-sm); border-top: 1px solid var(--rbf-gray); font-size: .82rem; font-weight: 700; color: var(--rbf-navy); } /* sharp teal square (tokens forbid border-radius — wireframe's round dot intentionally dropped) */ .wsh-rbf-card-amt-ico { flex: none; width: 18px; height: 18px; display: grid; place-items: center; background: var(--rbf-teal); color: var(--rbf-navy); font-size: .7rem; font-weight: 800; } /* "Show all N …" control */ .wsh-rbf-showmore { margin-top: var(--rbf-md); border: 1px solid var(--rbf-line); background: var(--rbf-white); border-radius: 0; font: inherit; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--rbf-navy); padding: var(--rbf-sm) var(--rbf-lg); cursor: pointer; transition: border-color .12s; } .wsh-rbf-showmore:hover { border-color: var(--rbf-teal); } /* ============================================================================ * Defensive overrides — keep the finder strictly navy/teal even when a theme or * Elementor Global Kit injects an accent color (the staging site's pink brand * accent) onto raw buttons/links. A base button reset neutralizes any injected * fill, then the component classes below re-apply the intended colors. No coral. * ========================================================================== */ .wsh-rbf a, .wsh-rbf a:link, .wsh-rbf a:visited { color: var(--rbf-navy) !important; } .wsh-rbf a:hover, .wsh-rbf a:focus { color: var(--rbf-teal) !important; } /* Neutralize page-builder button fills on EVERY button in the component. */ .wsh-rbf button { background-color: transparent !important; color: var(--rbf-navy) !important; } .wsh-rbf .wsh-rbf-opt { background: var(--rbf-white) !important; color: var(--rbf-ink) !important; } .wsh-rbf .wsh-rbf-opt.is-sel { background: rgba(102, 211, 209, .14) !important; border-color: var(--rbf-teal) !important; } .wsh-rbf .wsh-rbf-opt b { color: var(--rbf-navy) !important; } .wsh-rbf .wsh-rbf-btn.primary { background: var(--rbf-teal) !important; color: var(--rbf-navy) !important; border-color: var(--rbf-teal) !important; } .wsh-rbf .wsh-rbf-btn.primary:hover { background: var(--rbf-navy) !important; color: var(--rbf-teal) !important; border-color: var(--rbf-navy) !important; } .wsh-rbf .wsh-rbf-btn.secondary { background: var(--rbf-white) !important; color: var(--rbf-navy) !important; border-color: var(--rbf-navy) !important; } .wsh-rbf .wsh-rbf-btn.secondary:hover { background: var(--rbf-navy) !important; color: var(--rbf-white) !important; } /* Accordion headers + tabs are