.elementor-10182 .elementor-element.elementor-element-9a0361b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-ccd07e1 *//* ===================================================== HYPERLOCAL LOOP — SUPPORT US PAGE support-us.css HOW TO USE IN ELEMENTOR PRO: Option A: Add via Dashboard > Appearance > Customize > Additional CSS Option B: Enqueue in your child theme functions.php Option C: Paste into Elementor > Site Settings > Custom CSS ===================================================== */ /* ── TOKENS ── */ :root { --hll-navy: #0D1B2A; --hll-red: #C0392B; --hll-red-dark: #96281B; --hll-gold: #D4A843; --hll-cream: #F7F3EC; --hll-white: #FFFFFF; --hll-gray-100: #F2EFE9; --hll-gray-300: #CCC7BE; --hll-gray-600: #6B6560; --hll-gray-900: #1A1614; --hll-font-display: 'Playfair Display', Georgia, serif; --hll-font-body: 'Source Sans 3', 'Source Sans Pro', sans-serif; --hll-radius: 4px; --hll-radius-lg: 10px; --hll-shadow: 0 4px 24px rgba(13,27,42,0.10); --hll-shadow-lg: 0 8px 40px rgba(13,27,42,0.18); --hll-max-w: 1120px; --hll-gap: clamp(1.5rem, 4vw, 2.5rem); } /* ── GOOGLE FONTS import (add to or Elementor font settings) ── */ /* ── BASE ── */ .hll-support-page { font-family: var(--hll-font-body); color: var(--hll-gray-900); line-height: 1.65; background: var(--hll-white); } .hll-support-page *, .hll-support-page *::before, .hll-support-page *::after { box-sizing: border-box; margin: 0; padding: 0; } .hll-support-page h1, .hll-support-page h2, .hll-support-page h3 { font-family: var(--hll-font-display); line-height: 1.2; } .hll-support-page p { margin-bottom: 1rem; } .hll-support-page ul { list-style: none; } /* ── LABEL ── */ .hll-label { display: inline-block; font-family: var(--hll-font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hll-red); margin-bottom: 0.6rem; } .hll-label--light { color: var(--hll-gold); } /* ── SECTION HEADER ── */ .hll-section-header { text-align: center; max-width: 640px; margin: 0 auto 3rem; } .hll-section-header h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; color: var(--hll-navy); margin-bottom: 0.75rem; } .hll-section-header p { color: var(--hll-gray-600); font-size: 1.05rem; margin-bottom: 0; } .hll-section-header--light h2 { color: var(--hll-white); } .hll-section-header--light p { color: rgba(255,255,255,0.75); } /* ── BUTTONS ── */ .hll-btn { display: inline-block; font-family: var(--hll-font-body); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; text-decoration: none; border-radius: var(--hll-radius); padding: 0.85rem 2rem; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; border: 2px solid transparent; text-align: center; } .hll-btn--primary { background: #b88c2e; color: var(--hll-white); border-color: #b88c2e; } .hll-btn--primary:hover { background: #96701f; border-color: #96701f; color: var(--hll-white); } .hll-btn--outline { background: transparent; color: var(--hll-white); border-color: rgba(255,255,255,0.75); } .hll-btn--outline:hover { background: rgba(255,255,255,0.15); border-color: var(--hll-white); color: var(--hll-white); } .hll-btn--outline-light { color: var(--hll-white); border-color: rgba(255,255,255,0.6); } .hll-btn--outline-light:hover { background: rgba(255,255,255,0.15); border-color: var(--hll-white); } .hll-btn--tier { background: var(--hll-navy); color: var(--hll-white); border-color: var(--hll-navy); } .hll-btn--tier:hover { background: #1a2f45; border-color: #1a2f45; } .hll-btn--full { display: block; width: 100%; } /* ── HERO ── */ .hll-hero { background: var(--hll-navy); color: var(--hll-white); text-align: center; padding: clamp(4rem, 10vw, 8rem) clamp(1.5rem, 5vw, 3rem); position: relative; overflow: hidden; border-bottom: 3px solid var(--hll-gold); } .hll-hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 0deg, transparent, transparent 39px, rgba(255,255,255,0.015) 39px, rgba(255,255,255,0.015) 40px ); pointer-events: none; } .hll-hero__eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--hll-gold); margin-bottom: 1rem; position: relative; } .hll-hero__headline { font-size: clamp(2.4rem, 7vw, 5rem); font-weight: 900; letter-spacing: -0.02em; margin-bottom: 1.25rem; text-wrap: balance; position: relative; } .hll-hero__sub { font-size: clamp(1rem, 2vw, 1.2rem); color: rgba(255,255,255,0.8); max-width: 640px; margin: 0 auto 2.5rem; position: relative; } .hll-hero__cta-row { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; position: relative; } /* ── WHY IT MATTERS ── */ .hll-why { background: var(--hll-cream); padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 3rem); border-top: 4px solid var(--hll-red); } .hll-why__inner { max-width: var(--hll-max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--hll-gap) 4rem; align-items: center; } .hll-why__text .hll-label { display: block; } .hll-why__text h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--hll-navy); margin-bottom: 1.25rem; font-weight: 700; } .hll-why__text p { color: var(--hll-gray-600); font-size: 1.05rem; } .hll-why__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .hll-stat { background: var(--hll-white); border-radius: var(--hll-radius-lg); padding: 1.5rem 1rem; text-align: center; box-shadow: var(--hll-shadow); border-top: 3px solid var(--hll-red); } .hll-stat__num { display: block; font-family: var(--hll-font-display); font-size: 2rem; font-weight: 900; color: var(--hll-navy); line-height: 1; margin-bottom: 0.5rem; } .hll-stat__label { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hll-gray-600); } /* ── MEMBERSHIP TIERS ── */ .hll-tiers { padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 3rem); background: var(--hll-white); } .hll-tiers__grid { max-width: var(--hll-max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; } .hll-tier { background: var(--hll-gray-100); border: 2px solid var(--hll-gray-300); border-radius: var(--hll-radius-lg); padding: 2rem 1.5rem; position: relative; transition: box-shadow 0.2s, transform 0.2s; } .hll-tier:hover { transform: translateY(-4px); box-shadow: var(--hll-shadow-lg); } .hll-tier--featured { background: var(--hll-navy); border-color: var(--hll-navy); color: var(--hll-white); transform: translateY(-8px); box-shadow: var(--hll-shadow-lg); } .hll-tier--featured:hover { transform: translateY(-12px); } .hll-tier__popular-tag { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--hll-red); color: var(--hll-white); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3rem 1rem; border-radius: 99px; white-space: nowrap; } .hll-tier__badge { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--hll-red); margin-bottom: 0.75rem; } .hll-tier--featured .hll-tier__badge { color: var(--hll-gold); } .hll-tier__price { font-family: var(--hll-font-display); font-size: 3rem; font-weight: 900; color: var(--hll-navy); line-height: 1; margin-bottom: 1.5rem; } .hll-tier--featured .hll-tier__price { color: var(--hll-white); } .hll-tier__price span { font-size: 1rem; font-weight: 400; font-family: var(--hll-font-body); opacity: 0.7; } .hll-tier__perks { margin-bottom: 2rem; } .hll-tier__perks li { padding: 0.45rem 0; font-size: 0.95rem; border-bottom: 1px solid rgba(0,0,0,0.07); color: var(--hll-gray-900); } .hll-tier--featured .hll-tier__perks li { color: rgba(255,255,255,0.85); border-bottom-color: rgba(255,255,255,0.1); } .hll-tier__perk--muted { opacity: 0.4; } .hll-tiers__note { text-align: center; margin-top: 2rem; font-size: 0.88rem; color: var(--hll-gray-600); max-width: 720px; margin-left: auto; margin-right: auto; } /* ── ONE-TIME DONATION ── */ .hll-donate { background: var(--hll-cream); border-top: 4px solid var(--hll-gold); padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 3rem); } .hll-donate__inner { max-width: var(--hll-max-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: var(--hll-gap) 4rem; align-items: center; } .hll-donate__text .hll-label { display: block; } .hll-donate__text h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); color: var(--hll-navy); margin-bottom: 1.25rem; font-weight: 700; } .hll-donate__text p { color: var(--hll-gray-600); font-size: 1.05rem; } .hll-donate__amounts { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.5rem; } .hll-amount { padding: 0.6rem 1.25rem; border: 2px solid var(--hll-navy); background: transparent; border-radius: var(--hll-radius); font-family: var(--hll-font-body); font-size: 1rem; font-weight: 700; color: var(--hll-navy); cursor: pointer; transition: background 0.15s, color 0.15s; } .hll-amount:hover, .hll-amount--selected { background: var(--hll-navy); color: var(--hll-white); } .hll-amount--custom { background: var(--hll-gray-600); border-color: var(--hll-gray-600); color: var(--hll-white); } .hll-amount--custom:hover { background: var(--hll-navy); border-color: var(--hll-navy); color: var(--hll-white); } .hll-donate__shortcode-placeholder { background: rgba(13,27,42,0.05); border: 1px dashed var(--hll-gray-300); border-radius: var(--hll-radius); padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--hll-gray-600); } .hll-donate__shortcode-placeholder code { display: block; margin-top: 0.5rem; font-family: monospace; background: var(--hll-white); padding: 0.4rem 0.75rem; border-radius: var(--hll-radius); color: var(--hll-navy); border: 1px solid var(--hll-gray-300); } /* ── MLAF MARK (in donate section) ── */ .hll-donate__mlaf-mark { display: flex; align-items: center; gap: 0.9rem; margin-top: 1.5rem; padding: 0.9rem 1.1rem; background: var(--hll-white); border-left: 3px solid var(--hll-red); border-radius: var(--hll-radius); box-shadow: var(--hll-shadow); } .hll-donate__mlaf-mark img { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; display: block; } .hll-donate__mlaf-mark span { font-size: 0.82rem; line-height: 1.5; color: var(--hll-gray-600); } /* ── Fine print under donate button ── */ .hll-donate__fineprint { margin-top: 0.75rem; font-size: 0.8rem; color: var(--hll-gray-600); text-align: center; margin-bottom: 0; } /* ── MEMBER BENEFITS ── */ .hll-benefits { padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 3rem); background: var(--hll-white); } .hll-benefits__grid { max-width: var(--hll-max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .hll-benefit { padding: 1.5rem; border-left: 3px solid var(--hll-red); background: var(--hll-gray-100); border-radius: 0 var(--hll-radius-lg) var(--hll-radius-lg) 0; transition: box-shadow 0.2s; } .hll-benefit:hover { box-shadow: var(--hll-shadow); } .hll-benefit__icon { font-size: 1.75rem; margin-bottom: 0.75rem; line-height: 1; } .hll-benefit h3 { font-size: 1.05rem; font-weight: 700; font-family: var(--hll-font-display); color: var(--hll-navy); margin-bottom: 0.5rem; } .hll-benefit p { font-size: 0.92rem; color: var(--hll-gray-600); margin-bottom: 0; } /* ── TESTIMONIALS ── */ .hll-testimonials { background: var(--hll-navy); padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 3rem); } .hll-testimonials__grid { max-width: var(--hll-max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .hll-quote { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--hll-radius-lg); padding: 2rem; position: relative; } .hll-quote::before { content: '\201C'; position: absolute; top: -0.5rem; left: 1.5rem; font-family: var(--hll-font-display); font-size: 4rem; color: var(--hll-gold); line-height: 1; opacity: 0.6; } .hll-quote p { color: rgba(255,255,255,0.85); font-size: 0.97rem; font-style: italic; margin-bottom: 1rem; padding-top: 1rem; } .hll-quote footer { font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; color: var(--hll-gold); text-transform: uppercase; } /* ── CLOSING CTA ── */ .hll-closing-cta { background: var(--hll-red); color: var(--hll-white); text-align: center; padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 3rem); } .hll-closing-cta .hll-btn--primary { background: var(--hll-white); color: var(--hll-red); border-color: var(--hll-white); } .hll-closing-cta .hll-btn--primary:hover { background: var(--hll-cream); border-color: var(--hll-cream); color: var(--hll-red-dark); } .hll-btn--outline-light { color: var(--hll-white); border-color: var(--hll-white); background: transparent; } .hll-btn--outline-light:hover { background: rgba(255,255,255,0.2); border-color: var(--hll-white); } .hll-closing-cta h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 900; margin-bottom: 1rem; } .hll-closing-cta p { font-size: 1.1rem; opacity: 0.9; margin-bottom: 2rem; max-width: 560px; margin-left: auto; margin-right: auto; } /* ── RESPONSIVE ── */ @media (max-width: 900px) { .hll-tiers__grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; } .hll-tier--featured { transform: none; order: -1; } .hll-why__inner, .hll-donate__inner { grid-template-columns: 1fr; } .hll-why__stats { grid-template-columns: repeat(3, 1fr); } .hll-benefits__grid, .hll-testimonials__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .hll-benefits__grid, .hll-testimonials__grid { grid-template-columns: 1fr; } .hll-why__stats { grid-template-columns: 1fr; } .hll-hero__cta-row { flex-direction: column; align-items: center; } .hll-btn { width: 100%; max-width: 320px; } .hll-donate__mlaf-mark { flex-direction: column; text-align: center; align-items: center; } }/* End custom CSS */