/* Theme Name: SFZC Child Theme URI: https://sfzc.org Description: Child theme for San Francisco Zen Center WordPress migration Author: WebOps Template: generatepress Version: 1.0.0 */ /* ============================================================================= GLOBAL - FONT SMOOTHING GP sets html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } in main.min.css. That disables subpixel rendering and thins every glyph on the site. Drupal uses the browser default (auto) on both properties, so all WP text rendered lighter than Drupal at identical family/size/weight. Measured on the H1 at 48px/500: 13.2% fewer dark pixels than Drupal before this override, 0.8% after - i.e. the weight difference was entirely smoothing, not font weight. This replaces the per-element patching that had accumulated for the same cause: nav links, dropdown links, the teacher-name h2, footer copyright, and h1. Those overrides are now redundant but harmless - they set the same value. Supersedes the auth-style.md note recording weights 525-600 as "clunky"; those thickened the font to compensate for the thinning instead of removing it. Verified across 40 pages, 2026-07-21. ============================================================================= */ html { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* ============================================================================= FONT SMOOTHING - THE EVENTS CALENDAR (bug-078) The html rule above is INHERITED, and a direct declaration always beats an inherited value. TEC declares smoothing directly on its own containers - common-skeleton.css sets `.tribe-common { antialiased }` and tribe-events-single-full.css sets `.tribe-events-single { antialiased }` - so every TEC surface kept rendering ~13% lighter than Drupal, and lighter than every other page on this site. Measured 2026-07-21: 1501 smoothing findings across 136 event pages vs 4 across 26 regular pages, and those 4 were the two pages that embed a calendar. Affects glyph rendering only - no layout, no spacing, no size. ============================================================================= */ .tribe-common, .tribe-events-single { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* ============================================================================= GLOBAL - PAGE BACKGROUND, LINE-HEIGHT, PARAGRAPH SPACING GP defaults: slightly gray body bg, 1.6 line-height, 24px paragraph margin. Drupal: white bg, 1.3 line-height, 16px paragraph margin. Ref: V47, V62, V78, V112-V113, V116-V117, V160, V165, V183, V189, V242-V243 ============================================================================= */ body { background-color: #fff !important; line-height: 1.3; overflow-x: hidden; /* Prevent horizontal scrollbar from 100vw hero breakout */ } p { margin-bottom: 16px; } /* ============================================================================= GLOBAL - LINK TEXT-DECORATION Drupal underlines links by default and strips the underline in chrome only - nav and subnav, breadcrumbs, footer, touts, teacher touts, sidebar paragraphs, tables, pagers, site name, buttons. Read off the live sfzc.org stylesheet 2026-08-27: a { color: #8b0e04; text-decoration: underline }, then a class-scoped text-decoration: none over each of those surfaces. THIS RULE USED TO BE THE INVERSE, and the comment here asserted that Drupal does not underline links. It does. The claim traced to V118 in visual-polish.md Group 17, recorded as colour-only distinction on teacher bio links; measured against live Drupal, that link is underlined. Of the three refs behind the old rule the two that hold up - V34 breadcrumbs, V59 sidebar - are both chrome, where Drupal genuinely does suppress it. One misread body-copy observation became a sitewide default. Inverting it puts this theme the same way round as Drupal, so a new body-copy surface arrives marked rather than unmarked. All 19 class-scoped link treatments in this file outspecify a bare `a` and do not move - established by measuring computed styles across ten pages before and after, not by reasoning about specificity. Ref: bug-130. Supersedes V118, V195. ============================================================================= */ a { text-decoration: underline; } /* Surfaces Drupal also leaves unmarked and which carry no class-scoped rule of their own, so they had been riding the old `a { none }` default. `table a` mirrors Drupal's own rule. THESE GOVERN THE RESTING STATE ONLY. a[href]:hover below computes (0,2,1) and outspecifies every selector here, so all of them still underline on hover, exactly as they did before bug-130. Verified rather than reasoned: probed on dev with a[href].pv, which carries identical specificity to a[href]:hover. That matches Drupal for tables and diverges for the image links, where Drupal's tout rule outspecifies its own a:hover. Pre-existing, untouched by bug-130, deliberately left alone rather than fixed in passing. */ table a, a.btn, a.sfzc-tout-image-link, a.sfzc-teacher-card-photo, .custom-logo-link, a.skip-link { text-decoration: none; } /* B140 - Drupal renders links inside tables bold; dev rendered them at 400. Colour and text-decoration already matched, so weight is the whole fix. Bare `table a` mirrors Drupal's own selector and is safe here: checked 2026-08-28, no TEC, Gravity Forms or calendar surface on dev contains a table at all, so this reaches imported content tables only. 27 published posts carry one. */ table a { font-weight: 700; } /* B095 - qualified to [href] 2026-07-31. Unqualified, this matched anchors with no href at all, which browsers do not treat as links - so description text wrapped in a bare underlined on hover as though it were clickable. Post 1478 (Online Zendo) carries 40 such anchors, migrated from Drupal, which carries the identical markup AND the same unqualified rule. So this is a deliberate deviation from Drupal, cleared by WebOps 2026-07-31 under the blow-for-blow parity rule rather than taken as an obvious fix. It also hardens the site against any future hrefless anchor, which cleaning up post 1478's content would not. This is the ONLY unqualified a:hover in this file - the other 19 are all class-scoped. Checked before changing it, so the fix is one rule and not a sweep. */ a[href]:hover { text-decoration: underline; } /* ============================================================================= GLOBAL - TEC FONT OVERRIDE TEC ships Helvetica Neue as its default font stack. Override to Source Sans Pro for consistency with site typography. Targets .tribe-common (TEC root scope) and .tribe-events-back (outside .tribe-common on event single). Ref: V151, V157 ============================================================================= */ .tribe-common, .tribe-events-back { --tec-font-family-sans-serif: 'Source Sans Pro', -apple-system, sans-serif; font-family: 'Source Sans Pro', -apple-system, sans-serif; } /* ============================================================================= GLOBAL - HEADING COLORS AND SIZE Drupal: H2 42px, H3 30px, weight 500, dark gray #222, tight bottom margin. Dev default: H2 32px, H3 24px, weight 400, maroon, 20px bottom margin. Elements needing maroon (event labels, TEC headings, contact heading) have specific selectors that override this global rule. Ref: V20-V21, V48-V52, V86-V89, V102, V126, V139-V140 ============================================================================= */ h2, h3 { color: #222; font-weight: 500; margin-bottom: 8px; } h2 { font-size: 42px; } /* h3 carries font-family here and h2 does not, which looks inconsistent and is not. GeneratePress typography sets h1 and h2 to Cormorant Garamond but leaves h3's fontFamily EMPTY, so h3 alone fell through to the Source Sans Pro body font while matching Drupal on size and weight. Verified at source 2026-08-07 in the generate_settings typography array. A fixer reading only this stylesheet cannot see where h2 is set - that is why this note is here. Ref: bug-081. */ h3 { font-size: 30px; font-family: 'Cormorant Garamond', Georgia, serif; /* Drupal renders content h3 at 27px leading, measured live 2026-08-07; GP's default gave us 36px. WebOps read the 9px difference by eye as the heading being "a tiny bit too heavy" - and the letters are in fact identical (same face, same width to 0.04px), so what he was seeing is the taller line box, not more ink. The theme already uses this exact value on the same 30px Cormorant for teacher touts (2026-07-21, independently measured), so 27px is the established number here and this rule brings the general case in line with it. Ref: bug-081. */ line-height: 27px; } /* h4 had no rule in this stylesheet AND no GeneratePress typography entry, so unlike h3 it was wrong on all three properties, not just family. Drupal renders content h4 at Cormorant Garamond 21px/500; dev read Source Sans Pro 24px/400. Both measured on the same page - /about/mission-and-vision vs its dev twin (post 1442) - 2026-08-07. Event headings are NOT affected: `.tribe-events h4` (~line 1290) is 0,1,1 against this rule's 0,0,1 and keeps its own family. That is the whole of bug-081's "h4 is already Cormorant on teacher pages" caveat - those h4s sit inside the events wrapper. Content h4 outside it, ~32 pages, is what moves here. Ref: bug-081. */ h4 { font-size: 21px; font-weight: 500; font-family: 'Cormorant Garamond', Georgia, serif; /* Leading and bottom gap also measured off Drupal 2026-08-07: 18.9px (= 0.9 x 21px) and 8px. Ours read 27px and 20px - the 20px is GeneratePress's default, which this rule had not been overriding. The 12px surplus below the heading is what WebOps flagged at eyes-on as "too spaced from the paragraph below it". Ref: bug-081. */ line-height: 18.9px; margin-bottom: 8px; } /* ============================================================================= GLOBAL - H1 PAGE TITLE SIZE/WEIGHT Drupal renders H1 at 48px/500wt. GP Customizer default is 40px/400wt. CSS override to match Drupal. Event title H1 already handled by .tribe-events-single-event-title rule. Ref: V38-V41, V65-V66, V82-V83, V176-V177, V238-V240 ============================================================================= */ h1 { font-size: 48px; font-weight: 500; /* 1.05 chosen by WebOps 2026-07-21 from five values rendered live on the page: Drupal's 0.9 read as too crowded, the previous 1.2 as too airy. Sits near the midpoint. On a phone, where the longest titles wrap to six or seven lines, this recovers ~44px on PG178 (346px -> 302px). NOTE h2 computes 1.2 as well but has no explicit rule here; it was not part of the decision and is deliberately left alone. */ line-height: 1.05; margin-bottom: 8px; /* GP applies -webkit-font-smoothing: antialiased globally, which thins text and makes H1 read lighter than Drupal at the same 48px/500. Both sides synthesize weight 500 from a 400 face, so the weight itself is not the difference - the smoothing is. Override to auto (subpixel) to match Drupal, same remedy already applied to nav links (line ~253), dropdown links, the teacher name h2, and footer copyright. Supersedes the auth-style.md note that tested weights 525-600; those compensated for the thinning rather than removing it. */ -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* ============================================================================= GLOBAL - DESCRIPTION/INTRO TEXT Drupal renders page description/intro fields in Cormorant Garamond 26px. Dev renders them as body text (Source Sans Pro 16-17px). Ref: V17-V19, V67-V68, V90-V91 ============================================================================= */ .sfzc-landing-description, .sfzc-landing-description p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 1.7; color: #222; } /* ============================================================================= GLOBAL - BLOCKQUOTE STYLING Drupal: Cormorant Garamond 22px, gray bg, maroon left border. Dev default: Source Sans Pro, italic, transparent, faint border. V16 (missing Homepage Suzuki quote) is content work, not CSS. Drupal also draws a large grey opening quote mark via blockquote::before, which the V42-V46 pass never carried across - added 2026-08-02. Its three rules are Drupal's own, verbatim, and unscoped there: verified identical on page, teacher and event templates. blockquote p { display: inline } is what tucks the 88px mark into the first line instead of parking it above. Ref: V42-V46 ============================================================================= */ blockquote { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-style: normal; line-height: 1.6; color: #222; background-color: #efefef; border-left: 3px solid #8b0e04; padding: 1.25rem 1.5rem; margin: 1.5rem 0; quotes: "\201C" "\201D" "\2018" "\2019"; } blockquote::before { color: #ccc; content: open-quote; font-size: 4em; line-height: 0.1em; margin-right: 0.1em; vertical-align: -0.4em; font-weight: 400; } blockquote p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; font-style: normal; line-height: 1.6; color: #222; display: inline; } /* The Events Calendar emits a closing quote mark Drupal does not. Suppress it so the decorated opening mark is not left facing an undecorated partner. Second of the two divergences in B094; that item's text-size half is open. */ .tribe-events-content blockquote::after { content: none; } /* TEC sets this to inline-block, which takes the whole line box and pushes the quote mark onto its own line above the text - at every viewport width, not just narrow ones. Drupal uses inline and the text sits beside the mark. Same specificity as TEC's rule; ours wins on source order, so no !important. */ .tribe-events-content blockquote p { display: inline; } /* .sfzc-landing-description p (0-1-1) outspecifies blockquote p (0-0-2), so quote text inside a landing-page description renders 26px/1.7 where Drupal renders 22px. Reaches posts 1625 (Home) and 1627 (Ways To Support) - the only two with a blockquote in that field. Re-scoped at 0-1-2 rather than raising blockquote p with !important, per B094: the neighbouring rules are plain-specificity and should stay comparable. Line-height follows blockquote p rather than Drupal's 34px, so this introduces no third value. */ .sfzc-landing-description blockquote p { font-size: 22px; line-height: 1.6; } /* Same collision on TEC single-event pages, and this one is B094's original subject: .tribe-events-single-event-description p (0-1-1) outspecifies blockquote p (0-0-2), so quote text renders Source Sans Pro 16px inside a container styled for Cormorant Garamond 22px. Drupal renders 22px serif. Re-scoped at 0-1-2 to match the two rules above; deliberately not !important, so the neighbouring blockquote rules stay comparable in specificity. */ .tribe-events-single-event-description blockquote p { /* !important is required here and is not a shortcut: the competing declaration at .tribe-events-single-event-description p is itself `font-family: ... !important` (it has to be, to beat TEC's own stack), so no amount of specificity beats it without matching the flag. Size, line-height and colour are NOT !important there, which is why they are plain here. Scoped to blockquotes only, so the event body text keeps Source Sans Pro exactly as before. */ font-family: 'Cormorant Garamond', Georgia, serif !important; font-size: 22px; line-height: 1.6; color: #222; } /* ============================================================================= TEACHER SINGLE - ROLE SUBTITLE Drupal renders role at Cormorant Garamond 30px as a prominent subtitle below the teacher name. Dev renders it as plain body text (16px). Ref: V110-V111 ============================================================================= */ .sfzc-teacher-role { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; line-height: 1.3; color: #222; margin: 0; } /* ============================================================================= GLOBAL - HIDE H1 ON LANDING PAGES Drupal collapses/hides H1 on these pages. WordPress renders it visibly. Hide via CSS to match Drupal. H1 remains in DOM for accessibility. Ref: V15, V64, V81, V125, V217 ============================================================================= */ /* Gap between the page title and the start of the content. Drupal renders 36px; we rendered 8px, which WebOps called out at eyes-on 2026-08-08 as the most clearly wrong of the three spacing faults he found. It sits on the TITLE's own bottom margin rather than on `.sfzc-page-content`, and both halves of that matter: - `.sfzc-page-content > *:first-child { margin-top: 0 }` (~line 2185) explicitly zeroes the first child's top margin, so a margin-top approach is cancelled out. - The title is `display: none` on the home page, every landing template, and every practice_center single (rules immediately below). A container-based gap would open dead space at the top of pages that show no title at all. A hidden element generates no box, so putting the space here leaves those pages untouched - verified on City Center, where content moved 0px with this rule active. 36px measured off live Drupal on /about/mission-and-vision, 2026-08-08. Ref: bug-081. */ .sfzc-page-title { margin-bottom: 36px; } /* Homepage */ .home .entry-title, .home .page-title, .home .sfzc-page-title { display: none; } /* All landing-template pages (Home, Offerings, Online, Ways To Support, Practice Centers, Practice Sessions and Dharma Talks, News & Blogs). Drupal renders their H1 as text-invisible on every one - verified against live Drupal 2026-07-11. Replaces the stale per-ID rule for the Practice Centers page (was .page-id-347; the page is 1629 since the re-import). */ .page-template-template-landing-page .entry-title, .page-template-template-landing-page .page-title, .page-template-template-landing-page .sfzc-page-title { display: none; } /* All practice center singles */ .single-practice_center .entry-title, .single-practice_center .page-title, .single-practice_center .sfzc-page-title { display: none; } /* Calendar / Events (TEC archive) */ .tribe-events .tribe-events-header__title { display: none; } /* Archive breadcrumb - deliberately larger than surrounding text so it is noticed. TEC ships var(--tec-font-size-2) = 14px. Matching the site breadcrumb's 16px was tried first and was not perceptible - it has to sit ABOVE the 16px site breadcrumb and 14px body copy to read as more than incidental, while staying well below the 48px page title. This trail is the only element on the archive carrying a link back to /calendar/. Set 2026-09-08. */ .tribe-events .tribe-events-c-breadcrumbs__list { font-size: 20px; font-weight: 500; } /* The "Events" link in that trail. Maroon #8b0e04 per WebOps 2026-09-08 - a deliberate departure from the #444 breadcrumb convention documented at auth-style.md:136, chosen so the link reads as a link. Hover #6a0b03 (line 44). border-bottom:0 kills a DOUBLE underline on hover: TEC's common-full.css gives .tribe-common-anchor a transparent 2px border-bottom that turns solid on hover, while our own sitewide `a[href]:hover { text-decoration: underline }` draws a second one. Both fired. The site's own underline is the one kept. */ .tribe-events .tribe-events-c-breadcrumbs__list-item-link { color: #8b0e04; border-bottom: 0; } .tribe-events .tribe-events-c-breadcrumbs__list-item-link:hover, .tribe-events .tribe-events-c-breadcrumbs__list-item-link:focus, .tribe-events .tribe-events-c-breadcrumbs__list-item-link:active { color: #6a0b03; border-bottom: 0; } /* ============================================================================= GLOBAL - CONTAINER WIDTH Drupal uses a 1140px container with 32px side padding. GP defaults to 1200px with no padding. Override to match Drupal's content margins. Affects the main content wrapper sitewide. ============================================================================= */ .grid-container { max-width: 1140px; padding-left: 32px; padding-right: 32px; } /* ============================================================================= HEADER - LOGO ALIGNMENT GP Header Element renders the Site Logo block outside the page container. Constrain to match Drupal container (max-width 1140px, centered, 32px side padding). ============================================================================= */ /* ============================================================================= HEADER - LOGO + SEARCH ROW GP Header Element wraps the Site Logo and Search blocks in a Gutenberg flex group (.sfzc-header-row). Container width and padding live here. The flex layout (space-between, center) is handled by Gutenberg's inline styles on the group block. ============================================================================= */ .sfzc-header-row { max-width: 1140px; margin-left: auto; margin-right: auto; padding: 26px 32px; } .wp-block-site-logo { /* Logo sizing handled by Gutenberg width attribute */ flex-shrink: 0; } /* --- Navigation alignment and styling --- */ /* Top-level items: verified against Drupal 2026-03-09. No hover state on top-level links (hover behavior is on dropdown items only). Drupal computed: 16px/400. GP applies -webkit-font-smoothing: antialiased globally, which thins text. Override to auto (subpixel rendering) on nav links to match Drupal's heavier appearance at 17px/500. */ .wp-block-navigation { max-width: 1140px; margin-left: auto; margin-right: auto; padding: 1.75rem 32px 0.5rem 32px; } /* The menu list carries core's wp-block-navigation class as well as the nav, so the padding rule above (and its 0.5rem version below 1200) has always matched the list too. Core 7.0.4 cancelled that with `.wp-block-navigation ul { padding: 0 }` (0,1,1); 7.1 dropped the reset, and the list took the band's padding - desktop band 125px against the 89px verified under bug-131, open phone menu 8px lower with its chevrons 32px in. This restores 7.0.4's result on the one list that carries the class. bug-219, 2026-09-26. */ ul.wp-block-navigation { padding: 0; } .wp-block-navigation a { text-transform: uppercase; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 16px; font-weight: 400; color: #222 !important; text-decoration: none; letter-spacing: normal; line-height: 1.3; padding: 16px 0; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .wp-block-navigation .wp-block-navigation-item { margin-right: 32px; } /* No hover color change on top-level nav - matches Drupal behavior */ .wp-block-navigation a:hover { color: #222 !important; } /* ============================================================================= NAVIGATION - DROPDOWN MENUS Matches Drupal mega menu dropdown: white panel, soft shadow, border, dark text links with maroon underline on hover. Verified against screenshots 2026-03-09. Drupal uses .tbm-submenu; WP uses .wp-block-navigation__submenu-container. ============================================================================= */ /* --- Dropdown panel --- */ .wp-block-navigation__submenu-container { background-color: #fff !important; border: 1px solid rgba(0, 0, 0, 0.2) !important; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); padding: 8px 16px !important; border-radius: 0 !important; margin-top: 0; } /* --- Dropdown panel width: only once it is actually open (bug-074) --- WordPress core sets `width: 0` on a CLOSED submenu specifically so a hidden dropdown cannot extend the page. An unconditional `min-width: 240px` on the panel defeated that: the closed panel stayed 240px wide, and being absolutely positioned at left 546 its right edge landed at 786 - 18px past a 768px viewport. Every page then scrolled sideways at tablet width, on every page of the site; Drupal did not. Measured on PG13/PG178/PG221/PG44/ TR1, 768 vs 786 every time. These selectors mirror core's own show conditions, so the panel keeps its 240px minimum whenever it is visible and collapses to core's zero width when it is not. */ .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container, .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container, .wp-block-navigation .has-child.open-always > .wp-block-navigation__submenu-container, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { min-width: 240px; } /* --- Dropdown links: override top-level nav styles --- */ .wp-block-navigation__submenu-container .wp-block-navigation-item__content { text-transform: none !important; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 16px !important; font-weight: 400 !important; color: #222 !important; text-decoration: none !important; letter-spacing: normal !important; padding: 8px 4px !important; display: block; line-height: 1.3; border-bottom: 1px solid transparent; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* --- Dropdown link hover: gray bg + thin maroon underline --- */ .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background-color: #efefef !important; color: #222 !important; border-bottom: 1px solid #8b0e04 !important; } /* --- Remove WP default submenu item margins --- */ .wp-block-navigation__submenu-container .wp-block-navigation-item { margin-right: 0 !important; } /* ============================================================================= BREADCRUMBS Yoast SEO breadcrumbs via GP Hook Element. Matches Drupal: gray links, no underline, 16px text. Constrained to content width. Ref: V33-V37, V63, V80, V105, V122-V124, V155, V237 ============================================================================= */ .sfzc-breadcrumbs { max-width: 1140px; margin: 0 auto; padding: 0.75rem 0 0.5rem 0; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 16px; color: #222; line-height: 1.4; } .sfzc-breadcrumbs a { color: #444; text-decoration: none; } .sfzc-breadcrumbs a:hover { color: #222; text-decoration: underline; } .sfzc-breadcrumbs .sfzc-breadcrumb-sep { color: #999; margin: 0 0.5rem; } .home .sfzc-breadcrumbs { display: none; } /* ============================================================================= FILTER BAR - BRAND STYLING Vertical layout. Overrides TEC defaults for SFZC color palette, typography, and flat design (square corners, no shadows). Tokens: auth-style.md Note: TEC uses .tribe-common-b1 and .tribe-common-b2--min-medium utility classes on filter toggles. Parent .tribe-events prefix needed for specificity. ============================================================================= */ /* --- Container --- */ .tribe-events .tribe-filter-bar.tribe-filter-bar--vertical { border-bottom: none; padding: 1rem 0; margin-bottom: 1.5rem; } /* --- Overlay mode: TEC drops the filter bar to position: absolute, z-index: 9 whenever the VIEW CONTAINER is under 768px. That switch is a JS-applied class (.tribe-common--breakpoint-medium), not a media query, and the container runs 64px narrower than the viewport here - so key off the class, not the viewport. Needs an opaque background so filter labels don't blend into event text. --- */ .tribe-events:not(.tribe-common--breakpoint-medium) .tribe-filter-bar.tribe-filter-bar--vertical { background-color: #fff; padding: 1rem; border: 1px solid #eee; } /* --- Filter toggle labels (accordion headers) --- */ .tribe-events .tribe-filter-bar .tribe-filter-bar-c-filter__toggle.tribe-common-b1 { font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 0.875rem; font-weight: 600; color: #212529; text-transform: uppercase; letter-spacing: 0.02em; } .tribe-events .tribe-filter-bar .tribe-filter-bar-c-filter__toggle:hover, .tribe-events .tribe-filter-bar .tribe-filter-bar-c-filter__toggle:focus { color: #8b0e04; } /* --- Toggle icon (plus/minus) color --- */ .tribe-events .tribe-filter-bar-c-filter__toggle-icon svg { fill: #8b0e04; } /* Breathing room between icon and filter border */ .tribe-events .tribe-filter-bar .tribe-filter-bar-c-filter__toggle-icon { padding-right: 6px; } /* --- Select2 dropdowns (category, location, etc.) --- */ .tribe-filter-bar .select2-container--default .select2-selection--single, .tribe-filter-bar .select2-container--default .select2-selection--multiple { border-radius: 0; border-color: #ccc; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 0.875rem; } .tribe-filter-bar .select2-container--default .select2-selection--single:hover, .tribe-filter-bar .select2-container--default .select2-selection--multiple:hover { border-color: #8b0e04; } /* Select2 dropdown panel (open) */ .tribe-filter-bar .select2-container--default .select2-dropdown { border-radius: 0; border-color: #ccc; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 0.875rem; } /* Select2 highlighted option */ .tribe-filter-bar .select2-container--default .select2-results__option--highlighted { background-color: #8b0e04; color: #fff; } /* Select2 selected option */ .tribe-filter-bar .select2-container--default .select2-results__option--selected { background-color: #f8f8f8; color: #212529; } /* --- Done button (primary action) --- */ .tribe-filter-bar__action-done.tribe-common-c-btn-border { border-radius: 0; border-color: #8b0e04; color: #8b0e04; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .tribe-filter-bar__action-done.tribe-common-c-btn-border:hover, .tribe-filter-bar__action-done.tribe-common-c-btn-border:focus { background-color: #8b0e04; border-color: #8b0e04; color: #fff; } /* --- Date inputs (Date From / Date To) --- */ .tribe-filter-bar .tribe-filter-bar-c-filter input[type="text"], .tribe-filter-bar .tribe-filter-bar-c-filter input[type="date"] { border-radius: 0; border-color: #ccc; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 0.875rem; } .tribe-filter-bar .tribe-filter-bar-c-filter input[type="text"]:focus, .tribe-filter-bar .tribe-filter-bar-c-filter input[type="date"]:focus { border-color: #8b0e04; box-shadow: 0 0 0 1px rgba(139, 14, 4, 0.2); outline: none; } /* ============================================================================= LIST VIEW - EVENT META LINE Teacher names + practice center below event titles in list view. ============================================================================= */ .tribe-events .tribe-events-calendar-list__event-row .sfzc-event-list-meta { font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 0.875rem; color: #666; margin-top: 4px; line-height: 1.4; } .sfzc-event-list-meta a.sfzc-event-list-teacher { color: #8b0e04; text-decoration: none; } .sfzc-event-list-meta a.sfzc-event-list-teacher:hover { color: #6a0b03; text-decoration: underline; } .sfzc-event-list-meta .sfzc-event-list-location { color: #666; } .sfzc-event-list-meta .sfzc-meta-sep { color: #999; margin: 0 0.15rem; } /* ============================================================================= UPCOMING EVENTS BLOCK Reusable event list for sidebars, practice center pages, and shortcode use. Matches sidebar box pattern from auth-style.md. ============================================================================= */ .sfzc-upcoming-events { font-family: 'Source Sans Pro', -apple-system, sans-serif; } .sfzc-upcoming-events-heading { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 400; color: #212529; margin: 0 0 0.75rem 0; } .sfzc-upcoming-events .sfzc-upcoming-events-list { list-style: none; padding: 0; margin: 0; } .sfzc-upcoming-events-item { display: flex; justify-content: space-between; align-items: baseline; /* wrap so the meta line below drops under the title rather than competing with it for width on the same row (B082) */ flex-wrap: wrap; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid #eee; font-size: 0.9rem; line-height: 1.4; } /* Start Time / Location / date, the three fields Drupal's embedded view carries. flex-basis 100% forces a full-width second line inside the wrapping item. */ .sfzc-upcoming-events-meta { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.15rem 1rem; margin-top: 0.1rem; } .sfzc-upcoming-events-time, .sfzc-upcoming-events-location { color: #666; font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; } .sfzc-upcoming-events-item:last-child { border-bottom: none; } .sfzc-upcoming-events-item a { color: #8b0e04; text-decoration: none; flex: 1; min-width: 0; } .sfzc-upcoming-events-item a:hover { color: #6a0b03; text-decoration: underline; } .sfzc-upcoming-events-date { color: #666; font-size: 0.8rem; white-space: nowrap; flex-shrink: 0; } .sfzc-upcoming-events-more { margin-top: 0.75rem; font-size: 0.875rem; } .sfzc-upcoming-events-more a { color: #8b0e04; text-decoration: underline; } .sfzc-upcoming-events-more a:hover { color: #6a0b03; } /* ============================================================================= EVENT SINGLE - TEACHER PROFILE CARDS Matches Drupal layout: circular photo (~100px), linked name, bio excerpt. Cards stack vertically. Graceful placeholder when teacher has no photo. ============================================================================= */ .sfzc-teacher-cards { display: flex; flex-direction: column; gap: 1.25rem; } .sfzc-teacher-card { display: flex; /* Centered, not flex-start, to match Drupal. Measured on live /board-members 2026-08-17: Drupal's row is 112px against a 96px photo and its .teacher-tout a carries align-items:center, which centers the NAME/ROLE block in that space (text starts 29px down, exactly centered) while the photo sits at the row top. Its event-page teacher block - a different Drupal view mode, teaser-long - computes the same value, so this is correct for both callers of sfzc_render_teacher_card(). Ref: bug-129. */ align-items: center; gap: 1rem; } /* --- Photo (circular, 100px) --- */ .sfzc-teacher-card-photo { flex-shrink: 0; width: 100px; height: 100px; border-radius: 50%; display: block; box-shadow: 0px 2px 5px -1px rgb(51, 51, 51); } .sfzc-teacher-card-photo img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; display: block; } /* --- Placeholder (no photo fallback) --- */ .sfzc-teacher-card-placeholder { background-color: #e5e5e5; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0px 2px 5px -1px rgb(51, 51, 51); } .sfzc-teacher-card-initial { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2.25rem; font-weight: 400; color: #666; line-height: 1; } /* --- Info block (name + bio) --- */ .sfzc-teacher-card-info { flex: 1; min-width: 0; } .sfzc-teacher-card-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 500; color: #222; margin: 0 0 0.25rem 0; line-height: 1.2; } .sfzc-teacher-card-name a { color: #222; text-decoration: none; } .sfzc-teacher-card-name a:hover { color: #8b0e04; text-decoration: underline; } .sfzc-teacher-card-bio { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 30px; color: #222; margin: 0; } /* ============================================================================= BUTTONS - SITEWIDE STANDARD Matches Drupal btn-primary: light gray bg, maroon text, square corners, maroon bottom-border on hover. Covers Gutenberg blocks, GP output, ECP buttons, Gravity Forms submit, and template render functions. Source: Drupal .btn-primary computed styles (2026-03-08) ============================================================================= */ /* --- Base button reset (Gutenberg + GP) --- */ .wp-block-button__link, a.wp-block-button__link, .gp-button, a.gp-button, button.gp-button { background-color: #efefef; color: #8b0e04; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-weight: 700; font-size: 16px; line-height: 24px; padding: 7px 15px; border: 1px solid #ccc; border-bottom: 2px solid #bbb; border-radius: 0; text-transform: none; text-decoration: none; white-space: nowrap; display: inline-block; vertical-align: middle; cursor: pointer; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } /* --- Migrated Drupal CTA buttons: bold text for parity (trk-058 / BugHerd #38) --- */ /* The "Register Online" / registration CTA renders from migrated content using the .btn.btn-primary classes (styled elsewhere), which compute font-weight 400. Drupal renders that text bold; this sets weight only, leaving the rest of the look intact. */ .btn.btn-primary, a.btn.btn-primary { font-weight: 700; } /* --- Migrated Drupal buttons: the full box (bug-139) --- Two shapes arrive in imported content and rendered differently. `btn btn-dark` (3 posts) matched nothing here and came out as plain body text. `nav-link button btn btn-primary` (135 posts) picked up GeneratePress's `.button` and did look like a button, but without Drupal's border and at 10px 20px padding rather than 7px 15px. ONE RULE SERVES BOTH. `.btn` ties GP's `.button` on specificity (0,1,0) and wins on source order, because this file loads after main.min.css. That was established by injecting this exact rule into both populations and reading computed styles, not by reasoning about the cascade - see bug-139. `.btn` is free to use: no TEC, Gravity Forms, or any of the 752 stylesheets under wp-content declares a bare `.btn`, and every `.btn` on the front end is imported content markup. Verified 2026-08-28. Colour and text-decoration are deliberately absent - both already match Drupal, colour from the inherited link colour and decoration from the `a.btn` entry in the global link exception block near the top of this file. The `.btn.btn-primary` weight rule above is now redundant for weight, but is left alone: it carries its own trk-058 / BugHerd #38 provenance and setting the same value twice costs nothing. Values measured off live Drupal 2026-08-28. */ .btn { display: inline-block; background-color: #efefef; border: 1px solid #efefef; border-bottom: 2px solid #ccc; border-radius: 0; padding: 7px 15px; font-weight: 700; } .wp-block-button__link:hover, .wp-block-button__link:focus, a.wp-block-button__link:hover, a.wp-block-button__link:focus, .gp-button:hover, .gp-button:focus, a.gp-button:hover, a.gp-button:focus, button.gp-button:hover, button.gp-button:focus { background-color: #efefef; color: #8b0e04; border-bottom: 2px solid #8b0e04; text-decoration: none; } /* --- Utility class for template output (shortcodes, render functions) --- */ .sfzc-btn, a.sfzc-btn { background-color: #efefef; color: #8b0e04; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-weight: 700; font-size: 16px; line-height: 24px; padding: 7px 15px; border: 1px solid #ccc; border-bottom: 2px solid #bbb; border-radius: 0; text-transform: none; text-decoration: none; white-space: nowrap; display: inline-block; vertical-align: middle; cursor: pointer; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .sfzc-btn:hover, .sfzc-btn:focus, a.sfzc-btn:hover, a.sfzc-btn:focus { background-color: #efefef; color: #8b0e04; border-bottom: 2px solid #8b0e04; text-decoration: none; } /* --- Events Calendar Pro: override TEC CSS custom properties --- */ .tribe-events { --tec-color-background-events-bar-submit-button: #efefef; --tec-color-background-events-bar-submit-button-hover: #efefef; --tec-color-background-events-bar-submit-button-active: #efefef; --tec-color-text-events-bar-submit-button: #8b0e04; --tec-color-text-events-bar-submit-button-hover: #8b0e04; --tec-color-text-events-bar-submit-button-active: #8b0e04; --tec-color-button-primary: #efefef; --tec-color-button-primary-hover: #efefef; --tec-color-button-primary-active: #efefef; --tec-color-accent-primary: #8b0e04; --tec-color-accent-primary-hover: #6a0b03; } /* --- Events Calendar Pro buttons --- */ .tribe-events .tribe-events-c-subscribe-dropdown__button, .tribe-events .tribe-common-c-btn, .tribe-events .tribe-common-c-btn-border, .tribe-events .tribe-events-c-search__button, .tribe-events .tribe-events-c-events-bar__search-button { background-color: #efefef; color: #8b0e04; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-weight: 700; font-size: 16px; padding: 7px 15px; border: 1px solid #ccc !important; border-bottom: 2px solid #bbb !important; border-radius: 0 !important; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .tribe-events .tribe-events-c-subscribe-dropdown__button:hover, .tribe-events .tribe-events-c-subscribe-dropdown__button:focus, .tribe-events .tribe-events-c-subscribe-dropdown__button:hover:active, .tribe-events .tribe-common-c-btn:hover, .tribe-events .tribe-common-c-btn:focus, .tribe-events .tribe-common-c-btn-border:hover, .tribe-events .tribe-common-c-btn-border:focus, .tribe-events .tribe-events-c-search__button:hover, .tribe-events .tribe-events-c-search__button:focus, .tribe-events .tribe-events-c-events-bar__search-button:hover, .tribe-events .tribe-events-c-events-bar__search-button:focus { background-color: #efefef !important; color: #8b0e04 !important; border-bottom: 2px solid #8b0e04 !important; } /* --- Events-bar overlay mode: filter toggle tap target + visible label (B023) --- Whenever the VIEW CONTAINER is under 768px, TEC shows the events-bar filter control and collapses it to a 29x29 icon-only button with the "Show filters" word clipped (tribe-common-a11y-visual-hide). That switch is a JS-applied class (.tribe-common--breakpoint-medium), not a media query, and the container runs narrower than the viewport - so key off the class, or the band where the two disagree keeps a 29px control. Enlarge the tap target to >=44px and un-clip the label so it reads beside the icon. Search button gets the same tap-target floor (icon-only is acceptable there). --- */ .tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-c-events-bar__filter-button, .tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-c-events-bar__search-button { min-width: 44px; min-height: 44px; } /* Filter toggle: icon + label inline, room to breathe */ .tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-c-events-bar__filter-button-container, .tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-c-events-bar__filter-button { width: auto; } .tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-c-events-bar__filter-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; } /* Reveal the screen-reader-only "Show filters" / "Hide filters" label */ .tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-c-events-bar__filter-button-text { position: static; width: auto; height: auto; margin: 0; padding: 0; clip: auto; clip-path: none; overflow: visible; border: 0; white-space: nowrap; word-wrap: normal !important; } /* --- Calendar search: "Clear search" link inside the keyword box (trk-219) --- Rendered by tribe/events/v2/components/events-bar/search/keyword.php only when a keyword is in effect. Sits at the right end of the box; the input gets matching right padding so a long term never runs under it. --- */ .tribe-events .tribe-events-c-search__input-control--keyword.sfzc-search--has-clear { position: relative; } .tribe-events .sfzc-search--has-clear .tribe-events-c-search__input { padding-right: 7.5em; } .tribe-events .sfzc-search-clear { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); color: #8b0e04; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 0.875rem; line-height: 1.2; text-decoration: none; white-space: nowrap; } .tribe-events .sfzc-search-clear:hover, .tribe-events .sfzc-search-clear:focus { text-decoration: underline; } /* Under the medium breakpoint TEC moves the magnifier to the right end of the box (same JS class switch as the B023 block above), so step the link clear of it. */ .tribe-events:not(.tribe-common--breakpoint-medium) .sfzc-search-clear { right: 28px; } /* --- Filter Bar Clear button (text-only, overrides ECP btn-border !important) --- */ .tribe-filter-bar__action-clear.tribe-common-c-btn-border--alt, .tribe-filter-bar__selected-filters-clear-button.tribe-common-c-btn-border--alt { background-color: #efefef !important; border: none !important; border-bottom: none !important; border-radius: 0 !important; color: #666; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 0.875rem; } .tribe-filter-bar__action-clear.tribe-common-c-btn-border--alt:hover, .tribe-filter-bar__action-clear.tribe-common-c-btn-border--alt:focus, .tribe-filter-bar__selected-filters-clear-button.tribe-common-c-btn-border--alt:hover, .tribe-filter-bar__selected-filters-clear-button.tribe-common-c-btn-border--alt:focus { color: #8b0e04; background-color: transparent !important; border: none !important; border-bottom: none !important; } .tribe-filter-bar__action-clear:hover svg path, .tribe-filter-bar__action-clear:focus svg path, .tribe-filter-bar__selected-filters-clear-button:hover svg path, .tribe-filter-bar__selected-filters-clear-button:focus svg path { stroke: #8b0e04 !important; } /* --- Select2 option list items (all filter dropdowns) --- */ /* Adds breathing room and visual definition to dropdown options. Applies to Teacher, Event Category, Practice Location, etc. */ .tribe-filter-bar .select2-results__option { padding: 7px 12px !important; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 0.875rem; line-height: 1.5; } /* Light separator between options */ .tribe-filter-bar .select2-results__option + .select2-results__option { border-top: 1px solid rgba(0, 0, 0, 0.06); } /* Results container - subtle background and left accent for definition */ .tribe-filter-bar .select2-results { background-color: #f0f0f0; border-left: 1.5px solid #ccc; } /* Override highlighted option padding (already has bg color from above) */ .tribe-filter-bar .select2-results__option--highlighted { background-color: #8b0e04 !important; color: #fff !important; } /* --- Tighten vertical spacing between selection, search, and results --- */ .tribe-filter-bar .select2-selection--single { margin-bottom: 0 !important; } .tribe-filter-bar .select2-search--dropdown { margin: 2px 0 2px !important; } /* --- Select2 search input: placeholder styling --- */ .tribe-filter-bar .select2-search__field { padding-left: 26px !important; } .tribe-filter-bar .select2-search__field::placeholder { color: #999; font-style: italic; font-size: 0.8125rem; opacity: 1; } /* --- Filter toggle labels: breathing room on left --- */ .tribe-events .tribe-filter-bar .tribe-filter-bar-c-filter__toggle-text { padding-left: 4px; } /* Tighten the expanded filter toggle area */ .tribe-events .tribe-filter-bar .tribe-filter-bar-c-filter__toggle { padding-top: 8px; padding-bottom: 8px; } /* Fix overlap: container's negative margin pulls it into the toggle border */ .tribe-events .tribe-filter-bar .tribe-filter-bar-c-filter__container { margin-top: 0 !important; } /* --- Gravity Forms submit button --- */ .gform_wrapper input[type="submit"], .gform_wrapper .gform_footer .gform_button, .gform_wrapper .gform_page_footer .gform_button { background-color: #efefef; color: #8b0e04; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-weight: 700; font-size: 16px; line-height: 24px; padding: 7px 15px; border: 1px solid #ccc; border-bottom: 2px solid #bbb; border-radius: 0; text-transform: none; cursor: pointer; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .gform_wrapper input[type="submit"]:hover, .gform_wrapper input[type="submit"]:focus, .gform_wrapper .gform_footer .gform_button:hover, .gform_wrapper .gform_footer .gform_button:focus, .gform_wrapper .gform_page_footer .gform_button:hover, .gform_wrapper .gform_page_footer .gform_button:focus { background-color: #efefef; color: #8b0e04; border-bottom: 2px solid #8b0e04; } /* ============================================================================= ECP TYPOGRAPHY ENFORCEMENT TEC V2 PHP (legacy) templates render the event single title and navigation inside .tribe-events-pg-template > #tribe-events-content, which is NOT a descendant of .tribe-events. Selectors must target this separate DOM branch. The .tribe-events wrapper only contains the DETAILS sidebar, subscribe dropdown, and related events. Ref: auth-style.md type scale, subtask 3 items 3-4 ============================================================================= */ /* --- Event single title (H1) - inside #tribe-events-content, not .tribe-events --- */ /* --- Event single container width --- TEC sets max-width: 1048px + 20px padding on .tribe-events-pg-template. Override to let content fill the parent container (1076px) with 16px padding = 1044px, matching Drupal. Ref: V159 */ .tribe-events-pg-template, #tribe-events-pg-template { max-width: none; padding-left: 16px; padding-right: 16px; } .tribe-events-single-event-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 500 !important; font-size: 48px !important; color: #222 !important; line-height: 0.9; } /* --- Back link ("All Events") --- */ .tribe-events-back a { color: #8b0e04 !important; text-decoration: underline; } .tribe-events-back a:hover { color: #6a0b03 !important; } /* --- Headings inside #tribe-events-content (date/time, section labels) --- */ #tribe-events-content h2, #tribe-events-content h3 { font-family: 'Cormorant Garamond', Georgia, serif !important; color: #8b0e04; } /* --- DETAILS sidebar section titles (inside .tribe-events wrapper) --- */ .tribe-events .tribe-events-meta-group .tribe-events-single-section-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 400; color: #8b0e04; } /* --- Related Events heading (inside .tribe-events wrapper) --- */ .tribe-events .tribe-related-events-title, .tribe-events .tribe-events-related-events-title { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 400; color: #8b0e04; } /* Hide TEC default placeholder calendar icon on related events. Events don't have featured images; TEC shows a large placeholder inside .tribe-related-events-thumbnail. Hide the entire thumbnail wrapper so the event info (title + date) renders cleanly. */ .tribe-related-events .tribe-related-events-thumbnail:has(img[src*="tribe-related-events-placeholder"]) { display: none; } /* --- Related event titles: larger, no underline, dark with maroon hover --- */ .tribe-related-events .tribe-related-events-title a { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-weight: 600; color: #222 !important; text-decoration: none !important; } .tribe-related-events .tribe-related-events-title a:hover { color: #8b0e04 !important; } /* Tighten date-to-title gap in related event cards */ .tribe-related-events .tribe-event-date-start, .tribe-related-events .tribe-event-date-end { margin-bottom: 0 !important; } /* Remove TEC default gray background and border on related event items; replace with lighter card styling and internal padding for separation. */ .tribe-related-events li { background-color: #f8f8f8 !important; border: 1px solid #eee !important; padding: 1rem !important; } .tribe-related-events .tribe-related-events-title { margin-bottom: 0.25rem; line-height: 1.25; } /* --- List view event titles (inside .tribe-events wrapper) --- Drupal: dark text, turns maroon on hover. TEC renders these as H4 with bold sans-serif defaults. Override to Cormorant Garamond, dark, normal weight, with maroon hover matching sitewide link behavior. */ .tribe-events .tribe-events-calendar-list__event-title, .tribe-events .tribe-events-calendar-list__event-title a, .tribe-events .tribe-common-h6--min-medium a { font-family: 'Cormorant Garamond', Georgia, serif !important; font-weight: 600 !important; color: #222; text-decoration: none; } .tribe-events .tribe-events-calendar-list__event-title a:hover, .tribe-events .tribe-common-h6--min-medium a:hover { color: #8b0e04; } /* Mobile: TEC shrinks titles to 16px, too close to 14px meta text. Bump to 20px for clear visual hierarchy on small screens. */ @media (max-width: 767px) { .tribe-events .tribe-events-calendar-list__event-title, .tribe-events .tribe-events-calendar-list__event-title a { font-size: 20px !important; line-height: 1.25 !important; } } /* --- Catch-all for headings inside .tribe-events wrapper --- */ .tribe-events h1, .tribe-events h2, .tribe-events h3, .tribe-events h4 { font-family: 'Cormorant Garamond', Georgia, serif; } .tribe-events h2, .tribe-events h3 { color: #8b0e04; } /* --- SFZC ACF field labels on event single --- */ /* Broadened from the .sfzc-event-acf-upper-only scope to all event field labels so the standalone "Description" heading matches "Registration Information" et al. Without this it inherits the red serif .tribe-events h3 styling; now every event field label renders uniform black / bold / 20px sans-serif for Drupal parity. (trk-059) */ #tribe-events-content .sfzc-event-field-label { font-family: 'Source Sans Pro', -apple-system, sans-serif !important; font-weight: 700 !important; color: #222 !important; font-size: 20px !important; } /* ============================================================================= EVENT SINGLE - META HEADER BLOCK Compact metadata between title and description: Teachers, Practice Center, Date/Time, Event Type. Matches Drupal's bold-label: value layout. ============================================================================= */ .sfzc-event-meta-header { margin: 40px 0 1.5rem; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 20px; line-height: 1.04; color: #222; } .sfzc-meta-row { margin-bottom: 12px; } .sfzc-meta-label { font-weight: 700; } .sfzc-event-meta-header a { color: #8b0e04; text-decoration: underline; } .sfzc-event-meta-header a:hover { color: #6a0b03; text-decoration: underline; } /* ============================================================================= EVENT SINGLE - HIDE DUPLICATE DETAILS BOX ECP renders a DETAILS sidebar with start/end dates and category that duplicates the meta header block above. Hidden to avoid redundancy. The "Add to calendar" button is preserved (separate element). ============================================================================= */ .tribe-events-single .tribe-events-event-meta { display: none; } /* --- Event single description body text --- */ .tribe-events-single-event-description { font-family: 'Source Sans Pro', -apple-system, sans-serif !important; font-size: 16px; line-height: 25px; color: #222; } .tribe-events-single-event-description p { font-family: 'Source Sans Pro', -apple-system, sans-serif !important; font-size: 16px; line-height: 25px; color: #222; } /* Event description body links in SFZC bordeaux (trk-059). Scoped to the event description body so global link styling elsewhere is untouched. GeneratePress paints these links near-black via -webkit-text-fill-color, which overrides `color` for the rendered fill, so both properties are set. Hover matches the meta-header link convention above. */ .tribe-events-single-event-description a { color: #8b0e04 !important; -webkit-text-fill-color: #8b0e04 !important; border-bottom-color: #8b0e04 !important; } .tribe-events-single-event-description a:hover { color: #6a0b03 !important; -webkit-text-fill-color: #6a0b03 !important; border-bottom-color: #6a0b03 !important; } /* --- Reorder event single sections --- */ /* TEC renders "Add to calendar" between description and our ACF fields. Flexbox ordering on the parent puts sections in correct visual order: meta header, description, ACF fields, add-to-calendar, related events. */ .tribe-events-single > div.tribe_events { display: flex; flex-direction: column; overflow: visible; } .sfzc-event-acf-upper { order: 1 !important; } .tribe-events-single > div.tribe_events > .tribe-events.tribe-common { order: 2 !important; } .sfzc-event-acf-teachers { order: 3 !important; margin-top: 2rem; margin-bottom: 3rem; } .tribe-events-related-events-title { order: 5 !important; } .tribe-related-events { order: 6 !important; } /* Add to Calendar dropdown: constrain width so the panel sizes to its content instead of stretching toward the page edge, and stays inside the viewport on narrow screens. (trk-057 / BugHerd #37) */ .tribe-events-c-subscribe-dropdown__content { max-width: min(280px, calc(100vw - 32px)); width: max-content; } /* --- Past-event notice accent --- */ /* TEC renders "This event has passed." inside .tribe-events-notices on past event single pages. Restores the left-border maroon accent (lost from the March 14 session) to match the site blockquote accent convention. (B02) */ .tribe-events-notices { background-color: #efefef; border-left: 3px solid #8b0e04; padding: 1rem 1.5rem; margin: 0 0 1.5rem; } .tribe-events-notices ul { margin: 0; padding: 0; list-style: none; } .tribe-events-notices li { margin: 0; color: #222; } /* ============================================================================= LIST VIEW - CARD DENSITY Tightens ECP list view card spacing for a more compact layout. Reduces gap between cards, trims excerpt height, and tightens padding. ============================================================================= */ .tribe-events-calendar-list__event-row { margin-top: 20px !important; margin-bottom: 16px !important; } .tribe-events-calendar-list__event-description { margin-top: 8px !important; } .tribe-events-calendar-list__event-description p { font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* --- B101: the read-more sits outside the clamp, so exempt it from the clamp --- */ /* inc/events.php emits the anchor in its own

after the blurb paragraph, because inside it the clamp above deleted it whenever the text filled three lines - which at a 900px viewport was every event on the page. This selector is 0-2-1 against the 0-1-1 above, so it wins without !important. It must exist: the rule above matches ANY p inside the description, this one included, and -webkit-box would otherwise apply to the link too. */ .tribe-events-calendar-list__event-description p.sfzc-blurb-more { display: block; -webkit-line-clamp: none; overflow: visible; margin: 4px 0 0; font-size: 14px; line-height: 1.4; } /* Give the read-more the site link colour. It was inheriting a GeneratePress default (#141827) that appears nowhere else in this stylesheet, which is why it did not read as a link - it was the one link on the row never given the link colour. auth-style.md:43 specifies #8b0e04 for text links, and the teacher link in the same row already renders it. No resting underline, deliberately: auth-style.md:135 and :200 record that this site's links carry colour and not an underline, matching Drupal. The unqualified `a:hover` at :87 supplies the underline on hover. -webkit-text-fill-color is REQUIRED, not belt-and-braces. GP paints these links with it and it beats `color` outright - established in T059 on 2026-07-16 on this same surface, and confirmed here by measurement before this rule was written. */ .tribe-events-calendar-list__event-description p.sfzc-blurb-more .read-more { color: #8b0e04; -webkit-text-fill-color: #8b0e04; } /* Hide TEC native date line below title - replaced by meta header Date/Time row */ .tribe-events-schedule.tribe-clearfix { display: none; } /* ============================================================================= TEACHER SINGLE TEMPLATE Circular profile photo floated right (~220px, matching Drupal proportions). GP dynamic content template uses .content-area (not .inside-article), so container override targets that element. Moved from Additional CSS to child theme, with layout adjustments for GP container alignment. ============================================================================= */ /* Teacher name - override global maroon h2 color */ .single-teacher h2.gb-text { color: #111; font-weight: 600; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Circular profile photo, floated right */ .single-teacher .dynamic-meta-image { float: right; border-radius: 50%; width: 288px; height: 288px; object-fit: cover; /* B211 - do NOT change to center. Measured against Drupal across the 44 taller-than-wide portraits 2026-09-16: center top matches on 6 of 8 sampled, and center decapitates Letitia Bartlett, Zenshin Greg Fain and Ann Averbach. The residual difference is Drupal's per-image focal point, which no single value closes. */ object-position: center top; /* B211 - right margin was 0, so the photo sat flush against the content column edge where Drupal's sits 16px inside it. Both columns measure 1044px, so the containers were already right; this was the whole horizontal difference. Drupal's left margin is 25px against this 16px - 9px still differs there. */ margin: 0 16px 16px 16px; display: block; } /* Page layout - GP dynamic content templates don't use .inside-article. The content chain is .grid-container > .site-content > .content-area > .site-main > article, all inheriting GP's 640px content width. Override to match Drupal container (1140px, 32px side padding). */ .single-teacher .content-area { max-width: 1140px; padding-left: 16px; padding-right: 16px; } /* Clear float after content */ .single-teacher article::after { content: ""; display: table; clear: both; } /* ============================================================================= FOOTER Three-column footer matching Drupal layout. CSS lives here in the child theme; the GP Site Footer Element contains HTML markup only (no inline styles). Background is #efefef to match Drupal's rgb(239,239,239). ============================================================================= */ /* Hide duplicate GP default copyright paragraph */ .site-footer > p { display: none !important; } /* --- Footer base --- */ .site-footer, footer.site-footer, .sfzc-footer { background-color: #efefef !important; padding: 1rem 0 0; margin-top: 1rem; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 1rem; color: #212529; line-height: 1.6; } .sfzc-footer *, .sfzc-footer *::before, .sfzc-footer *::after { box-sizing: border-box; } /* --- Layout --- */ .sfzc-footer-inner { max-width: 1140px; margin: 0 auto; padding: 0 1rem; } .sfzc-footer-columns { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; } /* --- Headings --- */ .sfzc-footer h2, .sfzc-footer h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.75rem; font-weight: 500; color: #212529; margin: 20px 0 10px 0; line-height: 0.87; } .sfzc-footer h2 { margin-top: 0; margin-bottom: 10px; } /* --- Location subheadings (CITY CENTER, GREEN GULCH, etc.) --- */ .sfzc-footer .location-heading { font-family: 'Source Sans Pro', sans-serif; font-weight: 700; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; color: #8b0e04; margin: 1.5rem 0 0.5rem 0; } .sfzc-footer .location-heading:first-child { margin-top: 0; } /* --- Links --- */ .sfzc-footer ul { list-style: none; padding: 0; margin: 0; } .sfzc-footer li { margin-bottom: 0.5rem; } .sfzc-footer a { color: #8b0e04; text-decoration: none; font-size: 1rem; font-weight: 700; } .sfzc-footer a:hover { color: #000000; text-decoration: none; } /* --- Social icons --- */ .sfzc-footer-social { display: flex; gap: 0.75rem; margin-bottom: 1rem; } .sfzc-footer-social a { color: #8b0e04; text-decoration: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; } .sfzc-footer-social a:hover { color: #000000; } .sfzc-footer-social svg { width: 40px; height: 40px; fill: currentColor; } /* --- CTA labels (Dharma App, podcast) --- */ .sfzc-footer .cta-label { font-weight: 700; display: block; margin: 1rem 0 0.5rem 0; font-size: 1rem; color: #212529; } /* --- Copyright bar --- */ .sfzc-footer-copyright { background-color: #fff !important; margin-top: 2.5rem; padding: 2.5rem 0 !important; } .sfzc-footer-copyright-inner { max-width: 1140px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; } .sfzc-footer-copyright, .sfzc-footer-copyright-inner, .sfzc-footer-copyright span, .sfzc-footer-copyright a { font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 0.875rem !important; color: #444 !important; -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } .sfzc-footer-copyright a { text-decoration: underline !important; font-weight: 400 !important; } .sfzc-footer-copyright a:hover { color: #000000; text-decoration: underline; } .sfzc-footer-copyright-links { display: flex; gap: 1rem; } /* --- Footer responsive --- */ @media (max-width: 991px) { .sfzc-footer-columns { grid-template-columns: 1fr 1fr; } } @media (max-width: 767px) { .sfzc-footer-columns { grid-template-columns: 1fr; gap: 1.5rem; } .sfzc-footer-copyright-inner { flex-direction: column; text-align: center; } } /* ============================================================================= TOUT CARDS Flat design cards matching Drupal tout component. White bg, no shadow, square corners. Image full-width at top, content padded below. Spec: auth-style.md Cards/Touts section ============================================================================= */ .sfzc-tout-card { background-color: #fff; border: none; border-radius: 0; box-shadow: none; overflow: hidden; } .sfzc-tout-image { display: block; width: 100%; height: auto; aspect-ratio: 354 / 243; object-fit: cover; } .sfzc-tout-content { padding: 1rem 0 0 0; } .sfzc-tout-title { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 400; color: #212529; margin: 0 0 25px 0; line-height: 27px; } .sfzc-tout-title a { color: #212529; text-decoration: none; } .sfzc-tout-title a:hover { color: #8b0e04; } .sfzc-tout-description { font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 1rem; font-weight: 400; color: #212529; line-height: 1.6; margin: 0; } /* WYSIWYG values arrive wrapped in

(B116); the wrapper above is a div for that reason. This has to survive a MIXED state - until a tout is re-saved through the new editor its value is bare text with no

, and once TinyMCE touches it the text is wrapped. Keeping the outer bottom margin above and zeroing the last inner

makes both forms measure identically at the card edge, so nothing shifts on the touts nobody edits. */ .sfzc-tout-description p { margin: 0 0 1rem 0; } .sfzc-tout-description p:last-child { margin-bottom: 0; } .sfzc-tout-description a { color: #212529; text-decoration: none; } .sfzc-tout-description a:hover { color: #8b0e04; } .sfzc-tout-btn { display: none !important; /* Hidden for launch parity with Drupal; ACF fields preserved for future use */ margin-top: 0.5rem; } /* --- Tout style: highlighted --- */ .sfzc-tout-highlighted { background-color: #f8f8f8; border: 1px solid #e5e5e5; } /* --- Tout style: minimal --- */ .sfzc-tout-minimal .sfzc-tout-content { padding: 0.5rem 0; } /* ============================================================================= TOUT GRID 3-column responsive grid for tout card collections. 30px gap. Desktop: 3 columns. Tablet: 2 columns. Mobile: 1 column. ============================================================================= */ .sfzc-tout-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin: 2rem 0; } /* max-width is the ceiling that stops a card ever upscaling its image (B084, 2026-07-25). The width rules below all say "take the space available"; without a cap the tablet and mobile bands did exactly that, reaching 425px at 991 and 703px at 767 - 1.20x and 1.99x against the 354px tout-large crop, and 1.70x / 2.81x on legacy 250px sources. Worse than the desktop defect this block was written to fix. 339px, NOT Drupal's 334px, and the five pixels are load-bearing. At 767 the container is 703px: two cards at 334 plus the 30px gap total 698 and fit, giving 2 per row where Drupal shows 1. At 339 they total 708, do not fit, and the row count matches Drupal. A row-count difference is far more visible than 5px of width, so parity is better served by the wider cap. 339 is also the standard-page desktop card width, so a card is never larger than it is on desktop - which is what stops cards growing as the window narrows. Renders 0.96x. Desktop is unaffected: 328 (Practice Centers) and 339 (standard) are already at or below it. */ .sfzc-tout-card { width: calc((100% - 60px) / 3); max-width: 339px; } /* The caps below are Drupal's own measured card widths at each band, taken from live sfzc.org on the same page at the same viewports: viewport Drupal card our container our card (capped) 1707 334 1076 / 1044 328-339 991 293 912 293 767 287 735 287 Why caps and not different width formulas: our content column is much wider than Drupal's below desktop (912 vs 624 at 991), so identical percentage rules still produce bigger cards. Capping to Drupal's actual pixel width is what closes it, and it improves sharpness too - 0.83x and 0.81x against the 354px crop. Deliberate divergence at 767: Drupal renders 1 per row there, we render 2, because our container fits two cards at 287 plus the gap. WebOps' call 2026-07-25 - card size is the parity editors and visitors perceive, and two-up means less scrolling on a phone. Layout differs, size does not. */ @media (max-width: 991px) { .sfzc-tout-card { width: calc((100% - 30px) / 2); max-width: 293px; } } @media (max-width: 767px) { .sfzc-tout-card { width: 100%; max-width: 287px; } } /* ============================================================================= CTA BLOCKS Call-to-action sections with three background variants. Light: default, subtle gray. Dark: dark bg, white text. Image: bg-image overlay. ============================================================================= */ .sfzc-cta-block { padding: 3rem 2rem; text-align: center; margin: 2rem 0; } .sfzc-cta-inner { max-width: 750px; margin: 0 auto; } .sfzc-cta-headline { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 2rem; font-weight: 400; margin: 0 0 0.5rem 0; } .sfzc-cta-subhead { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.25rem; font-style: italic; margin: 0 0 1rem 0; color: #666; } .sfzc-cta-description { font-size: 1rem; line-height: 1.6; margin: 0 0 1.5rem 0; } .sfzc-cta-btn { display: inline-block; } /* --- CTA light (default) --- */ .sfzc-cta-light { background-color: #f8f8f8; border: 1px solid #e5e5e5; color: #212529; } .sfzc-cta-light .sfzc-cta-headline { color: #8b0e04; } /* --- CTA dark --- */ .sfzc-cta-dark { background-color: #333; color: #fff; } .sfzc-cta-dark .sfzc-cta-headline { color: #fff; } .sfzc-cta-dark .sfzc-cta-subhead { color: #ccc; } .sfzc-cta-dark .sfzc-cta-btn { background-color: #fff; color: #8b0e04; border-color: #fff; } .sfzc-cta-dark .sfzc-cta-btn:hover { background-color: #efefef; } /* --- CTA image --- */ .sfzc-cta-image { background-size: cover; background-position: center; background-repeat: no-repeat; color: #fff; position: relative; } .sfzc-cta-image::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .sfzc-cta-image .sfzc-cta-inner { position: relative; z-index: 1; } .sfzc-cta-image .sfzc-cta-headline { color: #fff; } .sfzc-cta-image .sfzc-cta-subhead { color: #ddd; } .sfzc-cta-image .sfzc-cta-btn { background-color: #fff; color: #8b0e04; border-color: #fff; } /* ============================================================================= SIDEBAR Sidebar container and widget styles. Matches Drupal sidebar box pattern from auth-style.md. Each widget gets the light gray box treatment. ============================================================================= */ .sfzc-sidebar { display: flex; flex-direction: column; gap: 1.5rem; } .sfzc-sidebar-widget { background-color: #f8f8f8; border: 1px solid #222; padding: 1.5rem; /* Drupal: #sidebar_second .sidebar-grey. One of three sanctioned exceptions to the flat-design rule in auth-style.md, all of them Drupal parity. */ box-shadow: 0 3px 6px -2px #333; } .sfzc-sidebar-heading { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 500; color: #222; margin: 0 0 1rem 0; } .sfzc-sidebar-content { font-size: 1rem; line-height: 1.6; } .sfzc-sidebar-content a { color: #8b0e04; font-weight: 700; text-decoration: none; } .sfzc-sidebar-content a:hover { text-decoration: underline; } .sfzc-sidebar-content ul { list-style: none; padding: 0; margin: 0; } .sfzc-sidebar-content li { margin-bottom: 0.4rem; } /* --- Sidebar contact info --- */ .sfzc-sidebar-address, .sfzc-sidebar-phone, .sfzc-sidebar-email { margin: 0 0 0.5rem 0; font-size: 0.9375rem; line-height: 1.5; } .sfzc-sidebar-phone a, .sfzc-sidebar-email a { color: #8b0e04; text-decoration: underline; } /* --- Sidebar tout: remove inner box styling to avoid double-box --- */ .sfzc-sidebar-tout .sfzc-tout-card { background-color: transparent; border: none; } .sfzc-sidebar-tout .sfzc-tout-content { padding: 0.5rem 0 0 0; } /* --- Sidebar upcoming events: override heading to match sidebar style --- */ .sfzc-sidebar-events .sfzc-upcoming-events-heading { font-size: 1.25rem; margin-top: 0; } /* ============================================================================= HERO IMAGE Full-bleed banner matching Drupal hero style. Breaks out of content container using viewport-width trick. 2.86:1 aspect ratio. Ref: V13-V14, V84-V85, V208-V209 ============================================================================= */ .sfzc-hero-image { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); max-width: none; margin: 0 0 2rem 0; line-height: 0; overflow: hidden; } .sfzc-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 1400 / 490; object-fit: cover; } /* ============================================================================= PAGE LAYOUT Standard page body with optional sidebar. Content/sidebar split is ~66/33 matching Drupal's Bootstrap grid. Full-width when no sidebar. ============================================================================= */ .sfzc-page-layout { margin: 0; } .sfzc-page-with-sidebar { display: grid; grid-template-columns: 1fr 280px; gap: 30px; align-items: start; } .sfzc-page-content { min-width: 0; } .sfzc-page-content > *:first-child { margin-top: 0; } @media (max-width: 991px) { .sfzc-page-with-sidebar { grid-template-columns: 1fr; } .sfzc-page-sidebar-col { margin-top: 2rem; } } /* ============================================================================= PRACTICE CENTER SINGLE Page layout for practice_center CPT. Container width matches sitewide 1140px standard. Sections stacked with consistent vertical rhythm. Contact info in a 2-column grid on desktop, stacked on mobile. ============================================================================= */ /* --- Container width (GP Content Template context) --- */ .single-practice_center .content-area { max-width: 1140px; padding-left: 16px; padding-right: 16px; } /* --- Landing page container constraint --- */ /* GP standard page rendering adds .inside-article with 40px padding. Without a max-width on .content-area, inner containers balloon past viewport. Match practice center pattern so the 100vw hero breakout calculates correctly. */ .page-template-template-landing-page .content-area { max-width: 1076px; padding-left: 16px; padding-right: 16px; } .page-template-template-landing-page .inside-article { padding-left: 0; padding-right: 0; } /* --- B089: let the landing-page container shrink below the hero's 100vw --- */ /* The max-width above was written to make the hero breakout calculate correctly and does not, because 1076px never binds in the band where this fails: at a 900px viewport the container computes 932px, well under the cap. The real constraint is a flex minimum. template-landing-page.php:15 opens its own .site-content inside the one GP's get_header() already opened, so the inner one is a flex ITEM of the outer (GP sets .site-content { display: flex }). Flex items default to min-width: auto and cannot shrink below their content's min-content width - which the hero's width:100vw pins at 900px, plus the 16px content-area padding each side = 932. The container then overflows its 821px parent, stops being centred in the viewport, and the hero's left:50% / translateX(-50%) trick can no longer self-cancel: it lands 48px right and clips 48px off the content below it. min-width:0 releases that floor. Measured at 900px on Home: overflow +64 -> -7, hero left +48 -> -7, which is exactly the practice-center baseline. This treats the symptom. The cause is the duplicated wrapper, kept for now because removing it changes markup on all 7 landing pages - see bug-089. */ .page-template-template-landing-page .site-content .site-content { min-width: 0; } /* --- Section spacing within practice center body --- */ .sfzc-practice-center-description { margin-bottom: 2rem; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 1.7; color: #222; } .sfzc-practice-center-description p { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 26px; line-height: 1.7; color: #222; } /* --- Contact Info section --- */ .sfzc-practice-center-contact { margin-bottom: 2rem; padding: 1.5rem; background-color: #f8f8f8; border: 1px solid #e5e5e5; } .sfzc-contact-heading { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.5rem; font-weight: 400; color: #8b0e04; margin: 0 0 1rem 0; } .sfzc-contact-field { margin-bottom: 0.75rem; } .sfzc-contact-field:last-child { margin-bottom: 0; } .sfzc-contact-label { display: block; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.02em; color: #666; margin-bottom: 0.25rem; } .sfzc-contact-field p { margin: 0; font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 1rem; line-height: 1.5; color: #222; } .sfzc-contact-field a { color: #8b0e04; text-decoration: underline; } .sfzc-contact-field a:hover { color: #6a0b03; } /* 2-column contact grid on desktop */ @media (min-width: 768px) { .sfzc-practice-center-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; } .sfzc-contact-heading { grid-column: 1 / -1; } } /* --- Touts section spacing --- */ .sfzc-practice-center-touts { margin-bottom: 2rem; } /* --- Components section spacing --- */ .sfzc-components { margin-bottom: 2rem; } .sfzc-component { margin-bottom: 1.5rem; } .sfzc-component:last-child { margin-bottom: 0; } /* Shortcode component header (trk-104). Scoped to --shortcode on purpose: a global .sfzc-component-title rule would also move every existing Tout Row heading on pages that are already parity-checked. This selector renders nothing today, so the regression risk is zero. The global tidy belongs to trk-054 / trk-022. The 8px margin-bottom comes from the global h2 rule at :130; only the unreset GeneratePress top margin needs clearing here. */ .sfzc-component--shortcode .sfzc-component-title { margin-top: 0; /* 16px, not the global 8px. Measured 2026-08-30: the gap under this heading was exactly 8px on both embed types - TEC's list view and sfzc_upcoming_events - with no container padding and no margin collapsing, so the heading's own margin is the only lever and it moves both. WebOps read 8px as crowded. trk-104. */ margin-bottom: 16px; } /* Body copy in text components. 16px per auth-style.md ("Body | 1rem (16px)") and matching Drupal, which renders body at 16px. Was 17px with no recorded rationale; that oversize was masking GP's antialiased thinning - the two errors cancelled to within 0.6% ink, so body copy looked right for the wrong reason. With the html-level smoothing override in place, 16px measures 0.0% ink difference from Drupal. Verified 2026-07-21. line-height 27px left as-is - Drupal body line-height varies by page (20.8px and 26px observed); needs its own review, not bundled here. */ .sfzc-component--text { font-family: 'Source Sans Pro', -apple-system, sans-serif; font-size: 16px; line-height: 27px; color: #222; } /* ============================================================================= 404 PAGE (404.php) Page-not-found notice card - broom illustration left, message right. Moved here from an inline