:root{ /* Old HQ colors – for reference only --dark-blue: #1B2436; --main-blue: #283143; --cta-magenta: #E0295D; --link-color: #067CC1; --light-blue: #B4BED0; */ --dark-mauve: #590044; --mid-mauve: #6F004F; --light-mauve: #85165A; --mid-neutral: #D2C3B9; --light-neutral: #F1E7E3; --white: #FFFFFF; --mid-teal: #00A4A4; --light-teal: #60E5CF; --main-blue: #283143; /* retained from old palette for headlines, etc */ --pcma-headline-font: 'Gabarito', sans-serif; --pcma-body-font: 'Aptos', sans-serif; /* Font weights – semantic */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --default-headline-font-weight: var(--font-weight-bold); --default-body-font-weight: var(--font-weight-regular); } html:root{ --tec-font-family-sans-serif: var(--pcma-headline-font); } html body .tribe-common, html body .tribe-common .tribe-common-b2{ font-family: var(--pcma-body-font); } html body .tribe-common h1, html body .tribe-common h2, html body .tribe-common h3, html body .tribe-common h4, html body .tribe-common h5, html body .tribe-common h6 { font-family: var(--pcma-headline-font); } /* Global Footer Style */ /* ** sets base font size mostly for footer, as chapter sites ** use bootstrap with sets the base at 10px ** (but then overrides it at ) */ #pcma-footer { background: var(--dark-mauve); font-family: var(--pcma-body-font); font-size:16px; } #pcma-footer .footer-container{ display: flex; justify-content: stretch; align-items: stretch; max-width: 1300px; margin: 0 auto; } #pcma-footer .footer-social{font-size: 0px; /* prevents whitespace */ } #pcma-footer .footer-social a { mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; background-color: #fff; display: inline-block; width: 28px; height: 28px; margin: 2px; } #pcma-footer .footer-social a[data-network="facebook"] { -webkit-mask-image: url(../img/icons/facebook-circle.svg); mask-image: url(../img/icons/facebook-circle.svg); } #pcma-footer .footer-social a[data-network="twitter"] { -webkit-mask-image: url(../img/icons/twitter-circle.svg); mask-image: url(../img/icons/twitter-circle.svg); } #pcma-footer .footer-social a[data-network="linkedin"] { -webkit-mask-image: url(../img/icons/linkedin-circle.svg); mask-image: url(../img/icons/linkedin-circle.svg); } #pcma-footer .footer-social a[data-network="instagram"] { -webkit-mask-image: url(../img/icons/instagram-circle.svg); mask-image: url(../img/icons/instagram-circle.svg); } #pcma-footer .footer-social a[data-network="youtube"] { -webkit-mask-image: url(../img/icons/youtube-circle.svg); mask-image: url(../img/icons/youtube-circle.svg); } #pcma-footer .footer-social a[data-network="flickr"] { -webkit-mask-image: url(../img/icons/flickr-circle.svg); mask-image: url(../img/icons/flickr-circle.svg); } #pcma-footer .footer-social a[data-network="catalyst"] { -webkit-mask-image: url(../img/icons/catalyst-circle.svg); mask-image: url(../img/icons/catalyst-circle.svg); } #pcma-footer .footer-container .footer-col-1{ flex: 1; padding: 3em 1em; text-align: center; color: white; font-size: .9em; line-height: 1.5; } #pcma-footer .footer-logo img{ width: 210px; max-width: 60%; min-width: 160px; } #pcma-footer .footer-container .footer-col-1 .footer-contact{ margin:25px 0; } #pcma-footer .footer-container .footer-col-1 .footer-contact{ margin:25px 0; } #pcma-footer .footer-container .footer-col-1 .footer-contact p{ font-size: .9em; } #pcma-footer .footer-container .footer-col-1 .footer-contact a{ color:#ddd; text-decoration:underline; } #pcma-footer .footer-container .footer-col-2{ flex: 2; padding: 2em 2.5em; background: var(--mid-mauve); } #pcma-footer .footer-container .footer-col-2 h4{ color:white; text-transform:uppercase; padding-bottom:18px; border-bottom:1px solid #fff; font-size: 1.25em; line-height: 1.6em; font-family: var(--pcma-headline-font); } #pcma-footer .footer-container .footer-col-2 ul{ list-style:none; margin:0 0 20px; padding:0; background: transparent; } #pcma-footer .footer-container .footer-col-2 ul li{ display:inline-block; margin-bottom:16px; } #pcma-footer .footer-container .footer-col-2 ul li a{ color: #fff; font-size:.85em; padding:12px 15px 0 0; text-decoration:none; } #pcma-footer .sub-footer{ background:white; padding-bottom:30px; } #pcma-footer .sub-footer .sub-footer-container{ max-width:1300px; display:flex; justify-content:space-between; margin: 0 auto; padding: 18px 9px; } #pcma-footer .sub-footer .sub-footer-container .sub-footer-col-1{ display:flex; flex-wrap:nowrap; align-items:center; } #pcma-footer .sub-footer .sub-footer-container .sub-footer-col-1 img{ margin-right:28px; height: 31px; width: auto; } #pcma-footer .sub-footer .sub-footer-container .sub-footer-col-2 ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; justify-content:stretch; height:100%; font-size:.8em; } #pcma-footer .sub-footer .sub-footer-container .sub-footer-col-2 ul li + li{ border-left:1px solid var(--main-blue); } #pcma-footer .sub-footer .sub-footer-container .sub-footer-col-2 ul a{ color: var(--main-blue); text-decoration:none; padding:5px 12px; } @media(max-width:800px){ #pcma-footer .footer-container{ flex-direction: column-reverse; } #pcma-footer .sub-footer-container{ flex-direction: column; gap: 30px; } #pcma-footer .sub-footer .sub-footer-container .sub-footer-col-1, #pcma-footer .sub-footer .sub-footer-container .sub-footer-col-2 ul{ justify-content:center; text-align:center; } #pcma-footer .sub-footer .sub-footer-container .sub-footer-col-1{ flex-direction: column; gap: 25px; } #pcma-footer .sub-footer .sub-footer-container .sub-footer-col-1 img{ margin-right:0px; } }