@charset "UTF-8"; /* Google Fonts used by the landing page (Oswald for the HEARTS·HANDS·CLT wordmark, Fraunces for serif headlines, Inter for body/UI). Loaded here instead of in so this stylesheet is self-sufficient — header_base.php does not need to know which fonts the landing page wants. Other pages harmlessly receive the same fonts (cached by the browser thereafter). */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700;9..144,900&family=Inter:wght@300;400;500;600;700&family=Oswald:wght@200;300;400;500;600;700&display=swap'); /* ========================================================================== Hearts to Hands CLT — Main-Site Stylesheet -------------------------------------------------------------------------- Public marketing site styles only (home, about, contact, privacy, terms). Layered on top of styles-base.css (which provides typography, glass cards, portal-header, hero-sub, etc.). Anything section-specific lives HERE. ========================================================================== */ /* ── Policy pages (privacy, terms) ───────────────────────────────────────── */ .policy-section { margin-bottom: 2.5rem; } .policy-section h2 { font-size: 1.1rem; font-weight: 700; color: var(--h2h-gold, #E2BB80); border-bottom: 1px solid rgba(226,187,128,.20); padding-bottom: .5rem; margin-bottom: 1rem; } .policy-section p, .policy-section li { font-size: .92rem; line-height: 1.75; color: rgba(233,238,247,.80); } .policy-section ul { padding-left: 1.25rem; } .policy-section li { margin-bottom: .35rem; } .policy-intro { background: rgba(226,187,128,.06); border: 1px solid rgba(226,187,128,.18); border-radius: 10px; padding: 1.25rem 1.5rem; margin-bottom: 2rem; font-size: .88rem; line-height: 1.7; color: rgba(233,238,247,.75); } .policy-meta { font-size: .78rem; color: rgba(233,238,247,.40); border-top: 1px solid rgba(255,255,255,.08); padding-top: 1.5rem; margin-top: 2.5rem; } .section-main .policy-section a, .section-main .policy-intro a, .section-main .policy-meta a { color: var(--h2h-gold, #E2BB80); } .section-main .policy-section a:hover, .section-main .policy-intro a:hover, .section-main .policy-meta a:hover { color: #f5dfa0; } /* ── Quill-generated DB content (admin-editable docs) ────────────────────── */ .ql-db-content { color: rgba(233,238,247,.82); font-size: .92rem; line-height: 1.75; } .ql-db-content h2 { font-size: 1.05rem; font-weight: 700; color: var(--h2h-gold, #E2BB80); border-bottom: 1px solid rgba(226,187,128,.20); padding-bottom: .5rem; margin: 2rem 0 1rem; } .ql-db-content h3 { font-size: .95rem; font-weight: 700; color: rgba(233,238,247,.90); margin: 1.5rem 0 .75rem; } .ql-db-content p { margin-bottom: .85rem; } .ql-db-content ul, .ql-db-content ol { padding-left: 1.35rem; margin-bottom: .85rem; } .ql-db-content li { margin-bottom: .3rem; } .ql-db-content a { color: var(--h2h-gold, #E2BB80); } .ql-db-content strong { color: rgba(233,238,247,.95); } /* ── Terms-specific: SMS box + keyword pills ─────────────────────────────── */ .sms-box { background: rgba(1,174,240,.06); border: 1px solid rgba(1,174,240,.22); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.25rem 0; } .sms-box p, .sms-box li { font-size: .88rem; line-height: 1.75; color: rgba(233,238,247,.80); } .sms-box ul { padding-left: 1.25rem; margin-bottom: 0; } .keyword { display: inline-block; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); border-radius: 6px; padding: 2px 10px; font-weight: 800; font-family: monospace; font-size: 1rem; color: #fff; letter-spacing: .04em; } /* ── Main-site footer ────────────────────────────────────────────────────── Footer styles moved to styles-base.css so the shared site footer (partials/footer_base.php) renders identically across main, fundraiser, and portal. See the ".main-footer" section in styles-base.css. */ /* ── Policy page heading (used in privacy/terms — consolidates the inline style) ── */ .policy-page-title { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: .35rem; } .policy-page-meta { font-size: .8rem; color: rgba(233,238,247,.40); margin-bottom: 2rem; } .policy-intro strong { color: var(--h2h-gold, #E2BB80); } /* ========================================================================== Homepage (index.php) ========================================================================== */ /* ── Universal: section heading (gold Bebas Neue, uppercase) ─────────────── */ .section-h { font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.6rem, 4.5vw, 2.4rem); color: var(--h2h-gold, #E2BB80); letter-spacing: .04em; line-height: 1; text-align: center; margin-bottom: .35rem; } .section-sub { text-align: center; font-size: .85rem; color: rgba(233,238,247,.45); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 2.5rem; } .section-divider { width: 60px; height: 3px; background: linear-gradient(90deg, transparent, var(--h2h-gold, #E2BB80), transparent); margin: 0 auto 2.5rem; border-radius: 2px; } /* ── Reveal-on-scroll (fade + lift) ───────────────────────────────────── */ .reveal-on-scroll { opacity: 0; transform: translateY(28px); transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal-on-scroll { opacity: 1; transform: none; transition: none; } } /* ── Section: About Us (#about) ────────────────────────────────────────── */ /* Section kicker — small, letter-spaced, sits under the rule. Contrasts with the big condensed title. (Reusable: .section-kicker on any section.) */ .section-kicker { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase; margin: 0 0 1.1rem; } .section-kicker-muted { color: rgba(233, 238, 247, .6); } .about-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin: 2.5rem 0; } .about-stat { text-align: center; padding: 1.5rem 1rem; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); } .about-stat-num { font-family: 'Bebas Neue', 'Barlow Condensed', sans-serif; font-size: 2.9rem; line-height: 1; color: #fff; letter-spacing: .01em; } .about-stat-label { margin-top: .55rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; } /* Brand-coloured stat tones (number + label + top accent) */ .about-stat { border-top: 3px solid rgba(255,255,255,.12); } .about-stat--red { border-top-color: var(--h2h-red, #EF0037); } .about-stat--blue { border-top-color: var(--h2h-blue, #01AEF0); } .about-stat--green { border-top-color: var(--h2h-green, #22C55E); } .about-stat--gold { border-top-color: var(--h2h-gold, #E2BB80); } .about-stat--red .about-stat-num, .about-stat--red .about-stat-label { color: var(--h2h-red, #EF0037); } .about-stat--blue .about-stat-num, .about-stat--blue .about-stat-label { color: var(--h2h-blue, #01AEF0); } .about-stat--green .about-stat-num, .about-stat--green .about-stat-label { color: var(--h2h-green, #22C55E); } .about-stat--gold .about-stat-num, .about-stat--gold .about-stat-label { color: var(--h2h-gold, #E2BB80); } .about-founders { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 2rem; align-items: center; padding: 1.5rem; margin-top: 1rem; } @media (max-width: 760px) { .about-founders { grid-template-columns: 1fr; } } .about-founders.no-photo { grid-template-columns: 1fr; } .about-founders.no-photo .about-founders-photo { display: none; } .about-founders-photo img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; border-radius: 14px; display: block; } .about-founders-text h3 { color: #fff; font-size: 1.5rem; margin: .4rem 0 .75rem; } .about-founders-text p { color: rgba(233,238,247,.78); line-height: 1.7; margin-bottom: 1rem; } .about-partners { margin-top: 2.75rem; text-align: center; } .about-partners-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--h2h-gold, #E2BB80); margin-bottom: 1.25rem; } /* Draggable scroll carousel — auto-scrolls (JS), pauses on hover, and can be grabbed/flicked left or right. Native horizontal scroll, scrollbar hidden. */ .partner-marquee { position: relative; overflow-x: auto; overflow-y: hidden; cursor: grab; touch-action: pan-y; /* horizontal handled by the drag JS */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .partner-marquee::-webkit-scrollbar { display: none; } /* WebKit */ .partner-marquee.is-dragging { cursor: grabbing; } .partner-track { display: flex; align-items: center; width: max-content; user-select: none; } /* No tile background. Each logo sits in a fixed, INVISIBLE box (so they stay evenly sized) and is recoloured to solid white at rest, then shows its full colour on hover. Upload BASIC transparent-background logos. */ /* Logos display in their natural colours on a clean white "chip" so mixed logos (white-background, transparent, or full-colour) look uniform and stay legible on the dark band. */ .partner-marquee .partner-logo { flex: 0 0 auto; margin-right: 2.25rem; /* gap between logos */ height: 110px; /* fits a 90px-tall image + 10px padding top/bottom */ display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 12px; padding: 10px 18px; transition: transform .2s ease, box-shadow .2s ease; } .partner-marquee .partner-logo:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.30); } /* Anchor logos link to the partner's site; keep them identical to the plain chips and stop native image-drag from hijacking the carousel grab gesture. */ a.partner-logo { text-decoration: none; -webkit-user-drag: none; } .partner-logo img { height: 90px; /* uniform HEIGHT; width follows the logo's shape (300x180 ⇒ ~150px wide) */ width: auto; max-width: 260px; /* guard against an unusually wide logo */ object-fit: contain; -webkit-user-drag: none; user-select: none; pointer-events: none; /* let drags fall through to the track */ } /* ── Section: Hero (#home) ─────────────────────────────────────────────── */ .hero-home { position: relative; text-align: center; padding: 4rem 1rem 3rem; overflow: hidden; } .hero-home::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 35%, rgba(226,187,128,.15), transparent 70%), radial-gradient(ellipse 40% 30% at 50% 70%, rgba(1,174,240,.08), transparent 70%); pointer-events: none; z-index: 0; } .hero-home > * { position: relative; z-index: 1; } .hero-logo { max-width: 200px; height: auto; margin: 0 auto 1.5rem; display: block; filter: drop-shadow(0 6px 24px rgba(0,0,0,.4)); } @media (min-width: 768px) { .hero-logo { max-width: 280px; } } .hero-wordmark { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.2rem, 7vw, 4rem); letter-spacing: .04em; background: linear-gradient(135deg, #E2BB80 0%, #f5dfa0 50%, #E2BB80 100%); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-bottom: .75rem; text-shadow: 0 0 60px rgba(226,187,128,.30); } .hero-tagline { font-size: clamp(.95rem, 2vw, 1.15rem); color: rgba(233,238,247,.70); font-style: italic; margin-bottom: 2.25rem; } .hero-tagline strong { color: #ef0037; font-style: normal; } .hero-tagline em { color: #01aef0; font-style: normal; } .hero-cta-row { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .hero-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.75rem; border-radius: 999px; font-weight: 700; font-size: .92rem; text-decoration: none; letter-spacing: .02em; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; border: 1.5px solid; white-space: nowrap; } .hero-cta-primary { background: var(--h2h-gold, #E2BB80); color: #070b14; border-color: var(--h2h-gold, #E2BB80); } .hero-cta-primary:hover { background: #f5dfa0; border-color: #f5dfa0; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(226,187,128,.30); color: #070b14; } .hero-cta-secondary { background: transparent; color: var(--h2h-gold, #E2BB80); border-color: rgba(226,187,128,.45); } .hero-cta-secondary:hover { background: rgba(226,187,128,.10); border-color: var(--h2h-gold, #E2BB80); transform: translateY(-2px); color: #f5dfa0; } .hero-scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; margin-top: 3rem; color: rgba(233,238,247,.40); text-decoration: none; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; transition: color .2s ease; } .hero-scroll-cue:hover { color: var(--h2h-gold, #E2BB80); } .hero-scroll-cue .bi { font-size: 1.4rem; animation: bobDown 1.8s ease-in-out infinite; } @keyframes bobDown { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .hero-scroll-cue .bi { animation: none; } } /* ── Section: About (#about) — mission + stats + founders ────────────── */ .about-mission { text-align: center; max-width: 760px; margin: 0 auto 3rem; font-size: clamp(.95rem, 2vw, 1.08rem); line-height: 1.85; color: rgba(233,238,247,.80); } .about-mission strong { color: var(--h2h-gold, #E2BB80); font-weight: 700; } .home-stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin: 0 auto 3.5rem; max-width: 760px; } @media (max-width: 600px) { .home-stat-cards { grid-template-columns: 1fr; gap: 1rem; } } .home-stat { text-align: center; padding: 1.75rem 1rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; position: relative; overflow: hidden; transition: transform .25s ease, border-color .25s ease; } .home-stat:hover { transform: translateY(-4px); border-color: rgba(226,187,128,.30); } .home-stat-icon { font-size: 1.5rem; margin-bottom: .5rem; opacity: .85; } .home-stat-icon.red { color: #ef0037; } .home-stat-icon.gold { color: var(--h2h-gold, #E2BB80); } .home-stat-icon.blue { color: #01aef0; } .home-stat-num { font-family: 'Bebas Neue', sans-serif; font-size: clamp(2.2rem, 6vw, 2.8rem); color: #fff; line-height: 1; margin-bottom: .35rem; letter-spacing: .03em; } .home-stat-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .14em; color: rgba(233,238,247,.55); } .founders-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 760px; margin: 0 auto; } @media (max-width: 600px) { .founders-row { grid-template-columns: 1fr; } } .founder-card { display: flex; gap: 1.25rem; align-items: center; padding: 1.25rem; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; transition: transform .25s ease, border-color .25s ease; } .founder-card:hover { transform: translateY(-3px); border-color: rgba(226,187,128,.30); } .founder-photo { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(226,187,128,.35); flex-shrink: 0; } .founder-info { min-width: 0; } .founder-name { font-weight: 700; font-size: 1rem; color: #fff; margin-bottom: .15rem; } .founder-role { font-size: .8rem; color: var(--h2h-gold, #E2BB80); margin-bottom: .5rem; } .founder-links { display: flex; gap: .65rem; font-size: 1rem; } .founder-links a { color: rgba(233,238,247,.55); text-decoration: none; transition: color .15s ease; } .founder-links a:hover { color: var(--h2h-gold, #E2BB80); } .founder-phone { font-size: .8rem; color: rgba(233,238,247,.70); margin-bottom: .35rem; } /* ── Section: Partners (#partners) — marquee of logos ─────────────────── */ .partner-marquee-wrap { margin: 0 -1rem; padding: 1.5rem 0; position: relative; } .partner-marquee-wrap::before, .partner-marquee-wrap::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 2; } .partner-marquee-wrap::before { left: 0; background: linear-gradient(90deg, #070b14, transparent); } .partner-marquee-wrap::after { right: 0; background: linear-gradient(270deg, #070b14, transparent); } .partner-swiper { padding: .5rem 0; } .partner-swiper .swiper-wrapper { transition-timing-function: linear !important; } .partner-swiper .swiper-slide { width: auto !important; display: flex; align-items: center; justify-content: center; padding: 0 1.25rem; } .partner-logo { max-height: 60px; width: auto; filter: grayscale(70%) brightness(1.4) contrast(.9); opacity: .75; transition: filter .25s ease, opacity .25s ease, transform .25s ease; } .partner-logo:hover { filter: none; opacity: 1; transform: scale(1.08); } @media (max-width: 600px) { .partner-logo { max-height: 48px; } } /* ── Section: Donate (#donate) — three cards ──────────────────────────── */ .donate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin: 0 auto 2.5rem; } @media (max-width: 900px) { .donate-cards { grid-template-columns: 1fr; } } .donate-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 2rem 1.5rem; transition: transform .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; } .donate-cards .donate-card:hover { transform: translateY(-6px); border-color: rgba(226,187,128,.45); background: rgba(255,255,255,.07); box-shadow: 0 16px 38px rgba(0,0,0,.36); } .donate-card-cta i { transition: transform .2s ease; } .donate-card:hover .donate-card-cta i { transform: translateX(4px); } .donate-card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 1rem; } .donate-card-icon.red { background: rgba(239,0,55,.12); color: #ef5570; border: 1px solid rgba(239,0,55,.25); } .donate-card-icon.gold { background: rgba(226,187,128,.12); color: var(--h2h-gold, #E2BB80); border: 1px solid rgba(226,187,128,.30); } .donate-card-icon.blue { background: rgba(1,174,240,.12); color: #01aef0; border: 1px solid rgba(1,174,240,.25); } .donate-card-icon.green{ background: rgba(34,197,94,.12); color: var(--h2h-green, #22C55E); border: 1px solid rgba(34,197,94,.30); } .donate-card h3 { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: .65rem; } .donate-card p { font-size: .88rem; line-height: 1.7; color: rgba(233,238,247,.70); margin-bottom: 1.25rem; } /* The CTA's margin-top:auto pins it to the card bottom, so paragraphs just stack naturally (no flex-grow spreading them apart). */ .donate-ein { font-weight: 700; color: rgba(233,238,247,.85); letter-spacing: .03em; } .donate-card-cta { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem 1.1rem; border-radius: 0.375rem; /* squared-off to match the fundraiser/portal buttons */ font-size: .85rem; font-weight: 600; text-decoration: none; border: 1px solid; transition: all .15s ease; align-self: flex-start; margin-top: auto; /* pin the CTA to the card bottom so buttons align even when blurbs differ in length */ } /* The Donate Funding CTA is a