/* * Fluent Commerce 2026 design system — layout engine. * * Adopted from the export's system/responsive.css. That file describes itself as * a proposal held outside the read-only _ds/ bundle; it is the only stylesheet in * the design build, because container queries and fluid type cannot be expressed * as inline styles. Everything structural about the design lives here. * * ── THE MODEL ─────────────────────────────────────────────────────────────── * * The page is a CONTAINER, not a viewport. Every breakpoint below is a * @container query against a named container, so the same markup reflows * correctly inside a 390px frame or a 1920px canvas. Named breakpoints are * 1920 / 1440 / 1024 / 768 / 390, and each query threshold sits just ABOVE its * breakpoint (1500 / 1100 / 820 / 440) so the named width itself receives the * treatment intended for it. * * ── THE ONE STRUCTURAL CHANGE FROM THE EXPORT ─────────────────────────────── * * The export puts the container on : * * body { container-type: inline-size; container-name: page; width: 1920px; … } * * That cannot ship on WordPress. container-type: inline-size applies layout * containment, and a layout-contained element becomes the containing block for * every position:fixed descendant inside it. On a screen wider than 1920 the * body is centred, so anything fixed would be offset by the left margin and * measured against the page's height rather than the viewport. Two things break: * * 1. #wpadminbar — WordPress's own fixed bar, a child of . * 2. Any fixed overlay of ours, e.g. the nav drawer. * * So the container moves to a wrapper, .fc-shell, and #wpadminbar stays outside * it as a normal body child and is unaffected. The design's two-element split is * preserved for the reason the export gives: a container cannot be restyled by * its own @container query, so the tokens have to hang on an inner element. * * .fc-shell the container — width, centring, container-type * .fc-page the token bearer — all the fluid constants and type ramps * * The drawer is then solved without fixed positioning at all — see chrome.css. * It is absolutely positioned inside the sticky nav shell, which gets the same * result with none of the containment trouble. * * ── WHAT IS IN HERE, AND WHAT IS IN pages.css ─────────────────────────────── * * This file is the engine: the container, the scale, and the primitives that any * future page will reach for — grids, splits, the fold, the marquee, the record * sleeve, the stat band, type roles. pages.css holds the COMPOSITIONS that only * the home and OMS pages make out of them (the bento, the capability rows, the * pattern panels, the FAQ). The test for which file a rule belongs in is whether * a third page could plausibly use it, not which page it first appeared on. * * Still deliberately absent, because nothing on the site uses them yet: the * quote rail and its fade lead-in, .fc-wordmark-*, .fc-grid-7, the .fc-hero / * .fc-plate min-heights, and the TestimonialCard width release. They come back * with the pages that need them. * * @package Fluent_Commerce */ /* ───────────────────────────────────────────────────────────────────────────── * THE CONTAINER * ────────────────────────────────────────────────────────────────────────── */ body.fc-ds .fc-shell { container-type: inline-size; container-name: page; width: var(--canvas, 1920px); max-width: 100%; margin: 0 auto; } /* * overflow-x: clip, not hidden. clip prevents sideways scroll WITHOUT creating a * scroll container, which matters because the nav is position:sticky — hidden * here would make .fc-page the scrollport and the nav would never stick. */ body.fc-ds .fc-page { width: 100%; overflow-x: clip; overflow-y: visible; } /* ───────────────────────────────────────────────────────────────────────────── * THE PAGE'S SCALE * Layout constants and fluid type, on the inner element. * ────────────────────────────────────────────────────────────────────────── */ body.fc-ds .fc-page { /* Layout constants, now fluid. Each 1920 value is the system's number. */ --gutter-page: 207px; /* * THE FOOTER GUTTER RAMPS. IT USED TO STEP. * * This is the only gutter in the system that interpolates rather than * steps, and it is the only one that has to. 356px is a quarter of the * footer's width at 1920 — far and away the biggest inset here — so held * flat between breakpoints it eats a share of the page that grows as the * page narrows, and it is doing that to the one region of the site that * has to fit four columns of link text side by side. Every other gutter is * small enough that a step costs nothing. Measured 2026-08-26, stepped: * * viewport 1920 → footer content 1193px → four link columns @ 191px * viewport 1680 → footer content 953px → four link columns @ 138px * viewport 1536 → footer content 809px → four link columns @ 102px * viewport 1440 → footer content 1065px → four link columns @ 166px * viewport 1180 → footer content 805px → four link columns @ 101px * * Read the middle two lines again: the footer was NARROWER at 1536 than at * 1440. Each breakpoint dropped the gutter in one move — 356 → 180 → 72 — * so crossing one made the content jump wider, and the widths just above a * step were worse than the widths well below it. The band above each step * carried the damage: 102px at 1536 and 101px at 1180, and 100px is not a * column, it is a stack of two-word fragments. This is the second half of * the overlap reported on 2026-08-26; the first half was the nowrap in * chrome.css. * * So interpolate. One straight line spans the entire four-column range, * from the widest canvas down to the width where the columns become two, * and it is pinned at both ends to a number the design already gives us — * 356 at 1920, and the 72 the tablet step uses at 1100. Slope 284/820 = * 34.63cqw, intercept −309px. Only the line between the two anchors is * ours, and a straight line between two of a system's own values is the * smaller deviation. * * One line, not one per band. The first attempt at this ramped 356→180 * above the 1500 step and 180→72 below it, keeping all three of the * system's numbers; but two lines with different slopes meeting at a * breakpoint still leave a kink, and measurement showed content dipping * 5px crossing 1500 — the original bug in miniature. A single line has no * seam to get wrong. The cost is that 1440 now sits at 185 rather than * exactly 180, and 180 was only ever a step value, not a design mark. * * cqw, not vw: the container is .fc-shell, capped at --canvas, so the * gutter stops growing where the canvas does rather than tracking a 3440 * monitor. The line reaches 72 exactly at container 1100, so the handover * to the tablet step below is continuous and the clamp floor never fights * it. That the arithmetic lands on the step's own value is the check that * says the two anchors were consistent to begin with. * * Footer content width now rises the whole way — 958 at 1120, 976 at 1180, * 1056 at 1440, 1086 at 1536, 1130 at 1680, 1204 at 1920 — and the columns * with it: 139 / 144 / 164 / 170 / 178 / 193. Monotonic at last, so no * width is worse than a narrower one, and 1920 keeps the design's inset to * the pixel. */ --gutter-footer: clamp(72px, calc(34.63cqw - 309px), 356px); --indent-body: 132px; --gap-nav: 44px; --gap-cards: 33px; --gap-blocks: 120px; --pad-section: 120px; --logo-h-nav: 40px; --logo-clear-nav: calc(var(--logo-h-nav) * 0.62); /* the clear-space rule, as a token */ --nav-height: 90px; --card-max: 420px; --gap-marquee: 96px; /* between phrases in the scrolling band */ --marquee-height: 62px; --sleeve-max: 420px; /* a record sleeve is square, so this is its height too */ /* * Fluid type. Each ramp is linear between 390 and 1920 and clamped at both * ends, so the display serif never steps at a breakpoint. These override the * fixed values in tokens.css — same names, deliberately. * * The three body steps are the exception, and they are pinned on purpose — see * the note on them below. */ --type-display-80: clamp(40px, calc(29.80px + 2.614cqw), 80px); --type-display-72: clamp(36px, calc(26.82px + 2.353cqw), 72px); --type-display-62: clamp(32px, calc(24.35px + 1.961cqw), 62px); --type-display-48: clamp(28px, calc(22.90px + 1.307cqw), 48px); /* * 40 is Build-15's, and the export references it without ever defining it — an * undefined var in the file it came from, so the intent (40px) is all it gives us. * Derived here from this ramp's own rule rather than invented: floor 26 sits between * display-48's 28 and title-32's 24, slope is (40 − 26) / 15.30 per cqw, and the * intercept puts it at exactly 40.00px in a 1920 container and on its floor at 390, * like every other step. */ --type-display-40: clamp(26px, calc(22.43px + 0.915cqw), 40px); --type-h3-48: clamp(30px, calc(25.40px + 1.176cqw), 48px); --type-title-32: clamp(24px, calc(21.96px + 0.523cqw), 32px); --type-lead-26: clamp(20px, calc(18.47px + 0.392cqw), 26px); --type-h5-24: clamp(20px, calc(18.98px + 0.261cqw), 24px); /* * ── READING SIZE: PINNED, AND TWO STEPS ABOVE THE EXPORT ──────────────── * * Body copy does not scale with the viewport, and it is set two pixels above * the export's own numbers. Decided 2026-08-21 after review, and it is the one * place the 2026 system knowingly departs from the design file, so it is worth * being explicit about what changed and why the neighbours did not. * * token export here used for * --type-body-18 18 20 kickers, leads — display-adjacent * --type-body-16 16 18 the paragraph size on every page * --type-body-15 15 17 copy inside a card, a table, a panel * * Two things follow, both deliberate. First, +2 across all three keeps the * 2/1 spacing between the steps, so the hierarchy is unchanged — this is a * reading-size decision, not a re-scale. Second, dropping the clamp means the * measure now shortens as the viewport does instead of the type shrinking with * it, which is the normal way to set body copy and the reason the ramps were * questioned in the first place: at 1440 the old --type-body-16 resolved to * about 15px and on a phone to 14px, so the site's reading size was a function * of the reader's window. * * Everything around them stays fluid — display serif, leads, eyebrows, labels, * numerals, mono. Those are composition, and they are sized against the layout * rather than read at length. * * tokens.css still carries 18 / 16 / 15, because that file is the export's * literal values and should keep saying what the export said. This is the * override layer; the difference between the two files is the record. * * /?fc-body=16 and /?fc-body=fluid on the home page hold the two alternatives * this was chosen over — see fluent_commerce_ds_body_size_preview() in * inc/ds.php, which is temporary and says so. */ --type-body-18: 20px; --type-body-16: 18px; --type-body-15: 17px; --type-eyebrow-16: clamp(13px, calc(12.24px + 0.196cqw), 16px); --type-label-18: clamp(15px, calc(14.24px + 0.196cqw), 18px); --type-label-12: clamp(10.5px, calc(9.99px + 0.131cqw), 12.47px); --type-quote-32: clamp(24px, calc(21.96px + 0.523cqw), 32px); --type-quote-24: clamp(20px, calc(18.47px + 0.392cqw), 24px); --type-numeral-96: clamp(56px, calc(45.80px + 2.615cqw), 96px); --type-numeral-48: clamp(32px, calc(27.92px + 1.046cqw), 48px); --type-numeral-32: clamp(24px, calc(21.96px + 0.523cqw), 32px); --type-numeral-24: clamp(18px, calc(16.47px + 0.392cqw), 24px); --type-mono-15: clamp(12px, calc(11.24px + 0.196cqw), 15px); --type-mono-14: clamp(12px, calc(11.49px + 0.131cqw), 14px); /* * ── FORM SIZE: ONE NUMBER FOR THE FIELD AND ITS LABEL ─────────────────── * * Flat, off the ramps, and off the body scale above. Two rules in one token: * * 1. A control is never below 16px. iOS zooms the page when a field under * 16px takes focus, and a ramped size drops under it on exactly the * device where a long form is hardest to fill in. Every form in the * system had written this number out with its own copy of that reason; * the reason lives here now. * 2. Any visible label inside a form is set to the same number, at the same * weight — --fw-medium, and not bold. Asked for 2026-08-24 after the * event form's "Will you be staying for dinner?" came through semibold at * --type-body-18 — 20px here — against 16px fields, so the question read * as a heading over the controls it belongs to. A label and its field are * one thing and are set as one. Position and wording are what mark a * label as a label; it does not need weight as well. * * Two exceptions, both deliberate and both documented where they are — the * uppercase .fc-meta micro-labels on the two single-field email forms, which * are eyebrows rather than field labels, and .fc-consent at 14px, which is the * consent record's own size (see inc/ds-consent.php). */ --fc-field-size: 16px; } /* ── 1440 ── wide desktop. Gutters tighten; nothing else moves. */ @container page (max-width: 1500px) { body.fc-ds .fc-page { --gutter-page: 120px; /* No --gutter-footer here. It ramps continuously through this * breakpoint and the next — see the note on the base value. */ --gap-blocks: 96px; } } /* ── 1024 ── tablet landscape. Splits stack; the 132 indent halves. */ @container page (max-width: 1100px) { body.fc-ds .fc-page { --gutter-page: 72px; --gutter-footer: 72px; --indent-body: 66px; --gap-nav: 20px; --gap-blocks: 72px; --pad-section: 96px; } } /* ── 768 ── tablet portrait. The indent collapses; the nav shrinks. */ @container page (max-width: 820px) { body.fc-ds .fc-page { --gutter-page: 40px; --gutter-footer: 40px; --indent-body: 0px; --gap-cards: 20px; --gap-blocks: 54px; --pad-section: 72px; --nav-height: 84px; --gap-marquee: 54px; --marquee-height: 56px; } } /* ── 390 ── phone. */ @container page (max-width: 440px) { body.fc-ds .fc-page { --gutter-page: 20px; --gutter-footer: 20px; --gap-blocks: 32px; --pad-section: 54px; --nav-height: 76px; } } /* ───────────────────────────────────────────────────────────────────────────── * SECTION SHELL * Vertical rhythm is padding inside a section; the gutter is horizontal. Two * adjacent sections that must read as one composition kill the seam with * .fc-section-b0 on the first and .fc-section-t0 on the second. * ────────────────────────────────────────────────────────────────────────── */ body.fc-ds .fc-section { padding: var(--pad-section) var(--gutter-page); } body.fc-ds .fc-section-t0 { padding-top: 0; } body.fc-ds .fc-section-b0 { padding-bottom: 0; } body.fc-ds .fc-bleed { padding-left: 0; padding-right: 0; } body.fc-ds .fc-center { max-width: min(1202px, 100%); margin-left: auto; margin-right: auto; } body.fc-ds .fc-indent { padding-left: var(--indent-body); } /* ───────────────────────────────────────────────────────────────────────────── * THE RULED COLUMN * Two hairlines running the full height of a run of sections at the gutter, with * the copy inset a further 40px from them. The design draws the pair once, as * ::before/::after on a single wrapper around every section in the run; here each * section draws its own pair, and because the sections stack with no gap between * them the segments meet and read as two continuous lines. inc/ds-security.php * has the long version of why per-section beats a wrapper — chiefly that every * section stays a top-level sibling, the way every other composed page is built. * * Here rather than in security.css, where it started, for the reason the crosslink * moved out of blog.css: the Trust Center was the first page to rule its column * and the Integrations page is the second, so it is a primitive and not one page's * treatment. Two consequences worth knowing before editing: * * · A ruled section's horizontal padding is gutter + 40, NOT the gutter. The * verticals sit at the gutter and the copy has to clear them. * · A dark section HIDES the ink hairlines its neighbours draw, so it redraws * them in bone with .fc-ruled--dark. That is the export's [data-tone="dark"] * switch, and its .fc-ruled-carry + two .fc-ruled-line spans, written as one * class because it is a surface change and not two more empty elements. * ────────────────────────────────────────────────────────────────────────── */ body.fc-ds .fc-ruled { --fc-rule: var(--fc-ink-a20); position: relative; } /* * --fc-rule is declared on .fc-ruled and not on .fc-section.fc-ruled below, so that * this override can be a single class and still win: same specificity, later source. */ body.fc-ds .fc-ruled--dark { --fc-rule: var(--fc-bone-a20); } body.fc-ds .fc-section.fc-ruled { padding-left: calc(var(--gutter-page) + 40px); padding-right: calc(var(--gutter-page) + 40px); } body.fc-ds .fc-ruled::before, body.fc-ds .fc-ruled::after { content: ""; position: absolute; top: 0; bottom: 0; width: var(--stroke-1); background: var(--fc-rule); pointer-events: none; } body.fc-ds .fc-ruled::before { left: var(--gutter-page); } body.fc-ds .fc-ruled::after { right: var(--gutter-page); } /* * The 40px inset halves below 768. The gutter is already down to 40px there and on * to 20 at 390, so holding a 40px inset as well would leave a phone about 270px of * measure — the rules would be costing more than they are worth. */ @container page (max-width: 820px) { body.fc-ds .fc-section.fc-ruled { padding-left: calc(var(--gutter-page) + 20px); padding-right: calc(var(--gutter-page) + 20px); } } /* * A hairline BETWEEN two sections of the same surface, drawn as its own element * because a border on either section would sit inside that section's padding rather * than on the seam between them. Full-bleed, so it also closes the 1px gap the ruled * column's verticals leave as they pass it. Ink by default, bone beside a dark * section. */ body.fc-ds .fc-seam { height: var(--stroke-1); background: var(--fc-ink-a20); } body.fc-ds .fc-seam--dark { background: var(--fc-bone-a20); } /* ───────────────────────────────────────────────────────────────────────────── * GRIDS * N-up at 1920/1440, then the documented step-downs. * ────────────────────────────────────────────────────────────────────────── */ body.fc-ds .fc-grid { display: grid; gap: var(--gap-cards); } body.fc-ds .fc-grid-2 { grid-template-columns: repeat(2, 1fr); } body.fc-ds .fc-grid-3 { grid-template-columns: repeat(3, 1fr); } body.fc-ds .fc-grid-4 { grid-template-columns: repeat(4, 1fr); } body.fc-ds .fc-grid-5 { grid-template-columns: repeat(5, 1fr); } /* * .fc-cols-5 is not a grid of cards — it is a five-column RULED TABLE, the * hairline-divided comparison block. Hence its own name: the borders come from * the composition (see pages.css), and it never inherits --gap-cards, because a * gap would break the shared rules that are the whole point of it. */ body.fc-ds .fc-cols-5 { display: grid; grid-template-columns: repeat(5, 1fr); } /* 1024: 5→3, 4→2, 2→1. The 3-up holds — three cards still read at this width. */ @container page (max-width: 1100px) { body.fc-ds .fc-grid-5, body.fc-ds .fc-cols-5 { grid-template-columns: repeat(3, 1fr); } body.fc-ds .fc-grid-4 { grid-template-columns: repeat(2, 1fr); } body.fc-ds .fc-grid-2 { grid-template-columns: 1fr; } } /* 768: 3→2, 5→2 */ @container page (max-width: 820px) { body.fc-ds .fc-grid-3, body.fc-ds .fc-grid-5, body.fc-ds .fc-cols-5 { grid-template-columns: repeat(2, 1fr); } } /* 390: everything is one column */ @container page (max-width: 440px) { body.fc-ds .fc-grid-3, body.fc-ds .fc-grid-4, body.fc-ds .fc-grid-5, body.fc-ds .fc-cols-5 { grid-template-columns: 1fr; } } /* ───────────────────────────────────────────────────────────────────────────── * BLOCK — CROSSLINK * Three destinations on hairlines. Same hover grammar as the card: the rule and the * kicker come up to full ink together. * * Here rather than in blog.css, where it started, because it is no longer a blog * block: a post ends with one and so does the contact page, and those two views load * different composition stylesheets. Ink-on-light throughout — every section that has * ever carried this block is bone, including the one under the dark contact page. * ────────────────────────────────────────────────────────────────────────── */ body.fc-ds .fc-crosslink__grid { column-gap: var(--sp-54); row-gap: var(--sp-54); } body.fc-ds .fc-crosslink__item { display: flex; flex-direction: column; gap: var(--sp-24); padding-top: var(--sp-32); border-top: var(--stroke-1) solid var(--fc-ink-a20); color: var(--fc-ink-a60); transition: color var(--dur-base) var(--ease-out), border-top-color var(--dur-base) var(--ease-out); } body.fc-ds .fc-crosslink__item:hover { color: var(--fc-ink-12); border-top-color: var(--fc-ink-12); } body.fc-ds .fc-crosslink__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-24); } body.fc-ds .fc-crosslink__kicker { color: inherit; } body.fc-ds .fc-crosslink__title { font-family: var(--font-display); font-weight: var(--fw-regular); /* The design's own clamp for this block — it runs larger than a card title. */ font-size: clamp(30px, 3.1cqw, 48px); line-height: 1.05; letter-spacing: var(--ls-display); color: var(--fc-ink-12); text-wrap: pretty; } body.fc-ds .fc-crosslink__blurb { font-size: var(--type-body-18); line-height: var(--lh-body); color: var(--fc-ink-a80); } /* ═════════════════════════════════════════════════════════════════════════════ * BLOCK — EMAIL CTA * * One eyebrow, one serif question, one field, one button. The design ships six copy * variants and three tones from a single component; the copy is in * fluent_commerce_ds_cta_copy() and the tones are the two classes below. * * Here rather than in blog.css, where it started, for the same reason the crosslink * moved: a post and a listing end with one, and so does the Integrations page, which * loads pages.css instead of blog.css. Third caller, different composition * stylesheet — it is a primitive. * * TONE IS SEVEN CUSTOM PROPERTIES, not a second copy of the block. Every colour in * here reads one of them, so .fc-emailcta--dark is seven declarations and no * duplicated geometry. They are named for their JOB and not their value, which is why * --fc-cta-inv (the submit label) is white on light but ink on dark: it is always the * colour of the surface behind the block. * * `white` on light is flagged in the design as a third surface the system does not * sanction (System gaps.md) — used where a page needs a light break before the ink * footer. Kept, because the alternative is bone-on-bone against the page and the * block would disappear. * * NOT WIRED TO SALESFORCE — but it does not drop the address either. The Salesforce * work is parked pending the custom Lead field IDs from the SF admin, so this posts * to admin-post.php, stores the lead in fc_leads marked 'skipped' with the reason, * and returns the design's success panel with the row's own reference. The report * page's gate posts to the same handler. See fluent_commerce_ds_handle_cta() in * inc/ds-blocks.php. * * SINCE 2026-08-26 IT CAPTURES NOTHING AT ALL. The field is replaced by a "Talk to us" * button to /contact/ while the site's forms move to Pardot one at a time — see * fluent_commerce_ds_cta_captures() and THE ASK below. Every rule above is still the * live styling of the form branch, which returns with one filter. * ══════════════════════════════════════════════════════════════════════════ */ body.fc-ds .fc-emailcta { background: var(--surface-lightest); --fc-cta-on: var(--fc-ink-12); --fc-cta-inv: var(--fc-white); --fc-cta-muted: var(--fc-ink-a80); --fc-cta-dim: var(--fc-ink-a60); --fc-cta-hair: var(--fc-ink-a20); --fc-cta-field: var(--fc-white); --fc-cta-ghost: var(--fc-ink-a40); } /* * On ink. The field loses its fill rather than taking a dark one — a filled box on * ink reads as a second surface, and the design draws it as an outline. bone-a40 for * the placeholder is the token's stated purpose, not an approximation. */ body.fc-ds .fc-emailcta--dark { background: var(--fc-ink-12); --fc-cta-on: var(--fc-bone); --fc-cta-inv: var(--fc-ink-12); --fc-cta-muted: var(--fc-bone-a80); --fc-cta-dim: var(--fc-bone-a60); --fc-cta-hair: var(--fc-bone-a20); --fc-cta-field: transparent; --fc-cta-ghost: var(--fc-bone-a40); } body.fc-ds .fc-emailcta__eyebrow { color: var(--fc-cta-dim); } body.fc-ds .fc-emailcta__title { margin-top: var(--sp-24); color: var(--fc-cta-on); } body.fc-ds .fc-emailcta__body { max-width: 520px; margin-top: var(--sp-32); font-size: var(--type-body-18); line-height: var(--lh-loose); color: var(--fc-cta-muted); } body.fc-ds .fc-emailcta__form { display: flex; flex-direction: column; gap: 12px; } body.fc-ds .fc-emailcta__label { color: var(--fc-cta-dim); } body.fc-ds .fc-emailcta__row { display: flex; gap: 12px; flex-wrap: wrap; } body.fc-ds .fc-emailcta__input { /* 320px basis, but it may shrink — the row wraps before the field gets silly. */ flex: 1 1 320px; height: 48px; padding: 0 var(--sp-16); border: var(--stroke-1) solid var(--fc-cta-hair); border-radius: var(--radius-10); background: var(--fc-cta-field); font-family: var(--font-core); /* The form size — see THE CONSENT BLOCK below. */ font-size: var(--fc-field-size); font-weight: var(--fw-medium); color: var(--fc-cta-on); } body.fc-ds .fc-emailcta__input::placeholder { color: var(--fc-cta-ghost); } body.fc-ds .fc-emailcta__input:focus { outline: var(--stroke-1) solid var(--fc-violet); outline-offset: 0; border-color: var(--fc-violet); } body.fc-ds .fc-emailcta__input[aria-invalid="true"] { border-color: var(--fc-red); } body.fc-ds .fc-emailcta__submit { flex: none; height: 48px; padding: 0 var(--sp-24); border: var(--stroke-1) solid var(--fc-cta-on); border-radius: var(--radius-10); background: var(--fc-cta-on); font-family: var(--font-core); font-size: 14px; font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fc-cta-inv); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } body.fc-ds .fc-emailcta__submit:hover { background: transparent; color: var(--fc-cta-on); } body.fc-ds .fc-emailcta__submit[aria-busy="true"] { opacity: 0.6; pointer-events: none; } /* * THE ASK. While the block points at the contact page instead of collecting an address * — see fluent_commerce_ds_cta_captures() — the field and the row are gone and the * button is an . It keeps .fc-emailcta__submit, so it is the same button in both * tones and cannot drift from the one it stands in for; these are the declarations an * anchor needs that a