#hope-landing{font-family:Arial,sans-serif;background:light-dark(#f5f3ed,#18231f);color:light-dark(#24352e,#e1ece6);color-scheme:light dark;border-radius:16px;overflow:hidden}#hope-landing *{box-sizing:border-box}#hope-landing header{background:light-dark(#fff,#223029);padding:20px 28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}#hope-landing nav{display:flex;gap:16px;flex-wrap:wrap;font-size:14px}#hope-landing a{color:inherit}#hope-landing main{max-width:960px;margin:auto;padding:32px 28px}#hope-landing h1,#hope-landing h2{font-family:Georgia,serif;font-weight:400}#hope-landing h1{font-size:40px;max-width:650px;margin:12px 0}#hope-landing h2{font-size:25px}#hope-landing p{line-height:1.6;max-width:700px}#hope-landing .small{font-size:13px;color:light-dark(#586c60,#b6c9bd)}#hope-landing .topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:20px 0}#hope-landing button{font:inherit;color:inherit;background:light-dark(#fff,#223029);border:1px solid light-dark(#d5ded7,#4c6053);border-radius:10px;padding:16px;text-align:left}#hope-landing button[aria-pressed=true]{background:light-dark(#2e5743,#b4d6c0);color:light-dark(#fff,#15251b)}#hope-landing .panel{background:light-dark(#fff,#223029);padding:24px;border-radius:12px;margin:24px 0}#hope-landing .panel h2{margin-top:0}#hope-landing .support{background:light-dark(#e4ece5,#2b3d31)}#hope-landing .link-row{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px}#hope-landing blockquote{margin:14px 0;font-family:Georgia,serif;font-size:21px;line-height:1.6}#hope-landing footer{padding:20px 28px;border-top:1px solid light-dark(#d5ded7,#4c6053);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px}#hope-landing [hidden]{display:none!important}@media(max-width:600px){#hope-landing .topics{grid-template-columns:repeat(2,minmax(0,1fr))}#hope-landing h1{font-size:32px}#hope-landing main{padding:24px 20px}} #hope-landing .welcome-banner{position:relative;isolation:isolate;overflow:hidden;padding:42px 32px;margin-bottom:32px;border-radius:14px;background:light-dark(#234d3d,#244d3c);color:#f8f4e8}#hope-landing .welcome-banner:after{content:"";position:absolute;z-index:-1;width:320px;height:320px;border-radius:50%;right:-140px;top:-140px;background:radial-gradient(circle,#dfc88955,transparent 70%)}#hope-landing .welcome-banner .small{color:#d5e3d8}#hope-landing .welcome-banner h1{max-width:590px;font-size:42px}#hope-landing .welcome-banner p{max-width:550px;color:#e2ebe4}#hope-landing .banner-action{display:inline-block;padding:13px 22px;margin-top:8px;border-radius:8px;text-decoration:none;background:#f1e4bf;color:#233e30;font-weight:500}#hope-landing .banner-note{display:block;margin-top:16px}@media(max-width:600px){#hope-landing .welcome-banner{padding:28px 22px}#hope-landing .welcome-banner h1{font-size:32px}} #hope-landing .identity{display:flex;align-items:center;gap:12px}#hope-landing .hope-mark{width:42px;height:42px;flex-shrink:0;background:light-dark(#2e5743,#b4d6c0);border-radius:50%;position:relative}#hope-landing .hope-mark:before,#hope-landing .hope-mark:after{content:"";position:absolute;background:light-dark(#f4e7c4,#203e2e);border-radius:2px}#hope-landing .hope-mark:before{width:4px;height:25px;left:19px;top:8px}#hope-landing .hope-mark:after{width:18px;height:4px;left:12px;top:15px} #hope-landing .topic-link{display:flex;align-items:center;min-height:54px;padding:16px;background:light-dark(#fff,#223029);border:1px solid light-dark(#d5ded7,#4c6053);border-radius:10px;text-decoration:none}#hope-landing .back-link{display:inline-block;padding:14px 0}#hope-landing #hope-menu{display:none}#hope-landing nav a{padding:12px 0}#hope-landing .identity{min-width:0}@media(max-width:700px){#hope-landing #hope-menu{display:block}#hope-landing nav{display:none;width:100%;flex-direction:column;gap:0}#hope-landing nav.open{display:flex}#hope-landing header{padding:16px 20px}}@media(max-width:360px){#hope-landing .topics{grid-template-columns:1fr}} #hope-landing form{display:grid;gap:12px}#hope-landing textarea,#hope-landing select,#hope-landing input:not([type=checkbox]):not([type=radio]){width:100%;padding:12px;font:inherit;font-size:16px;background:light-dark(#fff,#18231f);color:inherit;border:1px solid light-dark(#c5cec7,#52665a);border-radius:8px}#hope-landing fieldset{border:1px solid light-dark(#d5ded7,#4c6053);border-radius:8px;padding:14px;min-width:0}#hope-landing fieldset label{display:block;padding:10px 0}#hope-landing form>label{padding:8px 0}#hope-landing input[type=checkbox],#hope-landing input[type=radio]{margin-right:8px} :root{color-scheme:light dark;background:#f5f3ed;background:light-dark(#f5f3ed,#18231f)}body{margin:0;background:#f5f3ed;background:light-dark(#f5f3ed,#18231f)}#hope-landing{border-radius:0;min-height:100vh}#hope-landing main{min-height:55vh}#hope-landing .helper{padding:14px;border-left:3px solid light-dark(#2e5743,#b4d6c0);background:light-dark(#e4ece5,#2b3d31)}#hope-landing .resource{padding:16px 0;border-bottom:1px solid light-dark(#d5ded7,#4c6053)}#hope-landing a:focus-visible,#hope-landing button:focus-visible{outline:3px solid #c59636;outline-offset:3px}#hope-landing fieldset label{display:block;padding:10px 0} #hope-landing .contact-list{display:grid;gap:20px}#hope-landing .contact-list article{padding:20px;border:1px solid light-dark(#d5ded7,#4c6053);border-radius:10px}#hope-landing .contact-list h3{font-family:Georgia,serif;font-weight:400;font-size:21px;margin:0 0 8px}#hope-landing button:disabled{opacity:.5;cursor:not-allowed} /* Header logo link */ #hope-landing .identity{text-decoration:none} /* Home hero actions */ #hope-landing .banner-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:8px}#hope-landing .banner-actions .banner-action{margin-top:0}#hope-landing .banner-secondary{color:#f8f4e8;padding:13px 0;text-underline-offset:4px} /* Urgent help */ #hope-landing .urgent{background:light-dark(#fff7e6,#3a2f1c);border:2px solid light-dark(#c59636,#a8823a)}#hope-landing .urgent h2{font-size:23px}#hope-landing .crisis-note{margin:20px 0 0;padding:12px 16px;border-radius:8px;background:light-dark(#fff7e6,#3a2f1c);font-size:15px}#hope-landing .crisis-note a{font-weight:700} /* Navigation links: hover, press and current page */ #hope-landing nav{gap:6px}#hope-landing nav a{padding:9px 14px;border-radius:999px;text-decoration:none;color:light-dark(#2e4a3c,#d4e3da);-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease}#hope-landing nav a:hover{background:light-dark(#e4ece5,#2b3d31);color:light-dark(#1f3b2e,#fff)}#hope-landing nav a:active{background:light-dark(#cfdcd2,#36503f)}#hope-landing nav a[aria-current=page]{background:light-dark(#2e5743,#b4d6c0);color:light-dark(#fff,#15251b)}#hope-landing nav a[aria-current=page]:hover{background:light-dark(#234d3d,#c6e2cf)}@media(max-width:700px){#hope-landing nav{gap:4px;padding-top:8px}#hope-landing nav a{padding:12px 16px;border-radius:10px}}@media(prefers-reduced-motion:reduce){#hope-landing nav a{transition:none}} /* Topic cards: colour per topic, hover lift */ #hope-landing .topic-link{--accent:#2e5743;background:light-dark(color-mix(in srgb,var(--accent) 11%,#fff),color-mix(in srgb,var(--accent) 22%,#223029));border:1px solid light-dark(color-mix(in srgb,var(--accent) 28%,#fff),color-mix(in srgb,var(--accent) 45%,#223029));font-weight:500;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease} #hope-landing .topic-link:hover{background:light-dark(color-mix(in srgb,var(--accent) 22%,#fff),color-mix(in srgb,var(--accent) 36%,#223029));transform:translateY(-3px);box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 28%,transparent)} #hope-landing .topic-link:active{transform:translateY(0);box-shadow:none} #hope-landing .topic-link[href^="money.html"]{--accent:#b8892e} #hope-landing .topic-link[href^="fear.html"]{--accent:#3f7aa6} #hope-landing .topic-link[href^="grief.html"]{--accent:#7a5ea8} #hope-landing .topic-link[href^="family.html"]{--accent:#b65a4c} #hope-landing .topic-link[href^="waiting.html"]{--accent:#5f8a4a} #hope-landing .topic-link[href^="health.html"]{--accent:#2f8a80} #hope-landing .topic-link[href^="lonely.html"]{--accent:#c27740} #hope-landing .topic-link[href^="divorce.html"]{--accent:#5b6f8f} #hope-landing .topic-link[href^="addiction.html"]{--accent:#8f4f7d} @media(prefers-reduced-motion:reduce){#hope-landing .topic-link{transition:none}#hope-landing .topic-link:hover{transform:none}} /* Prayer page */ #hope-landing .lead{font-size:18px}html{scroll-behavior:smooth}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} #hope-landing .panel h3{font-family:Georgia,serif;font-weight:400;font-size:20px;margin:24px 0 8px} #hope-landing .steps{list-style:none;counter-reset:step;padding:0;margin:16px 0;display:grid;gap:14px;max-width:700px}#hope-landing .steps li{counter-increment:step;position:relative;padding-left:46px;line-height:1.6;min-height:32px}#hope-landing .steps li:before{content:counter(step);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:15px;background:light-dark(#2e5743,#b4d6c0);color:light-dark(#fff,#15251b)} #hope-landing .checks{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px;max-width:700px}#hope-landing .checks li{position:relative;padding-left:30px;line-height:1.6}#hope-landing .checks li:before{content:"";position:absolute;left:8px;top:4px;width:7px;height:12px;border-right:2px solid light-dark(#2e5743,#b4d6c0);border-bottom:2px solid light-dark(#2e5743,#b4d6c0);transform:rotate(45deg)} #hope-landing .prayer-card{margin-top:20px;padding:20px 22px;border-radius:10px;background:light-dark(#fff,#18231f);border:1px solid light-dark(#c9d6cc,#4c6053)}#hope-landing .prayer-card p{margin:0}#hope-landing .prayer-card p+p{margin-top:8px;font-family:Georgia,serif;font-size:19px;line-height:1.6} #hope-landing #by-topic{margin:32px 0}#hope-landing #by-topic h2{margin-bottom:4px} /* Books & music */ #hope-landing .filter{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 6px}#hope-landing .filter button{padding:8px 16px;border-radius:999px;font-size:14px;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease}#hope-landing .filter button:hover{background:light-dark(#e4ece5,#2b3d31)}#hope-landing .filter button[aria-pressed=true]{background:light-dark(#2e5743,#b4d6c0);color:light-dark(#fff,#15251b);border-color:transparent} #hope-landing .res-section{margin:32px 0}#hope-landing .res-section h2{margin-bottom:4px} #hope-landing .res-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-top:16px} #hope-landing .res-card{display:flex;flex-direction:column;padding:20px;background:light-dark(#fff,#223029);border:1px solid light-dark(#d5ded7,#4c6053);border-radius:12px;transition:transform .18s ease,box-shadow .18s ease}#hope-landing .res-card:hover{transform:translateY(-3px);box-shadow:0 8px 18px light-dark(#2e574322,#0006)} #hope-landing .res-card h3{font-family:Georgia,serif;font-weight:400;font-size:21px;margin:0 0 4px;line-height:1.3}#hope-landing .res-card p{margin:0 0 12px;line-height:1.55}#hope-landing .res-meta{font-size:14px;color:light-dark(#586c60,#b6c9bd)} #hope-landing .res-card .res-link{margin:auto 0 0;padding-top:6px;font-size:14px;color:light-dark(#586c60,#b6c9bd)}#hope-landing .res-link a{font-size:16px;font-weight:700;color:light-dark(#24352e,#e1ece6);text-underline-offset:3px} #hope-landing .tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px}#hope-landing .tag{--accent:#2e5743;font-size:12px;padding:3px 10px;border-radius:999px;background:light-dark(color-mix(in srgb,var(--accent) 14%,#fff),color-mix(in srgb,var(--accent) 30%,#223029));color:light-dark(color-mix(in srgb,var(--accent) 75%,#000),#eef4f0)} #hope-landing .tag-money{--accent:#b8892e}#hope-landing .tag-fear{--accent:#3f7aa6}#hope-landing .tag-grief{--accent:#7a5ea8}#hope-landing .tag-family{--accent:#b65a4c}#hope-landing .tag-waiting{--accent:#5f8a4a}#hope-landing .tag-health{--accent:#2f8a80}#hope-landing .tag-lonely{--accent:#c27740}#hope-landing .tag-divorce{--accent:#5b6f8f}#hope-landing .tag-addiction{--accent:#8f4f7d} #hope-landing .res-empty{font-style:italic} @media(prefers-reduced-motion:reduce){#hope-landing .res-card{transition:none}#hope-landing .res-card:hover{transform:none}} /* Keep the normal arrow cursor on links and buttons; hover colours show what is clickable */ #hope-landing a,#hope-landing button,#hope-landing .filter button,#hope-landing label{cursor:pointer} #hope-landing .urgent a{font-weight:700} /* ===== Modern link styling: no underlines ===== */ #hope-landing{--link:light-dark(#24573f,#b9dcc6);--mark:light-dark(#2e57432b,#b4d6c033);--mark-strong:light-dark(#2e574340,#b4d6c04d)} #hope-landing a{-webkit-tap-highlight-color:transparent;text-decoration:none} /* Text links: soft highlighter band that fills on hover */ #hope-landing main :where(a:not([class])),#hope-landing footer :where(a){color:var(--link);font-weight:600;background-image:linear-gradient(var(--mark),var(--mark));background-repeat:no-repeat;background-position:0 100%;background-size:100% .38em;border-radius:2px;transition:background-size .2s ease,color .2s ease} #hope-landing main :where(a:not([class])):hover,#hope-landing footer :where(a):hover{background-image:linear-gradient(var(--mark-strong),var(--mark-strong));background-size:100% 100%} /* Help boxes: gold highlight */ #hope-landing .urgent a,#hope-landing .crisis-note a{color:light-dark(#5c3d00,#f3d89a);--mark:light-dark(#c596364d,#c5963640);--mark-strong:light-dark(#c5963680,#c5963666)} #hope-landing footer a{font-weight:500} /* Back link: quiet text */ #hope-landing .back-link{color:light-dark(#586c60,#b6c9bd);font-size:15px;font-weight:500;transition:color .15s ease}#hope-landing .back-link:hover{color:var(--link)} /* Action rows become pill buttons */ #hope-landing .link-row{gap:10px}#hope-landing .link-row a{background:light-dark(#fff,#223029)!important;background-image:none!important;border:1px solid light-dark(#c5cec7,#52665a);border-radius:999px;padding:10px 18px;font-weight:600;color:var(--link);transition:background-color .15s ease,border-color .15s ease}#hope-landing .link-row a:hover{background:light-dark(#e4ece5,#2b3d31)!important;border-color:light-dark(#2e5743,#b4d6c0)} /* Book and hymn links: small pill */ #hope-landing .res-link a{display:inline-block;background-image:none;padding:7px 14px;border-radius:999px;font-size:14px;background:light-dark(#e4ece5,#2b3d31);color:var(--link);transition:background-color .15s ease}#hope-landing .res-link a:hover{background:light-dark(#cfdcd2,#36503f);background-image:none} #hope-landing .banner-secondary{padding:12px 20px;border:1px solid #f8f4e866;border-radius:8px;color:#f8f4e8;transition:background-color .15s ease}#hope-landing .banner-secondary:hover{background:#f8f4e81a} @media(prefers-reduced-motion:reduce){#hope-landing a{transition:none!important}} /* Home banner photo (sunrise). Green tint on the left keeps the headline readable. */ #hope-landing .welcome-banner{min-height:380px;display:flex;flex-direction:column;justify-content:center;background-color:#234d3d;background-image:linear-gradient(90deg,rgba(18,44,34,.94) 0%,rgba(18,44,34,.82) 38%,rgba(18,44,34,.35) 68%,rgba(18,44,34,0) 88%),url(images/banner-1536.webp);background-size:cover;background-position:center 60%} #hope-landing .welcome-banner:after{content:none} #hope-landing .welcome-banner h1,#hope-landing .welcome-banner p{text-shadow:0 1px 12px rgba(0,0,0,.35)} @media(max-width:700px){#hope-landing .welcome-banner{min-height:0;padding-top:215px;background-color:#1d3f32;background-image:linear-gradient(180deg,rgba(29,63,50,0) 0,rgba(29,63,50,0) 130px,rgba(29,63,50,.9) 225px,#1d3f32 270px),url(images/banner-900.webp);background-size:100% 100%,auto 360px;background-position:0 0,88% -70px;background-repeat:no-repeat}}@media(min-width:481px) and (max-width:700px){#hope-landing .welcome-banner{background-size:100% 100%,100% auto;background-position:0 0,0 -120px}} /* Header: name first, slogan secondary */ #hope-landing .identity strong{font-size:18px;letter-spacing:.01em} #hope-landing .identity .small{font-size:12px;margin-top:2px;opacity:.8;letter-spacing:.02em} /* Footer credit line */ #hope-landing footer .credit{flex-basis:100%;max-width:none;margin:6px 0 0;padding-top:14px;border-top:1px solid light-dark(#e2e8e3,#33453a);text-align:center;font-size:12px;color:light-dark(#6b7d72,#9fb3a7)}#hope-landing footer .credit .sep{margin:0 10px;opacity:.6}@media(max-width:600px){#hope-landing footer .credit .sep{display:none}#hope-landing footer .credit>span{display:block;margin:3px 0}} #hope-landing footer .credit a{font-weight:500;color:inherit} /* Urgent help: quick tap-to-call buttons */ #hope-landing .sos h2{margin:0 0 6px}#hope-landing .sos .sos-sub{margin:0 0 16px;font-size:16px} #hope-landing .sos-switch{display:inline-flex;gap:4px;padding:4px;margin-bottom:14px;border-radius:999px;background:light-dark(#f1e3c3,#4a3c22)}#hope-landing .sos-switch[hidden]{display:none!important} #hope-landing .sos-switch button{border:0;border-radius:999px;padding:8px 18px;font-size:14px;font-weight:600;background:transparent;text-align:center;color:light-dark(#5c3d00,#f3d89a)}#hope-landing .sos-switch button[aria-pressed=true]{background:light-dark(#fff,#2a2416);color:light-dark(#2b2208,#fff);box-shadow:0 1px 4px rgba(0,0,0,.12)} #hope-landing .sos-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:12px}#hope-landing .sos-country{grid-column:1/-1;margin:6px 0 0;font-family:Arial,sans-serif;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:light-dark(#7a5a12,#e3c37c)} #hope-landing .urgent .sos-btn{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;font-weight:400;background:light-dark(#fff,#2a2416);background-image:none;border:1px solid light-dark(#e6d3a6,#5a4a2a);color:light-dark(#24352e,#f4efe2);transition:transform .15s ease,box-shadow .15s ease}#hope-landing .urgent .sos-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(92,61,0,.15);background-size:auto} #hope-landing .sos-ico{flex:none;width:36px;height:36px;padding:9px;border-radius:50%;background:light-dark(#2e5743,#b4d6c0);color:light-dark(#fff,#15251b)} #hope-landing .sos-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}#hope-landing .sos-label{font-size:13px;color:light-dark(#586c60,#cbbf9f)}#hope-landing .sos-num{font-size:19px;font-weight:700;letter-spacing:.01em;white-space:nowrap}#hope-landing .sos-meta{font-size:12px;color:light-dark(#586c60,#cbbf9f)} #hope-landing .urgent .sos-main{grid-column:1/-1;padding:16px 18px;background:#234d3d;border-color:#234d3d;color:#fff}#hope-landing .urgent .sos-main .sos-ico{width:44px;height:44px;padding:11px;background:#f1e4bf;color:#234d3d}#hope-landing .sos-main .sos-num{font-size:26px}#hope-landing .sos-main .sos-label,#hope-landing .sos-main .sos-meta{color:#d5e3d8} #hope-landing .sos-more{margin:4px 0 0;font-size:14px} @media(min-width:701px){#hope-landing .sos-group{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}} @media(prefers-reduced-motion:reduce){#hope-landing .urgent .sos-btn{transition:none}#hope-landing .urgent .sos-btn:hover{transform:none}} /* Overdose alert line inside a help box */ #hope-landing .sos-alert{margin:0 0 14px;padding:10px 14px;border-radius:10px;background:light-dark(#fbe9e4,#4a2a24);font-size:15px} /* ===== Responsive polish: phones, tablets, PCs ===== */ /* Notes inside boxes use the full box width */ #hope-landing .helper{max-width:none} /* Touch screens (phones and tablets): finger-sized targets, at least 44px */ @media(pointer:coarse){ #hope-landing nav#hope-nav a,#hope-landing .filter button,#hope-landing .sos-switch button,#hope-landing .res-link a,#hope-landing .link-row a,#hope-landing .banner-action,#hope-landing .banner-secondary{min-height:44px;display:inline-flex;align-items:center;justify-content:center} #hope-landing nav#hope-nav a{justify-content:flex-start} #hope-landing .back-link{padding:12px 0} #hope-landing footer a{display:inline-block;padding:14px 2px;margin:-8px 0} #hope-landing .urgent .sos-btn{min-height:60px} } /* Tablets in portrait: give the header room, switch to the menu button a little earlier */ @media(max-width:820px) and (min-width:701px){#hope-landing nav{gap:2px}#hope-landing nav a{padding-left:11px;padding-right:11px;font-size:14px}} /* Large screens: a little more breathing room */ @media(min-width:1280px){#hope-landing main{max-width:1040px}#hope-landing header,#hope-landing footer{padding-left:40px;padding-right:40px}} /* Small phones */ @media(max-width:400px){#hope-landing main{padding:20px 16px}#hope-landing header{padding:14px 16px}#hope-landing footer{padding:20px 16px}#hope-landing .panel{padding:20px 18px}#hope-landing h1{font-size:30px}#hope-landing .welcome-banner h1{font-size:30px}#hope-landing .topic-link{padding:14px 12px;font-size:15px}} /* Help buttons: smaller buttons stretch to share each row evenly */ #hope-landing .sos-group{display:flex;flex-wrap:wrap}#hope-landing .sos-group[hidden]{display:none}#hope-landing .sos-country,#hope-landing .urgent .sos-main{flex:1 1 100%}#hope-landing .urgent .sos-btn:not(.sos-main){flex:1 1 200px} /* ===== Chat with Hope - Enhanced ===== */ .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} #hope-landing .page-hero.chat-hero{padding:0.85rem 1.4rem;margin:0.5rem 0 0.85rem} #hope-landing .page-hero.chat-hero h1{font-size:22px;margin:0 0 4px} #hope-landing .page-hero.chat-hero .hero-lead{font-size:14px;margin:0} #hope-landing .chat{padding:0;overflow:hidden;border-radius:18px;border:1px solid light-dark(#cde0d5,#395043);box-shadow:0 8px 30px rgba(18,48,33,0.08);background:light-dark(#fff,#1e2a24)} #hope-landing .chat-head{display:flex;align-items:center;gap:14px;padding:14px 20px} #hope-landing .chat-head-info{flex:1;min-width:0} #hope-landing .chat-status-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:2px 0;color:light-dark(#234d3d,#fdfbf4);letter-spacing:0.01em} #hope-landing .chat-status-dot{width:8px;height:8px;border-radius:50%;background:#48c774;box-shadow:0 0 0 2px rgba(72,199,116,0.35);animation:hope-pulse-green 2s infinite} @keyframes hope-pulse-green{0%{box-shadow:0 0 0 0 rgba(72,199,116,0.6)}70%{box-shadow:0 0 0 6px rgba(72,199,116,0)}100%{box-shadow:0 0 0 0 rgba(72,199,116,0)}} #hope-landing .chat-tag{margin:2px 0 0;font-size:12.5px;color:light-dark(#52695c,#b6c9bd);line-height:1.35} #hope-landing .chat-intro{padding:16px 20px} #hope-landing .chat-intro>p{margin-top:0} #hope-landing .chat-notes{margin:0 0 14px;padding-left:18px;font-size:13.5px;line-height:1.5;color:light-dark(#586c60,#b6c9bd)} #hope-landing .chat-start{background:#234d3d;color:#fff;border:0;border-radius:999px;padding:10px 22px;font-weight:600;text-align:center;min-height:42px;transition:background-color .15s ease} #hope-landing .chat-start:hover{background:#2e5f4b} #hope-landing .chat-box{display:flex;flex-direction:column} #hope-landing .chat-box[hidden]{display:none} #hope-landing .chat-log{display:flex;flex-direction:column;gap:12px;padding:16px 20px;height:240px;overflow-y:auto;overscroll-behavior:contain;background:light-dark(#f8f6f0,#19251f)} #hope-landing .msg{max-width:85%;display:flex} #hope-landing .msg p{margin:0;padding:11px 16px;border-radius:18px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px} #hope-landing .msg-bot{align-self:flex-start} #hope-landing .msg-bot p{background:light-dark(#ffffff,#24352d);color:inherit;border:1px solid light-dark(#e0e7e1,#394f43);border-bottom-left-radius:4px;box-shadow:0 2px 6px rgba(18,48,33,0.04)} #hope-landing .msg-user{align-self:flex-end} #hope-landing .msg-user p{background:#244b39;color:#ffffff;border-bottom-right-radius:4px;box-shadow:0 2px 6px rgba(36,75,57,0.18)} #hope-landing .msg-bot a{font-weight:600;color:light-dark(#1f5338,#8dd4ad);text-decoration:underline;text-underline-offset:2px} #hope-landing .msg-typing p{display:flex;gap:5px;padding:12px 16px} #hope-landing .msg-typing span{width:7px;height:7px;border-radius:50%;background:light-dark(#899f91,#718a7b);animation:hope-dot 1.2s infinite ease-in-out} #hope-landing .msg-typing span:nth-child(2){animation-delay:.15s} #hope-landing .msg-typing span:nth-child(3){animation-delay:.3s} @keyframes hope-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} #hope-landing .msg-crisis{align-self:stretch;max-width:none;flex-direction:column;gap:8px;padding:14px 16px;border-radius:14px;background:light-dark(#fff7e6,#3a2f1c);border:2px solid light-dark(#c59636,#a8823a)} #hope-landing .msg-crisis p{padding:0;border:0;background:none;white-space:normal} #hope-landing .crisis-btns{display:flex;flex-wrap:wrap;gap:8px} #hope-landing .crisis-btns a{flex:1 1 180px;text-align:center;padding:11px 14px;border-radius:10px;background:#234d3d;color:#fff;font-weight:700;background-image:none} #hope-landing .crisis-btns a:hover{background:#2e5f4b} #hope-landing .chat-chips-container{padding:10px 18px 8px;background:light-dark(#f2efe6,#1c2822);border-top:1px solid light-dark(#e3ece5,#2d3f35)} #hope-landing .chat-chips-container[hidden]{display:none} #hope-landing .chat-chips-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;color:light-dark(#466653,#9cbfaa);margin-bottom:6px} #hope-landing .chat-chips{display:flex;flex-wrap:wrap;gap:7px} #hope-landing .chat-chips[hidden]{display:none} #hope-landing .chat-chips button{padding:7px 13px;border-radius:999px;font-size:13px;font-weight:500;text-align:left;background:light-dark(#ffffff,#24352d);color:light-dark(#20382b,#eef5f0);border:1.5px solid light-dark(#c7d7cc,#486252);cursor:pointer;transition:all .15s ease;box-shadow:0 1px 3px rgba(0,0,0,0.04);display:inline-flex;align-items:center;gap:5px} #hope-landing .chat-chips button:hover{background:light-dark(#e6f1ea,#324b3e);border-color:light-dark(#27523c,#74ab8b);transform:translateY(-1px);box-shadow:0 3px 8px rgba(0,0,0,0.07)} #hope-landing .chat-chips button:active{transform:translateY(0)} #hope-landing .chat-form{position:relative;display:block;padding:12px 18px;border-top:1px solid light-dark(#e1e8e2,#2d3f35);background:light-dark(#ffffff,#1f2c25)} #hope-landing .chat-input-row{display:flex;align-items:center;gap:10px;width:100%} #hope-landing .chat-form textarea{display:block;width:100%;min-width:0;resize:none;min-height:46px;max-height:120px;border-radius:24px;padding:11px 62px 11px 18px;line-height:1.45;font-size:14.5px;background:light-dark(#fafaf6,#18231e);color:inherit;border:2px solid light-dark(#c8d7cb,#3d5648);transition:all .15s ease} #hope-landing .chat-form textarea:focus{outline:none;border-color:#27523c;background:light-dark(#ffffff,#1c2822);box-shadow:0 0 0 3px rgba(39,82,60,0.18)} #hope-landing .chat-send{position:absolute;z-index:1;right:23px;top:50%;transform:translateY(-50%);width:36px;height:36px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:#234d3d;color:#fff;cursor:pointer;transition:background-color .15s ease,box-shadow .15s ease} #hope-landing .chat-send svg{width:18px;height:18px} #hope-landing .chat-send:hover{background:#2e5f4b;box-shadow:0 3px 10px rgba(35,77,61,0.25)} #hope-landing .chat-send:active{transform:translateY(-50%) scale(0.96)} #hope-landing .chat-send:disabled{opacity:.4;cursor:not-allowed;transform:translateY(-50%);box-shadow:none} #hope-landing .chat-foot{margin:0;padding:9px 18px 11px;font-size:12px;line-height:1.4;background:light-dark(#f8f6f0,#17231d);color:light-dark(#52695c,#a3b8aa);border-top:1px solid light-dark(#e7ede8,#26362e);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px} #hope-landing .chat-foot a{color:inherit;font-weight:600;text-decoration:underline} #hope-landing .chat-disclaimer{margin-top:10px;text-align:center;color:light-dark(#61756a,#9fb2a5)} @media(max-width:600px){ #hope-landing .page-hero.chat-hero{display:none} #hope-landing .chat{margin-top:8px} #hope-landing .chat-head{padding:12px 14px} #hope-landing .chat-log{height:200px;padding:12px} #hope-landing .msg{max-width:92%} #hope-landing .chat-chips-container{padding:8px 12px 6px} #hope-landing .chat-chips button{font-size:12.5px;padding:6px 11px} #hope-landing .chat-form{padding:8px 12px} #hope-landing .chat-foot{padding:7px 12px;font-size:11.5px} } @media(pointer:coarse){#hope-landing .chat-chips button{min-height:40px}} @media(prefers-reduced-motion:reduce){#hope-landing .msg-typing span,#hope-landing .chat-status-dot{animation:none}} /* Support page: contact buttons */ #hope-landing .give-contacts{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0} #hope-landing .give .give-btn{flex:1 1 240px;display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:12px;background:light-dark(#fff,#223029);background-image:none;border:1px solid light-dark(#c9d6cc,#4c6053);color:inherit;font-weight:400;transition:transform .15s ease,box-shadow .15s ease} #hope-landing .give .give-btn:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(46,87,67,.15);background-size:auto} #hope-landing .give-label{font-size:13px;color:light-dark(#586c60,#b6c9bd)}#hope-landing .give-value{font-size:18px;font-weight:700;color:light-dark(#24573f,#b9dcc6);overflow-wrap:anywhere} @media(prefers-reduced-motion:reduce){#hope-landing .give .give-btn{transition:none}#hope-landing .give .give-btn:hover{transform:none}} /* Serve with us */ #hope-landing .role-section{margin:28px 0}#hope-landing .role-section h2{margin-bottom:14px} #hope-landing .role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} #hope-landing .role-card{padding:18px 20px;border-radius:12px;background:light-dark(#fff,#223029);border:1px solid light-dark(#d5ded7,#4c6053);border-top:4px solid light-dark(#2e5743,#b4d6c0)} #hope-landing .role-card h3{margin:0 0 6px;font-family:Georgia,serif;font-weight:400;font-size:20px}#hope-landing .role-card p{margin:0;line-height:1.55} #hope-landing .band-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 24px;border-radius:999px;background:#234d3d;background-image:none;color:#fff;font-weight:600;white-space:nowrap;transition:background-color .15s ease}#hope-landing .band-btn:hover{background:#2e5f4b;background-image:none} #hope-landing .serve-band{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin:36px 0 8px;padding:24px 28px;border-radius:14px;background:light-dark(#efe7d3,#2e2a1e);border:1px solid light-dark(#e2d5b3,#4a4230)} #hope-landing .serve-band h2{margin:0 0 4px;font-size:22px}#hope-landing .serve-band p{margin:0} #hope-landing .team-invite{margin-bottom:0;font-weight:600} @media(max-width:600px){#hope-landing .serve-band{padding:20px}#hope-landing .serve-band .band-btn{width:100%}} /* Sermons */ #hope-landing .sermon-feature{margin:24px 0 36px}#hope-landing .sermon-feature h2{margin-bottom:12px} #hope-landing .sermon-week-box{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start;padding:20px;border-radius:14px;background:light-dark(#fff,#223029);border:1px solid light-dark(#d5ded7,#4c6053)} #hope-landing .sermon-info h3{font-family:Georgia,serif;font-weight:400;font-size:26px;line-height:1.25;margin:4px 0 6px}#hope-landing .sermon-info p{margin:0 0 12px} #hope-landing .sermon-week{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:light-dark(#7a5a12,#e3c37c)}#hope-landing .sermon-meta{color:light-dark(#586c60,#b6c9bd)} #hope-landing .video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#0d1a14}#hope-landing .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} #hope-landing .sermon-local-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#0d1a14} #hope-landing .video-play{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#0d1a14}#hope-landing .video-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.92;transition:opacity .2s ease}#hope-landing .video-play:hover img{opacity:1} #hope-landing .video-icon{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(35,77,61,.92);box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .2s ease}#hope-landing .video-icon:after{content:"";position:absolute;left:27px;top:21px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff}#hope-landing .video-play:hover .video-icon{transform:scale(1.08)} #hope-landing .video:not(.video-big) .video-icon{width:52px;height:52px;margin:-26px 0 0 -26px}#hope-landing .video:not(.video-big) .video-icon:after{left:21px;top:16px;border-width:10px 0 10px 16px} #hope-landing .yt-link{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;background:light-dark(#e4ece5,#2b3d31);background-image:none;color:light-dark(#24573f,#b9dcc6);font-weight:600;font-size:14px}#hope-landing .yt-link:hover{background:light-dark(#cfdcd2,#36503f)} #hope-landing .sermon-card .video{margin:-20px -20px 14px;border-radius:12px 12px 0 0} #hope-landing .sermon-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px} #hope-landing .sermon-card .sermon-actions{margin-top:auto} #hope-landing .share-wa-link{display:inline-flex;align-items:center;min-height:38px;padding:8px 16px;border-radius:999px;background:#25d366;background-image:none;color:#fff!important;font-weight:600;font-size:13px;text-decoration:none;transition:background .15s ease} #hope-landing .share-wa-link:hover{background:#1eb857} #hope-landing .share-copy-btn{display:inline-flex;align-items:center;min-height:38px;padding:8px 14px;border-radius:999px;background:light-dark(#f0f5f1,#28382e);border:1px solid light-dark(#cbded1,#3d5244);color:light-dark(#234d3d,#c4dccb);font-weight:600;font-size:13px;cursor:pointer;transition:all .15s ease} #hope-landing .share-copy-btn:hover{background:light-dark(#e2ebe4,#33473b)} #hope-landing .archive-empty-box{background:light-dark(#f4f8f5,#1f2d25);border:1px dashed light-dark(#cad7cd,#3c4f42);border-radius:12px;padding:24px 20px;text-align:center;margin:16px 0} #hope-landing .archive-empty-box .empty-primary{font-size:15px;color:light-dark(#3a4f43,#c4d4ca);margin:0 0 12px;font-weight:600} #hope-landing .archive-empty-box .empty-suggest{font-size:13px;color:light-dark(#5c7265,#9db3a5)} #hope-landing .archive-empty-box .empty-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px} #hope-landing .archive-empty-box .empty-links .chip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:999px;background:light-dark(#fff,#2a3b30);border:1px solid light-dark(#d2ded5,#44584b);color:light-dark(#1f4b37,#d5e9dc);font-weight:600;font-size:13px;text-decoration:none;transition:all .15s ease} #hope-landing .archive-empty-box .empty-links .chip:hover{background:light-dark(#e9f2eb,#354a3d);border-color:light-dark(#234d3d,#69927b)} @media(max-width:760px){#hope-landing .sermon-week-box{grid-template-columns:1fr;padding:14px}#hope-landing .sermon-info h3{font-size:23px}} @media(prefers-reduced-motion:reduce){#hope-landing .video-icon,#hope-landing .video-play img{transition:none}} /* With five menu items, small tablets use the Menu button too */ @media(max-width:860px){#hope-landing #hope-menu{display:block}#hope-landing nav#hope-nav{display:none;width:100%;flex-direction:column;gap:4px;padding-top:8px}#hope-landing nav#hope-nav.open{display:flex}#hope-landing nav#hope-nav a{padding:12px 16px;border-radius:10px;font-size:15px;justify-content:flex-start}} /* Prayer & testimonies: hub cards and tabs between the four pages */ #hope-landing .hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0} #hope-landing .hub-card{display:flex;flex-direction:column;gap:6px;min-height:150px;padding:22px 24px;border-radius:14px;background:light-dark(#fff,#223029);border:0;box-shadow:0 2px 10px light-dark(#2e574314,#0004);color:inherit;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease} #hope-landing .hub-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px light-dark(#2e574322,#0006);border-color:light-dark(#2e5743,#b4d6c0)} #hope-landing .hub-title{font-family:Georgia,serif;font-size:24px;line-height:1.2}#hope-landing .hub-text{line-height:1.55;color:light-dark(#3d5046,#cfdcd4)} #hope-landing .hub-go{margin-top:auto;padding-top:8px;font-weight:700;font-size:14px;color:light-dark(#24573f,#b9dcc6)} #hope-landing .hub-card:nth-child(1){}#hope-landing .hub-card:nth-child(2){}#hope-landing .hub-card:nth-child(3){}#hope-landing .hub-card:nth-child(4){} #hope-landing .sub-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 22px;padding:5px;border-radius:999px;background:light-dark(#e8ede8,#223029);width:fit-content;max-width:100%} #hope-landing:has(.sub-tabs[aria-label="Sermon formats"]){overflow:visible} #hope-landing:has(.sub-tabs[aria-label="Sermon formats"]) .sub-tabs{position:sticky;top:0;z-index:30} #hope-landing .sub-tabs a{padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:light-dark(#3d5046,#cfdcd4);background:none;transition:background-color .15s ease} #hope-landing .sub-tabs a:hover{background:light-dark(#fff,#2b3d31)}#hope-landing .sub-tabs a[aria-current=page]{background:#234d3d;color:#fff} #hope-landing .by-topic .topics{margin-top:0} @media(max-width:600px){#hope-landing .hub-grid{grid-template-columns:1fr}#hope-landing .hub-card{min-height:0}#hope-landing .sub-tabs{border-radius:14px;width:100%}#hope-landing .sub-tabs a{flex:1 1 40%;text-align:center}} @media(pointer:coarse){#hope-landing .sub-tabs a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}} @media(prefers-reduced-motion:reduce){#hope-landing .hub-card{transition:none}#hope-landing .hub-card:hover{transform:none}} /* ===== Ask for prayer: live form and prayer wall ===== */ #hope-landing .ask-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}#hope-landing .ask-layout .panel{margin:0} #hope-landing:has(.audio-form) .ask-layout{display:flex;flex-direction:column} #hope-landing:has(.audio-form) .ask-layout .ask-info{order:-1;width:100%} #hope-landing:has(.audio-form) .ask-layout .ask-form-panel{width:100%} #hope-landing .ask-info h2{font-size:22px}#hope-landing .ask-info .steps{margin-top:8px} #hope-landing .prayer-form{display:grid;gap:10px}#hope-landing .prayer-form>label{padding:6px 0 0;font-weight:600} #hope-landing .prayer-form fieldset{display:grid;gap:8px;padding:12px 14px}#hope-landing .prayer-form legend{font-weight:600;padding:0 4px} #hope-landing .choice{display:flex;gap:10px;align-items:flex-start;padding:10px 12px!important;border-radius:10px;border:1px solid light-dark(#e1e7e2,#3a4d42);background:light-dark(#fafaf7,#1c2823);line-height:1.45;font-weight:400}#hope-landing .choice input{margin:4px 0 0;flex:none;width:18px;height:18px;accent-color:#2e5743}#hope-landing .choice strong{display:block} #hope-landing .choice:has(input:checked){border-color:light-dark(#2e5743,#b4d6c0);background:light-dark(#eef4ef,#22332a)} #hope-landing .optional{font-weight:400;color:light-dark(#586c60,#b6c9bd)} #hope-landing .consent{font-size:14px} #hope-landing .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} #hope-landing .submit-btn{justify-self:start;min-height:48px;padding:12px 28px;border:0;border-radius:999px;background:#234d3d;color:#fff;font-weight:700;text-align:center;transition:background-color .15s ease}#hope-landing .submit-btn:hover{background:#2e5f4b}#hope-landing .submit-btn:disabled{opacity:.6} #hope-landing .result:empty{display:none}#hope-landing .result-error{padding:10px 14px;border-radius:10px;background:light-dark(#fbe9e4,#4a2a24)}#hope-landing .result-ok{padding:10px 14px;border-radius:10px;background:light-dark(#e4ece5,#2b3d31)} #hope-landing [aria-invalid=true]{border-color:#c0392b!important;outline:2px solid #c0392b33} #hope-landing .prayer-done h2{font-size:24px;margin-top:0}#hope-landing .prayer-done:focus{outline:none}#hope-landing .prayer-done .msg-crisis{margin:14px 0} #hope-landing .wall{margin:36px 0 12px}#hope-landing .wall h2{margin-bottom:4px} #hope-landing .wall-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-top:14px} #hope-landing .wall-card{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:14px;background:light-dark(#fff,#223029);border:0;box-shadow:0 2px 10px light-dark(#2e574314,#0004)} #hope-landing .wall-text{margin:0;white-space:pre-wrap;line-height:1.6;font-size:16px;overflow-wrap:anywhere}#hope-landing .wall-meta{margin:0;font-size:13px;color:light-dark(#586c60,#b6c9bd)} #hope-landing .wall-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px} #hope-landing .pray-btn,#hope-landing .offer-btn{min-height:40px;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;text-align:center} #hope-landing .pray-btn{background:#234d3d;color:#fff;border:0}#hope-landing .pray-btn:hover{background:#2e5f4b}#hope-landing .pray-btn:disabled{background:light-dark(#e4ece5,#2b3d31);color:light-dark(#24573f,#b9dcc6);opacity:1} #hope-landing .offer-btn{background:transparent;border:1px solid light-dark(#c5cec7,#52665a)}#hope-landing .offer-btn:hover{background:light-dark(#e4ece5,#2b3d31)} #hope-landing .offer-form{display:grid;gap:6px;padding-top:6px;border-top:1px solid light-dark(#e1e7e2,#3a4d42)}#hope-landing .offer-form label{font-size:14px;font-weight:600}#hope-landing .offer-form .submit-btn{min-height:42px;padding:9px 20px;margin-top:4px} #hope-landing .wall-status{grid-column:1/-1} @media(max-width:820px){#hope-landing .ask-layout{grid-template-columns:1fr}} @media(pointer:coarse){#hope-landing .pray-btn,#hope-landing .offer-btn{min-height:44px}} #hope-landing .prayer-form>label.choice{font-weight:400} /* ===== Share a testimony: form and Stories of hope ===== */ #hope-landing .testimony-form select{font:inherit;font-size:16px;padding:12px;border-radius:8px} #hope-landing .stories{margin:36px 0 12px}#hope-landing .stories h2{margin-bottom:4px} #hope-landing .story-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:14px} #hope-landing .story-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:22px 24px;border-radius:14px;background:light-dark(#fff,#223029);border:0;box-shadow:0 2px 10px light-dark(#2e574314,#0004)} #hope-landing .story-card h3{font-family:Georgia,serif;font-weight:400;font-size:22px;line-height:1.3;margin:2px 0 0} #hope-landing .story-body p{margin:0 0 10px;line-height:1.65;overflow-wrap:anywhere} #hope-landing .story-body.clamped{max-height:11.5em;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 65%,transparent);mask-image:linear-gradient(180deg,#000 65%,transparent)} #hope-landing .story-more{padding:6px 14px;border-radius:999px;font-size:14px;font-weight:600;text-align:center;min-height:38px} #hope-landing .story-meta{margin:auto 0 0;padding-top:6px;font-style:italic;color:light-dark(#586c60,#b6c9bd)} @media(max-width:400px){#hope-landing .story-list{grid-template-columns:1fr}} @media(pointer:coarse){#hope-landing .story-more{min-height:44px}} /* Floating action button: always visible on the prayer wall and shared testimonies pages */ #hope-landing main{padding-bottom:96px} #hope-landing .fab{position:fixed;right:28px;bottom:28px;z-index:40;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:14px 26px;border-radius:999px;background:#234d3d;background-image:none;color:#fff;font-weight:700;font-size:16px;box-shadow:0 8px 24px rgba(20,45,35,.35),0 2px 6px rgba(0,0,0,.15);transition:transform .15s ease,background-color .15s ease} #hope-landing .fab:before{content:"+";font-size:22px;line-height:1;font-weight:400} #hope-landing .fab:hover{background:#2e5f4b;transform:translateY(-2px)} #hope-landing:has(.fab) footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))} @media(max-width:600px){#hope-landing main{padding-bottom:112px}#hope-landing .fab{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}#hope-landing:has(.fab) footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))}} @media(prefers-reduced-motion:reduce){#hope-landing .fab{transition:none}#hope-landing .fab:hover{transform:none}} /* ===== Professional balance, light mode only: green header and footer, sage page, white cards ===== */ @media (prefers-color-scheme: light){ body{background:#dde7e0} #hope-landing{background:#e6eee8;color:#1f2f28} #hope-landing header{background:#234d3d;box-shadow:0 2px 10px rgba(20,45,35,.25)} #hope-landing header .identity,#hope-landing header strong{color:#f8f4e8} #hope-landing header .small{color:#c9dccf} #hope-landing header .hope-mark{background:#f1e4bf} #hope-landing header .hope-mark:before,#hope-landing header .hope-mark:after{background:#234d3d} #hope-landing nav a{color:#e3eee7} #hope-landing nav a:hover{background:rgba(255,255,255,.14);color:#fff} #hope-landing nav a:active{background:rgba(255,255,255,.22)} #hope-landing nav a[aria-current=page],#hope-landing nav a[aria-current=page]:hover{background:#f1e4bf;color:#234d3d} #hope-landing #hope-menu{background:transparent;color:#f8f4e8;border-color:rgba(248,244,232,.5)} #hope-landing .small{color:#4a5f54} #hope-landing .welcome-banner .small{color:#d5e3d8} #hope-landing .back-link{color:#4a5f54} #hope-landing .hub-card,#hope-landing .wall-card,#hope-landing .story-card{box-shadow:0 2px 12px rgba(35,77,61,.14)} #hope-landing .res-card,#hope-landing .role-card,#hope-landing .panel,#hope-landing .sermon-week-box,#hope-landing .topic-link{box-shadow:0 1px 6px rgba(35,77,61,.10)} #hope-landing footer{background:#1b3f31;color:#d3e2d8;border-top:0} #hope-landing footer a{color:#f1e4bf;--mark:rgba(241,228,191,.18);--mark-strong:rgba(241,228,191,.3)} } /* ===== Topic pages: hero, cards and next-step tiles (app-style layout) ===== */ #hope-landing .topic-page{--accent:#2e5743} #hope-landing .topic-money{--accent:#b8892e}#hope-landing .topic-fear{--accent:#3f7aa6}#hope-landing .topic-grief{--accent:#7a5ea8}#hope-landing .topic-family{--accent:#b65a4c}#hope-landing .topic-waiting{--accent:#5f8a4a}#hope-landing .topic-health{--accent:#2f8a80}#hope-landing .topic-lonely{--accent:#c27740}#hope-landing .topic-divorce{--accent:#5b6f8f}#hope-landing .topic-addiction{--accent:#8f4f7d} #hope-landing .topic-hero{margin:6px 0 20px;padding:22px 26px;border-radius:16px;color:#f8f4e8;background:linear-gradient(110deg,#234d3d 0%,#234d3d 55%,color-mix(in srgb,var(--accent) 55%,#234d3d) 100%);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px} #hope-landing .topic-kicker{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:color-mix(in srgb,var(--accent) 70%,#fff);color:#102a20} #hope-landing .topic-hero h1{margin:8px 0 4px;font-size:28px;max-width:none;color:#fff;flex-basis:100%} #hope-landing .topic-sub{margin:0;font-size:15.5px;color:#d5e3d8;flex:1 1 300px} #hope-landing .topic-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:0} #hope-landing .hero-btn{display:inline-flex;align-items:center;min-height:38px;padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:600;text-decoration:none;background:#f1e4bf;background-image:none;color:#234d3d} #hope-landing .hero-btn:hover{background:#fff} #hope-landing .hero-btn.hero-ghost{background:transparent;color:#f8f4e8;border:1px solid #f8f4e866} #hope-landing .hero-btn.hero-ghost:hover{background:#f8f4e81a} #hope-landing .topic-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 28px} #hope-landing .t-card{padding:26px 28px;border-radius:16px;background:light-dark(#fff,#223029);box-shadow:0 2px 12px light-dark(#234d3d24,#0004)} #hope-landing .t-card p{line-height:1.7} #hope-landing .t-label{margin:0 0 14px;font-family:Arial,sans-serif;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:light-dark(color-mix(in srgb,var(--accent) 80%,#000),color-mix(in srgb,var(--accent) 40%,#fff))} #hope-landing .t-verse{grid-column:1/-1;background:light-dark(color-mix(in srgb,var(--accent) 12%,#fff),color-mix(in srgb,var(--accent) 24%,#223029))} #hope-landing .t-verse blockquote{margin:0 0 10px;font-family:Georgia,serif;font-size:26px;line-height:1.5} #hope-landing .t-verse .small{font-weight:700;margin:0 0 14px} #hope-landing .t-prayer{background:#234d3d;color:#f8f4e8} #hope-landing .t-prayer .t-label{color:#f1e4bf} #hope-landing .t-prayer p{font-family:Georgia,serif;font-size:19px;font-style:italic;margin:0} #hope-landing .next-title{margin:8px 0 14px;font-size:22px} #hope-landing .next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:0 0 24px} #hope-landing .next-tile{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 48px 20px 22px;border-radius:14px;background:light-dark(#fff,#223029);background-image:none;box-shadow:0 2px 10px light-dark(#234d3d1f,#0004);color:inherit;text-decoration:none;font-weight:400} #hope-landing .next-tile strong{font-size:17px} #hope-landing .next-tile span{font-size:14px;line-height:1.5;color:light-dark(#4a5f54,#b6c9bd)} #hope-landing .next-tile em{position:absolute;right:20px;top:50%;transform:translateY(-50%);font-style:normal;font-size:22px;color:light-dark(#2e5743,#b4d6c0)} #hope-landing .next-tile:hover{background:light-dark(color-mix(in srgb,var(--accent) 10%,#fff),#2b3d31);background-image:none} @media (max-width:760px){ #hope-landing .topic-cards,#hope-landing .next-grid{grid-template-columns:1fr} #hope-landing .topic-hero{padding:28px 22px} #hope-landing .topic-hero h1{font-size:30px} #hope-landing .t-verse blockquote{font-size:22px} } /* ===== Help icon: always visible, links to the helplines on the Talk to someone page ===== */ #hope-landing .sos-alert{margin:0 0 20px;padding:12px 16px;border-radius:10px;background:light-dark(#fbe9e4,#4a2a24);font-size:15px} /* ===== Ask for prayer / Share your story button: moonlight yellow, centred at the bottom ===== */ #hope-landing .fab{right:auto;left:50%;transform:translateX(-50%);bottom:28px;min-height:60px;padding:16px 32px;font-size:18px;background:#ffe872;color:#1f3b2e;box-shadow:0 8px 26px rgba(20,45,35,.4),0 0 0 4px rgba(255,232,114,.45)} #hope-landing .fab:hover{background:#fff1a3;transform:translateX(-50%) translateY(-2px)} #hope-landing .fab:before{font-weight:700;font-size:26px} @media(max-width:600px){ #hope-landing .fab{left:16px;right:16px;transform:none;bottom:calc(16px + env(safe-area-inset-bottom))} #hope-landing .fab:hover{transform:none} #hope-landing:has(.fab) footer{padding-bottom:calc(110px + env(safe-area-inset-bottom))} } /* ===== Help icon in the header: links to the helplines on the Talk to someone page ===== */ #hope-landing header .identity{order:1;margin-right:auto} #hope-landing header nav{order:3} #hope-landing header #hope-menu{order:2} #hope-landing .help-icon{order:4;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:7px 14px 7px 11px;border-radius:999px;background:#c0392b;background-image:none;color:#fff;font-size:14px;font-weight:700;text-decoration:none;transition:background-color .15s ease} #hope-landing .help-icon svg{width:18px;height:18px;flex:none} #hope-landing .help-icon:hover{background:#a93226;background-image:none} @media(max-width:700px){#hope-landing .help-icon{order:2;margin-left:auto}#hope-landing header .identity{margin-right:0}#hope-landing header #hope-menu{order:3}#hope-landing header nav{order:4}} /* ===== Ask for prayer / Share your story button: smaller, bottom-right, clear of the footer ===== */ #hope-landing .fab{left:auto;right:20px;bottom:20px;transform:none;min-height:44px;padding:10px 20px;font-size:15px;gap:8px;box-shadow:0 6px 18px rgba(20,45,35,.35),0 0 0 3px rgba(255,232,114,.5)} #hope-landing .fab:hover{transform:translateY(-2px)} #hope-landing .fab:before{font-size:20px} #hope-landing:has(.fab) footer{padding-bottom:calc(84px + env(safe-area-inset-bottom))} @media(max-width:600px){ #hope-landing .fab{left:auto;right:14px;bottom:calc(14px + env(safe-area-inset-bottom))} #hope-landing .fab:hover{transform:none} #hope-landing:has(.fab) footer{padding-bottom:calc(98px + env(safe-area-inset-bottom))} } /* ===== Ask for prayer / Share your story button: follows you down the page, then stops above the footer ===== */ @supports (overflow:clip){ #hope-landing{overflow:clip} #hope-landing .fab{position:sticky;left:auto;right:auto;transform:none;bottom:calc(20px + env(safe-area-inset-bottom));display:flex;width:fit-content;max-width:100%;margin:24px 0 20px auto} #hope-landing .fab:hover{transform:translateY(-2px)} #hope-landing:has(.fab) footer{padding-bottom:20px} } @media(max-width:600px){ @supports (overflow:clip){#hope-landing .fab{bottom:calc(14px + env(safe-area-inset-bottom));margin-bottom:14px;font-size:14px;padding:9px 18px;min-height:42px}#hope-landing .fab:hover{transform:none}} } /* Button rests close to the footer */ @supports (overflow:clip){ #hope-landing main:has(.fab){padding-bottom:12px} #hope-landing .fab{margin-bottom:0} } /* Rotating verse: gentle fade when it changes */ #hope-landing .t-verse blockquote,#hope-landing .t-verse>p{transition:opacity .25s ease} #hope-landing .t-verse.is-changing blockquote,#hope-landing .t-verse.is-changing>p{opacity:0} #hope-landing .t-rotate{margin:14px 0 0;font-size:12px;opacity:.8} /* ===== Listen: daily audio messages ===== */ #hope-landing .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} #hope-landing .audio-today{margin:8px 0 28px} #hope-landing .audio-hero-box{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center;padding:28px;border-radius:18px;color:#f8f4e8;background:linear-gradient(110deg,#234d3d 0%,#234d3d 60%,#2f6b55 100%);box-shadow:0 4px 18px rgba(20,45,35,.25)} #hope-landing .portrait{width:200px;height:200px;border-radius:50%;object-fit:cover;background:#2e5743;border:4px solid #f1e4bf} #hope-landing .audio-title{margin:12px 0 2px;font-size:30px;color:#fff} #hope-landing .audio-by{margin:0 0 10px;font-size:17px;color:#d5e3d8} #hope-landing .audio-intro{margin:12px 0 16px;line-height:1.65;color:#eef4ef} #hope-landing .audio-hero-box .tag{background:#f1e4bf;color:#234d3d} #hope-landing .player{margin-top:6px} #hope-landing .player-row{display:flex;align-items:center;gap:14px} #hope-landing .play-btn{flex:none;width:68px;height:68px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:#ffe872;color:#1f3b2e;box-shadow:0 6px 18px rgba(0,0,0,.3);transition:transform .12s ease,background-color .15s ease} #hope-landing .play-btn svg{width:32px;height:32px} #hope-landing .play-btn:hover{background:#fff1a3;transform:scale(1.05)} #hope-landing .skip{padding:8px 12px;min-height:40px;border-radius:999px;border:1px solid #f8f4e866;background:transparent;color:#f8f4e8;font-size:14px;font-weight:600;text-align:center} #hope-landing .skip:hover{background:#f8f4e81a} #hope-landing .player-track{display:flex;align-items:center;gap:12px;margin-top:14px} #hope-landing .seek{flex:1;min-width:0;width:auto;padding:0;border:0;height:28px;background:transparent;accent-color:#ffe872} #hope-landing .time{flex:none;color:#d5e3d8;min-width:84px;text-align:right} #hope-landing .player-note{margin:8px 0 0;color:#ffd9d2} #hope-landing .audio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:16px} #hope-landing .audio-card{display:flex;gap:16px;align-items:center;padding:16px;border-radius:14px;background:light-dark(#fff,#223029);box-shadow:0 2px 10px light-dark(#234d3d1f,#0004)} #hope-landing .thumb{flex:none;width:84px;height:84px;border-radius:50%;object-fit:cover;background:light-dark(#e4ece5,#2b3d31)} #hope-landing .audio-card-body{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px} #hope-landing .audio-card h3{margin:0;font-family:Georgia,serif;font-weight:400;font-size:19px;line-height:1.3} #hope-landing .audio-card .small{margin:0} #hope-landing .listen-btn{margin-top:6px;padding:8px 18px;border-radius:999px;border:0;background:#234d3d;color:#fff;font-weight:600;font-size:14px;text-align:center} #hope-landing .listen-btn:hover{background:#2e5f4b} #hope-landing .photo-preview img{width:120px;height:120px;object-fit:cover;border-radius:50%;border:3px solid light-dark(#d5ded7,#4c6053)} #hope-landing .audio-form input[type=file]{padding:10px;background:light-dark(#fff,#18231f)} #hope-landing .upload-progress{width:100%;height:10px;accent-color:#234d3d} #hope-landing .audio-banner{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;margin:0 0 24px;padding:16px 20px;border-radius:14px;background:#ffe872;color:#1f3b2e} #hope-landing .audio-banner strong{font-size:17px} #hope-landing .audio-banner a{display:inline-flex;align-items:center;min-height:42px;padding:9px 20px;border-radius:999px;background:#234d3d;background-image:none;color:#fff;font-weight:700;text-decoration:none} @media(max-width:700px){ #hope-landing .audio-hero-box{grid-template-columns:1fr;justify-items:center;text-align:center;padding:24px 18px} #hope-landing .portrait{width:160px;height:160px} #hope-landing .audio-title{font-size:25px} #hope-landing .player{width:100%} #hope-landing .player-row{justify-content:center} #hope-landing .audio-hero-box .audio-hero-body{display:flex;flex-direction:column;align-items:center} } /* ===== Modern page top: breadcrumb pill, clean sans-serif title and intro ===== */ #hope-landing .back-link{display:inline-flex;align-items:center;gap:8px;padding:7px 16px 7px 12px;margin:0 0 12px;border-radius:999px;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;text-decoration:none;background:light-dark(#fff,#223029);background-image:none;color:light-dark(#234d3d,#b9dcc6);box-shadow:0 1px 6px light-dark(#234d3d1f,#0004);transition:background-color .15s ease,box-shadow .15s ease} #hope-landing .back-link:before{content:"";width:8px;height:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-right:2px} #hope-landing .back-link:hover{background:light-dark(#f3f9f5,#2b3d31);background-image:none;color:light-dark(#1b3f31,#fff);box-shadow:0 2px 10px light-dark(#234d3d33,#0006)} #hope-landing main>h1{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.15;font-size:36px;max-width:none} #hope-landing main>.lead{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;font-size:18px;line-height:1.6;color:light-dark(#3d5046,#cfdcd4);max-width:680px} @media(max-width:700px){#hope-landing main>h1{font-size:28px}} /* ===== Same clean font across the whole site, including the menu bar ===== */ #hope-landing{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif} #hope-landing button,#hope-landing input,#hope-landing select,#hope-landing textarea{font-family:inherit} #hope-landing nav a{font-size:15px;font-weight:600;letter-spacing:.005em} #hope-landing header strong{font-size:18px;font-weight:700;letter-spacing:-.01em} /* Listen page: readable "Today's message" label on the green card */ #hope-landing .audio-hero-box .topic-kicker{background:#f1e4bf;color:#234d3d} #hope-landing .audio-hero-box h2,#hope-landing .audio-hero-box p{color:inherit} #hope-landing .audio-hero-box .audio-title{color:#fff} #hope-landing .audio-hero-box .audio-by{color:#d5e3d8} #hope-landing .audio-hero-box .audio-intro{color:#eef4ef} /* ===== Home: "What are you facing today?" cards with icons, a softer modern look ===== */ #hope-landing .topics{gap:14px} #hope-landing .topic-link{position:relative;gap:14px;min-height:78px;padding:16px 22px;border:0;border-radius:16px;font-size:17px;font-weight:600;line-height:1.3;box-shadow:0 2px 10px light-dark(#234d3d1f,#0004)} /* ===== Talk to someone: clear order, quick-choice tiles and a tidy card grid ===== */ #hope-landing .talk-jump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:20px 0 28px;padding:0;background:none} #hope-landing .talk-jump a{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border-radius:16px;background:light-dark(#fff,#223029);background-image:none;box-shadow:0 2px 10px light-dark(#234d3d1f,#0004);color:inherit;text-decoration:none} #hope-landing .talk-jump strong{font-size:17px} #hope-landing .talk-jump span{font-size:14px;line-height:1.45;color:light-dark(#4a5f54,#b6c9bd)} #hope-landing .talk-jump a:hover{background:light-dark(#f3f9f5,#2b3d31);background-image:none} #hope-landing .talk-jump a.jump-urgent{background:#c0392b;color:#fff} #hope-landing .talk-jump a.jump-urgent span{color:#fbe3de} #hope-landing .talk-jump a.jump-urgent:hover{background:#a93226} #hope-landing .more-title{margin:36px 0 14px;font-size:24px} #hope-landing .talk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 28px;align-items:start} #hope-landing .talk-card{padding:22px 24px;border-radius:16px;background:light-dark(#fff,#223029);box-shadow:0 2px 10px light-dark(#234d3d1f,#0004)} #hope-landing .talk-card h3{margin:0 0 8px;font-family:inherit;font-size:19px;font-weight:700;display:flex;align-items:center;gap:10px;flex-wrap:wrap} #hope-landing .talk-card p{margin:0 0 10px;line-height:1.6} #hope-landing .talk-card p:last-child{margin-bottom:0} #hope-landing .soon{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:light-dark(#efe7d3,#4a4230);color:light-dark(#5c3d00,#f3d89a)} #hope-landing .talk-link{display:inline-flex;align-items:center;min-height:44px;padding:10px 22px;margin-top:6px;border-radius:999px;background:#234d3d;background-image:none;color:#fff;font-weight:600;text-decoration:none} #hope-landing .talk-link:hover{background:#2e5f4b;background-image:none} #hope-landing #urgent,#hope-landing #chat{scroll-margin-top:16px} @media(max-width:760px){ #hope-landing .talk-jump,#hope-landing .talk-grid{grid-template-columns:1fr} } /* ===== Talk to someone: lively hero and colourful cards ===== */ #hope-landing .page-hero{position:relative;overflow:hidden;margin:6px 0 20px;padding:22px 26px;border-radius:16px;color:#f8f4e8;background:radial-gradient(circle at 88% 18%,rgba(255,232,114,.35) 0,rgba(255,232,114,0) 38%),radial-gradient(circle at 72% 110%,rgba(120,200,170,.45) 0,rgba(120,200,170,0) 46%),linear-gradient(120deg,#234d3d 0%,#2a6350 60%,#357a63 100%);box-shadow:0 6px 18px rgba(20,45,35,.18);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px}#hope-landing .page-hero:not(:has(.hero-actions)){display:block}#hope-landing .page-hero .hero-copy{flex:1 1 380px;min-width:0}#hope-landing .page-hero .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:0 1 auto}#hope-landing .page-hero .hero-actions a,#hope-landing .page-hero .hero-actions button{cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;min-height:38px;padding:7px 16px;border-radius:999px;font-size:13.5px;font-weight:600;text-decoration:none;background:rgba(248,244,232,.14);border:1px solid rgba(248,244,232,.35);color:#f8f4e8;background-image:none;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease,color .15s ease}#hope-landing .page-hero .hero-actions a:hover,#hope-landing .page-hero .hero-actions button:hover{background:rgba(248,244,232,.26);border-color:#f8f4e8;color:#fff}#hope-landing .page-hero .hero-actions a.primary,#hope-landing .page-hero .hero-actions button.primary,#hope-landing .page-hero .hero-actions a[aria-current=page]{background:#ffe872;border-color:#ffe872;color:#1f3b2e;font-weight:700}#hope-landing .page-hero .hero-actions a.primary:hover,#hope-landing .page-hero .hero-actions button.primary:hover,#hope-landing .page-hero .hero-actions a[aria-current=page]:hover{background:#fff1a3;border-color:#fff1a3;color:#1f3b2e} #hope-landing .page-hero h1{margin:8px 0 4px;font-size:28px;color:#fff;max-width:640px} #hope-landing .page-hero .topic-kicker{background:#ffe872;color:#234d3d} #hope-landing .hero-lead{margin:0;max-width:580px;font-size:15.5px;line-height:1.5;color:#e3eee7} #hope-landing .talk-page .hub-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:0 0 24px} #hope-landing .talk-page .hub-card{--accent:#2e5743;min-height:170px;padding:26px 28px;border-radius:20px;border:0;gap:8px;background:light-dark(color-mix(in srgb,var(--accent) 11%,#fff),color-mix(in srgb,var(--accent) 22%,#223029));box-shadow:0 2px 12px light-dark(#234d3d1f,#0004);transition:transform .2s ease,box-shadow .2s ease} #hope-landing .talk-page .hub-card:nth-child(1){--accent:#c0392b} #hope-landing .talk-page .hub-card:nth-child(2){--accent:#2e8a6a} #hope-landing .talk-page .hub-card:nth-child(3){--accent:#b8892e} #hope-landing .talk-page .hub-card:nth-child(4){--accent:#3f7aa6} #hope-landing .talk-page .hub-title{font-family:inherit;font-weight:700;font-size:22px;letter-spacing:-.01em} #hope-landing .talk-page .hub-text{font-size:16px;line-height:1.6} #hope-landing .talk-page .hub-go{align-self:flex-start;margin-top:auto;padding:8px 20px;border-radius:999px;background:var(--accent);color:#fff;font-size:14px} #hope-landing .talk-page .hub-card:hover{transform:translateY(-4px);box-shadow:0 12px 26px color-mix(in srgb,var(--accent) 30%,transparent);border-color:transparent} #hope-landing .talk-page .talk-card{border-radius:18px} @media(max-width:760px){ #hope-landing .talk-page .hub-grid{grid-template-columns:1fr} #hope-landing .page-hero{padding:18px 20px} #hope-landing .page-hero h1{font-size:24px} } /* ===== Menu: "Talk to someone" stands out as the call-to-action ===== */ #hope-landing nav a[href="talk.html"]{background:#ffe872;color:#234d3d;font-weight:700} #hope-landing nav a[href="talk.html"]:hover,#hope-landing nav a[href="talk.html"][aria-current=page]{background:#fff1a3;color:#234d3d} #hope-landing nav a[href="talk.html"]:active{background:#ffe04a} @media(max-width:700px){#hope-landing nav a[href="talk.html"]{margin-top:6px;text-align:center}} /* ===== Balance pass: one consistent title style, readable footer, steady spacing ===== */ #hope-landing .page-hero h1,#hope-landing .topic-hero h1,#hope-landing .welcome-banner h1{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.15} #hope-landing .welcome-banner h1{font-size:40px} #hope-landing .page-hero{margin-top:8px} #hope-landing .page-hero h1{margin:0 0 8px} #hope-landing .page-hero .topic-kicker+h1{margin-top:14px} #hope-landing .hero-lead{max-width:640px} #hope-landing footer .credit,#hope-landing footer .credit span{color:#b9cdbf} #hope-landing footer .credit .sep{color:#6f9080} #hope-landing main>section.page-hero+*{margin-top:0} /* Keep the three Sermons format banners steady when switching pages */ #hope-landing:has(.sub-tabs[aria-label="Sermon formats"]) .page-hero{min-height:0} @media(max-width:760px){#hope-landing:has(.sub-tabs[aria-label="Sermon formats"]) .page-hero{min-height:0}} @media(max-width:700px){#hope-landing .welcome-banner h1{font-size:30px}} /* Hub card titles match across Prayer and Talk to someone */ #hope-landing .hub-title{font-family:inherit;font-weight:700;font-size:22px;letter-spacing:-.01em} #hope-landing .hub-go{display:inline-flex;align-self:flex-start;padding:7px 18px;border-radius:999px;background:light-dark(#e4ece5,#2b3d31)} /* Volunteer counsellor profiles */ #hope-landing .counsellor-section{margin-bottom:32px} #hope-landing .counsellor-section>h2{margin:0 0 8px} #hope-landing .counsellor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),360px));gap:22px;margin:22px 0} #hope-landing .counsellor-card{overflow:hidden;border-radius:20px;background:light-dark(#fff,#223029);box-shadow:0 2px 12px light-dark(#234d3d1f,#0004)} #hope-landing .counsellor-photo{position:relative;background:#e4ece5} #hope-landing .counsellor-photo img{display:block;width:100%;height:260px;object-fit:cover} #hope-landing .counsellor-photo span{position:absolute;bottom:16px;left:16px;padding:6px 12px;border-radius:999px;background:#fff;color:#234d3d;font-size:13px} #hope-landing .counsellor-details{padding:24px} #hope-landing .counsellor-role{color:light-dark(#456c55,#b6d8c3);font-size:14px;font-weight:600} #hope-landing .counsellor-details h3{font-family:inherit;font-size:23px;margin:8px 0 12px} #hope-landing .counsellor-details p{line-height:1.6} #hope-landing .counsellor-status{padding:12px 14px;background:light-dark(#f0f4ef,#2b3d31);border-radius:12px;font-size:14px;margin-bottom:0} /* Clickable counsellor cards and full profiles */ #hope-landing .volunteer-intro{white-space:pre-wrap;overflow-wrap:anywhere} #hope-landing .volunteer-form{max-width:680px} #hope-landing .volunteer-form .small{margin:0 0 8px} #hope-landing .counsellor-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),260px));gap:16px;margin:18px 0} #hope-landing .counsellor-card-link .counsellor-photo img{height:150px} #hope-landing .counsellor-card-link .counsellor-photo span{bottom:10px;left:10px;padding:4px 9px;font-size:11px} #hope-landing .counsellor-card-link .counsellor-details{padding:16px} #hope-landing .counsellor-card-link .counsellor-role{font-size:12px} #hope-landing .counsellor-card-link .counsellor-details h3{font-size:19px;line-height:1.3;margin:6px 0 8px} #hope-landing .counsellor-card-link .counsellor-details p{font-size:14px;line-height:1.5;margin:0 0 10px} #hope-landing .counsellor-card-link .talk-link{font-size:13px;min-height:44px;padding:8px 14px;margin-top:0;gap:8px} #hope-landing .counsellor-card-link{display:block;color:inherit;text-decoration:none;transition:box-shadow .2s ease} #hope-landing .counsellor-card-link:hover{box-shadow:0 8px 24px light-dark(#234d3d33,#0006)} #hope-landing .counsellor-card-link:focus-visible{outline:3px solid light-dark(#234d3d,#ffe872);outline-offset:5px} #hope-landing .profile-layout{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:24px;align-items:start;margin-bottom:28px} #hope-landing .profile-photo{overflow:hidden;border-radius:20px} #hope-landing .profile-photo img{height:auto;aspect-ratio:6/5;object-fit:cover} #hope-landing .profile-copy{display:grid;gap:20px} #hope-landing .profile-copy h2{margin:0 0 14px;font-family:inherit;font-size:23px} #hope-landing .profile-contact dl{margin:0} #hope-landing .profile-contact dt{font-weight:700;margin-top:16px} #hope-landing .profile-contact dt:first-child{margin-top:0} #hope-landing .profile-contact dd{margin:4px 0 0;line-height:1.6} @media(max-width:760px){#hope-landing .profile-layout{grid-template-columns:1fr}#hope-landing .profile-photo{max-width:360px;width:100%}} /* Talk page polish */ #hope-landing .talk-page .hub-card:nth-child(n){--accent:#2e5743} #hope-landing .talk-page .hub-card:nth-child(1){--accent:#a8382b} #hope-landing .talk-page .hub-card{min-height:0;padding:24px 26px;border:1px solid light-dark(#dbe6de,#33463b);box-shadow:0 1px 3px light-dark(#234d3d14,#0004);background:light-dark(#fff,#223029)} #hope-landing .talk-page .hub-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px light-dark(#234d3d24,#0006);border-color:light-dark(#9fb6a8,#4d6657)} #hope-landing .talk-page .hub-title{font-size:20px} #hope-landing .talk-page .hub-text{font-size:15px;color:light-dark(#4a5f54,#cfdcd4)} #hope-landing .talk-page .hub-go{background:none;padding:8px 0 0;color:light-dark(var(--accent),#b9dcc6);font-weight:600} #hope-landing .talk-page .hub-card:hover .hub-go{color:light-dark(#0000ee,#7ab8ff);text-decoration:none} #hope-landing .talk-page .more-title{margin:40px 0 16px;padding-top:28px;border-top:1px solid light-dark(#dbe6de,#33463b);font-size:22px} #hope-landing .counsellor-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),380px))} #hope-landing .counsellor-card-link{display:flex;align-items:center;gap:18px;padding:20px 22px;border:1px solid light-dark(#dbe6de,#33463b);border-radius:16px;box-shadow:0 1px 3px light-dark(#234d3d14,#0004)} #hope-landing .counsellor-card-link:hover{box-shadow:0 8px 20px light-dark(#234d3d24,#0006);border-color:light-dark(#9fb6a8,#4d6657)} #hope-landing .counsellor-avatar{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#234d3d,#357a63);color:#f8f4e8;font-size:24px;font-weight:600;letter-spacing:.04em} #hope-landing .counsellor-card-link .counsellor-details{padding:0} #hope-landing .counsellor-card-link .counsellor-role{text-transform:uppercase;letter-spacing:.06em;font-size:11px} #hope-landing .counsellor-card-link .talk-link{background:none;color:light-dark(#234d3d,#b9dcc6);min-height:0;padding:0;font-size:14px;font-weight:600} #hope-landing .counsellor-card-link:hover .talk-link{text-decoration:underline} #hope-landing .talk-notice{margin:28px 0 0;padding:14px 18px;border-radius:8px;background:light-dark(#fbf6e8,#2b3d31);font-size:14px;line-height:1.6;color:light-dark(#4a4030,#e3eee7)} @media(max-width:600px){#hope-landing .counsellor-card-link{padding:16px}#hope-landing .counsellor-avatar{width:60px;height:60px;font-size:20px}} #hope-landing img.counsellor-avatar{object-fit:cover;object-position:center 30%;background:#e4ece5} #hope-landing .profile-photo img{aspect-ratio:1/1;object-position:center 30%} /* Compact counsellor card */ #hope-landing .counsellor-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),300px));gap:14px;margin:16px 0} #hope-landing .counsellor-card-link{position:relative;gap:14px;padding:14px 16px;border:0;border-radius:14px;overflow:hidden;background:light-dark(linear-gradient(100deg,#f1f7f3,#fff 70%),linear-gradient(100deg,#2b3d31,#223029 70%));box-shadow:0 1px 4px light-dark(#234d3d1f,#0004)} #hope-landing img.counsellor-avatar{width:60px;height:60px;border:3px solid #ffe872;box-shadow:0 0 0 2px #234d3d} #hope-landing .counsellor-card-link .counsellor-details h3{font-size:17px;margin:3px 0 4px} #hope-landing .counsellor-card-link .counsellor-details p{font-size:13px;line-height:1.4;margin:0 0 6px} #hope-landing .counsellor-card-link .counsellor-role{font-size:10px} #hope-landing .counsellor-card-link .talk-link{font-size:13px} /* Smaller round portrait on the profile page */ #hope-landing .profile-layout{grid-template-columns:minmax(0,200px) minmax(0,1fr)} #hope-landing .profile-photo{width:200px;height:200px;border-radius:50%;border:4px solid #ffe872;box-shadow:0 0 0 3px #234d3d,0 6px 16px #234d3d33} #hope-landing .profile-photo img{width:100%;height:100%;aspect-ratio:1/1} @media(max-width:760px){#hope-landing .profile-layout{grid-template-columns:1fr;justify-items:center}#hope-landing .profile-photo{width:170px;height:170px;max-width:170px}#hope-landing .profile-copy{width:100%}} #hope-landing .role-card{border-top:1px solid light-dark(#d5ded7,#4c6053)} /* Modern role cards */ #hope-landing .role-grid{grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px} #hope-landing .role-card{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid light-dark(#e3ece6,#33463b);border-radius:18px;background:light-dark(#fff,#223029);box-shadow:0 1px 3px light-dark(#234d3d12,#0004);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease} #hope-landing .role-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px light-dark(#234d3d1f,#0006);border-color:light-dark(#b9d0c1,#4d6657)} #hope-landing .role-card h3{margin:2px 0 0;font-family:inherit;font-size:18px;font-weight:700;letter-spacing:-.01em} #hope-landing .role-card p{font-size:15px;line-height:1.55;color:light-dark(#4a5f54,#cfdcd4)} @media(prefers-reduced-motion:reduce){#hope-landing .role-card{transition:none}#hope-landing .role-card:hover{transform:none}} /* Our story page */ #hope-landing .story{max-width:720px;margin:0 auto} #hope-landing .story section{margin:0 0 34px} #hope-landing .story h2{margin:0 0 12px;font-family:inherit;font-size:24px;font-weight:700;letter-spacing:-.01em} #hope-landing .story p{font-size:18px;line-height:1.75;margin:0 0 16px} #hope-landing .story blockquote{margin:22px 0;padding:6px 0 6px 20px;border-left:4px solid light-dark(#2e5743,#b4d6c0);font-family:Georgia,serif;font-size:24px;line-height:1.4;font-style:italic} #hope-landing .story-hopes{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:12px} #hope-landing .story-hopes li{padding:16px 20px;border-radius:14px;background:light-dark(#fff,#223029);border:1px solid light-dark(#e3ece6,#33463b);font-size:17px;line-height:1.65} #hope-landing .story-sign{display:flex;align-items:center;gap:18px;margin:36px 0 8px;padding:20px 0 0;border-top:1px solid light-dark(#dbe6de,#33463b)} #hope-landing .story-sign div:last-child{display:grid;gap:2px} #hope-landing .story-sign span{font-size:14px;color:light-dark(#4a5f54,#b6c9bd)} #hope-landing .story-portrait,#hope-landing img.story-portrait{flex:none;display:grid;place-items:center;width:110px;height:110px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#234d3d,#357a63);color:#f8f4e8;font-size:34px;font-weight:600;letter-spacing:.04em} #hope-landing .story-page .talk-notice{max-width:720px;margin:28px auto 0} @media(max-width:600px){#hope-landing .story p{font-size:17px}#hope-landing .story blockquote{font-size:21px}#hope-landing .story-portrait{width:88px;height:88px;font-size:28px}} #hope-landing .story-next{padding:22px 24px;border-radius:16px;background:light-dark(#e8f1eb,#2b3d31)} #hope-landing .story-next p:last-child{margin-bottom:0} /* Contact card */ #hope-landing .profile-contact{position:relative;overflow:hidden;padding:28px 30px;border-radius:22px;color:#f8f4e8;background:radial-gradient(circle at 92% 8%,rgba(255,232,114,.28) 0,rgba(255,232,114,0) 40%),radial-gradient(circle at 70% 120%,rgba(120,200,170,.4) 0,rgba(120,200,170,0) 50%),linear-gradient(130deg,#234d3d 0%,#2a6350 65%,#357a63 100%);box-shadow:0 10px 28px rgba(20,45,35,.25)} #hope-landing .profile-contact h2{margin:0 0 20px;color:#fff;font-size:26px;font-weight:700;letter-spacing:-.02em} #hope-landing .contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 26px} #hope-landing .contact-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;border-radius:999px;background:#f8f4e8;background-image:none;color:#1b3f31;font-weight:700;font-size:16px;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.18);transition:transform .18s ease,box-shadow .18s ease} #hope-landing .contact-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.25);background:#fff;color:#1b3f31} #hope-landing .contact-btn-alt{background:transparent;color:#fff;border:2px solid rgba(248,244,232,.7);box-shadow:none} #hope-landing .contact-btn-alt:hover{background:rgba(255,255,255,.14);color:#fff;box-shadow:none} #hope-landing .contact-btn:focus-visible{outline:3px solid #ffe872;outline-offset:3px} #hope-landing .profile-contact .contact-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 28px;margin:0;padding-top:20px;border-top:1px solid rgba(248,244,232,.28)} #hope-landing .profile-contact .contact-details div{padding:6px 0} #hope-landing .profile-contact .contact-details dt{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#cfe3d8} #hope-landing .profile-contact .contact-details dd{margin:0;font-size:17px;line-height:1.5;color:#fff} @media(max-width:600px){#hope-landing .profile-contact{padding:22px 20px}#hope-landing .contact-btn{width:100%}} @media(prefers-reduced-motion:reduce){#hope-landing .contact-btn{transition:none}#hope-landing .contact-btn:hover{transform:none}} /* Profile cards, professional pass */ #hope-landing .profile-layout{gap:28px;align-items:start} #hope-landing .profile-copy{gap:18px} #hope-landing .profile-copy>.talk-card:not(.profile-contact){padding:28px 30px;border:1px solid light-dark(#dfe8e2,#33463b);border-radius:20px;background:light-dark(#fff,#223029);box-shadow:0 1px 3px light-dark(#234d3d12,#0004),0 8px 24px light-dark(#234d3d0d,#0003)} #hope-landing .profile-copy>.talk-card:not(.profile-contact) h2{margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid light-dark(#e3ece6,#33463b);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:light-dark(#456c55,#b6d8c3)} #hope-landing .profile-copy>.talk-card:not(.profile-contact) p{font-size:17px;line-height:1.75;color:light-dark(#2b3a32,#e3eee7)} #hope-landing .profile-contact{border-radius:20px;box-shadow:0 8px 24px rgba(20,45,35,.2)} #hope-landing .profile-contact h2{font-size:22px;margin-bottom:18px} @media(max-width:760px){#hope-landing .profile-copy>.talk-card:not(.profile-contact){padding:22px 20px}} /* Sermons: listen banner */ #hope-landing .audio-banner{gap:14px 24px;margin:0 0 28px;padding:20px 24px;border:1px solid light-dark(#cfe0d5,#3d5446);border-radius:18px;background:light-dark(linear-gradient(100deg,#eaf3ed,#f7faf8),linear-gradient(100deg,#2b3d31,#223029));color:light-dark(#1f3b2e,#e3eee7);box-shadow:0 1px 3px light-dark(#234d3d12,#0004)} #hope-landing .audio-banner strong{display:block;margin-bottom:2px;font-size:18px;letter-spacing:-.01em} #hope-landing .audio-banner div div{font-size:15px;line-height:1.5;color:light-dark(#4a5f54,#b6c9bd)} #hope-landing .audio-banner a{min-height:46px;padding:10px 26px;background:#234d3d;color:#fff;box-shadow:0 2px 8px #234d3d40;transition:background-color .15s ease,transform .15s ease} #hope-landing .audio-banner a:hover{background:#2e5f4b;transform:translateY(-1px)} #hope-landing .audio-banner a:focus-visible{outline:3px solid light-dark(#234d3d,#ffe872);outline-offset:3px} @media(max-width:600px){#hope-landing .audio-banner{padding:18px 20px}#hope-landing .audio-banner a{width:100%;justify-content:center}} /* Volunteer application: welcoming hierarchy and grouped fields */ #hope-landing:has(.volunteer-form) main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:18px 24px;min-height:0;padding-bottom:24px} #hope-landing:has(.volunteer-form) main>.back-link,#hope-landing:has(.volunteer-form) main>.page-hero,#hope-landing:has(.volunteer-form) main>.role-section,#hope-landing:has(.volunteer-form) main>#apply{grid-column:1/-1} #hope-landing:has(.volunteer-form) main>.page-hero{margin-bottom:4px} #hope-landing:has(.volunteer-form) .role-section>h2,#hope-landing:has(.volunteer-form) .panel>h2{margin:0 0 16px;font-family:Georgia,"Times New Roman",serif;font-size:28px;font-weight:400;color:light-dark(#1f3d2e,#e3eee7)} #hope-landing:has(.volunteer-form) .role-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0} #hope-landing:has(.volunteer-form) .role-card{padding:18px;border:1px solid light-dark(#dce5de,#405448);border-radius:8px;background:light-dark(#fff,#223029)} #hope-landing:has(.volunteer-form) .role-card h3{margin:0 0 8px;font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:400;color:light-dark(#1f3d2e,#e3eee7)} #hope-landing:has(.volunteer-form) .role-card p{margin:0;font-size:14px;line-height:1.6} #hope-landing:has(.volunteer-form) main>.panel:not(#apply){margin:0;padding:22px 0;border-block:1px solid light-dark(#dce5de,#405448);border-radius:0;background:transparent;box-shadow:none} #hope-landing:has(.volunteer-form) main>#apply{margin:0;padding:28px;border:1px solid light-dark(#dce5de,#405448);border-radius:8px;background:light-dark(#fff,#223029)} #hope-landing:has(.volunteer-form) #apply>p{margin:0 0 20px} #hope-landing .volunteer-form{max-width:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"name-label role-label" "name role" "email-label phone-label" "email phone" "phone-help phone-help" "location-label availability-label" "location availability" "intro-label intro-label" "intro intro" "qual-label qual-label" "qual qual" "photo-label photo-label" "photo photo" "photo-help photo-help" "consent consent" "submit ." "result result";gap:8px 20px;align-items:start} #hope-landing .volunteer-form>label[for="v-name"]{grid-area:name-label} #hope-landing .volunteer-form>#v-name{grid-area:name} #hope-landing .volunteer-form>label[for="v-role"]{grid-area:role-label} #hope-landing .volunteer-form>#v-role{grid-area:role} #hope-landing .volunteer-form>label[for="v-email"]{grid-area:email-label} #hope-landing .volunteer-form>#v-email{grid-area:email} #hope-landing .volunteer-form>label[for="v-phone"]{grid-area:phone-label} #hope-landing .volunteer-form>#v-phone{grid-area:phone} #hope-landing .volunteer-form>p:nth-of-type(1){grid-area:phone-help} #hope-landing .volunteer-form>label[for="v-location"]{grid-area:location-label} #hope-landing .volunteer-form>#v-location{grid-area:location} #hope-landing .volunteer-form>label[for="v-availability"]{grid-area:availability-label} #hope-landing .volunteer-form>#v-availability{grid-area:availability} #hope-landing .volunteer-form>label[for="v-intro"]{grid-area:intro-label} #hope-landing .volunteer-form>#v-intro{grid-area:intro} #hope-landing .volunteer-form>label[for="v-qualifications"]{grid-area:qual-label} #hope-landing .volunteer-form>#v-qualifications{grid-area:qual} #hope-landing .volunteer-form>label[for="v-photo"]{grid-area:photo-label} #hope-landing .volunteer-form>#v-photo{grid-area:photo} #hope-landing .volunteer-form>p:nth-of-type(2){grid-area:photo-help} #hope-landing .volunteer-form>label:has([name="consent"]){grid-area:consent;display:flex;align-items:flex-start;gap:10px;padding:14px 0;line-height:1.6} #hope-landing .volunteer-form>label:has([name="consent"]) input{flex:none;margin:4px 0 0} #hope-landing .volunteer-form>.submit-btn{grid-area:submit;justify-self:start} #hope-landing .volunteer-form>.result{grid-area:result} @media(max-width:760px){ #hope-landing:has(.volunteer-form) main{grid-template-columns:1fr;gap:18px} #hope-landing:has(.volunteer-form) main>.back-link,#hope-landing:has(.volunteer-form) main>.page-hero,#hope-landing:has(.volunteer-form) main>.role-section,#hope-landing:has(.volunteer-form) main>#apply{grid-column:1} #hope-landing:has(.volunteer-form) .role-grid{grid-template-columns:repeat(2,minmax(0,1fr))} #hope-landing .volunteer-form{grid-template-columns:1fr;grid-template-areas:"name-label" "name" "role-label" "role" "email-label" "email" "phone-label" "phone" "phone-help" "location-label" "location" "availability-label" "availability" "intro-label" "intro" "qual-label" "qual" "photo-label" "photo" "photo-help" "consent" "submit" "result"} #hope-landing:has(.volunteer-form) main>#apply{padding:22px} } @media(max-width:460px){#hope-landing:has(.volunteer-form) .role-grid{grid-template-columns:1fr}} /* Shared navigation typography */ #hope-landing nav#hope-nav a,#hope-landing header #hope-menu{font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;font-size:14px;font-weight:500;letter-spacing:0} /* Talk page: clear, welcoming counsellor profile card */ #hope-landing .talk-page .counsellor-grid{grid-template-columns:minmax(0,440px);gap:14px;margin:18px 0} #hope-landing .talk-page .counsellor-card-link{display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:16px;padding:16px 18px;border:1px solid light-dark(#dbe6de,#405448);border-radius:12px;background:light-dark(#f3f7f3,#223029);box-shadow:0 1px 5px light-dark(#234d3d12,#0003);transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease} #hope-landing .talk-page .counsellor-card-link:hover{background:light-dark(#edf4ef,#26382e);border-color:light-dark(#9fb6a8,#617868);box-shadow:0 6px 16px light-dark(#234d3d1a,#0005)} #hope-landing .talk-page img.counsellor-avatar{width:84px;height:84px;border:0;border-radius:50%;box-shadow:none;object-fit:cover;object-position:center 30%} #hope-landing .talk-page .counsellor-card-link .counsellor-role{text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:light-dark(#6b5a31,#dfc37f)} #hope-landing .talk-page .counsellor-card-link .counsellor-details h3{margin:5px 0 7px;font-family:Georgia,"Times New Roman",serif;font-size:23px;font-weight:400;line-height:1.25;color:light-dark(#1f3d2e,#edf3ee)} #hope-landing .talk-page .counsellor-card-link .counsellor-details p{margin:0 0 10px;font-size:14px;line-height:1.5;color:light-dark(#52645a,#c7d5cc)} #hope-landing .talk-page .counsellor-origin{display:block;margin:0 0 10px;font-size:12px;line-height:1.35;color:light-dark(#6b7d71,#a8baad)} #hope-landing .talk-page .counsellor-card-link .talk-link{display:inline-flex;min-height:0;padding:0;background:none;color:light-dark(#24573f,#b9dcc6);font-size:14px;font-weight:600} #hope-landing .talk-page .counsellor-card-link:hover .talk-link{color:light-dark(#0000ee,#7ab8ff);text-decoration:none} @media(max-width:460px){#hope-landing .talk-page .counsellor-card-link{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:14px}#hope-landing .talk-page img.counsellor-avatar{width:64px;height:64px}#hope-landing .talk-page .counsellor-card-link .counsellor-details h3{font-size:19px}} @media(prefers-reduced-motion:reduce){#hope-landing .talk-page .counsellor-card-link{transition:none}} /* Footer links: color-only hover for clear contrast */ #hope-landing footer a{background-image:none;background-size:0 0;transition:color .15s ease} #hope-landing footer a:hover{color:#fff;background-image:none;background-size:0 0} #hope-landing .talk-notice a{color:light-dark(#5c3d00,#f3d89a);background-image:none;background-size:0 0;transition:color .15s ease} #hope-landing .talk-notice a:hover{color:light-dark(#0000ee,#7ab8ff);background-image:none;background-size:0 0} /* Song of the day: slim "now playing" bar */ #hope-landing .song-section{margin:0 0 24px} #hope-landing .song-bar{padding:8px 14px 8px 8px;border-radius:999px;background:light-dark(#fff,#223029);box-shadow:0 2px 10px light-dark(#234d3d1f,#0004);transition:border-radius .2s ease} #hope-landing .song-bar.is-playing{border-radius:22px} #hope-landing .song-row{display:flex;align-items:center;gap:14px} #hope-landing .song-play{position:relative;flex:none;width:56px;height:56px;padding:0;border:0;border-radius:50%;overflow:hidden;background:#0d1a14;cursor:pointer} #hope-landing .song-play img{width:100%;height:100%;object-fit:cover;display:block;opacity:.85;transition:opacity .2s ease} #hope-landing .song-play:hover img{opacity:1} #hope-landing .song-icon{position:absolute;inset:0;margin:auto;width:26px;height:26px;border-radius:50%;background:rgba(35,77,61,.92)} #hope-landing .song-icon:after{content:"";position:absolute;left:10px;top:7px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff} #hope-landing .song-bar.is-playing .song-icon:after{left:8px;top:8px;width:10px;height:10px;border:0;background:#fff;border-radius:2px} #hope-landing .song-text{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3} #hope-landing .song-kicker{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:light-dark(#24573f,#b9dcc6)} #hope-landing .song-eq{display:inline-flex;align-items:flex-end;gap:2px;height:10px} #hope-landing .song-eq i{display:block;width:3px;height:4px;border-radius:2px;background:currentColor;opacity:.55} #hope-landing .song-bar.is-playing .song-eq i{animation:song-eq 0.9s ease-in-out infinite;opacity:1} #hope-landing .song-eq i:nth-child(2){animation-delay:.2s} #hope-landing .song-eq i:nth-child(3){animation-delay:.4s} @keyframes song-eq{0%,100%{height:3px}50%{height:10px}} #hope-landing .song-title{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #hope-landing .song-by{font-size:13px;color:light-dark(#586c60,#b6c9bd);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #hope-landing .song-yt{flex:none;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;background:light-dark(#e4ece5,#2b3d31);background-image:none;color:light-dark(#24573f,#b9dcc6)} #hope-landing .song-yt:hover{background:light-dark(#cfdcd2,#36503f)} #hope-landing .song-bar{transition:border-radius .35s ease,opacity .22s ease,transform .22s ease} #hope-landing .song-bar.is-swapping{opacity:0;transform:translateY(4px)} #hope-landing .song-stage{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s cubic-bezier(.22,.8,.3,1),opacity .3s ease} #hope-landing .song-bar.is-playing .song-stage{grid-template-rows:1fr;opacity:1} #hope-landing .song-stage-inner{min-height:0;overflow:hidden;padding:0 8px} #hope-landing .song-bar.is-playing .song-stage-inner{padding:12px 8px 8px} #hope-landing .song-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:6px 0 0} #hope-landing .song-btn{min-height:34px;padding:5px 14px;border:0;border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;background:light-dark(#e4ece5,#2b3d31);color:light-dark(#24573f,#b9dcc6);transition:background-color .15s ease} #hope-landing .song-btn:hover{background:light-dark(#cfdcd2,#36503f)} #hope-landing .song-stage .video{margin:0;max-width:560px;border-radius:12px;background:#0d1a14} #hope-landing .song-why{margin:10px 0 4px;font-size:14px;line-height:1.5} #hope-landing .song-more{font-size:13px;font-weight:600} @media (max-width:560px){#hope-landing .song-yt{display:none}#hope-landing .song-title{font-size:16px}} @media (prefers-reduced-motion:reduce){#hope-landing .song-bar.is-playing .song-eq i{animation:none;height:8px}} @media (prefers-reduced-motion:reduce){ #hope-landing .song-bar,#hope-landing .song-stage{transition:none} } #hope-landing .talk-support-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);grid-template-areas:"counsellors support";gap:28px;align-items:start;margin-top:24px} #hope-landing .talk-support-sidebar{grid-area:support;padding:22px;border:1px solid light-dark(#dbe6de,#33463b);border-radius:18px;background:light-dark(#f5f8f5,#202d25)} #hope-landing .talk-support-sidebar .more-title{margin:0 0 16px;padding:0;border:0;font-size:21px} #hope-landing .talk-support-sidebar .hub-grid{grid-template-columns:1fr;gap:12px;margin:0} #hope-landing .talk-support-sidebar .hub-card{padding:18px;border-radius:14px} #hope-landing .talk-support-sidebar .hub-title{font-size:18px} #hope-landing .talk-support-sidebar .hub-text{font-size:14px;line-height:1.5} #hope-landing .talk-support-sidebar .hub-go{padding:4px 0 0} #hope-landing .talk-page .counsellor-section{grid-area:counsellors;margin:0;padding:28px;border:1px solid light-dark(#dbe6de,#405448);border-radius:20px;background:light-dark(#fff,#202d25);box-shadow:0 4px 18px light-dark(#234d3d12,#0003)} #hope-landing .talk-page .counsellor-section>h2{font-size:clamp(26px,3vw,34px);line-height:1.2;color:light-dark(#1f3d2e,#edf3ee)} #hope-landing .talk-page .counsellor-section>p:not(.small){font-size:16px;line-height:1.55;color:light-dark(#52645a,#c7d5cc)} #hope-landing .talk-page .counsellor-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;max-width:none} #hope-landing .talk-page .counsellor-card-link{min-width:0} #hope-landing .talk-page .hero-actions a.primary{font-weight:700} #hope-landing .talk-page #counsellor-heading{scroll-margin-top:24px} @media(max-width:760px){ #hope-landing .talk-support-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"counsellors" "support";gap:20px} #hope-landing .talk-page .counsellor-section{padding:22px} #hope-landing .talk-support-sidebar{padding:18px} } #hope-landing .urgent.sos{padding:clamp(20px,4vw,32px);border:1px solid light-dark(#dce6df,#394b40);border-radius:18px;background:light-dark(#fff,#202d25);box-shadow:0 3px 14px light-dark(#234d3d10,#0003)} #hope-landing .urgent.sos h2{font-size:clamp(22px,3vw,28px);line-height:1.25;color:light-dark(#243b30,#edf3ee)} #hope-landing .urgent.sos .sos-sub{max-width:680px;color:light-dark(#52645a,#c7d5cc);line-height:1.55} #hope-landing .sos-switch{gap:2px;padding:3px;border:1px solid light-dark(#dce6df,#394b40);background:light-dark(#f3f6f3,#26352c)} #hope-landing .sos-switch button{color:light-dark(#52645a,#c7d5cc)} #hope-landing .sos-switch button[aria-pressed=true]{background:light-dark(#fff,#35473b);color:light-dark(#234d3d,#edf3ee);box-shadow:0 1px 3px light-dark(#234d3d1a,#0004)} #hope-landing .sos-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0} #hope-landing .sos-country{grid-column:1/-1;margin:0;padding:0 0 10px;border-bottom:1px solid light-dark(#e4ebe5,#394b40);font-size:17px;font-weight:700;letter-spacing:0;text-transform:none;color:light-dark(#315d47,#c7dfcc)} #hope-landing .urgent .sos-btn,#hope-landing .urgent .sos-main{grid-column:auto;min-width:0;min-height:78px;padding:14px 16px;border:1px solid light-dark(#dce6df,#394b40);border-radius:14px;background:light-dark(#f6f9f6,#26352c);color:light-dark(#24352e,#f4efe2);box-shadow:none;transition:border-color .15s ease,background-color .15s ease} #hope-landing .urgent .sos-btn:hover{transform:translateY(-1px);border-color:light-dark(#9fb6a8,#617868);background:light-dark(#eef5ef,#2d4034);box-shadow:0 4px 12px light-dark(#234d3d12,#0003)} #hope-landing .urgent .sos-main{grid-column:1/-1;border-left:1px solid light-dark(#dce6df,#394b40);background:light-dark(#f6f9f6,#26352c);color:light-dark(#24352e,#f4efe2)} #hope-landing .urgent .sos-main .sos-ico{width:36px;height:36px;padding:9px;background:light-dark(#dcecdf,#405b48);color:light-dark(#315d47,#e4f0e5)} #hope-landing .urgent .sos-ico{width:34px;height:34px;padding:8px;background:light-dark(#e1ebe3,#354b3c);color:light-dark(#315d47,#d7e8da)} #hope-landing .sos-label{font-size:13px;color:light-dark(#586c60,#c7d5cc)} #hope-landing .sos-num,#hope-landing .sos-main .sos-num{font-size:21px;color:light-dark(#234d3d,#edf3ee)} #hope-landing .sos-main .sos-label,#hope-landing .sos-main .sos-meta{color:light-dark(#52645a,#c7d5cc)} #hope-landing .sos-meta{font-size:12px;color:light-dark(#586c60,#c7d5cc)} #hope-landing .sos-more{margin:12px 0 0;color:light-dark(#52645a,#c7d5cc)} #hope-landing .urgent .sos-more a{color:light-dark(#315d47,#b9dcc6)} #hope-landing .urgent .sos-btn:not(.sos-main){min-height:88px} @media(min-width:521px){#hope-landing .sos-group{grid-template-columns:repeat(3,minmax(0,1fr))}#hope-landing .urgent .sos-btn:not(.sos-main){height:100%}} @media(max-width:520px){#hope-landing .sos-group{grid-template-columns:minmax(0,1fr)}#hope-landing .urgent .sos-main{grid-column:auto}} /* Awareness noticeboard and advert placements */ #hope-landing .awareness-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:28px;margin:28px 0} #hope-landing .awareness-layout h2{margin:0 0 8px;font-size:24px} #hope-landing .awareness-layout>section>p{margin:0 0 20px;color:light-dark(#556d5f,#a3b9ab)} #hope-landing .awareness-empty{padding:38px 24px;border:1px dashed light-dark(#bccbc0,#52665a);border-radius:14px;text-align:center;background:light-dark(#faf9f5,#1e2a23)} #hope-landing .awareness-icon{width:48px;height:48px;color:light-dark(#55765f,#a3c4ad)} #hope-landing .awareness-empty h3{font-family:Georgia,serif;font-size:24px;font-weight:400;margin:16px 0 10px} #hope-landing .awareness-empty p{margin:0 auto 20px;max-width:420px} #hope-landing .awareness-empty a{display:inline-block;padding:10px 0;font-weight:600;text-underline-offset:4px} #hope-landing .awareness-invite{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;scroll-margin-top:20px} #hope-landing .awareness-eyebrow{display:block;margin-bottom:12px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:light-dark(#80601e,#e4c67c)} #hope-landing .awareness-invite h2{font-size:24px;line-height:1.25;margin:0 0 10px} #hope-landing .awareness-invite p{font-size:14px;line-height:1.55} #hope-landing .awareness-contact{display:block;padding:12px 18px;border-radius:999px;background:#234d3d;color:#fff;text-align:center;text-decoration:none;font-size:14px;font-weight:600;transition:all .15s ease} #hope-landing .awareness-contact:hover{background:#2e5f4b;transform:translateY(-1px);box-shadow:0 3px 10px rgba(35,77,61,0.25)} #hope-landing .awareness-phone{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;padding:11px 18px;border-radius:999px;background:light-dark(#fff,#222d25);border:1.5px solid light-dark(#cad7cd,#43584a);color:inherit;font-size:13.5px;font-weight:600;text-decoration:none;transition:all .15s ease} #hope-landing .awareness-phone:hover{background:light-dark(#edf4ef,#2a3a30);border-color:#234d3d} #hope-landing .awareness-invite .awareness-sponsor-note{margin:12px 0 0;padding-top:14px;border-top:1px solid light-dark(#ded7c5,#514d3b);font-size:12px;color:light-dark(#6b685a,#aba795)} #hope-landing .awareness-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:20px} #hope-landing .awareness-card{overflow:hidden;min-width:0;border:1px solid light-dark(#d5ded7,#4c6053);border-radius:16px;background:light-dark(#fff,#223029);box-shadow:0 4px 14px rgba(18,48,33,0.05);transition:transform .15s ease,box-shadow .15s ease} #hope-landing .awareness-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(18,48,33,0.1)} #hope-landing .awareness-poster{display:block;width:100%;aspect-ratio:779/220;object-fit:cover;background:light-dark(#eeece4,#18231f)} #hope-landing .awareness-card-body{padding:22px;overflow-wrap:anywhere} #hope-landing .awareness-card-body h3{font-family:Georgia,serif;font-size:21px;line-height:1.3;font-weight:400;margin:12px 0 8px;word-break:break-word} #hope-landing .awareness-card-body p{margin:0 0 10px;font-size:14.5px;line-height:1.55} #hope-landing .awareness-card-body p.small{font-size:13px;color:light-dark(#556d5f,#a3b9ab);margin-bottom:14px} #hope-landing .awareness-card-body>a{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;background:#234d3d;color:#fff;font-weight:600;font-size:13.5px;text-decoration:none;transition:all .15s ease} #hope-landing .awareness-card-body>a:hover{background:#2e5f4b;transform:translateY(-1px);box-shadow:0 3px 10px rgba(35,77,61,0.22);color:#fff} #hope-landing .awareness-labels{display:flex;align-items:center;flex-wrap:wrap;gap:8px} #hope-landing .awareness-sponsored{padding:3px 9px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:light-dark(#f5ecd5,#493d25);color:light-dark(#755516,#f2d99d)} #hope-landing .awareness-category{padding:3px 9px;border-radius:4px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;background:light-dark(#e5eee7,#2a3d32);color:light-dark(#214c38,#a5cfb4)} @media(max-width:880px){ #hope-landing .awareness-layout{grid-template-columns:minmax(0,1fr);gap:24px} #hope-landing .awareness-empty{padding:28px 20px} } @media(max-width:600px){ #hope-landing .awareness-card-body{padding:16px} #hope-landing .awareness-card-body h3{font-size:18px} #hope-landing .awareness-card-body>a{width:100%;justify-content:center} } #hope-landing .awareness-banner-placeholder{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;aspect-ratio:779/220;background:linear-gradient(135deg,#1f4334 0%,#2e5f4b 50%,#437d63 100%);color:#f8f4e8;font-family:Georgia,serif;font-size:20px;font-weight:400;letter-spacing:.02em;padding:20px;text-align:center} #hope-landing .awareness-card-body a.action-card-link{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;background:#234d3d;color:#fff;font-weight:600;font-size:13.5px;text-decoration:none;transition:all .15s ease} #hope-landing .awareness-card-body a.action-card-link:hover{background:#2e5f4b;transform:translateY(-1px);box-shadow:0 3px 10px rgba(35,77,61,0.22);color:#fff} /* ===== Awareness Prime Billboard & Tier Boxes ===== */ #hope-landing .awareness-billboard-wrap{margin:1.25rem 0 2rem} #hope-landing .awareness-billboard{position:relative;overflow:hidden;border-radius:18px;background:light-dark(#ffffff,#1f2d26);border:1px solid light-dark(#d5ded7,#3d5447);border-top:4px solid #c59636;box-shadow:0 8px 30px rgba(18,48,33,0.08);transition:transform .2s ease,box-shadow .2s ease} #hope-landing .awareness-billboard:hover{transform:translateY(-2px);box-shadow:0 12px 36px rgba(18,48,33,0.12)} #hope-landing .billboard-header-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:10px 22px;background:linear-gradient(135deg,#1b3d30 0%,#25503d 100%);color:#f8f4e8;font-size:12px} #hope-landing .billboard-badge-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #hope-landing .billboard-badge-prime{display:inline-flex;align-items:center;gap:5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:11px;padding:3px 11px;border-radius:999px;background:#c59636;color:#fff;box-shadow:0 2px 6px rgba(197,150,54,0.3)} #hope-landing .billboard-badge-sponsored{display:inline-flex;align-items:center;font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11px;padding:2px 8px;border-radius:4px;background:rgba(255,255,255,0.2);color:#f8f4e8} #hope-landing .billboard-book-link{color:#ffe872;font-weight:600;text-decoration:underline;text-underline-offset:3px;font-size:12px;transition:color .15s ease} #hope-landing .billboard-book-link:hover{color:#fff} #hope-landing .billboard-content-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:center} #hope-landing .billboard-media{width:100%;aspect-ratio:779/220;overflow:hidden;background:light-dark(#eeece4,#18231f)} #hope-landing .billboard-media img{width:100%;height:100%;object-fit:cover;display:block} #hope-landing .billboard-body{padding:14px 22px;display:flex;flex-direction:column;justify-content:center} #hope-landing .billboard-body h2{font-family:Georgia,serif;font-size:24px;font-weight:400;line-height:1.25;margin:0 0 10px;color:inherit} #hope-landing .billboard-body p{margin:0 0 8px;font-size:14.5px;line-height:1.55;color:light-dark(#455e50,#b2c7ba)} #hope-landing .billboard-body .billboard-details{font-size:13px;margin-bottom:16px;color:light-dark(#677e71,#8fa799)} #hope-landing .billboard-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:0} #hope-landing .billboard-cta-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:999px;background:#234d3d;color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 4px 14px rgba(35,77,61,0.25);transition:all .15s ease} #hope-landing .billboard-cta-btn:hover{background:#2e5f4b;transform:translateY(-1px);box-shadow:0 6px 18px rgba(35,77,61,0.35);color:#fff} #hope-landing .billboard-secondary-link{font-size:13px;font-weight:600;color:light-dark(#2e5743,#9fc2ae);text-decoration:underline;text-underline-offset:3px} #hope-landing .billboard-vacant{padding:36px 28px;text-align:center;background:light-dark(#fdfcf8,#1c2722)} #hope-landing .billboard-vacant h3{font-family:Georgia,serif;font-size:24px;margin:0 0 10px} #hope-landing .billboard-vacant p{max-width:580px;margin:0 auto 18px;font-size:15px;line-height:1.55} #hope-landing .advert-options article{padding:12px 0;border-top:1px solid light-dark(#d5ded7,#4c6053)} #hope-landing .advert-options article h3{margin:0 0 6px;font-size:17px} #hope-landing .advert-options article p{margin:0} #hope-landing .advert-request-form>label{font-weight:600} #hope-landing .advert-request-form>.small{margin:0} #hope-landing .studio-feature-invite{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:28px 0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none} #hope-landing .studio-feature-invite .topic-kicker{margin-bottom:8px} #hope-landing .studio-feature-invite h2{margin:0 0 8px;font-size:23px} #hope-landing .studio-feature-invite p{margin:0 0 8px;font-size:14px} #hope-landing .studio-feature-invite p.small{margin:0;font-size:12px} #hope-landing .studio-feature-contact{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:11px 18px;border-radius:999px;background:#234d3d;color:#fff!important;font-size:14px;font-weight:700;text-align:center} #hope-landing .studio-feature-contact:hover{background:#2e5f4b} @media(max-width:700px){#hope-landing .studio-feature-invite{align-items:flex-start;flex-direction:column;gap:16px;padding:0}#hope-landing .studio-feature-contact{width:100%}} @media(max-width:860px){ #hope-landing .billboard-body{padding:14px 18px} } @media(max-width:600px){ #hope-landing .billboard-header-bar{padding:8px 14px} #hope-landing .billboard-body{padding:12px 16px} #hope-landing .billboard-cta-btn{width:100%;justify-content:center} } /* Community Programme Leader Page */ #hope-landing .leader-avatar-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;width:auto;height:auto;border-radius:0;border:0;box-shadow:none;background:none} #hope-landing .leader-initials-badge{width:160px;height:160px;border-radius:50%;background:linear-gradient(135deg,#234d3d 0%,#346852 100%);color:#ffe872;font-family:Georgia,serif;font-size:48px;font-weight:700;display:grid;place-items:center;border:4px solid #ffe872;box-shadow:0 0 0 3px #234d3d,0 6px 18px rgba(35,77,61,.25)} #hope-landing .leader-title-tag{font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:light-dark(#456c55,#a3ceb4);margin:0} #hope-landing .community-programme-notice{margin:0 0 24px;padding:14px 20px;border-radius:12px;background:light-dark(#f4f8f5,#1d2c24);border:1px solid light-dark(#cfe0d5,#354b3e);font-size:13.5px;line-height:1.55;color:light-dark(#2e523f,#cbe2d3)} #hope-landing .site-search-form{max-width:760px;margin:24px 0 8px} #hope-landing .site-search-form>label{display:block;margin-bottom:8px;font-weight:700} #hope-landing .site-search-form>div{display:flex;gap:10px} #hope-landing .site-search-form input{flex:1;min-width:0;min-height:48px;padding:10px 14px;border:1px solid light-dark(#aab9ad,#53675b);border-radius:9px;background:light-dark(#fff,#223029);color:inherit;font:inherit} #hope-landing .site-search-form button,#hope-landing .story-comment-form button{min-height:46px;padding:10px 20px;border:0;border-radius:999px;background:#234d3d;color:#fff;font:inherit;font-weight:700;cursor:pointer} #hope-landing .site-search-form button:disabled,#hope-landing .story-comment-form button:disabled{opacity:.65;cursor:wait} #hope-landing .search-privacy{margin:8px 0 24px} #hope-landing .search-status{margin:16px 0} #hope-landing .search-result{padding:16px 0;border-bottom:1px solid light-dark(#d5ded7,#405348)} #hope-landing .search-result-type{display:block;margin-bottom:4px;color:light-dark(#586c60,#b6c9bd);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em} #hope-landing .search-result-title{font-family:Georgia,serif;font-size:20px;font-weight:600} #hope-landing .search-result p{margin:6px 0 0;color:light-dark(#455e50,#b6c9bd);line-height:1.55} #hope-landing .story-comments{margin-top:14px;padding-top:12px;border-top:1px solid light-dark(#d5ded7,#405348)} #hope-landing .story-comments summary{cursor:pointer;font-weight:700;color:light-dark(#24573f,#b9dcc6)} #hope-landing .story-comment{padding:10px 0;border-bottom:1px solid light-dark(#e1e7e2,#34453a)} #hope-landing .story-comment p{margin:0 0 6px;white-space:pre-wrap} #hope-landing .story-comment-form{display:grid;gap:10px;margin-top:14px} #hope-landing .story-comment-form>label:not(.story-comment-consent):not(.story-comment-trap){display:grid;gap:5px;font-size:14px;font-weight:600} #hope-landing .story-comment-form input:not([type=checkbox]),#hope-landing .story-comment-form textarea{width:100%;padding:10px 12px;border:1px solid light-dark(#aab9ad,#53675b);border-radius:8px;background:light-dark(#fff,#223029);color:inherit;font:inherit} #hope-landing .story-comment-form textarea{resize:vertical} #hope-landing .story-comment-consent{display:flex;align-items:flex-start;gap:8px;font-size:13px} #hope-landing .story-comment-consent input{margin-top:4px} #hope-landing .story-comment-form button{justify-self:start} #hope-landing .story-comment-form .result{margin:0} #hope-landing .story-comment-confirmation{margin:14px 0;padding:12px 0;color:light-dark(#24573f,#b9dcc6);font-weight:600} #hope-landing .story-comment-trap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:560px){#hope-landing .site-search-form>div{align-items:stretch}#hope-landing .site-search-form button{padding-inline:14px}#hope-landing .search-result-title{font-size:18px}}