:root{--brand-blue:#0256a4;--brand-blue-dark:#014785;--brand-light:#eaf3fb;--brand-text:#1d2b36;--brand-muted:#5b6770;--brand-highlight-green:#55a508;--brand-highlight-green-dark:#438306;--white:#fff;--page-bg:#fff;--surface:#fff;--border:#d9e2ec;--radius:10px;--shadow:0 10px 30px rgba(0,0,0,.12);--max-width:1180px;--font-primary:"myriad-pro",Arial,Helvetica,sans-serif;scroll-padding-top:140px}
@media(max-width:900px){:root{scroll-padding-top:80px}}
.skip-link{position:absolute;top:-100%;left:16px;z-index:9999;padding:10px 20px;background:var(--brand-blue);color:#fff;font-weight:700;font-size:1rem;border-radius:0 0 8px 8px;text-decoration:none;transition:top .15s}.skip-link:focus{top:0;outline:3px solid #fff;outline-offset:2px}
*{box-sizing:border-box}html{overflow-x:clip}body{margin:0;overflow-x:clip;font-family:var(--font-primary);color:var(--brand-text);background:var(--page-bg);line-height:1.5}a{color:inherit;text-decoration:none}img,svg{width: 100%;
height: auto;
display: block;
border-radius: var(--radius);
}.container{width:min(var(--max-width),calc(100% - 32px));margin:0 auto}.section-label{width:min(var(--max-width),calc(100% - 32px));margin:18px auto 8px;color:var(--brand-muted);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
p{font-family:var(--font-primary);font-size:18px;line-height:27px;font-weight:400}
.hero{
min-height: 480px;
background-color: var(--brand-blue-dark); /* Fallback brand dark blue for accessibility contrast tools and slow loading */
color: #fff;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero-carousel{
position:absolute;
inset:0;
z-index:-2;
}
.hero-slide{
position:absolute;
inset:0;
background-position:center;
background-size:cover;
opacity:0;
transition:opacity .45s ease;
}
.hero-slide.active{
opacity:1;
}
.hero::after{
content:"";
position:absolute;
inset:0;
z-index:-1;
background:linear-gradient(90deg,rgba(0,0,0,.40),rgba(0,0,0,.25),rgba(0,0,0,.40));
}
.hero-content{
max-width:860px;
padding:42px 0;
text-align:center;
margin:0 auto;
}
.hero h1{
font-size: clamp(1.9rem,3.6vw,3.2rem);
line-height: 1.02;
margin: 0 auto 34px;
letter-spacing: -.04em;
text-shadow: 0 3px 16px rgba(0,0,0,.45);
min-height: 2px;
text-align:center;
}
.hero-dots{
display: none !important;
position:absolute;
left:50%;
bottom:20px;
transform:translateX(-50%);
z-index:3;
display:flex;
gap:10px;
}
.hero-dot{
width:11px;
height:11px;
border:0;
border-radius:999px;
padding:0;
background:rgba(255,255,255,.55);
cursor:pointer;
}
.hero-dot.active{
background:#fff;
}
.search-panel{max-width:720px;margin:0 auto;padding:12px;display:flex;gap:10px;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow)}
.search-panel input{
flex: 1 !important;
border: 1px solid #ccd6df !important;
border-radius: calc(var(--radius) - 2px) !important;
padding: 16px !important;
font-size: 1rem !important;
font-weight: 400 !important;
color: var(--brand-text) !important;
}
.search-panel input::placeholder {
color: var(--brand-muted) !important;
opacity: 0.9 !important;
}
.button{background:var(--brand-blue-dark);color:#fff;border:2px solid var(--brand-blue-dark);border-radius:calc(var(--radius) - 2px);padding:12px 20px;font-size:1rem;font-family:var(--font-primary);font-weight:700;cursor:pointer;display:inline-block;transition:transform .15s ease,background .15s ease,border-color .15s ease}.button:hover{background:var(--brand-highlight-green);border-color:var(--brand-highlight-green);color:#fff;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px}.button:active{opacity:0.74;transform:scale(0.975);box-shadow:inset 0 2px 6px rgba(0,0,0,0.18)}.button:focus-visible{background:var(--brand-highlight-green);border-color:var(--brand-highlight-green);color:#fff;outline:3px solid var(--brand-blue-dark);outline-offset:3px;box-shadow:none}.button:disabled,.button[disabled]{background:#c2c8ce;color:#6b7680;border-color:#c2c8ce;cursor:not-allowed;pointer-events:none;text-decoration:none}
.search-panel .button,.search-panel .btn{width:56px;min-height:52px;display:grid;place-items:center;padding:0}
.search-panel .button:active, .search-panel .button:focus {background:var(--brand-highlight-green);border-color:var(--brand-highlight-green);outline:3px solid var(--brand-blue-dark);outline-offset:3px;box-shadow:none;}
.search-panel .button svg,.search-panel .btn svg{width:1.375em;height:1.375em;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.search-panel input.button:hover {
background: var(--brand-highlight-green) !important;
border-color: var(--brand-highlight-green) !important;
color: #ffffff !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
}
.top-links-strip{max-width:var(--max-width);margin:0 auto;padding:36px 0 20px;background:var(--surface)}.top-links-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;align-items:stretch}.top-link-card{background:transparent;border-right:1px solid var(--border);padding:10px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;min-height:165px}.top-link-card:last-child{border-right:0}.top-link-icon{width:110px;height:110px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;transition:transform .18s ease}.top-link-icon:hover,.top-link-icon:focus{transform:translateY(-2px)}.top-link-icon img,.top-link-icon svg{
width: 72px;
height: 72px;
object-fit: contain;
min-height: 4px;
}.top-link-card h2{margin:0;font-size:1rem;line-height:1.2;color:var(--brand-text);transition:color .18s ease,transform .18s ease}.top-link-card:hover h2,.top-link-card:focus-within h2{color:var(--brand-blue);transform:translateY(-2px)}
.featured-updates{padding:24px 0 64px;background:var(--surface)}.promo-grid{display:grid;grid-template-columns:.95fr 2.05fr;gap:20px;align-items:start}.promo-right{display:grid;grid-template-rows:280px 280px;gap:20px}.promo-bottom{display:grid;grid-template-columns:1fr 1fr;gap:20px}.promo-card{position:relative;overflow:hidden;isolation:isolate;height:280px;border-radius:var(--radius);background:var(--brand-light);box-shadow:0 4px 18px rgba(2,86,164,.10)}.promo-card.tall{height:580px}.promo-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}.promo-card:hover img,.promo-card:focus img{transform:scale(1.04)}
.promo-title{position:absolute;z-index:2;left:-1px;right:-1px;bottom:-1px;padding:18px 22px;background:#0256a4;border-radius:0 0 calc(var(--radius) + 1px) calc(var(--radius) + 1px);color:#ffffff;font-size:clamp(1rem,1.15vw,1.25rem);line-height:1.2;font-weight:600;transition:background .18s ease,color .18s ease}.promo-card:hover .promo-title,.promo-card:focus .promo-title{color:#ffffff;background:#014785}.promo-card.wide .promo-title{padding:20px 24px}
.have-your-say{padding:64px 0;background:var(--brand-light)}.engagement-panel{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;background:var(--surface);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.engagement-copy{padding:42px}.engagement-copy h2{margin:0 0 14px;color:var(--brand-blue-dark);font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.1}.engagement-copy p{margin:0 0 20px;max-width:540px;color:var(--brand-muted)}.engagement-copy .button,.engagement-copy .btn{margin-top:10px}.engagement-image{
position: relative;
min-height: 360px;
height: 100%;
background: url('../assets/home-page/get-involved/have-your-say-bg.jpg?auto') center/cover;
display: grid;
place-items: center;
padding: 32px
}.engagement-photo-logo{width:min(72%,360px);height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.22))}
.news-notices{padding:64px 0;background:var(--surface)}.section-header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}.section-header h2{margin:0;color:var(--brand-blue-dark);font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.1}.section-header a{ font-weight:600 !important;
font-size: 2rem !important;
line-height: 1.15 !important;
color: var(--brand-blue-dark) !important;
font-weight: 900 !important;}.section-header a:hover,.section-header a:focus{color:var(--brand-blue-dark);text-decoration:underline;text-underline-offset:4px}.news-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.news-card{border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);border-top:5px solid var(--brand-blue);box-shadow:0 4px 18px rgba(2,86,164,.08);transition:transform .18s ease,box-shadow .18s ease}.news-card:hover,.news-card:focus-within{transform:translateY(-3px);box-shadow:0 10px 24px rgba(2,86,164,.14)}.news-date{margin-bottom:10px;color:var(--brand-muted);font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em}.news-card h3{margin:0 0 10px;color:var(--brand-blue-dark);font-size:1.25rem;line-height:1.2}.news-card p{margin:0 0 18px;color:var(--brand-muted)}.news-card a{color:var(--brand-blue-dark);font-weight:600 !important}
/* Text size: 150% / 200% applied to via JS — all rem values scale automatically */
body.text-large .utility-bar .container,
body.text-xlarge .utility-bar .container{flex-wrap:wrap;justify-content:flex-end;gap:8px 16px}
body.text-large .hero h1,
body.text-xlarge .hero h1,
body.text-large .section-header h2,
body.text-xlarge .section-header h2,
body.text-large .engagement-copy h2,
body.text-xlarge .engagement-copy h2 {
line-height: 1.12;
}
body.high-contrast {
--brand-blue: #003b78;
--brand-blue-dark: #001f3f;
--brand-light: #f2f2f2;
--brand-text: #000000;
--brand-muted: #222222;
--page-bg: #ffffff;
--surface: #ffffff;
--border: #000000;
--shadow: none;
color: #000000;
background: #ffffff;
}
body.high-contrast .utility-bar,
body.high-contrast .site-header,
body.high-contrast .top-links-strip,
body.high-contrast .featured-updates,
body.high-contrast .news-notices,
body.high-contrast .news-card,
body.high-contrast .engagement-panel,
body.high-contrast .search-panel,
body.high-contrast .accessibility-panel,
body.high-contrast .translation-panel,
body.high-contrast .mega-inner {
background: #ffffff !important;
color: #000000 !important;
border-color: #000000 !important;
box-shadow: none !important;
}
body.high-contrast .have-your-say {
background: #f2f2f2 !important;
}
body.high-contrast .site-footer {
background: #001f3f !important;
color: #ffffff !important;
}
body.high-contrast .site-footer a,
body.high-contrast .site-footer p,
body.high-contrast .footer-bottom {
color: #ffffff !important;
}
body.high-contrast .hero h1 {
color: #ffffff !important;
text-shadow: 0 3px 8px rgba(0,0,0,0.95) !important;
}
body.high-contrast .promo-title {
background: #000000 !important;
color: #ffffff !important;
}
body.high-contrast .nav-link,
body.high-contrast .section-header h2,
body.high-contrast .news-card h3,
body.high-contrast .engagement-copy h2,
body.high-contrast .top-link-card h2,
body.high-contrast .news-date,
body.high-contrast .section-label,
body.high-contrast .news-card p,
body.high-contrast .engagement-copy p,
body.high-contrast .accessibility-message {
color: #000000 !important;
}
body.high-contrast a:not(.button, .btn, .pg-item, .skip-link, .section-link, .social-link),
body.high-contrast .accessibility-trigger,
body.high-contrast .translation-trigger,
body.high-contrast .accessibility-options button {
color: #003b78 !important;
}
body.high-contrast .button,
body.high-contrast .btn,
body.high-contrast .section-link {
background: #001f3f !important;
color: #ffffff !important;
}
body.high-contrast a.skip-link:not(.button):not(.section-link):not(.social-link) {
background: #001f3f !important;
color: #ffffff !important;
}
body.high-contrast a.skip-link:focus:not(.button):not(.section-link):not(.social-link) {
outline: 3px solid #ffffff !important;
outline-offset: 2px !important;
}
body.high-contrast .button:hover,
body.high-contrast .button:focus,
body.high-contrast .section-link:hover,
body.high-contrast .section-link:focus {
background: #000000 !important;
}
body.high-contrast .top-link-card,
body.high-contrast .news-card,
body.high-contrast .promo-card,
body.high-contrast .search-panel input,
body.high-contrast .accessibility-panel,
body.high-contrast .translation-panel,
body.high-contrast .mega-inner {
border-color: #000000 !important;
}
body.high-contrast .promo-card,
body.high-contrast .news-card,
body.high-contrast .engagement-panel {
box-shadow: none !important;
}
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
outline: none;
scroll-margin-top: 140px;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid #000000;
outline-offset: 2px;
}
@media (max-width: 900px) {
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
scroll-margin-top: 80px;
}
}
body.high-contrast a:focus,
body.high-contrast button:focus,
body.high-contrast input:focus,
body.high-contrast select:focus,
body.high-contrast textarea:focus {
outline: none !important;
}
body.high-contrast a:focus-visible,
body.high-contrast button:focus-visible,
body.high-contrast input:focus-visible,
body.high-contrast select:focus-visible,
body.high-contrast textarea:focus-visible {
outline: 2px solid #000000 !important;
outline-offset: 2px !important;
}
body.high-contrast .site-footer a,
body.high-contrast .site-footer .footer-grid a,
body.high-contrast .site-footer .footer-grid a:visited,
body.high-contrast .site-footer .footer-grid h3,
body.high-contrast .site-footer .footer-grid p,
body.high-contrast .site-footer .footer-bottom,
body.high-contrast .site-footer .footer-bottom a {
color: #ffffff !important;
}
body.high-contrast .site-footer .social-icon {
border-color: rgba(255,255,255,0.75) !important;
}
body.high-contrast footer.site-footer,
body.high-contrast footer.site-footer * {
color: #ffffff !important;
}
body.high-contrast footer.site-footer a,
body.high-contrast footer.site-footer a:link,
body.high-contrast footer.site-footer a:visited,
body.high-contrast footer.site-footer a:hover,
body.high-contrast footer.site-footer a:focus,
body.high-contrast footer.site-footer .footer-grid a,
body.high-contrast footer.site-footer .footer-grid a:link,
body.high-contrast footer.site-footer .footer-grid a:visited,
body.high-contrast footer.site-footer a:not(.button):not(.section-link):not(.social-link),
body.high-contrast footer.site-footer a:link:not(.button):not(.section-link):not(.social-link),
body.high-contrast footer.site-footer a:visited:not(.button):not(.section-link):not(.social-link),
body.high-contrast footer.site-footer a:hover:not(.button):not(.section-link):not(.social-link),
body.high-contrast footer.site-footer a:focus:not(.button):not(.section-link):not(.social-link) {
color: #ffffff !important;
}
body.high-contrast footer.site-footer .social-icon {
border-color: rgba(255,255,255,0.75) !important;
}
body.high-contrast footer.site-footer a:focus {
outline: 3px solid #ffffff !important;
outline-offset: 3px;
}
.have-your-say{background:#f2f2f2!important}body.high-contrast .have-your-say{background:#f2f2f2!important}
:root{--brand-blue:#0256a4;--brand-blue-dark:#014785;--brand-light:#eaf3fb;--brand-text:#1d2b36;--brand-muted:#5b6770;--brand-highlight-green:#55a508;--brand-highlight-green-dark:#3f7d06;--white:#fff;--page-bg:#fff;--surface:#fff;--border:#d9e2ec;--radius:10px;--shadow:0 10px 30px rgba(0,0,0,.12);--max-width:1180px;--font-primary:"myriad-pro",Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-primary);color:var(--brand-text);background:var(--page-bg);line-height:1.5}
button,input,select,textarea{font-family:var(--font-primary);font-size:1rem}
input[type="text"],input[type="search"],input[type="email"],input[type="tel"],input[type="number"],input[type="password"],input[type="url"],input[type="date"],input[type="time"],select,textarea{border:1px solid #ccd6df !important;border-radius:6px;padding:10px 14px;font-size:.95rem;font-family:inherit;color:var(--brand-text);background:#fff;box-sizing:border-box;transition:border-color .15s ease,outline .15s ease}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-blue-dark);outline-offset:-1px;border-color:var(--brand-blue-dark)}
.input-error{border-color:#c0392b!important;outline:2px solid #c0392b!important;outline-offset:-1px!important}
a{color:inherit;text-decoration:none}
img,svg{display:block}
.container{width:min(var(--max-width),calc(100% - 32px));margin:0 auto}
:root{
--brand-blue:#0256a4;
--brand-blue-dark:#014785;
--white:#ffffff;
--max-width:1180px;
--font-primary:"myriad-pro",Arial,Helvetica,sans-serif;
--radius:10px;
}
.site-footer{
background:var(--brand-blue-dark);
color:#fff;
padding:48px 0 24px;
}
.footer-grid{
display:grid;
grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;
gap:34px;
margin-bottom:34px;
}
.footer-brand p{
margin:0;
color:rgba(255,255,255,.84);
max-width:320px;
}
.footer-brand > p:first-child strong{
color:#fff;
font-weight:600;
}
.footer-contact-details{
margin-top:16px!important;
line-height:1.55;
}
.footer-contact-details strong{
color:#fff;
}
.site-footer h3{
margin:0 0 14px;
font-size:1rem;
text-transform:uppercase;
letter-spacing:.06em;
}
.site-footer ul{
list-style:none;
padding:0;
margin:0;
display:grid;
gap:9px;
}
.site-footer a{
color:rgba(255,255,255,.84);
font-weight:600;
}
.social-list{
gap:11px;
}
.social-link{
display:inline-flex;
align-items:center;
gap:10px;
}
.social-icon{
width:28px;
height:28px;
border-radius:50%;
border:1px solid rgba(255,255,255,.32);
display:inline-grid;
place-items:center;
flex-shrink:0;
transition:background .18s ease,border-color .18s ease;
}
.social-icon svg{
width:16px;
height:16px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.social-link:hover .social-icon,
.social-link:focus .social-icon{
background:rgba(255,255,255,.12);
border-color:rgba(255,255,255,.7);
}
.footer-bottom{
border-top:1px solid rgba(255,255,255,.22);
padding-top:18px;
display:flex;
justify-content:space-between;
gap:20px;
color:rgba(255,255,255,.76);
font-size:.9rem;
}
.footer-legal{
display:flex;
gap:12px;
flex-wrap:wrap;
}
@media(max-width:900px){
.footer-grid{grid-template-columns:repeat(2,1fr)}
.footer-brand{grid-column:1 / -1}
.footer-bottom{flex-direction:column}
}
@media(max-width:560px){
.footer-grid{grid-template-columns:repeat(2,1fr)}
.footer-brand{grid-column:1 / -1}
}
.top-links-grid .top-link-card {
border-right: 1px solid var(--border) !important;
}
.top-links-grid .top-link-card:last-child {
border-right: 0 !important;
}
@media(max-width:900px){
.top-links-grid .top-link-card {
border-right: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border);
}
.top-links-grid .top-link-card:nth-child(2n) {
border-right: 0 !important;
}
.top-links-grid .top-link-card:last-child {
border-right: 0 !important;
}
}
@media(max-width:560px){
.top-links-grid .top-link-card {
border-right: 0 !important;
}
}
@media(max-width:390px){
.utility-bar .container{flex-wrap:nowrap;gap:6px;font-size:.68rem;justify-content:center}
}
@media (max-width: 900px) {
.top-links-strip {
width: min(var(--max-width), calc(100% - 32px));
padding: 32px 0 18px;
}
.top-links-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.top-links-grid .top-link-card:nth-child(3n) {
border-right: 0 !important;
}
.top-links-grid .top-link-card:nth-child(n+4) {
border-top: 1px solid var(--border);
}
.promo-grid {
grid-template-columns: 1fr;
}
.promo-card.tall {
height: 340px;
}
.promo-right {
grid-template-rows: auto;
}
.promo-card,
.promo-card.wide {
height: 280px;
}
.news-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 900px) {
.hero {
min-height: 340px;
background-position: center;
}
.hero-content {
max-width: 100%;
padding: 36px 0;
}
.hero h1 {
max-width: 680px;
margin-bottom: 24px;
font-size: clamp(1.9rem, 6vw, 2.8rem);
}
.search-panel {
width: 100%;
max-width: 680px;
}
.top-links-strip {
padding: 28px 0 16px;
}
.top-link-card {
min-height: 145px;
padding: 16px 12px;
}
.top-link-icon {
width: 86px;
height: 86px;
}
.top-link-icon img,
.top-link-icon svg {
width: 58px;
height: 58px;
}
.featured-updates {
padding: 28px 0 50px;
}
.promo-bottom {
grid-template-columns: 1fr;
}
.promo-card,
.promo-card.tall,
.promo-card.wide {
height: 260px;
}
.have-your-say {
padding: 50px 0;
}
.engagement-panel {
grid-template-columns: 1fr;
gap: 0;
}
.engagement-copy {
padding: 32px;
}
.engagement-image {
min-height: 260px;
}
}
@media (max-width: 680px) {
.hero {
min-height: 420px;
}
.hero-dots{
bottom:14px;
}
.hero h1 {
margin-bottom: 18px;
font-size: clamp(1.45rem, 6.2vw, 2rem);
line-height: 1.08;
}
.search-panel {
flex-direction: column;
gap: 10px;
padding: 10px;
}
.search-panel input {
width: 100%;
min-height: 50px;
}
.search-panel .button,
.search-panel .btn {
width: 100%;
min-height: 50px;
}
.top-links-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.top-links-grid .top-link-card {
border-right: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border);
}
.top-links-grid .top-link-card:nth-child(2n) {
border-right: 0 !important;
}
.top-links-grid .top-link-card:nth-child(3n) {
border-right: 1px solid var(--border) !important;
}
.top-links-grid .top-link-card:last-child {
border-right: 0 !important;
}
.promo-card,
.promo-card.tall,
.promo-card.wide {
height: 240px;
}
.promo-title {
padding: 16px 18px;
}
.section-header {
display: block;
}
.section-header h2 {
margin-bottom: 10px;
}
.news-list {
grid-template-columns: 1fr;
}
}
@media (max-width: 420px) {
.top-links-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.top-links-grid .top-link-card {
border-right: 1px solid var(--border) !important;
border-bottom: 1px solid var(--border);
}
.top-links-grid .top-link-card:nth-child(2n) {
border-right: 0 !important;
}
.top-links-grid .top-link-card:nth-child(3n) {
border-right: 1px solid var(--border) !important;
}
.top-links-grid .top-link-card:last-child {
border-right: 0 !important;
}
.hero h1 {
font-size: clamp(1.3rem, 6vw, 1.65rem);
line-height: 1.1;
margin-bottom: 16px;
}
}
body,
p,
li,
a,
input,
select,
textarea,
button,
.section-label,
.news-date,
.news-card p,
.engagement-copy p,
.top-link-card h2,
.promo-title,
.accessibility-message,
.translation-panel a{
font-weight:400 !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
strong,
.button,
.nav-link,
.section-link,
.translation-trigger,
.accessibility-trigger,
.contact-trigger,
.utility-bar .container>a,
.search-toggle,
.mobile-toggle,
.header-search-submit,
.search-panel .button,
.site-footer h3,
.site-footer a,
.footer-brand strong,
.footer-contact-details strong,
.news-card h3 {
font-weight:600 !important;
}
.section-header a{
font-weight:600 !important;
font-size: 2rem !important;
line-height: 1.15 !important;
color: var(--brand-blue-dark) !important;
font-weight: 900 !important;
}
.mega-header p{
font-weight:400 !important;
}
.sub-links a{
font-weight:400 !important;
}
.section-link,
.nav-link{
font-weight:600 !important;
}
.promo-title{
font-weight:600 !important;
}
@media(min-width:901px){
:root{
--max-width:1200px;
}
.container,
.section-label,
.top-links-strip{
width:min(1400px,calc(100% - 48px)) !important;
max-width:1400px !important;
}
}
@media(max-width:900px){
.container,
.section-label{
width:min(var(--max-width),calc(100% - 32px)) !important;
}
}
.emergency-notice{display:none;background:#1d1d1d;color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
body.has-emergency-notice .emergency-notice{display:block}
.emergency-notice-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 0}
.emergency-notice-label{display:inline-flex;align-items:center;gap:8px;font-weight:600!important;text-transform:uppercase;letter-spacing:.055em;font-size:.88rem}
.emergency-notice-label::before{content:"!";display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;color:#1d1d1d;font-weight:600}
.emergency-notice-link{color:#fff;font-weight:400!important;text-decoration:underline;text-underline-offset:3px}
.emergency-notice-link:hover,.emergency-notice-link:focus{color:#fff;text-decoration-thickness:2px}
.main-nav .nav-link{text-transform:uppercase!important;letter-spacing:.045em!important;font-size:1rem!important}
.news-section{padding:64px 0;background:var(--surface)}
.news-section + .news-section{padding-top:20px}
.public-notices{background:#f2f2f2}
.notice-list{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.notice-card{padding:24px;border-radius:var(--radius);background:#fff;border:1px solid var(--border);border-left:5px solid var(--brand-blue);box-shadow:0 4px 18px rgba(2,86,164,.06);transition:transform .18s ease,box-shadow .18s ease}
.notice-card:hover,.notice-card:focus-within{transform:translateY(-3px);box-shadow:0 10px 24px rgba(2,86,164,.12)}
.notice-card h3{margin:0 0 10px;color:var(--brand-blue-dark);font-size:1.25rem;line-height:1.2;font-weight:600!important}
.notice-card p{margin:0 0 18px;color:var(--brand-muted);font-weight:400!important}
.notice-card a{color:var(--brand-blue);font-weight:600!important}
.notice-card a:hover,.notice-card a:focus{color:var(--brand-blue-dark);text-decoration:underline;text-underline-offset:4px}
body.high-contrast .emergency-notice{background:#000!important;color:#fff!important;border-color:#fff!important}
body.high-contrast .emergency-notice *{color:#fff!important}
body.high-contrast .emergency-notice-label::before{background:#fff!important;color:#000!important}
body.high-contrast .public-notices,body.high-contrast .notice-card{background:#fff!important;color:#000!important;border-color:#000!important;box-shadow:none!important}
@media(max-width:900px){
.emergency-notice-inner{align-items:flex-start;flex-direction:column;gap:6px;padding:10px 0 12px}
.main-nav .nav-link{font-size:.98rem!important;letter-spacing:.035em!important}
.notice-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
.news-section{padding:50px 0}
.news-section + .news-section{padding-top:10px}
.notice-list{grid-template-columns:1fr}
}
.emergency-notice{
background:#d94f00 !important;
color:#ffffff !important;
border-bottom:0 !important;
}
.emergency-notice-label::before{
background:#ffffff !important;
color:#d94f00 !important;
}
.emergency-notice-link{
color:#ffffff !important;
}
.emergency-notice-link:hover,
.emergency-notice-link:focus{
color:#ffffff !important;
text-decoration-thickness:2px;
}
body.high-contrast .emergency-notice{
background:#000000 !important;
border-bottom:2px solid #ffffff !important;
}
body.high-contrast .emergency-notice-label::before{
background:#ffffff !important;
color:#000000 !important;
}
.top-link-card h2{
font-weight:600 !important;
}
.emergency-notice{
background:#ffa201 !important;
color:#1d1d1d !important;
border-bottom:0 !important;
}
.emergency-notice-inner{
overflow:hidden;
}
.emergency-notice-label{
color:#1d1d1d !important;
flex:0 0 auto;
}
.emergency-notice-label::before{
background:#1d1d1d !important;
color:#ffa201 !important;
}
.emergency-marquee{
flex:1 1 auto;
overflow:hidden;
min-width:0;
white-space:nowrap;
}
.emergency-marquee-track{
display:inline-flex;
gap:56px;
min-width:max-content;
animation:emergencyMarquee 24s linear infinite;
}
.emergency-marquee-track span{
color:#1d1d1d !important;
font-weight:600 !important;
}
@keyframes emergencyMarquee{
from{transform:translateX(0)}
to{transform:translateX(-50%)}
}
.emergency-notice:hover .emergency-marquee-track,
.emergency-notice:focus-within .emergency-marquee-track{
animation-play-state:paused;
}
.visually-hidden-emergency{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
@media(prefers-reduced-motion:reduce){
.emergency-marquee-track{
animation:none !important;
transform:none !important;
}
}
body.high-contrast .emergency-notice{
background:#000000 !important;
color:#ffffff !important;
border-bottom:2px solid #ffffff !important;
}
body.high-contrast .emergency-notice-label,
body.high-contrast .emergency-marquee-track span{
color:#ffffff !important;
}
body.high-contrast .emergency-notice-label::before{
background:#ffffff !important;
color:#000000 !important;
}
@media(min-width:901px){
.main-nav .nav-link{
font-size:1.08rem !important;
}
.main-nav .nav-item:last-child .nav-link{
padding-right:0 !important;
}
}
@media(min-width:901px){
.main-nav .nav-item{
position:relative !important;
}
.main-nav .nav-item::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-20px;
height:8px;
background:var(--brand-blue);
opacity:0;
pointer-events:none;
transition:opacity .16s ease;
}
.main-nav .nav-item:hover::after,
.main-nav .nav-item:focus-within::after,
.main-nav .nav-item.active::after{
opacity:1;
}
}
@media(min-width:901px){
.main-header{
align-items:stretch !important;
}
.main-nav{
align-items:stretch !important;
}
.main-nav .nav-item{
position:relative !important;
display:flex !important;
align-items:stretch !important;
}
.main-nav .nav-link{
position:relative !important;
display:flex !important;
align-items:center !important;
}
.main-nav .nav-link::after{
content:"";
position:absolute;
left:0;
right:0;
bottom:-20px;
height:8px;
background:var(--brand-blue);
opacity:0;
pointer-events:none;
z-index:5;
transition:opacity .16s ease;
}
.main-nav .nav-item:hover > .nav-link::after,
.main-nav .nav-item:focus-within > .nav-link::after,
.main-nav .nav-item.active > .nav-link::after{
opacity:1;
}
.main-nav .nav-item::after{
display:none !important;
}
}
@media(min-width:901px){
.main-header{
align-items:center !important;
}
.main-nav{
align-items:center !important;
}
.main-nav .nav-item{
position:static !important;
display:block !important;
}
.main-nav .nav-link{
position:relative !important;
display:inline-flex !important;
align-items:center !important;
box-shadow:inset 0 0 0 0 var(--brand-blue);
transition:color .18s ease, box-shadow .16s ease;
}
.main-nav .nav-item:hover > .nav-link,
.main-nav .nav-item:focus-within > .nav-link,
.main-nav .nav-item.active > .nav-link{
box-shadow:inset 0 -8px 0 0 var(--brand-blue);
}
.main-nav .nav-link::after,
.main-nav .nav-item::after{
display:none !important;
content:none !important;
}
.mega{
left:0 !important;
right:0 !important;
width:100% !important;
}
}
@media(min-width:901px){
.main-nav .nav-link{
box-shadow:none !important;
}
.main-nav .nav-item:hover > .nav-link,
.main-nav .nav-item:focus-within > .nav-link,
.main-nav .nav-item.active > .nav-link{
box-shadow:inset 0 -8px 0 0 var(--brand-blue), 0 20px 0 0 var(--brand-blue) !important;
}
}
@media(min-width:901px){
.main-nav .nav-link{
box-shadow:none !important;
border-bottom:8px solid transparent !important;
margin-bottom:-8px !important;
}
.main-nav .nav-item:hover > .nav-link,
.main-nav .nav-item:focus-within > .nav-link,
.main-nav .nav-item.active > .nav-link{
box-shadow:none !important;
border-bottom-color:var(--brand-blue) !important;
}
}
@media(min-width:901px){
.main-nav .nav-link{
border-bottom:0 !important;
margin-bottom:0 !important;
box-shadow:none !important;
position:relative !important;
}
.main-nav .nav-link::before{
content:"";
position:absolute;
left:0;
right:0;
bottom:-16px;
height:8px;
background:var(--brand-blue);
opacity:0;
pointer-events:none;
transition:opacity .16s ease;
}
.main-nav .nav-item:hover > .nav-link,
.main-nav .nav-item:focus-within > .nav-link,
.main-nav .nav-item.active > .nav-link{
border-bottom-color:transparent !important;
box-shadow:none !important;
}
.main-nav .nav-item:hover > .nav-link::before,
.main-nav .nav-item:focus-within > .nav-link::before,
.main-nav .nav-item.active > .nav-link::before{
opacity:1;
}
}
@media(min-width:901px){
.main-nav .nav-link::before{
bottom:-24px !important;
height:8px !important;
}
}
@media(min-width:901px){
.main-nav .nav-item:last-child .nav-link{
padding-right:0 !important;
margin-right:-19px !important;
}
}
.site-footer{
background:#014785 !important;
color:#ffffff !important;
}
.site-footer,
.site-footer *{
color:#ffffff;
}
.site-footer a{
color:rgba(255,255,255,.88) !important;
}
.site-footer .footer-bottom{
color:rgba(255,255,255,.78) !important;
border-top-color:rgba(255,255,255,.24) !important;
}
@media(min-width:901px){
.mega .sub-links a{
font-size:1rem !important;
line-height:1.5 !important;
}
.mega .sub-links li{
margin-bottom:10px !important;
}
}
.updates-hub{
padding:70px 0;
background:#ffffff;
}
.updates-hub-header{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:28px;
margin-bottom:28px;
}
.updates-kicker{
display:block;
margin-bottom:8px;
color:var(--brand-muted);
font-size:.82rem;
letter-spacing:.08em;
text-transform:uppercase;
font-weight:600 !important;
}
.updates-hub-header h2{
margin:0 0 8px;
color:var(--brand-blue-dark);
font-size:clamp(1.9rem,3vw,2.65rem);
line-height:1.08;
font-weight:600 !important;
}
.updates-hub-header p{
margin:0;
max-width:680px;
color:var(--brand-muted);
font-weight:400 !important;
}
.updates-hub-grid{
display:grid;
grid-template-columns:1.35fr .9fr;
gap:26px;
align-items:stretch;
}
.town-news-panel,
.public-notices-panel{
min-width:0;
}
.updates-panel-header{
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
margin-bottom:16px;
padding-bottom:12px;
border-bottom:1px solid var(--border);
}
.updates-panel-header h3{
margin:0;
color:var(--brand-blue-dark);
font-size:1.35rem;
line-height:1.15;
font-weight:600 !important;
}
.updates-panel-header a{
color:var(--brand-blue);
font-weight:600 !important;
white-space:nowrap;
}
.updates-panel-header a:hover,
.updates-panel-header a:focus{
color:var(--brand-blue-dark);
text-decoration:underline;
text-underline-offset:4px;
}
.featured-news-card{
display:grid;
grid-template-columns:.92fr 1.08fr;
min-height:310px;
overflow:hidden;
background:#ffffff;
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:0 8px 22px rgba(2,86,164,.08);
}
.featured-news-image{
min-height:310px;
background:url('images/landing page/featured items/news.jpg?auto=format&fit=crop&w=900&q=80') center/cover no-repeat;
}
.featured-news-content{
padding:28px;
display:flex;
flex-direction:column;
justify-content:center;
}
.featured-news-content h4{
margin:0 0 10px;
color:var(--brand-blue-dark);
font-size:clamp(1.45rem,2.2vw,2rem);
line-height:1.08;
font-weight:600 !important;
}
.featured-news-content p{
margin:0 0 18px;
color:var(--brand-muted);
font-weight:400 !important;
}
.featured-news-content span{
color:var(--brand-blue);
font-weight:600 !important;
}
.mini-news-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
margin-top:16px;
}
.mini-news-item{
display:block;
padding:20px;
background:#ffffff;
border:1px solid var(--border);
border-radius:var(--radius);
transition:transform .18s ease,border-color .18s ease;
}
.mini-news-item strong{
display:block;
margin-bottom:7px;
color:var(--brand-blue-dark);
font-size:1.08rem;
line-height:1.2;
font-weight:600 !important;
}
.mini-news-item span{
display:block;
color:var(--brand-muted);
font-weight:400 !important;
}
.featured-news-card:hover,
.featured-news-card:focus,
.mini-news-item:hover,
.mini-news-item:focus,
.notice-rail-item:hover,
.notice-rail-item:focus{
transform:translateY(-2px);
border-color:var(--brand-blue);
}
.notice-rail{
display:grid;
gap:14px;
padding:22px;
background:#f2f2f2;
border-radius:var(--radius);
border:1px solid var(--border);
}
.notice-rail-item{
display:grid;
grid-template-columns:64px 1fr;
gap:16px;
align-items:start;
padding:18px;
background:#ffffff;
border:1px solid var(--border);
border-radius:var(--radius);
transition:transform .18s ease,border-color .18s ease;
}
.notice-date-box{
display:grid;
place-items:center;
min-height:64px;
border-radius:8px;
background:var(--brand-blue);
color:#ffffff;
text-align:center;
}
.notice-date-box span{
display:block;
color:#ffffff;
font-size:.78rem;
line-height:1;
text-transform:uppercase;
font-weight:400 !important;
}
.notice-date-box strong{
display:block;
color:#ffffff;
font-size:1.55rem;
line-height:1;
font-weight:600 !important;
}
.notice-rail-item h4{
margin:0 0 6px;
color:var(--brand-blue-dark);
font-size:1.08rem;
line-height:1.2;
font-weight:600 !important;
}
.notice-rail-item p{
margin:0;
color:var(--brand-muted);
font-weight:400 !important;
}
body.high-contrast .updates-hub,
body.high-contrast .featured-news-card,
body.high-contrast .mini-news-item,
body.high-contrast .notice-rail,
body.high-contrast .notice-rail-item{
background:#ffffff !important;
color:#000000 !important;
border-color:#000000 !important;
box-shadow:none !important;
}
body.high-contrast .notice-date-box{
background:#000000 !important;
color:#ffffff !important;
}
@media(max-width:980px){
.updates-hub-grid{
grid-template-columns:1fr;
}
}
@media(max-width:760px){
.updates-hub{
padding:54px 0;
}
.updates-hub-header{
display:block;
}
.updates-panel-header{
display:block;
}
.updates-panel-header a{
display:inline-block;
margin-top:8px;
}
.featured-news-card{
grid-template-columns:1fr;
}
.featured-news-image{
min-height:220px;
}
.mini-news-list{
grid-template-columns:1fr;
}
.notice-rail{
padding:16px;
}
}
.news-events-section{
padding:64px 0 70px;
background:#ffffff;
}
.visually-hidden-section-title{
position:absolute !important;
width:1px !important;
height:1px !important;
padding:0 !important;
margin:-1px !important;
overflow:hidden !important;
clip:rect(0,0,0,0) !important;
white-space:nowrap !important;
border:0 !important;
}
.news-events-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:64px;
align-items:start;
}
.list-panel-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding-bottom:16px;
border-bottom:1px solid #cfcfcf;
}
.list-panel-title{
display:flex;
align-items:center;
gap:14px;
min-width:0;
}
.list-panel-title svg{
width:34px;
height:34px;
flex:0 0 34px;
fill:none;
stroke:#333333;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.list-panel-title h3{
margin:0;
color:#2f2f2f;
font-size:clamp(1.7rem,2.2vw,2.15rem);
line-height:1.1;
font-weight:600 !important;
}
.list-panel-header a{
color:var(--brand-blue);
font-size:1.05rem;
font-weight:600 !important;
white-space:nowrap;
}
.list-panel-header a:hover,
.list-panel-header a:focus{
color:var(--brand-blue-dark);
text-decoration:underline;
text-underline-offset:4px;
}
.simple-list{
display:grid;
}
.simple-list-row,
.event-list-row{
display:grid;
align-items:center;
min-height:82px;
gap:18px;
border-bottom:1px solid #cfcfcf;
color:inherit;
}
.simple-list-row{
grid-template-columns:minmax(0,1fr) auto;
}
.event-list-row{
grid-template-columns:60px minmax(0,1fr) auto;
}
.simple-list-title,
.event-list-title{
min-width:0;
color:var(--brand-blue);
font-size:clamp(1.05rem,1.35vw,1.34rem);
line-height:1.18;
font-weight:600 !important;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.simple-list-meta{
color:var(--brand-muted);
font-size:clamp(1rem,1.2vw,1.25rem);
line-height:1.2;
font-weight:400 !important;
white-space:nowrap;
}
.event-date-box{
width:56px;
min-height:64px;
display:grid;
place-items:center;
align-content:center;
background:#e7f2fb;
color:var(--brand-blue-dark);
text-align:center;
}
.event-date-box span{
display:block;
color:var(--brand-blue-dark);
font-size:.72rem;
line-height:1;
text-transform:uppercase;
font-weight:600 !important;
}
.event-date-box strong{
display:block;
color:var(--brand-blue-dark);
font-size:1.55rem;
line-height:1.05;
font-weight:600 !important;
}
.simple-list-row:hover .simple-list-title,
.simple-list-row:focus .simple-list-title,
.event-list-row:hover .event-list-title,
.event-list-row:focus .event-list-title{
color:var(--brand-blue-dark);
text-decoration:underline;
text-underline-offset:4px;
}
body.high-contrast .news-events-section,
body.high-contrast .event-date-box{
background:#ffffff !important;
color:#000000 !important;
}
body.high-contrast .list-panel-header,
body.high-contrast .simple-list-row,
body.high-contrast .event-list-row{
border-color:#000000 !important;
}
body.high-contrast .list-panel-title svg{
stroke:#000000 !important;
}
@media(max-width:980px){
.news-events-grid{
grid-template-columns:1fr;
gap:44px;
}
}
@media(max-width:680px){
.news-events-section{
padding:54px 0 60px;
}
.list-panel-header{
align-items:flex-start;
flex-direction:column;
gap:10px;
}
.simple-list-row{
grid-template-columns:1fr;
gap:8px;
padding:18px 0;
}
.event-list-row{
grid-template-columns:56px 1fr;
gap:14px;
padding:14px 0;
}
.event-list-row .simple-list-meta{
grid-column:2;
margin-top:-8px;
}
.simple-list-title,
.event-list-title{
white-space:normal;
}
}
.top-link-icon{
transition:transform .22s ease, filter .22s ease !important;
}
.top-link-card:hover .top-link-icon,
.top-link-card:focus-within .top-link-icon,
.top-link-icon:hover,
.top-link-icon:focus{
transform:translateY(-8px) scale(1.08) !important;
filter:drop-shadow(0 8px 10px rgba(2,86,164,.18));
}
.top-link-card:hover h2,
.top-link-card:focus-within h2{
transform:translateY(-3px) !important;
}
@media(prefers-reduced-motion:reduce){
.top-link-icon,
.top-link-card h2{
transition:none !important;
}
.top-link-card:hover .top-link-icon,
.top-link-card:focus-within .top-link-icon,
.top-link-icon:hover,
.top-link-icon:focus,
.top-link-card:hover h2,
.top-link-card:focus-within h2{
transform:none !important;
filter:none !important;
}
}
.emergency-notice{
background:#014785 !important;
color:#ffffff !important;
border-bottom:0 !important;
}
.emergency-notice-label,
.emergency-marquee-track span,
.emergency-notice-link{
color:#ffffff !important;
}
.emergency-notice-label::before{
background:#ffffff !important;
color:#014785 !important;
}
body.high-contrast .emergency-notice{
background:#000000 !important;
color:#ffffff !important;
border-bottom:2px solid #ffffff !important;
}
body.high-contrast .emergency-notice-label::before{
background:#ffffff !important;
color:#000000 !important;
}
.hero h1{
font-size:clamp(2.8rem,5.4vw,5.8rem) !important;
line-height:.95 !important;
letter-spacing:-.055em !important;
max-width:980px !important;
}
@media(max-width:900px){
.hero h1{
font-size:clamp(2.4rem,8vw,4.25rem) !important;
line-height:.98 !important;
}
}
@media(max-width:680px){
.hero h1{
font-size:clamp(2.15rem,10vw,3.35rem) !important;
line-height:1 !important;
}
}
#townNewsHeading,
#eventsHeading,
.list-panel-title h3{
color:#014785 !important;
}
@media(max-width:900px){
.engagement-copy{
text-align:center !important;
}
.engagement-copy p{
margin-left:auto !important;
margin-right:auto !important;
}
.engagement-copy .button,
.engagement-copy .btn{
display:inline-flex !important;
justify-content:center !important;
align-items:center !important;
text-align:center !important;
}
}
@media(max-width:680px){
.engagement-copy{
padding-left:24px !important;
padding-right:24px !important;
}
.engagement-copy .button,
.engagement-copy .btn{
width:auto !important;
max-width:100% !important;
}
}
@media(min-width:901px){
.mega .sub-links a{
font-size:1.08rem !important;
line-height:1.55 !important;
}
.mega .sub-links li{
margin-bottom:12px !important;
}
}
@media(min-width:901px){
.mega .sub-links a:hover,
.mega .sub-links a:focus{
font-weight:600 !important;
}
}
.list-panel-title svg{
stroke:#014785 !important;
}
.emergency-notice-label{
text-transform:uppercase !important;
}
.emergency-marquee.emergency-notice-link{
display:block;
color:#ffffff !important;
text-decoration:none !important;
}
.emergency-marquee.emergency-notice-link:hover,
.emergency-marquee.emergency-notice-link:focus{
text-decoration:underline !important;
text-underline-offset:4px;
}
.emergency-marquee.emergency-notice-link:focus{
outline:3px solid #ffffff !important;
outline-offset:3px;
}
.hero-video-slide video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
}
@media(prefers-reduced-motion:reduce){
.hero-video-slide video{
display:none;
}
.hero-video-slide{
background-image:url('images/landing page/banner images/banner-images-country-view.jpg?auto=format&fit=crop&w=1800&q=80');
background-position:center;
background-size:cover;
}
}
body.homepage .header-actions .search-toggle{
display:none !important;
}
@media(min-width:901px){
:root{
--max-width:1200px;
}
.container,
.section-label,
.top-links-strip,
.header-search-inner{
width:min(1400px,calc(100% - 48px)) !important;
max-width:1400px !important;
}
}
@media(max-width:900px){
.container,
.section-label,
.header-search-inner{
width:min(var(--max-width),calc(100% - 32px)) !important;
}
}
@media(min-width:901px) and (max-width:900px){
.main-nav .nav-link{
font-size:.92rem !important;
letter-spacing:.025em !important;
padding-left:10px !important;
padding-right:10px !important;
}
.logo img{
width:168px !important;
}
.main-header{
gap:14px !important;
}
}
.main-nav .nav-link{
text-transform:uppercase !important;
}
@media(min-width:901px){
.main-nav .nav-item{
position:static !important;
}
.main-nav .nav-link{
position:relative !important;
}
.main-nav .nav-link::before{
content:"";
position:absolute;
left:0;
right:0;
bottom:-24px;
height:8px;
background:var(--brand-blue);
opacity:0;
pointer-events:none;
transition:opacity .16s ease;
}
.main-nav .nav-item:hover > .nav-link::before,
.main-nav .nav-item:focus-within > .nav-link::before,
.main-nav .nav-item.active > .nav-link::before{
opacity:1;
}
.mega{
left:0 !important;
right:0 !important;
top:100% !important;
width:100% !important;
}
.mega-inner{
border:0 !important;
box-shadow:0 18px 45px rgba(15,45,64,.14) !important;
}
.mega-inner::before{
content:"";
display:block;
height:8px;
background:linear-gradient(90deg,#0276e8 0%,#0256a4 100%);
}
.mega-header{
background:#f2f2f2 !important;
border-bottom:0 !important;
}
.mega .sub-links a{
font-size:1.08rem !important;
line-height:1.55 !important;
font-weight:400 !important;
}
.mega .sub-links a:hover,
.mega .sub-links a:focus{
font-weight:600 !important;
}
.mega .sub-links li{
margin-bottom:12px !important;
}
}
@media(max-width:900px){
/* Both panels: absolute relative to utility-bar container, scrolls with sticky bar */
.utility-item.contact-menu,
.utility-item.accessibility-menu{
position:static !important;
}
.contact-panel,
.accessibility-panel{
position:absolute !important;
top:calc(100% + 4px) !important;
right:0 !important;
left:0 !important;
width:auto !important;
max-width:none !important;
max-height:calc(100vh - 80px) !important;
overflow-y:auto !important;
z-index:9999 !important;
white-space:normal !important;
overflow-wrap:break-word !important;
}
.accessibility-panel h3,
.accessibility-message{
max-width:100% !important;
white-space:normal !important;
}
.accessibility-options{
display:flex !important;
flex-wrap:wrap !important;
gap:14px 18px !important;
}
.accessibility-options button{
white-space:nowrap !important;
}
}
.site-header,
.site-header::after,
main,
.hero{
margin-top:0 !important;
margin-bottom:0 !important;
}
body.high-contrast .mega-inner{
border:2px solid #000000 !important;
}
.hero h1{
margin-bottom:32px !important;
}
@media(max-width:900px){
.hero h1{
margin-bottom:24px !important;
}
}
@media(max-width:680px){
.hero h1{
margin-bottom:24px !important;
}
}
.hero-search-typed-cursor{
display:inline-block;
}
.mega-support-cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:22px;
margin:0 24px 24px;
padding:20px 22px;
background:#f2f2f2;
border-radius:var(--radius);
}
.mega-support-copy{
min-width:0;
}
.mega-support-copy strong{
display:block;
margin-bottom:4px;
color:var(--brand-blue-dark);
font-size:1.08rem;
line-height:1.2;
font-weight:600 !important;
}
.mega-support-copy span{
display:block;
color:var(--brand-muted);
font-size:.98rem;
line-height:1.35;
font-weight:400 !important;
}
.mega-support-actions{
display:flex;
align-items:center;
gap:12px;
flex-shrink:0;
}
.mega-support-primary,
.mega-support-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:42px;
padding:0 16px;
border-radius:calc(var(--radius) - 2px);
font-size:.98rem;
line-height:1;
font-weight:600 !important;
white-space:nowrap;
}
.mega-support-primary{
background:var(--brand-blue);
color:#ffffff !important;
}
.mega-support-primary:hover,
.mega-support-primary:focus{
background:var(--brand-green);
color:#ffffff !important;
text-decoration:underline;
text-underline-offset:3px;
}
.mega-support-secondary{
background:#ffffff;
color:var(--brand-blue) !important;
border:1px solid var(--border);
}
.mega-support-secondary:hover,
.mega-support-secondary:focus{
color:var(--brand-blue-dark) !important;
border-color:var(--brand-blue);
text-decoration:underline;
text-underline-offset:3px;
}
body.high-contrast .mega-support-cta{
background:#ffffff !important;
border:2px solid #000000 !important;
}
body.high-contrast .mega-support-cta .mega-support-actions a.mega-support-primary{
background:var(--brand-blue-dark) !important;
color:#ffffff !important;
}
body.high-contrast .mega-support-secondary{
background:#ffffff !important;
color:#000000 !important;
border-color:#000000 !important;
}
@media(max-width:900px){
.mega-support-cta{
display:none;
margin:0 18px 18px;
padding:18px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
}
.mega-support-copy strong,
.mega-support-copy span{
color:#ffffff !important;
}
.mega-support-actions{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin-top:14px;
}
.mega-support-primary,
.mega-support-secondary{
width:100%;
min-height:44px;
}
.mega-support-secondary{
background:#ffffff;
color:var(--brand-blue-dark) !important;
border-color:#ffffff;
}
}
.mobile-menu-support-cta{
display:none;
}
@media(max-width:900px){
.mega .mega-support-cta{
display:none !important;
}
.mobile-menu-support-cta{
display:block;
margin:18px;
padding:18px;
background:rgba(255,255,255,.10);
border:1px solid rgba(255,255,255,.18);
border-radius:var(--radius);
}
.mobile-menu-support-copy strong{
display:block;
margin-bottom:5px;
color:#ffffff !important;
font-size:1.05rem;
line-height:1.2;
font-weight:600 !important;
}
.mobile-menu-support-copy span{
display:block;
color:rgba(255,255,255,.9) !important;
font-size:.96rem;
line-height:1.35;
font-weight:400 !important;
}
.mobile-menu-support-actions{
display:grid;
grid-template-columns:1fr;
gap:10px;
margin-top:14px;
}
.mobile-menu-support-primary,
.mobile-menu-support-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
width:100%;
min-height:44px;
padding:0 16px;
border-radius:calc(var(--radius) - 2px);
font-size:.98rem;
line-height:1;
font-weight:600 !important;
text-align:center;
}
.mobile-menu-support-primary{
background:#ffffff;
color:var(--brand-blue-dark) !important;
}
.mobile-menu-support-secondary{
background:transparent;
color:#ffffff !important;
border:1px solid rgba(255,255,255,.72);
}
.mobile-menu-support-primary:hover,
.mobile-menu-support-primary:focus,
.mobile-menu-support-secondary:hover,
.mobile-menu-support-secondary:focus{
text-decoration:underline;
text-underline-offset:3px;
}
}
@media(max-width:900px){
.mobile-menu-support-cta{
margin:0 !important;
padding:18px !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
border-top:1px solid rgba(255,255,255,.22) !important;
}
.mobile-menu-support-copy strong{
font-size:1rem !important;
}
.mobile-menu-support-copy span{
font-size:.94rem !important;
}
.mobile-menu-support-actions{
grid-template-columns:1fr !important;
gap:8px !important;
margin-top:12px !important;
}
.mobile-menu-support-primary,
.mobile-menu-support-secondary{
justify-content:flex-start !important;
width:auto !important;
min-height:auto !important;
padding:0 !important;
background:transparent !important;
border:0 !important;
color:#ffffff !important;
text-align:left !important;
}
.mobile-menu-support-primary::after,
.mobile-menu-support-secondary::after{
content:" →";
}
.mobile-menu-support-primary:hover,
.mobile-menu-support-primary:focus,
.mobile-menu-support-secondary:hover,
.mobile-menu-support-secondary:focus{
color:#ffffff !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
}
}
@media(max-width:900px){
.mobile-menu-support-actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
margin-top:14px !important;
}
.mobile-menu-support-primary,
.mobile-menu-support-secondary{
display:inline-flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap:10px !important;
width:100% !important;
min-height:44px !important;
padding:0 14px !important;
border-radius:calc(var(--radius) - 2px) !important;
font-size:.98rem !important;
line-height:1 !important;
font-weight:600 !important;
text-align:left !important;
text-decoration:none !important;
}
.mobile-menu-support-primary{
background:#ffffff !important;
color:var(--brand-blue-dark) !important;
border:1px solid #ffffff !important;
}
.mobile-menu-support-secondary{
background:rgba(255,255,255,.12) !important;
color:#ffffff !important;
border:1px solid rgba(255,255,255,.72) !important;
}
.mobile-menu-support-primary::before,
.mobile-menu-support-secondary::before{
content:"";
width:18px;
height:18px;
flex:0 0 18px;
background:currentColor;
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-position:center;
mask-position:center;
-webkit-mask-size:18px 18px;
mask-size:18px 18px;
}
.mobile-menu-support-primary::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44a1 1 0 0 1-1.41 1.42l-4.45-4.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9Zm8.2-2.3l.55 1.2l1.2.55l-1.2.55l-.55 1.2l-.55-1.2l-1.2-.55l1.2-.55l.55-1.2Zm2.6 4.6l.4.9l.9.4l-.9.4l-.4.9l-.4-.9l-.9-.4l.9-.4l.4-.9Z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.5 3a6.5 6.5 0 0 1 5.17 10.44l4.45 4.44a1 1 0 0 1-1.41 1.42l-4.45-4.45A6.5 6.5 0 1 1 9.5 3Zm0 2a4.5 4.5 0 1 0 0 9a4.5 4.5 0 0 0 0-9Zm8.2-2.3l.55 1.2l1.2.55l-1.2.55l-.55 1.2l-.55-1.2l-1.2-.55l1.2-.55l.55-1.2Zm2.6 4.6l.4.9l.9.4l-.9.4l-.4.9l-.4-.9l-.9-.4l.9-.4l.4-.9Z'/%3E%3C/svg%3E");
}
.mobile-menu-support-secondary::before{
-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v5h6v5h2v6h-6v-6h2v-3h-4v3h2v6H9v-6h2v-3H7v3h2v6H3v-6h2V8h6V3Zm0 12v2h2v-2h-2Zm6 0v2h2v-2h-2ZM5 15v2h2v-2H5Z'/%3E%3C/svg%3E");
mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 3h2v5h6v5h2v6h-6v-6h2v-3h-4v3h2v6H9v-6h2v-3H7v3h2v6H3v-6h2V8h6V3Zm0 12v2h2v-2h-2Zm6 0v2h2v-2h-2ZM5 15v2h2v-2H5Z'/%3E%3C/svg%3E");
}
.mobile-menu-support-primary::after,
.mobile-menu-support-secondary::after{
content:none !important;
}
.mobile-menu-support-primary:hover,
.mobile-menu-support-primary:focus,
.mobile-menu-support-secondary:hover,
.mobile-menu-support-secondary:focus{
text-decoration:underline !important;
text-underline-offset:3px !important;
}
}
@media(max-width:900px){
.mobile-menu-support-primary:hover,
.mobile-menu-support-primary:focus{
background:#ffffff !important;
color:var(--brand-blue-dark) !important;
border-color:#ffffff !important;
font-weight:600 !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
}
.mobile-menu-support-secondary:hover,
.mobile-menu-support-secondary:focus{
background:rgba(255,255,255,.12) !important;
color:#ffffff !important;
border-color:rgba(255,255,255,.72) !important;
font-weight:600 !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
}
}
@media(min-width:901px){
.main-nav .nav-item{
border-left:2px solid var(--border) !important;
}
.main-nav .nav-item:first-child{
border-left:0 !important;
}
}
.top-links-grid .top-link-card{
border-right:2px solid var(--border) !important;
}
.top-links-grid .top-link-card:last-child{
border-right:0 !important;
}
@media(max-width:900px){
.top-links-grid .top-link-card{
border-right:2px solid var(--border) !important;
}
.top-links-grid .top-link-card:nth-child(3n){
border-right:0 !important;
}
.top-links-grid .top-link-card:nth-child(n+4){
border-top:2px solid var(--border) !important;
}
}
@media(max-width:900px){
.top-links-grid .top-link-card{
border-right:2px solid var(--border) !important;
border-bottom:2px solid var(--border) !important;
}
.top-links-grid .top-link-card:nth-child(2n){
border-right:0 !important;
}
.top-links-grid .top-link-card:nth-child(3n){
border-right:2px solid var(--border) !important;
}
.top-links-grid .top-link-card:last-child{
border-right:0 !important;
}
}
@media(max-width:560px){
.top-links-grid .top-link-card{
border-right:0 !important;
border-bottom:2px solid var(--border) !important;
}
}
.site-footer{
background:#000000 !important;
color:#ffffff !important;
}
.site-footer,
.site-footer *{
color:#ffffff !important;
}
.site-footer a{
color:rgba(255,255,255,.88) !important;
}
.site-footer a:hover{
color:#ffffff !important;
text-decoration:underline;
}
.site-footer a:focus{
color:#ffffff !important;
text-decoration:underline;
text-underline-offset:4px;
background-color:transparent !important;
outline:2px solid #ffffff;
outline-offset:4px;
}
.site-footer .footer-bottom{
color:rgba(255,255,255,.78) !important;
border-top-color:rgba(255,255,255,.24) !important;
}
.site-footer .social-icon{
border-color:rgba(255,255,255,.35) !important;
}
.mega .section-link{
display:block !important;
width:100% !important;
margin-bottom:14px !important;
padding:4px 0 12px !important;
background:transparent !important;
color:var(--brand-blue-dark) !important;
font-size:1.08rem !important;
font-weight:600 !important;
line-height:1.25 !important;
border-bottom:2px solid var(--brand-blue-dark) !important;
cursor:default !important;
text-decoration:none !important;
pointer-events:none !important;
}
.mega .section-link:hover,
.mega .section-link:focus{
color:var(--brand-blue-dark) !important;
background:transparent !important;
text-decoration:none !important;
}
body.high-contrast .mega .section-link{
color:#ffffff !important;
border-bottom-color:rgba(255,255,255,.4) !important;
padding-left:12px !important;
padding-right:12px !important;
}
body.high-contrast .mega .sub-links a{
color:#003b78 !important;
}
body.high-contrast .mega .sub-links a:hover,
body.high-contrast .mega .sub-links a:focus{
color:#000000 !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
}
@media(max-width:900px){
.mega .section-link{
color:#ffffff !important;
border-bottom:2px solid rgba(255,255,255,.42) !important;
pointer-events:none !important;
}
}
@media(max-width:900px){
.nav-wrap .mega-inner{
background:#ffffff !important;
}
.nav-wrap .mega-grid{
background:#ffffff !important;
}
.nav-wrap .mega .section-link{
color:var(--brand-blue-dark) !important;
border-bottom:2px solid var(--brand-blue-dark) !important;
background:transparent !important;
padding:4px 0 12px !important;
margin-bottom:12px !important;
pointer-events:none !important;
cursor:default !important;
}
.nav-wrap .mega .sub-links a{
color:#606060 !important;
}
.nav-wrap .mega .sub-links a:hover,
.nav-wrap .mega .sub-links a:focus{
color:var(--brand-blue) !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
text-decoration-thickness:2px !important;
}
body.high-contrast .nav-wrap .mega-inner,
body.high-contrast .nav-wrap .mega-grid{
background:#ffffff !important;
}
body.high-contrast .nav-wrap .mega .section-link{
color:#000000 !important;
border-bottom-color:#000000 !important;
}
body.high-contrast .nav-wrap .mega .sub-links a{
color:#000000 !important;
}
body.high-contrast .nav-wrap .mega .sub-links a:hover,
body.high-contrast .nav-wrap .mega .sub-links a:focus{
color:#000000 !important;
}
}
.emergency-notice{
display:block !important;
}
.mega-header{
display:none !important;
}
@media(max-width:900px){
.mega-header{
display:none !important;
}
}
.notice-date-box{
background:var(--brand-blue-dark) !important;
color:#ffffff !important;
}
.notice-date-box span{
color:#ffffff !important;
font-size:1rem !important;
line-height:1 !important;
font-weight:600 !important;
letter-spacing:.04em !important;
}
.notice-date-box strong{
color:#ffffff !important;
font-size:1.55rem !important;
line-height:1 !important;
font-weight:600 !important;
}
body.high-contrast .notice-date-box{
background:#000000 !important;
color:#ffffff !important;
}
body.high-contrast .notice-date-box span,
body.high-contrast .notice-date-box strong{
color:#ffffff !important;
}
.event-date-box{
background:var(--brand-blue-dark) !important;
color:#ffffff !important;
border-color:var(--brand-blue-dark) !important;
}
.event-date-box span,
.event-date-box .event-month,
.event-date-box .month{
color:#ffffff !important;
font-size:1.05rem !important;
line-height:1 !important;
font-weight:600 !important;
letter-spacing:.04em !important;
text-transform:uppercase !important;
}
.event-date-box strong,
.event-date-box .event-day,
.event-date-box .day{
color:#ffffff !important;
font-size:1.55rem !important;
line-height:1 !important;
font-weight:600 !important;
}
body.high-contrast .event-date-box{
background:#000000 !important;
color:#ffffff !important;
border-color:#000000 !important;
}
body.high-contrast .event-date-box span,
body.high-contrast .event-date-box strong,
body.high-contrast .event-date-box .event-month,
body.high-contrast .event-date-box .event-day,
body.high-contrast .event-date-box .month,
body.high-contrast .event-date-box .day{
color:#ffffff !important;
}
.event-date-box{
border-radius:6px !important;
overflow:hidden !important;
}
@media(min-width:1100px){
.nav-wrap{
justify-content:flex-end !important;
margin-right:0 !important;
padding-right:0 !important;
}
.main-nav{
justify-content:flex-end !important;
margin-right:0 !important;
padding-right:0 !important;
}
.main-nav .nav-item:last-child .nav-link{
padding-right:0 !important;
margin-right:0 !important;
}
body.homepage .header-actions{
width:0 !important;
min-width:0 !important;
margin-left:0 !important;
gap:0 !important;
}
}
@media(min-width:1100px){
.main-nav{
transform:translateX(-40px) !important;
}
.mega{
transform:translateX(40px) !important;
}
}
@media(min-width:1100px){
.main-nav{
transform:translateX(40px) !important;
}
.mega{
left:0 !important;
right:0 !important;
width:100% !important;
transform:none !important;
}
.mega-inner{
width:100% !important;
max-width:none !important;
}
}
@media(min-width:1100px){
body.homepage .header-actions{
display:none !important;
width:0 !important;
min-width:0 !important;
margin:0 !important;
padding:0 !important;
}
.nav-wrap{
flex:1 1 auto !important;
justify-content:flex-end !important;
margin-left:auto !important;
margin-right:0 !important;
padding-right:0 !important;
transform:none !important;
}
.main-nav{
justify-content:flex-end !important;
margin-left:auto !important;
margin-right:0 !important;
padding-right:0 !important;
transform:none !important;
}
.main-nav .nav-item:last-child .nav-link{
padding-right:0 !important;
margin-right:0 !important;
}
.mega{
position:absolute !important;
left:0 !important;
right:0 !important;
top:100% !important;
width:100% !important;
transform:none !important;
}
.mega-inner{
width:100% !important;
max-width:none !important;
transform:none !important;
}
}
.mega-inner{
background:rgba(255,255,255,.9) !important;
backdrop-filter:saturate(120%) blur(4px);
}
.mega-grid{
background:transparent !important;
}
@media(max-width:1099px){
.mega-inner{
background:#ffffff !important;
backdrop-filter:none !important;
}
}
.mega-inner{
background: var(--surface) !important;
backdrop-filter: none;
}
@media(max-width:1099px){
.mega-inner{
background:#ffffff !important;
backdrop-filter:none !important;
}
}
@media(min-width:1100px){
.main-nav .nav-item:last-child .nav-link{
padding-right:0 !important;
margin-right:0 !important;
}
}
@media(min-width:1100px){
.main-nav{
gap:0 !important;
padding-right:0 !important;
margin-right:0 !important;
}
.main-nav .nav-item:last-child{
margin-right:0 !important;
padding-right:0 !important;
}
.main-nav .nav-item:last-child .nav-link{
padding-right:0 !important;
margin-right:0 !important;
}
.nav-wrap{
padding-right:0 !important;
margin-right:0 !important;
}
}
@media(min-width:1100px){
.nav-wrap,
.main-nav{
margin-right:0 !important;
padding-right:0 !important;
justify-content:flex-end !important;
}
.main-nav .nav-item:last-child,
.main-nav .nav-item:last-child .nav-link{
margin-right:0 !important;
padding-right:0 !important;
}
.main-nav .nav-item:last-child .mega,
.mega{
transform:none !important;
left:0 !important;
right:0 !important;
width:100% !important;
}
}
body.homepage .header-actions .search-toggle{
display:none !important;
}
body:not(.homepage) .header-actions .search-toggle{
display:inline-grid !important;
}
@media(max-width:1099px){
.nav-wrap{
background:#fff !important;
}
.nav-link:hover,
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link{
background:rgba(2,86,164,.07) !important;
color:var(--brand-blue) !important;
}
.mobile-menu-support-cta{
border-top-color:rgba(2,86,164,.15) !important;
}
.mobile-menu-support-secondary{
background:transparent !important;
border-color:var(--brand-blue) !important;
color:var(--brand-blue) !important;
}
.mobile-menu-support-secondary:hover,
.mobile-menu-support-secondary:focus{
background:rgba(2,86,164,.07) !important;
border-color:var(--brand-blue) !important;
}
}
.enews-cta{
padding:56px 0;
background:#f2f2f2;
}
.enews-cta-card{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
gap:34px;
align-items:center;
padding:34px;
background:#ffffff;
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:0 8px 24px rgba(2,86,164,.08);
}
.enews-cta-kicker{
display:block;
margin-bottom:8px;
color:var(--brand-muted);
font-size:.82rem;
letter-spacing:.08em;
text-transform:uppercase;
font-weight:600 !important;
}
.enews-cta h2{
margin:0 0 12px;
color:var(--brand-blue-dark);
font-size:clamp(1.9rem,3vw,2.65rem);
line-height:1.08;
font-weight:600 !important;
}
.enews-cta p{
margin:0;
max-width:720px;
color:var(--brand-muted);
font-weight:400 !important;
}
.enews-benefits{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:18px;
}
.enews-benefits span{
display:inline-flex;
align-items:center;
padding:7px 10px;
background:var(--brand-light);
color:var(--brand-blue-dark);
border-radius:999px;
font-size:.9rem;
line-height:1;
font-weight:600 !important;
}
.enews-form{
display:grid;
gap:10px;
}
.enews-form-row{
display:flex;
flex-direction:row;
gap:12px;
align-items:center;
}
.enews-form label{
color:var(--brand-text);
font-size:.95rem;
line-height:1.3;
font-weight:600 !important;
}
.enews-form input{
flex:1;
min-width:0;
width:100%;
min-height:52px;
padding:14px 15px;
border:1px solid var(--border);
border-radius:calc(var(--radius) - 2px);
background:#ffffff;
color:var(--brand-text);
font:inherit;
}
.enews-form .button,.enews-form .btn{
white-space:nowrap;
display:inline-flex;
align-items:center;
justify-content:center;
min-height:52px;
}
.enews-privacy{
margin:2px 0 0 !important;
color:var(--brand-muted);
font-size:.9rem !important;
line-height:1.35 !important;
}
.enews-privacy a{
color:var(--brand-blue);
font-weight:600 !important;
}
.enews-privacy a:hover,
.enews-privacy a:focus{
color:var(--brand-blue-dark);
text-decoration:underline;
text-underline-offset:3px;
}
body.high-contrast .enews-cta,
body.high-contrast .enews-cta-card{
background:#ffffff !important;
color:#000000 !important;
border-color:#000000 !important;
box-shadow:none !important;
}
body.high-contrast .enews-benefits span{
background:#ffffff !important;
color:#000000 !important;
border:1px solid #000000 !important;
}
@media(max-width:900px){
.enews-cta{
padding:46px 0;
}
.enews-cta-card{
grid-template-columns:1fr;
gap:26px;
padding:28px;
}
}
@media(max-width:680px){
.enews-form-row{
flex-direction:column;
align-items:stretch;
}
.enews-form .button,
.enews-form .btn{
width:100%;
}
}
.enews-cta-copy{
position:relative;
}
.enews-icon{
display:inline-grid;
place-items:center;
width:64px;
height:64px;
margin-bottom:18px;
border-radius:50%;
background:var(--brand-blue);
color:#ffffff;
box-shadow:0 8px 18px rgba(2,86,164,.18);
}
.enews-icon svg{
width:32px;
height:32px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
body.high-contrast .enews-icon{
background:#000000 !important;
color:#ffffff !important;
border:2px solid #000000 !important;
box-shadow:none !important;
}
.enews-cta-copy p{
max-width:680px;
}
.enews-cta{
padding:64px 0;
background:#f2f2f2;
}
.enews-cta-card.enews-cta-photo-layout{
display:grid !important;
grid-template-columns:minmax(360px,.92fr) minmax(0,1.08fr) !important;
gap:0 !important;
align-items:stretch !important;
padding:0 !important;
overflow:hidden;
background:#ffffff;
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:0 8px 24px rgba(2,86,164,.08);
}
.enews-photo{
position: relative;
min-height: 360px;
background: linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,.02)),
url('../assets/home-page/subscribe/subscribe.jpg') center/cover no-repeat;
}
.enews-photo::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(1,71,133,0) 45%,rgba(1,71,133,.32) 100%);
pointer-events:none;
}
.enews-photo-badge{
position:absolute;
left:22px;
bottom:22px;
z-index:2;
display:inline-flex;
align-items:center;
gap:12px;
padding:12px 15px 12px 12px;
background:rgba(255,255,255,.94);
color:var(--brand-blue-dark);
border-radius:999px;
box-shadow:0 8px 18px rgba(0,0,0,.18);
font-weight:600 !important;
}
.enews-photo-badge .enews-icon{
width:42px;
height:42px;
margin:0;
box-shadow:none;
}
.enews-photo-badge .enews-icon svg{
width:22px;
height:22px;
}
.enews-content{
display:flex;
flex-direction:column;
justify-content:center;
padding:44px;
}
.enews-content .enews-cta-kicker{
display:block;
margin-bottom:8px;
color:var(--brand-muted);
font-size:.82rem;
letter-spacing:.08em;
text-transform:uppercase;
font-weight:600 !important;
}
.enews-content h2{
margin:0 0 12px;
color:var(--brand-blue-dark);
font-size:clamp(1.9rem,3vw,2.65rem);
line-height:1.08;
font-weight:600 !important;
}
.enews-content p{
margin:0 0 22px;
max-width:680px;
color:var(--brand-muted);
font-weight:400 !important;
}
.enews-content .enews-form{
max-width:620px;
}
body.high-contrast .enews-photo{
border-right:1px solid #000000 !important;
}
body.high-contrast .enews-photo::after{
display:none !important;
}
body.high-contrast .enews-photo-badge{
background:#ffffff !important;
color:#000000 !important;
border:1px solid #000000 !important;
box-shadow:none !important;
}
@media(max-width:900px){
.enews-cta{
padding:50px 0;
}
.enews-cta-card.enews-cta-photo-layout{
grid-template-columns:1fr !important;
}
.enews-photo{
min-height:280px;
}
.enews-content{
padding:32px;
}
}
@media(max-width:680px){
.enews-photo{
min-height:230px;
}
.enews-content{
padding:26px;
}
}
@media(max-width:680px){
.events-list,
.event-list{
gap:0 !important;
}
.event-item,
.event-row{
display:grid !important;
grid-template-columns:74px minmax(0,1fr) !important;
column-gap:18px !important;
align-items:start !important;
padding:22px 0 !important;
}
.event-date,
.event-date-badge{
width:74px !important;
min-width:74px !important;
height:74px !important;
align-self:start !important;
margin-top:0 !important;
}
.event-content,
.event-details{
padding-top:0 !important;
align-self:start !important;
}
.event-content h3,
.event-details h3,
.event-title{
margin:0 0 8px !important;
line-height:1.18 !important;
}
.event-time,
.event-meta,
.event-content p,
.event-details p{
margin-top:0 !important;
margin-bottom:0 !important;
line-height:1.25 !important;
}
}
@media(max-width:420px){
.event-item,
.event-row{
grid-template-columns:68px minmax(0,1fr) !important;
column-gap:14px !important;
padding:20px 0 !important;
}
.event-date,
.event-date-badge{
width:68px !important;
min-width:68px !important;
height:68px !important;
}
}
@media(max-width:680px){
.event-item,
.event-row{
align-items:start !important;
}
.event-date,
.event-date-badge{
align-self:start !important;
margin-top:0 !important;
transform:none !important;
}
.event-content,
.event-details{
align-self:start !important;
padding-top:0 !important;
margin-top:0 !important;
}
.event-content h3,
.event-details h3,
.event-title{
margin-top:0 !important;
padding-top:0 !important;
}
}
@media(max-width:680px){
.upcoming-events .event-card,
.upcoming-events .event-item,
.upcoming-events .event-row,
.events-list .event-card,
.events-list .event-item,
.events-list .event-row,
.event-list .event-card,
.event-list .event-item,
.event-list .event-row{
display:grid !important;
grid-template-columns:112px minmax(0,1fr) !important;
column-gap:18px !important;
align-items:start !important;
justify-items:start !important;
padding-top:24px !important;
padding-bottom:24px !important;
}
.upcoming-events .event-date,
.upcoming-events .event-date-badge,
.events-list .event-date,
.events-list .event-date-badge,
.event-list .event-date,
.event-list .event-date-badge{
grid-column:1 !important;
grid-row:1 / span 2 !important;
align-self:start !important;
justify-self:start !important;
margin:0 !important;
transform:none !important;
}
.upcoming-events .event-card > a,
.upcoming-events .event-card > div:not(.event-date):not(.event-date-badge),
.upcoming-events .event-content,
.upcoming-events .event-details,
.events-list .event-card > a,
.events-list .event-card > div:not(.event-date):not(.event-date-badge),
.events-list .event-content,
.events-list .event-details,
.event-list .event-card > a,
.event-list .event-card > div:not(.event-date):not(.event-date-badge),
.event-list .event-content,
.event-list .event-details{
grid-column:2 !important;
align-self:start !important;
justify-self:start !important;
margin-top:0 !important;
padding-top:0 !important;
}
.upcoming-events h3,
.upcoming-events .event-title,
.events-list h3,
.events-list .event-title,
.event-list h3,
.event-list .event-title{
margin-top:0 !important;
padding-top:0 !important;
line-height:1.15 !important;
}
.upcoming-events .event-time,
.events-list .event-time,
.event-list .event-time{
grid-column:2 !important;
margin-top:10px !important;
}
}
.enews-photo{
background-position:center center !important;
background-size:cover !important;
}
/* =========================================================
HOMEPAGE HERO TITLE SIZE REFINEMENT
Drupal implementation note:
Reduces the homepage hero title from the oversized test treatment
while keeping it bold/semi-bold and readable over photography/video.
This rule is placed late in the stylesheet so it overrides earlier
prototype hero-title rules.
========================================================= */
.hero h1{
font-size:clamp(2.15rem,4vw,4.1rem) !important;
line-height:1.02 !important;
letter-spacing:-.045em !important;
font-weight:600 !important;
max-width:900px !important;
}
@media(max-width:900px){
.hero h1{
font-size:clamp(2rem,6.5vw,3.25rem) !important;
line-height:1.04 !important;
max-width:720px !important;
}
}
@media(max-width:680px){
.hero h1{
font-size:clamp(1.65rem,7vw,2.35rem) !important;
line-height:1.08 !important;
max-width:100% !important;
}
}
@media(max-width:420px){
.hero h1{
font-size:clamp(1.45rem,6.5vw,1.9rem) !important;
line-height:1.1 !important;
}
}
/* =========================================================
HOMEPAGE HERO TITLE SCREENSHOT MATCH
Drupal implementation note:
Matches the approved screenshot direction: large, clean, bold white
hero title with strong but not overdone weight. This uses the normal
approved 600 semi-bold weight and relies on size/shadow for impact
rather than artificial stroke.
========================================================= */
.hero h1{
font-size:clamp(3.25rem,5.25vw,5.05rem) !important;
line-height:1 !important;
letter-spacing:-.05em !important;
font-weight:600 !important;
max-width:900px !important;
text-shadow:0 3px 10px rgba(0,0,0,.62), 0 1px 2px rgba(0,0,0,.55) !important;
-webkit-text-stroke:0 !important;
}
@media(max-width:900px){
.hero h1{
font-size:clamp(2.65rem,7.2vw,4rem) !important;
line-height:1.02 !important;
max-width:760px !important;
}
}
@media(max-width:680px){
.hero h1{
font-size:clamp(2rem,9vw,3rem) !important;
line-height:1.04 !important;
letter-spacing:-.04em !important;
max-width:100% !important;
}
}
@media(max-width:420px){
.hero h1{
font-size:clamp(1.65rem,8vw,2.25rem) !important;
line-height:1.06 !important;
}
}
/* =========================================================
HOMEPAGE HERO TITLE FINAL WEIGHT
Drupal implementation note:
Hero title font weight is locked to 600 to match the approved
screenshot direction and the Town's two-weight typography standard.
========================================================= */
.hero h1{
font-weight:600 !important;
-webkit-text-stroke:0 !important;
}
/* =========================================================
HOMEPAGE HERO TITLE FINAL APPROVED STYLE
Drupal implementation note:
The homepage hero title must render at font-weight 600. This rule is
intentionally specific and placed at the end of the stylesheet to
override earlier prototype rules, including generic span/text rules.
No artificial stroke or 700/800 weight is used.
========================================================= */
body.homepage .hero .hero-content h1,
body.homepage .hero .hero-content h1 *,
.hero .hero-content h1,
.hero .hero-content h1 *{
font-family:var(--font-primary) !important;
font-weight:500 !important;
-webkit-text-stroke:0 !important;
text-shadow:0 3px 12px rgba(0,0,0,.62), 0 1px 2px rgba(0,0,0,.55) !important;
}
body.homepage .hero .hero-content h1,
.hero .hero-content h1{
font-size:clamp(3.25rem,5.25vw,5.05rem) !important;
line-height:1 !important;
letter-spacing:-.05em !important;
max-width:900px !important;
}
@media(max-width:900px){
body.homepage .hero .hero-content h1,
.hero .hero-content h1{
font-size:clamp(2.65rem,7.2vw,4rem) !important;
line-height:1.02 !important;
max-width:760px !important;
}
}
@media(max-width:680px){
body.homepage .hero .hero-content h1,
.hero .hero-content h1{
font-size:clamp(2rem,9vw,3rem) !important;
line-height:1.04 !important;
letter-spacing:-.04em !important;
max-width:100% !important;
}
}
@media(max-width:420px){
body.homepage .hero .hero-content h1,
.hero .hero-content h1{
font-size:clamp(1.65rem,8vw,2.25rem) !important;
line-height:1.06 !important;
}
}
/* =========================================================
HOMEPAGE HERO TOP LINE REMOVED
Drupal implementation note:
This version removes the 8px blue brand line that sits directly
above the homepage hero, so the hero image begins immediately below
the header. Interior page header treatment can retain the brand line.
========================================================= */
/* =========================================================
MEGA MENU ALIGNMENT WITH FINAL SITEMAP
Drupal implementation note:
Mega menu columns have been revised to better reflect the final
SiteMap/IA structure. The menu now surfaces more stable sub-landing
pages while keeping detailed child pages in the full SiteMap.
CSS allows five logical columns on wide screens where needed.
========================================================= */
@media(min-width:901px){
.mega-grid{
grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
}
}
/* =========================================================
TRANSLATE MENU LANGUAGE ORDER
Drupal implementation note:
Preferred first-position language order is:
English, Italian, Punjabi, Hindi, French.
Remaining languages can follow after these priority items.
========================================================= */
.mega-support-actions,
.mobile-menu-support-actions{
display:none !important;
}
.mega-support-inline-link,
.mobile-support-inline-link{
color:var(--brand-blue) !important;
font-weight:600 !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
}
.mega-support-inline-link:hover,
.mega-support-inline-link:focus,
.mobile-support-inline-link:hover,
.mobile-support-inline-link:focus{
color:var(--brand-blue-dark) !important;
text-decoration-thickness:2px !important;
}
@media(max-width:900px){
.mobile-support-inline-link{
color:#ffffff !important;
font-weight:600 !important;
}
.mobile-support-inline-link:hover,
.mobile-support-inline-link:focus{
color:#ffffff !important;
}
}
/* =========================================================
MEGA MENU SUPPORT LINE SINGLE ROW
Drupal implementation note:
Keeps the mega menu support prompt and inline links on one line on
desktop. Mobile can wrap naturally for readability.
========================================================= */
@media(min-width:901px){
.mega-support-cta{
display:none !important;
align-items:center !important;
justify-content:flex-start !important;
gap:0 !important;
}
.mega-support-copy{
display:flex !important;
align-items:center !important;
gap:8px !important;
min-width:0 !important;
}
.mega-support-copy strong,
.mega-support-copy span{
display:inline !important;
margin:0 !important;
white-space:nowrap !important;
}
}
@media(max-width:900px){
.mobile-menu-support-copy strong,
.mobile-menu-support-copy span{
display:block !important;
}
}
/* =========================================================
MEGA MENU SUPPORT LINE UNIFORM FONT SIZE
Drupal implementation note:
Keeps the full support sentence on one line with consistent font
sizing across the prompt text and inline links.
========================================================= */
@media(min-width:901px){
.mega-support-copy,
.mega-support-copy strong,
.mega-support-copy span,
.mega-support-copy a,
.mega-support-inline-link{
font-size:1rem !important;
line-height:1.35 !important;
}
.mega-support-copy strong,
.mega-support-copy a,
.mega-support-inline-link{
font-weight:600 !important;
}
.mega-support-copy span{
font-weight:400 !important;
}
}
/* =========================================================
SAVED STANDARD MEGA MENU
Drupal implementation note:
This landing page now uses the saved standard mega menu treatment:
light grey utility/accessory top nav, updated Translate order, and
the two-button mega menu CTA with "AI-assisted search" and
"View the SiteMap". Keep this as the current default pattern.
========================================================= */
.utility-bar{
background:#f7f8f9 !important;
border-bottom:1px solid #eef1f4 !important;
}
/* Ensure the previous inline-link CTA treatment does not override buttons. */
.mega-support-inline-link,
.mobile-support-inline-link{
all:unset;
}
.mega-support-cta{
display:none !important;
align-items:center !important;
justify-content:space-between !important;
gap:22px !important;
margin:0 24px 24px !important;
padding:20px 22px !important;
background:#f2f2f2 !important;
border-radius:var(--radius) !important;
}
.mega-support-copy{
min-width:0 !important;
}
.mega-support-copy strong{
display:block !important;
margin-bottom:4px !important;
color:var(--brand-blue-dark) !important;
font-size:1.08rem !important;
line-height:1.2 !important;
font-weight:600 !important;
}
.mega-support-copy span{
display:block !important;
color:var(--brand-muted) !important;
font-size:.98rem !important;
line-height:1.35 !important;
font-weight:400 !important;
}
.mega-support-actions{
display:flex !important;
align-items:center !important;
gap:12px !important;
flex-shrink:0 !important;
}
.mega-support-primary,
.mega-support-secondary{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:42px !important;
padding:0 16px !important;
border-radius:calc(var(--radius) - 2px) !important;
font-size:.98rem !important;
line-height:1 !important;
font-weight:600 !important;
text-decoration:none !important;
white-space:nowrap !important;
}
.mega-support-primary{
background:var(--brand-blue) !important;
color:#ffffff !important;
border:1px solid var(--brand-blue) !important;
}
.mega-support-secondary{
background:#ffffff !important;
color:var(--brand-blue-dark) !important;
border:1px solid var(--border) !important;
}
.mega-support-primary:hover,
.mega-support-primary:focus{
background:var(--brand-green) !important;
border-color:var(--brand-green) !important;
color:#ffffff !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
}
.mega-support-secondary:hover,
.mega-support-secondary:focus{
border-color:var(--brand-blue) !important;
color:var(--brand-blue) !important;
text-decoration:underline !important;
text-underline-offset:3px !important;
}
.mobile-menu-support-cta{
display:none !important;
}
@media(max-width:900px){
.mega .mega-support-cta{
display:none !important;
}
.mobile-menu-support-cta{
display:block !important;
margin:0 !important;
padding:18px !important;
background:transparent !important;
border:0 !important;
border-radius:0 !important;
border-top:1px solid rgba(255,255,255,.22) !important;
}
.mobile-menu-support-copy strong{
display:block !important;
margin-bottom:5px !important;
color:#ffffff !important;
font-size:1rem !important;
line-height:1.2 !important;
font-weight:600 !important;
}
.mobile-menu-support-copy span{
display:block !important;
color:rgba(255,255,255,.9) !important;
font-size:.94rem !important;
line-height:1.35 !important;
font-weight:400 !important;
}
.mobile-menu-support-actions{
display:grid !important;
grid-template-columns:1fr !important;
gap:10px !important;
margin-top:14px !important;
}
.mobile-menu-support-primary,
.mobile-menu-support-secondary{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
width:100% !important;
min-height:44px !important;
padding:0 16px !important;
border-radius:calc(var(--radius) - 2px) !important;
font-size:.98rem !important;
line-height:1 !important;
font-weight:600 !important;
text-align:center !important;
text-decoration:none !important;
}
.mobile-menu-support-primary{
background:#ffffff !important;
color:var(--brand-blue-dark) !important;
border:1px solid #ffffff !important;
}
.mobile-menu-support-secondary{
background:transparent !important;
color:#ffffff !important;
border:1px solid rgba(255,255,255,.72) !important;
}
.mobile-menu-support-primary:hover,
.mobile-menu-support-primary:focus,
.mobile-menu-support-secondary:hover,
.mobile-menu-support-secondary:focus{
text-decoration:underline !important;
text-underline-offset:3px !important;
}
}
/* =========================================================
SUB-LANDING PAGE COMPONENTS
=========================================================
Styles specific to interior / sub-landing page templates.
Shared global styles (header, footer, nav, accessibility,
utility bar, emergency notice) live above in this file.
========================================================= */
/* ---- Page banner image ---- */
.page-banner {
aspect-ratio: 1900 / 405;
min-height: 180px;
max-height: 420px;
background: center/cover no-repeat;
border-bottom: 1px solid var(--border);
}
body.high-contrast .page-banner {
border-bottom: 2px solid #000000;
}
/* ---- Interior hero / title band ---- */
.interior-hero {
background: linear-gradient(135deg, #ffffff 0%, #f1f3f5 100%);
border-bottom: 1px solid var(--border);
padding: 44px 0 44px;
}
.interior-hero h1 {
margin: 0 0 16px;
color: var(--brand-blue-dark);
font-size: clamp(2.2rem, 4vw, 3.5rem);
line-height: 1.05;
letter-spacing: -0.045em;
}
.interior-hero p {
max-width: 860px;
margin: 0;
color: var(--brand-muted);
}
@media(max-width:680px) {
.interior-hero {
padding: 26px 0 28px;
}
.interior-hero .breadcrumbs {
margin-bottom: 14px;
}
.interior-hero h1 {
margin-bottom: 0;
}
}
/* ---- Breadcrumbs ---- */
.breadcrumbs, .bc {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-bottom: 26px;
font-size: 0.92rem;
line-height: 1.4;
font-weight: 400;
}
.breadcrumbs a, .bc a {
color: var(--brand-blue);
font-weight: 400 !important;
text-decoration: none;
}
.breadcrumbs a:hover,
.breadcrumbs a:focus,
.bc a:hover,
.bc a:focus {
color: var(--brand-blue);
text-decoration: underline;
text-underline-offset: 3px;
}
.breadcrumbs .crumb-sep, .bc .sep {
color: #666;
font-weight: 400;
}
.breadcrumbs .crumb-current,
.breadcrumbs [aria-current="page"],
.bc .cur,
.bc [aria-current="page"] {
color: #1a1a1a;
font-weight: 400 !important;
}
body.high-contrast .breadcrumbs a, body.high-contrast .bc a { color: #000 !important; }
body.high-contrast .breadcrumbs .crumb-current, body.high-contrast .bc .cur, body.high-contrast .breadcrumbs .crumb-sep, body.high-contrast .bc .sep { color: #000 !important; }
/* ---- Content shell & layout ---- */
.content-shell {
padding: 28px 0 72px;
background: var(--surface);
}
@media(max-width:680px) {
.content-shell {
padding-top: 18px;
}
}
.content-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 42px;
align-items: start;
}
.content-main {
min-width: 0;
}
/* ---- Intro card ---- */
.intro-card {
padding: 28px;
margin-bottom: 28px;
background: #ffffff;
border: 1px solid var(--border);
border-left: 6px solid var(--brand-blue);
border-radius: var(--radius);
box-shadow: 0 6px 18px rgba(2,86,164,0.08);
}
.intro-card p {
margin: 0;
color: var(--brand-text);
}
/* ---- Contact card grid ---- */
.contact-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
margin: 28px 0;
}
.contact-card {
padding: 22px;
background: var(--brand-light);
border-radius: var(--radius);
border: 1px solid rgba(2,86,164,0.14);
}
.contact-card h2 {
margin: 0 0 8px;
color: var(--brand-blue-dark);
font-size: 1.1rem;
line-height: 1.2;
}
.contact-card p,
.contact-card a {
margin: 0;
color: var(--brand-text);
font-weight: 700;
}
.contact-card a {
color: var(--brand-blue);
}
.contact-card a:hover,
.contact-card a:focus {
color: var(--brand-blue-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---- PRC feature grid ---- */
.prc-feature {
display: grid;
grid-template-columns: 1.15fr 0.85fr;
gap: 22px;
align-items: stretch;
margin: 28px 0 34px;
}
.prc-feature-card {
position: relative;
overflow: hidden;
min-height: 310px;
border-radius: var(--radius);
background: #ffffff;
border: 1px solid var(--border);
box-shadow: 0 8px 22px rgba(2,86,164,0.08);
}
.prc-feature-card img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.prc-feature-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(0,0,0,.48), rgba(0,0,0,.10));
}
.prc-feature-content {
position: relative;
z-index: 2;
display: flex;
min-height: 310px;
flex-direction: column;
justify-content: flex-end;
padding: 28px;
color: #ffffff;
}
.prc-feature-content h2 {
margin: 0 0 10px;
color: #ffffff;
font-size: clamp(1.6rem, 2.8vw, 2.35rem);
line-height: 1.05;
}
.prc-feature-content p {
max-width: 560px;
margin: 0 0 18px;
color: rgba(255,255,255,.92);
}
.prc-feature-side {
display: grid;
gap: 16px;
}
.prc-mini-card {
display: block;
padding: 22px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 6px 18px rgba(2,86,164,0.06);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.prc-mini-card:hover,
.prc-mini-card:focus {
transform: translateY(-2px);
border-color: var(--brand-blue);
box-shadow: 0 10px 24px rgba(2,86,164,0.12);
}
.prc-mini-card strong {
display: block;
margin-bottom: 8px;
color: var(--brand-blue-dark);
font-size: 1.12rem;
line-height: 1.2;
}
.prc-mini-card span {
display: block;
color: var(--brand-muted);
}
/* ---- Content sections ---- */
.content-section {
padding: 34px 0;
border-top: 1px solid var(--border);
}
.content-section h2 {
margin: 0 0 16px;
color: var(--brand-blue-dark);
font-size: clamp(1.55rem, 2.4vw, 2rem);
line-height: 1.15;
}
.content-section h3 {
margin: 24px 0 10px;
color: var(--brand-blue);
font-size: 1.18rem;
line-height: 1.2;
}
.content-section p {
margin: 0 0 16px;
color: var(--brand-text);
}
.content-section ul,
.content-section ol {
margin: 0 0 18px 1.25rem;
padding: 0;
}
.content-section li {
margin-bottom: 8px;
}
/* ---- Service principles ---- */
.service-principles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 22px;
}
.principle-card {
padding: 22px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: #ffffff;
box-shadow: 0 4px 16px rgba(2,86,164,0.06);
}
.principle-card h3 {
margin-top: 0;
}
/* ---- Service card grid ---- */
.service-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
margin-top: 22px;
}
.service-card {
display: block;
padding: 24px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: #ffffff;
box-shadow: 0 4px 16px rgba(2,86,164,0.06);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.service-card:hover,
.service-card:focus {
transform: translateY(-2px);
border-color: var(--brand-blue);
box-shadow: 0 10px 24px rgba(2,86,164,0.12);
}
.service-card h3 {
margin: 0 0 10px;
color: var(--brand-blue-dark);
font-size: 1.25rem;
line-height: 1.2;
}
.service-card p {
margin: 0;
color: var(--brand-muted);
}
.service-card .card-link {
display: inline-block;
margin-top: 16px;
color: var(--brand-blue);
font-weight: 900;
}
/* ---- Action panel ---- */
.action-panel {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 22px;
padding: 28px;
margin: 32px 0;
background: var(--brand-blue);
color: #ffffff;
border-radius: var(--radius);
}
.action-panel h2 {
margin: 0 0 8px;
color: #ffffff;
font-size: 1.5rem;
}
.action-panel p {
margin: 0;
color: rgba(255,255,255,0.9);
}
.action-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 46px;
padding: 0 18px;
background: #ffffff;
color: var(--brand-blue-dark);
border-radius: calc(var(--radius) - 2px);
font-weight: 900;
white-space: nowrap;
}
.action-button:hover,
.action-button:focus {
background: #eaf3fb;
text-decoration: underline;
text-underline-offset: 4px;
}
/* ---- Strategy panel ---- */
.strategy-panel {
padding: 28px;
background: #f2f2f2;
border: 1px solid var(--border);
border-radius: var(--radius);
}
.strategy-panel h2 {
margin-top: 0;
}
/* ---- Sidebar ---- */
.sidebar {
position: sticky;
top: 126px;
display: grid;
gap: 20px;
align-self: start;
}
@media (min-width: 981px) {
.sidebar, .typical-sidebar, .foi-sidebar, .list-sidebar, .post-sidebar, .applications-filter-sidebar {
max-height: calc(100vh - 140px);
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #c8d6e4 transparent;
}
.sidebar::-webkit-scrollbar, .typical-sidebar::-webkit-scrollbar, .foi-sidebar::-webkit-scrollbar, .list-sidebar::-webkit-scrollbar, .post-sidebar::-webkit-scrollbar, .applications-filter-sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb, .typical-sidebar::-webkit-scrollbar-thumb, .foi-sidebar::-webkit-scrollbar-thumb, .list-sidebar::-webkit-scrollbar-thumb, .post-sidebar::-webkit-scrollbar-thumb, .applications-filter-sidebar::-webkit-scrollbar-thumb { background: #c8d6e4; border-radius: 4px; }
}
/* Sticky top responsive: header shrinks at narrower viewports */
@media (max-width: 900px) {
.sidebar, .typical-sidebar, .foi-sidebar,
.right-sidebar, .post-sidebar, .event-sidebar,
.applications-filter-sidebar, .list-sidebar { top: 100px; }
}
@media (max-width: 900px) {
.sidebar, .typical-sidebar, .foi-sidebar,
.right-sidebar, .post-sidebar, .event-sidebar,
.applications-filter-sidebar, .list-sidebar { top: 80px; }
}
.sidebar-card {
padding: 24px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 6px 18px rgba(2,86,164,0.08);
}
.sidebar-card.highlight {
background: var(--brand-blue);
color: #ffffff;
border-color: var(--brand-blue);
}
.sidebar-card h2 {
margin: 0 0 10px;
color: var(--brand-blue-dark);
font-size: 1.25rem;
}
.sidebar-card.highlight h2,
.sidebar-card.highlight p,
.sidebar-card.highlight a {
color: #ffffff;
}
.sidebar-card p {
margin: 0 0 14px;
color: var(--brand-muted);
}
.sidebar-card ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.sidebar-card a {
color: var(--brand-blue);
font-weight: 800;
}
.sidebar-card a:hover,
.sidebar-card a:focus {
color: var(--brand-blue-dark);
text-decoration: underline;
text-underline-offset: 3px;
}
.sidebar-card.highlight a:hover,
.sidebar-card.highlight a:focus {
color: #ffffff;
}
/* ---- Related links ---- */
.related-links {
padding: 54px 0 64px;
background: #f2f2f2;
}
.related-links h2 {
margin: 0 0 24px;
color: var(--brand-blue-dark);
font-size: clamp(1.65rem, 2.6vw, 2.25rem);
}
.related-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.related-card {
display: block;
padding: 22px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 4px 16px rgba(2,86,164,0.06);
transition: transform .18s ease, border-color .18s ease;
}
.related-card strong {
display: block;
margin-bottom: 8px;
color: var(--brand-blue-dark);
font-size: 1.08rem;
}
.related-card span {
display: block;
color: var(--brand-muted);
}
.related-card:hover,
.related-card:focus {
border-color: var(--brand-blue);
transform: translateY(-2px);
}
/* ---- Existing page promo banner ---- */
.existing-promo-banner {
position: relative;
display: block;
min-height: 230px;
margin: 0 0 28px;
overflow: hidden;
border-radius: var(--radius);
border: 1px solid var(--border);
box-shadow: 0 8px 22px rgba(2,86,164,0.08);
background: var(--brand-blue);
}
.existing-promo-banner img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: .62;
}
.existing-promo-banner::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(2,86,164,.92), rgba(2,86,164,.40));
}
.existing-promo-content {
position: relative;
z-index: 2;
min-height: 230px;
max-width: 620px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 8px;
padding: 32px;
color: #ffffff;
}
.existing-promo-content .promo-kicker {
font-size: .82rem;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.existing-promo-content strong {
display: block;
font-size: clamp(2rem, 4vw, 3.4rem);
line-height: .95;
letter-spacing: -.04em;
}
.existing-promo-content span:last-child {
max-width: 520px;
font-size: 1.08rem;
color: rgba(255,255,255,.92);
}
/* ---- Graphic banner variant ---- */
.existing-promo-banner.graphic-banner {
min-height: 0;
display: block;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
overflow: hidden;
border-radius: var(--radius);
}
.existing-promo-banner.graphic-banner img {
position: static;
display: block;
width: 100%;
height: auto;
opacity: 1;
object-fit: contain;
}
.existing-promo-banner.graphic-banner::after {
display: none;
}
.existing-promo-banner.graphic-banner:hover,
.existing-promo-banner.graphic-banner:focus {
outline: 3px solid var(--brand-blue);
outline-offset: 3px;
}
/* ---- Existing card grid ---- */
.existing-card-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px;
}
.existing-link-card {
display: block;
padding: 24px;
min-height: 170px;
background: #ffffff;
border: 1px solid var(--border);
border-left: 6px solid var(--brand-blue);
border-radius: var(--radius);
box-shadow: 0 4px 16px rgba(2,86,164,0.06);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.existing-link-card:hover,
.existing-link-card:focus {
transform: translateY(-2px);
border-color: var(--brand-blue);
box-shadow: 0 10px 24px rgba(2,86,164,0.12);
}
.existing-link-card h2 {
margin: 0 0 10px;
color: var(--brand-blue-dark);
font-size: 1.28rem;
line-height: 1.18;
}
.existing-link-card p {
margin: 0;
color: var(--brand-muted);
}
/* ---- Full width layout variants ---- */
.prc-full-width-layout {
display: block !important;
}
.prc-full-width-layout .content-main {
max-width: none;
width: 100%;
}
.parks-full-width .existing-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* ---- Existing page comparison button ---- */
.existing-page-link {
margin-top: 10px;
}
.existing-page-link .button,
.existing-page-link .btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 13px 18px;
background: var(--brand-blue);
color: #ffffff !important;
border-radius: calc(var(--radius) - 2px);
font-weight: 900;
text-decoration: none;
}
.existing-page-link .button:hover,
.existing-page-link .button:focus,
.existing-page-link .btn:hover,
.existing-page-link .btn:focus {
background: var(--brand-blue-dark);
text-decoration: underline;
text-underline-offset: 4px;
}
/* ---- High contrast overrides for sub-landing components ---- */
body.high-contrast .interior-hero,
body.high-contrast .content-shell,
body.high-contrast .intro-card,
body.high-contrast .contact-card,
body.high-contrast .principle-card,
body.high-contrast .service-card,
body.high-contrast .prc-mini-card,
body.high-contrast .strategy-panel,
body.high-contrast .sidebar-card,
body.high-contrast .related-card,
body.high-contrast .existing-link-card {
background: #ffffff !important;
color: #000000 !important;
border-color: #000000 !important;
box-shadow: none !important;
}
body.high-contrast .related-links {
background: #f2f2f2 !important;
}
body.high-contrast .sidebar-card.highlight,
body.high-contrast .action-panel {
background: #001f3f !important;
color: #ffffff !important;
}
body.high-contrast .sidebar-card.highlight *,
body.high-contrast .action-panel * {
color: #ffffff !important;
}
body.high-contrast .existing-promo-banner,
body.high-contrast .existing-link-card {
border-color: #000000 !important;
box-shadow: none !important;
}
body.high-contrast .existing-promo-banner::after {
background: #001f3f !important;
}
body.high-contrast .existing-promo-banner *,
body.high-contrast .sidebar-card.highlight * {
color: #ffffff !important;
}
/* ---- Text size overrides for sub-landing components ---- */
body.text-large .interior-hero p,
body.text-large .intro-card p,
body.text-large .service-card p,
body.text-large .prc-mini-card span,
body.text-large .content-section p,
body.text-large .content-section li,
body.text-large .sidebar-card p,
body.text-large .related-card span,
body.text-large .existing-link-card p {
font-size: 1.1rem !important;
}
body.text-xlarge .interior-hero p,
body.text-xlarge .intro-card p,
body.text-xlarge .service-card p,
body.text-xlarge .prc-mini-card span,
body.text-xlarge .content-section p,
body.text-xlarge .content-section li,
body.text-xlarge .sidebar-card p,
body.text-xlarge .related-card span,
body.text-xlarge .existing-link-card p {
font-size: 1.22rem !important;
}
body.text-xlarge .interior-hero h1,
body.text-xlarge .page-hero h1,
body.text-xlarge .event-hero h1,
body.text-xlarge .calendar-hero h1 {
font-size: clamp(2.15rem,3.7vw,3.35rem) !important;
}
body.text-xlarge.homepage .hero .hero-content h1 {
font-size: clamp(3.6rem, 6vw, 6rem) !important;
}
/* Top-link card: grow min-height to fit larger icon + text without changing column layout */
body.text-large .top-link-card {
min-height: 195px !important;
}
body.text-xlarge .top-link-card {
min-height: 215px !important;
}
body.text-xlarge .engagement-copy h2,
body.text-xlarge .enews-content h2,
body.text-xlarge .content-section h2,
body.text-xlarge .community-event-cta h2,
body.text-xlarge .event-content-section h2 {
font-size: clamp(2.1rem, 4vw, 3.2rem) !important;
}
body.text-xlarge .migrated-body-section h2 {
font-size: clamp(1.5rem, 3vw, 2.2rem) !important;
}
/* ---- Responsive overrides for sub-landing ---- */
@media(max-width:980px) {
.content-layout,
.prc-feature {
grid-template-columns: 1fr;
}
.sidebar {
position: static;
}
.contact-card-grid,
.related-grid {
grid-template-columns: 1fr;
}
.service-principles {
grid-template-columns: 1fr;
}
.parks-full-width .existing-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media(max-width:760px) {
.service-card-grid {
grid-template-columns: 1fr;
}
.action-panel {
grid-template-columns: 1fr;
}
.action-button {
width: 100%;
}
.existing-promo-content {
min-height: 220px;
padding: 24px;
}
}
@media(max-width:680px) {
.existing-card-grid {
grid-template-columns: 1fr;
}
}
@media(max-width:680px) {
.parks-full-width .existing-card-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
TYPICAL PAGE COMPONENTS
============================================================ */
/* --- Typical page layout --- */
.typical-content-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:42px;
align-items:start;
}
.typical-sidebar{
position:sticky;
top:120px;
display:grid;
gap:20px;
align-self:start;
}
@media(max-width:980px){
.typical-content-layout{grid-template-columns:1fr}
.typical-sidebar{position:static}
}
/* --- Sidebar cards --- */
.sidebar-card{
padding:24px;
background:#ffffff;
border:1px solid var(--border);
border-radius:var(--radius);
box-shadow:0 6px 18px rgba(2,86,164,0.08);
}
.sidebar-card.highlight{
background:var(--brand-blue);
color:#ffffff;
border-color:var(--brand-blue);
}
.sidebar-card h2{margin:0 0 10px;color:var(--brand-blue-dark);font-size:1.25rem;font-weight:600!important}
.sidebar-card.highlight h2,.sidebar-card.highlight p,.sidebar-card.highlight a{color:#ffffff}
.sidebar-card p{margin:0 0 14px;color:var(--brand-muted)}
.sidebar-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sidebar-card a{color:var(--brand-blue);}
.sidebar-card a:hover,.sidebar-card a:focus{color:var(--brand-blue-dark);text-decoration:underline;text-underline-offset:3px}
.sidebar-card.highlight a:hover,.sidebar-card.highlight a:focus{color:#ffffff}
body.high-contrast .sidebar-card{background:#ffffff!important;color:#000000!important;border-color:#000000!important;box-shadow:none!important}
body.high-contrast .sidebar-card.highlight{background:#001f3f!important;color:#ffffff!important}
body.high-contrast .sidebar-card.highlight *{color:#ffffff!important}
/* --- Schedule browser widget --- */
.sched-widget{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:260px 1fr}
.sched-filters{border-right:1px solid var(--border);background:#fff;height:580px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c8d6e4 transparent}
.sched-filters::-webkit-scrollbar{width:4px}.sched-filters::-webkit-scrollbar-thumb{background:#c8d6e4;border-radius:4px}
.sched-activities{padding:20px 22px;background:#f7f9fc;height:580px;overflow-y:auto}
@media(max-width:900px){.sched-widget{grid-template-columns:220px 1fr}}
@media(max-width:700px){
.sched-widget{grid-template-columns:1fr}
.sched-filters{border-right:none;border-bottom:1px solid var(--border);height:auto;max-height:320px}
.sched-activities{height:auto;min-height:300px}
}
/* day-toggle pill buttons */
.sched-day{display:inline-flex;align-items:center;justify-content:center;min-width:38px;height:38px;padding:0 8px;border-radius:50px;border:1.5px solid var(--border);background:#fff;color:var(--brand-text);font-family:inherit;font-size:.78rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.sched-day:hover{border-color:var(--brand-blue);color:var(--brand-blue)}
.sched-day.on{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
/* --- Accordion (DS: .acc-wrap / .acc / .acc-hdr / .acc-ico / .acc-body) --- */
.accordion,.acc-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.accordion-item,.acc{border-bottom:1px solid var(--border)}
.accordion-item:last-child,.acc:last-child{border-bottom:none !important}
.accordion-trigger,.acc-hdr{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border:0;background:#fff;color:#000;text-align:left;font-family:inherit;font-size:1rem;font-weight:700!important;cursor:pointer;transition:background .15s,color .15s}
.accordion-trigger span, .acc-hdr span {font-weight:700!important; font-family:inherit;}
.accordion-trigger:hover,.accordion-trigger:focus,.acc-hdr:hover,.acc-hdr:focus{background:#f5f7fa;color:#000}
.acc-hdr:focus {
outline: none;
}
.acc-hdr:focus-visible {
outline: 2px solid var(--brand-blue);
outline-offset: -2px;
}
.accordion-item.open .accordion-trigger,.acc.open > .acc-hdr,.accordion-trigger[aria-expanded="true"],.acc-hdr[aria-expanded="true"]{background:#edf2f8;color:var(--brand-blue)}
/* + / − icon */
.accordion-trigger::after, .acc-hdr::after {
content: '+';
display: inline-block;
font-size: 22px;
font-weight: 400;
line-height: 1;
flex-shrink: 0;
color: var(--brand-blue);
min-width: 20px;
text-align: center;
}
.accordion-item.open .accordion-trigger::after, .acc.open > .acc-hdr::after, .accordion-trigger[aria-expanded="true"]::after, .acc-hdr[aria-expanded="true"]::after {
content: '\2212';
}
/* Hide old explicit icons */
.accordion-trigger svg, .acc-hdr svg, .acc-ico {
display: none !important;
}
/* Body */
.accordion-panel,.acc-body{display:none;padding:16px 18px 20px;font-size:1rem;color:var(--brand-text);border-top:1px solid var(--border);line-height:1.7;background:#fff}
.accordion-panel.open,.acc-body.open,.accordion-trigger[aria-expanded="true"] + .accordion-panel,.acc-hdr[aria-expanded="true"] + .acc-body{display:block}
.accordion-panel h3,.acc-body h3{margin:22px 0 8px;color:var(--brand-blue-dark);font-size:1.05rem;font-weight:600!important}
.accordion-panel p,.acc-body p{margin:0 0 14px;color:var(--brand-text);font-weight:400!important}
.accordion-panel a,.acc-body a{color:var(--brand-blue);text-decoration:underline;text-underline-offset:3px}
.accordion-panel a:hover,.accordion-panel a:focus,.acc-body a:hover,.acc-body a:focus{color:var(--brand-blue-dark)}
.accordion-panel a.btn,.acc-body a.btn{text-decoration:none!important;font-weight:600!important}
.accordion-panel a.btn:hover,.accordion-panel a.btn:focus,.acc-body a.btn:hover,.acc-body a.btn:focus{text-decoration:underline!important;color:#fff!important}
/* Remove redundant top borders on content sections immediately following accordions */
.acc-wrap + .content-section,
.acc-wrap + .migrated-body-section,
.acc-wrap + .event-content-section {
border-top: none !important;
}
body.high-contrast .accordion,body.high-contrast .acc-wrap{border-color:#000!important}
body.high-contrast .accordion-item,body.high-contrast .accordion-trigger,body.high-contrast .accordion-panel,body.high-contrast .acc,body.high-contrast .acc-hdr,body.high-contrast .acc-body{background:#fff!important;color:#000!important;border-color:#000!important;box-shadow:none!important}
body.high-contrast .acc-hdr:focus {
outline: none !important;
}
body.high-contrast .acc-hdr:focus-visible {
outline: 3px solid #000000 !important;
outline-offset: -2px;
}
/* --- FOI-specific layout --- */
.foi-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 320px;
gap:42px;
align-items:start;
}
.foi-content{max-width:none;margin:0}
.foi-sidebar{
position:sticky;
top:120px;
display:grid;
gap:20px;
align-self:start;
}
@media(max-width:980px){
.foi-layout{grid-template-columns:1fr}
.foi-sidebar{position:static}
}
/* --- FOI / page banner --- */
.page-banner.foi-banner{
height:320px;
background:url('https://www.caledon.ca/en/rotatingimages/navTab03/banner-townhall.jpg') center/cover no-repeat;
border-bottom:1px solid var(--border);
}
body.high-contrast .page-banner.foi-banner{border-bottom:2px solid #000000}
.foi-content-shell{padding:28px 0 72px;background:var(--surface)}
body.high-contrast .interior-hero,body.high-contrast .foi-content-shell{background:#fff!important;color:#000!important;border-color:#000!important;box-shadow:none!important}
@media(max-width:760px){
.page-banner.foi-banner{height:220px}
.interior-hero{padding:26px 0 28px!important}
.foi-content-shell{padding-top:18px!important}
}
/* --- Migrated content sections --- */
.migrated-intro{margin:0 0 28px}
.migrated-intro p{margin:0 0 16px;color:var(--brand-text);font-weight:400!important}
.migrated-intro a{color:var(--brand-blue);text-decoration:underline;text-underline-offset:3px}
.migrated-intro a:hover,.migrated-intro a:focus{color:var(--brand-blue-dark)}
.migrated-accordion{margin-bottom:32px}
.migrated-body-section{padding:30px 0;border-top:1px solid var(--border)}
.migrated-body-section h2{margin:0 0 14px;color:var(--brand-blue-dark);font-size:clamp(1.45rem,2.2vw,1.9rem);line-height:1.15;font-weight:600!important}
.migrated-body-section h3{margin:22px 0 8px;color:var(--brand-blue-dark);font-size:1.1rem;line-height:1.2;font-weight:600!important}
.migrated-body-section p{margin:0 0 14px;color:var(--brand-text);font-weight:400!important}
.migrated-body-section a{color:var(--brand-blue);text-decoration:underline;text-underline-offset:3px;font-weight:400!important}
.migrated-body-section a:hover,.migrated-body-section a:focus{color:var(--brand-blue-dark)}
.migrated-body-section a.btn,.migrated-intro a.btn{text-decoration:none!important;font-weight:600!important}
.migrated-body-section a.btn:hover,.migrated-body-section a.btn:focus,.migrated-intro a.btn:hover,.migrated-intro a.btn:focus{text-decoration:underline!important;color:#fff!important}
.migrated-divider{border:0;border-top:1px solid var(--border);margin:0}
body.high-contrast .migrated-body-section{border-color:#000000!important}
/* ---- DS: Data table (.tbl-wrap) ---- */
.tbl-wrap{border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;box-shadow:0 4px 12px rgba(2,86,164,.04)}
.tbl-wrap table{width:100%;border-collapse:separate;border-spacing:0;font-size:.94rem;min-width:600px}
.tbl-wrap thead tr{background:var(--brand-blue-dark)}
.tbl-wrap thead th{text-align:left;padding:16px 18px;font-size:.94rem;font-weight:700;color:#fff;border-bottom:1px solid var(--border)}
.tbl-wrap thead th:first-child{border-top-left-radius:calc(var(--radius) - 1px)}
.tbl-wrap thead th:last-child{border-top-right-radius:calc(var(--radius) - 1px)}
.tbl-wrap tbody td{padding:16px 18px;border-bottom:1px solid var(--border);color:var(--brand-text)}
.tbl-wrap tbody tr:nth-child(odd){background:#fff}
.tbl-wrap tbody tr:nth-child(even){background:var(--brand-light)}
.tbl-wrap tbody tr:last-child td{border-bottom:none}
.tbl-wrap tbody tr:last-child td:first-child{border-bottom-left-radius:calc(var(--radius) - 1px)}
.tbl-wrap tbody tr:last-child td:last-child{border-bottom-right-radius:calc(var(--radius) - 1px)}
body.high-contrast .tbl-wrap thead tr{background:#000!important}
body.high-contrast .tbl-wrap{border-color:#000!important}
body.high-contrast .tbl-wrap tbody td{border-color:#000!important}
/* --- Mail block --- */
.mail-block{padding:20px;margin:12px 0 18px;background:#f2f2f2;border:1px solid var(--border);border-radius:var(--radius);font-weight:400!important}
/* --- CCTV map image --- */
.cctv-map-image{display:block;width:100%;height:auto;margin-top:14px;border:1px solid var(--border);border-radius:var(--radius)}
body.high-contrast .cctv-map-image{border-color:#000000!important}
/* --- FOI sidebar card specifics --- */
.foi-sidebar .sidebar-card{padding:24px;background:#ffffff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 18px rgba(2,86,164,0.08)}
.foi-sidebar .sidebar-card h2{margin:0 0 10px;color:var(--brand-blue-dark);font-size:1.25rem;font-weight:600!important}
.foi-sidebar .sidebar-card p{margin:0;color:var(--brand-muted);font-weight:400!important}
.foi-sidebar .sidebar-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foi-sidebar .sidebar-card a{color:var(--brand-blue);font-weight:400!important;text-decoration:underline;text-underline-offset:3px}
.foi-sidebar .sidebar-card a:hover,.foi-sidebar .sidebar-card a:focus{color:var(--brand-blue-dark)}
body.high-contrast .foi-sidebar .sidebar-card{background:#ffffff!important;color:#000000!important;border-color:#000000!important;box-shadow:none!important}
/* --- Related sidebar card --- */
.related-sidebar-card{padding:22px}
.related-sidebar-list{display:grid!important;gap:0!important}
.related-sidebar-list li{border-top:1px solid var(--border)}
.related-sidebar-list li:first-child{border-top:0}
.related-sidebar-list a{
display:inline-block!important;
padding:12px 0;
color:var(--brand-blue)!important;
text-decoration:underline!important;
text-underline-offset:3px;
transform:translateX(0)!important;
transition:transform .18s ease,color .18s ease!important;
}
.related-sidebar-list a::before{display:none!important;content:none!important}
.related-sidebar-list a:hover,.related-sidebar-list a:focus,.related-sidebar-list a:focus-visible{
transform:translateX(2px)!important;
color:var(--brand-blue-dark)!important;
}
/* --- Page feedback card --- */
.page-feedback-card{padding:24px;background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 18px rgba(2,86,164,.08)}
.page-feedback-card h2{margin:0 0 8px;color:var(--brand-blue-dark);font-size:1.25rem;line-height:1.2;font-weight:600!important}
.page-feedback-card p{margin:0 0 14px;color:var(--brand-muted)}
.page-feedback-card fieldset{margin:0 0 14px;padding:0;border:0}
.feedback-label{display:block;margin:0 0 6px;color:var(--brand-text);font-size:.92rem;font-weight:600!important}
.feedback-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px;margin:8px 0 14px}
.feedback-rating input{position:absolute;opacity:0;pointer-events:none}
.feedback-rating label{display:inline-grid;place-items:center;width:34px;height:34px;color:var(--brand-muted);font-size:1.55rem;line-height:1;cursor:pointer;border-radius:6px}
.feedback-rating label:hover,.feedback-rating label:hover ~ label,.feedback-rating input:checked ~ label{color:var(--brand-highlight-green)}
.feedback-rating input:focus + label{outline:3px solid var(--brand-highlight-green);outline-offset:2px}
.page-feedback-card textarea{width:100%;min-height:92px;resize:vertical;padding:11px 12px;border:1px solid var(--border);border-radius:calc(var(--radius) - 2px);color:var(--brand-text);background:#fff;font:inherit}
.feedback-submit{width:100%;min-height:44px;border:0;border-radius:calc(var(--radius) - 2px);background:var(--brand-blue);color:#fff;font:inherit;font-weight:600!important;cursor:pointer}
.feedback-submit:hover,.feedback-submit:focus{background:var(--brand-blue-dark);text-decoration:underline;text-underline-offset:3px}
.feedback-note{margin:12px 0 0!important;color:var(--brand-muted)!important;font-size:.86rem!important}
.feedback-submit:focus,
.feedback-submit:focus-visible {
background: var(--brand-blue-dark);
text-decoration: underline;
text-underline-offset: 3px;
outline: 3px solid var(--brand-blue);
outline-offset: 2px;
}
body.high-contrast .page-feedback-card,body.high-contrast .page-feedback-card textarea{background:#fff!important;color:#000!important;border-color:#000!important;box-shadow:none!important}
body.high-contrast .feedback-submit{background:#001f3f!important;color:#fff!important}
body.high-contrast .feedback-submit:focus,
body.high-contrast .feedback-submit:focus-visible {
outline: 3px solid #000000 !important;
outline-offset: 2px !important;
}
body.high-contrast .feedback-rating label {
color: #707070 !important;
}
body.high-contrast .feedback-rating label:hover,
body.high-contrast .feedback-rating label:hover ~ label,
body.high-contrast .feedback-rating input:checked ~ label {
color: var(--brand-highlight-green) !important;
}
/* --- Page support banner (full-width strip above footer) --- */
.page-support-banner{
padding:0;
background:#eaf3fb;
border-top:1px solid #d6e6f4;
}
.page-support-banner .container{
padding-top:48px;
padding-bottom:48px;
}
.page-support-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:72px;
align-items:start;
}
.page-support-card{
display:grid;
grid-template-columns:54px minmax(0,1fr);
column-gap:24px;
row-gap:0;
align-items:start;
padding:0;
margin:0;
background:transparent;
border:0;
border-radius:0;
box-shadow:none;
text-align:left;
min-height:0;
}
.page-support-card::before{display:none}
.page-support-icon{
grid-column:1;
grid-row:1 / span 2;
width:44px;
height:44px;
margin:0;
padding:0;
display:flex;
align-items:flex-start;
justify-content:center;
background:transparent;
color:var(--brand-blue);
border:0;
border-radius:0;
}
.page-support-icon svg{
width:40px;
height:40px;
fill:none;
stroke:currentColor;
stroke-width:1.9;
stroke-linecap:round;
stroke-linejoin:round;
}
.page-support-card h3{
grid-column:2;
grid-row:1;
margin:0 0 12px;
padding:0;
color:#2b2f33;
font-size:1.45rem;
line-height:1.15;
font-weight:600!important;
}
.page-support-card p{
grid-column:2;
grid-row:2;
margin:0;
padding:0;
color:#2b2f33;
font-weight:400!important;
max-width:360px;
}
.page-support-card a,.page-support-card p strong{
display:inline;
color:var(--brand-blue);
font-weight:600!important;
text-decoration:none;
}
.page-support-card a:hover,.page-support-card a:focus{color:var(--brand-blue-dark);text-decoration:underline;text-underline-offset:3px}
body.high-contrast .page-support-banner{background:#ffffff!important;border-color:#000000!important}
body.high-contrast .page-support-card,body.high-contrast .page-support-card h3,body.high-contrast .page-support-card p{color:#000000!important}
body.high-contrast .page-support-icon,body.high-contrast .page-support-card a,body.high-contrast .page-support-card p strong{color:#003b78!important}
@media(max-width:980px){
.page-support-grid{grid-template-columns:1fr;gap:32px}
.page-support-card{grid-template-columns:48px minmax(0,1fr);column-gap:18px}
.page-support-card p{max-width:none}
}
@media(max-width:520px){
.page-support-banner .container{padding-top:38px;padding-bottom:40px}
.page-support-card{grid-template-columns:44px minmax(0,1fr);column-gap:14px}
.page-support-icon svg{width:34px;height:34px}
.page-support-card h3{font-size:1.28rem}
}
/* =========================================
NOTIFICATION TICKER
========================================= */
.notif-ticker, .toc-bnr {
transition: background .4s;
position: relative;
z-index: 98;
}
.notif-ticker[data-type="notice"], .toc-bnr[data-type="notice"] {background:#004b87}
.notif-ticker[data-type="emergency"], .toc-bnr[data-type="emergency"] {background:#a81010}
.notif-ticker[data-type="warning"], .toc-bnr[data-type="warning"] {background:#a14d00}
.notif-ticker[data-type="resolved"], .toc-bnr[data-type="resolved"] {background:#1a6b3c}
.notif-ticker-inner{display:flex;align-items:center;gap:16px;padding:11px 0;min-height:46px}
/* Badge — outlined pill */
.notif-badge, .toc-bnr-tag{flex-shrink:0;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:4px 13px;border-radius:20px;border:2px solid rgba(255,255,255,.75);color:#fff;line-height:1.4}
.notif-ticker[data-type="warning"] .notif-badge, .toc-bnr[data-type="warning"] .toc-bnr-tag{border-color:rgba(255,255,255,.75);color:#fff}
.notif-marquee, .toc-bnr-msg{flex:1;overflow:hidden;position:relative}
.notif-marquee-track{display:inline-flex;white-space:nowrap;transition:opacity .28s}
.notif-marquee-track.fading{opacity:0}
.notif-marquee-item{display:inline-flex;align-items:center;gap:7px;padding-right:60px}
.notif-mtext{font-size:.9rem;font-weight:600;color:#fff;line-height:1.4}
.notif-ticker[data-type="warning"] .notif-mtext, .toc-bnr[data-type="warning"] .notif-mtext{color:#fff}
.notif-link{font-size:.9rem;font-weight:600;color:#fff;text-decoration:underline;line-height:1.4}
.notif-ticker[data-type="warning"] .notif-link, .toc-bnr[data-type="warning"] .notif-link{color:#fff !important}
.notif-link:hover,.notif-link:focus{background:transparent!important;outline:2px solid currentColor;}
/* Prev / Next nav arrows */
.notif-nav-btn, .toc-bnr-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);background:transparent;cursor:pointer;color:#fff;padding:0;transition:background .2s,border-color .2s}
.notif-nav-btn:hover,.notif-nav-btn:focus,.toc-bnr-btn:hover,.toc-bnr-btn:focus{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.9);outline:none}
.notif-nav-btn svg,.toc-bnr-btn svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;fill:none}
.notif-ticker[data-type="warning"] .notif-nav-btn, .toc-bnr[data-type="warning"] .toc-bnr-btn{border-color:rgba(255,255,255,.5);color:#fff}
.notif-ticker[data-type="warning"] .notif-nav-btn:hover,.notif-ticker[data-type="warning"] .notif-nav-btn:focus,.toc-bnr[data-type="warning"] .toc-bnr-btn:hover,.toc-bnr[data-type="warning"] .toc-bnr-btn:focus{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.9)}
@media(max-width:700px){
.notif-message{justify-content:flex-start}
#notifText,.notif-link{font-size:.82rem}
/* Mobile: two-row layout */
.notif-ticker-inner{flex-wrap:wrap;gap:8px;padding:9px 0}
.notif-badge, .toc-bnr-tag{order:1;font-size:.68rem;padding:3px 10px}
#notifPrevBtn{order:2;margin-left:auto;width:22px;height:22px}
#notifNextBtn{order:3;width:22px;height:22px}
.notif-nav-btn svg, .toc-bnr-btn svg{width:11px;height:11px}
.notif-marquee, .toc-bnr-msg{order:4;flex:0 0 100%;margin-top:2px}
}
@media(min-width:701px){
.notif-ticker-inner{flex-wrap:nowrap}
}
/* Preserve notification ticker original colors in high-contrast mode */
body.high-contrast .notif-ticker .notif-mtext,
body.high-contrast .toc-bnr .notif-mtext,
body.high-contrast .notif-ticker .notif-badge,
body.high-contrast .toc-bnr .toc-bnr-tag,
body.high-contrast .notif-ticker .notif-nav-btn,
body.high-contrast .toc-bnr .toc-bnr-btn,
body.high-contrast .notif-ticker .notif-marquee-item a.notif-link:not(.button):not(.section-link):not(.social-link),
body.high-contrast .toc-bnr a.notif-link:not(.button):not(.section-link):not(.social-link) {
color: #ffffff !important;
}
body.high-contrast .notif-ticker[data-type="warning"] .notif-mtext,
body.high-contrast .toc-bnr[data-type="warning"] .notif-mtext,
body.high-contrast .notif-ticker[data-type="warning"] .notif-badge,
body.high-contrast .toc-bnr[data-type="warning"] .toc-bnr-tag,
body.high-contrast .notif-ticker[data-type="warning"] .notif-nav-btn,
body.high-contrast .toc-bnr[data-type="warning"] .toc-bnr-btn,
body.high-contrast .notif-ticker[data-type="warning"] .notif-marquee-item a.notif-link:not(.button):not(.section-link):not(.social-link),
body.high-contrast .toc-bnr[data-type="warning"] a.notif-link:not(.button):not(.section-link):not(.social-link) {
color: #ffffff !important;
}
body.high-contrast .notif-ticker .notif-nav-btn:focus,
body.high-contrast .toc-bnr .toc-bnr-btn:focus {
outline: none !important;
}
/* ====================================
MOBILE DRAWER — Quick Access
==================================== */
/* Hide drawer-only elements on desktop */
@media(min-width:1100px){
.drawer-quick-access{
display:none !important;
}
}
@media(max-width:1099px){
/* Hide utility bar from header on mobile */
.utility-bar{
display:none !important;
}
/* Fix last nav-item + alignment (overrides desktop padding-right:14px) */
.nav-wrap .nav-item:last-child .nav-link{
padding-right:18px !important;
}
/* Quick Access section wrapper — divider separates from main nav */
.drawer-quick-access{
padding-bottom:0;
border-top:1px solid rgba(2,86,164,.15);
}
/* Hide "QUICK ACCESS" label */
.drawer-qa-label{
display:none;
}
/* Each expandable item */
.drawer-qa-item{
border-bottom:1px solid rgba(2,86,164,.12);
}
/* Trigger row */
.drawer-qa-trigger{
display:flex;
align-items:center;
gap:14px;
width:100%;
padding:16px 18px;
background:transparent;
border:0;
color:var(--brand-blue);
font:inherit;
font-size:1rem;
font-weight:700 !important;
text-align:left;
cursor:pointer;
text-transform:uppercase !important;
letter-spacing:.045em !important;
}
.drawer-qa-trigger:hover,
.drawer-qa-trigger:focus{
background:rgba(2,86,164,.07);
outline:none;
}
.drawer-qa-item.open .drawer-qa-trigger{
background:var(--brand-blue);
color:#fff;
}
.drawer-qa-item.open .drawer-qa-icon{
background:#fff;
}
.drawer-qa-item.open .drawer-qa-icon svg{
stroke:var(--brand-blue);
}
.drawer-qa-item.open .drawer-qa-plus{
color:#fff;
}
.drawer-qa-item.open{
border-bottom:1px solid rgba(2,86,164,.12);
}
/* Icon circle — blue bg, white icon */
.drawer-qa-icon{
display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
border-radius:50%;
background:var(--brand-blue);
flex-shrink:0;
}
.drawer-qa-icon svg{
width:20px;
height:20px;
fill:none;
stroke:#ffffff;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
display:block;
}
.drawer-qa-text{
flex:1;
}
.drawer-qa-plus{
font-size:1.4rem;
font-weight:600;
line-height:1;
color:var(--brand-blue);
min-width:20px;
text-align:center;
display:inline-block;
}
/* Expanded panel — white desktop-style */
.drawer-qa-panel{
display:none;
background:#ffffff;
padding:22px 18px 24px;
color:var(--brand-text);
}
.drawer-qa-item.open .drawer-qa-panel{
display:block;
}
/* Panel headings */
.drawer-qa-panel h3{
margin:0 0 12px;
color:#111;
font-size:1.05rem;
font-weight:600 !important;
}
/* Accessibility options inside panel */
.drawer-qa-panel .accessibility-options{
display:flex !important;
gap:14px !important;
margin-bottom:24px !important;
flex-wrap:wrap !important;
}
.drawer-qa-panel .accessibility-options button{
display:inline-flex !important;
align-items:center !important;
gap:5px !important;
border:0 !important;
border-bottom:3px solid transparent !important;
background:transparent !important;
color:var(--brand-blue) !important;
padding:0 0 6px !important;
font:inherit !important;
font-weight:600 !important;
cursor:pointer !important;
}
.drawer-qa-panel .accessibility-options button.active{
border-bottom-color:var(--brand-blue) !important;
}
.drawer-qa-panel .accessibility-message{
margin:0 !important;
color:#39434d !important;
font-size:.95rem !important;
line-height:1.65 !important;
font-weight:400 !important;
}
/* Language grid inside panel */
.drawer-qa-lang-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
}
.drawer-qa-lang-grid a{
display:block;
padding:9px 10px;
color:var(--brand-text) !important;
font-weight:600 !important;
text-decoration:none;
}
.drawer-qa-lang-grid a:hover,
.drawer-qa-lang-grid a:focus{
background:var(--brand-light) !important;
color:var(--brand-blue) !important;
}
/* Site map plain link row */
.drawer-qa-link{
display:flex;
align-items:center;
gap:14px;
padding:16px 18px;
color:var(--brand-blue) !important;
font-size:1rem;
font-weight:700 !important;
text-transform:uppercase;
letter-spacing:.045em;
text-decoration:none;
border-bottom:1px solid rgba(2,86,164,.12);
}
.drawer-qa-link:hover,
.drawer-qa-link:focus{
background:rgba(2,86,164,.07);
color:var(--brand-blue) !important;
}
/* Drawer elevation when any accordion is expanded */
.nav-wrap:has(.nav-item.mobile-open),
.nav-wrap:has(.drawer-qa-item.open){
box-shadow:-10px 0 55px rgba(0,0,0,.4);
}
}
/* =================================================================
TEXT SIZE: X-LARGE (150%) — mobile drawer only on ≤1280px.
Desktop (≥1281px) keeps the full nav with compact sizing.
================================================================= */
/* --- Mobile drawer: only when screen is narrow --- */
@media(max-width:1280px){
body.text-xlarge .mobile-toggle { display: inline-flex !important; }
body.text-xlarge .utility-bar { display: none !important; }
body.text-xlarge .header-actions {
display: flex !important;
align-items: center !important;
margin-left: auto !important;
width: auto !important;
min-width: auto !important;
padding: 0 !important;
gap: 8px !important;
}
/* Drawer — must beat @media(min-width:901px) rules that have !important */
body.text-xlarge .nav-wrap {
position: fixed !important;
top: 0 !important; right: 0 !important; bottom: 0 !important;
height: 100% !important; max-height: 100vh !important;
width: min(86vw, 380px) !important;
transform: translateX(100%) !important;
transition: transform .25s ease !important;
z-index: 100 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch !important;
box-shadow: -10px 0 30px rgba(0,0,0,.18) !important;
background: #fff !important;
display: block !important;
flex: none !important;
margin-left: 0 !important;
}
body.text-xlarge.menu-open .nav-wrap { transform: translateX(0) !important; }
/* Close button — full blue-header styling */
body.text-xlarge .drawer-close-btn {
display: flex !important;
align-items: center; justify-content: space-between;
width: 100%; padding: 16px 18px;
background: var(--brand-blue) !important;
border: 0; border-bottom: 2px solid rgba(255,255,255,.2);
color: #fff !important; font: inherit;
font-size: 1rem; font-weight: 700;
cursor: pointer; letter-spacing: .04em;
text-transform: uppercase; transition: background .15s;
}
body.text-xlarge .drawer-close-btn:hover,
body.text-xlarge .drawer-close-btn:focus { background: #014785 !important; outline: none; }
body.text-xlarge .drawer-close-label { flex: 1; text-align: left; }
body.text-xlarge .drawer-close-x {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 50%;
background: rgba(255,255,255,.15); transition: background .15s;
color: #fff;
}
body.text-xlarge .drawer-close-btn:hover .drawer-close-x,
body.text-xlarge .drawer-close-btn:focus .drawer-close-x { background: rgba(255,255,255,.3); }
body.text-xlarge .drawer-close-x svg { width: 18px; height: 18px; }
/* Main nav — reset transforms that desktop rules inject */
body.text-xlarge .main-nav {
display: block !important; width: 100% !important;
padding: 0 !important; transform: none !important;
justify-content: flex-start !important; gap: 0 !important;
}
body.text-xlarge .nav-item { border-left: 0 !important; border-bottom: 1px solid rgba(2,86,164,.12) !important; position: static !important; box-shadow: none !important; outline: none !important; }
body.text-xlarge .nav-link {
display: flex !important; width: 100% !important;
justify-content: space-between !important; align-items: center !important;
padding: 16px 18px !important; color: var(--brand-blue) !important;
border-radius: 0 !important; white-space: normal !important;
font-size: 1.15rem !important; font-weight: 700 !important;
box-shadow: none !important; outline: none !important;
}
body.text-xlarge .nav-link::after { content: '+' !important; display: inline !important; position: static !important; opacity: 1 !important; background: transparent !important; height: auto !important; pointer-events: auto !important; font-size: 1.4rem !important; font-weight: 600 !important; line-height: 1 !important; margin-left: 18px !important; color: var(--brand-blue) !important; }
body.text-xlarge .nav-item::after { display: none !important; content: none !important; }
body.text-xlarge .nav-item.mobile-open > .nav-link::after { content: '-' !important; }
body.text-xlarge .nav-link:hover,
body.text-xlarge .nav-item:hover > .nav-link,
body.text-xlarge .nav-item.active > .nav-link,
body.text-xlarge .nav-item:focus-within > .nav-link,
body.text-xlarge .nav-link:focus { background: rgba(2,86,164,.07) !important; color: var(--brand-blue) !important; box-shadow: none !important; outline: none !important; }
body.text-xlarge .nav-item:hover .mega,
body.text-xlarge .nav-item:focus-within .mega { display: none !important; }
body.text-xlarge .nav-item.mobile-open .mega { display: block !important; }
body.text-xlarge .mega { position: static !important; padding: 0 0 12px !important; }
body.text-xlarge .mega::before { display: none !important; }
body.text-xlarge .mega-inner::before { display: none !important; }
body.text-xlarge .mega-inner { width: 100% !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; background: var(--surface) !important; overflow-y: visible !important; max-height: none !important; transform: none !important; backdrop-filter: none !important; }
body.text-xlarge .mega-header { display: none !important; }
body.text-xlarge .mega-grid { grid-template-columns: 1fr !important; gap: 0 !important; padding: 0 !important; }
body.text-xlarge .column { padding: 14px 18px !important; border-bottom: 1px solid rgba(2,86,164,.1) !important; }
body.text-xlarge .column:last-child { border-bottom: 0 !important; }
body.text-xlarge .section-link {
color: rgba(2,86,164,.6) !important; font-size: 0.78rem !important; font-weight: 700 !important;
letter-spacing: .08em !important; text-transform: uppercase !important;
border-bottom: 1px solid rgba(2,86,164,.15) !important; margin-bottom: 10px !important; padding-bottom: 8px !important;
}
body.text-xlarge .section-link:hover,
body.text-xlarge .section-link:focus { color: var(--brand-blue) !important; }
body.text-xlarge .sub-links li { margin-bottom: 0; }
body.text-xlarge .sub-links a {
color: rgba(2,86,164,.8) !important; font-size: 0.95rem !important;
font-weight: 500 !important; display: block !important; padding: 7px 0 !important;
transition: color .15s; transform: none !important;
}
body.text-xlarge .sub-links a:hover,
body.text-xlarge .sub-links a:focus {
color: var(--brand-blue) !important; text-decoration: underline;
text-underline-offset: 3px; text-decoration-thickness: 2px;
}
body.text-xlarge .mega-support-cta {
display: none !important;
}
body.text-xlarge .mega-support-copy strong { color: var(--brand-blue) !important; }
body.text-xlarge .mega-support-copy span { color: rgba(2,86,164,.7) !important; }
body.text-xlarge .mega-support-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.text-xlarge .mega-support-primary { background: var(--brand-blue) !important; color: #fff !important; padding: 8px 16px; border-radius: 100px; font-weight: 700; }
body.text-xlarge .mega-support-secondary { color: var(--brand-blue) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Quick Access — override the min-width:901px hide rule */
body.text-xlarge .drawer-quick-access { display: block !important; border-top: 1px solid rgba(2,86,164,.15); padding-bottom: 0; }
body.text-xlarge .drawer-qa-label { display: none !important; }
body.text-xlarge .drawer-qa-item { border-bottom: 1px solid rgba(2,86,164,.12) !important; }
body.text-xlarge .drawer-qa-trigger {
display: flex !important; align-items: center !important; gap: 14px !important;
width: 100% !important; padding: 16px 18px !important;
background: transparent !important; border: 0 !important;
color: var(--brand-blue) !important; font: inherit !important;
font-weight: 700 !important;
text-align: left !important; cursor: pointer !important;
text-transform: uppercase !important; letter-spacing: .045em !important;
}
body.text-xlarge .drawer-qa-trigger:hover,
body.text-xlarge .drawer-qa-trigger:focus { background: rgba(2,86,164,.07) !important; outline: none !important; }
body.text-xlarge .drawer-qa-item.open .drawer-qa-trigger { background: var(--brand-blue) !important; color: #fff !important; }
body.text-xlarge .drawer-qa-item.open .drawer-qa-icon { background: #fff !important; }
body.text-xlarge .drawer-qa-item.open .drawer-qa-icon svg { stroke: var(--brand-blue) !important; }
body.text-xlarge .drawer-qa-item.open .drawer-qa-plus { color: #fff !important; }
body.text-xlarge .drawer-qa-icon {
display: inline-flex !important; align-items: center !important; justify-content: center !important;
width: 38px !important; height: 38px !important; border-radius: 50% !important;
background: var(--brand-blue) !important; flex-shrink: 0 !important;
}
body.text-xlarge .drawer-qa-icon svg { width: 20px !important; height: 20px !important; fill: none !important; stroke: #fff !important; stroke-width: 2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; display: block !important; }
body.text-xlarge .drawer-qa-text { flex: 1 !important; }
body.text-xlarge .drawer-qa-plus { font-size: 1.4rem !important; font-weight: 600 !important; line-height: 1 !important; color: var(--brand-blue) !important; min-width: 20px !important; text-align: center !important; display: inline-block !important; }
body.text-xlarge .drawer-qa-panel { display: none !important; background: #fff !important; padding: 22px 18px 24px !important; color: var(--brand-text) !important; }
body.text-xlarge .drawer-qa-item.open .drawer-qa-panel { display: block !important; }
body.text-xlarge .drawer-qa-panel h3 { margin: 0 0 12px !important; color: #111 !important; font-size: 1.05rem !important; font-weight: 600 !important; }
body.text-xlarge .drawer-qa-panel .accessibility-options { display: flex !important; gap: 14px !important; margin-bottom: 24px !important; flex-wrap: wrap !important; }
body.text-xlarge .drawer-qa-panel .accessibility-options button { display: inline-flex !important; align-items: center !important; gap: 5px !important; border: 0 !important; border-bottom: 3px solid transparent !important; background: transparent !important; color: var(--brand-blue) !important; padding: 0 0 6px !important; font: inherit !important; font-weight: 600 !important; cursor: pointer !important; }
body.text-xlarge .drawer-qa-panel .accessibility-options button.active { border-bottom-color: var(--brand-blue) !important; }
body.text-xlarge .drawer-qa-panel .accessibility-message { margin: 0 !important; color: #39434d !important; font-size: .95rem !important; line-height: 1.65 !important; font-weight: 400 !important; }
body.text-xlarge .drawer-qa-lang-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
body.text-xlarge .drawer-qa-lang-grid a { display: block !important; padding: 9px 10px !important; color: var(--brand-text) !important; font-weight: 600 !important; text-decoration: none !important; }
body.text-xlarge .drawer-qa-lang-grid a:hover,
body.text-xlarge .drawer-qa-lang-grid a:focus { background: var(--brand-light) !important; color: var(--brand-blue) !important; }
/* CTA strip */
body.text-xlarge .mobile-menu-support-cta { display: block !important; background: #f2f2f2 !important; border-top: 1px solid rgba(0,0,0,.08) !important; margin: 0 !important; padding: 16px 18px !important; border-radius: 0 !important; }
body.text-xlarge .mobile-menu-support-copy strong { color: var(--brand-blue-dark) !important; display: block !important; margin-bottom: 5px !important; font-weight: 600 !important; }
body.text-xlarge .mobile-menu-support-copy span { color: #555 !important; display: block !important; font-size: .96rem !important; }
body.text-xlarge .mobile-menu-support-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; margin-top: 12px !important; }
body.text-xlarge .mobile-menu-support-primary,
body.text-xlarge .mobile-menu-support-secondary { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 44px !important; padding: 0 16px !important; border-radius: calc(var(--radius) - 2px) !important; font-size: .98rem !important; font-weight: 600 !important; text-decoration: none !important; }
body.text-xlarge .mobile-menu-support-primary { background: var(--brand-blue) !important; color: #fff !important; border: 1px solid var(--brand-blue) !important; }
body.text-xlarge .mobile-menu-support-secondary { background: #fff !important; color: var(--brand-blue) !important; border: 1px solid var(--border) !important; }
}
/* --- Desktop nav at ≥1281px for xlarge (125% root = 20px/rem)
No explicit font-size overrides needed — 1.08rem scales naturally:
Regular 100%=17.3px → Large 110%=19px → X-Large 125%=21.6px */
@media(min-width:1281px){
body.text-xlarge .mobile-toggle { display: none !important; }
body.text-xlarge .drawer-close-btn { display: none !important; }
body.text-xlarge .mobile-backdrop { display: none !important; }
body.text-xlarge .nav-wrap {
position: static !important;
transform: none !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
width: auto !important;
flex: 1 !important;
display: flex !important;
justify-content: flex-end !important;
}
body.text-xlarge .main-nav {
display: flex !important;
align-items: center !important;
width: auto !important;
padding: 0 !important;
}
body.text-xlarge .nav-item {
position: static !important;
border-left: 2px solid var(--border) !important;
border-bottom: 0 !important;
}
body.text-xlarge .nav-item:first-child { border-left: 0 !important; }
body.text-xlarge .nav-link {
display: inline-flex !important;
width: auto !important;
justify-content: flex-start !important;
align-items: center !important;
padding: 14px 10px !important;
color: #000 !important;
white-space: nowrap !important;
border-radius: 0 !important;
}
body.text-xlarge .nav-link::after { content: none !important; display: none !important; }
body.text-xlarge .nav-link:hover,
body.text-xlarge .nav-item:hover > .nav-link,
body.text-xlarge .nav-item:focus-within > .nav-link {
background: transparent !important;
color: var(--brand-blue) !important;
}
body.text-xlarge .nav-item:hover .mega,
body.text-xlarge .nav-item:focus-within .mega,
body.text-xlarge .nav-item.focus-open .mega { display: block !important; }
body.text-xlarge .nav-item.mobile-open .mega { display: none !important; }
body.text-xlarge .mega {
position: absolute !important;
left: 0 !important; right: 0 !important;
top: 100% !important;
padding: 0 0 24px !important;
}
body.text-xlarge .mega::before { display: block !important; }
body.text-xlarge .mega-inner {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
border-top: 0 !important;
border-radius: 0 0 18px 18px !important;
box-shadow: 0 18px 45px rgba(15,45,64,.14) !important;
}
/* Mega-header hidden — matches Regular/Large behaviour */
body.text-xlarge .mega-header { display: none !important; }
body.text-xlarge .mega-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 24px !important; padding: 24px !important; }
body.text-xlarge .column { padding: 0 !important; border-bottom: 0 !important; }
body.text-xlarge .sub-links a { color: #606060 !important; transform: none !important; }
body.text-xlarge .sub-links a:hover,
body.text-xlarge .sub-links a:focus {
color: #0a6ed1 !important; text-decoration: underline !important;
text-underline-offset: 3px !important; font-weight: 600 !important;
}
body.text-xlarge .logo img { width: 180px !important; }
body.text-xlarge .mega-support-cta {
display: none !important; flex-direction: row !important;
align-items: center !important; justify-content: space-between !important;
background: #f2f2f2 !important; border-radius: var(--radius) !important;
margin: 0 24px 24px !important; padding: 18px 20px !important; gap: 20px !important;
}
body.text-xlarge .mega-support-actions { display: flex !important; flex-wrap: nowrap !important; gap: 10px !important; flex-shrink: 0 !important; }
/* Header grows with rem — reduce max-height so mega-inner never clips below viewport */
body.text-xlarge .mega-inner {
max-height: calc(100vh - 200px) !important;
overflow-y: auto !important;
}
}
/* Widen accessibility panel at large text sizes */
body.text-large .accessibility-panel,
body.text-xlarge .accessibility-panel { width: min(380px, calc(100vw - 20px)); }
/* At text-large the header is taller (rem-based) — reduce mega max-height so it
stays fully within the viewport and the "Not finding" bar is always reachable */
@media(min-width:901px) {
body.text-large .mega-inner {
max-height: calc(100vh - 190px) !important;
}
}
/* ============================================================
Text size scaling — font scales via rem (set on ).
Only icon px sizes are overridden here; layout stays identical.
============================================================ */
/* --- text-large: scale icons up proportionally --- */
body.text-large .top-link-icon{width:120px;height:120px}
body.text-large .top-link-icon img,
body.text-large .top-link-icon svg{width:80px;height:80px}
/* --- text-xlarge: scale icons up further --- */
body.text-xlarge .top-link-icon{width:130px;height:130px}
body.text-xlarge .top-link-icon img,
body.text-xlarge .top-link-icon svg{width:88px;height:88px}
/* --- override clamp/vw font sizes so they scale with HTML font-size --- */
body.text-large .simple-list-title,
body.text-large .event-list-title,
body.text-xlarge .simple-list-title,
body.text-xlarge .event-list-title{font-size:1.18rem!important}
body.text-large .simple-list-meta,
body.text-xlarge .simple-list-meta{font-size:1.05rem!important}
body.text-large .list-panel-title h3,
body.text-xlarge .list-panel-title h3{font-size:1.92rem!important}
body.text-large .promo-title,
body.text-xlarge .promo-title{font-size:1rem!important}
/* ============================================================
CROSS-BROWSER COMPATIBILITY FIXES
Addresses Firefox (and other browsers) rendering their own
blue focus rings / borders on inputs, textareas, and buttons.
============================================================ */
/* Rows 31, 32, 33, 35 — replace browser-default blue focus ring on
all inputs and textareas with brand-blue ring */
input:focus,
input:focus-visible,
select:focus,
select:focus-visible,
textarea:focus,
textarea:focus-visible {
outline: 1px solid #000000 !important;
outline-offset: 0;
border-color: var(--brand-blue) !important;
}
body.high-contrast input:focus,
body.high-contrast input:focus-visible,
body.high-contrast select:focus,
body.high-contrast select:focus-visible,
body.high-contrast textarea:focus,
body.high-contrast textarea:focus-visible {
outline: 1px solid #000000 !important;
border-color: #000000 !important;
box-shadow: none !important;
}
/* Row 30 — Accessibility panel buttons: override Firefox default blue ring
when the active (selected) button keeps focus after click */
.accessibility-options button:focus,
.accessibility-options button:focus-visible {
outline: 2px solid var(--brand-blue);
outline-offset: 3px;
border-bottom-color: var(--brand-blue);
}
/* Row 29 — Translation panel links: brand-color focus ring */
.translation-panel a:focus,
.translation-panel a:focus-visible {
outline: 2px solid var(--brand-blue);
outline-offset: -2px;
background: var(--brand-light);
color: var(--brand-blue);
text-decoration: none;
}
/* Active/selected language in translation panel */
.translation-panel a.active {
background: var(--brand-blue);
color: #ffffff !important;
font-weight: 600 !important;
}
.translation-panel a.active:hover,
.translation-panel a.active:focus {
background: var(--brand-blue-dark);
color: #ffffff !important;
}
/* Row 36 — Spacing between feedback textarea and submit button */
.feedback-submit {
margin-top: 12px;
}
/* Row 34 — Custom validation error message for eNews form
Replaces Firefox's native floating validation tooltip which
breaks when parent has overflow:hidden */
.enews-form-error {
display: none;
margin: 0;
color: #c0392b;
font-size: .88rem;
font-weight: 600 !important;
line-height: 1.3;
}
.enews-form-error.visible {
display: block;
}
.enews-form input.input-invalid {
border-color: #c0392b !important;
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12) !important;
}
.enews-form input.input-invalid:focus,
.enews-form input.input-invalid:focus-visible {
outline-color: #c0392b;
border-color: #c0392b !important;
box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15) !important;
}
body.high-contrast .enews-form input.input-invalid {
border-color: #000000 !important;
box-shadow: none !important;
}
body.high-contrast .enews-form-error {
color: #000000 !important;
}
/* ============================================================
UTILITY BAR — Color consistency & cross-browser normalization
============================================================ */
/* Site Map on hover/focus: match the trigger buttons' brand-blue */
.utility-bar .container > a:hover,
.utility-bar .container > a:focus {
color: var(--brand-blue);
text-decoration: underline;
text-underline-offset: 3px;
}
/* Remove Firefox's inner dotted border on all interactive header buttons */
.contact-trigger::-moz-focus-inner,
.translation-trigger::-moz-focus-inner,
.accessibility-trigger::-moz-focus-inner,
.accessibility-options button::-moz-focus-inner,
.feedback-submit::-moz-focus-inner,
.search-toggle::-moz-focus-inner,
.mobile-toggle::-moz-focus-inner,
.header-search-submit::-moz-focus-inner {
border: 0;
padding: 0;
}
/* Normalize UA button appearance in Firefox/Safari */
.contact-trigger,
.translation-trigger,
.accessibility-trigger,
.accessibility-options button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* ============================================================
HIGH-CONTRAST MODE — Complete the utility bar color set
contact-trigger was omitted from the #003b78 rule, leaving it
gray (#222) while Site Map, Translate, Accessibility went dark blue.
============================================================ */
body.high-contrast .contact-trigger {
color: #003b78 !important;
}
body.high-contrast .contact-trigger:hover,
body.high-contrast .contact-trigger:focus,
body.high-contrast .utility-item.open .contact-trigger {
color: #001f3f !important;
text-decoration: underline;
text-underline-offset: 3px;
}
body.high-contrast .utility-bar .container > a {
color: #003b78 !important;
}
body.high-contrast .utility-bar .container > a:hover,
body.high-contrast .utility-bar .container > a:focus {
color: #001f3f !important;
}
/* ============================================================
ACCESSIBILITY PANEL — Clean click-vs-keyboard focus ring
Firefox shows a native outline after a mouse click on a button.
:focus-visible suppresses it for mouse; keyboard still gets a ring.
============================================================ */
/* Mouse click: no outline (active bottom-border is the visual indicator) */
.accessibility-options button:focus:not(:focus-visible) {
outline: none;
}
/* Keyboard focus: intentional 2px brand ring */
.accessibility-options button:focus-visible {
outline: 2px solid var(--brand-blue);
outline-offset: 3px;
border-bottom-color: var(--brand-blue);
}
/* High-contrast keyboard focus */
body.high-contrast .accessibility-options button:focus-visible {
outline: 3px solid #000000 !important;
outline-offset: 2px !important;
}
/* High-contrast mouse click: suppress the 3px black ring from the global rule */
body.high-contrast .accessibility-options button:focus:not(:focus-visible) {
outline: none !important;
}
body.high-contrast .accessibility-options button.active {
border-bottom-color: #000000 !important;
}
/* ============================================================
MOBILE DRAWER — Quick-access panel consistent active states
Mirrors the desktop accessibility panel button active treatment
for buttons rendered inside the mobile drawer (.drawer-qa-panel)
============================================================ */
.drawer-qa-panel .accessibility-options button:focus:not(:focus-visible) {
outline: none;
}
.drawer-qa-panel .accessibility-options button:focus-visible {
outline: 2px solid var(--brand-blue);
outline-offset: 3px;
border-bottom-color: var(--brand-blue);
}
body.high-contrast .drawer-qa-panel .accessibility-options button.active {
border-bottom-color: #000000 !important;
}
body.high-contrast .drawer-qa-panel .accessibility-options button:focus:not(:focus-visible) {
outline: none !important;
}
/* BUTTON TEXT — Antialiasing for all buttons; white text only on primary (dark-bg) variants. */
.button,
a.button,
button.button,
.btn,
a.btn,
button.btn {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.button,
a.button,
button.button,
.btn-p,
.btn-primary,
a.btn-p,
button.btn-p {
color: #ffffff !important;
}
.btn-secondary,
.btn-s,
a.btn-s,
button.btn-s {
background-color: var(--white) !important;
border: 2px solid var(--brand-blue-dark) !important;
color: var(--brand-blue-dark) !important;
font-weight: 600 !important;
transition: transform .15s ease, background .15s ease, border-color .15s ease !important;
padding: 14px 22px !important;
border-radius: var(--radius, 4px) !important;
}
.btn-secondary:hover,
.btn-s:hover,
a.btn-s:hover,
button.btn-s:hover {
background: #d4e7f742 !important;
border-color: var(--brand-blue-dark) !important;
color: var(--brand-blue-dark) !important;
text-decoration: underline !important;
text-underline-offset: 2px !important;
text-decoration-thickness: 1.5px !important;
}
body.high-contrast .button,
body.high-contrast a.button,
body.high-contrast button.button,
body.high-contrast .btn,
body.high-contrast a.btn,
body.high-contrast button.btn {
color: #ffffff !important;
}
/* High-contrast: keep white text on dark buttons.
Selectors match the specificity (0,4,2) of the broad
body.high-contrast a:not(.button):not(.section-link):not(.social-link) rule
so these white-text overrides win when placed later in the file. */
body.high-contrast .contact-panel .contact-311-group a.contact-311-btn {
color: #ffffff !important;
background: #001f3f !important;
}
body.high-contrast .nav-wrap .mobile-menu-support-actions a.mobile-menu-support-primary {
color: #ffffff !important;
background: #001f3f !important;
border-color: #001f3f !important;
}
/* Active language item in translate panel: dark blue bg with white text.
Specificity (0,4,2) matches the broad a:not(...) rule at line 200 so
this later declaration wins for same-specificity !important resolution. */
body.high-contrast .utility-item .translation-panel a.active {
background: #001f3f !important;
color: #ffffff !important;
}
body.high-contrast .utility-item .translation-panel a.active:hover,
body.high-contrast .utility-item .translation-panel a.active:focus {
background: #000000 !important;
color: #ffffff !important;
}
/* =================================================================
NEW PAGE CSS ADDITIONS
Added for: calendar, development-applications, news-and-notices,
typical-news-post, typical-applications-page,
typical-event-details-page, parks-and-facilities
================================================================= */
/* ---- Additional CSS custom properties ---- */
:root {
--brand-green: #236b18;
--brand-green-dark: #17470f;
--brand-green-light: #edf7e7;
--event-town: #0256a4;
--event-town-light: #eaf3fb;
--event-community: #236b18;
--event-community-light: #eef8e8;
--event-recreation: #c75f00;
--event-recreation-light: #fff1e3;
--event-arts: #7a4ab0;
--event-arts-light: #f2ebfb;
--event-engagement: #00838f;
--event-engagement-light: #e6f6f8;
--secondary-green: #236b18;
--secondary-green-dark: #17470f;
--secondary-green-light: #edf7e7;
--soft: #f5f8fb;
}
/* ---- Shared utilities ---- */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 16px;
border-radius: calc(var(--radius) - 2px);
font: inherit;
font-weight: 600;
cursor: pointer;
border: 1px solid var(--brand-blue);
transition: background .18s ease, color .18s ease, border-color .18s ease;
text-decoration: none;
}
.btn:hover, .btn:focus {
text-decoration: underline;
text-underline-offset: 3px;
}
.btn-primary, .btn-p {
background: var(--brand-blue);
color: #fff;
border: 0;
border-radius: calc(var(--radius) - 2px);
padding: 14px 22px;
font-weight: 600 !important;
cursor: pointer;
display: inline-block;
transition: background .18s ease, transform .18s ease;
}
.btn-primary:hover, .btn-p:hover {
background: var(--brand-highlight-green) !important;
border-color: var(--brand-highlight-green) !important;
color: #ffffff !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
transform: translateY(-2px);
}
.btn-primary:active, .btn-p:active {
opacity: 0.74; transform: scale(0.975); box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}
.btn-primary:focus, .btn-primary:focus-visible,
.btn-p:focus, .btn-p:focus-visible {
background: var(--brand-highlight-green);
outline: 3px solid var(--brand-blue-dark);
outline-offset: 3px;
}
.btn-outline, .btn-o {
background: #fff;
border: 2px solid var(--brand-blue-dark);
color: var(--brand-blue-dark);
font-weight: 700;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-outline:hover, .btn-o:hover {
background: var(--brand-light);
color: var(--brand-blue-dark);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1.5px;
}
.btn-outline:active, .btn-o:active {
opacity: 0.74; transform: scale(0.975); box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}
.btn-outline:focus, .btn-outline:focus-visible,
.btn-o:focus, .btn-o:focus-visible {
outline: 3px solid var(--brand-blue-dark);
outline-offset: 3px;
}
.btn-secondary, .btn-s {
background-color: var(--white);
border: 2px solid var(--brand-blue-dark);
color: var(--brand-blue-dark);
font-weight: 700;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-secondary:hover, .btn-s:hover {
background: #d4e7f742;
border-color: var(--brand-blue-dark);
color: var(--brand-blue-dark);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1.5px;
}
.btn-secondary:active, .btn-s:active {
opacity: 0.74;
transform: scale(0.975);
box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}
.btn-secondary:focus, .btn-secondary:focus-visible,
.btn-s:focus, .btn-s:focus-visible {
background: var(--brand-light);
border-color: var(--brand-blue-dark);
color: var(--brand-blue-dark);
outline: 3px solid var(--brand-blue-dark);
outline-offset: 3px;
box-shadow: none;
}
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 24px;
color: var(--brand-blue);
font-weight: 600;
}
.back-link:hover, .back-link:focus {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---- Shared: contact-us-card / cu-card ---- */
.contact-us-card, .cu-card, .contactContainer {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
max-width: 340px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}
.contact-us-card h2, .cu-card h2, .cu-card-title, .contactHeaderTitle {
margin: 0 0 10px;
padding: 0;
border-bottom: none;
color: var(--brand-blue-dark);
font-size: 1.25rem;
font-weight: 700;
}
.contact-us-body, .cu-card-body, .contactBody {
padding: 0;
font-size: 0.9375rem;
color: #576b82;
line-height: 1.55;
}
.contact-us-body p, .cu-card-body p {
margin: 0 0 10px;
color: var(--brand-muted) !important;
font-weight: 400;
}
.contact-us-body p:last-child, .cu-card-body p:last-child {
margin-bottom: 0;
}
.contact-us-body strong, .cu-card-body strong {
font-weight: 600 !important;
display: block;
margin-bottom: 6px;
color: var(--brand-text);
}
.contact-us-body a, .cu-card-body a {
color: var(--brand-blue);
font-weight: 600 !important;
text-decoration: none;
}
.contact-us-body a:hover, .contact-us-body a:focus,
.cu-card-body a:hover, .cu-card-body a:focus {
text-decoration: underline;
text-underline-offset: 3px;
color: var(--brand-blue-dark);
}
/* ---- View toggle (shared: calendar + DA + parks) ---- */
.view-toggle {
display: inline-flex;
padding: 4px;
background: #fff;
border: 1px solid var(--border);
border-radius: 999px;
}
.view-toggle button {
border: 0;
background: transparent;
color: var(--brand-muted);
padding: 9px 14px;
border-radius: 999px;
font: inherit;
font-weight: 600;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}
.view-toggle button.active {
background: var(--brand-blue);
color: #fff;
transition: background 0.18s, color 0.18s;
font-weight: 600 !important;
}
.view-toggle button.active:hover {
background: var(--brand-highlight-green);
}
.view-toggle button:focus,
.view-toggle button:focus-visible {
outline: 3px solid var(--brand-blue-dark);
outline-offset: 3px;
}
.view-toggle button.active:focus,
.view-toggle button.active:focus-visible {
background: var(--brand-highlight-green);
}
.view-toggle button:hover:not(.active),
.view-toggle button:focus:not(.active),
.view-toggle button:focus-visible:not(.active) {
background: rgba(0, 0, 0, 0.05);
color: var(--brand-text);
}
/* DA uses grey background for the toggle container */
.application-shell .view-toggle { background: #f2f2f2; }
/* ================================================================
EVENTS CALENDAR (calendar.html)
================================================================ */
.calendar-hero {
background: linear-gradient(135deg, #fff 0%, #f1f3f5 100%);
border-bottom: 1px solid var(--border);
padding: 46px 0;
}
.calendar-hero h1 {
margin: 0;
color: var(--brand-blue-dark);
font-size: clamp(2.2rem, 4vw, 3.5rem);
line-height: 1.05;
letter-spacing: -.045em;
font-weight: 600;
}
.community-event-cta {
background: #eaf3fb;
border-bottom: 1px solid var(--border);
}
.community-event-cta-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding-top: 26px;
padding-bottom: 26px;
}
.community-event-cta h2 {
margin: 0 0 6px;
color: var(--brand-blue-dark);
font-size: clamp(1.35rem, 2.1vw, 1.85rem);
line-height: 1.15;
font-weight: 600;
}
.community-event-cta p { margin: 0; color: var(--brand-muted); }
.community-event-submit { flex: 0 0 auto; white-space: nowrap; }
.calendar-shell { padding: 48px 0 72px; background: #fff; }
.calendar-layout { display: block; }
.calendar-controls-panel {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 18px;
width: 100%;
margin: 0 0 24px;
background: #fff;
border: 0;
border-radius: 0;
}
.calendar-tools { margin: 0; padding: 0; background: transparent; border: 0; }
.calendar-main.is-list-view .calendar-tools { display: none; }
.category-filter {
display: flex;
flex-direction: column;
gap: 12px;
margin: 0; padding: 0; border: 0;
min-inline-size: 0;
}
.category-filter legend, .category-panel-title {
margin: 0 0 2px;
color: var(--brand-text);
font-size: 1rem;
font-weight: 600;
}
.category-filter-options { display: flex; flex-wrap: wrap; gap: 12px; }
.category-option {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 44px;
padding: 8px 4px;
background: #fff;
border: 0; border-radius: 0;
color: var(--brand-text);
font-size: 1rem; font-weight: 600;
cursor: pointer;
user-select: none;
}
.category-option input { position: absolute; opacity: 0; pointer-events: none; }
.category-swatch {
width: 22px; height: 22px;
border-radius: 999px;
box-shadow: inset 0 0 0 3px rgba(255,255,255,.72), 0 0 0 1px rgba(15,45,64,.18);
}
.category-option[data-category="town"] .category-swatch { background: var(--event-town); }
.category-option[data-category="community"] .category-swatch { background: var(--event-community); }
.category-option[data-category="recreation"] .category-swatch { background: var(--event-recreation); }
.category-option[data-category="arts"] .category-swatch { background: var(--event-arts); }
.category-option[data-category="engagement"] .category-swatch { background: var(--event-engagement); }
.category-option:has(input:checked) { box-shadow: none; }
.category-option:has(input:not(:checked)) { opacity: .42; background: #fff; }
.category-option:focus-within { outline: 3px solid rgba(2,86,164,.22); outline-offset: 2px; }
.calendar-filter-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-link-button {
padding: 0; background: transparent; border: 0;
color: var(--brand-blue); font: inherit; font-weight: 600;
text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.filter-link-button:hover, .filter-link-button:focus { color: var(--brand-blue-dark); }
.calendar-empty-state {
display: none;
margin: 18px 0 0; padding: 18px;
background: #fff;
border: 1px dashed var(--border);
border-radius: var(--radius);
color: var(--brand-muted); font-weight: 600;
}
.calendar-empty-state.active { display: block; }
.calendar-view-header { display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; margin: 0 0 0 auto; }
/* Month calendar grid */
.month-calendar {
overflow: visible;
border: 1px solid var(--border);
border-radius: var(--radius);
background: #fff;
box-shadow: 0 6px 18px rgba(2,86,164,.06);
}
.month-bar {
display: grid;
grid-template-columns: 46px minmax(0,1fr) 46px;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: var(--brand-blue-dark);
color: #fff;
}
.month-bar h3 {
margin: 0;
font-size: clamp(1.75rem, 3vw, 2.35rem);
line-height: 1.05; font-weight: 600; letter-spacing: -.02em; text-align: center;
}
.month-nav { display: flex; gap: 8px; align-items: center; justify-content: flex-end; align-self: center; }
.month-nav button, .month-nav-button {
min-width: 46px; height: 46px;
border: 2px solid rgba(255,255,255,.78);
border-radius: 999px;
background: rgba(255,255,255,.10);
color: #fff;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
align-self: center;
}
.month-nav button:hover, .month-nav button:focus,
.month-nav-button:hover, .month-nav-button:focus {
background: #fff; color: var(--brand-blue-dark); border-color: #fff;
}
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); }
.calendar-weekdays div {
padding: 14px 12px;
background: #f2f2f2;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
color: var(--brand-blue-dark);
font-size: 1rem; font-weight: 600;
text-align: center; text-transform: uppercase; letter-spacing: .04em;
}
.calendar-weekdays div:last-child { border-right: 0; }
.calendar-day {
min-height: 124px; padding: 10px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
background: #fff;
}
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.muted { background: #f7f8f9; color: #8a96a0; }
.day-number {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 28px;
margin-bottom: 8px;
color: var(--brand-text); font-weight: 600;
}
.calendar-day.today .day-number { background: var(--brand-blue); color: #fff; border-radius: 999px; }
/* Event pills */
.event-pill {
display: block; position: relative; z-index: 1;
margin: 5px 0 0; padding: 6px 8px;
border-radius: 8px; font-size: .82rem; font-weight: 600 !important; line-height: 1.25;
}
.event-pill.town-event { background: var(--event-town-light); color: var(--brand-blue-dark); border: 1px solid var(--event-town); }
.event-pill.community-event { background: var(--event-community-light); color: #356904; border: 1px solid var(--event-community); }
.event-pill.recreation-event { background: var(--event-recreation-light); color: #8a4300; border: 1px solid var(--event-recreation); }
.event-pill.arts-event { background: var(--event-arts-light); color: #503072; border: 1px solid var(--event-arts); }
.event-pill.engagement-event { background: var(--event-engagement-light); color: #005e66; border: 1px solid var(--event-engagement); }
.event-pill:hover, .event-pill:focus { z-index: 60; }
.event-pill.town-event:hover, .event-pill.town-event:focus { background: var(--event-town); color: #fff; }
.event-pill.community-event:hover, .event-pill.community-event:focus { background: var(--event-community); color: #fff; }
.event-pill.recreation-event:hover, .event-pill.recreation-event:focus { background: var(--event-recreation); color: #fff; }
.event-pill.arts-event:hover, .event-pill.arts-event:focus { background: var(--event-arts); color: #fff; }
.event-pill.engagement-event:hover, .event-pill.engagement-event:focus { background: var(--event-engagement); color: #fff; }
.event-popup {
display: none; position: absolute; left: 0; top: calc(100% + 8px); z-index: 50;
width: min(280px, calc(100vw - 48px));
padding: 14px; background: #fff; color: var(--brand-text);
border: 1px solid var(--border); border-radius: var(--radius);
box-shadow: 0 14px 30px rgba(15,45,64,.22);
font-size: .92rem; line-height: 1.35; font-weight: 400; text-align: left;
}
.event-popup::before {
content: ""; position: absolute; left: 16px; top: -7px;
width: 12px; height: 12px; background: #fff;
border-left: 1px solid var(--border); border-top: 1px solid var(--border);
transform: rotate(45deg);
}
.event-popup strong, .event-popup span, .event-popup em { display: block; }
.event-popup strong { margin: 0 0 6px; color: var(--brand-blue-dark); font-size: 1rem; font-weight: 600; }
.event-popup em { margin-top: 8px; color: var(--brand-muted); font-style: normal; }
.event-pill:hover .event-popup, .event-pill:focus .event-popup { display: block; }
/* Calendar/list view panels */
.calendar-view-panel, .list-view-panel { display: none; }
.calendar-view-panel.active { display: block; }
.list-view-panel.active { display: grid; }
.list-view-panel { grid-template-columns: minmax(0,1fr) 320px; gap: 22px; align-items: start; }
.list-main { display: grid; gap: 18px; }
.list-month-bar {
display: grid;
grid-template-columns: 46px minmax(0,1fr) 46px;
align-items: center; gap: 16px; padding: 18px 20px;
background: var(--brand-blue-dark); color: #fff; border-radius: var(--radius);
}
.list-month-bar h3 {
margin: 0; font-size: clamp(1.75rem, 3vw, 2.35rem);
line-height: 1.05; font-weight: 600; letter-spacing: -.02em; text-align: center;
}
.event-list {
gap: 0; margin-top: 0;
border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; background: #fff;
}
.event-card {
color: inherit; text-decoration: none;
display: grid;
grid-template-columns: 116px minmax(0,1fr) auto;
column-gap: 32px; align-items: center;
padding: 40px 32px 40px 40px;
border-bottom: 1px solid var(--border);
background: #fff; box-shadow: none;
}
.event-card:last-child { border-bottom: 0; }
.event-card:hover, .event-card:focus { background: #f8fbfe; outline: 3px solid rgba(2,86,164,.18); outline-offset: -3px; }
.event-card:hover h3, .event-card:focus h3 { text-decoration: underline; text-underline-offset: 4px; }
.event-card.event-town-card { border-left: 6px solid var(--event-town); }
.event-card.event-community-card { border-left: 6px solid var(--event-community); }
.event-card.event-recreation-card { border-left: 6px solid var(--event-recreation); }
.event-card.event-arts-card { border-left: 6px solid var(--event-arts); }
.event-card.event-engagement-card { border-left: 6px solid var(--event-engagement); }
.event-date {
display: grid; place-items: center;
width: 112px; min-height: 112px; padding: 14px;
border-radius: var(--radius); text-align: center; font-weight: 600; color: #fff;
}
.event-town-card .event-date { background: var(--event-town); }
.event-community-card .event-date { background: var(--event-community); }
.event-recreation-card .event-date { background: var(--event-recreation); }
.event-arts-card .event-date { background: var(--event-arts); }
.event-engagement-card .event-date { background: var(--event-engagement); }
.event-date span:first-child { font-size: 1.32rem; line-height: 1; font-weight: 600; letter-spacing: .015em; text-transform: uppercase; }
.event-date span:last-child { font-size: 2.65rem; line-height: .95; font-weight: 600; }
.event-details { padding-right: 24px; }
.event-details h3 { margin: 0 0 6px; color: var(--brand-blue-dark); font-size: 1.4rem; line-height: 1.2; font-weight: 600; }
.event-meta { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 8px; color: var(--brand-muted); font-size: 1rem; font-weight: 600; }
.event-details p { margin: 0; color: var(--brand-muted); }
.event-tag {
display: inline-flex; align-items: center;
padding: 7px 10px; background: #f2f2f2; color: var(--brand-blue-dark);
border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap;
}
.event-tag-town { background: var(--event-town-light); color: var(--brand-blue-dark); border: 1px solid var(--event-town); }
.event-tag-community { background: var(--event-community-light); color: #356904; border: 1px solid var(--event-community); }
.event-tag-recreation { background: var(--event-recreation-light); color: #8a4300; border: 1px solid var(--event-recreation); }
.event-tag-arts { background: var(--event-arts-light); color: #503072; border: 1px solid var(--event-arts); }
.event-tag-engagement { background: var(--event-engagement-light); color: #005e66; border: 1px solid var(--event-engagement); }
/* List sidebar */
.list-sidebar { position: sticky; top: 120px; align-self: start; padding: 0; background: transparent; border: 0; border-radius: 0; }
.list-sidebar .category-filter { gap: 0; }
.list-sidebar .category-filter legend { margin: 0 0 14px; color: var(--brand-blue-dark); font-size: 1.25rem; line-height: 1.2; font-weight: 600; }
.list-sidebar .category-filter-options { display: grid; grid-template-columns: 1fr; gap: 0; }
.list-sidebar .category-option {
display: flex; width: 100%; min-height: 0; padding: 12px 0;
border-top: 1px solid var(--border); background: transparent; border-radius: 0;
color: var(--brand-blue); font-weight: 400; line-height: 1.3;
transition: transform .18s ease, color .18s ease, font-weight .18s ease, opacity .18s ease;
}
.list-sidebar .category-option:first-child { border-top: 0; }
.list-sidebar .category-option:hover, .list-sidebar .category-option:focus-within {
transform: translateX(1px); color: var(--brand-blue-dark); font-weight: 700;
text-decoration: underline; text-underline-offset: 3px; outline: 0;
}
.list-sidebar .category-option:focus-within { outline: 3px solid var(--brand-blue); outline-offset: 3px; }
.list-sidebar .category-option:has(input:not(:checked)) { opacity: .45; background: transparent; }
.list-sidebar .category-option:has(input:checked) { box-shadow: none; }
.list-sidebar .category-swatch { width: 20px; height: 20px; flex: 0 0 20px; }
.category-counts { display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.category-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); font-size: .95rem; font-weight: 600; }
.category-count-label { display: flex; align-items: center; gap: 8px; }
.category-count-number { color: var(--brand-muted); }
/* Calendar responsive */
@media (max-width: 980px) {
.list-view-panel { grid-template-columns: 1fr; }
.list-sidebar { position: static; }
.list-sidebar .category-filter-options { display: flex; flex-wrap: wrap; }
.list-sidebar .category-option:nth-child(-n+2) { border-top: 0; }
.event-card { grid-template-columns: 96px minmax(0,1fr); row-gap: 16px; }
.event-tag { grid-column: 2; }
}
@media (max-width: 760px) {
.community-event-cta-inner { align-items: flex-start; flex-direction: column; }
.community-event-submit { width: 100%; }
.category-filter-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px 14px; }
.list-sidebar .category-filter-options { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; }
.category-option { width: 100%; align-items: center; min-height: 42px; font-size: .95rem; line-height: 1.15; }
.category-swatch { width: 24px; height: 24px; flex: 0 0 24px; }
.calendar-controls-panel { flex-direction: column; align-items: stretch; }
.calendar-view-header { margin-left: 0; }
.calendar-view-header, .view-toggle { width: 100%; }
.view-toggle button { flex: 1; }
.month-bar, .list-month-bar { gap: 10px; padding: 16px; }
.month-nav button, .month-nav-button { min-width: 46px; width: 46px; flex: 0 0 46px; }
.calendar-days { grid-template-columns: 1fr; }
.calendar-weekdays { display: none; }
.calendar-day { min-height: auto; border-right: 0; }
.calendar-day.muted { display: none; }
.event-card { grid-template-columns: 1fr; row-gap: 18px; padding: 28px 20px; }
.event-date { width: 112px; min-height: 100px; }
.event-details { padding-right: 0; }
.event-tag { grid-column: auto; justify-self: start; }
.list-sidebar .category-filter-options { gap: 0 14px; }
.list-sidebar .category-option { font-size: .95rem; padding: 11px 0; }
.list-sidebar .category-swatch { width: 22px; height: 22px; flex-basis: 22px; }
}
/* ================================================================
PAGE HERO (news pages — no .page-banner before it)
================================================================ */
.page-hero {
background: linear-gradient(135deg, #fff 0%, #f1f3f5 100%);
border-bottom: 1px solid var(--border);
padding: 46px 0 40px;
}
.page-hero h1 {
margin: 0;
color: var(--brand-blue-dark);
font-size: clamp(2.15rem,3.7vw,3.35rem);
line-height: 1.05; letter-spacing: -.045em; font-weight: 600;
}
.page-hero p { max-width: 850px; margin: 16px 0 0; color: var(--brand-muted); font-weight: 400; }
/* News post .page-hero has a tighter h1 max-width */
.post-shell ~ .page-hero h1,
.page-hero.post-hero h1 { max-width: 1020px; }
@media (max-width: 700px) {
.page-hero { padding: 40px 0 34px; }
}
/* ================================================================
NEWS AND NOTICES (news-and-notices.html)
================================================================ */
.sidebar,
.typical-sidebar,
.foi-sidebar,
.list-sidebar,
.post-sidebar,
.applications-filter-sidebar,
.right-sidebar,
.event-sidebar {
max-height: none !important;
overflow: visible !important;
}
.news-shell { padding: 42px 0 72px; background: #fff; }
.news-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 36px; align-items: start; }
.right-sidebar { position: sticky; top: 120px; align-self: start; display: grid; gap: 18px; }
.filter-panel {
background: #fff; border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: 0 6px 18px rgba(2,86,164,.08); overflow: hidden;
}
.filter-header { padding: 22px 22px 0; background: #fff; color: var(--brand-blue-dark); }
.filter-header h2 { margin: 0 0 14px; color: var(--brand-blue-dark); font-size: 1.25rem; line-height: 1.2; font-weight: 600; }
.filter-body { padding: 0 22px 22px; }
.form-group, .fg { margin-bottom: 20px; }
.form-group label, .fg label, .pseudo-label { display: block; margin-bottom: 8px; color: var(--brand-text); font-weight: 600; }
.date-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.date-grid .input-icon-wrap { width: 100%; }
.date-grid .input-icon-wrap input { width: 100%; min-width: 0; box-sizing: border-box; }
.category-checks { display: grid; gap: 9px; margin-top: 10px; }
.check-row { display: flex; align-items: flex-start; gap: 9px; color: var(--brand-muted); font-weight: 400; }
.check-row input { margin-top: 4px; accent-color: var(--brand-blue); }
.filter-actions { display: grid; gap: 10px; margin-top: 22px; }
.input-icon-wrap { position: relative; display: flex; align-items: center; }
.input-icon-wrap .input-icon { position: absolute; left: 14px; width: 16px; height: 16px; stroke: var(--brand-muted); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; flex-shrink: 0; }
.input-icon-wrap .has-icon { padding-left: 42px; width: 100%; }
/* Admin toolbar overrides to guarantee it stays on top */
#toolbar-administration,
.toolbar,
.toolbar-menu,
.toolbar-tray {
z-index: 99999 !important;
}
.news-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.news-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.news-tab {
display: inline-flex; align-items: center; justify-content: center;
min-height: 40px; padding: 0 14px; border-radius: 999px;
border: 1px solid var(--border); background: #fff; color: var(--brand-muted); font-weight: 600;
}
.news-tab.active, .news-tab:hover, .news-tab:focus { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
.results-count { color: var(--brand-muted); font-weight: 400; }
.subscribe-top-button {
display: block !important;
text-align: center !important;
white-space: normal !important;
word-wrap: break-word !important;
min-width: 138px;
height: auto !important;
min-height: 50px !important;
padding: 12px 16px !important;
line-height: 1.4 !important;
background: var(--brand-highlight-green); border-color: var(--brand-highlight-green); color: #fff;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.subscribe-top-button:hover {
background: var(--brand-highlight-green-dark) !important; border-color: var(--brand-highlight-green-dark); color: #fff;
text-decoration: underline; text-underline-offset: 3px;
}
.subscribe-top-button:active {
opacity: 0.74; transform: scale(0.975); box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}
.subscribe-top-button:focus, .subscribe-top-button:focus-visible {
background: var(--brand-highlight-green); border-color: var(--brand-highlight-green); color: #fff;
outline: 3px solid var(--brand-highlight-green); outline-offset: 3px;
}
.subscribe-top-button svg {
display: inline-block !important;
width: 1.25em !important; height: 1.25em !important; fill: none !important; stroke: currentColor !important;
stroke-width: 2.2 !important; stroke-linecap: round !important; stroke-linejoin: round !important; flex-shrink: 0 !important;
margin: -2px 0 0 8px !important;
vertical-align: middle !important;
}
.sidebar-subscribe-button {
display: block !important;
width: 100% !important;
min-height: 50px !important;
padding-top: 13px !important;
padding-bottom: 13px !important;
}
.subscribe-callout {
display: grid; grid-template-columns: 1fr auto;
gap: 20px; align-items: center; margin-bottom: 26px;
padding: 22px 24px; background: var(--brand-light);
border-left: 6px solid var(--brand-blue); border-radius: var(--radius);
}
.subscribe-callout h2 { margin: 0 0 4px; color: var(--brand-blue-dark); font-size: 1.25rem; font-weight: 600; }
.subscribe-callout p { margin: 0; color: var(--brand-muted); font-weight: 400; }
.sidebar-subscribe {
background: #fff; border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: 0 6px 18px rgba(2,86,164,.08); overflow: hidden;
}
.sidebar-subscribe-header { padding: 22px 22px 0; background: #fff; color: var(--brand-blue-dark); }
.sidebar-subscribe-header h2 { margin: 0 0 14px; color: var(--brand-blue-dark); font-size: 1.25rem; line-height: 1.2; font-weight: 600; }
.sidebar-subscribe-body { padding: 0 22px 22px; }
.sidebar-subscribe-body p { margin: 0 0 16px; color: var(--brand-muted); font-weight: 400; }
.sidebar-subscribe-body .btn { width: 100%; }
/* News list — scoped to avoid conflict with homepage .news-list / .news-card */
.news-shell .news-list { display: grid; grid-template-columns: 1fr; gap: 22px; }
.news-shell .news-card {
display: grid; grid-template-columns: 190px minmax(0,1fr);
gap: 24px; background: #fff;
border: 1px solid var(--border); border-top: 1px solid var(--border);
border-radius: var(--radius); box-shadow: 0 6px 18px rgba(2,86,164,.08); overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.news-shell .news-card:hover, .news-shell .news-card:focus-within {
transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,.10); border-color: var(--brand-blue);
}
.news-image.news-image-placeholder {
background: #e9f1f7;
color: #4b607a;
display: grid;
place-items: center;
font-family: inherit;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.05em;
text-transform: uppercase;
text-align: center;
padding: 16px;
line-height: 1.3;
}
.news-image {
min-height: 178px;
background: linear-gradient(135deg, #dce8f4, #f5f7fa);
display: grid; place-items: center;
color: var(--brand-blue-dark); font-weight: 600; text-align: center; padding: 0; overflow: hidden;
}
.news-image img { width: 100%; height: 100%; min-height: 178px; object-fit: cover; display: block; }
.news-content { padding: 24px 50px 24px 0; }
.news-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; color: var(--brand-muted); font-size: .94rem; font-weight: 400; }
.news-category, .chip.chip-filled-primary { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: #55a508; color: #ffffff; font-weight: 600; border: 1.5px solid #55a508; }
.news-shell .news-card h2 { margin: 0 0 10px; color: var(--brand-blue-dark); font-size: 1.42rem; line-height: 1.18; font-weight: 600; }
.news-shell .news-card h2 a:hover, .news-shell .news-card h2 a:focus { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }
.news-shell .news-card p { margin: 0 0 18px; color: var(--brand-muted); font-weight: 400; }
.read-more { display: inline-flex; align-items: center; gap: 8px; color: var(--brand-blue); font-weight: 600; }
.read-more svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.read-more:hover, .read-more:focus { text-decoration: underline; text-underline-offset: 3px; }
.read-more:hover svg, .read-more:focus svg { transform: translateX(4px); }
.pagination { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; color: var(--brand-muted); }
.page-links { display: flex; gap: 6px; flex-wrap: wrap; }
.page-links a, .page-links span {
display: inline-grid; place-items: center;
min-width: 38px; height: 38px; padding: 0 10px;
border: 1px solid var(--border); border-radius: 8px;
color: var(--brand-blue); font-weight: 600; background: #fff;
}
.page-links span.current { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.page-links a:hover, .page-links a:focus { background: var(--brand-light); border-color: var(--brand-blue-dark); }
/* News and notices responsive */
@media (max-width: 1050px) {
.news-layout { grid-template-columns: 1fr; }
.right-sidebar { position: static; }
.news-shell .news-card { grid-template-columns: 150px minmax(0,1fr); }
}
@media (max-width: 700px) {
.subscribe-callout { grid-template-columns: 1fr; }
.news-shell .news-card { grid-template-columns: 1fr; }
.news-image { min-height: 140px; }
.news-content { padding: 22px; }
.news-toolbar { align-items: flex-start; flex-direction: column; }
}
/* ================================================================
NEWS POST (typical-news-post.html)
================================================================ */
.post-shell { padding: 42px 0 72px; background: #fff; }
.post-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 38px; align-items: start; }
.post-sidebar { position: sticky; top: 120px; align-self: start; display: grid; gap: 18px; }
.post-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.post-image { width: 100%; height: auto; display: block; border-radius: var(--radius); margin-bottom: 28px; }
.post-content { padding: 0; }
.post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; color: var(--brand-muted); font-weight: 400; }
.post-tag, .chip.chip-filled-primary { display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px; border-radius: 999px; background: #55a508; color: #fff; font-size: .94rem; font-weight: 600; border: 1.5px solid #55a508; }
.post-content p { margin: 0 0 18px; color: var(--brand-text); font-weight: 400; }
.post-content h2 { margin: 32px 0 12px; color: var(--brand-blue-dark); font-size: 1.42rem; line-height: 1.2; font-weight: 600; }
.contact-note {
padding: 20px; background: var(--soft);
border-left: 5px solid var(--brand-blue);
border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
}
.contact-note p:last-child { margin-bottom: 0; }
.contact-note a { color: var(--brand-blue); font-weight: 600 !important; text-decoration: underline; text-underline-offset: 3px; }
.sidebar-button {
display: inline-flex; align-items: center; justify-content: center;
gap: 12px; width: 100%; min-height: 50px; padding: 0 18px;
border: 2px solid var(--brand-highlight-green); border-radius: calc(var(--radius) - 2px);
background: var(--brand-highlight-green); color: #fff;
font: inherit; font-weight: 700; cursor: pointer;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.sidebar-button:hover {
background: var(--brand-highlight-green-dark); border-color: var(--brand-highlight-green-dark);
text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px;
}
.sidebar-button:active {
opacity: 0.74; transform: scale(0.975); box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}
.sidebar-button:focus, .sidebar-button:focus-visible {
background: var(--brand-highlight-green); border-color: var(--brand-highlight-green);
outline: 3px solid var(--brand-highlight-green); outline-offset: 3px; box-shadow: none;
}
.sidebar-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-g {
background: var(--brand-highlight-green); border-color: var(--brand-highlight-green); color: #fff; font-weight: 700;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn-g:hover {
background: var(--brand-highlight-green-dark); border-color: var(--brand-highlight-green-dark); color: #fff;
text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px;
}
.btn-g:active {
opacity: 0.74; transform: scale(0.975); box-shadow: inset 0 2px 6px rgba(0,0,0,0.18);
}
.btn-g:focus, .btn-g:focus-visible {
background: var(--brand-highlight-green); border-color: var(--brand-highlight-green); color: #fff;
outline: 3px solid var(--brand-highlight-green); outline-offset: 3px; box-shadow: none;
}
.btn-g svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-box { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(2,86,164,.08); overflow: hidden; }
.sidebar-box-header { padding: 20px 20px 0; background: #fff; color: var(--brand-blue-dark); }
.sidebar-box-header h2 { margin: 0 0 14px; color: var(--brand-blue-dark); font-size: 1.25rem; line-height: 1.2; font-weight: 600; }
.sidebar-nav { list-style: none; margin: 0; padding: 8px 0; }
.sidebar-nav a { display: block; padding: 13px 20px; color: var(--brand-blue); font-weight: 600; border-bottom: 1px solid var(--border); }
.sidebar-nav li:last-child a { border-bottom: 0; }
.sidebar-nav a:hover, .sidebar-nav a:focus { background: var(--brand-light); text-decoration: underline; text-underline-offset: 3px; }
.contact-card { padding: 20px; }
.contact-card h3 { margin: 0 0 10px; color: var(--brand-blue-dark); font-size: 1.05rem; font-weight: 600; }
.contact-card p { margin: 0 0 12px; color: var(--brand-muted); font-weight: 400; }
.contact-card strong { color: var(--brand-text); font-weight: 600; }
.contact-card a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.contact-card a:hover, .contact-card a:focus { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1050px) {
.post-layout { grid-template-columns: 1fr; }
.post-sidebar { position: static; }
}
@media (max-width: 700px) {
.post-shell { padding: 30px 0 58px; }
.post-content { padding: 24px; }
}
/* ================================================================
SUBSCRIBE MODAL (shared: news-and-notices + typical-news-post)
================================================================ */
.subscribe-modal-backdrop {
display: none; position: fixed; inset: 0; z-index: 2000;
background: rgba(0,0,0,.55); padding: 20px; overflow: auto;
}
.subscribe-modal-backdrop.open { display: grid; place-items: center; }
.subscribe-modal { width: min(440px, 100%); background: #fff; border-radius: 12px; box-shadow: 0 24px 70px rgba(0,0,0,.28); overflow: hidden; }
.subscribe-modal-header {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; padding: 18px 20px; background: var(--brand-blue-dark); color: #fff;
}
.subscribe-modal-header h2 { margin: 0; font-size: 1.22rem; line-height: 1.2; font-weight: 600; }
.subscribe-modal-close {
display: inline-grid; place-items: center;
width: 34px; height: 34px;
border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
background: transparent; color: #fff; font: inherit; font-size: 1.35rem; line-height: 1;
cursor: pointer; flex-shrink: 0;
}
.subscribe-modal-close:hover, .subscribe-modal-close:focus { background: rgba(255,255,255,.14); }
.subscribe-modal-body { padding: 20px; }
.subscribe-modal-body .form-group { margin-bottom: 16px; }
.subscribe-modal-body fieldset { border: 0; padding: 0; margin: 0; }
.subscribe-modal-body legend { margin: 0 0 10px !important; color: var(--brand-text) !important; font-weight: 600 !important; font-size: 1rem; }
.subscribe-category-grid { display: grid; gap: 8px; margin-top: 0; }
.subscribe-category-option {
display: flex; align-items: center; gap: 12px; min-height: 44px;
padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
background: #fff; color: var(--brand-text); font-size: 1rem; line-height: 1.2; font-weight: 600; cursor: pointer;
}
.subscribe-category-option:hover, .subscribe-category-option:focus-within { border-color: var(--brand-blue); background: var(--brand-light); }
.subscribe-category-option input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--brand-blue); cursor: pointer; }
.subscribe-category-option span { display: block; padding-top: 1px; }
.subscribe-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.subscribe-modal-actions .btn { width: 100%; min-height: 42px; }
.subscribe-privacy-note { margin: 14px 0 0; color: var(--brand-muted); font-size: .9rem; font-weight: 400; }
.subscribe-confirmation {
display: none; margin-top: 14px; padding: 12px 14px;
background: var(--brand-light); border-left: 5px solid var(--brand-blue);
border-radius: 8px; color: var(--brand-blue-dark); font-weight: 600;
}
.subscribe-confirmation.show { display: block; }
body.modal-open { overflow: hidden; }
@media (max-width: 520px) {
.subscribe-modal-backdrop { padding: 12px; align-items: start; padding-top: 20px; }
.subscribe-modal { width: 100%; }
.subscribe-modal-header, .subscribe-modal-body { padding: 16px; }
.subscribe-modal-header h2 { font-size: 1.12rem; }
.subscribe-modal-actions { grid-template-columns: 1fr; }
}
/* ================================================================
DEVELOPMENT APPLICATIONS (development-applications.html)
================================================================ */
.planning-banner {
background-image: url('../Landing Page/images/landing page/banner images/planning-and-development.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.application-shell { padding: 48px 0 72px; background: #fff; }
.results-header { display: flex; justify-content: flex-end; align-items: center; gap: 20px; margin: 0 0 18px; }
.map-view {
display: none; border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(2,86,164,.06);
}
.map-view.active { display: block; }
.map-toolbar { display: flex; justify-content: flex-end; gap: 12px; padding: 14px; background: #fff; border-bottom: 1px solid var(--border); }
.map-toolbar .button, .map-toolbar .btn { min-height: 42px; }
.map-view:fullscreen { width: 100vw; height: 100vh; border-radius: 0; border: 0; background: #fff; }
.map-view:fullscreen .application-map-iframe { height: calc(100vh - 71px); min-height: 0; }
.map-view:-webkit-full-screen { width: 100vw; height: 100vh; border-radius: 0; border: 0; background: #fff; }
.map-view:-webkit-full-screen .application-map-iframe { height: calc(100vh - 71px); min-height: 0; }
.application-map-iframe { display: block; width: 100%; min-height: 680px; border: 0; background: #fff; }
.applications-list-layout { display: none; grid-template-columns: minmax(0,1fr) 320px; gap: 42px; align-items: start; }
.applications-list-layout.active { display: grid; }
.applications-filter-sidebar { position: sticky; top: 120px; align-self: start; }
.filter-sidebar-card { padding: 24px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(2,86,164,.08); }
.filter-sidebar-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.filter-sidebar-header h3 { margin: 0; color: var(--brand-blue-dark); font-size: 1.25rem; line-height: 1.2; font-weight: 600; }
.filter-reset-button { border: 0; background: transparent; color: var(--brand-blue); padding: 2px 0 0; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.filter-reset-button:hover, .filter-reset-button:focus { color: var(--brand-blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.filter-sidebar-field { display: grid; gap: 7px; margin-bottom: 16px; }
.filter-sidebar-field label { color: var(--brand-text); font-size: .95rem; font-weight: 600; }
.filter-sidebar-note { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border); color: var(--brand-muted); font-size: .9rem; line-height: 1.4; }
.filter-sidebar-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.filter-search-btn { width: 100%; padding: 11px 18px; background: var(--brand-blue-dark); border: 2px solid var(--brand-blue-dark); color: #fff; border-radius: var(--radius); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; -webkit-font-smoothing: antialiased; }
.filter-search-btn:hover { background: var(--brand-highlight-green); border-color: var(--brand-highlight-green); color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.filter-search-btn:active { opacity: 0.74; transform: scale(0.975); box-shadow: inset 0 2px 6px rgba(0,0,0,0.18); }
.filter-search-btn:focus, .filter-search-btn:focus-visible { background: var(--brand-highlight-green); border-color: var(--brand-highlight-green); color: #fff; outline: 3px solid var(--brand-blue-dark); outline-offset: 3px; box-shadow: none; }
.filter-reset-all-btn { width: 100%; padding: 11px 18px; background: transparent; color: var(--brand-blue); border: 2px solid var(--brand-blue); border-radius: var(--radius); font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.filter-reset-all-btn:hover { background: var(--brand-light); color: var(--brand-blue); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
.filter-reset-all-btn:active { opacity: 0.74; transform: scale(0.975); box-shadow: inset 0 2px 6px rgba(0,0,0,0.18); }
.filter-reset-all-btn:focus, .filter-reset-all-btn:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; box-shadow: none; }
.application-list { display: grid; gap: 16px; }
.ward-list-heading {
margin: 18px 0 4px; padding: 16px 18px;
background: #f5f8fb; border-left: 6px solid var(--brand-blue);
border-radius: var(--radius); color: var(--brand-blue-dark); font-size: 1.35rem; line-height: 1.15; font-weight: 600;
}
.ward-list-heading:first-child { margin-top: 0; }
.application-card {
display: grid; grid-template-columns: minmax(0,1fr) auto;
gap: 18px; align-items: start; padding: 22px;
border: 1px solid var(--border); border-radius: var(--radius);
background: #fff; box-shadow: 0 4px 16px rgba(2,86,164,.06);
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.application-card:hover, .application-card:focus-within { transform: translateY(-2px); border-color: var(--brand-blue); box-shadow: 0 10px 24px rgba(2,86,164,.12); }
.application-card h3 { margin: 0 0 8px; color: var(--brand-blue-dark); font-size: 1.25rem; line-height: 1.2; font-weight: 600; }
.application-summary { margin: 0; color: var(--brand-muted); }
.meta-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; padding: 6px 9px; background: #f2f2f2; color: var(--brand-blue-dark); border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; }
.chip.ward { background: var(--brand-light); color: var(--brand-blue-dark); }
.chip.status { background: var(--secondary-green-light); color: var(--secondary-green-dark); }
.application-action { align-self: center; white-space: nowrap; }
.application-filter-empty { display: none; padding: 24px; border: 1px dashed var(--border); border-radius: var(--radius); background: #fff; color: var(--brand-muted); }
.application-filter-empty.active { display: block; }
.process-section { padding: 56px 0; background: #f2f2f2; }
.process-section h2 { margin: 0 0 24px; color: var(--brand-blue-dark); font-size: clamp(1.65rem, 2.6vw, 2.25rem); font-weight: 600; }
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.process-card { padding: 22px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(2,86,164,.06); }
.process-card strong { display: block; margin-bottom: 8px; color: var(--brand-blue-dark); font-size: 1.08rem; font-weight: 600; }
.process-card span { display: block; color: var(--brand-muted); }
@media (max-width: 980px) {
.applications-list-layout { grid-template-columns: 1fr; }
.applications-filter-sidebar { position: static; }
.process-grid { grid-template-columns: 1fr; }
.results-header { align-items: flex-start; flex-direction: column; }
.application-card { grid-template-columns: 1fr; }
.application-action { align-self: start; }
}
@media (max-width: 760px) {
.application-map-iframe { min-height: 520px; }
.application-action.button, .application-action.btn { width: 100%; }
}
/* ================================================================
TYPICAL APPLICATIONS PAGE (development application detail)
================================================================ */
.detail-shell { padding: 48px 0 72px; background: #fff; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 42px; align-items: start; }
.detail-content { min-width: 0; }
.intro-copy { margin: 0 0 28px; color: var(--brand-text); font-size: 1.14rem; }
.content-section { padding: 30px 0; }
.content-section:first-child { padding-top: 0; }
.content-section h2 { margin: 0 0 16px; color: var(--brand-blue-dark); font-size: clamp(1.55rem, 2.4vw, 2rem); line-height: 1.15; font-weight: 600; }
.content-section p { margin: 0 0 16px; color: var(--brand-text); }
.content-section ul { margin: 0 0 16px 1.25rem; padding: 0; }
.content-section li { margin-bottom: 8px; }
.map-image { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: var(--radius); margin: 18px 0 0; }
.document-list { display: grid; gap: 8px; margin: 0 0 0 1.25rem; }
.sidebar { position: sticky; top: 120px; align-self: start; display: grid; gap: 20px; }
/* Scoped list pattern for sidebar cards on this page */
.detail-shell .sidebar-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.detail-shell .sidebar-card li { border-top: 1px solid var(--border); }
.detail-shell .sidebar-card li:first-child { border-top: 0; }
.detail-shell .sidebar-card li a { display: block; padding: 11px 0; color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.detail-shell .sidebar-card li a:hover, .detail-shell .sidebar-card li a:focus { color: var(--brand-blue-dark); text-decoration: underline; text-underline-offset: 3px; }
.label-row { display: grid; gap: 4px; padding: 11px 0; border-top: 1px solid var(--border); }
.label-row:first-of-type { border-top: 0; }
.label-row strong { color: var(--brand-blue-dark); font-weight: 600; }
.label-row span { color: var(--brand-muted); }
@media (max-width: 980px) {
.detail-layout { grid-template-columns: 1fr; }
.sidebar { position: static;}
}
@media (max-width: 760px) {
.detail-shell { padding: 34px 0 58px; }
}
/* ================================================================
TYPICAL EVENT DETAILS PAGE
================================================================ */
.event-hero {
background: linear-gradient(135deg, #fff 0%, #f1f3f5 100%);
border-bottom: 1px solid var(--border);
padding: 46px 0 40px;
}
.event-hero h1 {
max-width: 1040px; margin: 0;
color: var(--brand-blue-dark);
font-size: clamp(2.25rem, 4vw, 3.6rem);
line-height: 1.05; letter-spacing: -.045em; font-weight: 600;
}
.event-meta-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; color: var(--brand-muted); font-weight: 400; }
.event-category-tag {
display: inline-flex; align-items: center; min-height: 28px; padding: 0 11px;
border-radius: 999px; background: var(--event-community); color: #fff;
font-size: .94rem; font-weight: 600;
}
.event-feature-image {
display: block; width: 100%; max-height: 450px; height: auto; object-fit: cover;
margin: 0 0 28px; border-radius: var(--radius);
border: 1px solid var(--border); box-shadow: 0 6px 18px rgba(2,86,164,.08);
}
.event-feature-image-wrap { margin: 0 0 28px; }
.event-feature-image-wrap .event-feature-image { margin-bottom: 0; }
.event-feature-image-note { margin: 8px 0 0; color: var(--brand-muted); font-size: .92rem; font-weight: 400; }
.event-shell { padding: 42px 0 72px; background: #fff; }
.event-layout { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 38px; align-items: start; }
.event-main { min-width: 0; }
.event-intro-card {
padding: 28px; margin-bottom: 28px; background: #fff;
border: 1px solid var(--border); border-left: 6px solid var(--event-community);
border-radius: var(--radius); box-shadow: 0 6px 18px rgba(2,86,164,.08);
}
.event-intro-card p { margin: 0; color: var(--brand-text); font-weight: 400; }
.event-content-section { padding: 30px 0; border-top: 1px solid var(--border); }
.event-content-section:first-of-type { border-top: 0; padding-top: 0; }
.event-content-section h2 { margin: 0 0 14px; color: var(--brand-blue-dark); font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.15; font-weight: 600; }
.event-content-section h3 { margin: 22px 0 8px; color: var(--brand-blue-dark); font-size: 1.1rem; line-height: 1.2; font-weight: 600; }
.event-content-section p { margin: 0 0 14px; color: var(--brand-text); font-weight: 400; }
.event-content-section li { font-size: 1.16rem; line-height: 1.62; }
.event-content-section a { color: var(--brand-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.event-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; margin: 22px 0 0; }
.event-detail-card { padding: 20px; background: var(--soft); border: 1px solid var(--border); border-radius: var(--radius); }
.event-detail-card h3 { margin: 0 0 8px; color: var(--brand-blue-dark); font-size: 1.06rem; }
.event-detail-card p { margin: 0; color: var(--brand-text); font-weight: 400; }
.event-detail-card a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.event-detail-card a:hover, .event-detail-card a:focus { text-decoration: underline; text-underline-offset: 3px; }
.event-actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 24px 0 0; }
.event-actions-top { margin: 0 0 24px; }
.event-sidebar { position: sticky; top: 120px; align-self: start; display: grid; gap: 18px; }
.event-sidebar .event-actions { display: grid; margin: 0; }
.event-sidebar .event-actions .button,
.event-sidebar .event-actions .btn { width: 100%; max-width: 100%; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px; box-sizing: border-box; white-space: normal; height: auto; text-align: center !important; font-weight: 600 !important; }
.event-sidebar .event-actions .button svg,
.event-sidebar .event-actions .btn svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }
/* Event sidebar card uses header+body pattern (no card-level padding) */
.event-sidebar .sidebar-card { padding: 0; overflow: hidden; }
.event-sidebar .sidebar-card h2 { margin: 0; padding: 20px 22px 0; }
.sidebar-card-body { padding: 18px 22px 22px; }
.event-sidebar .sidebar-card.cu-card .cu-card-body { padding: 10px 22px 22px; }
.contact-card p { margin: 0 0 12px; color: var(--brand-muted); font-weight: 400; }
.contact-card strong { color: var(--brand-text); font-weight: 700; font-size: 1.05rem; }
.contact-card a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.contact-card a:hover, .contact-card a:focus { text-decoration: underline; text-underline-offset: 3px; color: var(--brand-blue-dark); }
.sidebar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sidebar-list li { border-top: 1px solid var(--border); padding: 12px 0; }
.sidebar-list li:first-child { border-top: 0; padding-top: 0; }
.sidebar-label { display: block; margin-bottom: 4px; color: var(--brand-muted); font-size: .92rem; font-weight: 600; }
.sidebar-value { display: block; color: var(--brand-text); font-weight: 400; }
.sidebar-value a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.sidebar-value a:hover, .sidebar-value a:focus { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1050px) {
.event-layout { grid-template-columns: 1fr; }
.event-main { order: 1; }
.event-sidebar { position: static; order: 2; }
.event-details-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
.event-hero { padding: 36px 0 30px; }
.event-shell { padding: 30px 0 58px; }
.event-intro-card { padding: 22px; }
.event-actions { display: grid; }
.event-actions .button, .event-actions .btn { width: 100%; }
.event-content-section li { font-size: 1.1rem; line-height: 1.58; }
}
/* ================================================================
PARKS AND FACILITIES (parks-and-facilities.html)
================================================================ */
.facilities-banner {
background-image: url('../assets/images/parks-facilities-banner.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.facility-tool-section { padding: 48px 0 72px; background: #fff; }
.facilities-map-embed {
border: 1px solid var(--border); border-radius: var(--radius);
overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(2,86,164,.06);
}
.facilities-map-iframe { display: block; width: 100%; min-height: 600px; border: 0; background: #fff; }
@media (max-width: 760px) {
.facilities-map-iframe { min-height: 420px; }
}
/* ================================================================
HIGH CONTRAST OVERRIDES for new page elements
================================================================ */
body.high-contrast .calendar-hero,
body.high-contrast .event-hero,
body.high-contrast .page-hero { background: #fff !important; border-color: #000 !important; }
body.high-contrast .community-event-cta { background: #f0f0f0 !important; border-color: #000 !important; }
body.high-contrast .month-bar,
body.high-contrast .list-month-bar { background: #000 !important; color: #fff !important; }
body.high-contrast .calendar-day { background: #fff !important; border-color: #000 !important; }
body.high-contrast .calendar-day.muted { background: #e8e8e8 !important; }
body.high-contrast .calendar-day.today .day-number { background: #000 !important; color: #fff !important; }
body.high-contrast .event-pill { background: #f0f0f0 !important; color: #000 !important; border-color: #000 !important; }
body.high-contrast .filter-panel,
body.high-contrast .filter-sidebar-card,
body.high-contrast .news-shell .news-card,
body.high-contrast .application-card,
body.high-contrast .process-card,
body.high-contrast .event-intro-card,
body.high-contrast .event-detail-card { background: #fff !important; border-color: #000 !important; box-shadow: none !important; }
body.high-contrast .news-category,
body.high-contrast .post-tag,
body.high-contrast .event-category-tag { background: #000 !important; color: #fff !important; }
body.high-contrast .subscribe-modal-header { background: #000 !important; }
body.high-contrast .subscribe-modal-backdrop { background: rgba(0,0,0,.75) !important; }
body.high-contrast .subscribe-modal { background: #fff !important; border: 2px solid #000 !important; }
body.high-contrast .btn-primary,
body.high-contrast .sidebar-button { background: #000 !important; border-color: #000 !important; color: #fff !important; }
body.high-contrast .btn-secondary,
body.high-contrast .btn-s,
body.high-contrast a.btn-s,
body.high-contrast button.btn-s {
background: #ffffff !important;
border-color: #000000 !important;
color: #000000 !important;
}
body.high-contrast .btn-secondary:hover,
body.high-contrast .btn-secondary:focus,
body.high-contrast .btn-s:hover,
body.high-contrast .btn-s:focus,
body.high-contrast a.btn-s:hover,
body.high-contrast a.btn-s:focus,
body.high-contrast button.btn-s:hover,
body.high-contrast button.btn-s:focus {
background: #000000 !important;
color: #ffffff !important;
}
body.high-contrast a.btn-p:not(.button):not(.section-link):not(.social-link) {
background: var(--brand-blue-dark) !important;
color: #ffffff !important;
border-color: var(--brand-blue-dark) !important;
}
body.high-contrast a.btn-p:not(.button):not(.section-link):not(.social-link):hover,
body.high-contrast a.btn-p:not(.button):not(.section-link):not(.social-link):focus {
background: #000000 !important;
border-color: #000000 !important;
}
body.high-contrast .facilities-banner,
body.high-contrast .planning-banner { background-color: #001f3f !important; background-image: none !important; }
/* ================================================================
UNIFIED INPUT / SELECT — all new page shells
Scope covers every text-like field on all 7 new pages.
Uses container selectors so no input type is missed.
================================================================ */
/* ---- Base appearance ---- */
.news-shell input:not([type="checkbox"]):not([type="radio"]),
.news-shell select,
.application-shell input:not([type="checkbox"]):not([type="radio"]),
.application-shell select,
.post-shell input:not([type="checkbox"]):not([type="radio"]),
.post-shell select,
.subscribe-modal-backdrop input:not([type="checkbox"]):not([type="radio"]),
.subscribe-modal-backdrop select,
.content-shell input:not([type="checkbox"]):not([type="radio"]),
.content-shell select {
display: block !important;
width: 100% !important;
min-height: 48px !important;
padding: 12px 16px !important;
border: 2px solid #d0dae3 !important;
border-radius: var(--radius) !important;
background: #fff !important;
color: var(--brand-text) !important;
font: inherit !important;
font-size: 1rem !important;
line-height: 1.4 !important;
transition: border-color .18s ease, box-shadow .18s ease !important;
-webkit-appearance: none !important;
appearance: none !important;
}
/* Restore native date picker (overrides appearance:none above) */
.news-shell input[type="date"],
.application-shell input[type="date"],
.content-shell input[type="date"] {
-webkit-appearance: auto !important;
appearance: auto !important;
cursor: pointer !important;
}
/* Hide the native calendar icon but stretch it across the full field
so clicking anywhere on the input still opens the picker */
.news-shell .input-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.application-shell .input-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator,
.content-shell .input-icon-wrap input[type="date"]::-webkit-calendar-picker-indicator {
display: none !important;
}
/* Search icon padding override */
.news-shell .input-icon-wrap input.has-icon,
.application-shell .input-icon-wrap input.has-icon,
.content-shell .input-icon-wrap input.has-icon {
padding-left: 36px !important;
}
/* Remove webkit search clear button */
.news-shell input[type="search"]::-webkit-search-cancel-button,
.application-shell input[type="search"]::-webkit-search-cancel-button,
.content-shell input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none !important;
}
/* ---- Focus / active — blue ring matching site search bar ---- */
.news-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.news-shell select:focus,
.application-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.application-shell select:focus,
.post-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.post-shell select:focus,
.subscribe-modal-backdrop input:not([type="checkbox"]):not([type="radio"]):focus,
.subscribe-modal-backdrop select:focus,
.content-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.content-shell select:focus {
border-color: #000000 !important;
outline: none !important;
}
/* ---- Select: custom chevron arrow (all contexts) ---- */
.news-shell select,
.application-shell select,
.post-shell select,
.subscribe-modal-backdrop select,
.content-shell select {
padding-right: 46px !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231d2b36' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 16px 16px !important;
cursor: pointer !important;
}
/* Hide duplicate chevron arrow span inside calculator page */
.content-shell select + span {
display: none !important;
}
/* Ensure the hidden select inside custom dropdown containers is never displayed */
.custom-select-container select {
display: none !important;
}
/* Ensure the custom dropdown panel floats above page body content but stays behind the sticky header (z-index 100) */
.custom-select-dropdown {
z-index: 90 !important;
}
/* Custom select trigger styling to match unified input/select in Burn Permit */
.custom-select-trigger {
min-height: 48px !important;
border: 2px solid #d0dae3 !important;
border-radius: var(--radius) !important;
padding: 12px 16px !important;
font-size: 1rem !important;
color: var(--brand-text) !important;
box-sizing: border-box !important;
background-color: #fff !important;
}
.custom-select-trigger span {
font-size: 1rem !important;
}
.custom-select-trigger svg {
transition: transform 0.2s ease !important;
}
.custom-select-trigger.open svg {
transform: rotate(180deg) !important;
}
.date-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
/* ================================================================
PAGINATION ITEMS — .pg-item boxed button pattern
================================================================ */
.pg-item {
display: inline-flex; align-items: center; justify-content: center;
min-width: 40px; height: 40px; padding: 0 14px;
border: 1.5px solid var(--border); border-radius: var(--radius);
font-size: .94rem; font-weight: 600; color: var(--brand-blue);
text-decoration: none; background: #fff;
transition: background .15s, color .15s, border-color .15s;
cursor: pointer; user-select: none;
}
.pg-item:hover { background: var(--brand-light); border-color: var(--brand-blue); }
.pg-item.active, .pg-item[aria-current="page"] { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.pg-item.disabled, .pg-item[aria-disabled="true"] { color: #767676; border-color: #e5e7eb; cursor: not-allowed; pointer-events: none; background: #fff; }
body.high-contrast .pg-item { color: #003b78 !important; border-color: #000 !important; }
body.high-contrast .pg-item:hover, body.high-contrast .pg-item:focus { background: #000 !important; color: #fff !important; }
body.high-contrast .pg-item.active, body.high-contrast .pg-item[aria-current="page"] { background: #001f3f !important; color: #ffffff !important; border-color: #001f3f !important; }
body.high-contrast .pg-item.disabled, body.high-contrast .pg-item[aria-disabled="true"] { color: #767676 !important; border-color: #767676 !important; }
/* ================================================================
POLICIES PAGE
================================================================ */
.policies-shell { padding: 48px 0 72px; background: #fff; }
.policies-toolbar {
display: flex; flex-direction: column; align-items: flex-start;
gap: 16px; margin-bottom: 28px; padding-bottom: 22px;
border-bottom: 1px solid var(--border);
}
.policies-help { margin: 0; color: var(--brand-muted); font-size: .95rem; line-height: 1.6; }
.policies-help a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.policies-help a:hover, .policies-help a:focus { text-decoration: underline; text-underline-offset: 3px; }
.policies-search-wrap {
display: grid; grid-template-columns: 1fr auto;
gap: 12px; align-items: center; width: 100%; max-width: 600px;
}
.policies-search-wrap input {
width: 100%; border: 1px solid var(--border); border-radius: var(--radius);
padding: 15px 16px; font-size: 1rem; font-family: inherit; color: var(--brand-text);
}
.policies-search-wrap input:focus { outline: 2px solid var(--brand-blue); outline-offset: 0; border-color: var(--brand-blue); }
.policies-results-heading { font-weight: 700; color: var(--brand-blue-dark); margin: 0 0 20px; }
.policy-list { display: grid; gap: 16px; margin-bottom: 32px; }
.policy-card {
border: 1px solid var(--border); border-left: 4px solid var(--brand-blue);
border-radius: var(--radius); padding: 22px 24px 20px;
background: #fff; transition: box-shadow .18s;
}
.policy-card:hover { box-shadow: 0 4px 16px rgba(2,86,164,.1); }
.policy-card-title { font-size: 1.15rem; font-weight: 700; color: var(--brand-blue-dark); margin: 0 0 14px; }
.policy-meta { display: grid; grid-template-columns: 90px 1fr; gap: 0; margin: 0 0 18px; }
.policy-meta-row { display: contents; }
.policy-meta dt { font-size: .9rem; font-weight: 700; color: var(--brand-muted); padding: 4px 12px 4px 0; align-self: baseline; }
.policy-meta dd { font-size: .9rem; color: var(--brand-text); padding: 4px 0; margin: 0; align-self: baseline; line-height: 1.55; }
.policy-meta dd a { color: var(--brand-blue); font-weight: 600; text-decoration: none; }
.policy-meta dd a:hover, .policy-meta dd a:focus { text-decoration: underline; text-underline-offset: 3px; }
.policy-meta-summary dt, .policy-meta-summary dd { padding-top: 6px; }
.policy-card-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.policies-pagination-bar,
.news-pagination-bar {
padding-top: 24px; border-top: 1px solid var(--border);
display: flex; justify-content: flex-end;
margin-top: 32px;
}
@media (max-width: 720px) {
.policies-search-wrap { max-width: 100%; }
}
@media (max-width: 680px) {
.policy-meta { grid-template-columns: 80px 1fr; }
}
/* ══════════════════════════════════════════════════════════════════════
SITE MAP PAGE
══════════════════════════════════════════════════════════════════════ */
.sitemap-hero { background: linear-gradient(135deg, #fff 0%, #eee 100%); border-bottom: 1px solid var(--border); padding: 54px 0 48px; }
.sitemap-hero h1, .sitemap-hero-row h1 { margin: 0 0 16px; color: var(--brand-blue-dark); font-size: clamp(2.3rem, 4vw, 3.65rem); line-height: 1.05; letter-spacing: -.045em; }
.sitemap-hero p { max-width: 920px; margin: 0; color: var(--brand-muted); }
.sitemap-shell { padding: 42px 0 72px; background: #fff; }
.sitemap-note { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-bottom: 34px; padding: 22px 24px; background: #fff; border: 1px solid var(--border); border-left: 6px solid var(--brand-blue); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(2,86,164,.08); }
.sitemap-note p { margin: 0; color: var(--brand-muted); font-weight: 700; }
.sitemap-note a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 16px; background: var(--brand-blue); color: #fff; border-radius: calc(var(--radius) - 2px); font-weight: 900; white-space: nowrap; }
.sitemap-note a:hover, .sitemap-note a:focus { background: var(--brand-blue-dark); text-decoration: underline; text-underline-offset: 4px; }
.bucket-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; align-items: start; }
.bucket { background: transparent; border: 0; min-width: 0; }
.bucket-header { padding: 0 0 8px; margin-bottom: 14px; }
.bucket-header h2 { margin: 0; color: var(--brand-blue-dark); font-size: 1.55rem; line-height: 1.1; letter-spacing: -.025em; }
.section-card { padding: 0 0 26px; border: 0; }
.section-card h3 { background: transparent; color: var(--brand-blue-dark); padding: 0 0 10px; margin: 0 0 14px; border-radius: 0; border-bottom: 2px solid var(--brand-blue-dark); font-weight: 600; font-size: 1.18rem; line-height: 1.2; }
.section-card ul, .section-card li, .section-card li.subpage-accordion > ul { list-style: none; }
.section-card ul { padding-left: 0; margin: 0; }
.section-card li { margin: 8px 0; color: var(--brand-muted); }
.section-card li li { margin: 6px 0; font-size: .94rem; }
.section-card li.subpage-accordion > ul { padding-left: 14px; }
.section-card li.subpage-accordion > ul li { padding-left: 0; }
.section-card a { color: var(--brand-muted); font-weight: 500; text-decoration: none; overflow-wrap: anywhere; }
.section-card a:hover, .section-card a:focus { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 3px; }
.sitemap-footer-note { margin-top: 34px; padding: 18px 22px; background: #f5f7fa; border: 1px solid var(--border); border-radius: var(--radius); color: var(--brand-muted); font-size: .95rem; }
.section-card li.subpage-accordion { margin: 10px 0; }
.section-card li.subpage-accordion > a { display: inline; }
.sitemap-subpage-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; margin-left: 7px; border: 1px solid var(--border); border-radius: 50%; background: #fff; color: var(--brand-blue); font: inherit; font-size: 0.9em; line-height: 1; font-weight: 600; cursor: pointer; vertical-align: middle; }
.sitemap-subpage-toggle:hover, .sitemap-subpage-toggle:focus { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }
.sitemap-subpage-toggle .accordion-icon { display: block; transform: translateY(-0.05em); }
/* Cap sitemap toggle button size in large and x-large modes to prevent line wrapping */
body.text-large .sitemap-subpage-toggle,
body.text-xlarge .sitemap-subpage-toggle {
font-size: 18px !important;
width: 34px !important;
height: 34px !important;
}
body.text-large .sitemap-subpage-toggle .accordion-icon,
body.text-xlarge .sitemap-subpage-toggle .accordion-icon {
transform: translateY(-1px) !important;
}
.section-card li.subpage-accordion > ul { display: none; margin: 9px 0 0; padding: 10px 12px 10px 14px; background: #f5f7fa; border-left: 3px solid var(--brand-blue); border-radius: 0 calc(var(--radius) - 4px) calc(var(--radius) - 4px) 0; }
.section-card li.subpage-accordion.open > ul { display: block; }
.sitemap-hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.sitemap-hero-row h1 { margin: 0; }
.sitemap-controls { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 24px; }
.sitemap-hero-row .sitemap-controls { align-items: center; margin: 0 0 8px; flex: 0 0 auto; }
.sitemap-control-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 16px; border: 2px solid var(--brand-blue-dark); border-radius: calc(var(--radius) - 2px); background: var(--brand-blue-dark); color: #fff; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.sitemap-control-button:hover { background: var(--brand-highlight-green); border-color: var(--brand-highlight-green); color: #fff; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.sitemap-control-button:active { opacity: 0.74; transform: scale(0.975); box-shadow: inset 0 2px 6px rgba(0,0,0,0.18); }
.sitemap-control-button:focus, .sitemap-control-button:focus-visible { outline: 3px solid var(--brand-blue-dark); outline-offset: 3px; background: var(--brand-highlight-green); border-color: var(--brand-highlight-green); }
.sitemap-control-button-secondary { background: #fff; color: var(--brand-blue-dark); }
.sitemap-control-button-secondary:hover { background: var(--brand-light); color: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
.sitemap-control-button-secondary:focus, .sitemap-control-button-secondary:focus-visible { background: #fff; color: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
.sitemap-control-button span { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; font-size: 1.4rem; font-weight: 500; transform: translateY(-1px); }
body.high-contrast .sitemap-subpage-toggle,
body.high-contrast .section-card li.subpage-accordion > ul { background: #fff; color: #000; border-color: #000; }
body.high-contrast .sitemap-subpage-toggle:hover,
body.high-contrast .sitemap-subpage-toggle:focus { background: #000; color: #fff; }
body.high-contrast .sitemap-control-button { background: #000; color: #fff; border-color: #000; }
body.high-contrast .sitemap-control-button-secondary { background: #fff; color: #000; border-color: #000; }
@media (max-width: 1300px) { .bucket-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
.sitemap-note { grid-template-columns: 1fr; }
.bucket-grid { grid-template-columns: 1fr; }
.section-card { padding-bottom: 24px; }
.sitemap-hero-row { display: block; }
.sitemap-hero-row .sitemap-controls { justify-content: flex-start; margin-top: 20px; }
}
@media (max-width: 680px) {
.sitemap-controls { flex-direction: column; }
.sitemap-control-button { width: 100%; }
}
/* ===== Agendas & Minutes – page-scoped styles ===== */
/* Two-column layout mirrors the FOI page pattern */
.agendas-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 40px;
align-items: start;
}
/* Sticky sidebar column */
.agendas-sidebar {
position: sticky;
top: 150px;
display: grid;
gap: 20px;
}
/* Calendar embed container */
.council-calendar-embed {
margin-top: 28px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: #f0f3f6;
overflow: hidden;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
}
.council-calendar-embed iframe {
width: 100%;
height: 520px;
border: 0;
display: block;
}
/* Legend list */
.council-legend-list {
list-style: none;
margin: 14px 0 0;
padding: 0;
display: grid;
gap: 0;
}
.council-legend-item {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 0;
border-top: 1px solid var(--border);
}
.council-legend-item:first-child {
border-top: 0;
padding-top: 0;
}
.council-legend-item:last-child {
padding-bottom: 0;
}
/* Dot swatch – square with slight rounding, matching calendar pill aesthetic */
.legend-dot {
width: 22px;
height: 22px;
border-radius: 4px;
flex-shrink: 0;
}
.legend-dot-meetings { background: #0256a4; }
.legend-dot-committees { background: #236b18; }
.legend-dot-public { background: #c0002a; }
.legend-dot-advisory { background: #c75f00; }
.legend-dot-library { background: #7a4ab0; }
/* Sidebar card overrides specific to this page */
.agendas-sidebar .sidebar-card {
padding: 24px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 6px 18px rgba(2, 86, 164, 0.08);
}
.agendas-sidebar .sidebar-card h2 {
margin: 0 0 10px;
color: var(--brand-blue-dark);
font-size: 1.25rem;
font-weight: 600 !important;
}
.agendas-sidebar .sidebar-card p {
margin: 0 0 14px;
color: var(--brand-muted);
font-weight: 400 !important;
}
.agendas-sidebar .sidebar-card p:last-child {
margin-bottom: 0;
}
.agendas-sidebar .sidebar-card a {
color: var(--brand-blue);
text-decoration: underline;
text-underline-offset: 3px;
transition: color .18s ease, font-weight .18s ease;
}
.agendas-sidebar .sidebar-card a:hover,
.agendas-sidebar .sidebar-card a:focus {
color: var(--brand-blue-dark);
}
.agendas-sidebar .sidebar-card .btn {
text-decoration: none;
}
.agendas-sidebar .sidebar-card .btn:hover,
.agendas-sidebar .sidebar-card .btn:focus {
text-decoration: underline;
text-underline-offset: 3px;
}
@media (max-width: 980px) {
.agendas-layout { grid-template-columns: 1fr; }
.agendas-sidebar { position: static; }
}
@media (max-width: 900px) {
.agendas-sidebar { top: 100px; }
}
@media (max-width: 900px) {
.agendas-sidebar { top: 80px; }
}
/* Burn Permit Page overrides */
.content-main {
min-height: 650px;
}
.right-sidebar {
position: sticky !important;
top: 120px !important;
align-self: start !important;
display: grid !important;
gap: 20px !important;
}
@media (max-width: 980px) {
.content-main {
min-height: 0;
}
.right-sidebar {
position: static !important;
}
}
.form-step {
display: none;
}
.form-step.active {
display: block;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px 24px;
margin-bottom: 32px;
}
@media (max-width: 650px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
/* Focus styles for forms */
input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
input[type="checkbox"]:focus {
border-color: var(--brand-blue) !important;
outline: none;
}
/* Custom Autocomplete dropdown styles */
.custom-select-trigger {
transition: all 0.2s ease;
}
.custom-select-trigger:hover {
border-color: #a0aec0 !important;
}
.custom-select-trigger:focus {
border-color: var(--brand-blue) !important;
outline: none;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.2) !important;
}
.custom-select-trigger.open {
border-color: #000000 !important;
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.dropdown-option {
color: var(--brand-text);
}
.dropdown-option:hover,
.dropdown-option.active {
background: var(--brand-blue) !important;
color: #fff !important;
}
.dropdown-option:focus {
background: var(--brand-blue) !important;
color: #fff !important;
outline: none;
}
/* --- Diwali Slider --- */
.diwali-slider-wrap {
position: relative;
width: 100%;
max-width: 1200px;
margin: 40px 0;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
}
.diwali-slider {
display: flex;
transition: transform 0.4s ease-in-out;
}
.diwali-slide {
flex: 0 0 100%;
width: 100%;
}
.diwali-slide img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
.slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.92);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
color: var(--brand-blue);
transition: background 0.15s, box-shadow 0.15s;
padding: 0;
}
.slider-btn:hover, .slider-btn:active {
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
color: var(--brand-blue);
}
.slider-btn svg {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.slider-btn.prev {
left: 16px;
}
.slider-btn.next {
right: 16px;
}
.slider-dots {
position: absolute;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
border: none;
cursor: pointer;
padding: 0;
transition: background 0.2s;
}
.slider-dot.active {
background: #fff;
}
/* Accessibility states */
body.text-large,
body.text-large input,
body.text-large button,
body.text-large select,
body.text-large textarea{font-size:110%}
body.text-xlarge,
body.text-xlarge input,
body.text-xlarge button,
body.text-xlarge select,
body.text-xlarge textarea{font-size:122%}
/* ================================================================
PARKS & FACILITIES CARDS & UTILITIES (parks-and-facilities.html)
================================================================ */
.facility-card {
display: grid;
grid-template-columns: 240px minmax(0, 1fr);
gap: 24px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 6px 18px rgba(2, 86, 164, 0.06);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
margin-bottom: 22px;
}
.facility-card:hover, .facility-card:focus-within {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(2, 86, 164, 0.12);
border-color: var(--brand-blue);
}
.facility-card-image {
position: relative;
width: 100%;
height: 100%;
min-height: 200px;
background: linear-gradient(135deg, #dce8f4, #f5f7fa);
overflow: hidden;
}
.facility-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.facility-card-image-placeholder {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background: #e9f1f7;
color: #4b607a;
font-weight: 700;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 16px;
text-align: center;
box-sizing: border-box;
}
.facility-card-content {
padding: 24px 24px 22px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.facility-card-title {
font-size: 1.35rem;
font-weight: 700;
color: var(--brand-blue-dark);
margin: 0 0 12px 0;
}
.facility-card-title a {
color: inherit;
text-decoration: none;
}
.facility-card-title a:hover, .facility-card-title a:focus {
color: var(--brand-blue);
text-decoration: underline;
text-underline-offset: 3px;
}
.facility-meta {
display: grid;
grid-template-columns: 100px 1fr;
gap: 0;
margin: 0 0 18px 0;
}
.facility-meta-row {
display: contents;
}
.facility-meta dt {
font-size: 0.9rem;
font-weight: 700;
color: var(--brand-muted);
padding: 5px 12px 5px 0;
align-self: baseline;
}
.facility-meta dd {
font-size: 0.9rem;
color: var(--brand-text);
padding: 5px 0;
margin: 0;
align-self: baseline;
line-height: 1.55;
}
.facility-card-actions {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: auto;
}
/* Status Indicators */
.status-indicator {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 600;
font-size: 0.9rem;
}
.status-indicator::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background-color: currentColor;
}
.status-indicator.open {
color: #2b8a3e; /* Forest Green */
}
.status-indicator.limited {
color: #e67e22; /* Orange */
}
.status-indicator.closed {
color: #c92a2a; /* Red */
}
/* Chips/Amenities */
.chip-group {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.chip-sm {
display: inline-flex;
align-items: center;
font-size: 0.78rem;
font-weight: 600;
padding: 2px 10px;
border-radius: 999px;
background: #55a508;
color: #ffffff;
border: 1.5px solid #55a508;
}
/* Responsive Facility Card */
@media (max-width: 850px) {
.facility-card {
grid-template-columns: 180px minmax(0, 1fr);
}
}
@media (max-width: 600px) {
.facility-card {
grid-template-columns: 1fr;
gap: 0;
}
.facility-card-image {
height: 160px;
min-height: auto;
}
.facility-card-content {
padding: 20px;
}
}
.facilities-map-wrapper {
position: relative;
margin-bottom: 28px;
}
.map-fullscreen-btn {
position: absolute;
top: 16px;
right: 16px;
z-index: 5;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 8px 16px;
font-weight: 600;
color: var(--brand-blue-dark);
cursor: pointer;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.88rem;
transition: background 0.15s, transform 0.1s;
}
.map-fullscreen-btn:hover {
background: var(--brand-light);
}
.map-fullscreen-btn:active {
transform: scale(0.97);
}
/* Custom Multi-Select Dropdown with Search & Checkboxes */
.custom-multiselect {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.multiselect-trigger {
width: 100%;
padding: 12px 16px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
font-size: 0.95rem;
font-family: inherit;
color: var(--brand-text);
text-align: left;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
box-sizing: border-box;
transition: border-color 0.15s, box-shadow 0.15s;
}
.multiselect-trigger:focus, .multiselect-trigger.active {
outline: none;
border-color: var(--brand-blue);
box-shadow: 0 0 0 3px rgba(2, 86, 164, 0.15);
}
.multiselect-trigger svg {
width: 14px;
height: 14px;
stroke: var(--brand-muted);
fill: none;
stroke-width: 2.5;
transition: transform 0.2s ease;
margin-left: 8px;
flex-shrink: 0;
}
.multiselect-trigger.active svg {
transform: rotate(180deg);
}
.multiselect-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
z-index: 100;
margin-top: 6px;
display: none;
opacity: 0;
transform: translateY(-8px);
transition: opacity 0.2s ease, transform 0.2s ease, display 0.2s allow-discrete;
}
.multiselect-dropdown.show {
display: block;
opacity: 1;
transform: translateY(0);
}
.multiselect-search-wrap {
padding: 10px;
border-bottom: 1px solid var(--border);
position: relative;
}
.multiselect-search-wrap .input-icon-wrap {
width: 100%;
}
.multiselect-search-wrap .input-icon-wrap input.has-icon {
width: 100% !important;
min-height: 40px !important;
padding: 8px 12px 8px 42px !important;
font-size: 0.9rem !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
box-sizing: border-box !important;
background: #fff !important;
color: var(--brand-text) !important;
line-height: 1.4 !important;
}
.multiselect-search-wrap .input-icon-wrap input.has-icon:focus {
outline: none !important;
border-color: var(--brand-blue) !important;
box-shadow: 0 0 0 3px rgba(2, 86, 164, 0.15) !important;
}
.multiselect-search-wrap .input-icon-wrap .input-icon {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 16px !important;
height: 16px !important;
stroke: var(--brand-muted) !important;
fill: none !important;
stroke-width: 2.2 !important;
pointer-events: none !important;
}
.multiselect-options {
max-height: 220px;
overflow-y: auto;
padding: 8px 0 !important;
}
.multiselect-option {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 16px !important;
cursor: pointer;
transition: background 0.1s;
font-size: 0.9rem;
color: var(--brand-text);
user-select: none;
}
.multiselect-option:hover {
background: var(--brand-light);
}
.multiselect-option input {
accent-color: var(--brand-blue);
cursor: pointer !important;
flex-shrink: 0;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
align-self: center !important;
vertical-align: middle !important;
}
.multiselect-option span {
align-self: center !important;
vertical-align: middle !important;
line-height: 1.2 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 !important;
margin: 0 !important;
}
.multiselect-option.hidden {
display: none;
}
.multiselect-selected-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 20px);
}
/* ============================================================
CKEditor Accordion — TRUE final fix.
Root cause found: the ckeditor_accordion module's own JS strips
the "ckeditor-accordion" class off each at runtime and
replaces it with "styled" (data-once="ckeditorAccordions").
Every earlier CSS attempt targeted "dl.ckeditor-accordion", which
NEVER matches the live DOM - so none of those rules ever fired.
This version scopes purely by the .ckeditor-accordion-container
ancestor, not by the dl's own class, so it actually matches.
============================================================ */
.ckeditor-accordion-container {
margin: 0 0 32px !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
overflow: hidden !important;
background: transparent !important;
box-shadow: none !important;
}
.ckeditor-accordion-container dl {
margin: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
position: static !important;
}
.ckeditor-accordion-container dl + dl {
border-top: 1px solid var(--border) !important;
}
/* dt (header row) - tight height, no extra padding from module defaults */
.ckeditor-accordion-container dl > dt {
margin: 0 !important;
padding: 0 !important;
line-height: 1.4 !important;
min-height: 0 !important;
background: #fff !important;
box-sizing: border-box !important;
}
.ckeditor-accordion-container dl > dt a,
.ckeditor-accordion-container dl > dt .ckeditor-accordion-toggler {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
width: 100% !important;
padding: 15px 18px !important;
margin: 0 !important;
box-sizing: border-box !important;
color: #111 !important;
text-decoration: none !important;
font-weight: 700 !important;
font-size: 1rem !important;
line-height: 1.4 !important;
cursor: pointer !important;
}
.ckeditor-accordion-container dl > dt a > *,
.ckeditor-accordion-container dl > dt .ckeditor-accordion-toggler > * {
padding: 0 !important;
margin: 0 !important;
line-height: inherit !important;
font-weight: 700 !important;
}
.ckeditor-accordion-container dl > dt a:hover,
.ckeditor-accordion-container dl > dt a:focus,
.ckeditor-accordion-container dl > dt .ckeditor-accordion-toggler:hover,
.ckeditor-accordion-container dl > dt .ckeditor-accordion-toggler:focus {
background: #f5f7fa !important;
color: #000000 !important;
}
.ckeditor-accordion-container dl > dt.acc-open a,
.ckeditor-accordion-container dl > dt.acc-open .ckeditor-accordion-toggler {
background: #edf2f8 !important;
color: #000000 !important;
}
.ckeditor-accordion-container dl > dt a::after,
.ckeditor-accordion-container dl > dt .ckeditor-accordion-toggler::after {
content: '+';
font-size: 22px;
font-weight: 400;
line-height: 1;
flex-shrink: 0;
color: var(--brand-blue);
min-width: 20px;
text-align: center;
}
.ckeditor-accordion-container dl > dt.acc-open a::after,
.ckeditor-accordion-container dl > dt.acc-open .ckeditor-accordion-toggler::after {
content: '\2212';
}
/* dd (body/panel) - override the module's inline display:none only
when the module itself marks the item open (via its own JS toggling
a class/attribute - do not force display here or it'll break the
collapse/expand behavior) */
.ckeditor-accordion-container dl > dd {
margin: 0 !important;
padding: 16px !important;
border-top: 1px solid var(--border) !important;
border-top: 1px solid var(--border) !important;
background: #fff !important;
color: var(--brand-text);
font-size: 1rem;
line-height: 1.7;
box-sizing: border-box !important;
}
.ckeditor-accordion-container dl > dd ul { margin: 0 0 14px; padding-left: 22px; }
.ckeditor-accordion-container dl > dd p { margin: 0 0 14px; }
.ckeditor-accordion-container dl > dd a {
color: var(--brand-blue) !important;
text-underline-offset: 3px;
font-weight: 400 !important;
display: inline !important;
width: auto !important;
padding: 0 !important;
}
.ckeditor-accordion-container dl > dd a:hover,
.ckeditor-accordion-container dl > dd a:focus {
color: var(--brand-blue-dark) !important;
}
body.high-contrast .ckeditor-accordion-container {
border-color: #000 !important;
}
body.high-contrast .ckeditor-accordion-container dl + dl,
body.high-contrast .ckeditor-accordion-container dl > dd {
border-color: #000 !important;
}
.highlight-info{
background:var(--brand-light);
border:1px solid #c5d8ef;
border-radius:var(--radius);
padding:18px 22px;
margin-bottom:24px;
}
.highlight-warning{
background:#fff4e5;
border:1px solid #f0c987;
border-radius:var(--radius);
padding:18px 22px;
margin-bottom:24px;
}
.highlight-success{
background:var(--brand-green-light);
border:1px solid #c8dcb0;
border-radius:var(--radius);
padding:18px 22px;
margin-bottom:24px;
}
.highlight-info h2,.highlight-warning h2,.highlight-success h2{
margin:0 0 10px;
color:var(--brand-blue-dark);
font-size:1.25rem;
}
.highlight-info p,.highlight-warning p,.highlight-success p{
margin:0 0 10px;
}
.highlight-info .btn,.highlight-warning .btn,.highlight-success .btn{
margin-top:8px;
}
/* Auto-style ANY table inside the page content editor field — no Style click needed */
.content-main table{width:100%;border-collapse:collapse;font-size:.94rem;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:24px}
.content-main table tr:first-child td,
.content-main table thead th{text-align:left;padding:13px 18px;font-size:.94rem;font-weight:700;color:#fff;background:#014785;border-bottom:1px solid var(--border)}
.content-main table tr:not(:first-child) td{padding:13px 18px;border-bottom:1px solid var(--border);color:var(--brand-text)}
.content-main table tbody tr:nth-child(odd):not(:first-child){background:#fff}
.content-main table tbody tr:nth-child(even):not(:first-child){background:#eaf3fb}
.content-main table tr:last-child td{border-bottom:none}