/*
Theme Name: The Counseling Collective
Theme URI: https://counselingcollective18.com
Author: The Counseling Collective
Author URI: https://counselingcollective18.com
Description: Custom WordPress theme for The Counseling Collective @ 18 Central (Rockport, Maine). A calm, coastal design with a fully editable, form-based page editor powered by Advanced Custom Fields, plus Clinician and Event custom post types. Every heading, paragraph, and image is editable from the WordPress admin without touching theme files.
Version: 1.13.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: counseling-collective
Tags: counseling, therapy, custom-theme, acf, coastal
*/
/* =========================================================================
1. DESIGN TOKENS (palette derived from the client logo)
========================================================================= */
:root {
/* Brand, coastal wave + sun */
--tcc-navy: #234e5e;
--tcc-navy-600: #1e4453;
--tcc-navy-700: #183744;
--tcc-navy-900: #112832;
--tcc-teal: #2f6273;
--tcc-sage: #6f9490;
--tcc-sage-600: #5c807c;
--tcc-sage-700: #4a6a66; /* white text passes AA here (5.92:1); --tcc-sage does not. */
--tcc-sage-800: #42605c; /* hover pair for the above (6.86:1). */
--tcc-sage-300: #a7c1bb;
--tcc-sage-tint: #e7efeb;
--tcc-sand: #e3d3b6;
--tcc-sand-600: #cbb488;
--tcc-sand-700: #b39a6b;
--tcc-cream: #f7f3ec;
--tcc-cream-2: #efe7d9;
/* Neutrals */
--tcc-ink: #16303a;
--tcc-body: #40545b;
--tcc-muted: #6d8085;
--tcc-line: #e4ddce;
--tcc-line-strong: #d3cbb8;
--tcc-bg: #ffffff;
--tcc-bg-alt: #f7f3ec;
--tcc-footer: #1b3d4a;
--tcc-footer-bottom:#112832;
/* Typography */
--tcc-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--tcc-sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
/* Metrics */
--tcc-maxw: 1180px;
--tcc-gap: clamp(1rem, 3vw, 2.5rem);
--tcc-radius: 16px;
--tcc-radius-sm: 10px;
--tcc-radius-pill: 999px;
--tcc-shadow: 0 18px 50px rgba(17, 40, 50, 0.10);
--tcc-shadow-sm: 0 8px 24px rgba(17, 40, 50, 0.07);
--tcc-transition: 220ms ease;
}
/* =========================================================================
2. RESET / BASE
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 120px; }
body {
margin: 0;
font-family: var(--tcc-sans);
font-size: 17px;
line-height: 1.75;
color: var(--tcc-body);
background: var(--tcc-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--tcc-teal); text-decoration: none; transition: color var(--tcc-transition); }
a:hover { color: var(--tcc-navy); }
h1, h2, h3, h4 {
font-family: var(--tcc-serif);
color: var(--tcc-ink);
line-height: 1.14;
font-weight: 600;
margin: 0 0 0.5em;
letter-spacing: 0.01em;
}
h1 { font-size: clamp(2.4rem, 5vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 2.1vw, 1.7rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
li { margin-bottom: 0.45em; }
strong { color: var(--tcc-ink); font-weight: 700; }
.tcc-container {
width: 100%;
max-width: var(--tcc-maxw);
margin-inline: auto;
padding-inline: clamp(1.1rem, 4vw, 2rem);
}
.tcc-container--narrow { max-width: 820px; }
.tcc-section { padding-block: clamp(3rem, 7vw, 6rem); }
.tcc-section--alt { background: var(--tcc-bg-alt); }
.tcc-section--tint { background: var(--tcc-sage-tint); }
.tcc-section--sand { background: var(--tcc-cream-2); }
.tcc-section--navy { background: var(--tcc-navy); color: #eaf1ef; }
.tcc-section--navy h1, .tcc-section--navy h2, .tcc-section--navy h3 { color: #fff; }
.tcc-eyebrow {
font-family: var(--tcc-sans);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.78rem;
font-weight: 800;
color: var(--tcc-sage-600);
margin: 0 0 0.75rem;
}
.tcc-section--navy .tcc-eyebrow { color: var(--tcc-sand); }
.tcc-section-head { max-width: 720px; margin-bottom: 2.6rem; }
.tcc-section-head--center { margin-inline: auto; text-align: center; }
.tcc-section-head p { font-size: 1.1rem; color: var(--tcc-muted); }
.tcc-section--navy .tcc-section-head p { color: #cfe0dc; }
.tcc-lede { font-size: 1.2rem; color: var(--tcc-muted); line-height: 1.7; }
.tcc-mt-0 { margin-top: 0; }
/* Decorative divider (echoes the logo's botanical rule) */
.tcc-rule {
display: flex; align-items: center; justify-content: center; gap: 0.9rem;
margin: 1.4rem 0;
}
.tcc-rule::before, .tcc-rule::after {
content: ""; height: 1px; width: min(90px, 18vw); background: var(--tcc-sage-300);
}
.tcc-rule svg { width: 26px; height: 26px; color: var(--tcc-sage); }
.tcc-section-head--center .tcc-rule { margin-inline: auto; }
/* Screen-reader only */
.screen-reader-text {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: -999px; top: 0; background: var(--tcc-navy);
color: #fff; padding: 0.75rem 1.25rem; z-index: 1200; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--tcc-sage); outline-offset: 2px; }
/* =========================================================================
3. BUTTONS
========================================================================= */
.tcc-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--tcc-sans);
font-weight: 800;
font-size: 1rem;
letter-spacing: 0.01em;
padding: 0.9rem 1.8rem;
border-radius: var(--tcc-radius-pill);
border: 2px solid var(--tcc-navy);
background: var(--tcc-navy);
color: #fff;
cursor: pointer;
transition: background var(--tcc-transition), color var(--tcc-transition), transform var(--tcc-transition), border-color var(--tcc-transition), box-shadow var(--tcc-transition);
}
.tcc-btn:hover { background: var(--tcc-navy-700); border-color: var(--tcc-navy-700); color: #fff; transform: translateY(-2px); box-shadow: var(--tcc-shadow-sm); }
.tcc-btn svg { width: 18px; height: 18px; }
.tcc-btn--sand { background: var(--tcc-sand); border-color: var(--tcc-sand); color: var(--tcc-navy-900); }
.tcc-btn--sand:hover { background: var(--tcc-sand-600); border-color: var(--tcc-sand-600); color: var(--tcc-navy-900); }
/* ⚠️ NOT --tcc-sage / --tcc-sage-600. White on those is 3.33:1 and 4.34:1 —
both below WCAG AA's 4.5:1 for button text. The -700/-800 steps are the
same hue far enough down to clear it (5.92:1 and 6.86:1). Sage itself
stays in use for rules, tags, icons and borders, which carry no text. */
.tcc-btn--sage { background: var(--tcc-sage-700); border-color: var(--tcc-sage-700); color: #fff; }
.tcc-btn--sage:hover { background: var(--tcc-sage-800); border-color: var(--tcc-sage-800); }
.tcc-btn--ghost { background: transparent; color: var(--tcc-navy); }
.tcc-btn--ghost:hover { background: var(--tcc-navy); color: #fff; }
.tcc-btn--light { background: #fff; border-color: #fff; color: var(--tcc-navy); }
.tcc-btn--light:hover { background: var(--tcc-cream); border-color: var(--tcc-cream); color: var(--tcc-navy); }
.tcc-btn--onlight-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.tcc-btn--onlight-ghost:hover { background: #fff; color: var(--tcc-navy); border-color: #fff; }
.tcc-btn--sm { padding: 0.6rem 1.15rem; font-size: 0.9rem; }
.tcc-textlink {
display: inline-flex; align-items: center; gap: 0.4rem;
font-weight: 800; color: var(--tcc-teal);
}
.tcc-textlink svg { width: 17px; height: 17px; transition: transform var(--tcc-transition); }
.tcc-textlink:hover svg { transform: translateX(4px); }
/* =========================================================================
4. HEADER / NAV
========================================================================= */
.tcc-topbar {
background: var(--tcc-navy);
color: #dfeae7;
font-size: 0.86rem;
}
.tcc-topbar__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding-block: 0.5rem; flex-wrap: wrap;
}
.tcc-topbar__group { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.tcc-topbar__item { display: inline-flex; align-items: center; gap: 0.4rem; color: #dfeae7; }
.tcc-topbar__item a { color: #fff; }
.tcc-topbar__item a:hover { color: var(--tcc-sand); }
.tcc-topbar__item svg { width: 15px; height: 15px; color: var(--tcc-sand); }
.tcc-header {
position: sticky; top: 0; z-index: 1000;
background: rgba(255,255,255,0.92);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--tcc-line);
}
.tcc-header__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 1rem; padding-block: 0.9rem; max-width: 1340px;
}
.tcc-brand { display: inline-flex; align-items: center; gap: 0.7rem; }
/* Enlarged at the client's request (30 Jul 2026) now that the header logo is
the only logo shown on the Home page (the centred hero badge was removed). */
.tcc-brand__img { height: 80px; width: auto; }
.tcc-brand__mark { height: 68px; width: 68px; flex: none; }
.tcc-brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.tcc-brand__name {
font-family: var(--tcc-serif); font-weight: 600; font-size: 1.3rem; line-height: 1.02;
color: var(--tcc-navy); letter-spacing: 0.03em; text-transform: uppercase; max-width: 172px;
}
.tcc-brand__meta { font-size: 0.72rem; letter-spacing: 0.22em; color: var(--tcc-sage-600); text-transform: uppercase; font-weight: 700; }
.tcc-nav { display: flex; align-items: center; gap: 1rem; }
/* The in-drawer "Connect" button only appears in the mobile menu; the header
already has one, so hide this duplicate on desktop. */
.tcc-nav__cta-mobile { display: none; }
.tcc-menu {
display: flex; align-items: center; gap: 0.1rem;
list-style: none; margin: 0; padding: 0;
}
.tcc-menu li { margin: 0; position: relative; }
.tcc-menu a {
display: inline-flex; align-items: center; gap: 0.26rem; white-space: nowrap;
padding: 0.5rem 0.6rem; border-radius: var(--tcc-radius-pill);
color: var(--tcc-navy-700); font-weight: 700; font-size: 0.92rem;
}
.tcc-header__cta .tcc-btn { padding: 0.68rem 1.4rem; font-size: 0.92rem; }
.tcc-menu a:hover,
.tcc-menu .current-menu-item > a,
.tcc-menu .current_page_item > a,
.tcc-menu .current-menu-parent > a { background: var(--tcc-sage-tint); color: var(--tcc-navy); }
/* Dropdown */
.tcc-menu .menu-item-has-children > a::after,
.tcc-menu .page_item_has_children > a::after {
content: ""; width: 8px; height: 8px; margin-left: 2px;
border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-2px); opacity: 0.7;
}
.tcc-menu .sub-menu, .tcc-menu .children {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 50;
min-width: 232px; list-style: none; margin: 0; padding: 0.5rem;
background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius-sm);
box-shadow: var(--tcc-shadow); opacity: 0; visibility: hidden; transform: translateY(6px);
transition: opacity var(--tcc-transition), transform var(--tcc-transition), visibility var(--tcc-transition);
}
.tcc-menu li:hover > .sub-menu, .tcc-menu li:hover > .children,
.tcc-menu li:focus-within > .sub-menu, .tcc-menu li:focus-within > .children {
opacity: 1; visibility: visible; transform: translateY(0);
}
.tcc-menu .sub-menu a, .tcc-menu .children a { width: 100%; border-radius: var(--tcc-radius-sm); padding: 0.55rem 0.8rem; font-size: 0.95rem; }
.tcc-navtoggle {
display: none; width: 46px; height: 42px; border: 1px solid var(--tcc-line);
border-radius: var(--tcc-radius-sm); background: #fff; cursor: pointer;
padding: 0; align-items: center; justify-content: center;
}
.tcc-navtoggle span { display: block; width: 22px; height: 2px; background: var(--tcc-navy); position: relative; transition: var(--tcc-transition); }
.tcc-navtoggle span::before, .tcc-navtoggle span::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--tcc-navy); transition: var(--tcc-transition); }
.tcc-navtoggle span::before { top: -7px; }
.tcc-navtoggle span::after { top: 7px; }
.tcc-navtoggle[aria-expanded="true"] span { background: transparent; }
.tcc-navtoggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.tcc-navtoggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
.tcc-nav-backdrop { position: fixed; inset: 0; background: rgba(17,40,50,0.4); z-index: 900; }
/* =========================================================================
5. HERO
========================================================================= */
.tcc-hero { position: relative; isolation: isolate; }
.tcc-hero__viewport { position: relative; min-height: clamp(280px, 44vh, 480px); display: grid; }
.tcc-hero__slides { position: absolute; inset: 0; z-index: -2; }
.tcc-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1200ms ease; }
.tcc-hero__slide.is-active { opacity: 1; }
.tcc-hero__slide img { width: 100%; height: 100%; object-fit: cover; }
.tcc-hero__slide--fallback { background: linear-gradient(160deg, #35636f 0%, #234e5e 45%, #183744 100%); }
.tcc-hero__viewport::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: linear-gradient(180deg, rgba(11,26,33,0.70) 0%, rgba(8,18,24,0.82) 100%);
}
/* --- Full-screen home hero ------------------------------------------------
The background photo fills the whole viewport edge to edge. The overlay is
kept light so the photograph stays the hero, while still holding contrast
for the white logo and type. */
.tcc-hero--full .tcc-hero__viewport {
min-height: 100svh;
min-height: 100vh; /* fallback for browsers without svh */
}
@supports (min-height: 100svh) {
.tcc-hero--full .tcc-hero__viewport { min-height: 100svh; }
}
.tcc-hero--full .tcc-hero__viewport::after {
background:
linear-gradient(180deg, rgba(11,26,33,0.42) 0%, rgba(11,26,33,0.30) 45%, rgba(8,18,24,0.62) 100%);
}
.tcc-hero--full .tcc-hero__content { max-width: 940px; }
.tcc-hero__content {
text-align: center; color: #fff; align-self: center;
padding-block: clamp(2rem, 5vw, 3.25rem); max-width: 820px; margin-inline: auto;
}
.tcc-hero__content h1 { color: #fff; text-shadow: 0 2px 22px rgba(0,0,0,0.3); margin-bottom: 0.4rem; }
/* Centred brand logo. The artwork is a transparent PNG, so it sits directly on
the hero photo with no plate or circle behind it, per the client's request
("logo only"). A soft drop-shadow keeps it legible over lighter imagery. */
.tcc-hero__logo { display: flex; justify-content: center; margin-bottom: clamp(1.2rem, 3vw, 2.1rem); }
.tcc-hero__logo-badge {
width: clamp(230px, 34vw, 420px);
display: grid;
place-items: center;
}
.tcc-hero__logo img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
filter: drop-shadow(0 6px 26px rgba(8, 18, 24, 0.45));
}
/* Growth · Healing · Connection */
.tcc-hero__words {
display: flex; align-items: center; gap: clamp(0.7rem, 2.2vw, 1.8rem);
flex-wrap: wrap; justify-content: center;
margin: 0;
font-family: var(--tcc-serif);
font-style: italic;
font-weight: 500;
letter-spacing: 0.03em;
text-transform: none;
line-height: 1.15;
font-size: clamp(2rem, 6vw, 4.25rem);
color: #fff;
text-shadow: 0 3px 26px rgba(0,0,0,0.42);
}
.tcc-hero__words span { display: inline-flex; align-items: center; }
.tcc-hero__words .dot {
width: clamp(6px, 0.8vw, 10px); height: clamp(6px, 0.8vw, 10px);
border-radius: 50%; background: var(--tcc-sand);
flex: none; opacity: 0.95;
}
.tcc-hero__sub { font-size: 1.1rem; color: #eaf1ef; margin-top: 1rem; text-shadow: 0 2px 16px rgba(0,0,0,0.3); }
.tcc-hero__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.tcc-hero__dots { position: absolute; left: 0; right: 0; bottom: 1.4rem; display: flex; gap: 0.5rem; justify-content: center; z-index: 2; }
.tcc-hero__dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,0.5); cursor: pointer; padding: 0; }
.tcc-hero__dots button.is-active { background: #fff; }
/* Simple page banner (interior pages) */
.tcc-banner { position: relative; isolation: isolate; background: var(--tcc-navy); color: #fff; overflow: hidden; }
.tcc-banner__img { position: absolute; inset: 0; z-index: -2; }
.tcc-banner__img img { width: 100%; height: 100%; object-fit: cover; }
/* Lightened 4 Aug 2026 (client feedback: banners read too dark) — the photo
should show through clearly; a bit of text-shadow on the title/subtitle
below keeps the white text readable without a heavy dark scrim. */
.tcc-banner::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,26,33,0.32), rgba(8,18,24,0.46)); }
.tcc-banner--plain { background: linear-gradient(160deg, var(--tcc-navy) 0%, var(--tcc-navy-700) 100%); }
.tcc-banner--plain::after { display: none; }
.tcc-banner__inner { padding-block: clamp(2.8rem, 7vw, 5rem); text-align: center; }
.tcc-banner h1 { color: #fff; margin-bottom: 0.35rem; text-shadow: 0 2px 14px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.4); }
.tcc-banner__sub { color: #f1f5f3; font-size: 1.15rem; max-width: 640px; margin: 0.4rem auto 0; text-shadow: 0 1px 8px rgba(0,0,0,0.45); }
.tcc-banner__sub--2 { margin-top: 0.1rem; }
.tcc-breadcrumb { font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tcc-sand); font-weight: 700; margin-bottom: 0.6rem; }
/* =========================================================================
6. PROSE
========================================================================= */
.tcc-prose { color: var(--tcc-body); font-size: 1.06rem; }
.tcc-prose h2 { margin-top: 1.6em; }
.tcc-prose h3 { margin-top: 1.4em; }
.tcc-prose > :first-child { margin-top: 0; }
.tcc-prose ul { list-style: none; padding-left: 0; }
.tcc-prose ul li { position: relative; padding-left: 1.9rem; margin-bottom: 0.7rem; }
.tcc-prose ul li::before {
content: ""; position: absolute; left: 0; top: 0.5em; width: 12px; height: 12px;
border-radius: 50%; background: var(--tcc-sage-tint);
box-shadow: inset 0 0 0 2px var(--tcc-sage);
}
.tcc-prose ol { padding-left: 1.3rem; }
.tcc-prose a { text-decoration: underline; text-underline-offset: 3px; }
.tcc-prose blockquote {
margin: 1.5rem 0; padding: 1rem 1.4rem; border-left: 4px solid var(--tcc-sage);
background: var(--tcc-sage-tint); border-radius: 0 var(--tcc-radius-sm) var(--tcc-radius-sm) 0;
font-style: italic; color: var(--tcc-navy-700);
}
/* =========================================================================
7. SPLIT / MEDIA SECTIONS
========================================================================= */
.tcc-split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.6rem, 5vw, 4rem); align-items: center; }
.tcc-split--reverse .tcc-split__media { order: 2; }
/* Gives the photo column a larger presence than the standard split (used on
Our Story, 3 Aug 2026, so the Firmament photo reads as a bigger feature). */
.tcc-split--media-lg { grid-template-columns: 0.82fr 1.18fr; }
/* Used on the clinician profile: aligns the top of the photo with the top of
the bio column instead of centering it, which otherwise let a tall portrait
photo hang lower than the start of the bio text. */
.tcc-split--top { align-items: start; }
.tcc-split__media img { border-radius: var(--tcc-radius); box-shadow: var(--tcc-shadow); width: 100%; object-fit: cover; }
.tcc-split__media .tcc-imgph { aspect-ratio: 4/3; }
.tcc-split__aside { }
/* Rounded image placeholder (used until client uploads photos) */
.tcc-imgph {
border-radius: var(--tcc-radius);
background:
radial-gradient(120% 90% at 20% 15%, rgba(255,255,255,0.5), transparent 55%),
linear-gradient(150deg, var(--tcc-sage-300) 0%, var(--tcc-sage) 55%, var(--tcc-navy) 120%);
display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85);
min-height: 220px; position: relative; overflow: hidden;
}
.tcc-imgph svg { width: 46px; height: 46px; opacity: 0.9; }
.tcc-imgph--sand { background: linear-gradient(150deg, var(--tcc-sand) 0%, var(--tcc-sand-600) 100%); color: rgba(30,40,45,0.5); }
/* =========================================================================
8. PILLAR / FEATURE CARDS
========================================================================= */
.tcc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.6rem; }
.tcc-card {
background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius);
padding: 2rem 1.7rem; box-shadow: var(--tcc-shadow-sm);
transition: transform var(--tcc-transition), box-shadow var(--tcc-transition), border-color var(--tcc-transition);
display: flex; flex-direction: column;
}
.tcc-card:hover { transform: translateY(-5px); box-shadow: var(--tcc-shadow); border-color: var(--tcc-sage-300); }
.tcc-card__icon {
width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center;
background: var(--tcc-sage-tint); color: var(--tcc-navy); margin-bottom: 1.1rem;
}
.tcc-card__icon svg { width: 30px; height: 30px; }
.tcc-card h3 { margin-bottom: 0.4rem; }
.tcc-card p { color: var(--tcc-muted); margin-bottom: 1.1rem; }
.tcc-card__link { margin-top: auto; }
/* Alternating icon accent colours for visual warmth */
.tcc-card:nth-child(4n+2) .tcc-card__icon { background: var(--tcc-cream-2); color: var(--tcc-sand-700); }
.tcc-card:nth-child(4n+3) .tcc-card__icon { background: #e2ebe8; color: var(--tcc-sage-600); }
.tcc-card:nth-child(4n+4) .tcc-card__icon { background: #dbe6e9; color: var(--tcc-teal); }
/* =========================================================================
9. APPROACH VALUES (icon + text list)
========================================================================= */
.tcc-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.7rem; }
.tcc-value { text-align: left; }
.tcc-value__icon {
width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
background: #fff; box-shadow: var(--tcc-shadow-sm); color: var(--tcc-sage-600); margin-bottom: 1rem;
}
.tcc-value__icon svg { width: 28px; height: 28px; }
.tcc-value h3 { font-size: 1.32rem; margin-bottom: 0.3rem; }
.tcc-value p { color: var(--tcc-muted); margin: 0; }
/* Closing line on How We Work Together, and anywhere else a single sentence
needs to land with more weight than body copy. */
.tcc-pullquote {
font-family: var(--tcc-serif);
font-size: clamp(1.5rem, 3vw, 2.1rem);
line-height: 1.28;
color: var(--tcc-navy);
max-width: 22ch;
margin: 2rem auto 0;
}
/* Full-bleed photographic band — "The Wave" carrying the closing line on
How We Work Together (10 Aug 2026). The image is set inline by the template
via --tcc-waveband-img so it stays editable from WordPress. */
.tcc-waveband {
position: relative;
display: grid;
place-items: center;
min-height: clamp(340px, 52vh, 560px);
padding-block: clamp(3.5rem, 9vw, 7rem);
background-image: var(--tcc-waveband-img);
background-size: cover;
background-position: center 60%;
background-repeat: no-repeat;
background-attachment: fixed;
isolation: isolate;
}
.tcc-waveband::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(180deg, rgba(17, 40, 50, 0.68) 0%, rgba(35, 78, 94, 0.52) 45%, rgba(17, 40, 50, 0.72) 100%);
}
.tcc-waveband__inner {
position: relative;
width: min(100% - 2.5rem, 780px);
margin-inline: auto;
text-align: center;
color: #fff;
}
.tcc-waveband__rule { display: grid; place-items: center; margin-bottom: 1.1rem; }
.tcc-waveband__rule svg { width: 40px; height: 40px; color: var(--tcc-sand); opacity: 0.95; }
.tcc-waveband__quote {
font-family: var(--tcc-serif);
font-size: clamp(1.7rem, 4.2vw, 3rem);
line-height: 1.22;
font-weight: 500;
color: #fff;
margin: 0;
text-shadow: 0 2px 18px rgba(9, 24, 31, 0.45);
text-wrap: balance;
}
/* Fixed attachment is unreliable on touch devices and costly to repaint, and
parallax should never override a reduced-motion preference. */
@media (hover: none), (max-width: 860px) {
.tcc-waveband { background-attachment: scroll; }
}
@media (prefers-reduced-motion: reduce) {
.tcc-waveband { background-attachment: scroll; }
}
/* Numbered "how it works" steps */
.tcc-steps { display: grid; gap: 1.2rem; max-width: 760px; margin-inline: auto; }
.tcc-step { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start; background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius); padding: 1.5rem 1.7rem; box-shadow: var(--tcc-shadow-sm); }
.tcc-step__num { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--tcc-navy); color: #fff; font-family: var(--tcc-serif); font-size: 1.4rem; font-weight: 600; }
.tcc-step h3 { margin-bottom: 0.25rem; }
.tcc-step p { margin: 0; color: var(--tcc-muted); }
/* =========================================================================
10. CLINICIAN CARDS
========================================================================= */
/* 12 Aug 2026: sized down at the client's request so 4 cards fit per row on
a normal desktop width instead of 3 (was minmax(268px,1.8rem gap)). */
.tcc-clinicians { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.6rem; }
.tcc-clinician {
background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius);
overflow: hidden; box-shadow: var(--tcc-shadow-sm); display: flex; flex-direction: column;
transition: transform var(--tcc-transition), box-shadow var(--tcc-transition);
}
.tcc-clinician:hover { transform: translateY(-4px); box-shadow: var(--tcc-shadow); }
.tcc-clinician__photo { aspect-ratio: 4/5; width: 100%; object-fit: cover; background: var(--tcc-sage-tint); }
.tcc-clinician__photo.tcc-imgph { border-radius: 0; }
.tcc-clinician__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.tcc-clinician__name { font-size: 1.4rem; margin-bottom: 0.1rem; }
.tcc-clinician__role { color: var(--tcc-sage-600); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; margin-bottom: 0.8rem; }
.tcc-clinician__role--2 { margin-top: -0.7rem; }
.tcc-clinician__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.tcc-tag { font-size: 0.76rem; font-weight: 700; padding: 0.25rem 0.7rem; border-radius: var(--tcc-radius-pill); background: var(--tcc-sage-tint); color: var(--tcc-navy-700); }
.tcc-clinician__excerpt { color: var(--tcc-muted); font-size: 0.98rem; margin-bottom: 1.1rem; }
.tcc-clinician__foot { margin-top: auto; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
/* "Meet ____" set over the clinician's photo, on a soft scrim so it stays
legible whatever the headshot behind it looks like. */
.tcc-clinician__figure { position: relative; display: block; overflow: hidden; }
.tcc-clinician__figure::after {
content: "";
position: absolute; inset: auto 0 0 0; height: 55%;
background: linear-gradient(180deg, rgba(17,40,50,0) 0%, rgba(17,40,50,0.16) 40%, rgba(17,40,50,0.66) 100%);
pointer-events: none;
}
.tcc-meet {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
padding: 1rem 1.3rem 1.05rem;
font-family: var(--tcc-serif);
font-size: clamp(1.45rem, 2.4vw, 1.85rem);
font-weight: 600;
line-height: 1.1;
color: #fff;
text-shadow: 0 2px 14px rgba(8, 18, 24, 0.45);
}
.tcc-clinician__figure--single {
border-radius: var(--tcc-radius);
box-shadow: var(--tcc-shadow);
}
.tcc-clinician__figure--single .tcc-clinician__photo { border-radius: var(--tcc-radius); }
.tcc-clinician__figure--single .tcc-meet { font-size: clamp(1.6rem, 3vw, 2.1rem); padding: 1.2rem 1.5rem 1.25rem; }
/* =========================================================================
11. EVENT / GROUP CARDS
========================================================================= */
.tcc-events { display: grid; gap: 1.3rem; }
.tcc-event {
display: grid; grid-template-columns: auto 1fr auto; gap: 1.6rem; align-items: center;
background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius);
padding: 1.5rem 1.7rem; box-shadow: var(--tcc-shadow-sm);
transition: transform var(--tcc-transition), box-shadow var(--tcc-transition), border-color var(--tcc-transition);
}
.tcc-event:hover { transform: translateY(-3px); box-shadow: var(--tcc-shadow); border-color: var(--tcc-sage-300); }
/* Full flyer on a single group/workshop page. Flyers are portrait, so this caps
the width rather than letting one fill the whole content column. */
.tcc-flyer { margin: 0 0 2rem; max-width: 520px; }
.tcc-flyer a { display: block; border-radius: var(--tcc-radius); overflow: hidden; box-shadow: var(--tcc-shadow); }
.tcc-flyer img { width: 100%; }
.tcc-flyer figcaption { margin-top: 0.7rem; font-size: 0.88rem; color: var(--tcc-muted); }
/* Flyer thumbnail, shown when a group or workshop has one attached. */
.tcc-event--has-flyer { grid-template-columns: auto auto 1fr auto; }
.tcc-event__flyer {
display: block; width: 108px; border-radius: var(--tcc-radius-sm);
overflow: hidden; box-shadow: var(--tcc-shadow-sm); background: var(--tcc-sage-tint);
}
.tcc-event__flyer img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; }
.tcc-event__date { text-align: center; min-width: 78px; background: var(--tcc-sage-tint); border-radius: var(--tcc-radius-sm); padding: 0.7rem 0.5rem; }
.tcc-event__month { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tcc-sage-600); }
.tcc-event__day { display: block; font-family: var(--tcc-serif); font-size: 2rem; font-weight: 600; color: var(--tcc-navy); line-height: 1; }
.tcc-event__body h3 { margin-bottom: 0.3rem; font-size: 1.35rem; }
.tcc-event__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; color: var(--tcc-muted); font-size: 0.92rem; margin-bottom: 0.4rem; }
.tcc-event__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.tcc-event__meta svg { width: 15px; height: 15px; color: var(--tcc-sage); }
.tcc-event__type { display: inline-block; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--tcc-sand-700); margin-bottom: 0.3rem; }
.tcc-event__cta { white-space: nowrap; }
/* =========================================================================
11b. VIEW TOGGLE + MONTH CALENDAR (Groups & Workshops)
========================================================================= */
.tcc-viewtoggle {
display: flex; width: max-content; gap: 0.25rem; padding: 0.3rem;
background: var(--tcc-sage-tint); border-radius: var(--tcc-radius-pill);
margin: 0 auto 2rem;
}
.tcc-viewtoggle__btn {
display: inline-flex; align-items: center; gap: 0.45rem;
border: 0; background: transparent; cursor: pointer;
font-family: var(--tcc-sans); font-weight: 800; font-size: 0.95rem; color: var(--tcc-navy-700);
padding: 0.55rem 1.15rem; border-radius: var(--tcc-radius-pill);
transition: background var(--tcc-transition), color var(--tcc-transition), box-shadow var(--tcc-transition);
}
.tcc-viewtoggle__btn svg { width: 17px; height: 17px; }
.tcc-viewtoggle__btn:hover { color: var(--tcc-navy); }
.tcc-viewtoggle__btn.is-active { background: #fff; color: var(--tcc-navy); box-shadow: var(--tcc-shadow-sm); }
/* Panels shown/hidden by mode class on the container. */
.tcc-events-views .tcc-events-panel { min-width: 0; }
.tcc-events-views.is-list [data-view-panel="calendar"] { display: none; }
.tcc-events-views.is-calendar [data-view-panel="list"] { display: none; }
.tcc-events-views.is-both {
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.5rem, 4vw, 2.6rem); align-items: start;
}
.tcc-events-views.is-both [data-view-panel="calendar"] { position: sticky; top: 100px; }
.tcc-events-views.is-both .tcc-events { gap: 1rem; }
/* Month grid */
.tcc-cal { background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius); box-shadow: var(--tcc-shadow-sm); padding: 1.2rem; }
.tcc-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tcc-cal__title { font-size: 1.4rem; margin: 0; }
.tcc-cal__nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tcc-line); background: #fff; color: var(--tcc-navy); cursor: pointer; display: grid; place-items: center; transition: background var(--tcc-transition), color var(--tcc-transition); }
.tcc-cal__nav:hover { background: var(--tcc-navy); color: #fff; border-color: var(--tcc-navy); }
.tcc-cal__nav svg { width: 18px; height: 18px; }
.tcc-cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.tcc-cal__dow { text-align: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tcc-muted); padding: 0.35rem 0; }
.tcc-cal__cell { min-height: 82px; min-width: 0; border-radius: var(--tcc-radius-sm); border: 1px solid var(--tcc-line); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.2rem; background: #fff; }
.tcc-cal__cell.is-empty { background: transparent; border-color: transparent; min-height: 0; }
.tcc-cal__cell.is-today { border-color: var(--tcc-sage); box-shadow: inset 0 0 0 1px var(--tcc-sage); }
.tcc-cal__cell.has-events { background: var(--tcc-cream); }
.tcc-cal__num { font-size: 0.82rem; font-weight: 700; color: var(--tcc-navy-700); }
.tcc-cal__cell.is-today .tcc-cal__num { color: var(--tcc-sage-600); }
.tcc-cal__events { display: flex; flex-direction: column; gap: 3px; overflow: hidden; min-width: 0; }
.tcc-cal__chip { max-width: 100%; }
.tcc-cal__chip {
display: block; font-size: 0.72rem; font-weight: 700; line-height: 1.25;
padding: 0.18rem 0.4rem; border-radius: 5px; background: var(--tcc-sage-tint); color: var(--tcc-navy-700);
border-left: 3px solid var(--tcc-sage); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcc-cal__chip:hover { background: var(--tcc-sage-300); color: var(--tcc-navy-900); }
.tcc-cal__chip.is-group { border-left-color: var(--tcc-sage); }
.tcc-cal__chip.is-workshop { border-left-color: var(--tcc-sand-700); background: var(--tcc-cream-2); }
.tcc-cal__chip.is-event { border-left-color: var(--tcc-teal); background: #dbe6e9; }
.tcc-cal__empty { text-align: center; color: var(--tcc-muted); margin: 1rem 0 0.3rem; }
@media (max-width: 980px) {
.tcc-events-views.is-both { grid-template-columns: 1fr; }
.tcc-events-views.is-both [data-view-panel="calendar"] { position: static; }
}
@media (max-width: 560px) {
.tcc-cal { overflow-x: auto; }
.tcc-cal__grid { min-width: 460px; }
.tcc-cal__cell { min-height: 62px; }
}
/* =========================================================================
12. GALLERY (Our Space)
========================================================================= */
.tcc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.tcc-gallery__item { border-radius: var(--tcc-radius); overflow: hidden; box-shadow: var(--tcc-shadow-sm); position: relative; }
.tcc-gallery__item img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; transition: transform 400ms ease; }
.tcc-gallery__item:hover img { transform: scale(1.05); }
.tcc-gallery__item .tcc-imgph { aspect-ratio: 4/3; border-radius: 0; }
/* The gradient starts fully transparent and reaches full strength before the
text begins, so a caption that wraps to two lines still sits on solid tone
rather than half on the photo (20 Aug 2026). */
.tcc-gallery__cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8rem 1rem 0.8rem; color: #fff; font-weight: 700; font-size: 0.92rem; line-height: 1.35; background: linear-gradient(transparent, rgba(17,40,50,0.55) 45%, rgba(17,40,50,0.82) 100%); }
.tcc-gallery__item--wide { grid-column: span 2; }
/* The lead photograph (21 Aug 2026) --------------------------------------
The photo flagged as primary now leads the gallery as a tall panel down the
left rather than a wide banner across the top. Two reasons: the room the
client chose to lead with is a portrait shot, and in the old 4:3 banner slot
a cover crop kept barely half its height; and three columns with the lead
spanning both rows is the one arrangement in which five photographs fill the
grid exactly, with no empty cell trailing the last row.
The lead photo's ![]()
is taken out of flow so the row heights are set by the
4:3 tiles beside it and the panel simply stretches to meet them — an ![]()
sized at height:100% inside an auto row would otherwise try to contribute its
own 1600px intrinsic height to that measurement. */
.tcc-gallery--feature { grid-template-columns: 1.25fr 1fr 1fr; }
.tcc-gallery--feature .tcc-gallery__item--wide { grid-column: 1; grid-row: span 2; min-height: 280px; }
.tcc-gallery--feature .tcc-gallery__item--wide img,
.tcc-gallery--feature .tcc-gallery__item--wide .tcc-imgph {
position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
}
@media (max-width: 1000px) {
/* Two columns: the lead still spans two rows, and five photos still fill the
grid — two beside the lead, two across the row beneath it. */
.tcc-gallery--feature { grid-template-columns: 1.1fr 1fr; }
}
@media (max-width: 620px) {
/* Single column. Nothing is cropped here: the lead photo runs at its own
shape, which is the only place in the layout where a portrait photograph
can be shown whole. */
.tcc-gallery--feature { grid-template-columns: 1fr; }
.tcc-gallery--feature .tcc-gallery__item--wide { grid-column: 1; grid-row: auto; min-height: 0; }
.tcc-gallery--feature .tcc-gallery__item--wide img,
.tcc-gallery--feature .tcc-gallery__item--wide .tcc-imgph {
position: static; height: auto; min-height: 0;
}
.tcc-gallery--feature .tcc-gallery__item--wide .tcc-imgph { aspect-ratio: 4/3; }
}
/* =========================================================================
13. RESOURCES LIST
========================================================================= */
.tcc-resources { display: grid; gap: 1rem; }
.tcc-resource {
display: flex; align-items: center; gap: 1.2rem;
background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius);
padding: 1.2rem 1.5rem; box-shadow: var(--tcc-shadow-sm);
transition: border-color var(--tcc-transition), transform var(--tcc-transition);
}
.tcc-resource:hover { border-color: var(--tcc-sage-300); transform: translateX(3px); }
.tcc-resource__icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--tcc-sage-tint); color: var(--tcc-navy); }
.tcc-resource__icon svg { width: 24px; height: 24px; }
.tcc-resource__body { flex: 1; }
.tcc-resource__body h3 { font-size: 1.2rem; margin-bottom: 0.15rem; }
.tcc-resource__body p { margin: 0; color: var(--tcc-muted); font-size: 0.96rem; }
.tcc-resource__go { flex: none; color: var(--tcc-teal); }
.tcc-resource__go svg { width: 22px; height: 22px; }
/* -------------------------------------------------------------------------
13b. COMMUNITY RESOURCE CATEGORY CARDS (10 Aug 2026)
Icon-marked cards that expand in place to reveal their links. The panel is
open in the markup so the content is present without JavaScript; main.js
collapses it on load.
------------------------------------------------------------------------- */
.tcc-resintro { text-align: center; font-size: 1.1rem; }
.tcc-resintro p:last-child { margin-bottom: 0; }
.tcc-rescards {
display: grid;
gap: 1.4rem;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
align-items: start;
}
.tcc-rescard {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--tcc-line);
border-radius: var(--tcc-radius);
box-shadow: var(--tcc-shadow-sm);
overflow: hidden;
transition: box-shadow var(--tcc-transition), border-color var(--tcc-transition);
}
.tcc-rescard:hover { border-color: var(--tcc-sage-300); }
.tcc-rescard.is-open { box-shadow: var(--tcc-shadow); border-color: var(--tcc-sage-300); }
.tcc-rescard__head { padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.4rem, 3vw, 1.9rem) 0.2rem; }
.tcc-rescard__icon {
display: grid; place-items: center;
width: 56px; height: 56px;
border-radius: 18px;
background: var(--tcc-sage-tint);
color: var(--tcc-navy);
margin-bottom: 1rem;
transition: background var(--tcc-transition), color var(--tcc-transition);
}
.tcc-rescard__icon svg { width: 28px; height: 28px; }
.tcc-rescard.is-open .tcc-rescard__icon { background: var(--tcc-navy); color: #fff; }
.tcc-rescard__title { font-size: 1.42rem; margin: 0 0 0.4rem; color: var(--tcc-navy); }
.tcc-rescard__summary { margin: 0; color: var(--tcc-muted); font-size: 0.97rem; line-height: 1.55; }
/* Toggle */
.tcc-rescard__toggle {
display: flex; align-items: center; gap: 0.6rem;
width: 100%;
margin-top: auto;
padding: 1.1rem clamp(1.4rem, 3vw, 1.9rem);
background: none; border: 0; border-top: 1px solid transparent;
font-family: var(--tcc-sans); font-size: 0.86rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.09em;
color: var(--tcc-teal);
cursor: pointer;
transition: color var(--tcc-transition), background var(--tcc-transition);
}
.tcc-rescard__toggle:hover { color: var(--tcc-navy); background: var(--tcc-bg-alt); }
.tcc-rescard__toggle:focus-visible { outline: 3px solid var(--tcc-sage-300); outline-offset: -3px; }
.tcc-rescard__count {
flex: none;
min-width: 1.6em; padding: 0.1em 0.5em;
border-radius: var(--tcc-radius-pill);
background: var(--tcc-sage-tint); color: var(--tcc-navy);
font-size: 0.78rem; letter-spacing: 0.02em; text-align: center;
}
.tcc-rescard__chev { margin-left: auto; display: grid; place-items: center; transition: transform var(--tcc-transition); }
.tcc-rescard__chev svg { width: 20px; height: 20px; stroke-width: 2.2; }
.tcc-rescard.is-open .tcc-rescard__chev { transform: rotate(180deg); }
.tcc-rescard.is-open .tcc-rescard__toggle { border-top-color: var(--tcc-line); }
/* Panel — height animated by main.js; hidden outright when JS is unavailable
is *not* desirable, so the closed state is only applied via .is-collapsed. */
.tcc-rescard__panel { overflow: hidden; }
.tcc-rescard__panel.is-collapsed { height: 0; visibility: hidden; }
.tcc-rescard__panel.is-animating { transition: height 320ms ease; }
.tcc-rescard__panelinner {
padding: 0.4rem clamp(1.4rem, 3vw, 1.9rem) clamp(1.5rem, 3vw, 1.9rem);
border-top: 1px solid var(--tcc-line);
}
.tcc-rescard__note {
margin: 1rem 0 0;
padding: 0.7rem 0.9rem;
border-radius: var(--tcc-radius-sm);
background: var(--tcc-bg-alt);
color: var(--tcc-muted);
font-size: 0.9rem;
}
.tcc-resgroup + .tcc-resgroup { margin-top: 1.4rem; }
.tcc-resgroup__head {
font-family: var(--tcc-sans); font-weight: 800; font-size: 0.78rem;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--tcc-sage-600);
margin: 1.3rem 0 0.6rem;
}
.tcc-resgroup:first-child .tcc-resgroup__head { margin-top: 1.2rem; }
.tcc-reslinks { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.15rem; }
.tcc-reslink {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.9rem;
padding: 0.5rem 0;
border-bottom: 1px dashed var(--tcc-line);
}
.tcc-reslink:last-child { border-bottom: 0; }
.tcc-reslink__main { flex: 1 1 60%; min-width: 0; }
.tcc-reslink__name {
font-weight: 700; color: var(--tcc-navy); font-size: 1rem; line-height: 1.4;
text-decoration: none;
}
a.tcc-reslink__name { color: var(--tcc-teal); }
a.tcc-reslink__name:hover, a.tcc-reslink__name:focus-visible { color: var(--tcc-navy); text-decoration: underline; text-underline-offset: 3px; }
.tcc-reslink__ext { display: inline-grid; place-items: center; vertical-align: -2px; margin-left: 0.3em; opacity: 0.6; }
.tcc-reslink__ext svg { width: 13px; height: 13px; }
.tcc-reslink__note { display: block; color: var(--tcc-muted); font-size: 0.88rem; line-height: 1.45; }
.tcc-reslink__phones { display: flex; flex-wrap: wrap; gap: 0.15rem 0.8rem; }
.tcc-reslink__phone {
display: inline-flex; align-items: center; gap: 0.32em;
color: var(--tcc-body); font-size: 0.9rem; font-variant-numeric: tabular-nums;
text-decoration: none; white-space: nowrap;
}
a.tcc-reslink__phone:hover, a.tcc-reslink__phone:focus-visible { color: var(--tcc-navy); text-decoration: underline; text-underline-offset: 3px; }
.tcc-reslink__phone svg { width: 14px; height: 14px; color: var(--tcc-sage); flex: none; }
/* An entry with neither a website nor a phone number — a name on its own. */
.tcc-reslink--plain .tcc-reslink__name { font-weight: 600; color: var(--tcc-body); }
/* Categories still being written show their topics as quiet chips. */
.tcc-rescard--pending .tcc-reslinks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tcc-rescard--pending .tcc-reslink {
padding: 0.38rem 0.85rem;
border: 1px solid var(--tcc-line);
border-radius: var(--tcc-radius-pill);
background: var(--tcc-bg-alt);
}
.tcc-rescard--pending .tcc-reslink__name { font-weight: 600; font-size: 0.92rem; color: var(--tcc-body); }
/* Closing "can't find it?" block */
.tcc-resask {
display: flex; gap: 1.3rem; align-items: flex-start;
background: var(--tcc-bg-alt);
border: 1px solid var(--tcc-line);
border-radius: var(--tcc-radius);
padding: clamp(1.5rem, 4vw, 2.4rem);
}
.tcc-resask__icon { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--tcc-navy); color: #fff; }
.tcc-resask__icon svg { width: 28px; height: 28px; }
.tcc-resask__head { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0 0 0.5rem; }
.tcc-resask__text { color: var(--tcc-body); margin-bottom: 1.1rem; }
@media (max-width: 560px) {
.tcc-resask { flex-direction: column; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
.tcc-rescard__panel.is-animating { transition: none; }
.tcc-rescard__chev { transition: none; }
}
/* =========================================================================
14. JOIN BLOCKS
========================================================================= */
.tcc-join { display: grid; gap: 1.6rem; }
.tcc-join__block {
display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: start;
background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius);
padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--tcc-shadow-sm);
}
.tcc-join__icon { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--tcc-navy); color: #fff; }
.tcc-join__icon svg { width: 32px; height: 32px; }
.tcc-join__body h3 { font-size: 1.6rem; margin-bottom: 0.35rem; }
.tcc-join__embed { margin-top: 1.1rem; border-radius: var(--tcc-radius-sm); overflow: hidden; border: 1px solid var(--tcc-line); }
.tcc-join__embed iframe { width: 100%; min-height: 480px; border: 0; display: block; }
/* A block can carry a feature photo (4 Aug 2026: Membership + Three Lights,
Three Boats; 12 Aug 2026: Coaching & Consulting + The Source).
10 Aug 2026: the forced-tall crop was cutting off the outer two boats
(the source photo is a wide 3:2 shot with all three boats spread along
the bottom edge). Switched to an aspect-ratio close to the source image
so the full scene reads instead of a tight sliver of water and sky.
12 Aug 2026: photo stacked full-width above the copy.
13 Aug 2026: full width read as too large. Back to copy and photo side by
side (the 10 Aug treatment, which the client liked), but now alternating
which side the photo sits on — Membership photo right, Coaching &
Consulting photo left — and with the photo column a little wider than it was
on 10 Aug, so the photos still read as enlarged.
These blocks run long (Membership is ten paragraphs), so a photo simply
parked at the top or centre of its column leaves several hundred pixels of
empty gutter beside the rest of the copy. The photo is sticky instead: it
starts level with the heading and rides down alongside the copy, staying in
view for as long as its block does. Same offset as the sticky events
calendar so it clears the fixed header.
Below 860px there is no room for two columns and the block stacks. */
.tcc-join__media { border-radius: var(--tcc-radius); overflow: hidden; box-shadow: var(--tcc-shadow); aspect-ratio: 3 / 2; margin-top: 1.5rem; }
.tcc-join__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
/* The Membership photo (three lobster boats along the waterline) needs a
lower crop bias so the boats stay in frame; other photo blocks use the
default centered crop. */
#membership .tcc-join__media img { object-position: center 68%; }
@media (min-width: 860px) {
.tcc-join__block--photo .tcc-join__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.32fr);
gap: 2.2rem;
align-items: start;
}
/* Photo on the left: swap the track widths and pull the media, which is
second in the markup, into the first column. */
.tcc-join__block--photo-left .tcc-join__body { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); }
.tcc-join__block--photo-left .tcc-join__media { order: -1; }
.tcc-join__block--photo .tcc-join__media { position: sticky; top: 100px; margin-top: 0.5rem; }
}
@media (min-width: 1100px) {
.tcc-join__block--photo .tcc-join__body { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr); gap: 2.6rem; }
.tcc-join__block--photo-left .tcc-join__body { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr); }
}
/* The price list gets its own full-width row beneath the copy/photo split, so
the longest row ("Individual Coaching Session: 60 minutes, $200") always has
room to sit on a single line. Column 2 of the block grid, i.e. flush with the
copy above it rather than under the icon. */
.tcc-join__pricing { grid-column: 2 / -1; margin-top: 1.4rem; }
/* Investment / price list (20 Aug 2026 client edit)
Used by the Coaching & Consulting block, and available to any other block
that lists a service against a fee. Previously these were
-separated
lines inside one paragraph, so the rows did not line up and the longest one
("Individual Coaching Session — 60 minutes, $200") wrapped mid-line.
Now a two-column grid: service names share a column, durations and fees
share a second, and the value column is nowrap so a row never splits
between "60 minutes," and "$200". Below 560px there is not enough width for
two columns, so the value drops onto its own line, still un-split. */
.tcc-pricing__title { margin-bottom: 0.45rem; }
.tcc-prose .tcc-pricing__title + .tcc-pricing { margin-top: 0; }
.tcc-pricing {
margin: 0 0 1.2rem;
padding: 1rem 1.2rem;
display: grid;
grid-template-columns: max-content minmax(0, 1fr);
gap: 0.55rem 1.6rem;
align-items: baseline;
background: var(--tcc-sage-tint);
border-radius: var(--tcc-radius-sm);
border: 1px solid var(--tcc-sage-300);
}
.tcc-pricing__label { margin: 0; font-weight: 700; color: var(--tcc-navy-700); }
.tcc-pricing__value {
margin: 0; color: var(--tcc-body);
white-space: nowrap; /* "60 minutes, $200" never splits */
font-variant-numeric: tabular-nums;
}
/* Too narrow for two columns — the fee drops beneath its service, still whole. */
@media (max-width: 560px) {
.tcc-pricing { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
.tcc-pricing__label { margin-top: 0.55rem; }
.tcc-pricing__label:first-child { margin-top: 0; }
}
/* =========================================================================
15. CONNECT / CONTACT
========================================================================= */
.tcc-connect { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 5vw, 3.4rem); align-items: start; }
.tcc-contact-info { display: grid; gap: 1.1rem; }
.tcc-contact-row { display: flex; align-items: flex-start; gap: 1rem; }
.tcc-contact-row__icon { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--tcc-sage-tint); color: var(--tcc-navy); }
.tcc-contact-row__icon svg { width: 22px; height: 22px; }
.tcc-contact-row h4 { font-family: var(--tcc-sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; color: var(--tcc-sage-600); margin: 0 0 0.2rem; }
.tcc-contact-row p, .tcc-contact-row a { margin: 0; color: var(--tcc-body); font-size: 1.05rem; }
.tcc-map { margin-top: 1.6rem; border-radius: var(--tcc-radius); overflow: hidden; border: 1px solid var(--tcc-line); box-shadow: var(--tcc-shadow-sm); }
.tcc-map iframe { width: 100%; min-height: 300px; border: 0; display: block; }
/* Form (Gravity Forms — 1 Sep 2026)
The Connect form moved from a hand-rolled PHP form to Gravity Forms. Gravity
Forms' own stylesheet is switched off in inc/gravity-forms.php, so everything
below is ours, including the field grid GF's CSS would normally supply.
.tcc-form is the card printed by tcc_render_contact_form(); every GF selector
is scoped inside it so nothing here touches a form placed anywhere else. */
.tcc-form { background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--tcc-shadow-sm); }
.tcc-form h3 { margin-bottom: 1.1rem; }
/* Field grid. Fields set to half width in the GF editor carry .gfield--width-half. */
.tcc-form .gform_fields { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 1.1rem; list-style: none; margin: 0; padding: 0; }
.tcc-form .gfield { grid-column: span 12; margin-bottom: 1.1rem; }
.tcc-form .gfield--width-half { grid-column: span 6; }
.tcc-form .gfield_label { display: block; font-weight: 700; font-size: 0.92rem; color: var(--tcc-navy-700); margin-bottom: 0.35rem; }
.tcc-form .gfield_required { color: var(--tcc-sage-600); margin-left: 0.15rem; }
.tcc-form .gfield_description { font-size: 0.85rem; color: var(--tcc-muted); margin-top: 0.35rem; }
.tcc-form .gform_required_legend { font-size: 0.82rem; color: var(--tcc-muted); margin: 0 0 1.1rem; }
.tcc-form input[type="text"], .tcc-form input[type="email"], .tcc-form input[type="tel"],
.tcc-form input[type="url"], .tcc-form input[type="number"], .tcc-form textarea, .tcc-form select {
width: 100%; font-family: inherit; font-size: 1rem; color: var(--tcc-ink);
padding: 0.8rem 1rem; border: 1.5px solid var(--tcc-line-strong); border-radius: var(--tcc-radius-sm);
background: var(--tcc-cream); transition: border-color var(--tcc-transition), box-shadow var(--tcc-transition);
}
.tcc-form input:focus, .tcc-form textarea:focus, .tcc-form select:focus { outline: none; border-color: var(--tcc-sage); box-shadow: 0 0 0 3px rgba(111,148,144,0.2); background: #fff; }
.tcc-form textarea { resize: vertical; min-height: 130px; }
.tcc-form .ginput_container { margin: 0; }
/* Submit row. GF prints the button plus its AJAX spinner inside .gform_footer. */
.tcc-form .gform_footer { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0; padding: 0.4rem 0 0; }
.tcc-form .gform_ajax_spinner { width: 22px; height: 22px; }
.tcc-form__note { font-size: 0.85rem; color: var(--tcc-muted); }
/* GF's honeypot and hidden fields. With the plugin stylesheet off these have no
styling of their own and would otherwise render as a stray visible field. */
.tcc-form .gform_validation_container,
.tcc-form .gfield--type-honeypot,
.tcc-form .gform_hidden { position: absolute !important; left: -5000px; height: 0; overflow: hidden; }
/* Confirmation and validation, inheriting the alert treatment the old form used. */
.tcc-form .gform_confirmation_message, .tcc-form .gform_validation_errors { padding: 0.9rem 1.1rem; border-radius: var(--tcc-radius-sm); margin-bottom: 1.2rem; font-weight: 600; }
.tcc-form .gform_confirmation_message { background: var(--tcc-sage-tint); color: var(--tcc-navy-700); border: 1px solid var(--tcc-sage-300); }
.tcc-form .gform_validation_errors { background: #fbece8; color: #8a3320; border: 1px solid #f0c4b8; }
.tcc-form .gform_validation_errors h2 { font-family: var(--tcc-sans); font-size: 0.95rem; font-weight: 700; color: #8a3320; margin: 0; }
.tcc-form .gform_validation_errors a { color: #8a3320; }
.tcc-form .gfield_error .gfield_label { color: #8a3320; }
.tcc-form .gfield_error input, .tcc-form .gfield_error textarea { border-color: #d98b74; }
.tcc-form .validation_message { font-size: 0.85rem; font-weight: 600; color: #8a3320; margin-top: 0.35rem; }
/* =========================================================================
16. CTA BAND
========================================================================= */
/* 20 Aug 2026 (client edit): the band used to be a flat navy-to-teal gradient
with two oversized translucent circles floating in it, which the client found
generic. It is now backed by one of the Ralston photographs — the same
photography that carries the rest of the site — held behind a deep navy scrim
so the headline, tagline, and buttons keep full contrast on top of it.
The gradient remains as the base layer, so the band still looks finished if
the photo is removed or fails to load, and a thin sand hairline at the top
edge picks up the logo's colour instead of the old dots. */
.tcc-cta {
position: relative; overflow: hidden; border-radius: clamp(18px, 3vw, 28px);
background: linear-gradient(150deg, var(--tcc-navy) 0%, var(--tcc-teal) 130%);
color: #fff; padding: clamp(2.6rem, 5.5vw, 4.2rem); text-align: center;
isolation: isolate;
}
/* 21 Aug 2026: the bundled photo is now The Wave, already cropped to a wide band
and composed for this shape, so it is centred rather than pulled down to the
72% the dawn-harbour photo needed.
27 Aug 2026: and the photo itself is now the lifted print of it,
cta-band-the-wave-light.jpg — see tcc_cta_background_url(). */
.tcc-cta__bg {
position: absolute; inset: 0; z-index: -2;
background-size: cover; background-position: center; background-repeat: no-repeat;
}
/* Scrim (27 Aug 2026, third pass — client: lighter again).
History, because the number below looks wrong without it. The band started at
0.70 flat and read as a navy field rather than a photograph. Pass one shaped
the scrim into an ellipse under the copy so the outer photograph could run
bright; it measured well but you could see its edge on a smooth sky. Pass two
went back to an even wash at 0.58. This is pass three, at 0.46, chosen by the
client after being shown the cost, and it is below WCAG AA for two of the
three pieces of type on the band. Measured over this photograph:
headline 3.7-3.8 (large text, needs 3:1) — passes
tagline 3.1-3.3 (17.9px, needs 4.5:1) — under
buttons 3.7-3.8 (16px bold, needs 4.5:1) — under
AA for all three would want the wash back around 0.60-0.62, which is roughly
where pass two sat. Recorded here so it reads as a decision and not an
oversight. The type keeps its shadows — they count for nothing in the ratio
and a good deal in practice. If this is revisited, the way to hold AA at this
lightness is a local fix rather than a heavier wash: a soft dark fill behind
the ghost button, and the tagline set in something closer to white.
Band brightness 62 -> 103 at 1280px. */
.tcc-cta__bg::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(160% 190% at 50% 50%, rgba(10,22,29,0.46) 0%, rgba(10,22,29,0.38) 55%, rgba(10,22,29,0.30) 100%);
}
/* A sand hairline along the top edge, in place of the old floating circles. */
.tcc-cta::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 1;
background: linear-gradient(90deg, rgba(227,211,182,0) 0%, var(--tcc-sand) 24%, var(--tcc-sand-600) 50%, var(--tcc-sand) 76%, rgba(227,211,182,0) 100%);
}
.tcc-cta::after { content: none; }
.tcc-cta h2 { color: #fff; position: relative; text-shadow: 0 2px 18px rgba(9,24,32,0.8), 0 1px 4px rgba(9,24,32,0.7); }
.tcc-cta p { color: #e6efec; max-width: 600px; margin: 0.5rem auto 1.7rem; position: relative; font-size: 1.12rem; }
/* NOTE (27 Aug 2026) — this rule does not fully apply, and has never fully
applied. `.tcc-cta p` above is (0,1,1) to this rule's (0,1,0), so its
`color: #e6efec` and `font-size: 1.12rem` win on specificity no matter the
order. The tagline therefore renders pale grey-green at 17.9px, not sand at
up to 2rem: the family, the italic, the letter-spacing and the max-width
here do apply, the colour and the size do not. Left as it stands for now —
correcting it changes the look of the band on every page of the site, and
sand is a darker colour than the grey-green it is actually rendering in, so
it would also cost contrast over the photograph. Flagged to the client; the
fix, when wanted, is to give this rule `.tcc-cta p.tcc-cta__tagline` or move
the colour and size off `.tcc-cta p`. */
.tcc-cta__tagline {
font-family: var(--tcc-serif); font-style: italic; font-weight: 500;
font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.3;
color: var(--tcc-sand); letter-spacing: 0.01em;
max-width: 34ch; margin: 0.9rem auto 1.9rem; position: relative;
text-shadow: 0 2px 16px rgba(9,24,32,0.78), 0 1px 4px rgba(9,24,32,0.68);
}
.tcc-cta__actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; position: relative; }
/* Pull-quote */
.tcc-quote { text-align: center; max-width: 820px; margin-inline: auto; }
.tcc-quote__mark { font-family: var(--tcc-serif); font-size: 4rem; line-height: 0.5; color: var(--tcc-sage-300); }
.tcc-quote blockquote { font-family: var(--tcc-serif); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; font-style: italic; color: var(--tcc-navy); line-height: 1.35; margin: 0.5rem 0 1rem; }
.tcc-quote cite { font-family: var(--tcc-sans); font-style: normal; font-weight: 700; color: var(--tcc-sage-600); }
/* =========================================================================
17. FOOTER
========================================================================= */
.tcc-footer { background: var(--tcc-footer); color: #cfe0dc; }
.tcc-footer a { color: #eaf1ef; }
.tcc-footer a:hover { color: var(--tcc-sand); }
.tcc-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); padding-block: clamp(2.6rem, 5vw, 4rem); }
.tcc-footer__brand-img { height: 92px; width: auto; margin-bottom: 1rem; }
.tcc-footer__wordmark { display: flex; flex-direction: column; line-height: 1.05; margin-bottom: 1.1rem; }
.tcc-footer__wordmark-name { font-family: var(--tcc-serif); font-size: 1.7rem; color: #fff; letter-spacing: 0.04em; text-transform: uppercase; }
.tcc-footer__wordmark-meta { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tcc-sand); font-weight: 700; margin-top: 0.2rem; }
.tcc-footer h4 { color: #fff; font-family: var(--tcc-sans); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; margin-bottom: 1.1rem; }
.tcc-footer__about p { color: #bcd2cd; max-width: 34ch; }
.tcc-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.tcc-footer__contact { display: grid; gap: 0.7rem; }
.tcc-footer__contact-row { display: flex; align-items: flex-start; gap: 0.6rem; color: #cfe0dc; }
.tcc-footer__contact-row svg { width: 17px; height: 17px; margin-top: 4px; color: var(--tcc-sand); flex: none; }
.tcc-social { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.tcc-social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,0.1); color: #fff; transition: background var(--tcc-transition), transform var(--tcc-transition); }
.tcc-social a:hover { background: var(--tcc-sand); color: var(--tcc-navy-900); transform: translateY(-2px); }
.tcc-social svg { width: 18px; height: 18px; }
.tcc-footer__bottom { background: var(--tcc-footer-bottom); }
.tcc-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-block: 1.1rem; font-size: 0.88rem; color: #9fb8b3; }
.tcc-footer__legal { display: flex; gap: 1.2rem; flex-wrap: wrap; }
/* =========================================================================
18. IDX-STYLE PLACEHOLDER (editor-only helper for embeds)
========================================================================= */
.tcc-embed-ph {
border: 2px dashed var(--tcc-sage-300); border-radius: var(--tcc-radius);
background: var(--tcc-sage-tint); padding: 2rem; text-align: center; color: var(--tcc-navy-700);
}
.tcc-embed-ph strong { display: block; font-size: 1.05rem; margin-bottom: 0.4rem; }
.tcc-embed-ph p { margin: 0; color: var(--tcc-muted); font-size: 0.95rem; }
/* =========================================================================
19. MISC
========================================================================= */
.tcc-pagination { display: flex; gap: 0.4rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.tcc-pagination a, .tcc-pagination span { padding: 0.5rem 0.9rem; border-radius: var(--tcc-radius-sm); border: 1px solid var(--tcc-line); color: var(--tcc-navy); font-weight: 700; }
.tcc-pagination .current { background: var(--tcc-navy); color: #fff; border-color: var(--tcc-navy); }
.tcc-single-back { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 800; margin-bottom: 1.4rem; }
.tcc-single-back svg { width: 18px; height: 18px; }
.tcc-notice { background: var(--tcc-cream-2); border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius-sm); padding: 1rem 1.3rem; color: var(--tcc-navy-700); }
.tcc-notice--edit { margin-top: 0.9rem; background: var(--tcc-sage-tint); border-color: var(--tcc-sage-300); font-size: 0.95rem; }
/* =========================================================================
19b. BLOG (added 19 Aug 2026)
The Blog is WordPress's Posts page, rendered by home.php; single.php renders
an individual entry. The index is a single column of wide cards rather than
a grid: posts here are read, not scanned, and a full-width card leaves room
for a real excerpt.
========================================================================= */
.tcc-posts { display: grid; gap: 1.6rem; max-width: 860px; margin-inline: auto; }
.tcc-post {
display: grid; grid-template-columns: 260px 1fr; gap: 0;
background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius);
overflow: hidden; box-shadow: var(--tcc-shadow-sm);
transition: transform var(--tcc-transition), box-shadow var(--tcc-transition), border-color var(--tcc-transition);
}
.tcc-post:hover { transform: translateY(-3px); box-shadow: var(--tcc-shadow); border-color: var(--tcc-sage-300); }
/* No featured image: the body spans the whole card rather than leaving a gap. */
.tcc-post--nomedia { grid-template-columns: 1fr; }
.tcc-post__media { display: block; background: var(--tcc-sage-tint); }
.tcc-post__media img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; display: block; }
.tcc-post__body { padding: clamp(1.3rem, 3vw, 1.8rem); }
.tcc-post__meta {
display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--tcc-sage-600); margin: 0 0 0.5rem;
}
.tcc-post__title { font-size: clamp(1.3rem, 2.6vw, 1.6rem); margin: 0 0 0.5rem; line-height: 1.25; }
.tcc-post__title a { color: var(--tcc-navy); }
.tcc-post__title a:hover { color: var(--tcc-teal); }
.tcc-post__excerpt { color: var(--tcc-body); margin: 0 0 0.9rem; }
.tcc-post__more { display: block; }
@media (max-width: 760px) {
.tcc-post { grid-template-columns: 1fr; }
.tcc-post__media img { min-height: 0; aspect-ratio: 16/9; }
}
/* Single post ------------------------------------------------------------ */
.tcc-single__meta { margin-bottom: 1.3rem; }
.tcc-single__cats a { color: var(--tcc-sage-600); }
.tcc-single__cats a:hover { color: var(--tcc-navy); }
/* The featured photo inside a post (21 Aug 2026).
It used to fill the column edge to edge with no cap on its height. Firmament,
on the second post, is 1920x2836 — that came out around 1200px tall in an
820px column and pushed the article clean off the first screen. It is now
capped in height and centred at its own shape, so a tall photograph and a
wide one carry the same weight on the page and neither is cropped. */
.tcc-single__media { margin: 0 0 2.2rem; text-align: center; }
.tcc-single__media img {
display: inline-block; width: auto; height: auto;
max-width: 100%; max-height: 460px;
border-radius: var(--tcc-radius); box-shadow: var(--tcc-shadow);
}
/* 27 Aug 2026 (client: make the photo on the 20 Aug post larger, like the one
on the other post). One cap for both shapes could not do it. In an 820px
column the landscape photo runs 605 x 460 and the upright one only 311 x 460
— a third of the footprint, which is what read as small. Raising the single
cap would have grown the landscape photo too, and that one is the reference
she is happy with. So an upright photo gets its own taller cap: 620px, which
puts Firmament at 515 x 760 — half again the width it had and larger than
The Source in both directions. Still nothing cropped. (620px first, raised
to 760 the same day on the client's second look.)
single.php adds the class by reading the attachment's own dimensions, so any
upright photo she uploads in future is treated the same way. */
.tcc-single__media--tall img { max-height: 760px; }
@media (max-width: 620px) {
.tcc-single__media img { max-height: 380px; }
.tcc-single__media--tall img { max-height: 560px; }
}
.tcc-single__body { font-size: 1.09rem; }
.tcc-single__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 2rem 0 0; }
.tcc-single__tags a {
display: inline-block; padding: 0.3rem 0.8rem; border-radius: var(--tcc-radius-pill);
background: var(--tcc-sage-tint); color: var(--tcc-navy-700); font-size: 0.86rem; font-weight: 700;
}
.tcc-single__tags a:hover { background: var(--tcc-navy); color: #fff; }
.tcc-single__back { margin-top: 2.2rem; }
.tcc-single__back .tcc-single-back { margin-bottom: 0; }
.tcc-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tcc-postnav__item {
display: block; padding: 1.1rem 1.3rem; background: #fff;
border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius);
transition: border-color var(--tcc-transition), box-shadow var(--tcc-transition);
}
.tcc-postnav__item:hover { border-color: var(--tcc-sage-300); box-shadow: var(--tcc-shadow-sm); }
.tcc-postnav__item--next { text-align: right; }
.tcc-postnav__item--next:only-child { grid-column: 2; }
.tcc-postnav__label {
display: block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--tcc-sage-600); margin-bottom: 0.25rem;
}
.tcc-postnav__title { display: block; font-weight: 700; color: var(--tcc-navy); line-height: 1.35; }
@media (max-width: 620px) {
.tcc-postnav { grid-template-columns: 1fr; }
.tcc-postnav__item--next { text-align: left; }
.tcc-postnav__item--next:only-child { grid-column: 1; }
}
/* Blog band on the Community Resources page ------------------------------ */
.tcc-resblog {
display: flex; gap: 1.3rem; align-items: flex-start;
background: var(--tcc-sage-tint);
border: 1px solid var(--tcc-sage-300);
border-radius: var(--tcc-radius);
padding: clamp(1.5rem, 4vw, 2.2rem);
}
.tcc-resblog__icon { flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--tcc-navy); color: #fff; }
.tcc-resblog__icon svg { width: 28px; height: 28px; }
.tcc-resblog__body { min-width: 0; }
.tcc-resblog__head { font-size: clamp(1.4rem, 3vw, 1.8rem); margin: 0 0 0.5rem; }
.tcc-resblog__text { color: var(--tcc-body); margin-bottom: 1.1rem; }
.tcc-resblog__list { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.15rem; }
.tcc-resblog__list li {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: 0.2rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--tcc-sage-300);
}
.tcc-resblog__list li:last-child { border-bottom: 0; }
.tcc-resblog__list a { font-weight: 700; color: var(--tcc-teal); }
.tcc-resblog__list a:hover { color: var(--tcc-navy); text-decoration: underline; text-underline-offset: 3px; }
.tcc-resblog__date { color: var(--tcc-muted); font-size: 0.86rem; white-space: nowrap; }
@media (max-width: 560px) {
.tcc-resblog { flex-direction: column; gap: 1rem; }
}
/* Two buttons side by side in a Join Our Collective block. */
.tcc-join__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
/* =========================================================================
20. RESPONSIVE
========================================================================= */
@media (max-width: 980px) {
.tcc-split, .tcc-connect { grid-template-columns: 1fr; }
.tcc-split--reverse .tcc-split__media { order: 0; }
.tcc-footer__top { grid-template-columns: 1fr 1fr; }
}
/* =========================================================================
JOIN: the three pathway cards (client, 1 Sep 2026)
The page used to open straight into three long alternating photo blocks, so
nobody knew there were three ways in until they had read all of it. These
name the three and jump to them.
========================================================================= */
.tcc-pathways {
display: grid; gap: 1.1rem;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.tcc-pathway {
display: flex; flex-direction: column; gap: 0.55rem;
padding: 1.6rem 1.5rem 1.4rem;
background: #fff; border: 1px solid var(--tcc-line); border-radius: var(--tcc-radius);
color: inherit; text-decoration: none;
transition: transform var(--tcc-transition), box-shadow var(--tcc-transition), border-color var(--tcc-transition);
}
.tcc-pathway:hover, .tcc-pathway:focus-visible {
transform: translateY(-3px); box-shadow: var(--tcc-shadow-sm); border-color: var(--tcc-sage-300);
}
.tcc-pathway__icon {
width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
background: var(--tcc-sage-tint); color: var(--tcc-navy);
}
/* ⚠️ SIZE EVERY ICON EXPLICITLY. tcc_icon() emits an