/* Theme Name: Construction Marketing Team Theme URI: https://constructionmarketingteam.com Description: The CMT variable theme. One codebase, many verticals — the niche word, brand, colors, and contact info are driven by brand-config.php. Flip $ACTIVE_BRAND to render Construction, Concrete, Cabinet, etc. Header/footer/homepage markup ported from the original hand-coded CMT site; vendor CSS bundles preserve the live look while you refactor into this clean layer. Author: Concrete Marketing Team Version: 1.6.1 License: Proprietary Text Domain: cmt */ /* ------------------------------------------------------------------ YOUR CLEAN, EDITABLE LAYER The vendor bundles (loaded first, in functions.php) render the site as it looks today. Write NEW styles here. As you rebuild a section with clean markup, move its styles here and drop the vendor reliance. Design tokens (--red, --dark, --cream, --tan, --font-primary...) are printed into by brand-config.php, so use them: color: var(--red); ------------------------------------------------------------------ */ :root { --cmt-maxw: 1200px; } /* example override hook — safe to edit/delete */ .cmt-page-inner { max-width: var(--cmt-maxw); margin: 0 auto; padding: 64px 24px; font-family: var(--font-primary); } /* ================================================================== TOKEN ALIASES brand-config.php prints each $CMT_TOKENS key as --{key with _ -> -}, which gives us --color-red, --color-dark, --color-cream, and so on. These aliases give us the short names we actually say out loud. This is the ONLY place a token name is restated — never redefine a color VALUE down here. The canonical red is still unconfirmed, so everything below uses var(--red) and follows the config. ================================================================== */ :root { --red: var(--color-red); --red-bright: var(--color-red-bright); --red-dark: var(--color-red-dark); --red-tint: var(--color-red-tint); --black: var(--color-black); --dark: var(--color-dark); --cream: var(--color-cream); --tan: var(--color-tan); --tan-light: var(--color-tan-light); /* Layout rhythm, shared by every section written in this file. */ --cmt-gutter: 20px; --cmt-section-y: 64px; } @media (min-width: 768px) { :root { --cmt-gutter: 32px; --cmt-section-y: 88px; } } @media (min-width: 1080px) { :root { --cmt-gutter: 40px; --cmt-section-y: 104px; } } /* ================================================================== SHARED PRIMITIVES (cmt- prefix keeps these clear of the vendor CSS) ================================================================== */ .cmt-shell { max-width: var(--cmt-maxw); margin: 0 auto; padding-left: var(--cmt-gutter); padding-right: var(--cmt-gutter); } /* Small uppercase label. DM Mono is for these and nothing else. */ .cmt-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; } /* Buttons. Every quote CTA on the site uses .cmt-btn-primary. */ .cmt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-primary); font-size: 16px; font-weight: 600; line-height: 1; text-decoration: none; padding: 16px 26px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .cmt-btn svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cmt-btn-primary { background: var(--red); color: #fff; border-color: var(--red); } .cmt-btn-primary:hover, .cmt-btn-primary:focus-visible { background: var(--red-dark); border-color: var(--red-dark); color: #fff; } /* Outline button for light backgrounds. */ .cmt-btn-ghost { background: transparent; color: var(--black); border-color: rgba(17,17,17,.22); } .cmt-btn-ghost:hover, .cmt-btn-ghost:focus-visible { border-color: var(--black); background: var(--black); color: #fff; } /* Outline button for dark backgrounds — tan reads well on dark, never on red. */ .cmt-btn-ghost-dark { background: transparent; color: var(--tan-light); border-color: rgba(200,169,122,.45); } .cmt-btn-ghost-dark:hover, .cmt-btn-ghost-dark:focus-visible { border-color: var(--tan); background: var(--tan); color: var(--dark); } .cmt-btn:focus-visible { outline: 3px solid var(--red-tint); outline-offset: 3px; } /* Shared checkmark used in every feature list. */ .cmt-check { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* ================================================================== PRICING PAGE — three EQUAL-WEIGHT cards. Brand rule: no tier is visually favored. Every .cmt-plan shares the same width, border, padding, type scale, and button. Foundation is marked recommended through copy only. Do not add a ribbon, a scale transform, a colored fill, or a heavier border to any one card. ================================================================== */ .cmt-pricing { background: var(--cream); padding: var(--cmt-section-y) 0; font-family: var(--font-primary); color: var(--black); } .cmt-pricing-inner { max-width: var(--cmt-maxw); margin: 0 auto; padding: 0 var(--cmt-gutter); } .cmt-pricing-head { max-width: 680px; margin-bottom: 36px; } .cmt-pricing-title { font-size: clamp(32px, 7.5vw, 50px); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 16px; } .cmt-pricing-title-red { color: var(--red); } .cmt-pricing-sub { font-size: 17px; line-height: 1.65; color: #4a4a4a; margin: 0; max-width: 56ch; } /* ---- the three cards ---- */ .cmt-plans { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; } .cmt-plan { background: #fff; border: 1px solid rgba(17,17,17,.12); border-radius: var(--radius-lg); padding: 28px 22px; display: flex; flex-direction: column; } .cmt-plan-head { border-bottom: 1px solid rgba(17,17,17,.09); padding-bottom: 20px; margin-bottom: 20px; } .cmt-plan-name { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 4px; } /* The recommendation signal — one plain line, same style on all three. */ .cmt-plan-kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--red); margin: 0 0 18px; } .cmt-plan-price { display: flex; align-items: baseline; gap: 6px; } .cmt-plan-price-num { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.025em; } .cmt-plan-price-per { font-family: var(--font-mono); font-size: 15px; color: #6b6b6b; } .cmt-plan-terms { font-size: 13px; color: #6b6b6b; margin: 10px 0 0; } .cmt-plan-desc { font-size: 15px; line-height: 1.6; color: #4a4a4a; margin: 0 0 20px; } /* Identical button on every card — part of the equal-weight rule. */ .cmt-plan-btn { width: 100%; margin-bottom: 22px; } .cmt-plan-list-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #6b6b6b; margin-bottom: 12px; } .cmt-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; flex: 1 1 auto; } .cmt-plan-list li { display: flex; align-items: flex-start; gap: 9px; } .cmt-plan-list strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--black); } .cmt-plan-list em { display: block; font-style: normal; font-size: 13px; line-height: 1.45; color: #6b6b6b; margin-top: 2px; } .cmt-plan-foot { margin: 22px 0 0; font-size: 13px; line-height: 1.55; } .cmt-plan-foot a { color: var(--black); text-decoration: none; border-bottom: 1px solid rgba(17,17,17,.25); padding-bottom: 1px; } .cmt-plan-foot a:hover { color: var(--red); border-color: var(--red); } .cmt-plan-foot--note { color: #6b6b6b; } .cmt-pricing-note { margin: 32px auto 0; max-width: 62ch; font-size: 16px; line-height: 1.65; color: #4a4a4a; text-align: center; } .cmt-pricing-note strong { color: var(--black); font-weight: 700; } @media (min-width: 700px) { .cmt-plans { grid-template-columns: repeat(2, 1fr); } /* Odd card out spans both columns rather than sitting narrow and lonely. */ .cmt-plan:last-child { grid-column: 1 / -1; } } @media (min-width: 1000px) { .cmt-pricing-head { margin-bottom: 48px; } .cmt-plans { grid-template-columns: repeat(3, 1fr); gap: 24px; } .cmt-plan { padding: 32px 26px; } .cmt-plan:last-child { grid-column: auto; } } /* ================================================================== QUOTE FORM SECTION (template-parts/quote-form.php) Dark section. It follows the cream pricing block and the light homepage sections, so the two-dark rule holds. ================================================================== */ .cmt-quote { background: var(--dark); color: var(--cream); padding: var(--cmt-section-y) 0; font-family: var(--font-primary); } .cmt-quote--compact { padding: 40px 0; } .cmt-quote-inner { max-width: 760px; margin: 0 auto; padding: 0 var(--cmt-gutter); } .cmt-quote-head { margin-bottom: 28px; } .cmt-quote .cmt-eyebrow { color: var(--tan); } /* tan on dark — never on red */ .cmt-quote-title { font-size: clamp(28px, 6.5vw, 40px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 14px; color: #fff; } .cmt-quote-sub { font-size: 16px; line-height: 1.65; color: rgba(247,246,244,.72); margin: 0; max-width: 52ch; } .cmt-quote-form-wrap { background: rgba(255,255,255,.04); border: 1px solid rgba(200,169,122,.22); border-radius: var(--radius-md); padding: 20px; } /* --- the placeholder itself. Obvious on purpose: it should never be mistaken for a working form sitting on a live site. --- */ .cmt-quote-placeholder { border: 2px dashed rgba(200,169,122,.45); border-radius: var(--radius-sm); padding: 32px 20px; text-align: center; } .cmt-quote-placeholder-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark); background: var(--tan); border-radius: 999px; padding: 5px 12px; margin-bottom: 14px; } .cmt-quote-placeholder-text { font-size: 17px; font-weight: 600; color: var(--cream); margin: 0 0 8px; } .cmt-quote-placeholder-note { font-family: var(--font-mono); font-size: 13px; color: rgba(247,246,244,.6); margin: 0; } .cmt-quote-placeholder-note code { color: var(--tan-light); background: rgba(200,169,122,.12); padding: 2px 6px; border-radius: 4px; } .cmt-quote-placeholder-fallback { font-size: 14px; color: rgba(247,246,244,.72); margin: 18px 0 0; } .cmt-quote-placeholder-fallback a { color: var(--tan-light); text-decoration: none; border-bottom: 1px solid rgba(200,169,122,.4); } .cmt-quote-placeholder-fallback a:hover { color: #fff; border-color: #fff; } /* GHL drops in an iframe — keep it from blowing out the layout. */ .cmt-quote-form-wrap iframe { width: 100% !important; border: 0; display: block; border-radius: var(--radius-sm); } .cmt-quote-page-intro { padding-bottom: 0; } @media (min-width: 768px) { .cmt-quote-form-wrap { padding: 28px; } .cmt-quote-placeholder { padding: 48px 32px; } } /* ================================================================== MOBILE OVERFLOW & BUTTON CONTAINMENT — ROOT CAUSE FIXES Two SEPARATE bugs, both only visible at <= 320px, which is why the earlier viewport-clipping guard looked like it had fixed things. --------------------------------------------------------------- BUG 1 — the page scrolled sideways by 12px. Source: the footer email address. `hello@constructionmarketingteam.com` is a 35-character unbreakable string with a min-content width of 253px. .footer-inner is a grid, and at mobile its track is `1fr` — which is minmax(AUTO, 1fr), and that auto minimum is min-content. The track therefore physically refuses to shrink below its widest word: measured at a 320px viewport it computed to 304px inside a 264px container, pushing every footer child to right:332. The old html/body guard was CLIPPING that — real content, hidden. The fix is the standard minmax(0,1fr) escape hatch plus letting the long address break. BUG 2 — a stray drop-shadow bleeding down the right edge. Source: the CLOSED mobile drawer. .header-mobile-drawer is position:fixed, translateX(100%), so its left edge sits exactly on the viewport's right edge. Its shadow has a NEGATIVE x-offset and a 48px blur (-12px 0 48px), so it spreads leftward INTO view — a dark band across the rightmost ~60px of every page, plus its 2px red left border. Being fixed, it adds no scroll width at all, which is exactly why an overflow guard could never catch it. It was never overflowing. It was painting. ================================================================== */ /* ---- BUG 1: let grid/flex children shrink below min-content ---- */ .footer-inner > *, .footer-col, .footer-brand { min-width: 0; } /* Flex rows in the footer have the same auto-minimum problem: a flex item defaults to min-width:auto, so the link inside .footer-contact-list could not shrink below its own 239px min-content either. */ .footer-contact-list, .footer-contact-list li, .footer-contact-list li > * { min-width: 0; } /* The address itself: break it rather than let it set the floor. Scoped to mail/tel links so ordinary copy keeps normal wrapping. */ a[href^="mailto:"], a[href^="tel:"], .cmt-quote-placeholder-fallback a { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } /* ---- BUG 2: no shadow or border while the drawer is parked ---- */ .header-mobile-drawer:not(.open) { box-shadow: none; border-left-color: transparent; } .header-mobile-drawer.open { box-shadow: -12px 0 48px rgba(0,0,0,.6); border-left-color: var(--red); } /* ================================================================== BUTTONS STAY INSIDE THEIR CARD Nothing in the vendor CSS sets box-sizing, so the site computes as content-box: `width:100%` plus 24-32px of padding renders wider than the parent. Measured before this rule, .podcast-cta was 414px inside a 350px column. .service-card-link ("Learn More") is called out by name because it ends in -link, not -btn/-cta, so a pattern match on those two misses it. .nav-link is deliberately NOT included — it is desktop nav chrome, and flipping its box model would shift the header layout. ================================================================== */ a[class*="-cta"], a[class*="-btn"], button[class*="-btn"], .cmt-btn, .service-card-link, .mobile-nav-book, .mobile-nav-call, .header-book-btn { box-sizing: border-box; max-width: 100%; min-width: 0; } /* These CTAs are white-space:nowrap in the vendor CSS, so their labels can never shrink — "See Pricing & Packages" is one long unbreakable line. Let them wrap on narrow screens instead of escaping the card. */ @media (max-width: 380px) { .services-cta-btn, .process-cta, .results-coming-cta, .header-book-btn { white-space: normal; text-align: center; } } /* The footer states label is white-space:nowrap in the vendor CSS. Once it carries the full coverage claim ("Serving Construction Contractors In All 50 States") it measured 363px inside a 264px container at 320px — 70px of overflow. Let it wrap, and let the state links reflow underneath it. */ .footer-states-label { white-space: normal; } .footer-states-list { flex-wrap: wrap; min-width: 0; } .footer-states-inner { min-width: 0; } /* Backstop only. Both sources above are fixed; this stops a future stray element from reintroducing a sideways scroll. */ html, body { overflow-x: hidden; } /* Nothing should be able to push the page wider than the screen. */ img, svg, video, iframe, table { max-width: 100%; } /* Set by cmt-nav.js while the mobile drawer is open, so the page behind the drawer stays put instead of scrolling under it. */ body.cmt-nav-open { overflow: hidden; touch-action: none; } /* ================================================================== LOGO WORDMARK FALLBACK Rendered by cmt_logo_markup() when the active brand has no logo file. The only artwork in the repo reads "CONCRETE MARKETING TEAM", so the construction build showed a competitor vertical's logo. A text wordmark in the brand font is the honest stand-in until the real asset lands at assets/logo-.svg. ================================================================== */ .cmt-logo-wordmark { display: inline-block; font-family: var(--font-primary); font-size: 17px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: #fff; text-decoration: none; max-width: 100%; /* Two short words per line beats one long line on a 320px screen. */ overflow-wrap: break-word; } .header-logo .cmt-logo-wordmark, .footer-logo .cmt-logo-wordmark { border-left: 3px solid var(--red); padding-left: 10px; } @media (min-width: 768px) { .cmt-logo-wordmark { font-size: 19px; } } /* ================================================================== MEGA-MENU ROLL-UP (Services, Industries) Left column lists the parent (a plan, or an industry); hovering or focusing one rolls its contents up on the right. Shared by both dropdowns so they behave identically. Desktop only — .header-nav is display:none below 1025px, where the drawer accordion takes over. ================================================================== */ .nav-dropdown--mega { width: min(920px, calc(100vw - 48px)); } .cmt-mega { display: grid; grid-template-columns: 264px 1fr; min-height: 320px; font-family: var(--font-primary); } /* ---- left column ---- */ .cmt-mega-nav { border-right: 1px solid rgba(17,17,17,.08); padding: 14px 12px; display: flex; flex-direction: column; gap: 4px; } .cmt-mega-tab { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: var(--radius-sm); padding: 11px 10px; cursor: pointer; font-family: inherit; transition: background-color .16s ease; } .cmt-mega-tab:hover, .cmt-mega-tab.is-active { background: var(--red-tint); } .cmt-mega-tab:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } /* The light-red icon chip, carried over from the old menu. */ .cmt-mega-chip { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--red-tint); color: var(--red); } .cmt-mega-tab.is-active .cmt-mega-chip { background: var(--red); color: #fff; } .cmt-mega-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .cmt-mega-tab-text { display: block; min-width: 0; flex: 1 1 auto; } .cmt-mega-tab-text strong { display: block; font-size: 15px; font-weight: 600; color: var(--black); line-height: 1.25; } .cmt-mega-tab-text span { display: block; font-family: var(--font-mono); font-size: 11px; color: #6b6b6b; margin-top: 2px; } .cmt-mega-caret { width: 15px; height: 15px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; color: #b9b9b9; opacity: 0; transition: opacity .16s ease; } .cmt-mega-tab.is-active .cmt-mega-caret { opacity: 1; color: var(--red); } .cmt-mega-allplans { margin-top: auto; padding: 11px 10px 4px; font-family: var(--font-mono); font-size: 12px; color: var(--black); text-decoration: none; } .cmt-mega-allplans:hover { color: var(--red); } /* ---- right panels ---- */ .cmt-mega-panels { padding: 16px 18px; min-width: 0; } .cmt-mega-panel { display: none; } .cmt-mega-panel.is-active { display: block; } .cmt-mega-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(17,17,17,.08); } .cmt-mega-panel-head strong { font-size: 15px; font-weight: 700; color: var(--black); } .cmt-mega-panel-head span { font-family: var(--font-mono); font-size: 11px; color: #6b6b6b; } .cmt-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 8px; } .cmt-mega-item { display: flex; align-items: flex-start; gap: 9px; padding: 8px 8px; border-radius: var(--radius-sm); text-decoration: none; min-width: 0; transition: background-color .16s ease; } .cmt-mega-item:hover { background: var(--cream); } .cmt-mega-item-chip { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; background: var(--red-tint); color: var(--red); margin-top: 1px; } .cmt-mega-item-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .cmt-mega-item > span { min-width: 0; } .cmt-mega-item strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--black); line-height: 1.3; } .cmt-mega-item span span, .cmt-mega-item > span > span { display: block; font-size: 12px; line-height: 1.4; color: #6b6b6b; margin-top: 1px; } .cmt-mega-note { font-size: 14px; line-height: 1.6; color: #4a4a4a; margin: 0 0 16px; max-width: 52ch; } .cmt-mega-panel-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(17,17,17,.08); } .cmt-mega-cta { padding: 11px 18px; font-size: 14px; } .cmt-mega-foot-link { font-family: var(--font-mono); font-size: 12px; color: var(--black); text-decoration: none; } .cmt-mega-foot-link:hover { color: var(--red); } /* ================================================================== MOBILE DRAWER ACCORDION The mega-menu is desktop-only, so the drawer gets the same content as tap-to-expand rows. ================================================================== */ .cmt-m-acc-toggle { display: flex; align-items: center; gap: 11px; width: 100%; background: transparent; border: 0; padding: 11px 0; cursor: pointer; text-align: left; font-family: var(--font-primary); } .cmt-m-acc-text { flex: 1 1 auto; min-width: 0; } .cmt-m-acc-text strong { display: block; font-size: 15px; font-weight: 600; color: var(--cream); } .cmt-m-acc-text span { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--tan-light); /* tan on dark */ margin-top: 2px; } .cmt-m-acc-caret { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; color: var(--tan); transition: transform .2s ease; } .cmt-m-acc-toggle.is-open .cmt-m-acc-caret { transform: rotate(180deg); } .cmt-m-acc-toggle:focus-visible { outline: 2px solid var(--tan); outline-offset: 2px; } .cmt-m-acc-panel { padding-left: 43px; display: flex; flex-direction: column; } .cmt-m-acc-panel[hidden] { display: none; } /* ================================================================== OFFERING PAGES — the red grid hero (template-offering.php) Carries the look from the old concrete /services pages: a red field with a faint grid ruled over it, the pitch on the left and a "WHAT'S INCLUDED" checklist card on the right. Rhythm: red hero -> white body -> dark quote form. The red counts as a dark section, so the white body between it and the form keeps the never-two-darks rule. The grid is a CSS gradient, not an image — no extra request, and it scales at any width. ================================================================== */ .cmt-offering { font-family: var(--font-primary); } .cmt-offering-inner { max-width: var(--cmt-maxw); margin: 0 auto; padding: 0 var(--cmt-gutter); } /* ---- hero ---- */ .cmt-offering-hero { position: relative; background: var(--red); color: #fff; padding: var(--cmt-section-y) 0; overflow: hidden; /* the ruled grid must never widen the page */ } .cmt-offering-grid-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px); background-size: 48px 48px; /* Fade it out toward the bottom so the text stays the loudest thing. */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 70%, transparent 100%); } .cmt-offering-crumbs { position: relative; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.72); margin-bottom: 26px; } .cmt-offering-crumbs a { color: #fff; text-decoration: none; opacity: .82; } .cmt-offering-crumbs a:hover { opacity: 1; } .cmt-offering-crumbs span { margin: 0 8px; opacity: .6; } .cmt-offering-hero-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; } .cmt-offering-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,.85); margin-bottom: 14px; } .cmt-offering-title { font-size: clamp(32px, 8vw, 54px); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 16px; color: #fff; } .cmt-offering-lede { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.9); margin: 0 0 28px; max-width: 42ch; } .cmt-offering-actions { display: flex; flex-direction: column; gap: 12px; } .cmt-offering-actions .cmt-btn { width: 100%; } /* On red, the solid button is white — never tan, per the brand rule. */ .cmt-offering-btn-solid { background: #fff; color: var(--red); border-color: #fff; } .cmt-offering-btn-solid:hover, .cmt-offering-btn-solid:focus-visible { background: var(--cream); border-color: var(--cream); color: var(--red-dark); } .cmt-offering-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); } .cmt-offering-btn-ghost:hover, .cmt-offering-btn-ghost:focus-visible { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; } /* ---- the WHAT'S INCLUDED card ---- */ .cmt-offering-card { background: #fff; color: var(--black); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: 0 18px 44px rgba(0,0,0,.18); min-width: 0; } .cmt-offering-card-head { padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px solid var(--red-tint); } .cmt-offering-card-label { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); } .cmt-offering-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .cmt-offering-card-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: #333; } .cmt-offering-check { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .cmt-offering-card-foot { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(17,17,17,.08); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .cmt-offering-card-price { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; color: var(--black); } .cmt-offering-card-price span { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--red); } .cmt-offering-card-note { font-size: 12.5px; color: #6b6b6b; } /* ---- body ---- */ .cmt-offering-body { background: #fff; color: var(--black); padding: var(--cmt-section-y) 0; } .cmt-offering-content { font-size: 16px; line-height: 1.7; color: #333; margin-bottom: 32px; } .cmt-offering-note { font-size: 15px; line-height: 1.6; color: #6b6b6b; margin: 0 0 32px; padding: 16px 18px; background: var(--cream); border-left: 3px solid var(--red); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .cmt-offering-siblings-title { font-size: clamp(24px, 5.5vw, 32px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 22px; } .cmt-offering-siblings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; } .cmt-offering-siblings a { display: block; background: var(--cream); border: 1px solid rgba(17,17,17,.07); border-radius: var(--radius-sm); padding: 15px 16px; text-decoration: none; transition: border-color .18s ease, transform .18s ease; } .cmt-offering-siblings a:hover { border-color: var(--red-tint); border-color: color-mix(in srgb, var(--red) 32%, transparent); transform: translateY(-2px); } .cmt-offering-siblings strong { display: block; font-size: 15px; font-weight: 600; color: var(--black); margin-bottom: 3px; } .cmt-offering-siblings span { display: block; font-size: 13px; line-height: 1.45; color: #6b6b6b; } @media (min-width: 640px) { .cmt-offering-actions { flex-direction: row; flex-wrap: wrap; } .cmt-offering-actions .cmt-btn { width: auto; } .cmt-offering-siblings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } @media (min-width: 900px) { .cmt-offering-hero-grid { grid-template-columns: 1.15fr 0.85fr; gap: 44px; } .cmt-offering-card { padding: 26px 24px; } .cmt-offering-siblings { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ================================================================== SERVICE AREAS — locations index + single city page TODO: import city data via WP export from the concrete site. With no posts the index renders .cmt-areas-empty instead of the state grid. ================================================================== */ .cmt-areas { font-family: var(--font-primary); } .cmt-areas-inner { max-width: var(--cmt-maxw); margin: 0 auto; padding: 0 var(--cmt-gutter); position: relative; } /* ---- hero: same red grid field as the offering pages ---- */ .cmt-areas-hero { position: relative; background: var(--red); color: #fff; padding: var(--cmt-section-y) 0; overflow: hidden; } .cmt-areas-grid-lines { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(255,255,255,.10) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.10) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, rgba(0,0,0,.35) 70%, transparent 100%); } .cmt-areas-title { font-size: clamp(30px, 7.5vw, 50px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 14px; color: #fff; } .cmt-areas-lede { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.9); margin: 0; max-width: 46ch; } /* ---- body ---- */ .cmt-areas-body { background: var(--cream); padding: var(--cmt-section-y) 0; color: var(--black); } .cmt-areas-count { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #6b6b6b; margin-bottom: 22px; } .cmt-areas-count strong { color: var(--red); } .cmt-areas-states { display: grid; grid-template-columns: 1fr; gap: 14px; } .cmt-areas-state-card { background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-md); padding: 18px 18px 14px; min-width: 0; } .cmt-areas-state-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px solid var(--red-tint); } .cmt-areas-state-head h2 { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } .cmt-areas-state-head span { font-family: var(--font-mono); font-size: 11px; color: var(--red); } .cmt-areas-city-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; } .cmt-areas-city-list a { font-size: 14px; color: #333; text-decoration: none; overflow-wrap: anywhere; } .cmt-areas-city-list a:hover { color: var(--red); } /* ---- empty state: honest, not a broken grid ---- */ .cmt-areas-empty { background: #fff; border: 1px dashed rgba(17,17,17,.18); border-radius: var(--radius-lg); padding: 34px 22px; text-align: center; max-width: 56ch; margin: 0 auto; } .cmt-areas-empty h2 { font-size: clamp(22px, 5vw, 28px); font-weight: 700; letter-spacing: -0.02em; margin: 0 0 12px; } .cmt-areas-empty p { font-size: 16px; line-height: 1.65; color: #4a4a4a; margin: 0 0 10px; } .cmt-areas-empty-cta { margin-top: 20px !important; } /* ---- single city facts ---- */ .cmt-area-facts { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 0 26px; padding: 14px 16px; background: rgba(255,255,255,.12); border-radius: var(--radius-sm); } .cmt-area-facts div { display: flex; gap: 8px; align-items: baseline; min-width: 0; } .cmt-area-facts dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.75); flex: 0 0 auto; } .cmt-area-facts dd { margin: 0; font-size: 14px; color: #fff; min-width: 0; overflow-wrap: anywhere; } @media (min-width: 700px) { .cmt-areas-states { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .cmt-area-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .cmt-areas-states { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .cmt-areas-city-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ================================================================== FOUNDATION SECTION — the price framing The only new styling on the merged homepage section. Everything else (background, card design, icon chip, borders, hover, grid breakpoints) is the existing .cmt-services / .service-card design, reused as-is. This carries the "$297/mo — everything, one price" line that used to live in the removed What's Included block, sitting in the section header next to the intro copy. ================================================================== */ .cmt-services .services-desc p { margin: 0 0 14px; } .cmt-services .services-desc p:last-child { margin-bottom: 0; } .cmt-foundation-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; } .cmt-foundation-price-num { font-family: var(--font-primary); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--black); } .cmt-foundation-price-per { font-family: var(--font-mono); font-size: 14px; color: var(--red); } .cmt-foundation-price-note { width: 100%; font-size: 14px; color: #6b6b6b; margin-top: 2px; } @media (min-width: 768px) { .cmt-foundation-price-note { width: auto; margin-top: 0; } } /* ================================================================== NAV DROPDOWNS — OPEN ON HOVER AS WELL AS CLICK The vendor CSS only opens a panel via .nav-item.open, a class the JS adds on click. Mouse users expect hover. This adds hover and :focus-within alongside the existing class, so all three routes work: hover -> mouse click / tap -> touch (cmt-nav.js, unchanged) focus-within -> keyboard tabbing into the trigger Desktop only: .header-nav is display:none below 1025px, where the drawer accordion takes over. Scoping the hover rules to the same breakpoint keeps a tap on a touch-screen laptop from firing a sticky :hover that never clears. ================================================================== */ @media (min-width: 1025px) { .nav-item.has-dropdown:hover > .nav-dropdown, .nav-item.has-dropdown:focus-within > .nav-dropdown { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); } .nav-item.has-dropdown:hover > .nav-dropdown-trigger, .nav-item.has-dropdown:focus-within > .nav-dropdown-trigger { color: #fff; background: rgba(255,255,255,.06); } .nav-item.has-dropdown:hover .nav-chevron, .nav-item.has-dropdown:focus-within .nav-chevron { transform: rotate(180deg); } /* * HOVER BRIDGE. * The panel sits at top: calc(100% + 12px) — a 12px dead gap between * the label and the panel. Crossing it with the mouse would drop * :hover and snap the menu shut mid-move. This invisible strip spans * the gap so the pointer never leaves the item. * ::before is already the little caret arrow, so this uses ::after. */ .nav-item.has-dropdown > .nav-dropdown::after { content: ''; position: absolute; left: 0; right: 0; /* Measured gap is 20px (12px offset + the trigger's own padding), so the bridge is 24px — cover it with room to spare rather than exactly, or a sub-pixel rounding leaves a dead line. */ top: -24px; height: 24px; } /* * HOVER INTENT. * Closing waits ~150ms so a quick diagonal toward the panel, or a * moment clipping the edge, does not kill the menu. Opening stays * instant — a delay there would feel broken. */ .nav-item.has-dropdown > .nav-dropdown { transition-delay: .15s; } .nav-item.has-dropdown:hover > .nav-dropdown, .nav-item.has-dropdown:focus-within > .nav-dropdown, .nav-item.open > .nav-dropdown { transition-delay: 0s; } /* Keyboard focus must never be hidden behind a closing panel. */ .nav-dropdown a:focus-visible, .nav-dropdown button:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; } } /* ================================================================== SCROLL REVEAL — FAIL VISIBLE (see assets/cmt-reveal.js) The vendor CSS ships .process-step { opacity: 0 } waiting on a script to add a class. That script was never carried over from the original site (assets/vendor/js is Google Tag Manager), so above 1024px all four "How It Works" steps were invisible and only the connector line rendered. Below 1024px the vendor CSS re-shows them, so it failed on desktop only. The rule is inverted here: content is visible by default, and only hidden once cmt-reveal.js has added `cmt-js` to , which it does only after confirming it can reveal things again. No script, no IntersectionObserver, or reduced-motion — everything just renders. ================================================================== */ .process-step, .results-card { opacity: 1; transform: none; } /* The results cards carried inline opacity:0 at EVERY width, so they need revealing everywhere. */ html.cmt-js .results-card:not(.is-revealed) { opacity: 0; transform: translateY(20px); } /* The process steps only broke above 1024px — below that the vendor CSS already forces them visible. Scoping the hide to the same breakpoint keeps mobile unconditionally visible instead of newly depending on JS. Without this, `html.cmt-js .process-step:not(...)` (0,3,1) would outrank the vendor's `.process-step { opacity: 1 }` (0,1,0) inside its media query and quietly hide them on phones too. */ @media (min-width: 1025px) { html.cmt-js .process-step:not(.is-revealed) { opacity: 0; transform: translateY(20px); } html.cmt-js .process-step { transition: opacity .5s ease, transform .5s ease; } } html.cmt-js .results-card { transition: opacity .5s ease, transform .5s ease; } /* Stagger, previously inline on each card. */ .results-card[data-reveal-delay="0.1s"] { transition-delay: .1s; } .results-card[data-reveal-delay="0.2s"] { transition-delay: .2s; } .results-card[data-reveal-delay="0.3s"] { transition-delay: .3s; } @media (prefers-reduced-motion: reduce) { html.cmt-js .process-step, html.cmt-js .results-card { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ================================================================== TIMELINE CONNECTOR — BREAK IT AT EACH NUMBER BOX The connector ran straight through the middle of the numbered boxes (it sits at top:35px, the exact centre of a 70px box). The boxes are now lifted above the line and carry a ring of section background, so the line reads as connecting BETWEEN boxes and stopping cleanly at each one. Numbers stay fully readable. Desktop only — the vendor CSS already hides the connector at 1024px and stacks the steps, 2-up to 600px and 1-up below. ================================================================== */ @media (min-width: 1025px) { .process-connector { z-index: 0; } .process-step-num { position: relative; z-index: 2; background: var(--dark); /* The ring is the gap: section-coloured, so the line stops short. */ box-shadow: 0 0 0 9px var(--dark); } /* Hover kept the ring but swapped the box's opaque background for the vendor's translucent rgba(204,34,34,.08), and a see-through box let the connector show straight through the number. This was first fixed with color-mix() to blend that 8% red into --dark. That worked in Chrome and was still WRONG: a declaration containing var() cannot be validated at parse time, so it is always accepted and only fails later, at computed-value time. When it fails the property falls back to its INITIAL value — transparent — not to the plain `background: var(--dark)` line above it. So on any engine without color-mix() the box turned fully transparent and the bug got worse, not better. A var() fallback pair never protects anything. So: no color-mix, and nothing that can fail. The box background stays flatly opaque, and the vendor's 8% red is painted as its own layer on top via ::after. Same tint, same transition, and the box cannot become see-through no matter what the engine supports. */ .process-step:hover .process-step-num { background: var(--dark); box-shadow: 0 0 0 9px var(--dark); } .process-step-num::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--red); opacity: 0; /* the vendor's .08 tint, on hover only */ transition: opacity .3s; pointer-events: none; } .process-step:hover .process-step-num::after { opacity: .08; } /* The tint layer is a positioned descendant, so it paints above inline content. Lift the number so it stays on top of its own tint. */ .process-step-num span { position: relative; z-index: 1; } /* ---------------------------------------------------------------- AND the other half of the same bug. Everything above makes the number box opaque, which is necessary but not sufficient: .process-connector is a SIBLING of the steps, so the reveal fade on .process-step does not touch it. While the boxes fade in from opacity 0 the line is already at full opacity, and a half-transparent box cannot hide an opaque line. The line therefore drew straight through the numbers for most of a second on every page that runs this section — worst on the last two steps, whose fades are delayed .3s and .45s. That is the version that survived the first two fixes: hovering during the fade, or scrolling the section into view, showed it. Fix: hold the line back until every box has landed. cmt-reveal.js adds .is-revealed to .process-steps only once ALL steps are revealed, and the 1s delay here covers the longest stagger (.45s delay + .5s fade). The line then draws between boxes that are already solid. FAIL-VISIBLE, like the rest of the reveal system: this is scoped to html.cmt-js, so if the script never runs the connector is simply visible from the start. ---------------------------------------------------------------- */ html.cmt-js .process-connector { opacity: 0; } html.cmt-js .process-steps.is-revealed .process-connector { opacity: 1; transition: opacity .3s ease 1s; } /* The progress sweep starts when the line does, not before it shows. */ html.cmt-js .process-steps.is-revealed .process-connector-fill { transition: width 1.2s ease 1s; } } @media (prefers-reduced-motion: reduce) { html.cmt-js .process-connector { opacity: 1 !important; transition: none !important; } } /* ================================================================== CTA EMPHASIS There are exactly two CTAs site-wide: PRIMARY "Get Started — $297/mo" — solid red, dominant SECONDARY "Book a Free Call" — outline/ghost, de-emphasised Only two spots needed new styling. Everything else reuses the existing solid/ghost pairs already in the vendor CSS, with the hrefs swapped so the solid one is always the primary. ================================================================== */ /* Footer brand column: the secondary sits beside the existing solid .footer-cta-btn, which had no outline counterpart. .footer-brand is a COLUMN flex container, so both buttons are flex items of it. That caused three bugs at once: the secondary stretched to the full column width (the primary only escapes because the vendor gives it width:fit-content), its margin-left indented it 10px out of line with the primary, and having no bottom margin of its own it sat flush against .footer-social with no gap at all. Wrapping the pair in one row container fixes all three: the row is the single flex item, and inside it the buttons size to their content, sit on a shared baseline, and carry the bottom margin together. */ .cmt-footer-ctas { display: flex; flex-wrap: wrap; align-items: stretch; /* equal heights even at different label lengths */ gap: 10px; margin-bottom: 24px; } .cmt-footer-ctas .footer-cta-btn { margin-bottom: 0; } .footer-cta-btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; max-width: 100%; padding: 12px 20px; border: 1px solid rgba(200,169,122,.45); /* tan on dark — never on red */ border-radius: var(--radius-sm); background: transparent; color: var(--tan-light); font-family: var(--font-primary); font-size: 13px; /* matches .footer-cta-btn so the pair aligns */ font-weight: 600; line-height: 1; text-decoration: none; transition: border-color .18s ease, color .18s ease, background-color .18s ease; } .footer-cta-btn-secondary:hover, .footer-cta-btn-secondary:focus-visible { border-color: var(--tan); background: var(--tan); color: var(--dark); } /* The mobile drawer's second action was a tel: link to an empty phone number; it now carries the secondary CTA and needs the ghost look rather than the phone-call treatment. */ .mobile-nav-call { justify-content: center; border: 1px solid rgba(200,169,122,.45); background: transparent; color: var(--tan-light); } .mobile-nav-call:hover, .mobile-nav-call:focus-visible { border-color: var(--tan); background: var(--tan); color: var(--dark); } /* The old max-width:600px margin patch is gone — .cmt-footer-ctas wraps with a gap, so the stacked case spaces itself. */ /* ================================================================== PODCAST PAGE (page-podcast.php) Rebuilt from the concrete site's podcast page, re-pointed to the construction umbrella brand. Rhythm: dark hero -> cream pillars -> white listen -> cream why -> dark final CTA. Two dark sections, never adjacent. Tan appears only on the dark sections, never on red. ================================================================== */ /* * The site computes as content-box (nothing in the vendor CSS sets * box-sizing), so `width: 100%` plus padding or a border renders WIDER * than the parent. The featured-embed placeholder hit exactly that: 100% * of a 334px column, plus 48px padding and a 4px border, measured 386px * and pushed the page 23px sideways at 390px. * * Scoped to this page rather than set globally — the vendor layout was * authored against content-box and a site-wide flip would move boxes we * cannot regression-test. */ .cmt-pod, .cmt-pod *, .cmt-pod *::before, .cmt-pod *::after { box-sizing: border-box; } .cmt-pod { font-family: var(--font-primary); } .cmt-pod-inner { max-width: var(--cmt-maxw); margin: 0 auto; padding: 0 var(--cmt-gutter); position: relative; } /* Anchor jumps must clear the sticky header. */ .cmt-pod [id] { scroll-margin-top: 96px; } @media (prefers-reduced-motion: no-preference) { html:has(.cmt-pod) { scroll-behavior: smooth; } } /* Shared type */ .cmt-pod-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tan); /* tan on dark only */ margin-bottom: 14px; } .cmt-pod-h2 { font-size: clamp(26px, 6vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 14px; color: var(--black); } .cmt-pod-h2-red { color: var(--red); } .cmt-pod-sub { font-size: 17px; line-height: 1.65; color: #4a4a4a; margin: 0; max-width: 60ch; } .cmt-pod-section-head { margin-bottom: 32px; max-width: 720px; } /* ---------- 1. HERO (dark) ---------- */ .cmt-pod-hero { position: relative; background: var(--dark); color: var(--cream); padding: var(--cmt-section-y) 0; overflow: hidden; } .cmt-pod-hero-grid-lines { position: absolute; inset: 0; pointer-events: none; opacity: .05; background-image: linear-gradient(var(--red) 1px, transparent 1px), linear-gradient(90deg, var(--red) 1px, transparent 1px); background-size: 48px 48px; } .cmt-pod-hero-layout { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; } .cmt-pod-title { font-size: clamp(30px, 7.5vw, 52px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 16px; color: #fff; } .cmt-pod-title-tan { color: var(--tan); display: block; } .cmt-pod-lede { font-size: 17px; line-height: 1.65; color: rgba(247,246,244,.8); margin: 0 0 26px; max-width: 52ch; } .cmt-pod-actions { display: flex; flex-direction: column; gap: 12px; } .cmt-pod-actions .cmt-btn { width: 100%; } .cmt-pod-hero-note { font-family: var(--font-mono); font-size: 12px; color: rgba(247,246,244,.55); margin: 18px 0 0; } .cmt-pod-hero-art { position: relative; min-width: 0; } .cmt-pod-hero-img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid rgba(200,169,122,.28); } .cmt-pod-hero-tag { position: absolute; left: 14px; bottom: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dark); background: var(--tan); border-radius: 999px; padding: 6px 12px; max-width: calc(100% - 28px); } /* ---------- 2. PILLARS (cream) ---------- */ .cmt-pod-pillars { background: var(--cream); padding: var(--cmt-section-y) 0; } .cmt-pod-pillar-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 14px; } .cmt-pod-pillar { background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-md); padding: 22px 20px; min-width: 0; transition: border-color .18s ease, transform .18s ease; } .cmt-pod-pillar:hover { border-color: var(--red-tint); border-color: color-mix(in srgb, var(--red) 32%, transparent); transform: translateY(-2px); } .cmt-pod-pillar-num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--red-tint); color: var(--red); font-family: var(--font-mono); font-size: 12px; font-weight: 500; margin-bottom: 14px; } .cmt-pod-pillar h3 { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--black); } .cmt-pod-pillar p { font-size: 14.5px; line-height: 1.6; color: #6b6b6b; margin: 0; } /* ---------- 3. LISTEN (white) ---------- */ .cmt-pod-listen { background: #fff; padding: var(--cmt-section-y) 0; } .cmt-pod-platforms { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; } .cmt-pod-platform { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; max-width: 100%; padding: 13px 20px; border-radius: var(--radius-sm); border: 1px solid rgba(17,17,17,.14); background: #fff; color: var(--black); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: border-color .18s ease, background-color .18s ease; } .cmt-pod-platform:hover { border-color: var(--red); color: var(--red); } /* No URL supplied yet: reads as pending, not clickable. */ .cmt-pod-platform--todo { border-style: dashed; color: #8a8a8a; cursor: default; flex-wrap: wrap; } .cmt-pod-platform--todo em { font-family: var(--font-mono); font-style: normal; font-size: 11px; color: #b0b0b0; } /* Responsive 16:9 embed */ .cmt-pod-featured { margin-bottom: 40px; } .cmt-pod-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; background: var(--dark); } .cmt-pod-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .cmt-pod-embed--placeholder { display: flex; align-items: center; justify-content: center; border: 2px dashed rgba(200,169,122,.4); text-align: center; padding: 24px; } .cmt-pod-embed-inner { max-width: 46ch; } .cmt-pod-embed-badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark); background: var(--tan); border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; } .cmt-pod-embed-inner p { font-size: 14px; line-height: 1.6; color: rgba(247,246,244,.72); margin: 0; overflow-wrap: anywhere; } .cmt-pod-embed-inner code { color: var(--tan-light); background: rgba(200,169,122,.14); padding: 2px 6px; border-radius: 4px; } /* Episode grid */ .cmt-pod-eps-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .cmt-pod-eps-head h3 { font-size: 20px; font-weight: 700; margin: 0; color: var(--black); } .cmt-pod-eps-note { font-family: var(--font-mono); font-size: 11px; color: #8a8a8a; } .cmt-pod-eps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } .cmt-pod-ep { border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-md); overflow: hidden; background: #fff; min-width: 0; } .cmt-pod-ep-thumb { aspect-ratio: 16 / 9; background: var(--cream); border-bottom: 1px solid rgba(17,17,17,.06); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #b0b0b0; } .cmt-pod-ep-body { padding: 16px 18px 18px; } .cmt-pod-ep-guest { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; } .cmt-pod-ep-body h4 { font-size: 16px; font-weight: 700; line-height: 1.35; margin: 0 0 10px; color: var(--black); } .cmt-pod-ep-link { font-family: var(--font-mono); font-size: 11px; color: #8a8a8a; } /* ---------- 4. WHY (cream) ---------- */ .cmt-pod-why { background: var(--cream); padding: var(--cmt-section-y) 0; } .cmt-pod-why-layout { display: grid; grid-template-columns: 1fr; gap: 28px; } .cmt-pod-why-copy p { font-size: 16px; line-height: 1.7; color: #4a4a4a; margin: 0 0 14px; max-width: 56ch; } .cmt-pod-why-list { list-style: none; margin: 0; padding: 20px; background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-md); display: grid; gap: 13px; min-width: 0; } .cmt-pod-why-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: #333; min-width: 0; } /* ---------- 5. FINAL CTA (dark) ---------- */ .cmt-pod-final { background: var(--dark); color: var(--cream); padding: var(--cmt-section-y) 0; text-align: center; } .cmt-pod-final .cmt-pod-inner { max-width: 760px; } .cmt-pod-final-title { font-size: clamp(28px, 6.5vw, 44px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 14px; color: #fff; } .cmt-pod-final-sub { font-size: 17px; line-height: 1.65; color: rgba(247,246,244,.78); margin: 0 auto 26px; max-width: 48ch; } .cmt-pod-form-placeholder { border: 2px dashed rgba(200,169,122,.4); border-radius: var(--radius-md); padding: 26px 20px; margin-bottom: 26px; } .cmt-pod-form-badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark); background: var(--tan); border-radius: 999px; padding: 5px 12px; margin-bottom: 12px; } .cmt-pod-form-placeholder p { font-size: 15px; color: rgba(247,246,244,.72); margin: 0; } .cmt-pod-actions--center { align-items: center; } /* ---------- breakpoints ---------- */ @media (min-width: 640px) { .cmt-pod-actions { flex-direction: row; flex-wrap: wrap; } .cmt-pod-actions .cmt-btn { width: auto; } .cmt-pod-actions--center { justify-content: center; } .cmt-pod-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .cmt-pod-eps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .cmt-pod-hero-layout { grid-template-columns: 1.05fr 0.95fr; gap: 48px; } .cmt-pod-pillar-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cmt-pod-eps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cmt-pod-why-layout { grid-template-columns: 1.1fr 0.9fr; gap: 44px; align-items: start; } .cmt-pod-why-list { padding: 26px; } } /* ================================================================== TRADES WE SERVE (page-trades-we-serve.php) + the shared testimonials component. Rhythm: dark hero -> cream featured -> white all-trades -> dark band -> dark process -> cream testimonials -> dark final. Two adjacent darks at most, then a light break. Tan on dark and cream only, never on red. ================================================================== */ /* Same content-box guard as the podcast page: nothing in the vendor CSS sets box-sizing, so width:100% plus padding renders wider than the parent. Scoped, not global — the vendor layout assumes content-box. */ .cmt-trades, .cmt-trades *, .cmt-trades *::before, .cmt-trades *::after, .cmt-quotes, .cmt-quotes *, .cmt-quotes *::before, .cmt-quotes *::after { box-sizing: border-box; } .cmt-trades { font-family: var(--font-primary); } .cmt-trades-inner, .cmt-quotes-inner { max-width: var(--cmt-maxw); margin: 0 auto; padding: 0 var(--cmt-gutter); position: relative; } .cmt-trades-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tan); margin-bottom: 14px; } .cmt-trades-h2 { font-size: clamp(26px, 6vw, 40px); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 12px; color: var(--black); } .cmt-trades-h2-red { color: var(--red); } .cmt-trades-sub { font-size: 17px; line-height: 1.65; color: #4a4a4a; margin: 0; max-width: 58ch; } .cmt-trades-head { margin-bottom: 30px; max-width: 720px; } .cmt-trades-actions { display: flex; flex-direction: column; gap: 12px; } .cmt-trades-actions .cmt-btn { width: 100%; } /* ---------- 1. hero ---------- */ .cmt-trades-hero { position: relative; background: var(--dark); color: var(--cream); padding: var(--cmt-section-y) 0; overflow: hidden; } .cmt-trades-hero-lines { position: absolute; inset: 0; pointer-events: none; opacity: .05; background-image: linear-gradient(var(--red) 1px, transparent 1px), linear-gradient(90deg, var(--red) 1px, transparent 1px); background-size: 48px 48px; } .cmt-trades-title { font-size: clamp(30px, 7.5vw, 52px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 16px; color: #fff; } .cmt-trades-title-tan { color: var(--tan); display: block; } .cmt-trades-lede { font-size: 17px; line-height: 1.65; color: rgba(247,246,244,.8); margin: 0 0 26px; max-width: 56ch; } /* ---------- 2. featured grid ---------- */ .cmt-trades-featured { background: var(--cream); padding: var(--cmt-section-y) 0; } .cmt-trades-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } .cmt-trade-card { min-width: 0; } .cmt-trade-card-inner { display: block; background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; height: 100%; transition: border-color .18s ease, transform .18s ease; } a.cmt-trade-card-inner:hover { border-color: color-mix(in srgb, var(--red) 32%, transparent); transform: translateY(-2px); } /* Placeholder image slot — obviously a slot, never a fake photo. */ .cmt-trade-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: var(--cream); border-bottom: 1px solid rgba(17,17,17,.06); } .cmt-trade-img-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #b6b6b6; } .cmt-trade-body { display: block; padding: 16px 18px 18px; } .cmt-trade-name { display: block; font-size: 17px; font-weight: 700; color: var(--black); letter-spacing: -0.01em; margin-bottom: 4px; } .cmt-trade-go { font-family: var(--font-mono); font-size: 11px; color: var(--red); } .cmt-trade-pending { font-family: var(--font-mono); font-size: 11px; color: #a0a0a0; } .cmt-trade-card--pending .cmt-trade-card-inner { cursor: default; } /* ---------- 3. all trades ---------- */ .cmt-trades-all { background: #fff; padding: var(--cmt-section-y) 0; } .cmt-trades-cats { display: grid; grid-template-columns: 1fr; gap: 26px; } .cmt-trades-cat h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid rgba(17,17,17,.08); } .cmt-trades-cat ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .cmt-trades-cat li { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; line-height: 1.45; color: #333; min-width: 0; } .cmt-trades-cat a { color: #333; text-decoration: none; overflow-wrap: anywhere; } .cmt-trades-cat a:hover { color: var(--red); } .cmt-trades-note { margin: 28px 0 0; font-size: 15px; line-height: 1.6; color: #6b6b6b; padding: 14px 16px; background: var(--cream); border-left: 3px solid var(--red); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* ---------- 4. dark CTA band ---------- */ .cmt-trades-band { background: var(--dark); color: var(--cream); padding: 56px 0; } .cmt-trades-band-layout { display: grid; grid-template-columns: 1fr; gap: 22px; align-items: center; } .cmt-trades-band-title { font-size: clamp(22px, 5vw, 32px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; color: #fff; } .cmt-trades-band-sub { font-size: 16px; line-height: 1.6; color: rgba(247,246,244,.75); margin: 0; max-width: 46ch; } /* ---------- 7. final ---------- */ .cmt-trades-final { background: var(--dark); color: var(--cream); padding: var(--cmt-section-y) 0; text-align: center; } .cmt-trades-final .cmt-trades-inner { max-width: 720px; } .cmt-trades-final-title { font-size: clamp(28px, 6.5vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 12px; color: #fff; } .cmt-trades-final-sub { font-size: 17px; color: rgba(247,246,244,.78); margin: 0 auto 24px; max-width: 44ch; } .cmt-trades-actions--center { align-items: center; } /* ---------- testimonials (shared component) ---------- */ .cmt-quotes { background: var(--cream); padding: var(--cmt-section-y) 0; font-family: var(--font-primary); } .cmt-quotes-head { margin-bottom: 28px; } .cmt-quotes-title { font-size: clamp(26px, 6vw, 38px); font-weight: 800; letter-spacing: -0.025em; margin: 0; color: var(--black); } .cmt-quotes-title-red { color: var(--red); } .cmt-quotes-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } .cmt-quote { background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-md); padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0; } .cmt-quote-mark { width: 26px; height: 26px; fill: var(--red-tint); flex: 0 0 auto; } .cmt-quote blockquote { margin: 0; font-size: 16px; line-height: 1.65; color: #333; flex: 1 1 auto; } /* No quote supplied yet — say so rather than invent one. */ .cmt-quote--empty { border-style: dashed; } .cmt-quote-badge { align-self: flex-start; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark); background: var(--tan); border-radius: 999px; padding: 4px 10px; } .cmt-quote-placeholder { margin: 0; font-size: 13.5px; line-height: 1.55; color: #8a8a8a; flex: 1 1 auto; overflow-wrap: anywhere; } .cmt-quote-placeholder code { background: var(--cream); border-radius: 4px; padding: 1px 5px; font-size: 12px; color: #6b6b6b; } .cmt-quote-by { border-top: 1px solid rgba(17,17,17,.08); padding-top: 12px; } .cmt-quote-name { display: block; font-size: 15px; font-weight: 700; color: var(--black); } .cmt-quote-co { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--red); margin-top: 2px; } /* ---------- breakpoints ---------- */ @media (min-width: 640px) { .cmt-trades-actions { flex-direction: row; flex-wrap: wrap; } .cmt-trades-actions .cmt-btn { width: auto; } .cmt-trades-actions--center { justify-content: center; } .cmt-trades-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmt-trades-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; } .cmt-quotes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .cmt-trades-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .cmt-trades-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } .cmt-quotes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cmt-trades-band-layout { grid-template-columns: 1fr auto; gap: 32px; } } /* ================================================================== FOUNDATION PLAN OVERVIEW (/foundation/, page-foundation.php) The site had twelve product pages and nothing that explained the PLAN. This is that page. Mobile-first: every layout below starts single-column and gains columns at min-width, matching the rest of this file. Rhythm, top to bottom: dark hero, white argument, cream four-jobs, dark shared process part, white full list, cream fit check, white FAQ, dark final CTA. Never two darks in a row. Tan appears on the dark sections only — never on red. ================================================================== */ .cmt-fdn { font-family: var(--font-primary); } /* ---------- 1. HERO (dark) ---------- */ .cmt-fdn-hero { position: relative; background: var(--dark); color: #fff; padding: 56px 0 var(--cmt-section-y); overflow: hidden; } /* Same faint grid the other dark heroes use, so the page belongs here. */ .cmt-fdn-hero-lines { position: absolute; inset: 0; pointer-events: none; opacity: .035; background-image: linear-gradient(var(--red) 1px, transparent 1px), linear-gradient(90deg, var(--red) 1px, transparent 1px); background-size: 64px 64px; } .cmt-fdn-hero > .cmt-shell { position: relative; z-index: 1; } .cmt-fdn-crumbs { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 28px; } .cmt-fdn-crumbs a { color: #fff; text-decoration: none; opacity: .82; } .cmt-fdn-crumbs a:hover { opacity: 1; } .cmt-fdn-crumbs span { margin: 0 8px; opacity: .6; } .cmt-fdn-hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; } .cmt-fdn-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tan); margin-bottom: 14px; } .cmt-fdn-title { font-weight: 900; font-size: clamp(34px, 7vw, 58px); line-height: 1.02; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 20px; } .cmt-fdn-title-tan { color: var(--tan); display: block; } .cmt-fdn-lede { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,.75); margin: 0 0 28px; max-width: 60ch; } .cmt-fdn-actions { display: flex; flex-direction: column; gap: 12px; } .cmt-fdn-actions .cmt-btn { width: 100%; } .cmt-fdn-actions--center { align-items: center; } /* The plan summary card. Cream on dark so the price reads instantly. */ .cmt-fdn-hero-card { background: var(--cream); color: var(--black); border-radius: var(--radius-md); padding: 26px 24px; } .cmt-fdn-hero-price { display: flex; align-items: baseline; gap: 2px; } .cmt-fdn-hero-price-num { font-weight: 900; font-size: 46px; line-height: 1; letter-spacing: -.02em; color: var(--red); } .cmt-fdn-hero-price-per { font-size: 17px; font-weight: 600; color: #6b6b6b; } .cmt-fdn-hero-terms { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: #6b6b6b; margin: 8px 0 20px; } .cmt-fdn-hero-facts { list-style: none; margin: 0; padding: 0; } .cmt-fdn-hero-facts li { font-size: 14.5px; line-height: 1.5; color: #333; padding: 11px 0; border-top: 1px solid rgba(17,17,17,.1); } .cmt-fdn-hero-facts strong { color: var(--black); font-weight: 800; margin-right: 6px; } /* ---------- shared section furniture ---------- */ .cmt-fdn-head { max-width: 720px; margin: 0 0 40px; } .cmt-fdn-h2 { font-weight: 900; font-size: clamp(27px, 5.4vw, 42px); line-height: 1.08; letter-spacing: -.015em; text-transform: uppercase; margin: 0; } .cmt-fdn-h2-red { color: var(--red); display: block; } .cmt-fdn-sub { font-size: 16px; line-height: 1.7; color: #5a5a5a; margin: 16px 0 0; max-width: 62ch; } /* ---------- 2. WHY ONE PLAN (white) ---------- */ .cmt-fdn-why { background: #fff; color: var(--black); padding: var(--cmt-section-y) 0; } .cmt-fdn-why-grid { display: grid; grid-template-columns: 1fr; gap: 32px; } .cmt-fdn-why-col h3 { font-size: 19px; font-weight: 800; margin: 0 0 12px; color: var(--black); } .cmt-fdn-why-col p { font-size: 15.5px; line-height: 1.75; color: #4a4a4a; margin: 0 0 14px; } .cmt-fdn-why-col p:last-child { margin-bottom: 0; } .cmt-fdn-honest { margin: 36px 0 0; padding: 18px 20px; background: var(--cream); border-left: 3px solid var(--red); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 15px; line-height: 1.7; color: #4a4a4a; } .cmt-fdn-honest strong { color: var(--black); } /* ---------- 3. THE FOUR JOBS (cream) — the teaching section ---------- */ .cmt-fdn-jobs { background: var(--cream); color: var(--black); padding: var(--cmt-section-y) 0; } .cmt-fdn-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; } .cmt-fdn-stage-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; } .cmt-fdn-stage-num { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--red); background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-sm); padding: 8px 10px; line-height: 1; flex: 0 0 auto; } .cmt-fdn-stage-title { font-size: 20px; font-weight: 800; margin: 0 0 6px; text-transform: uppercase; letter-spacing: -.01em; } .cmt-fdn-stage-lede { font-size: 15px; line-height: 1.6; color: #5a5a5a; margin: 0; max-width: 58ch; } .cmt-fdn-stage-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 12px; } /* The li stretches to the grid row, the anchor fills the li. Setting height:100% on the anchor instead resolves against an auto-height li and the card overflows its own row. */ .cmt-fdn-stage-items > li { display: flex; } .cmt-fdn-item { display: flex; align-items: flex-start; gap: 14px; flex: 1 1 auto; background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-md); padding: 16px 18px; text-decoration: none; transition: border-color .18s ease, transform .18s ease; } .cmt-fdn-item:hover, .cmt-fdn-item:focus-visible { border-color: color-mix(in srgb, var(--red) 32%, transparent); transform: translateY(-2px); } .cmt-fdn-item-icon { flex: 0 0 auto; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--cream); color: var(--red); } .cmt-fdn-item-icon svg { width: 19px; height: 19px; } .cmt-fdn-item-body { flex: 1 1 auto; min-width: 0; } .cmt-fdn-item-body strong { display: block; font-size: 15.5px; font-weight: 700; color: var(--black); margin-bottom: 3px; } .cmt-fdn-item-body span { display: block; font-size: 13.5px; line-height: 1.5; color: #6b6b6b; } .cmt-fdn-item-go { flex: 0 0 auto; color: var(--red); opacity: 0; transition: opacity .18s ease; } .cmt-fdn-item-go svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cmt-fdn-item:hover .cmt-fdn-item-go, .cmt-fdn-item:focus-visible .cmt-fdn-item-go { opacity: 1; } /* ---------- 5. EVERYTHING INCLUDED (white) ---------- */ .cmt-fdn-all { background: #fff; color: var(--black); padding: var(--cmt-section-y) 0; } .cmt-fdn-all-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .cmt-fdn-detail { border: 1px solid rgba(17,17,17,.1); border-radius: var(--radius-md); padding: 22px 20px; display: flex; flex-direction: column; } .cmt-fdn-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .cmt-fdn-detail-num { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: #b0b0b0; flex: 0 0 auto; } .cmt-fdn-detail-icon { flex: 0 0 auto; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--cream); color: var(--red); } .cmt-fdn-detail-icon svg { width: 18px; height: 18px; } .cmt-fdn-detail-head h3 { font-size: 16.5px; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: -.01em; } .cmt-fdn-detail-blurb { font-size: 14.5px; line-height: 1.6; color: #5a5a5a; margin: 0 0 14px; } .cmt-fdn-detail-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; } .cmt-fdn-detail-list li { display: flex; gap: 9px; font-size: 14px; line-height: 1.5; color: #4a4a4a; } .cmt-fdn-detail-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--red); text-decoration: none; } .cmt-fdn-detail-link:hover { text-decoration: underline; } .cmt-fdn-detail-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- 6. IS IT A FIT (cream) ---------- */ .cmt-fdn-fit { background: var(--cream); color: var(--black); padding: var(--cmt-section-y) 0; } .cmt-fdn-fit-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } .cmt-fdn-fit-col { background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-md); padding: 24px 22px; } .cmt-fdn-fit-col h3 { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; margin: 0 0 16px; } .cmt-fdn-fit-col--yes h3 { color: var(--red); } .cmt-fdn-fit-col--no h3 { color: #8a8a8a; } .cmt-fdn-fit-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .cmt-fdn-fit-col li { display: flex; gap: 10px; font-size: 14.5px; line-height: 1.55; color: #4a4a4a; } /* A drawn X rather than a glyph, so it lines up with .cmt-check. */ .cmt-fdn-fit-x { position: relative; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 3px; } .cmt-fdn-fit-x::before, .cmt-fdn-fit-x::after { content: ''; position: absolute; top: 7px; left: 1px; width: 14px; height: 2.5px; border-radius: 2px; background: #b8b8b8; } .cmt-fdn-fit-x::before { transform: rotate(45deg); } .cmt-fdn-fit-x::after { transform: rotate(-45deg); } /* ---------- 7. FAQ (white) ---------- */ .cmt-fdn-faq { background: #fff; color: var(--black); padding: var(--cmt-section-y) 0; } .cmt-fdn-faq-list { display: grid; gap: 10px; max-width: 820px; } .cmt-fdn-faq-item { border: 1px solid rgba(17,17,17,.1); border-radius: var(--radius-md); padding: 0 18px; background: #fff; } .cmt-fdn-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; font-size: 15.5px; font-weight: 700; color: var(--black); cursor: pointer; list-style: none; } .cmt-fdn-faq-item summary::-webkit-details-marker { display: none; } .cmt-fdn-faq-item summary:focus-visible { outline: 3px solid var(--red-tint); outline-offset: 3px; } .cmt-fdn-faq-caret { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; } .cmt-fdn-faq-item[open] .cmt-fdn-faq-caret { transform: rotate(180deg); } .cmt-fdn-faq-item p { margin: 0; padding: 0 0 18px; font-size: 15px; line-height: 1.7; color: #4a4a4a; max-width: 68ch; } .cmt-fdn-faq-more { margin: 28px 0 0; font-size: 15px; color: #5a5a5a; } .cmt-fdn-faq-more a { color: var(--red); font-weight: 600; } /* ---------- 8. FINAL CTA (dark) ---------- */ .cmt-fdn-final { background: var(--dark); color: #fff; padding: var(--cmt-section-y) 0; text-align: center; } .cmt-fdn-final-title { font-weight: 900; font-size: clamp(28px, 6vw, 46px); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 16px; } .cmt-fdn-final-sub { font-size: 16.5px; line-height: 1.7; color: rgba(255,255,255,.72); margin: 0 auto 28px; max-width: 54ch; } .cmt-fdn-final-note { margin: 22px 0 0; font-size: 14px; color: rgba(255,255,255,.55); } .cmt-fdn-final-note a { color: var(--tan-light); } /* ---------- responsive layers ---------- */ @media (min-width: 640px) { .cmt-fdn-actions { flex-direction: row; flex-wrap: wrap; } .cmt-fdn-actions .cmt-btn { width: auto; } .cmt-fdn-actions--center { justify-content: center; } .cmt-fdn-stage-items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmt-fdn-all-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmt-fdn-fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .cmt-fdn-hero { padding: 64px 0 var(--cmt-section-y); } .cmt-fdn-hero-grid { grid-template-columns: 1.25fr .75fr; gap: 52px; } .cmt-fdn-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } .cmt-fdn-stage-items { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cmt-fdn-all-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } /* Four fixed tracks once there is room: the four-product stage gets its own clean row, and every card stays the same width whether its stage holds two or four. auto-fit was tried here and is wrong — it collapses the unused tracks, so a two-item stage ballooned into two half-page cards while a four-item stage stayed narrow. */ @media (min-width: 1240px) { .cmt-fdn-stage-items { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ================================================================== OFFERING PAGE — THE DEEP DIVE (template-offering.php) The offering pages used to be a red hero, one generic paragraph and a list of siblings. Everything below is the long form that now sits between the hero and the siblings, driven by cmt_feature_detail() in inc/foundation-detail.php. Every block is optional in the template, so an offering with no detail written yet simply renders the old short page. Rhythm after the red hero: white problem, cream how, white what you get, cream FAQ, white body/siblings. ================================================================== */ .cmt-offering-h2 { font-weight: 900; font-size: clamp(24px, 5vw, 36px); line-height: 1.1; letter-spacing: -.015em; text-transform: uppercase; margin: 0 0 24px; color: var(--black); } /* ---------- the problem (white) ---------- */ .cmt-offering-problem { background: #fff; color: var(--black); padding: var(--cmt-section-y) 0 0; } .cmt-offering-problem-text { font-size: clamp(18px, 3.4vw, 23px); line-height: 1.6; font-weight: 500; color: #333; margin: 0; max-width: 34ch; border-left: 3px solid var(--red); padding-left: 20px; } /* ---------- how it works (cream) ---------- */ .cmt-offering-how { background: var(--cream); color: var(--black); padding: var(--cmt-section-y) 0; margin-top: var(--cmt-section-y); } .cmt-offering-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; counter-reset: cmt-offering-step; } .cmt-offering-step { background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-md); padding: 22px 20px; } .cmt-offering-step-num { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--red); margin-bottom: 12px; } .cmt-offering-step h3 { font-size: 17px; font-weight: 800; margin: 0 0 8px; color: var(--black); } .cmt-offering-step p { font-size: 14.5px; line-height: 1.65; color: #5a5a5a; margin: 0; } /* ---------- what you get (white) ---------- */ .cmt-offering-get { background: #fff; color: var(--black); padding: var(--cmt-section-y) 0; } .cmt-offering-get-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; } .cmt-offering-get-note { font-size: 15px; line-height: 1.7; color: #5a5a5a; margin: 0; max-width: 42ch; } .cmt-offering-get-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .cmt-offering-get-list li { display: flex; gap: 11px; font-size: 15.5px; line-height: 1.55; color: #333; padding-bottom: 12px; border-bottom: 1px solid rgba(17,17,17,.07); } .cmt-offering-get-list li:last-child { border-bottom: 0; padding-bottom: 0; } /* ---------- FAQ (cream) — same accordion as the overview page ---------- */ .cmt-offering-faq { background: var(--cream); color: var(--black); padding: var(--cmt-section-y) 0; } .cmt-offering-faq-list { display: grid; gap: 10px; max-width: 780px; } .cmt-offering-faq-item { background: #fff; border: 1px solid rgba(17,17,17,.08); border-radius: var(--radius-md); padding: 0 18px; } .cmt-offering-faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 0; font-size: 15.5px; font-weight: 700; color: var(--black); cursor: pointer; list-style: none; } .cmt-offering-faq-item summary::-webkit-details-marker { display: none; } .cmt-offering-faq-item summary:focus-visible { outline: 3px solid var(--red-tint); outline-offset: 3px; } .cmt-offering-faq-caret { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; } .cmt-offering-faq-item[open] .cmt-offering-faq-caret { transform: rotate(180deg); } .cmt-offering-faq-item p { margin: 0; padding: 0 0 18px; font-size: 15px; line-height: 1.7; color: #4a4a4a; max-width: 66ch; } @media (min-width: 640px) { .cmt-offering-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .cmt-offering-get-grid { grid-template-columns: .8fr 1.2fr; gap: 56px; } .cmt-offering-problem-text { max-width: 44ch; font-size: 25px; padding-left: 26px; } } /* The mega-menu panel head is a link now, not a static label. */ .cmt-mega-panel-head-link { display: block; text-decoration: none; color: inherit; } .cmt-mega-panel-head-link:hover strong, .cmt-mega-panel-head-link:focus-visible strong { color: var(--red); } /* ================================================================== ONE-PLAN PRICING + ADD-ONS The pricing page used to hold three equal-weight cards. Growth and Domination are parked (see $CMT_ACTIVE_PLANS), so Foundation is now alone and must not stretch to the full 1200px — a single card that wide reads as a banner, not as a product. The add-ons section replaces what the extra tiers used to do. It is rendered by template-parts/section-addons.php and hides itself entirely until inc/addons.php has real entries, so none of this is visible on a site with no add-ons defined. ================================================================== */ /* A lone plan card: centred and capped, not stretched. */ .cmt-plans--single { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } /* ---- the add-ons section ---- */ .cmt-addons { font-family: var(--font-primary); color: var(--black); padding: var(--cmt-section-y) 0; } .cmt-addons--white { background: #fff; } .cmt-addons--cream { background: var(--cream); } .cmt-addons-head { max-width: 700px; margin: 0 0 40px; } .cmt-addons-title { font-weight: 900; font-size: clamp(27px, 5.4vw, 42px); line-height: 1.08; letter-spacing: -.015em; text-transform: uppercase; margin: 0; } .cmt-addons-title-red { color: var(--red); display: block; } .cmt-addons-sub { font-size: 16px; line-height: 1.7; color: #5a5a5a; margin: 16px 0 0; max-width: 60ch; } .cmt-addons-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 16px; } .cmt-addon { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(17,17,17,.1); border-radius: var(--radius-md); padding: 22px 20px; } /* On cream the card is white; on white it needs the cream to separate. */ .cmt-addons--white .cmt-addon { background: var(--cream); border-color: rgba(17,17,17,.07); } .cmt-addon-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .cmt-addon-icon { flex: 0 0 auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: #fff; border: 1px solid rgba(17,17,17,.08); color: var(--red); } .cmt-addons--white .cmt-addon-icon { background: #fff; } .cmt-addon-icon svg { width: 18px; height: 18px; } .cmt-addon-name { font-size: 16.5px; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: -.01em; } .cmt-addon-blurb { font-size: 14.5px; line-height: 1.6; color: #5a5a5a; margin: 0 0 14px; } .cmt-addon-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; } .cmt-addon-list li { display: flex; gap: 9px; font-size: 14px; line-height: 1.5; color: #4a4a4a; } /* Price sits at the card foot so a row of cards lines up on it. */ .cmt-addon-price { margin: auto 0 0; padding-top: 14px; border-top: 1px solid rgba(17,17,17,.08); } .cmt-addon-price-num { font-size: 19px; font-weight: 800; color: var(--black); letter-spacing: -.01em; } .cmt-addon-price-ask { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; color: #6b6b6b; } .cmt-addons-foot { margin: 30px 0 0; font-size: 15px; line-height: 1.7; color: #5a5a5a; max-width: 62ch; } .cmt-addons-foot a { color: var(--red); font-weight: 600; } @media (min-width: 640px) { .cmt-addons-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .cmt-addons-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } /* One-plan pricing: the header centres over the lone card. */ .cmt-pricing-head--center { margin-left: auto; margin-right: auto; text-align: center; } .cmt-pricing-head--center .cmt-pricing-sub { margin-left: auto; margin-right: auto; } /* ================================================================== PODCAST — APPLY ANCHOR + FORM The anchor lives on the form block, not the section, so "Apply to Be a Guest" lands on the form itself. scroll-margin-top clears the sticky header; without it the form sits under the nav after the jump. ================================================================== */ .cmt-pod-apply { scroll-margin-top: 110px; margin-bottom: 26px; } /* Brief highlight so it is obvious where the jump landed. */ .cmt-pod-apply:target .cmt-pod-form-placeholder, .cmt-pod-apply:target .cmt-pod-form { border-color: var(--tan); box-shadow: 0 0 0 4px rgba(200,169,122,.16); } .cmt-pod-form { border: 1px solid rgba(200,169,122,.3); border-radius: var(--radius-md); overflow: hidden; background: #fff; transition: border-color .2s ease, box-shadow .2s ease; } .cmt-pod-form iframe { display: block; width: 100%; min-height: 620px; border: 0; } .cmt-pod-form-placeholder { transition: border-color .2s ease, box-shadow .2s ease; } .cmt-pod-form-alt { margin-top: 12px !important; font-size: 14px; color: rgba(247,246,244,.6) !important; } .cmt-pod-form-alt a { color: var(--tan-light); text-decoration: none; border-bottom: 1px solid rgba(200,169,122,.4); overflow-wrap: anywhere; } .cmt-pod-form-alt a:hover { color: #fff; border-color: #fff; } @media (prefers-reduced-motion: reduce) { .cmt-pod-apply:target .cmt-pod-form-placeholder, .cmt-pod-apply:target .cmt-pod-form { transition: none; } }