10 — DONATE CODE
VERIFIED CURRENT MASTER ✓WHAT THIS CONTROLS
Live location: Donate Page → Unyson RAW Code
Captured: 22 September 2026
Master size: 594 lines / 16,615 bytes
Contains: Donate hero, JustGiving, PayPal and Amazon Wishlist donation cards, OUR MISSION targets of 200 sleeping bags and 600 pairs of socks, Sleeping Bag and Socks photographic sections, Facebook physical-donation links and responsive behaviour.
DEPENDENCIES / DO NOT CHANGE BLINDLY
Navigation: DONATE is linked from the main Header & Navigation system. Do not change its page URL without checking 01 — HEADER & NAVIGATION CODE.
External donation links: JustGiving, PayPal and Amazon Wishlist destinations are embedded in this page master. Preserve the verified URLs unless SHS intentionally changes them.
Logo assets: JustGiving, PayPal and Amazon use separate WordPress Media Library graphics. Their sizing has been deliberately tuned; JustGiving is intentionally sized differently from PayPal and Amazon.
Physical-donation assets: Bags.jpeg and Socks.jpeg are WordPress Media Library dependencies. Both physical-donation buttons link to the Sussex Homeless Support Facebook group.
Campaign figures: OUR MISSION currently states 200 sleeping bags and 600 pairs of socks. Change these only when SHS changes the campaign target.
Responsive behaviour: V11 contains the verified mobile correction for the Sleeping Bag and Socks feature panels. On mobile these panels stack image first and copy underneath, while the approved desktop two-column layout remains unchanged.
Rollback rule: never overwrite this verified master. Future alterations become DONATE-RAW V12, V13, etc. Preserve V11 as the approved rollback version.
VIEW / COPY COMPLETE VERIFIED MASTER CODE
<!-- =========================================================
SUSSEX HOMELESS SUPPORT — DONATE
DONATE-RAW V11
Complete RAW Code replacement
22 September 2026
========================================================= -->
<div id="shs-donate">
<style>
#shs-donate{
--orange:#f37021;
--black:#161616;
--ink:#252525;
--grey:#f2f2f2;
--line:#dedede;
--white:#ffffff;
font-family:Arial,Helvetica,sans-serif;
color:var(--ink);
max-width:1200px;
margin:0 auto;
padding:0 18px 55px;
box-sizing:border-box;
}
#shs-donate *{box-sizing:border-box}
#shs-donate a{text-decoration:none}
/* HERO */
#shs-donate .hero{
background:var(--black);
color:#fff;
padding:64px 55px 58px;
position:relative;
overflow:hidden;
}
#shs-donate .hero:after{
content:"";
position:absolute;
right:-90px;
top:-140px;
width:360px;
height:360px;
border:55px solid var(--orange);
border-radius:50%;
opacity:.95;
}
#shs-donate .eyebrow{
color:var(--orange);
font-size:13px;
font-weight:800;
letter-spacing:2.2px;
margin-bottom:14px;
}
#shs-donate .hero h1{
color:#fff;
font-size:68px;
line-height:.92;
letter-spacing:-3px;
margin:0 0 22px;
max-width:760px;
}
#shs-donate .hero p{
color:#fff;
font-size:20px;
line-height:1.55;
max-width:720px;
margin:0;
position:relative;
z-index:2;
}
/* INTRO */
#shs-donate .intro{
padding:48px 50px 40px;
text-align:center;
}
#shs-donate .intro h2,
#shs-donate .section-title{
font-size:38px;
line-height:1.05;
letter-spacing:-1.4px;
margin:0 0 15px;
color:var(--black);
}
#shs-donate .intro p{
max-width:820px;
margin:0 auto;
font-size:18px;
line-height:1.65;
}
/* BUTTONS */
#shs-donate .btn{
display:inline-block;
background:var(--orange);
color:#fff !important;
padding:15px 22px;
font-size:13px;
font-weight:800;
letter-spacing:.7px;
text-transform:uppercase;
transition:.2s ease;
}
#shs-donate .btn:hover{
background:#d95d13;
transform:translateY(-1px);
}
#shs-donate .btn-dark{background:var(--black)}
#shs-donate .btn-dark:hover{background:#333}
/* ONLINE DONATION CARDS */
#shs-donate .online{
background:var(--grey);
padding:46px 38px 42px;
}
#shs-donate .online-head{
text-align:center;
margin-bottom:30px;
}
#shs-donate .online-head p{
max-width:760px;
margin:0 auto;
line-height:1.6;
}
#shs-donate .donation-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}
#shs-donate .donation-card{
background:#fff;
border:1px solid var(--line);
padding:30px 26px;
display:flex;
flex-direction:column;
min-height:330px;
}
#shs-donate .donation-logo{
width:100%;
height:230px;
display:flex;
align-items:center;
justify-content:center;
margin:0 0 18px;
overflow:hidden;
}
#shs-donate .donation-logo img{
display:block;
height:auto;
object-fit:contain;
object-position:center;
}
/* JustGiving already visually correct */
#shs-donate .donation-card:nth-child(1) .donation-logo img{
width:100%;
max-width:100%;
max-height:230px;
}
/* PayPal + Amazon: use the full available width, never exceed the white card */
#shs-donate .donation-card:nth-child(2) .donation-logo img,
#shs-donate .donation-card:nth-child(3) .donation-logo img{
width:calc(100% - 24px);
max-width:calc(100% - 24px);
max-height:220px;
margin:0 12px;
}
#shs-donate .wordmark{
font-size:52px;
line-height:1;
font-weight:900;
letter-spacing:-2px;
color:var(--black);
text-align:center;
width:100%;
}
#shs-donate .donation-card h3{
margin:0 0 10px;
font-size:24px;
color:var(--black);
}
#shs-donate .donation-card p{
margin:0 0 24px;
line-height:1.55;
flex:1;
}
/* PHYSICAL DONATIONS */
#shs-donate .physical{
padding:54px 0 0;
}
#shs-donate .physical-heading{
text-align:center;
padding:0 25px 32px;
}
#shs-donate .physical-heading p{
max-width:760px;
margin:0 auto;
font-size:17px;
line-height:1.6;
}
#shs-donate .mission{
max-width:900px;
margin:30px auto 0;
background:var(--black);
color:#fff;
padding:30px 30px 28px;
}
#shs-donate .mission-title{
color:var(--orange);
font-size:14px;
font-weight:900;
letter-spacing:2.5px;
margin-bottom:18px;
}
#shs-donate .mission-numbers{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
}
#shs-donate .mission-stat{
padding:8px 18px;
}
#shs-donate .mission-stat + .mission-stat{
border-left:1px solid #555;
}
#shs-donate .mission-number{
display:block;
font-size:82px;
line-height:.9;
font-weight:900;
letter-spacing:-4px;
color:#fff;
}
#shs-donate .mission-label{
display:block;
margin-top:12px;
color:#fff;
font-size:17px;
line-height:1.2;
font-weight:800;
text-transform:uppercase;
letter-spacing:.8px;
}
#shs-donate .physical-row{
display:grid;
grid-template-columns:1fr 1fr;
min-height:430px;
margin-bottom:28px;
border:1px solid var(--line);
}
#shs-donate .physical-row.reverse .physical-image{order:2}
#shs-donate .physical-row.reverse .physical-copy{order:1}
#shs-donate .physical-image{
min-height:430px;
background:#e9e9e9;
position:relative;
overflow:hidden;
}
#shs-donate .physical-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
#shs-donate .image-placeholder{
width:100%;
height:100%;
min-height:430px;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:30px;
color:#777;
font-size:14px;
font-weight:700;
letter-spacing:1px;
background:
linear-gradient(135deg,#ededed 25%,#e5e5e5 25%,#e5e5e5 50%,#ededed 50%,#ededed 75%,#e5e5e5 75%);
background-size:28px 28px;
}
#shs-donate .physical-copy{
padding:52px 48px;
display:flex;
flex-direction:column;
justify-content:center;
background:#fff;
}
#shs-donate .physical-copy .kicker{
color:var(--orange);
font-size:12px;
font-weight:800;
letter-spacing:2px;
margin-bottom:10px;
}
#shs-donate .physical-copy h2{
margin:0 0 17px;
color:var(--black);
font-size:40px;
line-height:1;
letter-spacing:-1.3px;
}
#shs-donate .physical-copy p{
font-size:17px;
line-height:1.62;
margin:0 0 24px;
}
/* FINAL CTA */
#shs-donate .final{
margin-top:38px;
background:var(--orange);
color:#fff;
padding:45px 48px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}
#shs-donate .final h2{
color:#fff;
font-size:34px;
margin:0 0 8px;
letter-spacing:-1px;
}
#shs-donate .final p{
color:#fff;
margin:0;
line-height:1.5;
}
#shs-donate .final .btn{
background:#fff;
color:var(--black) !important;
white-space:nowrap;
}
/* LEGAL */
#shs-donate .legal{
text-align:center;
color:#777;
font-size:11px;
font-weight:700;
letter-spacing:1.2px;
padding:25px 10px 0;
}
/* TABLET */
@media(max-width:900px){
#shs-donate .donation-grid{grid-template-columns:1fr}
#shs-donate .donation-card{min-height:0}
#shs-donate .hero h1{font-size:56px}
}
/* MOBILE */
@media(max-width:700px){
#shs-donate{padding:0 12px 38px}
#shs-donate .hero{padding:42px 25px 40px}
#shs-donate .hero:after{width:220px;height:220px;right:-105px;top:-105px;border-width:36px}
#shs-donate .hero h1{font-size:46px;letter-spacing:-2px}
#shs-donate .hero p{font-size:17px}
#shs-donate .intro{padding:36px 20px 32px}
#shs-donate .intro h2,
#shs-donate .section-title{font-size:31px}
#shs-donate .online{padding:36px 18px}
#shs-donate .physical{padding-top:42px}
#shs-donate .mission{padding:26px 18px 24px}
#shs-donate .mission-numbers{grid-template-columns:1fr}
#shs-donate .mission-stat + .mission-stat{
border-left:0;
border-top:1px solid #555;
padding-top:24px;
}
#shs-donate .mission-number{font-size:68px}
#shs-donate .physical-row,
#shs-donate .physical-row.reverse{
grid-template-columns:1fr;
min-height:0;
}
#shs-donate .physical-row .physical-image,
#shs-donate .physical-row.reverse .physical-image{order:1}
#shs-donate .physical-row .physical-copy,
#shs-donate .physical-row.reverse .physical-copy{order:2}
#shs-donate .physical-image{
width:100%;
max-width:100%;
min-width:0;
min-height:0;
height:auto;
overflow:hidden;
}
#shs-donate .physical-image img{
display:block;
width:100%;
max-width:100%;
height:auto;
object-fit:contain;
}
#shs-donate .image-placeholder{
width:100%;
max-width:100%;
min-height:280px;
}
#shs-donate .physical-copy{padding:36px 25px}
#shs-donate .physical-copy h2{font-size:34px}
#shs-donate .final{
display:block;
padding:35px 25px;
}
#shs-donate .final .btn{margin-top:22px;white-space:normal}
}
/* =========================================================
DONATE-RAW V11 — MOBILE FIX
Only the Sleeping Bags + Socks feature panels
Desktop styling remains unchanged
========================================================= */
@media (max-width: 767px){
#shs-donate .physical-row{
display:flex !important;
flex-direction:column !important;
grid-template-columns:1fr !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
overflow:hidden !important;
}
#shs-donate .physical-row > *{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
#shs-donate .physical-image{
order:1 !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
height:auto !important;
overflow:hidden !important;
}
#shs-donate .physical-image img{
display:block !important;
width:100% !important;
max-width:100% !important;
height:auto !important;
object-fit:contain !important;
}
#shs-donate .physical-copy{
order:2 !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
}
#shs-donate .physical-copy .btn{
display:block !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
white-space:normal !important;
overflow-wrap:break-word !important;
text-align:center !important;
line-height:1.35 !important;
}
}
</style>
<!-- HERO -->
<section class="hero">
<div class="eyebrow">SUSSEX HOMELESS SUPPORT</div>
<h1>YOUR SUPPORT<br>MAKES A DIFFERENCE</h1>
<p>Every donation helps us continue supporting vulnerable and homeless people across Brighton & Hove and Sussex. Give financially, send something from our wishlist, or help with essential items such as sleeping bags and socks.</p>
</section>
<!-- INTRO -->
<section class="intro">
<h2>CHOOSE HOW YOU WOULD LIKE TO HELP</h2>
<p>Whether you make a financial donation or give practical essentials, your support helps Sussex Homeless Support continue its work in the community.</p>
</section>
<!-- ONLINE OPTIONS -->
<section class="online">
<div class="online-head">
<div class="eyebrow">DONATE ONLINE</div>
<h2 class="section-title">QUICK & SIMPLE WAYS TO GIVE</h2>
<p>Choose the option that works best for you.</p>
</div>
<div class="donation-grid">
<article class="donation-card">
<div class="donation-logo">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/justgiving-1.png" alt="JustGiving">
</div>
<h3>JUSTGIVING</h3>
<p>Support Sussex Homeless Support through our JustGiving fundraising page.</p>
<a class="btn" href="https://www.justgiving.com/fundraising/fundraising-by-colleagues-sussexhomelesssupport" target="_blank" rel="noopener">DONATE WITH JUSTGIVING</a>
</article>
<article class="donation-card">
<div class="donation-logo">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/paypal-logo-png_seeklogo-249214-1.png" alt="PayPal">
</div>
<h3>PAYPAL</h3>
<p>Make a secure online donation directly through our PayPal donation page.</p>
<a class="btn" href="https://www.paypal.com/donate/?hosted_button_id=F6XAFLTAHY8A8" target="_blank" rel="noopener">DONATE WITH PAYPAL</a>
</article>
<article class="donation-card">
<div class="donation-logo">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/avdegic5l.png" alt="Amazon">
</div>
<h3>AMAZON WISHLIST</h3>
<p>Purchase practical items that can go directly towards helping people who need them.</p>
<a class="btn" href="https://www.amazon.co.uk/gp/registry/wishlist/59HKO5UPAXP3?pldnSite=1" target="_blank" rel="noopener">VIEW OUR WISHLIST</a>
</article>
</div>
</section>
<!-- PHYSICAL DONATIONS -->
<section class="physical">
<div class="physical-heading">
<div class="eyebrow">PRACTICAL SUPPORT</div>
<h2 class="section-title">DONATE ESSENTIAL ITEMS</h2>
<p>Some of the simplest items can make a real difference to somebody sleeping rough. If you would like to donate directly, contact us through our Facebook community.</p>
<div class="mission">
<div class="mission-title">OUR MISSION</div>
<div class="mission-numbers">
<div class="mission-stat">
<span class="mission-number">200</span>
<span class="mission-label">Sleeping Bags</span>
</div>
<div class="mission-stat">
<span class="mission-number">600</span>
<span class="mission-label">Pairs of Socks</span>
</div>
</div>
</div>
</div>
<!-- SLEEPING BAGS -->
<article class="physical-row">
<div class="physical-image">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/Bags.jpeg" alt="Sleeping bags for donation">
</div>
<div class="physical-copy">
<div class="kicker">KEEP SOMEONE WARM</div>
<h2>DONATE A<br>SLEEPING BAG</h2>
<p>A good sleeping bag can provide vital warmth and protection for someone facing a night outside. If you have a sleeping bag you would like to donate, get in touch with Sussex Homeless Support through our Facebook group.</p>
<div>
<a class="btn btn-dark" href="https://www.facebook.com/groups/sussexhomelesssupport" target="_blank" rel="noopener">CLICK HERE IF YOU WOULD LIKE TO DONATE A SLEEPING BAG</a>
</div>
</div>
</article>
<!-- SOCKS -->
<article class="physical-row reverse">
<div class="physical-image">
<img src="https://www.sussexhomelesssupport.co.uk/wp-content/uploads/2026/09/Socks.jpeg" alt="Socks for donation">
</div>
<div class="physical-copy">
<div class="kicker">A SMALL ITEM — A REAL NEED</div>
<h2>DONATE<br>SOCKS</h2>
<p>Clean, dry socks are a basic essential and are regularly needed by people experiencing homelessness. If you would like to donate pairs of socks, contact us through our Facebook group.</p>
<div>
<a class="btn btn-dark" href="https://www.facebook.com/groups/sussexhomelesssupport" target="_blank" rel="noopener">CLICK HERE IF YOU WOULD LIKE TO DONATE PAIRS OF SOCKS</a>
</div>
</div>
</article>
</section>
<!-- FINAL CTA -->
<section class="final">
<div>
<h2>EVERY DONATION HELPS</h2>
<p>Thank you for supporting Sussex Homeless Support and the people we work with across our community.</p>
</div>
<a class="btn" href="https://www.justgiving.com/fundraising/fundraising-by-colleagues-sussexhomelesssupport" target="_blank" rel="noopener">MAKE A DONATION</a>
</section>
<div class="legal">REGISTERED CHARITY NUMBER 1175229</div>
</div>