/* ============================================================================ Private Tax Solutions - Brand Refresh Phase 1 Brand Standards Revision 3. Added 20 September 2026. EVERYTHING visual in this phase lives in this one file plus custom-fonts/pts-brand/. Both are attached by a single function, pts_brand_assets(), in the child theme's functions.php. Remove that one add_action and the site returns to its previous appearance. WHY THE OLD FAMILY NAMES ARE RE-DECLARED BELOW The typeface is not set in the theme options: accent_color and alternate_color are empty strings and heading_font is "no_change". The faces are named in 135 rules - 16 in the child stylesheet and 119 in the generated Bold Builder stylesheet, which is rebuilt from 259 page-builder records every time a page is saved. Editing generated output would be undone on the next save, and rewriting 259 records is a content-level change this phase does not authorise. So the legacy family names are pointed at the new faces instead. A rule that asks for Metropolis-Medium therefore gets Libre Franklin 500. This is deliberate; it is the only way to move the whole site onto the new typeface from one revertible file. ============================================================================ */ :root { /* Revision 3 palette */ --pts-ink: #072642; /* covers, hero fields, footers, headline text */ --pts-steel: #104267; /* subheads, chart bars, secondary fields */ --pts-gilt: #D4A24A; /* rules, eyebrows, numerals, ONE primary button */ --pts-deep-gilt: #896830; /* the only gold allowed as small text on light */ --pts-pale-gilt: #EED8BD; /* callout borders, table header fills */ --pts-champagne: #F6F0E1; /* warm callout panels */ --pts-ivory: #FBFAF7; /* default page ground */ --pts-alabaster: #F2EFE9; /* alternating bands, zebra rows */ --pts-charcoal: #2C343C; /* running body copy */ --pts-slate: #5C6670; /* secondary text */ --pts-hairline: #E3DDD1; /* rules and borders */ --pts-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --pts-text: "Libre Franklin", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* --------------------------------------------------------------------------- 1. The typeface, switched at the declarations rather than behind them. An earlier version of this file re-declared the old family names onto the new font files, so a rule asking for Metropolis-Regular was served Libre Franklin glyphs. The pixels were right but the stylesheet was not: measured on the live site, 400 of 544 visible text-bearing elements still named a legacy family, and five families were declared at once. That is replaced here. The root is switched first, so everything that inherits follows. Then each selector that named Metropolis, Montserrat or Crimson Text in the parent theme, the child theme or the generated builder stylesheet is redeclared - 147 of them, read out of those three files rather than guessed. Weight was encoded in the old family names, so it is carried across rather than flattened: -Thin, -ExtraLight, -Light and -Regular map to 400, -Medium to 500, -SemiBold to 600, -Bold and above to 700. Selectors whose last compound targets a headline keep the display face at 600; eyebrows and subtitles take the text face. Icon fonts are untouched: 29 of the 30 icon-font rules in the parent theme are on ::before / ::after pseudo-elements, which none of these element selectors match, and the single exception is a WooCommerce star rating on an inactive plugin. --------------------------------------------------------------------------- */ html, body, p, li, td, th, dd, dt, blockquote, figcaption, label, small, cite, input, select, textarea, button, optgroup { font-family: var(--pts-text); } #blog .latestArticles span.headline, #blog .ourLatestArticles span.headline, #cta-team span.headline, #faqTermSection .faqTermRow span.headline, #faqTermSection span.headline, #fgTermSection .fgTermRow span.headline, #fgTermSection span.headline, #homeBanner span.headline, #ourProcess span.headline, #requestAFreeCSBA span.headline, #servicesWeOffer .ourServices span.headline, #servicesWeOffer span.headline, #testimonials .clientTestimonial span.headline, #testimonials .testimonialHeadingText span.headline, .header.extralarge h1, .huge .headline, .requestAFreeCSBA .header.extralarge h1, h1, h2 { font-family: var(--pts-display) !important; font-weight: 600 !important; } #RefundList select, #blog .latestArticles div.btSubTitle, #blog .latestArticles p.btLatestPostContent, #blog .ourLatestArticles div.btSuperTitle, #blog .readAllPostsBtn span.btnInnerText, #counterSection .header .btSuperTitle, #cta-team .btText p, #faqTermSection .faqTermRow div.btSubTitle, #faqTermSection .learnMoreBtn span.btnInnerText, #faqTermSection div.btSubTitle, #fgTermSection .fgTermRow div.btSubTitle, #fgTermSection .learnMoreBtn span.btnInnerText, #fgTermSection div.btSubTitle, #homeBanner div.btSubTitle, #ourProcess .steps div.btSuperTitle, #ourProcess div.btSubTitle, #ourProcess div.btSuperTitle, #ourTeam .header.small .btSubTitle, #ourTeam .textDescription.header .btSubTitle, #pricingPackages .tabsHeader li, #requestAFreeCSBA .requestHereBtn span.btnInnerText, #requestAFreeCSBA div.btSubTitle, #servicesWeOffer .learnMoreBtn span.btnInnerText, #servicesWeOffer .ourServices div.btSubTitle, #servicesWeOffer div.btSubTitle, #servicesWeOffer div.btSuperTitle, #testimonials .clientTestimonial div.btSubTitle, #testimonials .clientTestimonial div.btSuperTitle, #testimonials .testimonialHeadingText div.btSuperTitle, #testimonials .testimonialText div.btText p, .btArticleAuthor, .btArticleComments, .choose-btn, .customBtn span.btnInnerText, .requestAFreeCSBA .header .btSubTitle, .reverse span.btnInnerText, .shada span.btnInnerText, custom-menu, featured-images, fluid-layout, responsive-layout, right-sidebar, section.btPageHeadline .header div.btSubTitle, span, span.priceLegend, sticky-post, theme-options, threaded-comments, ul#menu-main-menu { font-family: var(--pts-text) !important; font-weight: 400 !important; } #cta-team .customBtn span.btnInnerText, #ctaNewsletter .sendBtn span.btnInnerText, #faqTermSection .faqTermRow .rowItem:hover .learnMoreBtn span.btnInnerText, #faqTermSection .faqTermRow div.btSuperTitle, #fgTermSection .fgTermRow .rowItem:hover .learnMoreBtn span.btnInnerText, #fgTermSection .fgTermRow div.btSuperTitle, #pricingPackages .pricingCol span.heading, #servicesWeOffer .ourServices .rowItem:hover .learnMoreBtn span.btnInnerText, .customBtn.scheduleAMeetingBtn span.btnInnerText, .requestAFreeCSBA .requestHereBtn span.btnInnerText, .reverse.scheduleAMeetingBtn span.btnInnerText, .shada.scheduleAMeetingBtn span.btnInnerText { font-family: var(--pts-text) !important; font-weight: 500 !important; } #boldSiteFooterWidgetsRow .btBox > h4, #counterSection .btCounterHolder, #ctaPTS span.headline b, #getInTouch h4, #pricingPackages .pricingCol span.allPackagesReceive, #pricingPackages .pricingCol span.initialPlanningPhase, #pricingPackages .pricingCol span.ongoingSupport, #pricingPackages .pricingCol span.w2Statements, #requestAFreeCSBA span.headline b, #servicesWeOffer .ourServices div.btSuperTitle, #whyChoosePTS .servicesItem header.small .btSuperTitle, .servicesCForm .header .btSuperTitle, .testimonialAuthor .header.medium .btSuperTitle { font-family: var(--pts-text) !important; font-weight: 600 !important; } .btAnimNav li.btAnimNavDot, .btArticleMeta, .btBox .quantity, .btBox .tagcloud a, .btBox p.posted, .btBtn, .btCatFilter, .btCommentsBox .commentTxt p.edit-link, .btCommentsBox .commentTxt p.reply, .btContentHolder table thead th, .btCounterHolder, .btCounterHolder .btCountdownHolder .days_text, .btCounterHolder .btCountdownHolder .hours_text, .btCounterHolder .btCountdownHolder .minutes_text, .btCounterHolder .btCountdownHolder .seconds_text, .btCustomMenu .quantity, .btCustomMenu p.posted, .btIco, .btNoMore, .btPagination, .btPriceTableSticker, .btProgressContent, .btQuoteBooking .btContactSubmit, .btQuoteBooking .btTotalNextWrapper, .btSiteFooterWidgets .quantity, .btSiteFooterWidgets p.posted, .btTags ul a, .btTextLogo, .btTopBox .quantity, .btTopBox p.posted, .btVisualizer, .comment-respond .btnOutline button[type="submit"], .header .btSubTitle, .header .btSuperTitle, .headline em.animate, .mainHeader, .menuPort, .post-password-form input[type="submit"], .tabsHeader li, .tabsVertical .tabAccordionTitle, .widget_calendar table caption, .widget_recent_reviews, .widget_rss li a.rsswidget, .widget_shopping_cart .total, body, h3, h4, h4.nbs a .nbsItem .nbsDir, h5, h6, input, input:not([type='checkbox']):not([type='radio']), p, select, textarea { font-family: var(--pts-text) !important; } /* --------------------------------------------------------------------------- 2. The broken declaration. finance/style.css line 7274 sets .header .btSubTitle to "Metropolis", a family with no face, with !important. The parent theme is read-only, so it is answered here at the same specificity, later in the cascade. --------------------------------------------------------------------------- */ .header .btSubTitle { font-family: var(--pts-text) !important; font-weight: 400; color: var(--pts-slate); } /* --------------------------------------------------------------------------- 3. Type scale - Revision 3 --------------------------------------------------------------------------- */ /* Colour is set on body only, never on p. Setting it on p overrode the light text the theme puts on the dark footer and the dark call-to-action bands and left them unreadable; inheritance from body stops wherever the theme has already coloured a section, which is the behaviour we want. */ body, .btContentHolder { font-family: var(--pts-text); font-size: 16px; line-height: 1.65; letter-spacing: 0; } body { color: var(--pts-charcoal); } p { font-family: var(--pts-text); line-height: 1.65; } /* The builder names a font on the headline elements themselves, at a higher specificity than a bare h1/h2, so the display face has to be forced here or headlines keep the text face. */ h1, .header h1, section.btPageHeadline .header h1, h1 span.headline, .header h1 span.headline { font-family: var(--pts-display) !important; font-weight: 600; font-size: clamp(46px, 5vw, 88px); letter-spacing: -0.015em; line-height: 1.08; } h2, .header h2, h2 span.headline, .header h2 span.headline { font-family: var(--pts-display) !important; font-weight: 600; font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.01em; line-height: 1.15; } h3, .header h3 { font-family: var(--pts-text) !important; font-weight: 600; font-size: 17px; letter-spacing: -0.005em; line-height: 1.4; } h4, h5, h6 { font-family: var(--pts-text); font-weight: 600; letter-spacing: -0.005em; color: var(--pts-ink); } /* Eyebrow / label. Deep Gilt is the only gold allowed as small text on light. */ .btSuperTitle, .header .btSuperTitle { font-family: var(--pts-text); font-weight: 600; font-size: 11px; letter-spacing: 0.19em; text-transform: uppercase; color: var(--pts-deep-gilt); } /* Display numerals - tabular, so counters do not jitter as they animate. */ .btCounterHolder, .btCounterHolder .btCounter { font-family: var(--pts-display); font-weight: 600; font-size: clamp(30px, 3.2vw, 42px); letter-spacing: 0; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: var(--pts-gilt); } /* Caption / footnote */ figcaption, .wp-caption-text, .btArticleMeta, small { font-family: var(--pts-text); font-weight: 400; font-size: 13.5px; letter-spacing: 0; color: var(--pts-slate); } /* Folio / running head */ .btBreadCrumbs, .btBreadCrumbs li, .btBreadCrumbs a { font-family: var(--pts-text); font-weight: 600; font-size: 9.5px; letter-spacing: 0.17em; text-transform: uppercase; color: var(--pts-slate); } /* Buttons keep the text face; never the display face. */ .btBtn, .btBtn span, button, input[type="submit"], .customBtn, .shada { font-family: var(--pts-text); font-weight: 600; letter-spacing: 0.02em; } /* Cormorant is a display face only. Tables and fields stay in Libre Franklin. */ table, th, td, input, select, textarea, .wpcf7-form-control { font-family: var(--pts-text); } /* WPCode snippet 6452 also asked for the faceless "Metropolis". */ /* Revision 3 puts headline text in Ink Blue. It is applied only inside light sections: the same h1/h2 elements are used on the dark call-to-action bands where they must stay white, and nothing in the markup distinguishes the two except the theme's own skin class. Headlines left alone keep the site's existing #004B82, which is 9.0:1 on white and passes either way. */ .btLightSkin h1, .btLightSkin h2, .btLightSkin .header h1, .btLightSkin .header h2 { color: var(--pts-ink); } /* --------------------------------------------------------------------------- 4. Grounds --------------------------------------------------------------------------- */ body, .btContentWrap { background-color: var(--pts-ivory); } .btLightAccentSkin, .btAccentLightSkin { background-color: var(--pts-alabaster); } /* --------------------------------------------------------------------------- 5. Colour - every selector below was read out of the live stylesheets, not guessed. Gilt is rationed: numerals, eyebrows, small rules and the single primary call to action. Everything else that was orange goes blue. --------------------------------------------------------------------------- */ /* Every selector below was taken from a computed-style census of the live pages, not from the source stylesheets. 1,491 orange resolutions across the four pages collapse to the fourteen targets handled here. Declarations that exist in the source but never win the cascade are deliberately left alone: overriding those in the first pass made three sets of button labels invisible. Gilt is rationed to what Revision 3 allows: small rules, eyebrow labels and exactly one primary button. Everything else that was orange becomes blue. */ /* 5a. Accent buttons in general - Ink Blue ground, white label, 15.4:1. This is the default; the single primary button overrides it in 5b. */ .btBtn.btnFilledStyle.btnAccentColor, .btBtn.btnOutlineStyle.btnAccentColor:hover, a.chooseThisPlanBtn.customBtn, .chooseThisPlanBtn.customBtn, .customBtn, button.choose-btn, form.wpcf7-form .wpcf7-submit { background-color: var(--pts-ink) !important; border-color: var(--pts-ink) !important; color: #FFFFFF !important; } .btBtn.btnFilledStyle.btnAccentColor span, .btBtn.btnFilledStyle.btnAccentColor span.btnInnerText, a.chooseThisPlanBtn.customBtn span, .customBtn span, button.choose-btn span, form.wpcf7-form .wpcf7-submit span { color: #FFFFFF !important; } /* Outline variant keeps a light ground, so the label must stay dark. */ .btBtn.btnOutlineStyle.btnAccentColor { background-color: transparent !important; border-color: var(--pts-ink) !important; color: var(--pts-ink) !important; } .btBtn.btnOutlineStyle.btnAccentColor span, .btBtn.btnOutlineStyle.btnAccentColor span.btnInnerText { color: var(--pts-ink) !important; } .btBtn.btnOutlineStyle.btnAccentColor::before { background-color: var(--pts-ink) !important; } .btBtn.btnOutlineStyle.btnAccentColor:hover span, .btBtn.btnOutlineStyle.btnAccentColor:hover span.btnInnerText { color: #FFFFFF !important; } /* 5b. THE one primary button - the persistent "Schedule a Meeting" in the header bar. Gilt ground with an Ink Blue label is 6.6:1. White on Gilt is 2.3:1 and is never used. Placed after 5a so it wins for this one. It is anchored on .topBarInMenu, the header bar, because the class names are not usable as identity here: scheduleAMeetingBtn is on six different buttons, and the .shada class that reads like a primary-button marker is actually on "READ ALL POSTS" in the blog strip. Keying on .shada in the previous pass turned the wrong button gold and left the header CTA blue. */ .topBarInMenu .btBtn.btnFilledStyle.btnAccentColor, .menuPort .btTopBox .btBtn.btnFilledStyle.btnAccentColor { background: var(--pts-gilt) !important; background-color: var(--pts-gilt) !important; border-color: var(--pts-gilt) !important; color: var(--pts-ink) !important; } .topBarInMenu .btBtn.btnFilledStyle.btnAccentColor span, .topBarInMenu .btBtn.btnFilledStyle.btnAccentColor span.btnInnerText, .menuPort .btTopBox .btBtn.btnFilledStyle.btnAccentColor span.btnInnerText { color: var(--pts-ink) !important; } .topBarInMenu .btBtn.btnFilledStyle.btnAccentColor:hover, .menuPort .btTopBox .btBtn.btnFilledStyle.btnAccentColor:hover { background: var(--pts-deep-gilt) !important; background-color: var(--pts-deep-gilt) !important; border-color: var(--pts-deep-gilt) !important; } .topBarInMenu .btBtn.btnFilledStyle.btnAccentColor:hover span.btnInnerText, .menuPort .btTopBox .btBtn.btnFilledStyle.btnAccentColor:hover span.btnInnerText { color: #FFFFFF !important; } /* 5c. Hover fills that were orange */ .reverse:hover, .requestAFreeCSBA .requestHereBtn:hover, #requestAFreeCSBA .requestHereBtn:hover, #homeBanner .learnMore:hover { background-color: var(--pts-ink) !important; border-color: var(--pts-ink) !important; } .reverse:hover span.btnInnerText, .requestAFreeCSBA .requestHereBtn:hover span.btnInnerText, #homeBanner .learnMore:hover span.btnInnerText { color: #FFFFFF !important; } .reverse.scheduleAMeetingBtn:before { background-color: var(--pts-ink) !important; } #homeBanner .learnMore { border-color: var(--pts-steel) !important; } #homeBanner .learnMore .btnInnerText { color: var(--pts-steel) !important; } /* The .learnMoreBtn labels inside the service cards are deliberately NOT touched. The builder stylesheet colours them orange but that declaration loses to the theme, which paints them white on a filled blue pseudo-element. Forcing a colour on them in the first pass made the labels vanish. */ /* 5d. Counter numerals. The brief allows display numerals in Gilt, but these sit on white and Gilt on white is 2.2:1 - the brief's own contrast table marks that combination FAIL and says Gilt is never text on a light ground. So the numerals take Ink Blue, 15.9:1, and Gilt stays on the rule beneath them. The widget renders every digit 0-9 as its own span, which is why the census counted 950 resolutions here for four visible numbers. */ .btCounterHolder, .btCounterHolder *, .btCounter, .btCounter * { color: var(--pts-ink) !important; } /* Eyebrow labels that were orange - the captions under the counters and the team-section label. Deep Gilt is the only gold allowed as small text on light: 5.1:1 on white. Scoped deliberately. .btSuperTitle is not only an eyebrow on this site: on the contact page it carries a full-size subheading ("We're Here for You, Anywhere"). Colouring the class outright turned that heading brown, so only the places the census found orange are recoloured. */ #counterSection .btSuperTitle, #counterSection .btSuperTitle span, #counterSection .header .btSuperTitle, #ourTeam .header.small .btSuperTitle { color: var(--pts-deep-gilt) !important; } /* 5e. Icons carrying the theme's alternate colour - small marks on a light ground, so Deep Gilt at 5.0:1 rather than Gilt at 2.2:1. */ .btIcoAlternateColor .btIcoHolder, .btIcoAlternateColor .btIcoHolder:before, .btIcoAlternateColor .btIcoHolder::before, .btIcoAlternateColor span, .btIco.btIcoDefaultType.btIcoAlternateColor .btIcoHolder:before, .btLightSkin .btIco.btIcoDefaultType.btIcoAlternateColor .btIcoHolder:before { color: var(--pts-deep-gilt) !important; } /* The filled variant is a solid disc: Gilt disc, Ink Blue glyph, 6.6:1. */ .btIco.btIcoFilledType.btIcoAlternateColor .btIcoHolder:before { -webkit-box-shadow: 0 0 0 1em var(--pts-gilt) inset !important; box-shadow: 0 0 0 1em var(--pts-gilt) inset !important; color: var(--pts-ink) !important; } /* 5f. Emphasis words inside headlines. These sit on the dark blue call-to-action band, so they must go lighter, not darker. Gilt on that ground is 5.3:1. Ink Blue would have made them disappear, which is what the first pass did. */ b.animate.animated, .headline b.animate.animated, .btAccentColorBackground .headline b.animate.animated, .btAccentDarkColorBackground .headline b.animate.animated { color: var(--pts-gilt) !important; } /* Emphasis words on a light ground instead */ .btLightSkin .headline b.animate.animated, .taxPlanningProcessWorks .header span.headline, .whatwedo .ourTaxPreparationProcess span.headline, #requestAFreeCSBA .taxUpdateReminder span.headline { color: var(--pts-ink) !important; } /* 5g. Small marker bars - these are the Gilt rules the brief asks for. */ span.btnInnerText::before, a.more-link::before, #servicesWeOffer .learnMoreBtn span.btnInnerText::before, #blog .latestArticles p.btLatestPostContent a.more-link::before, #financialGuides span.fgPostTitle:before, .faqTerms span.headline:hover:before { background-color: var(--pts-gilt) !important; } .btDash.bottomDash .dash:after { border-color: var(--pts-gilt) !important; } /* 5h. Borders and panels - Pale Gilt is the brief's callout-border colour. */ .testimonialInnerRow, div.boldRow.testimonialInnerRow { border-color: var(--pts-pale-gilt) !important; } #pricingPackages .pricingCol span.allPackagesReceive, #pricingPackages .itrppCol.pricingCol span.allPackagesReceive, #pricingPackages .proPlan.pricingCol span.allPackagesReceive { border-color: var(--pts-pale-gilt) !important; } #pricingPackages .tabsHeader li span:hover, #pricingPackages .tabsHeader li.on span { color: var(--pts-ink) !important; } /* 5i. Blog date badge - white on Steel Blue is 10.5:1. */ #blog .latestArticles div.btSubTitle, .latestArticles div.btSubTitle { background-color: var(--pts-steel) !important; color: #FFFFFF !important; } .latestArticles div.btSubTitle * { color: #FFFFFF !important; } /* 5j. Navigation, breadcrumbs and footer links */ ul#menu-main-menu > li.current-menu-item > a, ul#menu-main-menu li a:hover { color: var(--pts-steel) !important; } section.btSiteFooter a:hover, section.btSiteFooterWidgets .widget_nav_menu ul li a:hover { color: var(--pts-gilt) !important; } .btLightSkin .btBreadCrumbs li:not(:last-child):after, .btDarkSkin .btLightSkin .btBreadCrumbs li:not(:last-child):after { background-color: var(--pts-slate) !important; } .header > .btSubTitle > span.fgPostTitle > a:hover { color: var(--pts-steel) !important; } /* Breadcrumbs sit on the dark page-headline band on inner pages, where Deep Gilt is only 3.4:1. They take the light treatment instead. */ .btPageHeadline .btBreadCrumbs, .btPageHeadline .btBreadCrumbs a, .btPageHeadline .btBreadCrumbs li, .btDarkSkin .btBreadCrumbs, .btDarkSkin .btBreadCrumbs a { color: var(--pts-pale-gilt) !important; } /* 5k. The theme's section-level alternate background */ .btAlternateColorBackground { background-color: var(--pts-ink) !important; } /* 5l. Form focus rings */ input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus { border-color: var(--pts-steel) !important; box-shadow: 0 0 4px 0 rgba(16, 66, 103, 0.35) !important; } /* --------------------------------------------------------------------------- 6. The schedule page heading, on one line at desktop width. Measured on the live page at 1440 px: the visible text is drawn by span.headline inside the h1 at 72px, and wraps to 2 lines in its 1340px container. Stepping the size down and re-measuring: 68px still wraps, 64px is the largest that fits on one line. A viewport-relative size holds the same text-to-container ratio across desktop widths; 4.1vw gives 59px at 1440, which measured as one line with margin to spare, and the cap stops it growing past the measured fit on wide screens. Confined to >=1024px so the phone layout is untouched: at 390px the heading sits on 4 lines at 46px with no overflow, which is the sane wrap the brief asks for. Scoped to .center-headinggg, which the database shows on page 4307 only. --------------------------------------------------------------------------- */ @media (min-width: 1024px) { .center-headinggg h1 span.headline, .center-headinggg span.headline { font-size: clamp(40px, 4.1vw, 62px) !important; } } /* #TableTitle is the pricing table's title and renders as the page's h2, so it takes the display face like any other h2. It is called out separately because its id selector out-specifies the bare h2 rule above: measured on /pricing/, the h2 was resolving to Libre Franklin through this id while every other h1 and h2 on the site was already Cormorant. The brief's "never for tables" applies to table contents, not to the heading that introduces one. */ #TableTitle { font-family: var(--pts-display) !important; font-weight: 600 !important; }