/*
Theme Name: w32026
Theme URI: https://w3nerds.com
Description: Theme designed for client
Version: 1.1
Author: w3 Global Solutions
Author URI: https://w3nerds.com
Tags: HTML5, CSS3
License: MIT
License URI: http://opensource.org/licenses/mit-license.php
*/
/*------------------------------------*\
BASE — variables, reset, base typography
\*------------------------------------*/
*,
*:after,
*:before {
box-sizing:border-box;
text-rendering:optimizeLegibility;
margin:0;
}
:root {
--color-1:#0a0a0a; /* darkest bg - header */
--color-2:#111113; /* dark bg */
--color-3:#17181b; /* card bg */
--color-4:#1f2024; /* light-dark bg */
--color-5:#ffffff; /* text primary */
--color-6:#a8acb3; /* text secondary */
--color-7:#6c7079; /* text muted */
--color-8:#e63946; /* accent red */
--color-9:#ff4757; /* accent hover */
--color-10:#26272b; /* border */
--color-11:#34363b; /* border light */
--color-12:rgba(230,57,70,0.45); /* accent glow */
--greyZero:#f5f5f5;
--greyOne:#e5e5e5;
--greyTwo:#bfbfbf;
--greyThree:#757575;
--greyFour:#444444;
--greyFive:#151515;
--font-title: 'title', 'opensans-extrabold', Times, serif;
--font-sm-title: 'cta', 'opensans-regular', Times, serif;
--font-text-strong: 'bold', 'opensans-bold', "Arial Black", sans-serif;
--font-text-regular: 'regular', 'opensans-regular', Arial, sans-serif;
--font-text-italic: 'italic', 'opensans-italic', "Arial Italic", sans-serif;
--font-nav: 'cta', 'opensans-bold', Arial, serif;
--font-cta: 'cta', 'opensans-bold', Arial, serif;
}
.screen-reader-text {
overflow: hidden;
position:absolute;
width:1px;
height:1px;
clip:rect(1px,1px,1px,1px);
}
.skip-to-content-link {
background: #fff;
color:#000;
height: 30px;
left: 50%;
padding: 4px;
position: absolute;
transform: translateY(-100%);
transition: transform 0.3s;
}
.skip-to-content-link:focus {
transform: translateY(0%);
}
#loader {
left: 50%;
top: 50%;
position: fixed;
transform: translate(-50%, -50%);
border: 12px solid #f3f3f3; /* Light grey */
border-top: 12px solid #3498db; /* Blue */
border-radius: 50%;
width: 90px;
height: 90px;
animation: spin 2s linear infinite;
z-index:999;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
p#noscript {
background-color:red;
color:white;
text-align:center;
width:100%;
}
a#w3 {
background-color:transparent;
background: transparent url(img/w3nerds-logo-web.png) no-repeat;
background-position: 10% 50%;
color:#151515;
display: inline-block;
font-family: 'opensans-regular', sans-serif;
font-size: 13px;
line-height: 22px;
margin: 10px;
padding: 10px;
text-align: right;
transition-duration: 0.8s;
text-decoration: none;
width: 180px;
height: 90px;
}
a#w3:hover {
background-color: #fff;
box-shadow: 15px 15px 0px -10px #4285f4, -15px -15px 0px -10px #fcc934, 5px -5px #ff5252, -5px 5px #34a853;
color:#151515;
}
.success {
padding:12px 20px;
text-align: left;
color:#fff;
font-weight:bold;
font-size:16px;
background:green;
position: relative;
z-index: 9999;
}
.success a {
color:#ccc;
}
.error, .form-error-container {
padding:12px 20px;
text-align: left;
font-size: 16px;
color:#fff;
background:red;
position: relative;
z-index: 9999;
}
.error span,
.error a {
vertical-align: middle !important;
}
.inputError {
background-color:rgb(249,213,212) !important;
}
html {
font-size:14px;
}
body {
font-family: var(--font-text-regular), 'opensans-regular', serif;
font-size:14px;
line-height:22px;
color: var(--color-6);
background-color: var(--color-1);
text-align:center;
}
img {
vertical-align:bottom;
width: auto;
height: auto;
max-width: 100%;}
a {
color:var(--greyOne);
font-family: var(--font-text-strong), 'opensans-bold', serif;
text-decoration:underline;
text-decoration-color:var(--color-8);
cursor: pointer;
transition-duration:0.4s;
}
a:hover {
color:var(--color-8);
text-decoration-color: var(--greyZero);
}
a:focus {
outline:#2f2f2f;
}
a:hover,
a:active {
outline:0;
}
button {
cursor: pointer;
}
input:focus {
outline:0;
border:1px solid var(--color-4);
}
textarea {
outline-color:var(--color-4);
}
p {
text-align: left;
font-size: 18px;
line-height: 26px;
position: relative;
font-family: var(--font-text-regular), 'opensans-regular', serif;
}
ul,ol {
font-size:14px;
line-height: 14px;
padding: 20px 0 20px 20px;
}
ul li, ol ul li { /*NEW*/
text-align: left;
list-style: none;
background-image: url('uploads/favicon/favicon-32x32.png');
background-repeat: no-repeat;
background-size: 12px;
background-position: 5px 12px;
font-size: 16px;
line-height: 24px;
padding: 5px 0 10px 30px;
}
ol li, ul ol li { /*NEW*/
list-style: auto;
background-image: none;
text-align: left;
font-size: 16px;
line-height: 24px;
padding: 5px 0 15px 5px;
}
ol li::marker, ul ol li::marker {
font-family: var(--font-text-strong), 'opensans-bold', serif;
}
ul li h4, ol li h4, ul ol li h4 {
padding-bottom: 4px;
}
h1, h2.xlg-title, h3.xlg-title, h4.xlg-title, h5.xlg-title, .xlg-title {
color: var(--greyFour);
display: block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size:36px;
font-weight: normal;
line-height:46px;
margin: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
vertical-align: middle;
}
h2, h1.lg-title, h3.lg-title, h4.lg-title, h5.lg-title, .lg-title {
color: var(--color-5);
display: inline-block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size:28px;
font-weight: normal;
line-height:34px;
margin-bottom: 20px;
padding-bottom: 10px;
text-align: left;
text-transform: uppercase;
vertical-align: middle;
}
h3, h1.med-title, h2.med-title, h4.med-title, h5.med-title, .med-title {
border-bottom: 2px solid var(--color-4);
color: var(--greyFour);
display: inline-block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size:20px;
font-weight: normal;
line-height:28px;
margin-bottom: 14px;
padding-bottom: 10px;
text-align: left;
text-transform: uppercase;
vertical-align: middle;
}
h4, h1.sm-title, h2.sm-title, h3.sm-title, h5.sm-title, .sm-title {
color: var(--greyFour);
display: inline-block;
font-family: var(--font-sm-title), 'opensans-bold', sans-serif;
font-size: 18px;
font-variant: small-caps;
font-weight: normal;
line-height: 24px;
padding-bottom: 10px;
text-align: left;
vertical-align: middle;
}
h5, h1.xsm-title, h2.xsm-title, h3.xsm-title, h4.xsm-title, .xsm-title {
color: var(--greyFour);
display: inline-block;
font-family: var(--font-sm-title), 'opensans-bold', sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 22px;
padding-bottom: 10px;
text-align: left;
vertical-align: middle;
}
strong, b, table th {
font-weight: normal;
font-family: var(--font-text-strong), 'opensans-bold', serif;
}
svg {
vertical-align: middle;
width: 25px;
height: 25px;
fill:#000;
}
i {
font-style: normal;
font-family: var(--font-text-italic), 'opensans-italic', sans-serif;
}
blockquote {
padding: 10px 20px;
margin: 15px 0;
font-size: 17.5px;
border-left: 5px solid var(--color-4);
}
section { /*contains a wrapper and std-padding*/
background-position: center;
background-size:cover;
width:100%;
padding: 75px 20px;
position: relative;
}
section.no-padding {
padding: 0;
}
section.large {
max-width: 1920px;
margin: 0 auto;
}
section.landing { /*styling for landing sections*/
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
body.terms-of-service section:first-of-type,
body.privacy-policy section:first-of-type {
background-image: none;
}
.wrapper {
max-width:1280px;
width:100%;
margin:0 auto;
}
.wrapper.large {max-width: 1920px;}
.wrapper.small {max-width: 1000px;}
.wrapper.xsmall {max-width: 750px;}
.std-padding {padding: 75px 20px;}
.less-padding {padding: 40px 15px;}
.grey {background-color: var(--greyZero);}
.object-fit {width: 100%;height: 200px;object-fit: cover;}
.left {text-align: left;}
.center {text-align: center;}
.right{text-align: right;}
.align-left {
float:left;
padding:0;
margin: 0 12px 2px 0;
}
.align-right {
float:right;
padding:0;
margin:0 0 2px 12px;
}
@media only screen and (max-width:900px) {
.stopFloatOnTablet {
float: none;
display: block;
margin: 12px auto;
}
}
@media only screen and (max-width:640px) {
.stopFloatOnMobile {
float: none;
display: block;
margin: 12px auto;
}
}
@media only screen and (max-width:399px) {
.align-left,
.align-right {
float:none;
display: block;
margin: 12px auto;
}
}
ul.list {
overflow: hidden;
list-style: none;
text-align: left;
padding: 15px 10px;
margin: 0 0 0 40px;
}
ul.list li {
float: left;
display: inline;
width:33%;
background-repeat: no-repeat;
background-size: 30px;
background-position: 5px 50%;
font-size: 18px;
line-height: 24px;
padding: 15px 10px 15px 50px;
}
ul.list.one-col li {
width: 100%;
}
@media only screen and (max-width:900px) {
ul.list {
margin: 0;
padding: 10px 5px;
}
ul.list li {
width: 50%;
}
}
@media only screen and (max-width:640px) {
ul.list {
padding: 10px 0px;
}
ul.list li {
font-size: 16px;
background-size: 20px;
padding: 10px 10px 10px 30px;
}
}
@media only screen and (max-width:390px) {
ul.list li {
width: 100%;
}
}
iframe {
display: block;
width:100%;
margin: 0 auto;
border:0;
}
.parallax {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
/*------------------------------------*\
STRUCTURE
\*------------------------------------*/
table, table tr.even, table tr.alt, table tr:nth-of-type(even) {background: none;border:0;}
div.table,div.table-noresponse{display:table;width:100%}div.table div.tableRow,div.table-noresponse div.tableRow-noresponse{display:table-row;width:100%}div.table div.tableRow div.tableCell,div.table-noresponse div.tableRow-noresponse div.tableCell-noresponse{display:table-cell;vertical-align:middle}
.small-1{width:8.33333%}.small-2{width:16.66667%}.small-3{width:25%}.small-4{width:33.33333%}.small-5{width:41.66667%}.small-6{width:50%}.small-7{width:58.33333%}.small-8{width:66.66667%}.small-9{width:75%}.small-10{width:83.33333%}.small-11{width:91.66667%}.small-12{width:100%}
@media only screen and (min-width: 640px){.medium-1{width:8.33333%}.medium-2{width:16.66667%}.medium-3{width:25%}.medium-4{width:33.33333%}.medium-5{width:41.66667%}.medium-6{width:50%}.medium-7{width:58.33333%}.medium-8{width:66.66667%}.medium-9{width:75%}.medium-10{width:83.33333%}.medium-11{width:91.66667%}.medium-12{width:100%}}
@media only screen and (min-width: 1024px){.large-1{width:8.33333%}.large-2{width:16.66667%}.large-3{width:25%}.large-4{width:33.33333%}.large-5{width:41.66667%}.large-6{width:50%}.large-7{width:58.33333%}.large-8{width:66.66667%}.large-9{width:75%}.large-10{width:83.33333%}.large-11{width:91.66667%}.large-12{width:100%}}
.flex-container{/*https://www.w3schools.com/css/css3_flexbox.asp*/display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.flex-container.centerItems{align-items:center}.flex-container.col{flex-direction:column}.flex-container .flex-block{display:block;width:25%;transition-duration:0.8s}.flex-container .flex-block.one-eighth{width:12.5%}.flex-container .flex-block.one-third{width:33.33%}.flex-container .flex-block.one-half{width:50%}.flex-container .flex-block.two-thirds{width:66.66%}.flex-container .flex-block.three-quarters{width:75%}.flex-container .flex-block.full{width:100%}.flex-container .flex-block.noResponse{width:25%!important}.flex-container .flex-block.one-eighth.noResponse{width:12.5%!important}.flex-container .flex-block.one-third.noResponse{width:33.33%!important}.flex-container .flex-block.one-half.noResponse{width:50%!important}.flex-container .flex-block.two-thirds.noResponse{width:66.66%!important}.flex-container .flex-block.three-quarters.noResponse{width:75%!important}.flex-container .flex-block.full.noResponse{width:100%!important}@media only screen and (max-width:900px){.flex-container.reverseOnTablet{flex-direction:column-reverse}.flex-container .flex-block.one-half,.flex-container .flex-block.two-thirds,.flex-container .flex-block.three-quarters,.flex-container .flex-block.fullOnTablet,.flex-container .flex-block.one-third.fullOnTablet{width:100%}.flex-container .flex-block,.flex-container .flex-block.one-third,.flex-container .flex-block.one-half.lateResponse{width:50%}.flex-container .flex-block.one-eighth{width:25%}}@media screen and (max-width:640px){.flex-container.reverseOnMobile{flex-direction:column-reverse}.flex-container .flex-block,.flex-container .flex-block.one-third,.flex-container .flex-block.two-thirds,.flex-container .flex-block.one-half.lateResponse{width:100%}.flex-container .flex-block.one-eighth,.flex-container .flex-block.lateResponse,.flex-container .flex-block.one-third.lateResponse{width:50%}.flex-container .flex-block.one-eighth.lateResponse{width:25%}}@media screen and (max-width:390px){.flex-container .flex-block.one-eighth,.flex-container .flex-block.lateResponse,.flex-container .flex-block.one-eighth.lateResponse,.flex-container .flex-block.one-third.lateResponse{width:100%}}
/*------------------------------------*\
HEADER
\*------------------------------------*/
/* announcement bar */
.announcement-bar {
background-color: var(--color-4);
}
.announcement-bar p {
padding: 10px;
text-align: center;
color: var(--color-5);
}
.announcement-bar a {
font-family: var(--font-text-strong), 'opensans-bold', serif;
text-decoration: underline;
transition-duration: 0.3s;
color: var(--color-5);
}
.announcement-bar a:hover {
color: var(--color-6);
}
/* top bar — address / meeting cadence / email / social */
header .top {
background-color: var(--color-1);
border-bottom: 1px solid var(--color-10);
font-size: 13px;
color: var(--color-6);
}
header .top .top-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 24px;
max-width: 1400px;
margin: 0 auto;
}
header .top .top-info {
display: flex;
gap: 28px;
align-items: center;
flex-wrap: wrap;
}
header .top .top-info .address,
header .top .top-info .meeting-cadence,
header .top .top-info .email {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-text-regular), 'opensans-regular', serif;
font-size: 13px;
color: var(--color-6);
text-decoration: none;
}
header .top .top-info svg {
width: 14px;
height: 14px;
fill: var(--color-8);
flex-shrink: 0;
}
header .top .social-links {
display: flex;
gap: 12px;
}
header .top .social-links a {
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--color-10);
border-radius: 50%;
color: var(--color-6);
text-decoration: none;
transition-duration: 0.3s;
}
header .top .social-links a svg {
width: 12px;
height: 12px;
fill: var(--color-6);
transition-duration: 0.3s;
}
header .top .social-links a:hover {
background-color: var(--color-8);
border-color: var(--color-8);
}
header .top .social-links a:hover svg {
fill: var(--color-5);
}
header {
display: contents;
text-align: center;
background-color: var(--color-1);
position: relative;
z-index: 100;
}
header #mobileGrippy {
display: none;
}
header .mid {
position: sticky;
top: 0;
z-index: 100;
background-color: var(--color-1);
width: 100%;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
header .mid.is-stuck {
border-bottom: 1px solid var(--color-10);
}
header .mid .mid-inner {
max-width: 1400px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px 24px;
gap: 30px;
}
.mid a.logo {
display: flex;
align-items: center;
gap: 14px;
text-decoration: none;
font-family: var(--font-title), 'opensans-bold', sans-serif;
flex-shrink: 0;
}
.mid a.logo img {
width: 64px;
height: 64px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 4px 14px rgba(230,57,70,.35));
}
.mid a.logo .logo-text {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 18px;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
line-height: 1.1;
color: var(--color-5);
text-align: left;
}
.mid a.logo .logo-text small {
display: block;
font-size: 11px;
color: var(--color-8);
font-weight: normal;
letter-spacing: 3px;
font-family: var(--font-cta), 'opensans-bold', sans-serif;
}
/* nav */
header .mid nav {
display: flex;
align-items: center;
}
header .mid nav ul {
list-style: none;
display: flex;
flex-direction: row;
gap: 4px;
margin: 0;
padding: 0;
}
header .mid nav ul li {
position: relative;
display: inline-block;
vertical-align: middle;
background-image: none;
margin: 0;
padding: 0;
}
header .mid nav ul li a {
display: block;
font-family: var(--font-nav), 'opensans-bold', serif;
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
color: var(--color-5);
padding: 10px 16px;
position: relative;
transition-duration: 0.35s;
}
header .mid nav ul li a::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: var(--color-8);
transition-duration: 0.35s;
}
header .mid nav ul li a:hover {
color: var(--color-8);
}
header .mid nav ul li a:hover::after,
header .mid nav ul li a.current-page::after {
width: 24px;
}
header .mid nav ul li a.current-page {
color: var(--color-8);
}
/* nav CTA pill */
header .mid nav ul li a.cta-nav {
background-color: var(--color-8);
color: var(--color-5);
padding: 10px 22px;
margin-left: 6px;
border-radius: 2px;
}
header .mid nav ul li a.cta-nav::after {
display: none;
}
header .mid nav ul li a.cta-nav:hover {
background-color: var(--color-9);
color: var(--color-5);
box-shadow: 0 8px 20px var(--color-12);
}
/* Show the dropdown menu on hover */
header .mid nav ul li:hover ul.children {display: block;}
/* dropdown children */
header .mid nav ul li ul.children {
display: none;
position: absolute;
top: 44px;
left: 0;
width: 220px;
height: auto;
text-align: left;
background-color: var(--color-2);
z-index: 100;
padding: 0;
margin: 0;
border: 1px solid var(--color-10);
box-shadow: 0 14px 30px rgba(0,0,0,0.5);
}
header .mid nav ul li ul.children li {
display: block;
text-align: left;
padding: 0;
margin: 0;
}
header .mid nav ul li ul.children li a {
display: block;
width: 100%;
padding: 12px 16px;
color: var(--color-6);
font-size: 13px;
letter-spacing: 1px;
margin: 0;
border-bottom: 1px solid var(--color-10);
}
header .mid nav ul li ul.children li a::after {
display: none;
}
header .mid nav ul li ul.children li a:hover {
color: var(--color-5);
background-color: var(--color-8);
}
/* emergency call CTA */
header .mid .emergency-call {
display: flex;
align-items: center;
gap: 12px;
padding-left: 20px;
border-left: 1px solid var(--color-10);
flex-shrink: 0;
}
header .mid .emergency-call .emergency-call-icon {
width: 42px;
height: 42px;
background-color: var(--color-8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
animation: ecPulse 2s infinite;
}
header .mid .emergency-call .emergency-call-icon svg {
width: 18px;
height: 18px;
fill: var(--color-5);
}
@keyframes ecPulse {
0%, 100% { box-shadow: 0 0 0 0 var(--color-12); }
50% { box-shadow: 0 0 0 12px transparent; }
}
header .mid .emergency-call .emergency-call-text small {
display: block;
font-family: var(--font-text-regular), 'opensans-regular', serif;
font-size: 11px;
color: var(--color-7);
text-transform: uppercase;
letter-spacing: 1px;
}
header .mid .emergency-call .emergency-call-text strong {
display: block;
font-family: var(--font-cta), 'opensans-bold', serif;
font-size: 18px;
color: var(--color-5);
letter-spacing: 0.5px;
}
header nav ul li a span {
display: inline-block;
transition-duration: 0.8s;
border-bottom: 3px solid transparent;
}
header nav ul li a img {
display: inline-block;
vertical-align: middle;
height: 15px;
width: 15px;
}
/* mobile toggle */
header #mobileGrippy {
display: none;
background: none;
border: none;
color: var(--color-5);
font-size: 24px;
cursor: pointer;
padding: 8px;
vertical-align: middle;
}
/* responsive — header */
@media only screen and (max-width:800px) {
header .mid nav {
display: none;
}
header #mobileGrippy {
text-align: center;
font-size: 30px;
cursor: pointer;
display: inline-block;
vertical-align: middle;
padding: 12px 6px;
color: #fff;
position: absolute;
top: 10px;
right: 10px;
}
header .mid nav.open {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--color-2);
border-top: 1px solid var(--color-10);
padding: 14px;
z-index: 200;
}
header .mid nav.open ul {
flex-direction: column;
width: 100%;
}
header .mid nav.open ul li {
display: block;
width: 100%;
}
header .mid nav.open ul li a {
padding: 14px 16px;
border-bottom: 1px solid var(--color-10);
text-align: left;
letter-spacing: 1px;
}
}
@media only screen and (max-width:640px) {
header .top .top-info .meeting-cadence,
header .top .top-info .email {
display: none;
}
header .mid .emergency-call {
display: none;
}
header .mid {
padding: 12px 16px;
}
.mid a.logo img {
width: 48px;
height: 48px;
}
.mid a.logo .logo-text {
font-size: 15px;
}
header .mid nav {
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--color-2);
border-top: 1px solid var(--color-10);
padding: 14px;
z-index: 200;
}
header .mid nav ul {
flex-direction: column;
width: 100%;
}
header .mid nav ul li {
display: block;
width: 100%;
}
header .mid nav ul li a {
padding: 14px 16px;
border-bottom: 1px solid var(--color-10);
text-align: left;
letter-spacing: 1px;
}
header .mid nav ul li ul.children {
display: block;
position: static;
width: 100%;
box-shadow: none;
border: none;
background-color: transparent;
}
header .mid nav ul li ul.children li a {
padding-left: 32px;
}
header .mid nav > ul > li > a:hover {
color: var(--color-5);
background-color: var(--color-8);
}
header .mid nav ul li a::after,
header .mid nav ul li a:hover::after,
header .mid nav ul li a.current-page::after {
display: none;
}
}
/*------------------------------------*\
GLOBAL — patterns reused across 2+ pages (CTAs, cards, title separators, image frames, etc.)
\*------------------------------------*/
div.content {
background-color: var(--color-1);
max-width: 1920px;
margin: 0 auto;
position: relative;
}
.relative {
position: relative;
}
.cta {
display: inline-block;
background-color: var(--color-5);
border: 1px solid transparent;
/*border-bottom-left-radius: 20px;*/
color: #fff;
font-family: var(--font-cta), 'opensans-bold', serif;
font-size: 16px;
/*letter-spacing: 1px;*/
text-decoration: none;
margin:12px 8px;
padding: 10px 22px;
transition-duration: 0.8s;
/*text-transform: uppercase;*/
vertical-align: middle;
}
.cta:hover {
box-shadow: 0px 0px 5px var(--color-4);
}
.cta.large {
background-position: 95% 50%;
}
.cta.large:hover {
background-position: 130% 50%;
}
.cta.v2 {
background-color: var(--color-4);
color: var(--greyFive);
border-color: transparent;
}
.cta.v2:hover {
box-shadow: 0px 0px 5px var(--color-4);
}
.cta.transparent {
background-color: transparent;
color: var(--color-2);
border-color: var(--color-2);
}
.cta.transparent:hover {
background-color: var(--color-2);
border-color: var(--color-2);
color: #fff;
box-shadow: 0px 0px 5px var(--color-2);
}
.cta.white {
background-color: transparent;
color: #ffffff;
border-color: #ffffff;
}
.cta.white:hover {
background-color: var(--color-2);
box-shadow: 0px 0px 5px var(--color-2);
}
.cta.appt {
background-image: url('uploads/icon-calendar.svg');
background-position: 95% 50%;
}
.cta img {
display:inline-block;
vertical-align: middle;
width:30px;
}
.cta span {
display:inline-block;
vertical-align: middle;
padding:0 0 0 8px;
}
.frame {
border-radius: 4px;
border-top: 4px solid var(--color-2);
border-right: 1px solid var(--color-2);
border-bottom: 4px solid var(--color-4);
border-left: 1px solid var(--color-2);
transition-duration: 0.8s;
}
.frame:hover {
box-shadow: 0px 0px 10px var(--color-4);
}
/*------------------------------------*\
HOME — body.home
\*------------------------------------*/
/* === HERO / LANDING === */
body.home section#home {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background:
linear-gradient(135deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.65) 60%,rgba(230,57,70,.18) 100%);
padding-top: 80px;
overflow: hidden;
}
body.home section#home::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: var(--color-8);
}
/* grid overlay */
.hero-grid {
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);
background-size: 60px 60px;
pointer-events: none;
}
/* two-column layout */
body.home section#home .wrapper {
position: relative;
z-index: 2;
}
.hero-layout {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: 60px;
align-items: center;
padding-bottom: 120px;
}
/* left content */
.hero-content {
max-width: none;
text-align: left;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
background: rgba(230,57,70,0.12);
border: 1px solid rgba(230,57,70,.35);
border-radius: 30px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-8);
margin-bottom: 28px;
}
.hero-badge svg {
width: 11px;
height: 11px;
fill: var(--color-8);
}
body.home section#home h1 {
text-align: left;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 80px;
line-height: .95;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-5);
}
body.home section#home h1 .accent {
color: var(--color-8);
}
body.home section#home p {
font-size: 18px;
max-width: 580px;
margin-bottom: 38px;
color: #cfd1d6;
font-family: var(--font-text-regular), 'opensans-regular', serif;
}
/* hero CTAs */
.hero-actions {
display: flex;
gap: 18px;
flex-wrap: wrap;
}
.hero-actions .cta, .training-actions .cta {
background-color: var(--color-8);
color: var(--color-5);
font-family: var(--font-cta), 'opensans-bold', serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 16px 34px;
border: 2px solid var(--color-8);
border-radius: 2px;
transition-duration: 0.35s;
}
.hero-actions .cta:hover, .training-actions .cta:hover {
background-color: var(--color-9);
border-color: var(--color-9);
transform: translateY(-2px);
box-shadow: 0 12px 30px var(--color-12);
}
.hero-actions .cta.transparent, .training-actions .cta.transparent {
background-color: transparent;
color: var(--color-5);
border-color: rgba(255,255,255,.25);
}
.hero-actions .cta.transparent:hover, .training-actions .cta.transparent:hover {
background-color: var(--color-5);
color: var(--color-1);
border-color: var(--color-5);
}
/* right image */
.hero-image {
position: relative;
}
.hero-image-frame {
position: relative;
border: 3px solid var(--color-8);
border-radius: 4px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,.65);
transform: translateY(-10px);
}
.hero-image-frame::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg,transparent 60%,rgba(230,57,70,.18) 100%);
pointer-events: none;
z-index: 1;
}
.hero-image-frame img {
width: 100%;
height: 560px;
object-fit: cover;
display: block;
}
/* stats bar — bottom right */
.hero-stats {
position: absolute;
right: 0;
bottom: 0;
z-index: 3;
display: flex;
gap: 0;
}
.hero-stat {
padding: 30px 40px;
background: rgba(20,20,22,.85);
backdrop-filter: blur(8px);
border-left: 1px solid var(--color-10);
min-width: 180px;
text-align: center;
}
.hero-stat:first-child {
border-left: none;
background: var(--color-8);
}
.hero-stat-num {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 38px;
font-weight: normal;
color: var(--color-5);
line-height: 1;
}
.hero-stat-label {
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,.85);
margin-top: 6px;
}
/* === ABOUT SECTION === */
body.home section#about {
background-color: var(--color-2);
padding: 100px 20px;
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 60px;
align-items: center;
}
/* about image */
.about-image {
position: relative;
}
.about-image::after {
content: "";
position: absolute;
inset: 20px -20px -20px 20px;
border: 3px solid var(--color-8);
border-radius: 4px;
z-index: 0;
pointer-events: none;
}
.about-mosaic {
position: relative;
z-index: 1;
display: block;
height: 620px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.about-mosaic img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 3px;
transition: transform .5s cubic-bezier(.4,0,.2,1), filter .35s;
filter: saturate(1.05);
}
.about-mosaic img:hover {
transform: scale(1.04);
filter: saturate(1.15) brightness(1.05);
}
/* about badge overlay */
.about-badge {
position: absolute;
left: -30px;
bottom: 30px;
z-index: 2;
background: var(--color-8);
padding: 24px 28px;
display: flex;
align-items: center;
gap: 18px;
box-shadow: 0 20px 50px var(--color-12);
}
.about-badge svg {
width: 38px;
height: 38px;
fill: var(--color-5);
}
.about-badge-text strong {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 32px;
display: block;
line-height: 1;
color: var(--color-5);
}
.about-badge-text span {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-5);
}
/* about content */
.about-content {
max-width: none;
}
.section-tag {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
font-weight: normal;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-8);
margin-bottom: 18px;
}
.section-tag::before {
content: "";
width: 30px;
height: 2px;
background: var(--color-8);
display: inline-block;
}
body.home section#about h2 {
text-align: left;
border-bottom: none;
color: var(--color-5);
font-size: 46px;
line-height: 1.15;
letter-spacing: .5px;
margin-bottom: 20px;
padding-bottom: 0;
}
body.home section#services h2 {
text-align: center;
border-bottom: none;
color: var(--color-5);
font-size: 46px;
line-height: 1.15;
letter-spacing: .5px;
margin-bottom: 20px;
padding-bottom: 0;
}
body.home section#about h2 .accent,
body.home section#services h2 .accent {
color: var(--color-8);
}
body.home section#about p {
text-align: left;
font-size: 16px;
line-height: 26px;
color: var(--color-6);
margin-bottom: 14px;
}
/* about features grid */
.about-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 30px;
}
.about-feature {
display: flex;
gap: 14px;
align-items: flex-start;
}
/* about feature icon badge */
.about-feature-icon {
width: 48px;
height: 48px;
flex-shrink: 0;
background-color: var(--color-8);
border-radius: 50%;
color: var(--color-5);
display: flex;
align-items: center;
justify-content: center;
}
.about-feature-icon svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.about-feature h3 {
font-family: var(--font-text-regular), 'opensans-regular', serif;
font-size: 15px;
text-transform: none;
color: var(--color-5);
margin-bottom: 4px;
letter-spacing: 0;
border-bottom: none;
padding-bottom: 0;
font-variant: small-caps;
font-weight: normal;
line-height: 24px;
}
.about-feature p {
font-size: 14px;
margin: 0;
color: var(--color-6);
}
/* signature block */
.signature {
margin-top: 36px;
padding-top: 30px;
border-top: 1px solid var(--color-10);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.signature-text strong {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 20px;
display: block;
color: var(--color-5);
}
.signature-text span {
color: var(--color-6);
font-size: 13px;
}
.signature .cta {
background-color: var(--color-8);
color: var(--color-5);
font-family: var(--font-cta), 'opensans-bold', serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 12px 34px 12px 28px;
border: 2px solid var(--color-8);
border-radius: 2px;
background-image: none;
transition-duration: 0.35s;
}
.signature .cta:hover {
background-color: var(--color-9);
border-color: var(--color-9);
transform: translateY(-2px);
box-shadow: 0 12px 30px var(--color-12);
}
/* === SERVICES SECTION === */
body.home section#services {
background-color: var(--color-1);
padding: 100px 20px;
position: relative;
}
body.home section#services::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg,transparent,var(--color-11),transparent);
}
.section-head {
text-align: center;
max-width: 680px;
margin: 0 auto 70px;
}
.section-head .section-tag {
justify-content: center;
}
.section-head p {
text-align: center;
margin-top: 14px;
margin-bottom: 0;
}
/* services grid */
.services-grid {
display: grid;
grid-template-columns: repeat(4,1fr);
gap: 24px;
}
.service-card {
background: var(--color-3);
border: 1px solid var(--color-10);
padding: 40px 32px;
position: relative;
overflow: hidden;
transition-duration: 0.35s;
}
.service-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 3px;
background: var(--color-8);
transform: scaleX(0);
transform-origin: left;
transition-duration: 0.35s;
}
.service-card:hover {
border-color: var(--color-8);
transform: translateY(-6px);
}
.service-card:hover::before {
transform: scaleX(1);
}
.service-icon {
width: 72px;
height: 72px;
background: rgba(230,57,70,0.12);
color: var(--color-8);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
transition-duration: 0.35s;
clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.service-icon svg {
width: 30px;
height: 30px;
fill: var(--color-8);
}
.service-card:hover .service-icon {
background: var(--color-8);
}
.service-card:hover .service-icon svg {
fill: var(--color-5);
}
.service-num {
position: absolute;
top: 24px;
right: 28px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 46px;
font-weight: normal;
color: var(--color-11);
line-height: 1;
}
.service-card h3 {
text-align: left;
border-bottom: none;
color: var(--color-5);
font-size: 20px;
line-height: 28px;
letter-spacing: 1px;
margin-bottom: 14px;
padding-bottom: 0;
}
.service-card p {
font-size: 15px;
margin-bottom: 22px;
color: var(--color-6);
}
.service-card .more {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-8);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition-duration: 0.35s;
}
.service-card .more svg {
width: 10px;
height: 10px;
fill: var(--color-8);
transition-duration: 0.35s;
}
.service-card .more:hover {
color: var(--color-9);
}
.service-card .more:hover svg {
fill: var(--color-9);
}
/* === STATS STRIP (D1) === */
.stats-strip {
background-color: var(--color-2);
padding: 70px 20px;
border-top: 1px solid var(--color-10);
border-bottom: 1px solid var(--color-10);
}
.stats-head {
text-align: center;
margin-bottom: 40px;
}
.stats-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
font-weight: normal;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-8);
margin-bottom: 12px;
}
.stats-eyebrow::before,
.stats-eyebrow::after {
content: "";
width: 30px;
height: 2px;
background: var(--color-8);
display: inline-block;
}
.stats-head h2 {
text-align: center;
border-bottom: none;
color: var(--color-5);
font-size: 36px;
line-height: 44px;
letter-spacing: .8px;
margin-bottom: 0;
padding-bottom: 0;
}
.stats-head h2 .accent {
color: var(--color-8);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px;
}
.stat-item {
padding: 30px 18px;
text-align: center;
background: var(--color-3);
border: 1px solid var(--color-10);
border-top: 3px solid var(--color-8);
border-radius: 3px;
transition-duration: 0.35s;
}
.stat-item:hover {
transform: translateY(-4px);
border-color: var(--color-8);
}
.stat-num {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 62px;
font-weight: normal;
color: var(--color-8);
line-height: 1;
}
.stat-label {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-6);
margin-top: 10px;
}
/* === CTA SECTION (D2) === */
.cta-section {
background:
linear-gradient(135deg, rgba(230,57,70,.92), rgba(180,30,40,.85));
padding: 80px 20px;
}
.cta-inner {
display: grid;
grid-template-columns: 1.5fr auto;
gap: 40px;
align-items: center;
}
.cta-inner h2 {
text-align: left;
border-bottom: none;
color: var(--color-5);
font-size: 42px;
line-height: 48px;
letter-spacing: .5px;
margin-bottom: 12px;
padding-bottom: 0;
}
.cta-inner p {
text-align: left;
color: rgba(255,255,255,.92);
font-size: 17px;
line-height: 26px;
margin-bottom: 0;
}
.cta-inner .cta.white {
background-color: transparent;
color: var(--color-5);
border-color: var(--color-5);
white-space: nowrap;
}
.cta-inner .cta.white:hover {
background-color: var(--color-5);
color: var(--color-1);
border-color: var(--color-5);
}
/* === ASSOCIATION / DEPARTMENTS SECTION (E) === */
section#association {
background-color: var(--color-2);
padding: 100px 20px;
}
section#association .section-head {
margin-bottom: 50px;
}
.hub-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
}
.hub-card {
position: relative;
display: block;
overflow: hidden;
border: 1px solid var(--color-10);
background: var(--color-3);
min-height: 420px;
transition-duration: 0.35s;
text-decoration: none;
}
.hub-card:hover {
transform: translateY(-8px);
border-color: var(--color-8);
box-shadow: 0 30px 60px rgba(0,0,0,.55);
}
.hub-card .hub-image {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform .8s cubic-bezier(.4,0,.2,1);
z-index: 0;
}
.hub-card:hover .hub-image {
transform: scale(1.08);
}
.hub-card .hub-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg,rgba(10,10,10,.25) 0%,rgba(10,10,10,.92) 65%,rgba(10,10,10,.97) 100%);
z-index: 1;
}
.hub-card .hub-body {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
height: 100%;
min-height: 420px;
padding: 32px 30px;
}
.hub-card .hub-eyebrow {
display: inline-block;
padding: 5px 12px;
background: var(--color-8);
color: var(--color-5);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 18px;
}
.hub-card h3 {
text-align: left;
border-bottom: none;
color: var(--color-5);
font-size: 32px;
line-height: 38px;
letter-spacing: 1px;
margin-bottom: 12px;
padding-bottom: 0;
}
.hub-card p {
font-size: 15px;
color: #d3d5da;
margin-bottom: 22px;
max-width: 90%;
}
.hub-card .hub-cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
font-weight: normal;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-8);
transition-duration: 0.35s;
}
.hub-card .hub-cta svg {
width: 10px;
height: 10px;
fill: var(--color-8);
transition-duration: 0.35s;
}
.hub-card:hover .hub-cta {
gap: 16px;
color: var(--color-9);
}
.hub-card:hover .hub-cta svg {
fill: var(--color-9);
}
.sponsors-bar {
display: flex;
align-items: center;
gap: 24px;
margin-top: 30px;
padding: 22px 28px;
background: var(--color-3);
border: 1px solid var(--color-10);
border-left: 4px solid var(--color-8);
transition-duration: 0.35s;
flex-wrap: wrap;
text-decoration: none;
}
.sponsors-bar:hover {
border-color: var(--color-8);
background: var(--color-4);
transform: translateY(-2px);
box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.sponsor-icon {
width: 48px;
height: 48px;
border-radius: 50%;
flex-shrink: 0;
background: rgba(230,57,70,0.12);
color: var(--color-8);
display: flex;
align-items: center;
justify-content: center;
}
.sponsor-icon svg {
width: 20px;
height: 20px;
fill: var(--color-8);
}
.sb-text {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: column;
}
.sb-eyebrow {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-7);
margin-bottom: 3px;
}
.sb-title {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 20px;
font-weight: normal;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-5);
}
.sb-cta {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
font-weight: normal;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--color-8);
transition-duration: 0.35s;
}
.sb-cta svg {
width: 10px;
height: 10px;
fill: var(--color-8);
transition-duration: 0.35s;
}
.sponsors-bar:hover .sb-cta {
gap: 14px;
color: var(--color-9);
}
.sponsors-bar:hover .sb-cta svg {
fill: var(--color-9);
}
/* === NEWS SECTION (F) === */
section#news {
background-color: var(--color-1);
padding: 100px 20px;
}
/* news layout — 2-col: stream + sidebar */
.news-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 36px;
align-items: start;
}
/* news stream */
.news-stream {
display: flex;
flex-direction: column;
gap: 24px;
}
/* horizontal news card */
.news-stream .news-card {
display: grid;
grid-template-columns: 96px 1fr;
align-items: stretch;
background: var(--color-3);
border: 1px solid var(--color-10);
overflow: hidden;
transition-duration: 0.35s;
}
.news-stream .news-card:hover {
border-color: var(--color-8);
transform: translateY(-4px);
box-shadow: 0 14px 30px rgba(0,0,0,.4);
}
/* date inline — accent block on left */
.news-date-inline {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--color-8);
color: var(--color-5);
text-align: center;
font-family: var(--font-title), 'opensans-bold', sans-serif;
padding: 14px 8px;
}
.news-date-inline strong {
display: block;
font-size: 34px;
line-height: 1;
color: var(--color-5);
}
.news-date-inline span {
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 4px;
color: var(--color-5);
}
/* news card body */
.news-stream .news-body {
padding: 26px 28px;
text-align: left;
}
.news-meta {
display: flex;
gap: 18px;
margin-bottom: 14px;
font-size: 12px;
color: var(--color-7);
text-transform: uppercase;
letter-spacing: 1px;
}
.news-meta svg {
width: 12px;
height: 12px;
fill: var(--color-8);
vertical-align: middle;
margin-right: 6px;
}
.news-meta span {
display: inline-flex;
align-items: center;
}
.news-stream .news-card h3 {
text-align: left;
border-bottom: none;
color: var(--color-5);
font-size: 19px;
line-height: 1.3;
letter-spacing: 1px;
margin-bottom: 14px;
padding-bottom: 0;
}
.news-stream .news-card h3 a {
color: var(--color-5);
text-decoration: none;
transition-duration: 0.35s;
}
.news-stream .news-card h3 a:hover {
color: var(--color-8);
}
.news-stream .news-card p {
font-size: 14px;
line-height: 24px;
color: var(--color-6);
margin-bottom: 18px;
}
.news-stream .news-card .more {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-8);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition-duration: 0.35s;
}
.news-stream .news-card .more svg {
width: 10px;
height: 10px;
fill: var(--color-8);
transition-duration: 0.35s;
}
.news-stream .news-card .more:hover {
color: var(--color-9);
}
.news-stream .news-card .more:hover svg {
fill: var(--color-9);
}
/* news sidebar */
.news-side {
position: sticky;
top: 100px;
display: flex;
flex-direction: column;
gap: 18px;
align-self: start;
}
/* calendar widget */
.news-calendar {
background: var(--color-3);
border: 1px solid var(--color-10);
padding: 26px 24px 22px;
border-radius: 3px;
box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.calendar-head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 18px;
margin-bottom: 18px;
border-bottom: 1px solid var(--color-10);
}
.calendar-head h3 {
text-align: left;
border-bottom: none;
color: var(--color-5);
font-size: 17px;
letter-spacing: 1.5px;
margin-bottom: 0;
padding-bottom: 0;
}
/* event list */
.event-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
max-height: 285px;
overflow-y: auto;
padding-right: 4px;
padding: 0;
margin: 0;
scrollbar-width: thin;
scrollbar-color: var(--color-8) transparent;
}
.event-list::-webkit-scrollbar {
width: 4px;
}
.event-list::-webkit-scrollbar-track {
background: transparent;
}
.event-list::-webkit-scrollbar-thumb {
background: var(--color-8);
border-radius: 2px;
}
.event-list li {
padding: 0;
background-image: none;
}
.event-item {
display: flex;
gap: 14px;
padding: 12px 10px;
border-radius: 3px;
transition-duration: 0.35s;
text-decoration: none;
color: inherit;
}
.event-item:hover {
background: var(--color-4);
transform: translateX(3px);
}
.event-date {
flex-shrink: 0;
width: 52px;
text-align: center;
background: var(--color-8);
color: var(--color-5);
padding: 8px 4px 6px;
border-radius: 3px;
display: flex;
flex-direction: column;
justify-content: center;
}
.event-date .day {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 22px;
line-height: 1;
color: var(--color-5);
}
.event-date .month {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 4px;
color: var(--color-5);
}
.event-info {
flex: 1;
min-width: 0;
}
.event-info h4 {
font-family: var(--font-text-regular), 'opensans-regular', serif;
font-size: 14px;
font-weight: normal;
text-transform: none;
letter-spacing: 0;
color: var(--color-5);
margin-bottom: 5px;
line-height: 1.3;
border-bottom: none;
padding-bottom: 0;
}
.event-meta {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
font-size: 11px;
color: var(--color-7);
}
.event-meta svg {
width: 10px;
height: 10px;
fill: var(--color-8);
vertical-align: middle;
margin-right: 5px;
}
.event-meta span {
display: inline-flex;
align-items: center;
}
.view-all-events {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--color-10);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-8);
text-decoration: none;
transition-duration: 0.35s;
width: 100%;
}
.view-all-events svg {
width: 10px;
height: 10px;
fill: var(--color-8);
transition-duration: 0.35s;
}
.view-all-events:hover {
color: var(--color-9);
transform: translateX(3px);
}
.view-all-events:hover svg {
fill: var(--color-9);
}
/* fire safety / media side tabs */
.fire-safety-tab {
display: flex;
align-items: center;
gap: 16px;
padding: 22px;
background: linear-gradient(135deg, var(--color-3) 0%, rgba(230,57,70,.08) 100%);
border: 1px solid var(--color-10);
border-left: 4px solid var(--color-8);
border-radius: 3px;
transition-duration: 0.35s;
min-height: 120px;
text-decoration: none;
text-align: left;
}
.fire-safety-tab:hover {
transform: translateX(4px);
border-color: var(--color-8);
background: linear-gradient(135deg, var(--color-4) 0%, rgba(230,57,70,.16) 100%);
box-shadow: 0 14px 30px rgba(0,0,0,.4);
}
.fire-safety-tab .fst-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
background: rgba(230,57,70,0.12);
color: var(--color-8);
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px;
transition-duration: 0.35s;
}
.fire-safety-tab .fst-icon svg {
width: 24px;
height: 24px;
fill: var(--color-8);
transition-duration: 0.35s;
}
.fire-safety-tab:hover .fst-icon {
background: var(--color-8);
}
.fire-safety-tab:hover .fst-icon svg {
fill: var(--color-5);
}
.fire-safety-tab .fst-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.fire-safety-tab .fst-eyebrow {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 10px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-7);
margin-bottom: 4px;
}
.fire-safety-tab .fst-title {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 22px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-5);
line-height: 1.1;
}
.fire-safety-tab .fst-arrow {
flex-shrink: 0;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-8);
transition-duration: 0.35s;
}
.fire-safety-tab .fst-arrow svg {
width: 14px;
height: 14px;
fill: var(--color-8);
transition-duration: 0.35s;
}
.fire-safety-tab:hover .fst-arrow {
transform: translateX(4px);
}
.fire-safety-tab:hover .fst-arrow svg {
fill: var(--color-9);
}
/* news section — responsive */
@media only screen and (max-width:900px) {
section#news {
padding: 60px 20px;
}
.news-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.news-side {
position: static;
top: auto;
}
}
@media only screen and (max-width:560px) {
.news-stream .news-card {
grid-template-columns: 1fr;
}
.news-date-inline {
flex-direction: row;
justify-content: center;
gap: 8px;
padding: 10px 8px;
}
.fire-safety-tab {
padding: 16px;
}
}
/*------------------------------------*\
ABOUT — body.about
\*------------------------------------*/
/*testimonial styling*/
#testimonials #google-reviews {
display: flex;
flex-wrap: wrap;
margin: 0
}
#testimonials .review-item {
margin: 8px;
padding: 1.8em;
color: #000;
flex: 1 1 20%;
background-color: var(--greyZero);
border: 1px #bfbfbf solid;
box-shadow: 0 0 15px 2px rgba(170, 170, 170, .2);
transition-duration: .8s
}
#testimonials .review-item:hover {
border: 1px solid var(--color-2)
}
.review-meta,
.review-stars {
text-align: center;
font-size: 115%
}
.review-author {
text-transform: capitalize;
font-size: 28px;
line-height: 40px
}
.review-author img {
max-width: 100px;
vertical-align: middle
}
.review-date {
opacity: .6;
display: block;
font-size: 22px;
line-height: 22px
}
.review-text {
line-height: 1.55;
text-align: left;
max-width: 32em;
margin: auto
}
.review-stars ul {
display: inline-block;
list-style: none;
margin: 0;
padding: 0
}
.review-stars ul li {
background-image: none;
padding: 0;
float: left;
margin-right: 1px;
line-height: 1
}
.review-stars ul li i {
color: #fed03d;
font-size: 48px;
font-style: normal
}
.review-stars ul li i.inactive {
color: #c6c6c6
}
.star:after {
content: "\2605"
}
#map-plug {
display: none
}
@media only screen and (max-width:1440px) {
.hero-content {
margin-left: 20px;
}
.hero-image-frame {
margin-right: 20px;
}
}
@media only screen and (max-width:900px) {
#testimonials .review-item {
flex: 1 1 48%
}
}
@media only screen and (max-width:640px) {
#testimonials .review-item {
flex: 1 1 100%
}
}
/*------------------------------------*\
BLOG — body.blog
(hero uses the shared .breadcrumbs/.interior-landing pattern —
already styled site-wide, no rules needed here for it)
\*------------------------------------*/
/* === LISTING === */
body.blog section#blog-articles {
background-color: transparent;
max-width: 100%;
}
body.blog .post-container {
position: relative;
border: 1px solid var(--color-10);
border-left: 4px solid var(--color-8);
background-color: var(--color-3);
box-shadow: none;
padding: 0;
margin: 0 auto 22px;
max-width: 1100px;
cursor: pointer;
transition: border-color 0.35s ease, transform 0.35s ease, background-color 0.35s ease;
}
body.blog .post-container:hover {
background-color: var(--color-4);
border-left-color: var(--color-9);
transform: translateX(3px);
}
body.blog .post-container .table {
background-color: transparent;
padding: 0;
}
body.blog .post-container .table .tableCell {
vertical-align: top;
}
body.blog .post-container .table > .tableRow > .tableCell:first-child img {
display: block;
width: 100%;
height: 220px;
object-fit: cover;
}
body.blog .post-container .table .post-content {
padding: 22px 26px;
}
body.blog .post-container .table .post-content .post-title {
display: block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
text-transform: uppercase;
font-size: 21px;
line-height: 28px;
letter-spacing: .5px;
padding-bottom: 0;
border-bottom: none;
margin-bottom: 8px;
text-align: left;
}
body.blog .post-container .table .post-content .post-title a {
color: var(--color-5);
text-decoration: none;
transition: color 0.35s ease;
}
body.blog .post-container:hover .table .post-content .post-title a {
color: var(--color-8);
}
/* Stretched-link: the title link expands to cover the whole card, so
clicking anywhere (image, excerpt, whitespace) opens the post. The
image link and "read more" link stay above it (z-index) so their
own hover states still work independently. */
body.blog .post-container .table .post-content .post-title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
body.blog .post-container .table > .tableRow > .tableCell:first-child a,
body.blog .post-container .table .post-content p a {
position: relative;
z-index: 2;
}
body.blog .post-container .table .post-content .post-author {
color: var(--color-7);
text-align: left;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: var(--font-title), 'opensans-bold', sans-serif;
padding: 0;
margin: 0 0 14px;
border-top: none;
border-bottom: none;
}
body.blog .post-container .table .post-content p {
color: var(--color-6);
font-size: 15px;
line-height: 24px;
margin: 0;
}
body.blog .post-container .table .post-content p a {
color: var(--color-8);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-decoration: none;
}
body.blog .post-container .table .post-content p a:hover {
color: var(--color-9);
}
/* Pagination */
body.blog .paging-container {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
flex-wrap: wrap;
margin: 30px auto 0;
max-width: 1100px;
}
body.blog .paging-container a,
body.blog .paging-container span.disabled {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
height: 38px;
padding: 0 10px;
background: var(--color-3);
border: 1px solid var(--color-10);
color: var(--color-6);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
text-decoration: none;
transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}
body.blog .paging-container a:hover {
border-color: var(--color-8);
color: var(--color-5);
}
body.blog .paging-container span.disabled {
background: var(--color-8);
border-color: var(--color-8);
color: var(--color-5);
cursor: default;
}
body.blog .paging-container a.previous-pg,
body.blog .paging-container a.next-pg {
font-size: 18px;
}
/* === POST DETAIL === */
body.blog .blog-detail {
border-top: none;
max-width: 1280px;
margin: 0 auto;
padding: 15px 0;
}
body.blog .blog-detail .tableCell {
vertical-align: top;
}
body.blog .blog-detail .links-block {
padding-left: 30px;
}
body.blog .blog-detail .side-item {
padding: 22px 24px;
margin-bottom: 20px;
background: var(--color-3);
border: 1px solid var(--color-10);
border-left: 3px solid var(--color-8);
}
body.blog .blog-detail .side-item .blog-section-title {
font-weight: normal;
display: block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-variant: normal;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 2px;
line-height: 20px;
color: var(--color-8);
padding-bottom: 12px;
border-bottom: 1px solid var(--color-10);
margin-bottom: 12px;
text-align: left;
}
body.blog .blog-detail .side-item ul {
overflow: visible;
padding: 0;
margin: 0;
list-style: none;
}
body.blog .blog-detail .side-item ul li {
float: none;
display: block;
width: 100%;
background-image: none;
padding: 0;
font-size: 14px;
line-height: 22px;
border-bottom: 1px solid var(--color-10);
}
body.blog .blog-detail .side-item ul li:last-child {
border-bottom: none;
}
body.blog .blog-detail .side-item ul li a.internal-link {
display: block;
padding: 10px 0;
color: var(--color-6);
text-decoration: none;
font-family: var(--font-text-regular), 'opensans-regular', serif;
transition: color 0.35s ease;
}
body.blog .blog-detail .side-item ul li a.internal-link:hover {
color: var(--color-8);
}
/* Post header / meta */
body.blog .blog-detail .right-column .post-title {
font-family: var(--font-title), 'opensans-bold', sans-serif;
text-transform: uppercase;
font-size: 34px;
line-height: 1.15;
letter-spacing: .5px;
color: var(--color-5);
margin-bottom: 12px;
display: block;
}
body.blog .blog-detail .post-author {
color: var(--color-7);
text-align: left;
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: var(--font-title), 'opensans-bold', sans-serif;
padding: 0 0 20px;
margin: 0 0 24px;
border-top: none;
border-bottom: 1px solid var(--color-10);
}
/* Featured image */
body.blog .post-img-container {
margin-bottom: 24px;
}
body.blog .post-img-container .featured-img {
max-width: 100% !important;
height: auto;
border: 1px solid var(--color-10);
}
body.blog .post-img-container .caption-container {
margin-top: 8px;
}
body.blog .post-img-container .caption-container p {
color: var(--color-7);
font-size: 13px;
line-height: 20px;
font-family: var(--font-text-italic), 'opensans-italic', sans-serif;
font-style: normal;
}
/* Post body copy — generic tags from the rich-text editor */
body.blog .blog-detail .right-column p {
color: var(--color-6);
font-size: 16px;
line-height: 27px;
margin-bottom: 16px;
}
body.blog .blog-detail .right-column h2,
body.blog .blog-detail .right-column h3,
body.blog .blog-detail .right-column h4 {
color: var(--color-5);
text-align: left;
}
body.blog .blog-detail .right-column ul,
body.blog .blog-detail .right-column ol {
text-align: left;
color: var(--color-6);
}
body.blog .blog-detail .right-column a {
color: #fff;
text-decoration-color: var(--color-8);
}
body.blog .blog-detail .right-column a:hover {
color: var(--color-9);
}
body.blog .blog-detail .right-column hr {
border: none;
border-top: 1px solid var(--color-10);
margin: 30px 0;
}
/* Prev/next post nav (built as a second nested .table after the
) */
body.blog .blog-detail .right-column > .table a {
color: var(--color-6);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
transition: color 0.35s ease;
}
body.blog .blog-detail .right-column > .table a:hover {
color: var(--color-8);
}
/* Social sharing */
div.social-sharing-buttons {
margin: 0;
padding: 20px 0;
-webkit-font-smoothing: antialiased;
font-size: 12px;
text-align: left;
border-top: 1px solid var(--color-10);
border-bottom: 1px solid var(--color-10);
}
div.social-sharing-buttons div.social-sharing-title {
text-align: left;
color: var(--color-8);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
line-height: 20px;
margin: 0 0 10px;
font-weight: normal;
}
div.social-sharing-buttons a {
padding: 8px 14px;
margin: 0 6px 6px 0;
color: #fff;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: .5px;
border-radius: 2px;
cursor: pointer;
box-shadow: none;
display: inline-block;
text-decoration: none;
transition: filter 0.25s ease;
}
div.social-sharing-buttons a:hover,
div.social-sharing-buttons a:active {
color: white;
filter: brightness(1.15);
}
div.social-sharing-buttons a.twitter {
background-color: #1DA1F2;
color: #14171A;
}
div.social-sharing-buttons a.facebook {
background-color: #3B5997;
}
div.social-sharing-buttons a.pinterest {
background-color: #bd081c;
}
div.social-sharing-buttons a.linkedin {
background-color: #0074A1;
}
/* Responsive: blog */
@media only screen and (max-width:900px) {
/* .right-column and .fullOnTablet (.links-block) both go to width:100%
at this breakpoint (see .flex-container rules), so the two columns
are already stacked here — swap the side gutter for a top margin. */
body.blog .blog-detail .links-block {
padding-left: 0;
margin-top: 20px;
}
body.blog .post-container .table > .tableRow > .tableCell:first-child img {
height: 180px;
}
}
@media only screen and (max-width:640px) {
body.blog .post-container .table .post-content {
padding: 18px 18px;
}
body.blog .blog-detail .right-column .post-title {
font-size: 26px;
}
}
/*------------------------------------*\
CONTACT — body.contact & Forms styling
\*------------------------------------*/
/* === CONTACT GRID (dcfa.org) === */
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
/* Info column */
.contact-info {
display: flex;
flex-direction: column;
gap: 0;
}
/* Info card block */
.contact-info-block {
display: flex;
gap: 20px;
padding: 24px;
background: var(--color-3);
border: 1px solid var(--color-10);
margin-bottom: 18px;
transition: border-color 0.35s ease;
}
.contact-info-block:hover {
border-color: var(--color-8);
}
/* Icon — red hex container (reuses .service-icon hex clip-path) */
.contact-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.contact-icon-hex {
background: var(--color-8);
clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.contact-icon svg {
width: 22px;
height: 22px;
fill: var(--color-5);
}
/* Text block — eyebrow label + value */
.contact-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact-text h2 {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 6px;
color: var(--color-7);
border-bottom: none;
padding-bottom: 0;
font-variant: small-caps;
font-weight: normal;
}
.contact-text p {
color: var(--color-5);
font-size: 16px;
line-height: 24px;
margin: 0;
}
.contact-text a {
color: var(--color-8);
text-decoration: none;
transition: color 0.35s ease;
}
.contact-text a:hover {
color: var(--color-9);
}
/* Form block — dark card matching info column weight */
.contact-form-block {
background: var(--color-3);
border: 1px solid var(--color-10);
padding: 40px;
}
.contact-form-block .form-container {
max-width: 100%;
margin: 0;
padding-top: 0;
}
/* Contact page form overrides — dark theme inputs */
.contact-form-block label {
color: var(--color-6);
}
.contact-form-block input,
.contact-form-block textarea {
background-color: var(--color-1);
border: 1px solid var(--color-10);
color: var(--color-5);
}
.contact-form-block input:focus,
.contact-form-block textarea:focus {
border-color: var(--color-8);
outline: 0;
}
.contact-form-block textarea {
height: 144px;
}
/* Contact form submit button — red with arrow-right */
.contact-form-block button[type="submit"] {
background-color: var(--color-8);
color: var(--color-5);
font-family: var(--font-cta), 'opensans-bold', serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 14px 34px;
margin: 10px 0 0 0;
border-radius: 2px;
border: 0;
cursor: pointer;
transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.contact-form-block button[type="submit"]:hover {
background-color: var(--color-9);
transform: translateY(-2px);
box-shadow: 0 12px 30px var(--color-12);
}
/* Legacy form styling (preserved for other pages) */
/*forms styling*/
section.contact p {
max-width: 900px;
margin: 0 auto
}
.form-container {
max-width: 1000px;
margin: 0 auto;
padding-top: 20px
}
div.form-input {
display: inline-block;
padding: 0 10px 10px 0;
margin: 0;
width: 50%
}
div.form-input:has(div.g-recaptcha),
div.form-input:has(textarea[name=w3form_name]),
div.form-input:has(textarea[name=w3form_websitesFormID]) {
width: 100%
}
div.form-input:has(textarea[name=w3form_message]) {
width: 100%;
}
label {
display: block;
text-align: left;
color: #444;
font-family: var(--font-text-strong), opensans-bold, serif
}
div.form-input div.g-recaptcha,
input,
textarea {
display: inline-block;
vertical-align: top
}
input,
textarea {
font-family: var(--font-text-regular), opensans-regular, serif;
width: 100%;
margin: 0;
padding: 12px 16px;
font-size: 16px;
line-height: 18px;
cursor: pointer;
color: #1f1f1f;
border: 1px solid #ccc;
box-shadow: none;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
border-radius: 4px;
background-color: #fff;
background-image: none
}
textarea {
height: 144px
}
button {
font-family: var(--font-text-strong), opensans-bold, serif;
padding: 6px 12px;
color: #fff;
font-size: 18px;
margin: 10px auto;
background-color: #346fd4;
border-radius: 3px;
border: 0;
cursor: pointer;
transition: .25s
}
body.contact .form-container .cta {
background-color: var(--color-8);
color: var(--color-5);
font-family: var(--font-cta), 'opensans-bold', serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 16px 34px;
border: 2px solid var(--color-8);
border-radius: 2px;
transition-duration: 0.35s;
}
@media only screen and (max-width:640px) {
div.form-input {
width: 100%
}
}
/*------------------------------------*\
Legal - Terms of Use & Privacy Policy
\*------------------------------------*/
section#privacy-policy,section#terms-of-use{padding:50px 15px;max-width:1000px;margin:auto}section#privacy-policy h1,section#terms-of-use h1{padding:10px;text-transform:uppercase}section#privacy-policy h3,section#terms-of-use h3{padding:30px 10px 10px 10px}section#privacy-policy p,section#terms-of-use p{padding:10px}
/*------------------------------------*\
FOOTER — dcfa.org 3-block footer (top/mid/bot)
\*------------------------------------*/
footer {
text-align: left;
background-color: var(--color-2);
color: var(--color-6);
}
footer a {
text-decoration: none;
transition-duration: 0.35s;
}
footer ul {
list-style: none;
padding: 0;
margin: 0;
}
footer ul li {
background-image: none;
padding: 0;
}
/* === BLOCK 1: .top — Get Involved === */
footer .top {
background-color: var(--color-2);
padding: 80px 20px 60px;
border-top: 1px solid var(--color-10);
}
footer .top .section-head {
text-align: center;
max-width: 680px;
margin: 0 auto 50px;
}
footer .top .section-head .section-tag {
justify-content: center;
}
footer .top .section-head h2 {
text-align: center;
border-bottom: none;
color: var(--color-5);
font-size: 46px;
line-height: 1.15;
letter-spacing: .5px;
margin-bottom: 14px;
padding-bottom: 0;
}
footer .top .section-head h2 .accent {
color: var(--color-8);
}
footer .top .section-head p {
text-align: center;
color: var(--color-6);
font-size: 16px;
margin-bottom: 0;
}
footer .top .involve-hub-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 26px;
}
footer .top .hub-card {
min-height: 360px;
}
footer .top .hub-card .hub-body {
min-height: 360px;
}
/* === BLOCK 2: .mid — Core Footer === */
footer .mid {
background-color: #070708;
padding: 60px 20px;
border-top: 1px solid var(--color-10);
}
footer .mid .flex-container {
display: flex;
flex-wrap: wrap;
gap: 0;
justify-content: flex-start;
}
footer .mid .flex-container .flex-block {
padding: 20px;
}
footer .mid h4 {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-5);
margin-bottom: 24px;
padding-bottom: 14px;
border-bottom: none;
position: relative;
}
footer .mid h4::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 30px;
height: 2px;
background: var(--color-8);
}
/* logo block */
footer .mid .footer-about-block a.logo {
margin-bottom: 18px;
}
footer .mid .footer-about-block p {
font-size: 14px;
color: var(--color-6);
line-height: 24px;
margin-bottom: 0;
}
/* links & resources blocks */
footer .mid .links-block ul,
footer .mid .resources-block ul {
padding: 0;
}
footer .mid .links-block ul li,
footer .mid .resources-block ul li {
display: block;
margin-bottom: 12px;
}
footer .mid .links-block a,
footer .mid .resources-block a {
font-size: 14px;
color: var(--color-6);
display: inline-flex;
align-items: center;
gap: 8px;
transition-duration: 0.35s;
}
footer .mid .links-block a::before,
footer .mid .resources-block a::before {
content: "\203A";
color: var(--color-8);
transition-duration: 0.35s;
}
footer .mid .links-block a:hover,
footer .mid .resources-block a:hover {
color: var(--color-8);
transform: translateX(3px);
}
/* contact block */
footer .mid .contact-block p {
font-size: 14px;
color: var(--color-6);
margin-bottom: 14px;
display: flex;
gap: 12px;
align-items: flex-start;
}
footer .mid .footer-icon {
width: 22px;
height: 22px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
footer .mid .footer-icon svg {
width: 22px;
height: 22px;
fill: var(--color-8);
}
/* === Footer social icons (in .mid .footer-about-block) === */
footer .mid .footer-social {
display: flex;
gap: 10px;
margin-top: 18px;
}
footer .mid .footer-social a {
width: 40px;
height: 40px;
background: var(--color-3);
border: 1px solid var(--color-10);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-6);
text-decoration: none;
transition-duration: 0.35s;
}
footer .mid .footer-social a svg {
width: 12px;
height: 12px;
fill: var(--color-6);
transition-duration: 0.35s;
}
footer .mid .footer-social a:hover {
background: var(--color-8);
border-color: var(--color-8);
}
footer .mid .footer-social a:hover svg {
fill: var(--color-5);
}
/* === BLOCK 3: .bot — Legal Sub-Footer === */
footer .bot {
padding: 24px 20px;
border-top: 1px solid var(--color-10);
}
footer .bot .flex-container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: 100%;
}
footer .bot .flex-block {
display: block;
vertical-align: middle;
}
footer .bot p.copyright {
font-size: 14px;
color: var(--color-7);
margin-bottom: 8px;
}
footer .bot a {
font-size: 13px;
color: var(--color-6);
text-decoration: none;
}
footer .bot a:hover {
color: var(--color-8);
}
footer .bot .footer-brand-container {
text-align: right;
}
footer .bot a#w3 {
background-color: transparent;
background: transparent url(img/w3nerds-logo-web.png) no-repeat;
background-position: 10% 50%;
color: var(--color-7);
display: inline-block;
font-family: 'opensans-regular', sans-serif;
font-size: 13px;
line-height: 22px;
margin: 10px;
padding: 10px;
text-align: right;
transition-duration: 0.8s;
text-decoration: none;
width: 180px;
height: 90px;
}
footer .bot a#w3:hover {
background-color: var(--color-5);
color: var(--color-1);
}
/* === RESPONSIVE: footer === */
@media only screen and (max-width:1100px) {
footer .top .involve-hub-grid {
grid-template-columns: 1fr;
}
footer .top .section-head h2 {
font-size: 36px;
}
footer .mid .flex-container .flex-block {
width: 50%;
}
}
@media only screen and (max-width:640px) {
footer .top {
padding: 60px 20px 40px;
}
footer .top .section-head h2 {
font-size: 28px;
line-height: 1.2;
}
footer .mid .flex-container .flex-block {
width: 100%;
text-align: center;
}
footer .mid h4 {
text-align: center;
}
footer .mid h4::after {
left: 50%;
transform: translateX(-50%);
}
footer .mid .links-block a,
footer .mid .resources-block a {
justify-content: center;
}
footer .mid .contact-block p {
justify-content: center;
}
footer .bot .tableRow {
flex-direction: column;
text-align: center;
gap: 16px;
}
footer .bot .footer-brand-container {
text-align: center;
}
}
/*------------------------------------*\
TYPOGRAPHY
\*------------------------------------*/
@font-face {
font-family: 'title';
src: url('fonts/oswald-bold-webfont.woff2') format('woff2'),
url('fonts/oswald-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'cta';
src: url('fonts/oswald-demibold-webfont.woff2') format('woff2'),
url('fonts/oswald-demibold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'regular';
src: url('fonts/inter-regular-webfont.woff2') format('woff2'),
url('fonts/inter-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'bold';
src: url('fonts/Inter-medium.woff2') format('woff2'),
url('fonts/Inter-medium.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'italic';
src: url('fonts/opensans-italic-webfont.woff2') format('woff2'),
url('fonts/opensans-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'opensans-italic';
src: url('fonts/opensans-italic-webfont.woff2') format('woff2'),
url('fonts/opensans-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'opensans-regular';
src: url('fonts/opensans-regular-webfont.woff2') format('woff2'),
url('fonts/opensans-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'opensans-bold';
src: url('fonts/opensans-bold-webfont.woff2') format('woff2'),
url('fonts/opensans-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'opensans-extrabold';
src: url('fonts/opensans-extrabold-webfont.woff2') format('woff2'),
url('fonts/opensans-extrabold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/*------------------------------------*\
RESPONSIVE
\*------------------------------------*/
@media only screen and (max-width:1400px) {
.dist-rail-inner {
margin: 20px;
}
}
@media only screen and (max-width:1300px) {
header .mid .mid-inner {
flex-direction: column;
}
}
@media only screen and (max-width:1100px) {
.hero-layout {
grid-template-columns: 1fr;
gap: 40px;
padding-bottom: 160px;
}
.hero-image-frame {
margin: 0 20px;
}
body.home section#home h1 {
font-size: 56px;
}
.about-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.about-mosaic {
height: 420px;
}
.about-image::after {
inset: 20px -10px -20px 20px;
}
.services-grid {
grid-template-columns: repeat(2,1fr);
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.cta-inner {
grid-template-columns: 1fr;
gap: 24px;
}
.cta-inner h2 {
font-size: 36px;
line-height: 42px;
}
}
@media only screen and (max-width:400px) {
.about-mosaic,
.about-image::after {
width: 75%;
height: 75%;
}
.about-image::after {
inset: 0;
}
.about-badge {
left: 0;
bottom: -18px;
padding: 14px 16px;
gap: 10px;
max-width: 100%;
}
.about-badge svg {
width: 26px;
height: 26px;
}
.about-badge-text strong {
font-size: 22px;
}
.about-badge-text span {
font-size: 10px;
}
.about-mosaic {
height: 320px;
}
}
@media only screen and (max-width:1024px) { /*foundation medium breakpoint*/
h1 {font-size: 30px;line-height: 40px;}
h2 {font-size: 26px;line-height: 30px;}
section,
.std-padding {
padding: 60px 20px;
}
.less-padding {
padding: 30px 10px;
}
header div.logo {
text-align: center;
}
header nav ul {
text-align: center;
}
}
@media only screen and (max-width:900px) {
ul, ol {padding: 15px 0 15px 5px;}
.contact-grid {
grid-template-columns: 1fr;
gap: 40px;
}
.contact-form-block {
padding: 30px 20px;
}
.hub-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width:800px) {
}
@media only screen and (max-width:640px) { /*foundation small breakpoint*/
p {font-size: 16px;line-height: 24px;}
h1 {font-size: 26px;line-height: 32px;}
/* hero responsive */
body.home section#home {
min-height: auto;
padding-top: 160px;
padding-bottom: 80px;
}
body.home section#home h1 {
font-size: 40px;
}
body.home section#home {
flex-direction: column;
}
.hero-layout {
padding-bottom: 30px;
}
.hero-stats {
position: relative;
flex-wrap: wrap;
right: auto;
bottom: auto;
}
.hero-stat {
flex: 1 1 50%;
min-width: 140px;
padding: 20px 24px;
margin: 0 20px;
}
.hero-stat-num {
font-size: 28px;
}
.hero-image-frame {
width: 60%;
margin: 0 auto;
}
.hero-image-frame img {
width: 100%;
height: auto;
}
h2 {font-size: 22px;line-height: 26px;}
h3 {font-size: 18px;line-height: 24px;}
ul {padding: 15px 0 15px 0;}
ol {padding: 15px 0 15px 20px;}
section,
.std-padding {
padding: 30px 10px;
}
.less-padding {
padding: 10px 2.5px;
}
div.table,
div.table div.tableRow,
div.table div.tableRow div.tableHeader,
div.table div.tableRow div.tableCell {
display:block;
width:100%;
}
header {
position: relative;
text-align: center;
}
header div.logo {
display:inline-block;
vertical-align: top;
width:87%;
padding:10px 6px 0 6px;
text-align:center;
}
header div.logo a {
display:block;
text-align:center;
}
header nav ul {
text-align:center;
}
header nav ul li {
display: inline-block;
}
.cta {
margin:6px 0;
}
.about-features, .services-grid, .stats-grid, .hub-grid, body.departments .co-list,
.presidents-list, .lod-grid, .dec-grid, body.officers .officer-list {
grid-template-columns: 1fr !important;
}
body:not(.home) .breadcrumbs .breadcrumbs-inner {
flex-direction: column;
}
footer {
text-align:center;
}
footer .mid .links-block ul li, footer .mid .resources-block ul li {
text-align: center;
}
footer table {
margin:0 auto;
text-align:center;
}
footer div.footer-sub {
text-align: center;
}
footer div.footer-sub p.copyright {
text-align:center;
}
footer .footer-brand-container {
text-align:center;
}
}
@media only screen and (max-width:399px) {
.apply-form-full .form-container div.g-recaptcha {
margin-left: -10%;
}
}
/*------------------------------------*\
MISC
\*------------------------------------*/
::selection {
background:#04A4CC;
color:#FFF;
text-shadow:none;
}
/*------------------------------------*\
ABOUT — polish fixes (dcfa.org)
\*------------------------------------*/
/* 1. Left-align the 'About The Association' kicker */
body.home section#about .section-tag {
text-align: left;
}
/* 2. Force h4 in benefit cards to display:block so text-align inherits */
body.home section#about .about-feature h3 {
display: block;
}
/* 3. Left-align the signature name + meta line */
body.home section#about .signature-text strong,
body.home section#about .signature-text span {
text-align: left;
}
/* 4. White arrow icon in Contact Us CTA */
body.home section#about .signature .cta svg {
fill: #ffffff;
}
/*------------------------------------*\
INTERIOR PAGES — chrome shared across about/contact/news/etc.
\*------------------------------------*/
/* === BREADCRUMBS === */
body:not(.home) .breadcrumbs {
background-color: var(--color-2);
padding: 18px 0;
border-bottom: 1px solid var(--color-10);
}
body:not(.home) .breadcrumbs .wrapper {
text-align: left;
}
body:not(.home) .breadcrumbs .breadcrumbs-inner {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: var(--color-7);
text-transform: uppercase;
letter-spacing: 2px;
}
body:not(.home) .breadcrumbs .breadcrumbs-inner a {
color: var(--color-6);
text-decoration: none;
font-family: var(--font-text-regular), 'opensans-regular', serif;
transition: color 0.35s ease;
}
body:not(.home) .breadcrumbs .breadcrumbs-inner a:hover {
color: var(--color-8);
}
body:not(.home) .breadcrumbs .breadcrumbs-inner svg {
width: 10px;
height: 10px;
fill: var(--color-8);
flex-shrink: 0;
}
body:not(.home) .breadcrumbs .breadcrumbs-current {
color: var(--color-5);
}
/* === INTERIOR LANDING / HERO === */
body:not(.home) .interior-landing {
position: relative;
padding: 80px 20px 60px;
background-size: cover;
background-position: center;
}
body:not(.home) .interior-landing::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg,rgba(10,10,10,.93) 0%,rgba(10,10,10,.78) 60%,rgba(230,57,70,.22) 100%);
}
body:not(.home) .interior-landing::after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 6px;
background: var(--color-8);
}
body:not(.home) .interior-landing .wrapper {
position: relative;
z-index: 2;
text-align: left;
}
body:not(.home) .interior-landing .eyebrow {
display: inline-flex;
align-items: center;
gap: 14px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--color-8);
margin-bottom: 18px;
}
body:not(.home) .interior-landing .eyebrow::before {
content: "";
width: 36px;
height: 2px;
background: var(--color-8);
display: inline-block;
}
body:not(.home) .interior-landing h1 {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 60px;
line-height: 1;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-5);
margin-bottom: 14px;
padding-bottom: 0;
border-bottom: none;
text-align: left;
}
body:not(.home) .interior-landing h1 .accent {
color: var(--color-8);
}
body:not(.home) .interior-landing p.lede {
font-size: 17px;
color: #cfd1d6;
max-width: 760px;
line-height: 26px;
font-family: var(--font-text-regular), 'opensans-regular', serif;
}
/* === CONTENT BODY (default interior page text area) === */
main#main-site-content {
padding: 80px 20px;
}
.content-body p {
font-size: 18px;
line-height: 26px;
color: var(--color-6);
margin-bottom: 18px;
}
/* === RESPONSIVE: interior pages === */
@media only screen and (max-width:1100px) {
body:not(.home) .interior-landing h1 {
font-size: 48px;
}
}
@media only screen and (max-width:640px) {
body:not(.home) .interior-landing {
padding: 60px 20px 40px;
}
body:not(.home) .interior-landing h1 {
font-size: 38px;
line-height: 1.15;
}
body:not(.home) .interior-landing p.lede {
font-size: 15px;
}
body:not(.home) main#site-content {
padding: 50px 20px;
}
}
/*------------------------------------*\
APPLY — body.apply
\*------------------------------------*/
/* === VOLUNTEERS CALLOUT === */
.volunteers-callout {
position: relative;
z-index: 2;
max-width: 1100px;
margin: 0 auto 36px;
background: linear-gradient(135deg, rgba(230,57,70,.18), rgba(230,57,70,.05));
border: 1px solid rgba(230,57,70,.35);
border-left: 4px solid var(--color-8);
padding: 36px 40px;
}
.volunteers-callout .vc-inner {
display: flex;
flex-direction: column;
gap: 14px;
}
.vc-eyebrow {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--color-8);
}
.volunteers-callout h2 {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 34px;
line-height: 1.15;
text-transform: uppercase;
color: var(--color-5);
letter-spacing: 1px;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.volunteers-callout h2 .accent {
color: var(--color-8);
}
.volunteers-callout p {
font-size: 16px;
line-height: 1.7;
color: #e3e5ea;
max-width: 840px;
}
.vc-meetings {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
margin-top: 10px;
padding-top: 18px;
border-top: 1px solid rgba(255,255,255,.12);
}
.vc-meetings-label {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-6);
}
.vc-months {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0;
padding: 0;
}
.vc-months li {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 6px 14px;
background: rgba(0,0,0,.35);
border: 1px solid rgba(230,57,70,.35);
color: var(--color-5);
background-image: none;
}
/* === MEMBERSHIP CONTACT === */
.membership-contact {
display: flex;
gap: 24px;
align-items: flex-start;
max-width: 1100px;
margin: 0 auto 36px;
padding: 28px 32px;
background: var(--color-3);
border: 1px solid var(--color-10);
border-left: 4px solid var(--color-8);
}
.membership-contact .mc-icon {
width: 60px;
height: 60px;
flex-shrink: 0;
background: rgba(230,57,70,.12);
color: var(--color-8);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.membership-contact .mc-icon svg {
width: 24px;
height: 24px;
fill: var(--color-8);
}
.membership-contact .mc-body {
flex: 1;
min-width: 0;
}
.mc-eyebrow {
display: block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-7);
margin-bottom: 6px;
}
.membership-contact h3 {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 24px;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-5);
margin-bottom: 6px;
border-bottom: none;
padding-bottom: 0;
}
.membership-contact h3 .accent {
color: var(--color-8);
}
.mc-role {
font-size: 13px;
color: var(--color-6);
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: var(--font-title), 'opensans-bold', sans-serif;
margin-bottom: 14px;
}
.mc-channels {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.mc-channel {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: var(--color-5);
padding: 10px 16px;
background: var(--color-1);
border: 1px solid var(--color-10);
text-decoration: none;
transition: border-color 0.35s ease, color 0.35s ease;
}
.mc-channel svg {
width: 14px;
height: 14px;
fill: var(--color-8);
flex-shrink: 0;
}
.mc-channel:hover {
border-color: var(--color-8);
color: var(--color-8);
}
.mc-channel .mc-meta {
font-size: 12px;
color: var(--color-7);
text-transform: none;
letter-spacing: 0;
}
/* === PDF DOWNLOAD === */
.apply-download {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 24px;
flex-wrap: wrap;
max-width: 1100px;
margin: 0 auto 40px;
padding: 22px 30px;
background: rgba(15,15,18,.85);
border: 1px solid var(--color-11);
border-left: 4px solid var(--color-8);
}
.apply-download .pdf-icon {
width: 54px;
height: 54px;
flex-shrink: 0;
background: rgba(230,57,70,.12);
color: var(--color-8);
display: flex;
align-items: center;
justify-content: center;
}
.apply-download .pdf-icon svg {
width: 24px;
height: 24px;
fill: var(--color-8);
}
.apply-download .text {
flex: 1;
min-width: 240px;
}
.apply-download strong {
display: block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 17px;
color: var(--color-5);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px;
}
.apply-download span {
font-size: 14px;
color: var(--color-6);
}
.apply-download .cta {
background-color: var(--color-8);
color: var(--color-5);
font-family: var(--font-cta), 'opensans-bold', serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 16px 34px;
border: 2px solid var(--color-8);
border-radius: 2px;
background-image: none;
transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.apply-download .cta:hover {
background-color: var(--color-9);
border-color: var(--color-9);
transform: translateY(-2px);
box-shadow: 0 12px 30px var(--color-12);
}
/* === APPLICATION FORM === */
.apply-form-full {
position: relative;
z-index: 2;
max-width: 780px;
margin: 0 auto;
background: rgba(15,15,18,.92);
border: 1px solid var(--color-11);
padding: 48px 44px;
box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
.apply-form-full .form-note {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 18px;
margin-bottom: 28px;
background: rgba(230,57,70,.12);
border-left: 3px solid var(--color-8);
font-size: 13px;
color: var(--color-6);
line-height: 1.5;
}
.apply-form-full .form-note svg {
width: 16px;
height: 16px;
fill: var(--color-8);
flex-shrink: 0;
margin-top: 2px;
}
body.apply .form-input, body.apply .form-textarea, body.apply select.form-input, body.apply input, body.apply textarea {
width: 100%;
padding: 14px 18px;
background: var(--color-1);
border: 1px solid var(--color-10);
color: #fff;
font-family: inherit;
font-size: 14px;
margin-bottom: 18px;
transition: var(--transition);
}
body.apply .form-input,
body.apply .form-container div.form-input:nth-of-type(16n),
body.apply .form-container div.form-input:nth-of-type(17n) {
border: none;
background: none;
margin-bottom: 0;
padding: 6px 18px;
}
.form-input:focus, .form-textarea:focus, body.apply textarea:focus, body.apply .form-input:focus {
border-color: var(--accent);
}
/* Application type radio pills */
.apptype-row {
display: flex;
gap: 14px;
margin-bottom: 26px;
flex-wrap: wrap;
}
.radio-pill {
flex: 1;
min-width: 200px;
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
cursor: pointer;
background: var(--color-1);
border: 1px solid var(--color-10);
transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
font-size: 14px;
color: var(--color-6);
}
.radio-pill input[type="radio"] {
width: 18px;
height: 18px;
flex-shrink: 0;
accent-color: var(--color-8);
background-color: var(--color-1);
border: 1px solid var(--color-10);
}
.radio-pill:has(input:checked) {
border-color: var(--color-8);
background: rgba(230,57,70,.12);
color: var(--color-5);
}
.radio-pill:hover {
border-color: var(--color-8);
}
/* Form inputs — reuse contact form dark-theme styling */
.apply-form-full .form-input {
width: 100%;
padding: 14px 18px;
background: var(--color-1);
border: 1px solid var(--color-10);
color: var(--color-5);
font-family: var(--font-text-regular), 'opensans-regular', serif;
font-size: 14px;
margin-bottom: 18px;
transition: border-color 0.35s ease;
border-radius: 0;
line-height: 18px;
}
.apply-form-full .form-input:focus {
outline: none;
border-color: var(--color-8);
}
.apply-form-full .form-input::placeholder {
color: var(--color-7);
}
.apply-form-full .form-textarea {
width: 100%;
padding: 14px 18px;
background: var(--color-1);
border: 1px solid var(--color-10);
color: var(--color-5);
font-family: var(--font-text-regular), 'opensans-regular', serif;
font-size: 14px;
min-height: 140px;
resize: vertical;
margin-bottom: 24px;
transition: border-color 0.35s ease;
border-radius: 0;
}
.apply-form-full .form-textarea:focus {
outline: none;
border-color: var(--color-8);
}
.apply-form-full .form-textarea::placeholder {
color: var(--color-7);
}
/* Form row layouts */
.apply-form-full .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-bottom: 18px;
}
.apply-form-full .form-row-3 {
grid-template-columns: 1fr 1fr 1fr;
}
.apply-form-full .field-group {
display: flex;
flex-direction: column;
margin-bottom: 18px;
}
.apply-form-full .field-group .form-input {
margin-bottom: 6px;
}
.sub-label {
font-size: 11px;
color: var(--color-7);
letter-spacing: 2px;
text-transform: uppercase;
font-family: var(--font-title), 'opensans-bold', sans-serif;
}
.field-label {
display: block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-7);
margin-bottom: 8px;
margin-top: 6px;
}
/* Submit button */
.apply-form-full button[type="submit"] {
margin-top: 14px;
background-color: var(--color-8);
color: var(--color-5);
font-family: var(--font-cta), 'opensans-bold', serif;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
padding: 14px 34px;
border-radius: 2px;
border: 0;
cursor: pointer;
transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
display: inline-flex;
align-items: center;
gap: 10px;
}
.apply-form-full button[type="submit"]:hover {
background-color: var(--color-9);
transform: translateY(-2px);
box-shadow: 0 12px 30px var(--color-12);
}
.apply-form-full button[type="submit"]:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Dues asterisk notice */
.form-asterisk {
display: flex;
gap: 14px;
margin-top: 32px;
padding: 20px 22px;
background: rgba(230,57,70,.12);
border-left: 4px solid var(--color-8);
font-size: 16px;
color: var(--color-5);
font-weight: 500;
line-height: 1.65;
letter-spacing: .2px;
}
.form-asterisk .ast {
color: var(--color-8);
font-size: 24px;
font-weight: 700;
flex-shrink: 0;
line-height: 1.1;
}
/* === LIVE CRM WIDGET (form-451) — actual apply-page markup is the
legacy div.form-input > label + input/textarea pattern, not the
design-file classes above. Restyle those real elements to match
the design file's look/spacing without touching apply.php. === */
.apply-form-full .form-container {
max-width: 100%;
margin: 0;
padding-top: 0;
}
body.apply .form-container div.form-input:nth-of-type(16n-12),
body.apply .form-container div.form-input:nth-of-type(16n-11),
body.apply .form-container div.form-input:nth-of-type(16n-10) {
width: 33%;
}
body.apply .form-container div.form-input:nth-of-type(16n-7),
body.apply .form-container div.form-input:nth-of-type(16n-6) {
width: 50%;
}
body.apply .form-container div.form-input label span {
display: none;
}
body.apply .form-container div.form-input:nth-of-type(16n-12) label span,
body.apply .form-container div.form-input:nth-of-type(16n-11) label span,
body.apply .form-container div.form-input:nth-of-type(16n-10) label span,
body.apply .form-container div.form-input:nth-of-type(16n-9) label span,
body.apply .form-container div.form-input:nth-of-type(16n-4) label span,
body.apply .form-container div.form-input:nth-of-type(16n-3) label span {
display: block;
}
.apply-form-full .form-container > div:has(div.g-recaptcha) {
margin-bottom: 22px !important;
}
.apply-form-full .form-container div.g-recaptcha {
width: auto !important;
display: inline-block !important;
}
.apply-form-full .form-container label {
display: block;
margin-bottom: 8px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-7);
}
.apply-form-full .form-container input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.apply-form-full .form-container textarea {
display: block !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
float: none !important;
margin: 0 !important;
padding: 14px 18px !important;
background: var(--color-1) !important;
border: 1px solid var(--color-10) !important;
border-radius: 0 !important;
color: var(--color-5) !important;
font-family: var(--font-text-regular), 'opensans-regular', serif !important;
font-size: 14px !important;
line-height: 18px !important;
cursor: text;
box-shadow: none !important;
transition: border-color 0.35s ease;
}
.apply-form-full .form-container textarea {
min-height: 140px !important;
resize: vertical;
background: none !important;
border: none !important;
}
.apply-form-full .form-container input:focus,
.apply-form-full .form-container textarea:focus {
outline: none !important;
border-color: var(--color-8) !important;
}
.apply-form-full .form-container input::placeholder,
.apply-form-full .form-container textarea::placeholder {
color: var(--color-7);
}
.apply-form-full .form-container button,
.apply-form-full .form-container input[type="submit"] {
display: inline-flex;
align-items: center;
gap: 10px;
width: auto;
margin: 4px 0 0;
background-color: var(--color-8);
color: var(--color-5);
font-family: var(--font-cta), 'opensans-bold', serif;
font-size: 14px;
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
padding: 14px 34px;
border: 0;
border-radius: 2px;
cursor: pointer;
transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.apply-form-full .form-container button:hover,
.apply-form-full .form-container input[type="submit"]:hover {
background-color: var(--color-9);
transform: translateY(-2px);
box-shadow: 0 12px 30px var(--color-12);
}
/* === RESPONSIVE: apply === */
@media only screen and (max-width:1100px) {
.apply-form-full {
padding: 36px 28px;
}
.apply-form-full .form-row-3 {
grid-template-columns: 1fr;
}
}
@media only screen and (max-width:640px) {
.volunteers-callout {
padding: 28px 24px;
}
.volunteers-callout h3 {
font-size: 26px;
}
.membership-contact {
flex-direction: column;
padding: 24px 20px;
}
.apply-download {
padding: 20px 24px;
}
.apply-form-full {
padding: 28px 20px;
}
.apply-form-full .form-row {
grid-template-columns: 1fr;
}
.apptype-row {
flex-direction: column;
}
.radio-pill {
min-width: auto;
}
body.apply .form-container div.form-input:nth-of-type(16n-12),
body.apply .form-container div.form-input:nth-of-type(16n-11),
body.apply .form-container div.form-input:nth-of-type(16n-10),
body.apply .form-container div.form-input:nth-of-type(16n-7),
body.apply .form-container div.form-input:nth-of-type(16n-6) {
width: 100%;
}
}
/*------------------------------------*\
SPONSORS — body.sponsors
\*------------------------------------*/
.sponsors-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
}
/* Sponsor card */
.sponsor-card {
background: var(--color-3);
border: 1px solid var(--color-10);
border-left: 4px solid var(--color-8);
padding: 30px 32px;
transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
display: flex;
flex-direction: column;
}
.sponsor-card:hover {
transform: translateY(-4px);
border-color: var(--color-8);
box-shadow: 0 24px 50px rgba(0,0,0,.5);
}
/* Sponsor head — icon + id block */
.sponsor-head {
display: flex;
gap: 18px;
margin-bottom: 18px;
padding-bottom: 18px;
border-bottom: 1px solid var(--color-10);
align-items: flex-start;
}
/* Sponsor icon — hex container */
.sponsor-icon {
width: 60px;
height: 60px;
flex-shrink: 0;
background: rgba(230,57,70,0.12);
color: var(--color-8);
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.sponsor-icon svg {
width: 22px;
height: 22px;
fill: var(--color-8);
}
.sponsor-icon img {
width: 22px;
height: 22px;
filter: none;
}
/* Sponsor id — category, name, tagline, visit link */
.sponsor-id {
flex: 1;
min-width: 0;
}
.sponsor-category {
display: inline-block;
padding: 3px 10px;
background: var(--color-8);
color: var(--color-5);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 10px;
letter-spacing: 2.5px;
text-transform: uppercase;
font-weight: normal;
margin-bottom: 8px;
}
.sponsor-name {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 20px;
line-height: 1.2;
letter-spacing: .8px;
text-transform: uppercase;
color: var(--color-5);
margin-bottom: 4px;
padding-bottom: 0;
border-bottom: none;
}
.sponsor-tagline {
font-size: 13px;
color: var(--color-7);
font-style: italic;
}
/* Visit website CTA */
.sponsor-visit {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 10px;
padding: 8px 16px;
background: rgba(230,57,70,0.12);
color: var(--color-8);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
border-radius: 2px;
align-self: flex-start;
}
.sponsor-visit svg {
width: 11px;
height: 11px;
fill: var(--color-8);
transition: fill 0.35s ease;
}
.sponsor-visit:hover {
background: var(--color-8);
color: var(--color-5);
transform: translateX(3px);
}
.sponsor-visit:hover svg {
fill: var(--color-5);
}
/* Sponsor body */
.sponsor-body {
flex: 1;
}
.sponsor-desc {
color: var(--color-6);
font-size: 14px;
line-height: 1.65;
margin-bottom: 20px;
}
/* Sponsor block — address, phone, hours, etc. */
.sponsor-block {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--color-10);
}
.sponsor-block:first-of-type {
border-top: none;
padding-top: 0;
}
.sb-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 2.5px;
text-transform: uppercase;
color: var(--color-8);
font-weight: normal;
margin-bottom: 8px;
}
.sb-label svg {
width: 11px;
height: 11px;
fill: var(--color-8);
}
.sb-value {
font-size: 14px;
color: var(--color-5);
line-height: 1.5;
}
.sb-secondary {
margin-top: 6px;
color: var(--color-6);
font-size: 13px;
}
/* SB list — phone numbers, links */
.sb-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
padding: 0;
margin: 0;
}
.sb-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
font-size: 13.5px;
color: var(--color-6);
line-height: 1.4;
flex-wrap: wrap;
background-image: none;
padding: 0;
}
.sb-list li a {
color: var(--color-5);
text-decoration: none;
transition: color 0.35s ease;
}
.sb-list li a:hover {
color: var(--color-8);
}
/* SB hours */
.sb-hours {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
padding: 0;
margin: 0;
}
.sb-hours li {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
font-size: 13.5px;
color: var(--color-6);
line-height: 1.4;
background-image: none;
padding: 0;
}
/* SB row label */
.sb-row-label {
color: var(--color-7);
font-size: 12.5px;
text-transform: none;
}
/* SB note */
.sb-note {
margin-top: 8px;
font-size: 12px;
color: var(--color-7);
font-style: italic;
}
/* Responsive: sponsors */
@media only screen and (max-width:900px) {
.sponsors-grid {
grid-template-columns: 1fr;
}
.sponsor-head {
flex-direction: column;
}
.sponsor-icon {
width: 48px;
height: 48px;
}
}
/*------------------------------------*\
PRINT
\*------------------------------------*/
@media print {
* {
background:transparent !important;
color:#000 !important;
box-shadow:none !important;
text-shadow:none !important;
}
a,
a:visited {
text-decoration:underline;
}
a[href]:after {
content:" (" attr(href) ")";
}
abbr[title]:after {
content:" (" attr(title) ")";
}
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content:"";
}
pre,blockquote {
border:1px solid #999;
page-break-inside:avoid;
}
thead {
display:table-header-group;
}
tr,img {
page-break-inside:avoid;
}
img {
max-width:100% !important;
}
@page {
margin:0.5cm;
}
p,
h2,
h3 {
orphans:3;
widows:3;
}
h2,
h3 {
page-break-after:avoid;
}
}
/*------------------------------------*\
ASSOCIATION SUBNAV — shared across /departments, /officers, /history, etc.
\*------------------------------------*/
.assoc-subnav {
background-color: var(--color-2);
border-top: 1px solid var(--color-10);
border-bottom: 1px solid var(--color-10);
padding: 24px 20px;
}
.assoc-subnav .wrapper {
text-align: center;
}
.assoc-subnav-inner {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.assoc-subnav a {
display: inline-block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-6);
text-decoration: none;
padding: 10px 22px;
border: 1px solid var(--color-10);
transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease;
}
.assoc-subnav a:hover {
border-color: var(--color-8);
color: var(--color-5);
}
.assoc-subnav a.is-current {
background-color: var(--color-8);
border-color: var(--color-8);
color: var(--color-5);
}
@media only screen and (max-width:640px) {
.assoc-subnav-inner {
flex-direction: column;
align-items: center;
}
.assoc-subnav a {
width: 100%;
max-width: 280px;
text-align: center;
}
}
/*------------------------------------*\
DEPARTMENTS — body.departments chrome (search, sticky rail, list section)
\*------------------------------------*/
/* Search section — outer wrapper */
.assoc-search-section {
background-color: var(--color-1);
padding: 0 0 24px;
}
.assoc-search-section .wrapper {
text-align: left;
}
/* Search container — dark card with input + icon */
.assoc-search {
position: relative;
display: flex;
align-items: center;
gap: 18px;
padding: 18px 22px;
background: var(--color-3);
border: 1px solid var(--color-10);
margin-bottom: 24px;
}
.assoc-search input[type="search"],
.assoc-search input[type="text"] {
flex: 1;
min-width: 0;
width: 100%;
padding: 14px 20px 14px 46px;
background: var(--color-1);
border: 1px solid var(--color-10);
color: var(--color-5);
font-family: var(--font-text-regular), 'opensans-regular', serif;
font-size: 15px;
line-height: 18px;
outline: none;
border-radius: 4px;
transition: border-color 0.25s;
}
.assoc-search input[type="search"]::placeholder,
.assoc-search input[type="text"]::placeholder {
color: var(--color-7);
}
.assoc-search input[type="search"]:focus,
.assoc-search input[type="text"]:focus {
border-color: var(--color-8);
}
/* Search icon — positioned inside input */
.assoc-search svg {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
color: var(--color-8);
pointer-events: none;
}
/* Search count summary */
.assoc-search .search-count {
flex-shrink: 0;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-6);
white-space: nowrap;
}
.assoc-search .search-count strong {
color: var(--color-8);
}
/* District rail — sticky horizontal nav */
.dist-rail {
position: sticky;
top: 91px;
z-index: 50;
background: rgba(10,10,10,.97);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-10);
padding: 14px 0;
margin: 0 0 30px;
}
/* District rail inner — horizontal scrollable pills row */
.dist-rail-inner {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 0 24px;
scrollbar-width: thin;
scrollbar-color: var(--color-8) transparent;
-webkit-overflow-scrolling: touch;
}
.dist-rail-inner::-webkit-scrollbar {
height: 4px;
}
.dist-rail-inner::-webkit-scrollbar-track {
background: transparent;
}
.dist-rail-inner::-webkit-scrollbar-thumb {
background: var(--color-8);
border-radius: 2px;
}
/* District rail pill links */
.dist-rail a {
flex-shrink: 0;
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 8px 14px;
background: var(--color-3);
border: 1px solid var(--color-10);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-6);
text-decoration: none;
transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease;
}
.dist-rail a:hover {
border-color: var(--color-8);
color: var(--color-5);
background: rgba(230,57,70,.12);
}
.dist-rail a.is-active {
border-color: var(--color-8);
color: var(--color-5);
background: var(--color-8);
}
/* Active pill — ordinal stays white, suffix muted */
.dist-rail a.is-active .d-suffix {
color: rgba(255,255,255,.7);
}
/* District list section — outer wrapper for district sections */
.dist-list-section {
padding: 0 0 60px;
}
.dist-list-section .wrapper {
text-align: left;
}
/* Responsive: departments chrome */
@media only screen and (max-width:640px) {
.assoc-search {
flex-direction: column;
align-items: stretch;
gap: 12px;
padding: 14px 16px;
}
.assoc-search .search-count {
text-align: left;
}
.dist-rail {
top: 80px;
padding: 12px 0;
}
.dist-rail-inner {
padding: 0 16px;
}
}
/*------------------------------------*\
OFFICERS — body.officers
\*------------------------------------*/
/* Term header */
body.officers .term-header {
margin-bottom: 48px;
padding-bottom: 24px;
border-bottom: 2px solid var(--color-8);
}
body.officers .term-eyebrow {
display: inline-block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--color-8);
margin-bottom: 8px;
}
body.officers .term-title {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 30px;
line-height: 1.2;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-5);
margin: 0;
padding-bottom: 0;
border-bottom: none;
}
/* Officer group */
body.officers .officer-group {
margin-bottom: 56px;
}
body.officers .officer-group:last-child {
margin-bottom: 0;
}
body.officers .officer-group-title {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 22px;
line-height: 1.2;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-5);
margin-bottom: 24px;
padding-bottom: 12px;
border-bottom: 2px solid var(--color-8);
display: inline-block;
}
/* Officer list grid */
body.officers .officer-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
/* Officer card */
body.officers .officer-card {
background: var(--color-3);
border: 1px solid var(--color-10);
border-left: 4px solid var(--color-8);
padding: 24px 22px;
transition: border-color 0.35s ease, transform 0.35s ease;
}
body.officers .officer-card:hover {
border-color: var(--color-8);
transform: translateX(4px);
}
/* Vacant card */
body.officers .officer-card-vacant {
border-left-color: var(--color-7);
background: rgba(15,15,18,.7);
}
body.officers .officer-card-vacant .officer-name {
color: var(--color-7);
font-style: italic;
}
/* Officer title (role) */
body.officers .officer-title {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-8);
margin-bottom: 6px;
}
/* Officer name */
body.officers .officer-name {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 20px;
line-height: 1.25;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-5);
margin-bottom: 6px;
}
/* Officer meta (term, phone, etc.) */
body.officers .officer-meta {
font-size: 13px;
color: var(--color-7);
}
body.officers .officer-meta a {
color: var(--color-8);
text-decoration: none;
transition: color 0.35s ease;
}
body.officers .officer-meta a:hover {
color: var(--color-9);
}
/* Content body overrides for officers page */
body.officers main#site-content {
padding: 60px 20px 0;
}
/* Responsive: officers grid */
@media only screen and (max-width:900px) {
body.officers .officer-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width:560px) {
body.officers .officer-list {
grid-template-columns: 1fr;
}
body.officers .term-title {
font-size: 24px;
}
body.officers .officer-group-title {
font-size: 18px;
}
}
/*------------------------------------*\
HISTORY — body.history
\*------------------------------------*/
/* Section head override for history main content */
body.history main#site-content .section-head {
text-align: left;
margin-bottom: 36px;
}
body.history main#site-content .section-head h2 {
text-align: left;
border-bottom: none;
color: var(--color-5);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 38px;
line-height: 1.15;
letter-spacing: .5px;
margin-bottom: 0;
padding-bottom: 0;
}
/* History intro text */
.history-intro {
max-width: 780px;
margin-bottom: 50px;
}
.history-intro p {
font-size: 17px;
line-height: 1.8;
color: #cfd1d6;
margin-bottom: 18px;
}
.history-intro p b {
color: var(--color-5);
}
/* Presidents grid — 3-column card layout */
.presidents-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.president-item {
background: var(--color-3);
border: 1px solid var(--color-10);
padding: 18px 22px;
display: flex;
flex-direction: column;
gap: 4px;
transition: border-color 0.35s ease, transform 0.35s ease;
}
.president-item:hover {
border-color: var(--color-8);
transform: translateX(3px);
}
.president-name {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 15px;
font-weight: normal;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--color-5);
}
.president-role {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-7);
}
/* Responsive: presidents grid */
@media only screen and (max-width:900px) {
.presidents-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width:560px) {
.presidents-list {
grid-template-columns: 1fr;
}
}
/* Responsive: history interior landing */
@media only screen and (max-width:1100px) {
body.history .interior-landing h1 {
font-size: 48px;
}
}
@media only screen and (max-width:640px) {
body.history main#site-content .section-head h2 {
font-size: 28px;
}
.history-intro p {
font-size: 15px;
}
}
/*------------------------------------*\
MEMORIAM — body.memoriam
\*------------------------------------*/
/* LOD section */
.lod-section {
margin-bottom: 60px;
}
.lod-header {
margin-bottom: 30px;
padding: 24px 26px;
background: linear-gradient(135deg, rgba(230,57,70,.15), rgba(230,57,70,.05));
border-left: 4px solid var(--color-8);
}
.lod-tag {
display: inline-block;
padding: 4px 12px;
background: var(--color-8);
color: var(--color-5);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
margin-bottom: 10px;
}
.lod-header h2 {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 26px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-5);
margin-bottom: 6px;
padding-bottom: 0;
border-bottom: none;
}
.lod-header p {
color: var(--color-6);
font-size: 14px;
margin: 0;
}
/* LOD grid */
.lod-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.lod-card {
background: var(--color-3);
border: 1px solid var(--color-10);
border-left: 4px solid var(--color-8);
padding: 24px;
transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.lod-card:hover {
border-color: var(--color-8);
transform: translateY(-4px);
box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
/* LOD card body */
.lod-eyebrow {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-8);
display: block;
margin-bottom: 6px;
}
.lod-name {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 18px;
line-height: 1.25;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--color-5);
margin-bottom: 10px;
}
.lod-dept {
font-size: 13px;
color: var(--color-6);
margin-bottom: 14px;
}
.lod-status {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-8);
margin-bottom: 4px;
}
.lod-date {
font-size: 13px;
color: var(--color-7);
}
/* Deceased members section */
.dec-section {
margin-top: 50px;
}
.dec-header {
margin-bottom: 30px;
}
.dec-header h2 {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 26px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-5);
margin-bottom: 6px;
padding-bottom: 0;
border-bottom: none;
}
.dec-header p {
color: var(--color-6);
font-size: 14px;
margin: 0;
}
/* Year block */
.dec-year-block {
margin-bottom: 36px;
}
.dec-year-title {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 22px;
letter-spacing: 2px;
color: var(--color-8);
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 2px solid var(--color-8);
display: inline-block;
}
/* Deceased grid */
.dec-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
.dec-card {
background: var(--color-3);
border: 1px solid var(--color-10);
padding: 18px 22px;
transition: border-color 0.35s ease;
}
.dec-card:hover {
border-color: var(--color-8);
}
.dec-card-honored {
border-left: 4px solid var(--color-8);
background: var(--color-4);
}
.dec-name {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 15px;
font-weight: normal;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--color-5);
margin-bottom: 4px;
}
.dec-dept {
font-size: 13px;
color: var(--color-6);
}
.dec-rip {
margin-top: 8px;
font-size: 12px;
color: var(--color-8);
letter-spacing: 1.5px;
text-transform: uppercase;
font-family: var(--font-title), 'opensans-bold', sans-serif;
}
/* Submit banner */
.submit-banner {
display: flex;
gap: 14px;
align-items: flex-start;
margin-top: 36px;
padding: 18px 22px;
background: rgba(230,57,70,.12);
border-left: 4px solid var(--color-8);
font-size: 14px;
line-height: 1.5;
}
.submit-banner svg {
width: 18px;
height: 18px;
fill: var(--color-8);
flex-shrink: 0;
margin-top: 2px;
}
.submit-banner-text strong {
display: block;
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
color: var(--color-5);
}
.submit-banner-text p {
font-size: 14px;
color: var(--color-6);
margin: 0;
}
.submit-banner-text a {
color: var(--color-8);
text-decoration: underline;
transition: color 0.35s ease;
}
.submit-banner-text a:hover {
color: var(--color-9);
}
.memorial-portrait {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: var(--color-1);
aspect-ratio: 4 / 5;
width: 100%;
padding: 32px 16px;
gap: 28px;
border: 2px solid var(--color-8);
}
.memorial-portrait-ring {
display: flex;
align-items: center;
justify-content: center;
width: 62%;
aspect-ratio: 1 / 1;
border: 4px solid var(--color-8);
border-radius: 50%;
}
.memorial-portrait-initials {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: clamp(48px, 12vw, 166px);
font-weight: normal;
line-height: 1;
color: var(--color-5);
-webkit-text-stroke: 2px var(--color-8);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.memorial-portrait-rank {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: clamp(14px, 2.2vw, 18px);
font-weight: normal;
color: var(--color-8);
letter-spacing: 0.18em;
text-transform: uppercase;
}
/* Actual photo inside the ring — crops to a circle, fills the ring */
.memorial-portrait-ring img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
filter: grayscale(.15) contrast(1.05);
transition: transform 0.6s ease, filter 0.35s ease;
}
.lod-card:hover .memorial-portrait-ring img {
transform: scale(1.08);
filter: grayscale(0) contrast(1.1);
}
/* Memoriam content area padding */
body.memoriam main#site-content {
padding: 60px 20px 0;
}
/* Responsive: memoriam grids */
@media only screen and (max-width:900px) {
.lod-grid {
grid-template-columns: repeat(2, 1fr);
}
.dec-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width:560px) {
.lod-grid {
grid-template-columns: 1fr;
}
.dec-grid {
grid-template-columns: 1fr;
}
.lod-header h2 {
font-size: 22px;
}
.dec-header h2 {
font-size: 22px;
}
}
/* DEPARTMENTS — body.departments (district/card rules) */
body.departments .dist-list-section {
padding: 0 0 60px;
}
body.departments .dist-section {
scroll-margin-top: 160px;
}
body.departments .dist-section.is-hidden {
display: none;
}
body.departments .dist-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
flex-wrap: wrap;
padding-bottom: 14px;
margin-bottom: 22px;
border-bottom: 2px solid var(--color-8);
z-index: 49;
}
body.departments .dist-title {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 28px;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--color-5);
margin: 0;
padding-bottom: 0;
border-bottom: none;
}
body.departments .dist-count {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-8);
}
body.departments .co-list {
list-style: none;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding: 0;
margin: 0;
}
body.departments .co-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
background: var(--color-3);
border: 1px solid var(--color-10);
border-left: 3px solid var(--color-8);
border-radius: 4px;
overflow: hidden; /* keeps the red left edge inside the rounded corner */
transition: border-color 0.35s ease, transform 0.35s ease, background-color 0.35s ease;
background-image: none;
}
body.departments .co-card:hover {
background: var(--color-4);
transform: translateX(3px);
}
body.departments .co-card.is-hidden {
display: none;
}
/* Linked cards wrap their content in a block-level (.co-card-link) —
the badge/name/icon flex layout has to live on the anchor for those,
since .co-card itself only contains the single child. */
body.departments .co-card--link {
padding: 0;
}
body.departments .co-card-link {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 16px;
text-decoration: none;
color: inherit;
}
body.departments .co-num {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 42px;
padding: 0 8px;
background: var(--color-8);
color: var(--color-5);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 15px;
font-weight: normal;
letter-spacing: 0.5px;
border-radius: 3px;
}
body.departments .co-name {
flex: 1;
font-size: 14px;
color: var(--color-5);
line-height: 1.35;
transition: color 0.25s;
}
body.departments .co-card--link:hover .co-name {
color: var(--color-5);
}
/* External-link icon inside linked cards */
body.departments .co-link-icon {
display: inline-flex;
align-items: center;
color: var(--color-7);
transition: color 0.25s;
}
body.departments .co-card--link:hover .co-link-icon {
color: var(--color-8);
}
/* Hover: keep the existing slide, brighten the accent edge */
body.departments .co-card--link:hover {
border-left-color: var(--color-9);
}
/* Non-link cards (no website) stay visually quieter, so linked cards
read as clearly clickable by comparison */
body.departments .co-card:not(.co-card--link) {
border-left-color: var(--color-7);
}
body.departments .co-card:not(.co-card--link) .co-num {
background: var(--color-4);
color: var(--color-6);
}
body.departments .co-card:not(.co-card--link):hover {
background: var(--color-3);
transform: none;
}
body.departments .merger-note {
margin-top: 18px;
padding: 14px 18px;
background: rgba(230, 57, 70, 0.07);
border-left: 3px solid var(--color-8);
font-size: 13px;
color: var(--color-6);
font-style: italic;
display: flex;
gap: 10px;
align-items: flex-start;
}
body.departments .merger-note svg {
width: 12px;
height: 12px;
fill: var(--color-8);
margin-top: 2px;
flex-shrink: 0;
}
/* No-results message */
body.departments .no-results {
display: none;
padding: 60px 30px;
text-align: center;
background: var(--color-3);
border: 1px dashed var(--color-10);
font-size: 15px;
color: var(--color-6);
}
body.departments .no-results.is-shown {
display: block;
}
body.departments .no-results svg {
width: 32px;
height: 32px;
fill: var(--color-8);
margin-bottom: 14px;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Responsive: departments grid */
@media only screen and (max-width:1000px) {
body.departments .co-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width:560px) {
body.departments .co-list {
grid-template-columns: 1fr;
}
}
/*------------------------------------*\
CALENDAR — body.calendar
Styling only the elements calendar.php actually outputs:
.card / h1 / h2, the prev-month-next control row, the
table.calendar day grid, and the Events List below it.
\*------------------------------------*/
body.calendar .card-container {
padding-top: 50px;
padding-bottom: 50px;
}
body.calendar .card {
max-width: 1400px;
margin: 0 auto;
border-radius: 3px;
padding: 44px 40px;
box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
body.calendar .card h1 {
/* superseded by the new hero title above; hidden to avoid a duplicate heading */
display: none;
}
body.calendar .card.events h2 {
border-bottom-color: var(--color-8);
}
body.calendar .content-container {
margin-top: 10px;
}
/* Prev/next arrow buttons are hidden (superseded by the month rail above
and the bottom pagination bar below), but the month/year title itself
is kept — it's reordered via flex to sit under the legend, matching
the design. Reorder happens on .calendar-container below. */
body.calendar .calendar-container {
display: flex;
flex-direction: column;
}
body.calendar .calendar-buttons {
order: 2;
margin-bottom: 20px;
}
body.calendar .calendar-legend {
order: 1;
}
body.calendar .table.calendar {
order: 3;
}
body.calendar .calendar-pagination {
order: 4;
}
body.calendar .calendar-buttons .flex-block.prev,
body.calendar .calendar-buttons .flex-block.next {
display: none;
}
body.calendar .calendar-buttons .flex-container {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
flex-wrap: nowrap;
}
body.calendar .calendar-buttons .flex-block {
width: auto;
}
body.calendar .calendar-buttons .flex-block.one-half {
width: auto;
flex: 1;
}
body.calendar .calendar-month {
display: block;
text-align: left;
border-bottom: 3px solid var(--color-8);
margin: 15px;
padding: 0 0 14px;
font-size: 34px;
letter-spacing: 1px;
}
body.calendar .calendar-month .cm-month {
color: var(--color-5);
}
body.calendar .calendar-month .cm-year {
color: var(--color-6);
font-weight: 400;
font-size: 22px;
line-height: 1;
}
body.calendar .calendar-button {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 18px;
background: var(--color-1);
border: 1px solid var(--color-10);
border-radius: 2px;
color: var(--color-6);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
transition-duration: 0.35s;
white-space: nowrap;
}
body.calendar .calendar-button:hover {
border-color: var(--color-8);
color: var(--color-5);
}
body.calendar .calendar-button svg {
width: 11px;
height: 11px;
fill: var(--color-8);
}
/* Day grid — CSS Grid instead of display:table, because min-height on
table-cell boxes doesn't reliably force row height (row shrinks to
content regardless). display:contents on the row divs flattens them
so their day cells become direct grid items in one 7-column grid. */
body.calendar .table.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
width: 100%;
}
body.calendar .table.calendar .calendar-row {
display: contents;
}
body.calendar .table.calendar .calendar-row.header .calendar-day {
background: transparent;
border: none;
min-height: 0;
padding: 0 2px 12px;
color: var(--color-6);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
font-weight: normal;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
/* Show abbreviated weekday names without touching the PHP heading array */
font-size: 0;
}
body.calendar .table.calendar .calendar-row.header .calendar-day::before {
font-size: 11px;
letter-spacing: 1.5px;
}
body.calendar .table.calendar .calendar-row.header .calendar-day:nth-child(1)::before { content: "Sun"; }
body.calendar .table.calendar .calendar-row.header .calendar-day:nth-child(2)::before { content: "Mon"; }
body.calendar .table.calendar .calendar-row.header .calendar-day:nth-child(3)::before { content: "Tue"; }
body.calendar .table.calendar .calendar-row.header .calendar-day:nth-child(4)::before { content: "Wed"; }
body.calendar .table.calendar .calendar-row.header .calendar-day:nth-child(5)::before { content: "Thu"; }
body.calendar .table.calendar .calendar-row.header .calendar-day:nth-child(6)::before { content: "Fri"; }
body.calendar .table.calendar .calendar-row.header .calendar-day:nth-child(7)::before { content: "Sat"; }
body.calendar .table.calendar .calendar-day,
body.calendar .table.calendar .calendar-day-np {
display: block;
min-height: 100px;
background: var(--color-3);
border: 1px solid var(--color-10);
padding: 10px;
box-sizing: border-box;
}
body.calendar .table.calendar .calendar-day-np {
background: transparent;
border: none;
}
body.calendar .table.calendar #current-day {
border-color: var(--color-8);
box-shadow: inset 0 0 0 1px var(--color-8);
}
body.calendar .table.calendar .day-number {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 16px;
font-weight: normal;
color: var(--color-6);
margin-bottom: 8px;
text-align: left;
}
body.calendar .table.calendar #current-day .day-number {
color: var(--color-8);
}
body.calendar .table.calendar .calendar-event {
display: block;
background: rgba(139, 60, 60, .3) !important;
border-left: 5px solid var(--color-8);
color: #ffffff !important;
font-size: 12px;
line-height: 1.2;
padding: 7px 9px;
margin: 0 0 6px;
border-radius: 3px;
text-decoration: none;
white-space: normal;
overflow-wrap: break-word;
box-shadow: 0 4px 10px rgba(0,0,0,.35);
transition: filter 0.25s ease, transform 0.25s ease;
}
body.calendar .table.calendar .calendar-event:hover {
filter: brightness(1.12);
transform: translateY(-1px);
}
body.calendar .table.calendar .calendar-event.first-day {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
body.calendar .table.calendar .calendar-event.last-day {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
/* Events list */
body.calendar .table-noresponse {
display: block;
background: var(--color-1);
border: 1px solid var(--color-10);
border-left: 3px solid var(--color-8);
border-radius: 2px;
padding: 18px 20px;
margin-bottom: 14px;
}
body.calendar .tableRow-noresponse {
display: flex;
align-items: flex-start;
gap: 20px;
}
body.calendar .tableCell-noresponse {
color: var(--color-6);
font-size: 14px;
line-height: 1.6;
}
body.calendar .tableCell-noresponse:first-child {
flex-shrink: 0;
}
body.calendar .tableCell-noresponse:last-child {
flex: 1;
}
body.calendar .icon-container {
width: 60px;
text-align: center;
background: var(--color-3);
border: 1px solid var(--color-10);
border-radius: 2px;
overflow: hidden;
margin-right: 20px;
}
body.calendar .icon-top {
background: var(--color-8);
padding: 5px 0;
}
body.calendar .icon-top .event.month {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--color-5);
}
body.calendar .icon-bot {
padding: 8px 0;
}
body.calendar .icon-bot .event.day {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 22px;
color: var(--color-5);
}
body.calendar .event.name {
display: block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 17px;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--color-5);
margin-bottom: 6px;
text-align: left;
}
body.calendar .event.time,
body.calendar .event.location {
color: var(--color-6);
}
body.calendar .event.description {
margin-top: 8px;
color: var(--color-6);
font-size: 14px;
line-height: 1.6;
}
body.calendar .card.events .cta {
margin-top: 12px;
}
/* Responsive: calendar */
@media only screen and (max-width:900px) {
.training-gallery {
grid-template-columns: repeat(2, 1fr);
}
body.blog .post-img-container .featured-img {
max-width: 100% !important;
height: auto;
}
body.calendar .card {
padding: 32px 24px;
}
body.calendar .card {
padding: 26px 18px;
}
}
@media only screen and (max-width:640px) {
body.calendar .card {
padding: 26px 18px;
}
body.calendar .card h1 {
font-size: 24px;
margin-bottom: 22px;
}
body.calendar .calendar-button span {
display: none;
}
body.calendar .calendar-button {
padding: 10px 12px;
}
body.calendar .calendar-month {
font-size: 17px;
}
body.calendar .table.calendar {
gap: 3px;
}
body.calendar .table.calendar .calendar-row.header .calendar-day {
font-size: 8px;
letter-spacing: .5px;
padding: 0 0 8px;
}
body.calendar .table.calendar .calendar-day,
body.calendar .table.calendar .calendar-day-np {
min-height: 52px;
padding: 4px;
}
body.calendar .table.calendar .day-number {
font-size: 11px;
margin-bottom: 3px;
}
body.calendar .table.calendar .calendar-event {
font-size: 8px;
padding: 2px 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.calendar .tableRow-noresponse {
gap: 12px;
}
body.calendar .icon-container {
width: 44px;
}
body.calendar .icon-top .event.month {
font-size: 9px;
}
body.calendar .icon-bot .event.day {
font-size: 16px;
}
body.calendar .event.name {
font-size: 15px;
}
}
/* Mobile calendar: simple vertical day list instead of the 7-col grid
(matches reference layout). Purely additive — only adds new rules
after the existing <640px block above, doesn't edit/remove anything
already there. Reuses .table.calendar's existing grid + gap and the
.calendar-row{display:contents} flattening already in place, so
calendar.php's markup/PHP loop needs no changes. */
@media only screen and (max-width:640px) {
body.calendar .table.calendar {
grid-template-columns: 1fr;
gap: 6px;
}
body.calendar .table.calendar .calendar-row.header,
body.calendar .table.calendar .calendar-day-np {
display: none;
}
body.calendar .table.calendar .calendar-day {
display: grid;
grid-template-columns: 34px 1fr;
column-gap: 12px;
row-gap: 4px;
align-items: start;
min-height: auto;
padding: 12px 14px;
}
body.calendar .table.calendar .day-number {
grid-column: 1;
grid-row: 1;
margin-bottom: 0;
font-size: 15px;
}
body.calendar .table.calendar .calendar-event {
grid-column: 2;
font-size: 12px;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
body.calendar .table.calendar #current-day {
background: rgba(230,57,70,.12);
}
}
@media only screen and (max-width:399px) {
.training-gallery {
grid-template-columns: repeat(1, 1fr) !important;
}
}
/* Hero add-on — "Today is..." badge + Jump to Today (calendar page only) */
body.calendar .interior-landing .today-badge {
display: inline-flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: 30px;
padding: 14px 20px;
background: rgba(0, 0, 0, .5);
border: 1px solid var(--color-10);
border-radius: 3px;
}
body.calendar .interior-landing .today-badge svg {
width: 16px;
height: 16px;
fill: var(--color-8);
}
body.calendar .interior-landing .today-badge > span {
font-size: 14px;
font-weight: 600;
color: var(--color-5);
}
body.calendar .interior-landing .today-jump {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-8);
text-decoration: none;
padding-left: 16px;
border-left: 1px solid rgba(230,57,70,.35);
}
body.calendar .interior-landing .today-jump:hover {
color: var(--color-9);
}
/* Month rail — 12-month horizontal pill strip (mirrors .dist-rail visuals, own rules) */
body.calendar .month-rail {
position: sticky;
top: 91px;
z-index: 50;
background: rgba(10,10,10,.97);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--color-10);
padding: 14px 0;
margin: 0 0 10px;
}
body.calendar .month-rail-inner {
display: flex;
gap: 6px;
overflow-x: auto;
padding: 0 24px;
scrollbar-width: thin;
scrollbar-color: var(--color-8) transparent;
-webkit-overflow-scrolling: touch;
}
body.calendar .month-rail-inner::-webkit-scrollbar {
height: 4px;
}
body.calendar .month-rail-inner::-webkit-scrollbar-track {
background: transparent;
}
body.calendar .month-rail-inner::-webkit-scrollbar-thumb {
background: var(--color-8);
border-radius: 2px;
}
body.calendar .month-rail a {
flex-shrink: 0;
display: inline-flex;
align-items: baseline;
gap: 4px;
padding: 8px 14px;
background: var(--color-2);
border: 1px solid var(--color-10);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-6);
text-decoration: none;
transition: border-color 0.35s ease, color 0.35s ease, background-color 0.35s ease;
}
body.calendar .month-rail a:hover {
border-color: var(--color-8);
color: var(--color-5);
background: rgba(230,57,70,.12);
}
body.calendar .month-rail a.is-active {
border-color: var(--color-8);
color: var(--color-5);
background: var(--color-8);
}
/* Legend row */
body.calendar .calendar-legend {
display: flex;
gap: 22px;
flex-wrap: wrap;
align-items: center;
margin-bottom: 18px;
border: 1px solid var(--color-10);
background: var(--color-3);
padding: 15px;
}
body.calendar .legend-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--color-6);
}
body.calendar .legend-item i {
display: inline-block;
width: 14px;
height: 14px;
border-radius: 2px;
background: transparent;
}
body.calendar .legend-today i {
background: transparent;
border: 2px solid var(--color-8);
}
body.calendar .legend-event i {
width: 4px;
background: var(--color-8);
border-radius: 2px;
}
body.calendar .legend-past i {
background: var(--color-4);
border: 1px solid var(--color-10);
opacity: .6;
}
/* Past dates — dimmed via :has(), no PHP loop change needed.
Matches calendar-day cells before #current-day in the same row,
and every .calendar-row that has a later sibling row containing #current-day. */
body.calendar .table.calendar .calendar-day:has(~ #current-day),
body.calendar .table.calendar .calendar-row:has(~ .calendar-row #current-day) .calendar-day {
opacity: .5;
}
/* Bottom pagination bar */
body.calendar .calendar-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-top: 24px;
padding-top: 20px;
border: 1px solid var(--color-10);
background: var(--color-3);
padding: 15px;
}
body.calendar .cal-page-link {
display: flex;
flex-direction: column;
text-decoration: none;
padding: 6px 18px;
border: 1px solid var(--color-10);
border-radius: 2px;
background: var(--color-3);
transition: border-color 0.35s ease;
min-width: 150px;
}
body.calendar .cal-page-link:hover {
border-color: var(--color-8);
}
body.calendar .cal-page-link.next {
text-align: right;
align-items: flex-end;
}
a.cal-page-link.prev {
text-align: left;
}
body.calendar .cpl-label {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-7);
}
body.calendar .cpl-month {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 14px;
color: var(--color-5);
white-space: nowrap;
}
body.calendar .cal-page-current {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
}
body.calendar .cpc-count {
font-size: 10px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-7);
}
body.calendar .cpc-month {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 16px;
color: var(--color-5);
}
/* Responsive: hero add-on / month rail / legend / pagination */
@media only screen and (max-width:640px) {
body.calendar .interior-landing .today-badge {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
body.calendar .interior-landing .today-jump {
padding-left: 0;
border-left: none;
}
body.calendar .month-rail {
top: 80px;
padding: 12px 0;
}
body.calendar .month-rail-inner {
padding: 0 16px;
}
body.calendar .calendar-legend {
gap: 14px;
font-size: 12px;
}
body.calendar .calendar-pagination {
flex-wrap: wrap;
justify-content: center;
text-align: center;
}
body.calendar .cal-page-link,
body.calendar .cal-page-link.next {
max-width: none;
flex: 1 1 40%;
align-items: center;
text-align: center;
}
body.calendar .cpl-month {
white-space: normal;
}
}
/* === TRAINING SECTION (G) === */
section#training {
background-color: var(--color-2);
padding: 100px 20px;
}
section#training .section-head {
margin-bottom: 30px;
}
.training-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-bottom: 50px;
}
.training-gallery .frame {
overflow: hidden;
}
.training-gallery img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
}
@media only screen and (max-width:640px) {
.training-gallery {
grid-template-columns: repeat(2, 1fr);
}
}
.training-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 18px;
}
.training-actions .cta {
margin: 0;
}
/* === GALLERY PAGE (H) === */
section.gallery {
background-color: var(--color-2);
}
section.gallery .section-head {
margin-bottom: 40px;
}
/* Filters */
.gallery-filters {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 44px;
}
.gallery-filters button {
background: var(--color-3);
border: 1px solid var(--color-10);
color: var(--color-6);
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
font-weight: normal;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 11px 18px;
transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.gallery-filters button:hover {
border-color: var(--color-8);
color: var(--color-5);
}
.gallery-filters button.on {
background: var(--color-8);
border-color: var(--color-8);
color: var(--color-5);
}
/* Grid */
.gallery-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.gallery-grid figure {
position: relative;
overflow: hidden;
aspect-ratio: 4 / 3;
margin: 0;
background: var(--color-3);
border: 1px solid var(--color-10);
transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.gallery-grid figure:hover {
border-color: var(--color-8);
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(0,0,0,.45);
}
.gallery-grid figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.8s cubic-bezier(.4,0,.2,1);
}
.gallery-grid figure:hover img {
transform: scale(1.08);
}
/* Logos / flyers / non-photo graphics — show the whole image instead of cropping it */
.gallery-grid figure.fit-contain img {
object-fit: contain;
background: var(--color-2);
}
.gallery-grid figure.fit-contain:hover img {
transform: none;
}
.gallery-grid figcaption {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background: linear-gradient(transparent, rgba(10,10,10,.92));
padding: 30px 14px 12px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 13px;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--color-5);
text-align: left;
}
/* Placeholder box shown until a real photo replaces it */
.gphoto-ph {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: repeating-linear-gradient(45deg, var(--color-3), var(--color-3) 10px, var(--color-4) 10px, var(--color-4) 20px);
border: 1px dashed var(--color-11);
}
.gphoto-ph span {
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-7);
}
@media only screen and (max-width:1024px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media only screen and (max-width:900px) {
.gallery-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media only screen and (max-width:640px) {
.gallery-filters button {
padding: 9px 14px;
font-size: 11px;
}
.gallery-grid {
grid-template-columns: 1fr;
}
}
/* === FIRE SAFETY PAGE (I) === */
.fs-content {
background-color: var(--color-2);
}
.fs-content .wrapper.small {
text-align: left;
}
.fs-question {
color: var(--color-5);
text-transform: none;
letter-spacing: normal;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 26px;
line-height: 1.3;
border-bottom: none;
margin-bottom: 20px;
padding-bottom: 0;
}
.fs-note {
font-size: 17px;
line-height: 1.6;
color: var(--color-6);
margin-bottom: 14px;
max-width: 66ch;
}
.fs-note strong {
color: var(--color-5);
}
.fs-note.co {
color: var(--color-5);
}
.fs-links-intro {
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--color-7);
margin: 34px 0 18px;
}
.fs-links {
list-style: none;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 0;
margin: 0 0 34px;
}
/* Card styled to match body.departments .co-card--link / body.officers .officer-card */
.fs-card {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 14px 16px;
background: var(--color-3);
border: 1px solid var(--color-10);
border-left: 4px solid var(--color-8);
border-radius: 4px;
text-decoration: none;
transition: background-color 0.25s ease, border-color 0.35s ease, transform 0.35s ease;
}
.fs-card:hover {
background: var(--color-4);
border-left-color: var(--color-9);
transform: translateX(3px);
}
.fs-card-body {
flex: 1;
min-width: 0;
}
.fs-card-name {
display: block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 14px;
letter-spacing: .3px;
text-transform: none;
color: var(--color-5);
line-height: 1.35;
}
.fs-card-url {
display: block;
font-family: var(--font-text-regular), 'opensans-regular', sans-serif;
font-size: 12px;
color: var(--color-7);
margin-top: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fs-card-link-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
color: var(--color-7);
transition: color 0.25s;
}
.fs-card:hover .fs-card-link-icon {
color: var(--color-8);
}
.fs-video-link {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 15px;
letter-spacing: .3px;
text-transform: none;
color: var(--color-8);
text-decoration: none;
transition-duration: 0.35s;
}
.fs-video-link svg {
width: 18px;
height: 18px;
fill: var(--color-8);
transition-duration: 0.35s;
}
.fs-video-link:hover {
color: var(--color-9);
}
.fs-video-link:hover svg {
fill: var(--color-9);
}
@media only screen and (max-width:640px) {
.fs-links {
grid-template-columns: 1fr;
}
.fs-question {
font-size: 22px;
}
}
/* === NEWSLETTER SIGNUP BAND — dark/card theme === */
.newsletter-band {
background: var(--color-2);
padding: 70px 20px;
border-top: 1px solid var(--color-10);
border-bottom: 1px solid var(--color-10);
position: relative;
overflow: hidden;
}
.newsletter-band::before {
content: "";
position: absolute;
top: -140px;
right: -100px;
width: 380px;
height: 380px;
background: radial-gradient(circle, var(--color-12) 0%, transparent 70%);
pointer-events: none;
}
.newsletter-inner {
position: relative;
max-width: 620px;
margin: 0 auto;
background: var(--color-3);
border: 1px solid var(--color-10);
border-top: 3px solid var(--color-8);
border-radius: 3px;
padding: 50px 44px;
text-align: center;
}
.newsletter-icon {
width: 56px;
height: 56px;
margin: 0 auto 20px;
border-radius: 50%;
background: rgba(230,57,70,0.12);
display: flex;
align-items: center;
justify-content: center;
}
.newsletter-icon svg {
width: 24px;
height: 24px;
fill: none;
stroke: var(--color-8);
stroke-width: 1.8;
}
.newsletter-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 12px;
font-weight: normal;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--color-8);
margin-bottom: 14px;
}
.newsletter-eyebrow::before,
.newsletter-eyebrow::after {
content: "";
width: 24px;
height: 2px;
background: var(--color-8);
display: inline-block;
}
.newsletter-band h2 {
color: var(--color-5);
font-size: clamp(24px, 3vw, 32px);
line-height: 1.2;
border-bottom: none;
letter-spacing: .5px;
margin: 0 0 10px;
padding-bottom: 0;
text-align: center;
}
.newsletter-band h2 .accent {
color: var(--color-8);
}
.newsletter-band p {
color: var(--color-6);
font-size: 15px;
line-height: 1.55;
margin: 0 0 30px;
text-align: center;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
.newsletter-band .form-container {
max-width: 460px;
margin: 0 auto;
}
.newsletter-band form {
display: flex;
flex-wrap: wrap;
gap: 16px;
text-align: left;
}
.newsletter-band .form-input {
flex: 1 1 190px;
}
.newsletter-band div.form-input:nth-of-type(3) {
flex: 1 1 100%;
width: 100%;
}
.newsletter-band label {
display: block;
font-family: var(--font-title), 'opensans-bold', sans-serif;
font-size: 11px;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--color-6);
margin-bottom: 8px;
}
.newsletter-band label span {
color: var(--color-8);
}
.newsletter-band input[type="text"],
.newsletter-band input[type="email"] {
width: 100%;
padding: 13px 16px;
background: var(--color-4);
border: 1px solid var(--color-11);
border-radius: 2px;
color: var(--color-5);
font-family: var(--font-text-regular), 'opensans-regular', sans-serif;
font-size: 14px;
transition-duration: 0.3s;
}
.newsletter-band input::placeholder {
color: var(--color-7);
}
.newsletter-band input:focus {
outline: 0;
border-color: var(--color-8);
box-shadow: 0 0 0 3px var(--color-12);
}
.newsletter-band .form-container .cta {
flex: 1 1 100%;
width: 100%;
background-color: var(--color-8);
color: #fff;
border: none;
border-radius: 2px;
padding: 15px 26px;
font-family: var(--font-cta), 'opensans-bold', sans-serif;
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
cursor: pointer;
transition-duration: 0.35s;
}
.newsletter-band .form-container .cta:hover {
background-color: var(--color-9);
box-shadow: 0 0 18px var(--color-12);
}
@media only screen and (max-width:900px) {
.newsletter-inner { padding: 40px 26px; }
}
@media only screen and (max-width:480px) {
.newsletter-band .form-input { flex: 1 1 100%; }
}