/** * Dealer-FX Component Overrides * ----------------------------------------------------------------------------- * Component-level styling on top of the parent theme. Add one clearly-labeled section * per component. All values reference brand tokens. * * Depends on: brand-tokens.css */ /* --- Hero video background: stop the overlay snapping in ------------------- */ /* The parent theme reveals the row background on a `.loaded` class (added when the video is ready), but the gradient overlay has a 0s transition, so with no poster the bright first frame shows and the dark gradient pops in on load. Keep the hero overlay painted from the first frame and ease any change. NOTE: `#fws_6a72cf4d82323` is the parent theme's generated row id — if the hero row is rebuilt and the id changes, add a stable "Extra class name" on the row (e.g. dfx-hero) and retarget this rule. Scoped; parent theme untouched. */ #fws_6a72cf4d82323 .row-bg-overlay { opacity: 1 !important; /* Promote the overlay to its own compositing layer so it paints above the video's GPU layer from first frame (without this it only composites above after a scroll/repaint). */ transform: translateZ(0); will-change: transform; transition: opacity 0.5s ease !important; } #fws_6a72cf4d82323 .row-bg-wrap .row-bg { transition: opacity 0.5s ease !important; } /* --- Header: spacing between logo and main nav ----------------------------- */ /* Push the main menu (not the utility "buttons" group) right of the logo. */ #header-outer #top nav > ul.sf-menu:not(.buttons) { margin-left: var(--dfx-nav-logo-gap); } /* --- Main navigation: top-level (first layer) links ------------------------- */ /* Selectors mirror the parent theme's own nav specificity so the override lands without needing !important. */ #header-outer #top nav > ul.sf-menu > li > a, #header-outer #top nav > ul.sf-menu > li > a .menu-title-text { color: var(--dfx-nav-link); } #header-outer #top nav > ul.sf-menu > li > a:hover, #header-outer #top nav > ul.sf-menu > li > a:hover .menu-title-text, #header-outer #top nav > ul.sf-menu > li > a:focus, #header-outer #top nav > ul.sf-menu > li > a:focus .menu-title-text, #header-outer #top nav > ul.sf-menu > li.sfHover > a, #header-outer #top nav > ul.sf-menu > li.sfHover > a .menu-title-text { color: var(--dfx-nav-link-hover); } /* --- The nav type scale — THE CHILD THEME OWNS SIZE, NOT FAMILY --------------- Every text size in the header came from Salient's Theme Options and none of it was on the ramp: top-level links and megamenu items at 14.4px, megamenu column heads at 11.2px, and megamenu sub-items on a 1.71 leading that read as a list of unrelated lines rather than a set. WHY THIS IS THE CHILD THEME'S TO TAKE, given the panel had it. Salient emits family, size, leading and weight as ONE bundle, gated on the FAMILY field — css/fonts.php:412 checks `navigation_font_family['attrs_in_use']` and then writes all four properties. So the 14.4px was never a decision anybody made in that panel; it rode along on the choice to set the site font to Inter. Nothing in Theme Options says the nav should be 14.4px. SO THE SPLIT IS BY PROPERTY, NOT BY REGION: the child theme owns size, leading and tracking, and Theme Options keeps font-family and color, which are the things actually chosen there. That also means this block does NOT need the fields cleared in the panel, which matters — option state lives in the DB, dies in a Kinsta rebuild and already differs between local and staging. THESE RULES TARGET THE SPAN, NOT THE ANCHOR, and that is deliberate rather than incidental. Salient sets font-size on the `a`; the text lives in `span.menu-title-text`, so a size on the span wins for the text without competing with the parent theme's anchor rule at all. Color above already uses both, because color has to cover the anchor for the cases where no span is emitted. ONE SIZE FOR THE WHOLE MEGAMENU, differentiated by case and weight rather than by size — 14px throughout, column heads uppercase at 600, the featured item 600, the rest 500. Four sizes became one. This is the pattern the footer already uses. */ #header-outer #top nav > ul.sf-menu > li > a .menu-title-text, #header-outer #top nav ul.sub-menu li > a .menu-title-text { font-size: var(--dfx-size-body-sm); line-height: var(--dfx-line-height-ui); /* Weight pinned: Theme Options gives 500 locally and 400 on Kinsta, and 400 at 14px in mid-gray reads thin. 500 is the value that looked right. */ font-weight: 500; } /* THE MEGAMENU COLUMN HEADS, AND THEY NOW MATCH THE FOOTER'S EXACTLY. `.nectar-inherit-h6` is Salient deriving these from its h6 typography option, which is 11.2px/0.13em — the value recorded as under AA and outstanding as "a DB change". It is not a DB change any more. This is the theme's chrome-label role, so it reads --dfx-size-label like the footer widget titles and the "Trusted by" separator, and restates the caps treatment because a span in a menu inherits none of it. 0.14em NOT 0.13em, closing a gap that existed for no reason: the footer titles and these were the same voice at two tracking values because one came from the panel and one from this file. 2-3-4 to clear the generic megamenu rule above at 2-2-4 — the extra class alone is not enough when the other selector carries more elements. */ #header-outer #top nav ul.sub-menu li > a .menu-title-text.nectar-inherit-h6 { font-size: var(--dfx-size-label); line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; /* WEIGHT IS PINNED HERE BECAUSE THE TWO ENVIRONMENTS DISAGREE ABOUT IT, and that is only visible if you measure staging. dealerfx.test renders these heads at 600 and dealerfx.kinsta.cloud renders them at 400 — same theme, same markup, different h6 weight in Theme Options. So the first version of this rule looked complete locally while shipping a 400-weight header label to staging. THAT 400 IS MOST OF WHY THE HEADER READ AS "A DIFFERENT FONT ALTOGETHER" from the footer. It is not a different family — both compute Inter and both measure identical to a canvas-rendered Inter to 0.00px. It is 400 in #9AA0A6 against 600 in #676E7E, and at label size that difference in weight plus a 2:1 difference in contrast reads as a different typeface rather than as the same label twice. Fourth "true on local, wrong on staging" bug in this theme's history and the third in the footer/header region. Measure Kinsta. COLOR IS --dfx-column-head-ink, WHICH IS STEEL GRAY AND A KNOWN AA FAILURE. Chosen deliberately; the arithmetic and the trade are recorded on the token in brand-tokens' companion block in brand-base.css. The point that survives regardless of the value: this is stated here rather than inherited from Salient's h6 color in Theme Options, so the header and the footer now agree by construction and agree on both environments. Changing the two together is one token edit. */ font-weight: var(--dfx-weight-emphasis); /* COLOR IS THE PROPERTY THAT WAS ACTUALLY INCONSISTENT, and it took a screenshot to see it — size, weight, tracking, family and case already matched the footer exactly once this rule existed. Measured: the megamenu heads rendered #9AA0A6 Steel Gray at 2.64:1 while the footer titles rendered #676E7E Pewter at 5.11:1. Same words, same role, two inks, and only one of them legal. THE STEEL GRAY CAME FROM SALIENT'S h6 COLOR IN THEME OPTIONS, which is the thing recorded as "the megamenu column heads are still under AA, that half is a DB change, still outstanding". It is not a DB change. --dfx-label-ink is the theme's label ink role, it is what the footer titles already read, and it brings the dark-band re-pointing with it — so this one declaration makes the header match the footer, clears AA at 5.11:1, and removes the last Theme Options dependency in the megamenu. line-height 1.4 NOT --dfx-line-height-ui, matching the footer titles literally. The two were 1.45 and 1.40, which is invisible on a single-line caps label, but "same size, same weight, etc." is easier to keep true if the numbers are the same number. */ color: var(--dfx-column-head-ink); } /* Space below the column heads, matched to the footer's. The footer widget titles carry 20px under a 13px label; these had only the 6px of padding header-megamenu.css gives every megamenu link. Stated as a total rather than added to that 6px so the gap does not move if Salient's padding does. */ #header-outer nav > ul > li.megamenu > ul > li > a { padding-bottom: 1.25rem; } /* The featured megamenu item ("Service Intelligence Platform Overview"). Chrome size, 600 to carry the emphasis — stated rather than left to Salient's h5 option, and needed here because the rule above now pins 500 and this selector is more specific. */ #header-outer #top nav ul.sub-menu li > a .menu-title-text.nectar-inherit-h5 { font-size: var(--dfx-size-body-sm); line-height: var(--dfx-line-height-ui); font-weight: var(--dfx-weight-emphasis); } /* --- Utility (secondary) navigation ---------------------------------------- */ /* The "buttons" menu group holds Support, Client login, and the CTA. The caption step, one below the main nav's 14px — it was 0.81rem/12.96px, described here as "90% of the parent theme's default 14.4px" back when that default was what the nav rendered. Both numbers are the theme's own now, and 13 against 14 is the same relationship the hand-set values were reaching for. */ #header-outer #top nav > ul.buttons > li > a { font-size: var(--dfx-size-caption); } /* Tighten spacing between the utility text links (leaves the CTA pill intact). */ #header-outer #top nav > ul.buttons > li.nectar-regular-menu-item > a { padding-left: var(--dfx-utility-nav-pad); padding-right: var(--dfx-utility-nav-pad); } /* --- "Book a demo" CTA: inverted primary button ---------------------------- */ /* Light pill with Obsidian text — the header's primary action on the dark bar. the parent theme paints the pill via the anchor's ::before. */ #header-outer #top nav > ul.buttons > li.button_solid_color_2 > a:before { background-color: var(--dfx-btn-inverted-fill); border: none; } #header-outer #top nav > ul.buttons > li.button_solid_color_2 > a:hover:before, #header-outer #top nav > ul.buttons > li.button_solid_color_2 > a:focus:before { background-color: var(--dfx-btn-inverted-fill-hover); } /* Pull the pill flush to the container edge. The li already ends at the container width; the anchor paints the pill and carries 20px of side margin from the parent theme's dynamic styles, so the pill sat 20px inside the content edge. Salient zeroes this itself, but only for data-lhe="animated_underline" — ours is "default". */ #header-outer #top nav > ul.buttons > li.button_solid_color_2:last-child > a { margin-right: 0; } #header-outer #top nav > ul.buttons > li.button_solid_color_2 > a, #header-outer #top nav > ul.buttons > li.button_solid_color_2 > a .menu-title-text, #header-outer #top nav > ul.buttons > li.button_solid_color_2 > a:hover, #header-outer #top nav > ul.buttons > li.button_solid_color_2 > a:focus, #header-outer #top nav > ul.buttons > li.button_solid_color_2 > a:hover .menu-title-text, #header-outer #top nav > ul.buttons > li.button_solid_color_2 > a:focus .menu-title-text { color: var(--dfx-btn-inverted-text); } /* --- "Trusted by" separator (WPBakery Separator-with-text) ------------------ */ /* Match the prototype: small uppercase tracked label + thin, faint lines, instead of the parent theme's larger title-case label with prominent lines. Scoped to the homepage. ONE OF THREE STATED EXCEPTIONS TO brand-base's "no font-size on a heading outside the scale block", and it used to claim to be the only one. The other two are the page-header title in brand-base.css, which has to mirror Salient's over-specific selectors to be reached at all, and the footer widget h4 further down this file. All three share the same shape: the element is not ours, so the level it arrives at is not a design decision and the size has to be restated. The full list is here because "the one exception" is the kind of claim that quietly becomes false, and a reader checking the invariant needs to know what they are allowed to find. It is an exception rather than a bug because the element is not ours: WPBakery's Separator-with-text emits whichever heading level the editor picked in the element settings, and the thing it emits is a decorative label, not a rung of the document outline. All four levels are listed for that reason — the selector cannot know which one the builder wrote. Every one of the three reads a scale token, so the invariant that actually matters — no off-scale heading size anywhere — holds even where the letter of the rule does not. THE SIZE IS --dfx-size-label, NOT --dfx-size-h6, and the difference matters. This read the h6 step for a while, which was fine when h6 was 13–14px and wrong the moment h6 became 16px: the separator followed it up and started shouting. It was never really a heading step — this is CHROME, a decorative rule with a word on it, not a rung of the document outline. --dfx-size-label exists for exactly that job and is shared with .dfx-eyebrow and the footer widget titles. THE UPPERCASE AND TRACKING ARE RESTATED HERE, AND CANNOT BE INHERITED. This rule targets h1 through h4, because WPBakery emits whichever level the editor picked in the element settings, and none of them is an h6 — so nothing can be picked up from the h6 label block. Keep these two values in step with it by hand; that block is the source and this is a copy, and the copy exists only because the element is not ours to re-tag. COLOR IS --dfx-label-ink, which is both the fix to a contrast failure and the reason this now works on any surface. It was --dfx-steel-gray #9AA0A6 at 2.64:1, under AA, carried deliberately so this matched the megamenu exactly — a decision that traded legibility for consistency with something that was itself broken. The label ink resolves to Pewter at 4.72:1 on light, and re-points itself on dark bands through the escape hatches in brand-base.css, which a flat gray never did. The megamenu is now the only one of the pair still failing. */ .home .vc_separator.vc_separator-has-text h1, .home .vc_separator.vc_separator-has-text h2, .home .vc_separator.vc_separator-has-text h3, .home .vc_separator.vc_separator-has-text h4 { font-family: var(--dfx-font-body); font-size: var(--dfx-size-label); font-weight: var(--dfx-weight-emphasis); text-transform: uppercase; letter-spacing: 0.14em; color: var(--dfx-label-ink); } .home .vc_separator.vc_separator-has-text .vc_sep_line { border-top-width: 1px !important; border-top-color: rgba(255, 255, 255, 0.12) !important; } /* --- Breadcrumbs ------------------------------------------------------------ */ /* Rendered by template-parts/breadcrumbs.php on the content model post types. Salient's own breadcrumb helper is a Yoast wrapper and this site runs SmartCrawl, so there is no parent theme component to extend here. The separator is a CSS ::before on the pseudo-element rather than a character in the markup, so it is never selected when copying the trail and never read aloud by a screen reader — the
    already conveys the sequence. */ .dfx-breadcrumbs { margin-bottom: 1.25rem; } .dfx-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; /* The parent theme puts list-style and padding on most ul/ol. */ margin: 0; padding: 0; list-style: none; font-family: var(--dfx-font-body); font-size: var(--dfx-size-caption); /* 13px */ line-height: var(--dfx-line-height-ui); color: var(--dfx-color-text-muted); } .dfx-breadcrumbs__item { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .dfx-breadcrumbs__item + .dfx-breadcrumbs__item::before { content: "\203A"; /* Single right angle quote. */ margin: 0 0.5rem; color: var(--dfx-steel-gray); } .dfx-breadcrumbs__item a { color: var(--dfx-color-text-muted); text-decoration: none; border-bottom: 1px solid transparent; } .dfx-breadcrumbs__item a:hover, .dfx-breadcrumbs__item a:focus { color: var(--dfx-color-link-hover); border-bottom-color: currentColor; } /* The current page. Not a link, and weighted so the end of the trail reads as "you are here" without needing a color to say it. */ .dfx-breadcrumbs__item [aria-current="page"] { font-weight: var(--dfx-weight-emphasis); color: var(--dfx-color-text); } /* --- Product header band ---------------------------------------------------- */ /* THE DEFAULT PRODUCT HEADER. Rendered by single-dfx_product.php above .container-wrap, so it is genuinely full-bleed rather than fighting Salient's gutter with negative margins. It stands down when the page has a Product Hero element, which brings its own full_width_section row. Both headers render the SAME template part — template-parts/product/hero.php, from Hero::args() — so everything inside is styled by the .dfx-hero rules further down this file. What follows only paints the band around it. The one deliberate exception is the breadcrumb, which needs a light-on-dark treatment here that it does not need anywhere else. COLOR COMES FROM THE PAGE, NOT FROM HERE. single-dfx_product.php sets --dfx-band-bg, --dfx-band-heading and optionally --dfx-band-subhead as inline custom properties, resolved by Band_Theme::resolve() — the product's own override, else its product_category term, else that term's ancestors, else Obsidian on Signal White. The fallbacks below are the same brand default, so the band still renders correctly if the attribute is ever missing rather than collapsing to white-on-white. Custom properties rather than inline `background` and `color` so this file keeps deciding which properties consume them — the subhead derives 74% of the text color, and that arithmetic belongs in CSS. */ .dfx-product-band { background-color: var(--dfx-band-bg, var(--dfx-obsidian)); color: var(--dfx-band-heading, var(--dfx-signal-white)); } /* Clearance for the transparent navigation. Products always start transparent (see inc/salient-page-header.php), so the nav sits over this band and its content has to start below it. Salient's #header-space is 72px at desktop and the nav shrinks on scroll, so the padding is generous rather than exact — matching the nav height precisely would leave the headline touching the logo. The hero variant does not get this rule: its clearance is the builder row's own top padding, and adding ours on top would double it. Width and horizontal gutter are NOT set here. The element also carries Salient's .container class, so the band's copy aligns with the content below it and follows the container width theme option instead of a number of ours that would drift from it. Only the vertical padding is ours. */ .dfx-product-band__inner { padding-top: 7.5rem; padding-bottom: 5rem; } @media (max-width: 999px) { .dfx-product-band__inner { padding-top: 6rem; padding-bottom: 3.5rem; } } /* --- The lifted hero row's measure ------------------------------------------ */ /* THE OTHER HEADER'S CONTAINER. single-dfx_product.php lifts the Product Hero element's row above the in-page menu and wraps it in Salient's .container, because full_width_section.php only emits an inner container under fullpage.js — a full-width-BACKGROUND row takes its content width from .container.main-content, which the lift moves it out of. `width: 100%` IS LOAD-BEARING. #ajax-content-wrap is a column flex container, and .container carries `margin: 0 auto`; auto margins consume the free space and cancel the stretch, so the box shrank to its content — 860px where the submenu bar's container measured 1100px, and the copy stopped lining up with it. This resolves against the flex container and max-width still caps it. `align-self: stretch` looks like the flexbox-native answer and does nothing here, for the same reason: auto margins outrank it. */ .dfx-product-header { width: 100%; } /* Breadcrumbs on dark. The default rules are tuned for a light page, so the contrast inverts here rather than being restated: white at 70% for the trail, full white for the current page, which keeps the "you are here" signal without relying on color alone. */ /* Breadcrumb to eyebrow. Generous, because these are two different kinds of thing — one is navigation out of the page, the other is the start of its content — and at 2rem they read as a single stacked block. */ .dfx-product-band .dfx-breadcrumbs { margin-bottom: 5rem; } @media (max-width: 999px) { .dfx-product-band .dfx-breadcrumbs { margin-bottom: 3.5rem; } } /* Derived from the band's own text color rather than hardcoded white, because the band is themeable — a light surface with an Obsidian label would otherwise have rendered white breadcrumbs onto near-white. MIXED AGAINST THE VARIABLE, NOT AGAINST currentColor, and the list and item are both named. The default breadcrumb rules set Slate Graphite on `__list` and `__item` explicitly, so inheritance from the band never reached them — and since `currentColor` in a `color` declaration means the value inherited from the PARENT, a currentColor mix on the anchor resolved from that Slate Graphite and put dark text on Obsidian at 1.25:1. Naming the variable makes the result independent of what any ancestor happens to declare. */ .dfx-product-band .dfx-breadcrumbs, .dfx-product-band .dfx-breadcrumbs__list, .dfx-product-band .dfx-breadcrumbs__item, .dfx-product-band .dfx-breadcrumbs__item a, .dfx-product-band .dfx-breadcrumbs__item + .dfx-breadcrumbs__item::before { color: color-mix(in srgb, var(--dfx-band-heading, var(--dfx-signal-white)) 70%, transparent); } .dfx-product-band .dfx-breadcrumbs__item a:hover, .dfx-product-band .dfx-breadcrumbs__item a:focus, .dfx-product-band .dfx-breadcrumbs__item [aria-current="page"] { color: var(--dfx-band-heading, var(--dfx-signal-white)); } /* Text color inside the band is NOT set here. It is handled alongside the builder-row case in the hero's own color rules further down — search for "ON DARK, THE INHERITED COLOR IS NOT WHITE". Two dark contexts, one set of rules, so the band and a `.light` row cannot drift apart. */ /* No rules for a positioning headline or a built-for line. * * Both used to render from meta above the_content(). Product pages are built in * WPBakery now, so the deck and the audience line are page content — the editor * lays them out in the builder, styles them with the builder's own controls, and * sees them in place. Styling them from here would mean the top of the page was * assembled from two systems at once. * * The meta fields still exist and are still used, just not on this page: the * archive card uses built_for as its subtitle, and the comparison table uses the * tier's built_for for the "who is this for" line under each column. * * Note the card IS now styled — see the Product card surface section further down. * .dfx-card--product carries a raised white surface, a hairline, an 8px corner and a * two-layer shadow, taken from Socket UI as the agreed style direction, and __body * carries the padding and the internal rhythm. __media is the one child still bare, * because nothing renders an image on a card yet. * * __type and __count are gone entirely rather than unstyled. The product type is * admin vocabulary and was never something to badge at a buyer; the feature count * was a number with no scale to read it against. See card.php for both. */ /* --- Availability badge (front-end) ---------------------------------------- */ /* The admin has its own .dfx-badge in admin-content-model.css using WordPress admin colors. This is the marketing-surface equivalent, on brand tokens. Color choices are constrained by the three-green rule, so no status green appears here at all: `available` is the default state and renders no badge, and the remaining states are not terminal positives. Signal is reserved for in-flight motion, which a release stage is not. Every badge carries its label as text, so the color is reinforcement rather than the message. THE INCLUSION-LEVEL CHIP USED TO SHARE THIS GEOMETRY by joining the selector list below, so radius, size, tracking and padding came from here and the two could not drift into looking almost-but-not-quite alike. It is gone: the feature page's "How to get it" now renders product cards, and the inclusion level rides in as the card's plain-text note rather than as a chip. See `.dfx-card__note`. THE FILL CARRIES THE DISTINCTION, and it is a rule rather than a preference: colored fill a status, or a commercial state that costs money gray fill a neutral label — a relationship rather than a lifecycle white + border retired, the one status quiet enough to need an outline THE PRODUCT TYPE IS A PARTIAL EXCEPTION, and the history is worth having. It was the gray chip on the product card, printing all four types, and it was removed: "Simple" and "Tiered" are admin vocabulary, and on the archive the group heading already said the same thing in buyer language. See card.php. It is back on the product PAGE for `add_on` alone — as `.dfx-badge--relationship`, gray, because "bought alongside something else" is a relationship and not a lifecycle. dfx_get_product_type_badge() holds the rule and the reasoning for the three types that still print nothing. The card is unchanged and still prints no type at all — a card sits under a group heading that already says Add-ons, and the page it links to does not. THE GRAY CHIP AND THE RETIRED BADGE NEVER MEET. `.dfx-badge--retired` renders in the tier table, and a retired product's header is the one place the relationship chip could in principle land beside it — where gray-on-white and white-with-a-border are still two distinguishable things, and both carry their own word. This used to be a three-way version of the same argument, the third being the inclusion level; that chip no longer exists. */ .dfx-badge { display: inline-block; margin: 0 0 0.5rem; /* Sides widened from 0.625rem. A pill needs more horizontal room than a rectangle did — the curve eats into the space beside the first and last letter, so the same padding that looked balanced with a 2px corner reads as cramped once the ends are round. 0.875rem against 0.25rem top and bottom. */ padding: 0.25rem 0.875rem; /* A PILL, matching Socket UI's chip — which uses border-radius: 999px, and the homepage's own category chips, which are 20px on a 37px-tall pill. 2px was the theme's default corner and made these read as small rectangular tags rather than as chips. 999px rather than 50%: a percentage radius on a non-square box gives an ellipse that changes shape with the text length. A large fixed length always resolves to half the height, which is the pill idiom and is stable at any width. THE 2px CORNER SURVIVES ELSEWHERE ON PURPOSE. Buttons, the tier table and the card's own 20px corner are unaffected — this is the badge component only, so the change reaches the card chips, the hero's type chip and the feature page's inclusion levels, which are the four surfaces that should agree. */ border-radius: 999px; font-family: var(--dfx-font-body); /* 11px → 12px, the one value in the sweep that went UP. 0.6875rem was the smallest text on the site and below the new scale's floor; the badge idiom survives the extra pixel and 11px did not survive a squint test. */ font-size: var(--dfx-size-micro); font-weight: var(--dfx-weight-emphasis); /* NO text-transform, SO THE LABEL RENDERS AS IT IS WRITTEN. These strings come from term names and translated PHP — "Package", "Coming soon", "Add-on" — and forcing caps here meant the CSS was overruling what the content model actually says. It also meant the one place that wanted sentence case, the hero's type chip, had to opt out with `text-transform: none`; that override is now redundant and gone. letter-spacing GOES WITH IT, and that is a consequence rather than a separate choice. 0.08em is caps tracking: uppercase needs the extra room because every letter is the same height and the shapes crowd. Applied to sentence case it just reads loose. If the tracking is wanted back, the case has to come back with it. */ letter-spacing: normal; line-height: 1.5; white-space: nowrap; } /* Not yet purchasable — Saffron is the brand's caution tone, and "not available yet" is exactly a caution on a page whose job is to sell. */ .dfx-badge--coming_soon { background: #fdf3e6; color: #8a5d0f; } /* Available to some customers — Informational Blue, because this is a statement of fact about program scope, not a warning. */ .dfx-badge--early_access { background: #eaf1fa; color: #2c5a8f; } /* Reachable by URL but out of the listings. Fully neutral: a retired product should not draw the eye. */ .dfx-badge--retired { background: var(--dfx-signal-white); color: var(--dfx-color-body); border: 1px solid var(--dfx-color-border); } /* THE CERTIFICATION CHIP — "Preferred 3Synergy partner", on the OEM band only. Not an availability status despite riding the hero part's `status` slot: that slot is a variant name and a label, and this is the one chip in the set that states a credential rather than a lifecycle stage. SOLID WHITE ON THE DARK BAND, at 15.6:1. Every status chip above is a light fill built for a light page, and reused here they read as one more product label. The band carries nothing else in solid white, so this is the only thing on it that reads as a seal. BRASS WAS THE OTHER CANDIDATE AND IS WRONG HERE. The brand caps it at one moment per surface, and on these pages that moment is the CTA further down the page — a Brass chip in the band would spend it above the fold on something that is not an action. */ .dfx-badge--certification { background: var(--dfx-signal-white); color: var(--dfx-obsidian); } /* THE FEATURED CHIP — "Most popular", and the one place Brass belongs. The brand system caps Brass at one moment per surface, which is exactly what a featured tier is: the element allows a single one per ladder, so the constraint is enforced by the control rather than by remembering the rule. It also separates this chip from the blue add-on chips beside it — a claim about what sells, not a statement about scope. OBSIDIAN ON BRASS AT 6.78:1, which is the pairing the primary button already uses, so the two Brass moments a page can carry agree with each other. The fill measures 2.48:1 against white, well past the point where a chip reads as a chip, so unlike the add-on chip this one is visible by fill as much as by ink. The words are the editor's, so this rule sets no content and no width. "Most popular", "Best value" and a two-word phrase in French all have to fit. */ .dfx-badge--featured { background: var(--dfx-brass); color: var(--dfx-obsidian); } /* NOTHING FOR .dfx-tier-ladder__card--featured, DELIBERATELY. The class is on the card so a page can add emphasis — a ring, a lift, a heavier border — from the element's Design Options box, without a stylesheet change. The reference marks its recommended plan with a chip and nothing else, and a card that is both tinted by its section and outlined for being featured starts competing with the section grouping it sits inside. If a default emphasis is ever wanted, this is where it goes. */ /* THE ADD-ON CHIP — one treatment for every place the word appears. "Add-on" is printed in four places: the tier ladder's feature list, the comparison table's cells, the product card's type chip and the product hero's. Three of them were gray and the fourth was muted gray text with no chip at all, so the same commercial fact looked like four different things — and on a tinted section the ladder's version disappeared into the panel, which is what prompted this. BLUE, AND NOT THE OTHER CANDIDATES. Brass is the premium accent and the brand system caps it at one moment per surface — a feature list can carry five add-ons, so brass was out on the first count. The greens are spoken for by the three-green rule and none of them means "you can buy this". The Teal and Violet families are for data visualisation and feature differentiation, which is close, but a teal chip beside green ticks reads as a status. Informational Blue is the family for a statement of fact about scope, which is what an add-on is. A STEP DEEPER THAN --early_access, DELIBERATELY. That chip is also blue — #2c5a8f on #eaf1fa — and two blue chips meaning different things would be the reuse the palette rules warn about. This one is brighter and stronger: blue-100 behind blue-600 from the SUI 2.0 ramp, which reads as a live commercial label rather than a muted program note, and the two are told apart by depth rather than by hue. THE FILL IS SUBTLE AND THE INK IS NOT, which is the honest way to describe it. #C7E3FF against white measures 1.32:1, so the fill alone is not what makes the chip visible — the blue text at 5.04:1 on the fill is. That is also true of the two status chips above, and it is why the ink is the value to protect if either is ever retuned. Literals rather than tokens, as the two chips above are, and for the same reason: the marketing palette has no surface step at this lightness. If SUI 2.0's blue ramp is ever exposed as marketing tokens, these are var() candidates. */ .dfx-badge--add-on { background: #C7E3FF; color: #005BB3; } /* The gray chip — a neutral label rather than a status. The fill is a literal rather than a token because there is no token for it: the neutral ramp jumps from Signal White (#F5F6F7, the page surface) to Soft Stone (#C8CBCF, a border weight), and this needs to sit between them — light enough to read as a label, dark enough to separate from a white surface. The two status tints beside it are literals for the same reason. ONE CHIP USES IT NOW. It was shared with `.dfx-included-in__level`, the feature page's Core / Additional / add-on chip, on the reasoning that both answer "what is this thing's relationship to something you buy" — which is precisely what the gray fill is reserved for — so a second literal #edeff1 would have been the same decision written twice and drifting from then on. That chip is gone with the `.dfx-included-in` list, so the selector list is down to one name. Kept as its own rule rather than folded into `.dfx-badge--add-on` above: the two fills are different values answering different questions. THE ADD-ON CHIP ALSO READS ON THE DARK BAND, which is where it actually renders: the product header band sets a dark background and white heading text, and this chip carries its own light fill and its own dark body color, so it is legible there for the same reason `.dfx-badge--coming_soon` is. It is not inheriting anything from the band, which is what would have made it fragile. */ .dfx-badge--relationship { background: #edeff1; color: var(--dfx-color-body); } /* --- Link arrow ------------------------------------------------------------- */ /* ONE ARROW, THREE PLACES: the product card, the tier comparison table and the feature list. Salient's `arrow-animation` — a 25px hairline shaft with a chevron head that draws in on hover. Built by dfx_link_with_arrow(), which is a faithful copy of the markup nectar_cta.php emits, and where the structure is explained. Almost nothing here is ours. The geometry, the positioning, `stroke: currentColor` on the head and all seven keyframes are Salient's. What follows is the shaft color and two context adjustments. THE CHEVRON IS HIDDEN AT REST — `ctaArrowEnd` finishes at opacity 0 and `ctaArrowStart` draws it back on hover — so the resting mark everywhere is the shaft alone. On the card that is the intended reveal. On a feature row the shaft is doing real work: only standalone features have a page, so it is what separates a linked row from an unlinked one at a glance. If that distinction ever needs to read harder, override the polyline animation for those two contexts rather than swapping in a different arrow. It is not Font Awesome any more. The old glyph was fa-long-arrow-right (\f178), picked because FA4 ships one weight so the lightest mark had to come from the lightest-drawn glyph. The note here used to say the next step past that was "an inline SVG with an explicit stroke-width, not another icon font" — which is exactly what Salient already shipped and this had missed. WHY THIS IS SAFE TO HAND-WRITE WHERE nectar_badge IS NOT: every rule lives in stylesheets Salient enqueues unconditionally — selectors in css/build/style.css, keyframes in css/build/style-non-critical.css. nectar_badge's CSS is emitted per-page by class-nectar-element-styles.php only when it finds that shortcode in post_content. Checked both before choosing. */ /* THE SHAFT FOLLOWS THE LABEL'S COLOR. The one override `arrow-animation` needs, and it is a Salient gap rather than a preference: the chevron head is `stroke: currentColor` in their own rule, but the shaft is a separate element painted with `background-color: #000`, switching to #fff only under a `.light` ancestor. Left alone, a Baltic label trails a black shaft — two colors on one arrow. currentColor makes the shaft do what the head already does, so the whole link recolors as one thing on hover. THE SELECTOR IS LONG ON PURPOSE — 0,4,0. It has to clear TWO Salient rules, and a plain `.dfx-card__cta .line` at 0,2,0 cleared neither: .nectar-cta[data-style=arrow-animation] .line 0,3,0 .light .nectar-cta[data-style=arrow-animation] .line 0,4,0 The second decides the length. It ties at 0,4,0, so source order settles it and ours is in a stylesheet enqueued after Salient's — but the tie is deliberate rather than lucky: going higher would mean naming an ancestor of every context this arrow appears in, and there are now three. */ .nectar-cta[data-style="arrow-animation"] .dfx-card__cta .line, .nectar-cta[data-style="arrow-animation"] .dfx-feature-link .line, .nectar-cta[data-style="arrow-animation"] .dfx-tier-ladder__compare .line { background-color: currentColor; } /* BOTH LINKS ARE inline-block, NOT inline-flex. Salient gives `.text` inside the anchor `display: block` and positions the arrow absolutely against the anchor's padding box, so the anchor has to be a block container for either to resolve. A flex container would make the label and the arrow flex items and take the absolute positioning off its reference. */ .dfx-card__cta, .dfx-feature-link, .dfx-tier-ladder__compare { display: inline-block; /* Shared, so the three links cannot end up transitioning differently. Color only — the shaft and head motion is Salient's, driven by its own keyframes. */ transition: color 0.15s ease; } /* NO UNDERLINE ON EITHER, unlike most links in this theme. `.link_text` carries ~40px of padding on the arrow's side to reserve room for it, and an underline spans the padding box — so the rule would run out from under the last word and stop halfway beneath the arrow. Color is still not the only signal, which is what the underline was doing elsewhere: the shaft is visible at rest and the head draws in on hover, so the affordance is a mark rather than a hue. */ .dfx-card__cta, .dfx-card__cta:hover, .dfx-card__cta:focus, .dfx-feature-link, .dfx-feature-link:hover, .dfx-feature-link:focus, .dfx-tier-ladder__compare, .dfx-tier-ladder__compare:hover, .dfx-tier-ladder__compare:focus { text-decoration: none; } /* FEATURE LINKS GET BALTIC, and here it is not only the text: the shaft inherits the color through the rule above, and WCAG 1.4.11 asks 3:1 of a graphic that identifies a control — the shaft is what marks which of thirty rows lead somewhere. --dfx-color-link is AA on white only (4.33:1 on the surface, DSGN-618). Baltic is 8.46:1 and needs no new token; scoped here, since repointing the token would repaint every link on the site. */ .dfx-feature-link { color: var(--dfx-color-brand); } .dfx-feature-link:hover, .dfx-feature-link:focus { color: var(--dfx-color-text); } /* --- Product card ----------------------------------------------------------- */ /* The parts that are not the surface. .dfx-card--product, __body and __built-for are handled in the Product card surface section further down; __media is still unstyled, because no card renders an image yet. THERE IS NO .dfx-card__meta ANY MORE. It was a flex row holding the type chip and the availability badge; the type chip went (admin vocabulary), and then the badge moved into the title line, so the row had nothing left to hold. Removed from the markup rather than left as an empty wrapper. THE BADGE IN THE TITLE IS WHAT FIXES ALIGNMENT ACROSS A ROW OF CARDS. On its own row the badge rendered only for products that are not available, so every card carrying one pushed its title a row lower than its neighbours. Titles are the strongest horizontal line in a grid of cards, and they were not lining up. SMALLER HERE, AND ONLY HERE. The badge is 0.6875rem — 11px — everywhere else, and that is right in its other three contexts: the header band, the tier table header and the feature index all use it as a label sitting beside or above a larger block, where 11px reads as small print. In a card title it is inline with the type it sits next to, and 11px against the card title is most of its size — near enough to compete with the product name rather than annotate it. SIZED IN em, SO IT IS A RATIO RATHER THAN ANOTHER MAGIC NUMBER. 0.6em of the title, which is 1.125rem via `.dfx-h5`, so about 10.8px today — and this is the mechanism working: the heading step moved from 16px to 18px in brand-tokens.css and the chip followed on its own instead of drifting out of proportion. The padding is em for the same reason: it scales with the chip, not with the root. `font-size` is the one number to nudge if this still is not right. 0.6em is about as small as uppercase at 0.08em tracking stays comfortable; below roughly 9px it starts reading as fine print rather than a label. If it should be smaller in every context rather than this one, the place to change is `font-size` on the shared `.dfx-badge` rule above, and this override then wants deleting rather than adjusting. Nothing else is restated: .dfx-badge already sets its own family, weight, tracking, uppercasing and `white-space: nowrap`, and a property set on the element itself beats anything inherited from the heading around it. */ /* THE TITLE LINK TAKES THE HEADING'S COLOR, and this is what actually made the title invisible on the dark card — not the heading rule, which was already fixed. The h3 computed to Signal White correctly. Inside it, the was painting itself rgb(20, 30, 44) — Obsidian, the card's own background — so the text was there, sized and visible, in exactly the color of the thing behind it. Measuring the heading said the fix had worked; measuring the anchor said otherwise. THE SOURCE IS Salient's GENERATED FILE AGAIN: `body a { color: … }` at 0-0-2 in salient-dynamic-styles.css, from the Theme Options link color, which on this site is set to Obsidian. brand-base.css declares `a { color: var(--dfx-color-link) }` at 0-0-1 and loses to it site-wide — worth knowing separately, but here it means the card had to name the anchor itself. Third time the generated file has decided a card question. `inherit`, not a literal. The anchor then follows whatever the heading is, so if the card ever goes light again this needs no second edit. 0-1-1, which clears the 0-0-2. Brass on hover, matching the Learn more link's resting color, so the card has one accent rather than two. 6.78:1 on Obsidian. */ /* THE OVERFLOW GUARD IS PAIRED WITH THE GRID'S 17rem FLOOR, and it is the half that catches what a floor cannot. A definite floor stops a title pushing its TRACK wider than its share; it does nothing about a single word wider than the card, which overflows the fill and prints on the page behind it — "Scheduling" hanging out of a 105px card is how the constrained-column bug was first reported. break-word rather than anywhere, so wrapping stays at word boundaries until a word genuinely will not fit. Cheap, and it makes the card safe at any width a caller hands it. */ .dfx-card__title { overflow-wrap: break-word; } .dfx-card__title a { color: inherit; text-decoration: none; /* THE GAP BEFORE THE BADGE LIVES HERE, not as a left margin on the badge, and that is the fix for a badge that wrapped to its own line sitting ~12px indented from the title. A leading margin still renders at the start of a wrapped line; a trailing one on the element before it does not. 0.667em of the 18px h5 step = the same 12px as before. */ margin-inline-end: 0.667em; } .dfx-card__title a:hover, .dfx-card__title a:focus { color: var(--dfx-brass); } /* SHARED WITH .dfx-feature-index__name BELOW, so the two title lines that carry chips size and space them identically. Everything in the rule is em-relative, so the 18px card title and the 16px feature name each get a chip in proportion without a second block. Only the Powder repaint above stays card-only — that one exists for a DARK surface, and the feature card is light. */ /* THE TYPE CHIP TAKES THE REFERENCE'S POWDER PILL. Scoped to the card rather than to .dfx-badge--relationship globally, which would also repaint the product page's Add-on chip and the feature page's inclusion levels — both of which sit on light surfaces where #edeff1 is correct. Obsidian on Powder is 8.7:1. The STATUS badges are left alone. coming_soon, early_access and retired are all light fills with dark text, so they read on a dark card exactly as the reference's chip does; inverting them would have meant inventing three new pairs for no gain. */ .dfx-card__title .dfx-badge--relationship { background: var(--dfx-powder); color: var(--dfx-obsidian); } .dfx-card__title .dfx-badge, .dfx-feature-index__name .dfx-badge { /* FLOORED AT THE MICRO STEP, because 0.6em alone now undershoots the scale. Against the 18px h5 card title this resolved to 10.8px — the only text on a product page below the body scale's 12px floor, found by probing rather than by reading, since nothing here states a size you can grep for. max() keeps the em relationship the padding and margin below depend on (they resolve against this element's own size, so all three still move together) while refusing to go under the floor. If the card title ever rises above 20px the em term takes over again. */ font-size: max(var(--dfx-size-micro), 0.6em); /* 1.25em of side padding, matching the ratio the shared rule now uses — 0.875rem against an 11px font. Stated in em rather than rem because this chip is sized in em too, so the two move together instead of the padding staying fixed while the text scales with the title. */ padding: 0.25em 1.25em; /* The badge's own `margin: 0 0 0.5rem` is for the stacked contexts it was built for — the product header band, the tier table header. Here it sits in the title line. ALL SPACING TRAILS, NONE LEADS. A left margin survives a line break, which is what indented a wrapped badge by 12px; the title's own `margin-inline-end` supplies that gap now. The between-chips gap is the rule below. */ margin: 0; /* Against the title's lowercase rather than its baseline, which is what stops an uppercase chip sitting low beside the card title. */ vertical-align: middle; } /* THE SEPARATOR BETWEEN TWO CHIPS, AND `:not(:last-child)` IS LOAD-BEARING RATHER THAN TIDY. This was an unconditional `margin-inline-end: 1em`, described as "invisible on the last badge in the line" — which it is to look at and is not to lay out. Trailing margin still occupies inline space, so it counts toward the line's width: on a 250px feature card an "Alignment & Tread" name plus one chip came to 96.7px against 97px of room and the chip wrapped to its own line. The gap it was reserving was after the last thing on the line, where nothing needed separating. Scoped to a chip that is FOLLOWED by another, which is the only case the 1em was ever for — coming soon AND add-on. Trailing rather than leading for the reason above it: a leading margin renders at the start of a wrapped line and indents the chip. */ .dfx-card__title .dfx-badge:not(:last-child), .dfx-feature-index__name .dfx-badge:not(:last-child) { margin-inline-end: 1em; } /* "Learn more" — a link, not a button. The card is an invitation to read the page, and a filled button on every card in a nine-up grid turns a browse surface into a wall of calls to action. Baltic for the same contrast reason as the feature links above; display, text-decoration and the hover color are all set with them in the Link arrow block, since the two links share a structure and should not drift. Only the size and the resting color are card-specific. */ .dfx-card__cta { /* BRASS, WHICH ONLY WORKS BECAUSE THE CARD IS DARK. It is 6.78:1 on Obsidian and 2.29:1 on Signal White — the same figure that got brass pulled off the workflow icons and kept it off the feature links. It is legible here and nowhere else on a light page, so this color must not be lifted out of the card. Baltic was the previous value and is 2.4:1 on Obsidian: AA-passing on white, failing here. The swap is a correctness fix as much as a match to the reference, which uses brass for exactly this link. */ color: var(--dfx-brass); font-size: var(--dfx-size-body-sm); font-weight: var(--dfx-weight-emphasis); } /* Obsidian on hover, at 15.5:1. Cyan-hover was the obvious pairing and is 3.13:1 — a hover state that drops below the resting state's contrast is a regression dressed as feedback. */ /* White on hover, not Obsidian. The old value was --dfx-color-text, which IS Obsidian — the card's own background now, so the link would have vanished on hover. Signal White at 15.5:1 is the strongest move available and reads as the arrow lighting up. */ .dfx-card__cta:hover, .dfx-card__cta:focus { color: var(--dfx-signal-white); } /* --- Tier comparison table -------------------------------------------------- */ /* NOTHING HERE ON PURPOSE. The table takes Salient's own table styling and nothing of ours: 466 lines went, plus 322 for the tier columns as cards and the responsive block that sized them. Requested as a clean slate, so what it renders now is the parent theme's — `.main-content th`/`td` box every cell with a #ececec right and bottom border, `tr td:first-child` adds a left one, `table tr:nth-child(2n+1)` stripes at #fcfcfc, and `caption, td, th` set weight 400 and align left. WHAT WENT WITH IT, so nobody hunts for a regression: the sticky feature column, the fixed table layout and its column tokens, the horizontal scroll wrapper, the workflow group row treatment, the tier lane fills and their edges, and the tick and chip colors. A table wider than its container now scrolls the PAGE rather than itself. The disclosure that reveals the table is further down and stayed — it is the control, not the table. Git history has all of it at 0648c1f if any of it is wanted back. */ /* --- Tier comparison disclosure -------------------------------------------------- The Zendesk pattern from the Project Keystone review: the table behind an underlined text link rather than an accordion header. Native
    , so open and close, keyboard and the collapsed-region announcement are the browser's; everything here is appearance. UNDERLINED, WHICH IS THIS THEME'S NORMAL LINK AND NOT A CHOICE MADE HERE. The two links that go without one — .dfx-feature-link and .dfx-tier-ladder__compare — are the exceptions, and only because Salient's arrow shaft reserves padding an underline would run beneath. There is no shaft here. */ .dfx-tier-comparison__reveal-summary { /* BOTH PROPERTIES, AND NEITHER IS REDUNDANT. `display` removes the triangle in Chrome and Firefox; ::-webkit-details-marker below is what Safari reads. */ display: inline-block; list-style: none; cursor: pointer; font-family: var(--dfx-font-body); font-size: var(--dfx-size-body); font-weight: var(--dfx-weight-emphasis); color: var(--dfx-color-link); transition: color 0.15s ease; } .dfx-tier-comparison__reveal-summary::-webkit-details-marker { display: none; } /* THE UNDERLINE IS ON THE LABEL, NOT THE SUMMARY, so it stops at the words. Decoration propagates into ::after and cannot be turned off there, so an underline one level up would run beneath the chevron. UNDERLINED AT ALL BECAUSE THAT IS THIS THEME'S NORMAL LINK. The two that go without — .dfx-feature-link and .dfx-tier-ladder__compare — are the exceptions, and only because Salient's arrow shaft reserves padding an underline would run under. */ .dfx-tier-comparison__reveal-label { text-decoration: underline; /* Keeps the rule off the descenders in "Compare" and "features". */ text-underline-offset: 0.15em; } /* STATES ITS OWN COLOR, so it stays body copy while the summary around it is link blue — and stays put through hover, which only moves the summary's own color. Regular weight against the label's emphasis is the second half of the same signal: the question is context, the link is the thing to click. */ .dfx-tier-comparison__reveal-intro { color: var(--dfx-color-body); font-weight: var(--dfx-weight-body); } .dfx-tier-comparison__reveal-summary:hover, .dfx-tier-comparison__reveal-summary:focus-visible { color: var(--dfx-color-link-hover); } /* A REAL FOCUS RING, because the summary is the only focusable thing here and suppressing the marker took away the browser's own affordance for it. Salient resets outlines broadly, so this states one rather than trusting the default. */ .dfx-tier-comparison__reveal-summary:focus-visible { outline: 2px solid var(--dfx-color-link); outline-offset: 3px; } /* TWO BORDERS ROTATED 45°, WHICH IS THE WHOLE CHEVRON. Drawn rather than set in an icon font because Salient re-points its Font Awesome classes at icomoon, so an here would render a glyph this theme does not control — see the disclosure builder for the version that did. `display: inline-block` IS LOAD-BEARING: `transform` does not apply to non-replaced inline elements, and the failure is silent — the rule matches, the computed value stays `none`. currentColor, so the chevron follows the label through hover and focus without a second color rule. */ .dfx-tier-comparison__reveal-summary::after { content: ''; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.5em; /* Lifts the box onto the label's optical center — a rotated square hangs low. */ vertical-align: 0.14em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate( 45deg ); transition: transform 0.15s ease; } /* POINTS AT WHAT HAPPENS NEXT: down to open, up once open. -135 rather than 225 so the rotation takes the short way round. */ .dfx-tier-comparison__reveal[open] > .dfx-tier-comparison__reveal-summary::after { transform: rotate( -135deg ); } /* ALIGNMENT SITS ON THE
    AND REACHES THE SUMMARY THROUGH IT. The summary is an inline-block, so `text-align` on the summary itself would move nothing — a shrink-wrapped box has no slack to align within. Left is the element's own default and has no class. THE PANEL RESTATES LEFT, WHICH IS THE PART THAT IS NOT OPTIONAL. text-align inherits, so a centered line would center the table's heading, its group labels and its footnote along with it — the cells state their own alignment and would survive, which is worse than if none of it did: half the table would follow and half would not. */ .dfx-tier-comparison__reveal--center { text-align: center; } .dfx-tier-comparison__reveal--right { text-align: right; } /* THE SPACE BELOW THE SUMMARY IS INSIDE THE ANIMATED BOX, which is padding on the panel rather than a margin under the summary. It was `[open] > summary { margin-bottom: 1.5rem }`, and that state flips in a single frame: collapsing, the gap vanished while the table was still closing, so the summary jumped down onto a table that was still there. Inside `::details-content` the space is part of the height being animated, so it grows and shrinks with the reveal — and it is absent when closed for free, which is what the two-state rule was for. */ .dfx-tier-comparison__reveal > .dfx-tier-comparison { padding-top: 1.5rem; text-align: left; } /* IT REVEALS NOW, RATHER THAN APPEARING. A native
    snaps: the panel is `content-visibility: hidden` closed and laid out open, with nothing in between, so a 34-row table arrived in one frame and the page jumped under the reader's eye. `::details-content` IS THE PANEL AS ONE BOX, which is what makes this possible without a wrapper div or a line of JS — the element's markup is a summary and a bare .dfx-tier-comparison, and there was nothing else to animate. Height goes from 0 to `auto`, `interpolate-size` is what lets a keyword be an animation endpoint, and content-visibility is transitioned `allow-discrete` so the panel stays rendered for the duration instead of vanishing on frame one. SET ON THE ELEMENT, NOT :root. interpolate-size inherits, and switching it on globally would quietly make every `auto` height on the site animatable — a much larger promise than this panel needs. WHERE IT IS NOT SUPPORTED, IT SNAPS, which is exactly today's behaviour. Chromium has both properties; Safari and Firefox are partway, so this is progressive enhancement and needs no fallback. 350ms: long enough to read as a movement on a tall panel, short enough that a reader who knows what they want is not waiting for it. */ .dfx-tier-comparison__reveal { interpolate-size: allow-keywords; } .dfx-tier-comparison__reveal::details-content { block-size: 0; overflow: hidden; transition: block-size 350ms ease, content-visibility 350ms allow-discrete; } .dfx-tier-comparison__reveal[open]::details-content { block-size: auto; } @media (prefers-reduced-motion: reduce) { .dfx-tier-comparison__reveal-summary, .dfx-tier-comparison__reveal-summary::after { transition: none; } /* The panel still has to open — only the movement goes. */ .dfx-tier-comparison__reveal::details-content { transition: none; } } /* --- Product hero ----------------------------------------------------------- */ /* One column's worth of copy, rendered by the Product Hero element. OWNS NO LAYOUT, NO BACKGROUND AND NO COLOR OF ITS OWN. Four drafts got here, each by giving something back to the stack that already had it: 1. A 100vw negative margin to escape the container → the row full-bleeds. 2. Its own two-column grid, ratio and alignment → the row has columns. 3. Hand-rolled button markup and hover CSS → nectar_btn. 4. A light/dark text_scheme param → see COLOR below. COLOR IS INHERITED. Salient's row already has a Text Color setting, and it sets color on the row. Asking again on the element meant the same decision in two places, which is one place too many — so nothing here declares a color. The headline takes the row's color through normal inheritance, and the secondary text derives from it with color-mix() rather than naming a value. Put the hero on a dark row or a light one and it follows, with nothing to keep in sync. Only var(--dfx-*) where a color is unavoidable — brand-tokens.css is the only place hex lives. */ /* --- Headline and deck --- */ /* Poppins via --dfx-font-display, matching every other H1 on the site. Color is deliberately absent: it comes from the row. */ /* DECLARES NO TYPE. Size, weight, family, tracking and line-height all come from the heading level, in brand-base.css — including the fluid clamp, which moved there so every h1 scales rather than just this one. Consequence worth knowing: the hero element can be set to render an h2 instead of an h1, and when it is, this heading drops from the h1 step to the h2 one — 48px to 32px at full width today. That is the rule working, not a bug: the outline and the size are the same decision now. Both numbers come from the scale, so read them from brand-tokens.css rather than trusting this line after the next re-anchor. */ .dfx-hero__title { margin: 0; text-wrap: balance; color: inherit; } /* Secondary text, derived from whatever the row set rather than declared. 74% of the inherited color reads as supporting on a dark row and on a light one, which a fixed Powder or Slate value could not do. */ .dfx-hero__eyebrow, .dfx-hero__subhead, .dfx-hero__reassurance { color: color-mix(in srgb, currentColor 74%, transparent); } /* ON DARK, THE INHERITED COLOR IS NOT WHITE. Salient's Text Color → Light resolves to #9AA0A6 on `.row_col_wrap.light`, a muted gray meant for body copy. Inherited straight through, it left the headline and the product name looking switched off. So the two identifying lines are pinned to white and everything else still derives from them: the subhead and reassurance stay at 74%, which now reads as 74% of white rather than 74% of gray. The light-row rule sets it on .dfx-hero rather than on the title, so `color: inherit` above keeps working and there is one place to change. Two selectors because there are two dark contexts and neither implies the other — `.light` is Salient's builder row, `.dfx-product-band` is the template default, which has no Salient row to carry a class. The two also diverge on WHAT the color is, which is why they are not one selector list: a Salient `.light` row is light-on-dark by definition, so white is correct there, while the band is themeable and has to use its own variable. */ .light .dfx-hero { color: var(--dfx-signal-white); } .dfx-product-band .dfx-hero { color: var(--dfx-band-heading, var(--dfx-signal-white)); } /* The headline needs the extra `.dfx-hero` in the selector, and it is not redundant. The parent theme styles headings inside a light row by element — `.light h1` — which is one class plus one type, and that outweighs the single class of `.dfx-hero__title`. So `color: inherit` lost to Salient's gray even with .dfx-hero set to white. Three classes settles it without !important. */ .light .dfx-hero .dfx-hero__title, .light .dfx-hero .dfx-hero__eyebrow { color: var(--dfx-signal-white); } /* The product name is identification, not supporting text, so the eyebrow does not take the 74% treatment — it matches the headline. */ .dfx-product-band .dfx-hero .dfx-hero__title, .dfx-product-band .dfx-hero .dfx-hero__eyebrow { color: var(--dfx-band-heading, var(--dfx-signal-white)); } /* The subheading takes its own color when one has been chosen, and otherwise DERIVES from the heading at 74% — the same treatment the hero has always used. Written as a fallback chain rather than two rules so the derived case needs no marker class and no PHP branch: an unset subheading simply has no custom property, and the mix behind it takes over. Deriving is the better default, not a lesser one. A fixed subheading color has to be re-picked every time the heading or the background moves; 74% of the heading follows both on its own, on a dark surface and a light one. */ .dfx-product-band .dfx-hero .dfx-hero__subhead, .dfx-product-band .dfx-hero .dfx-hero__reassurance { color: var( --dfx-band-subhead, color-mix(in srgb, var(--dfx-band-heading, var(--dfx-signal-white)) 74%, transparent) ); } /* TYPE COMES FROM .dfx-lead, which hero.php also puts on this element — the brand layer's lead/subtitle role in brand-base.css. The four declarations that used to be here (body font, 1.1875rem, body weight, body line-height) were a near-copy of it, and because components.css loads after brand-base they would have won and the class would have been decorative. Only spacing is ours now. */ .dfx-hero__subhead { margin: 1.25rem 0 0; } /* A reading measure, not a layout width — the column already decides how wide the block is. Set "Line length" to Full when the column is narrow enough that this only adds a ragged right edge. 36ch, MATCHING THE PAGE TITLE, and it was 22ch. The site has two h1 addresses — Salient's page header on builder Pages, this hero on every product, workflow, feature and integration-type page — and they were measured at 36ch and 22ch, so the same rank of heading wrapped at two different widths depending on which template drew it. brand-base.css owns the 36ch for the page header; this is the third place that figure appears, and all three move together. */ .dfx-hero--measure-constrained .dfx-hero__title { max-width: 36ch; } .dfx-hero--measure-constrained .dfx-hero__subhead { max-width: 52ch; } /* .dfx-lead carries a 66ch reading measure of its own, which would quietly reinstate a limit on the one setting whose whole purpose is removing it. Line length → Full has to mean full. */ .dfx-hero--measure-full .dfx-hero__subhead { max-width: none; } /* --- Eyebrow: the product name, typed as an H4 --- */ /* WEIGHT AND TRACKING NOW COME FROM THE TOKENS, and this is the change the previous version of this comment asked for. It used to hardcode weight 500 and -0.02em — Salient's generated `body h4` values — because brand-base's bare `h4` rule at 0-0-1 lost to them, so a real H4 rendered 500 and an eyebrow built from the h4 weight token looked visibly heavier than the H4s beside it. The note ended: "If the heading scale is ever escalated to `body h4` specificity so the brand tokens win, these three lines should go back to the variables." That escalation exists now — brand-base.css declares `body h4, .row .col h4, .wpb_wrapper h4 { font-weight: var(--dfx-weight-heading-light) }` at 0-0-2 / 0-2-1 — so this element and a real H4 render the same weight whatever the token says, which is the whole point of reading it. That token is 500 today, so both are 500; the hardcoded 500 this rule replaced would have been accidentally right and would have drifted the moment the token moved, which is the difference worth keeping. LETTER-SPACING follows the token, and the caveat that used to sit here is gone: tracking is now escalated in brand-base alongside weight, so a real H4 computes -0.01em from the same token instead of Salient's -0.02em. The two agree by construction rather than by a rounding argument. See the NOTE in brand-base.css. FONT-SIZE READS --dfx-size-h4 rather than restating it. It was a literal 1.5rem with a comment asking the next person to keep it in step with the h4 step by hand, which the ramp change would have broken silently — the scale moved to 20px and an eyebrow pinned at 24px would have ended up LARGER than the section headings it is matched to. This is a

    , so the block's "no font-size on a heading" rule does not apply; reading the token is the point, not the exemption. Still a

    in the markup. It sits above the

    , so an

    element here would put the document outline out of order for a screen reader or a crawler, to buy an effect CSS gives for free. text-transform and the wide tracking are switched OFF rather than simply omitted, because this rule previously styled a 12px label: both exist to make 12px legible and at 24px they only shout. Dropping the transform also lets the name render as written — "Service Intelligence Platform", the capitalisation the brand uses — instead of being flattened to ONE PLATFORM by the stylesheet. */ .dfx-hero__eyebrow { display: flex; align-items: center; gap: 0.625rem; /* Tight to the headline it labels. 1.125rem read as a gap between two separate things rather than as a label attached to one. */ margin: 0 0 0.5rem; font-family: var(--dfx-font-heading); font-size: var(--dfx-size-h4); /* matched to a real h4, via the one token */ font-weight: var(--dfx-weight-heading-light); /* THE h4 BAND, not the shared token it used to read. Tracking split into four bands in this pass and --dfx-letter-spacing-heading now means h2/h3 at -0.02em, so leaving this line alone would have quietly doubled the tracking on an element whose entire job is to match a real h4. Exactly the drift the comment below warns about, arriving via a token rename rather than a missing property. */ letter-spacing: var(--dfx-letter-spacing-heading-small); /* Matched to a real h4 on leading as well as size and weight. This is a

    , so the size scale in brand-base.css does not reach it — every property it borrows from h4 has to be named here, and leaving one behind is how it would drift. */ line-height: var(--dfx-line-height-heading-small); text-transform: none; } /* The one place a color is named, because the badge behind the icon has to hold its own against either row treatment rather than derive from it. */ .dfx-hero__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 2px; background: var(--dfx-color-action); color: var(--dfx-signal-white); } .dfx-hero__icon-glyph { font-size: 1rem; line-height: 1; } .dfx-hero__icon-img { display: block; width: 1.125rem; height: 1.125rem; object-fit: contain; } /* THE MANUFACTURER'S MARK, in the eyebrow slot instead of its name. Only the OEM band sends it today — Oem_Page::band_args(). WHITE BY FILTER ON DARK, NOT BY A SECOND ASSET. brightness(0) flattens every opaque pixel to black and preserves alpha, and invert(1) after it gives white — the same treatment .dfx-oem-grid--white uses, over the same single transparent SVG each term already carries. One asset per manufacturer stays the rule, so a mark replaced on the term screen is replaced everywhere. IT ASSUMES A DARK MARK, which every OEM term currently holds: a brand-colored or black SVG. A mark that is ALREADY WHITE would come out black, since the filter reads ink and not intent — the uploads folder has a white set from the old site's logo strip, and one of those on a term is the way this breaks. The checkerboard preview on the term screen is where that shows up. THREE HEIGHT CAPS, AND THEY RUN OPPOSITE TO THE OEM WALL'S. There the wide cap is the largest, because a wordmark in a narrow grid cell hits its WIDTH limit first and lands under a shared height cap. The band has no width limit — the mark sits in a full-container flex row — so nothing holds a 6:1 wordmark back, and a shared height would print Toyota at 260px wide beside a 44px GM badge. Here the square badge gets the largest cap instead: a wordmark's letters fill their height, a roundel's glyph does not, so equal optical weight means unequal boxes. Height is SET rather than capped, with width auto. Both are safe on these files — the SVGs carry width and height attributes, so the aspect ratio is known before load and the row does not reflow — but an explicit height needs no intrinsic size at all, which is what an SVG stripped of those attributes would leave. */ .dfx-hero__logo { --dfx-hero-logo-h: 2rem; /* wide, the default — see logo_shape() */ display: inline-flex; align-items: center; } .dfx-hero__logo--square { --dfx-hero-logo-h: 2.75rem; } .dfx-hero__logo--mid { --dfx-hero-logo-h: 2.5rem; } .dfx-hero__logo-img { display: block; width: auto; height: var(--dfx-hero-logo-h); max-width: 100%; } /* SCOPED TO THE DARK CONTEXTS, the same two the eyebrow's white is scoped to further up this file — the band, and any Salient row set to Text Color → Light. On a light surface the mark keeps its brand color, which is the correct answer there and the reason this is not one unconditional rule on .dfx-hero__logo-img. */ .light .dfx-hero .dfx-hero__logo-img, .dfx-product-band .dfx-hero .dfx-hero__logo-img { filter: brightness(0) invert(1); } /* Down a step on phones, where the h1 it labels is fluid and shrinks with the viewport. Left alone, the mark would grow relative to the headline it sits above. */ @media (max-width: 690px) { .dfx-hero__logo { --dfx-hero-logo-h: 1.75rem; } .dfx-hero__logo--square { --dfx-hero-logo-h: 2.25rem; } .dfx-hero__logo--mid { --dfx-hero-logo-h: 2rem; } } /* The badge row. Both chips come from the shared .dfx-badge rules; the only thing set here is the space they sit in. THE ROW OWNS THE BOTTOM MARGIN, NOT THE CHIPS. This was `.dfx-hero .dfx-badge { margin: 0 0 1rem }` while the status badge was the only chip that could appear — a lone block-level element spacing itself off the headline. With a type chip possible beside it, that margin on each child put 1rem between two chips on one row and 2rem of stacked margin below them the moment the row wrapped. Moving it to the row is what makes the two-chip and one-chip cases measure the same. `flex-wrap` and not `nowrap`: `.dfx-badge` sets `white-space: nowrap` on itself, so a narrow viewport cannot break either label internally and the row is the only thing left that can give. `align-items: center` rather than `baseline` — the chips are near-identical heights and centring survives one of them wrapping to a second line, where baseline alignment would drag the other chip's text out of line. SCOPED TO `.dfx-hero` FOR SPECIFICITY, NOT FOR REACH. The row is a

    , so it inherits a paragraph bottom margin from the theme, and the rule replacing it has to outweigh whatever set it. `.dfx-hero__badges` alone is 0-1-0 — enough to beat a bare `p` but not a scoped one like `.main-content p`, which is exactly the environment the Product Hero ELEMENT renders in, since it sits inside the_content. The rule this replaced was `.dfx-hero .dfx-badge` and carried 0-2-0 for the same reason. Keeping the weight identical means the two-chip row cannot be spaced differently from the one-chip badge it succeeded, in either of the two places a hero appears. */ .dfx-hero .dfx-hero__badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 1rem; } .dfx-hero .dfx-hero__badges .dfx-badge { margin: 0; } /* The type chip, in the eyebrow row beside the product name. NO LAYOUT OF ITS OWN. `.dfx-hero__eyebrow` is already a flex row with a 0.625rem gap — it was built that way for the optional icon — so the chip is a third child and the row spaces it. What it does need is to stop shouting. IT DROPS THE UPPERCASE AND THE TRACKING, which is the shared badge's whole visual signature, and the reason is a decision this line already made. `.dfx-hero__eyebrow` below styled a 12px uppercase tracked label until it became a 20px product name, and the note there says why both went: they exist to make 12px legible, and at 20px they only shout — dropping the transform also lets the name render as it is written, "ONE Platform" rather than ONE PLATFORM. An uppercase chip on that same line puts the treatment straight back, six inches from the name it was removed from, and reads as a system tag stuck onto a sentence rather than part of it. "Add-on" also loses its hyphen to caps: ADD-ON reads as two tokens joined by a dash. So the chip says Add-on, spelled as the taxonomy spells it. The pill still carries the label — fill, radius, weight and family all still come from `.dfx-badge`, so it is recognizably the same component as the status badge on a card. Only the two properties tuned for 11px in a stacked column are overridden for 13px inline. 13px, not the shared 11px: sentence case reads smaller than caps at the same size, and this sits beside the eyebrow, which takes the h4 step — 20px semibold today, 20px when this was tuned. The pill did not follow, because 13px was chosen against caps-versus-sentence-case rather than as a ratio of its neighbour; worth re-checking if the h4 step moves much further. Padding stays in `em` so the pill keeps its proportions at whatever size it lands on. THE SHARED BOTTOM MARGIN COMES OFF TOO. `.dfx-badge` carries `margin: 0 0 0.5rem` for surfaces that drop a badge into normal flow. In a center-aligned flex row it pushes nothing down — it just makes the row half a rem taller than its content and lifts the chip off the name's optical center. */ /* THE SEPARATOR BETWEEN THE FAMILY AND THE PRODUCT NAME — 12px each side. margin, on an element, because there was no other way to get at it. The separator was a literal " · " inside one escaped string: nothing to select, and the obvious CSS answer of word-spacing on the eyebrow would have pushed "ONE" off "Platform" by the same amount. Hero::eyebrow_html() wraps the character so this rule has a box. 0.75rem rather than 12px, which is the same measurement in the unit the rest of this file uses. INLINE INSIDE .dfx-hero__eyebrow-text, NOT A CHILD OF THE FLEX ROW, and that is why this margin is the whole of the gap. `.dfx-hero__eyebrow` is a flex container with gap: 0.625rem for the type chip; a separator at that level would collect the gap as well as this margin and the space would be 10px + 12px. Inside the text wrapper it is an ordinary inline box. No color of its own. It takes the eyebrow's, which is what makes it read as punctuation rather than as a third thing in the line. */ .dfx-hero__eyebrow-sep { margin: 0 0.75rem; } /* letter-spacing and text-transform are NO LONGER RESTATED HERE. This chip was the one surface that wanted sentence case, so it opted out of the shared rule's uppercase and caps tracking; the shared rule no longer forces either, so both overrides said nothing. Only the size, the margin and the side padding are still this chip's own. */ .dfx-hero__eyebrow .dfx-hero__type { margin: 0; font-size: var(--dfx-size-caption); padding: 0.25em 1.25em; } /* --- Buttons --- */ /* The buttons themselves are nectar_btn, so there are no rules for their appearance — Salient styles them, animates them and updates them. This is only the row they sit in. nectar_btn wraps each button in its own block-level div, so a flex row with a gap is what puts them side by side; without it they stack. Salient's own margin params still work, and are what to reach for before adding anything here. */ .dfx-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.875rem; margin-top: 2.125rem; } /* Salient's button wrappers carry their own bottom margin for stacked use, which double-counts against the flex gap. */ .dfx-hero__actions > *, .dfx-hero__actions .nectar-button { margin-top: 0; margin-bottom: 0; } /* Fallback only, for when nectar_btn is unavailable — Hero::button() emits a plain anchor with this class and the theme should still look deliberate. */ .dfx-hero__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.875rem 1.875rem; border-radius: 2px; background: var(--dfx-color-action); color: var(--dfx-obsidian); font-family: var(--dfx-font-body); font-size: var(--dfx-size-body); font-weight: var(--dfx-weight-emphasis); line-height: 1.2; text-decoration: none; } .dfx-hero__reassurance { margin: 1.125rem 0 0; font-family: var(--dfx-font-body); font-size: var(--dfx-size-caption); line-height: 1.5; } @media (max-width: 782px) { .dfx-hero__actions { flex-direction: column; align-items: stretch; } /* Stretching the column stretches Salient's anchor, which is display:block with no text-align of its own — so the label stayed at the left edge of a pill running the full measure. Centering the text is the whole fix: the anchor is not a flex container, so justify-content would do nothing, and nothing in Salient sets text-align on .nectar-button for this to fight. */ .dfx-hero__actions .nectar-button { text-align: center; } } /* ========================================================================= WORKFLOW GRID ========================================================================== The three-column icon + name + one-liner grid on a product page, rendered by template-parts/product/workflow-grid.php. CSS Grid with auto-fit rather than fixed columns and media queries. The column count set in the builder becomes a MAXIMUM, applied as a cap on the track size by the --cols-* classes below, and auto-fit collapses beneath that cap as the container narrows — which matters because this element sits inside a WPBakery column of unknown width, so a viewport media query would be measuring the wrong thing. A three-column grid dropped into a half-width row should reflow, and the viewport has not changed. minmax(15rem, 1fr) is the floor: below about 15rem a two-word workflow name wraps mid-name, which reads as broken rather than as narrow. ====================================================================== */ .dfx-workflow-grid { margin: 0 0 3rem; } /* SECTION TITLES — the workflow grid's and the tier comparison's. Grouped so the two sections a product page can show carry an identical label. Spacing and color only. The type comes from the dfx-h4 utility on the element, paired with whichever level the template set. An earlier version of this rule declared 1rem, the body emphasis weight and letter-spacing 0, which rendered a 16px h2 — a section label wearing a level it did not look like. If the size is wrong, the answer is a different level or a different pairing, not a font-size here. THE HAIRLINE IS A PSEUDO-ELEMENT, NOT AN

    AND NOT A BORDER. It is decoration beside a label rather than a thematic break, so it stays out of the markup and out of the document outline — that part has never changed. BUT IT IS BACK BESIDE THE LABEL, WHICH REVERSES WHAT THIS COMMENT USED TO SAY, and the reversal is deliberate rather than a regression. The rule ran inline once, was moved to border-bottom because "the line started at a different place on every section and moved as soon as anyone retitled one", and is now inline again because that behavior is the requested design and not a defect: a rule that begins where the words end is the point of the pattern. Nobody should read the old objection in the git history and quietly restore the border. What the old objection got right is that this needs a flex context to work at all, so the alignment now depends on the box rather than being guaranteed by it. Two guards follow from that. `align-items: center` puts the line on the optical middle of the label — including when a long title wraps, where it centers on the whole block rather than tracking the first line. And `flex: 1` with `height: 1px` rather than a border on the pseudo-element, so the line owns its thickness and cannot inherit a border color from anywhere. THE 36ch CAP EXEMPTION IS LOAD-BEARING FOR THIS PATTERN, where before it was a correction — and it lives in brand-base.css beside the cap now, not further down this file. brand-base.css caps h1–h3 inside .container-wrap at 36ch and exempts component titles from it; with a border, that cap cropped the line to the width of a headline, which is what the exemption was originally written to fix. With a flex fill it would crop the flex CONTAINER, so the line would stop at 36ch mid-section with empty space beyond it. Same exemption, and it now prevents a worse-looking failure. If the `[class*="__title"]` match there is ever narrowed, this is the pattern that breaks. gap sets the space between the words and the line — 0.75rem, i.e. the 12px asked for, in the file's own unit. margin-bottom then spaces the whole row from the content below. NOTE the total gap to that content is now smaller than it was: the old treatment stacked 0.875rem of padding plus the line plus 2.5rem, and this is 2.5rem alone, because the line no longer sits between them. Left at 2.5rem deliberately — it is the same margin as every other section — but this is the number to raise if the content now reads as too close. */ .dfx-workflow-grid__title, .dfx-tier-comparison__title, .dfx-related__title, .dfx-faqs__title, .dfx-feature-single__title, .dfx-feature-group__title, .dfx-feature-list__heading, .dfx-product-section__title, .dfx-product-family__title, .dfx-workflow-page__title, .dfx-integration-type-page__title, .dfx-family-page__title, .dfx-integrations-grid__title--group, .dfx-forms__title--group { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 2.5rem; color: var(--dfx-color-text); } /* THE GROUP HEADING IS A LINK ON THE HUB since the type archives exist, and a link inside a heading takes Salient's accent color and underline unless told not to. The heading rule above owns the color, so this inherits rather than restating it — one place to change it. The underline arrives on hover, which is where a heading that navigates should announce itself. */ .dfx-integrations-grid__group-link { color: inherit; text-decoration: none; } .dfx-integrations-grid__group-link:hover, .dfx-integrations-grid__group-link:focus-visible { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; } .dfx-workflow-grid__title::after, .dfx-tier-comparison__title::after, .dfx-related__title::after, .dfx-faqs__title::after, .dfx-feature-single__title::after, .dfx-feature-group__title::after, .dfx-feature-list__heading::after, .dfx-product-section__title::after, .dfx-product-family__title::after, .dfx-workflow-page__title::after, .dfx-integration-type-page__title::after, .dfx-family-page__title::after, .dfx-integrations-grid__title--group::after, .dfx-forms__title--group::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--dfx-color-border-subtle); } /* SUB-GROUP HEADINGS ARE A LABEL, NOT A SMALLER HEADING. "Additional features", "Available as add-ons" and "Coming soon" sit under "Core features". Two things had to be fixed and the second is why the first was not enough. The shared rule gave all four the same full-width hairline, which read as four peer sections and undid the ranking the heading levels establish. Removing it then left the heading with nothing to distinguish it from the grid beneath: `.dfx-feature__name` was --dfx-size-h5 in --dfx-font-heading at --dfx-weight-heading in --dfx-color-text, and a heading at .dfx-h5 matched it on ALL FOUR — typographically the same object, separated only by position. The name has since dropped to h6, so the size no longer collides; the other three still do, which is why the treatment stays a difference in kind. So this differs in kind rather than degree — smaller, uppercased, tracked and muted at once. The treatment is `.dfx-eyebrow`'s, which brand-base.css already defines for exactly this role ("small uppercase label above a heading"), applied to a heading element rather than the paragraph the eyebrow class assumes. Nothing new is invented; an existing voice is reused where the pairing table's "Small label" row points. PEWTER, NOT THE EYEBROW'S BRASS. brand-base.css flags brass as low contrast on light and it measures 2.31:1 — the same figure that got it removed from the workflow icons. Pewter is 4.72:1, clear of the 4.5:1 AA needs for text this size, and it is already what secondary means on this page after the icon change. It is also what the h6 label step resolves to now, so this reasoning ended up in the token layer rather than here. THE LABEL IS STILL SMALLER THAN THE ITEMS, and that was the original argument for this rule — 16px from `.dfx-h6` against the 18px item titles. Two pixels is thin, and it is no longer what does the work: case is. Uppercase at 0.14em in muted ink against sentence-case 600 headings is a difference in kind, and the 2px is incidental to it. Worth knowing because the earlier version of this comment leaned on the size gap, and that gap has shrunk from 4px to 2px without the rule getting any weaker. Letter-spacing is NO LONGER set here. It comes from the h6 label step in brand-base.css, along with the transform, the weight and the ink — see the note on the shared rule above for what came out and why. font-weight CHANGES NOTHING TODAY and is declared anyway, which is worth admitting rather than dressing up: --dfx-weight-emphasis and --dfx-weight-heading are both 600, and Salient's own `body h3` sets 600 as well. It is here because this is the eyebrow role and `.dfx-eyebrow` names --dfx-weight-emphasis, so the two move together if the tokens ever diverge. If that reasoning stops being worth a line, delete the line. ON SPECIFICITY, checked rather than assumed. Salient's generated styles carry `.row .col h3 { letter-spacing: 0; font-size: 1.5rem }` at 0-2-1, which would beat both this rule and `.dfx-h6` — and brand-base.css's `.wpb_wrapper h3` at 0-1-1 would take the letter-spacing. Neither reaches here: the bands emit their own `.container.main-content` outside .container-wrap, with no .row, .col or .wpb_wrapper ancestor. That is also why .dfx-h5 was landing at 16px before this change, which is how the collision with the item titles was visible at all. Move this list inside builder content and both would win. NO RULE, AND IT NOW TAKES A PSEUDO-ELEMENT TO SAY SO. This used to read `border-bottom: none`, which stopped meaning anything the moment the hairline became an ::after on the shared rule above — these headings would have grown a divider back without a line of this file changing. `content: none` is the opt-out that matches how the line is actually drawn. The old `padding-bottom: 0` went the same way: the shared rule no longer sets padding, so overriding it was overriding nothing. Margin drops to 1.25rem, which survives from the border era for a reason that still holds: 2.5rem was measured against a rule separating two things, and with no rule at all the heading has to stay attached to the grid it introduces. 0-1-0, matching the rule above and winning on source order rather than escalating, so this stays overridable in turn. SHARED WITH THE PRODUCT ARCHIVE'S FAMILY HEADINGS, declared together rather than copied. "Additional features" on a product page and "Service Intelligence Platform" on /products/ are the same object: a small label naming the set beneath it, one level under a heading that already carries the section's rule. Two rules would drift, and the drift shows up as two nearly-identical labels with slightly different tracking. Each keeps its own margin below, because what follows differs — a feature grid there, a card grid here — so only the type is shared. FOUR DECLARATIONS CAME OUT OF HERE, and their absence is the point. This rule used to set color, weight, letter-spacing and text-transform to make these read as labels. Both elements carry `.dfx-h6`, and the h6 step in brand-base.css is now the LABEL step — it owns uppercase, 0.14em, weight 600 and the muted ink for every level and class that reaches it. So those four lines were not styling these components, they were re-implementing a role that had no single home. Now it has one. font-family SURVIVES, and it is the only property here that was ever really local. The label role is defined against --dfx-font-body while headings use --dfx-font-heading, and these are marked up as headings. Both resolve to different faces today (Inter vs Poppins), so this is doing real work rather than restating a default. IF THESE EVER LOOK WRONG, look at the h6 label block in brand-base.css first. That is the trade this simplification makes: one place to change, one more place to look. */ .dfx-product-group__title { font-family: var(--dfx-font-body); } /* RESTORING THE LABEL INK THE h6 BLOCK ALREADY ASKED FOR, not choosing a new color. This is an `h2.dfx-h6` inside a WPBakery column, so `.row .col h2` in brand-base.css scores 0-2-1 with --dfx-heading-ink and beats `.dfx-h6` at 0-1-0 — the kicker rendered at full heading strength. The doubled selector is 0-3-0, the same shape used for .dfx-integrations-grid__title--group further down. --dfx-label-ink, NOT --dfx-color-text-muted: both are Pewter #676E7E on the section's Signal White (4.72:1, above AA), but 0-3-0 also outruns `.light .dfx-h6` at 0-1-1, so naming the flat token would strand this label at Pewter on a dark band. label-ink resolves to 70% of inherited text there. .dfx-product-section has no dark variant today; this costs nothing and does not have to be revisited if one arrives. */ .dfx-product-group__title, .row .col .dfx-product-group__title { color: var(--dfx-label-ink); } /* NOTHING HERE FOR THE CATEGORY GROUPS ANY MORE, because they are not an accordion any more. They were Salient `[toggles]`, and this block carried the two overrides that instance needed: a Signal White panel with 2em of air on `.inner-toggle-wrap`, escalated to 0-4-3 to clear Salient's own 0-3-2, and a share of the toggle-title size rule further down. Both are gone with the component — see feature-list.php for why the accordion went, and the feature-list section below for what a category label costs now (one margin). IF AN ACCORDION EVER COMES BACK HERE, the escalation is the part worth recovering: a plain `.dfx-feature-list .inner-toggle-wrap` at 0-2-0 loses to `body .toggle[data-inner-wrap="true"] > div .inner-toggle-wrap`, and a tie on specificity would leave the winner to load order. */ /* The commercial state, beside the feature name. Sized down from the standalone chip for the reason the tier ladder's copy of this gives: the component is built for a card title or a table cell and dominates a list row at its own size. */ /* THE GAP BELONGS TO THE NAME, NOT TO THE BADGE. A margin-left on the chip is the obvious way to space them and is wrong at the line break: the margin goes with the chip, so a badge that wrapped to its own line started 8px right of the title above it. A trailing margin here collapses at the end of a line, which leaves the wrapped badge flush left and the inline case unchanged. ONLY WHEN A BADGE ACTUALLY FOLLOWS, WHICH IS THE `:has()`. Unconditionally, those 8px are inline content on every entry, so a name that fits its column by less than 8px wraps anyway — at a 194px track "Two-way appointment sync" measures 184px and broke after "appointment" with nothing after it to make room for. Most entries have no badge, so most were paying for a gap they did not use. `:has()` rather than restructuring the markup, and it is safe to depend on: this stylesheet already uses it for the container-wrap padding fix. Where it is unsupported the badge simply sits flush, which is a cosmetic loss rather than a broken line. */ .dfx-feature__label:has(+ .dfx-badge) { margin-right: 0.5rem; } .dfx-feature__state { /* ZEROED RATHER THAN UNSET. The shared component carries `margin: 0 0 0.5rem` for the stacked contexts it was written for, which here would only make the row taller than its text. */ margin: 0; padding: 0.05rem 0.5rem; white-space: nowrap; vertical-align: 0.1em; } /* THE HEADLINE MEASURE CAP IS LIFTED IN brand-base.css, NOT HERE ANY MORE, and the eight-selector `max-width: none` block that used to sit at this spot is gone. What it did still has to happen — brand-base.css caps h1–h3 inside .container-wrap at 36ch, about 558px at this size, which cropped the hairline to the width of a headline rather than the width of the section. What changed is where. That block named these eight titles one by one, so every new component with a section heading arrived clipped and got a ninth line added; the accordion on /privacy was about to be one. brand-base.css now exempts `[class*="__title"]` beside the cap itself, which covers these and anything later named to the same convention. NOTHING TO ADD HERE FOR A NEW SECTION TITLE, then, as long as it follows the `__title` pattern. If one ever needs a NARROWER measure than full, declare that number on the component — the exemption is 0-2-1 and a component rule beats it. No equivalent was ever needed for the product bands: they render outside .container-wrap, so their headings were never capped. Adding an override there was tried and removed, because a rule that fixes nothing still has to be read by whoever comes next. */ /* THE WORKFLOW GRID — "What it handles". It shared this rule with the product feature list, which sits two bands away on the same page: both were sets of short titled items running different track algorithms and row gaps, so they were declared together to stop them diverging. They have since diverged on purpose — the feature list is a checklist now — and the split is recorded at the foot of this comment. FOUR EXPLICIT TRACKS, replacing auto-fit on both. What auto-fit was actually doing here was resolving a column count from the container width, which meant neither list had a fixed one: at the current measure the workflow grid came out at FIVE columns while the feature list came out at four, so the two never matched and nothing in the CSS said what either was supposed to be. IT ALSO MEANS THE `columns` ARGUMENT NOW WORKS. workflow-grid.php validates that parameter against 2, 3 and 4 and emits a --cols-N class, but only --cols-2 ever capped anything — it used calc( 50% - 1.25rem ) as the track MAXIMUM, which does cap. --cols-4 set minmax( 13rem, 1fr ), which only lowers the floor and still fits five columns at this measure, and --cols-3 had no rule at all, so the documented default of three silently rendered as four or five. Explicit repeat() counts make the parameter mean what it says. 1fr AND NOT A PERCENTAGE, and minmax( 0, 1fr ) rather than a bare 1fr — see the note on the feature list further down, which sets out both. The short version: percentage tracks ignore `gap` and overflow, and a bare `1fr` floors at min-content so one long name or the nectar-cta block the link arrow renders can push a row past the container. Gap is 1em 4em — tight rows, wide columns, so each item reads as a column entry rather than a cell in a mesh. `.dfx-feature-list__items` IS NO LONGER SHARED HERE, and the split is the point. It rode on this rule and on both media queries below, then redeclared itself further down — three places to keep in step for one grid, and the note here used to say so. The feature list is not a grid of entries at all now — it is one list per column, no rows — while this stays four illustrated cells with a summary each. Nothing left to share; its rules live in the feature-list section, all of them together. */ .dfx-workflow-grid__items { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em 4em; margin: 0; padding: 0; list-style: none; } /* The `columns` argument, as counts rather than as floors. Four is the shared base above, so there is no --cols-4 rule here — adding one that repeated the base would be a second place to change it. */ .dfx-workflow-grid--cols-2 .dfx-workflow-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dfx-workflow-grid--cols-3 .dfx-workflow-grid__items { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dfx-workflow-grid .dfx-workflow { margin: 0; padding: 0; list-style: none; } /* Salient's content styles add a bullet and left padding to li inside .container — reset locally rather than fighting it further up the tree. */ .dfx-workflow-grid .dfx-workflow::before { content: none; } /* The cell body. A plain block wrapper — nothing in this grid links any more, see the note in workflow-grid.php. It was `.dfx-workflow__link`, an anchor around the whole cell, and it carried `text-decoration: none` plus hover and focus-visible states. All of that is gone with the anchor: · the underline reset is moot, and was losing anyway. Theme Options emits `.wpb_text_column a { text-decoration: underline }` at 0-1-1 into uploads/salient/salient-dynamic-styles.css, which beat a bare `.dfx-workflow__link` at 0-1-0 whenever the element sat in a Text Block — which is how the shortcode is normally placed. Worth remembering for anything here that IS a link: two classes, or a class plus an element, to clear that 0-1-1. · the hover states had to go rather than be kept. `:hover` fires on a div just as readily as on an anchor, so leaving them would have colored the name on mouseover and promised a click that no longer happens. · `:focus-visible` went because a div is not focusable. */ .dfx-workflow-grid .dfx-workflow__body { display: block; color: inherit; } /* THE BODY COPY'S COLOR — Pewter, via --dfx-color-text-muted, which is the token `.dfx-workflow__summary` uses. THIS DELIBERATELY UNPAIRS THE ICON FROM THE NAME, and it is worth saying so because the previous note here argued the opposite: it had the glyph matching `.dfx-workflow__name` exactly, on the grounds that the cell should read as one object in one color. Two colors in the cell turned out to be the point. The name is the heading, the summary is the copy, and a glyph at full heading weight competed with the name instead of introducing it — three items at 15.5:1 stacked in a column read as three headings. Note the token is NOT --dfx-color-text, despite the name. That is Obsidian #141E2C, which is what the workflow name uses and what this glyph has been. The lighter of the two body tokens is --dfx-color-text-muted: Pewter #676E7E. The trap recorded in the old note still applies in the other direction — `.dfx-workflow__name` overrides the heading element role to --dfx-color-text, so neither the icon nor the name is on --dfx-color-heading, and the three roles here are easy to confuse by name alone. ON CONTRAST, still comfortable. Pewter is 4.72:1 on Signal White — above the 3:1 WCAG 1.4.11 asks of meaningful non-text, and above the 4.5:1 for body text it does not have to meet. These glyphs carry aria-hidden and repeat the label beside them, so they are decorative and the 3:1 figure is the generous reading of the requirement rather than the binding one. Well clear of the 2.31:1 the original brass sat at. The --inverted override further down is unaffected: it sets Signal White outright, so it does not matter which light-background value this carries. */ .dfx-workflow__icon { display: block; margin-bottom: 0.875rem; color: var(--dfx-color-text-muted); font-size: 1.375rem; line-height: 1; } /* Salient sets a shared line-height on .fa; reset it so the glyph's own box drives the spacing above the name. */ .dfx-workflow__icon .fa { line-height: 1; } /* Same as the grid title above: no type declared. These render at whatever level the element was told to use — h3 or h4 — and were previously forced to 16px regardless, which is why an h4 grid item and a 16px h2 section title looked identical while claiming different places in the outline. */ .dfx-workflow__name { margin: 0 0 0.5rem; color: var(--dfx-color-text); } /* THE NAME IS A LINK AGAIN — see the note in workflow-grid.php for why it came back. Same treatment as `.dfx-feature-group__title a`, which links to the same archive from the feature index: no affordance at rest, color on interaction. Eleven underlined names would turn a capability summary into a nav list, which is the mistake the cell-wide anchor made the first time. UNDERLINE ON HOVER AND FOCUS, which the feature archive's version does not carry. Color change alone is a weak cue, and no cue at all for anyone who cannot distinguish the two — adding the rule on interaction costs nothing at rest. SCOPED THROUGH .dfx-workflow-grid FOR SPECIFICITY, (0,2,1). Salient's `.wpb_text_column a` is (0,2,0) and would otherwise repaint and underline these if the grid ever rendered inside builder content — the trap the old cell-anchor version hit. It does not today: the WPBakery workflows element is a tombstone and this is template-rendered, verified as not inside a .wpb_text_column on a product page. NO `.dfx-workflow--unlinked` CLASS, despite the tombstone below describing one. That class existed to drop the affordance from a cell whose term did not resolve; such a cell now prints no anchor at all, so the absence IS the difference and there is nothing to mark. */ .dfx-workflow-grid .dfx-workflow__name a { color: inherit; text-decoration: none; } .dfx-workflow-grid .dfx-workflow__name a:hover, .dfx-workflow-grid .dfx-workflow__name a:focus { color: var(--dfx-color-brand); text-decoration: underline; } .dfx-workflow__summary { margin: 0; color: var(--dfx-color-text-muted); font-family: var(--dfx-font-body); font-size: var(--dfx-size-body-sm); font-weight: var(--dfx-weight-body); line-height: var(--dfx-line-height-ui); /* Caps the measure so a 90-character summary wraps to two lines rather than running the full width of a wide column. */ max-width: 22rem; } /* NO HOVER OR FOCUS STATES. There is nothing to interact with — the cell is a block, not an anchor. The three rules that lived here colored the name on hover, darkened the icon to Brass Hover, and drew a focus ring around the cell; all three described an affordance the grid no longer has, and `:hover` would have kept firing on the div and gone on promising a click. Restore them with the anchor, not before. `.dfx-workflow--unlinked` went the same way. It existed to mark a cell whose term archive did not resolve, so it could drop the affordance the others had. With no affordance anywhere there is nothing to drop, and the class is no longer emitted. */ /* NO DARK-BAND RULES ANY MORE, and this is a tombstone rather than an omission. Five rules keyed on `.dfx-workflow-grid--inverted` used to invert the title, the name, the hairline, the summary and the icon for a grid sitting on a dark full_width_section. NOTHING HAS EMITTED THAT CLASS since the WPBakery workflows element was reduced to a tombstone — the element carried the parameter that set it, and the template part that replaced it never did. So all five were unreachable, including a fix made to the hairline rule while the block was already dead. The comment they sat under said the inversion should "key off Salient's own class rather than a flag on this element", which is what it should have done and never did: the selector was ours throughout. TO BRING THIS BACK, key on `.light` — the class Salient puts on a light-text row, and the one brand-base.css already uses to switch --dfx-heading-ink to currentColor. One thing to know first: the shared section-title rule sets `color: var(--dfx-color-text)` outright, so a title inside a .light row does NOT currently invert through that mechanism. That declaration has to become currentColor, or the inversion has to state the color again, before a dark band reads correctly. Deleting five rules that were doing nothing is what makes that fixable rather than apparently already handled. */ /* No --no-icons gap rule any more. It set 2.25rem, which is now the shared base for both grids, so the override said nothing. The icon-less variant still works — it just inherits the same rhythm as everything else. */ /* THE STEPS DOWN, FOR BOTH GRIDS AND EVERY --cols- VARIANT. Fixing the track counts means these have to be stated: auto-fit used to reflow on its own, and four explicit columns do not. Left alone they would be about 205px wide here — narrow enough that most feature and workflow names wrap, and any item carrying a description reads as a column of fragments. The --cols- selectors are repeated inside the query because they are 0-2-0 and would otherwise beat a 0-1-0 rule on the class alone, holding three or four columns at a width where neither fits. The existing 690px block below already had to do this. Two rather than three, on the 999px boundary the file already uses. Three would hold at 999px and fail at 700px, inside the same query, and a third breakpoint would be one more number to keep in step for one intermediate width. */ @media (max-width: 999px) { .dfx-workflow-grid__items, .dfx-workflow-grid--cols-2 .dfx-workflow-grid__items, .dfx-workflow-grid--cols-3 .dfx-workflow-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 690px) { .dfx-workflow-grid__items, .dfx-workflow-grid--cols-2 .dfx-workflow-grid__items, .dfx-workflow-grid--cols-3 .dfx-workflow-grid__items { grid-template-columns: 1fr; gap: 2rem; } .dfx-workflow-grid__title, .dfx-tier-comparison__title, .dfx-related__title, .dfx-faqs__title, .dfx-feature-single__title, .dfx-feature-group__title { margin-bottom: 1.75rem; } } /* --- Feature list ----------------------------------------------------------- */ /* template-parts/product/feature-list.php — what a product includes, as a checklist grouped under static category labels: Scheduling & Reception, Consumer Solutions, Shop, and the rest of dfx_feature_category. A CHECKMARK AND A NAME, IN FOUR INDEPENDENT COLUMNS. It was four columns of name + one-line description inside Salient accordions, one per category. Both went for the same reason: a product carries up to 46 features and this surface is an inventory the reader scans to find a capability. Nine of ten categories were closed on arrival, and the descriptions made each row three lines tall, so what fitted on screen was about six of them. One-line entries in four columns put a whole product in view — the same count as the old grid, but each column is a list read downward rather than a row of cells. IT NO LONGER SHARES THE WORKFLOW GRID'S MECHANICS, which it was built on — same tracks, same gap, same 22rem description cap, on the argument that a page carrying both should read as one object. That held while both were grids of names with summaries. This is a tick list now, so its rules stand alone here, all of them, rather than half-riding a shared rule at the top of the file. */ .dfx-feature-list { margin: 0 0 3rem; } /* THE GROUP SPACING IS BACK, AND SO ARE THE GROUPS. They were
    s with 3rem between them, then Salient toggles that sat flush and separated themselves with a bottom rule, and now they are
    s again — a label over its own grid. 2.5rem, NOT the 3rem the section carries below it. The gap between a category and the next has to read as smaller than the gap between this whole section and whatever follows, or the last category looks like it belongs to the next band. */ .dfx-feature-list__group + .dfx-feature-list__group { margin-top: 2.5rem; } /* THE CATEGORY LABEL. `.dfx-h6` carries the size, the uppercase, the tracking and the muted ink — that is the LABEL step in brand-base.css, and the same treatment `.dfx-product-group__title` takes over the product archive's family headings. Only the spacing is local. 1rem, TIGHTER THAN THE 1.25rem A LABEL OVER CARDS TAKES. What sits under this one is a column flow of one-line entries 0.75em apart, so a label 20px clear of it would float further from the entries it names than they sit from each other. NO font-family, AND THAT IS A MEASUREMENT RATHER THAN A PREFERENCE. `.dfx-h6` is the label role and the role is defined against --dfx-font-body, so this rule was written as `font-family: var(--dfx-font-body)` — the same declaration `.dfx-product-group__title` carries with a note calling it the one property that is really local there. IT LOSES, AND SO DOES THAT ONE. Salient's css/fonts.php emits the h3 family with `!important` from Theme Options, so this label renders in Poppins whatever selector is written here: probed on a product page at 0-1-0, 0-2-0 and 0-4-3, all Poppins, and only `!important` flipped it to Inter. So the declaration came out rather than being escalated, because every OTHER section label on the site — the archive's family headings, the feature grid's — is losing the identical fight and rendering in Poppins. One label in Inter would be the odd one out, and `!important` here would have to be repeated on all of them. The rest of the label treatment is unaffected: uppercase, 0.14em, weight 600 and --dfx-label-ink all reach it, because brand-base's h6 block is escalated to clear Salient's generated file for exactly this reason. Only the family carries !important. `.row .col` IS NOT ESCALATED AGAINST HERE, unlike `.dfx-product-group__title`, and the difference is worth knowing before this moves: the product page renders its bands outside `.container-wrap` with no .row or .col ancestor, so Salient's `.row .col h3` at 0-2-1 does not reach — verified on /products/scheduling-package. Drop this section inside builder content, which the Feature List element does, and that rule takes the color and the letter-spacing. If a label ever renders as full-strength heading ink, that is why; the fix is the doubled selector used at `.row .col .dfx-product-group__title`. */ .dfx-feature-list__label { margin: 0 0 1rem; } /* `.dfx-feature-list--flat` HAS NO RULE HERE, AND THAT IS THE FINISHED STATE. The Feature List element's group labels can be turned off, and that branch renders a single