/* =========================================================
DROPDOWN MENUS
========================================================= */
/* Parent menu item with dropdown */
.gp-nav-menu .menu-item-has-children {
position: relative;
}
/* Small chevron indicator on dropdown parents */
.gp-nav-menu .menu-item-has-children > a::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-left: 6px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 5px solid currentColor;
vertical-align: middle;
opacity: 0.6;
transition: transform 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.gp-nav-menu .menu-item-has-children:hover > a::after,
.gp-nav-menu .menu-item-has-children:focus-within > a::after {
transform: rotate(-180deg);
opacity: 1;
}
/* The submenu */
.gp-nav-menu .sub-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 220px;
background: var(--gp-off-white);
border: 1px solid var(--gp-cream-dark);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 8px;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
z-index: 100;
}
.gp-nav-menu .menu-item-has-children:hover > .sub-menu,
.gp-nav-menu .menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
/* Bridge to prevent hover drop between parent and submenu */
.gp-nav-menu .menu-item-has-children::before {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 8px;
}
/* Submenu items */
.gp-nav-menu .sub-menu li {
display: block;
margin: 0;
}
.gp-nav-menu .sub-menu a {
display: block;
padding: 12px 16px;
color: var(--gp-charcoal);
font-size: 0.9375rem;
font-weight: 500;
border-radius: 6px;
border-bottom: none !important;
white-space: nowrap;
transition: all 250ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.gp-nav-menu .sub-menu a:hover {
background: var(--gp-cream-light);
color: var(--gp-terracotta);
border-bottom: none !important;
}
/* Mobile: dropdowns become inline expanded lists */
@media (max-width: 900px) {
.gp-nav-menu .menu-item-has-children > a::after {
display: none;
}
.gp-nav-menu .sub-menu {
position: static;
transform: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
box-shadow: none;
border: none;
background: transparent;
padding: 0 0 0 16px;
margin-top: 8px;
}
.gp-nav-menu .menu-item-has-children::before {
display: none;
}
.gp-nav-menu .sub-menu a {
padding: 8px 0;
font-size: 0.875rem;
}
}
/* =========================================================
SAGE SWOOSH DIVIDER
Matches the underline swoosh from the logo
========================================================= */
.wp-block-separator.is-style-gp-swoosh {
border: none;
background: none;
height: 24px;
max-width: 320px;
margin: 48px auto;
position: relative;
overflow: visible;
}
.wp-block-separator.is-style-gp-swoosh::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16 Q 80 4, 160 10 T 316 8' fill='none' stroke='%236B8F71' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 0.85;
}
.wp-block-separator.is-style-gp-swoosh-short {
border: none;
background: none;
height: 20px;
max-width: 180px;
margin: 32px auto;
position: relative;
overflow: visible;
}
.wp-block-separator.is-style-gp-swoosh-short::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 20' preserveAspectRatio='none'%3E%3Cpath d='M4 12 Q 50 4, 90 8 T 176 6' fill='none' stroke='%236B8F71' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
opacity: 0.85;
}
/* =========================================================
FULL-WIDTH PAGE CONTENT + SECTION BACKGROUNDS
Makes About-style pages support colored full-width sections
========================================================= */
.gp-page__body--flex {
padding: 0;
}
.gp-page__body--flex > *:not(.alignwide):not(.alignfull) {
max-width: 720px;
margin-left: auto;
margin-right: auto;
padding-left: var(--space-6);
padding-right: var(--space-6);
}
.gp-page__body--flex > .alignwide {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
padding-left: var(--space-6);
padding-right: var(--space-6);
}
.gp-page__body--flex > .alignfull {
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* Section background block styles */
.wp-block-group.is-style-gp-section-cream {
background: var(--gp-cream-light);
padding: var(--space-16) var(--space-6);
margin: var(--space-8) 0;
}
.wp-block-group.is-style-gp-section-sage {
background: var(--gp-sage-whisper);
padding: var(--space-16) var(--space-6);
margin: var(--space-8) 0;
}
.wp-block-group.is-style-gp-section-terracotta {
background: var(--gp-terracotta-whisper);
padding: var(--space-16) var(--space-6);
margin: var(--space-8) 0;
}
.wp-block-group.is-style-gp-section-charcoal {
background: var(--gp-charcoal);
color: var(--gp-cream);
padding: var(--space-16) var(--space-6);
margin: var(--space-8) 0;
}
.wp-block-group.is-style-gp-section-charcoal h1,
.wp-block-group.is-style-gp-section-charcoal h2,
.wp-block-group.is-style-gp-section-charcoal h3 {
color: var(--gp-cream);
}
/* Stat block (works with Gutenberg block style variant) */
.wp-block-group.is-style-gp-stat {
background: var(--gp-terracotta-whisper);
padding: var(--space-10) var(--space-8);
border-radius: var(--radius-lg);
text-align: center;
margin: var(--space-8) 0;
}
.wp-block-group.is-style-gp-stat h1,
.wp-block-group.is-style-gp-stat h2,
.wp-block-group.is-style-gp-stat h3 {
font-family: var(--font-heading);
font-size: clamp(3rem, 8vw, 5rem);
line-height: 1;
color: var(--gp-terracotta);
margin: 0 0 var(--space-2);
font-weight: 700;
}
.wp-block-group.is-style-gp-stat p {
font-size: 0.9375rem;
color: var(--gp-charcoal-muted);
margin: 0;
}
/* Shortcode-rendered app cards grid */
.gp-apps-grid--shortcode {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--space-6);
margin: var(--space-8) 0;
}
/* =========================================================
ABOUT PAGE — Custom template styles
Paste this into Appearance > Customize > Additional CSS
========================================================= */
.gp-about-page {
background: var(--gp-off-white);
}
/* HERO */
.gp-about-hero {
background: var(--gp-cream);
padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
text-align: center;
position: relative;
overflow: hidden;
}
.gp-about-hero::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 20 Q 300 5, 600 15 T 1200 12' fill='none' stroke='%236B8F71' stroke-width='2.5' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
pointer-events: none;
}
.gp-about-hero__inner {
max-width: 820px;
margin: 0 auto;
}
.gp-about-hero__headline {
font-family: var(--font-heading);
font-size: clamp(2.25rem, 5vw, 3.75rem);
line-height: 1.1;
margin: 0.5rem 0 1.5rem;
color: var(--gp-charcoal);
font-weight: 700;
}
.gp-about-hero__lead {
font-family: var(--font-heading);
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: 1.5;
color: var(--gp-charcoal);
max-width: 620px;
margin: 0 auto 1.5rem;
font-style: italic;
font-weight: 400;
}
.gp-about-hero__intro {
max-width: 620px;
margin: 0 auto;
color: var(--gp-charcoal-muted);
font-size: 1.0625rem;
line-height: 1.7;
}
/* STATS SECTION - Sage whisper background */
.gp-about-stats {
background: var(--gp-sage-whisper);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.gp-about-stats__header {
max-width: 700px;
margin: 0 auto 3rem;
}
.gp-about-stats__header h2 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3vw, 2.5rem);
color: var(--gp-charcoal);
margin: 0.5rem 0 0;
}
.gp-about-stats__grid {
display: grid;
gap: clamp(2rem, 4vw, 3rem);
max-width: 1000px;
margin: 0 auto;
}
.gp-about-stats__grid--1 { grid-template-columns: 1fr; }
.gp-about-stats__grid--2 { grid-template-columns: repeat(2, 1fr); }
.gp-about-stats__grid--3 { grid-template-columns: repeat(3, 1fr); }
.gp-about-stats__grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
.gp-about-stats__grid--3,
.gp-about-stats__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.gp-about-stats__grid--2,
.gp-about-stats__grid--3,
.gp-about-stats__grid--4 { grid-template-columns: 1fr; }
}
.gp-about-stat {
text-align: center;
padding: 1rem;
}
.gp-about-stat__number {
font-family: var(--font-heading);
font-size: clamp(3rem, 7vw, 4.5rem);
line-height: 1;
color: var(--gp-sage-dark);
font-weight: 700;
margin-bottom: 0.5rem;
letter-spacing: -0.02em;
}
.gp-about-stat__label {
font-size: 0.9375rem;
color: var(--gp-charcoal);
font-weight: 500;
line-height: 1.4;
}
/* WHAT WE DO */
.gp-about-mission {
background: var(--gp-off-white);
padding: clamp(4rem, 8vw, 6rem) 0;
}
.gp-about-mission__header {
max-width: 720px;
margin: 0 auto 3rem;
}
.gp-about-mission__header h2 {
font-family: var(--font-heading);
font-size: clamp(2rem, 4vw, 3rem);
color: var(--gp-charcoal);
margin: 0.5rem 0 1rem;
}
.gp-about-mission__cards {
max-width: 1100px;
margin: 0 auto;
}
/* WHY WE'RE DIFFERENT */
.gp-about-story {
background: var(--gp-terracotta-whisper);
padding: clamp(4rem, 8vw, 6rem) 0;
}
.gp-about-story__pullquote {
margin: 1.5rem 0 2rem;
padding: 0;
border: none;
}
.gp-about-story__pullquote p {
font-family: var(--font-heading);
font-style: italic;
font-size: clamp(1.5rem, 3vw, 2rem);
line-height: 1.4;
color: var(--gp-terracotta-dark);
margin: 0;
font-weight: 400;
}
.gp-about-story__body {
font-size: 1.125rem;
line-height: 1.7;
color: var(--gp-charcoal);
max-width: 620px;
margin: 0 auto;
}
/* COMMITMENT CALLOUT */
.gp-about-commit {
padding: clamp(3rem, 5vw, 4rem) 0;
background: var(--gp-off-white);
}
.gp-about-commit__card {
background: var(--gp-sage-whisper);
border-left: 4px solid var(--gp-sage);
padding: clamp(2rem, 4vw, 3rem);
border-radius: var(--radius-md);
}
.gp-about-commit__headline {
font-family: var(--font-heading);
color: var(--gp-sage-dark);
margin: 0 0 1rem;
font-size: 1.5rem;
}
.gp-about-commit__card p {
margin: 0;
color: var(--gp-charcoal);
font-size: 1.0625rem;
line-height: 1.7;
}
/* FOUNDER TEASER */
.gp-about-founder {
background: var(--gp-cream);
padding: clamp(4rem, 8vw, 6rem) 0;
}
.gp-about-founder__grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 800px) {
.gp-about-founder__grid {
grid-template-columns: 1fr;
}
}
.gp-about-founder__image img {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
display: block;
}
.gp-about-founder__headline {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3.5vw, 2.5rem);
line-height: 1.2;
margin: 0.5rem 0 1rem;
color: var(--gp-charcoal);
}
.gp-about-founder__content p {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--gp-charcoal);
margin-bottom: 1.5rem;
}
/* =========================================================
MOBILE HEADER — Smart CTA button behavior
========================================================= */
/* Tablet and below: shrink button, tighten header */
@media (max-width: 900px) {
.gp-header__inner {
gap: 8px;
padding-left: 12px;
padding-right: 12px;
}
.gp-header a.gp-btn,
.gp-header a.gp-btn-primary,
.gp-header .gp-header__cta,
header a.gp-btn-primary {
font-size: 0.8125rem !important;
padding: 8px 14px !important;
white-space: nowrap;
flex-shrink: 0;
}
}
/* Small tablet: replace text with "Support" */
@media (max-width: 640px) {
.gp-header a.gp-btn-primary,
.gp-header .gp-header__cta,
header a.gp-btn-primary {
font-size: 0 !important;
padding: 8px 14px !important;
}
.gp-header a.gp-btn-primary::before,
.gp-header .gp-header__cta::before,
header a.gp-btn-primary::before {
content: "Support";
font-size: 0.8125rem;
}
}
/* Phone: hide the header button entirely — users can access from menu */
@media (max-width: 480px) {
.gp-header a.gp-btn-primary,
.gp-header .gp-header__cta,
header a.gp-btn-primary {
display: none !important;
}
}
/* =========================================================
MOBILE MENU — Fixed for proper item display
========================================================= */
@media (max-width: 900px) {
/* Make the mobile menu container wider */
.gp-nav-menu,
.gp-header nav > ul {
width: 250px !important;
max-width: 90vw !important;
box-sizing: border-box;
}
/* Menu items display as full-width rows */
.gp-nav-menu li,
.gp-nav-menu .menu-item {
display: block !important;
width: 100% !important;
box-sizing: border-box;
}
/* Menu link styling - single line, proper padding */
.gp-nav-menu > li > a,
.gp-nav-menu > .menu-item > a {
display: block !important;
padding: 14px 20px !important;
white-space: nowrap !important;
font-size: 1rem !important;
width: 100% !important;
box-sizing: border-box;
}
/* Submenu items */
.gp-nav-menu .sub-menu {
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
}
.gp-nav-menu .sub-menu li {
width: 100% !important;
}
.gp-nav-menu .sub-menu a {
display: block !important;
padding: 10px 20px 10px 36px !important;
white-space: nowrap !important;
font-size: 0.9rem !important;
width: 100% !important;
box-sizing: border-box;
}
}
/* =========================================================
FOUNDER STORY PAGE
Paste this into Appearance > Customize > Additional CSS
========================================================= */
.gp-fs-page {
background: var(--gp-off-white);
}
/* HERO */
.gp-fs-hero {
background: var(--gp-cream);
padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
position: relative;
}
.gp-fs-hero__grid {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.gp-fs-hero__grid.has-image {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: center;
text-align: left;
max-width: 1100px;
}
@media (max-width: 800px) {
.gp-fs-hero__grid.has-image {
grid-template-columns: 1fr;
text-align: center;
}
}
.gp-fs-hero__title {
font-family: var(--font-heading);
font-size: clamp(2.25rem, 5vw, 3.75rem);
line-height: 1.1;
margin: 0.5rem 0 1.5rem;
color: var(--gp-charcoal);
font-weight: 700;
}
.gp-fs-hero__subtitle {
font-family: var(--font-heading);
font-style: italic;
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: 1.5;
color: var(--gp-charcoal-muted);
max-width: 620px;
margin: 0 auto;
font-weight: 400;
}
.gp-fs-hero__grid.has-image .gp-fs-hero__subtitle {
margin: 0;
}
.gp-fs-hero__image img {
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
display: block;
}
/* NARRATIVE SECTIONS */
.gp-fs-narrative {
background: var(--gp-off-white);
padding: clamp(2.5rem, 5vw, 4rem) 0;
}
.gp-fs-section {
background: var(--gp-off-white);
padding: clamp(3.5rem, 7vw, 5.5rem) 0;
}
.gp-fs-section--cream {
background: var(--gp-cream-light);
}
.gp-fs-section__header {
text-align: center;
margin-bottom: 2.5rem;
}
.gp-fs-section__headline {
font-family: var(--font-heading);
font-size: clamp(1.875rem, 3.5vw, 2.75rem);
line-height: 1.2;
color: var(--gp-charcoal);
margin: 0.5rem 0 0;
}
/* PROSE — the actual narrative text */
.gp-fs-prose {
max-width: 640px;
margin: 0 auto;
font-size: 1.125rem;
line-height: 1.75;
color: var(--gp-charcoal);
}
.gp-fs-prose p {
margin: 0 0 1.25rem;
}
.gp-fs-prose p:last-child {
margin-bottom: 0;
}
.gp-fs-prose strong {
color: var(--gp-terracotta);
font-weight: 600;
}
/* PULLQUOTES */
.gp-fs-pullquote {
padding: clamp(3rem, 6vw, 5rem) 0;
position: relative;
}
.gp-fs-pullquote--sage {
background: var(--gp-sage-whisper);
}
.gp-fs-pullquote--terracotta {
background: var(--gp-terracotta-whisper);
}
.gp-fs-pullquote blockquote {
margin: 0;
padding: 0;
border: none;
}
.gp-fs-pullquote blockquote p {
font-family: var(--font-heading);
font-style: italic;
font-size: clamp(1.75rem, 4vw, 2.75rem);
line-height: 1.35;
color: var(--gp-charcoal);
margin: 0;
font-weight: 400;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.gp-fs-pullquote--terracotta blockquote p {
color: var(--gp-terracotta-dark);
}
.gp-fs-pullquote--sage blockquote p {
color: var(--gp-sage-dark);
}
.gp-fs-pullquote--large {
padding: clamp(4rem, 8vw, 7rem) 0;
}
.gp-fs-pullquote--large blockquote p {
font-size: clamp(2rem, 4.5vw, 3.25rem);
}
/* FOR ELLIE CALLOUT */
.gp-fs-callout-section {
padding: clamp(3rem, 6vw, 5rem) 0;
background: var(--gp-off-white);
}
.gp-fs-callout {
background: var(--gp-sage-whisper);
border-left: 4px solid var(--gp-sage);
padding: clamp(2.5rem, 5vw, 4rem);
border-radius: var(--radius-md);
max-width: 680px;
margin: 0 auto;
}
.gp-fs-callout__headline {
font-family: var(--font-heading);
font-size: clamp(1.875rem, 3.5vw, 2.5rem);
line-height: 1.2;
color: var(--gp-sage-dark);
margin: 0 0 1.5rem;
}
.gp-fs-callout__body {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--gp-charcoal);
}
.gp-fs-callout__body p {
margin: 0 0 1rem;
}
.gp-fs-callout__signature {
font-family: var(--font-heading);
font-style: italic;
color: var(--gp-charcoal-muted);
margin: 2rem 0 0;
font-size: 1rem;
}
/* FINAL CTA */
.gp-fs-cta {
background: var(--gp-cream);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.gp-fs-cta__buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 480px) {
.gp-fs-cta__buttons {
flex-direction: column;
align-items: stretch;
}
}
/* =========================================================
NEWS SYSTEM — Archive + Single page styles
Paste this into Appearance > Customize > Additional CSS
========================================================= */
/* SHARED: Editorial Hero */
.gp-news-archive__hero {
background: var(--gp-cream);
padding: clamp(3rem, 6vw, 5rem) 0;
text-align: center;
position: relative;
}
.gp-news-archive__hero::after {
content: "";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 240px;
height: 4px;
background: linear-gradient(90deg, transparent 0%, var(--gp-sage) 20%, var(--gp-sage) 80%, transparent 100%);
opacity: 0.5;
border-radius: 2px;
}
.gp-news-archive__title {
font-family: var(--font-heading);
font-size: clamp(2.25rem, 5vw, 3.75rem);
line-height: 1.1;
margin: 0.5rem 0 1rem;
color: var(--gp-charcoal);
font-weight: 700;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.gp-news-archive__subtitle {
font-family: var(--font-heading);
font-style: italic;
max-width: 600px;
margin: 0 auto;
color: var(--gp-charcoal-muted);
}
/* FILTERS */
.gp-news-filters {
background: var(--gp-cream);
padding: 2rem 0 3rem;
}
.gp-news-filters__label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gp-charcoal-muted);
margin-bottom: 1rem;
text-align: center;
}
.gp-news-filters__tabs {
display: flex;
gap: 0.625rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.gp-news-tab {
background: transparent;
color: var(--gp-charcoal);
border: 2px solid var(--gp-cream-dark);
padding: 0.625rem 1.5rem;
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: all 200ms;
}
.gp-news-tab:hover {
border-color: var(--gp-sage);
color: var(--gp-charcoal);
}
.gp-news-tab.is-active {
background: var(--gp-terracotta);
color: white;
border-color: var(--gp-terracotta);
}
.gp-news-filters__secondary {
display: flex;
gap: 0.75rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.gp-news-select-chip {
display: flex;
align-items: center;
gap: 0.5rem;
background: white;
border: 1px solid var(--gp-cream-dark);
border-radius: 999px;
padding: 0.5rem 1.125rem;
font-size: 0.8125rem;
cursor: pointer;
}
.gp-news-select-chip > span {
color: var(--gp-charcoal-muted);
}
.gp-news-select-chip select {
border: none;
background: transparent;
font-family: var(--font-body);
font-weight: 600;
color: var(--gp-charcoal);
font-size: 0.8125rem;
cursor: pointer;
outline: none;
}
.gp-news-filters__count {
font-size: 0.8125rem;
color: var(--gp-charcoal-muted);
margin-left: 0.5rem;
}
.gp-news-filters__count strong {
color: var(--gp-charcoal);
}
.gp-news-filters__clear {
font-size: 0.8125rem;
color: var(--gp-terracotta);
text-decoration: none;
font-weight: 600;
margin-left: 0.5rem;
}
.gp-news-filters__clear:hover {
text-decoration: underline;
}
/* SECTION LABELS */
.gp-news-critical-header,
.gp-news-recent-header {
background: var(--gp-off-white);
padding: 2.5rem 0 0.75rem;
}
.gp-news-section-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gp-charcoal-muted);
}
.gp-news-section-label--critical {
color: var(--gp-terracotta);
}
/* NEWS LIST */
.gp-news-list {
background: var(--gp-off-white);
padding: 1rem 0;
}
.gp-news-list--critical {
padding-bottom: 1rem;
}
.gp-news-card {
display: block;
background: white;
border: 1px solid var(--gp-cream-dark);
border-radius: 12px;
padding: 1.75rem 2rem;
margin-bottom: 1.25rem;
text-decoration: none;
transition: all 200ms;
color: var(--gp-charcoal);
}
.gp-news-card:hover {
border-color: var(--gp-terracotta);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.gp-news-card--critical {
background: var(--gp-off-white);
border: 1px solid var(--gp-terracotta-whisper);
border-left: 4px solid var(--gp-terracotta);
}
.gp-news-card__badges {
display: flex;
gap: 0.5rem;
margin-bottom: 0.875rem;
flex-wrap: wrap;
}
.gp-news-card__title {
font-family: var(--font-heading);
font-weight: 600;
line-height: 1.25;
color: var(--gp-charcoal);
margin: 0.25rem 0 0.625rem;
font-size: 1.375rem;
}
.gp-news-card--critical .gp-news-card__title {
font-size: 1.625rem;
}
.gp-news-card__summary {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--gp-charcoal-muted);
margin: 0.625rem 0 1rem;
}
.gp-news-card__meta {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 1rem;
border-top: 1px solid var(--gp-cream);
font-size: 0.8125rem;
}
.gp-news-card--critical .gp-news-card__meta {
border-top-color: var(--gp-terracotta-whisper);
}
.gp-news-card__meta-left {
color: var(--gp-charcoal-muted);
}
.gp-news-card__meta-left strong {
color: var(--gp-charcoal);
}
.gp-news-card--critical .gp-news-card__meta-left strong {
color: var(--gp-terracotta);
}
.gp-news-card__meta-right {
color: var(--gp-terracotta);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
/* BADGES */
.gp-badge {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
border-radius: 4px;
display: inline-block;
}
.gp-badge-critical {
background: var(--gp-terracotta-whisper);
color: var(--gp-terracotta-dark);
}
.gp-badge-important {
background: #FAEEDA;
color: #854F0B;
}
.gp-badge-info,
.gp-badge-informational {
background: #E6F1FB;
color: #185FA5;
}
.gp-news-badge-state {
background: var(--gp-sage-whisper);
color: var(--gp-sage-dark);
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 4px;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.gp-news-badge-audience {
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 4px;
display: inline-block;
}
.gp-news-badge-audience--autism {
background: rgba(126, 98, 143, 0.18);
color: #55416A;
}
.gp-news-badge-audience--disability {
background: rgba(61, 133, 133, 0.15);
color: #285C5C;
}
.gp-news-badge-audience--adult {
background: rgba(193, 142, 58, 0.18);
color: #7A5A22;
}
.gp-news-badge-audience--all {
background: var(--gp-cream-light);
color: var(--gp-charcoal-muted);
border: 1px solid var(--gp-cream-dark);
font-weight: 500;
}
.gp-news-badge-topic {
background: white;
color: var(--gp-charcoal);
border: 1px solid var(--gp-cream-dark);
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
border-radius: 4px;
display: inline-block;
}
/* PAGINATION */
.gp-news-pagination {
text-align: center;
padding: 2.5rem 1.5rem;
background: var(--gp-off-white);
}
.gp-news-pagination a,
.gp-news-pagination .current {
display: inline-block;
padding: 0.625rem 1rem;
margin: 0 0.25rem;
background: white;
border: 1px solid var(--gp-cream-dark);
border-radius: 8px;
color: var(--gp-charcoal);
text-decoration: none;
font-weight: 500;
transition: all 200ms;
}
.gp-news-pagination a:hover {
border-color: var(--gp-terracotta);
color: var(--gp-terracotta);
}
.gp-news-pagination .current {
background: var(--gp-terracotta);
color: white;
border-color: var(--gp-terracotta);
}
/* EMPTY STATE */
.gp-news-empty {
padding: 4rem 1.5rem;
background: var(--gp-off-white);
}
/* NEWSLETTER CTA */
.gp-news-newsletter {
background: var(--gp-sage-whisper);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.gp-news-newsletter h2 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3vw, 2.5rem);
color: var(--gp-charcoal);
margin: 0.5rem 0 0.75rem;
}
.gp-news-newsletter p {
margin-bottom: 1.5rem;
}
/* =========================================================
SINGLE NEWS POST STYLES
========================================================= */
.gp-news-single__hero {
background: var(--gp-cream);
padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.gp-news-single__badges {
display: flex;
gap: 0.5rem;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.gp-news-single__title {
font-family: var(--font-heading);
font-size: clamp(1.875rem, 4.5vw, 2.75rem);
line-height: 1.15;
color: var(--gp-charcoal);
margin: 0.5rem 0 1.25rem;
font-weight: 700;
max-width: 780px;
margin-left: auto;
margin-right: auto;
}
.gp-news-single__meta {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
font-size: 0.875rem;
color: var(--gp-charcoal-muted);
}
.gp-news-single__meta strong {
color: var(--gp-charcoal);
font-weight: 600;
}
.gp-news-single__body {
background: var(--gp-off-white);
padding: clamp(2.5rem, 5vw, 4rem) 0;
}
/* NUTSHELL BOX */
.gp-news-nutshell {
background: var(--gp-cream-light);
border: 1px solid var(--gp-cream-dark);
border-radius: 12px;
padding: 1.75rem 2rem;
margin-bottom: 2.5rem;
}
.gp-news-nutshell__label {
display: inline-flex;
align-items: center;
gap: 0.375rem;
background: var(--gp-sage);
color: white;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
border-radius: 999px;
margin-bottom: 0.75rem;
}
.gp-news-nutshell__heading {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
color: var(--gp-charcoal);
margin: 0.25rem 0 0.625rem;
}
.gp-news-nutshell__body {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--gp-charcoal);
}
.gp-news-nutshell__body p:last-child {
margin-bottom: 0;
}
/* PROSE */
.gp-news-single__prose {
font-size: 1.0625rem;
line-height: 1.75;
color: var(--gp-charcoal);
}
.gp-news-single__prose h2 {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 600;
margin: 2.5rem 0 1rem;
color: var(--gp-charcoal);
}
.gp-news-single__prose h3 {
font-family: var(--font-heading);
font-size: 1.375rem;
font-weight: 600;
margin: 2rem 0 0.75rem;
color: var(--gp-charcoal);
}
.gp-news-single__prose p {
margin-bottom: 1.25rem;
}
.gp-news-single__prose strong {
color: var(--gp-terracotta);
font-weight: 600;
}
.gp-news-single__prose ul,
.gp-news-single__prose ol {
margin: 0 0 1.5rem 1.5rem;
padding: 0;
}
.gp-news-single__prose li {
margin-bottom: 0.625rem;
}
.gp-news-single__prose blockquote {
border-left: 4px solid var(--gp-sage);
padding: 1rem 1.5rem;
margin: 2rem 0;
font-family: var(--font-heading);
font-style: italic;
font-size: 1.25rem;
color: var(--gp-sage-dark);
background: var(--gp-sage-whisper);
border-radius: 0 8px 8px 0;
}
/* SOURCE BOX */
.gp-news-source {
background: var(--gp-cream-light);
border-left: 4px solid var(--gp-sage);
padding: 1.25rem 1.5rem;
margin: 2.5rem 0;
border-radius: 0 8px 8px 0;
}
.gp-news-source__label {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gp-sage-dark);
margin-bottom: 0.5rem;
}
.gp-news-source__name {
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 600;
color: var(--gp-charcoal);
margin-bottom: 0.375rem;
}
.gp-news-source__url {
font-size: 0.875rem;
color: var(--gp-terracotta);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.gp-news-source__url:hover {
text-decoration: underline;
}
/* FAQ */
.gp-news-faq {
margin: 2.5rem 0;
}
.gp-news-faq__title {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 600;
margin: 1.25rem 0 1.5rem;
color: var(--gp-charcoal);
}
.gp-news-faq__item {
border-bottom: 1px solid var(--gp-cream-dark);
padding: 1.25rem 0;
}
.gp-news-faq__item:first-of-type {
border-top: 1px solid var(--gp-cream-dark);
}
.gp-news-faq__summary {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
cursor: pointer;
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 600;
color: var(--gp-charcoal);
}
.gp-news-faq__summary::-webkit-details-marker {
display: none;
}
.gp-news-faq__question {
flex: 1;
padding-right: 1rem;
}
.gp-news-faq__icon {
color: var(--gp-terracotta);
font-size: 1.25rem;
transition: transform 200ms;
line-height: 1;
}
.gp-news-faq__item[open] .gp-news-faq__icon {
transform: rotate(45deg);
}
.gp-news-faq__answer {
margin-top: 0.625rem;
font-size: 0.9375rem;
line-height: 1.7;
color: var(--gp-charcoal-muted);
padding-right: 2.5rem;
}
/* RELATED NEWS */
.gp-news-related {
background: var(--gp-cream);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.gp-news-related__header {
max-width: 700px;
margin: 0 auto 2.5rem;
}
.gp-news-related__header h2 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3vw, 2.25rem);
color: var(--gp-charcoal);
margin: 0.5rem 0 0.75rem;
}
.gp-news-related__header p {
font-size: 0.9375rem;
color: var(--gp-charcoal-muted);
}
.gp-news-related__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.25rem;
max-width: 1100px;
margin: 0 auto;
}
.gp-news-related-card {
display: block;
background: white;
border: 1px solid var(--gp-cream-dark);
border-radius: 12px;
padding: 1.25rem 1.5rem;
text-decoration: none;
transition: all 200ms;
color: var(--gp-charcoal);
}
.gp-news-related-card:hover {
border-color: var(--gp-terracotta);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.gp-news-related-card h4 {
font-family: var(--font-heading);
font-size: 1.0625rem;
font-weight: 600;
color: var(--gp-charcoal);
margin: 0.5rem 0 0.5rem;
line-height: 1.3;
}
.gp-news-related-card p {
font-size: 0.8125rem;
color: var(--gp-charcoal-muted);
margin-bottom: 0.625rem;
line-height: 1.5;
}
.gp-news-related-card__cta {
font-size: 0.75rem;
color: var(--gp-terracotta);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
/* =========================================================
BLOG SYSTEM — Archive + Single page styles
Paste this into Appearance > Customize > Additional CSS
========================================================= */
/* ARCHIVE HERO */
.gp-blog-archive__hero {
background: var(--gp-cream);
padding: clamp(3rem, 6vw, 5rem) 0;
text-align: center;
position: relative;
}
.gp-blog-archive__hero::after {
content: "";
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 240px;
height: 4px;
background: linear-gradient(90deg, transparent 0%, var(--gp-sage) 20%, var(--gp-sage) 80%, transparent 100%);
opacity: 0.5;
border-radius: 2px;
}
.gp-blog-archive__title {
font-family: var(--font-heading);
font-size: clamp(2.25rem, 5vw, 3.75rem);
line-height: 1.1;
margin: 0.5rem 0 1rem;
color: var(--gp-charcoal);
font-weight: 700;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.gp-blog-archive__subtitle {
font-family: var(--font-heading);
font-style: italic;
max-width: 620px;
margin: 0 auto;
color: var(--gp-charcoal-muted);
}
/* CATEGORY FILTERS */
.gp-blog-filters {
background: var(--gp-cream);
padding: 2rem 0 3rem;
}
.gp-blog-filters__label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gp-charcoal-muted);
margin-bottom: 1rem;
text-align: center;
}
.gp-blog-filters__tabs {
display: flex;
gap: 0.625rem;
justify-content: center;
flex-wrap: wrap;
}
.gp-blog-tab {
background: transparent;
color: var(--gp-charcoal);
border: 2px solid var(--gp-cream-dark);
padding: 0.625rem 1.5rem;
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: all 200ms;
}
.gp-blog-tab:hover {
border-color: var(--gp-sage);
}
.gp-blog-tab.is-active {
background: var(--gp-terracotta);
color: white;
border-color: var(--gp-terracotta);
}
/* CHIP (category label used on cards) */
.gp-blog-chip {
display: inline-block;
background: var(--gp-sage-whisper);
color: var(--gp-sage-dark);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
border-radius: 4px;
margin-bottom: 0.5rem;
}
/* FEATURED POST SECTION */
.gp-blog-featured {
background: var(--gp-off-white);
padding: clamp(2.5rem, 5vw, 4rem) 0 1rem;
}
.gp-blog-featured__section-label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gp-terracotta);
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.gp-blog-featured__section-label::before {
content: "★";
font-size: 1rem;
}
.gp-blog-featured__card {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: clamp(1.5rem, 4vw, 3rem);
background: white;
border: 1px solid var(--gp-cream-dark);
border-radius: 16px;
overflow: hidden;
text-decoration: none;
color: var(--gp-charcoal);
transition: all 200ms;
}
.gp-blog-featured__card:hover {
border-color: var(--gp-terracotta);
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
@media (max-width: 800px) {
.gp-blog-featured__card {
grid-template-columns: 1fr;
}
}
.gp-blog-featured__image {
background: var(--gp-cream-light);
overflow: hidden;
min-height: 300px;
}
.gp-blog-featured__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gp-blog-featured__content {
padding: clamp(1.5rem, 3vw, 2.5rem);
display: flex;
flex-direction: column;
justify-content: center;
}
.gp-blog-featured__title {
font-family: var(--font-heading);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 600;
line-height: 1.2;
color: var(--gp-charcoal);
margin: 0.5rem 0 1rem;
}
.gp-blog-featured__excerpt {
font-size: 1rem;
line-height: 1.6;
color: var(--gp-charcoal-muted);
margin: 0 0 1rem;
}
.gp-blog-featured__meta {
display: flex;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--gp-charcoal-muted);
margin-bottom: 1rem;
}
.gp-blog-featured__cta {
font-size: 0.9375rem;
color: var(--gp-terracotta);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.375rem;
}
/* MAIN GRID */
.gp-blog-grid-section {
background: var(--gp-off-white);
padding: 1.5rem 0 2rem;
}
.gp-blog-recent-label {
font-family: var(--font-body);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gp-charcoal-muted);
margin-bottom: 1.5rem;
}
.gp-blog-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
.gp-blog-card {
display: flex;
flex-direction: column;
background: white;
border: 1px solid var(--gp-cream-dark);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: var(--gp-charcoal);
transition: all 200ms;
}
.gp-blog-card:hover {
border-color: var(--gp-terracotta);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.gp-blog-card__image {
background: var(--gp-cream-light);
overflow: hidden;
aspect-ratio: 3 / 2;
position: relative;
}
.gp-blog-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gp-blog-card__image--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: var(--gp-sage);
opacity: 0.4;
}
.gp-blog-card__body {
padding: 1.5rem 1.75rem;
display: flex;
flex-direction: column;
flex: 1;
}
.gp-blog-card__title {
font-family: var(--font-heading);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.3;
color: var(--gp-charcoal);
margin: 0.5rem 0 0.625rem;
}
.gp-blog-card__excerpt {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--gp-charcoal-muted);
margin: 0 0 1rem;
flex: 1;
}
.gp-blog-card__meta {
display: flex;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--gp-charcoal-muted);
padding-top: 0.75rem;
border-top: 1px solid var(--gp-cream-light);
margin-top: auto;
}
/* PAGINATION */
.gp-blog-pagination {
text-align: center;
padding: 2.5rem 1.5rem;
background: var(--gp-off-white);
}
.gp-blog-pagination a,
.gp-blog-pagination .current {
display: inline-block;
padding: 0.625rem 1rem;
margin: 0 0.25rem;
background: white;
border: 1px solid var(--gp-cream-dark);
border-radius: 8px;
color: var(--gp-charcoal);
text-decoration: none;
font-weight: 500;
transition: all 200ms;
}
.gp-blog-pagination a:hover {
border-color: var(--gp-terracotta);
color: var(--gp-terracotta);
}
.gp-blog-pagination .current {
background: var(--gp-terracotta);
color: white;
border-color: var(--gp-terracotta);
}
.gp-blog-empty {
padding: 4rem 1.5rem;
background: var(--gp-off-white);
}
/* NEWSLETTER (shared with news) */
.gp-blog-newsletter {
background: var(--gp-sage-whisper);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.gp-blog-newsletter h2 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3vw, 2.5rem);
color: var(--gp-charcoal);
margin: 0.5rem 0 0.75rem;
}
.gp-blog-newsletter p {
margin-bottom: 1.5rem;
}
/* =========================================================
SINGLE BLOG POST STYLES
========================================================= */
.gp-blog-single__hero {
background: var(--gp-cream);
padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2rem, 4vw, 3rem);
}
.gp-blog-single__hero-inner {
max-width: 800px;
margin: 0 auto;
}
.gp-blog-single__title {
font-family: var(--font-heading);
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.15;
color: var(--gp-charcoal);
margin: 0.75rem 0 1.25rem;
font-weight: 700;
}
.gp-blog-single__meta {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
font-size: 0.9375rem;
color: var(--gp-charcoal-muted);
}
.gp-blog-single__meta strong {
color: var(--gp-charcoal);
font-weight: 600;
}
/* FEATURED IMAGE */
.gp-blog-single__featured-image {
background: var(--gp-off-white);
padding: 0 0 2rem;
}
.gp-blog-single__featured-image img {
width: 100%;
max-height: 500px;
object-fit: cover;
border-radius: 12px;
display: block;
}
/* BODY */
.gp-blog-single__body {
background: var(--gp-off-white);
padding: clamp(2rem, 5vw, 3.5rem) 0;
}
/* NUTSHELL */
.gp-blog-nutshell {
background: var(--gp-cream-light);
border: 1px solid var(--gp-cream-dark);
border-radius: 12px;
padding: 1.75rem 2rem;
margin-bottom: 2.5rem;
}
.gp-blog-nutshell__label {
display: inline-flex;
align-items: center;
gap: 0.375rem;
background: var(--gp-sage);
color: white;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 0.25rem 0.75rem;
border-radius: 999px;
margin-bottom: 0.75rem;
}
.gp-blog-nutshell__body {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--gp-charcoal);
}
.gp-blog-nutshell__body p {
margin: 0 0 0.75rem;
}
.gp-blog-nutshell__body p:last-child {
margin-bottom: 0;
}
/* PROSE */
.gp-blog-single__prose {
font-size: 1.0625rem;
line-height: 1.75;
color: var(--gp-charcoal);
}
.gp-blog-single__prose h2 {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 600;
margin: 2.5rem 0 1rem;
color: var(--gp-charcoal);
}
.gp-blog-single__prose h3 {
font-family: var(--font-heading);
font-size: 1.375rem;
font-weight: 600;
margin: 2rem 0 0.75rem;
color: var(--gp-charcoal);
}
.gp-blog-single__prose p {
margin-bottom: 1.25rem;
}
.gp-blog-single__prose strong {
color: var(--gp-terracotta);
font-weight: 600;
}
.gp-blog-single__prose ul,
.gp-blog-single__prose ol {
margin: 0 0 1.5rem 1.5rem;
padding: 0;
}
.gp-blog-single__prose li {
margin-bottom: 0.625rem;
}
.gp-blog-single__prose blockquote {
border-left: 4px solid var(--gp-sage);
padding: 1rem 1.5rem;
margin: 2rem 0;
font-family: var(--font-heading);
font-style: italic;
font-size: 1.25rem;
color: var(--gp-sage-dark);
background: var(--gp-sage-whisper);
border-radius: 0 8px 8px 0;
}
.gp-blog-single__prose img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 1.5rem 0;
}
.gp-blog-single__prose a {
color: var(--gp-terracotta);
text-decoration: underline;
text-decoration-color: rgba(193, 122, 90, 0.35);
text-underline-offset: 3px;
}
.gp-blog-single__prose a:hover {
text-decoration-color: var(--gp-terracotta);
}
/* RELATED APP CALLOUT */
.gp-blog-app-callout {
color: white;
border-radius: 12px;
padding: 2rem 2.25rem;
margin: 2.5rem 0;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.gp-blog-app-callout__eyebrow {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.8);
display: block;
margin-bottom: 0.5rem;
}
.gp-blog-app-callout__title {
font-family: var(--font-heading);
font-size: 1.5rem;
color: white;
margin: 0 0 0.375rem;
font-weight: 600;
}
.gp-blog-app-callout__body {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9375rem;
margin: 0;
}
.gp-blog-app-callout__cta {
background: white;
color: var(--gp-charcoal);
padding: 0.75rem 1.25rem;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.375rem;
white-space: nowrap;
transition: all 200ms;
}
.gp-blog-app-callout__cta:hover {
transform: translateY(-2px);
}
/* FAQ */
.gp-blog-faq {
margin: 2.5rem 0;
}
.gp-blog-faq__title {
font-family: var(--font-heading);
font-size: 1.75rem;
font-weight: 600;
margin: 1.25rem 0 1.5rem;
color: var(--gp-charcoal);
}
.gp-blog-faq__item {
border-bottom: 1px solid var(--gp-cream-dark);
padding: 1.25rem 0;
}
.gp-blog-faq__item:first-of-type {
border-top: 1px solid var(--gp-cream-dark);
}
.gp-blog-faq__summary {
display: flex;
justify-content: space-between;
align-items: center;
list-style: none;
cursor: pointer;
font-family: var(--font-heading);
font-size: 1.125rem;
font-weight: 600;
color: var(--gp-charcoal);
}
.gp-blog-faq__summary::-webkit-details-marker {
display: none;
}
.gp-blog-faq__question {
flex: 1;
padding-right: 1rem;
}
.gp-blog-faq__icon {
color: var(--gp-terracotta);
font-size: 1.25rem;
transition: transform 200ms;
line-height: 1;
}
.gp-blog-faq__item[open] .gp-blog-faq__icon {
transform: rotate(45deg);
}
.gp-blog-faq__answer {
margin-top: 0.625rem;
font-size: 0.9375rem;
line-height: 1.7;
color: var(--gp-charcoal-muted);
padding-right: 2.5rem;
}
/* AUTHOR BIO */
.gp-blog-author {
background: var(--gp-cream-light);
border-radius: 12px;
padding: 2rem;
margin: 3rem 0;
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.gp-blog-author__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 3px solid white;
box-shadow: var(--shadow-sm);
}
.gp-blog-author__content {
flex: 1;
}
.gp-blog-author__meta {
font-family: var(--font-body);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gp-charcoal-muted);
margin-bottom: 0.25rem;
}
.gp-blog-author__name {
font-family: var(--font-heading);
font-size: 1.25rem;
color: var(--gp-charcoal);
margin: 0 0 0.125rem;
font-weight: 600;
}
.gp-blog-author__position {
font-size: 0.9375rem;
color: var(--gp-terracotta);
font-weight: 500;
margin-bottom: 0.75rem;
}
.gp-blog-author__bio {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--gp-charcoal);
margin: 0;
}
@media (max-width: 600px) {
.gp-blog-author {
flex-direction: column;
align-items: center;
text-align: center;
}
}
/* RELATED POSTS */
.gp-blog-related {
background: var(--gp-cream);
padding: clamp(3rem, 6vw, 5rem) 0;
}
.gp-blog-related__header {
max-width: 700px;
margin: 0 auto 2.5rem;
}
.gp-blog-related__header h2 {
font-family: var(--font-heading);
font-size: clamp(1.75rem, 3vw, 2.25rem);
color: var(--gp-charcoal);
margin: 0.5rem 0 0;
}
.gp-blog-related__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.gp-blog-related-card {
display: flex;
flex-direction: column;
background: white;
border: 1px solid var(--gp-cream-dark);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: var(--gp-charcoal);
transition: all 200ms;
}
.gp-blog-related-card:hover {
border-color: var(--gp-terracotta);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.gp-blog-related-card__image {
background: var(--gp-cream-light);
aspect-ratio: 3 / 2;
overflow: hidden;
}
.gp-blog-related-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gp-blog-related-card__image--placeholder {
display: flex;
align-items: center;
justify-content: center;
color: var(--gp-sage);
opacity: 0.4;
}
.gp-blog-related-card__body {
padding: 1.25rem 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.gp-blog-related-card h4 {
font-family: var(--font-heading);
font-size: 1.0625rem;
font-weight: 600;
color: var(--gp-charcoal);
margin: 0.5rem 0 0.5rem;
line-height: 1.3;
flex: 1;
}
.gp-blog-related-card__meta {
font-size: 0.8125rem;
color: var(--gp-charcoal-muted);
}
/**
* Events System Styles - Guiding Pathways Foundation
*
* Brand colors:
* - Cream: #F5F0E8
* - Cream Light: #FBF8F3
* - Charcoal: #2C2C2C
* - Terracotta: #C17A5A
* - Sage: #6B8F71
* - Sage Whisper: #E8EFE9
* - Gold: #C18E3A (Adult Pathways)
* - Teal: #3D8585 (Disability Pathways)
* - Purple: #7E628F (Autism Pathways)
*
* Fonts: Fraunces (headings), Plus Jakarta Sans (body)
*/
/* ==========================================================================
EVENTS ARCHIVE
========================================================================== */
.events-archive {
background: #F5F0E8;
min-height: 100vh;
padding-bottom: 80px;
}
/* Events Hero */
.events-hero {
background: linear-gradient(180deg, #FBF8F3 0%, #F5F0E8 100%);
padding: 80px 20px 60px;
text-align: center;
}
.events-hero-inner {
max-width: 720px;
margin: 0 auto;
}
.events-hero-eyebrow {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #6B8F71;
margin-bottom: 16px;
}
.events-hero-title {
font-family: 'Fraunces', serif;
font-size: 64px;
font-weight: 700;
color: #2C2C2C;
line-height: 1.1;
margin: 0 0 20px;
}
.events-hero-subtitle {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 18px;
color: #55657A;
line-height: 1.6;
max-width: 560px;
margin: 0 auto 30px;
}
.events-hero-swoosh {
display: flex;
justify-content: center;
opacity: 0.7;
}
/* Filters */
.events-filters {
background: #FFFFFF;
border-top: 1px solid #E4E0D6;
border-bottom: 1px solid #E4E0D6;
padding: 24px 20px;
position: sticky;
top: 0;
z-index: 10;
}
.events-filters-inner {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 30px;
align-items: center;
justify-content: center;
}
.events-filter-group {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.events-filter-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #6B8F71;
}
.events-filter-buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.events-filter-btn {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 600;
color: #55657A;
background: transparent;
border: 1.5px solid #E4E0D6;
border-radius: 100px;
padding: 6px 16px;
cursor: pointer;
transition: all 0.2s ease;
}
.events-filter-btn:hover {
border-color: #6B8F71;
color: #6B8F71;
}
.events-filter-btn.active {
background: #6B8F71;
border-color: #6B8F71;
color: #FFFFFF;
}
/* ==========================================================================
BADGES (Event Type + Location)
========================================================================== */
.events-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.events-badge {
display: inline-block;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 100px;
line-height: 1.2;
}
/* Event Type Badges */
.events-badge-type-community {
background: #E8EFE9;
color: #4A6B4F;
border: 1px solid #6B8F71;
}
.events-badge-type-fundraising {
background: #FDF2ED;
color: #A05A3D;
border: 1px solid #C17A5A;
}
.events-badge-type-webinar {
background: #F0E9F4;
color: #5E4670;
border: 1px solid #7E628F;
}
.events-badge-type-educational {
background: #FAF3E4;
color: #8B6720;
border: 1px solid #C18E3A;
}
/* Location Badges */
.events-badge-location-national {
background: #E4F0EF;
color: #2A6461;
border: 1px solid #3D8585;
}
.events-badge-location-virtual {
background: #EBE7F2;
color: #5E4670;
border: 1px solid #7E628F;
}
.events-badge-location-in-person {
background: #FDF2ED;
color: #A05A3D;
border: 1px solid #C17A5A;
}
/* ==========================================================================
FEATURED EVENT
========================================================================== */
.events-featured {
padding: 60px 20px 40px;
}
.events-featured-inner {
max-width: 1200px;
margin: 0 auto;
}
.events-featured-tag {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: #C17A5A;
margin-bottom: 20px;
text-align: center;
}
.events-featured-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
background: #FFFFFF;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 8px 40px rgba(45, 58, 74, 0.08);
}
.events-featured-image {
overflow: hidden;
}
.events-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.events-featured-content {
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
.events-featured-title {
font-family: 'Fraunces', serif;
font-size: 36px;
font-weight: 700;
color: #2C2C2C;
line-height: 1.2;
margin: 0 0 20px;
}
.events-featured-title a {
color: inherit;
text-decoration: none;
}
.events-featured-title a:hover {
color: #6B8F71;
}
.events-featured-meta {
display: flex;
align-items: center;
gap: 8px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
color: #55657A;
margin-bottom: 16px;
}
.events-date-icon {
font-size: 18px;
}
.events-time {
color: #8A94A2;
}
.events-partner {
display: inline-flex;
align-items: center;
gap: 8px;
background: #E8EFE9;
padding: 8px 14px;
border-radius: 100px;
margin-bottom: 20px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
}
.events-partner-label {
color: #6B8F71;
font-weight: 600;
}
.events-partner-name {
color: #2C2C2C;
font-weight: 700;
}
.events-partner-small {
padding: 5px 10px;
font-size: 12px;
margin-bottom: 12px;
}
.events-featured-excerpt {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
color: #4A4A7A;
line-height: 1.7;
margin-bottom: 30px;
}
.events-featured-excerpt p {
margin: 0;
}
.events-cta-btn {
display: inline-block;
background: #C17A5A;
color: #FFFFFF !important;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
font-weight: 700;
text-decoration: none;
padding: 14px 30px;
border-radius: 100px;
transition: all 0.2s ease;
align-self: flex-start;
}
.events-cta-btn:hover {
background: #A05A3D;
transform: translateY(-2px);
}
/* ==========================================================================
EVENTS GRID
========================================================================== */
.events-grid-section {
padding: 60px 20px 40px;
}
.events-grid-inner {
max-width: 1200px;
margin: 0 auto;
}
.events-section-title {
font-family: 'Fraunces', serif;
font-size: 40px;
font-weight: 700;
color: #2C2C2C;
margin: 0 0 30px;
text-align: center;
}
.events-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 30px;
}
.events-card {
background: #FFFFFF;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(45, 58, 74, 0.06);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.events-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(45, 58, 74, 0.12);
}
.events-card-image {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: #EDEAE2;
}
.events-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.events-card:hover .events-card-image img {
transform: scale(1.05);
}
.events-card-content {
padding: 24px 26px 26px;
flex: 1;
display: flex;
flex-direction: column;
}
.events-card-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 700;
color: #2C2C2C;
line-height: 1.3;
margin: 0 0 12px;
}
.events-card-title a {
color: inherit;
text-decoration: none;
}
.events-card-title a:hover {
color: #6B8F71;
}
.events-card-meta {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
color: #55657A;
margin-bottom: 12px;
}
.events-card-excerpt {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
color: #4A4A7A;
line-height: 1.6;
margin-bottom: 16px;
flex: 1;
}
.events-card-link {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
color: #C17A5A;
text-decoration: none;
align-self: flex-start;
transition: all 0.2s ease;
}
.events-card-link:hover {
color: #A05A3D;
transform: translateX(4px);
}
/* Empty state */
.events-empty {
text-align: center;
padding: 60px 20px;
background: #FFFFFF;
border-radius: 20px;
font-family: 'Plus Jakarta Sans', sans-serif;
color: #55657A;
}
.events-empty a {
color: #6B8F71;
font-weight: 600;
}
/* ==========================================================================
PAST EVENTS
========================================================================== */
.events-past-section {
padding: 60px 20px 40px;
background: #FBF8F3;
}
.events-past-inner {
max-width: 1200px;
margin: 0 auto;
}
.events-past-subtitle {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
color: #55657A;
text-align: center;
margin: 0 0 40px;
}
.events-past-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
}
.events-past-card {
background: #FFFFFF;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(45, 58, 74, 0.04);
transition: all 0.3s ease;
}
.events-past-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(45, 58, 74, 0.1);
}
.events-past-image {
display: block;
aspect-ratio: 4 / 3;
position: relative;
overflow: hidden;
background: #EDEAE2;
}
.events-past-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.events-past-overlay {
position: absolute;
inset: 0;
background: rgba(45, 44, 41, 0.7);
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
opacity: 0;
transition: opacity 0.3s ease;
}
.events-past-card:hover .events-past-overlay {
opacity: 1;
}
.events-past-content {
padding: 18px 22px;
}
.events-past-date {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
color: #8A94A2;
font-weight: 600;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.events-past-title {
font-family: 'Fraunces', serif;
font-size: 18px;
font-weight: 700;
color: #2C2C2C;
line-height: 1.3;
margin: 0;
}
.events-past-title a {
color: inherit;
text-decoration: none;
}
.events-past-title a:hover {
color: #6B8F71;
}
/* ==========================================================================
CTA SECTION
========================================================================== */
.events-cta-section {
padding: 80px 20px;
background: linear-gradient(135deg, #6B8F71 0%, #4F7055 100%);
color: #FFFFFF;
text-align: center;
margin-top: 60px;
}
.events-cta-inner {
max-width: 700px;
margin: 0 auto;
}
.events-cta-title {
font-family: 'Fraunces', serif;
font-size: 40px;
font-weight: 700;
color: #FFFFFF;
margin: 0 0 16px;
line-height: 1.2;
}
.events-cta-subtitle {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 17px;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
margin: 0 0 30px;
}
.events-cta-btn-large {
background: #FFFFFF;
color: #6B8F71 !important;
padding: 16px 40px;
font-size: 16px;
}
.events-cta-btn-large:hover {
background: #F5F0E8;
color: #4F7055 !important;
}
/* ==========================================================================
SINGLE EVENT PAGE
========================================================================== */
.event-single {
background: #F5F0E8;
min-height: 100vh;
padding-bottom: 80px;
}
/* Breadcrumb */
.event-breadcrumb {
padding: 24px 20px 0;
}
.event-breadcrumb-inner {
max-width: 1000px;
margin: 0 auto;
}
.event-breadcrumb a {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
color: #6B8F71;
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}
.event-breadcrumb a:hover {
color: #4F7055;
}
/* Event Header */
.event-header {
padding: 40px 20px 30px;
text-align: center;
}
.event-header-inner {
max-width: 800px;
margin: 0 auto;
}
.event-header .events-badges {
justify-content: center;
margin-bottom: 20px;
}
.event-title {
font-family: 'Fraunces', serif;
font-size: 48px;
font-weight: 700;
color: #2C2C2C;
line-height: 1.1;
margin: 0 0 24px;
}
.event-partner-tag {
display: inline-flex;
align-items: center;
gap: 10px;
background: #FFFFFF;
padding: 10px 20px;
border-radius: 100px;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 14px;
color: #55657A;
border: 1.5px solid #E4E0D6;
margin-bottom: 20px;
}
.event-partner-tag strong,
.event-partner-tag a {
color: #2C2C2C;
font-weight: 700;
}
.event-partner-tag a {
text-decoration: none;
color: #6B8F71;
}
.event-partner-tag a:hover {
text-decoration: underline;
}
.event-header-swoosh {
display: flex;
justify-content: center;
opacity: 0.7;
margin-top: 10px;
}
/* Hero Image */
.event-hero-image {
max-width: 1200px;
margin: 0 auto 40px;
padding: 0 20px;
}
.event-hero-image img {
width: 100%;
height: auto;
border-radius: 24px;
box-shadow: 0 12px 40px rgba(45, 58, 74, 0.12);
max-height: 500px;
object-fit: cover;
}
/* Main Layout: Content + Sidebar */
.event-main-layout {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr 380px;
gap: 60px;
}
.event-main-content {
background: #FFFFFF;
border-radius: 24px;
padding: 50px 50px;
box-shadow: 0 4px 20px rgba(45, 58, 74, 0.04);
}
.event-section-title {
font-family: 'Fraunces', serif;
font-size: 30px;
font-weight: 700;
color: #2C2C2C;
margin: 0 0 20px;
line-height: 1.3;
}
.event-body-content {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
color: #4A4A7A;
line-height: 1.85;
}
.event-body-content p {
margin: 0 0 20px;
}
.event-body-content h2,
.event-body-content h3 {
font-family: 'Fraunces', serif;
color: #2C2C2C;
margin: 30px 0 12px;
}
.event-body-content h3 {
font-size: 22px;
}
.event-about-section,
.event-agenda-section,
.event-faq-section {
margin-bottom: 40px;
}
/* Agenda styling */
.event-agenda-content {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
color: #4A4A7A;
line-height: 1.7;
background: #FBF8F3;
padding: 24px 28px;
border-radius: 16px;
border-left: 4px solid #6B8F71;
}
/* FAQ items */
.event-faq-list {
display: flex;
flex-direction: column;
gap: 12px;
}
.event-faq-item {
background: #FBF8F3;
border: 1px solid #E4E0D6;
border-radius: 12px;
overflow: hidden;
padding: 16px 20px;
}
.event-faq-item[open] {
background: #FFFFFF;
border-color: #6B8F71;
}
.event-faq-question {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 700;
color: #2C2C2C;
cursor: pointer;
padding-right: 20px;
list-style: none;
position: relative;
}
.event-faq-question::-webkit-details-marker {
display: none;
}
.event-faq-question::after {
content: '+';
position: absolute;
right: 0;
font-size: 24px;
color: #6B8F71;
transition: transform 0.2s ease;
}
.event-faq-item[open] .event-faq-question::after {
content: "\002B";
position: absolute;
right: 0;
font-size: 24px;
color: #6B8F71;
transition: transform 0.2s ease;
}
.event-faq-item[open] .event-faq-question::after {
content: "\2212";
}
.event-faq-answer {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
color: #4A4A7A;
line-height: 1.7;
padding-top: 12px;
}
/* Event Sidebar */
.event-sidebar {
position: sticky;
top: 100px;
align-self: start;
}
.event-details-card {
background: #FFFFFF;
border-radius: 20px;
padding: 30px 28px;
box-shadow: 0 4px 20px rgba(45, 58, 74, 0.06);
margin-bottom: 20px;
border-top: 4px solid #C17A5A;
}
.event-details-title {
font-family: 'Fraunces', serif;
font-size: 22px;
font-weight: 700;
color: #2C2C2C;
margin: 0 0 24px;
}
.event-detail-item {
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #EDEAE2;
}
.event-detail-item:last-of-type {
border-bottom: none;
margin-bottom: 0;
}
.event-detail-label {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #6B8F71;
margin-bottom: 6px;
}
.event-detail-value {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 15px;
color: #2C2C2C;
line-height: 1.5;
}
.event-detail-value a {
color: #6B8F71;
text-decoration: none;
font-weight: 600;
}
.event-detail-value a:hover {
text-decoration: underline;
}
.event-detail-secondary {
color: #8A94A2;
font-size: 14px;
}
.event-cta-wrapper {
margin-top: 24px;
padding-top: 24px;
border-top: 1px solid #EDEAE2;
}
.event-register-btn {
display: block;
background: #C17A5A;
color: #FFFFFF !important;
text-align: center;
padding: 16px 20px;
border-radius: 12px;
text-decoration: none;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
font-weight: 700;
transition: all 0.2s ease;
}
.event-register-btn:hover {
background: #A05A3D;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(193, 122, 90, 0.3);
}
/* Share card */
.event-share-card {
background: #FBF8F3;
border-radius: 16px;
padding: 20px 24px;
text-align: center;
}
.event-share-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: #6B8F71;
margin-bottom: 12px;
}
.event-share-buttons {
display: flex;
gap: 8px;
justify-content: center;
}
.event-share-btn {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 13px;
font-weight: 600;
color: #6B8F71;
text-decoration: none;
padding: 6px 12px;
border: 1.5px solid #6B8F71;
border-radius: 100px;
transition: all 0.2s ease;
}
.event-share-btn:hover {
background: #6B8F71;
color: #FFFFFF;
}
/* Related Events */
.event-related-section {
max-width: 1200px;
margin: 60px auto 0;
padding: 60px 20px 0;
border-top: 1px solid #E4E0D6;
}
.event-related-inner {
text-align: center;
}
.events-grid-related {
margin-top: 30px;
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 900px) {
.events-hero-title { font-size: 44px; }
.event-title { font-size: 34px; }
.events-featured-card { grid-template-columns: 1fr; }
.events-featured-content { padding: 30px 24px; }
.events-featured-title { font-size: 26px; }
.event-main-layout { grid-template-columns: 1fr; gap: 30px; }
.event-sidebar { position: static; }
.event-main-content { padding: 30px 24px; }
.events-cta-title { font-size: 28px; }
}
@media (max-width: 600px) {
.events-hero { padding: 60px 16px 40px; }
.events-hero-title { font-size: 36px; }
.events-hero-subtitle { font-size: 15px; }
.events-filters { padding: 16px; }
.events-filters-inner { flex-direction: column; gap: 16px; }
.events-featured, .events-grid-section, .events-past-section { padding: 40px 16px; }
.events-section-title { font-size: 28px; }
.event-title { font-size: 28px; }
.events-badge { font-size: 10px; padding: 4px 10px; }
.events-grid { grid-template-columns: 1fr; }
}
/* ==========================================================================
GUIDING PATHWAYS — Custom blocks
Paste this whole file into: Appearance → Customize → Additional CSS
(or your theme's Custom CSS field, or a plugin like Simple Custom CSS)
HOW TO USE IN THE EDITOR
-----------------------------------------------------------------------
KEY TAKEAWAYS BOX ("The short version")
1. Insert a Group block
2. Put a Heading (H3) + a List inside it
3. Select the GROUP block → Settings sidebar → Advanced →
"Additional CSS class(es)" → type: gp-keybox
SCRIPT BOX (copy-and-send wording)
1. Insert a Group block
2. First thing inside: a Heading set to H5 — this becomes the little
label, e.g. "To request a plan review"
3. Then a Paragraph with the actual script wording
4. Select the GROUP block → Advanced → Additional CSS class(es):
gp-script
VARIANTS (add as a second class, space separated)
gp-keybox gp-keybox--warn amber, for deadlines and warnings
gp-script gp-script--plain script box with no label heading
Colors live in one place — the :root block below. Change them there
and everything updates.
========================================================================== */
:root {
--gp-ink: #23211d; /* body + headings inside blocks */
--gp-soft: #55534c; /* labels, muted text */
--gp-line: #e5e3dc; /* hairline borders */
--gp-wash: #faf9f6; /* key box background */
--gp-paper: #f4f2ec; /* script box background */
--gp-clay: #c6613f; /* accent — swap for your brand color */
--gp-amber: #b8860b; /* warning variant accent */
--gp-radius: 4px;
}
/* ==========================================================================
1. KEY TAKEAWAYS BOX — .gp-keybox
========================================================================== */
.gp-keybox {
background: var(--gp-wash);
border: 1px solid var(--gp-line);
border-left: 3px solid var(--gp-clay);
border-radius: var(--gp-radius);
padding: 1.5rem 1.65rem;
margin: 2rem 0;
color: var(--gp-ink);
font-size: 1rem;
line-height: 1.65;
}
/* kill the stray top/bottom margins WordPress adds to first/last children */
.gp-keybox > *:first-child { margin-top: 0; }
.gp-keybox > *:last-child { margin-bottom: 0; }
/* the heading — works whether you use H2, H3 or H4 */
.gp-keybox h2,
.gp-keybox h3,
.gp-keybox h4 {
font-size: 1.06rem;
line-height: 1.35;
font-weight: 700;
letter-spacing: -0.005em;
color: var(--gp-ink);
margin: 0 0 0.85rem;
}
.gp-keybox p { margin: 0 0 0.9rem; }
.gp-keybox ul,
.gp-keybox ol {
margin: 0;
padding-left: 1.25rem;
}
.gp-keybox li {
margin-bottom: 0.7rem;
padding-left: 0.15rem;
}
.gp-keybox li:last-child { margin-bottom: 0; }
/* clay bullets, so the accent repeats down the list */
.gp-keybox li::marker {
color: var(--gp-clay);
}
/* the lead-in phrase at the start of each bullet */
.gp-keybox strong,
.gp-keybox b {
font-weight: 700;
color: var(--gp-ink);
}
.gp-keybox a { color: var(--gp-clay); }
/* --- warning variant: use for deadlines, "don't miss this" ------------- */
.gp-keybox--warn {
border-left-color: var(--gp-amber);
background: #fdfaf0;
}
.gp-keybox--warn li::marker { color: var(--gp-amber); }
.gp-keybox--warn a { color: #8a6508; }
/* ==========================================================================
2. SCRIPT BOX — .gp-script
Wording a parent can copy and send. The H5 inside becomes the label.
========================================================================== */
.gp-script {
background: var(--gp-paper);
border: 1px solid var(--gp-line);
border-radius: var(--gp-radius);
padding: 1.15rem 1.3rem;
margin: 1.5rem 0;
color: var(--gp-ink);
font-size: 1rem;
line-height: 1.6;
}
.gp-script > *:first-child { margin-top: 0; }
.gp-script > *:last-child { margin-bottom: 0; }
/* the little uppercase label — any H4/H5/H6 placed first inside the group */
.gp-script h4:first-child,
.gp-script h5:first-child,
.gp-script h6:first-child {
font-size: 0.72rem;
font-weight: 600;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.075em;
color: var(--gp-soft);
margin: 0 0 0.55rem;
}
.gp-script p {
margin: 0 0 0.75rem;
}
.gp-script p:last-child { margin-bottom: 0; }
/* quotation styling for the script wording itself */
.gp-script p:not(:first-child),
.gp-script--plain p:first-child {
color: var(--gp-ink);
}
.gp-script strong { font-weight: 600; }
/* bracketed placeholders like [name] or [date] read as fill-in-the-blanks */
.gp-script em {
font-style: normal;
color: var(--gp-soft);
}
/* variant with no label heading */
.gp-script--plain {
border-left: 2px solid var(--gp-clay);
}
/* OPTIONAL — triple-click or tap selects the whole script at once.
Delete this rule if you'd rather readers select by hand. */
.gp-script p {
-webkit-user-select: all;
user-select: all;
}
/* ==========================================================================
3. MOBILE
========================================================================== */
@media (max-width: 640px) {
.gp-keybox {
padding: 1.2rem 1.15rem;
margin: 1.5rem 0;
font-size: 0.97rem;
}
.gp-keybox h2,
.gp-keybox h3,
.gp-keybox h4 { font-size: 1rem; }
.gp-keybox ul,
.gp-keybox ol { padding-left: 1.1rem; }
.gp-script {
padding: 1rem 1.05rem;
margin: 1.25rem 0;
font-size: 0.97rem;
}
}
/* ==========================================================================
4. PRINT
Parents print these scripts to take into meetings. Make that work.
========================================================================== */
@media print {
.gp-keybox,
.gp-script {
background: #fff !important;
border: 1px solid #999 !important;
break-inside: avoid;
page-break-inside: avoid;
}
.gp-keybox { border-left: 3px solid #333 !important; }
.gp-script p { user-select: auto; }
}
/* ==========================================================================
5. DARK MODE
Only fires if your theme respects the reader's system setting.
Harmless if it doesn't.
========================================================================== */
@media (prefers-color-scheme: dark) {
body.gp-dark-aware .gp-keybox {
background: #201f1c;
border-color: #3a3833;
color: #e9e7e1;
}
body.gp-dark-aware .gp-keybox h2,
body.gp-dark-aware .gp-keybox h3,
body.gp-dark-aware .gp-keybox h4,
body.gp-dark-aware .gp-keybox strong { color: #f4f2ee; }
body.gp-dark-aware .gp-script {
background: #24231f;
border-color: #3a3833;
color: #e9e7e1;
}
body.gp-dark-aware .gp-script h5:first-child { color: #a8a49a; }
}
/* ==========================================================================
GUIDING PATHWAYS — Tables
Paste this BELOW the blocks CSS in Appearance → Customize → Additional CSS.
It reuses the same --gp-* colors, so nothing new to configure.
HOW TO USE
-----------------------------------------------------------------------
1. Insert a Table block, fill it in, and turn ON "Header section"
in the block's Settings sidebar (this creates real cells,
which matters for screen readers as well as for the styling)
2. Select the Table block → Advanced → Additional CSS class(es):
gp-table
VARIANTS (add as a second class, space separated)
gp-table gp-table--terms two-column glossary: bold, narrower first column
gp-table gp-table--zebra alternating row tint for long tables
gp-table gp-table--stack turns into stacked cards on phones (see below)
ABOUT MOBILE
-----------------------------------------------------------------------
By default the table scrolls sideways on small screens, with a soft
shadow on the edge so readers can tell there's more to see.
For a table with lots of words per cell — like the two-renewal-clocks
comparison — sideways scrolling is miserable. Use gp-table--stack
instead, which breaks each row into its own labelled card on phones.
That one needs a Custom HTML block rather than the Table block, because
each cell carries a data-label. Template at the bottom of this file.
========================================================================== */
/* ==========================================================================
6. TABLES — .gp-table
========================================================================== */
.gp-table {
margin: 2rem 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* edge shadows that appear only when there's more table to scroll to */
background:
linear-gradient(to right, #fff 32%, rgba(255,255,255,0)) left center,
linear-gradient(to left, #fff 32%, rgba(255,255,255,0)) right center,
radial-gradient(farthest-side at 0 50%, rgba(35,33,29,.13), rgba(35,33,29,0)) left center,
radial-gradient(farthest-side at 100% 50%, rgba(35,33,29,.13), rgba(35,33,29,0)) right center;
background-repeat: no-repeat;
background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
background-attachment: local, local, scroll, scroll;
}
.gp-table table {
width: 100%;
min-width: 30rem; /* forces the scroll rather than crushing columns */
border-collapse: collapse;
border: 0;
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--gp-ink);
}
/* --- header row -------------------------------------------------------- */
.gp-table thead th,
.gp-table th {
background: var(--gp-wash);
text-align: left;
vertical-align: bottom;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.075em;
color: var(--gp-soft);
padding: 0.7rem 0.85rem;
border: 0;
border-bottom: 2px solid var(--gp-line);
}
/* --- body cells -------------------------------------------------------- */
.gp-table td {
padding: 0.85rem;
vertical-align: top;
border: 0;
border-bottom: 1px solid var(--gp-line);
word-break: normal;
overflow-wrap: break-word;
}
.gp-table tbody tr:last-child td { border-bottom: 0; }
.gp-table td strong,
.gp-table td b { font-weight: 600; color: var(--gp-ink); }
.gp-table a { color: var(--gp-clay); }
/* WordPress adds its own borders to the table block — clear them */
.gp-table table,
.gp-table table td,
.gp-table table th { border-color: var(--gp-line); }
.gp-table figcaption,
.gp-table .wp-element-caption {
margin-top: 0.7rem;
font-size: 0.85rem;
color: var(--gp-soft);
text-align: left;
}
/* --- variant: glossary / two-column term table ------------------------- */
.gp-table--terms table { min-width: 26rem; }
.gp-table--terms td:first-child {
width: 30%;
font-weight: 600;
color: var(--gp-ink);
}
/* the clay tick that ties tables to the other blocks */
.gp-table--terms td:first-child {
box-shadow: inset 2px 0 0 var(--gp-clay);
padding-left: 0.95rem;
}
/* --- variant: zebra striping for long tables --------------------------- */
.gp-table--zebra tbody tr:nth-child(odd) td { background: #fcfbf9; }
/* ==========================================================================
7. STACKING TABLE — .gp-table--stack
Desktop: a normal table. Phone: each row becomes its own labelled card.
Requires data-label on every — see the template at the bottom.
========================================================================== */
@media (max-width: 640px) {
.gp-table--stack {
overflow-x: visible;
background: none; /* no scroll shadows needed once stacked */
}
.gp-table--stack table {
min-width: 0;
display: block;
}
/* hide the header row visually, keep it for screen readers */
.gp-table--stack thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.gp-table--stack tbody { display: block; }
.gp-table--stack tbody tr {
display: block;
background: var(--gp-wash);
border: 1px solid var(--gp-line);
border-left: 3px solid var(--gp-clay);
border-radius: var(--gp-radius);
padding: 0.9rem 1rem;
margin-bottom: 0.9rem;
}
.gp-table--stack tbody tr:last-child { margin-bottom: 0; }
.gp-table--stack td {
display: block;
padding: 0 0 0.75rem;
border: 0;
background: none !important;
}
.gp-table--stack td:last-child { padding-bottom: 0; }
/* the column name, printed above each value */
.gp-table--stack td::before {
content: attr(data-label);
display: block;
font-size: 0.68rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gp-soft);
margin-bottom: 0.2rem;
}
/* a cell with no data-label just renders plainly */
.gp-table--stack td:not([data-label])::before { content: none; }
/* first cell reads as the card's title */
.gp-table--stack td:first-child {
font-weight: 600;
font-size: 1.02rem;
box-shadow: none;
padding-left: 0;
}
.gp-table--stack td:first-child::before { content: none; }
}
/* ==========================================================================
8. TABLE — MOBILE (non-stacking) AND PRINT
========================================================================== */
@media (max-width: 640px) {
.gp-table { margin: 1.5rem 0; }
.gp-table table { font-size: 0.9rem; }
.gp-table td { padding: 0.7rem; }
.gp-table thead th, .gp-table th { padding: 0.6rem 0.7rem; }
}
@media print {
.gp-table {
overflow: visible !important;
background: none !important;
}
.gp-table table { min-width: 0 !important; font-size: 10.5pt; }
.gp-table thead th, .gp-table th {
background: #f2f2f2 !important;
color: #000 !important;
border-bottom: 1.5pt solid #666 !important;
}
.gp-table td { border-bottom: 0.5pt solid #bbb !important; }
.gp-table tr { break-inside: avoid; page-break-inside: avoid; }
.gp-table thead { display: table-header-group; } /* repeat header across pages */
}
/* ==========================================================================
9. DARK MODE (only if body has gp-dark-aware)
========================================================================== */
@media (prefers-color-scheme: dark) {
body.gp-dark-aware .gp-table {
background:
linear-gradient(to right, #171614 32%, rgba(23,22,20,0)) left center,
linear-gradient(to left, #171614 32%, rgba(23,22,20,0)) right center,
radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) left center,
radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) right center;
background-repeat: no-repeat;
background-size: 44px 100%, 44px 100%, 15px 100%, 15px 100%;
background-attachment: local, local, scroll, scroll;
}
body.gp-dark-aware .gp-table table { color: #e9e7e1; }
body.gp-dark-aware .gp-table th {
background: #201f1c;
color: #a8a49a;
border-bottom-color: #3a3833;
}
body.gp-dark-aware .gp-table td { border-bottom-color: #302e2a; }
body.gp-dark-aware .gp-table--zebra tbody tr:nth-child(odd) td { background: #1c1b18; }
body.gp-dark-aware .gp-table--stack tbody tr {
background: #201f1c;
border-color: #3a3833;
}
}
/* ==========================================================================
TEMPLATE for gp-table--stack
Paste into a Custom HTML block and edit the text. The data-label on each
cell must match that column's header — that's what shows on phones.
-----------------------------------------------------------------------
Medicaid eligibility renewal
Waiver renewal
What it decides
Whether your child has Medicaid at all
Whether your child keeps waiver services and how many hours
Who runs it
Your county or state Medicaid office
Your case manager or care coordination agency
========================================================================== */