/*
Theme Name: GCA (Astra child)
Theme URI: https://gcakw.org
Description: Presentation layer for the Gujarati Cultural Association of Golden Triangle. All design lives here; all content lives in wp-admin.
Author: GCA
Template: astra
Version: 2.0.0
Text Domain: astra-gca
*/
/* ==========================================================================
1. Tokens
ONE light palette. Text is always dark, backgrounds are always light.
That single rule is what keeps this maintainable — whoever edits a page
later never has to think about which section flips the text colour.
The footer is the one dark surface, and nobody adds sections inside it.
========================================================================== */
:root {
--gca-cream: #FFF6E9; /* page ground */
--gca-warm: #FDEEDA; /* the "bit more orange" band */
--gca-white: #FFFFFF; /* cards */
--gca-ink: #241C42; /* all body text */
--gca-ink-soft: #5D5678;
--gca-ink-faint: #938CAB;
--gca-saffron: #DE7A0E;
--gca-saffron-dp:#B85F05; /* accent text on light, for contrast */
--gca-magenta: #C2145A;
--gca-teal: #0C8375;
--gca-rule: #EDDCC2;
--gca-footer: #17123A;
--gca-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--gca-r-lg: 24px;
--gca-r-md: 16px;
--gca-shadow: 0 1px 2px rgba(80,54,20,.05), 0 14px 32px -16px rgba(80,54,20,.28);
--gca-shadow-sm: 0 1px 2px rgba(80,54,20,.05), 0 6px 16px -10px rgba(80,54,20,.30);
}
/* ==========================================================================
2. Base
========================================================================== */
body { background: var(--gca-cream); color: var(--gca-ink); }
h1, h2, h3, h4,
.uagb-heading-text,
.ues-title,
.gca-tier-heading {
font-family: var(--gca-display);
font-weight: 800;
letter-spacing: -.02em;
text-wrap: balance;
}
/* Section bands. Two options, both light — a section cannot be added wrong. */
.gca-band-cream > .uagb-container-inner-blocks-wrap,
.gca-band-cream { background-color: var(--gca-cream) !important; }
.gca-band-warm > .uagb-container-inner-blocks-wrap,
.gca-band-warm { background-color: var(--gca-warm) !important; }
.gca-band-white > .uagb-container-inner-blocks-wrap,
.gca-band-white { background-color: var(--gca-white) !important; }
/* ==========================================================================
3. Header — standalone logo + floating white menu pill
========================================================================== */
.site-header { background: transparent; }
.site-branding.ast-site-identity { padding: 0; }
.site-logo-img .custom-logo-link { display: block; }
.site-logo-img .custom-logo-link img.custom-logo {
width: 132px; height: auto; max-width: 132px;
margin-left: 26px; /* nudged in off the edge */
}
.ast-builder-menu-1 .main-header-bar-navigation > .main-header-menu,
.ast-builder-menu-1 ul.main-header-menu {
background: var(--gca-white);
border-radius: 999px;
box-shadow: var(--gca-shadow-sm);
padding: 7px 10px;
}
/* Astra colours links via `.ast-builder-menu-1 .main-header-menu > .menu-item
> .menu-link` (four classes) — these match its own class names and add one
more, so they win without needing !important. */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
border-radius: 999px; padding: 9px 14px;
font-size: .87rem; font-weight: 550; color: #4A4368; line-height: 1.2;
}
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover {
background: var(--gca-warm); color: var(--gca-ink);
}
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item.current_page_item > .menu-link,
.ast-builder-menu-1 .main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
background: var(--gca-ink); color: #fff;
}
.ast-builder-menu-1 ul.main-header-menu .sub-menu {
border-radius: var(--gca-r-md); box-shadow: var(--gca-shadow);
padding: 6px; border: none; overflow: hidden;
}
.ast-builder-menu-1 ul.main-header-menu .sub-menu a { border-radius: 11px; font-size: .86rem; }
.ast-button-wrap .ast-mobile-menu-trigger-minimal {
background: var(--gca-white); border-radius: 999px;
width: 46px; height: 46px; box-shadow: var(--gca-shadow-sm); color: var(--gca-ink);
}
@media (max-width: 921px) {
.site-logo-img .custom-logo-link img.custom-logo { width: 84px; max-width: 84px; margin-left: 4px; }
.ast-builder-menu-1 ul.main-header-menu { background: none; box-shadow: none; padding: 0; }
}
/* ==========================================================================
4. Buttons — components that look right wherever they are placed
========================================================================== */
.gca-btn {
display: inline-flex; align-items: center; gap: 9px;
padding: 15px 26px; border-radius: 999px;
font-weight: 700; font-size: .98rem; line-height: 1;
border: 2px solid transparent; text-decoration: none;
}
.gca-btn svg { flex: none; }
.gca-btn-primary { background: var(--gca-saffron); color: #fff; box-shadow: 0 10px 22px -12px rgba(222,122,14,.95); }
.gca-btn-primary:hover { background: var(--gca-saffron-dp); color: #fff; }
.gca-btn-outline { background: var(--gca-white); color: var(--gca-ink); border-color: var(--gca-rule); }
.gca-btn-outline:hover { border-color: var(--gca-saffron); color: var(--gca-saffron-dp); }
.gca-btn-sm {
display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
font-weight: 700; font-size: .85rem; background: var(--gca-ink); color: #fff;
}
/* ==========================================================================
5. Hero
========================================================================== */
.gca-hero { position: relative; overflow: hidden; }
.gca-hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(900px 520px at 88% 12%, #FFEBCF 0%, transparent 60%),
radial-gradient(700px 460px at 4% 86%, #FDE6E9 0%, transparent 62%);
}
.gca-hero > * { position: relative; z-index: 1; }
.gca-kicker {
display: inline-flex; align-items: center; gap: 9px;
color: var(--gca-saffron-dp); font-size: .7rem; letter-spacing: .15em;
text-transform: uppercase; font-weight: 600;
background: var(--gca-white); border: 1px solid var(--gca-rule);
padding: 8px 16px; border-radius: 999px; box-shadow: var(--gca-shadow-sm);
}
.gca-kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gca-saffron); }
.gca-note {
display: flex; align-items: flex-start; gap: 8px;
color: var(--gca-ink-faint); font-size: .78rem; font-style: italic; max-width: 54ch;
}
/* stat strip */
.gca-stats {
background: var(--gca-white); border: 1px solid var(--gca-rule);
border-radius: var(--gca-r-lg); box-shadow: var(--gca-shadow);
display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden;
max-width: 820px; margin: 0 auto;
}
.gca-stat { padding: 20px 16px; text-align: center; border-right: 1px solid var(--gca-rule); }
.gca-stat:last-child { border-right: none; }
.gca-stat b {
display: block; font-family: var(--gca-display); font-weight: 800;
font-size: 1.8rem; line-height: 1; color: var(--gca-ink); font-variant-numeric: tabular-nums;
}
.gca-stat span {
font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--gca-ink-faint); font-weight: 600;
}
@media (max-width: 620px) {
.gca-stats { grid-template-columns: 1fr; }
.gca-stat { border-right: none; border-bottom: 1px solid var(--gca-rule); }
.gca-stat:last-child { border-bottom: none; }
}
/* ==========================================================================
6. Event cards — [gca_event_cards] and the hero slider plugin share a look
========================================================================== */
.gca-event-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px;
}
.gca-ec {
background: var(--gca-white); border: 1px solid var(--gca-rule); border-radius: var(--gca-r-lg);
overflow: hidden; box-shadow: var(--gca-shadow); transition: transform .18s ease;
}
.gca-ec:hover { transform: translateY(-4px); }
.gca-ec-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.gca-ec-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gca-warm); }
.gca-ec-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gca-ec-date {
position: absolute; left: 14px; top: 14px; background: var(--gca-white);
border-radius: 13px; padding: 8px 12px; text-align: center; box-shadow: var(--gca-shadow-sm);
}
.gca-ec-date b {
display: block; font-family: var(--gca-display); font-weight: 800;
font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.gca-ec-date span {
display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
color: var(--gca-magenta); font-weight: 700;
}
.gca-ec-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gca-ec-title { font-size: 1.24rem; line-height: 1.18; margin: 0; }
.gca-ec-meta { display: flex; flex-direction: column; gap: 6px; color: var(--gca-ink-soft); font-size: .89rem; }
.gca-ec-meta span { display: flex; align-items: center; gap: 8px; }
.gca-ec-meta svg { flex: none; color: var(--gca-ink-faint); }
.gca-ec-foot {
margin-top: auto; padding-top: 15px; border-top: 1px solid var(--gca-rule);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.gca-ec-price small {
display: block; font-size: .64rem; letter-spacing: .09em; text-transform: uppercase;
color: var(--gca-ink-faint); font-weight: 600;
}
.gca-ec-price b { font-family: var(--gca-display); font-weight: 800; font-size: 1.16rem; font-variant-numeric: tabular-nums; }
.gca-ec-price b i { font-style: normal; font-size: .78rem; color: var(--gca-ink-soft); font-weight: 600; }
.gca-ec:hover .gca-btn-sm { background: var(--gca-saffron); }
.gca-empty-note { color: var(--gca-ink-soft); font-style: italic; }
/* the hero slider (upcoming-events-slider plugin) picks up the same card look */
.ues-section, .upcoming-events-slider { overflow: hidden; max-width: 100%; }
.ues-title { font-size: clamp(1.6rem, 3vw, 2.1rem); margin: 0 0 6px; }
.ues-viewall { font-weight: 700; border-bottom: 2px solid var(--gca-saffron); padding-bottom: 2px; text-decoration: none; }
.ues-card {
background: var(--gca-white); border: 1px solid var(--gca-rule); border-radius: var(--gca-r-lg);
overflow: hidden; box-shadow: var(--gca-shadow); height: 100%;
}
.ues-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.ues-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gca-warm); }
.ues-media .ues-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ues-date-badge {
position: absolute; left: 14px; top: 14px; background: var(--gca-white); border-radius: 13px;
padding: 8px 12px; text-align: center; box-shadow: var(--gca-shadow-sm); display: block; line-height: 1;
}
.ues-date-day { display: block; font-family: var(--gca-display); font-weight: 800; font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.ues-date-mon { display: block; font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gca-magenta); font-weight: 700; margin-top: 3px; }
.ues-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.ues-card-title { font-family: var(--gca-display); font-weight: 800; font-size: 1.2rem; line-height: 1.18; margin: 0; color: var(--gca-ink); }
.ues-meta { display: flex; flex-direction: column; gap: 6px; color: var(--gca-ink-soft); font-size: .89rem; }
.ues-meta > span { display: flex; align-items: center; gap: 8px; }
.ues-meta svg { flex: none; color: var(--gca-ink-faint); }
.upcoming-events-slider .swiper-button-next,
.upcoming-events-slider .swiper-button-prev {
width: 40px; height: 40px; border-radius: 999px; background: var(--gca-white);
box-shadow: var(--gca-shadow-sm); color: var(--gca-ink); border: 1px solid var(--gca-rule);
}
.upcoming-events-slider .swiper-button-next::after,
.upcoming-events-slider .swiper-button-prev::after { font-size: 14px; font-weight: 700; }
.upcoming-events-slider .swiper-pagination-bullet-active { background: var(--gca-saffron); }
/* ==========================================================================
7. Membership cards — [gca_membership_cards], prices read from Tickets
========================================================================== */
.gca-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(262px, 100%), 1fr)); gap: 20px; }
.gca-plan {
background: var(--gca-white); border: 1px solid var(--gca-rule); border-radius: var(--gca-r-lg);
padding: 26px 24px 24px; display: flex; flex-direction: column; gap: 14px;
position: relative; box-shadow: var(--gca-shadow); min-width: 0;
}
.gca-plan.is-featured { border-color: var(--gca-saffron); box-shadow: 0 0 0 2px var(--gca-saffron), var(--gca-shadow); }
.gca-plan-tag {
position: absolute; top: -12px; left: 24px; background: var(--gca-saffron); color: #fff;
font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
padding: 6px 12px; border-radius: 999px;
}
.gca-plan-name { font-size: 1.28rem; margin: 0; }
.gca-plan-who { color: var(--gca-ink-soft); font-size: .89rem; margin: -8px 0 0; }
.gca-plan-amt { display: flex; align-items: baseline; gap: 5px; }
.gca-plan-amt b {
font-family: var(--gca-display); font-weight: 800; font-size: 2.6rem; line-height: 1;
font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.gca-plan-amt span { color: var(--gca-ink-faint); font-size: .82rem; font-weight: 600; }
.gca-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .89rem; color: var(--gca-ink-soft); }
.gca-plan-list li { display: flex; gap: 9px; align-items: flex-start; }
.gca-plan-list svg { flex: none; margin-top: 3px; color: var(--gca-teal); }
.gca-plan .gca-btn { width: 100%; justify-content: center; margin-top: auto; }
/* ==========================================================================
8. Sponsors
========================================================================== */
.gca-tier-heading { font-size: 1.02rem; margin: 0 0 16px; display: flex; align-items: center; gap: 14px; }
.gca-tier-heading::after { content: ""; height: 1px; background: var(--gca-rule); flex: 1; }
.gca-logos { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.gca-logo {
background: var(--gca-white); border: 1px solid var(--gca-rule); border-radius: var(--gca-r-md);
/* height:auto is required — the base stylesheet sets height:240px, and pairing
that with aspect-ratio would force a 427px width and break phones. */
height: auto; aspect-ratio: 16 / 9; min-width: 0;
display: grid; place-items: center; padding: 16px; box-shadow: none;
}
.gca-logo img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
/* ==========================================================================
9. Footer — the one dark surface, anchoring the page
========================================================================== */
.site-footer,
.site-footer .site-primary-footer-wrap,
.site-footer .site-below-footer-wrap,
.site-footer .site-above-footer-wrap {
background-color: var(--gca-footer);
border-color: rgba(255,255,255,.11);
}
.site-footer { color: #C6BFE8; }
.site-footer a,
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright a,
.site-footer .gca-foot-contact,
.site-footer .gca-foot-contact a { color: #C6BFE8; }
.site-footer a:hover { color: #FFC06B; }
.gca-foot-brand { font-family: var(--gca-display); font-weight: 800; color: #fff; font-size: 1rem; line-height: 1.2; margin-bottom: 10px; }
.gca-foot-contact { font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; }
.gca-foot-contact .gca-dot { margin: 0 .55em; color: var(--gca-ink-faint); }
.gca-foot-col-title { font-family: var(--gca-display); font-weight: 800; color: #fff; font-size: .83rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 15px; }
.gca-foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .92rem; }
.gca-foot-connect { display: flex; gap: 10px; }
.gca-cbtn {
width: 44px; height: 44px; border-radius: 999px;
background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
display: inline-grid; place-items: center;
font-size: 0; color: transparent; text-indent: -9999px; overflow: hidden; position: relative;
}
.gca-cbtn::before {
content: ""; position: absolute; inset: 0; margin: auto;
width: 20px; height: 20px; background: #fff;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
-webkit-mask-size: contain; mask-size: contain;
}
.gca-cbtn:hover { background: var(--gca-saffron); border-color: var(--gca-saffron); }
.gca-ig::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.gca-fb::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
.gca-em::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* ==========================================================================
10. Tickets — make the purchase form match the rest of the site
========================================================================== */
.tribe-tickets__tickets-form { border-radius: var(--gca-r-lg); border-color: var(--gca-rule); background: var(--gca-white); }
.tribe-tickets__tickets-buy { border-radius: 999px !important; background: var(--gca-saffron) !important; border-color: var(--gca-saffron) !important; font-weight: 700; }
.tribe-tickets__tickets-buy:hover { background: var(--gca-saffron-dp) !important; border-color: var(--gca-saffron-dp) !important; }
/* ==========================================================================
11. Accessibility
========================================================================== */
a:focus-visible, button:focus-visible, .gca-btn:focus-visible, .gca-cbtn:focus-visible {
outline: 3px solid var(--gca-saffron); outline-offset: 3px; border-radius: 999px;
}
@media (prefers-reduced-motion: reduce) {
.gca-ec, .gca-ec:hover { transition: none; transform: none; }
}
/* ==========================================================================
12. Page sections built from ordinary blocks
Volunteers add a Group block and give it gca-band-cream / -warm / -white.
Everything below styles standard core blocks, so the editor stays familiar.
========================================================================== */
.gca-section { padding: 76px 0; }
.gca-hero { padding: 200px 0 70px; }
@media (max-width: 921px) { .gca-hero { padding: 150px 0 56px; } .gca-section { padding: 56px 0; } }
.gca-eyebrow {
font-size: .7rem !important; letter-spacing: .15em; text-transform: uppercase;
color: var(--gca-saffron-dp); font-weight: 600; margin-bottom: .5rem !important;
}
.gca-lede { color: var(--gca-ink-soft); max-width: 52ch; }
.gca-hero h1 { font-size: clamp(2.4rem, 5.6vw, 4rem); line-height: 1.04; margin: 0 0 1rem; }
.gca-hero h1 em { font-style: normal; color: var(--gca-saffron); }
.gca-hero .gca-kicker { margin-bottom: 1.2rem; }
/* stat strip built from a core Columns block, so the numbers are just text */
.gca-stats.wp-block-columns {
background: var(--gca-white); border: 1px solid var(--gca-rule);
border-radius: var(--gca-r-lg); box-shadow: var(--gca-shadow);
max-width: 820px; margin: 0 auto; gap: 0; overflow: hidden;
}
.gca-stats.wp-block-columns .wp-block-column {
padding: 20px 16px; text-align: center; border-right: 1px solid var(--gca-rule);
}
.gca-stats.wp-block-columns .wp-block-column:last-child { border-right: none; }
.gca-stats .wp-block-column > *:first-child {
font-family: var(--gca-display); font-weight: 800; font-size: 1.8rem; line-height: 1;
color: var(--gca-ink); font-variant-numeric: tabular-nums; margin: 0 0 .35rem;
}
.gca-stats .wp-block-column > *:last-child {
font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--gca-ink-faint); font-weight: 600; margin: 0;
}
@media (max-width: 781px) {
.gca-stats.wp-block-columns { flex-wrap: nowrap !important; }
}
@media (max-width: 600px) {
.gca-stats.wp-block-columns { flex-wrap: wrap !important; }
.gca-stats.wp-block-columns .wp-block-column {
flex-basis: 100% !important; border-right: none; border-bottom: 1px solid var(--gca-rule);
}
.gca-stats.wp-block-columns .wp-block-column:last-child { border-bottom: none; }
}
/* ==========================================================================
13. Corrections found on the live build
========================================================================== */
/* Astra underlines content links; our buttons and cards are not body copy. */
.gca-btn, .gca-btn:hover,
.gca-btn-sm, .gca-btn-sm:hover,
.gca-ec-link, .gca-ec-link:hover,
.ues-card-link, .ues-card-link:hover,
.ues-card-title, .ues-meta a, .ues-meta a:hover,
.gca-logo a { text-decoration: none !important; }
/* In the hero the slider carries its own "What's On / Upcoming Events" heading,
which duplicates the section directly below it. */
.gca-hero .ues-head { display: none; }
.gca-hero .ues-section { margin-top: 0; }
/* The plugin's card links inherit Astra's underline on hover too. */
.ues-card .ues-meta { text-decoration: none; }
.ues-card:hover { box-shadow: var(--gca-shadow); }
/* Tighten the gap the stat strip leaves behind it. */
.gca-hero .gca-stats { margin-top: 8px; }
/* ==========================================================================
14. Sponsor tiles and the newsletter band
========================================================================== */
/* A tier with a single sponsor was stretching one logo across the full row.
Cap the tile width and left-align, so one logo looks deliberate and many
still fill the row. */
.gca-logos {
grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 260px));
justify-content: start;
gap: 14px;
}
.gca-tier { margin-top: 30px; }
.gca-tier-heading {
font-size: .95rem; letter-spacing: .02em;
color: var(--gca-ink); text-transform: none;
}
/* The newsletter band predates this palette — it was near-black. Bring it in
line: deep indigo like the footer, saffron accents. */
.gca-newsletter-cta {
background: var(--gca-footer) !important;
border-radius: var(--gca-r-lg);
padding: 52px 28px !important;
}
.gca-cta-title { font-family: var(--gca-display); font-weight: 800 !important; letter-spacing: -.02em; }
.gca-cta-accent { color: var(--gca-saffron) !important; }
.gca-cta-divider { border-top-color: var(--gca-saffron) !important; }
.gca-cta-desc { color: #C6BFE8 !important; }
.gca-newsletter-cta input[type="text"],
.gca-newsletter-cta input[type="email"] {
border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
background: rgba(255,255,255,.07); color: #fff;
}
.gca-newsletter-cta input::placeholder { color: #8E86B8; }
.gca-newsletter-cta label { color: #C6BFE8 !important; }
.gca-newsletter-cta input[type="submit"],
.gca-newsletter-cta button[type="submit"] {
background: var(--gca-saffron) !important; border-color: var(--gca-saffron) !important;
border-radius: 999px !important; font-weight: 700; color: #fff !important;
}
.gca-newsletter-cta input[type="submit"]:hover,
.gca-newsletter-cta button[type="submit"]:hover {
background: var(--gca-saffron-dp) !important; border-color: var(--gca-saffron-dp) !important;
}
/* ==========================================================================
15. Footer columns
========================================================================== */
.site-primary-footer-wrap { padding: 56px 0 44px; }
.site-footer .gca-foot-blurb { font-size: .9rem; margin: 0 0 12px; color: #A79FD4; line-height: 1.55; }
.site-footer .gca-foot-contact { font-size: .95rem; margin: 0 0 6px; }
.site-footer .gca-foot-contact a { color: #fff; font-weight: 600; }
.gca-foot-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .92rem; }
.gca-foot-links li { margin: 0; }
.gca-foot-links a { text-decoration: none; }
.gca-foot-connect { margin-top: 16px; }
.gca-foot-cta { margin-top: 6px; font-size: .88rem !important; padding: 12px 20px !important; }
/* Astra stacks footer columns on tablet by default; two-up reads better there. */
@media (min-width: 545px) and (max-width: 921px) {
.site-primary-footer-wrap .ast-builder-grid-row { grid-template-columns: 1fr 1fr !important; gap: 32px 28px; }
}
@media (max-width: 544px) {
.site-primary-footer-wrap .ast-builder-grid-row { gap: 30px; }
}
/* Three link columns inside the second footer widget (Astra free only
registers two HTML widgets, so we grid inside one rather than depend on
theme internals that could change on update). */
.gca-foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.gca-foot-col { min-width: 0; }
.site-primary-footer-wrap .ast-builder-grid-row { grid-template-columns: 1.15fr 2fr !important; gap: 40px; }
@media (max-width: 921px) {
.site-primary-footer-wrap .ast-builder-grid-row { grid-template-columns: 1fr !important; gap: 34px; }
.gca-foot-cols { gap: 26px; }
}
@media (max-width: 600px) { .gca-foot-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .gca-foot-cols { grid-template-columns: 1fr; } }
/* ==========================================================================
16. Inner pages — short hero, callouts, awards roll
========================================================================== */
.gca-hero-short { padding: 170px 0 48px; }
@media (max-width: 921px) { .gca-hero-short { padding: 130px 0 40px; } }
.gca-hero-short h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin: .2rem 0 .8rem; }
.gca-callout {
background: var(--gca-warm); border: 1px solid var(--gca-rule);
border-radius: var(--gca-r-lg); padding: 26px 24px;
}
.gca-callout h3 { margin-top: 0; font-size: 1.2rem; }
.gca-callout p:last-child { margin-bottom: 0; }
/* Past recipients: an ordinary bulleted list in the editor, a card grid here.
Adding next year's winners means typing one more bullet. */
.gca-awards {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: 12px;
}
.gca-awards li {
background: var(--gca-white); border: 1px solid var(--gca-rule);
border-radius: var(--gca-r-md); padding: 15px 17px; margin: 0;
display: flex; gap: 14px; align-items: flex-start;
font-size: .91rem; line-height: 1.45; color: var(--gca-ink);
}
.gca-awards li strong {
font-family: var(--gca-display); font-weight: 800; font-size: 1.14rem;
color: var(--gca-magenta); font-variant-numeric: tabular-nums;
flex: none; min-width: 2.9ch; line-height: 1.25;
}
.gca-awards li:first-child { border-color: var(--gca-saffron); box-shadow: 0 0 0 2px rgba(222,122,14,.18); }
/* Generic inner-page rhythm so every page matches without extra work */
.gca-section > .wp-block-heading:first-child,
.gca-section > .gca-eyebrow:first-child { margin-top: 0; }
.gca-section p { color: var(--gca-ink-soft); }
.gca-section h2 { margin-bottom: .5rem; }
/* The ticket form is the checkout — give it room and centre it. */
.gca-buy .tribe-tickets__tickets-form,
.gca-buy .tribe-common { max-width: 100%; }
.gca-buy .tribe-tickets__tickets-form {
background: var(--gca-white); border: 1px solid var(--gca-rule);
border-radius: var(--gca-r-lg); box-shadow: var(--gca-shadow); padding: 8px 20px 20px;
}
.gca-buy .tribe-tickets__tickets-title { display: none; }
/* ==========================================================================
17. Core grid groups (committee lists, and anything else laid out as a grid)
The governance grid was holding 4 columns at 73px each on a phone, with the
cards overflowing their own cells. Let grid children shrink, and drop to a
readable number of columns on small screens.
========================================================================== */
.wp-block-group.is-layout-grid > * { min-width: 0; }
.wp-block-group.is-layout-grid .wp-block-image,
.wp-block-group.is-layout-grid figure { max-width: 100%; }
.wp-block-group.is-layout-grid img { max-width: 100%; height: auto; }
@media (max-width: 921px) {
.wp-block-group.is-layout-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
.wp-block-group.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.wp-block-group.is-layout-grid .wp-block-group { padding: 16px 10px !important; }
}
/* ==========================================================================
18. QA fixes — found in the full-site review
========================================================================== */
/* (a) Hero clearance.
Astra prints `.entry-content > .wp-block-group { padding-top: … }` inline,
after this stylesheet and with two classes, so a bare `.gca-hero` lost and
the hero only reserved 50px. On phones that put the headline pill directly
underneath the logo. Match Astra's specificity to win cleanly. */
.entry-content > .wp-block-group.gca-hero,
.wp-block-group.gca-hero { padding-top: 200px; padding-bottom: 70px; }
.entry-content > .wp-block-group.gca-hero-short,
.wp-block-group.gca-hero-short { padding-top: 170px; padding-bottom: 48px; }
.entry-content > .wp-block-group.gca-section,
.wp-block-group.gca-section { padding-top: 76px; padding-bottom: 76px; }
@media (max-width: 921px) {
.entry-content > .wp-block-group.gca-hero,
.wp-block-group.gca-hero { padding-top: 150px; padding-bottom: 56px; }
.entry-content > .wp-block-group.gca-hero-short,
.wp-block-group.gca-hero-short { padding-top: 130px; padding-bottom: 40px; }
.entry-content > .wp-block-group.gca-section,
.wp-block-group.gca-section { padding-top: 56px; padding-bottom: 56px; }
}
/* (b) Footer links were 19px tall — well under the 44px touch minimum. */
.gca-foot-links { gap: 2px; }
.gca-foot-links a {
display: inline-flex; align-items: center;
min-height: 44px; padding: 4px 0; line-height: 1.3;
}
/* (c) Text under 12px is hard to read on a phone. Raise our own small labels
to a legible floor and let them keep their letter-spacing. */
.gca-eyebrow { font-size: .78rem !important; }
.gca-kicker { font-size: .75rem; }
.gca-plan-tag { font-size: .68rem; }
@media (max-width: 600px) {
.gca-kicker { font-size: .72rem; letter-spacing: .12em; }
.gca-plan-tag { font-size: .66rem; }
}
/* (d) Events Calendar list view: venue name and address were colliding. */
.tribe-events-calendar-list__event-venue,
.tribe-events-calendar-list__event-venue > * { display: block; }
.tribe-events-calendar-list__event-venue-title { margin-right: .4em; }
.tribe-events-calendar-list__event-venue-address { display: block; margin-top: 2px; }
@media (min-width: 768px) {
.tribe-events-calendar-list__event-venue-title,
.tribe-events-calendar-list__event-venue-address { display: inline; }
}
.tribe-events-c-small-cta__price { font-size: .78rem; }
/* ==========================================================================
19. 404
========================================================================== */
.gca-404 { padding: 170px 0 90px; max-width: 760px; }
@media (max-width: 921px) { .gca-404 { padding: 130px 0 64px; } }
.gca-404-title { font-size: clamp(1.9rem, 4.2vw, 2.8rem); line-height: 1.1; margin: .8rem 0 .9rem; }
.gca-404-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 40px; }
.gca-404-sub { font-size: 1rem; margin: 0 0 14px; }
.gca-404-links ul {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 8px 20px;
}
.gca-404-links li { margin: 0; }
.gca-404-links a {
display: inline-flex; align-items: center; min-height: 44px;
font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent;
}
.gca-404-links a:hover { border-bottom-color: var(--gca-saffron); }
.gca-404-search { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--gca-rule); max-width: 420px; }
.gca-404-search input[type="search"] {
border-radius: 999px; border: 1px solid var(--gca-rule); padding: 12px 18px; width: 100%;
}
/* Remaining touch targets: the footer email and the copyright-bar links were
20–26px tall, under the 44px minimum. */
.site-footer .gca-foot-contact a,
.site-footer .ast-footer-copyright a {
display: inline-flex; align-items: center; min-height: 44px; padding: 2px 0;
}
/* Ticket quantity steppers ship at 12×29px — too small to hit reliably on a
phone, and this is the purchase flow, so it matters most here. */
.tribe-tickets__tickets-item-quantity-remove,
.tribe-tickets__tickets-item-quantity-add {
min-width: 44px; min-height: 44px;
display: inline-flex !important; align-items: center; justify-content: center;
font-size: 1.1rem; line-height: 1; border-radius: 999px;
}
.tribe-tickets__tickets-item-quantity-remove:hover,
.tribe-tickets__tickets-item-quantity-add:hover { background: var(--gca-warm); }
.tribe-tickets__tickets-item-quantity-number { min-height: 44px; }
.tribe-tickets__tickets-item-quantity { gap: 2px; }
/* ==========================================================================
20. Hero event slider — equal height, slightly smaller
Slides were jumping between events: Navratri carries two meta lines (date +
venue) while Diwali has no venue set, so its card was 32px shorter and the
slider resized as it rotated. Stretch every slide to the tallest so the
height is stable no matter what an event does or does not have, and trim the
overall size so it sits better beside the headline.
========================================================================== */
.upcoming-events-slider .swiper-wrapper { align-items: stretch; }
.upcoming-events-slider .swiper-slide {
height: auto; /* let the card decide, then stretch to match */
display: flex;
}
.upcoming-events-slider .swiper-slide > .ues-card,
.upcoming-events-slider .ues-card { width: 100%; height: auto; display: flex; flex-direction: column; }
.upcoming-events-slider .ues-card-link { flex: 1; }
.upcoming-events-slider .ues-body { flex: 1; }
/* Reserve room for a second meta line so cards with and without a venue read
the same, rather than one looking bottom-heavy. */
.upcoming-events-slider .ues-meta { min-height: 2.9em; }
/* A little smaller overall */
.upcoming-events-slider .ues-media { aspect-ratio: 16 / 9; }
.upcoming-events-slider .ues-body { padding: 16px 18px 18px; gap: 7px; }
.upcoming-events-slider .ues-card-title { font-size: 1.1rem; }
.upcoming-events-slider .ues-meta { font-size: .85rem; gap: 5px; }
.upcoming-events-slider .ues-date-badge { padding: 7px 10px; border-radius: 11px; }
.upcoming-events-slider .ues-date-day { font-size: 1.2rem; }
/* Event Tickets injects its form wrapper outside the block layout's control,
so on a constrained section it spilled to 1280px while the heading above it
sat at 820px. Pull it back in line with the rest of the section. */
.gca-buy .tribe-common.event-tickets,
.gca-buy .tribe-tickets__tickets-form,
.gca-buy .tribe-tickets__tickets-form-wrap {
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
/* Slider trimmed again — cap its width so the card (and therefore its
aspect-ratio-driven height) comes down, and let it sit to the right of the
headline rather than filling the whole column. Full width on phones. */
@media (min-width: 922px) {
.gca-hero .ues-section { max-width: 505px; margin-left: auto; }
.gca-hero .ues-body { padding: 16px 18px 18px; }
.gca-hero .ues-card-title { font-size: 1.08rem; }
.gca-hero .ues-meta { font-size: .84rem; min-height: 2.8em; }
.gca-hero .ues-date-day { font-size: 1.18rem; }
.gca-hero .ues-date-badge { padding: 7px 10px; }
.gca-hero .upcoming-events-slider .swiper-button-next,
.gca-hero .upcoming-events-slider .swiper-button-prev { width: 34px; height: 34px; }
.gca-hero .upcoming-events-slider .swiper-button-next::after,
.gca-hero .upcoming-events-slider .swiper-button-prev::after { font-size: 12px; }
}
/* ==========================================================================
21. Type scale
Astra sets the root font-size to 18px rather than the browser's 16px, so
every rem value is already 12.5% larger than it looks in the CSS. Combined
with generous heading sizes that put the hero H1 at 72px and section H2s at
48px — well above the 40–56 / 28–40 most sites sit in.
Headings come down; body text stays at 18px, which suits an audience with a
lot of older members, and line length is already in the ideal 60–75 range.
========================================================================== */
.gca-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.06; }
.gca-hero-short h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.entry-content h1 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); }
.gca-section h2,
.entry-content h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); line-height: 1.12; }
.gca-section h3,
.entry-content h3 { font-size: clamp(1.15rem, 1.7vw, 1.35rem); }
.gca-ec-title, .ues-card-title { font-size: 1.14rem; }
.gca-plan-name { font-size: 1.18rem; }
.gca-plan-amt b { font-size: 2.2rem; }
.gca-stats .wp-block-column > *:first-child { font-size: 1.6rem; }
.gca-404-title { font-size: clamp(1.7rem, 3.4vw, 2.3rem); }
/* The single-event template (The Events Calendar) runs large too. */
.tribe-events-single h1,
.tribe-events-single .tribe-events-single-event-title { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
/* Card titles are h3s, so the generic `.gca-section h3` rule above outranked
`.gca-ec-title` and pushed them back up. Match its specificity. */
.gca-section h3.gca-ec-title,
.gca-section h3.ues-card-title,
h3.gca-ec-title, h3.ues-card-title,
.gca-ec .gca-ec-title, .ues-card .ues-card-title { font-size: 1.1rem; line-height: 1.25; }
.gca-section h3.gca-plan-name, h3.gca-plan-name { font-size: 1.16rem; }
.gca-hero .ues-card-title, .gca-hero h3.ues-card-title { font-size: 1.04rem; }
/* ==========================================================================
22. ONE TYPE SCALE FOR THE WHOLE SITE
Pages were built at different times, each Spectra/Gutenberg block carrying
its own inline sizes. The result was 6 different H2 sizes, 6 H3 sizes, 7
button sizes and section padding from 10px to 200px — which reads as
"things popping out" rather than a designed page.
One ladder below, applied to every page. Root is 18px, so 1rem = 18px.
Spectra emits `.uagb-block- .uagb-heading-text` (two classes), so these
selectors carry two classes too and win on source order.
========================================================================== */
:root {
--gca-h1: 2.25rem; /* ~40px */
--gca-h2: 1.75rem; /* ~32px */
--gca-h3: 1.33rem; /* ~24px */
--gca-h4: 1.11rem; /* ~20px */
--gca-body: 1rem; /* 18px */
--gca-small: .89rem; /* ~16px */
--gca-btn: .95rem; /* ~17px */
}
/* ---- headings ---------------------------------------------------------- */
.entry-content h1,
.entry-content h1.uagb-heading-text,
.entry-content .uagb-heading-text h1,
.ast-container h1.entry-title {
font-size: var(--gca-h1); line-height: 1.12;
}
.entry-content h2,
.entry-content h2.uagb-heading-text,
.entry-content .uagb-heading-text h2 {
font-size: var(--gca-h2); line-height: 1.18;
}
.entry-content h3,
.entry-content h3.uagb-heading-text,
.entry-content .uagb-heading-text h3 {
font-size: var(--gca-h3); line-height: 1.25;
}
.entry-content h4,
.entry-content h4.uagb-heading-text,
.entry-content .uagb-heading-text h4 {
font-size: var(--gca-h4); line-height: 1.3;
}
/* Heroes keep a larger display size — one deliberate exception. */
.gca-hero h1, .entry-content .gca-hero h1 { font-size: clamp(2rem, 4.4vw, 3.1rem); line-height: 1.06; }
.gca-hero-short h1, .entry-content .gca-hero-short h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
/* ---- body copy --------------------------------------------------------- */
.entry-content p,
.entry-content li,
.entry-content .uagb-ifb-desc,
.entry-content td {
font-size: var(--gca-body); line-height: 1.65;
}
/* labels and meta stay smaller, but never below 16px */
.entry-content .gca-eyebrow,
.entry-content .gca-kicker,
.entry-content .gca-note,
.gca-ec-meta, .ues-meta, .gca-plan-who, .gca-plan-list {
font-size: var(--gca-small);
}
/* ---- buttons ----------------------------------------------------------- */
.entry-content .wp-block-button__link,
.entry-content .uagb-buttons-repeater,
.entry-content a.gca-btn,
.gca-btn, .gca-btn-sm,
.tribe-tickets__tickets-buy,
.tribe-events-c-btn,
.tribe-common-c-btn {
font-size: var(--gca-btn) !important;
line-height: 1.2;
}
.gca-btn { padding: 14px 24px; }
.gca-btn-sm { padding: 10px 17px; font-size: .86rem !important; }
/* ---- component sizes that sit outside the ladder ----------------------- */
.gca-ec-title, .ues-card-title,
.gca-section h3.gca-ec-title, .gca-section h3.ues-card-title { font-size: 1.1rem; line-height: 1.25; }
.gca-hero .ues-card-title { font-size: 1.04rem; }
.gca-plan-name, .gca-section h3.gca-plan-name { font-size: 1.16rem; }
.gca-plan-amt b { font-size: 2.2rem; }
.gca-stats .wp-block-column > *:first-child { font-size: 1.6rem; }
.gca-tier-heading { font-size: 1rem; }
/* ==========================================================================
23. ONE VERTICAL RHYTHM
Section padding ranged from 10px to 200px. Normalise it, leaving the hero
its clearance for the floating header.
========================================================================== */
.entry-content > .wp-block-group:not(.gca-hero):not(.gca-hero-short),
.entry-content > .wp-block-uagb-container:not(.gca-hero):not(.gca-hero-short) {
padding-top: 72px;
padding-bottom: 72px;
}
@media (max-width: 921px) {
.entry-content > .wp-block-group:not(.gca-hero):not(.gca-hero-short),
.entry-content > .wp-block-uagb-container:not(.gca-hero):not(.gca-hero-short) {
padding-top: 48px;
padding-bottom: 48px;
}
}
/* consistent spacing between blocks inside a section */
.entry-content h2 { margin-top: 0; margin-bottom: .6em; }
.entry-content h3 { margin-top: 1.6em; margin-bottom: .5em; }
.entry-content p { margin-bottom: 1.1em; }
/* ==========================================================================
24. Bring plugin templates onto the same scale
The Events Calendar and Event Tickets render outside .entry-content, so the
ladder above never reached them — leaving 14px "Add to calendar" buttons on
35 pages, 28px filter buttons and 24px list titles.
========================================================================== */
/* events list / archive */
.tribe-events h1, .tribe-events-single h1,
.tribe-events-single .tribe-events-single-event-title {
font-size: clamp(1.8rem, 3.2vw, 2.25rem); line-height: 1.14;
}
.tribe-events h2, .tribe-common h2.tribe-common-h2 { font-size: var(--gca-h2); line-height: 1.18; }
.tribe-events-calendar-list__event-title,
.tribe-events-calendar-list__event-title a,
h4.tribe-events-calendar-list__event-title { font-size: var(--gca-h3) !important; line-height: 1.25; }
.tribe-events .tribe-common-b2,
.tribe-events p,
.tribe-events-calendar-list__event-description p { font-size: var(--gca-small) !important; line-height: 1.6; }
.tribe-events-calendar-list__event-datetime,
.tribe-events-c-small-cta__price { font-size: var(--gca-small) !important; }
/* buttons in plugin chrome */
.tribe-events-c-subscribe-dropdown__button,
.tribe-events-c-subscribe-dropdown__button-text,
.tribe-common-c-btn__clear,
.tribe-events-c-top-bar__datepicker-button,
.tribe-events-c-view-selector__button,
.tribe-common-c-btn,
.tribe-events-c-btn {
font-size: var(--gca-btn) !important;
line-height: 1.2;
}
/* the +/- steppers: keep the 44px hit area, bring the glyph back in line */
.tribe-tickets__tickets-item-quantity-remove,
.tribe-tickets__tickets-item-quantity-add { font-size: 1.05rem !important; }
/* checkout messages */
.tribe-tickets__commerce-order-header-title,
h3.tribe-tickets__commerce-order-header-title { font-size: var(--gca-h2) !important; }
/* single-event title when Astra renders it as the blog entry title */
.ast-blog-single-element.entry-title,
h2.entry-title.ast-blog-single-element { font-size: var(--gca-h2) !important; }
/* Spectra headings on older pages that still carry their own size */
.entry-content .uagb-heading-text { font-size: inherit; }
.entry-content h2.uagb-heading-text { font-size: var(--gca-h2); }
.entry-content h3.uagb-heading-text { font-size: var(--gca-h3); }
/* hero display size trimmed — 55.8px was the last outlier above the ladder */
.gca-hero h1, .entry-content .gca-hero h1 { font-size: clamp(1.95rem, 3.8vw, 2.55rem); }
/* Last two stragglers: a Spectra heading sitting just under the ladder, and
the quantity steppers a hair over. */
.entry-content .uagb-heading-text h2,
.entry-content h2.uagb-heading-text,
.entry-content .wp-block-uagb-advanced-heading h2 { font-size: var(--gca-h2) !important; }
.tribe-tickets__tickets-item-quantity-remove,
.tribe-tickets__tickets-item-quantity-add { font-size: 1rem !important; }
/* ==========================================================================
25. MEASURE and ALIGNMENT
Body copy was running ~133 characters per line, so it needed a cap. My first
attempt used `max-width` with `margin: auto`, which centred every paragraph
box INDEPENDENTLY — so a heading, an eyebrow and a lede in the same section
each landed on a different left edge (467 / 310 / 396 px on the membership
page). That is what made pages look scattered.
Correct rule: cap the width, anchor everything to the SAME left edge as its
section. One left edge per section, no exceptions.
========================================================================== */
.entry-content p,
.entry-content li,
.entry-content blockquote {
max-width: 36em;
margin-left: 0;
margin-right: 0;
}
/* Components manage their own width. */
.wp-block-column p, .wp-block-column li,
.wp-block-columns p, .wp-block-columns li,
.gca-plan p, .gca-plan li,
.gca-ec p, .gca-ec-meta,
.gca-awards li,
.gca-callout p,
.gca-stats p, .gca-stats li,
.gca-foot-cols p, .gca-foot-cols li,
.site-footer p, .site-footer li,
.tribe-events p, .tribe-events li,
.tribe-common p, .tribe-common li,
.ues-card p, .ues-meta,
.gca-404-links li,
td p, th p, td, th, figcaption {
max-width: none;
margin-left: 0;
margin-right: 0;
}
/* One alignment for content sections. Mixed centre/left headings were a large
part of the inconsistency, so section content reads left throughout. */
.entry-content > .wp-block-group > h1,
.entry-content > .wp-block-group > h2,
.entry-content > .wp-block-group > h3,
.entry-content > .wp-block-group > p,
.entry-content > .wp-block-uagb-container h1,
.entry-content > .wp-block-uagb-container h2,
.entry-content > .wp-block-uagb-container .uagb-heading-text {
text-align: left;
}
/* WordPress's constrained-layout rule sets `margin-left/right: auto !important`
on every direct child of a Group, which is what kept re-centring each
paragraph box on its own left edge. Only !important beats !important. */
.entry-content > .wp-block-group > p,
.entry-content > .wp-block-group > ul,
.entry-content > .wp-block-group > ol,
.entry-content > .wp-block-group > h1,
.entry-content > .wp-block-group > h2,
.entry-content > .wp-block-group > h3,
.entry-content > .wp-block-group > h4,
.entry-content > .wp-block-uagb-container p,
.entry-content > .wp-block-uagb-container h1,
.entry-content > .wp-block-uagb-container h2,
.entry-content > p,
.entry-content > ul,
.entry-content > ol {
margin-left: 0 !important;
margin-right: auto !important;
}
/* Headings span the section's content box; prose is capped for readability.
Both start on the same left edge. */
.entry-content > .wp-block-group > h1,
.entry-content > .wp-block-group > h2,
.entry-content > .wp-block-group > h3 { max-width: 100%; }
/* ==========================================================================
26. ONE CONTENT COLUMN PER SECTION
WordPress builds its content column purely out of `margin: auto` on each
child. That works until a child has its own max-width — then it centres
inside the column on its own left edge, which is how one section ended up
with four different left edges.
Build the column with PADDING on the section instead. Every child then
starts at the same left edge by construction, and a narrower max-width on
prose simply ends sooner. Nothing can drift.
========================================================================== */
.entry-content > .wp-block-group.gca-section,
.entry-content > .wp-block-group.gca-hero,
.entry-content > .wp-block-group.gca-hero-short {
/* percentages in padding resolve against the PARENT (1200px), not the
full-bleed section, so this has to be viewport-based to land on 120px */
padding-left: max(24px, calc((100vw - 1200px) / 2));
padding-right: max(24px, calc((100vw - 1200px) / 2));
}
.entry-content > .wp-block-group.gca-section > *,
.entry-content > .wp-block-group.gca-hero > *,
.entry-content > .wp-block-group.gca-hero-short > * {
margin-left: 0 !important;
margin-right: auto !important;
max-width: 100%;
}
/* prose still capped for readability — it just ends sooner, same left edge */
.entry-content > .wp-block-group.gca-section > p,
.entry-content > .wp-block-group.gca-hero > p,
.entry-content > .wp-block-group.gca-hero-short > p { max-width: 36em; }
/* the checkout section keeps its narrower column, anchored left like the rest */
.gca-buy .tribe-common.event-tickets,
.gca-buy .tribe-tickets__tickets-form { margin-left: 0 !important; margin-right: auto !important; }
/* ==========================================================================
27. Hero rebalance
With the kicker, lede and note removed, the left column holds only a
heading and a button (~180px) opposite a ~480px slider, inside 270px of
vertical padding. The result was a tall, mostly empty band.
Give the heading the presence it now has to carry, tighten the vertical
space, and bring the slider closer in height so the two columns balance.
========================================================================== */
.entry-content > .wp-block-group.gca-hero { padding-top: 140px; padding-bottom: 56px; }
@media (max-width: 921px) {
.entry-content > .wp-block-group.gca-hero { padding-top: 120px; padding-bottom: 44px; }
}
/* the heading is the hero now — let it be the largest thing on the page.
Scoped away from .gca-hero-short, which inner page headers use. */
.gca-hero:not(.gca-hero-short) h1,
.entry-content .gca-hero:not(.gca-hero-short) h1 {
font-size: clamp(2.3rem, 4.8vw, 3.4rem);
line-height: 1.04;
letter-spacing: -.03em;
margin: 0 0 1.4rem;
max-width: 15ch;
}
/* button sits right under the heading rather than drifting */
.gca-hero .gca-btn { margin-top: 0; }
/* slider trimmed so the columns are closer in height */
@media (min-width: 922px) {
.gca-hero .ues-section { max-width: 460px; }
.gca-hero .wp-block-columns { align-items: center; gap: 56px; }
}
/* stats sit closer to the hero instead of floating in space */
.gca-hero .gca-stats { margin-top: 44px; }
@media (max-width: 921px) { .gca-hero .gca-stats { margin-top: 32px; } }
/* ==========================================================================
28. PAGE HEADER — one component for every page
Pages had five different header treatments: orange vs dark headings, 41px
vs 61px, left vs centred vs indented at 320px, body copy centred on some
and left on others. The first section of every page now carries
.gca-page-header and they all render identically.
========================================================================== */
.entry-content > .gca-page-header {
position: relative;
overflow: hidden;
background-color: var(--gca-cream) !important;
padding-top: 140px !important;
padding-bottom: 52px !important;
padding-left: max(24px, calc((100vw - 1200px) / 2)) !important;
padding-right: max(24px, calc((100vw - 1200px) / 2)) !important;
margin-bottom: 0 !important;
}
@media (max-width: 921px) {
.entry-content > .gca-page-header {
padding-top: 118px !important;
padding-bottom: 40px !important;
}
}
/* same warm wash as the home hero */
.entry-content > .gca-page-header::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(900px 460px at 88% 6%, #FFEBCF 0%, transparent 62%),
radial-gradient(620px 380px at 2% 94%, #FDE6E9 0%, transparent 64%);
}
.entry-content > .gca-page-header > * { position: relative; z-index: 1; }
/* every child on the same left edge */
.entry-content > .gca-page-header > *,
.entry-content > .gca-page-header > .uagb-container-inner-blocks-wrap {
margin-left: 0 !important;
margin-right: auto !important;
max-width: 100%;
width: 100%;
}
.entry-content > .gca-page-header .uagb-container-inner-blocks-wrap {
max-width: 100% !important;
align-items: flex-start !important;
}
/* one heading treatment */
/* h1 only — some pages keep later section headings inside the same container,
and those must not inherit page-header sizing. */
.entry-content > .gca-page-header h1,
.entry-content > .gca-page-header h1.uagb-heading-text {
font-size: clamp(1.9rem, 3.6vw, 2.55rem) !important;
line-height: 1.08 !important;
color: var(--gca-ink) !important;
text-align: left !important;
margin: 0 0 .6rem !important;
max-width: 20ch;
}
/* intro copy: left, readable measure, muted */
.entry-content > .gca-page-header p,
.entry-content > .gca-page-header .uagb-ifb-desc {
text-align: left !important;
color: var(--gca-ink-soft) !important;
max-width: 36em !important;
margin-left: 0 !important;
margin-right: auto !important;
}
/* the kicker pill keeps its own look where a page has one */
.entry-content > .gca-page-header .gca-kicker {
color: var(--gca-saffron-dp) !important;
max-width: none !important;
margin-bottom: 1rem !important;
}
/* body copy on the rest of the page is left-aligned too */
.entry-content .has-text-align-center:not(.gca-stats):not(.wp-block-column),
.entry-content > .wp-block-uagb-container p,
.entry-content .uagb-ifb-desc { text-align: left; }
/* Every page has exactly one h1, so normalise it unconditionally — some pages
open with a bare heading block rather than a container, and would otherwise
keep their own size, colour and alignment. */
.entry-content h1,
.entry-content h1.uagb-heading-text,
.entry-content .wp-block-uagb-advanced-heading h1 {
font-size: clamp(1.9rem, 3.6vw, 2.55rem) !important;
line-height: 1.08 !important;
color: var(--gca-ink) !important;
text-align: left !important;
}
/* a heading block acting as the page header gets the same band treatment */
.entry-content > .wp-block-uagb-advanced-heading.gca-page-header {
padding-top: 140px !important;
padding-bottom: 52px !important;
padding-left: max(24px, calc((100vw - 1200px) / 2)) !important;
padding-right: max(24px, calc((100vw - 1200px) / 2)) !important;
background-color: var(--gca-cream) !important;
}
@media (max-width: 921px) {
.entry-content > .wp-block-uagb-advanced-heading.gca-page-header {
padding-top: 118px !important; padding-bottom: 40px !important;
}
}
/* The home hero keeps a larger display size than inner page headers — it must
beat the blanket h1 rule above. */
.entry-content > .wp-block-group.gca-hero:not(.gca-hero-short) h1,
.gca-hero:not(.gca-hero-short) h1.wp-block-heading {
font-size: clamp(2.3rem, 4.8vw, 3.4rem) !important;
line-height: 1.04 !important;
}
/* A heading block used as a page header carries its own inner padding, which
pushed the text in from the section's left edge. */
.entry-content > .wp-block-uagb-advanced-heading.gca-page-header > *,
.entry-content > .wp-block-uagb-advanced-heading.gca-page-header h1,
.entry-content > .wp-block-uagb-advanced-heading.gca-page-header p {
margin-left: 0 !important;
padding-left: 0 !important;
}
.entry-content > .wp-block-uagb-advanced-heading.gca-page-header { text-align: left !important; }
/* A bare heading block sits inside .entry-content (already inset by 120px),
unlike the alignfull containers the other page headers use — so the gutter
padding was being added twice. Make it full-bleed so the maths matches. */
.entry-content > .wp-block-uagb-advanced-heading.gca-page-header {
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
width: 100vw !important;
max-width: 100vw !important;
}
/* The page-header rule sets children to width:100%, which stretched the kicker
pill into a full-width bar. It should hug its text. */
.entry-content > .gca-page-header .gca-kicker,
.entry-content .gca-kicker {
display: inline-flex !important;
width: auto !important;
max-width: max-content !important;
}
/* ==========================================================================
29. ONE HEADING TYPEFACE
Headings were split across two fonts: Spectra blocks rendered in
`ui-rounded` at weight 800, core blocks in Plus Jakarta Sans at 600. Same
size, visibly different letterforms.
Standardising on Plus Jakarta Sans: Astra already loads it, and unlike
`ui-rounded` — a system font that resolves to SF Pro Rounded on Apple and
something else everywhere else — it renders identically on every platform.
Weight 600 is the weight actually loaded; asking for 800 makes the browser
synthesise a fake bold.
========================================================================== */
:root {
--gca-display: "Plus Jakarta Sans", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2, h3, h4, h5, h6,
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4,
.uagb-heading-text,
.entry-content .uagb-heading-text,
.ues-title, .ues-card-title,
.gca-tier-heading, .gca-ec-title, .gca-plan-name,
.gca-foot-brand, .gca-foot-col-title,
.tribe-events h1, .tribe-events h2,
.tribe-events-calendar-list__event-title,
.gca-stats .wp-block-column > *:first-child,
.gca-plan-amt b, .gca-ec-date b, .ues-date-day,
.gca-404-title, .gca-cta-title {
font-family: var(--gca-display) !important;
font-weight: 600 !important;
letter-spacing: -.022em;
}
/* the few places that read better a touch tighter */
.gca-hero:not(.gca-hero-short) h1,
.entry-content .gca-hero:not(.gca-hero-short) h1 { letter-spacing: -.03em; }
/* ==========================================================================
30. Zeffy embedded forms
========================================================================== */
.gca-zeffy {
background: var(--gca-white);
border: 1px solid var(--gca-rule);
border-radius: var(--gca-r-lg);
box-shadow: var(--gca-shadow);
overflow: hidden;
max-width: 820px;
margin: 0 auto 0 0;
}
.gca-zeffy iframe {
width: 100%;
border: 0;
display: block;
background: var(--gca-white);
}
.gca-zeffy-fallback {
margin: 0 !important;
padding: 12px 18px;
border-top: 1px solid var(--gca-rule);
background: var(--gca-cream);
font-size: .85rem !important;
color: var(--gca-ink-soft);
max-width: none !important;
}
.gca-zeffy-fallback a { font-weight: 600; }
@media (max-width: 600px) {
.gca-zeffy { border-radius: var(--gca-r-md); }
}
/* The section container rule sets children to max-width:100%, which beat the
embed's own cap and let it run the full 1200px. */
.entry-content > .wp-block-group.gca-section > .gca-zeffy,
.entry-content .gca-zeffy,
.gca-buy .gca-zeffy { max-width: 820px; }
/* The Events Calendar single-event template nests its own gutters (20px on the
section plus 16px on the post), leaving only ~299px of a 390px phone for the
payment form. Relax them so the form has room. */
@media (max-width: 600px) {
.tribe-events-pg-template { padding-left: 12px !important; padding-right: 12px !important; }
.tribe-events-single .tribe_events,
.tribe-events-single .post-333 { padding-left: 0 !important; padding-right: 0 !important; }
.tribe-events-single-event-description .gca-zeffy { margin-left: -4px; margin-right: -4px; }
}
/* The membership prompt above the ticket form */
.gca-upsell {
background: var(--gca-warm);
border: 1px solid var(--gca-rule);
border-left: 4px solid var(--gca-saffron);
border-radius: var(--gca-r-md);
padding: 16px 20px;
max-width: 820px !important;
font-size: .95rem !important;
color: var(--gca-ink) !important;
margin: 0 0 20px !important;
}
.gca-upsell strong { color: var(--gca-saffron-dp); }
/* The tier cards are core blocks now rather than shortcode output, so they
inherited centred alignment and default block spacing from their wrapper. */
.gca-plan,
.gca-plan .gca-plan-name,
.gca-plan .gca-plan-who,
.gca-plan .gca-plan-amt,
.gca-plan .gca-plan-list,
.gca-plan .gca-plan-cta { text-align: left !important; }
.gca-plan > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.gca-plan .gca-plan-name { margin: 0 0 .35rem !important; }
.gca-plan .gca-plan-who { margin: 0 0 .9rem !important; min-height: 2.6em; }
.gca-plan .gca-plan-amt { margin: 0 0 1rem !important; display: flex; align-items: baseline; gap: .35rem; }
.gca-plan .gca-plan-amt b { font-size: 2.2rem; line-height: 1; font-weight: 600; }
.gca-plan .gca-plan-amt span { color: var(--gca-ink-faint); font-size: .82rem; font-weight: 600; }
.gca-plan .gca-plan-list { margin: 0 0 1.2rem !important; padding-left: 0 !important; list-style: none; }
.gca-plan .gca-plan-list li {
position: relative; padding-left: 1.5em; margin: 0 0 .5rem !important;
font-size: .89rem; color: var(--gca-ink-soft);
}
.gca-plan .gca-plan-list li::before {
content: "✓"; position: absolute; left: 0; top: 0;
color: var(--gca-teal); font-weight: 700;
}
.gca-plan .gca-plan-cta { margin: auto 0 0 !important; }
.gca-plan .gca-plan-cta .gca-btn { width: 100%; justify-content: center; }
/* the highlight badge sits on the card's top edge */
.gca-plan.is-featured { position: relative; }
.gca-plan .gca-plan-tag {
position: absolute; top: -13px; left: 22px; margin: 0 !important;
background: var(--gca-saffron); color: #fff;
font-size: .62rem !important; letter-spacing: .1em; text-transform: uppercase;
font-weight: 700; padding: 6px 12px; border-radius: 999px; white-space: nowrap;
}
/* WordPress gives every block after the first a top margin. Inside the card
grid that pushed cards 2 and 3 down by 24px while card 1 sat flush. */
.gca-plans > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.gca-plans { align-items: stretch; }
/* Anchor links: scroll smoothly and stop the floating header covering the
target. Respects a reduced-motion preference. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id="tickets"], [id="join"] { scroll-margin-top: 120px; }
@media (max-width: 921px) { [id="tickets"], [id="join"] { scroll-margin-top: 96px; } }
/* ==========================================================================
31. JotForm embeds
========================================================================== */
.gca-jotform {
background: var(--gca-white);
border: 1px solid var(--gca-rule);
border-radius: var(--gca-r-lg);
box-shadow: var(--gca-shadow);
overflow: hidden;
max-width: 820px;
margin: 0 auto 0 0;
}
.gca-jotform iframe { width: 100%; display: block; background: var(--gca-white); }
.gca-jotform-fallback {
margin: 0 !important; padding: 12px 18px;
border-top: 1px solid var(--gca-rule); background: var(--gca-cream);
font-size: .85rem !important; color: var(--gca-ink-soft); max-width: none !important;
}
.gca-jotform-fallback a { font-weight: 600; }
.entry-content .gca-jotform, .gca-buy .gca-jotform { max-width: 820px; }
/* The gca-section content-column rule sets `> * { max-width:100% }` with three
classes, which outranks the single-class .gca-jotform cap and let the form
stretch to the full 1200px column on Become a Member while the event page
(nested deeper, so unaffected) stayed at 820. Match that specificity so the
form is the same width wherever it appears. */
.entry-content > .wp-block-group.gca-section > .gca-jotform { max-width: 820px; }