/* ═══════════════════════════════════════════════════════════════ HUMANS OF VALOR — MODULAR DESIGN TOKENS ─────────────────────────────────────────────────────────────── ONE system. FIVE palettes. Change the site's entire feel by switching ONE attribute on : data-theme="homecoming" (or together | valor | newroots | steady). Every color/font/radius/space below is a CSS custom property. Components NEVER hardcode a color — they read these tokens. ═══════════════════════════════════════════════════════════════ */ /* ---- STRUCTURAL TOKENS (shared by all palettes) ---- */ :root{ --hov-container: 1180px; --hov-container-narrow: 760px; /* Spacing scale (8px base) */ --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 80px; --s-8: 112px; /* Type scale (1.25 modular ratio, fluid) */ --fs-xs: .8rem; --fs-sm: .9rem; --fs-base: 1.125rem; --fs-lg: 1.25rem; --fs-h3: clamp(1.3rem, 2vw, 1.6rem); --fs-h2: clamp(1.8rem, 3.2vw, 2.5rem); --fs-h1: clamp(2.3rem, 4.5vw, 3.4rem); --fs-display: clamp(2.6rem, 6vw, 4rem); --lh-tight: 1.18; --lh-snug: 1.35; --lh-body: 1.7; --shadow-sm: 0 2px 8px rgba(0,0,0,.06); --shadow-md: 0 8px 24px rgba(0,0,0,.10); --shadow-lg: 0 18px 48px rgba(0,0,0,.16); --ease: cubic-bezier(.22,.61,.36,1); --t-fast: .2s; --t: .32s; --maxw-prose: 65ch; } /* ═══════════════ PALETTE 1 — HOMECOMING (default/active) ═══════════════ */ :root, [data-theme="homecoming"]{ --c-primary: #00a88a; /* Valor green, warm-shifted */ --c-primary-d: #007e68; --c-primary-l: #e3f4ef; --c-accent: #d4893b; /* amber heart (logo red → matured) */ --c-accent-d: #b86f26; --c-accent-l: #f8ecdc; --c-bg: #fbf7f1; /* warm cream */ --c-surface: #ffffff; --c-surface-2: #f3ece1; /* warm tint section */ --c-dark: #2c2420; /* rich cocoa */ --c-dark-2: #3a302a; --c-text: #2f2823; --c-text-soft: #6a5f57; --c-border: #e7ddcf; --font-head: "Lora", Georgia, serif; --font-body: "Open Sans", system-ui, sans-serif; --radius: 16px; --radius-sm: 10px; --radius-pill: 999px; } /* ═══════════════ PALETTE 2 — TOGETHER ═══════════════ */ [data-theme="together"]{ --c-primary:#2d9e7c; --c-primary-d:#1f7a5f; --c-primary-l:#e1f3ec; --c-accent:#e8b44c; --c-accent-d:#c8941f; --c-accent-l:#fbf0d6; --c-bg:#faf7f2; --c-surface:#ffffff; --c-surface-2:#f1ece2; --c-dark:#173f3a; --c-dark-2:#1f5450; --c-text:#26302c; --c-text-soft:#5d6b65; --c-border:#e0d8c9; --font-head:"Montserrat",sans-serif; --font-body:"Lato",sans-serif; --radius:14px; --radius-sm:10px; --radius-pill:999px; } /* ═══════════════ PALETTE 3 — VALOR ═══════════════ */ [data-theme="valor"]{ --c-primary:#006b5a; --c-primary-d:#004f43; --c-primary-l:#dcefe9; --c-accent:#c4483e; --c-accent-d:#9e342c; --c-accent-l:#f6e0dd; --c-bg:#f6f5f7; --c-surface:#ffffff; --c-surface-2:#ecebf0; --c-dark:#1b1b2e; --c-dark-2:#2a2a44; --c-text:#22222c; --c-text-soft:#5a5a68; --c-border:#dcdbe3; --font-head:"Cormorant Garamond",serif; --font-body:"DM Sans",sans-serif; --radius:6px; --radius-sm:4px; --radius-pill:999px; } /* ═══════════════ PALETTE 4 — NEW ROOTS ═══════════════ */ [data-theme="newroots"]{ --c-primary:#00a676; --c-primary-d:#00805a; --c-primary-l:#dcf3ea; --c-accent:#e07c5a; --c-accent-d:#c25d3d; --c-accent-l:#fbe7df; --c-bg:#f5faf7; --c-surface:#ffffff; --c-surface-2:#e9f4ee; --c-dark:#1a2e2a; --c-dark-2:#244039; --c-text:#22312d; --c-text-soft:#566b64; --c-border:#cfe5db; --font-head:"Montserrat",sans-serif; --font-body:"Open Sans",sans-serif; --radius:12px; --radius-sm:8px; --radius-pill:999px; } /* ═══════════════ PALETTE 5 — STEADY GROUND ═══════════════ */ [data-theme="steady"]{ --c-primary:#00906e; --c-primary-d:#006c52; --c-primary-l:#dbefe8; --c-accent:#c9a94e; --c-accent-d:#a98a32; --c-accent-l:#f6efd9; --c-bg:#ffffff; --c-surface:#ffffff; --c-surface-2:#f3f4f6; --c-dark:#1a2233; --c-dark-2:#26314a; --c-text:#1a2233; --c-text-soft:#566077; --c-border:#dde1e8; --font-head:"Merriweather",serif; --font-body:"Inter",sans-serif; --radius:6px; --radius-sm:4px; --radius-pill:999px; } /* ═══════════════════════════════════════════════════════════════ HUMANS OF VALOR — COMPONENTS (reads tokens; never hardcodes color) ═══════════════════════════════════════════════════════════════ */ /* ---- BASE ---- */ *{box-sizing:border-box} body{font-family:var(--font-body);color:var(--c-text);background:var(--c-bg); font-size:var(--fs-base);line-height:var(--lh-body);-webkit-font-smoothing:antialiased} h1,h2,h3,h4,.wp-block-heading{font-family:var(--font-head);color:var(--c-text);line-height:var(--lh-tight);font-weight:700} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)} p{margin:0 0 var(--s-2)} img{max-width:100%;height:auto;display:block} a{color:var(--c-primary-d);transition:color var(--t-fast)} a:hover{color:var(--c-primary)} .hov-wrap{max-width:var(--hov-container);margin:0 auto;padding-inline:var(--s-3)} /* ---- BUTTONS ---- */ .hov-btn{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;border-radius:var(--radius-pill); font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer; transition:transform var(--t),box-shadow var(--t),background var(--t)} .hov-btn i{transition:transform var(--t)} .hov-btn-primary{background:var(--c-accent);color:#fff!important;box-shadow:var(--shadow-sm)} .hov-btn-primary:hover{background:var(--c-accent-d);color:#fff!important;transform:translateY(-2px);box-shadow:var(--shadow-md)} .hov-btn-primary:hover i{transform:translateX(4px)} .hov-btn-ghost{background:transparent;color:var(--c-primary-d)!important;border-color:var(--c-border)} .hov-btn-ghost:hover{border-color:var(--c-primary);color:var(--c-primary)!important;background:var(--c-primary-l)} .hov-btn-on-dark{background:#fff;color:var(--c-dark)!important} .hov-btn-on-dark:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);color:var(--c-dark)!important} /* ---- SECTION SCAFFOLD ---- */ .hov-section{padding:var(--s-8) 0} .hov-section--sm{padding:var(--s-6) 0} .hov-section--surface{background:var(--c-surface)} .hov-section--tint{background:var(--c-surface-2)} .hov-section--primary{background:var(--c-primary);color:#fff} .hov-section--dark{background:var(--c-dark);color:#fff} .hov-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700; font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;color:var(--c-primary-d); background:var(--c-primary-l);padding:6px 14px;border-radius:var(--radius-pill);margin-bottom:var(--s-2)} .hov-section--primary .hov-eyebrow,.hov-section--dark .hov-eyebrow{background:rgba(255,255,255,.16);color:#fff} .hov-head{text-align:center;max-width:640px;margin:0 auto var(--s-5)} .hov-head h2{margin:0 0 var(--s-2)} .hov-head p{font-size:var(--fs-lg);color:var(--c-text-soft);margin:0} .hov-section--primary .hov-head p,.hov-section--dark .hov-head p{color:rgba(255,255,255,.9)} /* ═══════════ HEADER + DROPDOWN NAV ═══════════ */ .hov-header{position:sticky;top:0;z-index:1000;background:var(--c-surface);border-bottom:1px solid var(--c-border); box-shadow:0 1px 0 rgba(0,0,0,.02)} .hov-header-bar{display:flex;align-items:center;justify-content:space-between;height:74px; max-width:var(--hov-container);margin:0 auto;padding-inline:var(--s-3)} .hov-logo{display:flex;align-items:center;gap:12px;text-decoration:none} .hov-logo img{height:46px;width:auto} .hov-logo b{font-family:var(--font-head);font-size:1.15rem;color:var(--c-text);font-weight:700;line-height:1.05} .hov-logo b span{display:block;font-size:.7rem;font-weight:600;color:var(--c-text-soft);letter-spacing:.04em;font-family:var(--font-body)} .hov-nav{display:flex;align-items:center;gap:4px} .hov-nav > a,.hov-nav > .hov-dd > a{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:var(--radius-sm); color:var(--c-text);font-weight:600;font-size:.95rem;text-decoration:none;white-space:nowrap} .hov-nav > a:hover,.hov-nav > .hov-dd > a:hover{background:var(--c-primary-l);color:var(--c-primary-d)} .hov-dd{position:relative} .hov-dd > a i{font-size:.7rem;transition:transform var(--t-fast)} .hov-dd:hover > a i{transform:rotate(180deg)} .hov-dd-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:270px;background:var(--c-surface); border:1px solid var(--c-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);padding:8px; opacity:0;visibility:hidden;transform:translateY(8px);transition:all var(--t);z-index:1001} .hov-dd:hover .hov-dd-menu,.hov-dd:focus-within .hov-dd-menu{opacity:1;visibility:visible;transform:translateY(0)} .hov-dd-menu a{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:var(--radius-sm);text-decoration:none} .hov-dd-menu a:hover{background:var(--c-primary-l)} .hov-dd-menu i{color:var(--c-primary);font-size:1rem;margin-top:3px;width:20px;text-align:center} .hov-dd-menu .ddt{display:block;color:var(--c-text);font-weight:700;font-size:.95rem} .hov-dd-menu .ddd{display:block;color:var(--c-text-soft);font-size:.8rem;line-height:1.4} .hov-nav-cta{margin-left:8px} .hov-burger{display:none;background:none;border:0;font-size:1.5rem;color:var(--c-text);cursor:pointer} /* ═══════════ ANNOUNCEMENT / FREE BAR ═══════════ */ .hov-topbar{background:var(--c-primary);color:#fff;text-align:center;font-size:.92rem;font-weight:600;padding:10px var(--s-3)} .hov-topbar i{margin-right:8px} .hov-topbar a{color:#fff!important;text-decoration:underline} /* ═══════════ HERO ═══════════ */ .hov-hero{position:relative;background:var(--c-surface);overflow:hidden} .hov-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s-7);align-items:center; max-width:var(--hov-container);margin:0 auto;padding:var(--s-8) var(--s-3)} .hov-hero h1{font-size:var(--fs-h1);margin:0 0 var(--s-3)} .hov-hero .lead{font-size:var(--fs-lg);color:var(--c-text-soft);margin:0 0 var(--s-4);max-width:48ch} .hov-hero-cta{display:flex;gap:var(--s-2);flex-wrap:wrap} .hov-hero-media{position:relative} .hov-hero-media .ph{border-radius:calc(var(--radius) + 8px);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/4.4} .hov-hero-media .ph img{width:100%;height:100%;object-fit:cover} .hov-hero-badge{position:absolute;bottom:-22px;left:-22px;background:var(--c-surface);border-radius:var(--radius); box-shadow:var(--shadow-md);padding:16px 20px;display:flex;align-items:center;gap:14px;max-width:260px} .hov-hero-badge .ic{width:46px;height:46px;border-radius:var(--radius-sm);background:var(--c-accent-l); display:grid;place-items:center;color:var(--c-accent-d);font-size:1.2rem;flex:0 0 auto} .hov-hero-badge b{display:block;font-family:var(--font-head);font-size:1.4rem;color:var(--c-text);line-height:1} .hov-hero-badge span{font-size:.8rem;color:var(--c-text-soft)} .hov-hero-blob{position:absolute;width:520px;height:520px;border-radius:50%;background:var(--c-primary-l); filter:blur(8px);opacity:.5;top:-160px;right:-160px;z-index:0} /* ═══════════ TRUST STRIP ═══════════ */ .hov-trust{padding:var(--s-5) var(--s-3);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);background:var(--c-bg)} .hov-trust-in{max-width:var(--hov-container);margin:0 auto;text-align:center} .hov-trust-label{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--c-text-soft);font-weight:700;margin-bottom:var(--s-3)} .hov-trust-logos{display:flex;align-items:center;justify-content:center;gap:var(--s-6);flex-wrap:wrap} .hov-trust-logos img{height:48px;width:auto;opacity:.7;filter:grayscale(.2);transition:opacity var(--t)} .hov-trust-logos img:hover{opacity:1} /* ═══════════ DOOR CARDS (what do you need) ═══════════ */ .hov-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)} .hov-card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius); padding:var(--s-4);text-decoration:none;color:var(--c-text);display:flex;flex-direction:column; transition:transform var(--t),box-shadow var(--t),border-color var(--t)} .hov-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--c-primary)} .hov-card-ic{width:62px;height:62px;border-radius:var(--radius-sm);background:var(--c-primary-l); display:grid;place-items:center;color:var(--c-primary);font-size:1.6rem;margin-bottom:var(--s-3)} .hov-card h3{margin:0 0 var(--s-1);color:var(--c-text)} .hov-card p{color:var(--c-text-soft);font-size:.98rem;flex:1} .hov-card .lk{color:var(--c-primary-d);font-weight:700;font-size:.92rem;display:inline-flex;gap:6px;align-items:center;margin-top:var(--s-2)} .hov-card:hover .lk i{transform:translateX(4px)} .hov-card .lk i{transition:transform var(--t)} /* ═══════════ IMPACT STATS ═══════════ */ .hov-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-3)} .hov-stat{background:var(--c-surface);border-radius:var(--radius);padding:var(--s-4) var(--s-2);text-align:center;box-shadow:var(--shadow-sm)} .hov-stat .n{font-family:var(--font-head);font-size:clamp(2.2rem,4vw,3rem);font-weight:700;color:var(--c-primary);line-height:1} .hov-stat .l{font-size:.9rem;color:var(--c-text-soft);margin-top:8px} .hov-section--primary .hov-stat,.hov-section--dark .hov-stat{background:rgba(255,255,255,.1)} .hov-section--primary .hov-stat .n,.hov-section--dark .hov-stat .n{color:#fff} .hov-section--primary .hov-stat .l,.hov-section--dark .hov-stat .l{color:rgba(255,255,255,.85)} /* ═══════════ TEAM ═══════════ */ .hov-team{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)} .hov-member{text-align:center} .hov-member-photo{width:100%;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;margin-bottom:var(--s-2); box-shadow:var(--shadow-sm);background:var(--c-surface-2)} .hov-member-photo img{width:100%;height:100%;object-fit:cover} .hov-member h3{margin:0 0 2px;font-size:1.25rem} .hov-member .role{color:var(--c-primary-d);font-weight:600;font-size:.9rem;margin-bottom:var(--s-1)} .hov-member .bio{color:var(--c-text-soft);font-size:.92rem} /* ═══════════ TESTIMONIAL (mined voices, labeled) ═══════════ */ .hov-quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-3)} .hov-quote{background:var(--c-surface);border-radius:var(--radius);padding:var(--s-4);box-shadow:var(--shadow-sm);border-left:4px solid var(--c-accent)} .hov-quote .qm{color:var(--c-accent);font-size:2rem;font-family:var(--font-head);line-height:.5} .hov-quote p{font-size:1.1rem;color:var(--c-text);font-style:italic;margin:var(--s-2) 0} .hov-quote .who{font-size:.85rem;color:var(--c-text-soft);font-weight:600;font-style:normal} /* ═══════════ EVENTS ═══════════ */ .hov-events{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)} .hov-event{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden; display:flex;flex-direction:column;transition:transform var(--t),box-shadow var(--t)} .hov-event:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .hov-event-date{background:var(--c-primary);color:#fff;padding:10px 18px;font-size:.82rem;font-weight:700;letter-spacing:.03em;display:flex;align-items:center;gap:8px} .hov-event-body{padding:var(--s-3);flex:1;display:flex;flex-direction:column} .hov-event-body h4{margin:0 0 8px;font-family:var(--font-head);font-size:1.1rem} .hov-event-body p{color:var(--c-text-soft);font-size:.9rem;flex:1} .hov-event-meta{font-size:.8rem;color:var(--c-text-soft);margin-top:8px} .hov-event-meta i{color:var(--c-primary);margin-right:6px} /* Past events timeline */ .hov-timeline{max-width:760px;margin:0 auto;position:relative;padding-left:var(--s-4)} .hov-timeline::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:2px;background:var(--c-border)} .hov-tl{position:relative;padding:0 0 var(--s-4) var(--s-4)} .hov-tl::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--c-primary);border:3px solid var(--c-bg)} .hov-tl .d{font-size:.82rem;font-weight:700;color:var(--c-primary-d);text-transform:uppercase;letter-spacing:.04em} .hov-tl h4{margin:2px 0 4px;font-size:1.05rem} .hov-tl p{color:var(--c-text-soft);font-size:.9rem;margin:0} /* ═══════════ FEATURE / SPLIT ═══════════ */ .hov-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6);align-items:center} .hov-split--rev .hov-split-media{order:2} .hov-split-media img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;aspect-ratio:5/4;object-fit:cover} .hov-split h2{margin:0 0 var(--s-2)} .hov-split .hov-list{list-style:none;padding:0;margin:var(--s-3) 0} .hov-split .hov-list li{display:flex;gap:12px;padding:8px 0;align-items:flex-start} .hov-split .hov-list i{color:var(--c-primary);margin-top:5px} /* ═══════════ PAGE HERO (inner) ═══════════ */ .hov-pagehero{position:relative;background:var(--c-dark);color:#fff;padding:var(--s-8) 0 var(--s-7);overflow:hidden} .hov-pagehero::after{content:"";position:absolute;inset:0;background: radial-gradient(800px 300px at 80% -10%,var(--c-primary) 0%,transparent 60%);opacity:.35} .hov-pagehero .hov-wrap{position:relative;z-index:1} .hov-pagehero .hov-eyebrow{background:rgba(255,255,255,.15);color:#fff} .hov-pagehero h1{font-size:var(--fs-h1);margin:0 0 var(--s-2);color:#fff} .hov-pagehero p{font-size:var(--fs-lg);color:rgba(255,255,255,.88);max-width:60ch;margin:0} .hov-crumbs{font-size:.82rem;color:rgba(255,255,255,.7);margin-bottom:var(--s-2)} .hov-crumbs a{color:rgba(255,255,255,.7)!important} /* ═══════════ PROSE (page body) ═══════════ */ .hov-prose{max-width:var(--maxw-prose)} .hov-prose h2{margin:var(--s-5) 0 var(--s-2)} .hov-prose h3{margin:var(--s-4) 0 var(--s-1)} .hov-prose ul,.hov-prose ol{margin:0 0 var(--s-2);padding-left:var(--s-3)} .hov-prose li{margin-bottom:8px} /* ═══════════ FAQ ═══════════ */ .hov-faq{max-width:760px;margin:0 auto} .hov-faq details{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius-sm);margin-bottom:12px;padding:0} .hov-faq summary{padding:18px 22px;font-weight:700;font-family:var(--font-head);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px} .hov-faq summary::-webkit-details-marker{display:none} .hov-faq summary::after{content:"+";color:var(--c-primary);font-size:1.4rem;line-height:1} .hov-faq details[open] summary::after{content:"–"} .hov-faq details p{padding:0 22px 18px;color:var(--c-text-soft);margin:0} /* ═══════════ CTA BAND ═══════════ */ .hov-ctaband{background:var(--c-primary);color:#fff;text-align:center;border-radius:var(--radius);padding:var(--s-6) var(--s-4)} .hov-ctaband h2{color:#fff;margin:0 0 var(--s-2)} .hov-ctaband p{color:rgba(255,255,255,.9);max-width:50ch;margin:0 auto var(--s-3)} /* ═══════════ FORMS ═══════════ */ .hov-form{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);padding:var(--s-4);box-shadow:var(--shadow-sm)} .hov-form label{display:block;font-weight:600;font-size:.9rem;margin:0 0 6px} .hov-form input,.hov-form select,.hov-form textarea{width:100%;padding:13px 16px;border:1.5px solid var(--c-border); border-radius:var(--radius-sm);font:inherit;font-size:1rem;margin-bottom:var(--s-2);background:var(--c-bg);color:var(--c-text)} .hov-form input:focus,.hov-form select:focus,.hov-form textarea:focus{outline:none;border-color:var(--c-primary);background:#fff} .hov-form textarea{min-height:130px;resize:vertical} /* ═══════════ FOOTER ═══════════ */ .hov-footer{background:var(--c-dark);color:rgba(255,255,255,.8)} .hov-footer-main{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s-5); max-width:var(--hov-container);margin:0 auto;padding:var(--s-7) var(--s-3) var(--s-5)} .hov-footer h3{color:#fff;font-size:1.2rem;margin:0 0 var(--s-2)} .hov-footer h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin:0 0 var(--s-2)} .hov-footer p{font-size:.9rem;line-height:1.6;color:rgba(255,255,255,.7)} .hov-footer ul{list-style:none;padding:0;margin:0} .hov-footer li{margin-bottom:10px} .hov-footer a{color:rgba(255,255,255,.75)!important;font-size:.9rem;text-decoration:none} .hov-footer a:hover{color:#fff!important} .hov-footer-social{display:flex;gap:10px;margin-top:var(--s-3)} .hov-footer-social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff!important} .hov-footer-social a:hover{background:var(--c-primary)} .hov-footer-addr{margin-top:var(--s-2)} .hov-footer-addr div{display:flex;gap:10px;margin-bottom:10px;font-size:.85rem} .hov-footer-addr i{color:var(--c-primary);margin-top:3px} .hov-footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:var(--s-3);text-align:center;font-size:.82rem;color:rgba(255,255,255,.6)} /* ═══════════ SCROLL-TOP (single floating action, no collisions) ═══════════ */ .hov-totop{position:fixed;right:24px;bottom:24px;width:48px;height:48px;border-radius:50%;border:0; background:var(--c-primary);color:#fff;font-size:1.1rem;cursor:pointer;box-shadow:var(--shadow-md); opacity:0;visibility:hidden;transform:translateY(12px);transition:all var(--t);z-index:900} .hov-totop.show{opacity:1;visibility:visible;transform:translateY(0)} .hov-totop:hover{background:var(--c-primary-d);transform:translateY(-3px)} /* hide Astra chrome everywhere — HoV owns header/footer */ body .site-header,body #masthead,body .ast-primary-header-bar,body .main-header-bar-wrap, body #ast-desktop-header,body .ast-mobile-header-wrap,body .site-footer,body #colophon, body .ast-small-footer,body .entry-header,body .ast-page-header{display:none!important} body .site-content,body #content,body .ast-container,body #primary,body .site-main, body .ast-container>article,body .entry-content{max-width:100%!important;width:100%!important; padding:0!important;margin:0!important;display:block!important;float:none!important} /* Style TranslatePress switcher into the header (not floating) */ #trp-floater-ls{position:static!important;display:inline-block} /* ═══════════ RESPONSIVE ═══════════ */ @media(max-width:960px){ .hov-hero-grid{grid-template-columns:1fr;gap:var(--s-5)} .hov-hero-media{max-width:460px;margin:0 auto} .hov-stats{grid-template-columns:repeat(2,1fr)} .hov-split{grid-template-columns:1fr;gap:var(--s-4)} .hov-split--rev .hov-split-media{order:0} .hov-footer-main{grid-template-columns:1fr 1fr} } @media(max-width:780px){ .hov-nav{position:fixed;inset:74px 0 auto 0;background:var(--c-surface);flex-direction:column; align-items:stretch;padding:var(--s-2);border-bottom:1px solid var(--c-border);box-shadow:var(--shadow-md); transform:translateY(-120%);transition:transform var(--t);max-height:calc(100vh - 74px);overflow:auto} .hov-nav.open{transform:translateY(0)} .hov-burger{display:block} .hov-dd-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding-left:var(--s-3);min-width:0} .hov-cards,.hov-events,.hov-quotes,.hov-team{grid-template-columns:1fr} .hov-stats{grid-template-columns:1fr 1fr} .hov-footer-main{grid-template-columns:1fr} } /* ── EVENT CARD IMAGE (top of card) ── */ .hov-event-img{aspect-ratio:16/9;overflow:hidden} .hov-event-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s var(--ease)} .hov-event:hover .hov-event-img img{transform:scale(1.04)} /* ═══════════ FLUENT FORMS — brand alignment ═══════════ */ .fluentform .ff-el-input--content input[type=text], .fluentform .ff-el-input--content input[type=email], .fluentform .ff-el-input--content input[type=tel], .fluentform .ff-el-input--content textarea, .fluentform .ff-el-input--content select, .fluentform input.ff-el-form-control, .fluentform textarea.ff-el-form-control, .fluentform select.ff-el-form-control{ font-family:var(--font-body)!important; font-size:1rem!important; border:1.5px solid var(--c-border)!important; border-radius:var(--radius-sm)!important; background:var(--c-bg)!important; color:var(--c-text)!important; padding:13px 16px!important; } .fluentform input.ff-el-form-control:focus, .fluentform textarea.ff-el-form-control:focus, .fluentform select.ff-el-form-control:focus{ border-color:var(--c-primary)!important; background:#fff!important; box-shadow:0 0 0 3px var(--c-primary-l)!important; outline:none!important; } .fluentform .ff-el-input--label label, .fluentform label{ font-family:var(--font-body)!important; font-weight:600!important; color:var(--c-text)!important; font-size:.9rem!important; } /* Submit button = HoV amber accent, pill, brand font */ .fluentform .ff-btn-submit, .fluentform button.ff-btn, .ff_submit_btn_wrapper button{ background:var(--c-accent)!important; background-image:none!important; color:#fff!important; border:0!important; border-radius:var(--radius-pill)!important; padding:14px 32px!important; font-family:var(--font-body)!important; font-weight:600!important; font-size:1rem!important; box-shadow:var(--shadow-sm)!important; transition:all var(--t) var(--ease)!important; } .fluentform .ff-btn-submit:hover, .fluentform button.ff-btn:hover, .ff_submit_btn_wrapper button:hover{ background:var(--c-accent-d)!important; transform:translateY(-2px)!important; box-shadow:var(--shadow-md)!important; } /* required asterisk + validation in brand tones */ .fluentform .ff-el-is-required.asterisk-left label:before, .fluentform .ff-el-is-required.asterisk-right label:after{color:var(--c-accent)!important} .fluentform .error.text-danger,.fluentform .ff-el-is-error .text-danger{color:var(--c-accent-d)!important} .fluentform .ff-message-success,.ff-message-success{ background:var(--c-primary-l)!important;border:1px solid var(--c-primary)!important; color:var(--c-primary-d)!important;border-radius:var(--radius-sm)!important;font-weight:600!important; } /* ═══════════ THE EVENTS CALENDAR — brand alignment ═══════════ */ .tribe-common,.tribe-events{font-family:var(--font-body)!important} /* primary buttons (Find Events, etc.) → HoV accent */ .tribe-common .tribe-common-c-btn, .tribe-events .tribe-events-c-search__button, .tribe-events-c-search__button, .tribe-common-c-btn{background-color:var(--c-accent)!important;border-radius:var(--radius-pill)!important;font-family:var(--font-body)!important} .tribe-common .tribe-common-c-btn:hover{background-color:var(--c-accent-d)!important} /* links / accents blue → green */ .tribe-events a,.tribe-common a,.tribe-events .tribe-events-calendar-list__event-title-link{color:var(--c-primary-d)!important} .tribe-events a:hover{color:var(--c-primary)!important} .tribe-events-c-subscribe-dropdown__button,.tribe-events-c-subscribe-dropdown__button-text{color:var(--c-primary-d)!important;border-color:var(--c-primary)!important} .tribe-events-c-subscribe-dropdown__button{border-radius:var(--radius-pill)!important} /* active view tab underline / nav → green */ .tribe-events-c-view-selector__list-item-link--active,.tribe-events-c-top-bar__nav-list-item-link{color:var(--c-primary-d)!important} .tribe-events-c-view-selector__list-item-text{color:var(--c-text)!important} /* event titles in brand serif */ .tribe-events .tribe-events-calendar-list__event-title,.tribe-events h3{font-family:var(--font-head)!important;color:var(--c-text)!important} /* date day-number badge → green */ .tribe-events-calendar-list__event-date-tag-datetime{color:var(--c-primary-d)!important} /* month view today / selected → green */ .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date{background:var(--c-primary)!important;color:#fff!important} .tribe-events-calendar-month__calendar-event-title-link{color:var(--c-primary-d)!important} /* featured/highlight bars → green */ .tribe-events .tribe-events-calendar-list__event--featured:before,.tribe-common .tribe-common-c-btn-border{border-color:var(--c-primary)!important} /* ═══════════ RESPONSIVE HARDENING (beats inline cols style) ═══════════ */ /* Tablet: wide card rows (3/4-col) drop to 2-up */ @media(max-width:900px){ .hov-cards{grid-template-columns:repeat(2,1fr)!important} .hov-events{grid-template-columns:repeat(2,1fr)!important} .hov-stats{grid-template-columns:repeat(2,1fr)!important} .hov-team{grid-template-columns:repeat(2,1fr)!important} .hov-quotes{grid-template-columns:1fr!important} } /* Phone: everything single column */ @media(max-width:600px){ .hov-cards,.hov-events,.hov-stats,.hov-team,.hov-quotes{grid-template-columns:1fr!important} .hov-split{grid-template-columns:1fr!important} .hov-hero-grid{grid-template-columns:1fr!important} .hov-footer-main{grid-template-columns:1fr!important} .hov-trust-logos{gap:var(--s-4)!important} .hov-trust-logos img{height:34px!important} } /* ═══════════ FLOATING ACTIONS — root fix (oval button + duplicate + collision) ═══════════ */ /* 1) Our scroll-top: reset Astra's leaked button padding so it's a true circle */ .hov-totop{ width:50px!important;height:50px!important; padding:0!important;margin:0!important; display:grid!important;place-items:center!important; border-radius:50%!important;flex:0 0 auto;line-height:1;box-sizing:border-box!important; min-width:0!important;min-height:0!important; } /* 2) Kill Astra's NATIVE scroll-to-top (we have our own) */ #ast-scroll-top,.ast-scroll-top-icon,.ast-scroll-to-top-right,.ast-scroll-to-top-left{display:none!important} /* 3) TranslatePress floating switcher: move it OUT of the corner, above the totop button, clean */ #trp-floater-ls,.trp-floating-switcher{ bottom:84px!important;right:24px!important;z-index:899!important; } /* ═══════════ OVERFLOW ROOT FIX — grid/flex children must be allowed to shrink ═══════════ */ /* Grid/flex items default to min-width:auto and refuse to shrink below content (esp. images) → overflow. */ .hov-split, .hov-hero-grid, .hov-cards, .hov-events, .hov-stats, .hov-team, .hov-quotes{min-width:0} .hov-split > *, .hov-hero-grid > *, .hov-cards > *, .hov-events > *, .hov-stats > *, .hov-team > *, .hov-quotes > *{min-width:0; max-width:100%} .hov-split-media, .hov-hero-media{min-width:0; max-width:100%} .hov-split-media img, .hov-hero-media img, .hov-event-img img, .hov-member-photo img{max-width:100%} /* ═══════════ DECORATIVE OVERFLOW ROOT FIX ═══════════ */ /* Hero/page-hero decorations must never create horizontal scroll. Clip them. */ .hov-hero{overflow:hidden} .hov-pagehero{overflow:hidden} /* The decorative blob is pure decoration — hide it on small screens (it's oversized for phones) */ @media(max-width:700px){ .hov-hero-blob{display:none!important} } /* Safety net: sections clip horizontal decorative bleed (header/nav are outside sections, sticky unaffected) */ .hov-section{overflow-x:clip}