/* ========================================================================= CLC Static Template — Custom Overrides ========================================================================= This file is intentionally empty of real rules. It is the ONE place a front-end developer should add custom CSS. - It is loaded LAST in (after bootstrap, the CLC theme CSS, and slick), so anything you write here wins the cascade without !important in most cases. - Do NOT edit the scraped theme files in ../assets/css/. They are a verbatim copy of dev.clcouncil.org and may be re-scraped/overwritten. Keep all of your changes here so updates stay painless. Handy reference values pulled from the scraped CLC theme: CLC red (icons/accents) ... #cd1e25 Footer background ......... #2f3133 (set inline in index.html) Footer text ............... #ffffff Primary UI fonts .......... NeueHelveticaPro55Roman / 75Bold / 77CondensedBold Display/serif font ........ "apple garamond" ========================================================================= */ :root { /* Expose a couple of brand tokens for your own components if useful. */ --clc-red: #cd1e25; --brand-red-hover: #BE040F; --clc-footer-bg: #2f3133; --clc-white: #ffffff; --main-brand-deep-teal: #2F5D62; --main-brand-ink-navy: #1c2b39; --main-brand-link-navy: #1C2B39; --main-brand-warm-slate: #6e6a61; --main-brand-warm-paper: #f7f4ee; --main-brand-warm-gold: #c98a2c; --main-brand-new-gold: #DFAE64; --main-brand-deep-teal: #2F5D62; --accent-chart-rust: #a85c32; --heading-font-family: NeueHelveticaPro55Roman, Helvetica, Source Sans Pro, sans-serif; --heading-h2: clamp(26px, 4vw, 46px); --heading-h3: clamp(18px, 1.6vw, 22px); --heading-h4: clamp(15px, 1.2vw, 18px); --heading-h5: clamp(13px, 1vw, 15px); --interactive-label: clamp(11px, 0.85vw, 12px); --interactive-button-label: clamp(10px, 0.80vw, 11px); --interactive-button: clamp(13px, 1vw, 15px); --structure-spacing-margin-top: 70px; --object-spacing-spacing-4: 4px; --object-spacing-spacing-8: 8px; --object-spacing-spacing-12: 12px; --object-spacing-spacing-16: 16px; --object-spacing-spacing-24: 24px; --object-spacing-spacing-32: 32px; --object-spacing-spacing-40: 40px; --object-spacing-spacing-60: 60px; @media (width<=1024px) { --structure-spacing-margin-top: 50px; --object-spacing-spacing-4: 3px; --object-spacing-spacing-8: 6px; --object-spacing-spacing-12: 8px; --object-spacing-spacing-16: 12px; --object-spacing-spacing-24: 16px; --object-spacing-spacing-32: 24px; --object-spacing-spacing-40: 32px; --object-spacing-spacing-60: 40px; } @media (width<=744px) { --structure-spacing-margin-top: 40px; --object-spacing-spacing-4: 2px; --object-spacing-spacing-8: 4px; --object-spacing-spacing-12: 6px; --object-spacing-spacing-16: 8px; --object-spacing-spacing-24: 12px; --object-spacing-spacing-32: 16px; --object-spacing-spacing-40: 24px; --object-spacing-spacing-60: 32px; } } @media (width<=1300px) { .header__navigation { display: none; } } .has-clc-red-background-color { background-color: var(--wp--preset--color--clc-red) !important; } .wp-block-button__link.has-clc-red-background-color { &:hover { background-color: var(--brand-red-hover) !important; } } .has-clc-navy-background-color { background-color: var(--main-brand-ink-navy) !important; h2, h2.wp-block-heading { color: var(--clc-white); } } .tag-highlight-wrapper { display: flex; align-items: center; gap: var(--object-spacing-spacing-16); line-height: 1; } .tag-highlight { background-color: var(--main-brand-warm-gold); color: var(--main-brand-ink-navy) !important; font-size: var(--interactive-button-label); font-weight: 400; text-decoration: none; padding: var(--object-spacing-spacing-8) var(--object-spacing-spacing-16); display: inline-flex; line-height: 1; align-items: center; min-height: 30px; } .home { p:last-of-type { margin-bottom: 0; } h2:not(.home-hero-subtitle) { color: var(--main-brand-ink-navy) !important; font-size: var(--heading-h2) !important; margin-bottom: var(--object-spacing-spacing-32); } .home-latest-publications { h2, h2.wp-block-heading { color: var(--clc-white) !important; } } } .ast-grid { display: grid; row-gap: var(--object-spacing-spacing-32); column-gap: var(--object-spacing-spacing-32); &.ast-grid-2-1-col { grid-template-columns: 6.5fr 5.5fr; } &.ast-grid-4-col-auto { grid-template-columns: repeat(auto-fill, minmax(338px, 1fr)); } @media (width<=1024px) { &.ast-grid-2-1-col { grid-template-columns: 1fr; } } } .image-text-item-featured { display: flex; flex-direction: column; row-gap: var(--object-spacing-spacing-32); .image-text-image { max-width: 586px; img { object-fit: cover; object-position: left; } } } .image-text-item { display: flex; gap: var(--object-spacing-spacing-32); align-items: center; &:not(:last-of-type) { margin-bottom: var(--object-spacing-spacing-32); } @media (width<=768px) { align-items: flex-start; flex-direction: column; } .image-text-image { min-width: 230px; flex-shrink: 0; &.size-medium { max-width: 230px; } img { aspect-ratio: 1; object-fit: cover; object-position: center; } } } .image-text-item-featured, .image-text-item { color: var(--main-brand-deep-teal); text-decoration: none; &:hover .image-text-title, &:focus .image-text-title { color: var(--main-brand-link-navy); text-decoration: underline; } &:hover .image-text-tag, &:focus .image-text-tag { color: var(--main-brand-deep-teal); } .image-text-image { margin-bottom: 0; img { max-width: 100%; } } .image-text-title { margin-block: var(--object-spacing-spacing-12) var(--object-spacing-spacing-16); display: inline-flex; color: var(--main-brand-deep-teal); text-transform: uppercase; font-size: var(--heading-h3); font-weight: 700; text-decoration: none; line-height: 1.2; } .image-text-tag { font-size: var(--interactive-label); text-transform: uppercase; letter-spacing: 0.75px; } .image-text-attributes { display: flex; align-items: center; gap: var(--object-spacing-spacing-16); line-height: 1; } .image-text-date { color: var(--main-brand-warm-slate); font-weight: 300; font-style: italic; font-size: 14px; } } .home { .home-latest-publications { .header-row { display: flex; justify-content: space-between; align-items: center; gap: var(--object-spacing-spacing-24); @media (width<=768px) { flex-direction: column; } h2 { margin: 0; } } .scrolling-list { padding-bottom: 0 !important; .wrapper { margin: 0 !important; .slick-list { width: 100%; margin: 0; } .card { margin-right: var(--object-spacing-spacing-40); } } } .slider-utility { display: flex; align-items: center; justify-content: flex-end; gap: var(--object-spacing-spacing-60); .slider-navigation { display: flex; align-items: center; justify-content: flex-end; gap: var(--object-spacing-spacing-24); } } .slick-arrow.btn { width: 44px; height: 44px; background-color: var(--clc-white); color: var(--main-brand-ink-navy); display: flex; align-items: center; justify-content: center; border-radius: 0; padding: 0; @media (width>768px) { transform: none; top: -50px; &.next { right: calc(145px + var(--object-spacing-spacing-60)); } &.prev { right: calc(145px + var(--object-spacing-spacing-60) + 44px + var(--object-spacing-spacing-24)); left: auto; } } &:hover, &:focus { background-color: var(--main-brand-new-gold); border: 1px solid var(--main-brand-new-gold); color: var(--clc-white); svg path { stroke: var(--main-brand-ink-navy); } } svg { width: 20px; height: 20px; } } .wp-element-button, .wp-block-button__link { background-color: transparent; border-radius: 0 !important; padding: var(--object-spacing-spacing-16) var(--object-spacing-spacing-24) !important; line-height: 1; font-size: var(--interactive-button) !important; &:hover, &:focus { text-decoration: underline; background-color: var(--clc-white) !important; color: var(--main-brand-ink-navy) !important; } } .slider-navigation .wp-block-button__link { &:hover, &:focus { background-color: transparent !important; border-color: var(--main-brand-new-gold) !important; color: var(--main-brand-new-gold) !important; text-decoration: none; } } .card { background-color: transparent; padding: 0; box-shadow: none; margin: var(--object-spacing-spacing-40) 0 0 0; border: 0; padding: var(--object-spacing-spacing-24) var(--object-spacing-spacing-40) var(--object-spacing-spacing-24) 0; min-height: auto !important; color: var(--main-brand-warm-paper); width: 448px; max-width: 100%; flex: unset !important; &::after { content: ''; inset: 0 0 0 auto; position: absolute; width: 1px; height: 100%; background-color: var(--main-brand-warm-slate); } @media (width>1024px) { &:nth-child(3n+3) { &::after { content: none; } } } @media (width<=1024px) { &:nth-child(even) { &::after { content: none; } } } @media (width<=768px) { padding-left: calc(var(--object-spacing-spacing-40) * 2); &::after { content: none; } } .card-link { display: block; color: inherit; text-decoration: none; &:hover, &:focus { color: var(--clc-white); .card-title { color: var(--main-brand-new-gold); text-decoration: underline; } } } .card-title { margin-bottom: var(--object-spacing-spacing-16); text-transform: uppercase; color: var(--main-brand-warm-paper); font-size: var(--heading-h3); text-decoration: none; } .card-description { padding-bottom: var(--object-spacing-spacing-24); font-size: 18px; font-weight: 400; } .card-author { font-size: var(--interactive-label); text-transform: uppercase; font-weight: 500; letter-spacing: 0.75px; padding-bottom: var(--object-spacing-spacing-4); } .card-date { font-size: 14px; font-weight: 300; font-style: italic; padding-bottom: var(--object-spacing-spacing-16); } } } } .card-side-layout-left { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--object-spacing-spacing-60); padding-bottom: var(--object-spacing-spacing-40); @media (width<=1024px) { grid-template-columns: 1fr; } .card-media { &:has(img) { max-width: 747px; } img { max-width: 100%; } } .card-header { padding: 0 0 var(--object-spacing-spacing-32) 0; text-transform: uppercase; background-color: transparent; border-bottom: 0; border-radius: 0; .card-title { font-weight: 700; padding: 0; margin: 0; } } .card-body { padding: 0; } .card-content { .card-description { color: var(--main-brand-warm-slate); font-size: 18px; margin-bottom: var(--object-spacing-spacing-24); } .wp-block-button__link { border-radius: 0; } } } .callout { border-top: 1px solid var(--main-brand-warm-gold); padding: var(--object-spacing-spacing-32) var(--object-spacing-spacing-60) 0 var(--object-spacing-spacing-60); color: var(--main-brand-ink-navy); .callout-overline { font-size: var(--heading-h5); letter-spacing: 0.5px; font-weight: 700; text-transform: uppercase; } .callout-content { display: flex; align-items: center; gap: var(--object-spacing-spacing-40); @media (width<=768px) { align-items: flex-start; flex-direction: column; gap: var(--object-spacing-spacing-24); } .callout-highlight { color: var(--accent-chart-rust); font-size: 100px; font-weight: 700; line-height: 1; } .callout-body { font-size: 24px; } } } .home-featured-experts, .home-focus-area { .header-row { display: flex; align-items: center; justify-content: space-between; @media (width<=768px) { flex-direction: column; gap: var(--object-spacing-spacing-24); } h3 { color: var(--main-brand-ink-navy); font-size: var(--heading-h3); text-transform: uppercase; font-weight: 700; font-family: var(--heading-font-family); margin: 0; padding-block: var(--object-spacing-spacing-12) var(--object-spacing-spacing-16); } .wp-block-button__link { background-color: transparent; border-radius: 0; border: 1px solid var(--main-brand-deep-teal); color: var(--main-brand-deep-teal) !important; font-size: var(--interactive-button); padding: var(--object-spacing-spacing-16) var(--object-spacing-spacing-24) !important; letter-spacing: 0.5px; &:hover, &:focus { border-color: var(--main-brand-ink-navy); color: var(--main-brand-ink-navy) !important; } } } .ast-grid { padding-block: var(--object-spacing-spacing-32); } } .card-media-top { text-align: center; &:hover, &:focus { .card-media img { outline: 3px solid var(--main-brand-warm-gold); outline-offset: -3px; } .card-title { color: var(--main-brand-ink-navy); } } .card-media { img { width: 158px; height: 158px; border-radius: 50%; object-fit: cover; object-position: center; } } .card-title { font-size: var(--heading-h4); color: var(--main-brand-deep-teal); font-weight: 700; padding-block: var(--object-spacing-spacing-16) var(--object-spacing-spacing-8); margin-bottom: 0; } .card-title-sub { color: var(--main-brand-warm-slate); font-size: 14px; font-weight: 300; } } .home-featured-experts .ast-grid a *, .home-featured-experts .card-media-top a * { text-decoration: none !important; } .home-featured-experts .ast-grid a, .home-featured-experts .card-media-top a { text-decoration: none !important; }