/* Theme Name: Haven of Heart Child Description: Haven of Heart Homecare – child of Hello Elementor Author: Haven of Heart Homecare Template: hello-elementor Version: 1.0.0 Text Domain: haven-of-heart */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap'); /* ─── TOKENS ──────────────────────────────────────────────── */ :root { --c-purple: #7c3aed; --c-purple-50: #f5f3ff; --c-purple-100: #ede9fe; --c-purple-900: #2e1065; --c-teal: #0d9488; --c-teal-50: #f0fdfa; --c-text: #111827; --c-body: #4b5563; --c-muted: #6b7280; --c-border: #e5e7eb; --c-white: #ffffff; --c-gray-50: #f9fafb; --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --max-w: 1152px; --pad: clamp(16px, 4vw, 32px); --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full:9999px; --sh-sm: 0 1px 3px rgba(0,0,0,.08); --sh-md: 0 4px 12px rgba(0,0,0,.08); --sh-lg: 0 10px 40px rgba(0,0,0,.10); --sh-xl: 0 20px 60px rgba(0,0,0,.12); --grad-hero: linear-gradient(135deg,var(--c-purple-50) 0%,#fff 55%,var(--c-teal-50) 100%); --grad-dark: linear-gradient(135deg,var(--c-purple-900) 0%,#1e1b4b 100%); } /* ─── BASE ────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font);font-size:16px;color:var(--c-text);line-height:1.6;-webkit-font-smoothing:antialiased;margin:0} img{max-width:100%;height:auto;display:block} a{color:var(--c-purple);text-decoration:none;transition:color .2s} a:hover{color:#6d28d9} h1,h2,h3,h4{font-family:var(--font);color:var(--c-text);line-height:1.2;margin:0 0 1rem} h1{font-size:clamp(32px,5vw,48px);font-weight:800;line-height:1.1} h2{font-size:30px;font-weight:700;line-height:1.25} h3{font-size:18px;font-weight:600;line-height:1.4} p{margin:0 0 1rem;line-height:1.7;color:var(--c-body)} /* ─── LAYOUT ──────────────────────────────────────────────── */ .hoh-wrap{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad)} .hoh-sec{padding:80px 0} .hoh-sec-sm{padding:56px 0} .text-center{text-align:center} .text-white{color:#fff!important} /* Grid helpers */ .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .g4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} @media(max-width:1024px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.g4,.g3,.g2{grid-template-columns:1fr}} .split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} .split-rev{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;direction:rtl} .split-rev>*,.split-rev img{direction:ltr} @media(max-width:768px){.split,.split-rev{grid-template-columns:1fr;direction:ltr;gap:32px}} /* ─── SECTION LABELS ──────────────────────────────────────── */ .sec-label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-purple);margin-bottom:8px} .sec-sub{font-size:17px;color:var(--c-muted);line-height:1.6;max-width:580px;margin:0 0 40px} /* ─── NAV ─────────────────────────────────────────────────── */ #hoh-nav{position:fixed;top:0;left:0;right:0;z-index:9999;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--c-border);transition:box-shadow .3s} #hoh-nav.scrolled{box-shadow:var(--sh-md)} .nav-inner{max-width:var(--max-w);margin:0 auto;padding:0 var(--pad);height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px} .nav-logo{display:flex;flex-direction:column;line-height:1;text-decoration:none} .nav-logo-a{font-size:17px;font-weight:800;color:var(--c-text);letter-spacing:-.02em} .nav-logo-b{font-size:11px;font-weight:500;color:var(--c-muted);letter-spacing:.04em} .nav-menu{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0} .nav-menu a{display:block;padding:8px 11px;font-size:14px;font-weight:500;color:var(--c-text);border-radius:var(--r-sm);transition:all .2s;text-decoration:none} .nav-menu a:hover,.nav-menu .current-menu-item>a{color:var(--c-purple);background:var(--c-purple-50)} .nav-menu .menu-item-has-children>a::after{content:' ▾';font-size:10px;opacity:.5} .nav-menu .sub-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:190px;background:#fff;border:1px solid var(--c-border);border-radius:var(--r-md);box-shadow:var(--sh-lg);list-style:none;padding:8px;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s} .nav-menu .menu-item-has-children{position:relative} .nav-menu .menu-item-has-children:hover .sub-menu{opacity:1;visibility:visible;transform:translateY(0)} .nav-menu .sub-menu a{font-size:13px;padding:8px 12px;border-radius:6px} .nav-right{display:flex;align-items:center;gap:16px} .nav-phone{font-size:14px;font-weight:600;color:var(--c-text);text-decoration:none;transition:color .2s} .nav-phone:hover{color:var(--c-purple)} .nav-book{padding:9px 18px;font-size:13px;font-weight:700;background:var(--c-purple);color:#fff;border-radius:var(--r-sm);text-decoration:none;transition:all .2s;border:none;cursor:pointer;font-family:var(--font)} .nav-book:hover{background:#6d28d9;color:#fff;transform:translateY(-1px)} .nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--c-text);font-size:20px} @media(max-width:1024px){ .nav-menu{display:none} .nav-toggle{display:block} .nav-menu.open{display:flex;flex-direction:column;align-items:flex-start;position:fixed;top:72px;left:0;right:0;background:#fff;border-bottom:1px solid var(--c-border);padding:12px;box-shadow:var(--sh-lg);z-index:9998;gap:2px} .nav-menu.open .sub-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;background:var(--c-purple-50);margin-left:16px;margin-top:4px} .nav-right .nav-phone{display:none} } /* ─── BUTTONS ─────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;font-family:var(--font);font-size:15px;font-weight:600;border-radius:var(--r-sm);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:all .2s;line-height:1;white-space:nowrap} .btn-primary{background:var(--c-purple);color:#fff;border-color:var(--c-purple)} .btn-primary:hover{background:#6d28d9;border-color:#6d28d9;color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(124,58,237,.35)} .btn-outline{background:transparent;color:var(--c-purple);border-color:var(--c-purple)} .btn-outline:hover{background:var(--c-purple);color:#fff;transform:translateY(-1px)} .btn-white{background:#fff;color:var(--c-purple);border-color:#fff} .btn-white:hover{background:var(--c-purple-50);color:var(--c-purple)} .btn-outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} .btn-outline-white:hover{background:rgba(255,255,255,.15);border-color:#fff} .btn-lg{padding:14px 32px;font-size:16px} .btn-sm{padding:8px 16px;font-size:13px} .btn-full{width:100%;justify-content:center} /* ─── HERO ────────────────────────────────────────────────── */ .hoh-hero{min-height:100vh;background:var(--grad-hero);display:flex;align-items:center;padding-top:72px;overflow:hidden;position:relative} .hoh-hero::before{content:'';position:absolute;top:-30%;right:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(124,58,237,.05) 0%,transparent 70%);pointer-events:none} .hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:80px 0} .hero-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--c-purple);color:#fff;border-radius:var(--r-full);font-size:12px;font-weight:700;letter-spacing:.03em;margin-bottom:24px} .hero-intro{font-size:18px;color:var(--c-body);line-height:1.7;margin-bottom:32px;max-width:460px} .hero-btns{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:24px} .trust-row{display:flex;gap:24px;flex-wrap:wrap} .trust-item{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--c-muted)} .trust-item i{color:var(--c-teal)} .hero-img-wrap{position:relative} .hero-img-wrap img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-xl);box-shadow:var(--sh-xl)} .float-card{position:absolute;background:#fff;border-radius:var(--r-md);padding:14px 20px;box-shadow:var(--sh-lg);min-width:130px} .float-card-val{font-size:22px;font-weight:800;color:var(--c-text);line-height:1;margin-bottom:2px} .float-card-lbl{font-size:11px;color:var(--c-muted);font-weight:500} .float-1{top:-18px;right:-18px} .float-2{bottom:-18px;left:-18px} @media(max-width:768px){.hero-grid{grid-template-columns:1fr;gap:32px}.hero-img-wrap{display:none}} /* ─── CARDS ───────────────────────────────────────────────── */ .card{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:24px;transition:all .25s} .card:hover{box-shadow:var(--sh-lg);transform:translateY(-2px);border-color:var(--c-purple-100)} .card-icon{width:48px;height:48px;background:var(--c-purple-50);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--c-purple);margin-bottom:16px;font-size:20px} .card h3{font-size:17px;font-weight:700;margin-bottom:8px} .card p{font-size:14px;color:var(--c-muted);line-height:1.6;margin:0} .card ul{list-style:none;padding:0;margin:12px 0 0} .card ul li{font-size:13px;color:var(--c-muted);padding:4px 0 4px 18px;position:relative} .card ul li::before{content:'•';color:var(--c-purple);position:absolute;left:0;font-weight:700} /* ─── SECTION BGs ─────────────────────────────────────────── */ .bg-white{background:#fff} .bg-light{background:var(--c-purple-50)} .bg-gray{background:var(--c-gray-50)} .bg-dark{background:var(--c-purple-900)} /* ─── ICON CIRCLE ─────────────────────────────────────────── */ .icon-circle{width:56px;height:56px;background:var(--c-purple-50);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--c-purple);font-size:22px;margin-bottom:16px;flex-shrink:0} /* ─── WHY ITEMS ───────────────────────────────────────────── */ .why-item{display:flex;gap:16px;align-items:flex-start;padding:20px;background:#fff;border-radius:var(--r-md);border:1px solid var(--c-border);margin-bottom:16px} .why-icon{width:44px;height:44px;background:var(--c-purple-50);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:var(--c-purple);font-size:18px;flex-shrink:0} .why-content h4{font-size:16px;font-weight:700;margin-bottom:4px} .why-content p{font-size:13px;color:var(--c-muted);margin:0;line-height:1.5} /* ─── TESTIMONIALS ────────────────────────────────────────── */ .testimonial{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:28px} .stars{color:#f59e0b;font-size:16px;margin-bottom:12px;letter-spacing:2px} .testimonial p{font-size:15px;font-style:italic;color:var(--c-body);line-height:1.7;margin:0} /* ─── CTA BAND ────────────────────────────────────────────── */ .cta-band{background:var(--grad-dark);padding:80px 0;position:relative;overflow:hidden} .cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 50%,rgba(124,58,237,.15) 0%,transparent 60%)} .cta-band h2{color:#fff;font-size:clamp(24px,4vw,36px);margin-bottom:12px} .cta-band p{color:rgba(255,255,255,.7);font-size:17px;margin-bottom:32px;max-width:500px;margin-left:auto;margin-right:auto} .cta-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:20px} /* ─── PAGE HERO ───────────────────────────────────────────── */ .page-hero{background:var(--grad-hero);padding:calc(72px + 64px) var(--pad) 64px;text-align:center} .page-hero h1{margin-bottom:12px} .page-hero p{font-size:17px;color:var(--c-muted);max-width:560px;margin:0 auto} .page-hero-2col{background:var(--grad-hero);padding:calc(72px + 64px) var(--pad) 64px} .page-hero-2col .inner{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center} @media(max-width:768px){.page-hero-2col .inner{grid-template-columns:1fr;gap:32px}} /* ─── VALUES GRID ─────────────────────────────────────────── */ .values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .value-item{padding:24px;background:var(--c-purple-50);border-radius:var(--r-md);border-left:3px solid var(--c-purple)} .value-item h4{font-size:15px;font-weight:700;margin-bottom:6px} .value-item p{font-size:13px;color:var(--c-muted);margin:0;line-height:1.5} @media(max-width:768px){.values-grid{grid-template-columns:1fr}} /* ─── CHECKLIST ───────────────────────────────────────────── */ .checklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .checklist li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500} .checklist li::before{content:'✓';width:24px;height:24px;background:var(--c-teal);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0} @media(max-width:640px){.checklist{grid-template-columns:1fr}} /* ─── CONTACT BLOCKS ──────────────────────────────────────── */ .contact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:32px} .contact-block{display:flex;align-items:flex-start;gap:16px;padding:20px;background:var(--c-purple-50);border-radius:var(--r-md)} .cb-icon{width:40px;height:40px;background:var(--c-purple);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;font-size:16px} .cb-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-muted);margin-bottom:4px} .cb-value{font-size:15px;font-weight:600;color:var(--c-text)} .cb-value a{color:var(--c-purple);font-weight:600} @media(max-width:640px){.contact-grid{grid-template-columns:1fr}} /* ─── RESOURCES ───────────────────────────────────────────── */ .resource-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:24px;transition:all .2s} .resource-card:hover{border-color:var(--c-purple);box-shadow:var(--sh-md)} .res-cat{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-purple);margin-bottom:8px;display:flex;align-items:center;gap:6px} .resource-card h3{font-size:16px;font-weight:700;margin-bottom:8px} .resource-card p{font-size:13px;color:var(--c-muted);margin-bottom:16px;line-height:1.6} .res-link{font-size:13px;font-weight:600;color:var(--c-purple);display:inline-flex;align-items:center;gap:4px;text-decoration:none} /* ─── JOB CARDS ───────────────────────────────────────────── */ .job-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);padding:28px} .job-badge{display:inline-block;padding:4px 10px;background:var(--c-purple-50);color:var(--c-purple);border-radius:var(--r-full);font-size:11px;font-weight:700;letter-spacing:.04em} /* ─── BLOG ────────────────────────────────────────────────── */ .blog-card{background:#fff;border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;transition:all .25s} .blog-card:hover{box-shadow:var(--sh-lg);transform:translateY(-3px)} .blog-card-body{padding:24px} .blog-meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;color:var(--c-muted)} .blog-card h3{font-size:17px;font-weight:700;margin-bottom:8px;line-height:1.35;color:var(--c-text)} .blog-card p{font-size:14px;color:var(--c-muted);margin-bottom:16px;line-height:1.6} .read-more{font-size:13px;font-weight:700;color:var(--c-purple);display:inline-flex;align-items:center;gap:4px;text-decoration:none;transition:gap .2s} .read-more:hover{gap:8px;color:var(--c-purple)} .filter-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:40px} .filter-pill{padding:8px 20px;border-radius:var(--r-full);font-size:13px;font-weight:600;border:2px solid var(--c-border);background:#fff;color:var(--c-muted);cursor:pointer;transition:all .2s;text-decoration:none;font-family:var(--font)} .filter-pill:hover,.filter-pill.active{background:var(--c-purple);border-color:var(--c-purple);color:#fff} /* ─── MODAL ───────────────────────────────────────────────── */ .modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99999;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;visibility:hidden;transition:all .3s} .modal-overlay.active{opacity:1;visibility:visible} .modal-box{background:#fff;border-radius:var(--r-xl);padding:36px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;transform:scale(.95) translateY(16px);transition:all .3s} .modal-overlay.active .modal-box{transform:scale(1) translateY(0)} .modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px} .modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--c-muted);padding:4px;line-height:1} /* ─── FOOTER ──────────────────────────────────────────────── */ .hoh-footer{background:var(--c-purple-900);color:rgba(255,255,255,.8)} .footer-main{max-width:var(--max-w);margin:0 auto;padding:80px var(--pad);display:grid;grid-template-columns:2fr 1fr 1fr;gap:48px} .footer-brand h3{font-size:20px;font-weight:800;color:#fff;margin-bottom:8px} .footer-brand p{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:24px} .footer-social{display:flex;gap:8px} .footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.65);font-size:14px;transition:all .2s;text-decoration:none} .footer-social a:hover{background:var(--c-teal);color:#fff} .footer-col h4{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:16px} .footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px} .footer-links a{font-size:14px;color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s} .footer-links a:hover{color:#fff} .footer-contact-item{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.65);margin-bottom:12px} .footer-contact-item a{color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s} .footer-contact-item a:hover{color:#fff} .footer-contact-item i{color:var(--c-teal);width:14px;flex-shrink:0} .footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding:20px var(--pad);max-width:var(--max-w);margin:0 auto;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:rgba(255,255,255,.35)} .footer-bottom a{color:rgba(255,255,255,.35);text-decoration:none} @media(max-width:768px){.footer-main{grid-template-columns:1fr}} /* ─── WPFORMS OVERRIDES ───────────────────────────────────── */ .wpforms-field input,.wpforms-field select,.wpforms-field textarea{border:1.5px solid var(--c-border)!important;border-radius:var(--r-sm)!important;font-family:var(--font)!important;padding:10px 14px!important;font-size:14px!important;color:var(--c-text)!important;transition:border-color .2s,box-shadow .2s!important;outline:none!important;width:100%!important} .wpforms-field input:focus,.wpforms-field select:focus,.wpforms-field textarea:focus{border-color:var(--c-purple)!important;box-shadow:0 0 0 3px rgba(124,58,237,.12)!important} .wpforms-field label{font-size:13px!important;font-weight:600!important;color:var(--c-text)!important;margin-bottom:6px!important;display:block!important} .wpforms-submit-container .wpforms-submit{background:var(--c-purple)!important;border:none!important;border-radius:var(--r-sm)!important;font-family:var(--font)!important;font-weight:700!important;font-size:15px!important;padding:14px 32px!important;cursor:pointer!important;width:100%!important;color:#fff!important;transition:all .2s!important} .wpforms-submit-container .wpforms-submit:hover{background:#6d28d9!important;transform:translateY(-1px)!important} .wpforms-confirmation-container-full p{font-size:16px!important;color:var(--c-purple)!important;font-weight:600!important;text-align:center!important} .wpforms-field-checkbox li label,.wpforms-field-radio li label{font-size:13px!important;font-weight:400!important} /* ─── ELEMENTOR COMPAT ────────────────────────────────────── */ .elementor-section{position:relative} .e-con,.e-con-inner{padding-top:0!important;padding-bottom:0!important} body{padding-top:72px!important} /* ══════════════════════════════════════════════════════════ FIX 1 — HIDE HELLO ELEMENTOR SITE HEADER / TITLE / TAGLINE Targets the default WordPress site-header that Hello Elementor outputs above page content when no Elementor header template is assigned. ══════════════════════════════════════════════════════════ */ .site-header, .site-branding, .site-title, .site-description, header.entry-header, .entry-header, .page-header, .page .entry-header, .singular .entry-header, h1.entry-title, .entry-title, .elementor-page-title, .hello-elementor-header, .page-title-wrap, #masthead, .page #masthead { display: none !important; } /* Also hide any WP default
tag Hello Elementor outputs */ body > header, body > #page > header, .hfeed > header { display: none !important; } /* Remove top margin/padding that the hidden header leaves behind */ #content, #primary, .site-content, .content-area { margin-top: 0 !important; padding-top: 0 !important; } /* ══════════════════════════════════════════════════════════ FIX 2 — FONT AWESOME ICON RENDERING Ensure FA pseudo-elements use the correct font-family and rendering mode. Fixes broken squares when FA is loaded but the font-family isn't inherited correctly inside our custom elements. ══════════════════════════════════════════════════════════ */ .fas, .far, .fab, .fal, .fad, [class^="fa-"], [class*=" fa-"], .card-icon i, .icon-circle i, .why-icon i, .cb-icon i, .hero-badge i, .trust-item i, .hoh-footer i, .btn i, .sec-label + * i, .nav-book i, .nav-phone i, .read-more i, .res-link i, .float-card i { font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands", FontAwesome !important; font-style: normal !important; font-variant: normal !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; display: inline-block !important; line-height: 1 !important; } /* Solid icons need font-weight 900 */ .fas, .card-icon .fas, .icon-circle .fas, .why-icon .fas, .cb-icon .fas, .hero-badge .fas, .trust-item .fas, .footer-contact-item .fas, .footer-social .fas, .footer-col .fas { font-weight: 900 !important; } /* Brand icons need font-weight 400 */ .fab, .footer-social .fab { font-weight: 400 !important; font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands" !important; } /* Fallback: if icon shows as square, show icon name as text-indent hidden */ .card-icon, .icon-circle { overflow: visible !important; } /* ══════════════════════════════════════════════════════════ FIX 3 — WPFORMS CHECKBOX & RADIO LABEL ALIGNMENT The default WPForms markup puts labels far right. Force them to sit right next to the checkbox. ══════════════════════════════════════════════════════════ */ /* Checkbox/radio list items: flex row */ .wpforms-field-checkbox ul, .wpforms-field-radio ul { list-style: none !important; padding: 0 !important; margin: 0 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; } .wpforms-field-checkbox ul li, .wpforms-field-radio ul li { display: flex !important; align-items: flex-start !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; } /* The actual checkbox/radio input */ .wpforms-field-checkbox input[type="checkbox"], .wpforms-field-radio input[type="radio"] { width: 16px !important; min-width: 16px !important; height: 16px !important; margin: 3px 0 0 0 !important; padding: 0 !important; flex-shrink: 0 !important; accent-color: var(--c-purple) !important; border: 1.5px solid var(--c-border) !important; border-radius: 3px !important; } /* Label sits right next to checkbox */ .wpforms-field-checkbox ul li label, .wpforms-field-radio ul li label { font-size: 14px !important; font-weight: 400 !important; color: var(--c-text) !important; line-height: 1.4 !important; cursor: pointer !important; margin: 0 !important; padding: 0 !important; display: inline !important; float: none !important; width: auto !important; } /* On small screens: single column */ @media(max-width:600px) { .wpforms-field-checkbox ul, .wpforms-field-radio ul { grid-template-columns: 1fr !important; } } /* ══════════════════════════════════════════════════════════ FIX 4 — WPFORMS LAYOUT: 2-COLUMN FIELD ROWS Make Name+Email and Phone+Dropdown appear side by side on wider screens, matching the brand design. ══════════════════════════════════════════════════════════ */ .wpforms-container .wpforms-form .wpforms-field { margin-bottom: 16px !important; } /* Full-width fields */ .wpforms-field-textarea, .wpforms-field-checkbox, .wpforms-field-submit { width: 100% !important; } /* Style the submit button container */ .wpforms-submit-container { margin-top: 8px !important; text-align: center !important; } /* Confirmation message styling */ .wpforms-confirmation-container-full { background: var(--c-purple-50) !important; border: 2px solid var(--c-purple) !important; border-radius: var(--r-md) !important; padding: 24px !important; margin-top: 16px !important; } .wpforms-confirmation-container-full p { color: var(--c-purple) !important; font-weight: 700 !important; font-size: 16px !important; text-align: center !important; margin: 0 !important; } /* ══════════════════════════════════════════════════════════ FIX 5 — NAV: ENSURE hoh_nav SHORTCODE RENDERS ABOVE PAGE When [hoh_nav] is inside post_content, Hello Elementor can add its own header above it. Lock our nav to top. ══════════════════════════════════════════════════════════ */ #hoh-nav { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 99999 !important; } /* Push content down exactly nav height */ .hoh-hero, .page-hero, .page-hero-2col { padding-top: calc(72px + 0px) !important; } .hoh-hero { padding-top: 0 !important; /* Hero uses min-height:100vh and flex align center */ margin-top: 0 !important; } /* ══════════════════════════════════════════════════════════ FIX 6 — TRUST ITEM ICONS (checkmark icon) The trust badges use .fas.fa-shield-alt and .fas.fa-heart inline. Make sure they're visible. ══════════════════════════════════════════════════════════ */ .trust-item { display: inline-flex !important; align-items: center !important; gap: 6px !important; } .trust-item i { color: var(--c-teal) !important; font-size: 14px !important; } /* ══════════════════════════════════════════════════════════ FIX 7 — HERO SECTION SPACING Ensure the hero section starts from top of viewport (behind fixed nav) without the blank gap. ══════════════════════════════════════════════════════════ */ body.page { padding-top: 0 !important; } body.page .site-main, body.page #main, body.page main { padding-top: 0 !important; margin-top: 0 !important; } /* The [hoh_nav] shortcode renders the fixed nav, so body padding-top should equal nav height for non-hero pages */ .page-hero, .page-hero-2col { padding-top: calc(72px + 48px) !important; } /* ══════════════════════════════════════════════════════════ PATCH v1.2 — 5 VISUAL FIXES 1. Remove underlines from all links 2. Care services grid — correct column layout 3. Section backgrounds (.bg-light, .bg-gray, .bg-white) 4. CTA band background image 5. Intake form section — reduce excess height ══════════════════════════════════════════════════════════ */ /* ── FIX 1: Remove all link underlines ─────────────────── */ a, a:link, a:visited, a:hover, a:focus, .nav-menu a, .nav-menu li a, .footer-links a, .read-more, .res-link, .hoh-read-more, .btn, .btn:hover, .nav-phone, .nav-book, .nav-logo, .card a, .hoh-footer a { text-decoration: none !important; } /* ── FIX 2: Care Services grid — responsive fix ────────── */ /* 5-col row (4 cards + image) — keep desktop, stack mobile */ .hoh-sec .hoh-wrap > div[style*="grid-template-columns:1fr 1fr 1fr 1fr 1.3fr"], .hoh-sec .hoh-wrap > div[style*="grid-template-columns:1.3fr 1fr 1fr 1fr 1fr"] { display: grid !important; gap: 20px !important; align-items: start !important; } /* Card min-height so short cards don't collapse */ .hoh-sec .card { min-height: 160px !important; } /* Card image inline (the 5th column image) */ .hoh-sec .hoh-wrap img[style*="aspect-ratio:4/3"] { aspect-ratio: 4/3 !important; object-fit: cover !important; width: 100% !important; border-radius: 16px !important; box-shadow: var(--sh-lg) !important; } @media (max-width: 900px) { .hoh-sec .hoh-wrap > div[style*="grid-template-columns:1fr 1fr 1fr 1fr 1.3fr"], .hoh-sec .hoh-wrap > div[style*="grid-template-columns:1.3fr 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 560px) { .hoh-sec .hoh-wrap > div[style*="grid-template-columns:1fr 1fr 1fr 1fr 1.3fr"], .hoh-sec .hoh-wrap > div[style*="grid-template-columns:1.3fr 1fr 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } } /* ── FIX 3: Section backgrounds ────────────────────────── */ /* bg-light = light purple tint */ section.bg-light, div.bg-light, .hoh-sec.bg-light { background-color: var(--c-purple-50) !important; background: var(--c-purple-50) !important; } /* bg-white = pure white */ section.bg-white, div.bg-white, .hoh-sec.bg-white { background-color: #ffffff !important; background: #ffffff !important; } /* bg-gray = light gray */ section.bg-gray, div.bg-gray, .hoh-sec.bg-gray { background-color: var(--c-gray-50) !important; background: var(--c-gray-50) !important; } /* bg-dark = dark purple */ section.bg-dark, div.bg-dark, .hoh-sec.bg-dark { background-color: var(--c-purple-900) !important; background: var(--c-purple-900) !important; } /* Make sure alternating sections are clearly differentiated */ .hoh-sec + .hoh-sec.bg-white { border-top: 1px solid var(--c-border); } /* ── FIX 4: CTA band — ensure dark gradient bg shows ───── */ .cta-band { background: var(--grad-dark) !important; background-color: var(--c-purple-900) !important; position: relative !important; overflow: hidden !important; } /* When cta-band has inline background-image (services page CTA) */ .cta-band[style*="background-image"] { background-color: transparent !important; } /* The overlay div inside image CTA */ .cta-band > div[style*="background:rgba(46,16,101"] { position: absolute !important; inset: 0 !important; z-index: 0 !important; } /* Content inside CTA sits above overlay */ .cta-band > .hoh-wrap { position: relative !important; z-index: 1 !important; } /* ── FIX 5: Intake form section — reduce excess height ──── */ /* The section wrapping the form had too much padding */ #intake.hoh-sec, section#intake { padding-top: 56px !important; padding-bottom: 56px !important; } /* The gray card wrapping the form */ #intake .hoh-wrap > div[style*="background:var(--c-gray-50)"], #intake .hoh-wrap > div[style*="border-radius:20px"] { padding: 32px !important; } /* WPForms inside the intake box — no extra margin */ #intake .wpforms-container { margin: 0 !important; } /* ── BONUS: Ensure split/split-rev backgrounds inherit ──── */ .split, .split-rev { position: relative !important; } /* Restore section padding consistency */ .hoh-sec { padding: 72px 0 !important; } .hoh-sec-sm { padding: 48px 0 !important; } /* Why-item cards inside light bg section */ .bg-light .why-item { background: #fff !important; } /* Testimonial cards */ .bg-light .testimonial { background: #fff !important; } /* ══════════════════════════════════════════════════════════ PATCH v1.3 — FOOTER FIXES ══════════════════════════════════════════════════════════ */ /* ── FIX 1: Remove underlines from all footer links ─────── */ .hoh-footer a, .hoh-footer a:link, .hoh-footer a:visited, .hoh-footer a:hover, .hoh-footer a:focus, .footer-links a, .footer-links a:link, .footer-links a:visited, .footer-links a:hover, .footer-contact-item a, .footer-bottom a, .footer-social a { text-decoration: none !important; border-bottom: none !important; box-shadow: none !important; } /* ── FIX 2: Hide WordPress default site footer ──────────── */ /* Hello Elementor outputs a