:root{ --navy:#1B3A5B;--navy-deep:#14253A;--green:#2F6B4F;--green-deep:#245540; --cream:#F6F3EC;--paper:#fff;--ink:#1A2430;--stone:#C7B299;--muted:#566472;--line:#e7e1d5; --wrap:1180px;--r:16px;--shadow:0 14px 40px rgba(20,37,58,.10); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} html,body{max-width:100%;overflow-x:clip} body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:var(--green-deep);text-decoration:none} h1,h2,h3,h4{font-family:Spectral,Georgia,serif;font-weight:600;line-height:1.12;color:var(--navy)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px} .eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:12px} section{padding:84px 0} .lead{font-size:19px;color:var(--muted);max-width:720px} .center{text-align:center;margin-left:auto;margin-right:auto} /* buttons */ .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;padding:14px 26px;border-radius:40px;border:2px solid transparent;cursor:pointer;transition:.2s;font-family:Inter} .btn-primary{background:var(--green);color:#fff}.btn-primary:hover{background:var(--green-deep)} .btn-ghost{background:transparent;border-color:rgba(255,255,255,.6);color:#fff}.btn-ghost:hover{background:rgba(255,255,255,.12)} .btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-deep)} .btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)}.btn-outline:hover{background:var(--navy);color:#fff} /* header */ header.site{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 26px;max-width:1300px;margin:0 auto} .brand{display:flex;align-items:center;gap:12px} .brand img{height:54px;width:auto;display:block} @media(max-width:640px){.brand img{height:44px}} .fstep h3:focus{outline:none} .fstep:focus,.fstep:focus-visible{outline:none} .brand .bt{display:flex;flex-direction:column;line-height:1} .brand .bt b{font-family:Spectral,serif;font-size:20px;color:var(--navy);font-weight:600} .brand .bt span{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--green);font-weight:600;margin-top:3px} .menu{display:flex;align-items:center;gap:24px} .menu a{color:var(--navy);font-weight:500;font-size:15px}.menu a:hover{color:var(--green)} .menu a.active{color:var(--green)} .navtoggle{display:none;background:none;border:0;cursor:pointer} .navtoggle span{display:block;width:26px;height:2px;background:var(--navy);margin:5px 0} /* hero */ .hero{position:relative;min-height:86vh;display:flex;align-items:center;color:#fff;overflow:hidden} .hero .bg{position:absolute;inset:-12% 0;background-size:cover;background-position:center;will-change:transform} .hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,37,58,.62),rgba(20,37,58,.78))} .hero .wrap{position:relative;z-index:2;width:100%;padding-top:60px;padding-bottom:60px} .hero h1{color:#fff;font-size:clamp(34px,5.4vw,62px);max-width:28ch;text-wrap:balance} .hero p{color:#eaf0f5;font-size:clamp(17px,2.2vw,22px);max-width:46ch;margin:18px 0 30px} .hero .cta{display:flex;gap:14px;flex-wrap:wrap} .subhero{background:var(--navy);color:#dfe7ef;text-align:center;padding:14px;font-size:14px;letter-spacing:.02em} /* stat band */ .stats{background:var(--navy);color:#fff} .statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center} .stat .n{font-family:Spectral,serif;font-size:clamp(30px,4vw,46px);color:#fff;font-weight:600} .stat .l{color:#a9bccf;font-size:14px;margin-top:6px} /* generic grids */ .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);transition:.25s} .card:hover{transform:translateY(-4px)} .card img{aspect-ratio:3/2;object-fit:cover;width:100%} .card .pad{padding:22px 24px} .card h3{font-size:21px;margin-bottom:8px} .card p{color:var(--muted);font-size:15px} .pill{display:inline-block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--green);font-weight:600;background:#eaf1ec;padding:4px 11px;border-radius:30px;margin-bottom:10px} /* priority cards */ .prio{position:relative;border-radius:var(--r);overflow:hidden;min-height:320px;display:flex;align-items:flex-end;color:#fff} .prio img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .prio:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(20,37,58,.85))} .prio .t{position:relative;z-index:2;padding:24px} .prio h3{color:#fff;font-size:23px}.prio p{color:#e7eef4;font-size:14.5px;margin-top:6px} /* split feature */ .feature{background:var(--paper)} .feature .grid2 img{border-radius:var(--r);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%} /* parallax band */ .pband{position:relative;color:#fff;text-align:center;overflow:hidden} .pband .bg{position:absolute;inset:-15% 0;background-size:cover;background-position:center;will-change:transform} .pband:after{content:"";position:absolute;inset:0;background:rgba(20,37,58,.7)} .pband .wrap{position:relative;z-index:2;padding:110px 26px} .pband h2{color:#fff;font-size:clamp(26px,3.6vw,40px);max-width:20ch;margin:0 auto} .pband p{color:#dbe4ec;max-width:60ch;margin:16px auto 0} /* map */ .mapwrap{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);background:#dfe7ee} .mapwrap img{width:100%;display:block} .pin{position:absolute;width:16px;height:16px;background:var(--green);border:3px solid #fff;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:pointer} .pin:hover{background:var(--navy)} .pin span{position:absolute;bottom:140%;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;font-size:12px;white-space:nowrap;padding:4px 9px;border-radius:6px;opacity:0;pointer-events:none;transition:.15s} .pin:hover span{opacity:1} /* the Leaflet map was removed on 28 Jul 2026, replaced by an inline SVG built from ONS boundary data. Those rules went with it. */ /* project detail page */ .projhero{min-height:60vh} .projhero h1{max-width:18ch} .projmeta .pad{padding:22px 24px} .projmeta dl{display:grid;grid-template-columns:auto 1fr;gap:11px 18px;margin:6px 0 0} .projmeta dt{color:var(--muted);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding-top:2px} .projmeta dd{font-size:15px;color:var(--ink)} .projmeta dd a{color:var(--green-deep);font-weight:600;word-break:break-word} /* quotes */ .quote{font-family:Spectral,serif;font-style:italic;font-size:clamp(20px,2.6vw,28px);color:var(--navy);line-height:1.4;max-width:24ch} blockquote{font-family:Spectral,serif;font-style:italic;color:var(--navy);font-size:18px;border-left:3px solid var(--green);padding-left:18px;margin:14px 0} /* accordion */ .acc{border-bottom:1px solid var(--line)} .acc button{width:100%;text-align:left;background:none;border:0;padding:22px 0;font-family:Spectral,serif;font-size:19px;color:var(--navy);font-weight:600;cursor:pointer;display:flex;justify-content:space-between;gap:16px;align-items:center} .acc .a{max-height:0;overflow:hidden;transition:max-height .3s;color:var(--muted)} .acc.open .a{max-height:400px;padding-bottom:20px} .acc .ic{transition:.3s;color:var(--green);font-size:24px;flex:none}.acc.open .ic{transform:rotate(45deg)} /* form */ .form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:34px} .steps{display:flex;gap:8px;margin-bottom:26px;flex-wrap:wrap} .steps .s{flex:1;min-width:90px;font-size:12px;color:var(--muted);border-top:3px solid var(--line);padding-top:8px} .steps .s.active{color:var(--navy);border-color:var(--green);font-weight:600} .fstep{display:none}.fstep.show{display:block;animation:fade .3s} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1}} label{display:block;font-weight:600;font-size:14px;color:var(--navy);margin:16px 0 6px} .hint{font-weight:400;color:var(--muted);font-size:13px} input,select,textarea{width:100%;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:16px;background:#fdfcf9} input:focus,select,textarea:focus{outline:2px solid var(--green);border-color:var(--green)} textarea{min-height:120px;resize:vertical} .fnav{display:flex;justify-content:space-between;margin-top:24px;gap:12px} .elig{background:#eaf1ec;border:1px solid #cfe0d4;border-radius:12px;padding:18px 20px;margin-bottom:8px} .check{display:flex;gap:10px;align-items:flex-start;margin:10px 0;font-weight:500;color:var(--ink)} .check input{width:auto;margin-top:4px} .notice{background:#fbf3e6;border:1px solid #ecd9b4;border-radius:12px;padding:16px 20px;color:#7a5b22;font-size:14.5px;margin:18px 0} .ok{background:#eaf1ec;border:1px solid #bcd8c6;color:#245540;border-radius:12px;padding:20px;display:none} /* newsletter */ .news{background:var(--green);color:#fff;border-radius:var(--r)} .news .wrap2{padding:46px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap} .news h2{color:#fff}.news p{color:#dff0e6} /* footer */ footer.site{background:var(--navy-deep);color:#9fb1c4;padding:64px 0 30px;font-size:14.5px} footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px} footer.site img.fl{width:120px;margin-bottom:14px} footer.site h4{color:#fff;font-size:14px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;font-family:Inter} footer.site a{color:#bcccdb;display:block;padding:4px 0}footer.site a:hover{color:#fff} footer.site .bar{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#7e93a8;font-size:13px} /* reveal */ [data-reveal]{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)} [data-reveal].in{opacity:1;transform:none} /* responsive */ @media(max-width:900px){ header.site{-webkit-backdrop-filter:none;backdrop-filter:none;background:#fff} body.nav-lock header.site{position:fixed;top:0;left:0;right:0;z-index:60} .menu{position:fixed;inset:64px 0 auto 0;background:#fff;flex-direction:column;align-items:flex-start;padding:20px 26px;gap:14px;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:.3s;box-shadow:var(--shadow);max-height:calc(100dvh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch} .menu.open{transform:none}.navtoggle{display:block} .grid3,.statgrid{grid-template-columns:1fr 1fr}.grid2{grid-template-columns:1fr;gap:24px} footer.site .cols{grid-template-columns:1fr 1fr} } @media(max-width:560px){.grid3{grid-template-columns:1fr}.hero{min-height:78vh} footer.site .cols{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}.hero .bg,.pband .bg{transform:none!important}} /* --- apply form enhancements (14 Jul) --- */ #pbar{height:6px;background:var(--line);border-radius:30px;overflow:hidden;margin:0 0 20px} #pbar i{display:block;height:100%;width:0;background:var(--green);border-radius:30px;transition:width .45s cubic-bezier(.4,0,.2,1)} .steps .s.current{color:var(--green-deep)} .field-error{display:block;color:#b23b2e;font-size:12.5px;font-weight:600;margin-top:6px} input.bad,select.bad,textarea.bad{border-color:#b23b2e;background:#fdf3f2} .savednote{display:none;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-top:16px} .savednote b{color:var(--green-deep);font-weight:600} .eligsoft{display:none;background:#fbf6ea;border:1px solid var(--stone);border-radius:12px;padding:14px 16px;margin:16px 0 0;font-size:14px;color:var(--ink)} .eligsoft b{color:var(--navy)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .stepcount{font-size:12.5px;color:var(--muted);font-weight:600;margin:0 0 8px;letter-spacing:.02em} .ok .nextsteps{list-style:none;padding:0;margin:16px 0 4px;display:grid;gap:13px} .ok .nextsteps li{display:flex;gap:12px;align-items:flex-start;color:var(--ink)} .ok .nextsteps b{flex:0 0 26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-family:Inter,sans-serif;font-weight:700} .ok .contactline{margin-top:16px;padding-top:14px;border-top:1px solid #bcd8c6;font-size:14px} /* newsletter signup, inline (replaces external Mailchimp) */ .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .nlform{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:relative} .nlform input[type=email]{font-family:Inter;font-size:16px;padding:13px 16px;border-radius:40px;border:0;min-width:240px;flex:1 1 240px;color:#1A2430;background:#fff} .nlform input[type=email]:focus{outline:none;box-shadow:0 0 0 3px rgba(255,255,255,.5)} .nlform .btn{background:#fff;color:var(--green-deep);border:0;cursor:pointer;flex:0 0 auto} .nlform .btn:hover{background:#eef5f1} .nlform .btn[disabled]{opacity:.6;cursor:default} .nlform .nlmsg{flex:1 0 100%;margin:0;font-size:14px;color:#fff;min-height:0} .nlform .nlmsg:empty{display:none} @media(max-width:600px){.nlform{width:100%}.nlform input[type=email]{min-width:0;width:100%;flex:1 1 100%}.nlform .btn{width:100%;justify-content:center}} /* ================= MOBILE PASS 20 JUL 2026 ================= */ /* Map pins rely on :hover, which does not exist on touch. On phones the pins become a readable list of areas underneath the map instead of 8 mute dots. */ @media(max-width:760px){ .mapwrap{padding-bottom:14px} .mapwrap .pin{position:static;display:inline-block;width:auto;height:auto; background:none;border:0;border-radius:0;transform:none;box-shadow:none;cursor:default;margin:0} .mapwrap .pin span{position:static;opacity:1;transform:none;pointer-events:auto; display:inline-block;bottom:auto;left:auto;background:var(--navy);color:#fff; font-size:12.5px;padding:6px 12px;border-radius:30px;margin:6px 6px 0 0;white-space:nowrap} .mapwrap img{margin-bottom:4px} .mapwrap{display:flex;flex-wrap:wrap;padding-left:12px;padding-right:12px} .mapwrap img{flex:1 0 100%} } /* Same problem on any non-hover device regardless of width */ @media(hover:none) and (min-width:761px){ .mapwrap .pin span{opacity:1} } @media(max-width:600px){ section{padding:52px 0} .wrap{padding:0 18px} .hero .wrap{padding-top:40px;padding-bottom:40px} .hero h1{font-size:clamp(30px,8.4vw,40px);max-width:100%} .hero .cta{gap:10px} .hero .cta .btn{flex:1 1 100%;justify-content:center} .subhero{font-size:13px;padding:12px 18px;line-height:1.5} .wrap2{padding:32px 20px;gap:18px} .prio{min-height:240px} .statgrid{gap:20px} .stat .l{font-size:13.5px;line-height:1.4} .steps .s{min-width:0;flex:1 1 40%;font-size:11.5px} .btn{padding:13px 22px} /* stop long emails and URLs pushing the layout wide */ a[href^="mailto:"],footer.site a{word-break:break-word;overflow-wrap:anywhere} blockquote{font-size:15.5px} } /* Tap targets: footer and menu links need height on touch, not just text. These must stay display:block. inline-block was used here originally and it silently collapsed the footer link lists into one running sentence on phones, "About usWho we helpNews and stories", because inline-block boxes sit on the same line. A block element takes the vertical padding perfectly well. */ @media(max-width:900px){ footer.site .cols a{display:block;padding:8px 0} .menu a{padding:6px 0} .navtoggle{padding:8px;margin:-8px} } /* Safety net: nothing may push the page sideways */ img,video,iframe,table,pre{max-width:100%} .mapwrap,.card,.prio{max-width:100%} /* family profile cards + pages */ .famcard{text-decoration:none;color:inherit;display:block;transition:transform .2s ease,box-shadow .2s ease} .famcard:hover{transform:translateY(-4px);box-shadow:0 14px 34px rgba(20,37,58,.14)} .readmore{display:inline-block;margin-top:12px;color:var(--green);font-weight:600;font-size:14px} .readmore i{font-style:normal;transition:transform .2s ease;display:inline-block} .famcard:hover .readmore i{transform:translateX(4px)} .prof-hero{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center} @media(max-width:720px){.prof-hero{grid-template-columns:1fr;gap:24px}} .prof-hero img{width:100%;border-radius:16px;aspect-ratio:1;object-fit:cover} .prof-quote{font-family:Spectral,serif;font-size:clamp(20px,2.6vw,26px);line-height:1.4;color:var(--navy);border-left:3px solid var(--green);padding-left:20px;margin:0} .caresgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:8px} .carecard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px} .carecard h4{margin:0 0 6px;color:var(--navy);font-family:Spectral,serif;font-size:18px} .carecard p{margin:0;color:var(--muted);font-size:14.5px} .famback{display:inline-block;margin-bottom:18px;color:var(--green);font-weight:600;font-size:14px;text-decoration:none} @media(max-width:720px){.hero h1 br{display:none}} /* ============================================================================ Reece Family Trust — additions, 28 July 2026 (Quiet Build) Append to assets/css/style.css. Uses the existing tokens only, adds no new colours, fonts or shadows. Covers: postcode feedback, the eligibility pause screen, the newsletter consent + states, and the news and stories area. ========================================================================= */ /* ---------- postcode live feedback (step 1 of the enquiry) --------------- */ .pcresult{ min-height:20px;margin-top:8px;font-size:13.5px;font-weight:600;line-height:1.45; } .pcresult.pc-yes { color:var(--green-deep); } .pcresult.pc-maybe{ color:var(--green-deep); } .pcresult.pc-no { color:#9a5a26; } /* ---------- the kind-decline screen -------------------------------------- */ .eligpause{ margin-top:26px;padding:26px 26px 22px; background:#fbf6ea;border:1px solid var(--stone);border-radius:var(--r); } .eligpause h3{ font-family:Spectral,Georgia,serif;font-weight:600;color:var(--navy); font-size:clamp(19px,2.4vw,23px);line-height:1.25;margin:0 0 8px; } .eligpause h3:focus{ outline:none; } .eligpause h3 + p{ margin:0 0 4px; } .eligpause p{ color:var(--ink);font-size:15px;line-height:1.65;margin:0 0 18px; } .eligpause h3 ~ h3{ margin-top:22px;padding-top:22px;border-top:1px solid var(--stone); } .eligpause-actions{ display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px; } .eligpause-foot{ margin:16px 0 0!important;font-size:13px!important;color:var(--muted)!important; } /* a third, quieter button so "change my answers" never competes with the primary action, which is deliberately "send it anyway" */ .btn-quiet{ background:none;border-color:transparent;color:var(--muted); text-decoration:underline;text-underline-offset:3px;padding-left:8px;padding-right:8px; } .btn-quiet:hover{ color:var(--navy);background:none; } @media(max-width:560px){ .eligpause{ padding:22px 18px 18px; } .eligpause-actions .btn{ width:100%;justify-content:center; } } /* ---------- newsletter: consent + states --------------------------------- */ .nlform .nlconsent{ flex:1 0 100%;display:flex;gap:10px;align-items:flex-start; margin:2px 0 0;font-size:13px;line-height:1.5;color:#e8f0ea;cursor:pointer; } .nlform .nlconsent input{ margin:2px 0 0;flex:0 0 auto;width:16px;height:16px;accent-color:var(--navy);cursor:pointer; } .nlform .nlmsg.ok { color:#fff;font-weight:600; } .nlform .nlmsg.bad{ color:#ffe0d4;font-weight:600; } /* the same signup used on a light background (if it is ever moved) */ .nlform.on-light .nlconsent{ color:var(--muted); } .nlform.on-light .nlmsg.ok { color:var(--green-deep); } .nlform.on-light .nlmsg.bad{ color:#b23b2e; } /* ---------- news and stories --------------------------------------------- */ .newsgrid{ display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px; } @media(max-width:900px){ .newsgrid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:620px){ .newsgrid{ grid-template-columns:1fr;gap:20px; } } .newscard{ display:flex;flex-direction:column;background:var(--paper); border:1px solid var(--line);border-radius:var(--r);overflow:hidden; box-shadow:var(--shadow);transition:.25s;text-decoration:none;color:inherit; } .newscard:hover{ transform:translateY(-3px);border-color:var(--stone); } .newscard .shot{ aspect-ratio:16/10;background:var(--cream);overflow:hidden; } .newscard .shot img{ width:100%;height:100%;object-fit:cover;display:block;transition:.4s; } .newscard:hover .shot img{ transform:scale(1.04); } .newscard .pad{ padding:20px 22px 24px;display:flex;flex-direction:column;flex:1; } .newsmeta{ display:flex;flex-wrap:wrap;gap:8px;align-items:center; font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:600; color:var(--muted);margin-bottom:10px; } .newstag{ background:#eaf1ec;color:var(--green-deep);border-radius:999px;padding:4px 10px; letter-spacing:.08em; } .newscard h3{ font-family:Spectral,Georgia,serif;font-weight:600;color:var(--navy); font-size:20px;line-height:1.25;margin:0 0 8px; } .newscard p{ color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 14px; } .newscard .more{ margin-top:auto;font-weight:600;font-size:14px;color:var(--green-deep); } /* a single story page */ .storyhead{ padding-top:64px; } .storyhead h1{ font-size:clamp(28px,4.6vw,46px);max-width:20ch;margin:10px 0 0;text-wrap:balance; } .storybody{ max-width:68ch; } .storybody p{ font-size:17px;line-height:1.75;color:var(--ink);margin:0 0 20px; } .storybody h2{ font-family:Spectral,Georgia,serif;font-size:24px;color:var(--navy); margin:34px 0 12px; } .storybody blockquote{ margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--stone); font-family:Spectral,Georgia,serif;font-size:20px;line-height:1.55; font-style:italic;color:var(--navy); } .storyshot{ width:100%;border-radius:var(--r);overflow:hidden;margin:8px 0 30px; } .storyshot img{ width:100%;display:block; } .newsempty{ padding:44px 26px;text-align:center;color:var(--muted); background:var(--paper);border:1px dashed var(--line);border-radius:var(--r); } /* --- 28 Jul 2026: the open door on the eligibility panel. Dianne: "if you actually don't tick all the criteria but you still think it's worthwhile contacting us, drop an email to this address" --- */ .eligdoor{ margin:20px 0 0;padding:16px 18px;background:#fff; border:1px solid var(--stone);border-radius:12px; } .eligdoor p{font-size:14.5px;color:var(--ink);margin:0 0 12px} .eligdoor .btn{font-size:14px;padding:11px 20px} .eligdoor-addr{margin:0;font-size:13.5px;color:var(--muted);word-break:normal;overflow-wrap:break-word} .pcresult.pc-soft{color:var(--muted)} @media(max-width:560px){ .eligdoor .btn{width:100%;justify-content:center} } * ========================================================================== PHOTO COMPETITION GALLERY Quiet Build, 28 Jul 2026 Uniform cards, native lightbox, no library. ========================================================================== */ .gjump{ display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center; margin:0 0 34px;padding:0 0 22px;border-bottom:1px solid var(--line); } .gjump__l{ font-size:12px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);font-weight:600;margin-right:4px; } .gjump a{ font-size:14px;color:var(--navy);background:var(--paper); border:1px solid var(--line);border-radius:30px;padding:6px 15px; transition:.18s; } .gjump a:hover,.gjump a:focus-visible{background:var(--navy);color:#fff;border-color:var(--navy)} .gmonth{padding:0 0 56px} .gmonth + .gmonth{padding-top:8px} .gmonth__h{ font-size:clamp(24px,3.2vw,34px);display:flex;align-items:baseline; flex-wrap:wrap;gap:12px; } .gmonth__theme{ font-family:Inter,sans-serif;font-size:12.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--green); background:#eaf1ec;border-radius:30px;padding:5px 13px; } .gmonth__note{color:var(--muted);font-size:16px;max-width:62ch;margin:10px 0 26px} .gmonth__note strong{color:var(--navy)} .ggrid{ list-style:none;margin:0;padding:0; display:grid;gap:clamp(12px,1.8vw,20px); grid-template-columns:1fr; } @media(min-width:560px){ .ggrid{grid-template-columns:repeat(2,1fr)} } @media(min-width:900px){ .ggrid{grid-template-columns:repeat(3,1fr)} } .gcard{margin:0} .gcard__btn{ display:block;width:100%;padding:0;border:0;background:none;color:inherit; font:inherit;text-align:left;cursor:zoom-in;border-radius:var(--r); } .gcard__frame{ position:relative;display:block;overflow:hidden;border-radius:var(--r); background:#e7e1d5;box-shadow:var(--shadow); } .gcard__frame img{ /* height:auto is load-bearing. The width/height attributes are on the for CLS, and a used height would make the browser ignore aspect-ratio. */ width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover; background:#e7e1d5; } .gcard__meta{display:block;padding:12px 4px 0} .gcard__title{ display:block;font-family:Spectral,Georgia,serif;font-size:17px; font-weight:600;color:var(--navy);line-height:1.25; } .gcard__sub{display:block;font-size:13.5px;color:var(--muted);margin-top:3px} .gcard__badge{ position:absolute;top:12px;left:12px;z-index:2; background:var(--green);color:#fff;font-size:11.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;padding:5px 12px; border-radius:30px;box-shadow:0 2px 8px rgba(20,37,58,.32); } .gcard__badge--sm{top:8px;left:8px;font-size:10px;padding:4px 9px} /* The winner takes two columns and two rows, so it reads first without needing a different colour. Collapses back to a normal card on phones. */ /* The winner only takes a 2x2 block when there are enough entries to fill the space it leaves behind. With three or four photos a big card just makes a hole, so a thin month reads better as an even grid with the winner simply first. */ @media(min-width:900px){ .gmonth--full .gcard--winner{grid-column:span 2;grid-row:span 2} .gmonth--full .gcard--winner .gcard__frame img{aspect-ratio:1/1} .gmonth--full .gcard--winner .gcard__title{font-size:21px} } .gmonth--thin .gcard--winner .gcard__frame{box-shadow:0 0 0 3px var(--green),var(--shadow)} .gcard__btn:focus-visible{outline:3px solid var(--green);outline-offset:4px;border-radius:var(--r)} @media(prefers-reduced-motion:no-preference){ .gcard__frame{transition:transform .22s ease,box-shadow .22s ease} .gcard__btn:hover .gcard__frame, .gcard__btn:focus-visible .gcard__frame{transform:translateY(-4px);box-shadow:0 20px 46px rgba(20,37,58,.18)} } .galempty{ padding:52px 26px;text-align:center;color:var(--muted); background:var(--paper);border:1px dashed var(--line);border-radius:var(--r); } /* ---- lightbox ---------------------------------------------------------- */ html{scrollbar-gutter:stable} html:has(dialog[open]){overflow:hidden} .lb{ max-width:none;max-height:none;width:100dvw;height:100dvh; margin:0;padding:clamp(12px,3vw,32px);border:0;background:transparent; color:#fff;overscroll-behavior:contain; display:grid;grid-template-columns:auto minmax(0,1fr) auto; align-items:center;gap:clamp(8px,2vw,24px); } .lb::backdrop{background:rgba(16,26,40,.94)} .lb__fig{grid-column:2;margin:0;display:grid;gap:16px;justify-items:center;min-height:0} .lb__img{ display:block;max-width:100%;max-height:70dvh;width:auto;height:auto; object-fit:contain;border-radius:8px;background:#16202c; } .lb__cap{text-align:center;max-width:62ch} .lb__title{ font-family:Spectral,Georgia,serif;font-size:clamp(19px,2.4vw,25px); color:#fff;font-weight:600;line-height:1.25; } .lb__sub{color:#c3d0dd;font-size:14.5px;margin-top:6px} .lb__note{ color:#e6edf4;font-size:15px;margin-top:12px;font-style:italic; font-family:Spectral,Georgia,serif; } .lb__count{color:#8fa2b5;font-size:13px;margin-top:12px} .lb__badge{ display:inline-block;background:var(--green);color:#fff;font-size:11px; font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:4px 11px;border-radius:30px;margin-bottom:10px; font-family:Inter,sans-serif; } .lb__btn{ display:grid;place-items:center;width:52px;height:52px;flex:none; border:1px solid rgba(255,255,255,.28);border-radius:50%; background:rgba(255,255,255,.09);color:#fff;cursor:pointer;padding:0; } .lb__btn:hover{background:rgba(255,255,255,.2)} .lb__btn:focus-visible{outline:3px solid #fff;outline-offset:3px} .lb__btn[disabled]{opacity:.28;cursor:default} .lb__btn--prev{grid-column:1} .lb__btn--next{grid-column:3} .lb__btn--close{position:absolute;top:16px;right:16px;width:46px;height:46px} @media(max-width:640px){ .lb{grid-template-columns:1fr;grid-template-rows:1fr auto;padding-bottom:22px} .lb__fig{grid-column:1;grid-row:1} .lb__img{max-height:58dvh} .lb__btn--prev,.lb__btn--next{grid-row:2;grid-column:1} .lb__btn--prev{justify-self:start} .lb__btn--next{justify-self:end} } @media(prefers-reduced-motion:no-preference){ .lb{opacity:0;scale:.985;transition:opacity .18s ease,scale .18s ease,display .18s ease allow-discrete} .lb[open]{opacity:1;scale:1} @starting-style{ .lb[open]{opacity:0;scale:.985} } } @media(prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important} } ::view-transition-group(rft-photo){animation-duration:300ms;animation-timing-function:cubic-bezier(.16,1,.3,1)} ::view-transition-old(rft-photo),::view-transition-new(rft-photo){height:100%;width:100%;object-fit:cover} @media(forced-colors:active){ .gcard__badge,.lb__badge{border:1px solid CanvasText;forced-color-adjust:none;background:Canvas;color:CanvasText} .lb{background:Canvas;color:CanvasText} } /* ========================================================================== WHERE WE FUND — catchment map + the words that carry the same information ========================================================================== */ /* -------------------------------------------------------------------------- WHERE WE FUND. The map runs the full width of the page as a divider band, with the districts written out underneath in three columns. Four rules worth not undoing: 1. The SEA is the lightest tone, not the darkest. Editorial convention, and it gives coastal labels somewhere to sit without straddling the coast. 2. The darkest ink is type and line work, never a fill. A slab of navy is what made the first attempt ugly. 3. Internal boundaries are knocked OUT in cream. A dark hairline reads as a fence; a cream one reads as a seam in one continuous surface. 4. Every label is positioned by the placer in build_map.py, not by hand. Do not nudge coordinates in the SVG; change the source and re-run it. -------------------------------------------------------------------------- */ .catchbox{ position:relative;max-width:1060px;margin:0 auto; aspect-ratio:1180/807;overflow:hidden;border-radius:var(--r); background:var(--cm-sea,#E4EBF0);border:1px solid var(--line); box-shadow:var(--shadow); } .catchbox .catchmap{position:absolute;inset:0;width:100%;height:100%} .catchmap{ display:block; --cm-sea:#E4EBF0; --cm-out-warm:#EDE6DA; --cm-stone:#C7B299; --cm-in-1:#A9BDCE; --cm-in-2:#849DB8; --cm-navy:#1B3A5B; --cm-deep:#14253A; --cm-cream:#F6F3EC; --cm-river:#5C87A8; font-family:Inter,system-ui,sans-serif; } /* A phone is not a small desktop. Slicing the wide band chops labels in half, so there is a second SVG built from the same source with its own tighter frame and a shorter label set. Exactly one is ever rendered. These rules must come AFTER .catchmap sets display, or they lose the cascade. */ .catchmap--compact{display:none} @media(max-width:760px){ .catchbox{aspect-ratio:760/647} .catchmap--wide{display:none} .catchmap--compact{display:block} } .cm-sea{fill:var(--cm-sea)} .cm-grid line{stroke:#8AA0B4;stroke-width:.5;opacity:.085} .cm-bathy{fill:none;stroke:#CEDCE6;stroke-linejoin:round} .cm-landshadow{fill:var(--cm-cream)} .cm-rest{fill:url(#cmStipple)} .cm-disc{fill:#DED4C0} .cm-core{fill:url(#cmInTone)} /* url(#id) in CSS is document-global, so the compact map needs its own two rules or it picks up the wide map's gradient and pattern. */ .catchmap--compact .cm-rest{fill:url(#compact-cmStipple)} .catchmap--compact .cm-core{fill:url(#compact-cmInTone)} .cm-rivers path{fill:none;stroke:var(--cm-river);stroke-opacity:.95;stroke-linecap:round;stroke-linejoin:round} .cm-lake{fill:#7FA6C4;stroke:#5C87A8;stroke-width:.8} path.cm-wall{fill:none;stroke:#6E5B44;stroke-width:2.2;stroke-opacity:.75;stroke-linecap:round;stroke-dasharray:7 4} .cm-seam{fill:none;stroke:var(--cm-cream);stroke-width:1.4;stroke-opacity:.62;stroke-dasharray:0 2.8;stroke-linecap:round} .cm-coast{fill:none;stroke:#93A9B8;stroke-width:.85;stroke-linejoin:round} .cm-corecase{fill:none;stroke:var(--cm-cream);stroke-width:4;stroke-opacity:.6;stroke-linejoin:round} .cm-coreline{fill:none;stroke:var(--cm-navy);stroke-width:1.6;stroke-linejoin:round} .cm-leader{fill:none;stroke:#566472;stroke-width:.8;opacity:.7} /* paint-order:stroke puts the halo BEHIND the glyph. Without it the stroke is painted over the letterforms and every label looks hollowed out. */ .cm-type text{paint-order:stroke;stroke:var(--cm-cream);stroke-linejoin:round;stroke-opacity:.92} .cm-region{font-weight:600;text-anchor:middle;stroke-width:.22em;stroke-opacity:.4} .cm-region--in{fill:#2A4E72;opacity:.6} .cm-region--disc{fill:#93825F;opacity:.9} .cm-region--out{fill:#A2937C;opacity:.9} .cm-sealabel{fill:#8CA6BB;font-family:Spectral,Georgia,serif;font-style:italic;font-weight:500;text-anchor:middle;stroke-width:.2em;stroke-opacity:.45} .cm-river,.cm-feat,text.cm-wall{font-family:Spectral,Georgia,serif;font-style:italic;font-weight:500;text-anchor:middle} .cm-river,.cm-feat{fill:#2E6289;stroke-width:.18em;stroke-opacity:.74} text.cm-wall{fill:#6E5B44;stroke:var(--cm-cream);stroke-width:.18em;paint-order:stroke;stroke-opacity:.8} .cm-dot{fill:var(--cm-deep);stroke:var(--cm-cream);stroke-width:1.4} .cm-place--t1{font-weight:600;stroke-width:.19em;fill:var(--cm-deep)} .cm-place--t2{font-weight:500;stroke-width:.19em;fill:var(--cm-deep)} .cm-place--t3{font-weight:500;stroke-width:.2em;fill:#1F3247} .cm-place--t4{font-weight:400;stroke-width:.2em;fill:#3E5063} @media(forced-colors:active){ .catchmap{forced-color-adjust:none} .cm-core{fill:Highlight} .cm-type text{fill:CanvasText;stroke:Canvas} } /* legend + credit sit under the band, back inside the page grid */ .catchkey{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center} .catchkey li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--ink)} .catchkey i{width:15px;height:15px;border-radius:4px;flex:none;border:1px solid rgba(20,37,58,.16)} .catchkey .k1{background:linear-gradient(150deg,#A9BDCE,#849DB8)} .catchkey .k2{background:#DED4C0} .catchkey .k3{background:#EDE6DA} .catchcredit{font-size:11.5px;color:#8b93a0;margin:14px auto 0;text-align:center;line-height:1.6;max-width:74ch} .catchcredit a{color:#8b93a0;text-decoration:underline} .catchlist{display:grid;gap:30px;grid-template-columns:1fr;margin-top:44px} @media(min-width:820px){.catchlist{grid-template-columns:repeat(3,1fr);gap:38px}} .catchlist h3{ font-family:Inter,sans-serif;font-size:12.5px;letter-spacing:.16em; text-transform:uppercase;font-weight:700;margin:0 0 12px; display:flex;align-items:center;gap:9px; } .catchlist h3 i{width:13px;height:13px;border-radius:4px;flex:none} .catchlist h3.t1{color:var(--navy)} .catchlist h3.t1 i{background:linear-gradient(150deg,#A9BDCE,#849DB8)} .catchlist h3.t2{color:#8a6d33} .catchlist h3.t2 i{background:#DED4C0} .catchlist h3.t3{color:var(--muted)} .catchlist h3.t3 i{background:#EDE6DA} .catchlist ul{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-wrap:wrap;gap:7px} .catchlist li{ background:var(--paper);border:1px solid var(--line);border-radius:30px; padding:6px 14px;font-size:14px;color:var(--ink); } .catchgroup{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 24px 28px}.catchgroup + .catchgroup{margin-top:0} @media(max-width:819px){.catchgroup + .catchgroup{padding-top:0;border-top:0}} .catchlist p{color:var(--muted);font-size:14.5px;margin-top:10px} .catchlist .towns{font-size:14px;color:var(--muted);margin-top:9px;line-height:1.7} .catchlist .towns b{color:var(--ink);font-weight:600} /* ========================================================================== GRANT ROUNDS, open or closed ========================================================================== */ .rounds{ display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap; background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--stone); border-radius:var(--r);padding:20px 24px;margin:22px 0; } .rounds.rounds--open{border-left-color:var(--green)} .rounds__badge{ flex:none;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; background:#efe8da;color:#7a5b22;border-radius:30px;padding:6px 14px;margin-top:2px; } .rounds--open .rounds__badge{background:#eaf1ec;color:var(--green-deep)} .rounds__body{flex:1 1 320px;color:var(--muted);font-size:15.5px;line-height:1.65} .rounds__body strong{color:var(--navy);display:block;margin-bottom:4px;font-size:16.5px;font-family:Spectral,Georgia,serif;font-weight:600} .rounds__stamp{display:block;margin-top:8px;font-size:13px;color:#8b93a0} /* ========================================================================== IMPACT FIGURES — accessible count-up (real value always in the HTML) ========================================================================== */ .stat .n{ font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"tnum" 1,"lnum" 1; letter-spacing:-.015em;white-space:nowrap; } .stat .n [data-cu]{display:inline-block} .statnote{ color:#a9bccf;font-size:13.5px;max-width:70ch;margin:30px auto 0;text-align:center;line-height:1.65; } .statnote a{color:#cfe0d4;text-decoration:underline} @media(max-width:860px){ .statgrid{grid-template-columns:repeat(2,1fr);gap:30px 20px} } @media(max-width:430px){ .stat .n{font-size:clamp(21px,6.2vw,30px)} } @media(max-width:359px){ .statgrid{grid-template-columns:1fr} } /* ========================================================================== HOMEPAGE GALLERY STRIP ========================================================================== */ .gstrip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px} .gstrip__i{position:relative;margin:0} .gstrip__i a{display:block;border-radius:12px;overflow:hidden;position:relative} .gstrip__i img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;background:#e7e1d5} @media(prefers-reduced-motion:no-preference){ .gstrip__i a{transition:transform .22s ease} .gstrip__i a:hover{transform:translateY(-3px)} } .gstrip__i a:focus-visible{outline:3px solid var(--green);outline-offset:3px} /* The `hidden` attribute must beat any display rule we set on the same element. Without this, `.lb__badge{display:inline-block}` silently defeats `